Skip to content

Commit 97a9e1f

Browse files
colegoldsmithcolegoldsmith
committed
add new tokens as css vars
1 parent 1cc662a commit 97a9e1f

File tree

4 files changed

+202
-384
lines changed

4 files changed

+202
-384
lines changed

‎src/css/components/btn.css‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -8,27 +8,27 @@
88
}
99

1010
.btn-primary.btn-outlined {
11-
@apply border-[var(--ds-primary-outlined-border)] text-[var(--ds-primary-outlined-color)] hover:border-[var(--ds-primary-outlined-hover-border)] hover:bg-[var(--ds-primary-outlined-hover-bg)] hover:text-[var(--ds-primary-outlined-color)] active:border-[var(--ds-primary-outlined-active-border)] active:bg-[var(--ds-primary-outlined-active-bg)] disabled:border-[var(--ds-primary-outlined-disabled-border)] disabled:text-[var(--ds-primary-outlined-disabled-color)];
11+
@apply border-[var(--ds-primary-outlined-border)] text-[var(--ds-primary-outlined-color)] hover:border-[var(--ds-primary-outlined-hover-border)] hover:bg-[var(--ds-primary-outlined-hover-bg)] hover:text-[var(--ds-primary-outlined-color)] disabled:border-[var(--ds-primary-outlined-disabled-border)] disabled:text-[var(--ds-primary-outlined-disabled-color)];
1212
}
1313

1414
.btn-primary.btn-solid {
15-
@apply bg-[var(--ds-primary-solid-bg)] text-[var(--ds-primary-solid-color)] hover:bg-[var(--ds-primary-solid-hover-bg)] hover:text-[var(--ds-primary-solid-color)] active:bg-[var(--ds-primary-solid-active-bg)] disabled:bg-[var(--ds-primary-solid-disabled-bg)] disabled:text-[var(--ds-primary-solid-disabled-color)];
15+
@apply bg-[var(--ds-primary-solid-bg)] text-[var(--ds-primary-solid-color)] hover:bg-[var(--ds-primary-solid-hover-bg)] hover:text-[var(--ds-primary-solid-color)] disabled:bg-[var(--ds-primary-solid-disabled-bg)] disabled:text-[var(--ds-primary-solid-disabled-color)];
1616
}
1717

1818
.btn-primary.btn-soft {
19-
@apply bg-[var(--ds-primary-soft-bg)] text-[var(--ds-primary-soft-color)] hover:bg-[var(--ds-primary-soft-hover-bg)] hover:text-[var(--ds-primary-soft-color)] active:bg-[var(--ds-primary-soft-active-bg)] disabled:bg-[var(--ds-primary-soft-disabled-bg)] disabled:text-[var(--ds-primary-soft-disabled-color)];
19+
@apply bg-[var(--ds-primary-soft-bg)] text-[var(--ds-primary-soft-color)] hover:bg-[var(--ds-primary-soft-hover-bg)] hover:text-[var(--ds-primary-soft-color)] disabled:bg-[var(--ds-primary-soft-disabled-bg)] disabled:text-[var(--ds-primary-soft-disabled-color)];
2020
}
2121

2222
.btn-neutral.btn-outlined {
23-
@apply border-[var(--ds-neutral-outlined-border)] text-[var(--ds-neutral-outlined-color)] hover:border-[var(--ds-neutral-outlined-hover-border)] hover:bg-[var(--ds-neutral-outlined-hover-bg)] hover:text-[var(--ds-neutral-outlined-color)] active:border-[var(--ds-neutral-outlined-active-border)] active:bg-[var(--ds-neutral-outlined-active-bg)] disabled:border-[var(--ds-neutral-outlined-disabled-border)] disabled:text-[var(--ds-neutral-outlined-disabled-color)];
23+
@apply border-[var(--ds-neutral-outlined-border)] text-[var(--ds-neutral-outlined-color)] hover:border-[var(--ds-neutral-outlined-hover-border)] hover:bg-[var(--ds-neutral-outlined-hover-bg)] hover:text-[var(--ds-neutral-outlined-color)] disabled:border-[var(--ds-neutral-outlined-disabled-border)] disabled:text-[var(--ds-neutral-outlined-disabled-color)];
2424
}
2525

