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.
Breaking The focus-visible polyfill has been removed. So you no longer need it on your side, and you should replace all the calls to :focus[data-focus-visible-added] by :focus-visible.
Breaking jQuery support has been removed from the library.

Fonts

OUDS Web doesn’t provide Helvetica Neue font files. Instead, it loads the font from a CDN in order to share the cached files between every project using OUDS Web.

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.

Read more about the font stack for more details.

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|3xsmall|2xsmall|xsmall|small|medium|large|xlarge|2xlarge|3xlarge|4xlarge|5xlarge. Proportional equivalence between 0 → none, 1 → 2xsmall, 2 → small, 3 → large, 4 → 2xlarge, 5 → 4xlarge.

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

Breaking All responsive utility classes now use a Tailwind-style colon prefix instead of Bootstrap's dash infix. The pattern .{utility}-{breakpoint}-{value} becomes .{breakpoint}:{utility}-{value} for all breakpoints (xs, sm, md, lg, xl, 2xl, 3xl). The 2xs breakpoint (the smallest) has no prefix and is unchanged. Read more in our breakpoints page.
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.

Icons

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

Components

Alerts

New .alert-message, .alert-label, .alert-accent, .alert-neutral, .use-rounded-corner-alert, .alert-container, .alert-text-container, .alert-action-container, .alert-positive, and .alert-negative have been added.
Breaking The DOM for alerts has changed a lot so we recommend to read our new alerts page first. .alert-sm, .alert-success, .alert-danger, .alert-dismissible, .alert-heading have been removed.
See all changing classes
- .alert → .alert.alert-message.
- .alert-sm → To remove.
- .alert-success → .alert-positive.
- .alert-info → Stays the same.
- .alert-warning → Stays the same.
- .alert-danger → .alert-negative.
- .alert-icon → Stays the same.
- .alert-heading → .alert-label.
- .alert-dismissible → To remove.
- The DOM has been updated to add more containers around in order to ease the future integrations.
Warning alert-variant() mixin has been removed as it was deprecated in Boosted v5.3.0.

Badges

Breaking Badge has changed a lot in its meaning and usages. It can no longer contain text (use our new tags for this). It is now either a basic badge (a colored bullet), a badge - count (with a number) or a badge - icon (with an icon).
Breaking New dedicated classes have been added to handle badges colors, states and sizes.
Breaking New classes have been added to handle badges icons.

Breaking the last element of a Breadcrumb must now contain a span element to handle behavior on smaller viewport.

Bullet list

New .bullet-list, .bullet-list-default-color, .bullet-list-tick and .bullet-list-bare classes have been added.
Breaking .bullet-list is mandatory for a full Bullet list component as defined in OUDS.
Warning Native <ul>, <ol> and <dl> now have a max-width set to the variable --bs-font-max-width-body-medium.

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-brand, .btn-minimal, and .btn-negative have been added.
New .btn-previous and .btn-next have been added.
New .btn-assistant has 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).
New .use-rounded-corner-buttons have been added; it can be added on <body> to toggle project-wide rounded corners buttons.
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 will look as .btn-brand
- .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
- .btn-dropdown could look as any variant of the button. So replace it with .btn-strong, .btn-default, .btn-minimal or .btn-negative depending on your context.
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-lg has been removed.
Warning .btn-sm has been renamed to .btn-small.
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.

Chips

New Chips components have been implemented. See more in our Chips page.

List group

Breaking List group has changed a lot in its usages. There is still a static example and an interactive variant for navigation. This is not an action button anymore.
Breaking New dedicated classes have been added to handle items colors, appearance, states, sizes, etc... All the previous classes have been removed.

For example, if you used to write:

    <a href="#" class="list-group-item list-group-item-action list-group-item-danger">A simple Danger list group item</a>

<!-- or -->

<ul class="list-group">
  <li class="list-group-item d-flex justify-content-between align-items-start">
    <div class="me-auto">
      Subheading
      <div class="fw-normal mt-1 lh-base">Content for list item</div>
    </div>
    <span class="badge text-bg-info rounded-pill">14</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-start">
    <div class="me-auto">
      Subheading
      <div class="fw-normal mt-1 lh-base">Content for list item</div>
    </div>
    <span class="badge text-bg-info rounded-pill">14</span>
  </li>
</ul>

  

            
          

Now you should write:

    <div class="item item-navigation">
  <a href="#" class="item-container item-interactive">
    <div class="item-content">
      <div class="item-text-container">
        <span class="item-text">A simple Danger list group item</span>
      </div>
      <div class="item-trailing-container">
        <div class="item-icon item-status-negative">
          <span class="visually-hidden">Danger</span>
        </div>
      </div>
    </div>
  </a>
</div>

<!-- or -->

<ul class="item-list">
  <li class="item">
    <div class="item-container">
      <div class="item-content">
        <div class="item-text-container">
          <p class="item-label">Subheading</p>
          <p class="item-description">Content for list item</p>
        </div>
        <div class="item-trailing-container">
          <p class="badge badge-count badge-info">14</p>
        </div>
      </div>
    </div>
  </li>
  <li class="item">
    <div class="item-container">
      <div class="item-content">
        <div class="item-text-container">
          <p class="item-label">Subheading</p>
          <p class="item-description">Content for list item</p>
        </div>
        <div class="item-trailing-container">
          <p class="badge badge-count badge-info">14</p>
        </div>
      </div>
    </div>
  </li>
</ul>

  

            
          

New An item has now much more variants, assets and applications. New dedicated classes have been added to handle this.

Scrollspy

Info While Scrollspy has not been published yet, we have updated its implementation using the one from Bootstrap v6 to improve its behavior. This does not necessitate any action on your part as this is backward compatible and a drop-in replacement. You can find implementation details in the related pull request in Bootstrap repository.

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

Placeholders

Breaking Placeholder component has been changed a lot, its name has been changed to Skeleton. We only support one animation now. Placeholder sizing have been revamped a bit. Placeholders colors shouldn’t be used anymore.

For example, if you used to write:

    <p class="placeholder-wave">
  <span class="placeholder col-12"></span>
</p>

Now you should write:

    <span class="skeleton col-12"></span>

See our new Skeleton page for more information.

New You can now set components in skeleton state.

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

Select

New .select-input has been added.
New .use-rounded-corner-inputs have been added; it can be added on <body> to toggle project-wide rounded corners inputs.
Breaking Select Input is a new component compared to Boosted’s Select, the DOM is therefore very different.

For example, if you used to write:

    <select class="form-select" aria-label="Default select example">
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

Now you should write:

    <div class="select-input">
  <div class="select-input-container">
    <label for="exampleSelect">Default select example</label>
    <select class="select-input-field" id="exampleSelect">
      <option value="" disabled selected></option>
      <option value="1">One</option>
      <option value="2">Two</option>
      <option value="3">Three</option>
    </select>
  </div>
</div>

  

            
          

See our new Select Input page for more information.

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

Text Input

New .text-input has been added.
New .use-rounded-corner-inputs have been added; it can be added on <body> to toggle project-wide rounded corners inputs.
Breaking Text Input is a new component compared to Boosted’s Input, the DOM is therefore very different.

