@ponti-studios/ui 2.0.1 → 3.0.0

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

@@ -1,189 +0,0 @@
-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/styles/tokens/color-systems.stories.tsx

@@ -1,190 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-
-import { Button } from "../../components/primitives/button";
-import { colors } from "./css-vars";
-import type { ColorToken } from "./index";
-
-const meta: Meta = { title: "Foundations/Colors", parameters: { layout: "fullscreen" } };
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-type Role = {
-  token: ColorToken;
-  purpose: string;
-  foreground?: ColorToken;
-};
-
-const surfaces: Role[] = [
-  { token: "background", purpose: "The page and app shell surface." },
-  { token: "card", purpose: "Content containers and grouped information." },
-  { token: "popover", purpose: "Dropdowns, dialogs, and floating panels." },
-  { token: "muted", purpose: "Quiet, disabled, and loading surfaces." },
-  { token: "secondary", purpose: "Secondary actions and selectable chips." },
-  {
-    token: "accent",
-    purpose: "Tinted emphasis and hover surfaces.",
-    foreground: "accent-foreground",
-  },
-];
-
-const text: Role[] = [
-  { token: "text-primary", purpose: "Primary reading text." },
-  { token: "text-secondary", purpose: "Supporting labels and descriptions." },
-  { token: "tertiary", purpose: "Metadata, timestamps, and placeholders." },
-  { token: "text-accent", purpose: "Standalone links and accent affordances." },
-  { token: "text-success", purpose: "Standalone positive status text and icons." },
-  { token: "text-warning", purpose: "Standalone cautionary status text and icons." },
-  { token: "text-destructive", purpose: "Standalone error and destructive text." },
-];
-
-const actions: Role[] = [
-  {
-    token: "primary",
-    purpose: "The strongest action on a screen.",
-    foreground: "primary-foreground",
-  },
-  {
-    token: "destructive",
-    purpose: "Irreversible or dangerous actions.",
-    foreground: "destructive-foreground",
-  },
-  {
-    token: "success",
-    purpose: "Positive indicators and confirmed states.",
-    foreground: "success-foreground",
-  },
-  {
-    token: "warning",
-    purpose: "Caution indicators and attention states.",
-    foreground: "warning-foreground",
-  },
-];
-
-const system: Role[] = [
-  { token: "border-default", purpose: "Default borders, inputs, and dividers." },
-  { token: "focus-ring", purpose: "Keyboard focus indication." },
-  { token: "overlay-scrim", purpose: "Backdrop behind modal surfaces." },
-];
-
-const charts: Role[] = [
-  { token: "chart-1", purpose: "Categorical data series one." },
-  { token: "chart-2", purpose: "Categorical data series two." },
-  { token: "chart-3", purpose: "Categorical data series three." },
-  { token: "chart-4", purpose: "Categorical data series four." },
-  { token: "chart-5", purpose: "Categorical data series five." },
-  { token: "chart-positive", purpose: "Positive trend in a visualization." },
-  { token: "chart-negative", purpose: "Negative trend in a visualization." },
-  { token: "chart-neutral", purpose: "Neutral or baseline trend." },
-];
-
-function RoleCard({ token, purpose, foreground }: Role) {
-  const isText = token.startsWith("text-") || token === "tertiary";
-  const isSurface = surfaces.some((role) => role.token === token);
-  const swatchOnly = !isText && !isSurface && !foreground;
-  const background = isText ? "background" : token;
-  const contentColor = isText ? token : (foreground ?? "text-primary");
-
-  return (
-    <article className="border-border overflow-hidden rounded-md border bg-card">
-      <div
-        className="flex min-h-24 items-end p-3"
-        style={{
-          backgroundColor: colors[swatchOnly ? "card" : background],
-          color: colors[swatchOnly ? "text-primary" : contentColor],
-        }}
-      >
-        {swatchOnly ? (
-          <span
-            aria-hidden="true"
-            className="h-full min-h-16 w-full rounded-sm"
-            style={{ backgroundColor: colors[token] }}
-          />
-        ) : (
-          <span className="font-mono text-xs">{token}</span>
-        )}
-      </div>
-      <div className="grid gap-1 p-3">
-        <code className="text-sm font-medium">--{token}</code>
-        <p className="text-muted-foreground text-sm">{purpose}</p>
-        {foreground && (
-          <p className="text-muted-foreground text-xs">Paired content: --{foreground}</p>
-        )}
-      </div>
-    </article>
-  );
-}
-
-function RoleSection({
-  title,
-  description,
-  roles,
-}: {
-  title: string;
-  description: string;
-  roles: Role[];
-}) {
-  return (
-    <section className="grid gap-3">
-      <div className="grid gap-1">
-        <h2 className="text-lg font-semibold">{title}</h2>
-        <p className="text-muted-foreground text-sm">{description}</p>
-      </div>
-      <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
-        {roles.map((role) => (
-          <RoleCard key={role.token} {...role} />
-        ))}
-      </div>
-    </section>
-  );
-}
-
-export const SystemAppearance: Story = {
-  render: () => (
-    <main className="bg-background text-foreground grid min-h-screen gap-10 p-6 md:p-10">
-      <header className="grid max-w-3xl gap-2">
-        <p className="text-accent-text text-xs font-medium uppercase tracking-widest">
-          Foundations
-        </p>
-        <h1 className="text-2xl font-semibold">Color roles</h1>
-        <p className="text-muted-foreground text-sm">
-          Every color has a job. These roles resolve from the operating system’s light or dark
-          appearance and are the only colors components should consume.
-        </p>
-        <div className="flex flex-wrap gap-2 pt-2">
-          <Button>Primary action</Button>
-          <Button variant="secondary">Secondary action</Button>
-          <Button variant="outline">Outline action</Button>
-          <Button variant="destructive">Delete item</Button>
-        </div>
-      </header>
-
-      <div className="grid gap-10">
-        <RoleSection
-          title="Surfaces"
-          description="Backgrounds establish hierarchy. Use the lightest appropriate surface and let spacing do the rest."
-          roles={surfaces}
-        />
-        <RoleSection
-          title="Text"
-          description="Text roles describe hierarchy or state. Use a text role when content sits directly on a surface."
-          roles={text}
-        />
-        <RoleSection
-          title="Actions and status"
-          description="Fill roles communicate action or state and always pair with their matching foreground."
-          roles={actions}
-        />
-        <RoleSection
-          title="System"
-          description="Structural colors support boundaries, focus, and modal layering without competing with content."
-          roles={system}
-        />
-        <RoleSection
-          title="Charts"
-          description="Chart roles are for data visualization only. They do not communicate interaction or severity in product UI."
-          roles={charts}
-        />
-      </div>
-    </main>
-  ),
-};

package/src/styles/tokens/css-vars.ts

@@ -1,15 +0,0 @@
-import { colorTokenNames, type ColorToken } from "./index";
-
-/**
- * Color tokens as CSS `var()` references, for consumers whose runtime resolves
- * the CSS cascade (i.e. web). Kept out of `./tokens` because React Native has
- * no cascade — a `var(--token)` string there fails silently, rendering as an
- * unparseable color rather than throwing.
- */
-export const colors = colorTokenNames.reduce(
-  (accumulator, token) => {
-    accumulator[token] = `var(--${token})`;
-    return accumulator;
-  },
-  {} as Record<ColorToken, `var(--${string})`>,
-);

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

@@ -1,39 +0,0 @@
-/**
- * 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

@@ -1,39 +0,0 @@
-/**
- * Do not edit directly, this file was auto-generated.
- */
-
-export default {
-  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.css

@@ -1,39 +0,0 @@
-/**
- * Do not edit directly, this file was auto-generated.
- */
-
-:root {
-  --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/foundations.css

@@ -1,149 +0,0 @@
-/**
- * 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: 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: '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;
-  --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);
-  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 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;
-}