@arun-dev/tokens 0.1.0

package/package.json

@@ -0,0 +1,70 @@
+{
+  "name": "@arun-dev/tokens",
+  "version": "0.1.0",
+  "description": "Pure-CSS design tokens with white-label brand generation — primitives, brand palettes, semantic layers, and the createBrand() generator",
+  "license": "MIT",
+  "type": "module",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/arun9483/arun-design-system.git",
+    "directory": "packages/tokens"
+  },
+  "keywords": [
+    "design-tokens",
+    "css",
+    "design-system",
+    "theming",
+    "white-label"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "files": [
+    "dist",
+    "src",
+    "!src/**/*.unit.spec.ts"
+  ],
+  "exports": {
+    "./base": "./src/base.css",
+    "./brands/default": "./src/brands/default.css",
+    "./brands/default/palette": "./src/brands/default/palette.css",
+    "./brands/default/semantic": "./src/brands/default/semantic.css",
+    "./primitives/typography": "./src/primitives/typography.css",
+    "./primitives/spacing": "./src/primitives/spacing.css",
+    "./primitives/radius": "./src/primitives/radius.css",
+    "./primitives/shadow": "./src/primitives/shadow.css",
+    "./primitives/motion": "./src/primitives/motion.css",
+    "./primitives/elevation": "./src/primitives/elevation.css",
+    "./primitives/breakpoints": "./src/primitives/breakpoints.css",
+    "./primitives/fonts": "./src/primitives/fonts.css",
+    "./createBrand": {
+      "import": {
+        "types": "./dist/createBrand.d.ts",
+        "default": "./dist/createBrand.js"
+      },
+      "require": {
+        "types": "./dist/createBrand.d.cts",
+        "default": "./dist/createBrand.cjs"
+      }
+    }
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "devDependencies": {
+    "eslint": "9.39.4",
+    "tsup": "8.5.1",
+    "typescript": "5.9.3",
+    "vitest": "3.2.4",
+    "@arun-dev/config": "0.0.0"
+  },
+  "scripts": {
+    "build": "tsup",
+    "clean": "rm -rf dist .turbo",
+    "typecheck": "tsc --noEmit",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix",
+    "test": "pnpm run test:unit",
+    "test:unit": "vitest run --passWithNoTests --config vitest.unit.config.ts"
+  }
+}

package/src/base.css

@@ -0,0 +1,10 @@
+/* Brand-agnostic primitives — import once as the structural token layer */
+/* fonts.css omitted: @font-face loading is a consumer concern.
+   Next.js consumers use next/font/local in layout.tsx; others import fonts.css directly. */
+@import './primitives/typography.css';
+@import './primitives/spacing.css';
+@import './primitives/radius.css';
+@import './primitives/shadow.css';
+@import './primitives/motion.css';
+@import './primitives/elevation.css';
+@import './primitives/breakpoints.css';

package/src/brands/default/palette.css

@@ -0,0 +1,28 @@
+:root {
+  /* Brand palette — indigo */
+  --color-brand-50: #eef2ff;
+  --color-brand-100: #e0e7ff;
+  --color-brand-200: #c7d2fe;
+  --color-brand-300: #a5b4fc;
+  --color-brand-400: #818cf8;
+  --color-brand-500: #6366f1;
+  --color-brand-600: #4f46e5;
+  --color-brand-700: #4338ca;
+  --color-brand-800: #3730a3;
+  --color-brand-900: #312e81;
+  --color-brand-950: #1e1b4b;
+
+  /* Neutral palette — slate (cool blue-gray) */
+  --color-neutral-0: #ffffff;
+  --color-neutral-50: #f8fafc;
+  --color-neutral-100: #f1f5f9;
+  --color-neutral-200: #e2e8f0;
+  --color-neutral-300: #cbd5e1;
+  --color-neutral-400: #96a5ba; /* nudged +2 per channel → 7.13:1 on neutral-900 (AAA) */
+  --color-neutral-500: #64748b;
+  --color-neutral-600: #475569;
+  --color-neutral-700: #334155;
+  --color-neutral-800: #1e293b;
+  --color-neutral-900: #0f172a;
+  --color-neutral-950: #020617;
+}

package/src/brands/default/semantic.css

@@ -0,0 +1,162 @@
+/* Semantic tokens — derived from default palette.
+   Consumer contract: all variables listed here must be defined for @arun-dev/ui to render correctly.
+   Consumers may import this file and override individual variables, or replace it entirely.
+
+   Source of truth for createBrand()'s deriveLight()/deriveDark() (src/createBrand.ts) — if you
+   change a value here, change it there too. Guarded by createBrand.unit.spec.ts. */
+
+:root {
+  /* ── Backgrounds ── */
+  --color-bg-primary: var(--color-neutral-0);
+  --color-bg-secondary: var(--color-neutral-50);
+  --color-bg-surface: var(--color-neutral-100);
+  --color-bg-accent: var(--color-brand-50);
+  --color-bg-inverse: var(--color-neutral-900);
+
+  /* ── Text ── */
+  --color-text-primary: var(--color-neutral-900);
+  --color-text-secondary: var(--color-neutral-700); /* 10.34:1 on white (AAA) */
+  --color-text-muted: var(--color-neutral-600); /*  7.58:1 on white (AAA) */
+  --color-text-accent: var(--color-brand-700); /*  7.89:1 on white (AAA) */
+  --color-text-inverse: var(--color-neutral-50);
+  --color-text-on-accent: var(--color-neutral-0);
+
+  /* ── Borders ── */
+  --color-border-default: var(--color-neutral-200);
+  --color-border-subtle: var(--color-neutral-100);
+  --color-border-strong: var(--color-neutral-300);
+  --color-border-accent: var(--color-brand-300);
+
+  /* ── Status ── */
+  --color-status-success: #15803d;
+  --color-status-success-bg: #f0fdf4;
+  --color-status-error: #b91c1c;
+  --color-status-error-bg: #fef2f2;
+  --color-status-warning: #b45309;
+  --color-status-warning-bg: #fffbeb;
+  --color-status-info: var(--color-brand-500);
+  --color-status-info-bg: var(--color-brand-50);
+}
+
+/* ── Dark mode — system preference ── */
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme='light']) {
+    --color-bg-primary: var(--color-neutral-900);
+    --color-bg-secondary: var(--color-neutral-800);
+    --color-bg-surface: var(--color-neutral-700);
+    --color-bg-accent: var(--color-brand-950);
+    --color-bg-inverse: var(--color-neutral-50);
+
+    --color-text-primary: var(--color-neutral-100);
+    --color-text-secondary: var(--color-neutral-300); /* 12.03:1 on neutral-900 (AAA) */
+    --color-text-muted: var(--color-neutral-400); /*  7.13:1 on neutral-900 (AAA, palette nudged) */
+    --color-text-accent: var(--color-brand-300); /*  8.97:1 on neutral-900 (AAA) */
+    --color-text-inverse: var(--color-neutral-900);
+    --color-text-on-accent: var(--color-neutral-0);
+
+    --color-border-default: var(--color-neutral-700);
+    --color-border-subtle: var(--color-neutral-800);
+    --color-border-strong: var(--color-neutral-600);
+    --color-border-accent: var(--color-brand-700);
+
+    --color-status-success: #4ade80;
+    --color-status-success-bg: #052e16;
+    --color-status-error: #f87171;
+    --color-status-error-bg: #450a0a;
+    --color-status-warning: #fbbf24;
+    --color-status-warning-bg: #451a03;
+    --color-status-info: var(--color-brand-300);
+    --color-status-info-bg: var(--color-brand-950);
+  }
+}
+
+/* ── Dark mode — explicit override ── */
+[data-theme='dark'] {
+  --color-bg-primary: var(--color-neutral-900);
+  --color-bg-secondary: var(--color-neutral-800);
+  --color-bg-surface: var(--color-neutral-700);
+  --color-bg-accent: var(--color-brand-950);
+  --color-bg-inverse: var(--color-neutral-50);
+
+  --color-text-primary: var(--color-neutral-100);
+  --color-text-secondary: var(--color-neutral-300); /* 12.03:1 on neutral-900 (AAA) */
+  --color-text-muted: var(--color-neutral-400); /*  7.13:1 on neutral-900 (AAA, palette nudged) */
+  --color-text-accent: var(--color-brand-300); /*  8.97:1 on neutral-900 (AAA) */
+  --color-text-inverse: var(--color-neutral-900);
+  --color-text-on-accent: var(--color-neutral-0);
+
+  --color-border-default: var(--color-neutral-700);
+  --color-border-subtle: var(--color-neutral-800);
+  --color-border-strong: var(--color-neutral-600);
+  --color-border-accent: var(--color-brand-700);
+
+  --color-status-success: #4ade80;
+  --color-status-success-bg: #052e16;
+  --color-status-error: #f87171;
+  --color-status-error-bg: #450a0a;
+  --color-status-warning: #fbbf24;
+  --color-status-warning-bg: #451a03;
+  --color-status-info: var(--color-brand-300);
+  --color-status-info-bg: var(--color-brand-950);
+}
+
+/* ── Light mode — explicit override ── */
+[data-theme='light'] {
+  --color-bg-primary: var(--color-neutral-0);
+  --color-bg-secondary: var(--color-neutral-50);
+  --color-bg-surface: var(--color-neutral-100);
+  --color-bg-accent: var(--color-brand-50);
+  --color-bg-inverse: var(--color-neutral-900);
+
+  --color-text-primary: var(--color-neutral-900);
+  --color-text-secondary: var(--color-neutral-700); /* 10.34:1 on white (AAA) */
+  --color-text-muted: var(--color-neutral-600); /*  7.58:1 on white (AAA) */
+  --color-text-accent: var(--color-brand-700); /*  7.89:1 on white (AAA) */
+  --color-text-inverse: var(--color-neutral-50);
+  --color-text-on-accent: var(--color-neutral-0);
+
+  --color-border-default: var(--color-neutral-200);
+  --color-border-subtle: var(--color-neutral-100);
+  --color-border-strong: var(--color-neutral-300);
+  --color-border-accent: var(--color-brand-300);
+
+  --color-status-success: #15803d;
+  --color-status-success-bg: #f0fdf4;
+  --color-status-error: #b91c1c;
+  --color-status-error-bg: #fef2f2;
+  --color-status-warning: #b45309;
+  --color-status-warning-bg: #fffbeb;
+  --color-status-info: var(--color-brand-500);
+  --color-status-info-bg: var(--color-brand-50);
+}
+
+/* ── Code block — always dark, theme-independent ── */
+:root {
+  --code-bg: #0d1117;
+  --code-header-bg: #161b22;
+  --code-border: #21262d;
+  --code-text-dim: #8b949e;
+  --code-copy-bg: rgba(255, 255, 255, 0.05);
+  --code-copied-bg: rgba(74, 222, 128, 0.1);
+  --code-copied-color: #4ade80;
+  --code-copied-border: rgba(74, 222, 128, 0.3);
+  --code-border-dim: #30363d;
+
+  /* sugar-high syntax tokens (applied via inline style="color:var(--sh-*)") */
+  --sh-keyword: #c792ea;
+  --sh-string: #c3e88d;
+  --sh-comment: #546e7a;
+  --sh-jsxliterals: #89ddff;
+  --sh-identifier: #e2e8f0;
+  --sh-sign: #89ddff;
+  --sh-class: #ffcb6b;
+  --sh-property: #80cbc4;
+  --sh-entity: #82aaff;
+  --sh-space: inherit;
+
+  /* ── Overlay — dark translucent surfaces (Cover hero, image overlays) ── */
+  --color-overlay-gradient: rgba(0, 0, 0, 0.45);
+  --color-overlay-text: rgb(255 255 255 / 0.85);
+  --color-overlay-orb: rgb(255 255 255 / 0.05);
+  --color-overlay-orb-dim: rgb(255 255 255 / 0.03);
+}

