@ponti-studios/ui 1.7.0 → 1.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ponti-studios/ui",
-  "version": "1.7.0",
+  "version": "1.8.0",
   "private": false,
   "description": "Shared UI component library for Ponti Studios",
   "license": "MIT",

package/src/styles/index.css

@@ -54,20 +54,18 @@
   --color-foreground: var(--text-primary);
   --color-card: var(--card);
   --color-card-foreground: var(--text-primary);
-  --color-popover: var(--background);
+  --color-popover: var(--popover);
   --color-popover-foreground: var(--text-primary);
   --color-primary: var(--primary);
   --color-primary-foreground: var(--primary-foreground);
-  --color-secondary: var(--card);
+  --color-secondary: var(--secondary);
   --color-secondary-foreground: var(--text-primary);
   --color-muted: var(--muted);
   --color-muted-foreground: var(--text-secondary);
-  --color-accent: var(--primary);
-  --color-accent-foreground: var(--primary-foreground);
-  /* Distinct from --color-accent: that pairs with white/primary-foreground
-   * for solid fills (badges, active states). This pairs with the page
-   * background for standalone text/icons/borders (inline links, upload
-   * affordances) and must differ per theme to stay AA-compliant. */
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  /* Distinct from --color-accent: this pairs with the page background for
+   * standalone text/icons/borders (inline links, upload affordances). */
   --color-accent-text: var(--text-accent);
   --color-destructive: var(--destructive);
   --color-destructive-foreground: var(--destructive-foreground);
@@ -78,8 +76,10 @@
   --color-destructive-text: var(--text-destructive);
   --color-success: var(--success);
   --color-success-foreground: var(--success-foreground);
+  --color-success-text: var(--text-success);
   --color-warning: var(--warning);
   --color-warning-foreground: var(--warning-foreground);
+  --color-warning-text: var(--text-warning);
   --color-border: var(--border-default);
   --color-input: var(--border-default);
   --color-ring: var(--focus-ring);

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

@@ -2,40 +2,188 @@ import type { Meta, StoryObj } from "@storybook/react-vite";
 
 import { Button } from "../../components/primitives/button";
 import { colors } from "./css-vars";
-import { colorTokenNames } from "./index";
+import type { ColorToken } from "./index";
 
 const meta: Meta = { title: "Foundations/Colors", parameters: { layout: "fullscreen" } };
 export default meta;
 type Story = StoryObj<typeof meta>;
 
