@ponti-studios/ui 1.7.0 → 2.0.0

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

@@ -1,114 +1,135 @@
 {
   "$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(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(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(21, 128, 61)"
+  },
+  "text-warning": {
+    "$type": "color",
+    "$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",
     "$value": "rgb(255, 255, 255)"
   },
+  "accent-foreground": {
+    "$type": "color",
+    "$value": "rgb(29, 78, 216)"
+  },
   "destructive-foreground": {
     "$type": "color",
     "$value": "rgb(255, 255, 255)"
   },
   "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>,
+);

package/templates/web-vite/src/styles.css

@@ -0,0 +1,110 @@
+:root {
+  font-family: var(--font-sans);
+  color: var(--text-primary);
+  background: var(--background);
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+body {
+  min-width: 320px;
+  min-height: 100vh;
+  margin: 0;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+.starter-page {
+  box-sizing: border-box;
+  display: flex;
+  width: min(100%, 1024px);
+  min-height: 100vh;
+  margin-inline: auto;
+  padding: 2rem 1.5rem;
+  flex-direction: column;
+}
+
+.starter-header,
+.starter-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border-color: var(--border-default);
+}
+
+.starter-header {
+  padding-bottom: 1.25rem;
+  border-bottom: 1px solid var(--border-default);
+}
+
+.starter-home {
+  font-size: 0.875rem;
+  font-weight: 600;
+  letter-spacing: -0.025em;
+}
+
+.starter-caption,
+.starter-eyebrow,
+.starter-footer {
+  color: var(--text-secondary);
+}
+
+.starter-caption,
+.starter-footer {
+  font-size: 0.75rem;
+}
+
+.starter-content {
+  display: flex;
+  flex: 1;
+  padding-block: 5rem;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: center;
+  gap: 1.5rem;
+}
+
+.starter-eyebrow {
+  margin: 0;
+  font-size: 0.875rem;
+  font-weight: 500;
+}
+
+.starter-title {
+  max-width: 48rem;
+  margin: 0;
+  font-size: clamp(2.5rem, 8vw, 3.75rem);
+  font-weight: 600;
+  letter-spacing: -0.04em;
+  line-height: 1.05;
+}
+
+.starter-description {
+  max-width: 36rem;
+  margin: 0;
+  color: var(--text-secondary);
+  font-size: 1.125rem;
+  line-height: 1.75;
+}
+
+.starter-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.75rem;
+}
+
+.starter-footer {
+  padding-block: 1rem;
+  border-top: 1px solid var(--border-default);
+}
+
+@media (min-width: 640px) {
+  .starter-page {
+    padding-inline: 2.5rem;
+  }
+}

package/templates/web-vite/tsconfig.json

@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "useDefineForClassFields": true,
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "Bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "types": ["vite/client"]
+  },
+  "include": ["src", "vite.config.ts"]
+}

package/templates/web-vite/vite.config.ts

@@ -0,0 +1,6 @@
+import react from "@vitejs/plugin-react";
+import { defineConfig } from "vite";
+
+export default defineConfig({
+  plugins: [react()],
+});