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.5.0Link to this section: v0.5.0

FormsLink to this section: Forms

Checkboxes, radio buttons, switchesLink to this section: Checkboxes, radio buttons, switches

New Read only state has been implemented.

ComponentsLink to this section: Components

BadgeLink to this section: Badge

New Badge component has been implemented.

New Breadcrumb component has been implemented.

Bullet listLink to this section: Bullet list

New Bullet list component has been implemented.

ExtendLink to this section: Extend

IconsLink to this section: Icons

New Icons’ sizes for decorative standalone icons have been added: .decorative-4xs-icon, decorative-3xs-icon.

UtilitiesLink to this section: Utilities

BorderLink to this section: Border

Breaking Border radius utilities sizes short and tall have been renamed to small and large respectively.
- Short: .rounded-small, .rounded-top-small, .rounded-bottom-small, .rounded-start-small and .rounded-end-small, for example .rounded-short → .rounded-small.
- Tall: .rounded-large, .rounded-top-large, .rounded-bottom-large, .rounded-start-large and .rounded-end-large, for example .rounded-tall → .rounded-large.

ColorsLink to this section: Colors

New Color utilities for text on status colors have been added:
- Accent: .text-on-status-accent-emphasized, .text-on-status-accent-muted
- Info: .text-on-status-info-emphasized, .text-on-status-info-muted
- Negative: .text-on-status-negative-emphasized, .text-on-status-negative-muted
- Neutral: .text-on-status-neutral-emphasized, .text-on-status-neutral-muted
- Positive: .text-on-status-positive-emphasized, .text-on-status-positive-muted
- Warning: .text-on-status-warning-emphasized, .text-on-status-warning-muted
Breaking Generic Color utilities for status background have been removed: .text-on-status-emphasized, .text-on-status-emphasized-alt, .text-on-status-muted. You should use the new color utilities related to the background or directly use our color & background helpers

SpacingsLink to this section: Spacings

Breaking Spacing utilities (padding, margin, gap, ...) sizes have been renamed as follows:
- Smash is renamed to 3xs : for example .m-smash → .m-3xs
- Shortest is renamed to 2xs : for example .m-shortest → .m-2xs
- Shorter is renamed to xs : for example .m-shorter → .m-xs
- Short is renamed to sm : for example .m-short → .m-sm
- Medium is renamed to md : for example .m-medium → .m-md
- Tall is renamed to lg : for example .m-tall → .m-lg
- Taller is renamed to xl : for example .m-taller → .m-xl
- Tallest is renamed to 2xl : for example .m-tallest → .m-2xl
- Spacious is renamed to 3xl : for example .m-spacious → .m-3xl
- Huge is renamed to 4xl : for example .m-huge → .m-4xl
- Jumbo is renamed to 5xl : for example .m-jumbo → .m-5xl
- Negative these changes apply to negative spacings as well, for example .m-nsmash → .m-n3xs

CSS and Sass variablesLink to this section: CSS and Sass variables

Breaking Some design tokens prefix have been changed to follow the new naming convention.
- Core Raw Tokens (in file raw.scss) are now prefixed with core-ouds instead of ouds.
- Orange Raw Tokens (in file raw.scss) are now prefixed with core-orange instead of ouds.
Breaking A parameter from the focus-visible() mixin has been removed. If you use the focus-visible() mixin in your scss files with a z-index as a parameter, please adapt your code.

v0.4.0Link to this section: v0.4.0

FormsLink to this section: Forms

CheckboxesLink to this section: Checkboxes

New Checkbox component has been implemented.

Radio buttonsLink to this section: Radio buttons

New Radio button component has been implemented.

SwitchesLink to this section: Switches

New Switch component has been implemented.

HelpersLink to this section: Helpers

DividerLink to this section: Divider

New Horizontal and vertical rule helpers to create dividers.

CSS and Sass variablesLink to this section: 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.0Link to this section: v0.3.0

Content stylesLink to this section: Content styles

RebootLink to this section: Reboot

New Default link styles has been updated.

ComponentsLink to this section: Components

LinksLink to this section: Links

New Link component has been implemented.

HelpersLink to this section: Helpers

Icon linkLink to this section: 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.

UtilitiesLink to this section: Utilities

BorderLink to this section: Border

New Border color: .border-muted.

LinkLink to this section: 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 variablesLink to this section: 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.0Link to this section: v0.2.0

ComponentsLink to this section: Components

ButtonsLink to this section: Buttons

