View on GitHub

Background

Convey meaning through background-color.

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.

Background color

Background utilities like .bg-* are generated from our $ouds-backgrounds Sass map and respond to color modes.

Similar to the contextual text color classes, set the background of an element to any contextual class. Background utilities do not set color, so depending on the cases you’ll want to use an additional:

  • [data-bs-theme] color mode attribute is the best option most of the time and moreover when the element using a background utility contains complex sub-elements such as components that need to respond to color modes
  • .text-* color utilities when the background color and color couple are accessible together in light and dark mode, and there is no components inside
  • .text-bg-* color & background helper from our background colors and if there is no components inside
Bootstrap $enable-bootstrap-compatibility: true

Here are the equivalent Bootstrap background that you shouldn’t be using. Prefer using the classes above according to our design system.

.bg-primary
.bg-primary-subtle
.bg-secondary
.bg-secondary-subtle
.bg-success
.bg-success-subtle
.bg-danger
.bg-danger-subtle
.bg-warning
.bg-warning-subtle
.bg-info
.bg-info-subtle
.bg-light
.bg-light-subtle
.bg-dark
.bg-dark-subtle
.bg-body-secondary
.bg-body-tertiary
.bg-body
.bg-black
.bg-white
.bg-transparent
<div class="p-3 mb-2 bg-primary text-bg-primary">.bg-primary</div>
<div class="p-3 mb-2 bg-primary-subtle text-primary-emphasis">.bg-primary-subtle</div>
<div class="p-3 mb-2 bg-secondary text-bg-secondary">.bg-secondary</div>
<div class="p-3 mb-2 bg-secondary-subtle text-secondary-emphasis">.bg-secondary-subtle</div>
<div class="p-3 mb-2 bg-success text-bg-success">.bg-success</div>
<div class="p-3 mb-2 bg-success-subtle text-success-emphasis">.bg-success-subtle</div>
<div class="p-3 mb-2 bg-danger text-bg-danger">.bg-danger</div>
<div class="p-3 mb-2 bg-danger-subtle text-danger-emphasis">.bg-danger-subtle</div>
<div class="p-3 mb-2 bg-warning text-bg-warning">.bg-warning</div>
<div class="p-3 mb-2 bg-warning-subtle text-warning-emphasis">.bg-warning-subtle</div>
<div class="p-3 mb-2 bg-info text-bg-info">.bg-info</div>
<div class="p-3 mb-2 bg-info-subtle text-info-emphasis">.bg-info-subtle</div>
<div class="p-3 mb-2 bg-light text-bg-light">.bg-light</div>
<div class="p-3 mb-2 bg-light-subtle text-light-emphasis">.bg-light-subtle</div>
<div class="p-3 mb-2 bg-dark text-bg-dark">.bg-dark</div>
<div class="p-3 mb-2 bg-dark-subtle text-dark-emphasis">.bg-dark-subtle</div>
<div class="p-3 mb-2 bg-body-secondary">.bg-body-secondary</div>
<div class="p-3 mb-2 bg-body-tertiary">.bg-body-tertiary</div>
<div class="p-3 mb-2 bg-body text-body">.bg-body</div>
<div class="p-3 mb-2 bg-black text-white">.bg-black</div>
<div class="p-3 mb-2 bg-white text-black">.bg-white</div>
<div class="p-3 mb-2 bg-transparent text-body">.bg-transparent</div>
html

data-bs-theme attribute

Here are the nominal cases you should be using, when there is no other theme interferences than the root one, using data-bs-theme attribute:

Please note that we use [data-bs-theme] attribute on a child element to avoid interfering with the parent theme. This is a workaround to avoid switching the colors between light and dark modes and keep having the good ones displayed.

.bg-primary

.bg-secondary

.bg-tertiary

.bg-emphasized

.bg-brand-primary

.bg-status-neutral-emphasized

.bg-status-neutral-muted

.bg-status-accent-emphasized

.bg-status-accent-muted

