bootstrap 5.2.3 → 5.3.2

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 (100) hide show
  1. checksums.yaml +4 -4
  2. data/.github/workflows/ci.yml +11 -5
  3. data/Gemfile +1 -0
  4. data/README.md +6 -2
  5. data/Rakefile +10 -1
  6. data/assets/javascripts/bootstrap/alert.js +22 -32
  7. data/assets/javascripts/bootstrap/base-component.js +22 -38
  8. data/assets/javascripts/bootstrap/button.js +19 -22
  9. data/assets/javascripts/bootstrap/carousel.js +52 -135
  10. data/assets/javascripts/bootstrap/collapse.js +40 -102
  11. data/assets/javascripts/bootstrap/dom/data.js +8 -12
  12. data/assets/javascripts/bootstrap/dom/event-handler.js +19 -66
  13. data/assets/javascripts/bootstrap/dom/manipulator.js +4 -17
  14. data/assets/javascripts/bootstrap/dom/selector-engine.js +42 -24
  15. data/assets/javascripts/bootstrap/dropdown.js +74 -145
  16. data/assets/javascripts/bootstrap/modal.js +53 -133
  17. data/assets/javascripts/bootstrap/offcanvas.js +50 -102
  18. data/assets/javascripts/bootstrap/popover.js +23 -29
  19. data/assets/javascripts/bootstrap/scrollspy.js +53 -90
  20. data/assets/javascripts/bootstrap/tab.js +63 -112
  21. data/assets/javascripts/bootstrap/toast.js +31 -73
  22. data/assets/javascripts/bootstrap/tooltip.js +75 -177
  23. data/assets/javascripts/bootstrap/util/backdrop.js +28 -54
  24. data/assets/javascripts/bootstrap/util/component-functions.js +13 -18
  25. data/assets/javascripts/bootstrap/util/config.js +15 -27
  26. data/assets/javascripts/bootstrap/util/focustrap.js +20 -36
  27. data/assets/javascripts/bootstrap/util/index.js +42 -111
  28. data/assets/javascripts/bootstrap/util/sanitizer.js +30 -42
  29. data/assets/javascripts/bootstrap/util/scrollbar.js +24 -50
  30. data/assets/javascripts/bootstrap/util/swipe.js +27 -48
  31. data/assets/javascripts/bootstrap/util/template-factory.js +25 -52
  32. data/assets/javascripts/bootstrap-sprockets.js +10 -10
  33. data/assets/javascripts/bootstrap.js +689 -1444
  34. data/assets/javascripts/bootstrap.min.js +3 -3
  35. data/assets/stylesheets/_bootstrap-grid.scss +1 -3
  36. data/assets/stylesheets/_bootstrap-reboot.scss +1 -0
  37. data/assets/stylesheets/_bootstrap-utilities.scss +19 -0
  38. data/assets/stylesheets/_bootstrap.scss +1 -0
  39. data/assets/stylesheets/bootstrap/_accordion.scss +9 -0
  40. data/assets/stylesheets/bootstrap/_alert.scss +8 -11
  41. data/assets/stylesheets/bootstrap/_button-group.scss +2 -2
  42. data/assets/stylesheets/bootstrap/_buttons.scss +3 -3
  43. data/assets/stylesheets/bootstrap/_card.scss +5 -0
  44. data/assets/stylesheets/bootstrap/_carousel.scss +20 -2
  45. data/assets/stylesheets/bootstrap/_close.scss +32 -9
  46. data/assets/stylesheets/bootstrap/_dropdown.scss +1 -0
  47. data/assets/stylesheets/bootstrap/_functions.scss +1 -1
  48. data/assets/stylesheets/bootstrap/_grid.scss +6 -0
  49. data/assets/stylesheets/bootstrap/_helpers.scss +2 -0
  50. data/assets/stylesheets/bootstrap/_list-group.scss +12 -7
  51. data/assets/stylesheets/bootstrap/_maps.scss +120 -0
  52. data/assets/stylesheets/bootstrap/_mixins.scss +1 -2
  53. data/assets/stylesheets/bootstrap/_nav.scss +42 -17
  54. data/assets/stylesheets/bootstrap/_navbar.scss +15 -4
  55. data/assets/stylesheets/bootstrap/_offcanvas.scss +4 -2
  56. data/assets/stylesheets/bootstrap/_pagination.scss +1 -1
  57. data/assets/stylesheets/bootstrap/_progress.scss +10 -1
  58. data/assets/stylesheets/bootstrap/_reboot.scss +8 -7
  59. data/assets/stylesheets/bootstrap/_root.scss +124 -10
  60. data/assets/stylesheets/bootstrap/_tables.scss +18 -11
  61. data/assets/stylesheets/bootstrap/_tooltip.scss +4 -5
  62. data/assets/stylesheets/bootstrap/_utilities.scss +175 -16
  63. data/assets/stylesheets/bootstrap/_variables-dark.scss +87 -0
  64. data/assets/stylesheets/bootstrap/_variables.scss +282 -169
  65. data/assets/stylesheets/bootstrap/forms/_floating-labels.scss +23 -3
  66. data/assets/stylesheets/bootstrap/forms/_form-check.scss +26 -12
  67. data/assets/stylesheets/bootstrap/forms/_form-control.scss +24 -4
  68. data/assets/stylesheets/bootstrap/forms/_form-range.scss +3 -3
  69. data/assets/stylesheets/bootstrap/forms/_form-select.scss +12 -3
  70. data/assets/stylesheets/bootstrap/forms/_input-group.scss +1 -1
  71. data/assets/stylesheets/bootstrap/helpers/_color-bg.scss +1 -4
  72. data/assets/stylesheets/bootstrap/helpers/_colored-links.scss +20 -2
  73. data/assets/stylesheets/bootstrap/helpers/_focus-ring.scss +5 -0
  74. data/assets/stylesheets/bootstrap/helpers/_icon-link.scss +25 -0
  75. data/assets/stylesheets/bootstrap/helpers/_vr.scss +1 -1
  76. data/assets/stylesheets/bootstrap/mixins/_alert.scss +4 -1
  77. data/assets/stylesheets/bootstrap/mixins/_banner.scss +2 -4
  78. data/assets/stylesheets/bootstrap/mixins/_caret.scss +30 -25
  79. data/assets/stylesheets/bootstrap/mixins/_color-mode.scss +21 -0
  80. data/assets/stylesheets/bootstrap/mixins/_forms.scss +8 -7
  81. data/assets/stylesheets/bootstrap/mixins/_grid.scss +1 -1
  82. data/assets/stylesheets/bootstrap/mixins/_list-group.scss +2 -0
  83. data/assets/stylesheets/bootstrap/mixins/_utilities.scss +1 -1
  84. data/assets/stylesheets/bootstrap/mixins/_visually-hidden.scss +5 -1
  85. data/assets/stylesheets/bootstrap/vendor/_rfs.scss +23 -29
  86. data/bootstrap.gemspec +4 -3
  87. data/lib/bootstrap/engine.rb +7 -1
  88. data/lib/bootstrap/version.rb +2 -2
  89. data/tasks/updater/js.rb +1 -1
  90. data/tasks/updater/scss.rb +2 -2
  91. data/test/gemfiles/rails_4_2.gemfile +1 -1
  92. data/test/gemfiles/rails_5_0.gemfile +1 -1
  93. data/test/gemfiles/rails_5_1.gemfile +1 -1
  94. data/test/gemfiles/rails_5_2.gemfile +1 -1
  95. data/test/gemfiles/rails_6_0.gemfile +1 -0
  96. data/test/gemfiles/rails_6_1.gemfile +1 -0
  97. data/test/gemfiles/rails_7_0_dartsass.gemfile +8 -0
  98. data/test/gemfiles/{rails_7_0.gemfile → rails_7_0_sassc.gemfile} +1 -0
  99. metadata +35 -15
  100. data/assets/stylesheets/bootstrap/bootstrap-utilities.scss +0 -18
@@ -321,6 +321,39 @@ $theme-colors: (
321
321
  ) !default;
322
322
  // scss-docs-end theme-colors-map
323
323
 
