View on GitHub

Borders

Use border utilities to quickly style the border and border-radius of an element. Great for images, buttons, or any other element.

Border

Use border utilities to add or remove an element’s borders. Choose from all borders or one at a time.

Additive

Add borders to custom elements:

<span class="border"></span>
<span class="border-top"></span>
<span class="border-end"></span>
<span class="border-bottom"></span>
<span class="border-start"></span>

html

Subtractive

Or remove borders:

<span class="border border-none"></span>
<span class="border border-top-none"></span>
<span class="border border-end-none"></span>
<span class="border border-bottom-none"></span>
<span class="border border-start-none"></span>

html

Bootstrap $enable-bootstrap-compatibility: true

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

<span class="border border-0"></span>
<span class="border border-top-0"></span>
<span class="border border-end-0"></span>
<span class="border border-bottom-0"></span>
<span class="border border-start-0"></span>

html

Color

Change the border color using utilities. The color utilities are generated from our $ouds-border-colors Sass map.

<span class="border border-brand-primary"></span>
<span class="border border-default"></span>
<span class="border border-emphasized"></span>
<span class="border border-muted"></span>
<div data-bs-theme="light" class="bg-brand-primary d-inline-flex m-shortest p-shorter"><span class="border border-on-brand-primary m-none bg-brand-primary" data-bs-theme="light"></span></div>
<div data-bs-theme="light" class="bg-always-white d-inline-flex m-shortest p-shorter"><span class="border border-always-black m-none bg-always-white" data-bs-theme="light"></span></div>
<div data-bs-theme="dark" class="bg-always-black d-inline-flex m-shortest p-shorter"><span class="border border-always-white m-none bg-always-black" data-bs-theme="dark"></span></div>
<div data-bs-theme="dark" class="bg-always-black d-inline-flex m-shortest p-shorter"><span class="border border-always-on-black m-none bg-always-black" data-bs-theme="dark"></span></div>
<div data-bs-theme="light" class="bg-always-white d-inline-flex m-shortest p-shorter"><span class="border border-always-on-white m-none bg-always-white" data-bs-theme="light"></span></div>

html

Bootstrap $enable-bootstrap-compatibility: true

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

Border utilities like .border-* that generated from our original $theme-colors Sass map don’t yet respond to color modes, however, any .border-*-subtle utility will. This will be resolved in Bootstrap v6.

<span class="border border-primary"></span>
<span class="border border-primary-subtle"></span>
<span class="border border-secondary"></span>
<span class="border border-secondary-subtle"></span>
<span class="border border-success"></span>
<span class="border border-success-subtle"></span>
<span class="border border-danger"></span>
<span class="border border-danger-subtle"></span>
<span class="border border-warning"></span>
<span class="border border-warning-subtle"></span>
<span class="border border-info"></span>
<span class="border border-info-subtle"></span>
<span class="border border-light"></span>
<span class="border border-light-subtle"></span>
<span class="border border-dark"></span>
<span class="border border-dark-subtle"></span>
<span class="border border-black"></span>
<span class="border border-white"></span>

html

Or modify the default border-color of a component:

Email address

Dangerous heading

Changing border color and width

<div class="mb-4">
  <label for="exampleFormControlInput1" class="form-label">Email address</label>
  <input type="email" class="form-control border-success" id="exampleFormControlInput1" placeholder="name@example.com">
</div>

<div class="h4 pb-2 mb-4 text-danger border-bottom border-danger">
  Dangerous heading
</div>

<div class="p-3 text-bg-info bg-opacity-10 border border-info border-start-0 rounded-end">
  Changing border color and width
</div>

html

Width

<span class="border border-none"></span>
<span class="border border-thin"></span>
<span class="border border-medium"></span>
<span class="border border-thick"></span>
<span class="border border-thicker"></span>

html

Bootstrap $enable-bootstrap-compatibility: true

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

<span class="border border-0"></span>
<span class="border border-1"></span>
<span class="border border-2"></span>
<span class="border border-3"></span>
<span class="border border-4"></span>
<span class="border border-5"></span>

html

Radius

Add classes to an element to easily round its corners.

<svg class="bd-placeholder-img rounded-tall" width="75" height="75" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Example rounded image: 75x75" preserveAspectRatio="xMidYMid slice"><title>Example rounded image</title><rect width="100%" height="100%" fill="var(--bs-color-bg-secondary)"/><text x="50%" y="50%" fill="#999" dy=".3em">75x75</text>
  </svg>
<svg class="bd-placeholder-img rounded-top-tall" width="75" height="75" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Example top rounded image: 75x75" preserveAspectRatio="xMidYMid slice"><title>Example top rounded image</title><rect width="100%" height="100%" fill="var(--bs-color-bg-secondary)"/><text x="50%" y="50%" fill="#999" dy=".3em">75x75</text>
  </svg>
