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

<Meta title="Design 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 are intended to be used in certain background/foreground/hover combinations. These combinations are picked not only for their look and feel, but also to ensure that we are satisfying the contrast requirements of the [Web Content Accessibility Guidelines](https://www.w3.org/WAI/standards-guidelines/wcag/).

Each swatch represents a background color and the colors that are allowable as text on top. The swatches also show the correct hover color to be used with components that need a hover state, like buttons, etc.

Note that certain swatches, like `brand-primary-base`, do not show any allowable text colors; these colors are only to be used for non-text elements like icons.

<Story id="design-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"
/>
