@rokkit/themes 1.1.17 → 1.1.18

package/dist/rokkit.css

@@ -54,16 +54,16 @@
 /* Accent variant */
 [data-style='rokkit'] [data-button][data-style='default'][data-variant='accent'],
 [data-style='rokkit'] [data-button]:not([data-style])[data-variant='accent'] {
-  border-width:1px;--un-text-opacity:1;color:color-mix(in srgb, var(--color-accent-50) calc(var(--un-text-opacity) * 100%), transparent);border-color:var(--accent);
+  border-width:1px;--un-text-opacity:1;color:rgb(22 22 22 / var(--un-text-opacity));border-color:var(--accent);
   background: linear-gradient(to bottom, var(--accent), var(--accent));
-}[data-mode="dark"][data-style="rokkit"] [data-button][data-style="default"][data-variant="accent"],[data-mode="dark"] [data-style="rokkit"] [data-button][data-style="default"][data-variant="accent"],[data-mode="dark"][data-style="rokkit"] [data-button]:not([data-style])[data-variant="accent"],[data-mode="dark"] [data-style="rokkit"] [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);}
+}
 
 /* Danger variant */
 [data-style='rokkit'] [data-button][data-style='default'][data-variant='danger'],
 [data-style='rokkit'] [data-button]:not([data-style])[data-variant='danger'] {
-  border-width:1px;--un-text-opacity:1;color:color-mix(in srgb, var(--color-danger-50) calc(var(--un-text-opacity) * 100%), transparent);border-color:var(--danger);
+  border-width:1px;--un-text-opacity:1;color:rgb(22 22 22 / var(--un-text-opacity));border-color:var(--danger);
   background: linear-gradient(to bottom, var(--danger), var(--danger));
-}[data-mode="dark"][data-style="rokkit"] [data-button][data-style="default"][data-variant="danger"],[data-mode="dark"] [data-style="rokkit"] [data-button][data-style="default"][data-variant="danger"],[data-mode="dark"][data-style="rokkit"] [data-button]:not([data-style])[data-variant="danger"],[data-mode="dark"] [data-style="rokkit"] [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);}
+}
 
 /* =============================================================================
    Outline Style
@@ -137,12 +137,12 @@
 }
 
 [data-style='rokkit'] [data-button][data-style='gradient'][data-variant='accent'] {
-  --un-gradient-from-position:0%;--un-gradient-from:color-mix(in srgb, var(--color-accent) calc(1 * 100%), transparent) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:color-mix(in srgb, var(--color-accent) calc(1 * 100%), transparent) var(--un-gradient-to-position);--un-gradient-shape:to bottom right in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));--un-text-opacity:1;color:color-mix(in srgb, var(--color-accent-50) calc(var(--un-text-opacity) * 100%), transparent);
-}[data-mode="dark"][data-style="rokkit"] [data-button][data-style="gradient"][data-variant="accent"],[data-mode="dark"] [data-style="rokkit"] [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);}
+  --un-gradient-from-position:0%;--un-gradient-from:color-mix(in srgb, var(--color-accent) calc(1 * 100%), transparent) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:color-mix(in srgb, var(--color-accent) calc(1 * 100%), transparent) var(--un-gradient-to-position);--un-gradient-shape:to bottom right in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));--un-text-opacity:1;color:rgb(22 22 22 / var(--un-text-opacity));
+}
 
 [data-style='rokkit'] [data-button][data-style='gradient'][data-variant='danger'] {
-  --un-gradient-from-position:0%;--un-gradient-from:color-mix(in srgb, var(--color-danger) calc(1 * 100%), transparent) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:color-mix(in srgb, var(--color-danger) calc(1 * 100%), transparent) var(--un-gradient-to-position);--un-gradient-shape:to bottom right in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));--un-text-opacity:1;color:color-mix(in srgb, var(--color-danger-50) calc(var(--un-text-opacity) * 100%), transparent);
-}[data-mode="dark"][data-style="rokkit"] [data-button][data-style="gradient"][data-variant="danger"],[data-mode="dark"] [data-style="rokkit"] [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);}
+  --un-gradient-from-position:0%;--un-gradient-from:color-mix(in srgb, var(--color-danger) calc(1 * 100%), transparent) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:color-mix(in srgb, var(--color-danger) calc(1 * 100%), transparent) var(--un-gradient-to-position);--un-gradient-shape:to bottom right in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));--un-text-opacity:1;color:rgb(22 22 22 / var(--un-text-opacity));
+}
 
 [data-style='rokkit']
   [data-button][data-style='gradient']:hover:not(:disabled):not([data-disabled]) {
@@ -242,7 +242,7 @@
   [data-button][data-style='ghost']:hover:not(:disabled):not(
     [data-disabled]
   )[data-variant='primary'] {
-  background-color:var(--primary);
+  background-color: var(--primary);
 }
 
 [data-style='rokkit']
@@ -501,7 +501,7 @@
    ============================================================================= */
 
 [data-style='rokkit'] [data-tabs-trigger] [data-tabs-icon] {
-  color:var(--ink-soft);
+  color:var(--ink-mute);
 }
 
 [data-style='rokkit'] [data-tabs-trigger]:hover:not(:disabled) [data-tabs-icon] {
@@ -545,7 +545,7 @@
    ============================================================================= */
 
 [data-style='rokkit'] [data-toggle-option] {
-  color:var(--ink-soft);
+  color:var(--ink-mute);
 }
 
 /* Hover applies only to UNSELECTED options so the branded selected
@@ -568,7 +568,7 @@
    ============================================================================= */
 
 [data-style='rokkit'] [data-toggle-option] [data-toggle-icon] {
-  color:var(--ink-soft);
+  color:var(--ink-mute);
 }
 
 [data-style='rokkit'] [data-toggle-option]:hover:not(:disabled) [data-toggle-icon],
@@ -588,7 +588,7 @@
    ============================================================================= */
 
 [data-style='rokkit'] [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;
 }
 
@@ -598,7 +598,7 @@
 }
 
 [data-style='rokkit'] [data-toggle][data-toggle-variant='button'] [data-toggle-icon] {
-  color:var(--ink-soft);
+  color:var(--ink-mute);
 }
 
 [data-style='rokkit'] [data-toggle][data-toggle-variant='button']:hover:not(:disabled) [data-toggle-icon],
