@fudge-me/design-system 0.1.0

package/dist/themes/ThemeProvider.svelte

@@ -0,0 +1,44 @@
+<script lang="ts" module>
+  export type Theme = 'light' | 'dark' | 'system';
+</script>
+
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    theme?: Theme;
+    target?: HTMLElement;
+    children?: Snippet;
+  }
+
+  let { theme = 'system', target, children }: Props = $props();
+
+  let resolved = $state<'light' | 'dark'>('light');
+
+  $effect(() => {
+    if (theme !== 'system') {
+      resolved = theme;
+      return;
+    }
+
+    const mql = window.matchMedia('(prefers-color-scheme: dark)');
+    resolved = mql.matches ? 'dark' : 'light';
+
+    const onChange = (e: MediaQueryListEvent) => {
+      resolved = e.matches ? 'dark' : 'light';
+    };
+
+    mql.addEventListener('change', onChange);
+    return () => mql.removeEventListener('change', onChange);
+  });
+
+  $effect(() => {
+    const el = target ?? document.documentElement;
+    el.setAttribute('data-theme', resolved);
+    return () => el.removeAttribute('data-theme');
+  });
+</script>
+
+{#if children}
+  {@render children()}
+{/if}

package/dist/themes/ThemeProvider.svelte.d.ts

@@ -0,0 +1,10 @@
+export type Theme = 'light' | 'dark' | 'system';
+import type { Snippet } from 'svelte';
+interface Props {
+    theme?: Theme;
+    target?: HTMLElement;
+    children?: Snippet;
+}
+declare const ThemeProvider: import("svelte").Component<Props, {}, "">;
+type ThemeProvider = ReturnType<typeof ThemeProvider>;
+export default ThemeProvider;

package/dist/themes/dark.css

@@ -0,0 +1,49 @@
+/* Dark theme — fudge-design-system
+ * Rebinds color semantic tokens only.
+ * Non-color tokens (spacing, typography, radii, shadow) inherit from :root.
+ */
+[data-theme="dark"] {
+  /* Color — Backgrounds / Surfaces */
+  --fds-color-bg: var(--fds-color-gray-950);
+  --fds-color-surface: var(--fds-color-gray-900);
+  --fds-color-surface-raised: var(--fds-color-gray-800);
+  --fds-color-surface-sunken: var(--fds-color-gray-950);
+  --fds-color-surface-overlay: var(--fds-color-gray-800);
+  --fds-color-primary: var(--fds-color-primary-500);
+  --fds-color-primary-hover: var(--fds-color-primary-400);
+  --fds-color-primary-active: var(--fds-color-primary-300);
+  --fds-color-secondary: var(--fds-color-secondary-400);
+  --fds-color-accent: var(--fds-color-accent-400);
+
+  /* Color — Text */
+  --fds-color-text: var(--fds-color-gray-50);
+  --fds-color-text-secondary: var(--fds-color-gray-400);
+  --fds-color-text-tertiary: var(--fds-color-gray-500);
+  --fds-color-text-inverse: var(--fds-color-gray-900);
+  --fds-color-text-link: var(--fds-color-primary-400);
+  --fds-color-text-on-primary: var(--fds-color-white);
+
+  /* Color — Borders */
+  --fds-color-border: var(--fds-color-gray-700);
+  --fds-color-border-strong: var(--fds-color-gray-600);
+  --fds-color-border-focus: var(--fds-color-primary-500);
+  --fds-color-border-error: var(--fds-color-error-400);
+
+  /* Color — State / Feedback */
+  --fds-color-success: var(--fds-color-success-400);
+  --fds-color-success-subtle: var(--fds-color-success-950);
+  --fds-color-warning: var(--fds-color-warning-400);
+  --fds-color-warning-subtle: var(--fds-color-warning-950);
+  --fds-color-error: var(--fds-color-error-400);
+  --fds-color-error-subtle: var(--fds-color-error-950);
+  --fds-color-info: var(--fds-color-info-400);
+  --fds-color-info-subtle: var(--fds-color-info-950);
+
+  /* Color — Interactive */
+  --fds-color-interactive-hover: var(--fds-color-gray-800);
+  --fds-color-interactive-active: var(--fds-color-gray-700);
+  --fds-color-disabled: var(--fds-color-gray-600);
+
+  /* Color — Overlay */
+  --fds-color-backdrop: var(--fds-color-black);
+}

package/dist/themes/index.d.ts

@@ -0,0 +1,2 @@
+export { default as ThemeProvider } from "./ThemeProvider.svelte";
+export type { Theme } from "./ThemeProvider.svelte";

package/dist/themes/index.js

@@ -0,0 +1 @@
+export { default as ThemeProvider } from "./ThemeProvider.svelte";

package/dist/themes/light.css

@@ -0,0 +1,79 @@
+/* Light theme — fudge-design-system
+ * Explicit light theme. Identical mappings to :root semantic defaults.
+ * Self-documenting: works even if semantic.css isn't loaded.
+ */
+[data-theme="light"] {
+  /* Color — Backgrounds / Surfaces */
+  --fds-color-bg: var(--fds-color-white);
+  --fds-color-surface: var(--fds-color-white);
+  --fds-color-surface-raised: var(--fds-color-gray-50);
+  --fds-color-surface-sunken: var(--fds-color-gray-100);
+  --fds-color-surface-overlay: var(--fds-color-white);
+  --fds-color-primary: var(--fds-color-primary-600);
+  --fds-color-primary-hover: var(--fds-color-primary-700);
+  --fds-color-primary-active: var(--fds-color-primary-800);
+  --fds-color-secondary: var(--fds-color-secondary-600);
+  --fds-color-accent: var(--fds-color-accent-500);
+
+  /* Color — Text */
+  --fds-color-text: var(--fds-color-gray-900);
+  --fds-color-text-secondary: var(--fds-color-gray-600);
+  --fds-color-text-tertiary: var(--fds-color-gray-400);
+  --fds-color-text-inverse: var(--fds-color-white);
+  --fds-color-text-link: var(--fds-color-primary-600);
+  --fds-color-text-on-primary: var(--fds-color-white);
+
+  /* Color — Borders */
+  --fds-color-border: var(--fds-color-gray-200);
+  --fds-color-border-strong: var(--fds-color-gray-300);
+  --fds-color-border-focus: var(--fds-color-primary-500);
+  --fds-color-border-error: var(--fds-color-error-500);
+
+  /* Color — State / Feedback */
+  --fds-color-success: var(--fds-color-success-600);
+  --fds-color-success-subtle: var(--fds-color-success-50);
+  --fds-color-warning: var(--fds-color-warning-500);
+  --fds-color-warning-subtle: var(--fds-color-warning-50);
+  --fds-color-error: var(--fds-color-error-600);
+  --fds-color-error-subtle: var(--fds-color-error-50);
+  --fds-color-info: var(--fds-color-info-600);
+  --fds-color-info-subtle: var(--fds-color-info-50);
+
+  /* Color — Interactive */
+  --fds-color-interactive-hover: var(--fds-color-gray-100);
+  --fds-color-interactive-active: var(--fds-color-gray-200);
+  --fds-color-disabled: var(--fds-color-gray-300);
+
+  /* Color — Overlay */
+  --fds-color-backdrop: var(--fds-color-black);
+
+  /* Spacing */
+  --fds-spacing-element-xs: var(--fds-spacing-1);
+  --fds-spacing-element-sm: var(--fds-spacing-2);
+  --fds-spacing-element: var(--fds-spacing-3);
+  --fds-spacing-element-lg: var(--fds-spacing-4);
+  --fds-spacing-section: var(--fds-spacing-6);
+  --fds-spacing-section-lg: var(--fds-spacing-10);
+
+  /* Typography */
+  --fds-font-body-family: var(--fds-font-family-sans);
+  --fds-font-body-size: var(--fds-font-size-sm);
+  --fds-font-body-weight: var(--fds-font-weight-regular);
+  --fds-font-body-line-height: var(--fds-line-height-normal);
+  --fds-font-heading-family: var(--fds-font-family-sans);
+  --fds-font-heading-weight: var(--fds-font-weight-semibold);
+  --fds-font-heading-line-height: var(--fds-line-height-tight);
+  --fds-font-code-family: var(--fds-font-family-mono);
+  --fds-font-label-size: var(--fds-font-size-xs);
+  --fds-font-label-weight: var(--fds-font-weight-medium);
+
+  /* Border Radius */
+  --fds-radius-element: var(--fds-radius-md);
+  --fds-radius-surface: var(--fds-radius-lg);
+  --fds-radius-overlay: var(--fds-radius-xl);
+
+  /* Shadow */
+  --fds-shadow-element: var(--fds-shadow-sm);
+  --fds-shadow-surface: var(--fds-shadow-md);
+  --fds-shadow-overlay: var(--fds-shadow-xl);
+}

package/dist/tokens/__tests__/helpers.js

@@ -0,0 +1,117 @@
+import fs from "node:fs";
+import path from "node:path";
+import postcss from "postcss";
+// ── Path constants ──────────────────────────────────────────────────────────
+const LIB_DIR = path.resolve(import.meta.dirname, "../..");
+const TOKENS_DIR = path.resolve(LIB_DIR, "tokens");
+const THEMES_DIR = path.resolve(LIB_DIR, "themes");
+const COMPONENT_DIR = path.resolve(TOKENS_DIR, "components");
+const RAW_FILES = [
+    "color.css",
+    "spacing.css",
+    "radii.css",
+    "typography.css",
+    "shadows.css",
+];
+export { TOKENS_DIR, THEMES_DIR, COMPONENT_DIR, RAW_FILES };
+// ── PostCSS parsing ─────────────────────────────────────────────────────────
+export function parseCSSFile(absolutePath) {
+    const css = fs.readFileSync(absolutePath, "utf-8");
+    return postcss.parse(css, { from: absolutePath });
+}
+export function parseTokenFile(relativePath) {
+    return parseCSSFile(path.resolve(TOKENS_DIR, relativePath));
+}
+export function parseThemeFile(fileName) {
+    return parseCSSFile(path.resolve(THEMES_DIR, fileName));
+}
+export function getDeclarations(root) {
+    const result = [];
+    root.walkDecls((decl) => {
+        if (!decl.prop.startsWith("--"))
+            return;
+        const selector = decl.parent && "selector" in decl.parent
+            ? decl.parent.selector
+            : "";
+        result.push({ prop: decl.prop, value: decl.value, selector });
+    });
+    return result;
+}
+// ── Value classifiers ───────────────────────────────────────────────────────
+const VAR_PATTERN = /var\(\s*(--[a-zA-Z0-9-]+)\s*(?:,\s*[^)]+)?\)/;
+export function extractVarRefs(value) {
+    return [...value.matchAll(new RegExp(VAR_PATTERN, "g"))].map((m) => m[1]);
+}
+export function isVarRef(value) {
+    return VAR_PATTERN.test(value);
+}
+export function isLiteral(value) {
+    return !isVarRef(value);
+}
+const PURE_VAR_RE = /^var\(\s*--[a-zA-Z0-9-]+\s*(?:,\s*[^)]+)?\)$/;
+/** True when value is exactly one var() call with nothing else. */
+export function isPureVarRef(value) {
+    return PURE_VAR_RE.test(value.trim());
+}
+// ── Selector extraction ─────────────────────────────────────────────────────
+export function getSelectors(root) {
+    const selectors = new Set();
+    root.walkRules((rule) => {
+        for (const s of rule.selectors) {
+            selectors.add(s.trim());
+        }
+    });
+    return [...selectors];
+}
+// ── Token set builders ──────────────────────────────────────────────────────
+export function getRawTokenNames() {
+    const names = new Set();
+    for (const file of RAW_FILES) {
+        const root = parseTokenFile(file);
+        for (const decl of getDeclarations(root)) {
+            names.add(decl.prop);
+        }
+    }
+    return names;
+}
+export function getSemanticTokenNames() {
+    const names = new Set();
+    const root = parseTokenFile("semantic.css");
+    for (const decl of getDeclarations(root)) {
+        names.add(decl.prop);
+    }
+    return names;
+}
+export function getComponentFiles() {
+    if (!fs.existsSync(COMPONENT_DIR))
+        return [];
+    return fs
+        .readdirSync(COMPONENT_DIR)
+        .filter((f) => f.endsWith(".css"))
+        .map((f) => path.resolve(COMPONENT_DIR, f));
+}
+export function getComponentTokenNames() {
+    const names = new Set();
+    for (const file of getComponentFiles()) {
+        const root = parseCSSFile(file);
+        for (const decl of getDeclarations(root)) {
+            names.add(decl.prop);
+        }
+    }
+    return names;
+}
+// ── Allowlists (D014 + css-variable-scoping.md §4-§5) ──────────────────────
+/** Structural literals permitted in component tokens */
+export const COMPONENT_LITERAL_ALLOWLIST = {
+    "--fds-panel-handle-width": "4px",
+    "--fds-panel-handle-color": "transparent",
+};
+/** Raw token refs permitted in component tokens (D014) */
+export const COMPONENT_RAW_REF_ALLOWLIST = {
+    "--fds-appshell-commandbar-height": "--fds-spacing-12",
+    "--fds-appshell-statusbar-height": "--fds-spacing-8",
+};
+/** Mixed literal+var values permitted in component tokens */
+export const COMPONENT_MIXED_VALUE_ALLOWLIST = {
+    "--fds-statusbar-padding": "0 var(--fds-spacing-element)",
+};

