@infonomic/uikit 5.17.0 → 5.19.0

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 (28) hide show
  1. package/dist/components/badge/badge.module.css +14 -13
  2. package/dist/components/badge/badge_module.css +7 -7
  3. package/dist/components/button/button.module.css +103 -119
  4. package/dist/components/button/button_module.css +72 -71
  5. package/dist/components/chips/chip.d.ts.map +1 -1
  6. package/dist/components/chips/chip.js +3 -6
  7. package/dist/components/chips/chip.module.css +82 -96
  8. package/dist/components/chips/chip.module.js +2 -3
  9. package/dist/components/chips/chip_module.css +63 -65
  10. package/dist/components/pager/pagination.module.css +9 -8
  11. package/dist/components/pager/pagination_module.css +2 -2
  12. package/dist/icons/check-icon.d.ts.map +1 -1
  13. package/dist/icons/check-icon.js +0 -1
  14. package/dist/react.d.ts +1 -0
  15. package/dist/react.d.ts.map +1 -1
  16. package/dist/react.js +2 -0
  17. package/dist/styles/components-vanilla.css +1 -1
  18. package/dist/styles/styles.css +1 -1
  19. package/package.json +11 -11
  20. package/src/components/badge/badge.module.css +14 -13
  21. package/src/components/button/button.module.css +103 -119
  22. package/src/components/chips/chip.module.css +82 -96
  23. package/src/components/chips/chip.tsx +4 -6
  24. package/src/components/pager/pagination.module.css +9 -8
  25. package/src/icons/check-icon.tsx +0 -1
  26. package/src/react.ts +4 -0
  27. package/src/styles/base/colors.css +18 -17
  28. package/src/styles/functional/colors.css +613 -180
package/src/styles/functional/colors.css CHANGED
@@ -18,6 +18,7 @@
18
18
  */
19
19
 
