• 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-default-compact cdr-text-utility-sans-200
cdr-text-editorial cdr-text-default
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
cdr-color-background-success cdr-color-background-message-success
cdr-color-background-warning cdr-color-background-message-warning
cdr-color-background-error cdr-color-background-message-error
cdr-color-background-info cdr-color-background-message-info
cdr-color-background-sale cdr-color-background-message-sale

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

# CdrBreadcrumb

  • The link scoped slot for CdrBreadcrumb has been removed, instead to add custom link behavior use the navigate event

# CdrPagination

  • The link, prevLink, and nextLink scoped slots for CdrPagination has been removed, instead to add custom link behavior use the navigate eventß

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

# 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

NOTE: the Cedar utility classes and CdrText modifier have been removed as of Cedar version 9.0.0. These mappings exist purely to guide consumers who may be updating from earlier versions of Cedar. Cedar tokens or plain CSS should be used instead to apply these same styles.

# 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

# 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

# Migrating CSS Utilities to Tokens/Mixins

The Cedar CSS utility classes have been removed due to their negative impact on site performance, code quality/maintainability, and the architectural risk of using global un-scoped shared CSS classes. The examples below outline how to migrate instances of the various utility classes to instead use plain CSS and tokens or mixins from @rei/cdr-tokens

# Align Utils

Alignment utilities can be replaced with the equivalent plain CSS

<div class="cdr-align-text-center">
  Deprecated utility
</div>
1
2
3
<template>
  <div class="your-custom-alignment-class">
    Using plain CSS
  </div>
</template>
<style lang="scss">
  .your-custom-alignment-class {
    text-align: center;
  }
</style>
1
2
3
4
5
6
7
8
9
10
11

# Color Utils

Color utilities can be replaced with the equivalent value from @rei/cdr-tokens targeting either background-color, color, or fill as appropriate.

<div class="cdr-color-background-primary">
  Deprecated background color utility
</div>

<div class="cdr-color-text-primary">
  Deprecated text color utility
</div>
1
2
3
4
5
6
7
<template>
  <div class="your-custom-background-color-class">
    Using plain CSS/tokens for background color
  </div>

  <div class="your-custom-text-color-class">
    Using plain CSS/tokens for text color
  </div>
</template>
<style lang="scss">
  @import '~@rei/cdr-tokens/dist/scss/cdr-tokens';

  .your-custom-background-color-class {
    background-color: $cdr-color-background-primary;
  }

  .your-custom-text-color-class {
    color: $cdr-color-text-primary;
  }
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

# Container Utils

The cdr-container and cdr-container-fluid utility classes should be replaced with either the CdrContainer component or the equivalent mixin from @rei/cdr-tokens. See the Cedar Responsive article (opens new window) for more information on general container usage.

<div class="cdr-container">
  Deprecated utility
</div>
1
2
3
<template>
  <div>
    <cdr-container>
      Using the CdrContainer component
    </cdr-container>

    <div class="your-custom-container-class">
      Using plain CSS/tokens
    </div>

  </div>
</template>
<style lang="scss">
  @import '~@rei/cdr-tokens/dist/scss/cdr-tokens';

  .your-custom-container-class {
    @include cdr-container;
  }
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

# Display Utils

Display utilities can be replaced with the equivalent plain CSS

<div class="cdr-display-none">
  Deprecated utility
</div>
1
2
3
<template>
  <div class="your-custom-display-class">
    Using plain CSS
  </div>
</template>
<style lang="scss">
  .your-custom-display-class {
    display: none;
  }
</style>
1
2
3
4
5
6
7
8
9
10

# Space Utils

Space utility classes were a combination of the targeted property and a Cedar spacing token.

prefix property
inset padding
pl padding-left
pt padding-top
pr padding-right
pb padding-bottom
px padding-left and padding-right
py padding-top and padding-bottom
ml margin-left
mt margin-top
mr margin-right
mb margin-bottom
mx margin-left and margin-right
my margin-top and margin-bottom
<div class="cdr-space-inset-half-x">
  Deprecated utility
</div>
1
2
3
<template>
  <div class="your-custom-space-class">
    Using plain CSS/tokens
  </div>
</template>
<style lang="scss">
  @import '~@rei/cdr-tokens/dist/scss/cdr-tokens';

  .your-custom-space-class {
    padding: $cdr-space-half-x;
  }
</style>
1
2
3
4
5
6
7
8
9
10
11
12

# Text Utils

Note that the text utility classes were available both as CSS utility classes and via the cdr-text modifier prop. The migration path is the same for both patterns.

<p class="cdr-text--utility-sans-strong-300">
  Deprecated utility
</p>

<cdr-text modifier="utility-sans-strong-300" tag="p">
  Deprecated modifier
</cdr-text>
1
2
3
4
5
6
7
<template>
  <p class="your-custom-type-class">
    Using plain CSS/tokens
  </p>
</template>
<style lang="scss">
  @import '~@rei/cdr-tokens/dist/scss/cdr-tokens';

  .your-custom-type-class {
    @include cdr-text-utility-sans-strong-300;
  }
</style>
1
2
3
4
5
6
7
8
9
10
11
12

# Responsive Utilities

The align, display, space, and text utility classes supported breakpoint modifiers as a suffix which would only activate the utility class at the given breakpoint. Those instances should be migrated as described above but additionally use a breakpoint mixin from @rei/cdr-tokens (opens new window).

<div class="cdr-mb-space-quarter-x\@md">
  Deprecated responsive utility
</div>
1
2
3
<template>
  <div class="your-custom-responsive-space-class">
    Using plain CSS/tokens
  </div>
</template>
<style lang="scss">
  @import '~@rei/cdr-tokens/dist/scss/cdr-tokens';

  @include cdr-md-mq-only {
    .your-custom-responsive-space-class {
      margin-bottom: $cdr-space-quarter-x;
    }
  }

</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15