@@ -692,7 +692,7 @@
 
 [data-style='rokkit'] [data-list] [data-list-item] [data-item-icon] {
   font-size: 1rem;
-  color:var(--ink-soft);
+  color:var(--ink-mute);
 }
 
 [data-style='rokkit'] [data-list] [data-list-item]:hover:not(:disabled) [data-item-icon],
@@ -717,7 +717,7 @@
 
 /* Literal / kanji icons */
 [data-style='rokkit'] [data-list] [data-list-item] [data-item-icon-literal] {
-  color:var(--ink-soft);
+  color:var(--ink-mute);
 }
 
 [data-style='rokkit'] [data-list] [data-list-item]:hover:not(:disabled) [data-item-icon-literal],
@@ -742,7 +742,7 @@
 
 /* Item description */
 [data-style='rokkit'] [data-list] [data-list-item] [data-item-description] {
-  color:var(--ink-soft);
+  color:var(--ink-mute);
 }
 
 [data-style='rokkit'] [data-list] [data-list-item][data-active='true'] [data-item-description] {
@@ -762,7 +762,7 @@
 
 /* Item badge */
 [data-style='rokkit'] [data-list] [data-list-item] [data-item-badge] {
-  border-width:1px;--un-gradient-shape:to bottom in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));color:var(--ink-soft);border-color:var(--paper-edge);
+  border-width:1px;--un-gradient-shape:to bottom in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));color:var(--ink-mute);border-color:var(--paper-edge);
 }
 
 [data-style='rokkit'] [data-list] [data-list-item][data-active='true'] [data-item-badge] {
@@ -795,7 +795,7 @@
    ============================================================================= */
 
 [data-style='rokkit'] [data-list] [data-list-group] {
-  margin-top:0.5rem;color:var(--ink-soft);
+  margin-top:0.5rem;color:var(--ink-mute);
 }
 
 [data-style='rokkit'] [data-list] [data-list-group]:first-child {
@@ -845,6 +845,17 @@
  * Rich gradients and glowing borders.
  */
 
+/* =============================================================================
+   Connector Lines — hairline tone (mode-aware), not currentColor (which
+   renders white in dark mode and greyish in light).
+   ============================================================================= */
+
+[data-style='rokkit'] [data-tree]:not([data-line-style='none']) [data-connector-v],
+[data-style='rokkit'] [data-tree]:not([data-line-style='none']) [data-connector-h],
+[data-style='rokkit'] [data-tree]:not([data-line-style='none']) [data-connector-corner] {
+  border-color:var(--paper-edge);
+}
+
 /* =============================================================================
    Tree Container
    ============================================================================= */
@@ -858,7 +869,7 @@
    ============================================================================= */
 
 [data-style='rokkit'] [data-tree-toggle-btn] {
-  color:var(--ink-soft);
+  color:var(--ink-mute);
 }
 
 [data-style='rokkit'] [data-tree-toggle-btn]:hover {
@@ -904,7 +915,7 @@
    ============================================================================= */
 
 [data-style='rokkit'] [data-tree-item-content] [data-item-icon] {
-  color:var(--ink-soft);
+  color:var(--ink-mute);
 }
 
 [data-style='rokkit'] [data-tree-item-content]:hover:not(:disabled) [data-item-icon] {
@@ -922,12 +933,12 @@
   [data-tree]:not(:focus-within)
   [data-tree-item-content][data-active='true']
   [data-item-icon] {
-  color:var(--ink-soft);
+  color:var(--ink-mute);
 }
 
 /* Item description */
 [data-style='rokkit'] [data-tree-item-content] [data-item-description] {
-  color:var(--ink-soft);
+  color:var(--ink-mute);
 }
 
 [data-style='rokkit']
@@ -941,12 +952,12 @@
   [data-tree]:not(:focus-within)
   [data-tree-item-content][data-active='true']
   [data-item-description] {
-  color:var(--ink-soft);
+  color:var(--ink-mute);
 }
 
 /* Item badge */
 [data-style='rokkit'] [data-tree-item-content] [data-item-badge] {
-  border-width:1px;--un-gradient-shape:to bottom in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));color:var(--ink-soft);border-color:var(--paper-edge);
+  border-width:1px;--un-gradient-shape:to bottom in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));color:var(--ink-mute);border-color:var(--paper-edge);
 }
 
 [data-style='rokkit']