20
20
  @layer infonomic-functional {
21
+
21
22
  /* ===================================================================
22
23
  LIGHT MODE (default)
23
24
  =================================================================== */
@@ -25,23 +26,40 @@
25
26
  /* PRIMARY INTENT TOKENS
26
27
  ----------------------------------------------------------------- */
27
28
 
28
- /* Fill tokens - for solid backgrounds (filled variant) */
29
+ /* Fill tokens - for filled variant */
29
30
  --fill-primary-strong: var(--primary-500);
30
31
  --fill-primary-strong-hover: oklch(from var(--primary-500) calc(l * 0.9) c h);
31
32
  --fill-primary-strong-disabled: oklch(from var(--primary-500) calc(l * 1.1) calc(c * 0.85) h);
33
+
32
34
  --fill-primary-weak: oklch(from var(--primary-500) calc(l * 2.04) calc(c * 0.2) h / 0.7);
33
35
  --fill-primary-weak-hover: oklch(from var(--primary-500) calc(l * 2) calc(c * 0.2) h / 0.7);
34
36
  --fill-primary-weak-disabled: oklch(from var(--primary-500) calc(l * 2) calc(c * 0.2) h / 0.7);
35
37
 
36
- /* Based on weak - but with transparency for components that appear on top of a primary or theme background */
37
- --fill-primary-transparent: oklch(from var(--primary-500) calc(l * 2.04) calc(c * 0.2) h / 0.5);
38
+ --fill-primary-outlined: transparent;
39
+ --fill-primary-outlined-hover: oklch(from var(--primary-500) calc(l * 2) calc(c * 0.2) h / 0.7);
40
+ --fill-primary-outlined-disabled: oklch(from var(--primary-500) calc(l * 2) calc(c * 0.2) h / 0.7);
41
+
42
+ --fill-primary-text: transparent;
43
+ --fill-primary-text-hover: oklch(from var(--primary-500) calc(l * 2) calc(c * 0.2) h / 0.7);
44
+ --fill-primary-text-disabled: oklch(from var(--primary-500) calc(l * 2) calc(c * 0.2) h / 0.7);
45
+
46
+ /* Text tokens - for text/icons on top of fills */
47
+ --text-on-primary-strong: white;
48
+ --text-on-primary-strong-hover: var(--primary-600);
49
+ --text-on-primary-strong-disabled: oklch(from white calc(l * 0.9) calc(c * 0.85) h);
50
+
51
+ --text-on-primary-weak: oklch(from var(--primary-500) calc(l * 0.7) c h);
52
+ --text-on-primary-weak-hover: oklch(from var(--primary-600) calc(l * 1.5) calc(c * 0.5) h);
53
+ --text-on-primary-weak-disabled: oklch(from var(--primary-600) calc(l * 1.5) calc(c * 0.5) h);
38
54
 
39
- --text-on-primary: white;
40
- --text-on-primary-disabled: oklch(from white calc(l * 0.9) calc(c * 0.85) h);
41
- --text-primary-strong: var(--primary-600);
55
+ --text-on-primary-outlined: oklch(from var(--primary-500) calc(l * 0.7) c h);
56
+ --text-on-primary-outlined-hover: oklch(from var(--primary-600) calc(l * 1.5) calc(c * 0.5) h);
57
+ --text-on-primary-outlined-disabled: oklch(from var(--primary-600) calc(l * 1.5) calc(c * 0.5) h);
58
+
59
+ --text-primary: var(--primary-500);
42
60
  --text-primary-weak: oklch(from var(--primary-500) calc(l * 0.7) c h);
43
- --text-primary-disabled: oklch(from var(--primary-600) calc(l * 1.5) calc(c * 0.5) h);
44
- --text-primary-weak-disabled: oklch(from var(--primary-600) calc(l * 1.5) calc(c * 0.5) h);
61
+ --text-primary-hover: oklch(from var(--primary-500) calc(l * 0.7) c h);
62
+ --text-primary-disabled: oklch(from var(--primary-500) calc(l * 1.5) calc(c * 0.5) h);
45
63
 
46
64
  /* Stroke tokens - for borders */
47
65
  --stroke-primary: var(--primary-600);
@@ -59,23 +77,41 @@
59
77
 
60
78
  /* SECONDARY INTENT TOKENS
61
79
  ----------------------------------------------------------------- */
80
+
81
+ /* Fill tokens - for filled variant */
62
82
  --fill-secondary-strong: var(--secondary-500);
63
83
  --fill-secondary-strong-hover: oklch(from var(--secondary-500) calc(l * 0.95) c h);
64
- --fill-secondary-strong-disabled: oklch(
65
- from var(--secondary-500) calc(l * 1.1) calc(c * 0.85) h
66
- );
67
- --fill-secondary-weak: oklch(from var(--secondary-500) calc(l * 1.6) calc(c * 0.4) h / 0.7);
68
- --fill-secondary-weak-hover: oklch(from var(--secondary-500) calc(l * 2) calc(c * 0.4) h / 0.7);
69
- --fill-secondary-weak-disabled: oklch(
70
- from var(--secondary-500) calc(l * 2) calc(c * 0.4) c h /
71
- 0.7
72
- );
73
-
74
- --text-on-secondary: black;
75
- --text-on-secondary-disabled: oklch(from black calc(l * 0.9) calc(c * 0.85) h);
76
- --text-secondary-strong: var(--secondary-950);
84
+ --fill-secondary-strong-disabled: oklch(from var(--secondary-500) calc(l * 1.1) calc(c * 0.85) h);
85
+
86
+ --fill-secondary-weak: oklch(from var(--secondary-500) calc(l * 1.6) calc(c * 0.4) h / 0.5);
87
+ --fill-secondary-weak-hover: oklch(from var(--secondary-500) calc(l * 1.2) calc(c * 0.4) h / 0.5);
88
+ --fill-secondary-weak-disabled: oklch(from var(--secondary-500) calc(l * 2) calc(c * 0.4) c h / 0.5);
89
+
90
+ --fill-secondary-outlined: var(--fill-secondary-outlined);
91
+ --fill-secondary-outlined-hover: oklch(from var(--secondary-500) calc(l * 2) calc(c * 0.4) h / 0.7);
92
+ --fill-secondary-outlined-disabled: oklch(from var(--secondary-500) calc(l * 2) calc(c * 0.4) c h / 0.7);
93
+
94
+ --fill-secondary-text: transparent;
95
+ --fill-secondary-text-hover: oklch(from var(--secondary-500) calc(l * 2) calc(c * 0.4) h / 0.7);
96
+ --fill-secondary-text-disabled: oklch(from var(--secondary-500) calc(l * 2) calc(c * 0.4) c h / 0.7);
97
+
98
+ /* Text tokens - for text/icons on top of fills */
99
+ --text-on-secondary-strong: black;
100
+ --text-on-secondary-strong-disabled: oklch(from black calc(l * 0.9) calc(c * 0.85) h);
101
+ --text-on-secondary-strong-hover: oklch(from black calc(l * 0.9) calc(c * 0.85) h);
102
+
103
+ --text-on-secondary-weak: var(--secondary-900);
104
+ --text-on-secondary-weak-hover: oklch(from var(--secondary-900) calc(l * 1.5) calc(c * 0.5) h);
105
+ --text-on-secondary-weak-disabled: oklch(from var(--secondary-900) calc(l * 1.5) calc(c * 0.5) h);
106
+
107
+ --text-on-secondary-outlined: var(--secondary-800);
108
+ --text-on-secondary-outlined-hover: oklch(from var(--secondary-950) calc(l * 1.5) calc(c * 0.5) h);
109
+ --text-on-secondary-outlined-disabled: oklch(from var(--secondary-950) calc(l * 1.5) calc(c * 0.5) h);
110
+
111
+ --text-secondary: var(--secondary-800);
77
112
  --text-secondary-weak: oklch(from var(--secondary-500) calc(l * 0.7) c h);
78
- --text-secondary-disabled: oklch(from var(--secondary-950) calc(l * 1.5) calc(c * 0.5) h);
113
+ --text-secondary-hover: oklch(from var(--secondary-900) calc(l * 0.7) c h);
114
+ --text-secondary-disabled: oklch(from var(--secondary-700) calc(l * 1.5) calc(c * 0.5) h);
79
115
 
80
116
  --stroke-secondary: var(--secondary-700);
81
117
  --stroke-secondary-hover: oklch(from var(--secondary-700) calc(l * 0.85) c h);
@@ -90,18 +126,44 @@
90
126
 
91
127
  /* NOEFFECT INTENT TOKENS (neutral/gray)
92
128
  ----------------------------------------------------------------- */
129
+ /* Fill tokens - for filled variant */
93
130
  --fill-noeffect-strong: var(--gray-100);
94
131
  --fill-noeffect-strong-hover: oklch(from var(--gray-100) calc(l * 0.95) c h);
95
132
  --fill-noeffect-strong-disabled: oklch(from var(--gray-100) calc(l * 1.1) calc(c * 0.85) h);
133
+
96
134
  --fill-noeffect-weak: oklch(from var(--gray-100) calc(l * 1.07) c h / 0.7);
97
135
  --fill-noeffect-weak-hover: oklch(from var(--gray-100) calc(l * 1.05) c h / 0.7);
98
136
  --fill-noeffect-weak-disabled: oklch(from var(--gray-100) calc(l * 1.07) c h / 0.7);
99
137
 
100
- --text-on-noeffect: black;
101
- --text-on-noeffect-disabled: oklch(from black calc(l * 0.9) calc(c * 0.85) h);
102
- --text-noeffect-strong: var(--gray-800);
103
- --text-noeffect-weak: oklch(from var(--gray-100) calc(l * 0.5) c h);
104
- --text-noeffect-disabled: oklch(from var(--gray-800) calc(l * 1.5) calc(c * 0.5) h);
138
+ --fill-noeffect-outlined: transparent;
139
+ --fill-noeffect-outlined-hover: oklch(from var(--gray-100) calc(l * 1.05) c h / 0.5);
140
+ --fill-noeffect-outlined-disabled: oklch(from var(--gray-100) calc(l * 1.07) c h / 0.5);
141
+
142
+ --fill-noeffect-text: transparent;
143
+ --fill-noeffect-text-hover: oklch(from var(--gray-100) calc(l * 1.05) c h / 0.5);
144
+ --fill-noeffect-text-disabled: oklch(from var(--gray-100) calc(l * 1.07) c h / 0.5);
145
+
146
+ /* Text tokens - for text/icons on top of fills */
147
+ --text-on-noeffect-strong: black;
148
+ --text-on-noeffect-strong-hover: oklch(from black calc(l * 0.9) calc(c * 0.85) h);
149
+ --text-on-noeffect-strong-disabled: oklch(from black calc(l * 0.9) calc(c * 0.85) h);
150
+
151
+ --text-on-noeffect-weak: oklch(from var(--gray-100) calc(l * 0.5) c h);
152
+ --text-on-noeffect-weak-hover: oklch(from var(--gray-800) calc(l * 1.5) calc(c * 0.5) h);
153
+ --text-on-noeffect-weak-disabled: oklch(from var(--gray-800) calc(l * 1.5) calc(c * 0.5) h);
154
+
155
+ --text-on-noeffect-outlined: oklch(from var(--gray-100) calc(l * 0.5) c h);
156
+ --text-on-noeffect-outlined-hover: oklch(from var(--gray-800) calc(l * 1.5) calc(c * 0.5) h);
157
+ --text-on-noeffect-outlined-disabled: oklch(from var(--gray-800) calc(l * 1.5) calc(c * 0.5) h);
158
+
159
+ --text-on-noeffect-text: oklch(from var(--gray-100) calc(l * 0.5) c h);
160
+ --text-on-noeffect-text-hover: oklch(from var(--gray-800) calc(l * 1.5) calc(c * 0.5) h);
161
+ --text-on-noeffect-text-disabled: oklch(from var(--gray-800) calc(l * 1.5) calc(c * 0.5) h);
162
+
163
+ --text-noeffect: var(--gray-600);
164
+ --text-noeffect-weak: oklch(from var(--gray-400) calc(l * 0.7) c h);
165
+ --text-noeffect-hover: oklch(from var(--gray-400) calc(l * 0.7) c h);
166
+ --text-noeffect-disabled: oklch(from var(--gray-600) calc(l * 1.5) calc(c * 0.5) h);
105
167
 
106
168
  --stroke-noeffect: var(--gray-500);
107
169
  --stroke-noeffect-hover: oklch(from var(--gray-500) calc(l * 0.75) c h);
@@ -117,20 +179,39 @@
117
179
 
118
180
  /* SUCCESS INTENT TOKENS
119
181
  ----------------------------------------------------------------- */
182
+ /* Fill tokens - for filled variant */
120
183
  --fill-success-strong: var(--green-400);
121
184
  --fill-success-strong-hover: oklch(from var(--green-400) calc(l * 0.9) c h);
122
185
  --fill-success-strong-disabled: oklch(from var(--green-400) calc(l * 1.1) calc(c * 0.85) h);
123
- --fill-success-weak: oklch(from var(--green-100) calc(l * 1.09) calc(c * 0.85) h / 0.7);
124
- --fill-success-weak-hover: oklch(from var(--green-100) calc(l * 0.975) calc(c * 0.85) h / 0.7);
125
- --fill-success-weak-disabled: oklch(
126
- from var(--green-100) calc(l * 1.07) calc(c * 0.85) h /
127
- 0.7
128
- );
129
-
130
- --text-on-success: white;
131
- --text-on-success-disabled: oklch(from white calc(l * 0.9) calc(c * 0.85) h);
132
- --text-success-strong: var(--green-600);
186
+
187
+ --fill-success-weak: oklch(from var(--green-100) calc(l * 1.09) calc(c * 0.85) h / 0.5);
188
+ --fill-success-weak-hover: oklch(from var(--green-100) calc(l * 0.975) calc(c * 0.85) h / 0.5);
189
+ --fill-success-weak-disabled: oklch(from var(--green-100) calc(l * 1.07) calc(c * 0.85) h / 0.5);
190
+
191
+ --fill-success-outlined: transparent;
192
+ --fill-success-outlined-hover: oklch(from var(--green-100) calc(l * 0.975) calc(c * 0.85) h / 0.4);
193
+ --fill-success-outlined-disabled: oklch(from var(--green-100) calc(l * 1.07) calc(c * 0.85) h / 0.4);
194
+
195
+ --fill-success-text: transparent;
196
+ --fill-success-text-hover: oklch(from var(--green-100) calc(l * 0.975) calc(c * 0.85) h / 0.4);
197
+ --fill-success-text-disabled: oklch(from var(--green-100) calc(l * 1.07) calc(c * 0.85) h / 0.4);
198
+
199
+ /* Text tokens - for text/icons on top of fills */
200
+ --text-on-success-strong: white;
201
+ --text-on-success-strong-hover: oklch(from white calc(l * 0.9) calc(c * 0.85) h);
202
+ --text-on-success-strong-disabled: oklch(from white calc(l * 0.9) calc(c * 0.85) h);
203
+
204
+ --text-on-success-weak: oklch(from var(--green-400) calc(l * 0.7) c h);
205
+ --text-on-success-weak-hover: oklch(from var(--green-400) calc(l * 0.7) c h);
206
+ --text-on-success-weak-disabled: oklch(from var(--green-400) calc(l * 0.7) c h);
207
+
208
+ --text-on-success-outlined: var(--green-600);
209
+ --text-on-success-outlined-hover: oklch(from var(--green-600) calc(l * 0.7) c h);
210
+ --text-on-success-outlined-disabled: oklch(from var(--green-600) calc(l * 0.7) c h);
211
+
212
+ --text-success: var(--green-600);
133
213
  --text-success-weak: oklch(from var(--green-400) calc(l * 0.7) c h);
214
+ --text-success-hover: oklch(from var(--green-400) calc(l * 0.7) c h);
134
215
  --text-success-disabled: oklch(from var(--green-600) calc(l * 1.5) calc(c * 0.5) h);
135
216
 
136
217
  --stroke-success: var(--green-600);
@@ -146,17 +227,40 @@
146
227
 
147
228
  /* INFO INTENT TOKENS
148
229
  ----------------------------------------------------------------- */
230
+
231
+ /* Fill tokens - for filled variant */
149
232
  --fill-info-strong: var(--blue-400);
150
233
  --fill-info-strong-hover: oklch(from var(--blue-400) calc(l * 0.9) c h);
151
234
  --fill-info-strong-disabled: oklch(from var(--blue-400) calc(l * 1.1) calc(c * 0.85) h);
235
+
152
236
  --fill-info-weak: oklch(from var(--blue-400) calc(l * 1.75) calc(c * 0.2) h / 0.7);
153
237
  --fill-info-weak-hover: oklch(from var(--blue-400) calc(l * 1.7) calc(c * 0.2) h / 0.7);
154
238
  --fill-info-weak-disabled: oklch(from var(--blue-400) calc(l * 1.8) calc(c * 0.2) h / 0.7);
155
239
 
156
- --text-on-info: white;
157
- --text-on-info-disabled: oklch(from white calc(l * 0.9) calc(c * 0.85) h);
158
- --text-info-strong: var(--blue-300);
240
+ --fill-info-outlined: transparent;
241
+ --fill-info-outlined-hover: oklch(from var(--blue-400) calc(l * 1.7) calc(c * 0.2) h / 0.7);
242
+ --fill-info-outlined-disabled: oklch(from var(--blue-400) calc(l * 1.8) calc(c * 0.2) h / 0.7);
243
+
244
+ --fill-info-text: transparent;
245
+ --fill-info-text-hover: oklch(from var(--blue-400) calc(l * 1.7) calc(c * 0.2) h / 0.7);
246
+ --fill-info-text-disabled: oklch(from var(--blue-400) calc(l * 1.8) calc(c * 0.2) h / 0.7);
247
+
248
+ /* Text tokens - for text/icons on top of fills */
249
+ --text-on-info-strong: white;
250
+ --text-on-info-strong-hover: oklch(from white calc(l * 0.9) calc(c * 0.85) h);
251
+ --text-on-info-strong-disabled: oklch(from white calc(l * 0.9) calc(c * 0.85) h);
252
+
253
+ --text-on-info-weak: oklch(from var(--blue-400) calc(l * 0.7) c h);
254
+ --text-on-info-weak-hover: oklch(from var(--blue-400) calc(l * 0.7) c h);
255
+ --text-on-info-weak-disabled: oklch(from var(--blue-400) calc(l * 0.7) c h);
256
+
257
+ --text-on-info-outlined: oklch(from var(--blue-400) calc(l * 0.7) c h);
258
+ --text-on-info-outlined-hover: oklch(from var(--blue-400) calc(l * 0.7) c h);
259
+ --text-on-info-outlined-disabled: oklch(from var(--blue-400) calc(l * 0.7) c h);
260
+
261
+ --text-info: var(--blue-300);
159
262
  --text-info-weak: oklch(from var(--blue-400) calc(l * 0.7) c h);
263
+ --text-info-hover: oklch(from var(--blue-400) calc(l * 0.7) c h);
160
264
  --text-info-disabled: oklch(from var(--blue-300) calc(l * 1.5) calc(c * 0.5) h);
161
265
 
162
266
  --stroke-info: var(--blue-500);
@@ -172,17 +276,39 @@
172
276
 
173
277
  /* WARNING INTENT TOKENS
174
278
  ----------------------------------------------------------------- */
279
+ /* Fill tokens - for filled variant */
175
280
  --fill-warning-strong: var(--yellow-300);
176
281
  --fill-warning-strong-hover: oklch(from var(--yellow-300) calc(l * 0.95) c h);
177
282
  --fill-warning-strong-disabled: oklch(from var(--yellow-300) calc(l * 1.1) calc(c * 0.85) h);
283
+
178
284
  --fill-warning-weak: oklch(from var(--yellow-300) calc(l * 1.5) calc(c * 0.5) h / 0.7);
179
285
  --fill-warning-weak-hover: oklch(from var(--yellow-300) calc(l * 1.15) calc(c * 0.5) h / 0.7);
180
286
  --fill-warning-weak-disabled: oklch(from var(--yellow-300) calc(l * 1.8) calc(c * 0.5) h / 0.7);
181
287
 
182
- --text-on-warning: black;
183
- --text-on-warning-disabled: oklch(from black calc(l * 0.9) calc(c * 0.85) h);
184
- --text-warning-strong: var(--yellow-700);
185
- --text-warning-weak: oklch(from var(--yellow-300) calc(l * 0.6) c h);
288
+ --fill-warning-outlined: transparent;
289
+ --fill-warning-outlined-hover: oklch(from var(--yellow-300) calc(l * 1.15) calc(c * 0.5) h / 0.7);
290
+ --fill-warning-outlined-disabled: oklch(from var(--yellow-300) calc(l * 1.8) calc(c * 0.5) h / 0.7);
291
+
292
+ --fill-warning-text: transparent;
293
+ --fill-warning-text-hover: oklch(from var(--yellow-300) calc(l * 1.15) calc(c * 0.5) h / 0.7);
294
+ --fill-warning-text-disabled: oklch(from var(--yellow-300) calc(l * 1.8) calc(c * 0.5) h / 0.7);
295
+
296
+ /* Text tokens - for text/icons on top of fills */
297
+ --text-on-warning-strong: black;
298
+ --text-on-warning-strong-hover: oklch(from black calc(l * 0.9) calc(c * 0.85) h);
299
+ --text-on-warning-strong-disabled: oklch(from black calc(l * 0.9) calc(c * 0.85) h);
300
+
301
+ --text-on-warning-weak: var(--yellow-700);
302
+ --text-on-warning-weak-hover: oklch(from var(--yellow-700) calc(l * 0.9) calc(c * 0.85) h);
303
+ --text-on-warning-weak-disabled: oklch(from var(--yellow-700) calc(l * 0.9) calc(c * 0.85) h);
304
+
305
+ --text-on-warning-outlined: var(--yellow-800);
306
+ --text-on-warning-outlined-hover: oklch(from var(--yellow-800) calc(l * 0.9) calc(c * 0.85) h);
307
+ --text-on-warning-outlined-disabled: oklch(from var(--yellow-800) calc(l * 0.9) calc(c * 0.85) h);
308
+
309
+ --text-warning: var(--yellow-700);
310
+ --text-warning-weak: oklch(from var(--yellow-700) calc(l * 0.6) c h);
311
+ --text-warning-hover: oklch(from var(--yellow-700) calc(l * 0.6) c h);
186
312
  --text-warning-disabled: oklch(from var(--yellow-700) calc(l * 1.5) calc(c * 0.5) h);
187
313
 
188
314
  --stroke-warning: var(--yellow-500);
@@ -198,17 +324,40 @@
198
324
 
199
325
  /* DANGER INTENT TOKENS
200
326
  ----------------------------------------------------------------- */
327
+
328
+ /* Fill tokens - for filled variant */
201
329
  --fill-danger-strong: var(--red-400);
202
330
  --fill-danger-strong-hover: oklch(from var(--red-400) calc(l * 0.9) c h);
203
331
  --fill-danger-strong-disabled: oklch(from var(--red-400) calc(l * 1.1) calc(c * 0.85) h);
332
+
204
333
  --fill-danger-weak: oklch(from var(--red-300) calc(l * 1.75) calc(c * 0.5) h / 0.7);
205
334
  --fill-danger-weak-hover: oklch(from var(--red-300) calc(l * 1.65) calc(c * 0.5) h / 0.7);
206
335
  --fill-danger-weak-disabled: oklch(from var(--red-300) calc(l * 1.65) calc(c * 0.5) h / 0.7);
207
336
 
208
- --text-on-danger: white;
209
- --text-on-danger-disabled: oklch(from white calc(l * 0.9) calc(c * 0.85) h);
210
- --text-danger-strong: var(--red-500);
337
+ --fill-danger-outlined: transparent;
338
+ --fill-danger-outlined-hover: oklch(from var(--red-300) calc(l * 1.65) calc(c * 0.5) h / 0.7);
339
+ --fill-danger-outlined-disabled: oklch(from var(--red-300) calc(l * 1.65) calc(c * 0.5) h / 0.7);
340
+
341
+ --fill-danger-text: transparent;
342
+ --fill-danger-text-hover: oklch(from var(--red-300) calc(l * 1.65) calc(c * 0.5) h / 0.7);
343
+ --fill-danger-text-disabled: oklch(from var(--red-300) calc(l * 1.65) calc(c * 0.5) h / 0.7);
344
+
345
+ /* Text tokens - for text/icons on top of fills */
346
+ --text-on-danger-strong: white;
347
+ --text-on-danger-strong-hover: oklch(from white calc(l * 0.9) calc(c * 0.85) h);
348
+ --text-on-danger-strong-disabled: oklch(from white calc(l * 0.9) calc(c * 0.85) h);
349
+
350
+ --text-on-danger-weak: oklch(from var(--red-400) calc(l * 0.7) c h);
351
+ --text-on-danger-weak-hover: oklch(from var(--red-400) calc(l * 0.7) c h);
352
+ --text-on-danger-weak-disabled: oklch(from var(--red-400) calc(l * 0.7) c h);
353
+
354
+ --text-on-danger-outlined: oklch(from var(--red-400) calc(l * 0.7) c h);
355
+ --text-on-danger-outlined-hover: oklch(from var(--red-400) calc(l * 0.7) c h);
356
+ --text-on-danger-outlined-disabled: oklch(from var(--red-400) calc(l * 0.7) c h);
357
+
358
+ --text-danger: var(--red-500);
211
359
  --text-danger-weak: oklch(from var(--red-400) calc(l * 0.7) c h);
360
+ --text-danger-hover: oklch(from var(--red-400) calc(l * 0.7) c h);
212
361
  --text-danger-disabled: oklch(from var(--red-500) calc(l * 1.5) calc(c * 0.5) h);
213
362
 
214
363
  --stroke-danger: var(--red-500);
@@ -236,19 +385,40 @@
236
385
  /* PRIMARY INTENT TOKENS (Dark Mode)
237
386
  ----------------------------------------------------------------- */
238
387
 
239
- /* Fill tokens */
388
+ /* Fill tokens - for filled variant */
240
389
  --fill-primary-strong: var(--primary-500);
241
390
  --fill-primary-strong-hover: oklch(from var(--primary-500) calc(l * 0.9) c h);
242
- --fill-primary-strong-disabled: oklch(from var(--primary-500) calc(l * 0.85) calc(c * 0.85) h);
243
- --fill-primary-weak: oklch(from var(--primary-500) calc(l * 1) calc(c * 0.5) h / 0.5);
244
- --fill-primary-weak-hover: oklch(from var(--primary-500) calc(l * 0.9) calc(c * 0.5) h / 0.5);
245
- --fill-primary-weak-disabled: oklch(from var(--primary-500) calc(l * 1) calc(c * 0.5) h / 0.5);
391
+ --fill-primary-strong-disabled: oklch(from var(--primary-500) calc(l * 1.1) calc(c * 0.85) h);
392
+
393
+ --fill-primary-weak: oklch(from var(--primary-500) calc(l * 1.05) calc(c * 0.9) h / 0.5);
394
+ --fill-primary-weak-hover: oklch(from var(--primary-500) l calc(c * 0.9) h / 0.5);
395
+ --fill-primary-weak-disabled: oklch(from var(--primary-500) l calc(c * 0.9) h / 0.5);
396
+
397
+ --fill-primary-outlined: transparent;
398
+ --fill-primary-outlined-hover: oklch(from var(--primary-500) calc(l * 0.9) calc(c * 0.9) h / 0.3);
399
+ --fill-primary-outlined-disabled: oklch(from var(--primary-500) calc(l * 0.9) calc(c * 0.9) h / 0.3);
400
+
401
+ --fill-primary-text: transparent;
402
+ --fill-primary-text-hover: oklch(from var(--primary-500) calc(l * 0.9) calc(c * 0.9) h / 0.3);
403
+ --fill-primary-text-disabled: oklch(from var(--primary-500) calc(l * 0.9) calc(c * 0.9) h / 0.3);
246
404
 
247
- --text-on-primary: white;
248
- --text-on-primary-disabled: oklch(from white calc(l * 0.85) calc(c * 0.85) h);
249
- --text-primary-strong: var(--primary-50);
250
- --text-primary-weak: var(--primary-100);
251
- --text-primary-disabled: oklch(from var(--primary-100) calc(l * 0.8) calc(c * 0.8) h);
405
+ /* Text tokens - for text/icons on top of fills */
406
+ --text-on-primary-strong: white;
407
+ --text-on-primary-strong-hover: var(--primary-600);
408
+ --text-on-primary-strong-disabled: oklch(from white calc(l * 0.9) calc(c * 0.85) h);
409
+
410
+ --text-on-primary-weak: var(--primary-200);
411
+ --text-on-primary-weak-hover: oklch(from var(--primary-600) calc(l * 1.5) calc(c * 0.5) h);
412
+ --text-on-primary-weak-disabled: oklch(from var(--primary-600) calc(l * 1.5) calc(c * 0.5) h);
413
+
414
+ --text-on-primary-outlined: var(--primary-200);
415
+ --text-on-primary-outlined-hover: oklch(from var(--primary-200) l calc(c * 0.5) h);
416
+ --text-on-primary-outlined-disabled: oklch(from var(--primary-200) l calc(c * 0.5) h);
417
+
418
+ --text-primary: var(--primary-300);
419
+ --text-primary-weak: oklch(from var(--primary-300) calc(l * 0.7) c h);
420
+ --text-primary-hover: oklch(from var(--primary-300) calc(l * 0.7) c h);
421
+ --text-primary-disabled: oklch(from var(--primary-300) calc(l * 1.5) calc(c * 0.5) h);
252
422
 
253
423
  /* Stroke tokens */
254
424
  --stroke-primary: var(--primary-300);
@@ -266,26 +436,40 @@
266
436
 
267
437
  /* SECONDARY INTENT TOKENS (Dark Mode)
268
438
  ----------------------------------------------------------------- */
439
+ /* Fill tokens - for filled variant */
269
440
  --fill-secondary-strong: var(--secondary-500);
270
441
  --fill-secondary-strong-hover: oklch(from var(--secondary-500) calc(l * 0.95) c h);
271
- --fill-secondary-strong-disabled: oklch(
272
- from var(--secondary-500) calc(l * 0.85) calc(c * 0.85) h
273
- );
274
- --fill-secondary-weak: oklch(from var(--secondary-500) calc(l * 0.5) calc(c * 0.5) h / 0.5);
275
- --fill-secondary-weak-hover: oklch(
276
- from var(--secondary-500) calc(l * 0.4) calc(c * 0.5) h /
277
- 0.5
278
- );
279
- --fill-secondary-weak-disabled: oklch(
280
- from var(--secondary-500) calc(l * 0.4) calc(c * 0.5) h /
281
- 0.5
282
- );
283
-
284
- --text-on-secondary: black;
285
- --text-on-secondary-disabled: oklch(from black calc(l * 0.85) calc(c * 0.85) h);
286
- --text-secondary-strong: var(--secondary-500);
287
- --text-secondary-weak: var(--secondary-500);
288
- --text-secondary-disabled: oklch(from var(--secondary-500) calc(l * 0.8) calc(c * 0.8) h);
442
+ --fill-secondary-strong-disabled: oklch(from var(--secondary-500) calc(l * 1.1) calc(c * 0.85) h);
443
+
444
+ --fill-secondary-weak: oklch(from var(--secondary-500) calc(l * 1.1) calc(c * 0.8) h / 0.2);
445
+ --fill-secondary-weak-hover: oklch(from var(--secondary-500) l calc(c * 0.8) h / 0.2);
446
+ --fill-secondary-weak-disabled: oklch(from var(--secondary-500) l calc(c * 0.8) c h / 0.2);
447
+
448
+ --fill-secondary-outlined: transparent;
449
+ --fill-secondary-outlined-hover: oklch(from var(--secondary-500) calc(l * 1.1) calc(c * 0.8) h / 0.1);
450
+ --fill-secondary-outlined-disabled: oklch(from var(--secondary-500) calc(l * 1.1) calc(c * 0.8) h / 0.1);
451
+
452
+ --fill-secondary-text: transparent;
453
+ --fill-secondary-text-hover: oklch(from var(--secondary-500) calc(l * 1.1) calc(c * 0.8) h / 0.1);
454
+ --fill-secondary-text-disabled: oklch(from var(--secondary-500) calc(l * 1.1) calc(c * 0.8) h / 0.1);
455
+
456
+ /* Text tokens - for text/icons on top of fills */
457
+ --text-on-secondary-strong: black;
458
+ --text-on-secondary-strong-disabled: oklch(from black calc(l * 0.9) calc(c * 0.85) h);
459
+ --text-on-secondary-strong-hover: oklch(from black calc(l * 0.9) calc(c * 0.85) h);
460
+
461
+ --text-on-secondary-weak: oklch(from var(--secondary-500) calc(l * 0.7) c h);
462
+ --text-on-secondary-weak-hover: oklch(from var(--secondary-950) calc(l * 1.5) calc(c * 0.5) h);
463
+ --text-on-secondary-weak-disabled: oklch(from var(--secondary-950) calc(l * 1.5) calc(c * 0.5) h);
464
+
465
+ --text-on-secondary-outlined: oklch(from var(--secondary-500) calc(l * 0.7) c h);
466
+ --text-on-secondary-outlined-hover: oklch(from var(--secondary-950) calc(l * 1.5) calc(c * 0.5) h);
467
+ --text-on-secondary-outlined-disabled: oklch(from var(--secondary-950) calc(l * 1.5) calc(c * 0.5) h);
468
+
469
+ --text-secondary: var(--secondary-500);
470
+ --text-secondary-weak: oklch(from var(--secondary-500) calc(l * 0.7) c h);
471
+ --text-secondary-hover: oklch(from var(--secondary-500) calc(l * 0.7) c h);
472
+ --text-secondary-disabled: oklch(from var(--secondary-500) calc(l * 1.5) calc(c * 0.5) h);
289
473
 
290
474
  --stroke-secondary: var(--secondary-500);
291
475
  --stroke-secondary-hover: oklch(from var(--secondary-500) calc(l * 1.1) c h);
@@ -300,18 +484,40 @@
300
484
 
301
485
  /* NOEFFECT INTENT TOKENS (Dark Mode)
302
486
  ----------------------------------------------------------------- */
303
- --fill-noeffect-strong: var(--gray-900);
304
- --fill-noeffect-strong-hover: oklch(from var(--gray-900) calc(l * 0.95) c h);
305
- --fill-noeffect-strong-disabled: oklch(from var(--gray-900) calc(l * 0.85) calc(c * 0.85) h);
306
- --fill-noeffect-weak: oklch(from var(--gray-500) calc(l * 0.55) calc(c * 0.5) h / 0.5);
307
- --fill-noeffect-weak-hover: oklch(from var(--gray-500) calc(l * 0.5) calc(c * 0.5) h / 0.5);
308
- --fill-noeffect-weak-disabled: oklch(from var(--gray-500) calc(l * 0.5) calc(c * 0.5) h / 0.5);
309
-
310
- --text-on-noeffect: white;
311
- --text-on-noeffect-disabled: oklch(from white calc(l * 0.85) calc(c * 0.85) h);
312
- --text-noeffect-strong: var(--gray-300);
313
- --text-noeffect-weak: var(--gray-300);
314
- --text-noeffect-disabled: oklch(from var(--gray-300) calc(l * 0.85) calc(c * 0.85) h);
487
+ /* Fill tokens - for filled variant */
488
+ --fill-noeffect-strong: var(--gray-100);
489
+ --fill-noeffect-strong-hover: oklch(from var(--gray-100) calc(l * 0.95) c h);
490
+ --fill-noeffect-strong-disabled: oklch(from var(--gray-100) calc(l * 1.1) calc(c * 0.85) h);
491
+
492
+ --fill-noeffect-weak: oklch(from var(--gray-100) calc(l * 1.09) c h / 0.3);
493
+ --fill-noeffect-weak-hover: oklch(from var(--gray-100) calc(l * 1.05) c h / 0.3);
494
+ --fill-noeffect-weak-disabled: oklch(from var(--gray-100) calc(l * 1.07) c h / 0.3);
495
+
496
+ --fill-noeffect-outlined: transparent;
497
+ --fill-noeffect-outlined-hover: oklch(from var(--gray-300) calc(l * 1.05) c h / 0.1);
498
+ --fill-noeffect-outlined-disabled: oklch(from var(--gray-300) calc(l * 1.07) c h / 0.1);
499
+
500
+ --fill-noeffect-text: transparent;
501
+ --fill-noeffect-text-hover: oklch(from var(--gray-300) calc(l * 1.05) c h / 0.1);
502
+ --fill-noeffect-text-disabled: oklch(from var(--gray-300) calc(l * 1.07) c h / 0.1);
503
+
504
+ /* Text tokens - for text/icons on top of fills */
505
+ --text-on-noeffect-strong: black;
506
+ --text-on-noeffect-strong-hover: oklch(from black calc(l * 0.9) calc(c * 0.85) h);
507
+ --text-on-noeffect-strong-disabled: oklch(from black calc(l * 0.9) calc(c * 0.85) h);
508
+
509
+ --text-on-noeffect-weak: var(--gray-950);
510
+ --text-on-noeffect-weak-hover: oklch(from var(--gray-800) calc(l * 1.5) calc(c * 0.5) h);
511
+ --text-on-noeffect-weak-disabled: oklch(from var(--gray-800) calc(l * 1.5) calc(c * 0.5) h);
512
+
513
+ --text-on-noeffect-outlined: var(--gray-200);
514
+ --text-on-noeffect-outlined-hover: oklch(from var(--gray-200) calc(l * 1.5) calc(c * 0.5) h);
515
+ --text-on-noeffect-outlined-disabled: oklch(from var(--gray-200) calc(l * 1.5) calc(c * 0.5) h);
516
+
517
+ --text-noeffect: var(--gray-200);
518
+ --text-noeffect-weak: oklch(from var(--gray-200) calc(l * 0.7) c h);
519
+ --text-noeffect-hover: oklch(from var(--gray-200) calc(l * 0.7) c h);
520
+ --text-noeffect-disabled: oklch(from var(--gray-200) calc(l * 1.5) calc(c * 0.5) h);
315
521
 
316
522
  --stroke-noeffect: var(--gray-500);
317
523
  --stroke-noeffect-hover: oklch(from var(--gray-500) calc(l * 1.2) c h);
@@ -319,30 +525,48 @@
319
525
 
320
526
  --ring-noeffect: var(--gray-900);
321
527
 
322
- --gradient-noeffect-start: var(--gray-950);
323
- --gradient-noeffect-end: var(--gray-900);
528
+ --gradient-noeffect-start: var(--gray-700);
529
+ --gradient-noeffect-end: var(--gray-800);
324
530
  --gradient-noeffect-foreground: white;
325
- --gradient-noeffect-hover: var(--gray-900);
326
- --gradient-noeffect-disabled: oklch(from var(--gray-900) calc(l * 0.85) calc(c * 0.85) h);
531
+ --gradient-noeffect-hover: var(--gray-800);
532
+ --gradient-noeffect-disabled: oklch(from var(--gray-800) calc(l * 0.85) calc(c * 0.85) h);
327
533
 
328
534
  /* SUCCESS INTENT TOKENS (Dark Mode)
329
535
  ----------------------------------------------------------------- */
536
+ /* Fill tokens - for filled variant */
330
537
  --fill-success-strong: var(--green-400);
331
538
  --fill-success-strong-hover: oklch(from var(--green-400) calc(l * 0.9) c h);
332
- --fill-success-strong-disabled: oklch(from var(--green-400) calc(l * 0.85) calc(c * 0.85) h);
333
- --fill-success-weak: oklch(from var(--green-400) calc(l * 0.5) calc(c * 0.5) h / 0.5);
334
- --fill-success-weak-hover: oklch(from var(--green-400) calc(l * 0.4) calc(c * 0.5) h / 0.5);
335
- --fill-success-weak-disabled: oklch(from var(--green-400) calc(l * 0.4) calc(c * 0.5) h / 0.5);
539
+ --fill-success-strong-disabled: oklch(from var(--green-400) calc(l * 1.1) calc(c * 0.85) h);
540
+
541
+ --fill-success-weak: oklch(from var(--green-100) calc(l * 1.09) calc(c * 0.85) h / 0.2);
542
+ --fill-success-weak-hover: oklch(from var(--green-100) calc(l * 0.975) calc(c * 0.85) h / 0.2);
543
+ --fill-success-weak-disabled: oklch(from var(--green-100) calc(l * 1.07) calc(c * 0.85) h / 0.2);
544
+
545
+ --fill-success-outlined: transparent;
546
+ --fill-success-outlined-hover: oklch(from var(--green-300) calc(l * 0.975) calc(c * 0.85) h / 0.2);
547
+ --fill-success-outlined-disabled: oklch(from var(--green-300) calc(l * 1.07) calc(c * 0.85) h / 0.2);
336
548
 
337
- --text-on-success: white;
338
- --text-on-success-disabled: oklch(from white calc(l * 0.85) calc(c * 0.85) h);
339
- --text-success-strong: var(--green-500);
340
- --text-success-weak: var(--green-400);
341
- --text-success-disabled: oklch(from var(--green-500) calc(l * 0.8) calc(c * 0.8) h);
549
+ --fill-success-text: transparent;
550
+ --fill-success-text-hover: oklch(from var(--green-300) calc(l * 0.975) calc(c * 0.85) h / 0.1);
551
+ --fill-success-text-disabled: oklch(from var(--green-300) calc(l * 1.07) calc(c * 0.85) h / 0.1);
342
552
 
343
- --stroke-success: var(--green-500);
344
- --stroke-success-hover: oklch(from var(--green-500) calc(l * 1.1) c h);
345
- --stroke-success-disabled: oklch(from var(--green-500) calc(l * 0.8) calc(c * 0.8) h);
553
+ /* Text tokens - for text/icons on top of fills */
554
+ --text-on-success-strong: white;
555
+ --text-on-success-strong-hover: oklch(from white calc(l * 0.9) calc(c * 0.85) h);
556
+ --text-on-success-strong-disabled: oklch(from white calc(l * 0.9) calc(c * 0.85) h);
557
+
558
+ --text-on-success-weak: var(--green-400);
559
+ --text-on-success-weak-hover: oklch(from var(--green-400) calc(l * 0.7) c h);
560
+ --text-on-success-weak-disabled: oklch(from var(--green-400) calc(l * 0.7) c h);
561
+
562
+ --text-on-success-outlined: oklch(from var(--green-200) calc(l * 0.7) c h);
563
+ --text-on-success-outlined-hover: oklch(from var(--green-200) calc(l * 0.7) c h);
564
+ --text-on-success-outlined-disabled: oklch(from var(--green-200) calc(l * 0.7) c h);
565
+
566
+ --text-success: var(--green-300);
567
+ --text-success-weak: oklch(from var(--green-300) calc(l * 0.7) c h);
568
+ --text-success-hover: oklch(from var(--green-300) calc(l * 0.7) c h);
569
+ --text-success-disabled: oklch(from var(--green-300) calc(l * 1.5) calc(c * 0.5) h);
346
570
 
347
571
  --ring-success: var(--green-400);
348
572
 
@@ -353,22 +577,44 @@
353
577
 
354
578
  /* INFO INTENT TOKENS (Dark Mode)
355
579
  ----------------------------------------------------------------- */
580
+ /* Fill tokens - for filled variant */
356
581
  --fill-info-strong: var(--blue-400);
357
582
  --fill-info-strong-hover: oklch(from var(--blue-400) calc(l * 0.9) c h);
358
- --fill-info-strong-disabled: oklch(from var(--blue-400) calc(l * 0.85) calc(c * 0.85) h);
359
- --fill-info-weak: oklch(from var(--blue-400) calc(l * 0.55) calc(c * 0.5) h / 0.5);
360
- --fill-info-weak-hover: oklch(from var(--blue-400) calc(l * 0.5) calc(c * 0.5) h / 0.5);
361
- --fill-info-weak-disabled: oklch(from var(--blue-400) calc(l * 0.5) calc(c * 0.5) h / 0.5);
583
+ --fill-info-strong-disabled: oklch(from var(--blue-400) calc(l * 1.1) calc(c * 0.85) h);
362
584
 
363
- --text-on-info: white;
364
- --text-on-info-disabled: oklch(from white calc(l * 0.85) calc(c * 0.85) h);
365
- --text-info-strong: var(--blue-300);
366
- --text-info-weak: var(--blue-300);
367
- --text-info-disabled: oklch(from var(--blue-300) calc(l * 0.8) calc(c * 0.8) h);
585
+ --fill-info-weak: oklch(from var(--blue-400) calc(l * 1.75) calc(c * 0.9) h / 0.2);
586
+ --fill-info-weak-hover: oklch(from var(--blue-400) calc(l * 1.7) calc(c * 0.9) h / 0.2);
587
+ --fill-info-weak-disabled: oklch(from var(--blue-400) calc(l * 1.8) calc(c * 0.9) h / 0.2);
368
588
 
369
- --stroke-info: var(--blue-500);
370
- --stroke-info-hover: oklch(from var(--blue-500) calc(l * 1.1) c h);
371
- --stroke-info-disabled: oklch(from var(--blue-500) calc(l * 0.8) calc(c * 0.8) h);
589
+ --fill-info-outlined: transparent;
590
+ --fill-info-outlined-hover: oklch(from var(--blue-400) calc(l * 1.1) calc(c * 0.9) h / 0.2);
591
+ --fill-info-outlined-disabled: oklch(from var(--blue-400) calc(l * 1.1) calc(c * 0.9) h / 0.2);
592
+
593
+ --fill-info-text: transparent;
594
+ --fill-info-text-hover: oklch(from var(--blue-400) calc(l * 1.1) calc(c * 0.9) h / 0.2);
595
+ --fill-info-text-disabled: oklch(from var(--blue-400) calc(l * 1.1) calc(c * 0.9) h / 0.2);
596
+
597
+ /* Text tokens - for text/icons on top of fills */
598
+ --text-on-info-strong: white;
599
+ --text-on-info-strong-hover: oklch(from white calc(l * 0.9) calc(c * 0.85) h);
600
+ --text-on-info-strong-disabled: oklch(from white calc(l * 0.9) calc(c * 0.85) h);
601
+
602
+ --text-on-info-weak: var(--blue-200);
603
+ --text-on-info-weak-hover: oklch(from var(--blue-400) calc(l * 0.7) c h);
604
+ --text-on-info-weak-disabled: oklch(from var(--blue-400) calc(l * 0.7) c h);
605
+
606
+ --text-on-info-outlined: var(--blue-200);
607
+ --text-on-info-outlined-hover: oklch(from var(--blue-400) calc(l * 0.7) c h);
608
+ --text-on-info-outlined-disabled: oklch(from var(--blue-400) calc(l * 0.7) c h);
609
+
610
+ --text-info: var(--blue-200);
611
+ --text-info-weak: oklch(from var(--blue-200) calc(l * 0.7) c h);
612
+ --text-info-hover: oklch(from var(--blue-200) calc(l * 0.7) c h);
613
+ --text-info-disabled: oklch(from var(--blue-200) calc(l * 1.5) calc(c * 0.5) h);
614
+
615
+ --stroke-info: var(--blue-400);
616
+ --stroke-info-hover: oklch(from var(--blue-400) calc(l * 1.1) c h);
617
+ --stroke-info-disabled: oklch(from var(--blue-400) calc(l * 0.8) calc(c * 0.8) h);
372
618
 
373
619
  --ring-info: var(--blue-400);
374
620
 
@@ -379,18 +625,40 @@
379
625
 
380
626
  /* WARNING INTENT TOKENS (Dark Mode)
381
627
  ----------------------------------------------------------------- */
628
+ /* Fill tokens - for filled variant */
382
629
  --fill-warning-strong: var(--yellow-300);
383
- --fill-warning-strong-hover: oklch(from var(--yellow-300) calc(l * 0.95) c h);
384
- --fill-warning-strong-disabled: oklch(from var(--yellow-300) calc(l * 0.85) calc(c * 0.85) h);
385
- --fill-warning-weak: oklch(from var(--yellow-300) calc(l * 0.45) calc(c * 0.5) h / 0.5);
386
- --fill-warning-weak-hover: oklch(from var(--yellow-300) calc(l * 0.4) calc(c * 0.5) h / 0.5);
387
- --fill-warning-weak-disabled: oklch(from var(--yellow-300) calc(l * 0.4) calc(c * 0.5) h / 0.5);
630
+ --fill-warning-strong-hover: oklch(from var(--yellow-300) calc(l * 0.875) c h);
631
+ --fill-warning-strong-disabled: oklch(from var(--yellow-300) calc(l * 1.1) calc(c * 0.85) h);
632
+
633
+ --fill-warning-weak: oklch(from var(--yellow-300) calc(l * 1.5) calc(c * 0.8) h / 0.2);
634
+ --fill-warning-weak-hover: oklch(from var(--yellow-300) calc(l * 1.15) calc(c * 0.8) h / 0.2);
635
+ --fill-warning-weak-disabled: oklch(from var(--yellow-300) calc(l * 1.8) calc(c * 0.8) h / 0.2);
636
+
637
+ --fill-warning-outlined: transparent;
638
+ --fill-warning-outlined-hover: oklch(from var(--yellow-300) calc(l * 1.15) calc(c * 0.8) h / 0.1);
639
+ --fill-warning-outlined-disabled: oklch(from var(--yellow-300) calc(l * 1.8) calc(c * 0.8) h / 0.1);
388
640
 
389
- --text-on-warning: black;
390
- --text-on-warning-disabled: oklch(from black calc(l * 0.85) calc(c * 0.85) h);
391
- --text-warning-strong: var(--yellow-500);
392
- --text-warning-weak: var(--yellow-300);
393
- --text-warning-disabled: oklch(from var(--yellow-500) calc(l * 0.8) calc(c * 0.8) h);
641
+ --fill-warning-text: transparent;
642
+ --fill-warning-text-hover: oklch(from var(--yellow-300) calc(l * 1.15) calc(c * 0.8) h / 0.1);
643
+ --fill-warning-text-disabled: oklch(from var(--yellow-300) calc(l * 1.8) calc(c * 0.8) h / 0.1);
644
+
645
+ /* Text tokens - for text/icons on top of fills */
646
+ --text-on-warning-strong: black;
647
+ --text-on-warning-strong-hover: oklch(from black calc(l * 0.9) calc(c * 0.85) h);
648
+ --text-on-warning-strong-disabled: oklch(from black calc(l * 0.9) calc(c * 0.85) h);
649
+
650
+ --text-on-warning-weak: var(--yellow-400);
651
+ --text-on-warning-weak-hover: oklch(from var(--yellow-400) calc(l * 0.9) calc(c * 0.85) h);
652
+ --text-on-warning-weak-disabled: oklch(from var(--yellow-400) calc(l * 0.9) calc(c * 0.85) h);
653
+
654
+ --text-on-warning-outlined: var(--yellow-400);
655
+ --text-on-warning-outlined-hover: oklch(from var(--yellow-400) calc(l * 0.9) calc(c * 0.85) h);
656
+ --text-on-warning-outlined-disabled: oklch(from var(--yellow-400) calc(l * 0.9) calc(c * 0.85) h);
657
+
658
+ --text-warning: var(--yellow-400);
659
+ --text-warning-weak: oklch(from var(--yellow-300) calc(l * 0.6) c h);
660
+ --text-warning-hover: oklch(from var(--yellow-300) calc(l * 0.6) c h);
661
+ --text-warning-disabled: oklch(from var(--yellow-700) calc(l * 1.5) calc(c * 0.5) h);
394
662
 
395
663
  --stroke-warning: var(--yellow-500);
396
664
  --stroke-warning-hover: oklch(from var(--yellow-500) calc(l * 1.1) c h);
@@ -405,22 +673,40 @@
405
673
 
406
674
  /* DANGER INTENT TOKENS (Dark Mode)
407
675
  ----------------------------------------------------------------- */
676
+
677
+ /* Fill tokens - for filled variant */
408
678
  --fill-danger-strong: var(--red-400);
409
679
  --fill-danger-strong-hover: oklch(from var(--red-400) calc(l * 0.9) c h);
410
- --fill-danger-strong-disabled: oklch(from var(--red-400) calc(l * 0.85) calc(c * 0.85) h);
411
- --fill-danger-weak: oklch(from var(--red-400) calc(l * 0.45) calc(c * 0.5) h / 0.5);
412
- --fill-danger-weak-hover: oklch(from var(--red-400) calc(l * 0.4) calc(c * 0.5) h / 0.5);
413
- --fill-danger-weak-disabled: oklch(from var(--red-400) calc(l * 0.4) calc(c * 0.5) h / 0.5);
680
+ --fill-danger-strong-disabled: oklch(from var(--red-400) calc(l * 1.1) calc(c * 0.85) h);
414
681
 
415
- --text-on-danger: white;
416
- --text-on-danger-disabled: oklch(from white calc(l * 0.85) calc(c * 0.85) h);
417
- --text-danger-strong: var(--red-500);
418
- --text-danger-weak: var(--red-400);
419
- --text-danger-disabled: oklch(from var(--red-500) calc(l * 0.8) calc(c * 0.8) h);
682
+ --fill-danger-weak: oklch(from var(--red-400) calc(l * 1.75) calc(c * 0.9) h / 0.2);
683
+ --fill-danger-weak-hover: oklch(from var(--red-400) calc(l * 1.65) calc(c * 0.9) h / 0.2);
684
+ --fill-danger-weak-disabled: oklch(from var(--red-400) calc(l * 1.65) calc(c * 0.9) h / 0.2);
420
685
 
421
- --stroke-danger: var(--red-500);
422
- --stroke-danger-hover: oklch(from var(--red-500) calc(l * 1.1) c h);
423
- --stroke-danger-disabled: oklch(from var(--red-500) calc(l * 0.8) calc(c * 0.8) h);
686
+ --fill-danger-outlined: transparent;
687
+ --fill-danger-outlined-hover: oklch(from var(--red-300) calc(l * 1.65) c h / 0.1);
688
+ --fill-danger-outlined-disabled: oklch(from var(--red-300) calc(l * 1.65) c h / 0.1);
689
+
690
+ --fill-danger-text: transparent;
691
+ --fill-danger-text-hover: oklch(from var(--red-300) calc(l * 1.65) c h / 0.1);
692
+ --fill-danger-text-disabled: oklch(from var(--red-300) calc(l * 1.65) c h / 0.1);
693
+
694
+ /* Text tokens - for text/icons on top of fills */
695
+ --text-on-danger-strong: white;
696
+ --text-on-danger-strong-hover: oklch(from white calc(l * 0.9) calc(c * 0.85) h);
697
+ --text-on-danger-strong-disabled: oklch(from white calc(l * 0.9) calc(c * 0.85) h);
698
+
699
+ --text-on-danger-weak: oklch(from var(--red-100) calc(l * 0.7) c h);
700
+ --text-on-danger-weak-hover: oklch(from var(--red-100) calc(l * 0.7) c h);
701
+ --text-on-danger-weak-disabled: oklch(from var(--red-100) calc(l * 0.7) c h);
702
+
703
+ --text-on-danger-outlined: var(--red-400);
704
+ --text-on-danger-outlined-hover: oklch(from var(--red-400) calc(l * 0.7) c h);
705
+ --text-on-danger-outlined-disabled: oklch(from var(--red-400) calc(l * 0.7) c h);
706
+
707
+ --text-danger: var(--red-400);
708
+ --text-danger-weak: oklch(from var(--red-400) calc(l * 0.7) c h);
709
+ --text-danger-disabled: oklch(from var(--red-500) calc(l * 1.5) calc(c * 0.5) h);
424
710
 
425
711
  --ring-danger: var(--red-400);
426
712
 
@@ -441,20 +727,40 @@
441
727
  /* PRIMARY INTENT TOKENS
442
728
  ----------------------------------------------------------------- */
443
729
 
444
- /* Fill tokens - for solid backgrounds (filled variant) */
730
+ /* Fill tokens - for filled variant */
445
731
  --fill-primary-strong: var(--primary-500);
446
732
  --fill-primary-strong-hover: oklch(from var(--primary-500) calc(l * 0.9) c h);
447
733
  --fill-primary-strong-disabled: oklch(from var(--primary-500) calc(l * 1.1) calc(c * 0.85) h);
734
+
448
735
  --fill-primary-weak: oklch(from var(--primary-500) calc(l * 2.04) calc(c * 0.2) h / 0.7);
449
736
  --fill-primary-weak-hover: oklch(from var(--primary-500) calc(l * 2) calc(c * 0.2) h / 0.7);
450
737
  --fill-primary-weak-disabled: oklch(from var(--primary-500) calc(l * 2) calc(c * 0.2) h / 0.7);
451
738
 
452
- --text-on-primary: white;
453
- --text-on-primary-disabled: oklch(from white calc(l * 0.9) calc(c * 0.85) h);
454
- --text-primary-strong: var(--primary-600);
739
+ --fill-primary-outlined: transparent;
740
+ --fill-primary-outlined-hover: oklch(from var(--primary-500) calc(l * 2) calc(c * 0.2) h / 0.7);
741
+ --fill-primary-outlined-disabled: oklch(from var(--primary-500) calc(l * 2) calc(c * 0.2) h / 0.7);
742
+
743
+ --fill-primary-text: transparent;
744
+ --fill-primary-text-hover: oklch(from var(--primary-500) calc(l * 2) calc(c * 0.2) h / 0.7);
745
+ --fill-primary-text-disabled: oklch(from var(--primary-500) calc(l * 2) calc(c * 0.2) h / 0.7);
746
+
747
+ /* Text tokens - for text/icons on top of fills */
748
+ --text-on-primary-strong: white;
749
+ --text-on-primary-strong-hover: var(--primary-600);
750
+ --text-on-primary-strong-disabled: oklch(from white calc(l * 0.9) calc(c * 0.85) h);
751
+
752
+ --text-on-primary-weak: oklch(from var(--primary-500) calc(l * 0.7) c h);
753
+ --text-on-primary-weak-hover: oklch(from var(--primary-600) calc(l * 1.5) calc(c * 0.5) h);
754
+ --text-on-primary-weak-disabled: oklch(from var(--primary-600) calc(l * 1.5) calc(c * 0.5) h);
755
+
756
+ --text-on-primary-outlined: oklch(from var(--primary-500) calc(l * 0.7) c h);
757
+ --text-on-primary-outlined-hover: oklch(from var(--primary-600) calc(l * 1.5) calc(c * 0.5) h);
758
+ --text-on-primary-outlined-disabled: oklch(from var(--primary-600) calc(l * 1.5) calc(c * 0.5) h);
759
+
760
+ --text-primary: var(--primary-500);
455
761
  --text-primary-weak: oklch(from var(--primary-500) calc(l * 0.7) c h);
456
- --text-primary-disabled: oklch(from var(--primary-600) calc(l * 1.5) calc(c * 0.5) h);
457
- --text-primary-weak-disabled: oklch(from var(--primary-600) calc(l * 1.5) calc(c * 0.5) h);
762
+ --text-primary-hover: oklch(from var(--primary-500) calc(l * 0.7) c h);
763
+ --text-primary-disabled: oklch(from var(--primary-500) calc(l * 1.5) calc(c * 0.5) h);
458
764
 
459
765
  /* Stroke tokens - for borders */
460
766
  --stroke-primary: var(--primary-600);
@@ -472,23 +778,41 @@
472
778
 
473
779
  /* SECONDARY INTENT TOKENS
474
780
  ----------------------------------------------------------------- */
781
+
782
+ /* Fill tokens - for filled variant */
475
783
  --fill-secondary-strong: var(--secondary-500);
476
784
  --fill-secondary-strong-hover: oklch(from var(--secondary-500) calc(l * 0.95) c h);
477
- --fill-secondary-strong-disabled: oklch(
478
- from var(--secondary-500) calc(l * 1.1) calc(c * 0.85) h
479
- );
480
- --fill-secondary-weak: oklch(from var(--secondary-500) calc(l * 1.6) calc(c * 0.4) h / 0.7);
481
- --fill-secondary-weak-hover: oklch(from var(--secondary-500) calc(l * 2) calc(c * 0.4) h / 0.7);
482
- --fill-secondary-weak-disabled: oklch(
483
- from var(--secondary-500) calc(l * 2) calc(c * 0.4) c h /
484
- 0.7
485
- );
486
-
487
- --text-on-secondary: black;
488
- --text-on-secondary-disabled: oklch(from black calc(l * 0.9) calc(c * 0.85) h);
489
- --text-secondary-strong: var(--secondary-950);
785
+ --fill-secondary-strong-disabled: oklch(from var(--secondary-500) calc(l * 1.1) calc(c * 0.85) h);
786
+
787
+ --fill-secondary-weak: oklch(from var(--secondary-500) calc(l * 1.6) calc(c * 0.4) h / 0.5);
788
+ --fill-secondary-weak-hover: oklch(from var(--secondary-500) calc(l * 2) calc(c * 0.4) h / 0.5);
789
+ --fill-secondary-weak-disabled: oklch(from var(--secondary-500) calc(l * 2) calc(c * 0.4) c h / 0.5);
790
+
791
+ --fill-secondary-outlined: transparent;
792
+ --fill-secondary-outlined-hover: oklch(from var(--secondary-500) calc(l * 2) calc(c * 0.4) h / 0.7);
793
+ --fill-secondary-outlined-disabled: oklch(from var(--secondary-500) calc(l * 2) calc(c * 0.4) c h / 0.7);
794
+
795
+ --fill-secondary-text: transparent;
796
+ --fill-secondary-text-hover: oklch(from var(--secondary-500) calc(l * 2) calc(c * 0.4) h / 0.7);
797
+ --fill-secondary-text-disabled: oklch(from var(--secondary-500) calc(l * 2) calc(c * 0.4) c h / 0.7);
798
+
799
+ /* Text tokens - for text/icons on top of fills */
800
+ --text-on-secondary-strong: black;
801
+ --text-on-secondary-strong-disabled: oklch(from black calc(l * 0.9) calc(c * 0.85) h);
802
+ --text-on-secondary-strong-hover: oklch(from black calc(l * 0.9) calc(c * 0.85) h);
803
+
804
+ --text-on-secondary-weak: oklch(from var(--secondary-500) calc(l * 0.7) c h);
805
+ --text-on-secondary-weak-hover: oklch(from var(--secondary-950) calc(l * 1.5) calc(c * 0.5) h);
806
+ --text-on-secondary-weak-disabled: oklch(from var(--secondary-950) calc(l * 1.5) calc(c * 0.5) h);
807
+
808
+ --text-on-secondary-outlined: oklch(from var(--secondary-500) calc(l * 0.7) c h);
809
+ --text-on-secondary-outlined-hover: oklch(from var(--secondary-950) calc(l * 1.5) calc(c * 0.5) h);
810
+ --text-on-secondary-outlined-disabled: oklch(from var(--secondary-950) calc(l * 1.5) calc(c * 0.5) h);
811
+
812
+ --text-secondary: var(--secondary-500);
490
813
  --text-secondary-weak: oklch(from var(--secondary-500) calc(l * 0.7) c h);
491
- --text-secondary-disabled: oklch(from var(--secondary-950) calc(l * 1.5) calc(c * 0.5) h);
814
+ --text-secondary-hover: oklch(from var(--secondary-500) calc(l * 0.7) c h);
815
+ --text-secondary-disabled: oklch(from var(--secondary-500) calc(l * 1.5) calc(c * 0.5) h);
492
816
 
493
817
  --stroke-secondary: var(--secondary-700);
494
818
  --stroke-secondary-hover: oklch(from var(--secondary-700) calc(l * 0.85) c h);
@@ -503,18 +827,40 @@
503
827
 
504
828
  /* NOEFFECT INTENT TOKENS (neutral/gray)
505
829
  ----------------------------------------------------------------- */
830
+ /* Fill tokens - for filled variant */
506
831
  --fill-noeffect-strong: var(--gray-100);
507
832
  --fill-noeffect-strong-hover: oklch(from var(--gray-100) calc(l * 0.95) c h);
508
833
  --fill-noeffect-strong-disabled: oklch(from var(--gray-100) calc(l * 1.1) calc(c * 0.85) h);
834
+
509
835
  --fill-noeffect-weak: oklch(from var(--gray-100) calc(l * 1.07) c h / 0.7);
510
836
  --fill-noeffect-weak-hover: oklch(from var(--gray-100) calc(l * 1.05) c h / 0.7);
511
837
  --fill-noeffect-weak-disabled: oklch(from var(--gray-100) calc(l * 1.07) c h / 0.7);
512
838
 
513
- --text-on-noeffect: black;
514
- --text-on-noeffect-disabled: oklch(from black calc(l * 0.9) calc(c * 0.85) h);
515
- --text-noeffect-strong: var(--gray-800);
516
- --text-noeffect-weak: oklch(from var(--gray-100) calc(l * 0.5) c h);
517
- --text-noeffect-disabled: oklch(from var(--gray-800) calc(l * 1.5) calc(c * 0.5) h);
839
+ --fill-noeffect-outlined: transparent;
840
+ --fill-noeffect-outlined-hover: oklch(from var(--gray-100) calc(l * 1.05) c h / 0.7);
841
+ --fill-noeffect-outlined-disabled: oklch(from var(--gray-100) calc(l * 1.07) c h / 0.7);
842
+
843
+ /* Text tokens - for text/icons on top of fills */
844
+ --text-on-noeffect-strong: black;
845
+ --text-on-noeffect-strong-hover: oklch(from black calc(l * 0.9) calc(c * 0.85) h);
846
+ --text-on-noeffect-strong-disabled: oklch(from black calc(l * 0.9) calc(c * 0.85) h);
847
+
848
+ --text-on-noeffect-weak: oklch(from var(--gray-100) calc(l * 0.5) c h);
849
+ --text-on-noeffect-weak-hover: oklch(from var(--gray-800) calc(l * 1.5) calc(c * 0.5) h);
850
+ --text-on-noeffect-weak-disabled: oklch(from var(--gray-800) calc(l * 1.5) calc(c * 0.5) h);
851
+
852
+ --text-on-noeffect-outlined: oklch(from var(--gray-100) calc(l * 0.5) c h);
853
+ --text-on-noeffect-outlined-hover: oklch(from var(--gray-800) calc(l * 1.5) calc(c * 0.5) h);
854
+ --text-on-noeffect-outlined-disabled: oklch(from var(--gray-800) calc(l * 1.5) calc(c * 0.5) h);
855
+
856
+ --text-on-noeffect-text: oklch(from var(--gray-100) calc(l * 0.5) c h);
857
+ --text-on-noeffect-text-hover: oklch(from var(--gray-800) calc(l * 1.5) calc(c * 0.5) h);
858
+ --text-on-noeffect-text-disabled: oklch(from var(--gray-800) calc(l * 1.5) calc(c * 0.5) h);
859
+
860
+ --text-noeffect: var(--gray-600);
861
+ --text-noeffect-weak: oklch(from var(--gray-400) calc(l * 0.7) c h);
862
+ --text-noeffect-hover: oklch(from var(--gray-400) calc(l * 0.7) c h);
863
+ --text-noeffect-disabled: oklch(from var(--gray-600) calc(l * 1.5) calc(c * 0.5) h);
518
864
 
519
865
  --stroke-noeffect: var(--gray-500);
520
866
  --stroke-noeffect-hover: oklch(from var(--gray-500) calc(l * 0.75) c h);
@@ -530,20 +876,39 @@
530
876
 
531
877
  /* SUCCESS INTENT TOKENS
532
878
  ----------------------------------------------------------------- */
879
+ /* Fill tokens - for filled variant */
533
880
  --fill-success-strong: var(--green-400);
534
881
  --fill-success-strong-hover: oklch(from var(--green-400) calc(l * 0.9) c h);
535
882
  --fill-success-strong-disabled: oklch(from var(--green-400) calc(l * 1.1) calc(c * 0.85) h);
883
+
536
884
  --fill-success-weak: oklch(from var(--green-100) calc(l * 1.09) calc(c * 0.85) h / 0.7);
537
885
  --fill-success-weak-hover: oklch(from var(--green-100) calc(l * 0.975) calc(c * 0.85) h / 0.7);
538
- --fill-success-weak-disabled: oklch(
539
- from var(--green-100) calc(l * 1.07) calc(c * 0.85) h /
540
- 0.7
541
- );
542
-
543
- --text-on-success: white;
544
- --text-on-success-disabled: oklch(from white calc(l * 0.9) calc(c * 0.85) h);
545
- --text-success-strong: var(--green-600);
886
+ --fill-success-weak-disabled: oklch(from var(--green-100) calc(l * 1.07) calc(c * 0.85) h / 0.7);
887
+
888
+ --fill-success-outlined: transparent;
889
+ --fill-success-outlined-hover: oklch(from var(--green-100) calc(l * 0.975) calc(c * 0.85) h / 0.7);
890
+ --fill-success-outlined-disabled: oklch(from var(--green-100) calc(l * 1.07) calc(c * 0.85) h / 0.7);
891
+
892
+ --fill-success-text: transparent;
893
+ --fill-success-text-hover: oklch(from var(--green-100) calc(l * 0.975) calc(c * 0.85) h / 0.7);
894
+ --fill-success-text-disabled: oklch(from var(--green-100) calc(l * 1.07) calc(c * 0.85) h / 0.7);
895
+
896
+ /* Text tokens - for text/icons on top of fills */
897
+ --text-on-success-strong: white;
898
+ --text-on-success-strong-hover: oklch(from white calc(l * 0.9) calc(c * 0.85) h);
899
+ --text-on-success-strong-disabled: oklch(from white calc(l * 0.9) calc(c * 0.85) h);
900
+
901
+ --text-on-success-weak: oklch(from var(--green-400) calc(l * 0.7) c h);
902
+ --text-on-success-weak-hover: oklch(from var(--green-400) calc(l * 0.7) c h);
903
+ --text-on-success-weak-disabled: oklch(from var(--green-400) calc(l * 0.7) c h);
904
+
905
+ --text-on-success-outlined: oklch(from var(--green-400) calc(l * 0.7) c h);
906
+ --text-on-success-outlined-hover: oklch(from var(--green-400) calc(l * 0.7) c h);
907
+ --text-on-success-outlined-disabled: oklch(from var(--green-400) calc(l * 0.7) c h);
908
+
909
+ --text-success: var(--green-600);
546
910
  --text-success-weak: oklch(from var(--green-400) calc(l * 0.7) c h);
911
+ --text-success-hover: oklch(from var(--green-400) calc(l * 0.7) c h);
547
912
  --text-success-disabled: oklch(from var(--green-600) calc(l * 1.5) calc(c * 0.5) h);
548
913
 
549
914
  --stroke-success: var(--green-600);
@@ -559,17 +924,40 @@
559
924
 
560
925
  /* INFO INTENT TOKENS
561
926
  ----------------------------------------------------------------- */
927
+
928
+ /* Fill tokens - for filled variant */
562
929
  --fill-info-strong: var(--blue-400);
563
930
  --fill-info-strong-hover: oklch(from var(--blue-400) calc(l * 0.9) c h);
564
931
  --fill-info-strong-disabled: oklch(from var(--blue-400) calc(l * 1.1) calc(c * 0.85) h);
932
+
565
933
  --fill-info-weak: oklch(from var(--blue-400) calc(l * 1.75) calc(c * 0.2) h / 0.7);
566
934
  --fill-info-weak-hover: oklch(from var(--blue-400) calc(l * 1.7) calc(c * 0.2) h / 0.7);
567
935
  --fill-info-weak-disabled: oklch(from var(--blue-400) calc(l * 1.8) calc(c * 0.2) h / 0.7);
568
936
 
569
- --text-on-info: white;
570
- --text-on-info-disabled: oklch(from white calc(l * 0.9) calc(c * 0.85) h);
571
- --text-info-strong: var(--blue-300);
937
+ --fill-info-outlined: transparent;
938
+ --fill-info-outlined-hover: oklch(from var(--blue-400) calc(l * 1.7) calc(c * 0.2) h / 0.7);
939
+ --fill-info-outlined-disabled: oklch(from var(--blue-400) calc(l * 1.8) calc(c * 0.2) h / 0.7);
940
+
941
+ --fill-info-text: transparent;
942
+ --fill-info-text-hover: oklch(from var(--blue-400) calc(l * 1.7) calc(c * 0.2) h / 0.7);
943
+ --fill-info-text-disabled: oklch(from var(--blue-400) calc(l * 1.8) calc(c * 0.2) h / 0.7);
944
+
945
+ /* Text tokens - for text/icons on top of fills */
946
+ --text-on-info-strong: white;
947
+ --text-on-info-strong-hover: oklch(from white calc(l * 0.9) calc(c * 0.85) h);
948
+ --text-on-info-strong-disabled: oklch(from white calc(l * 0.9) calc(c * 0.85) h);
949
+
950
+ --text-on-info-weak: oklch(from var(--blue-400) calc(l * 0.7) c h);
951
+ --text-on-info-weak-hover: oklch(from var(--blue-400) calc(l * 0.7) c h);
952
+ --text-on-info-weak-disabled: oklch(from var(--blue-400) calc(l * 0.7) c h);
953
+
954
+ --text-on-info-outlined: oklch(from var(--blue-400) calc(l * 0.7) c h);
955
+ --text-on-info-outlined-hover: oklch(from var(--blue-400) calc(l * 0.7) c h);
956
+ --text-on-info-outlined-disabled: oklch(from var(--blue-400) calc(l * 0.7) c h);
957
+
958
+ --text-info: var(--blue-300);
572
959
  --text-info-weak: oklch(from var(--blue-400) calc(l * 0.7) c h);
960
+ --text-info-hover: oklch(from var(--blue-400) calc(l * 0.7) c h);
573
961
  --text-info-disabled: oklch(from var(--blue-300) calc(l * 1.5) calc(c * 0.5) h);
574
962
 
575
963
  --stroke-info: var(--blue-500);
@@ -585,17 +973,39 @@
585
973
 
586
974
  /* WARNING INTENT TOKENS
587
975
  ----------------------------------------------------------------- */
976
+ /* Fill tokens - for filled variant */
588
977
  --fill-warning-strong: var(--yellow-300);
589
978
  --fill-warning-strong-hover: oklch(from var(--yellow-300) calc(l * 0.95) c h);
590
979
  --fill-warning-strong-disabled: oklch(from var(--yellow-300) calc(l * 1.1) calc(c * 0.85) h);
980
+
591
981
  --fill-warning-weak: oklch(from var(--yellow-300) calc(l * 1.5) calc(c * 0.5) h / 0.7);
592
982
  --fill-warning-weak-hover: oklch(from var(--yellow-300) calc(l * 1.15) calc(c * 0.5) h / 0.7);
593
983
  --fill-warning-weak-disabled: oklch(from var(--yellow-300) calc(l * 1.8) calc(c * 0.5) h / 0.7);
594
984
 
595
- --text-on-warning: black;
596
- --text-on-warning-disabled: oklch(from black calc(l * 0.9) calc(c * 0.85) h);
597
- --text-warning-strong: var(--yellow-700);
985
+ --fill-warning-outlined: transparent;
986
+ --fill-warning-outlined-hover: oklch(from var(--yellow-300) calc(l * 1.15) calc(c * 0.5) h / 0.7);
987
+ --fill-warning-outlined-disabled: oklch(from var(--yellow-300) calc(l * 1.8) calc(c * 0.5) h / 0.7);
988
+
989
+ --fill-warning-text: transparent;
990
+ --fill-warning-text-hover: oklch(from var(--yellow-300) calc(l * 1.15) calc(c * 0.5) h / 0.7);
991
+ --fill-warning-text-disabled: oklch(from var(--yellow-300) calc(l * 1.8) calc(c * 0.5) h / 0.7);
992
+
993
+ /* Text tokens - for text/icons on top of fills */
994
+ --text-on-warning-strong: black;
995
+ --text-on-warning-strong-hover: oklch(from black calc(l * 0.9) calc(c * 0.85) h);
996
+ --text-on-warning-strong-disabled: oklch(from black calc(l * 0.9) calc(c * 0.85) h);
997
+
998
+ --text-on-warning-weak: black;
999
+ --text-on-warning-weak-hover: oklch(from black calc(l * 0.9) calc(c * 0.85) h);
1000
+ --text-on-warning-weak-disabled: oklch(from black calc(l * 0.9) calc(c * 0.85) h);
1001
+
1002
+ --text-on-warning-outlined: black;
1003
+ --text-on-warning-outlined-hover: oklch(from black calc(l * 0.9) calc(c * 0.85) h);
1004
+ --text-on-warning-outlined-disabled: oklch(from black calc(l * 0.9) calc(c * 0.85) h);
1005
+
1006
+ --text-warning: var(--yellow-700);
598
1007
  --text-warning-weak: oklch(from var(--yellow-300) calc(l * 0.6) c h);
1008
+ --text-warning-hover: oklch(from var(--yellow-300) calc(l * 0.6) c h);
599
1009
  --text-warning-disabled: oklch(from var(--yellow-700) calc(l * 1.5) calc(c * 0.5) h);
600
1010
 
601
1011
  --stroke-warning: var(--yellow-500);
@@ -611,17 +1021,40 @@
611
1021
 
612
1022
  /* DANGER INTENT TOKENS
613
1023
  ----------------------------------------------------------------- */
1024
+
1025
+ /* Fill tokens - for filled variant */
614
1026
  --fill-danger-strong: var(--red-400);
615
1027
  --fill-danger-strong-hover: oklch(from var(--red-400) calc(l * 0.9) c h);
616
1028
  --fill-danger-strong-disabled: oklch(from var(--red-400) calc(l * 1.1) calc(c * 0.85) h);
1029
+
617
1030
  --fill-danger-weak: oklch(from var(--red-300) calc(l * 1.75) calc(c * 0.5) h / 0.7);
618
1031
  --fill-danger-weak-hover: oklch(from var(--red-300) calc(l * 1.65) calc(c * 0.5) h / 0.7);
619
1032
  --fill-danger-weak-disabled: oklch(from var(--red-300) calc(l * 1.65) calc(c * 0.5) h / 0.7);
620
1033
 
621
- --text-on-danger: white;
622
- --text-on-danger-disabled: oklch(from white calc(l * 0.9) calc(c * 0.85) h);
623
- --text-danger-strong: var(--red-500);
1034
+ --fill-danger-outlined: transparent;
1035
+ --fill-danger-outlined-hover: oklch(from var(--red-300) calc(l * 1.65) calc(c * 0.5) h / 0.7);
1036
+ --fill-danger-outlined-disabled: oklch(from var(--red-300) calc(l * 1.65) calc(c * 0.5) h / 0.7);
1037
+
1038
+ --fill-danger-text: transparent;
1039
+ --fill-danger-text-hover: oklch(from var(--red-300) calc(l * 1.65) calc(c * 0.5) h / 0.7);
1040
+ --fill-danger-text-disabled: oklch(from var(--red-300) calc(l * 1.65) calc(c * 0.5) h / 0.7);
1041
+
1042
+ /* Text tokens - for text/icons on top of fills */
1043
+ --text-on-danger-strong: white;
1044
+ --text-on-danger-strong-hover: oklch(from white calc(l * 0.9) calc(c * 0.85) h);
1045
+ --text-on-danger-strong-disabled: oklch(from white calc(l * 0.9) calc(c * 0.85) h);
1046
+
1047
+ --text-on-danger-weak: oklch(from var(--red-400) calc(l * 0.7) c h);
1048
+ --text-on-danger-weak-hover: oklch(from var(--red-400) calc(l * 0.7) c h);
1049
+ --text-on-danger-weak-disabled: oklch(from var(--red-400) calc(l * 0.7) c h);
1050
+
1051
+ --text-on-danger-outlined: oklch(from var(--red-400) calc(l * 0.7) c h);
1052
+ --text-on-danger-outlined-hover: oklch(from var(--red-400) calc(l * 0.7) c h);
1053
+ --text-on-danger-outlined-disabled: oklch(from var(--red-400) calc(l * 0.7) c h);
1054
+
1055
+ --text-danger: var(--red-500);
624
1056
  --text-danger-weak: oklch(from var(--red-400) calc(l * 0.7) c h);
1057
+ --text-danger-hover: oklch(from var(--red-400) calc(l * 0.7) c h);
625
1058
  --text-danger-disabled: oklch(from var(--red-500) calc(l * 1.5) calc(c * 0.5) h);
626
1059
 
627
1060
  --stroke-danger: var(--red-500);
@@ -635,4 +1068,4 @@
635
1068
  --gradient-danger-foreground: white;
636
1069
  --gradient-danger-disabled: oklch(from var(--red-700) calc(l * 1.2) calc(c * 0.85) h);
637
1070
  }
638
- }
1071
+ }