package/dist/tokens/color.css

@@ -0,0 +1,112 @@
+/* Raw color tokens — fudge-design-system
+ * Literal hex values. No semantic aliases.
+ * Palette derived from OKLCH-informed ramps (Tailwind basis).
+ */
+:root {
+  --fds-color-white: #ffffff;
+  --fds-color-black: #000000;
+
+  /* Gray (cool neutral, ~220 hue) */
+  --fds-color-gray-50: #f8fafc;
+  --fds-color-gray-100: #f1f5f9;
+  --fds-color-gray-200: #e2e8f0;
+  --fds-color-gray-300: #cbd5e1;
+  --fds-color-gray-400: #94a3b8;
+  --fds-color-gray-500: #64748b;
+  --fds-color-gray-600: #475569;
+  --fds-color-gray-700: #334155;
+  --fds-color-gray-800: #1e293b;
+  --fds-color-gray-900: #0f172a;
+  --fds-color-gray-950: #020617;
+
+  /* Primary (blue, ~220 hue) */
+  --fds-color-primary-50: #eff6ff;
+  --fds-color-primary-100: #dbeafe;
+  --fds-color-primary-200: #bfdbfe;
+  --fds-color-primary-300: #93c5fd;
+  --fds-color-primary-400: #60a5fa;
+  --fds-color-primary-500: #3b82f6;
+  --fds-color-primary-600: #2563eb;
+  --fds-color-primary-700: #1d4ed8;
+  --fds-color-primary-800: #1e40af;
+  --fds-color-primary-900: #1e3a8a;
+  --fds-color-primary-950: #172554;
+
+  /* Secondary (violet, ~270 hue) */
+  --fds-color-secondary-50: #f5f3ff;
+  --fds-color-secondary-100: #ede9fe;
+  --fds-color-secondary-200: #ddd6fe;
+  --fds-color-secondary-300: #c4b5fd;
+  --fds-color-secondary-400: #a78bfa;
+  --fds-color-secondary-500: #8b5cf6;
+  --fds-color-secondary-600: #7c3aed;
+  --fds-color-secondary-700: #6d28d9;
+  --fds-color-secondary-800: #5b21b6;
+  --fds-color-secondary-900: #4c1d95;
+  --fds-color-secondary-950: #2e1065;
+
+  /* Accent (amber, ~40 hue) */
+  --fds-color-accent-50: #fffbeb;
+  --fds-color-accent-100: #fef3c7;
+  --fds-color-accent-200: #fde68a;
+  --fds-color-accent-300: #fcd34d;
+  --fds-color-accent-400: #fbbf24;
+  --fds-color-accent-500: #f59e0b;
+  --fds-color-accent-600: #d97706;
+  --fds-color-accent-700: #b45309;
+  --fds-color-accent-800: #92400e;
+  --fds-color-accent-900: #78350f;
+  --fds-color-accent-950: #451a03;
+
+  /* Success (green, ~145 hue) */
+  --fds-color-success-50: #f0fdf4;
+  --fds-color-success-100: #dcfce7;
+  --fds-color-success-200: #bbf7d0;
+  --fds-color-success-300: #86efac;
+  --fds-color-success-400: #4ade80;
+  --fds-color-success-500: #22c55e;
+  --fds-color-success-600: #16a34a;
+  --fds-color-success-700: #15803d;
+  --fds-color-success-800: #166534;
+  --fds-color-success-900: #14532d;
+  --fds-color-success-950: #052e16;
+
+  /* Warning (yellow, ~50 hue) */
+  --fds-color-warning-50: #fefce8;
+  --fds-color-warning-100: #fef9c3;
+  --fds-color-warning-200: #fef08a;
+  --fds-color-warning-300: #fde047;
+  --fds-color-warning-400: #facc15;
+  --fds-color-warning-500: #eab308;
+  --fds-color-warning-600: #ca8a04;
+  --fds-color-warning-700: #a16207;
+  --fds-color-warning-800: #854d0e;
+  --fds-color-warning-900: #713f12;
+  --fds-color-warning-950: #422006;
+
+  /* Error (red, ~0 hue) */
+  --fds-color-error-50: #fef2f2;
+  --fds-color-error-100: #fee2e2;
+  --fds-color-error-200: #fecaca;
+  --fds-color-error-300: #fca5a5;
+  --fds-color-error-400: #f87171;
+  --fds-color-error-500: #ef4444;
+  --fds-color-error-600: #dc2626;
+  --fds-color-error-700: #b91c1c;
+  --fds-color-error-800: #991b1b;
+  --fds-color-error-900: #7f1d1d;
+  --fds-color-error-950: #450a0a;
+
+  /* Info (cyan, ~190 hue) */
+  --fds-color-info-50: #ecfeff;
+  --fds-color-info-100: #cffafe;
+  --fds-color-info-200: #a5f3fc;
+  --fds-color-info-300: #67e8f9;
+  --fds-color-info-400: #22d3ee;
+  --fds-color-info-500: #06b6d4;
+  --fds-color-info-600: #0891b2;
+  --fds-color-info-700: #0e7490;
+  --fds-color-info-800: #155e75;
+  --fds-color-info-900: #164e63;
+  --fds-color-info-950: #083344;
+}

