@xenide-io/the-old-ui-theme 0.4.4 → 0.4.8

package/src/components/sections/ButtonShowcase.tsx

@@ -1,308 +0,0 @@
-import {
-  IconDownload,
-  IconPlayCircle,
-  IconPlus,
-  IconSave,
-  IconSubArrowRight,
-  IconTrash,
-  IconUpload,
-} from "@/components/icons";
-import { Button, ComponentDocs, DropdownButton, DropdownItem, Panel, ShowcaseWrapper } from "@/components/ui";
-
-export default function ButtonShowcase() {
-  const code = `import { Button, DropdownButton, DropdownItem, IconDownload, IconPlayCircle, IconPlus, IconSave, IconSubArrowRight, IconTrash, IconUpload, Panel } from "@xenide-io/the-old-ui-theme";
-
-<div className="space-y-8">
-  <Panel className="space-y-4">
-    <h3 className="text-sm font-semibold uppercase tracking-wider text-ph-mutedtext">Toolbar (like HogQL / insights)</h3>
-    <div className="flex flex-wrap items-center gap-2 rounded-lemon border border-ph-border bg-ph-surface p-3 shadow-elevation-3000">
-      <DropdownButton
-        label="Run"
-        variant="primary"
-        split
-        icon={<IconPlayCircle className="h-4 w-4" aria-hidden />}
-      >
-        <DropdownItem>Run now</DropdownItem>
-        <DropdownItem>Run as new insight…</DropdownItem>
-      </DropdownButton>
-      <DropdownButton
-        label="Variables"
-        variant="secondary"
-        icon={
-          <span className="font-mono text-sm leading-none" aria-hidden>
-            {"{}"}
-          </span>
-        }
-      >
-        <DropdownItem>Manage variables…</DropdownItem>
-        <DropdownItem>Insert column…</DropdownItem>
-      </DropdownButton>
-      <DropdownButton label="Filters" variant="secondary" panelClassName="min-w-[13rem]">
-        <DropdownItem>Add filter group</DropdownItem>
-        <DropdownItem>Clear all filters</DropdownItem>
-        <DropdownItem className="text-ph-mutedtext">Save as cohort…</DropdownItem>
-      </DropdownButton>
-      <Button variant="secondary" size="sm" shape="square" aria-label="Layout">
-        <span className="flex gap-0.5" aria-hidden>
-          <span className="h-4 w-1.5 rounded-sm bg-current" />
-          <span className="h-4 w-1.5 rounded-sm bg-current opacity-40" />
-        </span>
-      </Button>
-    </div>
-  </Panel>
-
-  <Panel className="space-y-4">
-    <h3 className="text-sm font-semibold uppercase tracking-wider text-ph-mutedtext">Lemon 3000 primary & secondary</h3>
-    <div className="flex flex-wrap gap-3">
-      <Button variant="primary">Primary</Button>
-      <Button variant="secondary">Secondary</Button>
-      <Button variant="primary" outline>
-        Primary outline
-      </Button>
-      <Button variant="secondary" outline>
-        Secondary outline
-      </Button>
-    </div>
-  </Panel>
-
-  <Panel className="space-y-4">
-    <h3 className="text-sm font-semibold uppercase tracking-wider text-ph-mutedtext">Marketing signal vs in-app</h3>
-    <div className="flex flex-wrap gap-3">
-      <Button variant="primary">App primary (3000)</Button>
-      <Button variant="signal">Marketing signal</Button>
-    </div>
-  </Panel>
-
-  <Panel className="space-y-4">
-    <h3 className="text-sm font-semibold uppercase tracking-wider text-ph-mutedtext">Semantic solids</h3>
-    <div className="flex flex-wrap gap-3">
-      <Button variant="accent">Accent</Button>
-      <Button variant="neutral">Neutral</Button>
-      <Button variant="info">Info</Button>
-      <Button variant="success">Success</Button>
-      <Button variant="warning">Warning</Button>
-      <Button variant="danger">Danger</Button>
-    </div>
-  </Panel>
-
-  <Panel className="space-y-4">
-    <h3 className="text-sm font-semibold uppercase tracking-wider text-ph-mutedtext">With icons</h3>
-    <div className="flex flex-wrap gap-3">
-      <Button variant="primary" icon={<IconPlus className="h-4 w-4" aria-hidden />}>
-        New project
-      </Button>
-      <Button variant="primary" sideIcon={<IconSubArrowRight className="h-4 w-4" aria-hidden />}>
-        Continue
-      </Button>
-      <Button variant="secondary" icon={<IconDownload className="h-4 w-4" aria-hidden />}>
-        Export
-      </Button>
-      <Button variant="success" icon={<IconSave className="h-4 w-4" aria-hidden />}>
-        Save
-      </Button>
-      <Button variant="danger" icon={<IconTrash className="h-4 w-4" aria-hidden />}>
-        Delete
-      </Button>
-      <Button variant="ghost" icon={<IconUpload className="h-4 w-4" aria-hidden />}>
-        Upload
-      </Button>
-    </div>
-  </Panel>
-
-  <Panel className="space-y-4">
-    <h3 className="text-sm font-semibold uppercase tracking-wider text-ph-mutedtext">Sizes & shapes</h3>
-    <div className="flex flex-wrap items-end gap-3">
-      <Button variant="primary" size="xs">
-        XS
-      </Button>
-      <Button variant="primary" size="sm">
-        SM
-      </Button>
-      <Button variant="primary">MD</Button>
-      <Button variant="primary" size="lg">
-        LG
-      </Button>
-      <Button variant="primary" shape="circle" aria-label="Add">
-        <IconPlus className="h-5 w-5" />
-      </Button>
-      <Button variant="primary" shape="square" aria-label="Add">
-        <IconPlus className="h-5 w-5" />
-      </Button>
-      <Button variant="secondary" shape="wide">
-        Wide
-      </Button>
-    </div>
-  </Panel>
-
-  <Panel className="space-y-4">
-    <h3 className="text-sm font-semibold uppercase tracking-wider text-ph-mutedtext">Ghost, link & states</h3>
-    <div className="flex flex-wrap items-center gap-4">
-      <Button variant="ghost">Tertiary</Button>
-      <Button variant="link">Text link button</Button>
-      <Button variant="primary" disabled>
-        Disabled
-      </Button>
-      <Button variant="primary" loading>Loading</Button>
-    </div>
-  </Panel>
-</div>`;
-
-  return (
-    <ShowcaseWrapper
-      title="Buttons"
-      description="Every filled variant shares the same bordered face, lower frame, hover lift, and pressed depth. Ghost and link actions stay flat."
-      code={code}
-      filename="ButtonExample.tsx"
-      docs={
-        <ComponentDocs
-          rows={[
-            { name: "variant", type: "primary | secondary | tertiary | signal | accent | neutral | info | success | warning | danger | ghost | link", defaultValue: "secondary", description: "Controls semantic colour and Lemon chrome treatment." },
-            { name: "size", type: "xs | sm | md | lg", defaultValue: "md", description: "Controls density without extra classes." },
-            { name: "shape", type: "default | circle | square | wide", defaultValue: "default", description: "Applies common button shapes without className." },
-            { name: "outline", type: "boolean", defaultValue: "false", description: "Converts solid variants to outline treatment." },
-            { name: "icon", type: "ReactNode", description: "Leading icon slot." },
-            { name: "sideIcon", type: "ReactNode", description: "Trailing icon slot." },
-            { name: "split", type: "boolean", defaultValue: "false", description: "Adds split divider before the trailing slot." },
-            { name: "loading", type: "boolean", defaultValue: "false", description: "Disables the action, exposes aria-busy, and replaces the leading icon with a spinner." },
-            { name: "loadingLabel", type: "ReactNode", description: "Optional label shown while loading; the normal label stays in place by default." },
-          ]}
-        />
-      }
-    >
-      <div className="space-y-8">
-        <Panel className="space-y-4">
-          <h3 className="text-sm font-semibold uppercase tracking-wider text-ph-mutedtext">Toolbar (like HogQL / insights)</h3>
-          <div className="flex flex-wrap items-center gap-2 rounded-lemon border border-ph-border bg-ph-surface p-3 shadow-elevation-3000">
-            <DropdownButton
-              label="Run"
-              variant="primary"
-              split
-              icon={<IconPlayCircle className="h-4 w-4" aria-hidden />}
-            >
-              <DropdownItem>Run now</DropdownItem>
-              <DropdownItem>Run as new insight…</DropdownItem>
-            </DropdownButton>
-            <DropdownButton
-              label="Variables"
-              variant="secondary"
-              icon={
-                <span className="font-mono text-sm leading-none" aria-hidden>
-                  {"{}"}
-                </span>
-              }
-            >
-              <DropdownItem>Manage variables…</DropdownItem>
-              <DropdownItem>Insert column…</DropdownItem>
-            </DropdownButton>
-            <DropdownButton label="Filters" variant="secondary" panelClassName="min-w-[13rem]">
-              <DropdownItem>Add filter group</DropdownItem>
-              <DropdownItem>Clear all filters</DropdownItem>
-              <DropdownItem className="text-ph-mutedtext">Save as cohort…</DropdownItem>
-            </DropdownButton>
-            <Button variant="secondary" size="sm" shape="square" aria-label="Layout">
-              <span className="flex gap-0.5" aria-hidden>
-                <span className="h-4 w-1.5 rounded-sm bg-current" />
-                <span className="h-4 w-1.5 rounded-sm bg-current opacity-40" />
-              </span>
-            </Button>
-          </div>
-        </Panel>
-
-        <Panel className="space-y-4">
-          <h3 className="text-sm font-semibold uppercase tracking-wider text-ph-mutedtext">Lemon 3000 primary & secondary</h3>
-          <div className="flex flex-wrap gap-3">
-            <Button variant="primary">Primary</Button>
-            <Button variant="secondary">Secondary</Button>
-            <Button variant="primary" outline>
-              Primary outline
-            </Button>
-            <Button variant="secondary" outline>
-              Secondary outline
-            </Button>
-          </div>
-        </Panel>
-
-        <Panel className="space-y-4">
-          <h3 className="text-sm font-semibold uppercase tracking-wider text-ph-mutedtext">Marketing signal vs in-app</h3>
-          <div className="flex flex-wrap gap-3">
-            <Button variant="primary">App primary (3000)</Button>
-            <Button variant="signal">Marketing signal</Button>
-          </div>
-        </Panel>
-
-        <Panel className="space-y-4">
-          <h3 className="text-sm font-semibold uppercase tracking-wider text-ph-mutedtext">Semantic solids</h3>
-          <div className="flex flex-wrap gap-3">
-            <Button variant="accent">Accent</Button>
-            <Button variant="neutral">Neutral</Button>
-            <Button variant="info">Info</Button>
-            <Button variant="success">Success</Button>
-            <Button variant="warning">Warning</Button>
-            <Button variant="danger">Danger</Button>
-          </div>
-        </Panel>
-
-        <Panel className="space-y-4">
-          <h3 className="text-sm font-semibold uppercase tracking-wider text-ph-mutedtext">With icons</h3>
-          <div className="flex flex-wrap gap-3">
-            <Button variant="primary" icon={<IconPlus className="h-4 w-4" aria-hidden />}>
-              New project
-            </Button>
-            <Button variant="primary" sideIcon={<IconSubArrowRight className="h-4 w-4" aria-hidden />}>
-              Continue
-            </Button>
-            <Button variant="secondary" icon={<IconDownload className="h-4 w-4" aria-hidden />}>
-              Export
-            </Button>
-            <Button variant="success" icon={<IconSave className="h-4 w-4" aria-hidden />}>
-              Save
-            </Button>
-            <Button variant="danger" icon={<IconTrash className="h-4 w-4" aria-hidden />}>
-              Delete
-            </Button>
-            <Button variant="ghost" icon={<IconUpload className="h-4 w-4" aria-hidden />}>
-              Upload
-            </Button>
-          </div>
-        </Panel>
-
-        <Panel className="space-y-4">
-          <h3 className="text-sm font-semibold uppercase tracking-wider text-ph-mutedtext">Sizes & shapes</h3>
-          <div className="flex flex-wrap items-end gap-3">
-            <Button variant="primary" size="xs">
-              XS
-            </Button>
-            <Button variant="primary" size="sm">
-              SM
-            </Button>
-            <Button variant="primary">MD</Button>
-            <Button variant="primary" size="lg">
-              LG
-            </Button>
-            <Button variant="primary" shape="circle" aria-label="Add">
-              <IconPlus className="h-5 w-5" />
-            </Button>
-            <Button variant="primary" shape="square" aria-label="Add">
-              <IconPlus className="h-5 w-5" />
-            </Button>
-            <Button variant="secondary" shape="wide">
-              Wide
-            </Button>
-          </div>
-        </Panel>
-
-        <Panel className="space-y-4">
-          <h3 className="text-sm font-semibold uppercase tracking-wider text-ph-mutedtext">Ghost, link & states</h3>
-          <div className="flex flex-wrap items-center gap-4">
-            <Button variant="ghost">Tertiary</Button>
-            <Button variant="link">Text link button</Button>
-            <Button variant="primary" disabled>
-              Disabled
-            </Button>
-            <Button variant="primary" loading>Loading</Button>
-          </div>
-        </Panel>
-      </div>
-    </ShowcaseWrapper>
-  );
-}

