View on GitHub

Migrating from Boosted

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

The NPM package is now @ouds/web.
The CSS and JS files have been renamed:
- boosted-grid.css → ouds-web-grid.css
- boosted-grid.min.css → ouds-web-grid.min.css
- boosted-reboot.css → ouds-web-reboot.css
- boosted-reboot.min.css → ouds-web-reboot.min.css
- boosted-utilities.css → ouds-web-utilities.css
- boosted-utilities.min.css → ouds-web-utilities.min.css
- boosted.css → ouds-web.css
- boosted.min.css → ouds-web.min.css
- boosted.bundle.js → ouds-web.bundle.js
- boosted.bundle.min.js → ouds-web.bundle.min.js
- boosted.esm.js → ouds-web.esm.js
- boosted.esm.min.js → ouds-web.esm.min.js
- boosted.js → ouds-web.js
- boosted.min.js → ouds-web.min.js

From now on, OUDS Web won’t embed Bootstrap elements that are not part of 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.

Foundations

Warning Orange color has been modified from #f16e00 to #f15e00. It means that under certain circumstances, you might be able to use Orange and light gray items together.
New We provide two brand new themes that are root and root-inverted. They are complementary to light and dark. See more on our color modes page
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.

Fonts

OUDS Web doesn’t use the Helvetica Neue font. Instead, it uses the system font stack. This means that the font will be slightly different depending on the operating system and browser being used.

Technically, it means that you can get rid of the following things:

Helvetica Neue woff2 files: fonts/HelvNeue55_W1G.woff2, fonts/HelvNeue75_W1G.woff2, fonts/HelveticaNeueW20-55Roman.woff2, and fonts/HelveticaNeueW20-75Bold.woff2.
orange-helvetica.*.css file (default, RTL, or minified version).
If you were customizing your Sass compilation, you can remove the @import "orange-helvetica"; line from your Sass files if it was there.

Content styles

Typography

New Body fonts’ sizes are now responsive and can change depending on the screen size. See Typography for more details.
New A max-width has been added on all font references for readability reasons. If you want to get rid of the max-width, please use our .mw-none width utility.
New Selected text is now styled with a specific text color and background-color, making it easier to spot and to read.
Breaking Display headings classes .display-{1|2|3|4|5|6} have been removed and replaced by .display-{small|medium|large}. You can still have them using $enable-bootstrap-compatibility.
Breaking Abbreviation class .initialism has been removed.
Warning Default spacing values now use pxs instead of ems for fixed component spacing, to keep as much space as possible for meaningful content on zoom.

Layout

Breaking Responsive breakpoints have changed:
- 2xs and 3xl have been added.
- xxl has been renamed to 2xl.
- The breakpoints values have changed. Please refer to the breakpoints’ documentation.
- The default container to use is now .container-fluid associated to .container-max-width instead of .container-xxl. Please refer to the fluid containers’ documentation.
- Default gutter inside grid has been changed to have a fully responsive behavior. It should be a transparent change for you.
- All gutter utilities have been changed. .g{-breakpoint}-{value}, .gx{-breakpoint}-{value} and .gy{-breakpoint}-{value} which value is inside 0|1|2|3|4|5. Gutter utilities values now use none|smash|shortest|shorter|short|medium|tall|taller|tallest|spacious|huge|jumbo. Proportional equivalence between 0 → none, 1 → shortest, 2 → shorter, 3 → medium, 4 → tall, 5 → spacious.

All responsive classes, helpers, and utilities have been updated accordingly to match the new breakpoints.

Info .container and .container-{breakpoint} have been removed from the default build but you can still have them using $enable-bootstrap-compatibility.
Info xxl breakpoint and thus all related classes (like .container-xxl, .col-xxl-*) can still be available when $enable-bootstrap-compatibility is enabled.

Components

Close button

Warning .btn-close-white class has been removed as it was deprecated in Boosted v5.3.3.

Buttons

New .btn-default, .btn-strong, .btn-minimal, and .btn-negative have been added.
New .btn-on-colored-bg has been added; it can be used with .btn-default, .btn-strong and .btn-minimal to get variants on colored backgrounds (neither primary, nor secondary, nor tertiary, nor emphasized backgrounds).
Breaking .btn-primary, .btn-secondary, .btn-success, .btn-danger, .btn-warning, .btn-info, .btn-light, .btn-dark and btn-dropdown have been removed. You can still have them using $enable-bootstrap-compatibility. Here is the visual correspondence:
- .btn-primary and .btn-dark will look as .btn-strong
- .btn-secondary and .btn-success will look as .btn-default
- .btn-danger and .btn-warning will look as .btn-negative
- .btn-info and .btn-light will look as .btn-minimal
Breaking .btn-no-outline has been removed. You can use .btn-minimal instead.
Breaking .btn-social and all its variants have been removed.
Breaking .btn-outline-* have been removed. You can still have them using $enable-bootstrap-compatibility. They all look like .btn-default.
Warning .btn-sm and .btn-lg have been removed.
Breaking Loading buttons implementation has changed. You should now use the classes .loading-indeterminate and .loading-determinate and no more spinner borders.

