@ahriknow/lux 0.0.1

package/src/theme/tokens.js

@@ -0,0 +1,128 @@
+/**
+ * Generate CSS custom properties (tokens) from a palette.
+ */
+
+import { hexToRgb, rgbString } from './color.js';
+
+function rgb(hex) {
+    const { r, g, b } = hexToRgb(hex);
+    return rgbString(r, g, b);
+}
+
+/**
+ * Generate light theme tokens from palette + semantic colors.
+ */
+export function generateLightTokens(palette, semantic) {
+    return {
+        // Primary palette
+        'lux-primary-50': rgb(palette[50]),
+        'lux-primary-100': rgb(palette[100]),
+        'lux-primary-200': rgb(palette[200]),
+        'lux-primary-300': rgb(palette[300]),
+        'lux-primary-400': rgb(palette[400]),
+        'lux-primary-500': rgb(palette[500]),
+        'lux-primary-600': rgb(palette[600]),
+        'lux-primary-700': rgb(palette[700]),
+        'lux-primary-800': rgb(palette[800]),
+        'lux-primary-900': rgb(palette[900]),
+
+        // Semantic
+        'lux-success': rgb(semantic.success[500]),
+        'lux-warning': rgb(semantic.warning[500]),
+        'lux-error': rgb(semantic.error[500]),
+        'lux-info': rgb(semantic.info[500]),
+
+        // Surface / background (light mode)
+        'lux-bg': '15 23 42',
+        'lux-bg-alt': '30 41 59',
+        'lux-surface': '15 23 42',
+        'lux-card': '30 41 59',
+        'lux-overlay': '0 0 0 / 50%',
+
+        // Text
+        'lux-text': '241 245 249',
+        'lux-text-dim': '148 163 184',
+        'lux-text-muted': '100 116 139',
+
+        // Border
+        'lux-border': '51 65 85',
+        'lux-border-light': '71 85 105',
+
+        // Interactive
+        'lux-hover': '255 255 255 / 5%',
+        'lux-active': '255 255 255 / 10%',
+        'lux-focus': '0 0 0 / 40%',
+
+        // Radius
+        'lux-radius-sm': '6px',
+        'lux-radius': '8px',
+        'lux-radius-lg': '12px',
+        'lux-radius-xl': '16px',
+        'lux-radius-full': '9999px',
+    };
+}
+
+/**
+ * Generate dark theme tokens.
+ */
+export function generateDarkTokens(palette, semantic) {
+    return {
+        // Primary — use lighter variants for dark mode
+        'lux-primary-50': rgb(palette[900]),
+        'lux-primary-100': rgb(palette[800]),
+        'lux-primary-200': rgb(palette[700]),
+        'lux-primary-300': rgb(palette[600]),
+        'lux-primary-400': rgb(palette[400]),
+        'lux-primary-500': rgb(palette[500]),
+        'lux-primary-600': rgb(palette[300]),
+        'lux-primary-700': rgb(palette[200]),
+        'lux-primary-800': rgb(palette[100]),
+        'lux-primary-900': rgb(palette[50]),
+
+        // Semantic
+        'lux-success': rgb(semantic.success[500]),
+        'lux-warning': rgb(semantic.warning[500]),
+        'lux-error': rgb(semantic.error[500]),
+        'lux-info': rgb(semantic.info[500]),
+
+        // Surface (dark mode)
+        'lux-bg': '15 23 42',
+        'lux-bg-alt': '30 41 59',
+        'lux-surface': '15 23 42',
+        'lux-card': '30 41 59',
+        'lux-overlay': '0 0 0 / 70%',
+
+        // Text
+        'lux-text': '241 245 249',
+        'lux-text-dim': '148 163 184',
+        'lux-text-muted': '100 116 139',
+
+        // Border
+        'lux-border': '51 65 85',
+        'lux-border-light': '71 85 105',
+
+        // Interactive
+        'lux-hover': '255 255 255 / 8%',
+        'lux-active': '255 255 255 / 12%',
+        'lux-focus': '0 0 0 / 50%',
+
+        // Radius (same as light)
+        'lux-radius-sm': '6px',
+        'lux-radius': '8px',
+        'lux-radius-lg': '12px',
+        'lux-radius-xl': '16px',
+        'lux-radius-full': '9999px',
+    };
+}
+
+/**
+ * Convert token map to CSS string.
+ */
+export function tokensToCSS(tokens, indent = '  ') {
+    let css = ':root {\n';
+    for (const [key, value] of Object.entries(tokens)) {
+        css += `${indent}--${key}: ${value};\n`;
+    }
+    css += '}';
+    return css;
+}

