@ryanhelsing/ry-ui 1.0.13 → 1.0.15

package/dist/css/ry-tokens.css

@@ -1,10 +1,11 @@
 /**
  * ry-ui Design Tokens
  *
- * These CSS custom properties define the visual language.
- * color-scheme: light dark enables OS preference detection.
- * light-dark() embeds both values — no separate dark.css needed.
- * Override in your theme file to customize.
+ * CORE KNOBS → DERIVED TOKENS → COMPONENTS
+ *
+ * Themes only need to set the ~18 core knobs at the top.
+ * Everything else derives automatically via color-mix() and calc().
+ * Override any derived token for fine-tuning.
  */
 
 /* ═══════════════════════════════════════════════════════════════
@@ -32,90 +33,119 @@
   color-scheme: light dark;
 
   /* ═══════════════════════════════════════════════════════════════
-     COLORS
+     CORE KNOBS — set these to define a theme
      ═══════════════════════════════════════════════════════════════ */
 
-  /* Primary */
+  /* Palette: 3 roles */
   --ry-color-primary: light-dark(oklch(0.623 0.188 259.8), oklch(0.714 0.143 254.6));
-  --ry-color-primary-hover: light-dark(oklch(0.546 0.215 262.9), oklch(0.623 0.188 259.8));
-  --ry-color-primary-active: light-dark(oklch(0.488 0.217 264.4), oklch(0.546 0.215 262.9));
-
-  /* Secondary */
   --ry-color-secondary: light-dark(oklch(0.554 0.041 257.4), oklch(0.711 0.035 256.8));
-  --ry-color-secondary-hover: light-dark(oklch(0.446 0.037 257.3), oklch(0.869 0.02 252.9));
-  --ry-color-secondary-active: light-dark(oklch(0.372 0.039 257.3), oklch(0.929 0.013 255.6));
-
-  /* Accent */
   --ry-color-accent: light-dark(oklch(0.627 0.213 303.9), oklch(0.714 0.183 303.9));
-  --ry-color-accent-hover: light-dark(oklch(0.557 0.213 303.9), oklch(0.627 0.213 303.9));
-  --ry-color-accent-active: light-dark(oklch(0.497 0.213 303.9), oklch(0.557 0.213 303.9));
 
-  /* Semantic */
+  /* Surface */
+  --ry-color-bg: light-dark(oklch(1 0 0), oklch(0.208 0.04 265.8));
+  --ry-color-text: light-dark(oklch(0.279 0.037 260), oklch(0.968 0.007 248.1));
+
+  /* Semantic (overrideable, but defaults are universal) */
   --ry-color-success: oklch(0.723 0.192 149.6);
   --ry-color-warning: oklch(0.769 0.165 70.1);
   --ry-color-danger: oklch(0.637 0.208 25.3);
-  --ry-color-danger-hover: oklch(0.577 0.215 27.3);
   --ry-color-info: oklch(0.715 0.126 215.2);
 
-  /* Semantic backgrounds & text (for alerts, badges) */
-  --ry-color-info-bg: light-dark(oklch(0.984 0.019 201.1), oklch(0.398 0.066 227.4));
-  --ry-color-info-text: light-dark(oklch(0.52 0.094 223.1), oklch(0.917 0.077 205.1));
-  --ry-color-success-bg: light-dark(oklch(0.982 0.018 156.1), oklch(0.393 0.09 152.6));
-  --ry-color-success-text: light-dark(oklch(0.527 0.137 150.1), oklch(0.925 0.081 156.1));
-  --ry-color-warning-bg: light-dark(oklch(0.987 0.021 95.3), oklch(0.414 0.105 45.9));
-  --ry-color-warning-text: light-dark(oklch(0.555 0.145 49), oklch(0.962 0.058 95.6));
-  --ry-color-danger-bg: light-dark(oklch(0.971 0.013 17), oklch(0.396 0.133 25.7));
-  --ry-color-danger-text: light-dark(oklch(0.505 0.19 27.5), oklch(0.885 0.059 18.3));
-
-  /* Text */
-  --ry-color-text: light-dark(oklch(0.279 0.037 260), oklch(0.968 0.007 248.1));
-  --ry-color-text-muted: light-dark(oklch(0.554 0.041 257.4), oklch(0.711 0.035 256.8));
-  --ry-color-text-inverse: light-dark(oklch(1 0 0), oklch(0.208 0.04 265.8));
+  /* Type: 2 fonts */
+  --ry-font-primary: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  --ry-font-secondary: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
 