2626
.btn-neutral.btn-solid {
27-
@apply bg-[var(--ds-neutral-solid-bg)] text-[var(--ds-neutral-solid-color)] hover:bg-[var(--ds-neutral-solid-hover-bg)] hover:text-[var(--ds-neutral-solid-color)] active:bg-[var(--ds-neutral-solid-active-bg)] disabled:bg-[var(--ds-neutral-solid-disabled-bg)] disabled:text-[var(--ds-neutral-solid-disabled-color)];
27+
@apply bg-[var(--ds-neutral-solid-bg)] text-[var(--ds-neutral-solid-color)] hover:bg-[var(--ds-neutral-solid-hover-bg)] hover:text-[var(--ds-neutral-solid-color)] disabled:bg-[var(--ds-neutral-solid-disabled-bg)] disabled:text-[var(--ds-neutral-solid-disabled-color)];
2828
}
2929

3030
.btn-neutral.btn-plain {
31-
@apply text-[var(--ds-neutral-plain-color)] hover:bg-[var(--ds-neutral-plain-hover-bg)] hover:text-[var(--ds-neutral-plain-color)] active:bg-[var(--ds-neutral-plain-active-bg)] disabled:text-[var(--ds-neutral-plain-disabled-color)];
31+
@apply text-[var(--ds-neutral-plain-color)] hover:bg-[var(--ds-neutral-plain-hover-bg)] hover:text-[var(--ds-neutral-plain-color)] disabled:text-[var(--ds-neutral-plain-disabled-color)];
3232
}
3333

