Migrating to recent versions

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

v1.5.0 Full changelog

Components

Badges

Breaking .badge-disabled has been removed in favor of .disabled after being deprecated in v1.4.0. Read more in our badges page.

Info Breadcrumb component has been updated to 1.2.0 with no outward changes. Read more in the breadcrumb design changelog.

Buttons

New Assistant button has been implemented. Read more in our buttons page.
New .btn-small has been added. Read more in our buttons page.
Info Button component has been updated to 3.3.0 with no outward changes. Read more in the button design changelog.
Info Navigation button component has been updated to 3.3.0 with no outward changes. Read more in the button design changelog.

Chips

Info Suggestion chip component has been updated to 1.5.0 with no outward changes. Read more in the suggestion chip design changelog.
Info Filter chip component has been updated to 1.5.0 with no outward changes. Read more in the filter chip design changelog.

Info The design of the footer component (draft) has been updated to use OUDS Web variables for the background and text colors. Colors have also been updated to match the header colors. It requires no outward changes, but you may need to update your custom styles if you were overriding the footer colors.

Info The design of the header component (draft) has been updated to use OUDS Web variables for the background and text colors. Colors have also been updated to improve accessibility in light mode. It requires no outward changes, but you may need to update your custom styles if you were overriding the header colors.

Items

New Items (Static card item, static list item, navigation card item and navigation list item) have been implemented. Read more in our items page.

Table

Info Colors have been updated to use OUDS Web variables. It requires no outward changes, but you may need to update your custom styles if you were overriding the table colors.

Utilities

Interactions

Breaking .pe-none and .pe-auto classes have been replaced by .pointer-events-none and .pointer-events-auto to avoid collision with padding utilities. Read more in our interactions page.

Shadow

Breaking .shadow-default has been removed in favor of .shadow-elevated after being deprecated in v1.4.0. Read more in our shadow page.

Sass mixins

Info The list-unstyled mixin has been updated to remove the margin bottom.

v1.4.0 Full changelog

Foundations

Breaking jQuery support has been removed from the library.

Components

Badges

Warning .badge-disabled has been deprecated in favor of .disabled. It will be removed in v1.5.0. Read more in our badges page.
Info Badge - icon component has been updated to 1.3.0. Read more in the badge - icon design changelog.

Chips

Warning All our chips now use an inline-flex display instead of flex and it might break your design depending on your implementation. Please take a look at your implementation to fix it if needed.
Info Suggestion chip component has been updated to 1.4.0 with no outward changes. Read more in the suggestion chip design changelog.
Info Filter chip component has been updated to 1.4.0 with no outward changes. Read more in the filter chip design changelog.

Password input

Info Password input component has been updated to 1.3.0 with no outward changes. Read more in the password input design changelog.

Text area

Info Text area component has been updated to 1.2.0, it now has a floating label like text input. Read more in the text area design changelog.
Breaking The [placeholder] attribute is now mandatory for text area component. Read more in our text area page.
New .text-area-no-resize class has been added to disable the resizing feature on the text area. Read more in our text area page.

Text input

Info Text input component has been updated to 1.4.0 with no outward changes. Read more in the design changelog.

Utilities

Shadow

Warning .shadow-default has been deprecated in favor of .shadow-elevated. It will be removed in v1.5.0. Read more in our shadow page.

Text

New Labels have been added to font size text utilities : .fs-lxl, .fs-ll, .fs-lm, .fs-ls are now available. Read more in our typography page.

CSS and Sass variables

