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 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`,`weight` and `sizes`.
See moreSpacing
All tokens used for spacings on the store: `padding`, `margins` and `sizes`. It's also used as base for grid tokens.
See moreGrid & Layout
`Padding`, `Container`, `Gaps` and `Breakpoints` definitions.
See moreInteractive Controls
`Tap`, `States` and `Sizing` definitions.
See moreRefinements
`Transition`, `Borders` and `Shadow` definitions.
See more