For example, if you used to write:

<button class="btn btn-secondary" type="button" disabled>
  <span class="spinner-border spinner-border-sm" aria-hidden="true"></span>
  <span class="visually-hidden" role="status">Loading...</span>
</button>

Now you should write:

<button type="button" class="btn btn-default loading-indeterminate" id="loading-btn-1" disabled>
  Download file 1
  <svg viewbox='0 0 40 40' xmlns='http://www.w3.org/2000/svg' class="loader" aria-hidden="true">
    <circle class="loader-inner" cx="20" cy="20" r="17"></circle>
  </svg>
  <span role="status" id="loading-btn-msg-1" class="visually-hidden">Downloading file 1</span>
</button>

You will have to make some extra Javascript to change the styles and update the status message like explained in the documentation. You can find a complete example in our loading buttons live example.

Breaking Button plugin (button with a toggle behavior) has been removed.

Forms

Checks & radios

New .control-item-assets-container, .control-item-text-container, .control-item-label, .control-item-indicator, .control-item-helper, .control-item-divider and .control-item-inverse have been added.
Breaking .form-check, .form-check-input, .form-check-label, .form-check-inline, .form-check-reverse and .form-switch have been removed.
Warning form-star-rating() mixin has been removed as it was deprecated in Boosted v5.3.2.

Checkbox

New .checkbox-item and .checkbox-standalone have been added.
Breaking Checkbox is a new component compared to Boosted’s Check, the DOM is therefore very different.

For example, if you used to write:

<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="checkboxDefault">
  <label class="form-check-label" for="checkboxDefault">
    Default checkbox
  </label>
</div>

Now you should write:

<div class="checkbox-item">
  <div class="control-item-assets-container">
    <input class="control-item-indicator" type="checkbox" value="" id="checkboxDefault">
  </div>
  <div class="control-item-text-container">
    <label class="control-item-label" for="checkboxDefault">Default checkbox</label>
  </div>
</div>

See our new Checkbox page for more information.

Warning Links in checkboxes’ labels are now forbidden (they won’t be interactive anyway).

Radio button

New .radio-button-item, .radio-button-standalone, .radio-button-additional-label and .radio-button-item-outlined have been added.
Breaking Radio button is a new component compared to Boosted’s radio, the DOM is therefore very different.

For example, if you used to write:

<div class="form-check">
  <input class="form-check-input" type="radio" value="" id="radioDefault">
  <label class="form-check-label" for="radioDefault">
    Default radio
  </label>
</div>

Now you should write:

<div class="radio-button-item">
  <div class="control-item-assets-container">
    <input class="control-item-indicator" type="radio" value="" id="radioButtonDefault">
  </div>
  <div class="control-item-text-container">
    <label class="control-item-label" for="radioButtonDefault">Default radio button</label>
  </div>
</div>

See our new Radio button page for more information.

Warning Links in radio buttons’ labels are now forbidden (they won’t be interactive anyway).

Switch

New .switch-item and .switch-standalone have been added.
Breaking Switch is a new component compared to Boosted’s Check, the DOM is therefore very different.

For example, if you used to write:

<div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" role="switch" value="" id="switchDefault">
  <label class="form-check-label" for="switchDefault">
    Default switch
  </label>
</div>

Now you should write:

<div class="switch-item">
  <div class="control-item-assets-container">
    <input class="control-item-indicator" type="checkbox" role="switch" value="" id="switchDefault">
  </div>
  <div class="control-item-text-container">
    <label class="control-item-label" for="switchDefault">Default switch</label>
  </div>
</div>

See our new Switch page for more information.

Warning Links in switches’ labels are now forbidden (they won’t be interactive anyway).

Helpers

Color background

Breaking Most color-background color helpers have been removed or changed.
New The new color-background color helpers are now available. Visit our color-bg page to see more.
Info Here are the modifications to apply in the exact same order to your websites. Please make sure to adapt the [data-bs-theme] to your context:

See more details about [data-bs-theme].
1. .text-bg-primary → .text-bg-brand-primary
2. .text-bg-secondary → .text-bg-emphasized or .text-bg-neutral-emphasized
3. .text-bg-success → .text-bg-status-positive-emphasized or in some rare cases .text-bg-status-positive-muted
4. .text-bg-danger → .text-bg-status-negative-emphasized or in some rare cases .text-bg-status-negative-muted
5. .text-bg-warning → .text-bg-status-warning-emphasized or in some rare cases .text-bg-status-warning-muted
6. .text-bg-info → .text-bg-status-info-emphasized or in some rare cases .text-bg-status-info-muted
7. .text-bg-light → .text-bg-secondary
8. .text-bg-dark → .text-bg-emphasized

Colored links

Breaking All colored links helpers are unstyled in OUDS Web. Classes still exist for Bootstrap compatibility.