package/src/brands/default.css

@@ -0,0 +1,5 @@
+/* Default brand — independent fallback for consumers who provide no brand.
+   Provides palette + semantic tokens out of the box.
+   To create a custom brand: use createBrand() from @arun-dev/tokens/createBrand. */
+@import './default/palette.css';
+@import './default/semantic.css';

package/src/createBrand.ts

@@ -0,0 +1,293 @@
+/**
+ * createBrand — build-time CSS generator for @arun-dev/tokens.
+ *
+ * Usage (full palette):
+ *   import { createBrand } from '@arun-dev/tokens/createBrand';
+ *   const css = createBrand({ name: 'acme', palette: { 50: '#...', ..., 950: '#...' } });
+ *   writeFileSync('src/brands/acme.css', css);
+ *
+ * Usage (seed color — auto-generates palette):
+ *   const css = createBrand({ name: 'acme', seed: '#7c3aed' });
+ *
+ * Consumer-level brand completion:
+ *   A consumer may skip createBrand entirely and define semantic tokens directly in their globals.css.
+ *   The only requirement: all semantic variables listed in BrandSemanticContract must be defined
+ *   before @arun-dev/ui components are rendered.
+ */
+
+// ─── Types ───────────────────────────────────────────────────────────────────
+
+type Shade = 50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | 950;
+type NeutralShade = 0 | Shade;
+
+export type BrandPalette = Record<Shade, string>;
+export type NeutralPalette = Record<NeutralShade, string>;
+
+type WithPalette = { palette: BrandPalette };
+type WithSeed = { seed: string };
+
+export type CreateBrandInput = {
+  /** Brand identifier — used as a comment label in generated CSS */
+  name: string;
+  /** Optional neutral/gray palette. Defaults to cool-gray (slate). */
+  neutral?: NeutralPalette;
+} & (WithPalette | WithSeed);
+
+// ─── Default neutral (cool-gray / slate) ─────────────────────────────────────
+
+export const DEFAULT_NEUTRAL: NeutralPalette = {
+  0: '#ffffff',
+  50: '#f8fafc',
+  100: '#f1f5f9',
+  200: '#e2e8f0',
+  300: '#cbd5e1',
+  400: '#96a5ba' /* nudged +2 per channel → 7.13:1 on neutral-900 (AAA) */,
+  500: '#64748b',
+  600: '#475569',
+  700: '#334155',
+  800: '#1e293b',
+  900: '#0f172a',
+  950: '#020617',
+};
+
+// ─── Color math (HSL, no external deps) ──────────────────────────────────────
+
+function hexToRgb(hex: string): [number, number, number] {
+  const h = hex.replace('#', '');
+  return [
+    parseInt(h.slice(0, 2), 16) / 255,
+    parseInt(h.slice(2, 4), 16) / 255,
+    parseInt(h.slice(4, 6), 16) / 255,
+  ];
+}
+
+function rgbToHsl(r: number, g: number, b: number): [number, number, number] {
+  const max = Math.max(r, g, b);
+  const min = Math.min(r, g, b);
+  const l = (max + min) / 2;
+  if (max === min) return [0, 0, l * 100];
+  const d = max - min;
+  const s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+  let h: number;
+  switch (max) {
+    case r:
+      h = ((g - b) / d + (g < b ? 6 : 0)) / 6;
+      break;
+    case g:
+      h = ((b - r) / d + 2) / 6;
+      break;
+    default:
+      h = ((r - g) / d + 4) / 6;
+  }
+  return [h * 360, s * 100, l * 100];
+}
+
+function hslToHex(h: number, s: number, l: number): string {
+  const sl = s / 100;
+  const ll = l / 100;
+  const a = sl * Math.min(ll, 1 - ll);
+  const f = (n: number): string => {
+    const k = (n + h / 30) % 12;
+    const color = ll - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);
+    return Math.round(255 * color)
+      .toString(16)
+      .padStart(2, '0');
+  };
+  return `#${f(0)}${f(8)}${f(4)}`;
+}
+
+/** Lightness targets for each shade step */
+const SHADE_LIGHTNESS: Record<Shade, number> = {
+  50: 97,
+  100: 93,
+  200: 86,
+  300: 75,
+  400: 64,
+  500: 53,
+  600: 44,
+  700: 36,
+  800: 28,
+  900: 20,
+  950: 14,
+};
+
+/**
+ * Generate an 11-step palette from a seed hex color.
+ * Uses HSL color space — perceptually approximate but dependency-free.
+ */
+export function generatePaletteFromSeed(seed: string): BrandPalette {
+  const [r, g, b] = hexToRgb(seed);
+  const [h, s] = rgbToHsl(r, g, b);
+
+  const entries = (Object.entries(SHADE_LIGHTNESS) as [string, number][]).map(
+    ([shade, targetL]) => {
+      const adjustedS = targetL > 80 ? s * 0.55 : targetL < 25 ? s * 0.75 : s;
+      return [Number(shade), hslToHex(h, Math.min(adjustedS, 100), targetL)];
+    },
+  );
+  return Object.fromEntries(entries) as BrandPalette;
+}
+
+// ─── Semantic derivation ──────────────────────────────────────────────────────
+
+/**
+ * BrandSemanticContract — the full set of CSS variables @arun-dev/ui expects.
+ * Consumers who skip createBrand must define all of these in their own CSS.
+ */
+export type BrandSemanticContract = {
+  '--color-bg-primary': string;
+  '--color-bg-secondary': string;
+  '--color-bg-surface': string;
+  '--color-bg-accent': string;
+  '--color-bg-inverse': string;
+  '--color-text-primary': string;
+  '--color-text-secondary': string;
+  '--color-text-muted': string;
+  '--color-text-accent': string;
+  '--color-text-inverse': string;
+  '--color-text-on-accent': string;
+  '--color-border-default': string;
+  '--color-border-subtle': string;
+  '--color-border-strong': string;
+  '--color-border-accent': string;
+  '--color-status-success': string;
+  '--color-status-success-bg': string;
+  '--color-status-error': string;
+  '--color-status-error-bg': string;
+  '--color-status-warning': string;
+  '--color-status-warning-bg': string;
+  '--color-status-info': string;
+  '--color-status-info-bg': string;
+};
+
+const STATUS_LIGHT: Pick<
+  BrandSemanticContract,
+  | '--color-status-success'
+  | '--color-status-success-bg'
+  | '--color-status-error'
+  | '--color-status-error-bg'
+  | '--color-status-warning'
+  | '--color-status-warning-bg'
+> = {
+  '--color-status-success': '#15803d',
+  '--color-status-success-bg': '#f0fdf4',
+  '--color-status-error': '#b91c1c',
+  '--color-status-error-bg': '#fef2f2',
+  '--color-status-warning': '#b45309',
+  '--color-status-warning-bg': '#fffbeb',
+};
+
+const STATUS_DARK = {
+  '--color-status-success': '#4ade80',
+  '--color-status-success-bg': '#052e16',
+  '--color-status-error': '#f87171',
+  '--color-status-error-bg': '#450a0a',
+  '--color-status-warning': '#fbbf24',
+  '--color-status-warning-bg': '#451a03',
+};
+
+/* deriveLight/deriveDark must stay in sync with src/brands/default/semantic.css — the
+   hand-audited source of truth (AAA contrast). Guarded by createBrand.unit.spec.ts. */
+function deriveLight(): Record<string, string> {
+  return {
+    '--color-bg-primary': 'var(--color-neutral-0)',
+    '--color-bg-secondary': 'var(--color-neutral-50)',
+    '--color-bg-surface': 'var(--color-neutral-100)',
+    '--color-bg-accent': 'var(--color-brand-50)',
+    '--color-bg-inverse': 'var(--color-neutral-900)',
+    '--color-text-primary': 'var(--color-neutral-900)',
+    '--color-text-secondary': 'var(--color-neutral-700)',
+    '--color-text-muted': 'var(--color-neutral-600)',
+    '--color-text-accent': 'var(--color-brand-700)',
+    '--color-text-inverse': 'var(--color-neutral-50)',
+    '--color-text-on-accent': 'var(--color-neutral-0)',
+    '--color-border-default': 'var(--color-neutral-200)',
+    '--color-border-subtle': 'var(--color-neutral-100)',
+    '--color-border-strong': 'var(--color-neutral-300)',
+    '--color-border-accent': 'var(--color-brand-300)',
+    ...STATUS_LIGHT,
+    '--color-status-info': 'var(--color-brand-500)',
+    '--color-status-info-bg': 'var(--color-brand-50)',
+  };
+}
+
+function deriveDark(): Record<string, string> {
+  return {
+    '--color-bg-primary': 'var(--color-neutral-900)',
+    '--color-bg-secondary': 'var(--color-neutral-800)',
+    '--color-bg-surface': 'var(--color-neutral-700)',
+    '--color-bg-accent': 'var(--color-brand-950)',
+    '--color-bg-inverse': 'var(--color-neutral-50)',
+    '--color-text-primary': 'var(--color-neutral-100)',
+    '--color-text-secondary': 'var(--color-neutral-300)',
+    '--color-text-muted': 'var(--color-neutral-400)',
+    '--color-text-accent': 'var(--color-brand-300)',
+    '--color-text-inverse': 'var(--color-neutral-900)',
+    '--color-text-on-accent': 'var(--color-neutral-0)',
+    '--color-border-default': 'var(--color-neutral-700)',
+    '--color-border-subtle': 'var(--color-neutral-800)',
+    '--color-border-strong': 'var(--color-neutral-600)',
+    '--color-border-accent': 'var(--color-brand-700)',
+    ...STATUS_DARK,
+    '--color-status-info': 'var(--color-brand-300)',
+    '--color-status-info-bg': 'var(--color-brand-950)',
+  };
+}
+
+// ─── CSS generation ───────────────────────────────────────────────────────────
+
+function toVars(tokens: Record<string, string>, indent = '  '): string {
+  return Object.entries(tokens)
+    .map(([k, v]) => `${indent}${k}: ${v};`)
+    .join('\n');
+}
+
+function paletteVars(palette: BrandPalette): string {
+  return (Object.keys(SHADE_LIGHTNESS) as unknown as Shade[])
+    .map((shade) => `  --color-brand-${shade}: ${palette[shade]};`)
+    .join('\n');
+}
+
+function neutralVars(neutral: NeutralPalette): string {
+  return ([0, 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950] as NeutralShade[])
+    .map((shade) => `  --color-neutral-${shade}: ${neutral[shade]};`)
+    .join('\n');
+}
+
+/**
+ * Generate a complete brand CSS string from a palette or seed color.
+ * Write the output to a .css file and import it in your globals.css.
+ */
+export function createBrand(input: CreateBrandInput): string {
+  const { name, neutral = DEFAULT_NEUTRAL } = input;
+  const palette = 'seed' in input ? generatePaletteFromSeed(input.seed) : input.palette;
+
+  const light = deriveLight();
+  const dark = deriveDark();
+
+  return `/* ${name} brand — generated by createBrand (@arun-dev/tokens) */
+/* Re-run createBrand to regenerate after palette changes.        */
+
+:root {
+${paletteVars(palette)}
+
+${neutralVars(neutral)}
+
+${toVars(light)}
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme='light']) {
+${toVars(dark, '    ')}
+  }
+}
+
+[data-theme='dark'] {
+${toVars(dark)}
+}
+
+[data-theme='light'] {
+${toVars(light)}
+}
+`;
+}

