@ponti-studios/ui 0.1.2 → 0.3.0

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

@@ -1,132 +1,22 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
 
 import { Button } from "../components/primitives/button";
-import { colorSystems, colorTokenNames, type ColorMode } from "./colors";
-
-const meta: Meta = {
-  title: "Foundations/Colors",
-  parameters: { layout: "fullscreen" },
-};
+import { colorTokenNames } from "./index";
 
+const meta: Meta = { title: "Foundations/Colors", parameters: { layout: "fullscreen" } };
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-const groups = {
-  surfaces: colorTokenNames.filter((token) => token.startsWith("surface-")),
-  content: colorTokenNames.filter((token) => token.startsWith("text-")),
-  structure: colorTokenNames.filter((token) => token.startsWith("border-")),
-  intent: colorTokenNames.filter(
-    (token) =>
-      token.startsWith("accent") ||
-      token.startsWith("destructive") ||
-      token.startsWith("success") ||
-      token.startsWith("warning") ||
-      token === "overlay-scrim" ||
-      token === "ring-focus",
-  ),
-};
-
-function Swatch({ mode, token }: { mode: ColorMode; token: string }) {
-  const value = colorSystems.ponti[mode][token as keyof (typeof colorSystems.ponti)[typeof mode]];
-  const foreground = token.startsWith("text-") ? value : colorSystems.ponti[mode]["text-primary"];
-
-  return (
-    <div className="grid min-w-0 gap-2">
-      <div
-        className="flex min-h-16 items-end overflow-hidden rounded-md border p-2"
-        style={{
-          background: value,
-          color: foreground,
-          borderColor: colorSystems.ponti[mode]["border-default"],
-        }}
-      >
-        <span className="font-mono text-[11px] break-all">Aa</span>
-      </div>
-      <span
-        className="font-mono text-[11px] break-all"
-        style={{ color: colorSystems.ponti[mode]["text-secondary"] }}
-      >
-        {token}
-      </span>
-    </div>
-  );
-}
-
-function ThemePanel({ mode }: { mode: ColorMode }) {
-  const theme = colorSystems.ponti[mode];
-
-  return (
-    <section
-      className="grid min-w-0 gap-6 rounded-xl border p-5"
-      style={{
-        background: theme["surface-canvas"],
-        color: theme["text-primary"],
-        borderColor: theme["border-default"],
-      }}
-      aria-label={`Ponti ${mode} color system`}
-    >
-      <header className="grid gap-2">
-        <p className="font-mono text-xs uppercase" style={{ color: theme["text-secondary"] }}>
-          Ponti / {mode}
-        </p>
-        <h2 className="text-xl font-semibold">Semantic roles</h2>
-        <p className="max-w-prose text-sm" style={{ color: theme["text-secondary"] }}>
-          Components consume meaning, while this palette supplies the light or dark value.
-        </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="ghost">Quiet action</Button>
-        <Button variant="destructive">Delete item</Button>
-      </div>
-      <div className="grid gap-6">
-        {Object.entries(groups).map(([title, tokens]) => (
-          <section key={title} className="grid gap-3">
-            <h3 className="text-sm font-semibold capitalize">{title}</h3>
-            <div className="grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-4">
-              {tokens.map((token) => (
-                <Swatch key={token} mode={mode} token={token} />
-              ))}
-            </div>
-          </section>
-        ))}
-      </div>
-    </section>
-  );
-}
-
-export const LightAndDark: Story = {
-  render: () => (
-    <main className="grid min-h-screen gap-4 bg-slate-100 p-4 md:p-6 dark:bg-slate-950">
-      <ThemePanel mode="light" />
-      <ThemePanel mode="dark" />
-    </main>
-  ),
-};
-
-export const ButtonStates: Story = {
+export const SystemAppearance: Story = {
   render: () => (
-    <main className="bg-canvas text-primary grid min-h-screen gap-6 p-6">
+    <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">Button state matrix</h1>
-        <p className="text-secondary max-w-prose text-sm">
-          Inspect hover, focus, press, disabled, destructive, and loading behavior in the toolbar’s
-          light and dark modes.
-        </p>
+        <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>
       </header>
-      <div className="grid max-w-3xl gap-3 sm:grid-cols-2">
-        <Button>Primary action</Button>
-        <Button variant="secondary">Secondary action</Button>
-        <Button variant="outline">Outline action</Button>
-        <Button variant="ghost">Quiet action</Button>
-        <Button variant="destructive">Delete item</Button>
-        <Button variant="link">Read more</Button>
-        <Button disabled>Disabled action</Button>
-        <Button isLoading loadingLabel="Saving">
-          Save changes
-        </Button>
+      <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>)}
       </div>
     </main>
   ),

