@ponti-studios/ui 1.8.0 → 2.0.0

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

@@ -3,37 +3,37 @@
  */
 
 :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;
+  --background: #ffffff;
+  --card: #ffffff;
+  --secondary: #f5f5f5;
+  --popover: #ffffff;
+  --muted: #fafafa;
+  --text-primary: #111111;
+  --text-secondary: #6b6b6b;
+  --tertiary: #6b6b6b;
+  --primary: #171717;
+  --accent: #eff6ff;
+  --destructive: #dc2626;
+  --success: #16a34a;
+  --warning: #d97706;
+  --text-success: #15803d;
+  --text-warning: #92400e;
+  --success-foreground: #0a0a0a;
+  --warning-foreground: #0a0a0a;
   --primary-foreground: #ffffff;
-  --accent-foreground: #11110f;
+  --accent-foreground: #1d4ed8;
   --destructive-foreground: #ffffff;
-  --text-destructive: #c82c31;
-  --text-accent: #107066;
-  --border-default: #8f8576;
-  --focus-ring: #107066;
-  --chart-1: #3e63dd;
-  --chart-2: #6e56cf;
-  --chart-3: #c73178;
-  --chart-4: #f76b15;
-  --chart-5: #8b8d98;
-  --chart-positive: #1f7a50;
-  --chart-negative: #be2e33;
-  --chart-neutral: #626a73;
+  --text-destructive: #b91c1c;
+  --text-accent: #2563eb;
+  --border-default: #e5e5e5;
+  --focus-ring: #2563eb;
+  --chart-1: #2563eb;
+  --chart-2: #111111;
+  --chart-3: #737373;
+  --chart-4: #93c5fd;
+  --chart-5: #d4d4d8;
+  --chart-positive: #15803d;
+  --chart-negative: #dc2626;
+  --chart-neutral: #737373;
   --overlay-scrim: #000000;
 }

package/src/styles/tokens/index.ts

