paraqeet 0.7.0 → 0.9.0

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 (41) 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. data/assets/js/bootstrap.bundle.min.js +2 -2
  40. data/assets/js/bootstrap.bundle.min.js.map +1 -1
  41. 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;