How to migrate from v3 to v4

Fluid Design System version 4 is a major update. The most notable changes are summarized below.

Usage

@engie-group/fluid-design-system has a new build to endorse updated browser requirements.

  • /lib
    Default library usage is simplified, there is no need to install dependencies. Import @engie-group/fluid-design-system in your project or via script tag. New js source map @engie-group/fluid-design-system/lib/fluid-design-system.js.map

    lib/auto-init.js
    From now on, auto-init.js can initiate components without additional code :
    Simply import lib/fluid-design-system.js and lib/auto-init.js in your Vue.js, Angular, React or Vanilla JS project.
    Custom tags aren’t needed anymore.

    New build Old Browsers Support : @engie-group/fluid-design-system/lib/fluid-design-system-obs.js
    Include IE 11 support and browserlist > 0.25%, not dead

  • /lib-esm
    If you use esm library you need to install a new dependency web-animation-js

  • /tokens
    We introduce tokens thanks to style dictionary : @engie-group/fluid-design-system/tokens
    @engie-group/fluid-design-system/tokens/lib/css/tokens.css for css 4 variable tokens
    @engie-group/fluid-design-system/tokens/lib/json/tokens.css with json tokens Feel free to contribute with your own token export.
    Documentation is still in progress and will coming soon.

  • /src
    New scss global file @engie-group/fluid-design-system/src/globals/scss/_color-dark.scss
    New css4 variables inside each component scss file.

  • data-theme="dark"
    on the body tag or on a parent tag use this attribute to switch css4 variables to dark mode.

Variables

We introduce CSS 4 variable tokens.
@engie-group/fluid-design-system/tokens/lib/css/tokens.css

:root CSS 4 variables
--nj-color-base-x (x=color name or theme name)
--nj-color-base-x-hover (x=color name or theme name)
--nj-color-base-x-active (x=color name or theme name)
--nj-color-base-disabled
--nj-color-backdrop-modal
--nj-color-base-black-x
--nj-color-base-white-x
--nj-color-background-body
--nj-color-background-components
--nj-color-background-components-active
--nj-color-background-progress-track
--nj-color-border-input
--nj-color-border-input-disabled
--nj-color-placeholder-input
--nj-color-placeholder-input-hover
--nj-color-placeholder-input-focus
--nj-color-placeholder-input-disabled
--nj-color-icon-input
--nj-color-background-hr
--nj-color-background-disabled
--nj-color-text-disabled
--nj-color-text-body
--nj-color-text-body-inverted
--nj-color-text-background-base
--nj-color-text-background-x (x=color name or theme name)
--nj-color-text-label
--nj-color-text-label-focus
--nj-color-text-label-inner-focus
--nj-color-text-progress
--nj-elevation-dropdown
--nj-elevation-sticky
--nj-elevation-fixed
--nj-elevation-modal-backdrop
--nj-elevation-modal
--nj-elevation-popover
--nj-elevation-tooltip
--nj-size-border-width
--nj-size-border-radius
--nj-size-navbar-height
--nj-size-navbar-height-sm
--nj-shadow-level-x-dp (x=level 2 4 6 8 16 24)
CSS 4 variable list

Removed variables

💀
$body-bg
$body-color
$border-color
$border-radius-lg
$border-radius-sm
$caret-with
$component-active-color
$component-active-bg
$dark
$enable-caret
$enable-transitions
$input-btn-padding-y
$input-btn-padding-x
$input-btn-line-height
$input-btn-focus-width
$input-btn-focus-color
$input-btn-focus-box-shadow
$input-btn-padding-y-sm
$input-btn-padding-x-sm
$input-btn-line-height-sm
$input-btn-padding-y-lg
$input-btn-padding-x-lg
$input-btn-line-height-lg
$input-btn-border-width
$input-height
$input-color
$input-border-color
$label-color
$label-color-focus
$label-color-inner-focus
$label-top-margin-base
$line-height-lg
$line-height-sm
$shadow-xdp
$switch-slider-bg
$switch-slider-bg-disabled
$switch-checked-part-color
$tooltip-bg
$tooltip-arrow-color
$transition-base
$transition-fade
$transition-collapse
$white-corporate