# Colors

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

```typescript
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:

<table><thead><tr><th width="225">Token</th><th>Description</th></tr></thead><tbody><tr><td><code>$dark</code></td><td>Dark foreground text displayed on light backgrounds, usually black.</td></tr><tr><td><code>$light</code></td><td>Light foreground text displayed on dark backgrounds, usually white. </td></tr><tr><td><code>$backgroundDark</code></td><td>Primary dark background color</td></tr><tr><td><code>$backgroundLight</code></td><td>Primary light background color</td></tr></tbody></table>