+type Role = {
+  token: ColorToken;
+  purpose: string;
+  foreground?: ColorToken;
+};
+
+const surfaces: Role[] = [
+  { token: "background", purpose: "The page and app shell surface." },
+  { token: "card", purpose: "Content containers and grouped information." },
+  { token: "popover", purpose: "Dropdowns, dialogs, and floating panels." },
+  { token: "muted", purpose: "Quiet, disabled, and loading surfaces." },
+  { token: "secondary", purpose: "Secondary actions and selectable chips." },
+  {
+    token: "accent",
+    purpose: "Tinted emphasis and hover surfaces.",
+    foreground: "accent-foreground",
+  },
+];
+
+const text: Role[] = [
+  { token: "text-primary", purpose: "Primary reading text." },
+  { token: "text-secondary", purpose: "Supporting labels and descriptions." },
+  { token: "tertiary", purpose: "Metadata, timestamps, and placeholders." },
+  { token: "text-accent", purpose: "Standalone links and accent affordances." },
+  { token: "text-success", purpose: "Standalone positive status text and icons." },
+  { token: "text-warning", purpose: "Standalone cautionary status text and icons." },
+  { token: "text-destructive", purpose: "Standalone error and destructive text." },
+];
+
+const actions: Role[] = [
+  {
+    token: "primary",
+    purpose: "The strongest action on a screen.",
+    foreground: "primary-foreground",
+  },
+  {
+    token: "destructive",
+    purpose: "Irreversible or dangerous actions.",
+    foreground: "destructive-foreground",
+  },
+  {
+    token: "success",
+    purpose: "Positive indicators and confirmed states.",
+    foreground: "success-foreground",
+  },
+  {
+    token: "warning",
+    purpose: "Caution indicators and attention states.",
+    foreground: "warning-foreground",
+  },
+];
+
+const system: Role[] = [
+  { token: "border-default", purpose: "Default borders, inputs, and dividers." },
+  { token: "focus-ring", purpose: "Keyboard focus indication." },
+  { token: "overlay-scrim", purpose: "Backdrop behind modal surfaces." },
+];
+
+const charts: Role[] = [
+  { token: "chart-1", purpose: "Categorical data series one." },
+  { token: "chart-2", purpose: "Categorical data series two." },
+  { token: "chart-3", purpose: "Categorical data series three." },
+  { token: "chart-4", purpose: "Categorical data series four." },
+  { token: "chart-5", purpose: "Categorical data series five." },
+  { token: "chart-positive", purpose: "Positive trend in a visualization." },
+  { token: "chart-negative", purpose: "Negative trend in a visualization." },
+  { token: "chart-neutral", purpose: "Neutral or baseline trend." },
+];
+
+function RoleCard({ token, purpose, foreground }: Role) {
+  const isText = token.startsWith("text-") || token === "tertiary";
+  const isSurface = surfaces.some((role) => role.token === token);
+  const swatchOnly = !isText && !isSurface && !foreground;
+  const background = isText ? "background" : token;
+  const contentColor = isText ? token : (foreground ?? "text-primary");
+
+  return (
+    <article className="border-border overflow-hidden rounded-md border bg-card">
+      <div
+        className="flex min-h-24 items-end p-3"
+        style={{
+          backgroundColor: colors[swatchOnly ? "card" : background],
+          color: colors[swatchOnly ? "text-primary" : contentColor],
+        }}
+      >
+        {swatchOnly ? (
+          <span
+            aria-hidden="true"
+            className="h-full min-h-16 w-full rounded-sm"
+            style={{ backgroundColor: colors[token] }}
+          />
+        ) : (
+          <span className="font-mono text-xs">{token}</span>
+        )}
+      </div>
+      <div className="grid gap-1 p-3">
+        <code className="text-sm font-medium">--{token}</code>
+        <p className="text-muted-foreground text-sm">{purpose}</p>
+        {foreground && (
+          <p className="text-muted-foreground text-xs">Paired content: --{foreground}</p>
+        )}
+      </div>
+    </article>
+  );
+}
+
+function RoleSection({
+  title,
+  description,
+  roles,
+}: {
+  title: string;
+  description: string;
+  roles: Role[];
+}) {
+  return (
+    <section className="grid gap-3">
+      <div className="grid gap-1">
+        <h2 className="text-lg font-semibold">{title}</h2>
+        <p className="text-muted-foreground text-sm">{description}</p>
+      </div>
+      <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
+        {roles.map((role) => (
+          <RoleCard key={role.token} {...role} />
+        ))}
+      </div>
+    </section>
+  );
+}
+
 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">
-        <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.
+    <main className="bg-background text-foreground grid min-h-screen gap-10 p-6 md:p-10">
+      <header className="grid max-w-3xl gap-2">
+        <p className="text-accent-text text-xs font-medium uppercase tracking-widest">
+          Foundations
         </p>
+        <h1 className="text-2xl font-semibold">Color roles</h1>
+        <p className="text-muted-foreground text-sm">
+          Every color has a job. These roles resolve from the operating system’s light or dark
+          appearance and are the only colors components should consume.
+        </p>
+        <div className="flex flex-wrap gap-2 pt-2">
+          <Button>Primary action</Button>
+          <Button variant="secondary">Secondary action</Button>
+          <Button variant="outline">Outline action</Button>
+          <Button variant="destructive">Delete item</Button>
+        </div>
       </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="destructive">Delete item</Button>
