bootstrap 5.2.2 → 5.3.3

Sign up to get free protection for your applications and to get access to all the features.
Files changed (105) hide show
  1. checksums.yaml +4 -4
  2. data/.github/workflows/ci.yml +61 -0
  3. data/CHANGELOG.md +4 -0
  4. data/Gemfile +1 -0
  5. data/README.md +9 -3
  6. data/Rakefile +17 -4
  7. data/assets/javascripts/bootstrap/alert.js +22 -32
  8. data/assets/javascripts/bootstrap/base-component.js +22 -38
  9. data/assets/javascripts/bootstrap/button.js +19 -22
  10. data/assets/javascripts/bootstrap/carousel.js +52 -135
  11. data/assets/javascripts/bootstrap/collapse.js +40 -102
  12. data/assets/javascripts/bootstrap/dom/data.js +8 -12
  13. data/assets/javascripts/bootstrap/dom/event-handler.js +19 -66
  14. data/assets/javascripts/bootstrap/dom/manipulator.js +4 -17
  15. data/assets/javascripts/bootstrap/dom/selector-engine.js +42 -24
  16. data/assets/javascripts/bootstrap/dropdown.js +74 -145
  17. data/assets/javascripts/bootstrap/modal.js +53 -133
  18. data/assets/javascripts/bootstrap/offcanvas.js +50 -102
  19. data/assets/javascripts/bootstrap/popover.js +23 -29
  20. data/assets/javascripts/bootstrap/scrollspy.js +53 -90
  21. data/assets/javascripts/bootstrap/tab.js +63 -112
  22. data/assets/javascripts/bootstrap/toast.js +31 -73
  23. data/assets/javascripts/bootstrap/tooltip.js +80 -191
  24. data/assets/javascripts/bootstrap/util/backdrop.js +27 -54
  25. data/assets/javascripts/bootstrap/util/component-functions.js +13 -18
  26. data/assets/javascripts/bootstrap/util/config.js +15 -27
  27. data/assets/javascripts/bootstrap/util/focustrap.js +19 -36
  28. data/assets/javascripts/bootstrap/util/index.js +42 -112
  29. data/assets/javascripts/bootstrap/util/sanitizer.js +33 -42
  30. data/assets/javascripts/bootstrap/util/scrollbar.js +24 -50
  31. data/assets/javascripts/bootstrap/util/swipe.js +27 -48
  32. data/assets/javascripts/bootstrap/util/template-factory.js +25 -52
  33. data/assets/javascripts/bootstrap-sprockets.js +8 -8
  34. data/assets/javascripts/bootstrap.js +686 -1450
  35. data/assets/javascripts/bootstrap.min.js +3 -3
  36. data/assets/stylesheets/_bootstrap-grid.scss +1 -3
  37. data/assets/stylesheets/_bootstrap-reboot.scss +1 -0
  38. data/assets/stylesheets/_bootstrap-utilities.scss +19 -0
  39. data/assets/stylesheets/_bootstrap.scss +1 -0
  40. data/assets/stylesheets/bootstrap/_accordion.scss +20 -11
  41. data/assets/stylesheets/bootstrap/_alert.scss +8 -11
  42. data/assets/stylesheets/bootstrap/_button-group.scss +2 -2
  43. data/assets/stylesheets/bootstrap/_buttons.scss +12 -3
  44. data/assets/stylesheets/bootstrap/_card.scss +5 -0
  45. data/assets/stylesheets/bootstrap/_carousel.scss +22 -15
  46. data/assets/stylesheets/bootstrap/_close.scss +32 -9
  47. data/assets/stylesheets/bootstrap/_dropdown.scss +1 -0
  48. data/assets/stylesheets/bootstrap/_functions.scss +2 -2
  49. data/assets/stylesheets/bootstrap/_grid.scss +6 -0
  50. data/assets/stylesheets/bootstrap/_helpers.scss +2 -0
  51. data/assets/stylesheets/bootstrap/_list-group.scss +12 -7
  52. data/assets/stylesheets/bootstrap/_maps.scss +120 -0
  53. data/assets/stylesheets/bootstrap/_mixins.scss +1 -2
  54. data/assets/stylesheets/bootstrap/_modal.scss +0 -1
  55. data/assets/stylesheets/bootstrap/_nav.scss +42 -17
  56. data/assets/stylesheets/bootstrap/_navbar.scss +15 -4
  57. data/assets/stylesheets/bootstrap/_offcanvas.scss +5 -6
  58. data/assets/stylesheets/bootstrap/_pagination.scss +1 -1
  59. data/assets/stylesheets/bootstrap/_progress.scss +10 -1
  60. data/assets/stylesheets/bootstrap/_reboot.scss +8 -7
  61. data/assets/stylesheets/bootstrap/_root.scss +124 -10
  62. data/assets/stylesheets/bootstrap/_tables.scss +19 -12
  63. data/assets/stylesheets/bootstrap/_tooltip.scss +4 -5
  64. data/assets/stylesheets/bootstrap/_utilities.scss +175 -16
  65. data/assets/stylesheets/bootstrap/_variables-dark.scss +87 -0
  66. data/assets/stylesheets/bootstrap/_variables.scss +289 -172
  67. data/assets/stylesheets/bootstrap/forms/_floating-labels.scss +23 -3
  68. data/assets/stylesheets/bootstrap/forms/_form-check.scss +27 -13
  69. data/assets/stylesheets/bootstrap/forms/_form-control.scss +24 -4
  70. data/assets/stylesheets/bootstrap/forms/_form-range.scss +3 -3
  71. data/assets/stylesheets/bootstrap/forms/_form-select.scss +12 -3
  72. data/assets/stylesheets/bootstrap/forms/_input-group.scss +1 -1
  73. data/assets/stylesheets/bootstrap/helpers/_color-bg.scss +1 -4
  74. data/assets/stylesheets/bootstrap/helpers/_colored-links.scss +20 -2
  75. data/assets/stylesheets/bootstrap/helpers/_focus-ring.scss +5 -0
  76. data/assets/stylesheets/bootstrap/helpers/_icon-link.scss +25 -0
  77. data/assets/stylesheets/bootstrap/helpers/_vr.scss +1 -1
  78. data/assets/stylesheets/bootstrap/mixins/_alert.scss +4 -1
  79. data/assets/stylesheets/bootstrap/mixins/_banner.scss +2 -4
  80. data/assets/stylesheets/bootstrap/mixins/_caret.scss +30 -25
  81. data/assets/stylesheets/bootstrap/mixins/_color-mode.scss +21 -0
  82. data/assets/stylesheets/bootstrap/mixins/_forms.scss +20 -9
  83. data/assets/stylesheets/bootstrap/mixins/_grid.scss +2 -2
  84. data/assets/stylesheets/bootstrap/mixins/_list-group.scss +2 -0
  85. data/assets/stylesheets/bootstrap/mixins/_utilities.scss +1 -1
  86. data/assets/stylesheets/bootstrap/mixins/_visually-hidden.scss +5 -1
  87. data/assets/stylesheets/bootstrap/vendor/_rfs.scss +23 -29
  88. data/bootstrap.gemspec +4 -3
  89. data/lib/bootstrap/engine.rb +17 -1
  90. data/lib/bootstrap/version.rb +2 -2
  91. data/tasks/updater/js.rb +1 -1
  92. data/tasks/updater/network.rb +2 -2
  93. data/tasks/updater/scss.rb +2 -2
  94. data/test/gemfiles/rails_4_2.gemfile +2 -1
  95. data/test/gemfiles/rails_5_0.gemfile +1 -1
  96. data/test/gemfiles/rails_5_1.gemfile +1 -1
  97. data/test/gemfiles/rails_5_2.gemfile +8 -0
  98. data/test/gemfiles/rails_6_0.gemfile +1 -0
  99. data/test/gemfiles/rails_6_1.gemfile +1 -0
  100. data/test/gemfiles/rails_7_0_dartsass.gemfile +8 -0
  101. data/test/gemfiles/rails_7_0_sassc.gemfile +8 -0
  102. data/test/test_helper.rb +3 -2
  103. metadata +42 -18
  104. data/.travis.yml +0 -32
  105. data/assets/stylesheets/bootstrap/bootstrap-utilities.scss +0 -15