.bg-status-positive-emphasized

.bg-status-positive-muted

.bg-status-negative-emphasized

.bg-status-negative-muted

.bg-status-warning-emphasized

.bg-status-warning-muted

.bg-status-info-emphasized

.bg-status-info-muted

.bg-always-black

.bg-always-white

.bg-transparent

<p class="bg-primary p-tall fw-bold">.bg-primary</p>
<p class="bg-secondary p-tall fw-bold">.bg-secondary</p>
<p class="bg-tertiary p-tall fw-bold">.bg-tertiary</p>
<p class="bg-emphasized p-tall fw-bold"><span data-bs-theme="dark">.bg-emphasized</span></p>
<p class="bg-brand-primary p-tall fw-bold"><span data-bs-theme="light">.bg-brand-primary</span></p>
<p class="bg-status-neutral-emphasized p-tall fw-bold"><span data-bs-theme="root-inverted">.bg-status-neutral-emphasized</span></p>
<p class="bg-status-neutral-muted p-tall fw-bold">.bg-status-neutral-muted</p>
<p class="bg-status-accent-emphasized p-tall fw-bold"><span data-bs-theme="light">.bg-status-accent-emphasized</span></p>
<p class="bg-status-accent-muted p-tall fw-bold">.bg-status-accent-muted</p>
<p class="bg-status-positive-emphasized p-tall fw-bold"><span data-bs-theme="light">.bg-status-positive-emphasized</span></p>
<p class="bg-status-positive-muted p-tall fw-bold">.bg-status-positive-muted</p>
<p class="bg-status-negative-emphasized p-tall fw-bold"><span data-bs-theme="root-inverted">.bg-status-negative-emphasized</span></p>
<p class="bg-status-negative-muted p-tall fw-bold">.bg-status-negative-muted</p>
<p class="bg-status-warning-emphasized p-tall fw-bold"><span data-bs-theme="light">.bg-status-warning-emphasized</span></p>
<p class="bg-status-warning-muted p-tall fw-bold">.bg-status-warning-muted</p>
<p class="bg-status-info-emphasized p-tall fw-bold"><span data-bs-theme="light">.bg-status-info-emphasized</span></p>
<p class="bg-status-info-muted p-tall fw-bold">.bg-status-info-muted</p>
<p class="bg-always-black p-tall fw-bold"><span data-bs-theme="dark">.bg-always-black</span></p>
<p class="bg-always-white p-tall fw-bold"><span data-bs-theme="light">.bg-always-white</span></p>
<p class="bg-transparent p-tall fw-bold">.bg-transparent</p>
html

Inside a static theme

Here is a more complex example to understand how to use [data-bs-theme] in specific static contexts. In here you should only use the inverse static theme by replacing all data-bs-theme="root-inverted" by data-bs-theme="light". So if you’re in a dark theme context, use only data-bs-theme="light" when and if needed and respectively.

You're in a static light context

.bg-primary

.bg-secondary

.bg-tertiary

.bg-emphasized

.bg-brand-primary

.bg-status-neutral-emphasized

.bg-status-neutral-muted

.bg-status-accent-emphasized

.bg-status-accent-muted

.bg-status-positive-emphasized

.bg-status-positive-muted

.bg-status-negative-emphasized

.bg-status-negative-muted

.bg-status-warning-emphasized

.bg-status-warning-muted

.bg-status-info-emphasized

.bg-status-info-muted

.bg-always-black

.bg-always-white