@@ -1032,7 +1043,7 @@
    ============================================================================= */
 
 [data-style='rokkit'] [data-select-placeholder] {
-  color:var(--ink-soft);
+  color:var(--ink-mute);
 }
 
 /* =============================================================================
@@ -1040,7 +1051,7 @@
    ============================================================================= */
 
 [data-style='rokkit'] [data-select-arrow] {
-  color:var(--ink-soft);
+  color:var(--ink-mute);
 }
 
 [data-style='rokkit'] [data-select-trigger]:hover:not(:disabled) [data-select-arrow] {
@@ -1056,7 +1067,7 @@
 }
 
 [data-style='rokkit'] [data-select-tag-remove] {
-  color:var(--ink-soft);
+  color:var(--ink-mute);
 }
 
 [data-style='rokkit'] [data-select-tag-remove]:hover {
@@ -1090,11 +1101,12 @@
   border-left-width:2px;background-color:var(--paper-mute);color:var(--primary);border-left-color:var(--primary);
 }
 
-/* Selected state — full gradient when dropdown has focus */
+/* Selected state — full gradient when dropdown has focus. The option now has a
+   primary→accent FILL, so its text must be on-primary (teal-on-teal otherwise). */
 [data-style='rokkit']
   [data-select-dropdown]:focus-within
   [data-select-option][data-selected='true'] {
-  border-left-width:2px;--un-gradient-from-position:0%;--un-gradient-from:color-mix(in srgb, var(--color-primary) calc(1 * 100%), transparent) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:color-mix(in srgb, var(--color-accent) calc(1 * 100%), transparent) var(--un-gradient-to-position);--un-gradient-shape:to right in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));color:var(--primary);border-left-color:var(--primary);
+  border-left-width:2px;--un-gradient-from-position:0%;--un-gradient-from:color-mix(in srgb, var(--color-primary) calc(1 * 100%), transparent) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:color-mix(in srgb, var(--color-accent) calc(1 * 100%), transparent) var(--un-gradient-to-position);--un-gradient-shape:to right in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));color:var(--on-primary);border-left-color:var(--primary);
 }
 
 /* Selected + hover */
