Skip to content

Commit 11eabed

Browse files
colegoldsmithcolegoldsmith
authored
add second set of tokens for prefers theme mode (#3)
1 parent 857d319 commit 11eabed

File tree

5 files changed

+573
-289
lines changed

5 files changed

+573
-289
lines changed

‎src/css/ds-dark.css‎

Lines changed: 283 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,283 @@
1+
html[data-theme="dark"] {
2+
--ds-divider: var(--ds-neutral-700);
3+
--ds-focus-visible: var(--ds-common-white);
4+
--ds-background-body: var(--ds-neutral-900);
5+
--ds-background-level1: var(--ds-neutral-800);
6+
--ds-background-level2: var(--ds-neutral-700);
7+
--ds-background-level3: var(--ds-neutral-600);
8+
--ds-background-surface: var(--ds-neutral-900);
9+
--ds-background-tooltip: var(--ds-neutral-0);
10+
--ds-cyan-main: var(--ds-cyan-400);
11+
--ds-failure-main: var(--ds-failure-400);
12+
--ds-failure-outlined-active-bg: var(--ds-failure-500);
13+
--ds-failure-outlined-border: var(--ds-failure-600);
14+
--ds-failure-outlined-color: var(--ds-common-white);
15+
--ds-failure-outlined-disabled-border: var(--ds-neutral-800);
16+
--ds-failure-outlined-disabled-color: var(--ds-neutral-600);
17+
--ds-failure-outlined-hover-bg: var(--ds-failure-900);
18+
--ds-failure-outlined-hover-border: var(--ds-failure-500);
19+
--ds-failure-plain-active-bg: var(--ds-failure-700);
20+
--ds-failure-plain-color: var(--ds-failure-300);
21+
--ds-failure-plain-disabled-color: var(--ds-failure-800);
22+
--ds-failure-plain-hover-bg: var(--ds-failure-800);
23+
--ds-failure-soft-active-bg: var(--ds-failure-600);
24+
--ds-failure-soft-bg: var(--ds-failure-900);
25+
--ds-failure-soft-color: var(--ds-failure-200);
26+
--ds-failure-soft-disabled-bg: var(--ds-failure-600);
27+
--ds-failure-soft-disabled-color: var(--ds-failure-800);
28+
--ds-failure-soft-hover-bg: var(--ds-failure-700);
29+
--ds-failure-solid-active-bg: var(--ds-failure-800);
30+
--ds-failure-solid-bg: var(--ds-failure-600);
31+
--ds-failure-solid-color: var(--ds-common-white);
32+
--ds-failure-solid-disabled-bg: var(--ds-neutral-600);
33+
--ds-failure-solid-disabled-color: var(--ds-neutral-800);
34+
--ds-failure-solid-hover-bg: var(--ds-failure-700);
35+
--ds-magenta-main: var(--ds-magenta-400);
36+
--ds-neutral-main: var(--ds-common-white);
37+
--ds-neutral-outlined-active-bg: var(--ds-neutral-500);
38+
--ds-neutral-outlined-border: var(--ds-neutral-600);
39+
--ds-neutral-outlined-color: var(--ds-common-white);
40+
--ds-neutral-outlined-disabled-border: var(--ds-neutral-800);
41+
--ds-neutral-outlined-disabled-color: var(--ds-neutral-600);
42+
--ds-neutral-outlined-hover-bg: var(--ds-neutral-800);
43+
--ds-neutral-outlined-hover-border: var(--ds-neutral-500);
44+
--ds-neutral-plain-active-bg: var(--ds-neutral-700);
45+
--ds-neutral-plain-color: var(--ds-common-white);
46+
--ds-neutral-plain-disabled-color: var(--ds-neutral-800);
47+
--ds-neutral-plain-hover-bg: var(--ds-neutral-800);
48+
--ds-neutral-soft-active-bg: var(--ds-neutral-600);
49+
--ds-neutral-soft-bg: var(--ds-neutral-800);
50+
--ds-neutral-soft-color: var(--ds-common-white);
51+
--ds-neutral-soft-disabled-bg: var(--ds-neutral-600);
52+
--ds-neutral-soft-disabled-color: var(--ds-neutral-800);
53+
--ds-neutral-soft-hover-bg: var(--ds-neutral-700);
54+
--ds-neutral-solid-active-bg: var(--ds-neutral-100);
55+
--ds-neutral-solid-bg: var(--ds-common-white);
56+
--ds-neutral-solid-color: var(--ds-neutral-900);
57+
--ds-neutral-solid-disabled-bg: var(--ds-neutral-600);
58+
--ds-neutral-solid-disabled-color: var(--ds-neutral-800);
59+
--ds-neutral-solid-hover-bg: var(--ds-neutral-0);
60+
--ds-orange-main: var(--ds-orange-400);
61+
--ds-primary-main: var(--ds-primary-400);
62+
--ds-primary-outlined-active-bg: var(--ds-primary-500);
63+
--ds-primary-outlined-border: var(--ds-primary-600);
64+
--ds-primary-outlined-color: var(--ds-common-white);
65+
--ds-primary-outlined-disabled-border: var(--ds-neutral-800);
66+
--ds-primary-outlined-disabled-color: var(--ds-neutral-600);
67+
--ds-primary-outlined-hover-bg: var(--ds-primary-900);
68+
--ds-primary-outlined-hover-border: var(--ds-primary-500);
69+
--ds-primary-plain-active-bg: var(--ds-primary-700);
70+
--ds-primary-plain-color: var(--ds-primary-300);
71+
--ds-primary-plain-disabled-color: var(--ds-primary-800);
72+
--ds-primary-plain-hover-bg: var(--ds-primary-800);
73+
--ds-primary-soft-active-bg: var(--ds-primary-600);
74+
--ds-primary-soft-bg: var(--ds-primary-900);
75+
--ds-primary-soft-color: var(--ds-primary-200);
76+
--ds-primary-soft-disabled-bg: var(--ds-primary-600);
77+
--ds-primary-soft-disabled-color: var(--ds-primary-800);
78+
--ds-primary-soft-hover-bg: var(--ds-primary-700);
79+
--ds-primary-solid-active-bg: var(--ds-primary-800);
80+
--ds-primary-solid-bg: var(--ds-primary-600);
81+
--ds-primary-solid-color: var(--ds-common-white);
82+
--ds-primary-solid-disabled-bg: var(--ds-neutral-600);
83+
--ds-primary-solid-disabled-color: var(--ds-neutral-800);
84+
--ds-primary-solid-hover-bg: var(--ds-primary-700);
85+
--ds-success-main: var(--ds-success-400);
86+
--ds-success-outlined-active-bg: var(--ds-success-500);
87+
--ds-success-outlined-border: var(--ds-success-600);
88+
--ds-success-outlined-color: var(--ds-common-white);
89+
--ds-success-outlined-disabled-border: var(--ds-neutral-800);
90+
--ds-success-outlined-disabled-color: var(--ds-neutral-600);
91+
--ds-success-outlined-hover-bg: var(--ds-success-900);
92+
--ds-success-outlined-hover-border: var(--ds-success-500);
93+
--ds-success-plain-active-bg: var(--ds-success-700);
94+
--ds-success-plain-color: var(--ds-success-300);
95+
--ds-success-plain-disabled-color: var(--ds-success-800);
96+
--ds-success-plain-hover-bg: var(--ds-success-800);
97+
--ds-success-soft-active-bg: var(--ds-success-600);
98+
--ds-success-soft-bg: var(--ds-success-900);
99+
--ds-success-soft-color: var(--ds-success-200);
100+
--ds-success-soft-disabled-bg: var(--ds-success-600);
101+
--ds-success-soft-disabled-color: var(--ds-success-800);
102+
--ds-success-soft-hover-bg: var(--ds-success-700);
103+
--ds-success-solid-active-bg: var(--ds-success-800);
104+
--ds-success-solid-bg: var(--ds-success-600);
105+
--ds-success-solid-color: var(--ds-common-white);
106+
--ds-success-solid-disabled-bg: var(--ds-neutral-600);
107+
--ds-success-solid-disabled-color: var(--ds-neutral-800);
108+
--ds-success-solid-hover-bg: var(--ds-success-700);
109+
--ds-teal-main: var(--ds-teal-400);
110+
--ds-text-disabled: var(--ds-neutral-800);
111+
--ds-text-inverse: var(--ds-neutral-900);
112+
--ds-text-placeholder: var(--ds-neutral-700);
113+
--ds-text-primary: var(--ds-common-white);
114+
--ds-text-secondary: var(--ds-neutral-300);
115+
--ds-text-tertiary: var(--ds-neutral-500);
116+
--ds-warning-main: var(--ds-warning-400);
117+
--ds-warning-outlined-active-bg: var(--ds-warning-500);
118+
--ds-warning-outlined-border: var(--ds-warning-600);
119+
--ds-warning-outlined-color: var(--ds-common-white);
120+
--ds-warning-outlined-disabled-border: var(--ds-neutral-800);
121+
--ds-warning-outlined-disabled-color: var(--ds-neutral-600);
122+
--ds-warning-outlined-hover-bg: var(--ds-warning-900);
123+
--ds-warning-outlined-hover-border: var(--ds-warning-500);
124+
--ds-warning-plain-active-bg: var(--ds-warning-700);
125+
--ds-warning-plain-color: var(--ds-warning-300);
126+
--ds-warning-plain-disabled-color: var(--ds-warning-800);
127+
--ds-warning-plain-hover-bg: var(--ds-warning-800);
128+
--ds-warning-soft-active-bg: var(--ds-warning-600);
129+
--ds-warning-soft-bg: var(--ds-warning-900);
130+
--ds-warning-soft-color: var(--ds-warning-200);
131+
--ds-warning-soft-disabled-bg: var(--ds-warning-600);
132+
--ds-warning-soft-disabled-color: var(--ds-warning-800);
133+
--ds-warning-soft-hover-bg: var(--ds-warning-700);
134+
--ds-warning-solid-active-bg: var(--ds-warning-800);
135+
--ds-warning-solid-bg: var(--ds-warning-600);
136+
--ds-warning-solid-color: var(--ds-common-white);
137+
--ds-warning-solid-disabled-bg: var(--ds-neutral-600);
138+
--ds-warning-solid-disabled-color: var(--ds-neutral-800);
139+
--ds-warning-solid-hover-bg: var(--ds-warning-700);
140+
}
141+
142+
@media (prefers-color-scheme: dark) {
143+
:root:not([data-theme="light"]):not([data-theme="dark"]) {
144+
--ds-divider: var(--ds-neutral-700);
145+
--ds-focus-visible: var(--ds-common-white);
146+
--ds-background-body: var(--ds-neutral-900);
147+
--ds-background-level1: var(--ds-neutral-800);
148+
--ds-background-level2: var(--ds-neutral-700);
149+
--ds-background-level3: var(--ds-neutral-600);
150+
--ds-background-surface: var(--ds-neutral-900);
151+
--ds-background-tooltip: var(--ds-neutral-0);
152+
--ds-cyan-main: var(--ds-cyan-400);
153+
--ds-failure-main: var(--ds-failure-400);
154+
--ds-failure-outlined-active-bg: var(--ds-failure-500);
155+
--ds-failure-outlined-border: var(--ds-failure-600);
156+
--ds-failure-outlined-color: var(--ds-common-white);
157+
--ds-failure-outlined-disabled-border: var(--ds-neutral-800);
158+
--ds-failure-outlined-disabled-color: var(--ds-neutral-600);
159+
--ds-failure-outlined-hover-bg: var(--ds-failure-900);
160+
--ds-failure-outlined-hover-border: var(--ds-failure-500);
161+
--ds-failure-plain-active-bg: var(--ds-failure-700);
162+
--ds-failure-plain-color: var(--ds-failure-300);
163+
--ds-failure-plain-disabled-color: var(--ds-failure-800);
164+
--ds-failure-plain-hover-bg: var(--ds-failure-800);
165+
--ds-failure-soft-active-bg: var(--ds-failure-600);
166+
--ds-failure-soft-bg: var(--ds-failure-900);
167+
--ds-failure-soft-color: var(--ds-failure-200);
168+
--ds-failure-soft-disabled-bg: var(--ds-failure-600);
169+
--ds-failure-soft-disabled-color: var(--ds-failure-800);
170+
--ds-failure-soft-hover-bg: var(--ds-failure-700);
171+
--ds-failure-solid-active-bg: var(--ds-failure-800);
172+
--ds-failure-solid-bg: var(--ds-failure-600);
173+
--ds-failure-solid-color: var(--ds-common-white);
174+
--ds-failure-solid-disabled-bg: var(--ds-neutral-600);
175+
--ds-failure-solid-disabled-color: var(--ds-neutral-800);
176+
--ds-failure-solid-hover-bg: var(--ds-failure-700);
177+
--ds-magenta-main: var(--ds-magenta-400);
178+
--ds-neutral-main: var(--ds-common-white);
179+
--ds-neutral-outlined-active-bg: var(--ds-neutral-500);
180+
--ds-neutral-outlined-border: var(--ds-neutral-600);
181+
--ds-neutral-outlined-color: var(--ds-common-white);
182+
--ds-neutral-outlined-disabled-border: var(--ds-neutral-800);
183+
--ds-neutral-outlined-disabled-color: var(--ds-neutral-600);
184+
--ds-neutral-outlined-hover-bg: var(--ds-neutral-800);
185+
--ds-neutral-outlined-hover-border: var(--ds-neutral-500);
186+
--ds-neutral-plain-active-bg: var(--ds-neutral-700);
187+
--ds-neutral-plain-color: var(--ds-common-white);
188+
--ds-neutral-plain-disabled-color: var(--ds-neutral-800);
189+
--ds-neutral-plain-hover-bg: var(--ds-neutral-800);
190+
--ds-neutral-soft-active-bg: var(--ds-neutral-600);
191+
--ds-neutral-soft-bg: var(--ds-neutral-800);
192+
--ds-neutral-soft-color: var(--ds-common-white);
193+
--ds-neutral-soft-disabled-bg: var(--ds-neutral-600);
194+
--ds-neutral-soft-disabled-color: var(--ds-neutral-800);
195+
--ds-neutral-soft-hover-bg: var(--ds-neutral-700);
196+
--ds-neutral-solid-active-bg: var(--ds-neutral-100);
197+
--ds-neutral-solid-bg: var(--ds-common-white);
198+
--ds-neutral-solid-color: var(--ds-neutral-900);
199+
--ds-neutral-solid-disabled-bg: var(--ds-neutral-600);
200+
--ds-neutral-solid-disabled-color: var(--ds-neutral-800);
201+
--ds-neutral-solid-hover-bg: var(--ds-neutral-0);
202+
--ds-orange-main: var(--ds-orange-400);
203+
--ds-primary-main: var(--ds-primary-400);
204+
--ds-primary-outlined-active-bg: var(--ds-primary-500);
205+
--ds-primary-outlined-border: var(--ds-primary-600);
206+
--ds-primary-outlined-color: var(--ds-common-white);
207+
--ds-primary-outlined-disabled-border: var(--ds-neutral-800);
208+
--ds-primary-outlined-disabled-color: var(--ds-neutral-600);
209+
--ds-primary-outlined-hover-bg: var(--ds-primary-900);
210+
--ds-primary-outlined-hover-border: var(--ds-primary-500);
211+
--ds-primary-plain-active-bg: var(--ds-primary-700);
212+
--ds-primary-plain-color: var(--ds-primary-300);
213+
--ds-primary-plain-disabled-color: var(--ds-primary-800);
214+
--ds-primary-plain-hover-bg: var(--ds-primary-800);
215+
--ds-primary-soft-active-bg: var(--ds-primary-600);
216+
--ds-primary-soft-bg: var(--ds-primary-900);
217+
--ds-primary-soft-color: var(--ds-primary-200);
218+
--ds-primary-soft-disabled-bg: var(--ds-primary-600);
219+
--ds-primary-soft-disabled-color: var(--ds-primary-800);
220+
--ds-primary-soft-hover-bg: var(--ds-primary-700);
221+
--ds-primary-solid-active-bg: var(--ds-primary-800);
222+
--ds-primary-solid-bg: var(--ds-primary-600);
223+
--ds-primary-solid-color: var(--ds-common-white);
224+
--ds-primary-solid-disabled-bg: var(--ds-neutral-600);
225+
--ds-primary-solid-disabled-color: var(--ds-neutral-800);
226+
--ds-primary-solid-hover-bg: var(--ds-primary-700);
227+
--ds-success-main: var(--ds-success-400);
228+
--ds-success-outlined-active-bg: var(--ds-success-500);
229+
--ds-success-outlined-border: var(--ds-success-600);
230+
--ds-success-outlined-color: var(--ds-common-white);
231+
--ds-success-outlined-disabled-border: var(--ds-neutral-800);
232+
--ds-success-outlined-disabled-color: var(--ds-neutral-600);
233+
--ds-success-outlined-hover-bg: var(--ds-success-900);
234+
--ds-success-outlined-hover-border: var(--ds-success-500);
235+
--ds-success-plain-active-bg: var(--ds-success-700);
236+
--ds-success-plain-color: var(--ds-success-300);
237+
--ds-success-plain-disabled-color: var(--ds-success-800);
238+
--ds-success-plain-hover-bg: var(--ds-success-800);
239+
--ds-success-soft-active-bg: var(--ds-success-600);
240+
--ds-success-soft-bg: var(--ds-success-900);
241+
--ds-success-soft-color: var(--ds-success-200);
242+
--ds-success-soft-disabled-bg: var(--ds-success-600);
243+
--ds-success-soft-disabled-color: var(--ds-success-800);
244+
--ds-success-soft-hover-bg: var(--ds-success-700);
245+
--ds-success-solid-active-bg: var(--ds-success-800);
246+
--ds-success-solid-bg: var(--ds-success-600);
247+
--ds-success-solid-color: var(--ds-common-white);
248+
--ds-success-solid-disabled-bg: var(--ds-neutral-600);
249+
--ds-success-solid-disabled-color: var(--ds-neutral-800);
250+
--ds-success-solid-hover-bg: var(--ds-success-700);
251+
--ds-teal-main: var(--ds-teal-400);
252+
--ds-text-disabled: var(--ds-neutral-800);
253+
--ds-text-inverse: var(--ds-neutral-900);
254+
--ds-text-placeholder: var(--ds-neutral-700);
255+
--ds-text-primary: var(--ds-common-white);
256+
--ds-text-secondary: var(--ds-neutral-300);
257+
--ds-text-tertiary: var(--ds-neutral-500);
258+
--ds-warning-main: var(--ds-warning-400);
259+
--ds-warning-outlined-active-bg: var(--ds-warning-500);
260+
--ds-warning-outlined-border: var(--ds-warning-600);
261+
--ds-warning-outlined-color: var(--ds-common-white);
262+
--ds-warning-outlined-disabled-border: var(--ds-neutral-800);
263+
--ds-warning-outlined-disabled-color: var(--ds-neutral-600);
264+
--ds-warning-outlined-hover-bg: var(--ds-warning-900);
265+
--ds-warning-outlined-hover-border: var(--ds-warning-500);
266+
--ds-warning-plain-active-bg: var(--ds-warning-700);
267+
--ds-warning-plain-color: var(--ds-warning-300);
268+
--ds-warning-plain-disabled-color: var(--ds-warning-800);
269+
--ds-warning-plain-hover-bg: var(--ds-warning-800);
270+
--ds-warning-soft-active-bg: var(--ds-warning-600);
271+
--ds-warning-soft-bg: var(--ds-warning-900);
272+
--ds-warning-soft-color: var(--ds-warning-200);
273+
--ds-warning-soft-disabled-bg: var(--ds-warning-600);
274+
--ds-warning-soft-disabled-color: var(--ds-warning-800);
275+
--ds-warning-soft-hover-bg: var(--ds-warning-700);
276+
--ds-warning-solid-active-bg: var(--ds-warning-800);
277+
--ds-warning-solid-bg: var(--ds-warning-600);
278+
--ds-warning-solid-color: var(--ds-common-white);
279+
--ds-warning-solid-disabled-bg: var(--ds-neutral-600);
280+
--ds-warning-solid-disabled-color: var(--ds-neutral-800);
281+
--ds-warning-solid-hover-bg: var(--ds-warning-700);
282+
}
283+
}

0 commit comments

Comments
 (0)