axe/default.css at main · anderix/axe · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
/*
 * Axe Default Brand — the baseline every site falls back to.
 * Don't edit this per-site; a site overrides it with its own sibling
 * brand.css, layered after this file (later cascade wins).
 * Primary: #1a6b7c  Secondary: #1e2a35
 *
 * Author: David M. Anderson
 * Built with AI assistance (Claude, Anthropic)
 */

:root {
    /* Colors — Light */
    --color-bg:           #f2f5f6;
    --color-surface:      #ffffff;
    --color-text:         #111820;
    --color-text-muted:   #566470;
    --color-border:       #d8dfe3;
    --color-accent:       #1a6b7c;
    --color-accent-hover: #135768;
    --color-highlight:       #d98c1f;
    --color-highlight-hover: #b8751a;
    --color-nav-bg:       #1e2a35;
    --color-nav-text:     #edf0f2;

    /* State — semantic status colors */
    --color-danger:       #d23b3b;
    --color-success:      #2f9e5e;
    --color-warning:      #c8841c;

    /* Typography */
    --font-body:    system-ui, Arial, Helvetica, sans-serif;
    --font-heading: var(--font-body);
    --font-mono:    'Courier New', Courier, monospace;
    --line-height:  1.7;

    /* Shape */
    --radius: 5px;

    /* Shadow */
    --shadow:    0 1px 3px rgba(0, 0, 0, 0.09);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.11);

    /* Calendar — categorical event colors (chips & bars). The hue is set
       per event in JS; these tune the shared saturation and lightness and
       the fallback hue for uncategorized events. Theme-independent by
       default; a brand may override them, including per theme. */
    --cal-cat-hue:        210;
    --cal-cat-saturation: 55%;
    --cal-cat-lightness:  50%;
}

/* Dark mode — system preference */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --color-bg:           #0b1017;
        --color-surface:      #111820;
        --color-text:         #e4e9ed;
        --color-text-muted:   #8494a0;
        --color-border:       #1e2a35;
        --color-accent:       #38b8cc;
        --color-accent-hover: #4cc8dc;
        --color-highlight:       #f0a030;
        --color-highlight-hover: #ffb44a;
        --color-nav-bg:       #080d12;
        --color-nav-text:     #dce3e8;
        --color-danger:       #f0635f;
        --color-success:      #46c07e;
        --color-warning:      #e3a53f;
        --shadow:             0 1px 3px rgba(0, 0, 0, 0.4);
        --shadow-md:          0 4px 12px rgba(0, 0, 0, 0.5);
        /* Lighten categorical chips/bars so they pop on dark surfaces. */
        --cal-cat-lightness:  62%;
    }
}

/* Dark mode — manual override */
[data-theme="dark"] {
    --color-bg:           #0b1017;
    --color-surface:      #111820;
    --color-text:         #e4e9ed;
    --color-text-muted:   #8494a0;
    --color-border:       #1e2a35;
    --color-accent:       #38b8cc;
    --color-accent-hover: #4cc8dc;
    --color-highlight:       #f0a030;
    --color-highlight-hover: #ffb44a;
    --color-nav-bg:       #080d12;
    --color-nav-text:     #dce3e8;
    --color-danger:       #f0635f;
    --color-success:      #46c07e;
    --color-warning:      #e3a53f;
    --shadow:             0 1px 3px rgba(0, 0, 0, 0.4);
    --shadow-md:          0 4px 12px rgba(0, 0, 0, 0.5);
    /* Lighten categorical chips/bars so they pop on dark surfaces. */
    --cal-cat-lightness:  62%;
}

/* Light mode — explicit override */
[data-theme="light"] {
    --color-bg:           #f2f5f6;
    --color-surface:      #ffffff;
    --color-text:         #111820;
    --color-text-muted:   #566470;
    --color-border:       #d8dfe3;
    --color-accent:       #1a6b7c;
    --color-accent-hover: #135768;
    --color-highlight:       #d98c1f;
    --color-highlight-hover: #b8751a;
    --color-nav-bg:       #1e2a35;
    --color-nav-text:     #edf0f2;
    --color-danger:       #d23b3b;
    --color-success:      #2f9e5e;
    --color-warning:      #c8841c;
    --shadow:             0 1px 3px rgba(0, 0, 0, 0.09);
    --shadow-md:          0 4px 12px rgba(0, 0, 0, 0.11);
}