IconLogoMark
IconUiExpandCollapseDown

Release NotesIconUiExpandCollapseDown

ComponentsIconUiExpandCollapseDown

GuidelinesIconUiExpandCollapseDown

PatternsIconUiExpandCollapseDown

WordsIconUiExpandCollapseDown

ResourcesIconUiExpandCollapseDown

Code HelpersIconUiExpandCollapseDown
Design AssetsIconUiExpandCollapseDown

Removed Variables

Variables that have been removed from Uniform, representing breaking changes.

Web
React Native
Android
Apple

About Removals

Below you'll find a list of all the variables that have been removed from Uniform and their replacement. If you don't see a replacement listed, reach out to your designer or the Uniform team.

Colors

Tagging

Removed VariableStable Variable
$color-tagging-content-whitevar(--color-base-white)
$color-tagging-content-blackvar(--color-base-black)

Background

Removed VariableStable Variable
$color-le-bg-level0var(--color-bg-level0)
$color-le-bg-level0-accentvar(--color-bg-level0-accent)
$color-le-bg-level1var(--color-bg-level1)
$color-le-bg-level1-accentvar(--color-bg-level1-accent)
$color-le-bg-level2var(--color-bg-level2)
$color-le-bg-level2-accentvar(--color-bg-level2-accent)
$color-le-bg-level3var(--color-bg-level3)
$color-le-bg-level3-accentvar(--color-bg-level3-accent)
$color-de-bg-level0var(--color-bg-level0)
$color-de-bg-level0-accentvar(--color-bg-level0-accent)
$color-de-bg-level1var(--color-bg-level1)
$color-de-bg-level1-accentvar(--color-bg-level1-accent)
$color-de-bg-level2var(--color-bg-level2)
$color-de-bg-level2-accentvar(--color-bg-level2-accent)
$color-de-bg-level3var(--color-bg-level3)
$color-de-bg-level3-accentvar(--color-bg-level3-accent)

Text

Removed VariableStable Variable
$color-le-text-contrastvar(--color-content-contrast)
$color-le-text-defaultvar(--color-content-default)
$color-le-text-subtlevar(--color-content-subtle)
$color-le-text-nonessentialvar(--color-content-nonessential)
$color-de-text-contrastvar(--color-content-contrast)
$color-de-text-defaultvar(--color-content-default)
$color-de-text-subtlevar(--color-content-subtle)
$color-de-text-nonessentialvar(--color-content-nonessential)

Icon

Removed VariableStable Variable
$color-le-icon-contrastvar(--color-content-contrast)
$color-le-icon-defaultvar(--color-content-default)
$color-le-icon-subtlevar(--color-content-subtle)
$color-le-icon-nonessentialvar(--color-content-nonessential)
$color-de-icon-contrastvar(--color-content-contrast)
$color-de-icon-defaultvar(--color-content-default)
$color-de-icon-subtlevar(--color-content-subtle)
$color-de-icon-nonessentialvar(--color-content-nonessential)

Divider

Removed VariableStable Variable
$color-le-dividervar(--color-divider)
$color-de-dividervar(--color-divider)

Utility

