@wwtdev/bsds-css 3.0.0-rc.46 → 3.0.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.
Files changed (10) hide show
  1. package/dist/wwt-bsds-components.css +715 -605
  2. package/dist/wwt-bsds-components.min.css +1 -1
  3. package/dist/wwt-bsds-preset.js +69 -74
  4. package/dist/wwt-bsds-tokens.css +260 -275
  5. package/dist/wwt-bsds-tokens.min.css +1 -1
  6. package/dist/wwt-bsds-utilities.css +89 -83
  7. package/dist/wwt-bsds-utilities.min.css +1 -1
  8. package/dist/wwt-bsds.css +1070 -983
  9. package/dist/wwt-bsds.min.css +1 -1
  10. package/package.json +1 -1
package/dist/wwt-bsds-tokens.css CHANGED
@@ -25,6 +25,7 @@
25
25
  --bs-cobalt-200: #948be1;
26
26
  --bs-cobalt-300: #5f52d3;
27
27
  --bs-cobalt-400: #2918c4;
28
+ --bs-gold-10: rgba(235, 223, 212, 0.1);
28
29
  --bs-gold-100: #f9f5f1;
29
30
  --bs-gold-200: #ebdfd4;
30
31
  --bs-gold-300: #e0c7ac;
@@ -110,98 +111,79 @@
110
111
  --bs-yellow-100: #fdeed3;
111
112
  --bs-yellow-200: #fcdea7;
112
113
  --bs-yellow-300: #f8c464;
113
- --bs-yellow-400: #ffb834;
114
- --bs-yellow-450: #c18300;
114
+ --bs-yellow-400: #c18300;
115
115
  --bs-yellow-500: #805a14;
116
116
  --bs-shadow-primary: rgba(0, 0, 0, 0.06);
117
117
  --bs-shadow-secondary: rgba(28, 0, 135, 0.2);
118
118
  --bs-gradient-dark: linear-gradient(
119
119
  90deg,
120
120
  #1c0087 0%,
121
- #ee282a 35%,
122
- #ffffff 50%,
121
+ #ee282a 35.01%,
122
+ #fff 49.99%,
123
123
  #0086ea 65%,
124
124
  #1c0087 100%
125
125
  );
126
126
  --bs-gradient-light: linear-gradient(
127
127
  90deg,
128
128
  #1c0087 0%,
129
- #ee282a 20%,
130
- #ee282a 40%,
131
- #1c0087 50%,
129
+ #ee282a 19.93%,
130
+ #ee282a 39.91%,
131
+ #1c0087 49.9%,
132
132
  #0086ea 60%,
133
- #0086ea 80%,
133
+ #0086ea 79.99%,
134
134
  #1c0087 100%
135
135
  );
