Skip to content

Commit ad836ff

Browse files
mdomdo
authored
v6: Drop component variants for global .theme-* classes (#41789)
* New theme classes, revamped buttons * bundle, lint, more cleanup * update checks and radios * Improve table theme variant usage * remove table-border-factor
1 parent e2df145 commit ad836ff

39 files changed

+653
-517
lines changed

‎.bundlewatch.config.json‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,35 +2,35 @@
22
"files": [
33
{
44
"path": "./dist/css/bootstrap-grid.css",
5-
"maxSize": "9.00 kB"
5+
"maxSize": "9.5 kB"
66
},
77
{
88
"path": "./dist/css/bootstrap-grid.min.css",
9-
"maxSize": "8.25 kB"
9+
"maxSize": "8.5 kB"
1010
},
1111
{
1212
"path": "./dist/css/bootstrap-reboot.css",
13-
"maxSize": "5.0 kB"
13+
"maxSize": "5.25 kB"
1414
},
1515
{
1616
"path": "./dist/css/bootstrap-reboot.min.css",
1717
"maxSize": "4.5 kB"
1818
},
1919
{
2020
"path": "./dist/css/bootstrap-utilities.css",
21-
"maxSize": "13.5 kB"
21+
"maxSize": "14.0 kB"
2222
},
2323
{
2424
"path": "./dist/css/bootstrap-utilities.min.css",
25-
"maxSize": "12.0 kB"
25+
"maxSize": "12.25 kB"
2626
},
2727
{
2828
"path": "./dist/css/bootstrap.css",
29-
"maxSize": "36.5 kB"
29+
"maxSize": "37.5 kB"
3030
},
3131
{
3232
"path": "./dist/css/bootstrap.min.css",
33-
"maxSize": "33.0 kB"
33+
"maxSize": "33.75 kB"
3434
},
3535
{
3636
"path": "./dist/js/bootstrap.bundle.js",

‎scss/_accordion.scss‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,8 @@
1010
// scss-docs-start accordion-variables
1111
$accordion-padding-y: 1rem !default;
1212
$accordion-padding-x: 1.25rem !default;
13-
$accordion-color: var(--#{$prefix}body-color) !default;
14-
$accordion-bg: var(--#{$prefix}body-bg) !default;
13+
$accordion-color: var(--#{$prefix}color-body) !default;
14+
$accordion-bg: var(--#{$prefix}bg-body) !default;
1515
$accordion-border-width: var(--#{$prefix}border-width) !default;
1616
$accordion-border-color: var(--#{$prefix}border-color) !default;
1717
$accordion-border-radius: var(--#{$prefix}border-radius-lg) !default;

‎scss/_alert.scss‎

Lines changed: 4 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -17,20 +17,20 @@ $alert-dismissible-padding-r: $alert-padding-x * 3 !default; // 3x covers widt
1717
@layer components {
1818
.alert {
1919
// scss-docs-start alert-css-vars
20-
--#{$prefix}alert-bg: transparent;
20+
--#{$prefix}alert-bg: var(--#{$prefix}theme-bg-subtle, transparent);
2121
--#{$prefix}alert-padding-x: #{$alert-padding-x};
2222
--#{$prefix}alert-padding-y: #{$alert-padding-y};
2323
--#{$prefix}alert-margin-bottom: #{$alert-margin-bottom};
24-
--#{$prefix}alert-color: inherit;
24+
--#{$prefix}alert-color: var(--#{$prefix}theme-text, inherit);
2525
--#{$prefix}alert-border-color: transparent;
26-
--#{$prefix}alert-border: #{$alert-border-width} solid var(--#{$prefix}alert-border-color);
26+
--#{$prefix}alert-border: #{$alert-border-width} solid var(--#{$prefix}theme-border, var(--#{$prefix}alert-border-color));
2727
--#{$prefix}alert-border-radius: #{$alert-border-radius};
2828
--#{$prefix}alert-link-color: inherit;
2929
// scss-docs-end alert-css-vars
3030

3131
position: relative;
3232
padding: var(--#{$prefix}alert-padding-y) var(--#{$prefix}alert-padding-x);
33-
margin-bottom: var(--#{$prefix}alert-margin-bottom);
33+
// margin-bottom: var(--#{$prefix}alert-margin-bottom);
3434
color: var(--#{$prefix}alert-color);
3535
background-color: var(--#{$prefix}alert-bg);
3636
border: var(--#{$prefix}alert-border);
@@ -66,17 +66,4 @@ $alert-dismissible-padding-r: $alert-padding-x * 3 !default; // 3x covers widt
6666
padding: $alert-padding-y * 1.25 $alert-padding-x;
6767
}
6868
}
69-
70-
71-
// scss-docs-start alert-modifiers
72-
// Generate contextual modifier classes for colorizing the alert
73-
@each $state in map.keys($new-theme-colors) {
74-
.alert-#{$state} {
75-
--#{$prefix}alert-color: var(--#{$prefix}#{$state}-text);
76-
--#{$prefix}alert-bg: var(--#{$prefix}#{$state}-bg-subtle);
77-
--#{$prefix}alert-border-color: var(--#{$prefix}#{$state}-border-subtle);
78-
--#{$prefix}alert-link-color: var(--#{$prefix}#{$state}-text-emphasis);
79-
}
80-
}
81-
// scss-docs-end alert-modifiers
8269
}

‎scss/_badge.scss‎

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,17 @@
11
@use "config" as *;
22
@use "colors" as *;
33
@use "variables" as *;
4+
@use "theme" as *;
45
@use "mixins/border-radius" as *;
56
@use "mixins/gradients" as *;
67
@use "vendor/rfs" as *;
78

89
// scss-docs-start badge-variables
910
$badge-font-size: .75em !default;
1011
$badge-font-weight: $font-weight-bold !default;
11-
$badge-color: $white !default;
12+
$badge-color: inherit !default;
1213
$badge-padding-y: .35em !default;
13-
$badge-padding-x: .65em !default;
14+
$badge-padding-x: .5em !default;
1415
$badge-border-radius: var(--#{$prefix}border-radius) !default;
1516
// scss-docs-end badge-variables
1617

@@ -21,7 +22,8 @@ $badge-border-radius: var(--#{$prefix}border-radius) !default;
2122
--#{$prefix}badge-padding-y: #{$badge-padding-y};
2223
@include rfs($badge-font-size, --#{$prefix}badge-font-size);
2324
--#{$prefix}badge-font-weight: #{$badge-font-weight};
24-
--#{$prefix}badge-color: #{$badge-color};
25+
--#{$prefix}badge-color: var(--#{$prefix}theme-contrast, #{$badge-color});
26+
--#{$prefix}badge-bg: var(--#{$prefix}theme-bg, var(--#{$prefix}bg-2));
2527
--#{$prefix}badge-border-radius: #{$badge-border-radius};
2628
// scss-docs-end badge-css-vars
2729

@@ -34,6 +36,7 @@ $badge-border-radius: var(--#{$prefix}border-radius) !default;
3436
text-align: center;
3537
white-space: nowrap;
3638
vertical-align: baseline;
39+
background-color: var(--#{$prefix}badge-bg);
3740
@include border-radius(var(--#{$prefix}badge-border-radius));
3841
@include gradient-bg();
3942

@@ -48,4 +51,9 @@ $badge-border-radius: var(--#{$prefix}border-radius) !default;
4851
position: relative;
4952
top: -1px;
5053
}
54+
55+
.badge-subtle {
56+
--#{$prefix}badge-color: var(--#{$prefix}theme-text);
57+
--#{$prefix}badge-bg: var(--#{$prefix}theme-bg-subtle);
58+
}
5159
}

‎scss/_card.scss‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ $card-cap-bg: rgba(var(--#{$prefix}body-color-rgb), .03) !
2121
$card-cap-color: null !default;
2222
$card-height: null !default;
2323
$card-color: null !default;
24-
$card-bg: var(--#{$prefix}body-bg) !default;
24+
$card-bg: var(--#{$prefix}bg-body) !default;
2525
$card-img-overlay-padding: $spacer !default;
2626
$card-group-margin: $grid-gutter-width * .5 !default;
2727
// scss-docs-end card-variables
@@ -55,7 +55,7 @@ $card-group-margin: $grid-gutter-width * .5 !default;
5555
flex-direction: column;
5656
min-width: 0; // See https://github.com/twbs/bootstrap/pull/22740#issuecomment-305868106
5757
height: var(--#{$prefix}card-height);
58-
color: var(--#{$prefix}body-color);
58+
color: var(--#{$prefix}color-body);
5959
word-wrap: break-word;
6060
background-color: var(--#{$prefix}card-bg);
6161
background-clip: border-box;

‎scss/_colors.scss‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -41,19 +41,19 @@ $hues: (
4141

4242
:root {
4343
@each $color, $hue in $hues {
44-
--#{$prefix}#{$color}-025: color-mix(in srgb, #fff 94%, #{$hue});
45-
--#{$prefix}#{$color}-050: color-mix(in srgb, #fff 90%, #{$hue});
46-
--#{$prefix}#{$color}-100: color-mix(in srgb, #fff 80%, #{$hue});
47-
--#{$prefix}#{$color}-200: color-mix(in srgb, #fff 60%, #{$hue});
48-
--#{$prefix}#{$color}-300: color-mix(in srgb, #fff 40%, #{$hue});
49-
--#{$prefix}#{$color}-400: color-mix(in srgb, #fff 20%, #{$hue});
44+
--#{$prefix}#{$color}-025: color-mix(in oklch, #fff 94%, #{$hue});
45+
--#{$prefix}#{$color}-050: color-mix(in oklch, #fff 90%, #{$hue});
46+
--#{$prefix}#{$color}-100: color-mix(in oklch, #fff 80%, #{$hue});
47+
--#{$prefix}#{$color}-200: color-mix(in oklch, #fff 60%, #{$hue});
48+
--#{$prefix}#{$color}-300: color-mix(in oklch, #fff 40%, #{$hue});
49+
--#{$prefix}#{$color}-400: color-mix(in oklch, #fff 20%, #{$hue});
5050
--#{$prefix}#{$color}-500: #{$hue};
51-
--#{$prefix}#{$color}-600: color-mix(in srgb, #000 16%, #{$hue});
52-
--#{$prefix}#{$color}-700: color-mix(in srgb, #000 32%, #{$hue});
53-
--#{$prefix}#{$color}-800: color-mix(in srgb, #000 48%, #{$hue});
54-
--#{$prefix}#{$color}-900: color-mix(in srgb, #000 64%, #{$hue});
55-
--#{$prefix}#{$color}-950: color-mix(in srgb, #000 76%, #{$hue});
56-
--#{$prefix}#{$color}-975: color-mix(in srgb, #000 88%, #{$hue});
51+
--#{$prefix}#{$color}-600: color-mix(in oklch, #000 16%, #{$hue});
52+
--#{$prefix}#{$color}-700: color-mix(in oklch, #000 32%, #{$hue});
53+
--#{$prefix}#{$color}-800: color-mix(in oklch, #000 48%, #{$hue});
54+
--#{$prefix}#{$color}-900: color-mix(in oklch, #000 64%, #{$hue});
55+
--#{$prefix}#{$color}-950: color-mix(in oklch, #000 76%, #{$hue});
56+
--#{$prefix}#{$color}-975: color-mix(in oklch, #000 88%, #{$hue});
5757
}
5858
}
5959

‎scss/_dropdown.scss‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -16,8 +16,8 @@ $dropdown-padding-x: 0 !default;
1616
$dropdown-padding-y: .5rem !default;
1717
$dropdown-spacer: .125rem !default;
1818
$dropdown-font-size: $font-size-base !default;
19-
$dropdown-color: var(--#{$prefix}body-color) !default;
20-
$dropdown-bg: var(--#{$prefix}body-bg) !default;
19+
$dropdown-color: var(--#{$prefix}color-body) !default;
20+
$dropdown-bg: var(--#{$prefix}bg-body) !default;
2121
$dropdown-border-color: var(--#{$prefix}border-color-translucent) !default;
2222
$dropdown-border-radius: var(--#{$prefix}border-radius) !default;
2323
$dropdown-border-width: var(--#{$prefix}border-width) !default;
@@ -26,7 +26,7 @@ $dropdown-divider-bg: $dropdown-border-color !default;
2626
$dropdown-divider-margin-y: $spacer * .5 !default;
2727
$dropdown-box-shadow: var(--#{$prefix}box-shadow) !default;
2828

29-
$dropdown-link-color: var(--#{$prefix}body-color) !default;
29+
$dropdown-link-color: var(--#{$prefix}color-body) !default;
3030
$dropdown-link-hover-color: $dropdown-link-color !default;
3131
$dropdown-link-hover-bg: var(--#{$prefix}tertiary-bg) !default;
3232

‎scss/_list-group.scss‎

Lines changed: 11 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,8 @@
88
@use "layout/breakpoints" as *;
99

1010
// scss-docs-start list-group-variables
11-
$list-group-color: var(--#{$prefix}body-color) !default;
12-
$list-group-bg: var(--#{$prefix}body-bg) !default;
11+
$list-group-color: var(--#{$prefix}color-body) !default;
12+
$list-group-bg: var(--#{$prefix}bg-body) !default;
1313
$list-group-border-color: var(--#{$prefix}border-color) !default;
1414
$list-group-border-width: var(--#{$prefix}border-width) !default;
1515
$list-group-border-radius: var(--#{$prefix}border-radius) !default;
@@ -28,7 +28,7 @@ $list-group-disabled-bg: $list-group-bg !default;
2828
$list-group-action-color: var(--#{$prefix}secondary-color) !default;
2929
$list-group-action-hover-color: var(--#{$prefix}emphasis-color) !default;
3030

31-
$list-group-action-active-color: var(--#{$prefix}body-color) !default;
31+
$list-group-action-active-color: var(--#{$prefix}color-body) !default;
3232
$list-group-action-active-bg: var(--#{$prefix}secondary-bg) !default;
3333
// scss-docs-end list-group-variables
3434

@@ -82,10 +82,10 @@ $list-group-action-active-bg: var(--#{$prefix}secondary-bg) !default;
8282
position: relative;
8383
display: block;
8484
padding: var(--#{$prefix}list-group-item-padding-y) var(--#{$prefix}list-group-item-padding-x);
85-
color: var(--#{$prefix}list-group-color);
85+
color: var(--#{$prefix}theme-text, var(--#{$prefix}list-group-color));
8686
text-decoration: if($link-decoration == none, null, none);
87-
background-color: var(--#{$prefix}list-group-bg);
88-
border: var(--#{$prefix}list-group-border-width) solid var(--#{$prefix}list-group-border-color);
87+
background-color: var(--#{$prefix}theme-bg-subtle, var(--#{$prefix}list-group-bg));
88+
border: var(--#{$prefix}list-group-border-width) solid var(--#{$prefix}theme-border, var(--#{$prefix}list-group-border-color));
8989

9090
&:first-child {
9191
@include border-top-radius(inherit);
@@ -128,22 +128,22 @@ $list-group-action-active-bg: var(--#{$prefix}secondary-bg) !default;
128128

129129
.list-group-item-action {
130130
width: 100%; // For `<button>`s (anchors become 100% by default though)
131-
color: var(--#{$prefix}list-group-action-color);
131+
color: var(--#{$prefix}theme-text, var(--#{$prefix}list-group-action-color));
132132
text-align: inherit; // For `<button>`s (anchors inherit)
133133

134134
&:not(.active) {
135135
// Hover state
136136
&:hover,
137137
&:focus {
138138
z-index: 1; // Place hover/focus items above their siblings for proper border styling
139-
color: var(--#{$prefix}list-group-action-hover-color);
139+
color: var(--#{$prefix}theme-text-emphasis, var(--#{$prefix}list-group-action-hover-color));
140140
text-decoration: none;
141-
background-color: var(--#{$prefix}list-group-action-hover-bg);
141+
background-color: var(--#{$prefix}theme-bg-muted, var(--#{$prefix}list-group-action-hover-bg));
142142
}
143143

144144
&:active {
145-
color: var(--#{$prefix}list-group-action-active-color);
146-
background-color: var(--#{$prefix}list-group-action-active-bg);
145+
color: var(--#{$prefix}theme-text-emphasis, var(--#{$prefix}list-group-action-active-color));
146+
background-color: var(--#{$prefix}theme-bg-muted, var(--#{$prefix}list-group-action-active-bg));
147147
}
148148
}
149149
}
@@ -205,27 +205,4 @@ $list-group-action-active-bg: var(--#{$prefix}secondary-bg) !default;
205205
}
206206
}
207207
}
208-
209-
210-
// scss-docs-start list-group-modifiers
211-
// List group contextual variants
212-
//
213-
// Add modifier classes to change text and background color on individual items.
214-
// Organizationally, this must come after the `:hover` states.
215-
216-
@each $state in map.keys($new-theme-colors) {
217-
.list-group-item-#{$state} {
218-
--#{$prefix}list-group-color: var(--#{$prefix}#{$state}-text-emphasis);
219-
--#{$prefix}list-group-bg: var(--#{$prefix}#{$state}-bg-subtle);
220-
--#{$prefix}list-group-border-color: var(--#{$prefix}#{$state}-border-subtle);
221-
--#{$prefix}list-group-action-hover-color: var(--#{$prefix}emphasis-color);
222-
--#{$prefix}list-group-action-hover-bg: var(--#{$prefix}#{$state}-border-subtle);
223-
--#{$prefix}list-group-action-active-color: var(--#{$prefix}emphasis-color);
224-
--#{$prefix}list-group-action-active-bg: var(--#{$prefix}#{$state}-border-subtle);
225-
--#{$prefix}list-group-active-color: var(--#{$prefix}#{$state}-bg-subtle);
226-
--#{$prefix}list-group-active-bg: var(--#{$prefix}#{$state}-text-emphasis);
227-
--#{$prefix}list-group-active-border-color: var(--#{$prefix}#{$state}-text-emphasis);
228-
}
229-
}
230-
// scss-docs-end list-group-modifiers
231208
}

‎scss/_nav.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ $nav-tabs-border-width: var(--#{$prefix}border-width) !default;
2121
$nav-tabs-border-radius: var(--#{$prefix}border-radius) !default;
2222
$nav-tabs-link-hover-border-color: var(--#{$prefix}secondary-bg) var(--#{$prefix}secondary-bg) $nav-tabs-border-color !default;
2323
$nav-tabs-link-active-color: var(--#{$prefix}emphasis-color) !default;
24-
$nav-tabs-link-active-bg: var(--#{$prefix}body-bg) !default;
24+
$nav-tabs-link-active-bg: var(--#{$prefix}bg-body) !default;
2525
$nav-tabs-link-active-border-color: var(--#{$prefix}border-color) var(--#{$prefix}border-color) $nav-tabs-link-active-bg !default;
2626

2727
$nav-pills-border-radius: var(--#{$prefix}border-radius) !default;

‎scss/_pagination.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ $pagination-padding-x-lg: 1.5rem !default;
1717
$pagination-font-size: $font-size-base !default;
1818

1919
$pagination-color: var(--#{$prefix}link-color) !default;
20-
$pagination-bg: var(--#{$prefix}body-bg) !default;
20+
$pagination-bg: var(--#{$prefix}bg-body) !default;
2121
$pagination-border-radius: var(--#{$prefix}border-radius) !default;
2222
$pagination-border-width: var(--#{$prefix}border-width) !default;
2323
$pagination-margin-start: calc(-1 * #{$pagination-border-width}) !default;

0 commit comments

Comments
 (0)