.bg-transparent

  <div class="bg-brand-primary p-tall">
    <div data-bs-theme="light">
      <p class="bg-primary p-tall fw-bold">.bg-primary</p>
      <p class="bg-secondary p-tall fw-bold">.bg-secondary</p>
      <p class="bg-tertiary p-tall fw-bold">.bg-tertiary</p>
      <p class="bg-emphasized p-tall fw-bold"><span data-bs-theme="dark">.bg-emphasized</span></p>
      <p class="bg-brand-primary p-tall fw-bold">.bg-brand-primary</p>
      <p class="bg-status-neutral-emphasized p-tall fw-bold"><span data-bs-theme="dark">.bg-status-neutral-emphasized</span></p>
      <p class="bg-status-neutral-muted p-tall fw-bold">.bg-status-neutral-muted</p>
      <p class="bg-status-accent-emphasized p-tall fw-bold">.bg-status-accent-emphasized</p>
      <p class="bg-status-accent-muted p-tall fw-bold">.bg-status-accent-muted</p>
      <p class="bg-status-positive-emphasized p-tall fw-bold">.bg-status-positive-emphasized</p>
      <p class="bg-status-positive-muted p-tall fw-bold">.bg-status-positive-muted</p>
      <p class="bg-status-negative-emphasized p-tall fw-bold"><span data-bs-theme="dark">.bg-status-negative-emphasized</span></p>
      <p class="bg-status-negative-muted p-tall fw-bold">.bg-status-negative-muted</p>
      <p class="bg-status-warning-emphasized p-tall fw-bold">.bg-status-warning-emphasized</p>
      <p class="bg-status-warning-muted p-tall fw-bold">.bg-status-warning-muted</p>
      <p class="bg-status-info-emphasized p-tall fw-bold">.bg-status-info-emphasized</p>
      <p class="bg-status-info-muted p-tall fw-bold">.bg-status-info-muted</p>
      <p class="bg-always-black p-tall fw-bold"><span data-bs-theme="dark">.bg-always-black</span></p>
      <p class="bg-always-white p-tall fw-bold">.bg-always-white</p>
      <p class="bg-transparent p-tall fw-bold">.bg-transparent</p>
    </div>
  </div>
html
You're in a static dark context

.bg-primary

.bg-secondary

.bg-tertiary

.bg-emphasized

.bg-brand-primary

.bg-status-neutral-emphasized

.bg-status-neutral-muted

.bg-status-accent-emphasized

.bg-status-accent-muted

.bg-status-positive-emphasized

.bg-status-positive-muted

.bg-status-negative-emphasized

.bg-status-negative-muted

.bg-status-warning-emphasized

.bg-status-warning-muted

.bg-status-info-emphasized

.bg-status-info-muted

.bg-always-black

.bg-always-white

.bg-transparent

  <div class="bg-emphasized p-tall">
    <div data-bs-theme="dark">
      <p class="bg-primary p-tall fw-bold">.bg-primary</p>
      <p class="bg-secondary p-tall fw-bold">.bg-secondary</p>
      <p class="bg-tertiary p-tall fw-bold">.bg-tertiary</p>
      <p class="bg-emphasized p-tall fw-bold">.bg-emphasized</p>
      <p class="bg-brand-primary p-tall fw-bold"><span data-bs-theme="light">.bg-brand-primary</span></p>
      <p class="bg-status-neutral-emphasized p-tall fw-bold"><span data-bs-theme="light">.bg-status-neutral-emphasized</span></p>
      <p class="bg-status-neutral-muted p-tall fw-bold">.bg-status-neutral-muted</p>
      <p class="bg-status-accent-emphasized p-tall fw-bold"><span data-bs-theme="light">.bg-status-accent-emphasized</span></p>
      <p class="bg-status-accent-muted p-tall fw-bold">.bg-status-accent-muted</p>
      <p class="bg-status-positive-emphasized p-tall fw-bold"><span data-bs-theme="light">.bg-status-positive-emphasized</span></p>
      <p class="bg-status-positive-muted p-tall fw-bold">.bg-status-positive-muted</p>
      <p class="bg-status-negative-emphasized p-tall fw-bold"><span data-bs-theme="light">.bg-status-negative-emphasized</span></p>
      <p class="bg-status-negative-muted p-tall fw-bold">.bg-status-negative-muted</p>
      <p class="bg-status-warning-emphasized p-tall fw-bold"><span data-bs-theme="light">.bg-status-warning-emphasized</span></p>
      <p class="bg-status-warning-muted p-tall fw-bold">.bg-status-warning-muted</p>
      <p class="bg-status-info-emphasized p-tall fw-bold"><span data-bs-theme="light">.bg-status-info-emphasized</span></p>
      <p class="bg-status-info-muted p-tall fw-bold">.bg-status-info-muted</p>
      <p class="bg-always-black p-tall fw-bold">.bg-always-black</p>
      <p class="bg-always-white p-tall fw-bold"><span data-bs-theme="light">.bg-always-white</span></p>
      <p class="bg-transparent p-tall fw-bold">.bg-transparent</p>
    </div>
  </div>