package/src/components/sections/CalendarShowcase.tsx

@@ -1,35 +0,0 @@
-"use client";
-
-import { useState } from "react";
-import { Calendar, ComponentDocs, ShowcaseWrapper } from "@/components/ui";
-
-export default function CalendarShowcase() {
-  const [date, setDate] = useState<Date | undefined>(new Date());
-
-  const code = `import { Calendar } from "the-old-ui";
-
-const [date, setDate] = useState(new Date());
-
-<Calendar value={date} onChange={setDate} />`;
-
-  return (
-    <ShowcaseWrapper
-      title="Calendar"
-      description="Controlled date picker with theme-aware styling and navigation."
-      code={code}
-      filename="CalendarExample.tsx"
-      docs={
-        <ComponentDocs
-          rows={[
-            { name: "value", type: "Date | undefined", description: "Selected date." },
-            { name: "onChange", type: "(date?: Date) => void", description: "Called when a date is selected." },
-          ]}
-        />
-      }
-    >
-      <div className="ph-panel flex justify-center">
-        <Calendar value={date} onChange={setDate} />
-      </div>
-    </ShowcaseWrapper>
-  );
-}

package/src/components/sections/CardShowcase.tsx

@@ -1,159 +0,0 @@
-import { Badge, Button, Card, ComponentDocs, ShowcaseWrapper } from "@/components/ui";
-
-export default function CardShowcase() {
-  const code = `import { Badge, Button, Card } from "@xenide-io/the-old-ui-theme";
-
-<div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
-  <Card
-    title="Insight saved"
-    description="A quiet, static surface. Depth is reserved for interactive or elevated content."
-    actions={
-      <>
-        <Button variant="secondary" outline>
-          Discard
-        </Button>
-        <Button variant="primary">Open</Button>
-      </>
-    }
-  />
-
-  <Card
-    title="With visual"
-    description="Media sits flush to the card edge with a semantic divider."
-    media={<div className="flex h-40 items-center justify-center bg-gradient-to-br from-orange-400 via-ph-brand to-ph-blue text-lg font-bold text-white">Hero stripe</div>}
-    actions={
-      <Button variant="primary" size="sm">
-        View funnel
-      </Button>
-    }
-  />
-
-  <Card
-    title={
-      <>
-        Releases <Badge variant="brand">NEW</Badge>
-      </>
-    }
-    description="Dense header row with badge + actions on the trailing edge."
-    actions={
-      <>
-        <Button variant="secondary" size="sm">
-          Docs
-        </Button>
-        <Button variant="primary" size="sm">
-          Enable
-        </Button>
-      </>
-    }
-  />
-
-  <Card
-    variant="highlighted"
-    title={<span className="text-ph-brand">Highlighted</span>}
-    description="Use tinted fill + accent border instead of generic neon glass cards."
-    actions={<Button variant="primary" size="sm">Acknowledge</Button>}
-  />
-
-  <Card
-    variant="outlined"
-    title="Panel inset"
-    description="Grey trays on canvas — mirrors secondary surfaces in-app."
-    actions={<Button variant="primary" outline>Inspect</Button>}
-  />
-
-  <Card
-    interactive
-    title="Interactive surface"
-    description="Hover depth is opt-in for cards containing an action."
-    actions={<Button variant="tertiary">Review</Button>}
-  />
-</div>`;
-
-  return (
-    <ShowcaseWrapper
-      title="Cards"
-      description="Static by default, with explicit elevated, highlighted, and interactive treatments."
-      code={code}
-      filename="CardExample.tsx"
-      docs={
-        <ComponentDocs
-          rows={[
-            { name: "variant", type: "default | outlined | elevated | highlighted", defaultValue: "default", description: "Controls the default chrome without requiring classes." },
-            { name: "title", type: "ReactNode", description: "Optional header title." },
-            { name: "description", type: "ReactNode", description: "Optional supporting copy." },
-            { name: "actions", type: "ReactNode", description: "Button row rendered with card action spacing." },
-            { name: "media", type: "ReactNode", description: "Optional visual block rendered above the card body." },
-            { name: "interactive", type: "boolean", defaultValue: "false", description: "Adds hover and focus-within depth for a card containing an action." },
-            { name: "titleAs", type: "h2 | h3 | h4", defaultValue: "h3", description: "Selects the semantic heading level without changing the card style." },
-          ]}
-        />
-      }
-    >
-      <div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
-        <Card
-          title="Insight saved"
-          description="A quiet, static surface. Depth is reserved for interactive or elevated content."
-          actions={
-            <>
-              <Button variant="secondary" outline>
-                Discard
-              </Button>
-              <Button variant="primary">Open</Button>
-            </>
-          }
-        />
-
-        <Card
-          title="With visual"
-          description="Media sits flush to the card edge with a semantic divider."
-          media={<div className="flex h-40 items-center justify-center bg-gradient-to-br from-orange-400 via-ph-brand to-ph-blue text-lg font-bold text-white">Hero stripe</div>}
-          actions={
-            <Button variant="primary" size="sm">
-              View funnel
-            </Button>
-          }
-        />
-
-        <Card
-          title={
-            <>
-              Releases <Badge variant="brand">NEW</Badge>
-            </>
-          }
-          description="Dense header row with badge + actions on the trailing edge."
-          actions={
-            <>
-              <Button variant="secondary" size="sm">
-                Docs
-              </Button>
-              <Button variant="primary" size="sm">
-                Enable
-              </Button>
-            </>
-          }
-        />
-
-        <Card
-          variant="highlighted"
-          title={<span className="text-ph-brand">Highlighted</span>}
-          description="Use tinted fill + accent border instead of generic neon glass cards."
-          actions={<Button variant="primary" size="sm">Acknowledge</Button>}
-        />
-
-        <Card
-          variant="outlined"
-          title="Panel inset"
-          description="Grey trays on canvas — mirrors secondary surfaces in-app."
-          actions={<Button variant="primary" outline>Inspect</Button>}
-        />
-
-        <Card
-          interactive
-          title="Interactive surface"
-          description="Hover depth is opt-in for cards containing an action."
-          actions={<Button variant="tertiary">Review</Button>}
-        />
-      </div>
-    </ShowcaseWrapper>
-  );
-}

