@ponti-studios/ui 0.1.2 → 0.4.0

package/src/tokens/chart-colors.stories.tsx

@@ -0,0 +1,192 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+
+import { CHART_CSS_VARS } from "../constants/chart-colors";
+
+const meta: Meta = { title: "Foundations/Charts", parameters: { layout: "fullscreen" } };
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const SERIES = [
+  { key: "chart1", label: "chart-1" },
+  { key: "chart2", label: "chart-2" },
+  { key: "chart3", label: "chart-3" },
+  { key: "chart4", label: "chart-4" },
+  { key: "chart5", label: "chart-5" },
+] as const;
+
+const STATUS = [
+  { key: "positive", label: "chart-positive", example: "▲ Up 12%" },
+  { key: "negative", label: "chart-negative", example: "▼ Down 4%" },
+  { key: "neutral", label: "chart-neutral", example: "— Flat" },
+] as const;
+
+// A handful of arbitrary multi-series datasets, purely to show how the
+// ordinal chart-1..5 palette reads next to itself in a real chart shape.
+const BAR_DATA = [
+  [42, 68, 30, 55, 90],
+  [70, 25, 60, 40, 35],
+  [30, 55, 80, 20, 65],
+];
+
+const LINE_POINTS: Record<string, Array<[number, number]>> = {
+  chart1: [
+    [0, 60],
+    [20, 40],
+    [40, 50],
+    [60, 20],
+    [80, 30],
+    [100, 10],
+  ],
+  chart2: [
+    [0, 80],
+    [20, 70],
+    [40, 75],
+    [60, 55],
+    [80, 60],
+    [100, 45],
+  ],
+  chart3: [
+    [0, 30],
+    [20, 45],
+    [40, 25],
+    [60, 50],
+    [80, 35],
+    [100, 55],
+  ],
+  chart4: [
+    [0, 90],
+    [20, 85],
+    [40, 65],
+    [60, 70],
+    [80, 50],
+    [100, 60],
+  ],
+  chart5: [
+    [0, 15],
+    [20, 30],
+    [40, 20],
+    [60, 40],
+    [80, 25],
+    [100, 20],
+  ],
+};
+
+export const CategoricalPalette: Story = {
+  render: () => (
+    <main className="bg-background text-foreground grid min-h-screen gap-10 p-6 md:p-10">
+      <header className="grid gap-2">
+        <p className="text-muted-foreground text-sm">Foundations / charts</p>
+        <h1 className="text-4xl font-semibold tracking-tight">Chart colors</h1>
+        <p className="text-muted-foreground max-w-2xl text-base">
+          <code className="font-mono">chart-1</code> through <code className="font-mono">
+            chart-5
+          </code>{" "}
+          are an ordinal palette for arbitrary categorical series (e.g. one line per country) —
+          there's no fixed meaning to a given slot, so they're assigned by index, not by what the
+          data represents. That's different from{" "}
+          <code className="font-mono">chart-positive</code>/<code className="font-mono">
+            chart-negative
+          </code>
+          /<code className="font-mono">chart-neutral</code> below, which carry real meaning
+          (up/down/flat) and should stay semantic in any chart that shows a directional delta.
+        </p>
+      </header>
+
+      <section className="grid gap-4">
+        <h2 className="text-2xl font-semibold">Series swatches</h2>
+        <div className="grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-5">
+          {SERIES.map(({ key, label }) => (
+            <div
+              key={key}
+              className="border-border grid min-h-20 content-end rounded-md border p-3"
+              style={{ backgroundColor: CHART_CSS_VARS[key] }}
+            >
+              <span className="bg-background text-foreground w-fit rounded px-1 font-mono text-xs">
+                {label}
+              </span>
+            </div>
+          ))}
+        </div>
+      </section>
+
+      <section className="border-border bg-card grid gap-5 rounded-xl border p-6">
+        <h2 className="text-2xl font-semibold">Grouped bar chart (mock)</h2>
+        <p className="text-muted-foreground max-w-2xl text-sm">
+          Three unrelated categories, five series each — a stress test for how distinguishable
+          the palette stays side by side.
+        </p>
+        <div className="flex items-end gap-8" style={{ height: 220 }}>
+          {BAR_DATA.map((group, groupIndex) => (
+            // biome-ignore lint/suspicious/noArrayIndexKey: static mock dataset
+            <div key={groupIndex} className="flex h-full items-end gap-1.5">
+              {group.map((value, seriesIndex) => (
+                <div
+                  key={SERIES[seriesIndex].key}
+                  className="w-6 rounded-t-sm"
+                  style={{
+                    height: `${value}%`,
+                    backgroundColor: CHART_CSS_VARS[SERIES[seriesIndex].key],
+                  }}
+                  title={SERIES[seriesIndex].label}
+                />
+              ))}
+            </div>
+          ))}
+        </div>
+        <div className="flex flex-wrap gap-4">
+          {SERIES.map(({ key, label }) => (
+            <div key={key} className="flex items-center gap-2">
+              <span
+                className="size-2.5 rounded-full"
+                style={{ backgroundColor: CHART_CSS_VARS[key] }}
+                aria-hidden="true"
+              />
+              <span className="text-muted-foreground font-mono text-xs">{label}</span>
+            </div>
+          ))}
+        </div>
+      </section>
+
+      <section className="border-border bg-card grid gap-5 rounded-xl border p-6">
+        <h2 className="text-2xl font-semibold">Multi-line chart (mock)</h2>
+        <svg viewBox="0 0 100 100" preserveAspectRatio="none" className="h-56 w-full">
+          <title>Multi-series line chart using the chart-1..5 palette</title>
+          {Object.entries(LINE_POINTS).map(([key, points]) => (
+            <polyline
+              key={key}
+              fill="none"
+              strokeWidth={1.5}
+              vectorEffect="non-scaling-stroke"
+              stroke={CHART_CSS_VARS[key as keyof typeof CHART_CSS_VARS]}
+              points={points.map(([x, y]) => `${x},${y}`).join(" ")}
+            />
+          ))}
+        </svg>
+      </section>
+
+      <section className="grid gap-4">
+        <h2 className="text-2xl font-semibold">Semantic status colors</h2>
+        <p className="text-muted-foreground max-w-2xl text-sm">
+          Use these — not a numbered slot — whenever a value has an inherent direction.
+        </p>
+        <div className="grid grid-cols-1 gap-3 sm:grid-cols-3">
+          {STATUS.map(({ key, label, example }) => (
+            <div key={key} className="border-border grid gap-2 rounded-md border p-3">
+              <div className="flex items-center gap-2">
+                <span
+                  className="size-2.5 rounded-full"
+                  style={{ backgroundColor: CHART_CSS_VARS[key] }}
+                  aria-hidden="true"
+                />
+                <span className="text-muted-foreground font-mono text-xs">{label}</span>
+              </div>
+              <span className="text-lg font-semibold" style={{ color: CHART_CSS_VARS[key] }}>
+                {example}
+              </span>
+            </div>
+          ))}
+        </div>
+      </section>
+    </main>
+  ),
+};