@@ -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,23 +1377,25 @@ $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
- $accordion-button-focus-border-color: $input-focus-border-color !default;
1386
+ // fusv-disable
1387
+ $accordion-button-focus-border-color: $input-focus-border-color !default; // Deprecated in v5.3.3
1388
+ // fusv-enable
1278
1389
  $accordion-button-focus-box-shadow: $btn-focus-box-shadow !default;
1279
1390
 
1280
1391
  $accordion-icon-width: 1.25rem !default;
1281
- $accordion-icon-color: $accordion-button-color !default;
1282
- $accordion-icon-active-color: $accordion-button-active-color !default;
1392
+ $accordion-icon-color: $body-color !default;
1393
+ $accordion-icon-active-color: $primary-text-emphasis !default;
1283
1394
  $accordion-icon-transition: transform .2s ease-in-out !default;
1284
1395
  $accordion-icon-transform: rotate(-180deg) !default;
1285
1396
 
1286
- $accordion-button-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-color}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !default;
1287
- $accordion-button-active-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-active-color}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !default;
1397
+ $accordion-button-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='#{$accordion-icon-color}' stroke-linecap='round' stroke-linejoin='round'><path d='M2 5L8 11L14 5'/></svg>") !default;
1398
+ $accordion-button-active-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='#{$accordion-icon-active-color}' stroke-linecap='round' stroke-linejoin='round'><path d='M2 5L8 11L14 5'/></svg>") !default;
1288
1399
  // scss-docs-end accordion-variables
