@bcc-code/design-tokens 1.0.3 → 1.0.4

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/tailwind.css DELETED
@@ -1,799 +0,0 @@
1
-
2
- @import "tailwindcss";
3
-
4
- @theme {
5
- /* ✅ Color neutral */
6
- --color-neutral-0: #ffffff;
7
- --color-neutral-100: #f7f8f9;
8
- --color-neutral-200: #f1f2f4;
9
- --color-neutral-300: #dcdfe4;
10
- --color-neutral-400: #b3b9c4;
11
- --color-neutral-500: #8590a2;
12
- --color-neutral-600: #758195;
13
- --color-neutral-700: #626f86;
14
- --color-neutral-800: #4b5668;
15
- --color-neutral-900: #374152;
16
- --color-neutral-1000: #282f3c;
17
- --color-neutral-1100: #1e242d;
18
-
19
- /* ✅ Color dark-neutral */
20
- --color-dark-neutral-0: #161a1d;
21
- --color-dark-neutral-100: #1d2125;
22
- --color-dark-neutral-200: #22272b;
23
- --color-dark-neutral-300: #2c333a;
24
- --color-dark-neutral-400: #454f59;
25
- --color-dark-neutral-500: #596773;
26
- --color-dark-neutral-600: #738496;
27
- --color-dark-neutral-700: #8c9bab;
28
- --color-dark-neutral-800: #9fadbc;
29
- --color-dark-neutral-900: #b6c2cf;
30
- --color-dark-neutral-1000: #c7d1db;
31
- --color-dark-neutral-1100: #dee4ea;
32
-
33
- /* ✅ Color bcc */
34
- --color-bcc-100: #e6f2f1;
35
- --color-bcc-200: #d0e3e1;
36
- --color-bcc-300: #accbc8;
37
- --color-bcc-400: #73b2ac;
38
- --color-bcc-500: #2e9087;
39
- --color-bcc-600: #187b73;
40
- --color-bcc-700: #0e6962;
41
- --color-bcc-800: #004e48;
42
- --color-bcc-900: #003d39;
43
- --color-bcc-1000: #002320;
44
-
45
- /* ✅ Color rust */
46
- --color-rust-100: #fcf6f4;
47
- --color-rust-200: #f9ece7;
48
- --color-rust-300: #f6dcd2;
49
- --color-rust-400: #e9b29e;
50
- --color-rust-500: #e29f87;
51
- --color-rust-600: #d37f60;
52
- --color-rust-700: #be6544;
53
- --color-rust-800: #9f5236;
54
- --color-rust-900: #844630;
55
- --color-rust-1000: #4c271a;
56
-
57
- /* ✅ Color red */
58
- --color-red-100: #fcf4f4;
59
- --color-red-200: #fae7e6;
60
- --color-red-300: #f6d3d2;
61
- --color-red-400: #efb4b2;
62
- --color-red-500: #e38986;
63
- --color-red-600: #d5625e;
64
- --color-red-700: #c04642;
65
- --color-red-800: #ad3c38;
66
- --color-red-900: #86312e;
67
- --color-red-1000: #461716;
68
-
69
- /* ✅ Color green */
70
- --color-green-100: #f2fbf6;
71
- --color-green-200: #e2f6ea;
72
- --color-green-300: #c6ecd6;
73
- --color-green-400: #9adbb5;
74
- --color-green-500: #66c28d;
75
- --color-green-600: #40a56c;
76
- --color-green-700: #308957;
77
- --color-green-800: #296c47;
78
- --color-green-900: #25563b;
79
- --color-green-1000: #133925;
80
-
81
- /* ✅ Color teal */
82
- --color-teal-100: #f1f9fa;
83
- --color-teal-200: #dceff1;
84
- --color-teal-300: #bde0e4;
85
- --color-teal-400: #8fc9d1;
86
- --color-teal-500: #5cabb7;
87
- --color-teal-600: #3e8e9c;
88
- --color-teal-700: #377483;
89
- --color-teal-800: #32606c;
90
- --color-teal-900: #2f505b;
91
- --color-teal-1000: #1d353f;
92
-
93
- /* ✅ Color sand */
94
- --color-sand-100: #f7f3ee;
95
- --color-sand-200: #ede5da;
96
- --color-sand-300: #dccfba;
97
- --color-sand-400: #c5b191;
98
- --color-sand-500: #ae966d;
99
- --color-sand-600: #937b4f;
100
- --color-sand-700: #74613c;
101
- --color-sand-800: #5a4d31;
102
- --color-sand-900: #49402b;
103
- --color-sand-1000: #3c3420;
104
-
105
- /* ✅ Color blue */
106
- --color-blue-100: #f1f7fd;
107
- --color-blue-200: #dfedfa;
108
- --color-blue-300: #c6e0f7;
109
- --color-blue-400: #a0cdf0;
110
- --color-blue-500: #72b1e8;
111
- --color-blue-600: #5294e0;
112
- --color-blue-700: #3c79d4;
113
- --color-blue-800: #3365c2;
114
- --color-blue-900: #2f529e;
115
- --color-blue-1000: #25385f;
116
-
117
- /* ✅ Color purple */
118
- --color-purple-100: #f1f1fc;
119
- --color-purple-200: #e5e7fa;
120
- --color-purple-300: #d0d1f5;
121
- --color-purple-400: #b3b3ee;
122
- --color-purple-500: #9b95e4;
123
- --color-purple-600: #8678d9;
124
- --color-purple-700: #7860cb;
125
- --color-purple-800: #6750b2;
126
- --color-purple-900: #554390;
127
- --color-purple-1000: #352c54;
128
-
129
- /* ✅ Color magenta */
130
- --color-magenta-100: #faf5f9;
131
- --color-magenta-200: #f7ecf5;
132
- --color-magenta-300: #f0daec;
133
- --color-magenta-400: #e4bddd;
134
- --color-magenta-500: #d294c5;
135
- --color-magenta-600: #c377b1;
136
- --color-magenta-700: #ac5693;
137
- --color-magenta-800: #93437a;
138
- --color-magenta-900: #7a3a65;
139
- --color-magenta-1000: #592648;
140
-
141
- /* ✅ Color neutral-alpha */
142
- --color-neutral-alpha-100A: rgba(9, 30, 77, 0.03);
143
- --color-neutral-alpha-500A: rgba(9, 30, 77, 0.5);
144
- --color-neutral-alpha-200A: rgba(9, 30, 77, 0.06);
145
- --color-neutral-alpha-300A: rgba(9, 30, 77, 0.14);
146
- --color-neutral-alpha-400A: rgba(9, 30, 77, 0.31);
147
-
148
- /* ✅ Color dark-neutral-alpha */
149
- --color-dark-neutral-alpha-100A: rgba(188, 214, 240, 0.04);
150
- --color-dark-neutral-alpha-200A: rgba(161, 189, 217, 0.08);
151
- --color-dark-neutral-alpha-300A: rgba(166, 197, 226, 0.16);
152
- --color-dark-neutral-alpha-400A: rgba(166, 197, 226, 0.28);
153
- --color-dark-neutral-alpha-500A: rgba(166, 197, 226, 0.5);
154
-
155
- /* ✅ Opacity opacity */
156
- --opacity-opacity: #ffffff;
157
-
158
- /* ✅ Dimension space-0 */
159
- --dimension-space-0: 0 rem;
160
-
161
- /* ✅ Dimension space-25 */
162
- --dimension-space-25: 0.125rem;
163
-
164
- /* ✅ Dimension space-50 */
165
- --dimension-space-50: 0.25rem;
166
-
167
- /* ✅ Dimension space-75 */
168
- --dimension-space-75: 0.375rem;
169
-
170
- /* ✅ Dimension space-100 */
171
- --dimension-space-100: 0.5rem;
172
-
173
- /* ✅ Dimension space-150 */
174
- --dimension-space-150: 0.75rem;
175
-
176
- /* ✅ Dimension space-200 */
177
- --dimension-space-200: 1rem;
178
-
179
- /* ✅ Dimension space-250 */
180
- --dimension-space-250: 1.25rem;
181
-
182
- /* ✅ Dimension space-300 */
183
- --dimension-space-300: 1.5rem;
184
-
185
- /* ✅ Dimension space-400 */
186
- --dimension-space-400: 2rem;
187
-
188
- /* ✅ Dimension space-500 */
189
- --dimension-space-500: 2.5rem;
190
-
191
- /* ✅ Dimension space-600 */
192
- --dimension-space-600: 3rem;
193
-
194
- /* ✅ Dimension space-800 */
195
- --dimension-space-800: 4rem;
196
-
197
- /* ✅ Dimension space-1000 */
198
- --dimension-space-1000: 80px;
199
-
200
- /* ✅ Border-width base */
201
- --border-width-base: 1px;
202
-
203
- /* ✅ Border-width md */
204
- --border-width-md: 2px;
205
-
206
- /* ✅ Border-radius none */
207
- --border-radius-none: 0;
208
-
209
- /* ✅ Border-radius xs */
210
- --border-radius-xs: 0.125rem;
211
-
212
- /* ✅ Border-radius sm */
213
- --border-radius-sm: 0.25rem;
214
-
215
- /* ✅ Border-radius md */
216
- --border-radius-md: 0.5rem;
217
-
218
- /* ✅ Border-radius lg */
219
- --border-radius-lg: 1rem;
220
-
221
- /* ✅ Border-radius xl */
222
- --border-radius-xl: 2rem;
223
-
224
- /* ✅ Border-radius 2xl */
225
- --border-radius-2xl: 3rem;
226
-
227
- /* ✅ Border-radius full */
228
- --border-radius-full: 999px;
229
-
230
- /* ✅ Icon-size xs */
231
- --icon-size-xs: 1rem;
232
-
233
- /* ✅ Icon-size sm */
234
- --icon-size-sm: 1.25rem;
235
-
236
- /* ✅ Icon-size md */
237
- --icon-size-md: 1.5rem;
238
-
239
- /* ✅ Icon-size lg */
240
- --icon-size-lg: 2rem;
241
-
242
- /* ✅ Icon-size xl */
243
- --icon-size-xl: 3rem;
244
-
245
- /* ✅ Text-decoration-line none */
246
- --text-decoration-line-none: none;
247
-
248
- /* ✅ Text-decoration-line underline */
249
- --text-decoration-line-underline: underline;
250
-
251
- /* ✅ Text-decoration-line line-through */
252
- --text-decoration-line-line-through: line-through;
253
-
254
- /* ✅ Text-transform uppercase */
255
- --text-transform-uppercase: uppercase;
256
-
257
- /* ✅ Text-transform lowercase */
258
- --text-transform- lowercase: lowercase;
259
-
260
- /* ✅ Text-transform capitalize */
261
- --text-transform- capitalize: capitalize;
262
-
263
- /* ✅ Font-size text-xs */
264
- --font-size-text-xs: 0.75rem;
265
-
266
- /* ✅ Font-size text-sm */
267
- --font-size-text-sm: 0.875rem;
268
-
269
- /* ✅ Font-size text-base */
270
- --font-size-text-base: 1rem;
271
-
272
- /* ✅ Font-size text-lg */
273
- --font-size-text-lg: 1.25rem;
274
-
275
- /* ✅ Font-size text-xl */
276
- --font-size-text-xl: 1.5rem;
277
-
278
- /* ✅ Font-size text-2xl */
279
- --font-size-text-2xl: 2rem;
280
-
281
- /* ✅ Font-size text-3xl */
282
- --font-size-text-3xl: 2.25rem;
283
-
284
- /* ✅ Font-size text-4xl */
285
- --font-size-text-4xl: 3rem;
286
-
287
- /* ✅ Font-weight regular-400 */
288
- --font-weight-regular-400: {fontweights.archivo-regular};
289
-
290
- /* ✅ Font-weight medium-500 */
291
- --font-weight-medium-500: {fontweights.archivo-medium};
292
-
293
- /* ✅ Font-weight bold-700 */
294
- --font-weight-bold-700: {fontweights.archivo-bold};
295
-
296
- /* ✅ Line-height text-4xl */
297
- --line-height-text-4xl-leading-none: 3rem;
298
- --line-height-text-4xl-leading-tight: 3.25rem;
299
-
300
- /* ✅ Line-height text-3xl */
301
- --line-height-text-3xl-leading-none: 2.25rem;
302
- --line-height-text-3xl-leading-tight: 2.5rem;
303
-
304
- /* ✅ Line-height text-2xl */
305
- --line-height-text-2xl-leading-none: 2rem;
306
- --line-height-text-2xl-leading-tight: 2.25rem;
307
-
308
- /* ✅ Line-height text-xl */
309
- --line-height-text-xl-leading-none: 1.5rem;
310
- --line-height-text-xl-leading-tight: 1.75;
311
-
312
- /* ✅ Line-height text-lg */
313
- --line-height-text-lg-leading-none: 1.25rem;
314
- --line-height-text-lg-leading-tight: 1.5rem;
315
-
316
- /* ✅ Line-height text-base */
317
- --line-height-text-base-leading-none: 1rem;
318
- --line-height-text-base-leading-tight: 1.25;
319
- --line-height-text-base-leading-normal: 1.5rem;
320
-
321
- /* ✅ Line-height text-sm */
322
- --line-height-text-sm-leading-none: 0.875rem;
323
- --line-height-text-sm-leading-normal: 1.25rem;
324
-
325
- /* ✅ Line-height text-xs */
326
- --line-height-text-xs-leading-none: 0.75rem;
327
- --line-height-text-xs-leading-normal: 1.25rem;
328
-
329
- /* ✅ FontFamilies archivo */
330
- --fontFamilies-archivo: Archivo;
331
-
332
- /* ✅ Semantic */
333
- --color-surface-primary: var(--color-neutral-0);
334
- --color-surface-secondary: var(--color-neutral-200);
335
- --color-surface-overlay-default: var(--color-neutral-alpha-500a);
336
- --color-surface-inverse-primary: var(--color-dark-neutral-0);
337
- --color-surface-inverse-secondary: var(--color-dark-neutral-200);
338
- --color-divider-light: var(--color-neutral-100);
339
- --color-divider-default: var(--color-neutral-200);
340
- --color-divider-bold: var(--color-neutral-300);
341
- --color-text-primary: var(--color-neutral-1100);
342
- --color-text-secondary: var(--color-neutral-600);
343
- --color-text-tertiary: var(--color-neutral-400);
344
- --color-text-inverse: var(--color-neutral-0);
345
- --color-text-disabled: var(--color-neutral-alpha-400a);
346
- --color-text-success: var(--color-green-600);
347
- --color-text-alert: var(--color-red-600);
348
- --color-text-Info: var(--color-neutral-0);
349
- --color-text-danger: var(--color-neutral-0);
350
- --color-text-brand-default: var(--color-bcc-700);
351
- --color-text-brand-bold: var(--color-bcc-800);
352
- --color-text-accent-rust-default: var(--color-rust-700);
353
- --color-text-accent-rust-bold: var(--color-rust-800);
354
- --color-text-accent-yellow-default: var(--color-red-700);
355
- --color-text-accent-yellow-bold: var(--color-red-800);
356
- --color-text-accent-green-default: var(--color-green-700);
357
- --color-text-accent-green-bold: var(--color-green-800);
358
- --color-text-accent-teal-default: var(--color-teal-700);
359
- --color-text-accent-teal-bold: var(--color-teal-800);
360
- --color-text-accent-sand-default: var(--color-sand-700);
361
- --color-text-accent-sand-bold: var(--color-sand-800);
362
- --color-text-accent-blue-default: var(--color-blue-700);
363
- --color-text-accent-blue-bold: var(--color-blue-800);
364
- --color-text-accent-purple-default: var(--color-purple-700);
365
- --color-text-accent-purple-bold: var(--color-purple-800);
366
- --color-text-accent-magenta-default: var(--color-magenta-700);
367
- --color-text-accent-magenta-bold: var(--color-magenta-800);
368
- --color-icon-primary: var(--color-neutral-1100);
369
- --color-icon-secondary: var(--color-neutral-700);
370
- --color-icon-tertiary: var(--color-neutral-400);
371
- --color-icon-inverse: var(--color-neutral-0);
372
- --color-icon-disabled: var(--color-neutral-alpha-400a);
373
- --color-icon-success: var(--color-green-600);
374
- --color-icon-alert: var(--color-red-600);
375
- --color-icon-info: #ffffff;
376
- --color-icon-danger: #ffffff;
377
- --color-icon-accent-blue: var(--color-blue-700);
378
- --color-icon-accent-red: var(--color-red-700);
379
- --color-icon-accent-green: var(--color-green-700);
380
- --color-icon-accent-rust: var(--color-rust-700);
381
- --color-icon-accent-teal: var(--color-teal-700);
382
- --color-icon-accent-purple: var(--color-purple-700);
383
- --color-icon-accent-magenta: var(--color-magenta-700);
384
- --color-icon-accent-sand: var(--color-sand-700);
385
- --color-icon-brand: var(--color-bcc-700);
386
- --color-link-default: var(--color-blue-600);
387
- --color-link-hover: var(--color-blue-700);
388
- --color-link-visited: var(--color-blue-900);
389
- --color-background-disabled-default: #ffffff;
390
- --color-background-brand-default: var(--color-bcc-600);
391
- --color-background-brand-hover: var(--color-bcc-700);
392
- --color-background-brand-pressed: var(--color-bcc-800);
393
- --color-background-brand-lighter-default: var(--color-bcc-200);
394
- --color-background-brand-lighter-hover: var(--color-bcc-300);
395
- --color-background-brand-lighter-pressed: var(--color-bcc-400);
396
- --color-background-brand-light-default: var(--color-bcc-400);
397
- --color-background-brand-light-hover: var(--color-bcc-500);
398
- --color-background-brand-light-pressed: var(--color-bcc-600);
399
- --color-background-brand-bold-default: var(--color-bcc-800);
400
- --color-background-brand-bold-hover: var(--color-bcc-900);
401
- --color-background-brand-bold-pressed: var(--color-bcc-1000);
402
- --color-background-accent-red-default: var(--color-red-600);
403
- --color-background-accent-red-hover: var(--color-red-700);
404
- --color-background-accent-red-pressed: var(--color-red-800);
405
- --color-background-accent-red-lighter-default: var(--color-red-200);
406
- --color-background-accent-red-lighter-hover: var(--color-red-300);
407
- --color-background-accent-red-lighter-pressed: var(--color-red-400);
408
- --color-background-accent-red-light-default: var(--color-red-400);
409
- --color-background-accent-red-light-hover: var(--color-red-500);
410
- --color-background-accent-red-light-pressed: var(--color-red-600);
411
- --color-background-accent-red-bold-default: var(--color-red-800);
412
- --color-background-accent-red-bold-hover: var(--color-red-700);
413
- --color-background-accent-red-bold-pressed: var(--color-red-600);
414
- --color-background-accent-rust-default: var(--color-rust-600);
415
- --color-background-accent-rust-hover: var(--color-rust-700);
416
- --color-background-accent-rust-pressed: var(--color-rust-800);
417
- --color-background-accent-rust-lighter-default: var(--color-rust-200);
418
- --color-background-accent-rust-lighter-hover: var(--color-rust-300);
419
- --color-background-accent-rust-lighter-pressed: var(--color-rust-400);
420
- --color-background-accent-rust-light-default: var(--color-rust-400);
421
- --color-background-accent-rust-light-hover: var(--color-rust-500);
422
- --color-background-accent-rust-light-pressed: var(--color-rust-600);
423
- --color-background-accent-rust-bold-default: var(--color-rust-800);
424
- --color-background-accent-rust-bold-hover: var(--color-rust-700);
425
- --color-background-accent-rust-bold-pressed: var(--color-rust-600);
426
- --color-background-accent-green-default: var(--color-green-500);
427
- --color-background-accent-green-hover: var(--color-green-600);
428
- --color-background-accent-green-pressed: var(--color-green-700);
429
- --color-background-accent-green-lighter-default: var(--color-green-200);
430
- --color-background-accent-green-lighter-hover: var(--color-green-300);
431
- --color-background-accent-green-lighter-pressed: var(--color-green-400);
432
- --color-background-accent-green-light-default: var(--color-green-400);
433
- --color-background-accent-green-light-hover: var(--color-green-500);
434
- --color-background-accent-green-light-pressed: var(--color-green-600);
435
- --color-background-accent-green-bold-default: var(--color-green-800);
436
- --color-background-accent-green-bold-hover: var(--color-green-700);
437
- --color-background-accent-green-bold-pressed: var(--color-green-600);
438
- --color-background-accent-teal-default: var(--color-teal-600);
439
- --color-background-accent-teal-hover: var(--color-teal-700);
440
- --color-background-accent-teal-pressed: var(--color-teal-800);
441
- --color-background-accent-teal-lighter-default: var(--color-teal-200);
442
- --color-background-accent-teal-lighter-hover: var(--color-teal-300);
443
- --color-background-accent-teal-lighter-pressed: #ffffff;
444
- --color-background-accent-teal-light-default: var(--color-teal-400);
445
- --color-background-accent-teal-light-hover: #ffffff;
446
- --color-background-accent-teal-light-pressed: #ffffff;
447
- --color-background-accent-teal-bold-default: var(--color-teal-800);
448
- --color-background-accent-teal-bold-hover: #ffffff;
449
- --color-background-accent-teal-bold-pressed: #ffffff;
450
- --color-background-accent-sand-default: var(--color-sand-600);
451
- --color-background-accent-sand-hover: #ffffff;
452
- --color-background-accent-sand-pressed: #ffffff;
453
- --color-background-accent-sand-lighter-default: var(--color-sand-200);
454
- --color-background-accent-sand-lighter-hover: var(--color-sand-300);
455
- --color-background-accent-sand-lighter-pressed: #ffffff;
456
- --color-background-accent-sand-light-default: var(--color-sand-400);
457
- --color-background-accent-sand-light-hover: #ffffff;
458
- --color-background-accent-sand-light-pressed: #ffffff;
459
- --color-background-accent-sand-bold-default: var(--color-sand-800);
460
- --color-background-accent-sand-bold-hover: #ffffff;
461
- --color-background-accent-sand-bold-pressed: #ffffff;
462
- --color-background-accent-blue-default: var(--color-blue-600);
463
- --color-background-accent-blue-hover: #ffffff;
464
- --color-background-accent-blue-pressed: #ffffff;
465
- --color-background-accent-blue-lighter-default: var(--color-blue-200);
466
- --color-background-accent-blue-lighter-hover: #ffffff;
467
- --color-background-accent-blue-lighter-pressed: #ffffff;
468
- --color-background-accent-blue-light-default: var(--color-blue-400);
469
- --color-background-accent-blue-light-hover: #ffffff;
470
- --color-background-accent-blue-light-pressed: #ffffff;
471
- --color-background-accent-blue-bold-default: var(--color-blue-800);
472
- --color-background-accent-blue-bold-hover: #ffffff;
473
- --color-background-accent-blue-bold-pressed: #ffffff;
474
- --color-background-accent-purple-default: var(--color-purple-600);
475
- --color-background-accent-purple-hover: #ffffff;
476
- --color-background-accent-purple-pressed: #ffffff;
477
- --color-background-accent-purple-lighter-default: var(--color-purple-200);
478
- --color-background-accent-purple-lighter-hover: #ffffff;
479
- --color-background-accent-purple-lighter-pressed: #ffffff;
480
- --color-background-accent-purple-light-default: var(--color-purple-400);
481
- --color-background-accent-purple-light-hover: #ffffff;
482
- --color-background-accent-purple-light-pressed: #ffffff;
483
- --color-background-accent-purple-bold-default: var(--color-purple-800);
484
- --color-background-accent-purple-bold-hover: #ffffff;
485
- --color-background-accent-purple-bold-pressed: #ffffff;
486
- --color-background-accent-magenta-default: var(--color-magenta-600);
487
- --color-background-accent-magenta-hover: #ffffff;
488
- --color-background-accent-magenta-pressed: #ffffff;
489
- --color-background-accent-magenta-lighter-default: var(--color-magenta-200);
490
- --color-background-accent-magenta-lighter-hover: #ffffff;
491
- --color-background-accent-magenta-lighter-pressed: #ffffff;
492
- --color-background-accent-magenta-light-default: var(--color-magenta-400);
493
- --color-background-accent-magenta-light-hover: #ffffff;
494
- --color-background-accent-magenta-light-pressed: #ffffff;
495
- --color-background-accent-magenta-bold-default: var(--color-magenta-800);
496
- --color-background-accent-magenta-bold-hover: #ffffff;
497
- --color-background-accent-magenta-bold-pressed: #ffffff;
498
- --color-background-accent-yellow-default: #ffffff;
499
- --color-background-accent-yellow-hover: #ffffff;
500
- --color-background-accent-yellow-pressed: #ffffff;
501
- --color-background-accent-yellow-lighter-default: #ffffff;
502
- --color-background-accent-yellow-lighter-hover: #ffffff;
503
- --color-background-accent-yellow-lighter-pressed: #ffffff;
504
- --color-background-accent-yellow-light-default: #ffffff;
505
- --color-background-accent-yellow-light-hover: #ffffff;
506
- --color-background-accent-yellow-light-pressed: #ffffff;
507
- --color-background-accent-yellow-bold-default: #ffffff;
508
- --color-background-accent-yellow-bold-hover: #ffffff;
509
- --color-background-accent-yellow-bold-pressed: #ffffff;
510
- --color-background-neutral-default: var(--color-neutral-alpha-300a);
511
- --color-background-neutral-hover: var(--color-neutral-alpha-400a);
512
- --color-background-neutral-pressed: var(--color-neutral-alpha-500a);
513
- --color-background-neutral-light-pressed: var(--color-neutral-alpha-200a);
514
- --color-background-neutral-light-default: var(--color-dark-neutral-alpha-100a);
515
- --color-background-neutral-light-hover: var(--color-neutral-alpha-200a);
516
- --color-background-neutral-lighter-hover: var(--color-neutral-alpha-100a);
517
- --color-background-neutral-lighter-pressed: var(--color-neutral-alpha-200a);
518
- --color-background-neutral-lighter-default: rgba(9, 30, 77, 0);
519
- --color-background-info-default: #ffffff;
520
- --color-background-info-hover: #ffffff;
521
- --color-background-info-pressed: #ffffff;
522
- --color-background-success-default: #ffffff;
523
- --color-background-success-hover: #ffffff;
524
- --color-background-success-pressed: #ffffff;
525
- --color-background-alert-default: #ffffff;
526
- --color-background-alert-hover: #ffffff;
527
- --color-background-alert-pressed: #ffffff;
528
- --color-background-danger-default: #ffffff;
529
- --color-background-danger-hover: #ffffff;
530
- --color-background-danger-pressed: #ffffff;
531
- --color-border-primary: var(--color-neutral-100);
532
- --color-border-secondary: var(--color-neutral-200);
533
- --color-border-tertiary: var(--color-neutral-300);
534
- --color-border-focus: rgba(46, 144, 135, 0.4);
535
- --color-border-selected: var(--color-bcc-600);
536
- --color-border-disabled: var(--color-neutral-100);
537
- --color-border-accent-red-default: var(--color-red-600);
538
- --color-border-accent-red-hover: var(--color-red-700);
539
- --color-border-accent-red-pressed: var(--color-red-800);
540
- --color-border-accent-rust-default: var(--color-rust-600);
541
- --color-border-accent-rust-hover: var(--color-rust-700);
542
- --color-border-accent-rust-pressed: var(--color-rust-800);
543
- --color-border-accent-yellow-default: #ffffff;
544
- --color-border-accent-yellow-hover: #ffffff;
545
- --color-border-accent-yellow-pressed: #ffffff;
546
- --color-border-accent-green-default: var(--color-green-600);
547
- --color-border-accent-green-hover: var(--color-green-700);
548
- --color-border-accent-green-pressed: var(--color-green-800);
549
- --color-border-accent-teal-default: var(--color-teal-600);
550
- --color-border-accent-teal-hover: var(--color-teal-700);
551
- --color-border-accent-teal-pressed: var(--color-teal-800);
552
- --color-border-accent-sand-default: var(--color-sand-600);
553
- --color-border-accent-sand-hover: var(--color-sand-700);
554
- --color-border-accent-sand-pressed: var(--color-sand-800);
555
- --color-border-accent-blue-default: var(--color-blue-600);
556
- --color-border-accent-blue-hover: var(--color-blue-700);
557
- --color-border-accent-blue-pressed: var(--color-blue-800);
558
- --color-border-accent-purple-default: var(--color-purple-600);
559
- --color-border-accent-purple-hover: var(--color-purple-700);
560
- --color-border-accent-purple-pressed: var(--color-purple-800);
561
- --color-border-accent-magenta-default: var(--color-magenta-600);
562
- --color-border-accent-magenta-hover: var(--color-magenta-700);
563
- --color-border-accent-magenta-pressed: var(--color-magenta-800);
564
- }
565
-
566
- @theme .dark-mode {
567
- /* ✅ Semantic */
568
- --color-surface-primary: var(--color-dark-neutral-0);
569
- --color-surface-secondary: var(--color-dark-neutral-200);
570
- --color-surface-overlay-default: var(--color-dark-neutral-alpha-500a);
571
- --color-surface-inverse-primary: var(--color-neutral-0);
572
- --color-surface-inverse-secondary: var(--color-neutral-200);
573
- --color-divider-light: var(--color-dark-neutral-100);
574
- --color-divider-default: var(--color-dark-neutral-200);
575
- --color-divider-bold: var(--color-dark-neutral-300);
576
- --color-text-primary: var(--color-dark-neutral-1100);
577
- --color-text-secondary: var(--color-dark-neutral-1100);
578
- --color-text-tertiary: var(--color-dark-neutral-400);
579
- --color-text-inverse: var(--color-dark-neutral-0);
580
- --color-text-disabled: var(--color-dark-neutral-alpha-400a);
581
- --color-text-success: var(--color-green-500);
582
- --color-text-alert: var(--color-red-500);
583
- --color-text-Info: var(--color-dark-neutral-0);
584
- --color-text-danger: var(--color-dark-neutral-0);
585
- --color-text-brand-default: var(--color-bcc-400);
586
- --color-text-brand-bold: var(--color-bcc-300);
587
- --color-text-accent-rust-default: var(--color-rust-400);
588
- --color-text-accent-rust-bold: var(--color-rust-300);
589
- --color-text-accent-yellow-default: var(--color-red-400);
590
- --color-text-accent-yellow-bold: var(--color-red-300);
591
- --color-text-accent-green-default: var(--color-green-400);
592
- --color-text-accent-green-bold: var(--color-green-300);
593
- --color-text-accent-teal-default: var(--color-teal-400);
594
- --color-text-accent-teal-bold: var(--color-teal-300);
595
- --color-text-accent-sand-default: var(--color-sand-400);
596
- --color-text-accent-sand-bold: var(--color-sand-300);
597
- --color-text-accent-blue-default: var(--color-blue-400);
598
- --color-text-accent-blue-bold: var(--color-blue-300);
599
- --color-text-accent-purple-default: var(--color-purple-400);
600
- --color-text-accent-purple-bold: var(--color-purple-300);
601
- --color-text-accent-magenta-default: var(--color-magenta-400);
602
- --color-text-accent-magenta-bold: var(--color-magenta-300);
603
- --color-icon-primary: var(--color-dark-neutral-1100);
604
- --color-icon-secondary: var(--color-dark-neutral-700);
605
- --color-icon-tertiary: var(--color-dark-neutral-400);
606
- --color-icon-inverse: var(--color-dark-neutral-0);
607
- --color-icon-disabled: var(--color-dark-neutral-alpha-400a);
608
- --color-icon-success: var(--color-green-500);
609
- --color-icon-alert: var(--color-red-500);
610
- --color-icon-info: #ffffff;
611
- --color-icon-danger: #ffffff;
612
- --color-icon-accent-blue: var(--color-blue-400);
613
- --color-icon-accent-red: var(--color-red-400);
614
- --color-icon-accent-green: var(--color-green-400);
615
- --color-icon-accent-rust: var(--color-rust-400);
616
- --color-icon-accent-teal: var(--color-teal-400);
617
- --color-icon-accent-purple: var(--color-purple-400);
618
- --color-icon-accent-magenta: var(--color-magenta-400);
619
- --color-icon-accent-sand: var(--color-sand-400);
620
- --color-icon-brand: var(--color-bcc-400);
621
- --color-link-default: var(--color-blue-500);
622
- --color-link-hover: var(--color-blue-400);
623
- --color-link-visited: var(--color-blue-300);
624
- --color-background-disabled-default: #ffffff;
625
- --color-background-brand-default: var(--color-bcc-500);
626
- --color-background-brand-hover: var(--color-bcc-400);
627
- --color-background-brand-pressed: var(--color-bcc-300);
628
- --color-background-brand-lighter-default: var(--color-bcc-900);
629
- --color-background-brand-lighter-hover: var(--color-bcc-800);
630
- --color-background-brand-lighter-pressed: var(--color-bcc-700);
631
- --color-background-brand-light-default: var(--color-bcc-700);
632
- --color-background-brand-light-hover: var(--color-bcc-600);
633
- --color-background-brand-light-pressed: var(--color-bcc-500);
634
- --color-background-brand-bold-default: var(--color-bcc-300);
635
- --color-background-brand-bold-hover: var(--color-bcc-200);
636
- --color-background-brand-bold-pressed: var(--color-bcc-100);
637
- --color-background-accent-red-default: var(--color-red-500);
638
- --color-background-accent-red-hover: var(--color-red-400);
639
- --color-background-accent-red-pressed: var(--color-red-300);
640
- --color-background-accent-red-lighter-default: var(--color-red-900);
641
- --color-background-accent-red-lighter-hover: var(--color-red-800);
642
- --color-background-accent-red-lighter-pressed: var(--color-red-700);
643
- --color-background-accent-red-light-default: var(--color-red-700);
644
- --color-background-accent-red-light-hover: var(--color-red-600);
645
- --color-background-accent-red-light-pressed: var(--color-red-500);
646
- --color-background-accent-red-bold-default: var(--color-red-300);
647
- --color-background-accent-red-bold-hover: var(--color-red-400);
648
- --color-background-accent-red-bold-pressed: var(--color-red-500);
649
- --color-background-accent-rust-default: var(--color-rust-500);
650
- --color-background-accent-rust-hover: var(--color-rust-400);
651
- --color-background-accent-rust-pressed: var(--color-rust-300);
652
- --color-background-accent-rust-lighter-default: var(--color-rust-900);
653
- --color-background-accent-rust-lighter-hover: var(--color-rust-800);
654
- --color-background-accent-rust-lighter-pressed: var(--color-rust-700);
655
- --color-background-accent-rust-light-default: var(--color-rust-700);
656
- --color-background-accent-rust-light-hover: var(--color-rust-600);
657
- --color-background-accent-rust-light-pressed: var(--color-rust-500);
658
- --color-background-accent-rust-bold-default: var(--color-rust-300);
659
- --color-background-accent-rust-bold-hover: var(--color-rust-400);
660
- --color-background-accent-rust-bold-pressed: var(--color-rust-500);
661
- --color-background-accent-green-default: var(--color-green-600);
662
- --color-background-accent-green-hover: var(--color-green-700);
663
- --color-background-accent-green-pressed: var(--color-green-800);
664
- --color-background-accent-green-lighter-default: var(--color-green-900);
665
- --color-background-accent-green-lighter-hover: var(--color-green-800);
666
- --color-background-accent-green-lighter-pressed: var(--color-green-700);
667
- --color-background-accent-green-light-default: var(--color-green-700);
668
- --color-background-accent-green-light-hover: var(--color-green-600);
669
- --color-background-accent-green-light-pressed: var(--color-green-500);
670
- --color-background-accent-green-bold-default: var(--color-green-300);
671
- --color-background-accent-green-bold-hover: var(--color-green-400);
672
- --color-background-accent-green-bold-pressed: var(--color-green-500);
673
- --color-background-accent-teal-default: var(--color-teal-500);
674
- --color-background-accent-teal-hover: var(--color-teal-400);
675
- --color-background-accent-teal-pressed: var(--color-teal-300);
676
- --color-background-accent-teal-lighter-default: var(--color-teal-900);
677
- --color-background-accent-teal-lighter-hover: #ffffff;
678
- --color-background-accent-teal-lighter-pressed: #ffffff;
679
- --color-background-accent-teal-light-default: var(--color-teal-700);
680
- --color-background-accent-teal-light-hover: #ffffff;
681
- --color-background-accent-teal-light-pressed: #ffffff;
682
- --color-background-accent-teal-bold-default: var(--color-teal-300);
683
- --color-background-accent-teal-bold-hover: #ffffff;
684
- --color-background-accent-teal-bold-pressed: #ffffff;
685
- --color-background-accent-sand-default: var(--color-sand-500);
686
- --color-background-accent-sand-hover: #ffffff;
687
- --color-background-accent-sand-pressed: #ffffff;
688
- --color-background-accent-sand-lighter-default: var(--color-sand-900);
689
- --color-background-accent-sand-lighter-hover: var(--color-sand-800);
690
- --color-background-accent-sand-lighter-pressed: #ffffff;
691
- --color-background-accent-sand-light-default: var(--color-sand-700);
692
- --color-background-accent-sand-light-hover: #ffffff;
693
- --color-background-accent-sand-light-pressed: #ffffff;
694
- --color-background-accent-sand-bold-default: var(--color-sand-300);
695
- --color-background-accent-sand-bold-hover: #ffffff;
696
- --color-background-accent-sand-bold-pressed: #ffffff;
697
- --color-background-accent-blue-default: var(--color-blue-500);
698
- --color-background-accent-blue-hover: #ffffff;
699
- --color-background-accent-blue-pressed: #ffffff;
700
- --color-background-accent-blue-lighter-default: var(--color-blue-900);
701
- --color-background-accent-blue-lighter-hover: #ffffff;
702
- --color-background-accent-blue-lighter-pressed: #ffffff;
703
- --color-background-accent-blue-light-default: var(--color-blue-700);
704
- --color-background-accent-blue-light-hover: #ffffff;
705
- --color-background-accent-blue-light-pressed: #ffffff;
706
- --color-background-accent-blue-bold-default: var(--color-blue-300);
707
- --color-background-accent-blue-bold-hover: #ffffff;
708
- --color-background-accent-blue-bold-pressed: #ffffff;
709
- --color-background-accent-purple-default: var(--color-purple-500);
710
- --color-background-accent-purple-hover: #ffffff;
711
- --color-background-accent-purple-pressed: #ffffff;
712
- --color-background-accent-purple-lighter-default: var(--color-purple-900);
713
- --color-background-accent-purple-lighter-hover: #ffffff;
714
- --color-background-accent-purple-lighter-pressed: #ffffff;
715
- --color-background-accent-purple-light-default: var(--color-purple-700);
716
- --color-background-accent-purple-light-hover: #ffffff;
717
- --color-background-accent-purple-light-pressed: #ffffff;
718
- --color-background-accent-purple-bold-default: var(--color-purple-300);
719
- --color-background-accent-purple-bold-hover: #ffffff;
720
- --color-background-accent-purple-bold-pressed: #ffffff;
721
- --color-background-accent-magenta-default: var(--color-magenta-500);
722
- --color-background-accent-magenta-hover: #ffffff;
723
- --color-background-accent-magenta-pressed: #ffffff;
724
- --color-background-accent-magenta-lighter-default: var(--color-magenta-900);
725
- --color-background-accent-magenta-lighter-hover: #ffffff;
726
- --color-background-accent-magenta-lighter-pressed: #ffffff;
727
- --color-background-accent-magenta-light-default: var(--color-magenta-700);
728
- --color-background-accent-magenta-light-hover: #ffffff;
729
- --color-background-accent-magenta-light-pressed: #ffffff;
730
- --color-background-accent-magenta-bold-default: var(--color-magenta-300);
731
- --color-background-accent-magenta-bold-hover: #ffffff;
732
- --color-background-accent-magenta-bold-pressed: #ffffff;
733
- --color-background-accent-yellow-default: #ffffff;
734
- --color-background-accent-yellow-hover: #ffffff;
735
- --color-background-accent-yellow-pressed: #ffffff;
736
- --color-background-accent-yellow-lighter-default: #ffffff;
737
- --color-background-accent-yellow-lighter-hover: #ffffff;
738
- --color-background-accent-yellow-lighter-pressed: #ffffff;
739
- --color-background-accent-yellow-light-default: #ffffff;
740
- --color-background-accent-yellow-light-hover: #ffffff;
741
- --color-background-accent-yellow-light-pressed: #ffffff;
742
- --color-background-accent-yellow-bold-default: #ffffff;
743
- --color-background-accent-yellow-bold-hover: #ffffff;
744
- --color-background-accent-yellow-bold-pressed: #ffffff;
745
- --color-background-neutral-default: var(--color-dark-neutral-alpha-300a);
746
- --color-background-neutral-hover: var(--color-dark-neutral-alpha-400a);
747
- --color-background-neutral-pressed: var(--color-dark-neutral-alpha-500a);
748
- --color-background-neutral-light-pressed: var(--color-dark-neutral-alpha-300a);
749
- --color-background-neutral-light-default1: var(--color-dark-neutral-alpha-100a);
750
- --color-background-neutral-light-hover: var(--color-dark-neutral-alpha-200a);
751
- --color-background-neutral-lighter-hover: var(--color-dark-neutral-alpha-100a);
752
- --color-background-neutral-lighter-pressed: var(--color-dark-neutral-alpha-200a);
753
- --color-background-neutral-lighter-default: rgba(166, 197, 226, 0);
754
- --color-background-info-default: #ffffff;
755
- --color-background-info-hover: #ffffff;
756
- --color-background-info-pressed: #ffffff;
757
- --color-background-success-default: #ffffff;
758
- --color-background-success-hover: #ffffff;
759
- --color-background-success-pressed: #ffffff;
760
- --color-background-alert-default: #ffffff;
761
- --color-background-alert-hover: #ffffff;
762
- --color-background-alert-pressed: #ffffff;
763
- --color-background-danger-default: #ffffff;
764
- --color-background-danger-hover: #ffffff;
765
- --color-background-danger-pressed: #ffffff;
766
- --color-border-primary: var(--color-dark-neutral-200);
767
- --color-border-secondary: var(--color-dark-neutral-300);
768
- --color-border-tertiary: var(--color-dark-neutral-400);
769
- --color-border-focus: rgba(115, 178, 172, 0.4);
770
- --color-border-selected: var(--color-bcc-500);
771
- --color-border-disabled: var(--color-dark-neutral-200);
772
- --color-border-accent-red-default: var(--color-red-500);
773
- --color-border-accent-red-hover: var(--color-red-400);
774
- --color-border-accent-red-pressed: var(--color-red-300);
775
- --color-border-accent-rust-default: var(--color-rust-500);
776
- --color-border-accent-rust-hover: var(--color-rust-400);
777
- --color-border-accent-rust-pressed: var(--color-rust-300);
778
- --color-border-accent-yellow-default: #ffffff;
779
- --color-border-accent-yellow-hover: #ffffff;
780
- --color-border-accent-yellow-pressed: #ffffff;
781
- --color-border-accent-green-default: var(--color-green-500);
782
- --color-border-accent-green-hover: var(--color-green-400);
783
- --color-border-accent-green-pressed: var(--color-green-300);
784
- --color-border-accent-teal-default: var(--color-teal-500);
785
- --color-border-accent-teal-hover: var(--color-teal-400);
786
- --color-border-accent-teal-pressed: var(--color-teal-300);
787
- --color-border-accent-sand-default: var(--color-sand-500);
788
- --color-border-accent-sand-hover: var(--color-sand-400);
789
- --color-border-accent-sand-pressed: var(--color-sand-300);
790
- --color-border-accent-blue-default: var(--color-blue-500);
791
- --color-border-accent-blue-hover: var(--color-blue-400);
792
- --color-border-accent-blue-pressed: var(--color-blue-300);
793
- --color-border-accent-purple-default: var(--color-purple-500);
794
- --color-border-accent-purple-hover: var(--color-purple-400);
795
- --color-border-accent-purple-pressed: var(--color-purple-300);
796
- --color-border-accent-magenta-default: var(--color-magenta-500);
797
- --color-border-accent-magenta-hover: var(--color-magenta-400);
798
- --color-border-accent-magenta-pressed: var(--color-magenta-300);
799
- }