import { Meta, Story, ArgsTable, Canvas } from '@storybook/addon-docs/blocks';

<Meta title="2 - System/Colors" />

# Colors

Patchwork's design system defines a set of semantically named colors for you to use.

## Semantic Naming

"Semantically-named" means that colors are named **after their intended use** instead of **after the actual color itself**: for example we have colors named `Error` and `Success` instead of `red` or `green`. This allows intent to be described at the design level independent of the specific product brand represented by the current theme.

## Color Combinations

Color semantics are defined by the design team and and intended to be used in certain sanctioned background/foreground combinations. Care will be taken at the design level to ensure that these combinations satisfy a11y contrast requirements as much as possible.

This Palette component is a cheat-sheet of legal background/foreground combinations:

Each swatch represents a background color and the colors that are allowable as text on top. Note that certain bakground colors like `brand-primary-base` are only for elements that do not contain text.

<Story id="2-system-colors--palette" />

## Props

Colors are implemented as a mixin - components that let you customize the color will expose the `colorName` prop.

```jsx
<Span colorName="brand-primary-fg">Some text with the primary brand color</Span>
```

## Dynamic Usage

You can also use these colors in CSS with the `getPaletteColor` function:

```
import { getPaletteColor } from '@wealthsimple/patchwork';

const FancyBox = styled(Box)`
  background: ${getPaletteColor('brand-primary-fg')};
`;
```

## External Reference

<ExternalReferenceLink
  src="https://www.figma.com/file/7RC1xyKjsY9ICfdL430ArW/Product-Colours?node-id=4%3A128"
  type="figma"
/>