package/dist/tokens/components/appshell.css

@@ -0,0 +1,22 @@
+/* Component tokens — AppShell + structural zones */
+.fds-appshell {
+  --fds-appshell-commandbar-height: var(--fds-spacing-12);
+  --fds-appshell-statusbar-height: var(--fds-spacing-8);
+  --fds-appshell-bg: var(--fds-color-bg);
+}
+
+.fds-commandbar {
+  --fds-commandbar-bg: var(--fds-color-surface);
+  --fds-commandbar-border-color: var(--fds-color-border);
+  --fds-commandbar-padding: var(--fds-spacing-element-sm) var(--fds-spacing-element);
+}
+
+.fds-canvas {
+  --fds-canvas-bg: var(--fds-color-bg);
+}
+
+.fds-statusbar {
+  --fds-statusbar-bg: var(--fds-color-surface);
+  --fds-statusbar-border-color: var(--fds-color-border);
+  --fds-statusbar-padding: 0 var(--fds-spacing-element);
+}

package/dist/tokens/components/button.css

@@ -0,0 +1,16 @@
+.fds-button {
+  --fds-button-bg: var(--fds-color-primary);
+  --fds-button-bg-hover: var(--fds-color-primary-hover);
+  --fds-button-bg-active: var(--fds-color-primary-active);
+  --fds-button-text: var(--fds-color-text-on-primary);
+  --fds-button-border-color: var(--fds-color-primary);
+  --fds-button-border-color-focus: var(--fds-color-border-focus);
+  --fds-button-font-family: var(--fds-font-body-family);
+  --fds-button-font-size: var(--fds-font-body-size);
+  --fds-button-font-weight: var(--fds-font-label-weight);
+  --fds-button-padding-x: var(--fds-spacing-element-lg);
+  --fds-button-padding-y: var(--fds-spacing-element-sm);
+  --fds-button-radius: var(--fds-radius-element);
+  --fds-button-bg-disabled: var(--fds-color-disabled);
+  --fds-button-text-disabled: var(--fds-color-text-secondary);
+}