<svg class="bd-placeholder-img rounded-end-tall" width="75" height="75" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Example right rounded image: 75x75" preserveAspectRatio="xMidYMid slice"><title>Example right rounded image</title><rect width="100%" height="100%" fill="var(--bs-color-bg-secondary)"/><text x="50%" y="50%" fill="#999" dy=".3em">75x75</text>
  </svg>
<svg class="bd-placeholder-img rounded-bottom-tall" width="75" height="75" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Example bottom rounded image: 75x75" preserveAspectRatio="xMidYMid slice"><title>Example bottom rounded image</title><rect width="100%" height="100%" fill="var(--bs-color-bg-secondary)"/><text x="50%" y="50%" fill="#999" dy=".3em">75x75</text>
  </svg>
<svg class="bd-placeholder-img rounded-start-tall" width="75" height="75" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Example left rounded image: 75x75" preserveAspectRatio="xMidYMid slice"><title>Example left rounded image</title><rect width="100%" height="100%" fill="var(--bs-color-bg-secondary)"/><text x="50%" y="50%" fill="#999" dy=".3em">75x75</text>
  </svg>

html

Sizes

Use the scaling classes for larger or smaller rounded corners. Sizes are none, short, medium, tall, circle and pill, and can be configured by modifying the utilities API.

The .rounded class is mapped to the “default” border radius design token. In Orange brand, the value for this token is zero, explaining why the .rounded class does not apply any border radius here.

<svg class="bd-placeholder-img rounded" width="75" height="75" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Example default rounded image: 75x75" preserveAspectRatio="xMidYMid slice"><title>Example default rounded image</title><rect width="100%" height="100%" fill="var(--bs-color-bg-secondary)"/><text x="50%" y="50%" fill="#999" dy=".3em">75x75</text>
  </svg>
<svg class="bd-placeholder-img rounded-none" width="75" height="75" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Example non-rounded image: 75x75" preserveAspectRatio="xMidYMid slice"><title>Example non-rounded image</title><rect width="100%" height="100%" fill="var(--bs-color-bg-secondary)"/><text x="50%" y="50%" fill="#999" dy=".3em">75x75</text>
  </svg>
<svg class="bd-placeholder-img rounded-short" width="75" height="75" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Example short rounded image: 75x75" preserveAspectRatio="xMidYMid slice"><title>Example short rounded image</title><rect width="100%" height="100%" fill="var(--bs-color-bg-secondary)"/><text x="50%" y="50%" fill="#999" dy=".3em">75x75</text>
  </svg>
<svg class="bd-placeholder-img rounded-medium" width="75" height="75" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Example medium rounded image: 75x75" preserveAspectRatio="xMidYMid slice"><title>Example medium rounded image</title><rect width="100%" height="100%" fill="var(--bs-color-bg-secondary)"/><text x="50%" y="50%" fill="#999" dy=".3em">75x75</text>
  </svg>
<svg class="bd-placeholder-img rounded-tall" width="75" height="75" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Example tall rounded image: 75x75" preserveAspectRatio="xMidYMid slice"><title>Example tall rounded image</title><rect width="100%" height="100%" fill="var(--bs-color-bg-secondary)"/><text x="50%" y="50%" fill="#999" dy=".3em">75x75</text>
  </svg>
<svg class="bd-placeholder-img rounded-circle" width="75" height="75" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Completely round image: 75x75" preserveAspectRatio="xMidYMid slice"><title>Completely round image</title><rect width="100%" height="100%" fill="var(--bs-color-bg-secondary)"/><text x="50%" y="50%" fill="#999" dy=".3em">75x75</text>
  </svg>
<svg class="bd-placeholder-img rounded-pill" width="150" height="75" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Rounded pill image: 150x75" preserveAspectRatio="xMidYMid slice"><title>Rounded pill image</title><rect width="100%" height="100%" fill="var(--bs-color-bg-secondary)"/><text x="50%" y="50%" fill="#999" dy=".3em">150x75</text>
  </svg>

html

<svg class="bd-placeholder-img rounded-bottom-short" width="75" height="75" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Example small rounded image: 75x75" preserveAspectRatio="xMidYMid slice"><title>Example small rounded image</title><rect width="100%" height="100%" fill="var(--bs-color-bg-secondary)"/><text x="50%" y="50%" fill="#999" dy=".3em">75x75</text>
  </svg>
<svg class="bd-placeholder-img rounded-start-medium" width="75" height="75" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Example default left rounded image: 75x75" preserveAspectRatio="xMidYMid slice"><title>Example default left rounded image</title><rect width="100%" height="100%" fill="var(--bs-color-bg-secondary)"/><text x="50%" y="50%" fill="#999" dy=".3em">75x75</text>
  </svg>