-  /* Background */
-  --ry-color-bg: light-dark(oklch(1 0 0), oklch(0.208 0.04 265.8));
-  --ry-color-bg-subtle: light-dark(oklch(0.984 0.003 248.2), oklch(0.279 0.037 260));
-  --ry-color-bg-muted: light-dark(oklch(0.968 0.007 248.1), oklch(0.372 0.039 257.3));
+  /* Shape */
+  --ry-radius-base: 0.375rem;
+  --ry-border-width: 1px;
+  --ry-outline-width: 0px;
+
+  /* Depth */
+  --ry-shadow-color: light-dark(oklch(0 0 0 / 0.1), oklch(0 0 0 / 0.4));
+  --ry-shadow-strength: 1;
+  --ry-shadow-spread: 1;
+
+  /* Surface treatment */
+  --ry-panel-opacity: 1;
+  --ry-panel-blur: 0px;
 
-  /* Border */
-  --ry-color-border: light-dark(oklch(0.929 0.013 255.6), oklch(0.372 0.039 257.3));
-  --ry-color-border-strong: light-dark(oklch(0.869 0.02 252.9), oklch(0.446 0.037 257.3));
+  /* Motion */
+  --ry-animation-style: smooth; /* none | smooth | bouncy */
+  --ry-duration-scale: 1;
+
+  /* Density */
+  --ry-space-scale: 1;
+
+  /* ═══════════════════════════════════════════════════════════════
+     DERIVED: COLORS — auto-generated from core palette
+     ═══════════════════════════════════════════════════════════════ */
+
+  /* Hover/active states via color-mix */
+  --ry-color-primary-hover: color-mix(in oklch, var(--ry-color-primary) 80%, var(--ry-color-text));
+  --ry-color-primary-active: color-mix(in oklch, var(--ry-color-primary) 65%, var(--ry-color-text));
+  --ry-color-secondary-hover: color-mix(in oklch, var(--ry-color-secondary) 80%, var(--ry-color-text));
+  --ry-color-secondary-active: color-mix(in oklch, var(--ry-color-secondary) 65%, var(--ry-color-text));
+  --ry-color-accent-hover: color-mix(in oklch, var(--ry-color-accent) 80%, var(--ry-color-text));
+  --ry-color-accent-active: color-mix(in oklch, var(--ry-color-accent) 65%, var(--ry-color-text));
+  --ry-color-danger-hover: color-mix(in oklch, var(--ry-color-danger) 80%, var(--ry-color-text));
+
+  /* Text variants */
+  --ry-color-text-muted: color-mix(in oklch, var(--ry-color-text) 55%, var(--ry-color-bg));
+  --ry-color-text-inverse: var(--ry-color-bg);
+
+  /* Background variants */
+  --ry-color-bg-subtle: color-mix(in oklch, var(--ry-color-bg) 96%, var(--ry-color-text));
+  --ry-color-bg-muted: color-mix(in oklch, var(--ry-color-bg) 92%, var(--ry-color-text));
+
+  /* Border variants */
+  --ry-color-border: color-mix(in oklch, var(--ry-color-bg) 82%, var(--ry-color-text));
+  --ry-color-border-strong: color-mix(in oklch, var(--ry-color-bg) 70%, var(--ry-color-text));
 
   /* Overlay */
