From: Mark Otto Date: Wed, 24 Sep 2025 05:34:34 +0000 (-0700) Subject: New theme classes, revamped buttons X-Git-Url: http://git.ipfire.org/?a=commitdiff_plain;h=52d8ebc4d0314f9336c4932ca09904a127a7569b;p=thirdparty%2Fbootstrap.git New theme classes, revamped buttons --- diff --git a/.bundlewatch.config.json b/.bundlewatch.config.json index 359e9ed23e..f018e949f5 100644 --- a/.bundlewatch.config.json +++ b/.bundlewatch.config.json @@ -26,11 +26,11 @@ }, { "path": "./dist/css/bootstrap.css", - "maxSize": "36.5 kB" + "maxSize": "37.5 kB" }, { "path": "./dist/css/bootstrap.min.css", - "maxSize": "33.0 kB" + "maxSize": "33.75 kB" }, { "path": "./dist/js/bootstrap.bundle.js", diff --git a/scss/_accordion.scss b/scss/_accordion.scss index 4f3dc7b8f0..46c43f66f8 100644 --- a/scss/_accordion.scss +++ b/scss/_accordion.scss @@ -10,8 +10,8 @@ // scss-docs-start accordion-variables $accordion-padding-y: 1rem !default; $accordion-padding-x: 1.25rem !default; -$accordion-color: var(--#{$prefix}body-color) !default; -$accordion-bg: var(--#{$prefix}body-bg) !default; +$accordion-color: var(--#{$prefix}color-body) !default; +$accordion-bg: var(--#{$prefix}bg-body) !default; $accordion-border-width: var(--#{$prefix}border-width) !default; $accordion-border-color: var(--#{$prefix}border-color) !default; $accordion-border-radius: var(--#{$prefix}border-radius-lg) !default; diff --git a/scss/_alert.scss b/scss/_alert.scss index a4b88a1a46..33d4edd789 100644 --- a/scss/_alert.scss +++ b/scss/_alert.scss @@ -17,20 +17,20 @@ $alert-dismissible-padding-r: $alert-padding-x * 3 !default; // 3x covers widt @layer components { .alert { // scss-docs-start alert-css-vars - --#{$prefix}alert-bg: transparent; + --#{$prefix}alert-bg: var(--#{$prefix}theme-bg-subtle, transparent); --#{$prefix}alert-padding-x: #{$alert-padding-x}; --#{$prefix}alert-padding-y: #{$alert-padding-y}; --#{$prefix}alert-margin-bottom: #{$alert-margin-bottom}; - --#{$prefix}alert-color: inherit; + --#{$prefix}alert-color: var(--#{$prefix}theme-text, inherit); --#{$prefix}alert-border-color: transparent; - --#{$prefix}alert-border: #{$alert-border-width} solid var(--#{$prefix}alert-border-color); + --#{$prefix}alert-border: #{$alert-border-width} solid var(--#{$prefix}theme-border, var(--#{$prefix}alert-border-color)); --#{$prefix}alert-border-radius: #{$alert-border-radius}; --#{$prefix}alert-link-color: inherit; // scss-docs-end alert-css-vars position: relative; padding: var(--#{$prefix}alert-padding-y) var(--#{$prefix}alert-padding-x); - margin-bottom: var(--#{$prefix}alert-margin-bottom); + // margin-bottom: var(--#{$prefix}alert-margin-bottom); color: var(--#{$prefix}alert-color); background-color: var(--#{$prefix}alert-bg); border: var(--#{$prefix}alert-border); @@ -70,13 +70,13 @@ $alert-dismissible-padding-r: $alert-padding-x * 3 !default; // 3x covers widt // scss-docs-start alert-modifiers // Generate contextual modifier classes for colorizing the alert - @each $state in map.keys($new-theme-colors) { - .alert-#{$state} { - --#{$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); - } - } + // @each $state in map.keys($new-theme-colors) { + // .alert-#{$state} { + // --#{$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); + // } + // } // scss-docs-end alert-modifiers } diff --git a/scss/_badge.scss b/scss/_badge.scss index 0e575012e7..1fd147979c 100644 --- a/scss/_badge.scss +++ b/scss/_badge.scss @@ -1,6 +1,7 @@ @use "config" as *; @use "colors" as *; @use "variables" as *; +@use "theme" as *; @use "mixins/border-radius" as *; @use "mixins/gradients" as *; @use "vendor/rfs" as *; @@ -8,9 +9,9 @@ // scss-docs-start badge-variables $badge-font-size: .75em !default; $badge-font-weight: $font-weight-bold !default; -$badge-color: $white !default; +$badge-color: inherit !default; $badge-padding-y: .35em !default; -$badge-padding-x: .65em !default; +$badge-padding-x: .5em !default; $badge-border-radius: var(--#{$prefix}border-radius) !default; // scss-docs-end badge-variables @@ -21,7 +22,8 @@ $badge-border-radius: var(--#{$prefix}border-radius) !default; --#{$prefix}badge-padding-y: #{$badge-padding-y}; @include rfs($badge-font-size, --#{$prefix}badge-font-size); --#{$prefix}badge-font-weight: #{$badge-font-weight}; - --#{$prefix}badge-color: #{$badge-color}; + --#{$prefix}badge-color: var(--#{$prefix}theme-contrast, #{$badge-color}); + --#{$prefix}badge-bg: var(--#{$prefix}theme-bg, var(--#{$prefix}bg-2)); --#{$prefix}badge-border-radius: #{$badge-border-radius}; // scss-docs-end badge-css-vars @@ -34,6 +36,7 @@ $badge-border-radius: var(--#{$prefix}border-radius) !default; text-align: center; white-space: nowrap; vertical-align: baseline; + background-color: var(--#{$prefix}badge-bg); @include border-radius(var(--#{$prefix}badge-border-radius)); @include gradient-bg(); @@ -48,4 +51,9 @@ $badge-border-radius: var(--#{$prefix}border-radius) !default; position: relative; top: -1px; } + + .badge-subtle { + --#{$prefix}badge-color: var(--#{$prefix}theme-text); + --#{$prefix}badge-bg: var(--#{$prefix}theme-bg-subtle); + } } diff --git a/scss/_card.scss b/scss/_card.scss index 8221a3b4cc..b02dc65e05 100644 --- a/scss/_card.scss +++ b/scss/_card.scss @@ -21,7 +21,7 @@ $card-cap-bg: rgba(var(--#{$prefix}body-color-rgb), .03) ! $card-cap-color: null !default; $card-height: null !default; $card-color: null !default; -$card-bg: var(--#{$prefix}body-bg) !default; +$card-bg: var(--#{$prefix}bg-body) !default; $card-img-overlay-padding: $spacer !default; $card-group-margin: $grid-gutter-width * .5 !default; // scss-docs-end card-variables @@ -55,7 +55,7 @@ $card-group-margin: $grid-gutter-width * .5 !default; flex-direction: column; min-width: 0; // See https://github.com/twbs/bootstrap/pull/22740#issuecomment-305868106 height: var(--#{$prefix}card-height); - color: var(--#{$prefix}body-color); + color: var(--#{$prefix}color-body); word-wrap: break-word; background-color: var(--#{$prefix}card-bg); background-clip: border-box; diff --git a/scss/_colors.scss b/scss/_colors.scss index 2030a71946..d260291de9 100644 --- a/scss/_colors.scss +++ b/scss/_colors.scss @@ -41,19 +41,19 @@ $hues: ( :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}-025: color-mix(in oklch, #fff 94%, #{$hue}); + --#{$prefix}#{$color}-050: color-mix(in oklch, #fff 90%, #{$hue}); + --#{$prefix}#{$color}-100: color-mix(in oklch, #fff 80%, #{$hue}); + --#{$prefix}#{$color}-200: color-mix(in oklch, #fff 60%, #{$hue}); + --#{$prefix}#{$color}-300: color-mix(in oklch, #fff 40%, #{$hue}); + --#{$prefix}#{$color}-400: color-mix(in oklch, #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}); + --#{$prefix}#{$color}-600: color-mix(in oklch, #000 16%, #{$hue}); + --#{$prefix}#{$color}-700: color-mix(in oklch, #000 32%, #{$hue}); + --#{$prefix}#{$color}-800: color-mix(in oklch, #000 48%, #{$hue}); + --#{$prefix}#{$color}-900: color-mix(in oklch, #000 64%, #{$hue}); + --#{$prefix}#{$color}-950: color-mix(in oklch, #000 76%, #{$hue}); + --#{$prefix}#{$color}-975: color-mix(in oklch, #000 88%, #{$hue}); } } diff --git a/scss/_dropdown.scss b/scss/_dropdown.scss index 1f212b2bcf..9859f9ce25 100644 --- a/scss/_dropdown.scss +++ b/scss/_dropdown.scss @@ -16,8 +16,8 @@ $dropdown-padding-x: 0 !default; $dropdown-padding-y: .5rem !default; $dropdown-spacer: .125rem !default; $dropdown-font-size: $font-size-base !default; -$dropdown-color: var(--#{$prefix}body-color) !default; -$dropdown-bg: var(--#{$prefix}body-bg) !default; +$dropdown-color: var(--#{$prefix}color-body) !default; +$dropdown-bg: var(--#{$prefix}bg-body) !default; $dropdown-border-color: var(--#{$prefix}border-color-translucent) !default; $dropdown-border-radius: var(--#{$prefix}border-radius) !default; $dropdown-border-width: var(--#{$prefix}border-width) !default; @@ -26,7 +26,7 @@ $dropdown-divider-bg: $dropdown-border-color !default; $dropdown-divider-margin-y: $spacer * .5 !default; $dropdown-box-shadow: var(--#{$prefix}box-shadow) !default; -$dropdown-link-color: var(--#{$prefix}body-color) !default; +$dropdown-link-color: var(--#{$prefix}color-body) !default; $dropdown-link-hover-color: $dropdown-link-color !default; $dropdown-link-hover-bg: var(--#{$prefix}tertiary-bg) !default; diff --git a/scss/_list-group.scss b/scss/_list-group.scss index f414157a23..b7d5b3f6e6 100644 --- a/scss/_list-group.scss +++ b/scss/_list-group.scss @@ -8,8 +8,8 @@ @use "layout/breakpoints" as *; // scss-docs-start list-group-variables -$list-group-color: var(--#{$prefix}body-color) !default; -$list-group-bg: var(--#{$prefix}body-bg) !default; +$list-group-color: var(--#{$prefix}color-body) !default; +$list-group-bg: var(--#{$prefix}bg-body) !default; $list-group-border-color: var(--#{$prefix}border-color) !default; $list-group-border-width: var(--#{$prefix}border-width) !default; $list-group-border-radius: var(--#{$prefix}border-radius) !default; @@ -28,7 +28,7 @@ $list-group-disabled-bg: $list-group-bg !default; $list-group-action-color: var(--#{$prefix}secondary-color) !default; $list-group-action-hover-color: var(--#{$prefix}emphasis-color) !default; -$list-group-action-active-color: var(--#{$prefix}body-color) !default; +$list-group-action-active-color: var(--#{$prefix}color-body) !default; $list-group-action-active-bg: var(--#{$prefix}secondary-bg) !default; // scss-docs-end list-group-variables @@ -82,10 +82,10 @@ $list-group-action-active-bg: var(--#{$prefix}secondary-bg) !default; position: relative; display: block; padding: var(--#{$prefix}list-group-item-padding-y) var(--#{$prefix}list-group-item-padding-x); - color: var(--#{$prefix}list-group-color); + color: var(--#{$prefix}theme-text, var(--#{$prefix}list-group-color)); text-decoration: if($link-decoration == none, null, none); - background-color: var(--#{$prefix}list-group-bg); - border: var(--#{$prefix}list-group-border-width) solid var(--#{$prefix}list-group-border-color); + background-color: var(--#{$prefix}theme-bg-subtle, var(--#{$prefix}list-group-bg)); + border: var(--#{$prefix}list-group-border-width) solid var(--#{$prefix}theme-border, var(--#{$prefix}list-group-border-color)); &:first-child { @include border-top-radius(inherit); @@ -128,7 +128,7 @@ $list-group-action-active-bg: var(--#{$prefix}secondary-bg) !default; .list-group-item-action { width: 100%; // For ``} /> Note that depending on how they are used, badges may be confusing for users of screen readers and similar assistive technologies. While the styling of badges provides a visual cue as to their purpose, these users will simply be presented with the content of the badge. Depending on the specific situation, these badges may seem like random additional words or numbers at the end of a sentence, link, or button. @@ -37,7 +37,7 @@ Use utilities to modify a `.badge` and position it in the corner of a link or bu Inbox - + 99+ @@ -56,7 +56,8 @@ You can also replace the `.badge` class with a few more utilities without a coun Set a `background-color` with contrasting foreground `color` with [our `.text-bg-{color}` helpers]([[docsref:helpers/color-background]]). Previously it was required to manually pair your choice of [`.text-{color}`]([[docsref:/utilities/colors]]) and [`.bg-{color}`]([[docsref:/utilities/background]]) utilities for styling, which you still may use if you prefer. - `${themeColor.title}`)} /> + `${themeColor.title}`)} /> + `${themeColor.title}`)} /> @@ -64,7 +65,7 @@ Set a `background-color` with contrasting foreground `color` with [our `.text-bg Use the `.rounded-pill` utility class to make badges more rounded with a larger `border-radius`. - `${themeColor.title}`)} /> + `${themeColor.title}`)} /> ## CSS diff --git a/site/src/content/docs/components/buttons.mdx b/site/src/content/docs/components/buttons.mdx index e6bbd3b5ba..8c89aa72b8 100644 --- a/site/src/content/docs/components/buttons.mdx +++ b/site/src/content/docs/components/buttons.mdx @@ -22,7 +22,11 @@ When using `.btn` without a modifier, be sure to add some explicit `:focus-visib Bootstrap includes several button variants, each serving its own semantic purpose, with a few extras thrown in for more control. - ``), ` + ` + + + +`), ` `]} /> @@ -276,15 +280,23 @@ Here’s an example of building a custom `.btn-*` modifier class as we do for th ### Sass variables - + + +### Sass map + +Button variants—including all their states—are defined in the `$button-variants` Sass map. This map identifies which theme color tokens to use for each variant's state. + +For example, a solid button uses the same `bg` token for its background and border colors because we want it to have a seamless look. + + ### Sass mixins There are three mixins for buttons: button and button outline variant mixins (both based on `$theme-colors`), plus a button size mixin. -{/* + - +{/* */} @@ -292,4 +304,4 @@ There are three mixins for buttons: button and button outline variant mixins (bo Button variants (for regular and outline buttons) use their respective mixins with our `$theme-colors` map to generate the modifier classes in `scss/_buttons.scss`. - +{/* */} diff --git a/site/src/content/docs/components/list-group.mdx b/site/src/content/docs/components/list-group.mdx index ef98dd5e25..52e6c73c72 100644 --- a/site/src/content/docs/components/list-group.mdx +++ b/site/src/content/docs/components/list-group.mdx @@ -130,7 +130,7 @@ Use contextual classes to style list items with a stateful background and color. `
  • A simple default list group item
    • `, - ...getData('theme-colors').map((themeColor) => `
  • A simple ${themeColor.name} list group item
    • `), + ...getData('theme-colors').map((themeColor) => `
  • A simple ${themeColor.name} list group item
    • `), `