Warning Some variables have been renamed:
- $ouds-elevation-default → $ouds-elevation-elevated
- $ouds-elevation-x-default → $ouds-elevation-x-elevated
- $ouds-elevation-y-default → $ouds-elevation-y-elevated
- $ouds-elevation-blur-default → $ouds-elevation-blur-elevated
- $ouds-elevation-spread-default → $ouds-elevation-spread-elevated
- $ouds-control-item-size-min-height → $ouds-control-item-size-min-height-default
- $ouds-size-max-width-type-body-large-desktop → $ouds-size-max-width-body-large-desktop
- $ouds-size-max-width-type-body-large-mobile → $ouds-size-max-width-body-large-desktop
- $ouds-size-max-width-type-body-large-tablet → $ouds-size-max-width-body-large-desktop
- $ouds-size-max-width-type-body-medium-desktop → $ouds-size-max-width-body-large-desktop
- $ouds-size-max-width-type-body-medium-mobile → $ouds-size-max-width-body-large-desktop
- $ouds-size-max-width-type-body-medium-tablet → $ouds-size-max-width-body-large-desktop
- $ouds-size-max-width-type-body-small-desktop → $ouds-size-max-width-body-large-desktop
- $ouds-size-max-width-type-body-small-mobile → $ouds-size-max-width-body-large-desktop
- $ouds-size-max-width-type-body-small-tablet → $ouds-size-max-width-body-large-desktop
- $ouds-size-max-width-type-display-large-desktop → $ouds-size-max-width-display-large-desktop
- $ouds-size-max-width-type-display-large-mobile → $ouds-size-max-width-display-large-mobile
- $ouds-size-max-width-type-display-large-tablet → $ouds-size-max-width-display-large-tablet
- $ouds-size-max-width-type-display-medium-desktop → $ouds-size-max-width-display-medium-desktop
- $ouds-size-max-width-type-display-medium-mobile → $ouds-size-max-width-display-medium-mobile
- $ouds-size-max-width-type-display-medium-tablet → $ouds-size-max-width-display-medium-tablet
- $ouds-size-max-width-type-display-small-desktop → $ouds-size-max-width-display-small-desktop
- $ouds-size-max-width-type-display-small-mobile → $ouds-size-max-width-display-small-mobile
- $ouds-size-max-width-type-display-small-tablet → $ouds-size-max-width-display-small-tablet
- $ouds-size-max-width-type-heading-large-desktop → $ouds-size-max-width-heading-large-desktop
- $ouds-size-max-width-type-heading-large-mobile → $ouds-size-max-width-heading-large-mobile
- $ouds-size-max-width-type-heading-large-tablet → $ouds-size-max-width-heading-large-tablet
- $ouds-size-max-width-type-heading-medium-desktop → $ouds-size-max-width-heading-medium-desktop
- $ouds-size-max-width-type-heading-medium-mobile → $ouds-size-max-width-heading-medium-mobile
- $ouds-size-max-width-type-heading-medium-tablet → $ouds-size-max-width-heading-medium-tablet
- $ouds-size-max-width-type-heading-small-desktop → $ouds-size-max-width-heading-small-desktop
- $ouds-size-max-width-type-heading-small-mobile → $ouds-size-max-width-heading-small-mobile
- $ouds-size-max-width-type-heading-small-tablet → $ouds-size-max-width-heading-small-tablet
- $ouds-size-max-width-type-heading-xlarge-desktop → $ouds-size-max-width-heading-xlarge-desktop
- $ouds-size-max-width-type-heading-xlarge-mobile → $ouds-size-max-width-heading-xlarge-mobile
- $ouds-size-max-width-type-heading-xlarge-tablet → $ouds-size-max-width-heading-xlarge-tablet
- $ouds-control-item-space-padding-block-top-error-text → $ouds-control-item-space-padding-block-top-helper-text
- $ouds-control-item-border-radius → $ouds-control-item-border-radius-default
- $ouds-badge-space-inset → $ouds-badge-space-inset-medium-large

v1.3.0 Full changelog

Components

Table

Warning OUDS Web now supports a draft table component. It comes from Boosted directly with small tweaks. It is intended as a placeholder for projects that need it urgently but be aware that it will change in the future. Read more in our table page.

Tools

New We have created a new CLI tool to update your project files automatically. Read more in our CLI tool readme.

Utilities

Breakpoint prefixes

Breaking Responsive utilities now use a breakpoint prefix instead of an infix. All classes that previously used .{utility}-{breakpoint}-{value} must be updated to .{breakpoint}:{utility}-{value}. Following are some examples of the changes to apply:
- .d-sm-none → .sm:d-none
- .d-md-flex → .md:d-flex
- .flex-lg-row → .lg:flex-row
- .col-md-6 → .md:col-6
- .float-xl-end → .xl:float-end
- .object-fit-2xl-cover → .2xl:object-fit-cover
Read more in our display, flex or spacing pages.

