View on GitHub

Migrating to recent versions

Track and review changes to the OUDS Web source files, documentation, and components to help you migrate from previous versions.

v0.2.0

Components

Buttons

New Button component has been implemented.

Examples

New New Loading buttons live example.

CSS and Sass variables

New $enable-button-pointers (default true) has been introduced. It is used to add a “hand” cursor to non-disabled button elements.
New $enable-gradients (default false) has been introduced. It is used to enable predefined gradients via background-image styles on various components.
New $enable-rounded (default true) has been introduced. It allows you to set rounded or flat corners on components.
New Sass variables:
- $btn-border-radius
- $btn-border-width
- $btn-color
- $btn-font-weight
- $btn-padding-x
- $btn-padding-y
- $btn-white-space
- $enable-button-pointers
- $enable-gradients
- $enable-rounded
- $ouds-button-border-radius
- $ouds-button-border-width-default-interaction-mono
- $ouds-button-border-width-default-interaction
- $ouds-button-border-width-default
- $ouds-button-border-width-minimal-interaction
- $ouds-button-border-width-minimal
- $ouds-button-color-bg-default-disabled-mono
- $ouds-button-color-bg-default-disabled
- $ouds-button-color-bg-default-enabled-mono
- $ouds-button-color-bg-default-enabled
- $ouds-button-color-bg-default-focus-mono
- $ouds-button-color-bg-default-focus
- $ouds-button-color-bg-default-hover-mono
- $ouds-button-color-bg-default-hover
- $ouds-button-color-bg-default-loading-mono
- $ouds-button-color-bg-default-loading
- $ouds-button-color-bg-default-pressed-mono
- $ouds-button-color-bg-default-pressed
- $ouds-button-color-bg-minimal-disabled-mono
- $ouds-button-color-bg-minimal-disabled
- $ouds-button-color-bg-minimal-enabled-mono
- $ouds-button-color-bg-minimal-enabled
- $ouds-button-color-bg-minimal-focus-mono
- $ouds-button-color-bg-minimal-focus
- $ouds-button-color-bg-minimal-hover-mono
- $ouds-button-color-bg-minimal-hover
- $ouds-button-color-bg-minimal-loading-mono
- $ouds-button-color-bg-minimal-loading
- $ouds-button-color-bg-minimal-pressed-mono
- $ouds-button-color-bg-minimal-pressed
- $ouds-button-color-bg-strong-disabled-mono
- $ouds-button-color-bg-strong-enabled-mono
- $ouds-button-color-bg-strong-focus-mono
- $ouds-button-color-bg-strong-hover-mono
- $ouds-button-color-bg-strong-loading-mono
- $ouds-button-color-bg-strong-pressed-mono
- $ouds-button-color-border-default-disabled-mono
- $ouds-button-color-border-default-disabled
- $ouds-button-color-border-default-enabled-mono
- $ouds-button-color-border-default-enabled
- $ouds-button-color-border-default-focus-mono
- $ouds-button-color-border-default-focus
- $ouds-button-color-border-default-hover-mono
- $ouds-button-color-border-default-hover
- $ouds-button-color-border-default-loading-mono
- $ouds-button-color-border-default-loading
- $ouds-button-color-border-default-pressed-mono
- $ouds-button-color-border-default-pressed
- $ouds-button-color-border-minimal-disabled-mono
- $ouds-button-color-border-minimal-disabled
- $ouds-button-color-border-minimal-enabled-mono
- $ouds-button-color-border-minimal-enabled
- $ouds-button-color-border-minimal-focus-mono
- $ouds-button-color-border-minimal-focus
- $ouds-button-color-border-minimal-hover-mono
- $ouds-button-color-border-minimal-hover
- $ouds-button-color-border-minimal-loading-mono
- $ouds-button-color-border-minimal-loading
- $ouds-button-color-border-minimal-pressed-mono
- $ouds-button-color-border-minimal-pressed
- $ouds-button-color-border-strong-disabled-mono
- $ouds-button-color-border-strong-enabled-mono
- $ouds-button-color-border-strong-focus-mono
- $ouds-button-color-border-strong-hover-mono
- $ouds-button-color-border-strong-loading-mono
- $ouds-button-color-border-strong-pressed-mono
- $ouds-button-color-content-default-disabled-mono
- $ouds-button-color-content-default-disabled
- $ouds-button-color-content-default-enabled-mono
- $ouds-button-color-content-default-enabled
- $ouds-button-color-content-default-focus-mono
- $ouds-button-color-content-default-focus
- $ouds-button-color-content-default-hover-mono
- $ouds-button-color-content-default-hover
- $ouds-button-color-content-default-loading-mono
- $ouds-button-color-content-default-loading
- $ouds-button-color-content-default-pressed-mono
- $ouds-button-color-content-default-pressed
- $ouds-button-color-content-minimal-disabled-mono
- $ouds-button-color-content-minimal-disabled
- $ouds-button-color-content-minimal-enabled-mono
- $ouds-button-color-content-minimal-enabled
- $ouds-button-color-content-minimal-focus-mono
- $ouds-button-color-content-minimal-focus
- $ouds-button-color-content-minimal-hover-mono
- $ouds-button-color-content-minimal-hover
- $ouds-button-color-content-minimal-loading-mono
- $ouds-button-color-content-minimal-loading
- $ouds-button-color-content-minimal-pressed-mono
- $ouds-button-color-content-minimal-pressed
- $ouds-button-color-content-strong-disabled-mono
- $ouds-button-color-content-strong-enabled-mono
- $ouds-button-color-content-strong-focus-mono
- $ouds-button-color-content-strong-hover-mono
- $ouds-button-color-content-strong-loading-mono
- $ouds-button-color-content-strong-pressed-mono
- $ouds-button-size-icon-only
- $ouds-button-size-icon
- $ouds-button-size-loader
- $ouds-button-size-max-height-icon-only
- $ouds-button-size-min-height
- $ouds-button-size-min-width
- $ouds-button-space-column-gap-arrow
- $ouds-button-space-column-gap-icon
- $ouds-button-space-inset-icon-only
- $ouds-button-space-padding-block
- $ouds-button-space-padding-inline-arrow-end
- $ouds-button-space-padding-inline-arrow-start
- $ouds-button-space-padding-inline-end-icon-start
- $ouds-button-space-padding-inline-icon-none
- $ouds-button-space-padding-inline-icon-start
- $ouds-button-space-padding-inline-start-icon-end
New Sass mixins:
- button-variant
- button-icon

v0.1.0

Foundations

Warning The root selector have been tweaked for more flexibility on JS frameworks. Please don’t hesitate to contact us if you find any issue with it.

Color modes

New We provide four brand new themes that are light, dark, root and root-inverted. See more on our color modes page

Content styles

Default styles

New Default styles have be added to HTML elements:
- Default guidelines that guide our choices like spacing units, text max-width, or avoiding margin-top
- box-sizing: border-box set on every element
- Default font parameters using native font stack
- Default background-color

Typography

New All typography global settings have been set for:
- Headings
- Display headings
- Regular texts
- Inline text elements (, <del>, <s>, <ins>, , , , , <abbr>, <hr>, <var>, <kbd>, <samp>, <address>)
- Code parts (inline, blocks)
- Abbreviations (<abbr>)
- Blockquotes
- Summaries (<summary>)
- Hidden elements

Layout

New Responsive flexbox grid system is now available with eight default responsive tiers defined at breakpoints 2xs, xs, sm, md, xl, 2xl, and 3xl.
- Container class: .container-fluid
- Limiting class: .container-max-width
- Row system with .row
- Column system with classes: .col-{number}, .col-{breakpoint}-{number}, and .offset-{breakpoint}-{number}
- Row columns classes: .row-cols-{number}

New Responsive CSS grid classes: .g-col-{breakpoint}-{number}.

Helpers

Color background

New The new color-background color helpers are now available. Visit our color-bg page to see more.

Icon

New Icons’ sizes utilities are now available to help choose the right icon size with a specific typography reference:
- Responsive icons’ sizes in headings:
  - .h{size}-short-icon, .h{size}-medium-icon, .h{size}-tall-icon, where h stands for heading and size is one of s for small, m for medium, l for large, or xl for x-large
  - .b{size}-short-icon, .b{size}-medium-icon, , .h{size}-tall-icon, where b stands for body and size is one of m for medium, or l for large
- Responsive icons’ sizes in regular texts: .b{size}-short-icon, .b{size}-medium-icon, .b{size}-tall-icon, where b stands for body and size is one of s for small, m for medium, or l for large
- Fixed icons’ sizes for decorative standalone icons: .decorative-{size}-icon where size is one of shortest|shorter|short|medium|tall|taller|tallest

Position

New Responsive sticky helpers: .sticky-{value}, and .sticky-{breakpoint}-{value} where breakpoint is in xs|sm|md|lg|xl|2xl|3xl, and value is in top|bottom.

Utilities

API

New The responsive option is now available in the API to indicate if responsive classes should be generated.

Background

New The new background color utilities are now available. Visit our background page to see more.

Border

New Border operative utilities: .border, .border-none, .border-top, .border-top-none, .border-bottom, .border-bottom-none, .border-start, .border-start-none, .border-end and .border-end-none.
New Border width utilities: .border-none, .border-thin, .border-medium, .border-thick, and .border-thicker.
New Border radius utilities with all sizes:
- Default: .rounded, .rounded-top, .rounded-bottom, .rounded-start and .rounded-end.
- None: .rounded-none, .rounded-top-none, .rounded-bottom-none, .rounded-start-none and .rounded-end-none.
- Short: .rounded-short, .rounded-top-short, .rounded-bottom-short, .rounded-start-short and .rounded-end-short.
- Medium: .rounded-medium, .rounded-top-medium, .rounded-bottom-medium, .rounded-start-medium and .rounded-end-medium.
- Tall: .rounded-tall, .rounded-top-tall, .rounded-bottom-tall, .rounded-start-tall and .rounded-end-tall.
- Circle: .rounded-circle, .rounded-top-circle, .rounded-bottom-circle, .rounded-start-circle and .rounded-end-circle.
- Pill: .rounded-pill, .rounded-top-pill, .rounded-bottom-pill, .rounded-start-pill and .rounded-end-pill.
New Border style utilities: .border-drag.
New The new border color utilities are now available. Visit our border page to see more.

Colors

New The new text color utilities are now available. Visit our color page to see more.

Display

New Responsive display utilities: .d-{value}, .d-{breakpoint}-{value} where breakpoint is in xs|sm|md|lg|xl|2xl|3xl, and value is in none|inline|inline-block|block|grid|inline-grid|table|table-cell|table-row|flex|inline-flex.

Flex

