From 62ee6b018291147ad02977eeffaec82c8f28b232 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 28 Aug 2025 21:27:13 -0700 Subject: [PATCH] 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 --- .bundlewatch.config.json | 2 +- scss/_accordion.scss | 31 +- scss/_alert.scss | 12 +- scss/_badge.scss | 13 +- scss/_breadcrumb.scss | 15 + scss/_card.scss | 24 +- scss/_carousel.scss | 38 ++ scss/_close.scss | 17 + scss/_config.scss | 3 + scss/_dropdown.scss | 49 ++ scss/_list-group.scss | 27 +- scss/_nav.scss | 28 + scss/_navbar.scss | 62 +- scss/_pagination.scss | 41 ++ scss/_placeholders.scss | 6 + scss/_popover.scss | 24 + scss/_progress.scss | 14 + scss/_toasts.scss | 18 + scss/_tooltip.scss | 26 + scss/_variables-dark.scss | 104 --- scss/_variables.scss | 635 ------------------ scss/content/_images.scss | 14 + scss/content/_reboot.scss | 10 +- scss/content/_tables.scss | 53 ++ scss/forms/_validation.scss | 1 + scss/mixins/_caret.scss | 6 + .../src/content/docs/components/accordion.mdx | 2 +- site/src/content/docs/components/alerts.mdx | 2 +- site/src/content/docs/components/badge.mdx | 2 +- .../content/docs/components/breadcrumb.mdx | 2 +- site/src/content/docs/components/card.mdx | 2 +- site/src/content/docs/components/carousel.mdx | 4 +- .../content/docs/components/close-button.mdx | 2 +- .../src/content/docs/components/dropdowns.mdx | 6 +- .../content/docs/components/list-group.mdx | 2 +- site/src/content/docs/components/navbar.mdx | 4 +- .../src/content/docs/components/navs-tabs.mdx | 2 +- .../content/docs/components/pagination.mdx | 4 +- .../content/docs/components/placeholders.mdx | 2 +- site/src/content/docs/components/popovers.mdx | 2 +- site/src/content/docs/components/progress.mdx | 2 +- site/src/content/docs/components/toasts.mdx | 2 +- site/src/content/docs/components/tooltips.mdx | 2 +- site/src/content/docs/content/figures.mdx | 2 +- site/src/content/docs/content/images.mdx | 2 +- site/src/content/docs/content/tables.mdx | 6 +- .../content/docs/customize/color-modes.mdx | 2 +- .../src/content/docs/customize/components.mdx | 2 +- site/src/content/docs/forms/validation.mdx | 2 +- site/src/content/docs/layout/breakpoints.mdx | 2 +- site/src/content/docs/layout/containers.mdx | 2 +- site/src/content/docs/layout/grid.mdx | 4 +- .../src/content/docs/utilities/background.mdx | 4 +- site/src/content/docs/utilities/borders.mdx | 4 +- site/src/content/docs/utilities/colors.mdx | 4 +- 55 files changed, 544 insertions(+), 809 deletions(-) delete mode 100644 scss/_variables-dark.scss diff --git a/.bundlewatch.config.json b/.bundlewatch.config.json index 5464008276..e9b4540e9e 100644 --- a/.bundlewatch.config.json +++ b/.bundlewatch.config.json @@ -30,7 +30,7 @@ }, { "path": "./dist/css/bootstrap.min.css", - "maxSize": "31.25 kB" + "maxSize": "31.5 kB" }, { "path": "./dist/js/bootstrap.bundle.js", diff --git a/scss/_accordion.scss b/scss/_accordion.scss index 33e04a4cfe..4f3dc7b8f0 100644 --- a/scss/_accordion.scss +++ b/scss/_accordion.scss @@ -7,9 +7,34 @@ @use "mixins/box-shadow" as *; @use "mixins/color-mode" as *; -// -// Base styles -// +// scss-docs-start accordion-variables +$accordion-padding-y: 1rem !default; +$accordion-padding-x: 1.25rem !default; +$accordion-color: var(--#{$prefix}body-color) !default; +$accordion-bg: var(--#{$prefix}body-bg) !default; +$accordion-border-width: var(--#{$prefix}border-width) !default; +$accordion-border-color: var(--#{$prefix}border-color) !default; +$accordion-border-radius: var(--#{$prefix}border-radius-lg) !default; +$accordion-inner-border-radius: calc(#{$accordion-border-radius} - #{$accordion-border-width}) !default; + +$accordion-body-padding-y: $accordion-padding-y !default; +$accordion-body-padding-x: $accordion-padding-x !default; + +$accordion-button-padding-y: $accordion-padding-y !default; +$accordion-button-padding-x: $accordion-padding-x !default; +$accordion-button-color: var(--#{$prefix}fg-2) !default; +$accordion-button-bg: var(--#{$prefix}accordion-bg) !default; +$accordion-transition: $btn-transition, border-radius .15s ease !default; +$accordion-button-active-bg: var(--#{$prefix}bg-2) !default; +$accordion-button-active-color: var(--#{$prefix}fg) !default; + +$accordion-button-focus-box-shadow: $btn-focus-box-shadow !default; + +$accordion-icon-width: 1.25rem !default; +$accordion-icon-transition: transform .2s ease-in-out !default; +$accordion-icon-transform: rotate(-180deg) !default; +$accordion-button-icon: url("data:image/svg+xml,") !default; +// scss-docs-end accordion-variables @layer componenents { .accordion { diff --git a/scss/_alert.scss b/scss/_alert.scss index 1003f6a440..6efa14d040 100644 --- a/scss/_alert.scss +++ b/scss/_alert.scss @@ -3,9 +3,15 @@ @use "variables" as *; @use "mixins/border-radius" as *; -// -// Base styles -// +// scss-docs-start alert-variables +$alert-padding-y: $spacer !default; +$alert-padding-x: $spacer !default; +$alert-margin-bottom: 1rem !default; +$alert-border-radius: var(--#{$prefix}border-radius) !default; +$alert-link-font-weight: $font-weight-bold !default; +$alert-border-width: var(--#{$prefix}border-width) !default; +$alert-dismissible-padding-r: $alert-padding-x * 3 !default; // 3x covers width of x plus default padding on either side +// scss-docs-end alert-variables @layer components { .alert { diff --git a/scss/_badge.scss b/scss/_badge.scss index 0f7f55c8c9..0e575012e7 100644 --- a/scss/_badge.scss +++ b/scss/_badge.scss @@ -1,13 +1,18 @@ @use "config" as *; +@use "colors" as *; @use "variables" as *; @use "mixins/border-radius" as *; @use "mixins/gradients" as *; @use "vendor/rfs" as *; -// Base class -// -// Requires one of the contextual, color modifier classes for `color` and -// `background-color`. +// scss-docs-start badge-variables +$badge-font-size: .75em !default; +$badge-font-weight: $font-weight-bold !default; +$badge-color: $white !default; +$badge-padding-y: .35em !default; +$badge-padding-x: .65em !default; +$badge-border-radius: var(--#{$prefix}border-radius) !default; +// scss-docs-end badge-variables @layer components { .badge { diff --git a/scss/_breadcrumb.scss b/scss/_breadcrumb.scss index be8e4623f0..99de799661 100644 --- a/scss/_breadcrumb.scss +++ b/scss/_breadcrumb.scss @@ -1,8 +1,23 @@ +@use "sass:string"; @use "config" as *; @use "variables" as *; @use "mixins/border-radius" as *; @use "vendor/rfs" as *; +// scss-docs-start breadcrumb-variables +$breadcrumb-font-size: null !default; +$breadcrumb-padding-y: 0 !default; +$breadcrumb-padding-x: 0 !default; +$breadcrumb-item-padding-x: .5rem !default; +$breadcrumb-margin-bottom: 1rem !default; +$breadcrumb-bg: null !default; +$breadcrumb-divider-color: var(--#{$prefix}secondary-color) !default; +$breadcrumb-active-color: var(--#{$prefix}secondary-color) !default; +$breadcrumb-divider: string.quote("/") !default; +$breadcrumb-divider-flipped: $breadcrumb-divider !default; +$breadcrumb-border-radius: null !default; +// scss-docs-end breadcrumb-variables + @layer components { .breadcrumb { // scss-docs-start breadcrumb-css-vars diff --git a/scss/_card.scss b/scss/_card.scss index 1519502d61..8221a3b4cc 100644 --- a/scss/_card.scss +++ b/scss/_card.scss @@ -4,9 +4,27 @@ @use "mixins/box-shadow" as *; @use "layout/breakpoints" as *; -// -// Base styles -// +// scss-docs-start card-variables +$card-spacer-y: $spacer !default; +$card-spacer-x: $spacer !default; +$card-title-spacer-y: $spacer * .5 !default; +$card-title-color: null !default; +$card-subtitle-color: null !default; +$card-border-width: var(--#{$prefix}border-width) !default; +$card-border-color: var(--#{$prefix}border-color-translucent) !default; +$card-border-radius: var(--#{$prefix}border-radius) !default; +$card-box-shadow: null !default; +$card-inner-border-radius: calc(#{$card-border-radius} - #{$card-border-width}) !default; +$card-cap-padding-y: $card-spacer-y * .5 !default; +$card-cap-padding-x: $card-spacer-x !default; +$card-cap-bg: rgba(var(--#{$prefix}body-color-rgb), .03) !default; +$card-cap-color: null !default; +$card-height: null !default; +$card-color: null !default; +$card-bg: var(--#{$prefix}body-bg) !default; +$card-img-overlay-padding: $spacer !default; +$card-group-margin: $grid-gutter-width * .5 !default; +// scss-docs-end card-variables @layer components { .card { diff --git a/scss/_carousel.scss b/scss/_carousel.scss index f8460e666b..d70c117bf6 100644 --- a/scss/_carousel.scss +++ b/scss/_carousel.scss @@ -1,10 +1,48 @@ @use "config" as *; +@use "colors" as *; @use "variables" as *; @use "mixins/transition" as *; @use "mixins/gradients" as *; @use "mixins/color-mode" as *; @use "vendor/rfs" as *; +// scss-docs-start carousel-variables +$carousel-control-color: $white !default; +$carousel-control-width: 15% !default; +$carousel-control-opacity: .5 !default; +$carousel-control-hover-opacity: .9 !default; +$carousel-control-transition: opacity .15s ease !default; +$carousel-control-icon-filter: null !default; + +$carousel-indicator-width: 30px !default; +$carousel-indicator-height: 3px !default; +$carousel-indicator-hit-area-height: 10px !default; +$carousel-indicator-spacer: 3px !default; +$carousel-indicator-opacity: .5 !default; +$carousel-indicator-active-bg: $white !default; +$carousel-indicator-active-opacity: 1 !default; +$carousel-indicator-transition: opacity .6s ease !default; + +$carousel-caption-width: 70% !default; +$carousel-caption-color: $white !default; +$carousel-caption-padding-y: 1.25rem !default; +$carousel-caption-spacer: 1.25rem !default; + +$carousel-control-icon-width: 2rem !default; + +$carousel-control-prev-icon-bg: url("data:image/svg+xml,") !default; +$carousel-control-next-icon-bg: url("data:image/svg+xml,") !default; + +$carousel-transition-duration: .6s !default; +$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`) +// scss-docs-end carousel-variables + +// scss-docs-start carousel-dark-variables +$carousel-indicator-active-bg-dark: $black !default; +$carousel-caption-color-dark: $black !default; +$carousel-control-icon-filter-dark: invert(1) grayscale(100) !default; +// scss-docs-end carousel-dark-variables + // Notes on the classes: // // 1. .carousel.pointer-event should ideally be pan-y (to allow for users to scroll vertically) diff --git a/scss/_close.scss b/scss/_close.scss index d42018a61a..99f2632019 100644 --- a/scss/_close.scss +++ b/scss/_close.scss @@ -1,8 +1,25 @@ @use "config" as *; +@use "colors" as *; @use "variables" as *; @use "mixins/border-radius" as *; @use "mixins/color-mode" as *; +// scss-docs-start close-variables +$btn-close-width: 1em !default; +$btn-close-height: $btn-close-width !default; +$btn-close-padding-x: .25em !default; +$btn-close-padding-y: $btn-close-padding-x !default; +$btn-close-color: $black !default; +$btn-close-bg: url("data:image/svg+xml,") !default; +$btn-close-focus-shadow: $focus-ring-box-shadow !default; +$btn-close-opacity: .5 !default; +$btn-close-hover-opacity: .75 !default; +$btn-close-focus-opacity: 1 !default; +$btn-close-disabled-opacity: .25 !default; +$btn-close-filter: null !default; +$btn-close-filter-dark: invert(1) grayscale(100%) brightness(200%) !default; +// scss-docs-end close-variables + // Transparent background and border properties included for button version. // iOS requires the button element instead of an anchor tag. // If you want the anchor version, it requires `href="#"`. diff --git a/scss/_config.scss b/scss/_config.scss index 7026075523..7215edea2c 100644 --- a/scss/_config.scss +++ b/scss/_config.scss @@ -59,6 +59,9 @@ $grid-breakpoints: ( ) !default; // scss-docs-end grid-breakpoints +// @include _assert-ascending($grid-breakpoints, "$grid-breakpoints"); +// @include _assert-starts-at-zero($grid-breakpoints, "$grid-breakpoints"); + // Grid columns // // Set the number of columns and specify the width of the gutters. diff --git a/scss/_dropdown.scss b/scss/_dropdown.scss index 07bd13d527..2de07ffae3 100644 --- a/scss/_dropdown.scss +++ b/scss/_dropdown.scss @@ -1,5 +1,6 @@ @use "sass:map"; @use "config" as *; +@use "colors" as *; @use "variables" as *; @use "mixins/caret" as *; @use "mixins/border-radius" as *; @@ -9,6 +10,54 @@ @use "vendor/rfs" as *; @use "layout/breakpoints" as *; +// scss-docs-start dropdown-variables +$dropdown-min-width: 10rem !default; +$dropdown-padding-x: 0 !default; +$dropdown-padding-y: .5rem !default; +$dropdown-spacer: .125rem !default; +$dropdown-font-size: $font-size-base !default; +$dropdown-color: var(--#{$prefix}body-color) !default; +$dropdown-bg: var(--#{$prefix}body-bg) !default; +$dropdown-border-color: var(--#{$prefix}border-color-translucent) !default; +$dropdown-border-radius: var(--#{$prefix}border-radius) !default; +$dropdown-border-width: var(--#{$prefix}border-width) !default; +$dropdown-inner-border-radius: calc(#{$dropdown-border-radius} - #{$dropdown-border-width}) !default; +$dropdown-divider-bg: $dropdown-border-color !default; +$dropdown-divider-margin-y: $spacer * .5 !default; +$dropdown-box-shadow: var(--#{$prefix}box-shadow) !default; + +$dropdown-link-color: var(--#{$prefix}body-color) !default; +$dropdown-link-hover-color: $dropdown-link-color !default; +$dropdown-link-hover-bg: var(--#{$prefix}tertiary-bg) !default; + +$dropdown-link-active-color: $component-active-color !default; +$dropdown-link-active-bg: $component-active-bg !default; + +$dropdown-link-disabled-color: var(--#{$prefix}tertiary-color) !default; + +$dropdown-item-padding-y: $spacer * .25 !default; +$dropdown-item-padding-x: $spacer !default; + +$dropdown-header-color: $gray-600 !default; +$dropdown-header-padding-x: $dropdown-item-padding-x !default; +$dropdown-header-padding-y: $dropdown-padding-y !default; +// scss-docs-end dropdown-variables + +// scss-docs-start dropdown-dark-variables +$dropdown-dark-color: $gray-300 !default; +$dropdown-dark-bg: $gray-800 !default; +$dropdown-dark-border-color: $dropdown-border-color !default; +$dropdown-dark-divider-bg: $dropdown-divider-bg !default; +$dropdown-dark-box-shadow: null !default; +$dropdown-dark-link-color: $dropdown-dark-color !default; +$dropdown-dark-link-hover-color: $white !default; +$dropdown-dark-link-hover-bg: rgba($white, .15) !default; +$dropdown-dark-link-active-color: $dropdown-link-active-color !default; +$dropdown-dark-link-active-bg: $dropdown-link-active-bg !default; +$dropdown-dark-link-disabled-color: $gray-500 !default; +$dropdown-dark-header-color: $gray-500 !default; +// scss-docs-end dropdown-dark-variables + @layer components { // The dropdown wrapper (`
`) .dropup, diff --git a/scss/_list-group.scss b/scss/_list-group.scss index 1f8c1d8ee4..16a6a98681 100644 --- a/scss/_list-group.scss +++ b/scss/_list-group.scss @@ -6,9 +6,30 @@ @use "vendor/rfs" as *; @use "layout/breakpoints" as *; -// Base class -// -// Easily usable on