@okja/chi-tokens 0.4.1 → 0.4.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/README.md +68 -69
  2. package/dist/colors/blue.css +229 -172
  3. package/dist/colors/grayscale.css +213 -154
  4. package/dist/colors/purple.css +229 -172
  5. package/dist/tokens.css +195 -271
  6. package/package.json +3 -2
package/README.md CHANGED
@@ -1,6 +1,8 @@
1
1
  # @okja/chi-tokens
2
2
 
3
- Design tokens for the Chi design system - colors, typography, spacing, radius, shadow, and motion.
3
+ Low-level CSS design tokens for building themes. **If you're building an application, use `@okja/chi-themes` instead.**
4
+
5
+ This package provides the foundational design tokens consumed by `@okja/chi-themes`. It's useful if you're creating custom themes or need granular control over the design system.
4
6
 
5
7
  ## Installation
6
8
 
@@ -10,106 +12,103 @@ npm install @okja/chi-tokens
10
12
 
11
13
  ## Usage
12
14
 
13
- ### Import all tokens
14
-
15
- ```javascript
16
- import tokens from '@okja/chi-tokens';
17
-
18
- console.log(tokens.spacing[4]); // "16px"
19
- console.log(tokens.radius.md); // "12px"
15
+ ```css
16
+ @import '@okja/chi-tokens/tokens.css';
17
+ @import '@okja/chi-tokens/colors/grayscale.css';
20
18
  ```
21
19
 
22
- ### Import specific color palettes
20
+ Tokens are on `:root` and wrapped in `@layer tokens`.
23
21
 
24
- ```javascript
25
- import grayscale from '@okja/chi-tokens/colors/grayscale';
26
- import blue from '@okja/chi-tokens/colors/blue';
27
- import purple from '@okja/chi-tokens/colors/purple';
22
+ ## Token Reference
28
23
 
