@rokkit/themes 1.2.0 → 1.3.0

package/dist/index.css

@@ -11,252 +11,6 @@
   }
 }
 
-:root {
-  --color-surface-z0: var(--color-surface-50);
-  --color-surface-z1: var(--color-surface-100);
-  --color-surface-z2: var(--color-surface-200);
-  --color-surface-z3: var(--color-surface-300);
-  --color-surface-z4: var(--color-surface-400);
-  --color-surface-z5: var(--color-surface-500);
-  --color-surface-z6: var(--color-surface-600);
-  --color-surface-z7: var(--color-surface-700);
-  --color-surface-z8: var(--color-surface-800);
-  --color-surface-z9: var(--color-surface-900);
-  --color-surface-z10: var(--color-surface-950);
-  --color-ink-z0: var(--color-ink-950);
-  --color-ink-z1: var(--color-ink-900);
-  --color-ink-z2: var(--color-ink-800);
-  --color-ink-z3: var(--color-ink-700);
-  --color-ink-z4: var(--color-ink-600);
-  --color-ink-z5: var(--color-ink-500);
-  --color-ink-z6: var(--color-ink-400);
-  --color-ink-z7: var(--color-ink-300);
-  --color-ink-z8: var(--color-ink-200);
-  --color-ink-z9: var(--color-ink-100);
-  --color-ink-z10: var(--color-ink-50);
-  --color-primary-z0: var(--color-primary-50);
-  --color-primary-z1: var(--color-primary-100);
-  --color-primary-z2: var(--color-primary-200);
-  --color-primary-z3: var(--color-primary-300);
-  --color-primary-z4: var(--color-primary-400);
-  --color-primary-z5: var(--color-primary-500);
-  --color-primary-z6: var(--color-primary-600);
-  --color-primary-z7: var(--color-primary-700);
-  --color-primary-z8: var(--color-primary-800);
-  --color-primary-z9: var(--color-primary-900);
-  --color-primary-z10: var(--color-primary-950);
-  --color-secondary-z0: var(--color-secondary-50);
-  --color-secondary-z1: var(--color-secondary-100);
-  --color-secondary-z2: var(--color-secondary-200);
-  --color-secondary-z3: var(--color-secondary-300);
-  --color-secondary-z4: var(--color-secondary-400);
-  --color-secondary-z5: var(--color-secondary-500);
-  --color-secondary-z6: var(--color-secondary-600);
-  --color-secondary-z7: var(--color-secondary-700);
-  --color-secondary-z8: var(--color-secondary-800);
-  --color-secondary-z9: var(--color-secondary-900);
-  --color-secondary-z10: var(--color-secondary-950);
-  --color-tertiary-z0: var(--color-tertiary-50);
-  --color-tertiary-z1: var(--color-tertiary-100);
-  --color-tertiary-z2: var(--color-tertiary-200);
-  --color-tertiary-z3: var(--color-tertiary-300);
-  --color-tertiary-z4: var(--color-tertiary-400);
-  --color-tertiary-z5: var(--color-tertiary-500);
-  --color-tertiary-z6: var(--color-tertiary-600);
-  --color-tertiary-z7: var(--color-tertiary-700);
-  --color-tertiary-z8: var(--color-tertiary-800);
-  --color-tertiary-z9: var(--color-tertiary-900);
-  --color-tertiary-z10: var(--color-tertiary-950);
-  --color-accent-z0: var(--color-accent-50);
-  --color-accent-z1: var(--color-accent-100);
-  --color-accent-z2: var(--color-accent-200);
-  --color-accent-z3: var(--color-accent-300);
-  --color-accent-z4: var(--color-accent-400);
-  --color-accent-z5: var(--color-accent-500);
-  --color-accent-z6: var(--color-accent-600);
-  --color-accent-z7: var(--color-accent-700);
-  --color-accent-z8: var(--color-accent-800);
-  --color-accent-z9: var(--color-accent-900);
-  --color-accent-z10: var(--color-accent-950);
-  --color-success-z0: var(--color-success-50);
-  --color-success-z1: var(--color-success-100);
-  --color-success-z2: var(--color-success-200);
-  --color-success-z3: var(--color-success-300);
-  --color-success-z4: var(--color-success-400);
-  --color-success-z5: var(--color-success-500);
-  --color-success-z6: var(--color-success-600);
-  --color-success-z7: var(--color-success-700);
-  --color-success-z8: var(--color-success-800);
-  --color-success-z9: var(--color-success-900);
-  --color-success-z10: var(--color-success-950);
-  --color-warning-z0: var(--color-warning-50);
-  --color-warning-z1: var(--color-warning-100);
-  --color-warning-z2: var(--color-warning-200);
-  --color-warning-z3: var(--color-warning-300);
-  --color-warning-z4: var(--color-warning-400);
-  --color-warning-z5: var(--color-warning-500);
-  --color-warning-z6: var(--color-warning-600);
-  --color-warning-z7: var(--color-warning-700);
-  --color-warning-z8: var(--color-warning-800);
-  --color-warning-z9: var(--color-warning-900);
-  --color-warning-z10: var(--color-warning-950);
-  --color-danger-z0: var(--color-danger-50);
-  --color-danger-z1: var(--color-danger-100);
-  --color-danger-z2: var(--color-danger-200);
-  --color-danger-z3: var(--color-danger-300);
-  --color-danger-z4: var(--color-danger-400);
-  --color-danger-z5: var(--color-danger-500);
-  --color-danger-z6: var(--color-danger-600);
-  --color-danger-z7: var(--color-danger-700);
-  --color-danger-z8: var(--color-danger-800);
-  --color-danger-z9: var(--color-danger-900);
-  --color-danger-z10: var(--color-danger-950);
-  --color-error-z0: var(--color-error-50);
-  --color-error-z1: var(--color-error-100);
-  --color-error-z2: var(--color-error-200);
-  --color-error-z3: var(--color-error-300);
-  --color-error-z4: var(--color-error-400);
-  --color-error-z5: var(--color-error-500);
-  --color-error-z6: var(--color-error-600);
-  --color-error-z7: var(--color-error-700);
-  --color-error-z8: var(--color-error-800);
-  --color-error-z9: var(--color-error-900);
-  --color-error-z10: var(--color-error-950);
-  --color-info-z0: var(--color-info-50);
-  --color-info-z1: var(--color-info-100);
-  --color-info-z2: var(--color-info-200);
-  --color-info-z3: var(--color-info-300);
-  --color-info-z4: var(--color-info-400);
-  --color-info-z5: var(--color-info-500);
-  --color-info-z6: var(--color-info-600);
-  --color-info-z7: var(--color-info-700);
-  --color-info-z8: var(--color-info-800);
-  --color-info-z9: var(--color-info-900);
-  --color-info-z10: var(--color-info-950);
-}
-[data-mode="dark"] {
-  --color-surface-z0: var(--color-surface-950);
-  --color-surface-z1: var(--color-surface-900);
-  --color-surface-z2: var(--color-surface-800);
-  --color-surface-z3: var(--color-surface-700);
-  --color-surface-z4: var(--color-surface-600);
-  --color-surface-z5: var(--color-surface-500);
-  --color-surface-z6: var(--color-surface-400);
-  --color-surface-z7: var(--color-surface-300);
-  --color-surface-z8: var(--color-surface-200);
-  --color-surface-z9: var(--color-surface-100);
-  --color-surface-z10: var(--color-surface-50);
-  --color-ink-z0: var(--color-ink-50);
-  --color-ink-z1: var(--color-ink-100);
-  --color-ink-z2: var(--color-ink-200);
-  --color-ink-z3: var(--color-ink-300);
-  --color-ink-z4: var(--color-ink-400);
-  --color-ink-z5: var(--color-ink-500);
-  --color-ink-z6: var(--color-ink-600);
-  --color-ink-z7: var(--color-ink-700);
-  --color-ink-z8: var(--color-ink-800);
-  --color-ink-z9: var(--color-ink-900);
-  --color-ink-z10: var(--color-ink-950);
-  --color-primary-z0: var(--color-primary-950);
-  --color-primary-z1: var(--color-primary-900);
-  --color-primary-z2: var(--color-primary-800);
-  --color-primary-z3: var(--color-primary-700);
-  --color-primary-z4: var(--color-primary-600);
-  --color-primary-z5: var(--color-primary-500);
-  --color-primary-z6: var(--color-primary-400);
-  --color-primary-z7: var(--color-primary-300);
-  --color-primary-z8: var(--color-primary-200);
-  --color-primary-z9: var(--color-primary-100);
-  --color-primary-z10: var(--color-primary-50);
-  --color-secondary-z0: var(--color-secondary-950);
-  --color-secondary-z1: var(--color-secondary-900);
-  --color-secondary-z2: var(--color-secondary-800);
-  --color-secondary-z3: var(--color-secondary-700);
-  --color-secondary-z4: var(--color-secondary-600);
-  --color-secondary-z5: var(--color-secondary-500);
-  --color-secondary-z6: var(--color-secondary-400);
-  --color-secondary-z7: var(--color-secondary-300);
-  --color-secondary-z8: var(--color-secondary-200);
-  --color-secondary-z9: var(--color-secondary-100);
-  --color-secondary-z10: var(--color-secondary-50);
-  --color-tertiary-z0: var(--color-tertiary-950);
-  --color-tertiary-z1: var(--color-tertiary-900);
-  --color-tertiary-z2: var(--color-tertiary-800);
-  --color-tertiary-z3: var(--color-tertiary-700);
-  --color-tertiary-z4: var(--color-tertiary-600);
-  --color-tertiary-z5: var(--color-tertiary-500);
-  --color-tertiary-z6: var(--color-tertiary-400);
-  --color-tertiary-z7: var(--color-tertiary-300);
-  --color-tertiary-z8: var(--color-tertiary-200);
-  --color-tertiary-z9: var(--color-tertiary-100);
-  --color-tertiary-z10: var(--color-tertiary-50);
-  --color-accent-z0: var(--color-accent-950);
-  --color-accent-z1: var(--color-accent-900);
-  --color-accent-z2: var(--color-accent-800);
-  --color-accent-z3: var(--color-accent-700);
-  --color-accent-z4: var(--color-accent-600);
-  --color-accent-z5: var(--color-accent-500);
-  --color-accent-z6: var(--color-accent-400);
-  --color-accent-z7: var(--color-accent-300);
-  --color-accent-z8: var(--color-accent-200);
-  --color-accent-z9: var(--color-accent-100);
-  --color-accent-z10: var(--color-accent-50);
-  --color-success-z0: var(--color-success-950);
-  --color-success-z1: var(--color-success-900);
-  --color-success-z2: var(--color-success-800);
-  --color-success-z3: var(--color-success-700);
-  --color-success-z4: var(--color-success-600);
-  --color-success-z5: var(--color-success-500);
-  --color-success-z6: var(--color-success-400);
-  --color-success-z7: var(--color-success-300);
-  --color-success-z8: var(--color-success-200);
-  --color-success-z9: var(--color-success-100);
-  --color-success-z10: var(--color-success-50);
-  --color-warning-z0: var(--color-warning-950);
-  --color-warning-z1: var(--color-warning-900);
-  --color-warning-z2: var(--color-warning-800);
-  --color-warning-z3: var(--color-warning-700);
-  --color-warning-z4: var(--color-warning-600);
-  --color-warning-z5: var(--color-warning-500);
-  --color-warning-z6: var(--color-warning-400);
-  --color-warning-z7: var(--color-warning-300);
-  --color-warning-z8: var(--color-warning-200);
-  --color-warning-z9: var(--color-warning-100);
-  --color-warning-z10: var(--color-warning-50);
-  --color-danger-z0: var(--color-danger-950);
-  --color-danger-z1: var(--color-danger-900);
-  --color-danger-z2: var(--color-danger-800);
-  --color-danger-z3: var(--color-danger-700);
-  --color-danger-z4: var(--color-danger-600);
-  --color-danger-z5: var(--color-danger-500);
-  --color-danger-z6: var(--color-danger-400);
-  --color-danger-z7: var(--color-danger-300);
-  --color-danger-z8: var(--color-danger-200);
-  --color-danger-z9: var(--color-danger-100);
-  --color-danger-z10: var(--color-danger-50);
-  --color-error-z0: var(--color-error-950);
-  --color-error-z1: var(--color-error-900);
-  --color-error-z2: var(--color-error-800);
-  --color-error-z3: var(--color-error-700);
-  --color-error-z4: var(--color-error-600);
-  --color-error-z5: var(--color-error-500);
-  --color-error-z6: var(--color-error-400);
-  --color-error-z7: var(--color-error-300);
-  --color-error-z8: var(--color-error-200);
-  --color-error-z9: var(--color-error-100);
-  --color-error-z10: var(--color-error-50);
-  --color-info-z0: var(--color-info-950);
-  --color-info-z1: var(--color-info-900);
-  --color-info-z2: var(--color-info-800);
-  --color-info-z3: var(--color-info-700);
-  --color-info-z4: var(--color-info-600);
-  --color-info-z5: var(--color-info-500);
-  --color-info-z6: var(--color-info-400);
-  --color-info-z7: var(--color-info-300);
-  --color-info-z8: var(--color-info-200);
-  --color-info-z9: var(--color-info-100);
-  --color-info-z10: var(--color-info-50);
-}
 /**
  * @rokkit/themes - Base Styles
  *
@@ -9980,7 +9734,7 @@ button[data-step-number] {
   background-color:var(--error);
 }
 
-/* Status dot border matches surrounding background — uses surface-z1 as a neutral */
+/* Status dot border matches surrounding background — uses paper-soft as a neutral */
 [data-style='rokkit'] [data-avatar-status] {
   border-color:var(--paper-soft);
 }
