Colors

Convey meaning through color with a handful of color utility classes.

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.

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-emphasized

Text on-status-emphasized-alt

Text on-status-muted

Text always-on-black

Text always-on-white

<p class="text-brand-primary p-short">Text brand-primary</p>
<p class="text-default p-short">Text default</p>
<p class="text-muted p-short">Text muted</p>
<p class="text-disabled p-short">Text disabled</p>
<p class="text-always-black p-short">Text always-black</p>
<p class="text-always-white p-short">Text always-white</p>
<p class="text-on-brand-primary bg-brand-primary p-short">Text on-brand-primary</p>
<p class="text-on-status-emphasized bg-status-info-emphasized p-short">Text on-status-emphasized</p>
<p class="text-on-status-emphasized-alt bg-status-neutral-emphasized p-short">Text on-status-emphasized-alt</p>
<p class="text-on-status-muted bg-status-info-muted p-short">Text on-status-muted</p>
<p class="text-always-on-black bg-always-black p-short">Text always-on-black</p>
<p class="text-always-on-white bg-always-white p-short">Text always-on-white</p>

html

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-hl and above or .fs-hm bold 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-emphasized`	`.bg-status-accent-emphasized`, `.bg-status-positive-emphasized`, `.bg-status-warning-emphasized`, `.bg-status-info-emphasized`	—
`.text-on-status-emphasized-alt`	`.bg-status-neutral-emphasized`, `.bg-status-negative-emphasized`	—
`.text-on-status-muted`	`.bg-status-neutral-muted`, `.bg-status-accent-muted`, `.bg-status-positive-muted`, `.bg-status-negative-muted`, `.bg-status-warning-muted`, `.bg-status-info-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>

html

.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 icons

The following color utilities are meant to be used only with icons and not with text.

<svg width="8em" height="8em" class="text-status-info" aria-hidden="true">
  <use xlink:href="/docs/0.2/assets/img/ouds-web-sprite.svg#info"/>
</svg>
<svg width="8em" height="8em" class="text-status-positive" aria-hidden="true">
  <use xlink:href="/docs/0.2/assets/img/ouds-web-sprite.svg#tick-confirmation"/>
</svg>
<svg width="8em" height="8em" class="text-status-warning" aria-hidden="true">
  <use xlink:href="/docs/0.2/assets/img/ouds-web-sprite.svg#important"/>
</svg>
<svg width="8em" height="8em" class="text-status-negative" aria-hidden="true">
  <use xlink:href="/docs/0.2/assets/img/ouds-web-sprite.svg#error-severe"/>
</svg>

html

Here are the normal contexts of use of these text color utilities.

Color utility	Context of use
`.text-status-info`	Use to communicate a feedback. It’s more important than a neutral color.
`.text-status-positive`	Use to communicate a positive action, a confirmation or a positive feedback.
`.text-status-warning`	Use to display an information that requires more attention, or an action from the user.
`.text-status-negative`	Use to communicate something negative. It can be a destructive action, an error state, or a negative feedback.

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.

CSS

Sass tokens

Raw tokens

Colors raw tokens as Sass variables. Not to be used as-is.

scss/tokens/_raw.scss

