bootstrap-scss 5.2.3 → 5.3.1

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 (53) hide show
  1. package/LICENSE +1 -2
  2. package/README.md +4 -4
  3. package/_accordion.scss +9 -0
  4. package/_alert.scss +8 -11
  5. package/_button-group.scss +2 -2
  6. package/_buttons.scss +3 -3
  7. package/_card.scss +5 -0
  8. package/_carousel.scss +20 -2
  9. package/_close.scss +32 -9
  10. package/_dropdown.scss +1 -0
  11. package/_functions.scss +1 -1
  12. package/_grid.scss +6 -0
  13. package/_helpers.scss +2 -0
  14. package/_list-group.scss +12 -7
  15. package/_maps.scss +120 -0
  16. package/_mixins.scss +1 -2
  17. package/_nav.scss +42 -17
  18. package/_navbar.scss +15 -4
  19. package/_offcanvas.scss +4 -2
  20. package/_pagination.scss +1 -1
  21. package/_progress.scss +10 -1
  22. package/_reboot.scss +7 -7
  23. package/_root.scss +121 -10
  24. package/_tables.scss +18 -11
  25. package/_tooltip.scss +4 -5
  26. package/_utilities.scss +172 -13
  27. package/_variables-dark.scss +85 -0
  28. package/_variables.scss +268 -157
  29. package/bootstrap-grid.scss +1 -3
  30. package/bootstrap-reboot.scss +1 -0
  31. package/bootstrap-utilities.scss +1 -0
  32. package/bootstrap.scss +1 -0
  33. package/forms/_floating-labels.scss +23 -3
  34. package/forms/_form-check.scss +25 -12
  35. package/forms/_form-control.scss +24 -4
  36. package/forms/_form-range.scss +3 -3
  37. package/forms/_form-select.scss +12 -3
  38. package/forms/_input-group.scss +1 -1
  39. package/helpers/_color-bg.scss +1 -4
  40. package/helpers/_colored-links.scss +20 -2
  41. package/helpers/_focus-ring.scss +5 -0
  42. package/helpers/_icon-link.scss +25 -0
  43. package/helpers/_vr.scss +1 -1
  44. package/mixins/_alert.scss +4 -1
  45. package/mixins/_banner.scss +2 -4
  46. package/mixins/_caret.scss +30 -25
  47. package/mixins/_color-mode.scss +21 -0
  48. package/mixins/_forms.scss +8 -7
  49. package/mixins/_list-group.scss +2 -0
  50. package/mixins/_utilities.scss +1 -1
  51. package/mixins/_visually-hidden.scss +5 -1
  52. package/package.json +1 -1
  53. package/vendor/_rfs.scss +23 -29
package/LICENSE CHANGED
@@ -1,7 +1,6 @@
1
1
  The MIT License (MIT)
2
2
 
3
- Copyright (c) 2011-2022 Twitter, Inc.
4
- Copyright (c) 2011-2022 The Bootstrap Authors
3
+ Copyright (c) 2011-2023 The Bootstrap Authors
5
4
 
6
5
  Permission is hereby granted, free of charge, to any person obtaining a copy
7
6
  of this software and associated documentation files (the "Software"), to deal
package/README.md CHANGED
@@ -4,7 +4,7 @@
4
4
 
5
5
  <p align="center">
6
6
  <a href="https://getbootstrap.com/">
7
- <img src="https://getbootstrap.com/docs/5.2/assets/brand/bootstrap-logo-shadow.png" alt="Bootstrap logo" width="200" height="165">
7
+ <img src="https://getbootstrap.com/docs/5.3/assets/brand/bootstrap-logo-shadow.png" alt="Bootstrap logo" width="200" height="165">
8
8
  </a>
9
9
  </p>
10
10
 
@@ -13,7 +13,7 @@
13
13
  <p align="center">
14
14
  Sleek, intuitive, and powerful front-end framework for faster and easier web development.
15
15
  <br>
16
- <a href="https://getbootstrap.com/docs/5.2/"><strong>Explore Bootstrap docs »</strong></a>
16
+ <a href="https://getbootstrap.com/docs/5.3/"><strong>Explore Bootstrap docs »</strong></a>
17
17
  <br>
18
18
  <br>