@@ -17002,8 +16756,8 @@ button[data-step-number] {
  * Key principles:
  *  - No shadows. Depth through background tone variation only.
  *  - No gradients. Color conveys meaning, not decoration.
- *  - Hairline borders (surface-z2). Paper-edge precision.
- *  - Ink-on-paper primary: surface-z9 bg / surface-z0 text.
+ *  - Hairline borders (paper-edge). Paper-edge precision.
+ *  - Ink-on-paper primary: ink bg / paper text.
  *  - Single accent: primary (shu/vermillion) for active and CTA.
  *  - Focus: border darkens — no glow rings.
  *
@@ -17014,8 +16768,8 @@ button[data-step-number] {
  * Button - Zen-Sumi Theme Styles
  *
  * Ink-on-paper aesthetics. No gradients. No shadows.
- * Primary filled = ink background (surface-z9) with paper text.
- * CTA/accent = shu vermillion (primary-z5).
+ * Primary filled = ink background with paper text.
+ * CTA/accent = shu vermillion (primary).
  * Focus: border darkens — no glow ring.
  */
 
@@ -17192,14 +16946,14 @@ button[data-step-number] {
 
 [data-style='zen-sumi'] [data-button]:focus-visible {
   outline:2px solid transparent;outline-offset:2px;
-  box-shadow: 0 0 0 1px var(--color-surface-z5);
+  box-shadow: 0 0 0 1px var(--ink-soft);
 }
 
 /**
  * Toolbar - Zen-Sumi Theme Styles
  *
  * Transparent base with hairline border by position.
- * Items: surface-z6 → surface-z9 on hover. Active: primary-z5.
+ * Items: ink-soft → ink on hover. Active: primary.
  */
 
 /* =============================================================================
@@ -17242,7 +16996,7 @@ button[data-step-number] {
 [data-style='zen-sumi']
   [data-toolbar-item]:focus-visible:not(:disabled):not([data-disabled='true']) {
   background-image:none;outline:2px solid transparent;outline-offset:2px;color:var(--ink-mute);
-  box-shadow: inset 0 0 0 1px var(--color-surface-z4);
+  box-shadow: inset 0 0 0 1px var(--paper-edge);
 }
 
 /* Active/pressed state */
@@ -17287,7 +17041,7 @@ button[data-step-number] {
  *
  * Pill-style tabs with filled active state (ink background, paper text).
  * No underlines — depth through background fill only.
- * Inactive: transparent. Hover: surface-z2 wash. Active: surface-z9 fill.
+ * Inactive: transparent. Hover: paper-mute wash. Active: ink fill.
  */
 
 /* =============================================================================
@@ -17365,7 +17119,7 @@ button[data-step-number] {
  * Toggle - Zen-Sumi Theme Styles
  *
  * Pill container with primary-coloured active fill (shu vermillion).
- * Inactive: transparent. Hover: surface-z2. Selected: primary fill on
+ * Inactive: transparent. Hover: paper-mute. Selected: primary fill on
  * paper text — colourful enough that the active option is unambiguous
  * at a glance, even in the small canvas-view-toggle (Live · Code · API).
  */
@@ -17451,7 +17205,7 @@ button[data-step-number] {
 /**
  * Switch - Zen-Sumi Theme Styles
  *
- * Flat pill. Off: surface-z3 track. On: primary-z5 (shu vermillion) track.
+ * Flat pill. Off: paper-mute track. On: primary (shu vermillion) track.
  * Thumb: paper white. No shadows.
  */
 
@@ -17466,7 +17220,7 @@ button[data-step-number] {
 }
 
 [data-style='zen-sumi'] [data-switch]:focus-visible [data-switch-track] {
-  box-shadow: 0 0 0 2px var(--color-surface-z5);
+  box-shadow: 0 0 0 2px var(--ink-soft);
 }
 
 /* On state — shu vermillion */
@@ -17666,7 +17420,7 @@ button[data-step-number] {
 /* Focus visible for keyboard navigation */
 [data-style='zen-sumi'] [data-tree-item-content]:focus-visible {
   outline:2px solid transparent;outline-offset:2px;
-  box-shadow: inset 0 0 0 1px var(--color-surface-z4);
+  box-shadow: inset 0 0 0 1px var(--paper-edge);
 }
 
 /* Active/selected state */
@@ -17794,8 +17548,8 @@ button[data-step-number] {
 /**
  * Select - Zen-Sumi Theme Styles
  *
- * Hairline border trigger. Dropdown: paper-z1 bg, no shadow.
- * Options: transparent default, surface-z2 hover, primary accent on selected.
+ * Hairline border trigger. Dropdown: paper-soft bg, no shadow.
+ * Options: transparent default, paper-mute hover, primary accent on selected.
  * Focus: border darkens — no ring glow.
  */
 
@@ -17813,7 +17567,7 @@ button[data-step-number] {
 
 [data-style='zen-sumi'] [data-select-trigger]:focus-visible {
   outline:2px solid transparent;outline-offset:2px;
-  box-shadow: 0 0 0 1px var(--color-surface-z5);
+  box-shadow: 0 0 0 1px var(--ink-soft);
 }
 
 [data-style='zen-sumi'] [data-select][data-open='true'] [data-select-trigger] {
@@ -17956,7 +17710,7 @@ button[data-step-number] {
  * Menu - Zen-Sumi Theme Styles
  *
  * Hairline trigger. Dropdown: paper bg, hairline border, no shadow.
- * Items: transparent default, surface-z2 hover.
+ * Items: transparent default, paper-mute hover.
  */
 
 /* =============================================================================
@@ -17973,7 +17727,7 @@ button[data-step-number] {
 
 [data-style='zen-sumi'] [data-menu-trigger]:focus-visible {
   outline:2px solid transparent;outline-offset:2px;
-  box-shadow: 0 0 0 1px var(--color-surface-z5);
+  box-shadow: 0 0 0 1px var(--ink-soft);
 }
 
 [data-style='zen-sumi'] [data-menu][data-open='true'] [data-menu-trigger] {
@@ -18048,7 +17802,7 @@ button[data-step-number] {
  * Dropdown - Zen-Sumi Theme Styles
  *
  * Hairline trigger. Panel: paper bg, no shadow.
- * Options: transparent → surface-z2 on hover.
+ * Options: transparent → paper-mute on hover.
  */
 
 [data-style='zen-sumi'] [data-dropdown-trigger] {
@@ -18061,7 +17815,7 @@ button[data-step-number] {
 
 [data-style='zen-sumi'] [data-dropdown-trigger]:focus-visible {
   outline:2px solid transparent;outline-offset:2px;
-  box-shadow: 0 0 0 1px var(--color-surface-z5);
+  box-shadow: 0 0 0 1px var(--ink-soft);
 }
 
 [data-style='zen-sumi'] [data-dropdown][data-open='true'] [data-dropdown-trigger] {
@@ -18102,7 +17856,7 @@ button[data-step-number] {
  * FloatingAction - Zen-Sumi Theme Styles
  *
  * Paper bg with hairline border. No shadow.
- * Hover: surface-z2 wash. No glow rings.
+ * Hover: paper-mute wash. No glow rings.
  */
 
 /* =============================================================================
@@ -18120,7 +17874,7 @@ button[data-step-number] {
 
 [data-style='zen-sumi'] [data-fab-trigger]:focus-visible {
   outline:2px solid transparent;outline-offset:2px;
-  box-shadow: 0 0 0 1px var(--color-surface-z5);
+  box-shadow: 0 0 0 1px var(--ink-soft);
 }
 
 [data-style='zen-sumi'] [data-fab][data-open='true'] [data-fab-trigger] {
@@ -18147,7 +17901,7 @@ button[data-step-number] {
 
 [data-style='zen-sumi'] [data-fab-item]:focus-visible {
   outline:2px solid transparent;outline-offset:2px;
-  box-shadow: 0 0 0 1px var(--color-surface-z5);
+  box-shadow: 0 0 0 1px var(--ink-soft);
 }
 
 /* Item icon */
@@ -18164,7 +17918,7 @@ button[data-step-number] {
    ============================================================================= */
 
 [data-style='zen-sumi'] [data-fab-backdrop] {
-  background: color-mix(in oklch, var(--color-surface-z9) 15%, transparent);
+  background: color-mix(in oklch, var(--ink) 15%, transparent);
 }
 
 /**
@@ -18181,8 +17935,8 @@ button[data-step-number] {
    data-mode in dev mode. */
 [data-style='zen-sumi'] [data-input-root] {
   position:relative;display:flex;align-items:center;border-width:1px;
-  background: var(--color-surface-z1);
-  border-color: var(--color-surface-z3);
+  background: var(--paper-soft);
+  border-color: var(--paper-mute);
   background-image: none;
   transition: border-color 150ms ease;
 }
@@ -18208,13 +17962,13 @@ button[data-step-number] {
 
 /* Hover: border darkens slightly */
 [data-style='zen-sumi'] [data-input-root]:hover:not(:focus-within) {
-  border-color: var(--color-surface-z4);
+  border-color: var(--paper-edge);
   background-image: none;
 }
 
 /* Focus: border darkens — no glow */
 [data-style='zen-sumi'] [data-input-root]:focus-within {
-  border-color: var(--color-surface-z6);
+  border-color: var(--ink-soft);
   background-image: none;
 }
 
@@ -18225,7 +17979,7 @@ button[data-step-number] {
 [data-style='zen-sumi'] [data-input-root] textarea,
 [data-style='zen-sumi'] [data-input-root] select {
   width:100%;border-style:none;background-color:transparent;padding-left:0.5rem;padding-right:0.5rem;padding-top:0.375rem;padding-bottom:0.375rem;outline:2px solid transparent;outline-offset:2px;
-  color: var(--color-ink-z1);
+  color: var(--ink-mute);
   font-size: 0.8125rem;
   line-height: 1.25rem;
 }
@@ -18343,7 +18097,7 @@ button[data-step-number] {
  * Table - Zen-Sumi Theme Styles
  *
  * Clean, flat rows. Header: uppercase small text, hairline bottom border.
- * No shadow on header. Row hover: surface-z1 wash. No bg on selected — left border only.
+ * No shadow on header. Row hover: paper-soft wash. No bg on selected — left border only.
  */
 
 /* =============================================================================
@@ -18402,7 +18156,7 @@ button[data-step-number] {
 
 [data-style='zen-sumi'] [data-table-row]:focus {
   background-image:none;outline:2px solid transparent;outline-offset:2px;color:var(--ink-mute);
-  box-shadow: inset 0 0 0 1px var(--color-surface-z4);
+  box-shadow: inset 0 0 0 1px var(--paper-edge);
 }
 
 [data-style='zen-sumi'] [data-table-row][data-selected='true'] {
@@ -18556,8 +18310,8 @@ button[data-step-number] {
 /**
  * Range - Zen-Sumi Theme Styles
  *
- * Surface-z3 track. Primary (shu) fill for selected range.
- * Paper-z0 thumb with primary border.
+ * Paper-mute track. Primary (shu) fill for selected range.
+ * Paper thumb with primary border.
  */
 
 /* =============================================================================
@@ -18620,7 +18374,7 @@ button[data-step-number] {
  * Timeline - Zen-Sumi Theme Styles
  *
  * Restrained timeline. Completed/active: primary (shu) accent.
- * Connectors: surface-z2 default, primary when completed.
+ * Connectors: paper-mute default, primary when completed.
  */
 
 /* =============================================================================
@@ -18667,8 +18421,8 @@ button[data-step-number] {
  * FloatingNavigation - Zen-Sumi Theme Styles
  *
  * Paper bg, hairline border, no shadow.
- * Items: text-only default, surface-z2 wash on hover.
- * Active: ink text + surface-z1 bg + primary indicator.
+ * Items: text-only default, paper-mute wash on hover.
+ * Active: ink text + paper-soft bg + primary indicator.
  */
 
 /* =============================================================================
@@ -18718,7 +18472,7 @@ button[data-step-number] {
 
 [data-style='zen-sumi'] [data-floating-nav-item]:focus-visible {
   outline:2px solid transparent;outline-offset:2px;
-  box-shadow: inset 0 0 0 1px var(--color-surface-z4);
+  box-shadow: inset 0 0 0 1px var(--paper-edge);
 }
 
 /* Icon */
@@ -18766,7 +18520,7 @@ button[data-step-number] {
  *
  * Paper bg with hairline border. No shadows.
  * Depth through background tone shifts only.
- * Interactive: hover darkens border, bg shifts to surface-z2.
+ * Interactive: hover darkens border, bg shifts to paper-mute.
  */
 
 /* =============================================================================
@@ -18814,7 +18568,7 @@ button[data-step-number] {
 
 [data-style='zen-sumi'] [data-card][data-card-interactive]:focus-visible {
   outline:2px solid transparent;outline-offset:2px;
-  box-shadow: 0 0 0 1px var(--color-surface-z5);
+  box-shadow: 0 0 0 1px var(--ink-soft);
 }
 
 /* =============================================================================
@@ -19072,8 +18826,8 @@ button[data-step-number] {
 /**
  * Chart - Zen-Sumi Theme Styles
  *
- * Ink-wash aesthetic. Axes and grids: hairline surface-z2.
- * Labels: surface-z5 (secondary text). Dimmed elements: very low opacity.
+ * Ink-wash aesthetic. Axes and grids: hairline paper-mute.
+ * Labels: ink-soft (secondary text). Dimmed elements: very low opacity.
  */
 
 [data-style='zen-sumi'] [data-chart-axis-line],
@@ -19113,7 +18867,7 @@ button[data-step-number] {
 
 /**
  * Swatch — Zen-Sumi Theme
- * Selected: primary (shu) outline. Hover/focus: surface-z5 outline.
+ * Selected: primary (shu) outline. Hover/focus: ink-soft outline.
  */
 
 [data-style='zen-sumi'] [data-swatch-item][data-selected] {

package/dist/rokkit/avatar.css

@@ -23,7 +23,7 @@
   background-color:var(--error);
 }
 
-/* Status dot border matches surrounding background — uses surface-z1 as a neutral */
+/* Status dot border matches surrounding background — uses paper-soft as a neutral */
 [data-style='rokkit'] [data-avatar-status] {
   border-color:var(--paper-soft);
 }

package/dist/rokkit.css

@@ -2759,7 +2759,7 @@
   background-color:var(--error);
 }
 
-/* Status dot border matches surrounding background — uses surface-z1 as a neutral */
+/* Status dot border matches surrounding background — uses paper-soft as a neutral */
 [data-style='rokkit'] [data-avatar-status] {
   border-color:var(--paper-soft);
 }

package/dist/zen-sumi/button.css

@@ -2,8 +2,8 @@
  * Button - Zen-Sumi Theme Styles
  *
  * Ink-on-paper aesthetics. No gradients. No shadows.
- * Primary filled = ink background (surface-z9) with paper text.
- * CTA/accent = shu vermillion (primary-z5).
+ * Primary filled = ink background with paper text.
+ * CTA/accent = shu vermillion (primary).
  * Focus: border darkens — no glow ring.
  */
 
@@ -180,5 +180,5 @@
 
 [data-style='zen-sumi'] [data-button]:focus-visible {
   outline:2px solid transparent;outline-offset:2px;
-  box-shadow: 0 0 0 1px var(--color-surface-z5);
+  box-shadow: 0 0 0 1px var(--ink-soft);
 }

package/dist/zen-sumi/card.css

@@ -3,7 +3,7 @@
  *
  * Paper bg with hairline border. No shadows.
  * Depth through background tone shifts only.
- * Interactive: hover darkens border, bg shifts to surface-z2.
+ * Interactive: hover darkens border, bg shifts to paper-mute.
  */
 
 /* =============================================================================
@@ -51,7 +51,7 @@
 
 [data-style='zen-sumi'] [data-card][data-card-interactive]:focus-visible {
   outline:2px solid transparent;outline-offset:2px;
-  box-shadow: 0 0 0 1px var(--color-surface-z5);
+  box-shadow: 0 0 0 1px var(--ink-soft);
 }
 
 /* =============================================================================

package/dist/zen-sumi/chart.css

@@ -1,8 +1,8 @@
 /**
  * Chart - Zen-Sumi Theme Styles
  *
- * Ink-wash aesthetic. Axes and grids: hairline surface-z2.
- * Labels: surface-z5 (secondary text). Dimmed elements: very low opacity.
+ * Ink-wash aesthetic. Axes and grids: hairline paper-mute.
+ * Labels: ink-soft (secondary text). Dimmed elements: very low opacity.
  */
 
 [data-style='zen-sumi'] [data-chart-axis-line],

package/dist/zen-sumi/dropdown.css

@@ -2,7 +2,7 @@
  * Dropdown - Zen-Sumi Theme Styles
  *
  * Hairline trigger. Panel: paper bg, no shadow.
- * Options: transparent → surface-z2 on hover.
+ * Options: transparent → paper-mute on hover.
  */
 
 [data-style='zen-sumi'] [data-dropdown-trigger] {
@@ -15,7 +15,7 @@
 
 [data-style='zen-sumi'] [data-dropdown-trigger]:focus-visible {
   outline:2px solid transparent;outline-offset:2px;
-  box-shadow: 0 0 0 1px var(--color-surface-z5);
+  box-shadow: 0 0 0 1px var(--ink-soft);
 }
 
 [data-style='zen-sumi'] [data-dropdown][data-open='true'] [data-dropdown-trigger] {