paraqeet 0.9.0 → 0.10.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 (66) hide show
  1. checksums.yaml +4 -4
  2. data/LICENSE +1 -1
  3. data/_layouts/default.html +9 -9
  4. data/_sass/_bootstrap-icons.scss +12 -2042
  5. data/_sass/_variables-dark.scss +0 -0
  6. data/_sass/bootstrap/_alert.scss +2 -2
  7. data/_sass/bootstrap/_button-group.scss +2 -2
  8. data/_sass/bootstrap/_buttons.scss +3 -3
  9. data/_sass/bootstrap/_card.scss +1 -0
  10. data/_sass/bootstrap/_carousel.scss +9 -3
  11. data/_sass/bootstrap/_close.scss +2 -0
  12. data/_sass/bootstrap/_functions.scss +1 -1
  13. data/_sass/bootstrap/_grid.scss +6 -0
  14. data/_sass/bootstrap/_helpers.scss +2 -0
  15. data/_sass/bootstrap/_list-group.scss +8 -15
  16. data/_sass/bootstrap/_maps.scss +70 -17
  17. data/_sass/bootstrap/_nav.scss +40 -3
  18. data/_sass/bootstrap/_navbar.scss +6 -4
  19. data/_sass/bootstrap/_pagination.scss +1 -1
  20. data/_sass/bootstrap/_root.scss +45 -52
  21. data/_sass/bootstrap/_tables.scss +1 -1
  22. data/_sass/bootstrap/_tooltip.scss +4 -5
  23. data/_sass/bootstrap/_utilities.scss +68 -10
  24. data/_sass/bootstrap/_variables-dark.scss +43 -28
  25. data/_sass/bootstrap/_variables.scss +110 -70
  26. data/_sass/bootstrap/bootstrap-grid.scss +0 -4
  27. data/_sass/bootstrap/forms/_floating-labels.scss +18 -15
  28. data/_sass/bootstrap/forms/_form-control.scss +16 -3
  29. data/_sass/bootstrap/forms/_form-select.scss +0 -1
  30. data/_sass/bootstrap/forms/_input-group.scss +1 -1
  31. data/_sass/bootstrap/helpers/_colored-links.scss +22 -2
  32. data/_sass/bootstrap/helpers/_focus-ring.scss +5 -0
  33. data/_sass/bootstrap/helpers/_icon-link.scss +25 -0
  34. data/_sass/bootstrap/mixins/_banner.scss +2 -2
  35. data/_sass/bootstrap/mixins/_list-group.scss +0 -1
  36. data/_sass/bootstrap/mixins/_utilities.scss +1 -1
  37. data/_sass/bootstrap/mixins/_visually-hidden.scss +5 -1
  38. data/_sass/bootstrap/tests/jasmine.js +16 -0
  39. data/_sass/bootstrap/tests/mixins/_color-modes.test.scss +69 -0
  40. data/_sass/bootstrap/tests/mixins/_media-query-color-mode-full.test.scss +8 -0
  41. data/_sass/bootstrap/tests/mixins/_utilities.test.scss +393 -0
  42. data/_sass/bootstrap/tests/sass-true/register.js +14 -0
  43. data/_sass/bootstrap/tests/sass-true/runner.js +17 -0
  44. data/_sass/bootstrap/tests/utilities/_api.test.scss +75 -0
  45. data/_sass/bootstrap/vendor/_rfs.scss +23 -29
  46. data/assets/bootstrap-icons/bootstrap-icons.svg +1 -1
  47. data/assets/bootstrap-icons/folder-plus.svg +2 -2
  48. data/assets/bootstrap-icons/fonts/bootstrap-icons.woff +0 -0
  49. data/assets/bootstrap-icons/fonts/bootstrap-icons.woff2 +0 -0
  50. data/assets/bootstrap-icons/postcard-heart-fill.svg +1 -1
  51. data/assets/bootstrap-icons/trash.svg +2 -2
  52. data/assets/css/style.scss +1 -0
  53. data/assets/js/bootstrap.bundle.js +6295 -0
  54. data/assets/js/bootstrap.bundle.js.map +1 -0
  55. data/assets/js/bootstrap.bundle.min.js +3 -3
  56. data/assets/js/bootstrap.bundle.min.js.map +1 -1
  57. data/assets/js/bootstrap.esm.js +4423 -0
  58. data/assets/js/bootstrap.esm.js.map +1 -0
  59. data/assets/js/bootstrap.esm.min.js +7 -0
  60. data/assets/js/bootstrap.esm.min.js.map +1 -0
  61. data/assets/js/bootstrap.js +4469 -0
  62. data/assets/js/bootstrap.js.map +1 -0
  63. data/assets/js/bootstrap.min.js +7 -0
  64. data/assets/js/bootstrap.min.js.map +1 -0
  65. data/assets/js/script.js +5 -0
  66. metadata +27 -6
