@ponti-studios/ui 1.7.0 → 2.0.0

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

@@ -0,0 +1,39 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root.dark {
+  --background: #0a0a0a;
+  --card: #111111;
+  --secondary: #1a1a1a;
+  --popover: #111111;
+  --muted: #141414;
+  --text-primary: #fafafa;
+  --text-secondary: #a3a3a3;
+  --tertiary: #a3a3a3;
+  --primary: #ededed;
+  --accent: #1e293b;
+  --destructive: #dc2626;
+  --success: #22c55e;
+  --warning: #f59e0b;
+  --text-success: #4ade80;
+  --text-warning: #fcd34d;
+  --success-foreground: #0a0a0a;
+  --warning-foreground: #0a0a0a;
+  --primary-foreground: #0a0a0a;
+  --accent-foreground: #93c5fd;
+  --destructive-foreground: #ffffff;
+  --text-destructive: #fca5a5;
+  --text-accent: #60a5fa;
+  --border-default: #262626;
+  --focus-ring: #3b82f6;
+  --chart-1: #3b82f6;
+  --chart-2: #ededed;
+  --chart-3: #737373;
+  --chart-4: #93c5fd;
+  --chart-5: #3f3f46;
+  --chart-positive: #22c55e;
+  --chart-negative: #ef4444;
+  --chart-neutral: #a3a3a3;
+  --overlay-scrim: #000000;
+}

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

@@ -3,32 +3,37 @@
  */
 
 export default {
-  background: "#171714",
-  card: "#1d1d19",
-  popover: "#22221e",
-  muted: "#1d1d19",
-  "text-primary": "#ffffff",
-  "text-secondary": "#aaa79f",
-  tertiary: "#d0ccc2",
-  primary: "#178277",
-  destructive: "#ce2c31",
-  success: "#30a46c",
-  warning: "#ffc53d",
-  "success-foreground": "#15110f",
-  "warning-foreground": "#15110f",
-  "primary-foreground": "#ffffff",
+  background: "#0a0a0a",
+  card: "#111111",
+  secondary: "#1a1a1a",
+  popover: "#111111",
+  muted: "#141414",
+  "text-primary": "#fafafa",
+  "text-secondary": "#a3a3a3",
+  tertiary: "#a3a3a3",
+  primary: "#ededed",
+  accent: "#1e293b",
+  destructive: "#dc2626",
+  success: "#22c55e",
+  warning: "#f59e0b",
+  "text-success": "#4ade80",
+  "text-warning": "#fcd34d",
+  "success-foreground": "#0a0a0a",
+  "warning-foreground": "#0a0a0a",
+  "primary-foreground": "#0a0a0a",
+  "accent-foreground": "#93c5fd",
   "destructive-foreground": "#ffffff",
-  "text-destructive": "#ff9592",
-  "text-accent": "#1b988b",
-  "border-default": "#6b6b66",
-  "focus-ring": "#1b988b",
-  "chart-1": "#3e63dd",
-  "chart-2": "#6e56cf",
-  "chart-3": "#c73178",
-  "chart-4": "#f76b15",
-  "chart-5": "#696e77",
-  "chart-positive": "#30a46c",
-  "chart-negative": "#e5484d",
-  "chart-neutral": "#878d94",
+  "text-destructive": "#fca5a5",
+  "text-accent": "#60a5fa",
+  "border-default": "#262626",
+  "focus-ring": "#3b82f6",
+  "chart-1": "#3b82f6",
+  "chart-2": "#ededed",
+  "chart-3": "#737373",
+  "chart-4": "#93c5fd",
+  "chart-5": "#3f3f46",
+  "chart-positive": "#22c55e",
+  "chart-negative": "#ef4444",
+  "chart-neutral": "#a3a3a3",
   "overlay-scrim": "#000000",
 };

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