-  --ry-color-overlay: light-dark(oklch(0 0 0 / 0.5), oklch(0 0 0 / 0.7));
+  --ry-color-overlay: color-mix(in oklch, var(--ry-color-text) 50%, transparent);
+  --ry-color-hover-overlay: color-mix(in oklch, var(--ry-color-text) 4%, transparent);
+
+  /* Semantic backgrounds & text — derived from base semantic colors */
+  --ry-color-info-bg: color-mix(in srgb, var(--ry-color-info) 12%, var(--ry-color-bg));
+  --ry-color-info-text: color-mix(in oklch, var(--ry-color-info) 70%, var(--ry-color-text));
+  --ry-color-success-bg: color-mix(in srgb, var(--ry-color-success) 12%, var(--ry-color-bg));
+  --ry-color-success-text: color-mix(in oklch, var(--ry-color-success) 70%, var(--ry-color-text));
+  --ry-color-warning-bg: color-mix(in srgb, var(--ry-color-warning) 12%, var(--ry-color-bg));
+  --ry-color-warning-text: color-mix(in oklch, var(--ry-color-warning) 70%, var(--ry-color-text));
+  --ry-color-danger-bg: color-mix(in srgb, var(--ry-color-danger) 12%, var(--ry-color-bg));
+  --ry-color-danger-text: color-mix(in oklch, var(--ry-color-danger) 70%, var(--ry-color-text));
 
   /* ═══════════════════════════════════════════════════════════════
-     CODE SYNTAX
+     DERIVED: CODE SYNTAX — from palette, auto-adapts to any theme
      ═══════════════════════════════════════════════════════════════ */
 
-  --ry-code-bg: light-dark(oklch(0.978 0.003 248.2), oklch(0.208 0.04 265.8));
-  --ry-code-header-bg: light-dark(oklch(0.947 0.007 248.1), oklch(0.279 0.037 260));
-  --ry-code-text-color: light-dark(oklch(0.279 0.013 253.1), oklch(0.968 0.007 248.1));
-  --ry-code-title-color: light-dark(oklch(0.485 0.02 251.1), oklch(0.711 0.035 256.8));
-  --ry-code-icon-color: light-dark(oklch(0.666 0.018 251), oklch(0.554 0.041 257.4));
-  --ry-code-icon-hover-bg: light-dark(oklch(0.876 0.012 248.1), oklch(0.372 0.039 257.3));
-  --ry-code-icon-hover-color: light-dark(oklch(0.279 0.013 253.1), oklch(0.968 0.007 248.1));
-  --ry-code-line-number-color: light-dark(oklch(0.666 0.018 251 / 0.6), oklch(0.446 0.037 257.3 / 0.6));
-  --ry-code-line-border-color: light-dark(oklch(0.876 0.012 248.1), oklch(0.372 0.039 257.3));
-  --ry-code-color-preview-border: light-dark(oklch(0.279 0.013 253.1 / 0.3), oklch(0.968 0.007 248.1 / 0.3));
-  --ry-code-keyword: light-dark(oklch(0.552 0.205 24.5), oklch(0.637 0.208 25.3));
-  --ry-code-property: light-dark(oklch(0.451 0.164 258.2), oklch(0.714 0.143 254.6));
-  --ry-code-value: light-dark(oklch(0.321 0.108 259.1), oklch(0.769 0.165 70.1));
-  --ry-code-string: light-dark(oklch(0.321 0.108 259.1), oklch(0.723 0.192 149.6));
-  --ry-code-number: light-dark(oklch(0.451 0.164 258.2), oklch(0.769 0.165 70.1));
-  --ry-code-comment: light-dark(oklch(0.565 0.019 251), oklch(0.711 0.035 256.8));
-  --ry-code-selector: light-dark(oklch(0.439 0.118 148.1), oklch(0.715 0.126 215.2));
-  --ry-code-punctuation: light-dark(oklch(0.279 0.013 253.1), oklch(0.711 0.035 256.8));
-  --ry-code-tag: light-dark(oklch(0.439 0.118 148.1), oklch(0.715 0.126 215.2));
-  --ry-code-attribute: light-dark(oklch(0.451 0.164 258.2), oklch(0.714 0.143 254.6));
+  --ry-code-bg: var(--ry-color-bg-subtle);
+  --ry-code-header-bg: var(--ry-color-bg-muted);
+  --ry-code-text-color: var(--ry-color-text);
+  --ry-code-title-color: var(--ry-color-text-muted);
+  --ry-code-icon-color: var(--ry-color-text-muted);
+  --ry-code-icon-hover-bg: var(--ry-color-bg-muted);
+  --ry-code-icon-hover-color: var(--ry-color-text);
+  --ry-code-line-number-color: var(--ry-color-secondary);
+  --ry-code-line-border-color: var(--ry-color-border);
+  --ry-code-color-preview-border: var(--ry-color-border);
+  --ry-code-keyword: var(--ry-color-danger);
+  --ry-code-property: var(--ry-color-primary);
+  --ry-code-value: var(--ry-color-accent);
+  --ry-code-string: var(--ry-color-success);
+  --ry-code-number: var(--ry-color-warning);
+  --ry-code-comment: var(--ry-color-text-muted);
+  --ry-code-selector: var(--ry-color-info);
+  --ry-code-punctuation: var(--ry-color-text-muted);
+  --ry-code-tag: var(--ry-color-info);
+  --ry-code-attribute: var(--ry-color-primary);
 
   /* ═══════════════════════════════════════════════════════════════
-     TYPOGRAPHY
+     DERIVED: TYPOGRAPHY — from core font knobs
      ═══════════════════════════════════════════════════════════════ */
 