New Responsive flex utilities without breakpoint for 2xs, and where breakpoint is in xs|sm|md|lg|xl|2xl|3xl: .d-{breakpoint}-flex, .d-{breakpoint}-inline-flex, .flex-{breakpoint}-{row|column}, .flex-{breakpoint}-{row|column}-reverse, .justify-content-{breakpoint}-{start|end|center|between|around|evenly}, .align-items-{breakpoint}-{start|end|center|baseline|stretch}, .align-self-{breakpoint}-{start|end|center|baseline|stretch}, .flex-{breakpoint}-fill, .flex-{breakpoint}-{grow|shrink}-{0|1}, .flex-{breakpoint}-{nowrap|wrap|wrap-reverse}, .order-{breakpoint}-{number}, .order-{breakpoint}-{first|last} and .align-content-{breakpoint}-{start|end|center|between|around|stretch}.

Float

New Responsive float utilities: .float-{start|end|none}, .float-{breakpoint}-{start|end|none} where breakpoint is in xs|sm|md|lg|xl|2xl|3xl.

Object fit

New Responsive object fit utilities: .object-fit-{contain|cover|fill|scale|none}, .object-fit-{breakpoint}-{contain|cover|fill|scale|none} where breakpoint is in xs|sm|md|lg|xl|2xl|3xl.

Opacity

Breaking Opacity utilities: .opacity-emphasis has been renamed to .opacity-strong and .opacity-transparent has been renamed .opacity-invisible.

Shadow

New Shadows utilities: .shadow-none, .shadow-raised, .shadow-drag, .shadow-default, .shadow-emphasized, .shadow-sticky-default, .shadow-sticky-emphasized and .shadow-sticky-navigation-scrolled.

Sizing

New Sizing utility .mw-none to set max-width: none. This utility is particularly useful to reset the max-width of our font references in some special cases.

Spacings

New Fixed margin spacing utilities:
- None: .m-none, .mx-none, .my-none, .mt-none, .mb-none, .ms-none, .me-none, .m-xs-none, etc…
- Smash: .m-smash, .mx-smash, .my-smash, .mt-smash, .mb-smash, .ms-smash, .me-smash, .m-xs-smash, etc…
- Shortest: .m-shortest, .mx-shortest, .my-shortest, .mt-shortest, .mb-shortest, .ms-shortest, .me-shortest, .m-xs-shortest, etc…
- Shorter: .m-shorter, .mx-shorter, .my-shorter, .mt-shorter, .mb-shorter, .ms-shorter, .me-shorter, .m-xs-shorter, etc…
- Short: .m-short, .mx-short, .my-short, .mt-short, .mb-short, .ms-short, .me-short, .m-xs-short, etc…
- Medium: .m-medium, .mx-medium, .my-medium, .mt-medium, .mb-medium, .ms-medium, .me-medium, .m-xs-medium, etc…
- Tall: .m-tall, .mx-tall, .my-tall, .mt-tall, .mb-tall, .ms-tall, .me-tall, .m-xs-tall, etc…
- Taller: .m-taller, .mx-taller, .my-taller, .mt-taller, .mb-taller, .ms-taller, .me-taller, .m-xs-taller, etc…
- Tallest: .m-tallest, .mx-tallest, .my-tallest, .mt-tallest, .mb-tallest, .ms-tallest, .me-tallest, .m-xs-tallest, etc…
- Spacious: .m-spacious, .mx-spacious, .my-spacious, .mt-spacious, .mb-spacious, .ms-spacious, .me-spacious, .m-xs-spacious, etc…
- Huge: .m-huge, .mx-huge, .my-huge, .mt-huge, .mb-huge, .ms-huge, .me-huge, .m-xs-huge, etc…
- Jumbo: .m-jumbo, .mx-jumbo, .my-jumbo, .mt-jumbo, .mb-jumbo, .ms-jumbo, .me-jumbo, .m-xs-jumbo, etc…
- Auto: .m-auto, .mx-auto, .my-auto, .mt-auto, .mb-auto, .ms-auto, .me-auto, .m-xs-auto, etc…
New Scaled margin spacing utilities:
- None: .m-scaled-none, .mx-scaled-none, .my-scaled-none, .mt-scaled-none, .mb-scaled-none, .ms-scaled-none, .me-scaled-none,
- Smash: .m-scaled-smash, .mx-scaled-smash, .my-scaled-smash, .mt-scaled-smash, .mb-scaled-smash, .ms-scaled-smash, .me-scaled-smash,
- Shortest: .m-scaled-shortest, .mx-scaled-shortest, .my-scaled-shortest, .mt-scaled-shortest, .mb-scaled-shortest, .ms-scaled-shortest, .me-scaled-shortest,
- Shorter: .m-scaled-shorter, .mx-scaled-shorter, .my-scaled-shorter, .mt-scaled-shorter, .mb-scaled-shorter, .ms-scaled-shorter, .me-scaled-shorter,
- Short: .m-scaled-short, .mx-scaled-short, .my-scaled-short, .mt-scaled-short, .mb-scaled-short, .ms-scaled-short, .me-scaled-short,
- Medium: .m-scaled-medium, .mx-scaled-medium, .my-scaled-medium, .mt-scaled-medium, .mb-scaled-medium, .ms-scaled-medium, .me-scaled-medium,
- Tall: .m-scaled-tall, .mx-scaled-tall, .my-scaled-tall, .mt-scaled-tall, .mb-scaled-tall, .ms-scaled-tall, .me-scaled-tall,
- Taller: .m-scaled-taller, .mx-scaled-taller, .my-scaled-taller, .mt-scaled-taller, .mb-scaled-taller, .ms-scaled-taller, .me-scaled-taller,
- Tallest: .m-scaled-tallest, .mx-scaled-tallest, .my-scaled-tallest, .mt-scaled-tallest, .mb-scaled-tallest, .ms-scaled-tallest, .me-scaled-tallest,
- Spacious: .m-scaled-spacious, .mx-scaled-spacious, .my-scaled-spacious, .mt-scaled-spacious, .mb-scaled-spacious, .ms-scaled-spacious, .me-scaled-spacious
New Fixed padding spacing utilities:
- None: .p-none, .px-none, .py-none, .pt-none, .pb-none, .ps-none, .pe-none, .p-xs-none, etc…
- Smash: .p-smash, .px-smash, .py-smash, .pt-smash, .pb-smash, .ps-smash, .pe-smash, .p-xs-smash, etc…
- Shortest: .p-shortest, .px-shortest, .py-shortest, .pt-shortest, .pb-shortest, .ps-shortest, .pe-shortest, .p-xs-shortest, etc…
- Shorter: .p-shorter, .px-shorter, .py-shorter, .pt-shorter, .pb-shorter, .ps-shorter, .pe-shorter, .p-xs-shorter, etc…
- Short: .p-short, .px-short, .py-short, .pt-short, .pb-short, .ps-short, .pe-short, .p-xs-short, etc…
- Medium: .p-medium, .px-medium, .py-medium, .pt-medium, .pb-medium, .ps-medium, .pe-medium, .p-xs-medium, etc…
- Tall: .p-tall, .px-tall, .py-tall, .pt-tall, .pb-tall, .ps-tall, .pe-tall, .p-xs-tall, etc…
- Taller: .p-taller, .px-taller, .py-taller, .pt-taller, .pb-taller, .ps-taller, .pe-taller, .p-xs-taller, etc…
- Tallest: .p-tallest, .px-tallest, .py-tallest, .pt-tallest, .pb-tallest, .ps-tallest, .pe-tallest, .p-xs-tallest, etc…
- Spacious: .p-spacious, .px-spacious, .py-spacious, .pt-spacious, .pb-spacious, .ps-spacious, .pe-spacious, .p-xs-spacious, etc…
- Huge: .p-huge, .px-huge, .py-huge, .pt-huge, .pb-huge, .ps-huge, .pe-huge, .p-xs-huge, etc…
- Jumbo: .p-jumbo, .px-jumbo, .py-jumbo, .pt-jumbo, .pb-jumbo, .ps-jumbo, .pe-jumbo, .p-xs-jumbo, etc…
New Scaled padding spacing utilities:
- None: .p-scaled-none, .px-scaled-none, .py-scaled-none, .pt-scaled-none, .pb-scaled-none, .ps-scaled-none, .pe-scaled-none,
- Smash: .p-scaled-smash, .px-scaled-smash, .py-scaled-smash, .pt-scaled-smash, .pb-scaled-smash, .ps-scaled-smash, .pe-scaled-smash,
- Shortest: .p-scaled-shortest, .px-scaled-shortest, .py-scaled-shortest, .pt-scaled-shortest, .pb-scaled-shortest, .ps-scaled-shortest, .pe-scaled-shortest,
- Shorter: .p-scaled-shorter, .px-scaled-shorter, .py-scaled-shorter, .pt-scaled-shorter, .pb-scaled-shorter, .ps-scaled-shorter, .pe-scaled-shorter,
- Short: .p-scaled-short, .px-scaled-short, .py-scaled-short, .pt-scaled-short, .pb-scaled-short, .ps-scaled-short, .pe-scaled-short,
- Medium: .p-scaled-medium, .px-scaled-medium, .py-scaled-medium, .pt-scaled-medium, .pb-scaled-medium, .ps-scaled-medium, .pe-scaled-medium,
- Tall: .p-scaled-tall, .px-scaled-tall, .py-scaled-tall, .pt-scaled-tall, .pb-scaled-tall, .ps-scaled-tall, .pe-scaled-tall,
- Taller: .p-scaled-taller, .px-scaled-taller, .py-scaled-taller, .pt-scaled-taller, .pb-scaled-taller, .ps-scaled-taller, .pe-scaled-taller,
- Tallest: .p-scaled-tallest, .px-scaled-tallest, .py-scaled-tallest, .pt-scaled-tallest, .pb-scaled-tallest, .ps-scaled-tallest, .pe-scaled-tallest,
- Spacious: .p-scaled-spacious, .px-scaled-spacious, .py-scaled-spacious, .pt-scaled-spacious, .pb-scaled-spacious, .ps-scaled-spacious, .pe-scaled-spacious
New Fixed gap spacing utilities:
- None: .gap-none, .row-gap-none, .column-gap-none, .gap-xs-none, etc…
- Smash: .gap-smash, .row-gap-smash, .column-gap-smash, .gap-xs-smash, etc…
- Shortest: .gap-shortest, .row-gap-shortest, .column-gap-shortest, .gap-xs-shortest, etc…
- Shorter: .gap-shorter, .row-gap-shorter, .column-gap-shorter, .gap-xs-shorter, etc…
- Short: .gap-short, .row-gap-short, .column-gap-short, .gap-xs-short, etc…
- Medium: .gap-medium, .row-gap-medium, .column-gap-medium, .gap-xs-medium, etc…
- Tall: .gap-tall, .row-gap-tall, .column-gap-tall, .gap-xs-tall, etc…
- Taller: .gap-taller, .row-gap-taller, .column-gap-taller, .gap-xs-taller, etc…
- Tallest: .gap-tallest, .row-gap-tallest, .column-gap-tallest, .gap-xs-tallest, etc…
- Spacious: .gap-spacious, .row-gap-spacious, .column-gap-spacious, .gap-xs-spacious, etc…
- Huge: .gap-huge, .row-gap-huge, .column-gap-huge, .gap-xs-huge, etc…
- Jumbo: .gap-jumbo, .row-gap-jumbo, .column-gap-jumbo, .gap-xs-jumbo, etc…
New Scaled gap spacing utilities:
- None: .gap-scaled-none, .row-gap-scaled-none, .column-gap-scaled-none
- Smash: .gap-scaled-smash, .row-gap-scaled-smash, .column-gap-scaled-smash
- Shortest: .gap-scaled-shortest, .row-gap-scaled-shortest, .column-gap-scaled-shortest
- Shorter: .gap-scaled-shorter, .row-gap-scaled-shorter, .column-gap-scaled-shorter
- Short: .gap-scaled-short, .row-gap-scaled-short, .column-gap-scaled-short
- Medium: .gap-scaled-medium, .row-gap-scaled-medium, .column-gap-scaled-medium
- Tall: .gap-scaled-tall, .row-gap-scaled-tall, .column-gap-scaled-tall
- Taller: .gap-scaled-taller, .row-gap-scaled-taller, .column-gap-scaled-taller
- Tallest: .gap-scaled-tallest, .row-gap-scaled-tallest, .column-gap-scaled-tallest
- Spacious: .gap-scaled-spacious, .row-gap-scaled-spacious, .column-gap-scaled-spacious