<svg class="bd-placeholder-img rounded-end-circle" width="75" height="75" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Example right completely round image: 75x75" preserveAspectRatio="xMidYMid slice"><title>Example right completely round image</title><rect width="100%" height="100%" fill="var(--bs-color-bg-secondary)"/><text x="50%" y="50%" fill="#999" dy=".3em">75x75</text>
  </svg>
<svg class="bd-placeholder-img rounded-start-pill" width="75" height="75" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Example left rounded pill image: 75x75" preserveAspectRatio="xMidYMid slice"><title>Example left rounded pill image</title><rect width="100%" height="100%" fill="var(--bs-color-bg-secondary)"/><text x="50%" y="50%" fill="#999" dy=".3em">75x75</text>
  </svg>
<svg class="bd-placeholder-img rounded-tall rounded-top-none" width="75" height="75" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Example extra large bottom rounded image: 75x75" preserveAspectRatio="xMidYMid slice"><title>Example extra large bottom rounded image</title><rect width="100%" height="100%" fill="var(--bs-color-bg-secondary)"/><text x="50%" y="50%" fill="#999" dy=".3em">75x75</text>
  </svg>

html

Bootstrap $enable-bootstrap-compatibility: true

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

Use the scaling classes for larger or smaller rounded corners. Sizes range from 0 to 5, and can be configured by modifying the utilities API.

<svg class="bd-placeholder-img rounded-0" width="75" height="75" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Example non-rounded image: 75x75" preserveAspectRatio="xMidYMid slice"><title>Example non-rounded image</title><rect width="100%" height="100%" fill="var(--bs-color-bg-secondary)"/><text x="50%" y="50%" fill="#999" dy=".3em">75x75</text>
  </svg>
<svg class="bd-placeholder-img rounded-1" width="75" height="75" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Example small rounded image: 75x75" preserveAspectRatio="xMidYMid slice"><title>Example small rounded image</title><rect width="100%" height="100%" fill="var(--bs-color-bg-secondary)"/><text x="50%" y="50%" fill="#999" dy=".3em">75x75</text>
  </svg>
<svg class="bd-placeholder-img rounded-2" width="75" height="75" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Example default rounded image: 75x75" preserveAspectRatio="xMidYMid slice"><title>Example default rounded image</title><rect width="100%" height="100%" fill="var(--bs-color-bg-secondary)"/><text x="50%" y="50%" fill="#999" dy=".3em">75x75</text>
  </svg>
<svg class="bd-placeholder-img rounded-3" width="75" height="75" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Example large rounded image: 75x75" preserveAspectRatio="xMidYMid slice"><title>Example large rounded image</title><rect width="100%" height="100%" fill="var(--bs-color-bg-secondary)"/><text x="50%" y="50%" fill="#999" dy=".3em">75x75</text>
  </svg>
<svg class="bd-placeholder-img rounded-4" width="75" height="75" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Example larger rounded image: 75x75" preserveAspectRatio="xMidYMid slice"><title>Example larger rounded image</title><rect width="100%" height="100%" fill="var(--bs-color-bg-secondary)"/><text x="50%" y="50%" fill="#999" dy=".3em">75x75</text>
  </svg>
<svg class="bd-placeholder-img rounded-5" width="75" height="75" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Example extra large rounded image: 75x75" preserveAspectRatio="xMidYMid slice"><title>Example extra large rounded image</title><rect width="100%" height="100%" fill="var(--bs-color-bg-secondary)"/><text x="50%" y="50%" fill="#999" dy=".3em">75x75</text>
  </svg>

html

<svg class="bd-placeholder-img rounded-bottom-1" width="75" height="75" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Example small rounded image: 75x75" preserveAspectRatio="xMidYMid slice"><title>Example small rounded image</title><rect width="100%" height="100%" fill="var(--bs-color-bg-secondary)"/><text x="50%" y="50%" fill="#999" dy=".3em">75x75</text>
  </svg>
<svg class="bd-placeholder-img rounded-start-2" width="75" height="75" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Example default left rounded image: 75x75" preserveAspectRatio="xMidYMid slice"><title>Example default left rounded image</title><rect width="100%" height="100%" fill="var(--bs-color-bg-secondary)"/><text x="50%" y="50%" fill="#999" dy=".3em">75x75</text>
  </svg>
<svg class="bd-placeholder-img rounded-end-circle" width="75" height="75" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Example right completely round image: 75x75" preserveAspectRatio="xMidYMid slice"><title>Example right completely round image</title><rect width="100%" height="100%" fill="var(--bs-color-bg-secondary)"/><text x="50%" y="50%" fill="#999" dy=".3em">75x75</text>
  </svg>
<svg class="bd-placeholder-img rounded-start-pill" width="75" height="75" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Example left rounded pill image: 75x75" preserveAspectRatio="xMidYMid slice"><title>Example left rounded pill image</title><rect width="100%" height="100%" fill="var(--bs-color-bg-secondary)"/><text x="50%" y="50%" fill="#999" dy=".3em">75x75</text>
  </svg>
