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.
On this page
This guide provides information on how to migrate from Boosted (latest release) to OUDS Web, with Bootstrap compatibility turned off. Learn more about Bootstrap compatibility.
Let’s start with the most obvious change you’ll notice: the name. Boosted is now OUDS Web.
- The NPM package is now
@ouds/web. - The CSS and JS files have been renamed:
boosted-grid.css→ouds-web-grid.cssboosted-grid.min.css→ouds-web-grid.min.cssboosted-reboot.css→ouds-web-reboot.cssboosted-reboot.min.css→ouds-web-reboot.min.cssboosted-utilities.css→ouds-web-utilities.cssboosted-utilities.min.css→ouds-web-utilities.min.cssboosted.css→ouds-web.cssboosted.min.css→ouds-web.min.cssboosted.bundle.js→ouds-web.bundle.jsboosted.bundle.min.js→ouds-web.bundle.min.jsboosted.esm.js→ouds-web.esm.jsboosted.esm.min.js→ouds-web.esm.min.jsboosted.js→ouds-web.jsboosted.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
#f16e00to#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
rootandroot-inverted. They are complementary tolightanddark. See more on our color modes page -
Warning The root selector have been tweaked for more flexibility on JS frameworks. Please don’t hesitate to contact us if you find any issue with it.
Fonts
OUDS Web doesn’t use the Helvetica Neue font. Instead, it uses the system font stack. This means that the font will be slightly different depending on the operating system and browser being used.
Technically, it means that you can get rid of the following things:
- Helvetica Neue woff2 files:
fonts/HelvNeue55_W1G.woff2,fonts/HelvNeue75_W1G.woff2,fonts/HelveticaNeueW20-55Roman.woff2, andfonts/HelveticaNeueW20-75Bold.woff2. orange-helvetica.*.cssfile (default, RTL, or minified version).- If you were customizing your Sass compilation, you can remove the
@import "orange-helvetica";line from your Sass files if it was there.
Content styles
Typography
-
New Body fonts’ sizes are now responsive and can change depending on the screen size. See Typography for more details.
-
New A
max-widthhas been added on all font references for readability reasons. If you want to get rid of themax-width, please use our.mw-nonewidth utility. -
New Selected text is now styled with a specific text
colorandbackground-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
.initialismhas been removed. -
Warning Default spacing values now use
pxs instead ofems for fixed component spacing, to keep as much space as possible for meaningful content on zoom.
Layout
- Breaking Responsive breakpoints have changed:
2xsand3xlhave been added.xxlhas been renamed to2xl.- The breakpoints values have changed. Please refer to the breakpoints’ documentation.
- The default container to use is now
.container-fluidassociated to.container-max-widthinstead 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 inside0|1|2|3|4|5. Gutter utilities values now usenone|smash|shortest|shorter|short|medium|tall|taller|tallest|spacious|huge|jumbo. Proportional equivalence between0→none,1→shortest,2→shorter,3→medium,4→tall,5→spacious.
All responsive classes, helpers, and utilities have been updated accordingly to match the new breakpoints.
- Info
.containerand.container-{breakpoint}have been removed from the default build but you can still have them using$enable-bootstrap-compatibility. - Info
xxlbreakpoint and thus all related classes (like.container-xxl,.col-xxl-*) can still be available when$enable-bootstrap-compatibilityis enabled.
Components
Close button
- Warning
.btn-close-whiteclass has been removed as it was deprecated in Boosted v5.3.3.
Buttons
- New
.btn-default,.btn-strong,.btn-minimal, and.btn-negativehave been added. - New
.btn-on-colored-bghas been added; it can be used with.btn-default,.btn-strongand.btn-minimalto get variants on colored backgrounds (neither primary, nor secondary, nor tertiary, nor emphasized backgrounds). - Breaking
.btn-primary,.btn-secondary,.btn-success,.btn-danger,.btn-warning,.btn-info,.btn-light,.btn-darkandbtn-dropdownhave been removed. You can still have them using$enable-bootstrap-compatibility. Here is the visual correspondence:.btn-primaryand.btn-darkwill look as.btn-strong.btn-secondaryand.btn-successwill look as.btn-default.btn-dangerand.btn-warningwill look as.btn-negative.btn-infoand.btn-lightwill look as.btn-minimal
- Breaking
.btn-no-outlinehas been removed. You can use.btn-minimalinstead. - Breaking
.btn-socialand 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-smand.btn-lghave been removed. - Breaking Loading buttons implementation has changed. You should now use the classes
.loading-indeterminateand.loading-determinateand 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.
Links
- New New standalone link component has been added. Use
.linkclass to get it. - New Use
.link-smclass to get small standalone link. - New
.link-on-colored-bghas been added; it can be used to get variants on colored backgrounds. - Warning A
.linkclass should be added to existing links with.link-chevronclass to comply with the OUDS Web documentation and ensure future compatibility.
Forms
Checks & radios
- Warning
form-star-rating()mixin has been removed as it was deprecated in Boosted v5.3.2.
Helpers
Color background
-
Breaking Most color-background color helpers have been removed or changed.
-
New The new color-background color helpers are now available. Visit our color-bg page to see more.
-
Info Here are the modifications to apply in the exact same order to your websites. Please make sure to adapt the
[data-bs-theme]to your context:See more details about[data-bs-theme]..text-bg-primary→.text-bg-brand-primary.text-bg-secondary→.text-bg-emphasizedor.text-bg-neutral-emphasized.text-bg-success→.text-bg-status-positive-emphasizedor in some rare cases.text-bg-status-positive-muted.text-bg-danger→.text-bg-status-negative-emphasizedor in some rare cases.text-bg-status-negative-muted.text-bg-warning→.text-bg-status-warning-emphasizedor in some rare cases.text-bg-status-warning-muted.text-bg-info→.text-bg-status-info-emphasizedor in some rare cases.text-bg-status-info-muted.text-bg-light→.text-bg-secondary.text-bg-dark→.text-bg-emphasized
Colored links
- Breaking All colored links helpers are unstyled in OUDS Web. Classes still exist for Bootstrap compatibility.
Icon link
- Info
.icon-linkand.link-chevronare 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, wherehstands for heading and size is one ofsfor small,mfor medium,lfor large, orxlfor x-large.b{size}-short-icon,.b{size}-medium-icon, ,.h{size}-tall-icon, wherebstands for body and size is one ofmfor medium, orlfor large
- Responsive icons’ sizes in regular texts:
.b{size}-short-icon,.b{size}-medium-icon,.b{size}-tall-icon, wherebstands for body and size is one ofsfor small,mfor medium, orlfor large - Fixed icons’ sizes for decorative standalone icons:
.decorative-{size}-iconwhere size is one ofshortest|shorter|short|medium|tall|taller|tallest
- Responsive icons’ sizes in headings:
Position
-
Breaking Responsive sticky helpers
.sticky-xxl-{top|bottom}have been removed and replaced by their equivalent.sticky-2xl-{top|bottom}. You can still have them using$enable-bootstrap-compatibility. -
New Responsive sticky helpers:
.sticky-xs-{top|bottom},.sticky-2xl-{top|bottom}and.sticky-3xl-{top|bottom}.
Utilities
Background
-
Breaking Most background color utilities have been removed or changed.
-
Breaking Background opacity utilities have been removed.
-
New The new background color utilities are now available. Visit our background page to see more.
-
Info Here are the modifications to apply in the exact same order to your websites. Please make sure to adapt the
[data-bs-theme]to your context:See more details about[data-bs-theme]..bg-transparentstays the same.bg-white→.bg-always-white.bg-black→.bg-always-black.bg-primary→.bg-brand-primary.bg-primary-subtle(that shouldn’t have been used) →.bg-tertiary.bg-secondary→.bg-emphasizedor in some rare cases.bg-status-neutral-emphasized.bg-secondary-subtle(that shouldn’t have been used) →.bg-secondary.bg-success→.bg-status-positive-emphasizedor in some rare cases.bg-status-positive-muted.bg-success-subtle(that shouldn’t have been used) →.bg-status-positive-muted.bg-danger→.bg-status-negative-emphasizedor in some rare cases.bg-status-negative-muted.bg-danger-subtle(that shouldn’t have been used) →.bg-status-negative-muted.bg-info→.bg-status-info-emphasizedor in some rare cases.bg-status-info-muted.bg-info-subtle(that shouldn’t have been used) →.bg-status-positive-muted.bg-warning→.bg-status-warning-emphasized,.bg-status-accent-emphasizedor in some rare cases.bg-status-warning-muted,.bg-status-accent-muted.bg-warning-subtle(that shouldn’t have been used) →.bg-status-warning-mutedor.bg-status-accent-muteddepending on your context.bg-body→.bg-primary.bg-body-secondary→.bg-secondary.bg-body-tertiary(that shouldn’t have been used) →.bg-secondary.bg-light→.bg-secondary.bg-light-subtle(that shouldn’t have been used) →.bg-secondary.bg-dark→.bg-emphasizedor.bg-always-blackdepending on your context.bg-dark-subtle(that shouldn’t have been used) →.bg-secondary.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-4and.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-0and.rounded-end-0. - 1:
.rounded-1,.rounded-top-1,.rounded-bottom-1,.rounded-start-1and.rounded-end-1. - 2:
.rounded-2,.rounded-top-2,.rounded-bottom-2,.rounded-start-2and.rounded-end-2. - 3:
.rounded-3,.rounded-top-3,.rounded-bottom-3,.rounded-start-3and.rounded-end-3. - 4:
.rounded-4,.rounded-top-4,.rounded-bottom-4,.rounded-start-4and.rounded-end-4. - 5:
.rounded-5,.rounded-top-5,.rounded-bottom-5,.rounded-start-5and.rounded-end-5.
- 0:
-
New Border radius utilities with all sizes:
- None:
.rounded-none,.rounded-top-none,.rounded-bottom-none,.rounded-start-noneand.rounded-end-none. - Short:
.rounded-short,.rounded-top-short,.rounded-bottom-short,.rounded-start-shortand.rounded-end-short. - Medium:
.rounded-medium,.rounded-top-medium,.rounded-bottom-medium,.rounded-start-mediumand.rounded-end-medium. - Tall:
.rounded-tall,.rounded-top-tall,.rounded-bottom-tall,.rounded-start-talland.rounded-end-tall.
- None:
-
New Border style utilities:
.border-drag. -
Breaking All border color utilities have been removed or changed.
-
Breaking Border opacity utilities have been removed.
-
New The new border color utilities are now available. Visit our border page to see more.
-
Info Here are the modifications to apply in your websites:
.border-primary→.border-brand-primary.border-black→.border-always-blackor.border-always-on-whiteor.border-on-brand-primary.border-white→.border-always-whiteor.border-always-on-black- All
.border-*-subtle(that shouldn’t have been used) →.border-default - 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:
.text-primary(-emphasis)→.text-brand-primary.text-secondary(-emphasis)→.text-muted.text-success(-emphasis)(that shouldn’t have been used on texts) →.text-status-positive.text-danger(-emphasis)(that shouldn’t have been used on texts) →.text-status-negative.text-warning(-emphasis)(that shouldn’t have been used on texts) →.text-status-warning.text-info(-emphasis)(that shouldn’t have been used on texts) →.text-status-info.text-light(-emphasis)→.text-disabled.text-dark(-emphasis)→.text-defaultor see.text-blackbelow.text-body(-emphasis)→.text-defaultor.text-on-status-muted.text-body-secondary→.text-muted.text-body-tertiary→.text-disabledor.text-mutedin some cases.text-black→.text-always-blackor.text-on-brand-primaryor.text-on-status-emphasizedor.text-on-status-emphasized-altor.text-always-on-white.text-white→.text-always-whiteor.text-always-on-black.text-black-50→.text-muted.text-white-50→.text-muted.text-resetstays the same
Display
- Breaking
.d-xxl-{value}responsive display utility has been replaced by.d-2xl-{value}. Please refer to the new breakpoints’ names. You can still have it using$enable-bootstrap-compatibility. - New
.d-xs-{value}and.d-3xl-{value}responsive display utilities have been added. Please refer to the new breakpoints’ names.
Flex
- Breaking
xxlresponsive flex utilities have been replaced by2xlutilities:.d-xxl-flex,.d-xxl-inline-flex,.flex-xxl-{row|column},.flex-xxl-{row|column}-reverse,.justify-content-xxl-{start|end|center|between|around|evenly},.align-items-xxl-{start|end|center|baseline|stretch},.align-self-xxl-{start|end|center|baseline|stretch},.flex-xxl-fill,.flex-xxl-{grow|shrink}-{0|1},.flex-xxl-{nowrap|wrap|wrap-reverse},.order-xxl-{number},.order-xxl-{first|last}and.align-content-xxl-{start|end|center|between|around|stretch}utilities have been replaced by.d-2xl-flex,.d-2xl-inline-flex,.flex-2xl-{row|column},.flex-2xl-{row|column}-reverse,.justify-content-2xl-{start|end|center|between|around|evenly},.align-items-2xl-{start|end|center|baseline|stretch},.align-self-2xl-{start|end|center|baseline|stretch},.flex-2xl-fill,.flex-2xl-{grow|shrink}-{0|1},.flex-2xl-{nowrap|wrap|wrap-reverse},.order-2xl-{number},.order-2xl-{first|last}and.align-content-2xl-{start|end|center|between|around|stretch}. Please refer to the new breakpoints’ names. You can still have them using$enable-bootstrap-compatibility. - New
xsand3xlresponsive flex utilities have been added:.d-xs-flex,.d-xs-inline-flex,.flex-xs-{row|column},.flex-xs-{row|column}-reverse,.justify-content-xs-{start|end|center|between|around|evenly},.align-items-xs-{start|end|center|baseline|stretch},.align-self-xs-{start|end|center|baseline|stretch},.flex-xs-fill,.flex-xs-{grow|shrink}-{0|1},.flex-xs-{nowrap|wrap|wrap-reverse},.order-xs-{number},.order-xs-{first|last},.align-content-xs-{start|end|center|between|around|stretch},.d-3xl-flex,.d-3xl-inline-flex,.flex-3xl-{row|column},.flex-3xl-{row|column}-reverse,.justify-content-3xl-{start|end|center|between|around|evenly},.align-items-3xl-{start|end|center|baseline|stretch},.align-self-3xl-{start|end|center|baseline|stretch},.flex-3xl-fill,.flex-3xl-{grow|shrink}-{0|1},.flex-3xl-{nowrap|wrap|wrap-reverse},.order-3xl-{number},.order-3xl-{first|last}and.align-content-3xl-{start|end|center|between|around|stretch}. Please refer to the new breakpoints’ names.
Float
- Breaking
xxlresponsive float utilities have been replaced by2xlutilities:.float-xxl-{start|end|none}utilities have been replaced by.float-2xl-{start|end|none}. Please refer to the new breakpoints’ names. You can still have it using$enable-bootstrap-compatibility. - New
xsand3xlresponsive float utilities have been added:.float-xs-{start|end|none}and.float-3xl-{start|end|none}. Please refer to the new breakpoints’ names.
Link
- Breaking
.link-opacity,.link-offset,.link-underline,.link-underline-opacityand.opacity-100have been removed from the build and from the documentation. They are useless in OUDS web.
Object fit
- Breaking
xxlresponsive object fit utilities have been replaced by2xlutilities:.object-fit-xxl-{contain|cover|fill|scale|none}utilities have been replaced by.object-fit-2xl-{contain|cover|fill|scale|none}. Please refer to the new breakpoints’ names. You can still have them using$enable-bootstrap-compatibility. - New
xsand3xlresponsive object fit utilities have been added:.object-fit-xs-{contain|cover|fill|scale|none}and.object-fit-3xl-{contain|cover|fill|scale|none}. Please refer to the new breakpoints’ names. - Info
xxlresponsive object fit utilities can still be available when$enable-bootstrap-compatibilityis on.
Opacity
- Breaking
.opacity-0,.opacity-25,.opacity-50,.opacity-75and.opacity-100have been removed from the default build. Please check the new opacity values directly in the documentation and adapt your websites to them. You can still have them using$enable-bootstrap-compatibility. - New Opacity utilities:
.opacity-invisible,.opacity-weaker,.opacity-weak,.opacity-medium,.opacity-strongand.opacity-opaque.
Shadow
- Breaking
.shadow,.shadow-smand.shadow-lghave been removed from the default build. Please check the new shadows values directly in the documentation and adapt your websites to them. You can still have them using$enable-bootstrap-compatibility. - New Shadows utilities:
.shadow-none,.shadow-raised,.shadow-drag,.shadow-default,.shadow-emphasized,.shadow-sticky-default,.shadow-sticky-emphasizedand.shadow-sticky-navigation-scrolled.
Sizing
- New Sizing utility
.mw-noneto setmax-width: none. This utility is particularly useful now that amax-widthhas been added on all font references (for readability reasons), if you want to omit it in some special cases.
Spacings
-
Breaking The following margin spacing utilities have been removed from the default build (
.m{position}-{breakpoint}-{negative}{value}). Please check the new spacing values directly in the documentation and adapt your websites to them. You can still have them using$enable-bootstrap-compatibility:- 0:
.m-0,.mx-0,.my-0,.mt-0,.mb-0,.ms-0,.me-0,.m-sm-0, etc… - 1:
.m-1,.mx-1,.my-1,.mt-1,.mb-1,.ms-1,.me-1,.m-sm-1, etc… - 2:
.m-2,.mx-2,.my-2,.mt-2,.mb-2,.ms-2,.me-2,.m-sm-2, etc… - 3:
.m-3,.mx-3,.my-3,.mt-3,.mb-3,.ms-3,.me-3,.m-sm-3, etc… - 4:
.m-4,.mx-4,.my-4,.mt-4,.mb-4,.ms-4,.me-4,.m-sm-4, etc… - 5:
.m-5,.mx-5,.my-5,.mt-5,.mb-5,.ms-5,.me-5,.m-sm-5, etc… - Negative:
.m-n1,.m-n2,.m-n3,.m-n4,.m-n5,.mx-n1, etc…
- 0:
-
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…
- 0:
-
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…
- 0:
-
New fixed margin spacing utilities:
- None:
.m-none,.mx-none,.my-none,.mt-none,.mb-none,.ms-none,.me-none,.m-xs-none, etc… - Smash:
.m-smash,.mx-smash,.my-smash,.mt-smash,.mb-smash,.ms-smash,.me-smash,.m-xs-smash, etc… - Shortest:
.m-shortest,.mx-shortest,.my-shortest,.mt-shortest,.mb-shortest,.ms-shortest,.me-shortest,.m-xs-shortest, etc… - Shorter:
.m-shorter,.mx-shorter,.my-shorter,.mt-shorter,.mb-shorter,.ms-shorter,.me-shorter,.m-xs-shorter, etc… - Short:
.m-short,.mx-short,.my-short,.mt-short,.mb-short,.ms-short,.me-short,.m-xs-short, etc… - Medium:
.m-medium,.mx-medium,.my-medium,.mt-medium,.mb-medium,.ms-medium,.me-medium,.m-xs-medium, etc… - Tall:
.m-tall,.mx-tall,.my-tall,.mt-tall,.mb-tall,.ms-tall,.me-tall,.m-xs-tall, etc… - Taller:
.m-taller,.mx-taller,.my-taller,.mt-taller,.mb-taller,.ms-taller,.me-taller,.m-xs-taller, etc… - Tallest:
.m-tallest,.mx-tallest,.my-tallest,.mt-tallest,.mb-tallest,.ms-tallest,.me-tallest,.m-xs-tallest, etc… - Spacious:
.m-spacious,.mx-spacious,.my-spacious,.mt-spacious,.mb-spacious,.ms-spacious,.me-spacious,.m-xs-spacious, etc… - Huge:
.m-huge,.mx-huge,.my-huge,.mt-huge,.mb-huge,.ms-huge,.me-huge,.m-xs-huge, etc… - Jumbo:
.m-jumbo,.mx-jumbo,.my-jumbo,.mt-jumbo,.mb-jumbo,.ms-jumbo,.me-jumbo,.m-xs-jumbo, etc… - Auto:
.m-xs-auto,.mx-xs-auto,.my-xs-auto,.mt-xs-auto,.mb-xs-auto,.ms-xs-auto,.me-xs-auto,.m-2xl-auto, etc… - Negative:
.m-nsmash,.m-nshortest,.m-nshorter,.m-nshort,.m-nmedium,.m-ntall,.m-ntaller,.m-ntallest,.m-nspacious,.m-nhuge,.m-njumbo,.mx-nsmash, etc…
- None:
-
New scaled margin spacing utilities:
- None:
.m-scaled-none,.mx-scaled-none,.my-scaled-none,.mt-scaled-none,.mb-scaled-none,.ms-scaled-none,.me-scaled-none, - Smash:
.m-scaled-smash,.mx-scaled-smash,.my-scaled-smash,.mt-scaled-smash,.mb-scaled-smash,.ms-scaled-smash,.me-scaled-smash, - Shortest:
.m-scaled-shortest,.mx-scaled-shortest,.my-scaled-shortest,.mt-scaled-shortest,.mb-scaled-shortest,.ms-scaled-shortest,.me-scaled-shortest, - Shorter:
.m-scaled-shorter,.mx-scaled-shorter,.my-scaled-shorter,.mt-scaled-shorter,.mb-scaled-shorter,.ms-scaled-shorter,.me-scaled-shorter, - Short:
.m-scaled-short,.mx-scaled-short,.my-scaled-short,.mt-scaled-short,.mb-scaled-short,.ms-scaled-short,.me-scaled-short, - Medium:
.m-scaled-medium,.mx-scaled-medium,.my-scaled-medium,.mt-scaled-medium,.mb-scaled-medium,.ms-scaled-medium,.me-scaled-medium, - Tall:
.m-scaled-tall,.mx-scaled-tall,.my-scaled-tall,.mt-scaled-tall,.mb-scaled-tall,.ms-scaled-tall,.me-scaled-tall, - Taller:
.m-scaled-taller,.mx-scaled-taller,.my-scaled-taller,.mt-scaled-taller,.mb-scaled-taller,.ms-scaled-taller,.me-scaled-taller, - Tallest:
.m-scaled-tallest,.mx-scaled-tallest,.my-scaled-tallest,.mt-scaled-tallest,.mb-scaled-tallest,.ms-scaled-tallest,.me-scaled-tallest, - Spacious:
.m-scaled-spacious,.mx-scaled-spacious,.my-scaled-spacious,.mt-scaled-spacious,.mb-scaled-spacious,.ms-scaled-spacious,.me-scaled-spacious
- None:
-
New fixed padding spacing utilities:
- None:
.p-none,.px-none,.py-none,.pt-none,.pb-none,.ps-none,.pe-none,.p-xs-none, etc… - Smash:
.p-smash,.px-smash,.py-smash,.pt-smash,.pb-smash,.ps-smash,.pe-smash,.p-xs-smash, etc… - Shortest:
.p-shortest,.px-shortest,.py-shortest,.pt-shortest,.pb-shortest,.ps-shortest,.pe-shortest,.p-xs-shortest, etc… - Shorter:
.p-shorter,.px-shorter,.py-shorter,.pt-shorter,.pb-shorter,.ps-shorter,.pe-shorter,.p-xs-shorter, etc… - Short:
.p-short,.px-short,.py-short,.pt-short,.pb-short,.ps-short,.pe-short,.p-xs-short, etc… - Medium:
.p-medium,.px-medium,.py-medium,.pt-medium,.pb-medium,.ps-medium,.pe-medium,.p-xs-medium, etc… - Tall:
.p-tall,.px-tall,.py-tall,.pt-tall,.pb-tall,.ps-tall,.pe-tall,.p-xs-tall, etc… - Taller:
.p-taller,.px-taller,.py-taller,.pt-taller,.pb-taller,.ps-taller,.pe-taller,.p-xs-taller, etc… - Tallest:
.p-tallest,.px-tallest,.py-tallest,.pt-tallest,.pb-tallest,.ps-tallest,.pe-tallest,.p-xs-tallest, etc… - Spacious:
.p-spacious,.px-spacious,.py-spacious,.pt-spacious,.pb-spacious,.ps-spacious,.pe-spacious,.p-xs-spacious, etc… - Huge:
.p-huge,.px-huge,.py-huge,.pt-huge,.pb-huge,.ps-huge,.pe-huge,.p-xs-huge, etc… - Jumbo:
.p-jumbo,.px-jumbo,.py-jumbo,.pt-jumbo,.pb-jumbo,.ps-jumbo,.pe-jumbo,.p-xs-jumbo, etc…
- None:
-
New scaled padding spacing utilities:
- None:
.p-scaled-none,.px-scaled-none,.py-scaled-none,.pt-scaled-none,.pb-scaled-none,.ps-scaled-none,.pe-scaled-none, - Smash:
.p-scaled-smash,.px-scaled-smash,.py-scaled-smash,.pt-scaled-smash,.pb-scaled-smash,.ps-scaled-smash,.pe-scaled-smash, - Shortest:
.p-scaled-shortest,.px-scaled-shortest,.py-scaled-shortest,.pt-scaled-shortest,.pb-scaled-shortest,.ps-scaled-shortest,.pe-scaled-shortest, - Shorter:
.p-scaled-shorter,.px-scaled-shorter,.py-scaled-shorter,.pt-scaled-shorter,.pb-scaled-shorter,.ps-scaled-shorter,.pe-scaled-shorter, - Short:
.p-scaled-short,.px-scaled-short,.py-scaled-short,.pt-scaled-short,.pb-scaled-short,.ps-scaled-short,.pe-scaled-short, - Medium:
.p-scaled-medium,.px-scaled-medium,.py-scaled-medium,.pt-scaled-medium,.pb-scaled-medium,.ps-scaled-medium,.pe-scaled-medium, - Tall:
.p-scaled-tall,.px-scaled-tall,.py-scaled-tall,.pt-scaled-tall,.pb-scaled-tall,.ps-scaled-tall,.pe-scaled-tall, - Taller:
.p-scaled-taller,.px-scaled-taller,.py-scaled-taller,.pt-scaled-taller,.pb-scaled-taller,.ps-scaled-taller,.pe-scaled-taller, - Tallest:
.p-scaled-tallest,.px-scaled-tallest,.py-scaled-tallest,.pt-scaled-tallest,.pb-scaled-tallest,.ps-scaled-tallest,.pe-scaled-tallest, - Spacious:
.p-scaled-spacious,.px-scaled-spacious,.py-scaled-spacious,.pt-scaled-spacious,.pb-scaled-spacious,.ps-scaled-spacious,.pe-scaled-spacious
- None:
-
New fixed gap spacing utilities:
- None:
.gap-none,.row-gap-none,.column-gap-none,.gap-xs-none, etc… - Smash:
.gap-smash,.row-gap-smash,.column-gap-smash,.gap-xs-smash, etc… - Shortest:
.gap-shortest,.row-gap-shortest,.column-gap-shortest,.gap-xs-shortest, etc… - Shorter:
.gap-shorter,.row-gap-shorter,.column-gap-shorter,.gap-xs-shorter, etc… - Short:
.gap-short,.row-gap-short,.column-gap-short,.gap-xs-short, etc… - Medium:
.gap-medium,.row-gap-medium,.column-gap-medium,.gap-xs-medium, etc… - Tall:
.gap-tall,.row-gap-tall,.column-gap-tall,.gap-xs-tall, etc… - Taller:
.gap-taller,.row-gap-taller,.column-gap-taller,.gap-xs-taller, etc… - Tallest:
.gap-tallest,.row-gap-tallest,.column-gap-tallest,.gap-xs-tallest, etc… - Spacious:
.gap-spacious,.row-gap-spacious,.column-gap-spacious,.gap-xs-spacious, etc… - Huge:
.gap-huge,.row-gap-huge,.column-gap-huge,.gap-xs-huge, etc… - Jumbo:
.gap-jumbo,.row-gap-jumbo,.column-gap-jumbo,.gap-xs-jumbo, etc…
- None:
-
New scaled gap spacing utilities:
- None:
.gap-scaled-none,.row-gap-scaled-none,.column-gap-scaled-none - Smash:
.gap-scaled-smash,.row-gap-scaled-smash,.column-gap-scaled-smash - Shortest:
.gap-scaled-shortest,.row-gap-scaled-shortest,.column-gap-scaled-shortest - Shorter:
.gap-scaled-shorter,.row-gap-scaled-shorter,.column-gap-scaled-shorter - Short:
.gap-scaled-short,.row-gap-scaled-short,.column-gap-scaled-short - Medium:
.gap-scaled-medium,.row-gap-scaled-medium,.column-gap-scaled-medium - Tall:
.gap-scaled-tall,.row-gap-scaled-tall,.column-gap-scaled-tall - Taller:
.gap-scaled-taller,.row-gap-scaled-taller,.column-gap-scaled-taller - Tallest:
.gap-scaled-tallest,.row-gap-scaled-tallest,.column-gap-scaled-tallest - Spacious:
.gap-scaled-spacious,.row-gap-scaled-spacious,.column-gap-scaled-spacious
- None:
-
Warning You might be able to transfer your spacing utilities following one of the two proposed methods (while keeping almost the rendering and at least the same proportion between spacings):
- Keep the previous behavior and getting one utility for another.
- 0:
(([" \.][mp]|-?gap)[tblrsexy]?-[a-z]{0,3}-?n?)0→$1none - 1:
(([" \.][mp]|-?gap)[tblrsexy]?-[a-z]{0,3}-?n?)1→$1shortest - 2:
(([" \.][mp]|-?gap)[tblrsexy]?-[a-z]{0,3}-?n?)2→$1short - 3:
(([" \.][mp]|-?gap)[tblrsexy]?-[a-z]{0,3}-?n?)3→$1tall - 4:
(([" \.][mp]|-?gap)[tblrsexy]?-[a-z]{0,3}-?n?)4→$1tallest - 5:
(([" \.][mp]|-?gap)[tblrsexy]?-[a-z]{0,3}-?n?)5→$1huge - All numbers: Search for
(([" \.][mp]|-?gap)[tblrsexy]?-[a-z]{0,3}-?n?)\dand you shouldn’t have Bootstrap spacing utilities anymore
- 0:
- Change all the utilities using more precise utilities
- Mixing Bootstrap numbers: Search for
([" \.][mp]|-?gap)[tblrsexy]?-[a-z]{0,3}-?n?\d, when you match multiple on one line, consider using one of our scaled spacing utilities (for example,.mb-1.mb-md-2→.mb-scaled-shortest). - Remaining standalone classes: Follow the previous guide going through all the standalone classes.
- Mixing Bootstrap numbers: Search for
- Keep the previous behavior and getting one utility for another.
Text
-
Breaking
.text-xxl-{start|end|none}responsive alignment text utility has been replaced by.text-2xl-{start|end|none}. Please refer to the new breakpoints’ names. You can still have it using$enable-bootstrap-compatibility. -
New
.text-xs-{start|end|none}and.text-3xl-{start|end|none}responsive alignment text utilities have been added. Please refer to the new breakpoints’ names. -
Breaking Font size text utilities
.fs-{1|2|3|4|5|6}have been removed and replaced by new ones. You can still have them using$enable-bootstrap-compatibility:- Display headings:
.fs-dl,.fs-dm,.fs-ds - Headings:
.fs-hxl,.fs-hl,.fs-hm,.fs-hs - Body:
.fs-bl,.fs-bm,.fs-bs - Code:
.fs-cm,.fs-cs
- Display headings:
-
Breaking Font weight text utilities
.fw-semiboldand.fw-mediumhave been removed. -
Breaking Line height text utilities
.lh-1,.lh-sm,.lh-base, and.lh-lghave been removed, since our font references already have definedline-heights. You can still have them using$enable-bootstrap-compatibility. -
Breaking Line length text utilities
.ll-smand.ll-mdhave been removed, since there is already a defaultmax-width.
Examples
-
New New Font example.
-
New New Grid system example.
-
New New Loading buttons live example.
CSS and Sass variables
-
New
$enable-bootstrap-compatibilityoption set tofalseby 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.
- For instance, without the Bootstrap compatibility mode, you won’t have the opacity Bootstrap utilities such as
-
Warning
$enable-roundedoption have been set totrueby default. This option allows you to set rounded corner on components. Please check that it doesn’t impact your website. -
Warning
scss/_color-palette.scssdoesn’t exist anymore. If you were importing it in your project, please make sure to remove it. -
New OUDS Web fully implements the design tokens. If you were using the Sass compilation, you must import the new Sass files before the variables.
See the new import stack
+ @import "config"; @import "functions"; + @import "tokens/raw"; + @import "tokens/semantic"; + @import "tokens/semantic-colors-custom-props"; + @import "tokens/composite"; + @import "tokens/component"; @import "variables"; @import "variables-dark"; // etc -
New Sass variables:
$ouds-border-base$ouds-border-radius-0$ouds-border-radius-75$ouds-border-radius-150$ouds-border-radius-300$ouds-border-radius-9999$ouds-border-radius-default$ouds-border-radius-medium$ouds-border-radius-none$ouds-border-radius-pill$ouds-border-radius-short$ouds-border-radius-tall$ouds-border-style-dashed$ouds-border-style-default$ouds-border-style-drag$ouds-border-style-solid$ouds-border-width-0$ouds-border-width-25$ouds-border-width-50$ouds-border-width-75$ouds-border-width-100$ouds-border-width-125$ouds-border-width-default$ouds-border-width-medium$ouds-border-width-none$ouds-border-width-thick$ouds-border-width-thicker$ouds-border-width-thin$ouds-button-border-radius$ouds-button-border-width-default-interaction-mono$ouds-button-border-width-default-interaction$ouds-button-border-width-default$ouds-button-border-width-minimal-interaction$ouds-button-border-width-minimal$ouds-button-color-bg-default-disabled-mono$ouds-button-color-bg-default-disabled$ouds-button-color-bg-default-enabled-mono$ouds-button-color-bg-default-enabled$ouds-button-color-bg-default-focus-mono$ouds-button-color-bg-default-focus$ouds-button-color-bg-default-hover-mono$ouds-button-color-bg-default-hover$ouds-button-color-bg-default-loading-mono$ouds-button-color-bg-default-loading$ouds-button-color-bg-default-pressed-mono$ouds-button-color-bg-default-pressed$ouds-button-color-bg-minimal-disabled-mono$ouds-button-color-bg-minimal-disabled$ouds-button-color-bg-minimal-enabled-mono$ouds-button-color-bg-minimal-enabled$ouds-button-color-bg-minimal-focus-mono$ouds-button-color-bg-minimal-focus$ouds-button-color-bg-minimal-hover-mono$ouds-button-color-bg-minimal-hover$ouds-button-color-bg-minimal-loading-mono$ouds-button-color-bg-minimal-loading$ouds-button-color-bg-minimal-pressed-mono$ouds-button-color-bg-minimal-pressed$ouds-button-color-bg-strong-disabled-mono$ouds-button-color-bg-strong-enabled-mono$ouds-button-color-bg-strong-focus-mono$ouds-button-color-bg-strong-hover-mono$ouds-button-color-bg-strong-loading-mono$ouds-button-color-bg-strong-pressed-mono$ouds-button-color-border-default-disabled-mono$ouds-button-color-border-default-disabled$ouds-button-color-border-default-enabled-mono$ouds-button-color-border-default-enabled$ouds-button-color-border-default-focus-mono$ouds-button-color-border-default-focus$ouds-button-color-border-default-hover-mono$ouds-button-color-border-default-hover$ouds-button-color-border-default-loading-mono$ouds-button-color-border-default-loading$ouds-button-color-border-default-pressed-mono$ouds-button-color-border-default-pressed$ouds-button-color-border-minimal-disabled-mono$ouds-button-color-border-minimal-disabled$ouds-button-color-border-minimal-enabled-mono$ouds-button-color-border-minimal-enabled$ouds-button-color-border-minimal-focus-mono$ouds-button-color-border-minimal-focus$ouds-button-color-border-minimal-hover-mono$ouds-button-color-border-minimal-hover$ouds-button-color-border-minimal-loading-mono$ouds-button-color-border-minimal-loading$ouds-button-color-border-minimal-pressed-mono$ouds-button-color-border-minimal-pressed$ouds-button-color-border-strong-disabled-mono$ouds-button-color-border-strong-enabled-mono$ouds-button-color-border-strong-focus-mono$ouds-button-color-border-strong-hover-mono$ouds-button-color-border-strong-loading-mono$ouds-button-color-border-strong-pressed-mono$ouds-button-color-content-default-disabled-mono$ouds-button-color-content-default-disabled$ouds-button-color-content-default-enabled-mono$ouds-button-color-content-default-enabled$ouds-button-color-content-default-focus-mono$ouds-button-color-content-default-focus$ouds-button-color-content-default-hover-mono$ouds-button-color-content-default-hover$ouds-button-color-content-default-loading-mono$ouds-button-color-content-default-loading$ouds-button-color-content-default-pressed-mono$ouds-button-color-content-default-pressed$ouds-button-color-content-minimal-disabled-mono$ouds-button-color-content-minimal-disabled$ouds-button-color-content-minimal-enabled-mono$ouds-button-color-content-minimal-enabled$ouds-button-color-content-minimal-focus-mono$ouds-button-color-content-minimal-focus$ouds-button-color-content-minimal-hover-mono$ouds-button-color-content-minimal-hover$ouds-button-color-content-minimal-loading-mono$ouds-button-color-content-minimal-loading$ouds-button-color-content-minimal-pressed-mono$ouds-button-color-content-minimal-pressed$ouds-button-color-content-strong-disabled-mono$ouds-button-color-content-strong-enabled-mono$ouds-button-color-content-strong-focus-mono$ouds-button-color-content-strong-hover-mono$ouds-button-color-content-strong-loading-mono$ouds-button-color-content-strong-pressed-mono$ouds-button-size-icon-only$ouds-button-size-icon$ouds-button-size-loader$ouds-button-size-max-height-icon-only$ouds-button-size-min-height$ouds-button-size-min-width$ouds-button-space-column-gap-arrow$ouds-button-space-column-gap-icon$ouds-button-space-inset-icon-only$ouds-button-space-padding-block$ouds-button-space-padding-inline-arrow-end$ouds-button-space-padding-inline-arrow-start$ouds-button-space-padding-inline-end-icon-start$ouds-button-space-padding-inline-icon-none$ouds-button-space-padding-inline-icon-start$ouds-button-space-padding-inline-start-icon-end$ouds-color-action-disabled-dark$ouds-color-action-disabled-light$ouds-color-action-enabled-dark$ouds-color-action-enabled-light$ouds-color-action-focus-dark$ouds-color-action-focus-light$ouds-color-action-highlighted-dark$ouds-color-action-highlighted-light$ouds-color-action-hover-dark$ouds-color-action-hover-light$ouds-color-action-loading-dark$ouds-color-action-loading-light$ouds-color-action-negative-enabled-dark$ouds-color-action-negative-enabled-light$ouds-color-action-negative-focus-dark$ouds-color-action-negative-focus-light$ouds-color-action-negative-hover-dark$ouds-color-action-negative-hover-light$ouds-color-action-negative-loading-dark$ouds-color-action-negative-loading-light$ouds-color-action-negative-pressed-dark$ouds-color-action-negative-pressed-light$ouds-color-action-pressed-dark$ouds-color-action-pressed-light$ouds-color-action-selected-dark$ouds-color-action-selected-light$ouds-color-action-support-enabled-dark$ouds-color-action-support-enabled-light$ouds-color-action-support-focus-dark$ouds-color-action-support-focus-light$ouds-color-action-support-hover-dark$ouds-color-action-support-hover-light$ouds-color-action-support-loading-dark$ouds-color-action-support-loading-light$ouds-color-action-support-pressed-dark$ouds-color-action-support-pressed-light$ouds-color-action-visited-dark$ouds-color-action-visited-light$ouds-color-always-black-dark$ouds-color-always-black-light$ouds-color-always-on-black-dark$ouds-color-always-on-black-light$ouds-color-always-on-white-dark$ouds-color-always-on-white-light$ouds-color-always-white-dark$ouds-color-always-white-light$ouds-color-bg-emphasized-dark$ouds-color-bg-emphasized-light$ouds-color-bg-primary-dark$ouds-color-bg-primary-light$ouds-color-bg-secondary-dark$ouds-color-bg-secondary-light$ouds-color-bg-tertiary-dark$ouds-color-bg-tertiary-light$ouds-color-border-brand-primary-dark$ouds-color-border-brand-primary-light$ouds-color-border-default-dark$ouds-color-border-default-light$ouds-color-border-emphasized-dark$ouds-color-border-emphasized-light$ouds-color-border-focus-dark$ouds-color-border-focus-inset-dark$ouds-color-border-focus-inset-light$ouds-color-border-focus-light$ouds-color-border-muted-dark$ouds-color-border-muted-light$ouds-color-border-on-brand-primary-dark$ouds-color-border-on-brand-primary-light$ouds-color-content-brand-primary-dark$ouds-color-content-brand-primary-light$ouds-color-content-default-dark$ouds-color-content-default-light$ouds-color-content-disabled-dark$ouds-color-content-disabled-light$ouds-color-content-muted-dark$ouds-color-content-muted-light$ouds-color-content-on-action-disabled-dark$ouds-color-content-on-action-disabled-light$ouds-color-content-on-action-enabled-dark$ouds-color-content-on-action-enabled-light$ouds-color-content-on-action-focus-dark$ouds-color-content-on-action-focus-light$ouds-color-content-on-action-highlighted-dark$ouds-color-content-on-action-highlighted-light$ouds-color-content-on-action-hover-dark$ouds-color-content-on-action-hover-light$ouds-color-content-on-action-loading-dark$ouds-color-content-on-action-loading-light$ouds-color-content-on-action-pressed-dark$ouds-color-content-on-action-pressed-light$ouds-color-content-on-brand-primary-dark$ouds-color-content-on-brand-primary-light$ouds-color-content-on-overlay-emphasized-dark$ouds-color-content-on-overlay-emphasized-light$ouds-color-content-on-status-emphasized-alt-dark$ouds-color-content-on-status-emphasized-alt-light$ouds-color-content-on-status-emphasized-dark$ouds-color-content-on-status-emphasized-light$ouds-color-content-on-status-muted-dark$ouds-color-content-on-status-muted-light$ouds-color-content-status-info-dark$ouds-color-content-status-info-light$ouds-color-content-status-negative-dark$ouds-color-content-status-negative-light$ouds-color-content-status-positive-dark$ouds-color-content-status-positive-light$ouds-color-content-status-warning-dark$ouds-color-content-status-warning-light$ouds-color-decorative-accent-1-default-dark$ouds-color-decorative-accent-1-default-light$ouds-color-decorative-accent-1-emphasized-dark$ouds-color-decorative-accent-1-emphasized-light$ouds-color-decorative-accent-1-muted-dark$ouds-color-decorative-accent-1-muted-light$ouds-color-decorative-accent-2-default-dark$ouds-color-decorative-accent-2-default-light$ouds-color-decorative-accent-2-emphasized-dark0$ouds-color-decorative-accent-2-emphasized-light$ouds-color-decorative-accent-2-muted-dark$ouds-color-decorative-accent-2-muted-light$ouds-color-decorative-accent-3-default-dark$ouds-color-decorative-accent-3-default-light$ouds-color-decorative-accent-3-emphasized-dark$ouds-color-decorative-accent-3-emphasized-light$ouds-color-decorative-accent-3-muted-dark$ouds-color-decorative-accent-3-muted-light$ouds-color-decorative-accent-4-default-dark$ouds-color-decorative-accent-4-default-light$ouds-color-decorative-accent-4-emphasized-dark$ouds-color-decorative-accent-4-emphasized-light$ouds-color-decorative-accent-4-muted-dark$ouds-color-decorative-accent-4-muted-light$ouds-color-decorative-accent-5-default-dark$ouds-color-decorative-accent-5-default-light$ouds-color-decorative-accent-5-emphasized-dark$ouds-color-decorative-accent-5-emphasized-light$ouds-color-decorative-accent-5-muted-dark$ouds-color-decorative-accent-5-muted-light$ouds-color-decorative-amber-100$ouds-color-decorative-amber-200$ouds-color-decorative-amber-300$ouds-color-decorative-amber-400$ouds-color-decorative-amber-500$ouds-color-decorative-amber-600$ouds-color-decorative-amber-700$ouds-color-decorative-amber-800$ouds-color-decorative-amber-900$ouds-color-decorative-amethyst-100$ouds-color-decorative-amethyst-200$ouds-color-decorative-amethyst-300$ouds-color-decorative-amethyst-400$ouds-color-decorative-amethyst-500$ouds-color-decorative-amethyst-600$ouds-color-decorative-amethyst-700$ouds-color-decorative-amethyst-800$ouds-color-decorative-amethyst-900$ouds-color-decorative-brand-primary-dark$ouds-color-decorative-brand-primary-light$ouds-color-decorative-brand-secondary-dark$ouds-color-decorative-brand-secondary-light$ouds-color-decorative-brand-tertiary-dark$ouds-color-decorative-brand-tertiary-light$ouds-color-decorative-deep-peach-100$ouds-color-decorative-deep-peach-200$ouds-color-decorative-deep-peach-300$ouds-color-decorative-deep-peach-400$ouds-color-decorative-deep-peach-500$ouds-color-decorative-deep-peach-600$ouds-color-decorative-deep-peach-700$ouds-color-decorative-deep-peach-800$ouds-color-decorative-deep-peach-900$ouds-color-decorative-emerald-100$ouds-color-decorative-emerald-200$ouds-color-decorative-emerald-300$ouds-color-decorative-emerald-400$ouds-color-decorative-emerald-500$ouds-color-decorative-emerald-600$ouds-color-decorative-emerald-700$ouds-color-decorative-emerald-800$ouds-color-decorative-emerald-900$ouds-color-decorative-neutral-default-dark$ouds-color-decorative-neutral-default-light$ouds-color-decorative-neutral-emphasized-dark$ouds-color-decorative-neutral-emphasized-light$ouds-color-decorative-neutral-muted-dark$ouds-color-decorative-neutral-muted-light$ouds-color-decorative-shocking-pink-100$ouds-color-decorative-shocking-pink-200$ouds-color-decorative-shocking-pink-300$ouds-color-decorative-shocking-pink-400$ouds-color-decorative-shocking-pink-500$ouds-color-decorative-shocking-pink-600$ouds-color-decorative-shocking-pink-700$ouds-color-decorative-shocking-pink-800$ouds-color-decorative-shocking-pink-900$ouds-color-decorative-skin-tint-100-dark$ouds-color-decorative-skin-tint-100-light$ouds-color-decorative-skin-tint-200-dark$ouds-color-decorative-skin-tint-200-light$ouds-color-decorative-skin-tint-300-dark$ouds-color-decorative-skin-tint-300-light$ouds-color-decorative-skin-tint-400-dark$ouds-color-decorative-skin-tint-400-light$ouds-color-decorative-skin-tint-500-dark$ouds-color-decorative-skin-tint-500-light$ouds-color-decorative-skin-tint-600-dark$ouds-color-decorative-skin-tint-600-light$ouds-color-decorative-skin-tint-700-dark$ouds-color-decorative-skin-tint-700-light$ouds-color-decorative-skin-tint-800-dark$ouds-color-decorative-skin-tint-800-light$ouds-color-decorative-skin-tint-900-dark$ouds-color-decorative-skin-tint-900-light$ouds-color-decorative-sky-100$ouds-color-decorative-sky-200$ouds-color-decorative-sky-300$ouds-color-decorative-sky-400$ouds-color-decorative-sky-500$ouds-color-decorative-sky-600$ouds-color-decorative-sky-700$ouds-color-decorative-sky-800$ouds-color-decorative-sky-900$ouds-color-functional-black$ouds-color-functional-dark-gray-80$ouds-color-functional-dark-gray-160$ouds-color-functional-dark-gray-240$ouds-color-functional-dark-gray-320$ouds-color-functional-dark-gray-400$ouds-color-functional-dark-gray-480$ouds-color-functional-dark-gray-560$ouds-color-functional-dark-gray-640$ouds-color-functional-dark-gray-720$ouds-color-functional-dark-gray-800$ouds-color-functional-dark-gray-880$ouds-color-functional-dark-gray-960$ouds-color-functional-dodger-blue-100$ouds-color-functional-dodger-blue-200$ouds-color-functional-dodger-blue-300$ouds-color-functional-dodger-blue-400$ouds-color-functional-dodger-blue-500$ouds-color-functional-dodger-blue-600$ouds-color-functional-dodger-blue-700$ouds-color-functional-dodger-blue-800$ouds-color-functional-dodger-blue-900$ouds-color-functional-light-gray-80$ouds-color-functional-light-gray-160$ouds-color-functional-light-gray-240$ouds-color-functional-light-gray-320$ouds-color-functional-light-gray-400$ouds-color-functional-light-gray-480$ouds-color-functional-light-gray-560$ouds-color-functional-light-gray-640$ouds-color-functional-light-gray-720$ouds-color-functional-light-gray-800$ouds-color-functional-light-gray-880$ouds-color-functional-light-gray-960$ouds-color-functional-malachite-100$ouds-color-functional-malachite-200$ouds-color-functional-malachite-300$ouds-color-functional-malachite-400$ouds-color-functional-malachite-500$ouds-color-functional-malachite-600$ouds-color-functional-malachite-700$ouds-color-functional-malachite-800$ouds-color-functional-malachite-900$ouds-color-functional-scarlet-100$ouds-color-functional-scarlet-200$ouds-color-functional-scarlet-300$ouds-color-functional-scarlet-400$ouds-color-functional-scarlet-500$ouds-color-functional-scarlet-600$ouds-color-functional-scarlet-700$ouds-color-functional-scarlet-800$ouds-color-functional-scarlet-900$ouds-color-functional-sun-100$ouds-color-functional-sun-200$ouds-color-functional-sun-300$ouds-color-functional-sun-400$ouds-color-functional-sun-500$ouds-color-functional-sun-600$ouds-color-functional-sun-700$ouds-color-functional-sun-800$ouds-color-functional-sun-900$ouds-color-functional-white$ouds-color-opacity-black-0$ouds-color-opacity-black-40$ouds-color-opacity-black-80$ouds-color-opacity-black-120$ouds-color-opacity-black-160$ouds-color-opacity-black-200$ouds-color-opacity-black-240$ouds-color-opacity-black-280$ouds-color-opacity-black-320$ouds-color-opacity-black-360$ouds-color-opacity-black-400$ouds-color-opacity-black-440$ouds-color-opacity-black-480$ouds-color-opacity-black-520$ouds-color-opacity-black-560$ouds-color-opacity-black-600$ouds-color-opacity-black-640$ouds-color-opacity-black-680$ouds-color-opacity-black-720$ouds-color-opacity-black-760$ouds-color-opacity-black-800$ouds-color-opacity-black-840$ouds-color-opacity-black-880$ouds-color-opacity-black-920$ouds-color-opacity-black-960$ouds-color-opacity-dodger-blue$ouds-color-opacity-lower-dark$ouds-color-opacity-lower-light$ouds-color-opacity-lowest-dark$ouds-color-opacity-lowest-light$ouds-color-opacity-malachite$ouds-color-opacity-scarlet$ouds-color-opacity-sun$ouds-color-opacity-transparent-dark$ouds-color-opacity-transparent-light$ouds-color-opacity-white-0$ouds-color-opacity-white-40$ouds-color-opacity-white-80$ouds-color-opacity-white-120$ouds-color-opacity-white-160$ouds-color-opacity-white-200$ouds-color-opacity-white-240$ouds-color-opacity-white-280$ouds-color-opacity-white-320$ouds-color-opacity-white-360$ouds-color-opacity-white-400$ouds-color-opacity-white-440$ouds-color-opacity-white-480$ouds-color-opacity-white-520$ouds-color-opacity-white-560$ouds-color-opacity-white-600$ouds-color-opacity-white-640$ouds-color-opacity-white-680$ouds-color-opacity-white-720$ouds-color-opacity-white-760$ouds-color-opacity-white-800$ouds-color-opacity-white-840$ouds-color-opacity-white-880$ouds-color-opacity-white-920$ouds-color-opacity-white-960$ouds-color-orange-50$ouds-color-orange-100$ouds-color-orange-200$ouds-color-orange-300$ouds-color-orange-400$ouds-color-orange-500$ouds-color-orange-550$ouds-color-orange-600$ouds-color-orange-700$ouds-color-orange-800$ouds-color-orange-900$ouds-color-overlay-default-dark$ouds-color-overlay-default-light$ouds-color-overlay-drag-dark$ouds-color-overlay-drag-light$ouds-color-overlay-emphasized-dark$ouds-color-overlay-emphasized-light$ouds-color-overlay-modal-dark$ouds-color-overlay-modal-light$ouds-color-surface-brand-primary-dark$ouds-color-surface-brand-primary-light$ouds-color-surface-status-accent-emphasized-dark$ouds-color-surface-status-accent-emphasized-light$ouds-color-surface-status-accent-muted-dark$ouds-color-surface-status-accent-muted-light$ouds-color-surface-status-info-emphasized-dark$ouds-color-surface-status-info-emphasized-light$ouds-color-surface-status-info-muted-dark$ouds-color-surface-status-info-muted-light$ouds-color-surface-status-negative-emphasized-dark$ouds-color-surface-status-negative-emphasized-light$ouds-color-surface-status-negative-muted-dark$ouds-color-surface-status-negative-muted-light$ouds-color-surface-status-neutral-emphasized-dark$ouds-color-surface-status-neutral-emphasized-light$ouds-color-surface-status-neutral-muted-dark$ouds-color-surface-status-neutral-muted-light$ouds-color-surface-status-positive-emphasized-dark$ouds-color-surface-status-positive-emphasized-light$ouds-color-surface-status-positive-muted-dark$ouds-color-surface-status-positive-muted-light$ouds-color-surface-status-warning-emphasized-dark$ouds-color-surface-status-warning-emphasized-light$ouds-color-surface-status-warning-muted-dark$ouds-color-surface-status-warning-muted-light$ouds-color-warm-gray-100$ouds-color-warm-gray-200$ouds-color-warm-gray-300$ouds-color-warm-gray-400$ouds-color-warm-gray-500$ouds-color-warm-gray-600$ouds-color-warm-gray-700$ouds-color-warm-gray-800$ouds-color-warm-gray-900$ouds-dimension-0$ouds-dimension-25$ouds-dimension-50$ouds-dimension-75$ouds-dimension-100$ouds-dimension-150$ouds-dimension-200$ouds-dimension-250$ouds-dimension-300$ouds-dimension-350$ouds-dimension-400$ouds-dimension-450$ouds-dimension-500$ouds-dimension-550$ouds-dimension-600$ouds-dimension-650$ouds-dimension-700$ouds-dimension-750$ouds-dimension-800$ouds-dimension-900$ouds-dimension-1000$ouds-dimension-1200$ouds-dimension-1400$ouds-dimension-1600$ouds-dimension-1800$ouds-dimension-4000$ouds-dimension-base$ouds-elevation-blur-0$ouds-elevation-blur-200$ouds-elevation-blur-300$ouds-elevation-blur-400$ouds-elevation-blur-600$ouds-elevation-blur-default$ouds-elevation-blur-drag$ouds-elevation-blur-emphasized$ouds-elevation-blur-none$ouds-elevation-blur-raised$ouds-elevation-blur-sticky-default$ouds-elevation-blur-sticky-emphasized$ouds-elevation-blur-sticky-navigation-scrolled$ouds-elevation-color-default-dark$ouds-elevation-color-default-light$ouds-elevation-color-drag-dark$ouds-elevation-color-drag-light$ouds-elevation-color-emphasized-dark$ouds-elevation-color-emphasized-light$ouds-elevation-color-none-dark$ouds-elevation-color-none-light$ouds-elevation-color-raised-dark$ouds-elevation-color-raised-light$ouds-elevation-color-sticky-default-dark$ouds-elevation-color-sticky-default-light$ouds-elevation-color-sticky-emphasized-dark$ouds-elevation-color-sticky-emphasized-light$ouds-elevation-color-sticky-navigation-scrolled-dark$ouds-elevation-color-sticky-navigation-scrolled-light$ouds-elevation-default$ouds-elevation-drag$ouds-elevation-emphasized$ouds-elevation-focus$ouds-elevation-none$ouds-elevation-raised$ouds-elevation-spread-0$ouds-elevation-spread-300$ouds-elevation-spread-default$ouds-elevation-spread-drag$ouds-elevation-spread-emphasized$ouds-elevation-spread-n100$ouds-elevation-spread-n300$ouds-elevation-spread-none$ouds-elevation-spread-raised$ouds-elevation-spread-sticky-default$ouds-elevation-spread-sticky-emphasized$ouds-elevation-spread-sticky-navigation-scrolled$ouds-elevation-sticky-default$ouds-elevation-sticky-emphasized$ouds-elevation-sticky-navigation-scrolled$ouds-elevation-x-0$ouds-elevation-x-default$ouds-elevation-x-drag$ouds-elevation-x-emphasized$ouds-elevation-x-none$ouds-elevation-x-raised$ouds-elevation-x-sticky-default$ouds-elevation-x-sticky-emphasized$ouds-elevation-x-sticky-navigation-scrolled$ouds-elevation-y-0$ouds-elevation-y-100$ouds-elevation-y-200$ouds-elevation-y-300$ouds-elevation-y-500$ouds-elevation-y-default$ouds-elevation-y-drag$ouds-elevation-y-emphasized$ouds-elevation-y-none$ouds-elevation-y-raised$ouds-elevation-y-sticky-default$ouds-elevation-y-sticky-emphasized$ouds-elevation-y-sticky-navigation-scrolled$ouds-font-family$ouds-font-family-brand-default$ouds-font-family-monospace-stack$ouds-font-family-sans-serif-stack$ouds-font-letter-spacing-150$ouds-font-letter-spacing-200$ouds-font-letter-spacing-250$ouds-font-letter-spacing-300$ouds-font-letter-spacing-350$ouds-font-letter-spacing-450$ouds-font-letter-spacing-550$ouds-font-letter-spacing-650$ouds-font-letter-spacing-750$ouds-font-letter-spacing-850$ouds-font-letter-spacing-1050$ouds-font-letter-spacing-1250$ouds-font-letter-spacing-1450$ouds-font-letter-spacing-1850$ouds-font-letter-spacing-body-large-desktop$ouds-font-letter-spacing-body-large-mobile$ouds-font-letter-spacing-body-large-tablet$ouds-font-letter-spacing-body-medium-desktop$ouds-font-letter-spacing-body-medium-mobile$ouds-font-letter-spacing-body-medium-tablet$ouds-font-letter-spacing-body-small-desktop$ouds-font-letter-spacing-body-small-mobile$ouds-font-letter-spacing-body-small-tablet$ouds-font-letter-spacing-code-medium:$ouds-font-letter-spacing-display-large-desktop$ouds-font-letter-spacing-display-large-mobile$ouds-font-letter-spacing-display-large-tablet$ouds-font-letter-spacing-display-medium-desktop$ouds-font-letter-spacing-display-medium-mobile$ouds-font-letter-spacing-display-medium-tablet$ouds-font-letter-spacing-display-small-desktop$ouds-font-letter-spacing-display-small-mobile$ouds-font-letter-spacing-display-small-tablet$ouds-font-letter-spacing-heading-large-desktop$ouds-font-letter-spacing-heading-large-mobile$ouds-font-letter-spacing-heading-large-tablet$ouds-font-letter-spacing-heading-medium-desktop$ouds-font-letter-spacing-heading-medium-mobile$ouds-font-letter-spacing-heading-medium-tablet$ouds-font-letter-spacing-heading-small-desktop$ouds-font-letter-spacing-heading-small-mobile$ouds-font-letter-spacing-heading-small-tablet$ouds-font-letter-spacing-heading-xlarge-desktop$ouds-font-letter-spacing-heading-xlarge-mobile$ouds-font-letter-spacing-heading-xlarge-tablet$ouds-font-letter-spacing-label-large$ouds-font-letter-spacing-label-medium$ouds-font-letter-spacing-label-small$ouds-font-letter-spacing-label-xlarge$ouds-font-line-height-250$ouds-font-line-height-350$ouds-font-line-height-450$ouds-font-line-height-550$ouds-font-line-height-650$ouds-font-line-height-750$ouds-font-line-height-850$ouds-font-line-height-950$ouds-font-line-height-1050$ouds-font-line-height-1250$ouds-font-line-height-1450$ouds-font-line-height-1850$ouds-font-line-height-2050$ouds-font-line-height-body-large-desktop$ouds-font-line-height-body-large-mobile$ouds-font-line-height-body-large-tablet$ouds-font-line-height-body-medium-desktop$ouds-font-line-height-body-medium-mobile$ouds-font-line-height-body-medium-tablet$ouds-font-line-height-body-small-desktop$ouds-font-line-height-body-small-mobile$ouds-font-line-height-body-small-tablet$ouds-font-line-height-code-medium$ouds-font-line-height-display-large-desktop$ouds-font-line-height-display-large-mobile$ouds-font-line-height-display-large-tablet$ouds-font-line-height-display-medium-desktop$ouds-font-line-height-display-medium-mobile$ouds-font-line-height-display-medium-tablet$ouds-font-line-height-display-small-desktop$ouds-font-line-height-display-small-mobile$ouds-font-line-height-display-small-tablet$ouds-font-line-height-heading-large-desktop$ouds-font-line-height-heading-large-mobile$ouds-font-line-height-heading-large-tablet$ouds-font-line-height-heading-medium-desktop$ouds-font-line-height-heading-medium-mobile$ouds-font-line-height-heading-medium-tablet$ouds-font-line-height-heading-small-desktop$ouds-font-line-height-heading-small-mobile$ouds-font-line-height-heading-small-tablet$ouds-font-line-height-heading-xlarge-desktop$ouds-font-line-height-heading-xlarge-mobile$ouds-font-line-height-heading-xlarge-tablet$ouds-font-line-height-label-large$ouds-font-line-height-label-medium$ouds-font-line-height-label-small$ouds-font-line-height-label-xlarge$ouds-font-size-150$ouds-font-size-200$ouds-font-size-250$ouds-font-size-300$ouds-font-size-350$ouds-font-size-450$ouds-font-size-550$ouds-font-size-650$ouds-font-size-750$ouds-font-size-850$ouds-font-size-1050$ouds-font-size-1250$ouds-font-size-1450$ouds-font-size-1850$ouds-font-size-body-large-desktop$ouds-font-size-body-large-mobile$ouds-font-size-body-large-tablet$ouds-font-size-body-medium-desktop$ouds-font-size-body-medium-mobile$ouds-font-size-body-medium-tablet$ouds-font-size-body-small-desktop$ouds-font-size-body-small-mobile$ouds-font-size-body-small-tablet$ouds-font-size-code-medium$ouds-font-size-display-large-desktop$ouds-font-size-display-large-mobile$ouds-font-size-display-large-tablet$ouds-font-size-display-medium-desktop$ouds-font-size-display-medium-mobile$ouds-font-size-display-medium-tablet$ouds-font-size-display-small-desktop$ouds-font-size-display-small-mobile$ouds-font-size-display-small-tablet$ouds-font-size-heading-large-desktop$ouds-font-size-heading-large-mobile$ouds-font-size-heading-large-tablet$ouds-font-size-heading-medium-desktop$ouds-font-size-heading-medium-mobile$ouds-font-size-heading-medium-tablet$ouds-font-size-heading-small-desktop$ouds-font-size-heading-small-mobile$ouds-font-size-heading-small-tablet$ouds-font-size-heading-xlarge-desktop$ouds-font-size-heading-xlarge-mobile$ouds-font-size-heading-xlarge-tablet$ouds-font-size-label-large$ouds-font-size-label-medium$ouds-font-size-label-small$ouds-font-size-label-xlarge$ouds-font-weight-400$ouds-font-weight-700$ouds-font-weight-body-default$ouds-font-weight-body-strong$ouds-font-weight-code$ouds-font-weight-default$ouds-font-weight-display$ouds-font-weight-heading$ouds-font-weight-label-default$ouds-font-weight-label-strong$ouds-font-weight-strong$ouds-grid-2xl-column-gap$ouds-grid-2xl-margin$ouds-grid-2xl-max-width-alt$ouds-grid-2xl-min-width$ouds-grid-2xs-column-gap$ouds-grid-2xs-margin$ouds-grid-3xl-column-gap$ouds-grid-3xl-margin$ouds-grid-3xl-min-width$ouds-grid-column-gap-100$ouds-grid-column-gap-200$ouds-grid-column-gap-400$ouds-grid-column-gap-600$ouds-grid-column-gap-800$ouds-grid-lg-column-gap$ouds-grid-lg-margin$ouds-grid-lg-min-width$ouds-grid-margin-100$ouds-grid-margin-300$ouds-grid-margin-400$ouds-grid-margin-500$ouds-grid-margin-700$ouds-grid-margin-1100$ouds-grid-margin-1700$ouds-grid-margin-2500$ouds-grid-md-column-gap$ouds-grid-md-margin$ouds-grid-md-min-width$ouds-grid-min-width-200$ouds-grid-min-width-300$ouds-grid-min-width-400$ouds-grid-min-width-500$ouds-grid-min-width-600$ouds-grid-min-width-700$ouds-grid-min-width-800$ouds-grid-sm-column-gap$ouds-grid-sm-margin$ouds-grid-sm-min-width$ouds-grid-xl-column-gap$ouds-grid-xl-margin$ouds-grid-xl-min-width$ouds-grid-xs-column-gap$ouds-grid-xs-margin$ouds-grid-xs-min-width$ouds-opacity-0$ouds-opacity-40$ouds-opacity-160$ouds-opacity-320$ouds-opacity-640$ouds-opacity-1000$ouds-opacity-invisible$ouds-opacity-medium$ouds-opacity-opaque$ouds-opacity-strong$ouds-opacity-weak$ouds-opacity-weaker$ouds-size-icon-decorative-2xl$ouds-size-icon-decorative-2xs$ouds-size-icon-decorative-lg$ouds-size-icon-decorative-md$ouds-size-icon-decorative-sm$ouds-size-icon-decorative-xl$ouds-size-icon-decorative-xs$ouds-size-icon-with-body-large-size-lg-desktop$ouds-size-icon-with-body-large-size-lg-mobile$ouds-size-icon-with-body-large-size-lg-tablet$ouds-size-icon-with-body-large-size-md-desktop$ouds-size-icon-with-body-large-size-md-mobile$ouds-size-icon-with-body-large-size-md-tablet$ouds-size-icon-with-body-large-size-sm-desktop$ouds-size-icon-with-body-large-size-sm-mobile$ouds-size-icon-with-body-large-size-sm-tablet$ouds-size-icon-with-body-medium-size-lg-desktop$ouds-size-icon-with-body-medium-size-lg-mobile$ouds-size-icon-with-body-medium-size-lg-tablet$ouds-size-icon-with-body-medium-size-md-desktop$ouds-size-icon-with-body-medium-size-md-mobile$ouds-size-icon-with-body-medium-size-md-tablet$ouds-size-icon-with-body-medium-size-sm-desktop$ouds-size-icon-with-body-medium-size-sm-mobile$ouds-size-icon-with-body-medium-size-sm-tablet$ouds-size-icon-with-body-small-size-lg-desktop$ouds-size-icon-with-body-small-size-lg-mobile$ouds-size-icon-with-body-small-size-lg-tablet$ouds-size-icon-with-body-small-size-md-desktop$ouds-size-icon-with-body-small-size-md-mobile$ouds-size-icon-with-body-small-size-md-tablet$ouds-size-icon-with-body-small-size-sm-desktop$ouds-size-icon-with-body-small-size-sm-mobile$ouds-size-icon-with-body-small-size-sm-tablet$ouds-size-icon-with-heading-large-size-lg-desktop$ouds-size-icon-with-heading-large-size-lg-mobile$ouds-size-icon-with-heading-large-size-lg-tablet$ouds-size-icon-with-heading-large-size-md-desktop$ouds-size-icon-with-heading-large-size-md-mobile$ouds-size-icon-with-heading-large-size-md-tablet$ouds-size-icon-with-heading-large-size-sm-desktop$ouds-size-icon-with-heading-large-size-sm-mobile$ouds-size-icon-with-heading-large-size-sm-tablet$ouds-size-icon-with-heading-medium-size-lg-desktop$ouds-size-icon-with-heading-medium-size-lg-mobile$ouds-size-icon-with-heading-medium-size-lg-tablet$ouds-size-icon-with-heading-medium-size-md-desktop$ouds-size-icon-with-heading-medium-size-md-mobile$ouds-size-icon-with-heading-medium-size-md-tablet$ouds-size-icon-with-heading-medium-size-sm-desktop$ouds-size-icon-with-heading-medium-size-sm-mobile$ouds-size-icon-with-heading-medium-size-sm-tablet$ouds-size-icon-with-heading-small-size-lg-desktop$ouds-size-icon-with-heading-small-size-lg-mobile$ouds-size-icon-with-heading-small-size-lg-tablet$ouds-size-icon-with-heading-small-size-md-desktop$ouds-size-icon-with-heading-small-size-md-mobile$ouds-size-icon-with-heading-small-size-md-tablet$ouds-size-icon-with-heading-small-size-sm-desktop$ouds-size-icon-with-heading-small-size-sm-mobile$ouds-size-icon-with-heading-small-size-sm-tablet$ouds-size-icon-with-heading-xlarge-size-lg-desktop$ouds-size-icon-with-heading-xlarge-size-lg-mobile$ouds-size-icon-with-heading-xlarge-size-lg-tablet$ouds-size-icon-with-heading-xlarge-size-md-desktop$ouds-size-icon-with-heading-xlarge-size-md-mobile$ouds-size-icon-with-heading-xlarge-size-md-tablet$ouds-size-icon-with-heading-xlarge-size-sm-desktop$ouds-size-icon-with-heading-xlarge-size-sm-mobile$ouds-size-icon-with-heading-xlarge-size-sm-tablet$ouds-size-icon-with-label-large-size-lg$ouds-size-icon-with-label-large-size-md$ouds-size-icon-with-label-large-size-sm$ouds-size-icon-with-label-large-size-xl$ouds-size-icon-with-label-large-size-xs$ouds-size-icon-with-label-medium-size-lg$ouds-size-icon-with-label-medium-size-md$ouds-size-icon-with-label-medium-size-sm$ouds-size-icon-with-label-medium-size-xs$ouds-size-icon-with-label-small-size-lg$ouds-size-icon-with-label-small-size-md$ouds-size-icon-with-label-small-size-sm$ouds-size-icon-with-label-small-size-xs$ouds-size-icon-with-label-xlarge-size-lg$ouds-size-icon-with-label-xlarge-size-md$ouds-size-icon-with-label-xlarge-size-sm$ouds-size-max-width-type-body-large-desktop$ouds-size-max-width-type-body-large-mobile$ouds-size-max-width-type-body-large-tablet$ouds-size-max-width-type-body-medium-desktop$ouds-size-max-width-type-body-medium-mobile$ouds-size-max-width-type-body-medium-tablet$ouds-size-max-width-type-body-small-desktop$ouds-size-max-width-type-body-small-mobile$ouds-size-max-width-type-body-small-tablet$ouds-size-max-width-type-display-large-desktop$ouds-size-max-width-type-display-large-mobile$ouds-size-max-width-type-display-large-tablet$ouds-size-max-width-type-display-medium-desktop$ouds-size-max-width-type-display-medium-mobile$ouds-size-max-width-type-display-medium-tablet$ouds-size-max-width-type-display-small-desktop$ouds-size-max-width-type-display-small-mobile$ouds-size-max-width-type-display-small-tablet$ouds-size-max-width-type-heading-large-desktop$ouds-size-max-width-type-heading-large-mobile$ouds-size-max-width-type-heading-large-tablet$ouds-size-max-width-type-heading-medium-desktop$ouds-size-max-width-type-heading-medium-mobile$ouds-size-max-width-type-heading-medium-tablet$ouds-size-max-width-type-heading-small-desktop$ouds-size-max-width-type-heading-small-mobile$ouds-size-max-width-type-heading-small-tablet$ouds-size-max-width-type-heading-xlarge-desktop$ouds-size-max-width-type-heading-xlarge-mobile$ouds-size-max-width-type-heading-xlarge-tablet$ouds-space-fixed-huge$ouds-space-fixed-jumbo$ouds-space-fixed-medium$ouds-space-fixed-none$ouds-space-fixed-short$ouds-space-fixed-shorter$ouds-space-fixed-shortest$ouds-space-fixed-smash$ouds-space-fixed-spacious$ouds-space-fixed-tall$ouds-space-fixed-taller$ouds-space-fixed-tallest$ouds-space-scaled-medium-desktop$ouds-space-scaled-medium-mobile$ouds-space-scaled-medium-tablet$ouds-space-scaled-none-desktop$ouds-space-scaled-none-mobile$ouds-space-scaled-none-tablet$ouds-space-scaled-short-desktop$ouds-space-scaled-short-mobile$ouds-space-scaled-short-tablet$ouds-space-scaled-shorter-desktop$ouds-space-scaled-shorter-mobile$ouds-space-scaled-shorter-tablet$ouds-space-scaled-shortest-desktop$ouds-space-scaled-shortest-mobile$ouds-space-scaled-shortest-tablet$ouds-space-scaled-smash-desktop$ouds-space-scaled-smash-mobile$ouds-space-scaled-smash-tablet$ouds-space-scaled-spacious-desktop$ouds-space-scaled-spacious-mobile$ouds-space-scaled-spacious-tablet$ouds-space-scaled-tall-desktop$ouds-space-scaled-tall-mobile$ouds-space-scaled-tall-tablet$ouds-space-scaled-taller-desktop$ouds-space-scaled-taller-mobile$ouds-space-scaled-taller-tablet$ouds-space-scaled-tallest-desktop$ouds-space-scaled-tallest-mobile$ouds-space-scaled-tallest-tablet
-
New Sass variables containing CSS variable with value depending on theme:
$ouds-color-action-disabled$ouds-color-action-enabled$ouds-color-action-focus$ouds-color-action-highlighted$ouds-color-action-hover$ouds-color-action-loading$ouds-color-action-negative-enabled$ouds-color-action-negative-focus$ouds-color-action-negative-hover$ouds-color-action-negative-loading$ouds-color-action-negative-pressed$ouds-color-action-pressed$ouds-color-action-selected$ouds-color-action-support-enabled$ouds-color-action-support-focus$ouds-color-action-support-hover$ouds-color-action-support-loading$ouds-color-action-support-pressed$ouds-color-action-visited$ouds-color-always-black$ouds-color-always-on-black$ouds-color-always-on-white$ouds-color-always-white$ouds-color-bg-emphasized$ouds-color-bg-primary$ouds-color-bg-secondary$ouds-color-bg-tertiary$ouds-color-border-brand-primary$ouds-color-border-default$ouds-color-border-emphasized$ouds-color-border-focus$ouds-color-border-focus-inset$ouds-color-border-muted$ouds-color-border-on-brand-primary$ouds-color-content-brand-primary$ouds-color-content-default$ouds-color-content-disabled$ouds-color-content-muted$ouds-color-content-on-action-disabled$ouds-color-content-on-action-enabled$ouds-color-content-on-action-focus$ouds-color-content-on-action-highlighted$ouds-color-content-on-action-hover$ouds-color-content-on-action-loading$ouds-color-content-on-action-pressed$ouds-color-content-on-brand-primary$ouds-color-content-on-overlay-emphasized$ouds-color-content-on-status-emphasized$ouds-color-content-on-status-emphasized-alt$ouds-color-content-on-status-muted$ouds-color-content-status-info$ouds-color-content-status-negative$ouds-color-content-status-positive$ouds-color-content-status-warning$ouds-color-decorative-accent-1-default$ouds-color-decorative-accent-1-emphasized$ouds-color-decorative-accent-1-muted$ouds-color-decorative-accent-2-default$ouds-color-decorative-accent-2-emphasized$ouds-color-decorative-accent-2-muted$ouds-color-decorative-accent-3-default$ouds-color-decorative-accent-3-emphasized$ouds-color-decorative-accent-3-muted$ouds-color-decorative-accent-4-default$ouds-color-decorative-accent-4-emphasized$ouds-color-decorative-accent-4-muted$ouds-color-decorative-accent-5-default$ouds-color-decorative-accent-5-emphasized$ouds-color-decorative-accent-5-muted$ouds-color-decorative-brand-primary$ouds-color-decorative-brand-secondary$ouds-color-decorative-brand-tertiary$ouds-color-decorative-neutral-default$ouds-color-decorative-neutral-emphasized$ouds-color-decorative-neutral-muted$ouds-color-decorative-skin-tint-100$ouds-color-decorative-skin-tint-200$ouds-color-decorative-skin-tint-300$ouds-color-decorative-skin-tint-400$ouds-color-decorative-skin-tint-500$ouds-color-decorative-skin-tint-600$ouds-color-decorative-skin-tint-700$ouds-color-decorative-skin-tint-800$ouds-color-decorative-skin-tint-900$ouds-color-opacity-lower$ouds-color-opacity-lowest$ouds-color-opacity-transparent$ouds-color-overlay-default$ouds-color-overlay-drag$ouds-color-overlay-emphasized$ouds-color-overlay-modal$ouds-color-surface-brand-primary$ouds-color-surface-status-accent-emphasized$ouds-color-surface-status-accent-muted$ouds-color-surface-status-info-emphasized$ouds-color-surface-status-info-muted$ouds-color-surface-status-negative-emphasized$ouds-color-surface-status-negative-muted$ouds-color-surface-status-neutral-emphasized$ouds-color-surface-status-neutral-muted$ouds-color-surface-status-positive-emphasized$ouds-color-surface-status-positive-muted$ouds-color-surface-status-warning-emphasized$ouds-color-surface-status-warning-muted$ouds-elevation-color-default$ouds-elevation-color-drag$ouds-elevation-color-emphasized$ouds-elevation-color-none$ouds-elevation-color-raised$ouds-elevation-color-sticky-default$ouds-elevation-color-sticky-emphasized$ouds-elevation-color-sticky-navigation-scrolled
-
New Sass maps:
$grid-gutter-widths$ouds-backgrounds$ouds-border-colors$ouds-border-radiuses$ouds-border-styles$ouds-border-widths$ouds-dimension-negative-space-fixed$ouds-dimension-negative-space-scaled$ouds-dimension-space-fixed$ouds-dimension-space-scaled$ouds-elevations$ouds-font-sizes$ouds-font-weights$ouds-icon-sizes$ouds-opacities$ouds-text-colors
-
New Sass mixins:
get-font-size()
-
New Keys in
$utilitiesmap:border-bottom-oudsborder-color-oudsborder-end-oudsborder-oudsborder-start-oudsborder-style-oudsborder-top-oudsborder-width-oudscolor-oudscolumn-gap-oudscolumn-gap-scaled-oudsfont-size-oudsfont-weight-oudsgap-oudsgap-scaled-oudsmargin-bottom-oudsmargin-bottom-scaled-oudsmargin-end-oudsmargin-end-scaled-oudsmargin-oudsmargin-scaled-oudsmargin-start-oudsmargin-start-scaled-oudsmargin-top-oudsmargin-top-scaled-oudsmargin-x-oudsmargin-x-scaled-oudsmargin-y-oudsmargin-y-scaled-oudsnegative-margin-bottom-oudsnegative-margin-bottom-scaled-oudsnegative-margin-end-oudsnegative-margin-end-scaled-oudsnegative-margin-oudsnegative-margin-scaled-oudsnegative-margin-start-oudsnegative-margin-start-scaled-oudsnegative-margin-top-oudsnegative-margin-top-scaled-oudsnegative-margin-x-oudsnegative-margin-x-scaled-oudsnegative-margin-y-oudsnegative-margin-y-scaled-oudsopacity-oudspadding-bottom-oudspadding-bottom-scaled-oudspadding-end-oudspadding-end-scaled-oudspadding-oudspadding-scaled-oudspadding-start-oudspadding-start-scaled-oudspadding-top-oudspadding-top-scaled-oudspadding-x-oudspadding-x-scaled-oudspadding-y-oudspadding-y-scaled-oudsrounded-bottom-oudsrounded-end-oudsrounded-oudsrounded-start-oudsrounded-top-oudsrow-gap-oudsrow-gap-scaled-oudsshadow-ouds
-
New CSS variables:
--bs-body-letter-spacing--bs-color-action-disabled--bs-color-action-enabled--bs-color-action-focus--bs-color-action-highlighted--bs-color-action-hover--bs-color-action-loading--bs-color-action-negative-enabled--bs-color-action-negative-focus--bs-color-action-negative-hover--bs-color-action-negative-loading--bs-color-action-negative-pressed--bs-color-action-pressed--bs-color-action-selected--bs-color-action-support-enabled--bs-color-action-support-focus--bs-color-action-support-hover--bs-color-action-support-loading--bs-color-action-support-pressed--bs-color-action-visited--bs-color-always-black--bs-color-always-on-black--bs-color-always-on-white--bs-color-always-white--bs-color-bg-emphasized--bs-color-bg-primary--bs-color-bg-secondary--bs-color-bg-tertiary--bs-color-border-brand-primary--bs-color-border-default--bs-color-border-emphasized--bs-color-border-focus--bs-color-border-focus-inset--bs-color-border-muted--bs-color-border-on-brand-primary--bs-color-content-brand-primary--bs-color-content-default--bs-color-content-disabled--bs-color-content-muted--bs-color-content-on-action-disabled--bs-color-content-on-action-enabled--bs-color-content-on-action-focus--bs-color-content-on-action-highlighted--bs-color-content-on-action-hover--bs-color-content-on-action-loading--bs-color-content-on-action-pressed--bs-color-content-on-brand-primary--bs-color-content-on-overlay-emphasized--bs-color-content-on-status-emphasized--bs-color-content-on-status-emphasized-alt--bs-color-content-on-status-muted--bs-color-content-status-info--bs-color-content-status-negative--bs-color-content-status-positive--bs-color-content-status-warning--bs-color-decorative-accent-1-default--bs-color-decorative-accent-1-emphasized--bs-color-decorative-accent-1-muted--bs-color-decorative-accent-2-default--bs-color-decorative-accent-2-emphasized--bs-color-decorative-accent-2-muted--bs-color-decorative-accent-3-default--bs-color-decorative-accent-3-emphasized--bs-color-decorative-accent-3-muted--bs-color-decorative-accent-4-default--bs-color-decorative-accent-4-emphasized--bs-color-decorative-accent-4-muted--bs-color-decorative-accent-5-default--bs-color-decorative-accent-5-emphasized--bs-color-decorative-accent-5-muted--bs-color-decorative-brand-primary--bs-color-decorative-brand-secondary--bs-color-decorative-brand-tertiary--bs-color-decorative-neutral-default--bs-color-decorative-neutral-emphasized--bs-color-decorative-neutral-muted--bs-color-decorative-skin-tint-100--bs-color-decorative-skin-tint-200--bs-color-decorative-skin-tint-300--bs-color-decorative-skin-tint-400--bs-color-decorative-skin-tint-500--bs-color-decorative-skin-tint-600--bs-color-decorative-skin-tint-700--bs-color-decorative-skin-tint-800--bs-color-decorative-skin-tint-900--bs-color-opacity-lower--bs-color-opacity-lowest--bs-color-opacity-transparent--bs-color-overlay-default--bs-color-overlay-drag--bs-color-overlay-emphasized--bs-color-overlay-modal--bs-color-surface-brand-primary--bs-color-surface-status-accent-emphasized--bs-color-surface-status-accent-muted--bs-color-surface-status-info-emphasized--bs-color-surface-status-info-muted--bs-color-surface-status-negative-emphasized--bs-color-surface-status-negative-muted--bs-color-surface-status-neutral-emphasized--bs-color-surface-status-neutral-muted--bs-color-surface-status-positive-emphasized--bs-color-surface-status-positive-muted--bs-color-surface-status-warning-emphasized--bs-color-surface-status-warning-muted--bs-container-margin-x--bs-elevation-color-default--bs-elevation-color-drag--bs-elevation-color-emphasized--bs-elevation-color-none--bs-elevation-color-raised--bs-elevation-color-sticky-default--bs-elevation-color-sticky-emphasized--bs-elevation-color-sticky-navigation-scrolled--bs-font-size-display-large--bs-font-size-display-medium--bs-font-size-display-small--bs-font-size-heading-xlarge--bs-font-size-heading-large--bs-font-size-heading-medium--bs-font-size-heading-small--bs-font-size-body-large--bs-font-size-body-medium--bs-font-size-body-small--bs-font-size-label-xlarge--bs-font-size-label-large--bs-font-size-label-medium--bs-font-size-label-small--bs-font-size-code-medium--bs-font-line-height-display-large--bs-font-line-height-display-medium--bs-font-line-height-display-small--bs-font-line-height-heading-xlarge--bs-font-line-height-heading-large--bs-font-line-height-heading-medium--bs-font-line-height-heading-small--bs-font-line-height-body-large--bs-font-line-height-body-medium--bs-font-line-height-body-small--bs-font-line-height-label-xlarge--bs-font-line-height-label-large--bs-font-line-height-label-medium--bs-font-line-height-label-small--bs-font-line-height-code-medium--bs-font-letter-spacing-display-large--bs-font-letter-spacing-display-medium--bs-font-letter-spacing-display-small--bs-font-letter-spacing-heading-xlarge--bs-font-letter-spacing-heading-large--bs-font-letter-spacing-heading-medium--bs-font-letter-spacing-heading-small--bs-font-letter-spacing-body-large--bs-font-letter-spacing-body-medium--bs-font-letter-spacing-body-small--bs-font-letter-spacing-label-xlarge--bs-font-letter-spacing-label-large--bs-font-letter-spacing-label-medium--bs-font-letter-spacing-label-small--bs-font-letter-spacing-code-medium--bs-font-max-width-display-large--bs-font-max-width-display-medium--bs-font-max-width-display-small--bs-font-max-width-heading-xlarge--bs-font-max-width-heading-large--bs-font-max-width-heading-medium--bs-font-max-width-heading-small--bs-font-max-width-body-large--bs-font-max-width-body-medium--bs-font-max-width-body-small--bs-icon-lg-with-body-large--bs-icon-lg-with-body-medium--bs-icon-lg-with-body-small--bs-icon-lg-with-heading-large--bs-icon-lg-with-heading-medium--bs-icon-lg-with-heading-small--bs-icon-lg-with-heading-xlarge--bs-icon-md-with-body-large--bs-icon-md-with-body-medium--bs-icon-md-with-body-small--bs-icon-md-with-heading-large--bs-icon-md-with-heading-medium--bs-icon-md-with-heading-small--bs-icon-md-with-heading-xlarge--bs-icon-sm-with-body-large--bs-icon-sm-with-body-medium--bs-icon-sm-with-body-small--bs-icon-sm-with-heading-large--bs-icon-sm-with-heading-medium--bs-icon-sm-with-heading-small--bs-icon-sm-with-heading-xlarge--bs-space-scaled-medium--bs-space-scaled-none--bs-space-scaled-short--bs-space-scaled-shorter--bs-space-scaled-shortest--bs-space-scaled-smash--bs-space-scaled-spacious--bs-space-scaled-tall--bs-space-scaled-taller--bs-space-scaled-tallest
-
Warning Dropped Sass variables:
$blockquote-font-size$blockquote-footer-font-size$blockquote-line-height$blockquote-letter-spacing$boosted-prefix$boosted-variable-prefix$border-color-subtle$border-color-subtle-dark$btn-active-box-shadow$btn-border-radius-lg$btn-border-radius-sm$btn-box-shadow$btn-close-white-active-border-color$btn-close-white-active-color$btn-close-white-bg$btn-close-white-border-color$btn-close-white-color$btn-close-white-disabled-color$btn-close-white-hover-color$btn-default-active-bg$btn-default-active-border$btn-default-active-color$btn-default-disabled-bg$btn-default-disabled-border$btn-default-disabled-color$btn-default-hover-bg$btn-default-hover-border$btn-default-hover-color$btn-disabled-opacity$btn-focus-box-shadow$btn-focus-width$btn-font-family$btn-font-size-lg$btn-font-size-sm$btn-font-size$btn-hover-color$btn-icon-padding-x-lg$btn-icon-padding-x-sm$btn-letter-spacing-lg$btn-letter-spacing-sm$btn-letter-spacing$btn-line-height-lg$btn-line-height-sm$btn-line-height$btn-link-color$btn-link-disabled-color$btn-link-hover-color$btn-outline-default-active-bg$btn-outline-default-active-border$btn-outline-default-active-color$btn-outline-default-disabled-bg$btn-outline-default-disabled-border$btn-outline-default-disabled-color$btn-outline-default-hover-bg$btn-outline-default-hover-border$btn-outline-default-hover-color$btn-padding-x-lg$btn-padding-x-sm$btn-padding-y-lg$btn-padding-y-sm$btn-social-networks$btn-transition$disabled-color$disabled-color-dark$display1-size$display1-spacing$display2-size$display2-spacing$display3-size$display3-spacing$display4-size$display4-spacing$focus-visible-inner-color$focus-visible-inner-color-dark$focus-visible-outer-color$focus-visible-outer-color-dark$footer-nav-link-font-weight$font-size-xlg$form-star-focus-box-shadow$form-star-focus-color$form-star-focus-color-dark$form-star-focus-outline$form-star-focus-outline-dark$functional-blue$functional-blue-dark$functional-green$functional-green-dark$functional-red$functional-red-dark$functional-yellow$functional-yellow-dark$gray-950$grid-gutter-breakpoint$h1-line-height$h1-spacing$h2-line-height$h2-spacing$h3-line-height$h3-spacing$h4-line-height$h4-spacing$h5-line-height$h5-spacing$h6-line-height$h6-spacing$initialism-font-size$input-btn-border-width$input-btn-padding-x$input-btn-padding-y-sm$input-btn-padding-y$lead-letter-spacing$lead-line-height$legend-font-size$line-length-sm$line-length-md$mid-spacing$orange-filter$outline-offset$outline-width$pre-line-height$step-item-padding-end$supporting-blue$supporting-green$supporting-orange$supporting-pink$supporting-purple$supporting-yellow$tertiary-active-bg$tertiary-active-bg-dark$title-bar-border-color-dark$title-bar-font-size-md$title-bar-font-size-xl$title-bar-line-height-md$title-bar-line-height-xl$variable-prefix
-
Warning Dropped CSS variables:
--bs-border-color-subtle--bs-btn-close-active-border-color--bs-btn-close-active-color--bs-btn-close-bg--bs-btn-close-border-color--bs-btn-close-color--bs-btn-close-disabled-color--bs-btn-close-hover-color--bs-disabled-color--bs-focus-visible-inner-color--bs-focus-visible-outer-color--bs-gray-950--bs-tertiary-active-bg
-
Breaking CSS variables only available when
$enable-bootstrap-compatibilityis 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
$utilitiesmap only available when$enable-bootstrap-compatibilityis on:background-colorborderborder-bottomborder-colorborder-endborder-opacityborder-startborder-topborder-widthcolorcolumn-gapfont-sizefont-weightgapgradientline-heightmargin-bottommargin-endmarginmargin-startmargin-topmargin-xmargin-ynegative-margin-bottomnegative-margin-endnegative-marginnegative-margin-startnegative-margin-topnegative-margin-xnegative-margin-yopacitypadding-bottompadding-endpaddingpadding-startpadding-toppadding-xpadding-yroundedrounded-bottomrounded-endrounded-startrounded-toprow-gapshadowsubtle-background-colorsubtle-border-colortext-color
-
Warning Dropped keys in
$utilitiesmap:bg-opacityborder-opacityline-lengthtext-opacity
-
Warning Signature of
make-row($gutter, $gutter-sm)is nowmake-row($gutter).
Sass mixins
-
New The mixin
get-font-size({font-size-ref})has been added, wherefont-size-refis 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 anyfont-sizein 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-modeparameter that is set by default tolightordarkdepending on the$mode. It allows you to precise another mode to be the inverse of a certain mode. -
Warning
button-variantmixin 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.