Resources

Deprecated Variables

Variables that have been deprecated in Uniform and will be removed in the next major version release.

Web
React Native
Android
Apple
Other

About Deprecations

As Uniform evolves, there are instances when existing variables need to be deprecated (and eventually removed). We’ll never deprecate or remove a variable without advance warning. Release notes, Slack messages and the casual shout from a rooftop will all come before a variable is even deprecated.

Because a deprecated variable remains in the system, your code should continue to build as expected. However, once it’s removed with the next major release, you will need to update to the stable variable. We’ll be sure to communicate those below.

For web, all deprecated variables reside in a specific var.deprecated file. You’ll have to manually add that file to all .scss partials in any code base utilizing those variables.

@import '~/hudl-uniform-ui-css/source/scss/variables/var.deprecated';

Breakpoints

Deprecated in: v1.10.0

Scheduled to be removed in: v2.0.0

Removed VariableStable Variable
$bp-smallNo direct mapping
$bp-mediumNo direct mapping

Colors

Deprecated in: v1.0.0

Scheduled to be removed in: v2.0.0

ColorDeprecatedReplacement
$color-utility-action-tint$color-de-utility-action-text
$color-utility-action-shade$color-le-utility-action-text
$color-utility-information-tint$color-de-utility-information-text
$color-utility-information-shade$color-le-utility-information-text
$color-utility-success$color-utility-confirmation
$color-utility-success-tint$color-de-utility-confirmation-text
$color-utility-success-shade$color-le-utility-confirmation-text
$color-utility-warning-tint$color-de-utility-warning-text
$color-utility-warning-shade$color-le-utility-warning-text
$color-utility-critical-tint$color-de-utility-critical-text
$color-utility-critical-shade$color-le-utility-critical-text
$color-le-utility-accent-success$color-utility-confirmation
$color-de-utility-accent-success$color-utility-confirmation
$color-le-btn-standard-success-label$color-le-btn-standard-confirm-label
$color-le-btn-standard-success-bg$color-le-btn-standard-confirm-bg
$color-le-btn-standard-success-bg-hover$color-le-btn-standard-confirm-bg-hover
$color-le-btn-standard-success-bg-active$color-le-btn-standard-confirm-bg-active
$color-de-btn-standard-success-label$color-de-btn-standard-confirm-label
$color-de-btn-standard-success-bg$color-de-btn-standard-confirm-bg
$color-de-btn-standard-success-bg-hover$color-de-btn-standard-confirm-bg-hover
$color-de-btn-standard-success-bg-active$color-de-btn-standard-confirm-bg-active
$color-le-btn-minimal-success-label$color-le-btn-minimal-confirm-label
$color-le-btn-minimal-success-label-hover$color-le-btn-minimal-confirm-label-hover
$color-le-btn-minimal-success-label-active$color-le-btn-minimal-confirm-label-active
$color-de-btn-minimal-success-label$color-de-btn-minimal-confirm-label
$color-de-btn-minimal-success-label-hover$color-de-btn-minimal-confirm-label-hover
$color-de-btn-minimal-success-label-active$color-de-btn-minimal-confirm-label-active
$color-interjection-success$color-utility-confirmation