@rokkit/themes 1.1.17 → 1.1.18

package/dist/zen-sumi.css

@@ -36,23 +36,27 @@
 
 [data-style='zen-sumi'] [data-button][data-style='default'][data-variant='primary'],
 [data-style='zen-sumi'] [data-button]:not([data-style])[data-variant='primary'] {
-  border-color:transparent;background-image:none;background-color:var(--primary);color:var(--on-primary);
+  border-color:transparent;background-image:none;color:var(--on-primary);
+  background-color: var(--primary);
 }
 
 [data-style='zen-sumi'] [data-button][data-style='default'][data-variant='secondary'],
 [data-style='zen-sumi'] [data-button]:not([data-style])[data-variant='secondary'] {
-  border-color:transparent;background-image:none;background-color:var(--accent);color:var(--on-primary);
+  border-color:transparent;background-image:none;color:var(--on-primary);
+  background-color: var(--accent);
 }
 
 [data-style='zen-sumi'] [data-button][data-style='default'][data-variant='accent'],
 [data-style='zen-sumi'] [data-button]:not([data-style])[data-variant='accent'] {
-  border-color:transparent;background-image:none;--un-text-opacity:1;color:color-mix(in srgb, var(--color-accent-50) calc(var(--un-text-opacity) * 100%), transparent);background-color:var(--accent);
-}[data-mode="dark"][data-style="zen-sumi"] [data-button][data-style="default"][data-variant="accent"],[data-mode="dark"] [data-style="zen-sumi"] [data-button][data-style="default"][data-variant="accent"],[data-mode="dark"][data-style="zen-sumi"] [data-button]:not([data-style])[data-variant="accent"],[data-mode="dark"] [data-style="zen-sumi"] [data-button]:not([data-style])[data-variant="accent"]{--un-text-opacity:1;color:color-mix(in srgb, var(--color-accent-50) calc(var(--un-text-opacity) * 100%), transparent);}
+  border-color:transparent;background-image:none;--un-text-opacity:1;color:rgb(22 22 22 / var(--un-text-opacity));
+  background-color: var(--accent);
+}
 
 [data-style='zen-sumi'] [data-button][data-style='default'][data-variant='danger'],
 [data-style='zen-sumi'] [data-button]:not([data-style])[data-variant='danger'] {
-  border-color:transparent;background-image:none;--un-text-opacity:1;color:color-mix(in srgb, var(--color-danger-50) calc(var(--un-text-opacity) * 100%), transparent);background-color:var(--danger);
-}[data-mode="dark"][data-style="zen-sumi"] [data-button][data-style="default"][data-variant="danger"],[data-mode="dark"] [data-style="zen-sumi"] [data-button][data-style="default"][data-variant="danger"],[data-mode="dark"][data-style="zen-sumi"] [data-button]:not([data-style])[data-variant="danger"],[data-mode="dark"] [data-style="zen-sumi"] [data-button]:not([data-style])[data-variant="danger"]{--un-text-opacity:1;color:color-mix(in srgb, var(--color-danger-50) calc(var(--un-text-opacity) * 100%), transparent);}
+  border-color:transparent;background-image:none;--un-text-opacity:1;color:rgb(22 22 22 / var(--un-text-opacity));
+  background-color: var(--danger);
+}
 
 /* =============================================================================
    Outline Style
@@ -119,20 +123,24 @@
 }
 
 [data-style='zen-sumi'] [data-button][data-style='gradient'][data-variant='primary'] {
-  background-image:none;background-color:var(--primary);color:var(--on-primary);
+  background-image:none;color:var(--on-primary);
+  background-color: var(--primary);
 }
 
 [data-style='zen-sumi'] [data-button][data-style='gradient'][data-variant='secondary'] {
-  background-image:none;background-color:var(--accent);color:var(--on-primary);
+  background-image:none;color:var(--on-primary);
+  background-color: var(--accent);
 }
 
 [data-style='zen-sumi'] [data-button][data-style='gradient'][data-variant='accent'] {
-  background-image:none;--un-text-opacity:1;color:color-mix(in srgb, var(--color-accent-50) calc(var(--un-text-opacity) * 100%), transparent);background-color:var(--accent);
-}[data-mode="dark"][data-style="zen-sumi"] [data-button][data-style="gradient"][data-variant="accent"],[data-mode="dark"] [data-style="zen-sumi"] [data-button][data-style="gradient"][data-variant="accent"]{--un-text-opacity:1;color:color-mix(in srgb, var(--color-accent-50) calc(var(--un-text-opacity) * 100%), transparent);}
+  background-image:none;--un-text-opacity:1;color:rgb(22 22 22 / var(--un-text-opacity));
+  background-color: var(--accent);
+}
 
 [data-style='zen-sumi'] [data-button][data-style='gradient'][data-variant='danger'] {
-  background-image:none;--un-text-opacity:1;color:color-mix(in srgb, var(--color-danger-50) calc(var(--un-text-opacity) * 100%), transparent);background-color:var(--danger);
-}[data-mode="dark"][data-style="zen-sumi"] [data-button][data-style="gradient"][data-variant="danger"],[data-mode="dark"] [data-style="zen-sumi"] [data-button][data-style="gradient"][data-variant="danger"]{--un-text-opacity:1;color:color-mix(in srgb, var(--color-danger-50) calc(var(--un-text-opacity) * 100%), transparent);}
+  background-image:none;--un-text-opacity:1;color:rgb(22 22 22 / var(--un-text-opacity));
+  background-color: var(--danger);
+}
 
 /* =============================================================================
    Link Style
@@ -304,7 +312,7 @@
    ============================================================================= */
 
 [data-style='zen-sumi'] [data-tabs-trigger] {
-  border-width:0px;background-color:transparent;color:var(--ink-soft);
+  border-width:0px;background-color:transparent;color:var(--ink-mute);
   font-weight: 400;
   border-radius: var(--radius-sm, 0.125rem);
   transition:
@@ -313,7 +321,7 @@
 }
 
 [data-style='zen-sumi'] [data-tabs-trigger]:hover:not(:disabled):not([data-disabled]) {
-  background-color:var(--paper-mute);color:var(--ink-mute);
+  background-color:var(--paper-mute);color:var(--ink);
 }
 
 [data-style='zen-sumi'] [data-tabs-trigger][data-selected] {
@@ -342,7 +350,7 @@
 }
 
 [data-style='zen-sumi'] [data-tabs-trigger]:hover:not(:disabled) [data-tabs-icon] {
-  color:var(--ink-soft);
+  color:var(--ink-mute);
 }
 
 [data-style='zen-sumi'] [data-tabs-trigger][data-selected] [data-tabs-icon] {
@@ -380,7 +388,7 @@
    ============================================================================= */
 
 [data-style='zen-sumi'] [data-toggle-option] {
-  border-width:0px;border-color:transparent;border-style:solid;color:var(--ink-soft);
+  border-width:0px;border-color:transparent;border-style:solid;color:var(--ink-mute);
 }
 
 [data-style='zen-sumi'] [data-toggle-option]:hover:not(:disabled):not([data-disabled='true']),
@@ -390,7 +398,8 @@
 
 /* Selected state — primary (shu) fill */
 [data-style='zen-sumi'] [data-toggle-option][data-selected='true'] {
-  background-image:none;background-color:var(--primary);color:var(--on-primary);
+  background-image:none;color:var(--on-primary);
+  background-color: var(--primary);
   font-weight: 500;
 }
 
@@ -405,7 +414,7 @@
  * matches the option label, and `paper` for selected contrasts cleanly
  * against the ink fill. */
 [data-style='zen-sumi'] [data-toggle-option] [data-toggle-icon] {
-  color:var(--ink-soft);
+  color:var(--ink-mute);
 }
 
 [data-style='zen-sumi'] [data-toggle-option]:hover:not(:disabled) [data-toggle-icon],
@@ -425,7 +434,7 @@
    ============================================================================= */
 
 [data-style='zen-sumi'] [data-toggle][data-toggle-variant='button'] {
-  border-color:transparent;background-color:transparent;color:var(--ink-soft);
+  border-color:transparent;background-color:transparent;color:var(--ink-mute);
   background-image: none;
 }
 
@@ -435,7 +444,7 @@
 }
 
 [data-style='zen-sumi'] [data-toggle][data-toggle-variant='button'] [data-toggle-icon] {
-  color:var(--ink-soft);
+  color:var(--ink-mute);
 }
 
 [data-style='zen-sumi'] [data-toggle][data-toggle-variant='button']:hover:not(:disabled) [data-toggle-icon],
