Customizing

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 our 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 more

  • Typography

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

    See more

  • Spacing

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

    See more

  • Grid & Layout

    Padding, Container, Gaps and Breakpoints definitions.

    See more

  • Interactive Controls

    Tap, States and Sizing definitions.

    See more

  • Refinements

    Transition, Borders and Shadow definitions.

    See more

Build your new theme

  1. Create a new .scss file on src/themes (e.g. my-theme.scss) in your starter project (opens in a new tab), and add the tokens you want to overwrite inside the .theme class:
.theme {
  // --------------------------------------------------------
  // Colors (Branding Core)
  // --------------------------------------------------------
 
  // --------------------------------------------------------
  // Typography (Branding Core)
  // --------------------------------------------------------
 
  // --------------------------------------------------------
  // Spacing (UI Essentials)
  // --------------------------------------------------------
 
  // --------------------------------------------------------
  // Grid & Layout (UI Essentials)
  // --------------------------------------------------------
 
  // --------------------------------------------------------
  // Interactive Controls (UI Essentials)
  // --------------------------------------------------------
 
  // --------------------------------------------------------
  // Refinements
  // --------------------------------------------------------
 
  // --------------------------------------------------------
  // Components
  // --------------------------------------------------------
}
  1. Go to faststore.config.js and change the theme to your file's name:
// Theming
theme: 'my-theme',

If you want, you can work on custom-theme.scss file that's ready to use. Also, we provide two themes as examples: soft-blue and midnight.

BrandlessMidnight