<svg class="bd-placeholder-img rounded-5 rounded-top-0" width="75" height="75" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Example extra large bottom rounded image: 75x75" preserveAspectRatio="xMidYMid slice"><title>Example extra large bottom rounded image</title><rect width="100%" height="100%" fill="var(--bs-color-bg-secondary)"/><text x="50%" y="50%" fill="#999" dy=".3em">75x75</text>
  </svg>

html

Drag and drop

Use the .border-drag utility to apply the border style for a drop zone.

This utility must not be used in any other context than drag and drop.

<span class="border border-drag"></span>

html

CSS

Variables

scss/_root.scss

--#{$prefix}border-width: #{$border-width};
--#{$prefix}border-style: #{$border-style};
--#{$prefix}border-color: #{$border-color};
@if $enable-bootstrap-compatibility {
  --#{$prefix}border-color-translucent: #{$border-color-translucent};
}

Bootstrap $enable-bootstrap-compatibility: true

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

scss/_root.scss

@if $enable-bootstrap-compatibility {
  --#{$prefix}border-radius: #{$border-radius};
  --#{$prefix}border-radius-sm: #{$border-radius-sm};
  --#{$prefix}border-radius-lg: #{$border-radius-lg};
  --#{$prefix}border-radius-xl: #{$border-radius-xl};
  --#{$prefix}border-radius-xxl: #{$border-radius-xxl};
  --#{$prefix}border-radius-2xl: var(--#{$prefix}border-radius-xxl); // Deprecated in Bootstrap v5.3.0 for consistency
  --#{$prefix}border-radius-pill: #{$border-radius-pill};
}

Sass tokens

Raw tokens

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

scss/tokens/_raw.scss

$ouds-border-base: 4px;
$ouds-border-radius-9999: 2000px;
$ouds-border-style-dashed: dashed;
// $ouds-border-style-dotted: dotted;
// $ouds-border-style-none: none;
$ouds-border-style-solid: solid;
$ouds-border-radius-0: $ouds-border-base * 0; // 0
// $ouds-border-radius-25: $ouds-border-base * .25; // 1
// $ouds-border-radius-50: $ouds-border-base * .5; // 2
$ouds-border-radius-75: $ouds-border-base * .75; // 3
// $ouds-border-radius-100: $ouds-border-base * 1; // 4
$ouds-border-radius-150: $ouds-border-base * 1.5; // 6
// $ouds-border-radius-200: $ouds-border-base * 2; // 8
$ouds-border-radius-300: $ouds-border-base * 3; // 12
// $ouds-border-radius-400: $ouds-border-base * 4; // 16
// $ouds-border-radius-500: $ouds-border-base * 5; // 20
// $ouds-border-radius-600: $ouds-border-base * 6; // 24
// $ouds-border-radius-800: $ouds-border-base * 8; // 32
$ouds-border-width-0: $ouds-border-base * 0; // 0
$ouds-border-width-25: $ouds-border-base * .25; // 1
$ouds-border-width-50: $ouds-border-base * .5; // 2
$ouds-border-width-75: $ouds-border-base * .75; // 3
$ouds-border-width-100: $ouds-border-base * 1; // 4
$ouds-border-width-125: $ouds-border-base * 1.25; // 5
// $ouds-border-width-150: $ouds-border-base * 1.5; // 6
// $ouds-border-width-200: $ouds-border-base * 2; // 8

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

Border semantic tokens are defined as Sass variables.

scss/tokens/_semantic.scss