package/src/primitives/breakpoints.css

@@ -0,0 +1,9 @@
+/* Documentation values — cannot be used inside @media conditions (CSS limitation).
+   Use the raw pixel values in @media queries and comment the matching token name. */
+:root {
+  --breakpoint-sm: 640px;
+  --breakpoint-md: 768px;
+  --breakpoint-lg: 1024px;
+  --breakpoint-xl: 1280px;
+  --breakpoint-2xl: 1536px;
+}

package/src/primitives/elevation.css

@@ -0,0 +1,10 @@
+:root {
+  --z-base: 0;
+  --z-raised: 10;
+  --z-sticky: 50; /* sticky headers and floating navs — above page content, below modals */
+  --z-overlay: 100;
+  --z-modal: 200;
+  --z-toast: 300;
+  --z-tooltip: 400;
+  --z-skip: 999; /* skip-to-content link — must float above all UI layers */
+}

package/src/primitives/fonts.css

@@ -0,0 +1,25 @@
+/* Inter Variable Font — SIL Open Font License 1.1 (free for commercial use)
+   Source: @fontsource-variable/inter
+   Two files cover all weights (100–900) in both styles. */
+
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 100 900;
+  font-display: swap;
+  src: url('../fonts/inter-latin-wght-normal.woff2') format('woff2');
+  unicode-range:
+    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
+    U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+@font-face {
+  font-family: 'Inter';
+  font-style: italic;
+  font-weight: 100 900;
+  font-display: swap;
+  src: url('../fonts/inter-latin-wght-italic.woff2') format('woff2');
+  unicode-range:
+    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
+    U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}

package/src/primitives/motion.css

@@ -0,0 +1,10 @@
+:root {
+  --duration-instant: 0ms;
+  --duration-fast: 150ms;
+  --duration-normal: 250ms;
+  --duration-slow: 400ms;
+
+  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
+  --ease-in: cubic-bezier(0.4, 0, 1, 1);
+  --ease-out: cubic-bezier(0, 0, 0.2, 1);
+}

package/src/primitives/radius.css

@@ -0,0 +1,9 @@
+:root {
+  --radius-none: 0;
+  --radius-sm: 0.25rem;
+  --radius-md: 0.375rem;
+  --radius-lg: 0.5rem;
+  --radius-xl: 0.75rem;
+  --radius-2xl: 1rem;
+  --radius-full: 9999px;
+}

package/src/primitives/shadow.css

@@ -0,0 +1,12 @@
+:root {
+  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+
+  /* Backdrop blur scale */
+  --blur-sm: 4px;
+  --blur-md: 8px;
+  --blur-lg: 12px;
+  --blur-xl: 16px;
+}