136
136
  --bs-gradient-line: linear-gradient(
137
137
  90deg,
138
138
  #ee282a 0%,
139
- #1c0087 50%,
139
+ #1c0087 49.35%,
140
140
  #0086ea 100%
141
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%,
142
+ --bs-gradient-blue-center: radial-gradient(
143
+ 154.77% 52.27% at 47.08% 49.86%,
162
144
  #162fb4 0%,
163
145
  #1d1e48 100%
164
146
  );
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%,
147
+ --bs-gradient-blue-mid-left: linear-gradient(
148
+ 90deg,
172
149
  #162fb4 0%,
173
- #1d1e48 100%
150
+ #1d1e48 98.9%
174
151
  );
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%
152
+ --bs-gradient-blue-mid-right: linear-gradient(
153
+ 90deg,
154
+ #1d1e48 0%,
155
+ #162fb4 99.27%
179
156
  );
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%
157
+ --bs-gradient-blue-bottom-center: radial-gradient(
158
+ 100% 100% at 50% 0%,
159
+ #1d1e48 0%,
160
+ #162fb4 100%
184
161
  );
185
- --bs-gradient-blue-center: radial-gradient(
186
- 172.57% 58.28% at 50% 49.86%,
187
- #162fb4 0%,
162
+ --bs-gradient-blue-top-center: radial-gradient(
163
+ 96.7% 96.7% at 50% 0%,
164
+ #162fb4 5%,
188
165
  #1d1e48 100%
189
166
  );
190
- --bs-gradient-blue-bottom-left: radial-gradient(
191
- 312.54% 141.42% at 0% 100%,
167
+ --bs-gradient-blue-top-left: radial-gradient(
168
+ 312.54% 141.42% at 0% 0%,
192
169
  #162fb4 0%,
193
170
  #1d1e48 100%
194
171
  );
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
172
  --bs-gradient-blue-bottom-right: radial-gradient(
201
- 312.54% 141.42% at 100% 100%,
173
+ 312.54% 141.42% at 0% 0%,
174
+ #1d1e48 0%,
175
+ #162fb4 100%
176
+ );
177
+ --bs-gradient-blue-top-right: radial-gradient(
178
+ 312.54% 141.42% at 100% 0%,
202
179
  #162fb4 0%,
203
180
  #1d1e48 100%
204
181
  );
182
+ --bs-gradient-blue-bottom-left: radial-gradient(
183
+ 312.54% 141.42% at 100% 0%,
184
+ #1d1e48 0%,
185
+ #162fb4 100%
186
+ );
205
187
  --bs-gradient-light-blue-transparent: radial-gradient(
206
188
  236% 114.71% at 94.24% 7.6%,
207
189
  rgba(153, 207, 247, 0.2) 0%,
@@ -214,8 +196,8 @@
214
196
  );
215
197
  --bs-gradient-light-gray: linear-gradient(
216
198
  180deg,
217
- #f7f7fc 24.82%,
218
- #f0f0fa 100%
199
+ var(--background-light, #f7f7fc) 24.82%,
200
+ var(--background-medium, #f0f0fa) 100%
219
201
  );
220
202
  --bs-gradient-softchoice-light: linear-gradient(
221
203
  252deg,
@@ -227,6 +209,24 @@
227
209
  #ff5100 66.87%,
228
210
  #7d00ff 97.9%
229
211
  );
212
+ --bs-gradient-atom-ai-border: conic-gradient(
213
+ from 180deg at 50% 50%,
214
+ var(--bs-royal-400) -96.8deg,
215
+ var(--bs-pink-400) 74.2deg,
216
+ var(--bs-blue-400) 98.8deg,
217
+ var(--bs-orange-400) 259.6deg,
218
+ var(--bs-royal-400) 283.2deg,
219
+ var(--bs-pink-400) 414.4deg
220
+ );
221
+ --bs-gradient-atom-ai-bg: conic-gradient(
222
+ from 180deg at 50% 50%,
223
+ rgba(22, 47, 180, 0.05) -96.8deg,
224
+ rgba(227, 28, 121, 0.05) 74.2deg,
225
+ rgba(0, 134, 234, 0.05) 98.8deg,
226
+ rgba(251, 85, 14, 0.05) 259.6deg,
227
+ rgba(22, 47, 180, 0.05) 283.2deg,
228
+ rgba(227, 28, 121, 0.05) 414.4deg
229
+ );
230
230
  --bs-space-0: var(--bs-space-none);
231
231
  --bs-space-1: var(--bs-space-3xs);
232
232
  --bs-space-2: var(--bs-space-2xs);
@@ -263,6 +263,7 @@
263
263
  --bs-font-light: 300;
264
264
  --bs-font-normal: 400;
265
265
  --bs-font-semibold: 600;
266
+ --bs-font-bold: 600;
266
267
  --bs-leading-none: 1;
267
268
  --bs-leading-sm: 1.1;
268
269
  --bs-leading-regular: 1.3;
@@ -297,8 +298,8 @@
297
298
  /* Navigation */
298
299
  --bs-horizontal-nav-height: 48px;
299
300
  --bs-vertical-nav-narrow-width: 4.5rem;
300
- --bs-vertical-nav-width: 9.875rem;
301
- --bs-vertical-nav-collapsed-width: 4rem;
301
+ --bs-vertical-nav-width: 11.25rem;
302
+ --bs-vertical-nav-collapsed-width: 4.5rem;
302
303
  /* Dynamic width set by the navigation component for page layout */
303
304
  --bs-page-nav-width: 0px;
304
305
 
@@ -318,7 +319,7 @@
318
319
  --bs-ink-base: var(--bs-black);
319
320
  --bs-ink-medium: var(--bs-gray-500);
320
321
  --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-disabled: rgba(78, 79, 95, 0.6); /* gray-400 at 60% */
322
323
  --bs-ink-invert-base: var(--bs-white);
323
324
  --bs-ink-invert-medium: var(--bs-gray-100);
324
325
  --bs-ink-invert-light: var(--bs-gray-200);
@@ -327,37 +328,12 @@
327
328
  --bs-ink-accent-1: var(--bs-royal-400);
328
329
  --bs-ink-accent-2: var(--bs-violet-400);
329
330
  --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);
331
+ --bs-ink-accent-4: var(--bs-purple-400);
332
+ --bs-ink-positive: var(--bs-green-500);
333
333
  --bs-ink-warning: var(--bs-orange-500);
334
+ --bs-ink-negative: var(--bs-red-500);
334
335
  --bs-ink-white: var(--bs-white);
335
336
 
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
337
  /* Primary */
362
338
  --bs-primary-base-fixed: var(--bs-blue-400);
363
339
  --bs-primary-base: var(--bs-blue-400);
@@ -374,13 +350,6 @@
374
350
  --bs-secondary-lightest: var(--bs-plum-100);
375
351
  --bs-secondary-highlight: var(--bs-plum-10);
376
352
 
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
353
  /* Accent 1 */
385
354
  --bs-accent-1-base-fixed: var(--bs-royal-400);
386
355
  --bs-accent-1-base: var(--bs-royal-400);
@@ -406,46 +375,91 @@
406
375
  --bs-accent-3-highlight: var(--bs-pink-10);
407
376
 
408
377
  /* 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);
378
+ --bs-accent-4-base-fixed: var(--bs-purple-400);
379
+ --bs-accent-4-base: var(--bs-purple-400);
380
+ --bs-accent-4-medium: var(--bs-purple-300);
381
+ --bs-accent-4-light: var(--bs-purple-200);
382
+ --bs-accent-4-lightest: var(--bs-purple-100);
383
+ --bs-accent-4-highlight: var(--bs-purple-10);
384
+
385
+ /* Accent 5 */
386
+ --bs-accent-5-base: var(--bs-orange-400);
387
+ --bs-accent-5-medium: var(--bs-orange-300);
388
+ --bs-accent-5-light: var(--bs-orange-200);
389
+ --bs-accent-5-lightest: var(--bs-orange-100);
390
+ --bs-accent-5-highlight: var(--bs-orange-10);
391
+
392
+ /* Accent 6 */
393
+ --bs-accent-6-base: var(--bs-red-400);
394
+ --bs-accent-6-medium: var(--bs-red-300);
395
+ --bs-accent-6-light: var(--bs-red-200);
396
+ --bs-accent-6-lightest: var(--bs-red-100);
397
+ --bs-accent-6-highlight: var(--bs-red-10);
398
+
399
+ /* Accent 7 */
400
+ --bs-accent-7-base: var(--bs-navy-400);
401
+ --bs-accent-7-medium: var(--bs-navy-300);
402
+ --bs-accent-7-light: var(--bs-navy-200);
403
+ --bs-accent-7-lightest: var(--bs-navy-100);
404
+ --bs-accent-7-highlight: var(--bs-navy-10);
405
+
406
+ /* Neutral */
407
+ --bs-neutral-dark: var(--bs-gray-500);
408
+ --bs-neutral-base: var(--bs-gray-400);
409
+ --bs-neutral-medium: var(--bs-gray-300);
410
+ --bs-neutral-light: var(--bs-gray-200);
411
+ --bs-neutral-lightest: var(--bs-gray-100);
414
412
 
415
413
  /* 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);
414
+ --bs-positive-base: var(--bs-green-400);
415
+ --bs-positive-medium: var(--bs-green-300);
416
+ --bs-positive-highlight: var(--bs-green-10);
430
417
 
431
418
  /* Warning */
432
- --bs-warning-dark: var(--bs-orange-500);
433
- --bs-warning-base: var(--bs-orange-400);
419
+ --bs-warning-base: var(--bs-orange-500);
434
420
  --bs-warning-medium: var(--bs-orange-300);
435
- --bs-warning-light: var(--bs-orange-200);
436
- --bs-warning-lightest: var(--bs-orange-100);
437
421
  --bs-warning-highlight: var(--bs-orange-10);
438
422
 
439
423
  /* Negative */
440
- --bs-negative-dark: var(--bs-red-500);
441
- --bs-negative-base: var(--bs-red-400);
424
+ --bs-negative-base: var(--bs-red-500);
442
425
  --bs-negative-medium: var(--bs-red-300);
443
- --bs-negative-light: var(--bs-red-200);
444
- --bs-negative-lightest: var(--bs-red-100);
445
426
  --bs-negative-highlight: var(--bs-red-10);
446
427
 
447
-
428
+ /* Background */
429
+ --bs-bg-base: var(--bs-white);
430
+ --bs-bg-light: var(--bs-gray-50);
431
+ --bs-bg-medium: var(--bs-gray-100);
432
+ --bs-bg-disabled: var(--bs-gray-200);
433
+ --bs-bg-invert-base: var(--bs-slate-600);
434
+ --bs-bg-invert-light: var(--bs-slate-500);
435
+ --bs-bg-invert-medium: var(--bs-slate-400);
436
+ --bs-bg-base-to-light: var(--bs-white);
437
+ --bs-bg-base-to-medium: var(--bs-white);
438
+ --bs-bg-medium-to-base: var(--bs-gray-100);
439
+ --bs-bg-medium-to-light: var(--bs-gray-100);
440
+ --bs-bg-light-to-base: var(--bs-gray-50);
441
+ --bs-bg-light-to-medium: var(--bs-gray-50);
442
+
443
+ /* Borders */
444
+ --bs-border-dark: var(--bs-gray-300);
445
+ --bs-border-base: var(--bs-gray-200);
446
+ --bs-border-medium: var(--bs-gray-150);
447
+ --bs-border-light: var(--bs-gray-100);
448
+ --bs-border-medium-to-light: var(--bs-gray-150);
449
+ --bs-border-input: rgba(99, 66, 145, 0.75); /* violet-300 at 75% */
450
+ --bs-border-active: var(--bs-blue-400);
451
+ --bs-border-error: var(--bs-red-500);
452
+
448
453
  /* -------------- Deprecated Color Tokens -------------- */
454
+ /* Ink */
455
+ --bs-ink-blue: var(--bs-blue-500); /* replaced by Ink Primary */
456
+ --bs-ink-orange: var(--bs-orange-500); /* replaced by Ink Warning */
457
+ --bs-ink-pink: var(--bs-pink-500); /* replaced by Ink Accent 3 */
458
+ --bs-ink-plum: var(--bs-plum-400); /* replaced by Ink Secondary */
459
+ --bs-ink-purple: var(--bs-purple-400); /* replaced by Ink Accent 4 */
460
+ --bs-ink-red: var(--bs-red-500); /* replaced by Ink Negative */
461
+ --bs-ink-royal: var(--bs-royal-400); /* replaced by Ink Accent 1 */
462
+ --bs-ink-violet: var(--bs-violet-400); /* replaced by Ink Accent 2 */
449
463
 
450
464
  /* Blue (replaced by Primary) */
451
465
  --bs-blue-base: var(--bs-blue-400);
@@ -460,7 +474,7 @@
460
474
  --bs-gray-light: var(--bs-gray-200);
461
475
  --bs-gray-lightest: var(--bs-gray-100);
462
476
 
463
- /* Navy (replaced by Accent 4) */
477
+ /* Navy (replaced by Accent 7) */
464
478
  --bs-navy-base: var(--bs-navy-400);
465
479
  --bs-navy-medium: var(--bs-navy-300);
466
480
  --bs-navy-light: var(--bs-navy-200);
@@ -485,7 +499,7 @@
485
499
  --bs-plum-light: var(--bs-plum-200);
486
500
  --bs-plum-lightest: var(--bs-plum-100);
487
501
 
488
- /* Purple (replaced by Positive) */
502
+ /* Purple (replaced by Accent 4) */
489
503
  --bs-purple-base: var(--bs-purple-400);
490
504
  --bs-purple-medium: var(--bs-purple-300);
491
505
  --bs-purple-light: var(--bs-purple-200);
@@ -508,121 +522,107 @@
508
522
  --bs-violet-medium: var(--bs-violet-300);
509
523
  --bs-violet-light: var(--bs-violet-200);
510
524
  --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
525
  }
539
- /* Token Overrides */
526
+ /* put browser scrollbars into dark mode */
527
+ /* html selector needed since .dark class gets added to body, but scrolling may be on <html> */
528
+ html:where(:has(.dark)),
529
+ .dark {
530
+ color-scheme: dark;
531
+ }
540
532
  .dark {
541
533
  /* Ink */
542
534
  --bs-ink-base: var(--bs-white);
543
535
  --bs-ink-medium: var(--bs-gray-100);
544
536
  --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);
537
+ --bs-ink-disabled: rgba(163, 164, 183, 0.7); /* gray-300 at 70% */
549
538
  --bs-ink-primary: var(--bs-blue-100);
550
539
  --bs-ink-secondary: var(--bs-plum-100);
551
540
  --bs-ink-accent-1: var(--bs-royal-200);
552
- --bs-ink-accent-2: var(--bs-violet-200);
541
+ --bs-ink-accent-2: var(--bs-violet-100);
553
542
  --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);
543
+ --bs-ink-accent-4: var(--bs-purple-200);
544
+ --bs-ink-positive: var(--bs-green-200);
557
545
  --bs-ink-warning: var(--bs-orange-200);
546
+ --bs-ink-negative: var(--bs-red-200);
558
547
  --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);
548
+ --bs-ink-invert-base: var(--bs-black);
549
+ --bs-ink-invert-medium: var(--bs-gray-500);
550
+ --bs-ink-invert-light: var(--bs-gray-400);
584
551
 
585
552
  /* Primary */
586
553
  --bs-primary-base: var(--bs-blue-300);
554
+ --bs-primary-medium: var(--bs-blue-200);
587
555
 
588
556
  /* Secondary */
589
557
  --bs-secondary-base: var(--bs-plum-300);
590
558
  --bs-secondary-medium: var(--bs-plum-200);
591
559
 
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
560
  /* Accent 1 */
600
561
  --bs-accent-1-base: var(--bs-royal-300);
601
562
  --bs-accent-1-medium: var(--bs-royal-200);
602
563
 
603
564
  /* Accent 2 */
604
565
  --bs-accent-2-base: var(--bs-violet-300);
566
+ --bs-accent-2-medium: var(--bs-violet-200);
605
567
 
606
568
  /* Accent 3 */
607
569
  --bs-accent-3-base: var(--bs-pink-300);
570
+ --bs-accent-3-medium: var(--bs-pink-200);
608
571
 
609
572
  /* Accent 4 */
610
- --bs-accent-4-base: var(--bs-navy-200);
573
+ --bs-accent-4-base: var(--bs-purple-300);
574
+ --bs-accent-4-medium: var(--bs-purple-200);
611
575
 
612
- /* Positive */
613
- --bs-positive-base: var(--bs-purple-300);
576
+ /* Accent 5 */
577
+ --bs-accent-5-base: var(--bs-orange-300);
578
+ --bs-accent-5-medium: var(--bs-orange-200);
579
+
580
+ /* Accent 6 */
581
+ --bs-accent-6-base: var(--bs-red-300);
614
582
 
615
- /* Ecommerce Positive */
616
- --bs-ecomm-positive-base: var(--bs-green-300);
583
+ /* Accent 7 */
584
+ --bs-accent-7-base: var(--bs-navy-300);
585
+ --bs-accent-7-medium: var(--bs-navy-200);
586
+
587
+ /* Neutral */
588
+ --bs-neutral-dark: var(--bs-gray-100);
589
+ --bs-neutral-base: var(--bs-gray-200);
590
+ --bs-neutral-medium: var(--bs-gray-300);
591
+ --bs-neutral-light: var(--bs-gray-400);
592
+ --bs-neutral-lightest: var(--bs-gray-500);
617
593
 
618
594
  /* Warning */
619
- --bs-warning-dark: var(--bs-orange-400);
620
- --bs-warning-base: var(--bs-orange-300);
595
+ --bs-warning-base: var(--bs-orange-400);
596
+ --bs-warning-medium: var(--bs-orange-200);
621
597
 
622
598
  /* Negative */
623
- --bs-negative-dark: var(--bs-red-400);
624
599
  --bs-negative-base: var(--bs-red-300);
600
+ --bs-negative-medium: var(--bs-red-200);
625
601
 
602
+ /* Background */
603
+ --bs-bg-base: var(--bs-slate-600);
604
+ --bs-bg-light: var(--bs-slate-500);
605
+ --bs-bg-medium: var(--bs-slate-400);
606
+ --bs-bg-disabled: rgba(78, 79, 95, 0.3); /* gray-400 at 30% */
607
+ --bs-bg-invert-base: var(--bs-white);
608
+ --bs-bg-invert-light: var(--bs-gray-50);
609
+ --bs-bg-invert-medium: var(--bs-gray-100);
610
+ --bs-bg-base-to-light: var(--bs-slate-500);
611
+ --bs-bg-base-to-medium: var(--bs-slate-400);
612
+ --bs-bg-medium-to-base: var(--bs-slate-600);
613
+ --bs-bg-medium-to-light: var(--bs-slate-500);
614
+ --bs-bg-light-to-base: var(--bs-slate-600);
615
+ --bs-bg-light-to-medium: var(--bs-slate-400);
616
+
617
+ /* Borders */
618
+ --bs-border-dark: var(--bs-gray-300);
619
+ --bs-border-base: rgba(163, 164, 183, 0.7); /* gray-300 at 70% */
620
+ --bs-border-medium: var(--bs-gray-400);
621
+ --bs-border-light: rgba(78, 79, 95, 0.5); /* gray-400 at 50% */
622
+ --bs-border-medium-to-light: rgba(78, 79, 95, 0.5); /* gray-400 at 50% */
623
+ --bs-border-input: var(--bs-violet-200);
624
+ --bs-border-active: var(--bs-blue-300);
625
+ --bs-border-error: var(--bs-red-300);
626
626
 
627
627
  /* Atom gradients */
628
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);
@@ -640,9 +640,16 @@
640
640
  --bs-shadow-drawerRight: 16px 20px 40px 0 #000;