Text

New Alignment text utilities: .text-start, .text-center, .text-end, and responsive versions like .text-{breakpoint}-{start|center|end} where breakpoint is in xs|sm|md|lg|xl|2xl|3xl.
New Wrapping and overflow text utilities: .text-wrap and .text-nowrap.
New Word break text utility: .text-break.
New Text transform text utilities: .text-lowercase, .text-uppercase, and .text-capitalize.
New Font size text utilities:
- Display headings: .fs-dl, .fs-dm, .fs-ds
- Headings: .fs-hxl, .fs-hl, .fs-hm, .fs-hs
- Body: .fs-bl, .fs-bm, .fs-bs
- Code: .fs-cm, .fs-cs
New Font weight text utilities: .fw-normal and .fw-bold.
New Text decoration utilities: .text-decoration-underline, .text-decoration-line-through, and .text-decoration-none.

Examples

New New Font example.
New New Grid example.
New New Grid system example.

CSS and Sass variables

New A new file containing composite tokens has been added. If you were using the Sass compilation, you must import the new Sass file between the semantic and component files.

See the new import stack

+ @import "config";
  @import "functions";
  @import "tokens/raw";
  @import "tokens/semantic";
+ @import "tokens/semantic-colors-custom-props";
+ @import "tokens/composite";
  @import "tokens/component";

