@okja/chi-tokens 0.4.3 → 0.5.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 +39 -5
  2. package/dist/colors/blue.css +25 -192
  3. package/dist/colors/grayscale.css +38 -189
  4. package/dist/colors/purple.css +25 -192
  5. package/dist/tokens.css +53 -24
  6. package/package.json +4 -6
package/README.md CHANGED
@@ -42,9 +42,9 @@ Tokens are on `:root` and wrapped in `@layer tokens`.
42
42
  | `--font-sans` | system-ui, -apple-system, 'Segoe UI', sans-serif |
43
43
  | `--font-serif` | georgia, 'Times New Roman', serif |
44
44
  | `--font-mono` | 'SF Mono', monaco, 'Courier New', monospace |
45
- | `--font-size-1` to `--font-size-9` | 12px to 60px |
45
+ | `--font-size-1` to `--font-size-11` | 11px to 57px |
46
46
  | `--font-weight-light/regular/medium/bold` | 300/400/500/700 |
47
- | `--line-height-1` to `--line-height-9` | 16px to 60px |
47
+ | `--line-height-1` to `--line-height-11` | 16px to 64px |
48
48
 
49
49
  ### Radius
50
50
 
@@ -69,7 +69,22 @@ Tokens are on `:root` and wrapped in `@layer tokens`.
69
69
  | `--shadow-4` | High |
70
70
  | `--shadow-5` | Highest |
71
71
 
72
- ### Motion
72
+ ### Motion (M3 Expressive)
73
+
74
+ #### Spring Tokens (for JS animation libraries)
75
+
76
+ | Token | Damping | Stiffness | Use Case |
77
+ |-------|---------|-----------|----------|
78
+ | `--spring-fast-spatial-*` | 0.9 | 1400 | Small components (buttons, switches) |
79
+ | `--spring-default-spatial-*` | 0.9 | 700 | Partial screen (sheets, drawers) |
80
+ | `--spring-slow-spatial-*` | 0.9 | 300 | Full screen transitions |
81
+ | `--spring-fast-effects-*` | 1.0 | 3800 | Small component color/opacity |
82
+ | `--spring-default-effects-*` | 1.0 | 1600 | Partial screen effects |
83
+ | `--spring-slow-effects-*` | 1.0 | 800 | Full screen effects |
84
+
85
+ **Spatial** springs allow overshoot (position, scale). **Effects** springs don't (color, opacity).
86
+
87
+ #### Duration Tokens (for CSS)
73
88
 
74
89
  | Token | Value |
75
90
  |-------|-------|
@@ -77,8 +92,18 @@ Tokens are on `:root` and wrapped in `@layer tokens`.
77
92
  | `--duration-short1` to `short4` | 50-200ms |
78
93
  | `--duration-medium1` to `medium4` | 250-400ms |
79
94
  | `--duration-long1` to `long4` | 450-600ms |
80
- | `--easing-standard` | Standard easing |
81
- | `--easing-emphasized` | Emphasized easing |
95
+ | `--duration-extra-long1` to `extra-long4` | 700-1000ms |
96
+
97
+ #### Easing Tokens (for CSS)
98
+
99
+ | Token | Value | Use Case |
100
+ |-------|-------|----------|
101
+ | `--easing-standard` | cubic-bezier(0.2, 0, 0, 1) | Utility animations |
102
+ | `--easing-standard-accelerate` | cubic-bezier(0.3, 0, 1, 1) | Exiting screen |
103
+ | `--easing-standard-decelerate` | cubic-bezier(0, 0, 0, 1) | Entering screen |
104
+ | `--easing-emphasized` | cubic-bezier(0.2, 0, 0, 1) | Expressive M3 animations |
105
+ | `--easing-emphasized-accelerate` | cubic-bezier(0.3, 0, 0.8, 0.15) | Expressive exit |
106
+ | `--easing-emphasized-decelerate` | cubic-bezier(0.05, 0.7, 0.1, 1) | Expressive enter |
82
107
 
83
108
  ### Colors
84
109
 
@@ -110,6 +135,15 @@ Colors use `light-dark()` for automatic dark mode:
110
135
  - **OKLCH color space** - Perceptual uniformity
111
136
  - **Scaling support** - `var(--scaling, 1)` multiplier
112
137
 
138
+ ## Browser Support
139
+
140
+ Requires browsers supporting:
141
+ - CSS `light-dark()` function
142
+ - OKLCH color space
143
+ - CSS Cascade Layers (`@layer`)
144
+
145
+ **Supported:** Chrome 123+, Safari 17.5+, Firefox 120+
146
+
113
147
  ## License
114
148
 
115
149
  MIT
package/dist/colors/blue.css CHANGED
@@ -5,126 +5,33 @@
5
5
 
6
6
  @layer tokens {
7
7
  :root {
8
- --csstools-color-scheme--light: initial;
9
8
  color-scheme: light dark;
10
9
 
11
10
  /* 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
- }
109
-
110
- @supports (color: light-dark(red, red)) and (color: oklab(0% 0 0%)) {
111
- :root {
112
11
  --color-primary: light-dark(oklch(52% 0.14 250deg), oklch(75% 0.1 250deg));
113
12
  --color-on-primary: light-dark(oklch(100% 0 0deg), oklch(15% 0.14 250deg));
114
13
  --color-primary-container: light-dark(oklch(85% 0.08 250deg), oklch(30% 0.14 250deg));
115
14
  --color-on-primary-container: light-dark(oklch(20% 0.14 250deg), oklch(88% 0.08 250deg));
15
+
16
+ /* Secondary - Steel Blue/Gray */
116
17
  --color-secondary: light-dark(oklch(50% 0.05 245deg), oklch(68% 0.04 245deg));
117
18
  --color-on-secondary: light-dark(oklch(100% 0 0deg), oklch(12% 0.05 245deg));
118
19
  --color-secondary-container: light-dark(oklch(88% 0.03 245deg), oklch(28% 0.05 245deg));
119
20
  --color-on-secondary-container: light-dark(oklch(20% 0.05 245deg), oklch(88% 0.03 245deg));
21
+
22
+ /* Tertiary - Teal/Cyan */
120
23
  --color-tertiary: light-dark(oklch(58% 0.12 195deg), oklch(72% 0.09 195deg));
121
24
  --color-on-tertiary: light-dark(oklch(100% 0 0deg), oklch(18% 0.12 195deg));
122
25
  --color-tertiary-container: light-dark(oklch(88% 0.06 195deg), oklch(32% 0.12 195deg));
123
26
  --color-on-tertiary-container: light-dark(oklch(22% 0.12 195deg), oklch(90% 0.06 195deg));
27
+
28
+ /* Error */
124
29
  --color-error: light-dark(oklch(66.4% 0.195 29deg), oklch(68.5% 0.195 29deg));
125
30
  --color-on-error: light-dark(oklch(20% 0.05 29deg), oklch(20% 0.05 29deg));
126
31
  --color-error-container: light-dark(oklch(92% 0.05 29deg), oklch(66.4% 0.195 29deg));
127
32
  --color-on-error-container: light-dark(oklch(20% 0.05 29deg), oklch(92% 0.05 29deg));
33
+
34
+ /* Surface */
128
35
  --color-surface: light-dark(oklch(99% 0.003 245deg), oklch(7% 0.003 245deg));
129
36
  --color-on-surface: light-dark(oklch(12% 0.003 245deg), oklch(92% 0.003 245deg));
130
37
  --color-surface-variant: light-dark(oklch(92% 0.01 245deg), oklch(30% 0.02 245deg));
@@ -133,105 +40,31 @@
133
40
  --color-surface-container-low: light-dark(oklch(98% 0.003 245deg), oklch(12% 0.003 245deg));
134
41
  --color-surface-container-high: light-dark(oklch(94% 0.005 245deg), oklch(18% 0.003 245deg));
135
42
  --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));
43
+
44
+ /* Surface elevations */
45
+ --color-surface-0: var(--color-surface);
137
46
  --color-surface-1: light-dark(oklch(98% 0.005 245deg), oklch(12% 0.003 245deg));