641
641
  --bs-shadow-profilePhoto: inset 0px 0px 0.5em var(--bs-shadow-secondary);
642
642
 
643
-
644
-
645
643
  /* -------------- Deprecated Color Tokens -------------- */
644
+ /* Ink */
645
+ --bs-ink-blue: var(--bs-blue-200); /* replaced by Ink Primary */
646
+ --bs-ink-orange: var(--bs-orange-200); /* replaced by Ink Warning */
647
+ --bs-ink-pink: var(--bs-pink-200); /* replaced by Ink Accent 3 */
648
+ --bs-ink-plum: var(--bs-plum-100); /* replaced by Ink Secondary */
649
+ --bs-ink-purple: var(--bs-purple-200); /* replaced by Ink Accent 4 */
650
+ --bs-ink-red: var(--bs-red-200); /* replaced by Ink Negative */
651
+ --bs-ink-royal: var(--bs-royal-200); /* replaced by Ink Accent 1 */
652
+ --bs-ink-violet: var(--bs-violet-200); /* replaced by Ink Accent 2 */
646
653
 
647
654
  /* Blue (replaced by Primary) */
648
655
  --bs-blue-base: var(--bs-blue-300);
@@ -653,7 +660,7 @@
653
660
  --bs-gray-light: var(--bs-gray-400);