File without changes
@@ -59,10 +59,10 @@
59
59
  // Generate contextual modifier classes for colorizing the alert
60
60
  @each $state in map-keys($theme-colors) {
61
61
  .alert-#{$state} {
62
- --#{$prefix}alert-color: var(--#{$prefix}#{$state}-text);
62
+ --#{$prefix}alert-color: var(--#{$prefix}#{$state}-text-emphasis);
63
63
  --#{$prefix}alert-bg: var(--#{$prefix}#{$state}-bg-subtle);
64
64
  --#{$prefix}alert-border-color: var(--#{$prefix}#{$state}-border-subtle);
65
- --#{$prefix}alert-link-color: var(--#{$prefix}#{$state}-text);
65
+ --#{$prefix}alert-link-color: var(--#{$prefix}#{$state}-text-emphasis);
66
66
  }
67
67
  }
68
68
  // scss-docs-end alert-modifiers
@@ -39,7 +39,7 @@
39
39
  // Prevent double borders when buttons are next to each other
40
40
  > :not(.btn-check:first-child) + .btn,
41
41
  > .btn-group:not(:first-child) {
42
- margin-left: calc($btn-border-width * -1); // stylelint-disable-line function-disallowed-list
42
+ margin-left: calc(#{$btn-border-width} * -1); // stylelint-disable-line function-disallowed-list
43
43
  }
44
44
 
45
45
  // Reset rounded corners
@@ -126,7 +126,7 @@
126
126
 
127
127
  > .btn:not(:first-child),
128
128
  > .btn-group:not(:first-child) {
129
- margin-top: calc($btn-border-width * -1); // stylelint-disable-line function-disallowed-list
129
+ margin-top: calc(#{$btn-border-width} * -1); // stylelint-disable-line function-disallowed-list
130
130
  }
131
131
 
132
132
  // Reset rounded corners
@@ -10,7 +10,7 @@
10
10
  @include rfs($btn-font-size, --#{$prefix}btn-font-size);
11
11
  --#{$prefix}btn-font-weight: #{$btn-font-weight};
12
12
  --#{$prefix}btn-line-height: #{$btn-line-height};
13
- --#{$prefix}btn-color: #{$body-color};
13
+ --#{$prefix}btn-color: #{$btn-color};
14
14
  --#{$prefix}btn-bg: transparent;
15
15
  --#{$prefix}btn-border-width: #{$btn-border-width};
16
16
  --#{$prefix}btn-border-color: transparent;
@@ -169,8 +169,8 @@
169
169
  --#{$prefix}btn-active-border-color: transparent;
170
170
  --#{$prefix}btn-disabled-color: #{$btn-link-disabled-color};
171
171
  --#{$prefix}btn-disabled-border-color: transparent;
172
- --#{$prefix}btn-box-shadow: none;
173
- --#{$prefix}btn-focus-shadow-rgb: #{to-rgb(mix(color-contrast($primary), $primary, 15%))};
172
+ --#{$prefix}btn-box-shadow: 0 0 0 #000; // Can't use `none` as keyword negates all values when used with multiple shadows
173
+ --#{$prefix}btn-focus-shadow-rgb: #{to-rgb(mix(color-contrast($link-color), $link-color, 15%))};
174
174
 
175
175
  text-decoration: $link-decoration;
176
176
  @if $enable-gradients {
@@ -30,6 +30,7 @@
30
30
  flex-direction: column;
31
31
  min-width: 0; // See https://github.com/twbs/bootstrap/pull/22740#issuecomment-305868106
32
32
  height: var(--#{$prefix}card-height);
33
+ color: var(--#{$prefix}body-color);
33
34
  word-wrap: break-word;
34
35
  background-color: var(--#{$prefix}card-bg);
35
36
  background-clip: border-box;
@@ -165,7 +165,6 @@
165
165
  margin-right: $carousel-control-width;
166
166
  margin-bottom: 1rem;
167
167
  margin-left: $carousel-control-width;
168
- list-style: none;
169
168
 
170
169
  [data-bs-target] {
171
170
  box-sizing: content-box;
@@ -231,8 +230,15 @@
231
230
 
232
231
  @if $enable-dark-mode {
233
232
  @include color-mode(dark) {
234
- .carousel {
235
- @include carousel-dark();
233
+ @if $color-mode-type == "media-query" {
234
+ .carousel {
235
+ @include carousel-dark();
236
+ }
237
+ } @else {
238
+ .carousel,
239
+ &.carousel {
240
+ @include carousel-dark();
241
+ }
236
242
  }
237
243
  }
238
244
  }
@@ -4,6 +4,7 @@
4
4
  // See https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile
5
5
 
6
6
  .btn-close {
7
+ // scss-docs-start close-css-vars
7
8
  --#{$prefix}btn-close-color: #{$btn-close-color};
8
9
  --#{$prefix}btn-close-bg: #{ escape-svg($btn-close-bg) };
9
10
  --#{$prefix}btn-close-opacity: #{$btn-close-opacity};
@@ -12,6 +13,7 @@
12
13
  --#{$prefix}btn-close-focus-opacity: #{$btn-close-focus-opacity};
13
14
  --#{$prefix}btn-close-disabled-opacity: #{$btn-close-disabled-opacity};
14
15
  --#{$prefix}btn-close-white-filter: #{$btn-close-white-filter};
16
+ // scss-docs-end close-css-vars
15
17
 
16
18
  box-sizing: content-box;
17
19
  width: $btn-close-width;
@@ -188,7 +188,7 @@ $_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003
188
188
  );
189
189
 
190
190
  @each $name, $value in $rgb {
191
- $value: if(divide($value, 255) < .03928, divide(divide($value, 255), 12.92), nth($_luminance-list, $value + 1));
191
+ $value: if(divide($value, 255) < .04045, divide(divide($value, 255), 12.92), nth($_luminance-list, $value + 1));
192
192
  $rgb: map-merge($rgb, ($name: $value));
193
193
  }
194
194
 
@@ -2,6 +2,12 @@
2
2
  //
3
3
  // Rows contain your columns.
4
4
 
5
+ :root {
6
+ @each $name, $value in $grid-breakpoints {
7
+ --#{$prefix}breakpoint-#{$name}: #{$value};
8
+ }
9
+ }
10
+
5
11
  @if $enable-grid-classes {
6
12
  .row {
7
13
  @include make-row();
@@ -1,6 +1,8 @@
1
1
  @import "helpers/clearfix";
2
2
  @import "helpers/color-bg";
3
3
  @import "helpers/colored-links";
4
+ @import "helpers/focus-ring";
5
+ @import "helpers/icon-link";
4
6
  @import "helpers/ratio";
5
7
  @import "helpers/position";
6
8
  @import "helpers/stacks";
@@ -182,23 +182,16 @@
182
182
 
183
183
  @each $state in map-keys($theme-colors) {
184
184
  .list-group-item-#{$state} {
185
- --#{$prefix}list-group-color: var(--#{$prefix}#{$state}-text);
185
+ --#{$prefix}list-group-color: var(--#{$prefix}#{$state}-text-emphasis);
186
186
  --#{$prefix}list-group-bg: var(--#{$prefix}#{$state}-bg-subtle);
187
187
  --#{$prefix}list-group-border-color: var(--#{$prefix}#{$state}-border-subtle);
188
-
189
- &.list-group-item-action {
190
- &:hover,
191
- &:focus {
192
- --#{$prefix}list-group-action-hover-color: var(--#{$prefix}emphasis-color);
193
- --#{$prefix}list-group-action-hover-bg: var(--#{$prefix}#{$state}-border-subtle);
194
- }
195
-
196
- &:active {
197
- --#{$prefix}list-group-active-color: var(--#{$prefix}emphasis-color);
198
- --#{$prefix}list-group-active-bg: var(--#{$prefix}#{$state}-text);
199
- --#{$prefix}list-group-active-border-color: var(--#{$prefix}#{$state}-text);
200
- }
201
- }
188
+ --#{$prefix}list-group-action-hover-color: var(--#{$prefix}emphasis-color);
189
+ --#{$prefix}list-group-action-hover-bg: var(--#{$prefix}#{$state}-border-subtle);
190
+ --#{$prefix}list-group-action-active-color: var(--#{$prefix}emphasis-color);
191
+ --#{$prefix}list-group-action-active-bg: var(--#{$prefix}#{$state}-border-subtle);
192
+ --#{$prefix}list-group-active-color: var(--#{$prefix}#{$state}-bg-subtle);
193
+ --#{$prefix}list-group-active-bg: var(--#{$prefix}#{$state}-text-emphasis);
194
+ --#{$prefix}list-group-active-border-color: var(--#{$prefix}#{$state}-text-emphasis);
202
195
  }
203
196
  }
204
197
  // scss-docs-end list-group-modifiers
@@ -6,17 +6,20 @@
6
6
  $theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value") !default;
7
7
  // scss-docs-end theme-colors-rgb
8
8
 
9
+ // scss-docs-start theme-text-map
9
10
  $theme-colors-text: (
10
- "primary": $primary-text,
11
- "secondary": $secondary-text,
12
- "success": $success-text,
13
- "info": $info-text,
14
- "warning": $warning-text,
15
- "danger": $danger-text,
16
- "light": $light-text,
17
- "dark": $dark-text,
11
+ "primary": $primary-text-emphasis,
12
+ "secondary": $secondary-text-emphasis,
13
+ "success": $success-text-emphasis,
14
+ "info": $info-text-emphasis,
15
+ "warning": $warning-text-emphasis,
16
+ "danger": $danger-text-emphasis,
17
+ "light": $light-text-emphasis,
18
+ "dark": $dark-text-emphasis,
18
19
  ) !default;
20
+ // scss-docs-end theme-text-map
19
21
 
22
+ // scss-docs-start theme-bg-subtle-map
20
23
  $theme-colors-bg-subtle: (
21
24
  "primary": $primary-bg-subtle,
22
25
  "secondary": $secondary-bg-subtle,
@@ -27,7 +30,9 @@ $theme-colors-bg-subtle: (
27
30
  "light": $light-bg-subtle,
28
31
  "dark": $dark-bg-subtle,
29
32
  ) !default;
33
+ // scss-docs-end theme-bg-subtle-map
30
34
 
35
+ // scss-docs-start theme-border-subtle-map
31
36
  $theme-colors-border-subtle: (
32
37
  "primary": $primary-border-subtle,
33
38
  "secondary": $secondary-border-subtle,
@@ -38,6 +43,52 @@ $theme-colors-border-subtle: (
38
43
  "light": $light-border-subtle,
39
44
  "dark": $dark-border-subtle,
40
45
  ) !default;
46
+ // scss-docs-end theme-border-subtle-map
47
+
48
+ $theme-colors-text-dark: null !default;
49
+ $theme-colors-bg-subtle-dark: null !default;
50
+ $theme-colors-border-subtle-dark: null !default;
51
+
52
+ @if $enable-dark-mode {
53
+ // scss-docs-start theme-text-dark-map
54
+ $theme-colors-text-dark: (
55
+ "primary": $primary-text-emphasis-dark,
56
+ "secondary": $secondary-text-emphasis-dark,
57
+ "success": $success-text-emphasis-dark,
58
+ "info": $info-text-emphasis-dark,
59
+ "warning": $warning-text-emphasis-dark,
60
+ "danger": $danger-text-emphasis-dark,
61
+ "light": $light-text-emphasis-dark,
62
+ "dark": $dark-text-emphasis-dark,
63
+ ) !default;
64
+ // scss-docs-end theme-text-dark-map
65
+
66
+ // scss-docs-start theme-bg-subtle-dark-map
67
+ $theme-colors-bg-subtle-dark: (
68
+ "primary": $primary-bg-subtle-dark,
69
+ "secondary": $secondary-bg-subtle-dark,
70
+ "success": $success-bg-subtle-dark,
71
+ "info": $info-bg-subtle-dark,
72
+ "warning": $warning-bg-subtle-dark,
73
+ "danger": $danger-bg-subtle-dark,
74
+ "light": $light-bg-subtle-dark,
75
+ "dark": $dark-bg-subtle-dark,
76
+ ) !default;
77
+ // scss-docs-end theme-bg-subtle-dark-map
78
+
79
+ // scss-docs-start theme-border-subtle-dark-map
80
+ $theme-colors-border-subtle-dark: (
81
+ "primary": $primary-border-subtle-dark,
82
+ "secondary": $secondary-border-subtle-dark,
83
+ "success": $success-border-subtle-dark,
84
+ "info": $info-border-subtle-dark,
85
+ "warning": $warning-border-subtle-dark,
86
+ "danger": $danger-border-subtle-dark,
87
+ "light": $light-border-subtle-dark,
88
+ "dark": $dark-border-subtle-dark,
89
+ ) !default;
90
+ // scss-docs-end theme-border-subtle-dark-map
91
+ }
41
92
 
42
93
  // Utilities maps
43
94
  //
@@ -60,14 +111,14 @@ $utilities-text: map-merge(
60
111
  $utilities-text-colors: map-loop($utilities-text, rgba-css-var, "$key", "text") !default;
61
112
 
62
113
  $utilities-text-emphasis-colors: (
63
- "primary-emphasis": var(--#{$prefix}primary-text),
64
- "secondary-emphasis": var(--#{$prefix}secondary-text),
65
- "success-emphasis": var(--#{$prefix}success-text),
66
- "info-emphasis": var(--#{$prefix}info-text),
67
- "warning-emphasis": var(--#{$prefix}warning-text),
68
- "danger-emphasis": var(--#{$prefix}danger-text),
69
- "light-emphasis": var(--#{$prefix}light-text),
70
- "dark-emphasis": var(--#{$prefix}dark-text)
114
+ "primary-emphasis": var(--#{$prefix}primary-text-emphasis),
115
+ "secondary-emphasis": var(--#{$prefix}secondary-text-emphasis),
116
+ "success-emphasis": var(--#{$prefix}success-text-emphasis),
117
+ "info-emphasis": var(--#{$prefix}info-text-emphasis),
118
+ "warning-emphasis": var(--#{$prefix}warning-text-emphasis),
119
+ "danger-emphasis": var(--#{$prefix}danger-text-emphasis),
120
+ "light-emphasis": var(--#{$prefix}light-text-emphasis),
121
+ "dark-emphasis": var(--#{$prefix}dark-text-emphasis)
71
122
  ) !default;
72
123
  // scss-docs-end utilities-text-colors
73
124
 
@@ -92,13 +143,13 @@ $utilities-bg-subtle: (
92
143
  "light-subtle": var(--#{$prefix}light-bg-subtle),
93
144
  "dark-subtle": var(--#{$prefix}dark-bg-subtle)
94
145
  ) !default;
95
- // $utilities-bg-subtle-colors: map-loop($utilities-bg-subtle, rgba-css-var, "$key", "bg") !default;
96
146
  // scss-docs-end utilities-bg-colors
97
147
 
98
148
  // scss-docs-start utilities-border-colors
99
149
  $utilities-border: map-merge(
100
150
  $utilities-colors,
101
151
  (
152
+ "black": to-rgb($black),
102
153
  "white": to-rgb($white)
103
154
  )
104
155
  ) !default;
@@ -116,6 +167,8 @@ $utilities-border-subtle: (
116
167
  ) !default;
117
168
  // scss-docs-end utilities-border-colors
118
169
 
170
+ $utilities-links-underline: map-loop($utilities-colors, rgba-css-var, "$key", "link-underline") !default;
171
+
119
172
  $negative-spacers: if($enable-negative-margins, negativify-map($spacers), null) !default;
120
173
 
121
174
  $gutters: $spacers !default;
@@ -28,6 +28,8 @@
28
28
  font-weight: var(--#{$prefix}nav-link-font-weight);
29
29
  color: var(--#{$prefix}nav-link-color);
30
30
  text-decoration: if($link-decoration == none, null, none);
31
+ background: none;
32
+ border: 0;
31
33
  @include transition($nav-link-transition);
32
34
 
33
35
  &:hover,
@@ -36,6 +38,11 @@
36
38
  text-decoration: if($link-hover-decoration == underline, none, null);
37
39
  }
38
40
 
41
+ &:focus-visible {
42
+ outline: 0;
43
+ box-shadow: $nav-link-focus-box-shadow;
44
+ }
45
+
39
46
  // Disabled state lightens text
40
47
  &.disabled {
41
48
  color: var(--#{$prefix}nav-link-disabled-color);
@@ -63,7 +70,6 @@
63
70
 
64
71
  .nav-link {
65
72
  margin-bottom: calc(-1 * var(--#{$prefix}nav-tabs-border-width)); // stylelint-disable-line function-disallowed-list
66
- background: none;
67
73
  border: var(--#{$prefix}nav-tabs-border-width) solid transparent;
68
74
  @include border-top-radius(var(--#{$prefix}nav-tabs-border-radius));
69
75
 
@@ -110,8 +116,6 @@
110
116
  // scss-docs-end nav-pills-css-vars
111
117
 
112
118
  .nav-link {
113
- background: none;
114
- border: 0;
115
119
  @include border-radius(var(--#{$prefix}nav-pills-border-radius));
116
120
 
117
121
  &:disabled {
@@ -129,6 +133,39 @@
129
133
  }
130
134
 
131
135
 
136
+ //
137
+ // Underline
138
+ //
139
+
140
+ .nav-underline {
141
+ // scss-docs-start nav-underline-css-vars
142
+ --#{$prefix}nav-underline-gap: #{$nav-underline-gap};
143
+ --#{$prefix}nav-underline-border-width: #{$nav-underline-border-width};
144
+ --#{$prefix}nav-underline-link-active-color: #{$nav-underline-link-active-color};
145
+ // scss-docs-end nav-underline-css-vars
146
+
147
+ gap: var(--#{$prefix}nav-underline-gap);
148
+
149
+ .nav-link {
150
+ padding-right: 0;
151
+ padding-left: 0;
152
+ border-bottom: var(--#{$prefix}nav-underline-border-width) solid transparent;
153
+
154
+ &:hover,
155
+ &:focus {
156
+ border-bottom-color: currentcolor;
157
+ }
158
+ }
159
+
160
+ .nav-link.active,
161
+ .show > .nav-link {
162
+ font-weight: $font-weight-bold;
163
+ color: var(--#{$prefix}nav-underline-link-active-color);
164
+ border-bottom-color: currentcolor;
165
+ }
166
+ }
167
+
168
+
132
169
  //
133
170
  // Justified variants
134
171
  //
@@ -100,9 +100,11 @@
100
100
  margin-bottom: 0;
101
101
  list-style: none;
102
102
 
103
- .show > .nav-link,
104
- .nav-link.active {
105
- color: var(--#{$prefix}navbar-active-color);
103
+ .nav-link {
104
+ &.active,
105
+ &.show {
106
+ color: var(--#{$prefix}navbar-active-color);
107
+ }
106
108
  }
107
109
 
108
110
  .dropdown-menu {
@@ -279,7 +281,7 @@
279
281
 
280
282
  @if $enable-dark-mode {
281
283
  @include color-mode(dark) {
282
- .navbar {
284
+ .navbar-toggler-icon {
283
285
  --#{$prefix}navbar-toggler-icon-bg: #{escape-svg($navbar-dark-toggler-icon-bg)};
284
286
  }
285
287
  }
@@ -75,7 +75,7 @@
75
75
  margin-left: $pagination-margin-start;
76
76
  }
77
77
 
78
- @if $pagination-margin-start == calc($pagination-border-width * -1) {
78
+ @if $pagination-margin-start == calc(#{$pagination-border-width} * -1) {
79
79
  &:first-child {
80
80
  .page-link {
81
81
  @include border-start-radius(var(--#{$prefix}pagination-border-radius));
@@ -23,7 +23,7 @@
23
23
  }
24
24
 
25
25
  @each $color, $value in $theme-colors-text {
26
- --#{$prefix}#{$color}-text: #{$value};
26
+ --#{$prefix}#{$color}-text-emphasis: #{$value};
27
27
  }
28
28
 
29
29
  @each $color, $value in $theme-colors-bg-subtle {
@@ -36,8 +36,6 @@
36
36
 
37
37
  --#{$prefix}white-rgb: #{to-rgb($white)};
38
38
  --#{$prefix}black-rgb: #{to-rgb($black)};
39
- --#{$prefix}body-color-rgb: #{to-rgb($body-color)};
40
- --#{$prefix}body-bg-rgb: #{to-rgb($body-bg)};
41
39
 
42
40
  // Fonts
43
41
 
@@ -56,7 +54,14 @@
56
54
  @include rfs($font-size-base, --#{$prefix}body-font-size);
57
55
  --#{$prefix}body-font-weight: #{$font-weight-base};
58
56
  --#{$prefix}body-line-height: #{$line-height-base};
57
+ @if $body-text-align != null {
58
+ --#{$prefix}body-text-align: #{$body-text-align};
59
+ }
60
+
59
61
  --#{$prefix}body-color: #{$body-color};
62
+ --#{$prefix}body-color-rgb: #{to-rgb($body-color)};
63
+ --#{$prefix}body-bg: #{$body-bg};
64
+ --#{$prefix}body-bg-rgb: #{to-rgb($body-bg)};
60
65
 
61
66
  --#{$prefix}emphasis-color: #{$body-emphasis-color};
62
67
  --#{$prefix}emphasis-color-rgb: #{to-rgb($body-emphasis-color)};
@@ -70,12 +75,6 @@
70
75
  --#{$prefix}tertiary-color-rgb: #{to-rgb($body-tertiary-color)};
71
76
  --#{$prefix}tertiary-bg: #{$body-tertiary-bg};
72
77
  --#{$prefix}tertiary-bg-rgb: #{to-rgb($body-tertiary-bg)};
73
-
74
- @if $body-text-align != null {
75
- --#{$prefix}body-text-align: #{$body-text-align};
76
- }
77
- --#{$prefix}body-bg: #{$body-bg};
78
- --#{$prefix}body-bg-rgb: #{to-rgb($body-bg)};
79
78
  // scss-docs-end root-body-variables
80
79
 
81
80
  @if $headings-color != null {
@@ -106,7 +105,8 @@
106
105
  --#{$prefix}border-radius-sm: #{$border-radius-sm};
107
106
  --#{$prefix}border-radius-lg: #{$border-radius-lg};
108
107
  --#{$prefix}border-radius-xl: #{$border-radius-xl};
109
- --#{$prefix}border-radius-2xl: #{$border-radius-2xl};
108
+ --#{$prefix}border-radius-xxl: #{$border-radius-xxl};
109
+ --#{$prefix}border-radius-2xl: var(--#{$prefix}border-radius-xxl); // Deprecated in v5.3.0 for consistency
110
110
  --#{$prefix}border-radius-pill: #{$border-radius-pill};
111
111
  // scss-docs-end root-border-var
112
112
 
@@ -115,22 +115,25 @@
115
115
  --#{$prefix}box-shadow-lg: #{$box-shadow-lg};
116
116
  --#{$prefix}box-shadow-inset: #{$box-shadow-inset};
117
117
 
118
- --#{$prefix}emphasis-color: #{$emphasis-color};
119
-
120
- // scss-docs-start form-control-vars
121
- --#{$prefix}form-control-bg: var(--#{$prefix}body-bg);
122
- --#{$prefix}form-control-disabled-bg: var(--#{$prefix}secondary-bg);
123
- // scss-docs-end form-control-vars
124
-
125
- --#{$prefix}highlight-bg: #{$mark-bg};
126
-
127
- @each $name, $value in $grid-breakpoints {
128
- --#{$prefix}breakpoint-#{$name}: #{$value};
129
- }
118
+ // Focus styles
119
+ // scss-docs-start root-focus-variables
120
+ --#{$prefix}focus-ring-width: #{$focus-ring-width};
121
+ --#{$prefix}focus-ring-opacity: #{$focus-ring-opacity};
122
+ --#{$prefix}focus-ring-color: #{$focus-ring-color};
123
+ // scss-docs-end root-focus-variables
124
+
125
+ // scss-docs-start root-form-validation-variables
126
+ --#{$prefix}form-valid-color: #{$form-valid-color};
127
+ --#{$prefix}form-valid-border-color: #{$form-valid-border-color};
128
+ --#{$prefix}form-invalid-color: #{$form-invalid-color};
129
+ --#{$prefix}form-invalid-border-color: #{$form-invalid-border-color};
130
+ // scss-docs-end root-form-validation-variables
130
131
  }
131
132
 
132
133
  @if $enable-dark-mode {
133
134
  @include color-mode(dark, true) {
135
+ color-scheme: dark;
136
+
134
137
  // scss-docs-start root-dark-mode-vars
135
138
  --#{$prefix}body-color: #{$body-color-dark};
136
139
  --#{$prefix}body-color-rgb: #{to-rgb($body-color-dark)};
@@ -150,36 +153,21 @@
150
153
  --#{$prefix}tertiary-bg: #{$body-tertiary-bg-dark};
151
154
  --#{$prefix}tertiary-bg-rgb: #{to-rgb($body-tertiary-bg-dark)};
152
155
 
153
- --#{$prefix}emphasis-color: #{$emphasis-color-dark};
154
-
155
- --#{$prefix}primary-text: #{$primary-text-dark};
156
- --#{$prefix}secondary-text: #{$secondary-text-dark};
157
- --#{$prefix}success-text: #{$success-text-dark};
158
- --#{$prefix}info-text: #{$info-text-dark};
159
- --#{$prefix}warning-text: #{$warning-text-dark};
160
- --#{$prefix}danger-text: #{$danger-text-dark};
161
- --#{$prefix}light-text: #{$light-text-dark};
162
- --#{$prefix}dark-text: #{$dark-text-dark};
163
-
164
- --#{$prefix}primary-bg-subtle: #{$primary-bg-subtle-dark};
165
- --#{$prefix}secondary-bg-subtle: #{$secondary-bg-subtle-dark};
166
- --#{$prefix}success-bg-subtle: #{$success-bg-subtle-dark};
167
- --#{$prefix}info-bg-subtle: #{$info-bg-subtle-dark};
168
- --#{$prefix}warning-bg-subtle: #{$warning-bg-subtle-dark};
169
- --#{$prefix}danger-bg-subtle: #{$danger-bg-subtle-dark};
170
- --#{$prefix}light-bg-subtle: #{$light-bg-subtle-dark};
171
- --#{$prefix}dark-bg-subtle: #{$dark-bg-subtle-dark};
172
-
173
- --#{$prefix}primary-border-subtle: #{$primary-border-subtle-dark};
174
- --#{$prefix}secondary-border-subtle: #{$secondary-border-subtle-dark};
175
- --#{$prefix}success-border-subtle: #{$success-border-subtle-dark};
176
- --#{$prefix}info-border-subtle: #{$info-border-subtle-dark};
177
- --#{$prefix}warning-border-subtle: #{$warning-border-subtle-dark};
178
- --#{$prefix}danger-border-subtle: #{$danger-border-subtle-dark};
179
- --#{$prefix}light-border-subtle: #{$light-border-subtle-dark};
180
- --#{$prefix}dark-border-subtle: #{$dark-border-subtle-dark};
181
-
182
- --#{$prefix}heading-color: #{$headings-color-dark};
156
+ @each $color, $value in $theme-colors-text-dark {
157
+ --#{$prefix}#{$color}-text-emphasis: #{$value};
158
+ }
159
+
160
+ @each $color, $value in $theme-colors-bg-subtle-dark {
161
+ --#{$prefix}#{$color}-bg-subtle: #{$value};
162
+ }
163
+
164
+ @each $color, $value in $theme-colors-border-subtle-dark {
165
+ --#{$prefix}#{$color}-border-subtle: #{$value};
166
+ }
167
+
168
+ @if $headings-color-dark != null {
169
+ --#{$prefix}heading-color: #{$headings-color-dark};
170
+ }
183
171
 
184
172
  --#{$prefix}link-color: #{$link-color-dark};
185
173
  --#{$prefix}link-hover-color: #{$link-hover-color-dark};
@@ -190,6 +178,11 @@
190
178
 
191
179
  --#{$prefix}border-color: #{$border-color-dark};
192
180
  --#{$prefix}border-color-translucent: #{$border-color-translucent-dark};
181
+
182
+ --#{$prefix}form-valid-color: #{$form-valid-color-dark};
183
+ --#{$prefix}form-valid-border-color: #{$form-valid-border-color-dark};
184
+ --#{$prefix}form-invalid-color: #{$form-invalid-color-dark};
185
+ --#{$prefix}form-invalid-border-color: #{$form-invalid-border-color-dark};
193
186
  // scss-docs-end root-dark-mode-vars
194
187
  }
195
188
  }
@@ -42,7 +42,7 @@
42
42
  }
43
43
 
44
44
  .table-group-divider {
45
- border-top: calc($table-border-width * 2) solid $table-group-separator-color; // stylelint-disable-line function-disallowed-list
45
+ border-top: calc(#{$table-border-width} * 2) solid $table-group-separator-color; // stylelint-disable-line function-disallowed-list
46
46
  }
47
47
 
48
48
  //
@@ -17,7 +17,6 @@
17
17
 
18
18
  z-index: var(--#{$prefix}tooltip-zindex);
19
19
  display: block;
20
- padding: var(--#{$prefix}tooltip-arrow-height);
21
20
  margin: var(--#{$prefix}tooltip-margin);
22
21
  @include deprecate("`$tooltip-margin`", "v5", "v5.x", true);
23
22
  // Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element.
@@ -45,7 +44,7 @@
45
44
  }
46
45
 
47
46
  .bs-tooltip-top .tooltip-arrow {
48
- bottom: 0;
47
+ bottom: calc(-1 * var(--#{$prefix}tooltip-arrow-height)); // stylelint-disable-line function-disallowed-list
49
48
 
50
49
  &::before {
51
50
  top: -1px;
@@ -56,7 +55,7 @@
56
55
 
57
56
  /* rtl:begin:ignore */
58
57
  .bs-tooltip-end .tooltip-arrow {
59
- left: 0;
58
+ left: calc(-1 * var(--#{$prefix}tooltip-arrow-height)); // stylelint-disable-line function-disallowed-list
60
59
  width: var(--#{$prefix}tooltip-arrow-height);
61
60
  height: var(--#{$prefix}tooltip-arrow-width);
62
61
 
@@ -70,7 +69,7 @@
70
69
  /* rtl:end:ignore */
71
70
 
72
71
  .bs-tooltip-bottom .tooltip-arrow {
73
- top: 0;
72
+ top: calc(-1 * var(--#{$prefix}tooltip-arrow-height)); // stylelint-disable-line function-disallowed-list
74
73
 
75
74
  &::before {
76
75
  bottom: -1px;
@@ -81,7 +80,7 @@
81
80
 
82
81
  /* rtl:begin:ignore */
83
82
  .bs-tooltip-start .tooltip-arrow {
84
- right: 0;
83
+ right: calc(-1 * var(--#{$prefix}tooltip-arrow-height)); // stylelint-disable-line function-disallowed-list
85
84
  width: var(--#{$prefix}tooltip-arrow-height);
86
85
  height: var(--#{$prefix}tooltip-arrow-width);
87
86