> ## Documentation Index
> Fetch the complete documentation index at: https://juo.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Design tokens

> CSS custom property reference for the @juo/customer-ui design system.

All tokens are defined on `:root, :host` so they work in both regular DOM and Shadow DOM.
CSS custom properties inherit through Shadow DOM boundaries, so `--theme-*` overrides set on
`:root` re-theme every `<juo-*>` component automatically.

```html theme={null}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@juo/customer-ui@next/dist/design-tokens.css" />
```

Or import in CSS:

```css theme={null}
@import "@juo/customer-ui/design-tokens.css";
```

## Base units

| Theme input         | Default | Drives                               |
| ------------------- | ------- | ------------------------------------ |
| `--theme-spacing`   | `8px`   | `--space-base` → `--space-*`         |
| `--theme-font-size` | `16px`  | `--font-size-base` → `--font-size-*` |
| `--theme-radius`    | `4px`   | `--radius-base` → `--radius-*`       |

## Space scale

| Token        | Default |
| ------------ | ------- |
| `--space-2`  | 2px     |
| `--space-4`  | 4px     |
| `--space-6`  | 6px     |
| `--space-8`  | 8px     |
| `--space-12` | 12px    |
| `--space-16` | 16px    |
| `--space-24` | 24px    |
| `--space-32` | 32px    |
| `--space-36` | 36px    |
| `--space-48` | 48px    |

## Font size scale

| Token            | Default |
| ---------------- | ------- |
| `--font-size-12` | 12px    |
| `--font-size-14` | 14px    |
| `--font-size-16` | 16px    |
| `--font-size-20` | 20px    |
| `--font-size-24` | 24px    |
| `--font-size-32` | 32px    |

## Radius scale

| Token           | Default |
| --------------- | ------- |
| `--radius-1`    | 4px     |
| `--radius-2`    | 8px     |
| `--radius-3`    | 12px    |
| `--radius-4`    | 14px    |
| `--radius-5`    | 18px    |
| `--radius-full` | 400px   |

## Color palettes

* **tint** — `--tint-{shade}` — shades: 25, 50, 75, 100, 200, 300, 400, 500, 600, 700, 800, 900
* **success** — `--success-{shade}` — shades: 25, 50, 100, 200, 300, 400, 500, 600, 700, 800, 900
* **warning** — `--warning-{shade}` — shades: 25, 50, 100, 200, 300, 400, 500, 600, 700, 800, 900
* **error** — `--error-{shade}` — shades: 25, 50, 100, 200, 300, 400, 500, 600, 700, 800, 900
* **info** — `--info-{shade}` — shades: 25, 50, 100, 200, 300, 400, 500, 600, 700, 800, 900
* **callout** — `--callout-{shade}` — shades: 25, 50, 100, 200, 300, 400, 500, 600, 700, 800, 900
* **accent** — `--accent-{shade}` — shades: 25, 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, white, black, contrast
* **secondary** — `--secondary-{shade}` — shades: 25, 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, white, black
* **neutral** — `--color-neutral-{shade}` — shades: 0, 25, 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950, 1000

`--color-neutral-*` is an alias of the tint palette and automatically inherits warm/cold/custom
tint behavior driven by `data-tint`.

## Customization

Override `--theme-*` tokens on `:root` to restyle all `<juo-*>` components globally.
No custom attributes or build steps required.

```css theme={null}
:root {
  /* Spacing density */
  --theme-spacing: 6px;

  /* Border radius */
  --theme-radius: 0px;

  /* Brand/accent color */
  --theme-accent-700: oklch(42% 0.18 265);
  --theme-accent-600: oklch(52% 0.20 265);
  --theme-accent-500: oklch(60% 0.22 265);

  /* Background tint */
  --theme-tint-100: oklch(94% 0.005 265);
  --theme-tint-200: oklch(89% 0.008 265);
}
```

## Tailwind preset

<Tabs>
  <Tab title="Tailwind v4">
    ```css theme={null}
    @import "tailwindcss";
    @import "@juo/customer-ui/design-tokens.css";
    @import "@juo/customer-ui/tailwind-v4.css";
    ```
  </Tab>

  <Tab title="Tailwind v3">
    ```js theme={null}
    // tailwind.config.cjs
    module.exports = {
      presets: [require("@juo/customer-ui/tailwind-v3")],
    };
    ```
  </Tab>
</Tabs>

* **Spacing** — `p-8`, `gap-16`, `m-24`, etc. — steps: 2, 4, 6, 8, 12, 16, 24, 32, 48
* **Radii** — `rounded-0`, `rounded-1`, `rounded-2`, `rounded-3`, `rounded-4`, `rounded-5`, `rounded-full`, `rounded-card-1`, `rounded-card-2`, `rounded-card-3`, `rounded-thumbnail`, `rounded-buttons`
* **Font sizes** — `text-12`, `text-14`, `text-16`, `text-20`, `text-24`, `text-32`
* **Colors** — all palettes above as `bg/text/border/ring-{palette}-{shade}`