@bcc-code/design-tokens 0.5.0 → 1.0.3

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 (17) hide show
  1. package/README.md +98 -7
  2. package/dist/primevue-preset.js +5 -0
  3. package/dist/tailwind.css +799 -0
  4. package/dist/variables.css +750 -0
  5. package/package.json +24 -25
  6. package/LICENSE +0 -201
  7. package/dist/design-tokens.js +0 -1445
  8. package/dist/design-tokens.umd.cjs +0 -1
  9. package/dist_types/index.d.ts +0 -1
  10. package/dist_types/tailwind/backgroundColor.d.ts +0 -65
  11. package/dist_types/tailwind/bccForbundetTheme.d.ts +0 -3
  12. package/dist_types/tailwind/borderColor.d.ts +0 -28
  13. package/dist_types/tailwind/colors.d.ts +0 -265
  14. package/dist_types/tailwind/fontFamily.d.ts +0 -4
  15. package/dist_types/tailwind/outlineColor.d.ts +0 -28
  16. package/dist_types/tailwind/ringColor.d.ts +0 -28
  17. package/dist_types/tailwind/textColor.d.ts +0 -31
package/dist/tailwind.css ADDED
@@ -0,0 +1,799 @@
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
+ }