@eluan/tokens 0.1.0

package/dist/spacing.css

@@ -0,0 +1,101 @@
+/* ============================================
+ * Spacing Scales
+ * Semantic spacing tokens that adapt to Compact, Standard, and Wide
+ * These reference primitive spacing tokens from Layer 1
+ * ============================================ */
+
+[data-spacing="compact"] {
+  --spacing-xxs: var(--spacing-space-0);
+  --spacing-xs: var(--spacing-space-2);
+  --spacing-sm: var(--spacing-space-4);
+  --spacing-md: var(--spacing-space-8);
+  --spacing-lg: var(--spacing-space-12);
+  --spacing-xl: var(--spacing-space-16);
+  --spacing-2xl: var(--spacing-space-20);
+  --spacing-3xl: var(--spacing-space-24);
+  --spacing-4xl: var(--spacing-space-32);
+
+  --size-xxs: var(--spacing-space-12);
+  --size-xs: var(--spacing-space-16);
+  --size-sm: var(--spacing-space-20);
+  --size-md: var(--spacing-space-24);
+  --size-lg: var(--spacing-space-32);
+  --size-xl: var(--spacing-space-40);
+  --size-2xl: var(--spacing-space-48);
+  --size-3xl: var(--spacing-space-64);
+  --size-4xl: var(--spacing-space-96);
+
+  --font-size-xs: var(--font-size-12);
+  --font-size-sm: var(--font-size-12);
+  --font-size-base: var(--font-size-14);
+  --font-size-lg: var(--font-size-16);
+  --font-size-xl: var(--font-size-18);
+  --font-size-2xl: var(--font-size-20);
+  --font-size-3xl: var(--font-size-24);
+  --font-size-4xl: var(--font-size-30);
+  --font-size-5xl: var(--font-size-36);
+}
+
+[data-spacing="standard"] {
+  --spacing-xxs: var(--spacing-space-2);
+  --spacing-xs: var(--spacing-space-4);
+  --spacing-sm: var(--spacing-space-8);
+  --spacing-md: var(--spacing-space-12);
+  --spacing-lg: var(--spacing-space-16);
+  --spacing-xl: var(--spacing-space-20);
+  --spacing-2xl: var(--spacing-space-24);
+  --spacing-3xl: var(--spacing-space-40);
+  --spacing-4xl: var(--spacing-space-80);
+
+  --size-xxs: var(--spacing-space-16);
+  --size-xs: var(--spacing-space-20);
+  --size-sm: var(--spacing-space-24);
+  --size-md: var(--spacing-space-32);
+  --size-lg: var(--spacing-space-40);
+  --size-xl: var(--spacing-space-48);
+  --size-2xl: var(--spacing-space-64);
+  --size-3xl: var(--spacing-space-96);
+  --size-4xl: var(--spacing-space-160);
+
+  --font-size-xs: var(--font-size-12);
+  --font-size-sm: var(--font-size-14);
+  --font-size-base: var(--font-size-16);
+  --font-size-lg: var(--font-size-18);
+  --font-size-xl: var(--font-size-20);
+  --font-size-2xl: var(--font-size-24);
+  --font-size-3xl: var(--font-size-30);
+  --font-size-4xl: var(--font-size-36);
+  --font-size-5xl: var(--font-size-48);
+}
+
+[data-spacing="wide"] {
+  --spacing-xxs: var(--spacing-space-4);
+  --spacing-xs: var(--spacing-space-8);
+  --spacing-sm: var(--spacing-space-12);
+  --spacing-md: var(--spacing-space-16);
+  --spacing-lg: var(--spacing-space-20);
+  --spacing-xl: var(--spacing-space-24);
+  --spacing-2xl: var(--spacing-space-32);
+  --spacing-3xl: var(--spacing-space-80);
+  --spacing-4xl: var(--spacing-space-160);
+
+  --size-xxs: var(--spacing-space-20);
+  --size-xs: var(--spacing-space-24);
+  --size-sm: var(--spacing-space-32);
+  --size-md: var(--spacing-space-40);
+  --size-lg: var(--spacing-space-48);
+  --size-xl: var(--spacing-space-56);
+  --size-2xl: var(--spacing-space-80);
+  --size-3xl: var(--spacing-space-120);
+  --size-4xl: var(--spacing-space-240);
+
+  --font-size-xs: var(--font-size-14);
+  --font-size-sm: var(--font-size-16);
+  --font-size-base: var(--font-size-18);
+  --font-size-lg: var(--font-size-20);
+  --font-size-xl: var(--font-size-24);
+  --font-size-2xl: var(--font-size-30);
+  --font-size-3xl: var(--font-size-36);
+  --font-size-4xl: var(--font-size-48);
+  --font-size-5xl: var(--font-size-60);
+}

