@rokkit/themes 1.0.5 → 1.1.0

package/src/zen-sumi/toc.css

@@ -1,7 +1,7 @@
 /* TableOfContents — Zen-Sumi theme */
 
 [data-style='zen-sumi'] [data-toc] [data-toc-label] {
-  @apply text-surface-z4;
+  @apply text-paper-edge;
   font-size: 0.6875rem;
   font-weight: 600;
   letter-spacing: 0.05em;
@@ -9,14 +9,14 @@
 }
 
 [data-style='zen-sumi'] [data-toc] [data-toc-item] {
-  @apply text-ink-z5;
+  @apply text-paper-edge;
 }
 
 [data-style='zen-sumi'] [data-toc] [data-toc-item]:hover,
 [data-style='zen-sumi'] [data-toc] [data-toc-item][data-toc-focused] {
-  @apply text-ink-z2 outline-none;
+  @apply text-ink-mute outline-none;
 }
 
 [data-style='zen-sumi'] [data-toc] [data-toc-item][data-toc-active] {
-  @apply text-primary-z5 border-l-primary-z4;
+  @apply text-primary border-l-primary;
 }

package/src/zen-sumi/toggle.css

@@ -1,8 +1,10 @@
 /**
  * Toggle - Zen-Sumi Theme Styles
  *
- * Pill container with filled active state.
- * Inactive: transparent. Hover: surface-z2. Active: ink fill (surface-z9).
+ * Pill container with primary-coloured active fill (shu vermillion).
+ * Inactive: transparent. Hover: surface-z2. 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).
  */
 
 /* =============================================================================
@@ -10,7 +12,7 @@
    ============================================================================= */
 
 [data-style='zen-sumi'] [data-toggle] {
-  @apply bg-surface-z1 border-surface-z2 border;
+  @apply bg-paper-soft border-paper-mute border;
   border-radius: var(--radius-md, 0.375rem);
 }
 
@@ -19,17 +21,17 @@
    ============================================================================= */
 
 [data-style='zen-sumi'] [data-toggle-option] {
-  @apply text-ink-z4 border-0 border-solid border-transparent;
+  @apply text-ink-soft border-0 border-solid border-transparent;
 }
 
 [data-style='zen-sumi'] [data-toggle-option]:hover:not(:disabled):not([data-disabled='true']),
 [data-style='zen-sumi'] [data-toggle-option]:focus:not(:disabled):not([data-disabled='true']) {
-  @apply bg-surface-z2 text-ink-z2;
+  @apply bg-paper-mute text-ink-mute;
 }
 
-/* Selected state — ink fill */
+/* Selected state — primary (shu) fill */
 [data-style='zen-sumi'] [data-toggle-option][data-selected='true'] {
-  @apply bg-surface-z9 text-surface-z0 bg-none;
+  @apply bg-primary text-on-primary bg-none;
   font-weight: 500;
 }
 
@@ -37,15 +39,21 @@
    Toggle Icon
    ============================================================================= */
 
+/* Icons follow the option's text colour — `paper-edge` (hairline border
+ * tone) was the wrong baseline because it renders the icon nearly
+ * invisible against paper-soft/paper-mute in both modes. `ink-soft` at
+ * rest reads as "available but secondary," `ink-mute` on hover/focus
+ * matches the option label, and `paper` for selected contrasts cleanly
+ * against the ink fill. */
 [data-style='zen-sumi'] [data-toggle-option] [data-toggle-icon] {
-  @apply text-ink-z5;
+  @apply text-ink-soft;
 }
 
 [data-style='zen-sumi'] [data-toggle-option]:hover:not(:disabled) [data-toggle-icon],
 [data-style='zen-sumi'] [data-toggle-option]:focus:not(:disabled) [data-toggle-icon] {
-  @apply text-ink-z3;
+  @apply text-ink-mute;
 }
 
 [data-style='zen-sumi'] [data-toggle-option][data-selected='true'] [data-toggle-icon] {
-  @apply text-surface-z1;
+  @apply text-on-primary;
 }

package/src/zen-sumi/toolbar.css