138
47
  --color-surface-2: light-dark(oklch(96% 0.005 245deg), oklch(15% 0.003 245deg));
139
48
  --color-surface-3: light-dark(oklch(94% 0.005 245deg), oklch(18% 0.003 245deg));
140
49
  --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));
50
+ --color-surface-5: light-dark(oklch(91% 0.005 245deg), oklch(24% 0.003 245deg));
51
+
52
+ /* Background */
53
+ --color-background: var(--color-surface);
54
+ --color-on-background: var(--color-on-surface);
55
+
56
+ /* Outline */
144
57
  --color-outline: light-dark(oklch(48% 0.01 245deg), oklch(60% 0.01 245deg));
145
58
  --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));
59
+ --color-divider: var(--color-outline-variant);
60
+
61
+ /* Inverse */
147
62
  --color-inverse-surface: light-dark(oklch(20% 0 0deg), oklch(92% 0.003 245deg));
148
63
  --color-inverse-on-surface: light-dark(oklch(96% 0.003 245deg), oklch(20% 0.003 245deg));
149
64
  --color-inverse-primary: light-dark(oklch(80% 0.08 250deg), oklch(52% 0.14 250deg));
150
- }
151
- }
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
- }
65
+
66
+ /* Scrim and shadow */
67
+ --color-scrim: oklch(0% 0 0deg);
68
+ --color-shadow: oklch(0% 0 0deg);
236
69
  }
237
70
  }
package/dist/colors/grayscale.css CHANGED
@@ -5,217 +5,66 @@
5
5
 