New $enable-container-classes to enable or disable the generation of CSS classes for the grid system (e.g. .row, .col-md-1, etc.).
New Sass variables:
- $enable-container-classes
- $grid-columns
- $grid-gutter-width
- $grid-row-columns
- $ouds-border-base
- $ouds-border-radius-0
- $ouds-border-radius-75
- $ouds-border-radius-150
- $ouds-border-radius-300
- $ouds-border-radius-9999
- $ouds-border-radius-default
- $ouds-border-radius-medium
- $ouds-border-radius-none
- $ouds-border-radius-pill
- $ouds-border-radius-short
- $ouds-border-radius-tall
- $ouds-border-style-dashed
- $ouds-border-style-default
- $ouds-border-style-drag
- $ouds-border-style-solid
- $ouds-border-width-0
- $ouds-border-width-25
- $ouds-border-width-50
- $ouds-border-width-75
- $ouds-border-width-100
- $ouds-border-width-125
- $ouds-border-width-default
- $ouds-border-width-medium
- $ouds-border-width-none
- $ouds-border-width-thick
- $ouds-border-width-thicker
- $ouds-border-width-thin
- $ouds-color-action-disabled-dark
- $ouds-color-action-disabled-light
- $ouds-color-action-enabled-dark
- $ouds-color-action-enabled-light
- $ouds-color-action-focus-dark
- $ouds-color-action-focus-light
- $ouds-color-action-highlighted-dark
- $ouds-color-action-highlighted-light
- $ouds-color-action-hover-dark
- $ouds-color-action-hover-light
- $ouds-color-action-loading-dark
- $ouds-color-action-loading-light
- $ouds-color-action-negative-enabled-dark
- $ouds-color-action-negative-enabled-light
- $ouds-color-action-negative-focus-dark
- $ouds-color-action-negative-focus-light
- $ouds-color-action-negative-hover-dark
- $ouds-color-action-negative-hover-light
- $ouds-color-action-negative-loading-dark
- $ouds-color-action-negative-loading-light
- $ouds-color-action-negative-pressed-dark
- $ouds-color-action-negative-pressed-light
- $ouds-color-action-pressed-dark
- $ouds-color-action-pressed-light
- $ouds-color-action-selected-dark
- $ouds-color-action-selected-light
- $ouds-color-action-support-enabled-dark
- $ouds-color-action-support-enabled-light
- $ouds-color-action-support-focus-dark
- $ouds-color-action-support-focus-light
- $ouds-color-action-support-hover-dark
- $ouds-color-action-support-hover-light
- $ouds-color-action-support-loading-dark
- $ouds-color-action-support-loading-light
- $ouds-color-action-support-pressed-dark
- $ouds-color-action-support-pressed-light
- $ouds-color-action-visited-dark
- $ouds-color-action-visited-light
- $ouds-color-always-black-dark
- $ouds-color-always-black-light
- $ouds-color-always-on-black-dark
- $ouds-color-always-on-black-light
- $ouds-color-always-on-white-dark
- $ouds-color-always-on-white-light
- $ouds-color-always-white-dark
- $ouds-color-always-white-light
- $ouds-color-bg-emphasized-dark
- $ouds-color-bg-emphasized-light
- $ouds-color-bg-primary-dark
- $ouds-color-bg-primary-light
- $ouds-color-bg-secondary-dark
- $ouds-color-bg-secondary-light
- $ouds-color-bg-tertiary-dark
- $ouds-color-bg-tertiary-light
- $ouds-color-border-brand-primary-dark
- $ouds-color-border-brand-primary-light
- $ouds-color-border-default-dark
- $ouds-color-border-default-light
- $ouds-color-border-emphasized-dark
- $ouds-color-border-emphasized-light
- $ouds-color-border-focus-dark
- $ouds-color-border-focus-inset-dark
- $ouds-color-border-focus-inset-light
- $ouds-color-border-focus-light
- $ouds-color-border-on-brand-primary-dark
- $ouds-color-border-on-brand-primary-light
- $ouds-color-content-brand-primary-dark
- $ouds-color-content-brand-primary-light
- $ouds-color-content-default-dark
- $ouds-color-content-default-light
- $ouds-color-content-disabled-dark
- $ouds-color-content-disabled-light
- $ouds-color-content-muted-dark
- $ouds-color-content-muted-light
- $ouds-color-content-on-action-disabled-dark
- $ouds-color-content-on-action-disabled-light
- $ouds-color-content-on-action-enabled-dark
- $ouds-color-content-on-action-enabled-light
- $ouds-color-content-on-action-focus-dark
- $ouds-color-content-on-action-focus-light
- $ouds-color-content-on-action-highlighted-dark
- $ouds-color-content-on-action-highlighted-light
- $ouds-color-content-on-action-hover-dark
- $ouds-color-content-on-action-hover-light
- $ouds-color-content-on-action-loading-dark
- $ouds-color-content-on-action-loading-light
- $ouds-color-content-on-action-pressed-dark
- $ouds-color-content-on-action-pressed-light
- $ouds-color-content-on-brand-primary-dark
- $ouds-color-content-on-brand-primary-light
- $ouds-color-content-on-overlay-emphasized-dark
- $ouds-color-content-on-overlay-emphasized-light
- $ouds-color-content-on-status-emphasized-alt-dark
- $ouds-color-content-on-status-emphasized-alt-light
- $ouds-color-content-on-status-emphasized-dark
- $ouds-color-content-on-status-emphasized-light
- $ouds-color-content-on-status-muted-dark
- $ouds-color-content-on-status-muted-light
- $ouds-color-content-status-info-dark
- $ouds-color-content-status-info-light
- $ouds-color-content-status-negative-dark
- $ouds-color-content-status-negative-light
- $ouds-color-content-status-positive-dark
- $ouds-color-content-status-positive-light
- $ouds-color-content-status-warning-dark
- $ouds-color-content-status-warning-light
- $ouds-color-decorative-accent-1-default-dark
- $ouds-color-decorative-accent-1-default-light
- $ouds-color-decorative-accent-1-emphasized-dark
- $ouds-color-decorative-accent-1-emphasized-light
- $ouds-color-decorative-accent-1-muted-dark
- $ouds-color-decorative-accent-1-muted-light
- $ouds-color-decorative-accent-2-default-dark
- $ouds-color-decorative-accent-2-default-light
- $ouds-color-decorative-accent-2-emphasized-dark
- $ouds-color-decorative-accent-2-emphasized-light
- $ouds-color-decorative-accent-2-muted-dark
- $ouds-color-decorative-accent-2-muted-light
- $ouds-color-decorative-accent-3-default-dark
- $ouds-color-decorative-accent-3-default-light
- $ouds-color-decorative-accent-3-emphasized-dark
- $ouds-color-decorative-accent-3-emphasized-light
- $ouds-color-decorative-accent-3-muted-dark
- $ouds-color-decorative-accent-3-muted-light
- $ouds-color-decorative-accent-4-default-dark
- $ouds-color-decorative-accent-4-default-light
- $ouds-color-decorative-accent-4-emphasized-dark
- $ouds-color-decorative-accent-4-emphasized-light
- $ouds-color-decorative-accent-4-muted-dark
- $ouds-color-decorative-accent-4-muted-light
- $ouds-color-decorative-accent-5-default-dark
- $ouds-color-decorative-accent-5-default-light
- $ouds-color-decorative-accent-5-emphasized-dark
- $ouds-color-decorative-accent-5-emphasized-light
- $ouds-color-decorative-accent-5-muted-dark
- $ouds-color-decorative-accent-5-muted-light
- $ouds-color-decorative-amber-100
- $ouds-color-decorative-amber-200
- $ouds-color-decorative-amber-300
- $ouds-color-decorative-amber-400
- $ouds-color-decorative-amber-500
- $ouds-color-decorative-amber-600
- $ouds-color-decorative-amber-700
- $ouds-color-decorative-amber-800
- $ouds-color-decorative-amber-900
- $ouds-color-decorative-amethyst-100
- $ouds-color-decorative-amethyst-200
- $ouds-color-decorative-amethyst-300
- $ouds-color-decorative-amethyst-400
- $ouds-color-decorative-amethyst-500
- $ouds-color-decorative-amethyst-600
- $ouds-color-decorative-amethyst-700
- $ouds-color-decorative-amethyst-800
- $ouds-color-decorative-amethyst-900
- $ouds-color-decorative-brand-primary-dark
- $ouds-color-decorative-brand-primary-light
- $ouds-color-decorative-brand-secondary-dark
- $ouds-color-decorative-brand-secondary-light
- $ouds-color-decorative-brand-tertiary-dark
- $ouds-color-decorative-brand-tertiary-light
- $ouds-color-decorative-deep-peach-100
- $ouds-color-decorative-deep-peach-200
- $ouds-color-decorative-deep-peach-300
- $ouds-color-decorative-deep-peach-400
- $ouds-color-decorative-deep-peach-500
- $ouds-color-decorative-deep-peach-600
- $ouds-color-decorative-deep-peach-700
- $ouds-color-decorative-deep-peach-800
- $ouds-color-decorative-deep-peach-900
- $ouds-color-decorative-emerald-100
- $ouds-color-decorative-emerald-200
- $ouds-color-decorative-emerald-300
- $ouds-color-decorative-emerald-400
- $ouds-color-decorative-emerald-500
- $ouds-color-decorative-emerald-600
- $ouds-color-decorative-emerald-700
- $ouds-color-decorative-emerald-800
- $ouds-color-decorative-emerald-900
- $ouds-color-decorative-neutral-default-dark
- $ouds-color-decorative-neutral-default-light
- $ouds-color-decorative-neutral-emphasized-dark
- $ouds-color-decorative-neutral-emphasized-light
- $ouds-color-decorative-neutral-muted-dark
- $ouds-color-decorative-neutral-muted-light
- $ouds-color-decorative-shocking-pink-100
- $ouds-color-decorative-shocking-pink-200
- $ouds-color-decorative-shocking-pink-300
- $ouds-color-decorative-shocking-pink-400
- $ouds-color-decorative-shocking-pink-500
- $ouds-color-decorative-shocking-pink-600
- $ouds-color-decorative-shocking-pink-700
- $ouds-color-decorative-shocking-pink-800
- $ouds-color-decorative-shocking-pink-900
- $ouds-color-decorative-skin-tint-100-dark
- $ouds-color-decorative-skin-tint-100-light
- $ouds-color-decorative-skin-tint-200-dark
- $ouds-color-decorative-skin-tint-200-light
- $ouds-color-decorative-skin-tint-300-dark
- $ouds-color-decorative-skin-tint-300-light
- $ouds-color-decorative-skin-tint-400-dark
- $ouds-color-decorative-skin-tint-400-light
- $ouds-color-decorative-skin-tint-500-dark
- $ouds-color-decorative-skin-tint-500-light
- $ouds-color-decorative-skin-tint-600-dark
- $ouds-color-decorative-skin-tint-600-light
- $ouds-color-decorative-skin-tint-700-dark
- $ouds-color-decorative-skin-tint-700-light
- $ouds-color-decorative-skin-tint-800-dark
- $ouds-color-decorative-skin-tint-800-light
- $ouds-color-decorative-skin-tint-900-dark
- $ouds-color-decorative-skin-tint-900-light
- $ouds-color-decorative-sky-100
- $ouds-color-decorative-sky-200
- $ouds-color-decorative-sky-300
- $ouds-color-decorative-sky-400
- $ouds-color-decorative-sky-500
- $ouds-color-decorative-sky-600
- $ouds-color-decorative-sky-700
- $ouds-color-decorative-sky-800
- $ouds-color-decorative-sky-900
- $ouds-color-functional-black
- $ouds-color-functional-dark-gray-80
- $ouds-color-functional-dark-gray-160
- $ouds-color-functional-dark-gray-240
- $ouds-color-functional-dark-gray-320
- $ouds-color-functional-dark-gray-400
- $ouds-color-functional-dark-gray-480
- $ouds-color-functional-dark-gray-560
- $ouds-color-functional-dark-gray-640
- $ouds-color-functional-dark-gray-720
- $ouds-color-functional-dark-gray-800
- $ouds-color-functional-dark-gray-880
- $ouds-color-functional-dark-gray-960
- $ouds-color-functional-dodger-blue-100
- $ouds-color-functional-dodger-blue-200
- $ouds-color-functional-dodger-blue-300
- $ouds-color-functional-dodger-blue-400
- $ouds-color-functional-dodger-blue-500
- $ouds-color-functional-dodger-blue-600
- $ouds-color-functional-dodger-blue-700
- $ouds-color-functional-dodger-blue-800
- $ouds-color-functional-dodger-blue-900
- $ouds-color-functional-light-gray-80
- $ouds-color-functional-light-gray-160
- $ouds-color-functional-light-gray-240
- $ouds-color-functional-light-gray-320
- $ouds-color-functional-light-gray-400
- $ouds-color-functional-light-gray-480
- $ouds-color-functional-light-gray-560
- $ouds-color-functional-light-gray-640
- $ouds-color-functional-light-gray-720
- $ouds-color-functional-light-gray-800
- $ouds-color-functional-light-gray-880
- $ouds-color-functional-light-gray-960
- $ouds-color-functional-malachite-100
- $ouds-color-functional-malachite-200
- $ouds-color-functional-malachite-300
- $ouds-color-functional-malachite-400
- $ouds-color-functional-malachite-500
- $ouds-color-functional-malachite-600
- $ouds-color-functional-malachite-700
- $ouds-color-functional-malachite-800
- $ouds-color-functional-malachite-900
- $ouds-color-functional-scarlet-100
- $ouds-color-functional-scarlet-200
- $ouds-color-functional-scarlet-300
- $ouds-color-functional-scarlet-400
- $ouds-color-functional-scarlet-500
- $ouds-color-functional-scarlet-600
- $ouds-color-functional-scarlet-700
- $ouds-color-functional-scarlet-800
- $ouds-color-functional-scarlet-900
- $ouds-color-functional-sun-100
- $ouds-color-functional-sun-200
- $ouds-color-functional-sun-300
- $ouds-color-functional-sun-400
- $ouds-color-functional-sun-500
- $ouds-color-functional-sun-600
- $ouds-color-functional-sun-700
- $ouds-color-functional-sun-800
- $ouds-color-functional-sun-900
- $ouds-color-functional-white
- $ouds-color-opacity-black-0
- $ouds-color-opacity-black-40
- $ouds-color-opacity-black-80
- $ouds-color-opacity-black-120
- $ouds-color-opacity-black-160
- $ouds-color-opacity-black-200
- $ouds-color-opacity-black-240
- $ouds-color-opacity-black-280
- $ouds-color-opacity-black-320
- $ouds-color-opacity-black-360
- $ouds-color-opacity-black-400
- $ouds-color-opacity-black-440
- $ouds-color-opacity-black-480
- $ouds-color-opacity-black-520
- $ouds-color-opacity-black-560
- $ouds-color-opacity-black-600
- $ouds-color-opacity-black-640
- $ouds-color-opacity-black-680
- $ouds-color-opacity-black-720
- $ouds-color-opacity-black-760
- $ouds-color-opacity-black-800
- $ouds-color-opacity-black-840
- $ouds-color-opacity-black-880
- $ouds-color-opacity-black-920
- $ouds-color-opacity-black-960
- $ouds-color-opacity-dodger-blue
- $ouds-color-opacity-lower-dark
- $ouds-color-opacity-lower-light
- $ouds-color-opacity-lowest-dark
- $ouds-color-opacity-lowest-light
- $ouds-color-opacity-malachite
- $ouds-color-opacity-scarlet
- $ouds-color-opacity-sun
- $ouds-color-opacity-transparent-dark
- $ouds-color-opacity-transparent-light
- $ouds-color-opacity-white-0
- $ouds-color-opacity-white-40
- $ouds-color-opacity-white-80
- $ouds-color-opacity-white-120
- $ouds-color-opacity-white-160
- $ouds-color-opacity-white-200
- $ouds-color-opacity-white-240
- $ouds-color-opacity-white-280
- $ouds-color-opacity-white-320
- $ouds-color-opacity-white-360
- $ouds-color-opacity-white-400
- $ouds-color-opacity-white-440
- $ouds-color-opacity-white-480
- $ouds-color-opacity-white-520
- $ouds-color-opacity-white-560
- $ouds-color-opacity-white-600
- $ouds-color-opacity-white-640
- $ouds-color-opacity-white-680
- $ouds-color-opacity-white-720
- $ouds-color-opacity-white-760
- $ouds-color-opacity-white-800
- $ouds-color-opacity-white-840
- $ouds-color-opacity-white-880
- $ouds-color-opacity-white-920
- $ouds-color-opacity-white-960
- $ouds-color-orange-50
- $ouds-color-orange-100
- $ouds-color-orange-200
- $ouds-color-orange-300
- $ouds-color-orange-400
- $ouds-color-orange-500
- $ouds-color-orange-550
- $ouds-color-orange-600
- $ouds-color-orange-700
- $ouds-color-orange-800
- $ouds-color-orange-900
- $ouds-color-overlay-default-dark
- $ouds-color-overlay-default-light
- $ouds-color-overlay-drag-dark
- $ouds-color-overlay-drag-light
- $ouds-color-overlay-emphasized-dark
- $ouds-color-overlay-emphasized-light
- $ouds-color-overlay-modal-dark
- $ouds-color-overlay-modal-light
- $ouds-color-surface-brand-primary-dark
- $ouds-color-surface-brand-primary-light
- $ouds-color-surface-status-accent-emphasized-dark
- $ouds-color-surface-status-accent-emphasized-light
- $ouds-color-surface-status-accent-muted-dark
- $ouds-color-surface-status-accent-muted-light
- $ouds-color-surface-status-info-emphasized-dark
- $ouds-color-surface-status-info-emphasized-light
- $ouds-color-surface-status-info-muted-dark
- $ouds-color-surface-status-info-muted-light
- $ouds-color-surface-status-negative-emphasized-dark
- $ouds-color-surface-status-negative-emphasized-light
- $ouds-color-surface-status-negative-muted-dark
- $ouds-color-surface-status-negative-muted-light
- $ouds-color-surface-status-neutral-emphasized-dark
- $ouds-color-surface-status-neutral-emphasized-light
- $ouds-color-surface-status-neutral-muted-dark
- $ouds-color-surface-status-neutral-muted-light
- $ouds-color-surface-status-positive-emphasized-dark
- $ouds-color-surface-status-positive-emphasized-light
- $ouds-color-surface-status-positive-muted-dark
- $ouds-color-surface-status-positive-muted-light
- $ouds-color-surface-status-warning-emphasized-dark
- $ouds-color-surface-status-warning-emphasized-light
- $ouds-color-surface-status-warning-muted-dark
- $ouds-color-surface-status-warning-muted-light
- $ouds-color-warm-gray-100
- $ouds-color-warm-gray-200
- $ouds-color-warm-gray-300
- $ouds-color-warm-gray-400
- $ouds-color-warm-gray-500
- $ouds-color-warm-gray-600
- $ouds-color-warm-gray-700
- $ouds-color-warm-gray-800
- $ouds-color-warm-gray-900
- $ouds-dimension-0
- $ouds-dimension-25
- $ouds-dimension-50
- $ouds-dimension-75
- $ouds-dimension-100
- $ouds-dimension-150
- $ouds-dimension-200
- $ouds-dimension-250
- $ouds-dimension-300
- $ouds-dimension-350
- $ouds-dimension-400
- $ouds-dimension-450
- $ouds-dimension-500
- $ouds-dimension-550
- $ouds-dimension-600
- $ouds-dimension-650
- $ouds-dimension-700
- $ouds-dimension-750
- $ouds-dimension-800
- $ouds-dimension-900
- $ouds-dimension-1000
- $ouds-dimension-1200
- $ouds-dimension-1400
- $ouds-dimension-1600
- $ouds-dimension-1800
- $ouds-dimension-4000
- $ouds-dimension-base
- $ouds-elevation-blur-0
- $ouds-elevation-blur-200
- $ouds-elevation-blur-300
- $ouds-elevation-blur-400
- $ouds-elevation-blur-600
- $ouds-elevation-blur-default
- $ouds-elevation-blur-drag
- $ouds-elevation-blur-emphasized
- $ouds-elevation-blur-none
- $ouds-elevation-blur-raised
- $ouds-elevation-blur-sticky-default
- $ouds-elevation-blur-sticky-emphasized
- $ouds-elevation-blur-sticky-navigation-scrolled
- $ouds-elevation-color-default-dark
- $ouds-elevation-color-default-light
- $ouds-elevation-color-drag-dark
- $ouds-elevation-color-drag-light
- $ouds-elevation-color-emphasized-dark
- $ouds-elevation-color-emphasized-light
- $ouds-elevation-color-none-dark
- $ouds-elevation-color-none-light
- $ouds-elevation-color-raised-dark
- $ouds-elevation-color-raised-light
- $ouds-elevation-color-sticky-default-dark
- $ouds-elevation-color-sticky-default-light
- $ouds-elevation-color-sticky-emphasized-dark
- $ouds-elevation-color-sticky-emphasized-light
- $ouds-elevation-color-sticky-navigation-scrolled-dark
- $ouds-elevation-color-sticky-navigation-scrolled-light
- $ouds-elevation-default
- $ouds-elevation-drag
- $ouds-elevation-emphasized
- $ouds-elevation-focus
- $ouds-elevation-none
- $ouds-elevation-raised
- $ouds-elevation-spread-0
- $ouds-elevation-spread-300
- $ouds-elevation-spread-default
- $ouds-elevation-spread-drag
- $ouds-elevation-spread-emphasized
- $ouds-elevation-spread-n100
- $ouds-elevation-spread-n300
- $ouds-elevation-spread-none
- $ouds-elevation-spread-raised
- $ouds-elevation-spread-sticky-default
- $ouds-elevation-spread-sticky-emphasized
- $ouds-elevation-spread-sticky-navigation-scrolled
- $ouds-elevation-sticky-default
- $ouds-elevation-sticky-emphasized
- $ouds-elevation-sticky-navigation-scrolled
- $ouds-elevation-x-0
- $ouds-elevation-x-default
- $ouds-elevation-x-drag
- $ouds-elevation-x-emphasized
- $ouds-elevation-x-none
- $ouds-elevation-x-raised
- $ouds-elevation-x-sticky-default
- $ouds-elevation-x-sticky-emphasized
- $ouds-elevation-x-sticky-navigation-scrolled
- $ouds-elevation-y-0
- $ouds-elevation-y-100
- $ouds-elevation-y-200
- $ouds-elevation-y-300
- $ouds-elevation-y-500
- $ouds-elevation-y-default
- $ouds-elevation-y-drag
- $ouds-elevation-y-emphasized
- $ouds-elevation-y-none
- $ouds-elevation-y-raised
- $ouds-elevation-y-sticky-default
- $ouds-elevation-y-sticky-emphasized
- $ouds-elevation-y-sticky-navigation-scrolled
- $ouds-font-family
- $ouds-font-family-brand-default
- $ouds-font-family-monospace-stack
- $ouds-font-family-sans-serif-stack
- $ouds-font-letter-spacing-150
- $ouds-font-letter-spacing-200
- $ouds-font-letter-spacing-250
- $ouds-font-letter-spacing-300
- $ouds-font-letter-spacing-350
- $ouds-font-letter-spacing-450
- $ouds-font-letter-spacing-550
- $ouds-font-letter-spacing-650
- $ouds-font-letter-spacing-750
- $ouds-font-letter-spacing-850
- $ouds-font-letter-spacing-1050
- $ouds-font-letter-spacing-1250
- $ouds-font-letter-spacing-1450
- $ouds-font-letter-spacing-1850
- $ouds-font-letter-spacing-body-large-desktop
- $ouds-font-letter-spacing-body-large-mobile
- $ouds-font-letter-spacing-body-large-tablet
- $ouds-font-letter-spacing-body-medium-desktop
- $ouds-font-letter-spacing-body-medium-mobile
- $ouds-font-letter-spacing-body-medium-tablet
- $ouds-font-letter-spacing-body-small-desktop
- $ouds-font-letter-spacing-body-small-mobile
- $ouds-font-letter-spacing-body-small-tablet
- $ouds-font-letter-spacing-code-medium:
- $ouds-font-letter-spacing-display-large-desktop
- $ouds-font-letter-spacing-display-large-mobile
- $ouds-font-letter-spacing-display-large-tablet
- $ouds-font-letter-spacing-display-medium-desktop
- $ouds-font-letter-spacing-display-medium-mobile
- $ouds-font-letter-spacing-display-medium-tablet
- $ouds-font-letter-spacing-display-small-desktop
- $ouds-font-letter-spacing-display-small-mobile
- $ouds-font-letter-spacing-display-small-tablet
- $ouds-font-letter-spacing-heading-large-desktop
- $ouds-font-letter-spacing-heading-large-mobile
- $ouds-font-letter-spacing-heading-large-tablet
- $ouds-font-letter-spacing-heading-medium-desktop
- $ouds-font-letter-spacing-heading-medium-mobile
- $ouds-font-letter-spacing-heading-medium-tablet
- $ouds-font-letter-spacing-heading-small-desktop
- $ouds-font-letter-spacing-heading-small-mobile
- $ouds-font-letter-spacing-heading-small-tablet
- $ouds-font-letter-spacing-heading-xlarge-desktop
- $ouds-font-letter-spacing-heading-xlarge-mobile
- $ouds-font-letter-spacing-heading-xlarge-tablet
- $ouds-font-letter-spacing-label-large
- $ouds-font-letter-spacing-label-medium
- $ouds-font-letter-spacing-label-small
- $ouds-font-letter-spacing-label-xlarge
- $ouds-font-line-height-250
- $ouds-font-line-height-350
- $ouds-font-line-height-450
- $ouds-font-line-height-550
- $ouds-font-line-height-650
- $ouds-font-line-height-750
- $ouds-font-line-height-850
- $ouds-font-line-height-950
- $ouds-font-line-height-1050
- $ouds-font-line-height-1250
- $ouds-font-line-height-1450
- $ouds-font-line-height-1850
- $ouds-font-line-height-2050
- $ouds-font-line-height-body-large-desktop
- $ouds-font-line-height-body-large-mobile
- $ouds-font-line-height-body-large-tablet
- $ouds-font-line-height-body-medium-desktop
- $ouds-font-line-height-body-medium-mobile
- $ouds-font-line-height-body-medium-tablet
- $ouds-font-line-height-body-small-desktop
- $ouds-font-line-height-body-small-mobile
- $ouds-font-line-height-body-small-tablet
- $ouds-font-line-height-code-medium
- $ouds-font-line-height-display-large-desktop
- $ouds-font-line-height-display-large-mobile
- $ouds-font-line-height-display-large-tablet
- $ouds-font-line-height-display-medium-desktop
- $ouds-font-line-height-display-medium-mobile
- $ouds-font-line-height-display-medium-tablet
- $ouds-font-line-height-display-small-desktop
- $ouds-font-line-height-display-small-mobile
- $ouds-font-line-height-display-small-tablet
- $ouds-font-line-height-heading-large-desktop
- $ouds-font-line-height-heading-large-mobile
- $ouds-font-line-height-heading-large-tablet
- $ouds-font-line-height-heading-medium-desktop
- $ouds-font-line-height-heading-medium-mobile
- $ouds-font-line-height-heading-medium-tablet
- $ouds-font-line-height-heading-small-desktop
- $ouds-font-line-height-heading-small-mobile
- $ouds-font-line-height-heading-small-tablet
- $ouds-font-line-height-heading-xlarge-desktop
- $ouds-font-line-height-heading-xlarge-mobile
- $ouds-font-line-height-heading-xlarge-tablet
- $ouds-font-line-height-label-large
- $ouds-font-line-height-label-medium
- $ouds-font-line-height-label-small
- $ouds-font-line-height-label-xlarge
- $ouds-font-size-150
- $ouds-font-size-200
- $ouds-font-size-250
- $ouds-font-size-300
- $ouds-font-size-350
- $ouds-font-size-450
- $ouds-font-size-550
- $ouds-font-size-650
- $ouds-font-size-750
- $ouds-font-size-850
- $ouds-font-size-1050
- $ouds-font-size-1250
- $ouds-font-size-1450
- $ouds-font-size-1850
- $ouds-font-size-body-large-desktop
- $ouds-font-size-body-large-mobile
- $ouds-font-size-body-large-tablet
- $ouds-font-size-body-medium-desktop
- $ouds-font-size-body-medium-mobile
- $ouds-font-size-body-medium-tablet
- $ouds-font-size-body-small-desktop
- $ouds-font-size-body-small-mobile
- $ouds-font-size-body-small-tablet
- $ouds-font-size-code-medium
- $ouds-font-size-display-large-desktop
- $ouds-font-size-display-large-mobile
- $ouds-font-size-display-large-tablet
- $ouds-font-size-display-medium-desktop
- $ouds-font-size-display-medium-mobile
- $ouds-font-size-display-medium-tablet
- $ouds-font-size-display-small-desktop
- $ouds-font-size-display-small-mobile
- $ouds-font-size-display-small-tablet
- $ouds-font-size-heading-large-desktop
- $ouds-font-size-heading-large-mobile
- $ouds-font-size-heading-large-tablet
- $ouds-font-size-heading-medium-desktop
- $ouds-font-size-heading-medium-mobile
- $ouds-font-size-heading-medium-tablet
- $ouds-font-size-heading-small-desktop
- $ouds-font-size-heading-small-mobile
- $ouds-font-size-heading-small-tablet
- $ouds-font-size-heading-xlarge-desktop
- $ouds-font-size-heading-xlarge-mobile
- $ouds-font-size-heading-xlarge-tablet
- $ouds-font-size-label-large
- $ouds-font-size-label-medium
- $ouds-font-size-label-small
- $ouds-font-size-label-xlarge
- $ouds-font-weight-400
- $ouds-font-weight-700
- $ouds-font-weight-body-default
- $ouds-font-weight-body-strong
- $ouds-font-weight-code
- $ouds-font-weight-default
- $ouds-font-weight-display
- $ouds-font-weight-heading
- $ouds-font-weight-label-default
- $ouds-font-weight-label-strong
- $ouds-font-weight-strong
- $ouds-grid-2xl-column-gap
- $ouds-grid-2xl-margin
- $ouds-grid-2xl-max-width-alt
- $ouds-grid-2xl-min-width
- $ouds-grid-2xs-column-gap
- $ouds-grid-2xs-margin
- $ouds-grid-3xl-column-gap
- $ouds-grid-3xl-margin
- $ouds-grid-3xl-min-width
- $ouds-grid-column-gap-100
- $ouds-grid-column-gap-200
- $ouds-grid-column-gap-400
- $ouds-grid-column-gap-600
- $ouds-grid-column-gap-800
- $ouds-grid-lg-column-gap
- $ouds-grid-lg-margin
- $ouds-grid-lg-min-width
- $ouds-grid-margin-100
- $ouds-grid-margin-300
- $ouds-grid-margin-400
- $ouds-grid-margin-500
- $ouds-grid-margin-700
- $ouds-grid-margin-1100
- $ouds-grid-margin-1700
- $ouds-grid-margin-2500
- $ouds-grid-md-column-gap
- $ouds-grid-md-margin
- $ouds-grid-md-min-width
- $ouds-grid-min-width-200
- $ouds-grid-min-width-300
- $ouds-grid-min-width-400
- $ouds-grid-min-width-500
- $ouds-grid-min-width-600
- $ouds-grid-min-width-700
- $ouds-grid-min-width-800
- $ouds-grid-sm-column-gap
- $ouds-grid-sm-margin
- $ouds-grid-sm-min-width
- $ouds-grid-xl-column-gap
- $ouds-grid-xl-margin
- $ouds-grid-xl-min-width
- $ouds-grid-xs-column-gap
- $ouds-grid-xs-margin
- $ouds-grid-xs-min-width
- $ouds-opacity-0
- $ouds-opacity-40
- $ouds-opacity-160
- $ouds-opacity-320
- $ouds-opacity-640
- $ouds-opacity-1000
- $ouds-opacity-invisible
- $ouds-opacity-medium
- $ouds-opacity-opaque
- $ouds-opacity-strong
- $ouds-opacity-weak
- $ouds-opacity-weaker
- $ouds-size-icon-decorative-2xl
- $ouds-size-icon-decorative-2xs
- $ouds-size-icon-decorative-lg
- $ouds-size-icon-decorative-md
- $ouds-size-icon-decorative-sm
- $ouds-size-icon-decorative-xl
- $ouds-size-icon-decorative-xs
- $ouds-size-icon-with-body-large-size-lg-desktop
- $ouds-size-icon-with-body-large-size-lg-mobile
- $ouds-size-icon-with-body-large-size-lg-tablet
- $ouds-size-icon-with-body-large-size-md-desktop
- $ouds-size-icon-with-body-large-size-md-mobile
- $ouds-size-icon-with-body-large-size-md-tablet
- $ouds-size-icon-with-body-large-size-sm-desktop
- $ouds-size-icon-with-body-large-size-sm-mobile
- $ouds-size-icon-with-body-large-size-sm-tablet
- $ouds-size-icon-with-body-medium-size-lg-desktop
- $ouds-size-icon-with-body-medium-size-lg-mobile
- $ouds-size-icon-with-body-medium-size-lg-tablet
- $ouds-size-icon-with-body-medium-size-md-desktop
- $ouds-size-icon-with-body-medium-size-md-mobile
- $ouds-size-icon-with-body-medium-size-md-tablet
- $ouds-size-icon-with-body-medium-size-sm-desktop
- $ouds-size-icon-with-body-medium-size-sm-mobile
- $ouds-size-icon-with-body-medium-size-sm-tablet
- $ouds-size-icon-with-body-small-size-lg-desktop
- $ouds-size-icon-with-body-small-size-lg-mobile
- $ouds-size-icon-with-body-small-size-lg-tablet
- $ouds-size-icon-with-body-small-size-md-desktop
- $ouds-size-icon-with-body-small-size-md-mobile
- $ouds-size-icon-with-body-small-size-md-tablet
- $ouds-size-icon-with-body-small-size-sm-desktop
- $ouds-size-icon-with-body-small-size-sm-mobile
- $ouds-size-icon-with-body-small-size-sm-tablet
- $ouds-size-icon-with-heading-large-size-lg-desktop
- $ouds-size-icon-with-heading-large-size-lg-mobile
- $ouds-size-icon-with-heading-large-size-lg-tablet
- $ouds-size-icon-with-heading-large-size-md-desktop
- $ouds-size-icon-with-heading-large-size-md-mobile
- $ouds-size-icon-with-heading-large-size-md-tablet
- $ouds-size-icon-with-heading-large-size-sm-desktop
- $ouds-size-icon-with-heading-large-size-sm-mobile
- $ouds-size-icon-with-heading-large-size-sm-tablet
- $ouds-size-icon-with-heading-medium-size-lg-desktop
- $ouds-size-icon-with-heading-medium-size-lg-mobile
- $ouds-size-icon-with-heading-medium-size-lg-tablet
- $ouds-size-icon-with-heading-medium-size-md-desktop
- $ouds-size-icon-with-heading-medium-size-md-mobile
- $ouds-size-icon-with-heading-medium-size-md-tablet
- $ouds-size-icon-with-heading-medium-size-sm-desktop
- $ouds-size-icon-with-heading-medium-size-sm-mobile
- $ouds-size-icon-with-heading-medium-size-sm-tablet
- $ouds-size-icon-with-heading-small-size-lg-desktop
- $ouds-size-icon-with-heading-small-size-lg-mobile
- $ouds-size-icon-with-heading-small-size-lg-tablet
- $ouds-size-icon-with-heading-small-size-md-desktop
- $ouds-size-icon-with-heading-small-size-md-mobile
- $ouds-size-icon-with-heading-small-size-md-tablet
- $ouds-size-icon-with-heading-small-size-sm-desktop
- $ouds-size-icon-with-heading-small-size-sm-mobile
- $ouds-size-icon-with-heading-small-size-sm-tablet
- $ouds-size-icon-with-heading-xlarge-size-lg-desktop
- $ouds-size-icon-with-heading-xlarge-size-lg-mobile
- $ouds-size-icon-with-heading-xlarge-size-lg-tablet
- $ouds-size-icon-with-heading-xlarge-size-md-desktop
- $ouds-size-icon-with-heading-xlarge-size-md-mobile
- $ouds-size-icon-with-heading-xlarge-size-md-tablet
- $ouds-size-icon-with-heading-xlarge-size-sm-desktop
- $ouds-size-icon-with-heading-xlarge-size-sm-mobile
- $ouds-size-icon-with-heading-xlarge-size-sm-tablet
- $ouds-size-icon-with-label-large-size-lg
- $ouds-size-icon-with-label-large-size-md
- $ouds-size-icon-with-label-large-size-sm
- $ouds-size-icon-with-label-large-size-xl
- $ouds-size-icon-with-label-large-size-xs
- $ouds-size-icon-with-label-medium-size-lg
- $ouds-size-icon-with-label-medium-size-md
- $ouds-size-icon-with-label-medium-size-sm
- $ouds-size-icon-with-label-medium-size-xs
- $ouds-size-icon-with-label-small-size-lg
- $ouds-size-icon-with-label-small-size-md
- $ouds-size-icon-with-label-small-size-sm
- $ouds-size-icon-with-label-small-size-xs
- $ouds-size-icon-with-label-xlarge-size-lg
- $ouds-size-icon-with-label-xlarge-size-md
- $ouds-size-icon-with-label-xlarge-size-sm
- $ouds-size-max-width-type-body-large-desktop
- $ouds-size-max-width-type-body-large-mobile
- $ouds-size-max-width-type-body-large-tablet
- $ouds-size-max-width-type-body-medium-desktop
- $ouds-size-max-width-type-body-medium-mobile
- $ouds-size-max-width-type-body-medium-tablet
- $ouds-size-max-width-type-body-small-desktop
- $ouds-size-max-width-type-body-small-mobile
- $ouds-size-max-width-type-body-small-tablet
- $ouds-size-max-width-type-display-large-desktop
- $ouds-size-max-width-type-display-large-mobile
- $ouds-size-max-width-type-display-large-tablet
- $ouds-size-max-width-type-display-medium-desktop
- $ouds-size-max-width-type-display-medium-mobile
- $ouds-size-max-width-type-display-medium-tablet
- $ouds-size-max-width-type-display-small-desktop
- $ouds-size-max-width-type-display-small-mobile
- $ouds-size-max-width-type-display-small-tablet
- $ouds-size-max-width-type-heading-large-desktop
- $ouds-size-max-width-type-heading-large-mobile
- $ouds-size-max-width-type-heading-large-tablet
- $ouds-size-max-width-type-heading-medium-desktop
- $ouds-size-max-width-type-heading-medium-mobile
- $ouds-size-max-width-type-heading-medium-tablet
- $ouds-size-max-width-type-heading-small-desktop
- $ouds-size-max-width-type-heading-small-mobile
- $ouds-size-max-width-type-heading-small-tablet
- $ouds-size-max-width-type-heading-xlarge-desktop
- $ouds-size-max-width-type-heading-xlarge-mobile
- $ouds-size-max-width-type-heading-xlarge-tablet
- $ouds-space-fixed-huge
- $ouds-space-fixed-jumbo
- $ouds-space-fixed-medium
- $ouds-space-fixed-none
- $ouds-space-fixed-short
- $ouds-space-fixed-shorter
- $ouds-space-fixed-shortest
- $ouds-space-fixed-smash
- $ouds-space-fixed-spacious
- $ouds-space-fixed-tall
- $ouds-space-fixed-taller
- $ouds-space-fixed-tallest
- $ouds-space-scaled-medium-desktop
- $ouds-space-scaled-medium-mobile
- $ouds-space-scaled-medium-tablet
- $ouds-space-scaled-none-desktop
- $ouds-space-scaled-none-mobile
- $ouds-space-scaled-none-tablet
- $ouds-space-scaled-short-desktop
- $ouds-space-scaled-short-mobile
- $ouds-space-scaled-short-tablet
- $ouds-space-scaled-shorter-desktop
- $ouds-space-scaled-shorter-mobile
- $ouds-space-scaled-shorter-tablet
- $ouds-space-scaled-shortest-desktop
- $ouds-space-scaled-shortest-mobile
- $ouds-space-scaled-shortest-tablet
- $ouds-space-scaled-smash-desktop
- $ouds-space-scaled-smash-mobile
- $ouds-space-scaled-smash-tablet
- $ouds-space-scaled-spacious-desktop
- $ouds-space-scaled-spacious-mobile
- $ouds-space-scaled-spacious-tablet
- $ouds-space-scaled-tall-desktop
- $ouds-space-scaled-tall-mobile
- $ouds-space-scaled-tall-tablet
- $ouds-space-scaled-taller-desktop
- $ouds-space-scaled-taller-mobile
- $ouds-space-scaled-taller-tablet
- $ouds-space-scaled-tallest-desktop
- $ouds-space-scaled-tallest-mobile
- $ouds-space-scaled-tallest-tablet
New Sass variables containing CSS variable with value depending on theme:
- $ouds-color-action-disabled
- $ouds-color-action-enabled
- $ouds-color-action-focus
- $ouds-color-action-highlighted
- $ouds-color-action-hover
- $ouds-color-action-loading
- $ouds-color-action-negative-enabled
- $ouds-color-action-negative-focus
- $ouds-color-action-negative-hover
- $ouds-color-action-negative-loading
- $ouds-color-action-negative-pressed
- $ouds-color-action-pressed
- $ouds-color-action-selected
- $ouds-color-action-support-enabled
- $ouds-color-action-support-focus
- $ouds-color-action-support-hover
- $ouds-color-action-support-loading
- $ouds-color-action-support-pressed
- $ouds-color-action-visited
- $ouds-color-always-black
- $ouds-color-always-on-black
- $ouds-color-always-on-white
- $ouds-color-always-white
- $ouds-color-bg-emphasized
- $ouds-color-bg-primary
- $ouds-color-bg-secondary
- $ouds-color-bg-tertiary
- $ouds-color-border-brand-primary
- $ouds-color-border-default
- $ouds-color-border-emphasized
- $ouds-color-border-focus
- $ouds-color-border-focus-inset
- $ouds-color-border-on-brand-primary
- $ouds-color-content-brand-primary
- $ouds-color-content-default
- $ouds-color-content-disabled
- $ouds-color-content-muted
- $ouds-color-content-on-action-disabled
- $ouds-color-content-on-action-enabled
- $ouds-color-content-on-action-focus
- $ouds-color-content-on-action-highlighted
- $ouds-color-content-on-action-hover
- $ouds-color-content-on-action-loading
- $ouds-color-content-on-action-pressed
- $ouds-color-content-on-brand-primary
- $ouds-color-content-on-overlay-emphasized
- $ouds-color-content-on-status-emphasized
- $ouds-color-content-on-status-emphasized-alt
- $ouds-color-content-on-status-muted
- $ouds-color-content-status-info
- $ouds-color-content-status-negative
- $ouds-color-content-status-positive
- $ouds-color-content-status-warning
- $ouds-color-decorative-accent-1-default
- $ouds-color-decorative-accent-1-emphasized
- $ouds-color-decorative-accent-1-muted
- $ouds-color-decorative-accent-2-default
- $ouds-color-decorative-accent-2-emphasized
- $ouds-color-decorative-accent-2-muted
- $ouds-color-decorative-accent-3-default
- $ouds-color-decorative-accent-3-emphasized
- $ouds-color-decorative-accent-3-muted
- $ouds-color-decorative-accent-4-default
- $ouds-color-decorative-accent-4-emphasized
- $ouds-color-decorative-accent-4-muted
- $ouds-color-decorative-accent-5-default
- $ouds-color-decorative-accent-5-emphasized
- $ouds-color-decorative-accent-5-muted
- $ouds-color-decorative-brand-primary
- $ouds-color-decorative-brand-secondary
- $ouds-color-decorative-brand-tertiary
- $ouds-color-decorative-neutral-default
- $ouds-color-decorative-neutral-emphasized
- $ouds-color-decorative-neutral-muted
- $ouds-color-decorative-skin-tint-100
- $ouds-color-decorative-skin-tint-200
- $ouds-color-decorative-skin-tint-300
- $ouds-color-decorative-skin-tint-400
- $ouds-color-decorative-skin-tint-500
- $ouds-color-decorative-skin-tint-600
- $ouds-color-decorative-skin-tint-700
- $ouds-color-decorative-skin-tint-800
- $ouds-color-decorative-skin-tint-900
- $ouds-color-opacity-lower
- $ouds-color-opacity-lowest
- $ouds-color-opacity-transparent
- $ouds-color-overlay-default
- $ouds-color-overlay-drag
- $ouds-color-overlay-emphasized
- $ouds-color-overlay-modal
- $ouds-color-surface-brand-primary
- $ouds-color-surface-status-accent-emphasized
- $ouds-color-surface-status-accent-muted
- $ouds-color-surface-status-info-emphasized
- $ouds-color-surface-status-info-muted
- $ouds-color-surface-status-negative-emphasized
- $ouds-color-surface-status-negative-muted
- $ouds-color-surface-status-neutral-emphasized
- $ouds-color-surface-status-neutral-muted
- $ouds-color-surface-status-positive-emphasized
- $ouds-color-surface-status-positive-muted
- $ouds-color-surface-status-warning-emphasized
- $ouds-color-surface-status-warning-muted
- $ouds-elevation-color-default
- $ouds-elevation-color-drag
- $ouds-elevation-color-emphasized
- $ouds-elevation-color-none
- $ouds-elevation-color-raised
- $ouds-elevation-color-sticky-default
- $ouds-elevation-color-sticky-emphasized
- $ouds-elevation-color-sticky-navigation-scrolled
New Sass maps:
- $container-fluid-margin
- $container-max-widths
- $grid-breakpoints
- $grid-gutter-widths
- $gutters
- $ouds-backgrounds
- $ouds-border-colors
- $ouds-border-radiuses
- $ouds-border-styles
- $ouds-border-widths
- $ouds-dimension-negative-space-fixed
- $ouds-dimension-negative-space-scaled
- $ouds-dimension-space-fixed
- $ouds-dimension-space-scaled
- $ouds-elevations
- $ouds-font-sizes
- $ouds-font-weights
- $ouds-icon-sizes
- $ouds-text-colors
New Sass mixins:
- breakpoint-infix()
- breakpoint-min()
- breakpoint-max()
- breakpoint-next()
- color-mode()
- get-font-size()
- make-container()
- make-col()
- make-col-offset()
- make-col-ready()
- make-row()
- media-breakpoint-between()
- media-breakpoint-down()
- media-breakpoint-only()
- media-breakpoint-up()
New Keys in $utilities map:
- border-bottom-ouds
- border-color-ouds
- border-end-ouds
- border-ouds
- border-start-ouds
- border-style-ouds
- border-top-ouds
- border-width-ouds
- color-ouds
- column-gap-ouds
- column-gap-scaled-ouds
- font-size-ouds
- font-weight-ouds
- gap-ouds
- gap-scaled-ouds
- margin-bottom-ouds
- margin-bottom-scaled-ouds
- margin-end-ouds
- margin-end-scaled-ouds
- margin-ouds
- margin-scaled-ouds
- margin-start-ouds
- margin-start-scaled-ouds
- margin-top-ouds
- margin-top-scaled-ouds
- margin-x-ouds
- margin-x-scaled-ouds
- margin-y-ouds
- margin-y-scaled-ouds
- negative-margin-bottom-ouds
- negative-margin-bottom-scaled-ouds
- negative-margin-end-ouds
- negative-margin-end-scaled-ouds
- negative-margin-ouds
- negative-margin-scaled-ouds
- negative-margin-start-ouds
- negative-margin-start-scaled-ouds
- negative-margin-top-ouds
- negative-margin-top-scaled-ouds
- negative-margin-x-ouds
- negative-margin-x-scaled-ouds
- negative-margin-y-ouds
- negative-margin-y-scaled-ouds
- padding-bottom-ouds
- padding-bottom-scaled-ouds
- padding-end-ouds
- padding-end-scaled-ouds
- padding-ouds
- padding-scaled-ouds
- padding-start-ouds
- padding-start-scaled-ouds
- padding-top-ouds
- padding-top-scaled-ouds
- padding-x-ouds
- padding-x-scaled-ouds
- padding-y-ouds
- padding-y-scaled-ouds
- rounded-bottom-ouds
- rounded-end-ouds
- rounded-ouds
- rounded-start-ouds
- rounded-top-ouds
- row-gap-ouds
- row-gap-scaled-ouds
- shadow-ouds
New CSS variables:
- --bs-body-letter-spacing
- --bs-color-action-disabled
- --bs-color-action-enabled
- --bs-color-action-focus
- --bs-color-action-highlighted
- --bs-color-action-hover
- --bs-color-action-loading
- --bs-color-action-negative-enabled
- --bs-color-action-negative-focus
- --bs-color-action-negative-hover
- --bs-color-action-negative-loading
- --bs-color-action-negative-pressed
- --bs-color-action-pressed
- --bs-color-action-selected
- --bs-color-action-support-enabled
- --bs-color-action-support-focus
- --bs-color-action-support-hover
- --bs-color-action-support-loading
- --bs-color-action-support-pressed
- --bs-color-action-visited
- --bs-color-always-black
- --bs-color-always-on-black
- --bs-color-always-on-white
- --bs-color-always-white
- --bs-color-bg-emphasized
- --bs-color-bg-primary
- --bs-color-bg-secondary
- --bs-color-bg-tertiary
- --bs-color-border-brand-primary
- --bs-color-border-default
- --bs-color-border-emphasized
- --bs-color-border-focus
- --bs-color-border-focus-inset
- --bs-color-border-on-brand-primary
- --bs-color-content-brand-primary
- --bs-color-content-default
- --bs-color-content-disabled
- --bs-color-content-muted
- --bs-color-content-on-action-disabled
- --bs-color-content-on-action-enabled
- --bs-color-content-on-action-focus
- --bs-color-content-on-action-highlighted
- --bs-color-content-on-action-hover
- --bs-color-content-on-action-loading
- --bs-color-content-on-action-pressed
- --bs-color-content-on-brand-primary
- --bs-color-content-on-overlay-emphasized
- --bs-color-content-on-status-emphasized
- --bs-color-content-on-status-emphasized-alt
- --bs-color-content-on-status-muted
- --bs-color-content-status-info
- --bs-color-content-status-negative
- --bs-color-content-status-positive
- --bs-color-content-status-warning
- --bs-color-decorative-accent-1-default
- --bs-color-decorative-accent-1-emphasized
- --bs-color-decorative-accent-1-muted
- --bs-color-decorative-accent-2-default
- --bs-color-decorative-accent-2-emphasized
- --bs-color-decorative-accent-2-muted
- --bs-color-decorative-accent-3-default
- --bs-color-decorative-accent-3-emphasized
- --bs-color-decorative-accent-3-muted
- --bs-color-decorative-accent-4-default
- --bs-color-decorative-accent-4-emphasized
- --bs-color-decorative-accent-4-muted
- --bs-color-decorative-accent-5-default
- --bs-color-decorative-accent-5-emphasized
- --bs-color-decorative-accent-5-muted
- --bs-color-decorative-brand-primary
- --bs-color-decorative-brand-secondary
- --bs-color-decorative-brand-tertiary
- --bs-color-decorative-neutral-default
- --bs-color-decorative-neutral-emphasized
- --bs-color-decorative-neutral-muted
- --bs-color-decorative-skin-tint-100
- --bs-color-decorative-skin-tint-200
- --bs-color-decorative-skin-tint-300
- --bs-color-decorative-skin-tint-400
- --bs-color-decorative-skin-tint-500
- --bs-color-decorative-skin-tint-600
- --bs-color-decorative-skin-tint-700
- --bs-color-decorative-skin-tint-800
- --bs-color-decorative-skin-tint-900
- --bs-color-opacity-lower
- --bs-color-opacity-lowest
- --bs-color-opacity-transparent
- --bs-color-overlay-default
- --bs-color-overlay-drag
- --bs-color-overlay-emphasized
- --bs-color-overlay-modal
- --bs-color-surface-brand-primary
- --bs-color-surface-status-accent-emphasized
- --bs-color-surface-status-accent-muted
- --bs-color-surface-status-info-emphasized
- --bs-color-surface-status-info-muted
- --bs-color-surface-status-negative-emphasized
- --bs-color-surface-status-negative-muted
- --bs-color-surface-status-neutral-emphasized
- --bs-color-surface-status-neutral-muted
- --bs-color-surface-status-positive-emphasized
- --bs-color-surface-status-positive-muted
- --bs-color-surface-status-warning-emphasized
- --bs-color-surface-status-warning-muted
- --bs-container-margin-x
- --bs-elevation-color-default
- --bs-elevation-color-drag
- --bs-elevation-color-emphasized
- --bs-elevation-color-none
- --bs-elevation-color-raised
- --bs-elevation-color-sticky-default
- --bs-elevation-color-sticky-emphasized
- --bs-elevation-color-sticky-navigation-scrolled
- --bs-font-size-display-large
- --bs-font-size-display-medium
- --bs-font-size-display-small
- --bs-font-size-heading-xlarge
- --bs-font-size-heading-large
- --bs-font-size-heading-medium
- --bs-font-size-heading-small
- --bs-font-size-body-large
- --bs-font-size-body-medium
- --bs-font-size-body-small
- --bs-font-size-label-xlarge
- --bs-font-size-label-large
- --bs-font-size-label-medium
- --bs-font-size-label-small
- --bs-font-size-code-medium
- --bs-font-line-height-display-large
- --bs-font-line-height-display-medium
- --bs-font-line-height-display-small
- --bs-font-line-height-heading-xlarge
- --bs-font-line-height-heading-large
- --bs-font-line-height-heading-medium
- --bs-font-line-height-heading-small
- --bs-font-line-height-body-large
- --bs-font-line-height-body-medium
- --bs-font-line-height-body-small
- --bs-font-line-height-label-xlarge
- --bs-font-line-height-label-large
- --bs-font-line-height-label-medium
- --bs-font-line-height-label-small
- --bs-font-line-height-code-medium
- --bs-font-letter-spacing-display-large
- --bs-font-letter-spacing-display-medium
- --bs-font-letter-spacing-display-small
- --bs-font-letter-spacing-heading-xlarge
- --bs-font-letter-spacing-heading-large
- --bs-font-letter-spacing-heading-medium
- --bs-font-letter-spacing-heading-small
- --bs-font-letter-spacing-body-large
- --bs-font-letter-spacing-body-medium
- --bs-font-letter-spacing-body-small
- --bs-font-letter-spacing-label-xlarge
- --bs-font-letter-spacing-label-large
- --bs-font-letter-spacing-label-medium
- --bs-font-letter-spacing-label-small
- --bs-font-letter-spacing-code-medium
- --bs-font-max-width-display-large
- --bs-font-max-width-display-medium
- --bs-font-max-width-display-small
- --bs-font-max-width-heading-xlarge
- --bs-font-max-width-heading-large
- --bs-font-max-width-heading-medium
- --bs-font-max-width-heading-small
- --bs-font-max-width-body-large
- --bs-font-max-width-body-medium
- --bs-font-max-width-body-small
- --bs-icon-lg-with-body-large
- --bs-icon-lg-with-body-medium
- --bs-icon-lg-with-body-small
- --bs-icon-lg-with-heading-large
- --bs-icon-lg-with-heading-medium
- --bs-icon-lg-with-heading-small
- --bs-icon-lg-with-heading-xlarge
- --bs-icon-md-with-body-large
- --bs-icon-md-with-body-medium
- --bs-icon-md-with-body-small
- --bs-icon-md-with-heading-large
- --bs-icon-md-with-heading-medium
- --bs-icon-md-with-heading-small
- --bs-icon-md-with-heading-xlarge
- --bs-icon-sm-with-body-large
- --bs-icon-sm-with-body-medium
- --bs-icon-sm-with-body-small
- --bs-icon-sm-with-heading-large
- --bs-icon-sm-with-heading-medium
- --bs-icon-sm-with-heading-small
- --bs-icon-sm-with-heading-xlarge
- --bs-space-scaled-medium
- --bs-space-scaled-none
- --bs-space-scaled-short
- --bs-space-scaled-shorter
- --bs-space-scaled-shortest
- --bs-space-scaled-smash
- --bs-space-scaled-spacious
- --bs-space-scaled-tall
- --bs-space-scaled-taller
- --bs-space-scaled-tallest
Warning Dropped Sass variables:
- $ouds-opacity-100
- $ouds-opacity-300
- $ouds-opacity-500
- $ouds-opacity-700
- $ouds-opacity-900

