Color palette

OUDS Web’s color palette is the summary of all the existing and useable colors.

Palette

This section exposes all the existing colors inside the OUDS Web palette. These variables aren’t meant to be used, it’s only an exposure of the available raw colors. Be aware that none of the variables presented here depend on the theme.

#ff7900

$ouds-color-orange-500

#f15e00

$ouds-color-orange-550

#f9f5f0

$ouds-color-warm-gray-100

#353228

$ouds-color-warm-gray-900

#fff

$ouds-color-functional-white

#f4f4f4

$ouds-color-functional-light-gray-80

#eee

$ouds-color-functional-light-gray-160

#e0e0e0

$ouds-color-functional-light-gray-240

#d6d6d6

$ouds-color-functional-light-gray-320

#ccc

$ouds-color-functional-light-gray-400

#999

$ouds-color-functional-light-gray-800

#858585

$ouds-color-functional-light-gray-960

#666

$ouds-color-functional-dark-gray-240

#5c5c5c

$ouds-color-functional-dark-gray-320

#555

$ouds-color-functional-dark-gray-400

#333

$ouds-color-functional-dark-gray-640

#272727

$ouds-color-functional-dark-gray-720

#1f1f1f

$ouds-color-functional-dark-gray-800

#141414

$ouds-color-functional-dark-gray-880

#000

$ouds-color-functional-black

#94f0a4

$ouds-color-functional-malachite-300

#3de35a

$ouds-color-functional-malachite-500

#0a4715

$ouds-color-functional-malachite-900

#ffe5e6

$ouds-color-functional-scarlet-100

#ffb2b3

$ouds-color-functional-scarlet-200

#ff8081

$ouds-color-functional-scarlet-300

#db0002

$ouds-color-functional-scarlet-600

#b20002

$ouds-color-functional-scarlet-700

#800001

$ouds-color-functional-scarlet-800

#4d0001

$ouds-color-functional-scarlet-900

#8ad5ff

$ouds-color-functional-dodger-300

#26b2ff

$ouds-color-functional-dodger-500

#003857

$ouds-color-functional-dodger-900

#ffed99

$ouds-color-functional-sun-200

#ffe270

$ouds-color-functional-sun-300

#ffd000

$ouds-color-functional-sun-500

#3d3100

$ouds-color-functional-sun-900

#a5daf3

$ouds-color-decorative-sky-200

#4ab4e6

$ouds-color-decorative-sky-400

#136186

$ouds-color-decorative-sky-700

#c0e8d4

$ouds-color-decorative-emerald-200

#50be87

$ouds-color-decorative-emerald-500

#2e7b54

$ouds-color-decorative-emerald-700

#ffb400

$ouds-color-decorative-amber-500

#fbebdf

$ouds-color-decorative-deep-peach-100

#f4cfb2

$ouds-color-decorative-deep-peach-200

#e3b591

$ouds-color-decorative-deep-peach-300

#c19372

$ouds-color-decorative-deep-peach-400

#cf7e3f

$ouds-color-decorative-deep-peach-500

#aa6631

$ouds-color-decorative-deep-peach-600

#7e4f2a

$ouds-color-decorative-deep-peach-700

#553720

$ouds-color-decorative-deep-peach-800

#2e2014

$ouds-color-decorative-deep-peach-900

#ffe5f6

$ouds-color-decorative-shocking-pink-100

#ffb4e6

$ouds-color-decorative-shocking-pink-200

#ff80d4

$ouds-color-decorative-shocking-pink-300

#e0d4f2

$ouds-color-decorative-amethyst-200

#a885d8

$ouds-color-decorative-amethyst-400

#5b2f98

$ouds-color-decorative-amethyst-600

#2c174a

$ouds-color-decorative-amethyst-800

rgba(255, 255, 255, 0)

$ouds-color-opacity-white-0

rgba(255, 255, 255, .04)

$ouds-color-opacity-white-40

rgba(255, 255, 255, .08)

$ouds-color-opacity-white-80

rgba(255, 255, 255, .2)

$ouds-color-opacity-white-200

rgba(255, 255, 255, .64)

$ouds-color-opacity-white-640

rgba(255, 255, 255, .8)

$ouds-color-opacity-white-800

rgba(255, 255, 255, .92)

$ouds-color-opacity-white-920

rgba(0, 0, 0, 0)

$ouds-color-opacity-black-0

