"files": [
{
"path": "./dist/css/bootstrap-grid.css",
- "maxSize": "7.75 kB"
+ "maxSize": "9.00 kB"
},
{
"path": "./dist/css/bootstrap-grid.min.css",
- "maxSize": "7.00 kB"
+ "maxSize": "8.25 kB"
},
{
"path": "./dist/css/bootstrap-reboot.css",
- "maxSize": "4.5 kB"
+ "maxSize": "5.0 kB"
},
{
"path": "./dist/css/bootstrap-reboot.min.css",
},
{
"path": "./dist/css/bootstrap-utilities.css",
- "maxSize": "13.0 kB"
+ "maxSize": "13.5 kB"
},
{
"path": "./dist/css/bootstrap-utilities.min.css",
},
{
"path": "./dist/css/bootstrap.css",
- "maxSize": "36.0 kB"
+ "maxSize": "36.5 kB"
},
{
"path": "./dist/css/bootstrap.min.css",
- "maxSize": "32.0 kB"
+ "maxSize": "33.0 kB"
},
{
"path": "./dist/js/bootstrap.bundle.js",
@use "sass:map";
@use "config" as *;
+@use "theme" as *;
@use "variables" as *;
@use "mixins/border-radius" as *;
// scss-docs-start alert-modifiers
// Generate contextual modifier classes for colorizing the alert
- @each $state in map.keys($theme-colors) {
+ @each $state in map.keys($new-theme-colors) {
.alert-#{$state} {
- --#{$prefix}alert-color: var(--#{$prefix}#{$state}-text-emphasis);
+ --#{$prefix}alert-color: var(--#{$prefix}#{$state}-text);
--#{$prefix}alert-bg: var(--#{$prefix}#{$state}-bg-subtle);
--#{$prefix}alert-border-color: var(--#{$prefix}#{$state}-border-subtle);
--#{$prefix}alert-link-color: var(--#{$prefix}#{$state}-text-emphasis);
-$blue: #0d6efd !default;
-$blue-100: #cfe2ff !default;
-$blue-200: #9ec5fe !default;
-$blue-300: #6ea8fe !default;
-$blue-400: #3d8bfd !default;
-$blue-500: $blue !default;
-$blue-600: #0a58ca !default;
-$blue-700: #084298 !default;
-$blue-800: #052c65 !default;
-$blue-900: #031633 !default;
-
-$indigo: #6610f2 !default;
-$indigo-100: #e0cffc !default;
-$indigo-200: #c29ffa !default;
-$indigo-300: #a370f7 !default;
-$indigo-400: #8540f5 !default;
-$indigo-500: $indigo !default;
-$indigo-600: #520dc2 !default;
-$indigo-700: #3d0a91 !default;
-$indigo-800: #290661 !default;
-$indigo-900: #140330 !default;
-
-$purple: #6f42c1 !default;
-$purple-100: #e2d9f3 !default;
-$purple-200: #c5b3e6 !default;
-$purple-300: #a98eda !default;
-$purple-400: #8c68cd !default;
-$purple-500: $purple !default;
-$purple-600: #59359a !default;
-$purple-700: #432874 !default;
-$purple-800: #2c1a4d !default;
-$purple-900: #160d27 !default;
-
-$pink: #d63384 !default;
-$pink-100: #f7d6e6 !default;
-$pink-200: #efadce !default;
-$pink-300: #e685b5 !default;
-$pink-400: #de5c9d !default;
-$pink-500: $pink !default;
-$pink-600: #ab296a !default;
-$pink-700: #801f4f !default;
-$pink-800: #561435 !default;
-$pink-900: #2b0a1a !default;
-
-$red: #dc3545 !default;
-$red-100: #f8d7da !default;
-$red-200: #f1aeb5 !default;
-$red-300: #ea868f !default;
-$red-400: #e35d6a !default;
-$red-500: $red !default;
-$red-600: #b02a37 !default;
-$red-700: #842029 !default;
-$red-800: #58151c !default;
-$red-900: #2c0b0e !default;
-
-$orange: #fd7e14 !default;
-$orange-100: #ffe5d0 !default;
-$orange-200: #fecba1 !default;
-$orange-300: #feb272 !default;
-$orange-400: #fd9843 !default;
-$orange-500: $orange !default;
-$orange-600: #ca6510 !default;
-$orange-700: #984c0c !default;
-$orange-800: #653208 !default;
-$orange-900: #331904 !default;
-
-$yellow: #ffc107 !default;
-$yellow-100: #fff3cd !default;
-$yellow-200: #ffe69c !default;
-$yellow-300: #ffda6a !default;
-$yellow-400: #ffcd39 !default;
-$yellow-500: $yellow !default;
-$yellow-600: #cc9a06 !default;
-$yellow-700: #997404 !default;
-$yellow-800: #664d03 !default;
-$yellow-900: #332701 !default;
-
-$green: #198754 !default;
-$green-100: #d1e7dd !default;
-$green-200: #a3cfbb !default;
-$green-300: #75b798 !default;
-$green-400: #479f76 !default;
-$green-500: $green !default;
-$green-600: #146c43 !default;
-$green-700: #0f5132 !default;
-$green-800: #0a3622 !default;
-$green-900: #051b11 !default;
-
-$teal: #20c997 !default;
-$teal-100: #d2f4ea !default;
-$teal-200: #a6e9d5 !default;
-$teal-300: #79dfc1 !default;
-$teal-400: #4dd4ac !default;
-$teal-500: $teal !default;
-$teal-600: #1aa179 !default;
-$teal-700: #13795b !default;
-$teal-800: #0d503c !default;
-$teal-900: #06281e !default;
-
-$cyan: #0dcaf0 !default;
-$cyan-100: #cff4fc !default;
-$cyan-200: #9eeaf9 !default;
-$cyan-300: #6edff6 !default;
-$cyan-400: #3dd5f3 !default;
-$cyan-500: $cyan !default;
-$cyan-600: #0aa2c0 !default;
-$cyan-700: #087990 !default;
-$cyan-800: #055160 !default;
-$cyan-900: #032830 !default;
-
-$gray: #adb5bd !default;
-$gray-100: #f8f9fa !default;
-$gray-200: #e9ecef !default;
-$gray-300: #dee2e6 !default;
-$gray-400: #ced4da !default;
-$gray-500: $gray !default;
-$gray-600: #6c757d !default;
-$gray-700: #495057 !default;
-$gray-800: #343a40 !default;
-$gray-900: #212529 !default;
+@use "config" as *;
+
+// stylelint-disable hue-degree-notation, @stylistic/number-leading-zero
+
+// Easily convert colors to oklch() with https://oklch.com/
+$new-blue: oklch(60% 0.24 258) !default;
+$new-indigo: oklch(56% 0.26 288) !default;
+$new-violet: oklch(56% 0.24 300) !default;
+$new-purple: oklch(56% 0.24 320) !default;
+$new-pink: oklch(60% 0.22 4) !default;
+$new-red: oklch(60% 0.22 20) !default;
+$new-orange: oklch(70% 0.22 52) !default;
+$new-amber: oklch(79% 0.2 78) !default;
+$new-yellow: oklch(88% 0.24 88) !default;
+$new-lime: oklch(65% 0.24 135) !default;
+$new-green: oklch(64% 0.22 160) !default;
+$new-teal: oklch(68% 0.22 190) !default;
+$new-cyan: oklch(69% 0.22 220) !default;
+$new-brown: oklch(60% 0.12 54) !default;
+$new-gray: oklch(60% 0.02 245) !default;
+$new-pewter: oklch(65% 0.01 290) !default;
+
+$hues: (
+ "blue": $new-blue,
+ "indigo": $new-indigo,
+ "violet": $new-violet,
+ "purple": $new-purple,
+ "pink": $new-pink,
+ "red": $new-red,
+ "orange": $new-orange,
+ "amber": $new-amber,
+ "yellow": $new-yellow,
+ "lime": $new-lime,
+ "green": $new-green,
+ "teal": $new-teal,
+ "cyan": $new-cyan,
+ "brown": $new-brown,
+ "gray": $new-gray,
+ "pewter": $new-pewter
+) !default;
+
+:root {
+ @each $color, $hue in $hues {
+ --#{$prefix}#{$color}-025: color-mix(in srgb, #fff 94%, #{$hue});
+ --#{$prefix}#{$color}-050: color-mix(in srgb, #fff 90%, #{$hue});
+ --#{$prefix}#{$color}-100: color-mix(in srgb, #fff 80%, #{$hue});
+ --#{$prefix}#{$color}-200: color-mix(in srgb, #fff 60%, #{$hue});
+ --#{$prefix}#{$color}-300: color-mix(in srgb, #fff 40%, #{$hue});
+ --#{$prefix}#{$color}-400: color-mix(in srgb, #fff 20%, #{$hue});
+ --#{$prefix}#{$color}-500: #{$hue};
+ --#{$prefix}#{$color}-600: color-mix(in srgb, #000 16%, #{$hue});
+ --#{$prefix}#{$color}-700: color-mix(in srgb, #000 32%, #{$hue});
+ --#{$prefix}#{$color}-800: color-mix(in srgb, #000 48%, #{$hue});
+ --#{$prefix}#{$color}-900: color-mix(in srgb, #000 64%, #{$hue});
+ --#{$prefix}#{$color}-950: color-mix(in srgb, #000 76%, #{$hue});
+ --#{$prefix}#{$color}-975: color-mix(in srgb, #000 88%, #{$hue});
+ }
+}
$white: #fff !default;
$black: #000 !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-100,
- "purple-200": $purple-200,
- "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;
-
-$grays: (
- "gray-100": $gray-100,
- "gray-200": $gray-200,
- "gray-300": $gray-300,
- "gray-400": $gray-400,
- "gray-500": $gray-500,
- "gray-600": $gray-600,
- "gray-700": $gray-700,
- "gray-800": $gray-800,
- "gray-900": $gray-900
-) !default;
-
-$colors: (
- "blue": $blue,
- "indigo": $indigo,
- "purple": $purple,
- "pink": $pink,
- "red": $red,
- "orange": $orange,
- "yellow": $yellow,
- "green": $green,
- "teal": $teal,
- "cyan": $cyan
-) !default;
-
-$all-colors: (
- "grays": $grays,
- "blues": $blues,
- "indigos": $indigos,
- "purples": $purples,
- "pinks": $pinks,
- "reds": $reds,
- "oranges": $oranges,
- "yellows": $yellows,
- "greens": $greens,
- "teals": $teals,
- "cyans": $cyans
-) !default;
$dropdown-item-padding-y: $spacer * .25 !default;
$dropdown-item-padding-x: $spacer !default;
-$dropdown-header-color: $gray-600 !default;
+$dropdown-header-color: var(--#{$prefix}gray-600) !default;
$dropdown-header-padding-x: $dropdown-item-padding-x !default;
$dropdown-header-padding-y: $dropdown-padding-y !default;
// scss-docs-end dropdown-variables
// scss-docs-start dropdown-dark-variables
-$dropdown-dark-color: $gray-300 !default;
-$dropdown-dark-bg: $gray-800 !default;
+$dropdown-dark-color: var(--#{$prefix}gray-300) !default;
+$dropdown-dark-bg: var(--#{$prefix}gray-800) !default;
$dropdown-dark-border-color: $dropdown-border-color !default;
$dropdown-dark-divider-bg: $dropdown-divider-bg !default;
$dropdown-dark-box-shadow: null !default;
$dropdown-dark-link-hover-bg: rgba($white, .15) !default;
$dropdown-dark-link-active-color: $dropdown-link-active-color !default;
$dropdown-dark-link-active-bg: $dropdown-link-active-bg !default;
-$dropdown-dark-link-disabled-color: $gray-500 !default;
-$dropdown-dark-header-color: $gray-500 !default;
+$dropdown-dark-link-disabled-color: var(--#{$prefix}gray-500) !default;
+$dropdown-dark-header-color: var(--#{$prefix}gray-500) !default;
// scss-docs-end dropdown-dark-variables
@layer components {
// Return opaque color
// opaque(#fff, rgba(0, 0, 0, .5)) => #808080
@function opaque($background, $foreground) {
- @return color.mix(rgba($foreground, 1), $background, color.opacity($foreground) * 100%);
+ @return color-mix(in srgb, rgba($foreground, 1), $background, color.opacity($foreground) * 100%);
}
// scss-docs-start color-functions
@use "sass:map";
@use "colors" as *;
+@use "theme" as *;
@use "config" as *;
@use "variables" as *;
@use "mixins/border-radius" as *;
// Add modifier classes to change text and background color on individual items.
// Organizationally, this must come after the `:hover` states.
- @each $state in map.keys($theme-colors) {
+ @each $state in map.keys($new-theme-colors) {
.list-group-item-#{$state} {
--#{$prefix}list-group-color: var(--#{$prefix}#{$state}-text-emphasis);
--#{$prefix}list-group-bg: var(--#{$prefix}#{$state}-bg-subtle);
+++ /dev/null
-// @use "sass:map";
-// @use "colors" as *;
-// @use "functions" as *;
-// @use "config" as *;
-// @use "variables" as *;
-
-// // Re-assigned maps
-// //
-// // Placed here so that others can override the default Sass maps and see automatic updates to utilities and more.
-
-// // scss-docs-start theme-colors-rgb
-// $theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value") !default;
-// // scss-docs-end theme-colors-rgb
-
-// // scss-docs-start theme-text-map
-// $theme-colors-text: (
-// "primary": $primary-text-emphasis,
-// "secondary": $secondary-text-emphasis,
-// "success": $success-text-emphasis,
-// "info": $info-text-emphasis,
-// "warning": $warning-text-emphasis,
-// "danger": $danger-text-emphasis,
-// "light": $light-text-emphasis,
-// "dark": $dark-text-emphasis,
-// ) !default;
-// // scss-docs-end theme-text-map
-
-// // scss-docs-start theme-bg-subtle-map
-// $theme-colors-bg-subtle: (
-// "primary": $primary-bg-subtle,
-// "secondary": $secondary-bg-subtle,
-// "success": $success-bg-subtle,
-// "info": $info-bg-subtle,
-// "warning": $warning-bg-subtle,
-// "danger": $danger-bg-subtle,
-// "light": $light-bg-subtle,
-// "dark": $dark-bg-subtle,
-// ) !default;
-// // scss-docs-end theme-bg-subtle-map
-
-// // scss-docs-start theme-border-subtle-map
-// $theme-colors-border-subtle: (
-// "primary": $primary-border-subtle,
-// "secondary": $secondary-border-subtle,
-// "success": $success-border-subtle,
-// "info": $info-border-subtle,
-// "warning": $warning-border-subtle,
-// "danger": $danger-border-subtle,
-// "light": $light-border-subtle,
-// "dark": $dark-border-subtle,
-// ) !default;
-// // scss-docs-end theme-border-subtle-map
-
-// $theme-colors-text-dark: null !default;
-// $theme-colors-bg-subtle-dark: null !default;
-// $theme-colors-border-subtle-dark: null !default;
-
-// @if $enable-dark-mode {
-// // scss-docs-start theme-text-dark-map
-// $theme-colors-text-dark: (
-// "primary": $primary-text-emphasis-dark,
-// "secondary": $secondary-text-emphasis-dark,
-// "success": $success-text-emphasis-dark,
-// "info": $info-text-emphasis-dark,
-// "warning": $warning-text-emphasis-dark,
-// "danger": $danger-text-emphasis-dark,
-// "light": $light-text-emphasis-dark,
-// "dark": $dark-text-emphasis-dark,
-// ) !default;
-// // scss-docs-end theme-text-dark-map
-
-// // scss-docs-start theme-bg-subtle-dark-map
-// $theme-colors-bg-subtle-dark: (
-// "primary": $primary-bg-subtle-dark,
-// "secondary": $secondary-bg-subtle-dark,
-// "success": $success-bg-subtle-dark,
-// "info": $info-bg-subtle-dark,
-// "warning": $warning-bg-subtle-dark,
-// "danger": $danger-bg-subtle-dark,
-// "light": $light-bg-subtle-dark,
-// "dark": $dark-bg-subtle-dark,
-// ) !default;
-// // scss-docs-end theme-bg-subtle-dark-map
-
-// // scss-docs-start theme-border-subtle-dark-map
-// $theme-colors-border-subtle-dark: (
-// "primary": $primary-border-subtle-dark,
-// "secondary": $secondary-border-subtle-dark,
-// "success": $success-border-subtle-dark,
-// "info": $info-border-subtle-dark,
-// "warning": $warning-border-subtle-dark,
-// "danger": $danger-border-subtle-dark,
-// "light": $light-border-subtle-dark,
-// "dark": $dark-border-subtle-dark,
-// ) !default;
-// // scss-docs-end theme-border-subtle-dark-map
-// }
-
-// // 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;
-
-// $utilities-text-emphasis-colors: (
-// "primary-emphasis": var(--#{$prefix}primary-text-emphasis),
-// "secondary-emphasis": var(--#{$prefix}secondary-text-emphasis),
-// "success-emphasis": var(--#{$prefix}success-text-emphasis),
-// "info-emphasis": var(--#{$prefix}info-text-emphasis),
-// "warning-emphasis": var(--#{$prefix}warning-text-emphasis),
-// "danger-emphasis": var(--#{$prefix}danger-text-emphasis),
-// "light-emphasis": var(--#{$prefix}light-text-emphasis),
-// "dark-emphasis": var(--#{$prefix}dark-text-emphasis)
-// ) !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;
-
-// $utilities-bg-subtle: (
-// "primary-subtle": var(--#{$prefix}primary-bg-subtle),
-// "secondary-subtle": var(--#{$prefix}secondary-bg-subtle),
-// "success-subtle": var(--#{$prefix}success-bg-subtle),
-// "info-subtle": var(--#{$prefix}info-bg-subtle),
-// "warning-subtle": var(--#{$prefix}warning-bg-subtle),
-// "danger-subtle": var(--#{$prefix}danger-bg-subtle),
-// "light-subtle": var(--#{$prefix}light-bg-subtle),
-// "dark-subtle": var(--#{$prefix}dark-bg-subtle)
-// ) !default;
-// // scss-docs-end utilities-bg-colors
-
-// // scss-docs-start utilities-border-colors
-// $utilities-border: map.merge(
-// $utilities-colors,
-// (
-// "black": to-rgb($black),
-// "white": to-rgb($white)
-// )
-// ) !default;
-// $utilities-border-colors: map-loop($utilities-border, rgba-css-var, "$key", "border") !default;
-
-// $utilities-border-subtle: (
-// "primary-subtle": var(--#{$prefix}primary-border-subtle),
-// "secondary-subtle": var(--#{$prefix}secondary-border-subtle),
-// "success-subtle": var(--#{$prefix}success-border-subtle),
-// "info-subtle": var(--#{$prefix}info-border-subtle),
-// "warning-subtle": var(--#{$prefix}warning-border-subtle),
-// "danger-subtle": var(--#{$prefix}danger-border-subtle),
-// "light-subtle": var(--#{$prefix}light-border-subtle),
-// "dark-subtle": var(--#{$prefix}dark-border-subtle)
-// ) !default;
-// // scss-docs-end utilities-border-colors
-
-// $utilities-links-underline: map-loop($utilities-colors, rgba-css-var, "$key", "link-underline") !default;
-
-// $negative-spacers: if($enable-negative-margins, negativify-map($spacers), null) !default;
-
-// $gutters: $spacers !default;
$progress-border-radius: var(--#{$prefix}border-radius) !default;
$progress-box-shadow: var(--#{$prefix}box-shadow-inset) !default;
$progress-bar-color: $white !default;
-$progress-bar-bg: $primary !default;
+$progress-bar-bg: var(--#{$prefix}primary-bg) !default;
$progress-bar-animation-timing: 1s linear infinite !default;
$progress-bar-transition: width .6s ease !default;
// scss-docs-end progress-variables
:root {
color-scheme: light dark;
- @each $color-group-name, $color-group in $all-colors {
- @if meta.type-of($color-group) == "map" {
- @each $color-name, $color-value in $color-group {
- --#{$prefix}#{$color-name}: #{$color-value};
- }
- } @else {
- --#{$prefix}#{$color-group-name}: #{$color-group};
+ // scss-docs-start root-theme-variables
+ // Generate semantic theme colors
+ @each $color-name, $color-map in $new-theme-colors {
+ @each $key, $value in $color-map {
+ --#{$prefix}#{$color-name}-#{$key}: #{$value};
}
}
- @each $color, $value in $theme-colors {
+ @each $color, $value in $theme-bgs {
--#{$prefix}#{$color}: #{$value};
}
- @each $color-name, $color-map in $new-theme-colors {
- @each $key, $value in $color-map {
- --#{$prefix}#{$color-name}-#{$key}: #{$value};
- }
+ @each $color, $value in $theme-fgs {
+ --#{$prefix}#{$color}: #{$value};
+ }
+
+ @each $color, $value in $theme-borders {
+ --#{$prefix}#{$color}: #{$value};
}
--#{$prefix}black: #{$black};
--#{$prefix}white: #{$white};
+ // scss-docs-end root-theme-variables
}
:root,
[data-bs-theme="light"] {
// Note: Custom variable values only support SassScript inside `#{}`.
- // Colors
- //
- // Generate palettes for full colors, grays, and theme colors.
-
- // @each $color, $value in $colors {
- // --#{$prefix}#{$color}: #{$value};
- // }
-
- // @each $color, $value in $grays {
- // --#{$prefix}gray-#{$color}: #{$value};
- // }
-
- // @each $color, $value in $theme-colors {
- // --#{$prefix}#{$color}: #{$value};
- // }
-
- // @each $color, $value in $theme-colors-rgb {
- // --#{$prefix}#{$color}-rgb: #{$value};
- // }
-
- // @each $color, $value in $theme-colors-text {
- // --#{$prefix}#{$color}-text-emphasis: #{$value};
- // }
-
- // @each $color, $value in $theme-colors-bg-subtle {
- // --#{$prefix}#{$color}-bg-subtle: #{$value};
- // }
-
- // @each $color, $value in $theme-colors-border-subtle {
- // --#{$prefix}#{$color}-border-subtle: #{$value};
- // }
-
--#{$prefix}white-rgb: #{to-rgb($white)};
--#{$prefix}black-rgb: #{to-rgb($black)};
--#{$prefix}tertiary-bg: #{$body-tertiary-bg-dark};
--#{$prefix}tertiary-bg-rgb: #{to-rgb($body-tertiary-bg-dark)};
- // @each $color, $value in $theme-colors-text-dark {
- // --#{$prefix}#{$color}-text-emphasis: #{$value};
- // }
-
- // @each $color, $value in $theme-colors-bg-subtle-dark {
- // --#{$prefix}#{$color}-bg-subtle: #{$value};
- // }
-
- // @each $color, $value in $theme-colors-border-subtle-dark {
- // --#{$prefix}#{$color}-border-subtle: #{$value};
- // }
-
--#{$prefix}heading-color: #{$headings-color-dark};
- --#{$prefix}link-color: #{$link-color-dark};
- --#{$prefix}link-hover-color: #{$link-hover-color-dark};
- --#{$prefix}link-color-rgb: #{to-rgb($link-color-dark)};
- --#{$prefix}link-hover-color-rgb: #{to-rgb($link-hover-color-dark)};
+ // --#{$prefix}link-color: #{$link-color-dark};
+ // --#{$prefix}link-hover-color: #{$link-hover-color-dark};
+ // --#{$prefix}link-color-rgb: #{to-rgb($link-color-dark)};
+ // --#{$prefix}link-hover-color-rgb: #{to-rgb($link-hover-color-dark)};
// --#{$prefix}code-color: #{$code-color-dark}; // removed in v6
--#{$prefix}highlight-color: #{$mark-color-dark};
"bg": light-dark(var(--#{$prefix}blue-500), var(--#{$prefix}blue-500)),
"bg-subtle": light-dark(var(--#{$prefix}blue-100), var(--#{$prefix}blue-900)),
"bg-muted": light-dark(var(--#{$prefix}blue-200), var(--#{$prefix}blue-800)),
- // "bg-emphasized": light-dark(color-mix(in oklch, var(--#{$prefix}blue-200), var(--#{$prefix}blue-300)), var(--#{$prefix}blue-700)),
"border": light-dark(var(--#{$prefix}blue-300), var(--#{$prefix}blue-600)),
- "focus-ring": color-mix(in oklch, var(--#{$prefix}blue-500) 50%, var(--#{$prefix}bg)),
+ "focus-ring": color-mix(in oklch, light-dark(var(--#{$prefix}blue-500), var(--#{$prefix}blue-300)) 50%, var(--#{$prefix}bg)),
"contrast": var(--#{$prefix}white)
),
"accent": (
"bg": light-dark(var(--#{$prefix}indigo-500), var(--#{$prefix}indigo-500)),
"bg-subtle": light-dark(var(--#{$prefix}indigo-100), var(--#{$prefix}indigo-900)),
"bg-muted": light-dark(var(--#{$prefix}indigo-200), var(--#{$prefix}indigo-800)),
- // "bg-emphasized": light-dark(color-mix(in oklch, var(--#{$prefix}indigo-200), var(--#{$prefix}indigo-300)), var(--#{$prefix}indigo-700)),
"border": light-dark(var(--#{$prefix}indigo-300), var(--#{$prefix}indigo-600)),
- "focus-ring": color-mix(in oklch, var(--#{$prefix}indigo-500) 50%, var(--#{$prefix}bg)),
+ "focus-ring": color-mix(in oklch, light-dark(var(--#{$prefix}indigo-500), var(--#{$prefix}indigo-300)) 50%, var(--#{$prefix}bg)),
"contrast": var(--#{$prefix}white)
),
"danger": (
"bg": light-dark(var(--#{$prefix}red-500), var(--#{$prefix}red-500)),
"bg-subtle": light-dark(var(--#{$prefix}red-100), var(--#{$prefix}red-900)),
"bg-muted": light-dark(var(--#{$prefix}red-200), var(--#{$prefix}red-800)),
- // "bg-emphasized": light-dark(color-mix(in oklch, var(--#{$prefix}red-200), var(--#{$prefix}red-300)), var(--#{$prefix}red-700)),
"border": light-dark(var(--#{$prefix}red-300), var(--#{$prefix}red-600)),
- "focus-ring": color-mix(in oklch, var(--#{$prefix}red-500) 50%, var(--#{$prefix}bg)),
+ "focus-ring": color-mix(in oklch, light-dark(var(--#{$prefix}red-500), var(--#{$prefix}red-300)) 50%, var(--#{$prefix}bg)),
"contrast": var(--#{$prefix}white)
),
"warning": (
"bg": light-dark(var(--#{$prefix}yellow-500), var(--#{$prefix}yellow-500)),
"bg-subtle": light-dark(var(--#{$prefix}yellow-100), var(--#{$prefix}yellow-900)),
"bg-muted": light-dark(var(--#{$prefix}yellow-200), var(--#{$prefix}yellow-800)),
- // "bg-emphasized": light-dark(color-mix(in oklch, var(--#{$prefix}yellow-200), var(--#{$prefix}yellow-300)), var(--#{$prefix}yellow-700)),
"border": light-dark(var(--#{$prefix}yellow-300), var(--#{$prefix}yellow-600)),
- "focus-ring": color-mix(in oklch, var(--#{$prefix}yellow-500) 50%, var(--#{$prefix}bg)),
+ "focus-ring": color-mix(in oklch, light-dark(var(--#{$prefix}yellow-500), var(--#{$prefix}yellow-300)) 50%, var(--#{$prefix}bg)),
"contrast": var(--#{$prefix}gray-900)
),
"success": (
"bg": light-dark(var(--#{$prefix}green-500), var(--#{$prefix}green-500)),
"bg-subtle": light-dark(var(--#{$prefix}green-100), var(--#{$prefix}green-900)),
"bg-muted": light-dark(var(--#{$prefix}green-200), var(--#{$prefix}green-800)),
- // "bg-emphasized": light-dark(color-mix(in oklch, var(--#{$prefix}green-200), var(--#{$prefix}green-300)), var(--#{$prefix}green-700)),
"border": light-dark(var(--#{$prefix}green-300), var(--#{$prefix}green-600)),
- "focus-ring": color-mix(in oklch, var(--#{$prefix}green-500) 50%, var(--#{$prefix}bg)),
+ "focus-ring": color-mix(in oklch, light-dark(var(--#{$prefix}green-500), var(--#{$prefix}green-300)) 50%, var(--#{$prefix}bg)),
"contrast": var(--#{$prefix}white)
),
"info": (
"bg": light-dark(var(--#{$prefix}cyan-500), var(--#{$prefix}cyan-500)),
"bg-subtle": light-dark(var(--#{$prefix}cyan-100), var(--#{$prefix}cyan-900)),
"bg-muted": light-dark(var(--#{$prefix}cyan-200), var(--#{$prefix}cyan-800)),
- // "bg-emphasized": light-dark(color-mix(in oklch, var(--#{$prefix}cyan-200), var(--#{$prefix}cyan-300)), var(--#{$prefix}cyan-700)),
"border": light-dark(var(--#{$prefix}cyan-300), var(--#{$prefix}cyan-600)),
- "focus-ring": color-mix(in oklch, var(--#{$prefix}cyan-500) 50%, var(--#{$prefix}bg)),
+ "focus-ring": color-mix(in oklch, light-dark(var(--#{$prefix}cyan-500), var(--#{$prefix}cyan-300)) 50%, var(--#{$prefix}bg)),
"contrast": var(--#{$prefix}gray-900)
),
"secondary": (
"bg": light-dark(var(--#{$prefix}gray-300), var(--#{$prefix}gray-600)),
"bg-subtle": light-dark(var(--#{$prefix}gray-100), var(--#{$prefix}gray-800)),
"bg-muted": light-dark(var(--#{$prefix}gray-200), var(--#{$prefix}gray-700)),
- // "bg-emphasized": light-dark(color-mix(in oklch, var(--#{$prefix}gray-200), var(--#{$prefix}gray-300)), color-mix(in oklch, var(--#{$prefix}gray-600), var(--#{$prefix}gray-700))),
"border": light-dark(var(--#{$prefix}gray-300), var(--#{$prefix}gray-600)),
- "focus-ring": color-mix(in oklch, var(--#{$prefix}gray-500) 50%, var(--#{$prefix}bg)),
+ "focus-ring": color-mix(in oklch, light-dark(var(--#{$prefix}gray-500), var(--#{$prefix}gray-300)) 50%, var(--#{$prefix}bg)),
"contrast": light-dark(var(--#{$prefix}gray-900), var(--#{$prefix}white))
)
) !default;
// mdo-do: consider using muted, subtle, ghost or something instead of linear scale?
$theme-bgs: (
- null: light-dark(var(--#{$prefix}white), var(--#{$prefix}gray-900)),
- "1": light-dark(var(--#{$prefix}gray-100), color-mix(in srgb, var(--#{$prefix}gray-900), var(--#{$prefix}gray-800))),
- "2": light-dark(color-mix(in srgb, var(--#{$prefix}gray-100), var(--#{$prefix}gray-200)), color-mix(in srgb, var(--#{$prefix}gray-800), var(--#{$prefix}gray-700))),
- "3": light-dark(color-mix(in srgb, var(--#{$prefix}gray-200), var(--#{$prefix}gray-300)), color-mix(in srgb, var(--#{$prefix}gray-700), var(--#{$prefix}gray-600))),
+ null: light-dark(var(--#{$prefix}white), var(--#{$prefix}gray-975)),
+ "1": light-dark(var(--#{$prefix}gray-025), var(--#{$prefix}gray-950)),
+ "2": light-dark(var(--#{$prefix}gray-050), var(--#{$prefix}gray-900)),
+ "3": light-dark(var(--#{$prefix}gray-100), var(--#{$prefix}gray-800)),
"white": var(--#{$prefix}white),
"black": var(--#{$prefix}black),
"transparent": transparent,
) !default;
$theme-fgs: (
- null: light-dark(var(--#{$prefix}gray-900), var(--#{$prefix}gray-100)),
- "1": light-dark(var(--#{$prefix}gray-800), var(--#{$prefix}gray-200)),
- "2": light-dark(var(--#{$prefix}gray-700), var(--#{$prefix}gray-300)),
- "3": light-dark(var(--#{$prefix}gray-600), var(--#{$prefix}gray-400)),
+ null: light-dark(var(--#{$prefix}gray-900), var(--#{$prefix}gray-050)),
+ "1": light-dark(var(--#{$prefix}gray-800), var(--#{$prefix}gray-100)),
+ "2": light-dark(var(--#{$prefix}gray-700), var(--#{$prefix}gray-200)),
+ "3": light-dark(var(--#{$prefix}gray-600), var(--#{$prefix}gray-300)),
"white": var(--#{$prefix}white),
"black": var(--#{$prefix}black),
"inherit": inherit,
$tooltip-font-size: $font-size-sm !default;
$tooltip-max-width: 200px !default;
$tooltip-color: var(--#{$prefix}body-bg) !default;
-$tooltip-bg: var(--#{$prefix}emphasis-color) !default;
+$tooltip-bg: var(--#{$prefix}body-color) !default;
$tooltip-border-radius: var(--#{$prefix}border-radius) !default;
$tooltip-opacity: .9 !default;
$tooltip-padding-y: $spacer * .25 !default;
print: true,
property: display,
class: d,
- values: inline inline-block block grid inline-grid table table-row table-cell flex inline-flex flow-root none
+ important: true,
+ values: inline inline-block block grid inline-grid table table-row table-cell flex inline-flex contents flow-root none
),
// scss-docs-end utils-display
// scss-docs-start utils-shadow
property: z-index,
class: z,
values: $zindex-levels,
- )
+ ),
// scss-docs-end utils-zindex
+ // scss-docs-start utils-check-colors
+ "check-color": (
+ property: --#{$prefix}check-checked-bg --#{$prefix}check-checked-border-color --#{$prefix}radio-checked-bg --#{$prefix}radio-checked-border-color,
+ class: checked,
+ values: theme-color-values("bg")
+ )
+ // scss-docs-end utils-check-colors
),
$utilities
);
// consistent naming. Ex: $nav-link-disabled-color and $modal-content-box-shadow-xs.
// scss-docs-start theme-color-variables
-$primary: $blue-500 !default;
-$secondary: $gray-600 !default;
-$success: $green-500 !default;
-$info: $cyan-500 !default;
-$warning: $yellow-500 !default;
-$danger: $red-500 !default;
-$light: $gray-100 !default;
-$dark: $gray-900 !default;
+// $primary: $blue-500 !default;
+// $secondary: var(--#{$prefix}gray-600) !default;
+// $success: $green-500 !default;
+// $info: $cyan-500 !default;
+// $warning: $yellow-500 !default;
+// $danger: $red-500 !default;
+// $light: var(--#{$prefix}gray-100) !default;
+// $dark: var(--#{$prefix}gray-900) !default;
// scss-docs-end theme-color-variables
// scss-docs-start theme-colors-map
-$theme-colors: (
- "primary": $primary,
- "secondary": $secondary,
- "success": $success,
- "info": $info,
- "warning": $warning,
- "danger": $danger,
- "light": $light,
- "dark": $dark
-) !default;
+// $theme-colors: (
+// "primary": $primary,
+// "secondary": $secondary,
+// "success": $success,
+// "info": $info,
+// "warning": $warning,
+// "danger": $danger,
+// "light": $light,
+// "dark": $dark
+// ) !default;
// scss-docs-end theme-colors-map
-// // scss-docs-start theme-text-variables
-// $primary-text-emphasis: shade-color($primary, 60%) !default;
-// $secondary-text-emphasis: shade-color($secondary, 60%) !default;
-// $success-text-emphasis: shade-color($success, 60%) !default;
-// $info-text-emphasis: shade-color($info, 60%) !default;
-// $warning-text-emphasis: shade-color($warning, 60%) !default;
-// $danger-text-emphasis: shade-color($danger, 60%) !default;
-// $light-text-emphasis: $gray-700 !default;
-// $dark-text-emphasis: $gray-700 !default;
-// // scss-docs-end theme-text-variables
-
-// // scss-docs-start theme-bg-subtle-variables
-// $primary-bg-subtle: tint-color($primary, 80%) !default;
-// $secondary-bg-subtle: tint-color($secondary, 80%) !default;
-// $success-bg-subtle: tint-color($success, 80%) !default;
-// $info-bg-subtle: tint-color($info, 80%) !default;
-// $warning-bg-subtle: tint-color($warning, 80%) !default;
-// $danger-bg-subtle: tint-color($danger, 80%) !default;
-// $light-bg-subtle: color.mix($gray-100, $white) !default;
-// $dark-bg-subtle: $gray-400 !default;
-// // scss-docs-end theme-bg-subtle-variables
-
-// // scss-docs-start theme-border-subtle-variables
-// $primary-border-subtle: tint-color($primary, 60%) !default;
-// $secondary-border-subtle: tint-color($secondary, 60%) !default;
-// $success-border-subtle: tint-color($success, 60%) !default;
-// $info-border-subtle: tint-color($info, 60%) !default;
-// $warning-border-subtle: tint-color($warning, 60%) !default;
-// $danger-border-subtle: tint-color($danger, 60%) !default;
-// $light-border-subtle: $gray-200 !default;
-// $dark-border-subtle: $gray-500 !default;
-// // scss-docs-end theme-border-subtle-variables
-
// Characters which are escaped by the escape-svg function
$escaped-characters: (
("<", "%3c"),
// Settings for the `<body>` element.
$body-text-align: null !default;
-$body-color: $gray-900 !default;
+$body-color: var(--#{$prefix}gray-900) !default;
$body-bg: $white !default;
$body-secondary-color: rgba($body-color, .75) !default;
-$body-secondary-bg: $gray-200 !default;
+$body-secondary-bg: var(--#{$prefix}gray-200) !default;
$body-tertiary-color: rgba($body-color, .5) !default;
-$body-tertiary-bg: $gray-100 !default;
+$body-tertiary-bg: var(--#{$prefix}gray-100) !default;
$body-emphasis-color: $black !default;
//
// Style anchor elements.
-$link-color: $primary !default;
+// $link-color: var !default;
$link-decoration: underline !default;
$link-underline-offset: .2em !default;
$link-shade-percentage: 20% !default;
-$link-hover-color: shift-color($link-color, $link-shade-percentage) !default;
+// $link-hover-color: shift-color($link-color, $link-shade-percentage) !default;
$link-hover-decoration: null !default;
$stretched-link-pseudo-element: after !default;
5: 5px
) !default;
$border-style: solid !default;
-$border-color: color.mix($gray-300, $gray-400) !default;
+$border-color: var(--#{$prefix}gray-200) !default;
$border-color-translucent: rgba($black, .175) !default;
// scss-docs-end border-variables
$box-shadow-inset: inset 0 1px 2px rgba($black, .075) !default;
// scss-docs-end box-shadow-variables
-$component-active-color: $white !default;
-$component-active-bg: $primary !default;
-
// scss-docs-start focus-ring-variables
$focus-ring-width: .25rem !default;
$focus-ring-opacity: .25 !default;
-$focus-ring-color: rgba($primary, $focus-ring-opacity) !default;
+$focus-ring-color: var(--#{$prefix}primary-focus-ring) !default;
$focus-ring-blur: 0 !default;
$focus-ring-box-shadow: 0 0 $focus-ring-blur $focus-ring-width $focus-ring-color !default;
// scss-docs-end focus-ring-variables
+$component-active-color: var(--#{$prefix}primary-contrast) !default;
+$component-active-bg: var(--#{$prefix}primary-bg) !default;
+
$transition-base: all .2s ease-in-out !default;
$transition-fade: opacity .15s linear !default;
// scss-docs-start collapse-transition
$blockquote-margin-y: $spacer !default;
$blockquote-font-size: $font-size-base * 1.25 !default;
-$blockquote-footer-color: $gray-600 !default;
+$blockquote-footer-color: var(--#{$prefix}gray-600) !default;
$blockquote-footer-font-size: $small-font-size !default;
$hr-margin-y: $spacer !default;
$mark-padding: .1875em !default;
$mark-color: $body-color !default;
-$mark-bg: $yellow-100 !default;
+$mark-bg: var(--#{$prefix}yellow-100) !default;
// scss-docs-end type-variables
$input-btn-font-size: $font-size-base !default;
$input-btn-line-height: $line-height-base !default;
-$input-btn-focus-width: $focus-ring-width !default;
+$input-btn-focus-width: .25em !default;
$input-btn-focus-color-opacity: $focus-ring-opacity !default;
$input-btn-focus-color: $focus-ring-color !default;
$input-btn-focus-blur: $focus-ring-blur !default;
$btn-link-color: var(--#{$prefix}link-color) !default;
$btn-link-hover-color: var(--#{$prefix}link-hover-color) !default;
-$btn-link-disabled-color: $gray-600 !default;
-$btn-link-color-contrast: color-contrast($link-color) !default;
-$btn-link-focus-shadow-rgb: to-rgb(color.mix($btn-link-color-contrast, $link-color, 15%)) !default;
+$btn-link-disabled-color: var(--#{$prefix}gray-600) !default;
+// $btn-link-color-contrast: color-contrast($link-color) !default;
+// $btn-link-focus-shadow-rgb: to-rgb(color.mix($btn-link-color-contrast, $link-color, 15%)) !default;
// Allows for customizing button radius independently from global border radius
$btn-border-radius: var(--#{$prefix}border-radius) !default;
//
// scss-docs-start sass-dark-mode-vars
-$body-color-dark: $gray-300 !default;
-$body-bg-dark: $gray-900 !default;
+$body-color-dark: var(--#{$prefix}gray-200) !default;
+$body-bg-dark: var(--#{$prefix}gray-975) !default;
$body-secondary-color-dark: rgba($body-color-dark, .75) !default;
-$body-secondary-bg-dark: $gray-800 !default;
+$body-secondary-bg-dark: var(--#{$prefix}gray-800) !default;
$body-tertiary-color-dark: rgba($body-color-dark, .5) !default;
-$body-tertiary-bg-dark: color.mix($gray-800, $gray-900, 50%) !default;
+$body-tertiary-bg-dark: color-mix(in srgb, var(--#{$prefix}gray-800), var(--#{$prefix}gray-900)) !default;
$body-emphasis-color-dark: $white !default;
-$border-color-dark: $gray-700 !default;
+$border-color-dark: var(--#{$prefix}gray-700) !default;
$border-color-translucent-dark: rgba($white, .15) !default;
$headings-color-dark: inherit !default;
-$link-color-dark: tint-color($primary, 40%) !default;
-$link-hover-color-dark: shift-color($link-color-dark, -$link-shade-percentage) !default;
-// $code-color-dark: tint-color($code-color, 40%) !default;
$mark-color-dark: $body-color-dark !default;
-$mark-bg-dark: $yellow-800 !default;
+$mark-bg-dark: var(--#{$prefix}yellow-800) !default;
//
//
// scss-docs-start form-validation-colors-dark
-$form-valid-color-dark: $green-300 !default;
-$form-valid-border-color-dark: $green-300 !default;
-$form-invalid-color-dark: $red-300 !default;
-$form-invalid-border-color-dark: $red-300 !default;
+$form-valid-color-dark: var(--#{$prefix}green-300) !default;
+$form-valid-border-color-dark: var(--#{$prefix}green-300) !default;
+$form-invalid-color-dark: var(--#{$prefix}red-300) !default;
+$form-invalid-border-color-dark: var(--#{$prefix}red-300) !default;
// scss-docs-end form-validation-colors-dark
// scss-docs-end sass-dark-mode-vars
$btn-link-color: var(--#{$prefix}link-color) !default;
$btn-link-hover-color: var(--#{$prefix}link-hover-color) !default;
-$btn-link-disabled-color: $gray-600 !default;
-$btn-link-color-contrast: color-contrast($link-color) !default;
-$btn-link-focus-shadow-rgb: to-rgb(color.mix($btn-link-color-contrast, $link-color, 15%)) !default;
+$btn-link-disabled-color: var(--#{$prefix}gray-600) !default;
+// $btn-link-color-contrast: color-contrast($link-color) !default;
+// $btn-link-focus-shadow-rgb: to-rgb(color.mix($btn-link-color-contrast, $link-color, 15%)) !default;
// Allows for customizing button radius independently from global border radius
$btn-border-radius: var(--#{$prefix}border-radius) !default;
@use "../colors" as *;
@use "../config" as *;
@use "../variables" as *;
+@use "../theme" as *;
@use "../functions" as *;
@use "../vendor/rfs" as *;
@use "../mixins/border-radius" as *;
// and disabled options for all buttons
// scss-docs-start btn-variant-mixin
-@mixin button-variant(
- $background,
- $border,
- $color: color-contrast($background),
- $hover-background: if($color == $color-contrast-light, shade-color($background, $btn-hover-bg-shade-amount), tint-color($background, $btn-hover-bg-tint-amount)),
- $hover-border: if($color == $color-contrast-light, shade-color($border, $btn-hover-border-shade-amount), tint-color($border, $btn-hover-border-tint-amount)),
- $hover-color: color-contrast($hover-background),
- $active-background: if($color == $color-contrast-light, shade-color($background, $btn-active-bg-shade-amount), tint-color($background, $btn-active-bg-tint-amount)),
- $active-border: if($color == $color-contrast-light, shade-color($border, $btn-active-border-shade-amount), tint-color($border, $btn-active-border-tint-amount)),
- $active-color: color-contrast($active-background),
- $disabled-background: $background,
- $disabled-border: $border,
- $disabled-color: color-contrast($disabled-background)
-) {
- --#{$prefix}btn-color: #{$color};
- --#{$prefix}btn-bg: #{$background};
- --#{$prefix}btn-border-color: #{$border};
- --#{$prefix}btn-hover-color: #{$hover-color};
- --#{$prefix}btn-hover-bg: #{$hover-background};
- --#{$prefix}btn-hover-border-color: #{$hover-border};
- // --#{$prefix}btn-focus-shadow-rgb: #{to-rgb(color.mix($color, $border, 15%))};
- --#{$prefix}btn-active-color: #{$active-color};
- --#{$prefix}btn-active-bg: #{$active-background};
- --#{$prefix}btn-active-border-color: #{$active-border};
- --#{$prefix}btn-active-shadow: #{$btn-active-box-shadow};
- --#{$prefix}btn-disabled-color: #{$disabled-color};
- --#{$prefix}btn-disabled-bg: #{$disabled-background};
- --#{$prefix}btn-disabled-border-color: #{$disabled-border};
-}
+// @mixin button-variant(
+// $background,
+// $border,
+// $color: color-contrast($background),
+// $hover-background: if($color == $color-contrast-light, shade-color($background, $btn-hover-bg-shade-amount), tint-color($background, $btn-hover-bg-tint-amount)),
+// $hover-border: if($color == $color-contrast-light, shade-color($border, $btn-hover-border-shade-amount), tint-color($border, $btn-hover-border-tint-amount)),
+// $hover-color: color-contrast($hover-background),
+// $active-background: if($color == $color-contrast-light, shade-color($background, $btn-active-bg-shade-amount), tint-color($background, $btn-active-bg-tint-amount)),
+// $active-border: if($color == $color-contrast-light, shade-color($border, $btn-active-border-shade-amount), tint-color($border, $btn-active-border-tint-amount)),
+// $active-color: color-contrast($active-background),
+// $disabled-background: $background,
+// $disabled-border: $border,
+// $disabled-color: color-contrast($disabled-background)
+// ) {
+// --#{$prefix}btn-color: #{$color};
+// --#{$prefix}btn-bg: #{$background};
+// --#{$prefix}btn-border-color: #{$border};
+// --#{$prefix}btn-hover-color: #{$hover-color};
+// --#{$prefix}btn-hover-bg: #{$hover-background};
+// --#{$prefix}btn-hover-border-color: #{$hover-border};
+// // --#{$prefix}btn-focus-shadow-rgb: #{to-rgb(color.mix($color, $border, 15%))};
+// --#{$prefix}btn-active-color: #{$active-color};
+// --#{$prefix}btn-active-bg: #{$active-background};
+// --#{$prefix}btn-active-border-color: #{$active-border};
+// --#{$prefix}btn-active-shadow: #{$btn-active-box-shadow};
+// --#{$prefix}btn-disabled-color: #{$disabled-color};
+// --#{$prefix}btn-disabled-bg: #{$disabled-background};
+// --#{$prefix}btn-disabled-border-color: #{$disabled-border};
+// }
// scss-docs-end btn-variant-mixin
// scss-docs-start btn-outline-variant-mixin
-@mixin button-outline-variant(
- $color,
- $color-hover: color-contrast($color),
- $active-background: $color,
- $active-border: $color,
- $active-color: color-contrast($active-background)
-) {
- --#{$prefix}btn-color: #{$color};
- --#{$prefix}btn-border-color: #{$color};
- --#{$prefix}btn-hover-color: #{$color-hover};
- --#{$prefix}btn-hover-bg: #{$active-background};
- --#{$prefix}btn-hover-border-color: #{$active-border};
- --#{$prefix}btn-focus-shadow-rgb: #{to-rgb($color)};
- --#{$prefix}btn-active-color: #{$active-color};
- --#{$prefix}btn-active-bg: #{$active-background};
- --#{$prefix}btn-active-border-color: #{$active-border};
- --#{$prefix}btn-active-shadow: #{$btn-active-box-shadow};
- --#{$prefix}btn-disabled-color: #{$color};
- --#{$prefix}btn-disabled-bg: transparent;
- --#{$prefix}btn-disabled-border-color: #{$color};
- --#{$prefix}gradient: none;
-}
+// @mixin button-outline-variant(
+// $color,
+// $color-hover: color-contrast($color),
+// $active-background: $color,
+// $active-border: $color,
+// $active-color: color-contrast($active-background)
+// ) {
+// --#{$prefix}btn-color: #{$color};
+// --#{$prefix}btn-border-color: #{$color};
+// --#{$prefix}btn-hover-color: #{$color-hover};
+// --#{$prefix}btn-hover-bg: #{$active-background};
+// --#{$prefix}btn-hover-border-color: #{$active-border};
+// --#{$prefix}btn-focus-shadow-rgb: #{to-rgb($color)};
+// --#{$prefix}btn-active-color: #{$active-color};
+// --#{$prefix}btn-active-bg: #{$active-background};
+// --#{$prefix}btn-active-border-color: #{$active-border};
+// --#{$prefix}btn-active-shadow: #{$btn-active-box-shadow};
+// --#{$prefix}btn-disabled-color: #{$color};
+// --#{$prefix}btn-disabled-bg: transparent;
+// --#{$prefix}btn-disabled-border-color: #{$color};
+// --#{$prefix}gradient: none;
+// }
// scss-docs-end btn-outline-variant-mixin
// scss-docs-start btn-size-mixin
//
// scss-docs-start btn-variant-loops
- @each $color, $value in $theme-colors {
- .btn-#{$color} {
- @if $color == "light" {
- @include button-variant(
- $value,
- $value,
- $hover-background: shade-color($value, $btn-hover-bg-shade-amount),
- $hover-border: shade-color($value, $btn-hover-border-shade-amount),
- $active-background: shade-color($value, $btn-active-bg-shade-amount),
- $active-border: shade-color($value, $btn-active-border-shade-amount)
- );
- } @else if $color == "dark" {
- @include button-variant(
- $value,
- $value,
- $hover-background: tint-color($value, $btn-hover-bg-tint-amount),
- $hover-border: tint-color($value, $btn-hover-border-tint-amount),
- $active-background: tint-color($value, $btn-active-bg-tint-amount),
- $active-border: tint-color($value, $btn-active-border-tint-amount)
- );
- } @else {
- @include button-variant($value, $value);
- }
- }
- }
-
- @each $color, $value in $theme-colors {
- .btn-outline-#{$color} {
- @include button-outline-variant($value);
- }
- }
+ // @each $color, $value in $new-theme-colors {
+ // .btn-#{$color} {
+ // @if $color == "light" {
+ // @include button-variant(
+ // $value,
+ // $value,
+ // $hover-background: shade-color($value, $btn-hover-bg-shade-amount),
+ // $hover-border: shade-color($value, $btn-hover-border-shade-amount),
+ // $active-background: shade-color($value, $btn-active-bg-shade-amount),
+ // $active-border: shade-color($value, $btn-active-border-shade-amount)
+ // );
+ // } @else if $color == "dark" {
+ // @include button-variant(
+ // $value,
+ // $value,
+ // $hover-background: tint-color($value, $btn-hover-bg-tint-amount),
+ // $hover-border: tint-color($value, $btn-hover-border-tint-amount),
+ // $active-background: tint-color($value, $btn-active-bg-tint-amount),
+ // $active-border: tint-color($value, $btn-active-border-tint-amount)
+ // );
+ // } @else {
+ // @include button-variant($value, $value);
+ // }
+ // }
+ // }
+
+ // @each $color, $value in $new-theme-colors {
+ // .btn-outline-#{$color} {
+ // @include button-outline-variant($value);
+ // }
+ // }
// scss-docs-end btn-variant-loops
@use "sass:math";
@use "../config" as *;
@use "../colors" as *;
+@use "../theme" as *;
@use "../variables" as *;
@use "../functions" as *;
@use "../layout/breakpoints" as *;
$table-cell-vertical-align: top !default;
-$table-color: var(--#{$prefix}emphasis-color) !default;
+$table-color: var(--#{$prefix}body-color) !default;
$table-bg: var(--#{$prefix}body-bg) !default;
$table-accent-bg: transparent !default;
$table-striped-color: $table-color !default;
$table-striped-bg-factor: .05 !default;
-$table-striped-bg: rgba(var(--#{$prefix}emphasis-color-rgb), $table-striped-bg-factor) !default;
+$table-striped-bg: color-mix(in srgb, var(--#{$prefix}table-color) #{math.percentage($table-striped-bg-factor)}, transparent) !default;
$table-active-color: $table-color !default;
$table-active-bg-factor: .1 !default;
-$table-active-bg: rgba(var(--#{$prefix}emphasis-color-rgb), $table-active-bg-factor) !default;
+$table-active-bg: color-mix(in srgb, var(--#{$prefix}table-color) #{math.percentage($table-active-bg-factor)}, transparent) !default;
$table-hover-color: $table-color !default;
$table-hover-bg-factor: .075 !default;
-$table-hover-bg: rgba(var(--#{$prefix}emphasis-color-rgb), $table-hover-bg-factor) !default;
+$table-hover-bg: color-mix(in srgb, var(--#{$prefix}table-color) #{math.percentage($table-hover-bg-factor)}, transparent) !default;
$table-border-factor: .2 !default;
$table-border-width: var(--#{$prefix}border-width) !default;
// $table-caption-color: var(--#{$prefix}secondary-color) !default;
-$table-bg-scale: -80% !default;
// scss-docs-end table-variables
// scss-docs-start table-loop
-$table-variants: (
- "primary": shift-color($primary, $table-bg-scale),
- "secondary": shift-color($secondary, $table-bg-scale),
- "success": shift-color($success, $table-bg-scale),
- "info": shift-color($info, $table-bg-scale),
- "warning": shift-color($warning, $table-bg-scale),
- "danger": shift-color($danger, $table-bg-scale),
- "light": $light,
- "dark": $dark,
-) !default;
+$table-variants: $new-theme-colors !default;
// scss-docs-end table-loop
// scss-docs-start table-variant
@mixin table-variant($state, $background) {
.table-#{$state} {
- $color: color-contrast(opaque($body-bg, $background));
+ // $color: color-contrast(opaque($body-bg, $background));
+ $color: var(--#{$prefix}#{$state}-text);
$hover-bg: color.mix($color, $background, math.percentage($table-hover-bg-factor));
$striped-bg: color.mix($color, $background, math.percentage($table-striped-bg-factor));
$active-bg: color.mix($color, $background, math.percentage($table-active-bg-factor));
// Table variants set the table cell backgrounds, border colors
// and the colors of the striped, hovered & active tables
- @each $color, $value in $table-variants {
- @include table-variant($color, $value);
+ // scss-docs-start table-variants-loop
+ @each $color in map.keys($table-variants) {
+ .table-#{$color} {
+ --#{$prefix}table-color: var(--#{$prefix}#{$color}-text);
+ --#{$prefix}table-bg: var(--#{$prefix}#{$color}-bg-subtle);
+ --#{$prefix}table-border-color: var(--#{$prefix}#{$color}-border);
+ --#{$prefix}table-striped-bg: color-mix(in srgb, var(--#{$prefix}#{$color}-bg-subtle), var(--#{$prefix}table-color) #{math.percentage($table-striped-bg-factor)});
+ --#{$prefix}table-striped-color: var(--#{$prefix}table-color);
+ --#{$prefix}table-active-bg: color-mix(in srgb, var(--#{$prefix}#{$color}-bg-subtle), var(--#{$prefix}table-color) #{math.percentage($table-active-bg-factor)});
+ --#{$prefix}table-active-color: var(--#{$prefix}table-color);
+ --#{$prefix}table-hover-bg: color-mix(in srgb, var(--#{$prefix}#{$color}-bg-subtle), var(--#{$prefix}table-color) #{math.percentage($table-hover-bg-factor)});
+ --#{$prefix}table-hover-color: var(--#{$prefix}table-color);
+
+ color: var(--#{$prefix}table-color);
+ border-color: var(--#{$prefix}table-border-color);
+ }
}
+ // scss-docs-end table-variants-loop
// Responsive tables
//
$check-checked-border-color: $check-checked-bg !default;
$check-indeterminate-bg: var(--#{$prefix}primary-base) !default;
$check-indeterminate-border-color: $check-indeterminate-bg !default;
-$check-disabled-bg: var(--#{$prefix}secondary-bg) !default;
-$check-disabled-border-color: $check-disabled-bg !default;
+$check-disabled-bg: var(--#{$prefix}bg-3) !default;
$check-disabled-opacity: .65 !default;
// scss-docs-end check-variables
--#{$prefix}check-indeterminate-bg: #{$check-indeterminate-bg};
--#{$prefix}check-indeterminate-border-color: #{$check-indeterminate-border-color};
--#{$prefix}check-disabled-bg: #{$check-disabled-bg};
- --#{$prefix}check-disabled-border-color: #{$check-disabled-border-color};
--#{$prefix}check-disabled-opacity: #{$check-disabled-opacity};
// scss-docs-end check-css-variables
$form-floating-label-height: 1.5em !default;
$form-floating-label-opacity: .65 !default;
$form-floating-label-transform: scale(.85) translateY(-.5rem) translateX(.15rem) !default;
-$form-floating-label-disabled-color: $gray-600 !default;
+$form-floating-label-disabled-color: var(--#{$prefix}gray-600) !default;
$form-floating-transition: opacity .1s ease-in-out, transform .1s ease-in-out !default;
// scss-docs-end form-floating-variables
$control-line-height-lg: $line-height-lg !default;
$control-border-radius-lg: var(--#{$prefix}border-radius-lg) !default;
-$control-select-indicator-color: $gray-600 !default;
+$control-select-indicator-color: var(--#{$prefix}gray-600) !default;
$control-select-indicator: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#{$control-select-indicator-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/></svg>") !default;
$control-select-bg-position: right $control-padding-x center !default;
$control-select-bg-size: 16px 12px !default;
$radio-border-color: var(--#{$prefix}border-color) !default;
$radio-checked-bg: var(--#{$prefix}primary-base) !default;
$radio-checked-border-color: $radio-checked-bg !default;
-$radio-disabled-bg: var(--#{$prefix}secondary-bg) !default;
-$radio-disabled-border-color: $radio-disabled-bg !default;
+$radio-disabled-bg: var(--#{$prefix}bg-3) !default;
$radio-disabled-opacity: .65 !default;
// scss-docs-end radio-variables
--#{$prefix}radio-checked-bg: #{$radio-checked-bg};
--#{$prefix}radio-checked-border-color: #{$radio-checked-border-color};
--#{$prefix}radio-disabled-bg: #{$radio-disabled-bg};
- --#{$prefix}radio-disabled-border-color: #{$radio-disabled-border-color};
--#{$prefix}radio-disabled-opacity: #{$radio-disabled-opacity};
// scss-docs-end radio-css-variables
-@use "../colors" as *;
@use "../config" as *;
@use "../variables" as *;
+@use "../colors" as *;
+@use "../theme" as *;
@layer helpers {
// All-caps `RGBA()` function used because of this Sass bug: https://github.com/sass/node-sass/issues/2251
- @each $color, $value in $theme-colors {
+ @each $color, $value in $new-theme-colors {
.text-bg-#{$color} {
- color: color-contrast($value);
- background-color: RGBA(var(--#{$prefix}#{$color}-rgb), var(--#{$prefix}bg-opacity, 1));
+ color: var(--#{$prefix}#{$color}-text);
+ background-color: var(--#{$prefix}#{$color}-bg-subtle);
+ // color: color-contrast($value);
+ // background-color: RGBA(var(--#{$prefix}#{$color}-rgb), var(--#{$prefix}bg-opacity, 1));
}
}
}
@use "../config" as *;
@use "../colors" as *;
+@use "../theme" as *;
@use "../variables" as *;
// All-caps `RGBA()` function used because of this Sass bug: https://github.com/sass/node-sass/issues/2251
@layer helpers {
- @each $color, $value in $theme-colors {
+ @each $color, $value in $new-theme-colors {
.link-#{$color} {
- color: color-mix(in srgb, var(--#{$prefix}#{$color}), transparent var(--#{$prefix}link-opacity));
- text-decoration-color: color-mix(in srgb, var(--#{$prefix}#{$color}), transparent var(--#{$prefix}link-underline-opacity));
+ color: var(--#{$prefix}#{$color}-text);
+ // color: color-mix(in srgb, var(--#{$prefix}#{$color}), transparent var(--#{$prefix}link-opacity));
+ text-decoration-color: color-mix(in srgb, var(--#{$prefix}#{$color}-text), transparent var(--#{$prefix}link-underline-opacity));
@if $link-shade-percentage != 0 {
&:hover,
&:focus {
- $hover-color: if(color-contrast($value) == $color-contrast-light, shade-color($value, $link-shade-percentage), tint-color($value, $link-shade-percentage));
- color: color-mix(in srgb, $hover-color, transparent var(--#{$prefix}link-opacity));
- text-decoration-color: color-mix(in srgb, $hover-color, transparent var(--#{$prefix}link-underline-opacity));
+ // $hover-color: if(color-contrast($value) == $color-contrast-light, shade-color($value, $link-shade-percentage), tint-color($value, $link-shade-percentage));
+ // color: color-mix(in srgb, $hover-color, transparent var(--#{$prefix}link-opacity));
+ text-decoration-color: color-mix(in srgb, var(--#{$prefix}#{$color}-text), transparent var(--#{$prefix}link-underline-opacity));
}
}
}
.grid-cols-6 {
--#{$prefix}columns: 6;
}
+
+ .grid-full {
+ grid-column: 1 / -1;
+ }
}
// Horizontal gradient, from left to right
//
// Creates two color stops, start and end, by specifying a color and position for each color stop.
-@mixin gradient-x($start-color: $gray-700, $end-color: $gray-800, $start-percent: 0%, $end-percent: 100%) {
+@mixin gradient-x($start-color: var(--#{$prefix}gray-700), $end-color: var(--#{$prefix}gray-800), $start-percent: 0%, $end-percent: 100%) {
background-image: linear-gradient(to right, $start-color $start-percent, $end-color $end-percent);
}
// Vertical gradient, from top to bottom
//
// Creates two color stops, start and end, by specifying a color and position for each color stop.
-@mixin gradient-y($start-color: $gray-700, $end-color: $gray-800, $start-percent: null, $end-percent: null) {
+@mixin gradient-y($start-color: var(--#{$prefix}gray-700), $end-color: var(--#{$prefix}gray-800), $start-percent: null, $end-percent: null) {
background-image: linear-gradient(to bottom, $start-color $start-percent, $end-color $end-percent);
}
-@mixin gradient-directional($start-color: $gray-700, $end-color: $gray-800, $deg: 45deg) {
+@mixin gradient-directional($start-color: var(--#{$prefix}gray-700), $end-color: var(--#{$prefix}gray-800), $deg: 45deg) {
background-image: linear-gradient($deg, $start-color, $end-color);
}
background-image: linear-gradient($start-color, $mid-color $color-stop, $end-color);
}
-@mixin gradient-radial($inner-color: $gray-700, $outer-color: $gray-800) {
+@mixin gradient-radial($inner-color: var(--#{$prefix}gray-700), $outer-color: var(--#{$prefix}gray-800)) {
background-image: radial-gradient(circle, $inner-color, $outer-color);
}
- name: blue
- hex: '#0d6efd'
- name: indigo
- hex: '#6610f2'
+- name: violet
- name: purple
- hex: '#6f42c1'
- name: pink
- hex: '#d63384'
- name: red
- hex: '#dc3545'
- name: orange
- hex: '#fd7e14'
+- name: amber
- name: yellow
- hex: '#ffc107'
+- name: lime
- name: green
- hex: '#198754'
- name: teal
- hex: '#20c997'
- name: cyan
- hex: '#0dcaf0'
-- name: white
- hex: '#fff'
+- name: brown
- name: gray
- hex: '#6c757d'
-- name: gray-dark
- hex: '#343a40'
+- name: pewter
+++ /dev/null
-- name: 100
- hex: '#f8f9fa'
-- name: 200
- hex: '#e9ecef'
-- name: 300
- hex: '#dee2e6'
-- name: 400
- hex: '#ced4da'
-- name: 500
- hex: '#adb5bd'
-- name: 600
- hex: '#868e96'
-- name: 700
- hex: '#495057'
-- name: 800
- hex: '#343a40'
-- name: 900
- hex: '#212529'
- title: Sass
- title: Options
- title: Color
+ - title: Theme
- title: Color modes
- title: Components
- title: CSS variables
- name: primary
- hex: '#0d6efd'
-- name: secondary
- hex: '#6c757d'
+- name: accent
- name: success
- hex: '#28a745'
- name: danger
- hex: '#dc3545'
- name: warning
- hex: '#ffc107'
- contrast_color: dark
- name: info
- hex: '#17a2b8'
- contrast_color: dark
-- name: light
- hex: '#f8f9fa'
- contrast_color: dark
-- name: dark
- hex: '#343a40'
- contrast_color: white
+- name: secondary
* If an array is passed, elements will be joined with a new line.
*/
code: string | string[]
+ /**
+ * Custom markup to display in the source code section, different from the preview code.
+ * If provided, this will be used instead of the `code` prop for the source display.
+ */
+ customMarkup?: string | string[]
/**
* The CSS class(es) to be added to the preview wrapping `div` element.
*/
const {
addStackblitzJs = false,
code,
+ customMarkup,
class: className,
id,
lang = 'html',
let markup = Array.isArray(code) ? code.join('\n') : code
markup = replacePlaceholdersInHtml(markup)
-const simplifiedMarkup = markup
+// Use customMarkup for source code display if provided, otherwise use the processed markup
+let sourceMarkup = customMarkup
+ ? (Array.isArray(customMarkup) ? customMarkup.join('\n') : customMarkup)
+ : markup
+
+const simplifiedMarkup = sourceMarkup
.replace(
/<svg.*class="bd-placeholder-img(?:-lg)?(?: *?bd-placeholder-img-lg)? ?(.*?)".*?<\/svg>/g,
(match, classes) => `<img src="..."${classes ? ` class="${classes}"` : ''} alt="...">`
--- /dev/null
+---
+export interface Props {
+ bg: string
+ fg?: string
+ size?: 'inline' | 'medium' | 'large'
+ contrast?: string
+ contrastDark?: string
+}
+
+const { bg, fg, size = 'inline', contrast, contrastDark } = Astro.props
+
+// Styles for different sizes
+const baseStyles = {
+ display: 'inline-flex',
+ color: `var(--bs-${fg})`,
+ backgroundColor: `var(--bs-${bg})`,
+ boxShadow: 'inset 0 0 0 1px light-dark(rgb(0 0 0 / .1), rgb(255 255 255 / .1))'
+}
+
+const sizeStyles = {
+ inline: {
+ verticalAlign: 'text-bottom',
+ width: '1rem',
+ height: '1rem',
+ borderRadius: 'var(--bs-border-radius-sm)'
+ },
+ medium: {
+ width: '100%',
+ paddingBlock: '1.5rem',
+ borderRadius: 'var(--bs-border-radius)'
+ },
+ large: {
+ width: '100%',
+ paddingBlock: '.5rem',
+ paddingInline: '1rem',
+ borderRadius: 'var(--bs-border-radius-lg)'
+ }
+}
+
+// Parse contrast ratios and determine if they're below 4.5
+const contrastRatio = contrast ? parseFloat(contrast) : null
+const contrastDarkRatio = contrastDark ? parseFloat(contrastDark) : null
+const isLowContrast = contrastRatio !== null && contrastRatio < 4.5
+const isLowContrastDark = contrastDarkRatio !== null && contrastDarkRatio < 4.5
+
+const contrastStyles = {
+ marginLeft: 'auto',
+ opacity: .5,
+ fontSize: '.75rem',
+ fontFamily: 'var(--bs-font-monospace)',
+ color: isLowContrast ? 'red' : 'inherit'
+}
+
+const combinedStyles = { ...baseStyles, ...sizeStyles[size] }
+---
+
+<style>
+ /* Show light contrast by default and in light mode */
+ .contrast-light {
+ display: inline;
+ }
+
+ .contrast-dark {
+ display: none;
+ }
+
+ /* Show dark contrast in dark mode */
+ :global([data-bs-theme="dark"]) .contrast-light {
+ display: none;
+ }
+
+ :global([data-bs-theme="dark"]) .contrast-dark {
+ display: inline;
+ }
+</style>
+
+{size === 'inline' ? (
+ <span style={combinedStyles}>
+ <slot />
+ {contrast && <span style={contrastStyles} class="contrast-light">{contrast}</span>}
+ {contrastDark && <span style={{...contrastStyles, color: isLowContrastDark ? 'red' : 'inherit'}} class="contrast-dark">{contrastDark}</span>}
+ </span>
+) : size === 'large' ? (
+ <span style={combinedStyles}>
+ <slot />
+ {contrast && <span style={contrastStyles} class="contrast-light">{contrast}</span>}
+ {contrastDark && <span style={{...contrastStyles, color: isLowContrastDark ? 'red' : 'inherit'}} class="contrast-dark">{contrastDark}</span>}
+ </span>
+) : (
+ <div style={combinedStyles}>
+ <slot />
+ {contrast && <span style={contrastStyles} class="contrast-light">{contrast}</span>}
+ {contrastDark && <span style={{...contrastStyles, color: isLowContrastDark ? 'red' : 'inherit'}} class="contrast-dark">{contrastDark}</span>}
+ </div>
+)}
* @default true
*/
simplified?: boolean
+ /**
+ * Optional theme for the table.
+ */
+ theme?: 'light' | 'dark'
}
-const { class: className, simplified = true } = Astro.props
+const { class: className, simplified = true, theme } = Astro.props
-const tableCode = `<table${className ? ` class="${className}"` : ''}>
+// Build the attributes
+const classAttr = className ? ` class="${className}"` : ''
+const themeAttr = theme ? ` data-bs-theme="${theme}"` : ''
+const allAttrs = `${classAttr}${themeAttr}`
+
+const tableCode = `<table${allAttrs}>
${simplified ? ' ...' : await tableContent.compiledContent()}
</table>`
-const exampleCode = `<table${className ? ` class="${className}"` : ''}>
+const exampleCode = `<table${allAttrs}>
${await tableContent.compiledContent()}
</table>`
---
-<Example showMarkup={false} code={exampleCode} />
-
-<Code code={tableCode} lang="html" />
+<Example code={exampleCode} customMarkup={tableCode} />
<Example code={getData('theme-colors').map((themeColor) => `<div class="card border-${themeColor.name} mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
- <div class="card-body${themeColor.contrast_color ? '' : ` text-${themeColor.name}`}">
+ <div class="card-body text-${themeColor.name}">
<h5 class="card-title">${themeColor.title} card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card’s content.</p>
</div>
## Variants
-Use contextual classes to color tables, table rows or individual cells.
-
-<Callout>
-**Heads up!** Because of the more complicated CSS used to generate our table variants, they most likely won’t see color mode adaptive styling until v6.
-</Callout>
+Use theme-specific color classes to style tables, table rows, or individual cells. These adapt to color modes as well.
<div class="bd-example">
<table class="table">
These classes can also be added to table variants:
-<Table class="table table-dark table-striped" />
+<Table class="table table-striped" theme="dark" />
-<Table class="table table-dark table-striped-columns" />
+<Table class="table table-striped-columns" theme="dark" />
<Table class="table table-success table-striped" />
Highlight a table row or cell by adding a `.table-active` class.
-<Example showMarkup={false} code={`
+<Example code={`
<table class="table">
<thead>
<tr>
</tr>
</tbody>
</table>
-`} />
-
-```html
+`} customMarkup={`
<table class="table">
<thead>
...
</tr>
</tbody>
</table>
-```
+`} />
-<Example showMarkup={false} code={`
+<Example code={`
<table class="table table-dark">
<thead>
<tr>
</tr>
</tbody>
</table>
-`} />
-
-```html
+`} customMarkup={`
<table class="table table-dark">
<thead>
...
</tr>
</tbody>
</table>
-```
+`} />
## How do the variants and accented tables work?
For the accented tables ([striped rows](#striped-rows), [striped columns](#striped-columns), [hoverable rows](#hoverable-rows), and [active tables](#active-tables)), we used some techniques to make these effects work for all our [table variants](#variants):
- We start by setting the background of a table cell with the `--bs-table-bg` custom property. All table variants then set that custom property to colorize the table cells. This way, we don’t get into trouble if semi-transparent colors are used as table backgrounds.
+
- Then we add an inset box shadow on the table cells with `box-shadow: inset 0 0 0 9999px var(--bs-table-bg-state, var(--bs-table-bg-type, var(--bs-table-accent-bg)));` to layer on top of any specified `background-color`. It uses custom cascade to override the `box-shadow`, regardless the CSS specificity. Because we use a huge spread and no blur, the color will be monotone. Since `--bs-table-accent-bg` is set to `transparent` by default, we don’t have a default box shadow.
+
- When either `.table-striped`, `.table-striped-columns`, `.table-hover` or `.table-active` classes are added, either `--bs-table-bg-type` or `--bs-table-bg-state` (by default set to `initial`) are set to a semitransparent color (`--bs-table-striped-bg`, `--bs-table-active-bg` or `--bs-table-hover-bg`) to colorize the background and override default `--bs-table-accent-bg`.
+
- For each table variant, we generate a `--bs-table-accent-bg` color with the highest contrast depending on that color. For example, the accent color for `.table-primary` is darker while `.table-dark` has a lighter accent color.
+
- Text and border colors are generated the same way, and their colors are inherited by default.
Behind the scenes it looks like this:
-<ScssDocs name="table-variant" file="scss/content/_tables.scss" />
+<ScssDocs name="table-variants-loop" file="scss/content/_tables.scss" />
## Table borders
Table cells of `<thead>` are always vertical aligned to the bottom. Table cells in `<tbody>` inherit their alignment from `<table>` and are aligned to the top by default. Use the [vertical align]([[docsref:/utilities/vertical-align]]) classes to re-align where needed.
-<Example showMarkup={false} code={`
+<Example code={`
<div class="table-responsive">
<table class="table align-middle">
<thead>
</tbody>
</table>
</div>
-`} />
-
-```html
+`} customMarkup={`
<div class="table-responsive">
<table class="table align-middle">
<thead>
</tbody>
</table>
</div>
-```
+`} />
## Nesting
Border styles, active styles, and table variants are not inherited by nested tables.
-<Example showMarkup={false} code={`
+<Example code={`
<table class="table table-striped table-bordered">
<thead>
<tr>
</tr>
</tbody>
</table>
-`} />
-
-```html
+`} customMarkup={`
<table class="table table-striped table-bordered">
<thead>
...
...
</tbody>
</table>
-```
+`} />
## How nesting works
Note that if you add `<tr>`s as direct children of a table, those `<tr>` will be wrapped in a `<tbody>` by default, thus making our selectors work as intended.
-## Anatomy
-
-### Table head
-
-Similar to tables and dark tables, use the modifier classes `.table-light` or `.table-dark` to make `<thead>`s appear light or dark gray.
-
-<Example showMarkup={false} code={`
-<table class="table">
- <thead class="table-light">
- <tr>
- <th scope="col">#</th>
- <th scope="col">First</th>
- <th scope="col">Last</th>
- <th scope="col">Handle</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <th scope="row">1</th>
- <td>Mark</td>
- <td>Otto</td>
- <td>@mdo</td>
- </tr>
- <tr>
- <th scope="row">2</th>
- <td>Jacob</td>
- <td>Thornton</td>
- <td>@fat</td>
- </tr>
- <tr>
- <th scope="row">3</th>
- <td>John</td>
- <td>Doe</td>
- <td>@social</td>
- </tr>
- </tbody>
-</table>
-`} />
-
-```html
-<table class="table">
- <thead class="table-light">
- ...
- </thead>
- <tbody>
- ...
- </tbody>
-</table>
-```
-
-<Example showMarkup={false} code={`
-<table class="table">
- <thead class="table-dark">
- <tr>
- <th scope="col">#</th>
- <th scope="col">First</th>
- <th scope="col">Last</th>
- <th scope="col">Handle</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <th scope="row">1</th>
- <td>Mark</td>
- <td>Otto</td>
- <td>@mdo</td>
- </tr>
- <tr>
- <th scope="row">2</th>
- <td>Jacob</td>
- <td>Thornton</td>
- <td>@fat</td>
- </tr>
- <tr>
- <th scope="row">3</th>
- <td>John</td>
- <td>Doe</td>
- <td>@social</td>
- </tr>
- </tbody>
-</table>
-`} />
-
-```html
-<table class="table">
- <thead class="table-dark">
- ...
- </thead>
- <tbody>
- ...
- </tbody>
-</table>
-```
-
-### Table foot
+## Footer
<Example showMarkup={false} code={`
<table class="table">
</table>
```
-### Captions
+## Caption
A `<caption>` functions like a heading for a table. It helps users with screen readers to find a table and understand what it’s about and decide if they want to read it.
Across every breakpoint, use `.table-responsive` for horizontally scrolling tables.
-<Example showMarkup={false} code={`
+<Example code={`
<div class="table-responsive">
<table class="table">
<thead>
</tbody>
</table>
</div>
-`} />
-
-```html
+`} customMarkup={`
<div class="table-responsive">
<table class="table">
...
</table>
</div>
-```
+`} />
### Breakpoint specific
---
title: Color
-description: Bootstrap is supported by an extensive color system that themes our styles and components. This enables more comprehensive customization and extension for any project.
+description: Bootstrap is supported by an extensive color system that powers our revamped theme, components, and color modes. This enables more comprehensive customization and extension for any project.
toc: true
---
import { getData } from '@libs/data'
import { getSequence } from '@libs/utils'
+export const additionalColors = [
+ 'white',
+ 'black',
+]
+
## Colors
-Bootstrap’s color palette has continued to expand and become more nuanced in v5.3.0. We’ve added new variables for `secondary` and `tertiary` text and background colors, plus `{color}-bg-subtle`, `{color}-border-subtle`, and `{color}-text-emphasis` for our theme colors. These new colors are available through Sass and CSS variables (but not our color maps or utility classes) with the express goal of making it easier to customize across multiple colors modes like light and dark. These new variables are globally set on `:root` and are adapted for our new dark color mode while our original theme colors remain unchanged.
+There are 13 shades of 16 colors in Bootstrap's new color system, meaning we have 208 colors to work with when using Bootstrap.
-Colors ending in `-rgb` provide the `red, green, blue` values for use in `rgb()` and `rgba()` color modes. For example, `rgba(var(--bs-secondary-bg-rgb), .5)`.
+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](#theme-colors).
-<Callout type="warning">
-**Heads up!** There’s some potential confusion with our new secondary and tertiary colors, and our existing secondary theme color, as well as our light and dark theme colors. Expect this to be ironed out in v6.
-</Callout>
+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.
-<div class="table-responsive">
- <table class="table table-swatches">
- <thead>
- <tr>
- <th style="width: 340px;">Description</th>
- <th style="width: 200px;" class="ps-0">Swatch</th>
- <th>Variables</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td rowspan="2">
- **Body —** Default foreground (color) and background, including components.
- </td>
- <td class="ps-0">
- <div class="p-3 rounded-2" style="background-color: var(--bs-body-color);"> </div>
- </td>
- <td>
- `--bs-body-color`<br/>`--bs-body-color-rgb`
- </td>
- </tr>
- <tr>
- <td>
- <div class="p-3 rounded-2 border" style="background-color: var(--bs-body-bg);"> </div>
- </td>
- <td>
- `--bs-body-bg`<br/>`--bs-body-bg-rgb`
- </td>
- </tr>
- <tr>
- <td rowspan="2">
- **Secondary —** Use the `color` option for lighter text. Use the `bg` option for dividers and to indicate disabled component states.
- </td>
- <td class="ps-0">
- <div class="p-3 rounded-2" style="background-color: var(--bs-secondary-color);"> </div>
- </td>
- <td>
- `--bs-secondary-color`<br/>`--bs-secondary-color-rgb`
- </td>
- </tr>
- <tr>
- <td>
- <div class="p-3 rounded-2 border" style="background-color: var(--bs-secondary-bg);"> </div>
- </td>
- <td>
- `--bs-secondary-bg`<br/>`--bs-secondary-bg-rgb`
- </td>
- </tr>
- <tr>
- <td rowspan="2">
- **Tertiary —** Use the `color` option for even lighter text. Use the `bg` option to style backgrounds for hover states, accents, and wells.
- </td>
- <td class="ps-0">
- <div class="p-3 rounded-2" style="background-color: var(--bs-tertiary-color);"> </div>
- </td>
- <td>
- `--bs-tertiary-color`<br/>`--bs-tertiary-color-rgb`
- </td>
- </tr>
- <tr>
- <td>
- <div class="p-3 rounded-2 border" style="background-color: var(--bs-tertiary-bg);"> </div>
- </td>
- <td>
- `--bs-tertiary-bg`<br/>`--bs-tertiary-bg-rgb`
- </td>
- </tr>
- <tr>
- <td>
- **Emphasis —** For higher contrast text. Not applicable for backgrounds.
- </td>
- <td class="ps-0">
- <div class="p-3 rounded-2" style="background-color: var(--bs-emphasis-color);"> </div>
- </td>
- <td>
- `--bs-emphasis-color`<br/>`--bs-emphasis-color-rgb`
- </td>
- </tr>
- <tr>
- <td>
- **Border —** For component borders, dividers, and rules. Use `--bs-border-color-translucent` to blend with backgrounds with an `rgba()` value.
- </td>
- <td class="ps-0">
- <div class="p-3 rounded-2" style="background-color: var(--bs-border-color);"> </div>
- </td>
- <td>
- `--bs-border-color`<br/>`--bs-border-color-rgb`
- </td>
- </tr>
- <tr>
- <td rowspan="4">
- **Primary —** Main theme color, used for hyperlinks, focus styles, and component and form active states.
- </td>
- <td class="ps-0">
- <div class="p-3 rounded-2 bg-primary"> </div>
- </td>
- <td>
- `--bs-primary`<br/>`--bs-primary-rgb`
- </td>
- </tr>
- <tr>
- <td>
- <div class="p-3 rounded-2" style="background-color: var(--bs-primary-bg-subtle)"> </div>
- </td>
- <td>
- `--bs-primary-bg-subtle`
- </td>
- </tr>
- <tr>
- <td>
- <div class="p-3 rounded-2" style="border: 5px var(--bs-primary-border-subtle) solid"> </div>
- </td>
- <td>
- `--bs-primary-border-subtle`
- </td>
- </tr>
- <tr>
- <td>
- <div class="py-3 fw-bold h5" style="color: var(--bs-primary-text-emphasis)">Text</div>
- </td>
- <td>
- `--bs-primary-text-emphasis`
- </td>
- </tr>
- <tr>
- <td rowspan="4">
- **Success —** Theme color used for positive or successful actions and information.
- </td>
- <td class="ps-0">
- <div class="p-3 rounded-2 bg-success"> </div>
- </td>
- <td>
- `--bs-success`<br/>`--bs-success-rgb`
- </td>
- </tr>
- <tr>
- <td>
- <div class="p-3 rounded-2" style="background-color: var(--bs-success-bg-subtle)"> </div>
- </td>
- <td>
- `--bs-success-bg-subtle`
- </td>
- </tr>
- <tr>
- <td>
- <div class="p-3 rounded-2" style="border: 5px var(--bs-success-border-subtle) solid"> </div>
- </td>
- <td>
- `--bs-success-border-subtle`
- </td>
- </tr>
- <tr>
- <td>
- <div class="py-3 fw-bold h5" style="color: var(--bs-success-text-emphasis)">Text</div>
- </td>
- <td>
- `--bs-success-text-emphasis`
- </td>
- </tr>
- <tr>
- <td rowspan="4">
- **Danger —** Theme color used for errors and dangerous actions.
- </td>
- <td class="ps-0">
- <div class="p-3 rounded-2 bg-danger"> </div>
- </td>
- <td>
- `--bs-danger`<br/>`--bs-danger-rgb`
- </td>
- </tr>
- <tr>
- <td>
- <div class="p-3 rounded-2" style="background-color: var(--bs-danger-bg-subtle)"> </div>
- </td>
- <td>
- `--bs-danger-bg-subtle`
- </td>
- </tr>
- <tr>
- <td>
- <div class="p-3 rounded-2" style="border: 5px var(--bs-danger-border-subtle) solid"> </div>
- </td>
- <td>
- `--bs-danger-border-subtle`
- </td>
- </tr>
- <tr>
- <td>
- <div class="py-3 fw-bold h5" style="color: var(--bs-danger-text-emphasis)">Text</div>
- </td>
- <td>
- `--bs-danger-text-emphasis`
- </td>
- </tr>
- <tr>
- <td rowspan="4">
- **Warning —** Theme color used for non-destructive warning messages.
- </td>
- <td class="ps-0">
- <div class="p-3 rounded-2 bg-warning"> </div>
- </td>
- <td>
- `--bs-warning`<br/>`--bs-warning-rgb`
- </td>
- </tr>
- <tr>
- <td>
- <div class="p-3 rounded-2" style="background-color: var(--bs-warning-bg-subtle)"> </div>
- </td>
- <td>
- `--bs-warning-bg-subtle`
- </td>
- </tr>
- <tr>
- <td>
- <div class="p-3 rounded-2" style="border: 5px var(--bs-warning-border-subtle) solid"> </div>
- </td>
- <td>
- `--bs-warning-border-subtle`
- </td>
- </tr>
- <tr>
- <td>
- <div class="py-3 fw-bold h5" style="color: var(--bs-warning-text-emphasis)">Text</div>
- </td>
- <td>
- `--bs-warning-text-emphasis`
- </td>
- </tr>
- <tr>
- <td rowspan="4">
- **Info —** Theme color used for neutral and informative content.
- </td>
- <td class="ps-0">
- <div class="p-3 rounded-2 bg-info"> </div>
- </td>
- <td>
- `--bs-info`<br/>`--bs-info-rgb`
- </td>
- </tr>
- <tr>
- <td>
- <div class="p-3 rounded-2" style="background-color: var(--bs-info-bg-subtle)"> </div>
- </td>
- <td>
- `--bs-info-bg-subtle`
- </td>
- </tr>
- <tr>
- <td>
- <div class="p-3 rounded-2" style="border: 5px var(--bs-info-border-subtle) solid"> </div>
- </td>
- <td>
- `--bs-info-border-subtle`
- </td>
- </tr>
- <tr>
- <td>
- <div class="py-3 fw-bold h5" style="color: var(--bs-info-text-emphasis)">Text</div>
- </td>
- <td>
- `--bs-info-text-emphasis`
- </td>
- </tr>
- <tr>
- <td rowspan="4">
- **Light —** Additional theme option for less contrasting colors.
- </td>
- <td class="ps-0">
- <div class="p-3 rounded-2 bg-light"> </div>
- </td>
- <td>
- `--bs-light`<br/>`--bs-light-rgb`
- </td>
- </tr>
- <tr>
- <td>
- <div class="p-3 rounded-2" style="background-color: var(--bs-light-bg-subtle)"> </div>
- </td>
- <td>
- `--bs-light-bg-subtle`
- </td>
- </tr>
- <tr>
- <td>
- <div class="p-3 rounded-2" style="border: 5px var(--bs-light-border-subtle) solid"> </div>
- </td>
- <td>
- `--bs-light-border-subtle`
- </td>
- </tr>
- <tr>
- <td>
- <div class="py-3 fw-bold h5" style="color: var(--bs-light-text-emphasis)">Text</div>
- </td>
- <td>
- `--bs-light-text-emphasis`
- </td>
- </tr>
- <tr>
- <td rowspan="4">
- **Dark —** Additional theme option for higher contrasting colors.
- </td>
- <td class="ps-0">
- <div class="p-3 rounded-2 bg-dark"> </div>
- </td>
- <td>
- `--bs-dark`<br/>`--bs-dark-rgb`
- </td>
- </tr>
- <tr>
- <td>
- <div class="p-3 rounded-2" style="background-color: var(--bs-dark-bg-subtle)"> </div>
- </td>
- <td>
- `--bs-dark-bg-subtle`
- </td>
- </tr>
- <tr>
- <td>
- <div class="p-3 rounded-2" style="border: 5px var(--bs-dark-border-subtle) solid"> </div>
- </td>
- <td>
- `--bs-dark-border-subtle`
- </td>
- </tr>
- <tr>
- <td>
- <div class="py-3 fw-bold h5" style="color: var(--bs-dark-text-emphasis)">Text</div>
- </td>
- <td>
- `--bs-dark-text-emphasis`
- </td>
- </tr>
- </tbody>
- </table>
+<div class="grid gap-0" style={{gridTemplateColumns: 'repeat(13, 1fr)', gap: '4px', minWidth: '0'}}>
+ {getData('colors').map((color) => {
+ return (
+ <div class="d-contents grid-full">
+ <h5 class="d-block text-capitalize grid-full">{color.name.replace('-', ' ')}</h5>
+
+ {["025", "050", ...getSequence(100, 900, 100), 950, 975].map((value) => {
+ return (
+ <div class="mb-3 font-monospace small">
+ <Swatch bg={`${color.name}-${value}`} size="medium" />
+ <div class="text-center color-3">{value}</div>
+ </div>
+ )
+ })}
+ </div>
+ )
+ })}
+
+ <div class="d-contents grid-full">
+ <h5 class="d-block text-capitalize grid-full">Additional</h5>
+ {additionalColors.map((color) => {
+ return (
+ <div class="mb-3 font-monospace small">
+ <Swatch bg={`${color}`} size="medium" />
+ <div class="text-center color-3">{color}</div>
+ </div>
+ )
+ })}
+ </div>
</div>
+<Callout>
+ @mdo-do: Move this content to Theme page most likely. Replace with how to modify color variables.
+</Callout>
+
### Using the new colors
These new colors are accessible via CSS variables and utility classes—like `--bs-primary-bg-subtle` and `.bg-primary-subtle`—allowing you to compose your own CSS rules with the variables, or to quickly apply styles via classes. The utilities are built with the color’s associated CSS variables, and since we customize those CSS variables for dark mode, they are also adaptive to color mode by default.
Check out [our Sass maps and loops docs]([[docsref:/customize/sass#maps-and-loops]]) for how to modify these colors.
-### All colors
-
-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](#theme-colors).
-
-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.
-
-<div class="row font-monospace">
- {getData('colors').map((color) => {
- if ((color.name !== "white") && (color.name !== "gray") && (color.name !== "gray-dark")) {
- return (
- <div class="col-md-4 mb-3">
- <div class={`p-3 mb-2 position-relative swatch-${color.name}`}>
- <strong class="d-block">${color.name}</strong>
- {color.hex}
- </div>
-
- {getSequence(100, 900, 100).map((value) => {
- return (
- <div class={`p-3 bd-${color.name}-${value}`}>${color.name}-{value}</div>
- )
- })}
- </div>
- )
- }
- })}
-
- <div class="col-md-4 mb-3">
- <div class="p-3 mb-2 position-relative swatch-gray-500"><strong class="d-block">$gray-500</strong>#adb5bd</div>
- {getData('grays').map((gray) => {
- return (
- <div class={`p-3 bd-gray-${gray.name}`}>$gray-{gray.name}</div>
- )
- })}
- </div>
-
- <div class="col-md-4 mb-3">
- <div class="p-3 mb-2 bd-black text-white">
- <strong class="d-block">$black</strong>
- #000
- </div>
- <div class="p-3 mb-2 bd-white border">
- <strong class="d-block">$white</strong>
- #fff
- </div>
- </div>
-</div>
-
### Notes on Sass
Sass cannot programmatically generate variables, so we manually created variables for every tint and shade ourselves. We specify the midpoint value (e.g., `$blue-500`) and use custom color functions to tint (lighten) or shade (darken) our colors via Sass’s `mix()` color function.
- `$colors` lists all our available base (`500`) colors
- `$theme-colors` lists all semantically named theme colors (shown below)
-- `$grays` lists all tints and shades of gray
Within `scss/_variables.scss`, you’ll find Bootstrap’s color variables and Sass map. Here’s an example of the `$colors` Sass map:
---
title: Customize
-description: Learn how to theme, customize, and extend Bootstrap with Sass, a boatload of global options, an expansive color system, and more.
+description: Learn how Bootstrap's colors power our design system theme. Customize and extend Bootstrap with Sass, a boatload of global options, and plenty of global and component-specific CSS variables.
toc: false
aliases: "/docs/[[config:docs_version]]/customize/"
sections:
- title: Options
description: Customize Bootstrap with built-in variables to easily toggle global CSS preferences.
- title: Color
- description: Learn about and customize the color systems that support the entire toolkit.
+ description: Bootstrap includes 11 shades of 14 colors in our color system that can be used to power our theme.
+ - title: Theme
+ description: Semantic colors, typography, settings, and more that can be customized to fit your brand.
- title: Color modes
- description: Explore our default light mode and the new dark mode, or create custom color modes yourself.
+ description: Build in light mode, dark mode, or both.
- title: Components
description: Learn how we build nearly all our components responsively and with base and modifier classes.
- title: CSS variables
As you familiarize yourself with Bootstrap, continue exploring this section for more details on how to utilize our global options, making use of and changing our color system, how we build our components, how to use our growing list of CSS custom properties, and how to optimize your code when building with Bootstrap.
+## Sass vs CSS
+
+When Bootstrap 5 first introduced CSS variables, the Sass vs CSS variables setup was a little confusing and somewhat limited. As such, the relationship between Sass and CSS variables was very unclear. In Bootstrap 6, we've clarified that—here's how the two interact.
+
+- At a high level, Sass is a way to manage [global configuration options]([[docsref:/customize/options]]) and generate CSS for our utilities, components, typography, custom properties (aka CSS variables) and more.
+- We consider CSS variables to be the **first-class customization layer** for our users.
+- Sass variables are available for nearly every component—like the new `$check-*` variables for checkboxes. These Sass variables are then consumed by CSS variables on the relevant selector (e.g., `.check` with `--bs-check-bg: #{$check-bg}`) and applied through various properties.
+- CSS variables get their values from Sass variables, or CSS variables, depending on the context.
+- Sass helps us generate CSS variables, too. Think theme and config values, but across components, Sass is consuming CSS variables. This gives you two, clearer avenues for customization.
+
+With that in mind, you can customize Bootstrap 6 via CSS or Sass, both of which are easier than ever thanks to a revamped color system and theme configuration.
+
## CSPs and embedded SVGs
Several Bootstrap components include embedded SVGs in our CSS to style components consistently and easily across browsers and devices. **For organizations with more strict <abbr title="Content Security Policy">CSP</abbr> configurations**, we’ve documented all instances of our embedded SVGs (all of which are applied via `background-image`) so you can more thoroughly review your options.
--- /dev/null
+---
+title: Theme
+description: The Bootstrap theme is a set of semantically named colors that are used to style our components, utilities, and more. The theme is configurable, responds to color modes, and can be consumed via Sass or CSS.
+toc: true
+---
+
+import { getData } from '@libs/data'
+
+export const themeTokens = [
+ 'base',
+ 'text',
+ 'bg',
+ 'bg-subtle',
+ 'bg-muted',
+ 'border',
+ 'focus-ring',
+ 'contrast'
+]
+
+export const themeBgs = [
+ 'null',
+ '1',
+ '2',
+ '3',
+ 'white',
+ 'black',
+ 'transparent',
+ 'inherit',
+]
+
+export const themeFgs = [
+ 'null',
+ '1',
+ '2',
+ '3',
+ 'white',
+ 'black',
+ 'transparent',
+ 'inherit',
+]
+
+## How it works
+
+Theme colors are defined in the `$new-theme-colors` Sass map. This map is used to generate our theme color values. You'll find these values in the `_theme.scss` file. These are where we define our design tokens for Bootstrap, across both light and dark color modes.
+
+Theme colors include the following semantic colors:
+
+<BsTable>
+| Theme color | Default value | Description |
+| --- | --- | --- |
+| `primary` | <Swatch size="inline" bg="blue-500" /> `var(--bs-blue-500)`| Main brand color for primary actions |
+| `accent` | <Swatch size="inline" bg="indigo-500" /> `var(--bs-indigo-500)` | Secondary brand color (new in v6) |
+| `success` | <Swatch size="inline" bg="green-500" /> `var(--bs-green-500)` | Positive actions and successful states |
+| `danger` | <Swatch size="inline" bg="red-500" /> `var(--bs-red-500)` | Destructive actions and error states |
+| `warning` | <Swatch size="inline" bg="yellow-500" /> `var(--bs-yellow-500)` | Cautionary messages and warning states |
+| `info` | <Swatch size="inline" bg="cyan-500" /> `var(--bs-cyan-500)` | Informational messages and neutral states |
+| `secondary` | <Swatch size="inline" bg="gray-300" /> `var(--bs-gray-300)` | Less prominent secondary actions |
+</BsTable>
+
+And within each semantic theme color, you'll find the following keys, most of which are color-mode adaptive:
+
+<BsTable>
+| Theme token | Description |
+| --- | --- |
+| `base` | The default color value for the semantic color |
+| `text` | Accessible text color (against body, plus `subtle` and `muted` color tokens) |
+| `bg` | For solid colored backgrounds with high contrast |
+| `bg-subtle` | Lowest contrast backgrounds, usually paired with `text` key for text color |
+| `bg-muted` | Lower contrast backgrounds, often used for disabled states |
+| `border` | Borders and dividers |
+| `focus-ring` | For visible focus indicators and outline styles |
+| `contrast` | Text color that needs to be readable on the `base` and `bg` colors |
+</BsTable>
+
+## Theme colors
+
+Every token is available as a CSS variable, and most are then consumed by our utilities and components. So for the `primary` color, you have the following colors:
+
+<div class="grid gap-0" style={{gridTemplateColumns: 'repeat(8, 1fr)', gap: '8px', minWidth: '0'}}>
+ {getData('theme-colors').map((color) => {
+ return (
+ <div class="d-contents grid-full">
+ <h6 class="d-block text-capitalize grid-full">{color.title}</h6>
+ {themeTokens.map((token) => (
+ <div class="mb-3 font-monospace">
+ <Swatch bg={`${color.name}-${token}`} size="medium" />
+ <div class="text-center small color-3">{token}</div>
+ </div>
+ ))}
+ </div>
+ )
+ })}
+</div>
+
+## Theme `fg` and `bg`
+
+Theme foreground and background tokens are defined in their respective `$theme-fgs` and `$theme-bgs` Sass maps. These maps are used to generate color mode adaptive `color` and `background-color` values that are then consumed by our utilities and components. You'll find these values in the `_theme.scss` file.
+
+Theme backgrounds include the following semantic colors:
+
+<BsTable>
+| Background | Default value | Description |
+| --- | --- | --- |
+| `null` | <Swatch bg="bg" size="inline" /> `var(--bs-white)` | Default background color |
+| `1` | <Swatch bg="bg-1" size="inline" /> `var(--bs-gray-025)` | Lowest contrast background color |
+| `2` | <Swatch bg="bg-2" size="inline" /> `var(--bs-gray-050)` | Lower contrast background color |
+| `3` | <Swatch bg="bg-3" size="inline" /> `var(--bs-gray-100)` | Medium contrast background color, typically used for disabled states |
+| `white` | <Swatch bg="bg-white" size="inline" /> `var(--bs-white)` | Pure white background color |
+| `black` | <Swatch bg="bg-black" size="inline" /> `var(--bs-black)` | Pure black background color |
+| `transparent` | <Swatch bg="bg-transparent" size="inline" /> `transparent` | Transparent background color |
+| `inherit` |`inherit` | Inherited background color |
+</BsTable>
+
+<BsTable>
+| Foreground | Default value | Description |
+| --- | --- | --- |
+| `null` | <Swatch bg="fg" size="inline" /> `var(--bs-gray-900)` | Default foreground color |
+| `1` | <Swatch bg="fg-1" size="inline" /> `var(--bs-gray-800)` | Lowest contrast foreground color |
+| `2` | <Swatch bg="fg-2" size="inline" /> `var(--bs-gray-700)` | Lower contrast foreground color |
+| `3` | <Swatch bg="fg-3" size="inline" /> `var(--bs-gray-600)` | Medium contrast foreground color |
+| `white` | <Swatch bg="fg-white" size="inline" /> `var(--bs-white)` | Pure white foreground color |
+| `black` | <Swatch bg="fg-black" size="inline" /> `var(--bs-black)` | Pure black foreground color |
+| `transparent` | <Swatch bg="fg-transparent" size="inline" /> `transparent` | Transparent foreground color |
+| `inherit` | `inherit` | Inherited foreground color |
+</BsTable>
+
+### Suggested pairings
+
+Not all foreground colors are appropriate for all background colors. To maintain color contrast for accessibility, here are some recommended pairings.
+
+<div class="d-flex gap-3 w-100">
+ <div class="d-flex flex-column gap-2 w-100">
+ <Swatch bg="bg" fg="fg" size="large" contrast="15.71" contrastDark="14.59">fg on bg</Swatch>
+ <Swatch bg="bg" fg="fg-1" size="large" contrast="12.50" contrastDark="10.77">fg-1 on bg</Swatch>
+ <Swatch bg="bg" fg="fg-2" size="large" contrast="9.54" contrastDark="7.76">fg-2 on bg</Swatch>
+ <Swatch bg="bg" fg="fg-3" size="large" contrast="7.01" contrastDark="6.32">fg-3 on bg</Swatch>
+ </div>
+ <div class="d-flex flex-column gap-2 w-100">
+ <Swatch bg="bg-1" fg="fg" size="large">fg on bg-1</Swatch>
+ <Swatch bg="bg-1" fg="fg-1" size="large">fg-1 on bg-1</Swatch>
+ <Swatch bg="bg-1" fg="fg-2" size="large">fg-2 on bg-1</Swatch>
+ <Swatch bg="bg-1" fg="fg-3" size="large">fg-3 on bg-1</Swatch>
+ </div>
+ <div class="d-flex flex-column gap-2 w-100">
+ <Swatch bg="bg-2" fg="fg" size="large">fg on bg-2</Swatch>
+ <Swatch bg="bg-2" fg="fg-1" size="large">fg-1 on bg-2</Swatch>
+ <Swatch bg="bg-2" fg="fg-2" size="large">fg-2 on bg-2</Swatch>
+ <Swatch bg="bg-2" fg="fg-3" size="large">fg-3 on bg-2</Swatch>
+ </div>
+ <div class="d-flex flex-column gap-2 w-100">
+ <Swatch bg="bg-3" fg="fg" size="large">fg on bg-3</Swatch>
+ <Swatch bg="bg-3" fg="fg-1" size="large">fg-1 on bg-3</Swatch>
+ <Swatch bg="bg-3" fg="fg-2" size="large">fg-2 on bg-3</Swatch>
+ <Swatch bg="bg-3" fg="fg-3" size="large">fg-3 on bg-3</Swatch>
+ </div>
+</div>
+
+## Theme foregrounds
+
+Theme foregrounds are defined in the `$theme-fgs` Sass map. This map is used to generate our theme foreground values. You'll find these values in the `_theme.scss` file. These are where we define our design tokens for Bootstrap, across both light and dark color modes.
+
+Theme foregrounds include the following semantic colors:
+
+<BsTable>
+| Foreground | Default value | Description |
+| --- | --- | --- |
+| `null` | `var(--bs-gray-900)` | Default foreground color |
+| `1` | `var(--bs-gray-800)` | Lowest contrast foreground color |
+| `2` | `var(--bs-gray-700)` | Lower contrast foreground color |
+| `3` | `var(--bs-gray-600)` | Medium contrast foreground color |
+</BsTable>
+
+<div class="grid gap-0" style={{gridTemplateColumns: 'repeat(8, 1fr)', gap: '8px', minWidth: '0'}}>
+ {themeFgs.map((color) => {
+ return (
+ <div>
+ <Swatch color={`fg-${color}`} size="large" />
+ <div class="text-center color-3">{color}</div>
+ </div>
+ )
+ })}
+</div>
+
+## Theme Sass map
+
+We use a large, nested Sass map to generate our theme color values.
+
+<ScssDocs name="theme-colors" file="scss/_theme.scss" />
+
+## CSS variables
+
+CSS variables are generated from the `$new-theme-colors` Sass map at the `:root` level inside `_root.scss` using a Sass loop.
+
+<ScssDocs name="root-theme-variables" file="scss/_root.scss" />
toc: true
---
+import { getData } from '@libs/data'
+
**Trialing new components with the following rules:**
- New components are purely components, they don't assume layout of any kind.
<label for="checkLabel">Example new checkbox</label>
</b-checkgroup>`} />
+## Theme colors
+
+Modify the appearance of checked checkboxes by adding the `.checked-{color}` class to the `.check` element. This will set the checked background and border color to the theme color.
+
+<Example class="d-flex flex-column gap-2" code={getData('theme-colors').map((themeColor) => `<b-checkgroup>
+ <div class="check checked-${themeColor.name}">
+ <input type="checkbox" id="check${themeColor.name}" checked />
+ <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'>
+ <path class="checked" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/>
+ <path class="indeterminate" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/>
+ </svg>
+ </div>
+ <label for="check${themeColor.name}">Example ${themeColor.name} checkbox</label>
+ </b-checkgroup>`)} />
+
## Description
With this layout approach, you can easily add a description or other content after the label. Here we use another custom element, `<b-vstack>`, to stack the label and description.
toc: true
---
+import { getData } from '@libs/data'
+
## Basic radio
Similar to checkboxes, radios are styled with the `.radio` class. However, there's no custom SVG as we use a Unicode character for the checked state.
<Example code={`<b-radiogroup>
<input type="radio" id="radioLabel" class="radio" />
<label for="radioLabel">Example new radio</label>
- </b-radiogroup>
- `} />
+ </b-radiogroup>`} />
+
+## Theme colors
+
+Modify the appearance of checked checkboxes by adding the `.checked-{color}` class to the `.radio` element. This will set the checked background and border color to the theme color.
+
+<Example class="d-flex flex-column gap-2" code={getData('theme-colors').map((themeColor) => `<b-radiogroup>
+ <input type="radio" id="radio${themeColor.name}" class="radio checked-${themeColor.name}" checked />
+ <label for="radio${themeColor.name}">Example ${themeColor.name} radio</label>
+ </b-radiogroup>`)} />
## Description
| --- | --- | --- | --- |
| [`property`](#property) | **Required** | – | Name of the property, this can be a string or an array of strings (e.g., horizontal paddings or margins). |
| [`values`](#values) | **Required** | – | List of values, or a map if you don't want the class name to be the same as the value. If `null` is used as map key, `class` is not prepended to the class name. |
+| [`selector`](#selector) | Optional | `class` | Type of CSS selector in the generated CSS ruleset. Can be `class`, `attr-starts`, or `attr-includes`. |
| [`class`](#class) | Optional | null | Name of the generated class. If not provided and `property` is an array of strings, `class` will default to the first element of the `property` array. If not provided and `property` is a string, the `values` keys are used for the `class` names. |
| [`css-var`](#css-variable-utilities) | Optional | `false` | Boolean to generate CSS variables instead of CSS rules. |
| [`css-variable-name`](#css-variable-utilities) | Optional | null | Custom un-prefixed name for the CSS variable inside the ruleset. |
## API explained
-All utility variables are added to the `$utilities` variable within our `_utilities.scss` stylesheet. Each group of utilities looks something like this:
+All utility variables are added to the `$utilities` variable within our `_utilities.scss` stylesheet, which is a giant, nested Sass map. Each group of utility classes are generated from a block that looks something like this:
```scss
$utilities: (
.opacity-100 { opacity: 1; }
```
-### Property
+### `property`
-The required `property` key must be set for any utility, and it must contain a valid CSS property. This property is used in the generated utility’s ruleset. When the `class` key is omitted, it also serves as the default class name. Consider the `text-decoration` utility:
+<div class="badge fs-6 bg-accent mb-3">Required</div>
+
+The `property` key must be set for any utility, and it must contain a valid CSS property. This property is used in the generated utility’s ruleset. When the `class` key is omitted, it also serves as the default class name. Consider the `text-decoration` utility:
```scss
$utilities: (
.text-decoration-line-through { text-decoration: line-through; }
```
-### Values
+### `values`
+
+<div class="badge fs-6 bg-accent mb-3">Required</div>
Use the `values` key to specify which values for the specified `property` should be used in the generated class names and rules. Can be a list or map (set in the utilities or in a Sass variable).
values: $position-values
```
-### Class
+### `selector`
+
+<BsTable>
+| Option | Description |
+| --- | --- |
+| No selector | Defaults to `"class"` |
+| `"class"` | Matches elements with a class that matches the specified value |
+| `"attr-starts"` | Matches elements with a class that starts with a string |
+| `"attr-includes"` | Matches elements with a class that includes a string |
+</BsTable>
+
+Use the `selector` option to change the CSS selector used in the generated CSS ruleset. The default option is to generate a class selector. When using an attribute selector—either `attr-starts` or `attr-includes`—**the `class` option is required**. We use these internally to simplify the construction of other utilities.
+
+For attribute selectors, you'll most likely want the `attr-includes` as the starting attribute selector in CSS applies to the entire string of classes in an attribute's value. For example, `[class^="name"]` would not match `class="example name"`.
+
+As an example, to change from `.ratio-*` to `[class*="ratio-"]`:
+
+```scss
+$utilities: (
+ // Create an attribute selector utility
+ "aspect-ratio-attr": (
+ selector: "attr-includes",
+ class: "ratio-",
+ property: aspect-ratio,
+ values: var(--#{$prefix}ratio),
+ ),
+ // Create a CSS variable utility that matches the attribute selector utility
+ "aspect-ratio": (
+ property: --#{$prefix}ratio,
+ class: ratio,
+ values: $aspect-ratios
+ ),
+);
+```
+
+Which outputs the following:
+
+```css
+[class*="ratio-"] { aspect-ratio: var(--bs-ratio); }
+.ratio-auto { --bs-ratio: auto; }
+.ratio-1x1 { --bs-ratio: 1 / 1; }
+.ratio-4x3 { --bs-ratio: 4 / 3; }
+.ratio-16x9 { --bs-ratio: 16 / 9; }
+.ratio-21x9 { --bs-ratio: 21 / 9; }
+```
+
+### `class`
Use the `class` option to change the class prefix used in the compiled CSS. For example, to change from `.opacity-*` to `.o-*`:
</Callout>
<Example code={[
- ...getData('theme-colors').map((themeColor) => `<div class="p-3 mb-2 bg-${themeColor.name} ${themeColor.contrast_color ? `text-${themeColor.contrast_color}` : `text-white`}">.bg-${themeColor.name}</div>
+ ...getData('theme-colors').map((themeColor) => `<div class="p-3 mb-2 bg-${themeColor.name} text-white">.bg-${themeColor.name}</div>
<div class="p-3 mb-2 bg-${themeColor.name}-subtle text-${themeColor.name}-emphasis">.bg-${themeColor.name}-subtle</div>`),
`<div class="p-3 mb-2 bg-body-secondary">.bg-body-secondary</div>
<div class="p-3 mb-2 bg-body-tertiary">.bg-body-tertiary</div>
{getData('theme-colors').map((themeColor) => {
return (
- <div class={`p-3 mb-2 bg-${themeColor.name} bg-gradient${themeColor.contrast_color ? (' text-' + themeColor.contrast_color) : ' text-white'}`}>.bg-{themeColor.name}.bg-gradient</div>
+ <div class={`p-3 mb-2 bg-${themeColor.name} bg-gradient text-white`}>.bg-{themeColor.name}.bg-gradient</div>
)
})}
<div class="p-3 mb-2 bg-black bg-gradient text-white">.bg-black.bg-gradient</div>
{/*<ScssDocs name="gray-colors-map" file="scss/_variables.scss" />*/}
-RGB colors are generated from a separate Sass map:
-
-<ScssDocs name="theme-colors-rgb" file="scss/_maps.scss" />
-
-Background color opacities build on that with their own map that’s consumed by the utilities API:
-
-<ScssDocs name="utilities-bg-colors" file="scss/_maps.scss" />
-
-Color mode background colors are also available as a Sass map:
-
-<ScssDocs name="theme-bg-subtle-map" file="scss/_maps.scss" />
-
-<ScssDocs name="theme-bg-subtle-dark-map" file="scss/_maps.scss" />
-
### Sass mixins
**No mixins are used to generate our background utilities**, but we do have some additional mixins for other situations where you’d like to create your own gradients.
{/* <ScssDocs name="theme-border-subtle-dark-variables" file="scss/_variables-dark.scss" /> */}
-### Sass maps
-
-Color mode adaptive border colors are also available as a Sass map:
-
-<ScssDocs name="theme-border-subtle-map" file="scss/_maps.scss" />
-
-<ScssDocs name="theme-border-subtle-dark-map" file="scss/_maps.scss" />
-
### Sass mixins
<ScssDocs name="border-radius-mixins" file="scss/mixins/_border-radius.scss" />
</Callout>
<Example code={[
- ...getData('theme-colors').map((themeColor) => `<p class="text-${themeColor.name}${themeColor.contrast_color ? ` bg-${themeColor.contrast_color}` : ``}">.text-${themeColor.name}</p>
+ ...getData('theme-colors').map((themeColor) => `<p class="text-${themeColor.name}">.text-${themeColor.name}</p>
<p class="text-${themeColor.name}-emphasis">.text-${themeColor.name}-emphasis</p>`),
`
<p class="text-body">.text-body</p>
Most `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="theme-color-variables" file="scss/_variables.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="theme-text-map" file="scss/_maps.scss" />
-
-Variables for setting colors in `.text-*-emphasis` utilities in light and dark mode:
-
-{/* <ScssDocs name="theme-text-variables" file="scss/_variables.scss" /> */}
-
-{/* <ScssDocs name="theme-text-dark-variables" file="scss/_variables-dark.scss" /> */}
-
### Sass maps
Theme colors are then put into a Sass map so we can loop over them to generate our utilities, component modifiers, and more.
{/*<ScssDocs name="gray-colors-map" file="scss/_variables.scss" />*/}
-RGB colors are generated from a separate Sass map:
-
-<ScssDocs name="theme-colors-rgb" file="scss/_maps.scss" />
-
-Color opacities build on that with their own map that’s consumed by the utilities API:
-
-<ScssDocs name="utilities-text-colors" file="scss/_maps.scss" />
-
-Color mode adaptive text colors are also available as a Sass map:
-
-<ScssDocs name="theme-text-map" file="scss/_maps.scss" />
-
-<ScssDocs name="theme-text-dark-map" file="scss/_maps.scss" />
-
### Sass utilities API
Color utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]([[docsref:/utilities/api#using-the-api]])
<ScssDocs name="font-sizes" file="scss/_variables.scss" />
-<ScssDocs name="theme-text-map" file="scss/_maps.scss" />
-
### Sass utilities API
Font and text utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]([[docsref:/utilities/api#using-the-api]])
<div class="bd-content ps-lg-2">
{
frontmatter.sections && (
- <div class="grid mb-5">
+ <div class="grid grid-cols-3 mb-5">
{frontmatter.sections.map((section) => (
- <div class="col-md-6">
- <a
- class="d-block text-decoration-none"
- href={getVersionedDocsPath(
- `${parentDirectory ? parentDirectory + '/' : ''}${getSlug(section.title)}/`
- )}
- >
- <strong class="d-block h5 mb-0">{section.title}</strong>
- <span class="text-secondary">{section.description}</span>
- </a>
- </div>
+ <a
+ class="d-block text-decoration-none"
+ href={getVersionedDocsPath(
+ `${parentDirectory ? parentDirectory + '/' : ''}${getSlug(section.title)}/`
+ )}
+ >
+ <strong class="d-block h5 mb-0">{section.title}</strong>
+ <span class="text-secondary">{section.description}</span>
+ </a>
))}
</div>
)
import fs from 'node:fs'
import yaml from 'js-yaml'
import { z } from 'zod'
-import {
- zHexColor,
- zLanguageCode,
- zNamedHexColors,
- zPxSizeOrEmpty,
- zVersionMajorMinor,
- zVersionSemver
-} from './validation'
+import { zLanguageCode, zPxSizeOrEmpty, zVersionMajorMinor, zVersionSemver } from './validation'
import { capitalizeFirstLetter } from './utils'
// An object containing all the data types and their associated schema. The key should match the name of the data file
container: zPxSizeOrEmpty
})
.array(),
- colors: zNamedHexColors(13),
+ colors: z
+ .object({
+ name: z.string()
+ })
+ .array(),
'core-team': z
.object({
name: z.string(),
.array()
})
.array(),
- grays: zNamedHexColors(9),
icons: z.object({
preferred: z
.object({
.array(),
'theme-colors': z
.object({
- name: z.string(),
- hex: zHexColor,
- contrast_color: z.union([z.literal('dark'), z.literal('white')]).optional()
+ name: z.string()
})
.array()
.transform((val) => {
const optionsWithDefaults = Object.assign(
{},
{
- background: getData('grays')[5].hex,
- color: getData('grays')[2].hex,
+ background: '#adb5bd',
+ color: '#e9ecef',
height: '180',
markup: 'svg',
title: 'Placeholder',
+@use "../../../scss/config" as *;
@use "../../../scss/variables" as *;
@use "../../../scss/mixins/transition" as *;
.anchor-link {
padding: 0 .175rem;
font-weight: 400;
- color: rgba($link-color, .5);
+ color: color-mix(in srgb, var(--#{$prefix}link-color), transparent .5);
text-decoration: none;
opacity: 0;
@include transition(color .15s ease-in-out, opacity .15s ease-in-out);
&:hover,
:hover > &,
:target > & {
- color: $link-color;
+ color: var(--#{$prefix}link-color);
text-decoration: none;
opacity: 1;
}
// Docs color palette classes
//
-@each $color, $value in map.merge($colors, ("gray-500": $gray-500)) {
- .swatch-#{$color} {
- color: color-contrast($value);
- background-color: #{$value};
-
- &::after {
- $contrast-ratio: "#{contrast-ratio($value, color-contrast($value))}";
- $against-white: "#{contrast-ratio($value, $white)}";
- $against-black: "#{contrast-ratio($value, $black)}";
- position: absolute;
- top: 1rem;
- right: 1rem;
- padding-left: 1rem;
- font-size: .75rem;
- line-height: 1.35;
- white-space: pre;
- content:
- string.slice($contrast-ratio, 1, 4) "\A"
- string.slice($against-white, 1, 4) "\A"
- string.slice($against-black, 1, 4);
- background-color: $value;
- background-image:
- linear-gradient(
- to bottom,
- transparent .25rem,
- color-contrast($value) .25rem .75rem,
- transparent .75rem 1.25rem,
- $white 1.25rem 1.75rem,
- transparent 1.75rem 2.25rem,
- $black 2.25rem 2.75rem,
- transparent 2.75rem
- );
- background-repeat: no-repeat;
- background-size: .5rem 100%;
- }
- }
-}
-
-// stylelint-disable declaration-block-single-line-max-declarations
-.bd-blue-100 { color: color-contrast($blue-100); background-color: $blue-100; }
-.bd-blue-200 { color: color-contrast($blue-200); background-color: $blue-200; }
-.bd-blue-300 { color: color-contrast($blue-300); background-color: $blue-300; }
-.bd-blue-400 { color: color-contrast($blue-400); background-color: $blue-400; }
-.bd-blue-500 { color: color-contrast($blue-500); background-color: $blue-500; }
-.bd-blue-600 { color: color-contrast($blue-600); background-color: $blue-600; }
-.bd-blue-700 { color: color-contrast($blue-700); background-color: $blue-700; }
-.bd-blue-800 { color: color-contrast($blue-800); background-color: $blue-800; }
-.bd-blue-900 { color: color-contrast($blue-900); background-color: $blue-900; }
-
-.bd-indigo-100 { color: color-contrast($indigo-100); background-color: $indigo-100; }
-.bd-indigo-200 { color: color-contrast($indigo-200); background-color: $indigo-200; }
-.bd-indigo-300 { color: color-contrast($indigo-300); background-color: $indigo-300; }
-.bd-indigo-400 { color: color-contrast($indigo-400); background-color: $indigo-400; }
-.bd-indigo-500 { color: color-contrast($indigo-500); background-color: $indigo-500; }
-.bd-indigo-600 { color: color-contrast($indigo-600); background-color: $indigo-600; }
-.bd-indigo-700 { color: color-contrast($indigo-700); background-color: $indigo-700; }
-.bd-indigo-800 { color: color-contrast($indigo-800); background-color: $indigo-800; }
-.bd-indigo-900 { color: color-contrast($indigo-900); background-color: $indigo-900; }
-
-.bd-purple-100 { color: color-contrast($purple-100); background-color: $purple-100; }
-.bd-purple-200 { color: color-contrast($purple-200); background-color: $purple-200; }
-.bd-purple-300 { color: color-contrast($purple-300); background-color: $purple-300; }
-.bd-purple-400 { color: color-contrast($purple-400); background-color: $purple-400; }
-.bd-purple-500 { color: color-contrast($purple-500); background-color: $purple-500; }
-.bd-purple-600 { color: color-contrast($purple-600); background-color: $purple-600; }
-.bd-purple-700 { color: color-contrast($purple-700); background-color: $purple-700; }
-.bd-purple-800 { color: color-contrast($purple-800); background-color: $purple-800; }
-.bd-purple-900 { color: color-contrast($purple-900); background-color: $purple-900; }
-
-.bd-pink-100 { color: color-contrast($pink-100); background-color: $pink-100; }
-.bd-pink-200 { color: color-contrast($pink-200); background-color: $pink-200; }
-.bd-pink-300 { color: color-contrast($pink-300); background-color: $pink-300; }
-.bd-pink-400 { color: color-contrast($pink-400); background-color: $pink-400; }
-.bd-pink-500 { color: color-contrast($pink-500); background-color: $pink-500; }
-.bd-pink-600 { color: color-contrast($pink-600); background-color: $pink-600; }
-.bd-pink-700 { color: color-contrast($pink-700); background-color: $pink-700; }
-.bd-pink-800 { color: color-contrast($pink-800); background-color: $pink-800; }
-.bd-pink-900 { color: color-contrast($pink-900); background-color: $pink-900; }
-
-.bd-red-100 { color: color-contrast($red-100); background-color: $red-100; }
-.bd-red-200 { color: color-contrast($red-200); background-color: $red-200; }
-.bd-red-300 { color: color-contrast($red-300); background-color: $red-300; }
-.bd-red-400 { color: color-contrast($red-400); background-color: $red-400; }
-.bd-red-500 { color: color-contrast($red-500); background-color: $red-500; }
-.bd-red-600 { color: color-contrast($red-600); background-color: $red-600; }
-.bd-red-700 { color: color-contrast($red-700); background-color: $red-700; }
-.bd-red-800 { color: color-contrast($red-800); background-color: $red-800; }
-.bd-red-900 { color: color-contrast($red-900); background-color: $red-900; }
-
-.bd-orange-100 { color: color-contrast($orange-100); background-color: $orange-100; }
-.bd-orange-200 { color: color-contrast($orange-200); background-color: $orange-200; }
-.bd-orange-300 { color: color-contrast($orange-300); background-color: $orange-300; }
-.bd-orange-400 { color: color-contrast($orange-400); background-color: $orange-400; }
-.bd-orange-500 { color: color-contrast($orange-500); background-color: $orange-500; }
-.bd-orange-600 { color: color-contrast($orange-600); background-color: $orange-600; }
-.bd-orange-700 { color: color-contrast($orange-700); background-color: $orange-700; }
-.bd-orange-800 { color: color-contrast($orange-800); background-color: $orange-800; }
-.bd-orange-900 { color: color-contrast($orange-900); background-color: $orange-900; }
-
-.bd-yellow-100 { color: color-contrast($yellow-100); background-color: $yellow-100; }
-.bd-yellow-200 { color: color-contrast($yellow-200); background-color: $yellow-200; }
-.bd-yellow-300 { color: color-contrast($yellow-300); background-color: $yellow-300; }
-.bd-yellow-400 { color: color-contrast($yellow-400); background-color: $yellow-400; }
-.bd-yellow-500 { color: color-contrast($yellow-500); background-color: $yellow-500; }
-.bd-yellow-600 { color: color-contrast($yellow-600); background-color: $yellow-600; }
-.bd-yellow-700 { color: color-contrast($yellow-700); background-color: $yellow-700; }
-.bd-yellow-800 { color: color-contrast($yellow-800); background-color: $yellow-800; }
-.bd-yellow-900 { color: color-contrast($yellow-900); background-color: $yellow-900; }
-
-.bd-green-100 { color: color-contrast($green-100); background-color: $green-100; }
-.bd-green-200 { color: color-contrast($green-200); background-color: $green-200; }
-.bd-green-300 { color: color-contrast($green-300); background-color: $green-300; }
-.bd-green-400 { color: color-contrast($green-400); background-color: $green-400; }
-.bd-green-500 { color: color-contrast($green-500); background-color: $green-500; }
-.bd-green-600 { color: color-contrast($green-600); background-color: $green-600; }
-.bd-green-700 { color: color-contrast($green-700); background-color: $green-700; }
-.bd-green-800 { color: color-contrast($green-800); background-color: $green-800; }
-.bd-green-900 { color: color-contrast($green-900); background-color: $green-900; }
-
-.bd-teal-100 { color: color-contrast($teal-100); background-color: $teal-100; }
-.bd-teal-200 { color: color-contrast($teal-200); background-color: $teal-200; }
-.bd-teal-300 { color: color-contrast($teal-300); background-color: $teal-300; }
-.bd-teal-400 { color: color-contrast($teal-400); background-color: $teal-400; }
-.bd-teal-500 { color: color-contrast($teal-500); background-color: $teal-500; }
-.bd-teal-600 { color: color-contrast($teal-600); background-color: $teal-600; }
-.bd-teal-700 { color: color-contrast($teal-700); background-color: $teal-700; }
-.bd-teal-800 { color: color-contrast($teal-800); background-color: $teal-800; }
-.bd-teal-900 { color: color-contrast($teal-900); background-color: $teal-900; }
-
-.bd-cyan-100 { color: color-contrast($cyan-100); background-color: $cyan-100; }
-.bd-cyan-200 { color: color-contrast($cyan-200); background-color: $cyan-200; }
-.bd-cyan-300 { color: color-contrast($cyan-300); background-color: $cyan-300; }
-.bd-cyan-400 { color: color-contrast($cyan-400); background-color: $cyan-400; }
-.bd-cyan-500 { color: color-contrast($cyan-500); background-color: $cyan-500; }
-.bd-cyan-600 { color: color-contrast($cyan-600); background-color: $cyan-600; }
-.bd-cyan-700 { color: color-contrast($cyan-700); background-color: $cyan-700; }
-.bd-cyan-800 { color: color-contrast($cyan-800); background-color: $cyan-800; }
-.bd-cyan-900 { color: color-contrast($cyan-900); background-color: $cyan-900; }
-
-.bd-gray-100 { color: color-contrast($gray-100); background-color: $gray-100; }
-.bd-gray-200 { color: color-contrast($gray-200); background-color: $gray-200; }
-.bd-gray-300 { color: color-contrast($gray-300); background-color: $gray-300; }
-.bd-gray-400 { color: color-contrast($gray-400); background-color: $gray-400; }
-.bd-gray-500 { color: color-contrast($gray-500); background-color: $gray-500; }
-.bd-gray-600 { color: color-contrast($gray-600); background-color: $gray-600; }
-.bd-gray-700 { color: color-contrast($gray-700); background-color: $gray-700; }
-.bd-gray-800 { color: color-contrast($gray-800); background-color: $gray-800; }
-.bd-gray-900 { color: color-contrast($gray-900); background-color: $gray-900; }
-
-.bd-white {
- color: color-contrast($white);
- background-color: $white;
-
- // Astro HTML parser adds extra <p> tags to the content
- p {
- margin: 0;
- }
-}
-
-.bd-black {
- color: color-contrast($black);
- background-color: $black;
-
- // Astro HTML parser adds extra <p> tags to the content
- p {
- margin: 0;
- }
-}
+// // stylelint-disable declaration-block-single-line-max-declarations
+// .bd-blue-100 { color: color-contrast($blue-100); background-color: $blue-100; }
+// .bd-blue-200 { color: color-contrast($blue-200); background-color: $blue-200; }
+// .bd-blue-300 { color: color-contrast($blue-300); background-color: $blue-300; }
+// .bd-blue-400 { color: color-contrast($blue-400); background-color: $blue-400; }
+// .bd-blue-500 { color: color-contrast($blue-500); background-color: $blue-500; }
+// .bd-blue-600 { color: color-contrast($blue-600); background-color: $blue-600; }
+// .bd-blue-700 { color: color-contrast($blue-700); background-color: $blue-700; }
+// .bd-blue-800 { color: color-contrast($blue-800); background-color: $blue-800; }
+// .bd-blue-900 { color: color-contrast($blue-900); background-color: $blue-900; }
+
+// .bd-indigo-100 { color: color-contrast($indigo-100); background-color: $indigo-100; }
+// .bd-indigo-200 { color: color-contrast($indigo-200); background-color: $indigo-200; }
+// .bd-indigo-300 { color: color-contrast($indigo-300); background-color: $indigo-300; }
+// .bd-indigo-400 { color: color-contrast($indigo-400); background-color: $indigo-400; }
+// .bd-indigo-500 { color: color-contrast($indigo-500); background-color: $indigo-500; }
+// .bd-indigo-600 { color: color-contrast($indigo-600); background-color: $indigo-600; }
+// .bd-indigo-700 { color: color-contrast($indigo-700); background-color: $indigo-700; }
+// .bd-indigo-800 { color: color-contrast($indigo-800); background-color: $indigo-800; }
+// .bd-indigo-900 { color: color-contrast($indigo-900); background-color: $indigo-900; }
+
+// .bd-purple-100 { color: color-contrast($purple-100); background-color: $purple-100; }
+// .bd-purple-200 { color: color-contrast($purple-200); background-color: $purple-200; }
+// .bd-purple-300 { color: color-contrast($purple-300); background-color: $purple-300; }
+// .bd-purple-400 { color: color-contrast($purple-400); background-color: $purple-400; }
+// .bd-purple-500 { color: color-contrast($purple-500); background-color: $purple-500; }
+// .bd-purple-600 { color: color-contrast($purple-600); background-color: $purple-600; }
+// .bd-purple-700 { color: color-contrast($purple-700); background-color: $purple-700; }
+// .bd-purple-800 { color: color-contrast($purple-800); background-color: $purple-800; }
+// .bd-purple-900 { color: color-contrast($purple-900); background-color: $purple-900; }
+
+// .bd-pink-100 { color: color-contrast($pink-100); background-color: $pink-100; }
+// .bd-pink-200 { color: color-contrast($pink-200); background-color: $pink-200; }
+// .bd-pink-300 { color: color-contrast($pink-300); background-color: $pink-300; }
+// .bd-pink-400 { color: color-contrast($pink-400); background-color: $pink-400; }
+// .bd-pink-500 { color: color-contrast($pink-500); background-color: $pink-500; }
+// .bd-pink-600 { color: color-contrast($pink-600); background-color: $pink-600; }
+// .bd-pink-700 { color: color-contrast($pink-700); background-color: $pink-700; }
+// .bd-pink-800 { color: color-contrast($pink-800); background-color: $pink-800; }
+// .bd-pink-900 { color: color-contrast($pink-900); background-color: $pink-900; }
+
+// .bd-red-100 { color: color-contrast($red-100); background-color: $red-100; }
+// .bd-red-200 { color: color-contrast($red-200); background-color: $red-200; }
+// .bd-red-300 { color: color-contrast($red-300); background-color: $red-300; }
+// .bd-red-400 { color: color-contrast($red-400); background-color: $red-400; }
+// .bd-red-500 { color: color-contrast($red-500); background-color: $red-500; }
+// .bd-red-600 { color: color-contrast($red-600); background-color: $red-600; }
+// .bd-red-700 { color: color-contrast($red-700); background-color: $red-700; }
+// .bd-red-800 { color: color-contrast($red-800); background-color: $red-800; }
+// .bd-red-900 { color: color-contrast($red-900); background-color: $red-900; }
+
+// .bd-orange-100 { color: color-contrast($orange-100); background-color: $orange-100; }
+// .bd-orange-200 { color: color-contrast($orange-200); background-color: $orange-200; }
+// .bd-orange-300 { color: color-contrast($orange-300); background-color: $orange-300; }
+// .bd-orange-400 { color: color-contrast($orange-400); background-color: $orange-400; }
+// .bd-orange-500 { color: color-contrast($orange-500); background-color: $orange-500; }
+// .bd-orange-600 { color: color-contrast($orange-600); background-color: $orange-600; }
+// .bd-orange-700 { color: color-contrast($orange-700); background-color: $orange-700; }
+// .bd-orange-800 { color: color-contrast($orange-800); background-color: $orange-800; }
+// .bd-orange-900 { color: color-contrast($orange-900); background-color: $orange-900; }
+
+// .bd-yellow-100 { color: color-contrast($yellow-100); background-color: $yellow-100; }
+// .bd-yellow-200 { color: color-contrast($yellow-200); background-color: $yellow-200; }
+// .bd-yellow-300 { color: color-contrast($yellow-300); background-color: $yellow-300; }
+// .bd-yellow-400 { color: color-contrast($yellow-400); background-color: $yellow-400; }
+// .bd-yellow-500 { color: color-contrast($yellow-500); background-color: $yellow-500; }
+// .bd-yellow-600 { color: color-contrast($yellow-600); background-color: $yellow-600; }
+// .bd-yellow-700 { color: color-contrast($yellow-700); background-color: $yellow-700; }
+// .bd-yellow-800 { color: color-contrast($yellow-800); background-color: $yellow-800; }
+// .bd-yellow-900 { color: color-contrast($yellow-900); background-color: $yellow-900; }
+
+// .bd-green-100 { color: color-contrast($green-100); background-color: $green-100; }
+// .bd-green-200 { color: color-contrast($green-200); background-color: $green-200; }
+// .bd-green-300 { color: color-contrast($green-300); background-color: $green-300; }
+// .bd-green-400 { color: color-contrast($green-400); background-color: $green-400; }
+// .bd-green-500 { color: color-contrast($green-500); background-color: $green-500; }
+// .bd-green-600 { color: color-contrast($green-600); background-color: $green-600; }
+// .bd-green-700 { color: color-contrast($green-700); background-color: $green-700; }
+// .bd-green-800 { color: color-contrast($green-800); background-color: $green-800; }
+// .bd-green-900 { color: color-contrast($green-900); background-color: $green-900; }
+
+// .bd-teal-100 { color: color-contrast($teal-100); background-color: $teal-100; }
+// .bd-teal-200 { color: color-contrast($teal-200); background-color: $teal-200; }
+// .bd-teal-300 { color: color-contrast($teal-300); background-color: $teal-300; }
+// .bd-teal-400 { color: color-contrast($teal-400); background-color: $teal-400; }
+// .bd-teal-500 { color: color-contrast($teal-500); background-color: $teal-500; }
+// .bd-teal-600 { color: color-contrast($teal-600); background-color: $teal-600; }
+// .bd-teal-700 { color: color-contrast($teal-700); background-color: $teal-700; }
+// .bd-teal-800 { color: color-contrast($teal-800); background-color: $teal-800; }
+// .bd-teal-900 { color: color-contrast($teal-900); background-color: $teal-900; }
+
+// .bd-cyan-100 { color: color-contrast($cyan-100); background-color: $cyan-100; }
+// .bd-cyan-200 { color: color-contrast($cyan-200); background-color: $cyan-200; }
+// .bd-cyan-300 { color: color-contrast($cyan-300); background-color: $cyan-300; }
+// .bd-cyan-400 { color: color-contrast($cyan-400); background-color: $cyan-400; }
+// .bd-cyan-500 { color: color-contrast($cyan-500); background-color: $cyan-500; }
+// .bd-cyan-600 { color: color-contrast($cyan-600); background-color: $cyan-600; }
+// .bd-cyan-700 { color: color-contrast($cyan-700); background-color: $cyan-700; }
+// .bd-cyan-800 { color: color-contrast($cyan-800); background-color: $cyan-800; }
+// .bd-cyan-900 { color: color-contrast($cyan-900); background-color: $cyan-900; }
+
+// .bd-gray-100 { color: color-contrast(var(--#{$prefix}gray-100)); background-color: var(--#{$prefix}gray-100); }
+// .bd-gray-200 { color: color-contrast(var(--#{$prefix}gray-200)); background-color: var(--#{$prefix}gray-200); }
+// .bd-gray-300 { color: color-contrast(var(--#{$prefix}gray-300)); background-color: var(--#{$prefix}gray-300); }
+// .bd-gray-400 { color: color-contrast(var(--#{$prefix}gray-400)); background-color: var(--#{$prefix}gray-400); }
+// .bd-gray-500 { color: color-contrast(var(--#{$prefix}gray-500)); background-color: var(--#{$prefix}gray-500); }
+// .bd-gray-600 { color: color-contrast(var(--#{$prefix}gray-600)); background-color: var(--#{$prefix}gray-600); }
+// .bd-gray-700 { color: color-contrast(var(--#{$prefix}gray-700)); background-color: var(--#{$prefix}gray-700); }
+// .bd-gray-800 { color: color-contrast(var(--#{$prefix}gray-800)); background-color: var(--#{$prefix}gray-800); }
+// .bd-gray-900 { color: color-contrast(var(--#{$prefix}gray-900)); background-color: var(--#{$prefix}gray-900); }
+
+// .bd-white {
+// color: color-contrast($white);
+// background-color: $white;
+
+// // Astro HTML parser adds extra <p> tags to the content
+// p {
+// margin: 0;
+// }
+// }
+
+// .bd-black {
+// color: color-contrast($black);
+// background-color: $black;
+
+// // Astro HTML parser adds extra <p> tags to the content
+// p {
+// margin: 0;
+// }
+// }
.highlight {
position: relative;
padding: .75rem ($bd-gutter-x * .5);
- background-color: var(--bd-pre-bg);
+ background-color: var(--bs-bg-1);
@include media-breakpoint-up(md) {
- padding: .75rem 1.25rem;
+ padding: 1rem;
@include border-radius(calc(var(--bs-border-radius) - 1px));
}
}
pre {
- padding: .25rem 0 .875rem;
- margin-top: .8125rem;
+ // padding: .25rem 0 .875rem;
+ // margin-top: .8125rem;
margin-bottom: 0;
overflow: overlay;
white-space: pre;
> h2,
> h3,
> h4 {
- --bs-heading-color: var(--bs-emphasis-color);
+ --bs-heading-color: var(--bs-fg);
}
// Offset content from fixed navbar when jumping to headings
> h3 {
margin-top: 2rem;
+
+ code {
+ font-weight: 600;
+ color: inherit;
+ }
}
+
> ul li,
> ol li {
margin-bottom: .25rem;
th {
color: var(--bs-emphasis-color);
+ border-bottom-color: currentcolor;
}
&:not(.bd-callout) > strong { // Keep callout correct color when used within tables
}
}
+.table-utilities td:first-child {
+ white-space: nowrap;
+}
+
.table-options td:last-child,
.table-utilities td:last-child {
min-width: 280px;
// stylelint-enable selector-no-qualifying-type
// scss-docs-start custom-color-mode
-[data-bs-theme="blue"] {
- --bs-body-color: var(--bs-white);
- --bs-body-color-rgb: #{to-rgb($white)};
- --bs-body-bg: var(--bs-blue);
- --bs-body-bg-rgb: #{to-rgb($blue)};
- --bs-tertiary-bg: #{$blue-600};
-
- .dropdown-menu {
- --bs-dropdown-bg: #{color.mix($blue-500, $blue-600)};
- --bs-dropdown-link-active-bg: #{$blue-700};
- }
-
- .btn-secondary {
- --bs-btn-bg: #{color.mix($gray-600, $blue-400)};
- --bs-btn-border-color: #{rgba($white, .25)};
- --bs-btn-hover-bg: #{color.scale(color.mix($gray-600, $blue-400), $lightness: -5%)}; // stylelint-disable-line scss/at-function-named-arguments
- --bs-btn-hover-border-color: #{rgba($white, .25)};
- --bs-btn-active-bg: #{color.scale(color.mix($gray-600, $blue-400), $lightness: -10%)}; // stylelint-disable-line scss/at-function-named-arguments
- --bs-btn-active-border-color: #{rgba($white, .5)};
- --bs-btn-focus-border-color: #{rgba($white, .5)};
- --bs-btn-focus-box-shadow: 0 0 0 .25rem rgba(255, 255, 255, .2);
- }
-}
+// [data-bs-theme="blue"] {
+// --bs-body-color: var(--bs-white);
+// --bs-body-color-rgb: #{to-rgb($white)};
+// --bs-body-bg: var(--bs-blue);
+// --bs-body-bg-rgb: #{to-rgb($blue)};
+// --bs-tertiary-bg: #{$blue-600};
+
+// .dropdown-menu {
+// --bs-dropdown-bg: #{color.mix($blue-500, $blue-600)};
+// --bs-dropdown-link-active-bg: #{$blue-700};
+// }
+
+// .btn-secondary {
+// --bs-btn-bg: #{color.mix(var(--#{$prefix}gray-600), $blue-400)};
+// --bs-btn-border-color: #{rgba($white, .25)};
+// --bs-btn-hover-bg: #{color.scale(color.mix(var(--#{$prefix}gray-600), $blue-400), $lightness: -5%)}; // stylelint-disable-line scss/at-function-named-arguments
+// --bs-btn-hover-border-color: #{rgba($white, .25)};
+// --bs-btn-active-bg: #{color.scale(color.mix(var(--#{$prefix}gray-600), $blue-400), $lightness: -10%)}; // stylelint-disable-line scss/at-function-named-arguments
+// --bs-btn-active-border-color: #{rgba($white, .5)};
+// --bs-btn-focus-border-color: #{rgba($white, .5)};
+// --bs-btn-focus-box-shadow: 0 0 0 .25rem rgba(255, 255, 255, .2);
+// }
+// }
// scss-docs-end custom-color-mode
@use "../../../scss/mixins/color-mode" as *;
.bd-masthead {
- --bd-pink-rgb: #{to-rgb($pink)};
padding: 3rem 0;
// stylelint-disable
background-image: linear-gradient(180deg, color-mix(in srgb, var(--bs-body-bg) 1%, transparent), var(--bs-body-bg) 85%),
@use "sass:color";
+@use "../../../scss/config" as *;
@use "../../../scss/colors" as *;
@use "../../../scss/variables" as *;
@use "../../../scss/mixins/color-mode" as *;
--base04: #666;
--base05: #333;
--base06: #fff;
- --base07: #{$teal-700}; // #9a6700
- --base08: #{color.mix($red-500, $red-600, 50%)}; // #bc4c00
- --base09: #{$cyan-700}; // #087990
- --base0A: #{$purple-500}; // #795da3
- --base0B: #{$blue-700}; // #183691
- --base0C: #{$blue-700}; // #183691
- --base0D: #{$purple-500}; // #795da3
- --base0E: #{$pink-600}; // #a71d5d
+ --base07: var(--#{$prefix}teal-700); // #9a6700
+ --base08: color-mix(in srgb, var(--#{$prefix}red-500), var(--#{$prefix}red-600)); // #bc4c00
+ --base09: var(--#{$prefix} cyan-700); // #087990
+ --base0A: var(--#{$prefix}purple-500); // #795da3
+ --base0B: var(--#{$prefix}blue-700); // #183691
+ --base0C: var(--#{$prefix}blue-700); // #183691
+ --base0D: var(--#{$prefix}purple-500); // #795da3
+ --base0E: var(--#{$prefix}pink-600); // #a71d5d
--base0F: #333;
}
--base04: #868e96;
--base05: #abb2bf;
--base06: #b6bdca;
- --base07: #{$orange-300}; // #d19a66
- --base08: #{$cyan-300};
- --base09: #{$orange-300}; // #d19a66
- --base0A: #{$yellow-200}; // #e5c07b
- --base0B: #{$teal-300}; // #98c379
- --base0C: #{$teal-300}; // #56b6c2
- --base0D: #{$blue-300}; // #61afef
- --base0E: #{$indigo-200}; // #c678dd
- --base0F: #{$red-300}; // #be5046
+ --base07: var(--#{$prefix}orange-300); // #d19a66
+ --base08: var(--#{$prefix}cyan-300);
+ --base09: var(--#{$prefix}orange-300); // #d19a66
+ --base0A: var(--#{$prefix}yellow-200); // #e5c07b
+ --base0B: var(--#{$prefix}teal-300); // #98c379
+ --base0C: var(--#{$prefix}teal-300); // #56b6c2
+ --base0D: var(--#{$prefix}blue-300); // #61afef
+ --base0E: var(--#{$prefix}indigo-200); // #c678dd
+ --base0F: var(--#{$prefix}red-300); // #be5046
}
// Shell prompts
.language-diff {
.token {
&.deleted {
- color: $red-400;
+ color: var(--#{$prefix}red-400);
background-color: transparent;
}
&.inserted {
- color: $green-400;
+ color: var(--#{$prefix}green-400);
background-color: transparent;
}
}
--bd-violet-bg: var(--bd-violet);
--bd-toc-color: light-dark(var(--bd-violet), var(--bs-indigo-300));
--bd-sidebar-link-bg: light-dark(color-mix(in srgb, var(--bd-violet), transparent 90%), color-mix(in srgb, var(--bd-violet), transparent 70%));
- --bd-callout-link: #{$blue-600};
+ --bd-callout-link: var(--#{$prefix}blue-600);
--bd-callout-code-color: light-dark(var(--bs-pink-600), var(--bs-pink-300));
- --bd-pre-bg: light-dark(var(--bs-gray-100), color-mix(in srgb, var(--bs-gray-900), var(--bs-black) 25%));
+ --bd-pre-bg: light-dark(var(--bs-gray-025), color-mix(in srgb, var(--bs-gray-900), var(--bs-black) 25%));
--bd-swatch-shadow: inset 0 0 0 1px light-dark(rgb(0 0 0 / .1), rgb(255 255 255 / .1));
}
// --bd-sidebar-link-bg: rgba(#{to-rgb(mix($bd-violet, $black, 75%))}, .5);
// --bd-callout-link: #{to-rgb($blue-300)};
// --bd-callout-code-color: #{$pink-300};
- // --bd-pre-bg: #{color.adjust($gray-900, $lightness: -2.5%)}; // stylelint-disable-line scss/at-function-named-arguments
+ // --bd-pre-bg: #{color.adjust(var(--#{$prefix}gray-900), $lightness: -2.5%)}; // stylelint-disable-line scss/at-function-named-arguments
// }
}
export const JsDocs: typeof import('@shortcodes/JsDocs.astro').default
export const Placeholder: typeof import('@shortcodes/Placeholder.astro').default
export const ScssDocs: typeof import('@shortcodes/ScssDocs.astro').default
+ export const Swatch: typeof import('@shortcodes/Swatch.astro').default
export const Table: typeof import('@shortcodes/Table.astro').default
}
projects / thirdparty / bootstrap.git / commitdiff