1289
1400
 
1290
1401
  // Tooltips
@@ -1292,9 +1403,9 @@ $accordion-button-active-icon: url("data:image/svg+xml,<svg xmlns='http://www.w
1292
1403
  // scss-docs-start tooltip-variables
1293
1404
  $tooltip-font-size: $font-size-sm !default;
1294
1405
  $tooltip-max-width: 200px !default;
1295
- $tooltip-color: $white !default;
1296
- $tooltip-bg: $black !default;
1297
- $tooltip-border-radius: $border-radius !default;
1406
+ $tooltip-color: var(--#{$prefix}body-bg) !default;
1407
+ $tooltip-bg: var(--#{$prefix}emphasis-color) !default;
1408
+ $tooltip-border-radius: var(--#{$prefix}border-radius) !default;
1298
1409
  $tooltip-opacity: .9 !default;
1299
1410
  $tooltip-padding-y: $spacer * .25 !default;
1300
1411
  $tooltip-padding-x: $spacer * .5 !default;
@@ -1322,21 +1433,21 @@ $form-feedback-tooltip-border-radius: $tooltip-border-radius !default;
1322
1433
 
1323
1434
  // scss-docs-start popover-variables
1324
1435
  $popover-font-size: $font-size-sm !default;
1325
- $popover-bg: $white !default;
1436
+ $popover-bg: var(--#{$prefix}body-bg) !default;
1326
1437
  $popover-max-width: 276px !default;
1327
- $popover-border-width: $border-width !default;
1438
+ $popover-border-width: var(--#{$prefix}border-width) !default;
1328
1439
  $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;
1440
+ $popover-border-radius: var(--#{$prefix}border-radius-lg) !default;
1441
+ $popover-inner-border-radius: calc(#{$popover-border-radius} - #{$popover-border-width}) !default; // stylelint-disable-line function-disallowed-list
1442
+ $popover-box-shadow: var(--#{$prefix}box-shadow) !default;
1332
1443
 
1333
1444
  $popover-header-font-size: $font-size-base !default;
1334
- $popover-header-bg: shade-color($popover-bg, 6%) !default;
1445
+ $popover-header-bg: var(--#{$prefix}secondary-bg) !default;
1335
1446
  $popover-header-color: $headings-color !default;
1336
1447
  $popover-header-padding-y: .5rem !default;
1337
1448
  $popover-header-padding-x: $spacer !default;
1338
1449
 
1339
- $popover-body-color: $body-color !default;
1450
+ $popover-body-color: var(--#{$prefix}body-color) !default;
1340
1451
  $popover-body-padding-y: $spacer !default;
1341
1452
  $popover-body-padding-x: $spacer !default;
1342
1453
 
@@ -1359,16 +1470,16 @@ $toast-padding-x: .75rem !default;
1359
1470
  $toast-padding-y: .5rem !default;
1360
1471
  $toast-font-size: .875rem !default;
1361
1472
  $toast-color: null !default;
1362
- $toast-background-color: rgba($white, .85) !default;
1363
- $toast-border-width: $border-width !default;
1473
+ $toast-background-color: rgba(var(--#{$prefix}body-bg-rgb), .85) !default;
1474
+ $toast-border-width: var(--#{$prefix}border-width) !default;
1364
1475
  $toast-border-color: var(--#{$prefix}border-color-translucent) !default;
1365
- $toast-border-radius: $border-radius !default;
1366
- $toast-box-shadow: $box-shadow !default;
1476
+ $toast-border-radius: var(--#{$prefix}border-radius) !default;
1477
+ $toast-box-shadow: var(--#{$prefix}box-shadow) !default;
1367
1478
  $toast-spacing: $container-padding-x !default;
1368
1479
 
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;
1480
+ $toast-header-color: var(--#{$prefix}secondary-color) !default;
1481
+ $toast-header-background-color: rgba(var(--#{$prefix}body-bg-rgb), .85) !default;
1482
+ $toast-header-border-color: $toast-border-color !default;
1372
1483
  // scss-docs-end toast-variables
1373
1484
 
1374
1485
 
@@ -1380,7 +1491,7 @@ $badge-font-weight: $font-weight-bold !default;
1380
1491
  $badge-color: $white !default;
1381
1492
  $badge-padding-y: .35em !default;
1382
1493
  $badge-padding-x: .65em !default;
1383
- $badge-border-radius: $border-radius !default;
1494
+ $badge-border-radius: var(--#{$prefix}border-radius) !default;
1384
1495
  // scss-docs-end badge-variables
1385
1496
 
1386
1497
 
@@ -1397,13 +1508,13 @@ $modal-dialog-margin-y-sm-up: 1.75rem !default;
1397
1508
  $modal-title-line-height: $line-height-base !default;
1398
1509
 
1399
1510
  $modal-content-color: null !default;
1400
- $modal-content-bg: $white !default;
1511
+ $modal-content-bg: var(--#{$prefix}body-bg) !default;
1401
1512
  $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;
1513
+ $modal-content-border-width: var(--#{$prefix}border-width) !default;
1514
+ $modal-content-border-radius: var(--#{$prefix}border-radius-lg) !default;
1404
1515
  $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;
1516
+ $modal-content-box-shadow-xs: var(--#{$prefix}box-shadow-sm) !default;
1517
+ $modal-content-box-shadow-sm-up: var(--#{$prefix}box-shadow) !default;
1407
1518
 
1408
1519
  $modal-backdrop-bg: $black !default;
1409
1520
  $modal-backdrop-opacity: .5 !default;
@@ -1438,24 +1549,26 @@ $modal-scale-transform: scale(1.02) !default;
1438
1549
  $alert-padding-y: $spacer !default;
1439
1550
  $alert-padding-x: $spacer !default;
1440
1551
  $alert-margin-bottom: 1rem !default;
1441
- $alert-border-radius: $border-radius !default;
1552
+ $alert-border-radius: var(--#{$prefix}border-radius) !default;
1442
1553
  $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;
1554
+ $alert-border-width: var(--#{$prefix}border-width) !default;
1447
1555
  $alert-dismissible-padding-r: $alert-padding-x * 3 !default; // 3x covers width of x plus default padding on either side
1448
1556
  // scss-docs-end alert-variables
1449
1557
 
1558
+ // fusv-disable
1559
+ $alert-bg-scale: -80% !default; // Deprecated in v5.2.0, to be removed in v6
1560
+ $alert-border-scale: -70% !default; // Deprecated in v5.2.0, to be removed in v6
1561
+ $alert-color-scale: 40% !default; // Deprecated in v5.2.0, to be removed in v6
1562
+ // fusv-enable
1450
1563
 
1451
1564
  // Progress bars
1452
1565
 
1453
1566
  // scss-docs-start progress-variables
1454
1567
  $progress-height: 1rem !default;
1455
1568
  $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;
1569
+ $progress-bg: var(--#{$prefix}secondary-bg) !default;
1570
+ $progress-border-radius: var(--#{$prefix}border-radius) !default;
1571
+ $progress-box-shadow: var(--#{$prefix}box-shadow-inset) !default;
1459
1572
  $progress-bar-color: $white !default;
1460
1573
  $progress-bar-bg: $primary !default;
1461
1574
  $progress-bar-animation-timing: 1s linear infinite !default;
@@ -1466,30 +1579,32 @@ $progress-bar-transition: width .6s ease !default;
1466
1579
  // List group
1467
1580
 
1468
1581
  // 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;
1582
+ $list-group-color: var(--#{$prefix}body-color) !default;
1583
+ $list-group-bg: var(--#{$prefix}body-bg) !default;
1584
+ $list-group-border-color: var(--#{$prefix}border-color) !default;
1585
+ $list-group-border-width: var(--#{$prefix}border-width) !default;
1586
+ $list-group-border-radius: var(--#{$prefix}border-radius) !default;
1474
1587
 
1475
1588
  $list-group-item-padding-y: $spacer * .5 !default;
1476
1589
  $list-group-item-padding-x: $spacer !default;
1477
- $list-group-item-bg-scale: -80% !default;
1478
- $list-group-item-color-scale: 40% !default;
1590
+ // fusv-disable
1591
+ $list-group-item-bg-scale: -80% !default; // Deprecated in v5.3.0
1592
+ $list-group-item-color-scale: 40% !default; // Deprecated in v5.3.0
1593
+ // fusv-enable
1479
1594
 
1480
- $list-group-hover-bg: $gray-100 !default;
1595
+ $list-group-hover-bg: var(--#{$prefix}tertiary-bg) !default;
1481
1596
  $list-group-active-color: $component-active-color !default;
1482
1597
  $list-group-active-bg: $component-active-bg !default;
1483
1598
  $list-group-active-border-color: $list-group-active-bg !default;
1484
1599
 
1485
- $list-group-disabled-color: $gray-600 !default;
1600
+ $list-group-disabled-color: var(--#{$prefix}secondary-color) !default;
1486
1601
  $list-group-disabled-bg: $list-group-bg !default;
1487
1602
 
1488
- $list-group-action-color: $gray-700 !default;
1489
- $list-group-action-hover-color: $list-group-action-color !default;
1603
+ $list-group-action-color: var(--#{$prefix}secondary-color) !default;
1604
+ $list-group-action-hover-color: var(--#{$prefix}emphasis-color) !default;
1490
1605
 
1491
- $list-group-action-active-color: $body-color !default;
1492
- $list-group-action-active-bg: $gray-200 !default;
1606
+ $list-group-action-active-color: var(--#{$prefix}body-color) !default;
1607
+ $list-group-action-active-bg: var(--#{$prefix}secondary-bg) !default;
1493
1608
  // scss-docs-end list-group-variables
1494
1609
 
1495
1610
 
@@ -1497,11 +1612,11 @@ $list-group-action-active-bg: $gray-200 !default;
1497
1612
 
1498
1613
  // scss-docs-start thumbnail-variables
1499
1614
  $thumbnail-padding: .25rem !default;
1500
- $thumbnail-bg: $body-bg !default;
1501
- $thumbnail-border-width: $border-width !default;
1615
+ $thumbnail-bg: var(--#{$prefix}body-bg) !default;
1616
+ $thumbnail-border-width: var(--#{$prefix}border-width) !default;
1502
1617
  $thumbnail-border-color: var(--#{$prefix}border-color) !default;
1503
- $thumbnail-border-radius: $border-radius !default;
1504
- $thumbnail-box-shadow: $box-shadow-sm !default;
1618
+ $thumbnail-border-radius: var(--#{$prefix}border-radius) !default;
1619
+ $thumbnail-box-shadow: var(--#{$prefix}box-shadow-sm) !default;
1505
1620
  // scss-docs-end thumbnail-variables
1506
1621
 
1507
1622
 
@@ -1509,7 +1624,7 @@ $thumbnail-box-shadow: $box-shadow-sm !default;
1509
1624
 
1510
1625
  // scss-docs-start figure-variables
1511
1626
  $figure-caption-font-size: $small-font-size !default;
1512
- $figure-caption-color: $gray-600 !default;
1627
+ $figure-caption-color: var(--#{$prefix}secondary-color) !default;
1513
1628
  // scss-docs-end figure-variables
1514
1629
 
1515
1630
 
@@ -1522,8 +1637,8 @@ $breadcrumb-padding-x: 0 !default;
1522
1637
  $breadcrumb-item-padding-x: .5rem !default;
1523
1638
  $breadcrumb-margin-bottom: 1rem !default;
1524
1639
  $breadcrumb-bg: null !default;
1525
- $breadcrumb-divider-color: $gray-600 !default;
1526
- $breadcrumb-active-color: $gray-600 !default;
1640
+ $breadcrumb-divider-color: var(--#{$prefix}secondary-color) !default;
1641
+ $breadcrumb-active-color: var(--#{$prefix}secondary-color) !default;
1527
1642
  $breadcrumb-divider: quote("/") !default;
1528
1643
  $breadcrumb-divider-flipped: $breadcrumb-divider !default;
1529
1644
  $breadcrumb-border-radius: null !default;
@@ -1592,7 +1707,7 @@ $btn-close-padding-x: .25em !default;
1592
1707
  $btn-close-padding-y: $btn-close-padding-x !default;
1593
1708
  $btn-close-color: $black !default;
1594
1709
  $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;
1710
+ $btn-close-focus-shadow: $focus-ring-box-shadow !default;
1596
1711
  $btn-close-opacity: .5 !default;
1597
1712
  $btn-close-hover-opacity: .75 !default;
1598
1713
  $btn-close-focus-opacity: 1 !default;
@@ -1612,8 +1727,8 @@ $offcanvas-transition-duration: .3s !default;
1612
1727
  $offcanvas-border-color: $modal-content-border-color !default;
1613
1728
  $offcanvas-border-width: $modal-content-border-width !default;
1614
1729
  $offcanvas-title-line-height: $modal-title-line-height !default;
1615
- $offcanvas-bg-color: $modal-content-bg !default;
1616
- $offcanvas-color: $modal-content-color !default;
1730
+ $offcanvas-bg-color: var(--#{$prefix}body-bg) !default;
1731
+ $offcanvas-color: var(--#{$prefix}body-color) !default;
1617
1732
  $offcanvas-box-shadow: $modal-content-box-shadow-xs !default;
1618
1733
  $offcanvas-backdrop-bg: $modal-backdrop-bg !default;
1619
1734
  $offcanvas-backdrop-opacity: $modal-backdrop-opacity !default;
@@ -1632,3 +1747,5 @@ $kbd-bg: var(--#{$prefix}body-color) !default;
1632
1747
  $nested-kbd-font-weight: null !default; // Deprecated in v5.2.0, removing in v6
1633
1748
 
1634
1749
  $pre-color: null !default;
1750
+
1751
+ @import "variables-dark"; // TODO: can be removed safely in v6, only here to avoid breaking changes in v5.3