Colors

In order to define color tokens in your project, add colors property in shopstory/config.ts:

export const shopstoryConfig = {
  //...
  colors: [
    {
      id: "green",
      label: "Green",
      value: "#83d1c4",
    },
    {
      id: "purple",
      label: "Purple",
      value: "#78517c",
    },
    {
      id: "orange",
      label: "Orange",
      value: "#f17950",
    },
    {
      id: "black",
      label: "Black",
      value: "#000000",
      mapTo: ["$dark", "$backgroundDark"] // black mapped to 2 master tokens
    },
    {
      id: "white",
      label: "White",
      value: "#ffffff",
      mapTo: ["$light", "$backgroundLight"] // white mapped to 2 master tokens
    }
  ],
}

Master tokens

Shopstory comes with 4 color master tokens:

Token	Description
$dark	Dark foreground text displayed on light backgrounds, usually black.
$light	Light foreground text displayed on dark backgrounds, usually white.
$backgroundDark	Primary dark background color
$backgroundLight	Primary light background color