@ponti-studios/ui 0.3.0 → 0.4.0

package/src/tokens/chart-colors.stories.tsx

@@ -0,0 +1,192 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+
+import { CHART_CSS_VARS } from "../constants/chart-colors";
+
+const meta: Meta = { title: "Foundations/Charts", parameters: { layout: "fullscreen" } };
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const SERIES = [
+  { key: "chart1", label: "chart-1" },
+  { key: "chart2", label: "chart-2" },
+  { key: "chart3", label: "chart-3" },
+  { key: "chart4", label: "chart-4" },
+  { key: "chart5", label: "chart-5" },
+] as const;
+
+const STATUS = [
+  { key: "positive", label: "chart-positive", example: "▲ Up 12%" },
+  { key: "negative", label: "chart-negative", example: "▼ Down 4%" },
+  { key: "neutral", label: "chart-neutral", example: "— Flat" },
+] as const;
+
+// A handful of arbitrary multi-series datasets, purely to show how the
+// ordinal chart-1..5 palette reads next to itself in a real chart shape.
+const BAR_DATA = [
+  [42, 68, 30, 55, 90],
+  [70, 25, 60, 40, 35],
+  [30, 55, 80, 20, 65],
+];
+
+const LINE_POINTS: Record<string, Array<[number, number]>> = {
+  chart1: [
+    [0, 60],
+    [20, 40],
+    [40, 50],
+    [60, 20],
+    [80, 30],
+    [100, 10],
+  ],
+  chart2: [
+    [0, 80],
+    [20, 70],
+    [40, 75],
+    [60, 55],
+    [80, 60],
+    [100, 45],
+  ],
+  chart3: [
+    [0, 30],
+    [20, 45],
+    [40, 25],
+    [60, 50],
+    [80, 35],
+    [100, 55],
+  ],
+  chart4: [
+    [0, 90],
+    [20, 85],
+    [40, 65],
+    [60, 70],
+    [80, 50],
+    [100, 60],
+  ],
+  chart5: [
+    [0, 15],
+    [20, 30],
+    [40, 20],
+    [60, 40],
+    [80, 25],
+    [100, 20],
+  ],
+};
+
+export const CategoricalPalette: Story = {
+  render: () => (
+    <main className="bg-background text-foreground grid min-h-screen gap-10 p-6 md:p-10">
+      <header className="grid gap-2">
+        <p className="text-muted-foreground text-sm">Foundations / charts</p>
+        <h1 className="text-4xl font-semibold tracking-tight">Chart colors</h1>
+        <p className="text-muted-foreground max-w-2xl text-base">
+          <code className="font-mono">chart-1</code> through <code className="font-mono">
+            chart-5
+          </code>{" "}
+          are an ordinal palette for arbitrary categorical series (e.g. one line per country) —
+          there's no fixed meaning to a given slot, so they're assigned by index, not by what the
+          data represents. That's different from{" "}
+          <code className="font-mono">chart-positive</code>/<code className="font-mono">
+            chart-negative
+          </code>
+          /<code className="font-mono">chart-neutral</code> below, which carry real meaning
+          (up/down/flat) and should stay semantic in any chart that shows a directional delta.
+        </p>
+      </header>
+
+      <section className="grid gap-4">
+        <h2 className="text-2xl font-semibold">Series swatches</h2>
+        <div className="grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-5">
+          {SERIES.map(({ key, label }) => (
+            <div
+              key={key}
+              className="border-border grid min-h-20 content-end rounded-md border p-3"
+              style={{ backgroundColor: CHART_CSS_VARS[key] }}
+            >
+              <span className="bg-background text-foreground w-fit rounded px-1 font-mono text-xs">
+                {label}
+              </span>
+            </div>
+          ))}
+        </div>
+      </section>
+
+      <section className="border-border bg-card grid gap-5 rounded-xl border p-6">
+        <h2 className="text-2xl font-semibold">Grouped bar chart (mock)</h2>
+        <p className="text-muted-foreground max-w-2xl text-sm">
+          Three unrelated categories, five series each — a stress test for how distinguishable
+          the palette stays side by side.
+        </p>
+        <div className="flex items-end gap-8" style={{ height: 220 }}>
+          {BAR_DATA.map((group, groupIndex) => (
+            // biome-ignore lint/suspicious/noArrayIndexKey: static mock dataset
+            <div key={groupIndex} className="flex h-full items-end gap-1.5">
+              {group.map((value, seriesIndex) => (
+                <div
+                  key={SERIES[seriesIndex].key}
+                  className="w-6 rounded-t-sm"
+                  style={{
+                    height: `${value}%`,
+                    backgroundColor: CHART_CSS_VARS[SERIES[seriesIndex].key],
+                  }}
+                  title={SERIES[seriesIndex].label}
+                />
+              ))}
+            </div>
+          ))}
+        </div>
+        <div className="flex flex-wrap gap-4">
+          {SERIES.map(({ key, label }) => (
+            <div key={key} className="flex items-center gap-2">
+              <span
+                className="size-2.5 rounded-full"
+                style={{ backgroundColor: CHART_CSS_VARS[key] }}
+                aria-hidden="true"
+              />
+              <span className="text-muted-foreground font-mono text-xs">{label}</span>
+            </div>
+          ))}
+        </div>
+      </section>
+
+      <section className="border-border bg-card grid gap-5 rounded-xl border p-6">
+        <h2 className="text-2xl font-semibold">Multi-line chart (mock)</h2>
+        <svg viewBox="0 0 100 100" preserveAspectRatio="none" className="h-56 w-full">
+          <title>Multi-series line chart using the chart-1..5 palette</title>
+          {Object.entries(LINE_POINTS).map(([key, points]) => (
+            <polyline
+              key={key}
+              fill="none"
+              strokeWidth={1.5}
+              vectorEffect="non-scaling-stroke"
+              stroke={CHART_CSS_VARS[key as keyof typeof CHART_CSS_VARS]}
+              points={points.map(([x, y]) => `${x},${y}`).join(" ")}
+            />
+          ))}
+        </svg>
+      </section>
+
+      <section className="grid gap-4">
+        <h2 className="text-2xl font-semibold">Semantic status colors</h2>
+        <p className="text-muted-foreground max-w-2xl text-sm">
+          Use these — not a numbered slot — whenever a value has an inherent direction.
+        </p>
+        <div className="grid grid-cols-1 gap-3 sm:grid-cols-3">
+          {STATUS.map(({ key, label, example }) => (
+            <div key={key} className="border-border grid gap-2 rounded-md border p-3">
+              <div className="flex items-center gap-2">
+                <span
+                  className="size-2.5 rounded-full"
+                  style={{ backgroundColor: CHART_CSS_VARS[key] }}
+                  aria-hidden="true"
+                />
+                <span className="text-muted-foreground font-mono text-xs">{label}</span>
+              </div>
+              <span className="text-lg font-semibold" style={{ color: CHART_CSS_VARS[key] }}>
+                {example}
+              </span>
+            </div>
+          ))}
+        </div>
+      </section>
+    </main>
+  ),
+};

