@ryanhelsing/ry-ui 1.0.2 → 1.0.4

package/dist/css/ry-tokens.css

@@ -2,46 +2,134 @@
  * 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.
  */
 
+/* ═══════════════════════════════════════════════════════════════
+   @property — typed custom properties for animation & type safety
+   ═══════════════════════════════════════════════════════════════ */
+
+@property --ry-color-primary { syntax: "<color>"; inherits: true; initial-value: oklch(0.623 0.188 259.8); }
+@property --ry-color-primary-hover { syntax: "<color>"; inherits: true; initial-value: oklch(0.546 0.215 262.9); }
+@property --ry-color-primary-active { syntax: "<color>"; inherits: true; initial-value: oklch(0.488 0.217 264.4); }
+@property --ry-color-secondary { syntax: "<color>"; inherits: true; initial-value: oklch(0.554 0.041 257.4); }
+@property --ry-color-secondary-hover { syntax: "<color>"; inherits: true; initial-value: oklch(0.446 0.037 257.3); }
+@property --ry-color-secondary-active { syntax: "<color>"; inherits: true; initial-value: oklch(0.372 0.039 257.3); }
+@property --ry-color-accent { syntax: "<color>"; inherits: true; initial-value: oklch(0.627 0.213 303.9); }
+@property --ry-color-accent-hover { syntax: "<color>"; inherits: true; initial-value: oklch(0.557 0.213 303.9); }
+@property --ry-color-accent-active { syntax: "<color>"; inherits: true; initial-value: oklch(0.497 0.213 303.9); }
+@property --ry-color-success { syntax: "<color>"; inherits: true; initial-value: oklch(0.723 0.192 149.6); }
+@property --ry-color-warning { syntax: "<color>"; inherits: true; initial-value: oklch(0.769 0.165 70.1); }
+@property --ry-color-danger { syntax: "<color>"; inherits: true; initial-value: oklch(0.637 0.208 25.3); }
+@property --ry-color-info { syntax: "<color>"; inherits: true; initial-value: oklch(0.715 0.126 215.2); }
+@property --ry-color-text { syntax: "<color>"; inherits: true; initial-value: oklch(0.279 0.037 260); }
+@property --ry-color-text-muted { syntax: "<color>"; inherits: true; initial-value: oklch(0.554 0.041 257.4); }
+@property --ry-color-text-inverse { syntax: "<color>"; inherits: true; initial-value: oklch(1 0 0); }
+@property --ry-color-bg { syntax: "<color>"; inherits: true; initial-value: oklch(1 0 0); }
+@property --ry-color-bg-subtle { syntax: "<color>"; inherits: true; initial-value: oklch(0.984 0.003 248.2); }
+@property --ry-color-bg-muted { syntax: "<color>"; inherits: true; initial-value: oklch(0.968 0.007 248.1); }
+@property --ry-color-border { syntax: "<color>"; inherits: true; initial-value: oklch(0.929 0.013 255.6); }
+@property --ry-color-border-strong { syntax: "<color>"; inherits: true; initial-value: oklch(0.869 0.02 252.9); }
+@property --ry-color-overlay { syntax: "<color>"; inherits: true; initial-value: oklch(0 0 0 / 0.5); }
+@property --ry-shadow-color { syntax: "<color>"; inherits: true; initial-value: oklch(0 0 0 / 0.1); }
+@property --ry-shadow-color-sm { syntax: "<color>"; inherits: true; initial-value: oklch(0 0 0 / 0.05); }
+
+@property --ry-duration-fast { syntax: "<time>"; inherits: true; initial-value: 100ms; }
+@property --ry-duration-normal { syntax: "<time>"; inherits: true; initial-value: 200ms; }
+@property --ry-duration-slow { syntax: "<time>"; inherits: true; initial-value: 300ms; }
+
+@property --ry-space-1 { syntax: "<length>"; inherits: true; initial-value: 0.25rem; }
+@property --ry-space-2 { syntax: "<length>"; inherits: true; initial-value: 0.5rem; }
+@property --ry-space-3 { syntax: "<length>"; inherits: true; initial-value: 0.75rem; }
+@property --ry-space-4 { syntax: "<length>"; inherits: true; initial-value: 1rem; }
+@property --ry-space-6 { syntax: "<length>"; inherits: true; initial-value: 1.5rem; }
+@property --ry-space-8 { syntax: "<length>"; inherits: true; initial-value: 2rem; }
+
+@layer ry-tokens, ry-structure, ry-theme;
+
+@layer ry-tokens {
 :root {
+  color-scheme: light dark;
+
   /* ═══════════════════════════════════════════════════════════════
      COLORS
      ═══════════════════════════════════════════════════════════════ */
 
   /* Primary */
-  --ry-color-primary: #3b82f6;
-  --ry-color-primary-hover: #2563eb;
-  --ry-color-primary-active: #1d4ed8;
+  --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: #64748b;
-  --ry-color-secondary-hover: #475569;
-  --ry-color-secondary-active: #334155;
+  --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 */
-  --ry-color-success: #22c55e;
-  --ry-color-warning: #f59e0b;
-  --ry-color-danger: #ef4444;
-  --ry-color-info: #06b6d4;
+  --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: #1e293b;
-  --ry-color-text-muted: #64748b;
-  --ry-color-text-inverse: #ffffff;
+  --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));
 
   /* Background */
-  --ry-color-bg: #ffffff;
-  --ry-color-bg-subtle: #f8fafc;
-  --ry-color-bg-muted: #f1f5f9;
+  --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));
 
   /* Border */
-  --ry-color-border: #e2e8f0;
-  --ry-color-border-strong: #cbd5e1;
+  --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));
 
   /* Overlay */
-  --ry-color-overlay: rgba(0, 0, 0, 0.5);
+  --ry-color-overlay: light-dark(oklch(0 0 0 / 0.5), oklch(0 0 0 / 0.7));
+
+  /* ═══════════════════════════════════════════════════════════════
+     CODE SYNTAX
+     ═══════════════════════════════════════════════════════════════ */
+
+  --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));
 
   /* ═══════════════════════════════════════════════════════════════
      TYPOGRAPHY
@@ -107,10 +195,12 @@
      SHADOWS
      ═══════════════════════════════════════════════════════════════ */
 
-  --ry-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
-  --ry-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
-  --ry-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
-  --ry-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
+  --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);
 
   /* ═══════════════════════════════════════════════════════════════
      TRANSITIONS
@@ -141,5 +231,11 @@
      FOCUS
      ═══════════════════════════════════════════════════════════════ */
 
-  --ry-focus-ring: 0 0 0 3px rgba(59, 130, 246, 0.5);
+  --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));
 }
+
+/* Force light or dark mode */
+[data-ry-theme="light"] { color-scheme: light; }
+[data-ry-theme="dark"]  { color-scheme: dark; }
+
+} /* @layer ry-tokens */