@ponti-studios/ui 0.1.2 → 0.4.0

package/src/tokens/index.ts

@@ -1,16 +1,79 @@
-export { colors } from "./colors";
-export {
-  COLOR_MODE_ATTRIBUTE,
-  COLOR_SYSTEM_ATTRIBUTE,
-  colorSystems,
-  colorTokenNames,
-} from "./colors";
-export type { ColorMode, ColorSystem, ColorToken } from "./colors";
-export { durations, easingWeb, translateDistances } from "./motion";
-export { radii } from "./radii";
-export { shadowsNative, shadowsWeb } from "./shadows";
-export { contentWidths, spacing } from "./spacing";
-export { fontFamilies, fontSizes, fontWeights, letterSpacing, lineHeights } from "./typography";
-export type { RadiusToken } from "./radii";
-export type { ContentWidthToken, SpacingToken } from "./spacing";
-export type { FontSizeToken, FontWeightToken } from "./typography";
+import darkTokens from "./generated/dark.colors.generated";
+import foundations from "./generated/foundations.generated";
+import lightTokens from "./generated/light.colors.generated";
+
+const toPixels = (value: string) => {
+  if (value.endsWith("rem")) return Number.parseFloat(value) * 16;
+  if (value.endsWith("px")) return Number.parseFloat(value);
+  throw new Error(`Unsupported foundation dimension: ${value}`);
+};
+
+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
+>;
+
+export const colorTokenNames = Object.keys(lightTokens) as Array<keyof typeof lightTokens>;
+export type ColorToken = keyof typeof lightTokens;
+export type ColorMode = "light" | "dark";
+export type ColorTheme = Readonly<Record<ColorToken, string>>;
+
+export const colorThemes = {
+  light: lightTokens,
+  dark: darkTokens,
+} as const satisfies Record<ColorMode, ColorTheme>;
+
+export const colors = colorTokenNames.reduce(
+  (accumulator, token) => {
+    accumulator[token] = `var(--${token})`;
+    return accumulator;
+  },
+  {} as Record<ColorToken, `var(--${string})`>,
+);
+
+export const spacing = Object.fromEntries(
+  Object.entries(foundations["spacing-scale"]).map(([key, value]) => [
+    key.replace("-", "."),
+    toPixels(value),
+  ]),
+) as Record<SpacingToken, number>;
+
+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>;
+export const textLineHeights = foundations["text-line-height"];
+export const fontWeights = Object.fromEntries(
+  Object.entries(foundations["font-weight"]).map(([key, value]) => [key, String(value)]),
+) as Record<keyof (typeof foundations)["font-weight"], string>;
+export const tracking = foundations.tracking;
+export const leading = foundations.leading;
+export const radii = Object.fromEntries(
+  Object.entries(foundations.radius).map(([key, value]) => [key, toPixels(value)]),
+) as Record<keyof typeof foundations.radius, number>;
+export const shadows = foundations.shadow;
+export const breakpoints = foundations.breakpoint;
+export const containers = foundations.container;
+export const zIndices = foundations["z-index"];
+export const easing = Object.fromEntries(
+  Object.entries(foundations.ease).map(([key, value]) => [key, toBezier(value)]),
+) as Record<keyof typeof foundations.ease, string>;
+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 type RadiusToken = keyof typeof radii;
+export type TextSizeToken = keyof typeof textSizes;
+export type FontWeightToken = keyof typeof fontWeights;
+export type TrackingToken = keyof typeof tracking;
+export type LeadingToken = keyof typeof leading;
+export type ShadowToken = keyof typeof shadows;

package/src/tokens/layout.stories.tsx

@@ -2,26 +2,24 @@ import type { Meta, StoryObj } from "@storybook/react-vite";
 
 const meta = {
   title: "Foundations/Layout Rhythm",
-  parameters: {
-    layout: "fullscreen",
-  },
+  parameters: { layout: "fullscreen" },
 } satisfies Meta;
