paraqeet 0.9.0 → 0.10.0

Sign up to get free protection for your applications and to get access to all the features.
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