@@ -10,12 +10,12 @@ const toPixels = (value: string) => {
 
 const toMilliseconds = (value: string) => Number.parseFloat(value);
 const toBezier = (value: number[]) => `cubic-bezier(${value.join(", ")})`;
-type NormalizedSpacingKey<Key extends string> = Key extends `${infer Whole}-${infer Fraction}`
-  ? `${Whole}.${Fraction}`
-  : Key;
-export type SpacingToken = NormalizedSpacingKey<
-  keyof (typeof foundations)["spacing-scale"] & string
->;
+type NormalizedSpacingKey<Key> = Key extends number
+  ? `${Key}`
+  : Key extends `${infer Whole}-${infer Fraction}`
+    ? `${Whole}.${Fraction}`
+    : Key;
+export type SpacingToken = NormalizedSpacingKey<keyof (typeof foundations)["spacing-scale"]>;
 
 export const colorTokenNames = Object.keys(lightTokens) as Array<keyof typeof lightTokens>;
 export type ColorToken = keyof typeof lightTokens;

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

@@ -30,13 +30,16 @@ 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")
-    )
+    // Native styles address semantic color tokens through bracket notation;
+    // these are token lookups, not the deprecated utility classes.
+    if (check.name === "legacy semantic utility classes") {
+      let tokenSource = source.replace(/\[\s*["'](?:bg-canvas|border-default)["']\s*\]/g, "__semantic_token_access__");
+      if (file.endsWith("color-systems.stories.tsx")) {
+        tokenSource = tokenSource.replace(/token:\s*"(?:bg-canvas|border-default)"/g, 'token: "__token-name__"');
+      }
+      if (check.pattern.test(tokenSource)) failures.push(`${check.name}: ${relative(sourceDirectory, file)}`);
       continue;
+    }
     if (check.pattern.test(source))
       failures.push(`${check.name}: ${relative(sourceDirectory, file)}`);
   }

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

@@ -1,82 +1,83 @@
 {
   "$extensions": {
-    "org.ponti.license": "MIT"
+    "org.ponti.license": "MIT",
+    "org.ponti.identity": "mono"
   },
   "background": {
     "$type": "color",
-    "$value": "rgb(23, 23, 20)"
+    "$value": "rgb(10, 10, 10)"
   },
   "card": {
     "$type": "color",
-    "$value": "rgb(29, 29, 25)"
+    "$value": "rgb(17, 17, 17)"
   },
   "secondary": {
     "$type": "color",
-    "$value": "rgb(43, 43, 37)"
+    "$value": "rgb(26, 26, 26)"
   },
   "popover": {
     "$type": "color",
-    "$value": "rgb(34, 34, 30)"
+    "$value": "rgb(17, 17, 17)"
   },
   "muted": {
     "$type": "color",
-    "$value": "rgb(29, 29, 25)"
+    "$value": "rgb(20, 20, 20)"
   },
   "text-primary": {
     "$type": "color",
-    "$value": "rgb(255, 255, 255)"
+    "$value": "rgb(250, 250, 250)"
   },
   "text-secondary": {
     "$type": "color",
-    "$value": "rgb(170, 167, 159)"
+    "$value": "rgb(163, 163, 163)"
   },
   "tertiary": {
     "$type": "color",
-    "$value": "rgb(208, 204, 194)"
+    "$value": "{text-secondary}"
   },
   "primary": {
     "$type": "color",
-    "$value": "rgb(23, 130, 119)"
+    "$value": "rgb(237, 237, 237)"
   },
   "accent": {
     "$type": "color",
-    "$value": "rgb(33, 67, 63)"
+    "$value": "rgb(30, 41, 59)"
   },
   "destructive": {
     "$type": "color",
-    "$value": "rgb(206, 44, 49)"
+    "$value": "rgb(220, 38, 38)"
   },
   "success": {
     "$type": "color",
-    "$value": "rgb(48, 164, 108)"
+    "$value": "rgb(34, 197, 94)"
   },
   "warning": {
     "$type": "color",
-    "$value": "rgb(255, 197, 61)"
+    "$value": "rgb(245, 158, 11)"
   },
   "text-success": {
     "$type": "color",
-    "$value": "rgb(85, 216, 154)"
+    "$value": "rgb(74, 222, 128)"
   },
   "text-warning": {
     "$type": "color",
-    "$value": "rgb(255, 216, 106)"
+    "$value": "rgb(252, 211, 77)"
   },
   "success-foreground": {
     "$type": "color",
-    "$value": "rgb(21, 17, 15)"
+    "$value": "rgb(10, 10, 10)"
   },
   "warning-foreground": {
     "$type": "color",
-    "$value": "rgb(21, 17, 15)"
+    "$value": "rgb(10, 10, 10)"
   },
   "primary-foreground": {
     "$type": "color",
-    "$value": "rgb(255, 255, 255)"
+    "$value": "rgb(10, 10, 10)"
   },
   "accent-foreground": {
     "$type": "color",
-    "$value": "rgb(255, 255, 255)"
+    "$value": "rgb(147, 197, 253)"
   },
   "destructive-foreground": {
     "$type": "color",
@@ -84,51 +85,51 @@
   },
   "text-destructive": {
     "$type": "color",
-    "$value": "rgb(255, 149, 146)"
+    "$value": "rgb(252, 165, 165)"
   },
   "text-accent": {
     "$type": "color",
-    "$value": "rgb(27, 152, 139)"
+    "$value": "rgb(96, 165, 250)"
   },
   "border-default": {
     "$type": "color",
-    "$value": "rgb(107, 107, 102)"
+    "$value": "rgb(38, 38, 38)"
   },
   "focus-ring": {
     "$type": "color",
-    "$value": "rgb(27, 152, 139)"
+    "$value": "rgb(59, 130, 246)"
   },
   "chart-1": {
     "$type": "color",
-    "$value": "rgb(62, 99, 221)"
+    "$value": "rgb(59, 130, 246)"
   },
   "chart-2": {
     "$type": "color",
-    "$value": "rgb(110, 86, 207)"
+    "$value": "rgb(237, 237, 237)"
   },
   "chart-3": {
     "$type": "color",
-    "$value": "rgb(199, 49, 120)"
+    "$value": "rgb(115, 115, 115)"
   },
   "chart-4": {
     "$type": "color",
-    "$value": "rgb(247, 107, 21)"
+    "$value": "rgb(147, 197, 253)"
   },
   "chart-5": {
     "$type": "color",
-    "$value": "rgb(105, 110, 119)"
+    "$value": "rgb(63, 63, 70)"
   },
   "chart-positive": {
     "$type": "color",
-    "$value": "rgb(48, 164, 108)"
+    "$value": "rgb(34, 197, 94)"
   },
   "chart-negative": {
     "$type": "color",
-    "$value": "rgb(229, 72, 77)"
+    "$value": "rgb(239, 68, 68)"
   },
   "chart-neutral": {
     "$type": "color",
-    "$value": "rgb(135, 141, 148)"
+    "$value": "rgb(163, 163, 163)"
   },
   "overlay-scrim": {
     "$type": "color",

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

@@ -43,6 +43,7 @@
     "$type": "fontFamily",
     "sans": {
       "$value": [
+        "Geist",
         "system-ui",
         "-apple-system",
         "BlinkMacSystemFont",
@@ -77,6 +78,7 @@
     },
     "mono": {
       "$value": [
+        "Geist Mono",
         "ui-monospace",
         "SFMono-Regular",
         "Menlo",

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

@@ -1,74 +1,75 @@
 {
   "$extensions": {
-    "org.ponti.license": "MIT"
+    "org.ponti.license": "MIT",
+    "org.ponti.identity": "mono"
   },
   "background": {
     "$type": "color",
-    "$value": "rgb(244, 240, 232)"
+    "$value": "rgb(255, 255, 255)"
   },
   "card": {
     "$type": "color",
-    "$value": "rgb(251, 248, 242)"
+    "$value": "rgb(255, 255, 255)"
   },
   "secondary": {
     "$type": "color",
-    "$value": "rgb(232, 228, 218)"
+    "$value": "rgb(245, 245, 245)"
   },
   "popover": {
     "$type": "color",
-    "$value": "rgb(246, 242, 234)"
+    "$value": "rgb(255, 255, 255)"
   },
   "muted": {
     "$type": "color",
-    "$value": "rgb(239, 233, 220)"
+    "$value": "rgb(250, 250, 250)"
   },
   "text-primary": {
     "$type": "color",
-    "$value": "rgb(17, 17, 15)"
+    "$value": "rgb(17, 17, 17)"
   },
   "text-secondary": {
     "$type": "color",
-    "$value": "rgb(106, 99, 82)"
+    "$value": "rgb(107, 107, 107)"
   },
   "tertiary": {
     "$type": "color",
-    "$value": "rgb(109, 102, 89)"
+    "$value": "{text-secondary}"
   },
   "primary": {
     "$type": "color",
-    "$value": "rgb(16, 112, 102)"
+    "$value": "rgb(23, 23, 23)"
   },
   "accent": {
     "$type": "color",
-    "$value": "rgb(215, 239, 235)"
+    "$value": "rgb(239, 246, 255)"
   },
   "destructive": {
     "$type": "color",
-    "$value": "rgb(206, 44, 49)"
+    "$value": "rgb(220, 38, 38)"
   },
   "success": {
     "$type": "color",
-    "$value": "rgb(48, 164, 108)"
+    "$value": "rgb(22, 163, 74)"
   },
   "warning": {
     "$type": "color",
-    "$value": "rgb(255, 197, 61)"
+    "$value": "rgb(217, 119, 6)"
   },
   "text-success": {
     "$type": "color",
-    "$value": "rgb(31, 122, 80)"
+    "$value": "rgb(21, 128, 61)"
   },
   "text-warning": {
     "$type": "color",
-    "$value": "rgb(138, 90, 0)"
+    "$value": "rgb(146, 64, 14)"
   },
   "success-foreground": {
     "$type": "color",
-    "$value": "rgb(21, 17, 15)"
+    "$value": "rgb(10, 10, 10)"
   },
   "warning-foreground": {
     "$type": "color",
-    "$value": "rgb(21, 17, 15)"
+    "$value": "rgb(10, 10, 10)"
   },
   "primary-foreground": {
     "$type": "color",
@@ -76,7 +77,7 @@
   },
   "accent-foreground": {
     "$type": "color",
-    "$value": "rgb(17, 17, 15)"
+    "$value": "rgb(29, 78, 216)"
   },
   "destructive-foreground": {
     "$type": "color",
@@ -84,51 +85,51 @@
   },
   "text-destructive": {
     "$type": "color",
-    "$value": "rgb(200, 44, 49)"
+    "$value": "rgb(185, 28, 28)"
   },
   "text-accent": {
     "$type": "color",
-    "$value": "rgb(16, 112, 102)"
+    "$value": "rgb(37, 99, 235)"
   },
   "border-default": {
     "$type": "color",
-    "$value": "rgb(143, 133, 118)"
+    "$value": "rgb(229, 229, 229)"
   },
   "focus-ring": {
     "$type": "color",
-    "$value": "rgb(16, 112, 102)"
+    "$value": "rgb(37, 99, 235)"
   },
   "chart-1": {
     "$type": "color",
-    "$value": "rgb(62, 99, 221)"
+    "$value": "rgb(37, 99, 235)"
   },
   "chart-2": {
     "$type": "color",
-    "$value": "rgb(110, 86, 207)"
+    "$value": "rgb(17, 17, 17)"
   },
   "chart-3": {
     "$type": "color",
-    "$value": "rgb(199, 49, 120)"
+    "$value": "rgb(115, 115, 115)"
   },
   "chart-4": {
     "$type": "color",
-    "$value": "rgb(247, 107, 21)"
+    "$value": "rgb(147, 197, 253)"
   },
   "chart-5": {
     "$type": "color",
-    "$value": "rgb(139, 141, 152)"
+    "$value": "rgb(212, 212, 216)"
   },
   "chart-positive": {
     "$type": "color",
-    "$value": "rgb(31, 122, 80)"
+    "$value": "rgb(21, 128, 61)"
   },
   "chart-negative": {
     "$type": "color",
-    "$value": "rgb(190, 46, 51)"
+    "$value": "rgb(220, 38, 38)"
   },
   "chart-neutral": {
     "$type": "color",
-    "$value": "rgb(98, 106, 115)"
+    "$value": "rgb(115, 115, 115)"
   },
   "overlay-scrim": {
     "$type": "color",

package/src/styles/tokens/style-dictionary.dark-class.json

@@ -0,0 +1,16 @@
+{
+  "source": ["src/styles/tokens/source/dark.tokens.json"],
+  "platforms": {
+    "css": {
+      "transformGroup": "css",
+      "buildPath": "src/styles/tokens/generated/",
+      "files": [
+        {
+          "destination": "dark-class.css",
+          "format": "css/variables",
+          "options": { "selector": ":root.dark" }
+        }
+      ]
+    }
+  }
+}

package/templates/web-vite/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="A Ponti Studios project." />
+    <title>New Ponti project</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

package/templates/web-vite/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "project-name-placeholder",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc --noEmit && vite build",
+    "preview": "vite preview",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@ponti-studios/ui": "^1.8.0",
+    "react": "19.2.7",
+    "react-dom": "19.2.7"
+  },
+  "devDependencies": {
+    "@types/react": "19.2.17",
+    "@types/react-dom": "19.2.3",
+    "@vitejs/plugin-react": "6.1.2",
+    "typescript": "7.0.2",
+    "vite": "8.3.4"
+  },
+  "engines": {
+    "node": ">=20.19.0"
+  }
+}

package/templates/web-vite/src/App.tsx

@@ -0,0 +1,31 @@
+import { Button } from "@ponti-studios/ui/primitives";
+
+export default function App() {
+  return (
+    <main className="starter-page">
+      <header className="starter-header">
+        <a aria-label="Project home" className="starter-home" href="/">
+          New project
+        </a>
+        <span className="starter-caption">Built with Ponti UI</span>
+      </header>
+
+      <section className="starter-content">
+        <p className="starter-eyebrow">A fresh start</p>
+        <h1 className="starter-title">Start with the system. Make the product yours.</h1>
+        <p className="starter-description">
+          Your project already has Ponti tokens, themes, styles, and components. Replace this page
+          with the thing you want to make.
+        </p>
+        <div className="starter-actions">
+          <Button>Primary action</Button>
+          <Button variant="outline">Secondary action</Button>
+        </div>
+      </section>
+
+      <footer className="starter-footer">
+        Change the shared system through @ponti-studios/ui; keep product-specific choices here.
+      </footer>
+    </main>
+  );
+}

package/templates/web-vite/src/main.tsx

@@ -0,0 +1,12 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+
+import App from "./App";
+import "@ponti-studios/ui";
+import "./styles.css";
+
+ReactDOM.createRoot(document.getElementById("root")!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+);