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

• /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-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-height-button-small
--nj-size-height-button-normal
--nj-size-height-button-large
--nj-size-height-navbar-normal
--nj-size-height-navbar-small
--nj-size-space-x (x=level 1 2 3 4 5 6 7)
--nj-shadow-level-x-dp (x=level 2 4 6 8 16 24)
--nj-weight-font-light
--nj-weight-font-normal
--nj-weight-font-bold
--nj-weight-font-black
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