19
19
  <a href="https://github.com/twbs/bootstrap/issues/new?template=bug_report.md">Report bug</a>
@@ -43,7 +43,7 @@ Several quick start options are available:
43
43
  - Install with [npm](https://www.npmjs.com/): `npm install bootstrap-scss`
44
44
  - Install with [yarn](https://yarnpkg.com/): `yarn add bootstrap-scss`
45
45
 
46
- Read the [Getting started page](https://getbootstrap.com/docs/5.2/getting-started/introduction/) for information on the framework contents, templates and examples, and more.
46
+ Read the [Getting started page](https://getbootstrap.com/docs/5.3/getting-started/introduction/) for information on the framework contents, templates and examples, and more.
47
47
 
48
48
  ## Status
49
49
 
@@ -77,7 +77,7 @@ For simplicity, this project will use the same version numbers as Bootstrap.
77
77
 
78
78
  ## Changelog
79
79
 
80
- https://github.com/twbs/bootstrap/releases/tag/v5.2.3
80
+ https://github.com/twbs/bootstrap/releases/tag/v5.3.1
81
81
 
82
82
  ## Copyright and license
83
83
 
package/_accordion.scss CHANGED
@@ -147,3 +147,12 @@
147
147
  }
148
148
  }
149
149
  }
150
+
151
+ @if $enable-dark-mode {
152
+ @include color-mode(dark) {
153
+ .accordion-button::after {
154
+ --#{$prefix}accordion-btn-icon: #{escape-svg($accordion-button-icon-dark)};
155
+ --#{$prefix}accordion-btn-active-icon: #{escape-svg($accordion-button-active-icon-dark)};
156
+ }
157
+ }
158
+ }
package/_alert.scss CHANGED
@@ -12,6 +12,7 @@
12
12
  --#{$prefix}alert-border-color: transparent;
13
13
  --#{$prefix}alert-border: #{$alert-border-width} solid var(--#{$prefix}alert-border-color);
14
14
  --#{$prefix}alert-border-radius: #{$alert-border-radius};
15
+ --#{$prefix}alert-link-color: inherit;
15
16
  // scss-docs-end alert-css-vars
16
17
 
17
18
  position: relative;
@@ -32,6 +33,7 @@
32
33
  // Provide class for links that match alerts
33
34
  .alert-link {
34
35
  font-weight: $alert-link-font-weight;
36
+ color: var(--#{$prefix}alert-link-color);
35
37
  }
36
38
 
37
39
 
@@ -54,18 +56,13 @@
54
56
 
55
57
 
56
58
  // scss-docs-start alert-modifiers
57
- // Generate contextual modifier classes for colorizing the alert.
58
-
59
- @each $state, $value in $theme-colors {
60
- $alert-background: shift-color($value, $alert-bg-scale);
61
- $alert-border: shift-color($value, $alert-border-scale);
62
- $alert-color: shift-color($value, $alert-color-scale);
63
-
64
- @if (contrast-ratio($alert-background, $alert-color) < $min-contrast-ratio) {
65
- $alert-color: mix($value, color-contrast($alert-background), abs($alert-color-scale));
66
- }
59
+ // Generate contextual modifier classes for colorizing the alert
60
+ @each $state in map-keys($theme-colors) {
67
61
  .alert-#{$state} {
68
- @include alert-variant($alert-background, $alert-border, $alert-color);
62
+ --#{$prefix}alert-color: var(--#{$prefix}#{$state}-text-emphasis);
63
+ --#{$prefix}alert-bg: var(--#{$prefix}#{$state}-bg-subtle);
64
+ --#{$prefix}alert-border-color: var(--#{$prefix}#{$state}-border-subtle);
65
+ --#{$prefix}alert-link-color: var(--#{$prefix}#{$state}-text-emphasis);
69
66
  }
70
67
  }
71
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: -$btn-border-width;
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: -$btn-border-width;
129
+ margin-top: calc(#{$btn-border-width} * -1); // stylelint-disable-line function-disallowed-list
130
130
  }
131
131
 
132
132
  // Reset rounded corners
package/_buttons.scss CHANGED
@@ -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 {
package/_card.scss CHANGED
@@ -7,6 +7,8 @@
7
7
  --#{$prefix}card-spacer-y: #{$card-spacer-y};
8
8
  --#{$prefix}card-spacer-x: #{$card-spacer-x};
9
9
  --#{$prefix}card-title-spacer-y: #{$card-title-spacer-y};
10
+ --#{$prefix}card-title-color: #{$card-title-color};
11
+ --#{$prefix}card-subtitle-color: #{$card-subtitle-color};
10
12
  --#{$prefix}card-border-width: #{$card-border-width};
11
13
  --#{$prefix}card-border-color: #{$card-border-color};
12
14
  --#{$prefix}card-border-radius: #{$card-border-radius};
@@ -28,6 +30,7 @@
28
30
  flex-direction: column;
29
31
  min-width: 0; // See https://github.com/twbs/bootstrap/pull/22740#issuecomment-305868106
30
32
  height: var(--#{$prefix}card-height);
33
+ color: var(--#{$prefix}body-color);
31
34
  word-wrap: break-word;
32
35
  background-color: var(--#{$prefix}card-bg);
33
36
  background-clip: border-box;
@@ -73,11 +76,13 @@
73
76
 
74
77
  .card-title {
75
78
  margin-bottom: var(--#{$prefix}card-title-spacer-y);
79
+ color: var(--#{$prefix}card-title-color);
76
80
  }
77
81
 
78
82
  .card-subtitle {
79
83
  margin-top: calc(-.5 * var(--#{$prefix}card-title-spacer-y)); // stylelint-disable-line function-disallowed-list
80
84
  margin-bottom: 0;
85
+ color: var(--#{$prefix}card-subtitle-color);
81
86
  }
82
87
 
83
88
  .card-text:last-child {
package/_carousel.scss CHANGED
@@ -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;
@@ -210,7 +209,7 @@
210
209
 
211
210
  // Dark mode carousel
212
211
 
213
- .carousel-dark {
212
+ @mixin carousel-dark() {
214
213
  .carousel-control-prev-icon,
215
214
  .carousel-control-next-icon {
216
215
  filter: $carousel-dark-control-icon-filter;
@@ -224,3 +223,22 @@
224
223
  color: $carousel-dark-caption-color;
225
224
  }
226
225
  }
226
+
227
+ .carousel-dark {
228
+ @include carousel-dark();
229
+ }
230
+
231
+ @if $enable-dark-mode {
232
+ @include color-mode(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
+ }
242
+ }
243
+ }
244
+ }
package/_close.scss CHANGED
@@ -4,37 +4,60 @@
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
8
+ --#{$prefix}btn-close-color: #{$btn-close-color};
9
+ --#{$prefix}btn-close-bg: #{ escape-svg($btn-close-bg) };
10
+ --#{$prefix}btn-close-opacity: #{$btn-close-opacity};
11
+ --#{$prefix}btn-close-hover-opacity: #{$btn-close-hover-opacity};
12
+ --#{$prefix}btn-close-focus-shadow: #{$btn-close-focus-shadow};
13
+ --#{$prefix}btn-close-focus-opacity: #{$btn-close-focus-opacity};
14
+ --#{$prefix}btn-close-disabled-opacity: #{$btn-close-disabled-opacity};
15
+ --#{$prefix}btn-close-white-filter: #{$btn-close-white-filter};
16
+ // scss-docs-end close-css-vars
17
+
7
18
  box-sizing: content-box;
8
19
  width: $btn-close-width;
9
20
  height: $btn-close-height;
10
21
  padding: $btn-close-padding-y $btn-close-padding-x;
11
- color: $btn-close-color;
12
- background: transparent escape-svg($btn-close-bg) center / $btn-close-width auto no-repeat; // include transparent for button elements
22
+ color: var(--#{$prefix}btn-close-color);
23
+ background: transparent var(--#{$prefix}btn-close-bg) center / $btn-close-width auto no-repeat; // include transparent for button elements
13
24
  border: 0; // for button elements
14
25
  @include border-radius();
15
- opacity: $btn-close-opacity;
26
+ opacity: var(--#{$prefix}btn-close-opacity);
16
27
 
17
28
  // Override <a>'s hover style
18
29
  &:hover {
19
- color: $btn-close-color;
30
+ color: var(--#{$prefix}btn-close-color);
20
31
  text-decoration: none;
21
- opacity: $btn-close-hover-opacity;
32
+ opacity: var(--#{$prefix}btn-close-hover-opacity);
22
33
  }
23
34
 
24
35
  &:focus {
25
36
  outline: 0;
26
- box-shadow: $btn-close-focus-shadow;
27
- opacity: $btn-close-focus-opacity;
37
+ box-shadow: var(--#{$prefix}btn-close-focus-shadow);
38
+ opacity: var(--#{$prefix}btn-close-focus-opacity);
28
39
  }
29
40
 
30
41
  &:disabled,
31
42
  &.disabled {
32
43
  pointer-events: none;
33
44
  user-select: none;
34
- opacity: $btn-close-disabled-opacity;
45
+ opacity: var(--#{$prefix}btn-close-disabled-opacity);
35
46
  }
36
47
  }
37
48
 
49
+ @mixin btn-close-white() {
50
+ filter: var(--#{$prefix}btn-close-white-filter);
51
+ }
52
+
38
53
  .btn-close-white {
39
- filter: $btn-close-white-filter;
54
+ @include btn-close-white();
55
+ }
56
+
57
+ @if $enable-dark-mode {
58
+ @include color-mode(dark) {
59
+ .btn-close {
60
+ @include btn-close-white();
61
+ }
62
+ }
40
63
  }
package/_dropdown.scss CHANGED
@@ -184,6 +184,7 @@
184
184
  white-space: nowrap; // prevent links from randomly breaking onto new lines
185
185
  background-color: transparent; // For `<button>`s
186
186
  border: 0; // For `<button>`s
187
+ @include border-radius(var(--#{$prefix}dropdown-item-border-radius, 0));
187
188
 
188
189
  &:hover,
189
190
  &:focus {
package/_functions.scss CHANGED
@@ -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
 
package/_grid.scss CHANGED
@@ -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();
package/_helpers.scss CHANGED
@@ -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";
package/_list-group.scss CHANGED
@@ -180,13 +180,18 @@
180
180
  // Add modifier classes to change text and background color on individual items.
181
181
  // Organizationally, this must come after the `:hover` states.
182
182
 
183
- @each $state, $value in $theme-colors {
184
- $list-group-variant-bg: shift-color($value, $list-group-item-bg-scale);
185
- $list-group-variant-color: shift-color($value, $list-group-item-color-scale);
186
- @if (contrast-ratio($list-group-variant-bg, $list-group-variant-color) < $min-contrast-ratio) {
187
- $list-group-variant-color: mix($value, color-contrast($list-group-variant-bg), abs($list-group-item-color-scale));
183
+ @each $state in map-keys($theme-colors) {
184
+ .list-group-item-#{$state} {
185
+ --#{$prefix}list-group-color: var(--#{$prefix}#{$state}-text-emphasis);
186
+ --#{$prefix}list-group-bg: var(--#{$prefix}#{$state}-bg-subtle);
187
+ --#{$prefix}list-group-border-color: var(--#{$prefix}#{$state}-border-subtle);
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);
188
195
  }
189
-
190
- @include list-group-item-variant($state, $list-group-variant-bg, $list-group-variant-color);
191
196
  }
192
197
  // scss-docs-end list-group-modifiers
package/_maps.scss CHANGED
@@ -6,6 +6,90 @@
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
10
+ $theme-colors-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,
19
+ ) !default;
20
+ // scss-docs-end theme-text-map
21
+
22
+ // scss-docs-start theme-bg-subtle-map
23
+ $theme-colors-bg-subtle: (
24
+ "primary": $primary-bg-subtle,
25
+ "secondary": $secondary-bg-subtle,
26
+ "success": $success-bg-subtle,
27
+ "info": $info-bg-subtle,
28
+ "warning": $warning-bg-subtle,
29
+ "danger": $danger-bg-subtle,
30
+ "light": $light-bg-subtle,
31
+ "dark": $dark-bg-subtle,
32
+ ) !default;
33
+ // scss-docs-end theme-bg-subtle-map
34
+
35
+ // scss-docs-start theme-border-subtle-map
36
+ $theme-colors-border-subtle: (
37
+ "primary": $primary-border-subtle,
38
+ "secondary": $secondary-border-subtle,
39
+ "success": $success-border-subtle,
40
+ "info": $info-border-subtle,
41
+ "warning": $warning-border-subtle,
42
+ "danger": $danger-border-subtle,
43
+ "light": $light-border-subtle,
44
+ "dark": $dark-border-subtle,
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
+ }
92
+
9
93
  // Utilities maps
10
94
  //
11
95
  // Extends the default `$theme-colors` maps to help create our utilities.
@@ -25,6 +109,17 @@ $utilities-text: map-merge(
25
109
  )
26
110
  ) !default;
27
111
  $utilities-text-colors: map-loop($utilities-text, rgba-css-var, "$key", "text") !default;
112
+
113
+ $utilities-text-emphasis-colors: (
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)
122
+ ) !default;
28
123
  // scss-docs-end utilities-text-colors
29
124
 
30
125
  // scss-docs-start utilities-bg-colors
@@ -37,18 +132,43 @@ $utilities-bg: map-merge(
37
132
  )
38
133
  ) !default;
39
134
  $utilities-bg-colors: map-loop($utilities-bg, rgba-css-var, "$key", "bg") !default;
135
+
136
+ $utilities-bg-subtle: (
137
+ "primary-subtle": var(--#{$prefix}primary-bg-subtle),
138
+ "secondary-subtle": var(--#{$prefix}secondary-bg-subtle),
139
+ "success-subtle": var(--#{$prefix}success-bg-subtle),
140
+ "info-subtle": var(--#{$prefix}info-bg-subtle),
141
+ "warning-subtle": var(--#{$prefix}warning-bg-subtle),
142
+ "danger-subtle": var(--#{$prefix}danger-bg-subtle),
143
+ "light-subtle": var(--#{$prefix}light-bg-subtle),
144
+ "dark-subtle": var(--#{$prefix}dark-bg-subtle)
145
+ ) !default;
40
146
  // scss-docs-end utilities-bg-colors
41
147
 
42
148
  // scss-docs-start utilities-border-colors
43
149
  $utilities-border: map-merge(
44
150
  $utilities-colors,
45
151
  (
152
+ "black": to-rgb($black),
46
153
  "white": to-rgb($white)
47
154
  )
48
155
  ) !default;
49
156
  $utilities-border-colors: map-loop($utilities-border, rgba-css-var, "$key", "border") !default;
157
+
158
+ $utilities-border-subtle: (
159
+ "primary-subtle": var(--#{$prefix}primary-border-subtle),
160
+ "secondary-subtle": var(--#{$prefix}secondary-border-subtle),
161
+ "success-subtle": var(--#{$prefix}success-border-subtle),
162
+ "info-subtle": var(--#{$prefix}info-border-subtle),
163
+ "warning-subtle": var(--#{$prefix}warning-border-subtle),
164
+ "danger-subtle": var(--#{$prefix}danger-border-subtle),
165
+ "light-subtle": var(--#{$prefix}light-border-subtle),
166
+ "dark-subtle": var(--#{$prefix}dark-border-subtle)
167
+ ) !default;
50
168
  // scss-docs-end utilities-border-colors
51
169
 
170
+ $utilities-links-underline: map-loop($utilities-colors, rgba-css-var, "$key", "link-underline") !default;
171
+
52
172
  $negative-spacers: if($enable-negative-margins, negativify-map($spacers), null) !default;
53
173
 
54
174
  $gutters: $spacers !default;
package/_mixins.scss CHANGED
@@ -10,6 +10,7 @@
10
10
 
11
11
  // Helpers
12
12
  @import "mixins/breakpoints";
13
+ @import "mixins/color-mode";
13
14
  @import "mixins/color-scheme";
14
15
  @import "mixins/image";
15
16
  @import "mixins/resize";
@@ -21,13 +22,11 @@
21
22
  @import "mixins/utilities";
22
23
 
23
24
  // Components
24
- @import "mixins/alert";
25
25
  @import "mixins/backdrop";
26
26
  @import "mixins/buttons";
27
27
  @import "mixins/caret";
28
28
  @import "mixins/pagination";
29
29
  @import "mixins/lists";
30
- @import "mixins/list-group";
31
30
  @import "mixins/forms";
32
31
  @import "mixins/table-variants";
33
32
 
package/_nav.scss CHANGED
@@ -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
  //
package/_navbar.scss CHANGED
@@ -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
+ }