diff --git a/scss/_maps.scss b/scss/_maps.scss index 46952baa1..d299452a8 100644 --- a/scss/_maps.scss +++ b/scss/_maps.scss @@ -6,6 +6,7 @@ $theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value") !default; // scss-docs-end theme-colors-rgb +// scss-docs-start theme-text-map $theme-colors-text: ( "primary": $primary-text, "secondary": $secondary-text, @@ -16,7 +17,9 @@ $theme-colors-text: ( "light": $light-text, "dark": $dark-text, ) !default; +// scss-docs-end theme-text-map +// scss-docs-start theme-bg-subtle-map $theme-colors-bg-subtle: ( "primary": $primary-bg-subtle, "secondary": $secondary-bg-subtle, @@ -27,7 +30,9 @@ $theme-colors-bg-subtle: ( "light": $light-bg-subtle, "dark": $dark-bg-subtle, ) !default; +// scss-docs-end theme-bg-subtle-map +// scss-docs-start theme-border-subtle-map $theme-colors-border-subtle: ( "primary": $primary-border-subtle, "secondary": $secondary-border-subtle, @@ -38,12 +43,14 @@ $theme-colors-border-subtle: ( "light": $light-border-subtle, "dark": $dark-border-subtle, ) !default; +// scss-docs-end theme-border-subtle-map $theme-colors-text-dark: null !default; $theme-colors-bg-subtle-dark: null !default; $theme-colors-border-subtle-dark: null !default; @if $enable-dark-mode { + // scss-docs-start theme-text-dark-map $theme-colors-text-dark: ( "primary": $primary-text-dark, "secondary": $secondary-text-dark, @@ -54,7 +61,9 @@ $theme-colors-border-subtle-dark: null !default; "light": $light-text-dark, "dark": $dark-text-dark, ) !default; + // scss-docs-end theme-text-dark-map + // scss-docs-start theme-bg-subtle-dark-map $theme-colors-bg-subtle-dark: ( "primary": $primary-bg-subtle-dark, "secondary": $secondary-bg-subtle-dark, @@ -65,7 +74,9 @@ $theme-colors-border-subtle-dark: null !default; "light": $light-bg-subtle-dark, "dark": $dark-bg-subtle-dark, ) !default; + // scss-docs-end theme-bg-subtle-dark-map + // scss-docs-start theme-border-subtle-dark-map $theme-colors-border-subtle-dark: ( "primary": $primary-border-subtle-dark, "secondary": $secondary-border-subtle-dark, @@ -76,6 +87,7 @@ $theme-colors-border-subtle-dark: null !default; "light": $light-border-subtle-dark, "dark": $dark-border-subtle-dark, ) !default; + // scss-docs-end theme-border-subtle-dark-map } // Utilities maps diff --git a/scss/_variables-dark.scss b/scss/_variables-dark.scss index c3b4640a4..88256a1c3 100644 --- a/scss/_variables-dark.scss +++ b/scss/_variables-dark.scss @@ -7,6 +7,7 @@ // // scss-docs-start sass-dark-mode-vars +// scss-docs-start theme-text-dark-variables $primary-text-dark: $blue-300 !default; $secondary-text-dark: $gray-300 !default; $success-text-dark: $green-300 !default; @@ -15,7 +16,9 @@ $warning-text-dark: $yellow-300 !default; $danger-text-dark: $red-300 !default; $light-text-dark: $gray-100 !default; $dark-text-dark: $gray-300 !default; +// scss-docs-end theme-text-dark-variables +// scss-docs-start theme-bg-subtle-dark-variables $primary-bg-subtle-dark: $blue-900 !default; $secondary-bg-subtle-dark: $gray-900 !default; $success-bg-subtle-dark: $green-900 !default; @@ -24,7 +27,9 @@ $warning-bg-subtle-dark: $yellow-900 !default; $danger-bg-subtle-dark: $red-900 !default; $light-bg-subtle-dark: $gray-800 !default; $dark-bg-subtle-dark: mix($gray-800, $black) !default; +// scss-docs-end theme-bg-subtle-dark-variables +// scss-docs-start theme-border-subtle-dark-variables $primary-border-subtle-dark: $blue-700 !default; $secondary-border-subtle-dark: $gray-700 !default; $success-border-subtle-dark: $green-700 !default; @@ -33,6 +38,7 @@ $warning-border-subtle-dark: $yellow-800 !default; $danger-border-subtle-dark: $red-700 !default; $light-border-subtle-dark: $gray-700 !default; $dark-border-subtle-dark: $gray-800 !default; +// scss-docs-end theme-border-subtle-dark-variables $body-color-dark: $gray-500 !default; $body-bg-dark: $gray-900 !default; diff --git a/scss/_variables.scss b/scss/_variables.scss index 7db6e4aa0..ddd7e5c38 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -321,6 +321,7 @@ $theme-colors: ( ) !default; // scss-docs-end theme-colors-map +// scss-docs-start theme-text-variables $primary-text: $blue-700 !default; $secondary-text: $gray-700 !default; $success-text: $green-700 !default; @@ -329,7 +330,9 @@ $warning-text: $yellow-800 !default; $danger-text: $red-700 !default; $light-text: $gray-700 !default; $dark-text: $gray-700 !default; +// scss-docs-end theme-text-variables +// scss-docs-start theme-bg-subtle-variables $primary-bg-subtle: $blue-100 !default; $secondary-bg-subtle: $gray-100 !default; $success-bg-subtle: $green-100 !default; @@ -338,7 +341,9 @@ $warning-bg-subtle: $yellow-100 !default; $danger-bg-subtle: $red-100 !default; $light-bg-subtle: mix($gray-100, $white) !default; $dark-bg-subtle: $gray-400 !default; +// scss-docs-end theme-bg-subtle-variables +// scss-docs-start theme-border-subtle-variables $primary-border-subtle: $blue-200 !default; $secondary-border-subtle: $gray-200 !default; $success-border-subtle: $green-200 !default; @@ -347,6 +352,7 @@ $warning-border-subtle: $yellow-200 !default; $danger-border-subtle: $red-200 !default; $light-border-subtle: $gray-200 !default; $dark-border-subtle: $gray-500 !default; +// scss-docs-end theme-border-subtle-variables // Characters which are escaped by the escape-svg function $escaped-characters: ( diff --git a/site/assets/scss/_component-examples.scss b/site/assets/scss/_component-examples.scss index eedacb449..6c6cc677f 100644 --- a/site/assets/scss/_component-examples.scss +++ b/site/assets/scss/_component-examples.scss @@ -380,6 +380,7 @@ .highlight { margin-bottom: 0; + @include border-top-radius(0); } .bd-example { @@ -398,6 +399,12 @@ background-color: var(--bd-pre-bg); } +.bd-scss-docs { + .highlight-toolbar { + @include border-top-radius(calc(var(--bs-border-radius) + 1px)); + } +} + .focused { outline: 0; box-shadow: var(--#{$variable-prefix}focus-ring-offset), var(--#{$variable-prefix}focus-ring-x, 0) var(--#{$variable-prefix}focus-ring-y, 0) var(--#{$variable-prefix}focus-ring-blur) var(--#{$variable-prefix}focus-ring-width) var(--#{$variable-prefix}focus-ring-color); diff --git a/site/content/docs/5.3/components/carousel.md b/site/content/docs/5.3/components/carousel.md index dca8e9a79..422f0aaec 100644 --- a/site/content/docs/5.3/components/carousel.md +++ b/site/content/docs/5.3/components/carousel.md @@ -347,9 +347,9 @@ Add `.carousel-dark` to the `.carousel` for darker controls, indicators, and cap The transition duration of `.carousel-item` can be changed with the `$carousel-transition-duration` Sass variable before compiling or custom styles if you're using the compiled CSS. If multiple transitions are applied, make sure the transform transition is defined first (e.g. `transition: transform 2s ease, opacity .5s ease-out`). -## Sass +## CSS -### Variables +### Sass variables Variables for all carousels: diff --git a/site/content/docs/5.3/components/collapse.md b/site/content/docs/5.3/components/collapse.md index 95abc536c..21b9c3e06 100644 --- a/site/content/docs/5.3/components/collapse.md +++ b/site/content/docs/5.3/components/collapse.md @@ -100,9 +100,9 @@ If your control element is targeting a single collapsible element – i.e. the ` Note that Bootstrap's current implementation does not cover the various *optional* keyboard interactions described in the [ARIA Authoring Practices Guide accordion pattern](https://www.w3.org/WAI/ARIA/apg/patterns/accordion/) - you will need to include these yourself with custom JavaScript. -## Sass +## CSS -### Variables +### Sass variables {{< scss-docs name="collapse-transition" file="scss/_variables.scss" >}} diff --git a/site/content/docs/5.3/content/figures.md b/site/content/docs/5.3/content/figures.md index 29a38d723..985113709 100644 --- a/site/content/docs/5.3/content/figures.md +++ b/site/content/docs/5.3/content/figures.md @@ -26,8 +26,8 @@ Aligning the figure's caption is easy with our [text utilities]({{< docsref "/ut {{< /example >}} -## Sass +## CSS -### Variables +### Sass variables {{< scss-docs name="figure-variables" file="scss/_variables.scss" >}} diff --git a/site/content/docs/5.3/content/tables.md b/site/content/docs/5.3/content/tables.md index 044a7147f..3e393fda1 100644 --- a/site/content/docs/5.3/content/tables.md +++ b/site/content/docs/5.3/content/tables.md @@ -823,13 +823,13 @@ Use `.table-responsive{-sm|-md|-lg|-xl|-xxl}` as needed to create responsive tab {{< /tables.inline >}} {{< /highlight >}} -## Sass +## CSS -### Variables +### Sass variables {{< scss-docs name="table-variables" file="scss/_variables.scss" >}} -### Loop +### Sass loop {{< scss-docs name="table-loop" file="scss/_variables.scss" >}} diff --git a/site/content/docs/5.3/content/typography.md b/site/content/docs/5.3/content/typography.md index 963a98ccf..ca0f4e985 100644 --- a/site/content/docs/5.3/content/typography.md +++ b/site/content/docs/5.3/content/typography.md @@ -269,9 +269,9 @@ Align terms and descriptions horizontally by using our grid system's predefined In Bootstrap 5, we've enabled responsive font sizes by default, allowing text to scale more naturally across device and viewport sizes. Have a look at the [RFS page]({{< docsref "/getting-started/rfs" >}}) to find out how this works. -## Sass +## CSS -### Variables +### Sass variables Headings have some dedicated variables for sizing and spacing. @@ -281,6 +281,6 @@ Miscellaneous typography elements covered here and in [Reboot]({{< docsref "/con {{< scss-docs name="type-variables" file="scss/_variables.scss" >}} -### Mixins +### Sass mixins There are no dedicated mixins for typography, but Bootstrap does use [Responsive Font Sizing (RFS)]({{< docsref "/getting-started/rfs" >}}). diff --git a/site/content/docs/5.3/forms/checks-radios.md b/site/content/docs/5.3/forms/checks-radios.md index 99e42d92e..13a5091ad 100644 --- a/site/content/docs/5.3/forms/checks-radios.md +++ b/site/content/docs/5.3/forms/checks-radios.md @@ -300,9 +300,9 @@ Different variants of `.btn`, such at the various outlined styles, are supported {{< /example >}} -## Sass +## CSS -### Variables +### Sass variables Variables for checks: diff --git a/site/content/docs/5.3/forms/input-group.md b/site/content/docs/5.3/forms/input-group.md index 59b478d4c..d984a485b 100644 --- a/site/content/docs/5.3/forms/input-group.md +++ b/site/content/docs/5.3/forms/input-group.md @@ -312,8 +312,8 @@ Input groups include support for custom selects and custom file inputs. Browser {{< /example >}} -## Sass +## CSS -### Variables +### Sass variables {{< scss-docs name="input-group-variables" file="scss/_variables.scss" >}} diff --git a/site/content/docs/5.3/forms/overview.md b/site/content/docs/5.3/forms/overview.md index 119f9f2b9..f4d2f63db 100644 --- a/site/content/docs/5.3/forms/overview.md +++ b/site/content/docs/5.3/forms/overview.md @@ -105,11 +105,11 @@ If none of these are present, assistive technologies may resort to using the `pl While using visually hidden content (`.visually-hidden`, `aria-label`, and even `placeholder` content, which disappears once a form field has content) will benefit assistive technology users, a lack of visible label text may still be problematic for certain users. Some form of visible label is generally the best approach, both for accessibility and usability. -## Sass +## CSS Many form variables are set at a general level to be re-used and extended by individual form components. You'll see these most often as `$input-btn-*` and `$input-*` variables. -### Variables +### Sass variables `$input-btn-*` variables are shared global variables between our [buttons]({{< docsref "/components/buttons" >}}) and our form components. You'll find these frequently reassigned as values to other component-specific variables. diff --git a/site/content/docs/5.3/forms/range.md b/site/content/docs/5.3/forms/range.md index 5c4f02612..31edb0a8d 100644 --- a/site/content/docs/5.3/forms/range.md +++ b/site/content/docs/5.3/forms/range.md @@ -42,8 +42,8 @@ By default, range inputs "snap" to integer values. To change this, you can speci {{< /example >}} -## Sass +## CSS -### Variables +### Sass variables {{< scss-docs name="form-range-variables" file="scss/_variables.scss" >}} diff --git a/site/content/docs/5.3/forms/select.md b/site/content/docs/5.3/forms/select.md index 7f0c255ef..07ee8c8b1 100644 --- a/site/content/docs/5.3/forms/select.md +++ b/site/content/docs/5.3/forms/select.md @@ -74,8 +74,8 @@ Add the `disabled` boolean attribute on a select to give it a grayed out appeara {{< /example >}} -## Sass +## CSS -### Variables +### Sass variables {{< scss-docs name="form-select-variables" file="scss/_variables.scss" >}} diff --git a/site/content/docs/5.3/forms/validation.md b/site/content/docs/5.3/forms/validation.md index b119cd07d..d16a2d9f8 100644 --- a/site/content/docs/5.3/forms/validation.md +++ b/site/content/docs/5.3/forms/validation.md @@ -349,19 +349,19 @@ If your form layout allows it, you can swap the `.{valid|invalid}-feedback` clas {{< /example >}} -## Sass +## CSS -### Variables +### Sass variables {{< scss-docs name="form-feedback-variables" file="scss/_variables.scss" >}} -### Mixins +### Sass mixins Two mixins are combined together, through our [loop](#loop), to generate our form validation feedback styles. {{< scss-docs name="form-validation-mixins" file="scss/mixins/_forms.scss" >}} -### Map +### Sass map This is the validation Sass map from `_variables.scss`. Override or extend this to generate different or additional states. @@ -369,7 +369,7 @@ This is the validation Sass map from `_variables.scss`. Override or extend this Maps of `$form-validation-states` can contain three optional parameters to override tooltips and focus styles. -### Loop +### Sass loop Used to iterate over `$form-validation-states` map values to generate our validation styles. Any modifications to the above Sass map will be reflected in your compiled CSS via this loop. diff --git a/site/content/docs/5.3/helpers/stacks.md b/site/content/docs/5.3/helpers/stacks.md index 802ab4db6..b8133ba45 100644 --- a/site/content/docs/5.3/helpers/stacks.md +++ b/site/content/docs/5.3/helpers/stacks.md @@ -80,6 +80,6 @@ Create an inline form with `.hstack`: {{< /example >}} -## Sass +## CSS {{< scss-docs name="stacks" file="scss/helpers/_stacks.scss" >}} diff --git a/site/content/docs/5.3/layout/grid.md b/site/content/docs/5.3/layout/grid.md index a9d00376f..8e4d10a3c 100644 --- a/site/content/docs/5.3/layout/grid.md +++ b/site/content/docs/5.3/layout/grid.md @@ -409,11 +409,11 @@ To nest your content with the default grid, add a new `.row` and set of `.col-sm {{< /example >}} -## Sass +## CSS When using Bootstrap's source Sass files, you have the option of using Sass variables and mixins to create custom, semantic, and responsive page layouts. Our predefined grid classes use these same variables and mixins to provide a whole suite of ready-to-use classes for fast responsive layouts. -### Variables +### Sass variables Variables and maps determine the number of columns, the gutter width, and the media query point at which to begin floating columns. We use these to generate the predefined grid classes documented above, as well as for the custom mixins listed below. @@ -427,7 +427,7 @@ $grid-row-columns: 6; {{< scss-docs name="container-max-widths" file="scss/_variables.scss" >}} -### Mixins +### Sass mixins Mixins are used in conjunction with the grid variables to generate semantic CSS for individual grid columns. diff --git a/site/content/docs/5.3/utilities/background.md b/site/content/docs/5.3/utilities/background.md index aa9d24176..f3502b28a 100644 --- a/site/content/docs/5.3/utilities/background.md +++ b/site/content/docs/5.3/utilities/background.md @@ -83,11 +83,11 @@ Or, choose from any of the `.bg-opacity` utilities:
This is 10% opacity success background
{{< /example >}} -## Sass +## CSS In addition to the following Sass functionality, consider reading about our included [CSS custom properties]({{< docsref "/customize/css-variables" >}}) (aka CSS variables) for colors and more. -### Variables +### Sass variables Most `background-color` utilities are generated by our theme colors, reassigned from our generic color palette variables. @@ -101,7 +101,13 @@ Grayscale colors are also available, but only a subset are used to generate any {{< scss-docs name="gray-color-variables" file="scss/_variables.scss" >}} -### Map +Variables for setting `background-color` in `.bg-*-subtle` utilities in light and dark mode: + +{{< scss-docs name="theme-bg-subtle-variables" file="scss/_variables.scss" >}} + +{{< scss-docs name="theme-bg-subtle-dark-variables" file="scss/_variables-dark.scss" >}} + +### Sass maps Theme colors are then put into a Sass map so we can loop over them to generate our utilities, component modifiers, and more. @@ -115,11 +121,17 @@ RGB colors are generated from a separate Sass map: {{< scss-docs name="theme-colors-rgb" file="scss/_maps.scss" >}} -And background color opacities build on that with their own map that's consumed by the utilities API: +Background color opacities build on that with their own map that's consumed by the utilities API: {{< scss-docs name="utilities-bg-colors" file="scss/_maps.scss" >}} -### Mixins +Color mode background colors are also available as a Sass map: + +{{< scss-docs name="theme-bg-subtle-map" file="scss/_maps.scss" >}} + +{{< scss-docs name="theme-bg-subtle-dark-map" file="scss/_maps.scss" >}} + +### Sass mixins **No mixins are used to generate our background utilities**, but we do have some additional mixins for other situations where you'd like to create your own gradients. @@ -127,7 +139,7 @@ And background color opacities build on that with their own map that's consumed {{< scss-docs name="gradient-mixins" file="scss/mixins/_gradients.scss" >}} -### Utilities API +## Utilities API Background utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]({{< docsref "/utilities/api#using-the-api" >}}) diff --git a/site/content/docs/5.3/utilities/borders.md b/site/content/docs/5.3/utilities/borders.md index ad244c16f..aaf88a225 100644 --- a/site/content/docs/5.3/utilities/borders.md +++ b/site/content/docs/5.3/utilities/borders.md @@ -166,6 +166,20 @@ Use the scaling classes for larger or smaller rounded corners. Sizes range from {{< scss-docs name="border-radius-variables" file="scss/_variables.scss" >}} +Variables for setting `border-color` in `.border-*-subtle` utilities in light and dark mode: + +{{< scss-docs name="theme-border-subtle-variables" file="scss/_variables.scss" >}} + +{{< scss-docs name="theme-border-subtle-dark-variables" file="scss/_variables-dark.scss" >}} + +### Sass maps + +Color mode adaptive border colors are also available as a Sass map: + +{{< scss-docs name="theme-border-subtle-map" file="scss/_maps.scss" >}} + +{{< scss-docs name="theme-border-subtle-dark-map" file="scss/_maps.scss" >}} + ### Sass mixins {{< scss-docs name="border-radius-mixins" file="scss/mixins/_border-radius.scss" >}} diff --git a/site/content/docs/5.3/utilities/colors.md b/site/content/docs/5.3/utilities/colors.md index adbd95e40..af0cadce5 100644 --- a/site/content/docs/5.3/utilities/colors.md +++ b/site/content/docs/5.3/utilities/colors.md @@ -87,11 +87,11 @@ Or, choose from any of the `.text-opacity` utilities: Sometimes contextual classes cannot be applied due to the specificity of another selector. In some cases, a sufficient workaround is to wrap your element's content in a `
` or more semantic element with the desired class. -## Sass +## CSS In addition to the following Sass functionality, consider reading about our included [CSS custom properties]({{< docsref "/customize/css-variables" >}}) (aka CSS variables) for colors and more. -### Variables +### Sass variables Most `color` utilities are generated by our theme colors, reassigned from our generic color palette variables. @@ -103,7 +103,15 @@ Grayscale colors are also available, but only a subset are used to generate any {{< scss-docs name="gray-color-variables" file="scss/_variables.scss" >}} -### Map +{{< scss-docs name="theme-text-map" file="scss/_maps.scss" >}} + +Variables for setting colors in `.text-*-emphasis` utilities in light and dark mode: + +{{< scss-docs name="theme-text-variables" file="scss/_variables.scss" >}} + +{{< scss-docs name="theme-text-dark-variables" file="scss/_variables-dark.scss" >}} + +### Sass maps Theme colors are then put into a Sass map so we can loop over them to generate our utilities, component modifiers, and more. @@ -117,10 +125,16 @@ RGB colors are generated from a separate Sass map: {{< scss-docs name="theme-colors-rgb" file="scss/_maps.scss" >}} -And color opacities build on that with their own map that's consumed by the utilities API: +Color opacities build on that with their own map that's consumed by the utilities API: {{< scss-docs name="utilities-text-colors" file="scss/_maps.scss" >}} +Color mode adaptive text colors are also available as a Sass map: + +{{< scss-docs name="theme-text-map" file="scss/_maps.scss" >}} + +{{< scss-docs name="theme-text-dark-map" file="scss/_maps.scss" >}} + ### Utilities API Color utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]({{< docsref "/utilities/api#using-the-api" >}}) diff --git a/site/content/docs/5.3/utilities/text.md b/site/content/docs/5.3/utilities/text.md index 89d45fc6a..f7c030da6 100644 --- a/site/content/docs/5.3/utilities/text.md +++ b/site/content/docs/5.3/utilities/text.md @@ -137,19 +137,23 @@ Decorate text in components with text decoration classes. This link has its text decoration removed {{< /example >}} -## Sass +## CSS -### Variables +### Sass variables + +Default type and font related Sass variables: {{< scss-docs name="font-variables" file="scss/_variables.scss" >}} -### Maps +### Sass maps Font-size utilities are generated from this map, in combination with our utilities API. {{< scss-docs name="font-sizes" file="scss/_variables.scss" >}} -### Utilities API +{{< scss-docs name="theme-text-map" file="scss/_maps.scss" >}} + +## Utilities API Font and text utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]({{< docsref "/utilities/api#using-the-api" >}}) diff --git a/site/layouts/shortcodes/scss-docs.html b/site/layouts/shortcodes/scss-docs.html index 3d1cd09a5..919a951ac 100644 --- a/site/layouts/shortcodes/scss-docs.html +++ b/site/layouts/shortcodes/scss-docs.html @@ -39,5 +39,17 @@ {{- $match = replace $match " !default" "" -}} {{- end -}} - {{- highlight $match "scss" "" -}} +
+
+ + {{- $file -}} + +
+ +
+
+ {{- highlight $match "scss" "" -}} +
{{- end -}}