Skoda Design Tokens for Web (@skodaflow/web-tokens)

The Skoda Flow design tokens for web (exported from Figma). Contains:

• colors / format: SCSS + JSON.
• typography basic styles / format: JSON + SCSS.
• JSON: set of tokens and typography basic styles
• Fonts
• Assets: Logo

Naming convention

SCSS: > "flow-colors" >
SCSS: > "flow-typography" >
JSON: > "flow-colors" >
JSON: > "flow-typography" > "name" = < name >

Installation

npm i @skodaflow/web-tokens --save

Changelog

• 2.9.0.: Added new Semantic colors (secondary, tertiary)
• 2.8.0.: Added transparent-tertiary and transparent-quarternary, caption1 is no longer uppercased
• 2.7.2.: Updated Semantic colors
• 2.7.1.: Updated letter-spacing from 0.002em to 0.02em
• 2.7.0.: Updated grid, Headings letter-spacing, and Elevation style
• 2.6.1.: Updated Semantic colors
• 2.6.0.: Added List typography variant
• 2.5.0.: Added RTL font
• 2.4.2.: Added Icons font
• 2.4.1.: Corrected Display typography responsive sizes
• 2.4.0.: New CI updates x Removal of Old CI tokens
• 2.2.3.: Typography: updates
• 2.2.2.: Colors: CSS vars and HEX values, Grid tokens
• 2.1.0.: Effects added
• 2.0.3.: Minor changes
• 2.0.2.: Breakpoints for typography responsive, minor fixes
• 2.0.1.: Initial release: breakpoints, colors and typography (formats: SCSS/JSON)

Content

File tokens.scss include all _<file_name> files.

flow-web-tokens
├── README.md
├── package.json
└── src
    ├── assets
    │   └── logo
    ├── fonts
    ├── theme
    │   └── googleMaps
    ├── tokens.scss
    ├── tokens.json   
    ├── fonts.scss
    ├── icons.scss
    ├── _breakpoints.scss
    ├── _colors.scss
    ├── _effects.scss
    ├── _grid.scss
    ├── _typography.scss

Licence

Proprietary

Contact

[email protected]