CSS and Sass variables

Warning scss/vendor/_rfs.scss has been removed. It was deprecated and should not have been used.
Warning font-size() mixin has been removed. Please refer to get-font-size() mixin instead.
Breaking generate-utility() mixin signature was modified, and the $is-rfs-media-query parameter was removed. If you were using it, please make sure to update your code. For Bootstrap compatibility mode, the breakpoint is still the trailing parameter of generate-utility(), which lets you keep using the infix form for your custom utilities. You can check how we use it in scss/utilities/_breakpoints.scss for reference.

Dual mode

Change the @include rfs($font-size-base, --#{$prefix}body-font-size); into --#{$prefix}body-font-size: #{$font-size-base};.

v1.2.0 Full changelog

Components

Chips

Warning Since filter and suggestion chips can be used inside forms, the chips buttons should have the type="button" attribute. We have added this to our examples. Read more in our chips page.

Warning OUDS Web now supports a draft footer component. It comes from Boosted directly with small tweaks. It is intended as a placeholder for projects that need it urgently but be aware that it will change in the future. Read more in our footer page.

Header

Warning OUDS Web now supports a draft header component. It comes from Boosted directly with small tweaks. It is intended as a placeholder for projects that need it urgently but be aware that it will change in the future. Read more in our header page.

New Navigation button has been implemented. Read more in our buttons page.

Password input

Warning Since password inputs are usually used inside forms, the "show password" button should have the type="button" attribute. We have added this to our examples. Read more in our password input page.
New A new live example about how to handle show/hide password buttons has been added. Read more in our password input page.

Skeleton

New Skeleton component has been implemented. Read more in our skeleton page. We also added a skeleton state on every component that supports it.

Text input

Warning Since text inputs are usually used inside forms, the trailing action button should have the type="button" attribute. We have added this to our examples. Read more in our text input page.

Foundations

Colors

New We replaced the color palette page with a new and improved colors page, it lists all existing semantic colors available in OUDS Web. Read more in our colors page.

Dual mode

Update @ouds/web-common and @ouds/web-[theme] to v1.2.0.
Remove @import "boosted/scss/nav";, @import "boosted/scss/navbar";, @import "boosted/scss/footer";, and @import "boosted/scss/orange-navbar"; from the Boosted custom import stack.
Change the @include rfs($font-size-base, --#{$prefix}body-font-size); into --#{$prefix}body-font-size: #{$font-size-base};.

v1.1.0 Full changelog

Brand

New Orange Compact brand has been added.

Forms

Validation

Breaking .was-validated and .is-invalid have been removed, form validation is now based on :user-invalid for browser validation and aria-invalid=true for manual validation. Read more about form validation.

Components

Alerts

New Alert message and inline alert have been implemented. Read more in our alerts page.

Helpers

Clearfix

Breaking .clearfix helper and clearfix() mixin have been removed in favor of .d-flow-root.

Sass

Breaking add and subtract functions have been removed, use calc instead.

Utilities

Aspect ratio

Breaking .ratio has been replaced by the aspect-ratio based .ratio-* utilities. These utilities are applied directly on the target element, a container is no longer needed. Read more about aspect ratio.

Display

New .d-flow-root utility has been added to replace .clearfix. Read more about this display utility for clearfix.

Spacing

New Several spacing utilities based on grid measures have been added. These utilities can be used for specific layout tweaks like edge to edge containers. Read more about grid measures spacing utilities.

Dual mode

Update @ouds/web-common and @ouds/web-[theme] to v1.1.0.
Update the import of Boosted variables out of the .boosted scope, to ease custom integrations.
Add back --#{$prefix}highlight-bg and --#{$prefix}highlight-color for light and dark mode and add --#{$prefix}modal-border-radius: 0px; for light mode.
Remove @import "boosted/scss/alert"; and @import "boosted/scss/close"; from the Boosted custom import stack.

v1.0.0 Full changelog

Core

New OUDS Web now uses custom fonts loaded from a CDN for consistency in visual rendering across environments. Read more about the font stack.

Forms

New .component-max-width has been added for all control items, textual input and select input.

Checkboxes

Warning Checkbox component has been updated to 2.4.0. Read more in our checkbox page.
New .control-items-list and .control-item-error-message has been added.

Password Input

New Password input has been implemented. Read more in our password input page.

Radio buttons

Warning Radio button component has been updated to 1.4.0. Read more in our radio button page.
New .control-items-list and .control-item-error-message has been added.

Select input

New Select Input has been implemented. Read more in our select input page.

Switches

Warning Switch component has been updated to 1.5.0. Read more in our switch page.
New .control-items-list, .switch-item-container and .control-item-error-message has been added.

Text area

New Text area has been implemented. Read more in our text area page.

Text input

Breaking .text-input-container-rounded has been replaced by a global .use-rounded-corner-inputs. Read more in our text input page.

Components

Button

Breaking .btn-rounded has been replaced by a global .use-rounded-corner-buttons. Read more in our buttons page.

Reboot

Warning Native <ul>, <ol> and <dl> now have a max-width set to the variable --bs-font-max-width-body-medium.

Utilities

Background

Breaking Some background utilities have been renamed as follows:
- .bg-brand-primary is renamed to .bg-surface-brand-primary
- .bg-brand-secondary is renamed to .bg-surface-brand-secondary
- .bg-brand-tertiary is renamed to .bg-surface-brand-tertiary
- .bg-status-accent-emphasized is renamed to .bg-surface-status-accent-emphasized
- .bg-status-accent-muted is renamed to .bg-surface-status-accent-muted
- .bg-status-positive-emphasized is renamed to .bg-surface-status-positive-emphasized
- .bg-status-positive-muted is renamed to .bg-surface-status-positive-muted
- .bg-status-negative-emphasized is renamed to .bg-surface-status-negative-emphasized
- .bg-status-negative-muted is renamed to .bg-surface-status-negative-muted
- .bg-status-warning-emphasized is renamed to .bg-surface-status-warning-emphasized
- .bg-status-warning-muted is renamed to .bg-surface-status-warning-muted
- .bg-status-info-emphasized is renamed to .bg-surface-status-info-emphasized
- .bg-status-info-muted is renamed to .bg-surface-status-info-muted
New New background utilities: .bg-surface-primary, .bg-surface-secondary, .bg-surface-tertiary, .bg-surface-inverse-high, .bg-surface-inverse-low. Read more in our background page.

Borders

New Border color .border-minimal has been added.

Opacity

New .opacity-weakest is now available.
Warning Opacity levels values have been changed. Read more in our opacity page.

v0.6.0 Full changelog

Core

New [data-bs-theme] now use a --bs-color-local to set the color if it has been defined by a specific .bg-* utility.

Breaking The focus-visible polyfill has been removed. So you no longer need it on your side, and you should replace all the calls to :focus[data-focus-visible-added] by :focus-visible.

Icons

Breaking OUDS Web now uses new functional icons. A new bicolor accessible warning icon has been introduced.

Forms

Text Input

New Text input has been implemented. Read more in our text input page.

Components

Badges

Breaking Badges have been updated to v1.2. Default badge now carries a negative functional status. Badges now use dedicated classes such as .badge-neutral, .badge-accent, .badge-positive, .badge-info and .badge-warning.
Breaking All badges sizing classes have been renamed: .badge-xs is .badge-xsmall, .badge-sm is .badge-small and .badge-lg is .badge-large.
Breaking .badge-icon and .badge-status-icon have been added to handle badges with icons' styling.

Button

Breaking Button CSS variables have been changed. --bs-button-mono-color-bg-minimal-loading is no longer available.
New .btn-rounded is now available.
New .btn-brand is now available.

Chips

New Chips components have been implemented. Read more in our chips page.

Link

Breaking Link sizing class has been renamed from .link-sm to .link-small.
Breaking Link CSS variables have been changed. All the variables containing arrow have been renamed the same with chevron instead.

Helpers

Color background

Breaking All .text-bg-* helpers have been removed.

Utilities

Background

New .bg-opacity-lower and .bg-opacity-lowest background color utilities have been added. Visit our background page to read more.
New [data-bs-theme] now use a --bs-color-local to set the color if it has been defined by a specific .bg-* utility.

Borders

Warning .rounded-small and .rounded-medium have been updated to respectively 4px and 8px. All components have been updated accordingly. It shouldn’t bother you too much since it’s handled on OUDS Web side.

Colors

Warning Dark mode values of our .text-status-info, .text-status-positive, .text-status-warning and .text-status-danger have been tweaked. It shouldn’t bother you too much since it’s handled on OUDS Web side.

Shadow

New .shadow-sticky shadow utility have been added. Visit our shadows page to read more.
Breaking .shadow-sticky-default, .shadow-sticky-emphasized and .shadow-sticky-navigation-scrolled shadow utilities have been removed. Visit our shadows page to read more.

Spacings

Breaking Spacing utilities (padding, margin, gap, ...) sizes have been renamed as follows:
- 3xs is renamed to 3xsmall : for example .m-3xs → .m-3xsmall
- 2xs is renamed to 2xsmall : for example .m-2xs → .m-2xsmall
- Xs is renamed to xsmall : for example .m-xs → .m-xsmall
- Sm is renamed to small : for example .m-sm → .m-small
- Md is renamed to medium : for example .m-md → .m-medium
- Lg is renamed to large : for example .m-lg → .m-large
- Xl is renamed to xlarge : for example .m-xl → .m-xlarge
- 2xl is renamed to 2xlarge : for example .m-2xl → .m-2xlarge
- 3xl is renamed to 3xlarge : for example .m-3xl → .m-3xlarge
- 4xl is renamed to 4xlarge : for example .m-4xl → .m-4xlarge
- 5xl is renamed to 5xlarge : for example .m-5xl → .m-5xlarge
- Negative these changes apply to negative spacings as well, for example .m-n3xs → .m-n3xsmall

v0.5.0 Full changelog

Forms

Checkboxes, radio buttons, switches

New Read only state has been implemented.

Components

Badges

New Badges components has been implemented. Read more in our badges page.

New Breadcrumb component has been implemented. Read more in our breadcrumb page.

Bullet list

New Bullet list component has been implemented. Read more in our bullet list page.

Extend

Icons

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

Utilities

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.

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 background helpers

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 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.0 Full changelog

Forms

Checkboxes

New Checkbox component has been implemented. Read more in our checkbox page.

Radio buttons

New Radio button component has been implemented. Read more in our radio button page.

Switches

New Switch component has been implemented. Read more in our switch page.

Helpers

Divider

New Horizontal and vertical rule helpers to create dividers. Read more in our divider page.

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 Full changelog

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 Full changelog

Components

Buttons

New Button component has been implemented. Read more in our buttons page.

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 Full changelog

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. Read 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. Deprecated in v0.6.0

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 read 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 read more.

Colors

New The new text color utilities are now available. Visit our color page to read 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
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, .md:col-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.

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 Full changelog

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

v1.5.0 Full changelog

Components

Badges

Breadcrumb

Buttons

Chips

Footer

Header

Items

Links

Table

Utilities

Interactions

Shadow

Sass mixins

v1.4.0 Full changelog

Foundations

Components

Badges

Chips

Password input

Tags

Text area

Text input

Utilities

Shadow

Text

CSS and Sass variables

v1.3.0 Full changelog

Components

Table

Tools

Utilities

Breakpoint prefixes

CSS and Sass variables

Dual mode

v1.2.0 Full changelog

Components

Chips

Footer

Header

Navigation button

Password input

Skeleton

Text input

Foundations

Colors

Dual mode

v1.1.0 Full changelog

Brand

Forms

Validation

Components

Alerts

Helpers

Clearfix

Sass

Utilities

Aspect ratio

Display

Spacing

Dual mode

v1.0.0 Full changelog

Core

Forms

Checkboxes

Password Input

Radio buttons

Select input

Switches

Text area

Text input

Components

Button

Reboot

Utilities

Background

Borders

On this page