// $ouds-color-decorative-amber-100: #fff0cc;
// $ouds-color-decorative-amber-200: #ffe199;
// $ouds-color-decorative-amber-300: #ffd266;
// $ouds-color-decorative-amber-400: #ffc333;
$ouds-color-decorative-amber-500: #ffb400;
// $ouds-color-decorative-amber-600: #cc9000;
// $ouds-color-decorative-amber-700: #996c00;
// $ouds-color-decorative-amber-800: #664800;
// $ouds-color-decorative-amber-900: #332400;
$ouds-color-decorative-amethyst-100: #f1ecf9;
$ouds-color-decorative-amethyst-200: #e0d4f2;
$ouds-color-decorative-amethyst-300: #c5ade6;
$ouds-color-decorative-amethyst-400: #a885d8;
$ouds-color-decorative-amethyst-500: #8d60cd;
$ouds-color-decorative-amethyst-600: #5b2f98;
$ouds-color-decorative-amethyst-700: #432371;
$ouds-color-decorative-amethyst-800: #2c174a;
$ouds-color-decorative-amethyst-900: #150b23;
$ouds-color-decorative-deep-peach-100: #fbebdf;
$ouds-color-decorative-deep-peach-200: #f4cfb2;
$ouds-color-decorative-deep-peach-300: #e3b591;
$ouds-color-decorative-deep-peach-400: #c19372;
$ouds-color-decorative-deep-peach-500: #cf7e3f;
$ouds-color-decorative-deep-peach-600: #aa6631;
$ouds-color-decorative-deep-peach-700: #7e4f2a;
$ouds-color-decorative-deep-peach-800: #553720;
$ouds-color-decorative-deep-peach-900: #2e2014;
$ouds-color-decorative-emerald-100: #e5f5ed;
$ouds-color-decorative-emerald-200: #c0e8d4;
$ouds-color-decorative-emerald-300: #9bdaba;
$ouds-color-decorative-emerald-400: #75cca1;
$ouds-color-decorative-emerald-500: #50be87;
$ouds-color-decorative-emerald-600: #3ba06e;
$ouds-color-decorative-emerald-700: #2e7b54;
$ouds-color-decorative-emerald-800: #20563b;
$ouds-color-decorative-emerald-900: #123021;
$ouds-color-decorative-shocking-pink-100: #ffe5f6;
$ouds-color-decorative-shocking-pink-200: #ffb4e6;
$ouds-color-decorative-shocking-pink-300: #ff80d4;
$ouds-color-decorative-shocking-pink-400: #ff4dc3;
$ouds-color-decorative-shocking-pink-500: #ff1ab2;
$ouds-color-decorative-shocking-pink-600: #e50099;
$ouds-color-decorative-shocking-pink-700: #b20077;
$ouds-color-decorative-shocking-pink-800: #800055;
$ouds-color-decorative-shocking-pink-900: #4d0033;
$ouds-color-decorative-sky-100: #d2ecf9;
$ouds-color-decorative-sky-200: #a5daf3;
$ouds-color-decorative-sky-300: #79c7ec;
$ouds-color-decorative-sky-400: #4ab4e6;
$ouds-color-decorative-sky-500: #1fa2e0;
$ouds-color-decorative-sky-600: #1982b3;
$ouds-color-decorative-sky-700: #136186;
$ouds-color-decorative-sky-800: #0c415a;
$ouds-color-decorative-sky-900: #06202d;
$ouds-color-functional-black: #000;
// $ouds-color-functional-dark-gray-80: #7a7a7a;
// $ouds-color-functional-dark-gray-160: #707070;
// $ouds-color-functional-dark-gray-240: #666;
// $ouds-color-functional-dark-gray-320: #5c5c5c;
$ouds-color-functional-dark-gray-400: #555;
// $ouds-color-functional-dark-gray-480: #444;
// $ouds-color-functional-dark-gray-560: #3d3d3d;
$ouds-color-functional-dark-gray-640: #333;
$ouds-color-functional-dark-gray-720: #272727;
$ouds-color-functional-dark-gray-800: #1f1f1f;
$ouds-color-functional-dark-gray-880: #141414;
// $ouds-color-functional-dark-gray-960: #0a0a0a;
$ouds-color-functional-dodger-blue-100: #f0faff;
$ouds-color-functional-dodger-blue-200: #bde7ff;
$ouds-color-functional-dodger-blue-300: #8ad5ff;
$ouds-color-functional-dodger-blue-400: #57c3ff;
$ouds-color-functional-dodger-blue-500: #26b2ff;
$ouds-color-functional-dodger-blue-600: #009bf0;
$ouds-color-functional-dodger-blue-700: #007abd;
$ouds-color-functional-dodger-blue-800: #00598a;
$ouds-color-functional-dodger-blue-900: #003857;
$ouds-color-functional-light-gray-80: #f4f4f4;
$ouds-color-functional-light-gray-160: #eee;
// $ouds-color-functional-light-gray-240: #e0e0e0;
// $ouds-color-functional-light-gray-320: #d6d6d6;
// $ouds-color-functional-light-gray-400: #ccc;
// $ouds-color-functional-light-gray-480: #c2c2c2;
$ouds-color-functional-light-gray-560: #bbb;
// $ouds-color-functional-light-gray-640: #adadad;
// $ouds-color-functional-light-gray-720: #a3a3a3;
// $ouds-color-functional-light-gray-800: #999;
// $ouds-color-functional-light-gray-880: #8f8f8f;
// $ouds-color-functional-light-gray-960: #858585;
$ouds-color-functional-malachite-100: #edfcf0;
$ouds-color-functional-malachite-200: #c1f6ca;
$ouds-color-functional-malachite-300: #94f0a4;
$ouds-color-functional-malachite-400: #67e97e;
$ouds-color-functional-malachite-500: #3de35a;
$ouds-color-functional-malachite-600: #1ecd3c;
$ouds-color-functional-malachite-700: #17a02f;
$ouds-color-functional-malachite-800: #0e621d;
$ouds-color-functional-malachite-900: #0a4715;
$ouds-color-functional-scarlet-100: #ffe5e6;
$ouds-color-functional-scarlet-200: #ffb2b3;
$ouds-color-functional-scarlet-300: #ff8081;
$ouds-color-functional-scarlet-400: #ff4d4e;
$ouds-color-functional-scarlet-500: #ff1a1b;
$ouds-color-functional-scarlet-600: #db0002;
$ouds-color-functional-scarlet-700: #b20002;
$ouds-color-functional-scarlet-800: #800001;
$ouds-color-functional-scarlet-900: #4d0001;
$ouds-color-functional-sun-100: #fff7d6;
$ouds-color-functional-sun-200: #ffed99;
$ouds-color-functional-sun-300: #ffe270;
$ouds-color-functional-sun-400: #ffd73d;
$ouds-color-functional-sun-500: #ffd000;
$ouds-color-functional-sun-600: #d6aa00;
$ouds-color-functional-sun-700: #a38200;
$ouds-color-functional-sun-800: #665100;
$ouds-color-functional-sun-900: #3d3100;
$ouds-color-functional-white: #fff;
$ouds-color-opacity-black-0: rgba(0, 0, 0, 0);
$ouds-color-opacity-black-40: rgba(0, 0, 0, .04);
$ouds-color-opacity-black-80: rgba(0, 0, 0, .08);
// $ouds-color-opacity-black-120: rgba(0, 0, 0, .12);
$ouds-color-opacity-black-160: rgba(0, 0, 0, .16);
$ouds-color-opacity-black-200: rgba(0, 0, 0, .2);
$ouds-color-opacity-black-240: rgba(0, 0, 0, .24);
$ouds-color-opacity-black-280: rgba(0, 0, 0, .28);
$ouds-color-opacity-black-320: rgba(0, 0, 0, .32);
// $ouds-color-opacity-black-360: rgba(0, 0, 0, .36);
// $ouds-color-opacity-black-400: rgba(0, 0, 0, .4);
$ouds-color-opacity-black-440: rgba(0, 0, 0, .44);
// $ouds-color-opacity-black-480: rgba(0, 0, 0, .48);
$ouds-color-opacity-black-520: rgba(0, 0, 0, .52);
// $ouds-color-opacity-black-560: rgba(0, 0, 0, .56);
// $ouds-color-opacity-black-600: rgba(0, 0, 0, .6);
// $ouds-color-opacity-black-640: rgba(0, 0, 0, .64);
$ouds-color-opacity-black-680: rgba(0, 0, 0, .68);
// $ouds-color-opacity-black-720: rgba(0, 0, 0, .72);
// $ouds-color-opacity-black-760: rgba(0, 0, 0, .76);
// $ouds-color-opacity-black-800: rgba(0, 0, 0, .8);
$ouds-color-opacity-black-840: rgba(0, 0, 0, .84);
// $ouds-color-opacity-black-880: rgba(0, 0, 0, .88);
// $ouds-color-opacity-black-920: rgba(0, 0, 0, .92);
// $ouds-color-opacity-black-960: rgba(0, 0, 0, .96);
$ouds-color-opacity-dodger-blue: rgba(38, 178, 255, .08);
$ouds-color-opacity-malachite: rgba(61, 227, 90, .12);
$ouds-color-opacity-scarlet: rgba(234, 3, 5, .08);
$ouds-color-opacity-sun: rgba(255, 208, 0, .16);
$ouds-color-opacity-white-0: rgba(255, 255, 255, 0);
$ouds-color-opacity-white-40: rgba(255, 255, 255, .04);
$ouds-color-opacity-white-80: rgba(255, 255, 255, .08);
// $ouds-color-opacity-white-120: rgba(255, 255, 255, .12);
// $ouds-color-opacity-white-160: rgba(255, 255, 255, .16);
$ouds-color-opacity-white-200: rgba(255, 255, 255, .2);
// $ouds-color-opacity-white-240: rgba(255, 255, 255, .24);
// $ouds-color-opacity-white-280: rgba(255, 255, 255, .28);
// $ouds-color-opacity-white-320: rgba(255, 255, 255, .32);
// $ouds-color-opacity-white-360: rgba(255, 255, 255, .36);
// $ouds-color-opacity-white-400: rgba(255, 255, 255, .4);
// $ouds-color-opacity-white-440: rgba(255, 255, 255, .44);
// $ouds-color-opacity-white-480: rgba(255, 255, 255, .48);
// $ouds-color-opacity-white-520: rgba(255, 255, 255, .52);
// $ouds-color-opacity-white-560: rgba(255, 255, 255, .56);
// $ouds-color-opacity-white-600: rgba(255, 255, 255, .6);
$ouds-color-opacity-white-640: rgba(255, 255, 255, .64);
// $ouds-color-opacity-white-680: rgba(255, 255, 255, .68);
// $ouds-color-opacity-white-720: rgba(255, 255, 255, .72);
// $ouds-color-opacity-white-760: rgba(255, 255, 255, .76);
$ouds-color-opacity-white-800: rgba(255, 255, 255, .8);
// $ouds-color-opacity-white-840: rgba(255, 255, 255, .84);
// $ouds-color-opacity-white-880: rgba(255, 255, 255, .88);
$ouds-color-opacity-white-920: rgba(255, 255, 255, .92);
// $ouds-color-opacity-white-960: rgba(255, 255, 255, .96);
// $ouds-color-orange-50: #fff2e6;
$ouds-color-orange-100: #ffd5b0;
$ouds-color-orange-200: #ffc18a;
$ouds-color-orange-300: #ffa554;
$ouds-color-orange-400: #ff9433;
$ouds-color-orange-500: #ff7900;
$ouds-color-orange-550: #f15e00;
$ouds-color-orange-600: #e86e00;
$ouds-color-orange-700: #b55600;
$ouds-color-orange-800: #8c4300;
$ouds-color-orange-900: #6b3300;
$ouds-color-warm-gray-100: #f9f5f0;
// $ouds-color-warm-gray-200: #e9ddce;
// $ouds-color-warm-gray-300: #d6c4ae;
// $ouds-color-warm-gray-400: #c1ab90;
// $ouds-color-warm-gray-500: #a99275;
// $ouds-color-warm-gray-600: #8a7860;
// $ouds-color-warm-gray-700: #685d50;
// $ouds-color-warm-gray-800: #48433d;
$ouds-color-warm-gray-900: #353228;