package/dist/themes.css

@@ -0,0 +1,316 @@
+/* ============================================
+ * LAYER 3: Themes
+ * Component-level tokens that define the visual identity
+ * Each theme uses different accent colors from the primitive palette
+ * Categories: action, container, interactive, destructive,
+ *             cautionary, important, informative, positive, dataviz
+ * ============================================ */
+@import "./modes.css";
+/* ----------------------------------------
+ * Theme: Classic Retro
+ * Based on Blaze Orange
+ * ---------------------------------------- */
+ [data-theme="industrial-retro"] {
+  --font-heading: "Geist", ui-sans-serif, system-ui, sans-serif;
+  --font-body: "Geist", ui-sans-serif, system-ui, sans-serif;
+  --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+
+  --container-bg: var(--backgrounds-primary);
+  --container-bg-alt: var(--backgrounds-secondary);
+  --container-bg-inverse: var(--foregrounds-secondary);
+  --container-border: var(--backgrounds-tertiary);
+  --container-border-alt: var(--backgrounds-quaternary);
+  --container-border-inverse: var(--foregrounds-tertiary);
+  --container-fg: var(--foregrounds-primary);
+  --container-fg-alt: var(--foregrounds-secondary);
+  --container-fg-inverse: var(--backgrounds-primary);
+  --interactive-bg: var(--backgrounds-primary);
+  --interactive-bg-alt: var(--backgrounds-secondary);
+  --interactive-bg-alt2: var(--blazeorange-background);
+  --interactive-bg-disabled: var(--backgrounds-tertiary);
+  --interactive-bg-hover: var(--backgrounds-tertiary);
+  --interactive-bg-active: var(--blazeorange-shade);
+  --interactive-bg-selected: var(--blazeorange-shade);
+  --interactive-bg-inverse: var(--foregrounds-primary);
+  --interactive-border: var(--backgrounds-tertiary);
+  --interactive-border-alt: var(--backgrounds-quaternary);
+  --interactive-border-disabled: var(--backgrounds-quaternary);
+  --interactive-fg: var(--foregrounds-primary);
+  --interactive-fg-alt: var(--foregrounds-tertiary);
+  --interactive-fg-readonly: var(--foregrounds-secondary);
+  --interactive-fg-disabled: var(--foregrounds-quinary);
+  --interactive-fg-active: var(--blazeorange-tint);
+  --interactive-fg-selected: var(--blazeorange-tint);
+  --interactive-fg-inverse: var(--backgrounds-primary);
+  --action-primary-bg: var(--blazeorange-main);
+  --action-primary-bg-hover: var(--blazeorange-shade);
+  --action-primary-bg-active: var(--blazeorange-shade);
+  --action-primary-bg-selected: var(--blazeorange-shade);
+  --action-primary-bg-disabled: var(--blazeorange-tint);
+  --action-primary-bg-inverse: var(--blazeorange-background);
+  --action-primary-fg: var(--backgrounds-primary);
+  --action-primary-fg-disabled: var(--foregrounds-quinary);
+  --action-primary-fg-active: var(--backgrounds-primary);
+  --action-primary-fg-selected: var(--backgrounds-primary);
+  --action-primary-fg-inverse: var(--blazeorange-foreground);
+  --action-secondary-bg-hover: var(--blazeorange-tint);
+  --action-secondary-bg-active: var(--blazeorange-main);
+  --action-secondary-bg-selected: var(--blazeorange-main);
+  --action-secondary-bg-disabled: var(--backgrounds-tertiary);
+  --action-secondary-border: var(--blazeorange-main);
+  --action-secondary-border-alt: var(--blazeorange-shade);
+  --action-secondary-border-disabled: var(--blazeorange-tint);
+  --action-secondary-border-inverse: var(--blazeorange-background);
+  --action-secondary-fg: var(--blazeorange-main);
+  --action-secondary-fg-alt: var(--foregrounds-primary);
+  --action-secondary-fg-disabled: var(--foregrounds-quinary);
+  --action-secondary-fg-active: var(--backgrounds-primary);
+  --action-secondary-fg-selected: var(--backgrounds-primary);
+  --action-secondary-fg-inverse: var(--foregrounds-primary);
+  --action-tertiary-bg: var(--backgrounds-primary);
+  --action-tertiary-bg-alt: var(--backgrounds-secondary);
+  --action-tertiary-bg-hover: var(--blazeorange-background);
+  --action-tertiary-bg-active: var(--blazeorange-tint);
+  --action-tertiary-bg-selected: var(--blazeorange-tint);
+  --action-tertiary-bg-disabled: var(--backgrounds-primary);
+  --action-tertiary-bg-inverse: var(--backgrounds-primary);
+  --action-tertiary-border: var(--blazeorange-main);
+  --action-tertiary-border-alt: var(--blazeorange-shade);
+  --action-tertiary-border-disabled: var(--backgrounds-quaternary);
+  --action-tertiary-border-inverse: var(--blazeorange-tint);
+  --action-tertiary-fg: var(--blazeorange-main);
+  --action-tertiary-fg-alt: var(--foregrounds-primary);
+  --action-tertiary-fg-disabled: var(--foregrounds-quinary);
+  --action-tertiary-fg-active: var(--blazeorange-foreground);
+  --action-tertiary-fg-selected: var(--blazeorange-foreground);
+  --action-tertiary-fg-inverse: var(--backgrounds-primary);
+  --destructive-bg: var(--torchred-background);
+  --destructive-bg-alt: var(--torchred-tint);
+  --destructive-bg-hover: var(--torchred-tint);
+  --destructive-bg-active: var(--torchred-shade);
+  --destructive-bg-selected: var(--torchred-shade);
+  --destructive-bg-disabled: var(--backgrounds-tertiary);
+  --destructive-bg-inverse: var(--torchred-shade);
+  --destructive-border: var(--torchred-main);
+  --destructive-border-alt: var(--torchred-shade);
+  --destructive-border-disabled: var(--torchred-tint);
+  --destructive-border-inverse: var(--torchred-background);
+  --destructive-fg: var(--torchred-foreground);
+  --destructive-fg-alt: var(--foregrounds-primary);
+  --destructive-fg-disabled: var(--foregrounds-quinary);
+  --destructive-fg-active: var(--backgrounds-primary);
+  --destructive-fg-selected: var(--backgrounds-primary);
+  --destructive-fg-inverse: var(--torchred-background);
+  --positive-bg: var(--seagreen-background);
+  --positive-bg-alt: var(--seagreen-tint);
+  --positive-bg-inverse: var(--seagreen-shade);
+  --positive-border: var(--seagreen-main);
+  --positive-border-alt: var(--seagreen-shade);
+  --positive-border-inverse: var(--seagreen-background);
+  --positive-fg: var(--seagreen-foreground);
+  --positive-fg-alt: var(--foregrounds-primary);
+  --positive-fg-inverse: var(--seagreen-background);
+  --cautionary-bg: var(--maitai-background);
+  --cautionary-bg-alt: var(--maitai-tint);
+  --cautionary-bg-inverse: var(--maitai-shade);
+  --cautionary-border: var(--maitai-main);
+  --cautionary-border-alt: var(--maitai-shade);
+  --cautionary-border-inverse: var(--maitai-background);
+  --cautionary-fg: var(--maitai-foreground);
+  --cautionary-fg-alt: var(--foregrounds-primary);
+  --cautionary-fg-inverse: var(--maitai-background);
+  --informative-bg: var(--blueribbon-background);
+  --informative-bg-alt: var(--blueribbon-tint);
+  --informative-bg-inverse: var(--blueribbon-shade);
+  --informative-border: var(--blueribbon-main);
+  --informative-border-alt: var(--blueribbon-shade);
+  --informative-border-inverse: var(--blueribbon-background);
+  --informative-fg: var(--blueribbon-foreground);
+  --informative-fg-alt: var(--foregrounds-primary);
+  --informative-fg-inverse: var(--blueribbon-background);
+  --important-bg: var(--electricviolet-background);
+  --important-bg-alt: var(--electricviolet-tint);
+  --important-bg-inverse: var(--electricviolet-shade);
+  --important-border: var(--electricviolet-main);
+  --important-border-alt: var(--electricviolet-shade);
+  --important-border-inverse: var(--electricviolet-background);
+  --important-fg: var(--electricviolet-foreground);
+  --important-fg-alt: var(--foregrounds-primary);
+  --important-fg-inverse: var(--electricviolet-background);
+  --dataviz-1-main: var(--blazeorange-main);
+  --dataviz-1-tint: var(--blazeorange-tint);
+  --dataviz-1-shade: var(--blazeorange-shade);
+  --dataviz-2-main: var(--blueribbon-main);
+  --dataviz-2-tint: var(--blueribbon-tint);
+  --dataviz-2-shade: var(--blueribbon-shade);
+  --dataviz-3-main: var(--seagreen-main);
+  --dataviz-3-tint: var(--seagreen-tint);
+  --dataviz-3-shade: var(--seagreen-shade);
+  --dataviz-4-main: var(--electricviolet-main);
+  --dataviz-4-tint: var(--electricviolet-tint);
+  --dataviz-4-shade: var(--electricviolet-shade);
+  --dataviz-5-main: var(--maitai-main);
+  --dataviz-5-tint: var(--maitai-tint);
+  --dataviz-5-shade: var(--maitai-shade);
+  --dataviz-6-main: var(--cerise-main);
+  --dataviz-6-tint: var(--cerise-tint);
+  --dataviz-6-shade: var(--cerise-shade);
+  --dataviz-7-main: var(--electriclime-main);
+  --dataviz-7-tint: var(--electriclime-tint);
+  --dataviz-7-shade: var(--electriclime-shade);
+  --dataviz-8-main: var(--lochmara-main);
+  --dataviz-8-tint: var(--lochmara-tint);
+  --dataviz-8-shade: var(--lochmara-shade);
+}
+
+[data-theme="minimal"] {
+  --font-heading: "Inter", ui-sans-serif, system-ui, sans-serif;
+  --font-body: "Inter", ui-sans-serif, system-ui, sans-serif;
+  --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  --container-bg: var(--backgrounds-primary);
+  --container-bg-alt: var(--backgrounds-secondary);
+  --container-bg-inverse: var(--foregrounds-secondary);
+  --container-border: var(--backgrounds-tertiary);
+  --container-border-alt: var(--backgrounds-quaternary);
+  --container-border-inverse: var(--foregrounds-tertiary);
+  --container-fg: var(--foregrounds-primary);
+  --container-fg-alt: var(--foregrounds-secondary);
+  --container-fg-inverse: var(--backgrounds-primary);
+  --interactive-bg: var(--backgrounds-primary);
+  --interactive-bg-alt: var(--backgrounds-secondary);
+  --interactive-bg-alt2: var(--backgrounds-secondary);
+  --interactive-bg-disabled: var(--backgrounds-tertiary);
+  --interactive-bg-hover: var(--backgrounds-tertiary);
+  --interactive-bg-active: var(--foregrounds-primary);
+  --interactive-bg-selected: var(--foregrounds-primary);
+  --interactive-bg-inverse: var(--foregrounds-primary);
+  --interactive-border: var(--backgrounds-tertiary);
+  --interactive-border-alt: var(--backgrounds-quaternary);
+  --interactive-border-disabled: var(--backgrounds-quaternary);
+  --interactive-fg: var(--foregrounds-primary);
+  --interactive-fg-alt: var(--foregrounds-tertiary);
+  --interactive-fg-readonly: var(--foregrounds-secondary);
+  --interactive-fg-disabled: var(--foregrounds-quinary);
+  --interactive-fg-active: var(--backgrounds-primary);
+  --interactive-fg-selected: var(--backgrounds-primary);
+  --interactive-fg-inverse: var(--backgrounds-primary);
+  --action-primary-bg: var(--foregrounds-primary);
+  --action-primary-bg-hover: var(--foregrounds-tertiary);
+  --action-primary-bg-active: var(--foregrounds-secondary);
+  --action-primary-bg-selected: var(--foregrounds-secondary);
+  --action-primary-bg-disabled: var(--foregrounds-quinary);
+  --action-primary-bg-inverse: var(--backgrounds-primary);
+  --action-primary-fg: var(--backgrounds-primary);
+  --action-primary-fg-disabled: var(--backgrounds-quaternary);
+  --action-primary-fg-active: var(--backgrounds-primary);
+  --action-primary-fg-selected: var(--backgrounds-primary);
+  --action-primary-fg-inverse: var(--foregrounds-primary);
+  --action-secondary-bg-hover: var(--mono-tint);
+  --action-secondary-bg-active: var(--mono-background);
+  --action-secondary-bg-selected: var(--mono-background);
+  --action-secondary-bg-disabled: var(--backgrounds-tertiary);
+  --action-secondary-border: var(--mono-background);
+  --action-secondary-border-alt: var(--mono-shade);
+  --action-secondary-border-disabled: var(--mono-tint);
+  --action-secondary-border-inverse: var(--backgrounds-secondary);
+  --action-secondary-fg: var(--mono-background);
+  --action-secondary-fg-alt: var(--foregrounds-primary);
+  --action-secondary-fg-disabled: var(--foregrounds-quinary);
+  --action-secondary-fg-active: var(--backgrounds-primary);
+  --action-secondary-fg-selected: var(--backgrounds-primary);
+  --action-secondary-fg-inverse: var(--foregrounds-primary);
+  --action-tertiary-bg: var(--backgrounds-primary);
+  --action-tertiary-bg-alt: var(--backgrounds-secondary);
+  --action-tertiary-bg-hover: var(--backgrounds-secondary);
+  --action-tertiary-bg-active: var(--mono-tint);
+  --action-tertiary-bg-selected: var(--mono-tint);
+  --action-tertiary-bg-disabled: var(--backgrounds-primary);
+  --action-tertiary-bg-inverse: var(--backgrounds-primary);
+  --action-tertiary-border: var(--backgrounds-quaternary);
+  --action-tertiary-border-alt: var(--mono-tint);
+  --action-tertiary-border-disabled: var(--backgrounds-quaternary);
+  --action-tertiary-border-inverse: var(--backgrounds-secondary);
+  --action-tertiary-fg: var(--mono-background);
+  --action-tertiary-fg-alt: var(--foregrounds-primary);
+  --action-tertiary-fg-disabled: var(--foregrounds-quinary);
+  --action-tertiary-fg-active: var(--mono-shade);
+  --action-tertiary-fg-selected: var(--mono-shade);
+  --action-tertiary-fg-inverse: var(--backgrounds-primary);
+  --destructive-bg: var(--torchred-background);
+  --destructive-bg-alt: var(--torchred-tint);
+  --destructive-bg-hover: var(--torchred-tint);
+  --destructive-bg-active: var(--torchred-shade);
+  --destructive-bg-selected: var(--torchred-shade);
+  --destructive-bg-disabled: var(--backgrounds-tertiary);
+  --destructive-bg-inverse: var(--torchred-shade);
+  --destructive-border: var(--torchred-main);
+  --destructive-border-alt: var(--torchred-shade);
+  --destructive-border-disabled: var(--torchred-tint);
+  --destructive-border-inverse: var(--torchred-background);
+  --destructive-fg: var(--torchred-foreground);
+  --destructive-fg-alt: var(--foregrounds-primary);
+  --destructive-fg-disabled: var(--foregrounds-quinary);
+  --destructive-fg-active: var(--backgrounds-primary);
+  --destructive-fg-selected: var(--backgrounds-primary);
+  --destructive-fg-inverse: var(--torchred-background);
+  --positive-bg: var(--seagreen-background);
+  --positive-bg-alt: var(--seagreen-tint);
+  --positive-bg-inverse: var(--seagreen-shade);
+  --positive-border: var(--seagreen-main);
+  --positive-border-alt: var(--seagreen-shade);
+  --positive-border-inverse: var(--seagreen-background);
+  --positive-fg: var(--seagreen-foreground);
+  --positive-fg-alt: var(--foregrounds-primary);
+  --positive-fg-inverse: var(--seagreen-background);
+  --cautionary-bg: var(--maitai-background);
+  --cautionary-bg-alt: var(--maitai-tint);
+  --cautionary-bg-inverse: var(--maitai-shade);
+  --cautionary-border: var(--maitai-main);
+  --cautionary-border-alt: var(--maitai-shade);
+  --cautionary-border-inverse: var(--maitai-background);
+  --cautionary-fg: var(--maitai-foreground);
+  --cautionary-fg-alt: var(--foregrounds-primary);
+  --cautionary-fg-inverse: var(--maitai-background);
+  --informative-bg: var(--blueribbon-background);
+  --informative-bg-alt: var(--blueribbon-tint);
+  --informative-bg-inverse: var(--blueribbon-shade);
+  --informative-border: var(--blueribbon-main);
+  --informative-border-alt: var(--blueribbon-shade);
+  --informative-border-inverse: var(--blueribbon-background);
+  --informative-fg: var(--blueribbon-foreground);
+  --informative-fg-alt: var(--foregrounds-primary);
+  --informative-fg-inverse: var(--blueribbon-background);
+  --important-bg: var(--electricviolet-background);
+  --important-bg-alt: var(--electricviolet-tint);
+  --important-bg-inverse: var(--electricviolet-shade);
+  --important-border: var(--electricviolet-main);
+  --important-border-alt: var(--electricviolet-shade);
+  --important-border-inverse: var(--electricviolet-background);
+  --important-fg: var(--electricviolet-foreground);
+  --important-fg-alt: var(--foregrounds-primary);
+  --important-fg-inverse: var(--electricviolet-background);
+  --dataviz-1-main: var(--blazeorange-main);
+  --dataviz-1-tint: var(--blazeorange-tint);
+  --dataviz-1-shade: var(--blazeorange-shade);
+  --dataviz-2-main: var(--blueribbon-main);
+  --dataviz-2-tint: var(--blueribbon-tint);
+  --dataviz-2-shade: var(--blueribbon-shade);
+  --dataviz-3-main: var(--seagreen-main);
+  --dataviz-3-tint: var(--seagreen-tint);
+  --dataviz-3-shade: var(--seagreen-shade);
+  --dataviz-4-main: var(--electricviolet-main);
+  --dataviz-4-tint: var(--electricviolet-tint);
+  --dataviz-4-shade: var(--electricviolet-shade);
+  --dataviz-5-main: var(--maitai-main);
+  --dataviz-5-tint: var(--maitai-tint);
+  --dataviz-5-shade: var(--maitai-shade);
+  --dataviz-6-main: var(--cerise-main);
+  --dataviz-6-tint: var(--cerise-tint);
+  --dataviz-6-shade: var(--cerise-shade);
+  --dataviz-7-main: var(--electriclime-main);
+  --dataviz-7-tint: var(--electriclime-tint);
+  --dataviz-7-shade: var(--electriclime-shade);
+  --dataviz-8-main: var(--lochmara-main);
+  --dataviz-8-tint: var(--lochmara-tint);
+  --dataviz-8-shade: var(--lochmara-shade);
+}

