Deprecated Features
# Tokens/Mixins
# Text Mixins
| Deprecated token/mixin | Equivalent token/mixin |
|---|---|
| cdr-text-header-1 | cdr-text-heading-serif-1100 |
| cdr-text-header-2 | cdr-text-heading-serif-900 |
| cdr-text-header-3 | cdr-text-heading-serif-700 |
| cdr-text-header-4 | cdr-text-heading-serif-600 |
| cdr-text-header-5 | cdr-text-heading-sans-500 |
| cdr-text-header-6 | cdr-text-heading-sans-400 |
| cdr-text-header-7 | cdr-text-heading-sans-300 |
| redwood-display-70 | cdr-text-utility-700 |
| redwood-display-60 | cdr-text-utility-600 |
| redwood-display-50 | cdr-text-utility-500 |
| redwood-display-40 | cdr-text-utility-400 |
| redwood-display-30 | cdr-text-utility-300 |
| redwood-display-20 | cdr-text-utility-200 |
| redwood-display-10 | cdr-text-utility-100 |
| redwood-body-40 | cdr-text-body-500 |
| redwood-body-30 | cdr-text-body-400 |
| redwood-body-20 | cdr-text-body-300 |
| redwood-body-10 | cdr-text-body-300 |
| maple-utility-70 | cdr-text-utility-700 |
| maple-utility-60 | cdr-text-utility-600 |
| maple-utility-50 | cdr-text-utility-500 |
| maple-utility-40 | cdr-text-utility-400 |
| maple-utility-30 | cdr-text-utility-300 |
| maple-utility-20 | cdr-text-utility-200 |
| maple-utility-10 | cdr-text-utility-100 |
| spruce-display-100 | cdr-text-heading-serif-strong-1200 |
| spruce-display-90 | cdr-text-heading-serif-strong-1200 |
| spruce-display-80 | cdr-text-heading-serif-strong-1200 |
| spruce-display-70 | cdr-text-heading-serif-strong-1100 |
| spruce-display-60 | cdr-text-heading-serif-strong-800 |
| spruce-display-50 | cdr-text-heading-serif-strong-700 |
| spruce-display-40 | cdr-text-heading-serif-strong-600 |
| spruce-display-30 | cdr-text-heading-sans-500 |
| spruce-display-20 | cdr-text-heading-sans-400 |
| spruce-display-10 | cdr-text-heading-sans-300 |
| spruce-display-00 | cdr-text-heading-sans-300 |
| spruce-body-30 | cdr-text-body-300 |
| spruce-body-20 | cdr-text-body-300 |
| cdr-text-heading-300 | cdr-text-heading-sans-300 |
| cdr-text-heading-400 | cdr-text-heading-sans-400 |
| cdr-text-heading-500 | cdr-text-heading-sans-500 |
| cdr-text-heading-600 | cdr-text-heading-serif-600 |
| cdr-text-heading-700 | cdr-text-heading-serif-700 |
| cdr-text-heading-800 | cdr-text-heading-serif-700 |
| cdr-text-subheading-300 | cdr-text-subheading-sans-300 |
| cdr-text-subheading-400 | cdr-text-subheading-sans-400 |
| cdr-text-subheading-500 | cdr-text-subheading-sans-500 |
| cdr-text-subheading-600 | cdr-text-subheading-sans-600 |
| cdr-text-display-600 | cdr-text-heading-serif-strong-600 |
| cdr-text-display-700 | cdr-text-heading-serif-strong-700 |
| cdr-text-display-800 | cdr-text-heading-serif-strong-800 |
| cdr-text-display-900 | cdr-text-heading-serif-strong-900 |
| cdr-text-display-1000 | cdr-text-heading-serif-strong-1000 |
| cdr-text-display-1100 | cdr-text-heading-serif-strong-1100 |
| cdr-text-display-1200 | cdr-text-heading-serif-strong-1200 |
| cdr-text-utility-n00 | cdr-text-utility-sans-n00 |
| cdr-text-utility-strong-n00 | cdr-text-utility-sans-strong-n00 |
# Color Tokens
| Deprecated token/mixin | Equivalent token/mixin |
|---|---|
| cdr-color-text-primary-lightmode | cdr-color-text-primary |
| cdr-color-text-primary-darkmode | n/a |
| cdr-color-text-secondary-lightmode | cdr-color-text-secondary |
| cdr-color-text-secondary-darkmode | n/a |
| cdr-color-text-disabled-lightmode | cdr-color-text-disabled |
| cdr-color-text-disabled-darkmode | n/a |
| cdr-color-text-link-lightmode | cdr-color-text-link-rest |
| cdr-color-text-link-darkmode | n/a |
| cdr-color-text-error-lightmode | cdr-color-text-error |
| cdr-color-text-error-darkmode | n/a |
| cdr-color-text-form-label-lightmode | cdr-color-text-input-label |
| cdr-color-text-form-label-darkmode | n/a |
| cdr-color-text-form-placeholder-lightmode | cdr-color-text-input-placeholder |
| cdr-color-text-form-placeholder-darkmode | n/a |
| cdr-color-text-form-disabled-lightmode | cdr-color-text-input-disabled |
| cdr-color-text-form-disabled-darkmode | n/a |
| cdr-color-icon-primary-lightmode | cdr-color-icon-default |
| cdr-color-icon-primary-darkmode | n/a |
| cdr-color-icon-emphasis-lightmode | cdr-color-icon-emphasis |
| cdr-color-icon-emphasis-darkmode | n/a |
| cdr-color-background-dark | n/a |
| cdr-color-background-darker | n/a |
| cdr-color-background-light | cdr-color-background-primary |
| cdr-color-background-lighter | cdr-color-background-primary |
| cdr-color-background-lightest | cdr-color-background-primary |
| cdr-color-background-form-lightmode | cdr-color-background-primary |
| cdr-color-background-form-darkmode | n/a |
| cdr-color-background-form-input-lightmode | cdr-color-background-input-default |
| cdr-color-background-form-input-darkmode | n/a |
| cdr-color-border-primary-lightmode | cdr-color-border-primary |
| cdr-color-border-primary-darkmode | n/a |
| cdr-color-border-secondary-lightmode | cdr-color-border-secondary |
| cdr-color-border-secondary-darkmode | n/a |
| cdr-color-border-disabled-lightmode | cdr-color-border-input-default-disabled |
| cdr-color-border-disabled-darkmode | n/a |
| cdr-color-border-error-lightmode | cdr-color-border-error |
| cdr-color-border-selected-lightmode | cdr-color-border-input-default-selected |
# Media Query Mixins
| Deprecated Mixin | New Mixin |
|---|---|
| cdr-xs-mq | cdr-xs-mq-up |
| cdr-sm-mq | cdr-sm-mq-up |
| cdr-md-mq | cdr-md-mq-up |
| cdr-lg-mq | cdr-lg-mq-up |
# CdrCta Tokens
| Deprecated Token | Equivalent Token |
|---|---|
| cdr-color-text-cta-dark | cdr-color-text-button-dark |
| cdr-color-text-cta-dark-hover | cdr-color-text-button-dark-hover |
| cdr-color-text-cta-dark-active | cdr-color-text-button-dark-active |
| cdr-color-text-cta-dark-disabled | cdr-color-text-button-dark-disabled |
| cdr-color-background-cta-dark-rest | cdr-color-background-button-dark-rest |
| cdr-color-background-cta-dark-active | cdr-color-background-button-dark-active |
| cdr-color-background-cta-dark-hover | cdr-color-background-button-dark-hover |
| cdr-color-border-cta-dark-rest | cdr-color-border-button-dark-rest |
| cdr-color-border-cta-dark-active | cdr-color-border-button-dark-active |
| cdr-color-border-cta-dark-active-inset | cdr-color-border-button-dark-active-inset |
| cdr-color-border-cta-dark-hover | cdr-color-border-button-dark-hover |
| cdr-color-text-cta-light | cdr-color-text-button-secondary |
| cdr-color-text-cta-light-hover | cdr-color-text-button-secondary-hover |
| cdr-color-text-cta-light-active | cdr-color-text-button-secondary-active |
| cdr-color-text-cta-light-disabled | cdr-color-text-button-secondary-disabled |
| cdr-color-background-cta-light-rest | cdr-color-background-button-secondary-rest |
| cdr-color-background-cta-light-active | cdr-color-background-button-secondary-active |
| cdr-color-background-cta-light-hover | cdr-color-background-button-secondary-hover |
| cdr-color-background-cta-light-disabled | cdr-color-background-button-secondary-disabled |
| cdr-color-border-cta-light-rest | cdr-color-border-button-secondary-rest |
| cdr-color-border-cta-light-active | cdr-color-border-button-secondary-active |
| cdr-color-border-cta-light-active-inset | cdr-color-border-button-secondary-active-inset |
| cdr-color-text-cta-brand | cdr-color-text-button-primary |
| cdr-color-text-cta-brand-hover | cdr-color-text-button-primary-hover |
| cdr-color-text-cta-brand-active | cdr-color-text-button-primary-active |
| cdr-color-text-cta-brand-disabled | cdr-color-text-button-primary-disabled |
| cdr-color-background-cta-brand-rest | cdr-color-background-button-primary-rest |
| cdr-color-background-cta-brand-active | cdr-color-background-button-primary-active |
| cdr-color-background-cta-brand-hover | cdr-color-background-button-primary-hover |
| cdr-color-border-cta-brand-rest | cdr-color-border-button-primary-rest |
| cdr-color-border-cta-brand-active | cdr-color-border-button-primary-active |
| cdr-color-border-cta-brand-active-inset | cdr-color-border-button-primary-active-inset |
| cdr-color-border-cta-brand-hover | cdr-color-border-button-primary-hover |
| cdr-color-text-cta-sale | cdr-color-text-button-sale |
| cdr-color-text-cta-sale-hover | cdr-color-text-button-sale-hover |
| cdr-color-text-cta-sale-active | cdr-color-text-button-sale-active |
| cdr-color-text-cta-sale-disabled | cdr-color-text-button-sale-disabled |
| cdr-color-background-cta-sale-rest | cdr-color-background-button-sale-rest |
| cdr-color-background-cta-sale-active | cdr-color-background-button-sale-active |
| cdr-color-background-cta-sale-hover | cdr-color-background-button-sale-hover |
| cdr-color-border-cta-light-hover | cdr-color-border-button-secondary-hover |
| cdr-color-border-cta-sale-rest | cdr-color-border-button-sale-rest |
| cdr-color-border-cta-sale-active | cdr-color-border-button-sale-active |
| cdr-color-border-cta-sale-active-inset | cdr-color-border-button-sale-active-inset |
| cdr-color-border-cta-sale-hover | cdr-color-border-button-sale-hover |
| cdr-color-background-cta-default-disabled | cdr-color-background-button-default-disabled |
| cdr-color-border-cta-default-disabled | cdr-color-border-button-default-disabled |
# Cedar Components
# CdrCta
The functionality of CdrCta has been merged into CdrButton. See the release notes for migration steps.
# CdrDataTable
CdrDataTable has been replaced by CdrTable. See the release notes for migration steps.
# CdrCheckbox
- The
compactmodifier has been removed. Usesize="small"instead.
# CdrRadio
- The
compactmodifier has been removed. Usesize="small"instead.
# CdrInput
- The
helper-textslot in CdrInput has been replaced with thehelper-text-bottomslot.
# CdrTabs
- The
tabChangeevent has been replaced withtab-changefor consistency.
# CdrAccordion
- The
labelprop for CdrAccordion has been replaced with thelabelslot.
# CdrText Modifiers
| Deprecated modifier name | Equivalent modifier names and breakpoints |
|---|---|
| display | heading-serif-strong-700 heading-serif-strong-900@md heading-serif-strong-1100@lg |
| display-static | heading-serif-strong-900 |
| heading-large | heading-serif-600 heading-serif-700@md heading-serif-900@lg |
| heading-large-static | heading-serif-700 |
| heading-medium | heading-serif-600 heading-serif-700@md heading-serif-700@lg |
| heading-medium-static | heading-serif-600 |
| heading-small | heading-sans-400 heading-sans-500@md heading-sans-500@lg |
| heading-small-static | heading-sans-400 |
| subheading | subheading-sans-300 |
| heading-300 | heading-sans-300 |
| heading-400 | heading-sans-400 |
| heading-500 | heading-sans-500 |
| heading-600 | heading-serif-600 |
| heading-700 | heading-serif-700 |
| heading-800 | heading-serif-700 |
| subheading-300 | subheading-sans-300 |
| subheading-400 | subheading-sans-400 |
| subheading-500 | subheading-sans-500 |
| subheading-600 | subheading-sans-600 |
| display-600 | heading-serif-strong-600 |
| display-700 | heading-serif-strong-700 |
| display-800 | heading-serif-strong-800 |
| display-900 | heading-serif-strong-900 |
| display-1000 | heading-serif-strong-1000 |
| display-1100 | heading-serif-strong-1100 |
| display-1200 | heading-serif-strong-1200 |
| utility-n00 | utility-sans-n00 |
| utility-strong-n00 | utility-sans-strong-n00 |
# CdrIcon
| old asset name | new asset name |
|---|---|
| warning-stroke.svg | error-stroke.svg |
| warning-fill.svg | error-fill.svg |
| warning-tri.svg | warning-fill.svg |
| old component name | new component name |
|---|---|
| IconWarningStroke | IconErrorStroke |
| IconWarningFill | IconErrorFill |
| IconWarningTri | IconWarningFill |
# Utility Classes
# Space
| deprecated class name | equivalent class name |
|---|---|
cdr-inline--lg | cdr-mr-space-two-x |
cdr-inline--sm | cdr-mr-space-half-x |
cdr-inline--xl | cdr-mr-space-four-x |
cdr-inline--xs | cdr-mr-space-quarter-x |
cdr-inline--xxl | n/a |
cdr-inline--xxs | cdr-mr-space-eighth-x |
cdr-inline-left--lg | cdr-mr-space-two-x |
cdr-inline-left--sm | cdr-mr-space-half-x |
cdr-inline-left--xl | cdr-mr-space-four-x |
cdr-inline-left--xs | cdr-mr-space-quarter-x |
cdr-inline-left--xxl | n/a |
cdr-inline-left--xxs | cdr-mr-space-eighth-x |
cdr-inline-left | cdr-mr-space-one-x |
cdr-inline-right--lg | cdr-ml-space-two-x |
cdr-inline-right--sm | cdr-ml-space-half-x |
cdr-inline-right--xl | cdr-ml-space-four-x |
cdr-inline-right--xs | cdr-ml-space-quarter-x |
cdr-inline-right--xxl | n/a |
cdr-inline-right--xxs | cdr-ml-space-eighth-x |
cdr-inline-right | cdr-ml-space-one-x |
cdr-inline | cdr-mr-space-one-x |
cdr-inset--lg.cdr-inset--squish | cdr-space-inset-four-x-squish |
cdr-inset--lg.cdr-inset--stretch | cdr-space-inset-two-x-stretch |
cdr-inset--lg | cdr-space-inset-two-x |
cdr-inset--remove-all | n/a |
cdr-inset--remove-bottom | n/a |
cdr-inset--remove-left | n/a |
cdr-inset--remove-right | n/a |
cdr-inset--remove-top | n/a |
cdr-inset--sm.cdr-inset--squish | cdr-space-inset-half-x-squish |
cdr-inset--sm.cdr-inset--stretch | cdr-space-inset-half-x-stretch |
cdr-inset--sm | cdr-space-inset-half-x |
cdr-inset--squish | cdr-space-inset-one-x-squish |
cdr-inset--stretch | cdr-space-inset-one-x-stretch |
cdr-inset--xl.cdr-inset--squish | cdr-space-inset-two-x-squish |
cdr-inset--xl.cdr-inset--stretch | cdr-space-inset-four-x-stretch |
cdr-inset--xl | cdr-space-inset-four-x |
cdr-inset--xs.cdr-inset--squish | cdr-space-inset-quarter-x-squish |
cdr-inset--xs.cdr-inset--stretch | cdr-space-inset-quarter-x-stretch |
cdr-inset--xs | cdr-space-inset-quarter-x |
cdr-inset--xxs.cdr-inset--squish | cdr-space-inset-eighth-x-squish |
cdr-inset--xxs.cdr-inset--stretch | cdr-space-inset-eighth-x-stretch |
cdr-inset--xxs | cdr-space-inset-eighth-x |
cdr-inset | cdr-space-inset-one-x |
cdr-stack--lg | cdr-mb-space-two-x |
cdr-stack--sm | cdr-mb-space-half-x |
cdr-stack--xl | cdr-mb-space-four-x |
cdr-stack--xs | cdr-mb-space-quarter-x |
cdr-stack--xxl | n/a |
cdr-stack--xxs | cdr-mb-space-eighth-x |
cdr-stack | cdr-mb-space-one-x |
# Alignment
| Deprecated class name | Equivalent class name |
|---|---|
| cdr-text-left | cdr-align-text-left |
| cdr-text-center | cdr-align-text-center |
| cdr-text-right | cdr-align-text-right |
| cdr-center-block | cdr-align-center-block |
# Display
The utility visibility and accessibility classes have been deprecated and updated to bring them inline with the latest token names. Please see the map below to review the new names.
| Deprecated class name | Equivalent class name |
|---|---|
| cdr-hide | cdr-display-none |
| cdr-show | cdr-display-block |
| cdr-show-inline | cdr-display-inline |
| cdr-show-inline-block | cdr-display-inline-block |
| cdr-sr-only | cdr-display-sr-only |
| cdr-sr-only-focusable | cdr-display-sr-focusable |
# Color
| Deprecated utility | Equivalent utility |
|---|---|
| cdr-bg--light | cdr-color-background-primary |
| cdr-bg--lighter | cdr-color-background-primary |
| cdr-bg--lightest | cdr-color-background-primary |
| cdr-bg--dark | n/a |
| cdr-bg--darker | n/a |