@wwtdev/bsds-css 2.32.0 → 2.33.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -0,0 +1,783 @@
1
+ /* Tokens */
2
+ /* VARIABLES GENERATED USING TAILWIND CONFIG */
3
+ /* DO NOT EDIT THIS FILE DIRECTLY */
4
+ /* Config location: packages/css-framework/src/wwt-bsds-preset.js */
5
+ :root {
6
+ --bs-transparent: transparent;
7
+ --bs-inherit: inherit;
8
+ --bs-current: currentColor;
9
+ --bs-white: #ffffff;
10
+ --bs-white-10: rgba(255, 255, 255, 0.1);
11
+ --bs-black: #0a0b19;
12
+ --bs-blue-10: rgba(102, 182, 242, 0.1);
13
+ --bs-blue-100: #99cff7;
14
+ --bs-blue-200: #66b6f2;
15
+ --bs-blue-300: #339eee;
16
+ --bs-blue-400: #0086ea;
17
+ --bs-blue-500: #006dc7;
18
+ --bs-charcoal-100: #f5f5f6;
19
+ --bs-charcoal-200: #ececec;
20
+ --bs-charcoal-300: #b3b5b8;
21
+ --bs-charcoal-400: #5f6266;
22
+ --bs-charcoal-500: #40454d;
23
+ --bs-cobalt-10: rgba(148, 139, 225, 0.1);
24
+ --bs-cobalt-100: #c9c5f0;
25
+ --bs-cobalt-200: #948be1;
26
+ --bs-cobalt-300: #5f52d3;
27
+ --bs-cobalt-400: #2918c4;
28
+ --bs-gold-100: #f9f5f1;
29
+ --bs-gold-200: #ebdfd4;
30
+ --bs-gold-300: #e0c7ac;
31
+ --bs-gold-400: #cca175;
32
+ --bs-gold-500: #997958;
33
+ --bs-gray-50: #f7f7fc;
34
+ --bs-gray-100: #f0f0fa;
35
+ --bs-gray-150: #e4e4eb;
36
+ --bs-gray-200: #c9cad9;
37
+ --bs-gray-300: #a3a4b7;
38
+ --bs-gray-400: #4e4f5f;
39
+ --bs-gray-500: #292940;
40
+ --bs-green-10: rgba(57, 162, 131, 0.1);
41
+ --bs-green-100: #abcfcc;
42
+ --bs-green-200: #72b9a8;
43
+ --bs-green-300: #39a283;
44
+ --bs-green-400: #008b5d;
45
+ --bs-green-500: #00744d;
46
+ --bs-maroon-10: rgba(195, 91, 91, 0.1);
47
+ --bs-maroon-100: #ebc8c8;
48
+ --bs-maroon-200: #d79191;
49
+ --bs-maroon-300: #c35b5b;
50
+ --bs-maroon-400: #af2424;
51
+ --bs-maroon-500: #a70c0c;
52
+ --bs-midnight-10: rgba(141, 137, 177, 0.1);
53
+ --bs-midnight-100: #c6c4d8;
54
+ --bs-midnight-200: #8d89b1;
55
+ --bs-midnight-300: #494382;
56
+ --bs-midnight-400: #1c1463;
57
+ --bs-navy-10: rgba(141, 142, 161, 0.1);
58
+ --bs-navy-100: #c6c6d1;
59
+ --bs-navy-200: #8d8ea1;
60
+ --bs-navy-300: #555775;
61
+ --bs-navy-400: #1d1e48;
62
+ --bs-orange-10: rgba(247, 161, 123, 0.1);
63
+ --bs-orange-100: #f3c4a8;
64
+ --bs-orange-200: #f7a17b;
65
+ --bs-orange-300: #f97c4c;
66
+ --bs-orange-400: #fb550e;
67
+ --bs-orange-500: #c33d04;
68
+ --bs-orange-brand: #ff5100;
69
+ --bs-orchid-10: rgba(190, 128, 255, 0.1);
70
+ --bs-orchid-100: #debfff;
71
+ --bs-orchid-200: #be80ff;
72
+ --bs-orchid-300: #9d40ff;
73
+ --bs-orchid-400: #7d00ff;
74
+ --bs-pink-10: rgba(235, 126, 175, 0.1);
75
+ --bs-pink-100: #f6cbe0;
76
+ --bs-pink-200: #eb7eaf;
77
+ --bs-pink-300: #e45e9b;
78
+ --bs-pink-400: #e31c79;
79
+ --bs-pink-500: #d11a6f;
80
+ --bs-plum-10: rgba(119, 102, 183, 0.1);
81
+ --bs-plum-100: #a499cf;
82
+ --bs-plum-200: #7766b7;
83
+ --bs-plum-300: #49339f;
84
+ --bs-plum-400: #1c0087;
85
+ --bs-purple-10: rgba(191, 138, 223, 0.1);
86
+ --bs-purple-100: #e0c5ef;
87
+ --bs-purple-200: #bf8adf;
88
+ --bs-purple-300: #a154d0;
89
+ --bs-purple-400: #8212c4;
90
+ --bs-red-10: rgba(245, 126, 127, 0.1);
91
+ --bs-red-100: #f8a9aa;
92
+ --bs-red-200: #f57e7f;
93
+ --bs-red-300: #f15355;
94
+ --bs-red-400: #ee282a;
95
+ --bs-red-500: #d91214;
96
+ --bs-royal-10: rgba(117, 133, 209, 0.1);
97
+ --bs-royal-100: #c5cceb;
98
+ --bs-royal-200: #7585d1;
99
+ --bs-royal-300: #5365c4;
100
+ --bs-royal-400: #162fb4;
101
+ --bs-slate-400: #22222e;
102
+ --bs-slate-500: #17171f;
103
+ --bs-slate-600: #0b0b10;
104
+ --bs-violet-10: rgba(153, 131, 182, 0.1);
105
+ --bs-violet-100: #cbc0da;
106
+ --bs-violet-200: #9983b6;
107
+ --bs-violet-300: #634291;
108
+ --bs-violet-400: #330072;
109
+ --bs-yellow-10: rgba(255, 184, 52, 0.1);
110
+ --bs-yellow-100: #fdeed3;
111
+ --bs-yellow-200: #fcdea7;
112
+ --bs-yellow-300: #f8c464;
113
+ --bs-yellow-400: #ffb834;
114
+ --bs-yellow-450: #c18300;
115
+ --bs-yellow-500: #805a14;
116
+ --bs-shadow-primary: rgba(0, 0, 0, 0.06);
117
+ --bs-shadow-secondary: rgba(28, 0, 135, 0.2);
118
+ --bs-gradient-dark: linear-gradient(
119
+ 90deg,
120
+ #1c0087 0%,
121
+ #ee282a 35%,
122
+ #ffffff 50%,
123
+ #0086ea 65%,
124
+ #1c0087 100%
125
+ );
126
+ --bs-gradient-light: linear-gradient(
127
+ 90deg,
128
+ #1c0087 0%,
129
+ #ee282a 20%,
130
+ #ee282a 40%,
131
+ #1c0087 50%,
132
+ #0086ea 60%,
133
+ #0086ea 80%,
134
+ #1c0087 100%
135
+ );
136
+ --bs-gradient-line: linear-gradient(
137
+ 90deg,
138
+ #ee282a 0%,
139
+ #1c0087 50%,
140
+ #0086ea 100%
141
+ );
142
+ --bs-gradient-atom-ai-border: conic-gradient(
143
+ from 180deg at 50% 50%,
144
+ var(--bs-royal-400) -96.8deg,
145
+ var(--bs-pink-400) 74.2deg,
146
+ var(--bs-blue-400) 98.8deg,
147
+ var(--bs-orange-400) 259.6deg,
148
+ var(--bs-royal-400) 283.2deg,
149
+ var(--bs-pink-400) 414.4deg
150
+ );
151
+ --bs-gradient-atom-ai-bg: conic-gradient(
152
+ from 180deg at 50% 50%,
153
+ rgba(22, 47, 180, 0.05) -96.8deg,
154
+ rgba(227, 28, 121, 0.05) 74.2deg,
155
+ rgba(0, 134, 234, 0.05) 98.8deg,
156
+ rgba(251, 85, 14, 0.05) 259.6deg,
157
+ rgba(22, 47, 180, 0.05) 283.2deg,
158
+ rgba(227, 28, 121, 0.05) 414.4deg
159
+ );
160
+ --bs-gradient-blue-top-left: radial-gradient(
161
+ 312.54% 141.42% at 0% 0%,
162
+ #162fb4 0%,
163
+ #1d1e48 100%
164
+ );
165
+ --bs-gradient-blue-top-center: radial-gradient(
166
+ 201.14% 201.14% at 50% -51.28%,
167
+ #162fb4 26.06%,
168
+ #1d1e48 100%
169
+ );
170
+ --bs-gradient-blue-top-right: radial-gradient(
171
+ 312.54% 141.42% at 100% 0%,
172
+ #162fb4 0%,
173
+ #1d1e48 100%
174
+ );
175
+ --bs-gradient-blue-mid-left: radial-gradient(
176
+ 347.1% 117.22% at -9.27% 49.86%,
177
+ #162fb4 8.19%,
178
+ #1d1e48 100%
179
+ );
180
+ --bs-gradient-blue-mid-right: radial-gradient(
181
+ 347.1% 117.22% at 109.27% 49.86%,
182
+ #162fb4 8.19%,
183
+ #1d1e48 100%
184
+ );
185
+ --bs-gradient-blue-center: radial-gradient(
186
+ 172.57% 58.28% at 50% 49.86%,
187
+ #162fb4 0%,
188
+ #1d1e48 100%
189
+ );
190
+ --bs-gradient-blue-bottom-left: radial-gradient(
191
+ 312.54% 141.42% at 0% 100%,
192
+ #162fb4 0%,
193
+ #1d1e48 100%
194
+ );
195
+ --bs-gradient-blue-bottom-center: radial-gradient(
196
+ 201.14% 201.14% at 50% 151.28%,
197
+ #162fb4 26.06%,
198
+ #1d1e48 100%
199
+ );
200
+ --bs-gradient-blue-bottom-right: radial-gradient(
201
+ 312.54% 141.42% at 100% 100%,
202
+ #162fb4 0%,
203
+ #1d1e48 100%
204
+ );
205
+ --bs-gradient-light-blue-transparent: radial-gradient(
206
+ 236% 114.71% at 94.24% 7.6%,
207
+ rgba(153, 207, 247, 0.2) 0%,
208
+ rgba(203, 192, 218, 0.08) 100%
209
+ );
210
+ --bs-gradient-light-blue-opaque: linear-gradient(
211
+ 311deg,
212
+ #ebf7ff 9.29%,
213
+ #fbfafc 92%
214
+ );
215
+ --bs-gradient-light-gray: linear-gradient(
216
+ 180deg,
217
+ #f7f7fc 24.82%,
218
+ #f0f0fa 100%
219
+ );
220
+ --bs-gradient-softchoice-light: linear-gradient(
221
+ 252deg,
222
+ rgba(255, 81, 0, 0.15) 66.87%,
223
+ rgba(125, 0, 255, 0.15) 97.9%
224
+ );
225
+ --bs-gradient-softchoice-dark: linear-gradient(
226
+ 252deg,
227
+ #ff5100 66.87%,
228
+ #7d00ff 97.9%
229
+ );
230
+ --bs-space-0: var(--bs-space-none);
231
+ --bs-space-1: var(--bs-space-3xs);
232
+ --bs-space-2: var(--bs-space-2xs);
233
+ --bs-space-3: var(--bs-space-xs);
234
+ --bs-space-4: var(--bs-space-sm);
235
+ --bs-space-6: var(--bs-space-md);
236
+ --bs-space-8: var(--bs-space-lg);
237
+ --bs-space-12: var(--bs-space-xl);
238
+ --bs-space-16: var(--bs-space-2xl);
239
+ --bs-space-24: var(--bs-space-3xl);
240
+ --bs-space-32: var(--bs-space-4xl);
241
+ --bs-space-none: 0;
242
+ --bs-space-3xs: 0.25rem;
243
+ --bs-space-2xs: 0.5rem;
244
+ --bs-space-xs: 0.75rem;
245
+ --bs-space-sm: 1rem;
246
+ --bs-space-md: 1.5rem;
247
+ --bs-space-lg: 2rem;
248
+ --bs-space-xl: 3rem;
249
+ --bs-space-2xl: 4rem;
250
+ --bs-space-3xl: 6rem;
251
+ --bs-space-4xl: 8rem;
252
+ --bs-text-xs: 0.75rem;
253
+ --bs-text-sm: 0.875rem;
254
+ --bs-text-base: 1rem;
255
+ --bs-text-md: 1.125rem;
256
+ --bs-text-lg: 1.25rem;
257
+ --bs-text-xl: 1.5rem;
258
+ --bs-text-2xl: 1.75rem;
259
+ --bs-text-3xl: 2rem;
260
+ --bs-text-4xl: 2.25rem;
261
+ --bs-text-5xl: 2.625rem;
262
+ --bs-text-6xl: 3rem;
263
+ --bs-font-light: 300;
264
+ --bs-font-normal: 400;
265
+ --bs-font-semibold: 600;
266
+ --bs-leading-none: 1;
267
+ --bs-leading-sm: 1.1;
268
+ --bs-leading-regular: 1.3;
269
+ --bs-leading-lg: 1.5;
270
+ --bs-shadow-contentLow: -4px 4px 12px var(--bs-shadow-primary),
271
+ -8px 8px 16px var(--bs-shadow-secondary);
272
+ --bs-shadow-contentLowCenter: 0px 0px 12px var(--bs-shadow-primary),
273
+ 0px 0px 16px var(--bs-shadow-secondary);
274
+ --bs-shadow-contentMedium: -8px 8px 24px var(--bs-shadow-primary),
275
+ -16px 16px 32px var(--bs-shadow-secondary);
276
+ --bs-shadow-contentHigh: 0px 16px 48px var(--bs-shadow-primary),
277
+ 0px 32px 64px var(--bs-shadow-secondary);
278
+ --bs-shadow-drawerLeft: -12px 12px 24px var(--bs-shadow-primary),
279
+ -16px 16px 32px var(--bs-shadow-secondary);
280
+ --bs-shadow-drawerRight: -12px 12px 24px var(--bs-shadow-primary),
281
+ 16px 16px 32px var(--bs-shadow-secondary);
282
+ --bs-shadow-profilePhoto: inset 0px 0px 0.5em var(--bs-shadow-secondary);
283
+ }
284
+ /* Overrides/additions to the generated tokens */
285
+ :root {
286
+ /* Transitions */
287
+ --bs-transition-quick: 75ms;
288
+ --bs-transition-fast: 100ms;
289
+ --bs-transition-moderate: 150ms;
290
+ --bs-transition-medium: 200ms;
291
+ --bs-transition-slow: 250ms;
292
+ --bs-transition-leisurely: 300ms;
293
+ --bs-transition-long: 500ms;
294
+ --bs-transition-ease: ease-in-out;
295
+ --bs-transition-cubic: cubic-bezier(.15, .4, .49, 1);
296
+
297
+ /* Navigation */
298
+ --bs-horizontal-nav-height: 48px;
299
+ --bs-vertical-nav-narrow-width: 4.5rem;
300
+ --bs-vertical-nav-width: 9.875rem;
301
+ --bs-vertical-nav-collapsed-width: 4rem;
302
+ /* Dynamic width set by the navigation component for page layout */
303
+ --bs-page-nav-width: 0px;
304
+
305
+ /* Table */
306
+ --bs-table-cell-padding-xs: var(--bs-space-2);
307
+ --bs-table-cell-padding-sm: var(--bs-space-3);
308
+ --bs-table-cell-padding-md: var(--bs-space-4);
309
+ --bs-table-cell-padding-lg: var(--bs-space-6);
310
+ --bs-table-cell-padding-xl: var(--bs-space-8);
311
+
312
+ /* Popover */
313
+ --bs-popover-z-index: 1000;
314
+ }
315
+ /* Themes */
316
+ :root {
317
+ /* Ink */
318
+ --bs-ink-base: var(--bs-black);
319
+ --bs-ink-medium: var(--bs-gray-500);
320
+ --bs-ink-light: var(--bs-gray-400);
321
+ --bs-ink-disabled: rgba(78, 79, 95, 0.6); /* --bs-gray-400 at .6 */
322
+ --bs-ink-invert-base: var(--bs-white);
323
+ --bs-ink-invert-medium: var(--bs-gray-100);
324
+ --bs-ink-invert-light: var(--bs-gray-200);
325
+ --bs-ink-primary: var(--bs-blue-500);
326
+ --bs-ink-secondary: var(--bs-plum-400);
327
+ --bs-ink-accent-1: var(--bs-royal-400);
328
+ --bs-ink-accent-2: var(--bs-violet-400);
329
+ --bs-ink-accent-3: var(--bs-pink-500);
330
+ --bs-ink-negative: var(--bs-red-500);
331
+ --bs-ink-ecomm-positive: var(--bs-green-500);
332
+ --bs-ink-positive: var(--bs-purple-400);
333
+ --bs-ink-warning: var(--bs-orange-500);
334
+ --bs-ink-white: var(--bs-white);
335
+
336
+ /* Background */
337
+ --bs-bg-base: var(--bs-white);
338
+ --bs-bg-light: var(--bs-gray-50);
339
+ --bs-bg-medium: var(--bs-gray-100);
340
+ --bs-bg-disabled: var(--bs-gray-200);
341
+ --bs-bg-invert-base: var(--bs-slate-600);
342
+ --bs-bg-invert-light: var(--bs-slate-500);
343
+ --bs-bg-invert-medium: var(--bs-slate-400);
344
+ --bs-bg-base-to-light: var(--bs-white);
345
+ --bs-bg-base-to-medium: var(--bs-white);
346
+ --bs-bg-medium-to-base: var(--bs-gray-100);
347
+ --bs-bg-medium-to-light: var(--bs-gray-100);
348
+ --bs-bg-light-to-base: var(--bs-gray-50);
349
+ --bs-bg-light-to-medium: var(--bs-gray-50);
350
+
351
+ /* Borders */
352
+ --bs-border-base: var(--bs-gray-200);
353
+ --bs-border-medium: var(--bs-gray-150);
354
+ --bs-border-light: var(--bs-gray-100);
355
+ --bs-border-dark: var(--bs-gray-400);
356
+ --bs-border-medium-to-light: var(--bs-gray-150);
357
+ --bs-border-input: rgba(99, 66, 145, 0.75); /* --bs-violet-300 at .75 opacity */
358
+ --bs-border-active: var(--bs-blue-400);
359
+ --bs-border-error: var(--bs-red-500);
360
+
361
+ /* Primary */
362
+ --bs-primary-base-fixed: var(--bs-blue-400);
363
+ --bs-primary-base: var(--bs-blue-400);
364
+ --bs-primary-medium: var(--bs-blue-300);
365
+ --bs-primary-light: var(--bs-blue-200);
366
+ --bs-primary-lightest: var(--bs-blue-100);
367
+ --bs-primary-highlight: var(--bs-blue-10);
368
+
369
+ /* Secondary */
370
+ --bs-secondary-base-fixed: var(--bs-plum-400);
371
+ --bs-secondary-base: var(--bs-plum-400);
372
+ --bs-secondary-medium: var(--bs-plum-300);
373
+ --bs-secondary-light: var(--bs-plum-200);
374
+ --bs-secondary-lightest: var(--bs-plum-100);
375
+ --bs-secondary-highlight: var(--bs-plum-10);
376
+
377
+ /* Neutral */
378
+ --bs-neutral-dark: var(--bs-gray-500);
379
+ --bs-neutral-base: var(--bs-gray-400);
380
+ --bs-neutral-medium: var(--bs-gray-300);
381
+ --bs-neutral-light: var(--bs-gray-200);
382
+ --bs-neutral-lightest: var(--bs-gray-100);
383
+
384
+ /* Accent 1 */
385
+ --bs-accent-1-base-fixed: var(--bs-royal-400);
386
+ --bs-accent-1-base: var(--bs-royal-400);
387
+ --bs-accent-1-medium: var(--bs-royal-300);
388
+ --bs-accent-1-light: var(--bs-royal-200);
389
+ --bs-accent-1-lightest: var(--bs-royal-100);
390
+ --bs-accent-1-highlight: var(--bs-royal-10);
391
+
392
+ /* Accent 2 */
393
+ --bs-accent-2-base-fixed: var(--bs-violet-400);
394
+ --bs-accent-2-base: var(--bs-violet-400);
395
+ --bs-accent-2-medium: var(--bs-violet-300);
396
+ --bs-accent-2-light: var(--bs-violet-200);
397
+ --bs-accent-2-lightest: var(--bs-violet-100);
398
+ --bs-accent-2-highlight: var(--bs-violet-10);
399
+
400
+ /* Accent 3 */
401
+ --bs-accent-3-base-fixed: var(--bs-pink-400);
402
+ --bs-accent-3-base: var(--bs-pink-400);
403
+ --bs-accent-3-medium: var(--bs-pink-300);
404
+ --bs-accent-3-light: var(--bs-pink-200);
405
+ --bs-accent-3-lightest: var(--bs-pink-100);
406
+ --bs-accent-3-highlight: var(--bs-pink-10);
407
+
408
+ /* Accent 4 */
409
+ --bs-accent-4-base: var(--bs-navy-400);
410
+ --bs-accent-4-medium: var(--bs-navy-300);
411
+ --bs-accent-4-light: var(--bs-navy-200);
412
+ --bs-accent-4-lightest: var(--bs-navy-100);
413
+ --bs-accent-4-highlight: var(--bs-navy-10);
414
+
415
+ /* Positive */
416
+ --bs-positive-base-fixed: var(--bs-purple-400);
417
+ --bs-positive-base: var(--bs-purple-400);
418
+ --bs-positive-medium: var(--bs-purple-300);
419
+ --bs-positive-light: var(--bs-purple-200);
420
+ --bs-positive-lightest: var(--bs-purple-100);
421
+ --bs-positive-highlight: var(--bs-purple-10);
422
+
423
+ /* Ecommerce Positive */
424
+ --bs-ecomm-positive-base-fixed: var(--bs-green-400);
425
+ --bs-ecomm-positive-base: var(--bs-green-400);
426
+ --bs-ecomm-positive-medium: var(--bs-green-300);
427
+ --bs-ecomm-positive-light: var(--bs-green-200);
428
+ --bs-ecomm-positive-lightest: var(--bs-green-100);
429
+ --bs-ecomm-positive-highlight: var(--bs-green-10);
430
+
431
+ /* Warning */
432
+ --bs-warning-dark: var(--bs-orange-500);
433
+ --bs-warning-base: var(--bs-orange-400);
434
+ --bs-warning-medium: var(--bs-orange-300);
435
+ --bs-warning-light: var(--bs-orange-200);
436
+ --bs-warning-lightest: var(--bs-orange-100);
437
+ --bs-warning-highlight: var(--bs-orange-10);
438
+
439
+ /* Negative */
440
+ --bs-negative-dark: var(--bs-red-500);
441
+ --bs-negative-base: var(--bs-red-400);
442
+ --bs-negative-medium: var(--bs-red-300);
443
+ --bs-negative-light: var(--bs-red-200);
444
+ --bs-negative-lightest: var(--bs-red-100);
445
+ --bs-negative-highlight: var(--bs-red-10);
446
+
447
+
448
+ /* -------------- Deprecated Color Tokens -------------- */
449
+
450
+ /* Blue (replaced by Primary) */
451
+ --bs-blue-base: var(--bs-blue-400);
452
+ --bs-blue-medium: var(--bs-blue-300);
453
+ --bs-blue-light: var(--bs-blue-200);
454
+ --bs-blue-lightest: var(--bs-blue-100);
455
+
456
+ /* Gray (replaced by Neutral) */
457
+ --bs-gray-dark: var(--bs-gray-500);
458
+ --bs-gray-base: var(--bs-gray-400);
459
+ --bs-gray-medium: var(--bs-gray-300);
460
+ --bs-gray-light: var(--bs-gray-200);
461
+ --bs-gray-lightest: var(--bs-gray-100);
462
+
463
+ /* Navy (replaced by Accent 4) */
464
+ --bs-navy-base: var(--bs-navy-400);
465
+ --bs-navy-medium: var(--bs-navy-300);
466
+ --bs-navy-light: var(--bs-navy-200);
467
+ --bs-navy-lightest: var(--bs-navy-100);
468
+
469
+ /* Orange (replaced by Warning) */
470
+ --bs-warning: var(--bs-orange-500);
471
+ --bs-orange-base: var(--bs-orange-400);
472
+ --bs-orange-medium: var(--bs-orange-300);
473
+ --bs-orange-light: var(--bs-orange-200);
474
+ --bs-orange-lightest: var(--bs-orange-100);
475
+
476
+ /* Pink (replaced by Accent 3) */
477
+ --bs-pink-base: var(--bs-pink-400);
478
+ --bs-pink-medium: var(--bs-pink-300);
479
+ --bs-pink-light: var(--bs-pink-200);
480
+ --bs-pink-lightest: var(--bs-pink-100);
481
+
482
+ /* Plum (replaced by Secondary) */
483
+ --bs-plum-base: var(--bs-plum-400);
484
+ --bs-plum-medium: var(--bs-plum-300);
485
+ --bs-plum-light: var(--bs-plum-200);
486
+ --bs-plum-lightest: var(--bs-plum-100);
487
+
488
+ /* Purple (replaced by Positive) */
489
+ --bs-purple-base: var(--bs-purple-400);
490
+ --bs-purple-medium: var(--bs-purple-300);
491
+ --bs-purple-light: var(--bs-purple-200);
492
+ --bs-purple-lightest: var(--bs-purple-100);
493
+
494
+ /* Red (replaced by Negative) */
495
+ --bs-red-base: var(--bs-red-400);
496
+ --bs-red-medium: var(--bs-red-300);
497
+ --bs-red-light: var(--bs-red-200);
498
+ --bs-red-lightest: var(--bs-red-100);
499
+
500
+ /* Royal Blue (replaced by Accent 1) */
501
+ --bs-royal-base: var(--bs-royal-400);
502
+ --bs-royal-medium: var(--bs-royal-300);
503
+ --bs-royal-light: var(--bs-royal-200);
504
+ --bs-royal-lightest: var(--bs-royal-100);
505
+
506
+ /* Violet (replaced by Accent 2) */
507
+ --bs-violet-base: var(--bs-violet-400);
508
+ --bs-violet-medium: var(--bs-violet-300);
509
+ --bs-violet-light: var(--bs-violet-200);
510
+ --bs-violet-lightest: var(--bs-violet-100);
511
+
512
+
513
+ /* ------------ Deprecated Ink Color Tokens ------------ */
514
+
515
+ /* Ink Blue (replaced by Ink Primary) */
516
+ --bs-ink-blue: var(--bs-blue-500);
517
+
518
+ /* Ink Orange (replaced by Ink Warning) */
519
+ --bs-ink-orange: var(--bs-orange-500);
520
+
521
+ /* Ink Pink (replaced by Ink Accent 3) */
522
+ --bs-ink-pink: var(--bs-pink-500);
523
+
524
+ /* Ink Plum (replaced by Ink Secondary) */
525
+ --bs-ink-plum: var(--bs-plum-400);
526
+
527
+ /* Ink Purple (replaced by Ink Positive) */
528
+ --bs-ink-purple: var(--bs-purple-400);
529
+
530
+ /* Ink Red (replaced by Ink Negative) */
531
+ --bs-ink-red: var(--bs-red-500);
532
+
533
+ /* Ink Royal (replaced by Ink Accent 1) */
534
+ --bs-ink-royal: var(--bs-royal-400);
535
+
536
+ /* Ink Violet (replaced by Ink Accent 2) */
537
+ --bs-ink-violet: var(--bs-violet-400);
538
+ }
539
+ /* Token Overrides */
540
+ .dark {
541
+ /* Ink */
542
+ --bs-ink-base: var(--bs-white);
543
+ --bs-ink-medium: var(--bs-gray-100);
544
+ --bs-ink-light: var(--bs-gray-200);
545
+ --bs-ink-disabled: rgba(163, 164, 183, 0.5); /* --bs-gray-300 at .5 opacity */
546
+ --bs-ink-invert-base: var(--bs-black);
547
+ --bs-ink-invert-medium: var(--bs-gray-500);
548
+ --bs-ink-invert-light: var(--bs-gray-400);
549
+ --bs-ink-primary: var(--bs-blue-100);
550
+ --bs-ink-secondary: var(--bs-plum-100);
551
+ --bs-ink-accent-1: var(--bs-royal-200);
552
+ --bs-ink-accent-2: var(--bs-violet-200);
553
+ --bs-ink-accent-3: var(--bs-pink-200);
554
+ --bs-ink-negative: var(--bs-red-200);
555
+ --bs-ink-ecomm-positive: var(--bs-green-200);
556
+ --bs-ink-positive: var(--bs-purple-200);
557
+ --bs-ink-warning: var(--bs-orange-200);
558
+ --bs-ink-white: var(--bs-white);
559
+
560
+ /* Background */
561
+ --bs-bg-base: var(--bs-slate-600);
562
+ --bs-bg-light: var(--bs-slate-500);
563
+ --bs-bg-medium: var(--bs-slate-400);
564
+ --bs-bg-disabled: rgba(78, 79, 95, 0.3); /* --bs-gray-400 at .3 opacity */
565
+ --bs-bg-invert-base: var(--bs-white);
566
+ --bs-bg-invert-light: var(--bs-gray-50);
567
+ --bs-bg-invert-medium: var(--bs-gray-100);
568
+ --bs-bg-base-to-light: var(--bs-slate-500);
569
+ --bs-bg-base-to-medium: var(--bs-slate-400);
570
+ --bs-bg-medium-to-base: var(--bs-slate-600);
571
+ --bs-bg-medium-to-light: var(--bs-slate-500);
572
+ --bs-bg-light-to-base: var(--bs-slate-600);
573
+ --bs-bg-light-to-medium: var(--bs-slate-400);
574
+
575
+ /* Borders */
576
+ --bs-border-base: rgba(163, 164, 183, 0.7); /* --bs-gray-300 at .7 opacity */
577
+ --bs-border-medium: var(--bs-gray-400);
578
+ --bs-border-light: rgba(78, 79, 95, 0.5); /* --bs-gray-400 at .5 opacity */
579
+ --bs-border-dark: var(--bs-gray-300);
580
+ --bs-border-medium-to-light: rgba(78, 79, 95, 0.5); /* --bs-gray-400 at .5 opacity */
581
+ --bs-border-input: var(--bs-violet-200);
582
+ --bs-border-active: var(--bs-blue-400);
583
+ --bs-border-error: var(--bs-red-200);
584
+
585
+ /* Primary */
586
+ --bs-primary-base: var(--bs-blue-300);
587
+
588
+ /* Secondary */
589
+ --bs-secondary-base: var(--bs-plum-300);
590
+ --bs-secondary-medium: var(--bs-plum-200);
591
+
592
+ /* Neutral */
593
+ --bs-neutral-dark: var(--bs-gray-100);
594
+ --bs-neutral-base: var(--bs-gray-200);
595
+ --bs-neutral-medium: var(--bs-gray-300);
596
+ --bs-neutral-light: var(--bs-gray-400);
597
+ --bs-neutral-lightest: var(--bs-gray-500);
598
+
599
+ /* Accent 1 */
600
+ --bs-accent-1-base: var(--bs-royal-300);
601
+ --bs-accent-1-medium: var(--bs-royal-200);
602
+
603
+ /* Accent 2 */
604
+ --bs-accent-2-base: var(--bs-violet-300);
605
+
606
+ /* Accent 3 */
607
+ --bs-accent-3-base: var(--bs-pink-300);
608
+
609
+ /* Accent 4 */
610
+ --bs-accent-4-base: var(--bs-navy-200);
611
+
612
+ /* Positive */
613
+ --bs-positive-base: var(--bs-purple-300);
614
+
615
+ /* Ecommerce Positive */
616
+ --bs-ecomm-positive-base: var(--bs-green-300);
617
+
618
+ /* Warning */
619
+ --bs-warning-dark: var(--bs-orange-400);
620
+ --bs-warning-base: var(--bs-orange-300);
621
+
622
+ /* Negative */
623
+ --bs-negative-dark: var(--bs-red-400);
624
+ --bs-negative-base: var(--bs-red-300);
625
+
626
+
627
+ /* Atom gradients */
628
+ --bs-gradient-atom-ai-bg: conic-gradient(from 180deg at 50% 50%, rgba(83, 101, 196, 0.2) -96.8deg, rgba(228, 94, 155, 0.2) 74.2deg, rgba(51, 158, 238, 0.2) 98.8deg, rgba(249, 124, 76, 0.2) 259.6deg, rgba(83, 101, 196, 0.2) 283.2deg, rgba(228, 94, 155, 0.2) 414.4deg);
629
+ --bs-gradient-atom-ai-border: conic-gradient(from 180deg at 50% 50%, var(--bs-royal-300) -96.8deg, var(--bs-pink-300) 74.2deg, var(--bs-blue-300) 98.8deg, var(--bs-orange-300) 259.6deg, var(--bs-royal-300) 283.2deg, var(--bs-pink-300) 414.4deg);
630
+
631
+ /* Shadows */
632
+ /* Have to re-specify so secondary update applies */
633
+ --bs-shadow-secondary: rgba(10, 11, 25, 0.60);
634
+ --bs-shadow-dark: -16px 20px 40px 0 #000;
635
+ --bs-shadow-contentLow: var(--bs-shadow-dark);
636
+ --bs-shadow-contentLowCenter: var(--bs-shadow-dark);
637
+ --bs-shadow-contentMedium: var(--bs-shadow-dark);
638
+ --bs-shadow-contentHigh: var(--bs-shadow-dark);
639
+ --bs-shadow-drawerLeft: var(--bs-shadow-dark);
640
+ --bs-shadow-drawerRight: 16px 20px 40px 0 #000;
641
+ --bs-shadow-profilePhoto: inset 0px 0px 0.5em var(--bs-shadow-secondary);
642
+
643
+
644
+
645
+ /* -------------- Deprecated Color Tokens -------------- */
646
+
647
+ /* Blue (replaced by Primary) */
648
+ --bs-blue-base: var(--bs-blue-300);
649
+
650
+ /* Gray (replaced by Neutral) */
651
+ --bs-gray-dark: var(--bs-gray-100);
652
+ --bs-gray-base: var(--bs-gray-200);
653
+ --bs-gray-light: var(--bs-gray-400);
654
+ --bs-gray-lightest: var(--bs-gray-500);
655
+
656
+ /* Navy (replaced by Accent 4) */
657
+ --bs-navy-base: var(--bs-navy-200);
658
+
659
+ /* Orange (replaced by Warning) */
660
+ --bs-warning: var(--bs-orange-400);
661
+ --bs-orange-base: var(--bs-orange-300);
662
+
663
+ /* Pink (replaced by Accent 3) */
664
+ --bs-pink-base: var(--bs-pink-300);
665
+
666
+ /* Plum (replaced by Secondary) */
667
+ --bs-plum-base: var(--bs-plum-300);
668
+ --bs-plum-medium: var(--bs-plum-200);
669
+
670
+ /* Purple (replaced by Positive) */
671
+ --bs-purple-base: var(--bs-purple-300);
672
+
673
+ /* Red (replaced by Negative) */
674
+ --bs-red-base: var(--bs-red-300);
675
+
676
+ /* Royal Blue (replaced by Accent 1) */
677
+ --bs-royal-base: var(--bs-royal-300);
678
+ --bs-royal-medium: var(--bs-royal-200);
679
+
680
+ /* Violet (replaced by Accent 2) */
681
+ --bs-violet-base: var(--bs-violet-300);
682
+
683
+
684
+ /* ------------ Deprecated Ink Color Tokens ------------ */
685
+
686
+ /* Ink Blue (replaced by Ink Primary) */
687
+ --bs-ink-blue: var(--bs-blue-200);
688
+
689
+ /* Ink Orange (replaced by Ink Warning) */
690
+ --bs-ink-orange: var(--bs-orange-200);
691
+
692
+ /* Ink Pink (replaced by Ink Accent 3) */
693
+ --bs-ink-pink: var(--bs-pink-200);
694
+
695
+ /* Ink Plum (replaced by Ink Secondary) */
696
+ --bs-ink-plum: var(--bs-plum-100);
697
+
698
+ /* Ink Purple (replaced by Ink Positive) */
699
+ --bs-ink-purple: var(--bs-purple-200);
700
+
701
+ /* Ink Red (replaced by Ink Negative) */
702
+ --bs-ink-red: var(--bs-red-200);
703
+
704
+ /* Ink Royal (replaced by Ink Accent 1) */
705
+ --bs-ink-royal: var(--bs-royal-200);
706
+
707
+ /* Ink Violet (replaced by Ink Accent 2) */
708
+ --bs-ink-violet: var(--bs-violet-200);
709
+ }
710
+ /* Token Overrides (Softchoice branding) */
711
+ .softchoice {
712
+ /* Ink */
713
+ --bs-ink-primary: var(--bs-cobalt-400);
714
+ --bs-ink-secondary: var(--bs-midnight-400);
715
+ --bs-ink-accent-1: var(--bs-orange-500);
716
+ --bs-ink-negative: var(--bs-maroon-500);
717
+ --bs-ink-positive: var(--bs-green-500);
718
+ --bs-ink-warning: var(--bs-yellow-500);
719
+
720
+ /* Background */
721
+ --bs-bg-light: var(--bs-charcoal-100);
722
+ --bs-bg-medium: var(--bs-charcoal-200);
723
+ --bs-bg-disabled: var(--bs-charcoal-300);
724
+ --bs-bg-medium-to-base: var(--bs-charcoal-200);
725
+ --bs-bg-medium-to-light: var(--bs-charcoal-200);
726
+ --bs-bg-light-to-base: var(--bs-charcoal-100);
727
+ --bs-bg-light-to-medium: var(--bs-charcoal-100);
728
+
729
+ /* Primary */
730
+ --bs-primary-base-fixed: var(--bs-cobalt-400);
731
+ --bs-primary-base: var(--bs-cobalt-400);
732
+ --bs-primary-medium: var(--bs-cobalt-300);
733
+ --bs-primary-light: var(--bs-cobalt-200);
734
+ --bs-primary-lightest: var(--bs-cobalt-100);
735
+ --bs-primary-highlight: var(--bs-cobalt-10);
736
+
737
+ /* Secondary */
738
+ --bs-secondary-base-fixed: var(--bs-midnight-400);
739
+ --bs-secondary-base: var(--bs-midnight-400);
740
+ --bs-secondary-medium: var(--bs-midnight-300);
741
+ --bs-secondary-light: var(--bs-midnight-200);
742
+ --bs-secondary-lightest: var(--bs-midnight-100);
743
+ --bs-secondary-highlight: var(--bs-midnight-10);
744
+
745
+ /* Neutral */
746
+ --bs-neutral-dark: var(--bs-charcoal-500);
747
+ --bs-neutral-base: var(--bs-charcoal-400);
748
+ --bs-neutral-medium: var(--bs-charcoal-300);
749
+ --bs-neutral-light: var(--bs-charcoal-200);
750
+ --bs-neutral-lightest: var(--bs-charcoal-100);
751
+
752
+ /* Accent 1 */
753
+ --bs-accent-1-base-fixed: var(--bs-cobalt-400);
754
+ --bs-accent-1-base: var(--bs-cobalt-400);
755
+ --bs-accent-1-medium: var(--bs-cobalt-300);
756
+ --bs-accent-1-light: var(--bs-cobalt-200);
757
+ --bs-accent-1-lightest: var(--bs-cobalt-100);
758
+ --bs-accent-1-highlight: var(--bs-cobalt-10);
759
+
760
+ /* Positive */
761
+ --bs-positive-base-fixed: var(--bs-green-400);
762
+ --bs-positive-base: var(--bs-green-400);
763
+ --bs-positive-medium: var(--bs-green-300);
764
+ --bs-positive-light: var(--bs-green-200);
765
+ --bs-positive-lightest: var(--bs-green-100);
766
+ --bs-positive-highlight: var(--bs-green-10);
767
+
768
+ /* Warning */
769
+ --bs-warning-dark: var(--bs-yellow-450);
770
+ --bs-warning-base: var(--bs-yellow-400);
771
+ --bs-warning-medium: var(--bs-yellow-300);
772
+ --bs-warning-light: var(--bs-yellow-200);
773
+ --bs-warning-lightest: var(--bs-yellow-100);
774
+ --bs-warning-highlight: var(--bs-yellow-10);
775
+
776
+ /* Negative */
777
+ --bs-negative-dark: var(--bs-maroon-500);
778
+ --bs-negative-base: var(--bs-maroon-400);
779
+ --bs-negative-medium: var(--bs-maroon-300);
780
+ --bs-negative-light: var(--bs-maroon-200);
781
+ --bs-negative-lightest: var(--bs-maroon-100);
782
+ --bs-negative-highlight: var(--bs-maroon-10);
783
+ }