-      </div>
-      <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: colors[token] }}
-          >
-            <span className="bg-background text-foreground w-fit rounded px-1 font-mono text-xs">
-              {token}
-            </span>
-          </div>
-        ))}
+
+      <div className="grid gap-10">
+        <RoleSection
+          title="Surfaces"
+          description="Backgrounds establish hierarchy. Use the lightest appropriate surface and let spacing do the rest."
+          roles={surfaces}
+        />
+        <RoleSection
+          title="Text"
+          description="Text roles describe hierarchy or state. Use a text role when content sits directly on a surface."
+          roles={text}
+        />
+        <RoleSection
+          title="Actions and status"
+          description="Fill roles communicate action or state and always pair with their matching foreground."
+          roles={actions}
+        />
+        <RoleSection
+          title="System"
+          description="Structural colors support boundaries, focus, and modal layering without competing with content."
+          roles={system}
+        />
+        <RoleSection
+          title="Charts"
+          description="Chart roles are for data visualization only. They do not communicate interaction or severity in product UI."
+          roles={charts}
+        />
       </div>
     </main>
   ),

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

@@ -5,18 +5,23 @@
 export default {
   background: "#171714",
   card: "#1d1d19",
+  secondary: "#2b2b25",
   popover: "#22221e",
   muted: "#1d1d19",
   "text-primary": "#ffffff",
   "text-secondary": "#aaa79f",
   tertiary: "#d0ccc2",
   primary: "#178277",
+  accent: "#21433f",
   destructive: "#ce2c31",
   success: "#30a46c",
   warning: "#ffc53d",
+  "text-success": "#55d89a",
+  "text-warning": "#ffd86a",
   "success-foreground": "#15110f",
   "warning-foreground": "#15110f",
   "primary-foreground": "#ffffff",
+  "accent-foreground": "#ffffff",
   "destructive-foreground": "#ffffff",
   "text-destructive": "#ff9592",
   "text-accent": "#1b988b",

package/src/styles/tokens/generated/dark.css

@@ -5,18 +5,23 @@
 :root {
   --background: #171714;
   --card: #1d1d19;
+  --secondary: #2b2b25;
   --popover: #22221e;
   --muted: #1d1d19;
   --text-primary: #ffffff;
   --text-secondary: #aaa79f;
   --tertiary: #d0ccc2;
   --primary: #178277;
+  --accent: #21433f;
   --destructive: #ce2c31;
   --success: #30a46c;
   --warning: #ffc53d;
+  --text-success: #55d89a;
+  --text-warning: #ffd86a;
   --success-foreground: #15110f;
   --warning-foreground: #15110f;
   --primary-foreground: #ffffff;
+  --accent-foreground: #ffffff;
   --destructive-foreground: #ffffff;
   --text-destructive: #ff9592;
   --text-accent: #1b988b;

package/src/styles/tokens/generated/light.colors.generated.ts

@@ -5,18 +5,23 @@
 export default {
   background: "#f4f0e8",
   card: "#fbf8f2",
+  secondary: "#e8e4da",
   popover: "#f6f2ea",
   muted: "#efe9dc",
   "text-primary": "#11110f",
   "text-secondary": "#6a6352",
   tertiary: "#6d6659",
   primary: "#107066",
+  accent: "#d7efeb",
   destructive: "#ce2c31",
   success: "#30a46c",
   warning: "#ffc53d",
+  "text-success": "#1f7a50",
+  "text-warning": "#8a5a00",
   "success-foreground": "#15110f",
   "warning-foreground": "#15110f",
   "primary-foreground": "#ffffff",
+  "accent-foreground": "#11110f",
   "destructive-foreground": "#ffffff",
   "text-destructive": "#c82c31",
   "text-accent": "#107066",

package/src/styles/tokens/generated/light.css

@@ -5,18 +5,23 @@
 :root {
   --background: #f4f0e8;
   --card: #fbf8f2;
+  --secondary: #e8e4da;
   --popover: #f6f2ea;
   --muted: #efe9dc;
   --text-primary: #11110f;
   --text-secondary: #6a6352;
   --tertiary: #6d6659;
   --primary: #107066;
+  --accent: #d7efeb;
   --destructive: #ce2c31;
   --success: #30a46c;
   --warning: #ffc53d;
+  --text-success: #1f7a50;
+  --text-warning: #8a5a00;
   --success-foreground: #15110f;
   --warning-foreground: #15110f;
   --primary-foreground: #ffffff;
+  --accent-foreground: #11110f;
   --destructive-foreground: #ffffff;
   --text-destructive: #c82c31;
   --text-accent: #107066;

package/src/styles/tokens/scripts/check-source.mjs

@@ -30,6 +30,13 @@ for (const file of sourceFiles) {
   const source = readFileSync(file, "utf8");
   for (const check of checks) {
     if (check.name === "legacy semantic utility classes" && file.endsWith(".css")) continue;
+    // The Colors foundation story intentionally lists token names as data;
+    // those strings are not Tailwind utility classes consumed by components.
+    if (
+      check.name === "legacy semantic utility classes" &&
+      file.endsWith("color-systems.stories.tsx")
+    )
+      continue;
     if (check.pattern.test(source))
       failures.push(`${check.name}: ${relative(sourceDirectory, file)}`);
   }

package/src/styles/tokens/source/dark.tokens.json

@@ -10,6 +10,10 @@
     "$type": "color",
     "$value": "rgb(29, 29, 25)"
   },
+  "secondary": {
+    "$type": "color",
+    "$value": "rgb(43, 43, 37)"
+  },
   "popover": {
     "$type": "color",
     "$value": "rgb(34, 34, 30)"
@@ -34,6 +38,10 @@
     "$type": "color",
     "$value": "rgb(23, 130, 119)"
   },
+  "accent": {
+    "$type": "color",
+    "$value": "rgb(33, 67, 63)"
+  },
   "destructive": {
     "$type": "color",
     "$value": "rgb(206, 44, 49)"
@@ -46,6 +54,14 @@
     "$type": "color",
     "$value": "rgb(255, 197, 61)"
   },
+  "text-success": {
+    "$type": "color",
+    "$value": "rgb(85, 216, 154)"
+  },
+  "text-warning": {
+    "$type": "color",
+    "$value": "rgb(255, 216, 106)"
+  },
   "success-foreground": {
     "$type": "color",
     "$value": "rgb(21, 17, 15)"
@@ -58,6 +74,10 @@
     "$type": "color",
     "$value": "rgb(255, 255, 255)"
   },
+  "accent-foreground": {
+    "$type": "color",
+    "$value": "rgb(255, 255, 255)"
+  },
   "destructive-foreground": {
     "$type": "color",
     "$value": "rgb(255, 255, 255)"

package/src/styles/tokens/source/light.tokens.json

@@ -10,6 +10,10 @@
     "$type": "color",
     "$value": "rgb(251, 248, 242)"
   },
+  "secondary": {
+    "$type": "color",
+    "$value": "rgb(232, 228, 218)"
+  },
   "popover": {
     "$type": "color",
     "$value": "rgb(246, 242, 234)"
@@ -34,6 +38,10 @@
     "$type": "color",
     "$value": "rgb(16, 112, 102)"
   },
+  "accent": {
+    "$type": "color",
+    "$value": "rgb(215, 239, 235)"
+  },
   "destructive": {
     "$type": "color",
     "$value": "rgb(206, 44, 49)"
@@ -46,6 +54,14 @@
     "$type": "color",
     "$value": "rgb(255, 197, 61)"
   },
+  "text-success": {
+    "$type": "color",
+    "$value": "rgb(31, 122, 80)"
+  },
+  "text-warning": {
+    "$type": "color",
+    "$value": "rgb(138, 90, 0)"
+  },
   "success-foreground": {
     "$type": "color",
     "$value": "rgb(21, 17, 15)"
@@ -58,6 +74,10 @@
     "$type": "color",
     "$value": "rgb(255, 255, 255)"
   },
+  "accent-foreground": {
+    "$type": "color",
+    "$value": "rgb(17, 17, 15)"
+  },
   "destructive-foreground": {
     "$type": "color",
     "$value": "rgb(255, 255, 255)"