package/dist/tokens/components/command-palette.css

@@ -0,0 +1,15 @@
+.fds-command-palette {
+  --fds-command-palette-bg: var(--fds-color-surface-overlay);
+  --fds-command-palette-border-color: var(--fds-color-border);
+  --fds-command-palette-radius: var(--fds-radius-overlay);
+  --fds-command-palette-shadow: var(--fds-shadow-overlay);
+  --fds-command-palette-padding: var(--fds-spacing-element-sm);
+  --fds-command-palette-item-bg-active: var(--fds-color-interactive-hover);
+  --fds-command-palette-item-text: var(--fds-color-text);
+  --fds-command-palette-item-text-secondary: var(--fds-color-text-tertiary);
+  --fds-command-palette-item-font-size-secondary: var(--fds-font-label-size);
+  --fds-command-palette-item-padding-x: var(--fds-spacing-element);
+  --fds-command-palette-item-padding-y: var(--fds-spacing-element-sm);
+  --fds-command-palette-item-radius: var(--fds-radius-element);
+  --fds-command-palette-empty-text: var(--fds-color-text-tertiary);
+}

package/dist/tokens/components/input.css

@@ -0,0 +1,16 @@
+.fds-input {
+  --fds-input-bg: var(--fds-color-surface);
+  --fds-input-text: var(--fds-color-text);
+  --fds-input-placeholder: var(--fds-color-text-tertiary);
+  --fds-input-border-color: var(--fds-color-border);
+  --fds-input-border-color-hover: var(--fds-color-border-strong);
+  --fds-input-border-color-focus: var(--fds-color-border-focus);
+  --fds-input-border-color-error: var(--fds-color-border-error);
+  --fds-input-font-family: var(--fds-font-body-family);
+  --fds-input-font-size: var(--fds-font-body-size);
+  --fds-input-padding-x: var(--fds-spacing-element);
+  --fds-input-padding-y: var(--fds-spacing-element-sm);
+  --fds-input-radius: var(--fds-radius-element);
+  --fds-input-bg-disabled: var(--fds-color-disabled);
+  --fds-input-text-disabled: var(--fds-color-text-secondary);
+}

