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 |
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 |
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 |
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 |
The functionality of CdrCta has been merged into CdrButton. See the release notes for migration steps.
CdrDataTable has been replaced by CdrTable. See the release notes for migration steps.
compact
modifier has been removed. Use size="small"
instead.compact
modifier has been removed. Use size="small"
instead.helper-text
slot in CdrInput has been replaced with the helper-text-bottom
slot.tabChange
event has been replaced with tab-change
for consistency.label
prop for CdrAccordion has been replaced with the label
slot.The flexbox based CdrRow and CdrCol have been replaced with the CSS grid based CdrGrid. See the release notes for more information.
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 |
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 |
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 |
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 |
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 |
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 |