package/src/themes/dark.css

@@ -0,0 +1,130 @@
+/**
+ * Lux Dark Theme
+ * Import this file to apply the dark theme:
+ *   import '@ahriknow/lux/themes/dark.css';
+ */
+:root {
+  /* ── Primary (lighter for dark bg) ── */
+  --lux-primary-50:  35 30 100;
+  --lux-primary-100: 52 45 136;
+  --lux-primary-200: 67 58 168;
+  --lux-primary-300: 82 73 195;
+  --lux-primary-400: 129 120 247;
+  --lux-primary-500: 139 92 246;
+  --lux-primary-600: 147 100 255;
+  --lux-primary-700: 186 200 255;
+  --lux-primary-800: 219 228 255;
+  --lux-primary-900: 238 242 255;
+
+  /* ── Semantic ── */
+  --lux-success: 152 195 121;
+  --lux-warning: 209 154 102;
+  --lux-error:   224 108 117;
+  --lux-info:    86 182 194;
+
+  --lux-success-light: 20 83 45;
+  --lux-warning-light: 113 63 18;
+  --lux-error-light:   127 29 29;
+  --lux-info-light:    23 37 84;
+
+  /* ── Background ── */
+  --lux-bg:        40 44 52;
+  --lux-bg-alt:    50 54 64;
+  --lux-surface:   40 44 52;
+  --lux-card:      50 54 64;
+  --lux-overlay:   0 0 0 / 60%;
+
+  /* ── Nav ── */
+  --lux-nav-bg:    rgba(40, 44, 52, 0.92);
+
+  /* ── Text ── */
+  --lux-text:            171 178 191;
+  --lux-text-secondary:  148 155 172;
+  --lux-text-muted:      92 99 112;
+
+  /* ── Scrollbar ── */
+  --lux-scrollbar:  92 99 112;
+
+  /* ── Border ── */
+  --lux-border:       62 68 81;
+  --lux-border-hover: 76 82 96;
+  --lux-border-focus: 198 120 221;
+
+  /* ── Interactive ── */
+  --lux-hover:   255 255 255 / 5%;
+  --lux-active:  255 255 255 / 8%;
+  --lux-focus:   0 0 0 / 50%;
+  --lux-disabled: 50 54 64;
+
+  /* ── Shadow ── */
+  --lux-shadow-sm:  0 1px 2px 0 rgb(0 0 0 / 30%);
+  --lux-shadow:     0 1px 3px 0 rgb(0 0 0 / 40%), 0 1px 2px -1px rgb(0 0 0 / 40%);
+  --lux-shadow-md:  0 4px 6px -1px rgb(0 0 0 / 40%), 0 2px 4px -2px rgb(0 0 0 / 40%);
+  --lux-shadow-lg:  0 10px 15px -3px rgb(0 0 0 / 40%), 0 4px 6px -4px rgb(0 0 0 / 40%);
+
+  /* ── Radius (same as light) ── */
+  --lux-radius-sm:   4px;
+  --lux-radius:      6px;
+  --lux-radius-md:   8px;
+  --lux-radius-lg:   12px;
+  --lux-radius-xl:   16px;
+  --lux-radius-full: 9999px;
+
+  /* ── Typography ── */
+  --lux-font-sans:  -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
+  --lux-font-mono:  'SF Mono', 'Fira Code', 'Cascadia Code', Consolas, monospace;
+  --lux-font-xs:    0.75rem;
+  --lux-font-sm:    0.875rem;
+  --lux-font-base:  1rem;
+  --lux-font-lg:    1.125rem;
+  --lux-font-xl:    1.25rem;
+  --lux-font-2xl:   1.5rem;
+  --lux-font-3xl:   1.875rem;
+
+  /* ── Spacing ── */
+  --lux-space-1:  0.25rem;
+  --lux-space-2:  0.5rem;
+  --lux-space-3:  0.75rem;
+  --lux-space-4:  1rem;
+  --lux-space-5:  1.25rem;
+  --lux-space-6:  1.5rem;
+  --lux-space-8:  2rem;
+  --lux-space-10: 2.5rem;
+  --lux-space-12: 3rem;
+
+  /* ── Transition ── */
+  --lux-transition:   150ms ease;
+  --lux-transition-slow: 300ms ease;
+
+  /* ── Code ── */
+  --lux-code-bg:         40 44 52;
+  --lux-code-header:     50 54 64;
+  --lux-code-border:     62 68 81;
+  --lux-code-text:       171 178 191;
+  --lux-code-keyword:    198 120 221;
+  --lux-code-string:     152 195 121;
+  --lux-code-number:     209 154 102;
+  --lux-code-comment:    92 99 112;
+  --lux-code-function:   97 174 238;
+  --lux-code-class:      230 192 123;
+  --lux-code-variable:   224 108 117;
+  --lux-code-tag:        224 108 117;
+  --lux-code-attr:       209 154 102;
+  --lux-code-selector:   152 195 121;
+  --lux-code-literal:    86 182 194;
+  --lux-code-symbol:     97 174 238;
+  --lux-code-built-in:   230 192 123;
+  --lux-code-meta:       97 174 238;
+  --lux-code-section:    224 108 117;
+  --lux-code-bullet:     97 174 238;
+  --lux-code-operator:   171 178 191;
+  --lux-code-punctuation: 171 178 191;
+  --lux-code-type:       209 154 102;
+  --lux-code-name:       224 108 117;
+  --lux-code-addition:   152 195 121;
+  --lux-code-deletion:   224 108 117;
+  --lux-code-emphasis:   171 178 191;
+  --lux-code-strong:     171 178 191;
+
+  color-scheme: dark;
+}