3434
.btn-icon {

‎src/css/vars/dark.css‎

Lines changed: 98 additions & 139 deletions
Original file line numberDiff line numberDiff line change
@@ -1,143 +1,102 @@
11
@mixin dark-theme {
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-background-backdrop: rgba(10, 10, 10, 0.6);
11-
--ds-cyan-main: var(--ds-cyan-400);
12-
--ds-failure-main: var(--ds-failure-400);
13-
--ds-failure-outlined-active-bg: var(--ds-failure-500);
14-
--ds-failure-outlined-border: var(--ds-failure-600);
15-
--ds-failure-outlined-color: var(--ds-common-white);
16-
--ds-failure-outlined-disabled-border: var(--ds-neutral-800);
17-
--ds-failure-outlined-disabled-color: var(--ds-neutral-600);
18-
--ds-failure-outlined-hover-bg: var(--ds-failure-900);
19-
--ds-failure-outlined-hover-border: var(--ds-failure-500);
20-
--ds-failure-plain-active-bg: var(--ds-failure-700);
21-
--ds-failure-plain-color: var(--ds-failure-300);
22-
--ds-failure-plain-disabled-color: var(--ds-failure-800);
23-
--ds-failure-plain-hover-bg: var(--ds-failure-800);
24-
--ds-failure-soft-active-bg: var(--ds-failure-600);
25-
--ds-failure-soft-bg: var(--ds-failure-900);
26-
--ds-failure-soft-color: var(--ds-failure-200);
27-
--ds-failure-soft-disabled-bg: var(--ds-failure-600);
28-
--ds-failure-soft-disabled-color: var(--ds-failure-800);
29-
--ds-failure-soft-hover-bg: var(--ds-failure-700);
30-
--ds-failure-solid-active-bg: var(--ds-failure-800);
31-
--ds-failure-solid-bg: var(--ds-failure-600);
32-
--ds-failure-solid-color: var(--ds-common-white);
33-
--ds-failure-solid-disabled-bg: var(--ds-neutral-600);
34-
--ds-failure-solid-disabled-color: var(--ds-neutral-800);
35-
--ds-failure-solid-hover-bg: var(--ds-failure-700);
36-
--ds-magenta-main: var(--ds-magenta-400);
37-
--ds-neutral-main: var(--ds-common-white);
38-
--ds-neutral-outlined-active-bg: var(--ds-neutral-500);
39-
--ds-neutral-outlined-border: var(--ds-neutral-600);
40-
--ds-neutral-outlined-color: var(--ds-common-white);
41-
--ds-neutral-outlined-disabled-border: var(--ds-neutral-800);
42-
--ds-neutral-outlined-disabled-color: var(--ds-neutral-600);
43-
--ds-neutral-outlined-hover-bg: var(--ds-neutral-800);
44-
--ds-neutral-outlined-hover-border: var(--ds-neutral-500);
45-
--ds-neutral-plain-active-bg: var(--ds-neutral-700);
46-
--ds-neutral-plain-color: var(--ds-common-white);
47-
--ds-neutral-plain-disabled-color: var(--ds-neutral-800);
48-
--ds-neutral-plain-hover-bg: var(--ds-neutral-800);
49-
--ds-neutral-soft-active-bg: var(--ds-neutral-600);
50-
--ds-neutral-soft-bg: var(--ds-neutral-800);
51-
--ds-neutral-soft-color: var(--ds-common-white);
52-
--ds-neutral-soft-disabled-bg: var(--ds-neutral-600);
53-
--ds-neutral-soft-disabled-color: var(--ds-neutral-800);
54-
--ds-neutral-soft-hover-bg: var(--ds-neutral-700);
55-
--ds-neutral-solid-active-bg: var(--ds-neutral-100);
56-
--ds-neutral-solid-bg: var(--ds-common-white);
57-
--ds-neutral-solid-color: var(--ds-neutral-900);
58-
--ds-neutral-solid-disabled-bg: var(--ds-neutral-600);
59-
--ds-neutral-solid-disabled-color: var(--ds-neutral-800);
60-
--ds-neutral-solid-hover-bg: var(--ds-neutral-0);
61-
--ds-orange-main: var(--ds-orange-400);
62-
--ds-primary-main: var(--ds-primary-300);
63-
--ds-primary-outlined-active-bg: var(--ds-primary-500);
64-
--ds-primary-outlined-border: var(--ds-primary-600);
65-
--ds-primary-outlined-color: var(--ds-common-white);
66-
--ds-primary-outlined-disabled-border: var(--ds-neutral-800);
67-
--ds-primary-outlined-disabled-color: var(--ds-neutral-600);
68-
--ds-primary-outlined-hover-bg: var(--ds-primary-900);
69-
--ds-primary-outlined-hover-border: var(--ds-primary-500);
70-
--ds-primary-plain-active-bg: var(--ds-primary-700);
71-
--ds-primary-plain-color: var(--ds-primary-300);
72-
--ds-primary-plain-disabled-color: var(--ds-primary-800);
73-
--ds-primary-plain-hover-bg: var(--ds-primary-800);
74-
--ds-primary-soft-active-bg: var(--ds-primary-600);
75-
--ds-primary-soft-bg: var(--ds-primary-900);
76-
--ds-primary-soft-color: var(--ds-primary-200);
77-
--ds-primary-soft-disabled-bg: var(--ds-primary-600);
78-
--ds-primary-soft-disabled-color: var(--ds-primary-800);
79-
--ds-primary-soft-hover-bg: var(--ds-primary-700);
80-
--ds-primary-solid-active-bg: var(--ds-primary-600);
81-
--ds-primary-solid-bg: var(--ds-primary-600);
82-
--ds-primary-solid-color: var(--ds-common-white);
83-
--ds-primary-solid-disabled-bg: var(--ds-neutral-600);
84-
--ds-primary-solid-disabled-color: var(--ds-neutral-800);
85-
--ds-primary-solid-hover-bg: var(--ds-primary-700);
86-
--ds-success-main: var(--ds-success-400);
87-
--ds-success-outlined-active-bg: var(--ds-success-500);
88-
--ds-success-outlined-border: var(--ds-success-600);
89-
--ds-success-outlined-color: var(--ds-common-white);
90-
--ds-success-outlined-disabled-border: var(--ds-neutral-800);
91-
--ds-success-outlined-disabled-color: var(--ds-neutral-600);
92-
--ds-success-outlined-hover-bg: var(--ds-success-900);
93-
--ds-success-outlined-hover-border: var(--ds-success-500);
94-
--ds-success-plain-active-bg: var(--ds-success-700);
95-
--ds-success-plain-color: var(--ds-success-300);
96-
--ds-success-plain-disabled-color: var(--ds-success-800);
97-
--ds-success-plain-hover-bg: var(--ds-success-800);
98-
--ds-success-soft-active-bg: var(--ds-success-600);
99-
--ds-success-soft-bg: var(--ds-success-900);
100-
--ds-success-soft-color: var(--ds-success-200);
101-
--ds-success-soft-disabled-bg: var(--ds-success-600);
102-
--ds-success-soft-disabled-color: var(--ds-success-800);
103-
--ds-success-soft-hover-bg: var(--ds-success-700);
104-
--ds-success-solid-active-bg: var(--ds-success-800);
105-
--ds-success-solid-bg: var(--ds-success-600);
106-
--ds-success-solid-color: var(--ds-common-white);
107-
--ds-success-solid-disabled-bg: var(--ds-neutral-600);
108-
--ds-success-solid-disabled-color: var(--ds-neutral-800);
109-
--ds-success-solid-hover-bg: var(--ds-success-700);
110-
--ds-teal-main: var(--ds-teal-400);
111-
--ds-text-disabled: var(--ds-neutral-800);
112-
--ds-text-inverse: var(--ds-neutral-900);
113-
--ds-text-placeholder: var(--ds-neutral-700);
114-
--ds-text-primary: var(--ds-common-white);
115-
--ds-text-secondary: var(--ds-neutral-300);
116-
--ds-text-tertiary: var(--ds-neutral-400);
117-
--ds-warning-main: var(--ds-warning-400);
118-
--ds-warning-outlined-active-bg: var(--ds-warning-500);
119-
--ds-warning-outlined-border: var(--ds-warning-600);
120-
--ds-warning-outlined-color: var(--ds-common-white);
121-
--ds-warning-outlined-disabled-border: var(--ds-neutral-800);
122-
--ds-warning-outlined-disabled-color: var(--ds-neutral-600);
123-
--ds-warning-outlined-hover-bg: var(--ds-warning-900);
124-
--ds-warning-outlined-hover-border: var(--ds-warning-500);
125-
--ds-warning-plain-active-bg: var(--ds-warning-700);
126-
--ds-warning-plain-color: var(--ds-warning-300);
127-
--ds-warning-plain-disabled-color: var(--ds-warning-800);
128-
--ds-warning-plain-hover-bg: var(--ds-warning-800);
129-
--ds-warning-soft-active-bg: var(--ds-warning-600);
130-
--ds-warning-soft-bg: var(--ds-warning-900);
131-
--ds-warning-soft-color: var(--ds-warning-200);
132-
--ds-warning-soft-disabled-bg: var(--ds-warning-600);
133-
--ds-warning-soft-disabled-color: var(--ds-warning-800);
134-
--ds-warning-soft-hover-bg: var(--ds-warning-700);
135-
--ds-warning-solid-active-bg: var(--ds-warning-800);
136-
--ds-warning-solid-bg: var(--ds-warning-600);
137-
--ds-warning-solid-color: var(--ds-common-white);
138-
--ds-warning-solid-disabled-bg: var(--ds-neutral-600);
139-
--ds-warning-solid-disabled-color: var(--ds-neutral-800);
140-
--ds-warning-solid-hover-bg: var(--ds-warning-700);
2+
/* Background */
3+
--ds-background-body: theme(colors.zinc.900);
4+
--ds-background-level1: theme(colors.zinc.800);
5+
--ds-background-level2: theme(colors.zinc.700);
6+
--ds-background-level3: theme(colors.zinc.600);
7+
--ds-background-surface: theme(colors.zinc.900);
8+
--ds-background-tooltip: theme(colors.white);
9+
--ds-background-modal: theme(colors.zinc.900);
10+
11+
/* Text */
12+
--ds-text-disabled: theme(colors.zinc.700);
13+
--ds-text-inverse: theme(colors.black);
14+
--ds-text-placeholder: theme(colors.zinc.500);
15+
--ds-text-primary: theme(colors.white);
16+
--ds-text-secondary: theme(colors.zinc.200);
17+
--ds-text-tertiary: theme(colors.zinc.300);
18+
19+
/* Divider */
20+
--ds-divider: theme(colors.zinc.700);
21+
22+
/* Focus ring */
23+
--ds-focus-visible: theme(colors.white);
24+
25+
/* Disabled */
26+
--ds-disabled-bg: theme(colors.zinc.800);
27+
--ds-disabled-color: theme(colors.zinc.600);
28+
29+
/* Data */
30+
--ds-cyan-main: theme(colors.cyan.500);
31+
--ds-indigo-main: theme(colors.indigo.400);
32+
--ds-lime-main: theme(colors.lime.400);
33+
--ds-orange-main: theme(colors.orange.400);
34+
--ds-fuchsia-main: theme(colors.fuchsia.300);
35+
--ds-pink-main: theme(colors.pink.300);
36+
--ds-teal-main: theme(colors.teal.500);
37+
38+
/* Intents */
39+
--ds-failure-main: theme(colors.red.500);
40+
--ds-failure-outlined-border: theme(colors.red.600);
41+
--ds-failure-outlined-color: theme(colors.white);
42+
--ds-failure-outlined-hover-bg: theme(colors.red.600);
43+
--ds-failure-outlined-hover-border: theme(colors.red.600);
44+
--ds-failure-soft-bg: theme(colors.red.950);
45+
--ds-failure-soft-color: theme(colors.red.200);
46+
--ds-failure-soft-hover-bg: theme(colors.red.900);
47+
--ds-failure-solid-bg: theme(colors.red.700);
48+
--ds-failure-solid-color: theme(colors.white);
49+
--ds-failure-solid-hover-bg: theme(colors.red.500);
50+
51+
--ds-neutral-main: theme(colors.white);
52+
--ds-neutral-outlined-border: theme(colors.zinc.700);
53+
--ds-neutral-outlined-color: theme(colors.white);
54+
--ds-neutral-outlined-hover-bg: theme(colors.zinc.700);
55+
--ds-neutral-outlined-hover-border: theme(colors.zinc.700);
56+
--ds-neutral-plain-color: theme(colors.white);
57+
--ds-neutral-plain-hover-bg: theme(colors.zinc.700);
58+
--ds-neutral-soft-bg: theme(colors.zinc.800);
59+
--ds-neutral-soft-color: theme(colors.white);
60+
--ds-neutral-soft-hover-bg: theme(colors.zinc.700);
61+
--ds-neutral-solid-bg: theme(colors.white);
62+
--ds-neutral-solid-color: theme(colors.black);
63+
--ds-neutral-solid-hover-bg: theme(colors.zinc.200);
64+
65+
--ds-primary-main: theme(colors.purple.400);
66+
--ds-primary-outlined-border: theme(colors.purple.600);
67+
--ds-primary-outlined-color: theme(colors.white);
68+
--ds-primary-outlined-hover-bg: theme(colors.purple.600);
69+
--ds-primary-outlined-hover-border: theme(colors.purple.600);
70+
--ds-primary-soft-bg: theme(colors.purple.950);
71+
--ds-primary-soft-color: theme(colors.purple.200);
72+
--ds-primary-soft-hover-bg: theme(colors.purple.900);
73+
--ds-primary-solid-bg: theme(colors.purple.700);
74+
--ds-primary-solid-color: theme(colors.white);
75+
--ds-primary-solid-hover-bg: theme(colors.purple.500);
76+
77+
--ds-success-main: theme(colors.emerald.500);
78+
--ds-success-outlined-border: theme(colors.emerald.600);
79+
--ds-success-outlined-color: theme(colors.white);
80+
--ds-success-outlined-hover-bg: theme(colors.emerald.600);
81+
--ds-success-outlined-hover-border: theme(colors.emerald.600);
82+
--ds-success-soft-bg: theme(colors.emerald.950);
83+
--ds-success-soft-color: theme(colors.emerald.200);
84+
--ds-success-soft-hover-bg: theme(colors.emerald.900);
85+
--ds-success-solid-bg: theme(colors.emerald.700);
86+
--ds-success-solid-color: theme(colors.white);
87+
--ds-success-solid-hover-bg: theme(colors.emerald.500);
88+
89+
--ds-warning-main: theme(colors.amber.400);
90+
--ds-warning-outlined-border: theme(colors.amber.600);
91+
--ds-warning-outlined-color: theme(colors.white);
92+
--ds-warning-outlined-hover-bg: theme(colors.amber.600);
93+
--ds-warning-outlined-hover-border: theme(colors.amber.600);
94+
--ds-warning-soft-bg: theme(colors.amber.950);
95+
--ds-warning-soft-color: theme(colors.amber.300);
96+
--ds-warning-soft-hover-bg: theme(colors.amber.900);
97+
--ds-warning-solid-bg: theme(colors.amber.500);
98+
--ds-warning-solid-color: theme(colors.black);
99+
--ds-warning-solid-hover-bg: theme(colors.amber.400);
141100
}
142101

143102
@layer base {

0 commit comments

Comments
 (0)