package/src/components/sections/CodeMockupShowcase.tsx

@@ -1,56 +0,0 @@
-import { IconQueryEditor } from "@/components/icons";
-import { ComponentDocs, ShowcaseWrapper, Terminal } from "@/components/ui";
-
-export default function CodeMockupShowcase() {
-  const code = `import { Terminal } from "the-old-ui";
-
-<Terminal
-  title="sandbox · posthog-wizard"
-  lines={[
-    { text: "❯ bun add posthog-js", color: "text-neutral-600" },
-    { text: "● added posthog-js@1...", color: "text-emerald-400" },
-    { text: "❯ POSTHOG_KEY=...", color: "text-neutral-600" },
-  ]}
-/>`;
-
-  return (
-    <ShowcaseWrapper
-      title="Terminal capture"
-      description="Terminal and replay shells for documentation, demos, and embedded developer flows."
-      code={code}
-      filename="TerminalExample.tsx"
-      docs={
-        <ComponentDocs
-          rows={[
-            { name: "title", type: "string", description: "Window title in the header." },
-            { name: "lines", type: "Array<{ text; color? }>", description: "Terminal lines to render." },
-            { name: "children", type: "ReactNode", description: "Custom content instead of lines." },
-          ]}
-        />
-      }
-    >
-      <div className="space-y-10">
-        <Terminal
-          title="sandbox · posthog-wizard"
-          lines={[
-            { text: "❯ bun add posthog-js", color: "text-neutral-600" },
-            { text: "● added posthog-js@1...", color: "text-emerald-400" },
-            { text: "❯ POSTHOG_KEY=...", color: "text-neutral-600" },
-          ]}
-        />
-
-        <div className="rounded-xl border border-ph-border shadow-ph-md">
-          <header className="relative flex items-center justify-center border-b border-ph-border px-10 py-3 text-[11px] font-semibold text-ph-mutedtext">
-            <span className="absolute left-5 top-4 h-px w-[88%] rounded-full bg-ph-border opacity-70" />
-            Replay preview
-          </header>
-          <div className="flex flex-col items-center gap-5 bg-ph-toolbar px-6 py-14 text-ph-subtle">
-            <IconQueryEditor className="h-14 w-14 opacity-50" />
-            <p className="text-center font-semibold text-ph-ink">Session snapshot shell</p>
-            <p className="max-w-xs text-center text-xs">Mirrors bordered frame around insight embeds rather than DaisyUI mocks.</p>
-          </div>
-        </div>
-      </div>
-    </ShowcaseWrapper>
-  );
-}