` ]} /> @@ -142,7 +142,7 @@ Contextual classes also work with `.list-group-item-action` for `` and ` A simple default list group item `, - ...getData('theme-colors').map((themeColor) => ` A simple ${themeColor.name} list group item`), + ...getData('theme-colors').map((themeColor) => ` A simple ${themeColor.name} list group item`), `` ]} /> diff --git a/site/src/content/docs/customize/theme.mdx b/site/src/content/docs/customize/theme.mdx index 03f47c84bd..65fb67dd2b 100644 --- a/site/src/content/docs/customize/theme.mdx +++ b/site/src/content/docs/customize/theme.mdx @@ -9,6 +9,7 @@ import { getData } from '@libs/data' export const themeTokens = [ 'base', 'text', + 'text-emphasis', 'bg', 'bg-subtle', 'bg-muted', @@ -18,10 +19,10 @@ export const themeTokens = [ ] export const themeBgs = [ - 'null', - '1', - '2', - '3', + 'body', + 'secondary', + 'subtle', + 'muted', 'white', 'black', 'transparent', @@ -29,10 +30,10 @@ export const themeBgs = [ ] export const themeFgs = [ - 'null', - '1', - '2', - '3', + 'body', + 'secondary', + 'subtle', + 'muted', 'white', 'black', 'transparent', @@ -49,12 +50,13 @@ Theme colors include the following semantic colors: | Theme color | Default value | Description | | --- | --- | --- | | `primary` | `var(--bs-blue-500)`| Main brand color for primary actions | -| `accent` | `var(--bs-indigo-500)` | Secondary brand color (new in v6) | +| `accent` | `var(--bs-indigo-500)` | Complementary brand color option | | `success` | `var(--bs-green-500)` | Positive actions and successful states | | `danger` | `var(--bs-red-500)` | Destructive actions and error states | -| `warning` | `var(--bs-yellow-500)` | Cautionary messages and warning states | +| `warning` | `var(--bs-yellow-500)` | Cautionary messages and states | | `info` | `var(--bs-cyan-500)` | Informational messages and neutral states | -| `secondary` | `var(--bs-gray-300)` | Less prominent secondary actions | +| `inverse` | `var(--bs-gray-900)` | High contrast by inverting foreground and background | +| `secondary` | `var(--bs-gray-300)` | Less prominent actions and states | And within each semantic theme color, you'll find the following keys, most of which are color-mode adaptive: @@ -64,6 +66,7 @@ And within each semantic theme color, you'll find the following keys, most of wh | --- | --- | | `base` | The default color value for the semantic color | | `text` | Accessible text color (against body, plus `subtle` and `muted` color tokens) | +| `text-emphasis` | Emphasized text color for use with `muted` background 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 | @@ -76,7 +79,7 @@ And within each semantic theme color, you'll find the following keys, most of wh 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: -
+
{getData('theme-colors').map((color) => { return (
@@ -92,94 +95,155 @@ Every token is available as a CSS variable, and most are then consumed by our ut })}
-## Theme `fg` and `bg` +### Pairings -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. +Not all colors can be used for all purposes due to accessibility, color contrast, and general aesthetic considerations. Here are some recommended pairings. -Theme backgrounds include the following semantic colors: +- `contrast` work best with `bg` +- `text` works best with `subtle` +- `text-emphasis` works best with `muted` +- `border` works best with `subtle`, but can be used with `muted` + + +
+ Example element with theme color +
+
+ Example element with theme color +
+
+ Example element with theme color +
+
`} /> + +## Layer colors + +Color tokens that are used for foreground, background, and border colors are called **theme layer colors** in Bootstrap. These layer colors are configured outside the `$new-theme-colors` Sass map in their own respective Sass maps as they have more nuanced theming use cases. + +Tokens for these three themes are defined in the `$theme-fgs`, `$theme-bgs`, and `$theme-borders` Sass maps. These maps are used to generate color mode adaptive `color`, `background-color`, and `border-color` values that are then consumed by our utilities and components. You'll find these values in the `_theme.scss` file. + +### Background + +Theme backgrounds include several practical and semantic color options. | Background | Default value | Description | | --- | --- | --- | -| `null` | `var(--bs-white)` | Default background color | -| `1` | `var(--bs-gray-025)` | Lowest contrast background color | -| `2` | `var(--bs-gray-050)` | Lower contrast background color | -| `3` | `var(--bs-gray-100)` | Medium contrast background color, typically used for disabled states | -| `white` | `var(--bs-white)` | Pure white background color | -| `black` | `var(--bs-black)` | Pure black background color | -| `transparent` | `transparent` | Transparent background color | +| `body` | | Default background color | +| `secondary` | | Lowest contrast background color | +| `subtle` | | Lower contrast background color | +| `muted` | | Medium contrast background color, typically used for disabled states | +| `white` | | Pure white background color | +| `black` | | Pure black background color | +| `transparent` | | Transparent background color | | `inherit` |`inherit` | Inherited background color | +### Foreground + +Almost all those options are also available for foreground text colors. + | 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 | -| `white` | `var(--bs-white)` | Pure white foreground color | -| `black` | `var(--bs-black)` | Pure black foreground color | -| `transparent` | `transparent` | Transparent foreground color | +| `body` | | Default foreground color | +| `secondary` | | Lowest contrast foreground color | +| `subtle` | | Lower contrast foreground color | +| `muted` | | Medium contrast foreground color | +| `white` | | Pure white foreground color | +| `black` | | Pure black foreground color | | `inherit` | `inherit` | Inherited foreground color | -### Suggested pairings +### Border -Not all foreground colors are appropriate for all background colors. To maintain color contrast for accessibility, here are some recommended pairings. +Border colors have similar levels, but different naming. -
-
- fg on bg - fg-1 on bg - fg-2 on bg - fg-3 on bg -
-
- fg on bg-1 - fg-1 on bg-1 - fg-2 on bg-1 - fg-3 on bg-1 -
-
- fg on bg-2 - fg-1 on bg-2 - fg-2 on bg-2 - fg-3 on bg-2 -
-
- fg on bg-3 - fg-1 on bg-3 - fg-2 on bg-3 - fg-3 on bg-3 -
-
+ +| Border | Default value | Description | +| --- | --- | --- | +| `null` | | Default border color | +| `muted` | | Muted border color | +| `subtle` | | Subtle border color | +| `emphasized` | | Emphasized border color | + -## Theme foregrounds +### Examples -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. +Not all colors can be used for all purposes due to accessibility, color contrast, and general aesthetic considerations. Here are some recommended pairings. -Theme foregrounds include the following semantic colors: +- `color-body` works with all `bg` colors +- `color-1` works with `bg-body`, `bg-1`, `bg-2`, and `bg-3` +- `color-2` works with `bg-body`, `bg-1`, and `bg-2` +- `color-3` works with `bg-body`, `bg-1` - -| 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 | - +Here are some examples showing them together. Note + + +
+ color-body on bg-body +
+
+ color-3 on bg-1 +
+
+ color-2 on bg-2 +
+
+ color-1 on bg-3 +
+
`} /> + +## Theme utility classes + +We generate theme utility classes from the `$new-theme-colors` Sass map that make all theme color tokens available as CSS variables. We use these in our component variants to allow for quick theming with a single, global class. This requires components to support theme colors, and not every component does. + +With theme utilities, you can apply a theme color to an element with a single class. + +Primary alert +
+ + + + +
+
+ Primary badge + Primary subtle badge +
`} /> + +And you can apply a theme color utility to a container and any theme-aware children will inherit the theme color. + + +
Primary alert
+
+ + + + +
+
+ Primary badge + Primary subtle badge +
+ `} /> + +This also means you can override a container's theme color with another theme color on specific components. + + +
Primary alert
+
+ + + + +
+
+ Success badge + Primary subtle badge +
+ `} /> -
- {themeFgs.map((color) => { - return ( -
- -
{color}
-
- ) - })} -
## Theme Sass map diff --git a/site/src/layouts/DocsLayout.astro b/site/src/layouts/DocsLayout.astro index c459a46f08..2fafcc113a 100644 --- a/site/src/layouts/DocsLayout.astro +++ b/site/src/layouts/DocsLayout.astro @@ -108,7 +108,7 @@ if (currentPageIndex < allPages.length - 1) { ) } diff --git a/site/src/scss/_component-examples.scss b/site/src/scss/_component-examples.scss index 6f023647a1..e2cb10ce44 100644 --- a/site/src/scss/_component-examples.scss +++ b/site/src/scss/_component-examples.scss @@ -145,6 +145,13 @@ border: 1px solid color-mix(in srgb, var(--bd-violet) 30%, transparent); } + .bd-example-buttons { + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: .5rem; + justify-content: start; + } + // // Grid mixins // .example-container { // width: 800px; @@ -310,7 +317,7 @@ min-height: 15rem; > div { - color: var(--bs-body-bg); + color: var(--bs-bg-body); background-color: var(--bd-violet); border: 1px solid var(--bd-purple); diff --git a/site/src/scss/_masthead.scss b/site/src/scss/_masthead.scss index a80d13c827..ce6ca4779e 100644 --- a/site/src/scss/_masthead.scss +++ b/site/src/scss/_masthead.scss @@ -11,7 +11,7 @@ .bd-masthead { 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%), + background-image: linear-gradient(180deg, color-mix(in srgb, var(--bs-bg-body) 1%, transparent), var(--bs-bg-body) 85%), radial-gradient(ellipse at top left, color-mix(in srgb, var(--bs-blue-500) 50%, transparent), transparent 50%), radial-gradient(ellipse at top right, color-mix(in srgb, var(--bd-accent) 50%, transparent), transparent 50%), radial-gradient(ellipse at center right, color-mix(in srgb, var(--bd-violet) 50%, transparent), transparent 50%), @@ -102,7 +102,7 @@ mix-blend-mode: darken; svg { - filter: drop-shadow(0 1px 1px var(--bs-body-bg)); + filter: drop-shadow(0 1px 1px var(--bs-bg-body)); } } diff --git a/site/src/scss/_toc.scss b/site/src/scss/_toc.scss index 27764e686f..6d126bc3da 100644 --- a/site/src/scss/_toc.scss +++ b/site/src/scss/_toc.scss @@ -65,7 +65,7 @@ } @include media-breakpoint-down(md) { - color: var(--bs-body-color); + color: var(--bs-color-body); border: 1px solid var(--bs-border-color); @include border-radius(var(--bs-border-radius)); @@ -74,7 +74,7 @@ &:active, &[aria-expanded="true"] { color: var(--bd-violet); - background-color: var(--bs-body-bg); + background-color: var(--bs-bg-body); border-color: var(--bd-violet); } @@ -89,7 +89,7 @@ @include media-breakpoint-down(md) { nav { padding: 1.25rem 1.25rem 1.25rem 1rem; - background-color: var(--bs-tertiary-bg); + background-color: var(--bs-bg-subtle); border: 1px solid var(--bs-border-color); @include border-radius(var(--bs-border-radius)); }