@wwtdev/bsds-css 2.3.1 → 2.3.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (15) hide show
  1. package/dist/components/_banner.scss +0 -4
  2. package/dist/components/_buttons.scss +19 -13
  3. package/dist/components/_form-booleans.scss +28 -13
  4. package/dist/components/_form-input-composite.scss +2 -2
  5. package/dist/components/_pills.scss +6 -2
  6. package/dist/components/banner.css +0 -4
  7. package/dist/components/buttons.css +19 -13
  8. package/dist/components/form-booleans.css +28 -13
  9. package/dist/components/form-input-composite.css +2 -2
  10. package/dist/components/pills.css +6 -2
  11. package/dist/wwt-bsds-preset.js +23 -9
  12. package/dist/wwt-bsds-wc-base.css +66 -28
  13. package/dist/wwt-bsds.css +119 -60
  14. package/dist/wwt-bsds.min.css +1 -1
  15. package/package.json +17 -6
package/dist/wwt-bsds-wc-base.css CHANGED
@@ -39,12 +39,11 @@
39
39
  --bs-navy-500: #131431;
40
40
  --bs-navy-600: #070822;
41
41
  --bs-orange-10: rgba(250, 70, 22, 0.1);
42
- --bs-orange-100: #fed1c5;
43
- --bs-orange-200: #fda58d;
44
- --bs-orange-300: #fc7755;
45
- --bs-orange-400: #fa4616;
46
- --bs-orange-500: #ea6712;
47
- --bs-orange-warning: #ea6712;
42
+ --bs-orange-100: #f3c4a8;
43
+ --bs-orange-200: #f7a17b;
44
+ --bs-orange-300: #f97c4c;
45
+ --bs-orange-400: #fb550e;
46
+ --bs-orange-500: #c33d04;
48
47
  --bs-pink-100: #f6cbe0;
49
48
  --bs-pink-200: #eb7eaf;
50
49
  --bs-pink-300: #e45e9b;
