npm - @ryanhelsing/ry-ui - Versions diffs - 1.0.13 → 1.0.14 - Mend

@ryanhelsing/ry-ui 1.0.13 → 1.0.14

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (16) hide show

package/README.md +1 -0
package/dist/components/ry-heading.d.ts +19 -0
package/dist/components/ry-heading.d.ts.map +1 -0
package/dist/components/ry-theme-panel.d.ts +1 -1
package/dist/components/ry-theme-panel.d.ts.map +1 -1
package/dist/core/ry-transform.d.ts.map +1 -1
package/dist/css/ry-structure.css +40 -3
package/dist/css/ry-theme.css +66 -1
package/dist/css/ry-tokens.css +165 -100
package/dist/css/ry-ui.css +271 -104
package/dist/ry-ui.d.ts +1 -0
package/dist/ry-ui.d.ts.map +1 -1
package/dist/ry-ui.js +112 -92
package/dist/ry-ui.js.map +1 -1
package/dist/themes/ocean.css +22 -22
package/package.json +3 -1

package/README.md CHANGED Viewed

@@ -174,6 +174,7 @@ Wrap markup in `<ry>` to use unprefixed tags:
 | `<ry-feature-grid>` | `cols="2\|3\|4"` | Responsive grid for feature cards |
 | `<ry-pricing>` | — | Container for pricing cards |
 | `<ry-pricing-card>` | `featured` | Pricing tier. `featured` scales up with bold border |
+| `<ry-heading>` | `size="sm\|lg"`, `align="center\|right"`, `divider` | Section heading with optional `slot="sub"` subtitle |
 ---

package/dist/components/ry-heading.d.ts ADDED Viewed

@@ -0,0 +1,19 @@
+/**
+ * <ry-heading>
+ *
+ * Section heading with optional subtitle.
+ *
+ * Usage:
+ * <ry-heading>Page Title</ry-heading>
+ * <ry-heading size="lg">Large Title</ry-heading>
+ * <ry-heading align="center">
+ *   Centered Title
+ *   <span slot="sub">A brief description</span>
+ * </ry-heading>
+ */
+import { RyElement } from '../core/ry-element.js';
+export declare class RyHeading extends RyElement {
+    #private;
+    setup(): void;
+}
+//# sourceMappingURL=ry-heading.d.ts.map

package/dist/components/ry-heading.d.ts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"ry-heading.d.ts","sourceRoot":"","sources":["../../src/ts/components/ry-heading.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAElD,qBAAa,SAAU,SAAQ,SAAS;;IACtC,KAAK,IAAI,IAAI;CAmBd"}

package/dist/components/ry-theme-panel.d.ts CHANGED Viewed

@@ -7,7 +7,7 @@
  * Usage:
  * <ry-theme-panel></ry-theme-panel>
  *
- * Themes: "none" (bare structure), "default", "ocean"
+ * Themes: "none" (bare structure), "default", "ocean", "antigravity"
  * Modes: "auto" (OS preference), "light", "dark"
  *
  * Sets data-ry-theme and data-ry-mode on <html>.

