bootstrap 5.2.2 → 5.3.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (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