package/src/themes/light.css

@@ -0,0 +1,128 @@
+/**
+ * Lux Light Theme
+ * Import this file to apply the light theme:
+ *   import '@ahriknow/lux/themes/light.css';
+ */
+:root {
+  /* ── Primary ── */
+  --lux-primary-50:  238 242 255;
+  --lux-primary-100: 219 228 255;
+  --lux-primary-200: 186 200 255;
+  --lux-primary-300: 147 165 255;
+  --lux-primary-400: 108 92 231;
+  --lux-primary-500: 99 91 218;
+  --lux-primary-600: 82 73 195;
+  --lux-primary-700: 67 58 168;
+  --lux-primary-800: 52 45 136;
+  --lux-primary-900: 35 30 100;
+
+  /* ── Semantic ── */
+  --lux-success: 34 197 94;
+  --lux-warning: 245 158 11;
+  --lux-error:   239 68 68;
+  --lux-info:    59 130 246;
+
+  --lux-success-light: 220 252 231;
+  --lux-warning-light: 254 243 199;
+  --lux-error-light:   254 226 226;
+  --lux-info-light:    219 234 254;
+
+  /* ── Background ── */
+  --lux-bg:        248 250 252;
+  --lux-bg-alt:    241 245 249;
+  --lux-surface:   255 255 255;
+  --lux-card:      255 255 255;
+  --lux-overlay:   0 0 0 / 40%;
+
+  /* ── Nav ── */
+  --lux-nav-bg:    rgba(255, 255, 255, 0.88);
+
+  /* ── Text ── */
+  --lux-text:       15 23 42;
+  --lux-text-secondary: 51 65 85;
+  --lux-text-muted: 100 116 139;
+
+  /* ── Scrollbar ── */
+  --lux-scrollbar:  180 196 214;
+
+  /* ── Border ── */
+  --lux-border:       226 232 240;
+  --lux-border-hover: 203 213 225;
+  --lux-border-focus: 99 91 218;
+
+  /* ── Interactive ── */
+  --lux-hover:   0 0 0 / 5%;
+  --lux-active:  0 0 0 / 8%;
+  --lux-focus:   0 0 0 / 30%;
+  --lux-disabled: 248 250 252;
+
+  /* ── Shadow ── */
+  --lux-shadow-sm:  0 1px 2px 0 rgb(0 0 0 / 5%);
+  --lux-shadow:     0 1px 3px 0 rgb(0 0 0 / 10%), 0 1px 2px -1px rgb(0 0 0 / 10%);
+  --lux-shadow-md:  0 4px 6px -1px rgb(0 0 0 / 10%), 0 2px 4px -2px rgb(0 0 0 / 10%);
+  --lux-shadow-lg:  0 10px 15px -3px rgb(0 0 0 / 10%), 0 4px 6px -4px rgb(0 0 0 / 10%);
+
+  /* ── Radius ── */
+  --lux-radius-sm:   4px;
+  --lux-radius:      6px;
+  --lux-radius-md:   8px;
+  --lux-radius-lg:   12px;
+  --lux-radius-xl:   16px;
+  --lux-radius-full: 9999px;
+
+  /* ── Typography ── */
+  --lux-font-sans:  -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
+  --lux-font-mono:  'SF Mono', 'Fira Code', 'Cascadia Code', Consolas, monospace;
+  --lux-font-xs:    0.75rem;
+  --lux-font-sm:    0.875rem;
+  --lux-font-base:  1rem;
+  --lux-font-lg:    1.125rem;
+  --lux-font-xl:    1.25rem;
+  --lux-font-2xl:   1.5rem;
+  --lux-font-3xl:   1.875rem;
+
+  /* ── Spacing ── */
+  --lux-space-1:  0.25rem;
+  --lux-space-2:  0.5rem;
+  --lux-space-3:  0.75rem;
+  --lux-space-4:  1rem;
+  --lux-space-5:  1.25rem;
+  --lux-space-6:  1.5rem;
+  --lux-space-8:  2rem;
+  --lux-space-10: 2.5rem;
+  --lux-space-12: 3rem;
+
+  /* ── Transition ── */
+  --lux-transition:   150ms ease;
+  --lux-transition-slow: 300ms ease;
+
+  /* ── Code ── */
+  --lux-code-bg:         250 250 250;
+  --lux-code-header:     241 245 249;
+  --lux-code-border:     226 232 240;
+  --lux-code-text:       56 58 66;
+  --lux-code-keyword:    166 38 164;
+  --lux-code-string:     80 161 79;
+  --lux-code-number:     152 104 1;
+  --lux-code-comment:    160 161 167;
+  --lux-code-function:   64 120 242;
+  --lux-code-class:      193 132 1;
+  --lux-code-variable:   228 86 73;
+  --lux-code-tag:        228 86 73;
+  --lux-code-attr:       152 104 1;
+  --lux-code-selector:   80 161 79;
+  --lux-code-literal:    1 132 188;
+  --lux-code-symbol:     64 120 242;
+  --lux-code-built-in:   193 132 1;
+  --lux-code-meta:       64 120 242;
+  --lux-code-section:    228 86 73;
+  --lux-code-bullet:     64 120 242;
+  --lux-code-operator:   56 58 66;
+  --lux-code-punctuation: 56 58 66;
+  --lux-code-type:       152 104 1;
+  --lux-code-name:       228 86 73;
+  --lux-code-addition:   80 161 79;
+  --lux-code-deletion:   228 86 73;
+  --lux-code-emphasis:   56 58 66;
+  --lux-code-strong:     56 58 66;
+}