• Components/

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-sans-700
redwood-display-60 cdr-text-utility-sans-600
redwood-display-50 cdr-text-utility-sans-500
redwood-display-40 cdr-text-utility-sans-400
redwood-display-30 cdr-text-utility-sans-300
redwood-display-20 cdr-text-utility-sans-200
redwood-display-10 cdr-text-utility-sans-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-sans-700
maple-utility-60 cdr-text-utility-sans-600
maple-utility-50 cdr-text-utility-sans-500
maple-utility-40 cdr-text-utility-sans-400
maple-utility-30 cdr-text-utility-sans-300
maple-utility-20 cdr-text-utility-sans-200
maple-utility-10 cdr-text-utility-sans-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 compact modifier has been removed. Use size="small" instead.

# CdrRadio

  • The compact modifier has been removed. Use size="small" instead.

# CdrInput

  • The helper-text slot in CdrInput has been replaced with the helper-text-bottom slot.

# CdrTabs

  • The tabChange event has been replaced with tab-change for consistency.

# CdrAccordion

  • The label prop for CdrAccordion has been replaced with the label slot.

# CdrRow and CdrCol

The flexbox based CdrRow and CdrCol have been replaced with the CSS grid based CdrGrid. See the release notes for more information.

# 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