$ouds-border-radius-default: $ouds-border-radius-0;
$ouds-border-radius-medium: $ouds-border-radius-150;
$ouds-border-radius-none: $ouds-border-radius-0;
$ouds-border-radius-pill: $ouds-border-radius-9999;
$ouds-border-radius-short: $ouds-border-radius-75;
$ouds-border-radius-tall: $ouds-border-radius-300;
$ouds-border-style-default: $ouds-border-style-solid;
$ouds-border-style-drag: $ouds-border-style-dashed;
$ouds-border-width-default: $ouds-border-width-25;
$ouds-border-width-focus: $ouds-border-width-125;
$ouds-border-width-focus-inset: $ouds-border-width-50;
$ouds-border-width-medium: $ouds-border-width-50;
$ouds-border-width-none: $ouds-border-width-0;
$ouds-border-width-thick: $ouds-border-width-75;
$ouds-border-width-thicker: $ouds-border-width-100;
$ouds-border-width-thin: $ouds-border-width-25;

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-muted-light: $ouds-color-opacity-black-80;
$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-border-muted-dark: $ouds-color-opacity-white-80;
$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-black;
$ouds-color-decorative-brand-tertiary-dark: $ouds-color-functional-white;
$ouds-color-decorative-neutral-emphasized-higher-light: $ouds-color-functional-dark-gray-640;
$ouds-color-decorative-neutral-emphasized-low-light: $ouds-color-functional-dark-gray-400;
$ouds-color-decorative-neutral-emphasized-lower-light: $ouds-color-functional-dark-gray-320;
$ouds-color-decorative-neutral-emphasized-lowest-light: $ouds-color-functional-dark-gray-240;
$ouds-color-decorative-neutral-emphasized-higher-dark: $ouds-color-functional-dark-gray-640;
$ouds-color-decorative-neutral-emphasized-low-dark: $ouds-color-functional-dark-gray-400;
$ouds-color-decorative-neutral-emphasized-lower-dark: $ouds-color-functional-dark-gray-320;
$ouds-color-decorative-neutral-emphasized-lowest-dark: $ouds-color-functional-dark-gray-240;
$ouds-color-decorative-neutral-muted-high-light: $ouds-color-functional-light-gray-400;
$ouds-color-decorative-neutral-muted-higher-light: $ouds-color-functional-light-gray-800;
$ouds-color-decorative-neutral-muted-highest-light: $ouds-color-functional-light-gray-960;
$ouds-color-decorative-neutral-muted-low-light: $ouds-color-functional-light-gray-240;
$ouds-color-decorative-neutral-muted-lower-light: $ouds-color-functional-light-gray-160;
$ouds-color-decorative-neutral-muted-lowest-light: $ouds-color-functional-light-gray-80;
$ouds-color-decorative-neutral-muted-medium-light: $ouds-color-functional-light-gray-320;
$ouds-color-decorative-neutral-muted-high-dark: $ouds-color-functional-light-gray-400;
$ouds-color-decorative-neutral-muted-higher-dark: $ouds-color-functional-light-gray-800;
$ouds-color-decorative-neutral-muted-highest-dark: $ouds-color-functional-light-gray-960;
$ouds-color-decorative-neutral-muted-low-dark: $ouds-color-functional-light-gray-240;
$ouds-color-decorative-neutral-muted-lower-dark: $ouds-color-functional-light-gray-160;
$ouds-color-decorative-neutral-muted-lowest-dark: $ouds-color-functional-light-gray-80;
$ouds-color-decorative-neutral-muted-medium-dark: $ouds-color-functional-light-gray-320;
$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-muted: #{$ouds-color-border-muted-light};
  --#{$prefix}color-border-on-brand-primary: #{$ouds-color-border-on-brand-primary-light};
  --#{$prefix}color-content-brand-primary: #{$ouds-color-content-brand-primary-light};
  --#{$prefix}color-content-default: #{$ouds-color-content-default-light};
  --#{$prefix}color-content-disabled: #{$ouds-color-content-disabled-light};
  --#{$prefix}color-content-muted: #{$ouds-color-content-muted-light};
  --#{$prefix}color-content-on-action-disabled: #{$ouds-color-content-on-action-disabled-light};
  --#{$prefix}color-content-on-action-enabled: #{$ouds-color-content-on-action-enabled-light};
  --#{$prefix}color-content-on-action-focus: #{$ouds-color-content-on-action-focus-light};
  --#{$prefix}color-content-on-action-highlighted: #{$ouds-color-content-on-action-highlighted-light};
  --#{$prefix}color-content-on-action-hover: #{$ouds-color-content-on-action-hover-light};
  --#{$prefix}color-content-on-action-loading: #{$ouds-color-content-on-action-loading-light};
  --#{$prefix}color-content-on-action-pressed: #{$ouds-color-content-on-action-pressed-light};
  --#{$prefix}color-content-on-brand-primary: #{$ouds-color-content-on-brand-primary-light};
  --#{$prefix}color-content-on-overlay-emphasized: #{$ouds-color-content-on-overlay-emphasized-light};
  --#{$prefix}color-content-on-status-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-emphasized-higher: #{$ouds-color-decorative-neutral-emphasized-higher-light};
  --#{$prefix}color-decorative-neutral-emphasized-low: #{$ouds-color-decorative-neutral-emphasized-low-light};
  --#{$prefix}color-decorative-neutral-emphasized-lower: #{$ouds-color-decorative-neutral-emphasized-lower-light};
  --#{$prefix}color-decorative-neutral-emphasized-lowest: #{$ouds-color-decorative-neutral-emphasized-lowest-light};
  --#{$prefix}color-decorative-neutral-muted-high: #{$ouds-color-decorative-neutral-muted-high-light};
  --#{$prefix}color-decorative-neutral-muted-higher: #{$ouds-color-decorative-neutral-muted-higher-light};
  --#{$prefix}color-decorative-neutral-muted-highest: #{$ouds-color-decorative-neutral-muted-highest-light};
  --#{$prefix}color-decorative-neutral-muted-low: #{$ouds-color-decorative-neutral-muted-low-light};
  --#{$prefix}color-decorative-neutral-muted-lower: #{$ouds-color-decorative-neutral-muted-lower-light};
  --#{$prefix}color-decorative-neutral-muted-lowest: #{$ouds-color-decorative-neutral-muted-lowest-light};
  --#{$prefix}color-decorative-neutral-muted-medium: #{$ouds-color-decorative-neutral-muted-medium-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