For example, if you used to write:

    <div class="mb-3">
  <label for="exampleFormControlInput" class="form-label">Email address</label>
  <input type="email" class="form-control" id="exampleFormControlInput" placeholder="name@example.com">
</div>

Now you should write:

    <div class="text-input mb-medium">
  <div class="text-input-container">
    <label for="exampleTextInput">Email address</label>
    <input type="email" class="text-input-field" id="exampleTextInput" placeholder="name@example.com">
  </div>
</div>

See our new Text Input page for more information.

Text Area

New .text-area has been added.
Breaking Text Area is a new component compared to Boosted’s Input, the DOM is therefore very different.

For example, if you used to write:

    <div class="mb-3">
  <label for="exampleFormControlTextarea" class="form-label">Example textarea</label>
  <textarea class="form-control" id="exampleFormControlTextarea" rows="3"></textarea>
</div>

Now you should write:

    <div class="text-area">
  <div class="text-area-container">
    <label for="exampleTextArea">Example textarea</label>
    <textarea class="text-area-field" id="exampleTextArea" placeholder=" "></textarea>
  </div>
</div>

See our new Text Area page for more information.

Validation

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

Helpers

Clearfix

Breaking Clearfix helper .clearfix and Sass mixin clearfix() have been removed in favor of display utility .d-flow-root. See display utility for clearfix.

Color background

Breaking Color-background color helpers have been removed.

Colored links

Breaking All colored links helpers are unstyled in OUDS Web.

Divider

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 .2xl:sticky-{top|bottom}. You can still have them using $enable-bootstrap-compatibility.
New Responsive sticky helpers: .xs:sticky-{top|bottom}, .2xl:sticky-{top|bottom} and .3xl:sticky-{top|bottom}.

Ratio

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

Vertical rule

Warning The vertical rule documentation has been merged into the new Divider 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.
New [data-bs-theme] now use a --bs-color-local to set the color if it has been defined by a specific .bg-* utility.
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:

Note

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-surface-brand-primary
5. .bg-primary-subtle (that shouldn’t have been used) → .bg-tertiary
6. .bg-secondary → .bg-inverse-high or in some rare cases .bg-inverse-low
7. .bg-secondary-subtle (that shouldn’t have been used) → .bg-secondary
8. .bg-success → .bg-surface-status-positive-emphasized or in some rare cases .bg-surface-status-positive-muted
9. .bg-success-subtle (that shouldn’t have been used) → .bg-surface-status-positive-muted
10. .bg-danger → .bg-surface-status-negative-emphasized or in some rare cases .bg-surface-status-negative-muted
11. .bg-danger-subtle (that shouldn’t have been used) → .bg-surface-status-negative-muted
12. .bg-info → .bg-surface-status-info-emphasized or in some rare cases .bg-surface-status-info-muted
13. .bg-info-subtle (that shouldn’t have been used) → .bg-surface-status-positive-muted
14. .bg-warning → .bg-surface-status-warning-emphasized, .bg-surface-status-accent-emphasized or in some rare cases .bg-surface-status-warning-muted, .bg-surface-status-accent-muted
15. .bg-warning-subtle (that shouldn’t have been used) → .bg-surface-status-warning-muted or .bg-surface-status-accent-muted depending on your context
16. .bg-body → .bg-primary
17. .bg-body-secondary → .bg-secondary or in some rare cases .bg-opacity-lower or .bg-opacity-lowest
18. .bg-body-tertiary (that shouldn’t have been used) → .bg-secondary
19. .bg-light → .bg-secondary or in some rare cases .bg-opacity-lower or .bg-opacity-lowest
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.
- Small: .rounded-small, .rounded-top-small, .rounded-bottom-small, .rounded-start-small and .rounded-end-small.
- Medium: .rounded-medium, .rounded-top-medium, .rounded-bottom-medium, .rounded-start-medium and .rounded-end-medium.
- Large: .rounded-large, .rounded-top-large, .rounded-bottom-large, .rounded-start-large and .rounded-end-large.
New Border style utilities: .border-drag.
Breaking All border color utilities have been removed or changed.
Breaking Border opacity --bs-border-opacity custom property has 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. .border-success and .border-success-subtle → .border-status-positive
5. .border-info and .border-info-subtle → .border-status-info
6. .border-warning and .border-warning-subtle → .border-status-warning
7. .border-danger and .border-danger-subtle → .border-status-negative
8. All the remaining .border-*-subtle (that shouldn’t have been used) → .border-default
9. 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-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 All Boosted responsive display utilities have been renamed to use the colon prefix: .d-sm-{value} → .sm:d-{value}, .d-md-{value} → .md:d-{value}, .d-lg-{value} → .lg:d-{value}, .d-xl-{value} → .xl:d-{value}. You can still have them using $enable-bootstrap-compatibility.
Breaking .d-xxl-{value} responsive display utility has been replaced by .2xl:d-{value} (breakpoint rename and prefix change). Please refer to the new breakpoints’ names. You can still have it using $enable-bootstrap-compatibility.
New .xs:d-{value} and .3xl:d-{value} responsive display utilities have been added. Please refer to the new breakpoints’ names.

Flex