package/src/components/sections/ColorPalette.tsx

@@ -1,117 +0,0 @@
-import type { CSSProperties } from "react";
-import { ShowcaseWrapper } from "@/components/ui";
-
-const brandSurface: { label: string; token: string; style: CSSProperties; textClass: string }[] = [
-  { label: "Brand orange", token: "--ph-accent", style: { background: "var(--ph-accent)" }, textClass: "text-white" },
-  { label: "Brand blue", token: "--ph-blue", style: { background: "var(--ph-blue)" }, textClass: "text-white" },
-  { label: "Purple accent", token: "--ph-purple", style: { background: "var(--ph-purple)" }, textClass: "text-white" },
-  { label: "Canvas (3000-50)", token: "--ph-canvas", style: { background: "var(--ph-canvas)" }, textClass: "text-ph-ink ring-1 ring-inset ring-ph-border" },
-  { label: "Muted surface", token: "--ph-muted", style: { background: "var(--ph-muted)" }, textClass: "text-ph-ink ring-1 ring-inset ring-ph-border" },
-  { label: "White surface", token: "--ph-surface", style: { background: "var(--ph-surface)" }, textClass: "text-ph-ink ring-1 ring-inset ring-ph-border" },
-  { label: "Border", token: "--ph-border", style: { background: "var(--ph-border)" }, textClass: "text-ph-ink" },
-  { label: "Success", token: "--ph-success", style: { background: "var(--ph-success)" }, textClass: "text-white" },
-  { label: "Warning", token: "--ph-warning", style: { background: "var(--ph-warning)" }, textClass: "text-white" },
-  { label: "Danger", token: "--ph-danger", style: { background: "var(--ph-danger)" }, textClass: "text-white" },
-  { label: "Info", token: "--ph-info", style: { background: "var(--ph-info)" }, textClass: "text-white" },
-];
-
-const dataSeries = [1, 2, 3, 4, 5, 6, 7].map((n) => ({
-  label: `Data ${n}`,
-  token: `--ph-data-${n}`,
-  style: { background: `var(--ph-data-${n})` } as CSSProperties,
-  textClass: "text-white",
-}));
-
-const productRail = [
-  { label: "Session replay", token: "--ph-product-session-replay", style: { background: "var(--ph-product-session-replay)" } as CSSProperties },
-  { label: "Product analytics", token: "--ph-product-product-analytics", style: { background: "var(--ph-product-product-analytics)" } as CSSProperties },
-  { label: "Data pipeline", token: "--ph-product-data-pipeline", style: { background: "var(--ph-product-data-pipeline)" } as CSSProperties },
-  { label: "Feature flags", token: "--ph-product-feature-flags", style: { background: "var(--ph-product-feature-flags)" } as CSSProperties },
-  { label: "Experiments", token: "--ph-product-experiments", style: { background: "var(--ph-product-experiments)" } as CSSProperties },
-  { label: "Data warehouse", token: "--ph-product-data-warehouse", style: { background: "var(--ph-product-data-warehouse)" } as CSSProperties },
-  { label: "Surveys", token: "--ph-product-surveys", style: { background: "var(--ph-product-surveys)" } as CSSProperties },
-].map((row) => ({ ...row, textClass: "text-white" }));
-
-function SwatchGrid({
-  title,
-  description,
-  items,
-}: {
-  title: string;
-  description: string;
-  items: { label: string; token: string; style: CSSProperties; textClass: string }[];
-}) {
-  return (
-    <div>
-      <h3 className="mb-1 text-xs font-semibold uppercase tracking-wider text-ph-mutedtext">{title}</h3>
-      <p className="mb-3 text-sm text-ph-subtle">{description}</p>
-      <div className="grid grid-cols-2 gap-3 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6">
-        {items.map((c) => (
-          <div
-            key={c.token}
-            className={`rounded-[var(--ph-radius-app)] p-5 ${c.textClass}`}
-            style={{
-              ...c.style,
-              boxShadow: "var(--ph-shadow-elevation-3000)",
-            }}
-          >
-            <p className="text-sm font-semibold">{c.label}</p>
-            <p className="mt-1 font-mono text-[11px] opacity-90">{c.token}</p>
-          </div>
-        ))}
-      </div>
-    </div>
-  );
-}
-
-export default function ColorPalette() {
-  const code = `/* CSS variables update with the active theme */
-
-// Brand & surfaces
-background: var(--ph-accent);     // Brand orange
-background: var(--ph-canvas);     // Canvas
-background: var(--ph-surface);    // White surface
-border-color: var(--ph-border);   // Hairline borders
-
-// Semantic status
-color: var(--ph-success);         // Success green
-color: var(--ph-danger);          // Danger red
-color: var(--ph-warning);         // Warning amber
-color: var(--ph-info);            // Info blue
-
-// Data series (charts)
-background: var(--ph-data-1);     // Primary
-background: var(--ph-data-2);     // Secondary
-// ... up to ph-data-7
-
-// Product rail
-background: var(--ph-product-session-replay);
-background: var(--ph-product-product-analytics);`;
-
-  return (
-    <ShowcaseWrapper
-      title="Colour tokens"
-      description="Tokens update with the Theme select in the header — surfaces, accents, chart series, and product rail colours all swap together."
-      code={code}
-      filename="Tokens.css"
-    >
-      <div className="space-y-10">
-        <SwatchGrid
-          title="Brand & surfaces"
-          description="Core UI chrome and semantic status hues."
-          items={brandSurface}
-        />
-        <SwatchGrid
-          title="Insight data series"
-          description="Default trend / breakdown palette."
-          items={dataSeries}
-        />
-        <SwatchGrid
-          title="Product rail"
-          description="Saturated nav / marketing tiles."
-          items={productRail}
-        />
-      </div>
-    </ShowcaseWrapper>
-  );
-}