package/src/tokens/color-systems.stories.tsx

@@ -1,133 +1,41 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
 
 import { Button } from "../components/primitives/button";
-import { colorSystems, colorTokenNames, type ColorMode } from "./colors";
-
-const meta: Meta = {
-  title: "Foundations/Colors",
-  parameters: { layout: "fullscreen" },
-};
+import { colorTokenNames } from "./index";
 
+const meta: Meta = { title: "Foundations/Colors", parameters: { layout: "fullscreen" } };
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-const groups = {
-  surfaces: colorTokenNames.filter((token) => token.startsWith("surface-")),
-  content: colorTokenNames.filter((token) => token.startsWith("text-")),
-  structure: colorTokenNames.filter((token) => token.startsWith("border-")),
-  intent: colorTokenNames.filter(
-    (token) =>
-      token.startsWith("accent") ||
-      token.startsWith("destructive") ||
-      token.startsWith("success") ||
-      token.startsWith("warning") ||
-      token === "overlay-scrim" ||
-      token === "ring-focus",
-  ),
-};
-
-function Swatch({ mode, token }: { mode: ColorMode; token: string }) {
-  const value = colorSystems.ponti[mode][token as keyof (typeof colorSystems.ponti)[typeof mode]];
-  const foreground = token.startsWith("text-") ? value : colorSystems.ponti[mode]["text-primary"];
-
-  return (
-    <div className="grid min-w-0 gap-2">
-      <div
-        className="flex min-h-16 items-end overflow-hidden rounded-md border p-2"
-        style={{
-          background: value,
-          color: foreground,
-          borderColor: colorSystems.ponti[mode]["border-default"],
-        }}
-      >
-        <span className="font-mono text-[11px] break-all">Aa</span>
-      </div>
-      <span
-        className="font-mono text-[11px] break-all"
-        style={{ color: colorSystems.ponti[mode]["text-secondary"] }}
-      >
-        {token}
-      </span>
-    </div>
-  );
-}
-
-function ThemePanel({ mode }: { mode: ColorMode }) {
-  const theme = colorSystems.ponti[mode];
-
-  return (
-    <section
-      className="grid min-w-0 gap-6 rounded-xl border p-5"
-      style={{
-        background: theme["surface-canvas"],
-        color: theme["text-primary"],
-        borderColor: theme["border-default"],
-      }}
-      aria-label={`Ponti ${mode} color system`}
-    >
+export const SystemAppearance: Story = {
+  render: () => (
+    <main className="bg-background text-foreground grid min-h-screen gap-8 p-6 md:p-10">
       <header className="grid gap-2">
-        <p className="font-mono text-xs uppercase" style={{ color: theme["text-secondary"] }}>
-          Ponti / {mode}
-        </p>
-        <h2 className="text-xl font-semibold">Semantic roles</h2>
-        <p className="max-w-prose text-sm" style={{ color: theme["text-secondary"] }}>
-          Components consume meaning, while this palette supplies the light or dark value.
+        <h1 className="text-2xl font-semibold">System color roles</h1>
+        <p className="text-muted-foreground max-w-prose text-sm">
+          These semantic roles resolve from the operating system’s light or dark appearance. CSS is
+          the single source of their values.
         </p>
       </header>
       <div className="flex flex-wrap gap-2">
         <Button>Primary action</Button>
         <Button variant="secondary">Secondary action</Button>
         <Button variant="outline">Outline action</Button>
-        <Button variant="ghost">Quiet action</Button>
         <Button variant="destructive">Delete item</Button>
       </div>
-      <div className="grid gap-6">
-        {Object.entries(groups).map(([title, tokens]) => (
-          <section key={title} className="grid gap-3">
-            <h3 className="text-sm font-semibold capitalize">{title}</h3>
-            <div className="grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-4">
-              {tokens.map((token) => (
-                <Swatch key={token} mode={mode} token={token} />
-              ))}
-            </div>
-          </section>
+      <div className="grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-4">
+        {colorTokenNames.map((token) => (
+          <div
+            key={token}
+            className="border-border grid min-h-20 content-end rounded-md border p-3"
+            style={{ backgroundColor: `var(--color-${token})` }}
+          >
+            <span className="bg-background text-foreground w-fit rounded px-1 font-mono text-xs">
+              {token}
+            </span>
+          </div>
         ))}
       </div>
-    </section>
-  );
-}
-
-export const LightAndDark: Story = {
-  render: () => (
-    <main className="grid min-h-screen gap-4 bg-slate-100 p-4 md:p-6 dark:bg-slate-950">
-      <ThemePanel mode="light" />
-      <ThemePanel mode="dark" />
-    </main>
-  ),
-};
-
-export const ButtonStates: Story = {
-  render: () => (
-    <main className="bg-canvas text-primary grid min-h-screen gap-6 p-6">
-      <header className="grid gap-2">
-        <h1 className="text-2xl font-semibold">Button state matrix</h1>
-        <p className="text-secondary max-w-prose text-sm">
-          Inspect hover, focus, press, disabled, destructive, and loading behavior in the toolbar’s
-          light and dark modes.
-        </p>
-      </header>
-      <div className="grid max-w-3xl gap-3 sm:grid-cols-2">
-        <Button>Primary action</Button>
-        <Button variant="secondary">Secondary action</Button>
-        <Button variant="outline">Outline action</Button>
-        <Button variant="ghost">Quiet action</Button>
-        <Button variant="destructive">Delete item</Button>
-        <Button variant="link">Read more</Button>
-        <Button disabled>Disabled action</Button>
-        <Button isLoading loadingLabel="Saving">
-          Save changes
-        </Button>
-      </div>
     </main>
   ),
 };

package/src/tokens/foundations.stories.tsx

@@ -1,59 +1,53 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
 
-const meta: Meta = {
-  title: "Foundations/System Lab",
-  parameters: { layout: "fullscreen" },
-};
-
+const meta: Meta = { title: "Foundations/Tailwind Defaults", parameters: { layout: "fullscreen" } };
 export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const SpacingAndType: Story = {
   render: () => (
-    <main className="bg-canvas text-primary grid min-h-screen gap-10 p-6 md:p-10">
+    <main className="bg-background text-foreground grid min-h-screen gap-10 p-6 md:p-10">
       <section className="grid gap-6">
         <header className="grid gap-2">
-          <p className="body-4 text-secondary">Foundations / rhythm</p>
-          <h1 className="display-1">Space gives the interface its pace.</h1>
-          <p className="body-1 text-secondary max-w-2xl">
-            The specimen uses the shared interval scale and the four local typography roles.
+          <p className="text-muted-foreground text-sm">Foundations / rhythm</p>
+          <h1 className="text-4xl font-semibold tracking-tight">Tailwind defaults, directly.</h1>
+          <p className="text-muted-foreground max-w-2xl text-base">
+            The specimen uses the shared Tailwind spacing and type scales.
           </p>
         </header>
         <div className="grid gap-2">
-          {[4, 8, 12, 16, 24, 32, 48, 64].map((size) => (
+          {[1, 2, 3, 4, 6, 8, 12, 16].map((size) => (
             <div key={size} className="flex items-center gap-3">
-              <span className="text-secondary w-12 font-mono text-xs tabular-nums">{size}px</span>
+              <span className="text-muted-foreground w-12 font-mono text-xs tabular-nums">
+                {size}
+              </span>
               <div
                 className="bg-accent h-3 rounded-sm"
-                style={{ width: size }}
+                style={{ width: `calc(var(--spacing) * ${size})` }}
                 aria-hidden="true"
               />
             </div>
           ))}
         </div>
       </section>
-      <section className="border-subtle grid gap-5 rounded-xl border p-6">
-        <h2 className="heading-2">Typography roles</h2>
+      <section className="border-border bg-card grid gap-5 rounded-xl border p-6">
+        <h2 className="text-2xl font-semibold">Typography scale</h2>
         <div className="grid gap-4">
-          <div>
-            <p className="text-secondary text-xs uppercase">Display</p>
-            <p className="display-2">A clear beginning</p>
-          </div>
-          <div>
-            <p className="text-secondary text-xs uppercase">Body</p>
-            <p className="body-1 max-w-2xl">
-              Readable content should have room to breathe and should not require the user to decode
-              the container.
+          {(
+            [
+              "text-xs",
+              "text-sm",
+              "text-base",
+              "text-lg",
+              "text-xl",
+              "text-2xl",
+              "text-4xl",
+            ] as const
+          ).map((size) => (
+            <p key={size} className={`${size} text-foreground`}>
+              {size}
             </p>
-          </div>
-          <div>
-            <p className="text-secondary text-xs uppercase">Label</p>
-            <p className="body-3 font-medium">Current collection</p>
-          </div>
-          <div>
-            <p className="text-secondary text-xs uppercase">Caption</p>
-            <p className="body-4 text-secondary">Updated just now</p>
-          </div>
+          ))}
         </div>
       </section>
     </main>
@@ -62,28 +56,26 @@ export const SpacingAndType: Story = {
 
 export const Surfaces: Story = {
   render: () => (
-    <main className="bg-canvas text-primary grid min-h-screen gap-6 p-6 md:p-10">
+    <main className="bg-background text-foreground grid min-h-screen gap-6 p-6 md:p-10">
       <header className="grid gap-2">
-        <p className="body-4 text-secondary">Foundations / surfaces</p>
-        <h1 className="display-1">Quiet layers, clear ownership.</h1>
+        <p className="text-muted-foreground text-sm">Foundations / surfaces</p>
+        <h1 className="text-4xl font-semibold tracking-tight">Standard semantic layers.</h1>
       </header>
       <div className="grid gap-4 md:grid-cols-2">
-        <div className="bg-canvas border-subtle grid min-h-40 content-start gap-2 rounded-xl border p-5">
-          <h2 className="heading-3">Canvas</h2>
-          <p className="body-3 text-secondary">The page background.</p>
-        </div>
-        <div className="bg-panel border-subtle grid min-h-40 content-start gap-2 rounded-xl border p-5">
-          <h2 className="heading-3">Panel</h2>
-          <p className="body-3 text-secondary">A contained region.</p>
-        </div>
-        <div className="bg-raised border-subtle grid min-h-40 content-start gap-2 rounded-xl border p-5">
-          <h2 className="heading-3">Raised</h2>
-          <p className="body-3 text-secondary">An overlay or elevated layer.</p>
-        </div>
-        <div className="bg-inset border-subtle grid min-h-40 content-start gap-2 rounded-xl border p-5">
-          <h2 className="heading-3">Inset</h2>
-          <p className="body-3 text-secondary">A recessed working region.</p>
-        </div>
+        {[
+          ["Background", "bg-background"],
+          ["Card", "bg-card"],
+          ["Popover", "bg-popover"],
+          ["Muted", "bg-muted"],
+        ].map(([name, className]) => (
+          <div
+            key={name}
+            className={`${className} border-border grid min-h-40 content-start gap-2 rounded-xl border p-5`}
+          >
+            <h2 className="text-lg font-semibold">{name}</h2>
+            <p className="text-muted-foreground text-sm">{className}</p>
+          </div>
+        ))}
       </div>
     </main>
   ),
@@ -91,61 +83,27 @@ export const Surfaces: Story = {
 
 export const Motion: Story = {
   render: () => (
-    <main className="bg-canvas text-primary grid min-h-screen gap-8 p-6 md:p-10">
+    <main className="bg-background text-foreground grid min-h-screen gap-8 p-6 md:p-10">
       <header className="grid gap-2">
-        <p className="body-4 text-secondary">Foundations / motion</p>
-        <h1 className="display-1">Motion should explain, not perform.</h1>
-        <p className="body-1 text-secondary max-w-2xl">
-          Use the Storybook motion-reduction setting to confirm that nonessential movement
-          disappears.
-        </p>
+        <p className="text-muted-foreground text-sm">Foundations / motion</p>
+        <h1 className="text-4xl font-semibold tracking-tight">
+          Motion stays standard and reducible.
+        </h1>
       </header>
       <div className="grid gap-4 sm:grid-cols-3">
-        <div className="bg-panel border-subtle motion-safe:animate-in motion-safe:fade-in-0 motion-safe:slide-in-from-bottom-2 grid min-h-32 place-content-center gap-2 rounded-xl border p-5 duration-150 motion-reduce:animate-none">
-          <span className="heading-3">Enter</span>
-          <span className="body-4 text-secondary">150ms / 6px</span>
+        <div className="motion-safe:animate-in motion-safe:fade-in-0 border-border bg-card grid min-h-32 place-content-center gap-2 rounded-xl border p-5 motion-reduce:animate-none">
+          <span className="text-lg font-semibold">Enter</span>
+          <span className="text-muted-foreground text-sm">150ms</span>
         </div>
-        <button className="bg-panel border-subtle text-primary hover:bg-surface-hover active:bg-surface-pressed focus-visible:ring-focus grid min-h-32 place-content-center gap-2 rounded-xl border p-5 text-left focus-visible:ring-2 focus-visible:outline-none motion-safe:transition-colors">
-          <span className="heading-3">Press</span>
-          <span className="body-4 text-secondary">Immediate feedback</span>
+        <button className="border-border bg-card hover:bg-accent focus-visible:ring-ring grid min-h-32 place-content-center gap-2 rounded-xl border p-5 text-left transition-colors focus-visible:ring-2 focus-visible:outline-none motion-reduce:transition-none">
+          <span className="text-lg font-semibold">Press</span>
+          <span className="text-muted-foreground text-sm">System focus</span>
         </button>
-        <div className="bg-panel border-subtle grid min-h-32 place-content-center gap-2 rounded-xl border p-5 motion-safe:animate-pulse motion-reduce:animate-none">
-          <span className="heading-3">Loading</span>
-          <span className="body-4 text-secondary">Geometry remains stable</span>
+        <div className="border-border bg-card grid min-h-32 place-content-center gap-2 rounded-xl border p-5 motion-safe:animate-pulse motion-reduce:animate-none">
+          <span className="text-lg font-semibold">Loading</span>
+          <span className="text-muted-foreground text-sm">Stable geometry</span>
         </div>
       </div>
     </main>
   ),
 };
-
-export const Accessibility: Story = {
-  render: () => (
-    <main className="bg-canvas text-primary grid min-h-screen gap-8 p-6 md:p-10">
-      <header className="grid gap-2">
-        <p className="body-4 text-secondary">Foundations / accessibility</p>
-        <h1 className="display-1">The system should be calm for everyone.</h1>
-      </header>
-      <section className="border-subtle grid max-w-2xl gap-5 rounded-xl border p-6">
-        <label className="grid gap-2">
-          <span className="body-3 font-medium">Email address</span>
-          <input
-            className="bg-canvas border-default text-primary focus-visible:ring-focus h-11 rounded-md border px-3 outline-none focus-visible:ring-2"
-            placeholder="you@example.com"
-          />
-          <span className="body-4 text-secondary">Use a reachable address for notifications.</span>
-        </label>
-        <div className="flex flex-wrap gap-3">
-          <button className="bg-accent text-on-accent focus-visible:ring-focus min-h-11 rounded-md px-4 focus-visible:ring-2 focus-visible:outline-none">
-            Continue
-          </button>
-          <button disabled className="bg-panel text-disabled min-h-11 rounded-md px-4">
-            Unavailable
-          </button>
-        </div>
-        <p className="body-4 text-destructive" role="alert">
-          Example error: enter a valid email address.
-        </p>
-      </section>
-    </main>
-  ),
-};

package/src/tokens/generated/dark.colors.generated.ts

@@ -0,0 +1,29 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+export default {
+  background: "#111113",
+  card: "#18191b",
+  popover: "#212225",
+  muted: "#18191b",
+  "text-primary": "#edeef0",
+  "text-secondary": "#b0b4ba",
+  tertiary: "#777b84",
+  primary: "#3e63dd",
+  destructive: "#e5484d",
+  success: "#30a46c",
+  warning: "#ffc53d",
+  "primary-foreground": "#ffffff",
+  "destructive-foreground": "#ffffff",
+  "border-default": "#43484e",
+  "focus-ring": "#3e63dd",
+  "chart-1": "#3e63dd",
+  "chart-2": "#6e56cf",
+  "chart-3": "#12a594",
+  "chart-4": "#f76b15",
+  "chart-5": "#696e77",
+  "chart-positive": "#30a46c",
+  "chart-negative": "#e5484d",
+  "chart-neutral": "#5a6169",
+};

package/src/tokens/generated/dark.css

@@ -0,0 +1,29 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --background: #111113;
+  --card: #18191b;
+  --popover: #212225;
+  --muted: #18191b;
+  --text-primary: #edeef0;
+  --text-secondary: #b0b4ba;
+  --tertiary: #777b84;
+  --primary: #3e63dd;
+  --destructive: #e5484d;
+  --success: #30a46c;
+  --warning: #ffc53d;
+  --primary-foreground: #ffffff;
+  --destructive-foreground: #ffffff;
+  --border-default: #43484e;
+  --focus-ring: #3e63dd;
+  --chart-1: #3e63dd;
+  --chart-2: #6e56cf;
+  --chart-3: #12a594;
+  --chart-4: #f76b15;
+  --chart-5: #696e77;
+  --chart-positive: #30a46c;
+  --chart-negative: #e5484d;
+  --chart-neutral: #5a6169;
+}