package/dist/components/ry-theme-panel.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ry-theme-panel.d.ts","sourceRoot":"","sources":["../../src/ts/components/ry-theme-panel.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AASlD,qBAAa,YAAa,SAAQ,SAAS;;IAIzC,KAAK,IAAI,IAAI;~~IA8Jb~~,IAAI,KAAK,IAAI,MAAM,CAAwB;IAC3C,IAAI,KAAK,CAAC,CAAC,EAAE,MAAM,EAKlB;IAED,IAAI,IAAI,IAAI,MAAM,CAAuB;IACzC,IAAI,IAAI,CAAC,CAAC,EAAE,MAAM,EAKjB;CACF"}
1	+ {"version":3,"file":"ry-theme-panel.d.ts","sourceRoot":"","sources":["../../src/ts/components/ry-theme-panel.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AASlD,qBAAa,YAAa,SAAQ,SAAS;;IAIzC,KAAK,IAAI,IAAI;IAiKb,IAAI,KAAK,IAAI,MAAM,CAAwB;IAC3C,IAAI,KAAK,CAAC,CAAC,EAAE,MAAM,EAKlB;IAED,IAAI,IAAI,IAAI,MAAM,CAAuB;IACzC,IAAI,IAAI,CAAC,CAAC,EAAE,MAAM,EAKjB;CACF"}

package/dist/core/ry-transform.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ry-transform.d.ts","sourceRoot":"","sources":["../../src/ts/core/ry-transform.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;~~AAyDH~~;;GAEG;AACH,wBAAgB,SAAS,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAE9C;AAED;;GAEG;AACH,wBAAgB,iBAAiB,IAAI,IAAI,CAgBxC"}
1	+ {"version":3,"file":"ry-transform.d.ts","sourceRoot":"","sources":["../../src/ts/core/ry-transform.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AA0DH;;GAEG;AACH,wBAAgB,SAAS,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAE9C;AAED;;GAEG;AACH,wBAAgB,iBAAiB,IAAI,IAAI,CAgBxC"}

package/dist/css/ry-structure.css CHANGED Viewed

@@ -48,7 +48,7 @@ ry {
   ry-toggle-button, ry-knob, ry-slider, ry-number-select, ry-color-picker, ry-color-input,
   ry-gradient-picker, ry-tree, ry-tree-item,
   ry-tag, ry-tag-input, ry-hero, ry-stat, ry-feature, ry-feature-grid,
-  ry-pricing, ry-pricing-card, ry-carousel, ry-combobox) {
+  ry-pricing, ry-pricing-card, ry-carousel, ry-combobox, ry-heading) {
   box-sizing: border-box;
 }
@@ -93,7 +93,8 @@ ry {
 :is(ry-modal [data-ry-target="header"] h3,
     ry-card h3,
     ry-hero h1,
-    ry-pricing-card h3) {
+    ry-pricing-card h3,
+    ry-heading [data-ry-target="title"]) {
   text-wrap: balance;
 }
@@ -364,11 +365,13 @@ ry-center {
 ry-nav {
   display: flex;
   align-items: center;
-  gap: var(--ry-space-4, 1rem);
+  gap: var(--ry-space-1, 0.25rem);
 }
 ry-nav a {
   text-decoration: none;
+  padding: var(--ry-space-2, 0.5rem) var(--ry-space-3, 0.75rem);
+  white-space: nowrap;
 }
 /* ═══════════════════════════════════════════════════════════════
@@ -388,6 +391,7 @@ ry-actions {
   display: flex;
   align-items: center;
   gap: var(--ry-space-2, 0.5rem);
+  margin-inline-start: auto;
 }
 /* ═══════════════════════════════════════════════════════════════
@@ -3055,4 +3059,37 @@ ry-theme-panel [data-ry-target="mode-btn"] {
   line-height: 1;
 }
+/* ═══════════════════════════════════════════════════════════════
+   HEADING
+   ═══════════════════════════════════════════════════════════════ */
+ry-heading {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ry-space-2, 0.5rem);
+}
+ry-heading[align="center"] {
+  text-align: center;
+}
+ry-heading[align="right"] {
+  text-align: end;
+}
+/* Balanced text wrapping for heading titles */
+ry-heading [data-ry-target="title"] {
+  text-wrap: balance;
+  margin: 0;
+}
+ry-heading [data-ry-target="sub"] {
+  margin: 0;
+}
+/* Divider variant: adds a bottom border */
+ry-heading[divider] {
+  padding-block-end: var(--ry-space-4, 1rem);
+}
 } /* @layer ry-structure */

package/dist/css/ry-theme.css CHANGED Viewed

@@ -118,11 +118,14 @@ ry-nav a {
   color: var(--ry-color-text-muted);
   font-size: var(--ry-text-sm);
   font-weight: var(--ry-font-medium);
-  transition: color var(--ry-duration-fast) var(--ry-ease);
+  border-radius: var(--ry-radius-md);
+  transition: color var(--ry-duration-fast) var(--ry-ease),
+              background-color var(--ry-duration-fast) var(--ry-ease);
 }
 ry-nav a:hover {
   color: var(--ry-color-text);
+  background-color: var(--ry-color-hover-overlay);
 }
 ry-nav a[aria-current="page"] {
@@ -2377,6 +2380,28 @@ ry-combobox[data-ry-state="open"] .ry-combobox__input-wrapper {
    ═══════════════════════════════════════════════════════════════ */
 [data-ry-theme="none"] {
+  /* Strictly black and white */
+  --ry-color-primary: light-dark(#000000, #ffffff);
+  --ry-color-primary-hover: light-dark(#333333, #cccccc);
+  --ry-color-primary-active: light-dark(#555555, #aaaaaa);
+  --ry-color-secondary: light-dark(#000000, #ffffff);
+  --ry-color-secondary-hover: light-dark(#333333, #cccccc);
+  --ry-color-secondary-active: light-dark(#555555, #aaaaaa);
+  --ry-color-accent: light-dark(#000000, #ffffff);
+  --ry-color-accent-hover: light-dark(#333333, #cccccc);
+  --ry-color-accent-active: light-dark(#555555, #aaaaaa);
+  --ry-color-text: light-dark(#000000, #ffffff);
+  --ry-color-text-muted: light-dark(#666666, #999999);
+  --ry-color-text-inverse: light-dark(#ffffff, #000000);
+  --ry-color-bg: light-dark(#ffffff, #000000);
+  --ry-color-bg-subtle: light-dark(#f5f5f5, #0a0a0a);
+  --ry-color-bg-muted: light-dark(#eeeeee, #111111);
+  --ry-color-border: light-dark(#dddddd, #333333);
+  --ry-color-border-strong: light-dark(#999999, #666666);
+  --ry-color-overlay: light-dark(rgba(255,255,255,0.95), rgba(0,0,0,0.95));
+  --ry-color-hover-overlay: light-dark(rgba(0,0,0,0.04), rgba(255,255,255,0.06));
+  --ry-focus-ring: light-dark(0 0 0 3px rgba(0,0,0,0.3), 0 0 0 3px rgba(255,255,255,0.3));
+  /* No radii, no shadows */
   --ry-radius-sm: 0;
   --ry-radius-md: 0;
   --ry-radius-lg: 0;
@@ -2422,4 +2447,44 @@ ry-combobox[data-ry-state="open"] .ry-combobox__input-wrapper {
   color: var(--ry-color-text-inverse);
 }
+/* ═══════════════════════════════════════════════════════════════
+   HEADING
+   ═══════════════════════════════════════════════════════════════ */
+.ry-heading__title {
+  font-size: var(--ry-text-2xl);
+  font-weight: var(--ry-font-bold);
+  line-height: var(--ry-leading-tight);
+  color: var(--ry-color-text);
+}
+.ry-heading__sub {
+  font-size: var(--ry-text-base);
+  line-height: var(--ry-leading-normal);
+  color: var(--ry-color-text-muted);
+}
+/* Size: sm */
+ry-heading[size="sm"] .ry-heading__title {
+  font-size: var(--ry-text-lg);
+}
+ry-heading[size="sm"] .ry-heading__sub {
+  font-size: var(--ry-text-sm);
+}
+/* Size: lg */
+ry-heading[size="lg"] .ry-heading__title {
+  font-size: var(--ry-text-4xl);
+}
+ry-heading[size="lg"] .ry-heading__sub {
+  font-size: var(--ry-text-lg);
+}
+/* Divider variant */
+ry-heading[divider] {
+  border-bottom: var(--ry-border-width) solid var(--ry-color-border);
+}
 } /* @layer ry-theme */

package/dist/css/ry-tokens.css CHANGED Viewed

@@ -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 oklch, 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 oklch, 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 oklch, 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 oklch, 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; }