pdh-design-system/src/foundations/Colours/docs.mdx

PDH Design System React Components

import { Canvas, Meta, Story } from "@storybook/addon-docs/blocks"
import * as ColoursStories from "./Colours.stories"

<Meta of={ColoursStories} />

# Pacific Data Hub Colours

The Colours component displays our design system's color palette in an interactive format.

It showcases various color categories including theme colors, borders, backgrounds, named colors, and gradients.

When you click on any color tile, the color's CSS variable or RGB value is
automatically copied to your clipboard and a a toast notification appears
confirming the copy action

<Canvas>
    <Story of={ColoursStories._Colours} />
</Canvas>

## Display Sections

### Theme Colours

Shows four variations for each theme color:

-   Text emphasis color
-   Dark variant
-   Base color (with label)
-   Border subtle variant

### Borders & Backgrounds

Displays for each theme:

-   Border subtle colors (shown as border)
-   Background subtle colors

### Named Colours

Shows individual named colors from the design system with their names displayed on the tiles.

### Gradients

Displays available gradient variations labeled with their respective names.

Each color tile functions as a clickable button that copies the corresponding color value, making it easy for developers to use the correct colors in their code.