# 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 ... ``` ## 📦 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

Title

This should have disabled opacity

Link
``` 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