html

Inside a dynamic theme

Here is a more complex example to understand how to use [data-bs-theme] in specific dynamic contexts. In here you should only replace data-bs-theme="root-inverted" by data-bs-theme="root" and respectively.

You're in a dynamic root-inverted context

.bg-primary

.bg-secondary

.bg-tertiary

.bg-emphasized

.bg-brand-primary

.bg-status-neutral-emphasized

.bg-status-neutral-muted

.bg-status-accent-emphasized

.bg-status-accent-muted

.bg-status-positive-emphasized

.bg-status-positive-muted

.bg-status-negative-emphasized

.bg-status-negative-muted

.bg-status-warning-emphasized

.bg-status-warning-muted

.bg-status-info-emphasized

.bg-status-info-muted

.bg-always-black

.bg-always-white

.bg-transparent

  <div class="bg-status-neutral-emphasized p-tall">
    <div data-bs-theme="root-inverted">
      <p class="bg-primary p-tall fw-bold">.bg-primary</p>
      <p class="bg-secondary p-tall fw-bold">.bg-secondary</p>
      <p class="bg-tertiary p-tall fw-bold">.bg-tertiary</p>
      <p class="bg-emphasized p-tall fw-bold"><span data-bs-theme="dark">.bg-emphasized</span></p>
      <p class="bg-brand-primary p-tall fw-bold"><span data-bs-theme="light">.bg-brand-primary</span></p>
      <p class="bg-status-neutral-emphasized p-tall fw-bold"><span data-bs-theme="root">.bg-status-neutral-emphasized</span></p>
      <p class="bg-status-neutral-muted p-tall fw-bold">.bg-status-neutral-muted</p>
      <p class="bg-status-accent-emphasized p-tall fw-bold"><span data-bs-theme="light">.bg-status-accent-emphasized</span></p>
      <p class="bg-status-accent-muted p-tall fw-bold">.bg-status-accent-muted</p>
      <p class="bg-status-positive-emphasized p-tall fw-bold"><span data-bs-theme="light">.bg-status-positive-emphasized</span></p>
      <p class="bg-status-positive-muted p-tall fw-bold">.bg-status-positive-muted</p>
      <p class="bg-status-negative-emphasized p-tall fw-bold"><span data-bs-theme="root">.bg-status-negative-emphasized</span></p>
      <p class="bg-status-negative-muted p-tall fw-bold">.bg-status-negative-muted</p>
      <p class="bg-status-warning-emphasized p-tall fw-bold"><span data-bs-theme="light">.bg-status-warning-emphasized</span></p>
      <p class="bg-status-warning-muted p-tall fw-bold">.bg-status-warning-muted</p>
      <p class="bg-status-info-emphasized p-tall fw-bold"><span data-bs-theme="light">.bg-status-info-emphasized</span></p>
      <p class="bg-status-info-muted p-tall fw-bold">.bg-status-info-muted</p>
      <p class="bg-always-black p-tall fw-bold"><span data-bs-theme="dark">.bg-always-black</span></p>
      <p class="bg-always-white p-tall fw-bold"><span data-bs-theme="light">.bg-always-white</span></p>
      <p class="bg-transparent p-tall fw-bold">.bg-transparent</p>
    </div>
  </div>
html

