From: Mark Otto Date: Sat, 14 Mar 2026 20:00:10 +0000 (-0700) Subject: v6: Remove `_variables.scss`, move some vars to `_config.scss`, and clean up typograp... X-Git-Url: http://git.ipfire.org/gitweb.cgi?a=commitdiff_plain;h=3bb0e17b9dda5f197675d4cb1da91e23668fca9c;p=thirdparty%2Fbootstrap.git v6: Remove `_variables.scss`, move some vars to `_config.scss`, and clean up typography (#42184) * Remove _variables.scss, move rest of _config.scss etc * Rearrange a bunch of stuff for font vars and classes * fix * fix link --- diff --git a/build/generate-utilities-metadata.scss b/build/generate-utilities-metadata.scss index e146be59e1..3789de00c4 100644 --- a/build/generate-utilities-metadata.scss +++ b/build/generate-utilities-metadata.scss @@ -7,7 +7,6 @@ @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 *; diff --git a/scss/_alert.scss b/scss/_alert.scss index ede03afeb2..ee751c2db8 100644 --- a/scss/_alert.scss +++ b/scss/_alert.scss @@ -1,6 +1,5 @@ @use "config" as *; @use "functions" as *; -@use "variables" as *; @use "mixins/border-radius" as *; @use "mixins/tokens" as *; diff --git a/scss/_card.scss b/scss/_card.scss index 3be9b885ff..4bf095a7c5 100644 --- a/scss/_card.scss +++ b/scss/_card.scss @@ -1,6 +1,5 @@ @use "config" as *; @use "functions" as *; -@use "variables" as *; @use "mixins/border-radius" as *; @use "mixins/box-shadow" as *; @use "mixins/tokens" as *; diff --git a/scss/_config.scss b/scss/_config.scss index 6ee1673dce..8d47e6661d 100644 --- a/scss/_config.scss +++ b/scss/_config.scss @@ -1,7 +1,30 @@ +@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; @@ -18,9 +41,6 @@ $enable-validation-icons: 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; @@ -115,3 +135,199 @@ $escaped-characters: ( ("(", "%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 diff --git a/scss/_datepicker.scss b/scss/_datepicker.scss index 94b2c86386..e0cc2cc57f 100644 --- a/scss/_datepicker.scss +++ b/scss/_datepicker.scss @@ -1,7 +1,7 @@ // 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 *; diff --git a/scss/_dialog.scss b/scss/_dialog.scss index b5bd2f1951..0ba009d9e8 100644 --- a/scss/_dialog.scss +++ b/scss/_dialog.scss @@ -1,7 +1,6 @@ @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 *; diff --git a/scss/_dropdown.scss b/scss/_dropdown.scss index 3d277c9b35..e7c87262bb 100644 --- a/scss/_dropdown.scss +++ b/scss/_dropdown.scss @@ -1,6 +1,5 @@ @use "config" as *; @use "functions" as *; -@use "variables" as *; @use "mixins/border-radius" as *; @use "mixins/box-shadow" as *; @use "mixins/gradients" as *; diff --git a/scss/_functions.scss b/scss/_functions.scss index 0705c0c306..78eeb74fea 100644 --- a/scss/_functions.scss +++ b/scss/_functions.scss @@ -4,7 +4,7 @@ @use "sass:math"; @use "sass:meta"; @use "sass:string"; -// @use "variables" as *; +@forward "config" show defaults; @use "config" as *; // Bootstrap functions @@ -81,26 +81,6 @@ @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: (); diff --git a/scss/_list-group.scss b/scss/_list-group.scss index 2be90c2d33..13e48d08f8 100644 --- a/scss/_list-group.scss +++ b/scss/_list-group.scss @@ -1,7 +1,6 @@ @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 *; diff --git a/scss/_nav.scss b/scss/_nav.scss index efd2748a64..eb014a9975 100644 --- a/scss/_nav.scss +++ b/scss/_nav.scss @@ -1,5 +1,5 @@ @use "functions" as *; -@use "variables" as *; +@use "config" as *; @use "mixins/border-radius" as *; @use "mixins/focus-ring" as *; @use "mixins/gradients" as *; diff --git a/scss/_offcanvas.scss b/scss/_offcanvas.scss index 6d889ec281..6a80b7ed43 100644 --- a/scss/_offcanvas.scss +++ b/scss/_offcanvas.scss @@ -1,5 +1,5 @@ @use "functions" as *; -@use "variables" as *; +@use "config" as *; @use "mixins/border-radius" as *; @use "mixins/box-shadow" as *; @use "mixins/transition" as *; diff --git a/scss/_popover.scss b/scss/_popover.scss index f54d3b4aa2..89406fc0b2 100644 --- a/scss/_popover.scss +++ b/scss/_popover.scss @@ -1,6 +1,5 @@ @use "config" as *; @use "functions" as *; -@use "variables" as *; @use "mixins/border-radius" as *; @use "mixins/box-shadow" as *; @use "mixins/reset-text" as *; diff --git a/scss/_root.scss b/scss/_root.scss index 400d911f6c..7a89c16ad1 100644 --- a/scss/_root.scss +++ b/scss/_root.scss @@ -2,7 +2,6 @@ @use "colors" as *; @use "config" as *; @use "functions" as *; -@use "variables" as *; @use "theme" as *; @use "mixins/tokens" as *; @use "forms/form-variables" as *; @@ -22,31 +21,6 @@ $root-tokens: defaults( --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, @@ -160,6 +134,14 @@ $root-tokens: defaults( // 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 { diff --git a/scss/_toasts.scss b/scss/_toasts.scss index 20c8ebcef8..69a300cec6 100644 --- a/scss/_toasts.scss +++ b/scss/_toasts.scss @@ -1,6 +1,5 @@ @use "config" as *; @use "functions" as *; -@use "variables" as *; @use "mixins/border-radius" as *; @use "mixins/tokens" as *; diff --git a/scss/_tooltip.scss b/scss/_tooltip.scss index 0ee7fcff50..89519d5180 100644 --- a/scss/_tooltip.scss +++ b/scss/_tooltip.scss @@ -1,6 +1,5 @@ @use "config" as *; @use "functions" as *; -@use "variables" as *; @use "mixins/border-radius" as *; @use "mixins/reset-text" as *; @use "mixins/tokens" as *; diff --git a/scss/_transitions.scss b/scss/_transitions.scss index 04f5ba152c..3a7f936bc7 100644 --- a/scss/_transitions.scss +++ b/scss/_transitions.scss @@ -1,4 +1,4 @@ -@use "variables" as *; +@use "config" as *; @use "mixins/transition" as *; .fade { diff --git a/scss/_utilities.scss b/scss/_utilities.scss index 1eb04558a7..a25cafa49d 100644 --- a/scss/_utilities.scss +++ b/scss/_utilities.scss @@ -1,6 +1,5 @@ @use "sass:map"; @use "config" as *; -@use "variables" as *; @use "functions" as *; @use "theme" as *; diff --git a/scss/_variables.scss b/scss/_variables.scss deleted file mode 100644 index eba2a97f52..0000000000 --- a/scss/_variables.scss +++ /dev/null @@ -1,249 +0,0 @@ -@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 `` 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 diff --git a/scss/bootstrap-utilities.scss b/scss/bootstrap-utilities.scss index cf9f3363e7..44ffa78f10 100644 --- a/scss/bootstrap-utilities.scss +++ b/scss/bootstrap-utilities.scss @@ -2,9 +2,6 @@ $file: "Utilities" ); -// Configuration -// @forward "variables"; - // Layout & components @forward "root"; diff --git a/scss/content/_reboot.scss b/scss/content/_reboot.scss index 6d37eedea3..744877bdb7 100644 --- a/scss/content/_reboot.scss +++ b/scss/content/_reboot.scss @@ -1,13 +1,13 @@ @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 @@ -24,8 +24,6 @@ $reboot-kbd-tokens: defaults( ); // 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( @@ -119,37 +117,37 @@ $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 diff --git a/scss/content/_tables.scss b/scss/content/_tables.scss index 29d3de7ed4..670d1fc35e 100644 --- a/scss/content/_tables.scss +++ b/scss/content/_tables.scss @@ -1,6 +1,5 @@ @use "sass:map"; @use "../config" as *; -@use "../variables" as *; @use "../functions" as *; @use "../layout/breakpoints" as *; @use "../mixins/tokens" as *; diff --git a/scss/forms/_validation.scss b/scss/forms/_validation.scss index 423b4171ac..75897491f2 100644 --- a/scss/forms/_validation.scss +++ b/scss/forms/_validation.scss @@ -1,5 +1,4 @@ @use "../config" as *; -@use "../variables" as *; @use "../functions" as *; @use "../mixins/border-radius" as *; @use "../mixins/focus-ring" as *; diff --git a/scss/helpers/_icon-link.scss b/scss/helpers/_icon-link.scss index 05ea763e9d..23f0ad718f 100644 --- a/scss/helpers/_icon-link.scss +++ b/scss/helpers/_icon-link.scss @@ -1,4 +1,4 @@ -@use "../variables" as *; +@use "../config" as *; @use "../mixins/transition" as *; @layer helpers { diff --git a/scss/helpers/_position.scss b/scss/helpers/_position.scss index 0a7c9de07d..00784502f0 100644 --- a/scss/helpers/_position.scss +++ b/scss/helpers/_position.scss @@ -1,6 +1,5 @@ @use "sass:map"; @use "../config" as *; -@use "../variables" as *; @use "../layout/breakpoints" as *; @layer helpers { diff --git a/scss/helpers/_stretched-link.scss b/scss/helpers/_stretched-link.scss index 31bed73bc0..c3a319b636 100644 --- a/scss/helpers/_stretched-link.scss +++ b/scss/helpers/_stretched-link.scss @@ -1,4 +1,4 @@ -@use "../variables" as *; +@use "../config" as *; @layer helpers { .stretched-link { diff --git a/scss/tests/mixins/_box-shadow.test.scss b/scss/tests/mixins/_box-shadow.test.scss index c8737e99fa..725311cb8d 100644 --- a/scss/tests/mixins/_box-shadow.test.scss +++ b/scss/tests/mixins/_box-shadow.test.scss @@ -1,6 +1,6 @@ // check-unused-imports-disable — test infrastructure imports. @use "../../functions" as *; -@use "../../variables" as *; +@use "../../config" as *; @use "../../mixins" as *; $true-terminal-output: false; diff --git a/scss/tests/mixins/_color-contrast.test.scss b/scss/tests/mixins/_color-contrast.test.scss index 5b94ac57d6..bf2db2420d 100644 --- a/scss/tests/mixins/_color-contrast.test.scss +++ b/scss/tests/mixins/_color-contrast.test.scss @@ -1,5 +1,5 @@ @import "../../functions"; -@import "../../variables"; +@import "../../config"; @import "../../variables-dark"; @import "../../maps"; @import "../../mixins"; diff --git a/scss/tests/mixins/_color-modes.test.scss b/scss/tests/mixins/_color-modes.test.scss index d42053ad70..ab55cde714 100644 --- a/scss/tests/mixins/_color-modes.test.scss +++ b/scss/tests/mixins/_color-modes.test.scss @@ -2,7 +2,7 @@ @import "../../colors"; @import "../../functions"; -@import "../../variables"; +@import "../../config"; @import "../../variables-dark"; @import "../../maps"; @import "../../mixins"; diff --git a/scss/tests/mixins/_utilities.test.scss b/scss/tests/mixins/_utilities.test.scss index 9ca6c92677..d9e9bc4acb 100644 --- a/scss/tests/mixins/_utilities.test.scss +++ b/scss/tests/mixins/_utilities.test.scss @@ -1,5 +1,5 @@ // check-unused-imports-disable — test infrastructure imports. -@use "../../variables" as *; +@use "../../config" as *; @use "../../functions" as *; @use "../../mixins/utilities" as *; diff --git a/scss/tests/utilities/_api.test.scss b/scss/tests/utilities/_api.test.scss index cf8a8a8dc4..b21e7d3f77 100644 --- a/scss/tests/utilities/_api.test.scss +++ b/scss/tests/utilities/_api.test.scss @@ -1,6 +1,6 @@ // check-unused-imports-disable — test infrastructure imports. @use "../../functions"; -@use "../../variables"; +@use "../../config"; @use "../../maps"; @use "../../mixins"; diff --git a/site/src/content/docs/components/collapse.mdx b/site/src/content/docs/components/collapse.mdx index e096dc2d71..3c6ff9291f 100644 --- a/site/src/content/docs/components/collapse.mdx +++ b/site/src/content/docs/components/collapse.mdx @@ -94,7 +94,7 @@ Note that Bootstrap’s current implementation does not cover the various *optio ### Sass variables - + ### Classes diff --git a/site/src/content/docs/content/reboot.mdx b/site/src/content/docs/content/reboot.mdx index 9502e61935..e90851aecb 100644 --- a/site/src/content/docs/content/reboot.mdx +++ b/site/src/content/docs/content/reboot.mdx @@ -80,6 +80,8 @@ This `font-family` is applied to the `` and automatically inherited global All heading elements—`

