@ponti-studios/ui 1.6.0 → 1.8.0

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

@@ -3,25 +3,33 @@
  */
 
 :root {
-  --background: #fcfcfd;
-  --card: #f9f9fb;
-  --popover: #f0f0f3;
-  --muted: #f9f9fb;
-  --text-primary: #1c2024;
-  --text-secondary: #60646c;
-  --tertiary: #80838d;
-  --primary: #3e63dd;
+  --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;
-  --border-default: #cdced6;
-  --focus-ring: #3e63dd;
+  --text-accent: #107066;
+  --border-default: #8f8576;
+  --focus-ring: #107066;
   --chart-1: #3e63dd;
   --chart-2: #6e56cf;
-  --chart-3: #12a594;
+  --chart-3: #c73178;
   --chart-4: #f76b15;
   --chart-5: #8b8d98;
   --chart-positive: #1f7a50;

package/src/styles/tokens/index.ts

@@ -1,7 +1,6 @@
 import darkTokens from "./generated/dark.colors.generated";
 import foundations from "./generated/foundations.generated";
 import lightTokens from "./generated/light.colors.generated";
-import nativeTokens from "./generated/native.generated";
 
 const toPixels = (value: string) => {
   if (value.endsWith("rem")) return Number.parseFloat(value) * 16;
@@ -39,7 +38,6 @@ export const fontFamilies = Object.fromEntries(
   Object.entries(foundations.font).map(([key, value]) => [key, value.join(", ")]),
 ) as Record<keyof typeof foundations.font, string>;
 
-export const fontFamiliesNative = { sans: "System", serif: "serif", mono: "monospace" } as const;
 export const textSizes = Object.fromEntries(
   Object.entries(foundations.text).map(([key, value]) => [key, toPixels(value)]),
 ) as Record<keyof typeof foundations.text, number>;
@@ -63,7 +61,6 @@ export const transitionDurations = Object.fromEntries(
   Object.entries(foundations.duration).map(([key, value]) => [key, toMilliseconds(value)]),
 ) as Record<keyof typeof foundations.duration, number>;
 export const animations = foundations.animate;
-export const motion = nativeTokens.motion;
 
 export type RadiusToken = keyof typeof radii;
 export type TextSizeToken = keyof typeof textSizes;

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

@@ -4,35 +4,43 @@
   },
   "background": {
     "$type": "color",
-    "$value": "rgb(17, 17, 19)"
+    "$value": "rgb(23, 23, 20)"
   },
   "card": {
     "$type": "color",
-    "$value": "rgb(24, 25, 27)"
+    "$value": "rgb(29, 29, 25)"
+  },
+  "secondary": {
+    "$type": "color",
+    "$value": "rgb(43, 43, 37)"
   },
   "popover": {
     "$type": "color",
-    "$value": "rgb(33, 34, 37)"
+    "$value": "rgb(34, 34, 30)"
   },
   "muted": {
     "$type": "color",
-    "$value": "rgb(24, 25, 27)"
+    "$value": "rgb(29, 29, 25)"
   },
   "text-primary": {
     "$type": "color",
-    "$value": "rgb(237, 238, 240)"
+    "$value": "rgb(255, 255, 255)"
   },
   "text-secondary": {
     "$type": "color",
-    "$value": "rgb(176, 180, 186)"
+    "$value": "rgb(170, 167, 159)"
   },
   "tertiary": {
     "$type": "color",
-    "$value": "rgb(119, 123, 132)"
+    "$value": "rgb(208, 204, 194)"
   },
   "primary": {
     "$type": "color",
-    "$value": "rgb(62, 99, 221)"
+    "$value": "rgb(23, 130, 119)"
+  },
+  "accent": {
+    "$type": "color",
+    "$value": "rgb(33, 67, 63)"
   },
   "destructive": {
     "$type": "color",
@@ -46,10 +54,30 @@
     "$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)"
+  },
+  "warning-foreground": {
+    "$type": "color",
+    "$value": "rgb(21, 17, 15)"
+  },
   "primary-foreground": {
     "$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)"
@@ -58,13 +86,17 @@
     "$type": "color",
     "$value": "rgb(255, 149, 146)"
   },
+  "text-accent": {
+    "$type": "color",
+    "$value": "rgb(27, 152, 139)"
+  },
   "border-default": {
     "$type": "color",
-    "$value": "rgb(67, 72, 78)"
+    "$value": "rgb(107, 107, 102)"
   },
   "focus-ring": {
     "$type": "color",
-    "$value": "rgb(62, 99, 221)"
+    "$value": "rgb(27, 152, 139)"
   },
   "chart-1": {
     "$type": "color",
@@ -76,7 +108,7 @@
   },
   "chart-3": {
     "$type": "color",
-    "$value": "rgb(18, 165, 148)"
+    "$value": "rgb(199, 49, 120)"
   },
   "chart-4": {
     "$type": "color",
@@ -96,7 +128,7 @@
   },
   "chart-neutral": {
     "$type": "color",
-    "$value": "rgb(90, 97, 105)"
+    "$value": "rgb(135, 141, 148)"
   },
   "overlay-scrim": {
     "$type": "color",

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

@@ -4,35 +4,43 @@
   },
   "background": {
     "$type": "color",
-    "$value": "rgb(252, 252, 253)"
+    "$value": "rgb(244, 240, 232)"
   },
   "card": {
     "$type": "color",
-    "$value": "rgb(249, 249, 251)"
+    "$value": "rgb(251, 248, 242)"
+  },
+  "secondary": {
+    "$type": "color",
+    "$value": "rgb(232, 228, 218)"
   },
   "popover": {
     "$type": "color",
-    "$value": "rgb(240, 240, 243)"
+    "$value": "rgb(246, 242, 234)"
   },
   "muted": {
     "$type": "color",
-    "$value": "rgb(249, 249, 251)"
+    "$value": "rgb(239, 233, 220)"
   },
   "text-primary": {
     "$type": "color",
-    "$value": "rgb(28, 32, 36)"
+    "$value": "rgb(17, 17, 15)"
   },
   "text-secondary": {
     "$type": "color",
-    "$value": "rgb(96, 100, 108)"
+    "$value": "rgb(106, 99, 82)"
   },
   "tertiary": {
     "$type": "color",
-    "$value": "rgb(128, 131, 141)"
+    "$value": "rgb(109, 102, 89)"
   },
   "primary": {
     "$type": "color",
-    "$value": "rgb(62, 99, 221)"
+    "$value": "rgb(16, 112, 102)"
+  },
+  "accent": {
+    "$type": "color",
+    "$value": "rgb(215, 239, 235)"
   },
   "destructive": {
     "$type": "color",
@@ -46,10 +54,30 @@
     "$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)"
+  },
+  "warning-foreground": {
+    "$type": "color",
+    "$value": "rgb(21, 17, 15)"
+  },
   "primary-foreground": {
     "$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)"
@@ -58,13 +86,17 @@
     "$type": "color",
     "$value": "rgb(200, 44, 49)"
   },
+  "text-accent": {
+    "$type": "color",
+    "$value": "rgb(16, 112, 102)"
+  },
   "border-default": {
     "$type": "color",
-    "$value": "rgb(205, 206, 214)"
+    "$value": "rgb(143, 133, 118)"
   },
   "focus-ring": {
     "$type": "color",
-    "$value": "rgb(62, 99, 221)"
+    "$value": "rgb(16, 112, 102)"
   },
   "chart-1": {
     "$type": "color",
@@ -76,7 +108,7 @@
   },
   "chart-3": {
     "$type": "color",
-    "$value": "rgb(18, 165, 148)"
+    "$value": "rgb(199, 49, 120)"
   },
   "chart-4": {
     "$type": "color",

package/src/styles/tokens/typography.stories.tsx

@@ -0,0 +1,157 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+
+import { fontFamilies, fontWeights, textLineHeights, textSizes, tracking } from "./index";
+
+const meta: Meta = { title: "Foundations/Typography", parameters: { layout: "fullscreen" } };
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const sizeTokens = Object.keys(textSizes) as Array<keyof typeof textSizes>;
+const weightTokens = Object.keys(fontWeights) as Array<keyof typeof fontWeights>;
+const trackingTokens = Object.keys(tracking) as Array<keyof typeof tracking>;
+const familyTokens = Object.keys(fontFamilies) as Array<keyof typeof fontFamilies>;
+
+export const TypeScale: Story = {
+  render: () => (
+    <main className="bg-background text-foreground grid min-h-screen gap-10 p-6 md:p-10">
+      <header className="grid gap-2">
+        <h1 className="text-2xl font-semibold">Typography</h1>
+        <p className="text-muted-foreground max-w-prose text-sm">
+          Font sizes, weights, tracking, and families as defined by the shared design tokens (
+          <code className="font-mono">src/styles/tokens</code>).
+        </p>
+      </header>
+
+      <section className="grid gap-4">
+        <h2 className="text-muted-foreground text-xs font-medium tracking-wider uppercase">
+          Type scale
+        </h2>
+        <div className="border-border divide-border grid divide-y rounded-md border">
+          {sizeTokens.map((token) => (
+            <div key={token} className="grid grid-cols-[6rem_5rem_1fr] items-baseline gap-4 p-4">
+              <span className="text-muted-foreground font-mono text-xs">text-{token}</span>
+              <span className="text-muted-foreground font-mono text-xs tabular-nums">
+                {textSizes[token]}px / {textLineHeights[token]?.toFixed(2)}
+              </span>
+              <span
+                className="truncate"
+                style={{ fontSize: textSizes[token], lineHeight: textLineHeights[token] }}
+              >
+                The quick brown fox jumps
+              </span>
+            </div>
+          ))}
+        </div>
+      </section>
+
+      <section className="grid gap-4">
+        <h2 className="text-muted-foreground text-xs font-medium tracking-wider uppercase">
+          Font weights
+        </h2>
+        <div className="border-border divide-border grid divide-y rounded-md border">
+          {weightTokens.map((token) => (
+            <div key={token} className="grid grid-cols-[8rem_1fr] items-baseline gap-4 p-4">
+              <span className="text-muted-foreground font-mono text-xs">
+                {token} / {fontWeights[token]}
+              </span>
+              <span className="text-lg" style={{ fontWeight: fontWeights[token] }}>
+                The quick brown fox jumps over the lazy dog
+              </span>
+            </div>
+          ))}
+        </div>
+      </section>
+
+      <section className="grid gap-4">
+        <h2 className="text-muted-foreground text-xs font-medium tracking-wider uppercase">
+          Tracking
+        </h2>
+        <div className="border-border divide-border grid divide-y rounded-md border">
+          {trackingTokens.map((token) => (
+            <div key={token} className="grid grid-cols-[8rem_1fr] items-baseline gap-4 p-4">
+              <span className="text-muted-foreground font-mono text-xs">
+                {token} / {tracking[token]}
+              </span>
+              <span className="text-lg" style={{ letterSpacing: tracking[token] }}>
+                The quick brown fox jumps over the lazy dog
+              </span>
+            </div>
+          ))}
+        </div>
+      </section>
+
+      <section className="grid gap-4">
+        <h2 className="text-muted-foreground text-xs font-medium tracking-wider uppercase">
+          Font families
+        </h2>
+        <div className="border-border divide-border grid divide-y rounded-md border">
+          {familyTokens.map((token) => (
+            <div key={token} className="grid gap-2 p-4">
+              <span className="text-muted-foreground font-mono text-xs">--font-{token}</span>
+              <span className="text-2xl" style={{ fontFamily: fontFamilies[token] }}>
+                The quick brown fox jumps over the lazy dog. 0123456789
+              </span>
+            </div>
+          ))}
+        </div>
+      </section>
+    </main>
+  ),
+};
+
+const headingSpecimens = [
+  { tag: "h1" as const, className: "text-4xl" },
+  { tag: "h2" as const, className: "text-3xl" },
+  { tag: "h3" as const, className: "text-2xl" },
+  { tag: "h4" as const, className: "text-xl" },
+  { tag: "h5" as const, className: "text-lg" },
+  { tag: "h6" as const, className: "text-base" },
+];
+
+export const Headings: Story = {
+  render: () => (
+    <main className="bg-background text-foreground grid min-h-screen gap-10 p-6 md:p-10">
+      <header className="grid gap-2">
+        <h1 className="text-2xl font-semibold">Headings</h1>
+        <p className="text-muted-foreground max-w-prose text-sm">
+          `h1`–`h6` only carry font-family, weight, and tracking from the base layer — size is unset
+          by tag, so components pair a heading element with an explicit{" "}
+          <code className="font-mono">text-*</code> utility. The sizes below match this
+          codebase&apos;s own usage, not an enforced per-level scale.
+        </p>
+      </header>
+
+      <section className="grid gap-4">
+        <h2 className="text-muted-foreground text-xs font-medium tracking-wider uppercase">
+          Display utilities
+        </h2>
+        <div className="border-border divide-border grid divide-y rounded-md border">
+          <div className="grid gap-2 p-4">
+            <span className="text-muted-foreground font-mono text-xs">display-1</span>
+            <p className="display-1">Display one</p>
+          </div>
+          <div className="grid gap-2 p-4">
+            <span className="text-muted-foreground font-mono text-xs">display-2</span>
+            <p className="display-2">Display two</p>
+          </div>
+        </div>
+      </section>
+
+      <section className="grid gap-4">
+        <h2 className="text-muted-foreground text-xs font-medium tracking-wider uppercase">
+          Semantic headings
+        </h2>
+        <div className="border-border divide-border grid divide-y rounded-md border">
+          {headingSpecimens.map(({ tag: Tag, className }) => (
+            <div key={Tag} className="grid grid-cols-[6rem_1fr] items-baseline gap-4 p-4">
+              <span className="text-muted-foreground font-mono text-xs">
+                {Tag} / {className}
+              </span>
+              <Tag className={className}>The quick brown fox jumps over the lazy dog</Tag>
+            </div>
+          ))}
+        </div>
+      </section>
+    </main>
+  ),
+};

package/src/components/feedback/file-upload-status.stories.tsx

@@ -1,57 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-
-import { FileUploadStatus } from "./file-upload-status";
-
-const meta = {
-  title: "Feedback/FileUploadStatus",
-  component: FileUploadStatus,
-  tags: ["autodocs"],
-} satisfies Meta<typeof FileUploadStatus>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Uploading: Story = {
-  render: () => (
-    <div className="w-80">
-      <FileUploadStatus uploadStatus={{ status: "uploading", stats: { progress: 42 } }} />
-    </div>
-  ),
-};
-
-export const Queued: Story = {
-  render: () => (
-    <div className="w-80">
-      <FileUploadStatus uploadStatus={{ status: "queued" }} />
-    </div>
-  ),
-};
-
-export const Done: Story = {
-  render: () => (
-    <div className="w-80">
-      <FileUploadStatus
-        uploadStatus={{
-          status: "done",
-          stats: {
-            processingTime: 4200,
-            total: 128,
-            created: 90,
-            updated: 30,
-            skipped: 8,
-          },
-        }}
-      />
-    </div>
-  ),
-};
-
-export const Error: Story = {
-  render: () => (
-    <div className="w-80">
-      <FileUploadStatus
-        uploadStatus={{ status: "error", error: "Could not parse the CSV file." }}
-      />
-    </div>
-  ),
-};