6
6
  @layer tokens {
7
7
  :root {
8
- --csstools-color-scheme--light: initial;
9
8
  color-scheme: light dark;
10
9
 
11
- /* Primary */
12
- --csstools-light-dark-toggle--0: var(--csstools-color-scheme--light) oklch(79.7% 0.105 264deg);
13
- --color-primary: var(--csstools-light-dark-toggle--0, oklch(49.4% 0.163 264deg));
14
- --csstools-light-dark-toggle--1: var(--csstools-color-scheme--light) oklch(30% 0.163 264deg);
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(35% 0.163 264deg);
17
- --color-primary-container: var(--csstools-light-dark-toggle--2, oklch(79.7% 0.105 264deg));
18
- --csstools-light-dark-toggle--3: var(--csstools-color-scheme--light) oklch(90% 0.105 264deg);
19
- --color-on-primary-container: var(--csstools-light-dark-toggle--3, oklch(20% 0.163 264deg));
10
+ /* Primary - Dark gray */
11
+ --color-primary: light-dark(oklch(35% 0 0deg), oklch(80% 0 0deg));
12
+ --color-on-primary: light-dark(oklch(100% 0 0deg), oklch(20% 0 0deg));
13
+ --color-primary-container: light-dark(oklch(85% 0 0deg), oklch(30% 0 0deg));
14
+ --color-on-primary-container: light-dark(oklch(20% 0 0deg), oklch(90% 0 0deg));
20
15
 
21
- /* Secondary */
22
- --csstools-light-dark-toggle--4: var(--csstools-color-scheme--light) oklch(75.1% 0.08 314deg);
23
- --color-secondary: var(--csstools-light-dark-toggle--4, oklch(61.8% 0.15 314deg));
24
- --csstools-light-dark-toggle--5: var(--csstools-color-scheme--light) oklch(35.1% 0.15 314deg);
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(40.1% 0.15 314deg);
27
- --color-secondary-container: var(--csstools-light-dark-toggle--6, oklch(85.1% 0.08 314deg));
28
- --csstools-light-dark-toggle--7: var(--csstools-color-scheme--light) oklch(90.1% 0.08 314deg);
29
- --color-on-secondary-container: var(--csstools-light-dark-toggle--7, oklch(25.1% 0.15 314deg));
16
+ /* Secondary - Medium gray */
17
+ --color-secondary: light-dark(oklch(50% 0 0deg), oklch(70% 0 0deg));
18
+ --color-on-secondary: light-dark(oklch(100% 0 0deg), oklch(20% 0 0deg));
19
+ --color-secondary-container: light-dark(oklch(88% 0 0deg), oklch(35% 0 0deg));
20
+ --color-on-secondary-container: light-dark(oklch(20% 0 0deg), oklch(90% 0 0deg));
30
21
 
31
- /* Tertiary */
32
- --csstools-light-dark-toggle--8: var(--csstools-color-scheme--light) oklch(80.2% 0.08 29deg);
33
- --color-tertiary: var(--csstools-light-dark-toggle--8, oklch(70.4% 0.15 29deg));
34
- --csstools-light-dark-toggle--9: var(--csstools-color-scheme--light) oklch(40.2% 0.15 29deg);
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(45.2% 0.15 29deg);
37
- --color-tertiary-container: var(--csstools-light-dark-toggle--10, oklch(90.2% 0.08 29deg));
38
- --csstools-light-dark-toggle--11: var(--csstools-color-scheme--light) oklch(95.2% 0.08 29deg);
39
- --color-on-tertiary-container: var(--csstools-light-dark-toggle--11, oklch(30.2% 0.15 29deg));
22
+ /* Tertiary - Light gray */
23
+ --color-tertiary: light-dark(oklch(60% 0 0deg), oklch(75% 0 0deg));
24
+ --color-on-tertiary: light-dark(oklch(100% 0 0deg), oklch(25% 0 0deg));
25
+ --color-tertiary-container: light-dark(oklch(90% 0 0deg), oklch(40% 0 0deg));
26
+ --color-on-tertiary-container: light-dark(oklch(25% 0 0deg), oklch(92% 0 0deg));
40
27
 
41
- /* Error */
42
- --csstools-light-dark-toggle--12: var(--csstools-color-scheme--light) oklch(80.2% 0.15 29deg);
43
- --color-error: var(--csstools-light-dark-toggle--12, oklch(62.8% 0.258 29deg));
44
- --csstools-light-dark-toggle--13: var(--csstools-color-scheme--light) oklch(40.2% 0.258 29deg);
45
- --color-on-error: var(--csstools-light-dark-toggle--13, oklch(100% 0 0deg));
46
- --csstools-light-dark-toggle--14: var(--csstools-color-scheme--light) oklch(45.2% 0.258 29deg);
47
- --color-error-container: var(--csstools-light-dark-toggle--14, oklch(90.2% 0.08 29deg));
48
- --csstools-light-dark-toggle--15: var(--csstools-color-scheme--light) oklch(95.2% 0.15 29deg);
49
- --color-on-error-container: var(--csstools-light-dark-toggle--15, oklch(30.2% 0.15 29deg));
28
+ /* Error - Keep chromatic for visibility */
29
+ --color-error: light-dark(oklch(55% 0.2 25deg), oklch(70% 0.18 25deg));
30
+ --color-on-error: light-dark(oklch(100% 0 0deg), oklch(20% 0.05 25deg));
31
+ --color-error-container: light-dark(oklch(92% 0.04 25deg), oklch(30% 0.15 25deg));
32
+ --color-on-error-container: light-dark(oklch(25% 0.1 25deg), oklch(95% 0.04 25deg));
50
33
 
51
34
  /* Surface */
52
- --csstools-light-dark-toggle--16: var(--csstools-color-scheme--light) oklch(15% 0.005 264deg);
53
- --color-surface: var(--csstools-light-dark-toggle--16, oklch(99.1% 0.005 264deg));
54
- --csstools-light-dark-toggle--17: var(--csstools-color-scheme--light) oklch(90% 0.005 264deg);
55
- --color-on-surface: var(--csstools-light-dark-toggle--17, oklch(20% 0.005 264deg));
56
- --csstools-light-dark-toggle--18: var(--csstools-color-scheme--light) oklch(25% 0.02 264deg);
57
- --color-surface-variant: var(--csstools-light-dark-toggle--18, oklch(92.5% 0.02 264deg));
58
- --csstools-light-dark-toggle--19: var(--csstools-color-scheme--light) oklch(75% 0.02 264deg);
59
- --color-on-surface-variant: var(--csstools-light-dark-toggle--19, oklch(30% 0.02 264deg));
60
- --csstools-light-dark-toggle--20: var(--csstools-color-scheme--light) oklch(20% 0.01 264deg);
61
- --color-surface-container: var(--csstools-light-dark-toggle--20, oklch(96.1% 0.01 264deg));
62
- --csstools-light-dark-toggle--21: var(--csstools-color-scheme--light) oklch(17% 0.005 264deg);
63
- --color-surface-container-low: var(--csstools-light-dark-toggle--21, oklch(98.1% 0.005 264deg));
64
- --csstools-light-dark-toggle--22: var(--csstools-color-scheme--light) oklch(25% 0.01 264deg);
65
- --color-surface-container-high: var(--csstools-light-dark-toggle--22, oklch(94.1% 0.01 264deg));
66
- --csstools-light-dark-toggle--23: var(--csstools-color-scheme--light) oklch(30% 0.01 264deg);
67
- --color-surface-container-highest: var(--csstools-light-dark-toggle--23, oklch(92.1% 0.01 264deg));
35
+ --color-surface: light-dark(oklch(99% 0 0deg), oklch(15% 0 0deg));
36
+ --color-on-surface: light-dark(oklch(20% 0 0deg), oklch(90% 0 0deg));
37
+ --color-surface-variant: light-dark(oklch(92% 0 0deg), oklch(25% 0 0deg));
38
+ --color-on-surface-variant: light-dark(oklch(30% 0 0deg), oklch(80% 0 0deg));
39
+ --color-surface-container: light-dark(oklch(96% 0 0deg), oklch(20% 0 0deg));
40
+ --color-surface-container-low: light-dark(oklch(98% 0 0deg), oklch(17% 0 0deg));
41
+ --color-surface-container-high: light-dark(oklch(94% 0 0deg), oklch(25% 0 0deg));
42
+ --color-surface-container-highest: light-dark(oklch(92% 0 0deg), oklch(30% 0 0deg));
68
43
 
69
44
  /* Surface elevations */
70
45
  --color-surface-0: var(--color-surface);
71
- --csstools-light-dark-toggle--24: var(--csstools-color-scheme--light) oklch(18% 0.01 264deg);
72
- --color-surface-1: var(--csstools-light-dark-toggle--24, oklch(97.1% 0.01 264deg));
73
- --csstools-light-dark-toggle--25: var(--csstools-color-scheme--light) oklch(21% 0.01 264deg);
74
- --color-surface-2: var(--csstools-light-dark-toggle--25, oklch(94.1% 0.01 264deg));
75
- --csstools-light-dark-toggle--26: var(--csstools-color-scheme--light) oklch(24% 0.01 264deg);
76
- --color-surface-3: var(--csstools-light-dark-toggle--26, oklch(92.1% 0.01 264deg));
77
- --csstools-light-dark-toggle--27: var(--csstools-color-scheme--light) oklch(26% 0.01 264deg);
78
- --color-surface-4: var(--csstools-light-dark-toggle--27, oklch(91.1% 0.01 264deg));
79
- --csstools-light-dark-toggle--28: var(--csstools-color-scheme--light) oklch(28% 0.01 264deg);
80
- --color-surface-5: var(--csstools-light-dark-toggle--28, oklch(90.1% 0.01 264deg));
46
+ --color-surface-1: light-dark(oklch(97% 0 0deg), oklch(18% 0 0deg));
47
+ --color-surface-2: light-dark(oklch(95% 0 0deg), oklch(21% 0 0deg));
48
+ --color-surface-3: light-dark(oklch(93% 0 0deg), oklch(24% 0 0deg));
49
+ --color-surface-4: light-dark(oklch(91% 0 0deg), oklch(27% 0 0deg));
50
+ --color-surface-5: light-dark(oklch(89% 0 0deg), oklch(30% 0 0deg));
81
51
 
82
52
  /* Background */
83
53
  --color-background: var(--color-surface);
84
54
  --color-on-background: var(--color-on-surface);
85
55
 
86
56
  /* Outline */
87
- --csstools-light-dark-toggle--29: var(--csstools-color-scheme--light) oklch(60% 0.02 264deg);
88
- --color-outline: var(--csstools-light-dark-toggle--29, oklch(50% 0.02 264deg));
89
- --csstools-light-dark-toggle--30: var(--csstools-color-scheme--light) oklch(35% 0.02 264deg);
90
- --color-outline-variant: var(--csstools-light-dark-toggle--30, oklch(80% 0.02 264deg));
57
+ --color-outline: light-dark(oklch(50% 0 0deg), oklch(60% 0 0deg));
58
+ --color-outline-variant: light-dark(oklch(80% 0 0deg), oklch(35% 0 0deg));
91
59
  --color-divider: var(--color-outline-variant);
92
60
 
93
61
  /* Inverse */
94
- --csstools-light-dark-toggle--31: var(--csstools-color-scheme--light) oklch(90% 0.005 264deg);
95
- --color-inverse-surface: var(--csstools-light-dark-toggle--31, oklch(25% 0.01 264deg));
96
- --csstools-light-dark-toggle--32: var(--csstools-color-scheme--light) oklch(25% 0.01 264deg);
97
- --color-inverse-on-surface: var(--csstools-light-dark-toggle--32, oklch(95% 0.005 264deg));
98
- --csstools-light-dark-toggle--33: var(--csstools-color-scheme--light) oklch(49.4% 0.163 264deg);
99
- --color-inverse-primary: var(--csstools-light-dark-toggle--33, oklch(79.7% 0.105 264deg));
62
+ --color-inverse-surface: light-dark(oklch(25% 0 0deg), oklch(90% 0 0deg));
63
+ --color-inverse-on-surface: light-dark(oklch(95% 0 0deg), oklch(25% 0 0deg));
64
+ --color-inverse-primary: light-dark(oklch(80% 0 0deg), oklch(35% 0 0deg));
100
65
 
101
66
  /* Scrim and shadow */
102
67
  --color-scrim: oklch(0% 0 0deg);
103
68
  --color-shadow: oklch(0% 0 0deg);
104
69
  }
105
-
106
- @supports (color: light-dark(red, red)) and (color: oklab(0% 0 0%)) {
107
- :root {
108
- --color-primary: light-dark(oklch(49.4% 0.163 264deg), oklch(79.7% 0.105 264deg));
109
- --color-on-primary: light-dark(oklch(100% 0 0deg), oklch(30% 0.163 264deg));
110
- --color-primary-container: light-dark(oklch(79.7% 0.105 264deg), oklch(35% 0.163 264deg));
111
- --color-on-primary-container: light-dark(oklch(20% 0.163 264deg), oklch(90% 0.105 264deg));
112
- --color-secondary: light-dark(oklch(61.8% 0.15 314deg), oklch(75.1% 0.08 314deg));
113
- --color-on-secondary: light-dark(oklch(100% 0 0deg), oklch(35.1% 0.15 314deg));
114
- --color-secondary-container: light-dark(oklch(85.1% 0.08 314deg), oklch(40.1% 0.15 314deg));
115
- --color-on-secondary-container: light-dark(oklch(25.1% 0.15 314deg), oklch(90.1% 0.08 314deg));
116
- --color-tertiary: light-dark(oklch(70.4% 0.15 29deg), oklch(80.2% 0.08 29deg));
117
- --color-on-tertiary: light-dark(oklch(100% 0 0deg), oklch(40.2% 0.15 29deg));
118
- --color-tertiary-container: light-dark(oklch(90.2% 0.08 29deg), oklch(45.2% 0.15 29deg));
119
- --color-on-tertiary-container: light-dark(oklch(30.2% 0.15 29deg), oklch(95.2% 0.08 29deg));
120
- --color-error: light-dark(oklch(62.8% 0.258 29deg), oklch(80.2% 0.15 29deg));
121
- --color-on-error: light-dark(oklch(100% 0 0deg), oklch(40.2% 0.258 29deg));
122
- --color-error-container: light-dark(oklch(90.2% 0.08 29deg), oklch(45.2% 0.258 29deg));
123
- --color-on-error-container: light-dark(oklch(30.2% 0.15 29deg), oklch(95.2% 0.15 29deg));
124
- --color-surface: light-dark(oklch(99.1% 0.005 264deg), oklch(15% 0.005 264deg));
125
- --color-on-surface: light-dark(oklch(20% 0.005 264deg), oklch(90% 0.005 264deg));
126
- --color-surface-variant: light-dark(oklch(92.5% 0.02 264deg), oklch(25% 0.02 264deg));
127
- --color-on-surface-variant: light-dark(oklch(30% 0.02 264deg), oklch(75% 0.02 264deg));
128
- --color-surface-container: light-dark(oklch(96.1% 0.01 264deg), oklch(20% 0.01 264deg));
129
- --color-surface-container-low: light-dark(oklch(98.1% 0.005 264deg), oklch(17% 0.005 264deg));
130
- --color-surface-container-high: light-dark(oklch(94.1% 0.01 264deg), oklch(25% 0.01 264deg));
131
- --color-surface-container-highest: light-dark(oklch(92.1% 0.01 264deg), oklch(30% 0.01 264deg));
132
- --color-surface-1: light-dark(oklch(97.1% 0.01 264deg), oklch(18% 0.01 264deg));
133
- --color-surface-2: light-dark(oklch(94.1% 0.01 264deg), oklch(21% 0.01 264deg));
134
- --color-surface-3: light-dark(oklch(92.1% 0.01 264deg), oklch(24% 0.01 264deg));
135
- --color-surface-4: light-dark(oklch(91.1% 0.01 264deg), oklch(26% 0.01 264deg));
136
- --color-surface-5: light-dark(oklch(90.1% 0.01 264deg), oklch(28% 0.01 264deg));
137
- --color-outline: light-dark(oklch(50% 0.02 264deg), oklch(60% 0.02 264deg));
138
- --color-outline-variant: light-dark(oklch(80% 0.02 264deg), oklch(35% 0.02 264deg));
139
- --color-inverse-surface: light-dark(oklch(25% 0.01 264deg), oklch(90% 0.005 264deg));
140
- --color-inverse-on-surface: light-dark(oklch(95% 0.005 264deg), oklch(25% 0.01 264deg));
141
- --color-inverse-primary: light-dark(oklch(79.7% 0.105 264deg), oklch(49.4% 0.163 264deg));
142
- }
143
- }
144
- @supports not (color: light-dark(tan, tan)) {
145
- :root * {
146
- --csstools-light-dark-toggle--0: var(--csstools-color-scheme--light) oklch(79.7% 0.105 264deg);
147
- --color-primary: var(--csstools-light-dark-toggle--0, oklch(49.4% 0.163 264deg));
148
- --csstools-light-dark-toggle--1: var(--csstools-color-scheme--light) oklch(30% 0.163 264deg);
149
- --color-on-primary: var(--csstools-light-dark-toggle--1, oklch(100% 0 0deg));
150
- --csstools-light-dark-toggle--2: var(--csstools-color-scheme--light) oklch(35% 0.163 264deg);
151
- --color-primary-container: var(--csstools-light-dark-toggle--2, oklch(79.7% 0.105 264deg));
152
- --csstools-light-dark-toggle--3: var(--csstools-color-scheme--light) oklch(90% 0.105 264deg);
153
- --color-on-primary-container: var(--csstools-light-dark-toggle--3, oklch(20% 0.163 264deg));
154
- --csstools-light-dark-toggle--4: var(--csstools-color-scheme--light) oklch(75.1% 0.08 314deg);
155
- --color-secondary: var(--csstools-light-dark-toggle--4, oklch(61.8% 0.15 314deg));
156
- --csstools-light-dark-toggle--5: var(--csstools-color-scheme--light) oklch(35.1% 0.15 314deg);
157
- --color-on-secondary: var(--csstools-light-dark-toggle--5, oklch(100% 0 0deg));
158
- --csstools-light-dark-toggle--6: var(--csstools-color-scheme--light) oklch(40.1% 0.15 314deg);
159
- --color-secondary-container: var(--csstools-light-dark-toggle--6, oklch(85.1% 0.08 314deg));
160
- --csstools-light-dark-toggle--7: var(--csstools-color-scheme--light) oklch(90.1% 0.08 314deg);
161
- --color-on-secondary-container: var(--csstools-light-dark-toggle--7, oklch(25.1% 0.15 314deg));
162
- --csstools-light-dark-toggle--8: var(--csstools-color-scheme--light) oklch(80.2% 0.08 29deg);
163
- --color-tertiary: var(--csstools-light-dark-toggle--8, oklch(70.4% 0.15 29deg));
164
- --csstools-light-dark-toggle--9: var(--csstools-color-scheme--light) oklch(40.2% 0.15 29deg);
165
- --color-on-tertiary: var(--csstools-light-dark-toggle--9, oklch(100% 0 0deg));
166
- --csstools-light-dark-toggle--10: var(--csstools-color-scheme--light) oklch(45.2% 0.15 29deg);
167
- --color-tertiary-container: var(--csstools-light-dark-toggle--10, oklch(90.2% 0.08 29deg));
168
- --csstools-light-dark-toggle--11: var(--csstools-color-scheme--light) oklch(95.2% 0.08 29deg);
169
- --color-on-tertiary-container: var(--csstools-light-dark-toggle--11, oklch(30.2% 0.15 29deg));
170
- --csstools-light-dark-toggle--12: var(--csstools-color-scheme--light) oklch(80.2% 0.15 29deg);
171
- --color-error: var(--csstools-light-dark-toggle--12, oklch(62.8% 0.258 29deg));
172
- --csstools-light-dark-toggle--13: var(--csstools-color-scheme--light) oklch(40.2% 0.258 29deg);
173
- --color-on-error: var(--csstools-light-dark-toggle--13, oklch(100% 0 0deg));
174
- --csstools-light-dark-toggle--14: var(--csstools-color-scheme--light) oklch(45.2% 0.258 29deg);
175
- --color-error-container: var(--csstools-light-dark-toggle--14, oklch(90.2% 0.08 29deg));
176
- --csstools-light-dark-toggle--15: var(--csstools-color-scheme--light) oklch(95.2% 0.15 29deg);
177
- --color-on-error-container: var(--csstools-light-dark-toggle--15, oklch(30.2% 0.15 29deg));
178
- --csstools-light-dark-toggle--16: var(--csstools-color-scheme--light) oklch(15% 0.005 264deg);
179
- --color-surface: var(--csstools-light-dark-toggle--16, oklch(99.1% 0.005 264deg));
180
- --csstools-light-dark-toggle--17: var(--csstools-color-scheme--light) oklch(90% 0.005 264deg);
181
- --color-on-surface: var(--csstools-light-dark-toggle--17, oklch(20% 0.005 264deg));
182
- --csstools-light-dark-toggle--18: var(--csstools-color-scheme--light) oklch(25% 0.02 264deg);
183
- --color-surface-variant: var(--csstools-light-dark-toggle--18, oklch(92.5% 0.02 264deg));
184
- --csstools-light-dark-toggle--19: var(--csstools-color-scheme--light) oklch(75% 0.02 264deg);
185
- --color-on-surface-variant: var(--csstools-light-dark-toggle--19, oklch(30% 0.02 264deg));
186
- --csstools-light-dark-toggle--20: var(--csstools-color-scheme--light) oklch(20% 0.01 264deg);
187
- --color-surface-container: var(--csstools-light-dark-toggle--20, oklch(96.1% 0.01 264deg));
188
- --csstools-light-dark-toggle--21: var(--csstools-color-scheme--light) oklch(17% 0.005 264deg);
189
- --color-surface-container-low: var(--csstools-light-dark-toggle--21, oklch(98.1% 0.005 264deg));
190
- --csstools-light-dark-toggle--22: var(--csstools-color-scheme--light) oklch(25% 0.01 264deg);
191
- --color-surface-container-high: var(--csstools-light-dark-toggle--22, oklch(94.1% 0.01 264deg));
192
- --csstools-light-dark-toggle--23: var(--csstools-color-scheme--light) oklch(30% 0.01 264deg);
193
- --color-surface-container-highest: var(--csstools-light-dark-toggle--23, oklch(92.1% 0.01 264deg));
194
- --csstools-light-dark-toggle--24: var(--csstools-color-scheme--light) oklch(18% 0.01 264deg);
195
- --color-surface-1: var(--csstools-light-dark-toggle--24, oklch(97.1% 0.01 264deg));
196
- --csstools-light-dark-toggle--25: var(--csstools-color-scheme--light) oklch(21% 0.01 264deg);
197
- --color-surface-2: var(--csstools-light-dark-toggle--25, oklch(94.1% 0.01 264deg));
198
- --csstools-light-dark-toggle--26: var(--csstools-color-scheme--light) oklch(24% 0.01 264deg);
199
- --color-surface-3: var(--csstools-light-dark-toggle--26, oklch(92.1% 0.01 264deg));
200
- --csstools-light-dark-toggle--27: var(--csstools-color-scheme--light) oklch(26% 0.01 264deg);
201
- --color-surface-4: var(--csstools-light-dark-toggle--27, oklch(91.1% 0.01 264deg));
202
- --csstools-light-dark-toggle--28: var(--csstools-color-scheme--light) oklch(28% 0.01 264deg);
203
- --color-surface-5: var(--csstools-light-dark-toggle--28, oklch(90.1% 0.01 264deg));
204
- --csstools-light-dark-toggle--29: var(--csstools-color-scheme--light) oklch(60% 0.02 264deg);
205
- --color-outline: var(--csstools-light-dark-toggle--29, oklch(50% 0.02 264deg));
206
- --csstools-light-dark-toggle--30: var(--csstools-color-scheme--light) oklch(35% 0.02 264deg);
207
- --color-outline-variant: var(--csstools-light-dark-toggle--30, oklch(80% 0.02 264deg));
208
- --csstools-light-dark-toggle--31: var(--csstools-color-scheme--light) oklch(90% 0.005 264deg);
209
- --color-inverse-surface: var(--csstools-light-dark-toggle--31, oklch(25% 0.01 264deg));
210
- --csstools-light-dark-toggle--32: var(--csstools-color-scheme--light) oklch(25% 0.01 264deg);
211
- --color-inverse-on-surface: var(--csstools-light-dark-toggle--32, oklch(95% 0.005 264deg));
212
- --csstools-light-dark-toggle--33: var(--csstools-color-scheme--light) oklch(49.4% 0.163 264deg);
213
- --color-inverse-primary: var(--csstools-light-dark-toggle--33, oklch(79.7% 0.105 264deg));
214
- }
215
- }
216
- @media (prefers-color-scheme: dark) {
217
- :root {
218
- --csstools-color-scheme--light: ;
219
- }
220
- }
221
70
  }
