paraqeet 0.7.0 → 0.8.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (39) hide show
  1. checksums.yaml +4 -4
  2. data/_sass/_bootstrap-icons.scss +3 -2
  3. data/_sass/bootstrap/_accordion.scss +9 -0
  4. data/_sass/bootstrap/_alert.scss +8 -11
  5. data/_sass/bootstrap/_button-group.scss +2 -2
  6. data/_sass/bootstrap/_card.scss +4 -0
  7. data/_sass/bootstrap/_carousel.scss +13 -1
  8. data/_sass/bootstrap/_close.scss +30 -9
  9. data/_sass/bootstrap/_dropdown.scss +1 -0
  10. data/_sass/bootstrap/_list-group.scss +19 -7
  11. data/_sass/bootstrap/_maps.scss +67 -0
  12. data/_sass/bootstrap/_mixins.scss +1 -2
  13. data/_sass/bootstrap/_navbar.scss +8 -0
  14. data/_sass/bootstrap/_offcanvas.scss +4 -2
  15. data/_sass/bootstrap/_pagination.scss +1 -1
  16. data/_sass/bootstrap/_progress.scss +10 -1
  17. data/_sass/bootstrap/_reboot.scss +3 -3
  18. data/_sass/bootstrap/_root.scss +127 -5
  19. data/_sass/bootstrap/_tables.scss +1 -1
  20. data/_sass/bootstrap/_utilities.scss +110 -9
  21. data/_sass/bootstrap/_variables-dark.scss +70 -0
  22. data/_sass/bootstrap/_variables.scss +198 -129
  23. data/_sass/bootstrap/bootstrap-grid.scss +2 -0
  24. data/_sass/bootstrap/bootstrap-reboot.scss +1 -0
  25. data/_sass/bootstrap/bootstrap-utilities.scss +1 -0
  26. data/_sass/bootstrap/bootstrap.scss +1 -0
  27. data/_sass/bootstrap/forms/_floating-labels.scss +15 -0
  28. data/_sass/bootstrap/forms/_form-check.scss +24 -11
  29. data/_sass/bootstrap/forms/_form-control.scss +7 -0
  30. data/_sass/bootstrap/forms/_form-select.scss +11 -1
  31. data/_sass/bootstrap/forms/_input-group.scss +1 -1
  32. data/_sass/bootstrap/helpers/_colored-links.scss +2 -2
  33. data/_sass/bootstrap/mixins/_alert.scss +4 -1
  34. data/_sass/bootstrap/mixins/_banner.scss +1 -3
  35. data/_sass/bootstrap/mixins/_caret.scss +30 -25
  36. data/_sass/bootstrap/mixins/_color-mode.scss +21 -0
  37. data/_sass/bootstrap/mixins/_forms.scss +8 -7
  38. data/_sass/bootstrap/mixins/_list-group.scss +3 -0
  39. metadata +4 -2
@@ -321,6 +321,33 @@ $theme-colors: (
321
321
  ) !default;
322
322
  // scss-docs-end theme-colors-map
323
323
 
324
+ $primary-text: $blue-600 !default;
325
+ $secondary-text: $gray-600 !default;
326
+ $success-text: $green-600 !default;
327
+ $info-text: $cyan-700 !default;
328
+ $warning-text: $yellow-700 !default;
329
+ $danger-text: $red-600 !default;
330
+ $light-text: $gray-600 !default;
331
+ $dark-text: $gray-700 !default;
332
+
333
+ $primary-bg-subtle: $blue-100 !default;
334
+ $secondary-bg-subtle: $gray-100 !default;
335
+ $success-bg-subtle: $green-100 !default;
336
+ $info-bg-subtle: $cyan-100 !default;
337
+ $warning-bg-subtle: $yellow-100 !default;
338
+ $danger-bg-subtle: $red-100 !default;
339
+ $light-bg-subtle: mix($gray-100, $white) !default;
340
+ $dark-bg-subtle: $gray-400 !default;
341
+
342
+ $primary-border-subtle: $blue-200 !default;
343
+ $secondary-border-subtle: $gray-200 !default;
344
+ $success-border-subtle: $green-200 !default;
345
+ $info-border-subtle: $cyan-200 !default;
346
+ $warning-border-subtle: $yellow-200 !default;
347
+ $danger-border-subtle: $red-200 !default;
348
+ $light-border-subtle: $gray-200 !default;
349
+ $dark-border-subtle: $gray-500 !default;
350
+
324
351
  // Characters which are escaped by the escape-svg function
