-
-
Notifications
You must be signed in to change notification settings - Fork 654
Expand file tree
/
Copy pathglobals.css
More file actions
153 lines (142 loc) · 5.79 KB
/
Copy pathglobals.css
File metadata and controls
153 lines (142 loc) · 5.79 KB
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
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
@import "tailwindcss";
@import "tw-animate-css";
@layer base {
:root {
--background: 0 0% 100%;
--foreground: 222.2 84% 4.9%;
--card: 0 0% 100%;
--card-foreground: 222.2 84% 4.9%;
--popover: 0 0% 100%;
--popover-foreground: 222.2 84% 4.9%;
--primary: 221.2 83.2% 53.3%;
--primary-foreground: 210 40% 98%;
/* Neutrals sit at ~16% saturation rather than the stock 40%, so the chrome
reads as grey next to the map instead of tinting blue. --accent is one
step darker than --muted so hover fills register on white surfaces. */
--secondary: 220 16% 96%;
--secondary-foreground: 222.2 47.4% 11.2%;
--muted: 220 16% 96%;
/* Darkened from 46.9% L so secondary text meets WCAG AA (4.5:1) even on the
muted/secondary backgrounds it is paired with (e.g. kbd badges). */
--muted-foreground: 215.4 16.3% 40%;
--accent: 220 16% 94%;
--accent-foreground: 222.2 47.4% 11.2%;
--destructive: 0 84.2% 60.2%;
--destructive-foreground: 210 40% 98%;
/* --border is decorative (dividers, panel edges); --input is a control
boundary, so it is deliberately darker. See the note in .dark below. */
--border: 220 15% 88%;
--input: 220 13% 76%;
--ring: 221.2 83.2% 53.3%;
--radius: 0.5rem;
}
/* Dark mode is built as an explicit elevation ladder. Previously --background,
--card and --popover were all 222.2 84% 4.9%, and --border, --input,
--muted, --secondary and --accent were all 217.2 32.6% 17.5% — five tokens,
one colour — so panels, dialogs and menus were indistinguishable from the
app canvas and only a 1px border separated them. Each step below is a
distinct surface:
background 9% app canvas / base chrome
card 12% toolbar, docked panels
popover 15% menus, tooltips, dialogs
muted 20% inset fills (status bar, wells)
accent 22% hover fill — must read above popover, since menu items
sit on it
Saturation also drops from 84% to ~22%: the old value was a strongly
blue-tinted near-black that clashed with satellite imagery in the map view.
Every foreground/surface pair here clears WCAG AA 4.5:1 (lowest is
muted-foreground on accent at 4.82:1). */
.dark {
--background: 222 24% 9%;
--foreground: 210 40% 98%;
--card: 222 22% 12%;
--card-foreground: 210 40% 98%;
--popover: 222 21% 15%;
--popover-foreground: 210 40% 98%;
--primary: 217.2 91.2% 59.8%;
--primary-foreground: 222.2 47.4% 11.2%;
--secondary: 220 18% 20%;
--secondary-foreground: 210 40% 98%;
--muted: 220 18% 20%;
--muted-foreground: 215 20.2% 65.1%;
--accent: 220 18% 22%;
--accent-foreground: 210 40% 98%;
--destructive: 0 62.8% 30.6%;
--destructive-foreground: 210 40% 98%;
--border: 220 14% 26%;
--input: 220 12% 38%;
/* Matches --primary, as every non-default accent scheme below already does,
so the focus ring stays visible against the lifted surfaces. */
--ring: 217.2 91.2% 59.8%;
}
/* Accent color schemes. Each scheme overrides only the accent-bearing tokens
(primary / its foreground / focus ring); the neutral base inherited from
:root and .dark is left untouched. Selected via a `data-theme` attribute on
<html> (see apps/.../lib/theme-schemes.ts). The default "blue" scheme needs
no block here because it equals the base :root / .dark values above. */
[data-theme="violet"] {
--primary: 262.1 83.3% 57.8%;
--primary-foreground: 210 20% 98%;
--ring: 262.1 83.3% 57.8%;
}
[data-theme="violet"].dark {
--primary: 263.4 70% 50.4%;
--primary-foreground: 210 20% 98%;
--ring: 263.4 70% 50.4%;
}
[data-theme="emerald"] {
--primary: 142.1 76.2% 36.3%;
--primary-foreground: 355.7 100% 97.3%;
--ring: 142.1 76.2% 36.3%;
}
[data-theme="emerald"].dark {
--primary: 142.1 70.6% 45.3%;
--primary-foreground: 144.9 80.4% 10%;
--ring: 142.4 71.8% 29.2%;
}
[data-theme="rose"] {
--primary: 346.8 77.2% 49.8%;
--primary-foreground: 355.7 100% 97.3%;
--ring: 346.8 77.2% 49.8%;
}
/* Rose intentionally shares one mid-lightness accent across light and dark
(matching the upstream shadcn rose palette); 49.8% L reads on both, so
unlike the other schemes the dark block is deliberately not adjusted. */
[data-theme="rose"].dark {
--primary: 346.8 77.2% 49.8%;
--primary-foreground: 355.7 100% 97.3%;
--ring: 346.8 77.2% 49.8%;
}
/* Amber's primary is a mid-brightness orange, so foreground text uses a dark
brown (not near-white) to meet contrast on the primary surface in both
modes — consistent with the contrast-maximizing pick in foregroundForHex. */
[data-theme="amber"] {
--primary: 24.6 95% 53.1%;
--primary-foreground: 26 83.3% 14.1%;
--ring: 24.6 95% 53.1%;
}
[data-theme="amber"].dark {
--primary: 20.5 90.2% 48.2%;
--primary-foreground: 26 83.3% 14.1%;
--ring: 20.5 90.2% 48.2%;
}
* {
@apply border-border;
}
body {
@apply bg-background text-foreground;
}
/* Keyboard focus fallback: a visible, theme-aware focus ring for any
interactive element that doesn't already manage its own. Components that
render their own ring (Button, Input, dialog close, etc.) set
`focus-visible:outline-none`, whose utility layer wins over this base rule,
so they keep their existing indicator and don't double up.
Note: the dialog close button uses the older `focus:outline-none` form,
which also silences this outline correctly. Any future component using
`focus:ring-*` WITHOUT `focus-visible:outline-none` would get both this
outline and its own ring, so prefer the `focus-visible:` variants. */
:focus-visible {
outline: 2px solid hsl(var(--ring));
outline-offset: 2px;
}
}