29
- console.log(grayscale.light.primary); // "oklch(49.4% 0.163 264.05)"
30
- console.log(grayscale.dark.surface); // "oklch(15% 0.005 264.05)"
31
- ```
24
+ ### Spacing
32
25
 
33
- ## Available Tokens
26
+ | Token | Value |
27
+ |-------|-------|
28
+ | `--space-1` | 4px |
29
+ | `--space-2` | 8px |
30
+ | `--space-3` | 12px |
31
+ | `--space-4` | 16px |
32
+ | `--space-5` | 24px |
33
+ | `--space-6` | 32px |
34
+ | `--space-7` | 40px |
35
+ | `--space-8` | 48px |
36
+ | `--space-9` | 64px |
34
37
 
35
38
  ### Typography
36
39
 
37
- | Token | Values |
38
- |-------|--------|
39
- | `font-family` | `sans`, `serif`, `mono` |
40
- | `font-size` | `1`-`9` (12px-60px) |
41
- | `font-weight` | `light`, `regular`, `medium`, `bold` |
42
- | `line-height` | `1`-`9` (16px-60px) |
43
- | `letter-spacing` | `1`-`3` |
44
-
45
- ### Spacing
46
-
47
40
  | Token | Value |
48
41
  |-------|-------|
49
- | `1` | 4px |
50
- | `2` | 8px |
51
- | `3` | 12px |
52
- | `4` | 16px |
53
- | `5` | 24px |
54
- | `6` | 32px |
55
- | `7` | 40px |
56
- | `8` | 48px |
57
- | `9` | 64px |
42
+ | `--font-sans` | system-ui, -apple-system, 'Segoe UI', sans-serif |
43
+ | `--font-serif` | georgia, 'Times New Roman', serif |
44
+ | `--font-mono` | 'SF Mono', monaco, 'Courier New', monospace |
45
+ | `--font-size-1` to `--font-size-9` | 12px to 60px |
46
+ | `--font-weight-light/regular/medium/bold` | 300/400/500/700 |
47
+ | `--line-height-1` to `--line-height-9` | 16px to 60px |
58
48
 
59
49
  ### Radius
60
50
 
61
51
  | Token | Value |
62
52
  |-------|-------|
63
- | `none` | 0 |
64
- | `xs` | 4px |
65
- | `sm` | 8px |
66
- | `md` | 12px |
67
- | `lg` | 16px |
68
- | `xl` | 28px |
69
- | `full` | 9999px |
53
+ | `--radius-none` | 0 |
54
+ | `--radius-xs` | 4px |
55
+ | `--radius-sm` | 8px |
56
+ | `--radius-md` | 12px |
57
+ | `--radius-lg` | 16px |
58
+ | `--radius-xl` | 28px |
59
+ | `--radius-full` | 9999px |
70
60
 
71
61
  ### Shadow
72
62
 
73
- Shadows are provided for both `light` and `dark` modes with levels `1`-`5`.
74
-
75
- ```javascript
76
- tokens.shadow.light[3] // Light mode, level 3
77
- tokens.shadow.dark[3] // Dark mode, level 3
78
- ```
63
+ | Token | Description |
64
+ |-------|-------------|
65
+ | `--shadow-0` | none |
66
+ | `--shadow-1` | Subtle |
67
+ | `--shadow-2` | Low |
68
+ | `--shadow-3` | Medium |
69
+ | `--shadow-4` | High |
70
+ | `--shadow-5` | Highest |
79
71
 
80
72
  ### Motion
81
73
 
82
- | Token | Values |
83
- |-------|--------|
84
- | `duration` | `instant`, `short1`-`short4`, `medium1`-`medium4`, `long1`-`long4`, `extra-long1`-`extra-long4` |
85
- | `easing` | `linear`, `ease`, `ease-in`, `ease-out`, `ease-in-out`, `standard`, `emphasized`, etc. |
74
+ | Token | Value |
75
+ |-------|-------|
76
+ | `--duration-instant` | 0ms |
77
+ | `--duration-short1` to `short4` | 50-200ms |
78
+ | `--duration-medium1` to `medium4` | 250-400ms |
79
+ | `--duration-long1` to `long4` | 450-600ms |
80
+ | `--easing-standard` | Standard easing |
81
+ | `--easing-emphasized` | Emphasized easing |
86
82
 
87
- ### Other
83
+ ### Colors
88
84
 
89
85
  | Token | Description |
90
86
  |-------|-------------|
91
- | `container` | Max-width breakpoints (`1`-`4`) |
92
- | `icon-size` | Icon sizes (`sm`, `md`, `lg`, `xl`) |
93
- | `scaling` | Scale factors (`90`-`110`) |
94
- | `radius-factor` | Radius multipliers (`none`, `small`, `medium`, `large`) |
87
+ | `--color-primary` | Primary brand |
88
+ | `--color-on-primary` | Text on primary |
89
+ | `--color-surface` | Surface background |
90
+ | `--color-on-surface` | Text on surface |
91
+ | `--color-error` | Error states |
92
+ | `--color-outline` | Borders |
95
93
 
96
94
  ## Color Palettes
97
95
 
98
- Each color palette (`grayscale`, `blue`, `purple`) includes light and dark mode variants:
99
-
100
- **Primary colors**: `primary`, `on-primary`, `primary-container`, `on-primary-container`
101
-
102
- **Secondary colors**: `secondary`, `on-secondary`, `secondary-container`, `on-secondary-container`
96
+ - `colors/grayscale.css` - Neutral (default)
97
+ - `colors/blue.css` - Corporate blue
98
+ - `colors/purple.css` - Creative purple
103
99
 
104
- **Tertiary colors**: `tertiary`, `on-tertiary`, `tertiary-container`, `on-tertiary-container`
100
+ Colors use `light-dark()` for automatic dark mode:
105
101
 
106
- **Error colors**: `error`, `on-error`, `error-container`, `on-error-container`
107
-
108
- **Surface colors**: `surface`, `on-surface`, `surface-variant`, `on-surface-variant`, `surface-container`, `surface-container-low`, `surface-container-high`, `surface-container-highest`
102
+ ```css
103
+ --color-surface: light-dark(oklch(99% 0.005 264deg), oklch(15% 0.005 264deg));
104
+ ```
109
105
 
110
- **Utility colors**: `outline`, `outline-variant`, `inverse-surface`, `inverse-on-surface`, `inverse-primary`, `scrim`, `shadow`
106
+ ## Architecture
111
107
 
112
- Colors use the OKLCH color space for perceptual uniformity.
108
+ - **CSS Cascade Layers** - `@layer tokens` for clean cascade control
109
+ - **`light-dark()` function** - Automatic dark mode colors
110
+ - **OKLCH color space** - Perceptual uniformity
111
+ - **Scaling support** - `var(--scaling, 1)` multiplier
113
112
 
114
113
  ## License
115
114
 
package/dist/colors/blue.css CHANGED
@@ -1,180 +1,237 @@
1
1
  /**
2
- * Chi Design System - Blue Color Scale
3
- * Rebate Arc v1 - Corporate Blue
4
- * Classic healthcare/corporate blue color scheme
2
+ * Chi Design System - Blue Color Palette
3
+ * Corporate blue for healthcare/enterprise applications
5
4
  */
6
5
 
7
- :root {
8
- /* Primary Colors - Corporate Blue (#0066CC / IBM-style blue) */
9
- --chi-color-primary: oklch(52% 0.14 250deg);
10
- --chi-color-on-primary: oklch(100% 0 0deg);
11
- --chi-color-primary-container: oklch(85% 0.08 250deg);
12
- --chi-color-on-primary-container: oklch(20% 0.14 250deg);
13
-
14
- /* Secondary Colors - Steel Blue/Gray */
15
- --chi-color-secondary: oklch(50% 0.05 245deg);
16
- --chi-color-on-secondary: oklch(100% 0 0deg);
17
- --chi-color-secondary-container: oklch(88% 0.03 245deg);
18
- --chi-color-on-secondary-container: oklch(20% 0.05 245deg);
19
-
20
- /* Tertiary Colors - Teal/Cyan accent */
21
- --chi-color-tertiary: oklch(58% 0.12 195deg);
22
- --chi-color-on-tertiary: oklch(100% 0 0deg);
23
- --chi-color-tertiary-container: oklch(88% 0.06 195deg);
24
- --chi-color-on-tertiary-container: oklch(22% 0.12 195deg);
25
-
26
- /* Error Colors - Red */
27
- --chi-color-error: oklch(66.4% 0.195 29deg);
28
- --chi-color-on-error: oklch(20% 0.05 29deg);
29
- --chi-color-error-container: oklch(92% 0.05 29deg);
30
- --chi-color-on-error-container: oklch(20% 0.05 29deg);
31
-
32
- /* Surface & Background Colors - Cooler tone */
33
- --chi-color-background: oklch(99% 0.003 245deg);
34
- --chi-color-on-background: oklch(12% 0.003 245deg);
35
- --chi-color-surface: oklch(99% 0.003 245deg);
36
- --chi-color-on-surface: oklch(12% 0.003 245deg);
37
- --chi-color-surface-variant: oklch(92% 0.01 245deg);
38
- --chi-color-on-surface-variant: oklch(32% 0.02 245deg);
39
-
40
- /* Surface Elevation Levels */
41
- --chi-color-surface-0: oklch(100% 0 0deg);
42
- --chi-color-surface-1: oklch(98% 0.005 245deg);
43
- --chi-color-surface-2: oklch(96% 0.005 245deg);
44
- --chi-color-surface-3: oklch(94% 0.005 245deg);
45
- --chi-color-surface-4: oklch(92% 0.005 245deg);
46
- --chi-color-surface-5: oklch(92% 0.005 245deg);
47
-
48
- /* Container Colors */
49
- --chi-color-surface-container: oklch(96% 0.005 245deg);
50
- --chi-color-surface-container-low: oklch(98% 0.003 245deg);
51
- --chi-color-surface-container-high: oklch(94% 0.005 245deg);
52
- --chi-color-surface-container-highest: oklch(92% 0.005 245deg);
53
-
54
- /* Inverse Colors */
55
- --chi-color-inverse-surface: oklch(20% 0 0deg);
56
- --chi-color-inverse-on-surface: oklch(96% 0.003 245deg);
57
- --chi-color-inverse-primary: oklch(80% 0.08 250deg);
58
-
59
- /* Outline Colors */
60
- --chi-color-outline: oklch(48% 0.01 245deg);
61
- --chi-color-outline-variant: oklch(92% 0.01 245deg);
62
- --chi-color-divider: oklch(48% 0.01 245deg);
63
-
64
- /* Scrim and shadow */
65
- --chi-color-scrim: oklch(0% 0 0deg);
66
- --chi-color-shadow: oklch(0% 0 0deg);
67
- }
68
-
69
- /* Dark mode overrides */
70
-
71
- @media (prefers-color-scheme: dark) {
6
+ @layer tokens {
72
7
  :root {
73
- /* Dark Primary Colors */
74
- --chi-color-primary: oklch(75% 0.1 250deg);
75
- --chi-color-on-primary: oklch(15% 0.14 250deg);
76
- --chi-color-primary-container: oklch(30% 0.14 250deg);
77
- --chi-color-on-primary-container: oklch(88% 0.08 250deg);
78
-
79
- /* Dark Secondary Colors */
80
- --chi-color-secondary: oklch(68% 0.04 245deg);
81
- --chi-color-on-secondary: oklch(12% 0.05 245deg);
82
- --chi-color-secondary-container: oklch(28% 0.05 245deg);
83
- --chi-color-on-secondary-container: oklch(88% 0.03 245deg);
84
-
85
- /* Dark Tertiary Colors */
86
- --chi-color-tertiary: oklch(72% 0.09 195deg);
87
- --chi-color-on-tertiary: oklch(18% 0.12 195deg);
88
- --chi-color-tertiary-container: oklch(32% 0.12 195deg);
89
- --chi-color-on-tertiary-container: oklch(90% 0.06 195deg);
90
-
91
- /* Dark Error Colors */
92
- --chi-color-error: oklch(68.5% 0.195 29deg);
93
- --chi-color-on-error: oklch(20% 0.05 29deg);
94
- --chi-color-error-container: oklch(66.4% 0.195 29deg);
95
- --chi-color-on-error-container: oklch(92% 0.05 29deg);
96
-
97
- /* Dark Surface & Background */
98
- --chi-color-background: oklch(9% 0.003 245deg);
99
- --chi-color-on-background: oklch(92% 0.003 245deg);
100
- --chi-color-surface: oklch(7% 0.003 245deg);
101
- --chi-color-on-surface: oklch(92% 0.003 245deg);
102
- --chi-color-surface-variant: oklch(30% 0.02 245deg);
103
- --chi-color-on-surface-variant: oklch(82% 0.01 245deg);
104
-
105
- /* Dark Surface Elevation Levels */
106
- --chi-color-surface-0: oklch(7% 0.003 245deg);
107
- --chi-color-surface-1: oklch(12% 0.003 245deg);
108
- --chi-color-surface-2: oklch(15% 0.003 245deg);
109
- --chi-color-surface-3: oklch(18% 0.003 245deg);
110
- --chi-color-surface-4: oklch(22% 0.003 245deg);
111
- --chi-color-surface-5: oklch(22% 0.003 245deg);
112
-
113
- /* Dark Container Colors */
114
- --chi-color-surface-container: oklch(15% 0.003 245deg);
115
- --chi-color-surface-container-low: oklch(12% 0.003 245deg);
116
- --chi-color-surface-container-high: oklch(18% 0.003 245deg);
117
- --chi-color-surface-container-highest: oklch(22% 0.003 245deg);
118
-
119
- /* Dark Inverse Colors */
120
- --chi-color-inverse-surface: oklch(92% 0.003 245deg);
121
- --chi-color-inverse-on-surface: oklch(20% 0.003 245deg);
122
- --chi-color-inverse-primary: oklch(52% 0.14 250deg);
8
+ --csstools-color-scheme--light: initial;
9
+ color-scheme: light dark;
10
+
11
+ /* Primary - Corporate Blue */
12
+ --csstools-light-dark-toggle--0: var(--csstools-color-scheme--light) oklch(75% 0.1 250deg);
13
+ --color-primary: var(--csstools-light-dark-toggle--0, oklch(52% 0.14 250deg));
14
+ --csstools-light-dark-toggle--1: var(--csstools-color-scheme--light) oklch(15% 0.14 250deg);
15
+ --color-on-primary: var(--csstools-light-dark-toggle--1, oklch(100% 0 0deg));
16
+ --csstools-light-dark-toggle--2: var(--csstools-color-scheme--light) oklch(30% 0.14 250deg);
17
+ --color-primary-container: var(--csstools-light-dark-toggle--2, oklch(85% 0.08 250deg));
18
+ --csstools-light-dark-toggle--3: var(--csstools-color-scheme--light) oklch(88% 0.08 250deg);
19
+ --color-on-primary-container: var(--csstools-light-dark-toggle--3, oklch(20% 0.14 250deg));
20
+
21
+ /* Secondary - Steel Blue/Gray */
22
+ --csstools-light-dark-toggle--4: var(--csstools-color-scheme--light) oklch(68% 0.04 245deg);
23
+ --color-secondary: var(--csstools-light-dark-toggle--4, oklch(50% 0.05 245deg));
24
+ --csstools-light-dark-toggle--5: var(--csstools-color-scheme--light) oklch(12% 0.05 245deg);
25
+ --color-on-secondary: var(--csstools-light-dark-toggle--5, oklch(100% 0 0deg));
26
+ --csstools-light-dark-toggle--6: var(--csstools-color-scheme--light) oklch(28% 0.05 245deg);
27
+ --color-secondary-container: var(--csstools-light-dark-toggle--6, oklch(88% 0.03 245deg));
28
+ --csstools-light-dark-toggle--7: var(--csstools-color-scheme--light) oklch(88% 0.03 245deg);
29
+ --color-on-secondary-container: var(--csstools-light-dark-toggle--7, oklch(20% 0.05 245deg));
30
+
31
+ /* Tertiary - Teal/Cyan */
32
+ --csstools-light-dark-toggle--8: var(--csstools-color-scheme--light) oklch(72% 0.09 195deg);
33
+ --color-tertiary: var(--csstools-light-dark-toggle--8, oklch(58% 0.12 195deg));
34
+ --csstools-light-dark-toggle--9: var(--csstools-color-scheme--light) oklch(18% 0.12 195deg);
35
+ --color-on-tertiary: var(--csstools-light-dark-toggle--9, oklch(100% 0 0deg));
36
+ --csstools-light-dark-toggle--10: var(--csstools-color-scheme--light) oklch(32% 0.12 195deg);
37
+ --color-tertiary-container: var(--csstools-light-dark-toggle--10, oklch(88% 0.06 195deg));
38
+ --csstools-light-dark-toggle--11: var(--csstools-color-scheme--light) oklch(90% 0.06 195deg);
39
+ --color-on-tertiary-container: var(--csstools-light-dark-toggle--11, oklch(22% 0.12 195deg));
40
+
41
+ /* Error */
42
+ --csstools-light-dark-toggle--12: var(--csstools-color-scheme--light) oklch(68.5% 0.195 29deg);
43
+ --color-error: var(--csstools-light-dark-toggle--12, oklch(66.4% 0.195 29deg));
44
+ --csstools-light-dark-toggle--13: var(--csstools-color-scheme--light) oklch(20% 0.05 29deg);
45
+ --color-on-error: var(--csstools-light-dark-toggle--13, oklch(20% 0.05 29deg));
46
+ --csstools-light-dark-toggle--14: var(--csstools-color-scheme--light) oklch(66.4% 0.195 29deg);
47
+ --color-error-container: var(--csstools-light-dark-toggle--14, oklch(92% 0.05 29deg));
48
+ --csstools-light-dark-toggle--15: var(--csstools-color-scheme--light) oklch(92% 0.05 29deg);
49
+ --color-on-error-container: var(--csstools-light-dark-toggle--15, oklch(20% 0.05 29deg));
50
+
51
+ /* Surface */
52
+ --csstools-light-dark-toggle--16: var(--csstools-color-scheme--light) oklch(7% 0.003 245deg);
53
+ --color-surface: var(--csstools-light-dark-toggle--16, oklch(99% 0.003 245deg));
54
+ --csstools-light-dark-toggle--17: var(--csstools-color-scheme--light) oklch(92% 0.003 245deg);
55
+ --color-on-surface: var(--csstools-light-dark-toggle--17, oklch(12% 0.003 245deg));
56
+ --csstools-light-dark-toggle--18: var(--csstools-color-scheme--light) oklch(30% 0.02 245deg);
57
+ --color-surface-variant: var(--csstools-light-dark-toggle--18, oklch(92% 0.01 245deg));
58
+ --csstools-light-dark-toggle--19: var(--csstools-color-scheme--light) oklch(82% 0.01 245deg);
59
+ --color-on-surface-variant: var(--csstools-light-dark-toggle--19, oklch(32% 0.02 245deg));
60
+ --csstools-light-dark-toggle--20: var(--csstools-color-scheme--light) oklch(15% 0.003 245deg);
61
+ --color-surface-container: var(--csstools-light-dark-toggle--20, oklch(96% 0.005 245deg));
62
+ --csstools-light-dark-toggle--21: var(--csstools-color-scheme--light) oklch(12% 0.003 245deg);
63
+ --color-surface-container-low: var(--csstools-light-dark-toggle--21, oklch(98% 0.003 245deg));
64
+ --csstools-light-dark-toggle--22: var(--csstools-color-scheme--light) oklch(18% 0.003 245deg);
65
+ --color-surface-container-high: var(--csstools-light-dark-toggle--22, oklch(94% 0.005 245deg));
66
+ --csstools-light-dark-toggle--23: var(--csstools-color-scheme--light) oklch(22% 0.003 245deg);
67
+ --color-surface-container-highest: var(--csstools-light-dark-toggle--23, oklch(92% 0.005 245deg));
68
+
69
+ /* Surface elevations */
70
+ --csstools-light-dark-toggle--24: var(--csstools-color-scheme--light) oklch(7% 0.003 245deg);
71
+ --color-surface-0: var(--csstools-light-dark-toggle--24, oklch(100% 0 0deg));
72
+ --csstools-light-dark-toggle--25: var(--csstools-color-scheme--light) oklch(12% 0.003 245deg);
73
+ --color-surface-1: var(--csstools-light-dark-toggle--25, oklch(98% 0.005 245deg));
74
+ --csstools-light-dark-toggle--26: var(--csstools-color-scheme--light) oklch(15% 0.003 245deg);
75
+ --color-surface-2: var(--csstools-light-dark-toggle--26, oklch(96% 0.005 245deg));
76
+ --csstools-light-dark-toggle--27: var(--csstools-color-scheme--light) oklch(18% 0.003 245deg);
77
+ --color-surface-3: var(--csstools-light-dark-toggle--27, oklch(94% 0.005 245deg));
78
+ --csstools-light-dark-toggle--28: var(--csstools-color-scheme--light) oklch(22% 0.003 245deg);
79
+ --color-surface-4: var(--csstools-light-dark-toggle--28, oklch(92% 0.005 245deg));
80
+ --csstools-light-dark-toggle--29: var(--csstools-color-scheme--light) oklch(22% 0.003 245deg);
81
+ --color-surface-5: var(--csstools-light-dark-toggle--29, oklch(92% 0.005 245deg));
82
+
83
+ /* Background */
84
+ --csstools-light-dark-toggle--30: var(--csstools-color-scheme--light) oklch(9% 0.003 245deg);
85
+ --color-background: var(--csstools-light-dark-toggle--30, oklch(99% 0.003 245deg));
86
+ --csstools-light-dark-toggle--31: var(--csstools-color-scheme--light) oklch(92% 0.003 245deg);
87
+ --color-on-background: var(--csstools-light-dark-toggle--31, oklch(12% 0.003 245deg));
88
+
89
+ /* Outline */
90
+ --csstools-light-dark-toggle--32: var(--csstools-color-scheme--light) oklch(60% 0.01 245deg);
91
+ --color-outline: var(--csstools-light-dark-toggle--32, oklch(48% 0.01 245deg));
92
+ --csstools-light-dark-toggle--33: var(--csstools-color-scheme--light) oklch(30% 0.02 245deg);
93
+ --color-outline-variant: var(--csstools-light-dark-toggle--33, oklch(92% 0.01 245deg));
94
+ --csstools-light-dark-toggle--34: var(--csstools-color-scheme--light) oklch(60% 0.01 245deg);
95
+ --color-divider: var(--csstools-light-dark-toggle--34, oklch(48% 0.01 245deg));
96
+
97
+ /* Inverse */
98
+ --csstools-light-dark-toggle--35: var(--csstools-color-scheme--light) oklch(92% 0.003 245deg);
99
+ --color-inverse-surface: var(--csstools-light-dark-toggle--35, oklch(20% 0 0deg));
100
+ --csstools-light-dark-toggle--36: var(--csstools-color-scheme--light) oklch(20% 0.003 245deg);
101
+ --color-inverse-on-surface: var(--csstools-light-dark-toggle--36, oklch(96% 0.003 245deg));
102
+ --csstools-light-dark-toggle--37: var(--csstools-color-scheme--light) oklch(52% 0.14 250deg);
103
+ --color-inverse-primary: var(--csstools-light-dark-toggle--37, oklch(80% 0.08 250deg));
104
+
105
+ /* Scrim and shadow */
106
+ --color-scrim: oklch(0% 0 0deg);
107
+ --color-shadow: oklch(0% 0 0deg);
108
+ }
123
109
 
124
- /* Dark Outline Colors */
125
- --chi-color-outline: oklch(60% 0.01 245deg);
126
- --chi-color-outline-variant: oklch(30% 0.02 245deg);
127
- --chi-color-divider: oklch(60% 0.01 245deg);
110
+ @supports (color: light-dark(red, red)) and (color: oklab(0% 0 0%)) {
111
+ :root {
112
+ --color-primary: light-dark(oklch(52% 0.14 250deg), oklch(75% 0.1 250deg));
113
+ --color-on-primary: light-dark(oklch(100% 0 0deg), oklch(15% 0.14 250deg));
114
+ --color-primary-container: light-dark(oklch(85% 0.08 250deg), oklch(30% 0.14 250deg));
115
+ --color-on-primary-container: light-dark(oklch(20% 0.14 250deg), oklch(88% 0.08 250deg));
116
+ --color-secondary: light-dark(oklch(50% 0.05 245deg), oklch(68% 0.04 245deg));
117
+ --color-on-secondary: light-dark(oklch(100% 0 0deg), oklch(12% 0.05 245deg));
118
+ --color-secondary-container: light-dark(oklch(88% 0.03 245deg), oklch(28% 0.05 245deg));
119
+ --color-on-secondary-container: light-dark(oklch(20% 0.05 245deg), oklch(88% 0.03 245deg));
120
+ --color-tertiary: light-dark(oklch(58% 0.12 195deg), oklch(72% 0.09 195deg));
121
+ --color-on-tertiary: light-dark(oklch(100% 0 0deg), oklch(18% 0.12 195deg));
122
+ --color-tertiary-container: light-dark(oklch(88% 0.06 195deg), oklch(32% 0.12 195deg));
123
+ --color-on-tertiary-container: light-dark(oklch(22% 0.12 195deg), oklch(90% 0.06 195deg));
124
+ --color-error: light-dark(oklch(66.4% 0.195 29deg), oklch(68.5% 0.195 29deg));
125
+ --color-on-error: light-dark(oklch(20% 0.05 29deg), oklch(20% 0.05 29deg));
126
+ --color-error-container: light-dark(oklch(92% 0.05 29deg), oklch(66.4% 0.195 29deg));
127
+ --color-on-error-container: light-dark(oklch(20% 0.05 29deg), oklch(92% 0.05 29deg));
128
+ --color-surface: light-dark(oklch(99% 0.003 245deg), oklch(7% 0.003 245deg));
129
+ --color-on-surface: light-dark(oklch(12% 0.003 245deg), oklch(92% 0.003 245deg));
130
+ --color-surface-variant: light-dark(oklch(92% 0.01 245deg), oklch(30% 0.02 245deg));
131
+ --color-on-surface-variant: light-dark(oklch(32% 0.02 245deg), oklch(82% 0.01 245deg));
132
+ --color-surface-container: light-dark(oklch(96% 0.005 245deg), oklch(15% 0.003 245deg));
133
+ --color-surface-container-low: light-dark(oklch(98% 0.003 245deg), oklch(12% 0.003 245deg));
134
+ --color-surface-container-high: light-dark(oklch(94% 0.005 245deg), oklch(18% 0.003 245deg));
135
+ --color-surface-container-highest: light-dark(oklch(92% 0.005 245deg), oklch(22% 0.003 245deg));
136
+ --color-surface-0: light-dark(oklch(100% 0 0deg), oklch(7% 0.003 245deg));
137
+ --color-surface-1: light-dark(oklch(98% 0.005 245deg), oklch(12% 0.003 245deg));
138
+ --color-surface-2: light-dark(oklch(96% 0.005 245deg), oklch(15% 0.003 245deg));
139
+ --color-surface-3: light-dark(oklch(94% 0.005 245deg), oklch(18% 0.003 245deg));
140
+ --color-surface-4: light-dark(oklch(92% 0.005 245deg), oklch(22% 0.003 245deg));
141
+ --color-surface-5: light-dark(oklch(92% 0.005 245deg), oklch(22% 0.003 245deg));
142
+ --color-background: light-dark(oklch(99% 0.003 245deg), oklch(9% 0.003 245deg));
143
+ --color-on-background: light-dark(oklch(12% 0.003 245deg), oklch(92% 0.003 245deg));
144
+ --color-outline: light-dark(oklch(48% 0.01 245deg), oklch(60% 0.01 245deg));
145
+ --color-outline-variant: light-dark(oklch(92% 0.01 245deg), oklch(30% 0.02 245deg));
146
+ --color-divider: light-dark(oklch(48% 0.01 245deg), oklch(60% 0.01 245deg));
147
+ --color-inverse-surface: light-dark(oklch(20% 0 0deg), oklch(92% 0.003 245deg));
148
+ --color-inverse-on-surface: light-dark(oklch(96% 0.003 245deg), oklch(20% 0.003 245deg));
149
+ --color-inverse-primary: light-dark(oklch(80% 0.08 250deg), oklch(52% 0.14 250deg));
128
150
  }
129
151
  }
130
-
131
- /* Explicit dark theme */
132
-
133
- [data-theme='dark'] {
134
- --chi-color-primary: oklch(75% 0.1 250deg);
135
- --chi-color-on-primary: oklch(15% 0.14 250deg);
136
- --chi-color-primary-container: oklch(30% 0.14 250deg);
137
- --chi-color-on-primary-container: oklch(88% 0.08 250deg);
138
-
139
- --chi-color-secondary: oklch(68% 0.04 245deg);
140
- --chi-color-on-secondary: oklch(12% 0.05 245deg);
141
- --chi-color-secondary-container: oklch(28% 0.05 245deg);
142
- --chi-color-on-secondary-container: oklch(88% 0.03 245deg);
143
-
144
- --chi-color-tertiary: oklch(72% 0.09 195deg);
145
- --chi-color-on-tertiary: oklch(18% 0.12 195deg);
146
- --chi-color-tertiary-container: oklch(32% 0.12 195deg);
147
- --chi-color-on-tertiary-container: oklch(90% 0.06 195deg);
148
-
149
- --chi-color-error: oklch(68.5% 0.195 29deg);
150
- --chi-color-on-error: oklch(20% 0.05 29deg);
151
- --chi-color-error-container: oklch(66.4% 0.195 29deg);
152
- --chi-color-on-error-container: oklch(92% 0.05 29deg);
153
-
154
- --chi-color-background: oklch(9% 0.003 245deg);
155
- --chi-color-on-background: oklch(92% 0.003 245deg);
156
- --chi-color-surface: oklch(7% 0.003 245deg);
157
- --chi-color-on-surface: oklch(92% 0.003 245deg);
158
- --chi-color-surface-variant: oklch(30% 0.02 245deg);
159
- --chi-color-on-surface-variant: oklch(82% 0.01 245deg);
160
-
161
- --chi-color-surface-0: oklch(7% 0.003 245deg);
162
- --chi-color-surface-1: oklch(12% 0.003 245deg);
163
- --chi-color-surface-2: oklch(15% 0.003 245deg);
164
- --chi-color-surface-3: oklch(18% 0.003 245deg);
165
- --chi-color-surface-4: oklch(22% 0.003 245deg);
166
- --chi-color-surface-5: oklch(22% 0.003 245deg);
167
-
168
- --chi-color-surface-container: oklch(15% 0.003 245deg);
169
- --chi-color-surface-container-low: oklch(12% 0.003 245deg);
170
- --chi-color-surface-container-high: oklch(18% 0.003 245deg);
171
- --chi-color-surface-container-highest: oklch(22% 0.003 245deg);
172
-
173
- --chi-color-inverse-surface: oklch(92% 0.003 245deg);
174
- --chi-color-inverse-on-surface: oklch(20% 0.003 245deg);
175
- --chi-color-inverse-primary: oklch(52% 0.14 250deg);
176
-
177
- --chi-color-outline: oklch(60% 0.01 245deg);
178
- --chi-color-outline-variant: oklch(30% 0.02 245deg);
179
- --chi-color-divider: oklch(60% 0.01 245deg);
152
+ @supports not (color: light-dark(tan, tan)) {
153
+ :root * {
154
+ --csstools-light-dark-toggle--0: var(--csstools-color-scheme--light) oklch(75% 0.1 250deg);
155
+ --color-primary: var(--csstools-light-dark-toggle--0, oklch(52% 0.14 250deg));
156
+ --csstools-light-dark-toggle--1: var(--csstools-color-scheme--light) oklch(15% 0.14 250deg);
157
+ --color-on-primary: var(--csstools-light-dark-toggle--1, oklch(100% 0 0deg));
158
+ --csstools-light-dark-toggle--2: var(--csstools-color-scheme--light) oklch(30% 0.14 250deg);
159
+ --color-primary-container: var(--csstools-light-dark-toggle--2, oklch(85% 0.08 250deg));
160
+ --csstools-light-dark-toggle--3: var(--csstools-color-scheme--light) oklch(88% 0.08 250deg);
161
+ --color-on-primary-container: var(--csstools-light-dark-toggle--3, oklch(20% 0.14 250deg));
162
+ --csstools-light-dark-toggle--4: var(--csstools-color-scheme--light) oklch(68% 0.04 245deg);
163
+ --color-secondary: var(--csstools-light-dark-toggle--4, oklch(50% 0.05 245deg));
164
+ --csstools-light-dark-toggle--5: var(--csstools-color-scheme--light) oklch(12% 0.05 245deg);
165
+ --color-on-secondary: var(--csstools-light-dark-toggle--5, oklch(100% 0 0deg));
166
+ --csstools-light-dark-toggle--6: var(--csstools-color-scheme--light) oklch(28% 0.05 245deg);
167
+ --color-secondary-container: var(--csstools-light-dark-toggle--6, oklch(88% 0.03 245deg));
168
+ --csstools-light-dark-toggle--7: var(--csstools-color-scheme--light) oklch(88% 0.03 245deg);
169
+ --color-on-secondary-container: var(--csstools-light-dark-toggle--7, oklch(20% 0.05 245deg));
170
+ --csstools-light-dark-toggle--8: var(--csstools-color-scheme--light) oklch(72% 0.09 195deg);
171
+ --color-tertiary: var(--csstools-light-dark-toggle--8, oklch(58% 0.12 195deg));
172
+ --csstools-light-dark-toggle--9: var(--csstools-color-scheme--light) oklch(18% 0.12 195deg);
173
+ --color-on-tertiary: var(--csstools-light-dark-toggle--9, oklch(100% 0 0deg));
174
+ --csstools-light-dark-toggle--10: var(--csstools-color-scheme--light) oklch(32% 0.12 195deg);
175
+ --color-tertiary-container: var(--csstools-light-dark-toggle--10, oklch(88% 0.06 195deg));
176
+ --csstools-light-dark-toggle--11: var(--csstools-color-scheme--light) oklch(90% 0.06 195deg);
177
+ --color-on-tertiary-container: var(--csstools-light-dark-toggle--11, oklch(22% 0.12 195deg));
178
+ --csstools-light-dark-toggle--12: var(--csstools-color-scheme--light) oklch(68.5% 0.195 29deg);
179
+ --color-error: var(--csstools-light-dark-toggle--12, oklch(66.4% 0.195 29deg));
180
+ --csstools-light-dark-toggle--13: var(--csstools-color-scheme--light) oklch(20% 0.05 29deg);
181
+ --color-on-error: var(--csstools-light-dark-toggle--13, oklch(20% 0.05 29deg));
182
+ --csstools-light-dark-toggle--14: var(--csstools-color-scheme--light) oklch(66.4% 0.195 29deg);
183
+ --color-error-container: var(--csstools-light-dark-toggle--14, oklch(92% 0.05 29deg));
184
+ --csstools-light-dark-toggle--15: var(--csstools-color-scheme--light) oklch(92% 0.05 29deg);
185
+ --color-on-error-container: var(--csstools-light-dark-toggle--15, oklch(20% 0.05 29deg));
186
+ --csstools-light-dark-toggle--16: var(--csstools-color-scheme--light) oklch(7% 0.003 245deg);
187
+ --color-surface: var(--csstools-light-dark-toggle--16, oklch(99% 0.003 245deg));
188
+ --csstools-light-dark-toggle--17: var(--csstools-color-scheme--light) oklch(92% 0.003 245deg);
189
+ --color-on-surface: var(--csstools-light-dark-toggle--17, oklch(12% 0.003 245deg));
190
+ --csstools-light-dark-toggle--18: var(--csstools-color-scheme--light) oklch(30% 0.02 245deg);
191
+ --color-surface-variant: var(--csstools-light-dark-toggle--18, oklch(92% 0.01 245deg));
192
+ --csstools-light-dark-toggle--19: var(--csstools-color-scheme--light) oklch(82% 0.01 245deg);
193
+ --color-on-surface-variant: var(--csstools-light-dark-toggle--19, oklch(32% 0.02 245deg));
194
+ --csstools-light-dark-toggle--20: var(--csstools-color-scheme--light) oklch(15% 0.003 245deg);
195
+ --color-surface-container: var(--csstools-light-dark-toggle--20, oklch(96% 0.005 245deg));
196
+ --csstools-light-dark-toggle--21: var(--csstools-color-scheme--light) oklch(12% 0.003 245deg);
197
+ --color-surface-container-low: var(--csstools-light-dark-toggle--21, oklch(98% 0.003 245deg));
198
+ --csstools-light-dark-toggle--22: var(--csstools-color-scheme--light) oklch(18% 0.003 245deg);
199
+ --color-surface-container-high: var(--csstools-light-dark-toggle--22, oklch(94% 0.005 245deg));
200
+ --csstools-light-dark-toggle--23: var(--csstools-color-scheme--light) oklch(22% 0.003 245deg);
201
+ --color-surface-container-highest: var(--csstools-light-dark-toggle--23, oklch(92% 0.005 245deg));
202
+ --csstools-light-dark-toggle--24: var(--csstools-color-scheme--light) oklch(7% 0.003 245deg);
203
+ --color-surface-0: var(--csstools-light-dark-toggle--24, oklch(100% 0 0deg));
204
+ --csstools-light-dark-toggle--25: var(--csstools-color-scheme--light) oklch(12% 0.003 245deg);
205
+ --color-surface-1: var(--csstools-light-dark-toggle--25, oklch(98% 0.005 245deg));
206
+ --csstools-light-dark-toggle--26: var(--csstools-color-scheme--light) oklch(15% 0.003 245deg);
207
+ --color-surface-2: var(--csstools-light-dark-toggle--26, oklch(96% 0.005 245deg));
208
+ --csstools-light-dark-toggle--27: var(--csstools-color-scheme--light) oklch(18% 0.003 245deg);
209
+ --color-surface-3: var(--csstools-light-dark-toggle--27, oklch(94% 0.005 245deg));
210
+ --csstools-light-dark-toggle--28: var(--csstools-color-scheme--light) oklch(22% 0.003 245deg);
211
+ --color-surface-4: var(--csstools-light-dark-toggle--28, oklch(92% 0.005 245deg));
212
+ --csstools-light-dark-toggle--29: var(--csstools-color-scheme--light) oklch(22% 0.003 245deg);
213
+ --color-surface-5: var(--csstools-light-dark-toggle--29, oklch(92% 0.005 245deg));
214
+ --csstools-light-dark-toggle--30: var(--csstools-color-scheme--light) oklch(9% 0.003 245deg);
215
+ --color-background: var(--csstools-light-dark-toggle--30, oklch(99% 0.003 245deg));
216
+ --csstools-light-dark-toggle--31: var(--csstools-color-scheme--light) oklch(92% 0.003 245deg);
217
+ --color-on-background: var(--csstools-light-dark-toggle--31, oklch(12% 0.003 245deg));
218
+ --csstools-light-dark-toggle--32: var(--csstools-color-scheme--light) oklch(60% 0.01 245deg);
219
+ --color-outline: var(--csstools-light-dark-toggle--32, oklch(48% 0.01 245deg));
220
+ --csstools-light-dark-toggle--33: var(--csstools-color-scheme--light) oklch(30% 0.02 245deg);
221
+ --color-outline-variant: var(--csstools-light-dark-toggle--33, oklch(92% 0.01 245deg));
222
+ --csstools-light-dark-toggle--34: var(--csstools-color-scheme--light) oklch(60% 0.01 245deg);
223
+ --color-divider: var(--csstools-light-dark-toggle--34, oklch(48% 0.01 245deg));
224
+ --csstools-light-dark-toggle--35: var(--csstools-color-scheme--light) oklch(92% 0.003 245deg);
225
+ --color-inverse-surface: var(--csstools-light-dark-toggle--35, oklch(20% 0 0deg));
226
+ --csstools-light-dark-toggle--36: var(--csstools-color-scheme--light) oklch(20% 0.003 245deg);
227
+ --color-inverse-on-surface: var(--csstools-light-dark-toggle--36, oklch(96% 0.003 245deg));
228
+ --csstools-light-dark-toggle--37: var(--csstools-color-scheme--light) oklch(52% 0.14 250deg);
229
+ --color-inverse-primary: var(--csstools-light-dark-toggle--37, oklch(80% 0.08 250deg));
230
+ }
231
+ }
232
+ @media (prefers-color-scheme: dark) {
233
+ :root {
234
+ --csstools-color-scheme--light: ;
235
+ }
236
+ }
180
237
  }