Sass mixins

New The mixin get-font-size({font-size-ref}) has been added, where font-size-ref is one of: "code-medium", "label-small", "label-medium", "label-large", "label-xlarge", "body-small", "body-medium", "body-large", "heading-small", "heading-medium", "heading-large", "heading-xlarge", "display-small", "display-medium", "display-large". If you have/need any font-size in one of your SCSS classes, please consider using this mixin instead. See Typography Sass mixins for more details.
New color-mode({mode}, {root}, {inverted-mode}) mixin.

v0.0.3

Pre-compiled versions

From now on, by default, OUDS Web won’t embed Bootstrap elements (like helpers, utilities, variables, components variants, etc.) that do not comply with Orange Unified Design System. However, you can still use our Bootstrap compatibility mode by using ouds-web-bootstrap.css and ouds-web-bootstrap.min.css. Learn more about Bootstrap compatibility.

Utilities

Opacity

New Opacity utilities: .opacity-transparent, .opacity-weaker, .opacity-weak, .opacity-medium, .opacity-emphasis and .opacity-opaque.

CSS and Sass variables

New $enable-bootstrap-compatibility option set to false by default. This option allows you to compile the Sass files with a Bootstrap compatibility mode.
- For instance, without the Bootstrap compatibility mode, you won’t have the opacity Bootstrap utilities such as .opacity-0, .opacity-1, .opacity-50, etc. You will only have the OUDS Web utilities such as .opacity-invisible, .opacity-weaker, .opacity-weak, etc. Learn more about Bootstrap compatibility.