Colored backgrounds

In OUDS Web, we have some backgrounds that are a bit specific because they can take only few components like buttons, links and texts. For accessibility reasons we remove the color of these components.

.bg-brand-primary, .bg-status-accent-emphasized, .bg-status-warning-emphasized, .bg-status-negative-emphasized, .bg-status-positive-emphasized and .bg-status-info-emphasized are considered as colored backgrounds.

.bg-brand-primary

.bg-status-accent-emphasized

.bg-status-positive-emphasized

.bg-status-negative-emphasized

.bg-status-warning-emphasized

.bg-status-info-emphasized

<p class="bg-brand-primary p-tall fw-bold"><span data-bs-theme="light">.bg-brand-primary</span></p>
<p class="bg-status-accent-emphasized p-tall fw-bold"><span data-bs-theme="light">.bg-status-accent-emphasized</span></p>
<p class="bg-status-positive-emphasized p-tall fw-bold"><span data-bs-theme="light">.bg-status-positive-emphasized</span></p>
<p class="bg-status-negative-emphasized p-tall fw-bold"><span data-bs-theme="root-inverted">.bg-status-negative-emphasized</span></p>
<p class="bg-status-warning-emphasized p-tall fw-bold"><span data-bs-theme="light">.bg-status-warning-emphasized</span></p>
<p class="bg-status-info-emphasized p-tall fw-bold"><span data-bs-theme="light">.bg-status-info-emphasized</span></p>
html

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.

Sass variables

