From 74bc7d411fae7672ef40351dd6e2e480418a31f2 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 27 Dec 2025 12:59:42 -0800 Subject: [PATCH] Additional `.theme-*` utilities to replace color background helpers and more (#41978) * New .theme-* utilities for consuming the existing .theme styles, replace color-background helpers * Update blue to be less indigo * Rebuild metadata * mdx lint * Fix docs link while here * Fix up some docs work while here * links --- README.md | 2 +- dist/css/bootstrap-utilities.metadata.json | 57 ++++++--- scss/_colors.scss | 2 +- scss/_progress.scss | 4 +- scss/_utilities.scss | 42 ++++++- scss/helpers/_color-bg.scss | 16 --- scss/helpers/index.scss | 1 - site/data/sidebar.yml | 2 +- .../src/assets/examples/album-rtl/index.astro | 2 +- site/src/assets/examples/album/index.astro | 2 +- .../examples/starter-template/index.astro | 4 +- site/src/components/header/Navigation.astro | 2 +- site/src/components/home/GetStarted.astro | 7 +- .../content/docs/components/list-group.mdx | 12 +- site/src/content/docs/components/progress.mdx | 10 +- .../content/docs/customize/color-modes.mdx | 2 +- site/src/content/docs/customize/overview.mdx | 2 +- .../content/docs/getting-started/approach.mdx | 2 +- .../content/docs/getting-started/install.mdx | 4 + .../docs/getting-started/introduction.mdx | 9 -- site/src/content/docs/getting-started/rtl.mdx | 2 +- site/src/content/docs/guides/npm.mdx | 2 +- site/src/content/docs/guides/quickstart.mdx | 2 - .../content/docs/helpers/color-background.mdx | 41 ------- .../src/content/docs/utilities/background.mdx | 10 +- site/src/content/docs/utilities/colors.mdx | 32 ++++++ site/src/content/docs/utilities/position.mdx | 14 +-- site/src/content/docs/utilities/theme.mdx | 108 ++++++++++++++++++ site/src/pages/docs/[version]/index.astro | 2 +- site/src/pages/docs/index.astro | 2 +- site/src/scss/_callouts.scss | 2 - site/src/scss/_component-examples.scss | 11 +- 32 files changed, 272 insertions(+), 140 deletions(-) delete mode 100644 scss/helpers/_color-bg.scss delete mode 100644 site/src/content/docs/getting-started/introduction.mdx delete mode 100644 site/src/content/docs/helpers/color-background.mdx create mode 100644 site/src/content/docs/utilities/theme.mdx diff --git a/README.md b/README.md index 32e088f9e4..15258e442c 100644 --- a/README.md +++ b/README.md @@ -52,7 +52,7 @@ Several quick start options are available: - Install with [Composer](https://getcomposer.org/): `composer require twbs/bootstrap:5.3.8` - Install with [NuGet](https://www.nuget.org/): CSS: `Install-Package bootstrap` Sass: `Install-Package bootstrap.sass` -Read the [Getting started page](https://getbootstrap.com/docs/5.3/getting-started/introduction/) for information on the framework contents, templates, examples, and more. +Read the [Getting started page](https://getbootstrap.com/docs/5.3/getting-started/) for information on the framework contents, templates, examples, and more. ## Status diff --git a/dist/css/bootstrap-utilities.metadata.json b/dist/css/bootstrap-utilities.metadata.json index 095db4c99c..219b44a7c1 100644 --- a/dist/css/bootstrap-utilities.metadata.json +++ b/dist/css/bootstrap-utilities.metadata.json @@ -19,7 +19,7 @@ }, "aspect-ratio": { "class": "ratio", - "property": "--bs-ratio", + "property": "--ratio", "classes": [ "ratio-auto", "ratio-1x1", @@ -120,7 +120,7 @@ }, "focus-ring": { "class": "focus-ring", - "property": "--bs-focus-ring-color", + "property": "--focus-ring-color", "classes": [ "focus-ring-primary", "focus-ring-accent", @@ -522,7 +522,7 @@ }, "grid-column-counts": { "class": "grid-cols", - "property": "--bs-columns", + "property": "--columns", "classes": [ "grid-cols-3", "grid-cols-4", @@ -918,6 +918,19 @@ "fg-emphasis-secondary" ] }, + "fg-contrast": { + "class": "fg-contrast", + "classes": [ + "fg-contrast-primary", + "fg-contrast-accent", + "fg-contrast-success", + "fg-contrast-danger", + "fg-contrast-warning", + "fg-contrast-info", + "fg-contrast-inverse", + "fg-contrast-secondary" + ] + }, "fg-opacity": { "class": "fg", "property": "color", @@ -934,19 +947,6 @@ "fg-100" ] }, - "fg-contrast": { - "class": "fg-contrast", - "classes": [ - "fg-contrast-primary", - "fg-contrast-accent", - "fg-contrast-success", - "fg-contrast-danger", - "fg-contrast-warning", - "fg-contrast-info", - "fg-contrast-inverse", - "fg-contrast-secondary" - ] - }, "link-opacity": { "class": "link", "property": "color", @@ -1077,6 +1077,31 @@ "bg-100" ] }, + "theme-contrast": { + "class": "theme-contrast", + "classes": [ + "theme-contrast" + ] + }, + "theme-subtle": { + "class": "theme-subtle", + "classes": [ + "theme-subtle" + ] + }, + "theme-muted": { + "class": "theme-muted", + "classes": [ + "theme-muted" + ] + }, + "theme-border": { + "class": "theme-border", + "property": "border", + "classes": [ + "theme-border" + ] + }, "gradient": { "class": "bg", "property": "background-image", diff --git a/scss/_colors.scss b/scss/_colors.scss index 8e08a9f016..af7f03ce41 100644 --- a/scss/_colors.scss +++ b/scss/_colors.scss @@ -3,7 +3,7 @@ // 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-blue: oklch(60% 0.24 240) !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; diff --git a/scss/_progress.scss b/scss/_progress.scss index 3edbd911c8..20fe987ae2 100644 --- a/scss/_progress.scss +++ b/scss/_progress.scss @@ -57,10 +57,10 @@ $progress-bar-transition: width .6s ease !default; flex-direction: column; justify-content: center; overflow: hidden; - color: var(--progress-bar-color); + color: var(--theme-contrast, var(--progress-bar-color)); text-align: center; white-space: nowrap; - background-color: var(--progress-bar-bg); + background-color: var(--theme-bg, var(--progress-bar-bg)); @include transition(var(--progress-bar-transition)); } diff --git a/scss/_utilities.scss b/scss/_utilities.scss index a7f1919c91..a1c1aad785 100644 --- a/scss/_utilities.scss +++ b/scss/_utilities.scss @@ -735,11 +735,6 @@ $utilities: map.merge( class: fg-emphasis, values: theme-color-values("text-emphasis"), ), - "fg-opacity": ( - class: fg, - property: color, - values: theme-opacity-values(--fg) - ), "fg-contrast": ( property: ( "--fg": null, @@ -748,6 +743,11 @@ $utilities: map.merge( class: fg-contrast, values: theme-color-values("contrast"), ), + "fg-opacity": ( + class: fg, + property: color, + values: theme-opacity-values(--fg) + ), // scss-docs-end utils-color // scss-docs-start utils-links "link-opacity": ( @@ -824,6 +824,38 @@ $utilities: map.merge( values: theme-opacity-values(--bg) ), // scss-docs-end utils-bg-color + // scss-docs-start utils-theme + // Theme style utilities - pair with .theme-{color} to apply coordinated bg + text colors + "theme-contrast": ( + property: ( + "background-color": var(--theme-bg), + "color": var(--theme-contrast) + ), + class: theme-contrast, + values: (null: null) + ), + "theme-subtle": ( + property: ( + "background-color": var(--theme-bg-subtle), + "color": var(--theme-text) + ), + class: theme-subtle, + values: (null: null) + ), + "theme-muted": ( + property: ( + "background-color": var(--theme-bg-muted), + "color": var(--theme-text-emphasis) + ), + class: theme-muted, + values: (null: null) + ), + "theme-border": ( + property: border, + class: theme-border, + values: (null: var(--border-width) solid var(--theme-border)) + ), + // scss-docs-end utils-theme "gradient": ( property: background-image, class: bg, diff --git a/scss/helpers/_color-bg.scss b/scss/helpers/_color-bg.scss deleted file mode 100644 index 410e25806c..0000000000 --- a/scss/helpers/_color-bg.scss +++ /dev/null @@ -1,16 +0,0 @@ -@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 $new-theme-colors { - .text-bg-#{$color} { - color: var(--#{$color}-text); - --bg: var(--#{$color}-bg-subtle); - // color: color-contrast($value); - // background-color: RGBA(var(--#{$color}-rgb), var(--bg-opacity, 1)); - } - } -} diff --git a/scss/helpers/index.scss b/scss/helpers/index.scss index 450afce02a..90e88eaa73 100644 --- a/scss/helpers/index.scss +++ b/scss/helpers/index.scss @@ -1,4 +1,3 @@ -@forward "color-bg"; @forward "focus-ring"; @forward "icon-link"; @forward "position"; diff --git a/site/data/sidebar.yml b/site/data/sidebar.yml index b22b80f6a1..ec230f92e0 100644 --- a/site/data/sidebar.yml +++ b/site/data/sidebar.yml @@ -109,7 +109,6 @@ icon: magic icon_color: orange pages: - - title: Color & background - title: Focus ring - title: Icon link - title: Position @@ -128,6 +127,7 @@ pages: - title: Colors - title: Background + - title: Theme - group: Layout pages: - title: Aspect ratio diff --git a/site/src/assets/examples/album-rtl/index.astro b/site/src/assets/examples/album-rtl/index.astro index d02e9f4044..a5e224a00b 100644 --- a/site/src/assets/examples/album-rtl/index.astro +++ b/site/src/assets/examples/album-rtl/index.astro @@ -206,6 +206,6 @@ export const direction = 'rtl' عد إلى الأعلى

مثال الألبوم هو © Bootstrap ، ولكن يرجى تنزيله وتخصيصه لنفسك!

-

جديد على Bootstrap؟ تفضل بزيارة الصفحة الرئيسية أو اقرأ دليل البدء .

+

جديد على Bootstrap؟ تفضل بزيارة الصفحة الرئيسية أو اقرأ دليل البدء .

diff --git a/site/src/assets/examples/album/index.astro b/site/src/assets/examples/album/index.astro index 9b5279302a..204062c52a 100644 --- a/site/src/assets/examples/album/index.astro +++ b/site/src/assets/examples/album/index.astro @@ -205,6 +205,6 @@ import Placeholder from "@shortcodes/Placeholder.astro" Back to top

Album example is © Bootstrap, but please download and customize it for yourself!

-

New to Bootstrap? Visit the homepage or read our getting started guide.

+

New to Bootstrap? Visit the homepage or read our getting started guide.

diff --git a/site/src/assets/examples/starter-template/index.astro b/site/src/assets/examples/starter-template/index.astro index 8b2ef1045f..7241922e70 100644 --- a/site/src/assets/examples/starter-template/index.astro +++ b/site/src/assets/examples/starter-template/index.astro @@ -69,9 +69,9 @@ export const title = 'Starter Template'

Read more detailed instructions and documentation on using or contributing to Bootstrap.

`} /> diff --git a/site/src/content/docs/components/progress.mdx b/site/src/content/docs/components/progress.mdx index 264c06b602..5f52ede00a 100644 --- a/site/src/content/docs/components/progress.mdx +++ b/site/src/content/docs/components/progress.mdx @@ -90,19 +90,19 @@ Use background utility classes to change the appearance of individual progress b
-If you’re adding labels to progress bars with a custom background color, make sure to also set an appropriate [text color]([[docsref:/utilities/colors#colors]]), so the labels remain readable and have sufficient contrast. We recommend using the [color and background]([[docsref:/helpers/color-background]]) helper classes. +If you’re adding labels to progress bars with a custom background color, make sure to also set an appropriate [text color]([[docsref:/utilities/colors#colors]]), so the labels remain readable and have sufficient contrast. We recommend using the [theme contrast]([[docsref:/utilities/theme#contrast]]) helper classes. -
25%
+
25%
-
50%
+
50%
-
75%
+
75%
-
100%
+
100%
`} /> ## Multiple bars diff --git a/site/src/content/docs/customize/color-modes.mdx b/site/src/content/docs/customize/color-modes.mdx index 74cb60f353..77b4a60d0a 100644 --- a/site/src/content/docs/customize/color-modes.mdx +++ b/site/src/content/docs/customize/color-modes.mdx @@ -67,7 +67,7 @@ For example, to change the color mode of a dropdown menu, add `data-bs-theme="li ### Enable dark mode -Enable the built in dark color mode across your entire project by adding the `data-bs-theme="dark"` attribute to the `` element. This will apply the dark color mode to all components and elements, other than those with a specific `data-bs-theme` attribute applied. Building on the [quick start template]([[docsref:/getting-started/introduction#quick-start]]): +Enable the built in dark color mode across your entire project by adding the `data-bs-theme="dark"` attribute to the `` element. This will apply the dark color mode to all components and elements, other than those with a specific `data-bs-theme` attribute applied. Building on the [quick start template]([[docsref:/guides/quickstart/]]): ```html diff --git a/site/src/content/docs/customize/overview.mdx b/site/src/content/docs/customize/overview.mdx index cf4289dbe2..b6566e8132 100644 --- a/site/src/content/docs/customize/overview.mdx +++ b/site/src/content/docs/customize/overview.mdx @@ -33,7 +33,7 @@ Our two preferred methods are: While we cannot go into details here on how to use every package manager, we can give some guidance on [using Bootstrap with your own Sass compiler]([[docsref:/customize/sass]]). -For those who want to use the distribution files, review the [getting started page]([[docsref:/getting-started/introduction]]) for how to include those files and an example HTML page. From there, consult the docs for the layout, components, and behaviors you’d like to use. +For those who want to use the distribution files, review the [getting started page]([[docsref:/guides/quickstart]]) for how to include those files and an example HTML page. From there, consult the docs for the layout, components, and behaviors you’d like to use. 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. diff --git a/site/src/content/docs/getting-started/approach.mdx b/site/src/content/docs/getting-started/approach.mdx index 9ceea05f34..9215bc635d 100644 --- a/site/src/content/docs/getting-started/approach.mdx +++ b/site/src/content/docs/getting-started/approach.mdx @@ -41,7 +41,7 @@ Bootstrap is developed *mobile first*, a strategy in which we optimize code for ``` -You can see an example of this in action in [the quick start]([[docsref:/getting-started/introduction#quick-start]]). +You can see an example of this in action in [the quick start]([[docsref:/guides/quickstart/]]). ### Box-sizing diff --git a/site/src/content/docs/getting-started/install.mdx b/site/src/content/docs/getting-started/install.mdx index ace55374ee..9d326a768c 100644 --- a/site/src/content/docs/getting-started/install.mdx +++ b/site/src/content/docs/getting-started/install.mdx @@ -2,6 +2,10 @@ title: Install Bootstrap description: Add Bootstrap to your project with CDN, package manager, or source files. toc: true +aliases: + - "/docs/[[config:docs_version]]/getting-started/" + - "/docs/getting-started/" + - "/getting-started/" --- ## Install diff --git a/site/src/content/docs/getting-started/introduction.mdx b/site/src/content/docs/getting-started/introduction.mdx deleted file mode 100644 index 99a67985eb..0000000000 --- a/site/src/content/docs/getting-started/introduction.mdx +++ /dev/null @@ -1,9 +0,0 @@ ---- -title: Basics of Bootstrap -description: Bootstrap is a powerful, feature-packed frontend toolkit. Build anything—from prototype to production—in minutes. -aliases: - - "/docs/[[config:docs_version]]/getting-started/" - - "/docs/getting-started/" - - "/getting-started/" -toc: true ---- diff --git a/site/src/content/docs/getting-started/rtl.mdx b/site/src/content/docs/getting-started/rtl.mdx index 4714fe4ec7..7822a6be42 100644 --- a/site/src/content/docs/getting-started/rtl.mdx +++ b/site/src/content/docs/getting-started/rtl.mdx @@ -5,7 +5,7 @@ toc: true --- - **ProTip:** Get familiar with Bootstrap first with our [getting started guide]([[docsref:/getting-started/introduction]]) before working with RTL. + **ProTip:** Get familiar with Bootstrap first with our [getting started guide]([[docsref:/getting-started/]]) before working with RTL. ## How it works diff --git a/site/src/content/docs/guides/npm.mdx b/site/src/content/docs/guides/npm.mdx index 9639e9ed2d..4fe2a720d2 100644 --- a/site/src/content/docs/guides/npm.mdx +++ b/site/src/content/docs/guides/npm.mdx @@ -5,7 +5,7 @@ toc: true thumbnail: guides/bootstrap-npm@2x.png --- - + **Want to skip to the end?** Download the source code and working demo for this guide from the [twbs/examples repository](https://github.com/twbs/examples/tree/sass-js/). You can also [open the example in StackBlitz](https://stackblitz.com/github/twbs/examples/tree/main/sass-js?file=index.html). diff --git a/site/src/content/docs/guides/quickstart.mdx b/site/src/content/docs/guides/quickstart.mdx index f9e86ba7ef..f029999dbf 100644 --- a/site/src/content/docs/guides/quickstart.mdx +++ b/site/src/content/docs/guides/quickstart.mdx @@ -9,8 +9,6 @@ Get started using Bootstrap in seconds by including our production-ready CSS and **Got the gist already?** See the end result in this [Bootstrap CodePen demo](https://codepen.io/team/bootstrap/pen/qBamdLj). -
- 1. **Create a new `index.html` file in your project root.** Include the `` tag as well for [proper responsive behavior](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/meta/name/viewport) in mobile devices. ```html diff --git a/site/src/content/docs/helpers/color-background.mdx b/site/src/content/docs/helpers/color-background.mdx deleted file mode 100644 index fa62d3fcae..0000000000 --- a/site/src/content/docs/helpers/color-background.mdx +++ /dev/null @@ -1,41 +0,0 @@ ---- -title: Color and background -description: Set a background color with contrasting foreground color. -toc: true ---- - -import { getData } from '@libs/data' - -## Overview - -Color and background helpers combine the power of our [`.text-*` utilities]([[docsref:/utilities/colors]]) and [`.bg-*` utilities]([[docsref:/utilities/background]]) in one class. Using our Sass `color-contrast()` function, we automatically determine a contrasting `color` for a particular `background-color`. - - -**Heads up!** There’s currently no support for a CSS-native `color-contrast` function, so we use our own via Sass. This means that customizing our theme colors via CSS variables may cause color contrast issues with these utilities. - - - `
${themeColor.title} with contrasting color
`)} /> - -
- -## With components - -Use them in place of combined `.text-*` and `.bg-*` classes, like on [badges]([[docsref:/components/badge#background-colors]]): - -Primary -Info`} /> - -Or on [cards]([[docsref:/components/card#background-and-color]]): - - -
Header
-
-

Some quick example text to build on the card title and make up the bulk of the card’s content.

-
- -
-
Header
-
-

Some quick example text to build on the card title and make up the bulk of the card’s content.

-
-
`} /> diff --git a/site/src/content/docs/utilities/background.mdx b/site/src/content/docs/utilities/background.mdx index 556a38b8d3..1da4f86662 100644 --- a/site/src/content/docs/utilities/background.mdx +++ b/site/src/content/docs/utilities/background.mdx @@ -50,12 +50,10 @@ By adding a `.bg-gradient` class, a linear gradient is added as background image Do you need a gradient in your custom CSS? Just add `background-image: var(--bs-gradient);`. -{getData('theme-colors').map((themeColor) => { - return ( -
.bg-{themeColor.name}.bg-gradient
- ) -})} -
.bg-black.bg-gradient
+ `
.bg-${themeColor.name}.bg-gradient
`), + `
.bg-black.bg-gradient
` +]} /> ## Opacity diff --git a/site/src/content/docs/utilities/colors.mdx b/site/src/content/docs/utilities/colors.mdx index 9a50bbab57..b2165d1968 100644 --- a/site/src/content/docs/utilities/colors.mdx +++ b/site/src/content/docs/utilities/colors.mdx @@ -59,6 +59,38 @@ Change the opacity of a text color by using any of the `.fg-` utilit
This is 20% opacity primary text
This is 10% opacity primary text
`} /> +## Contrast colors + +Change the contrast color of a text or link with `.fg-contrast-{color}`. This will set the `--bs-fg` variable to the theme’s `contrast` key color. +```css +.fg-contrast-primary { + --bs-fg: var(--bs-white); + color: var(--bs-fg); +} +``` + +.fg-contrast-primary

+

.fg-contrast-accent

+

.fg-contrast-success

+

.fg-contrast-danger

+

.fg-contrast-warning

+

.fg-contrast-info

+

.fg-contrast-inverse

+

.fg-contrast-secondary

`} /> + +These even mix with the opacity utilities. + +.fg-contrast-primary fg-100

+

.fg-contrast-primary fg-90

+

.fg-contrast-primary fg-80

+

.fg-contrast-primary fg-70

+

.fg-contrast-primary fg-60

+

.fg-contrast-primary fg-50

+

.fg-contrast-primary fg-40

+

.fg-contrast-primary fg-30

+

.fg-contrast-primary fg-20

+

.fg-contrast-primary fg-10

`} /> + ## Reset color Reset a text or link's color with `.text-reset`, so that it inherits the color from its parent. diff --git a/site/src/content/docs/utilities/position.mdx b/site/src/content/docs/utilities/position.mdx index 7426030253..1b6f904491 100644 --- a/site/src/content/docs/utilities/position.mdx +++ b/site/src/content/docs/utilities/position.mdx @@ -88,15 +88,15 @@ By adding `.translate-middle-x` or `.translate-middle-y` classes, elements can b Here are some real life examples of these classes: - Mails +99 + Mails +99 -
- Marker +
+ Marker
`} /> You can use these classes with existing components to create new ones. Remember that you can extend its functionality by adding entries to the `$position-values` variable. @@ -105,9 +105,9 @@ You can use these classes with existing components to create new ones. Remember
- - - + + +
`} /> ## CSS diff --git a/site/src/content/docs/utilities/theme.mdx b/site/src/content/docs/utilities/theme.mdx new file mode 100644 index 0000000000..59c42b3946 --- /dev/null +++ b/site/src/content/docs/utilities/theme.mdx @@ -0,0 +1,108 @@ +--- +title: Theme +description: Combine one of three theme utilities with our theme color classes to set `color` and `background-color` pairings on any element, just like component variants. +toc: true +utility: + - theme-contrast + - theme-subtle + - theme-muted + - theme-border +--- + +import { getData } from '@libs/data' + +## Overview + +Take any of our theme color classes and add `.theme-contrast`, `.theme-subtle`, or `.theme-muted` to set a predefined `color and `background-color` pairing. Then optionally add `.theme-border` to set a predefined border color. For more information on how theme colors work, see the [Theme documentation]([[docsref:/customize/theme]]) in our Customize section. + +### Contrast + +Contrast pairs the `bg` theme token with the `contrast` text color for maximum readability. This is ideal for high-emphasis elements with solid backgrounds. + + `
.theme-${themeColor.name} .theme-contrast
`)} /> + +### Subtle + +Subtle pairs the `bg-subtle` theme token with the `text` text color for a lower-contrast, more subtle appearance. This combination will automatically adjust to the current color mode. + + `
.theme-${themeColor.name} .theme-subtle
`)} /> + +And with borders: + + `
.theme-${themeColor.name} .theme-subtle
`)} /> + +### Muted + +Muted pairs the `bg-muted` theme token with the `text-emphasis` text color for a lower-contrast, more muted appearance. Like subtle, this combination will automatically adjust to the current color mode. + + `
.theme-${themeColor.name} .theme-muted
`)} /> + +And with borders: + + `
.theme-${themeColor.name} .theme-muted
`)} /> + +## Comparison + +Here's a side-by-side comparison of all three styles for each theme color: + + `
+
${themeColor.title} contrast
+
${themeColor.title} subtle
+
${themeColor.title} muted
+
`)} /> + +## With components + +Theme utilities work great with components that support theming. Apply the theme color to a container and use theme style classes on individual elements. + + +
+ Contrast badge + Subtle badge + Muted badge +
+ +
+
+ Contrast badge + Subtle badge + Muted badge +
+
`} /> + +You can also mix theme colors within the same container by applying different `.theme-{color}` classes to child elements: + + +
Success
+
Warning
+
Danger
+ `} /> + +## CSS + +### Generated CSS + +The theme style classes generate the following CSS: + +```css +.theme-contrast { + background-color: var(--theme-bg); + color: var(--theme-contrast); +} + +.theme-subtle { + background-color: var(--theme-bg-subtle); + color: var(--theme-text); +} + +.theme-muted { + background-color: var(--theme-bg-muted); + color: var(--theme-text-emphasis); +} +``` + +### Sass utilities API + +Theme utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]([[docsref:/utilities/api#using-the-api]]) + + diff --git a/site/src/pages/docs/[version]/index.astro b/site/src/pages/docs/[version]/index.astro index 461760fb20..30b057a7b6 100644 --- a/site/src/pages/docs/[version]/index.astro +++ b/site/src/pages/docs/[version]/index.astro @@ -12,4 +12,4 @@ export function getStaticPaths() { } --- - + diff --git a/site/src/pages/docs/index.astro b/site/src/pages/docs/index.astro index e1796424dc..3a924b6da5 100644 --- a/site/src/pages/docs/index.astro +++ b/site/src/pages/docs/index.astro @@ -3,4 +3,4 @@ import RedirectLayout from '@layouts/RedirectLayout.astro' import { getVersionedDocsPath } from '@libs/path' --- - + diff --git a/site/src/scss/_callouts.scss b/site/src/scss/_callouts.scss index b2da95f388..63cdcea182 100644 --- a/site/src/scss/_callouts.scss +++ b/site/src/scss/_callouts.scss @@ -14,8 +14,6 @@ --code-color: var(--bd-callout-code-color); padding: 1.25rem; - margin-top: 1.25rem; - margin-bottom: 1.25rem; font-size: .875rem; line-height: 1.5; // color: var(--bd-callout-color, inherit); diff --git a/site/src/scss/_component-examples.scss b/site/src/scss/_component-examples.scss index f5ba91d5fe..36931f00b2 100644 --- a/site/src/scss/_component-examples.scss +++ b/site/src/scss/_component-examples.scss @@ -45,6 +45,13 @@ } } + li > .bd-code-snippet { + margin-block: 1.25rem; + } + li:last-child > .bd-code-snippet:last-child { + margin-bottom: 0; + } + .highlight-toolbar { padding-block: .375rem; padding-inline-start: var(--bd-example-padding); @@ -310,13 +317,13 @@ .position-relative { height: 200px; - background-color: var(--bs-tertiary-bg); + background-color: var(--bs-bg-2); } .position-absolute { width: 2rem; height: 2rem; - background-color: var(--bs-body-color); + background-color: var(--bs-fg-2); @include border-radius(); } } -- 2.47.3