package/dist/colors/purple.css CHANGED
@@ -5,126 +5,33 @@
5
5
 
6
6
  @layer tokens {
7
7
  :root {
8
- --csstools-color-scheme--light: initial;
9
8
  color-scheme: light dark;
10
9
 
11
10
  /* Primary - Purple */
12
- --csstools-light-dark-toggle--0: var(--csstools-color-scheme--light) oklch(79.7% 0.105 264deg);
13
- --color-primary: var(--csstools-light-dark-toggle--0, oklch(49.4% 0.163 264deg));
14
- --csstools-light-dark-toggle--1: var(--csstools-color-scheme--light) oklch(15% 0.163 264deg);
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(44.5% 0.163 264deg);
17
- --color-primary-container: var(--csstools-light-dark-toggle--2, oklch(79.7% 0.105 264deg));
18
- --csstools-light-dark-toggle--3: var(--csstools-color-scheme--light) oklch(91% 0.105 264deg);
19
- --color-on-primary-container: var(--csstools-light-dark-toggle--3, oklch(20% 0.163 264deg));
20
-
21
- /* Secondary - Blue/Gray */
22
- --csstools-light-dark-toggle--4: var(--csstools-color-scheme--light) oklch(67.5% 0.029 270deg);
23
- --color-secondary: var(--csstools-light-dark-toggle--4, oklch(43.8% 0.029 270deg));
24
- --csstools-light-dark-toggle--5: var(--csstools-color-scheme--light) oklch(12% 0.029 270deg);
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(32% 0.029 270deg);
27
- --color-secondary-container: var(--csstools-light-dark-toggle--6, oklch(88.5% 0.029 270deg));
28
- --csstools-light-dark-toggle--7: var(--csstools-color-scheme--light) oklch(90% 0.029 270deg);
29
- --color-on-secondary-container: var(--csstools-light-dark-toggle--7, oklch(15.8% 0.029 270deg));
30
-
31
- /* Tertiary - Pink/Purple */
32
- --csstools-light-dark-toggle--8: var(--csstools-color-scheme--light) oklch(70% 0.08 320deg);
33
- --color-tertiary: var(--csstools-light-dark-toggle--8, oklch(60% 0.12 320deg));
34
- --csstools-light-dark-toggle--9: var(--csstools-color-scheme--light) oklch(25% 0.12 320deg);
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(38% 0.08 320deg);
37
- --color-tertiary-container: var(--csstools-light-dark-toggle--10, oklch(90% 0.08 320deg));
38
- --csstools-light-dark-toggle--11: var(--csstools-color-scheme--light) oklch(93% 0.08 320deg);
39
- --color-on-tertiary-container: var(--csstools-light-dark-toggle--11, oklch(20% 0.12 320deg));
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.005 300deg);
53
- --color-surface: var(--csstools-light-dark-toggle--16, oklch(99% 0.005 300deg));
54
- --csstools-light-dark-toggle--17: var(--csstools-color-scheme--light) oklch(91.5% 0.005 300deg);
55
- --color-on-surface: var(--csstools-light-dark-toggle--17, oklch(12.5% 0.005 300deg));
56
- --csstools-light-dark-toggle--18: var(--csstools-color-scheme--light) oklch(33.5% 0.025 270deg);
57
- --color-surface-variant: var(--csstools-light-dark-toggle--18, oklch(91.8% 0.015 300deg));
58
- --csstools-light-dark-toggle--19: var(--csstools-color-scheme--light) oklch(82% 0.015 300deg);
59
- --color-on-surface-variant: var(--csstools-light-dark-toggle--19, oklch(33.5% 0.025 270deg));
60
- --csstools-light-dark-toggle--20: var(--csstools-color-scheme--light) oklch(15% 0.005 300deg);
61
- --color-surface-container: var(--csstools-light-dark-toggle--20, oklch(95.5% 0.01 300deg));
62
- --csstools-light-dark-toggle--21: var(--csstools-color-scheme--light) oklch(12.5% 0.005 300deg);
63
- --color-surface-container-low: var(--csstools-light-dark-toggle--21, oklch(97.5% 0.005 300deg));
64
- --csstools-light-dark-toggle--22: var(--csstools-color-scheme--light) oklch(19% 0.005 300deg);
65
- --color-surface-container-high: var(--csstools-light-dark-toggle--22, oklch(93.5% 0.01 300deg));
66
- --csstools-light-dark-toggle--23: var(--csstools-color-scheme--light) oklch(24% 0.005 300deg);
67
- --color-surface-container-highest: var(--csstools-light-dark-toggle--23, oklch(91.5% 0.01 300deg));
68
-
69
- /* Surface elevations */
70
- --csstools-light-dark-toggle--24: var(--csstools-color-scheme--light) oklch(7% 0.005 300deg);
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.5% 0.005 300deg);
73
- --color-surface-1: var(--csstools-light-dark-toggle--25, oklch(97.5% 0.01 300deg));
74
- --csstools-light-dark-toggle--26: var(--csstools-color-scheme--light) oklch(15% 0.005 300deg);
75
- --color-surface-2: var(--csstools-light-dark-toggle--26, oklch(95.5% 0.01 300deg));
76
- --csstools-light-dark-toggle--27: var(--csstools-color-scheme--light) oklch(19% 0.005 300deg);
77
- --color-surface-3: var(--csstools-light-dark-toggle--27, oklch(93.5% 0.01 300deg));
78
- --csstools-light-dark-toggle--28: var(--csstools-color-scheme--light) oklch(24% 0.005 300deg);
79
- --color-surface-4: var(--csstools-light-dark-toggle--28, oklch(91.5% 0.01 300deg));
80
- --csstools-light-dark-toggle--29: var(--csstools-color-scheme--light) oklch(24% 0.005 300deg);
81
- --color-surface-5: var(--csstools-light-dark-toggle--29, oklch(91.5% 0.01 300deg));
82
-
83
- /* Background */
84
- --csstools-light-dark-toggle--30: var(--csstools-color-scheme--light) oklch(9.5% 0.005 300deg);
85
- --color-background: var(--csstools-light-dark-toggle--30, oklch(99% 0.005 300deg));
86
- --csstools-light-dark-toggle--31: var(--csstools-color-scheme--light) oklch(91.5% 0.005 300deg);
87
- --color-on-background: var(--csstools-light-dark-toggle--31, oklch(12.5% 0.005 300deg));
88
-
89
- /* Outline */
90
- --csstools-light-dark-toggle--32: var(--csstools-color-scheme--light) oklch(61% 0.01 300deg);
91
- --color-outline: var(--csstools-light-dark-toggle--32, oklch(50% 0.01 300deg));
92
- --csstools-light-dark-toggle--33: var(--csstools-color-scheme--light) oklch(33.5% 0.025 270deg);
93
- --color-outline-variant: var(--csstools-light-dark-toggle--33, oklch(91.8% 0.015 300deg));
94
- --csstools-light-dark-toggle--34: var(--csstools-color-scheme--light) oklch(61% 0.01 300deg);
95
- --color-divider: var(--csstools-light-dark-toggle--34, oklch(50% 0.01 300deg));
96
-
97
- /* Inverse */
98
- --csstools-light-dark-toggle--35: var(--csstools-color-scheme--light) oklch(91.5% 0.005 300deg);
99
- --color-inverse-surface: var(--csstools-light-dark-toggle--35, oklch(22% 0 0deg));
100
- --csstools-light-dark-toggle--36: var(--csstools-color-scheme--light) oklch(22.5% 0.005 300deg);
101
- --color-inverse-on-surface: var(--csstools-light-dark-toggle--36, oklch(96% 0.005 300deg));
102
- --csstools-light-dark-toggle--37: var(--csstools-color-scheme--light) oklch(49.4% 0.163 264deg);
103
- --color-inverse-primary: var(--csstools-light-dark-toggle--37, oklch(79.7% 0.105 264deg));
104
-
105
- /* Scrim and shadow */
106
- --color-scrim: oklch(0% 0 0deg);
107
- --color-shadow: oklch(0% 0 0deg);
108
- }
109
-
110
- @supports (color: light-dark(red, red)) and (color: oklab(0% 0 0%)) {
111
- :root {
112
11
  --color-primary: light-dark(oklch(49.4% 0.163 264deg), oklch(79.7% 0.105 264deg));
113
12
  --color-on-primary: light-dark(oklch(100% 0 0deg), oklch(15% 0.163 264deg));
114
13
  --color-primary-container: light-dark(oklch(79.7% 0.105 264deg), oklch(44.5% 0.163 264deg));
115
14
  --color-on-primary-container: light-dark(oklch(20% 0.163 264deg), oklch(91% 0.105 264deg));
15
+
16
+ /* Secondary - Blue/Gray */
116
17
  --color-secondary: light-dark(oklch(43.8% 0.029 270deg), oklch(67.5% 0.029 270deg));
117
18
  --color-on-secondary: light-dark(oklch(100% 0 0deg), oklch(12% 0.029 270deg));
118
19
  --color-secondary-container: light-dark(oklch(88.5% 0.029 270deg), oklch(32% 0.029 270deg));
119
20
  --color-on-secondary-container: light-dark(oklch(15.8% 0.029 270deg), oklch(90% 0.029 270deg));
21
+
22
+ /* Tertiary - Pink/Purple */
120
23
  --color-tertiary: light-dark(oklch(60% 0.12 320deg), oklch(70% 0.08 320deg));
121
24
  --color-on-tertiary: light-dark(oklch(100% 0 0deg), oklch(25% 0.12 320deg));
122
25
  --color-tertiary-container: light-dark(oklch(90% 0.08 320deg), oklch(38% 0.08 320deg));
123
26
  --color-on-tertiary-container: light-dark(oklch(20% 0.12 320deg), oklch(93% 0.08 320deg));
27
+
28
+ /* Error */
124
29
  --color-error: light-dark(oklch(66.4% 0.195 29deg), oklch(68.5% 0.195 29deg));
125
30
  --color-on-error: light-dark(oklch(20% 0.05 29deg), oklch(20% 0.05 29deg));
126
31
  --color-error-container: light-dark(oklch(92% 0.05 29deg), oklch(66.4% 0.195 29deg));
127
32
  --color-on-error-container: light-dark(oklch(20% 0.05 29deg), oklch(92% 0.05 29deg));
33
+
34
+ /* Surface */
128
35
  --color-surface: light-dark(oklch(99% 0.005 300deg), oklch(7% 0.005 300deg));
129
36
  --color-on-surface: light-dark(oklch(12.5% 0.005 300deg), oklch(91.5% 0.005 300deg));
130
37
  --color-surface-variant: light-dark(oklch(91.8% 0.015 300deg), oklch(33.5% 0.025 270deg));
@@ -133,105 +40,31 @@
133
40
  --color-surface-container-low: light-dark(oklch(97.5% 0.005 300deg), oklch(12.5% 0.005 300deg));
134
41
  --color-surface-container-high: light-dark(oklch(93.5% 0.01 300deg), oklch(19% 0.005 300deg));
135
42
  --color-surface-container-highest: light-dark(oklch(91.5% 0.01 300deg), oklch(24% 0.005 300deg));
136
- --color-surface-0: light-dark(oklch(100% 0 0deg), oklch(7% 0.005 300deg));
43
+
44
+ /* Surface elevations */
45
+ --color-surface-0: var(--color-surface);
137
46
  --color-surface-1: light-dark(oklch(97.5% 0.01 300deg), oklch(12.5% 0.005 300deg));
138
47
  --color-surface-2: light-dark(oklch(95.5% 0.01 300deg), oklch(15% 0.005 300deg));
139
48
  --color-surface-3: light-dark(oklch(93.5% 0.01 300deg), oklch(19% 0.005 300deg));
140
49
  --color-surface-4: light-dark(oklch(91.5% 0.01 300deg), oklch(24% 0.005 300deg));
141
- --color-surface-5: light-dark(oklch(91.5% 0.01 300deg), oklch(24% 0.005 300deg));
142
- --color-background: light-dark(oklch(99% 0.005 300deg), oklch(9.5% 0.005 300deg));
143
- --color-on-background: light-dark(oklch(12.5% 0.005 300deg), oklch(91.5% 0.005 300deg));
50
+ --color-surface-5: light-dark(oklch(90.5% 0.01 300deg), oklch(26% 0.005 300deg));
51
+
52
+ /* Background */
53
+ --color-background: var(--color-surface);
54
+ --color-on-background: var(--color-on-surface);
55
+
56
+ /* Outline */
144
57
  --color-outline: light-dark(oklch(50% 0.01 300deg), oklch(61% 0.01 300deg));
145
58
  --color-outline-variant: light-dark(oklch(91.8% 0.015 300deg), oklch(33.5% 0.025 270deg));
146
- --color-divider: light-dark(oklch(50% 0.01 300deg), oklch(61% 0.01 300deg));
59
+ --color-divider: var(--color-outline-variant);
60
+
61
+ /* Inverse */
147
62
  --color-inverse-surface: light-dark(oklch(22% 0 0deg), oklch(91.5% 0.005 300deg));
148
63
  --color-inverse-on-surface: light-dark(oklch(96% 0.005 300deg), oklch(22.5% 0.005 300deg));
149
64
  --color-inverse-primary: light-dark(oklch(79.7% 0.105 264deg), oklch(49.4% 0.163 264deg));
150
- }
151
- }
152
- @supports not (color: light-dark(tan, tan)) {
153
- :root * {
154
- --csstools-light-dark-toggle--0: var(--csstools-color-scheme--light) oklch(79.7% 0.105 264deg);
155
- --color-primary: var(--csstools-light-dark-toggle--0, oklch(49.4% 0.163 264deg));
156
- --csstools-light-dark-toggle--1: var(--csstools-color-scheme--light) oklch(15% 0.163 264deg);
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(44.5% 0.163 264deg);
159
- --color-primary-container: var(--csstools-light-dark-toggle--2, oklch(79.7% 0.105 264deg));
160
- --csstools-light-dark-toggle--3: var(--csstools-color-scheme--light) oklch(91% 0.105 264deg);
161
- --color-on-primary-container: var(--csstools-light-dark-toggle--3, oklch(20% 0.163 264deg));
162
- --csstools-light-dark-toggle--4: var(--csstools-color-scheme--light) oklch(67.5% 0.029 270deg);
163
- --color-secondary: var(--csstools-light-dark-toggle--4, oklch(43.8% 0.029 270deg));
164
- --csstools-light-dark-toggle--5: var(--csstools-color-scheme--light) oklch(12% 0.029 270deg);
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(32% 0.029 270deg);
167
- --color-secondary-container: var(--csstools-light-dark-toggle--6, oklch(88.5% 0.029 270deg));
168
- --csstools-light-dark-toggle--7: var(--csstools-color-scheme--light) oklch(90% 0.029 270deg);
169
- --color-on-secondary-container: var(--csstools-light-dark-toggle--7, oklch(15.8% 0.029 270deg));
170
- --csstools-light-dark-toggle--8: var(--csstools-color-scheme--light) oklch(70% 0.08 320deg);
171
- --color-tertiary: var(--csstools-light-dark-toggle--8, oklch(60% 0.12 320deg));
172
- --csstools-light-dark-toggle--9: var(--csstools-color-scheme--light) oklch(25% 0.12 320deg);
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(38% 0.08 320deg);
175
- --color-tertiary-container: var(--csstools-light-dark-toggle--10, oklch(90% 0.08 320deg));
176
- --csstools-light-dark-toggle--11: var(--csstools-color-scheme--light) oklch(93% 0.08 320deg);
177
- --color-on-tertiary-container: var(--csstools-light-dark-toggle--11, oklch(20% 0.12 320deg));
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.005 300deg);
187
- --color-surface: var(--csstools-light-dark-toggle--16, oklch(99% 0.005 300deg));
188
- --csstools-light-dark-toggle--17: var(--csstools-color-scheme--light) oklch(91.5% 0.005 300deg);
189
- --color-on-surface: var(--csstools-light-dark-toggle--17, oklch(12.5% 0.005 300deg));
190
- --csstools-light-dark-toggle--18: var(--csstools-color-scheme--light) oklch(33.5% 0.025 270deg);
191
- --color-surface-variant: var(--csstools-light-dark-toggle--18, oklch(91.8% 0.015 300deg));
192
- --csstools-light-dark-toggle--19: var(--csstools-color-scheme--light) oklch(82% 0.015 300deg);
193
- --color-on-surface-variant: var(--csstools-light-dark-toggle--19, oklch(33.5% 0.025 270deg));
194
- --csstools-light-dark-toggle--20: var(--csstools-color-scheme--light) oklch(15% 0.005 300deg);
195
- --color-surface-container: var(--csstools-light-dark-toggle--20, oklch(95.5% 0.01 300deg));
196
- --csstools-light-dark-toggle--21: var(--csstools-color-scheme--light) oklch(12.5% 0.005 300deg);
197
- --color-surface-container-low: var(--csstools-light-dark-toggle--21, oklch(97.5% 0.005 300deg));
198
- --csstools-light-dark-toggle--22: var(--csstools-color-scheme--light) oklch(19% 0.005 300deg);
199
- --color-surface-container-high: var(--csstools-light-dark-toggle--22, oklch(93.5% 0.01 300deg));
200
- --csstools-light-dark-toggle--23: var(--csstools-color-scheme--light) oklch(24% 0.005 300deg);
201
- --color-surface-container-highest: var(--csstools-light-dark-toggle--23, oklch(91.5% 0.01 300deg));
202
- --csstools-light-dark-toggle--24: var(--csstools-color-scheme--light) oklch(7% 0.005 300deg);
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.5% 0.005 300deg);
205
- --color-surface-1: var(--csstools-light-dark-toggle--25, oklch(97.5% 0.01 300deg));
206
- --csstools-light-dark-toggle--26: var(--csstools-color-scheme--light) oklch(15% 0.005 300deg);
207
- --color-surface-2: var(--csstools-light-dark-toggle--26, oklch(95.5% 0.01 300deg));
208
- --csstools-light-dark-toggle--27: var(--csstools-color-scheme--light) oklch(19% 0.005 300deg);
209
- --color-surface-3: var(--csstools-light-dark-toggle--27, oklch(93.5% 0.01 300deg));
210
- --csstools-light-dark-toggle--28: var(--csstools-color-scheme--light) oklch(24% 0.005 300deg);
211
- --color-surface-4: var(--csstools-light-dark-toggle--28, oklch(91.5% 0.01 300deg));
212
- --csstools-light-dark-toggle--29: var(--csstools-color-scheme--light) oklch(24% 0.005 300deg);
213
- --color-surface-5: var(--csstools-light-dark-toggle--29, oklch(91.5% 0.01 300deg));
214
- --csstools-light-dark-toggle--30: var(--csstools-color-scheme--light) oklch(9.5% 0.005 300deg);
215
- --color-background: var(--csstools-light-dark-toggle--30, oklch(99% 0.005 300deg));
216
- --csstools-light-dark-toggle--31: var(--csstools-color-scheme--light) oklch(91.5% 0.005 300deg);
217
- --color-on-background: var(--csstools-light-dark-toggle--31, oklch(12.5% 0.005 300deg));
218
- --csstools-light-dark-toggle--32: var(--csstools-color-scheme--light) oklch(61% 0.01 300deg);
219
- --color-outline: var(--csstools-light-dark-toggle--32, oklch(50% 0.01 300deg));
220
- --csstools-light-dark-toggle--33: var(--csstools-color-scheme--light) oklch(33.5% 0.025 270deg);
221
- --color-outline-variant: var(--csstools-light-dark-toggle--33, oklch(91.8% 0.015 300deg));
222
- --csstools-light-dark-toggle--34: var(--csstools-color-scheme--light) oklch(61% 0.01 300deg);
223
- --color-divider: var(--csstools-light-dark-toggle--34, oklch(50% 0.01 300deg));
224
- --csstools-light-dark-toggle--35: var(--csstools-color-scheme--light) oklch(91.5% 0.005 300deg);
225
- --color-inverse-surface: var(--csstools-light-dark-toggle--35, oklch(22% 0 0deg));
226
- --csstools-light-dark-toggle--36: var(--csstools-color-scheme--light) oklch(22.5% 0.005 300deg);
227
- --color-inverse-on-surface: var(--csstools-light-dark-toggle--36, oklch(96% 0.005 300deg));
228
- --csstools-light-dark-toggle--37: var(--csstools-color-scheme--light) oklch(49.4% 0.163 264deg);
229
- --color-inverse-primary: var(--csstools-light-dark-toggle--37, oklch(79.7% 0.105 264deg));
230
- }
231
- }
232
- @media (prefers-color-scheme: dark) {
233
- :root {
234
- --csstools-color-scheme--light: ;
235
- }
65
+
66
+ /* Scrim and shadow */
67
+ --color-scrim: oklch(0% 0 0deg);
68
+ --color-shadow: oklch(0% 0 0deg);
236
69
  }