@@ -499,12 +508,12 @@
    ============================================================================= */
 
 [data-style='zen-sumi'] [data-list] [data-list-item] {
-  border-width:0px;border-color:transparent;border-style:solid;background-color:transparent;color:var(--ink-soft);
+  border-width:0px;border-color:transparent;border-style:solid;background-color:transparent;color:var(--ink-mute);
 }
 
 [data-style='zen-sumi'] [data-list] a[data-list-item],
 [data-style='zen-sumi'] [data-list] button[data-list-item] {
-  color:var(--ink-soft);
+  color:var(--ink-mute);
 }
 
 /* Hover and focus — subtle paper wash */
@@ -538,12 +547,12 @@
    ============================================================================= */
 
 [data-style='zen-sumi'] [data-list] [data-list-item] [data-item-icon] {
-  color:var(--paper-edge);
+  color:var(--ink-mute);
 }
 
 [data-style='zen-sumi'] [data-list] [data-list-item]:hover:not(:disabled) [data-item-icon],
 [data-style='zen-sumi'] [data-list] [data-list-item]:focus:not(:disabled) [data-item-icon] {
-  color:var(--ink-soft);
+  color:var(--ink-mute);
 }
 
 [data-style='zen-sumi'] [data-list] [data-list-item][data-active='true'] [data-item-icon] {
@@ -551,15 +560,15 @@
 }
 
 [data-style='zen-sumi'] [data-list] [data-list-item] [data-item-description] {
-  color:var(--paper-edge);
+  color:var(--ink-mute);
 }
 
 [data-style='zen-sumi'] [data-list] [data-list-item][data-active='true'] [data-item-description] {
-  color:var(--ink-soft);
+  color:var(--ink-mute);
 }
 
 [data-style='zen-sumi'] [data-list] [data-list-item] [data-item-badge] {
-  border-width:1px;background-color:transparent;background-image:none;color:var(--ink-soft);border-color:var(--paper-mute);
+  border-width:1px;background-color:transparent;background-image:none;color:var(--ink-mute);border-color:var(--paper-mute);
 }
 
 [data-style='zen-sumi'] [data-list] [data-list-item][data-active='true'] [data-item-badge] {
@@ -571,12 +580,12 @@
    ============================================================================= */
 
 [data-style='zen-sumi'] [data-list] [data-list-group] {
-  color:var(--paper-edge);
+  color:var(--ink-mute);
 }
 
 [data-style='zen-sumi'] [data-list] [data-list-group]:hover:not(:disabled),
 [data-style='zen-sumi'] [data-list] [data-list-group]:focus:not(:disabled) {
-  background-image:none;color:var(--ink-soft);
+  background-image:none;color:var(--ink-mute);
 }
 
 /* =============================================================================
@@ -614,6 +623,17 @@
  * No bg fill on active — ink is in typography weight + icon color only.
  */
 
+/* =============================================================================
+   Connector Lines — hairline tone (mode-aware), not currentColor (which
+   renders white in dark mode and greyish in light).
+   ============================================================================= */
+
+[data-style='zen-sumi'] [data-tree]:not([data-line-style='none']) [data-connector-v],
+[data-style='zen-sumi'] [data-tree]:not([data-line-style='none']) [data-connector-h],
+[data-style='zen-sumi'] [data-tree]:not([data-line-style='none']) [data-connector-corner] {
+  border-color:var(--paper-edge);
+}
+
 /* =============================================================================
    Tree Container
    ============================================================================= */
@@ -627,11 +647,11 @@
    ============================================================================= */
 
 [data-style='zen-sumi'] [data-tree-toggle-btn] {
-  color:var(--paper-edge);
+  color:var(--ink-mute);
 }
 
 [data-style='zen-sumi'] [data-tree-toggle-btn]:hover {
-  background-image:none;color:var(--ink-soft);
+  background-image:none;color:var(--ink-mute);
 }
 
 /* =============================================================================
@@ -639,7 +659,7 @@
    ============================================================================= */
 
 [data-style='zen-sumi'] [data-tree-item-content] {
-  color:var(--ink-soft);
+  color:var(--ink-mute);
 }
 
 [data-style='zen-sumi'] [data-tree-item-content]:hover:not(:disabled),
@@ -682,11 +702,11 @@
    ============================================================================= */
 
 [data-style='zen-sumi'] [data-tree-item-content] [data-item-icon] {
-  color:var(--paper-edge);
+  color:var(--ink-mute);
 }
 
 [data-style='zen-sumi'] [data-tree-item-content]:hover:not(:disabled) [data-item-icon] {
-  color:var(--ink-soft);
+  color:var(--ink-mute);
 }
 
 [data-style='zen-sumi'] [data-tree-item-content][data-active='true'] [data-item-icon] {
@@ -694,15 +714,15 @@
 }
 
 [data-style='zen-sumi'] [data-tree-item-content] [data-item-description] {
-  color:var(--paper-edge);
+  color:var(--ink-mute);
 }
 
 [data-style='zen-sumi'] [data-tree-item-content][data-active='true'] [data-item-description] {
-  color:var(--ink-soft);
+  color:var(--ink-mute);
 }
 
 [data-style='zen-sumi'] [data-tree-item-content] [data-item-badge] {
-  border-width:1px;background-color:transparent;background-image:none;color:var(--ink-soft);border-color:var(--paper-mute);
+  border-width:1px;background-color:transparent;background-image:none;color:var(--ink-mute);border-color:var(--paper-mute);
 }
 
 [data-style='zen-sumi'] [data-tree-item-content][data-active='true'] [data-item-badge] {
@@ -745,6 +765,36 @@
   color:var(--primary);
 }
 
+/**
+ * Divider - Zen-Sumi Theme Styles
+ *
+ * Hairline ink-on-paper rule. The base leaves the line uncolored, so without
+ * this the divider is invisible — pin it to the paper-edge hairline tone.
+ */
+
+[data-style='zen-sumi'] [data-divider][data-orientation='horizontal']::before,
+[data-style='zen-sumi'] [data-divider][data-orientation='horizontal']::after {
+  background-color:var(--paper-edge);
+}
+
+[data-style='zen-sumi'] [data-divider][data-orientation='vertical']::before,
+[data-style='zen-sumi'] [data-divider][data-orientation='vertical']::after {
+  background-color:var(--paper-edge);
+}
+
+/* No-label divider — color the element itself (no ::before/::after spacers). */
+[data-style='zen-sumi'] [data-divider][data-orientation='horizontal']:not(:has([data-divider-label])) {
+  background-color:var(--paper-edge);
+}
+
+[data-style='zen-sumi'] [data-divider][data-orientation='vertical']:not(:has([data-divider-label])) {
+  background-color:var(--paper-edge);
+}
+
+[data-style='zen-sumi'] [data-divider-label] {
+  color:var(--ink-mute);
+}
+
 /**
  * Select - Zen-Sumi Theme Styles
  *
@@ -758,7 +808,7 @@
    ============================================================================= */
 
 [data-style='zen-sumi'] [data-select-trigger] {
-  border-width:1px;background-color:transparent;background-image:none;color:var(--ink-soft);border-color:var(--paper-mute);
+  border-width:1px;background-color:transparent;background-image:none;color:var(--ink-mute);border-color:var(--paper-mute);
 }
 
 [data-style='zen-sumi'] [data-select-trigger]:hover:not(:disabled) {
@@ -779,7 +829,7 @@
    ============================================================================= */
 
 [data-style='zen-sumi'] [data-select-placeholder] {
-  color:var(--paper-edge);
+  color:var(--ink-mute);
 }
 
 /* =============================================================================
@@ -787,11 +837,11 @@
    ============================================================================= */
 
 [data-style='zen-sumi'] [data-select-arrow] {
-  color:var(--paper-edge);
+  color:var(--ink-mute);
 }
 
 [data-style='zen-sumi'] [data-select-trigger]:hover:not(:disabled) [data-select-arrow] {
-  color:var(--paper-edge);
+  color:var(--ink-mute);
 }
 
 /* =============================================================================
@@ -799,11 +849,11 @@
    ============================================================================= */
 
 [data-style='zen-sumi'] [data-select-tag] {
-  border-width:1px;background-color:transparent;background-image:none;color:var(--ink-soft);border-color:var(--paper-mute);
+  border-width:1px;background-color:transparent;background-image:none;color:var(--ink-mute);border-color:var(--paper-mute);
 }
 
 [data-style='zen-sumi'] [data-select-tag-remove] {
-  color:var(--paper-edge);
+  color:var(--ink-mute);
 }
 
 [data-style='zen-sumi'] [data-select-tag-remove]:hover {
@@ -824,7 +874,7 @@
    ============================================================================= */
 
 [data-style='zen-sumi'] [data-select-option] {
-  border-width:0px;border-color:transparent;border-style:solid;color:var(--ink-soft);
+  border-width:0px;border-color:transparent;border-style:solid;color:var(--ink-mute);
 }
 
 [data-style='zen-sumi'] [data-select-option]:hover:not(:disabled),
@@ -859,7 +909,7 @@
 
 /* Item elements */
 [data-style='zen-sumi'] [data-select-option] [data-item-description] {
-  color:var(--paper-edge);
+  color:var(--ink-mute);
 }
 
 [data-style='zen-sumi'] [data-select-option][data-selected='true'] [data-item-description] {
@@ -871,7 +921,7 @@
    ============================================================================= */
 
 [data-style='zen-sumi'] [data-select-group-label] {
-  color:var(--paper-edge);
+  color:var(--ink-mute);
 }
 
 /* =============================================================================
@@ -899,11 +949,11 @@
 }
 
 [data-style='zen-sumi'] [data-select-filter-input]::placeholder {
-  color:var(--ink-soft);
+  color:var(--ink-mute);
 }
 
 [data-style='zen-sumi'] [data-select-empty] {
-  color:var(--paper-edge);
+  color:var(--ink-mute);
 }
 
 /**
@@ -918,7 +968,7 @@
    ============================================================================= */
 
 [data-style='zen-sumi'] [data-menu-trigger] {
-  border-width:1px;background-color:transparent;background-image:none;border-color:var(--paper-mute);color:var(--ink-soft);
+  border-width:1px;background-color:transparent;background-image:none;border-color:var(--paper-mute);color:var(--ink-mute);
 }
 
 [data-style='zen-sumi'] [data-menu-trigger]:hover:not(:disabled) {
@@ -936,15 +986,15 @@
 
 /* Trigger elements */
 [data-style='zen-sumi'] [data-menu-trigger] [data-menu-icon] {
-  color:var(--paper-edge);
+  color:var(--ink-mute);
 }
 
 [data-style='zen-sumi'] [data-menu-trigger]:hover:not(:disabled) [data-menu-icon] {
-  color:var(--ink-soft);
+  color:var(--ink-mute);
 }
 
 [data-style='zen-sumi'] [data-menu-trigger] [data-menu-arrow] {
-  color:var(--paper-edge);
+  color:var(--ink-mute);
 }
 
 /* =============================================================================
@@ -961,7 +1011,7 @@
    ============================================================================= */
 
 [data-style='zen-sumi'] [data-menu-item] {
-  border-width:0px;border-color:transparent;border-style:solid;color:var(--ink-soft);
+  border-width:0px;border-color:transparent;border-style:solid;color:var(--ink-mute);
 }
 
 [data-style='zen-sumi'] [data-menu-item]:hover:not(:disabled),
@@ -971,15 +1021,15 @@
 
 /* Item elements */
 [data-style='zen-sumi'] [data-menu-item] [data-item-icon] {
-  color:var(--paper-edge);
+  color:var(--ink-mute);
 }
 
 [data-style='zen-sumi'] [data-menu-item]:hover:not(:disabled) [data-item-icon] {
-  color:var(--ink-soft);
+  color:var(--ink-mute);
 }
 
 [data-style='zen-sumi'] [data-menu-item] [data-item-description] {
-  color:var(--paper-edge);
+  color:var(--ink-mute);
 }
 
 /* =============================================================================
@@ -987,7 +1037,7 @@
    ============================================================================= */
 
 [data-style='zen-sumi'] [data-menu-group] {
-  color:var(--paper-edge);
+  color:var(--ink-mute);
 }
 
 /* =============================================================================
@@ -1006,7 +1056,7 @@
  */
 
 [data-style='zen-sumi'] [data-dropdown-trigger] {
-  border-width:1px;background-color:transparent;background-image:none;border-color:var(--paper-mute);color:var(--ink-soft);
+  border-width:1px;background-color:transparent;background-image:none;border-color:var(--paper-mute);color:var(--ink-mute);
 }
 
 [data-style='zen-sumi'] [data-dropdown-trigger]:hover:not(:disabled) {
@@ -1023,11 +1073,11 @@
 }
 
 [data-style='zen-sumi'] [data-dropdown-trigger] [data-dropdown-icon] {
-  color:var(--paper-edge);
+  color:var(--ink-mute);
 }
 
 [data-style='zen-sumi'] [data-dropdown-trigger] [data-dropdown-arrow] {
-  color:var(--paper-edge);
+  color:var(--ink-mute);
 }
 
 [data-style='zen-sumi'] [data-dropdown-panel] {
@@ -1036,7 +1086,7 @@
 }
 
 [data-style='zen-sumi'] [data-dropdown-option] {
-  color:var(--ink-soft);
+  color:var(--ink-mute);
 }
 
 [data-style='zen-sumi'] [data-dropdown-option]:hover:not(:disabled),
@@ -1305,7 +1355,7 @@
    ============================================================================= */
 
 [data-style='zen-sumi'] [data-table-header] th {
-  border-bottom-width:1px;background-color:transparent;color:var(--ink-soft);border-color:var(--paper-mute);
+  border-bottom-width:1px;background-color:transparent;color:var(--ink-mute);border-color:var(--paper-mute);
   font-size: 0.6875rem;
   font-weight: 600;
   letter-spacing: 0.05em;
@@ -1339,7 +1389,7 @@
    ============================================================================= */
 
 [data-style='zen-sumi'] [data-table-caption] {
-  color:var(--ink-soft);
+  color:var(--ink-mute);
 }
 
 /* =============================================================================
@@ -1347,7 +1397,7 @@
    ============================================================================= */
 
 [data-style='zen-sumi'] [data-table-row] {
-  border-bottom-width:1px;color:var(--ink-soft);border-color:var(--paper-mute);
+  border-bottom-width:1px;color:var(--ink-mute);border-color:var(--paper-mute);
 }
 
 [data-style='zen-sumi'] [data-table-row]:hover {
@@ -1386,7 +1436,7 @@
    ============================================================================= */
 
 [data-style='zen-sumi'] [data-table-empty] {
-  color:var(--ink-soft);
+  color:var(--ink-mute);
 }
 
 /* =============================================================================
@@ -1394,7 +1444,7 @@
    ============================================================================= */
 
 [data-style='zen-sumi'] [data-table-cell] [data-cell-icon] {
-  color:var(--ink-soft);
+  color:var(--ink-mute);
 }
 
 [data-style='zen-sumi'] [data-table-row][data-selected='true'] [data-cell-icon] {
@@ -1411,7 +1461,7 @@
   }
 
   [data-style='zen-sumi'] [data-table-responsive] [data-table-cell]::before {
-    color:var(--ink-soft);
+    color:var(--ink-mute);
   }
 
   [data-style='zen-sumi']
@@ -1586,11 +1636,11 @@
 }
 
 [data-style='zen-sumi'] [data-timeline-item][data-completed] [data-timeline-circle] {
-  border-color:var(--primary);color:var(--primary);
+  border-color:var(--primary);color:var(--ink);
 }
 
 [data-style='zen-sumi'] [data-timeline-item][data-active] [data-timeline-circle] {
-  border-color:var(--primary);color:var(--primary);
+  border-color:var(--primary);color:var(--ink);
 }
 
 /* =============================================================================
@@ -1602,7 +1652,7 @@
 }
 
 [data-style='zen-sumi'] [data-timeline-item][data-completed] [data-timeline-connector] {
-  background-color:var(--primary);
+  background-color: var(--primary);
 }
 
 /* =============================================================================
@@ -1796,8 +1846,8 @@
 }
 
 [data-style='zen-sumi'] [data-card][data-variant='primary'] [data-card-body] {
-  color:color-mix(in srgb, var(--color-primary-50) calc(0.8 * 100%), transparent);
-}[data-mode="dark"][data-style="zen-sumi"] [data-card][data-variant="primary"] [data-card-body],[data-mode="dark"] [data-style="zen-sumi"] [data-card][data-variant="primary"] [data-card-body]{color:color-mix(in srgb, var(--color-primary-50) calc(0.8 * 100%), transparent);}
+  color:rgb(22 22 22 / 0.8);
+}
 
 /* Secondary */
 [data-style='zen-sumi'] [data-card][data-variant='secondary'] {
@@ -1811,8 +1861,8 @@
 }
 
 [data-style='zen-sumi'] [data-card][data-variant='secondary'] [data-card-body] {
-  color:color-mix(in srgb, var(--color-primary-50) calc(0.8 * 100%), transparent);
-}[data-mode="dark"][data-style="zen-sumi"] [data-card][data-variant="secondary"] [data-card-body],[data-mode="dark"] [data-style="zen-sumi"] [data-card][data-variant="secondary"] [data-card-body]{color:color-mix(in srgb, var(--color-primary-50) calc(0.8 * 100%), transparent);}
+  color:rgb(22 22 22 / 0.8);
+}
 
 /* Tertiary — recessed surface, lighter border */
 [data-style='zen-sumi'] [data-card][data-variant='tertiary'] {

package/package.json

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

package/src/base/stepper.css

@@ -47,9 +47,10 @@
 }
 
 [data-stepper-step][data-completed] [data-stepper-circle] {
+  /* solid brand fill + on-primary text (dark, reads on the bright 500). */
   background-color: var(--primary);
   border-color: var(--primary);
-  color: var(--paper);
+  color: var(--on-primary);
 }
 
 /* Check glyph inside a completed circle follows the circle's color
@@ -60,7 +61,9 @@
 
 [data-stepper-step][data-active] [data-stepper-circle] {
   border-color: var(--primary);
-  color: var(--primary);
+  /* ink number (not saffron) so it reads on the page; the saffron border + ring
+     keep the active accent */
+  color: var(--ink);
   @apply ring-primary/20 ring-3;
 }
 
@@ -71,9 +74,12 @@
   flex: 1;
   height: 2px;
   min-width: 2rem;
-  align-self: center;
-  /* Vertically center with the circle (half of 2.5rem) */
-  margin-top: 1.25rem;
+  /* Align to the circle's vertical center, NOT the full step height. The step
+     is `circle + label below`, so `align-self: center` drops the line into the
+     label gap (reads as bottom-aligned). Pin to the top and offset by the
+     circle's radius (1.25rem) minus half the line height. */
+  align-self: flex-start;
+  margin-top: calc(1.25rem - 1px);
   transition: background-color 0.2s ease;
 }
 

package/src/base/table.css

@@ -66,7 +66,10 @@
   display: inline-block;
   vertical-align: middle;
   margin-left: 0.25rem;
-  opacity: 0.4;
+  /* Unsorted hint — visible enough to read as "sortable" against a tinted
+     header, but still clearly secondary to the active (sorted) state below.
+     0.4 was too faint (the glyph all but vanished on dark headers). */
+  opacity: 0.65;
   transition: opacity 150ms ease;
 }