package/src/tokens/foundations.stories.tsx

@@ -1,59 +1,33 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
 
-const meta: Meta = {
-  title: "Foundations/System Lab",
-  parameters: { layout: "fullscreen" },
-};
-
+const meta: Meta = { title: "Foundations/Tailwind Defaults", parameters: { layout: "fullscreen" } };
 export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const SpacingAndType: Story = {
   render: () => (
-    <main className="bg-canvas text-primary grid min-h-screen gap-10 p-6 md:p-10">
+    <main className="grid min-h-screen gap-10 bg-background p-6 text-foreground md:p-10">
       <section className="grid gap-6">
         <header className="grid gap-2">
-          <p className="body-4 text-secondary">Foundations / rhythm</p>
-          <h1 className="display-1">Space gives the interface its pace.</h1>
-          <p className="body-1 text-secondary max-w-2xl">
-            The specimen uses the shared interval scale and the four local typography roles.
-          </p>
+          <p className="text-sm text-muted-foreground">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>
         </header>
         <div className="grid gap-2">
-          {[4, 8, 12, 16, 24, 32, 48, 64].map((size) => (
+          {[1, 2, 3, 4, 6, 8, 12, 16].map((size) => (
             <div key={size} className="flex items-center gap-3">
-              <span className="text-secondary w-12 font-mono text-xs tabular-nums">{size}px</span>
-              <div
-                className="bg-accent h-3 rounded-sm"
-                style={{ width: size }}
-                aria-hidden="true"
-              />
+              <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" />
             </div>
           ))}
         </div>
       </section>
-      <section className="border-subtle grid gap-5 rounded-xl border p-6">
-        <h2 className="heading-2">Typography roles</h2>
+      <section className="grid gap-5 rounded-xl border border-border bg-card p-6">
+        <h2 className="text-2xl font-semibold">Typography scale</h2>
         <div className="grid gap-4">
-          <div>
-            <p className="text-secondary text-xs uppercase">Display</p>
-            <p className="display-2">A clear beginning</p>
-          </div>
-          <div>
-            <p className="text-secondary text-xs uppercase">Body</p>
-            <p className="body-1 max-w-2xl">
-              Readable content should have room to breathe and should not require the user to decode
-              the container.
-            </p>
-          </div>
-          <div>
-            <p className="text-secondary text-xs uppercase">Label</p>
-            <p className="body-3 font-medium">Current collection</p>
-          </div>
-          <div>
-            <p className="text-secondary text-xs uppercase">Caption</p>
-            <p className="body-4 text-secondary">Updated just now</p>
-          </div>
+          {(["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>
     </main>
@@ -62,28 +36,10 @@ export const SpacingAndType: Story = {
 
 export const Surfaces: Story = {
   render: () => (
-    <main className="bg-canvas text-primary grid min-h-screen gap-6 p-6 md:p-10">
-      <header className="grid gap-2">
-        <p className="body-4 text-secondary">Foundations / surfaces</p>
-        <h1 className="display-1">Quiet layers, clear ownership.</h1>
-      </header>
+    <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>
       <div className="grid gap-4 md:grid-cols-2">
-        <div className="bg-canvas border-subtle grid min-h-40 content-start gap-2 rounded-xl border p-5">
-          <h2 className="heading-3">Canvas</h2>
-          <p className="body-3 text-secondary">The page background.</p>
-        </div>
-        <div className="bg-panel border-subtle grid min-h-40 content-start gap-2 rounded-xl border p-5">
-          <h2 className="heading-3">Panel</h2>
-          <p className="body-3 text-secondary">A contained region.</p>
-        </div>
-        <div className="bg-raised border-subtle grid min-h-40 content-start gap-2 rounded-xl border p-5">
-          <h2 className="heading-3">Raised</h2>
-          <p className="body-3 text-secondary">An overlay or elevated layer.</p>
-        </div>
-        <div className="bg-inset border-subtle grid min-h-40 content-start gap-2 rounded-xl border p-5">
-          <h2 className="heading-3">Inset</h2>
-          <p className="body-3 text-secondary">A recessed working region.</p>
-        </div>
+        {[["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>)}
       </div>
     </main>
   ),
@@ -91,61 +47,13 @@ export const Surfaces: Story = {
 
 export const Motion: Story = {
   render: () => (
-    <main className="bg-canvas text-primary grid min-h-screen gap-8 p-6 md:p-10">
-      <header className="grid gap-2">
-        <p className="body-4 text-secondary">Foundations / motion</p>
-        <h1 className="display-1">Motion should explain, not perform.</h1>
-        <p className="body-1 text-secondary max-w-2xl">
-          Use the Storybook motion-reduction setting to confirm that nonessential movement
-          disappears.
-        </p>
-      </header>
+    <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>
       <div className="grid gap-4 sm:grid-cols-3">
-        <div className="bg-panel border-subtle motion-safe:animate-in motion-safe:fade-in-0 motion-safe:slide-in-from-bottom-2 grid min-h-32 place-content-center gap-2 rounded-xl border p-5 duration-150 motion-reduce:animate-none">
-          <span className="heading-3">Enter</span>
-          <span className="body-4 text-secondary">150ms / 6px</span>
-        </div>
-        <button className="bg-panel border-subtle text-primary hover:bg-surface-hover active:bg-surface-pressed focus-visible:ring-focus grid min-h-32 place-content-center gap-2 rounded-xl border p-5 text-left focus-visible:ring-2 focus-visible:outline-none motion-safe:transition-colors">
-          <span className="heading-3">Press</span>
-          <span className="body-4 text-secondary">Immediate feedback</span>
-        </button>
-        <div className="bg-panel border-subtle grid min-h-32 place-content-center gap-2 rounded-xl border p-5 motion-safe:animate-pulse motion-reduce:animate-none">
-          <span className="heading-3">Loading</span>
-          <span className="body-4 text-secondary">Geometry remains stable</span>
-        </div>
+        <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>
     </main>
   ),
 };
-
-export const Accessibility: Story = {
-  render: () => (
-    <main className="bg-canvas text-primary grid min-h-screen gap-8 p-6 md:p-10">
-      <header className="grid gap-2">
-        <p className="body-4 text-secondary">Foundations / accessibility</p>
-        <h1 className="display-1">The system should be calm for everyone.</h1>
-      </header>
-      <section className="border-subtle grid max-w-2xl gap-5 rounded-xl border p-6">
-        <label className="grid gap-2">
-          <span className="body-3 font-medium">Email address</span>
-          <input
-            className="bg-canvas border-default text-primary focus-visible:ring-focus h-11 rounded-md border px-3 outline-none focus-visible:ring-2"
-            placeholder="you@example.com"
-          />
-          <span className="body-4 text-secondary">Use a reachable address for notifications.</span>
-        </label>
-        <div className="flex flex-wrap gap-3">
-          <button className="bg-accent text-on-accent focus-visible:ring-focus min-h-11 rounded-md px-4 focus-visible:ring-2 focus-visible:outline-none">
-            Continue
-          </button>
-          <button disabled className="bg-panel text-disabled min-h-11 rounded-md px-4">
-            Unavailable
-          </button>
-        </div>
-        <p className="body-4 text-destructive" role="alert">
-          Example error: enter a valid email address.
-        </p>
-      </section>
-    </main>
-  ),
-};

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

@@ -0,0 +1,56 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+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",
+  },
+};

package/src/tokens/generated/dark.css

@@ -0,0 +1,54 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+: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;
+}

package/src/tokens/generated/foundations.css

@@ -0,0 +1,148 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --spacing: 0.25rem;
+  --spacing-scale-0: 0rem;
+  --spacing-scale-1: 0.25rem;
+  --spacing-scale-2: 0.5rem;
+  --spacing-scale-3: 0.75rem;
+  --spacing-scale-4: 1rem;
+  --spacing-scale-5: 1.25rem;
+  --spacing-scale-6: 1.5rem;
+  --spacing-scale-7: 1.75rem;
+  --spacing-scale-8: 2rem;
+  --spacing-scale-9: 2.25rem;
+  --spacing-scale-10: 2.5rem;
+  --spacing-scale-11: 2.75rem;
+  --spacing-scale-12: 3rem;
+  --spacing-scale-14: 3.5rem;
+  --spacing-scale-16: 4rem;
+  --spacing-scale-20: 5rem;
+  --spacing-scale-24: 6rem;
+  --spacing-scale-28: 7rem;
+  --spacing-scale-32: 8rem;
+  --spacing-scale-36: 9rem;
+  --spacing-scale-40: 10rem;
+  --spacing-scale-44: 11rem;
+  --spacing-scale-48: 12rem;
+  --spacing-scale-52: 13rem;
+  --spacing-scale-56: 14rem;
+  --spacing-scale-60: 15rem;
+  --spacing-scale-64: 16rem;
+  --spacing-scale-72: 18rem;
+  --spacing-scale-80: 20rem;
+  --spacing-scale-96: 24rem;
+  --spacing-scale-px: 1px;
+  --spacing-scale-0-5: 0.125rem;
+  --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-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
+  --text-xs: 0.75rem;
+  --text-sm: 0.875rem;
+  --text-base: 1rem;
+  --text-lg: 1.125rem;
+  --text-xl: 1.25rem;
+  --text-2xl: 1.5rem;
+  --text-3xl: 1.875rem;
+  --text-4xl: 2.25rem;
+  --text-5xl: 3rem;
+  --text-6xl: 3.75rem;
+  --text-7xl: 4.5rem;
+  --text-8xl: 6rem;
+  --text-9xl: 8rem;
+  --text-line-height-xs: 1.3333333333;
+  --text-line-height-sm: 1.4285714286;
+  --text-line-height-base: 1.5;
+  --text-line-height-lg: 1.5555555556;
+  --text-line-height-xl: 1.4;
+  --text-line-height-2xl: 1.3333333333;
+  --text-line-height-3xl: 1.2;
+  --text-line-height-4xl: 1.1111111111;
+  --text-line-height-5xl: 1;
+  --text-line-height-6xl: 1;
+  --text-line-height-7xl: 1;
+  --text-line-height-8xl: 1;
+  --text-line-height-9xl: 1;
+  --font-weight-thin: 100;
+  --font-weight-extralight: 200;
+  --font-weight-light: 300;
+  --font-weight-normal: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+  --font-weight-bold: 700;
+  --font-weight-extrabold: 800;
+  --font-weight-black: 900;
+  --tracking-tighter: -0.05em;
+  --tracking-tight: -0.025em;
+  --tracking-normal: 0em;
+  --tracking-wide: 0.025em;
+  --tracking-wider: 0.05em;
+  --tracking-widest: 0.1em;
+  --leading-tight: 1.25;
+  --leading-snug: 1.375;
+  --leading-normal: 1.5;
+  --leading-relaxed: 1.625;
+  --leading-loose: 2;
+  --radius-xs: 0.125rem;
+  --radius-sm: 0.25rem;
+  --radius-md: 0.375rem;
+  --radius-lg: 0.5rem;
+  --radius-xl: 0.75rem;
+  --radius-2xl: 1rem;
+  --radius-3xl: 1.5rem;
+  --radius-4xl: 2rem;
+  --radius-full: 9999px;
+  --shadow-2xs: 0px 1px 0px 0px rgb(0 0 0 / 0.05);
+  --shadow-xs: 0px 1px 2px 0px rgb(0 0 0 / 0.05);
+  --shadow-sm: 0px 1px 3px 0px rgb(0 0 0 / 0.1), 0px 1px 2px -1px rgb(0 0 0 / 0.1);
+  --shadow-md: 0px 4px 6px -1px rgb(0 0 0 / 0.1), 0px 2px 4px -2px rgb(0 0 0 / 0.1);
+  --shadow-lg: 0px 10px 15px -3px rgb(0 0 0 / 0.1), 0px 4px 6px -4px rgb(0 0 0 / 0.1);
+  --shadow-xl: 0px 20px 25px -5px rgb(0 0 0 / 0.1), 0px 8px 10px -6px rgb(0 0 0 / 0.1);
+  --shadow-2xl: 0px 25px 50px -12px rgb(0 0 0 / 0.25);
+  --shadow-none: 0px 0px 0px 0px transparent;
+  --breakpoint-sm: 40rem;
+  --breakpoint-md: 48rem;
+  --breakpoint-lg: 64rem;
+  --breakpoint-xl: 80rem;
+  --breakpoint-2xl: 96rem;
+  --container-3xs: 16rem;
+  --container-2xs: 18rem;
+  --container-xs: 20rem;
+  --container-sm: 24rem;
+  --container-md: 28rem;
+  --container-lg: 32rem;
+  --container-xl: 36rem;
+  --container-2xl: 42rem;
+  --container-3xl: 48rem;
+  --container-4xl: 56rem;
+  --container-5xl: 64rem;
+  --container-6xl: 72rem;
+  --container-7xl: 80rem;
+  --z-index-0: 0;
+  --z-index-10: 10;
+  --z-index-20: 20;
+  --z-index-30: 30;
+  --z-index-40: 40;
+  --z-index-50: 50;
+  --z-index-auto: auto;
+  --ease-in: cubic-bezier(0.4, 0, 1, 1);
+  --ease-out: cubic-bezier(0, 0, 0.2, 1);
+  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
+  --duration-75: 75ms;
+  --duration-100: 100ms;
+  --duration-150: 150ms;
+  --duration-200: 200ms;
+  --duration-300: 300ms;
+  --duration-500: 500ms;
+  --duration-700: 700ms;
+  --duration-1000: 1000ms;
+  --animate-spin: spin 1s linear infinite;
+  --animate-ping: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
+  --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+  --animate-bounce: bounce 1s infinite;
+}