bootstrap 5.2.3 → 5.3.0.alpha3

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 (83) hide show
  1. checksums.yaml +4 -4
  2. data/README.md +1 -1
  3. data/assets/javascripts/bootstrap/alert.js +21 -32
  4. data/assets/javascripts/bootstrap/base-component.js +21 -38
  5. data/assets/javascripts/bootstrap/button.js +18 -22
  6. data/assets/javascripts/bootstrap/carousel.js +51 -135
  7. data/assets/javascripts/bootstrap/collapse.js +39 -102
  8. data/assets/javascripts/bootstrap/dom/data.js +8 -12
  9. data/assets/javascripts/bootstrap/dom/event-handler.js +18 -66
  10. data/assets/javascripts/bootstrap/dom/manipulator.js +4 -17
  11. data/assets/javascripts/bootstrap/dom/selector-engine.js +41 -24
  12. data/assets/javascripts/bootstrap/dropdown.js +73 -145
  13. data/assets/javascripts/bootstrap/modal.js +52 -133
  14. data/assets/javascripts/bootstrap/offcanvas.js +49 -102
  15. data/assets/javascripts/bootstrap/popover.js +22 -29
  16. data/assets/javascripts/bootstrap/scrollspy.js +51 -89
  17. data/assets/javascripts/bootstrap/tab.js +51 -109
  18. data/assets/javascripts/bootstrap/toast.js +30 -73
  19. data/assets/javascripts/bootstrap/tooltip.js +74 -177
  20. data/assets/javascripts/bootstrap/util/backdrop.js +27 -54
  21. data/assets/javascripts/bootstrap/util/component-functions.js +13 -19
  22. data/assets/javascripts/bootstrap/util/config.js +14 -27
  23. data/assets/javascripts/bootstrap/util/focustrap.js +19 -36
  24. data/assets/javascripts/bootstrap/util/index.js +42 -111
  25. data/assets/javascripts/bootstrap/util/sanitizer.js +13 -19
  26. data/assets/javascripts/bootstrap/util/scrollbar.js +23 -50
  27. data/assets/javascripts/bootstrap/util/swipe.js +26 -48
  28. data/assets/javascripts/bootstrap/util/template-factory.js +24 -52
  29. data/assets/javascripts/bootstrap-sprockets.js +1 -1
  30. data/assets/javascripts/bootstrap.js +626 -1406
  31. data/assets/javascripts/bootstrap.min.js +3 -3
  32. data/assets/stylesheets/_bootstrap-grid.scss +1 -3
  33. data/assets/stylesheets/_bootstrap-reboot.scss +1 -0
  34. data/assets/stylesheets/_bootstrap.scss +1 -0
  35. data/assets/stylesheets/bootstrap/_accordion.scss +9 -0
  36. data/assets/stylesheets/bootstrap/_alert.scss +8 -11
  37. data/assets/stylesheets/bootstrap/_button-group.scss +2 -2
  38. data/assets/stylesheets/bootstrap/_buttons.scss +3 -3
  39. data/assets/stylesheets/bootstrap/_card.scss +5 -0
  40. data/assets/stylesheets/bootstrap/_carousel.scss +20 -2
  41. data/assets/stylesheets/bootstrap/_close.scss +32 -9
  42. data/assets/stylesheets/bootstrap/_dropdown.scss +1 -0
  43. data/assets/stylesheets/bootstrap/_functions.scss +1 -1
  44. data/assets/stylesheets/bootstrap/_grid.scss +6 -0
  45. data/assets/stylesheets/bootstrap/_helpers.scss +2 -0
  46. data/assets/stylesheets/bootstrap/_list-group.scss +12 -7
  47. data/assets/stylesheets/bootstrap/_maps.scss +120 -0
  48. data/assets/stylesheets/bootstrap/_mixins.scss +1 -2
  49. data/assets/stylesheets/bootstrap/_nav.scss +40 -3
  50. data/assets/stylesheets/bootstrap/_navbar.scss +13 -3
  51. data/assets/stylesheets/bootstrap/_offcanvas.scss +4 -2
  52. data/assets/stylesheets/bootstrap/_pagination.scss +1 -1
  53. data/assets/stylesheets/bootstrap/_progress.scss +10 -1
  54. data/assets/stylesheets/bootstrap/_reboot.scss +3 -3
  55. data/assets/stylesheets/bootstrap/_root.scss +125 -10
  56. data/assets/stylesheets/bootstrap/_tables.scss +1 -1
  57. data/assets/stylesheets/bootstrap/_tooltip.scss +4 -5
  58. data/assets/stylesheets/bootstrap/_utilities.scss +172 -13
  59. data/assets/stylesheets/bootstrap/_variables-dark.scss +85 -0
  60. data/assets/stylesheets/bootstrap/_variables.scss +260 -151
  61. data/assets/stylesheets/bootstrap/bootstrap-utilities.scss +1 -0
  62. data/assets/stylesheets/bootstrap/forms/_floating-labels.scss +21 -3
  63. data/assets/stylesheets/bootstrap/forms/_form-check.scss +24 -11
  64. data/assets/stylesheets/bootstrap/forms/_form-control.scss +23 -3
  65. data/assets/stylesheets/bootstrap/forms/_form-select.scss +11 -2
  66. data/assets/stylesheets/bootstrap/forms/_input-group.scss +1 -1
  67. data/assets/stylesheets/bootstrap/helpers/_colored-links.scss +22 -2
  68. data/assets/stylesheets/bootstrap/helpers/_focus-ring.scss +5 -0
  69. data/assets/stylesheets/bootstrap/helpers/_icon-link.scss +25 -0
  70. data/assets/stylesheets/bootstrap/mixins/_alert.scss +4 -1
  71. data/assets/stylesheets/bootstrap/mixins/_banner.scss +2 -4
  72. data/assets/stylesheets/bootstrap/mixins/_caret.scss +30 -25
  73. data/assets/stylesheets/bootstrap/mixins/_color-mode.scss +21 -0
  74. data/assets/stylesheets/bootstrap/mixins/_forms.scss +8 -7
  75. data/assets/stylesheets/bootstrap/mixins/_list-group.scss +2 -0
  76. data/assets/stylesheets/bootstrap/mixins/_utilities.scss +1 -1
  77. data/assets/stylesheets/bootstrap/mixins/_visually-hidden.scss +5 -1
  78. data/assets/stylesheets/bootstrap/vendor/_rfs.scss +23 -29
  79. data/bootstrap.gemspec +1 -1
  80. data/lib/bootstrap/version.rb +2 -2
  81. data/tasks/updater/js.rb +1 -1
  82. data/tasks/updater/scss.rb +1 -1
  83. metadata +10 -6