Semantic tokens

Color semantic tokens as Sass variables. Should not be used as-is. Prefer use our CSS semantic tokens.

scss/tokens/_semantic.scss

$ouds-color-opacity-lower-light: $ouds-color-opacity-black-80;
$ouds-color-opacity-lowest-light: $ouds-color-opacity-black-40;
$ouds-color-opacity-transparent-light: $ouds-color-opacity-black-0;
$ouds-color-opacity-lower-dark: $ouds-color-opacity-white-80;
$ouds-color-opacity-lowest-dark: $ouds-color-opacity-white-40;
$ouds-color-opacity-transparent-dark: $ouds-color-opacity-white-0;
$ouds-color-action-disabled-light: $ouds-color-opacity-black-200;
$ouds-color-action-enabled-light: $ouds-color-functional-black;
$ouds-color-action-focus-light: $ouds-color-opacity-black-680;
$ouds-color-action-highlighted-light: $ouds-color-functional-black;
$ouds-color-action-hover-light: $ouds-color-opacity-black-680;
$ouds-color-action-loading-light: $ouds-color-orange-550;
$ouds-color-action-negative-enabled-light: $ouds-color-functional-scarlet-600;
$ouds-color-action-negative-focus-light: $ouds-color-functional-scarlet-700;
$ouds-color-action-negative-hover-light: $ouds-color-functional-scarlet-700;
$ouds-color-action-negative-loading-light: $ouds-color-functional-scarlet-800;
$ouds-color-action-negative-pressed-light: $ouds-color-functional-scarlet-800;
$ouds-color-action-negative-enabled-dark: $ouds-color-functional-scarlet-300;
$ouds-color-action-negative-focus-dark: $ouds-color-functional-scarlet-200;
$ouds-color-action-negative-hover-dark: $ouds-color-functional-scarlet-200;
$ouds-color-action-negative-loading-dark: $ouds-color-functional-scarlet-100;
$ouds-color-action-negative-pressed-dark: $ouds-color-functional-scarlet-100;
$ouds-color-action-pressed-light: $ouds-color-orange-550;
$ouds-color-action-selected-light: $ouds-color-orange-550;
$ouds-color-action-support-enabled-light: $ouds-color-opacity-black-40;
$ouds-color-action-support-focus-light: $ouds-color-opacity-black-80;
$ouds-color-action-support-hover-light: $ouds-color-opacity-black-80;
$ouds-color-action-support-loading-light: $ouds-color-opacity-black-80;
$ouds-color-action-support-pressed-light: $ouds-color-opacity-black-80;
$ouds-color-action-support-enabled-dark: $ouds-color-opacity-white-40;
$ouds-color-action-support-focus-dark: $ouds-color-opacity-white-80;
$ouds-color-action-support-hover-dark: $ouds-color-opacity-white-80;
$ouds-color-action-support-loading-dark: $ouds-color-opacity-white-80;
$ouds-color-action-support-pressed-dark: $ouds-color-opacity-white-80;
$ouds-color-action-visited-light: $ouds-color-decorative-amethyst-600;
$ouds-color-action-disabled-dark: $ouds-color-opacity-white-200;
$ouds-color-action-enabled-dark: $ouds-color-functional-light-gray-160;
$ouds-color-action-focus-dark: $ouds-color-opacity-white-640;
$ouds-color-action-highlighted-dark: $ouds-color-functional-light-gray-160;
$ouds-color-action-hover-dark: $ouds-color-opacity-white-640;
$ouds-color-action-loading-dark: $ouds-color-orange-500;
$ouds-color-action-pressed-dark: $ouds-color-orange-500;
$ouds-color-action-selected-dark: $ouds-color-orange-500;
$ouds-color-action-visited-dark: $ouds-color-decorative-amethyst-400;
$ouds-color-always-black-light: $ouds-color-functional-black;
$ouds-color-always-on-black-light: $ouds-color-functional-light-gray-160;
$ouds-color-always-on-white-light: $ouds-color-functional-black;
$ouds-color-always-white-light: $ouds-color-functional-white;
$ouds-color-always-black-dark: $ouds-color-functional-black;
$ouds-color-always-on-black-dark: $ouds-color-functional-light-gray-160;
$ouds-color-always-on-white-dark: $ouds-color-functional-black;
$ouds-color-always-white-dark: $ouds-color-functional-white;
$ouds-color-bg-emphasized-light: $ouds-color-functional-dark-gray-880;
$ouds-color-bg-primary-light: $ouds-color-functional-white;
$ouds-color-bg-secondary-light: $ouds-color-functional-light-gray-80;
$ouds-color-bg-tertiary-light: $ouds-color-warm-gray-100;
$ouds-color-bg-emphasized-dark: $ouds-color-functional-dark-gray-640;
$ouds-color-bg-primary-dark: $ouds-color-functional-dark-gray-880;
$ouds-color-bg-secondary-dark: $ouds-color-functional-dark-gray-800;
$ouds-color-bg-tertiary-dark: $ouds-color-warm-gray-900;
$ouds-color-border-brand-primary-light: $ouds-color-orange-550;
$ouds-color-border-default-light: $ouds-color-opacity-black-200;
$ouds-color-border-emphasized-light: $ouds-color-functional-black;
$ouds-color-border-focus-light: $ouds-color-functional-black;
$ouds-color-border-focus-inset-light: $ouds-color-functional-white;
$ouds-color-border-on-brand-primary-light: $ouds-color-functional-black;
$ouds-color-border-on-brand-primary-dark: $ouds-color-functional-black;
$ouds-color-border-brand-primary-dark: $ouds-color-orange-500;
$ouds-color-border-default-dark: $ouds-color-opacity-white-200;
$ouds-color-border-emphasized-dark: $ouds-color-opacity-white-920;
$ouds-color-border-focus-dark: $ouds-color-functional-light-gray-160;
$ouds-color-border-focus-inset-dark: $ouds-color-functional-dark-gray-880;
$ouds-color-content-brand-primary-light: $ouds-color-orange-550;
$ouds-color-content-default-light: $ouds-color-functional-black;
$ouds-color-content-disabled-light: $ouds-color-opacity-black-200;
$ouds-color-content-muted-light: $ouds-color-opacity-black-680;
$ouds-color-content-on-action-disabled-light: $ouds-color-functional-white;
$ouds-color-content-on-action-enabled-light: $ouds-color-functional-white;
$ouds-color-content-on-action-focus-light: $ouds-color-functional-white;
$ouds-color-content-on-action-highlighted-light: $ouds-color-functional-white;
$ouds-color-content-on-action-hover-light: $ouds-color-functional-white;
$ouds-color-content-on-action-loading-light: $ouds-color-functional-white;
$ouds-color-content-on-action-pressed-light: $ouds-color-functional-white;
$ouds-color-content-on-action-disabled-dark: $ouds-color-functional-black;
$ouds-color-content-on-action-enabled-dark: $ouds-color-functional-black;
$ouds-color-content-on-action-focus-dark: $ouds-color-functional-black;
$ouds-color-content-on-action-highlighted-dark: $ouds-color-functional-black;
$ouds-color-content-on-action-hover-dark: $ouds-color-functional-black;
$ouds-color-content-on-action-loading-dark: $ouds-color-functional-black;
$ouds-color-content-on-action-pressed-dark: $ouds-color-functional-black;
$ouds-color-content-on-brand-primary-light: $ouds-color-functional-black;
$ouds-color-content-on-brand-primary-dark: $ouds-color-functional-black;
$ouds-color-content-on-overlay-emphasized-light: $ouds-color-functional-white;
$ouds-color-content-on-overlay-emphasized-dark: $ouds-color-functional-black;
$ouds-color-content-on-status-emphasized-light: $ouds-color-functional-black;
$ouds-color-content-on-status-emphasized-alt-light: $ouds-color-functional-white;
$ouds-color-content-on-status-muted-light: $ouds-color-functional-black;
$ouds-color-content-on-status-emphasized-dark: $ouds-color-functional-black;
$ouds-color-content-on-status-emphasized-alt-dark: $ouds-color-functional-black;
$ouds-color-content-on-status-muted-dark: $ouds-color-functional-light-gray-160;
$ouds-color-content-status-info-light: $ouds-color-functional-dodger-blue-500;
$ouds-color-content-status-negative-light: $ouds-color-functional-scarlet-600;
$ouds-color-content-status-positive-light: $ouds-color-functional-malachite-500;
$ouds-color-content-status-warning-light: $ouds-color-functional-sun-500;
$ouds-color-content-status-info-dark: $ouds-color-functional-dodger-blue-500;
$ouds-color-content-status-negative-dark: $ouds-color-functional-scarlet-600;
$ouds-color-content-status-positive-dark: $ouds-color-functional-malachite-500;
$ouds-color-content-status-warning-dark: $ouds-color-functional-sun-500;
$ouds-color-content-brand-primary-dark: $ouds-color-orange-500;
$ouds-color-content-default-dark: $ouds-color-functional-light-gray-160;
$ouds-color-content-disabled-dark: $ouds-color-opacity-white-200;
$ouds-color-content-muted-dark: $ouds-color-opacity-white-640;
$ouds-color-overlay-default-light: $ouds-color-functional-white;
$ouds-color-overlay-drag-light: $ouds-color-opacity-black-40;
$ouds-color-overlay-emphasized-light: $ouds-color-functional-dark-gray-720;
$ouds-color-overlay-modal-light: $ouds-color-functional-white;
$ouds-color-overlay-default-dark: $ouds-color-opacity-white-80;
$ouds-color-overlay-drag-dark: $ouds-color-opacity-white-200;
$ouds-color-overlay-emphasized-dark: $ouds-color-functional-light-gray-160;
$ouds-color-overlay-modal-dark: $ouds-color-functional-dark-gray-640;
$ouds-color-surface-brand-primary-light: $ouds-color-orange-500;
$ouds-color-surface-brand-primary-dark: $ouds-color-orange-500;
$ouds-color-surface-status-accent-emphasized-light: $ouds-color-functional-sun-500;
$ouds-color-surface-status-accent-muted-light: $ouds-color-opacity-sun;
$ouds-color-surface-status-accent-emphasized-dark: $ouds-color-functional-sun-300;
$ouds-color-surface-status-accent-muted-dark: $ouds-color-warm-gray-900;
$ouds-color-surface-status-info-emphasized-light: $ouds-color-functional-dodger-blue-500;
$ouds-color-surface-status-info-muted-light: $ouds-color-opacity-dodger-blue;
$ouds-color-surface-status-info-emphasized-dark: $ouds-color-functional-dodger-blue-300;
$ouds-color-surface-status-info-muted-dark: $ouds-color-functional-dodger-blue-900;
$ouds-color-surface-status-negative-emphasized-light: $ouds-color-functional-scarlet-600;
$ouds-color-surface-status-negative-muted-light: $ouds-color-opacity-scarlet;
$ouds-color-surface-status-negative-emphasized-dark: $ouds-color-functional-scarlet-300;
$ouds-color-surface-status-negative-muted-dark: $ouds-color-functional-scarlet-900;
$ouds-color-surface-status-neutral-emphasized-light: $ouds-color-opacity-black-840;
$ouds-color-surface-status-neutral-muted-light: $ouds-color-opacity-black-40;
$ouds-color-surface-status-neutral-emphasized-dark: $ouds-color-opacity-white-800;
$ouds-color-surface-status-neutral-muted-dark: $ouds-color-opacity-white-80;
$ouds-color-surface-status-positive-emphasized-light: $ouds-color-functional-malachite-500;
$ouds-color-surface-status-positive-muted-light: $ouds-color-opacity-malachite;
$ouds-color-surface-status-positive-emphasized-dark: $ouds-color-functional-malachite-300;
$ouds-color-surface-status-positive-muted-dark: $ouds-color-functional-malachite-900;
$ouds-color-surface-status-warning-emphasized-light: $ouds-color-functional-sun-500;
$ouds-color-surface-status-warning-muted-light: $ouds-color-opacity-sun;
$ouds-color-surface-status-warning-emphasized-dark: $ouds-color-functional-sun-300;
$ouds-color-surface-status-warning-muted-dark: $ouds-color-functional-sun-900;
$ouds-color-decorative-accent-1-default-light: $ouds-color-decorative-emerald-500;
$ouds-color-decorative-accent-1-emphasized-light: $ouds-color-decorative-emerald-700;
$ouds-color-decorative-accent-1-muted-light: $ouds-color-decorative-emerald-200;
$ouds-color-decorative-accent-1-default-dark: $ouds-color-decorative-emerald-500;
$ouds-color-decorative-accent-1-emphasized-dark: $ouds-color-decorative-emerald-700;
$ouds-color-decorative-accent-1-muted-dark: $ouds-color-decorative-emerald-200;
$ouds-color-decorative-accent-2-default-light: $ouds-color-decorative-sky-400;
$ouds-color-decorative-accent-2-emphasized-light: $ouds-color-decorative-sky-700;
$ouds-color-decorative-accent-2-muted-light: $ouds-color-decorative-sky-200;
$ouds-color-decorative-accent-2-default-dark: $ouds-color-decorative-sky-400;
$ouds-color-decorative-accent-2-emphasized-dark: $ouds-color-decorative-sky-700;
$ouds-color-decorative-accent-2-muted-dark: $ouds-color-decorative-sky-200;
$ouds-color-decorative-accent-3-default-light: $ouds-color-functional-sun-500;
$ouds-color-decorative-accent-3-emphasized-light: $ouds-color-decorative-amber-500;
$ouds-color-decorative-accent-3-muted-light: $ouds-color-functional-sun-200;
$ouds-color-decorative-accent-3-default-dark: $ouds-color-functional-sun-500;
$ouds-color-decorative-accent-3-emphasized-dark: $ouds-color-decorative-amber-500;
$ouds-color-decorative-accent-3-muted-dark: $ouds-color-functional-sun-200;
$ouds-color-decorative-accent-4-default-light: $ouds-color-decorative-amethyst-400;
$ouds-color-decorative-accent-4-emphasized-light: $ouds-color-decorative-amethyst-800;
$ouds-color-decorative-accent-4-muted-light: $ouds-color-decorative-amethyst-200;
$ouds-color-decorative-accent-4-default-dark: $ouds-color-decorative-amethyst-400;
$ouds-color-decorative-accent-4-emphasized-dark: $ouds-color-decorative-amethyst-800;
$ouds-color-decorative-accent-4-muted-dark: $ouds-color-decorative-amethyst-200;
$ouds-color-decorative-accent-5-default-light: $ouds-color-decorative-shocking-pink-200;
$ouds-color-decorative-accent-5-emphasized-light: $ouds-color-decorative-shocking-pink-300;
$ouds-color-decorative-accent-5-muted-light: $ouds-color-decorative-shocking-pink-100;
$ouds-color-decorative-accent-5-default-dark: $ouds-color-decorative-shocking-pink-200;
$ouds-color-decorative-accent-5-emphasized-dark: $ouds-color-decorative-shocking-pink-300;
$ouds-color-decorative-accent-5-muted-dark: $ouds-color-decorative-shocking-pink-100;
$ouds-color-decorative-brand-primary-light: $ouds-color-orange-500;
$ouds-color-decorative-brand-secondary-light: $ouds-color-functional-black;
$ouds-color-decorative-brand-tertiary-light: $ouds-color-functional-white;
$ouds-color-decorative-brand-primary-dark: $ouds-color-orange-500;
$ouds-color-decorative-brand-secondary-dark: $ouds-color-functional-light-gray-160;
$ouds-color-decorative-brand-tertiary-dark: $ouds-color-functional-dark-gray-880;
$ouds-color-decorative-neutral-default-light: $ouds-color-functional-dark-gray-400;
$ouds-color-decorative-neutral-emphasized-light: $ouds-color-functional-dark-gray-640;
$ouds-color-decorative-neutral-muted-light: $ouds-color-functional-light-gray-160;
$ouds-color-decorative-neutral-default-dark: $ouds-color-functional-light-gray-560;
$ouds-color-decorative-neutral-emphasized-dark: $ouds-color-functional-light-gray-160;
$ouds-color-decorative-neutral-muted-dark: $ouds-color-functional-dark-gray-720;
$ouds-color-decorative-skin-tint-100-light: $ouds-color-decorative-deep-peach-100;
$ouds-color-decorative-skin-tint-200-light: $ouds-color-decorative-deep-peach-200;
$ouds-color-decorative-skin-tint-300-light: $ouds-color-decorative-deep-peach-300;
$ouds-color-decorative-skin-tint-400-light: $ouds-color-decorative-deep-peach-400;
$ouds-color-decorative-skin-tint-500-light: $ouds-color-decorative-deep-peach-500;
$ouds-color-decorative-skin-tint-600-light: $ouds-color-decorative-deep-peach-600;
$ouds-color-decorative-skin-tint-700-light: $ouds-color-decorative-deep-peach-700;
$ouds-color-decorative-skin-tint-800-light: $ouds-color-decorative-deep-peach-800;
$ouds-color-decorative-skin-tint-900-light: $ouds-color-decorative-deep-peach-900;
$ouds-color-decorative-skin-tint-100-dark: $ouds-color-decorative-deep-peach-100;
$ouds-color-decorative-skin-tint-200-dark: $ouds-color-decorative-deep-peach-200;
$ouds-color-decorative-skin-tint-300-dark: $ouds-color-decorative-deep-peach-300;
$ouds-color-decorative-skin-tint-400-dark: $ouds-color-decorative-deep-peach-400;
$ouds-color-decorative-skin-tint-500-dark: $ouds-color-decorative-deep-peach-500;
$ouds-color-decorative-skin-tint-600-dark: $ouds-color-decorative-deep-peach-600;
$ouds-color-decorative-skin-tint-700-dark: $ouds-color-decorative-deep-peach-700;
$ouds-color-decorative-skin-tint-800-dark: $ouds-color-decorative-deep-peach-800;
$ouds-color-decorative-skin-tint-900-dark: $ouds-color-decorative-deep-peach-900;

