@miozu/jera 0.0.2 → 0.3.0

package/src/tokens/colors.css

@@ -0,0 +1,189 @@
+/**
+ * Miozu Color System
+ *
+ * A Base16-inspired palette designed using Newton's color wheel
+ * for visual harmony and reduced eye strain.
+ *
+ * Documentation: https://miozu.com/colors
+ * Source: https://github.com/miozu-com
+ * Author: Nicholas Glazer <glazer.nicholas@gmail.com>
+ *
+ * USAGE:
+ * @import '@miozu/jera/tokens/colors.css';
+ *
+ * Or with Tailwind 4:
+ * @import '@miozu/jera/tokens/colors.css' theme(static);
+ */
+
+:root {
+  /* ========================================
+   * BASE COLORS (Grayscale Spectrum)
+   * From darkest (base0) to lightest (base7)
+   * ======================================== */
+
+  --base0: #232733;  /* Darkest background */
+  --base1: #2C3040;  /* Default dark background */
+  --base2: #3E4359;  /* Selection, highlights */
+  --base3: #565E78;  /* Comments, subtle text */
+  --base4: #737E99;  /* Muted foreground */
+  --base5: #D0D2DB;  /* Default foreground */
+  --base6: #F3F4F7;  /* Light foreground */
+  --base7: #FAFBFD;  /* Lightest/white */
+
+  /* ========================================
+   * ACCENT COLORS (Base16 Extended Palette)
+   * Official miozu palette from @miozu/js-theme
+   * ======================================== */
+
+  --base8:  #EB3137;  /* Red - errors, destructive */
+  --base9:  #FF9837;  /* Orange - numbers, attention */
+  --base10: #6DD672;  /* Green - success, positive */
+  --base11: #E8D176;  /* Yellow - warnings, highlights */
+  --base12: #83D2FC;  /* Blue - info, links */
+  --base13: #C974E6;  /* Magenta - primary brand, functions */
+  --base14: #FF9982;  /* Peach - keywords, warm accent */
+  --base15: #40FFE2;  /* Cyan - methods, cool accent */
+
+  /* Named color aliases */
+  --red:     var(--base8);
+  --orange:  var(--base9);
+  --green:   var(--base10);
+  --yellow:  var(--base11);
+  --blue:    var(--base12);
+  --magenta: var(--base13);
+  --peach:   var(--base14);
+  --cyan:    var(--base15);
+
+  /* ========================================
+   * SEMANTIC MAPPINGS (Dark Theme Default)
+   * Use these in components for consistency
+   * ======================================== */
+
+  /* Backgrounds */
+  --color-bg: var(--base0);
+  --color-surface: var(--base1);
+  --color-surface-alt: var(--base2);
+  --color-hover: var(--base2);
+  --color-surface-hover: var(--base2);
+
+  /* Foregrounds */
+  --color-text: var(--base5);
+  --color-text-strong: var(--base7);
+  --color-text-muted: var(--base4);
+  --color-text-subtle: var(--base3);
+
+  /* Borders */
+  --color-border: var(--base3);
+  --color-border-muted: var(--base2);
+
+  /* Brand */
+  --color-primary: var(--magenta);    /* base13 - #C974E6 */
+  --color-secondary: var(--blue);     /* base12 - #83D2FC */
+  --color-accent: var(--cyan);        /* base15 - #40FFE2 */
+
+  /* States */
+  --color-success: var(--green);      /* base10 - #6DD672 */
+  --color-warning: var(--yellow);     /* base11 - #E8D176 */
+  --color-error: var(--red);          /* base8  - #EB3137 */
+  --color-info: var(--blue);          /* base12 - #83D2FC */
+
+  /* ========================================
+   * BASE COLOR ALIASES
+   * For direct base color access in components
+   * ======================================== */
+
+  /* Grayscale (base0-7) */
+  --color-base0: var(--base0);
+  --color-base1: var(--base1);
+  --color-base2: var(--base2);
+  --color-base3: var(--base3);
+  --color-base4: var(--base4);
+  --color-base5: var(--base5);
+  --color-base6: var(--base6);
+  --color-base7: var(--base7);
+
+  /* Accents (base8-15) */
+  --color-base8: var(--base8);
+  --color-base9: var(--base9);
+  --color-base10: var(--base10);
+  --color-base11: var(--base11);
+  --color-base12: var(--base12);
+  --color-base13: var(--base13);
+  --color-base14: var(--base14);
+  --color-base15: var(--base15);
+}
+
+/* ========================================
+ * LIGHT THEME
+ * Inverted grayscale, same accents
+ *
+ * Supports multiple selectors for flexibility:
+ * - data-theme="light" (generic)
+ * - data-theme="miozu-light" (Selify/Miozu apps)
+ * - .light (class-based)
+ * ======================================== */
+
+[data-theme="light"],
+[data-theme="miozu-light"],
+.light {
+  /* Inverted base colors */
+  --color-bg: var(--base7);
+  --color-surface: var(--base6);
+  --color-surface-alt: var(--base5);
+  --color-hover: var(--base5);
+  --color-surface-hover: var(--base5);
+
+  /* Inverted foregrounds */
+  --color-text: var(--base2);
+  --color-text-strong: var(--base0);
+  --color-text-muted: var(--base3);
+  --color-text-subtle: var(--base4);
+
+  /* Inverted borders */
+  --color-border: var(--base4);
+  --color-border-muted: var(--base5);
+}
+
+/* ========================================
+ * DARK THEME (Explicit)
+ * Same as :root default, for explicit dark mode
+ *
+ * Supports multiple selectors:
+ * - data-theme="dark" (generic)
+ * - data-theme="miozu-dark" (Selify/Miozu apps)
+ * - .dark (class-based)
+ * ======================================== */
+
+[data-theme="dark"],
+[data-theme="miozu-dark"],
+.dark {
+  --color-bg: var(--base0);
+  --color-surface: var(--base1);
+  --color-surface-alt: var(--base2);
+  --color-hover: var(--base2);
+  --color-surface-hover: var(--base2);
+
+  --color-text: var(--base5);
+  --color-text-strong: var(--base7);
+  --color-text-muted: var(--base4);
+  --color-text-subtle: var(--base3);
+
+  --color-border: var(--base3);
+  --color-border-muted: var(--base2);
+}
+
+/* ========================================
+ * HIGH CONTRAST THEME
+ * For accessibility
+ * ======================================== */
+
+[data-theme="high-contrast"] {
+  --color-bg: #000000;
+  --color-surface: #0a0a0a;
+  --color-surface-alt: #1a1a1a;
+  --color-text: var(--base7);
+  --color-text-strong: #FFFFFF;
+  --color-text-muted: var(--base5);
+  --color-border: var(--base5);
+  --color-border-muted: var(--base4);
+}