@@ -1118,7 +1130,7 @@
 
 /* Item elements */
 [data-style='rokkit'] [data-select-option] [data-item-icon] {
-  color:var(--ink-soft);
+  color:var(--ink-mute);
 }
 
 [data-style='rokkit'] [data-select-option]:hover:not(:disabled) [data-item-icon] {
@@ -1133,23 +1145,33 @@
   [data-select-dropdown]:focus-within
   [data-select-option][data-selected='true']
   [data-item-icon] {
-  color:var(--primary);
+  color:var(--on-primary);
 }
 
 [data-style='rokkit'] [data-select-option] [data-item-description] {
-  color:var(--ink-soft);
+  color:var(--ink-mute);
 }
 
 [data-style='rokkit'] [data-select-option][data-selected='true'] [data-item-description] {
   color:var(--primary);
 }
 
+/* Description also rides the primary fill when the dropdown has focus. */
+[data-style='rokkit']
+  [data-select-dropdown]:focus-within
+  [data-select-option][data-selected='true']
+  [data-item-description] {
+  color:var(--on-primary);
+}
+
 [data-style='rokkit'] [data-select-option] [data-item-badge] {
-  color:var(--ink-soft);background-color:var(--paper-mute);
+  color:var(--ink-mute);background-color:var(--paper-mute);
 }
 
+/* Selected badge sits on a primary fill → on-primary text (not text-primary,
+   which would be primary-on-primary). */
 [data-style='rokkit'] [data-select-option][data-selected='true'] [data-item-badge] {
-  color:var(--primary);background-color:var(--primary);
+  color:var(--on-primary);background-color:var(--primary);
 }
 
 /* =============================================================================
@@ -1157,7 +1179,7 @@
    ============================================================================= */
 
 [data-style='rokkit'] [data-select-group-label] {
-  color:var(--ink-soft);
+  color:var(--ink-mute);
 }
 
 /* =============================================================================
@@ -1185,11 +1207,11 @@
 }
 
 [data-style='rokkit'] [data-select-filter-input]::placeholder {
-  color:var(--ink-soft);
+  color:var(--ink-mute);
 }
 
 [data-style='rokkit'] [data-select-empty] {
-  color:var(--ink-soft);
+  color:var(--ink-mute);
 }
 
 /**
@@ -1220,7 +1242,7 @@
 
 /* Trigger elements */
 [data-style='rokkit'] [data-menu-trigger] [data-menu-icon] {
-  color:var(--ink-soft);
+  color:var(--ink-mute);
 }
 
 [data-style='rokkit'] [data-menu-trigger]:hover:not(:disabled) [data-menu-icon] {
@@ -1228,7 +1250,7 @@
 }
 
 [data-style='rokkit'] [data-menu-trigger] [data-menu-arrow] {
-  color:var(--ink-soft);
+  color:var(--ink-mute);
 }
 
 /* =============================================================================
@@ -1258,7 +1280,7 @@
 
 /* Item elements */
 [data-style='rokkit'] [data-menu-item] [data-item-icon] {
-  color:var(--ink-soft);
+  color:var(--ink-mute);
 }
 
 [data-style='rokkit'] [data-menu-item]:hover:not(:disabled) [data-item-icon],
@@ -1267,7 +1289,7 @@
 }
 
 [data-style='rokkit'] [data-menu-item] [data-item-description] {
-  color:var(--ink-soft);
+  color:var(--ink-mute);
 }
 
 /* =============================================================================
@@ -1275,7 +1297,7 @@
    ============================================================================= */
 
 [data-style='rokkit'] [data-menu-group] {
-  color:var(--ink-soft);
+  color:var(--ink-mute);
 }
 
 /* =============================================================================
@@ -1313,7 +1335,7 @@
 }
 
 [data-style='rokkit'] [data-dropdown-trigger] [data-dropdown-icon] {
-  color:var(--ink-soft);
+  color:var(--ink-mute);
 }
 
 [data-style='rokkit'] [data-dropdown-trigger]:hover:not(:disabled) [data-dropdown-icon] {
@@ -1321,7 +1343,7 @@
 }
 
 [data-style='rokkit'] [data-dropdown-trigger] [data-dropdown-arrow] {
-  color:var(--ink-soft);
+  color:var(--ink-mute);
 }
 
 /* =============================================================================
@@ -1569,7 +1591,7 @@
    ============================================================================= */
 
 [data-style='rokkit'] [data-table-header] th {
-  border-bottom-width:1px;color:var(--ink-soft);border-color:var(--paper-edge);background-color:var(--paper-mute);
+  border-bottom-width:1px;color:var(--ink-mute);border-color:var(--paper-edge);background-color:var(--paper-mute);
 }
 
 [data-style='rokkit'] [data-table-header-cell][data-sortable='true']:hover {
@@ -1582,7 +1604,7 @@
 }
 
 [data-style='rokkit'] [data-table-sort-icon] {
-  color:var(--ink-soft);
+  color:var(--ink-mute);
 }
 
 [data-style='rokkit'] [data-table-header-cell][data-sort-order='ascending'] [data-table-sort-icon],
