Skip to content

Commit 58f4948

Browse files
amandaguthrieamandaguthrie
authored
Feature: panda-preset-color-radix: add contrast color option and scale values (#22)
* add: panda-preset-color-radix contrast color option and scale values * add: test snapshots
1 parent 98037e6 commit 58f4948

30 files changed

+708
-651
lines changed

‎.changeset/light-maps-type.md‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
---
2+
"@amandaguthrie/panda-preset-color-radix": patch
3+
---
4+
5+
<br/>
6+
7+
##### Adds Three Color Scale Values
8+
9+
We've added three scale values to the standard Radix colors for ease of theming.
10+
11+
- **0:** Intended for white in light mode and black for dark mode.
12+
- **9c:** The contrast color for color scale 9. A few Radix colors require dark text to meet contrast requirements. This
13+
makes it easier by building those contrast values into the core and semantic color scales in a consistent fashion.
14+
Defaults to white for all colors except for amber, yellow, mint, lime, and sky.
15+
- **13:** Intended for black in light mode and white for dark mode.
16+
17+
The default black and white colors can be replaced in the preset options using the <code>contrastColorOverrides</code> object.

‎biome.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"$schema": "https://biomejs.dev/schemas/1.8.3/schema.json",
33
"files": {
4-
"ignore": ["build", "dist", "node_modules", "**/*.md", "pnpm-lock.yaml", "styled-system"]
4+
"ignore": ["build", "dist", "node_modules", "**/*.md", "pnpm-lock.yaml", "styled-system", "snapshots"]
55
},
66
"organizeImports": {
77
"enabled": true

‎packages/panda-preset-color-radix/README.md‎

Lines changed: 37 additions & 131 deletions
Original file line numberDiff line numberDiff line change
@@ -129,6 +129,12 @@ The parameters for the default export options are exported as type `ColorRadixPr
129129
- Whether the `base` value should use the Radix dark or light color mode.
130130
- Options: `"light" | "dark"`
131131
- Default: `colorModeConditions.default` ?? `"dark"`
132+
- `contrastColorOverrides` (`ContrastColorOverrides`, _Optional_)
133+
- If overrides are included, all the properties below should be included.
134+
- `black` (`string`)
135+
- The color or color token to replace the default value of `black` for 0, 9c, and 13 scale values. It should have adequate contrast for accessibility with scale values 9-12 as a background color for colors amber, yellow, mint, lime, and sky.
136+
- `white` (`string`)
137+
- The color or color token to replace the default value of `white` for 0, 9c, and 13 scale values. It should have adequate contrast for accessibility with scale values 9-12 as a background color for colors other than amber, yellow, mint, lime, and sky.
132138

133139
#### Return
134140

@@ -157,6 +163,7 @@ const coreTokenStructure = {
157163
colors: {
158164
radix: {
159165
gray: {
166+
"0": { DEFAULT: { value: "#000000"}, light: { value: "#ffffff" }, dark: { value: "#000000" } },
160167
"1": { DEFAULT: { value: "#111111" }, light: { value: "#fcfcfc" }, dark: { value: "#111111" } },
161168
"2": { DEFAULT: { value: "#191919" }, light: { value: "#f9f9f9" }, dark: { value: "#191919" } },
162169
"3": { DEFAULT: { value: "#222222" }, light: { value: "#f0f0f0" }, dark: { value: "#222222" } },
@@ -166,12 +173,15 @@ const coreTokenStructure = {
166173
"7": { DEFAULT: { value: "#484848" }, light: { value: "#cecece" }, dark: { value: "#484848" } },
167174
"8": { DEFAULT: { value: "#606060" }, light: { value: "#bbbbbb" }, dark: { value: "#606060" } },
168175
"9": { DEFAULT: { value: "#6e6e6e" }, light: { value: "#8d8d8d" }, dark: { value: "#6e6e6e" } },
176+
"9c": { DEFAULT: { value: "#ffffff"}, light: {value: "#ffffff" }, dark: { value : "#ffffff" } },
169177
"10": { DEFAULT: { value: "#7b7b7b" }, light: { value: "#838383" }, dark: { value: "#7b7b7b" } },
170178
"11": { DEFAULT: { value: "#b4b4b4" }, light: { value: "#646464" }, dark: { value: "#b4b4b4" } },
171-
"12": { DEFAULT: { value: "#eeeeee" }, light: { value: "#202020" }, dark: { value: "#eeeeee" } }
179+
"12": { DEFAULT: { value: "#eeeeee" }, light: { value: "#202020" }, dark: { value: "#eeeeee" } },
180+
"13": { DEFAULT: { value: "#ffffff"}, light: { value: "#000000" }, dark: { value: "#ffffff" } },
172181
},
173182
// ... Other Colors
174183
orange: {
184+
"0": { DEFAULT: { value: "#000000"}, light: { value: "#ffffff" }, dark: { value: "#000000" } },
175185
"1": { DEFAULT: { value: "#17120e" }, light: { value: "#fefcfb" }, dark: { value: "#17120e" } },
176186
"2": { DEFAULT: { value: "#1e160f" }, light: { value: "#fff7ed" }, dark: { value: "#1e160f" } },
177187
"3": { DEFAULT: { value: "#331e0b" }, light: { value: "#ffefd6" }, dark: { value: "#331e0b" } },
@@ -181,9 +191,11 @@ const coreTokenStructure = {
181191
"7": { DEFAULT: { value: "#7e451d" }, light: { value: "#f5ae73" }, dark: { value: "#7e451d" } },
182192
"8": { DEFAULT: { value: "#a35829" }, light: { value: "#ec9455" }, dark: { value: "#a35829" } },
183193
"9": { DEFAULT: { value: "#f76b15" }, light: { value: "#f76b15" }, dark: { value: "#f76b15" } },
194+
"9c": { DEFAULT: { value: "#ffffff"}, light: {value: "#ffffff" }, dark: { value : "#ffffff" } },
184195
"10": { DEFAULT: { value: "#ff801f" }, light: { value: "#ef5f00" }, dark: { value: "#ff801f" } },
185196
"11": { DEFAULT: { value: "#ffa057" }, light: { value: "#cc4e00" }, dark: { value: "#ffa057" } },
186-
"12": { DEFAULT: { value: "#ffe0c2" }, light: { value: "#582d1d" }, dark: { value: "#ffe0c2" } }
197+
"12": { DEFAULT: { value: "#ffe0c2" }, light: { value: "#582d1d" }, dark: { value: "#ffe0c2" } },
198+
"13": { DEFAULT: { value: "#ffffff"}, light: { value: "#000000" }, dark: { value: "#ffffff" } },
187199
}
188200
}
189201
}
@@ -215,9 +227,9 @@ const semanticTokenStructure = {
215227
colors: {
216228
radix: {
217229
grass: {
218-
"1": { "DEFAULT": { value: "#0e1511" }, light: { value: "#fbfefb" }, dark: { value: "#0e1511" } },
230+
"0": { DEFAULT: { value: "#000000"}, light: { value: "#ffffff" }, dark: { value: "#000000" } },
219231
// ... Other color scale values
220-
"12": { "DEFAULT": { value: "#c2f0c2" }, light: { value: "#203c25" }, dark: { value: "#c2f0c2" } }
232+
"13": { DEFAULT: { value: "#ffffff"}, light: { value: "#000000" }, dark: { value: "#ffffff" } },
221233
}
222234
}
223235
}
@@ -226,19 +238,19 @@ const semanticTokenStructure = {
226238
colors: {
227239
radix: {
228240
primary: {
229-
"1": {
241+
"0": {
230242
value: {
231-
base: "{colors.radix.grass.1.dark}",
232-
_light: "{colors.radix.grass.1.light}",
233-
_dark: "{colors.radix.grass.1.dark}"
243+
base: "{colors.radix.grass.0.dark}",
244+
_light: "{colors.radix.grass.0.light}",
245+
_dark: "{colors.radix.grass.0.dark}"
234246
}
235247
},
236248
// ... Other color scale values
237-
"12": {
249+
"13": {
238250
value: {
239-
base: "{colors.radix.grass.12.dark}",
240-
_light: "{colors.radix.grass.12.light}",
241-
_dark: "{colors.radix.grass.12.dark}"
251+
base: "{colors.radix.grass.13.dark}",
252+
_light: "{colors.radix.grass.13.light}",
253+
_dark: "{colors.radix.grass.13.dark}"
242254
}
243255
}
244256
}
@@ -293,72 +305,6 @@ export default defineConfig({
293305
});
294306
```
295307

296-
```typescript
297-
const allColors = {
298-
theme: {
299-
extend: {
300-
tokens: {
301-
colors: {
302-
radix: {
303-
gray: {
304-
1: {
305-
DEFAULT: {
306-
value: "#111111"
307-
},
308-
light: {
309-
value: "#fcfcfc"
310-
},
311-
dark: {
312-
value: "#111111"
313-
}
314-
},
315-
// ... Rest of color scale
316-
12: {
317-
DEFAULT: {
318-
value: "#eeeeee"
319-
},
320-
light: {
321-
value: "#202020"
322-
},
323-
dark: {
324-
value: "#eeeeee"
325-
}
326-
}
327-
},
328-
// ... Other Colors
329-
orange: {
330-
1: {
331-
DEFAULT: {
332-
value: "#17120e"
333-
},
334-
light: {
335-
value: "#fefcfb"
336-
},
337-
dark: {
338-
value: "#17120e"
339-
}
340-
},
341-
// ... Rest of color scale
342-
12: {
343-
DEFAULT: {
344-
value: "#ffe0c2"
345-
},
346-
light: {
347-
value: "#582d1d"
348-
},
349-
dark: {
350-
value: "#ffe0c2"
351-
}
352-
}
353-
}
354-
}
355-
}
356-
}
357-
}
358-
}
359-
}
360-
```
361-
362308
[> Back to examples](#examples)
363309

364310
### Generate some colors as core tokens
@@ -379,46 +325,6 @@ export default defineConfig({
379325

380326
This generates only the color tokens that are included in the colors array.
381327

382-
```typescript
383-
const someColors = {
384-
theme: {
385-
extend: {
386-
tokens: {
387-
colors: {
388-
radix: {
389-
cyan: {
390-
1: {
391-
DEFAULT: {
392-
value: "#0b161a"
393-
},
394-
light: {
395-
value: "#fafdfe"
396-
},
397-
dark: {
398-
value: "#0b161a"
399-
}
400-
},
401-
// ... Rest of color scale
402-
12: {
403-
DEFAULT: {
404-
value: "#b6ecf7"
405-
},
406-
light: {
407-
value: "#0d3c48"
408-
},
409-
dark: {
410-
value: "#b6ecf7"
411-
}
412-
}
413-
}
414-
}
415-
}
416-
}
417-
}
418-
}
419-
}
420-
```
421-
422328
[> Back to examples](#examples)
423329

424330
### Change the default color mode to light for core tokens
@@ -446,7 +352,7 @@ const defaultLightCoreStructure = {
446352
radix: {
447353
// ... Other colors
448354
grass: {
449-
'1': {
355+
'0': {
450356
DEFAULT: { value: 'lightValue' },
451357
light: { value: 'lightValue' },
452358
dark: { value: 'darkValue' }
@@ -531,11 +437,11 @@ const defaultSemanticStructure = {
531437
colors: {
532438
radix: {
533439
primary: {
534-
1: {
440+
0: {
535441
value: {
536-
base: '{colors.grass.1.dark}',
537-
_light: '{colors.grass.1.light}',
538-
_dark: '{colors.grass.1.dark}',
442+
base: '{colors.grass.0.dark}',
443+
_light: '{colors.grass.0.light}',
444+
_dark: '{colors.grass.0.dark}',
539445
},
540446
},
541447
// ... Rest of color scale
@@ -583,11 +489,11 @@ const customLightSemanticStructure = {
583489
colors: {
584490
radix: {
585491
primary: {
586-
1: {
492+
0: {
587493
value: {
588-
base: '{colors.grass.1.dark}',
589-
_light: '{colors.grass.1.light}',
590-
_osLight: '{colors.grass.1.light}',
494+
base: '{colors.grass.0.dark}',
495+
_light: '{colors.grass.0.light}',
496+
_osLight: '{colors.grass.0.light}',
591497
},
592498
},
593499
// ... Rest of color scale
@@ -635,11 +541,11 @@ const customDarkSemanticStructure = {
635541
colors: {
636542
radix: {
637543
primary: {
638-
1: {
544+
0: {
639545
value: {
640-
base: '{colors.grass.1.dark}',
641-
_dark: '{colors.grass.1.dark}',
642-
_osDark: '{colors.grass.1.dark}',
546+
base: '{colors.grass.0.dark}',
547+
_dark: '{colors.grass.0.dark}',
548+
_osDark: '{colors.grass.0.dark}',
643549
},
644550
},
645551
// ... Rest of color scale

0 commit comments

Comments
 (0)