@@ -15,19 +15,19 @@
 
 [data-style='zen-sumi'] [data-toolbar][data-toolbar-position='top'],
 [data-style='zen-sumi'] [data-toolbar]:not([data-toolbar-position]) {
-  @apply border-surface-z2 border-b;
+  @apply border-paper-mute border-b;
 }
 
 [data-style='zen-sumi'] [data-toolbar][data-toolbar-position='bottom'] {
-  @apply border-surface-z2 border-t;
+  @apply border-paper-mute border-t;
 }
 
 [data-style='zen-sumi'] [data-toolbar][data-toolbar-position='left'] {
-  @apply border-surface-z2 border-r;
+  @apply border-paper-mute border-r;
 }
 
 [data-style='zen-sumi'] [data-toolbar][data-toolbar-position='right'] {
-  @apply border-surface-z2 border-l;
+  @apply border-paper-mute border-l;
 }
 
 /* =============================================================================
@@ -35,26 +35,26 @@
    ============================================================================= */
 
 [data-style='zen-sumi'] [data-toolbar-item] {
-  @apply text-ink-z4;
+  @apply text-ink-soft;
 }
 
 [data-style='zen-sumi'] [data-toolbar-item]:hover:not(:disabled):not([data-disabled='true']) {
-  @apply bg-surface-z2 text-ink-z1 bg-none;
+  @apply bg-paper-mute text-ink-mute bg-none;
 }
 
 [data-style='zen-sumi']
   [data-toolbar-item]:focus-visible:not(:disabled):not([data-disabled='true']) {
-  @apply text-ink-z1 bg-none outline-none;
+  @apply text-ink-mute bg-none outline-none;
   box-shadow: inset 0 0 0 1px var(--color-surface-z4);
 }
 
 /* Active/pressed state */
 [data-style='zen-sumi'] [data-toolbar-item][data-active='true'] {
-  @apply text-primary-z5 bg-none;
+  @apply text-primary bg-none;
 }
 
 [data-style='zen-sumi'] [data-toolbar-item][data-active='true']:hover:not(:disabled) {
-  @apply text-primary-z6 bg-none;
+  @apply text-primary bg-none;
 }
 
 /* =============================================================================
@@ -62,15 +62,15 @@
    ============================================================================= */
 
 [data-style='zen-sumi'] [data-toolbar-item] [data-toolbar-icon] {
-  @apply text-ink-z5;
+  @apply text-paper-edge;
 }
 
 [data-style='zen-sumi'] [data-toolbar-item]:hover:not(:disabled) [data-toolbar-icon] {
-  @apply text-ink-z2;
+  @apply text-ink-mute;
 }
 
 [data-style='zen-sumi'] [data-toolbar-item][data-active='true'] [data-toolbar-icon] {
-  @apply text-primary-z5;
+  @apply text-primary;
 }
 
 /* =============================================================================
@@ -78,9 +78,9 @@
    ============================================================================= */
 
 [data-style='zen-sumi'] [data-toolbar-separator] {
-  @apply bg-surface-z2 bg-none;
+  @apply bg-paper-mute bg-none;
 }
 
 [data-style='zen-sumi'] [data-toolbar-divider] {
-  @apply bg-surface-z2 bg-none;
+  @apply bg-paper-mute bg-none;
 }

package/src/zen-sumi/tree.css

@@ -18,11 +18,11 @@
    ============================================================================= */
 
 [data-style='zen-sumi'] [data-tree-toggle-btn] {
-  @apply text-surface-z4;
+  @apply text-paper-edge;
 }
 
 [data-style='zen-sumi'] [data-tree-toggle-btn]:hover {
-  @apply text-ink-z4 bg-none;
+  @apply text-ink-soft bg-none;
 }
 
 /* =============================================================================
@@ -30,12 +30,12 @@
    ============================================================================= */
 
 [data-style='zen-sumi'] [data-tree-item-content] {
-  @apply text-ink-z3;
+  @apply text-ink-soft;
 }
 
 [data-style='zen-sumi'] [data-tree-item-content]:hover:not(:disabled),
 [data-style='zen-sumi'] [data-tree-item-content]:focus:not(:disabled) {
-  @apply bg-surface-z2 text-ink-z1 bg-none outline-none;
+  @apply bg-paper-mute text-ink-mute bg-none outline-none;
 }
 
 /* Focus visible for keyboard navigation */
@@ -46,11 +46,11 @@
 
 /* Active/selected state */
 [data-style='zen-sumi'] [data-tree-item-content][data-active='true'] {
-  @apply text-ink-z1 bg-surface-z2 bg-none;
+  @apply text-ink-mute bg-paper-mute bg-none;
 }
 
 [data-style='zen-sumi'] [data-tree-item-content][data-active='true']:hover:not(:disabled) {
-  @apply bg-surface-z3 bg-none;
+  @apply bg-paper-mute bg-none;
 }
 
 /* Reset rokkit gradients */
@@ -73,31 +73,31 @@
    ============================================================================= */
 
 [data-style='zen-sumi'] [data-tree-item-content] [data-item-icon] {
-  @apply text-ink-z5;
+  @apply text-paper-edge;
 }
 
 [data-style='zen-sumi'] [data-tree-item-content]:hover:not(:disabled) [data-item-icon] {
-  @apply text-ink-z4;
+  @apply text-ink-soft;
 }
 
 [data-style='zen-sumi'] [data-tree-item-content][data-active='true'] [data-item-icon] {
-  @apply text-primary-z5;
+  @apply text-primary;
 }
 
 [data-style='zen-sumi'] [data-tree-item-content] [data-item-description] {
-  @apply text-ink-z5;
+  @apply text-paper-edge;
 }
 
 [data-style='zen-sumi'] [data-tree-item-content][data-active='true'] [data-item-description] {
-  @apply text-ink-z4;
+  @apply text-ink-soft;
 }
 
 [data-style='zen-sumi'] [data-tree-item-content] [data-item-badge] {
-  @apply text-ink-z4 border-surface-z3 border bg-transparent bg-none;
+  @apply text-ink-soft border-paper-mute border bg-transparent bg-none;
 }
 
 [data-style='zen-sumi'] [data-tree-item-content][data-active='true'] [data-item-badge] {
-  @apply text-ink-z2 border-surface-z4 bg-none;
+  @apply text-ink-mute border-paper-edge bg-none;
 }
 
 [data-style='zen-sumi']
@@ -119,19 +119,19 @@
    ============================================================================= */
 
 [data-style='zen-sumi'] [data-tree-node][data-selected='true'] [data-tree-item-content] {
-  @apply text-primary-z6 border-primary-z3 border-l-2;
+  @apply text-primary border-primary border-l-2;
 }
 
 [data-style='zen-sumi']
   [data-tree]:focus-within
   [data-tree-node][data-selected='true']
   [data-tree-item-content] {
-  @apply text-primary-z7 border-primary-z4 border-l-2;
+  @apply text-primary border-primary border-l-2;
 }
 
 [data-style='zen-sumi']
   [data-tree-node][data-selected='true']
   [data-tree-item-content]
   [data-item-icon] {
-  @apply text-primary-z5;
+  @apply text-primary;
 }