@@ -1643,7 +1665,7 @@
    ============================================================================= */
 
 [data-style='rokkit'] [data-table-empty] {
-  color:var(--ink-soft);
+  color:var(--ink-mute);
 }
 
 /* =============================================================================
@@ -1651,7 +1673,7 @@
    ============================================================================= */
 
 [data-style='rokkit'] [data-table-cell] [data-cell-icon] {
-  color:var(--ink-soft);
+  color:var(--ink-mute);
 }
 
 [data-style='rokkit'] [data-table-row][data-selected='true'] [data-cell-icon] {
@@ -1668,7 +1690,7 @@
   }
 
   [data-style='rokkit'] [data-table-responsive] [data-table-cell]::before {
-    color:var(--ink-soft);
+    color:var(--ink-mute);
   }
 
   /* Disable striped alternating bg in card layout */
@@ -1805,11 +1827,12 @@
 }
 
 [data-style='rokkit'] [data-timeline-item][data-completed] [data-timeline-circle] {
-  background-color:var(--primary);border-color:var(--primary);color:var(--on-primary);
+  border-color:var(--primary);color:var(--on-primary);
+  background-color: var(--primary);
 }
 
 [data-style='rokkit'] [data-timeline-item][data-active] [data-timeline-circle] {
-  --un-ring-width:3px;--un-ring-offset-shadow:var(--un-ring-inset) 0 0 0 var(--un-ring-offset-width) var(--un-ring-offset-color);--un-ring-shadow:var(--un-ring-inset) 0 0 0 calc(var(--un-ring-width) + var(--un-ring-offset-width)) var(--un-ring-color);box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);--un-ring-color:color-mix(in srgb, var(--color-primary) calc(0.2 * 100%), transparent);border-color:var(--primary);color:var(--primary);
+  --un-ring-width:3px;--un-ring-offset-shadow:var(--un-ring-inset) 0 0 0 var(--un-ring-offset-width) var(--un-ring-offset-color);--un-ring-shadow:var(--un-ring-inset) 0 0 0 calc(var(--un-ring-width) + var(--un-ring-offset-width)) var(--un-ring-color);box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);--un-ring-color:color-mix(in srgb, var(--color-primary) calc(0.2 * 100%), transparent);border-color:var(--primary);color:var(--ink);
 }
 
 /* =============================================================================
@@ -1821,7 +1844,7 @@
 }
 
 [data-style='rokkit'] [data-timeline-item][data-completed] [data-timeline-connector] {
-  background-color:var(--primary);
+  background-color: var(--primary);
 }
 
 /* =============================================================================
@@ -2221,8 +2244,8 @@
 }
 
 [data-style='rokkit'] [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="rokkit"] [data-card][data-variant="primary"] [data-card-body],[data-mode="dark"] [data-style="rokkit"] [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 — muted secondary surface */
 [data-style='rokkit'] [data-card][data-variant='secondary'] {
@@ -2235,8 +2258,8 @@
 }
 
 [data-style='rokkit'] [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="rokkit"] [data-card][data-variant="secondary"] [data-card-body],[data-mode="dark"] [data-style="rokkit"] [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 — elevated surface, no color accent */
 [data-style='rokkit'] [data-card][data-variant='tertiary'] {
@@ -2678,7 +2701,7 @@
 }
 
 [data-style='rokkit'] [data-divider-label] {
-  color:var(--ink-soft);
+  color:var(--ink-mute);
 }
 
 /**
@@ -2688,7 +2711,7 @@
 /* Default variant */
 [data-style='rokkit'] [data-badge][data-variant='default'],
 [data-style='rokkit'] [data-badge]:not([data-variant]) {
-  background-color:var(--ink-soft);color:var(--paper-soft);
+  background-color:var(--ink-mute);color:var(--paper-soft);
 }
 
 /* Primary */
@@ -2698,25 +2721,25 @@
 
 /* Success */
 [data-style='rokkit'] [data-badge][data-variant='success'] {
-  --un-text-opacity:1;color:color-mix(in srgb, var(--color-success-50) calc(var(--un-text-opacity) * 100%), transparent);background-color:var(--success);
-}[data-mode="dark"][data-style="rokkit"] [data-badge][data-variant="success"],[data-mode="dark"] [data-style="rokkit"] [data-badge][data-variant="success"]{--un-text-opacity:1;color:color-mix(in srgb, var(--color-success-50) calc(var(--un-text-opacity) * 100%), transparent);}
+  --un-text-opacity:1;color:rgb(22 22 22 / var(--un-text-opacity));background-color:var(--success);
+}
 
 /* Warning */
 [data-style='rokkit'] [data-badge][data-variant='warning'] {
-  --un-text-opacity:1;color:color-mix(in srgb, var(--color-warning-50) calc(var(--un-text-opacity) * 100%), transparent);background-color:var(--warning);
-}[data-mode="dark"][data-style="rokkit"] [data-badge][data-variant="warning"],[data-mode="dark"] [data-style="rokkit"] [data-badge][data-variant="warning"]{--un-text-opacity:1;color:color-mix(in srgb, var(--color-warning-50) calc(var(--un-text-opacity) * 100%), transparent);}
+  --un-text-opacity:1;color:rgb(22 22 22 / var(--un-text-opacity));background-color:var(--warning);
+}
 
 /* Error */
 [data-style='rokkit'] [data-badge][data-variant='error'] {
-  --un-text-opacity:1;color:color-mix(in srgb, var(--color-error-50) calc(var(--un-text-opacity) * 100%), transparent);background-color:var(--error);
-}[data-mode="dark"][data-style="rokkit"] [data-badge][data-variant="error"],[data-mode="dark"] [data-style="rokkit"] [data-badge][data-variant="error"]{--un-text-opacity:1;color:color-mix(in srgb, var(--color-error-50) calc(var(--un-text-opacity) * 100%), transparent);}
+  --un-text-opacity:1;color:rgb(22 22 22 / var(--un-text-opacity));background-color:var(--error);
+}
 
 /**
  * Avatar - Rokkit Theme Styles
  */
 
 [data-style='rokkit'] [data-avatar] {
-  background-color:var(--paper-edge);color:var(--ink-mute);
+  background-color:var(--paper-edge);color:var(--ink);
 }
 
 /* Status dot colors */

package/dist/zen-sumi/button.css

@@ -20,23 +20,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
@@ -103,20 +107,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

package/dist/zen-sumi/card.css

@@ -79,8 +79,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'] {
@@ -94,8 +94,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/dist/zen-sumi/divider.css

@@ -0,0 +1,29 @@
+/**
+ * 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);
+}