rgba(0, 0, 0, .04)

$ouds-color-opacity-black-40

rgba(0, 0, 0, .08)

$ouds-color-opacity-black-80

rgba(0, 0, 0, .16)

$ouds-color-opacity-black-160

rgba(0, 0, 0, .2)

$ouds-color-opacity-black-200

rgba(0, 0, 0, .24)

$ouds-color-opacity-black-240

rgba(0, 0, 0, .32)

$ouds-color-opacity-black-320

rgba(0, 0, 0, .68)

$ouds-color-opacity-black-680

rgba(0, 0, 0, .84)

$ouds-color-opacity-black-840

rgba(61, 227, 90, .12)

$ouds-color-opacity-malachite

rgba(234, 3, 5, .08)

$ouds-color-opacity-scarlet

rgba(38, 178, 255, .08)

$ouds-color-opacity-dodger-blue

rgba(255, 208, 0, .16)

$ouds-color-opacity-sun

Bootstrap’s palette

Bootstrap defines a color palette on its own. We worked on a mapping between Orange Unified Design System’s colors and Bootstrap’s ones in cases where users will use Bootstrap-based plugins or libraries so that, when used with OUDS Web CSS, provides an acceptable automatic rendering.

You’re encouraged to use Orange semantic color tokens (using CSS variables is even better) when it comes to custom code.

Bootstrap $enable-bootstrap-compatibility: true

This part is enabled only when $enable-bootstrap-compatibility is set to true. Read more about Bootstrap compatibility.

All colors

Some of the colors below do not belong to the Orange Unified Design System specifications.

Please refer to our color palette section and to the Color guidelines on the Orange Unified Design System website.

All OUDS Web colors are available as Sass variables and a Sass map in scss/_variables.scss file. To avoid increased file sizes, we don’t create text or background color classes for each of these variables. Instead, we choose a subset of these colors for a theme palette.

Please note that in the OUDS Web colors, the indigo colors are the same as the purple ones.

Be sure to monitor contrast ratios as you customize colors. As shown below, we’ve added three contrast ratios to each of the main colors—one for the swatch’s current colors, one for against white, and one for against black.

$blue #26b2ff

$blue-100

$blue-200

$blue-300

$blue-400

$blue-500

$blue-600

$blue-700

$blue-800

$blue-900

$indigo #a885d8

$indigo-100

$indigo-200

$indigo-300

$indigo-400

$indigo-500

$indigo-600

$indigo-700

$indigo-800

$indigo-900

$purple #a885d8

$purple-100

$purple-200

$purple-300

$purple-400

$purple-500

$purple-600

$purple-700

$purple-800

$purple-900

$pink #ffb4e6

$pink-100

$pink-200

$pink-300

$pink-400

$pink-500

$pink-600

$pink-700

$pink-800

$pink-900

$red #db0002

$red-100

$red-200

$red-300

$red-400

$red-500

$red-600

$red-700

$red-800

$red-900

$orange #f15e00

$orange-100

$orange-200

$orange-300

$orange-400

$orange-500

$orange-600

$orange-700

$orange-800

$orange-900

$yellow #ffd000

$yellow-100

$yellow-200

$yellow-300

$yellow-400

$yellow-500

$yellow-600

$yellow-700

$yellow-800

$yellow-900

$green #3de35a

$green-100

$green-200

$green-300

$green-400

$green-500

$green-600

$green-700

$green-800

$green-900

$teal #50be87

$teal-100

$teal-200

$teal-300

$teal-400

$teal-500

$teal-600

$teal-700

$teal-800

$teal-900

$cyan #4ab4e6

$cyan-100

$cyan-200

$cyan-300

$cyan-400

$cyan-500

$cyan-600

$cyan-700

$cyan-800

$cyan-900

$gray-500 #555

$gray-100

$gray-200

$gray-300

$gray-400

$gray-500

$gray-600

$gray-700

$gray-800

$gray-900

$black #000

$white #fff

Notes on Sass

Sass cannot programmatically generate variables, so we manually created variables for every tint and shade ourselves. We then map all the created variables to one of our raw color tokens that are coming from the design directly.

Example

Here’s how you should use these in your Sass:

.alpha { color: var(--bs-color-action-visited); } // And not `$ouds-color-decorative-amethyst-600` or `$ouds-color-action-visited-light` directly
.beta {
  color: $ouds-color-decorative-sun-100; // Because we don't have any CSS variable but prefer avoid the raw variables
  background-color: var(--bs-color-bg-primary); // No hex code, no Sass variable
}