-
 export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const PageShell: Story = {
   render: () => (
-    <main className="page-shell bg-canvas text-primary">
-      <header className="layout-stack">
-        <p className="body-4 text-secondary">Page shell</p>
-        <h1 className="display-1">A consistent starting point for content pages</h1>
+    <main className="page-shell bg-background text-foreground">
+      <header className="flex flex-col gap-4">
+        <p className="text-muted-foreground text-sm">Page shell</p>
+        <h1 className="text-4xl font-semibold tracking-tight">
+          A consistent starting point for content pages.
+        </h1>
       </header>
-      <section className="layout-stack">
-        <h2 className="heading-2">Section rhythm</h2>
-        <p className="body-1 text-secondary max-w-2xl">
-          Page-level breathing room and internal section spacing remain consistent across indexes,
-          feeds, and editorial surfaces.
+      <section className="flex flex-col gap-4">
+        <h2 className="text-2xl font-semibold">Section rhythm</h2>
+        <p className="text-muted-foreground max-w-2xl text-base">
+          Layout helpers compose standard Tailwind spacing and semantic colors.
         </p>
       </section>
     </main>
@@ -30,20 +28,18 @@ export const PageShell: Story = {
 
 export const ListRows: Story = {
   render: () => (
-    <main className="page-shell bg-canvas text-primary">
-      <div className="layout-stack">
-        <h1 className="display-1">List row rhythm</h1>
-        <div className="border-subtle divide-border-subtle divide-y border-b">
-          {[
-            ["01", "A compact row", "For projects, search results, or activity."],
-            ["02", "A readable row", "Consistent padding keeps scanning calm."],
-            ["03", "A responsive row", "The same rhythm holds on mobile and desktop."],
-          ].map(([index, title, description]) => (
-            <div key={index} className="list-row items-start justify-between">
-              <span className="body-3 text-secondary tabular-nums">{index}</span>
-              <div className="layout-stack min-w-0 flex-1 gap-1">
-                <h2 className="heading-3">{title}</h2>
-                <p className="body-3 text-secondary">{description}</p>
+    <main className="page-shell bg-background text-foreground">
+      <div className="flex flex-col gap-4">
+        <h1 className="text-4xl font-semibold tracking-tight">List row rhythm</h1>
+        <div className="divide-border border-border divide-y border-b">
+          {["A compact row", "A readable row", "A responsive row"].map((title, index) => (
+            <div key={title} className="flex gap-4 py-6">
+              <span className="text-muted-foreground font-mono text-sm">0{index + 1}</span>
+              <div className="flex min-w-0 flex-1 flex-col gap-1">
+                <h2 className="text-lg font-semibold">{title}</h2>
+                <p className="text-muted-foreground text-sm">
+                  Consistent padding keeps scanning calm.
+                </p>
               </div>
             </div>
           ))}
@@ -52,67 +48,3 @@ export const ListRows: Story = {
     </main>
   ),
 };
-
-export const ListRowsWithMedia: Story = {
-  render: () => (
-    <main className="page-shell bg-canvas text-primary">
-      <div className="layout-stack">
-        <h1 className="display-1">List rows with media</h1>
-        <div className="border-subtle divide-border-subtle divide-y border-b">
-          <div className="list-row items-center">
-            <div className="list-media list-media-wide bg-panel" aria-hidden="true">
-              <span className="heading-3 text-secondary">WO</span>
-            </div>
-            <div className="layout-stack min-w-0 gap-1">
-              <h2 className="heading-3">Wide media row</h2>
-              <p className="body-3 text-secondary">For client or partner marks.</p>
-            </div>
-          </div>
-          <div className="list-row items-center">
-            <div className="list-media list-media-square bg-panel" aria-hidden="true">
-              <span className="heading-3 text-secondary">PR</span>
-            </div>
-            <div className="layout-stack min-w-0 gap-1">
-              <h2 className="heading-3">Square media row</h2>
-              <p className="body-3 text-secondary">For product or project marks.</p>
-            </div>
-          </div>
-        </div>
-      </div>
-    </main>
-  ),
-};
-
-export const DetailSections: Story = {
-  render: () => (
-    <main className="bg-canvas text-primary">
-      <section className="section section-hero">
-        <p className="body-4 text-secondary">Detail hero</p>
-        <h1 className="display-1">A detail page with a clear vertical rhythm</h1>
-      </section>
-      <section className="section">
-        <h2 className="heading-2">Standard section</h2>
-        <p className="body-1 text-secondary max-w-2xl">
-          Sections share a border, gutter, and vertical breathing room without requiring a React
-          component.
-        </p>
-      </section>
-      <section className="section gap-8">
-        <h2 className="heading-2">Dense section</h2>
-        <ol className="layout-stack gap-8">
-          <li className="body-1">01 — Start with the problem.</li>
-          <li className="body-1">02 — Explain the approach.</li>
-          <li className="body-1">03 — Close with the outcome.</li>
-        </ol>
-      </section>
-      <div className="detail-navigation px-4 md:px-6">
-        <a className="body-2 text-secondary hover:text-primary" href="#previous">
-          ← Previous
-        </a>
-        <a className="body-2 text-secondary hover:text-primary" href="#next">
-          Next →
-        </a>
-      </div>
-    </main>
-  ),
-};

package/src/tokens/colors.ts

@@ -1,156 +0,0 @@
-/**
- * Canonical semantic color contract for the Ponti Studios system.
- *
- * Components consume these roles. The runtime CSS provides the light and dark
- * values; this module exists for inspection, tooling, and typed consumers.
- */
-
-export const colorTokenNames = [
-  "surface-canvas",
-  "surface-panel",
-  "surface-raised",
-  "surface-inset",
-  "surface-hover",
-  "surface-pressed",
-  "surface-selected",
-  "surface-disabled",
-  "overlay-scrim",
-  "text-primary",
-  "text-secondary",
-  "text-tertiary",
-  "text-disabled",
-  "text-accent",
-  "text-destructive",
-  "text-success",
-  "text-warning",
-  "text-on-accent",
-  "text-on-destructive",
-  "text-on-success",
-  "text-on-warning",
-  "border-subtle",
-  "border-default",
-  "border-strong",
-  "border-focus",
-  "border-accent",
-  "border-destructive",
-  "accent",
-  "accent-hover",
-  "accent-pressed",
-  "accent-subtle",
-  "destructive",
-  "destructive-hover",
-  "destructive-pressed",
-  "destructive-subtle",
-  "success",
-  "success-subtle",
-  "warning",
-  "warning-subtle",
-  "ring-focus",
-] as const;
-
-export type ColorToken = (typeof colorTokenNames)[number];
-export type ColorMode = "light" | "dark";
-export type ColorSystem = "ponti";
-export type ColorTheme = Record<ColorToken, string>;
-export type ColorSystemThemes = Record<ColorMode, ColorTheme>;
-
-const pontiLight: ColorTheme = {
-  "surface-canvas": "#ffffff",
-  "surface-panel": "#f6f8fa",
-  "surface-raised": "#ffffff",
-  "surface-inset": "#eff2f5",
-  "surface-hover": "#e8ebef",
-  "surface-pressed": "#dfe3e8",
-  "surface-selected": "rgba(9, 105, 218, 0.1)",
-  "surface-disabled": "#eff2f5",
-  "overlay-scrim": "rgba(31, 35, 40, 0.42)",
-  "text-primary": "#25292e",
-  "text-secondary": "#59636e",
-  "text-tertiary": "#818b98",
-  "text-disabled": "#9ea7b3",
-  "text-accent": "#0969da",
-  "text-destructive": "#cf222e",
-  "text-success": "#1f883d",
-  "text-warning": "#9a6700",
-  "text-on-accent": "#ffffff",
-  "text-on-destructive": "#ffffff",
-  "text-on-success": "#ffffff",
-  "text-on-warning": "#1c1c1e",
-  "border-subtle": "rgba(129, 139, 152, 0.2)",
-  "border-default": "#d1d9e0",
-  "border-strong": "#8c959f",
-  "border-focus": "#0969da",
-  "border-accent": "#0969da",
-  "border-destructive": "#cf222e",
-  accent: "#0969da",
-  "accent-hover": "#0550ae",
-  "accent-pressed": "#033d8b",
-  "accent-subtle": "rgba(9, 105, 218, 0.1)",
-  destructive: "#cf222e",
-  "destructive-hover": "#a40e26",
-  "destructive-pressed": "#82071e",
-  "destructive-subtle": "rgba(207, 34, 46, 0.12)",
-  success: "#1f883d",
-  "success-subtle": "rgba(31, 136, 61, 0.12)",
-  warning: "#9a6700",
-  "warning-subtle": "rgba(154, 103, 0, 0.12)",
-  "ring-focus": "#0969da",
-};
-
-const pontiDark: ColorTheme = {
-  "surface-canvas": "#0d1117",
-  "surface-panel": "#161b22",
-  "surface-raised": "#21262d",
-  "surface-inset": "#1a2029",
-  "surface-hover": "#242a33",
-  "surface-pressed": "#30363d",
-  "surface-selected": "rgba(47, 129, 247, 0.18)",
-  "surface-disabled": "#1a2029",
-  "overlay-scrim": "rgba(1, 4, 9, 0.78)",
-  "text-primary": "#f0f6fc",
-  "text-secondary": "#8b949e",
-  "text-tertiary": "#6e7681",
-  "text-disabled": "#484f58",
-  "text-accent": "#58a6ff",
-  "text-destructive": "#ff7b72",
-  "text-success": "#3fb950",
-  "text-warning": "#d29922",
-  "text-on-accent": "#ffffff",
-  "text-on-destructive": "#ffffff",
-  "text-on-success": "#ffffff",
-  "text-on-warning": "#0d1117",
-  "border-subtle": "rgba(240, 246, 252, 0.14)",
-  "border-default": "#30363d",
-  "border-strong": "#6e7681",
-  "border-focus": "#2f81f7",
-  "border-accent": "#2f81f7",
-  "border-destructive": "#da3633",
-  accent: "#2f81f7",
-  "accent-hover": "#58a6ff",
-  "accent-pressed": "#1f6feb",
-  "accent-subtle": "rgba(47, 129, 247, 0.18)",
-  destructive: "#da3633",
-  "destructive-hover": "#f85149",
-  "destructive-pressed": "#b62324",
-  "destructive-subtle": "rgba(218, 54, 51, 0.18)",
-  success: "#238636",
-  "success-subtle": "rgba(35, 134, 54, 0.18)",
-  warning: "#9e6a03",
-  "warning-subtle": "rgba(158, 106, 3, 0.18)",
-  "ring-focus": "#2f81f7",
-};
-
-export const colorSystems = {
-  ponti: { light: pontiLight, dark: pontiDark },
-} as const satisfies Record<ColorSystem, ColorSystemThemes>;
-
-export const colors = colorTokenNames.reduce(
-  (accumulator, token) => {
-    accumulator[token] = `var(--color-${token})`;
-    return accumulator;
-  },
-  {} as Record<ColorToken, `var(--color-${string})`>,
-);
-
-export const COLOR_SYSTEM_ATTRIBUTE = "data-color-system" as const;
-export const COLOR_MODE_ATTRIBUTE = "data-color-mode" as const;

package/src/tokens/motion.ts

@@ -1,51 +0,0 @@
-/**
- * Motion tokens — durations and translate distances.
- *
- * Durations are in milliseconds. Must match animations.css and
- * apps/omiro/theme/motion.ts (which imports from here).
- *
- * CSS easing strings are web-only. Mobile uses react-native-reanimated
- * Easing.* functions which cannot be expressed as strings — the mobile
- * motion.ts keeps those local and imports only the numeric constants here.
- *
- * ## Animation mandate
- *
- * Web interactive animations MUST use the shared GSAP helpers exposed by the
- * consuming app.
- * The canonical sequences (playFocusExpand, playFocusCollapse,
- * playContextSwitch, playSubmitPulse, playEnterRow, playExitRow,
- * playShimmer) read the numeric constants from this file so all motion
- * stays in sync.
- *
- * CSS `motion-anim-*` classes (animations.css) are reserved for Radix UI
- * component enter/exit only — do not add new CSS keyframe animations for
- * interactive product surfaces.
- */
-
-export const durations = {
-  /** Element arrives and settles (decelerate). */
-  enter: 150,
-  /** Element leaves without lingering (accelerate). */
-  exit: 120,
-  /** Content animations: loading states, thinking indicators. */
-  standard: 120,
-  /** Loop / breezy animations. */
-  breezy: 1800,
-  spin: 1200,
-} as const;
-
-export const translateDistances = {
-  /** Enter lift (px). */
-  enterY: 6,
-  /** Exit settle (px). */
-  exitY: 4,
-  enterX: 6,
-  exitX: 4,
-} as const;
-
-/** CSS cubic-bezier strings — web only. */
-export const easingWeb = {
-  enter: "cubic-bezier(0.0, 0.0, 0.2, 1)",
-  exit: "cubic-bezier(0.4, 0.0, 1, 1)",
-  standard: "cubic-bezier(0.4, 0, 0.2, 1)",
-} as const;

package/src/tokens/radii.ts

@@ -1,10 +0,0 @@
-export const radii = {
-  sm: 6,
-  md: 10,
-  lg: 14,
-  xl: 18,
-  full: 9999,
-  icon: 20,
-} as const;
-
-export type RadiusToken = keyof typeof radii;

package/src/tokens/shadows.ts

@@ -1,34 +0,0 @@
-/**
- * Shadow tokens.
- *
- * `shadowsWeb` values must match --shadow-* in globals.css.
- * `shadowsNative` are React Native shadow object equivalents.
- */
-
-export const shadowsWeb = {
-  low: "0 2px 8px rgba(0, 0, 0, 0.35)",
-  medium: "0 8px 24px rgba(0, 0, 0, 0.45)",
-  high: "0 20px 60px rgba(0, 0, 0, 0.55)",
-} as const;
-
-/** React Native shadow objects. Pass these into StyleSheet styles. */
-export const shadowsNative = {
-  low: {
-    shadowColor: "#0f1113",
-    shadowOffset: { width: 0, height: 2 },
-    shadowOpacity: 0.35,
-    shadowRadius: 8,
-  },
-  medium: {
-    shadowColor: "#0f1113",
-    shadowOffset: { width: 0, height: 8 },
-    shadowOpacity: 0.45,
-    shadowRadius: 24,
-  },
-  high: {
-    shadowColor: "#0f1113",
-    shadowOffset: { width: 0, height: 20 },
-    shadowOpacity: 0.55,
-    shadowRadius: 60,
-  },
-} as const;

package/src/tokens/spacing.ts

@@ -1,30 +0,0 @@
-/**
- * Spacing tokens — 8px primary grid, 4px secondary.
- *
- * Values are unitless numbers (px on web via CSS vars, logical pixels on
- * mobile). Must match --spacing-* in packages/ui/src/styles.css.
- */
-
-export const spacing = {
-  1: 4,
-  2: 8,
-  3: 12,
-  4: 16,
-  5: 24,
-  6: 32,
-  7: 48,
-  8: 64,
-} as const;
-
-/**
- * Content width tokens for constraining max-width of content.
- * Used for message bubbles, transcript areas, and other content containers.
- */
-export const contentWidths = {
-  bubble: "36rem", // Compact message bubble width (576px)
-  transcript: "44rem", // Standard transcript/content width (704px)
-  notePreview: "32ch", // Empty-state note preview width
-} as const;
-
-export type SpacingToken = keyof typeof spacing;
-export type ContentWidthToken = keyof typeof contentWidths;

package/src/tokens/typography.ts

@@ -1,42 +0,0 @@
-export const fontFamilies = {
-  primary: "-apple-system, BlinkMacSystemFont, system-ui, sans-serif",
-  mono: "ui-monospace, monospace",
-} as const;
-
-export const fontSizes = {
-  micro: 10,
-  caption2: 11,
-  caption1: 12,
-  footnote: 13,
-  xs: 12,
-  sm: 14,
-  subhead: 15,
-  md: 16,
-  body: 17,
-  lg: 18,
-  xl: 20,
-  headline: 17,
-  display: 28,
-} as const;
-
-export const fontWeights = {
-  regular: "400",
-  medium: "500",
-  semibold: "600",
-  bold: "700",
-} as const;
-
-export const lineHeights = {
-  tight: 1.2,
-  normal: 1.4,
-  relaxed: 1.6,
-} as const;
-
-export const letterSpacing = {
-  tight: -0.05,
-  normal: 0,
-  relaxed: 0.01,
-} as const;
-
-export type FontSizeToken = keyof typeof fontSizes;
-export type FontWeightToken = keyof typeof fontWeights;