aboutsummaryrefslogtreecommitdiff
path: root/scss/_variables.scss
diff options
context:
space:
mode:
Diffstat (limited to 'scss/_variables.scss')
-rw-r--r--scss/_variables.scss258
1 files changed, 226 insertions, 32 deletions
diff --git a/scss/_variables.scss b/scss/_variables.scss
index 7f4dca3c7..dbaa294a3 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -90,6 +90,10 @@ $theme-colors: (
) !default;
// scss-docs-end theme-colors-map
+// scss-docs-start theme-colors-rgb
+$theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value") !default;
+// scss-docs-end theme-colors-rgb
+
// The contrast ratio to reach against white, to determine if color changes from "light" to "dark". Acceptable values for WCAG 2.0 are 3, 4.5 and 7.
// See https://www.w3.org/TR/WCAG20/#visual-audio-contrast-contrast
$min-contrast-ratio: 4.5 !default;
@@ -198,6 +202,126 @@ $cyan-600: shade-color($cyan, 20%) !default;
$cyan-700: shade-color($cyan, 40%) !default;
$cyan-800: shade-color($cyan, 60%) !default;
$cyan-900: shade-color($cyan, 80%) !default;
+
+$blues: (
+ "blue-100": $blue-100,
+ "blue-200": $blue-200,
+ "blue-300": $blue-300,
+ "blue-400": $blue-400,
+ "blue-500": $blue-500,
+ "blue-600": $blue-600,
+ "blue-700": $blue-700,
+ "blue-800": $blue-800,
+ "blue-900": $blue-900
+) !default;
+
+$indigos: (
+ "indigo-100": $indigo-100,
+ "indigo-200": $indigo-200,
+ "indigo-300": $indigo-300,
+ "indigo-400": $indigo-400,
+ "indigo-500": $indigo-500,
+ "indigo-600": $indigo-600,
+ "indigo-700": $indigo-700,
+ "indigo-800": $indigo-800,
+ "indigo-900": $indigo-900
+) !default;
+
+$purples: (
+ "purple-100": $purple-200,
+ "purple-200": $purple-100,
+ "purple-300": $purple-300,
+ "purple-400": $purple-400,
+ "purple-500": $purple-500,
+ "purple-600": $purple-600,
+ "purple-700": $purple-700,
+ "purple-800": $purple-800,
+ "purple-900": $purple-900
+) !default;
+
+$pinks: (
+ "pink-100": $pink-100,
+ "pink-200": $pink-200,
+ "pink-300": $pink-300,
+ "pink-400": $pink-400,
+ "pink-500": $pink-500,
+ "pink-600": $pink-600,
+ "pink-700": $pink-700,
+ "pink-800": $pink-800,
+ "pink-900": $pink-900
+) !default;
+
+$reds: (
+ "red-100": $red-100,
+ "red-200": $red-200,
+ "red-300": $red-300,
+ "red-400": $red-400,
+ "red-500": $red-500,
+ "red-600": $red-600,
+ "red-700": $red-700,
+ "red-800": $red-800,
+ "red-900": $red-900
+) !default;
+
+$oranges: (
+ "orange-100": $orange-100,
+ "orange-200": $orange-200,
+ "orange-300": $orange-300,
+ "orange-400": $orange-400,
+ "orange-500": $orange-500,
+ "orange-600": $orange-600,
+ "orange-700": $orange-700,
+ "orange-800": $orange-800,
+ "orange-900": $orange-900
+) !default;
+
+$yellows: (
+ "yellow-100": $yellow-100,
+ "yellow-200": $yellow-200,
+ "yellow-300": $yellow-300,
+ "yellow-400": $yellow-400,
+ "yellow-500": $yellow-500,
+ "yellow-600": $yellow-600,
+ "yellow-700": $yellow-700,
+ "yellow-800": $yellow-800,
+ "yellow-900": $yellow-900
+) !default;
+
+$greens: (
+ "green-100": $green-100,
+ "green-200": $green-200,
+ "green-300": $green-300,
+ "green-400": $green-400,
+ "green-500": $green-500,
+ "green-600": $green-600,
+ "green-700": $green-700,
+ "green-800": $green-800,
+ "green-900": $green-900
+) !default;
+
+$teals: (
+ "teal-100": $teal-100,
+ "teal-200": $teal-200,
+ "teal-300": $teal-300,
+ "teal-400": $teal-400,
+ "teal-500": $teal-500,
+ "teal-600": $teal-600,
+ "teal-700": $teal-700,
+ "teal-800": $teal-800,
+ "teal-900": $teal-900
+) !default;
+
+$cyans: (
+ "cyan-100": $cyan-100,
+ "cyan-200": $cyan-200,
+ "cyan-300": $cyan-300,
+ "cyan-400": $cyan-400,
+ "cyan-500": $cyan-500,
+ "cyan-600": $cyan-600,
+ "cyan-700": $cyan-700,
+ "cyan-800": $cyan-800,
+ "cyan-900": $cyan-900
+) !default;
// fusv-enable
// Characters which are escaped by the escape-svg function
@@ -221,6 +345,7 @@ $enable-transitions: true !default;
$enable-reduced-motion: true !default;
$enable-smooth-scroll: true !default;
$enable-grid-classes: true !default;
+$enable-cssgrid: false !default;
$enable-button-pointers: true !default;
$enable-rfs: true !default;
$enable-validation-icons: true !default;
@@ -250,8 +375,8 @@ $gradient: linear-gradient(180deg, rgba($white, .15), rgba($white, 0)) !default;
$spacer: 1rem !default;
$spacers: (
0: 0,
- 1: $spacer / 4,
- 2: $spacer / 2,
+ 1: $spacer * .25,
+ 2: $spacer * .5,
3: $spacer,
4: $spacer * 1.5,
5: $spacer * 3,
@@ -280,6 +405,38 @@ $body-bg: $white !default;
$body-color: $gray-900 !default;
$body-text-align: null !default;
+// Utilities maps
+//
+// Extends the default `$theme-colors` maps to help create our utilities.
+
+// Come v6, we'll de-dupe these variables. Until then, for backward compatibility, we keep them to reassign.
+// scss-docs-start utilities-colors
+$utilities-colors: $theme-colors-rgb !default;
+// scss-docs-end utilities-colors
+
+// scss-docs-start utilities-text-colors
+$utilities-text: map-merge(
+ $utilities-colors,
+ (
+ "black": to-rgb($black),
+ "white": to-rgb($white),
+ "body": to-rgb($body-color)
+ )
+) !default;
+$utilities-text-colors: map-loop($utilities-text, rgba-css-var, "$key", "text") !default;
+// scss-docs-end utilities-text-colors
+
+// scss-docs-start utilities-bg-colors
+$utilities-bg: map-merge(
+ $utilities-colors,
+ (
+ "black": to-rgb($black),
+ "white": to-rgb($white),
+ "body": to-rgb($body-bg)
+ )
+) !default;
+$utilities-bg-colors: map-loop($utilities-bg, rgba-css-var, "$key", "bg") !default;
+// scss-docs-end utilities-bg-colors
// Links
//
@@ -350,7 +507,7 @@ $gutters: $spacers !default;
// Container padding
-$container-padding-x: $grid-gutter-width / 2 !default;
+$container-padding-x: $grid-gutter-width * .5 !default;
// Components
@@ -405,6 +562,7 @@ $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
// stylelint-disable function-disallowed-list
@@ -430,8 +588,8 @@ $font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberati
$font-family-base: var(--#{$variable-prefix}font-sans-serif) !default;
$font-family-code: var(--#{$variable-prefix}font-monospace) !default;
-// $font-size-root effects the value of `rem`, which is used for as well font sizes, paddings and margins
-// $font-size-base effects the font size of the body text
+// $font-size-root affects the value of `rem`, which is used for as well font sizes, paddings, and margins
+// $font-size-base affects the font size of the body text
$font-size-root: null !default;
$font-size-base: 1rem !default; // Assumes the browser default, typically `16px`
$font-size-sm: $font-size-base * .875 !default;
@@ -469,7 +627,7 @@ $font-sizes: (
// scss-docs-end font-sizes
// scss-docs-start headings-variables
-$headings-margin-bottom: $spacer / 2 !default;
+$headings-margin-bottom: $spacer * .5 !default;
$headings-font-family: null !default;
$headings-font-style: null !default;
$headings-font-weight: 500 !default;
@@ -543,6 +701,7 @@ $table-cell-vertical-align: top !default;
$table-color: $body-color !default;
$table-bg: transparent !default;
+$table-accent-bg: transparent !default;
$table-th-font-weight: null !default;
@@ -699,7 +858,7 @@ $input-padding-y-lg: $input-btn-padding-y-lg !default;
$input-padding-x-lg: $input-btn-padding-x-lg !default;
$input-font-size-lg: $input-btn-font-size-lg !default;
-$input-bg: $white !default;
+$input-bg: $body-bg !default;
$input-disabled-bg: $gray-200 !default;
$input-disabled-border-color: null !default;
@@ -725,13 +884,15 @@ $input-height-border: $input-border-width * 2 !default;
$input-height-inner: add($input-line-height * 1em, $input-padding-y * 2) !default;
$input-height-inner-half: add($input-line-height * .5em, $input-padding-y) !default;
-$input-height-inner-quarter: add($input-line-height * .25em, $input-padding-y / 2) !default;
+$input-height-inner-quarter: add($input-line-height * .25em, $input-padding-y * .5) !default;
$input-height: add($input-line-height * 1em, add($input-padding-y * 2, $input-height-border, false)) !default;
$input-height-sm: add($input-line-height * 1em, add($input-padding-y-sm * 2, $input-height-border, false)) !default;
$input-height-lg: add($input-line-height * 1em, add($input-padding-y-lg * 2, $input-height-border, false)) !default;
$input-transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
+
+$form-color-width: 3rem !default;
// scss-docs-end form-input-variables
// scss-docs-start form-check-variables
@@ -746,7 +907,7 @@ $form-check-transition: null !default;
$form-check-input-active-filter: brightness(90%) !default;
$form-check-input-bg: $input-bg !default;
-$form-check-input-border: 1px solid rgba(0, 0, 0, .25) !default;
+$form-check-input-border: 1px solid rgba($black, .25) !default;
$form-check-input-border-radius: .25em !default;
$form-check-radio-border-radius: 50% !default;
$form-check-input-focus-border: $input-focus-border-color !default;
@@ -804,8 +965,8 @@ $form-select-indicator-padding: $form-select-padding-x * 3 !default; // Extr
$form-select-font-weight: $input-font-weight !default;
$form-select-line-height: $input-line-height !default;
$form-select-color: $input-color !default;
-$form-select-disabled-color: $gray-600 !default;
$form-select-bg: $input-bg !default;
+$form-select-disabled-color: null !default;
$form-select-disabled-bg: $gray-200 !default;
$form-select-disabled-border-color: $input-disabled-border-color !default;
$form-select-bg-position: right $form-select-padding-x center !default;
@@ -833,6 +994,8 @@ $form-select-font-size-sm: $input-font-size-sm !default;
$form-select-padding-y-lg: $input-padding-y-lg !default;
$form-select-padding-x-lg: $input-padding-x-lg !default;
$form-select-font-size-lg: $input-font-size-lg !default;
+
+$form-select-transition: $input-transition !default;
// scss-docs-end form-select-variables
// scss-docs-start form-range-variables
@@ -864,6 +1027,7 @@ $form-file-button-hover-bg: shade-color($form-file-button-bg, 5%) !default
// scss-docs-start form-floating-variables
$form-floating-height: add(3.5rem, $input-height-border) !default;
+$form-floating-line-height: 1.25 !default;
$form-floating-padding-x: $input-padding-x !default;
$form-floating-padding-y: 1rem !default;
$form-floating-input-padding-t: 1.625rem !default;
@@ -910,10 +1074,12 @@ $form-validation-states: (
$zindex-dropdown: 1000 !default;
$zindex-sticky: 1020 !default;
$zindex-fixed: 1030 !default;
-$zindex-modal-backdrop: 1040 !default;
-$zindex-modal: 1050 !default;
-$zindex-popover: 1060 !default;
-$zindex-tooltip: 1070 !default;
+$zindex-offcanvas-backdrop: 1040 !default;
+$zindex-offcanvas: 1045 !default;
+$zindex-modal-backdrop: 1050 !default;
+$zindex-modal: 1055 !default;
+$zindex-popover: 1070 !default;
+$zindex-tooltip: 1080 !default;
// scss-docs-end zindex-stack
@@ -924,8 +1090,8 @@ $nav-link-padding-y: .5rem !default;
$nav-link-padding-x: 1rem !default;
$nav-link-font-size: null !default;
$nav-link-font-weight: null !default;
-$nav-link-color: null !default;
-$nav-link-hover-color: null !default;
+$nav-link-color: $link-color !default;
+$nav-link-hover-color: $link-hover-color !default;
$nav-link-transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out !default;
$nav-link-disabled-color: $gray-600 !default;
$nav-link-focus-box-shadow: $focus-ring-box-shadow !default;
@@ -947,7 +1113,7 @@ $nav-pills-link-active-bg: $component-active-bg !default;
// Navbar
// scss-docs-start navbar-variables
-$navbar-padding-y: $spacer / 2 !default;
+$navbar-padding-y: $spacer * .5 !default;
$navbar-padding-x: null !default;
$navbar-nav-link-padding-x: .5rem !default;
@@ -956,7 +1122,7 @@ $navbar-brand-font-size: $font-size-lg !default;
// Compute the navbar-brand padding-y so the navbar-brand will have the same height as navbar-text and nav-link
$nav-link-height: $font-size-base * $line-height-base + $nav-link-padding-y * 2 !default;
$navbar-brand-height: $navbar-brand-font-size * $line-height-base !default;
-$navbar-brand-padding-y: ($nav-link-height - $navbar-brand-height) / 2 !default;
+$navbar-brand-padding-y: ($nav-link-height - $navbar-brand-height) * .5 !default;
$navbar-brand-margin-end: 1rem !default;
$navbar-toggler-padding-y: .25rem !default;
@@ -1006,7 +1172,7 @@ $dropdown-border-radius: $border-radius !default;
$dropdown-border-width: $border-width !default;
$dropdown-inner-border-radius: subtract($dropdown-border-radius, $dropdown-border-width) !default;
$dropdown-divider-bg: $dropdown-border-color !default;
-$dropdown-divider-margin-y: $spacer / 2 !default;
+$dropdown-divider-margin-y: $spacer * .5 !default;
$dropdown-box-shadow: $box-shadow !default;
$dropdown-link-color: $gray-900 !default;
@@ -1018,7 +1184,7 @@ $dropdown-link-active-bg: $component-active-bg !default;
$dropdown-link-disabled-color: $gray-500 !default;
-$dropdown-item-padding-y: $spacer / 4 !default;
+$dropdown-item-padding-y: $spacer * .25 !default;
$dropdown-item-padding-x: $spacer !default;
$dropdown-header-color: $gray-600 !default;
@@ -1082,17 +1248,25 @@ $pagination-border-radius-lg: $border-radius-lg !default;
// scss-docs-end pagination-variables
+// Placeholders
+
+// scss-docs-start placeholders
+$placeholder-opacity-max: .5 !default;
+$placeholder-opacity-min: .2 !default;
+// scss-docs-end placeholders
+
// Cards
// scss-docs-start card-variables
$card-spacer-y: $spacer !default;
$card-spacer-x: $spacer !default;
-$card-title-spacer-y: $spacer / 2 !default;
+$card-title-spacer-y: $spacer * .5 !default;
$card-border-width: $border-width !default;
-$card-border-radius: $border-radius !default;
$card-border-color: rgba($black, .125) !default;
+$card-border-radius: $border-radius !default;
+$card-box-shadow: null !default;
$card-inner-border-radius: subtract($card-border-radius, $card-border-width) !default;
-$card-cap-padding-y: $card-spacer-y / 2 !default;
+$card-cap-padding-y: $card-spacer-y * .5 !default;
$card-cap-padding-x: $card-spacer-x !default;
$card-cap-bg: rgba($black, .03) !default;
$card-cap-color: null !default;
@@ -1100,7 +1274,7 @@ $card-height: null !default;
$card-color: null !default;
$card-bg: $white !default;
$card-img-overlay-padding: $spacer !default;
-$card-group-margin: $grid-gutter-width / 2 !default;
+$card-group-margin: $grid-gutter-width * .5 !default;
// scss-docs-end card-variables
// Accordion
@@ -1109,10 +1283,11 @@ $card-group-margin: $grid-gutter-width / 2 !default;
$accordion-padding-y: 1rem !default;
$accordion-padding-x: 1.25rem !default;
$accordion-color: $body-color !default;
-$accordion-bg: transparent !default;
+$accordion-bg: $body-bg !default;
$accordion-border-width: $border-width !default;
$accordion-border-color: rgba($black, .125) !default;
$accordion-border-radius: $border-radius !default;
+$accordion-inner-border-radius: subtract($accordion-border-radius, $accordion-border-width) !default;
$accordion-body-padding-y: $accordion-padding-y !default;
$accordion-body-padding-x: $accordion-padding-x !default;
@@ -1129,10 +1304,10 @@ $accordion-button-focus-border-color: $input-focus-border-color !default;
$accordion-button-focus-box-shadow: $btn-focus-box-shadow !default;
$accordion-icon-width: 1.25rem !default;
-$accordion-icon-color: $accordion-color !default;
+$accordion-icon-color: $accordion-button-color !default;
$accordion-icon-active-color: $accordion-button-active-color !default;
$accordion-icon-transition: transform .2s ease-in-out !default;
-$accordion-icon-transform: rotate(180deg) !default;
+$accordion-icon-transform: rotate(-180deg) !default;
$accordion-button-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-color}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !default;
$accordion-button-active-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-active-color}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !default;
@@ -1147,8 +1322,8 @@ $tooltip-color: $white !default;
$tooltip-bg: $black !default;
$tooltip-border-radius: $border-radius !default;
$tooltip-opacity: .9 !default;
-$tooltip-padding-y: $spacer / 4 !default;
-$tooltip-padding-x: $spacer / 2 !default;
+$tooltip-padding-y: $spacer * .25 !default;
+$tooltip-padding-x: $spacer * .5 !default;
$tooltip-margin: 0 !default;
$tooltip-arrow-width: .8rem !default;
@@ -1164,7 +1339,7 @@ $form-feedback-tooltip-font-size: $tooltip-font-size !default;
$form-feedback-tooltip-line-height: null !default;
$form-feedback-tooltip-opacity: $tooltip-opacity !default;
$form-feedback-tooltip-border-radius: $tooltip-border-radius !default;
-// scss-docs-start tooltip-feedback-variables
+// scss-docs-end tooltip-feedback-variables
// Popovers
@@ -1308,13 +1483,13 @@ $progress-bar-transition: width .6s ease !default;
// List group
// scss-docs-start list-group-variables
-$list-group-color: null !default;
+$list-group-color: $gray-900 !default;
$list-group-bg: $white !default;
$list-group-border-color: rgba($black, .125) !default;
$list-group-border-width: $border-width !default;
$list-group-border-radius: $border-radius !default;
-$list-group-item-padding-y: $spacer / 2 !default;
+$list-group-item-padding-y: $spacer * .5 !default;
$list-group-item-padding-x: $spacer !default;
$list-group-item-bg-scale: -80% !default;
$list-group-item-color-scale: 40% !default;
@@ -1413,6 +1588,7 @@ $carousel-dark-control-icon-filter: invert(1) grayscale(100) !default;
// scss-docs-start spinner-variables
$spinner-width: 2rem !default;
$spinner-height: $spinner-width !default;
+$spinner-vertical-align: -.125em !default;
$spinner-border-width: .25em !default;
$spinner-animation-speed: .75s !default;
@@ -1440,6 +1616,24 @@ $btn-close-white-filter: invert(1) grayscale(100%) brightness(200%) !default
// scss-docs-end close-variables
+// Offcanvas
+
+// scss-docs-start offcanvas-variables
+$offcanvas-padding-y: $modal-inner-padding !default;
+$offcanvas-padding-x: $modal-inner-padding !default;
+$offcanvas-horizontal-width: 400px !default;
+$offcanvas-vertical-height: 30vh !default;
+$offcanvas-transition-duration: .3s !default;
+$offcanvas-border-color: $modal-content-border-color !default;
+$offcanvas-border-width: $modal-content-border-width !default;
+$offcanvas-title-line-height: $modal-title-line-height !default;
+$offcanvas-bg-color: $modal-content-bg !default;
+$offcanvas-color: $modal-content-color !default;
+$offcanvas-box-shadow: $modal-content-box-shadow-xs !default;
+$offcanvas-backdrop-bg: $modal-backdrop-bg !default;
+$offcanvas-backdrop-opacity: $modal-backdrop-opacity !default;
+// scss-docs-end offcanvas-variables
+
// Code
$code-font-size: $small-font-size !default;
generated by cgit v1.2.3 (git 2.25.1) at 2026-06-06 04:21:35 +0000