import { Meta, Story, ArgsTable, Canvas } from '@storybook/addon-docs/blocks';
import {
  ExternalReferenceLink,
  Palette,
} from '../../../utils/storybook/docs-support';

<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.

## Accessibility

### Do Not Use Custom Colors

The semantically-named colors in the Patchwork palette have been carefully chosed for each theme with branding and accessibility considerations in mind. Other colors are typically not allowed.

### Only Render Text with the Legal 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. Sticking to semantically named color combinations will ensure that text is always readable, not matter which Patchwork theme is active.

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.

<Palette />

### Don't Convey Meaning with Color only

A common convention is to distinguish "success" messages and "danger" messages using red and green. Certain forms of color blindness can cause this meaning to be lost unless there is some other visual clue that conveys the same meaning - text, icons, and/or aria alert levels for example

## 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"
/>