Overview
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.
Global Tokens
FastStore uses a default theme called Brandless, which provides structural styles for your components and pages. Please read Brandless's page to further information about the themeable architecture.
Its presets are defined on src/base/tokens.scss in @faststore/ui (opens in a new tab) and it's separated in these main areas:
Colors
The store palette with all the tones needed.
See moreTypography
A standard scale and basic definitions for your text:
font family,weightandsizes.See moreSpacing
All tokens used for spacings on the store:
padding,marginsandsizes. It's also used as base for grid tokens.See moreGrid & Layout
Padding,Container,GapsandBreakpointsdefinitions.See moreInteractive Controls
Tap,StatesandSizingdefinitions.See moreRefinements
Transition,BordersandShadowdefinitions.See more