package/src/tokens/effects.css

@@ -0,0 +1,128 @@
+/**
+ * Miozu Effects System
+ *
+ * Shadows, borders, radius, and transitions.
+ * Consistent visual language for depth and motion.
+ */
+
+:root {
+  /* ========================================
+   * BORDER WIDTHS
+   * ======================================== */
+
+  --border-width-thin: 1px;
+  --border-width-default: 1px;
+  --border-width-thick: 2px;
+
+  /* ========================================
+   * FOCUS RING
+   * ======================================== */
+
+  --focus-ring-width: 2px;
+  --focus-ring-offset: 2px;
+  --focus-ring-color: var(--color-primary);
+  --focus-ring: var(--focus-ring-width) solid var(--focus-ring-color);
+
+  /* ========================================
+   * BORDER RADIUS
+   * ======================================== */
+
+  --radius-none: 0;
+  --radius-sm: 0.125rem;   /* 2px */
+  --radius-default: 0.25rem; /* 4px */
+  --radius-md: 0.375rem;   /* 6px */
+  --radius-lg: 0.5rem;     /* 8px */
+  --radius-xl: 0.75rem;    /* 12px */
+  --radius-2xl: 1rem;      /* 16px */
+  --radius-3xl: 1.5rem;    /* 24px */
+  --radius-full: 9999px;   /* Pill shape */
+
+  /* ========================================
+   * BOX SHADOWS (Dark theme optimized)
+   * ======================================== */
+
+  --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-default: 0 4px 6px -1px rgb(0 0 0 / 0.1),
+                    0 2px 4px -2px 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);
+
+  --shadow-none: 0 0 #0000;
+
+  /* Colored shadows for states */
+  --shadow-primary: 0 4px 14px 0 rgb(201 116 230 / 0.25);
+  --shadow-error: 0 4px 14px 0 rgb(235 49 55 / 0.25);
+  --shadow-success: 0 4px 14px 0 rgb(109 214 114 / 0.25);
+
+  /* ========================================
+   * TRANSITIONS
+   * ======================================== */
+
+  /* Durations */
+  --duration-75: 75ms;
+  --duration-100: 100ms;
+  --duration-150: 150ms;
+  --duration-200: 200ms;
+  --duration-300: 300ms;
+  --duration-500: 500ms;
+  --duration-700: 700ms;
+  --duration-1000: 1000ms;
+
+  /* Semantic durations */
+  --duration-fast: var(--duration-150);
+  --duration-base: var(--duration-200);
+  --duration-slow: var(--duration-300);
+
+  /* Easings */
+  --ease-linear: linear;
+  --ease-in: cubic-bezier(0.4, 0, 1, 1);
+  --ease-out: cubic-bezier(0, 0, 0.2, 1);
+  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
+  --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
+  --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
+
+  /* Semantic easings */
+  --ease-default: var(--ease-out);
+
+  /* Common transitions */
+  --transition-colors: color var(--duration-fast) var(--ease-default),
+                       background-color var(--duration-fast) var(--ease-default),
+                       border-color var(--duration-fast) var(--ease-default);
+
+  --transition-opacity: opacity var(--duration-fast) var(--ease-default);
+
+  --transition-transform: transform var(--duration-base) var(--ease-default);
+
+  --transition-all: all var(--duration-base) var(--ease-default);
+
+  /* ========================================
+   * Z-INDEX SCALE
+   * ======================================== */
+
+  --z-behind: -1;
+  --z-default: 0;
+  --z-dropdown: 10;
+  --z-sticky: 20;
+  --z-fixed: 30;
+  --z-modal-backdrop: 40;
+  --z-modal: 50;
+  --z-popover: 60;
+  --z-tooltip: 70;
+  --z-toast: 80;
+  --z-max: 9999;
+}