CSS semantic tokens

Color semantic tokens as CSS variables.

scss/tokens/_semantic-colors-custom-props.scss

@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-light};
  --#{$prefix}color-always-on-black: #{$ouds-color-always-on-black-light};
  --#{$prefix}color-always-on-white: #{$ouds-color-always-on-white-light};
  --#{$prefix}color-always-white: #{$ouds-color-always-white-light};
  --#{$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: #{$ouds-color-border-focus-light};
  --#{$prefix}color-border-focus-inset: #{$ouds-color-border-focus-inset-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-emphasized: #{$ouds-color-content-on-status-emphasized-light};
  --#{$prefix}color-content-on-status-emphasized-alt: #{$ouds-color-content-on-status-emphasized-alt-light};
  --#{$prefix}color-content-on-status-muted: #{$ouds-color-content-on-status-muted-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-light};
  --#{$prefix}color-decorative-accent-1-emphasized: #{$ouds-color-decorative-accent-1-emphasized-light};
  --#{$prefix}color-decorative-accent-1-muted: #{$ouds-color-decorative-accent-1-muted-light};
  --#{$prefix}color-decorative-accent-2-default: #{$ouds-color-decorative-accent-2-default-light};
  --#{$prefix}color-decorative-accent-2-emphasized: #{$ouds-color-decorative-accent-2-emphasized-light};
  --#{$prefix}color-decorative-accent-2-muted: #{$ouds-color-decorative-accent-2-muted-light};
  --#{$prefix}color-decorative-accent-3-default: #{$ouds-color-decorative-accent-3-default-light};
  --#{$prefix}color-decorative-accent-3-emphasized: #{$ouds-color-decorative-accent-3-emphasized-light};
  --#{$prefix}color-decorative-accent-3-muted: #{$ouds-color-decorative-accent-3-muted-light};
  --#{$prefix}color-decorative-accent-4-default: #{$ouds-color-decorative-accent-4-default-light};
  --#{$prefix}color-decorative-accent-4-emphasized: #{$ouds-color-decorative-accent-4-emphasized-light};
  --#{$prefix}color-decorative-accent-4-muted: #{$ouds-color-decorative-accent-4-muted-light};
  --#{$prefix}color-decorative-accent-5-default: #{$ouds-color-decorative-accent-5-default-light};
  --#{$prefix}color-decorative-accent-5-emphasized: #{$ouds-color-decorative-accent-5-emphasized-light};
  --#{$prefix}color-decorative-accent-5-muted: #{$ouds-color-decorative-accent-5-muted-light};
  --#{$prefix}color-decorative-brand-primary: #{$ouds-color-decorative-brand-primary-light};
  --#{$prefix}color-decorative-brand-secondary: #{$ouds-color-decorative-brand-secondary-light};
  --#{$prefix}color-decorative-brand-tertiary: #{$ouds-color-decorative-brand-tertiary-light};
  --#{$prefix}color-decorative-neutral-default: #{$ouds-color-decorative-neutral-default-light};
  --#{$prefix}color-decorative-neutral-emphasized: #{$ouds-color-decorative-neutral-emphasized-light};
  --#{$prefix}color-decorative-neutral-muted: #{$ouds-color-decorative-neutral-muted-light};
  --#{$prefix}color-decorative-skin-tint-100: #{$ouds-color-decorative-skin-tint-100-light};
  --#{$prefix}color-decorative-skin-tint-200: #{$ouds-color-decorative-skin-tint-200-light};
  --#{$prefix}color-decorative-skin-tint-300: #{$ouds-color-decorative-skin-tint-300-light};
  --#{$prefix}color-decorative-skin-tint-400: #{$ouds-color-decorative-skin-tint-400-light};
  --#{$prefix}color-decorative-skin-tint-500: #{$ouds-color-decorative-skin-tint-500-light};
  --#{$prefix}color-decorative-skin-tint-600: #{$ouds-color-decorative-skin-tint-600-light};
  --#{$prefix}color-decorative-skin-tint-700: #{$ouds-color-decorative-skin-tint-700-light};
  --#{$prefix}color-decorative-skin-tint-800: #{$ouds-color-decorative-skin-tint-800-light};
  --#{$prefix}color-decorative-skin-tint-900: #{$ouds-color-decorative-skin-tint-900-light};
  --#{$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-light};
  --#{$prefix}elevation-color-drag: #{$ouds-elevation-color-drag-light};
  --#{$prefix}elevation-color-emphasized: #{$ouds-elevation-color-emphasized-light};
  --#{$prefix}elevation-color-none: #{$ouds-elevation-color-none-light};
  --#{$prefix}elevation-color-raised: #{$ouds-elevation-color-raised-light};
  --#{$prefix}elevation-color-sticky-default: #{$ouds-elevation-color-sticky-default-light};
  --#{$prefix}elevation-color-sticky-emphasized: #{$ouds-elevation-color-sticky-emphasized-light};
  --#{$prefix}elevation-color-sticky-navigation-scrolled: #{$ouds-elevation-color-sticky-navigation-scrolled-light};
}

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 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.

