paraqeet 0.9.0 → 0.11.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 (68) hide show
  1. checksums.yaml +4 -4
  2. data/LICENSE +1 -1
  3. data/_config.yml +4 -0
  4. data/_layouts/default.html +8 -8
  5. data/_sass/_bootstrap-icons.scss +12 -2042
  6. data/_sass/_variables-dark.scss +0 -0
  7. data/_sass/bootstrap/_alert.scss +2 -2
  8. data/_sass/bootstrap/_button-group.scss +2 -2
  9. data/_sass/bootstrap/_buttons.scss +3 -3
  10. data/_sass/bootstrap/_card.scss +1 -0
  11. data/_sass/bootstrap/_carousel.scss +9 -3
  12. data/_sass/bootstrap/_close.scss +2 -0
  13. data/_sass/bootstrap/_functions.scss +1 -1
  14. data/_sass/bootstrap/_grid.scss +6 -0
  15. data/_sass/bootstrap/_helpers.scss +2 -0
  16. data/_sass/bootstrap/_list-group.scss +8 -15
  17. data/_sass/bootstrap/_maps.scss +70 -17
  18. data/_sass/bootstrap/_nav.scss +40 -3
  19. data/_sass/bootstrap/_navbar.scss +8 -5
  20. data/_sass/bootstrap/_pagination.scss +1 -1
  21. data/_sass/bootstrap/_reboot.scss +1 -1
  22. data/_sass/bootstrap/_root.scss +42 -53
  23. data/_sass/bootstrap/_tables.scss +18 -11
  24. data/_sass/bootstrap/_tooltip.scss +4 -5
  25. data/_sass/bootstrap/_utilities.scss +68 -10
  26. data/_sass/bootstrap/_variables-dark.scss +43 -28
  27. data/_sass/bootstrap/_variables.scss +112 -72
  28. data/_sass/bootstrap/bootstrap-grid.scss +0 -4
  29. data/_sass/bootstrap/forms/_floating-labels.scss +19 -15
  30. data/_sass/bootstrap/forms/_form-control.scss +16 -3
  31. data/_sass/bootstrap/forms/_form-select.scss +0 -1
  32. data/_sass/bootstrap/forms/_input-group.scss +1 -1
  33. data/_sass/bootstrap/helpers/_color-bg.scss +0 -2
  34. data/_sass/bootstrap/helpers/_colored-links.scss +20 -2
  35. data/_sass/bootstrap/helpers/_focus-ring.scss +5 -0
  36. data/_sass/bootstrap/helpers/_icon-link.scss +25 -0
  37. data/_sass/bootstrap/mixins/_banner.scss +2 -2
  38. data/_sass/bootstrap/mixins/_list-group.scss +0 -1
  39. data/_sass/bootstrap/mixins/_utilities.scss +1 -1
  40. data/_sass/bootstrap/mixins/_visually-hidden.scss +5 -1
  41. data/_sass/bootstrap/tests/jasmine.js +16 -0
  42. data/_sass/bootstrap/tests/mixins/_color-modes.test.scss +69 -0
  43. data/_sass/bootstrap/tests/mixins/_media-query-color-mode-full.test.scss +8 -0
  44. data/_sass/bootstrap/tests/mixins/_utilities.test.scss +393 -0
  45. data/_sass/bootstrap/tests/sass-true/register.js +14 -0
  46. data/_sass/bootstrap/tests/sass-true/runner.js +17 -0
  47. data/_sass/bootstrap/tests/utilities/_api.test.scss +75 -0
  48. data/_sass/bootstrap/vendor/_rfs.scss +23 -29
  49. data/assets/bootstrap-icons/bootstrap-icons.svg +1 -1
  50. data/assets/bootstrap-icons/folder-plus.svg +2 -2
  51. data/assets/bootstrap-icons/fonts/bootstrap-icons.woff +0 -0
  52. data/assets/bootstrap-icons/fonts/bootstrap-icons.woff2 +0 -0
  53. data/assets/bootstrap-icons/postcard-heart-fill.svg +1 -1
  54. data/assets/bootstrap-icons/trash.svg +2 -2
  55. data/assets/css/style.scss +1 -0
  56. data/assets/js/bootstrap.bundle.js +6306 -0
  57. data/assets/js/bootstrap.bundle.js.map +1 -0
  58. data/assets/js/bootstrap.bundle.min.js +3 -3
  59. data/assets/js/bootstrap.bundle.min.js.map +1 -1
  60. data/assets/js/bootstrap.esm.js +4439 -0
  61. data/assets/js/bootstrap.esm.js.map +1 -0
  62. data/assets/js/bootstrap.esm.min.js +7 -0
  63. data/assets/js/bootstrap.esm.min.js.map +1 -0
  64. data/assets/js/bootstrap.js +4486 -0
  65. data/assets/js/bootstrap.js.map +1 -0
  66. data/assets/js/bootstrap.min.js +7 -0
  67. data/assets/js/bootstrap.min.js.map +1 -0
  68. metadata +26 -6
