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

Forms

Checkboxes

New Checkbox component has been implemented.

Radio buttons

New Radio button component has been implemented.

Switches

New Switch component has been implemented.

Helpers

Dividers

New Horizontal and vertical rule helpers to create dividers.

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 "tokens/semantic-colors-custom-props";
  @import "tokens/composite";
+ @import "tokens/component-colors-custom-props";
  @import "tokens/component";
```
New Sass variables:
- $ouds-font-family-body
- $ouds-font-family-code
- $ouds-font-family-display
- $ouds-font-family-heading
- $ouds-font-family-label
- $ouds-font-family-system-web
- $ouds-font-weight-system-default
- $ouds-font-weight-system-strong
Breaking Removed Sass variables:
- $ouds-font-family
- $ouds-font-weight-default
- $ouds-font-weight-strong

v0.3.0

Content styles

Reboot

New Default link styles has been updated.

Components

Helpers

Icon link

Breaking Colors links are unstyled in OUDS Web, the documentation is only kept for Bootstrap compatibility.
Warning The icon link documentation has been merged into is the new Link component documentation and removed from helpers section.

Utilities

Border

New Border color: .border-muted.

Link

Breaking Link utilities are no more used in OUDS Web and the following classes have been removed: .link-opacity-{number}, .link-offset-{number}, .link-underline-{number}, .link-underline-opacity-{number}

CSS and Sass variables

New Sass variables:
- $ouds-color-border-muted-dark
- $ouds-color-border-muted-light
- $ouds-link-color-arrow-enabled
- $ouds-link-color-arrow-focus
- $ouds-link-color-arrow-hover
- $ouds-link-color-arrow-pressed
- $ouds-link-color-content-disabled-mono
- $ouds-link-color-content-enabled-mono
- $ouds-link-color-content-enabled
- $ouds-link-color-content-focus-mono
- $ouds-link-color-content-focus
- $ouds-link-color-content-hover-mono
- $ouds-link-color-content-hover
- $ouds-link-color-content-pressed-mono
- $ouds-link-color-content-pressed
- $ouds-link-size-icon-medium
- $ouds-link-size-icon-small
- $ouds-link-size-min-height-medium
- $ouds-link-size-min-height-small
- $ouds-link-size-min-width-medium
- $ouds-link-size-min-width-small
- $ouds-link-space-column-gap-arrow-medium
- $ouds-link-space-column-gap-arrow-small
- $ouds-link-space-column-gap-icon-medium
- $ouds-link-space-column-gap-icon-small
- $ouds-link-space-padding-block
- $ouds-link-space-padding-inline
New Sass variables containing CSS variable with value depending on theme:
- $ouds-color-border-muted
New CSS variables:
- --bs-color-border-muted

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

Forms

Checkboxes

Radio buttons

Switches

Helpers

Dividers

CSS and Sass variables

v0.3.0

Content styles

Reboot

Components

Links

Helpers

Icon link

Utilities

Border

Link

CSS and Sass variables

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