Breaking All Boosted responsive flex utilities have been renamed to use the colon prefix: e.g. .flex-sm-{row|column} → .sm:flex-{row|column}, .justify-content-md-{value} → .md:justify-content-{value}, .order-lg-{number} → .lg:order-{number}, and so on for all sm, md, lg, xl breakpoints. You can still have them using $enable-bootstrap-compatibility.
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 .2xl:d-flex, .2xl:d-inline-flex, .2xl:flex-{row|column}, .2xl:flex-{row|column}-reverse, .2xl:justify-content-{start|end|center|between|around|evenly}, .2xl:align-items-{start|end|center|baseline|stretch}, .2xl:align-self-{start|end|center|baseline|stretch}, .2xl:flex-fill, .2xl:flex-{grow|shrink}-{0|1}, .2xl:flex-{nowrap|wrap|wrap-reverse}, .2xl:order-{number}, .2xl:order-{first|last} and .2xl:align-content-{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: .xs:d-flex, .xs:d-inline-flex, .xs:flex-{row|column}, .xs:flex-{row|column}-reverse, .xs:justify-content-{start|end|center|between|around|evenly}, .xs:align-items-{start|end|center|baseline|stretch}, .xs:align-self-{start|end|center|baseline|stretch}, .xs:flex-fill, .xs:flex-{grow|shrink}-{0|1}, .xs:flex-{nowrap|wrap|wrap-reverse}, .xs:order-{number}, .xs:order-{first|last}, .xs:align-content-{start|end|center|between|around|stretch}, .3xl:d-flex, .3xl:d-inline-flex, .3xl:flex-{row|column}, .3xl:flex-{row|column}-reverse, .3xl:justify-content-{start|end|center|between|around|evenly}, .3xl:align-items-{start|end|center|baseline|stretch}, .3xl:align-self-{start|end|center|baseline|stretch}, .3xl:flex-fill, .3xl:flex-{grow|shrink}-{0|1}, .3xl:flex-{nowrap|wrap|wrap-reverse}, .3xl:order-{number}, .3xl:order-{first|last} and .3xl:align-content-{start|end|center|between|around|stretch}. Please refer to the new breakpoints’ names.

Float

Breaking All Boosted responsive float utilities have been renamed to use the colon prefix: .float-sm-{start|end|none} → .sm:float-{start|end|none}, .float-md-{start|end|none} → .md:float-{start|end|none}, .float-lg-{start|end|none} → .lg:float-{start|end|none}, .float-xl-{start|end|none} → .xl:float-{start|end|none}. You can still have them using $enable-bootstrap-compatibility.
Breaking xxl responsive float utilities have been replaced by 2xl utilities: .float-xxl-{start|end|none} utilities have been replaced by .2xl:float-{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: .xs:float-{start|end|none} and .3xl:float-{start|end|none}. Please refer to the new breakpoints’ names.

Interactions

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

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 All Boosted responsive object fit utilities have been renamed to use the colon prefix: .object-fit-sm-{value} → .sm:object-fit-{value}, .object-fit-md-{value} → .md:object-fit-{value}, .object-fit-lg-{value} → .lg:object-fit-{value}, .object-fit-xl-{value} → .xl:object-fit-{value}. You can still have them using $enable-bootstrap-compatibility.
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 .2xl:object-fit-{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: .xs:object-fit-{contain|cover|fill|scale|none} and .3xl:object-fit-{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-weakest, .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-elevated, .shadow-emphasized, and .shadow-sticky.

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

Info 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 → $12xsmall
  3. 2: (([" \.][mp]|-?gap)[tblrsexy]?-[a-z]{0,3}-?n?)2 → $1small
  4. 3: (([" \.][mp]|-?gap)[tblrsexy]?-[a-z]{0,3}-?n?)3 → $1large
  5. 4: (([" \.][mp]|-?gap)[tblrsexy]?-[a-z]{0,3}-?n?)4 → $12xlarge
  6. 5: (([" \.][mp]|-?gap)[tblrsexy]?-[a-z]{0,3}-?n?)5 → $14xlarge
  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.md:mb-2 → .mb-scaled-2xsmall).
  2. Remaining standalone classes: Follow the previous guide going through all the standalone classes.
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, .xs:m-none, etc...
- 3xsmall: .m-3xsmall, .mx-3xsmall, .my-3xsmall, .mt-3xsmall, .mb-3xsmall, .ms-3xsmall, .me-3xsmall, .xs:m-3xsmall, etc...
- 2xsmall: .m-2xsmall, .mx-2xsmall, .my-2xsmall, .mt-2xsmall, .mb-2xsmall, .ms-2xsmall, .me-2xsmall, .xs:m-2xsmall, etc...
- Xsmall: .m-xsmall, .mx-xsmall, .my-xsmall, .mt-xsmall, .mb-xsmall, .ms-xsmall, .me-xsmall, .xs:m-xsmall, etc...
- Small: .m-small, .mx-small, .my-small, .mt-small, .mb-small, .ms-small, .me-small, .xs:m-small, etc...
- Medium: .m-medium, .mx-medium, .my-medium, .mt-medium, .mb-medium, .ms-medium, .me-medium, .xs:m-medium, etc...
- Large: .m-large, .mx-large, .my-large, .mt-large, .mb-large, .ms-large, .me-large, .xs:m-large, etc...
- Xlarge: .m-xlarge, .mx-xlarge, .my-xlarge, .mt-xlarge, .mb-xlarge, .ms-xlarge, .me-xlarge, .xs:m-xlarge, etc...
- 2xlarge: .m-2xlarge, .mx-2xlarge, .my-2xlarge, .mt-2xlarge, .mb-2xlarge, .ms-2xlarge, .me-2xlarge, .xs:m-2xlarge, etc...
- 3xlarge: .m-3xlarge, .mx-3xlarge, .my-3xlarge, .mt-3xlarge, .mb-3xlarge, .ms-3xlarge, .me-3xlarge, .xs:m-3xlarge, etc...
- 4xlarge: .m-4xlarge, .mx-4xlarge, .my-4xlarge, .mt-4xlarge, .mb-4xlarge, .ms-4xlarge, .me-4xlarge, .xs:m-4xlarge, etc...
- 5xlarge: .m-5xlarge, .mx-5xlarge, .my-5xlarge, .mt-5xlarge, .mb-5xlarge, .ms-5xlarge, .me-5xlarge, .xs:m-5xlarge, etc...
- Auto: .xs:m-auto, .xs:mx-auto, .xs:my-auto, .xs:mt-auto, .xs:mb-auto, .xs:ms-auto, .xs:me-auto, .2xl:m-auto, etc...
- Negative: .m-n3xsmall, .m-n2xsmall, .m-nxsmall, .m-nsmall, .m-nmedium, .m-nlarge, .m-nxlarge, .m-n2xlarge, .m-n3xlarge, .m-n4xlarge, .m-n5xlarge, .mx-n3xsmall, 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,
- 3xsmall: .m-scaled-3xsmall, .mx-scaled-3xsmall, .my-scaled-3xsmall, .mt-scaled-3xsmall, .mb-scaled-3xsmall, .ms-scaled-3xsmall, .me-scaled-3xsmall,
- 2xsmall: .m-scaled-2xsmall, .mx-scaled-2xsmall, .my-scaled-2xsmall, .mt-scaled-2xsmall, .mb-scaled-2xsmall, .ms-scaled-2xsmall, .me-scaled-2xsmall,
- Xsmall: .m-scaled-xsmall, .mx-scaled-xsmall, .my-scaled-xsmall, .mt-scaled-xsmall, .mb-scaled-xsmall, .ms-scaled-xsmall, .me-scaled-xsmall,
- Small: .m-scaled-small, .mx-scaled-small, .my-scaled-small, .mt-scaled-small, .mb-scaled-small, .ms-scaled-small, .me-scaled-small,
- Medium: .m-scaled-medium, .mx-scaled-medium, .my-scaled-medium, .mt-scaled-medium, .mb-scaled-medium, .ms-scaled-medium, .me-scaled-medium,
- Large: .m-scaled-large, .mx-scaled-large, .my-scaled-large, .mt-scaled-large, .mb-scaled-large, .ms-scaled-large, .me-scaled-large,
- Xlarge: .m-scaled-xlarge, .mx-scaled-xlarge, .my-scaled-xlarge, .mt-scaled-xlarge, .mb-scaled-xlarge, .ms-scaled-xlarge, .me-scaled-xlarge,
- 2xlarge: .m-scaled-2xlarge, .mx-scaled-2xlarge, .my-scaled-2xlarge, .mt-scaled-2xlarge, .mb-scaled-2xlarge, .ms-scaled-2xlarge, .me-scaled-2xlarge,
- 3xlarge: .m-scaled-3xlarge, .mx-scaled-3xlarge, .my-scaled-3xlarge, .mt-scaled-3xlarge, .mb-scaled-3xlarge, .ms-scaled-3xlarge, .me-scaled-3xlarge
New fixed padding spacing utilities:
- None: .p-none, .px-none, .py-none, .pt-none, .pb-none, .ps-none, .pe-none, .xs:p-none, etc...
- 3xsmall: .p-3xsmall, .px-3xsmall, .py-3xsmall, .pt-3xsmall, .pb-3xsmall, .ps-3xsmall, .pe-3xsmall, .xs:p-3xsmall, etc...
- 2xsmall: .p-2xsmall, .px-2xsmall, .py-2xsmall, .pt-2xsmall, .pb-2xsmall, .ps-2xsmall, .pe-2xsmall, .xs:p-2xsmall, etc...
- Xsmall: .p-xsmall, .px-xsmall, .py-xsmall, .pt-xsmall, .pb-xsmall, .ps-xsmall, .pe-xsmall, .xs:p-xsmall, etc...
- Small: .p-small, .px-small, .py-small, .pt-small, .pb-small, .ps-small, .pe-small, .xs:p-small, etc...
- Medium: .p-medium, .px-medium, .py-medium, .pt-medium, .pb-medium, .ps-medium, .pe-medium, .xs:p-medium, etc...
- Large: .p-large, .px-large, .py-large, .pt-large, .pb-large, .ps-large, .pe-large, .xs:p-large, etc...
- Xlarge: .p-xlarge, .px-xlarge, .py-xlarge, .pt-xlarge, .pb-xlarge, .ps-xlarge, .pe-xlarge, .xs:p-xlarge, etc...
- 2xlarge: .p-2xlarge, .px-2xlarge, .py-2xlarge, .pt-2xlarge, .pb-2xlarge, .ps-2xlarge, .pe-2xlarge, .xs:p-2xlarge, etc...
- 3xlarge: .p-3xlarge, .px-3xlarge, .py-3xlarge, .pt-3xlarge, .pb-3xlarge, .ps-3xlarge, .pe-3xlarge, .xs:p-3xlarge, etc...
- 4xlarge: .p-4xlarge, .px-4xlarge, .py-4xlarge, .pt-4xlarge, .pb-4xlarge, .ps-4xlarge, .pe-4xlarge, .xs:p-4xlarge, etc...
- 5xlarge: .p-5xlarge, .px-5xlarge, .py-5xlarge, .pt-5xlarge, .pb-5xlarge, .ps-5xlarge, .pe-5xlarge, .xs:p-5xlarge, 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,
- 3xs: .p-scaled-3xsmall, .px-scaled-3xsmall, .py-scaled-3xsmall, .pt-scaled-3xsmall, .pb-scaled-3xsmall, .ps-scaled-3xsmall, .pe-scaled-3xsmall,
- 2xsmall: .p-scaled-2xsmall, .px-scaled-2xsmall, .py-scaled-2xsmall, .pt-scaled-2xsmall, .pb-scaled-2xsmall, .ps-scaled-2xsmall, .pe-scaled-2xsmall,
- Xsmall: .p-scaled-xsmall, .px-scaled-xsmall, .py-scaled-xsmall, .pt-scaled-xsmall, .pb-scaled-xsmall, .ps-scaled-xsmall, .pe-scaled-xsmall,
- Small: .p-scaled-small, .px-scaled-small, .py-scaled-small, .pt-scaled-small, .pb-scaled-small, .ps-scaled-small, .pe-scaled-small,
- Medium: .p-scaled-medium, .px-scaled-medium, .py-scaled-medium, .pt-scaled-medium, .pb-scaled-medium, .ps-scaled-medium, .pe-scaled-medium,
- Large: .p-scaled-large, .px-scaled-large, .py-scaled-large, .pt-scaled-large, .pb-scaled-large, .ps-scaled-large, .pe-scaled-large,
- Xl: .p-scaled-xlarge, .px-scaled-xlarge, .py-scaled-xlarge, .pt-scaled-xlarge, .pb-scaled-xlarge, .ps-scaled-xlarge, .pe-scaled-xlarge,
- 2xl: .p-scaled-2xlarge, .px-scaled-2xlarge, .py-scaled-2xlarge, .pt-scaled-2xlarge, .pb-scaled-2xlarge, .ps-scaled-2xlarge, .pe-scaled-2xlarge,
- 3xl: .p-scaled-3xlarge, .px-scaled-3xlarge, .py-scaled-3xlarge, .pt-scaled-3xlarge, .pb-scaled-3xlarge, .ps-scaled-3xlarge, .pe-scaled-3xlarge
New fixed gap spacing utilities:
- None: .gap-none, .row-gap-none, .column-gap-none, .xs:gap-none, etc...
- 3xsmall: .gap-3xsmall, .row-gap-3xsmall, .column-gap-3xsmall, .xs:gap-3xsmall, etc...
- 2xsmall: .gap-2xsmall, .row-gap-2xsmall, .column-gap-2xsmall, .xs:gap-2xsmall, etc...
- xsmall: .gap-xsmall, .row-gap-xsmall, .column-gap-xsmall, .xs:gap-xsmall, etc...
- Small: .gap-small, .row-gap-small, .column-gap-small, .xs:gap-small, etc...
- Medium: .gap-medium, .row-gap-medium, .column-gap-medium, .xs:gap-medium, etc...
- Large: .gap-large, .row-gap-large, .column-gap-large, .xs:gap-large, etc...
- Xl: .gap-xlarge, .row-gap-xlarge, .column-gap-xlarge, .xs:gap-xlarge, etc...
- 2xl: .gap-2xlarge, .row-gap-2xlarge, .column-gap-2xlarge, .xs:gap-2xlarge, etc...
- 3xl: .gap-3xlarge, .row-gap-3xlarge, .column-gap-3xlarge, .xs:gap-3xlarge, etc...
- 4xlarge: .gap-4xlarge, .row-gap-4xlarge, .column-gap-4xlarge, .xs:gap-4xlarge, etc...
- 5xlarge: .gap-5xlarge, .row-gap-5xlarge, .column-gap-5xlarge, .xs:gap-5xlarge, etc...
New scaled gap spacing utilities:
- None: .gap-scaled-none, .row-gap-scaled-none, .column-gap-scaled-none
- 3xsmall: .gap-scaled-3xsmall, .row-gap-scaled-3xsmall, .column-gap-scaled-3xsmall
- 2xsmall: .gap-scaled-2xsmall, .row-gap-scaled-2xsmall, .column-gap-scaled-2xsmall
- xsmall: .gap-scaled-xsmall, .row-gap-scaled-xsmall, .column-gap-scaled-xsmall
- Small: .gap-scaled-small, .row-gap-scaled-small, .column-gap-scaled-small
- Medium: .gap-scaled-medium, .row-gap-scaled-medium, .column-gap-scaled-medium
- Large: .gap-scaled-large, .row-gap-scaled-large, .column-gap-scaled-large
- Xlarge: .gap-scaled-xlarge, .row-gap-scaled-xlarge, .column-gap-scaled-xlarge
- 2xlarge: .gap-scaled-2xlarge, .row-gap-scaled-2xlarge, .column-gap-scaled-2xlarge
- 3xlarge: .gap-scaled-3xlarge, .row-gap-scaled-3xlarge, .column-gap-scaled-3xlarge

Text

Breaking .text-xxl-{start|end|none} responsive alignment text utility has been replaced by .2xl:text-{start|end|none}. Please refer to the new breakpoints’ names. You can still have it using $enable-bootstrap-compatibility.
New .xs:text-{start|end|none} and .3xl:text-{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
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/_close.scss doesn’t exist anymore. If you were importing it in your project, please make sure to remove it.
Warning scss/_color-palette.scss doesn’t exist anymore. If you were importing it in your project, please make sure to remove it.
Warning scss/mixins/_alert.scss doesn’t exist anymore. If you were importing it in your project, please make sure to remove it.
Warning scss/vendor/_rfs.scss has been removed. It was deprecated and should not have been used.
Breaking font-size() mixin has been removed. Please refer to get-font-size() mixin instead.
Breaking generate-utility() mixin signature was modified, the $is-rfs-media-query parameter was removed. If you were using it, please make sure to update your code. For Bootstrap compatibility mode, we kept the infix breakpoint as the last parameter, so you can still use it for your custom utilities. You can check how we use it in scss/utilities/_breakpoints.scss for reference.

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:
- $core-orange-color-decorative-amber-500
- $core-orange-color-decorative-amethyst-100
- $core-orange-color-decorative-amethyst-200
- $core-orange-color-decorative-amethyst-300
- $core-orange-color-decorative-amethyst-400
- $core-orange-color-decorative-amethyst-500
- $core-orange-color-decorative-amethyst-600
- $core-orange-color-decorative-amethyst-700
- $core-orange-color-decorative-amethyst-800
- $core-orange-color-decorative-amethyst-900
- $core-orange-color-decorative-deep-peach-100
- $core-orange-color-decorative-deep-peach-200
- $core-orange-color-decorative-deep-peach-300
- $core-orange-color-decorative-deep-peach-400
- $core-orange-color-decorative-deep-peach-500
- $core-orange-color-decorative-deep-peach-600
- $core-orange-color-decorative-deep-peach-700
- $core-orange-color-decorative-deep-peach-800
- $core-orange-color-decorative-deep-peach-900
- $core-orange-color-decorative-emerald-100
- $core-orange-color-decorative-emerald-200
- $core-orange-color-decorative-emerald-300
- $core-orange-color-decorative-emerald-400
- $core-orange-color-decorative-emerald-500
- $core-orange-color-decorative-emerald-600
- $core-orange-color-decorative-emerald-700
- $core-orange-color-decorative-emerald-800
- $core-orange-color-decorative-emerald-900
- $core-orange-color-decorative-shocking-pink-100
- $core-orange-color-decorative-shocking-pink-200
- $core-orange-color-decorative-shocking-pink-300
- $core-orange-color-decorative-shocking-pink-400
- $core-orange-color-decorative-shocking-pink-500
- $core-orange-color-decorative-shocking-pink-600
- $core-orange-color-decorative-shocking-pink-700
- $core-orange-color-decorative-shocking-pink-800
- $core-orange-color-decorative-shocking-pink-900
- $core-orange-color-decorative-sky-100
- $core-orange-color-decorative-sky-200
- $core-orange-color-decorative-sky-300
- $core-orange-color-decorative-sky-400
- $core-orange-color-decorative-sky-500
- $core-orange-color-decorative-sky-600
- $core-orange-color-decorative-sky-700
- $core-orange-color-decorative-sky-800
- $core-orange-color-decorative-sky-900
- $core-orange-color-orange-100
- $core-orange-color-orange-200
- $core-orange-color-orange-300
- $core-orange-color-orange-400
- $core-orange-color-orange-500
- $core-orange-color-orange-550
- $core-orange-color-orange-600
- $core-orange-color-orange-700
- $core-orange-color-orange-800
- $core-orange-color-orange-900
- $core-orange-color-warm-gray-100
- $core-orange-color-warm-gray-1000
- $core-orange-font-family-brand-default
- $core-ouds-border-base
- $core-ouds-border-radius-0
- $core-ouds-border-radius-75
- $core-ouds-border-radius-150
- $core-ouds-border-radius-300
- $core-ouds-border-radius-9999
- $core-ouds-border-style-dashed
- $core-ouds-border-style-solid
- $core-ouds-border-width-0
- $core-ouds-border-width-25
- $core-ouds-border-width-50
- $core-ouds-border-width-75
- $core-ouds-border-width-100
- $core-ouds-border-width-125
- $core-ouds-color-functional-black
- $core-ouds-color-functional-dodger-blue-100
- $core-ouds-color-functional-dodger-blue-200
- $core-ouds-color-functional-dodger-blue-300
- $core-ouds-color-functional-dodger-blue-400
- $core-ouds-color-functional-dodger-blue-500
- $core-ouds-color-functional-dodger-blue-600
- $core-ouds-color-functional-dodger-blue-700
- $core-ouds-color-functional-dodger-blue-800
- $core-ouds-color-functional-dodger-blue-900
- $core-ouds-color-functional-gray-dark-240
- $core-ouds-color-functional-gray-dark-320
- $core-ouds-color-functional-gray-dark-400
- $core-ouds-color-functional-gray-dark-640
- $core-ouds-color-functional-gray-dark-720
- $core-ouds-color-functional-gray-dark-800
- $core-ouds-color-functional-gray-dark-880
- $core-ouds-color-functional-gray-light-80
- $core-ouds-color-functional-gray-light-160
- $core-ouds-color-functional-gray-light-240
- $core-ouds-color-functional-gray-light-320
- $core-ouds-color-functional-gray-light-400
- $core-ouds-color-functional-gray-light-800
- $core-ouds-color-functional-gray-light-960
- $core-ouds-color-functional-malachite-100
- $core-ouds-color-functional-malachite-200
- $core-ouds-color-functional-malachite-300
- $core-ouds-color-functional-malachite-400
- $core-ouds-color-functional-malachite-500
- $core-ouds-color-functional-malachite-600
- $core-ouds-color-functional-malachite-700
- $core-ouds-color-functional-malachite-800
- $core-ouds-color-functional-malachite-900
- $core-ouds-color-functional-scarlet-100
- $core-ouds-color-functional-scarlet-200
- $core-ouds-color-functional-scarlet-300
- $core-ouds-color-functional-scarlet-400
- $core-ouds-color-functional-scarlet-500
- $core-ouds-color-functional-scarlet-600
- $core-ouds-color-functional-scarlet-700
- $core-ouds-color-functional-scarlet-800
- $core-ouds-color-functional-scarlet-900
- $core-ouds-color-functional-sun-100
- $core-ouds-color-functional-sun-200
- $core-ouds-color-functional-sun-300
- $core-ouds-color-functional-sun-400
- $core-ouds-color-functional-sun-500
- $core-ouds-color-functional-sun-600
- $core-ouds-color-functional-sun-700
- $core-ouds-color-functional-sun-800
- $core-ouds-color-functional-sun-900
- $core-ouds-color-functional-white
- $core-ouds-color-opacity-black-0
- $core-ouds-color-opacity-black-40
- $core-ouds-color-opacity-black-80
- $core-ouds-color-opacity-black-120
- $core-ouds-color-opacity-black-160
- $core-ouds-color-opacity-black-200
- $core-ouds-color-opacity-black-240
- $core-ouds-color-opacity-black-280
- $core-ouds-color-opacity-black-320
- $core-ouds-color-opacity-black-440
- $core-ouds-color-opacity-black-520
- $core-ouds-color-opacity-black-680
- $core-ouds-color-opacity-black-840
- $core-ouds-color-opacity-dodger-blue
- $core-ouds-color-opacity-malachite
- $core-ouds-color-opacity-scarlet
- $core-ouds-color-opacity-sun
- $core-ouds-color-opacity-white-0
- $core-ouds-color-opacity-white-40
- $core-ouds-color-opacity-white-80
- $core-ouds-color-opacity-white-120
- $core-ouds-color-opacity-white-200
- $core-ouds-color-opacity-white-440
- $core-ouds-color-opacity-white-640
- $core-ouds-color-opacity-white-800
- $core-ouds-color-opacity-white-920
- $core-ouds-dimension-0
- $core-ouds-dimension-50
- $core-ouds-dimension-100
- $core-ouds-dimension-150
- $core-ouds-dimension-200
- $core-ouds-dimension-250
- $core-ouds-dimension-300
- $core-ouds-dimension-350
- $core-ouds-dimension-400
- $core-ouds-dimension-450
- $core-ouds-dimension-500
- $core-ouds-dimension-550
- $core-ouds-dimension-600
- $core-ouds-dimension-650
- $core-ouds-dimension-700
- $core-ouds-dimension-750
- $core-ouds-dimension-800
- $core-ouds-dimension-850
- $core-ouds-dimension-900
- $core-ouds-dimension-1000
- $core-ouds-dimension-1200
- $core-ouds-dimension-1400
- $core-ouds-dimension-1600
- $core-ouds-dimension-1800
- $core-ouds-dimension-2000
- $core-ouds-dimension-3000
- $core-ouds-dimension-4000
- $core-ouds-dimension-6000
- $core-ouds-dimension-7000
- $core-ouds-dimension-9000
- $core-ouds-dimension-11000
- $core-ouds-dimension-base
- $core-ouds-dimension-out-of-system-25
- $core-ouds-dimension-out-of-system-50
- $core-ouds-dimension-out-of-system-75
- $core-ouds-dimension-out-of-system-150
- $core-ouds-dimension-out-of-system-250
- $core-ouds-elevation-blur-0
- $core-ouds-elevation-blur-200
- $core-ouds-elevation-blur-300
- $core-ouds-elevation-blur-400
- $core-ouds-elevation-blur-600
- $core-ouds-elevation-spread-0
- $core-ouds-elevation-spread-n100
- $core-ouds-elevation-spread-n300
- $core-ouds-elevation-x-0
- $core-ouds-elevation-y-0
- $core-ouds-elevation-y-100
- $core-ouds-elevation-y-200
- $core-ouds-elevation-y-300
- $core-ouds-elevation-y-500
- $core-ouds-font-family-monospace-menlo
- $core-ouds-font-letter-spacing-150
- $core-ouds-font-letter-spacing-200
- $core-ouds-font-letter-spacing-250
- $core-ouds-font-letter-spacing-300
- $core-ouds-font-letter-spacing-350
- $core-ouds-font-letter-spacing-450
- $core-ouds-font-letter-spacing-550
- $core-ouds-font-letter-spacing-650
- $core-ouds-font-letter-spacing-750
- $core-ouds-font-letter-spacing-850
- $core-ouds-font-letter-spacing-1050
- $core-ouds-font-letter-spacing-1250
- $core-ouds-font-letter-spacing-1450
- $core-ouds-font-letter-spacing-1850
- $core-ouds-font-line-height-250
- $core-ouds-font-line-height-350
- $core-ouds-font-line-height-450
- $core-ouds-font-line-height-550
- $core-ouds-font-line-height-650
- $core-ouds-font-line-height-750
- $core-ouds-font-line-height-850
- $core-ouds-font-line-height-950
- $core-ouds-font-line-height-1050
- $core-ouds-font-line-height-1250
- $core-ouds-font-line-height-1450
- $core-ouds-font-line-height-1850
- $core-ouds-font-line-height-2050
- $core-ouds-font-size-150
- $core-ouds-font-size-200
- $core-ouds-font-size-250
- $core-ouds-font-size-300
- $core-ouds-font-size-350
- $core-ouds-font-size-450
- $core-ouds-font-size-550
- $core-ouds-font-size-650
- $core-ouds-font-size-750
- $core-ouds-font-size-850
- $core-ouds-font-size-1050
- $core-ouds-font-size-1250
- $core-ouds-font-size-1450
- $core-ouds-font-size-1850
- $core-ouds-font-weight-400
- $core-ouds-font-weight-700
- $core-ouds-grid-column-count-400
- $core-ouds-grid-column-count-600
- $core-ouds-grid-column-count-1200
- $core-ouds-grid-column-gap-100
- $core-ouds-grid-column-gap-200
- $core-ouds-grid-column-gap-400
- $core-ouds-grid-column-gap-600
- $core-ouds-grid-column-gap-800
- $core-ouds-grid-margin-100
- $core-ouds-grid-margin-300
- $core-ouds-grid-margin-400
- $core-ouds-grid-margin-500
- $core-ouds-grid-margin-700
- $core-ouds-grid-margin-1100
- $core-ouds-grid-margin-1700
- $core-ouds-grid-margin-2500
- $core-ouds-grid-max-width-100
- $core-ouds-grid-max-width-200
- $core-ouds-grid-max-width-300
- $core-ouds-grid-max-width-400
- $core-ouds-grid-max-width-500
- $core-ouds-grid-max-width-600
- $core-ouds-grid-max-width-650
- $core-ouds-grid-max-width-700
- $core-ouds-grid-min-width-100
- $core-ouds-grid-min-width-200
- $core-ouds-grid-min-width-300
- $core-ouds-grid-min-width-400
- $core-ouds-grid-min-width-500
- $core-ouds-grid-min-width-600
- $core-ouds-grid-min-width-700
- $core-ouds-grid-min-width-800
- $core-ouds-grid-width-100
- $core-ouds-grid-width-200
- $core-ouds-grid-width-300
- $core-ouds-grid-width-400
- $core-ouds-grid-width-500
- $core-ouds-grid-width-600
- $core-ouds-grid-width-700
- $core-ouds-grid-width-800
- $core-ouds-opacity-0
- $core-ouds-opacity-40
- $core-ouds-opacity-160
- $core-ouds-opacity-320
- $core-ouds-opacity-640
- $core-ouds-opacity-1000
- $ouds-border-radius-default
- $ouds-border-radius-large
- $ouds-border-radius-medium
- $ouds-border-radius-none
- $ouds-border-radius-pill
- $ouds-border-radius-small
- $ouds-border-style-default
- $ouds-border-style-drag
- $ouds-border-width-default
- $ouds-border-width-focus
- $ouds-border-width-focus-inset
- $ouds-border-width-medium
- $ouds-border-width-none
- $ouds-border-width-thick
- $ouds-border-width-thicker
- $ouds-border-width-thin
- $ouds-color-action-disabled-dark
- $ouds-color-action-disabled-light
- $ouds-color-action-enabled-dark
- $ouds-color-action-enabled-light
- $ouds-color-action-focus-dark
- $ouds-color-action-focus-light
- $ouds-color-action-highlighted-dark
- $ouds-color-action-highlighted-light
- $ouds-color-action-hover-dark
- $ouds-color-action-hover-light
- $ouds-color-action-loading-dark
- $ouds-color-action-loading-light
- $ouds-color-action-negative-enabled-dark
- $ouds-color-action-negative-enabled-light
- $ouds-color-action-negative-focus-dark
- $ouds-color-action-negative-focus-light
- $ouds-color-action-negative-hover-dark
- $ouds-color-action-negative-hover-light
- $ouds-color-action-negative-loading-dark
- $ouds-color-action-negative-loading-light
- $ouds-color-action-negative-pressed-dark
- $ouds-color-action-negative-pressed-light
- $ouds-color-action-pressed-dark
- $ouds-color-action-pressed-light
- $ouds-color-action-selected-dark
- $ouds-color-action-selected-light
- $ouds-color-action-support-enabled-dark
- $ouds-color-action-support-enabled-light
- $ouds-color-action-support-focus-dark
- $ouds-color-action-support-focus-light
- $ouds-color-action-support-hover-dark
- $ouds-color-action-support-hover-light
- $ouds-color-action-support-loading-dark
- $ouds-color-action-support-loading-light
- $ouds-color-action-support-pressed-dark
- $ouds-color-action-support-pressed-light
- $ouds-color-action-visited-dark
- $ouds-color-action-visited-light
- $ouds-color-always-black
- $ouds-color-always-on-black
- $ouds-color-always-on-white
- $ouds-color-always-white
- $ouds-color-bg-inverse-low-dark
- $ouds-color-bg-inverse-low-light
- $ouds-color-bg-inverse-high-dark
- $ouds-color-bg-inverse-high-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-accent-emphasized-dark
- $ouds-color-content-on-status-accent-emphasized-light
- $ouds-color-content-on-status-accent-muted-dark
- $ouds-color-content-on-status-accent-muted-light
- $ouds-color-content-on-status-info-emphasized-dark
- $ouds-color-content-on-status-info-emphasized-light
- $ouds-color-content-on-status-info-muted-dark
- $ouds-color-content-on-status-info-muted-light
- $ouds-color-content-on-status-negative-emphasized-dark
- $ouds-color-content-on-status-negative-emphasized-light
- $ouds-color-content-on-status-negative-muted-dark
- $ouds-color-content-on-status-negative-muted-light
- $ouds-color-content-on-status-neutral-emphasized-dark
- $ouds-color-content-on-status-neutral-emphasized-light
- $ouds-color-content-on-status-neutral-muted-dark
- $ouds-color-content-on-status-neutral-muted-light
- $ouds-color-content-on-status-positive-emphasized-dark
- $ouds-color-content-on-status-positive-emphasized-light
- $ouds-color-content-on-status-positive-muted-dark
- $ouds-color-content-on-status-positive-muted-light
- $ouds-color-content-on-status-warning-emphasized-dark
- $ouds-color-content-on-status-warning-emphasized-light
- $ouds-color-content-on-status-warning-muted-dark
- $ouds-color-content-on-status-warning-muted-light
- $ouds-color-content-status-accent-dark
- $ouds-color-content-status-accent-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
- $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-emphasized-higher
- $ouds-color-decorative-neutral-emphasized-low
- $ouds-color-decorative-neutral-emphasized-lower
- $ouds-color-decorative-neutral-emphasized-lowest
- $ouds-color-decorative-neutral-muted-high
- $ouds-color-decorative-neutral-muted-higher
- $ouds-color-decorative-neutral-muted-highest
- $ouds-color-decorative-neutral-muted-low
- $ouds-color-decorative-neutral-muted-lower
- $ouds-color-decorative-neutral-muted-lowest
- $ouds-color-decorative-neutral-muted-medium
- $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-dark
- $ouds-color-opacity-lower-light
- $ouds-color-opacity-lowest-dark
- $ouds-color-opacity-lowest-light
- $ouds-color-opacity-transparent-dark
- $ouds-color-opacity-transparent-light
- $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-dimension-2xlarge
- $ouds-dimension-2xsmall
- $ouds-dimension-3xlarge
- $ouds-dimension-3xsmall
- $ouds-dimension-4xlarge
- $ouds-dimension-4xsmall
- $ouds-dimension-5xlarge
- $ouds-dimension-5xsmall
- $ouds-dimension-6xlarge
- $ouds-dimension-6xsmall
- $ouds-dimension-7xlarge
- $ouds-dimension-7xsmall
- $ouds-dimension-8xlarge
- $ouds-dimension-8xsmall
- $ouds-dimension-9xlarge
- $ouds-dimension-9xsmall
- $ouds-dimension-10xlarge
- $ouds-dimension-10xsmall
- $ouds-dimension-11xlarge
- $ouds-dimension-11xsmall
- $ouds-dimension-12xsmall
- $ouds-dimension-large
- $ouds-dimension-medium
- $ouds-dimension-none
- $ouds-dimension-small
- $ouds-dimension-xlarge
- $ouds-dimension-xsmall
- $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
- $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
- $ouds-elevation-spread-default
- $ouds-elevation-spread-drag
- $ouds-elevation-spread-emphasized
- $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-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-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-system-web
- $ouds-font-family-web-body
- $ouds-font-family-web-code
- $ouds-font-family-web-display
- $ouds-font-family-web-heading
- $ouds-font-family-web-label
- $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-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-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-system-web-default
- $ouds-font-weight-system-web-strong
- $ouds-font-weight-web-body-default
- $ouds-font-weight-web-body-strong
- $ouds-font-weight-web-code
- $ouds-font-weight-web-display
- $ouds-font-weight-web-heading
- $ouds-font-weight-web-label-default
- $ouds-font-weight-web-label-strong
- $ouds-grid-2xl-column-count
- $ouds-grid-2xl-column-gap
- $ouds-grid-2xl-margin
- $ouds-grid-2xl-max-width
- $ouds-grid-2xl-max-width-alt
- $ouds-grid-2xl-min-width
- $ouds-grid-2xl-width
- $ouds-grid-2xs-column-count
- $ouds-grid-2xs-column-gap
- $ouds-grid-2xs-margin
- $ouds-grid-2xs-max-width
- $ouds-grid-2xs-min-width
- $ouds-grid-2xs-width
- $ouds-grid-3xl-column-count
- $ouds-grid-3xl-column-gap
- $ouds-grid-3xl-margin
- $ouds-grid-3xl-min-width
- $ouds-grid-3xl-width
- $ouds-grid-lg-column-count
- $ouds-grid-lg-column-gap
- $ouds-grid-lg-margin
- $ouds-grid-lg-max-width
- $ouds-grid-lg-min-width
- $ouds-grid-lg-width
- $ouds-grid-md-column-count
- $ouds-grid-md-column-gap
- $ouds-grid-md-margin
- $ouds-grid-md-max-width
- $ouds-grid-md-min-width
- $ouds-grid-md-width
- $ouds-grid-sm-column-count
- $ouds-grid-sm-column-gap
- $ouds-grid-sm-margin
- $ouds-grid-sm-max-width
- $ouds-grid-sm-min-width
- $ouds-grid-sm-width
- $ouds-grid-xl-column-count
- $ouds-grid-xl-column-gap
- $ouds-grid-xl-margin
- $ouds-grid-xl-max-width
- $ouds-grid-xl-min-width
- $ouds-grid-xl-width
- $ouds-grid-xs-column-count
- $ouds-grid-xs-column-gap
- $ouds-grid-xs-margin
- $ouds-grid-xs-max-width
- $ouds-grid-xs-min-width
- $ouds-grid-xs-width
- $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-3xs
- $ouds-size-icon-decorative-4xs
- $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-size-min-interactive-area
- $ouds-space-column-gap-2xl
- $ouds-space-column-gap-2xs
- $ouds-space-column-gap-3xs
- $ouds-space-column-gap-lg
- $ouds-space-column-gap-md
- $ouds-space-column-gap-none
- $ouds-space-column-gap-sm
- $ouds-space-column-gap-xl
- $ouds-space-column-gap-xs
- $ouds-space-fixed-2xl
- $ouds-space-fixed-2xs
- $ouds-space-fixed-3xl
- $ouds-space-fixed-3xs
- $ouds-space-fixed-4xl
- $ouds-space-fixed-5xl
- $ouds-space-fixed-lg
- $ouds-space-fixed-md
- $ouds-space-fixed-none
- $ouds-space-fixed-sm
- $ouds-space-fixed-xl
- $ouds-space-fixed-xs
- $ouds-space-inset-2xl
- $ouds-space-inset-2xs
- $ouds-space-inset-3xl
- $ouds-space-inset-3xs
- $ouds-space-inset-4xs
- $ouds-space-inset-lg
- $ouds-space-inset-md
- $ouds-space-inset-none
- $ouds-space-inset-sm
- $ouds-space-inset-xl
- $ouds-space-inset-xs
- $ouds-space-padding-block-2xl
- $ouds-space-padding-block-2xs
- $ouds-space-padding-block-3xl
- $ouds-space-padding-block-3xs
- $ouds-space-padding-block-4xl
- $ouds-space-padding-block-lg
- $ouds-space-padding-block-md
- $ouds-space-padding-block-none
- $ouds-space-padding-block-sm
- $ouds-space-padding-block-xl
- $ouds-space-padding-block-xs
- $ouds-space-padding-inline-2xl
- $ouds-space-padding-inline-2xs
- $ouds-space-padding-inline-3xl
- $ouds-space-padding-inline-3xs
- $ouds-space-padding-inline-4xl
- $ouds-space-padding-inline-4xs
- $ouds-space-padding-inline-lg
- $ouds-space-padding-inline-md
- $ouds-space-padding-inline-none
- $ouds-space-padding-inline-sm
- $ouds-space-padding-inline-xl
- $ouds-space-padding-inline-xs
- $ouds-space-row-gap-2xs
- $ouds-space-row-gap-3xs
- $ouds-space-row-gap-lg
- $ouds-space-row-gap-md
- $ouds-space-row-gap-none
- $ouds-space-row-gap-sm
- $ouds-space-row-gap-xs
- $ouds-space-scaled-2xlarge-desktop
- $ouds-space-scaled-2xlarge-mobile
- $ouds-space-scaled-2xlarge-tablet
- $ouds-space-scaled-2xsmall-desktop
- $ouds-space-scaled-2xsmall-mobile
- $ouds-space-scaled-2xsmall-tablet
- $ouds-space-scaled-3xlarge-desktop
- $ouds-space-scaled-3xlarge-mobile
- $ouds-space-scaled-3xlarge-tablet
- $ouds-space-scaled-3xsmall-desktop
- $ouds-space-scaled-3xsmall-mobile
- $ouds-space-scaled-3xsmall-tablet
- $ouds-space-scaled-large-desktop
- $ouds-space-scaled-large-mobile
- $ouds-space-scaled-large-tablet
- $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-small-desktop
- $ouds-space-scaled-small-mobile
- $ouds-space-scaled-small-tablet
- $ouds-space-scaled-xlarge-desktop
- $ouds-space-scaled-xlarge-mobile
- $ouds-space-scaled-xlarge-tablet
- $ouds-space-scaled-xsmall-desktop
- $ouds-space-scaled-xsmall-mobile
- $ouds-space-scaled-xsmall-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-inset
- $ouds-color-border-focus
- $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-accent-emphasized
- $ouds-color-content-on-status-accent-muted
- $ouds-color-content-on-status-info-emphasized
- $ouds-color-content-on-status-info-muted
- $ouds-color-content-on-status-negative-emphasized
- $ouds-color-content-on-status-negative-muted
- $ouds-color-content-on-status-neutral-emphasized
- $ouds-color-content-on-status-neutral-muted
- $ouds-color-content-on-status-positive-emphasized
- $ouds-color-content-on-status-positive-muted
- $ouds-color-content-on-status-warning-emphasized
- $ouds-color-content-on-status-warning-muted
- $ouds-color-content-status-accent
- $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-emphasized-higher
- $ouds-color-decorative-neutral-emphasized-low
- $ouds-color-decorative-neutral-emphasized-lower
- $ouds-color-decorative-neutral-emphasized-lowest
- $ouds-color-decorative-neutral-muted-high
- $ouds-color-decorative-neutral-muted-higher
- $ouds-color-decorative-neutral-muted-highest
- $ouds-color-decorative-neutral-muted-low
- $ouds-color-decorative-neutral-muted-lower
- $ouds-color-decorative-neutral-muted-lowest
- $ouds-color-decorative-neutral-muted-medium
- $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-md
- --bs-space-scaled-none
- --bs-space-scaled-sm
- --bs-space-scaled-xs
- --bs-space-scaled-2xs
- --bs-space-scaled-3xs
- --bs-space-scaled-3xl
- --bs-space-scaled-lg
- --bs-space-scaled-xl
- --bs-space-scaled-2xl
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-border-opacity
- --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

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.
Breaking add and subtract functions have been removed use calc instead.
Info The list-unstyled mixin has been updated to remove the list margin bottom.

Migrating from Boosted

On this page On this page

Foundations

Fonts

Content styles

Typography

Layout

Icons

Components

Alerts

Badges

Breadcrumb

Bullet list

Close button

Buttons

Chips

Links

List group

Scrollspy

Tags

Forms

Checks & radios

Checkbox

Placeholders

Radio button

Select

Switch

Text Input

Text Area

Validation

Helpers

Clearfix

Color background

Colored links

Divider

Icon link

Icon

Position

Ratio

Vertical rule

Utilities

Background

Border

Colors

Display

Flex

Float

Interactions

Link

Object fit

Opacity

Shadow

Sizing

Spacings

Text

Examples

CSS and Sass variables

Sass

On this page