654
661
  --bs-gray-lightest: var(--bs-gray-500);
655
662
 
656
- /* Navy (replaced by Accent 4) */
663
+ /* Navy (replaced by Accent 7) */
657
664
  --bs-navy-base: var(--bs-navy-200);
658
665
 
659
666
  /* Orange (replaced by Warning) */
@@ -667,7 +674,7 @@
667
674
  --bs-plum-base: var(--bs-plum-300);
668
675
  --bs-plum-medium: var(--bs-plum-200);
669
676
 
670
- /* Purple (replaced by Positive) */
677
+ /* Purple (replaced by Accent 4) */
671
678
  --bs-purple-base: var(--bs-purple-300);
672
679
 
673
680
  /* Red (replaced by Negative) */
@@ -679,52 +686,16 @@
679
686
 
680
687
  /* Violet (replaced by Accent 2) */
681
688
  --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
689
  }
710
- /* Token Overrides (Softchoice branding) */
711
690
  .softchoice {
712
691
  /* Ink */
713
692
  --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);
693
+ --bs-ink-secondary: var(--bs-orange-500);
694
+ --bs-ink-accent-1: var(--bs-midnight-400);
695
+ --bs-ink-accent-4: var(--bs-orchid-400);
717
696
  --bs-ink-positive: var(--bs-green-500);