package/dist/tokens/components/modal.css

@@ -0,0 +1,9 @@
+.fds-modal {
+  --fds-modal-bg: var(--fds-color-surface-overlay);
+  --fds-modal-text: var(--fds-color-text);
+  --fds-modal-border-color: var(--fds-color-border);
+  --fds-modal-radius: var(--fds-radius-overlay);
+  --fds-modal-shadow: var(--fds-shadow-overlay);
+  --fds-modal-padding: var(--fds-spacing-section);
+  --fds-modal-backdrop: var(--fds-color-backdrop);
+}

package/dist/tokens/components/panel.css

@@ -0,0 +1,16 @@
+/* Component tokens — Panel
+ *
+ * Width defaults/min/max are intentionally NOT tokenized here.
+ * Panel width is controlled programmatically via Svelte props (width, minWidth,
+ * maxWidth) and applied as inline styles. CSS custom properties cannot serve as
+ * JS prop defaults, so declaring them here would create a misleading dual
+ * source of truth. The component props are authoritative for sizing.
+ */
+.fds-panel {
+  --fds-panel-bg: var(--fds-color-surface);
+  --fds-panel-border-color: var(--fds-color-border);
+  --fds-panel-handle-width: 4px;
+  --fds-panel-handle-color: transparent;
+  --fds-panel-handle-color-hover: var(--fds-color-border-strong);
+  --fds-panel-handle-color-active: var(--fds-color-primary);
+}

