DSMMG/storybook/stories/Tokens.stories.tsx

import type { Meta, StoryObj } from "@storybook/react";

const meta = {
  title: "Tokens/Colors",
  parameters: {
    layout: "padded",
    docs: {
      description: {
        component:
          "Tokens couleur DSMMG. Les sémantiques se réfèrent aux primitives — c'est ce que les composants consomment. L'accent est user-themable via `[data-mmg-accent]`.",
      },
    },
  },
} satisfies Meta;

export default meta;
type Story = StoryObj;

const Swatch = ({ name, css }: { name: string; css: string }) => (
  <div style={{ display: "flex", flexDirection: "column", gap: 4 }}>
    <div
      style={{
        width: "100%",
        height: 56,
        borderRadius: 8,
        background: `var(${css})`,
        border: "1px solid var(--mmg-color-border)",
      }}
    />
    <div style={{ fontSize: 11, fontFamily: "var(--mmg-font-mono)", color: "var(--mmg-color-text-tertiary)" }}>
      {css}
    </div>
    <div style={{ fontSize: 13, fontWeight: 600 }}>{name}</div>
  </div>
);

const Grid = ({ children }: { children: React.ReactNode }) => (
  <div
    style={{
      display: "grid",
      gridTemplateColumns: "repeat(auto-fill, minmax(180px, 1fr))",
      gap: 16,
      marginBottom: 32,
    }}
  >
    {children}
  </div>
);

export const Surfaces: Story = {
  render: () => (
    <Grid>
      <Swatch name="page" css="--mmg-color-bg-page" />
      <Swatch name="surface" css="--mmg-color-bg-surface" />
      <Swatch name="raised" css="--mmg-color-bg-raised" />
      <Swatch name="muted" css="--mmg-color-bg-muted" />
      <Swatch name="subtle" css="--mmg-color-bg-subtle" />
    </Grid>
  ),
};

export const Borders: Story = {
  render: () => (
    <Grid>
      <Swatch name="border" css="--mmg-color-border" />
      <Swatch name="border-soft" css="--mmg-color-border-soft" />
      <Swatch name="border-strong" css="--mmg-color-border-strong" />
    </Grid>
  ),
};

export const Text: Story = {
  render: () => (
    <Grid>
      <Swatch name="text-primary" css="--mmg-color-text-primary" />
      <Swatch name="text-secondary" css="--mmg-color-text-secondary" />
      <Swatch name="text-tertiary" css="--mmg-color-text-tertiary" />
      <Swatch name="text-quaternary" css="--mmg-color-text-quaternary" />
    </Grid>
  ),
};

export const Accent: Story = {
  render: () => (
    <Grid>
      <Swatch name="accent" css="--mmg-color-accent" />
      <Swatch name="accent-hover" css="--mmg-color-accent-hover" />
      <Swatch name="accent-active" css="--mmg-color-accent-active" />
      <Swatch name="accent-soft" css="--mmg-color-accent-soft" />
      <Swatch name="accent-border" css="--mmg-color-accent-border" />
      <Swatch name="accent-strong" css="--mmg-color-accent-strong" />
      <Swatch name="accent-on" css="--mmg-color-accent-on" />
    </Grid>
  ),
};

export const Semantic: Story = {
  render: () => (
    <>
      <h3>Success</h3>
      <Grid>
        <Swatch name="success" css="--mmg-color-success" />
        <Swatch name="success-soft" css="--mmg-color-success-soft" />
        <Swatch name="success-border" css="--mmg-color-success-border" />
        <Swatch name="success-strong" css="--mmg-color-success-strong" />
      </Grid>
      <h3>Warning</h3>
      <Grid>
        <Swatch name="warning" css="--mmg-color-warning" />
        <Swatch name="warning-soft" css="--mmg-color-warning-soft" />
        <Swatch name="warning-border" css="--mmg-color-warning-border" />
        <Swatch name="warning-strong" css="--mmg-color-warning-strong" />
      </Grid>
      <h3>Danger</h3>
      <Grid>
        <Swatch name="danger" css="--mmg-color-danger" />
        <Swatch name="danger-soft" css="--mmg-color-danger-soft" />
        <Swatch name="danger-border" css="--mmg-color-danger-border" />
        <Swatch name="danger-strong" css="--mmg-color-danger-strong" />
      </Grid>
      <h3>Info</h3>
      <Grid>
        <Swatch name="info" css="--mmg-color-info" />
        <Swatch name="info-soft" css="--mmg-color-info-soft" />
        <Swatch name="info-border" css="--mmg-color-info-border" />
        <Swatch name="info-strong" css="--mmg-color-info-strong" />
      </Grid>
    </>
  ),
};

const palette = (name: string, label: string) => {
  const shades = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900];
  return (
    <>
      <h3>{label}</h3>
      <Grid>
        {shades.map((s) => (
          <Swatch key={s} name={`${name}-${s}`} css={`--mmg-color-${name}-${s}`} />
        ))}
      </Grid>
    </>
  );
};

export const Palettes: Story = {
  render: () => (
    <>
      {palette("synapse", "Synapse (default)")}
      {palette("rose", "Rose")}
      {palette("blue", "Blue")}
      {palette("violet", "Violet")}
      {palette("green", "Green")}
      {palette("amber", "Amber")}
      {palette("red", "Red")}
      {palette("cyan", "Cyan")}
      {palette("slate", "Slate")}
    </>
  ),
};