Skip to content

Commit 485c598

Browse files
mdomdo
authored
Colocate Sass vars in their respective files (#41706)
* Co-locate Sass variables in most files * another * fix * Don't bring tables into reboot, temp remove some sass vars so we don't need the co-dependency * Move vars * bundlewatch * scssdocs * Fix scssdocs
1 parent 5f24cfd commit 485c598

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

55 files changed

+544
-809
lines changed

‎.bundlewatch.config.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@
3030
},
3131
{
3232
"path": "./dist/css/bootstrap.min.css",
33-
"maxSize": "31.25 kB"
33+
"maxSize": "31.5 kB"
3434
},
3535
{
3636
"path": "./dist/js/bootstrap.bundle.js",

‎scss/_accordion.scss‎

Lines changed: 28 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,34 @@
77
@use "mixins/box-shadow" as *;
88
@use "mixins/color-mode" as *;
99

10-
//
11-
// Base styles
12-
//
10+
// scss-docs-start accordion-variables
11+
$accordion-padding-y: 1rem !default;
12+
$accordion-padding-x: 1.25rem !default;
13+
$accordion-color: var(--#{$prefix}body-color) !default;
14+
$accordion-bg: var(--#{$prefix}body-bg) !default;
15+
$accordion-border-width: var(--#{$prefix}border-width) !default;
16+
$accordion-border-color: var(--#{$prefix}border-color) !default;
17+
$accordion-border-radius: var(--#{$prefix}border-radius-lg) !default;
18+
$accordion-inner-border-radius: calc(#{$accordion-border-radius} - #{$accordion-border-width}) !default;
19+
20+
$accordion-body-padding-y: $accordion-padding-y !default;
21+
$accordion-body-padding-x: $accordion-padding-x !default;
22+
23+
$accordion-button-padding-y: $accordion-padding-y !default;
24+
$accordion-button-padding-x: $accordion-padding-x !default;
25+
$accordion-button-color: var(--#{$prefix}fg-2) !default;
26+
$accordion-button-bg: var(--#{$prefix}accordion-bg) !default;
27+
$accordion-transition: $btn-transition, border-radius .15s ease !default;
28+
$accordion-button-active-bg: var(--#{$prefix}bg-2) !default;
29+
$accordion-button-active-color: var(--#{$prefix}fg) !default;
30+
31+
$accordion-button-focus-box-shadow: $btn-focus-box-shadow !default;
32+
33+
$accordion-icon-width: 1.25rem !default;
34+
$accordion-icon-transition: transform .2s ease-in-out !default;
35+
$accordion-icon-transform: rotate(-180deg) !default;
36+
$accordion-button-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='#000' stroke-linecap='round' stroke-linejoin='round'><path d='m2 5 6 6 6-6'/></svg>") !default;
37+
// scss-docs-end accordion-variables
1338

1439
@layer componenents {
1540
.accordion {

‎scss/_alert.scss‎

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,15 @@
33
@use "variables" as *;
44
@use "mixins/border-radius" as *;
55

6-
//
7-
// Base styles
8-
//
6+
// scss-docs-start alert-variables
7+
$alert-padding-y: $spacer !default;
8+
$alert-padding-x: $spacer !default;
9+
$alert-margin-bottom: 1rem !default;
10+
$alert-border-radius: var(--#{$prefix}border-radius) !default;
11+
$alert-link-font-weight: $font-weight-bold !default;
12+
$alert-border-width: var(--#{$prefix}border-width) !default;
13+
$alert-dismissible-padding-r: $alert-padding-x * 3 !default; // 3x covers width of x plus default padding on either side
14+
// scss-docs-end alert-variables
915

1016
@layer components {
1117
.alert {

‎scss/_badge.scss‎

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,18 @@
11
@use "config" as *;
2+
@use "colors" as *;
23
@use "variables" as *;
34
@use "mixins/border-radius" as *;
45
@use "mixins/gradients" as *;
56
@use "vendor/rfs" as *;
67

7-
// Base class
8-
//
9-
// Requires one of the contextual, color modifier classes for `color` and
10-
// `background-color`.
8+
// scss-docs-start badge-variables
9+
$badge-font-size: .75em !default;
10+
$badge-font-weight: $font-weight-bold !default;
11+
$badge-color: $white !default;
12+
$badge-padding-y: .35em !default;
13+
$badge-padding-x: .65em !default;
14+
$badge-border-radius: var(--#{$prefix}border-radius) !default;
15+
// scss-docs-end badge-variables
1116

1217
@layer components {
1318
.badge {

‎scss/_breadcrumb.scss‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,23 @@
1+
@use "sass:string";
12
@use "config" as *;
23
@use "variables" as *;
34
@use "mixins/border-radius" as *;
45
@use "vendor/rfs" as *;
56

7+
// scss-docs-start breadcrumb-variables
8+
$breadcrumb-font-size: null !default;
9+
$breadcrumb-padding-y: 0 !default;
10+
$breadcrumb-padding-x: 0 !default;
11+
$breadcrumb-item-padding-x: .5rem !default;
12+
$breadcrumb-margin-bottom: 1rem !default;
13+
$breadcrumb-bg: null !default;
14+
$breadcrumb-divider-color: var(--#{$prefix}secondary-color) !default;
15+
$breadcrumb-active-color: var(--#{$prefix}secondary-color) !default;
16+
$breadcrumb-divider: string.quote("/") !default;
17+
$breadcrumb-divider-flipped: $breadcrumb-divider !default;
18+
$breadcrumb-border-radius: null !default;
19+
// scss-docs-end breadcrumb-variables
20+
621
@layer components {
722
.breadcrumb {
823
// scss-docs-start breadcrumb-css-vars

‎scss/_card.scss‎

Lines changed: 21 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,27 @@
44
@use "mixins/box-shadow" as *;
55
@use "layout/breakpoints" as *;
66

7-
//
8-
// Base styles
9-
//
7+
// scss-docs-start card-variables
8+
$card-spacer-y: $spacer !default;
9+
$card-spacer-x: $spacer !default;
10+
$card-title-spacer-y: $spacer * .5 !default;
11+
$card-title-color: null !default;
12+
$card-subtitle-color: null !default;
13+
$card-border-width: var(--#{$prefix}border-width) !default;
14+
$card-border-color: var(--#{$prefix}border-color-translucent) !default;
15+
$card-border-radius: var(--#{$prefix}border-radius) !default;
16+
$card-box-shadow: null !default;
17+
$card-inner-border-radius: calc(#{$card-border-radius} - #{$card-border-width}) !default;
18+
$card-cap-padding-y: $card-spacer-y * .5 !default;
19+
$card-cap-padding-x: $card-spacer-x !default;
20+
$card-cap-bg: rgba(var(--#{$prefix}body-color-rgb), .03) !default;
21+
$card-cap-color: null !default;
22+
$card-height: null !default;
23+
$card-color: null !default;
24+
$card-bg: var(--#{$prefix}body-bg) !default;
25+
$card-img-overlay-padding: $spacer !default;
26+
$card-group-margin: $grid-gutter-width * .5 !default;
27+
// scss-docs-end card-variables
1028

1129
@layer components {
1230
.card {

‎scss/_carousel.scss‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,48 @@
11
@use "config" as *;
2+
@use "colors" as *;
23
@use "variables" as *;
34
@use "mixins/transition" as *;
45
@use "mixins/gradients" as *;
56
@use "mixins/color-mode" as *;
67
@use "vendor/rfs" as *;
78

9+
// scss-docs-start carousel-variables
10+
$carousel-control-color: $white !default;
11+
$carousel-control-width: 15% !default;
12+
$carousel-control-opacity: .5 !default;
13+
$carousel-control-hover-opacity: .9 !default;
14+
$carousel-control-transition: opacity .15s ease !default;
15+
$carousel-control-icon-filter: null !default;
16+
17+
$carousel-indicator-width: 30px !default;
18+
$carousel-indicator-height: 3px !default;
19+
$carousel-indicator-hit-area-height: 10px !default;
20+
$carousel-indicator-spacer: 3px !default;
21+
$carousel-indicator-opacity: .5 !default;
22+
$carousel-indicator-active-bg: $white !default;
23+
$carousel-indicator-active-opacity: 1 !default;
24+
$carousel-indicator-transition: opacity .6s ease !default;
25+
26+
$carousel-caption-width: 70% !default;
27+
$carousel-caption-color: $white !default;
28+
$carousel-caption-padding-y: 1.25rem !default;
29+
$carousel-caption-spacer: 1.25rem !default;
30+
31+
$carousel-control-icon-width: 2rem !default;
32+
33+
$carousel-control-prev-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$carousel-control-color}'><path d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0'/></svg>") !default;
34+
$carousel-control-next-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$carousel-control-color}'><path d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708'/></svg>") !default;
35+
36+
$carousel-transition-duration: .6s !default;
37+
$carousel-transition: transform $carousel-transition-duration ease-in-out !default; // Define transform transition first if using multiple transitions (e.g., `transform 2s ease, opacity .5s ease-out`)
38+
// scss-docs-end carousel-variables
39+
40+
// scss-docs-start carousel-dark-variables
41+
$carousel-indicator-active-bg-dark: $black !default;
42+
$carousel-caption-color-dark: $black !default;
43+
$carousel-control-icon-filter-dark: invert(1) grayscale(100) !default;
44+
// scss-docs-end carousel-dark-variables
45+
846
// Notes on the classes:
947
//
1048
// 1. .carousel.pointer-event should ideally be pan-y (to allow for users to scroll vertically)

‎scss/_close.scss‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,25 @@
11
@use "config" as *;
2+
@use "colors" as *;
23
@use "variables" as *;
34
@use "mixins/border-radius" as *;
45
@use "mixins/color-mode" as *;
56

7+
// scss-docs-start close-variables
8+
$btn-close-width: 1em !default;
9+
$btn-close-height: $btn-close-width !default;
10+
$btn-close-padding-x: .25em !default;
11+
$btn-close-padding-y: $btn-close-padding-x !default;
12+
$btn-close-color: $black !default;
13+
$btn-close-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$btn-close-color}'><path d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414'/></svg>") !default;
14+
$btn-close-focus-shadow: $focus-ring-box-shadow !default;
15+
$btn-close-opacity: .5 !default;
16+
$btn-close-hover-opacity: .75 !default;
17+
$btn-close-focus-opacity: 1 !default;
18+
$btn-close-disabled-opacity: .25 !default;
19+
$btn-close-filter: null !default;
20+
$btn-close-filter-dark: invert(1) grayscale(100%) brightness(200%) !default;
21+
// scss-docs-end close-variables
22+
623
// Transparent background and border properties included for button version.
724
// iOS requires the button element instead of an anchor tag.
825
// If you want the anchor version, it requires `href="#"`.

‎scss/_config.scss‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -59,6 +59,9 @@ $grid-breakpoints: (
5959
) !default;
6060
// scss-docs-end grid-breakpoints
6161

62+
// @include _assert-ascending($grid-breakpoints, "$grid-breakpoints");
63+
// @include _assert-starts-at-zero($grid-breakpoints, "$grid-breakpoints");
64+
6265
// Grid columns
6366
//
6467
// Set the number of columns and specify the width of the gutters.

‎scss/_dropdown.scss‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
@use "sass:map";
22
@use "config" as *;
3+
@use "colors" as *;
34
@use "variables" as *;
45
@use "mixins/caret" as *;
56
@use "mixins/border-radius" as *;
@@ -9,6 +10,54 @@
910
@use "vendor/rfs" as *;
1011
@use "layout/breakpoints" as *;
1112

13+
// scss-docs-start dropdown-variables
14+
$dropdown-min-width: 10rem !default;
15+
$dropdown-padding-x: 0 !default;
16+
$dropdown-padding-y: .5rem !default;
17+
$dropdown-spacer: .125rem !default;
18+
$dropdown-font-size: $font-size-base !default;
19+
$dropdown-color: var(--#{$prefix}body-color) !default;
20+
$dropdown-bg: var(--#{$prefix}body-bg) !default;
21+
$dropdown-border-color: var(--#{$prefix}border-color-translucent) !default;
22+
$dropdown-border-radius: var(--#{$prefix}border-radius) !default;
23+
$dropdown-border-width: var(--#{$prefix}border-width) !default;
24+
$dropdown-inner-border-radius: calc(#{$dropdown-border-radius} - #{$dropdown-border-width}) !default;
25+
$dropdown-divider-bg: $dropdown-border-color !default;
26+
$dropdown-divider-margin-y: $spacer * .5 !default;
27+
$dropdown-box-shadow: var(--#{$prefix}box-shadow) !default;
28+
29+
$dropdown-link-color: var(--#{$prefix}body-color) !default;
30+
$dropdown-link-hover-color: $dropdown-link-color !default;
31+
$dropdown-link-hover-bg: var(--#{$prefix}tertiary-bg) !default;
32+
33+
$dropdown-link-active-color: $component-active-color !default;
34+
$dropdown-link-active-bg: $component-active-bg !default;
35+
36+
$dropdown-link-disabled-color: var(--#{$prefix}tertiary-color) !default;
37+
38+
$dropdown-item-padding-y: $spacer * .25 !default;
39+
$dropdown-item-padding-x: $spacer !default;
40+
41+
$dropdown-header-color: $gray-600 !default;
42+
$dropdown-header-padding-x: $dropdown-item-padding-x !default;
43+
$dropdown-header-padding-y: $dropdown-padding-y !default;
44+
// scss-docs-end dropdown-variables
45+
46+
// scss-docs-start dropdown-dark-variables
47+
$dropdown-dark-color: $gray-300 !default;
48+
$dropdown-dark-bg: $gray-800 !default;
49+
$dropdown-dark-border-color: $dropdown-border-color !default;
50+
$dropdown-dark-divider-bg: $dropdown-divider-bg !default;
51+
$dropdown-dark-box-shadow: null !default;
52+
$dropdown-dark-link-color: $dropdown-dark-color !default;
53+
$dropdown-dark-link-hover-color: $white !default;
54+
$dropdown-dark-link-hover-bg: rgba($white, .15) !default;
55+
$dropdown-dark-link-active-color: $dropdown-link-active-color !default;
56+
$dropdown-dark-link-active-bg: $dropdown-link-active-bg !default;
57+
$dropdown-dark-link-disabled-color: $gray-500 !default;
58+
$dropdown-dark-header-color: $gray-500 !default;
59+
// scss-docs-end dropdown-dark-variables
60+
1261
@layer components {
1362
// The dropdown wrapper (`<div>`)
1463
.dropup,

0 commit comments

Comments
 (0)