718
697
  --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);
698
+ --bs-ink-negative: var(--bs-maroon-500);
728
699
 
729
700
  /* Primary */
730
701
  --bs-primary-base-fixed: var(--bs-cobalt-400);
@@ -735,12 +706,35 @@
735
706
  --bs-primary-highlight: var(--bs-cobalt-10);
736
707
 
737
708
  /* 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);
709
+ --bs-secondary-base-fixed: var(--bs-orange-400);
710
+ --bs-secondary-base: var(--bs-orange-400);
711
+ --bs-secondary-medium: var(--bs-orange-300);
712
+ --bs-secondary-light: var(--bs-orange-200);
713
+ --bs-secondary-lightest: var(--bs-orange-100);
714
+ --bs-secondary-highlight: var(--bs-orange-10);
715
+
716
+ /* Accent 1 */
717
+ --bs-accent-1-base-fixed: var(--bs-midnight-400);
718
+ --bs-accent-1-base: var(--bs-midnight-400);
719
+ --bs-accent-1-medium: var(--bs-midnight-300);
720
+ --bs-accent-1-light: var(--bs-midnight-200);
721
+ --bs-accent-1-lightest: var(--bs-midnight-100);
722
+ --bs-accent-1-highlight: var(--bs-midnight-10);
723
+
724
+ /* Accent 4 */
725
+ --bs-accent-4-base-fixed: var(--bs-orchid-400);
726
+ --bs-accent-4-base: var(--bs-orchid-400);
727
+ --bs-accent-4-medium: var(--bs-orchid-300);
728
+ --bs-accent-4-light: var(--bs-orchid-200);
729
+ --bs-accent-4-lightest: var(--bs-orchid-100);
730
+ --bs-accent-4-highlight: var(--bs-orchid-10);
731
+
732
+ /* Accent 5 */
733
+ --bs-accent-5-base: var(--bs-gold-400);
734
+ --bs-accent-5-medium: var(--bs-gold-300);
735
+ --bs-accent-5-light: var(--bs-gold-200);
736
+ --bs-accent-5-lightest: var(--bs-gold-100);
737
+ --bs-accent-5-highlight: var(--bs-gold-10);
744
738
 