@@ -298,25 +297,36 @@ button {
298
297
  :root,
299
298
  :host {
300
299
  --bs-bg-base: var(--bs-white);
301
- --bs-bg-base-elevated: var(--bs-white);
300
+ --bs-bg-base-to-light: var(--bs-white);
301
+ --bs-bg-base-to-medium: var(--bs-white);
302
302
  --bs-bg-light: var(--bs-gray-50);
303
+ --bs-bg-light-to-base: var(--bs-gray-50);
303
304
  --bs-bg-medium: var(--bs-gray-100);
305
+ --bs-bg-medium-to-light: var(--bs-gray-100);
304
306
  --bs-bg-invert-base: var(--bs-navy-500);
305
307
  --bs-bg-invert-medium: var(--bs-navy-400);
306
308
  --bs-bg-disabled: var(--bs-gray-200);
307
309
 
310
+ --bs-hyperlink: var(--bs-purple-400);
311
+
312
+ --bs-ink-accent: var(--bs-plum-400);
308
313
  --bs-ink-base: var(--bs-black);
309
- --bs-ink-medium: var(--bs-gray-500);
314
+ --bs-ink-disabled: var(--bs-gray-400);
310
315
  --bs-ink-light: var(--bs-gray-400);
311
- --bs-ink-accent: var(--bs-plum-400);
312
- --bs-ink-invert: var(--bs-gray-100);
316
+ --bs-ink-invert-base: var(--bs-gray-100);
313
317
  --bs-ink-invert-medium: var(--bs-gray-200);
318
+ --bs-ink-invert-light: var(--bs-gray-300);
319
+ --bs-ink-medium: var(--bs-gray-500);
320
+
314
321
  --bs-ink-blue: var(--bs-blue-500);
315
- --bs-ink-red: var(--bs-red-500);
316
- --bs-ink-pink: var(--bs-pink-500);
317
322
  --bs-ink-orange: var(--bs-orange-500);
318
- --bs-hyperlink: var(--bs-purple-400);
319
- --bs-ink-disabled: var(--bs-gray-400);
323
+ --bs-ink-pink: var(--bs-pink-500);
324
+ --bs-ink-plum: var(--bs-plum-400);
325
+ --bs-ink-purple: var(--bs-purple-400);
326
+ --bs-ink-red: var(--bs-red-500);
327
+ --bs-ink-royal: var(--bs-royal-400);
328
+ --bs-ink-violet: var(--bs-violet-400);
329
+ --bs-ink-white: var(--bs-white);
320
330
 
321
331
  --bs-blue-base: var(--bs-blue-400);
322
332
  --bs-blue-medium: var(--bs-blue-300);
@@ -360,6 +370,8 @@ button {
360
370
  --bs-gray-light: var(--bs-gray-200);
361
371
  --bs-gray-lightest: var(--bs-gray-100);
362
372
 
373
+ --bs-warning: var(--bs-orange-500);
374
+
363
375
  --bs-border-dark: var(--bs-gray-400);
364
376
  --bs-border-base: var(--bs-gray-200);
365
377
  --bs-border-medium: var(--bs-gray-150);
@@ -377,44 +389,67 @@ button {
377
389
  --bs-bg-input-hover: rgba(201, 202, 217, 0.20);
378
390
 
379
391
  /* deprecate / phase out.. */
392
+ --bs-bg-base-elevated: var(--bs-white); /* now --bs-bg-base-to-light */
380
393
  --bs-bg-subtle: var(--bs-gray-100);
381
394
  --bs-bg-invert: var(--bs-navy-500);
382
395
  --bs-bg-invert-subtle: var(--bs-navy-400);
383
396
  --bs-border: var(--bs-gray-200);
397
+ --bs-ink-invert: var(--bs-gray-100);
398
+ --bs-orange-warning: var(--bs-orange-500);
399
+ /* now --bs-warning. 👆 mapping to bs-warning directly doesn't autoconvert in dark mode for some reason. Same for bg-base-to-light.*/
384
400
  }
385
401
 
386
402
  .dark,
387
403
  .dark :where(:host) {
388
404
  --bs-bg-base: var(--bs-navy-600);
389
- --bs-bg-base-elevated: var(--bs-navy-500);
405
+ --bs-bg-base-to-light: var(--bs-navy-500);
406
+ --bs-bg-base-to-medium: var(--bs-navy-400);
390
407
  --bs-bg-light: var(--bs-navy-500);
408
+ --bs-bg-light-to-base: var(--bs-navy-600);
391
409
  --bs-bg-medium: var(--bs-navy-400);
410
+ --bs-bg-medium-to-light: var(--bs-navy-500);
392
411
  --bs-bg-invert-base: var(--bs-gray-100);
393
412
  --bs-bg-invert-medium: var(--bs-gray-50);
394
413
  --bs-bg-disabled: var(--bs-gray-500);
395
414
 
396
- --bs-ink-base: var(--bs-gray-100);
397
- --bs-ink-medium: var(--bs-gray-200);
398
- --bs-ink-light: var(--bs-gray-300);
415
+ --bs-hyperlink: var(--bs-purple-200);
416
+
399
417
  --bs-ink-accent: var(--bs-gray-100);
400
- --bs-ink-invert: var(--bs-black);
418
+ --bs-ink-base: var(--bs-gray-100);
419
+ --bs-ink-disabled: var(--bs-gray-300);
420
+ --bs-ink-invert-base: var(--bs-black);
401
421
  --bs-ink-invert-medium: var(--bs-gray-500);
422
+ --bs-ink-invert-light: var(--bs-gray-400);
423
+ --bs-ink-light: var(--bs-gray-300);
424
+ --bs-ink-medium: var(--bs-gray-200);
425
+
402
426
  --bs-ink-blue: var(--bs-blue-200);
403
- --bs-ink-red: var(--bs-red-100);
427
+ --bs-ink-orange: var(--bs-orange-200);
404
428
  --bs-ink-pink: var(--bs-pink-200);
405
- --bs-hyperlink: var(--bs-purple-200);
406
- --bs-ink-disabled: var(--bs-gray-300);
429
+ --bs-ink-plum: var(--bs-plum-100);
430
+ --bs-ink-purple: var(--bs-purple-200);
431
+ --bs-ink-red: var(--bs-red-200);
432
+ --bs-ink-royal: var(--bs-royal-100);
433
+ --bs-ink-violet: var(--bs-violet-200);
407
434
 
435
+ --bs-blue-base: var(--bs-blue-300);
408
436
  --bs-navy-base: var(--bs-navy-200);
409
- --bs-plum-base: var(--bs-plum-100);
410
- --bs-purple-base: var(--bs-purple-200);
411
- --bs-royal-base: var(--bs-royal-200);
412
- --bs-violet-base: var(--bs-violet-200);
437
+ --bs-orange-base: var(--bs-orange-300);
438
+ --bs-pink-base: var(--bs-pink-300);
439
+ --bs-plum-base: var(--bs-plum-300);
440
+ --bs-purple-base: var(--bs-purple-300);
441
+ --bs-red-base: var(--bs-red-300);
442
+ --bs-royal-base: var(--bs-royal-300);
443
+ --bs-royal-medium: var(--bs-royal-200);
444
+ --bs-violet-base: var(--bs-violet-300);
445
+
413
446
  --bs-gray-dark: var(--bs-gray-100);
414
447
  --bs-gray-base: var(--bs-gray-200);
415
448
  --bs-gray-light: var(--bs-gray-400);
416
449
  --bs-gray-lightest: var(--bs-gray-500);
417
450
 
451
+ --bs-warning: var(--bs-orange-400);
452
+
418
453
  --bs-border-dark: var(--bs-gray-200);
419
454
  --bs-border-base: var(--bs-gray-400);
420
455
  --bs-border-medium: var(--bs-gray-500);
@@ -438,10 +473,13 @@ button {
438
473
  16px 16px 32px var(--bs-shadow-invert);
439
474
 
440
475
  /* deprecate / phase out.. */
476
+ --bs-bg-base-elevated: var(--bs-navy-500); /* now --bs-bg-base-to-light. See notes above in light mode. */
441
477
  --bs-bg-subtle: #2F2F51;
442
478
  --bs-bg-invert: var(--bs-white);
443
479
  --bs-bg-invert-subtle: var(--bs-gray-100);
444
480
  --bs-border: var(--bs-gray-400);
481
+ --bs-ink-invert: var(--bs-black);
482
+ --bs-orange-warning: var(--bs-orange-400); /* now --bs-warning. See notes above in light mode. */
445
483
  }
446
484
 
447
485
  body,
@@ -931,7 +969,7 @@ a:where(.bs-link):where(:focus:not(:focus-visible)) {
931
969
  .visually-hidden {
932
970
  border: 0;
933
971
  clip: rect(0 0 0 0);
934
- height: auto;
972
+ height: 1px;
935
973
  margin: 0;
936
974
  overflow: hidden;
937
975
  padding: 0;
@@ -952,7 +990,7 @@ a:where(.bs-link):where(:focus:not(:focus-visible)) {
952
990
  max-width: 70ch;
953
991
  }
954
992
 
955
- *:where([data-scroll="false"]) {
993
+ *:where([data-scroll="false"]) {
956
994
  overflow: hidden;
957
995
  }
958
996
 
package/dist/wwt-bsds.css CHANGED
@@ -39,12 +39,11 @@
39
39
  --bs-navy-500: #131431;
40
40
  --bs-navy-600: #070822;
41
41
  --bs-orange-10: rgba(250, 70, 22, 0.1);
42
- --bs-orange-100: #fed1c5;
43
- --bs-orange-200: #fda58d;
44
- --bs-orange-300: #fc7755;
45
- --bs-orange-400: #fa4616;
46
- --bs-orange-500: #ea6712;
47
- --bs-orange-warning: #ea6712;
42
+ --bs-orange-100: #f3c4a8;
43
+ --bs-orange-200: #f7a17b;
44
+ --bs-orange-300: #f97c4c;
45
+ --bs-orange-400: #fb550e;
46
+ --bs-orange-500: #c33d04;
48
47
  --bs-pink-100: #f6cbe0;
49
48
  --bs-pink-200: #eb7eaf;
50
49
  --bs-pink-300: #e45e9b;
@@ -277,25 +276,36 @@ button {
277
276
  :root,
278
277
  :host {
279
278
  --bs-bg-base: var(--bs-white);
280
- --bs-bg-base-elevated: var(--bs-white);
279
+ --bs-bg-base-to-light: var(--bs-white);
280
+ --bs-bg-base-to-medium: var(--bs-white);
281
281
  --bs-bg-light: var(--bs-gray-50);
282
+ --bs-bg-light-to-base: var(--bs-gray-50);
282
283
  --bs-bg-medium: var(--bs-gray-100);
284
+ --bs-bg-medium-to-light: var(--bs-gray-100);
283
285
  --bs-bg-invert-base: var(--bs-navy-500);
284
286
  --bs-bg-invert-medium: var(--bs-navy-400);
285
287
  --bs-bg-disabled: var(--bs-gray-200);
286
288
 
289
+ --bs-hyperlink: var(--bs-purple-400);
290
+
291
+ --bs-ink-accent: var(--bs-plum-400);
287
292
  --bs-ink-base: var(--bs-black);
288
- --bs-ink-medium: var(--bs-gray-500);
293
+ --bs-ink-disabled: var(--bs-gray-400);
289
294
  --bs-ink-light: var(--bs-gray-400);
290
- --bs-ink-accent: var(--bs-plum-400);
291
- --bs-ink-invert: var(--bs-gray-100);
295
+ --bs-ink-invert-base: var(--bs-gray-100);
292
296
  --bs-ink-invert-medium: var(--bs-gray-200);
297
+ --bs-ink-invert-light: var(--bs-gray-300);
298
+ --bs-ink-medium: var(--bs-gray-500);
299
+
293
300
  --bs-ink-blue: var(--bs-blue-500);
294
- --bs-ink-red: var(--bs-red-500);
295
- --bs-ink-pink: var(--bs-pink-500);
296
301
  --bs-ink-orange: var(--bs-orange-500);
297
- --bs-hyperlink: var(--bs-purple-400);
298
- --bs-ink-disabled: var(--bs-gray-400);
302
+ --bs-ink-pink: var(--bs-pink-500);
303
+ --bs-ink-plum: var(--bs-plum-400);
304
+ --bs-ink-purple: var(--bs-purple-400);
305
+ --bs-ink-red: var(--bs-red-500);
306
+ --bs-ink-royal: var(--bs-royal-400);
307
+ --bs-ink-violet: var(--bs-violet-400);
308
+ --bs-ink-white: var(--bs-white);
299
309
 
300
310
  --bs-blue-base: var(--bs-blue-400);
301
311
  --bs-blue-medium: var(--bs-blue-300);
@@ -339,6 +349,8 @@ button {
339
349
  --bs-gray-light: var(--bs-gray-200);
340
350
  --bs-gray-lightest: var(--bs-gray-100);
341
351
 
352
+ --bs-warning: var(--bs-orange-500);
353
+
342
354
  --bs-border-dark: var(--bs-gray-400);
343
355
  --bs-border-base: var(--bs-gray-200);
344
356
  --bs-border-medium: var(--bs-gray-150);
@@ -356,43 +368,66 @@ button {
356
368
  --bs-bg-input-hover: rgba(201, 202, 217, 0.20);
357
369
 
358
370
  /* deprecate / phase out.. */
371
+ --bs-bg-base-elevated: var(--bs-white); /* now --bs-bg-base-to-light */
359
372
  --bs-bg-subtle: var(--bs-gray-100);
360
373
  --bs-bg-invert: var(--bs-navy-500);
361
374
  --bs-bg-invert-subtle: var(--bs-navy-400);
362
375
  --bs-border: var(--bs-gray-200);
376
+ --bs-ink-invert: var(--bs-gray-100);
377
+ --bs-orange-warning: var(--bs-orange-500);
378
+ /* now --bs-warning. 👆 mapping to bs-warning directly doesn't autoconvert in dark mode for some reason. Same for bg-base-to-light.*/
363
379
  }
364
380
  .dark,
365
381
  .dark :where(:host) {
366
382
  --bs-bg-base: var(--bs-navy-600);
367
- --bs-bg-base-elevated: var(--bs-navy-500);
383
+ --bs-bg-base-to-light: var(--bs-navy-500);
384
+ --bs-bg-base-to-medium: var(--bs-navy-400);
368
385
  --bs-bg-light: var(--bs-navy-500);
386
+ --bs-bg-light-to-base: var(--bs-navy-600);
369
387
  --bs-bg-medium: var(--bs-navy-400);
388
+ --bs-bg-medium-to-light: var(--bs-navy-500);
370
389
  --bs-bg-invert-base: var(--bs-gray-100);
371
390
  --bs-bg-invert-medium: var(--bs-gray-50);
372
391
  --bs-bg-disabled: var(--bs-gray-500);
373
392
 
374
- --bs-ink-base: var(--bs-gray-100);
375
- --bs-ink-medium: var(--bs-gray-200);
376
- --bs-ink-light: var(--bs-gray-300);
393
+ --bs-hyperlink: var(--bs-purple-200);
394
+
377
395
  --bs-ink-accent: var(--bs-gray-100);
378
- --bs-ink-invert: var(--bs-black);
396
+ --bs-ink-base: var(--bs-gray-100);
397
+ --bs-ink-disabled: var(--bs-gray-300);
398
+ --bs-ink-invert-base: var(--bs-black);
379
399
  --bs-ink-invert-medium: var(--bs-gray-500);
400
+ --bs-ink-invert-light: var(--bs-gray-400);
401
+ --bs-ink-light: var(--bs-gray-300);
402
+ --bs-ink-medium: var(--bs-gray-200);
403
+
380
404
  --bs-ink-blue: var(--bs-blue-200);
381
- --bs-ink-red: var(--bs-red-100);
405
+ --bs-ink-orange: var(--bs-orange-200);
382
406
  --bs-ink-pink: var(--bs-pink-200);
383
- --bs-hyperlink: var(--bs-purple-200);
384
- --bs-ink-disabled: var(--bs-gray-300);
407
+ --bs-ink-plum: var(--bs-plum-100);
408
+ --bs-ink-purple: var(--bs-purple-200);
409
+ --bs-ink-red: var(--bs-red-200);
410
+ --bs-ink-royal: var(--bs-royal-100);
411
+ --bs-ink-violet: var(--bs-violet-200);
385
412
 
413
+ --bs-blue-base: var(--bs-blue-300);
386
414
  --bs-navy-base: var(--bs-navy-200);
387
- --bs-plum-base: var(--bs-plum-100);
388
- --bs-purple-base: var(--bs-purple-200);
389
- --bs-royal-base: var(--bs-royal-200);
390
- --bs-violet-base: var(--bs-violet-200);
415
+ --bs-orange-base: var(--bs-orange-300);
416
+ --bs-pink-base: var(--bs-pink-300);
417
+ --bs-plum-base: var(--bs-plum-300);
418
+ --bs-purple-base: var(--bs-purple-300);
419
+ --bs-red-base: var(--bs-red-300);
420
+ --bs-royal-base: var(--bs-royal-300);
421
+ --bs-royal-medium: var(--bs-royal-200);
422
+ --bs-violet-base: var(--bs-violet-300);
423
+
391
424
  --bs-gray-dark: var(--bs-gray-100);
392
425
  --bs-gray-base: var(--bs-gray-200);
393
426
  --bs-gray-light: var(--bs-gray-400);
394
427
  --bs-gray-lightest: var(--bs-gray-500);
395
428
 
429
+ --bs-warning: var(--bs-orange-400);
430
+
396
431
  --bs-border-dark: var(--bs-gray-200);
397
432
  --bs-border-base: var(--bs-gray-400);
398
433
  --bs-border-medium: var(--bs-gray-500);
@@ -416,10 +451,13 @@ button {
416
451
  16px 16px 32px var(--bs-shadow-invert);
417
452
 
418
453
  /* deprecate / phase out.. */
454
+ --bs-bg-base-elevated: var(--bs-navy-500); /* now --bs-bg-base-to-light. See notes above in light mode. */
419
455
  --bs-bg-subtle: #2F2F51;
420
456
  --bs-bg-invert: var(--bs-white);
421
457
  --bs-bg-invert-subtle: var(--bs-gray-100);
422
458
  --bs-border: var(--bs-gray-400);
459
+ --bs-ink-invert: var(--bs-black);
460
+ --bs-orange-warning: var(--bs-orange-400); /* now --bs-warning. See notes above in light mode. */
423
461
  }
424
462
  body,
425
463
  :host {
@@ -804,7 +842,7 @@ a:where(.bs-link):where(:focus:not(:focus-visible)) {
804
842
  .visually-hidden {
805
843
  border: 0;
806
844
  clip: rect(0 0 0 0);
807
- height: auto;
845
+ height: 1px;
808
846
  margin: 0;
809
847
  overflow: hidden;
810
848
  padding: 0;
@@ -821,7 +859,7 @@ a:where(.bs-link):where(:focus:not(:focus-visible)) {
821
859
  .measure-long {
822
860
  max-width: 70ch;
823
861
  }
824
- *:where([data-scroll="false"]) {
862
+ *:where([data-scroll="false"]) {
825
863
  overflow: hidden;
826
864
  }
827
865
  /* Component Styles */
@@ -1024,9 +1062,6 @@ a:where(.bs-link):where(:focus:not(:focus-visible)) {
1024
1062
  }
1025
1063
  .bs-banner :where(.bs-banner-content p a) {
1026
1064
  color: var(--bs-pink-light);
1027
- text-decoration: none;
1028
- }
1029
- .bs-banner :where(.bs-banner-content p a:hover) {
1030
1065
  text-decoration: underline;
1031
1066
  }
1032
1067
  .bs-banner :where(.bs-banner-content button) {
@@ -1040,16 +1075,18 @@ a:where(.bs-link):where(:focus:not(:focus-visible)) {
1040
1075
  }
1041
1076
  }
1042
1077
  .bs-button {
1043
- --btn-main: var(--bs-blue-base);
1078
+ --btn-main: var(--bs-blue-400);
1044
1079
  --btn-secondary: var(--bs-blue-medium);
1045
1080
  --btn-highlight: var(--bs-blue-100);
1046
1081
  --btn-padding: .25rem .75rem;
1047
1082
  --btn-focus-pseudo-width: calc(100% + 0.5rem);
1083
+ --btn-ghost-ink: var(--bs-ink-blue);
1084
+ --btn-ink: var(--bs-white);
1048
1085
  align-items: center;
1049
1086
  background-color: var(--btn-main);
1050
1087
  border: none;
1051
1088
  border-radius: 0.25rem;
1052
- color: var(--bs-white);
1089
+ color: var(--btn-ink);
1053
1090
  cursor: pointer;
1054
1091
  display: inline-flex;
1055
1092
  font-size: var(--btn-text-size, var(--bs-text-md));
@@ -1101,11 +1138,11 @@ a:where(.bs-link):where(:focus:not(:focus-visible)) {
1101
1138
  }
1102
1139
  /* ------------ Ghost Buttons ------------ */
1103
1140
  .bs-button:where([data-ghost]:not([data-ghost="false"])) {
1141
+ --btn-ink: var(--btn-ghost-ink);
1104
1142
  --btn-light: var(--bs-blue-10);
1105
1143
  --btn-secondary: var(--bs-blue-10);
1106
1144
  background-color: transparent;
1107
1145
  box-shadow: inset 0 0 0 1px var(--btn-main);
1108
- color: var(--btn-main);
1109
1146
  }
1110
1147
  .bs-button:where([data-ghost]:not([data-ghost="false"]))::before {
1111
1148
  border-radius: 0.4375rem;
@@ -1119,12 +1156,13 @@ a:where(.bs-link):where(:focus:not(:focus-visible)) {
1119
1156
  inset 0 0 0 1px var(--btn-main),
1120
1157
  inset 0px 0px 4px 1px var(--btn-highlight);
1121
1158
  }
1122
- /* ------------ Button type ------------ */
1159
+ /* ------------ VARIANTS ------------ */
1123
1160
  .bs-button:where([data-variant^='secondary']) {
1124
1161
  --btn-main: var(--bs-plum-400);
1125
- --btn-secondary: var(--bs-plum-300);
1162
+ --btn-secondary: var(--bs-plum-medium);
1126
1163
  --btn-light: var(--bs-plum-10);
1127
1164
  --btn-highlight: var(--bs-plum-100);
1165
+ --btn-ghost-ink: var(--bs-ink-plum);
1128
1166
  }
1129
1167
  .dark .bs-button:where([data-variant^='secondary']) {
1130
1168
  --btn-main: var(--bs-plum-200);
@@ -1134,36 +1172,39 @@ a:where(.bs-link):where(:focus:not(:focus-visible)) {
1134
1172
  }
1135
1173
  .bs-button:where([data-variant^='positive']) {
1136
1174
  --btn-main: var(--bs-purple-400);
1137
- --btn-secondary: var(--bs-purple-300);
1175
+ --btn-secondary: var(--bs-purple-medium);
1138
1176
  --btn-light: var(--bs-purple-10);
1139
1177
  --btn-highlight: var(--bs-purple-100);
1178
+ --btn-ghost-ink: var(--bs-ink-purple);
1140
1179
  }
1141
1180
  .bs-button:where([data-variant^='warning']) {
1142
1181
  --btn-main: var(--bs-orange-warning);
1143
- --btn-secondary: var(--bs-orange-300);
1182
+ --btn-secondary: var(--bs-orange-base);
1144
1183
  --btn-light: var(--bs-orange-10);
1145
1184
  --btn-highlight: var(--bs-orange-100);
1185
+ --btn-ghost-ink: var(--bs-ink-orange);
1146
1186
  }
1147
1187
  .bs-button:where([data-variant^='negative']) {
1148
1188
  --btn-main: var(--bs-red-400);
1149
- --btn-secondary: var(--bs-red-300);
1189
+ --btn-secondary: var(--bs-red-medium);
1150
1190
  --btn-light: var(--bs-red-10);
1151
1191
  --btn-highlight: var(--bs-red-100);
1192
+ --btn-ghost-ink: var(--bs-ink-red);
1152
1193
  }
1153
1194
  /* ------------ Text Button ------------ */
1154
1195
  .bs-button:where([data-text]:not([data-text="false"])) {
1155
1196
  --btn-height: auto;
1197
+ --btn-ink: var(--bs-ink-blue);
1156
1198
  --btn-padding: 0;
1157
1199
  --btn-focus-pseudo-width: calc(100% + 1rem); /* text btns don't have side padding, but we do want focus outline to look padded */
1158
1200
  --btn-text-size: var(--bs-text-md);
1159
1201
  --btn-weight: 400;
1160
1202
  background-color: transparent;
1161
- color: var(--bs-blue-500);
1162
1203
  cursor: pointer;
1163
1204
  line-height: 150%;
1164
1205
  }
1165
1206
  .bs-button:where([data-text]:not([data-text="false"])):hover {
1166
- color: var(--bs-blue-base);
1207
+ --btn-ink: var(--bs-blue-base);
1167
1208
  background-color: transparent;
1168
1209
  text-decoration: underline;
1169
1210
  }
@@ -1215,8 +1256,8 @@ a:where(.bs-link):where(:focus:not(:focus-visible)) {
1215
1256
  }
1216
1257
  .bs-button:where(:disabled),
1217
1258
  .bs-button:where([aria-disabled="true"]) {
1218
- color: var(--bs-gray-400);
1219
- background-color: var(--bs-gray-200);
1259
+ --btn-ink: var(--bs-ink-disabled);
1260
+ --btn-main: var(--bs-bg-disabled);
1220
1261
  }
1221
1262
  .bs-button:where([data-ghost]:not([data-ghost="false"])):disabled,
1222
1263
  .bs-button:where([data-ghost]:not([data-ghost="false"]))[aria-disabled="true"] {
@@ -1224,7 +1265,7 @@ a:where(.bs-link):where(:focus:not(:focus-visible)) {
1224
1265
  }
1225
1266
  .bs-button:where([data-text]:not([data-text="false"])):disabled,
1226
1267
  .bs-button:where([data-text]:not([data-text="false"]))[aria-disabled="true"] {
1227
- background-color: transparent;
1268
+ --btn-main: transparent;
1228
1269
  }
1229
1270
  /* ------------ links as buttons ------------ */
1230
1271
  a.bs-button {
@@ -2149,8 +2190,8 @@ and issues with box-sizing
2149
2190
  /* -------- Error styles -------- */
2150
2191
  .bs-input-addon:where([data-error]:not([data-error="false"])),
2151
2192
  .bs-input-addon:where([data-error]:not([data-error="false"])) :where(.bs-input-addon) {
2152
- --focus-border: var(--bs-red-400);
2153
- --input-border: var(--bs-red-400);
2193
+ --focus-border: var(--bs-ink-red);
2194
+ --input-border: var(--bs-ink-red);
2154
2195
  }
2155
2196
  .bs-input-addon:where([data-error]:not([data-error="false"]),[data-disabled]:not([data-disabled="false"])) > *::before,
2156
2197
  .bs-input-addon:where(.bs-input-addon[data-error]:not([data-error="false"]) .bs-input-addon, .bs-input-addon[data-disabled]:not([data-disabled="false"]) .bs-input-addon) > *::before {
@@ -2288,7 +2329,7 @@ and issues with box-sizing
2288
2329
  }
2289
2330
  /* Checkbox & Radio Input */
2290
2331
  :where(input[type='checkbox'], input[type='radio']),
2291
- .bs-boolean :where(input) {
2332
+ :is(.bs-boolean :where(input), .bs-checkbox) { /* .bs-checkbox added to accommodate 'fake' cbs */
2292
2333
  --box-shadow: var(--bs-ink-base);
2293
2334
 
2294
2335
  -webkit-appearance: none;
@@ -2296,7 +2337,7 @@ and issues with box-sizing
2296
2337
  -moz-appearance: none;
2297
2338
 
2298
2339
  appearance: none;
2299
- background-color: var(--bg-base);
2340
+ background-color: var(--bs-bg-base);
2300
2341
  box-shadow: inset 0 0 0 0.125rem var(--box-shadow);
2301
2342
  cursor: pointer;
2302
2343
  display: grid;
@@ -2307,14 +2348,14 @@ and issues with box-sizing
2307
2348
  width: 1rem;
2308
2349
  }
2309
2350
  :where(input[type='checkbox'], input[type='radio']):focus-visible,
2310
- .bs-boolean :where(input):focus-visible {
2351
+ :is(.bs-boolean :where(input), .bs-checkbox):focus-visible {
2311
2352
  box-shadow: inset 0 0 0 0.125rem var(--box-shadow),
2312
2353
  0 0 0 2px var(--offset-color, var(--bs-bg-base)),
2313
2354
  0 0 0 4px var(--outline-color, var(--bs-blue-base));
2314
2355
  outline: 2px solid transparent;
2315
2356
  }
2316
2357
  :where(input[type='checkbox']),
2317
- .bs-boolean :where([type='checkbox']) {
2358
+ :is(.bs-boolean :where([type='checkbox']), .bs-checkbox) {
2318
2359
  border-radius: 0.125rem;
2319
2360
  }
2320
2361
  :where(input[type='radio']),
@@ -2323,7 +2364,7 @@ and issues with box-sizing
2323
2364
  }
2324
2365
  /* Checkbox's checkmark */
2325
2366
  input:where([type='checkbox'])::before,
2326
- .bs-boolean :where([type="checkbox"])::before {
2367
+ :is(.bs-boolean :where([type="checkbox"]), .bs-checkbox)::before {
2327
2368
  --filled-size: 1rem;
2328
2369
  --check-fill-color: var(--bs-blue-base);
2329
2370
 
@@ -2335,7 +2376,7 @@ input:where([type='checkbox'])::before,
2335
2376
  width: var(--filled-size);
2336
2377
  }
2337
2378
  input:where([type='checkbox'])::after,
2338
- .bs-boolean :where([type="checkbox"])::after {
2379
+ :is(.bs-boolean :where([type="checkbox"]), .bs-checkbox)::after {
2339
2380
  border: solid var(--bs-white);
2340
2381
  border-width: 0 0.125rem 0.125rem 0;
2341
2382
  content: '';
@@ -2349,7 +2390,8 @@ input:where([type='checkbox'])::after,
2349
2390
  width: 0.375em;
2350
2391
  }
2351
2392
  input:where([type='checkbox']):where(:indeterminate)::after,
2352
- .bs-boolean :where([type="checkbox"]):where(:indeterminate)::after {
2393
+ .bs-boolean :where([type="checkbox"]):where(:indeterminate)::after,
2394
+ .bs-checkbox:where([data-indeterminate="true"], :indeterminate)::after {
2353
2395
  border: none;
2354
2396
  background-color: var(--bs-white);
2355
2397
  height: 0.125rem;
@@ -2387,20 +2429,26 @@ input:where([type='radio'])::after,
2387
2429
  visibility: hidden;
2388
2430
  width: var(--inner-size);
2389
2431
  }
2432
+ /* Show checkmark, indeterminate mark, or radio dot */
2433
+ .bs-checkbox:where([data-indeterminate="true"], [data-checked="true"], :checked, :indeterminate)::before,
2434
+ .bs-checkbox:where([data-indeterminate="true"], [data-checked="true"], :checked, :indeterminate)::after,
2390
2435
  input:where([type='checkbox']:checked, [type='checkbox']:indeterminate, [type='radio']:checked)::before,
2391
2436
  input:where([type='checkbox']:checked, [type='checkbox']:indeterminate, [type='radio']:checked)::after,
2392
2437
  .bs-boolean :where([type='checkbox']:checked, [type='checkbox']:indeterminate, [type='radio']:checked)::before,
2393
2438
  .bs-boolean :where([type='checkbox']:checked, [type='checkbox']:indeterminate, [type='radio']:checked)::after {
2394
2439
  visibility: visible;
2395
2440
  }
2396
- .bs-boolean:where([data-size='sm']) input::before {
2441
+ .bs-boolean:where([data-size='sm']) input::before,
2442
+ .bs-checkbox:where([data-size="sm"])::before {
2397
2443
  --filled-size: var(--bs-text-xs);
2398
2444
  }
2399
- .bs-boolean:where([data-size='sm']) input[type='checkbox']::after {
2445
+ .bs-boolean:where([data-size='sm']) input[type='checkbox']::after,
2446
+ .bs-checkbox:where([data-size="sm"])::after {
2400
2447
  height: 0.5625rem;
2401
2448
  width: 0.3125rem;
2402
2449
  }
2403
- .bs-boolean:where([data-size='sm']) input[type='checkbox']:where(:indeterminate)::after {
2450
+ .bs-boolean:where([data-size='sm']) input[type='checkbox']:where(:indeterminate)::after,
2451
+ .bs-checkbox:where([data-size="sm"][data-indeterminate="true"], [data-size="sm"]:indeterminate)::after {
2404
2452
  height: 0.125rem;
2405
2453
  width: .75em;
2406
2454
  }
@@ -2409,15 +2457,21 @@ input:where([type='checkbox']:checked, [type='checkbox']:indeterminate, [type='r
2409
2457
  }
2410
2458
  /* Disabled State */
2411
2459
  input:where([type='checkbox'], [type='radio']):disabled,
2412
- .bs-boolean :where(input):disabled {
2460
+ .bs-boolean :where(input):disabled,
2461
+ .bs-checkbox:is([data-disabled="true"], :disabled) {
2413
2462
  --box-shadow: var(--bs-bg-disabled);
2414
2463
  background-color: transparent;
2415
2464
  cursor: default;
2416
2465
  }
2466
+ .bs-checkbox:where([data-disabled="true"]:not(input)) {
2467
+ pointer-events: none;
2468
+ }
2417
2469
  input:where([type='checkbox']):checked:disabled::before,
2418
2470
  input:where([type='checkbox']):indeterminate:disabled::before,
2419
2471
  .bs-boolean :where(input[type="checkbox"]):checked:disabled::before,
2420
- .bs-boolean :where(input[type="checkbox"]):indeterminate:disabled::before {
2472
+ .bs-boolean :where(input[type="checkbox"]):indeterminate:disabled::before,
2473
+ .bs-checkbox:where([data-checked="true"][data-disabled="true"], :checked:disabled)::before,
2474
+ .bs-checkbox:where([data-indeterminate="true"][data-disabled="true"], :indeterminate:disabled)::before {
2421
2475
  --check-fill-color: var(--bs-bg-disabled);
2422
2476
  }
2423
2477
  input:where([type='radio']):checked:disabled::before,
@@ -2426,7 +2480,8 @@ input:where([type='radio']):checked:disabled::before,
2426
2480
  }
2427
2481
  /* Error state */
2428
2482
  input:where([type='checkbox'], [type='radio'])[data-error]:where(:not([data-error="false"])),
2429
- .bs-boolean :where(input[data-error="true"]) {
2483
+ .bs-boolean :where(input[data-error="true"]),
2484
+ .bs-checkbox:where([data-error="true"]) {
2430
2485
  --box-shadow: var(--bs-red-base);
2431
2486
  --outline-color: var(--bs-red-base);
2432
2487
  }
@@ -2807,7 +2862,7 @@ input:where([type='checkbox'], [type='radio'])[data-error]:where(:not([data-erro
2807
2862
  .bs-pill {
2808
2863
  --pill-background: var(--bs-bg-medium);
2809
2864
  --pill-border: transparent;
2810
- --pill-text: var(--bs-royal-base);
2865
+ --pill-text: #162FB4; /* one-off component-specific */
2811
2866
  --pill-gap: var(--bs-space-2);
2812
2867
 
2813
2868
  align-items: center;
@@ -2830,6 +2885,10 @@ input:where([type='checkbox'], [type='radio'])[data-error]:where(:not([data-erro
2830
2885
  height: 1rem;
2831
2886
  width: 1rem;
2832
2887
  }
2888
+ /* ------------------------------- Dark mode (basic & status types only) ------------------------------- */
2889
+ :where(.dark) .bs-pill {
2890
+ --pill-text: #7585D1;
2891
+ }
2833
2892
  /* ------------------------------ Auto-truncation for content ------------------------------ */
2834
2893
  .bs-pill:has([data-truncate="true"]) {
2835
2894
  max-width: 100%;