mirror of https://github.com/twbs/bootstrap.git
Revamp theme colors and more
This commit is contained in:
Mark Otto
parent
cc31550def
commit
e09539933c
|
|
@ -1,6 +1,7 @@
|
|||
@use "sass:map";
|
||||
@use "config" as *;
|
||||
@use "variables" as *;
|
||||
@use "theme" as *;
|
||||
@use "mixins/border-radius" as *;
|
||||
|
||||
//
|
||||
|
|
@ -64,12 +65,12 @@
|
|||
|
||||
// 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);
|
||||
--#{$prefix}alert-border-color: var(--#{$prefix}#{$state}-border);
|
||||
--#{$prefix}alert-link-color: var(--#{$prefix}#{$state}-text);
|
||||
}
|
||||
}
|
||||
// scss-docs-end alert-modifiers
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
// scss-docs-start color-variables
|
||||
$blue: #0d6efd !default;
|
||||
$blue-100: #cfe2ff !default;
|
||||
$blue-200: #9ec5fe !default;
|
||||
|
|
@ -117,11 +118,14 @@ $gray-500: $gray !default;
|
|||
$gray-600: #6c757d !default;
|
||||
$gray-700: #495057 !default;
|
||||
$gray-800: #343a40 !default;
|
||||
$gray-900: #212529 !default;
|
||||
// $gray-900: #212529 !default;
|
||||
$gray-900: #1c1c1e !default;
|
||||
|
||||
$white: #fff !default;
|
||||
$black: #000 !default;
|
||||
// scss-docs-end color-variables
|
||||
|
||||
// scss-docs-start color-maps
|
||||
$blues: (
|
||||
"blue-100": $blue-100,
|
||||
"blue-200": $blue-200,
|
||||
|
|
@ -253,7 +257,9 @@ $grays: (
|
|||
"gray-800": $gray-800,
|
||||
"gray-900": $gray-900
|
||||
) !default;
|
||||
// scss-docs-end color-maps
|
||||
|
||||
// scss-docs-start all-colors-maps
|
||||
$colors: (
|
||||
"blue": $blue,
|
||||
"indigo": $indigo,
|
||||
|
|
@ -282,3 +288,4 @@ $all-colors: (
|
|||
"black": $black,
|
||||
"white": $white
|
||||
) !default;
|
||||
// scss-docs-end all-colors-maps
|
||||
|
|
|
|||
|
|
@ -38,47 +38,6 @@
|
|||
:root {
|
||||
// Note: Custom variable values only support SassScript inside `#{}`.
|
||||
|
||||
// Colors
|
||||
//
|
||||
// Generate palettes for full colors, grays, and theme colors.
|
||||
|
||||
// @each $color-group-name, $color-group in $all-colors {
|
||||
// @each $color-name, $color-value in $color-group {
|
||||
// --#{$prefix}#{$color-name}: #{$color-value};
|
||||
// }
|
||||
// }
|
||||
|
||||
// @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)};
|
||||
|
||||
// Fonts
|
||||
|
||||
// Note: Use `inspect` for lists so that quoted items keep the quotes.
|
||||
|
|
@ -100,54 +59,70 @@
|
|||
--#{$prefix}body-text-align: #{$body-text-align};
|
||||
}
|
||||
|
||||
@each $key, $value in $theme-bgs {
|
||||
// $key: if($key == 0, "", "-" + $key);
|
||||
--#{$prefix}bg-#{$key}: #{$value};
|
||||
}
|
||||
|
||||
@each $key, $value in $theme-fgs {
|
||||
// $key: if($key == 0, "", "-" + $key);
|
||||
--#{$prefix}fg-#{$key}: #{$value};
|
||||
}
|
||||
|
||||
@each $key, $value in $theme-borders {
|
||||
$key: if($key == null, "", "-" + $key);
|
||||
--#{$prefix}border#{$key}: #{$value};
|
||||
}
|
||||
|
||||
--#{$prefix}body-color: #{$body-color};
|
||||
// --#{$prefix}body-color-rgb: #{to-rgb($body-color)};
|
||||
--#{$prefix}body-bg: #{$body-bg};
|
||||
// --#{$prefix}body-bg-rgb: #{to-rgb($body-bg)};
|
||||
|
||||
--#{$prefix}emphasis-color: #{$body-emphasis-color};
|
||||
// --#{$prefix}emphasis-color-rgb: #{to-rgb($body-emphasis-color)};
|
||||
// --#{$prefix}emphasis-color: #{$body-emphasis-color};
|
||||
// // --#{$prefix}emphasis-color-rgb: #{to-rgb($body-emphasis-color)};
|
||||
|
||||
--#{$prefix}secondary-color: #{$body-secondary-color};
|
||||
// --#{$prefix}secondary-color-rgb: #{to-rgb($body-secondary-color)};
|
||||
--#{$prefix}secondary-bg: #{$body-secondary-bg};
|
||||
// --#{$prefix}secondary-bg-rgb: #{to-rgb($body-secondary-bg)};
|
||||
// --#{$prefix}secondary-color: #{$body-secondary-color};
|
||||
// // --#{$prefix}secondary-color-rgb: #{to-rgb($body-secondary-color)};
|
||||
// --#{$prefix}secondary-bg: #{$body-secondary-bg};
|
||||
// // --#{$prefix}secondary-bg-rgb: #{to-rgb($body-secondary-bg)};
|
||||
|
||||
--#{$prefix}tertiary-color: #{$body-tertiary-color};
|
||||
// --#{$prefix}tertiary-color-rgb: #{to-rgb($body-tertiary-color)};
|
||||
--#{$prefix}tertiary-bg: #{$body-tertiary-bg};
|
||||
// --#{$prefix}tertiary-bg-rgb: #{to-rgb($body-tertiary-bg)};
|
||||
// --#{$prefix}tertiary-color: #{$body-tertiary-color};
|
||||
// // --#{$prefix}tertiary-color-rgb: #{to-rgb($body-tertiary-color)};
|
||||
// --#{$prefix}tertiary-bg: #{$body-tertiary-bg};
|
||||
// // --#{$prefix}tertiary-bg-rgb: #{to-rgb($body-tertiary-bg)};
|
||||
// scss-docs-end root-body-variables
|
||||
|
||||
--#{$prefix}heading-color: #{$headings-color};
|
||||
|
||||
--#{$prefix}link-color: #{$link-color};
|
||||
--#{$prefix}link-color: light-dark(var(--#{$prefix}primary-base), var(--#{$prefix}primary-text));
|
||||
// --#{$prefix}link-color-rgb: #{to-rgb($link-color)};
|
||||
--#{$prefix}link-decoration: #{$link-decoration};
|
||||
|
||||
--#{$prefix}link-hover-color: #{$link-hover-color};
|
||||
--#{$prefix}link-hover-color: color-mix(in oklch, var(--#{$prefix}link-color) 90%, #000);
|
||||
// --#{$prefix}link-hover-color-rgb: #{to-rgb($link-hover-color)};
|
||||
|
||||
@if $link-hover-decoration != null {
|
||||
--#{$prefix}link-hover-decoration: #{$link-hover-decoration};
|
||||
}
|
||||
|
||||
--#{$prefix}code-color: #{$code-color};
|
||||
--#{$prefix}code-color: var(--#{$prefix}fg-0);
|
||||
--#{$prefix}highlight-color: #{$mark-color};
|
||||
--#{$prefix}highlight-bg: #{$mark-bg};
|
||||
|
||||
// --#{$prefix}font-size-base: 1rem;
|
||||
|
||||
// scss-docs-start root-border-var
|
||||
--#{$prefix}border-width: #{$border-width};
|
||||
--#{$prefix}border-style: #{$border-style};
|
||||
--#{$prefix}border-color: #{$border-color};
|
||||
--#{$prefix}border-color-translucent: #{$border-color-translucent};
|
||||
|
||||
--#{$prefix}border-radius: #{$border-radius};
|
||||
--#{$prefix}border-radius-sm: #{$border-radius-sm};
|
||||
--#{$prefix}border-radius-lg: #{$border-radius-lg};
|
||||
--#{$prefix}border-radius-xl: #{$border-radius-xl};
|
||||
--#{$prefix}border-radius-2xl: #{$border-radius-2xl};
|
||||
--#{$prefix}border-radius-pill: #{$border-radius-pill};
|
||||
--#{$prefix}border-radius: .5rem;
|
||||
--#{$prefix}border-radius-sm: .375rem;
|
||||
--#{$prefix}border-radius-lg: .625rem;
|
||||
--#{$prefix}border-radius-xl: 1rem;
|
||||
--#{$prefix}border-radius-2xl: 2rem;
|
||||
--#{$prefix}border-radius-pill: 50rem;
|
||||
// scss-docs-end root-border-var
|
||||
|
||||
--#{$prefix}box-shadow: #{$box-shadow};
|
||||
|
|
|
|||
196
scss/_theme.scss
196
scss/_theme.scss
|
|
@ -25,166 +25,166 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
// scss-docs-start theme-colors
|
||||
$new-theme-colors: (
|
||||
"primary": (
|
||||
"base": var(--#{$prefix}blue-500),
|
||||
"text": light-dark(var(--#{$prefix}blue-700), var(--#{$prefix}blue-300)),
|
||||
"text": light-dark(var(--#{$prefix}blue-600), var(--#{$prefix}blue-300)),
|
||||
"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%, transparent),
|
||||
"contrast": var(--#{$prefix}white)
|
||||
),
|
||||
// "indigo": (
|
||||
// "base": var(--#{$prefix}indigo-500),
|
||||
// "text": light-dark(var(--#{$prefix}indigo-700), var(--#{$prefix}indigo-300)),
|
||||
// "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)),
|
||||
// "border": light-dark(var(--#{$prefix}indigo-300), var(--#{$prefix}indigo-600)),
|
||||
// "contrast": var(--#{$prefix}white)
|
||||
// ),
|
||||
// "purple": (
|
||||
// "base": var(--#{$prefix}purple-500),
|
||||
// "text": light-dark(var(--#{$prefix}purple-700), var(--#{$prefix}purple-300)),
|
||||
// "bg": light-dark(var(--#{$prefix}purple-500), var(--#{$prefix}purple-500)),
|
||||
// "bg-subtle": light-dark(var(--#{$prefix}purple-100), var(--#{$prefix}purple-900)),
|
||||
// "bg-muted": light-dark(var(--#{$prefix}purple-200), var(--#{$prefix}purple-800)),
|
||||
// "border": light-dark(var(--#{$prefix}purple-300), var(--#{$prefix}purple-600)),
|
||||
// "contrast": var(--#{$prefix}white)
|
||||
// ),
|
||||
// "pink": (
|
||||
// "base": var(--#{$prefix}pink-500),
|
||||
// "text": light-dark(var(--#{$prefix}pink-700), var(--#{$prefix}pink-300)),
|
||||
// "bg": light-dark(var(--#{$prefix}pink-500), var(--#{$prefix}pink-500)),
|
||||
// "bg-subtle": light-dark(var(--#{$prefix}pink-100), var(--#{$prefix}pink-900)),
|
||||
// "bg-muted": light-dark(var(--#{$prefix}pink-200), var(--#{$prefix}pink-800)),
|
||||
// "border": light-dark(var(--#{$prefix}pink-300), var(--#{$prefix}pink-600)),
|
||||
// "contrast": var(--#{$prefix}white)
|
||||
// ),
|
||||
"accent": (
|
||||
"base": var(--#{$prefix}indigo-500),
|
||||
"text": light-dark(var(--#{$prefix}indigo-600), var(--#{$prefix}indigo-300)),
|
||||
"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%, transparent),
|
||||
"contrast": var(--#{$prefix}white)
|
||||
),
|
||||
"danger": (
|
||||
"base": var(--#{$prefix}red-500),
|
||||
"text": light-dark(var(--#{$prefix}red-700), var(--#{$prefix}red-300)),
|
||||
"text": light-dark(var(--#{$prefix}red-600), var(--#{$prefix}red-300)),
|
||||
"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%, transparent),
|
||||
"contrast": var(--#{$prefix}white)
|
||||
),
|
||||
// "orange": (
|
||||
// "base": var(--#{$prefix}orange-500),
|
||||
// "text": light-dark(var(--#{$prefix}orange-700), var(--#{$prefix}orange-300)),
|
||||
// "bg": light-dark(var(--#{$prefix}orange-500), var(--#{$prefix}orange-500)),
|
||||
// "bg-subtle": light-dark(var(--#{$prefix}orange-100), var(--#{$prefix}orange-900)),
|
||||
// "bg-muted": light-dark(var(--#{$prefix}orange-200), var(--#{$prefix}orange-800)),
|
||||
// "border": light-dark(var(--#{$prefix}orange-300), var(--#{$prefix}orange-600)),
|
||||
// "contrast": var(--#{$prefix}gray-900)
|
||||
// ),
|
||||
"warning": (
|
||||
"base": var(--#{$prefix}yellow-500),
|
||||
"text": light-dark(var(--#{$prefix}yellow-700), var(--#{$prefix}yellow-300)),
|
||||
"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%, transparent),
|
||||
"contrast": var(--#{$prefix}gray-900)
|
||||
),
|
||||
"success": (
|
||||
"base": var(--#{$prefix}green-500),
|
||||
"text": light-dark(var(--#{$prefix}green-700), var(--#{$prefix}green-300)),
|
||||
"text": light-dark(var(--#{$prefix}green-600), var(--#{$prefix}green-300)),
|
||||
"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%, transparent),
|
||||
"contrast": var(--#{$prefix}white)
|
||||
),
|
||||
// "teal": (
|
||||
// "base": var(--#{$prefix}teal-500),
|
||||
// "text": light-dark(var(--#{$prefix}teal-700), var(--#{$prefix}teal-300)),
|
||||
// "bg": light-dark(var(--#{$prefix}teal-500), var(--#{$prefix}teal-500)),
|
||||
// "bg-subtle": light-dark(var(--#{$prefix}teal-100), var(--#{$prefix}teal-900)),
|
||||
// "bg-muted": light-dark(var(--#{$prefix}teal-200), var(--#{$prefix}teal-800)),
|
||||
// "border": light-dark(var(--#{$prefix}teal-300), var(--#{$prefix}teal-600)),
|
||||
// "contrast": var(--#{$prefix}gray-900)
|
||||
// ),
|
||||
"info": (
|
||||
"base": var(--#{$prefix}cyan-500),
|
||||
"text": light-dark(var(--#{$prefix}cyan-700), var(--#{$prefix}cyan-300)),
|
||||
"text": light-dark(var(--#{$prefix}cyan-600), var(--#{$prefix}cyan-300)),
|
||||
"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%, transparent),
|
||||
"contrast": var(--#{$prefix}gray-900)
|
||||
),
|
||||
"secondary": (
|
||||
"base": var(--#{$prefix}gray-500),
|
||||
"text": light-dark(var(--#{$prefix}gray-700), var(--#{$prefix}gray-300)),
|
||||
"bg": light-dark(var(--#{$prefix}gray-500), var(--#{$prefix}gray-500)),
|
||||
"base": var(--#{$prefix}gray-300),
|
||||
"text": light-dark(var(--#{$prefix}gray-600), var(--#{$prefix}gray-400)),
|
||||
"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%, transparent),
|
||||
"contrast": var(--#{$prefix}gray-900)
|
||||
"contrast": light-dark(var(--#{$prefix}gray-900), var(--#{$prefix}white))
|
||||
)
|
||||
) !default;
|
||||
// scss-docs-end theme-colors
|
||||
|
||||
// "indigo": (
|
||||
// "base": var(--#{$prefix}indigo-500),
|
||||
// "text": light-dark(var(--#{$prefix}indigo-700), var(--#{$prefix}indigo-300)),
|
||||
// "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)),
|
||||
// "border": light-dark(var(--#{$prefix}indigo-300), var(--#{$prefix}indigo-600)),
|
||||
// "contrast": var(--#{$prefix}white)
|
||||
// ),
|
||||
// "purple": (
|
||||
// "base": var(--#{$prefix}purple-500),
|
||||
// "text": light-dark(var(--#{$prefix}purple-700), var(--#{$prefix}purple-300)),
|
||||
// "bg": light-dark(var(--#{$prefix}purple-500), var(--#{$prefix}purple-500)),
|
||||
// "bg-subtle": light-dark(var(--#{$prefix}purple-100), var(--#{$prefix}purple-900)),
|
||||
// "bg-muted": light-dark(var(--#{$prefix}purple-200), var(--#{$prefix}purple-800)),
|
||||
// "border": light-dark(var(--#{$prefix}purple-300), var(--#{$prefix}purple-600)),
|
||||
// "contrast": var(--#{$prefix}white)
|
||||
// ),
|
||||
// "pink": (
|
||||
// "base": var(--#{$prefix}pink-500),
|
||||
// "text": light-dark(var(--#{$prefix}pink-700), var(--#{$prefix}pink-300)),
|
||||
// "bg": light-dark(var(--#{$prefix}pink-500), var(--#{$prefix}pink-500)),
|
||||
// "bg-subtle": light-dark(var(--#{$prefix}pink-100), var(--#{$prefix}pink-900)),
|
||||
// "bg-muted": light-dark(var(--#{$prefix}pink-200), var(--#{$prefix}pink-800)),
|
||||
// "border": light-dark(var(--#{$prefix}pink-300), var(--#{$prefix}pink-600)),
|
||||
// "contrast": var(--#{$prefix}white)
|
||||
// ),
|
||||
// "orange": (
|
||||
// "base": var(--#{$prefix}orange-500),
|
||||
// "text": light-dark(var(--#{$prefix}orange-700), var(--#{$prefix}orange-300)),
|
||||
// "bg": light-dark(var(--#{$prefix}orange-500), var(--#{$prefix}orange-500)),
|
||||
// "bg-subtle": light-dark(var(--#{$prefix}orange-100), var(--#{$prefix}orange-900)),
|
||||
// "bg-muted": light-dark(var(--#{$prefix}orange-200), var(--#{$prefix}orange-800)),
|
||||
// "border": light-dark(var(--#{$prefix}orange-300), var(--#{$prefix}orange-600)),
|
||||
// "contrast": var(--#{$prefix}gray-900)
|
||||
// ),
|
||||
// "teal": (
|
||||
// "base": var(--#{$prefix}teal-500),
|
||||
// "text": light-dark(var(--#{$prefix}teal-700), var(--#{$prefix}teal-300)),
|
||||
// "bg": light-dark(var(--#{$prefix}teal-500), var(--#{$prefix}teal-500)),
|
||||
// "bg-subtle": light-dark(var(--#{$prefix}teal-100), var(--#{$prefix}teal-900)),
|
||||
// "bg-muted": light-dark(var(--#{$prefix}teal-200), var(--#{$prefix}teal-800)),
|
||||
// "border": light-dark(var(--#{$prefix}teal-300), var(--#{$prefix}teal-600)),
|
||||
// "contrast": var(--#{$prefix}gray-900)
|
||||
// ),
|
||||
|
||||
// [class^=".bg-"]: background-color: var(--bs-bg-color);
|
||||
// .bg-primary: --bs-bg-color: var(--#{$prefix}primary-bg);
|
||||
// .bg-10: background-color: color-mix(in oklch, var(--#{$prefix}bg-color) 10%, transparent);
|
||||
// .bg-20: background-color: color-mix(in oklch, var(--#{$prefix}bg-color) 20%, transparent);
|
||||
// .bg-30: background-color: color-mix(in oklch, var(--#{$prefix}bg-color) 30%, transparent);
|
||||
// .bg-40: background-color: color-mix(in oklch, var(--#{$prefix}bg-color) 40%, transparent);
|
||||
// .bg-50: background-color: color-mix(in oklch, var(--#{$prefix}bg-color) 50%, transparent);
|
||||
// .bg-60: background-color: color-mix(in oklch, var(--#{$prefix}bg-color) 60%, transparent);
|
||||
// .bg-70: background-color: color-mix(in oklch, var(--#{$prefix}bg-color) 70%, transparent);
|
||||
// .bg-80: background-color: color-mix(in oklch, var(--#{$prefix}bg-color) 80%, transparent);
|
||||
// .bg-90: background-color: color-mix(in oklch, var(--#{$prefix}bg-color) 90%, transparent);
|
||||
// .bg-100: background-color: var(--#{$prefix}bg-color);
|
||||
|
||||
// [class^=".text-"]: color: var(--bs-text-color);
|
||||
// .text-primary: --bs-text-color: var(--#{$prefix}primary-text);
|
||||
// .text-10: color: color-mix(in oklch, var(--#{$prefix}text-color) 10%, transparent);
|
||||
// .text-20: color: color-mix(in oklch, var(--#{$prefix}text-color) 20%, transparent);
|
||||
// .text-30: color: color-mix(in oklch, var(--#{$prefix}text-color) 30%, transparent);
|
||||
// .text-40: color: color-mix(in oklch, var(--#{$prefix}text-color) 40%, transparent);
|
||||
// .text-50: color: color-mix(in oklch, var(--#{$prefix}text-color) 50%, transparent);
|
||||
// .text-60: color: color-mix(in oklch, var(--#{$prefix}text-color) 60%, transparent);
|
||||
// .text-70: color: color-mix(in oklch, var(--#{$prefix}text-color) 70%, transparent);
|
||||
// .text-80: color: color-mix(in oklch, var(--#{$prefix}text-color) 80%, transparent);
|
||||
// .text-90: color: color-mix(in oklch, var(--#{$prefix}text-color) 90%, transparent);
|
||||
// .text-100: color: var(--#{$prefix}text-color);
|
||||
|
||||
$color-bg: (
|
||||
"body": var(--#{$prefix}body-bg),
|
||||
"secondary": var(--#{$prefix}body-secondary-bg),
|
||||
"tertiary": var(--#{$prefix}body-tertiary-bg),
|
||||
// mdo-do: consider using muted, subtle, ghost or something instead of linear scale?
|
||||
$theme-bgs: (
|
||||
"0": 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))),
|
||||
) !default;
|
||||
|
||||
$color-text: (
|
||||
"body": var(--#{$prefix}body-color),
|
||||
"secondary": var(--#{$prefix}body-secondary-color),
|
||||
"tertiary": var(--#{$prefix}body-tertiary-color),
|
||||
$theme-fgs: (
|
||||
"0": 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)),
|
||||
) !default;
|
||||
|
||||
$color-border: (
|
||||
//...
|
||||
$theme-borders: (
|
||||
null: light-dark(var(--#{$prefix}gray-300), var(--#{$prefix}gray-700)),
|
||||
"muted": light-dark(var(--#{$prefix}gray-200), var(--#{$prefix}gray-800)),
|
||||
"subtle": light-dark(var(--#{$prefix}gray-100), color-mix(in srgb, var(--#{$prefix}gray-800), var(--#{$prefix}gray-900))),
|
||||
"emphasized": light-dark(var(--#{$prefix}gray-400), var(--#{$prefix}gray-600)),
|
||||
) !default;
|
||||
|
||||
$util-opacity: (
|
||||
"10": 0.1,
|
||||
"20": 0.2,
|
||||
"30": 0.3,
|
||||
"40": 0.4,
|
||||
"50": 0.5,
|
||||
"60": 0.6,
|
||||
"70": 0.7,
|
||||
"80": 0.8,
|
||||
"90": 0.9,
|
||||
"10": .1,
|
||||
"20": .2,
|
||||
"30": .3,
|
||||
"40": .4,
|
||||
"50": .5,
|
||||
"60": .6,
|
||||
"70": .7,
|
||||
"80": .8,
|
||||
"90": .9,
|
||||
"100": 1
|
||||
) !default;
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@
|
|||
}
|
||||
}
|
||||
@include color-mode(dark, true) {
|
||||
--custom-color: #{mix($indigo, $blue, 50%)};
|
||||
--custom-color: color-mix(in srgb, $indigo, $blue);
|
||||
}
|
||||
}
|
||||
@include expect() {
|
||||
|
|
@ -47,7 +47,7 @@
|
|||
}
|
||||
}
|
||||
@include color-mode(dark, true) {
|
||||
--custom-color: #{mix($indigo, $blue, 50%)};
|
||||
--custom-color: color-mix(in srgb, $indigo, $blue);
|
||||
}
|
||||
}
|
||||
@include expect() {
|
||||
|
|
|
|||
|
|
@ -18,9 +18,5 @@
|
|||
hex: '#20c997'
|
||||
- name: cyan
|
||||
hex: '#0dcaf0'
|
||||
- name: white
|
||||
hex: '#fff'
|
||||
- name: gray
|
||||
hex: '#6c757d'
|
||||
- name: gray-dark
|
||||
hex: '#343a40'
|
||||
|
|
|
|||
|
|
@ -1,5 +1,7 @@
|
|||
- name: primary
|
||||
hex: '#0d6efd'
|
||||
- name: accent
|
||||
hex: '#6610f2'
|
||||
- name: secondary
|
||||
hex: '#6c757d'
|
||||
- name: success
|
||||
|
|
@ -8,13 +10,5 @@
|
|||
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
|
||||
|
|
|
|||
|
|
@ -0,0 +1,26 @@
|
|||
---
|
||||
interface Props {
|
||||
title?: string;
|
||||
name?: string;
|
||||
variant?: string;
|
||||
variable?: string;
|
||||
label?: string;
|
||||
}
|
||||
|
||||
const { title, name, variant, variable, label } = Astro.props;
|
||||
|
||||
// Determine the CSS variable name
|
||||
const cssVar = variable ?
|
||||
`var(--bs-${variable})` :
|
||||
`var(--bs-${name}-${variant})`;
|
||||
|
||||
// Determine the label text
|
||||
const labelText = label ?
|
||||
label :
|
||||
title ? `${title}-${variant}` : variable;
|
||||
---
|
||||
|
||||
<div class="d-flex flex-column gap-2">
|
||||
<div class={`p-4 rounded-3`} style={{ boxShadow: 'var(--bd-swatch-shadow)', backgroundColor: cssVar }}></div>
|
||||
{labelText}
|
||||
</div>
|
||||
|
|
@ -1,437 +1,135 @@
|
|||
---
|
||||
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 includes an extensive color system and theme that works out of the box for light and dark mode, and can be completely customized for any project.
|
||||
toc: true
|
||||
---
|
||||
|
||||
import { getData } from '@libs/data'
|
||||
import { getSequence } from '@libs/utils'
|
||||
import ThemeColorSwatch from './ThemeColorSwatch.astro'
|
||||
|
||||
## Colors
|
||||
|
||||
<AddedIn version="5.3.0" />
|
||||
All Bootstrap colors (including every tint and shade) are available as Sass variables, Sass maps, and CSS variables in Bootstrap 6. Colors are defined in a new `scss/_colors.scss` stylesheet. To build a cohesive theme that supports the most common needs, only a subset of colors are included in [our theme colors](#theme-colors) as classes.
|
||||
|
||||
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.
|
||||
{getData('colors').map((color) => {
|
||||
return (
|
||||
<>
|
||||
<h3 class="text-capitalize">{color.name}</h3>
|
||||
<div class="grid gap-3 mb-3">
|
||||
{getSequence(100, 900, 100).map((value) => {
|
||||
return (
|
||||
<div class={`col-2 ratio-21x9 rounded-3 bd-${color.name}-${value}`}
|
||||
style="box-shadow: var(--bd-swatch-shadow)"
|
||||
data-bs-toggle="tooltip"
|
||||
data-bs-html="true"
|
||||
data-bs-title={`${color.name}-${value}<br>var(--bs-${color.name}-${value})`}>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
})}
|
||||
|
||||
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)`.
|
||||
Be sure to monitor contrast ratios as you customize colors. We've taken care to ensure classes and variables for our themes colors are well-contrasted, but you may need to adjust colors for your project.
|
||||
|
||||
<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 type="info">
|
||||
**Migrating from v5:**
|
||||
- We've replaced `*-rgb` color variables with CSS-native `color-mix()` and relative colors where needed.
|
||||
- `.bg-{0|1|2|3}` replaces `body-bg`, `body-secondary-bg`, and `body-tertiary-bg` colors. Same for `.fg-{0|1|2|3}` and text colors.
|
||||
- All tints and shades are available as CSS variables on `:root`.
|
||||
- `.bg-{color}-subtle` is now `.bg-subtle-{color}`.
|
||||
</Callout>
|
||||
|
||||
<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>
|
||||
|
||||
### 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.
|
||||
|
||||
<Example code={`<div class="p-3 text-primary-emphasis bg-primary-subtle border border-primary-subtle rounded-3">
|
||||
Example element with utilities
|
||||
</div>`} />
|
||||
|
||||
### Theme colors
|
||||
## Theme colors
|
||||
|
||||
We use a subset of all colors to create a smaller color palette for generating color schemes, also available as Sass variables and a Sass map in Bootstrap’s `scss/_variables.scss` file.
|
||||
|
||||
<div class="row">
|
||||
<div class="row small">
|
||||
{getData('theme-colors').map((themeColor) => {
|
||||
return (
|
||||
<div class="col-md-4">
|
||||
<div class={`p-3 mb-3 text-bg-${themeColor.name} rounded-3`}>{themeColor.title}</div>
|
||||
<div class="d-flex flex-column gap-2 mb-4">
|
||||
<h4>{themeColor.title}</h4>
|
||||
<div class="grid grid-cols-5 gap-3 text-lowercase">
|
||||
<ThemeColorSwatch title={themeColor.title} name={themeColor.name} variant="base" />
|
||||
<ThemeColorSwatch title={themeColor.title} name={themeColor.name} variant="text" />
|
||||
<ThemeColorSwatch title={themeColor.title} name={themeColor.name} variant="bg" />
|
||||
<ThemeColorSwatch title={themeColor.title} name={themeColor.name} variant="bg-subtle" />
|
||||
<ThemeColorSwatch title={themeColor.title} name={themeColor.name} variant="bg-muted" />
|
||||
{/* <ThemeColorSwatch title={themeColor.title} name={themeColor.name} variant="bg-emphasized" /> */}
|
||||
<ThemeColorSwatch title={themeColor.title} name={themeColor.name} variant="border" />
|
||||
<ThemeColorSwatch title={themeColor.title} name={themeColor.name} variant="focus-ring" />
|
||||
<ThemeColorSwatch title={themeColor.title} name={themeColor.name} variant="contrast" />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
|
||||
<div class="d-flex flex-column gap-2 mb-4">
|
||||
<h4>Background</h4>
|
||||
<div class="grid grid-cols-5 gap-3 text-lowercase">
|
||||
<ThemeColorSwatch variable="bg-0" />
|
||||
<ThemeColorSwatch variable="bg-1" />
|
||||
<ThemeColorSwatch variable="bg-2" />
|
||||
<ThemeColorSwatch variable="bg-3" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="d-flex flex-column gap-2 mb-4">
|
||||
<h4>Foreground</h4>
|
||||
<div class="grid grid-cols-5 gap-3 text-lowercase">
|
||||
<ThemeColorSwatch variable="fg-0" />
|
||||
<ThemeColorSwatch variable="fg-1" />
|
||||
<ThemeColorSwatch variable="fg-2" />
|
||||
<ThemeColorSwatch variable="fg-3" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="d-flex flex-column gap-2 mb-4">
|
||||
<h4>Border</h4>
|
||||
<div class="grid grid-cols-5 gap-3 text-lowercase">
|
||||
<ThemeColorSwatch variable="border" />
|
||||
<ThemeColorSwatch variable="border-muted" />
|
||||
<ThemeColorSwatch variable="border-subtle" />
|
||||
<ThemeColorSwatch variable="border-emphasized" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
### Using the new colors
|
||||
|
||||
Here are some examples of the new colors in action:
|
||||
|
||||
<Example code={`<div class="p-3 mb-3 text-primary bg-subtle-primary border border-primary rounded-3">
|
||||
.text-primary on .bg-subtle-primary with .border-primary
|
||||
</div>
|
||||
|
||||
<div class="p-3 mb-3 text-success bg-subtle-success border border-success rounded-3">
|
||||
.text-success on .bg-subtle-success with .border-success
|
||||
</div>`} />
|
||||
|
||||
### Backgrounds and borders
|
||||
|
||||
Here's a little guidance on pairing the background and border colors together. Essentially, the default `.border` utility and `border-color` value should work great 90% of the time.
|
||||
|
||||
<Example code={`<div class="p-3 mb-3 bg-0" style="border: 1px solid var(--bs-border-emphasized)">.bg-0.border-emphasized</div>
|
||||
<div class="p-3 mb-3 bg-0" style="border: 1px solid var(--bs-border)">.bg-0.border</div>
|
||||
<div class="p-3 mb-3 bg-0" style="border: 1px solid var(--bs-border-muted)">.bg-0.border-muted</div>
|
||||
<div class="p-3 mb-3 bg-0" style="border: 1px solid var(--bs-border-subtle)">.bg-0.border-subtle</div>`} />
|
||||
|
||||
For other situations, where you have a tinted background color like `.bg-1`, `.bg-2`, or `.bg-3`, consider using the emphsized border variant to maintiain a little contrast between the background and border.
|
||||
|
||||
<Example code={`<div class="p-3 mb-3 bg-1" style="border: 1px solid var(--bs-border)">.bg-1.border</div>
|
||||
<div class="p-3 mb-3 bg-2" style="border: 1px solid var(--bs-border-emphasized)">.bg-2.border-emphasized</div>
|
||||
<div class="p-3 mb-3 bg-3" style="border: 1px solid var(--bs-border-emphasized)">.bg-3.border-emphasized</div>`} />
|
||||
|
||||
All these colors are available as a Sass map, `$theme-colors`.
|
||||
|
||||
{/* <ScssDocs name="theme-colors-map" file="scss/_variables.scss" /> */}
|
||||
|
||||
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.
|
||||
|
|
@ -470,9 +168,7 @@ Here’s how you can use these in your Sass:
|
|||
|
||||
## Generating utilities
|
||||
|
||||
<AddedIn version="5.1.0"/>
|
||||
|
||||
Bootstrap doesn’t include `color` and `background-color` utilities for every color variable, but you can generate these yourself with our [utility API]([[docsref:/utilities/api]]) and our extended Sass maps added in v5.1.0.
|
||||
Bootstrap doesn't include `color` and `background-color` utilities for every color variable, but you can generate these yourself with our [utility API]([[docsref:/utilities/api]]).
|
||||
|
||||
1. To start, make sure you’ve imported our functions, variables, mixins, and utilities.
|
||||
2. Use our `map-merge-multiple()` function to quickly merge multiple Sass maps together in a new map.
|
||||
|
|
|
|||
Loading…
Reference in New Issue