324
+ // scss-docs-start theme-text-variables
325
+ $primary-text-emphasis: shade-color($primary, 60%) !default;
326
+ $secondary-text-emphasis: shade-color($secondary, 60%) !default;
327
+ $success-text-emphasis: shade-color($success, 60%) !default;
328
+ $info-text-emphasis: shade-color($info, 60%) !default;
329
+ $warning-text-emphasis: shade-color($warning, 60%) !default;
330
+ $danger-text-emphasis: shade-color($danger, 60%) !default;
331
+ $light-text-emphasis: $gray-700 !default;
332
+ $dark-text-emphasis: $gray-700 !default;
333
+ // scss-docs-end theme-text-variables
334
+
335
+ // scss-docs-start theme-bg-subtle-variables
336
+ $primary-bg-subtle: tint-color($primary, 80%) !default;
337
+ $secondary-bg-subtle: tint-color($secondary, 80%) !default;
338
+ $success-bg-subtle: tint-color($success, 80%) !default;
339
+ $info-bg-subtle: tint-color($info, 80%) !default;
340
+ $warning-bg-subtle: tint-color($warning, 80%) !default;
341
+ $danger-bg-subtle: tint-color($danger, 80%) !default;
342
+ $light-bg-subtle: mix($gray-100, $white) !default;
343
+ $dark-bg-subtle: $gray-400 !default;
344
+ // scss-docs-end theme-bg-subtle-variables
345
+
346
+ // scss-docs-start theme-border-subtle-variables
347
+ $primary-border-subtle: tint-color($primary, 60%) !default;
348
+ $secondary-border-subtle: tint-color($secondary, 60%) !default;
349
+ $success-border-subtle: tint-color($success, 60%) !default;
350
+ $info-border-subtle: tint-color($info, 60%) !default;
351
+ $warning-border-subtle: tint-color($warning, 60%) !default;
352
+ $danger-border-subtle: tint-color($danger, 60%) !default;
353
+ $light-border-subtle: $gray-200 !default;
354
+ $dark-border-subtle: $gray-500 !default;
355
+ // scss-docs-end theme-border-subtle-variables
356
+
324
357
  // Characters which are escaped by the escape-svg function