Bootstrap $enable-bootstrap-compatibility: true Most background-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`
Variables for setting background-color in .bg-*-subtle utilities in light and dark mode:
scss/_variables.scss 
$primary-bg-subtle:       $ouds-color-bg-tertiary-light; // OUDS mod: instead of `tint-color($primary, 80%)`
$secondary-bg-subtle:     $ouds-color-bg-secondary-light; // OUDS mod: instead of `tint-color($secondary, 80%)`
$success-bg-subtle:       $ouds-color-surface-status-positive-muted-light; // OUDS mod: instead of `tint-color($success, 80%)`
$info-bg-subtle:          $ouds-color-surface-status-info-muted-light; // OUDS mod: instead of `tint-color($info, 80%)`
$warning-bg-subtle:       $ouds-color-surface-status-warning-muted-light; // OUDS mod: instead of `tint-color($warning, 80%)`
$danger-bg-subtle:        $ouds-color-surface-status-negative-muted-light; // OUDS mod: instead of `tint-color($danger, 80%)`
$light-bg-subtle:         $ouds-color-bg-secondary-light; // OUDS mod: instead of `mix($gray-100, $white)`
$dark-bg-subtle:          $ouds-color-surface-status-neutral-muted-light; // OUDS mod: instead of `$gray-400`
scss/_variables-dark.scss 
$primary-bg-subtle-dark:            $ouds-color-bg-tertiary-dark; // OUDS mod: instead of `shade-color($primary, 80%)`
$secondary-bg-subtle-dark:          $ouds-color-bg-secondary-dark; // OUDS mod: instead of `shade-color($secondary, 80%)`
$success-bg-subtle-dark:            $ouds-color-surface-status-positive-muted-dark; // OUDS mod: instead of `shade-color($success, 80%)`
$info-bg-subtle-dark:               $ouds-color-surface-status-info-muted-dark; // OUDS mod: instead of `shade-color($info, 80%)`
$warning-bg-subtle-dark:            $ouds-color-surface-status-warning-muted-dark; // OUDS mod: instead of `shade-color($warning, 80%)`
$danger-bg-subtle-dark:             $ouds-color-surface-status-negative-muted-dark; // OUDS mod: instead of `shade-color($danger, 80%)`
$light-bg-subtle-dark:              $ouds-color-bg-secondary-dark; // OUDS mod: instead of `$gray-800`
$dark-bg-subtle-dark:               $ouds-color-surface-status-neutral-muted-dark; // OUDS mod: instead of `mix($gray-800, $black)`

Sass maps

Our background utilities are generated from our $ouds-backgrounds:

scss/_maps.scss 
$ouds-backgrounds: (
  "primary": var(--#{$prefix}color-bg-primary),
  "secondary": var(--#{$prefix}color-bg-secondary),
  "tertiary": var(--#{$prefix}color-bg-tertiary),
  "emphasized": var(--#{$prefix}color-bg-emphasized),
  "brand-primary": var(--#{$prefix}color-surface-brand-primary),
  "status-neutral-emphasized": var(--#{$prefix}color-surface-status-neutral-emphasized),
  "status-neutral-muted": var(--#{$prefix}color-surface-status-neutral-muted),
  "status-accent-emphasized": var(--#{$prefix}color-surface-status-accent-emphasized),
  "status-accent-muted": var(--#{$prefix}color-surface-status-accent-muted),
  "status-positive-emphasized": var(--#{$prefix}color-surface-status-positive-emphasized),
  "status-positive-muted": var(--#{$prefix}color-surface-status-positive-muted),
  "status-negative-emphasized": var(--#{$prefix}color-surface-status-negative-emphasized),
  "status-negative-muted": var(--#{$prefix}color-surface-status-negative-muted),
  "status-warning-emphasized": var(--#{$prefix}color-surface-status-warning-emphasized),
  "status-warning-muted": var(--#{$prefix}color-surface-status-warning-muted),
  "status-info-emphasized": var(--#{$prefix}color-surface-status-info-emphasized),
  "status-info-muted": var(--#{$prefix}color-surface-status-info-muted),
  "always-black": var(--#{$prefix}color-always-black),
  "always-white": var(--#{$prefix}color-always-white),
  "transparent": transparent,
);

Know that these backgrounds depend on our color modes.

Bootstrap $enable-bootstrap-compatibility: true 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 mode background colors are also available as a Sass map:
scss/_maps.scss 
$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/_maps.scss 
$theme-colors-bg-subtle-dark: (
  "primary": $primary-bg-subtle-dark,
  "secondary": $secondary-bg-subtle-dark,
  "success": $success-bg-subtle-dark,
  "info": $info-bg-subtle-dark,
  "warning": $warning-bg-subtle-dark,
  "danger": $danger-bg-subtle-dark,
  "light": $light-bg-subtle-dark,
  "dark": $dark-bg-subtle-dark,
);

Sass mixins

Bootstrap $enable-bootstrap-compatibility: true No mixins are used to generate our background utilities, but we do have some additional mixins for other situations where you’d like to create your own gradients that shouldn’t be used.
scss/mixins/_gradients.scss 
@mixin gradient-bg($color: null) {
  background-color: $color;

  @if $enable-gradients {
    background-image: var(--#{$prefix}gradient);
  }
}

Sass utilities API

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

scss/_utilities.scss 
"background-color-ouds": (
  property: background-color,
  class: bg,
  values: $ouds-backgrounds,
),
Bootstrap $enable-bootstrap-compatibility: true
scss/_utilities.scss 
"background-color": (
  property: background-color,
  class: bg,
  // OUDS mod: no local-vars
  values: map-merge(
    $utilities-bg-colors,
    (
      // OUDS mod: no "transparent"
      "body-secondary": var(--#{$prefix}color-bg-secondary), // OUDS mod: instead of `rgba(var(--#{$prefix}secondary-bg-rgb), var(--#{$prefix}bg-opacity))`
      "body-tertiary": var(--#{$prefix}color-bg-secondary), // OUDS mod: instead of `rgba(var(--#{$prefix}tertiary-bg-rgb), var(--#{$prefix}bg-opacity))`
    )
  ),
  bootstrap-compatibility: true,
),
// OUDS mod: no "bg-opacity"
"subtle-background-color": (
  property: background-color,
  class: bg,
  values: $utilities-bg-subtle,
  bootstrap-compatibility: true,
),