Skoda Design Tokens for WebApp (@skodaflow/webapp-tokens)

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

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

Naming convention

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

Installation

npm i @skodaflow/webapp-tokens --save

Changelog

1.9.0.: background-tertiary added for white to keep semantic structure aligned
1.8.0.: fSkin updates (small fixes x merge of fixes)
1.7.0.: fSkin updates (colors, effects, grid, typography) x generate-channel.js webapp re-factor
1.6.0.: NEW CI updates (colors -> typography)
1.5.6.: Minor fix to changelog
1.5.5.: Added Licence file
1.5.4.: Stable release
1.3.2.: Changed var names in JSON (colors -> flow-colors, typography -> flow-typography)
1.2.2.: Bold font added
1.2.1.: Tokens -> flow-variables, rounding for opacity values, Overlay color, font variables
1.2.0.: + draft Typography
1.1.0.: WEBAPP COLORS (stable release)
0.0.4.: Initial release: webapp colors (SCSS/CSS vars) \

Typography SCSS Transformation Rule

Due to some SCSS naming conflicts for SHIFTUI WebApp team, anyone exchanging SCSS tokens with SHIFTUI needs to ensure:

Typography SCSS title/description variables should contain -/hyphens between appended string and int, excluding default h1,h2,h3 [...]

For example, for any title/description with appended int -> body[n] or body-link[n] this should be replaced with body-[n] or body-link-[n].

View latest release of Typography tokens for rule applied.

Agreement between Flow DS team and SHITUI was made on 17.05.22.

Programmatically this rule could be applied (regex) within CLI webapp generator script but would compromise all future instances where int and string are appended together. There may be good design reasons for this and in such instances all should be reviewed and approved by Flow DS team and SHIFTUI team respectively. Else, this may cause a number of accidental integrations.

Manual inspection/implementation should be done before shipping tokens!

Roadmap

1.3.3.: Color Aliases
2.1.1.: Typography final release
2.2.x.: Typography: mixins
3.1.1.: Grid
x.x.x: Animation, Effects, Spacing \

Content

File flow-variables.scss include all _<file_name> files with tokens variables.

skodaflow-web-tokens
├── README.md
├── package.json
└── src
    ├── fonts
        ├── fonts.scss
    ├── tokens.scss
    ├── tokens.json
    ├── _colors.scss
    ├── _typography.scss

Contact

[email protected]