-  /* Font families */
-  --ry-font-sans: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-  --ry-font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
+  --ry-font-sans: var(--ry-font-primary);
+  --ry-font-mono: var(--ry-font-secondary);
 
   /* Font sizes */
   --ry-text-xs: 0.75rem;
@@ -139,61 +169,96 @@
   --ry-leading-relaxed: 1.75;
 
   /* ═══════════════════════════════════════════════════════════════
-     SPACING
+     DERIVED: SPACING — scaled from base
      ═══════════════════════════════════════════════════════════════ */
 
   --ry-space-0: 0;
-  --ry-space-1: 0.25rem;
-  --ry-space-2: 0.5rem;
-  --ry-space-3: 0.75rem;
-  --ry-space-4: 1rem;
-  --ry-space-5: 1.25rem;
-  --ry-space-6: 1.5rem;
-  --ry-space-8: 2rem;
-  --ry-space-10: 2.5rem;
-  --ry-space-12: 3rem;
-  --ry-space-16: 4rem;
-  --ry-space-20: 5rem;
+  --ry-space-1: calc(0.25rem * var(--ry-space-scale));
+  --ry-space-2: calc(0.5rem * var(--ry-space-scale));
+  --ry-space-3: calc(0.75rem * var(--ry-space-scale));
+  --ry-space-4: calc(1rem * var(--ry-space-scale));
+  --ry-space-5: calc(1.25rem * var(--ry-space-scale));
+  --ry-space-6: calc(1.5rem * var(--ry-space-scale));
+  --ry-space-8: calc(2rem * var(--ry-space-scale));
+  --ry-space-10: calc(2.5rem * var(--ry-space-scale));
+  --ry-space-12: calc(3rem * var(--ry-space-scale));
+  --ry-space-16: calc(4rem * var(--ry-space-scale));
+  --ry-space-20: calc(5rem * var(--ry-space-scale));
 
   /* ═══════════════════════════════════════════════════════════════
-     BORDERS & RADIUS
+     DERIVED: BORDERS & RADIUS — scaled from base
      ═══════════════════════════════════════════════════════════════ */
 
   --ry-radius-none: 0;
-  --ry-radius-sm: 0.25rem;
-  --ry-radius-md: 0.375rem;
-  --ry-radius-lg: 0.5rem;
-  --ry-radius-xl: 0.75rem;
-  --ry-radius-2xl: 1rem;
+  --ry-radius-sm: calc(var(--ry-radius-base) * 0.66);
+  --ry-radius-md: var(--ry-radius-base);
+  --ry-radius-lg: calc(var(--ry-radius-base) * 1.33);
+  --ry-radius-xl: calc(var(--ry-radius-base) * 2);
+  --ry-radius-2xl: calc(var(--ry-radius-base) * 2.66);
   --ry-radius-full: 9999px;
 
-  --ry-border-width: 1px;
-
   /* ═══════════════════════════════════════════════════════════════
-     SHADOWS
+     DERIVED: SHADOWS — scaled from strength + spread knobs
      ═══════════════════════════════════════════════════════════════ */
 
