@rokkit/themes 1.1.17 → 1.1.19

package/src/rokkit/select.css

@@ -29,7 +29,7 @@
    ============================================================================= */
 
 [data-style='rokkit'] [data-select-placeholder] {
-  @apply text-ink-soft;
+  @apply text-ink-mute;
 }
 
 /* =============================================================================
@@ -37,7 +37,7 @@
    ============================================================================= */
 
 [data-style='rokkit'] [data-select-arrow] {
-  @apply text-ink-soft;
+  @apply text-ink-mute;
 }
 
 [data-style='rokkit'] [data-select-trigger]:hover:not(:disabled) [data-select-arrow] {
@@ -53,7 +53,7 @@
 }
 
 [data-style='rokkit'] [data-select-tag-remove] {
-  @apply text-ink-soft;
+  @apply text-ink-mute;
 }
 
 [data-style='rokkit'] [data-select-tag-remove]:hover {
@@ -87,11 +87,12 @@
   @apply bg-paper-mute text-primary border-l-primary border-l-2;
 }
 
-/* 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'] {
-  @apply from-primary to-accent text-primary border-l-primary border-l-2 bg-gradient-to-r;
+  @apply from-primary to-accent text-on-primary border-l-primary border-l-2 bg-gradient-to-r;
 }
 
 /* Selected + hover */
@@ -115,7 +116,7 @@
 
 /* Item elements */
 [data-style='rokkit'] [data-select-option] [data-item-icon] {
-  @apply text-ink-soft;
+  @apply text-ink-mute;
 }
 
 [data-style='rokkit'] [data-select-option]:hover:not(:disabled) [data-item-icon] {
@@ -130,23 +131,33 @@
   [data-select-dropdown]:focus-within
   [data-select-option][data-selected='true']
   [data-item-icon] {
-  @apply text-primary;
+  @apply text-on-primary;
 }
 
 [data-style='rokkit'] [data-select-option] [data-item-description] {
-  @apply text-ink-soft;
+  @apply text-ink-mute;
 }
 
 [data-style='rokkit'] [data-select-option][data-selected='true'] [data-item-description] {
   @apply text-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] {
+  @apply text-on-primary;
+}
+
 [data-style='rokkit'] [data-select-option] [data-item-badge] {
-  @apply text-ink-soft bg-paper-mute;
+  @apply text-ink-mute bg-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] {
-  @apply text-primary bg-primary;
+  @apply text-on-primary bg-primary;
 }
 
 /* =============================================================================
@@ -154,7 +165,7 @@
    ============================================================================= */
 
 [data-style='rokkit'] [data-select-group-label] {
-  @apply text-ink-soft;
+  @apply text-ink-mute;
 }
 
 /* =============================================================================
@@ -182,9 +193,9 @@
 }
 
 [data-style='rokkit'] [data-select-filter-input]::placeholder {
-  @apply text-ink-soft;
+  @apply text-ink-mute;
 }
 
 [data-style='rokkit'] [data-select-empty] {
-  @apply text-ink-soft;
+  @apply text-ink-mute;
 }

package/src/rokkit/table.css

@@ -9,7 +9,7 @@
    ============================================================================= */
 
 [data-style='rokkit'] [data-table-header] th {
-  @apply text-ink-soft border-paper-edge border-b bg-paper-mute;
+  @apply text-ink-mute border-paper-edge border-b bg-paper-mute;
 }
 
 [data-style='rokkit'] [data-table-header-cell][data-sortable='true']:hover {
@@ -22,7 +22,7 @@
 }
 
 [data-style='rokkit'] [data-table-sort-icon] {
-  @apply text-ink-soft;
+  @apply text-ink-mute;
 }
 
 [data-style='rokkit'] [data-table-header-cell][data-sort-order='ascending'] [data-table-sort-icon],
@@ -83,7 +83,7 @@
    ============================================================================= */
 
 [data-style='rokkit'] [data-table-empty] {
-  @apply text-ink-soft;
+  @apply text-ink-mute;
 }
 
 /* =============================================================================
@@ -91,7 +91,7 @@
    ============================================================================= */
 
 [data-style='rokkit'] [data-table-cell] [data-cell-icon] {
-  @apply text-ink-soft;
+  @apply text-ink-mute;
 }
 
 [data-style='rokkit'] [data-table-row][data-selected='true'] [data-cell-icon] {
@@ -108,7 +108,7 @@
   }
 
   [data-style='rokkit'] [data-table-responsive] [data-table-cell]::before {
-    @apply text-ink-soft;
+    @apply text-ink-mute;
   }
 
   /* Disable striped alternating bg in card layout */

package/src/rokkit/tabs.css

@@ -94,7 +94,7 @@
    ============================================================================= */
 
 [data-style='rokkit'] [data-tabs-trigger] [data-tabs-icon] {
-  @apply text-ink-soft;
+  @apply text-ink-mute;
 }
 
 [data-style='rokkit'] [data-tabs-trigger]:hover:not(:disabled) [data-tabs-icon] {

package/src/rokkit/timeline.css

@@ -13,11 +13,12 @@
 }
 
 [data-style='rokkit'] [data-timeline-item][data-completed] [data-timeline-circle] {
-  @apply bg-primary border-primary text-on-primary;
+  @apply  border-primary text-on-primary;
+  background-color: var(--primary);
 }
 
 [data-style='rokkit'] [data-timeline-item][data-active] [data-timeline-circle] {
-  @apply border-primary text-primary ring-3 ring-primary/20;
+  @apply border-primary text-ink ring-3 ring-primary/20;
 }
 
 /* =============================================================================
@@ -29,7 +30,7 @@
 }
 
 [data-style='rokkit'] [data-timeline-item][data-completed] [data-timeline-connector] {
-  @apply bg-primary;
+  background-color: var(--primary);
 }
 
 /* =============================================================================

package/src/rokkit/toggle.css

@@ -23,7 +23,7 @@
    ============================================================================= */
 
 [data-style='rokkit'] [data-toggle-option] {
-  @apply text-ink-soft;
+  @apply text-ink-mute;
 }
 
 /* Hover applies only to UNSELECTED options so the branded selected
@@ -46,7 +46,7 @@
    ============================================================================= */
 
 [data-style='rokkit'] [data-toggle-option] [data-toggle-icon] {
-  @apply text-ink-soft;
+  @apply text-ink-mute;
 }
 
 [data-style='rokkit'] [data-toggle-option]:hover:not(:disabled) [data-toggle-icon],
@@ -66,7 +66,7 @@
    ============================================================================= */
 
 [data-style='rokkit'] [data-toggle][data-toggle-variant='button'] {
-  @apply border-transparent bg-transparent text-ink-soft;
+  @apply border-transparent bg-transparent text-ink-mute;
   background-image: none;
 }
 
@@ -76,7 +76,7 @@
 }
 
 [data-style='rokkit'] [data-toggle][data-toggle-variant='button'] [data-toggle-icon] {
-  @apply text-ink-soft;
+  @apply text-ink-mute;
 }
 
 [data-style='rokkit'] [data-toggle][data-toggle-variant='button']:hover:not(:disabled) [data-toggle-icon],