Dividers

New Horizontal or vertical rule helpers to create dividers.

Icon link

Info .icon-link and .link-chevron are now documented in link component. See icon link and link chevron.

Icon

New Icons’ sizes helpers have been added to help choose the right icon size with a specific typography reference. If you need these helpers, and you are using a custom import stack for helpers, don’t forget to add the needed file helpers/_icon.scss:
- 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

Breaking Responsive sticky helpers .sticky-xxl-{top|bottom} have been removed and replaced by their equivalent .sticky-2xl-{top|bottom}. You can still have them using $enable-bootstrap-compatibility.
New Responsive sticky helpers: .sticky-xs-{top|bottom}, .sticky-2xl-{top|bottom} and .sticky-3xl-{top|bottom}.

Vertical rule

Warning The vertical rule documentation has been merged into the new Dividers helper documentation.

Utilities

Background

Breaking Most background color utilities have been removed or changed.
Breaking Background opacity utilities have been removed.
New The new background color utilities are now available. Visit our background page to see more.
Info Here are the modifications to apply in the exact same order to your websites. Please make sure to adapt the [data-bs-theme] to your context:

See more details about [data-bs-theme].
1. .bg-transparent stays the same
2. .bg-white → .bg-always-white
3. .bg-black → .bg-always-black
4. .bg-primary → .bg-brand-primary
5. .bg-primary-subtle (that shouldn’t have been used) → .bg-tertiary
6. .bg-secondary → .bg-emphasized or in some rare cases .bg-status-neutral-emphasized
7. .bg-secondary-subtle (that shouldn’t have been used) → .bg-secondary
8. .bg-success → .bg-status-positive-emphasized or in some rare cases .bg-status-positive-muted
9. .bg-success-subtle (that shouldn’t have been used) → .bg-status-positive-muted
10. .bg-danger → .bg-status-negative-emphasized or in some rare cases .bg-status-negative-muted
11. .bg-danger-subtle (that shouldn’t have been used) → .bg-status-negative-muted
12. .bg-info → .bg-status-info-emphasized or in some rare cases .bg-status-info-muted
13. .bg-info-subtle (that shouldn’t have been used) → .bg-status-positive-muted
14. .bg-warning → .bg-status-warning-emphasized, .bg-status-accent-emphasized or in some rare cases .bg-status-warning-muted, .bg-status-accent-muted
15. .bg-warning-subtle (that shouldn’t have been used) → .bg-status-warning-muted or .bg-status-accent-muted depending on your context
16. .bg-body → .bg-primary
17. .bg-body-secondary → .bg-secondary
18. .bg-body-tertiary (that shouldn’t have been used) → .bg-secondary
19. .bg-light → .bg-secondary
20. .bg-light-subtle (that shouldn’t have been used) → .bg-secondary
21. .bg-dark → .bg-emphasized or .bg-always-black depending on your context
22. .bg-dark-subtle (that shouldn’t have been used) → .bg-secondary
23. .bg-supporting-* → To remove or replace with the appropriate background

Border

Breaking Border operative utilities have been removed: .border-0, .border-top-0, .border-bottom-0, .border-start-0, and .border-end-0. Please check the new border values directly in the documentation and adapt your websites to them. You can still have them using $enable-bootstrap-compatibility.
New Border operative utilities: .border-none, .border-top-none, .border-bottom-none, .border-start-none, and .border-end-none.
Breaking Border width utilities have been removed: .border-0, .border-1, .border-2, .border-3, .border-4 and .border-5. Please check the new border values directly in the documentation and adapt your websites to them. You can still have them using $enable-bootstrap-compatibility.
New Border width utilities: .border-none, .border-thin, .border-medium, .border-thick, and .border-thicker.
Breaking Border radius utilities with many sizes have been removed. Please check the new border values directly in the documentation and adapt your websites to them. You can still have them using $enable-bootstrap-compatibility:
- 0: .rounded-0, .rounded-top-0, .rounded-bottom-0, .rounded-start-0 and .rounded-end-0.
- 1: .rounded-1, .rounded-top-1, .rounded-bottom-1, .rounded-start-1 and .rounded-end-1.
- 2: .rounded-2, .rounded-top-2, .rounded-bottom-2, .rounded-start-2 and .rounded-end-2.
- 3: .rounded-3, .rounded-top-3, .rounded-bottom-3, .rounded-start-3 and .rounded-end-3.
- 4: .rounded-4, .rounded-top-4, .rounded-bottom-4, .rounded-start-4 and .rounded-end-4.
- 5: .rounded-5, .rounded-top-5, .rounded-bottom-5, .rounded-start-5 and .rounded-end-5.
New Border radius utilities with all sizes:
- 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.
New Border style utilities: .border-drag.
Breaking All border color utilities have been removed or changed.
Breaking Border opacity utilities have been removed.
New The new border color utilities are now available. Visit our border page to see more.
Info Here are the modifications to apply in your websites:
1. .border-primary → .border-brand-primary
2. .border-black → .border-always-black or .border-always-on-white or .border-on-brand-primary
3. .border-white → .border-always-white or .border-always-on-black
4. All .border-*-subtle (that shouldn’t have been used) → .border-default
5. All the remaining .border-* → .border-emphasized

