Hey there! This is the Uniform version 3 documentation site. If you’re looking for version 4, go here instead.
Variables that have been removed from Uniform, representing breaking changes.
Once a variable is removed from the Uniform system, your build will break. To fix it, simply update whatever’s missing with a new variable. In most cases, you should be able to find a replacement in the lists below.
If there is no replacement, chat with your designer or a member of Uniform to figure out next steps.
Deprecated in: v0.11.11●Removed in: v1.0.0
Find stable variables for buttons here.
| Removed Variable | Stable Variable |
|---|---|
| $color-de-btn-standard-secondary-hover | $color-de-btn-standard-secondary-bg-hover |
| $color-de-btn-standard-secondary-active | $color-de-btn-standard-secondary-bg-active |
| $color-de-btn-standard-destroy-hover | $color-le-btn-standard-destroy-bg-hover |
| $color-de-btn-standard-destroy-active | $color-le-btn-standard-destroy-bg-active |
Deprecated in: v0.11.0●Removed in: v1.0.0
Find stable variables for brand here.
| Removed Variable | Stable Variable |
|---|---|
| $uni-orange | $color-brand-orange |
| $uni-electric | $color-brand-electric |
| $uni-ink | $color-brand-ink |
| $uni-evening-tint | No direct mapping |
| $uni-evening | $color-brand-evening |
| $uni-evening-shade | No direct mapping |
| $uni-slate-tint | No direct mapping |
| $uni-slate | $color-brand-slate |
| $uni-slate-shade | No direct mapping |
Deprecated in: v0.11.0●Removed in: v1.0.0
Find stable variables for identity here.
| Removed Variable | Stable Variable |
|---|---|
| $identity-maroon | $color-identity-maroon |
| $identity-scarlet | $color-identity-scarlet |
| $identity-apple | $color-identity-apple |
| $identity-orange | $color-identity-orange |
| $identity-gold | $color-identity-gold |
| $identity-yellow | $color-identity-yellow |
| $identity-forest | $color-identity-forest |
| $identity-kelly | $color-identity-kelly |
| $identity-sky | $color-identity-sky |
| $identity-royal | $color-identity-royal |
| $identity-navy | $color-identity-navy |
| $identity-purple | $color-identity-purple |
| $identity-white | $color-identity-white |
| $identity-silver | $color-identity-silver |
| $identity-grey | $color-identity-grey |
| $identity-black | $color-identity-black |
| $identity-default | $color-identity-default |
Deprecated in: v0.11.0●Removed in: v1.0.0
Find stable variables for tagging here.
| Removed Variable | Stable Variable |
|---|---|
| $tagging-white | $color-tagging-white |
| $tagging-white-shade | $color-tagging-white-shade |
| $tagging-grey | $color-tagging-grey |
| $tagging-grey-shade | $color-tagging-grey-shade |
| $tagging-black | $color-tagging-black |
| $tagging-black-shade | $color-tagging-black-shade |
| $tagging-yellow | $color-tagging-yellow |
| $tagging-yellow-shade | $color-tagging-yellow-shade |
| $tagging-orange | $color-tagging-orange |
| $tagging-orange-shade | $color-tagging-orange-shade |
| $tagging-red | $color-tagging-red |
| $tagging-red-shade | $color-tagging-red-shade |
| $tagging-green | $color-tagging-green |
| $tagging-green-shade | $color-tagging-green-shade |
| $tagging-blue | $color-tagging-blue |
| $tagging-blue-shade | $color-tagging-blue-shade |
| $tagging-purple | $color-tagging-purple |
| $tagging-purple-shade | $color-tagging-purple-shade |
Deprecated in: v0.11.0●Removed in: v1.0.0
Find stable variables for utility here.
| Removed Variable | Stable Variable |
|---|---|
| $electric-tint | $color-utility-action-tint |
| $electric | $color-utility-action |
| $electric-shade | $color-utility-action-shade |
| $success-tint | $color-utility-success-tint |
| $success | $color-utility-success |
| $success-shade | $color-utility-success-shade |
| $warning-tint | $color-utility-warning-tint |
| $warning | $color-utility-warning |
| $warning-shade | $color-utility-warning-shade |
| $critical-tint | $color-utility-critical-tint |
| $critical | $color-utility-critical |
| $critical-shade | $color-utility-critical-shade |
Deprecated in: v0.11.0●Removed in: v1.0.0
Find stable variables for backgrounds here.
| Removed Variable | Stable Variable |
|---|---|
| $le-bg-white | $color-le-bg-level0 |
| $le-bg-white-shade | $color-le-bg-level0-accent |
| $le-bg-clean-slate-tint | $color-le-bg-level0 |
| $le-bg-clean-slate | $color-le-bg-level1 |
| $le-bg-clean-slate-shade | $color-le-bg-level1-accent |
| $le-bg-bone-slate-tint | $color-le-bg-level1 |
| $le-bg-bone-slate | $color-le-bg-level3 |
| $le-bg-bone-slate-shade | $color-le-bg-level2-accent |
| $ui-gray | No direct mapping |
| $ui-gray-medium | $color-le-bg-level1-accent |
| $ui-gray-light | $color-le-bg-level1 |
Deprecated in: v0.11.0●Removed in: v1.0.0
Find stable variables for type here.
| Removed Variable | Stable Variable |
|---|---|
| $le-type-ink | $color-le-text-contrast |
| $le-type-typewriter | $color-le-text-default |
| $le-type-light-type | $color-le-text-subtle |
| $le-type-nonessential | $color-le-text-nonessential |
| $le-type-dark | $color-le-text-contrast |
| $le-type-medium | $color-le-text-default |
| $le-type-light | $color-le-text-subtle |
| $ui-text-dark | $color-le-text-contrast |
| $ui-text-medium | $color-le-text-default |
| $ui-text-light | $color-le-text-subtle |
| $ui-text-xlight | $color-le-text-nonessential |
Deprecated in: v0.11.0●Removed in: v1.0.0
Find stable variables for dividers here.
| Removed Variable | Stable Variable |
|---|---|
| $le-divider | $color-le-divider |
| $le-border | No direct mapping |
Deprecated in: v0.11.0●Removed in: v1.0.0
Find stable variables for backgrounds here.
| Removed Variable | Stable Variable |
|---|---|
| $de-bg-pitch-black-tint | $color-de-bg-level0-accent |
| $de-bg-pitch-black | $color-de-bg-level0 |
| $de-bg-pitch-black-shade | $color-de-bg-level0 |
| $de-bg-midnight-tint | $color-de-bg-level1-accent |
| $de-bg-midnight | $color-de-bg-level1 |
| $de-bg-midnight-shade | $color-de-bg-level0 |
| $de-bg-ink-tint | $color-de-bg-level2-accent |
| $de-bg-ink | $color-de-bg-level2 |
| $de-bg-ink-shade | $color-de-bg-level1 |
| $de-bg-black | $color-de-bg-level0 |
| $de-bg-black-tint | $color-de-bg-level0-accent |
| $de-bg-black-shade | $color-de-bg-level0 |
| $ui-dark | $color-de-bg-level2 |
| $ui-dark-medium | $color-de-bg-level2-accent |
| $ui-dark-light | $color-de-bg-level3-accent |
Deprecated in: v0.11.0●Removed in: v1.0.0
Find stable variables for type here.
| Removed Variable | Stable Variable |
|---|---|
| $de-type-white | $color-de-text-contrast |
| $de-type-bright-type | $color-de-text-default |
| $de-type-subtle-type | $color-de-text-subtle |
| $de-type-nonessential-dark | $color-de-text-nonessential |
Deprecated in: v0.11.0●Removed in: v1.0.0
Find stable variables for dividers here.
| Removed Variable | Stable Variable |
|---|---|
| $de-divider | $color-de-divider |
| $de-border | No direct mapping |
Deprecated in: v0.12.0●Removed in: v1.0.0
Find stable variables for z-index and elevation here.
| Removed Variable | Stable Variable |
|---|---|
| $zindex-toast | $elevation-toast |
| $zindex-notification | |
| $zindex-notification-1 | |
| $zindex-notification-2 | |
| $zindex-notification-3 | |
| $zindex-nav | $elevation-nav |
| $zindex-nav-1 | $elevation-nav1 |
| $zindex-nav-2 | $elevation-nav2 |
| $zindex-nav-3 | $elevation-nav3 |
| $zindex-modal-overlay | $elevation-modal-scrim |
| $zindex-modal | $elevation-modal |
| $zindex-modal-1 | $elevation-modal1 |
| $zindex-modal-2 | $elevation-modal2 |
| $zindex-modal-3 | $elevation-modal3 |
Below are CSS classes that could provide what you’re looking for with the given variable. However, the classes go beyond size to offer all the necessary specs. If you plan to use the class, you could also consider the type component.
| Removed Variable | Potential replacement | Alternate option |
|---|---|---|
| $font-size-1 | .uni-text--micro | .uni-item-title |
| $font-size-2 | .uni-text--small | .uni-subhead--small |
| $font-size-3 | .uni-text | .uni-subhead |
| $font-size-4 | No direct mapping | |
| $font-size-5 | No direct mapping | |
| $font-size-8 | No direct mapping | |
| $body-size-xsmall | .uni-text--micro | .uni-item-title |
| $body-size-small | .uni-text--small | .uni-subhead--small |
| $body-size-medium | .uni-text | .uni-subhead |
| $body-size-large | No direct mapping | |
| $display-size-h5 | No direct mapping | |
| $display-size-h4 | No direct mapping | |
| $display-size-h3 | No direct mapping | |
| $display-size-h2 | .uni-headline--1 | |
| $display-size-h1 | No direct mapping | |
| Removed Variable | Stable Variable |
|---|---|
| $ui-blue | $color-utility-action |
| $ui-orange | $color-brand-orange |
| $ui-white | $color-base-white |
| $ui-black | $color-base-black |
| $ui-red | $color-utility-critical |
| $ui-red-dark | $color-utility-critical-shade |
| $ui-red-light | $color-utility-critical-tint |
| $ui-yellow | $color-utility-warning |
| $ui-yellow-dark | $color-utility-warning-shade |
| $ui-yellow-light | $color-utility-warning-tint |
| $ui-green | $color-utility-success |
| $ui-green-dark | $color-utility-success-shade |
| $ui-green-light | $color-utility-success-tint |
| $ui-bg-default | $color-le-bg-level2 |
| $ui-bg-primary | $color-brand-orange |
| $ui-bg-secondary | $color-utility-action |
| $ui-bg-tertiary | $color-le-bg-level2 |
| $ui-bg-white | $color-base-white |
| $ui-bg-danger | $color-utility-critical |
| $ui-bg-confirm | $color-utility-success |
| $ui-dark-100 | No direct mapping |
| $ui-dark-90 | $color-brand-ink |
| $ui-dark-80 | $color-brand-evening |
| $ui-dark-70 | No direct mapping |
| $ui-dark-60 | $color-brand-slate |
| $ui-dark-50 | No direct mapping |
| $ui-dark-40 | No direct mapping |
| $ui-dark-30 | No direct mapping |
| $ui-dark-20 | No direct mapping |
| $ui-dark-10 | No direct mapping |
| $ui-gray-100 | No direct mapping |
| $ui-gray-90 | $color-brand-ink |
| $ui-gray-80 | $color-brand-evening |
| $ui-gray-70 | No direct mapping |
| $ui-gray-60 | No direct mapping |
| $ui-gray-50 | No direct mapping |
| $ui-gray-40 | No direct mapping |
| $ui-gray-30 | No direct mapping |
| $ui-gray-20 | No direct mapping |
| $ui-gray-10 | No direct mapping |
| $ui-blue-100 | No direct mapping |
| $ui-blue-90 | $color-brand-ink |
| $ui-blue-80 | $color-brand-evening |
| $ui-blue-70 | No direct mapping |
| $ui-blue-60 | No direct mapping |
| $ui-blue-50 | $color-utility-action |
| $ui-blue-40 | No direct mapping |
| $ui-blue-30 | No direct mapping |
| $ui-blue-20 | No direct mapping |
| $ui-blue-10 | No direct mapping |
Deprecated in: v0.10.0●Removed in: v1.0.0
Find stable variables for space here.
| Removed Variable | Stable Variable |
|---|---|
| $spacer-xxsmall | $space-quarter |
| $spacer-xsmall | $space-half |
| $spacer-small | No direct mapping |
| $spacer-medium | $space-one |
| $spacer-large | $space-one-and-half |
| $spacer-xlarge | $space-two |
| $spacer-xxlarge | $space-three |