Colors
Convey meaning through color with a handful of color utility classes.
On this page
Accessibility tip: Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies like screen readers. Please ensure the meaning is obvious from the content itself (e.g., the visible text with a sufficient color contrast) or is included through alternative means, such as additional text hidden with the .visually-hidden class.
ColorsLink to this section: Colors
Colorize text with color utilities. To colorize icons, please refer to our icon color section.
OUDS Web provides many .text-* and .bg-* utilities, but they should be used with care to meet our design specifications and WCAG 2.2 accessibility standards for color contrast.
To be sure to respect the specifications, it is necessary to define color, background-color and font-size altogether.
Thus, the .text-brand-primary color on light background (#f15e00) should only be used in a font size greater than 24px (using for example .fs-ds utility), or 19px bold (using for example .fs-hm and .fw-bold utilities).
The .text-brand-primary color on dark background (#ff7900) can be used in any size.
Know that apart .text-brand-primary, .text-default and .text-muted, most of these utilities should be avoided since they are very contextual and you should rather use our color modes directly as explained in our background utilities to set nested components in the right mode directly as well.
Here are some compliant combinations examples for texts:
Text brand-primary
Text default
Text muted
Text disabled
Text always-black
Text always-white
Text on-brand-primary
Text on-status-accent-emphasized
Text on-status-accent-muted
Text on-status-info-emphasized
Text on-status-info-muted
Text on-status-negative-emphasized
Text on-status-negative-muted
Text on-status-neutral-emphasized
Text on-status-neutral-muted
Text on-status-positive-emphasized
Text on-status-positive-muted
Text on-status-warning-emphasized
Text on-status-warning-muted
Text always-on-black
Text always-on-white
<p class="text-brand-primary p-sm">Text brand-primary</p>
<p class="text-default p-sm">Text default</p>
<p class="text-muted p-sm">Text muted</p>
<p class="text-disabled p-sm">Text disabled</p>
<p class="text-always-black p-sm">Text always-black</p>
<p class="text-always-white p-sm">Text always-white</p>
<p class="text-on-brand-primary bg-brand-primary p-sm">Text on-brand-primary</p>
<p class="text-on-status-accent-emphasized bg-status-accent-emphasized p-sm">Text on-status-accent-emphasized</p>
<p class="text-on-status-accent-muted bg-status-accent-muted p-sm">Text on-status-accent-muted</p>
<p class="text-on-status-info-emphasized bg-status-info-emphasized p-sm">Text on-status-info-emphasized</p>
<p class="text-on-status-info-muted bg-status-info-muted p-sm">Text on-status-info-muted</p>
<p class="text-on-status-negative-emphasized bg-status-negative-emphasized p-sm">Text on-status-negative-emphasized</p>
<p class="text-on-status-negative-muted bg-status-negative-muted p-sm">Text on-status-negative-muted</p>
<p class="text-on-status-neutral-emphasized bg-status-neutral-emphasized p-sm">Text on-status-neutral-emphasized</p>
<p class="text-on-status-neutral-muted bg-status-neutral-muted p-sm">Text on-status-neutral-muted</p>
<p class="text-on-status-positive-emphasized bg-status-positive-emphasized p-sm">Text on-status-positive-emphasized</p>
<p class="text-on-status-positive-muted bg-status-positive-muted p-sm">Text on-status-positive-muted</p>
<p class="text-on-status-warning-emphasized bg-status-warning-emphasized p-sm">Text on-status-warning-emphasized</p>
<p class="text-on-status-warning-muted bg-status-warning-muted p-sm">Text on-status-warning-muted</p>
<p class="text-always-on-black bg-always-black p-sm">Text always-on-black</p>
<p class="text-always-on-white bg-always-white p-sm">Text always-on-white</p>If you don’t see the couple you need in the following table, please mind using one of the table or check that the contrast between the text and the background is at least 4.5 for normal text and 3 for large text.
These text categories are some accessibility text categories commonly used. They divide the texts into two categories:
- Large texts are texts that are at least 24px or 19px bold. This corresponds to at least
.fs-hland above or.fs-hmbold and above in OUDS Web. - Normal texts are the remaining texts references.
In the following table we assume that the context is switching between light and dark mode and the use of data-bs-theme is correctly used.
| Color utility | Allowed .bg-* utility for normal and large texts | Allowed .bg-* utility for large text only |
|---|---|---|
.text-brand-primary | .bg-emphasized, .bg-always-black | .bg-primary, .bg-secondary, .bg-tertiary, .bg-status-neutral-emphasized, .bg-status-neutral-muted, .bg-always-white |
.text-default | All .bg-* are allowed. | — |
.text-muted | All .bg-* are allowed. | — |
.text-disabled must be used carefully in a disabled context only. | All .bg-* are allowed. | — |
.text-always-black | .bg-brand-primary, .bg-status-accent-emphasized, .bg-status-positive-emphasized, .bg-status-warning-emphasized, .bg-status-info-emphasized, .bg-always-white | — |
.text-always-white | .bg-emphasized, .bg-always-black | — |
.text-on-brand-primary | .bg-brand-primary | — |
.text-on-status-accent-emphasized | .bg-status-accent-emphasized | — |
.text-on-status-accent-muted | .bg-status-accent-muted | — |
.text-on-status-info-emphasized | .bg-status-info-emphasized | — |
.text-on-status-info-muted | .bg-status-info-muted | — |
.text-on-status-negative-emphasized | .bg-status-negative-emphasized | — |
.text-on-status-negative-muted | .bg-status-negative-muted | — |
.text-on-status-neutral-emphasized | .bg-status-neutral-emphasized | — |
.text-on-status-neutral-muted | .bg-status-neutral-muted | — |
.text-on-status-positive-emphasized | .bg-status-positive-emphasized | — |
.text-on-status-positive-muted | .bg-status-positive-muted | — |
.text-on-status-warning-emphasized | .bg-status-warning-emphasized | — |
.text-on-status-warning-muted | .bg-status-warning-muted | — |
.text-always-on-black | .bg-emphasized, .bg-always-black | — |
.text-always-on-white | .bg-brand-primary, .bg-status-accent-emphasized, .bg-status-positive-emphasized, .bg-status-warning-emphasized, .bg-status-info-emphasized, .bg-always-white | — |
Bootstrap
$enable-bootstrap-compatibility: true
This part is enabled only when $enable-bootstrap-compatibility is set to true. Read more
about Bootstrap compatibility.
.text-primary
.text-primary-emphasis
.text-secondary
.text-secondary-emphasis
.text-success
.text-success-emphasis
.text-danger
.text-danger-emphasis
.text-warning
.text-warning-emphasis
.text-info
.text-info-emphasis
.text-light
.text-light-emphasis
.text-dark
.text-dark-emphasis
.text-body
.text-body-emphasis
.text-body-secondary
.text-body-tertiary
.text-black
.text-white
.text-black-50
.text-white-50
<p class="text-primary">.text-primary</p>
<p class="text-primary-emphasis">.text-primary-emphasis</p>
<p class="text-secondary">.text-secondary</p>
<p class="text-secondary-emphasis">.text-secondary-emphasis</p>
<p class="text-success">.text-success</p>
<p class="text-success-emphasis">.text-success-emphasis</p>
<p class="text-danger">.text-danger</p>
<p class="text-danger-emphasis">.text-danger-emphasis</p>
<p class="text-warning bg-black">.text-warning</p>
<p class="text-warning-emphasis bg-black">.text-warning-emphasis</p>
<p class="text-info">.text-info</p>
<p class="text-info-emphasis">.text-info-emphasis</p>
<p class="text-light">.text-light</p>
<p class="text-light-emphasis">.text-light-emphasis</p>
<p class="text-dark">.text-dark</p>
<p class="text-dark-emphasis">.text-dark-emphasis</p>
<p class="text-body">.text-body</p>
<p class="text-body-emphasis">.text-body-emphasis</p>
<p class="text-body-secondary">.text-body-secondary</p>
<p class="text-body-tertiary">.text-body-tertiary</p>
<p class="text-black bg-white">.text-black</p>
<p class="text-white bg-black">.text-white</p>
<p class="text-black-50">.text-black-50</p>
<p class="text-white-50">.text-white-50</p>.text-black-50 and .text-white-50 are deprecated as of Bootstrap v5.1.0. They’ll be removed in Bootstrap v6.0.0.
On iconsLink to this section: On icons
See icons documentation to learn how to use color utilities on icons.
SpecificityLink to this section: Specificity
Sometimes contextual classes cannot be applied due to the specificity of another selector. In some cases, a sufficient workaround is to wrap your element’s content in a <div> or more semantic element with the desired class.
CSSLink to this section: CSS
Sass tokensLink to this section: Sass tokens
Semantic tokensLink to this section: Semantic tokens
Color semantic tokens as Sass variables. Should not be used as-is. Prefer use our CSS semantic tokens.
$ouds-color-action-disabled-dark: $core-ouds-color-opacity-white-200;
$ouds-color-action-disabled-light: $core-ouds-color-opacity-black-200;
$ouds-color-action-enabled-dark: $core-ouds-color-functional-gray-light-160;
$ouds-color-action-enabled-light: $core-ouds-color-functional-black;
$ouds-color-action-focus-dark: $core-ouds-color-opacity-white-640;
$ouds-color-action-focus-light: $core-ouds-color-opacity-black-680;
$ouds-color-action-highlighted-dark: $core-ouds-color-functional-gray-light-160;
$ouds-color-action-highlighted-light: $core-ouds-color-functional-black;
$ouds-color-action-hover-dark: $core-ouds-color-opacity-white-640;
$ouds-color-action-hover-light: $core-ouds-color-opacity-black-680;
$ouds-color-action-loading-dark: $core-orange-color-orange-500;
$ouds-color-action-loading-light: $core-orange-color-orange-550;
$ouds-color-action-negative-enabled-dark: $core-ouds-color-functional-scarlet-300;
$ouds-color-action-negative-enabled-light: $core-ouds-color-functional-scarlet-600;
$ouds-color-action-negative-focus-dark: $core-ouds-color-functional-scarlet-200;
$ouds-color-action-negative-focus-light: $core-ouds-color-functional-scarlet-700;
$ouds-color-action-negative-hover-dark: $core-ouds-color-functional-scarlet-200;
$ouds-color-action-negative-hover-light: $core-ouds-color-functional-scarlet-700;
$ouds-color-action-negative-loading-dark: $core-ouds-color-functional-scarlet-100;
$ouds-color-action-negative-loading-light: $core-ouds-color-functional-scarlet-800;
$ouds-color-action-negative-pressed-dark: $core-ouds-color-functional-scarlet-100;
$ouds-color-action-negative-pressed-light: $core-ouds-color-functional-scarlet-800;
$ouds-color-action-pressed-dark: $core-orange-color-orange-500;
$ouds-color-action-pressed-light: $core-orange-color-orange-550;
$ouds-color-action-selected-dark: $core-orange-color-orange-500;
$ouds-color-action-selected-light: $core-orange-color-orange-550;
$ouds-color-action-support-enabled-dark: $core-ouds-color-opacity-white-40;
$ouds-color-action-support-enabled-light: $core-ouds-color-opacity-black-40;
$ouds-color-action-support-focus-dark: $core-ouds-color-opacity-white-80;
$ouds-color-action-support-focus-light: $core-ouds-color-opacity-black-80;
$ouds-color-action-support-hover-dark: $core-ouds-color-opacity-white-80;
$ouds-color-action-support-hover-light: $core-ouds-color-opacity-black-80;
$ouds-color-action-support-loading-dark: $core-ouds-color-opacity-white-120;
$ouds-color-action-support-loading-light: $core-ouds-color-opacity-black-120;
$ouds-color-action-support-pressed-dark: $core-ouds-color-opacity-white-120;
$ouds-color-action-support-pressed-light: $core-ouds-color-opacity-black-120;
$ouds-color-action-visited-dark: $core-orange-color-decorative-amethyst-400;
$ouds-color-action-visited-light: $core-orange-color-decorative-amethyst-600;
$ouds-color-always-black: $core-ouds-color-functional-black;
$ouds-color-always-on-black: $core-ouds-color-functional-gray-light-160;
$ouds-color-always-on-white: $core-ouds-color-functional-black;
$ouds-color-always-white: $core-ouds-color-functional-white;
$ouds-color-bg-emphasized-dark: $core-ouds-color-functional-gray-dark-640;
$ouds-color-bg-emphasized-light: $core-ouds-color-functional-gray-dark-880;
$ouds-color-bg-primary-dark: $core-ouds-color-functional-gray-dark-880;
$ouds-color-bg-primary-light: $core-ouds-color-functional-white;
$ouds-color-bg-secondary-dark: $core-ouds-color-functional-gray-dark-800;
$ouds-color-bg-secondary-light: $core-ouds-color-functional-gray-light-80;
$ouds-color-bg-tertiary-dark: $core-orange-color-warm-gray-1000;
$ouds-color-bg-tertiary-light: $core-orange-color-warm-gray-100;
$ouds-color-border-brand-primary-dark: $core-orange-color-orange-500;
$ouds-color-border-brand-primary-light: $core-orange-color-orange-550;
$ouds-color-border-default-dark: $core-ouds-color-opacity-white-200;
$ouds-color-border-default-light: $core-ouds-color-opacity-black-200;
$ouds-color-border-emphasized-dark: $core-ouds-color-opacity-white-920;
$ouds-color-border-emphasized-light: $core-ouds-color-functional-black;
$ouds-color-border-focus-dark: $core-ouds-color-functional-gray-light-160;
$ouds-color-border-focus-inset-dark: $core-ouds-color-functional-gray-dark-880;
$ouds-color-border-focus-inset-light: $core-ouds-color-functional-white;
$ouds-color-border-focus-light: $core-ouds-color-functional-black;
$ouds-color-border-muted-dark: $core-ouds-color-opacity-white-80;
$ouds-color-border-muted-light: $core-ouds-color-opacity-black-80;
$ouds-color-border-on-brand-primary-dark: $core-ouds-color-functional-black;
$ouds-color-border-on-brand-primary-light: $core-ouds-color-functional-black;
$ouds-color-content-brand-primary-dark: $core-orange-color-orange-500;
$ouds-color-content-brand-primary-light: $core-orange-color-orange-550; // Test for support Figma
$ouds-color-content-default-dark: $core-ouds-color-functional-gray-light-160;
$ouds-color-content-default-light: $core-ouds-color-functional-black;
$ouds-color-content-disabled-dark: $core-ouds-color-opacity-white-200;
$ouds-color-content-disabled-light: $core-ouds-color-opacity-black-200;
$ouds-color-content-muted-dark: $core-ouds-color-opacity-white-640;
$ouds-color-content-muted-light: $core-ouds-color-opacity-black-680;
$ouds-color-content-on-action-disabled-dark: $core-ouds-color-functional-black;
$ouds-color-content-on-action-disabled-light: $core-ouds-color-functional-white;
$ouds-color-content-on-action-enabled-dark: $core-ouds-color-functional-black;
$ouds-color-content-on-action-enabled-light: $core-ouds-color-functional-white;
$ouds-color-content-on-action-focus-dark: $core-ouds-color-functional-black;
$ouds-color-content-on-action-focus-light: $core-ouds-color-functional-white;
$ouds-color-content-on-action-highlighted-dark: $core-ouds-color-functional-black;
$ouds-color-content-on-action-highlighted-light: $core-ouds-color-functional-white;
$ouds-color-content-on-action-hover-dark: $core-ouds-color-functional-black;
$ouds-color-content-on-action-hover-light: $core-ouds-color-functional-white;
$ouds-color-content-on-action-loading-dark: $core-ouds-color-functional-black;
$ouds-color-content-on-action-loading-light: $core-ouds-color-functional-white;
$ouds-color-content-on-action-pressed-dark: $core-ouds-color-functional-black;
$ouds-color-content-on-action-pressed-light: $core-ouds-color-functional-white;
$ouds-color-content-on-brand-primary-dark: $core-ouds-color-functional-black;
$ouds-color-content-on-brand-primary-light: $core-ouds-color-functional-black;
$ouds-color-content-on-overlay-emphasized-dark: $core-ouds-color-functional-black;
$ouds-color-content-on-overlay-emphasized-light: $core-ouds-color-functional-white;
$ouds-color-content-on-status-accent-emphasized-dark: $core-ouds-color-functional-black;
$ouds-color-content-on-status-accent-emphasized-light: $core-ouds-color-functional-black;
$ouds-color-content-on-status-accent-muted-dark: $core-ouds-color-functional-gray-light-160;
$ouds-color-content-on-status-accent-muted-light: $core-ouds-color-functional-black;
$ouds-color-content-on-status-info-emphasized-dark: $core-ouds-color-functional-black;
$ouds-color-content-on-status-info-emphasized-light: $core-ouds-color-functional-black;
$ouds-color-content-on-status-info-muted-dark: $core-ouds-color-functional-gray-light-160;
$ouds-color-content-on-status-info-muted-light: $core-ouds-color-functional-black;
$ouds-color-content-on-status-negative-emphasized-dark: $core-ouds-color-functional-black;
$ouds-color-content-on-status-negative-emphasized-light: $core-ouds-color-functional-white;
$ouds-color-content-on-status-negative-muted-dark: $core-ouds-color-functional-gray-light-160;
$ouds-color-content-on-status-negative-muted-light: $core-ouds-color-functional-black;
$ouds-color-content-on-status-neutral-emphasized-dark: $core-ouds-color-functional-black;
$ouds-color-content-on-status-neutral-emphasized-light: $core-ouds-color-functional-white;
$ouds-color-content-on-status-neutral-muted-dark: $core-ouds-color-functional-gray-light-160;
$ouds-color-content-on-status-neutral-muted-light: $core-ouds-color-functional-black;
$ouds-color-content-on-status-positive-emphasized-dark: $core-ouds-color-functional-black;
$ouds-color-content-on-status-positive-emphasized-light: $core-ouds-color-functional-black;
$ouds-color-content-on-status-positive-muted-dark: $core-ouds-color-functional-gray-light-160;
$ouds-color-content-on-status-positive-muted-light: $core-ouds-color-functional-black;
$ouds-color-content-on-status-warning-emphasized-dark: $core-ouds-color-functional-black;
$ouds-color-content-on-status-warning-emphasized-light: $core-ouds-color-functional-black;
$ouds-color-content-on-status-warning-muted-dark: $core-ouds-color-functional-gray-light-160;
$ouds-color-content-on-status-warning-muted-light: $core-ouds-color-functional-black;
$ouds-color-content-status-accent-dark: $core-ouds-color-functional-sun-500;
$ouds-color-content-status-accent-light: $core-ouds-color-functional-sun-500;
$ouds-color-content-status-info-dark: $core-ouds-color-functional-dodger-blue-500;
$ouds-color-content-status-info-light: $core-ouds-color-functional-dodger-blue-500;
$ouds-color-content-status-negative-dark: $core-ouds-color-functional-scarlet-600;
$ouds-color-content-status-negative-light: $core-ouds-color-functional-scarlet-600;
$ouds-color-content-status-positive-dark: $core-ouds-color-functional-malachite-500;
$ouds-color-content-status-positive-light: $core-ouds-color-functional-malachite-500;
$ouds-color-content-status-warning-dark: $core-ouds-color-functional-sun-500;
$ouds-color-content-status-warning-light: $core-ouds-color-functional-sun-500;
$ouds-color-decorative-accent-1-default: $core-orange-color-decorative-emerald-500;
$ouds-color-decorative-accent-1-emphasized: $core-orange-color-decorative-emerald-700;
$ouds-color-decorative-accent-1-muted: $core-orange-color-decorative-emerald-200;
$ouds-color-decorative-accent-2-default: $core-orange-color-decorative-sky-400;
$ouds-color-decorative-accent-2-emphasized: $core-orange-color-decorative-sky-700;
$ouds-color-decorative-accent-2-muted: $core-orange-color-decorative-sky-200;
$ouds-color-decorative-accent-3-default: $core-ouds-color-functional-sun-500;
$ouds-color-decorative-accent-3-emphasized: $core-orange-color-decorative-amber-500;
$ouds-color-decorative-accent-3-muted: $core-ouds-color-functional-sun-200;
$ouds-color-decorative-accent-4-default: $core-orange-color-decorative-amethyst-400;
$ouds-color-decorative-accent-4-emphasized: $core-orange-color-decorative-amethyst-800;
$ouds-color-decorative-accent-4-muted: $core-orange-color-decorative-amethyst-200;
$ouds-color-decorative-accent-5-default: $core-orange-color-decorative-shocking-pink-200;
$ouds-color-decorative-accent-5-emphasized: $core-orange-color-decorative-shocking-pink-300;
$ouds-color-decorative-accent-5-muted: $core-orange-color-decorative-shocking-pink-100;
$ouds-color-decorative-brand-primary: $core-orange-color-orange-500;
$ouds-color-decorative-brand-secondary: $core-ouds-color-functional-black;
$ouds-color-decorative-brand-tertiary: $core-ouds-color-functional-white;
$ouds-color-decorative-neutral-emphasized-higher: $core-ouds-color-functional-gray-dark-640;
$ouds-color-decorative-neutral-emphasized-low: $core-ouds-color-functional-gray-dark-400;
$ouds-color-decorative-neutral-emphasized-lower: $core-ouds-color-functional-gray-dark-320;
$ouds-color-decorative-neutral-emphasized-lowest: $core-ouds-color-functional-gray-dark-240;
$ouds-color-decorative-neutral-muted-high: $core-ouds-color-functional-gray-light-400;
$ouds-color-decorative-neutral-muted-higher: $core-ouds-color-functional-gray-light-800;
$ouds-color-decorative-neutral-muted-highest: $core-ouds-color-functional-gray-light-960;
$ouds-color-decorative-neutral-muted-low: $core-ouds-color-functional-gray-light-240;
$ouds-color-decorative-neutral-muted-lower: $core-ouds-color-functional-gray-light-160;
$ouds-color-decorative-neutral-muted-lowest: $core-ouds-color-functional-gray-light-80;
$ouds-color-decorative-neutral-muted-medium: $core-ouds-color-functional-gray-light-320;
$ouds-color-decorative-skin-tint-100: $core-orange-color-decorative-deep-peach-100;
$ouds-color-decorative-skin-tint-200: $core-orange-color-decorative-deep-peach-200;
$ouds-color-decorative-skin-tint-300: $core-orange-color-decorative-deep-peach-300;
$ouds-color-decorative-skin-tint-400: $core-orange-color-decorative-deep-peach-400;
$ouds-color-decorative-skin-tint-500: $core-orange-color-decorative-deep-peach-500;
$ouds-color-decorative-skin-tint-600: $core-orange-color-decorative-deep-peach-600;
$ouds-color-decorative-skin-tint-700: $core-orange-color-decorative-deep-peach-700;
$ouds-color-decorative-skin-tint-800: $core-orange-color-decorative-deep-peach-800;
$ouds-color-decorative-skin-tint-900: $core-orange-color-decorative-deep-peach-900;
$ouds-color-opacity-lower-dark: $core-ouds-color-opacity-white-80;
$ouds-color-opacity-lower-light: $core-ouds-color-opacity-black-80;
$ouds-color-opacity-lowest-dark: $core-ouds-color-opacity-white-40;
$ouds-color-opacity-lowest-light: $core-ouds-color-opacity-black-40;
$ouds-color-opacity-transparent-dark: $core-ouds-color-opacity-white-0;
$ouds-color-opacity-transparent-light: $core-ouds-color-opacity-black-0;
$ouds-color-overlay-default-dark: $core-ouds-color-opacity-white-80;
$ouds-color-overlay-default-light: $core-ouds-color-functional-white;
$ouds-color-overlay-drag-dark: $core-ouds-color-opacity-white-200;
$ouds-color-overlay-drag-light: $core-ouds-color-opacity-black-40;
$ouds-color-overlay-emphasized-dark: $core-ouds-color-functional-gray-light-160;
$ouds-color-overlay-emphasized-light: $core-ouds-color-functional-gray-dark-720;
$ouds-color-surface-brand-primary-dark: $core-orange-color-orange-500;
$ouds-color-surface-brand-primary-light: $core-orange-color-orange-500;
$ouds-color-surface-status-accent-emphasized-dark: $core-ouds-color-functional-sun-300;
$ouds-color-surface-status-accent-emphasized-light: $core-ouds-color-functional-sun-500;
$ouds-color-surface-status-accent-muted-dark: $core-orange-color-warm-gray-1000;
$ouds-color-surface-status-accent-muted-light: $core-orange-color-warm-gray-100;
$ouds-color-surface-status-info-emphasized-dark: $core-ouds-color-functional-dodger-blue-300;
$ouds-color-surface-status-info-emphasized-light: $core-ouds-color-functional-dodger-blue-500;
$ouds-color-surface-status-info-muted-dark: $core-ouds-color-functional-dodger-blue-900;
$ouds-color-surface-status-info-muted-light: $core-ouds-color-opacity-dodger-blue;
$ouds-color-surface-status-negative-emphasized-dark: $core-ouds-color-functional-scarlet-300;
$ouds-color-surface-status-negative-emphasized-light: $core-ouds-color-functional-scarlet-600;
$ouds-color-surface-status-negative-muted-dark: $core-ouds-color-functional-scarlet-900;
$ouds-color-surface-status-negative-muted-light: $core-ouds-color-opacity-scarlet;
$ouds-color-surface-status-neutral-emphasized-dark: $core-ouds-color-opacity-white-920;
$ouds-color-surface-status-neutral-emphasized-light: $core-ouds-color-opacity-black-840;
$ouds-color-surface-status-neutral-muted-dark: $core-ouds-color-opacity-white-80;
$ouds-color-surface-status-neutral-muted-light: $core-ouds-color-opacity-black-40;
$ouds-color-surface-status-positive-emphasized-dark: $core-ouds-color-functional-malachite-300;
$ouds-color-surface-status-positive-emphasized-light: $core-ouds-color-functional-malachite-500;
$ouds-color-surface-status-positive-muted-dark: $core-ouds-color-functional-malachite-900;
$ouds-color-surface-status-positive-muted-light: $core-ouds-color-opacity-malachite;
$ouds-color-surface-status-warning-emphasized-dark: $core-ouds-color-functional-sun-300;
$ouds-color-surface-status-warning-emphasized-light: $core-ouds-color-functional-sun-500;
$ouds-color-surface-status-warning-muted-dark: $core-ouds-color-functional-sun-900;
$ouds-color-surface-status-warning-muted-light: $core-ouds-color-opacity-sun;
$ouds-color-overlay-modal-dark: $ouds-color-bg-emphasized-dark;
$ouds-color-overlay-modal-light: $ouds-color-bg-primary-light;
CSS semantic tokensLink to this section: CSS semantic tokens
Color semantic tokens as CSS variables.
@include color-mode(light, true) {
--#{$prefix}color-action-disabled: #{$ouds-color-action-disabled-light};
--#{$prefix}color-action-enabled: #{$ouds-color-action-enabled-light};
--#{$prefix}color-action-focus: #{$ouds-color-action-focus-light};
--#{$prefix}color-action-highlighted: #{$ouds-color-action-highlighted-light};
--#{$prefix}color-action-hover: #{$ouds-color-action-hover-light};
--#{$prefix}color-action-loading: #{$ouds-color-action-loading-light};
--#{$prefix}color-action-negative-enabled: #{$ouds-color-action-negative-enabled-light};
--#{$prefix}color-action-negative-focus: #{$ouds-color-action-negative-focus-light};
--#{$prefix}color-action-negative-hover: #{$ouds-color-action-negative-hover-light};
--#{$prefix}color-action-negative-loading: #{$ouds-color-action-negative-loading-light};
--#{$prefix}color-action-negative-pressed: #{$ouds-color-action-negative-pressed-light};
--#{$prefix}color-action-pressed: #{$ouds-color-action-pressed-light};
--#{$prefix}color-action-selected: #{$ouds-color-action-selected-light};
--#{$prefix}color-action-support-enabled: #{$ouds-color-action-support-enabled-light};
--#{$prefix}color-action-support-focus: #{$ouds-color-action-support-focus-light};
--#{$prefix}color-action-support-hover: #{$ouds-color-action-support-hover-light};
--#{$prefix}color-action-support-loading: #{$ouds-color-action-support-loading-light};
--#{$prefix}color-action-support-pressed: #{$ouds-color-action-support-pressed-light};
--#{$prefix}color-action-visited: #{$ouds-color-action-visited-light};
--#{$prefix}color-always-black: #{$ouds-color-always-black};
--#{$prefix}color-always-on-black: #{$ouds-color-always-on-black};
--#{$prefix}color-always-on-white: #{$ouds-color-always-on-white};
--#{$prefix}color-always-white: #{$ouds-color-always-white};
--#{$prefix}color-bg-emphasized: #{$ouds-color-bg-emphasized-light};
--#{$prefix}color-bg-primary: #{$ouds-color-bg-primary-light};
--#{$prefix}color-bg-secondary: #{$ouds-color-bg-secondary-light};
--#{$prefix}color-bg-tertiary: #{$ouds-color-bg-tertiary-light};
--#{$prefix}color-border-brand-primary: #{$ouds-color-border-brand-primary-light};
--#{$prefix}color-border-default: #{$ouds-color-border-default-light};
--#{$prefix}color-border-emphasized: #{$ouds-color-border-emphasized-light};
--#{$prefix}color-border-focus-inset: #{$ouds-color-border-focus-inset-light};
--#{$prefix}color-border-focus: #{$ouds-color-border-focus-light};
--#{$prefix}color-border-muted: #{$ouds-color-border-muted-light};
--#{$prefix}color-border-on-brand-primary: #{$ouds-color-border-on-brand-primary-light};
--#{$prefix}color-content-brand-primary: #{$ouds-color-content-brand-primary-light};
--#{$prefix}color-content-default: #{$ouds-color-content-default-light};
--#{$prefix}color-content-disabled: #{$ouds-color-content-disabled-light};
--#{$prefix}color-content-muted: #{$ouds-color-content-muted-light};
--#{$prefix}color-content-on-action-disabled: #{$ouds-color-content-on-action-disabled-light};
--#{$prefix}color-content-on-action-enabled: #{$ouds-color-content-on-action-enabled-light};
--#{$prefix}color-content-on-action-focus: #{$ouds-color-content-on-action-focus-light};
--#{$prefix}color-content-on-action-highlighted: #{$ouds-color-content-on-action-highlighted-light};
--#{$prefix}color-content-on-action-hover: #{$ouds-color-content-on-action-hover-light};
--#{$prefix}color-content-on-action-loading: #{$ouds-color-content-on-action-loading-light};
--#{$prefix}color-content-on-action-pressed: #{$ouds-color-content-on-action-pressed-light};
--#{$prefix}color-content-on-brand-primary: #{$ouds-color-content-on-brand-primary-light};
--#{$prefix}color-content-on-overlay-emphasized: #{$ouds-color-content-on-overlay-emphasized-light};
--#{$prefix}color-content-on-status-accent-emphasized: #{$ouds-color-content-on-status-accent-emphasized-light};
--#{$prefix}color-content-on-status-accent-muted: #{$ouds-color-content-on-status-accent-muted-light};
--#{$prefix}color-content-on-status-info-emphasized: #{$ouds-color-content-on-status-info-emphasized-light};
--#{$prefix}color-content-on-status-info-muted: #{$ouds-color-content-on-status-info-muted-light};
--#{$prefix}color-content-on-status-negative-emphasized: #{$ouds-color-content-on-status-negative-emphasized-light};
--#{$prefix}color-content-on-status-negative-muted: #{$ouds-color-content-on-status-negative-muted-light};
--#{$prefix}color-content-on-status-neutral-emphasized: #{$ouds-color-content-on-status-neutral-emphasized-light};
--#{$prefix}color-content-on-status-neutral-muted: #{$ouds-color-content-on-status-neutral-muted-light};
--#{$prefix}color-content-on-status-positive-emphasized: #{$ouds-color-content-on-status-positive-emphasized-light};
--#{$prefix}color-content-on-status-positive-muted: #{$ouds-color-content-on-status-positive-muted-light};
--#{$prefix}color-content-on-status-warning-emphasized: #{$ouds-color-content-on-status-warning-emphasized-light};
--#{$prefix}color-content-on-status-warning-muted: #{$ouds-color-content-on-status-warning-muted-light};
--#{$prefix}color-content-status-accent: #{$ouds-color-content-status-accent-light};
--#{$prefix}color-content-status-info: #{$ouds-color-content-status-info-light};
--#{$prefix}color-content-status-negative: #{$ouds-color-content-status-negative-light};
--#{$prefix}color-content-status-positive: #{$ouds-color-content-status-positive-light};
--#{$prefix}color-content-status-warning: #{$ouds-color-content-status-warning-light};
--#{$prefix}color-decorative-accent-1-default: #{$ouds-color-decorative-accent-1-default};
--#{$prefix}color-decorative-accent-1-emphasized: #{$ouds-color-decorative-accent-1-emphasized};
--#{$prefix}color-decorative-accent-1-muted: #{$ouds-color-decorative-accent-1-muted};
--#{$prefix}color-decorative-accent-2-default: #{$ouds-color-decorative-accent-2-default};
--#{$prefix}color-decorative-accent-2-emphasized: #{$ouds-color-decorative-accent-2-emphasized};
--#{$prefix}color-decorative-accent-2-muted: #{$ouds-color-decorative-accent-2-muted};
--#{$prefix}color-decorative-accent-3-default: #{$ouds-color-decorative-accent-3-default};
--#{$prefix}color-decorative-accent-3-emphasized: #{$ouds-color-decorative-accent-3-emphasized};
--#{$prefix}color-decorative-accent-3-muted: #{$ouds-color-decorative-accent-3-muted};
--#{$prefix}color-decorative-accent-4-default: #{$ouds-color-decorative-accent-4-default};
--#{$prefix}color-decorative-accent-4-emphasized: #{$ouds-color-decorative-accent-4-emphasized};
--#{$prefix}color-decorative-accent-4-muted: #{$ouds-color-decorative-accent-4-muted};
--#{$prefix}color-decorative-accent-5-default: #{$ouds-color-decorative-accent-5-default};
--#{$prefix}color-decorative-accent-5-emphasized: #{$ouds-color-decorative-accent-5-emphasized};
--#{$prefix}color-decorative-accent-5-muted: #{$ouds-color-decorative-accent-5-muted};
--#{$prefix}color-decorative-brand-primary: #{$ouds-color-decorative-brand-primary};
--#{$prefix}color-decorative-brand-secondary: #{$ouds-color-decorative-brand-secondary};
--#{$prefix}color-decorative-brand-tertiary: #{$ouds-color-decorative-brand-tertiary};
--#{$prefix}color-decorative-neutral-emphasized-higher: #{$ouds-color-decorative-neutral-emphasized-higher};
--#{$prefix}color-decorative-neutral-emphasized-low: #{$ouds-color-decorative-neutral-emphasized-low};
--#{$prefix}color-decorative-neutral-emphasized-lower: #{$ouds-color-decorative-neutral-emphasized-lower};
--#{$prefix}color-decorative-neutral-emphasized-lowest: #{$ouds-color-decorative-neutral-emphasized-lowest};
--#{$prefix}color-decorative-neutral-muted-high: #{$ouds-color-decorative-neutral-muted-high};
--#{$prefix}color-decorative-neutral-muted-higher: #{$ouds-color-decorative-neutral-muted-higher};
--#{$prefix}color-decorative-neutral-muted-highest: #{$ouds-color-decorative-neutral-muted-highest};
--#{$prefix}color-decorative-neutral-muted-low: #{$ouds-color-decorative-neutral-muted-low};
--#{$prefix}color-decorative-neutral-muted-lower: #{$ouds-color-decorative-neutral-muted-lower};
--#{$prefix}color-decorative-neutral-muted-lowest: #{$ouds-color-decorative-neutral-muted-lowest};
--#{$prefix}color-decorative-neutral-muted-medium: #{$ouds-color-decorative-neutral-muted-medium};
--#{$prefix}color-decorative-skin-tint-100: #{$ouds-color-decorative-skin-tint-100};
--#{$prefix}color-decorative-skin-tint-200: #{$ouds-color-decorative-skin-tint-200};
--#{$prefix}color-decorative-skin-tint-300: #{$ouds-color-decorative-skin-tint-300};
--#{$prefix}color-decorative-skin-tint-400: #{$ouds-color-decorative-skin-tint-400};
--#{$prefix}color-decorative-skin-tint-500: #{$ouds-color-decorative-skin-tint-500};
--#{$prefix}color-decorative-skin-tint-600: #{$ouds-color-decorative-skin-tint-600};
--#{$prefix}color-decorative-skin-tint-700: #{$ouds-color-decorative-skin-tint-700};
--#{$prefix}color-decorative-skin-tint-800: #{$ouds-color-decorative-skin-tint-800};
--#{$prefix}color-decorative-skin-tint-900: #{$ouds-color-decorative-skin-tint-900};
--#{$prefix}color-opacity-lower: #{$ouds-color-opacity-lower-light};
--#{$prefix}color-opacity-lowest: #{$ouds-color-opacity-lowest-light};
--#{$prefix}color-opacity-transparent: #{$ouds-color-opacity-transparent-light};
--#{$prefix}color-overlay-default: #{$ouds-color-overlay-default-light};
--#{$prefix}color-overlay-drag: #{$ouds-color-overlay-drag-light};
--#{$prefix}color-overlay-emphasized: #{$ouds-color-overlay-emphasized-light};
--#{$prefix}color-overlay-modal: #{$ouds-color-overlay-modal-light};
--#{$prefix}color-surface-brand-primary: #{$ouds-color-surface-brand-primary-light};
--#{$prefix}color-surface-status-accent-emphasized: #{$ouds-color-surface-status-accent-emphasized-light};
--#{$prefix}color-surface-status-accent-muted: #{$ouds-color-surface-status-accent-muted-light};
--#{$prefix}color-surface-status-info-emphasized: #{$ouds-color-surface-status-info-emphasized-light};
--#{$prefix}color-surface-status-info-muted: #{$ouds-color-surface-status-info-muted-light};
--#{$prefix}color-surface-status-negative-emphasized: #{$ouds-color-surface-status-negative-emphasized-light};
--#{$prefix}color-surface-status-negative-muted: #{$ouds-color-surface-status-negative-muted-light};
--#{$prefix}color-surface-status-neutral-emphasized: #{$ouds-color-surface-status-neutral-emphasized-light};
--#{$prefix}color-surface-status-neutral-muted: #{$ouds-color-surface-status-neutral-muted-light};
--#{$prefix}color-surface-status-positive-emphasized: #{$ouds-color-surface-status-positive-emphasized-light};
--#{$prefix}color-surface-status-positive-muted: #{$ouds-color-surface-status-positive-muted-light};
--#{$prefix}color-surface-status-warning-emphasized: #{$ouds-color-surface-status-warning-emphasized-light};
--#{$prefix}color-surface-status-warning-muted: #{$ouds-color-surface-status-warning-muted-light};
--#{$prefix}elevation-color-default: #{$ouds-elevation-color-default};
--#{$prefix}elevation-color-drag: #{$ouds-elevation-color-drag};
--#{$prefix}elevation-color-emphasized: #{$ouds-elevation-color-emphasized};
--#{$prefix}elevation-color-none: #{$ouds-elevation-color-none};
--#{$prefix}elevation-color-raised: #{$ouds-elevation-color-raised};
--#{$prefix}elevation-color-sticky-default: #{$ouds-elevation-color-sticky-default};
--#{$prefix}elevation-color-sticky-emphasized: #{$ouds-elevation-color-sticky-emphasized};
--#{$prefix}elevation-color-sticky-navigation-scrolled: #{$ouds-elevation-color-sticky-navigation-scrolled};
}
The same happens for the dark mode by replacing -light by -dark.
In addition to the following Sass functionality, consider reading about our included CSS custom properties (aka CSS variables) for colors and more.
Sass variablesLink to this section: Sass variables
Bootstrap
$enable-bootstrap-compatibility: true
This part is enabled only when $enable-bootstrap-compatibility is set to true. Read more
about Bootstrap compatibility.
Most color utilities are generated by our theme colors, reassigned from our generic color palette variables.
$blue: $core-ouds-color-functional-dodger-blue-500; // OUDS mod: instead of `#0d6efd`
$indigo: $core-orange-color-decorative-amethyst-400; // OUDS mod: instead of `#6610f2`
$purple: $core-orange-color-decorative-amethyst-400; // OUDS mod: instead of `#6f42c1`
$pink: $core-orange-color-decorative-shocking-pink-200; // OUDS mod: instead of `#d63384`
$red: $core-ouds-color-functional-scarlet-600; // OUDS mod: instead of `#dc3545`
$orange: $core-orange-color-orange-550; // OUDS mod: instead of `#fd7e14`
$yellow: $core-ouds-color-functional-sun-500; // OUDS mod: instead of `#ffc107`
$green: $core-ouds-color-functional-malachite-500; // OUDS mod: instead of `#198754`
$teal: $core-orange-color-decorative-emerald-500; // OUDS mod: instead of `#20c997`
$cyan: $core-orange-color-decorative-sky-400; // OUDS mod: instead of `#0dcaf0`
$primary: $orange; // OUDS mod: instead of `$blue`
$secondary: $black; // OUDS mod: instead of `$gray-600`
$success: $green;
$info: $blue; // OUDS mod: instead of `$cyan`
$warning: $yellow;
$danger: $red;
$light: $ouds-color-bg-secondary-light; // OUDS mod: instead of `$gray-100`
$dark: $ouds-color-bg-emphasized-light; // OUDS mod: instead of `$gray-900`
$primary-dark: $ouds-color-content-brand-primary-dark;
$secondary-dark: $white;
$success-dark: $core-ouds-color-functional-malachite-300;
$info-dark: $core-ouds-color-functional-dodger-blue-300;
$warning-dark: $core-ouds-color-functional-sun-300;
$danger-dark: $core-ouds-color-functional-scarlet-300;
$light-dark: $ouds-color-bg-secondary-dark;
$dark-dark: $ouds-color-bg-emphasized-dark;
Grayscale colors are also available, but only a subset are used to generate any utilities.
$white: $core-ouds-color-functional-white; // OUDS mod: instead of `#fff`
$gray-100: $core-ouds-color-functional-gray-light-80; // OUDS mod: instead of `#f8f9fa`
$gray-200: $core-ouds-color-functional-gray-light-160; // OUDS mod: instead of `#e9ecef`
$gray-300: $core-ouds-color-functional-gray-light-240; // OUDS mod: instead of `#dee2e6`
$gray-400: $core-ouds-color-functional-gray-light-400; // OUDS mod: instead of `#ced4da`
$gray-500: $core-ouds-color-functional-gray-light-800; // OUDS mod: instead of `#adb5bd`
$gray-600: $core-ouds-color-functional-gray-dark-240; // OUDS mod: instead of `#6c757d`
$gray-700: $core-ouds-color-functional-gray-dark-640; // OUDS mod: instead of `#495057`
$gray-800: $core-ouds-color-functional-gray-dark-800; // OUDS mod: instead of `#343a40`
$gray-900: $core-ouds-color-functional-gray-dark-880; // OUDS mod: instead of `#212529`
$black: $core-ouds-color-functional-black; // OUDS mod: instead of `#000`
$theme-colors-text: (
"primary": $primary-text-emphasis,
"secondary": $secondary-text-emphasis,
"success": $success-text-emphasis,
"info": $info-text-emphasis,
"warning": $warning-text-emphasis,
"danger": $danger-text-emphasis,
"light": $light-text-emphasis,
"dark": $dark-text-emphasis,
);
Variables for setting colors in .text-*-emphasis utilities in light and dark mode:
$primary-text-emphasis: $ouds-color-content-brand-primary-light; // OUDS mod: instead of `shade-color($primary, 60%)`
$secondary-text-emphasis: $ouds-color-content-muted-light; // OUDS mod: instead of `shade-color($secondary, 60%)`
$success-text-emphasis: $ouds-color-content-status-positive-light; // OUDS mod: instead of `shade-color($success, 60%)`
$info-text-emphasis: $ouds-color-content-status-info-light; // OUDS mod: instead of `shade-color($info, 60%)`
$warning-text-emphasis: $ouds-color-content-status-warning-light; // OUDS mod: instead of `shade-color($warning, 60%)`
$danger-text-emphasis: $ouds-color-content-status-negative-light; // OUDS mod: instead of `shade-color($danger, 60%)`
$light-text-emphasis: $ouds-color-content-disabled-light; // OUDS mod: instead of `$gray-700`
$dark-text-emphasis: $ouds-color-content-default-light; // OUDS mod: instead of `$gray-700`
$primary-text-emphasis-dark: $ouds-color-content-brand-primary-dark; // OUDS mod: instead of `tint-color($primary, 40%)`
$secondary-text-emphasis-dark: $ouds-color-content-muted-dark; // OUDS mod: instead of `tint-color($secondary, 40%)`
$success-text-emphasis-dark: $ouds-color-content-status-positive-dark; // OUDS mod: instead of `tint-color($success, 40%)`
$info-text-emphasis-dark: $ouds-color-content-status-info-dark; // OUDS mod: instead of `tint-color($info, 40%)`
$warning-text-emphasis-dark: $ouds-color-content-status-warning-dark; // OUDS mod: instead of `tint-color($warning, 40%)`
$danger-text-emphasis-dark: $ouds-color-content-status-negative-dark; // OUDS mod: instead of `tint-color($danger, 40%)`
$light-text-emphasis-dark: $ouds-color-content-disabled-dark; // OUDS mod: instead of `$gray-100`
$dark-text-emphasis-dark: $ouds-color-content-default-dark; // OUDS mod: instead of `$gray-300`
Sass mapsLink to this section: Sass maps
Our text utilities are generated from our $ouds-text-colors:
$ouds-text-colors: (
"brand-primary": var(--#{$prefix}color-content-brand-primary),
"default": var(--#{$prefix}color-content-default),
"disabled": var(--#{$prefix}color-content-disabled),
"muted": var(--#{$prefix}color-content-muted),
"on-brand-primary": var(--#{$prefix}color-content-on-brand-primary),
"on-status-accent-emphasized": var(--#{$prefix}color-content-on-status-accent-emphasized),
"on-status-accent-muted": var(--#{$prefix}color-content-on-status-accent-muted),
"on-status-info-emphasized": var(--#{$prefix}color-content-on-status-info-emphasized),
"on-status-info-muted": var(--#{$prefix}color-content-on-status-info-muted),
"on-status-negative-emphasized": var(--#{$prefix}color-content-on-status-negative-emphasized),
"on-status-negative-muted": var(--#{$prefix}color-content-on-status-negative-muted),
"on-status-neutral-emphasized": var(--#{$prefix}color-content-on-status-neutral-emphasized),
"on-status-neutral-muted": var(--#{$prefix}color-content-on-status-neutral-muted),
"on-status-positive-emphasized": var(--#{$prefix}color-content-on-status-positive-emphasized),
"on-status-positive-muted": var(--#{$prefix}color-content-on-status-positive-muted),
"on-status-warning-emphasized": var(--#{$prefix}color-content-on-status-warning-emphasized),
"on-status-warning-muted": var(--#{$prefix}color-content-on-status-warning-muted),
"status-accent": var(--#{$prefix}color-content-status-accent),
"status-info": var(--#{$prefix}color-content-status-info),
"status-negative": var(--#{$prefix}color-content-status-negative),
"status-positive": var(--#{$prefix}color-content-status-positive),
"status-warning": var(--#{$prefix}color-content-status-warning),
"always-black": var(--#{$prefix}color-always-black),
"always-white": var(--#{$prefix}color-always-white),
"always-on-black": var(--#{$prefix}color-always-on-black),
"always-on-white": var(--#{$prefix}color-always-on-white),
"reset": inherit,
);
Bootstrap
$enable-bootstrap-compatibility: true
This part is enabled only when $enable-bootstrap-compatibility is set to true. Read more
about Bootstrap compatibility.
Theme colors are then put into a Sass map so we can loop over them to generate our utilities, component modifiers, and more.
$theme-colors: (
"primary": $primary,
"secondary": $secondary,
"success": $success,
"info": $info,
"warning": $warning,
"danger": $danger,
"light": $light,
"dark": $dark
);
$theme-colors-dark: (
"primary": $primary-dark,
"secondary": $secondary-dark,
"success": $success-dark,
"info": $info-dark,
"warning": $warning-dark,
"danger": $danger-dark,
"light": $light-dark,
"dark": $dark-dark,
);
Grayscale colors are also available as a Sass map. This map is not used to generate any utilities.
$grays: (
"100": $gray-100,
"200": $gray-200,
"300": $gray-300,
"400": $gray-400,
"500": $gray-500,
"600": $gray-600,
"700": $gray-700,
"800": $gray-800,
"900": $gray-900,
);
RGB colors are generated from a separate Sass map:
$theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value");
// scss-docs-end theme-colors-rgb
// scss-docs-start theme-text-map
$theme-colors-text: (
"primary": $primary-text-emphasis,
"secondary": $secondary-text-emphasis,
"success": $success-text-emphasis,
"info": $info-text-emphasis,
"warning": $warning-text-emphasis,
"danger": $danger-text-emphasis,
"light": $light-text-emphasis,
"dark": $dark-text-emphasis,
);
// scss-docs-end theme-text-map
// scss-docs-start theme-bg-subtle-map
$theme-colors-bg-subtle: (
"primary": $primary-bg-subtle,
"secondary": $secondary-bg-subtle,
"success": $success-bg-subtle,
"info": $info-bg-subtle,
"warning": $warning-bg-subtle,
"danger": $danger-bg-subtle,
"light": $light-bg-subtle,
"dark": $dark-bg-subtle,
);
// scss-docs-end theme-bg-subtle-map
// scss-docs-start theme-border-subtle-map
$theme-colors-border-subtle: (
"primary": $primary-border-subtle,
"secondary": $secondary-border-subtle,
"success": $success-border-subtle,
"info": $info-border-subtle,
"warning": $warning-border-subtle,
"danger": $danger-border-subtle,
"light": $light-border-subtle,
"dark": $dark-border-subtle,
);
// scss-docs-end theme-border-subtle-map
$theme-colors-rgb-dark: null;
$theme-colors-text-dark: null;
$theme-colors-bg-subtle-dark: null;
$theme-colors-border-subtle-dark: null;
@if $enable-dark-mode {
// OUDS mod
// scss-docs-start theme-colors-rgb-dark
$theme-colors-rgb-dark: map-loop($theme-colors-dark, to-rgb, "$value");
$theme-colors-rgb-dark: map-loop($theme-colors-dark, to-rgb, "$value");
Color build on that with their own map that’s consumed by the utilities API:
$utilities-text: map-merge(
$utilities-colors,
(
"primary": var(--#{$prefix}color-content-brand-primary), // OUDS mod
"secondary": var(--#{$prefix}color-content-muted), // OUDS mod
"success": var(--#{$prefix}color-content-status-positive), // OUDS mod
"info": var(--#{$prefix}color-content-status-info), // OUDS mod
"warning": var(--#{$prefix}color-content-status-warning), // OUDS mod
"danger": var(--#{$prefix}color-content-status-negative), // OUDS mod
"light": var(--#{$prefix}color-content-disabled), // OUDS mod
"dark": var(--#{$prefix}color-content-default), // OUDS mod
"black": var(--#{$prefix}color-always-black), // OUDS mod: instead of `to-rgb($black)`
"white": var(--#{$prefix}color-always-white), // OUDS mod: instead of `to-rgb($white)`
"body": var(--#{$prefix}color-content-default) // OUDS mod: instead of `to-rgb($body-color)`
)
);
$utilities-text-colors: $utilities-text; // OUDS mod: instead of `map-loop($utilities-text, rgba-css-var, "$key", "text")`
$utilities-text-emphasis-colors: (
"primary-emphasis": var(--#{$prefix}primary-text-emphasis),
"secondary-emphasis": var(--#{$prefix}secondary-text-emphasis),
"success-emphasis": var(--#{$prefix}success-text-emphasis),
"info-emphasis": var(--#{$prefix}info-text-emphasis),
"warning-emphasis": var(--#{$prefix}warning-text-emphasis),
"danger-emphasis": var(--#{$prefix}danger-text-emphasis),
"light-emphasis": var(--#{$prefix}light-text-emphasis),
"dark-emphasis": var(--#{$prefix}dark-text-emphasis)
);
Color mode adaptive text colors are also available as a Sass map:
$theme-colors-text: (
"primary": $primary-text-emphasis,
"secondary": $secondary-text-emphasis,
"success": $success-text-emphasis,
"info": $info-text-emphasis,
"warning": $warning-text-emphasis,
"danger": $danger-text-emphasis,
"light": $light-text-emphasis,
"dark": $dark-text-emphasis,
);
$theme-colors-text-dark: (
"primary": $primary-text-emphasis-dark,
"secondary": $secondary-text-emphasis-dark,
"success": $success-text-emphasis-dark,
"info": $info-text-emphasis-dark,
"warning": $warning-text-emphasis-dark,
"danger": $danger-text-emphasis-dark,
"light": $light-text-emphasis-dark,
"dark": $dark-text-emphasis-dark,
);
Sass utilities APILink to this section: Sass utilities API
Color utilities are declared in our utilities API in scss/_utilities.scss. Learn how to use the utilities API.
"color-ouds": (
property: color,
class: text,
values: $ouds-text-colors
),
Bootstrap
$enable-bootstrap-compatibility: true
This part is enabled only when $enable-bootstrap-compatibility is set to true. Read more
about Bootstrap compatibility.
"color": (
property: color,
class: text,
// OUDS mod: no local-vars
values: map-merge(
$utilities-text-colors,
(
"muted": var(--#{$prefix}color-content-muted), // Deprecated in Bootstrap // OUDS mod: instead of `var(--#{$prefix}secondary-color)`
"black-50": var(--#{$prefix}color-content-muted), // Deprecated in Bootstrap // OUDS mod: instead of `rgba($black, .5)`
"white-50": var(--#{$prefix}color-content-muted), // Deprecated in Bootstrap // OUDS mod: instead of `rgba($white, .5)`
"body-secondary": var(--#{$prefix}color-content-muted), // OUDS mod: instead of `var(--#{$prefix}secondary-color)`
"body-tertiary": var(--#{$prefix}color-content-disabled), // OUDS mod: instead of `var(--#{$prefix}tertiary-color)`
"body-emphasis": var(--#{$prefix}color-content-default), // OUDS mod: instead of `var(--#{$prefix}emphasis-color)`
// OUDS mod: no "reset"
)
),
bootstrap-compatibility: true
),
// OUDS mod: no "text-opacity"
"text-color": (
property: color,
class: text,
values: $utilities-text-emphasis-colors,
bootstrap-compatibility: true
),
// scss-docs-end utils-color
// scss-docs-start utils-color-ouds
"color-ouds": (
property: color,
class: text,
values: $ouds-text-colors
),