@infonomic/uikit 5.9.0 → 5.10.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.
- package/dist/components/button/@types/button.d.ts +1 -1
- package/dist/components/button/@types/button.d.ts.map +1 -1
- package/dist/components/button/@types/button.js +1 -0
- package/dist/components/button/button.module.css +107 -28
- package/dist/components/button/button.module.js +2 -0
- package/dist/components/button/button_module.css +53 -0
- package/dist/components/chips/@types/chip.d.ts +6 -0
- package/dist/components/chips/@types/chip.d.ts.map +1 -0
- package/dist/components/chips/@types/chip.js +7 -0
- package/dist/components/chips/chip.d.ts +32 -0
- package/dist/components/chips/chip.d.ts.map +1 -0
- package/dist/components/chips/chip.js +97 -0
- package/dist/components/chips/chip.module.css +425 -0
- package/dist/components/chips/chip.module.js +28 -0
- package/dist/components/chips/chip_module.css +319 -0
- package/dist/components/chips/index.js +2 -0
- package/dist/icons/check-icon.js +1 -0
- package/dist/icons/close-icon.d.ts.map +1 -1
- package/dist/icons/close-icon.js +21 -9
- package/dist/icons/icon-element.d.ts.map +1 -1
- package/dist/icons/icon-element.js +1 -4
- package/dist/icons/icons.module.css +8 -0
- package/dist/icons/icons_module.css +8 -0
- package/dist/react.d.ts +1 -0
- package/dist/react.d.ts.map +1 -1
- package/dist/react.js +1 -0
- package/dist/styles/components-vanilla.css +1 -1
- package/dist/styles/styles.css +1 -1
- package/package.json +18 -18
- package/src/components/button/@types/button.ts +1 -1
- package/src/components/button/button-intents.stories.tsx +2 -2
- package/src/components/button/button.module.css +107 -28
- package/src/components/chips/@types/chip.ts +7 -0
- package/src/components/chips/chip.module.css +425 -0
- package/src/components/chips/chip.stories.tsx +108 -0
- package/src/components/chips/chip.tsx +185 -0
- package/src/components/chips/index.ts +2 -0
- package/src/icons/check-icon.tsx +1 -1
- package/src/icons/close-icon.tsx +12 -11
- package/src/icons/icon-element.tsx +1 -4
- package/src/icons/icons.module.css +8 -0
- package/src/react.ts +1 -0
- package/src/styles/functional/colors.css +116 -107
|
@@ -18,37 +18,41 @@
|
|
|
18
18
|
*/
|
|
19
19
|
|
|
20
20
|
@layer infonomic-functional {
|
|
21
|
+
|
|
21
22
|
/* ===================================================================
|
|
22
23
|
LIGHT MODE (default)
|
|
23
24
|
=================================================================== */
|
|
24
25
|
:root {
|
|
25
26
|
/* PRIMARY INTENT TOKENS
|
|
26
27
|
----------------------------------------------------------------- */
|
|
27
|
-
|
|
28
|
+
|
|
28
29
|
/* Fill tokens - for solid backgrounds (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);
|
|
32
|
-
|
|
33
|
+
|
|
33
34
|
/* Weak fill - for subtle backgrounds (outlined hover states) */
|
|
34
35
|
--fill-primary-weak: oklch(from var(--primary-500) calc(l * 2.04) calc(c * 0.2) h);
|
|
35
36
|
--fill-primary-weak-hover: oklch(from var(--canvas-50) calc(l * 0.995) c h);
|
|
36
|
-
|
|
37
|
+
|
|
37
38
|
/* Text tokens - for foreground colors */
|
|
38
|
-
--text-on-primary: white;
|
|
39
|
+
--text-on-primary: white;
|
|
40
|
+
/* Text on primary fill */
|
|
39
41
|
--text-on-primary-disabled: oklch(from white calc(l * 0.9) calc(c * 0.85) h);
|
|
40
|
-
--text-primary-strong: var(--primary-600);
|
|
41
|
-
|
|
42
|
+
--text-primary-strong: var(--primary-600);
|
|
43
|
+
/* Primary-colored text (outlined, text variants) */
|
|
44
|
+
--text-primary-weak: oklch(from var(--primary-500) calc(l * 0.7) c h);
|
|
45
|
+
/* Muted primary text */
|
|
42
46
|
--text-primary-disabled: oklch(from var(--primary-600) calc(l * 1.5) calc(c * 0.5) h);
|
|
43
|
-
|
|
47
|
+
|
|
44
48
|
/* Stroke tokens - for borders */
|
|
45
49
|
--stroke-primary: var(--primary-600);
|
|
46
50
|
--stroke-primary-hover: oklch(from var(--primary-600) calc(l * 0.85) c h);
|
|
47
51
|
--stroke-primary-disabled: oklch(from var(--primary-600) calc(l * 1.5) calc(c * 0.8) h);
|
|
48
|
-
|
|
52
|
+
|
|
49
53
|
/* Ring tokens - for focus states */
|
|
50
54
|
--ring-primary: var(--primary-500);
|
|
51
|
-
|
|
55
|
+
|
|
52
56
|
/* Gradient tokens */
|
|
53
57
|
--gradient-primary-start: var(--primary-500);
|
|
54
58
|
--gradient-primary-end: var(--primary-700);
|
|
@@ -62,24 +66,24 @@
|
|
|
62
66
|
--fill-secondary-strong-disabled: oklch(from var(--secondary-500) calc(l * 1.1) calc(c * 0.85) h);
|
|
63
67
|
--fill-secondary-weak: oklch(from var(--secondary-500) calc(l * 1.6) calc(c * 0.2) h);
|
|
64
68
|
--fill-secondary-weak-hover: oklch(from var(--canvas-50) calc(l * 0.995) c h);
|
|
65
|
-
|
|
69
|
+
|
|
66
70
|
--text-on-secondary: black;
|
|
67
71
|
--text-on-secondary-disabled: oklch(from black calc(l * 0.9) calc(c * 0.85) h);
|
|
68
72
|
--text-secondary-strong: var(--secondary-950);
|
|
69
73
|
--text-secondary-weak: oklch(from var(--secondary-500) calc(l * 0.7) c h);
|
|
70
74
|
--text-secondary-disabled: oklch(from var(--secondary-950) calc(l * 1.5) calc(c * 0.5) h);
|
|
71
|
-
|
|
75
|
+
|
|
72
76
|
--stroke-secondary: var(--secondary-700);
|
|
73
77
|
--stroke-secondary-disabled: oklch(from var(--secondary-700) calc(l * 1.5) calc(c * 0.8) h);
|
|
74
|
-
|
|
78
|
+
|
|
75
79
|
--ring-secondary: var(--secondary-500);
|
|
76
|
-
|
|
80
|
+
|
|
77
81
|
--stroke-secondary: var(--secondary-700);
|
|
78
82
|
--stroke-secondary-hover: oklch(from var(--secondary-700) calc(l * 0.85) c h);
|
|
79
83
|
--stroke-secondary-disabled: oklch(from var(--secondary-700) calc(l * 1.5) calc(c * 0.8) h);
|
|
80
|
-
|
|
84
|
+
|
|
81
85
|
--ring-secondary: var(--secondary-500);
|
|
82
|
-
|
|
86
|
+
|
|
83
87
|
--gradient-secondary-start: var(--secondary-500);
|
|
84
88
|
--gradient-secondary-end: var(--secondary-700);
|
|
85
89
|
--gradient-secondary-foreground: black;
|
|
@@ -92,19 +96,19 @@
|
|
|
92
96
|
--fill-noeffect-strong-disabled: oklch(from var(--gray-100) calc(l * 1.1) calc(c * 0.85) h);
|
|
93
97
|
--fill-noeffect-weak: oklch(from var(--gray-100) calc(l * 2.9) calc(c * 0.2) h);
|
|
94
98
|
--fill-noeffect-weak-hover: oklch(from var(--canvas-50) calc(l * 0.995) c h);
|
|
95
|
-
|
|
99
|
+
|
|
96
100
|
--text-on-noeffect: black;
|
|
97
101
|
--text-on-noeffect-disabled: oklch(from black calc(l * 0.9) calc(c * 0.85) h);
|
|
98
102
|
--text-noeffect-strong: var(--gray-800);
|
|
99
103
|
--text-noeffect-weak: oklch(from var(--gray-100) calc(l * 0.5) c h);
|
|
100
104
|
--text-noeffect-disabled: oklch(from var(--gray-800) calc(l * 1.5) calc(c * 0.5) h);
|
|
101
|
-
|
|
105
|
+
|
|
102
106
|
--stroke-noeffect: var(--gray-500);
|
|
103
107
|
--stroke-noeffect-hover: oklch(from var(--gray-500) calc(l * 0.75) c h);
|
|
104
108
|
--stroke-noeffect-disabled: oklch(from var(--gray-500) calc(l * 1.5) calc(c * 0.8) h);
|
|
105
|
-
|
|
109
|
+
|
|
106
110
|
--ring-noeffect: var(--gray-200);
|
|
107
|
-
|
|
111
|
+
|
|
108
112
|
--gradient-noeffect-start: var(--gray-100);
|
|
109
113
|
--gradient-noeffect-end: var(--gray-200);
|
|
110
114
|
--gradient-noeffect-foreground: black;
|
|
@@ -118,19 +122,19 @@
|
|
|
118
122
|
--fill-success-strong-disabled: oklch(from var(--green-400) calc(l * 1.1) calc(c * 0.85) h);
|
|
119
123
|
--fill-success-weak: oklch(from var(--green-400) calc(l * 1.6) calc(c * 0.2) h);
|
|
120
124
|
--fill-success-weak-hover: oklch(from var(--canvas-50) calc(l * 0.995) c h);
|
|
121
|
-
|
|
125
|
+
|
|
122
126
|
--text-on-success: white;
|
|
123
127
|
--text-on-success-disabled: oklch(from white calc(l * 0.9) calc(c * 0.85) h);
|
|
124
128
|
--text-success-strong: var(--green-600);
|
|
125
129
|
--text-success-weak: oklch(from var(--green-400) calc(l * 0.7) c h);
|
|
126
130
|
--text-success-disabled: oklch(from var(--green-600) calc(l * 1.5) calc(c * 0.5) h);
|
|
127
|
-
|
|
131
|
+
|
|
128
132
|
--stroke-success: var(--green-600);
|
|
129
133
|
--stroke-success-hover: oklch(from var(--green-600) calc(l * 0.85) c h);
|
|
130
134
|
--stroke-success-disabled: oklch(from var(--green-600) calc(l * 1.5) calc(c * 0.8) h);
|
|
131
|
-
|
|
135
|
+
|
|
132
136
|
--ring-success: var(--green-400);
|
|
133
|
-
|
|
137
|
+
|
|
134
138
|
--gradient-success-start: var(--green-500);
|
|
135
139
|
--gradient-success-end: var(--green-700);
|
|
136
140
|
--gradient-success-foreground: white;
|
|
@@ -143,19 +147,19 @@
|
|
|
143
147
|
--fill-info-strong-disabled: oklch(from var(--blue-400) calc(l * 1.1) calc(c * 0.85) h);
|
|
144
148
|
--fill-info-weak: oklch(from var(--blue-400) calc(l * 1.9) calc(c * 0.2) h);
|
|
145
149
|
--fill-info-weak-hover: oklch(from var(--canvas-50) calc(l * 0.995) c h);
|
|
146
|
-
|
|
150
|
+
|
|
147
151
|
--text-on-info: white;
|
|
148
152
|
--text-on-info-disabled: oklch(from white calc(l * 0.9) calc(c * 0.85) h);
|
|
149
153
|
--text-info-strong: var(--blue-300);
|
|
150
154
|
--text-info-weak: oklch(from var(--blue-400) calc(l * 0.7) c h);
|
|
151
155
|
--text-info-disabled: oklch(from var(--blue-300) calc(l * 1.5) calc(c * 0.5) h);
|
|
152
|
-
|
|
156
|
+
|
|
153
157
|
--stroke-info: var(--blue-500);
|
|
154
158
|
--stroke-info-hover: oklch(from var(--blue-500) calc(l * 0.85) c h);
|
|
155
159
|
--stroke-info-disabled: oklch(from var(--blue-500) calc(l * 1.5) calc(c * 0.8) h);
|
|
156
|
-
|
|
160
|
+
|
|
157
161
|
--ring-info: var(--blue-400);
|
|
158
|
-
|
|
162
|
+
|
|
159
163
|
--gradient-info-start: var(--blue-500);
|
|
160
164
|
--gradient-info-end: var(--blue-700);
|
|
161
165
|
--gradient-info-foreground: white;
|
|
@@ -168,19 +172,19 @@
|
|
|
168
172
|
--fill-warning-strong-disabled: oklch(from var(--yellow-300) calc(l * 1.1) calc(c * 0.85) h);
|
|
169
173
|
--fill-warning-weak: oklch(from var(--yellow-300) calc(l * 1.9) calc(c * 0.2) h);
|
|
170
174
|
--fill-warning-weak-hover: oklch(from var(--canvas-50) calc(l * 0.995) c h);
|
|
171
|
-
|
|
175
|
+
|
|
172
176
|
--text-on-warning: black;
|
|
173
177
|
--text-on-warning-disabled: oklch(from black calc(l * 0.9) calc(c * 0.85) h);
|
|
174
178
|
--text-warning-strong: var(--yellow-700);
|
|
175
179
|
--text-warning-weak: oklch(from var(--yellow-300) calc(l * 0.6) c h);
|
|
176
180
|
--text-warning-disabled: oklch(from var(--yellow-700) calc(l * 1.5) calc(c * 0.5) h);
|
|
177
|
-
|
|
181
|
+
|
|
178
182
|
--stroke-warning: var(--yellow-500);
|
|
179
183
|
--stroke-warning-hover: oklch(from var(--yellow-500) calc(l * 0.85) c h);
|
|
180
184
|
--stroke-warning-disabled: oklch(from var(--yellow-500) calc(l * 1.5) calc(c * 0.8) h);
|
|
181
|
-
|
|
185
|
+
|
|
182
186
|
--ring-warning: var(--yellow-300);
|
|
183
|
-
|
|
187
|
+
|
|
184
188
|
--gradient-warning-start: var(--yellow-300);
|
|
185
189
|
--gradient-warning-end: var(--yellow-400);
|
|
186
190
|
--gradient-warning-foreground: black;
|
|
@@ -193,27 +197,27 @@
|
|
|
193
197
|
--fill-danger-strong-disabled: oklch(from var(--red-400) calc(l * 1.1) calc(c * 0.85) h);
|
|
194
198
|
--fill-danger-weak: oklch(from var(--red-400) calc(l * 1.8) calc(c * 0.3) h);
|
|
195
199
|
--fill-danger-weak-hover: oklch(from var(--canvas-50) calc(l * 0.995) c h);
|
|
196
|
-
|
|
200
|
+
|
|
197
201
|
--text-on-danger: white;
|
|
198
202
|
--text-on-danger-disabled: oklch(from white calc(l * 0.9) calc(c * 0.85) h);
|
|
199
203
|
--text-danger-strong: var(--red-500);
|
|
200
204
|
--text-danger-weak: oklch(from var(--red-400) calc(l * 0.7) c h);
|
|
201
205
|
--text-danger-disabled: oklch(from var(--red-500) calc(l * 1.5) calc(c * 0.5) h);
|
|
202
|
-
|
|
206
|
+
|
|
203
207
|
--stroke-danger: var(--red-500);
|
|
204
208
|
--stroke-danger-hover: oklch(from var(--red-500) calc(l * 0.85) c h);
|
|
205
209
|
--stroke-danger-disabled: oklch(from var(--red-500) calc(l * 1.5) calc(c * 0.8) h);
|
|
206
|
-
|
|
210
|
+
|
|
207
211
|
--ring-danger: var(--red-400);
|
|
208
|
-
|
|
212
|
+
|
|
209
213
|
--gradient-danger-start: var(--red-500);
|
|
210
214
|
--gradient-danger-end: var(--red-700);
|
|
211
215
|
--gradient-danger-foreground: white;
|
|
212
216
|
--gradient-danger-disabled: oklch(from var(--red-700) calc(l * 1.2) calc(c * 0.85) h);
|
|
213
|
-
|
|
217
|
+
|
|
214
218
|
}
|
|
215
219
|
|
|
216
|
-
|
|
220
|
+
|
|
217
221
|
/* 🌙 Dark via `.dark` class or [data-theme="dark"] attribute.
|
|
218
222
|
* We rely on the consuming application to detect a user's
|
|
219
223
|
* preferred color scheme - either by header or cookie, and to set
|
|
@@ -223,35 +227,37 @@
|
|
|
223
227
|
*/
|
|
224
228
|
.dark,
|
|
225
229
|
[data-theme="dark"],
|
|
226
|
-
[data-theme="dark"] ::backdrop
|
|
227
|
-
{
|
|
230
|
+
[data-theme="dark"] ::backdrop {
|
|
228
231
|
/* PRIMARY INTENT TOKENS (Dark Mode)
|
|
229
232
|
----------------------------------------------------------------- */
|
|
230
|
-
|
|
233
|
+
|
|
231
234
|
/* Fill tokens */
|
|
232
235
|
--fill-primary-strong: var(--primary-500);
|
|
233
236
|
--fill-primary-strong-hover: oklch(from var(--primary-500) calc(l * 0.9) c h);
|
|
234
237
|
--fill-primary-strong-disabled: oklch(from var(--primary-500) calc(l * 0.85) calc(c * 0.85) h);
|
|
235
|
-
|
|
238
|
+
|
|
236
239
|
/* Weak fill - adjusted for dark backgrounds */
|
|
237
240
|
--fill-primary-weak: oklch(from var(--primary-500) calc(l * 0.45) calc(c * 0.1) h);
|
|
238
241
|
--fill-primary-weak-hover: var(--canvas-800);
|
|
239
|
-
|
|
242
|
+
|
|
240
243
|
/* Text tokens */
|
|
241
|
-
--text-on-primary: white;
|
|
244
|
+
--text-on-primary: white;
|
|
245
|
+
/* Same as light mode */
|
|
242
246
|
--text-on-primary-disabled: oklch(from white calc(l * 0.85) calc(c * 0.85) h);
|
|
243
|
-
--text-primary-strong: var(--primary-100);
|
|
244
|
-
|
|
247
|
+
--text-primary-strong: var(--primary-100);
|
|
248
|
+
/* Lighter for dark backgrounds */
|
|
249
|
+
--text-primary-weak: var(--primary-100);
|
|
250
|
+
/* Used for text variant */
|
|
245
251
|
--text-primary-disabled: oklch(from var(--primary-100) calc(l * 0.8) calc(c * 0.8) h);
|
|
246
|
-
|
|
252
|
+
|
|
247
253
|
/* Stroke tokens */
|
|
248
254
|
--stroke-primary: var(--primary-500);
|
|
249
255
|
--stroke-primary-hover: oklch(from var(--primary-500) calc(l * 1.1) c h);
|
|
250
256
|
--stroke-primary-disabled: oklch(from var(--primary-500) calc(l * 0.8) calc(c * 0.8) h);
|
|
251
|
-
|
|
257
|
+
|
|
252
258
|
/* Ring tokens */
|
|
253
259
|
--ring-primary: var(--primary-500);
|
|
254
|
-
|
|
260
|
+
|
|
255
261
|
/* Gradient tokens */
|
|
256
262
|
--gradient-primary-start: var(--primary-500);
|
|
257
263
|
--gradient-primary-end: var(--primary-700);
|
|
@@ -265,19 +271,19 @@
|
|
|
265
271
|
--fill-secondary-strong-disabled: oklch(from var(--secondary-500) calc(l * 0.85) calc(c * 0.85) h);
|
|
266
272
|
--fill-secondary-weak: oklch(from var(--secondary-500) calc(l * 0.3) calc(c * 0.1) h);
|
|
267
273
|
--fill-secondary-weak-hover: var(--canvas-800);
|
|
268
|
-
|
|
274
|
+
|
|
269
275
|
--text-on-secondary: black;
|
|
270
276
|
--text-on-secondary-disabled: oklch(from black calc(l * 0.85) calc(c * 0.85) h);
|
|
271
277
|
--text-secondary-strong: var(--secondary-500);
|
|
272
278
|
--text-secondary-weak: var(--secondary-500);
|
|
273
279
|
--text-secondary-disabled: oklch(from var(--secondary-500) calc(l * 0.8) calc(c * 0.8) h);
|
|
274
|
-
|
|
280
|
+
|
|
275
281
|
--stroke-secondary: var(--secondary-500);
|
|
276
282
|
--stroke-secondary-hover: oklch(from var(--secondary-500) calc(l * 1.1) c h);
|
|
277
283
|
--stroke-secondary-disabled: oklch(from var(--secondary-500) calc(l * 0.8) calc(c * 0.8) h);
|
|
278
|
-
|
|
284
|
+
|
|
279
285
|
--ring-secondary: var(--secondary-500);
|
|
280
|
-
|
|
286
|
+
|
|
281
287
|
--gradient-secondary-start: var(--secondary-500);
|
|
282
288
|
--gradient-secondary-end: var(--secondary-700);
|
|
283
289
|
--gradient-secondary-foreground: black;
|
|
@@ -290,19 +296,19 @@
|
|
|
290
296
|
--fill-noeffect-strong-disabled: oklch(from var(--gray-900) calc(l * 0.85) calc(c * 0.85) h);
|
|
291
297
|
--fill-noeffect-weak: oklch(from var(--gray-900) calc(l * 0.75) calc(c * 0.2) h);
|
|
292
298
|
--fill-noeffect-weak-hover: var(--canvas-800);
|
|
293
|
-
|
|
299
|
+
|
|
294
300
|
--text-on-noeffect: white;
|
|
295
301
|
--text-on-noeffect-disabled: oklch(from white calc(l * 0.85) calc(c * 0.85) h);
|
|
296
302
|
--text-noeffect-strong: var(--gray-300);
|
|
297
303
|
--text-noeffect-weak: var(--gray-300);
|
|
298
304
|
--text-noeffect-disabled: oklch(from var(--gray-300) calc(l * 0.85) calc(c * 0.85) h);
|
|
299
|
-
|
|
305
|
+
|
|
300
306
|
--stroke-noeffect: var(--gray-500);
|
|
301
307
|
--stroke-noeffect-hover: oklch(from var(--gray-500) calc(l * 1.2) c h);
|
|
302
308
|
--stroke-noeffect-disabled: oklch(from var(--gray-500) calc(l * 0.8) calc(c * 0.8) h);
|
|
303
|
-
|
|
309
|
+
|
|
304
310
|
--ring-noeffect: var(--gray-900);
|
|
305
|
-
|
|
311
|
+
|
|
306
312
|
--gradient-noeffect-start: var(--gray-950);
|
|
307
313
|
--gradient-noeffect-end: var(--gray-900);
|
|
308
314
|
--gradient-noeffect-foreground: white;
|
|
@@ -316,19 +322,19 @@
|
|
|
316
322
|
--fill-success-strong-disabled: oklch(from var(--green-400) calc(l * 0.85) calc(c * 0.85) h);
|
|
317
323
|
--fill-success-weak: oklch(from var(--green-400) calc(l * 0.35) calc(c * 0.1) h);
|
|
318
324
|
--fill-success-weak-hover: var(--canvas-800);
|
|
319
|
-
|
|
325
|
+
|
|
320
326
|
--text-on-success: white;
|
|
321
327
|
--text-on-success-disabled: oklch(from white calc(l * 0.85) calc(c * 0.85) h);
|
|
322
328
|
--text-success-strong: var(--green-500);
|
|
323
329
|
--text-success-weak: var(--green-400);
|
|
324
330
|
--text-success-disabled: oklch(from var(--green-500) calc(l * 0.8) calc(c * 0.8) h);
|
|
325
|
-
|
|
331
|
+
|
|
326
332
|
--stroke-success: var(--green-500);
|
|
327
333
|
--stroke-success-hover: oklch(from var(--green-500) calc(l * 1.1) c h);
|
|
328
334
|
--stroke-success-disabled: oklch(from var(--green-500) calc(l * 0.8) calc(c * 0.8) h);
|
|
329
|
-
|
|
335
|
+
|
|
330
336
|
--ring-success: var(--green-400);
|
|
331
|
-
|
|
337
|
+
|
|
332
338
|
--gradient-success-start: var(--green-500);
|
|
333
339
|
--gradient-success-end: var(--green-700);
|
|
334
340
|
--gradient-success-foreground: white;
|
|
@@ -341,19 +347,19 @@
|
|
|
341
347
|
--fill-info-strong-disabled: oklch(from var(--blue-400) calc(l * 0.85) calc(c * 0.85) h);
|
|
342
348
|
--fill-info-weak: oklch(from var(--blue-400) calc(l * 0.43) calc(c * 0.1) h);
|
|
343
349
|
--fill-info-weak-hover: var(--canvas-800);
|
|
344
|
-
|
|
350
|
+
|
|
345
351
|
--text-on-info: white;
|
|
346
352
|
--text-on-info-disabled: oklch(from white calc(l * 0.85) calc(c * 0.85) h);
|
|
347
353
|
--text-info-strong: var(--blue-300);
|
|
348
354
|
--text-info-weak: var(--blue-400);
|
|
349
355
|
--text-info-disabled: oklch(from var(--blue-300) calc(l * 0.8) calc(c * 0.8) h);
|
|
350
|
-
|
|
356
|
+
|
|
351
357
|
--stroke-info: var(--blue-500);
|
|
352
358
|
--stroke-info-hover: oklch(from var(--blue-500) calc(l * 1.1) c h);
|
|
353
359
|
--stroke-info-disabled: oklch(from var(--blue-500) calc(l * 0.8) calc(c * 0.8) h);
|
|
354
|
-
|
|
360
|
+
|
|
355
361
|
--ring-info: var(--blue-400);
|
|
356
|
-
|
|
362
|
+
|
|
357
363
|
--gradient-info-start: var(--blue-500);
|
|
358
364
|
--gradient-info-end: var(--blue-700);
|
|
359
365
|
--gradient-info-foreground: white;
|
|
@@ -366,19 +372,19 @@
|
|
|
366
372
|
--fill-warning-strong-disabled: oklch(from var(--yellow-300) calc(l * 0.85) calc(c * 0.85) h);
|
|
367
373
|
--fill-warning-weak: oklch(from var(--yellow-300) calc(l * 0.31) calc(c * 0.1) h);
|
|
368
374
|
--fill-warning-weak-hover: var(--canvas-800);
|
|
369
|
-
|
|
375
|
+
|
|
370
376
|
--text-on-warning: black;
|
|
371
377
|
--text-on-warning-disabled: oklch(from black calc(l * 0.85) calc(c * 0.85) h);
|
|
372
378
|
--text-warning-strong: var(--yellow-500);
|
|
373
379
|
--text-warning-weak: var(--yellow-300);
|
|
374
380
|
--text-warning-disabled: oklch(from var(--yellow-500) calc(l * 0.8) calc(c * 0.8) h);
|
|
375
|
-
|
|
381
|
+
|
|
376
382
|
--stroke-warning: var(--yellow-500);
|
|
377
383
|
--stroke-warning-hover: oklch(from var(--yellow-500) calc(l * 1.1) c h);
|
|
378
384
|
--stroke-warning-disabled: oklch(from var(--yellow-500) calc(l * 0.8) calc(c * 0.8) h);
|
|
379
|
-
|
|
385
|
+
|
|
380
386
|
--ring-warning: var(--yellow-300);
|
|
381
|
-
|
|
387
|
+
|
|
382
388
|
--gradient-warning-start: var(--yellow-300);
|
|
383
389
|
--gradient-warning-end: var(--yellow-400);
|
|
384
390
|
--gradient-warning-foreground: black;
|
|
@@ -391,19 +397,19 @@
|
|
|
391
397
|
--fill-danger-strong-disabled: oklch(from var(--red-400) calc(l * 0.85) calc(c * 0.85) h);
|
|
392
398
|
--fill-danger-weak: oklch(from var(--red-400) calc(l * 0.4) calc(c * 0.1) h);
|
|
393
399
|
--fill-danger-weak-hover: var(--canvas-800);
|
|
394
|
-
|
|
400
|
+
|
|
395
401
|
--text-on-danger: white;
|
|
396
402
|
--text-on-danger-disabled: oklch(from white calc(l * 0.85) calc(c * 0.85) h);
|
|
397
403
|
--text-danger-strong: var(--red-500);
|
|
398
404
|
--text-danger-weak: var(--red-400);
|
|
399
|
-
|
|
400
|
-
|
|
405
|
+
--text-danger-disabled: oklch(from var(--red-500) calc(l * 0.8) calc(c * 0.8) h);
|
|
406
|
+
|
|
401
407
|
--stroke-danger: var(--red-500);
|
|
402
408
|
--stroke-danger-hover: oklch(from var(--red-500) calc(l * 1.1) c h);
|
|
403
409
|
--stroke-danger-disabled: oklch(from var(--red-500) calc(l * 0.8) calc(c * 0.8) h);
|
|
404
|
-
|
|
410
|
+
|
|
405
411
|
--ring-danger: var(--red-400);
|
|
406
|
-
|
|
412
|
+
|
|
407
413
|
--gradient-danger-start: var(--red-500);
|
|
408
414
|
--gradient-danger-end: var(--red-700);
|
|
409
415
|
--gradient-danger-foreground: white;
|
|
@@ -421,31 +427,34 @@
|
|
|
421
427
|
.not-dark {
|
|
422
428
|
/* PRIMARY INTENT TOKENS (Force Light Mode)
|
|
423
429
|
----------------------------------------------------------------- */
|
|
424
|
-
|
|
430
|
+
|
|
425
431
|
/* Fill tokens - for solid backgrounds (filled variant) */
|
|
426
432
|
--fill-primary-strong: var(--primary-500);
|
|
427
433
|
--fill-primary-strong-hover: oklch(from var(--primary-500) calc(l * 0.9) c h);
|
|
428
434
|
--fill-primary-strong-disabled: oklch(from var(--primary-500) calc(l * 1.1) calc(c * 0.85) h);
|
|
429
|
-
|
|
435
|
+
|
|
430
436
|
/* Weak fill - for subtle backgrounds (outlined hover states) */
|
|
431
437
|
--fill-primary-weak: oklch(from var(--primary-500) calc(l * 2.04) calc(c * 0.2) h);
|
|
432
438
|
--fill-primary-weak-hover: oklch(from var(--canvas-50) calc(l * 0.995) c h);
|
|
433
|
-
|
|
439
|
+
|
|
434
440
|
/* Text tokens - for foreground colors */
|
|
435
|
-
--text-on-primary: white;
|
|
441
|
+
--text-on-primary: white;
|
|
442
|
+
/* Text on primary fill */
|
|
436
443
|
--text-on-primary-disabled: oklch(from white calc(l * 0.9) calc(c * 0.85) h);
|
|
437
|
-
--text-primary-strong: var(--primary-600);
|
|
438
|
-
|
|
444
|
+
--text-primary-strong: var(--primary-600);
|
|
445
|
+
/* Primary-colored text (outlined, text variants) */
|
|
446
|
+
--text-primary-weak: oklch(from var(--primary-500) calc(l * 0.7) c h);
|
|
447
|
+
/* Muted primary text */
|
|
439
448
|
--text-primary-disabled: oklch(from var(--primary-600) calc(l * 1.5) calc(c * 0.5) h);
|
|
440
|
-
|
|
449
|
+
|
|
441
450
|
/* Stroke tokens - for borders */
|
|
442
451
|
--stroke-primary: var(--primary-600);
|
|
443
452
|
--stroke-primary-hover: oklch(from var(--primary-600) calc(l * 0.85) c h);
|
|
444
453
|
--stroke-primary-disabled: oklch(from var(--primary-600) calc(l * 1.5) calc(c * 0.8) h);
|
|
445
|
-
|
|
454
|
+
|
|
446
455
|
/* Ring tokens - for focus states */
|
|
447
456
|
--ring-primary: var(--primary-500);
|
|
448
|
-
|
|
457
|
+
|
|
449
458
|
/* Gradient tokens */
|
|
450
459
|
--gradient-primary-start: var(--primary-500);
|
|
451
460
|
--gradient-primary-end: var(--primary-700);
|
|
@@ -459,19 +468,19 @@
|
|
|
459
468
|
--fill-secondary-strong-disabled: oklch(from var(--secondary-500) calc(l * 1.1) calc(c * 0.85) h);
|
|
460
469
|
--fill-secondary-weak: oklch(from var(--secondary-500) calc(l * 1.6) calc(c * 0.2) h);
|
|
461
470
|
--fill-secondary-weak-hover: oklch(from var(--canvas-50) calc(l * 0.995) c h);
|
|
462
|
-
|
|
471
|
+
|
|
463
472
|
--text-on-secondary: black;
|
|
464
473
|
--text-on-secondary-disabled: oklch(from black calc(l * 0.9) calc(c * 0.85) h);
|
|
465
474
|
--text-secondary-strong: var(--secondary-950);
|
|
466
475
|
--text-secondary-weak: oklch(from var(--secondary-500) calc(l * 0.7) c h);
|
|
467
476
|
--text-secondary-disabled: oklch(from var(--secondary-950) calc(l * 1.5) calc(c * 0.5) h);
|
|
468
|
-
|
|
477
|
+
|
|
469
478
|
--stroke-secondary: var(--secondary-700);
|
|
470
479
|
--stroke-secondary-hover: oklch(from var(--secondary-700) calc(l * 0.85) c h);
|
|
471
480
|
--stroke-secondary-disabled: oklch(from var(--secondary-700) calc(l * 1.5) calc(c * 0.8) h);
|
|
472
|
-
|
|
481
|
+
|
|
473
482
|
--ring-secondary: var(--secondary-500);
|
|
474
|
-
|
|
483
|
+
|
|
475
484
|
--gradient-secondary-start: var(--secondary-500);
|
|
476
485
|
--gradient-secondary-end: var(--secondary-700);
|
|
477
486
|
--gradient-secondary-foreground: black;
|
|
@@ -484,19 +493,19 @@
|
|
|
484
493
|
--fill-noeffect-strong-disabled: oklch(from var(--gray-100) calc(l * 1.1) calc(c * 0.85) h);
|
|
485
494
|
--fill-noeffect-weak: oklch(from var(--gray-100) calc(l * 2.9) calc(c * 0.2) h);
|
|
486
495
|
--fill-noeffect-weak-hover: oklch(from var(--canvas-50) calc(l * 0.995) c h);
|
|
487
|
-
|
|
496
|
+
|
|
488
497
|
--text-on-noeffect: black;
|
|
489
498
|
--text-on-noeffect-disabled: oklch(from black calc(l * 0.9) calc(c * 0.85) h);
|
|
490
499
|
--text-noeffect-strong: var(--gray-800);
|
|
491
500
|
--text-noeffect-weak: oklch(from var(--gray-100) calc(l * 0.5) c h);
|
|
492
501
|
--text-noeffect-disabled: oklch(from var(--gray-800) calc(l * 1.5) calc(c * 0.5) h);
|
|
493
|
-
|
|
502
|
+
|
|
494
503
|
--stroke-noeffect: var(--gray-500);
|
|
495
504
|
--stroke-noeffect-hover: oklch(from var(--gray-500) calc(l * 0.75) c h);
|
|
496
505
|
--stroke-noeffect-disabled: oklch(from var(--gray-500) calc(l * 1.5) calc(c * 0.8) h);
|
|
497
|
-
|
|
506
|
+
|
|
498
507
|
--ring-noeffect: var(--gray-200);
|
|
499
|
-
|
|
508
|
+
|
|
500
509
|
--gradient-noeffect-start: var(--gray-100);
|
|
501
510
|
--gradient-noeffect-end: var(--gray-200);
|
|
502
511
|
--gradient-noeffect-foreground: black;
|
|
@@ -510,19 +519,19 @@
|
|
|
510
519
|
--fill-success-strong-disabled: oklch(from var(--green-400) calc(l * 1.1) calc(c * 0.85) h);
|
|
511
520
|
--fill-success-weak: oklch(from var(--green-400) calc(l * 1.6) calc(c * 0.2) h);
|
|
512
521
|
--fill-success-weak-hover: oklch(from var(--canvas-50) calc(l * 0.995) c h);
|
|
513
|
-
|
|
522
|
+
|
|
514
523
|
--text-on-success: white;
|
|
515
524
|
--text-on-success-disabled: oklch(from white calc(l * 0.9) calc(c * 0.85) h);
|
|
516
525
|
--text-success-strong: var(--green-600);
|
|
517
526
|
--text-success-weak: oklch(from var(--green-400) calc(l * 0.7) c h);
|
|
518
527
|
--text-success-disabled: oklch(from var(--green-600) calc(l * 1.5) calc(c * 0.5) h);
|
|
519
|
-
|
|
528
|
+
|
|
520
529
|
--stroke-success: var(--green-600);
|
|
521
530
|
--stroke-success-hover: oklch(from var(--green-600) calc(l * 0.85) c h);
|
|
522
531
|
--stroke-success-disabled: oklch(from var(--green-600) calc(l * 1.5) calc(c * 0.8) h);
|
|
523
|
-
|
|
532
|
+
|
|
524
533
|
--ring-success: var(--green-400);
|
|
525
|
-
|
|
534
|
+
|
|
526
535
|
--gradient-success-start: var(--green-500);
|
|
527
536
|
--gradient-success-end: var(--green-700);
|
|
528
537
|
--gradient-success-foreground: white;
|
|
@@ -535,19 +544,19 @@
|
|
|
535
544
|
--fill-info-strong-disabled: oklch(from var(--blue-400) calc(l * 1.1) calc(c * 0.85) h);
|
|
536
545
|
--fill-info-weak: oklch(from var(--blue-400) calc(l * 1.9) calc(c * 0.2) h);
|
|
537
546
|
--fill-info-weak-hover: oklch(from var(--canvas-50) calc(l * 0.995) c h);
|
|
538
|
-
|
|
547
|
+
|
|
539
548
|
--text-on-info: white;
|
|
540
549
|
--text-on-info-disabled: oklch(from white calc(l * 0.9) calc(c * 0.85) h);
|
|
541
550
|
--text-info-strong: var(--blue-300);
|
|
542
551
|
--text-info-weak: oklch(from var(--blue-400) calc(l * 0.7) c h);
|
|
543
552
|
--text-info-disabled: oklch(from var(--blue-300) calc(l * 1.5) calc(c * 0.5) h);
|
|
544
|
-
|
|
553
|
+
|
|
545
554
|
--stroke-info: var(--blue-500);
|
|
546
555
|
--stroke-info-hover: oklch(from var(--blue-500) calc(l * 0.85) c h);
|
|
547
556
|
--stroke-info-disabled: oklch(from var(--blue-500) calc(l * 1.5) calc(c * 0.8) h);
|
|
548
|
-
|
|
557
|
+
|
|
549
558
|
--ring-info: var(--blue-400);
|
|
550
|
-
|
|
559
|
+
|
|
551
560
|
--gradient-info-start: var(--blue-500);
|
|
552
561
|
--gradient-info-end: var(--blue-700);
|
|
553
562
|
--gradient-info-foreground: white;
|
|
@@ -560,19 +569,19 @@
|
|
|
560
569
|
--fill-warning-strong-disabled: oklch(from var(--yellow-300) calc(l * 1.1) calc(c * 0.85) h);
|
|
561
570
|
--fill-warning-weak: oklch(from var(--yellow-300) calc(l * 1.9) calc(c * 0.2) h);
|
|
562
571
|
--fill-warning-weak-hover: oklch(from var(--canvas-50) calc(l * 0.995) c h);
|
|
563
|
-
|
|
572
|
+
|
|
564
573
|
--text-on-warning: black;
|
|
565
574
|
--text-on-warning-disabled: oklch(from black calc(l * 0.9) calc(c * 0.85) h);
|
|
566
575
|
--text-warning-strong: var(--yellow-700);
|
|
567
576
|
--text-warning-weak: oklch(from var(--yellow-300) calc(l * 0.6) c h);
|
|
568
577
|
--text-warning-disabled: oklch(from var(--yellow-700) calc(l * 1.5) calc(c * 0.5) h);
|
|
569
|
-
|
|
578
|
+
|
|
570
579
|
--stroke-warning: var(--yellow-500);
|
|
571
580
|
--stroke-warning-hover: oklch(from var(--yellow-500) calc(l * 0.85) c h);
|
|
572
581
|
--stroke-warning-disabled: oklch(from var(--yellow-500) calc(l * 1.5) calc(c * 0.8) h);
|
|
573
|
-
|
|
582
|
+
|
|
574
583
|
--ring-warning: var(--yellow-300);
|
|
575
|
-
|
|
584
|
+
|
|
576
585
|
--gradient-warning-start: var(--yellow-300);
|
|
577
586
|
--gradient-warning-end: var(--yellow-400);
|
|
578
587
|
--gradient-warning-foreground: black;
|
|
@@ -585,22 +594,22 @@
|
|
|
585
594
|
--fill-danger-strong-disabled: oklch(from var(--red-400) calc(l * 1.1) calc(c * 0.85) h);
|
|
586
595
|
--fill-danger-weak: oklch(from var(--red-400) calc(l * 1.8) calc(c * 0.3) h);
|
|
587
596
|
--fill-danger-weak-hover: oklch(from var(--canvas-50) calc(l * 0.995) c h);
|
|
588
|
-
|
|
597
|
+
|
|
589
598
|
--text-on-danger: white;
|
|
590
599
|
--text-on-danger-disabled: oklch(from white calc(l * 0.9) calc(c * 0.85) h);
|
|
591
600
|
--text-danger-strong: var(--red-500);
|
|
592
601
|
--text-danger-weak: oklch(from var(--red-400) calc(l * 0.7) c h);
|
|
593
602
|
--text-danger-disabled: oklch(from var(--red-500) calc(l * 1.5) calc(c * 0.5) h);
|
|
594
|
-
|
|
603
|
+
|
|
595
604
|
--stroke-danger: var(--red-500);
|
|
596
605
|
--stroke-danger-hover: oklch(from var(--red-500) calc(l * 0.85) c h);
|
|
597
606
|
--stroke-danger-disabled: oklch(from var(--red-500) calc(l * 1.5) calc(c * 0.8) h);
|
|
598
|
-
|
|
607
|
+
|
|
599
608
|
--ring-danger: var(--red-400);
|
|
600
|
-
|
|
609
|
+
|
|
601
610
|
--gradient-danger-start: var(--red-500);
|
|
602
611
|
--gradient-danger-end: var(--red-700);
|
|
603
612
|
--gradient-danger-foreground: white;
|
|
604
613
|
--gradient-danger-disabled: oklch(from var(--red-700) calc(l * 1.2) calc(c * 0.85) h);
|
|
605
614
|
}
|
|
606
|
-
}
|
|
615
|
+
}
|