`—`

` 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. + | Heading | Example | | --- | --- | diff --git a/site/src/content/docs/content/typography.mdx b/site/src/content/docs/content/typography.mdx index ea8b8a4f48..059461145c 100644 --- a/site/src/content/docs/content/typography.mdx +++ b/site/src/content/docs/content/typography.mdx @@ -14,11 +14,11 @@ Bootstrap sets basic global display, typography, and link styles. When more cont - Set the global link color via `--bs-link-color`. - Use `--bs-body-bg` to set a `background-color` on the `` (`#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, `

` through `

`, are available. +As mentioned in [Reboot]([[docsref:/content/reboot#headings]]), all HTML headings, `

` through `

`, are available, as element or class selectors. | Heading | Example | @@ -38,27 +38,33 @@ All HTML headings, `

` through `

`, are available.

h4. Bootstrap heading

h5. Bootstrap heading
h6. Bootstrap heading
-``` - -`.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. -h1. Bootstrap heading

+

h1. Bootstrap heading

h2. Bootstrap heading

h3. Bootstrap heading

h4. Bootstrap heading

h5. Bootstrap heading

-

h6. Bootstrap heading

`} /> +

h6. Bootstrap heading

+``` 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). - - Fancy display heading - With faded secondary text -
`} /> +Learn more about how these work down below in the [CSS](#css) section. + +.fs-xs +
.fs-sm
+
.fs-md
+
.fs-lg
+
.fs-xl
+
.fs-2xl
+
.fs-3xl
+
.fs-4xl
+
.fs-5xl
+
.fs-6xl
`} /> ## Inline text elements @@ -240,16 +246,56 @@ Bootstrap uses CSS's `clamp()` function to enable responsive font sizes, allowin ## 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. - + Miscellaneous typography elements covered here and in [Reboot]([[docsref:/content/reboot]]) also have dedicated variables. - + + +### 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. + + + +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 + -There are no dedicated mixins for typography. + diff --git a/site/src/content/docs/customize/color-modes.mdx b/site/src/content/docs/customize/color-modes.mdx index 990f778a92..bb76ac5d25 100644 --- a/site/src/content/docs/customize/color-modes.mdx +++ b/site/src/content/docs/customize/color-modes.mdx @@ -196,7 +196,7 @@ Dozens of root level CSS variables are repeated as overrides for dark mode. Thes 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. -{/* */} +{/* */} ### Sass mixins diff --git a/site/src/content/docs/customize/color.mdx b/site/src/content/docs/customize/color.mdx index 343da08810..7c4cd70571 100644 --- a/site/src/content/docs/customize/color.mdx +++ b/site/src/content/docs/customize/color.mdx @@ -16,7 +16,7 @@ export const additionalColors = [ 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. diff --git a/site/src/content/docs/customize/css-variables.mdx b/site/src/content/docs/customize/css-variables.mdx index 613cd727fc..0400a72e52 100644 --- a/site/src/content/docs/customize/css-variables.mdx +++ b/site/src/content/docs/customize/css-variables.mdx @@ -70,7 +70,7 @@ Bootstrap provides custom `:focus` styles using a combination of Sass and CSS va In our Sass, we set default values that can be customized before compiling. -{/* */} +{/* */} 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`). diff --git a/site/src/content/docs/customize/options.mdx b/site/src/content/docs/customize/options.mdx index 2c72b7fe3c..e964543163 100644 --- a/site/src/content/docs/customize/options.mdx +++ b/site/src/content/docs/customize/options.mdx @@ -5,7 +5,7 @@ description: Quickly customize Bootstrap with built-in variables to easily toggl 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. | Variable | Values | Description | diff --git a/site/src/content/docs/docsref.mdx b/site/src/content/docs/docsref.mdx index c26c2d7a17..213d94499a 100644 --- a/site/src/content/docs/docsref.mdx +++ b/site/src/content/docs/docsref.mdx @@ -38,6 +38,6 @@ robots: noindex,follow This is a test.`} /> - + diff --git a/site/src/content/docs/forms/validation.mdx b/site/src/content/docs/forms/validation.mdx index c942ab7325..cdaa566a5e 100644 --- a/site/src/content/docs/forms/validation.mdx +++ b/site/src/content/docs/forms/validation.mdx @@ -363,7 +363,7 @@ Two mixins are combined, through our [loop](#sass-loops), to generate our form v ### 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. @@ -377,4 +377,4 @@ Used to iterate over `$form-validation-states` map values to generate our valida ### 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. diff --git a/site/src/content/docs/getting-started/approach.mdx b/site/src/content/docs/getting-started/approach.mdx index 7f90ca6a1d..98c33fa0e2 100644 --- a/site/src/content/docs/getting-started/approach.mdx +++ b/site/src/content/docs/getting-started/approach.mdx @@ -179,7 +179,7 @@ Some components in Bootstrap are built with overlapping elements to prevent doub 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. - + 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. diff --git a/site/src/content/docs/helpers/focus-ring.mdx b/site/src/content/docs/helpers/focus-ring.mdx index 934d1312de..8e0575d991 100644 --- a/site/src/content/docs/helpers/focus-ring.mdx +++ b/site/src/content/docs/helpers/focus-ring.mdx @@ -42,7 +42,7 @@ By default, there is no `--bs-focus-ring-x`, `--bs-focus-ring-y`, or `--bs-focus Customize the focus ring Sass variables to modify all usage of the focus ring styles across your Bootstrap-powered project. -{/* */} +{/* */} ### Sass utilities API diff --git a/site/src/content/docs/helpers/icon-link.mdx b/site/src/content/docs/helpers/icon-link.mdx index d4914cdc33..31d92c51e2 100644 --- a/site/src/content/docs/helpers/icon-link.mdx +++ b/site/src/content/docs/helpers/icon-link.mdx @@ -72,7 +72,7 @@ Customize the color by overriding the `--bs-link-*` CSS variable: Customize the icon link Sass variables to modify all icon link styles across your Bootstrap-powered project. - + ### Sass utilities API diff --git a/site/src/content/docs/layout/breakpoints.mdx b/site/src/content/docs/layout/breakpoints.mdx index 99b42714cb..358862bc56 100644 --- a/site/src/content/docs/layout/breakpoints.mdx +++ b/site/src/content/docs/layout/breakpoints.mdx @@ -30,7 +30,7 @@ Bootstrap includes six default breakpoints, sometimes referred to as _grid tiers 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. diff --git a/site/src/content/docs/layout/containers.mdx b/site/src/content/docs/layout/containers.mdx index 50b05d8c53..90549cb6ae 100644 --- a/site/src/content/docs/layout/containers.mdx +++ b/site/src/content/docs/layout/containers.mdx @@ -66,7 +66,7 @@ Use `.container-fluid` for a full width container, spanning the entire width of ### 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: diff --git a/site/src/content/docs/layout/z-index.mdx b/site/src/content/docs/layout/z-index.mdx index d1fbd02040..459ef868ca 100644 --- a/site/src/content/docs/layout/z-index.mdx +++ b/site/src/content/docs/layout/z-index.mdx @@ -9,6 +9,6 @@ These higher values start at an arbitrary number, high and specific enough to id We don’t encourage customization of these individual values; should you change one, you likely need to change them all. - + 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. diff --git a/site/src/content/docs/migration.mdx b/site/src/content/docs/migration.mdx index b092c25e72..0d70f4d5a6 100644 --- a/site/src/content/docs/migration.mdx +++ b/site/src/content/docs/migration.mdx @@ -55,7 +55,8 @@ Bootstrap 6 is a major release with many breaking changes to modernize our codeb - 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. diff --git a/site/src/content/docs/utilities/aspect-ratio.mdx b/site/src/content/docs/utilities/aspect-ratio.mdx index 34adc7aa90..71ee153282 100644 --- a/site/src/content/docs/utilities/aspect-ratio.mdx +++ b/site/src/content/docs/utilities/aspect-ratio.mdx @@ -70,6 +70,6 @@ This CSS variable makes it easy to modify the aspect ratio across breakpoints. T ## 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. - + diff --git a/site/src/content/docs/utilities/background.mdx b/site/src/content/docs/utilities/background.mdx index bc194b91a8..05a867037c 100644 --- a/site/src/content/docs/utilities/background.mdx +++ b/site/src/content/docs/utilities/background.mdx @@ -78,19 +78,19 @@ 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. -{/**/} +{/**/} -{/* */} +{/* */} - + Grayscale colors are also available, but only a subset are used to generate any utilities. -{/**/} +{/**/} Variables for setting `background-color` in `.bg-*-subtle` utilities in light and dark mode: -{/* */} +{/* */} {/* */} @@ -98,11 +98,11 @@ Variables for setting `background-color` in `.bg-*-subtle` utilities in light an Theme colors are then put into a Sass map so we can loop over them to generate our utilities, component modifiers, and more. -{/* */} +{/* */} Grayscale colors are also available as a Sass map. **This map is not used to generate any utilities.** -{/**/} +{/**/} ### Sass mixins diff --git a/site/src/content/docs/utilities/border-color.mdx b/site/src/content/docs/utilities/border-color.mdx index 4d88748977..d7f77a4ec7 100644 --- a/site/src/content/docs/utilities/border-color.mdx +++ b/site/src/content/docs/utilities/border-color.mdx @@ -80,7 +80,7 @@ Change the opacity of a border color by using any of the `.border-` Variables for setting `border-color` in `.border-*-subtle` utilities in light and dark mode: -{/* */} +{/* */} {/* */} diff --git a/site/src/content/docs/utilities/border.mdx b/site/src/content/docs/utilities/border.mdx index 80b2bc3ffe..c20aa9989b 100644 --- a/site/src/content/docs/utilities/border.mdx +++ b/site/src/content/docs/utilities/border.mdx @@ -54,7 +54,7 @@ Or remove borders: ### Sass variables - + ### Sass mixins diff --git a/site/src/content/docs/utilities/colors.mdx b/site/src/content/docs/utilities/colors.mdx index adae092c8b..df7d2be2bb 100644 --- a/site/src/content/docs/utilities/colors.mdx +++ b/site/src/content/docs/utilities/colors.mdx @@ -111,7 +111,7 @@ 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. -{/* */} +{/* */} Grayscale colors are also available, but only a subset are used to generate any utilities. @@ -119,11 +119,11 @@ Grayscale colors are also available, but only a subset are used to generate any Theme colors are then put into a Sass map so we can loop over them to generate our utilities, component modifiers, and more. -{/* */} +{/* */} Grayscale colors are also available as a Sass map. **This map is not used to generate any utilities.** -{/**/} +{/**/} ### Sass utilities API diff --git a/site/src/content/docs/utilities/font-size.mdx b/site/src/content/docs/utilities/font-size.mdx index dfa6081ad5..72a4227dc0 100644 --- a/site/src/content/docs/utilities/font-size.mdx +++ b/site/src/content/docs/utilities/font-size.mdx @@ -72,11 +72,11 @@ Customize your **available** `font-size`s by modifying the `$font-sizes` Sass ma ## 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. - + ### Sass utilities API diff --git a/site/src/content/docs/utilities/overflow.mdx b/site/src/content/docs/utilities/overflow.mdx index 953bff3a8c..20d9305e89 100644 --- a/site/src/content/docs/utilities/overflow.mdx +++ b/site/src/content/docs/utilities/overflow.mdx @@ -90,7 +90,7 @@ Adjust the `overflow-y` property to affect the overflow of content vertically.
...
``` -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 diff --git a/site/src/content/docs/utilities/position.mdx b/site/src/content/docs/utilities/position.mdx index 2e1f790282..8f9f7e74af 100644 --- a/site/src/content/docs/utilities/position.mdx +++ b/site/src/content/docs/utilities/position.mdx @@ -116,7 +116,7 @@ You can use these classes with existing components to create new ones. Remember Default position utility values are declared in a Sass map, then used to generate our utilities. - + ### Sass utilities API diff --git a/site/src/content/docs/utilities/width.mdx b/site/src/content/docs/utilities/width.mdx index 570d18613e..04e6393606 100644 --- a/site/src/content/docs/utilities/width.mdx +++ b/site/src/content/docs/utilities/width.mdx @@ -15,7 +15,7 @@ Use width utilities to set the width of elements. Width utilities are generated ## 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`. + ### Sass utilities API diff --git a/site/src/scss/_component-examples.scss b/site/src/scss/_component-examples.scss index 1218783bfa..ff09512a0b 100644 --- a/site/src/scss/_component-examples.scss +++ b/site/src/scss/_component-examples.scss @@ -1,5 +1,4 @@ @use "../../../scss/config" as *; -@use "../../../scss/variables" as *; @use "../../../scss/layout/breakpoints" as *; @use "../../../scss/mixins/border-radius" as *; @use "variables" as *;