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/content/docs/components/list-group.mdx b/site/src/content/docs/components/list-group.mdx index 3b08bd0b21..cfdf9fd97b 100644 --- a/site/src/content/docs/components/list-group.mdx +++ b/site/src/content/docs/components/list-group.mdx @@ -92,21 +92,21 @@ These work great with custom content as well.
Subheading
Content for list item - 14 + 14
  • Subheading
    Content for list item
    - 14 + 14
  • Subheading
    Content for list item
    - 14 + 14
    • `} /> @@ -155,15 +155,15 @@ Add badges to any list group item to show unread counts, activity, and more with
  • A list item - 14 + 14
  • A second list item - 2 + 2
  • A third list item - 1 + 1
    • `} /> 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/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..410b8d0494 --- /dev/null +++ b/site/src/content/docs/utilities/theme.mdx @@ -0,0 +1,109 @@ +--- +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/scss/_component-examples.scss b/site/src/scss/_component-examples.scss index f5ba91d5fe..54a0456c5c 100644 --- a/site/src/scss/_component-examples.scss +++ b/site/src/scss/_component-examples.scss @@ -310,13 +310,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(); } }