scss/_variables.scss

$border-width:                $ouds-border-width-default; // OUDS mod: instead of `.125rem`
$border-widths: (
  1: $ouds-border-width-thin, // OUDS mod: instead of `$border-width * .5`
  2: $ouds-border-width-medium, // OUDS mod: instead of `$border-width`
  3: $ouds-border-width-thick, // OUDS mod: instead of `$border-width * 1.5`
  4: $ouds-border-width-thicker, // OUDS mod: instead of `$border-width * 2`
  5: $ouds-border-width-thicker * 1.25 // OUDS mod: instead of `$border-width * 2.5`
);
$border-style:                $ouds-border-style-default; // OUDS mod: instead of `solid`
$border-color:                $ouds-color-border-emphasized-light; // OUDS mod: instead of `$gray-300`
$border-color-translucent:    $ouds-color-border-default-light; // OUDS mod: instead of `rgba($black, .175)`

scss/_variables.scss

$border-radius:               $ouds-border-radius-default; // OUDS mod: instead of `.375rem`
$border-radius-sm:            $ouds-border-radius-short; // OUDS mod: instead of `.25rem`
$border-radius-lg:            $ouds-border-radius-medium; // OUDS mod: instead of `.5rem`
$border-radius-xl:            $ouds-border-radius-tall; //OUDS mod: instead of `1rem`
$border-radius-xxl:           $ouds-border-radius-tall * 1.5; // OUDS mod: instead of `2rem`
$border-radius-pill:          px-to-rem($ouds-border-radius-pill); // OUDS mod: instead of `50rem`

Bootstrap $enable-bootstrap-compatibility: true

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

Variables for setting border-color in .border-{direction}-subtle utilities in light and dark mode:

scss/_variables.scss

$primary-border-subtle:   $ouds-color-border-default-light; // OUDS mod: instead of `tint-color($primary, 60%)`
$secondary-border-subtle: $ouds-color-border-default-light; // OUDS mod: instead of `tint-color($secondary, 60%)`
$success-border-subtle:   $ouds-color-border-default-light; // OUDS mod: instead of `tint-color($success, 60%)`
$info-border-subtle:      $ouds-color-border-default-light; // OUDS mod: instead of `tint-color($info, 60%)`
$warning-border-subtle:   $ouds-color-border-default-light; // OUDS mod: instead of `tint-color($warning, 60%)`
$danger-border-subtle:    $ouds-color-border-default-light; // OUDS mod: instead of `tint-color($danger, 60%)`
$light-border-subtle:     $ouds-color-border-default-light; // OUDS mod: instead of `$gray-200`
$dark-border-subtle:      $ouds-color-border-default-light; // OUDS mod: instead of `$gray-500`

scss/_variables-dark.scss

$primary-border-subtle-dark:        $ouds-color-border-default-dark; // OUDS mod: instead of `shade-color($primary, 40%)`
$secondary-border-subtle-dark:      $ouds-color-border-default-dark; // OUDS mod: instead of `shade-color($secondary, 40%)`
$success-border-subtle-dark:        $ouds-color-border-default-dark; // OUDS mod: instead of `shade-color($success, 40%)`
$info-border-subtle-dark:           $ouds-color-border-default-dark; // OUDS mod: instead of `shade-color($info, 40%)`
$warning-border-subtle-dark:        $ouds-color-border-default-dark; // OUDS mod: instead of `shade-color($warning, 40%)`
$danger-border-subtle-dark:         $ouds-color-border-default-dark; // OUDS mod: instead of `shade-color($danger, 40%)`
$light-border-subtle-dark:          $ouds-color-border-default-dark; // OUDS mod: instead of `$gray-700`
$dark-border-subtle-dark:           $ouds-color-border-default-dark; // OUDS mod: instead of `$gray-800`

Sass maps

The border utilities are declared through this map and generated using our utilities API.

scss/_maps.scss

$ouds-border-radiuses: (
  null:       $ouds-border-radius-default,
  "none":     $ouds-border-radius-none,
  "short":    $ouds-border-radius-short,
  "medium":   $ouds-border-radius-medium,
  "tall":     $ouds-border-radius-tall,
  "pill":     px-to-rem($ouds-border-radius-pill),
  "circle":   50%
);

$ouds-border-styles: (
  "drag":     $ouds-border-style-drag
);

$ouds-border-widths: (
  "thin":     $ouds-border-width-thin,
  "medium":   $ouds-border-width-medium,
  "thick":    $ouds-border-width-thick,
  "thicker":  $ouds-border-width-thicker,
);