Color and Background utility classes are also available for setting color and background-color.

CSS

OUDS Web sets an additional layer to use Orange Unified Design System’s color tokens names—defined first and mapped to Bootstrap core variables.

Sass tokens

Raw tokens

A first layer of color raw tokens 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;

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.

Because OUDS Web relies on Bootstrap’s specific tokens system, we need to map the OUDS Web’s color tokens to the Bootstrap’s ones.

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

$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-240; // OUDS mod: instead of `#dee2e6`
$gray-400: $ouds-color-functional-light-gray-400; // OUDS mod: instead of `#ced4da`
$gray-500: $ouds-color-functional-light-gray-800; // OUDS mod: instead of `#adb5bd`
$gray-600: $ouds-color-functional-dark-gray-240; // OUDS mod: instead of `#6c757d`
$gray-700: $ouds-color-functional-dark-gray-640; // 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`

Sass maps

Bootstrap $enable-bootstrap-compatibility: true

This part is enabled only when $enable-bootstrap-compatibility is set to true. Read more about Bootstrap compatibility.

OUDS Web’s source Sass files include maps to help you quickly and easily loop over a list of colors and their hex values.

$colors lists all our available base colors

$utilities-text overrides $theme-colors specifically used to define .text-* utilities
$utilities-bg overrides $theme-colors specifically used to define .bg-* utilities
$utilities-border overrides $theme-colors specifically used to define .border-* utilities
$grays, $blues, $indigos, $purples, $pinks, $reds, $oranges, $yellows, $greens, $teals, and $cyans list all tints and shades of our colors

Within scss/_variables.scss or scss/_maps.scss, you’ll find OUDS Web’s color variables and Sass maps. Here’s an example of the $colors Sass map:

scss/_variables.scss

$colors: (
  "blue":       $blue,
  "indigo":     $indigo,
  "purple":     $purple,
  "pink":       $pink,
  "red":        $red,
  "orange":     $orange,
  "yellow":     $yellow,
  "green":      $green,
  "teal":       $teal,
  "cyan":       $cyan,
  "black":      $black,
  "white":      $white,
  "gray":       $gray-600,
  "gray-dark":  $gray-800
);

Add, remove, or modify values within the map to update how they’re used in many other components. Unfortunately at this time, not every component utilizes this Sass map. Future updates will strive to improve upon this. Until then, plan on making use of the ${color} variables and this Sass map.

Generating utilities

OUDS Web doesn’t include color and background-color utilities for every color variable, but you can generate these yourself with our utility API and our extended Sass maps.

To start, make sure you’ve imported our functions, variables, mixins, and utilities.
Use our map-merge-multiple() function to quickly merge multiple Sass maps together in a new map.
Merge this new combined map to extend any utility with a {color}-{level} class name.

Here’s an example that generates text color utilities (e.g., .text-purple-500) using the above steps.

@import "@ouds/web/scss/config";
@import "@ouds/web/scss/functions";
@import "@ouds/web/scss/tokens/raw";
@import "@ouds/web/scss/tokens/semantic";
@import "@ouds/web/scss/tokens/semantic-colors-custom-props";
@import "@ouds/web/scss/tokens/composite";
@import "@ouds/web/scss/tokens/component";
@import "@ouds/web/scss/variables";
@import "@ouds/web/scss/variables-dark";
@import "@ouds/web/scss/maps";
@import "@ouds/web/scss/mixins";
@import "@ouds/web/scss/utilities";

$all-colors: map-merge-multiple($blues, $indigos, $purples, $pinks, $reds, $oranges, $yellows, $greens, $teals, $cyans);

$utilities: map-merge(
  $utilities,
  (
    "color": map-merge(
      map-get($utilities, "color"),
      (
        values: map-merge(
          map-get(map-get($utilities, "color"), "values"),
          (
            $all-colors
          ),
        ),
      ),
    ),
  )
);

@import "@ouds/web/scss/utilities/api";

This will generate new .text-{color}-{level} utilities for every color and level. You can do the same for any other utility and property as well.

Color palette

On this page On this page

Palette

Bootstrap’s palette

All colors

Notes on Sass

Example

CSS

Sass tokens

Raw tokens

Sass variables

Sass maps

Generating utilities

On this page