New OUDS Web fully implements the design tokens. If you were using the Sass compilation, you must import the new Sass files before the variables.

See the new import stack

  @import "functions";
+ @import "tokens/raw";
+ @import "tokens/semantic";
+ @import "tokens/component";
  @import "variables";
  @import "variables-dark";
  // etc

New Sass variables:
- $ouds-opacity-0
- $ouds-opacity-100
- $ouds-opacity-300
- $ouds-opacity-500
- $ouds-opacity-700
- $ouds-opacity-900
New Sass maps:
- $ouds-opacities
New Keys in $utilities map:
- opacity-ouds
Breaking Keys in $utilities map only available when $enable-bootstrap-compatibility is on:
- opacity

v0.0.1

OUDS Web v0.0.1 has landed, and is based and compatible with Bootstrap v5.3.3.

If you need more details about the changes, please refer to the v0.0.1 release.

v0.0.0

OUDS Web v0.0.0 has landed, and is based and compatible with Bootstrap v5.3.3.

Migrating to recent versions

On this page On this page

v0.2.0

Components

Buttons

Examples

CSS and Sass variables

v0.1.0

Foundations

Color modes

Content styles

Default styles

Typography

Layout

Helpers

Color background

Icon

Position

Utilities

API

Background

Border

Colors

Display

Flex

Float

Object fit

Opacity

Shadow

Sizing

Spacings

Text

Examples

CSS and Sass variables

Sass mixins

v0.0.3

Pre-compiled versions

Utilities

Opacity

CSS and Sass variables

v0.0.1

v0.0.0

On this page