Skip to content

Commit 4d6de27

Browse files
najlaskrnajlaskr
authored
feat(theme): reorganize greyscale tokens and update color references (#215)
1 parent 2ff49b7 commit 4d6de27

File tree

5 files changed

+105
-70
lines changed

5 files changed

+105
-70
lines changed

‎.changeset/color-token-updates.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@cloudflare/kumo": major
3+
---
4+
5+
reorganize greyscale tokens and update color preferences

‎packages/kumo/scripts/theme-generator/config.ts‎

Lines changed: 40 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,7 @@ export const THEME_CONFIG: ThemeConfig = {
5353
theme: {
5454
kumo: {
5555
light: "var(--color-neutral-500, oklch(55.6% 0 0))",
56-
dark: "var(--color-neutral-50, oklch(98.5% 0 0))",
56+
dark: "var(--color-kumo-neutral-50, oklch(97.5% 0 0))",
5757
},
5858
},
5959
},
@@ -119,70 +119,87 @@ export const THEME_CONFIG: ThemeConfig = {
119119
* CSS variable: --color-{token}
120120
*/
121121
color: {
122-
"kumo-base": {
122+
"kumo-surface": {
123123
newName: "",
124124
theme: {
125125
kumo: {
126-
light: "var(--color-white, #fff)",
127-
dark: "var(--color-black, #000)",
126+
light: "var(--color-kumo-neutral-25, oklch(99% 0 0))",
127+
dark: "var(--color-kumo-neutral-975, oklch(8.5% 0 0))",
128128
},
129129
fedramp: {
130130
light: "#5b697c",
131131
dark: "#5b697c",
132132
},
133133
},
134134
},
135-
"kumo-elevated": {
135+
"kumo-recessed": {
136136
newName: "",
137137
theme: {
138138
kumo: {
139-
light: "var(--color-neutral-25, oklch(0.99 0 0))",
140-
dark: "var(--color-neutral-950, oklch(14.5% 0 0))",
139+
light: "var(--color-kumo-neutral-50, oklch(97.5% 0 0))",
140+
dark: "var(--color-kumo-neutral-925, oklch(18% 0 0))",
141141
},
142142
},
143143
},
144-
"kumo-recessed": {
144+
"kumo-base": {
145145
newName: "",
146146
theme: {
147147
kumo: {
148-
light: "var(--color-neutral-250, oklch(0.9 0 0))",
149-
dark: "var(--color-neutral-750, oklch(0.31 0 0))",
148+
light: "var(--color-white, #fff)",
149+
dark: "var(--color-kumo-neutral-850, oklch(22.4% 0 0))",
150+
},
151+
fedramp: {
152+
light: "#5b697c",
153+
dark: "#5b697c",
150154
},
151155
},
152156
},
153-
"kumo-overlay": {
157+
"kumo-tint": {
154158
newName: "",
155159
theme: {
156160
kumo: {
157-
light: "var(--color-neutral-50, oklch(98.5% 0 0))",
158-
dark: "var(--color-neutral-800, oklch(26.9% 0 0))",
161+
light: "var(--color-kumo-neutral-75, oklch(96.7% 0 0))",
162+
dark: "var(--color-kumo-neutral-800, oklch(26.9% 0 0))",
159163
},
160164
},
161165
},
162166
"kumo-contrast": {
163167
newName: "",
164168
theme: {
165169
kumo: {
166-
light: "var(--color-neutral-900, oklch(20.5% 0 0))",
167-
dark: "var(--color-neutral-100, oklch(97% 0 0))",
170+
light: "var(--color-kumo-neutral-975, oklch(8.5% 0 0))",
171+
dark: "var(--color-kumo-neutral-25, oklch(99% 0 0))",
168172
},
169173
},
170174
},
171-
"kumo-control": {
175+
/**
176+
* TO DEPRECIATE
177+
* In an effort to reduce the amount of greyscale tokens used in Kumo & Stratus, these tokens will be replaced and depreciated
178+
*/
179+
"kumo-elevated": {
172180
newName: "",
173181
theme: {
174182
kumo: {
175-
light: "var(--color-white, #fff)",
176-
dark: "var(--color-neutral-900, oklch(21% 0.006 285.885))",
183+
light: "var(--color-kumo-neutral-25, oklch(98.5% 0 0))",
184+
dark: "var(--color-neutral-950, oklch(14.5% 0 0))",
177185
},
178186
},
179187
},
180-
"kumo-tint": {
188+
"kumo-overlay": {
189+
newName: "",
190+
theme: {
191+
kumo: {
192+
light: "var(--color-kumo-neutral-50, oklch(97.5% 0 0))",
193+
dark: "var(--color-neutral-800, oklch(26.9% 0 0))",
194+
},
195+
},
196+
},
197+
"kumo-control": {
181198
newName: "",
182199
theme: {
183200
kumo: {
184-
light: "var(--color-neutral-150, oklch(0.96 0 0))",
185-
dark: "var(--color-neutral-850, oklch(0.23 0 0))",
201+
light: "var(--color-white, #fff)",
202+
dark: "var(--color-neutral-900, oklch(21% 0.006 285.885))",
186203
},
187204
},
188205
},
@@ -244,8 +261,8 @@ export const THEME_CONFIG: ThemeConfig = {
244261
newName: "",
245262
theme: {
246263
kumo: {
247-
light: "var(--color-neutral-400, oklch(70.8% 0 0))",
248-
dark: "var(--color-neutral-600, oklch(43.9% 0 0))",
264+
light: "var(--color-kumo-neutral-150, oklch(93.5% 0 0))",
265+
dark: "var(--color-neutral-700, oklch(37.1% 0 0))",
249266
},
250267
fedramp: {
251268
light: "#c8d4e5",

‎packages/kumo/src/styles/kumo-binding.css‎

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -3,20 +3,20 @@
33

44
@theme {
55
/* Primitive color definitions for Kumo theme */
6-
--color-red-650: oklch(0.55 0.238 27.4);
7-
--color-red-750: oklch(0.46 0.195 27.2);
8-
9-
--color-blue-400: oklch(0.707 0.165 254.624);
10-
--color-blue-800: oklch(0.424 0.199 265.638);
11-
12-
--color-neutral-25: oklch(0.99 0 0);
13-
--color-neutral-50: oklch(0.985 0 0);
14-
--color-neutral-150: oklch(0.96 0 0);
15-
--color-neutral-250: oklch(0.9 0 0);
16-
--color-neutral-450: oklch(0.62 0 0);
17-
--color-neutral-750: oklch(0.31 0 0);
18-
--color-neutral-850: oklch(0.23 0 0);
19-
--color-neutral-925: oklch(0.175 0 0);
6+
--color-red-650: oklch(55% 0.238 27.4);
7+
--color-red-750: oklch(46% 0.195 27.2);
8+
9+
--color-blue-400: oklch(70.7% 0.165 254.624);
10+
--color-blue-800: oklch(42.4% 0.199 265.638);
11+
12+
--color-kumo-neutral-25: oklch(99% 0 0);
13+
--color-kumo-neutral-50: oklch(97.5% 0 0);
14+
--color-kumo-neutral-75: oklch(96.7% 0 0);
15+
--color-kumo-neutral-150: oklch(93.5% 0 0);
16+
--color-kumo-neutral-450: oklch(86% 0 0);
17+
--color-kumo-neutral-850: oklch(22.4% 0 0);
18+
--color-kumo-neutral-925: oklch(18% 0 0);
19+
--color-kumo-neutral-975: oklch(8.5% 0 0);
2020
}
2121

2222
/* Typography is now generated in theme-kumo.css via codegen:themes */

‎packages/kumo/src/styles/theme-fedramp.css‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,10 @@
99

1010
@layer base {
1111
[data-theme="fedramp"] {
12+
--color-kumo-surface: light-dark(
13+
#5b697c,
14+
#5b697c
15+
);
1216
--color-kumo-base: light-dark(
1317
#5b697c,
1418
#5b697c
@@ -22,11 +26,13 @@
2226

2327
@layer base {
2428
[data-theme="fedramp"] {
29+
--color-kumo-surface: #5b697c;
2530
--color-kumo-base: #5b697c;
2631
--color-kumo-ring: #c8d4e5;
2732
}
2833

2934
[data-mode="dark"] [data-theme="fedramp"], [data-theme="fedramp"][data-mode="dark"], [data-theme="fedramp"] [data-mode="dark"] {
35+
--color-kumo-surface: #5b697c;
3036
--color-kumo-base: #5b697c;
3137
--color-kumo-ring: #c8d4e5;
3238
}

‎packages/kumo/src/styles/theme-kumo.css‎

Lines changed: 40 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@
2525

2626
--text-color-kumo-subtle: light-dark(
2727
var(--color-neutral-500, oklch(55.6% 0 0)),
28-
var(--color-neutral-50, oklch(98.5% 0 0))
28+
var(--color-kumo-neutral-50, oklch(97.5% 0 0))
2929
);
3030

3131
--text-color-kumo-inactive: light-dark(
@@ -61,41 +61,46 @@
6161
}
6262

6363
@theme {
64+
--color-kumo-surface: light-dark(
65+
var(--color-kumo-neutral-25, oklch(99% 0 0)),
66+
var(--color-kumo-neutral-975, oklch(8.5% 0 0))
67+
);
68+
69+
--color-kumo-recessed: light-dark(
70+
var(--color-kumo-neutral-50, oklch(97.5% 0 0)),
71+
var(--color-kumo-neutral-925, oklch(18% 0 0))
72+
);
73+
6474
--color-kumo-base: light-dark(
6575
var(--color-white, #fff),
66-
var(--color-black, #000)
76+
var(--color-kumo-neutral-850, oklch(22.4% 0 0))
6777
);
6878

69-
--color-kumo-elevated: light-dark(
70-
var(--color-neutral-25, oklch(0.99 0 0)),
71-
var(--color-neutral-950, oklch(14.5% 0 0))
79+
--color-kumo-tint: light-dark(
80+
var(--color-kumo-neutral-75, oklch(96.7% 0 0)),
81+
var(--color-kumo-neutral-800, oklch(26.9% 0 0))
7282
);
7383

74-
--color-kumo-recessed: light-dark(
75-
var(--color-neutral-250, oklch(0.9 0 0)),
76-
var(--color-neutral-750, oklch(0.31 0 0))
84+
--color-kumo-contrast: light-dark(
85+
var(--color-kumo-neutral-975, oklch(8.5% 0 0)),
86+
var(--color-kumo-neutral-25, oklch(99% 0 0))
7787
);
7888

79-
--color-kumo-overlay: light-dark(
80-
var(--color-neutral-50, oklch(98.5% 0 0)),
81-
var(--color-neutral-800, oklch(26.9% 0 0))
89+
--color-kumo-elevated: light-dark(
90+
var(--color-kumo-neutral-25, oklch(98.5% 0 0)),
91+
var(--color-neutral-950, oklch(14.5% 0 0))
8292
);
8393

84-
--color-kumo-contrast: light-dark(
85-
var(--color-neutral-900, oklch(20.5% 0 0)),
86-
var(--color-neutral-100, oklch(97% 0 0))
94+
--color-kumo-overlay: light-dark(
95+
var(--color-kumo-neutral-50, oklch(97.5% 0 0)),
96+
var(--color-neutral-800, oklch(26.9% 0 0))
8797
);
8898

8999
--color-kumo-control: light-dark(
90100
var(--color-white, #fff),
91101
var(--color-neutral-900, oklch(21% 0.006 285.885))
92102
);
93103

94-
--color-kumo-tint: light-dark(
95-
var(--color-neutral-150, oklch(0.96 0 0)),
96-
var(--color-neutral-850, oklch(0.23 0 0))
97-
);
98-
99104
--color-kumo-interact: light-dark(
100105
var(--color-neutral-300, oklch(87% 0 0)),
101106
var(--color-neutral-700, oklch(37.1% 0 0))
@@ -127,8 +132,8 @@
127132
);
128133

129134
--color-kumo-ring: light-dark(
130-
var(--color-neutral-400, oklch(70.8% 0 0)),
131-
var(--color-neutral-600, oklch(43.9% 0 0))
135+
var(--color-kumo-neutral-150, oklch(93.5% 0 0)),
136+
var(--color-neutral-700, oklch(37.1% 0 0))
132137
);
133138

134139
--color-kumo-tip-shadow: light-dark(
@@ -207,20 +212,21 @@
207212
--text-color-kumo-success: var(--color-green-500, oklch(72.3% 0.219 149.579));
208213
--text-color-kumo-danger: var(--color-red-500, oklch(63.7% 0.237 25.331));
209214
--text-color-kumo-warning: var(--color-yellow-800, oklch(47.6% 0.114 61.907));
215+
--color-kumo-surface: var(--color-kumo-neutral-25, oklch(99% 0 0));
216+
--color-kumo-recessed: var(--color-kumo-neutral-50, oklch(97.5% 0 0));
210217
--color-kumo-base: var(--color-white, #fff);
211-
--color-kumo-elevated: var(--color-neutral-25, oklch(0.99 0 0));
212-
--color-kumo-recessed: var(--color-neutral-250, oklch(0.9 0 0));
213-
--color-kumo-overlay: var(--color-neutral-50, oklch(98.5% 0 0));
214-
--color-kumo-contrast: var(--color-neutral-900, oklch(20.5% 0 0));
218+
--color-kumo-tint: var(--color-kumo-neutral-75, oklch(96.7% 0 0));
219+
--color-kumo-contrast: var(--color-kumo-neutral-975, oklch(8.5% 0 0));
220+
--color-kumo-elevated: var(--color-kumo-neutral-25, oklch(98.5% 0 0));
221+
--color-kumo-overlay: var(--color-kumo-neutral-50, oklch(97.5% 0 0));
215222
--color-kumo-control: var(--color-white, #fff);
216-
--color-kumo-tint: var(--color-neutral-150, oklch(0.96 0 0));
217223
--color-kumo-interact: var(--color-neutral-300, oklch(87% 0 0));
218224
--color-kumo-fill: var(--color-neutral-200, oklch(92.2% 0 0));
219225
--color-kumo-fill-hover: var(--color-neutral-200, oklch(92.2% 0 0));
220226
--color-kumo-brand: oklch(0.5772 0.2324 260);
221227
--color-kumo-brand-hover: var(--color-blue-700, oklch(48.8% 0.243 264.376));
222228
--color-kumo-line: oklch(14.5% 0 0 / 0.1);
223-
--color-kumo-ring: var(--color-neutral-400, oklch(70.8% 0 0));
229+
--color-kumo-ring: var(--color-kumo-neutral-150, oklch(93.5% 0 0));
224230
--color-kumo-tip-shadow: var(--color-gray-200, oklch(92.8% 0.006 264.531));
225231
--color-kumo-tip-stroke: transparent;
226232
--color-kumo-info: var(--color-blue-500, oklch(62.3% 0.214 259.815));
@@ -237,27 +243,28 @@
237243
--text-color-kumo-default: var(--color-neutral-100, oklch(97% 0 0));
238244
--text-color-kumo-inverse: var(--color-neutral-900, oklch(20.5% 0 0));
239245
--text-color-kumo-strong: var(--color-neutral-400, oklch(70.8% 0 0));
240-
--text-color-kumo-subtle: var(--color-neutral-50, oklch(98.5% 0 0));
246+
--text-color-kumo-subtle: var(--color-kumo-neutral-50, oklch(97.5% 0 0));
241247
--text-color-kumo-inactive: var(--color-neutral-600, oklch(70.8% 0 0));
242248
--text-color-kumo-brand: #f6821f;
243249
--text-color-kumo-link: var(--color-blue-400, oklch(70.7% 0.165 254.624));
244250
--text-color-kumo-success: var(--color-green-400, oklch(79.2% 0.209 151.711));
245251
--text-color-kumo-danger: var(--color-red-400, oklch(70.4% 0.191 22.216));
246252
--text-color-kumo-warning: var(--color-yellow-400, oklch(85.2% 0.199 91.936));
247-
--color-kumo-base: var(--color-black, #000);
253+
--color-kumo-surface: var(--color-kumo-neutral-975, oklch(8.5% 0 0));
254+
--color-kumo-recessed: var(--color-kumo-neutral-925, oklch(18% 0 0));
255+
--color-kumo-base: var(--color-kumo-neutral-850, oklch(22.4% 0 0));
256+
--color-kumo-tint: var(--color-kumo-neutral-800, oklch(26.9% 0 0));
257+
--color-kumo-contrast: var(--color-kumo-neutral-25, oklch(99% 0 0));
248258
--color-kumo-elevated: var(--color-neutral-950, oklch(14.5% 0 0));
249-
--color-kumo-recessed: var(--color-neutral-750, oklch(0.31 0 0));
250259
--color-kumo-overlay: var(--color-neutral-800, oklch(26.9% 0 0));
251-
--color-kumo-contrast: var(--color-neutral-100, oklch(97% 0 0));
252260
--color-kumo-control: var(--color-neutral-900, oklch(21% 0.006 285.885));
253-
--color-kumo-tint: var(--color-neutral-850, oklch(0.23 0 0));
254261
--color-kumo-interact: var(--color-neutral-700, oklch(37.1% 0 0));
255262
--color-kumo-fill: var(--color-neutral-800, oklch(26.9% 0 0));
256263
--color-kumo-fill-hover: var(--color-neutral-700, oklch(37.1% 0 0));
257264
--color-kumo-brand: oklch(0.5772 0.2324 260);
258265
--color-kumo-brand-hover: var(--color-blue-700, oklch(48.8% 0.243 264.376));
259266
--color-kumo-line: var(--color-neutral-800, oklch(26.9% 0 0));
260-
--color-kumo-ring: var(--color-neutral-600, oklch(43.9% 0 0));
267+
--color-kumo-ring: var(--color-neutral-700, oklch(37.1% 0 0));
261268
--color-kumo-tip-shadow: transparent;
262269
--color-kumo-tip-stroke: var(--color-neutral-800, oklch(26.9% 0 0));
263270
--color-kumo-info: var(--color-blue-400, oklch(70.7% 0.165 254.624));

0 commit comments

Comments
 (0)