package/src/rokkit/tree.css

@@ -4,6 +4,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] {
+  @apply border-paper-edge;
+}
+
 /* =============================================================================
    Tree Container
    ============================================================================= */
@@ -17,7 +28,7 @@
    ============================================================================= */
 
 [data-style='rokkit'] [data-tree-toggle-btn] {
-  @apply text-ink-soft;
+  @apply text-ink-mute;
 }
 
 [data-style='rokkit'] [data-tree-toggle-btn]:hover {
@@ -63,7 +74,7 @@
    ============================================================================= */
 
 [data-style='rokkit'] [data-tree-item-content] [data-item-icon] {
-  @apply text-ink-soft;
+  @apply text-ink-mute;
 }
 
 [data-style='rokkit'] [data-tree-item-content]:hover:not(:disabled) [data-item-icon] {
@@ -81,12 +92,12 @@
   [data-tree]:not(:focus-within)
   [data-tree-item-content][data-active='true']
   [data-item-icon] {
-  @apply text-ink-soft;
+  @apply text-ink-mute;
 }
 
 /* Item description */
 [data-style='rokkit'] [data-tree-item-content] [data-item-description] {
-  @apply text-ink-soft;
+  @apply text-ink-mute;
 }
 
 [data-style='rokkit']
@@ -100,12 +111,12 @@
   [data-tree]:not(:focus-within)
   [data-tree-item-content][data-active='true']
   [data-item-description] {
-  @apply text-ink-soft;
+  @apply text-ink-mute;
 }
 
 /* Item badge */
 [data-style='rokkit'] [data-tree-item-content] [data-item-badge] {
-  @apply text-ink-soft from-paper-mute to-paper-mute border-paper-edge border bg-gradient-to-b;
+  @apply text-ink-mute from-paper-mute to-paper-mute border-paper-edge border bg-gradient-to-b;
 }
 
 [data-style='rokkit']

package/src/zen-sumi/button.css

@@ -20,22 +20,26 @@
 
 [data-style='zen-sumi'] [data-button][data-style='default'][data-variant='primary'],
 [data-style='zen-sumi'] [data-button]:not([data-style])[data-variant='primary'] {
-  @apply bg-primary text-on-primary border-transparent bg-none;
+  @apply  text-on-primary border-transparent bg-none;
+  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'] {
-  @apply bg-accent text-on-primary border-transparent bg-none;
+  @apply  text-on-primary border-transparent bg-none;
+  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'] {
-  @apply bg-accent text-on-accent border-transparent bg-none;
+  @apply  text-on-accent border-transparent bg-none;
+  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'] {
-  @apply bg-danger text-on-danger border-transparent bg-none;
+  @apply  text-on-danger border-transparent bg-none;
+  background-color: var(--danger);
 }
 
 /* =============================================================================
@@ -103,19 +107,23 @@
 }
 
 [data-style='zen-sumi'] [data-button][data-style='gradient'][data-variant='primary'] {
-  @apply bg-primary text-on-primary bg-none;
+  @apply  text-on-primary bg-none;
+  background-color: var(--primary);
 }
 
 [data-style='zen-sumi'] [data-button][data-style='gradient'][data-variant='secondary'] {
-  @apply bg-accent text-on-primary bg-none;
+  @apply  text-on-primary bg-none;
+  background-color: var(--accent);
 }
 
 [data-style='zen-sumi'] [data-button][data-style='gradient'][data-variant='accent'] {
-  @apply bg-accent text-on-accent bg-none;
+  @apply  text-on-accent bg-none;
+  background-color: var(--accent);
 }
 
 [data-style='zen-sumi'] [data-button][data-style='gradient'][data-variant='danger'] {
-  @apply bg-danger text-on-danger bg-none;
+  @apply  text-on-danger bg-none;
+  background-color: var(--danger);
 }
 
 /* =============================================================================

package/src/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 {
+  @apply bg-paper-edge;
+}
+
+[data-style='zen-sumi'] [data-divider][data-orientation='vertical']::before,
+[data-style='zen-sumi'] [data-divider][data-orientation='vertical']::after {
+  @apply bg-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])) {
+  @apply bg-paper-edge;
+}
+
+[data-style='zen-sumi'] [data-divider][data-orientation='vertical']:not(:has([data-divider-label])) {
+  @apply bg-paper-edge;
+}
+
+[data-style='zen-sumi'] [data-divider-label] {
+  @apply text-ink-mute;
+}

package/src/zen-sumi/dropdown.css

@@ -6,7 +6,7 @@
  */
 
 [data-style='zen-sumi'] [data-dropdown-trigger] {
-  @apply border-paper-mute text-ink-soft border bg-transparent bg-none;
+  @apply border-paper-mute text-ink-mute border bg-transparent bg-none;
 }
 
 [data-style='zen-sumi'] [data-dropdown-trigger]:hover:not(:disabled) {
@@ -23,11 +23,11 @@
 }
 
 [data-style='zen-sumi'] [data-dropdown-trigger] [data-dropdown-icon] {
-  @apply text-paper-edge;
+  @apply text-ink-mute;
 }
 
 [data-style='zen-sumi'] [data-dropdown-trigger] [data-dropdown-arrow] {
-  @apply text-paper-edge;
+  @apply text-ink-mute;
 }
 
 [data-style='zen-sumi'] [data-dropdown-panel] {
@@ -36,7 +36,7 @@
 }
 
 [data-style='zen-sumi'] [data-dropdown-option] {
-  @apply text-ink-soft;
+  @apply text-ink-mute;
 }
 
 [data-style='zen-sumi'] [data-dropdown-option]:hover:not(:disabled),

package/src/zen-sumi/index.css

@@ -21,6 +21,7 @@
 @import './switch.css';
 @import './list.css';
 @import './tree.css';
+@import './divider.css';
 @import './select.css';
 @import './menu.css';
 @import './dropdown.css';

package/src/zen-sumi/list.css

@@ -19,12 +19,12 @@
    ============================================================================= */
 
 [data-style='zen-sumi'] [data-list] [data-list-item] {
-  @apply text-ink-soft border-0 border-solid border-transparent bg-transparent;
+  @apply text-ink-mute border-0 border-solid border-transparent bg-transparent;
 }
 
 [data-style='zen-sumi'] [data-list] a[data-list-item],
 [data-style='zen-sumi'] [data-list] button[data-list-item] {
-  @apply text-ink-soft;
+  @apply text-ink-mute;
 }
 
 /* Hover and focus — subtle paper wash */
@@ -58,12 +58,12 @@
    ============================================================================= */
 
 [data-style='zen-sumi'] [data-list] [data-list-item] [data-item-icon] {
-  @apply text-paper-edge;
+  @apply text-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] {
-  @apply text-ink-soft;
+  @apply text-ink-mute;
 }
 
 [data-style='zen-sumi'] [data-list] [data-list-item][data-active='true'] [data-item-icon] {
@@ -71,15 +71,15 @@
 }
 
 [data-style='zen-sumi'] [data-list] [data-list-item] [data-item-description] {
-  @apply text-paper-edge;
+  @apply text-ink-mute;
 }
 
 [data-style='zen-sumi'] [data-list] [data-list-item][data-active='true'] [data-item-description] {
-  @apply text-ink-soft;
+  @apply text-ink-mute;
 }
 
 [data-style='zen-sumi'] [data-list] [data-list-item] [data-item-badge] {
-  @apply text-ink-soft border-paper-mute border bg-transparent bg-none;
+  @apply text-ink-mute border-paper-mute border bg-transparent bg-none;
 }
 
 [data-style='zen-sumi'] [data-list] [data-list-item][data-active='true'] [data-item-badge] {
@@ -91,12 +91,12 @@
    ============================================================================= */
 
 [data-style='zen-sumi'] [data-list] [data-list-group] {
-  @apply text-paper-edge;
+  @apply text-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) {
-  @apply text-ink-soft bg-none;
+  @apply text-ink-mute bg-none;
 }
 
 /* =============================================================================

package/src/zen-sumi/menu.css

@@ -10,7 +10,7 @@
    ============================================================================= */
 
 [data-style='zen-sumi'] [data-menu-trigger] {
-  @apply border-paper-mute text-ink-soft border bg-transparent bg-none;
+  @apply border-paper-mute text-ink-mute border bg-transparent bg-none;
 }
 
 [data-style='zen-sumi'] [data-menu-trigger]:hover:not(:disabled) {
@@ -28,15 +28,15 @@
 
 /* Trigger elements */
 [data-style='zen-sumi'] [data-menu-trigger] [data-menu-icon] {
-  @apply text-paper-edge;
+  @apply text-ink-mute;
 }
 
 [data-style='zen-sumi'] [data-menu-trigger]:hover:not(:disabled) [data-menu-icon] {
-  @apply text-ink-soft;
+  @apply text-ink-mute;
 }
 
 [data-style='zen-sumi'] [data-menu-trigger] [data-menu-arrow] {
-  @apply text-paper-edge;
+  @apply text-ink-mute;
 }
 
 /* =============================================================================
@@ -53,7 +53,7 @@
    ============================================================================= */
 
 [data-style='zen-sumi'] [data-menu-item] {
-  @apply text-ink-soft border-0 border-solid border-transparent;
+  @apply text-ink-mute border-0 border-solid border-transparent;
 }
 
 [data-style='zen-sumi'] [data-menu-item]:hover:not(:disabled),
@@ -63,15 +63,15 @@
 
 /* Item elements */
 [data-style='zen-sumi'] [data-menu-item] [data-item-icon] {
-  @apply text-paper-edge;
+  @apply text-ink-mute;
 }
 
 [data-style='zen-sumi'] [data-menu-item]:hover:not(:disabled) [data-item-icon] {
-  @apply text-ink-soft;
+  @apply text-ink-mute;
 }
 
 [data-style='zen-sumi'] [data-menu-item] [data-item-description] {
-  @apply text-paper-edge;
+  @apply text-ink-mute;
 }
 
 /* =============================================================================
@@ -79,7 +79,7 @@
    ============================================================================= */
 
 [data-style='zen-sumi'] [data-menu-group] {
-  @apply text-paper-edge;
+  @apply text-ink-mute;
 }
 
 /* =============================================================================

package/src/zen-sumi/select.css

@@ -11,7 +11,7 @@
    ============================================================================= */
 
 [data-style='zen-sumi'] [data-select-trigger] {
-  @apply text-ink-soft border-paper-mute border bg-transparent bg-none;
+  @apply text-ink-mute border-paper-mute border bg-transparent bg-none;
 }
 
 [data-style='zen-sumi'] [data-select-trigger]:hover:not(:disabled) {
@@ -32,7 +32,7 @@
    ============================================================================= */
 
 [data-style='zen-sumi'] [data-select-placeholder] {
-  @apply text-paper-edge;
+  @apply text-ink-mute;
 }
 
 /* =============================================================================
@@ -40,11 +40,11 @@
    ============================================================================= */
 
 [data-style='zen-sumi'] [data-select-arrow] {
-  @apply text-paper-edge;
+  @apply text-ink-mute;
 }
 
 [data-style='zen-sumi'] [data-select-trigger]:hover:not(:disabled) [data-select-arrow] {
-  @apply text-paper-edge;
+  @apply text-ink-mute;
 }
 
 /* =============================================================================
@@ -52,11 +52,11 @@
    ============================================================================= */
 
 [data-style='zen-sumi'] [data-select-tag] {
-  @apply text-ink-soft border-paper-mute border bg-transparent bg-none;
+  @apply text-ink-mute border-paper-mute border bg-transparent bg-none;
 }
 
 [data-style='zen-sumi'] [data-select-tag-remove] {
-  @apply text-paper-edge;
+  @apply text-ink-mute;
 }
 
 [data-style='zen-sumi'] [data-select-tag-remove]:hover {
@@ -77,7 +77,7 @@
    ============================================================================= */
 
 [data-style='zen-sumi'] [data-select-option] {
-  @apply text-ink-soft border-0 border-solid border-transparent;
+  @apply text-ink-mute border-0 border-solid border-transparent;
 }
 
 [data-style='zen-sumi'] [data-select-option]:hover:not(:disabled),
@@ -112,7 +112,7 @@
 
 /* Item elements */
 [data-style='zen-sumi'] [data-select-option] [data-item-description] {
-  @apply text-paper-edge;
+  @apply text-ink-mute;
 }
 
 [data-style='zen-sumi'] [data-select-option][data-selected='true'] [data-item-description] {
@@ -124,7 +124,7 @@
    ============================================================================= */
 
 [data-style='zen-sumi'] [data-select-group-label] {
-  @apply text-paper-edge;
+  @apply text-ink-mute;
 }
 
 /* =============================================================================
@@ -152,9 +152,9 @@
 }
 
 [data-style='zen-sumi'] [data-select-filter-input]::placeholder {
-  @apply text-ink-soft;
+  @apply text-ink-mute;
 }
 
 [data-style='zen-sumi'] [data-select-empty] {
-  @apply text-paper-edge;
+  @apply text-ink-mute;
 }

package/src/zen-sumi/table.css

@@ -10,7 +10,7 @@
    ============================================================================= */
 
 [data-style='zen-sumi'] [data-table-header] th {
-  @apply text-ink-soft border-paper-mute border-b bg-transparent;
+  @apply text-ink-mute border-paper-mute border-b bg-transparent;
   font-size: 0.6875rem;
   font-weight: 600;
   letter-spacing: 0.05em;
@@ -44,7 +44,7 @@
    ============================================================================= */
 
 [data-style='zen-sumi'] [data-table-caption] {
-  @apply text-ink-soft;
+  @apply text-ink-mute;
 }
 
 /* =============================================================================
@@ -52,7 +52,7 @@
    ============================================================================= */
 
 [data-style='zen-sumi'] [data-table-row] {
-  @apply text-ink-soft border-paper-mute border-b;
+  @apply text-ink-mute border-paper-mute border-b;
 }
 
 [data-style='zen-sumi'] [data-table-row]:hover {
@@ -91,7 +91,7 @@
    ============================================================================= */
 
 [data-style='zen-sumi'] [data-table-empty] {
-  @apply text-ink-soft;
+  @apply text-ink-mute;
 }
 
 /* =============================================================================
@@ -99,7 +99,7 @@
    ============================================================================= */
 
 [data-style='zen-sumi'] [data-table-cell] [data-cell-icon] {
-  @apply text-ink-soft;
+  @apply text-ink-mute;
 }
 
 [data-style='zen-sumi'] [data-table-row][data-selected='true'] [data-cell-icon] {
@@ -116,7 +116,7 @@
   }
 
   [data-style='zen-sumi'] [data-table-responsive] [data-table-cell]::before {
-    @apply text-ink-soft;
+    @apply text-ink-mute;
   }
 
   [data-style='zen-sumi']