@@ -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;
@@ -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,7 +702,7 @@ $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
 
642
708
  $legend-margin-bottom: .5rem !default;
@@ -683,7 +749,7 @@ $table-hover-bg-factor: .075 !default;
683
749
  $table-hover-bg: rgba($black, $table-hover-bg-factor) !default;
684
750
 
685
751
  $table-border-factor: .1 !default;
686
- $table-border-width: $border-width !default;
752
+ $table-border-width: var(--#{$prefix}border-width) !default;
687
753
  $table-border-color: var(--#{$prefix}border-color) !default;
688
754
 
689
755
  $table-striped-order: odd !default;
@@ -691,7 +757,7 @@ $table-striped-columns-order: even !default;
691
757
 
692
758
  $table-group-separator-color: currentcolor !default;
693
759
 
694
- $table-caption-color: $text-muted !default;
760
+ $table-caption-color: var(--#{$prefix}secondary-color) !default;
695
761
 
696
762
  $table-bg-scale: -80% !default;
697
763
  // scss-docs-end table-variables
@@ -721,11 +787,11 @@ $input-btn-font-family: null !default;
721
787
  $input-btn-font-size: $font-size-base !default;
722
788
  $input-btn-line-height: $line-height-base !default;
723
789
 
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;
790
+ $input-btn-focus-width: $focus-ring-width !default;
791
+ $input-btn-focus-color-opacity: $focus-ring-opacity !default;
792
+ $input-btn-focus-color: $focus-ring-color !default;
793
+ $input-btn-focus-blur: $focus-ring-blur !default;
794
+ $input-btn-focus-box-shadow: $focus-ring-box-shadow !default;
729
795
 
730
796
  $input-btn-padding-y-sm: .25rem !default;
731
797
  $input-btn-padding-x-sm: .5rem !default;
@@ -735,7 +801,7 @@ $input-btn-padding-y-lg: .5rem !default;
735
801
  $input-btn-padding-x-lg: 1rem !default;
736
802
  $input-btn-font-size-lg: $font-size-lg !default;
737
803
 
738
- $input-btn-border-width: $border-width !default;
804
+ $input-btn-border-width: var(--#{$prefix}border-width) !default;
739
805
  // scss-docs-end input-btn-variables
740
806
 
741
807
 
@@ -744,6 +810,7 @@ $input-btn-border-width: $border-width !default;
744
810
  // For each of Bootstrap's buttons, define text, background, and border color.
745
811
 
746
812
  // scss-docs-start btn-variables
813
+ $btn-color: var(--#{$prefix}body-color) !default;
747
814
  $btn-padding-y: $input-btn-padding-y !default;
748
815
  $btn-padding-x: $input-btn-padding-x !default;
749
816
  $btn-font-family: $input-btn-font-family !default;
@@ -773,9 +840,9 @@ $btn-link-hover-color: var(--#{$prefix}link-hover-color) !default;
773
840
  $btn-link-disabled-color: $gray-600 !default;
774
841
 
775
842
  // 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;
843
+ $btn-border-radius: var(--#{$prefix}border-radius) !default;
844
+ $btn-border-radius-sm: var(--#{$prefix}border-radius-sm) !default;
845
+ $btn-border-radius-lg: var(--#{$prefix}border-radius-lg) !default;
779
846
 
780
847
  $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
848
 
@@ -797,7 +864,7 @@ $form-text-margin-top: .25rem !default;
797
864
  $form-text-font-size: $small-font-size !default;
798
865
  $form-text-font-style: null !default;
799
866
  $form-text-font-weight: null !default;
800
- $form-text-color: $text-muted !default;
867
+ $form-text-color: var(--#{$prefix}secondary-color) !default;
801
868
  // scss-docs-end form-text-variables
802
869
 
803
870
  // scss-docs-start form-label-variables
@@ -824,19 +891,19 @@ $input-padding-y-lg: $input-btn-padding-y-lg !default;
824
891
  $input-padding-x-lg: $input-btn-padding-x-lg !default;
825
892
  $input-font-size-lg: $input-btn-font-size-lg !default;
826
893
 
827
- $input-bg: $body-bg !default;
894
+ $input-bg: var(--#{$prefix}body-bg) !default;
828
895
  $input-disabled-color: null !default;
829
- $input-disabled-bg: $gray-200 !default;
896
+ $input-disabled-bg: var(--#{$prefix}secondary-bg) !default;
830
897
  $input-disabled-border-color: null !default;
831
898
 
832
- $input-color: $body-color !default;
833
- $input-border-color: $gray-400 !default;
899
+ $input-color: var(--#{$prefix}body-color) !default;
900
+ $input-border-color: var(--#{$prefix}border-color) !default;
834
901
  $input-border-width: $input-btn-border-width !default;
835
902
  $input-box-shadow: $box-shadow-inset !default;
836
903
 
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;
904
+ $input-border-radius: var(--#{$prefix}border-radius) !default;
905
+ $input-border-radius-sm: var(--#{$prefix}border-radius-sm) !default;
906
+ $input-border-radius-lg: var(--#{$prefix}border-radius-lg) !default;
840
907
 
841
908
  $input-focus-bg: $input-bg !default;
842
909
  $input-focus-border-color: tint-color($component-active-bg, 50%) !default;
@@ -844,10 +911,10 @@ $input-focus-color: $input-color !default;
844
911
  $input-focus-width: $input-btn-focus-width !default;
845
912
  $input-focus-box-shadow: $input-btn-focus-box-shadow !default;
846
913
 
847
- $input-placeholder-color: $gray-600 !default;
848
- $input-plaintext-color: $body-color !default;
914
+ $input-placeholder-color: var(--#{$prefix}secondary-color) !default;
915
+ $input-plaintext-color: var(--#{$prefix}body-color) !default;
849
916
 
850
- $input-height-border: $input-border-width * 2 !default;
917
+ $input-height-border: calc(#{$input-border-width} * 2) !default; // stylelint-disable-line function-disallowed-list
851
918
 
852
919
  $input-height-inner: add($input-line-height * 1em, $input-padding-y * 2) !default;
853
920
  $input-height-inner-half: add($input-line-height * .5em, $input-padding-y) !default;
@@ -874,11 +941,11 @@ $form-check-transition: null !default;
874
941
  $form-check-input-active-filter: brightness(90%) !default;
875
942
 
876
943
  $form-check-input-bg: $input-bg !default;
877
- $form-check-input-border: 1px solid rgba($black, .25) !default;
944
+ $form-check-input-border: var(--#{$prefix}border-width) solid var(--#{$prefix}border-color) !default;
878
945
  $form-check-input-border-radius: .25em !default;
879
946
  $form-check-radio-border-radius: 50% !default;
880
947
  $form-check-input-focus-border: $input-focus-border-color !default;
881
- $form-check-input-focus-box-shadow: $input-btn-focus-box-shadow !default;
948
+ $form-check-input-focus-box-shadow: $focus-ring-box-shadow !default;
882
949
 
883
950
  $form-check-input-checked-color: $component-active-color !default;
884
951
  $form-check-input-checked-bg-color: $component-active-bg !default;
@@ -919,7 +986,7 @@ $input-group-addon-padding-y: $input-padding-y !default;
919
986
  $input-group-addon-padding-x: $input-padding-x !default;
920
987
  $input-group-addon-font-weight: $input-font-weight !default;
921
988
  $input-group-addon-color: $input-color !default;
922
- $input-group-addon-bg: $gray-200 !default;
989
+ $input-group-addon-bg: var(--#{$prefix}tertiary-bg) !default;
923
990
  $input-group-addon-border-color: $input-border-color !default;
924
991
  // scss-docs-end input-group-variables
925
992
 
@@ -934,7 +1001,7 @@ $form-select-line-height: $input-line-height !default;
934
1001
  $form-select-color: $input-color !default;
935
1002
  $form-select-bg: $input-bg !default;
936
1003
  $form-select-disabled-color: null !default;
937
- $form-select-disabled-bg: $gray-200 !default;
1004
+ $form-select-disabled-bg: $input-disabled-bg !default;
938
1005
  $form-select-disabled-border-color: $input-disabled-border-color !default;
939
1006
  $form-select-bg-position: right $form-select-padding-x center !default;
940
1007
  $form-select-bg-size: 16px 12px !default; // In pixels because image dimensions
@@ -971,7 +1038,7 @@ $form-select-transition: $input-transition !default;
971
1038
  $form-range-track-width: 100% !default;
972
1039
  $form-range-track-height: .5rem !default;
973
1040
  $form-range-track-cursor: pointer !default;
974
- $form-range-track-bg: $gray-300 !default;
1041
+ $form-range-track-bg: var(--#{$prefix}tertiary-bg) !default;
975
1042
  $form-range-track-border-radius: 1rem !default;
976
1043
  $form-range-track-box-shadow: $box-shadow-inset !default;
977
1044
 
@@ -984,26 +1051,28 @@ $form-range-thumb-box-shadow: 0 .1rem .25rem rgba($black, .1) !defa
984
1051
  $form-range-thumb-focus-box-shadow: 0 0 0 1px $body-bg, $input-focus-box-shadow !default;
985
1052
  $form-range-thumb-focus-box-shadow-width: $input-focus-width !default; // For focus box shadow issue in Edge
986
1053
  $form-range-thumb-active-bg: tint-color($component-active-bg, 70%) !default;
987
- $form-range-thumb-disabled-bg: $gray-500 !default;
1054
+ $form-range-thumb-disabled-bg: var(--#{$prefix}secondary-color) !default;
988
1055
  $form-range-thumb-transition: background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
989
1056
  // scss-docs-end form-range-variables
990
1057
 
991
1058
  // scss-docs-start form-file-variables
992
1059
  $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;
1060
+ $form-file-button-bg: var(--#{$prefix}tertiary-bg) !default;
1061
+ $form-file-button-hover-bg: var(--#{$prefix}secondary-bg) !default;
995
1062
  // scss-docs-end form-file-variables
996
1063
 
997
1064
  // 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;
1065
+ $form-floating-height: add(3.5rem, $input-height-border) !default;
1066
+ $form-floating-line-height: 1.25 !default;
1067
+ $form-floating-padding-x: $input-padding-x !default;
1068
+ $form-floating-padding-y: 1rem !default;
1069
+ $form-floating-input-padding-t: 1.625rem !default;
1070
+ $form-floating-input-padding-b: .625rem !default;
1071
+ $form-floating-label-height: 1.5em !default;
1072
+ $form-floating-label-opacity: .65 !default;
1073
+ $form-floating-label-transform: scale(.85) translateY(-.5rem) translateX(.15rem) !default;
1074
+ $form-floating-label-disabled-color: $gray-600 !default;
1075
+ $form-floating-transition: opacity .1s ease-in-out, transform .1s ease-in-out !default;
1007
1076
  // scss-docs-end form-floating-variables
1008
1077
 
1009
1078
  // Form validation
@@ -1021,15 +1090,30 @@ $form-feedback-icon-invalid-color: $form-feedback-invalid-color !default;
1021
1090
  $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
1091
  // scss-docs-end form-feedback-variables
1023
1092
 
1093
+ // scss-docs-start form-validation-colors
1094
+ $form-valid-color: $form-feedback-valid-color !default;
1095
+ $form-valid-border-color: $form-feedback-valid-color !default;
1096
+ $form-invalid-color: $form-feedback-invalid-color !default;
1097
+ $form-invalid-border-color: $form-feedback-invalid-color !default;
1098
+ // scss-docs-end form-validation-colors
1099
+
1024
1100
  // scss-docs-start form-validation-states
1025
1101
  $form-validation-states: (
1026
1102
  "valid": (
1027
- "color": $form-feedback-valid-color,
1028
- "icon": $form-feedback-icon-valid
1103
+ "color": var(--#{$prefix}form-valid-color),
1104
+ "icon": $form-feedback-icon-valid,
1105
+ "tooltip-color": #fff,
1106
+ "tooltip-bg-color": var(--#{$prefix}success),
1107
+ "focus-box-shadow": 0 0 $input-btn-focus-blur $input-focus-width rgba(var(--#{$prefix}success-rgb), $input-btn-focus-color-opacity),
1108
+ "border-color": var(--#{$prefix}form-valid-border-color),
1029
1109
  ),
1030
1110
  "invalid": (
1031
- "color": $form-feedback-invalid-color,
1032
- "icon": $form-feedback-icon-invalid
1111
+ "color": var(--#{$prefix}form-invalid-color),
1112
+ "icon": $form-feedback-icon-invalid,
1113
+ "tooltip-color": #fff,
1114
+ "tooltip-bg-color": var(--#{$prefix}danger),
1115
+ "focus-box-shadow": 0 0 $input-btn-focus-blur $input-focus-width rgba(var(--#{$prefix}danger-rgb), $input-btn-focus-color-opacity),
1116
+ "border-color": var(--#{$prefix}form-invalid-border-color),
1033
1117
  )
1034
1118
  ) !default;
1035
1119
  // scss-docs-end form-validation-states
@@ -1052,6 +1136,16 @@ $zindex-tooltip: 1080 !default;
1052
1136
  $zindex-toast: 1090 !default;
1053
1137
  // scss-docs-end zindex-stack
1054
1138
 
1139
+ // scss-docs-start zindex-levels-map
1140
+ $zindex-levels: (
1141
+ n1: -1,
1142
+ 0: 0,
1143
+ 1: 1,
1144
+ 2: 2,
1145
+ 3: 3
1146
+ ) !default;
1147
+ // scss-docs-end zindex-levels-map
1148
+
1055
1149
 
1056
1150
  // Navs
1057
1151
 
@@ -1063,19 +1157,24 @@ $nav-link-font-weight: null !default;
1063
1157
  $nav-link-color: var(--#{$prefix}link-color) !default;
1064
1158
  $nav-link-hover-color: var(--#{$prefix}link-hover-color) !default;
1065
1159
  $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;
1160
+ $nav-link-disabled-color: var(--#{$prefix}secondary-color) !default;
1161
+ $nav-link-focus-box-shadow: $focus-ring-box-shadow !default;
1162
+
1163
+ $nav-tabs-border-color: var(--#{$prefix}border-color) !default;
1164
+ $nav-tabs-border-width: var(--#{$prefix}border-width) !default;
1165
+ $nav-tabs-border-radius: var(--#{$prefix}border-radius) !default;
1166
+ $nav-tabs-link-hover-border-color: var(--#{$prefix}secondary-bg) var(--#{$prefix}secondary-bg) $nav-tabs-border-color !default;
1167
+ $nav-tabs-link-active-color: var(--#{$prefix}emphasis-color) !default;
1168
+ $nav-tabs-link-active-bg: var(--#{$prefix}body-bg) !default;
1169
+ $nav-tabs-link-active-border-color: var(--#{$prefix}border-color) var(--#{$prefix}border-color) $nav-tabs-link-active-bg !default;
1170
+
1171
+ $nav-pills-border-radius: var(--#{$prefix}border-radius) !default;
1077
1172
  $nav-pills-link-active-color: $component-active-color !default;
1078
1173
  $nav-pills-link-active-bg: $component-active-bg !default;
1174
+
1175
+ $nav-underline-gap: 1rem !default;
1176
+ $nav-underline-border-width: .125rem !default;
1177
+ $nav-underline-link-active-color: var(--#{$prefix}emphasis-color) !default;
1079
1178
  // scss-docs-end nav-variables
1080
1179
 
1081
1180
 
@@ -1101,12 +1200,13 @@ $navbar-toggler-border-radius: $btn-border-radius !default;
1101
1200
  $navbar-toggler-focus-width: $btn-focus-width !default;
1102
1201
  $navbar-toggler-transition: box-shadow .15s ease-in-out !default;
1103
1202
 
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;
1203
+ $navbar-light-color: rgba(var(--#{$prefix}emphasis-color-rgb), .65) !default;
1204
+ $navbar-light-hover-color: rgba(var(--#{$prefix}emphasis-color-rgb), .8) !default;
1205
+ $navbar-light-active-color: rgba(var(--#{$prefix}emphasis-color-rgb), 1) !default;
1206
+ $navbar-light-disabled-color: rgba(var(--#{$prefix}emphasis-color-rgb), .3) !default;
1207
+ $navbar-light-icon-color: rgba($body-color, .75) !default;
1208
+ $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;
1209
+ $navbar-light-toggler-border-color: rgba(var(--#{$prefix}emphasis-color-rgb), .15) !default;
1110
1210
  $navbar-light-brand-color: $navbar-light-active-color !default;
1111
1211
  $navbar-light-brand-hover-color: $navbar-light-active-color !default;
1112
1212
  // scss-docs-end navbar-variables
@@ -1133,24 +1233,24 @@ $dropdown-padding-x: 0 !default;
1133
1233
  $dropdown-padding-y: .5rem !default;
1134
1234
  $dropdown-spacer: .125rem !default;
1135
1235
  $dropdown-font-size: $font-size-base !default;
1136
- $dropdown-color: $body-color !default;
1137
- $dropdown-bg: $white !default;
1236
+ $dropdown-color: var(--#{$prefix}body-color) !default;
1237
+ $dropdown-bg: var(--#{$prefix}body-bg) !default;
1138
1238
  $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;
1239
+ $dropdown-border-radius: var(--#{$prefix}border-radius) !default;
1240
+ $dropdown-border-width: var(--#{$prefix}border-width) !default;
1241
+ $dropdown-inner-border-radius: calc(#{$dropdown-border-radius} - #{$dropdown-border-width}) !default; // stylelint-disable-line function-disallowed-list
1142
1242
  $dropdown-divider-bg: $dropdown-border-color !default;
1143
1243
  $dropdown-divider-margin-y: $spacer * .5 !default;
1144
1244
  $dropdown-box-shadow: $box-shadow !default;
1145
1245
 
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;
1246
+ $dropdown-link-color: var(--#{$prefix}body-color) !default;
1247
+ $dropdown-link-hover-color: $dropdown-link-color !default;
1248
+ $dropdown-link-hover-bg: var(--#{$prefix}tertiary-bg) !default;
1149
1249
 
1150
1250
  $dropdown-link-active-color: $component-active-color !default;
1151
1251
  $dropdown-link-active-bg: $component-active-bg !default;
1152
1252
 
1153
- $dropdown-link-disabled-color: $gray-500 !default;
1253
+ $dropdown-link-disabled-color: var(--#{$prefix}tertiary-color) !default;
1154
1254
 
1155
1255
  $dropdown-item-padding-y: $spacer * .25 !default;
1156
1256
  $dropdown-item-padding-x: $spacer !default;
@@ -1192,33 +1292,33 @@ $pagination-padding-x-lg: 1.5rem !default;
1192
1292
  $pagination-font-size: $font-size-base !default;
1193
1293
 
1194
1294
  $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;
1295
+ $pagination-bg: var(--#{$prefix}body-bg) !default;
1296
+ $pagination-border-radius: var(--#{$prefix}border-radius) !default;
1297
+ $pagination-border-width: var(--#{$prefix}border-width) !default;
1298
+ $pagination-margin-start: calc(#{$pagination-border-width} * -1) !default; // stylelint-disable-line function-disallowed-list
1299
+ $pagination-border-color: var(--#{$prefix}border-color) !default;
1200
1300
 
1201
1301
  $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;
1302
+ $pagination-focus-bg: var(--#{$prefix}secondary-bg) !default;
1303
+ $pagination-focus-box-shadow: $focus-ring-box-shadow !default;
1204
1304
  $pagination-focus-outline: 0 !default;
1205
1305
 
1206
1306
  $pagination-hover-color: var(--#{$prefix}link-hover-color) !default;
1207
- $pagination-hover-bg: $gray-200 !default;
1208
- $pagination-hover-border-color: $gray-300 !default;
1307
+ $pagination-hover-bg: var(--#{$prefix}tertiary-bg) !default;
1308
+ $pagination-hover-border-color: var(--#{$prefix}border-color) !default; // Todo in v6: remove this?
1209
1309
 
1210
1310
  $pagination-active-color: $component-active-color !default;
1211
1311
  $pagination-active-bg: $component-active-bg !default;
1212
- $pagination-active-border-color: $pagination-active-bg !default;
1312
+ $pagination-active-border-color: $component-active-bg !default;
1213
1313
 
1214
- $pagination-disabled-color: $gray-600 !default;
1215
- $pagination-disabled-bg: $white !default;
1216
- $pagination-disabled-border-color: $gray-300 !default;
1314
+ $pagination-disabled-color: var(--#{$prefix}secondary-color) !default;
1315
+ $pagination-disabled-bg: var(--#{$prefix}secondary-bg) !default;
1316
+ $pagination-disabled-border-color: var(--#{$prefix}border-color) !default;
1217
1317
 
1218
1318
  $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
1319
 
1220
- $pagination-border-radius-sm: $border-radius-sm !default;
1221
- $pagination-border-radius-lg: $border-radius-lg !default;
1320
+ $pagination-border-radius-sm: var(--#{$prefix}border-radius-sm) !default;
1321
+ $pagination-border-radius-lg: var(--#{$prefix}border-radius-lg) !default;
1222
1322
  // scss-docs-end pagination-variables
1223
1323
 
1224
1324
 
@@ -1235,18 +1335,20 @@ $placeholder-opacity-min: .2 !default;
1235
1335
  $card-spacer-y: $spacer !default;
1236
1336
  $card-spacer-x: $spacer !default;
1237
1337
  $card-title-spacer-y: $spacer * .5 !default;
1238
- $card-border-width: $border-width !default;
1338
+ $card-title-color: null !default;
1339
+ $card-subtitle-color: null !default;
1340
+ $card-border-width: var(--#{$prefix}border-width) !default;
1239
1341
  $card-border-color: var(--#{$prefix}border-color-translucent) !default;
1240
- $card-border-radius: $border-radius !default;
1342
+ $card-border-radius: var(--#{$prefix}border-radius) !default;
1241
1343
  $card-box-shadow: null !default;
1242
1344
  $card-inner-border-radius: subtract($card-border-radius, $card-border-width) !default;
1243
1345
  $card-cap-padding-y: $card-spacer-y * .5 !default;
1244
1346
  $card-cap-padding-x: $card-spacer-x !default;
1245
- $card-cap-bg: rgba($black, .03) !default;
1347
+ $card-cap-bg: rgba(var(--#{$prefix}body-color-rgb), .03) !default;
1246
1348
  $card-cap-color: null !default;
1247
1349
  $card-height: null !default;
1248
1350
  $card-color: null !default;
1249
- $card-bg: $white !default;
1351
+ $card-bg: var(--#{$prefix}body-bg) !default;
1250
1352
  $card-img-overlay-padding: $spacer !default;
1251
1353
  $card-group-margin: $grid-gutter-width * .5 !default;
1252
1354
  // scss-docs-end card-variables
@@ -1256,11 +1358,11 @@ $card-group-margin: $grid-gutter-width * .5 !default;
1256
1358
  // scss-docs-start accordion-variables
1257
1359
  $accordion-padding-y: 1rem !default;
1258
1360
  $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;
1361
+ $accordion-color: var(--#{$prefix}body-color) !default;
1362
+ $accordion-bg: var(--#{$prefix}body-bg) !default;
1363
+ $accordion-border-width: var(--#{$prefix}border-width) !default;
1262
1364
  $accordion-border-color: var(--#{$prefix}border-color) !default;
1263
- $accordion-border-radius: $border-radius !default;
1365
+ $accordion-border-radius: var(--#{$prefix}border-radius) !default;
1264
1366
  $accordion-inner-border-radius: subtract($accordion-border-radius, $accordion-border-width) !default;
1265
1367
 
1266
1368
  $accordion-body-padding-y: $accordion-padding-y !default;
@@ -1268,18 +1370,18 @@ $accordion-body-padding-x: $accordion-padding-x !default;
1268
1370
 
1269
1371
  $accordion-button-padding-y: $accordion-padding-y !default;
1270
1372
  $accordion-button-padding-x: $accordion-padding-x !default;
1271
- $accordion-button-color: $accordion-color !default;
1373
+ $accordion-button-color: var(--#{$prefix}body-color) !default;
1272
1374
  $accordion-button-bg: var(--#{$prefix}accordion-bg) !default;
1273
1375
  $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;
1376
+ $accordion-button-active-bg: var(--#{$prefix}primary-bg-subtle) !default;
1377
+ $accordion-button-active-color: var(--#{$prefix}primary-text-emphasis) !default;
1276
1378
 
1277
1379
  $accordion-button-focus-border-color: $input-focus-border-color !default;
1278
1380
  $accordion-button-focus-box-shadow: $btn-focus-box-shadow !default;
1279
1381
 
1280
1382
  $accordion-icon-width: 1.25rem !default;
1281
- $accordion-icon-color: $accordion-button-color !default;
1282
- $accordion-icon-active-color: $accordion-button-active-color !default;
1383
+ $accordion-icon-color: $body-color !default;
1384
+ $accordion-icon-active-color: $primary-text-emphasis !default;
1283
1385
  $accordion-icon-transition: transform .2s ease-in-out !default;
1284
1386
  $accordion-icon-transform: rotate(-180deg) !default;
1285
1387
 
@@ -1292,9 +1394,9 @@ $accordion-button-active-icon: url("data:image/svg+xml,<svg xmlns='http://www.w
1292
1394
  // scss-docs-start tooltip-variables
1293
1395
  $tooltip-font-size: $font-size-sm !default;
1294
1396
  $tooltip-max-width: 200px !default;
1295
- $tooltip-color: $white !default;
1296
- $tooltip-bg: $black !default;
1297
- $tooltip-border-radius: $border-radius !default;
1397
+ $tooltip-color: var(--#{$prefix}body-bg) !default;
1398
+ $tooltip-bg: var(--#{$prefix}emphasis-color) !default;
1399
+ $tooltip-border-radius: var(--#{$prefix}border-radius) !default;
1298
1400
  $tooltip-opacity: .9 !default;
1299
1401
  $tooltip-padding-y: $spacer * .25 !default;
1300
1402
  $tooltip-padding-x: $spacer * .5 !default;
@@ -1322,21 +1424,21 @@ $form-feedback-tooltip-border-radius: $tooltip-border-radius !default;
1322
1424
 
1323
1425
  // scss-docs-start popover-variables
1324
1426
  $popover-font-size: $font-size-sm !default;
1325
- $popover-bg: $white !default;
1427
+ $popover-bg: var(--#{$prefix}body-bg) !default;
1326
1428
  $popover-max-width: 276px !default;
1327
- $popover-border-width: $border-width !default;
1429
+ $popover-border-width: var(--#{$prefix}border-width) !default;
1328
1430
  $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;
1431
+ $popover-border-radius: var(--#{$prefix}border-radius-lg) !default;
1432
+ $popover-inner-border-radius: calc(#{$popover-border-radius} - #{$popover-border-width}) !default; // stylelint-disable-line function-disallowed-list
1331
1433
  $popover-box-shadow: $box-shadow !default;
1332
1434
 
1333
1435
  $popover-header-font-size: $font-size-base !default;
1334
- $popover-header-bg: shade-color($popover-bg, 6%) !default;
1436
+ $popover-header-bg: var(--#{$prefix}secondary-bg) !default;
1335
1437
  $popover-header-color: $headings-color !default;
1336
1438
  $popover-header-padding-y: .5rem !default;
1337
1439
  $popover-header-padding-x: $spacer !default;
1338
1440
 
1339
- $popover-body-color: $body-color !default;
1441
+ $popover-body-color: var(--#{$prefix}body-color) !default;
1340
1442
  $popover-body-padding-y: $spacer !default;
1341
1443
  $popover-body-padding-x: $spacer !default;
1342
1444
 
@@ -1359,16 +1461,16 @@ $toast-padding-x: .75rem !default;
1359
1461
  $toast-padding-y: .5rem !default;
1360
1462
  $toast-font-size: .875rem !default;
1361
1463
  $toast-color: null !default;
1362
- $toast-background-color: rgba($white, .85) !default;
1363
- $toast-border-width: $border-width !default;
1464
+ $toast-background-color: rgba(var(--#{$prefix}body-bg-rgb), .85) !default;
1465
+ $toast-border-width: var(--#{$prefix}border-width) !default;
1364
1466
  $toast-border-color: var(--#{$prefix}border-color-translucent) !default;
1365
- $toast-border-radius: $border-radius !default;
1366
- $toast-box-shadow: $box-shadow !default;
1467
+ $toast-border-radius: var(--#{$prefix}border-radius) !default;
1468
+ $toast-box-shadow: var(--#{$prefix}box-shadow) !default;
1367
1469
  $toast-spacing: $container-padding-x !default;
1368
1470
 
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;
1471
+ $toast-header-color: var(--#{$prefix}secondary-color) !default;
1472
+ $toast-header-background-color: rgba(var(--#{$prefix}body-bg-rgb), .85) !default;
1473
+ $toast-header-border-color: $toast-border-color !default;
1372
1474
  // scss-docs-end toast-variables
1373
1475
 
1374
1476
 
@@ -1380,7 +1482,7 @@ $badge-font-weight: $font-weight-bold !default;
1380
1482
  $badge-color: $white !default;
1381
1483
  $badge-padding-y: .35em !default;
1382
1484
  $badge-padding-x: .65em !default;
1383
- $badge-border-radius: $border-radius !default;
1485
+ $badge-border-radius: var(--#{$prefix}border-radius) !default;
1384
1486
  // scss-docs-end badge-variables
1385
1487
 
1386
1488
 
@@ -1397,10 +1499,10 @@ $modal-dialog-margin-y-sm-up: 1.75rem !default;
1397
1499
  $modal-title-line-height: $line-height-base !default;
1398
1500
 
1399
1501
  $modal-content-color: null !default;
1400
- $modal-content-bg: $white !default;
1502
+ $modal-content-bg: var(--#{$prefix}body-bg) !default;
1401
1503
  $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;
1504
+ $modal-content-border-width: var(--#{$prefix}border-width) !default;
1505
+ $modal-content-border-radius: var(--#{$prefix}border-radius-lg) !default;
1404
1506
  $modal-content-inner-border-radius: subtract($modal-content-border-radius, $modal-content-border-width) !default;
1405
1507
  $modal-content-box-shadow-xs: $box-shadow-sm !default;
1406
1508
  $modal-content-box-shadow-sm-up: $box-shadow !default;
@@ -1438,24 +1540,29 @@ $modal-scale-transform: scale(1.02) !default;
1438
1540
  $alert-padding-y: $spacer !default;
1439
1541
  $alert-padding-x: $spacer !default;
1440
1542
  $alert-margin-bottom: 1rem !default;
1441
- $alert-border-radius: $border-radius !default;
1543
+ $alert-border-radius: var(--#{$prefix}border-radius) !default;
1442
1544
  $alert-link-font-weight: $font-weight-bold !default;
1443
- $alert-border-width: $border-width !default;
1545
+ $alert-border-width: var(--#{$prefix}border-width) !default;
1444
1546
  $alert-bg-scale: -80% !default;
1445
1547
  $alert-border-scale: -70% !default;
1446
1548
  $alert-color-scale: 40% !default;
1447
1549
  $alert-dismissible-padding-r: $alert-padding-x * 3 !default; // 3x covers width of x plus default padding on either side
1448
1550
  // scss-docs-end alert-variables
1449
1551
 
1552
+ // fusv-disable
1553
+ $alert-bg-scale: -80% !default; // Deprecated in v5.2.0, to be removed in v6
1554
+ $alert-border-scale: -70% !default; // Deprecated in v5.2.0, to be removed in v6
1555
+ $alert-color-scale: 40% !default; // Deprecated in v5.2.0, to be removed in v6
1556
+ // fusv-enable
1450
1557
 
1451
1558
  // Progress bars
1452
1559
 
1453
1560
  // scss-docs-start progress-variables
1454
1561
  $progress-height: 1rem !default;
1455
1562
  $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;
1563
+ $progress-bg: var(--#{$prefix}secondary-bg) !default;
1564
+ $progress-border-radius: var(--#{$prefix}border-radius) !default;
1565
+ $progress-box-shadow: var(--#{$prefix}box-shadow-inset) !default;
1459
1566
  $progress-bar-color: $white !default;
1460
1567
  $progress-bar-bg: $primary !default;
1461
1568
  $progress-bar-animation-timing: 1s linear infinite !default;
@@ -1466,30 +1573,32 @@ $progress-bar-transition: width .6s ease !default;
1466
1573
  // List group
1467
1574
 
1468
1575
  // 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;
1576
+ $list-group-color: var(--#{$prefix}body-color) !default;
1577
+ $list-group-bg: var(--#{$prefix}body-bg) !default;
1578
+ $list-group-border-color: var(--#{$prefix}border-color) !default;
1579
+ $list-group-border-width: var(--#{$prefix}border-width) !default;
1580
+ $list-group-border-radius: var(--#{$prefix}border-radius) !default;
1474
1581
 
1475
1582
  $list-group-item-padding-y: $spacer * .5 !default;
1476
1583
  $list-group-item-padding-x: $spacer !default;
1477
- $list-group-item-bg-scale: -80% !default;
1478
- $list-group-item-color-scale: 40% !default;
1584
+ // fusv-disable
1585
+ $list-group-item-bg-scale: -80% !default; // Deprecated in v5.3.0
1586
+ $list-group-item-color-scale: 40% !default; // Deprecated in v5.3.0
1587
+ // fusv-enable
1479
1588
 
1480
- $list-group-hover-bg: $gray-100 !default;
1589
+ $list-group-hover-bg: var(--#{$prefix}tertiary-bg) !default;
1481
1590
  $list-group-active-color: $component-active-color !default;
1482
1591
  $list-group-active-bg: $component-active-bg !default;
1483
1592
  $list-group-active-border-color: $list-group-active-bg !default;
1484
1593
 
1485
- $list-group-disabled-color: $gray-600 !default;
1594
+ $list-group-disabled-color: var(--#{$prefix}secondary-color) !default;
1486
1595
  $list-group-disabled-bg: $list-group-bg !default;
1487
1596
 
1488
- $list-group-action-color: $gray-700 !default;
1489
- $list-group-action-hover-color: $list-group-action-color !default;
1597
+ $list-group-action-color: var(--#{$prefix}secondary-color) !default;
1598
+ $list-group-action-hover-color: var(--#{$prefix}emphasis-color) !default;
1490
1599
 
1491
- $list-group-action-active-color: $body-color !default;
1492
- $list-group-action-active-bg: $gray-200 !default;
1600
+ $list-group-action-active-color: var(--#{$prefix}body-color) !default;
1601
+ $list-group-action-active-bg: var(--#{$prefix}secondary-bg) !default;
1493
1602
  // scss-docs-end list-group-variables
1494
1603
 
1495
1604
 
@@ -1497,11 +1606,11 @@ $list-group-action-active-bg: $gray-200 !default;
1497
1606
 
1498
1607
  // scss-docs-start thumbnail-variables
1499
1608
  $thumbnail-padding: .25rem !default;
1500
- $thumbnail-bg: $body-bg !default;
1501
- $thumbnail-border-width: $border-width !default;
1609
+ $thumbnail-bg: var(--#{$prefix}body-bg) !default;
1610
+ $thumbnail-border-width: var(--#{$prefix}border-width) !default;
1502
1611
  $thumbnail-border-color: var(--#{$prefix}border-color) !default;
1503
- $thumbnail-border-radius: $border-radius !default;
1504
- $thumbnail-box-shadow: $box-shadow-sm !default;
1612
+ $thumbnail-border-radius: var(--#{$prefix}border-radius) !default;
1613
+ $thumbnail-box-shadow: var(--#{$prefix}box-shadow-sm) !default;
1505
1614
  // scss-docs-end thumbnail-variables
1506
1615
 
1507
1616
 
@@ -1509,7 +1618,7 @@ $thumbnail-box-shadow: $box-shadow-sm !default;
1509
1618
 
1510
1619
  // scss-docs-start figure-variables
1511
1620
  $figure-caption-font-size: $small-font-size !default;
1512
- $figure-caption-color: $gray-600 !default;
1621
+ $figure-caption-color: var(--#{$prefix}secondary-color) !default;
1513
1622
  // scss-docs-end figure-variables
1514
1623
 
1515
1624
 
@@ -1522,8 +1631,8 @@ $breadcrumb-padding-x: 0 !default;
1522
1631
  $breadcrumb-item-padding-x: .5rem !default;
1523
1632
  $breadcrumb-margin-bottom: 1rem !default;
1524
1633
  $breadcrumb-bg: null !default;
1525
- $breadcrumb-divider-color: $gray-600 !default;
1526
- $breadcrumb-active-color: $gray-600 !default;
1634
+ $breadcrumb-divider-color: var(--#{$prefix}secondary-color) !default;
1635
+ $breadcrumb-active-color: var(--#{$prefix}secondary-color) !default;
1527
1636
  $breadcrumb-divider: quote("/") !default;
1528
1637
  $breadcrumb-divider-flipped: $breadcrumb-divider !default;
1529
1638
  $breadcrumb-border-radius: null !default;
@@ -1592,7 +1701,7 @@ $btn-close-padding-x: .25em !default;
1592
1701
  $btn-close-padding-y: $btn-close-padding-x !default;
1593
1702
  $btn-close-color: $black !default;
1594
1703
  $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;
1704
+ $btn-close-focus-shadow: $focus-ring-box-shadow !default;
1596
1705
  $btn-close-opacity: .5 !default;
1597
1706
  $btn-close-hover-opacity: .75 !default;
1598
1707
  $btn-close-focus-opacity: 1 !default;
@@ -1612,8 +1721,8 @@ $offcanvas-transition-duration: .3s !default;
1612
1721
  $offcanvas-border-color: $modal-content-border-color !default;
1613
1722
  $offcanvas-border-width: $modal-content-border-width !default;
1614
1723
  $offcanvas-title-line-height: $modal-title-line-height !default;
1615
- $offcanvas-bg-color: $modal-content-bg !default;
1616
- $offcanvas-color: $modal-content-color !default;
1724
+ $offcanvas-bg-color: var(--#{$prefix}body-bg) !default;
1725
+ $offcanvas-color: var(--#{$prefix}body-color) !default;
1617
1726
  $offcanvas-box-shadow: $modal-content-box-shadow-xs !default;
1618
1727
  $offcanvas-backdrop-bg: $modal-backdrop-bg !default;
1619
1728
  $offcanvas-backdrop-opacity: $modal-backdrop-opacity !default;