New Button component has been implemented.

ExamplesLink to this section: Examples

New New Loading buttons live example.

CSS and Sass variablesLink to this section: 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.0Link to this section: v0.1.0

FoundationsLink to this section: 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 modesLink to this section: 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 stylesLink to this section: Content styles

Default stylesLink to this section: 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

TypographyLink to this section: 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

LayoutLink to this section: 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}.

HelpersLink to this section: Helpers

Color backgroundLink to this section: Color background

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

IconLink to this section: 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

PositionLink to this section: 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.

UtilitiesLink to this section: Utilities

APILink to this section: API

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

BackgroundLink to this section: Background

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

BorderLink to this section: 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.

ColorsLink to this section: Colors

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

DisplayLink to this section: 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.

FlexLink to this section: 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}.

FloatLink to this section: 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 fitLink to this section: 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.

OpacityLink to this section: Opacity

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

ShadowLink to this section: 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.

SizingLink to this section: 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.

SpacingsLink to this section: 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

TextLink to this section: 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.

ExamplesLink to this section: Examples

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

CSS and Sass variablesLink to this section: 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 mixinsLink to this section: 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.3Link to this section: v0.0.3

Pre-compiled versionsLink to this section: 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.

UtilitiesLink to this section: Utilities

OpacityLink to this section: Opacity

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

CSS and Sass variablesLink to this section: 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.1Link to this section: 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.0Link to this section: 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.5.0Link to this section: v0.5.0

FormsLink to this section: Forms

Checkboxes, radio buttons, switchesLink to this section: Checkboxes, radio buttons, switches

ComponentsLink to this section: Components

BadgeLink to this section: Badge

BreadcrumbLink to this section: Breadcrumb

Bullet listLink to this section: Bullet list

ExtendLink to this section: Extend

IconsLink to this section: Icons

UtilitiesLink to this section: Utilities

BorderLink to this section: Border

ColorsLink to this section: Colors

SpacingsLink to this section: Spacings

CSS and Sass variablesLink to this section: CSS and Sass variables

v0.4.0Link to this section: v0.4.0

FormsLink to this section: Forms

CheckboxesLink to this section: Checkboxes

Radio buttonsLink to this section: Radio buttons

SwitchesLink to this section: Switches

HelpersLink to this section: Helpers

DividerLink to this section: Divider

CSS and Sass variablesLink to this section: CSS and Sass variables

v0.3.0Link to this section: v0.3.0

Content stylesLink to this section: Content styles

RebootLink to this section: Reboot

ComponentsLink to this section: Components

LinksLink to this section: Links

HelpersLink to this section: Helpers

Icon linkLink to this section: Icon link

UtilitiesLink to this section: Utilities

BorderLink to this section: Border

LinkLink to this section: Link

CSS and Sass variablesLink to this section: CSS and Sass variables

v0.2.0Link to this section: v0.2.0

ComponentsLink to this section: Components

ButtonsLink to this section: Buttons

ExamplesLink to this section: Examples

CSS and Sass variablesLink to this section: CSS and Sass variables

v0.1.0Link to this section: v0.1.0

FoundationsLink to this section: Foundations

Color modesLink to this section: Color modes

Content stylesLink to this section: Content styles

Default stylesLink to this section: Default styles

TypographyLink to this section: Typography

LayoutLink to this section: Layout

HelpersLink to this section: Helpers

Color backgroundLink to this section: Color background

IconLink to this section: Icon

PositionLink to this section: Position

UtilitiesLink to this section: Utilities

APILink to this section: API

BackgroundLink to this section: Background

BorderLink to this section: Border

ColorsLink to this section: Colors

DisplayLink to this section: Display

FlexLink to this section: Flex

FloatLink to this section: Float

Object fitLink to this section: Object fit

OpacityLink to this section: Opacity

ShadowLink to this section: Shadow

SizingLink to this section: Sizing

SpacingsLink to this section: Spacings

TextLink to this section: Text

ExamplesLink to this section: Examples

CSS and Sass variablesLink to this section: CSS and Sass variables

Sass mixinsLink to this section: Sass mixins

v0.0.3Link to this section: v0.0.3

Pre-compiled versionsLink to this section: Pre-compiled versions

UtilitiesLink to this section: Utilities

OpacityLink to this section: Opacity

CSS and Sass variablesLink to this section: CSS and Sass variables

v0.0.1Link to this section: v0.0.1

v0.0.0Link to this section: v0.0.0

On this page