@danielthurau/atlas-labs-codex 0.1.0

package/themes/css/base.css

@@ -0,0 +1,142 @@
+/* Design Codex Base Styles */
+
+/* Font Faces */
+@font-face {
+  font-family: 'Martian Mono';
+  src: url('/fonts/MartianMono-VariableFont_wdth,wght.ttf') format('truetype');
+  font-weight: 100 800;
+  font-stretch: 75% 112.5%;
+  font-display: swap;
+}
+
+:root {
+  /* Primitive Colors - Stone */
+  --color-stone-50: #fafaf9;
+  --color-stone-100: #f5f5f4;
+  --color-stone-200: #e7e5e4;
+  --color-stone-300: #d6d3d1;
+  --color-stone-400: #a8a29e;
+  --color-stone-500: #78716c;
+  --color-stone-600: #57534e;
+  --color-stone-700: #44403c;
+  --color-stone-800: #292524;
+  --color-stone-900: #1c1917;
+  --color-stone-950: #0c0a09;
+
+  /* Primitive Colors - Indigo */
+  --color-indigo-50: #eef2ff;
+  --color-indigo-100: #e0e7ff;
+  --color-indigo-200: #c7d2fe;
+  --color-indigo-300: #a5b4fc;
+  --color-indigo-400: #818cf8;
+  --color-indigo-500: #6366f1;
+  --color-indigo-600: #4f46e5;
+  --color-indigo-700: #4338ca;
+  --color-indigo-800: #3730a3;
+  --color-indigo-900: #312e81;
+  --color-indigo-950: #1e1b4b;
+
+  /* Primitive Colors - Semantic */
+  --color-emerald-400: #34d399;
+  --color-emerald-500: #10b981;
+  --color-emerald-600: #059669;
+  --color-amber-400: #fbbf24;
+  --color-amber-500: #f59e0b;
+  --color-amber-600: #d97706;
+  --color-rose-400: #fb7185;
+  --color-rose-500: #f43f5e;
+  --color-rose-600: #e11d48;
+  --color-white: #ffffff;
+  --color-black: #000000;
+
+  /* Spacing */
+  --space-0: 0;
+  --space-1: 0.25rem;
+  --space-2: 0.5rem;
+  --space-3: 0.75rem;
+  --space-4: 1rem;
+  --space-6: 1.5rem;
+  --space-8: 2rem;
+  --space-12: 3rem;
+  --space-16: 4rem;
+
+  /* Semantic Spacing */
+  --spacing-inline: var(--space-2);
+  --spacing-element: var(--space-3);
+  --spacing-group: var(--space-4);
+  --spacing-section: var(--space-8);
+  --spacing-page: var(--space-16);
+
+  /* Border Radius */
+  --radius-none: 0;
+  --radius-sm: 4px;
+  --radius-md: 8px;
+  --radius-lg: 12px;
+  --radius-xl: 16px;
+  --radius-full: 9999px;
+
+  /* Typography - Font Size */
+  --text-xs: 0.75rem;
+  --text-sm: 0.875rem;
+  --text-base: 1rem;
+  --text-lg: 1.125rem;
+  --text-xl: 1.5rem;
+  --text-2xl: 2rem;
+
+  /* Typography - Line Height */
+  --leading-xs: 1rem;
+  --leading-sm: 1.25rem;
+  --leading-base: 1.5rem;
+  --leading-lg: 1.75rem;
+  --leading-xl: 2rem;
+  --leading-2xl: 2.5rem;
+
+  /* Typography - Font Weight */
+  --font-regular: 400;
+  --font-medium: 500;
+  --font-semibold: 600;
+  --font-bold: 700;
+
+  /* Typography - Letter Spacing */
+  --tracking-tight: -0.025em;
+  --tracking-normal: 0;
+  --tracking-wide: 0.05em;
+
+  /* Typography - Font Family */
+  --font-primary: 'Martian Mono', 'JetBrains Mono', 'Fira Code', Consolas, monospace;
+  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  --font-mono: var(--font-primary);
+
+  /* Shadows */
+  --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);
+
+  /* Component Tokens - Button */
+  --button-padding-x: var(--space-4);
+  --button-padding-y: var(--space-2);
+  --button-radius: var(--radius-md);
+  --button-font-weight: var(--font-medium);
+
+  /* Component Tokens - Input */
+  --input-padding-x: var(--space-3);
+  --input-padding-y: var(--space-2);
+  --input-radius: var(--radius-md);
+  --input-height: 40px;
+
+  /* Component Tokens - Card */
+  --card-padding: var(--space-4);
+  --card-radius: var(--radius-lg);
+
+  /* Component Tokens - Modal */
+  --modal-padding: var(--space-6);
+  --modal-radius: var(--radius-xl);
+
+  /* Component Tokens - Badge */
+  --badge-padding-x: var(--space-2);
+  --badge-padding-y: var(--space-1);
+  --badge-radius: var(--radius-full);
+  --badge-font-size: var(--text-xs);
+}
+