package/dist/tokens/components/tooltip.css

@@ -0,0 +1,10 @@
+.fds-tooltip {
+  --fds-tooltip-bg: var(--fds-color-surface-overlay);
+  --fds-tooltip-text: var(--fds-color-text);
+  --fds-tooltip-font-family: var(--fds-font-body-family);
+  --fds-tooltip-font-size: var(--fds-font-label-size);
+  --fds-tooltip-padding-x: var(--fds-spacing-element-sm);
+  --fds-tooltip-padding-y: var(--fds-spacing-element-xs);
+  --fds-tooltip-radius: var(--fds-radius-element);
+  --fds-tooltip-shadow: var(--fds-shadow-overlay);
+}

package/dist/tokens/index.css

@@ -0,0 +1,13 @@
+@import './color.css';
+@import './spacing.css';
+@import './radii.css';
+@import './typography.css';
+@import './shadows.css';
+@import './semantic.css';
+@import './components/appshell.css';
+@import './components/button.css';
+@import './components/command-palette.css';
+@import './components/input.css';
+@import './components/modal.css';
+@import './components/panel.css';
+@import './components/tooltip.css';

package/dist/tokens/radii.css

@@ -0,0 +1,10 @@
+/* Raw border-radius tokens — fudge-design-system */
+:root {
+  --fds-radius-none: 0;
+  --fds-radius-sm: 0.125rem;  /* 2px */
+  --fds-radius-md: 0.375rem;  /* 6px */
+  --fds-radius-lg: 0.5rem;    /* 8px */
+  --fds-radius-xl: 0.75rem;   /* 12px */
+  --fds-radius-2xl: 1rem;     /* 16px */
+  --fds-radius-full: 9999px;
+}