@@ -3,32 +3,37 @@
  */
 
 :root {
-  --background: #171714;
-  --card: #1d1d19;
-  --popover: #22221e;
-  --muted: #1d1d19;
-  --text-primary: #ffffff;
-  --text-secondary: #aaa79f;
-  --tertiary: #d0ccc2;
-  --primary: #178277;
-  --destructive: #ce2c31;
-  --success: #30a46c;
-  --warning: #ffc53d;
-  --success-foreground: #15110f;
-  --warning-foreground: #15110f;
-  --primary-foreground: #ffffff;
+  --background: #0a0a0a;
+  --card: #111111;
+  --secondary: #1a1a1a;
+  --popover: #111111;
+  --muted: #141414;
+  --text-primary: #fafafa;
+  --text-secondary: #a3a3a3;
+  --tertiary: #a3a3a3;
+  --primary: #ededed;
+  --accent: #1e293b;
+  --destructive: #dc2626;
+  --success: #22c55e;
+  --warning: #f59e0b;
+  --text-success: #4ade80;
+  --text-warning: #fcd34d;
+  --success-foreground: #0a0a0a;
+  --warning-foreground: #0a0a0a;
+  --primary-foreground: #0a0a0a;
+  --accent-foreground: #93c5fd;
   --destructive-foreground: #ffffff;
-  --text-destructive: #ff9592;
-  --text-accent: #1b988b;
-  --border-default: #6b6b66;
-  --focus-ring: #1b988b;
-  --chart-1: #3e63dd;
-  --chart-2: #6e56cf;
-  --chart-3: #c73178;
-  --chart-4: #f76b15;
-  --chart-5: #696e77;
-  --chart-positive: #30a46c;
-  --chart-negative: #e5484d;
-  --chart-neutral: #878d94;
+  --text-destructive: #fca5a5;
+  --text-accent: #60a5fa;
+  --border-default: #262626;
+  --focus-ring: #3b82f6;
+  --chart-1: #3b82f6;
+  --chart-2: #ededed;
+  --chart-3: #737373;
+  --chart-4: #93c5fd;
+  --chart-5: #3f3f46;
+  --chart-positive: #22c55e;
+  --chart-negative: #ef4444;
+  --chart-neutral: #a3a3a3;
   --overlay-scrim: #000000;
 }

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

@@ -39,9 +39,9 @@
   --spacing-scale-1-5: 0.375rem;
   --spacing-scale-2-5: 0.625rem;
   --spacing-scale-3-5: 0.875rem;
-  --font-sans: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', 'Noto Sans', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+  --font-sans: Geist, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', 'Noto Sans', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
   --font-serif: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', 'Noto Sans', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
-  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
+  --font-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
   --text-xs: 0.75rem;
   --text-sm: 0.875rem;
   --text-base: 1rem;

package/src/styles/tokens/generated/foundations.generated.ts

@@ -43,6 +43,7 @@ export default {
   },
   font: {
     sans: [
+      "Geist",
       "system-ui",
       "-apple-system",
       "BlinkMacSystemFont",
@@ -73,6 +74,7 @@ export default {
       "Noto Color Emoji",
     ],
     mono: [
+      "Geist Mono",
       "ui-monospace",
       "SFMono-Regular",
       "Menlo",

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

@@ -3,32 +3,37 @@
  */
 
 export default {
-  background: "#f4f0e8",
-  card: "#fbf8f2",
-  popover: "#f6f2ea",
-  muted: "#efe9dc",
-  "text-primary": "#11110f",
-  "text-secondary": "#6a6352",
-  tertiary: "#6d6659",
-  primary: "#107066",
-  destructive: "#ce2c31",
-  success: "#30a46c",
-  warning: "#ffc53d",
-  "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": "#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/generated/light.css

@@ -3,32 +3,37 @@
  */
 
 :root {
-  --background: #f4f0e8;
-  --card: #fbf8f2;
-  --popover: #f6f2ea;
-  --muted: #efe9dc;
-  --text-primary: #11110f;
-  --text-secondary: #6a6352;
-  --tertiary: #6d6659;
-  --primary: #107066;
-  --destructive: #ce2c31;
-  --success: #30a46c;
-  --warning: #ffc53d;
-  --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: #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,6 +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;
+    // 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,62 +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(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(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(74, 222, 128)"
+  },
+  "text-warning": {
+    "$type": "color",
+    "$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(147, 197, 253)"
   },
   "destructive-foreground": {
     "$type": "color",
@@ -64,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",