Global Tokens

Design tokens are parameters that affect all UI look 'n' feel and they are the main configuration file of a Theme. Component-specific tokens often inherit from global tokens but are named specifically to apply those tokens in component development.

Its presets are defined on src/styles/global/tokens.scss and it's separated in these main areas:

Colors

The store palette with all the tones needed.

Typography

A standard scale and basic definitions for your text: font family,weight and sizes.

Spacing

All tokens used for spacings on the store: padding, margins and sizes. It's also used as base for grid tokens.

Grid & Layout

Padding, Container, Gaps and Breakpoints definitions.

Interactive Controls

Tap, States and Sizing definitions.

Refinements

Transition, Borders and Shadow definitions.