@rokkit/themes 1.2.0 → 1.3.0

package/src/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 {
   @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-fab][data-open='true'] [data-fab-trigger] {
@@ -47,7 +47,7 @@
 
 [data-style='zen-sumi'] [data-fab-item]:focus-visible {
   @apply outline-none;
-  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/src/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 {
   @apply outline-none;
-  box-shadow: inset 0 0 0 1px var(--color-surface-z4);
+  box-shadow: inset 0 0 0 1px var(--paper-edge);
 }
 
 /* Icon */

package/src/zen-sumi/index.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.
  *

package/src/zen-sumi/input.css

@@ -12,8 +12,8 @@
    data-mode in dev mode. */
 [data-style='zen-sumi'] [data-input-root] {
   @apply relative flex items-center border;
-  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 {
   @apply w-full border-none bg-transparent px-2 py-1.5 outline-none;
-  color: var(--color-ink-z1);
+  color: var(--ink-mute);
   font-size: 0.8125rem;
   line-height: 1.25rem;
 }

package/src/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 {
   @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-menu][data-open='true'] [data-menu-trigger] {

package/src/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/src/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 {
   @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-select][data-open='true'] [data-select-trigger] {

package/src/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/src/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/src/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 {
   @apply text-ink-mute bg-none outline-none;
-  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/src/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/src/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/src/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/src/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']) {
   @apply text-ink-mute bg-none outline-none;
-  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/src/zen-sumi/tree.css

@@ -52,7 +52,7 @@
 /* Focus visible for keyboard navigation */
 [data-style='zen-sumi'] [data-tree-item-content]:focus-visible {
   @apply outline-none;
-  box-shadow: inset 0 0 0 1px var(--color-surface-z4);
+  box-shadow: inset 0 0 0 1px var(--paper-edge);
 }
 
 /* Active/selected state */