@discourser/design-system 0.22.0 → 0.22.2

package/src/stories/foundations/ColorScale.stories.tsx

@@ -0,0 +1,737 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import type React from 'react';
+import { css } from 'styled-system/css';
+
+const meta = {
+  title: 'Foundations/Color Scale',
+  parameters: { layout: 'padded' },
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+type Palette = 'primary' | 'secondary' | 'tertiary' | 'neutral' | 'error';
+const PALETTES: Palette[] = [
+  'primary',
+  'secondary',
+  'tertiary',
+  'neutral',
+  'error',
+];
+const SCALE_STEPS = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12] as const;
+const ALPHA_STEPS = [
+  'a1',
+  'a2',
+  'a3',
+  'a4',
+  'a5',
+  'a6',
+  'a7',
+  'a8',
+  'a9',
+  'a10',
+  'a11',
+  'a12',
+] as const;
+
+// ── Pre-declared css() calls — Panda CSS statically extracts these ─────────────
+// (dynamic template literals cannot be extracted; explicit literals are required)
+
+const scaleBg: Record<Palette, Record<number, string>> = {
+  primary: {
+    1: css({ bg: 'primary.1' }),
+    2: css({ bg: 'primary.2' }),
+    3: css({ bg: 'primary.3' }),
+    4: css({ bg: 'primary.4' }),
+    5: css({ bg: 'primary.5' }),
+    6: css({ bg: 'primary.6' }),
+    7: css({ bg: 'primary.7' }),
+    8: css({ bg: 'primary.8' }),
+    9: css({ bg: 'primary.9' }),
+    10: css({ bg: 'primary.10' }),
+    11: css({ bg: 'primary.11' }),
+    12: css({ bg: 'primary.12' }),
+  },
+  secondary: {
+    1: css({ bg: 'secondary.1' }),
+    2: css({ bg: 'secondary.2' }),
+    3: css({ bg: 'secondary.3' }),
+    4: css({ bg: 'secondary.4' }),
+    5: css({ bg: 'secondary.5' }),
+    6: css({ bg: 'secondary.6' }),
+    7: css({ bg: 'secondary.7' }),
+    8: css({ bg: 'secondary.8' }),
+    9: css({ bg: 'secondary.9' }),
+    10: css({ bg: 'secondary.10' }),
+    11: css({ bg: 'secondary.11' }),
+    12: css({ bg: 'secondary.12' }),
+  },
+  tertiary: {
+    1: css({ bg: 'tertiary.1' }),
+    2: css({ bg: 'tertiary.2' }),
+    3: css({ bg: 'tertiary.3' }),
+    4: css({ bg: 'tertiary.4' }),
+    5: css({ bg: 'tertiary.5' }),
+    6: css({ bg: 'tertiary.6' }),
+    7: css({ bg: 'tertiary.7' }),
+    8: css({ bg: 'tertiary.8' }),
+    9: css({ bg: 'tertiary.9' }),
+    10: css({ bg: 'tertiary.10' }),
+    11: css({ bg: 'tertiary.11' }),
+    12: css({ bg: 'tertiary.12' }),
+  },
+  neutral: {
+    1: css({ bg: 'neutral.1' }),
+    2: css({ bg: 'neutral.2' }),
+    3: css({ bg: 'neutral.3' }),
+    4: css({ bg: 'neutral.4' }),
+    5: css({ bg: 'neutral.5' }),
+    6: css({ bg: 'neutral.6' }),
+    7: css({ bg: 'neutral.7' }),
+    8: css({ bg: 'neutral.8' }),
+    9: css({ bg: 'neutral.9' }),
+    10: css({ bg: 'neutral.10' }),
+    11: css({ bg: 'neutral.11' }),
+    12: css({ bg: 'neutral.12' }),
+  },
+  error: {
+    1: css({ bg: 'error.1' }),
+    2: css({ bg: 'error.2' }),
+    3: css({ bg: 'error.3' }),
+    4: css({ bg: 'error.4' }),
+    5: css({ bg: 'error.5' }),
+    6: css({ bg: 'error.6' }),
+    7: css({ bg: 'error.7' }),
+    8: css({ bg: 'error.8' }),
+    9: css({ bg: 'error.9' }),
+    10: css({ bg: 'error.10' }),
+    11: css({ bg: 'error.11' }),
+    12: css({ bg: 'error.12' }),
+  },
+};
+
+const alphaBg: Record<Palette, Record<string, string>> = {
+  primary: {
+    a1: css({ bg: 'primary.a1' }),
+    a2: css({ bg: 'primary.a2' }),
+    a3: css({ bg: 'primary.a3' }),
+    a4: css({ bg: 'primary.a4' }),
+    a5: css({ bg: 'primary.a5' }),
+    a6: css({ bg: 'primary.a6' }),
+    a7: css({ bg: 'primary.a7' }),
+    a8: css({ bg: 'primary.a8' }),
+    a9: css({ bg: 'primary.a9' }),
+    a10: css({ bg: 'primary.a10' }),
+    a11: css({ bg: 'primary.a11' }),
+    a12: css({ bg: 'primary.a12' }),
+  },
+  secondary: {
+    a1: css({ bg: 'secondary.a1' }),
+    a2: css({ bg: 'secondary.a2' }),
+    a3: css({ bg: 'secondary.a3' }),
+    a4: css({ bg: 'secondary.a4' }),
+    a5: css({ bg: 'secondary.a5' }),
+    a6: css({ bg: 'secondary.a6' }),
+    a7: css({ bg: 'secondary.a7' }),
+    a8: css({ bg: 'secondary.a8' }),
+    a9: css({ bg: 'secondary.a9' }),
+    a10: css({ bg: 'secondary.a10' }),
+    a11: css({ bg: 'secondary.a11' }),
+    a12: css({ bg: 'secondary.a12' }),
+  },
+  tertiary: {
+    a1: css({ bg: 'tertiary.a1' }),
+    a2: css({ bg: 'tertiary.a2' }),
+    a3: css({ bg: 'tertiary.a3' }),
+    a4: css({ bg: 'tertiary.a4' }),
+    a5: css({ bg: 'tertiary.a5' }),
+    a6: css({ bg: 'tertiary.a6' }),
+    a7: css({ bg: 'tertiary.a7' }),
+    a8: css({ bg: 'tertiary.a8' }),
+    a9: css({ bg: 'tertiary.a9' }),
+    a10: css({ bg: 'tertiary.a10' }),
+    a11: css({ bg: 'tertiary.a11' }),
+    a12: css({ bg: 'tertiary.a12' }),
+  },
+  neutral: {
+    a1: css({ bg: 'neutral.a1' }),
+    a2: css({ bg: 'neutral.a2' }),
+    a3: css({ bg: 'neutral.a3' }),
+    a4: css({ bg: 'neutral.a4' }),
+    a5: css({ bg: 'neutral.a5' }),
+    a6: css({ bg: 'neutral.a6' }),
+    a7: css({ bg: 'neutral.a7' }),
+    a8: css({ bg: 'neutral.a8' }),
+    a9: css({ bg: 'neutral.a9' }),
+    a10: css({ bg: 'neutral.a10' }),
+    a11: css({ bg: 'neutral.a11' }),
+    a12: css({ bg: 'neutral.a12' }),
+  },
+  error: {
+    a1: css({ bg: 'error.a1' }),
+    a2: css({ bg: 'error.a2' }),
+    a3: css({ bg: 'error.a3' }),
+    a4: css({ bg: 'error.a4' }),
+    a5: css({ bg: 'error.a5' }),
+    a6: css({ bg: 'error.a6' }),
+    a7: css({ bg: 'error.a7' }),
+    a8: css({ bg: 'error.a8' }),
+    a9: css({ bg: 'error.a9' }),
+    a10: css({ bg: 'error.a10' }),
+    a11: css({ bg: 'error.a11' }),
+    a12: css({ bg: 'error.a12' }),
+  },
+};
+
+const semanticClasses: Record<
+  Palette,
+  {
+    solidBg: string;
+    subtleBg: string;
+    surfaceBg: string;
+    outlineBorderColor: string;
+    plainFg: string;
+  }
+> = {
+  primary: {
+    solidBg: css({ bg: 'primary.solid.bg' }),
+    subtleBg: css({ bg: 'primary.subtle.bg' }),
+    surfaceBg: css({ bg: 'primary.surface.bg' }),
+    outlineBorderColor: css({ borderColor: 'primary.outline.border' }),
+    plainFg: css({ color: 'primary.plain.fg' }),
+  },
+  secondary: {
+    solidBg: css({ bg: 'secondary.solid.bg' }),
+    subtleBg: css({ bg: 'secondary.subtle.bg' }),
+    surfaceBg: css({ bg: 'secondary.surface.bg' }),
+    outlineBorderColor: css({ borderColor: 'secondary.outline.border' }),
+    plainFg: css({ color: 'secondary.plain.fg' }),
+  },
+  tertiary: {
+    solidBg: css({ bg: 'tertiary.solid.bg' }),
+    subtleBg: css({ bg: 'tertiary.subtle.bg' }),
+    surfaceBg: css({ bg: 'tertiary.surface.bg' }),
+    outlineBorderColor: css({ borderColor: 'tertiary.outline.border' }),
+    plainFg: css({ color: 'tertiary.plain.fg' }),
+  },
+  neutral: {
+    solidBg: css({ bg: 'neutral.solid.bg' }),
+    subtleBg: css({ bg: 'neutral.subtle.bg' }),
+    surfaceBg: css({ bg: 'neutral.surface.bg' }),
+    outlineBorderColor: css({ borderColor: 'neutral.outline.border' }),
+    plainFg: css({ color: 'neutral.plain.fg' }),
+  },
+  error: {
+    solidBg: css({ bg: 'error.solid.bg' }),
+    subtleBg: css({ bg: 'error.subtle.bg' }),
+    surfaceBg: css({ bg: 'error.surface.bg' }),
+    outlineBorderColor: css({ borderColor: 'error.outline.border' }),
+    plainFg: css({ color: 'error.plain.fg' }),
+  },
+};
+
+// ── Swatch components ──────────────────────────────────────────────────────────
+
+const swatchBase: React.CSSProperties = {
+  width: '52px',
+  height: '52px',
+  borderRadius: '6px',
+  flexShrink: 0,
+};
+
+function ScaleStepSwatch({
+  palette,
+  step,
+}: {
+  palette: Palette;
+  step: number;
+}) {
+  const isSolidAction = step === 9;
+  return (
+    <div
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        gap: '4px',
+      }}
+    >
+      <div
+        className={scaleBg[palette][step]}
+        style={{
+          ...swatchBase,
+          border: '1px solid rgba(0,0,0,0.08)',
+          outline: isSolidAction ? '2px solid rgba(0,0,0,0.35)' : undefined,
+          outlineOffset: isSolidAction ? '2px' : undefined,
+        }}
+        title={`${palette}.${step}`}
+      />
+      <span
+        style={{
+          fontSize: '10px',
+          fontFamily: 'monospace',
+          color: '#666',
+          textAlign: 'center',
+          lineHeight: 1.2,
+        }}
+      >
+        {step}
+      </span>
+      {isSolidAction && (
+        <span
+          style={{
+            fontSize: '9px',
+            color: '#888',
+            textAlign: 'center',
+            lineHeight: 1.2,
+          }}
+        >
+          solid
+          <br />
+          action
+        </span>
+      )}
+    </div>
+  );
+}
+
+function AlphaStepSwatch({
+  palette,
+  step,
+}: {
+  palette: Palette;
+  step: string;
+}) {
+  return (
+    <div
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        gap: '4px',
+      }}
+    >
+      <div
+        className={alphaBg[palette][step]}
+        style={{
+          ...swatchBase,
+          border: '1px solid rgba(255,255,255,0.2)',
+        }}
+        title={`${palette}.${step}`}
+      />
+      <span
+        style={{
+          fontSize: '10px',
+          fontFamily: 'monospace',
+          color: '#ddd',
+          textAlign: 'center',
+          lineHeight: 1.2,
+        }}
+      >
+        {step}
+      </span>
+    </div>
+  );
+}
+
+function SemanticRow({ palette }: { palette: Palette }) {
+  const classes = semanticClasses[palette];
+  const label = (text: string) => (
+    <span
+      style={{
+        fontSize: '9px',
+        fontFamily: 'monospace',
+        color: '#666',
+        textAlign: 'center',
+        marginTop: '4px',
+        lineHeight: 1.2,
+      }}
+    >
+      {text}
+    </span>
+  );
+
+  return (
+    <div
+      style={{
+        display: 'flex',
+        gap: '8px',
+        alignItems: 'flex-end',
+        flexWrap: 'wrap',
+      }}
+    >
+      <div
+        style={{
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+        }}
+      >
+        <div
+          className={classes.solidBg}
+          style={{ ...swatchBase, border: '1px solid rgba(0,0,0,0.08)' }}
+        />
+        {label('solid.bg')}
+      </div>
+
+      <div
+        style={{
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+        }}
+      >
+        <div
+          className={classes.subtleBg}
+          style={{ ...swatchBase, border: '1px solid rgba(0,0,0,0.08)' }}
+        />
+        {label('subtle.bg')}
+      </div>
+
+      <div
+        style={{
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+        }}
+      >
+        <div
+          className={classes.surfaceBg}
+          style={{ ...swatchBase, border: '1px solid rgba(0,0,0,0.08)' }}
+        />
+        {label('surface.bg')}
+      </div>
+
+      <div
+        style={{
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+        }}
+      >
+        <div
+          className={classes.outlineBorderColor}
+          style={{ ...swatchBase, borderWidth: '2px', borderStyle: 'solid' }}
+        />
+        {label('outline.border')}
+      </div>
+
+      <div
+        style={{
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+        }}
+      >
+        <div
+          style={{
+            ...swatchBase,
+            border: '1px dashed rgba(0,0,0,0.15)',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+          }}
+        >
+          <span
+            className={classes.plainFg}
+            style={{ fontSize: '18px', fontWeight: '700' }}
+          >
+            Aa
+          </span>
+        </div>
+        {label('plain.fg')}
+      </div>
+    </div>
+  );
+}
+
+function PaletteLabel({ palette }: { palette: Palette }) {
+  return (
+    <span
+      style={{
+        fontSize: '12px',
+        fontWeight: '600',
+        textTransform: 'capitalize',
+        color: '#444',
+        fontFamily: 'Inter, system-ui, sans-serif',
+        minWidth: '72px',
+        display: 'inline-block',
+      }}
+    >
+      {palette}
+    </span>
+  );
+}
+
+function SectionHeading({
+  title,
+  description,
+}: {
+  title: string;
+  description: string;
+}) {
+  return (
+    <div style={{ marginBottom: '24px' }}>
+      <h2
+        style={{
+          fontSize: '18px',
+          fontWeight: '600',
+          margin: '0 0 8px',
+          fontFamily: 'Inter, system-ui, sans-serif',
+        }}
+      >
+        {title}
+      </h2>
+      <p
+        style={{ fontSize: '14px', color: '#666', margin: 0, lineHeight: 1.5 }}
+      >
+        {description}
+      </p>
+    </div>
+  );
+}
+
+// ── Section 1: Scale steps (1–12) ─────────────────────────────────────────────
+
+export const ScaleSteps: Story = {
+  name: '1 · Scale Steps (1–12)',
+  render: () => (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '32px' }}>
+      <SectionHeading
+        title="Scale Steps (1–12)"
+        description="12-step Radix-style scale mapped from the M3 tonal palette. Steps increase from lightest background (1) to highest-contrast text (12). Step 9 is the primary action color — e.g. the fill for a solid button."
+      />
+      {PALETTES.map((palette) => (
+        <div key={palette}>
+          <PaletteLabel palette={palette} />
+          <div
+            style={{
+              display: 'flex',
+              gap: '6px',
+              flexWrap: 'wrap',
+              marginTop: '8px',
+            }}
+          >
+            {SCALE_STEPS.map((step) => (
+              <ScaleStepSwatch key={step} palette={palette} step={step} />
+            ))}
+          </div>
+        </div>
+      ))}
+    </div>
+  ),
+};
+
+// ── Section 2: Alpha steps (a1–a12) ───────────────────────────────────────────
+
+export const AlphaSteps: Story = {
+  name: '2 · Alpha Steps (a1–a12)',
+  render: () => (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '32px' }}>
+      <SectionHeading
+        title="Alpha Steps (a1–a12)"
+        description="Transparent variants for overlays, tinted surfaces, and layered UI. Rendered on a mid-tone background here so transparency is visible. a1 is near-invisible; a12 is ~94% opaque."
+      />
+      {PALETTES.map((palette) => (
+        <div
+          key={palette}
+          style={{
+            padding: '16px 20px',
+            borderRadius: '8px',
+            background: '#777',
+          }}
+        >
+          <span
+            style={{
+              fontSize: '12px',
+              fontWeight: '600',
+              textTransform: 'capitalize',
+              color: '#eee',
+              fontFamily: 'Inter, system-ui, sans-serif',
+              display: 'block',
+              marginBottom: '10px',
+            }}
+          >
+            {palette}
+          </span>
+          <div style={{ display: 'flex', gap: '6px', flexWrap: 'wrap' }}>
+            {ALPHA_STEPS.map((step) => (
+              <AlphaStepSwatch key={step} palette={palette} step={step} />
+            ))}
+          </div>
+        </div>
+      ))}
+    </div>
+  ),
+};
+
+// ── Section 3: Semantic variants ──────────────────────────────────────────────
+
+export const SemanticVariants: Story = {
+  name: '3 · Semantic Variants',
+  render: () => (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '32px' }}>
+      <SectionHeading
+        title="Semantic Variants"
+        description="Pre-composed token paths for common component patterns. Use these in recipes instead of raw scale steps — they adapt correctly to light and dark mode."
+      />
+      <div
+        style={{
+          display: 'grid',
+          gridTemplateColumns: 'auto 1fr',
+          gap: '16px 24px',
+          alignItems: 'start',
+        }}
+      >
+        {PALETTES.map((palette) => (
+          <>
+            <div key={`${palette}-label`} style={{ paddingTop: '6px' }}>
+              <PaletteLabel palette={palette} />
+            </div>
+            <SemanticRow key={`${palette}-row`} palette={palette} />
+          </>
+        ))}
+      </div>
+    </div>
+  ),
+};
+
+// ── Section 4: Usage guidance ─────────────────────────────────────────────────
+
+export const UsageGuidance: Story = {
+  name: '4 · Usage Guidance',
+  render: () => (
+    <div
+      style={{ maxWidth: '680px', fontFamily: 'Inter, system-ui, sans-serif' }}
+    >
+      <h2 style={{ fontSize: '18px', fontWeight: '600', margin: '0 0 20px' }}>
+        Usage Guidance
+      </h2>
+
+      <table
+        style={{ width: '100%', borderCollapse: 'collapse', fontSize: '14px' }}
+      >
+        <thead>
+          <tr style={{ borderBottom: '2px solid #e5e5e5' }}>
+            <th
+              style={{
+                textAlign: 'left',
+                padding: '8px 12px',
+                fontWeight: '600',
+                color: '#333',
+                width: '160px',
+              }}
+            >
+              Token
+            </th>
+            <th
+              style={{
+                textAlign: 'left',
+                padding: '8px 12px',
+                fontWeight: '600',
+                color: '#333',
+              }}
+            >
+              Use for
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          {(
+            [
+              ['1–2', 'App and page backgrounds'],
+              ['3–4', 'Subtle hover and interactive backgrounds'],
+              ['5–6', 'UI element fills (progress bars, indicators)'],
+              ['7–8', 'Borders and separators'],
+              ['9', 'Solid interactive fill — primary button background'],
+              ['10', 'Hovered solid fill'],
+              ['11–12', 'High-contrast text and icons'],
+              [
+                'a1–a12',
+                'Transparent overlays — render on a background to see them',
+              ],
+              ['solid.bg', 'Filled/solid variant buttons and badges'],
+              ['subtle.bg', 'Subtle/soft variant buttons and badges'],
+              [
+                'surface.bg',
+                'Card and surface backgrounds within a color context',
+              ],
+              [
+                'outline.*',
+                'Outline/ghost variant buttons (border color + optional hover bg)',
+              ],
+              [
+                'plain.*',
+                'Plain/text variant buttons and links (fg color only, bg transparent)',
+              ],
+            ] as [string, string][]
+          ).map(([token, use], i) => (
+            <tr
+              key={token}
+              style={{
+                borderBottom: '1px solid #f0f0f0',
+                background: i % 2 === 0 ? undefined : '#fafafa',
+              }}
+            >
+              <td
+                style={{
+                  padding: '8px 12px',
+                  fontFamily: 'monospace',
+                  fontSize: '13px',
+                  color: '#444',
+                }}
+              >
+                {token}
+              </td>
+              <td
+                style={{ padding: '8px 12px', color: '#555', lineHeight: 1.5 }}
+              >
+                {use}
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+
+      <h3
+        style={{ fontSize: '15px', fontWeight: '600', margin: '32px 0 12px' }}
+      >
+        Example Usage
+      </h3>
+      <pre
+        style={{
+          background: '#f5f5f5',
+          padding: '16px',
+          borderRadius: '8px',
+          fontSize: '13px',
+          lineHeight: 1.6,
+          overflow: 'auto',
+          margin: 0,
+        }}
+      >
+        {`import { css } from 'styled-system/css';
+
+// Solid action button background
+css({ bg: 'primary.solid.bg', color: 'primary.solid.fg' })
+
+// Subtle tinted button
+css({ bg: 'primary.subtle.bg', color: 'primary.subtle.fg' })
+
+// Outline/ghost button
+css({
+  bg: 'primary.outline.bg',
+  borderColor: 'primary.outline.border',
+  color: 'primary.outline.fg',
+})
+
+// Plain/text link
+css({ color: 'primary.plain.fg' })
+
+// Step-based (for custom components)
+css({ bg: 'primary.1' })    // page background
+css({ bg: 'primary.9' })    // solid action color
+css({ color: 'primary.11' }) // readable body text`}
+      </pre>
+    </div>
+  ),
+};