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 |
Navbar size
| 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 |