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

# Vue2 Cedar component library

Cedar is moving to Vue3! After deprecation removal, Cedar Vue2 assets will be made available via the "REI-Cedar-Vue2" repo and NPM package.

# 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

# Component Variables

# CdrBanner

The CdrBanner component variable has been removed. Messaging tokens are available to replicate CdrBanner.

# 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