745
739
  /* Neutral */
746
740
  --bs-neutral-dark: var(--bs-charcoal-500);
@@ -749,35 +743,26 @@
749
743
  --bs-neutral-light: var(--bs-charcoal-200);
750
744
  --bs-neutral-lightest: var(--bs-charcoal-100);
751
745
 
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
746
  /* Warning */
769
- --bs-warning-dark: var(--bs-yellow-450);
770
747
  --bs-warning-base: var(--bs-yellow-400);
771
748
  --bs-warning-medium: var(--bs-yellow-300);
772
- --bs-warning-light: var(--bs-yellow-200);
773
- --bs-warning-lightest: var(--bs-yellow-100);
774
749
  --bs-warning-highlight: var(--bs-yellow-10);
775
750
 
776
751
  /* Negative */
777
- --bs-negative-dark: var(--bs-maroon-500);
778
- --bs-negative-base: var(--bs-maroon-400);
752
+ --bs-negative-base: var(--bs-maroon-500);
779
753
  --bs-negative-medium: var(--bs-maroon-300);
780
- --bs-negative-light: var(--bs-maroon-200);
781
- --bs-negative-lightest: var(--bs-maroon-100);
782
754
  --bs-negative-highlight: var(--bs-maroon-10);
755
+
756
+ /* Background */
757
+ --bs-bg-light: var(--bs-charcoal-100);
758
+ --bs-bg-medium: var(--bs-charcoal-200);
759
+ --bs-bg-disabled: var(--bs-charcoal-300);
760
+ --bs-bg-medium-to-base: var(--bs-charcoal-200);
761
+ --bs-bg-medium-to-light: var(--bs-charcoal-200);
762
+ --bs-bg-light-to-base: var(--bs-charcoal-100);
763
+ --bs-bg-light-to-medium: var(--bs-charcoal-100);
764
+
765
+ /* Borders */
766
+ --bs-border-active: var(--bs-cobalt-400);
767
+ --bs-border-error: var(--bs-maroon-500);
783
768
  }