-  --ry-shadow-color: light-dark(oklch(0 0 0 / 0.1), oklch(0 0 0 / 0.4));
-  --ry-shadow-color-sm: light-dark(oklch(0 0 0 / 0.05), oklch(0 0 0 / 0.3));
-  --ry-shadow-sm: 0 1px 2px 0 var(--ry-shadow-color-sm);
-  --ry-shadow-md: 0 4px 6px -1px var(--ry-shadow-color), 0 2px 4px -2px var(--ry-shadow-color);
-  --ry-shadow-lg: 0 10px 15px -3px var(--ry-shadow-color), 0 4px 6px -4px var(--ry-shadow-color);
-  --ry-shadow-xl: 0 20px 25px -5px var(--ry-shadow-color), 0 8px 10px -6px var(--ry-shadow-color);
+  --ry-shadow-color-sm: color-mix(in oklch, var(--ry-shadow-color) calc(50% * var(--ry-shadow-strength)), transparent);
+  --ry-shadow-sm:
+    0
+    calc(1px * var(--ry-shadow-spread))
+    calc(2px * var(--ry-shadow-spread))
+    0
+    var(--ry-shadow-color-sm);
+  --ry-shadow-md:
+    0
+    calc(4px * var(--ry-shadow-spread))
+    calc(6px * var(--ry-shadow-spread))
+    calc(-1px * var(--ry-shadow-spread))
+    var(--ry-shadow-color),
+    0
+    calc(2px * var(--ry-shadow-spread))
+    calc(4px * var(--ry-shadow-spread))
+    calc(-2px * var(--ry-shadow-spread))
+    var(--ry-shadow-color);
+  --ry-shadow-lg:
+    0
+    calc(10px * var(--ry-shadow-spread))
+    calc(15px * var(--ry-shadow-spread))
+    calc(-3px * var(--ry-shadow-spread))
+    var(--ry-shadow-color),
+    0
+    calc(4px * var(--ry-shadow-spread))
+    calc(6px * var(--ry-shadow-spread))
+    calc(-4px * var(--ry-shadow-spread))
+    var(--ry-shadow-color);
+  --ry-shadow-xl:
+    0
+    calc(20px * var(--ry-shadow-spread))
+    calc(25px * var(--ry-shadow-spread))
+    calc(-5px * var(--ry-shadow-spread))
+    var(--ry-shadow-color),
+    0
+    calc(8px * var(--ry-shadow-spread))
+    calc(10px * var(--ry-shadow-spread))
+    calc(-6px * var(--ry-shadow-spread))
+    var(--ry-shadow-color);
 
   /* ═══════════════════════════════════════════════════════════════
-     TRANSITIONS
+     DERIVED: TRANSITIONS — scaled from duration-scale + animation style
      ═══════════════════════════════════════════════════════════════ */
 
-  --ry-duration-fast: 100ms;
-  --ry-duration-normal: 200ms;
-  --ry-duration-slow: 300ms;
+  --ry-duration-fast: calc(100ms * var(--ry-duration-scale));
+  --ry-duration-normal: calc(200ms * var(--ry-duration-scale));
+  --ry-duration-slow: calc(300ms * var(--ry-duration-scale));
 
   --ry-ease: cubic-bezier(0.4, 0, 0.2, 1);
   --ry-ease-in: cubic-bezier(0.4, 0, 1, 1);
   --ry-ease-out: cubic-bezier(0, 0, 0.2, 1);
+  --ry-ease-out-back: cubic-bezier(0.34, 1.85, 0.64, 1);
+  --ry-ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1);
+  --ry-ease-in-out-expo: cubic-bezier(1, 0, 0, 1);
 
   /* ═══════════════════════════════════════════════════════════════
-     Z-INDEX
+     Z-INDEX (not themeable — structural)
      ═══════════════════════════════════════════════════════════════ */
 
   --ry-z-dropdown: 1000;
@@ -206,13 +271,13 @@
   --ry-z-toast: 1080;
 
   /* ═══════════════════════════════════════════════════════════════
-     FOCUS
+     DERIVED: FOCUS — from primary
      ═══════════════════════════════════════════════════════════════ */
 
-  --ry-focus-ring: 0 0 0 3px light-dark(oklch(0.623 0.188 259.8 / 0.5), oklch(0.714 0.143 254.6 / 0.5));
+  --ry-focus-ring: 0 0 0 3px color-mix(in oklch, var(--ry-color-primary) 50%, transparent);
 }
 
-/* Force light or dark mode (legacy — theme used to conflate theme + mode) */
+/* Force light or dark mode */
 [data-ry-theme="light"] { color-scheme: light; }
 [data-ry-theme="dark"]  { color-scheme: dark; }