$ouds-border-colors: (
  "brand-primary": var(--#{$prefix}color-border-brand-primary),
  "default": var(--#{$prefix}color-border-default),
  "emphasized": var(--#{$prefix}color-border-emphasized),
  "muted": var(--#{$prefix}color-border-muted),
  "on-brand-primary": var(--#{$prefix}color-border-on-brand-primary),
  "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),
);

Bootstrap $enable-bootstrap-compatibility: true

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

Color mode adaptive border colors are also available as a Sass map:

scss/_maps.scss

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

scss/_maps.scss

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

Sass mixins

scss/mixins/_border-radius.scss

@mixin border-radius($radius: $border-radius, $fallback-border-radius: false) {
  @if $enable-rounded {
    border-radius: valid-radius($radius);
  }
  @else if $fallback-border-radius != false {
    border-radius: $fallback-border-radius;
  }
}

@mixin border-top-radius($radius: $border-radius) {
  @if $enable-rounded {
    border-top-left-radius: valid-radius($radius);
    border-top-right-radius: valid-radius($radius);
  }
}

@mixin border-end-radius($radius: $border-radius) {
  @if $enable-rounded {
    border-top-right-radius: valid-radius($radius);
    border-bottom-right-radius: valid-radius($radius);
  }
}

@mixin border-bottom-radius($radius: $border-radius) {
  @if $enable-rounded {
    border-bottom-right-radius: valid-radius($radius);
    border-bottom-left-radius: valid-radius($radius);
  }
}

@mixin border-start-radius($radius: $border-radius) {
  @if $enable-rounded {
    border-top-left-radius: valid-radius($radius);
    border-bottom-left-radius: valid-radius($radius);
  }
}

@mixin border-top-start-radius($radius: $border-radius) {
  @if $enable-rounded {
    border-top-left-radius: valid-radius($radius);
  }
}

@mixin border-top-end-radius($radius: $border-radius) {
  @if $enable-rounded {
    border-top-right-radius: valid-radius($radius);
  }
}

@mixin border-bottom-end-radius($radius: $border-radius) {
  @if $enable-rounded {
    border-bottom-right-radius: valid-radius($radius);
  }
}

@mixin border-bottom-start-radius($radius: $border-radius) {
  @if $enable-rounded {
    border-bottom-left-radius: valid-radius($radius);
  }
}

Sass utilities API

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

scss/_utilities.scss

"border-ouds": (
  property: border,
  values: (
    null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
    "none": 0,
  ),
),

scss/_utilities.scss

"border-top-ouds": (
  property: border-top,
  values: (
    null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
    "none": 0,
  ),
),
"border-end-ouds": (
  property: border-right,
  class: border-end,
  values: (
    null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
    "none": 0,
  ),
),
"border-bottom-ouds": (
  property: border-bottom,
  values: (
    null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
    "none": 0,
  ),
),
"border-start-ouds": (
  property: border-left,
  class: border-start,
  values: (
    null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
    "none": 0,
  ),
),
"border-width-ouds": (
  property: border-width,
  class: border,
  values: $ouds-border-widths
),
"border-style-ouds": (
  property: border-style,
  class: border,
  values: $ouds-border-styles
),
"border-color-ouds": (
  property: border-color,
  class: border,
  values: $ouds-border-colors
),

scss/_utilities.scss

"rounded-ouds": (
  property: border-radius,
  class: rounded,
  values: $ouds-border-radiuses
),
"rounded-top-ouds": (
  property: border-top-left-radius border-top-right-radius,
  class: rounded-top,
  values: $ouds-border-radiuses
),
"rounded-end-ouds": (
  property: border-top-right-radius border-bottom-right-radius,
  class: rounded-end,
  values: $ouds-border-radiuses
),
"rounded-bottom-ouds": (
  property: border-bottom-right-radius border-bottom-left-radius,
  class: rounded-bottom,
  values: $ouds-border-radiuses
),
"rounded-start-ouds": (
  property: border-bottom-left-radius border-top-left-radius,
  class: rounded-start,
  values: $ouds-border-radiuses
),

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

"border": (
  property: border,
  values: (
    // OUDS mod: null value moved to border-ouds
    0: 0,
  ),
  bootstrap-compatibility: true
),
"border-top": (
  property: border-top,
  values: (
    // OUDS mod: null value moved to border-top-ouds
    0: 0,
  ),
  bootstrap-compatibility: true
),
"border-end": (
  property: border-right,
  class: border-end,
  values: (
    // OUDS mod: null value moved to border-end-ouds
    0: 0,
  ),
  bootstrap-compatibility: true
),
"border-bottom": (
  property: border-bottom,
  values: (
    // OUDS mod: null value moved to border-bottom-ouds
    0: 0,
  ),
  bootstrap-compatibility: true
),
"border-start": (
  property: border-left,
  class: border-start,
  values: (
    // OUDS mod: null value moved to border-start-ouds
    0: 0,
  ),
  bootstrap-compatibility: true
),
"border-color": (
  property: border-color,
  class: border,
  // OUDS mod: no local-vars,
  values: $utilities-border-colors,
  bootstrap-compatibility: true
),
"subtle-border-color": (
  property: border-color,
  class: border,
  values: $utilities-border-subtle,
  bootstrap-compatibility: true
),
"border-width": (
  property: border-width,
  class: border,
  values: $border-widths,
  bootstrap-compatibility: true
),
// OUDS mod: no "border-opacity"

scss/_utilities.scss

"rounded": (
  property: border-radius,
  class: rounded,
  values: (
    // OUDS mod: null value moved to rounded-ouds
    0: 0,
    1: var(--#{$prefix}border-radius-sm),
    2: var(--#{$prefix}border-radius-lg), // OUDS mod: instead of `var(--#{$prefix}border-radius)`
    3: var(--#{$prefix}border-radius-xl), // OUDS mod: instead of `var(--#{$prefix}border-radius-lg)`
    4: var(--#{$prefix}border-radius-xxl), // OUDS mod: instead of `var(--#{$prefix}border-radius-xl)`
    5: $border-radius-xxl * 1.5, // OUDS mod: instead of `var(--#{$prefix}border-radius-xxl)`
  ),
  bootstrap-compatibility: true
),
"rounded-top": (
  property: border-top-left-radius border-top-right-radius,
  class: rounded-top,
  values: (
    // OUDS mod: null value moved to rounded-top-ouds
    0: 0,
    1: var(--#{$prefix}border-radius-sm),
    2: var(--#{$prefix}border-radius-lg), // OUDS mod: instead of `var(--#{$prefix}border-radius)`
    3: var(--#{$prefix}border-radius-xl), // OUDS mod: instead of `var(--#{$prefix}border-radius-lg)`
    4: var(--#{$prefix}border-radius-xxl), // OUDS mod: instead of `var(--#{$prefix}border-radius-xl)`
    5: $border-radius-xxl * 1.5, // OUDS mod: instead of `var(--#{$prefix}border-radius-xxl)`
  ),
  bootstrap-compatibility: true
),
"rounded-end": (
  property: border-top-right-radius border-bottom-right-radius,
  class: rounded-end,
  values: (
    // OUDS mod: null value moved to rounded-end-ouds
    0: 0,
    1: var(--#{$prefix}border-radius-sm),
    2: var(--#{$prefix}border-radius-lg), // OUDS mod: instead of `var(--#{$prefix}border-radius)`
    3: var(--#{$prefix}border-radius-xl), // OUDS mod: instead of `var(--#{$prefix}border-radius-lg)`
    4: var(--#{$prefix}border-radius-xxl), // OUDS mod: instead of `var(--#{$prefix}border-radius-xl)`
    5: $border-radius-xxl * 1.5, // OUDS mod: instead of `var(--#{$prefix}border-radius-xxl)`
  ),
  bootstrap-compatibility: true
),
"rounded-bottom": (
  property: border-bottom-right-radius border-bottom-left-radius,
  class: rounded-bottom,
  values: (
    // OUDS mod: null value moved to rounded-bottom-ouds
    0: 0,
    1: var(--#{$prefix}border-radius-sm),
    2: var(--#{$prefix}border-radius-lg), // OUDS mod: instead of `var(--#{$prefix}border-radius)`
    3: var(--#{$prefix}border-radius-xl), // OUDS mod: instead of `var(--#{$prefix}border-radius-lg)`
    4: var(--#{$prefix}border-radius-xxl), // OUDS mod: instead of `var(--#{$prefix}border-radius-xl)`
    5: $border-radius-xxl * 1.5, // OUDS mod: instead of `var(--#{$prefix}border-radius-xxl)`
  ),
  bootstrap-compatibility: true
),
"rounded-start": (
  property: border-bottom-left-radius border-top-left-radius,
  class: rounded-start,
  values: (
    // OUDS mod: null value moved to rounded-start-ouds
    0: 0,
    1: var(--#{$prefix}border-radius-sm),
    2: var(--#{$prefix}border-radius-lg), // OUDS mod: instead of `var(--#{$prefix}border-radius)`
    3: var(--#{$prefix}border-radius-xl), // OUDS mod: instead of `var(--#{$prefix}border-radius-lg)`
    4: var(--#{$prefix}border-radius-xxl), // OUDS mod: instead of `var(--#{$prefix}border-radius-xl)`
    5: $border-radius-xxl * 1.5, // OUDS mod: instead of `var(--#{$prefix}border-radius-xxl)`
  ),
  bootstrap-compatibility: true
),

Borders

On this page On this page

Border

Additive

Subtractive

Color

Width

Radius

Sizes

Drag and drop

CSS

Variables

Sass tokens

Raw tokens

Semantic tokens

CSS semantic tokens

Sass variables

Sass maps

Sass mixins

Sass utilities API

On this page