237
70
  }
package/dist/tokens.css CHANGED
@@ -65,16 +65,18 @@
65
65
  --font-serif: georgia, 'Times New Roman', serif;
66
66
  --font-mono: 'SF Mono', monaco, 'Courier New', monospace;
67
67
 
68
- /* Font sizes */
69
- --font-size-1: calc(12px * var(--scaling, 1));
70
- --font-size-2: calc(14px * var(--scaling, 1));
71
- --font-size-3: calc(16px * var(--scaling, 1));
72
- --font-size-4: calc(18px * var(--scaling, 1));
73
- --font-size-5: calc(20px * var(--scaling, 1));
68
+ /* Font sizes (M3 Expressive aligned) */
69
+ --font-size-1: calc(11px * var(--scaling, 1));
70
+ --font-size-2: calc(12px * var(--scaling, 1));
71
+ --font-size-3: calc(14px * var(--scaling, 1));
72
+ --font-size-4: calc(16px * var(--scaling, 1));
73
+ --font-size-5: calc(22px * var(--scaling, 1));
74
74
  --font-size-6: calc(24px * var(--scaling, 1));
75
75
  --font-size-7: calc(28px * var(--scaling, 1));
76
- --font-size-8: calc(35px * var(--scaling, 1));
77
- --font-size-9: calc(60px * var(--scaling, 1));
76
+ --font-size-8: calc(32px * var(--scaling, 1));
77
+ --font-size-9: calc(36px * var(--scaling, 1));
78
+ --font-size-10: calc(45px * var(--scaling, 1));
79
+ --font-size-11: calc(57px * var(--scaling, 1));
78
80
 