package/dist/tokens.css

@@ -0,0 +1,155 @@
+/*
+ * Eluan Design System - Token Architecture
+ *
+ * Three-layer token system:
+ *   Layer 1: Primitives  → Raw values (colors, spacing, radius, sizing, viewports)
+ *   Layer 2: Modes       → Semantic aliases that adapt to Light, Dim, Dark
+ *   Layer 3: Themes      → Component-level tokens for different visual identities
+ *
+ * Usage:
+ *   <html data-mode="light" data-theme="industrial-retro">
+ *   Primitives are always available via :root
+ *   Mode sets semantic colors (backgrounds, foregrounds, palette tints)
+ *   Theme sets component tokens (action, container, interactive, etc.)
+ *
+ * Import order matters - each layer can reference the previous one.
+ */
+
+/* Only load shared base font (Geist Mono) — theme fonts loaded on demand */
+@import "./fonts-base.css";
+@import "./primitives.css";
+@import "./modes.css";
+@import "./themes.css";
+@import "./spacing.css";
+@import "./curves.css";
+
+/* ============================================
+ * Base Styles
+ * ============================================ */
+
+@layer base {
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+    border: 0 solid;
+    margin: 0;
+    padding: 0;
+  }
+  html,
+  :host {
+    -webkit-text-size-adjust: 100%;
+    tab-size: 4;
+    line-height: 1.5;
+    font-family: var(--font-body);
+    -webkit-tap-highlight-color: transparent;
+  }
+  body {
+    min-height: 100%;
+    background-color: var(--backgrounds-primary);
+    color: var(--foregrounds-primary);
+    font-family: var(--font-body);
+  }
+  * {
+    border-color: var(--backgrounds-quaternary);
+  }
+  button,
+  input,
+  select,
+  textarea,
+  optgroup {
+    border-radius: 0;
+    background-color: transparent;
+    color: inherit;
+    font: inherit;
+    letter-spacing: inherit;
+  }
+  button,
+  input:where([type="button"], [type="reset"], [type="submit"]) {
+    appearance: button;
+  }
+  button,
+  [role="button"] {
+    cursor: pointer;
+  }
+  button:disabled,
+  input:disabled,
+  select:disabled,
+  textarea:disabled {
+    cursor: default;
+  }
+  textarea {
+    resize: vertical;
+  }
+  img,
+  svg,
+  video,
+  canvas,
+  audio,
+  iframe,
+  embed,
+  object {
+    display: block;
+    vertical-align: middle;
+  }
+  img,
+  video {
+    max-width: 100%;
+    height: auto;
+  }
+  table {
+    border-color: inherit;
+    border-collapse: collapse;
+    text-indent: 0;
+  }
+  a {
+    color: inherit;
+    text-decoration: inherit;
+  }
+  ol,
+  ul,
+  menu {
+    list-style: none;
+  }
+  code,
+  kbd,
+  samp,
+  pre {
+    font-family: var(--font-mono);
+    font-size: 1em;
+  }
+  small {
+    font-size: 80%;
+  }
+  sub,
+  sup {
+    position: relative;
+    vertical-align: baseline;
+    font-size: 75%;
+    line-height: 0;
+  }
+  sub {
+    bottom: -0.25em;
+  }
+  sup {
+    top: -0.5em;
+  }
+  hr {
+    height: 0;
+    color: inherit;
+    border-top-width: 1px;
+  }
+  progress {
+    vertical-align: baseline;
+  }
+  summary {
+    display: list-item;
+  }
+  ::placeholder {
+    opacity: 1;
+    color: color-mix(in srgb, currentColor 50%, transparent);
+  }
+  [hidden] {
+    display: none !important;
+  }
+}

