@aspect-ops/exon-ui 0.0.1

package/dist/components/Typography/Typography.svelte

@@ -0,0 +1,99 @@
+<script lang="ts">
+	import type { TypographyVariant } from '../../types/index.js';
+
+	interface Props {
+		variant?: TypographyVariant;
+		as?: string;
+		class?: string;
+		children?: import('svelte').Snippet;
+	}
+
+	let { variant = 'body', as, class: className = '', children }: Props = $props();
+
+	// Map variant to default HTML element
+	const variantToElement: Record<TypographyVariant, string> = {
+		h1: 'h1',
+		h2: 'h2',
+		h3: 'h3',
+		h4: 'h4',
+		h5: 'h5',
+		h6: 'h6',
+		'body-lg': 'p',
+		body: 'p',
+		'body-sm': 'p',
+		caption: 'span'
+	};
+
+	const element = $derived(as || variantToElement[variant]);
+</script>
+
+<svelte:element this={element} class="typography typography--{variant} {className}">
+	{#if children}
+		{@render children()}
+	{/if}
+</svelte:element>
+
+<style>
+	.typography {
+		margin: 0;
+		font-family: inherit;
+		color: var(--color-text, #1f2937);
+	}
+
+	.typography--h1 {
+		font-size: var(--text-4xl, 2.25rem);
+		font-weight: 700;
+		line-height: 1.2;
+	}
+
+	.typography--h2 {
+		font-size: var(--text-3xl, 1.875rem);
+		font-weight: 700;
+		line-height: 1.25;
+	}
+
+	.typography--h3 {
+		font-size: var(--text-2xl, 1.5rem);
+		font-weight: 600;
+		line-height: 1.3;
+	}
+
+	.typography--h4 {
+		font-size: var(--text-xl, 1.25rem);
+		font-weight: 600;
+		line-height: 1.4;
+	}
+
+	.typography--h5 {
+		font-size: var(--text-lg, 1.125rem);
+		font-weight: 600;
+		line-height: 1.4;
+	}
+
+	.typography--h6 {
+		font-size: var(--text-base, 1rem);
+		font-weight: 600;
+		line-height: 1.5;
+	}
+
+	.typography--body-lg {
+		font-size: var(--text-lg, 1.125rem);
+		line-height: 1.6;
+	}
+
+	.typography--body {
+		font-size: var(--text-base, 1rem);
+		line-height: 1.6;
+	}
+
+	.typography--body-sm {
+		font-size: var(--text-sm, 0.875rem);
+		line-height: 1.5;
+	}
+
+	.typography--caption {
+		font-size: var(--text-xs, 0.75rem);
+		line-height: 1.4;
+		color: var(--color-text-muted, #6b7280);
+	}
+</style>

package/dist/components/Typography/Typography.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { TypographyVariant } from '../../types/index.js';
+interface Props {
+    variant?: TypographyVariant;
+    as?: string;
+    class?: string;
+    children?: import('svelte').Snippet;
+}
+declare const Typography: import("svelte").Component<Props, {}, "">;
+type Typography = ReturnType<typeof Typography>;
+export default Typography;

package/dist/components/Typography/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Typography } from './Typography.svelte';
+export type { TypographyProps, TypographyVariant } from '../../types/index.js';

package/dist/components/Typography/index.js

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

package/dist/index.d.ts

@@ -0,0 +1,37 @@
+export { default as Button } from './components/Button/Button.svelte';
+export { default as Typography } from './components/Typography/Typography.svelte';
+export { default as Icon } from './components/Icon/Icon.svelte';
+export { default as Badge } from './components/Badge/Badge.svelte';
+export { default as Link } from './components/Link/Link.svelte';
+export { default as FormField } from './components/FormField/FormField.svelte';
+export { default as TextInput } from './components/TextInput/TextInput.svelte';
+export { default as Textarea } from './components/Textarea/Textarea.svelte';
+export { default as Select } from './components/Select/Select.svelte';
+export { default as Checkbox } from './components/Checkbox/Checkbox.svelte';
+export { default as CheckboxGroup } from './components/Checkbox/CheckboxGroup.svelte';
+export { default as Radio } from './components/Radio/Radio.svelte';
+export { default as RadioGroup } from './components/Radio/RadioGroup.svelte';
+export { default as Switch } from './components/Switch/Switch.svelte';
+export { default as Tabs } from './components/Tabs/Tabs.svelte';
+export { default as TabList } from './components/Tabs/TabList.svelte';
+export { default as TabTrigger } from './components/Tabs/TabTrigger.svelte';
+export { default as TabContent } from './components/Tabs/TabContent.svelte';
+export { default as Menu } from './components/Menu/Menu.svelte';
+export { default as MenuTrigger } from './components/Menu/MenuTrigger.svelte';
+export { default as MenuContent } from './components/Menu/MenuContent.svelte';
+export { default as MenuItem } from './components/Menu/MenuItem.svelte';
+export { default as MenuSeparator } from './components/Menu/MenuSeparator.svelte';
+export { default as MenuSub } from './components/Menu/MenuSub.svelte';
+export { default as MenuSubTrigger } from './components/Menu/MenuSubTrigger.svelte';
+export { default as MenuSubContent } from './components/Menu/MenuSubContent.svelte';
+export { default as Breadcrumbs } from './components/Breadcrumbs/Breadcrumbs.svelte';
+export { default as BreadcrumbItem } from './components/Breadcrumbs/BreadcrumbItem.svelte';
+export { default as BreadcrumbSeparator } from './components/Breadcrumbs/BreadcrumbSeparator.svelte';
+export { default as BottomNav } from './components/BottomNav/BottomNav.svelte';
+export { default as BottomNavItem } from './components/BottomNav/BottomNavItem.svelte';
+export { default as Navbar } from './components/Navbar/Navbar.svelte';
+export { default as NavItem } from './components/Navbar/NavItem.svelte';
+export { default as Sidebar } from './components/Sidebar/Sidebar.svelte';
+export { default as SidebarItem } from './components/Sidebar/SidebarItem.svelte';
+export { default as SidebarGroup } from './components/Sidebar/SidebarGroup.svelte';
+export type { ButtonProps, ButtonVariant, ButtonSize, TypographyProps, TypographyVariant, IconProps, IconSize, BadgeProps, BadgeVariant, LinkProps, InputSize, TextInputType, FormFieldProps, TextInputProps, TextareaProps, SelectOption, SelectProps, CheckboxProps, RadioProps, RadioGroupProps, SwitchProps, TabsOrientation, TabsProps, TabListProps, TabTriggerProps, TabContentProps, MenuProps, MenuTriggerProps, MenuContentProps, MenuItemProps, MenuSeparatorProps, MenuSubProps, MenuSubTriggerProps, MenuSubContentProps, BreadcrumbItemData, BreadcrumbsProps, BreadcrumbItemProps, BottomNavItemData, BottomNavProps, BottomNavItemProps, NavItemProps, NavbarProps, SidebarItemData, SidebarProps, SidebarItemProps, SidebarGroupProps } from './types/index.js';

package/dist/index.js

@@ -0,0 +1,41 @@
+// Exon UI Library - Core Components
+// Tree-shakeable exports per F25 standard
+// Core Components
+export { default as Button } from './components/Button/Button.svelte';
+export { default as Typography } from './components/Typography/Typography.svelte';
+export { default as Icon } from './components/Icon/Icon.svelte';
+export { default as Badge } from './components/Badge/Badge.svelte';
+export { default as Link } from './components/Link/Link.svelte';
+// Form Components
+export { default as FormField } from './components/FormField/FormField.svelte';
+export { default as TextInput } from './components/TextInput/TextInput.svelte';
+export { default as Textarea } from './components/Textarea/Textarea.svelte';
+export { default as Select } from './components/Select/Select.svelte';
+export { default as Checkbox } from './components/Checkbox/Checkbox.svelte';
+export { default as CheckboxGroup } from './components/Checkbox/CheckboxGroup.svelte';
+export { default as Radio } from './components/Radio/Radio.svelte';
+export { default as RadioGroup } from './components/Radio/RadioGroup.svelte';
+export { default as Switch } from './components/Switch/Switch.svelte';
+// Navigation Components
+export { default as Tabs } from './components/Tabs/Tabs.svelte';
+export { default as TabList } from './components/Tabs/TabList.svelte';
+export { default as TabTrigger } from './components/Tabs/TabTrigger.svelte';
+export { default as TabContent } from './components/Tabs/TabContent.svelte';
+export { default as Menu } from './components/Menu/Menu.svelte';
+export { default as MenuTrigger } from './components/Menu/MenuTrigger.svelte';
+export { default as MenuContent } from './components/Menu/MenuContent.svelte';
+export { default as MenuItem } from './components/Menu/MenuItem.svelte';
+export { default as MenuSeparator } from './components/Menu/MenuSeparator.svelte';
+export { default as MenuSub } from './components/Menu/MenuSub.svelte';
+export { default as MenuSubTrigger } from './components/Menu/MenuSubTrigger.svelte';
+export { default as MenuSubContent } from './components/Menu/MenuSubContent.svelte';
+export { default as Breadcrumbs } from './components/Breadcrumbs/Breadcrumbs.svelte';
+export { default as BreadcrumbItem } from './components/Breadcrumbs/BreadcrumbItem.svelte';
+export { default as BreadcrumbSeparator } from './components/Breadcrumbs/BreadcrumbSeparator.svelte';
+export { default as BottomNav } from './components/BottomNav/BottomNav.svelte';
+export { default as BottomNavItem } from './components/BottomNav/BottomNavItem.svelte';
+export { default as Navbar } from './components/Navbar/Navbar.svelte';
+export { default as NavItem } from './components/Navbar/NavItem.svelte';
+export { default as Sidebar } from './components/Sidebar/Sidebar.svelte';
+export { default as SidebarItem } from './components/Sidebar/SidebarItem.svelte';
+export { default as SidebarGroup } from './components/Sidebar/SidebarGroup.svelte';

package/dist/styles/tokens.css

@@ -0,0 +1,431 @@
+/**
+ * Exon UI Design Tokens
+ * Standard: F12 (Radix Colors + Utopia Fluid Typography)
+ *
+ * Color System: Radix-inspired 12-step semantic scale
+ * Typography: Utopia fluid responsive scale
+ *
+ * Research: docs/investigations/INV-002-design-system-colors-typography.md
+ */
+
+:root {
+	/* ========================================
+	 * Color Palette (Radix-inspired 12-step)
+	 * ======================================== */
+
+	/* Gray Scale (Neutral) - Light Mode */
+	--gray-1: #fcfcfc;
+	--gray-2: #f9f9f9;
+	--gray-3: #f0f0f0;
+	--gray-4: #e8e8e8;
+	--gray-5: #e0e0e0;
+	--gray-6: #d9d9d9;
+	--gray-7: #cecece;
+	--gray-8: #bbbbbb;
+	--gray-9: #8d8d8d;
+	--gray-10: #838383;
+	--gray-11: #646464;
+	--gray-12: #202020;
+
+	/* Blue Scale (Primary) - Light Mode */
+	--blue-1: #fbfdff;
+	--blue-2: #f4faff;
+	--blue-3: #e6f4fe;
+	--blue-4: #d5efff;
+	--blue-5: #c2e5ff;
+	--blue-6: #acd8fc;
+	--blue-7: #8ec8f6;
+	--blue-8: #5eb1ef;
+	--blue-9: #0090ff;
+	--blue-10: #0588f0;
+	--blue-11: #0d74ce;
+	--blue-12: #113264;
+
+	/* Green Scale (Success) - Light Mode */
+	--green-1: #fbfefc;
+	--green-2: #f4fbf6;
+	--green-3: #e6f6eb;
+	--green-4: #d6f1df;
+	--green-5: #c4e8d1;
+	--green-6: #adddc0;
+	--green-7: #8eceaa;
+	--green-8: #5bb98b;
+	--green-9: #30a46c;
+	--green-10: #2b9a66;
+	--green-11: #218358;
+	--green-12: #193b2d;
+
+	/* Red Scale (Error/Destructive) - Light Mode */
+	--red-1: #fffcfc;
+	--red-2: #fff7f7;
+	--red-3: #feebec;
+	--red-4: #ffdbdc;
+	--red-5: #ffcdce;
+	--red-6: #fdbdbe;
+	--red-7: #f4a9aa;
+	--red-8: #eb8e90;
+	--red-9: #e5484d;
+	--red-10: #dc3e42;
+	--red-11: #ce2c31;
+	--red-12: #641723;
+
+	/* Amber Scale (Warning) - Light Mode */
+	--amber-1: #fefdfb;
+	--amber-2: #fefbe9;
+	--amber-3: #fff7c2;
+	--amber-4: #ffee9c;
+	--amber-5: #fbe577;
+	--amber-6: #f3d768;
+	--amber-7: #e9c162;
+	--amber-8: #e2a336;
+	--amber-9: #ffc53d;
+	--amber-10: #ffba18;
+	--amber-11: #ab6400;
+	--amber-12: #4f3422;
+
+	/* ========================================
+	 * Semantic Color Tokens (Light Mode)
+	 * ======================================== */
+
+	/* Backgrounds */
+	--color-bg: var(--gray-1);
+	--color-bg-muted: var(--gray-2);
+	--color-bg-subtle: var(--gray-3);
+	--color-bg-hover: var(--gray-4);
+	--color-bg-active: var(--gray-5);
+	--color-bg-elevated: #ffffff;
+
+	/* Text */
+	--color-text: var(--gray-12);
+	--color-text-muted: var(--gray-11);
+	--color-text-subtle: var(--gray-10);
+	--color-text-inverse: #ffffff;
+
+	/* Borders */
+	--color-border: var(--gray-6);
+	--color-border-hover: var(--gray-7);
+	--color-border-active: var(--gray-8);
+
+	/* Primary */
+	--color-primary: var(--blue-9);
+	--color-primary-hover: var(--blue-10);
+	--color-primary-active: var(--blue-11);
+	--color-primary-bg: var(--blue-3);
+	--color-primary-bg-hover: var(--blue-4);
+
+	/* Secondary */
+	--color-secondary: var(--gray-9);
+	--color-secondary-hover: var(--gray-10);
+	--color-secondary-active: var(--gray-11);
+
+	/* Destructive */
+	--color-destructive: var(--red-9);
+	--color-destructive-hover: var(--red-10);
+	--color-destructive-active: var(--red-11);
+	--color-destructive-bg: var(--red-3);
+
+	/* Success */
+	--color-success: var(--green-9);
+	--color-success-hover: var(--green-10);
+	--color-success-active: var(--green-11);
+	--color-success-bg: var(--green-3);
+
+	/* Warning */
+	--color-warning: var(--amber-9);
+	--color-warning-hover: var(--amber-10);
+	--color-warning-active: var(--amber-11);
+	--color-warning-bg: var(--amber-3);
+
+	/* Error (alias for destructive) */
+	--color-error: var(--red-9);
+	--color-error-hover: var(--red-10);
+	--color-error-bg: var(--red-3);
+
+	/* Info */
+	--color-info: var(--blue-9);
+	--color-info-hover: var(--blue-10);
+	--color-info-bg: var(--blue-3);
+
+	/* ========================================
+	 * Typography - Utopia Fluid Scale
+	 * Min: 360px @ 16px | Max: 1280px @ 18px
+	 * Scale: 1.2 → 1.25
+	 * ======================================== */
+
+	--font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+	--font-family-mono: ui-monospace, 'SF Mono', Menlo, Monaco, 'Cascadia Code', monospace;
+
+	/* Fluid type scale */
+	--text-xs: clamp(0.69rem, 0.66rem + 0.14vw, 0.78rem); /* ~11-12px */
+	--text-sm: clamp(0.83rem, 0.79rem + 0.21vw, 0.97rem); /* ~13-16px */
+	--text-base: clamp(1rem, 0.93rem + 0.33vw, 1.125rem); /* 16-18px */
+	--text-lg: clamp(1.13rem, 1.03rem + 0.47vw, 1.41rem); /* ~18-23px */
+	--text-xl: clamp(1.27rem, 1.14rem + 0.65vw, 1.76rem); /* ~20-28px */
+	--text-2xl: clamp(1.42rem, 1.25rem + 0.89vw, 2.2rem); /* ~23-35px */
+	--text-3xl: clamp(1.6rem, 1.37rem + 1.19vw, 2.75rem); /* ~26-44px */
+	--text-4xl: clamp(1.8rem, 1.49rem + 1.57vw, 3.43rem); /* ~29-55px */
+
+	/* Line heights */
+	--leading-none: 1;
+	--leading-tight: 1.25;
+	--leading-snug: 1.375;
+	--leading-normal: 1.5;
+	--leading-relaxed: 1.625;
+	--leading-loose: 2;
+
+	/* Font weights */
+	--font-thin: 100;
+	--font-light: 300;
+	--font-normal: 400;
+	--font-medium: 500;
+	--font-semibold: 600;
+	--font-bold: 700;
+	--font-extrabold: 800;
+
+	/* Letter spacing */
+	--tracking-tighter: -0.05em;
+	--tracking-tight: -0.025em;
+	--tracking-normal: 0;
+	--tracking-wide: 0.025em;
+	--tracking-wider: 0.05em;
+
+	/* ========================================
+	 * Spacing (4px base, fluid)
+	 * ======================================== */
+	--space-xs: clamp(0.25rem, 0.23rem + 0.11vw, 0.31rem); /* 4-5px */
+	--space-sm: clamp(0.5rem, 0.46rem + 0.22vw, 0.63rem); /* 8-10px */
+	--space-md: clamp(1rem, 0.93rem + 0.33vw, 1.125rem); /* 16-18px */
+	--space-lg: clamp(1.5rem, 1.39rem + 0.54vw, 1.75rem); /* 24-28px */
+	--space-xl: clamp(2rem, 1.85rem + 0.76vw, 2.5rem); /* 32-40px */
+	--space-2xl: clamp(3rem, 2.78rem + 1.09vw, 3.75rem); /* 48-60px */
+	--space-3xl: clamp(4rem, 3.7rem + 1.52vw, 5rem); /* 64-80px */
+
+	/* ========================================
+	 * Border Radius
+	 * ======================================== */
+	--radius-none: 0;
+	--radius-sm: 0.25rem; /* 4px */
+	--radius-md: 0.375rem; /* 6px */
+	--radius-lg: 0.5rem; /* 8px */
+	--radius-xl: 0.75rem; /* 12px */
+	--radius-2xl: 1rem; /* 16px */
+	--radius-full: 9999px;
+
+	/* ========================================
+	 * Shadows
+	 * ======================================== */
+	--shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+	--shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+	--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);
+	--shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
+	--shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
+
+	/* ========================================
+	 * Transitions
+	 * ======================================== */
+	--transition-fast: 150ms ease;
+	--transition-base: 200ms ease;
+	--transition-slow: 300ms ease;
+	--transition-slower: 500ms ease;
+
+	/* ========================================
+	 * Z-index Scale
+	 * ======================================== */
+	--z-base: 0;
+	--z-dropdown: 100;
+	--z-sticky: 200;
+	--z-fixed: 300;
+	--z-modal-backdrop: 400;
+	--z-modal: 500;
+	--z-popover: 600;
+	--z-tooltip: 700;
+	--z-toast: 800;
+
+	/* ========================================
+	 * Capacitor Mobile (F20, F21)
+	 * ======================================== */
+	--touch-target-min: 44px;
+	--safe-area-top: env(safe-area-inset-top, 0px);
+	--safe-area-right: env(safe-area-inset-right, 0px);
+	--safe-area-bottom: env(safe-area-inset-bottom, 0px);
+	--safe-area-left: env(safe-area-inset-left, 0px);
+
+	/* ========================================
+	 * Breakpoints (reference only)
+	 * ======================================== */
+	--breakpoint-sm: 640px;
+	--breakpoint-md: 768px;
+	--breakpoint-lg: 1024px;
+	--breakpoint-xl: 1280px;
+	--breakpoint-2xl: 1536px;
+}
+
+/* ========================================
+ * Dark Mode
+ * Standard: F31
+ * ======================================== */
+[data-theme='dark'] {
+	/* Gray Scale - Dark Mode */
+	--gray-1: #111111;
+	--gray-2: #191919;
+	--gray-3: #222222;
+	--gray-4: #2a2a2a;
+	--gray-5: #313131;
+	--gray-6: #3a3a3a;
+	--gray-7: #484848;
+	--gray-8: #606060;
+	--gray-9: #6e6e6e;
+	--gray-10: #7b7b7b;
+	--gray-11: #b4b4b4;
+	--gray-12: #eeeeee;
+
+	/* Blue Scale - Dark Mode */
+	--blue-1: #0d1520;
+	--blue-2: #111927;
+	--blue-3: #0d2847;
+	--blue-4: #003362;
+	--blue-5: #004074;
+	--blue-6: #104d87;
+	--blue-7: #205d9e;
+	--blue-8: #2870bd;
+	--blue-9: #0090ff;
+	--blue-10: #3b9eff;
+	--blue-11: #70b8ff;
+	--blue-12: #c2e6ff;
+
+	/* Green Scale - Dark Mode */
+	--green-1: #0e1512;
+	--green-2: #121b17;
+	--green-3: #132d21;
+	--green-4: #113b29;
+	--green-5: #174933;
+	--green-6: #20573e;
+	--green-7: #28684a;
+	--green-8: #2f7c57;
+	--green-9: #30a46c;
+	--green-10: #33b074;
+	--green-11: #3dd68c;
+	--green-12: #b1f1cb;
+
+	/* Red Scale - Dark Mode */
+	--red-1: #191111;
+	--red-2: #201314;
+	--red-3: #3b1219;
+	--red-4: #500f1c;
+	--red-5: #611623;
+	--red-6: #72232d;
+	--red-7: #8c333a;
+	--red-8: #b54548;
+	--red-9: #e5484d;
+	--red-10: #ec5d5e;
+	--red-11: #ff9592;
+	--red-12: #ffd1d9;
+
+	/* Amber Scale - Dark Mode */
+	--amber-1: #16120c;
+	--amber-2: #1d180f;
+	--amber-3: #302008;
+	--amber-4: #3f2700;
+	--amber-5: #4d3000;
+	--amber-6: #5c3d05;
+	--amber-7: #714f19;
+	--amber-8: #8f6424;
+	--amber-9: #ffc53d;
+	--amber-10: #ffd60a;
+	--amber-11: #ffca16;
+	--amber-12: #ffe7b3;
+
+	/* Semantic overrides for dark mode */
+	--color-bg-elevated: var(--gray-2);
+	--color-text-inverse: var(--gray-12);
+
+	/* Shadows for dark mode */
+	--shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.3);
+	--shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.4), 0 1px 2px -1px rgb(0 0 0 / 0.4);
+	--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.4);
+	--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.4), 0 4px 6px -4px rgb(0 0 0 / 0.4);
+	--shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.5), 0 8px 10px -6px rgb(0 0 0 / 0.5);
+}
+
+/* ========================================
+ * System Preference Dark Mode (fallback)
+ * ======================================== */
+@media (prefers-color-scheme: dark) {
+	:root:not([data-theme='light']) {
+		/* Gray Scale - Dark Mode */
+		--gray-1: #111111;
+		--gray-2: #191919;
+		--gray-3: #222222;
+		--gray-4: #2a2a2a;
+		--gray-5: #313131;
+		--gray-6: #3a3a3a;
+		--gray-7: #484848;
+		--gray-8: #606060;
+		--gray-9: #6e6e6e;
+		--gray-10: #7b7b7b;
+		--gray-11: #b4b4b4;
+		--gray-12: #eeeeee;
+
+		/* Blue Scale - Dark Mode */
+		--blue-1: #0d1520;
+		--blue-2: #111927;
+		--blue-3: #0d2847;
+		--blue-4: #003362;
+		--blue-5: #004074;
+		--blue-6: #104d87;
+		--blue-7: #205d9e;
+		--blue-8: #2870bd;
+		--blue-9: #0090ff;
+		--blue-10: #3b9eff;
+		--blue-11: #70b8ff;
+		--blue-12: #c2e6ff;
+
+		/* Green Scale - Dark Mode */
+		--green-1: #0e1512;
+		--green-2: #121b17;
+		--green-3: #132d21;
+		--green-4: #113b29;
+		--green-5: #174933;
+		--green-6: #20573e;
+		--green-7: #28684a;
+		--green-8: #2f7c57;
+		--green-9: #30a46c;
+		--green-10: #33b074;
+		--green-11: #3dd68c;
+		--green-12: #b1f1cb;
+
+		/* Red Scale - Dark Mode */
+		--red-1: #191111;
+		--red-2: #201314;
+		--red-3: #3b1219;
+		--red-4: #500f1c;
+		--red-5: #611623;
+		--red-6: #72232d;
+		--red-7: #8c333a;
+		--red-8: #b54548;
+		--red-9: #e5484d;
+		--red-10: #ec5d5e;
+		--red-11: #ff9592;
+		--red-12: #ffd1d9;
+
+		/* Amber Scale - Dark Mode */
+		--amber-1: #16120c;
+		--amber-2: #1d180f;
+		--amber-3: #302008;
+		--amber-4: #3f2700;
+		--amber-5: #4d3000;
+		--amber-6: #5c3d05;
+		--amber-7: #714f19;
+		--amber-8: #8f6424;
+		--amber-9: #ffc53d;
+		--amber-10: #ffd60a;
+		--amber-11: #ffca16;
+		--amber-12: #ffe7b3;
+
+		/* Semantic overrides */
+		--color-bg-elevated: var(--gray-2);
+		--color-text-inverse: var(--gray-12);
+	}
+}

package/dist/test-setup.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom/vitest';

package/dist/test-setup.js

@@ -0,0 +1 @@
+import '@testing-library/jest-dom/vitest';