@ponti-studios/ui 0.3.0 → 0.4.0

package/src/tokens/generated/light.css

@@ -3,52 +3,27 @@
  */
 
 :root {
-  --color-surface-canvas: #ffffff;
-  --color-surface-panel: #f8f8f8;
-  --color-surface-raised: #ffffff;
-  --color-surface-inset: #ffffff;
-  --color-surface-hover: #e9e9e9;
-  --color-surface-pressed: #505050;
-  --color-surface-selected: #e5f0fe;
-  --color-surface-disabled: #e9e9e9;
-  --color-overlay-scrim: #000000;
-  --color-text-primary: #131313;
-  --color-text-secondary: #505050;
-  --color-text-tertiary: #717171;
-  --color-text-disabled: #8f8f8f;
-  --color-text-accent: #3b63fb;
-  --color-text-destructive: #d73220;
-  --color-text-success: #079355;
-  --color-text-warning: #d45b00;
-  --color-text-on-accent: #ffffff;
-  --color-text-on-destructive: #ffffff;
-  --color-text-on-success: #ffffff;
-  --color-text-on-warning: #000000;
-  --color-border-subtle: #dadada;
-  --color-border-default: #c6c6c6;
-  --color-border-strong: #8f8f8f;
-  --color-border-focus: #4b75ff;
-  --color-border-accent: #3b63fb;
-  --color-border-destructive: #d73220;
-  --color-accent: #3b63fb;
-  --color-accent-hover: #274dea;
-  --color-accent-pressed: #274dea;
-  --color-accent-subtle: #e5f0fe;
-  --color-destructive: #d73220;
-  --color-destructive-hover: #b72818;
-  --color-destructive-pressed: #b72818;
-  --color-destructive-subtle: #ffebe8;
-  --color-success: #05834e;
-  --color-success-subtle: #d7f7e1;
-  --color-warning: #fc7d00;
-  --color-warning-subtle: #ffeccf;
-  --color-ring-focus: #4b75ff;
-  --color-chart-1: #4b75ff;
-  --color-chart-2: #079355;
-  --color-chart-3: #4b75ff;
-  --color-chart-4: #d45b00;
-  --color-chart-5: #8f8f8f;
-  --color-chart-positive: #079355;
-  --color-chart-negative: #f03823;
-  --color-chart-neutral: #8f8f8f;
+  --background: #fcfcfd;
+  --card: #f9f9fb;
+  --popover: #f0f0f3;
+  --muted: #f9f9fb;
+  --text-primary: #1c2024;
+  --text-secondary: #60646c;
+  --tertiary: #80838d;
+  --primary: #3e63dd;
+  --destructive: #e5484d;
+  --success: #30a46c;
+  --warning: #ffc53d;
+  --primary-foreground: #ffffff;
+  --destructive-foreground: #ffffff;
+  --border-default: #cdced6;
+  --focus-ring: #3e63dd;
+  --chart-1: #3e63dd;
+  --chart-2: #6e56cf;
+  --chart-3: #12a594;
+  --chart-4: #f76b15;
+  --chart-5: #8b8d98;
+  --chart-positive: #30a46c;
+  --chart-negative: #e5484d;
+  --chart-neutral: #b9bbc6;
 }

package/src/tokens/index.ts

@@ -13,28 +13,33 @@ 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 type SpacingToken = NormalizedSpacingKey<
+  keyof (typeof foundations)["spacing-scale"] & string
+>;
 
-export const colorTokenNames = Object.keys(lightTokens.color) as Array<keyof typeof lightTokens.color>;
-export type ColorToken = keyof typeof lightTokens.color;
+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.color,
-  dark: darkTokens.color,
+  light: lightTokens,
+  dark: darkTokens,
 } as const satisfies Record<ColorMode, ColorTheme>;
 
 export const colors = colorTokenNames.reduce(
   (accumulator, token) => {
-    accumulator[token] = `var(--color-${token})`;
+    accumulator[token] = `var(--${token})`;
     return accumulator;
   },
-  {} as Record<ColorToken, `var(--color-${string})`>,
+  {} as Record<ColorToken, `var(--${string})`>,
 );
 
 export const spacing = Object.fromEntries(
-  Object.entries(foundations["spacing-scale"]).map(([key, value]) => [key.replace("-", "."), toPixels(value)]),
+  Object.entries(foundations["spacing-scale"]).map(([key, value]) => [
+    key.replace("-", "."),
+    toPixels(value),
+  ]),
 ) as Record<SpacingToken, number>;
 
 export const fontFamilies = Object.fromEntries(
@@ -48,7 +53,7 @@ export const textSizes = Object.fromEntries(
 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>;
+) as Record<keyof (typeof foundations)["font-weight"], string>;
 export const tracking = foundations.tracking;
 export const leading = foundations.leading;
 export const radii = Object.fromEntries(

package/src/tokens/layout.stories.tsx

@@ -1,13 +1,50 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
 
-const meta = { title: "Foundations/Layout Rhythm", parameters: { layout: "fullscreen" } } satisfies Meta;
+const meta = {
+  title: "Foundations/Layout Rhythm",
+  parameters: { layout: "fullscreen" },
+} satisfies Meta;
 export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const PageShell: Story = {
-  render: () => <main className="page-shell bg-background text-foreground"><header className="flex flex-col gap-4"><p className="text-sm text-muted-foreground">Page shell</p><h1 className="text-4xl font-semibold tracking-tight">A consistent starting point for content pages.</h1></header><section className="flex flex-col gap-4"><h2 className="text-2xl font-semibold">Section rhythm</h2><p className="max-w-2xl text-base text-muted-foreground">Layout helpers compose standard Tailwind spacing and semantic colors.</p></section></main>,
+  render: () => (
+    <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="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>
+  ),
 };
 
 export const ListRows: Story = {
-  render: () => <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-y divide-border border-b border-border">{["A compact row", "A readable row", "A responsive row"].map((title, index) => <div key={title} className="flex gap-4 py-6"><span className="font-mono text-sm text-muted-foreground">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-sm text-muted-foreground">Consistent padding keeps scanning calm.</p></div></div>)}</div></div></main>,
+  render: () => (
+    <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>
+          ))}
+        </div>
+      </div>
+    </main>
+  ),
 };