@@ -321,32 +321,38 @@ $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;
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;
339
342
  $light-bg-subtle: mix($gray-100, $white) !default;
340
343
  $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;
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;
348
353
  $light-border-subtle: $gray-200 !default;
349
354
  $dark-border-subtle: $gray-500 !default;
355
+ // scss-docs-end theme-border-subtle-variables
350
356
 
351
357
  // Characters which are escaped by the escape-svg function
352
358
  $escaped-characters: (
@@ -432,15 +438,13 @@ $body-text-align: null !default;
432
438
  $body-color: $gray-900 !default;
433
439
  $body-bg: $white !default;
434
440
 
435
- $body-emphasis-color: $black !default;
436
-
437
441
  $body-secondary-color: rgba($body-color, .75) !default;
438
442
  $body-secondary-bg: $gray-200 !default;
439
443
 
440
444
  $body-tertiary-color: rgba($body-color, .5) !default;
441
445
  $body-tertiary-bg: $gray-100 !default;
442
446
 
443
- $emphasis-color: $black !default;
447
+ $body-emphasis-color: $black !default;
444
448
 
445
449
  // Links
446
450
  //
@@ -455,6 +459,15 @@ $link-hover-decoration: null !default;
455
459
  $stretched-link-pseudo-element: after !default;
456
460
  $stretched-link-z-index: 1 !default;
457
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
+
458
471
  // Paragraphs
459
472
  //
460
473
  // Style p element.
@@ -535,20 +548,31 @@ $border-radius: .375rem !default;
535
548
  $border-radius-sm: .25rem !default;
536
549
  $border-radius-lg: .5rem !default;
537
550
  $border-radius-xl: 1rem !default;
538
- $border-radius-2xl: 2rem !default;
551
+ $border-radius-xxl: 2rem !default;
539
552
  $border-radius-pill: 50rem !default;
540
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
541
557
 
542
558
  // scss-docs-start box-shadow-variables
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;
559
+ $box-shadow: 0 .5rem 1rem rgba($black, .15) !default;
560
+ $box-shadow-sm: 0 .125rem .25rem rgba($black, .075) !default;
561
+ $box-shadow-lg: 0 1rem 3rem rgba($black, .175) !default;
562
+ $box-shadow-inset: inset 0 1px 2px rgba($black, .075) !default;
547
563
  // scss-docs-end box-shadow-variables
548
564
 
549
565
  $component-active-color: $white !default;
550
566
  $component-active-bg: $primary !default;
551
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
+
552
576
  // scss-docs-start caret-variables
553
577
  $caret-width: .3em !default;
554
578
  $caret-vertical-align: $caret-width * .85 !default;
@@ -631,7 +655,7 @@ $headings-font-family: null !default;
631
655
  $headings-font-style: null !default;
632
656
  $headings-font-weight: 500 !default;
633
657
  $headings-line-height: 1.2 !default;
634
- $headings-color: null !default;
658
+ $headings-color: inherit !default;
635
659
  // scss-docs-end headings-variables
636
660
 
637
661
  // scss-docs-start display-headings
@@ -658,7 +682,9 @@ $small-font-size: .875em !default;
658
682
 
659
683
  $sub-sup-font-size: .75em !default;
660
684
 
661
- $text-muted: var(--#{$prefix}secondary-color) !default;
685
+ // fusv-disable
686
+ $text-muted: var(--#{$prefix}secondary-color) !default; // Deprecated in 5.3.0
687
+ // fusv-enable
662
688
 
663
689
  $initialism-font-size: $small-font-size !default;
664
690
 
@@ -705,7 +731,7 @@ $table-cell-padding-x-sm: .25rem !default;
705
731
  $table-cell-vertical-align: top !default;
706
732
 
707
733
  $table-color: var(--#{$prefix}body-color) !default;
708
- $table-bg: transparent !default;
734
+ $table-bg: var(--#{$prefix}body-bg) !default;
709
735
  $table-accent-bg: transparent !default;
710
736
 
711
737
  $table-th-font-weight: null !default;
@@ -731,7 +757,7 @@ $table-striped-columns-order: even !default;
731
757
 
732
758
  $table-group-separator-color: currentcolor !default;
733
759
 
734
- $table-caption-color: $text-muted !default;
760
+ $table-caption-color: var(--#{$prefix}secondary-color) !default;
735
761
 
736
762
  $table-bg-scale: -80% !default;
737
763
  // scss-docs-end table-variables
@@ -761,11 +787,11 @@ $input-btn-font-family: null !default;
761
787
  $input-btn-font-size: $font-size-base !default;
762
788
  $input-btn-line-height: $line-height-base !default;
763
789
 
764
- $input-btn-focus-width: .25rem !default;
765
- $input-btn-focus-color-opacity: .25 !default;
766
- $input-btn-focus-color: rgba($component-active-bg, $input-btn-focus-color-opacity) !default;
767
- $input-btn-focus-blur: 0 !default;
768
- $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;
769
795
 
770
796
  $input-btn-padding-y-sm: .25rem !default;
771
797
  $input-btn-padding-x-sm: .5rem !default;
@@ -784,6 +810,7 @@ $input-btn-border-width: var(--#{$prefix}border-width) !default;
784
810
  // For each of Bootstrap's buttons, define text, background, and border color.
785
811
 
786
812
  // scss-docs-start btn-variables
813
+ $btn-color: var(--#{$prefix}body-color) !default;
787
814
  $btn-padding-y: $input-btn-padding-y !default;
788
815
  $btn-padding-x: $input-btn-padding-x !default;
789
816
  $btn-font-family: $input-btn-font-family !default;
@@ -813,9 +840,9 @@ $btn-link-hover-color: var(--#{$prefix}link-hover-color) !default;
813
840
  $btn-link-disabled-color: $gray-600 !default;
814
841
 
815
842
  // Allows for customizing button radius independently from global border radius
816
- $btn-border-radius: $border-radius !default;
817
- $btn-border-radius-sm: $border-radius-sm !default;
818
- $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;
819
846
 
820
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;
821
848
 
@@ -837,7 +864,7 @@ $form-text-margin-top: .25rem !default;
837
864
  $form-text-font-size: $small-font-size !default;
838
865
  $form-text-font-style: null !default;
839
866
  $form-text-font-weight: null !default;
840
- $form-text-color: $text-muted !default;
867
+ $form-text-color: var(--#{$prefix}secondary-color) !default;
841
868
  // scss-docs-end form-text-variables
842
869
 
843
870
  // scss-docs-start form-label-variables
@@ -864,19 +891,19 @@ $input-padding-y-lg: $input-btn-padding-y-lg !default;
864
891
  $input-padding-x-lg: $input-btn-padding-x-lg !default;
865
892
  $input-font-size-lg: $input-btn-font-size-lg !default;
866
893
 
867
- $input-bg: var(--#{$prefix}form-control-bg) !default;
894
+ $input-bg: var(--#{$prefix}body-bg) !default;
868
895
  $input-disabled-color: null !default;
869
- $input-disabled-bg: var(--#{$prefix}form-control-disabled-bg) !default;
896
+ $input-disabled-bg: var(--#{$prefix}secondary-bg) !default;
870
897
  $input-disabled-border-color: null !default;
871
898
 
872
899
  $input-color: var(--#{$prefix}body-color) !default;
873
- $input-border-color: var(--#{$prefix}border-color) !default; //$gray-400
900
+ $input-border-color: var(--#{$prefix}border-color) !default;
874
901
  $input-border-width: $input-btn-border-width !default;
875
902
  $input-box-shadow: $box-shadow-inset !default;
876
903
 
877
- $input-border-radius: $border-radius !default;
878
- $input-border-radius-sm: $border-radius-sm !default;
879
- $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;
880
907
 
881
908
  $input-focus-bg: $input-bg !default;
882
909
  $input-focus-border-color: tint-color($component-active-bg, 50%) !default;
@@ -887,7 +914,7 @@ $input-focus-box-shadow: $input-btn-focus-box-shadow !default;
887
914
  $input-placeholder-color: var(--#{$prefix}secondary-color) !default;
888
915
  $input-plaintext-color: var(--#{$prefix}body-color) !default;
889
916
 
890
- $input-height-border: calc($input-border-width * 2) !default; // stylelint-disable-line function-disallowed-list
917
+ $input-height-border: calc(#{$input-border-width} * 2) !default; // stylelint-disable-line function-disallowed-list
891
918
 
892
919
  $input-height-inner: add($input-line-height * 1em, $input-padding-y * 2) !default;
893
920
  $input-height-inner-half: add($input-line-height * .5em, $input-padding-y) !default;
@@ -918,7 +945,7 @@ $form-check-input-border: var(--#{$prefix}border-width) solid va
918
945
  $form-check-input-border-radius: .25em !default;
919
946
  $form-check-radio-border-radius: 50% !default;
920
947
  $form-check-input-focus-border: $input-focus-border-color !default;
921
- $form-check-input-focus-box-shadow: $input-btn-focus-box-shadow !default;
948
+ $form-check-input-focus-box-shadow: $focus-ring-box-shadow !default;
922
949
 
923
950
  $form-check-input-checked-color: $component-active-color !default;
924
951
  $form-check-input-checked-bg-color: $component-active-bg !default;
@@ -1041,7 +1068,7 @@ $form-floating-padding-x: $input-padding-x !default;
1041
1068
  $form-floating-padding-y: 1rem !default;
1042
1069
  $form-floating-input-padding-t: 1.625rem !default;
1043
1070
  $form-floating-input-padding-b: .625rem !default;
1044
- $form-floating-label-height: 1.875em !default;
1071
+ $form-floating-label-height: 1.5em !default;
1045
1072
  $form-floating-label-opacity: .65 !default;
1046
1073
  $form-floating-label-transform: scale(.85) translateY(-.5rem) translateX(.15rem) !default;
1047
1074
  $form-floating-label-disabled-color: $gray-600 !default;
@@ -1063,23 +1090,30 @@ $form-feedback-icon-invalid-color: $form-feedback-invalid-color !default;
1063
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;
1064
1091
  // scss-docs-end form-feedback-variables
1065
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
+
1066
1100
  // scss-docs-start form-validation-states
1067
1101
  $form-validation-states: (
1068
1102
  "valid": (
1069
- "color": var(--#{$prefix}success-text),
1103
+ "color": var(--#{$prefix}form-valid-color),
1070
1104
  "icon": $form-feedback-icon-valid,
1071
1105
  "tooltip-color": #fff,
1072
1106
  "tooltip-bg-color": var(--#{$prefix}success),
1073
1107
  "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),
1108
+ "border-color": var(--#{$prefix}form-valid-border-color),
1075
1109
  ),
1076
1110
  "invalid": (
1077
- "color": var(--#{$prefix}danger-text),
1111
+ "color": var(--#{$prefix}form-invalid-color),
1078
1112
  "icon": $form-feedback-icon-invalid,
1079
1113
  "tooltip-color": #fff,
1080
1114
  "tooltip-bg-color": var(--#{$prefix}danger),
1081
1115
  "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),
1116
+ "border-color": var(--#{$prefix}form-invalid-border-color),
1083
1117
  )
1084
1118
  ) !default;
1085
1119
  // scss-docs-end form-validation-states
@@ -1124,6 +1158,7 @@ $nav-link-color: var(--#{$prefix}link-color) !default;
1124
1158
  $nav-link-hover-color: var(--#{$prefix}link-hover-color) !default;
1125
1159
  $nav-link-transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out !default;
1126
1160
  $nav-link-disabled-color: var(--#{$prefix}secondary-color) !default;
1161
+ $nav-link-focus-box-shadow: $focus-ring-box-shadow !default;
1127
1162
 
1128
1163
  $nav-tabs-border-color: var(--#{$prefix}border-color) !default;
1129
1164
  $nav-tabs-border-width: var(--#{$prefix}border-width) !default;
@@ -1133,9 +1168,13 @@ $nav-tabs-link-active-color: var(--#{$prefix}emphasis-color) !default;
1133
1168
  $nav-tabs-link-active-bg: var(--#{$prefix}body-bg) !default;
1134
1169
  $nav-tabs-link-active-border-color: var(--#{$prefix}border-color) var(--#{$prefix}border-color) $nav-tabs-link-active-bg !default;
1135
1170
 
1136
- $nav-pills-border-radius: $border-radius !default;
1171
+ $nav-pills-border-radius: var(--#{$prefix}border-radius) !default;
1137
1172
  $nav-pills-link-active-color: $component-active-color !default;
1138
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;
1139
1178
  // scss-docs-end nav-variables
1140
1179
 
1141
1180
 
@@ -1165,7 +1204,8 @@ $navbar-light-color: rgba(var(--#{$prefix}emphasis-color-rgb), .6
1165
1204
  $navbar-light-hover-color: rgba(var(--#{$prefix}emphasis-color-rgb), .8) !default;
1166
1205
  $navbar-light-active-color: rgba(var(--#{$prefix}emphasis-color-rgb), 1) !default;
1167
1206
  $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;
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;
1169
1209
  $navbar-light-toggler-border-color: rgba(var(--#{$prefix}emphasis-color-rgb), .15) !default;
1170
1210
  $navbar-light-brand-color: $navbar-light-active-color !default;
1171
1211
  $navbar-light-brand-hover-color: $navbar-light-active-color !default;
@@ -1196,9 +1236,9 @@ $dropdown-font-size: $font-size-base !default;
1196
1236
  $dropdown-color: var(--#{$prefix}body-color) !default;
1197
1237
  $dropdown-bg: var(--#{$prefix}body-bg) !default;
1198
1238
  $dropdown-border-color: var(--#{$prefix}border-color-translucent) !default;
1199
- $dropdown-border-radius: $border-radius !default;
1239
+ $dropdown-border-radius: var(--#{$prefix}border-radius) !default;
1200
1240
  $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
1241
+ $dropdown-inner-border-radius: calc(#{$dropdown-border-radius} - #{$dropdown-border-width}) !default; // stylelint-disable-line function-disallowed-list
1202
1242
  $dropdown-divider-bg: $dropdown-border-color !default;
1203
1243
  $dropdown-divider-margin-y: $spacer * .5 !default;
1204
1244
  $dropdown-box-shadow: $box-shadow !default;
@@ -1210,7 +1250,7 @@ $dropdown-link-hover-bg: var(--#{$prefix}tertiary-bg) !default;
1210
1250
  $dropdown-link-active-color: $component-active-color !default;
1211
1251
  $dropdown-link-active-bg: $component-active-bg !default;
1212
1252
 
1213
- $dropdown-link-disabled-color: $gray-500 !default;
1253
+ $dropdown-link-disabled-color: var(--#{$prefix}tertiary-color) !default;
1214
1254
 
1215
1255
  $dropdown-item-padding-y: $spacer * .25 !default;
1216
1256
  $dropdown-item-padding-x: $spacer !default;
@@ -1255,12 +1295,12 @@ $pagination-color: var(--#{$prefix}link-color) !default;
1255
1295
  $pagination-bg: var(--#{$prefix}body-bg) !default;
1256
1296
  $pagination-border-radius: var(--#{$prefix}border-radius) !default;
1257
1297
  $pagination-border-width: var(--#{$prefix}border-width) !default;
1258
- $pagination-margin-start: calc($pagination-border-width * -1) !default; // stylelint-disable-line function-disallowed-list
1298
+ $pagination-margin-start: calc(#{$pagination-border-width} * -1) !default; // stylelint-disable-line function-disallowed-list
1259
1299
  $pagination-border-color: var(--#{$prefix}border-color) !default;
1260
1300
 
1261
1301
  $pagination-focus-color: var(--#{$prefix}link-hover-color) !default;
1262
1302
  $pagination-focus-bg: var(--#{$prefix}secondary-bg) !default;
1263
- $pagination-focus-box-shadow: $input-btn-focus-box-shadow !default;
1303
+ $pagination-focus-box-shadow: $focus-ring-box-shadow !default;
1264
1304
  $pagination-focus-outline: 0 !default;
1265
1305
 
1266
1306
  $pagination-hover-color: var(--#{$prefix}link-hover-color) !default;
@@ -1277,8 +1317,8 @@ $pagination-disabled-border-color: var(--#{$prefix}border-color) !default;
1277
1317
 
1278
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;
1279
1319
 
1280
- $pagination-border-radius-sm: $border-radius-sm !default;
1281
- $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;
1282
1322
  // scss-docs-end pagination-variables
1283
1323
 
1284
1324
 
@@ -1318,7 +1358,7 @@ $card-group-margin: $grid-gutter-width * .5 !default;
1318
1358
  // scss-docs-start accordion-variables
1319
1359
  $accordion-padding-y: 1rem !default;
1320
1360
  $accordion-padding-x: 1.25rem !default;
1321
- $accordion-color: var(--#{$prefix}body-color) !default; // Sass variable because of $accordion-button-icon
1361
+ $accordion-color: var(--#{$prefix}body-color) !default;
1322
1362
  $accordion-bg: var(--#{$prefix}body-bg) !default;
1323
1363
  $accordion-border-width: var(--#{$prefix}border-width) !default;
1324
1364
  $accordion-border-color: var(--#{$prefix}border-color) !default;
@@ -1334,14 +1374,14 @@ $accordion-button-color: var(--#{$prefix}body-color) !default;
1334
1374
  $accordion-button-bg: var(--#{$prefix}accordion-bg) !default;
1335
1375
  $accordion-transition: $btn-transition, border-radius .15s ease !default;
1336
1376
  $accordion-button-active-bg: var(--#{$prefix}primary-bg-subtle) !default;
1337
- $accordion-button-active-color: var(--#{$prefix}primary-text) !default;
1377
+ $accordion-button-active-color: var(--#{$prefix}primary-text-emphasis) !default;
1338
1378
 
1339
1379
  $accordion-button-focus-border-color: $input-focus-border-color !default;
1340
1380
  $accordion-button-focus-box-shadow: $btn-focus-box-shadow !default;
1341
1381
 
1342
1382
  $accordion-icon-width: 1.25rem !default;
1343
1383
  $accordion-icon-color: $body-color !default;
1344
- $accordion-icon-active-color: $primary-text !default;
1384
+ $accordion-icon-active-color: $primary-text-emphasis !default;
1345
1385
  $accordion-icon-transition: transform .2s ease-in-out !default;
1346
1386
  $accordion-icon-transform: rotate(-180deg) !default;
1347
1387
 
@@ -1389,7 +1429,7 @@ $popover-max-width: 276px !default;
1389
1429
  $popover-border-width: var(--#{$prefix}border-width) !default;
1390
1430
  $popover-border-color: var(--#{$prefix}border-color-translucent) !default;
1391
1431
  $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
1432
+ $popover-inner-border-radius: calc(#{$popover-border-radius} - #{$popover-border-width}) !default; // stylelint-disable-line function-disallowed-list
1393
1433
  $popover-box-shadow: $box-shadow !default;
1394
1434
 
1395
1435
  $popover-header-font-size: $font-size-base !default;
@@ -1442,7 +1482,7 @@ $badge-font-weight: $font-weight-bold !default;
1442
1482
  $badge-color: $white !default;
1443
1483
  $badge-padding-y: .35em !default;
1444
1484
  $badge-padding-x: .65em !default;
1445
- $badge-border-radius: $border-radius !default;
1485
+ $badge-border-radius: var(--#{$prefix}border-radius) !default;
1446
1486
  // scss-docs-end badge-variables
1447
1487
 
1448
1488
 
@@ -1500,7 +1540,7 @@ $modal-scale-transform: scale(1.02) !default;
1500
1540
  $alert-padding-y: $spacer !default;
1501
1541
  $alert-padding-x: $spacer !default;
1502
1542
  $alert-margin-bottom: 1rem !default;
1503
- $alert-border-radius: $border-radius !default;
1543
+ $alert-border-radius: var(--#{$prefix}border-radius) !default;
1504
1544
  $alert-link-font-weight: $font-weight-bold !default;
1505
1545
  $alert-border-width: var(--#{$prefix}border-width) !default;
1506
1546
  $alert-bg-scale: -80% !default;
@@ -1661,7 +1701,7 @@ $btn-close-padding-x: .25em !default;
1661
1701
  $btn-close-padding-y: $btn-close-padding-x !default;
1662
1702
  $btn-close-color: $black !default;
1663
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;
1664
- $btn-close-focus-shadow: $input-btn-focus-box-shadow !default;
1704
+ $btn-close-focus-shadow: $focus-ring-box-shadow !default;
1665
1705
  $btn-close-opacity: .5 !default;
1666
1706
  $btn-close-hover-opacity: .75 !default;
1667
1707
  $btn-close-focus-opacity: 1 !default;
@@ -8,17 +8,13 @@ $include-column-box-sizing: true !default;
8
8
  @import "variables-dark";
9
9
  @import "maps";
10
10
 
11
- @import "mixins/lists";
12
11
  @import "mixins/breakpoints";
13
- @import "mixins/color-mode";
14
12
  @import "mixins/container";
15
13
  @import "mixins/grid";
16
14
  @import "mixins/utilities";
17
15
 
18
16
  @import "vendor/rfs";
19
17
 
20
- @import "root";
21
-
22
18
  @import "containers";
23
19
  @import "grid";
24
20
 
@@ -1,21 +1,11 @@
1
1
  .form-floating {
2
2
  position: relative;
3
3
 
4
- &::before:not(.form-control:disabled) {
5
- position: absolute;
6
- top: $input-border-width;
7
- left: $input-border-width;
8
- width: subtract(100%, add($input-height-inner-quarter, $input-height-inner-half));
9
- height: $form-floating-label-height;
10
- content: "";
11
- background-color: $input-bg;
12
- @include border-radius($input-border-radius);
13
- }
14
-
15
4
  > .form-control,
16
5
  > .form-control-plaintext,
17
6
  > .form-select {
18
7
  height: $form-floating-height;
8
+ min-height: $form-floating-height;
19
9
  line-height: $form-floating-line-height;
20
10
  }
21
11
 
@@ -23,7 +13,7 @@
23
13
  position: absolute;
24
14
  top: 0;
25
15
  left: 0;
26
- width: 100%;
16
+ z-index: 2;
27
17
  height: 100%; // allow textareas
28
18
  padding: $form-floating-padding-y $form-floating-padding-x;
29
19
  overflow: hidden;
@@ -66,14 +56,24 @@
66
56
  > .form-control-plaintext,
67
57
  > .form-select {
68
58
  ~ label {
69
- opacity: $form-floating-label-opacity;
59
+ color: rgba(var(--#{$prefix}body-color-rgb), #{$form-floating-label-opacity});
70
60
  transform: $form-floating-label-transform;
61
+
62
+ &::after {
63
+ position: absolute;
64
+ inset: $form-floating-padding-y ($form-floating-padding-x * .5);
65
+ z-index: -1;
66
+ height: $form-floating-label-height;
67
+ content: "";
68
+ background-color: $input-bg;
69
+ @include border-radius($input-border-radius);
70
+ }
71
71
  }
72
72
  }
73
73
  // Duplicated because `:-webkit-autofill` invalidates other selectors when grouped
74
74
  > .form-control:-webkit-autofill {
75
75
  ~ label {
76
- opacity: $form-floating-label-opacity;
76
+ color: rgba(var(--#{$prefix}body-color-rgb), #{$form-floating-label-opacity});
77
77
  transform: $form-floating-label-transform;
78
78
  }
79
79
  }
@@ -84,7 +84,11 @@
84
84
  }
85
85
  }
86
86
 
87
- > .form-control:disabled ~ label {
87
+ > :disabled ~ label {
88
88
  color: $form-floating-label-disabled-color;
89
+
90
+ &::after {
91
+ background-color: $input-disabled-bg;
92
+ }
89
93
  }
90
94
  }
@@ -44,12 +44,24 @@
44
44
  }
45
45
  }
46
46
 
47
- // Add some height to date inputs on iOS
48
- // https://github.com/twbs/bootstrap/issues/23307
49
- // TODO: we can remove this workaround once https://bugs.webkit.org/show_bug.cgi?id=198959 is resolved
50
47
  &::-webkit-date-and-time-value {
48
+ // On Android Chrome, form-control's "width: 100%" makes the input width too small
49
+ // Tested under Android 11 / Chrome 89, Android 12 / Chrome 100, Android 13 / Chrome 109
50
+ //
51
+ // On iOS Safari, form-control's "appearance: none" + "width: 100%" makes the input width too small
52
+ // Tested under iOS 16.2 / Safari 16.2
53
+ min-width: 85px; // Seems to be a good minimum safe width
54
+
55
+ // Add some height to date inputs on iOS
56
+ // https://github.com/twbs/bootstrap/issues/23307
57
+ // TODO: we can remove this workaround once https://bugs.webkit.org/show_bug.cgi?id=198959 is resolved
51
58
  // Multiply line-height by 1em if it has no unit
52
59
  height: if(unit($input-line-height) == "", $input-line-height * 1em, $input-line-height);
60
+
61
+ // Android Chrome type="date" is taller than the other inputs
62
+ // because of "margin: 1px 24px 1px 4px" inside the shadow DOM
63
+ // Tested under Android 11 / Chrome 89, Android 12 / Chrome 100, Android 13 / Chrome 109
64
+ margin: 0;
53
65
  }
54
66
 
55
67
  // Prevent excessive date input height in Webkit
@@ -193,6 +205,7 @@ textarea {
193
205
  }
194
206
 
195
207
  &::-webkit-color-swatch {
208
+ border: 0 !important; // stylelint-disable-line declaration-no-important
196
209
  @include border-radius($input-border-radius);
197
210
  }
198
211
 
@@ -9,7 +9,6 @@
9
9
  display: block;
10
10
  width: 100%;
11
11
  padding: $form-select-padding-y $form-select-indicator-padding $form-select-padding-y $form-select-padding-x;
12
- -moz-padding-start: subtract($form-select-padding-x, 3px); // See https://github.com/twbs/bootstrap/issues/32636
13
12
  font-family: $form-select-font-family;
14
13
  @include font-size($form-select-font-size);
15
14
  font-weight: $form-select-font-weight;
@@ -121,7 +121,7 @@
121
121
  }
122
122
 
123
123
  > :not(:first-child):not(.dropdown-menu)#{$validation-messages} {
124
- margin-left: calc($input-border-width * -1); // stylelint-disable-line function-disallowed-list
124
+ margin-left: calc(#{$input-border-width} * -1); // stylelint-disable-line function-disallowed-list
125
125
  @include border-start-radius(0);
126
126
  }
127
127
 
@@ -1,5 +1,3 @@
1
- // stylelint-disable function-name-case
2
-
3
1
  // All-caps `RGBA()` function used because of this Sass bug: https://github.com/sass/node-sass/issues/2251
4
2
  @each $color, $value in $theme-colors {
5
3
  $color-rgb: to-rgb($value);
@@ -1,12 +1,30 @@
1
+ // All-caps `RGBA()` function used because of this Sass bug: https://github.com/sass/node-sass/issues/2251
1
2
  @each $color, $value in $theme-colors {
2
3
  .link-#{$color} {
3
- color: $value if($enable-important-utilities, !important, null);
4
+ color: RGBA(var(--#{$prefix}#{$color}-rgb), var(--#{$prefix}link-opacity, 1)) if($enable-important-utilities, !important, null);
5
+ text-decoration-color: RGBA(var(--#{$prefix}#{$color}-rgb), var(--#{$prefix}link-underline-opacity, 1)) if($enable-important-utilities, !important, null);
4
6
 
5
7
  @if $link-shade-percentage != 0 {
6
8
  &:hover,
7
9
  &:focus {
8
- color: if(color-contrast($value) == $color-contrast-light, shade-color($value, $link-shade-percentage), tint-color($value, $link-shade-percentage)) if($enable-important-utilities, !important, null);
10
+ $hover-color: if(color-contrast($value) == $color-contrast-light, shade-color($value, $link-shade-percentage), tint-color($value, $link-shade-percentage));
11
+ color: RGBA(#{to-rgb($hover-color)}, var(--#{$prefix}link-opacity, 1)) if($enable-important-utilities, !important, null);
12
+ text-decoration-color: RGBA(to-rgb($hover-color), var(--#{$prefix}link-underline-opacity, 1)) if($enable-important-utilities, !important, null);
9
13
  }
10
14
  }
11
15
  }
12
16
  }
17
+
18
+ // One-off special link helper as a bridge until v6
19
+ .link-body-emphasis {
20
+ color: RGBA(var(--#{$prefix}emphasis-color-rgb), var(--#{$prefix}link-opacity, 1)) if($enable-important-utilities, !important, null);
21
+ text-decoration-color: RGBA(var(--#{$prefix}emphasis-color-rgb), var(--#{$prefix}link-underline-opacity, 1)) if($enable-important-utilities, !important, null);
22
+
23
+ @if $link-shade-percentage != 0 {
24
+ &:hover,
25
+ &:focus {
26
+ color: RGBA(var(--#{$prefix}emphasis-color-rgb), var(--#{$prefix}link-opacity, .75)) if($enable-important-utilities, !important, null);
27
+ text-decoration-color: RGBA(var(--#{$prefix}emphasis-color-rgb), var(--#{$prefix}link-underline-opacity, .75)) if($enable-important-utilities, !important, null);
28
+ }
29
+ }
30
+ }
@@ -0,0 +1,5 @@
1
+ .focus-ring:focus {
2
+ outline: 0;
3
+ // By default, there is no `--bs-focus-ring-x`, `--bs-focus-ring-y`, or `--bs-focus-ring-blur`, but we provide CSS variables with fallbacks to initial `0` values
4
+ box-shadow: var(--#{$prefix}focus-ring-x, 0) var(--#{$prefix}focus-ring-y, 0) var(--#{$prefix}focus-ring-blur, 0) var(--#{$prefix}focus-ring-width) var(--#{$prefix}focus-ring-color);
5
+ }