325
352
  $escaped-characters: (
326
353
  ("<", "%3c"),
@@ -351,6 +378,9 @@ $enable-negative-margins: false !default;
351
378
  $enable-deprecation-messages: true !default;
352
379
  $enable-important-utilities: true !default;
353
380
 
381
+ $enable-dark-mode: true !default;
382
+ $color-mode-type: data !default; // `data` or `media-query`
383
+
354
384
  // Prefix for :root CSS variables
355
385
 
356
386
  $variable-prefix: bs- !default; // Deprecated in v5.2.0 for the shorter `$prefix`
@@ -398,9 +428,19 @@ $position-values: (
398
428
  //
399
429
  // Settings for the `<body>` element.
400
430
 
401
- $body-bg: $white !default;
402
- $body-color: $gray-900 !default;
403
431
  $body-text-align: null !default;
432
+ $body-color: $gray-900 !default;
433
+ $body-bg: $white !default;
434
+
435
+ $body-emphasis-color: $black !default;
436
+
437
+ $body-secondary-color: rgba($body-color, .75) !default;
438
+ $body-secondary-bg: $gray-200 !default;
439
+
440
+ $body-tertiary-color: rgba($body-color, .5) !default;
441
+ $body-tertiary-bg: $gray-100 !default;
442
+
443
+ $emphasis-color: $black !default;
404
444
 
405
445
  // Links
406
446
  //
@@ -485,7 +525,6 @@ $border-widths: (
485
525
  4: 4px,
486
526
  5: 5px
487
527
  ) !default;
488
-
489
528
  $border-style: solid !default;
490
529
  $border-color: $gray-300 !default;
491
530
  $border-color-translucent: rgba($black, .175) !default;
@@ -501,10 +540,10 @@ $border-radius-pill: 50rem !default;
501
540
  // scss-docs-end border-radius-variables
502
541
 
503
542
  // scss-docs-start box-shadow-variables
504
- $box-shadow: 0 .5rem 1rem rgba($black, .15) !default;
505
- $box-shadow-sm: 0 .125rem .25rem rgba($black, .075) !default;
506
- $box-shadow-lg: 0 1rem 3rem rgba($black, .175) !default;
507
- $box-shadow-inset: inset 0 1px 2px rgba($black, .075) !default;
543
+ $box-shadow: 0 .5rem 1rem rgba(var(--#{$prefix}body-color-rgb), .15) !default;
544
+ $box-shadow-sm: 0 .125rem .25rem rgba(var(--#{$prefix}body-color-rgb), .075) !default;
545
+ $box-shadow-lg: 0 1rem 3rem rgba(var(--#{$prefix}body-color-rgb), .175) !default;
546
+ $box-shadow-inset: inset 0 1px 2px rgba(var(--#{$prefix}body-color-rgb), .075) !default;
508
547
  // scss-docs-end box-shadow-variables
509
548
 
510
549
  $component-active-color: $white !default;
@@ -556,6 +595,7 @@ $font-size-lg: $font-size-base * 1.25 !default;
556
595
  $font-weight-lighter: lighter !default;
557
596
  $font-weight-light: 300 !default;
558
597
  $font-weight-normal: 400 !default;
598
+ $font-weight-medium: 500 !default;
559
599
  $font-weight-semibold: 600 !default;
560
600
  $font-weight-bold: 700 !default;
561
601
  $font-weight-bolder: bolder !default;
@@ -618,7 +658,7 @@ $small-font-size: .875em !default;
618
658
 
619
659
  $sub-sup-font-size: .75em !default;
620
660
 
621
- $text-muted: $gray-600 !default;
661
+ $text-muted: var(--#{$prefix}secondary-color) !default;
622
662
 
623
663
  $initialism-font-size: $small-font-size !default;
624
664
 
@@ -636,7 +676,7 @@ $hr-height: null !default; // Deprecated in v5.2.0
636
676
  // fusv-enable
637
677
 
638
678
  $hr-border-color: null !default; // Allows for inherited colors
639
- $hr-border-width: $border-width !default;
679
+ $hr-border-width: var(--#{$prefix}border-width) !default;
640
680
  $hr-opacity: .25 !default;
641
681
 
642
682
  $legend-margin-bottom: .5rem !default;
@@ -683,7 +723,7 @@ $table-hover-bg-factor: .075 !default;
683
723
  $table-hover-bg: rgba($black, $table-hover-bg-factor) !default;
684
724
 
685
725
  $table-border-factor: .1 !default;
686
- $table-border-width: $border-width !default;
726
+ $table-border-width: var(--#{$prefix}border-width) !default;
687
727
  $table-border-color: var(--#{$prefix}border-color) !default;
688
728
 
689
729
  $table-striped-order: odd !default;
@@ -735,7 +775,7 @@ $input-btn-padding-y-lg: .5rem !default;
735
775
  $input-btn-padding-x-lg: 1rem !default;
736
776
  $input-btn-font-size-lg: $font-size-lg !default;
737
777
 
738
- $input-btn-border-width: $border-width !default;
778
+ $input-btn-border-width: var(--#{$prefix}border-width) !default;
739
779
  // scss-docs-end input-btn-variables
740
780
 
741
781
 
@@ -824,13 +864,13 @@ $input-padding-y-lg: $input-btn-padding-y-lg !default;
824
864
  $input-padding-x-lg: $input-btn-padding-x-lg !default;
825
865
  $input-font-size-lg: $input-btn-font-size-lg !default;
826
866
 
827
- $input-bg: $body-bg !default;
867
+ $input-bg: var(--#{$prefix}form-control-bg) !default;
828
868
  $input-disabled-color: null !default;
829
- $input-disabled-bg: $gray-200 !default;
869
+ $input-disabled-bg: var(--#{$prefix}form-control-disabled-bg) !default;
830
870
  $input-disabled-border-color: null !default;
831
871
 
832
- $input-color: $body-color !default;
833
- $input-border-color: $gray-400 !default;
872
+ $input-color: var(--#{$prefix}body-color) !default;
873
+ $input-border-color: var(--#{$prefix}border-color) !default; //$gray-400
834
874
  $input-border-width: $input-btn-border-width !default;
835
875
  $input-box-shadow: $box-shadow-inset !default;
836
876
 
@@ -844,10 +884,10 @@ $input-focus-color: $input-color !default;
844
884
  $input-focus-width: $input-btn-focus-width !default;
845
885
  $input-focus-box-shadow: $input-btn-focus-box-shadow !default;
846
886
 
847
- $input-placeholder-color: $gray-600 !default;
848
- $input-plaintext-color: $body-color !default;
887
+ $input-placeholder-color: var(--#{$prefix}secondary-color) !default;
888
+ $input-plaintext-color: var(--#{$prefix}body-color) !default;
849
889
 
850
- $input-height-border: $input-border-width * 2 !default;
890
+ $input-height-border: calc($input-border-width * 2) !default; // stylelint-disable-line function-disallowed-list
851
891
 
852
892
  $input-height-inner: add($input-line-height * 1em, $input-padding-y * 2) !default;
853
893
  $input-height-inner-half: add($input-line-height * .5em, $input-padding-y) !default;
@@ -874,7 +914,7 @@ $form-check-transition: null !default;
874
914
  $form-check-input-active-filter: brightness(90%) !default;
875
915
 
876
916
  $form-check-input-bg: $input-bg !default;
877
- $form-check-input-border: 1px solid rgba($black, .25) !default;
917
+ $form-check-input-border: var(--#{$prefix}border-width) solid var(--#{$prefix}border-color) !default;
878
918
  $form-check-input-border-radius: .25em !default;
879
919
  $form-check-radio-border-radius: 50% !default;
880
920
  $form-check-input-focus-border: $input-focus-border-color !default;
@@ -919,7 +959,7 @@ $input-group-addon-padding-y: $input-padding-y !default;
919
959
  $input-group-addon-padding-x: $input-padding-x !default;
920
960
  $input-group-addon-font-weight: $input-font-weight !default;
921
961
  $input-group-addon-color: $input-color !default;
922
- $input-group-addon-bg: $gray-200 !default;
962
+ $input-group-addon-bg: var(--#{$prefix}tertiary-bg) !default;
923
963
  $input-group-addon-border-color: $input-border-color !default;
924
964
  // scss-docs-end input-group-variables
925
965
 
@@ -934,7 +974,7 @@ $form-select-line-height: $input-line-height !default;
934
974
  $form-select-color: $input-color !default;
935
975
  $form-select-bg: $input-bg !default;
936
976
  $form-select-disabled-color: null !default;
937
- $form-select-disabled-bg: $gray-200 !default;
977
+ $form-select-disabled-bg: $input-disabled-bg !default;
938
978
  $form-select-disabled-border-color: $input-disabled-border-color !default;
939
979
  $form-select-bg-position: right $form-select-padding-x center !default;
940
980
  $form-select-bg-size: 16px 12px !default; // In pixels because image dimensions
@@ -971,7 +1011,7 @@ $form-select-transition: $input-transition !default;
971
1011
  $form-range-track-width: 100% !default;
972
1012
  $form-range-track-height: .5rem !default;
973
1013
  $form-range-track-cursor: pointer !default;
974
- $form-range-track-bg: $gray-300 !default;
1014
+ $form-range-track-bg: var(--#{$prefix}tertiary-bg) !default;
975
1015
  $form-range-track-border-radius: 1rem !default;
976
1016
  $form-range-track-box-shadow: $box-shadow-inset !default;
977
1017
 
@@ -984,26 +1024,28 @@ $form-range-thumb-box-shadow: 0 .1rem .25rem rgba($black, .1) !defa
984
1024
  $form-range-thumb-focus-box-shadow: 0 0 0 1px $body-bg, $input-focus-box-shadow !default;
985
1025
  $form-range-thumb-focus-box-shadow-width: $input-focus-width !default; // For focus box shadow issue in Edge
986
1026
  $form-range-thumb-active-bg: tint-color($component-active-bg, 70%) !default;
987
- $form-range-thumb-disabled-bg: $gray-500 !default;
1027
+ $form-range-thumb-disabled-bg: var(--#{$prefix}secondary-color) !default;
988
1028
  $form-range-thumb-transition: background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
989
1029
  // scss-docs-end form-range-variables
990
1030
 
991
1031
  // scss-docs-start form-file-variables
992
1032
  $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;
1033
+ $form-file-button-bg: var(--#{$prefix}tertiary-bg) !default;
1034
+ $form-file-button-hover-bg: var(--#{$prefix}secondary-bg) !default;
995
1035
  // scss-docs-end form-file-variables
996
1036
 
997
1037
  // 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;
1038
+ $form-floating-height: add(3.5rem, $input-height-border) !default;
1039
+ $form-floating-line-height: 1.25 !default;
1040
+ $form-floating-padding-x: $input-padding-x !default;
1041
+ $form-floating-padding-y: 1rem !default;
1042
+ $form-floating-input-padding-t: 1.625rem !default;
1043
+ $form-floating-input-padding-b: .625rem !default;
1044
+ $form-floating-label-height: 1.875em !default;
1045
+ $form-floating-label-opacity: .65 !default;
1046
+ $form-floating-label-transform: scale(.85) translateY(-.5rem) translateX(.15rem) !default;
1047
+ $form-floating-label-disabled-color: $gray-600 !default;
1048
+ $form-floating-transition: opacity .1s ease-in-out, transform .1s ease-in-out !default;
1007
1049
  // scss-docs-end form-floating-variables
1008
1050
 
1009
1051
  // Form validation
@@ -1024,12 +1066,20 @@ $form-feedback-icon-invalid: url("data:image/svg+xml,<svg xmlns='http://w
1024
1066
  // scss-docs-start form-validation-states
1025
1067
  $form-validation-states: (
1026
1068
  "valid": (
1027
- "color": $form-feedback-valid-color,
1028
- "icon": $form-feedback-icon-valid
1069
+ "color": var(--#{$prefix}success-text),
1070
+ "icon": $form-feedback-icon-valid,
1071
+ "tooltip-color": #fff,
1072
+ "tooltip-bg-color": var(--#{$prefix}success),
1073
+ "focus-box-shadow": 0 0 $input-btn-focus-blur $input-focus-width rgba(var(--#{$prefix}success-rgb), $input-btn-focus-color-opacity),
1074
+ "border-color": var(--#{$prefix}success),
1029
1075
  ),
1030
1076
  "invalid": (
1031
- "color": $form-feedback-invalid-color,
1032
- "icon": $form-feedback-icon-invalid
1077
+ "color": var(--#{$prefix}danger-text),
1078
+ "icon": $form-feedback-icon-invalid,
1079
+ "tooltip-color": #fff,
1080
+ "tooltip-bg-color": var(--#{$prefix}danger),
1081
+ "focus-box-shadow": 0 0 $input-btn-focus-blur $input-focus-width rgba(var(--#{$prefix}danger-rgb), $input-btn-focus-color-opacity),
1082
+ "border-color": var(--#{$prefix}danger),
1033
1083
  )
1034
1084
  ) !default;
1035
1085
  // scss-docs-end form-validation-states
@@ -1052,6 +1102,16 @@ $zindex-tooltip: 1080 !default;
1052
1102
  $zindex-toast: 1090 !default;
1053
1103
  // scss-docs-end zindex-stack
1054
1104
 
1105
+ // scss-docs-start zindex-levels-map
1106
+ $zindex-levels: (
1107
+ n1: -1,
1108
+ 0: 0,
1109
+ 1: 1,
1110
+ 2: 2,
1111
+ 3: 3
1112
+ ) !default;
1113
+ // scss-docs-end zindex-levels-map
1114
+
1055
1115
 
1056
1116
  // Navs
1057
1117
 
@@ -1063,15 +1123,15 @@ $nav-link-font-weight: null !default;
1063
1123
  $nav-link-color: var(--#{$prefix}link-color) !default;
1064
1124
  $nav-link-hover-color: var(--#{$prefix}link-hover-color) !default;
1065
1125
  $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;
1126
+ $nav-link-disabled-color: var(--#{$prefix}secondary-color) !default;
1067
1127
 
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;
1128
+ $nav-tabs-border-color: var(--#{$prefix}border-color) !default;
1129
+ $nav-tabs-border-width: var(--#{$prefix}border-width) !default;
1130
+ $nav-tabs-border-radius: var(--#{$prefix}border-radius) !default;
1131
+ $nav-tabs-link-hover-border-color: var(--#{$prefix}secondary-bg) var(--#{$prefix}secondary-bg) $nav-tabs-border-color !default;
1132
+ $nav-tabs-link-active-color: var(--#{$prefix}emphasis-color) !default;
1133
+ $nav-tabs-link-active-bg: var(--#{$prefix}body-bg) !default;
1134
+ $nav-tabs-link-active-border-color: var(--#{$prefix}border-color) var(--#{$prefix}border-color) $nav-tabs-link-active-bg !default;
1075
1135
 
1076
1136
  $nav-pills-border-radius: $border-radius !default;
1077
1137
  $nav-pills-link-active-color: $component-active-color !default;
@@ -1101,12 +1161,12 @@ $navbar-toggler-border-radius: $btn-border-radius !default;
1101
1161
  $navbar-toggler-focus-width: $btn-focus-width !default;
1102
1162
  $navbar-toggler-transition: box-shadow .15s ease-in-out !default;
1103
1163
 
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;
1164
+ $navbar-light-color: rgba(var(--#{$prefix}emphasis-color-rgb), .65) !default;
1165
+ $navbar-light-hover-color: rgba(var(--#{$prefix}emphasis-color-rgb), .8) !default;
1166
+ $navbar-light-active-color: rgba(var(--#{$prefix}emphasis-color-rgb), 1) !default;
1167
+ $navbar-light-disabled-color: rgba(var(--#{$prefix}emphasis-color-rgb), .3) !default;
1168
+ $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='#{rgba($body-color, .75)}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>") !default;
1169
+ $navbar-light-toggler-border-color: rgba(var(--#{$prefix}emphasis-color-rgb), .15) !default;
1110
1170
  $navbar-light-brand-color: $navbar-light-active-color !default;
1111
1171
  $navbar-light-brand-hover-color: $navbar-light-active-color !default;
1112
1172
  // scss-docs-end navbar-variables
@@ -1133,19 +1193,19 @@ $dropdown-padding-x: 0 !default;
1133
1193
  $dropdown-padding-y: .5rem !default;
1134
1194
  $dropdown-spacer: .125rem !default;
1135
1195
  $dropdown-font-size: $font-size-base !default;
1136
- $dropdown-color: $body-color !default;
1137
- $dropdown-bg: $white !default;
1196
+ $dropdown-color: var(--#{$prefix}body-color) !default;
1197
+ $dropdown-bg: var(--#{$prefix}body-bg) !default;
1138
1198
  $dropdown-border-color: var(--#{$prefix}border-color-translucent) !default;
1139
1199
  $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;
1200
+ $dropdown-border-width: var(--#{$prefix}border-width) !default;
1201
+ $dropdown-inner-border-radius: calc($dropdown-border-radius - $dropdown-border-width) !default; // stylelint-disable-line function-disallowed-list
1142
1202
  $dropdown-divider-bg: $dropdown-border-color !default;
1143
1203
  $dropdown-divider-margin-y: $spacer * .5 !default;
1144
1204
  $dropdown-box-shadow: $box-shadow !default;
1145
1205
 
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;
1206
+ $dropdown-link-color: var(--#{$prefix}body-color) !default;
1207
+ $dropdown-link-hover-color: $dropdown-link-color !default;
1208
+ $dropdown-link-hover-bg: var(--#{$prefix}tertiary-bg) !default;
1149
1209
 
1150
1210
  $dropdown-link-active-color: $component-active-color !default;
1151
1211
  $dropdown-link-active-bg: $component-active-bg !default;
@@ -1192,28 +1252,28 @@ $pagination-padding-x-lg: 1.5rem !default;
1192
1252
  $pagination-font-size: $font-size-base !default;
1193
1253
 
1194
1254
  $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;
1255
+ $pagination-bg: var(--#{$prefix}body-bg) !default;
1256
+ $pagination-border-radius: var(--#{$prefix}border-radius) !default;
1257
+ $pagination-border-width: var(--#{$prefix}border-width) !default;
1258
+ $pagination-margin-start: calc($pagination-border-width * -1) !default; // stylelint-disable-line function-disallowed-list
1259
+ $pagination-border-color: var(--#{$prefix}border-color) !default;
1200
1260
 
1201
1261
  $pagination-focus-color: var(--#{$prefix}link-hover-color) !default;
1202
- $pagination-focus-bg: $gray-200 !default;
1262
+ $pagination-focus-bg: var(--#{$prefix}secondary-bg) !default;
1203
1263
  $pagination-focus-box-shadow: $input-btn-focus-box-shadow !default;
1204
1264
  $pagination-focus-outline: 0 !default;
1205
1265
 
1206
1266
  $pagination-hover-color: var(--#{$prefix}link-hover-color) !default;
1207
- $pagination-hover-bg: $gray-200 !default;
1208
- $pagination-hover-border-color: $gray-300 !default;
1267
+ $pagination-hover-bg: var(--#{$prefix}tertiary-bg) !default;
1268
+ $pagination-hover-border-color: var(--#{$prefix}border-color) !default; // Todo in v6: remove this?
1209
1269
 
1210
1270
  $pagination-active-color: $component-active-color !default;
1211
1271
  $pagination-active-bg: $component-active-bg !default;
1212
- $pagination-active-border-color: $pagination-active-bg !default;
1272
+ $pagination-active-border-color: $component-active-bg !default;
1213
1273
 
1214
- $pagination-disabled-color: $gray-600 !default;
1215
- $pagination-disabled-bg: $white !default;
1216
- $pagination-disabled-border-color: $gray-300 !default;
1274
+ $pagination-disabled-color: var(--#{$prefix}secondary-color) !default;
1275
+ $pagination-disabled-bg: var(--#{$prefix}secondary-bg) !default;
1276
+ $pagination-disabled-border-color: var(--#{$prefix}border-color) !default;
1217
1277
 
1218
1278
  $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
1279
 
@@ -1235,18 +1295,20 @@ $placeholder-opacity-min: .2 !default;
1235
1295
  $card-spacer-y: $spacer !default;
1236
1296
  $card-spacer-x: $spacer !default;
1237
1297
  $card-title-spacer-y: $spacer * .5 !default;
1238
- $card-border-width: $border-width !default;
1298
+ $card-title-color: null !default;
1299
+ $card-subtitle-color: null !default;
1300
+ $card-border-width: var(--#{$prefix}border-width) !default;
1239
1301
  $card-border-color: var(--#{$prefix}border-color-translucent) !default;
1240
- $card-border-radius: $border-radius !default;
1302
+ $card-border-radius: var(--#{$prefix}border-radius) !default;
1241
1303
  $card-box-shadow: null !default;
1242
1304
  $card-inner-border-radius: subtract($card-border-radius, $card-border-width) !default;
1243
1305
  $card-cap-padding-y: $card-spacer-y * .5 !default;
1244
1306
  $card-cap-padding-x: $card-spacer-x !default;
1245
- $card-cap-bg: rgba($black, .03) !default;
1307
+ $card-cap-bg: rgba(var(--#{$prefix}body-color-rgb), .03) !default;
1246
1308
  $card-cap-color: null !default;
1247
1309
  $card-height: null !default;
1248
1310
  $card-color: null !default;
1249
- $card-bg: $white !default;
1311
+ $card-bg: var(--#{$prefix}body-bg) !default;
1250
1312
  $card-img-overlay-padding: $spacer !default;
1251
1313
  $card-group-margin: $grid-gutter-width * .5 !default;
1252
1314
  // scss-docs-end card-variables
@@ -1256,11 +1318,11 @@ $card-group-margin: $grid-gutter-width * .5 !default;
1256
1318
  // scss-docs-start accordion-variables
1257
1319
  $accordion-padding-y: 1rem !default;
1258
1320
  $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;
1321
+ $accordion-color: var(--#{$prefix}body-color) !default; // Sass variable because of $accordion-button-icon
1322
+ $accordion-bg: var(--#{$prefix}body-bg) !default;
1323
+ $accordion-border-width: var(--#{$prefix}border-width) !default;
1262
1324
  $accordion-border-color: var(--#{$prefix}border-color) !default;
1263
- $accordion-border-radius: $border-radius !default;
1325
+ $accordion-border-radius: var(--#{$prefix}border-radius) !default;
1264
1326
  $accordion-inner-border-radius: subtract($accordion-border-radius, $accordion-border-width) !default;
1265
1327
 
1266
1328
  $accordion-body-padding-y: $accordion-padding-y !default;
@@ -1268,18 +1330,18 @@ $accordion-body-padding-x: $accordion-padding-x !default;
1268
1330
 
1269
1331
  $accordion-button-padding-y: $accordion-padding-y !default;
1270
1332
  $accordion-button-padding-x: $accordion-padding-x !default;
1271
- $accordion-button-color: $accordion-color !default;
1333
+ $accordion-button-color: var(--#{$prefix}body-color) !default;
1272
1334
  $accordion-button-bg: var(--#{$prefix}accordion-bg) !default;
1273
1335
  $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;
1336
+ $accordion-button-active-bg: var(--#{$prefix}primary-bg-subtle) !default;
1337
+ $accordion-button-active-color: var(--#{$prefix}primary-text) !default;
1276
1338
 
1277
1339
  $accordion-button-focus-border-color: $input-focus-border-color !default;
1278
1340
  $accordion-button-focus-box-shadow: $btn-focus-box-shadow !default;
1279
1341
 
1280
1342
  $accordion-icon-width: 1.25rem !default;
1281
- $accordion-icon-color: $accordion-button-color !default;
1282
- $accordion-icon-active-color: $accordion-button-active-color !default;
1343
+ $accordion-icon-color: $body-color !default;
1344
+ $accordion-icon-active-color: $primary-text !default;
1283
1345
  $accordion-icon-transition: transform .2s ease-in-out !default;
1284
1346
  $accordion-icon-transform: rotate(-180deg) !default;
1285
1347
 
@@ -1292,9 +1354,9 @@ $accordion-button-active-icon: url("data:image/svg+xml,<svg xmlns='http://www.w
1292
1354
  // scss-docs-start tooltip-variables
1293
1355
  $tooltip-font-size: $font-size-sm !default;
1294
1356
  $tooltip-max-width: 200px !default;
1295
- $tooltip-color: $white !default;
1296
- $tooltip-bg: $black !default;
1297
- $tooltip-border-radius: $border-radius !default;
1357
+ $tooltip-color: var(--#{$prefix}body-bg) !default;
1358
+ $tooltip-bg: var(--#{$prefix}emphasis-color) !default;
1359
+ $tooltip-border-radius: var(--#{$prefix}border-radius) !default;
1298
1360
  $tooltip-opacity: .9 !default;
1299
1361
  $tooltip-padding-y: $spacer * .25 !default;
1300
1362
  $tooltip-padding-x: $spacer * .5 !default;
@@ -1322,21 +1384,21 @@ $form-feedback-tooltip-border-radius: $tooltip-border-radius !default;
1322
1384
 
1323
1385
  // scss-docs-start popover-variables
1324
1386
  $popover-font-size: $font-size-sm !default;
1325
- $popover-bg: $white !default;
1387
+ $popover-bg: var(--#{$prefix}body-bg) !default;
1326
1388
  $popover-max-width: 276px !default;
1327
- $popover-border-width: $border-width !default;
1389
+ $popover-border-width: var(--#{$prefix}border-width) !default;
1328
1390
  $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;
1391
+ $popover-border-radius: var(--#{$prefix}border-radius-lg) !default;
1392
+ $popover-inner-border-radius: calc($popover-border-radius - $popover-border-width) !default; // stylelint-disable-line function-disallowed-list
1331
1393
  $popover-box-shadow: $box-shadow !default;
1332
1394
 
1333
1395
  $popover-header-font-size: $font-size-base !default;
1334
- $popover-header-bg: shade-color($popover-bg, 6%) !default;
1396
+ $popover-header-bg: var(--#{$prefix}secondary-bg) !default;
1335
1397
  $popover-header-color: $headings-color !default;
1336
1398
  $popover-header-padding-y: .5rem !default;
1337
1399
  $popover-header-padding-x: $spacer !default;
1338
1400
 
1339
- $popover-body-color: $body-color !default;
1401
+ $popover-body-color: var(--#{$prefix}body-color) !default;
1340
1402
  $popover-body-padding-y: $spacer !default;
1341
1403
  $popover-body-padding-x: $spacer !default;
1342
1404
 
@@ -1359,16 +1421,16 @@ $toast-padding-x: .75rem !default;
1359
1421
  $toast-padding-y: .5rem !default;
1360
1422
  $toast-font-size: .875rem !default;
1361
1423
  $toast-color: null !default;
1362
- $toast-background-color: rgba($white, .85) !default;
1363
- $toast-border-width: $border-width !default;
1424
+ $toast-background-color: rgba(var(--#{$prefix}body-bg-rgb), .85) !default;
1425
+ $toast-border-width: var(--#{$prefix}border-width) !default;
1364
1426
  $toast-border-color: var(--#{$prefix}border-color-translucent) !default;
1365
- $toast-border-radius: $border-radius !default;
1366
- $toast-box-shadow: $box-shadow !default;
1427
+ $toast-border-radius: var(--#{$prefix}border-radius) !default;
1428
+ $toast-box-shadow: var(--#{$prefix}box-shadow) !default;
1367
1429
  $toast-spacing: $container-padding-x !default;
1368
1430
 
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;
1431
+ $toast-header-color: var(--#{$prefix}secondary-color) !default;
1432
+ $toast-header-background-color: rgba(var(--#{$prefix}body-bg-rgb), .85) !default;
1433
+ $toast-header-border-color: $toast-border-color !default;
1372
1434
  // scss-docs-end toast-variables
1373
1435
 
1374
1436
 
@@ -1397,10 +1459,10 @@ $modal-dialog-margin-y-sm-up: 1.75rem !default;
1397
1459
  $modal-title-line-height: $line-height-base !default;
1398
1460
 
1399
1461
  $modal-content-color: null !default;
1400
- $modal-content-bg: $white !default;
1462
+ $modal-content-bg: var(--#{$prefix}body-bg) !default;
1401
1463
  $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;
1464
+ $modal-content-border-width: var(--#{$prefix}border-width) !default;
1465
+ $modal-content-border-radius: var(--#{$prefix}border-radius-lg) !default;
1404
1466
  $modal-content-inner-border-radius: subtract($modal-content-border-radius, $modal-content-border-width) !default;
1405
1467
  $modal-content-box-shadow-xs: $box-shadow-sm !default;
1406
1468
  $modal-content-box-shadow-sm-up: $box-shadow !default;
@@ -1440,22 +1502,27 @@ $alert-padding-x: $spacer !default;
1440
1502
  $alert-margin-bottom: 1rem !default;
1441
1503
  $alert-border-radius: $border-radius !default;
1442
1504
  $alert-link-font-weight: $font-weight-bold !default;
1443
- $alert-border-width: $border-width !default;
1505
+ $alert-border-width: var(--#{$prefix}border-width) !default;
1444
1506
  $alert-bg-scale: -80% !default;
1445
1507
  $alert-border-scale: -70% !default;
1446
1508
  $alert-color-scale: 40% !default;
1447
1509
  $alert-dismissible-padding-r: $alert-padding-x * 3 !default; // 3x covers width of x plus default padding on either side
1448
1510
  // scss-docs-end alert-variables
1449
1511
 
1512
+ // fusv-disable
1513
+ $alert-bg-scale: -80% !default; // Deprecated in v5.2.0, to be removed in v6
1514
+ $alert-border-scale: -70% !default; // Deprecated in v5.2.0, to be removed in v6
1515
+ $alert-color-scale: 40% !default; // Deprecated in v5.2.0, to be removed in v6
1516
+ // fusv-enable
1450
1517
 
1451
1518
  // Progress bars
1452
1519
 
1453
1520
  // scss-docs-start progress-variables
1454
1521
  $progress-height: 1rem !default;
1455
1522
  $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;
1523
+ $progress-bg: var(--#{$prefix}secondary-bg) !default;
1524
+ $progress-border-radius: var(--#{$prefix}border-radius) !default;
1525
+ $progress-box-shadow: var(--#{$prefix}box-shadow-inset) !default;
1459
1526
  $progress-bar-color: $white !default;
1460
1527
  $progress-bar-bg: $primary !default;
1461
1528
  $progress-bar-animation-timing: 1s linear infinite !default;
@@ -1466,30 +1533,32 @@ $progress-bar-transition: width .6s ease !default;
1466
1533
  // List group
1467
1534
 
1468
1535
  // 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;
1536
+ $list-group-color: var(--#{$prefix}body-color) !default;
1537
+ $list-group-bg: var(--#{$prefix}body-bg) !default;
1538
+ $list-group-border-color: var(--#{$prefix}border-color) !default;
1539
+ $list-group-border-width: var(--#{$prefix}border-width) !default;
1540
+ $list-group-border-radius: var(--#{$prefix}border-radius) !default;
1474
1541
 
1475
1542
  $list-group-item-padding-y: $spacer * .5 !default;
1476
1543
  $list-group-item-padding-x: $spacer !default;
1477
- $list-group-item-bg-scale: -80% !default;
1478
- $list-group-item-color-scale: 40% !default;
1544
+ // fusv-disable
1545
+ $list-group-item-bg-scale: -80% !default; // Deprecated in v5.3.0
1546
+ $list-group-item-color-scale: 40% !default; // Deprecated in v5.3.0
1547
+ // fusv-enable
1479
1548
 
1480
- $list-group-hover-bg: $gray-100 !default;
1549
+ $list-group-hover-bg: var(--#{$prefix}tertiary-bg) !default;
1481
1550
  $list-group-active-color: $component-active-color !default;
1482
1551
  $list-group-active-bg: $component-active-bg !default;
1483
1552
  $list-group-active-border-color: $list-group-active-bg !default;
1484
1553
 
1485
- $list-group-disabled-color: $gray-600 !default;
1554
+ $list-group-disabled-color: var(--#{$prefix}secondary-color) !default;
1486
1555
  $list-group-disabled-bg: $list-group-bg !default;
1487
1556
 
1488
- $list-group-action-color: $gray-700 !default;
1489
- $list-group-action-hover-color: $list-group-action-color !default;
1557
+ $list-group-action-color: var(--#{$prefix}secondary-color) !default;
1558
+ $list-group-action-hover-color: var(--#{$prefix}emphasis-color) !default;
1490
1559
 
1491
- $list-group-action-active-color: $body-color !default;
1492
- $list-group-action-active-bg: $gray-200 !default;
1560
+ $list-group-action-active-color: var(--#{$prefix}body-color) !default;
1561
+ $list-group-action-active-bg: var(--#{$prefix}secondary-bg) !default;
1493
1562
  // scss-docs-end list-group-variables
1494
1563
 
1495
1564
 
@@ -1497,11 +1566,11 @@ $list-group-action-active-bg: $gray-200 !default;
1497
1566
 
1498
1567
  // scss-docs-start thumbnail-variables
1499
1568
  $thumbnail-padding: .25rem !default;
1500
- $thumbnail-bg: $body-bg !default;
1501
- $thumbnail-border-width: $border-width !default;
1569
+ $thumbnail-bg: var(--#{$prefix}body-bg) !default;
1570
+ $thumbnail-border-width: var(--#{$prefix}border-width) !default;
1502
1571
  $thumbnail-border-color: var(--#{$prefix}border-color) !default;
1503
- $thumbnail-border-radius: $border-radius !default;
1504
- $thumbnail-box-shadow: $box-shadow-sm !default;
1572
+ $thumbnail-border-radius: var(--#{$prefix}border-radius) !default;
1573
+ $thumbnail-box-shadow: var(--#{$prefix}box-shadow-sm) !default;
1505
1574
  // scss-docs-end thumbnail-variables
1506
1575
 
1507
1576
 
@@ -1509,7 +1578,7 @@ $thumbnail-box-shadow: $box-shadow-sm !default;
1509
1578
 
1510
1579
  // scss-docs-start figure-variables
1511
1580
  $figure-caption-font-size: $small-font-size !default;
1512
- $figure-caption-color: $gray-600 !default;
1581
+ $figure-caption-color: var(--#{$prefix}secondary-color) !default;
1513
1582
  // scss-docs-end figure-variables
1514
1583
 
1515
1584
 
@@ -1522,8 +1591,8 @@ $breadcrumb-padding-x: 0 !default;
1522
1591
  $breadcrumb-item-padding-x: .5rem !default;
1523
1592
  $breadcrumb-margin-bottom: 1rem !default;
1524
1593
  $breadcrumb-bg: null !default;
1525
- $breadcrumb-divider-color: $gray-600 !default;
1526
- $breadcrumb-active-color: $gray-600 !default;
1594
+ $breadcrumb-divider-color: var(--#{$prefix}secondary-color) !default;
1595
+ $breadcrumb-active-color: var(--#{$prefix}secondary-color) !default;
1527
1596
  $breadcrumb-divider: quote("/") !default;
1528
1597
  $breadcrumb-divider-flipped: $breadcrumb-divider !default;
1529
1598
  $breadcrumb-border-radius: null !default;
@@ -1612,8 +1681,8 @@ $offcanvas-transition-duration: .3s !default;
1612
1681
  $offcanvas-border-color: $modal-content-border-color !default;
1613
1682
  $offcanvas-border-width: $modal-content-border-width !default;
1614
1683
  $offcanvas-title-line-height: $modal-title-line-height !default;
1615
- $offcanvas-bg-color: $modal-content-bg !default;
1616
- $offcanvas-color: $modal-content-color !default;
1684
+ $offcanvas-bg-color: var(--#{$prefix}body-bg) !default;
1685
+ $offcanvas-color: var(--#{$prefix}body-color) !default;
1617
1686
  $offcanvas-box-shadow: $modal-content-box-shadow-xs !default;
1618
1687
  $offcanvas-backdrop-bg: $modal-backdrop-bg !default;
1619
1688
  $offcanvas-backdrop-opacity: $modal-backdrop-opacity !default;