@engie-group/fluid-design-tokens
Version:
Fluid Design Tokens
1,176 lines (894 loc) • 42.2 kB
Markdown
# Changelog
All notable changes to Fluid Design Tokens will be documented in this file.
The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
## 📦 6.2.0 - 2026-05-11
### ⚠️ Breaking changes
###### [COLORS]
- Update ENGIE blue brand color from `#00AAFF` to `#007BC5`
- Update blue color scale values across light and dark themes
## 📦 6.1.1 - 2026-04-29
### 🚀 Added
- Add `--nj-core-color-white-default` as a standalone core color token with a fixed value of `#ffffff` in all themes (light and dark).
- Add `--nj-core-color-black-default` as a standalone core color token with a fixed value of `#15191D` in all themes (light and dark).
## 📦 6.1.0 - 2026-02-05
### ⚠️ Breaking changes
###### [FONT-WEIGHT]
- Removed deprecated design tokens `--nj-font-weight-light` and `--nj-font-weight-black`.
- To limit impact in your project, you can use the migration command: `npx @engie-group/fluid-cli tokens migrate --versions "6.0To6.1"`.
### 🚀 Added
###### [ICON]
- Add variant `yellow-tertiary`
## 📦 6.0.0 - 2025-12-10
Major release of `Fluid 6`.
All changes since `5.13.0` can be found above in details.
## 📦 6.0.0-rc.0 - 2025-12-09
### 🐛 Fixed
###### [COLOR]
- Updated border moderate color tokens for better visual consistency and accessibility.
- Updated warning primary icon color tokens.
- Align all icon contrast colors.
## 📦 5.13.0 - 2025-11-13
### ⚠️ Breaking changes
###### [AVATAR]
- Remove `base` component token
- Update avatar size token values:
- `md` (new): 40px
- `lg`: 64px -> 48px
- `xl`: 96px -> 56px
- `2xl` (new): 64px
- `3xl` (new): 96px
- To limit impact in your project, you can use the migration command: `npx @engie-group/fluid-cli tokens migrate --versions "5.12To5.13"`.
It will change token name to avoid visual breaking change. `base`-> `lg`, `lg`-> `2xl` and `xl`-> `3xl`.
### 🚀 Added
###### [AVATAR]
- Add `2xl` and `3xl` sizes to avatar tokens
## 📦 5.12.0 - 2025-04-07
### ⚠️ Breaking changes
###### [FONT]
- Edit font heading semantic tokens value (font size and line height) for L and XL:
- Edit: `--nj-semantic-font-size-heading-lg-desktop`, `--nj-semantic-font-size-heading-lg-mobile`, `--nj-semantic-font-line-height-heading-lg-desktop`, `--nj-semantic-font-line-height-heading-lg-mobile`, `--nj-semantic-font-size-heading-xl-desktop`, `--nj-semantic-font-size-heading-xl-mobile`, `--nj-semantic-font-line-height-heading-xl-desktop` and `--nj-semantic-font-line-height-heading-xl-mobile`
- Remove font heading semantic tokens 2XL:
- Remove: `--nj-semantic-font-size-heading-2xl-desktop`, `--nj-semantic-font-size-heading-2xl-mobile`, `--nj-semantic-font-line-height-heading-2xl-desktop` and `--nj-semantic-font-line-height-heading-2xl-mobile`
- Migration command: `npx @engie-group/fluid-cli tokens migrate --versions "5.11To5.12"`
### 🚀 Added
###### [FONT]
- Add font display semantic tokens XS, S, M, XL, 2XL:
- XS : `--nj-semantic-font-size-display-xs-desktop`, `--nj-semantic-font-size-display-xs-mobile`, `--nj-semantic-line-height-display-xs-desktop` and `--nj-semantic-line-height-display-xs-mobile`
- S : `--nj-semantic-font-size-display-sm-desktop`, `--nj-semantic-font-size-display-sm-mobile`, `--nj-semantic-line-height-display-sm-desktop` and `--nj-semantic-line-height-display-sm-mobile`
- M : `--nj-semantic-font-size-display-md-desktop`, `--nj-semantic-font-size-display-md-mobile`, `--nj-semantic-line-height-display-md-desktop` and `--nj-semantic-line-height-display-md-mobile`
- XL : `--nj-semantic-font-size-display-xl-desktop`, `--nj-semantic-font-size-display-xl-mobile`, `--nj-semantic-line-height-display-xl-desktop` and `--nj-semantic-line-height-display-xl-mobile`
- 2XL : `--nj-semantic-font-size-display-2xl-desktop`, `--nj-semantic-font-size-display-2xl-mobile`, `--nj-semantic-line-height-display-2xl-desktop` and `--nj-semantic-line-height-display-2xl-mobile`
## 📦 5.11.0 - 2025-02-12
### ⚠️ Breaking changes
###### [FONT]
- Created core token for font families and use them in semantic tokens
- Renamed semantic font family tokens :
- `--nj-semantic-font-family-sansSerif` to `--nj-semantic-font-family-default`
- `--nj-semantic-font-family-monospace` to `--nj-semantic-font-family-code`
- Deprecated some weight tokens: `--nj-font-weight-light` and `--nj-font-weight-black`
- Renamed semantic font weight token `--nj-semantic-font-weight-normal` to `--nj-semantic-font-weight-regular`
### 🚀 Added
###### [SPACING]
- Added two new spacing tokens to increase granularity: `--nj-semantic-size-spacing-40` and `--nj-semantic-size-spacing-128`
###### [CSS]
- Added a new `system` value to `data-theme` attribute. When the `system` value is set, the theme will reflect user's system preferences (dark/light)
```html
<!-- set the theme based on the system theme -->
<body data-theme="system">
...
</body>
```
## 📦 5.10.0 - 2024-12-06
### ⚠️ Breaking changes
###### [SIZE]
- Rename token `--nj-semantic-size-icon-xxl` to `--nj-semantic-size-icon-2xl`
Migration command: `npx @engie-group/fluid-cli tokens migrate --versions "5.9To5.10"`
### 🚀 Added
###### [COLORS]
- Add new `ai` color tokens
- background: `semantic.color.background.additional.ai`
- border: `semantic.color.border.additional.ai`
- icon: `semantic.color.icon.additional.ai`
## 📦 5.9.0 - 2024-10-03
### ⚠️ Breaking changes
###### [FONT]
- changed the `font-size` tokens for content
created new `--nj-semantic-font-size-text-[size]-[screen]` tokens: with size in (`xs`, `sm`, `md` or `lg`) and screen in (`mobile` or `desktop`)
- `--nj-semantic-size-font-content-1` => `--nj-semantic-font-size-text-md-desktop`
- `--nj-semantic-size-font-content-2` => `--nj-semantic-font-size-text-sm-desktop`
- `--nj-semantic-size-font-content-3` => `--nj-semantic-font-size-text-xs-desktop`
- `--nj-semantic-size-font-content-4` is renamed `--nj-semantic-font-size-content-4` and is deprecated and will be removed in the next major release
- changed the `font-size` tokens for headings
created new `--nj-semantic-font-size-heading-[size]-[screen]` tokens: with size in (`xs`, `sm`, `md`, `lg`, `xl`, `2xl`) and screen in (`mobile` or `desktop`)
- `--nj-semantic-size-font-display-1` => `--nj-semantic-font-size-heading-2xl-desktop`
- `--nj-semantic-size-font-heading-1` => `--nj-semantic-font-size-heading-xl-desktop`
- `--nj-semantic-size-font-heading-2` => `--nj-semantic-font-size-heading-lg-desktop`
- `--nj-semantic-size-font-heading-3` => `--nj-semantic-font-size-heading-md-desktop`
- `--nj-semantic-size-font-heading-4` => `--nj-semantic-font-size-heading-sm-desktop`
- `--nj-semantic-size-font-heading-5` => `--nj-semantic-font-size-heading-xs-desktop`
- `--nj-semantic-size-font-heading-6` is renamed `--nj-semantic-font-size-heading-6` and is deprecated and will be removed in the next major release
- added new `line-height` tokens
- `--nj-semantic-font-line-height-text-[size]-[screen]`: with size in (`xs`, `sm`, `md` or `lg`) and screen in (`mobile` or `desktop`)
- `--nj-semantic-font-line-height-heading-[size]-[screen]`: with size in (`xs`, `sm`, `md`, `lg`, `xl`, `2xl`) and screen in (`mobile` or `desktop`)
- changed monospace `font-family` to `Roboto Mono` please import the font in your project
```diff
- href="https://fonts.googleapis.com/css?family=Material+Icons|Lato:300,400,700,900&display=swap"
+ href="https://fonts.googleapis.com/css?family=Material+Icons|Lato:300,400,700,900|Roboto+Mono:300,400,700,900&display=swap"
```
- Use new migration (5.8To5.9) from `@engie-group/fluid-cli` to update your project: `npx @engie-group/fluid-cli tokens migrate --versions "5.8To5.9"`
## 📦 5.8.2 - 2024-10-02
### 🚀 Added
###### [CORE-COLOR]
- Added a new core color `--nj-core-color-white-300`
## 📦 5.8.1 - 2024-09-13
### 🐛 Fixed
###### [TAILWIND]
- Fix tailwind export not working
## 📦 5.8.0 - 2024-09-08
### ⚠️ Breaking changes
###### [GLOBAL]
- Tailwind presets are now exported through a new entry point `@engie-group/fluid-design-tokens/tailwind`.
Please update your codebase accordingly:
```diff
- import { FluidTailwindPresets } from '@engie-group/fluid-design-tokens';
+ import { FluidTailwindPresets } from '@engie-group/fluid-design-tokens/tailwind';
```
### 🚀 Added
###### [GLOBAL]
- CSS tokens are now accessible through a new entry point `@engie-group/fluid-design-tokens/css`.
You can now import them like this:
```diff
- import '@engie-group/fluid-design-tokens/lib/css/tokens.css';
+ import '@engie-group/fluid-design-tokens/css';
```
## 📦 5.7.2 - 2024-07-09
### 🐛 Fixed
###### [COLORS]
- Update the `--nj-semantic-color-background-additional-signature-default` value to `--nj-core-color-ultramarine-100`
## 📦 5.7.1 - 2024-05-07
### 🚀 Added
###### [SIZES]
- Add new `--nj-semantic-size-icon-2xs` -> `core-size-10` (`10px`) for small tags icons
- Add new `--nj-semantic-size-font-content-4` -> `core-size-10` (`10px`) for small tags text
## 📦 5.7.0 - 2024-03-20
### ⚠️ Breaking changes
###### [COLORS]
- Update neutral icon colors:
- Primary:
- `--nj-semantic-color-icon-neutral-primary-default` -> `neutral-1000` (old: `neutral-800` +200)
- Secondary:
- `--nj-semantic-color-icon-neutral-secondary-default` -> `neutral-800` (old: `neutral-600` +200)
- `--nj-semantic-color-icon-neutral-secondary-hovered` -> `neutral-900` (old: `neutral-700` +200)
- `--nj-semantic-color-icon-neutral-secondary-focused` -> `neutral-900` (old: `neutral-700` +200)
- `--nj-semantic-color-icon-neutral-secondary-pressed` -> `neutral-1000` (old: `neutral-800` +200)
- Tertiary:
- `--nj-semantic-color-icon-neutral-tertiary-default` -> `neutral-600` (old: `neutral-500` +100)
- `--nj-semantic-color-icon-neutral-tertiary-focused` -> `neutral-700` (old: `neutral-600`, +100)
- Update neutral text colors:
- Primary:
- `--nj-semantic-color-text-neutral-primary-hovered` -> `brand-700` (old: `brand-600` +100)
- `--nj-semantic-color-text-neutral-primary-focused` -> `brand-700` (old: `brand-600` +100)
- `--nj-semantic-color-text-neutral-primary-pressed` -> `brand-800` (old: `brand-700` +100)
- Tertiary:
- `--nj-semantic-color-text-neutral-tertiary-hovered` -> `brand-700` (old: `brand-600` +100)
- `--nj-semantic-color-text-neutral-tertiary-focused` -> `brand-700` (old: `brand-600` +100)
- `--nj-semantic-color-text-neutral-tertiary-pressed` -> `brand-800` (old: `brand-700` +100)
- Rename all border color tokens to add interaction variations:
- example: `--nj-semantic-color-border-neutral-minimal` -> `--nj-semantic-color-border-neutral-minimal-default`
- if you are using these tokens in your project, instead of updating their values manually, consider using the `fluid-cli` command:
- `npx @engie-group/fluid-cli tokens migrate --versions "5.4To5.7" --verbose`.
- Read more on the [@engie-group/fluid-cli readme page](https://www.npmjs.com/package/@engie-group/fluid-cli)
- Add all interaction border color tokens (`-hovered`, `-focused`,`-pressed`, `-selected`)
- example: `--nj-semantic-color-border-neutral-minimal-hovered`
###### [SIZES]
- Update border radius values to align with design:
- `--nj-semantic-size-border-radius-none: var(--nj-core-size-0);`
- `--nj-semantic-size-border-radius-sm: var(--nj-core-size-4);`
- `--nj-semantic-size-border-radius-md: var(--nj-core-size-8);`
- `--nj-semantic-size-border-radius-lg: var(--nj-core-size-16);`
- Add new border radius `xl` and `xxl`:
- `--nj-semantic-size-border-radius-xl: var(--nj-core-size-24);`
- `--nj-semantic-size-border-radius-xxl: var(--nj-core-size-32);`
- To accommodate the changes made to the border radius tokens, all components border radiuses have been set to the token `--nj-semantic-size-border-radius-none` (in order to not change their appearance).
### 🚀 Added
###### [COLORS]
- Add icons interaction tokens (hovered, focused, pressed) for:
- `--nj-semantic-color-icon-neutral-primary`
- `--nj-semantic-color-icon-neutral-inverse`
- `--nj-semantic-color-icon-brand-contrast`
## 📦 5.6.1 - 2024-03-05
### 🖍 Changed
###### [GLOBAL]
- Update dependencies to support Node >= 20
## 📦 5.6.0 - 2024-01-31
### 🚀 Added
- Add `nj-fab` component variables for its size:
- `--nj-component-fab-size-sm: var(--nj-core-size-48);`
- `--nj-component-fab-size-base: var(--nj-core-size-64);`
- Add new `semantic.size.icon.xs` token, representing the smallest icon size.
## 📦 5.5.0 - 2023-12-15
### 🚀 Added
- Provide Fluid tokens for Tailwind as a theme preset. This preset is in Beta and we will be improving it by gathering more feedback. Core color palette (ex: blue-100) is overriding and not extended. But you can still override it in your own config.
Here is how you can import these presets in your tailwind.configs.
```js
import {FluidTailwindPresets} from '@engie-group/fluid-design-tokens';
/** @type {import('tailwindcss').Config} */
module.exports = {
presets: [
FluidTailwindPresets
],
// Your config here
content: [
"./src/**/*.{js,jsx,ts,tsx}",
],
...
}
```
Exemple usage in code:
```html
<div class="bg-nj-brand-tertiary-default flex flex-col space-y-8">
<h1
class="text-nj-accent-blue-primary-default border-2 border-nj-brand-moderate p-8 m-8 font-nj-default font-nj-bold text-nj-heading-1"
>
Title
</h1>
<h2 class="opacity-nj-disabled">This should have disabled opacity</h2>
<a class="text-nj-accent-pink-primary-default hover:text-nj-accent-pink-primary-hovered space-y-12" href="#"
>Link</a
>
</div>
```
Note: all default `gap-` classes like `gap-x-1` or `gap-1` are overridden by
classes using our tokens.
For e.g:
`gap-1` becomes `gap-4`
`gap-x-1` becomes `gap-x-4`
You can find [here](https://tailwindcss.com/docs/gap) the default gaps with their values in px
- Add values `semantic.size.border.radius.lg` and `semantic.size.border.radius.pill`
### 🐛 Fixed
- Fix value of `semantic.size.icon.xl` from 116px to 112px
## 📦 5.4.3 - 2023-10-27
### 🚀 Added
- Add new token descriptions for
- backgrounds
- icons
- borders
- texts
### 🐛 Fixed
- Fix some hex values missing `#` in `core-color` tokens
## 📦 5.4.2 - 2023-10-23
### 🖍 Changed
- Fix missing files from npm pack
## 📦 5.4.1 - 2023-10-23
### 🖍 Changed
- Improve migration documentation
## 📦 5.4.0 - 2023-10-20
##### ⚠️ Breaking changes
- Add typescript support
- we now provide css, js, ts and json formats.
- Remove `.scss` tokens. Clean scss variables will be added in the future, stay tuned!
- Change the general nomenclature of the tokens:
- new tiers:
- `core` (corresponding to the old `palette` and `base`)
- and `semantic`
- We provide a new CLI @engie-group/fluid-cli with a script to migrate v5.3.0 to v5.4.0, see [the migration guide](https://www.engie.design/fluid-design-system/design-tokens/migration-guide-v53-to-v54/).
- To learn more about the tokens, check out [the dedicated page](https://www.engie.design/fluid-design-system/design-tokens/) on engie.design (coming soon).
## 📦 5.3.0 - 2023-07-06
- Add new `component.skeleton.color.background.gradient` tokens
- Add new `component.avatar.size` tokens : sm, base, lg and xl.
- Add new `size.space.96` token
- Add new `color.background.brand.tertiary.transparent`, `color.background.brand.tertiary.transparent.hovered`, `color.background.brand.tertiary.transparent.focused`, `color.background.brand.tertiary.transparent.pressed` tokens
## 📦 5.2.0 - 2023-05-04
### 🚀 Added
- Add new `color.background.grey`, `color.border.grey`, `color.icon.grey`, `color.text.grey` tokens
- Add new `color.palette.purple` alphas
- Add new `color.base.discovery` and `color.base.information` (100 to 900, alpha)
- Add new `color.background.discovery` and `color.background.information` (\_, secondary, tertiary, hovered, pressed, transparent)
- Add new `color.border.discovery` and `color.border.information` (subtle, moderate, bold, strong)
- Add new `subtle` variation to `color.border` tokens:
- `color.border.danger.subtle`,
- `color.border.warning.subtle`,
- `color.border.success.subtle`,
- Add new `color.text` tokens:
- `color.text.danger.secondary`,
- `color.text.warning`: primary, secondary, high_contrast
- `color.text.success`: primary, secondary, high_contrast
- `color.text.information`: primary, secondary, high_contrast
- `color.text.discovery`: primary, secondary, high_contrast
- Add new transparent variations to background semantic color tokens (\_, hovered, focused, pressed, selected, tertiary):
- `color.background.success.transparent`, `color.background.success.tertiary.transparent`
- `color.background.warning.transparent`, `color.background.warning.tertiary.transparent`
- `color.background.danger.transparent`, `color.background.danger.tertiary.transparent`
- `color.background.information.transparent`, `color.background.information.tertiary.transparent`
- `color.background.discovery.transparent`, `color.background.discovery.tertiary.transparent`
## 📦 5.1.0 - 2023-04-04
### 🚀 Added
###### [FLUTTER]
- Added first version of Flutter tokens
## 📦 5.0.0 - 2023-03-02
### 🚀 Added
###### [GLOBAL]
- Add possibility to import tokens as js object
You can import tokens in JS this way
```typescript
import * as FluidTokens from '@engie-group/fluid-design-tokens';
const tokens = FluidTokens.Tokens;
```
- Add exporting of every single variable in JS, all variables are prefixed with nj and in camelCase
e.g: `size.icon.lg` is `njSizeIconLg`
```javascript
// ====> Object import
import { Token } from '@engie-group/fluid-design-system-tokens';
let easing = Token.motion.bezier['linear-out-slow-in'];
// ====> Added single token export
import { njMotionBezierLinearOutSlowIn } from '@engie-group/fluid-design-tokens';
easing = njMotionBezierLinearOutSlowIn;
```
###### [COLORS]
- Add new color palette to match Brand Guidelines
- Add alpha tokens for grey, blue, green, orange and red to palette
- Add opacity tokens
- Add `color.base.neutral` that points by default to grey just like `color.base.brand` points to blue by default
###### [FONT]
- Add `font.family` category eg: `font.familly.default`
##### [SIZE]
- Add new icon size tokens
- Add new size tokens
### 🖍 Changed
###### [COLORS]
- Change value of `color.border.*.moderate` to get value from `color.*.500` to `color.*.400`
- Replace flat tokens values with alpha colors instead of solid colors. Since components using flat backgrounds should
work on all allowed surfaces
- Rename `color.*.flat` to `color.*.transparent`
- Rename `color.*.hover` to `color.*.hover`
- Rename `color.*.focus` to `color.*.focused`
- Rename `color.*.active` to `color.*.pressed`
- Rename `color.base.theme.THEME_NAME.*` to `color.base.THEME_NAME.*`
- Rename `color.background.theme.THEME_NAME.*` to `color.background.THEME_NAME.*`
- Rename `color.border.theme.THEME_NAME.*` to `color.border.THEME_NAME.*`
- Rename `color.text.theme.THEME_NAME.*` to `color.text.THEME_NAME.*`
- Rename `color.icon.theme.THEME_NAME.*` to `color.base.THEME_NAME.*`
###### [FONT]
- Rename `weight.font.*` to `font.weight.*`
###### [SIZE]
- ⚠️ Breaking changes replace space tokens, here's a mapping between old and new tokens
```
**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`
```
--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
```
### ❌ Removed
###### [GLOBAL]
##### ⚠️ Breaking changes
- Remove `token-color-palette.js` and `token-color-palette.json` and remove export of `ColorPalette` from js, all tokens
are now in `tokens.json` or `tokens.js`. You can export a single token in `js` like this:
```javascript
import { njMotionBezierLinearOutSlowIn } from '@engie-group/fluid-design-tokens';
const easing = njMotionBezierLinearOutSlowIn;
```
###### [SIZE]
- Remove tokens
```
--nj-size-height-navbar-small: 3.5rem;
--nj-size-height-navbar-normal: 6rem;
--nj-size-height-button-small: 2rem;
--nj-size-height-button-normal: 2.75rem;
--nj-size-height-button-large: 3.75rem;
--nj-size-padding-modal: 1.5rem;
```
## 📦 5.0.0 FOR THOSE MOVING FROM RC2 - 2023-03-02
### 🚀 Added
- Add alpha tokens for grey, blue, green, orange and red to palette
- Add opacity tokens
- Add `color.base.neutral` that points by default to grey just like `color.base.brand` points to blue by default
- Add exporting of every single variable in JS, all variables are prefixed with nj and in camelCase
e.g: `size.icon.lg` is `njSizeIconLg`
- Add `font.family` category eg: `font.familly.default`
```javascript
// ====> Present before
import { Token } from '@engie-group/fluid-design-system-tokens';
let easing = Token.motion.bezier['linear-out-slow-in'];
// ====> Added
import { njMotionBezierLinearOutSlowIn } from '@engie-group/fluid-design-tokens';
easing = njMotionBezierLinearOutSlowIn;
```
### 🖍 Changed
- Change value of `color.border.*.moderate` to get value from `color.*.500` to `color.*.400`
- Replace flat tokens values with alpha colors instead of solid colors. Since components using flat backgrounds should
work on all allowed surfaces
- Rename `color.*.flat` to `color.*.transparent`
- Rename `color.*.hover` to `color.*.hover`
- Rename `color.*.focus` to `color.*.focused`
- Rename `color.*.active` to `color.*.pressed`
- Rename `color.base.theme.THEME_NAME.*` to `color.base.THEME_NAME.*`
- Rename `color.background.theme.THEME_NAME.*` to `color.background.THEME_NAME.*`
- Rename `color.border.theme.THEME_NAME.*` to `color.border.THEME_NAME.*`
- Rename `color.text.theme.THEME_NAME.*` to `color.text.THEME_NAME.*`
- Rename `color.icon.theme.THEME_NAME.*` to `color.base.THEME_NAME.*`
- Rename `weight.font.*` to `font.weight.*`
### 👎 Deprecated
- Move deprecated tokens to package `@engie-group/fluid-4-deprecated` and prefix them with `nj-deprecated`
```
--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
```
### ❌ Removed
- Remove newly added disabled tokens (border, text, background...), since disabled state is handled by opacity only
- Remove newly added 'rgb' from grey and blue palette since we now have dedicated tokens for transparent values
- Remove newly added `color.base.transparence.*` and `color.palette.transparent.*`
##### ⚠️ Breaking changes
- Remove `token-color-palette.js` and `token-color-palette.json` and remove export of `ColorPalette` from js, all tokens
are now in `tokens.json` or `tokens.js`. You can export a single token in `js` like this:
```javascript
import { njMotionBezierLinearOutSlowIn } from '@engie-group/fluid-design-tokens';
const easing = njMotionBezierLinearOutSlowIn;
```
- Remove tokens
```
--nj-size-height-navbar-small: 3.5rem;
--nj-size-height-navbar-normal: 6rem;
--nj-size-height-button-small: 2rem;
--nj-size-height-button-normal: 2.75rem;
--nj-size-padding-modal: 1.5rem;
--nj-size-height-button-large: 3.75rem;
```
## 📦 5.0.0-rc.2 - 2022-12-08
### 🚀 Added
- Add new icon size tokens
- Add new size tokens
### 🐛 Fixed
- Fix Pink 600 hex value
## 📦 5.0.0-rc.1 - 2022-10-18
### 🚀 Added
- Add new size tokens
### 🖍 Changed
- Warning background has moved from orange.500 to orange.400
### ❌ Removed
- ⚠️ Breaking changes replace space tokens, here's a mapping between old and new tokens
```
**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
```
## 📦 5.0.0-beta.1 - 2022-09-30
### 🚀 Added
- Add new `engie-blue` color in palette tokens
- Add new `gradient` property in base tokens
- Add new `brand.high-contrast` property in color background tokens
- Add new `transparence` and multiple background properties
- Add new `inverse` property values in border tokens
- Add new `neutral` property in background tokens
- Add new `size.border` properties
- Add new `color.background.neutral` states
- Add new text colors tokens
- Add new icon colors tokens
- Add new `high-contrast` property in color background tokens
### 🖍 Changed
- Update `inverse` property values in text tokens
## 📦 5.0.0-beta.0 - 2022-09-13
### 🚀 Added
- Add new color palette and color tokens
### 🖍 Changed
- Update radius variables to reflect new guidelines
- Update shadow variables
- Use rem for spacing instead of px
## 📦 5.0.0-alpha.2 - 2022-08-03
### 🖍 Changed
- Update dependencies to work with Node latest LTS v16.16 and npm 8.15
## 📦 5.0.0-alpha.1 - 2022-07-19
### 🚀 Added
- Add toast and toast-container elevation tokens
## 📦 5.0.0-alpha.0 - 2022-05-17
### 🚀 Added
- Add some size space variables
- Add motion tokens
- Add possibility to import tokens as js object
You can import tokens in JS this way
```typescript
import * as FluidTokens from '@engie-group/fluid-design-tokens';
const tokens = FluidTokens.Tokens;
const colorPalette = FluidTokens.ColorPalette;
```
### 🖍 Changed
- Bump tokens lib version to match Fluid product version
## 📦 2.0.0-alpha.2 - 2022-04-26
### 🖍 Changed
- update dependencies
## 📦 2.0.0-alpha.1 - 2022-04-15
### 🖍 Changed
- update dependencies
## 📦 1.1.2 - 2022-02-25
### 🖍 Changed
- Update dependencies
## 📦 1.1.1 - 2022-02-16
### 🖍 Changed
- Update dependencies
## 📦 2.0.0-alpha.0 - 2022-02-04
### 🖍 Changed
- update icon.size.m to icon.size.md and change values of icon.size.sm
## 📦 1.1.0 - 2022-02-03
### 🖍 Changed
- Change size.border.radius to size.border.radius.md
### 🚀 Added
- Add size.border.radius.sm
## 📦 1.0.5 - 2021-12-16
### 🖍 Changed
- Modal padding token
- Icon sizes
## 📦 UNRELEASED_NEXT
### 🖍 Changed
- Update dependencies
## 📦 1.0.4 - 2021-10-05
### 🖍 Changed
- Update placeholder color
### 🐛 Fixed
- Fix packages version
## 📦 1.0.3 - 2021-02-15
### 🚀 Added
- add size.padding.modal
## 📦 1.0.2 - 2021-02-02
### 🚀 Added
- Add new tokens-color-palette.json containing main engie color palette
### 🐛 Fixed
- Placeholder input color tokens
## 📦 1.0.1 - 2020-11-10
### 🚀 Added
- Add colors/utils.json to simplify getting theme variables
## 📦 1.0.0 - 2020-11-10
- Fluid design tokens as an independent package