package/src/tokens/index.css

@@ -0,0 +1,81 @@
+/**
+ * Miozu Design Tokens
+ *
+ * A complete design token system for building consistent interfaces.
+ * Works standalone or with Tailwind CSS.
+ *
+ * @package @miozu/jera
+ * @author Nicholas Glazer <glazer.nicholas@gmail.com>
+ * @license MIT
+ *
+ * USAGE:
+ *
+ * 1. Import all tokens:
+ *    @import '@miozu/jera/tokens';
+ *
+ * 2. Import individual token sets:
+ *    @import '@miozu/jera/tokens/colors.css';
+ *    @import '@miozu/jera/tokens/spacing.css';
+ *
+ * 3. With Tailwind 4:
+ *    @import '@miozu/jera/tokens' theme(static);
+ *
+ * THEMING:
+ *
+ * Dark (default):
+ *   <html data-theme="dark">
+ *
+ * Light:
+ *   <html data-theme="light">
+ *
+ * System preference (JS):
+ *   const theme = matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+ *   document.documentElement.setAttribute('data-theme', theme);
+ */
+
+@import './colors.css';
+@import './spacing.css';
+@import './typography.css';
+@import './effects.css';
+
+/* ========================================
+ * BASE STYLES (Optional)
+ * Reset and sensible defaults
+ * ======================================== */
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+html {
+  font-family: var(--font-sans);
+  font-size: 16px;
+  line-height: var(--leading-normal);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+body {
+  margin: 0;
+  background-color: var(--color-bg);
+  color: var(--color-text);
+}
+
+/* Focus visible for accessibility */
+:focus-visible {
+  outline: 2px solid var(--color-primary);
+  outline-offset: 2px;
+}
+
+/* Remove default focus for mouse users */
+:focus:not(:focus-visible) {
+  outline: none;
+}
+
+/* Selection color */
+::selection {
+  background-color: var(--color-primary);
+  color: var(--base7);
+}

package/src/tokens/spacing.css

@@ -0,0 +1,49 @@
+/**
+ * Miozu Spacing System
+ *
+ * Based on 4px base unit with geometric progression.
+ * Consistent spacing creates visual rhythm.
+ *
+ * USAGE:
+ * padding: var(--space-4);  // 16px
+ * gap: var(--space-3);      // 12px
+ */
+
+:root {
+  /* Base unit: 4px */
+  --space-px: 1px;
+  --space-0: 0;
+  --space-0-5: 2px;   /* 0.5 * 4 */
+  --space-1: 4px;     /* 1 * 4 */
+  --space-1-5: 6px;   /* 1.5 * 4 */
+  --space-2: 8px;     /* 2 * 4 */
+  --space-2-5: 10px;  /* 2.5 * 4 */
+  --space-3: 12px;    /* 3 * 4 */
+  --space-3-5: 14px;  /* 3.5 * 4 */
+  --space-4: 16px;    /* 4 * 4 */
+  --space-5: 20px;    /* 5 * 4 */
+  --space-6: 24px;    /* 6 * 4 */
+  --space-7: 28px;    /* 7 * 4 */
+  --space-8: 32px;    /* 8 * 4 */
+  --space-9: 36px;    /* 9 * 4 */
+  --space-10: 40px;   /* 10 * 4 */
+  --space-11: 44px;   /* 11 * 4 */
+  --space-12: 48px;   /* 12 * 4 */
+  --space-14: 56px;   /* 14 * 4 */
+  --space-16: 64px;   /* 16 * 4 */
+  --space-20: 80px;   /* 20 * 4 */
+  --space-24: 96px;   /* 24 * 4 */
+  --space-28: 112px;  /* 28 * 4 */
+  --space-32: 128px;  /* 32 * 4 */
+  --space-36: 144px;  /* 36 * 4 */
+  --space-40: 160px;  /* 40 * 4 */
+  --space-44: 176px;  /* 44 * 4 */
+  --space-48: 192px;  /* 48 * 4 */
+  --space-52: 208px;  /* 52 * 4 */
+  --space-56: 224px;  /* 56 * 4 */
+  --space-60: 240px;  /* 60 * 4 */
+  --space-64: 256px;  /* 64 * 4 */
+  --space-72: 288px;  /* 72 * 4 */
+  --space-80: 320px;  /* 80 * 4 */
+  --space-96: 384px;  /* 96 * 4 */
+}

package/src/tokens/typography.css

@@ -0,0 +1,79 @@
+/**
+ * Miozu Typography System
+ *
+ * Font scales using minor third ratio (1.2).
+ * Optimized for readability on screens.
+ *
+ * USAGE:
+ * font-size: var(--text-base);
+ * font-family: var(--font-sans);
+ */
+
+:root {
+  /* ========================================
+   * FONT FAMILIES
+   * ======================================== */
+
+  --font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
+    "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif,
+    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+
+  --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
+
+  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
+    "Liberation Mono", "Courier New", monospace;
+
+  /* ========================================
+   * FONT SIZES (Minor Third Scale - 1.2)
+   * ======================================== */
+
+  --text-xs: 0.75rem;     /* 12px */
+  --text-sm: 0.875rem;    /* 14px */
+  --text-base: 1rem;      /* 16px */
+  --text-lg: 1.125rem;    /* 18px */
+  --text-xl: 1.25rem;     /* 20px */
+  --text-2xl: 1.5rem;     /* 24px */
+  --text-3xl: 1.875rem;   /* 30px */
+  --text-4xl: 2.25rem;    /* 36px */
+  --text-5xl: 3rem;       /* 48px */
+  --text-6xl: 3.75rem;    /* 60px */
+  --text-7xl: 4.5rem;     /* 72px */
+  --text-8xl: 6rem;       /* 96px */
+  --text-9xl: 8rem;       /* 128px */
+
+  /* ========================================
+   * 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-extralight: 200;
+  --font-light: 300;
+  --font-normal: 400;
+  --font-medium: 500;
+  --font-semibold: 600;
+  --font-bold: 700;
+  --font-extrabold: 800;
+  --font-black: 900;
+
+  /* ========================================
+   * LETTER SPACING
+   * ======================================== */
+
+  --tracking-tighter: -0.05em;
+  --tracking-tight: -0.025em;
+  --tracking-normal: 0em;
+  --tracking-wide: 0.025em;
+  --tracking-wider: 0.05em;
+  --tracking-widest: 0.1em;
+}

package/src/utils/cn.svelte.js

@@ -0,0 +1,175 @@
+/**
+ * Reactive Class Composer (cn)
+ *
+ * Advanced Svelte 5 pattern for composing classes reactively.
+ * Uses $derived internally for fine-grained reactivity.
+ *
+ * @example
+ * // Basic usage
+ * const classes = cn('base', condition && 'conditional', ['array', 'of', 'classes']);
+ *
+ * // With variants
+ * const button = cv({
+ *   base: 'inline-flex items-center justify-center',
+ *   variants: {
+ *     intent: {
+ *       primary: 'bg-primary text-white',
+ *       secondary: 'bg-surface text-text',
+ *     },
+ *     size: {
+ *       sm: 'h-8 px-3 text-sm',
+ *       md: 'h-10 px-4 text-base',
+ *       lg: 'h-12 px-6 text-lg',
+ *     }
+ *   },
+ *   defaults: { intent: 'primary', size: 'md' }
+ * });
+ *
+ * // Use in component
+ * <button class={button({ intent: 'secondary', size: 'lg' })}>Click</button>
+ */
+
+/**
+ * Concatenate class names, filtering out falsy values
+ * @param {...(string|boolean|null|undefined|string[])} args
+ * @returns {string}
+ */
+export function cn(...args) {
+  return args
+    .flat(Infinity)
+    .filter(Boolean)
+    .join(' ')
+    .replace(/\s+/g, ' ')
+    .trim();
+}
+
+/**
+ * Create a reactive class string using $derived
+ * Returns a getter that recomputes when dependencies change
+ *
+ * @param {() => (string|boolean|null|undefined|string[])[]} classFactory
+ * @returns {string} Reactive class string (use as class={rcn(() => [...])})
+ *
+ * @example
+ * let isActive = $state(false);
+ * let size = $state('md');
+ *
+ * // This recomputes automatically when isActive or size changes
+ * const buttonClass = $derived(cn(
+ *   'base-button',
+ *   isActive && 'is-active',
+ *   `size-${size}`
+ * ));
+ */
+// Note: rcn is just cn - the reactivity comes from using it inside $derived
+export const rcn = cn;
+
+/**
+ * Class Variants (cv) - Type-safe variant composition
+ *
+ * Creates a function that generates class strings based on variant props.
+ * Inspired by CVA but optimized for Svelte 5 patterns.
+ *
+ * @template {Record<string, Record<string, string>>} V
+ * @template {Partial<{[K in keyof V]: keyof V[K]}>} D
+ *
+ * @param {{
+ *   base?: string | string[],
+ *   variants?: V,
+ *   compounds?: Array<{condition: Partial<{[K in keyof V]: keyof V[K]}>, class: string}>,
+ *   defaults?: D
+ * }} config
+ *
+ * @returns {(props?: Partial<{[K in keyof V]: keyof V[K]}> & {class?: string}) => string}
+ */
+export function cv(config) {
+  const { base = '', variants = {}, compounds = [], defaults = {} } = config;
+
+  /**
+   * @param {Record<string, any>} [props]
+   * @returns {string}
+   */
+  return function (props = {}) {
+    // Start with base classes
+    /** @type {(string | string[])[]} */
+    const classes = [base];
+
+    // Apply variant classes
+    for (const [variantKey, variantOptions] of Object.entries(variants)) {
+      const selectedVariant = /** @type {string} */ (props[variantKey] ?? defaults[variantKey]);
+      const variantMap = /** @type {Record<string, string>} */ (variantOptions);
+      if (selectedVariant && variantMap[selectedVariant]) {
+        classes.push(variantMap[selectedVariant]);
+      }
+    }
+
+    // Apply compound variants (when multiple conditions match)
+    for (const compound of compounds) {
+      const { condition, class: compoundClass } = compound;
+      const conditionEntries = /** @type {[string, string][]} */ (Object.entries(condition));
+      const matches = conditionEntries.every(([key, value]) => {
+        const actualValue = /** @type {string} */ (props[key] ?? defaults[key]);
+        return actualValue === value;
+      });
+      if (matches) {
+        classes.push(compoundClass);
+      }
+    }
+
+    // Append any additional classes passed via props.class
+    if (props.class) {
+      classes.push(props.class);
+    }
+
+    return cn(...classes);
+  };
+}
+
+/**
+ * Create a reactive variant class using $derived
+ *
+ * @example
+ * const buttonVariants = cv({...});
+ *
+ * let intent = $state('primary');
+ * let size = $state('md');
+ *
+ * // Reactive: recomputes when intent or size changes
+ * const buttonClass = $derived(buttonVariants({ intent, size }));
+ */
+
+/**
+ * Slot class merger - combines component classes with user-provided classes
+ * Useful for compound components where parent passes classes to children
+ *
+ * @param {string} componentClass - The component's own classes
+ * @param {string} [userClass] - Classes provided by the user
+ * @returns {string}
+ */
+export function mergeClasses(componentClass, userClass) {
+  return cn(componentClass, userClass);
+}
+
+/**
+ * Conditional class helper - returns class only if condition is truthy
+ *
+ * @param {boolean} condition
+ * @param {string} trueClass
+ * @param {string} [falseClass]
+ * @returns {string}
+ */
+export function when(condition, trueClass, falseClass = '') {
+  return condition ? trueClass : falseClass;
+}
+
+/**
+ * Switch class helper - returns class based on value matching
+ *
+ * @param {string | number} value
+ * @param {Record<string, string>} cases
+ * @param {string} [fallback]
+ * @returns {string}
+ */
+export function match(value, cases, fallback = '') {
+  return cases[String(value)] ?? fallback;
+}