scss/_variables.scss

$blue:    $ouds-color-functional-dodger-blue-500; // OUDS mod: instead of `#0d6efd`
$indigo:  $ouds-color-decorative-amethyst-400; // OUDS mod: instead of `#6610f2`
$purple:  $ouds-color-decorative-amethyst-400; // OUDS mod: instead of `#6f42c1`
$pink:    $ouds-color-decorative-shocking-pink-200; // OUDS mod: instead of `#d63384`
$red:     $ouds-color-functional-scarlet-600; // OUDS mod: instead of `#dc3545`
$orange:  $ouds-color-orange-550; // OUDS mod: instead of `#fd7e14`
$yellow:  $ouds-color-functional-sun-500; // OUDS mod: instead of `#ffc107`
$green:   $ouds-color-functional-malachite-500; // OUDS mod: instead of `#198754`
$teal:    $ouds-color-decorative-emerald-500; // OUDS mod: instead of `#20c997`
$cyan:    $ouds-color-decorative-sky-400; // OUDS mod: instead of `#0dcaf0`

scss/_variables.scss

$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`

scss/_variables-dark.scss

$primary-dark:    $ouds-color-content-brand-primary-dark;
$secondary-dark:  $white;
$success-dark:    $ouds-color-functional-malachite-300;
$info-dark:       $ouds-color-functional-dodger-blue-300;
$warning-dark:    $ouds-color-functional-sun-300;
$danger-dark:     $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.

scss/_variables.scss

$white:    $ouds-color-functional-white; // OUDS mod: instead of `#fff`
$gray-100: $ouds-color-functional-light-gray-80; // OUDS mod: instead of `#f8f9fa`
$gray-200: $ouds-color-functional-light-gray-160; // OUDS mod: instead of `#e9ecef`
$gray-300: $ouds-color-functional-light-gray-560; // OUDS mod: instead of `#dee2e6`
$gray-400: $ouds-color-functional-light-gray-560; // OUDS mod: instead of `#ced4da`
$gray-500: $ouds-color-functional-dark-gray-400; // OUDS mod: instead of `#adb5bd`
$gray-600: $ouds-color-functional-dark-gray-640; // OUDS mod: instead of `#6c757d`
$gray-700: $ouds-color-functional-dark-gray-720; // OUDS mod: instead of `#495057`
$gray-800: $ouds-color-functional-dark-gray-800; // OUDS mod: instead of `#343a40`
$gray-900: $ouds-color-functional-dark-gray-880; // OUDS mod: instead of `#212529`
$black:    $ouds-color-functional-black; // OUDS mod: instead of `#000`

