Design Tokens

Design tokens are a tech-agnostic way to store variables. Variable naming convention follows CTI (Category / Type / Item) structure.

Installation

We introduce Design Tokens thanks to style dictionary.

Right now, Design Tokens are available from @engie-group/fluid-design-system/tokens folder. We’ll release an independent node package later (october/november 2020).

  • CSS4 tokens: @engie-group/fluid-design-system/tokens/lib/css/tokens.css. See the CSS4 variable tokens on github
  • JSON tokens: @engie-group/fluid-design-system/tokens/lib/json/tokens.css. See the JSON tokens on github
  • SASS tokens: Coming soon
  • FIGMA tokens: To define

Feel free to contribute with your own token export.

Colors

Base colors

Primary

Example Name Token
Blue-corporate
#009de9
var(--nj-color-blue-corporate-light)
color.blue-corporate.light
White
#ffffff
var(--nj-color-white-light)
color.white.light

Secondary

Example Name Token
Green-java
#6ed2b1
var(--nj-color-green-java-light)
color.green-java.light
Orange-crusta
#f78a31
var(--nj-color-orange-crusta-light)
color.orange-crusta.light
Purple
#1f106d
var(--nj-color-purple-light)
color.purple.light
Red-mandy
#ab363b
var(--nj-color-red-mandy-light)
color.red-mandy.light
Yellow-bright-sun
#fbdb3c
var(--nj-color-yellow-bright-sun-light)
color.yellow-bright-sun.light

Accent

Example Name Token
Green
#009934
var(--nj-color-green-light)
color.green.light
Orange
#e07602
var(--nj-color-orange-light)
color.orange.light
Red
#cc0033
var(--nj-color-red-light)
color.red.light

Additional

Example Name Token
Blue-allports
#0b74c0
var(--nj-color-blue-allports-light)
color.blue-allports.light
Blue-bigstone
#0f1e29
var(--nj-color-blue-bigstone-light)
color.blue-bigstone.light
Blue-rhino
#2b485c
var(--nj-color-blue-rhino-light)
color.blue-rhino.light
Blue-venice
#005288
var(--nj-color-blue-venice-light)
color.blue-venice.light
Cerise
#e62b87
var(--nj-color-cerise-light)
color.cerise.light
Green-fun
#69af23
var(--nj-color-green-fun-light)
color.green-fun.light
Green-pine
#007873
var(--nj-color-green-pine-light)
color.green-pine.light
Green-riogrande
#becd00
var(--nj-color-green-riogrande-light)
color.green-riogrande.light
Violet
#3f1960
var(--nj-color-violet-light)
color.violet.light
Violet-eggplant
#6b0b5c
var(--nj-color-violet-eggplant-light)
color.violet-eggplant.light
Yellow
#faca08
var(--nj-color-yellow-light)
color.yellow.light

Theme

Example Name Token
Danger
#cc0033
var(--nj-color-danger-light)
color.danger.light
Light
#ffffff
var(--nj-color-light-light)
color.light.light
Primary
#009de9
var(--nj-color-primary-light)
color.primary.light
Success
#009934
var(--nj-color-success-light)
color.success.light
Warning
#e07602
var(--nj-color-warning-light)
color.warning.light

Gray

Example Name Token
100
#f5f5f5
var(--nj-color-100-light)
color.100.light
200
#eeeeee
var(--nj-color-200-light)
color.200.light
300
#e0e0e0
var(--nj-color-300-light)
color.300.light
400
#bdbdbd
var(--nj-color-400-light)
color.400.light
500
#9e9e9e
var(--nj-color-500-light)
color.500.light
600
#757575
var(--nj-color-600-light)
color.600.light
700
#616161
var(--nj-color-700-light)
color.700.light
800
#424242
var(--nj-color-800-light)
color.800.light
900
#212121
var(--nj-color-900-light)
color.900.light

Type colors

Backdrop

Example Name Token
Backdrop Modal
#000000
var(--nj-color-backdrop-modal-light)
color.backdrop.modal.light

Background

Example Name Token
Background Body
#ffffff
var(--nj-color-background-body-light)
color.background.body.light
Background Components
#ffffff
var(--nj-color-background-components-light)
color.background.components.light
Background Disabled
#e0e0e0
var(--nj-color-background-disabled-light)
color.background.disabled.light
Background Hr
#e0e0e0
var(--nj-color-background-hr-light)
color.background.hr.light

Border

Example Name Token
Border Input
#9e9e9e
var(--nj-color-border-input-light)
color.border.input.light

Icon

Example Name Token
Icon Input
#757575
var(--nj-color-icon-input-light)
color.icon.input.light

Placeholder

Example Name Token
Placeholder Input
#9e9e9e
var(--nj-color-placeholder-input-light)
color.placeholder.input.light

Size

Font size

Example Value Token
Peta 4.75rem var(--nj-size-font-peta)
size.font.peta
Tera 3.375rem var(--nj-size-font-tera)
size.font.tera
Giga 2.25rem var(--nj-size-font-giga)
size.font.giga
Mega 1.75rem var(--nj-size-font-mega)
size.font.mega
Kilo 1.5rem var(--nj-size-font-kilo)
size.font.kilo
Hecto 1.25rem var(--nj-size-font-hecto)
size.font.hecto
Deca 1.125rem var(--nj-size-font-deca)
size.font.deca
Base 1rem var(--nj-size-font-base)
size.font.base
Deci .875rem var(--nj-size-font-deci)
size.font.deci
Centi .75rem var(--nj-size-font-centi)
size.font.centi

Border size

Example Value Token
Width 1px var(--nj-size-border-width)
size.border.width
Radius .25rem var(--nj-size-border-radius)
size.border.radius
Example Value Token
Height 6rem var(--nj-size-navbar-height)
size.navbar.height
Height-sm 3.5rem var(--nj-size-navbar-height-sm)
size.navbar.height-sm

Shadow

Example Name Token
2-dp light var(--nj-shadow-level-2-dp)
shadow.level.2-dp.light
4-dp light var(--nj-shadow-level-4-dp)
shadow.level.4-dp.light
6-dp light var(--nj-shadow-level-6-dp)
shadow.level.6-dp.light
8-dp light var(--nj-shadow-level-8-dp)
shadow.level.8-dp.light
16-dp light var(--nj-shadow-level-16-dp)
shadow.level.16-dp.light
24-dp light var(--nj-shadow-level-24-dp)
shadow.level.24-dp.light

Elevation z-index

Example Value Token
Dropdown 1000 var(--nj-elevation-dropdown)
.elevation.dropdown
Sticky 1020 var(--nj-elevation-sticky)
.elevation.sticky
Fixed 1030 var(--nj-elevation-fixed)
.elevation.fixed
Modal-backdrop 1040 var(--nj-elevation-modal-backdrop)
.elevation.modal-backdrop
Modal 1050 var(--nj-elevation-modal)
.elevation.modal
Popover 1060 var(--nj-elevation-popover)
.elevation.popover
Tooltip 1070 var(--nj-elevation-tooltip)
.elevation.tooltip