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.
Design Tokens are available from @engie-group/fluid-design-tokens package.
npm install @engie-group/fluid-design-tokens- CSS4 tokens:
@engie-group/fluid-design-tokens/lib/css/tokens.css. CSS4 variable tokens - JSON tokens:
@engie-group/fluid-design-tokens/lib/json/tokens.json. JSON tokens - SASS tokens:
@engie-group/fluid-design-tokens/lib/scss/tokens.scss. CSS4 variable SASS support - 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-base-blue-corporate) color.base.blue-corporate.light |
|
|
White #ffffff |
var(--nj-color-base-white) color.base.white.light |
Secondary
| Example | Name | Token |
|---|---|---|
|
Green-java #6ed2b1 |
var(--nj-color-base-green-java) color.base.green-java.light |
|
|
Orange-crusta #f78a31 |
var(--nj-color-base-orange-crusta) color.base.orange-crusta.light |
|
|
Purple #1f106d |
var(--nj-color-base-purple) color.base.purple.light |
|
|
Red-mandy #e74a50 |
var(--nj-color-base-red-mandy) color.base.red-mandy.light |
|
|
Yellow-bright-sun #fbdb3c |
var(--nj-color-base-yellow-bright-sun) color.base.yellow-bright-sun.light |
Accent
| Example | Name | Token |
|---|---|---|
|
Green #009934 |
var(--nj-color-base-green) color.base.green.light |
|
|
Orange #e07602 |
var(--nj-color-base-orange) color.base.orange.light |
|
|
Red #cc0033 |
var(--nj-color-base-red) color.base.red.light |
Additional
| Example | Name | Token |
|---|---|---|
|
Blue-allports #0b74c0 |
var(--nj-color-base-blue-allports) color.base.blue-allports.light |
|
|
Blue-bigstone #0f1e29 |
var(--nj-color-base-blue-bigstone) color.base.blue-bigstone.light |
|
|
Blue-rhino #2b485c |
var(--nj-color-base-blue-rhino) color.base.blue-rhino.light |
|
|
Blue-venice #005288 |
var(--nj-color-base-blue-venice) color.base.blue-venice.light |
|
|
Cerise #e62b87 |
var(--nj-color-base-cerise) color.base.cerise.light |
|
|
Green-fun #69af23 |
var(--nj-color-base-green-fun) color.base.green-fun.light |
|
|
Green-pine #007873 |
var(--nj-color-base-green-pine) color.base.green-pine.light |
|
|
Green-riogrande #becd00 |
var(--nj-color-base-green-riogrande) color.base.green-riogrande.light |
|
|
Violet #552382 |
var(--nj-color-base-violet) color.base.violet.light |
|
|
Violet-eggplant #910f7d |
var(--nj-color-base-violet-eggplant) color.base.violet-eggplant.light |
|
|
Yellow #faca08 |
var(--nj-color-base-yellow) color.base.yellow.light |
Theme
| Example | Name | Token |
|---|---|---|
|
Danger #cc0033 |
var(--nj-color-base-danger) color.base.danger.light |
|
|
Light #ffffff |
var(--nj-color-base-light) color.base.light.light |
|
|
Primary #009de9 |
var(--nj-color-base-primary) color.base.primary.light |
|
|
Success #009934 |
var(--nj-color-base-success) color.base.success.light |
|
|
Warning #e07602 |
var(--nj-color-base-warning) color.base.warning.light |
Gray
| Example | Name | Token |
|---|---|---|
|
100 #f5f5f5 |
var(--nj-color-base-gray-100) color.base.gray.100.light |
|
|
200 #eeeeee |
var(--nj-color-base-gray-200) color.base.gray.200.light |
|
|
300 #e0e0e0 |
var(--nj-color-base-gray-300) color.base.gray.300.light |
|
|
400 #bdbdbd |
var(--nj-color-base-gray-400) color.base.gray.400.light |
|
|
500 #9e9e9e |
var(--nj-color-base-gray-500) color.base.gray.500.light |
|
|
600 #757575 |
var(--nj-color-base-gray-600) color.base.gray.600.light |
|
|
700 #616161 |
var(--nj-color-base-gray-700) color.base.gray.700.light |
|
|
800 #424242 |
var(--nj-color-base-gray-800) color.base.gray.800.light |
|
|
900 #212121 |
var(--nj-color-base-gray-900) color.base.gray.900.light |
Type colors
Backdrop
| Example | Name | Token |
|---|---|---|
|
Modal #000000 |
var(--nj-color-backdrop-modal) color.backdrop.modal.light |
Background
| Example | Name | Token |
|---|---|---|
|
Body #ffffff |
var(--nj-color-background-body) color.background.body.light |
|
|
Components #ffffff |
var(--nj-color-background-components) color.background.components.light |
|
|
Disabled #e0e0e0 |
var(--nj-color-background-disabled) color.background.disabled.light |
|
|
Hr #e0e0e0 |
var(--nj-color-background-hr) color.background.hr.light |
Border
| Example | Name | Token |
|---|---|---|
|
Input #9e9e9e |
var(--nj-color-border-input) color.border.input.light |
Icon
| Example | Name | Token |
|---|---|---|
|
Input #757575 |
var(--nj-color-icon-input) color.icon.input.light |
Placeholder
| Example | Name | Token |
|---|---|---|
|
Input #bdbdbd |
var(--nj-color-placeholder-input) 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 | {"md"=>"4px", "sm"=>"2px"} |
var(--nj-size-border-radius) size.border.radius |
Height size
button
| Example | Value | Token |
|---|---|---|
| Small | 2rem |
var(--nj-size-height-button-small) size.height.button.small |
| Normal | 2.75rem |
var(--nj-size-height-button-normal) size.height.button.normal |
| Large | 3.75rem |
var(--nj-size-height-button-large) size.height.button.large |
navbar
| Example | Value | Token |
|---|---|---|
| Small | 3.5rem |
var(--nj-size-height-navbar-small) size.height.navbar.small |
| Normal | 6rem |
var(--nj-size-height-navbar-normal) size.height.navbar.normal |
Icon size
| Example | Value | Token |
|---|---|---|
| Sm | 18px |
var(--nj-size-icon-sm) size.icon.sm |
| M | 24px |
var(--nj-size-icon-m) size.icon.m |
| Lg | 36px |
var(--nj-size-icon-lg) size.icon.lg |
| Xl | 48px |
var(--nj-size-icon-xl) size.icon.xl |
| Xxl | 64px |
var(--nj-size-icon-xxl) size.icon.xxl |
Space size
| Example | Value | Token |
|---|---|---|
| 1 | 8px |
var(--nj-size-space-1) size.space.1 |
| 2 | 16px |
var(--nj-size-space-2) size.space.2 |
| 3 | 24px |
var(--nj-size-space-3) size.space.3 |
| 4 | 32px |
var(--nj-size-space-4) size.space.4 |
| 5 | 48px |
var(--nj-size-space-5) size.space.5 |
| 6 | 64px |
var(--nj-size-space-6) size.space.6 |
| 7 | 96px |
var(--nj-size-space-7) size.space.7 |
Weight
Font
| Example | Value | Token |
|---|---|---|
| Light | 300 |
var(--nj-weight-font-light) weight.font.light |
| Normal | 400 |
var(--nj-weight-font-normal) weight.font.normal |
| Bold | 700 |
var(--nj-weight-font-bold) weight.font.bold |
| Black | 900 |
var(--nj-weight-font-black) weight.font.black |
Shadow
| Example | Name | Token |
|---|---|---|
| 2-dp |
var(--nj-shadow-level-2-dp) shadow.level.2-dp.light |
|
| 4-dp |
var(--nj-shadow-level-4-dp) shadow.level.4-dp.light |
|
| 6-dp |
var(--nj-shadow-level-6-dp) shadow.level.6-dp.light |
|
| 8-dp |
var(--nj-shadow-level-8-dp) shadow.level.8-dp.light |
|
| 16-dp |
var(--nj-shadow-level-16-dp) shadow.level.16-dp.light |
|
| 24-dp |
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 |