Colors

Breaking Most text color utilities have been removed or changed.
Breaking Text opacity utilities have been removed.
New The new text color utilities are now available. Visit our color page to see more.
Info Here are the modifications to apply in your websites:
1. .text-primary(-emphasis) → .text-brand-primary
2. .text-secondary(-emphasis) → .text-muted
3. .text-success(-emphasis) (that shouldn’t have been used on texts) → .text-status-positive
4. .text-danger(-emphasis) (that shouldn’t have been used on texts) → .text-status-negative
5. .text-warning(-emphasis) (that shouldn’t have been used on texts) → .text-status-warning
6. .text-info(-emphasis) (that shouldn’t have been used on texts) → .text-status-info
7. .text-light(-emphasis) → .text-disabled
8. .text-dark(-emphasis) → .text-default or see .text-black below
9. .text-body(-emphasis) → .text-default or .text-on-status-muted
10. .text-body-secondary → .text-muted
11. .text-body-tertiary → .text-disabled or .text-muted in some cases
12. .text-black → .text-always-black or .text-on-brand-primary or .text-on-status-emphasized or .text-on-status-emphasized-alt or .text-always-on-white
13. .text-white → .text-always-white or .text-always-on-black
14. .text-black-50 → .text-muted
15. .text-white-50 → .text-muted
16. .text-reset stays the same

Display

Breaking .d-xxl-{value} responsive display utility has been replaced by .d-2xl-{value}. Please refer to the new breakpoints’ names. You can still have it using $enable-bootstrap-compatibility.
New .d-xs-{value} and .d-3xl-{value} responsive display utilities have been added. Please refer to the new breakpoints’ names.

Flex

Breaking xxl responsive flex utilities have been replaced by 2xl utilities: .d-xxl-flex, .d-xxl-inline-flex, .flex-xxl-{row|column}, .flex-xxl-{row|column}-reverse, .justify-content-xxl-{start|end|center|between|around|evenly}, .align-items-xxl-{start|end|center|baseline|stretch}, .align-self-xxl-{start|end|center|baseline|stretch}, .flex-xxl-fill, .flex-xxl-{grow|shrink}-{0|1}, .flex-xxl-{nowrap|wrap|wrap-reverse}, .order-xxl-{number}, .order-xxl-{first|last} and .align-content-xxl-{start|end|center|between|around|stretch} utilities have been replaced by .d-2xl-flex, .d-2xl-inline-flex, .flex-2xl-{row|column}, .flex-2xl-{row|column}-reverse, .justify-content-2xl-{start|end|center|between|around|evenly}, .align-items-2xl-{start|end|center|baseline|stretch}, .align-self-2xl-{start|end|center|baseline|stretch}, .flex-2xl-fill, .flex-2xl-{grow|shrink}-{0|1}, .flex-2xl-{nowrap|wrap|wrap-reverse}, .order-2xl-{number}, .order-2xl-{first|last} and .align-content-2xl-{start|end|center|between|around|stretch}. Please refer to the new breakpoints’ names. You can still have them using $enable-bootstrap-compatibility.
New xs and 3xl responsive flex utilities have been added: .d-xs-flex, .d-xs-inline-flex, .flex-xs-{row|column}, .flex-xs-{row|column}-reverse, .justify-content-xs-{start|end|center|between|around|evenly}, .align-items-xs-{start|end|center|baseline|stretch}, .align-self-xs-{start|end|center|baseline|stretch}, .flex-xs-fill, .flex-xs-{grow|shrink}-{0|1}, .flex-xs-{nowrap|wrap|wrap-reverse}, .order-xs-{number}, .order-xs-{first|last}, .align-content-xs-{start|end|center|between|around|stretch}, .d-3xl-flex, .d-3xl-inline-flex, .flex-3xl-{row|column}, .flex-3xl-{row|column}-reverse, .justify-content-3xl-{start|end|center|between|around|evenly}, .align-items-3xl-{start|end|center|baseline|stretch}, .align-self-3xl-{start|end|center|baseline|stretch}, .flex-3xl-fill, .flex-3xl-{grow|shrink}-{0|1}, .flex-3xl-{nowrap|wrap|wrap-reverse}, .order-3xl-{number}, .order-3xl-{first|last} and .align-content-3xl-{start|end|center|between|around|stretch}. Please refer to the new breakpoints’ names.

Float

Breaking xxl responsive float utilities have been replaced by 2xl utilities: .float-xxl-{start|end|none} utilities have been replaced by .float-2xl-{start|end|none}. Please refer to the new breakpoints’ names. You can still have it using $enable-bootstrap-compatibility.
New xs and 3xl responsive float utilities have been added: .float-xs-{start|end|none} and .float-3xl-{start|end|none}. Please refer to the new breakpoints’ names.

