diff --git a/scss/_maps.scss b/scss/_maps.scss index 46952baa11..d299452a8d 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 c3b4640a4e..88256a1c3a 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 7db6e4aa09..ddd7e5c38a 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 eedacb449e..6c6cc677f9 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 dca8e9a792..422f0aaecd 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 95abc536c4..21b9c3e065 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 29a38d7237..985113709d 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 044a7147f8..3e393fda1f 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 963a98ccfd..ca0f4e985e 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 99e42d92e6..13a5091ad6 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 59b478d4c1..d984a485bc 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 119f9f2b9e..f4d2f63db2 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 5c4f02612d..31edb0a8dc 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 7f0c255efb..07ee8c8b15 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 b119cd07db..d16a2d9f82 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 802ab4db65..b8133ba454 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 a9d00376f7..8e4d10a3cf 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 aa9d241761..f3502b28ac 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 ad244c16fe..aaf88a2253 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 adbd95e401..af0cadce57 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 89d45fc6a8..f7c030da68 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 3d1cd09a5d..919a951ac7 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 -}}