Hey there! This is the Uniform version 3 documentation site. If you’re looking for version 4, go here instead.
Variables that have been deprecated in Uniform and will be removed in the next major version release.
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';
Deprecated in: v1.10.0
Scheduled to be removed in: v2.0.0
| Removed Variable | Stable Variable |
|---|---|
| $bp-small | No direct mapping |
| $bp-medium | No direct mapping |
Deprecated in: v1.0.0
Scheduled to be removed in: v2.0.0
| Color | Deprecated | Replacement |
|---|---|---|
$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 |