Link

Breaking .link-opacity, .link-offset, .link-underline, .link-underline-opacity and .opacity-100 have been removed from the build and from the documentation. They are useless in OUDS web.

Object fit

Breaking xxl responsive object fit utilities have been replaced by 2xl utilities: .object-fit-xxl-{contain|cover|fill|scale|none} utilities have been replaced by .object-fit-2xl-{contain|cover|fill|scale|none}. Please refer to the new breakpoints’ names. You can still have them using $enable-bootstrap-compatibility.
New xs and 3xl responsive object fit utilities have been added: .object-fit-xs-{contain|cover|fill|scale|none} and .object-fit-3xl-{contain|cover|fill|scale|none}. Please refer to the new breakpoints’ names.
Info xxl responsive object fit utilities can still be available when $enable-bootstrap-compatibility is on.

Opacity

Breaking .opacity-0, .opacity-25, .opacity-50, .opacity-75 and .opacity-100 have been removed from the default build. Please check the new opacity values directly in the documentation and adapt your websites to them. You can still have them using $enable-bootstrap-compatibility.
New Opacity utilities: .opacity-invisible, .opacity-weaker, .opacity-weak, .opacity-medium, .opacity-strong and .opacity-opaque.

Shadow

Breaking .shadow, .shadow-sm and .shadow-lg have been removed from the default build. Please check the new shadows values directly in the documentation and adapt your websites to them. You can still have them using $enable-bootstrap-compatibility.
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 now that a max-width has been added on all font references (for readability reasons), if you want to omit it in some special cases.

Spacings

