@rokkit/themes 1.1.17 → 1.1.19

package/dist/rokkit/menu.css

@@ -26,7 +26,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] {
@@ -34,7 +34,7 @@
 }
 
 [data-style='rokkit'] [data-menu-trigger] [data-menu-arrow] {
-  color:var(--ink-soft);
+  color:var(--ink-mute);
 }
 
 /* =============================================================================
@@ -64,7 +64,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],
@@ -73,7 +73,7 @@
 }
 
 [data-style='rokkit'] [data-menu-item] [data-item-description] {
-  color:var(--ink-soft);
+  color:var(--ink-mute);
 }
 
 /* =============================================================================
@@ -81,7 +81,7 @@
    ============================================================================= */
 
 [data-style='rokkit'] [data-menu-group] {
-  color:var(--ink-soft);
+  color:var(--ink-mute);
 }
 
 /* =============================================================================

package/dist/rokkit/select.css

@@ -29,7 +29,7 @@
    ============================================================================= */
 
 [data-style='rokkit'] [data-select-placeholder] {
-  color:var(--ink-soft);
+  color:var(--ink-mute);
 }
 
 /* =============================================================================
@@ -37,7 +37,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] {
@@ -53,7 +53,7 @@
 }
 
 [data-style='rokkit'] [data-select-tag-remove] {
-  color:var(--ink-soft);
+  color:var(--ink-mute);
 }
 
 [data-style='rokkit'] [data-select-tag-remove]:hover {
@@ -87,11 +87,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 */
@@ -115,7 +116,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] {
@@ -130,23 +131,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);
 }
 
 /* =============================================================================
@@ -154,7 +165,7 @@
    ============================================================================= */
 
 [data-style='rokkit'] [data-select-group-label] {
-  color:var(--ink-soft);
+  color:var(--ink-mute);
 }
 
 /* =============================================================================
@@ -182,9 +193,9 @@
 }
 
 [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);
 }

package/dist/rokkit/table.css

@@ -9,7 +9,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 {
@@ -22,7 +22,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],
@@ -83,7 +83,7 @@
    ============================================================================= */
 
 [data-style='rokkit'] [data-table-empty] {
-  color:var(--ink-soft);
+  color:var(--ink-mute);
 }
 
 /* =============================================================================
@@ -91,7 +91,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] {
@@ -108,7 +108,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 */

package/dist/rokkit/tabs.css

@@ -94,7 +94,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] {

package/dist/rokkit/timeline.css

@@ -13,11 +13,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);
 }
 
 /* =============================================================================
@@ -29,7 +30,7 @@
 }
 
 [data-style='rokkit'] [data-timeline-item][data-completed] [data-timeline-connector] {
-  background-color:var(--primary);
+  background-color: var(--primary);
 }
 
 /* =============================================================================

package/dist/rokkit/toggle.css

@@ -23,7 +23,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
@@ -46,7 +46,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],
@@ -66,7 +66,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;
 }
 
@@ -76,7 +76,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],

package/dist/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] {
+  border-color:var(--paper-edge);
+}
+
 /* =============================================================================
    Tree Container
    ============================================================================= */
@@ -17,7 +28,7 @@
    ============================================================================= */
 
 [data-style='rokkit'] [data-tree-toggle-btn] {
-  color:var(--ink-soft);
+  color:var(--ink-mute);
 }
 
 [data-style='rokkit'] [data-tree-toggle-btn]:hover {
@@ -63,7 +74,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] {
@@ -81,12 +92,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']
@@ -100,12 +111,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']