scss/_maps.scss

$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:

scss/_variables.scss

$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`

scss/_variables-dark.scss

$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 maps

Our text utilities are generated from our $ouds-text-colors:

scss/_maps.scss

$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-emphasized": var(--#{$prefix}color-content-on-status-emphasized),
  "on-status-emphasized-alt": var(--#{$prefix}color-content-on-status-emphasized-alt),
  "on-status-muted": var(--#{$prefix}color-content-on-status-muted),
  "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.

scss/_variables.scss

$theme-colors: (
  "primary":    $primary,
  "secondary":  $secondary,
  "success":    $success,
  "info":       $info,
  "warning":    $warning,
  "danger":     $danger,
  "light":      $light,
  "dark":       $dark
);

scss/_variables-dark.scss

$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.

scss/_variables.scss

$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:

scss/_maps.scss

$theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value");

scss/_maps.scss

$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:

scss/_maps.scss

$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:

scss/_maps.scss

$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/_maps.scss

$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 API

Color utilities are declared in our utilities API in scss/_utilities.scss. Learn how to use the utilities API.

scss/_utilities.scss

"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.

scss/_utilities.scss

"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
),

Colors

On this page On this page

Colors

On icons

Specificity

CSS

Sass tokens

Raw tokens

Semantic tokens

CSS semantic tokens

Sass variables

Sass maps

Sass utilities API

On this page