elixir-toolkit-theme 2.1.0 → 2.2.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (86) hide show
  1. checksums.yaml +4 -4
  2. data/_includes/contributor-carousel-selection.html +2 -3
  3. data/_includes/contributor-minitiles-page.html +2 -3
  4. data/_includes/contributor-tiles-all.html +2 -3
  5. data/_includes/news.html +1 -1
  6. data/_includes/resource-table-all.html +1 -1
  7. data/_includes/section-navigation-tiles.html +20 -2
  8. data/_includes/toc.html +1 -1
  9. data/_layouts/default.html +2 -2
  10. data/_layouts/page.html +1 -1
  11. data/_sass/bootstrap/_accordion.scss +9 -0
  12. data/_sass/bootstrap/_alert.scss +8 -11
  13. data/_sass/bootstrap/_button-group.scss +2 -2
  14. data/_sass/bootstrap/_buttons.scss +3 -3
  15. data/_sass/bootstrap/_card.scss +5 -0
  16. data/_sass/bootstrap/_carousel.scss +20 -2
  17. data/_sass/bootstrap/_close.scss +32 -9
  18. data/_sass/bootstrap/_dropdown.scss +1 -0
  19. data/_sass/bootstrap/_functions.scss +1 -1
  20. data/_sass/bootstrap/_grid.scss +6 -0
  21. data/_sass/bootstrap/_helpers.scss +2 -0
  22. data/_sass/bootstrap/_list-group.scss +12 -7
  23. data/_sass/bootstrap/_maps.scss +120 -0
  24. data/_sass/bootstrap/_mixins.scss +1 -2
  25. data/_sass/bootstrap/_nav.scss +42 -17
  26. data/_sass/bootstrap/_navbar.scss +15 -4
  27. data/_sass/bootstrap/_offcanvas.scss +4 -2
  28. data/_sass/bootstrap/_pagination.scss +1 -1
  29. data/_sass/bootstrap/_progress.scss +10 -1
  30. data/_sass/bootstrap/_reboot.scss +7 -7
  31. data/_sass/bootstrap/_root.scss +121 -10
  32. data/_sass/bootstrap/_tables.scss +18 -11
  33. data/_sass/bootstrap/_tooltip.scss +4 -5
  34. data/_sass/bootstrap/_utilities.scss +172 -13
  35. data/_sass/bootstrap/_variables-dark.scss +85 -0
  36. data/_sass/bootstrap/_variables.scss +268 -157
  37. data/_sass/bootstrap/bootstrap-grid.scss +1 -3
  38. data/_sass/bootstrap/bootstrap-reboot.scss +1 -0
  39. data/_sass/bootstrap/bootstrap-utilities.scss +1 -0
  40. data/_sass/bootstrap/bootstrap.scss +1 -0
  41. data/_sass/bootstrap/forms/_floating-labels.scss +23 -3
  42. data/_sass/bootstrap/forms/_form-check.scss +25 -12
  43. data/_sass/bootstrap/forms/_form-control.scss +24 -4
  44. data/_sass/bootstrap/forms/_form-range.scss +3 -3
  45. data/_sass/bootstrap/forms/_form-select.scss +12 -3
  46. data/_sass/bootstrap/forms/_input-group.scss +1 -1
  47. data/_sass/bootstrap/helpers/_color-bg.scss +1 -4
  48. data/_sass/bootstrap/helpers/_colored-links.scss +20 -2
  49. data/_sass/bootstrap/helpers/_focus-ring.scss +5 -0
  50. data/_sass/bootstrap/helpers/_icon-link.scss +25 -0
  51. data/_sass/bootstrap/helpers/_vr.scss +1 -1
  52. data/_sass/bootstrap/mixins/_alert.scss +4 -1
  53. data/_sass/bootstrap/mixins/_banner.scss +2 -4
  54. data/_sass/bootstrap/mixins/_caret.scss +30 -25
  55. data/_sass/bootstrap/mixins/_color-mode.scss +21 -0
  56. data/_sass/bootstrap/mixins/_forms.scss +8 -7
  57. data/_sass/bootstrap/mixins/_list-group.scss +2 -0
  58. data/_sass/bootstrap/mixins/_utilities.scss +1 -1
  59. data/_sass/bootstrap/mixins/_visually-hidden.scss +5 -1
  60. data/_sass/bootstrap/tests/jasmine.js +16 -0
  61. data/_sass/bootstrap/tests/mixins/_color-modes.test.scss +69 -0
  62. data/_sass/bootstrap/tests/mixins/_media-query-color-mode-full.test.scss +8 -0
  63. data/_sass/bootstrap/tests/mixins/_utilities.test.scss +393 -0
  64. data/_sass/bootstrap/tests/sass-true/register.js +14 -0
  65. data/_sass/bootstrap/tests/sass-true/runner.js +17 -0
  66. data/_sass/bootstrap/tests/utilities/_api.test.scss +75 -0
  67. data/_sass/bootstrap/vendor/_rfs.scss +23 -29
  68. data/assets/css/all.min.css +6 -3
  69. data/assets/css/dataTables.bootstrap5.min.css +2 -2
  70. data/assets/css/main.scss +30 -4
  71. data/assets/js/anchor.min.js +3 -3
  72. data/assets/js/bootstrap.bundle.min.js +3 -3
  73. data/assets/js/bootstrap.bundle.min.js.map +1 -1
  74. data/assets/js/dataTables.bootstrap5.min.js +4 -14
  75. data/assets/js/jquery.dataTables.min.js +4 -187
  76. data/assets/js/jquery.min.js +2 -2
  77. data/assets/js/jquery.min.map +1 -1
  78. data/assets/webfonts/fa-brands-400.ttf +0 -0
  79. data/assets/webfonts/fa-brands-400.woff2 +0 -0
  80. data/assets/webfonts/fa-regular-400.ttf +0 -0
  81. data/assets/webfonts/fa-regular-400.woff2 +0 -0
  82. data/assets/webfonts/fa-solid-900.ttf +0 -0
  83. data/assets/webfonts/fa-solid-900.woff2 +0 -0
  84. data/assets/webfonts/fa-v4compatibility.ttf +0 -0
  85. data/assets/webfonts/fa-v4compatibility.woff2 +0 -0
  86. metadata +13 -2
