@bcc-code/design-tokens 3.0.2 → 3.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.
Files changed (10) hide show
  1. package/README.md +1 -1
  2. package/build/bcc/dark.css +217 -302
  3. package/build/bcc/dark.js +289 -444
  4. package/build/bcc/light.css +318 -317
  5. package/build/bcc/light.js +450 -455
  6. package/build/bcc/primitives.js +91 -92
  7. package/build/bcc/tailwind-dark.css +217 -302
  8. package/build/bcc/tailwind-light.css +318 -317
  9. package/config/primevue.config.js +58 -58
  10. package/package.json +1 -1
package/README.md CHANGED
@@ -43,7 +43,7 @@ npm install @bcc-code/design-tokens
43
43
  ### PrimeVue
44
44
 
45
45
  ```javascript
46
- import { BCCPreset } from "@bcc-code/design-tokens/primevue";
46
+ import BCCPreset from "@bcc-code/design-tokens/primevue";
47
47
 
48
48
  app.use(PrimeVue, {
49
49
  theme: {
package/build/bcc/dark.css CHANGED
@@ -12,12 +12,17 @@
12
12
  --color-neutral-500: #8590a2;
13
13
  --color-neutral-600: #758195;
14
14
  --color-neutral-700: #626f86;
15
- --color-neutral-800: #4b5668;
16
- --color-neutral-900: #374152;
17
- --color-neutral-1000: #282f3c;
18
- --color-neutral-1100: #1e242d;
15
+ --color-neutral-800: #44546f;
16
+ --color-neutral-900: #2c3e5d;
17
+ --color-neutral-1000: #172b4d;
18
+ --color-neutral-1100: #091e42;
19
+ --color-neutral-alpha-100-a: rgba(9, 30, 77, 0.03);
20
+ --color-neutral-alpha-200-a: rgba(9, 30, 77, 0.06);
21
+ --color-neutral-alpha-300-a: rgba(9, 30, 77, 0.14);
22
+ --color-neutral-alpha-400-a: rgba(9, 30, 77, 0.32);
23
+ --color-neutral-alpha-500-a: rgba(9, 30, 77, 0.5);
19
24
  --color-dark-neutral-0: #161a1d;
20
- --color-dark-neutral-100: #1d2125;
25
+ --color-dark-neutral-100: #101214;
21
26
  --color-dark-neutral-200: #22272b;
22
27
  --color-dark-neutral-250: #282e33;
23
28
  --color-dark-neutral-300: #2c333a;
@@ -31,46 +36,23 @@
31
36
  --color-dark-neutral-1000: #c7d1db;
32
37
  --color-dark-neutral-1100: #dee4ea;
33
38
  --color-dark-neutral-negative-100: #101214;
34
- --color-dark-green-100: #f0fcfa;
35
- --color-dark-green-200: #d2eeeb;
36
- --color-dark-green-300: #a0cec8;
37
- --color-dark-green-400: #6fb5ad;
38
- --color-dark-green-500: #3e9f97;
39
- --color-dark-green-600: #1d7f78;
40
- --color-dark-green-700: #0c625c;
41
- --color-dark-green-800: #014d49;
42
- --color-dark-green-900: #0b3633;
43
- --color-dark-green-1000: #012320;
44
- --color-orange-100: #fffaed;
45
- --color-orange-200: #fee3c1;
46
- --color-orange-300: #f6b981;
47
- --color-orange-400: #f19457;
48
- --color-orange-500: #da772e;
49
- --color-orange-600: #b55919;
50
- --color-orange-700: #943a14;
51
- --color-orange-800: #782612;
52
- --color-orange-900: #5d1712;
53
- --color-orange-1000: #420e0d;
54
- --color-red-100: #fff8f3;
55
- --color-red-200: #fee2dd;
56
- --color-red-300: #fab6ad;
57
- --color-red-400: #fa877e;
58
- --color-red-500: #ed6362;
59
- --color-red-600: #ca414e;
60
- --color-red-700: #a42237;
61
- --color-red-800: #811436;
62
- --color-red-900: #630d2e;
63
- --color-red-1000: #440223;
64
- --color-green-100: #efffed;
65
- --color-green-200: #cbf3c9;
66
- --color-green-300: #83d895;
67
- --color-green-400: #32c180;
68
- --color-green-500: #1ca673;
69
- --color-green-600: #09825d;
70
- --color-green-700: #0c6241;
71
- --color-green-800: #094c3b;
72
- --color-green-900: #073734;
73
- --color-green-1000: #032429;
39
+ --color-dark-neutral-alpha-100-a: rgba(0, 0, 0, 0.24);
40
+ --color-dark-neutral-alpha-200-a: rgba(188, 214, 240, 0.08);
41
+ --color-dark-neutral-alpha-250-a: rgba(188, 214, 240, 0.1);
42
+ --color-dark-neutral-alpha-300-a: rgba(188, 214, 240, 0.16);
43
+ --color-dark-neutral-alpha-350-a: rgba(188, 214, 240, 0.2);
44
+ --color-dark-neutral-alpha-400-a: rgba(188, 214, 240, 0.28);
45
+ --color-dark-neutral-alpha-500-a: rgba(188, 214, 240, 0.5);
46
+ --color-blue-100: #f6fbff;
47
+ --color-blue-200: #d9ecff;
48
+ --color-blue-300: #a6cdfd;
49
+ --color-blue-400: #7cabf9;
50
+ --color-blue-500: #608ef6;
51
+ --color-blue-600: #446add;
52
+ --color-blue-700: #274eb5;
53
+ --color-blue-800: #273c8f;
54
+ --color-blue-900: #212c64;
55
+ --color-blue-1000: #091e47;
74
56
  --color-teal-100: #f6fbff;
75
57
  --color-teal-200: #c3f2f8;
76
58
  --color-teal-300: #82d3e3;
@@ -81,6 +63,26 @@
81
63
  --color-teal-800: #09486b;
82
64
  --color-teal-900: #0d324d;
83
65
  --color-teal-1000: #0c2132;
66
+ --color-bcc-100: #f0fcfa;
67
+ --color-bcc-200: #d2eeeb;
68
+ --color-bcc-300: #a0cec8;
69
+ --color-bcc-400: #6fb5ad;
70
+ --color-bcc-500: #3e9f97;
71
+ --color-bcc-600: #1d7f78;
72
+ --color-bcc-700: #0c625c;
73
+ --color-bcc-800: #014d49;
74
+ --color-bcc-900: #0b3633;
75
+ --color-bcc-1000: #012320;
76
+ --color-green-100: #efffed;
77
+ --color-green-200: #cbf3c9;
78
+ --color-green-300: #83d895;
79
+ --color-green-400: #32c180;
80
+ --color-green-500: #1ca673;
81
+ --color-green-600: #09825d;
82
+ --color-green-700: #0c6241;
83
+ --color-green-800: #094c3b;
84
+ --color-green-900: #073734;
85
+ --color-green-1000: #032429;
84
86
  --color-brown-100: #f9faf4;
85
87
  --color-brown-200: #ece8dc;
86
88
  --color-brown-300: #d1c5b0;
@@ -91,49 +93,6 @@
91
93
  --color-brown-800: #553d28;
92
94
  --color-brown-900: #3f2c1e;
93
95
  --color-brown-1000: #2e1b0f;
94
- --color-blue-100: #f6fbff;
95
- --color-blue-200: #d9ecff;
96
- --color-blue-300: #a6cdfd;
97
- --color-blue-400: #7cabf9;
98
- --color-blue-500: #608ef6;
99
- --color-blue-600: #446add;
100
- --color-blue-700: #274eb5;
101
- --color-blue-800: #273c8f;
102
- --color-blue-900: #212c64;
103
- --color-blue-1000: #091e47;
104
- --color-purple-100: #f6f9ff;
105
- --color-purple-200: #e3e3fe;
106
- --color-purple-300: #c9c3ec;
107
- --color-purple-400: #afa0e0;
108
- --color-purple-500: #9a82da;
109
- --color-purple-600: #8360c3;
110
- --color-purple-700: #61479c;
111
- --color-purple-800: #493481;
112
- --color-purple-900: #352465;
113
- --color-purple-1000: #1d154d;
114
- --color-magenta-100: #fff8ff;
115
- --color-magenta-200: #fce0f8;
116
- --color-magenta-300: #f3b4e2;
117
- --color-magenta-400: #eb8acf;
118
- --color-magenta-500: #de66b0;
119
- --color-magenta-600: #be428f;
120
- --color-magenta-700: #952e70;
121
- --color-magenta-800: #751f57;
122
- --color-magenta-900: #5b1043;
123
- --color-magenta-1000: #3f0534;
124
- --color-neutral-alpha-100-a: rgba(9, 30, 77, 0.03);
125
- --color-neutral-alpha-500-a: rgba(9, 30, 77, 0.5);
126
- --color-neutral-alpha-200-a: rgba(9, 30, 77, 0.06);
127
- --color-neutral-alpha-300-a: rgba(9, 30, 77, 0.14);
128
- --color-neutral-alpha-400-a: rgba(9, 30, 77, 0.31);
129
- --color-dark-neutral-alpha-100-a: rgba(188, 214, 240, 0.04);
130
- --color-dark-neutral-alpha-200-a: rgba(188, 214, 240, 0.84);
131
- --color-dark-neutral-alpha-300-a: rgba(188, 214, 240, 0.16);
132
- --color-dark-neutral-alpha-400-a: rgba(188, 214, 240, 0.28);
133
- --color-dark-neutral-alpha-500-a: rgba(188, 214, 240, 0.5);
134
- --color-dark-neutral-alpha-250-a: rgba(188, 214, 240, 0.1);
135
- --color-dark-neutral-alpha-350-a: rgba(188, 214, 240, 0.2);
136
- --color-dark-neutral-alpha-negative-100-a: rgba(0, 0, 0, 0.24);
137
96
  --color-yellow-100: #fdf8e9;
138
97
  --color-yellow-200: #f8e6a0;
139
98
  --color-yellow-300: #e9c348;
@@ -144,11 +103,51 @@
144
103
  --color-yellow-800: #653805;
145
104
  --color-yellow-900: #4b2c04;
146
105
  --color-yellow-1000: #2d1f00;
106
+ --color-orange-100: #fffaed;
107
+ --color-orange-200: #fee3c1;
108
+ --color-orange-300: #f6b981;
109
+ --color-orange-400: #f19457;
110
+ --color-orange-500: #da772e;
111
+ --color-orange-600: #b55919;
112
+ --color-orange-700: #943a14;
113
+ --color-orange-800: #782612;
114
+ --color-orange-900: #5d1712;
115
+ --color-orange-1000: #420e0d;
116
+ --color-red-100: #fff8f3;
117
+ --color-red-200: #fee2dd;
118
+ --color-red-300: #fab6ad;
119
+ --color-red-400: #fa877e;
120
+ --color-red-500: #ed6362;
121
+ --color-red-600: #ca414e;
122
+ --color-red-700: #a42237;
123
+ --color-red-800: #811436;
124
+ --color-red-900: #630d2e;
125
+ --color-red-1000: #440223;
126
+ --color-magenta-100: #fff8ff;
127
+ --color-magenta-200: #fce0f8;
128
+ --color-magenta-300: #f3b4e2;
129
+ --color-magenta-400: #eb8acf;
130
+ --color-magenta-500: #de66b0;
131
+ --color-magenta-600: #be428f;
132
+ --color-magenta-700: #952e70;
133
+ --color-magenta-800: #751f57;
134
+ --color-magenta-900: #5b1043;
135
+ --color-magenta-1000: #3f0534;
136
+ --color-purple-100: #f6f9ff;
137
+ --color-purple-200: #e3e3fe;
138
+ --color-purple-300: #c9c3ec;
139
+ --color-purple-400: #afa0e0;
140
+ --color-purple-500: #9a82da;
141
+ --color-purple-600: #8360c3;
142
+ --color-purple-700: #61479c;
143
+ --color-purple-800: #493481;
144
+ --color-purple-900: #352465;
145
+ --color-purple-1000: #1d154d;
147
146
  --color-transparent: rgba(0, 0, 0, 0);
148
- --color-background-accent-neutral-subtle-default: rgba(0, 0, 0, 0);
149
147
  --color-background-inverse-subtle-default: rgba(255, 255, 255, 0.16); /** Use for backgrounds of elements on a bold background, such as in the buttons on spotlight cards. */
150
148
  --color-background-inverse-subtle-hovered: rgba(255, 255, 255, 0.24); /** Use for the hovered state of color.background.inverse.subtle */
151
149
  --color-background-inverse-subtle-pressed: rgba(255, 255, 255, 0.32); /** Use for the pressed state of color.background.inverse.subtle */
150
+ --color-background-accent-neutral-subtle-default: rgba(0, 0, 0, 0);
152
151
  --color-blanket-default: rgba(16, 18, 20, 0.6); /** Use for the screen overlay that appears with modal dialogs */
153
152
  --color-blanket-selected: rgba(29, 122, 252, 0.08); /** Use as an overlay to communicate selected states when a simple background color change isn't possible, such as in Editor block elements */
154
153
  --color-blanket-danger: rgba(227, 73, 53, 0.08); /** Use as an overlay to communicate danger states when a simple background color change isn't possible, such as deletion of Editor block elements */
@@ -225,124 +224,149 @@
225
224
  --color-text-subtle: var(--color-dark-neutral-800);
226
225
  --color-text-subtlest: var(--color-dark-neutral-700);
227
226
  --color-text-disabled: var(--color-dark-neutral-alpha-400-a);
228
- --color-text-selected: var(--color-dark-green-400);
227
+ --color-text-selected: var(--color-bcc-400);
229
228
  --color-text-inverse: var(--color-dark-neutral-100);
230
229
  --color-text-success: var(--color-green-300);
231
230
  --color-text-danger: var(--color-red-300);
232
231
  --color-text-information: var(--color-blue-300);
233
232
  --color-text-warning-default: var(--color-yellow-300);
234
233
  --color-text-warning-inverse: var(--color-dark-neutral-100);
235
- --color-text-brand-default: var(--color-dark-green-400);
236
- --color-text-brand-bold: var(--color-dark-green-300);
237
- --color-text-accent-orange-default: var(--color-orange-300);
238
- --color-text-accent-orange-bold: var(--color-orange-200);
239
- --color-text-accent-yellow-default: var(--color-yellow-300);
240
- --color-text-accent-yellow-bold: var(--color-yellow-200);
241
- --color-text-accent-green-default: var(--color-green-300);
242
- --color-text-accent-green-bold: var(--color-green-200);
234
+ --color-text-brand-default: var(--color-bcc-400);
235
+ --color-text-brand-bold: var(--color-bcc-300);
236
+ --color-text-accent-gray-default: var(--color-dark-neutral-800);
237
+ --color-text-accent-gray-bold: var(--color-dark-neutral-1100);
238
+ --color-text-accent-blue-default: var(--color-blue-300);
239
+ --color-text-accent-blue-bold: var(--color-blue-200);
243
240
  --color-text-accent-teal-default: var(--color-teal-300);
244
241
  --color-text-accent-teal-bold: var(--color-teal-200);
242
+ --color-text-accent-green-default: var(--color-green-300);
243
+ --color-text-accent-green-bold: var(--color-green-200);
245
244
  --color-text-accent-brown-default: var(--color-brown-300);
246
245
  --color-text-accent-brown-bold: var(--color-brown-200);
247
- --color-text-accent-blue-default: var(--color-blue-300);
248
- --color-text-accent-blue-bold: var(--color-blue-200);
249
- --color-text-accent-purple-default: var(--color-purple-300);
250
- --color-text-accent-purple-bold: var(--color-purple-200);
251
- --color-text-accent-magenta-default: var(--color-magenta-300);
252
- --color-text-accent-magenta-bold: var(--color-magenta-200);
253
- --color-text-accent-gray-default: var(--color-dark-neutral-800);
254
- --color-text-accent-gray-bold: var(--color-dark-neutral-1100);
246
+ --color-text-accent-yellow-default: var(--color-yellow-300);
247
+ --color-text-accent-yellow-bold: var(--color-yellow-200);
248
+ --color-text-accent-orange-default: var(--color-orange-300);
249
+ --color-text-accent-orange-bold: var(--color-orange-200);
255
250
  --color-text-accent-red-default: var(--color-red-300);
256
251
  --color-text-accent-red-bold: var(--color-red-200);
252
+ --color-text-accent-magenta-default: var(--color-magenta-300);
253
+ --color-text-accent-magenta-bold: var(--color-magenta-200);
254
+ --color-text-accent-purple-default: var(--color-purple-300);
255
+ --color-text-accent-purple-bold: var(--color-purple-200);
257
256
  --color-link-default: var(--color-blue-400);
258
257
  --color-link-pressed: var(--color-blue-300);
259
258
  --color-link-visited-default: var(--color-purple-300);
260
259
  --color-link-visited-hover: var(--color-purple-200);
260
+ --color-icon-default: var(--color-dark-neutral-1000);
261
+ --color-icon-subtle: var(--color-dark-neutral-800);
262
+ --color-icon-subtlest: var(--color-dark-neutral-700);
263
+ --color-icon-disabled: var(--color-dark-neutral-alpha-400-a);
264
+ --color-icon-selected: var(--color-bcc-400);
265
+ --color-icon-inverse: var(--color-dark-neutral-100);
266
+ --color-icon-success: var(--color-green-500);
267
+ --color-icon-danger: var(--color-red-500);
268
+ --color-icon-information: var(--color-blue-500);
269
+ --color-icon-warning-default: var(--color-yellow-300);
270
+ --color-icon-warning-inverse: var(--color-dark-neutral-100);
271
+ --color-icon-brand-default: var(--color-bcc-400);
272
+ --color-icon-brand-bold: var(--color-bcc-300);
273
+ --color-icon-accent-gray-default: var(--color-dark-neutral-600);
274
+ --color-icon-accent-gray-bold: var(--color-dark-neutral-700);
275
+ --color-icon-accent-blue-default: var(--color-blue-500);
276
+ --color-icon-accent-blue-bold: var(--color-blue-400);
277
+ --color-icon-accent-teal-default: var(--color-teal-500);
278
+ --color-icon-accent-teal-bold: var(--color-teal-400);
279
+ --color-icon-accent-green-default: var(--color-green-500);
280
+ --color-icon-accent-green-bold: var(--color-green-400);
281
+ --color-icon-accent-brown-default: var(--color-brown-500);
282
+ --color-icon-accent-brown-bold: var(--color-brown-400);
283
+ --color-icon-accent-yellow-default: var(--color-yellow-300);
284
+ --color-icon-accent-yellow-bold: var(--color-yellow-200);
285
+ --color-icon-accent-orange-default: var(--color-orange-500);
286
+ --color-icon-accent-orange-bold: var(--color-orange-400);
287
+ --color-icon-accent-red-default: var(--color-red-600);
288
+ --color-icon-accent-red-bold: var(--color-red-500);
289
+ --color-icon-accent-magenta-default: var(--color-magenta-500);
290
+ --color-icon-accent-magenta-bold: var(--color-magenta-400);
291
+ --color-icon-accent-purple-default: var(--color-purple-500);
292
+ --color-icon-accent-purple-bold: var(--color-purple-400);
293
+ --color-border-default: var(--color-dark-neutral-alpha-300-a);
294
+ --color-border-bold: var(--color-dark-neutral-600);
295
+ --color-border-disabled: var(--color-dark-neutral-alpha-200-a);
296
+ --color-border-selected: var(--color-bcc-400);
297
+ --color-border-focused: var(--color-bcc-300);
298
+ --color-border-inverse: var(--color-dark-neutral-0);
299
+ --color-border-input: var(--color-dark-neutral-500);
300
+ --color-border-success: var(--color-green-500);
301
+ --color-border-information: var(--color-blue-500);
302
+ --color-border-danger: var(--color-red-500);
303
+ --color-border-warning: var(--color-yellow-500);
304
+ --color-border-brand: var(--color-bcc-400);
305
+ --color-border-accent-gray: var(--color-dark-neutral-600);
306
+ --color-border-accent-blue: var(--color-blue-500);
307
+ --color-border-accent-teal: var(--color-teal-500);
308
+ --color-border-accent-green: var(--color-green-500);
309
+ --color-border-accent-brown: var(--color-brown-500);
310
+ --color-border-accent-yellow: var(--color-yellow-500);
311
+ --color-border-accent-orange: var(--color-orange-500);
312
+ --color-border-accent-red: var(--color-red-500);
313
+ --color-border-accent-magenta: var(--color-magenta-500);
314
+ --color-border-accent-purple: var(--color-purple-500);
261
315
  --color-background-disabled-default: var(--color-dark-neutral-alpha-100-a);
262
- --color-background-brand-subtlest-default: var(--color-dark-green-1000);
263
- --color-background-brand-subtlest-hover: var(--color-dark-green-900);
264
- --color-background-brand-subtlest-pressed: var(--color-dark-green-800);
265
- --color-background-brand-subtler-default: var(--color-dark-green-900);
266
- --color-background-brand-subtler-hover: var(--color-dark-green-800);
267
- --color-background-brand-subtler-pressed: var(--color-dark-green-700);
268
- --color-background-brand-subtle-default: var(--color-dark-green-700);
269
- --color-background-brand-subtle-hover: var(--color-dark-green-600);
270
- --color-background-brand-subtle-pressed: var(--color-dark-green-500);
271
- --color-background-brand-bolder-default: var(--color-dark-green-400);
272
- --color-background-brand-bolder-hover: var(--color-dark-green-300);
273
- --color-background-brand-bolder-pressed: var(--color-dark-green-200);
274
- --color-background-accent-red-subtlest-default: var(--color-red-1000);
275
- --color-background-accent-red-subtlest-hover: var(--color-red-900);
276
- --color-background-accent-red-subtlest-pressed: var(--color-red-800);
277
- --color-background-accent-red-subtler-default: var(--color-red-900);
278
- --color-background-accent-red-subtler-hover: var(--color-red-800);
279
- --color-background-accent-red-subtler-pressed: var(--color-red-700);
280
- --color-background-accent-red-subtle-default: var(--color-red-700);
281
- --color-background-accent-red-subtle-hover: var(--color-red-600);
282
- --color-background-accent-red-subtle-pressed: var(--color-red-500);
283
- --color-background-accent-red-bolder-default: var(--color-red-400);
284
- --color-background-accent-red-bolder-hover: var(--color-red-300);
285
- --color-background-accent-red-bolder-pressed: var(--color-red-200);
286
- --color-background-accent-orange-subtlest-default: var(--color-orange-1000);
287
- --color-background-accent-orange-subtlest-hover: var(--color-orange-900);
288
- --color-background-accent-orange-subtlest-pressed: var(--color-orange-800);
289
- --color-background-accent-orange-subtler-default: var(--color-orange-900);
290
- --color-background-accent-orange-subtler-hover: var(--color-orange-800);
291
- --color-background-accent-orange-subtler-pressed: var(--color-orange-700);
292
- --color-background-accent-orange-subtle-default: var(--color-orange-700);
293
- --color-background-accent-orange-subtle-hover: var(--color-orange-600);
294
- --color-background-accent-orange-subtle-pressed: var(--color-orange-500);
295
- --color-background-accent-orange-bolder-default: var(--color-orange-400);
296
- --color-background-accent-orange-bolder-hover: var(--color-orange-300);
297
- --color-background-accent-orange-bolder-pressed: var(--color-orange-200);
298
- --color-background-accent-green-subtlest-default: var(--color-green-1000);
299
- --color-background-accent-green-subtlest-hover: var(--color-green-900);
300
- --color-background-accent-green-subtlest-pressed: var(--color-green-800);
301
- --color-background-accent-green-subtler-default: var(--color-green-900);
302
- --color-background-accent-green-subtler-hover: var(--color-green-800);
303
- --color-background-accent-green-subtler-pressed: var(--color-green-700);
304
- --color-background-accent-green-subtle-default: var(--color-green-700);
305
- --color-background-accent-green-subtle-hover: var(--color-green-600);
306
- --color-background-accent-green-subtle-pressed: var(--color-green-500);
307
- --color-background-accent-green-bolder-default: var(--color-green-400);
308
- --color-background-accent-green-bolder-hover: var(--color-green-300);
309
- --color-background-accent-green-bolder-pressed: var(--color-green-200);
310
- --color-background-accent-teal-subtlest-default: var(--color-teal-1000);
311
- --color-background-accent-teal-subtlest-hover: var(--color-teal-900);
312
- --color-background-accent-teal-subtlest-pressed: var(--color-teal-800);
313
- --color-background-accent-teal-subtler-default: var(--color-teal-900);
314
- --color-background-accent-teal-subtler-hover: var(--color-teal-800);
315
- --color-background-accent-teal-subtler-pressed: var(--color-teal-700);
316
- --color-background-accent-teal-subtle-default: var(--color-teal-700);
317
- --color-background-accent-teal-subtle-hover: var(--color-teal-600);
318
- --color-background-accent-teal-subtle-pressed: var(--color-teal-500);
319
- --color-background-accent-teal-bolder-default: var(--color-teal-400);
320
- --color-background-accent-teal-bolder-hover: var(--color-teal-300);
321
- --color-background-accent-teal-bolder-pressed: var(--color-teal-200);
322
- --color-background-accent-brown-subtlest-default: var(--color-brown-1000);
323
- --color-background-accent-brown-subtlest-hover: var(--color-brown-900);
324
- --color-background-accent-brown-subtlest-pressed: var(--color-brown-800);
325
- --color-background-accent-brown-subtler-default: var(--color-brown-900);
326
- --color-background-accent-brown-subtler-hover: var(--color-brown-800);
327
- --color-background-accent-brown-subtler-pressed: var(--color-brown-700);
328
- --color-background-accent-brown-subtle-default: var(--color-brown-700);
329
- --color-background-accent-brown-subtle-hover: var(--color-brown-600);
330
- --color-background-accent-brown-subtle-pressed: var(--color-brown-500);
331
- --color-background-accent-brown-bolder-default: var(--color-brown-400);
332
- --color-background-accent-brown-bolder-hover: var(--color-brown-300);
333
- --color-background-accent-brown-bolder-pressed: var(--color-brown-200);
334
- --color-background-accent-blue-subtlest-default: var(--color-blue-1000);
335
- --color-background-accent-blue-subtlest-hover: var(--color-blue-900);
336
- --color-background-accent-blue-subtlest-pressed: var(--color-blue-800);
337
- --color-background-accent-blue-subtler-default: var(--color-blue-900);
338
- --color-background-accent-blue-subtler-hover: var(--color-blue-800);
339
- --color-background-accent-blue-subtler-pressed: var(--color-blue-700);
340
- --color-background-accent-blue-subtle-default: var(--color-blue-700);
341
- --color-background-accent-blue-subtle-hover: var(--color-blue-600);
342
- --color-background-accent-blue-subtle-pressed: var(--color-blue-500);
343
- --color-background-accent-blue-bolder-default: var(--color-blue-400);
344
- --color-background-accent-blue-bolder-hover: var(--color-blue-300);
345
- --color-background-accent-blue-bolder-pressed: var(--color-blue-200);
316
+ --color-background-selected-default: var(--color-bcc-1000); /** Use for the background of elements in a selected state, such as in opened dropdown buttons. */
317
+ --color-background-selected-hovered: var(--color-bcc-900); /** Use for the background of elements in a selected state, such as in opened dropdown buttons. */
318
+ --color-background-selected-pressed: var(--color-bcc-800); /** Use for the background of elements in a selected state, such as in opened dropdown buttons. */
319
+ --color-background-selected-bold-default: var(--color-bcc-400); /** Use for the backgrounds of elements in a selected state, such as checkboxes and radio buttons. */
320
+ --color-background-selected-bold-hovered: var(--color-bcc-300); /** Use for the backgrounds of elements in a selected state, such as checkboxes and radio buttons. */
321
+ --color-background-selected-bold-pressed: var(--color-bcc-200); /** Use for the backgrounds of elements in a selected state, such as checkboxes and radio buttons. */
322
+ --color-background-inverse-default: var(--color-neutral-0);
323
+ --color-background-input-default: var(--color-dark-neutral-200); /** Use for background of form UI elements, such as text fields, checkboxes, and radio buttons. */
324
+ --color-background-input-hovered: var(--color-dark-neutral-300); /** Hovered state for color.background.input */
325
+ --color-background-input-pressed: var(--color-dark-neutral-200); /** Pressed state for color.background.input */
326
+ --color-background-information-default: var(--color-blue-1000);
327
+ --color-background-information-hover: var(--color-blue-900);
328
+ --color-background-information-pressed: var(--color-blue-800);
329
+ --color-background-information-bolder-default: var(--color-blue-400);
330
+ --color-background-information-bolder-hover: var(--color-blue-300);
331
+ --color-background-information-bolder-pressed: var(--color-blue-200);
332
+ --color-background-success-default: var(--color-green-1000);
333
+ --color-background-success-hover: var(--color-green-900);
334
+ --color-background-success-pressed: var(--color-green-800);
335
+ --color-background-success-bolder-default: var(--color-green-400);
336
+ --color-background-success-bolder-hover: var(--color-green-300);
337
+ --color-background-success-bolder-pressed: var(--color-green-200);
338
+ --color-background-danger-default: var(--color-red-1000);
339
+ --color-background-danger-hover: var(--color-red-900);
340
+ --color-background-danger-pressed: var(--color-red-800);
341
+ --color-background-danger-bolder-default: var(--color-red-400);
342
+ --color-background-danger-bolder-hover: var(--color-red-300);
343
+ --color-background-danger-bolder-pressed: var(--color-red-200);
344
+ --color-background-warning-default: var(--color-yellow-1000);
345
+ --color-background-warning-hover: var(--color-yellow-900);
346
+ --color-background-warning-pressed: var(--color-yellow-800);
347
+ --color-background-warning-bolder-default: var(--color-yellow-400);
348
+ --color-background-warning-bolder-hover: var(--color-yellow-300);
349
+ --color-background-warning-bolder-pressed: var(--color-yellow-200);
350
+ --color-background-brand-subtlest-default: var(--color-bcc-1000);
351
+ --color-background-brand-subtlest-hover: var(--color-bcc-900);
352
+ --color-background-brand-subtlest-pressed: var(--color-bcc-800);
353
+ --color-background-brand-subtler-default: var(--color-bcc-900);
354
+ --color-background-brand-subtler-hover: var(--color-bcc-800);
355
+ --color-background-brand-subtler-pressed: var(--color-bcc-700);
356
+ --color-background-brand-subtle-default: var(--color-bcc-700);
357
+ --color-background-brand-subtle-hover: var(--color-bcc-600);
358
+ --color-background-brand-subtle-pressed: var(--color-bcc-500);
359
+ --color-background-brand-bolder-default: var(--color-bcc-400);
360
+ --color-background-brand-bolder-hover: var(--color-bcc-300);
361
+ --color-background-brand-bolder-pressed: var(--color-bcc-200);
362
+ --color-background-accent-neutral-subtlest-default: var(--color-dark-neutral-alpha-300-a);
363
+ --color-background-accent-neutral-subtlest-hover: var(--color-dark-neutral-alpha-400-a);
364
+ --color-background-accent-neutral-subtlest-pressed: var(--color-dark-neutral-alpha-200-a);
365
+ --color-background-accent-neutral-subtle-hover: var(--color-dark-neutral-alpha-200-a);
366
+ --color-background-accent-neutral-subtle-pressed: var(--color-dark-neutral-alpha-300-a);
367
+ --color-background-accent-neutral-bolder-default: var(--color-red-400);
368
+ --color-background-accent-neutral-bolder-hover: var(--color-red-300);
369
+ --color-background-accent-neutral-bolder-pressed: var(--color-red-200);
346
370
  --color-background-accent-purple-subtlest-default: var(--color-purple-1000);
347
371
  --color-background-accent-purple-subtlest-hover: var(--color-purple-900);
348
372
  --color-background-accent-purple-subtlest-pressed: var(--color-purple-800);
@@ -367,18 +391,6 @@
367
391
  --color-background-accent-magenta-bolder-default: var(--color-magenta-400);
368
392
  --color-background-accent-magenta-bolder-hover: var(--color-magenta-300);
369
393
  --color-background-accent-magenta-bolder-pressed: var(--color-magenta-200);
370
- --color-background-accent-yellow-subtlest-default: var(--color-yellow-1000);
371
- --color-background-accent-yellow-subtlest-hover: var(--color-yellow-900);
372
- --color-background-accent-yellow-subtlest-pressed: var(--color-yellow-800);
373
- --color-background-accent-yellow-subtler-default: var(--color-yellow-900);
374
- --color-background-accent-yellow-subtler-hover: var(--color-yellow-800);
375
- --color-background-accent-yellow-subtler-pressed: var(--color-yellow-700);
376
- --color-background-accent-yellow-subtle-default: var(--color-yellow-700);
377
- --color-background-accent-yellow-subtle-hover: var(--color-yellow-600);
378
- --color-background-accent-yellow-subtle-pressed: var(--color-yellow-500);
379
- --color-background-accent-yellow-bolder-default: var(--color-yellow-400);
380
- --color-background-accent-yellow-bolder-hover: var(--color-yellow-300);
381
- --color-background-accent-yellow-bolder-pressed: var(--color-yellow-200);
382
394
  --color-background-accent-gray-subtlest-default: var(--color-dark-neutral-200);
383
395
  --color-background-accent-gray-subtlest-hover: var(--color-dark-neutral-300);
384
396
  --color-background-accent-gray-subtlest-pressed: var(--color-dark-neutral-400);
@@ -391,115 +403,18 @@
391
403
  --color-background-accent-gray-bolder-default: var(--color-dark-neutral-700);
392
404
  --color-background-accent-gray-bolder-hover: var(--color-dark-neutral-900);
393
405
  --color-background-accent-gray-bolder-pressed: var(--color-dark-neutral-900);
394
- --color-background-accent-neutral-subtlest-pressed: var(--color-dark-neutral-alpha-200-a);
395
- --color-background-accent-neutral-subtlest-default: var(--color-dark-neutral-alpha-300-a);
396
- --color-background-accent-neutral-subtlest-hover: var(--color-dark-neutral-alpha-400-a);
397
- --color-background-accent-neutral-subtle-hover: var(--color-dark-neutral-alpha-200-a);
398
- --color-background-accent-neutral-subtle-pressed: var(--color-dark-neutral-alpha-300-a);
399
- --color-background-accent-neutral-bolder-default: var(--color-dark-neutral-800);
400
- --color-background-accent-neutral-bolder-hover: var(--color-dark-neutral-900);
401
- --color-background-accent-neutral-bolder-pressed: var(--color-dark-neutral-1000);
402
- --color-background-info-default: var(--color-blue-1000);
403
- --color-background-info-hover: var(--color-blue-900);
404
- --color-background-info-pressed: var(--color-blue-800);
405
- --color-background-info-bolder-default: var(--color-blue-400);
406
- --color-background-info-bolder-hover: var(--color-blue-300);
407
- --color-background-info-bolder-pressed: var(--color-blue-200);
408
- --color-background-success-default: var(--color-green-1000);
409
- --color-background-success-hover: var(--color-green-900);
410
- --color-background-success-pressed: var(--color-green-800);
411
- --color-background-success-bolder-default: var(--color-green-400);
412
- --color-background-success-bolder-hover: var(--color-green-300);
413
- --color-background-success-bolder-pressed: var(--color-green-200);
414
- --color-background-warning-default: var(--color-yellow-1000);
415
- --color-background-warning-hover: var(--color-yellow-900);
416
- --color-background-warning-pressed: var(--color-yellow-800);
417
- --color-background-warning-bolder-default: var(--color-yellow-400);
418
- --color-background-warning-bolder-hover: var(--color-yellow-300);
419
- --color-background-warning-bolder-pressed: var(--color-yellow-200);
420
- --color-background-danger-default: var(--color-red-1000);
421
- --color-background-danger-hover: var(--color-red-900);
422
- --color-background-danger-pressed: var(--color-red-800);
423
- --color-background-danger-bolder-default: var(--color-red-400);
424
- --color-background-danger-bolder-hover: var(--color-red-300);
425
- --color-background-danger-bolder-pressed: var(--color-red-200);
426
- --color-background-inverse-default: var(--color-neutral-0);
427
- --color-background-seleted-default: var(--color-dark-green-1000); /** Use for the background of elements in a selected state, such as in opened dropdown buttons. */
428
- --color-background-seleted-hovered: var(--color-dark-green-900); /** Use for the background of elements in a selected state, such as in opened dropdown buttons. */
429
- --color-background-seleted-pressed: var(--color-dark-green-800); /** Use for the background of elements in a selected state, such as in opened dropdown buttons. */
430
- --color-background-seleted-bold-default: var(--color-dark-green-400); /** Use for the backgrounds of elements in a selected state, such as checkboxes and radio buttons. */
431
- --color-background-seleted-bold-hovered: var(--color-dark-green-300); /** Use for the backgrounds of elements in a selected state, such as checkboxes and radio buttons. */
432
- --color-background-seleted-bold-pressed: var(--color-dark-green-200); /** Use for the backgrounds of elements in a selected state, such as checkboxes and radio buttons. */
433
- --color-background-input-default: var(--color-dark-neutral-200); /** Use for background of form UI elements, such as text fields, checkboxes, and radio buttons. */
434
- --color-background-input-hovered: var(--color-dark-neutral-300); /** Hovered state for color.background.input */
435
- --color-background-input-pressed: var(--color-dark-neutral-200); /** Pressed state for color.background.input */
436
- --color-border-default: var(--color-dark-neutral-alpha-300-a);
437
- --color-border-bold: var(--color-dark-neutral-600);
438
- --color-border-disabled: var(--color-dark-neutral-alpha-200-a);
439
- --color-border-inverse: var(--color-dark-neutral-0);
440
- --color-border-input: var(--color-dark-neutral-500);
441
- --color-border-selected: var(--color-dark-green-400);
442
- --color-border-focused: var(--color-dark-green-300);
443
- --color-border-brand: var(--color-dark-green-400);
444
- --color-border-danger: var(--color-red-500);
445
- --color-border-warning: var(--color-yellow-500);
446
- --color-border-success: var(--color-green-500);
447
- --color-border-information: var(--color-blue-500);
448
- --color-border-accent-red: var(--color-red-500);
449
- --color-border-accent-orange: var(--color-orange-500);
450
- --color-border-accent-yellow: var(--color-yellow-500);
451
- --color-border-accent-green: var(--color-green-500);
452
- --color-border-accent-teal: var(--color-teal-500);
453
- --color-border-accent-brown: var(--color-brown-500);
454
- --color-border-accent-blue: var(--color-blue-500);
455
- --color-border-accent-purple: var(--color-purple-500);
456
- --color-border-accent-magenta: var(--color-magenta-500);
457
- --color-border-accent-gray: var(--color-dark-neutral-600);
458
- --color-icon-default: var(--color-dark-neutral-1000);
459
- --color-icon-subtle: var(--color-dark-neutral-800);
460
- --color-icon-subtlest: var(--color-dark-neutral-700);
461
- --color-icon-disabled: var(--color-dark-neutral-alpha-400-a);
462
- --color-icon-inverse: var(--color-dark-neutral-100);
463
- --color-icon-selected: var(--color-dark-green-400);
464
- --color-icon-success: var(--color-green-500);
465
- --color-icon-danger: var(--color-red-500);
466
- --color-icon-information: var(--color-blue-500);
467
- --color-icon-warning-default: var(--color-yellow-300);
468
- --color-icon-warning-inverse: var(--color-dark-neutral-100);
469
- --color-icon-brand-default: var(--color-dark-green-400);
470
- --color-icon-brand-bold: var(--color-dark-green-300);
471
- --color-icon-accent-orange-default: var(--color-orange-500);
472
- --color-icon-accent-orange-bold: var(--color-orange-400);
473
- --color-icon-accent-yellow-default: var(--color-yellow-300);
474
- --color-icon-accent-yellow-bold: var(--color-yellow-200);
475
- --color-icon-accent-green-default: var(--color-green-500);
476
- --color-icon-accent-green-bold: var(--color-green-400);
477
- --color-icon-accent-teal-default: var(--color-teal-500);
478
- --color-icon-accent-teal-bold: var(--color-teal-400);
479
- --color-icon-accent-brown-default: var(--color-brown-500);
480
- --color-icon-accent-brown-bold: var(--color-brown-400);
481
- --color-icon-accent-blue-default: var(--color-blue-500);
482
- --color-icon-accent-blue-bold: var(--color-blue-400);
483
- --color-icon-accent-purple-default: var(--color-purple-500);
484
- --color-icon-accent-purple-bold: var(--color-purple-400);
485
- --color-icon-accent-magenta-default: var(--color-magenta-500);
486
- --color-icon-accent-magenta-bold: var(--color-magenta-400);
487
- --color-icon-accent-gray-default: var(--color-dark-neutral-600);
488
- --color-icon-accent-gray-bold: var(--color-dark-neutral-700);
489
- --color-icon-accent-red-default: var(--color-red-600);
490
- --color-icon-accent-red-bold: var(--color-red-500);
406
+ --color-skeleton-default: var(--color-dark-neutral-alpha-200-a); /** Use for skeleton loading states */
407
+ --color-skeleton-subtle: var(--color-dark-neutral-alpha-100-a); /** Use for the pulse or shimmer effect in skeleton loading states */
491
408
  --color-elevation-surface-default: var(--color-dark-neutral-100);
492
409
  --color-elevation-surface-hovered: var(--color-dark-neutral-200);
493
410
  --color-elevation-surface-pressed: var(--color-dark-neutral-300);
494
411
  --color-elevation-surface-overlay-default: var(--color-dark-neutral-200);
495
412
  --color-elevation-surface-overlay-hovered: var(--color-dark-neutral-300);
496
413
  --color-elevation-surface-overlay-pressed: var(--color-dark-neutral-400);
497
- --color-elevation-surface-sunken-default: var(--color-dark-neutral-0);
498
414
  --color-elevation-surface-raised-default: var(--color-dark-neutral-200);
499
415
  --color-elevation-surface-raised-hovered: var(--color-dark-neutral-300);
500
416
  --color-elevation-surface-raised-pressed: var(--color-dark-neutral-400);
501
- --color-skeleton-default: var(--color-dark-neutral-alpha-200-a); /** Use for skeleton loading states */
502
- --color-skeleton-subtle: var(--color-dark-neutral-alpha-100-a); /** Use for the pulse or shimmer effect in skeleton loading states */
417
+ --color-elevation-surface-sunken-default: var(--color-dark-neutral-0);
503
418
  --heading-xs: var(--font-weight-medium) var(--font-size-xs)/var(--line-height-2) var(--font-family-archivo);
504
419
  --heading-sm: var(--font-weight-medium) var(--font-size-md)/var(--line-height-3) var(--font-family-archivo);
505
420
  --heading-md: var(--font-weight-medium) var(--font-size-lg)/var(--line-height-4) var(--font-family-archivo);