package/package.json

@@ -0,0 +1,57 @@
+{
+  "name": "@eluan/tokens",
+  "description": "Design tokens, CSS variables, themes, and fonts for the Eluan design system",
+  "version": "0.1.0",
+  "license": "MIT",
+  "homepage": "https://github.com/vasfio/eluan#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/vasfio/eluan.git",
+    "directory": "packages/tokens"
+  },
+  "bugs": {
+    "url": "https://github.com/vasfio/eluan/issues"
+  },
+  "keywords": [
+    "design-tokens",
+    "css-variables",
+    "theme",
+    "eluan"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./css": "./dist/tokens.css",
+    "./fonts/all": "./dist/fonts.css",
+    "./fonts/base": "./dist/fonts-base.css",
+    "./fonts/industrial-retro": "./dist/fonts-industrial-retro.css",
+    "./fonts/minimal": "./dist/fonts-minimal.css"
+  },
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "devDependencies": {
+    "typescript": "^5.4.5"
+  },
+  "dependencies": {
+    "@fontsource/geist": "^5.2.8",
+    "@fontsource/geist-mono": "^5.2.7",
+    "@fontsource/inter": "^5.2.8"
+  },
+  "scripts": {
+    "build": "rm -rf dist && tsc -p tsconfig.build.json && cp src/tokens.css src/primitives.css src/modes.css src/themes.css src/spacing.css src/curves.css src/fonts.css src/fonts-base.css src/fonts-industrial-retro.css src/fonts-minimal.css dist/",
+    "dev": "tsc --watch"
+  }
+}