package/dist/tokens/semantic.css

@@ -0,0 +1,79 @@
+/* Semantic tokens — fudge-design-system
+ * Intent-driven aliases resolving to raw tokens via var().
+ * Zero literal values. Theming works by rebinding these mappings.
+ */
+:root {
+  /* Color — Backgrounds / Surfaces */
+  --fds-color-bg: var(--fds-color-white);
+  --fds-color-surface: var(--fds-color-white);
+  --fds-color-surface-raised: var(--fds-color-gray-50);
+  --fds-color-surface-sunken: var(--fds-color-gray-100);
+  --fds-color-surface-overlay: var(--fds-color-white);
+  --fds-color-primary: var(--fds-color-primary-600);
+  --fds-color-primary-hover: var(--fds-color-primary-700);
+  --fds-color-primary-active: var(--fds-color-primary-800);
+  --fds-color-secondary: var(--fds-color-secondary-600);
+  --fds-color-accent: var(--fds-color-accent-500);
+
+  /* Color — Text */
+  --fds-color-text: var(--fds-color-gray-900);
+  --fds-color-text-secondary: var(--fds-color-gray-600);
+  --fds-color-text-tertiary: var(--fds-color-gray-400);
+  --fds-color-text-inverse: var(--fds-color-white);
+  --fds-color-text-link: var(--fds-color-primary-600);
+  --fds-color-text-on-primary: var(--fds-color-white);
+
+  /* Color — Borders */
+  --fds-color-border: var(--fds-color-gray-200);
+  --fds-color-border-strong: var(--fds-color-gray-300);
+  --fds-color-border-focus: var(--fds-color-primary-500);
+  --fds-color-border-error: var(--fds-color-error-500);
+
+  /* Color — State / Feedback */
+  --fds-color-success: var(--fds-color-success-600);
+  --fds-color-success-subtle: var(--fds-color-success-50);
+  --fds-color-warning: var(--fds-color-warning-500);
+  --fds-color-warning-subtle: var(--fds-color-warning-50);
+  --fds-color-error: var(--fds-color-error-600);
+  --fds-color-error-subtle: var(--fds-color-error-50);
+  --fds-color-info: var(--fds-color-info-600);
+  --fds-color-info-subtle: var(--fds-color-info-50);
+
+  /* Color — Interactive */
+  --fds-color-interactive-hover: var(--fds-color-gray-100);
+  --fds-color-interactive-active: var(--fds-color-gray-200);
+  --fds-color-disabled: var(--fds-color-gray-300);
+
+  /* Color — Overlay */
+  --fds-color-backdrop: var(--fds-color-black);
+
+  /* Spacing */
+  --fds-spacing-element-xs: var(--fds-spacing-1);
+  --fds-spacing-element-sm: var(--fds-spacing-2);
+  --fds-spacing-element: var(--fds-spacing-3);
+  --fds-spacing-element-lg: var(--fds-spacing-4);
+  --fds-spacing-section: var(--fds-spacing-6);
+  --fds-spacing-section-lg: var(--fds-spacing-10);
+
+  /* Typography */
+  --fds-font-body-family: var(--fds-font-family-sans);
+  --fds-font-body-size: var(--fds-font-size-sm);
+  --fds-font-body-weight: var(--fds-font-weight-regular);
+  --fds-font-body-line-height: var(--fds-line-height-normal);
+  --fds-font-heading-family: var(--fds-font-family-sans);
+  --fds-font-heading-weight: var(--fds-font-weight-semibold);
+  --fds-font-heading-line-height: var(--fds-line-height-tight);
+  --fds-font-code-family: var(--fds-font-family-mono);
+  --fds-font-label-size: var(--fds-font-size-xs);
+  --fds-font-label-weight: var(--fds-font-weight-medium);
+
+  /* Border Radius */
+  --fds-radius-element: var(--fds-radius-md);
+  --fds-radius-surface: var(--fds-radius-lg);
+  --fds-radius-overlay: var(--fds-radius-xl);
+
+  /* Shadow */
+  --fds-shadow-element: var(--fds-shadow-sm);
+  --fds-shadow-surface: var(--fds-shadow-md);
+  --fds-shadow-overlay: var(--fds-shadow-xl);
+}

package/dist/tokens/shadows.css

@@ -0,0 +1,11 @@
+/* Raw shadow tokens — fudge-design-system
+ * Multi-layer box-shadows. CSS Color Level 4 syntax.
+ */
+:root {
+  --fds-shadow-none: none;
+  --fds-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --fds-shadow-md: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+  --fds-shadow-lg: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --fds-shadow-xl: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  --fds-shadow-2xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+}