325
358
  $escaped-characters: (
326
359
  ("<", "%3c"),
@@ -351,6 +384,9 @@ $enable-negative-margins: false !default;
351
384
  $enable-deprecation-messages: true !default;
352
385
  $enable-important-utilities: true !default;
353
386
 
387
+ $enable-dark-mode: true !default;
388
+ $color-mode-type: data !default; // `data` or `media-query`
389
+
354
390
  // Prefix for :root CSS variables
355
391
 
356
392
  $variable-prefix: bs- !default; // Deprecated in v5.2.0 for the shorter `$prefix`
@@ -398,9 +434,17 @@ $position-values: (
398
434
  //
399
435
  // Settings for the `<body>` element.
400
436
 
401
- $body-bg: $white !default;
402
- $body-color: $gray-900 !default;
403
437
  $body-text-align: null !default;
438
+ $body-color: $gray-900 !default;
439
+ $body-bg: $white !default;
440
+
441
+ $body-secondary-color: rgba($body-color, .75) !default;
442
+ $body-secondary-bg: $gray-200 !default;
443
+
444
+ $body-tertiary-color: rgba($body-color, .5) !default;
445
+ $body-tertiary-bg: $gray-100 !default;
446
+
447
+ $body-emphasis-color: $black !default;
404
448
 
405
449
  // Links
406
450
  //
@@ -415,6 +459,15 @@ $link-hover-decoration: null !default;
415
459
  $stretched-link-pseudo-element: after !default;
416
460
  $stretched-link-z-index: 1 !default;
417
461
 
462
+ // Icon links
463
+ // scss-docs-start icon-link-variables
464
+ $icon-link-gap: .375rem !default;
465
+ $icon-link-underline-offset: .25em !default;
466
+ $icon-link-icon-size: 1em !default;
467
+ $icon-link-icon-transition: .2s ease-in-out transform !default;
468
+ $icon-link-icon-transform: translate3d(.25em, 0, 0) !default;
469
+ // scss-docs-end icon-link-variables
470
+
418
471
  // Paragraphs
419
472
  //
420
473
  // Style p element.
@@ -485,7 +538,6 @@ $border-widths: (
485
538
  4: 4px,
486
539
  5: 5px
487
540
  ) !default;
488
-
489
541
  $border-style: solid !default;
490
542
  $border-color: $gray-300 !default;
491
543
  $border-color-translucent: rgba($black, .175) !default;
@@ -496,9 +548,12 @@ $border-radius: .375rem !default;
496
548
  $border-radius-sm: .25rem !default;
497
549
  $border-radius-lg: .5rem !default;
498
550
  $border-radius-xl: 1rem !default;
499
- $border-radius-2xl: 2rem !default;
551
+ $border-radius-xxl: 2rem !default;
500
552
  $border-radius-pill: 50rem !default;
501
553
  // scss-docs-end border-radius-variables
554
+ // fusv-disable
555
+ $border-radius-2xl: $border-radius-xxl !default; // Deprecated in v5.3.0
556
+ // fusv-enable
502
557
 
503
558
  // scss-docs-start box-shadow-variables
504
559
  $box-shadow: 0 .5rem 1rem rgba($black, .15) !default;
@@ -510,6 +565,14 @@ $box-shadow-inset: inset 0 1px 2px rgba($black, .075) !default;
510
565
  $component-active-color: $white !default;
511
566
  $component-active-bg: $primary !default;
512
567
 
568
+ // scss-docs-start focus-ring-variables
569
+ $focus-ring-width: .25rem !default;
570
+ $focus-ring-opacity: .25 !default;
571
+ $focus-ring-color: rgba($primary, $focus-ring-opacity) !default;
572
+ $focus-ring-blur: 0 !default;
573
+ $focus-ring-box-shadow: 0 0 $focus-ring-blur $focus-ring-width $focus-ring-color !default;
574
+ // scss-docs-end focus-ring-variables
575
+
513
576
  // scss-docs-start caret-variables
514
577
  $caret-width: .3em !default;
515
578
  $caret-vertical-align: $caret-width * .85 !default;
@@ -556,6 +619,7 @@ $font-size-lg: $font-size-base * 1.25 !default;
556
619
  $font-weight-lighter: lighter !default;
557
620
  $font-weight-light: 300 !default;
558
621
  $font-weight-normal: 400 !default;
622
+ $font-weight-medium: 500 !default;
559
623
  $font-weight-semibold: 600 !default;
560
624
  $font-weight-bold: 700 !default;
561
625
  $font-weight-bolder: bolder !default;
@@ -591,7 +655,7 @@ $headings-font-family: null !default;
591
655
  $headings-font-style: null !default;
592
656
  $headings-font-weight: 500 !default;
593
657
  $headings-line-height: 1.2 !default;
594
- $headings-color: null !default;
658
+ $headings-color: inherit !default;
595
659
  // scss-docs-end headings-variables
596
660
 
597
661
  // scss-docs-start display-headings
@@ -618,7 +682,9 @@ $small-font-size: .875em !default;
618
682
 
619
683
  $sub-sup-font-size: .75em !default;
620
684
 
621
- $text-muted: $gray-600 !default;
685
+ // fusv-disable
686
+ $text-muted: var(--#{$prefix}secondary-color) !default; // Deprecated in 5.3.0
687
+ // fusv-enable
622
688
 
623
689
  $initialism-font-size: $small-font-size !default;
624
690
 
@@ -636,9 +702,13 @@ $hr-height: null !default; // Deprecated in v5.2.0
636
702
  // fusv-enable
637
703
 
638
704
  $hr-border-color: null !default; // Allows for inherited colors
639
- $hr-border-width: $border-width !default;
705
+ $hr-border-width: var(--#{$prefix}border-width) !default;
640
706
  $hr-opacity: .25 !default;
641
707
 
708
+ // scss-docs-start vr-variables
709
+ $vr-border-width: var(--#{$prefix}border-width) !default;
710
+ // scss-docs-end vr-variables
711
+
642
712
  $legend-margin-bottom: .5rem !default;
643
713
  $legend-font-size: 1.5rem !default;
644
714
  $legend-font-weight: null !default;
@@ -648,6 +718,7 @@ $dt-font-weight: $font-weight-bold !default;
648
718
  $list-inline-padding: .5rem !default;
649
719
 
650
720
  $mark-padding: .1875em !default;
721
+ $mark-color: $body-color !default;
651
722
  $mark-bg: $yellow-100 !default;
652
723
  // scss-docs-end type-variables
653
724
 
@@ -664,26 +735,26 @@ $table-cell-padding-x-sm: .25rem !default;
664
735
 
665
736
  $table-cell-vertical-align: top !default;
666
737
 
667
- $table-color: var(--#{$prefix}body-color) !default;
668
- $table-bg: transparent !default;
738
+ $table-color: var(--#{$prefix}emphasis-color) !default;
739
+ $table-bg: var(--#{$prefix}body-bg) !default;
669
740
  $table-accent-bg: transparent !default;
670
741
 
671
742
  $table-th-font-weight: null !default;
672
743
 
673
744
  $table-striped-color: $table-color !default;
674
745
  $table-striped-bg-factor: .05 !default;
675
- $table-striped-bg: rgba($black, $table-striped-bg-factor) !default;
746
+ $table-striped-bg: rgba(var(--#{$prefix}emphasis-color-rgb), $table-striped-bg-factor) !default;
676
747
 
677
748
  $table-active-color: $table-color !default;
678
749
  $table-active-bg-factor: .1 !default;
679
- $table-active-bg: rgba($black, $table-active-bg-factor) !default;
750
+ $table-active-bg: rgba(var(--#{$prefix}emphasis-color-rgb), $table-active-bg-factor) !default;
680
751
 
681
752
  $table-hover-color: $table-color !default;
682
753
  $table-hover-bg-factor: .075 !default;
683
- $table-hover-bg: rgba($black, $table-hover-bg-factor) !default;
754
+ $table-hover-bg: rgba(var(--#{$prefix}emphasis-color-rgb), $table-hover-bg-factor) !default;
684
755
 
685
- $table-border-factor: .1 !default;
686
- $table-border-width: $border-width !default;
756
+ $table-border-factor: .2 !default;
757
+ $table-border-width: var(--#{$prefix}border-width) !default;
687
758
  $table-border-color: var(--#{$prefix}border-color) !default;
688
759
 
689
760
  $table-striped-order: odd !default;
@@ -691,7 +762,7 @@ $table-striped-columns-order: even !default;
691
762
 
692
763
  $table-group-separator-color: currentcolor !default;
693
764
 
694
- $table-caption-color: $text-muted !default;
765
+ $table-caption-color: var(--#{$prefix}secondary-color) !default;
695
766
 
696
767
  $table-bg-scale: -80% !default;
697
768
  // scss-docs-end table-variables
@@ -721,11 +792,11 @@ $input-btn-font-family: null !default;
721
792
  $input-btn-font-size: $font-size-base !default;
722
793
  $input-btn-line-height: $line-height-base !default;
723
794
 
724
- $input-btn-focus-width: .25rem !default;
725
- $input-btn-focus-color-opacity: .25 !default;
726
- $input-btn-focus-color: rgba($component-active-bg, $input-btn-focus-color-opacity) !default;
727
- $input-btn-focus-blur: 0 !default;
728
- $input-btn-focus-box-shadow: 0 0 $input-btn-focus-blur $input-btn-focus-width $input-btn-focus-color !default;
795
+ $input-btn-focus-width: $focus-ring-width !default;
796
+ $input-btn-focus-color-opacity: $focus-ring-opacity !default;
797
+ $input-btn-focus-color: $focus-ring-color !default;
798
+ $input-btn-focus-blur: $focus-ring-blur !default;
799
+ $input-btn-focus-box-shadow: $focus-ring-box-shadow !default;
729
800
 
730
801
  $input-btn-padding-y-sm: .25rem !default;
731
802
  $input-btn-padding-x-sm: .5rem !default;
@@ -735,7 +806,7 @@ $input-btn-padding-y-lg: .5rem !default;
735
806
  $input-btn-padding-x-lg: 1rem !default;
736
807
  $input-btn-font-size-lg: $font-size-lg !default;
737
808
 
738
- $input-btn-border-width: $border-width !default;
809
+ $input-btn-border-width: var(--#{$prefix}border-width) !default;
739
810
  // scss-docs-end input-btn-variables
740
811
 
741
812
 
@@ -744,6 +815,7 @@ $input-btn-border-width: $border-width !default;
744
815
  // For each of Bootstrap's buttons, define text, background, and border color.
745
816
 
746
817
  // scss-docs-start btn-variables
818
+ $btn-color: var(--#{$prefix}body-color) !default;
747
819
  $btn-padding-y: $input-btn-padding-y !default;
748
820
  $btn-padding-x: $input-btn-padding-x !default;
749
821
  $btn-font-family: $input-btn-font-family !default;
@@ -771,11 +843,12 @@ $btn-active-box-shadow: inset 0 3px 5px rgba($black, .125) !default;
771
843
  $btn-link-color: var(--#{$prefix}link-color) !default;
772
844
  $btn-link-hover-color: var(--#{$prefix}link-hover-color) !default;
773
845
  $btn-link-disabled-color: $gray-600 !default;
846
+ $btn-link-focus-shadow-rgb: to-rgb(mix(color-contrast($link-color), $link-color, 15%)) !default;
774
847
 
775
848
  // Allows for customizing button radius independently from global border radius
776
- $btn-border-radius: $border-radius !default;
777
- $btn-border-radius-sm: $border-radius-sm !default;
778
- $btn-border-radius-lg: $border-radius-lg !default;
849
+ $btn-border-radius: var(--#{$prefix}border-radius) !default;
850
+ $btn-border-radius-sm: var(--#{$prefix}border-radius-sm) !default;
851
+ $btn-border-radius-lg: var(--#{$prefix}border-radius-lg) !default;
779
852
 
780
853
  $btn-transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
781
854
 
@@ -797,7 +870,7 @@ $form-text-margin-top: .25rem !default;
797
870
  $form-text-font-size: $small-font-size !default;
798
871
  $form-text-font-style: null !default;
799
872
  $form-text-font-weight: null !default;
800
- $form-text-color: $text-muted !default;
873
+ $form-text-color: var(--#{$prefix}secondary-color) !default;
801
874
  // scss-docs-end form-text-variables
802
875
 
803
876
  // scss-docs-start form-label-variables
@@ -824,19 +897,19 @@ $input-padding-y-lg: $input-btn-padding-y-lg !default;
824
897
  $input-padding-x-lg: $input-btn-padding-x-lg !default;
825
898
  $input-font-size-lg: $input-btn-font-size-lg !default;
826
899
 
827
- $input-bg: $body-bg !default;
900
+ $input-bg: var(--#{$prefix}body-bg) !default;
828
901
  $input-disabled-color: null !default;
829
- $input-disabled-bg: $gray-200 !default;
902
+ $input-disabled-bg: var(--#{$prefix}secondary-bg) !default;
830
903
  $input-disabled-border-color: null !default;
831
904
 
832
- $input-color: $body-color !default;
833
- $input-border-color: $gray-400 !default;
905
+ $input-color: var(--#{$prefix}body-color) !default;
906
+ $input-border-color: var(--#{$prefix}border-color) !default;
834
907
  $input-border-width: $input-btn-border-width !default;
835
- $input-box-shadow: $box-shadow-inset !default;
908
+ $input-box-shadow: var(--#{$prefix}box-shadow-inset) !default;
836
909
 
837
- $input-border-radius: $border-radius !default;
838
- $input-border-radius-sm: $border-radius-sm !default;
839
- $input-border-radius-lg: $border-radius-lg !default;
910
+ $input-border-radius: var(--#{$prefix}border-radius) !default;
911
+ $input-border-radius-sm: var(--#{$prefix}border-radius-sm) !default;
912
+ $input-border-radius-lg: var(--#{$prefix}border-radius-lg) !default;
840
913
 
841
914
  $input-focus-bg: $input-bg !default;
842
915
  $input-focus-border-color: tint-color($component-active-bg, 50%) !default;
@@ -844,10 +917,10 @@ $input-focus-color: $input-color !default;
844
917
  $input-focus-width: $input-btn-focus-width !default;
845
918
  $input-focus-box-shadow: $input-btn-focus-box-shadow !default;
846
919
 
847
- $input-placeholder-color: $gray-600 !default;
848
- $input-plaintext-color: $body-color !default;
920
+ $input-placeholder-color: var(--#{$prefix}secondary-color) !default;
921
+ $input-plaintext-color: var(--#{$prefix}body-color) !default;
849
922
 
850
- $input-height-border: $input-border-width * 2 !default;
923
+ $input-height-border: calc(#{$input-border-width} * 2) !default; // stylelint-disable-line function-disallowed-list
851
924
 
852
925
  $input-height-inner: add($input-line-height * 1em, $input-padding-y * 2) !default;
853
926
  $input-height-inner-half: add($input-line-height * .5em, $input-padding-y) !default;
@@ -874,11 +947,11 @@ $form-check-transition: null !default;
874
947
  $form-check-input-active-filter: brightness(90%) !default;
875
948
 
876
949
  $form-check-input-bg: $input-bg !default;
877
- $form-check-input-border: 1px solid rgba($black, .25) !default;
950
+ $form-check-input-border: var(--#{$prefix}border-width) solid var(--#{$prefix}border-color) !default;
878
951
  $form-check-input-border-radius: .25em !default;
879
952
  $form-check-radio-border-radius: 50% !default;
880
953
  $form-check-input-focus-border: $input-focus-border-color !default;
881
- $form-check-input-focus-box-shadow: $input-btn-focus-box-shadow !default;
954
+ $form-check-input-focus-box-shadow: $focus-ring-box-shadow !default;
882
955
 
883
956
  $form-check-input-checked-color: $component-active-color !default;
884
957
  $form-check-input-checked-bg-color: $component-active-bg !default;
@@ -919,7 +992,7 @@ $input-group-addon-padding-y: $input-padding-y !default;
919
992
  $input-group-addon-padding-x: $input-padding-x !default;
920
993
  $input-group-addon-font-weight: $input-font-weight !default;
921
994
  $input-group-addon-color: $input-color !default;
922
- $input-group-addon-bg: $gray-200 !default;
995
+ $input-group-addon-bg: var(--#{$prefix}tertiary-bg) !default;
923
996
  $input-group-addon-border-color: $input-border-color !default;
924
997
  // scss-docs-end input-group-variables
925
998
 
@@ -934,7 +1007,7 @@ $form-select-line-height: $input-line-height !default;
934
1007
  $form-select-color: $input-color !default;
935
1008
  $form-select-bg: $input-bg !default;
936
1009
  $form-select-disabled-color: null !default;
937
- $form-select-disabled-bg: $gray-200 !default;
1010
+ $form-select-disabled-bg: $input-disabled-bg !default;
938
1011
  $form-select-disabled-border-color: $input-disabled-border-color !default;
939
1012
  $form-select-bg-position: right $form-select-padding-x center !default;
940
1013
  $form-select-bg-size: 16px 12px !default; // In pixels because image dimensions
@@ -948,7 +1021,7 @@ $form-select-feedback-icon-size: $input-height-inner-half $input-height-i
948
1021
  $form-select-border-width: $input-border-width !default;
949
1022
  $form-select-border-color: $input-border-color !default;
950
1023
  $form-select-border-radius: $input-border-radius !default;
951
- $form-select-box-shadow: $box-shadow-inset !default;
1024
+ $form-select-box-shadow: var(--#{$prefix}box-shadow-inset) !default;
952
1025
 
953
1026
  $form-select-focus-border-color: $input-focus-border-color !default;
954
1027
  $form-select-focus-width: $input-focus-width !default;
@@ -971,9 +1044,9 @@ $form-select-transition: $input-transition !default;
971
1044
  $form-range-track-width: 100% !default;
972
1045
  $form-range-track-height: .5rem !default;
973
1046
  $form-range-track-cursor: pointer !default;
974
- $form-range-track-bg: $gray-300 !default;
1047
+ $form-range-track-bg: var(--#{$prefix}secondary-bg) !default;
975
1048
  $form-range-track-border-radius: 1rem !default;
976
- $form-range-track-box-shadow: $box-shadow-inset !default;
1049
+ $form-range-track-box-shadow: var(--#{$prefix}box-shadow-inset) !default;
977
1050
 
978
1051
  $form-range-thumb-width: 1rem !default;
979
1052
  $form-range-thumb-height: $form-range-thumb-width !default;
@@ -984,26 +1057,28 @@ $form-range-thumb-box-shadow: 0 .1rem .25rem rgba($black, .1) !defa
984
1057
  $form-range-thumb-focus-box-shadow: 0 0 0 1px $body-bg, $input-focus-box-shadow !default;
985
1058
  $form-range-thumb-focus-box-shadow-width: $input-focus-width !default; // For focus box shadow issue in Edge
986
1059
  $form-range-thumb-active-bg: tint-color($component-active-bg, 70%) !default;
987
- $form-range-thumb-disabled-bg: $gray-500 !default;
1060
+ $form-range-thumb-disabled-bg: var(--#{$prefix}secondary-color) !default;
988
1061
  $form-range-thumb-transition: background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
989
1062
  // scss-docs-end form-range-variables
990
1063
 
991
1064
  // scss-docs-start form-file-variables
992
1065
  $form-file-button-color: $input-color !default;
993
- $form-file-button-bg: $input-group-addon-bg !default;
994
- $form-file-button-hover-bg: shade-color($form-file-button-bg, 5%) !default;
1066
+ $form-file-button-bg: var(--#{$prefix}tertiary-bg) !default;
1067
+ $form-file-button-hover-bg: var(--#{$prefix}secondary-bg) !default;
995
1068
  // scss-docs-end form-file-variables
996
1069
 
997
1070
  // scss-docs-start form-floating-variables
998
- $form-floating-height: add(3.5rem, $input-height-border) !default;
999
- $form-floating-line-height: 1.25 !default;
1000
- $form-floating-padding-x: $input-padding-x !default;
1001
- $form-floating-padding-y: 1rem !default;
1002
- $form-floating-input-padding-t: 1.625rem !default;
1003
- $form-floating-input-padding-b: .625rem !default;
1004
- $form-floating-label-opacity: .65 !default;
1005
- $form-floating-label-transform: scale(.85) translateY(-.5rem) translateX(.15rem) !default;
1006
- $form-floating-transition: opacity .1s ease-in-out, transform .1s ease-in-out !default;
1071
+ $form-floating-height: add(3.5rem, $input-height-border) !default;
1072
+ $form-floating-line-height: 1.25 !default;
1073
+ $form-floating-padding-x: $input-padding-x !default;
1074
+ $form-floating-padding-y: 1rem !default;
1075
+ $form-floating-input-padding-t: 1.625rem !default;
1076
+ $form-floating-input-padding-b: .625rem !default;
1077
+ $form-floating-label-height: 1.5em !default;
1078
+ $form-floating-label-opacity: .65 !default;
1079
+ $form-floating-label-transform: scale(.85) translateY(-.5rem) translateX(.15rem) !default;
1080
+ $form-floating-label-disabled-color: $gray-600 !default;
1081
+ $form-floating-transition: opacity .1s ease-in-out, transform .1s ease-in-out !default;
1007
1082
  // scss-docs-end form-floating-variables
1008
1083
 
1009
1084
  // Form validation
@@ -1021,15 +1096,30 @@ $form-feedback-icon-invalid-color: $form-feedback-invalid-color !default;
1021
1096
  $form-feedback-icon-invalid: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='#{$form-feedback-icon-invalid-color}'><circle cx='6' cy='6' r='4.5'/><path stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/><circle cx='6' cy='8.2' r='.6' fill='#{$form-feedback-icon-invalid-color}' stroke='none'/></svg>") !default;
1022
1097
  // scss-docs-end form-feedback-variables
1023
1098
 
1099
+ // scss-docs-start form-validation-colors
1100
+ $form-valid-color: $form-feedback-valid-color !default;
1101
+ $form-valid-border-color: $form-feedback-valid-color !default;
1102
+ $form-invalid-color: $form-feedback-invalid-color !default;
1103
+ $form-invalid-border-color: $form-feedback-invalid-color !default;
1104
+ // scss-docs-end form-validation-colors
1105
+
1024
1106
  // scss-docs-start form-validation-states
1025
1107
  $form-validation-states: (
1026
1108
  "valid": (
1027
- "color": $form-feedback-valid-color,
1028
- "icon": $form-feedback-icon-valid
1109
+ "color": var(--#{$prefix}form-valid-color),
1110
+ "icon": $form-feedback-icon-valid,
1111
+ "tooltip-color": #fff,
1112
+ "tooltip-bg-color": var(--#{$prefix}success),
1113
+ "focus-box-shadow": 0 0 $input-btn-focus-blur $input-focus-width rgba(var(--#{$prefix}success-rgb), $input-btn-focus-color-opacity),
1114
+ "border-color": var(--#{$prefix}form-valid-border-color),
1029
1115
  ),
1030
1116
  "invalid": (
1031
- "color": $form-feedback-invalid-color,
1032
- "icon": $form-feedback-icon-invalid
1117
+ "color": var(--#{$prefix}form-invalid-color),
1118
+ "icon": $form-feedback-icon-invalid,
1119
+ "tooltip-color": #fff,
1120
+ "tooltip-bg-color": var(--#{$prefix}danger),
1121
+ "focus-box-shadow": 0 0 $input-btn-focus-blur $input-focus-width rgba(var(--#{$prefix}danger-rgb), $input-btn-focus-color-opacity),
1122
+ "border-color": var(--#{$prefix}form-invalid-border-color),
1033
1123
  )
1034
1124
  ) !default;
1035
1125
  // scss-docs-end form-validation-states
@@ -1052,6 +1142,16 @@ $zindex-tooltip: 1080 !default;
1052
1142
  $zindex-toast: 1090 !default;
1053
1143
  // scss-docs-end zindex-stack
1054
1144
 
1145
+ // scss-docs-start zindex-levels-map
1146
+ $zindex-levels: (
1147
+ n1: -1,
1148
+ 0: 0,
1149
+ 1: 1,
1150
+ 2: 2,
1151
+ 3: 3
1152
+ ) !default;
1153
+ // scss-docs-end zindex-levels-map
1154
+
1055
1155
 
1056
1156
  // Navs
1057
1157
 
@@ -1063,19 +1163,24 @@ $nav-link-font-weight: null !default;
1063
1163
  $nav-link-color: var(--#{$prefix}link-color) !default;
1064
1164
  $nav-link-hover-color: var(--#{$prefix}link-hover-color) !default;
1065
1165
  $nav-link-transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out !default;
1066
- $nav-link-disabled-color: $gray-600 !default;
1067
-
1068
- $nav-tabs-border-color: $gray-300 !default;
1069
- $nav-tabs-border-width: $border-width !default;
1070
- $nav-tabs-border-radius: $border-radius !default;
1071
- $nav-tabs-link-hover-border-color: $gray-200 $gray-200 $nav-tabs-border-color !default;
1072
- $nav-tabs-link-active-color: $gray-700 !default;
1073
- $nav-tabs-link-active-bg: $body-bg !default;
1074
- $nav-tabs-link-active-border-color: $gray-300 $gray-300 $nav-tabs-link-active-bg !default;
1075
-
1076
- $nav-pills-border-radius: $border-radius !default;
1166
+ $nav-link-disabled-color: var(--#{$prefix}secondary-color) !default;
1167
+ $nav-link-focus-box-shadow: $focus-ring-box-shadow !default;
1168
+
1169
+ $nav-tabs-border-color: var(--#{$prefix}border-color) !default;
1170
+ $nav-tabs-border-width: var(--#{$prefix}border-width) !default;
1171
+ $nav-tabs-border-radius: var(--#{$prefix}border-radius) !default;
1172
+ $nav-tabs-link-hover-border-color: var(--#{$prefix}secondary-bg) var(--#{$prefix}secondary-bg) $nav-tabs-border-color !default;
1173
+ $nav-tabs-link-active-color: var(--#{$prefix}emphasis-color) !default;
1174
+ $nav-tabs-link-active-bg: var(--#{$prefix}body-bg) !default;
1175
+ $nav-tabs-link-active-border-color: var(--#{$prefix}border-color) var(--#{$prefix}border-color) $nav-tabs-link-active-bg !default;
1176
+
1177
+ $nav-pills-border-radius: var(--#{$prefix}border-radius) !default;
1077
1178
  $nav-pills-link-active-color: $component-active-color !default;
1078
1179
  $nav-pills-link-active-bg: $component-active-bg !default;
1180
+
1181
+ $nav-underline-gap: 1rem !default;
1182
+ $nav-underline-border-width: .125rem !default;
1183
+ $nav-underline-link-active-color: var(--#{$prefix}emphasis-color) !default;
1079
1184
  // scss-docs-end nav-variables
1080
1185
 
1081
1186
 
@@ -1101,12 +1206,13 @@ $navbar-toggler-border-radius: $btn-border-radius !default;
1101
1206
  $navbar-toggler-focus-width: $btn-focus-width !default;
1102
1207
  $navbar-toggler-transition: box-shadow .15s ease-in-out !default;
1103
1208
 
1104
- $navbar-light-color: rgba($black, .55) !default;
1105
- $navbar-light-hover-color: rgba($black, .7) !default;
1106
- $navbar-light-active-color: rgba($black, .9) !default;
1107
- $navbar-light-disabled-color: rgba($black, .3) !default;
1108
- $navbar-light-toggler-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$navbar-light-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>") !default;
1109
- $navbar-light-toggler-border-color: rgba($black, .1) !default;
1209
+ $navbar-light-color: rgba(var(--#{$prefix}emphasis-color-rgb), .65) !default;
1210
+ $navbar-light-hover-color: rgba(var(--#{$prefix}emphasis-color-rgb), .8) !default;
1211
+ $navbar-light-active-color: rgba(var(--#{$prefix}emphasis-color-rgb), 1) !default;
1212
+ $navbar-light-disabled-color: rgba(var(--#{$prefix}emphasis-color-rgb), .3) !default;
1213
+ $navbar-light-icon-color: rgba($body-color, .75) !default;
1214
+ $navbar-light-toggler-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$navbar-light-icon-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>") !default;
1215
+ $navbar-light-toggler-border-color: rgba(var(--#{$prefix}emphasis-color-rgb), .15) !default;
1110
1216
  $navbar-light-brand-color: $navbar-light-active-color !default;
1111
1217
  $navbar-light-brand-hover-color: $navbar-light-active-color !default;
1112
1218
  // scss-docs-end navbar-variables
@@ -1116,7 +1222,8 @@ $navbar-dark-color: rgba($white, .55) !default;
1116
1222
  $navbar-dark-hover-color: rgba($white, .75) !default;
1117
1223
  $navbar-dark-active-color: $white !default;
1118
1224
  $navbar-dark-disabled-color: rgba($white, .25) !default;
1119
- $navbar-dark-toggler-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$navbar-dark-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>") !default;
1225
+ $navbar-dark-icon-color: $navbar-dark-color !default;
1226
+ $navbar-dark-toggler-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$navbar-dark-icon-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>") !default;
1120
1227
  $navbar-dark-toggler-border-color: rgba($white, .1) !default;
1121
1228
  $navbar-dark-brand-color: $navbar-dark-active-color !default;
1122
1229
  $navbar-dark-brand-hover-color: $navbar-dark-active-color !default;
@@ -1133,24 +1240,24 @@ $dropdown-padding-x: 0 !default;
1133
1240
  $dropdown-padding-y: .5rem !default;
1134
1241
  $dropdown-spacer: .125rem !default;
1135
1242
  $dropdown-font-size: $font-size-base !default;
1136
- $dropdown-color: $body-color !default;
1137
- $dropdown-bg: $white !default;
1243
+ $dropdown-color: var(--#{$prefix}body-color) !default;
1244
+ $dropdown-bg: var(--#{$prefix}body-bg) !default;
1138
1245
  $dropdown-border-color: var(--#{$prefix}border-color-translucent) !default;
1139
- $dropdown-border-radius: $border-radius !default;
1140
- $dropdown-border-width: $border-width !default;
1141
- $dropdown-inner-border-radius: subtract($dropdown-border-radius, $dropdown-border-width) !default;
1246
+ $dropdown-border-radius: var(--#{$prefix}border-radius) !default;
1247
+ $dropdown-border-width: var(--#{$prefix}border-width) !default;
1248
+ $dropdown-inner-border-radius: calc(#{$dropdown-border-radius} - #{$dropdown-border-width}) !default; // stylelint-disable-line function-disallowed-list
1142
1249
  $dropdown-divider-bg: $dropdown-border-color !default;
1143
1250
  $dropdown-divider-margin-y: $spacer * .5 !default;
1144
- $dropdown-box-shadow: $box-shadow !default;
1251
+ $dropdown-box-shadow: var(--#{$prefix}box-shadow) !default;
1145
1252
 
1146
- $dropdown-link-color: $gray-900 !default;
1147
- $dropdown-link-hover-color: shade-color($dropdown-link-color, 10%) !default;
1148
- $dropdown-link-hover-bg: $gray-200 !default;
1253
+ $dropdown-link-color: var(--#{$prefix}body-color) !default;
1254
+ $dropdown-link-hover-color: $dropdown-link-color !default;
1255
+ $dropdown-link-hover-bg: var(--#{$prefix}tertiary-bg) !default;
1149
1256
 
1150
1257
  $dropdown-link-active-color: $component-active-color !default;
1151
1258
  $dropdown-link-active-bg: $component-active-bg !default;
1152
1259
 
1153
- $dropdown-link-disabled-color: $gray-500 !default;
1260
+ $dropdown-link-disabled-color: var(--#{$prefix}tertiary-color) !default;
1154
1261
 
1155
1262
  $dropdown-item-padding-y: $spacer * .25 !default;
1156
1263
  $dropdown-item-padding-x: $spacer !default;
@@ -1192,33 +1299,33 @@ $pagination-padding-x-lg: 1.5rem !default;
1192
1299
  $pagination-font-size: $font-size-base !default;
1193
1300
 
1194
1301
  $pagination-color: var(--#{$prefix}link-color) !default;
1195
- $pagination-bg: $white !default;
1196
- $pagination-border-radius: $border-radius !default;
1197
- $pagination-border-width: $border-width !default;
1198
- $pagination-margin-start: ($pagination-border-width * -1) !default;
1199
- $pagination-border-color: $gray-300 !default;
1302
+ $pagination-bg: var(--#{$prefix}body-bg) !default;
1303
+ $pagination-border-radius: var(--#{$prefix}border-radius) !default;
1304
+ $pagination-border-width: var(--#{$prefix}border-width) !default;
1305
+ $pagination-margin-start: calc(#{$pagination-border-width} * -1) !default; // stylelint-disable-line function-disallowed-list
1306
+ $pagination-border-color: var(--#{$prefix}border-color) !default;
1200
1307
 
1201
1308
  $pagination-focus-color: var(--#{$prefix}link-hover-color) !default;
1202
- $pagination-focus-bg: $gray-200 !default;
1203
- $pagination-focus-box-shadow: $input-btn-focus-box-shadow !default;
1309
+ $pagination-focus-bg: var(--#{$prefix}secondary-bg) !default;
1310
+ $pagination-focus-box-shadow: $focus-ring-box-shadow !default;
1204
1311
  $pagination-focus-outline: 0 !default;
1205
1312
 
1206
1313
  $pagination-hover-color: var(--#{$prefix}link-hover-color) !default;
1207
- $pagination-hover-bg: $gray-200 !default;
1208
- $pagination-hover-border-color: $gray-300 !default;
1314
+ $pagination-hover-bg: var(--#{$prefix}tertiary-bg) !default;
1315
+ $pagination-hover-border-color: var(--#{$prefix}border-color) !default; // Todo in v6: remove this?
1209
1316
 
1210
1317
  $pagination-active-color: $component-active-color !default;
1211
1318
  $pagination-active-bg: $component-active-bg !default;
1212
- $pagination-active-border-color: $pagination-active-bg !default;
1319
+ $pagination-active-border-color: $component-active-bg !default;
1213
1320
 
1214
- $pagination-disabled-color: $gray-600 !default;
1215
- $pagination-disabled-bg: $white !default;
1216
- $pagination-disabled-border-color: $gray-300 !default;
1321
+ $pagination-disabled-color: var(--#{$prefix}secondary-color) !default;
1322
+ $pagination-disabled-bg: var(--#{$prefix}secondary-bg) !default;
1323
+ $pagination-disabled-border-color: var(--#{$prefix}border-color) !default;
1217
1324
 
1218
1325
  $pagination-transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
1219
1326
 
1220
- $pagination-border-radius-sm: $border-radius-sm !default;
1221
- $pagination-border-radius-lg: $border-radius-lg !default;
1327
+ $pagination-border-radius-sm: var(--#{$prefix}border-radius-sm) !default;
1328
+ $pagination-border-radius-lg: var(--#{$prefix}border-radius-lg) !default;
1222
1329
  // scss-docs-end pagination-variables
1223
1330
 
1224
1331
 
@@ -1235,18 +1342,20 @@ $placeholder-opacity-min: .2 !default;
1235
1342
  $card-spacer-y: $spacer !default;
1236
1343
  $card-spacer-x: $spacer !default;
1237
1344
  $card-title-spacer-y: $spacer * .5 !default;
1238
- $card-border-width: $border-width !default;
1345
+ $card-title-color: null !default;
1346
+ $card-subtitle-color: null !default;
1347
+ $card-border-width: var(--#{$prefix}border-width) !default;
1239
1348
  $card-border-color: var(--#{$prefix}border-color-translucent) !default;
1240
- $card-border-radius: $border-radius !default;
1349
+ $card-border-radius: var(--#{$prefix}border-radius) !default;
1241
1350
  $card-box-shadow: null !default;
1242
1351
  $card-inner-border-radius: subtract($card-border-radius, $card-border-width) !default;
1243
1352
  $card-cap-padding-y: $card-spacer-y * .5 !default;
1244
1353
  $card-cap-padding-x: $card-spacer-x !default;
1245
- $card-cap-bg: rgba($black, .03) !default;
1354
+ $card-cap-bg: rgba(var(--#{$prefix}body-color-rgb), .03) !default;
1246
1355
  $card-cap-color: null !default;
1247
1356
  $card-height: null !default;
1248
1357
  $card-color: null !default;
1249
- $card-bg: $white !default;
1358
+ $card-bg: var(--#{$prefix}body-bg) !default;
1250
1359
  $card-img-overlay-padding: $spacer !default;
1251
1360
  $card-group-margin: $grid-gutter-width * .5 !default;
1252
1361
  // scss-docs-end card-variables
@@ -1256,11 +1365,11 @@ $card-group-margin: $grid-gutter-width * .5 !default;
1256
1365
  // scss-docs-start accordion-variables
1257
1366
  $accordion-padding-y: 1rem !default;
1258
1367
  $accordion-padding-x: 1.25rem !default;
1259
- $accordion-color: $body-color !default; // Sass variable because of $accordion-button-icon
1260
- $accordion-bg: $body-bg !default;
1261
- $accordion-border-width: $border-width !default;
1368
+ $accordion-color: var(--#{$prefix}body-color) !default;
1369
+ $accordion-bg: var(--#{$prefix}body-bg) !default;
1370
+ $accordion-border-width: var(--#{$prefix}border-width) !default;
1262
1371
  $accordion-border-color: var(--#{$prefix}border-color) !default;
1263
- $accordion-border-radius: $border-radius !default;
1372
+ $accordion-border-radius: var(--#{$prefix}border-radius) !default;
1264
1373
  $accordion-inner-border-radius: subtract($accordion-border-radius, $accordion-border-width) !default;
1265
1374
 
1266
1375
  $accordion-body-padding-y: $accordion-padding-y !default;
@@ -1268,18 +1377,18 @@ $accordion-body-padding-x: $accordion-padding-x !default;
1268
1377
 
1269
1378
  $accordion-button-padding-y: $accordion-padding-y !default;
1270
1379
  $accordion-button-padding-x: $accordion-padding-x !default;
1271
- $accordion-button-color: $accordion-color !default;
1380
+ $accordion-button-color: var(--#{$prefix}body-color) !default;
1272
1381
  $accordion-button-bg: var(--#{$prefix}accordion-bg) !default;
1273
1382
  $accordion-transition: $btn-transition, border-radius .15s ease !default;
1274
- $accordion-button-active-bg: tint-color($component-active-bg, 90%) !default;
1275
- $accordion-button-active-color: shade-color($primary, 10%) !default;
1383
+ $accordion-button-active-bg: var(--#{$prefix}primary-bg-subtle) !default;
1384
+ $accordion-button-active-color: var(--#{$prefix}primary-text-emphasis) !default;
1276
1385
 
1277
1386
  $accordion-button-focus-border-color: $input-focus-border-color !default;
1278
1387
  $accordion-button-focus-box-shadow: $btn-focus-box-shadow !default;
1279
1388
 
1280
1389
  $accordion-icon-width: 1.25rem !default;
1281
- $accordion-icon-color: $accordion-button-color !default;
1282
- $accordion-icon-active-color: $accordion-button-active-color !default;
1390
+ $accordion-icon-color: $body-color !default;
1391
+ $accordion-icon-active-color: $primary-text-emphasis !default;
1283
1392
  $accordion-icon-transition: transform .2s ease-in-out !default;
1284
1393
  $accordion-icon-transform: rotate(-180deg) !default;
1285
1394
 
@@ -1292,9 +1401,9 @@ $accordion-button-active-icon: url("data:image/svg+xml,<svg xmlns='http://www.w
1292
1401
  // scss-docs-start tooltip-variables
1293
1402
  $tooltip-font-size: $font-size-sm !default;
1294
1403
  $tooltip-max-width: 200px !default;
1295
- $tooltip-color: $white !default;
1296
- $tooltip-bg: $black !default;
1297
- $tooltip-border-radius: $border-radius !default;
1404
+ $tooltip-color: var(--#{$prefix}body-bg) !default;
1405
+ $tooltip-bg: var(--#{$prefix}emphasis-color) !default;
1406
+ $tooltip-border-radius: var(--#{$prefix}border-radius) !default;
1298
1407
  $tooltip-opacity: .9 !default;
1299
1408
  $tooltip-padding-y: $spacer * .25 !default;
1300
1409
  $tooltip-padding-x: $spacer * .5 !default;
@@ -1322,21 +1431,21 @@ $form-feedback-tooltip-border-radius: $tooltip-border-radius !default;
1322
1431
 
1323
1432
  // scss-docs-start popover-variables
1324
1433
  $popover-font-size: $font-size-sm !default;
1325
- $popover-bg: $white !default;
1434
+ $popover-bg: var(--#{$prefix}body-bg) !default;
1326
1435
  $popover-max-width: 276px !default;
1327
- $popover-border-width: $border-width !default;
1436
+ $popover-border-width: var(--#{$prefix}border-width) !default;
1328
1437
  $popover-border-color: var(--#{$prefix}border-color-translucent) !default;
1329
- $popover-border-radius: $border-radius-lg !default;
1330
- $popover-inner-border-radius: subtract($popover-border-radius, $popover-border-width) !default;
1331
- $popover-box-shadow: $box-shadow !default;
1438
+ $popover-border-radius: var(--#{$prefix}border-radius-lg) !default;
1439
+ $popover-inner-border-radius: calc(#{$popover-border-radius} - #{$popover-border-width}) !default; // stylelint-disable-line function-disallowed-list
1440
+ $popover-box-shadow: var(--#{$prefix}box-shadow) !default;
1332
1441
 
1333
1442
  $popover-header-font-size: $font-size-base !default;
1334
- $popover-header-bg: shade-color($popover-bg, 6%) !default;
1443
+ $popover-header-bg: var(--#{$prefix}secondary-bg) !default;
1335
1444
  $popover-header-color: $headings-color !default;
1336
1445
  $popover-header-padding-y: .5rem !default;
1337
1446
  $popover-header-padding-x: $spacer !default;
1338
1447
 
1339
- $popover-body-color: $body-color !default;
1448
+ $popover-body-color: var(--#{$prefix}body-color) !default;
1340
1449
  $popover-body-padding-y: $spacer !default;
1341
1450
  $popover-body-padding-x: $spacer !default;
1342
1451
 
@@ -1359,16 +1468,16 @@ $toast-padding-x: .75rem !default;
1359
1468
  $toast-padding-y: .5rem !default;
1360
1469
  $toast-font-size: .875rem !default;
1361
1470
  $toast-color: null !default;
1362
- $toast-background-color: rgba($white, .85) !default;
1363
- $toast-border-width: $border-width !default;
1471
+ $toast-background-color: rgba(var(--#{$prefix}body-bg-rgb), .85) !default;
1472
+ $toast-border-width: var(--#{$prefix}border-width) !default;
1364
1473
  $toast-border-color: var(--#{$prefix}border-color-translucent) !default;
1365
- $toast-border-radius: $border-radius !default;
1366
- $toast-box-shadow: $box-shadow !default;
1474
+ $toast-border-radius: var(--#{$prefix}border-radius) !default;
1475
+ $toast-box-shadow: var(--#{$prefix}box-shadow) !default;
1367
1476
  $toast-spacing: $container-padding-x !default;
1368
1477
 
1369
- $toast-header-color: $gray-600 !default;
1370
- $toast-header-background-color: rgba($white, .85) !default;
1371
- $toast-header-border-color: rgba($black, .05) !default;
1478
+ $toast-header-color: var(--#{$prefix}secondary-color) !default;
1479
+ $toast-header-background-color: rgba(var(--#{$prefix}body-bg-rgb), .85) !default;
1480
+ $toast-header-border-color: $toast-border-color !default;
1372
1481
  // scss-docs-end toast-variables
1373
1482
 
1374
1483
 
@@ -1380,7 +1489,7 @@ $badge-font-weight: $font-weight-bold !default;
1380
1489
  $badge-color: $white !default;
1381
1490
  $badge-padding-y: .35em !default;
1382
1491
  $badge-padding-x: .65em !default;
1383
- $badge-border-radius: $border-radius !default;
1492
+ $badge-border-radius: var(--#{$prefix}border-radius) !default;
1384
1493
  // scss-docs-end badge-variables
1385
1494
 
1386
1495
 
@@ -1397,13 +1506,13 @@ $modal-dialog-margin-y-sm-up: 1.75rem !default;
1397
1506
  $modal-title-line-height: $line-height-base !default;
1398
1507
 
1399
1508
  $modal-content-color: null !default;
1400
- $modal-content-bg: $white !default;
1509
+ $modal-content-bg: var(--#{$prefix}body-bg) !default;
1401
1510
  $modal-content-border-color: var(--#{$prefix}border-color-translucent) !default;
1402
- $modal-content-border-width: $border-width !default;
1403
- $modal-content-border-radius: $border-radius-lg !default;
1511
+ $modal-content-border-width: var(--#{$prefix}border-width) !default;
1512
+ $modal-content-border-radius: var(--#{$prefix}border-radius-lg) !default;
1404
1513
  $modal-content-inner-border-radius: subtract($modal-content-border-radius, $modal-content-border-width) !default;
1405
- $modal-content-box-shadow-xs: $box-shadow-sm !default;
1406
- $modal-content-box-shadow-sm-up: $box-shadow !default;
1514
+ $modal-content-box-shadow-xs: var(--#{$prefix}box-shadow-sm) !default;
1515
+ $modal-content-box-shadow-sm-up: var(--#{$prefix}box-shadow) !default;
1407
1516
 
1408
1517
  $modal-backdrop-bg: $black !default;
1409
1518
  $modal-backdrop-opacity: .5 !default;
@@ -1438,24 +1547,26 @@ $modal-scale-transform: scale(1.02) !default;
1438
1547
  $alert-padding-y: $spacer !default;
1439
1548
  $alert-padding-x: $spacer !default;
1440
1549
  $alert-margin-bottom: 1rem !default;
1441
- $alert-border-radius: $border-radius !default;
1550
+ $alert-border-radius: var(--#{$prefix}border-radius) !default;
1442
1551
  $alert-link-font-weight: $font-weight-bold !default;
1443
- $alert-border-width: $border-width !default;
1444
- $alert-bg-scale: -80% !default;
1445
- $alert-border-scale: -70% !default;
1446
- $alert-color-scale: 40% !default;
1552
+ $alert-border-width: var(--#{$prefix}border-width) !default;
1447
1553
  $alert-dismissible-padding-r: $alert-padding-x * 3 !default; // 3x covers width of x plus default padding on either side
1448
1554
  // scss-docs-end alert-variables
1449
1555
 
1556
+ // fusv-disable
1557
+ $alert-bg-scale: -80% !default; // Deprecated in v5.2.0, to be removed in v6
1558
+ $alert-border-scale: -70% !default; // Deprecated in v5.2.0, to be removed in v6
1559
+ $alert-color-scale: 40% !default; // Deprecated in v5.2.0, to be removed in v6
1560
+ // fusv-enable
1450
1561
 
1451
1562
  // Progress bars
1452
1563
 
1453
1564
  // scss-docs-start progress-variables
1454
1565
  $progress-height: 1rem !default;
1455
1566
  $progress-font-size: $font-size-base * .75 !default;
1456
- $progress-bg: $gray-200 !default;
1457
- $progress-border-radius: $border-radius !default;
1458
- $progress-box-shadow: $box-shadow-inset !default;
1567
+ $progress-bg: var(--#{$prefix}secondary-bg) !default;
1568
+ $progress-border-radius: var(--#{$prefix}border-radius) !default;
1569
+ $progress-box-shadow: var(--#{$prefix}box-shadow-inset) !default;
1459
1570
  $progress-bar-color: $white !default;
1460
1571
  $progress-bar-bg: $primary !default;
1461
1572
  $progress-bar-animation-timing: 1s linear infinite !default;
@@ -1466,30 +1577,32 @@ $progress-bar-transition: width .6s ease !default;
1466
1577
  // List group
1467
1578
 
1468
1579
  // scss-docs-start list-group-variables
1469
- $list-group-color: $gray-900 !default;
1470
- $list-group-bg: $white !default;
1471
- $list-group-border-color: rgba($black, .125) !default;
1472
- $list-group-border-width: $border-width !default;
1473
- $list-group-border-radius: $border-radius !default;
1580
+ $list-group-color: var(--#{$prefix}body-color) !default;
1581
+ $list-group-bg: var(--#{$prefix}body-bg) !default;
1582
+ $list-group-border-color: var(--#{$prefix}border-color) !default;
1583
+ $list-group-border-width: var(--#{$prefix}border-width) !default;
1584
+ $list-group-border-radius: var(--#{$prefix}border-radius) !default;
1474
1585
 
1475
1586
  $list-group-item-padding-y: $spacer * .5 !default;
1476
1587
  $list-group-item-padding-x: $spacer !default;
1477
- $list-group-item-bg-scale: -80% !default;
1478
- $list-group-item-color-scale: 40% !default;
1588
+ // fusv-disable
1589
+ $list-group-item-bg-scale: -80% !default; // Deprecated in v5.3.0
1590
+ $list-group-item-color-scale: 40% !default; // Deprecated in v5.3.0
1591
+ // fusv-enable
1479
1592
 
1480
- $list-group-hover-bg: $gray-100 !default;
1593
+ $list-group-hover-bg: var(--#{$prefix}tertiary-bg) !default;
1481
1594
  $list-group-active-color: $component-active-color !default;
1482
1595
  $list-group-active-bg: $component-active-bg !default;
1483
1596
  $list-group-active-border-color: $list-group-active-bg !default;
1484
1597
 
1485
- $list-group-disabled-color: $gray-600 !default;
1598
+ $list-group-disabled-color: var(--#{$prefix}secondary-color) !default;
1486
1599
  $list-group-disabled-bg: $list-group-bg !default;
1487
1600
 
1488
- $list-group-action-color: $gray-700 !default;
1489
- $list-group-action-hover-color: $list-group-action-color !default;
1601
+ $list-group-action-color: var(--#{$prefix}secondary-color) !default;
1602
+ $list-group-action-hover-color: var(--#{$prefix}emphasis-color) !default;
1490
1603
 
1491
- $list-group-action-active-color: $body-color !default;
1492
- $list-group-action-active-bg: $gray-200 !default;
1604
+ $list-group-action-active-color: var(--#{$prefix}body-color) !default;
1605
+ $list-group-action-active-bg: var(--#{$prefix}secondary-bg) !default;
1493
1606
  // scss-docs-end list-group-variables
1494
1607
 
1495
1608
 
@@ -1497,11 +1610,11 @@ $list-group-action-active-bg: $gray-200 !default;
1497
1610
 
1498
1611
  // scss-docs-start thumbnail-variables
1499
1612
  $thumbnail-padding: .25rem !default;
1500
- $thumbnail-bg: $body-bg !default;
1501
- $thumbnail-border-width: $border-width !default;
1613
+ $thumbnail-bg: var(--#{$prefix}body-bg) !default;
1614
+ $thumbnail-border-width: var(--#{$prefix}border-width) !default;
1502
1615
  $thumbnail-border-color: var(--#{$prefix}border-color) !default;
1503
- $thumbnail-border-radius: $border-radius !default;
1504
- $thumbnail-box-shadow: $box-shadow-sm !default;
1616
+ $thumbnail-border-radius: var(--#{$prefix}border-radius) !default;
1617
+ $thumbnail-box-shadow: var(--#{$prefix}box-shadow-sm) !default;
1505
1618
  // scss-docs-end thumbnail-variables
1506
1619
 
1507
1620
 
@@ -1509,7 +1622,7 @@ $thumbnail-box-shadow: $box-shadow-sm !default;
1509
1622
 
1510
1623
  // scss-docs-start figure-variables
1511
1624
  $figure-caption-font-size: $small-font-size !default;
1512
- $figure-caption-color: $gray-600 !default;
1625
+ $figure-caption-color: var(--#{$prefix}secondary-color) !default;
1513
1626
  // scss-docs-end figure-variables
1514
1627
 
1515
1628
 
@@ -1522,8 +1635,8 @@ $breadcrumb-padding-x: 0 !default;
1522
1635
  $breadcrumb-item-padding-x: .5rem !default;
1523
1636
  $breadcrumb-margin-bottom: 1rem !default;
1524
1637
  $breadcrumb-bg: null !default;
1525
- $breadcrumb-divider-color: $gray-600 !default;
1526
- $breadcrumb-active-color: $gray-600 !default;
1638
+ $breadcrumb-divider-color: var(--#{$prefix}secondary-color) !default;
1639
+ $breadcrumb-active-color: var(--#{$prefix}secondary-color) !default;
1527
1640
  $breadcrumb-divider: quote("/") !default;
1528
1641
  $breadcrumb-divider-flipped: $breadcrumb-divider !default;
1529
1642
  $breadcrumb-border-radius: null !default;
@@ -1592,7 +1705,7 @@ $btn-close-padding-x: .25em !default;
1592
1705
  $btn-close-padding-y: $btn-close-padding-x !default;
1593
1706
  $btn-close-color: $black !default;
1594
1707
  $btn-close-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$btn-close-color}'><path d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/></svg>") !default;
1595
- $btn-close-focus-shadow: $input-btn-focus-box-shadow !default;
1708
+ $btn-close-focus-shadow: $focus-ring-box-shadow !default;
1596
1709
  $btn-close-opacity: .5 !default;
1597
1710
  $btn-close-hover-opacity: .75 !default;
1598
1711
  $btn-close-focus-opacity: 1 !default;
@@ -1612,8 +1725,8 @@ $offcanvas-transition-duration: .3s !default;
1612
1725
  $offcanvas-border-color: $modal-content-border-color !default;
1613
1726
  $offcanvas-border-width: $modal-content-border-width !default;
1614
1727
  $offcanvas-title-line-height: $modal-title-line-height !default;
1615
- $offcanvas-bg-color: $modal-content-bg !default;
1616
- $offcanvas-color: $modal-content-color !default;
1728
+ $offcanvas-bg-color: var(--#{$prefix}body-bg) !default;
1729
+ $offcanvas-color: var(--#{$prefix}body-color) !default;
1617
1730
  $offcanvas-box-shadow: $modal-content-box-shadow-xs !default;
1618
1731
  $offcanvas-backdrop-bg: $modal-backdrop-bg !default;
1619
1732
  $offcanvas-backdrop-opacity: $modal-backdrop-opacity !default;