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

<Meta title="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:

<Preview withToolbar>
  <Story id="system-colors--palette" />
</Preview>

## Complete Swatch List

For convenience, here is a complete list of all available theme colors.

<Preview withToolbar>
  <Story id="system-colors--swatches" />
</Preview>

## 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')};
`;
```