Breaking The following margin spacing utilities have been removed from the default build (.m{position}-{breakpoint}-{negative}{value}). Please check the new spacing values directly in the documentation and adapt your websites to them. You can still have them using $enable-bootstrap-compatibility:
- 0: .m-0, .mx-0, .my-0, .mt-0, .mb-0, .ms-0, .me-0, .m-sm-0, etc…
- 1: .m-1, .mx-1, .my-1, .mt-1, .mb-1, .ms-1, .me-1, .m-sm-1, etc…
- 2: .m-2, .mx-2, .my-2, .mt-2, .mb-2, .ms-2, .me-2, .m-sm-2, etc…
- 3: .m-3, .mx-3, .my-3, .mt-3, .mb-3, .ms-3, .me-3, .m-sm-3, etc…
- 4: .m-4, .mx-4, .my-4, .mt-4, .mb-4, .ms-4, .me-4, .m-sm-4, etc…
- 5: .m-5, .mx-5, .my-5, .mt-5, .mb-5, .ms-5, .me-5, .m-sm-5, etc…
- Negative: .m-n1, .m-n2, .m-n3, .m-n4, .m-n5, .mx-n1, etc…
Breaking The following padding spacing utilities have been removed from the default build (.p{position}-{breakpoint}-{value}). Please check the new spacing values directly in the documentation and adapt your websites to them. You can still have them using $enable-bootstrap-compatibility:
- 0: .p-0, .px-0, .py-0, .pt-0, .pb-0, .ps-0, .pe-0, .p-sm-0, etc…
- 1: .p-1, .px-1, .py-1, .pt-1, .pb-1, .ps-1, .pe-1, .p-sm-1, etc…
- 2: .p-2, .px-2, .py-2, .pt-2, .pb-2, .ps-2, .pe-2, .p-sm-2, etc…
- 3: .p-3, .px-3, .py-3, .pt-3, .pb-3, .ps-3, .pe-3, .p-sm-3, etc…
- 4: .p-4, .px-4, .py-4, .pt-4, .pb-4, .ps-4, .pe-4, .p-sm-4, etc…
- 5: .p-5, .px-5, .py-5, .pt-5, .pb-5, .ps-5, .pe-5, .p-sm-5, etc…
Breaking The following gap spacing utilities have been removed from the default build (.{row-|column-|}gap-{breakpoint}-{value}). Please check the new spacing values directly in the documentation and adapt your websites to them. You can still have them using $enable-bootstrap-compatibility:
- 0: .gap-0, .row-gap-0, .column-gap-0, .gap-sm-0, etc…
- 1: .gap-1, .row-gap-1, .column-gap-1, .gap-sm-1, etc…
- 2: .gap-2, .row-gap-2, .column-gap-2, .gap-sm-2, etc…
- 3: .gap-3, .row-gap-3, .column-gap-3, .gap-sm-3, etc…
- 4: .gap-4, .row-gap-4, .column-gap-4, .gap-sm-4, etc…
- 5: .gap-5, .row-gap-5, .column-gap-5, .gap-sm-5, etc…
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-xs-auto, .mx-xs-auto, .my-xs-auto, .mt-xs-auto, .mb-xs-auto, .ms-xs-auto, .me-xs-auto, .m-2xl-auto, etc…
- Negative: .m-nsmash, .m-nshortest, .m-nshorter, .m-nshort, .m-nmedium, .m-ntall, .m-ntaller, .m-ntallest, .m-nspacious, .m-nhuge, .m-njumbo, .mx-nsmash, 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
Warning You might be able to transfer your spacing utilities following one of the two proposed methods (while keeping almost the rendering and at least the same proportion between spacings):
- Keep the previous behavior and getting one utility for another.
  1. 0: (([" \.][mp]|-?gap)[tblrsexy]?-[a-z]{0,3}-?n?)0 → $1none
  2. 1: (([" \.][mp]|-?gap)[tblrsexy]?-[a-z]{0,3}-?n?)1 → $1shortest
  3. 2: (([" \.][mp]|-?gap)[tblrsexy]?-[a-z]{0,3}-?n?)2 → $1short
  4. 3: (([" \.][mp]|-?gap)[tblrsexy]?-[a-z]{0,3}-?n?)3 → $1tall
  5. 4: (([" \.][mp]|-?gap)[tblrsexy]?-[a-z]{0,3}-?n?)4 → $1tallest
  6. 5: (([" \.][mp]|-?gap)[tblrsexy]?-[a-z]{0,3}-?n?)5 → $1huge
  7. All numbers: Search for (([" \.][mp]|-?gap)[tblrsexy]?-[a-z]{0,3}-?n?)\d and you shouldn’t have Bootstrap spacing utilities anymore
- Change all the utilities using more precise utilities
  1. Mixing Bootstrap numbers: Search for ([" \.][mp]|-?gap)[tblrsexy]?-[a-z]{0,3}-?n?\d, when you match multiple on one line, consider using one of our scaled spacing utilities (for example, .mb-1.mb-md-2 → .mb-scaled-shortest).
  2. Remaining standalone classes: Follow the previous guide going through all the standalone classes.

Text

Breaking .text-xxl-{start|end|none} responsive alignment text utility has been replaced by .text-2xl-{start|end|none}. Please refer to the new breakpoints’ names. You can still have it using $enable-bootstrap-compatibility.
New .text-xs-{start|end|none} and .text-3xl-{start|end|none} responsive alignment text utilities have been added. Please refer to the new breakpoints’ names.
Breaking Font size text utilities .fs-{1|2|3|4|5|6} have been removed and replaced by new ones. You can still have them using $enable-bootstrap-compatibility:
- Display headings: .fs-dl, .fs-dm, .fs-ds
- Headings: .fs-hxl, .fs-hl, .fs-hm, .fs-hs
- Body: .fs-bl, .fs-bm, .fs-bs
- Code: .fs-cm, .fs-cs
Breaking Font weight text utilities .fw-semibold and .fw-medium have been removed.
Breaking Line height text utilities .lh-1, .lh-sm, .lh-base, and .lh-lg have been removed, since our font references already have defined line-heights. You can still have them using $enable-bootstrap-compatibility.
Breaking Line length text utilities .ll-sm and .ll-md have been removed, since there is already a default max-width.

Examples

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 semantic OUDS Web utilities such as .opacity-invisible, .opacity-weaker, .opacity-weak, etc.
Warning $enable-rounded option have been set to true by default. This option allows you to set rounded corner on components. Please check that it doesn’t impact your website.
Warning scss/_color-palette.scss doesn’t exist anymore. If you were importing it in your project, please make sure to remove it.

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 "config";
  @import "functions";
+ @import "tokens/raw";
+ @import "tokens/semantic";
+ @import "tokens/semantic-colors-custom-props";
+ @import "tokens/composite";
+ @import "tokens/component-colors-custom-props";
+ @import "tokens/component";
  @import "variables";
  @import "variables-dark";
  // etc

New Sass variables:
- $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-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
- $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-muted-dark
- $ouds-color-border-muted-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-dark0
- $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-body
- $ouds-font-family-brand-default
- $ouds-font-family-code
- $ouds-font-family-display
- $ouds-font-family-heading
- $ouds-font-family-label
- $ouds-font-family-monospace-stack
- $ouds-font-family-sans-serif-stack
- $ouds-font-family-system-web
- $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-system-default
- $ouds-font-weight-display
- $ouds-font-weight-heading
- $ouds-font-weight-label-default
- $ouds-font-weight-label-strong
- $ouds-font-weight-system-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-muted
- $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:
- $grid-gutter-widths
- $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-opacities
- $ouds-text-colors
New Sass mixins:
- get-font-size()
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
- opacity-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-muted
- --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:
- $blockquote-font-size
- $blockquote-footer-font-size
- $blockquote-line-height
- $blockquote-letter-spacing
- $boosted-prefix
- $boosted-variable-prefix
- $border-color-subtle
- $border-color-subtle-dark
- $btn-active-box-shadow
- $btn-border-radius-lg
- $btn-border-radius-sm
- $btn-box-shadow
- $btn-close-white-active-border-color
- $btn-close-white-active-color
- $btn-close-white-bg
- $btn-close-white-border-color
- $btn-close-white-color
- $btn-close-white-disabled-color
- $btn-close-white-hover-color
- $btn-default-active-bg
- $btn-default-active-border
- $btn-default-active-color
- $btn-default-disabled-bg
- $btn-default-disabled-border
- $btn-default-disabled-color
- $btn-default-hover-bg
- $btn-default-hover-border
- $btn-default-hover-color
- $btn-disabled-opacity
- $btn-focus-box-shadow
- $btn-focus-width
- $btn-font-family
- $btn-font-size-lg
- $btn-font-size-sm
- $btn-font-size
- $btn-hover-color
- $btn-icon-padding-x-lg
- $btn-icon-padding-x-sm
- $btn-letter-spacing-lg
- $btn-letter-spacing-sm
- $btn-letter-spacing
- $btn-line-height-lg
- $btn-line-height-sm
- $btn-line-height
- $btn-link-color
- $btn-link-disabled-color
- $btn-link-hover-color
- $btn-outline-default-active-bg
- $btn-outline-default-active-border
- $btn-outline-default-active-color
- $btn-outline-default-disabled-bg
- $btn-outline-default-disabled-border
- $btn-outline-default-disabled-color
- $btn-outline-default-hover-bg
- $btn-outline-default-hover-border
- $btn-outline-default-hover-color
- $btn-padding-x-lg
- $btn-padding-x-sm
- $btn-padding-y-lg
- $btn-padding-y-sm
- $btn-social-networks
- $btn-transition
- $disabled-color
- $disabled-color-dark
- $display1-size
- $display1-spacing
- $display2-size
- $display2-spacing
- $display3-size
- $display3-spacing
- $display4-size
- $display4-spacing
- $focus-visible-inner-color
- $focus-visible-inner-color-dark
- $focus-visible-outer-color
- $focus-visible-outer-color-dark
- $footer-nav-link-font-weight
- $font-size-xlg
- $form-check-btn-check-disabled-opacity
- $form-check-filter
- $form-check-filter-dark
- $form-check-inline-margin-end
- $form-check-input-active-filter
- $form-check-input-border
- $form-check-input-checked-bg-color
- $form-check-input-checked-border-color
- $form-check-input-checked-color
- $form-check-input-color
- $form-check-input-disabled-color
- $form-check-input-disabled-color-dark
- $form-check-input-disabled-opacity
- $form-check-input-focus-border
- $form-check-input-focus-box-shadow
- $form-check-input-indeterminate-bg-color
- $form-check-input-indeterminate-border-color
- $form-check-input-indeterminate-color
- $form-check-label-color
- $form-check-label-disabled-opacity
- $form-check-margin-bottom
- $form-check-padding-start
- $form-check-radio-border-radius
- $form-check-transition
- $form-star-focus-box-shadow
- $form-star-focus-color
- $form-star-focus-color-dark
- $form-star-focus-outline
- $form-star-focus-outline-dark
- $functional-blue
- $functional-blue-dark
- $functional-green
- $functional-green-dark
- $functional-red
- $functional-red-dark
- $functional-yellow
- $functional-yellow-dark
- $gray-950
- $grid-gutter-breakpoint
- $h1-line-height
- $h1-spacing
- $h2-line-height
- $h2-spacing
- $h3-line-height
- $h3-spacing
- $h4-line-height
- $h4-spacing
- $h5-line-height
- $h5-spacing
- $h6-line-height
- $h6-spacing
- $initialism-font-size
- $input-btn-border-width
- $input-btn-padding-x
- $input-btn-padding-y-sm
- $input-btn-padding-y
- $lead-letter-spacing
- $lead-line-height
- $legend-font-size
- $line-length-sm
- $line-length-md
- $mid-spacing
- $orange-filter
- $outline-offset
- $outline-width
- $pre-line-height
- $step-item-padding-end
- $supporting-blue
- $supporting-green
- $supporting-orange
- $supporting-pink
- $supporting-purple
- $supporting-yellow
- $tertiary-active-bg
- $tertiary-active-bg-dark
- $title-bar-border-color-dark
- $title-bar-font-size-md
- $title-bar-font-size-xl
- $title-bar-line-height-md
- $title-bar-line-height-xl
- $variable-prefix
Warning Dropped CSS variables:
- --bs-border-color-subtle
- --bs-btn-close-active-border-color
- --bs-btn-close-active-color
- --bs-btn-close-bg
- --bs-btn-close-border-color
- --bs-btn-close-color
- --bs-btn-close-disabled-color
- --bs-btn-close-hover-color
- --bs-disabled-color
- --bs-focus-visible-inner-color
- --bs-focus-visible-outer-color
- --bs-form-check-filter
- --bs-form-check-input-disabled-color
- --bs-form-invalid-border-color
- --bs-form-invalid-color
- --bs-form-valid-border-color
- --bs-form-valid-color
- --bs-gray-950
- --bs-tertiary-active-bg
Breaking CSS variables only available when $enable-bootstrap-compatibility is on:
- --bs-black
- --bs-black-rgb
- --bs-blue
- --bs-body-bg
- --bs-body-bg-rgb
- --bs-body-color
- --bs-body-color-rgb
- --bs-border-color-translucent
- --bs-border-radius
- --bs-border-radius-2xl
- --bs-border-radius-lg
- --bs-border-radius-pill
- --bs-border-radius-sm
- --bs-border-radius-xl
- --bs-border-radius-xxl
- --bs-box-shadow
- --bs-box-shadow-inset
- --bs-box-shadow-lg
- --bs-box-shadow-sm
- --bs-code-color
- --bs-cyan
- --bs-danger
- --bs-danger-bg-subtle
- --bs-danger-border-subtle
- --bs-danger-rgb
- --bs-danger-text-emphasis
- --bs-dark
- --bs-dark-bg-subtle
- --bs-dark-border-subtle
- --bs-dark-rgb
- --bs-dark-text-emphasis
- --bs-emphasis-color
- --bs-emphasis-color-rgb
- --bs-gray
- --bs-gray-100
- --bs-gray-200
- --bs-gray-300
- --bs-gray-400
- --bs-gray-500
- --bs-gray-600
- --bs-gray-700
- --bs-gray-800
- --bs-gray-900
- --bs-gray-dark
- --bs-green
- --bs-highlight-bg
- --bs-highlight-color
- --bs-indigo
- --bs-info
- --bs-info-bg-subtle
- --bs-info-border-subtle
- --bs-info-rgb
- --bs-info-text-emphasis
- --bs-light
- --bs-light-bg-subtle
- --bs-light-border-subtle
- --bs-light-rgb
- --bs-light-text-emphasis
- --bs-orange
- --bs-pink
- --bs-primary
- --bs-primary-bg-subtle
- --bs-primary-border-subtle
- --bs-primary-rgb
- --bs-primary-text-emphasis
- --bs-purple
- --bs-red
- --bs-secondary
- --bs-secondary-bg
- --bs-secondary-bg-rgb
- --bs-secondary-bg-subtle
- --bs-secondary-border-subtle
- --bs-secondary-color
- --bs-secondary-color-rgb
- --bs-secondary-rgb
- --bs-secondary-text-emphasis
- --bs-success
- --bs-success-bg-subtle
- --bs-success-border-subtle
- --bs-success-rgb
- --bs-success-text-emphasis
- --bs-teal
- --bs-tertiary-bg
- --bs-tertiary-bg-rgb
- --bs-tertiary-color
- --bs-tertiary-color-rgb
- --bs-warning
- --bs-warning-bg-subtle
- --bs-warning-border-subtle
- --bs-warning-rgb
- --bs-warning-text-emphasis
- --bs-white
- --bs-white-rgb
- --bs-yellow
Warning Dropped Sass mixins:
- make-container-fluid-margin()
Breaking Keys in $utilities map only available when $enable-bootstrap-compatibility is on:
- background-color
- border
- border-bottom
- border-color
- border-end
- border-opacity
- border-start
- border-top
- border-width
- color
- column-gap
- font-size
- font-weight
- gap
- gradient
- line-height
- margin-bottom
- margin-end
- margin
- margin-start
- margin-top
- margin-x
- margin-y
- negative-margin-bottom
- negative-margin-end
- negative-margin
- negative-margin-start
- negative-margin-top
- negative-margin-x
- negative-margin-y
- opacity
- padding-bottom
- padding-end
- padding
- padding-start
- padding-top
- padding-x
- padding-y
- rounded
- rounded-bottom
- rounded-end
- rounded-start
- rounded-top
- row-gap
- shadow
- subtle-background-color
- subtle-border-color
- text-color
Warning Dropped keys in $utilities map:
- bg-opacity
- border-opacity
- line-length
- text-opacity
Warning Signature of make-row($gutter, $gutter-sm) is now make-row($gutter).

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.
Warning color-mode({mode}, {root}, {inverted-mode}) mixin signature has changed. We now provide an $inverted-mode parameter that is set by default to light or dark depending on the $mode. It allows you to precise another mode to be the inverse of a certain mode.
Warning button-variant mixin signature has changed. We now provide extra parameters for focus and loading states colors. We keep it as a warning because we provide default values for these parameters. See more in our Button documentation.

Migrating from Boosted

On this page On this page

Foundations

Fonts

Content styles

Typography

Layout

Components

Close button

Buttons

Links

Forms

Checks & radios

Checkbox

Radio button

Switch

Helpers

Color background

Colored links

Dividers

Icon link

Icon

Position

Vertical rule

Utilities

Background

Border

Colors

Display

Flex

Float

Link

Object fit

Opacity

Shadow

Sizing

Spacings

Text

Examples

CSS and Sass variables

Sass mixins

On this page