Removed VariableStable Variable
$color-le-utility-action-textvar(--color-utility-action-text)
$color-le-utility-information-bgvar(--color-utility-information-bg)
$color-le-utility-information-textvar(--color-utility-information-text)
$color-le-utility-confirmation-bgvar(--color-utility-confirmation-bg)
$color-le-utility-confirmation-textvar(--color-utility-confirmation-text)
$color-le-utility-warning-bgvar(--color-utility-warning-bg)
$color-le-utility-warning-textvar(--color-utility-warning-text)
$color-le-utility-critical-bgvar(--color-utility-critical-bg)
$color-le-utility-critical-textvar(--color-utility-critical-text)
$color-de-utility-action-textvar(--color-utility-action-text)
$color-de-utility-information-bgvar(--color-utility-information-bg)
$color-de-utility-information-textvar(--color-utility-information-text)
$color-de-utility-confirmation-bgvar(--color-utility-confirmation-bg)
$color-de-utility-confirmation-textvar(--color-utility-confirmation-text)
$color-de-utility-warning-bgvar(--color-utility-warning-bg)
$color-de-utility-warning-textvar(--color-utility-warning-text)
$color-de-utility-critical-bgvar(--color-utility-critical-bg)
$color-de-utility-critical-textvar(--color-utility-critical-text)
$color-le-utility-accent-actionNo replacement.
$color-le-utility-accent-informationNo replacement.
$color-le-utility-accent-confirmationNo replacement.
$color-le-utility-accent-warningNo replacement.
$color-le-utility-accent-criticalNo replacement.
$color-de-utility-accent-actionNo replacement.
$color-de-utility-accent-informationNo replacement.
$color-de-utility-accent-confirmationNo replacement.
$color-de-utility-accent-warningNo replacement.
$color-de-utility-accent-criticalNo replacement.

Selection

Removed VariableStable Variable
$color-le-selection-outlinevar(--color-selection-outline)
$color-le-selection-outline-hovervar(--color-selection-outline-hover)
$color-le-selection-bgvar(--color-selection-bg)
$color-le-selection-bg-hovervar(--color-selection-bg-hover)
$color-le-selection-edgevar(--color-selection-edge)
$color-le-selection-edge-hovervar(--color-selection-edge-hover)
$color-le-selectmark-unselectedvar(--color-selectmark-unselected)
$color-le-selectmark-unselected-hovervar(--color-selectmark-unselected-hover)
$color-le-selectmark-selectedvar(--color-selectmark-selected)
$color-le-selectmark-selected-hovervar(--color-selectmark-selected-hover)
$color-de-selection-outlinevar(--color-selection-outline)
$color-de-selection-outline-hovervar(--color-selection-outline-hover)
$color-de-selection-bgvar(--color-selection-bg)
$color-de-selection-bg-hovervar(--color-selection-bg-hover)
$color-de-selection-edgevar(--color-selection-edge)
$color-de-selection-edge-hovervar(--color-selection-edge-hover)
$color-de-selectmark-unselectedvar(--color-selectmark-unselected)
$color-de-selectmark-unselected-hovervar(--color-selectmark-unselected-hover)
$color-de-selectmark-selectedvar(--color-selectmark-selected)
$color-de-selectmark-selected-hovervar(--color-selectmark-selected-hover)

Scrim

Removed VariableStable Variable
$color-bg-scrim-fallbackNo replacement.

Buttons

Removed VariableStable Variable
Remove -le- and -de-.Replace btn with button

Links

Removed VariableStable Variable
Remove -le- and -de-.

Animations

Removed VariableStable Variable
$trans-timing-fastvar(--animation-duration-fast)
$trans-timing-mediumvar(--animation-duration-default)
$trans-timing-slowvar(--animation-duration-slow)
$trans-bgbackground-color var(--animation-duration-default) var(--animation-easing-static)
$trans-color-slowcolor var(--animation-duration-slow) var(--animation-easing-static)
$trans-colorcolor var(--animation-duration-default) var(--animation-easing-static)
$trans-color-fastcolor var(--animation-duration-fast) var(--animation-easing-static)
$trans-opacityopacity var(--animation-duration-default) var(--animation-easing-static)
$trans-bdr-colorborder-color var(--animation-duration-default) var(--animation-easing-static)
$trans-width-slowwidth var(--animation-duration-slow) var(--animation-easing-static)
$trans-widthwidth var(--animation-duration-default) var(--animation-easing-static)
$trans-width-fastwidth var(--animation-duration-fast) var(--animation-easing-static)

Type

Removed VariableStable Variable
$font-sans-fallbackvar(--font-body)
$font-weight-regvar(--font-weight-default)
$font-size-rootvar(--font-size-default)
$font-size-basevar(--font-size-default)