79
81
  /* Font weights */
80
82
  --font-weight-light: 300;
@@ -82,16 +84,18 @@
82
84
  --font-weight-medium: 500;
83
85
  --font-weight-bold: 700;
84
86
 
85
- /* Line heights */
87
+ /* Line heights (M3 Expressive aligned) */
86
88
  --line-height-1: calc(16px * var(--scaling, 1));
87
- --line-height-2: calc(20px * var(--scaling, 1));
88
- --line-height-3: calc(24px * var(--scaling, 1));
89
- --line-height-4: calc(26px * var(--scaling, 1));
89
+ --line-height-2: calc(16px * var(--scaling, 1));
90
+ --line-height-3: calc(20px * var(--scaling, 1));
91
+ --line-height-4: calc(24px * var(--scaling, 1));
90
92
  --line-height-5: calc(28px * var(--scaling, 1));
91
- --line-height-6: calc(30px * var(--scaling, 1));
93
+ --line-height-6: calc(32px * var(--scaling, 1));
92
94
  --line-height-7: calc(36px * var(--scaling, 1));
93
95
  --line-height-8: calc(40px * var(--scaling, 1));
94
- --line-height-9: calc(60px * var(--scaling, 1));
96
+ --line-height-9: calc(44px * var(--scaling, 1));
97
+ --line-height-10: calc(52px * var(--scaling, 1));
98
+ --line-height-11: calc(64px * var(--scaling, 1));
95
99
 
