import { Meta } from '@storybook/addon-docs/blocks';
import { useState, useLayoutEffect, useRef } from 'react';

<Meta title="Foundations/Design Tokens" />

# Design tokens

We do not hand-write colours or spacing. The Rijkshuisstijl (RHC) design system ships them
as CSS custom properties; `src/styles.scss` imports them and adds a thin `--app-*` layer for
the few measures RHC has no token for. `npm run check:tokens` fails the build on any
hardcoded hex colour in atoms/molecules/chrome — so these tokens are the *only* source of
colour.

> Resolved values below are read live from the running theme via `getComputedStyle`, so they
> can't drift from what ships. All demos are wrapped in `.rhc-theme.lintblauw`, the same scope
> the app runs under.

export const Resolved = ({ token }) => {
  const ref = useRef(null);
  const [val, setVal] = useState('');
  useLayoutEffect(() => {
    if (ref.current) setVal(getComputedStyle(ref.current).getPropertyValue(token).trim());
  }, [token]);
  return <span ref={ref} style={{ fontFamily: 'monospace', fontSize: '0.75rem', color: '#666' }}>{val || '…'}</span>;
};

## When to use which token

- **Semantic first** — reach for a role token (`--rhc-color-foreground-default`,
  `--rhc-color-border-default`, `--rhc-color-core`) before a raw palette step. Roles survive
  a theme swap; palette steps don't.
- **`--rhc-space-max-*`** for all spacing/gaps — never a raw `rem`.
- **`--app-*`** (in `src/styles.scss`) only for app measures RHC has no token for
  (`--app-content-max`, `--app-form-max`). If you're tempted to add one, check RHC first.

<div className="rhc-theme lintblauw">

## Spacing scale — `--rhc-space-max-*`

<div style={{ display: 'grid', gap: '0.4rem', margin: '1rem 0' }}>
  {['2xs','xs','sm','md','lg','xl','2xl','3xl','4xl','5xl'].map((step) => {
    const token = `--rhc-space-max-${step}`;
    return (
      <div key={step} style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>
        <code style={{ width: '12rem', fontSize: '0.78rem' }}>{token}</code>
        <div style={{ height: '1rem', width: `var(${token})`, background: 'var(--rhc-color-core)', borderRadius: '2px' }} />
        <Resolved token={token} />
      </div>
    );
  })}
</div>

## Semantic colours

<div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(14rem, 1fr))', gap: '0.75rem', margin: '1rem 0' }}>
  {[
    '--rhc-color-foreground-default',
    '--rhc-color-foreground-subtle',
    '--rhc-color-foreground-link',
    '--rhc-color-core',
    '--rhc-color-core-hover',
    '--rhc-color-border-default',
    '--rhc-color-border-strong',
    '--rhc-color-bg-document',
  ].map((token) => (
    <div key={token} style={{ border: '1px solid #ddd', borderRadius: '6px', overflow: 'hidden' }}>
      <div style={{ height: '3rem', background: `var(${token})` }} />
      <div style={{ padding: '0.4rem 0.5rem' }}>
        <div style={{ fontFamily: 'monospace', fontSize: '0.72rem', wordBreak: 'break-all' }}>{token}</div>
        <Resolved token={token} />
      </div>
    </div>
  ))}
</div>

</div>
