@use "sass:meta";
@use "../scss/config" as *;
@use "../scss/colors" as *;
-@use "../scss/variables" as *;
@use "../scss/functions" as *;
@use "../scss/theme" as *;
@use "../scss/utilities" as *;
@use "config" as *;
@use "functions" as *;
-@use "variables" as *;
@use "mixins/border-radius" as *;
@use "mixins/tokens" as *;
@use "config" as *;
@use "functions" as *;
-@use "variables" as *;
@use "mixins/border-radius" as *;
@use "mixins/box-shadow" as *;
@use "mixins/tokens" as *;
+@use "sass:map";
+@use "sass:meta";
+
// Configuration
//
// Variables and settings not related to theme, components, and more go here. It does include layout.
+// Merge overrides on top of defaults, stripping null entries.
+// Null values let users remove map keys via @use ... with().
+// Accepts a list as $defaults (converted to a map with `true` values).
+@function defaults($defaults, $overrides) {
+ @if meta.type-of($defaults) == "list" {
+ $map: ();
+ @each $key in $defaults {
+ $map: map.merge($map, ($key: true));
+ }
+ $defaults: $map;
+ }
+ $merged: map.merge($defaults, $overrides);
+ @each $key, $value in $merged {
+ @if $value == null {
+ $merged: map.remove($merged, $key);
+ }
+ }
+ @return $merged;
+}
+
$enable-caret: true !default;
$enable-rounded: true !default;
$enable-shadows: true !default;
$enable-deprecation-messages: true !default;
$enable-dark-mode: true !default;
-$color-mode-type: data !default; // `data` or `media-query`
-
-// more to come here…
$color-mode-type: "media-query" !default;
$color-contrast-dark: #000 !default;
("(", "%28"),
(")", "%29"),
) !default;
+
+// Gradient
+//
+// The gradient which is added to components if `$enable-gradients` is `true`
+// This gradient is also added to elements with `.bg-gradient`
+// scss-docs-start variable-gradient
+$gradient: linear-gradient(180deg, color-mix(var(--white) 15%, transparent), color-mix(var(--white) 0%, transparent)) !default;
+// scss-docs-end variable-gradient
+
+// Position
+//
+// Define the edge positioning anchors of the position utilities.
+
+// scss-docs-start position-map
+$position-values: (
+ 0: 0,
+ 50: 50%,
+ 100: 100%
+) !default;
+// scss-docs-end position-map
+
+// Links
+//
+// Style anchor elements.
+
+$link-decoration: underline !default;
+$link-underline-offset: .2em !default;
+
+$stretched-link-pseudo-element: after !default;
+$stretched-link-z-index: 1 !default;
+
+// Icon links
+// scss-docs-start icon-link-variables
+$icon-link-gap: .375rem !default;
+$icon-link-underline-offset: .25em !default;
+$icon-link-icon-size: 1em !default;
+$icon-link-icon-transition: .2s ease-in-out transform !default;
+$icon-link-icon-transform: translate3d(.25em, 0, 0) !default;
+// scss-docs-end icon-link-variables
+
+// Paragraphs
+//
+// Style p element.
+
+$paragraph-margin-bottom: 1rem !default;
+
+// Components
+//
+// Define common padding and border radius sizes and more.
+
+// scss-docs-start border-variables
+$border-width: 1px !default;
+$border-widths: (
+ 1: 1px,
+ 2: 2px,
+ 3: 3px,
+ 4: 4px,
+ 5: 5px
+) !default;
+$border-style: solid !default;
+$border-color: color-mix(in oklch, var(--gray-100), var(--gray-200)) !default;
+// scss-docs-end border-variables
+
+$transition-base: all .2s ease-in-out !default;
+$transition-fade: opacity .15s linear !default;
+
+// scss-docs-start collapse-transition
+$transition-collapse: height .35s ease !default;
+$transition-collapse-width: width .35s ease !default;
+// scss-docs-end collapse-transition
+
+// scss-docs-start aspect-ratios
+$aspect-ratios: (
+ "auto": auto,
+ "1x1": #{"1 / 1"},
+ "4x3": #{"4 / 3"},
+ "16x9": #{"16 / 9"},
+ "21x9": #{"21 / 9"}
+) !default;
+// scss-docs-end aspect-ratios
+
+// Typography
+//
+// Font, line-height, and color for body text, headings, and more.
+
+// scss-docs-start font-variables
+$font-weight-lighter: lighter !default;
+$font-weight-light: 300 !default;
+$font-weight-normal: 400 !default;
+$font-weight-medium: 500 !default;
+$font-weight-semibold: 600 !default;
+$font-weight-bold: 700 !default;
+$font-weight-bolder: bolder !default;
+
+$font-weight-base: $font-weight-normal !default;
+
+$line-height-base: 1.5 !default;
+$line-height-sm: 1.25 !default;
+$line-height-lg: 2 !default;
+// scss-docs-end font-variables
+
+// scss-docs-start font-sizes
+$font-sizes: () !default;
+// stylelint-disable-next-line scss/dollar-variable-default
+$font-sizes: defaults(
+ (
+ "xs": (
+ "font-size": .75rem,
+ "line-height": 1.25
+ ),
+ "sm": (
+ "font-size": .875rem,
+ "line-height": 1.5
+ ),
+ "md": (
+ "font-size": 1rem,
+ "line-height": 1.5
+ ),
+ "lg": (
+ "font-size": clamp(1.25rem, 1rem + .625vw, 1.5rem),
+ "line-height": 1.5
+ ),
+ "xl": (
+ "font-size": clamp(1.5rem, 1.1rem + .75vw, 1.75rem),
+ "line-height": calc(2.5 / 1.75)
+ ),
+ "2xl": (
+ "font-size": clamp(1.75rem, 1.3rem + 1vw, 2rem),
+ "line-height": calc(3 / 2.25)
+ ),
+ "3xl": (
+ "font-size": clamp(2rem, 1.5rem + 1.875vw, 2.5rem),
+ "line-height": 1.2
+ ),
+ "4xl": (
+ "font-size": clamp(2.25rem, 1.75rem + 2.5vw, 3rem),
+ "line-height": 1.1
+ ),
+ "5xl": (
+ "font-size": clamp(3rem, 2rem + 5vw, 4rem),
+ "line-height": 1.1
+ ),
+ "6xl": (
+ "font-size": clamp(3.75rem, 2.5rem + 6.25vw, 5rem),
+ "line-height": 1
+ ),
+ ),
+ $font-sizes
+);
+// scss-docs-end font-sizes
+
+// scss-docs-start headings-variables
+$headings-margin-bottom: $spacer * .5 !default;
+$headings-font-family: null !default;
+$headings-font-style: null !default;
+$headings-font-weight: 500 !default;
+$headings-line-height: 1.2 !default;
+$headings-color: inherit !default;
+// scss-docs-end headings-variables
+
+// scss-docs-start type-variables
+
+$legend-margin-bottom: .5rem !default;
+$legend-font-size: 1.5rem !default;
+$legend-font-weight: null !default;
+
+$dt-font-weight: $font-weight-bold !default;
+
+// scss-docs-end type-variables
+
+// Z-index master list
+//
+// Warning: Avoid customizing these values. They're used for a bird's eye view
+// of components dependent on the z-axis and are designed to all work together.
+
+// scss-docs-start zindex-stack
+$zindex-dropdown: 1000 !default;
+$zindex-sticky: 1020 !default;
+$zindex-fixed: 1030 !default;
+$zindex-offcanvas-backdrop: 1040 !default;
+$zindex-offcanvas: 1045 !default;
+$zindex-dialog: 1055 !default;
+$zindex-popover: 1070 !default;
+$zindex-tooltip: 1080 !default;
+$zindex-toast: 1090 !default;
+// scss-docs-end zindex-stack
+
+// scss-docs-start zindex-levels-map
+$zindex-levels: (
+ n1: -1,
+ 0: 0,
+ 1: 1,
+ 2: 2,
+ 3: 3
+) !default;
+// scss-docs-end zindex-levels-map
// stylelint-disable selector-max-attribute, property-disallowed-list, selector-no-qualifying-type -- VCP uses extensive data attributes and requires direct border-radius properties for range selection
@use "functions" as *;
-@use "variables" as *;
+@use "config" as *;
@use "mixins/border-radius" as *;
@use "mixins/focus-ring" as *;
@use "mixins/tokens" as *;
@use "sass:map";
@use "config" as *;
@use "functions" as *;
-@use "variables" as *;
@use "layout/breakpoints" as *;
@use "mixins/border-radius" as *;
@use "mixins/box-shadow" as *;
@use "config" as *;
@use "functions" as *;
-@use "variables" as *;
@use "mixins/border-radius" as *;
@use "mixins/box-shadow" as *;
@use "mixins/gradients" as *;
@use "sass:math";
@use "sass:meta";
@use "sass:string";
-// @use "variables" as *;
+@forward "config" show defaults;
@use "config" as *;
// Bootstrap functions
@return $result;
}
-// Merge overrides on top of defaults, stripping null entries.
-// Null values let users remove map keys via @use ... with().
-// Accepts a list as $defaults (converted to a map with `true` values).
-@function defaults($defaults, $overrides) {
- @if meta.type-of($defaults) == "list" {
- $map: ();
- @each $key in $defaults {
- $map: map.merge($map, ($key: true));
- }
- $defaults: $map;
- }
- $merged: map.merge($defaults, $overrides);
- @each $key, $value in $merged {
- @if $value == null {
- $merged: map.remove($merged, $key);
- }
- }
- @return $merged;
-}
-
// Merge multiple maps
@function map-merge-multiple($maps...) {
$merged-maps: ();
@use "sass:map";
@use "config" as *;
@use "functions" as *;
-@use "variables" as *;
@use "mixins/border-radius" as *;
@use "layout/breakpoints" as *;
@use "mixins/tokens" as *;
@use "functions" as *;
-@use "variables" as *;
+@use "config" as *;
@use "mixins/border-radius" as *;
@use "mixins/focus-ring" as *;
@use "mixins/gradients" as *;
@use "functions" as *;
-@use "variables" as *;
+@use "config" as *;
@use "mixins/border-radius" as *;
@use "mixins/box-shadow" as *;
@use "mixins/transition" as *;
@use "config" as *;
@use "functions" as *;
-@use "variables" as *;
@use "mixins/border-radius" as *;
@use "mixins/box-shadow" as *;
@use "mixins/reset-text" as *;
@use "colors" as *;
@use "config" as *;
@use "functions" as *;
-@use "variables" as *;
@use "theme" as *;
@use "mixins/tokens" as *;
@use "forms/form-variables" as *;
--gradient: #{$gradient},
- // scss-docs-start root-font-size-variables
- --font-size-base: 1rem,
- --font-size-xs: .75rem,
- --font-size-sm: .875rem,
- --font-size-md: 1rem,
- --font-size-lg: clamp(1.25rem, 1rem + .625vw, 1.5rem),
- --font-size-xl: clamp(1.5rem, 1.1rem + .75vw, 1.75rem),
- --font-size-2xl: clamp(1.75rem, 1.3rem + 1vw, 2rem),
- --font-size-3xl: clamp(2rem, 1.5rem + 1.875vw, 2.5rem),
- --font-size-4xl: clamp(2.25rem, 1.75rem + 2.5vw, 3rem),
- --font-size-5xl: clamp(3rem, 2rem + 5vw, 4rem),
- --font-size-6xl: clamp(3.75rem, 2.5rem + 6.25vw, 5rem),
-
- --line-height-xs: 1.25,
- --line-height-sm: 1.5,
- --line-height-md: 1.5,
- --line-height-lg: 1.5,
- --line-height-xl: calc(2.5 / 1.75),
- --line-height-2xl: calc(3 / 2.25),
- --line-height-3xl: 1.2,
- --line-height-4xl: 1.1,
- --line-height-5xl: 1.1,
- --line-height-6xl: 1,
- // scss-docs-end root-font-size-variables
-
// scss-docs-start root-font-weight-variables
--font-weight-lighter: lighter,
--font-weight-light: 300,
// stylelint-enable @stylistic/value-list-max-empty-lines, @stylistic/function-max-empty-lines
// scss-docs-end root-tokens
+// scss-docs-start root-font-size-loop
+// Generate font-size and line-height tokens
+@each $name, $props in $font-sizes {
+ $root-tokens: map.set($root-tokens, --font-size-#{$name}, map.get($props, "font-size"));
+ $root-tokens: map.set($root-tokens, --line-height-#{$name}, map.get($props, "line-height"));
+}
+// scss-docs-end root-font-size-loop
+
// scss-docs-start root-theme-tokens
// Generate semantic theme colors
@each $color-name, $color-map in $theme-colors {
@use "config" as *;
@use "functions" as *;
-@use "variables" as *;
@use "mixins/border-radius" as *;
@use "mixins/tokens" as *;
@use "config" as *;
@use "functions" as *;
-@use "variables" as *;
@use "mixins/border-radius" as *;
@use "mixins/reset-text" as *;
@use "mixins/tokens" as *;
-@use "variables" as *;
+@use "config" as *;
@use "mixins/transition" as *;
.fade {
@use "sass:map";
@use "config" as *;
-@use "variables" as *;
@use "functions" as *;
@use "theme" as *;
+++ /dev/null
-@use "config" as *;
-@use "functions" as *;
-
-// Variables
-//
-// Variables should follow the `$component-state-property-size` formula for
-// consistent naming. Ex: $nav-link-disabled-color and $btn-padding-y-lg.
-
-// Characters which are escaped by the escape-svg function
-$escaped-characters: (
- ("<", "%3c"),
- (">", "%3e"),
- ("#", "%23"),
- ("(", "%28"),
- (")", "%29"),
-) !default;
-
-// Gradient
-//
-// The gradient which is added to components if `$enable-gradients` is `true`
-// This gradient is also added to elements with `.bg-gradient`
-// scss-docs-start variable-gradient
-$gradient: linear-gradient(180deg, color-mix(var(--white) 15%, transparent), color-mix(var(--white) 0%, transparent)) !default;
-// scss-docs-end variable-gradient
-
-// Spacing
-//
-// Control the default styling of most Bootstrap elements by modifying these
-// variables. Mostly focused on spacing.
-// You can add more entries to the $spacers map, should you need more variation.
-
-// scss-docs-start spacer-variables-maps
-$spacer: 1rem !default;
-$spacers: (
- 0: 0,
- 1: $spacer * .25,
- 2: $spacer * .5,
- 3: $spacer,
- 4: $spacer * 1.5,
- 5: $spacer * 3,
-) !default;
-// scss-docs-end spacer-variables-maps
-
-// Position
-//
-// Define the edge positioning anchors of the position utilities.
-
-// scss-docs-start position-map
-$position-values: (
- 0: 0,
- 50: 50%,
- 100: 100%
-) !default;
-// scss-docs-end position-map
-
-// Body
-//
-// Settings for the `<body>` element.
-
-// $body-text-align: null !default;
-
-// Links
-//
-// Style anchor elements.
-
-// $link-color: var !default;
-$link-decoration: underline !default;
-$link-underline-offset: .2em !default;
-
-$stretched-link-pseudo-element: after !default;
-$stretched-link-z-index: 1 !default;
-
-// Icon links
-// scss-docs-start icon-link-variables
-$icon-link-gap: .375rem !default;
-$icon-link-underline-offset: .25em !default;
-$icon-link-icon-size: 1em !default;
-$icon-link-icon-transition: .2s ease-in-out transform !default;
-$icon-link-icon-transform: translate3d(.25em, 0, 0) !default;
-// scss-docs-end icon-link-variables
-
-// Paragraphs
-//
-// Style p element.
-
-$paragraph-margin-bottom: 1rem !default;
-
-// Components
-//
-// Define common padding and border radius sizes and more.
-
-// scss-docs-start border-variables
-$border-width: 1px !default;
-$border-widths: (
- 1: 1px,
- 2: 2px,
- 3: 3px,
- 4: 4px,
- 5: 5px
-) !default;
-$border-style: solid !default;
-$border-color: color-mix(in oklch, var(--gray-100), var(--gray-200)) !default;
-// scss-docs-end border-variables
-
-$transition-base: all .2s ease-in-out !default;
-$transition-fade: opacity .15s linear !default;
-
-// scss-docs-start collapse-transition
-$transition-collapse: height .35s ease !default;
-$transition-collapse-width: width .35s ease !default;
-// scss-docs-end collapse-transition
-
-// scss-docs-start aspect-ratios
-$aspect-ratios: (
- "auto": auto,
- "1x1": #{"1 / 1"},
- "4x3": #{"4 / 3"},
- "16x9": #{"16 / 9"},
- "21x9": #{"21 / 9"}
-) !default;
-// scss-docs-end aspect-ratios
-
-// Typography
-//
-// Font, line-height, and color for body text, headings, and more.
-
-// scss-docs-start font-variables
-// $font-family-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
-// $font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;
-// $font-family-base: var(--font-sans-serif) !default;
-// $font-family-code: var(--font-monospace) !default;
-
-$font-weight-lighter: lighter !default;
-$font-weight-light: 300 !default;
-$font-weight-normal: 400 !default;
-$font-weight-medium: 500 !default;
-$font-weight-semibold: 600 !default;
-$font-weight-bold: 700 !default;
-$font-weight-bolder: bolder !default;
-
-$font-weight-base: $font-weight-normal !default;
-
-$line-height-base: 1.5 !default;
-$line-height-sm: 1.25 !default;
-$line-height-lg: 2 !default;
-
-$h1-font-size: var(--font-size-3xl) !default;
-$h2-font-size: var(--font-size-2xl) !default;
-$h3-font-size: var(--font-size-xl) !default;
-$h4-font-size: var(--font-size-lg) !default;
-$h5-font-size: var(--font-size-md) !default;
-$h6-font-size: var(--font-size-sm) !default;
-// scss-docs-end font-variables
-
-// Font sizes with line-height for utilities
-$font-sizes: () !default;
-// stylelint-disable-next-line scss/dollar-variable-default
-$font-sizes: defaults(
- (
- "xs": (
- "font-size": var(--font-size-xs),
- "line-height": var(--line-height-xs)
- ),
- "sm": (
- "font-size": var(--font-size-sm),
- "line-height": var(--line-height-sm)
- ),
- "md": (
- "font-size": var(--font-size-md),
- "line-height": var(--line-height-md)
- ),
- "lg": (
- "font-size": var(--font-size-lg),
- "line-height": var(--line-height-lg)
- ),
- "xl": (
- "font-size": var(--font-size-xl),
- "line-height": var(--line-height-xl)
- ),
- "2xl": (
- "font-size": var(--font-size-2xl),
- "line-height": var(--line-height-2xl)
- ),
- "3xl": (
- "font-size": var(--font-size-3xl),
- "line-height": var(--line-height-3xl)
- ),
- "4xl": (
- "font-size": var(--font-size-4xl),
- "line-height": var(--line-height-4xl)
- ),
- "5xl": (
- "font-size": var(--font-size-5xl),
- "line-height": var(--line-height-5xl)
- ),
- "6xl": (
- "font-size": var(--font-size-6xl),
- "line-height": var(--line-height-6xl)
- ),
- ),
- $font-sizes
-);
-
-// scss-docs-start headings-variables
-$headings-margin-bottom: $spacer * .5 !default;
-$headings-font-family: null !default;
-$headings-font-style: null !default;
-$headings-font-weight: 500 !default;
-$headings-line-height: 1.2 !default;
-$headings-color: inherit !default;
-// scss-docs-end headings-variables
-
-// scss-docs-start type-variables
-
-$legend-margin-bottom: .5rem !default;
-$legend-font-size: 1.5rem !default;
-$legend-font-weight: null !default;
-
-$dt-font-weight: $font-weight-bold !default;
-
-// $list-inline-padding: .5rem !default;
-// scss-docs-end type-variables
-
-// Z-index master list
-//
-// Warning: Avoid customizing these values. They're used for a bird's eye view
-// of components dependent on the z-axis and are designed to all work together.
-
-// scss-docs-start zindex-stack
-$zindex-dropdown: 1000 !default;
-$zindex-sticky: 1020 !default;
-$zindex-fixed: 1030 !default;
-$zindex-offcanvas-backdrop: 1040 !default;
-$zindex-offcanvas: 1045 !default;
-$zindex-dialog: 1055 !default;
-$zindex-popover: 1070 !default;
-$zindex-tooltip: 1080 !default;
-$zindex-toast: 1090 !default;
-// scss-docs-end zindex-stack
-
-// scss-docs-start zindex-levels-map
-$zindex-levels: (
- n1: -1,
- 0: 0,
- 1: 1,
- 2: 2,
- 3: 3
-) !default;
-// scss-docs-end zindex-levels-map
$file: "Utilities"
);
-// Configuration
-// @forward "variables";
-
// Layout & components
@forward "root";
@use "../colors" as *;
@use "../config" as *;
@use "../functions" as *;
-@use "../variables" as *;
@use "../mixins/border-radius" as *;
@use "../mixins/tokens" as *;
// stylelint-disable declaration-no-important, selector-no-qualifying-type, property-no-vendor-prefix
$reboot-kbd-tokens: () !default;
+$reboot-mark-tokens: () !default;
// scss-docs-start reboot-kbd-tokens
// stylelint-disable-next-line scss/dollar-variable-default
);
// scss-docs-end reboot-kbd-tokens
-$reboot-mark-tokens: () !default;
-
// scss-docs-start reboot-mark-tokens
// stylelint-disable-next-line scss/dollar-variable-default
$reboot-mark-tokens: defaults(
h1,
.h1 {
@extend %heading;
- font-size: $h1-font-size;
+ font-size: var(--font-size-3xl);
}
h2,
.h2 {
@extend %heading;
- font-size: $h2-font-size;
+ font-size: var(--font-size-2xl);
}
h3,
.h3 {
@extend %heading;
- font-size: $h3-font-size;
+ font-size: var(--font-size-xl);
}
h4,
.h4 {
@extend %heading;
- font-size: $h4-font-size;
+ font-size: var(--font-size-lg);
}
h5,
.h5 {
@extend %heading;
- font-size: $h5-font-size;
+ font-size: var(--font-size-md);
}
h6,
.h6 {
@extend %heading;
- font-size: $h6-font-size;
+ font-size: var(--font-size-sm);
}
// Reset margins on paragraphs
@use "sass:map";
@use "../config" as *;
-@use "../variables" as *;
@use "../functions" as *;
@use "../layout/breakpoints" as *;
@use "../mixins/tokens" as *;
@use "../config" as *;
-@use "../variables" as *;
@use "../functions" as *;
@use "../mixins/border-radius" as *;
@use "../mixins/focus-ring" as *;
-@use "../variables" as *;
+@use "../config" as *;
@use "../mixins/transition" as *;
@layer helpers {
@use "sass:map";
@use "../config" as *;
-@use "../variables" as *;
@use "../layout/breakpoints" as *;
@layer helpers {
-@use "../variables" as *;
+@use "../config" as *;
@layer helpers {
.stretched-link {
// check-unused-imports-disable — test infrastructure imports.
@use "../../functions" as *;
-@use "../../variables" as *;
+@use "../../config" as *;
@use "../../mixins" as *;
$true-terminal-output: false;
@import "../../functions";
-@import "../../variables";
+@import "../../config";
@import "../../variables-dark";
@import "../../maps";
@import "../../mixins";
@import "../../colors";
@import "../../functions";
-@import "../../variables";
+@import "../../config";
@import "../../variables-dark";
@import "../../maps";
@import "../../mixins";
// check-unused-imports-disable — test infrastructure imports.
-@use "../../variables" as *;
+@use "../../config" as *;
@use "../../functions" as *;
@use "../../mixins/utilities" as *;
// check-unused-imports-disable — test infrastructure imports.
@use "../../functions";
-@use "../../variables";
+@use "../../config";
@use "../../maps";
@use "../../mixins";
### Sass variables
-<ScssDocs name="collapse-transition" file="scss/_variables.scss" />
+<ScssDocs name="collapse-transition" file="scss/_config.scss" />
### Classes
All heading elements—`<h1>`—`<h6>` have their `margin-top` removed, `margin-bottom: .5rem` set, and `line-height` tightened. While headings inherit their `color` by default, you can also override it via optional CSS variable, `--bs-heading-color`.
+You can also use the `.h1`–`.h6` classes to style headings without using the HTML elements.
+
<BsTable>
| Heading | Example |
| --- | --- |
- Set the global link color via `--bs-link-color`.
- Use `--bs-body-bg` to set a `background-color` on the `<body>` (`#fff` by default).
-These styles can be found within `_reboot.scss`, and the global variables are defined in `_variables.scss`. Make sure to set `--font-size-base` in `rem`.
+These styles can be found within `_reboot.scss`, and the global variables are defined in `_config.scss`. Make sure to set `--font-size-base` in `rem`.
## Headings
-All HTML headings, `<h1>` through `<h6>`, are available.
+As mentioned in [Reboot]([[docsref:/content/reboot#headings]]), all HTML headings, `<h1>` through `<h6>`, are available, as element or class selectors.
<BsTable>
| Heading | Example |
<h4>h4. Bootstrap heading</h4>
<h5>h5. Bootstrap heading</h5>
<h6>h6. Bootstrap heading</h6>
-```
-
-`.h1` through `.h6` classes are also available, for when you want to match the font styling of a heading but cannot use the associated HTML element.
-<Example code={`<p class="h1">h1. Bootstrap heading</p>
+<p class="h1">h1. Bootstrap heading</p>
<p class="h2">h2. Bootstrap heading</p>
<p class="h3">h3. Bootstrap heading</p>
<p class="h4">h4. Bootstrap heading</p>
<p class="h5">h5. Bootstrap heading</p>
-<p class="h6">h6. Bootstrap heading</p>`} />
+<p class="h6">h6. Bootstrap heading</p>
+```
Head to our [font size utilities]([[docsref:/utilities/font-size]]) for more control over the `font-size` and `line-height`.
-### Customizing headings
+## Global font sizes
-Use the included utility classes to recreate the small secondary heading text from Bootstrap 3.
+Headings are sized with our responsive font-size root CSS variables. You can use these yourself, or with our heading classes, [font size utilities]([[docsref:/utilities/font-size]]), and [text size utilities]([[docsref:/utilities/font-size#with-line-height]]) (where you’ll get a `line-height` as well).
-<Example code={`<h3>
- Fancy display heading
- <small class="text-body-secondary">With faded secondary text</small>
- </h3>`} />
+Learn more about how these work down below in the [CSS](#css) section.
+
+<Example code={`<div class="fs-xs">.fs-xs</div>
+<div class="fs-sm">.fs-sm</div>
+<div class="fs-md">.fs-md</div>
+<div class="fs-lg">.fs-lg</div>
+<div class="fs-xl">.fs-xl</div>
+<div class="fs-2xl">.fs-2xl</div>
+<div class="fs-3xl">.fs-3xl</div>
+<div class="fs-4xl">.fs-4xl</div>
+<div class="fs-5xl">.fs-5xl</div>
+<div class="fs-6xl">.fs-6xl</div>`} />
## Inline text elements
## CSS
+### Variables
+
+All `--font-size-*` and `--line-height-*` CSS custom properties are defined in `_root.scss`, generated from the `$font-sizes` Sass map in `_config.scss`.
+
+```css
+:root {
+ /* Abbreviated list for example purposes… */
+ --font-size-xs: 0.75rem;
+ --font-size-sm: 0.875rem;
+ --font-size-md: 1rem;
+ --font-size-lg: 1.25rem;
+ --font-size-xl: 1.5rem;
+ /* Plus the rest… */
+}
+```
+
### Sass variables
Headings have some dedicated variables for sizing and spacing.
-<ScssDocs name="headings-variables" file="scss/_variables.scss" />
+<ScssDocs name="headings-variables" file="scss/_config.scss" />
Miscellaneous typography elements covered here and in [Reboot]([[docsref:/content/reboot]]) also have dedicated variables.
-<ScssDocs name="type-variables" file="scss/_variables.scss" />
+<ScssDocs name="type-variables" file="scss/_config.scss" />
+
+### Sass maps
+
+The `$font-sizes` map in `_config.scss` defines Bootstrap's type scale. Each key (e.g., `xs`, `md`, `3xl`) holds a nested map with `font-size` and `line-height` values. Larger sizes use `clamp()` for responsive scaling.
+
+<ScssDocs name="font-sizes" file="scss/_config.scss" />
+
+You can override individual keys, replace the entire map, or remove keys by setting them to `null`:
+
+```scss
+// Per-key override
+@use "bootstrap/scss/config" with (
+ $font-sizes: ("xs": ("font-size": .625rem, "line-height": 1.25))
+);
+
+// Remove a key
+@use "bootstrap/scss/config" with (
+ $font-sizes: ("6xl": null)
+);
+```
+
+### Sass loops
+
+The font-size map is used to generate `--font-size-*` and `--line-height-*` CSS custom properties in `_root.scss`, as well as `.fs-*` and `.text-*` utility classes in `_utilities.scss`.
-### Sass mixins
+<ScssDocs name="root-font-size-loop" file="scss/_root.scss" />
-There are no dedicated mixins for typography.
+<ScssDocs name="utils-font-size" file="scss/_utilities.scss" />
CSS variables for our dark color mode are partially generated from dark mode specific Sass variables in `_variables-dark.scss`. This also includes some custom overrides for changing the colors of embedded SVGs used throughout our components.
-{/* <ScssDocs name="sass-dark-mode-vars" file="scss/_variables.scss" /> */}
+{/* <ScssDocs name="sass-dark-mode-vars" file="scss/_config.scss" /> */}
### Sass mixins
There are 13 shades of 16 colors in Bootstrap's new color system, meaning we have 208 colors to work with when using Bootstrap.
-All Bootstrap colors are available as Sass variables and a Sass map in `scss/_variables.scss` file. To avoid increased file sizes, we don’t create text or background color classes for each of these variables. Instead, we choose a subset of these colors for a [theme palette]([[docsref:/customize/theme]]).
+All Bootstrap colors are available as Sass variables and a Sass map in `scss/_config.scss` file. To avoid increased file sizes, we don’t create text or background color classes for each of these variables. Instead, we choose a subset of these colors for a [theme palette]([[docsref:/customize/theme]]).
Be sure to monitor contrast ratios as you customize colors. As shown below, we’ve added three contrast ratios to each of the main colors—one for the swatch’s current colors, one for against white, and one for against black.
In our Sass, we set default values that can be customized before compiling.
-{/* <ScssDocs name="focus-ring-variables" file="scss/_variables.scss" /> */}
+{/* <ScssDocs name="focus-ring-variables" file="scss/_config.scss" /> */}
Those variables are then reassigned to `:root` level CSS variables that can be customized in real-time, including with options for `x` and `y` offsets (which default to their fallback value of `0`).
Customize Bootstrap with our built-in custom variables file and easily toggle global CSS preferences with new `$enable-*` Sass variables. Override a variable’s value and recompile with `npm run test` as needed.
-You can find and customize these variables for key global options in Bootstrap’s `scss/_variables.scss` file.
+You can find and customize these variables for key global options in Bootstrap’s `scss/_config.scss` file.
<BsTable class="table table-options">
| Variable | Values | Description |
<Example code={`<div class="test">This is a test.</div>`} />
-<ScssDocs name="variable-gradient" file="scss/_variables.scss" />
+<ScssDocs name="variable-gradient" file="scss/_config.scss" />
<JsDocs name="live-toast" file="site/src/assets/partials/snippets.js" />
### Sass maps
-This is the validation Sass map from `_variables.scss`. Override or extend this to generate different or additional states.
+This is the validation Sass map from `forms/_form-variables.scss`. Override or extend this to generate different or additional states.
<ScssDocs name="form-validation-states" file="scss/forms/_form-variables.scss" />
### Customizing
-Validation states can be customized via Sass with the `$form-validation-states` map. Located in our `_variables.scss` file, this Sass map is how we generate the default `valid`/`invalid` validation states. Included is a nested map for customizing each state’s color, icon, tooltip color, and focus shadow. While no other states are supported by browsers, those using custom styles can easily add more complex form feedback.
+Validation states can be customized via Sass with the `$form-validation-states` map. Located in our `forms/_form-variables.scss` file, this Sass map is how we generate the default `valid`/`invalid` validation states. Included is a nested map for customizing each state’s color, icon, tooltip color, and focus shadow. While no other states are supported by browsers, those using custom styles can easily add more complex form feedback.
Components built with overlays also have a predefined z-index scale, beginning at `1000`. This starting number was chosen arbitrarily and serves as a small buffer between our styles and your project’s custom styles.
-<ScssDocs name="zindex-stack" file="scss/_variables.scss" />
+<ScssDocs name="zindex-stack" file="scss/_config.scss" />
Each overlay component increases its `z-index` value slightly in such a way that common UI principles allow user focused or hovered elements to remain in view at all times. For example, a modal is document blocking (e.g., you cannot take any other action save for the modal’s action), so we put that above our navbars.
Customize the focus ring Sass variables to modify all usage of the focus ring styles across your Bootstrap-powered project.
-{/* <ScssDocs name="focus-ring-variables" file="scss/_variables.scss" /> */}
+{/* <ScssDocs name="focus-ring-variables" file="scss/_config.scss" /> */}
### Sass utilities API
Customize the icon link Sass variables to modify all icon link styles across your Bootstrap-powered project.
-<ScssDocs name="icon-link-variables" file="scss/_variables.scss" />
+<ScssDocs name="icon-link-variables" file="scss/_config.scss" />
### Sass utilities API
Each breakpoint was chosen to comfortably hold containers whose widths are multiples of 12. Breakpoints are also representative of a subset of common device sizes and viewport dimensions—they don’t specifically target every use case or device. Instead, the ranges provide a strong and consistent foundation to build on for nearly any device.
-These breakpoints are customizable via Sass—you’ll find them in a Sass map in our `_variables.scss` stylesheet.
+These breakpoints are customizable via Sass—you’ll find them in a Sass map in our `_config.scss` stylesheet.
<ScssDocs name="breakpoints" file="scss/_config.scss" />
### Sass variables
-As shown above, Bootstrap generates a series of predefined container classes to help you build the layouts you desire. You may customize these predefined container classes by modifying the Sass map (found in `_variables.scss`) that powers them:
+As shown above, Bootstrap generates a series of predefined container classes to help you build the layouts you desire. You may customize these predefined container classes by modifying the Sass map (found in `_config.scss`) that powers them:
<ScssDocs name="container-max-widths" file="scss/_config.scss" />
We don’t encourage customization of these individual values; should you change one, you likely need to change them all.
-<ScssDocs name="zindex-stack" file="scss/_variables.scss" />
+<ScssDocs name="zindex-stack" file="scss/_config.scss" />
To handle overlapping borders within components (e.g., buttons and inputs in input groups), we use low single digit `z-index` values of `1`, `2`, and `3` for default, hover, and active states. On hover/focus/active, we bring a particular element to the forefront with a higher `z-index` value to show their border over the sibling elements.
- New, streamlined color modes and theming.
- Removed `_maps.scss`
- Removed `_variables-dark.scss`
- - Added `_colors.scss`, splitting them out from `_variables.scss`,
+ - Added `_colors.scss`, splitting colors out to their own file
+ - Removed `_variables.scss`, consolidating all variables into `_config.scss`
- Added `_theme.scss` where we setup all our global theming for how colors are applied
- **Updated lg, xl, and 2xl breakpoints and containers.**
- Increased the `lg` breakpoint from 992px to 1024px; it's container remains the same at 960px.
## Sass map
-Within `_variables.scss`, you can change the aspect ratios you want to use. Here's our default `$aspect-ratios` map. Modify the map as you like and recompile your Sass to put them to use.
+Within `_config.scss`, you can change the aspect ratios you want to use. Here's our default `$aspect-ratios` map. Modify the map as you like and recompile your Sass to put them to use.
-<ScssDocs name="aspect-ratios" file="scss/_variables.scss" />
+<ScssDocs name="aspect-ratios" file="scss/_config.scss" />
Most `background-color` utilities are generated by our theme colors, reassigned from our generic color palette variables.
-{/*<ScssDocs name="color-variables" file="scss/_variables.scss" />*/}
+{/*<ScssDocs name="color-variables" file="scss/_config.scss" />*/}
-{/* <ScssDocs name="theme-color-variables" file="scss/_variables.scss" /> */}
+{/* <ScssDocs name="theme-color-variables" file="scss/_config.scss" /> */}
-<ScssDocs name="variable-gradient" file="scss/_variables.scss" />
+<ScssDocs name="variable-gradient" file="scss/_config.scss" />
Grayscale colors are also available, but only a subset are used to generate any utilities.
-{/*<ScssDocs name="gray-color-variables" file="scss/_variables.scss" />*/}
+{/*<ScssDocs name="gray-color-variables" file="scss/_config.scss" />*/}
Variables for setting `background-color` in `.bg-*-subtle` utilities in light and dark mode:
-{/* <ScssDocs name="theme-bg-subtle-variables" file="scss/_variables.scss" /> */}
+{/* <ScssDocs name="theme-bg-subtle-variables" file="scss/_config.scss" /> */}
{/* <ScssDocs name="theme-bg-subtle-dark-variables" file="scss/_variables-dark.scss" /> */}
Theme colors are then put into a Sass map so we can loop over them to generate our utilities, component modifiers, and more.
-{/* <ScssDocs name="theme-colors-map" file="scss/_variables.scss" /> */}
+{/* <ScssDocs name="theme-colors-map" file="scss/_config.scss" /> */}
Grayscale colors are also available as a Sass map. **This map is not used to generate any utilities.**
-{/*<ScssDocs name="gray-colors-map" file="scss/_variables.scss" />*/}
+{/*<ScssDocs name="gray-colors-map" file="scss/_config.scss" />*/}
### Sass mixins
Variables for setting `border-color` in `.border-*-subtle` utilities in light and dark mode:
-{/* <ScssDocs name="theme-border-subtle-variables" file="scss/_variables.scss" /> */}
+{/* <ScssDocs name="theme-border-subtle-variables" file="scss/_config.scss" /> */}
{/* <ScssDocs name="theme-border-subtle-dark-variables" file="scss/_variables-dark.scss" /> */}
### Sass variables
-<ScssDocs name="border-variables" file="scss/_variables.scss" />
+<ScssDocs name="border-variables" file="scss/_config.scss" />
### Sass mixins
Most `color` utilities are generated by our theme colors, reassigned from our generic color palette variables.
-{/* <ScssDocs name="theme-color-variables" file="scss/_variables.scss" /> */}
+{/* <ScssDocs name="theme-color-variables" file="scss/_config.scss" /> */}
Grayscale colors are also available, but only a subset are used to generate any utilities.
Theme colors are then put into a Sass map so we can loop over them to generate our utilities, component modifiers, and more.
-{/* <ScssDocs name="theme-colors-map" file="scss/_variables.scss" /> */}
+{/* <ScssDocs name="theme-colors-map" file="scss/_config.scss" /> */}
Grayscale colors are also available as a Sass map. **This map is not used to generate any utilities.**
-{/*<ScssDocs name="gray-colors-map" file="scss/_variables.scss" />*/}
+{/*<ScssDocs name="gray-colors-map" file="scss/_config.scss" />*/}
### Sass utilities API
## CSS
-### Variables
+### Sass map
-Root font size variables are declared in our root file in `scss/_root.scss`.
+Font sizes and their associated line heights are defined in the `$font-sizes` map in `scss/_config.scss`. CSS custom properties and utility classes are generated from this map.
-<ScssDocs name="root-font-size-variables" file="scss/_root.scss" />
+<ScssDocs name="font-sizes" file="scss/_config.scss" />
### Sass utilities API
<div class="overflow-y-scroll">...</div>
```
-Using Sass variables, you may customize the overflow utilities by changing the `$overflows` variable in `_variables.scss`.
+Using Sass variables, you may customize the overflow utilities by changing the `$overflows` variable in `_config.scss`.
## CSS
Default position utility values are declared in a Sass map, then used to generate our utilities.
-<ScssDocs name="position-map" file="scss/_variables.scss" />
+<ScssDocs name="position-map" file="scss/_config.scss" />
### Sass utilities API
## Width
-Set width using `.w-{size}` utilities for any size from `1` to `12`. These classes are generated from the utility API based on the `$sizes` map in `_variables.scss`. Each number is a multiple of the `$spacer` variable, which defaults to `1rem`.
+Set width using `.w-{size}` utilities for any size from `1` to `12`. These classes are generated from the utility API based on the `$sizes` map in `_config.scss`. Each number is a multiple of the `$spacer` variable, which defaults to `1rem`.
<Example
class="bd-example-flex"
Customize this Sass map to change the available values and generated utilities.
-<ScssDocs name="zindex-levels-map" file="scss/_variables.scss" />
+<ScssDocs name="zindex-levels-map" file="scss/_config.scss" />
### Sass utilities API
@use "../../../scss/config" as *;
-@use "../../../scss/variables" as *;
@use "../../../scss/layout/breakpoints" as *;
@use "../../../scss/mixins/border-radius" as *;
@use "variables" as *;
projects / thirdparty / bootstrap.git / commitdiff