96
100
  /* Letter spacing */
97
101
  --letter-spacing-1: 0.0025em;
@@ -144,7 +148,6 @@
144
148
 
145
149
  @layer tokens {
146
150
  :root {
147
- --csstools-color-scheme--light: initial;
148
151
  color-scheme: light dark;
149
152
 
150
153
  --shadow-0: none;
@@ -169,21 +172,40 @@
169
172
  0px 4px 4px 0px rgb(0 0 0 / 50%), 0px 8px 12px 6px rgb(0 0 0 / 25%)
170
173
  );
171
174
  }
172
- @media (prefers-color-scheme: dark) {
173
- :root {
174
- --csstools-color-scheme--light: ;
175
- }
176
- }
177
175
  }
178
176
 
179
177
  /**
180
- * Chi Design System - Motion Tokens
181
- * Animation duration and easing tokens
178
+ * Chi Design System - Motion Tokens (M3 Expressive)
179
+ * Spring physics for JS libraries, easing/duration for CSS
182
180
  */
183
181
 
184
182
  @layer tokens {
185
183
  :root {
186
- /* Durations */
184
+ /* ==============================================
185
+ * Spring Tokens (for JS animation libraries)
186
+ * Use with Framer Motion, React Spring, etc.
187
+ * ============================================== */
188
+
189
+ /* Spatial springs - position, scale, rotation (allows overshoot) */
190
+ --spring-fast-spatial-damping: 0.9;
191
+ --spring-fast-spatial-stiffness: 1400;
192
+ --spring-default-spatial-damping: 0.9;
193
+ --spring-default-spatial-stiffness: 700;
194
+ --spring-slow-spatial-damping: 0.9;
195
+ --spring-slow-spatial-stiffness: 300;
196
+
197
+ /* Effects springs - color, opacity (no overshoot) */
198
+ --spring-fast-effects-damping: 1;
199
+ --spring-fast-effects-stiffness: 3800;
200
+ --spring-default-effects-damping: 1;
201
+ --spring-default-effects-stiffness: 1600;
202
+ --spring-slow-effects-damping: 1;
203
+ --spring-slow-effects-stiffness: 800;
204
+
205
+ /* ==============================================
206
+ * Duration Tokens (for CSS transitions)
207
+ * ============================================== */
208
+
187
209
  --duration-instant: 0ms;
188
210
  --duration-short1: 50ms;
189
211
  --duration-short2: 100ms;
@@ -202,11 +224,18 @@
202
224
  --duration-extra-long3: 900ms;
203
225
  --duration-extra-long4: 1000ms;
204
226
 
205
- /* Easing functions */
227
+ /* ==============================================
228
+ * Easing Tokens (for CSS transitions)
229
+ * ============================================== */
230
+
206
231
  --easing-linear: linear;
232
+
233
+ /* Standard - utility/functional animations */
207
234
  --easing-standard: cubic-bezier(0.2, 0, 0, 1);
208
235
  --easing-standard-accelerate: cubic-bezier(0.3, 0, 1, 1);
209
236
  --easing-standard-decelerate: cubic-bezier(0, 0, 0, 1);
237
+
238
+ /* Emphasized - expressive M3 animations */
210
239
  --easing-emphasized: cubic-bezier(0.2, 0, 0, 1);
211
240
  --easing-emphasized-accelerate: cubic-bezier(0.3, 0, 0.8, 0.15);
212
241
  --easing-emphasized-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@okja/chi-tokens",
3
- "version": "0.4.3",
3
+ "version": "0.5.2",
4
4
  "description": "Chi Design System tokens - colors, typography, spacing, radius, shadow, motion",
5
5
  "type": "module",
6
6
  "license": "MIT",
@@ -31,16 +31,14 @@
31
31
  ],
32
32
  "scripts": {
33
33
  "build": "postcss src/base.css -o dist/tokens.css && postcss 'src/colors/*.css' --dir dist/colors --base src/colors",
34
- "check": "stylelint 'src/**/*.css'",
35
- "clean": "rm -rf dist"
34
+ "clean": "rimraf dist",
35
+ "lint": "stylelint 'src/**/*.css'"
36
36
  },
37
37
  "devDependencies": {
38
- "@csstools/postcss-light-dark-function": "^2.0.7",
39
38
  "postcss": "^8.5.6",
40
39
  "postcss-cli": "^11.0.1",
41
- "postcss-custom-media": "^11.0.6",
42
40
  "postcss-import": "^16.1.1",
43
- "postcss-nesting": "^13.0.2",
41
+ "rimraf": "^6.1.2",
44
42
  "stylelint": "^16.12.0",
45
43
  "stylelint-config-standard": "^37.0.0"
46
44
  }