package/src/tokens/color-systems.stories.tsx

@@ -12,11 +12,29 @@ export const SystemAppearance: Story = {
     <main className="bg-background text-foreground grid min-h-screen gap-8 p-6 md:p-10">
       <header className="grid gap-2">
         <h1 className="text-2xl font-semibold">System color roles</h1>
-        <p className="text-muted-foreground max-w-prose text-sm">These semantic roles resolve from the operating system’s light or dark appearance. CSS is the single source of their values.</p>
+        <p className="text-muted-foreground max-w-prose text-sm">
+          These semantic roles resolve from the operating system’s light or dark appearance. CSS is
+          the single source of their values.
+        </p>
       </header>
-      <div className="flex flex-wrap gap-2"><Button>Primary action</Button><Button variant="secondary">Secondary action</Button><Button variant="outline">Outline action</Button><Button variant="destructive">Delete item</Button></div>
+      <div className="flex flex-wrap gap-2">
+        <Button>Primary action</Button>
+        <Button variant="secondary">Secondary action</Button>
+        <Button variant="outline">Outline action</Button>
+        <Button variant="destructive">Delete item</Button>
+      </div>
       <div className="grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-4">
-        {colorTokenNames.map((token) => <div key={token} className="border-border grid min-h-20 content-end rounded-md border p-3" style={{ backgroundColor: `var(--color-${token})` }}><span className="bg-background text-foreground w-fit rounded px-1 font-mono text-xs">{token}</span></div>)}
+        {colorTokenNames.map((token) => (
+          <div
+            key={token}
+            className="border-border grid min-h-20 content-end rounded-md border p-3"
+            style={{ backgroundColor: `var(--color-${token})` }}
+          >
+            <span className="bg-background text-foreground w-fit rounded px-1 font-mono text-xs">
+              {token}
+            </span>
+          </div>
+        ))}
       </div>
     </main>
   ),

