@rokkit/themes 1.1.19 → 1.3.0

package/dist/zen-sumi/floating-action.css

@@ -2,7 +2,7 @@
  * 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.
  */
 
 /* =============================================================================
@@ -20,7 +20,7 @@
 
 [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] {
@@ -47,7 +47,7 @@
 
 [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 */
@@ -64,5 +64,5 @@
    ============================================================================= */
 
 [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);
 }

package/dist/zen-sumi/floating-navigation.css

@@ -2,8 +2,8 @@
  * 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.
  */
 
 /* =============================================================================
@@ -53,7 +53,7 @@
 
 [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 */

package/dist/zen-sumi/input.css

@@ -12,8 +12,8 @@
    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;
 }
@@ -39,13 +39,13 @@
 
 /* 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;
 }
 
@@ -56,7 +56,7 @@
 [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;
 }

package/dist/zen-sumi/menu.css

@@ -2,7 +2,7 @@
  * 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.
  */
 
 /* =============================================================================
@@ -19,7 +19,7 @@
 
 [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] {

package/dist/zen-sumi/range.css

@@ -1,8 +1,8 @@
 /**
  * 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.
  */
 
 /* =============================================================================

package/dist/zen-sumi/select.css

@@ -1,8 +1,8 @@
 /**
  * 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.
  */
 
@@ -20,7 +20,7 @@
 
 [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] {

package/dist/zen-sumi/swatch.css

@@ -1,6 +1,6 @@
 /**
  * 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/zen-sumi/switch.css

@@ -1,7 +1,7 @@
 /**
  * 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.
  */
 
@@ -16,7 +16,7 @@
 }
 
 [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 */

package/dist/zen-sumi/table.css

@@ -2,7 +2,7 @@
  * 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.
  */
 
 /* =============================================================================
@@ -61,7 +61,7 @@
 
 [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'] {

package/dist/zen-sumi/tabs.css

@@ -3,7 +3,7 @@
  *
  * 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.
  */
 
 /* =============================================================================

package/dist/zen-sumi/timeline.css

@@ -2,7 +2,7 @@
  * 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.
  */
 
 /* =============================================================================

package/dist/zen-sumi/toggle.css

@@ -2,7 +2,7 @@
  * 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).
  */

package/dist/zen-sumi/toolbar.css

@@ -2,7 +2,7 @@
  * 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.
  */
 
 /* =============================================================================
@@ -45,7 +45,7 @@
 [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 */

package/dist/zen-sumi/tree.css

@@ -52,7 +52,7 @@
 /* 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 */

package/dist/zen-sumi.css

@@ -6,8 +6,8 @@
  * 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.
  *
@@ -18,8 +18,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.
  */
 
@@ -196,14 +196,14 @@
 
 [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.
  */
 
 /* =============================================================================
@@ -246,7 +246,7 @@
 [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 */
@@ -291,7 +291,7 @@
  *
  * 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.
  */
 
 /* =============================================================================
@@ -369,7 +369,7 @@
  * 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).
  */
@@ -455,7 +455,7 @@
 /**
  * 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.
  */
 
@@ -470,7 +470,7 @@
 }
 
 [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 */
@@ -670,7 +670,7 @@
 /* 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 */
@@ -798,8 +798,8 @@
 /**
  * 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.
  */
 
@@ -817,7 +817,7 @@
 
 [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] {
@@ -960,7 +960,7 @@
  * 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.
  */
 
 /* =============================================================================
@@ -977,7 +977,7 @@
 
 [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] {
@@ -1052,7 +1052,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] {
@@ -1065,7 +1065,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] {
@@ -1106,7 +1106,7 @@
  * 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.
  */
 
 /* =============================================================================
@@ -1124,7 +1124,7 @@
 
 [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] {
@@ -1151,7 +1151,7 @@
 
 [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 */
@@ -1168,7 +1168,7 @@
    ============================================================================= */
 
 [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);
 }
 
 /**
@@ -1185,8 +1185,8 @@
    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;
 }
@@ -1212,13 +1212,13 @@
 
 /* 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;
 }
 
@@ -1229,7 +1229,7 @@
 [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;
 }
@@ -1347,7 +1347,7 @@
  * 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.
  */
 
 /* =============================================================================
@@ -1406,7 +1406,7 @@
 
 [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'] {
@@ -1560,8 +1560,8 @@
 /**
  * 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.
  */
 
 /* =============================================================================
@@ -1624,7 +1624,7 @@
  * 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.
  */
 
 /* =============================================================================
@@ -1671,8 +1671,8 @@
  * 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.
  */
 
 /* =============================================================================
@@ -1722,7 +1722,7 @@
 
 [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 */
@@ -1770,7 +1770,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.
  */
 
 /* =============================================================================
@@ -1818,7 +1818,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);
 }
 
 /* =============================================================================
@@ -2076,8 +2076,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],
@@ -2117,7 +2117,7 @@
 
 /**
  * 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rokkit/themes",
-  "version": "1.1.19",
+  "version": "1.3.0",
   "description": "Theme styles for @rokkit/ui components",
   "repository": {
     "type": "git",
@@ -105,10 +105,10 @@
   "build": "bun run build.mjs"
 },
 "dependencies": {
-  "@rokkit/core": "1.1.19"
+  "@rokkit/core": "1.3.0"
 },
 "devDependencies": {
-  "@rokkit/unocss": "1.1.19",
+  "@rokkit/unocss": "1.3.0",
   "magic-string": "^0.30.21",
   "unocss": "^66.5.1"
 },

package/src/index.js

@@ -3,7 +3,6 @@ import { Theme } from '@rokkit/core'
 export {
 	Theme,
 	themeRules,
-	semanticShortcuts,
 	contrastShortcuts,
 	iconShortcuts,
 	DEFAULT_ICONS,

package/src/rokkit/avatar.css

@@ -23,7 +23,7 @@
   @apply bg-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] {
   @apply border-paper-soft;
 }

package/src/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 {
   @apply outline-none;
-  box-shadow: 0 0 0 1px var(--color-surface-z5);
+  box-shadow: 0 0 0 1px var(--ink-soft);
 }

package/src/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 {
   @apply outline-none;
-  box-shadow: 0 0 0 1px var(--color-surface-z5);
+  box-shadow: 0 0 0 1px var(--ink-soft);
 }
 
 /* =============================================================================

package/src/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/src/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 {
   @apply outline-none;
-  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] {