@@ -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,8 +38,14 @@
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
- &.disabled {
47
+ &.disabled,
48
+ &:disabled {
41
49
  color: var(--#{$prefix}nav-link-disabled-color);
42
50
  pointer-events: none;
43
51
  cursor: default;
@@ -63,7 +71,6 @@
63
71
 
64
72
  .nav-link {
65
73
  margin-bottom: calc(-1 * var(--#{$prefix}nav-tabs-border-width)); // stylelint-disable-line function-disallowed-list
66
- background: none;
67
74
  border: var(--#{$prefix}nav-tabs-border-width) solid transparent;
68
75
  @include border-top-radius(var(--#{$prefix}nav-tabs-border-radius));
69
76
 
@@ -73,13 +80,6 @@
73
80
  isolation: isolate;
74
81
  border-color: var(--#{$prefix}nav-tabs-link-hover-border-color);
75
82
  }
76
-
77
- &.disabled,
78
- &:disabled {
79
- color: var(--#{$prefix}nav-link-disabled-color);
80
- background-color: transparent;
81
- border-color: transparent;
82
- }
83
83
  }
84
84
 
85
85
  .nav-link.active,
@@ -110,15 +110,7 @@
110
110
  // scss-docs-end nav-pills-css-vars
111
111
 
112
112
  .nav-link {
113
- background: none;
114
- border: 0;
115
113
  @include border-radius(var(--#{$prefix}nav-pills-border-radius));
116
-
117
- &:disabled {
118
- color: var(--#{$prefix}nav-link-disabled-color);
119
- background-color: transparent;
120
- border-color: transparent;
121
- }
122
114
  }
123
115
 
124
116
  .nav-link.active,
@@ -129,6 +121,39 @@
129
121
  }
130
122
 
131
123
 
124
+ //
125
+ // Underline
126
+ //
127
+
128
+ .nav-underline {
129
+ // scss-docs-start nav-underline-css-vars
130
+ --#{$prefix}nav-underline-gap: #{$nav-underline-gap};
131
+ --#{$prefix}nav-underline-border-width: #{$nav-underline-border-width};
132
+ --#{$prefix}nav-underline-link-active-color: #{$nav-underline-link-active-color};
133
+ // scss-docs-end nav-underline-css-vars
134
+
135
+ gap: var(--#{$prefix}nav-underline-gap);
136
+
137
+ .nav-link {
138
+ padding-right: 0;
139
+ padding-left: 0;
140
+ border-bottom: var(--#{$prefix}nav-underline-border-width) solid transparent;
141
+
142
+ &:hover,
143
+ &:focus {
144
+ border-bottom-color: currentcolor;
145
+ }
146
+ }
147
+
148
+ .nav-link.active,
149
+ .show > .nav-link {
150
+ font-weight: $font-weight-bold;
151
+ color: var(--#{$prefix}nav-underline-link-active-color);
152
+ border-bottom-color: currentcolor;
153
+ }
154
+ }
155
+
156
+
132
157
  //
133
158
  // Justified variants
134
159
  //
@@ -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 {
@@ -264,7 +266,8 @@
264
266
  @include deprecate("`.navbar-light`", "v5.2.0", "v6.0.0", true);
265
267
  }
266
268
 
267
- .navbar-dark {
269
+ .navbar-dark,
270
+ .navbar[data-bs-theme="dark"] {
268
271
  // scss-docs-start navbar-dark-css-vars
269
272
  --#{$prefix}navbar-color: #{$navbar-dark-color};
270
273
  --#{$prefix}navbar-hover-color: #{$navbar-dark-hover-color};
@@ -276,3 +279,11 @@
276
279
  --#{$prefix}navbar-toggler-icon-bg: #{escape-svg($navbar-dark-toggler-icon-bg)};
277
280
  // scss-docs-end navbar-dark-css-vars
278
281
  }
282
+
283
+ @if $enable-dark-mode {
284
+ @include color-mode(dark) {
285
+ .navbar-toggler-icon {
286
+ --#{$prefix}navbar-toggler-icon-bg: #{escape-svg($navbar-dark-toggler-icon-bg)};
287
+ }
288
+ }
289
+ }
@@ -12,6 +12,8 @@
12
12
  --#{$prefix}offcanvas-border-width: #{$offcanvas-border-width};
13
13
  --#{$prefix}offcanvas-border-color: #{$offcanvas-border-color};
14
14
  --#{$prefix}offcanvas-box-shadow: #{$offcanvas-box-shadow};
15
+ --#{$prefix}offcanvas-transition: #{transform $offcanvas-transition-duration ease-in-out};
16
+ --#{$prefix}offcanvas-title-line-height: #{$offcanvas-title-line-height};
15
17
  // scss-docs-end offcanvas-css-vars
16
18
  }
17
19
 
@@ -42,7 +44,7 @@
42
44
  background-clip: padding-box;
43
45
  outline: 0;
44
46
  @include box-shadow(var(--#{$prefix}offcanvas-box-shadow));
45
- @include transition(transform $offcanvas-transition-duration ease-in-out);
47
+ @include transition(var(--#{$prefix}offcanvas-transition));
46
48
 
47
49
  &.offcanvas-start {
48
50
  top: 0;
@@ -134,7 +136,7 @@
134
136
 
135
137
  .offcanvas-title {
136
138
  margin-bottom: 0;
137
- line-height: $offcanvas-title-line-height;
139
+ line-height: var(--#{$prefix}offcanvas-title-line-height);
138
140
  }
139
141
 
140
142
  .offcanvas-body {
@@ -75,7 +75,7 @@
75
75
  margin-left: $pagination-margin-start;
76
76
  }
77
77
 
78
- @if $pagination-margin-start == ($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));
@@ -8,7 +8,8 @@
8
8
  }
9
9
  // scss-docs-end progress-keyframes
10
10
 
11
- .progress {
11
+ .progress,
12
+ .progress-stacked {
12
13
  // scss-docs-start progress-css-vars
13
14
  --#{$prefix}progress-height: #{$progress-height};
14
15
  @include rfs($progress-font-size, --#{$prefix}progress-font-size);
@@ -46,6 +47,14 @@
46
47
  background-size: var(--#{$prefix}progress-height) var(--#{$prefix}progress-height);
47
48
  }
48
49
 
50
+ .progress-stacked > .progress {
51
+ overflow: visible;
52
+ }
53
+
54
+ .progress-stacked > .progress > .progress-bar {
55
+ width: 100%;
56
+ }
57
+
49
58
  @if $enable-transitions {
50
59
  .progress-bar-animated {
51
60
  animation: $progress-bar-animation-timing progress-bar-stripes;
@@ -87,7 +87,7 @@ hr {
87
87
  font-style: $headings-font-style;
88
88
  font-weight: $headings-font-weight;
89
89
  line-height: $headings-line-height;
90
- color: $headings-color;
90
+ color: var(--#{$prefix}heading-color);
91
91
  }
92
92
 
93
93
  h1 {
@@ -241,11 +241,11 @@ sup { top: -.5em; }
241
241
  // Links
242
242
 
243
243
  a {
244
- color: var(--#{$prefix}link-color);
244
+ color: rgba(var(--#{$prefix}link-color-rgb), var(--#{$prefix}link-opacity, 1));
245
245
  text-decoration: $link-decoration;
246
246
 
247
247
  &:hover {
248
- color: var(--#{$prefix}link-hover-color);
248
+ --#{$prefix}link-color-rgb: var(--#{$prefix}link-hover-color-rgb);
249
249
  text-decoration: $link-hover-decoration;
250
250
  }
251
251
  }
@@ -524,15 +524,15 @@ legend {
524
524
  height: auto;
525
525
  }
526
526
 
527
- // 1. Correct the outline style in Safari.
528
- // 2. This overrides the extra rounded corners on search inputs in iOS so that our
527
+ // 1. This overrides the extra rounded corners on search inputs in iOS so that our
529
528
  // `.form-control` class can properly style them. Note that this cannot simply
530
529
  // be added to `.form-control` as it's not specific enough. For details, see
531
530
  // https://github.com/twbs/bootstrap/issues/11586.
531
+ // 2. Correct the outline style in Safari.
532
532
 
533
533
  [type="search"] {
534
- outline-offset: -2px; // 1
535
- -webkit-appearance: textfield; // 2
534
+ -webkit-appearance: textfield; // 1
535
+ outline-offset: -2px; // 2
536
536
  }
537
537
 
538
538
  // 1. A few input types should stay LTR
@@ -1,4 +1,5 @@
1
- :root {
1
+ :root,
2
+ [data-bs-theme="light"] {
2
3
  // Note: Custom variable values only support SassScript inside `#{}`.
3
4
 
4
5
  // Colors
@@ -21,10 +22,20 @@
21
22
  --#{$prefix}#{$color}-rgb: #{$value};
22
23
  }
23
24
 
25
+ @each $color, $value in $theme-colors-text {
26
+ --#{$prefix}#{$color}-text-emphasis: #{$value};
27
+ }
28
+
29
+ @each $color, $value in $theme-colors-bg-subtle {
30
+ --#{$prefix}#{$color}-bg-subtle: #{$value};
31
+ }
32
+
33
+ @each $color, $value in $theme-colors-border-subtle {
34
+ --#{$prefix}#{$color}-border-subtle: #{$value};
35
+ }
36
+
24
37
  --#{$prefix}white-rgb: #{to-rgb($white)};
25
38
  --#{$prefix}black-rgb: #{to-rgb($black)};
26
- --#{$prefix}body-color-rgb: #{to-rgb($body-color)};
27
- --#{$prefix}body-bg-rgb: #{to-rgb($body-bg)};
28
39
 
29
40
  // Fonts
30
41
 
@@ -39,17 +50,49 @@
39
50
  @if $font-size-root != null {
40
51
  --#{$prefix}root-font-size: #{$font-size-root};
41
52
  }
42
- --#{$prefix}body-font-family: #{$font-family-base};
53
+ --#{$prefix}body-font-family: #{inspect($font-family-base)};
43
54
  @include rfs($font-size-base, --#{$prefix}body-font-size);
44
55
  --#{$prefix}body-font-weight: #{$font-weight-base};
45
56
  --#{$prefix}body-line-height: #{$line-height-base};
46
- --#{$prefix}body-color: #{$body-color};
47
57
  @if $body-text-align != null {
48
58
  --#{$prefix}body-text-align: #{$body-text-align};
49
59
  }
60
+
61
+ --#{$prefix}body-color: #{$body-color};
62
+ --#{$prefix}body-color-rgb: #{to-rgb($body-color)};
50
63
  --#{$prefix}body-bg: #{$body-bg};
64
+ --#{$prefix}body-bg-rgb: #{to-rgb($body-bg)};
65
+
66
+ --#{$prefix}emphasis-color: #{$body-emphasis-color};
67
+ --#{$prefix}emphasis-color-rgb: #{to-rgb($body-emphasis-color)};
68
+
69
+ --#{$prefix}secondary-color: #{$body-secondary-color};
70
+ --#{$prefix}secondary-color-rgb: #{to-rgb($body-secondary-color)};
71
+ --#{$prefix}secondary-bg: #{$body-secondary-bg};
72
+ --#{$prefix}secondary-bg-rgb: #{to-rgb($body-secondary-bg)};
73
+
74
+ --#{$prefix}tertiary-color: #{$body-tertiary-color};
75
+ --#{$prefix}tertiary-color-rgb: #{to-rgb($body-tertiary-color)};
76
+ --#{$prefix}tertiary-bg: #{$body-tertiary-bg};
77
+ --#{$prefix}tertiary-bg-rgb: #{to-rgb($body-tertiary-bg)};
51
78
  // scss-docs-end root-body-variables
52
79
 
80
+ --#{$prefix}heading-color: #{$headings-color};
81
+
82
+ --#{$prefix}link-color: #{$link-color};
83
+ --#{$prefix}link-color-rgb: #{to-rgb($link-color)};
84
+ --#{$prefix}link-decoration: #{$link-decoration};
85
+
86
+ --#{$prefix}link-hover-color: #{$link-hover-color};
87
+ --#{$prefix}link-hover-color-rgb: #{to-rgb($link-hover-color)};
88
+
89
+ @if $link-hover-decoration != null {
90
+ --#{$prefix}link-hover-decoration: #{$link-hover-decoration};
91
+ }
92
+
93
+ --#{$prefix}code-color: #{$code-color};
94
+ --#{$prefix}highlight-bg: #{$mark-bg};
95
+
53
96
  // scss-docs-start root-border-var
54
97
  --#{$prefix}border-width: #{$border-width};
55
98
  --#{$prefix}border-style: #{$border-style};
@@ -60,14 +103,82 @@
60
103
  --#{$prefix}border-radius-sm: #{$border-radius-sm};
61
104
  --#{$prefix}border-radius-lg: #{$border-radius-lg};
62
105
  --#{$prefix}border-radius-xl: #{$border-radius-xl};
63
- --#{$prefix}border-radius-2xl: #{$border-radius-2xl};
106
+ --#{$prefix}border-radius-xxl: #{$border-radius-xxl};
107
+ --#{$prefix}border-radius-2xl: var(--#{$prefix}border-radius-xxl); // Deprecated in v5.3.0 for consistency
64
108
  --#{$prefix}border-radius-pill: #{$border-radius-pill};
65
109
  // scss-docs-end root-border-var
66
110
 
67
- --#{$prefix}link-color: #{$link-color};
68
- --#{$prefix}link-hover-color: #{$link-hover-color};
111
+ --#{$prefix}box-shadow: #{$box-shadow};
112
+ --#{$prefix}box-shadow-sm: #{$box-shadow-sm};
113
+ --#{$prefix}box-shadow-lg: #{$box-shadow-lg};
114
+ --#{$prefix}box-shadow-inset: #{$box-shadow-inset};
69
115
 
70
- --#{$prefix}code-color: #{$code-color};
116
+ // Focus styles
117
+ // scss-docs-start root-focus-variables
118
+ --#{$prefix}focus-ring-width: #{$focus-ring-width};
119
+ --#{$prefix}focus-ring-opacity: #{$focus-ring-opacity};
120
+ --#{$prefix}focus-ring-color: #{$focus-ring-color};
121
+ // scss-docs-end root-focus-variables
71
122
 
72
- --#{$prefix}highlight-bg: #{$mark-bg};
123
+ // scss-docs-start root-form-validation-variables
124
+ --#{$prefix}form-valid-color: #{$form-valid-color};
125
+ --#{$prefix}form-valid-border-color: #{$form-valid-border-color};
126
+ --#{$prefix}form-invalid-color: #{$form-invalid-color};
127
+ --#{$prefix}form-invalid-border-color: #{$form-invalid-border-color};
128
+ // scss-docs-end root-form-validation-variables
129
+ }
130
+
131
+ @if $enable-dark-mode {
132
+ @include color-mode(dark, true) {
133
+ color-scheme: dark;
134
+
135
+ // scss-docs-start root-dark-mode-vars
136
+ --#{$prefix}body-color: #{$body-color-dark};
137
+ --#{$prefix}body-color-rgb: #{to-rgb($body-color-dark)};
138
+ --#{$prefix}body-bg: #{$body-bg-dark};
139
+ --#{$prefix}body-bg-rgb: #{to-rgb($body-bg-dark)};
140
+
141
+ --#{$prefix}emphasis-color: #{$body-emphasis-color-dark};
142
+ --#{$prefix}emphasis-color-rgb: #{to-rgb($body-emphasis-color-dark)};
143
+
144
+ --#{$prefix}secondary-color: #{$body-secondary-color-dark};
145
+ --#{$prefix}secondary-color-rgb: #{to-rgb($body-secondary-color-dark)};
146
+ --#{$prefix}secondary-bg: #{$body-secondary-bg-dark};
147
+ --#{$prefix}secondary-bg-rgb: #{to-rgb($body-secondary-bg-dark)};
148
+
149
+ --#{$prefix}tertiary-color: #{$body-tertiary-color-dark};
150
+ --#{$prefix}tertiary-color-rgb: #{to-rgb($body-tertiary-color-dark)};
151
+ --#{$prefix}tertiary-bg: #{$body-tertiary-bg-dark};
152
+ --#{$prefix}tertiary-bg-rgb: #{to-rgb($body-tertiary-bg-dark)};
153
+
154
+ @each $color, $value in $theme-colors-text-dark {
155
+ --#{$prefix}#{$color}-text-emphasis: #{$value};
156
+ }
157
+
158
+ @each $color, $value in $theme-colors-bg-subtle-dark {
159
+ --#{$prefix}#{$color}-bg-subtle: #{$value};
160
+ }
161
+
162
+ @each $color, $value in $theme-colors-border-subtle-dark {
163
+ --#{$prefix}#{$color}-border-subtle: #{$value};
164
+ }
165
+
166
+ --#{$prefix}heading-color: #{$headings-color-dark};
167
+
168
+ --#{$prefix}link-color: #{$link-color-dark};
169
+ --#{$prefix}link-hover-color: #{$link-hover-color-dark};
170
+ --#{$prefix}link-color-rgb: #{to-rgb($link-color-dark)};
171
+ --#{$prefix}link-hover-color-rgb: #{to-rgb($link-hover-color-dark)};
172
+
173
+ --#{$prefix}code-color: #{$code-color-dark};
174
+
175
+ --#{$prefix}border-color: #{$border-color-dark};
176
+ --#{$prefix}border-color-translucent: #{$border-color-translucent-dark};
177
+
178
+ --#{$prefix}form-valid-color: #{$form-valid-color-dark};
179
+ --#{$prefix}form-valid-border-color: #{$form-valid-border-color-dark};
180
+ --#{$prefix}form-invalid-color: #{$form-invalid-color-dark};
181
+ --#{$prefix}form-invalid-border-color: #{$form-invalid-border-color-dark};
182
+ // scss-docs-end root-dark-mode-vars
183
+ }
73
184
  }
@@ -3,6 +3,12 @@
3
3
  //
4
4
 
5
5
  .table {
6
+ // Reset needed for nesting tables
7
+ --#{$prefix}table-color-type: initial;
8
+ --#{$prefix}table-bg-type: initial;
9
+ --#{$prefix}table-color-state: initial;
10
+ --#{$prefix}table-bg-state: initial;
11
+ // End of reset
6
12
  --#{$prefix}table-color: #{$table-color};
7
13
  --#{$prefix}table-bg: #{$table-bg};
8
14
  --#{$prefix}table-border-color: #{$table-border-color};
@@ -16,7 +22,6 @@
16
22
 
17
23
  width: 100%;
18
24
  margin-bottom: $spacer;
19
- color: var(--#{$prefix}table-color);
20
25
  vertical-align: $table-cell-vertical-align;
21
26
  border-color: var(--#{$prefix}table-border-color);
22
27
 
@@ -27,9 +32,11 @@
27
32
  // stylelint-disable-next-line selector-max-universal
28
33
  > :not(caption) > * > * {
29
34
  padding: $table-cell-padding-y $table-cell-padding-x;
35
+ // Following the precept of cascades: https://codepen.io/miriamsuzanne/full/vYNgodb
36
+ color: var(--#{$prefix}table-color-state, var(--#{$prefix}table-color-type, var(--#{$prefix}table-color)));
30
37
  background-color: var(--#{$prefix}table-bg);
31
38
  border-bottom-width: $table-border-width;
32
- box-shadow: inset 0 0 0 9999px var(--#{$prefix}table-accent-bg);
39
+ box-shadow: inset 0 0 0 9999px var(--#{$prefix}table-bg-state, var(--#{$prefix}table-bg-type, var(--#{$prefix}table-accent-bg)));
33
40
  }
34
41
 
35
42
  > tbody {
@@ -42,7 +49,7 @@
42
49
  }
43
50
 
44
51
  .table-group-divider {
45
- border-top: ($table-border-width * 2) solid $table-group-separator-color;
52
+ border-top: calc(#{$table-border-width} * 2) solid $table-group-separator-color; // stylelint-disable-line function-disallowed-list
46
53
  }
47
54
 
48
55
  //
@@ -104,16 +111,16 @@
104
111
  // For rows
105
112
  .table-striped {
106
113
  > tbody > tr:nth-of-type(#{$table-striped-order}) > * {
107
- --#{$prefix}table-accent-bg: var(--#{$prefix}table-striped-bg);
108
- color: var(--#{$prefix}table-striped-color);
114
+ --#{$prefix}table-color-type: var(--#{$prefix}table-striped-color);
115
+ --#{$prefix}table-bg-type: var(--#{$prefix}table-striped-bg);
109
116
  }
110
117
  }
111
118
 
112
119
  // For columns
113
120
  .table-striped-columns {
114
121
  > :not(caption) > tr > :nth-child(#{$table-striped-columns-order}) {
115
- --#{$prefix}table-accent-bg: var(--#{$prefix}table-striped-bg);
116
- color: var(--#{$prefix}table-striped-color);
122
+ --#{$prefix}table-color-type: var(--#{$prefix}table-striped-color);
123
+ --#{$prefix}table-bg-type: var(--#{$prefix}table-striped-bg);
117
124
  }
118
125
  }
119
126
 
@@ -122,8 +129,8 @@
122
129
  // The `.table-active` class can be added to highlight rows or cells
123
130
 
124
131
  .table-active {
125
- --#{$prefix}table-accent-bg: var(--#{$prefix}table-active-bg);
126
- color: var(--#{$prefix}table-active-color);
132
+ --#{$prefix}table-color-state: var(--#{$prefix}table-active-color);
133
+ --#{$prefix}table-bg-state: var(--#{$prefix}table-active-bg);
127
134
  }
128
135
 
129
136
  // Hover effect
@@ -132,8 +139,8 @@
132
139
 
133
140
  .table-hover {
134
141
  > tbody > tr:hover > * {
135
- --#{$prefix}table-accent-bg: var(--#{$prefix}table-hover-bg);
136
- color: var(--#{$prefix}table-hover-color);
142
+ --#{$prefix}table-color-state: var(--#{$prefix}table-hover-color);
143
+ --#{$prefix}table-bg-state: var(--#{$prefix}table-hover-bg);
137
144
  }
138
145
  }
139
146
 
@@ -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