package/themes/css/theme-dark.css

@@ -0,0 +1,48 @@
+/* Auto-generated from tokens.json */
+/* Dark Theme */
+
+[data-theme="dark"] {
+  /* Background Colors */
+  --color-bg-default: var(--color-stone-950);
+  --color-bg-surface: var(--color-stone-900);
+  --color-bg-elevated: var(--color-stone-800);
+  --color-bg-subtle: var(--color-stone-800);
+  --color-bg-muted: var(--color-stone-700);
+
+  /* Text Colors */
+  --color-text-primary: var(--color-stone-50);
+  --color-text-secondary: var(--color-stone-400);
+  --color-text-muted: var(--color-stone-500);
+  --color-text-inverse: var(--color-stone-900);
+
+  /* Border Colors */
+  --color-border-default: var(--color-stone-800);
+  --color-border-subtle: var(--color-stone-800);
+  --color-border-strong: var(--color-stone-600);
+
+  /* Intent Colors */
+  --color-intent-primary: var(--color-indigo-400);
+  --color-intent-primary-hover: var(--color-indigo-300);
+  --color-intent-primary-bg: var(--color-indigo-950);
+  --color-intent-success: var(--color-emerald-400);
+  --color-intent-success-bg: #064e3b;
+  --color-intent-warning: var(--color-amber-400);
+  --color-intent-warning-bg: #78350f;
+  --color-intent-danger: var(--color-rose-400);
+  --color-intent-danger-hover: var(--color-rose-300);
+  --color-intent-danger-bg: #881337;
+
+  /* Status Colors - Semantic aliases for status indicators */
+  --color-success-default: var(--color-emerald-400);
+  --color-success-subtle: #064e3b;
+  --color-error-default: var(--color-rose-400);
+  --color-error-subtle: #881337;
+  --color-warning-default: var(--color-amber-400);
+  --color-warning-subtle: #78350f;
+
+  /* Focus Ring */
+  --focus-ring: 0 0 0 2px var(--color-bg-surface), 0 0 0 4px var(--color-intent-primary);
+
+  color-scheme: dark;
+}
+

package/themes/css/theme-light.css

@@ -0,0 +1,49 @@
+/* Auto-generated from tokens.json */
+/* Light Theme */
+
+:root,
+[data-theme="light"] {
+  /* Background Colors */
+  --color-bg-default: var(--color-stone-50);
+  --color-bg-surface: var(--color-white);
+  --color-bg-elevated: var(--color-white);
+  --color-bg-subtle: var(--color-stone-100);
+  --color-bg-muted: var(--color-stone-200);
+
+  /* Text Colors */
+  --color-text-primary: var(--color-stone-900);
+  --color-text-secondary: var(--color-stone-600);
+  --color-text-muted: var(--color-stone-400);
+  --color-text-inverse: var(--color-white);
+
+  /* Border Colors */
+  --color-border-default: var(--color-stone-200);
+  --color-border-subtle: var(--color-stone-100);
+  --color-border-strong: var(--color-stone-400);
+
+  /* Intent Colors */
+  --color-intent-primary: var(--color-indigo-600);
+  --color-intent-primary-hover: var(--color-indigo-700);
+  --color-intent-primary-bg: var(--color-indigo-50);
+  --color-intent-success: var(--color-emerald-600);
+  --color-intent-success-bg: #ecfdf5;
+  --color-intent-warning: var(--color-amber-600);
+  --color-intent-warning-bg: #fffbeb;
+  --color-intent-danger: var(--color-rose-600);
+  --color-intent-danger-hover: var(--color-rose-700);
+  --color-intent-danger-bg: #fff1f2;
+
+  /* Status Colors - Semantic aliases for status indicators */
+  --color-success-default: var(--color-emerald-500);
+  --color-success-subtle: #ecfdf5;
+  --color-error-default: var(--color-rose-500);
+  --color-error-subtle: #fff1f2;
+  --color-warning-default: var(--color-amber-500);
+  --color-warning-subtle: #fffbeb;
+
+  /* Focus Ring */
+  --focus-ring: 0 0 0 2px var(--color-bg-surface), 0 0 0 4px var(--color-intent-primary);
+
+  color-scheme: light;
+}
+