From fbfb6a4cea68232f715c2443441d43f95b532331 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 18 Feb 2025 09:50:23 -0800 Subject: [PATCH] temp, maybe revert --- site/assets/scss/_component-examples.scss | 52 +++++++++---------- site/assets/scss/_navbar.scss | 7 +++ site/assets/scss/_variables.scss | 4 ++ site/assets/scss/docs.scss | 19 ++++--- site/assets/scss/search.scss | 5 +- site/content/docs/5.3/customize/color.md | 2 +- site/content/docs/5.3/utilities/background.md | 6 +-- site/content/docs/5.3/utilities/colors.md | 6 +-- 8 files changed, 59 insertions(+), 42 deletions(-) diff --git a/site/assets/scss/_component-examples.scss b/site/assets/scss/_component-examples.scss index 177836fcd8..34ae94ff7e 100644 --- a/site/assets/scss/_component-examples.scss +++ b/site/assets/scss/_component-examples.scss @@ -137,39 +137,39 @@ border: 1px solid rgba(var(--bd-violet-rgb), .3); } -// Grid mixins -.example-container { - width: 800px; - @include make-container(); -} +// // Grid mixins +// .example-container { +// width: 800px; +// @include make-container(); +// } -.example-row { - @include make-row(); -} +// .example-row { +// @include make-row(); +// } -.example-content-main { - @include make-col-ready(); +// .example-content-main { +// @include make-col-ready(); - @include media-breakpoint-up(sm) { - @include make-col(6); - } +// @include media-breakpoint-up(sm) { +// @include make-col(6); +// } - @include media-breakpoint-up(lg) { - @include make-col(8); - } -} +// @include media-breakpoint-up(lg) { +// @include make-col(8); +// } +// } -.example-content-secondary { - @include make-col-ready(); +// .example-content-secondary { +// @include make-col-ready(); - @include media-breakpoint-up(sm) { - @include make-col(6); - } +// @include media-breakpoint-up(sm) { +// @include make-col(6); +// } - @include media-breakpoint-up(lg) { - @include make-col(4); - } -} +// @include media-breakpoint-up(lg) { +// @include make-col(4); +// } +// } // Ratio helpers .bd-example-ratios { diff --git a/site/assets/scss/_navbar.scss b/site/assets/scss/_navbar.scss index 341b5dd135..f2d13959fe 100644 --- a/site/assets/scss/_navbar.scss +++ b/site/assets/scss/_navbar.scss @@ -1,3 +1,10 @@ +@use "../../../scss/config" as *; +@use "../../../scss/colors" as *; +@use "../../../scss/functions" as *; +@use "../../../scss/mixins" as *; +@use "../../../scss/variables" as *; +@use "../../../scss/layout/breakpoints" as *; + .bd-navbar { padding: .75rem 0; background-color: transparent; diff --git a/site/assets/scss/_variables.scss b/site/assets/scss/_variables.scss index 5e8ab5d6c2..6b6002f62d 100644 --- a/site/assets/scss/_variables.scss +++ b/site/assets/scss/_variables.scss @@ -1,3 +1,7 @@ +@use "../../../scss/config" as *; +@use "../../../scss/colors" as *; +@use "../../../scss/functions" as *; + // Local docs variables $bd-purple: #4c0bce; $bd-violet: lighten(saturate($bd-purple, 5%), 15%); // stylelint-disable-line function-disallowed-list diff --git a/site/assets/scss/docs.scss b/site/assets/scss/docs.scss index 4618e1f9a4..3c3beb6537 100644 --- a/site/assets/scss/docs.scss +++ b/site/assets/scss/docs.scss @@ -23,15 +23,18 @@ // Happy Bootstrapping! // Load Bootstrap variables and mixins -@import "../../../scss/functions"; -@import "../../../scss/variables"; -@import "../../../scss/mixins"; +// @import "../../../scss/config"; +// @import "../../../scss/colors"; +// @import "../../../scss/functions"; +// @import "../../../scss/mixins"; +// @import "../../../scss/variables"; +// @import "../../../scss/layout/breakpoints"; -// fusv-disable -$enable-grid-classes: false; -$enable-cssgrid: true; -// fusv-enable -@import "../../../scss/grid"; +// // fusv-disable +// $enable-grid-classes: false; +// $enable-cssgrid: true; +// // fusv-enable +// @import "../../../scss/layout/"; // Load docs components @import "variables"; diff --git a/site/assets/scss/search.scss b/site/assets/scss/search.scss index 03c6659ea6..630d2d24d5 100644 --- a/site/assets/scss/search.scss +++ b/site/assets/scss/search.scss @@ -5,9 +5,12 @@ * For details, see https://creativecommons.org/licenses/by/3.0/. */ +@import "../../../scss/config"; +@import "../../../scss/colors"; @import "../../../scss/functions"; -@import "../../../scss/variables"; @import "../../../scss/mixins"; +@import "../../../scss/variables"; +@import "../../../scss/layout/breakpoints"; @import "variables"; @import "@docsearch/css/dist/style"; diff --git a/site/content/docs/5.3/customize/color.md b/site/content/docs/5.3/customize/color.md index d42c636159..257208fb48 100644 --- a/site/content/docs/5.3/customize/color.md +++ b/site/content/docs/5.3/customize/color.md @@ -449,7 +449,7 @@ Bootstrap's source Sass files include three maps to help you quickly and easily Within `scss/_variables.scss`, you'll find Bootstrap's color variables and Sass map. Here's an example of the `$colors` Sass map: -{{< scss-docs name="colors-map" file="scss/_variables.scss" >}} + Add, remove, or modify values within the map to update how they're used in many other components. Unfortunately at this time, not _every_ component utilizes this Sass map. Future updates will strive to improve upon this. Until then, plan on making use of the `${color}` variables and this Sass map. diff --git a/site/content/docs/5.3/utilities/background.md b/site/content/docs/5.3/utilities/background.md index 1239261b43..640c94d1d5 100644 --- a/site/content/docs/5.3/utilities/background.md +++ b/site/content/docs/5.3/utilities/background.md @@ -94,7 +94,7 @@ In addition to the following Sass functionality, consider reading about our incl Most `background-color` utilities are generated by our theme colors, reassigned from our generic color palette variables. -{{< scss-docs name="color-variables" file="scss/_variables.scss" >}} + {{< scss-docs name="theme-color-variables" file="scss/_variables.scss" >}} @@ -102,7 +102,7 @@ Most `background-color` utilities are generated by our theme colors, reassigned Grayscale colors are also available, but only a subset are used to generate any utilities. -{{< scss-docs name="gray-color-variables" file="scss/_variables.scss" >}} + Variables for setting `background-color` in `.bg-*-subtle` utilities in light and dark mode: @@ -118,7 +118,7 @@ Theme colors are then put into a Sass map so we can loop over them to generate o Grayscale colors are also available as a Sass map. **This map is not used to generate any utilities.** -{{< scss-docs name="gray-colors-map" file="scss/_variables.scss" >}} + RGB colors are generated from a separate Sass map: diff --git a/site/content/docs/5.3/utilities/colors.md b/site/content/docs/5.3/utilities/colors.md index 775457d9aa..5bd181f1fd 100644 --- a/site/content/docs/5.3/utilities/colors.md +++ b/site/content/docs/5.3/utilities/colors.md @@ -94,13 +94,13 @@ In addition to the following Sass functionality, consider reading about our incl Most `color` utilities are generated by our theme colors, reassigned from our generic color palette variables. -{{< scss-docs name="color-variables" file="scss/_variables.scss" >}} + {{< scss-docs name="theme-color-variables" file="scss/_variables.scss" >}} Grayscale colors are also available, but only a subset are used to generate any utilities. -{{< scss-docs name="gray-color-variables" file="scss/_variables.scss" >}} + {{< scss-docs name="theme-text-map" file="scss/_maps.scss" >}} @@ -118,7 +118,7 @@ Theme colors are then put into a Sass map so we can loop over them to generate o Grayscale colors are also available as a Sass map. **This map is not used to generate any utilities.** -{{< scss-docs name="gray-colors-map" file="scss/_variables.scss" >}} + RGB colors are generated from a separate Sass map: