@engie-group/fluid-design-tokens
Version:
Fluid Design Tokens
199 lines (191 loc) • 8.3 kB
Markdown
## V1 to V5 migration
We decided to bump version from v1 directly to v5 to comply with global version of FLUID in design and in CSS
### 🖍 Changed
###### [SIZE]
* ⚠️ Breaking changes replace space tokens, here's a mapping between old and new tokens
```css
**Did not exist** ==> var(--nj-size-space-2)
var(--nj-size-space-0) ==> var(--nj-size-space-4)
var(--nj-size-space-1) ==> var(--nj-size-space-8)
var(--nj-size-space-1-2) ==> var(--nj-size-space-12)
var(--nj-size-space-2) ==> var(--nj-size-space-16)
var(--nj-size-space-3) ==> var(--nj-size-space-24)
var(--nj-size-space-4) ==> var(--nj-size-space-32)
var(--nj-size-space-5) ==> var(--nj-size-space-48)
var(--nj-size-space-6) ==> var(--nj-size-space-64)
var(--nj-size-space-7) ==> ❌ Removed
var(--nj-size-space-8) ==> ❌ Removed
```
### 👎 Deprecated
###### [GLOBAL]
* Move deprecated tokens to package `@engie-group/fluid-4-deprecated` and prefix them with `nj-deprecated`
```css
--nj-deprecated-color-backdrop-modal
--nj-deprecated-color-background-body
--nj-deprecated-color-background-components
--nj-deprecated-color-background-components-active
--nj-deprecated-color-background-hr
--nj-deprecated-color-background-progress-track
--nj-deprecated-color-base-black-100
--nj-deprecated-color-base-black-200
--nj-deprecated-color-base-black-300
--nj-deprecated-color-base-black-400
--nj-deprecated-color-base-black-500
--nj-deprecated-color-base-black-600
--nj-deprecated-color-base-black-700
--nj-deprecated-color-base-black-800
--nj-deprecated-color-base-black-900
--nj-deprecated-color-base-black
--nj-deprecated-color-base-blue-allports
--nj-deprecated-color-base-blue-allports-active
--nj-deprecated-color-base-blue-allports-hover
--nj-deprecated-color-base-blue-bigstone
--nj-deprecated-color-base-blue-bigstone-active
--nj-deprecated-color-base-blue-bigstone-hover
--nj-deprecated-color-base-blue-corporate
--nj-deprecated-color-base-blue-corporate-active
--nj-deprecated-color-base-blue-corporate-hover
--nj-deprecated-color-base-blue-engie
--nj-deprecated-color-base-blue-rhino
--nj-deprecated-color-base-blue-rhino-active
--nj-deprecated-color-base-blue-rhino-hover
--nj-deprecated-color-base-blue-venice
--nj-deprecated-color-base-blue-venice-active
--nj-deprecated-color-base-blue-venice-hover
--nj-deprecated-color-base-cerise
--nj-deprecated-color-base-cerise-active
--nj-deprecated-color-base-cerise-hover
--nj-deprecated-color-base-danger
--nj-deprecated-color-base-danger-active
--nj-deprecated-color-base-danger-hover
--nj-deprecated-color-base-disabled
--nj-deprecated-color-base-gradient-primary
--nj-deprecated-color-base-gray-100
--nj-deprecated-color-base-gray-200
--nj-deprecated-color-base-gray-300
--nj-deprecated-color-base-gray-400
--nj-deprecated-color-base-gray-500
--nj-deprecated-color-base-gray-600
--nj-deprecated-color-base-gray-700
--nj-deprecated-color-base-gray-800
--nj-deprecated-color-base-gray-900
--nj-deprecated-color-base-green
--nj-deprecated-color-base-green-active
--nj-deprecated-color-base-green-hover
--nj-deprecated-color-base-green-fun
--nj-deprecated-color-base-green-fun-active
--nj-deprecated-color-base-green-fun-hover
--nj-deprecated-color-base-green-java
--nj-deprecated-color-base-green-java-active
--nj-deprecated-color-base-green-java-hover
--nj-deprecated-color-base-green-pine
--nj-deprecated-color-base-green-pine-active
--nj-deprecated-color-base-green-pine-hover
--nj-deprecated-color-base-green-riogrande
--nj-deprecated-color-base-green-riogrande-active
--nj-deprecated-color-base-green-riogrande-hover
--nj-deprecated-color-base
--nj-deprecated-color-base-active
--nj-deprecated-color-base-hover
--nj-deprecated-color-base-orange
--nj-deprecated-color-base-orange-active
--nj-deprecated-color-base-orange-hover
--nj-deprecated-color-base-orange-crusta
--nj-deprecated-color-base-orange-crusta-active
--nj-deprecated-color-base-orange-crusta-hover
--nj-deprecated-color-base-primary
--nj-deprecated-color-base-primary-active
--nj-deprecated-color-base-primary-hover
--nj-deprecated-color-base-primary-focus
--nj-deprecated-color-base-purple
--nj-deprecated-color-base-purple-active
--nj-deprecated-color-base-purple-hover
--nj-deprecated-color-base-red
--nj-deprecated-color-base-red-active
--nj-deprecated-color-base-red-hover
--nj-deprecated-color-base-red-mandy
--nj-deprecated-color-base-red-mandy-active
--nj-deprecated-color-base-red-mandy-hover
--nj-deprecated-color-base-success
--nj-deprecated-color-base-success-active
--nj-deprecated-color-base-success-hover
--nj-deprecated-color-base-violet
--nj-deprecated-color-base-violet-active
--nj-deprecated-color-base-violet-hover
--nj-deprecated-color-base-violet-eggplant
--nj-deprecated-color-base-violet-eggplant-active
--nj-deprecated-color-base-violet-eggplant-hover
--nj-deprecated-color-base-warning
--nj-deprecated-color-base-warning-active
--nj-deprecated-color-base-warning-hover
--nj-deprecated-color-base-white-100
--nj-deprecated-color-base-white-200
--nj-deprecated-color-base-white-300
--nj-deprecated-color-base-white-400
--nj-deprecated-color-base-white-500
--nj-deprecated-color-base-white-600
--nj-deprecated-color-base-white-700
--nj-deprecated-color-base-white-800
--nj-deprecated-color-base-white-900
--nj-deprecated-color-base-white
--nj-deprecated-color-base-white-active
--nj-deprecated-color-base-white-hover
--nj-deprecated-color-base-yellow
--nj-deprecated-color-base-yellow-active
--nj-deprecated-color-base-yellow-hover
--nj-deprecated-color-base-yellow-bright-sun
--nj-deprecated-color-base-yellow-bright-sun-active
--nj-deprecated-color-base-yellow-bright-sun-hover
--nj-deprecated-color-border-input
--nj-deprecated-color-border-input-disabled
--nj-deprecated-color-icon-input
--nj-deprecated-color-placeholder-input
--nj-deprecated-color-placeholder-input-disabled
--nj-deprecated-color-placeholder-input-hover
--nj-deprecated-color-placeholder-input-focus
--nj-deprecated-color-text-background-base
--nj-deprecated-color-text-background-blue-allports
--nj-deprecated-color-text-background-blue-bigstone
--nj-deprecated-color-text-background-blue-corporate
--nj-deprecated-color-text-background-blue-engie
--nj-deprecated-color-text-background-blue-rhino
--nj-deprecated-color-text-background-blue-venice
--nj-deprecated-color-text-background-cerise
--nj-deprecated-color-text-background-danger
--nj-deprecated-color-text-background-gradient-primary
--nj-deprecated-color-text-background-gray-100
--nj-deprecated-color-text-background-gray-200
--nj-deprecated-color-text-background-gray-300
--nj-deprecated-color-text-background-gray-400
--nj-deprecated-color-text-background-gray-500
--nj-deprecated-color-text-background-gray-600
--nj-deprecated-color-text-background-gray-700
--nj-deprecated-color-text-background-gray-800
--nj-deprecated-color-text-background-gray-900
--nj-deprecated-color-text-background-green
--nj-deprecated-color-text-background-green-fun
--nj-deprecated-color-text-background-green-java
--nj-deprecated-color-text-background-green-pine
--nj-deprecated-color-text-background-green-riogrande
--nj-deprecated-color-text-background
--nj-deprecated-color-text-background-orange
--nj-deprecated-color-text-background-orange-crusta
--nj-deprecated-color-text-background-primary
--nj-deprecated-color-text-background-purple
--nj-deprecated-color-text-background-red
--nj-deprecated-color-text-background-red-mandy
--nj-deprecated-color-text-background-success
--nj-deprecated-color-text-background-violet
--nj-deprecated-color-text-background-violet-eggplant
--nj-deprecated-color-text-background-warning
--nj-deprecated-color-text-background-white
--nj-deprecated-color-text-background-yellow
--nj-deprecated-color-text-background-yellow-bright-sun
--nj-deprecated-color-text-body
--nj-deprecated-color-text-body-inverted
--nj-deprecated-color-text-label
--nj-deprecated-color-text-label-focus
--nj-deprecated-color-text-label-inner-focus
--nj-deprecated-color-text-input
--nj-deprecated-color-text-progress
```