package/src/tokens/foundations.stories.tsx

@@ -6,27 +6,47 @@ type Story = StoryObj<typeof meta>;
 
 export const SpacingAndType: Story = {
   render: () => (
-    <main className="grid min-h-screen gap-10 bg-background p-6 text-foreground md:p-10">
+    <main className="bg-background text-foreground grid min-h-screen gap-10 p-6 md:p-10">
       <section className="grid gap-6">
         <header className="grid gap-2">
-          <p className="text-sm text-muted-foreground">Foundations / rhythm</p>
+          <p className="text-muted-foreground text-sm">Foundations / rhythm</p>
           <h1 className="text-4xl font-semibold tracking-tight">Tailwind defaults, directly.</h1>
-          <p className="max-w-2xl text-base text-muted-foreground">The specimen uses the shared Tailwind spacing and type scales.</p>
+          <p className="text-muted-foreground max-w-2xl text-base">
+            The specimen uses the shared Tailwind spacing and type scales.
+          </p>
         </header>
         <div className="grid gap-2">
           {[1, 2, 3, 4, 6, 8, 12, 16].map((size) => (
             <div key={size} className="flex items-center gap-3">
-              <span className="w-12 font-mono text-xs tabular-nums text-muted-foreground">{size}</span>
-              <div className="h-3 rounded-sm bg-accent" style={{ width: `calc(var(--spacing) * ${size})` }} aria-hidden="true" />
+              <span className="text-muted-foreground w-12 font-mono text-xs tabular-nums">
+                {size}
+              </span>
+              <div
+                className="bg-accent h-3 rounded-sm"
+                style={{ width: `calc(var(--spacing) * ${size})` }}
+                aria-hidden="true"
+              />
             </div>
           ))}
         </div>
       </section>
-      <section className="grid gap-5 rounded-xl border border-border bg-card p-6">
+      <section className="border-border bg-card grid gap-5 rounded-xl border p-6">
         <h2 className="text-2xl font-semibold">Typography scale</h2>
         <div className="grid gap-4">
-          {(["text-xs", "text-sm", "text-base", "text-lg", "text-xl", "text-2xl", "text-4xl"] as const).map((size) => (
-            <p key={size} className={`${size} text-foreground`}>{size}</p>
+          {(
+            [
+              "text-xs",
+              "text-sm",
+              "text-base",
+              "text-lg",
+              "text-xl",
+              "text-2xl",
+              "text-4xl",
+            ] as const
+          ).map((size) => (
+            <p key={size} className={`${size} text-foreground`}>
+              {size}
+            </p>
           ))}
         </div>
       </section>
@@ -36,10 +56,26 @@ export const SpacingAndType: Story = {
 
 export const Surfaces: Story = {
   render: () => (
-    <main className="grid min-h-screen gap-6 bg-background p-6 text-foreground md:p-10">
-      <header className="grid gap-2"><p className="text-sm text-muted-foreground">Foundations / surfaces</p><h1 className="text-4xl font-semibold tracking-tight">Standard semantic layers.</h1></header>
+    <main className="bg-background text-foreground grid min-h-screen gap-6 p-6 md:p-10">
+      <header className="grid gap-2">
+        <p className="text-muted-foreground text-sm">Foundations / surfaces</p>
+        <h1 className="text-4xl font-semibold tracking-tight">Standard semantic layers.</h1>
+      </header>
       <div className="grid gap-4 md:grid-cols-2">
-        {[["Background", "bg-background"], ["Card", "bg-card"], ["Popover", "bg-popover"], ["Muted", "bg-muted"]].map(([name, className]) => <div key={name} className={`${className} grid min-h-40 content-start gap-2 rounded-xl border border-border p-5`}><h2 className="text-lg font-semibold">{name}</h2><p className="text-sm text-muted-foreground">{className}</p></div>)}
+        {[
+          ["Background", "bg-background"],
+          ["Card", "bg-card"],
+          ["Popover", "bg-popover"],
+          ["Muted", "bg-muted"],
+        ].map(([name, className]) => (
+          <div
+            key={name}
+            className={`${className} border-border grid min-h-40 content-start gap-2 rounded-xl border p-5`}
+          >
+            <h2 className="text-lg font-semibold">{name}</h2>
+            <p className="text-muted-foreground text-sm">{className}</p>
+          </div>
+        ))}
       </div>
     </main>
   ),
@@ -47,12 +83,26 @@ export const Surfaces: Story = {
 
 export const Motion: Story = {
   render: () => (
-    <main className="grid min-h-screen gap-8 bg-background p-6 text-foreground md:p-10">
-      <header className="grid gap-2"><p className="text-sm text-muted-foreground">Foundations / motion</p><h1 className="text-4xl font-semibold tracking-tight">Motion stays standard and reducible.</h1></header>
+    <main className="bg-background text-foreground grid min-h-screen gap-8 p-6 md:p-10">
+      <header className="grid gap-2">
+        <p className="text-muted-foreground text-sm">Foundations / motion</p>
+        <h1 className="text-4xl font-semibold tracking-tight">
+          Motion stays standard and reducible.
+        </h1>
+      </header>
       <div className="grid gap-4 sm:grid-cols-3">
-        <div className="motion-safe:animate-in motion-safe:fade-in-0 grid min-h-32 place-content-center gap-2 rounded-xl border border-border bg-card p-5 motion-reduce:animate-none"><span className="text-lg font-semibold">Enter</span><span className="text-sm text-muted-foreground">150ms</span></div>
-        <button className="grid min-h-32 place-content-center gap-2 rounded-xl border border-border bg-card p-5 text-left transition-colors hover:bg-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring motion-reduce:transition-none"><span className="text-lg font-semibold">Press</span><span className="text-sm text-muted-foreground">System focus</span></button>
-        <div className="grid min-h-32 place-content-center gap-2 rounded-xl border border-border bg-card p-5 motion-safe:animate-pulse motion-reduce:animate-none"><span className="text-lg font-semibold">Loading</span><span className="text-sm text-muted-foreground">Stable geometry</span></div>
+        <div className="motion-safe:animate-in motion-safe:fade-in-0 border-border bg-card grid min-h-32 place-content-center gap-2 rounded-xl border p-5 motion-reduce:animate-none">
+          <span className="text-lg font-semibold">Enter</span>
+          <span className="text-muted-foreground text-sm">150ms</span>
+        </div>
+        <button className="border-border bg-card hover:bg-accent focus-visible:ring-ring grid min-h-32 place-content-center gap-2 rounded-xl border p-5 text-left transition-colors focus-visible:ring-2 focus-visible:outline-none motion-reduce:transition-none">
+          <span className="text-lg font-semibold">Press</span>
+          <span className="text-muted-foreground text-sm">System focus</span>
+        </button>
+        <div className="border-border bg-card grid min-h-32 place-content-center gap-2 rounded-xl border p-5 motion-safe:animate-pulse motion-reduce:animate-none">
+          <span className="text-lg font-semibold">Loading</span>
+          <span className="text-muted-foreground text-sm">Stable geometry</span>
+        </div>
       </div>
     </main>
   ),

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

@@ -3,54 +3,27 @@
  */
 
 export default {
-  color: {
-    "surface-canvas": "#111111",
-    "surface-panel": "#1b1b1b",
-    "surface-raised": "#222222",
-    "surface-inset": "#222222",
-    "surface-hover": "#393939",
-    "surface-pressed": "#6d6d6d",
-    "surface-selected": "#0c2175",
-    "surface-disabled": "#393939",
-    "overlay-scrim": "#000000",
-    "text-primary": "#f2f2f2",
-    "text-secondary": "#afafaf",
-    "text-tertiary": "#8a8a8a",
-    "text-disabled": "#6d6d6d",
-    "text-accent": "#5681ff",
-    "text-destructive": "#fc432e",
-    "text-success": "#099d59",
-    "text-warning": "#e06400",
-    "text-on-accent": "#ffffff",
-    "text-on-destructive": "#ffffff",
-    "text-on-success": "#ffffff",
-    "text-on-warning": "#000000",
-    "border-subtle": "#393939",
-    "border-default": "#444444",
-    "border-strong": "#6d6d6d",
-    "border-focus": "#4069fd",
-    "border-accent": "#4069fd",
-    "border-destructive": "#fc432e",
-    accent: "#4069fd",
-    "accent-hover": "#345bf8",
-    "accent-pressed": "#345bf8",
-    "accent-subtle": "#0c2175",
-    destructive: "#df3422",
-    "destructive-hover": "#cd2e1d",
-    "destructive-pressed": "#cd2e1d",
-    "destructive-subtle": "#571107",
-    success: "#068850",
-    "success-subtle": "#003326",
-    warning: "#e06400",
-    "warning-subtle": "#501b00",
-    "ring-focus": "#4069fd",
-    "chart-1": "#5681ff",
-    "chart-2": "#099d59",
-    "chart-3": "#5681ff",
-    "chart-4": "#e06400",
-    "chart-5": "#8a8a8a",
-    "chart-positive": "#099d59",
-    "chart-negative": "#fc432e",
-    "chart-neutral": "#8a8a8a",
-  },
+  background: "#111113",
+  card: "#18191b",
+  popover: "#212225",
+  muted: "#18191b",
+  "text-primary": "#edeef0",
+  "text-secondary": "#b0b4ba",
+  tertiary: "#777b84",
+  primary: "#3e63dd",
+  destructive: "#e5484d",
+  success: "#30a46c",
+  warning: "#ffc53d",
+  "primary-foreground": "#ffffff",
+  "destructive-foreground": "#ffffff",
+  "border-default": "#43484e",
+  "focus-ring": "#3e63dd",
+  "chart-1": "#3e63dd",
+  "chart-2": "#6e56cf",
+  "chart-3": "#12a594",
+  "chart-4": "#f76b15",
+  "chart-5": "#696e77",
+  "chart-positive": "#30a46c",
+  "chart-negative": "#e5484d",
+  "chart-neutral": "#5a6169",
 };

package/src/tokens/generated/dark.css

@@ -3,52 +3,27 @@
  */
 
 :root {
-  --color-surface-canvas: #111111;
-  --color-surface-panel: #1b1b1b;
-  --color-surface-raised: #222222;
-  --color-surface-inset: #222222;
-  --color-surface-hover: #393939;
-  --color-surface-pressed: #6d6d6d;
-  --color-surface-selected: #0c2175;
-  --color-surface-disabled: #393939;
-  --color-overlay-scrim: #000000;
-  --color-text-primary: #f2f2f2;
-  --color-text-secondary: #afafaf;
-  --color-text-tertiary: #8a8a8a;
-  --color-text-disabled: #6d6d6d;
-  --color-text-accent: #5681ff;
-  --color-text-destructive: #fc432e;
-  --color-text-success: #099d59;
-  --color-text-warning: #e06400;
-  --color-text-on-accent: #ffffff;
-  --color-text-on-destructive: #ffffff;
-  --color-text-on-success: #ffffff;
-  --color-text-on-warning: #000000;
-  --color-border-subtle: #393939;
-  --color-border-default: #444444;
-  --color-border-strong: #6d6d6d;
-  --color-border-focus: #4069fd;
-  --color-border-accent: #4069fd;
-  --color-border-destructive: #fc432e;
-  --color-accent: #4069fd;
-  --color-accent-hover: #345bf8;
-  --color-accent-pressed: #345bf8;
-  --color-accent-subtle: #0c2175;
-  --color-destructive: #df3422;
-  --color-destructive-hover: #cd2e1d;
-  --color-destructive-pressed: #cd2e1d;
-  --color-destructive-subtle: #571107;
-  --color-success: #068850;
-  --color-success-subtle: #003326;
-  --color-warning: #e06400;
-  --color-warning-subtle: #501b00;
-  --color-ring-focus: #4069fd;
-  --color-chart-1: #5681ff;
-  --color-chart-2: #099d59;
-  --color-chart-3: #5681ff;
-  --color-chart-4: #e06400;
-  --color-chart-5: #8a8a8a;
-  --color-chart-positive: #099d59;
-  --color-chart-negative: #fc432e;
-  --color-chart-neutral: #8a8a8a;
+  --background: #111113;
+  --card: #18191b;
+  --popover: #212225;
+  --muted: #18191b;
+  --text-primary: #edeef0;
+  --text-secondary: #b0b4ba;
+  --tertiary: #777b84;
+  --primary: #3e63dd;
+  --destructive: #e5484d;
+  --success: #30a46c;
+  --warning: #ffc53d;
+  --primary-foreground: #ffffff;
+  --destructive-foreground: #ffffff;
+  --border-default: #43484e;
+  --focus-ring: #3e63dd;
+  --chart-1: #3e63dd;
+  --chart-2: #6e56cf;
+  --chart-3: #12a594;
+  --chart-4: #f76b15;
+  --chart-5: #696e77;
+  --chart-positive: #30a46c;
+  --chart-negative: #e5484d;
+  --chart-neutral: #5a6169;
 }

package/src/tokens/generated/foundations.css

@@ -39,8 +39,8 @@
   --spacing-scale-1-5: 0.375rem;
   --spacing-scale-2-5: 0.625rem;
   --spacing-scale-3-5: 0.875rem;
-  --font-sans: -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: ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
+  --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-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;
   --text-xs: 0.75rem;
   --text-sm: 0.875rem;

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

@@ -43,6 +43,7 @@ export default {
   },
   font: {
     sans: [
+      "system-ui",
       "-apple-system",
       "BlinkMacSystemFont",
       "Segoe UI",
@@ -57,12 +58,19 @@ export default {
       "Noto Color Emoji",
     ],
     serif: [
-      "ui-serif",
-      "Georgia",
-      "Cambria",
-      "Times New Roman",
-      "Times",
-      "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",
     ],
     mono: [
       "ui-monospace",

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

@@ -3,54 +3,27 @@
  */
 
 export default {
-  color: {
-    "surface-canvas": "#ffffff",
-    "surface-panel": "#f8f8f8",
-    "surface-raised": "#ffffff",
-    "surface-inset": "#ffffff",
-    "surface-hover": "#e9e9e9",
-    "surface-pressed": "#505050",
-    "surface-selected": "#e5f0fe",
-    "surface-disabled": "#e9e9e9",
-    "overlay-scrim": "#000000",
-    "text-primary": "#131313",
-    "text-secondary": "#505050",
-    "text-tertiary": "#717171",
-    "text-disabled": "#8f8f8f",
-    "text-accent": "#3b63fb",
-    "text-destructive": "#d73220",
-    "text-success": "#079355",
-    "text-warning": "#d45b00",
-    "text-on-accent": "#ffffff",
-    "text-on-destructive": "#ffffff",
-    "text-on-success": "#ffffff",
-    "text-on-warning": "#000000",
-    "border-subtle": "#dadada",
-    "border-default": "#c6c6c6",
-    "border-strong": "#8f8f8f",
-    "border-focus": "#4b75ff",
-    "border-accent": "#3b63fb",
-    "border-destructive": "#d73220",
-    accent: "#3b63fb",
-    "accent-hover": "#274dea",
-    "accent-pressed": "#274dea",
-    "accent-subtle": "#e5f0fe",
-    destructive: "#d73220",
-    "destructive-hover": "#b72818",
-    "destructive-pressed": "#b72818",
-    "destructive-subtle": "#ffebe8",
-    success: "#05834e",
-    "success-subtle": "#d7f7e1",
-    warning: "#fc7d00",
-    "warning-subtle": "#ffeccf",
-    "ring-focus": "#4b75ff",
-    "chart-1": "#4b75ff",
-    "chart-2": "#079355",
-    "chart-3": "#4b75ff",
-    "chart-4": "#d45b00",
-    "chart-5": "#8f8f8f",
-    "chart-positive": "#079355",
-    "chart-negative": "#f03823",
-    "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",
 };