@rokkit/themes 1.1.17 → 1.1.18

package/src/material/timeline.css

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

package/src/material/toggle.css

@@ -17,7 +17,7 @@
    ============================================================================= */
 
 [data-style='material'] [data-toggle-option] {
-  @apply text-ink-soft rounded-full;
+  @apply text-ink-mute rounded-full;
 }
 
 [data-style='material'] [data-toggle-option]:hover:not(:disabled):not([data-disabled='true']),
@@ -27,7 +27,8 @@
 
 /* Selected state */
 [data-style='material'] [data-toggle-option][data-selected='true'] {
-  @apply bg-primary bg-none text-on-primary shadow-md;
+  @apply  bg-none text-on-primary shadow-md;
+  background-color: var(--primary);
 }
 
 /* =============================================================================
@@ -35,7 +36,7 @@
    ============================================================================= */
 
 [data-style='material'] [data-toggle-option] [data-toggle-icon] {
-  @apply text-ink-soft;
+  @apply text-ink-mute;
 }
 
 [data-style='material'] [data-toggle-option]:hover:not(:disabled) [data-toggle-icon],
@@ -55,7 +56,7 @@
    ============================================================================= */
 
 [data-style='material'] [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;
 }
 
@@ -65,7 +66,7 @@
 }
 
 [data-style='material'] [data-toggle][data-toggle-variant='button'] [data-toggle-icon] {
-  @apply text-ink-soft;
+  @apply text-ink-mute;
 }
 
 [data-style='material'] [data-toggle][data-toggle-variant='button']:hover:not(:disabled) [data-toggle-icon],

package/src/material/tree.css

@@ -4,6 +4,17 @@
  * Material Design inspired with subtle elevation.
  */
 
+/* =============================================================================
+   Connector Lines — hairline tone (mode-aware), not currentColor (which
+   renders white in dark mode and greyish in light).
+   ============================================================================= */
+
+[data-style='material'] [data-tree]:not([data-line-style='none']) [data-connector-v],
+[data-style='material'] [data-tree]:not([data-line-style='none']) [data-connector-h],
+[data-style='material'] [data-tree]:not([data-line-style='none']) [data-connector-corner] {
+  @apply border-paper-edge;
+}
+
 /* =============================================================================
    Tree Container
    ============================================================================= */
@@ -17,7 +28,7 @@
    ============================================================================= */
 
 [data-style='material'] [data-tree-toggle-btn] {
-  @apply text-ink-soft rounded-full;
+  @apply text-ink-mute rounded-full;
 }
 
 [data-style='material'] [data-tree-toggle-btn]:hover {
@@ -73,7 +84,7 @@
    ============================================================================= */
 
 [data-style='material'] [data-tree-item-content] [data-item-icon] {
-  @apply text-ink-soft;
+  @apply text-ink-mute;
 }
 
 [data-style='material'] [data-tree-item-content]:hover:not(:disabled) [data-item-icon] {
@@ -85,7 +96,7 @@
 }
 
 [data-style='material'] [data-tree-item-content] [data-item-description] {
-  @apply text-ink-soft;
+  @apply text-ink-mute;
 }
 
 [data-style='material'] [data-tree-item-content][data-active='true'] [data-item-description] {
@@ -93,7 +104,7 @@
 }
 
 [data-style='material'] [data-tree-item-content] [data-item-badge] {
-  @apply text-ink-soft bg-paper-mute rounded-full bg-none;
+  @apply text-ink-mute bg-paper-mute rounded-full bg-none;
 }
 
 [data-style='material'] [data-tree-item-content][data-active='true'] [data-item-badge] {

package/src/minimal/button.css

@@ -17,22 +17,26 @@
 
 [data-style='minimal'] [data-button][data-style='default'][data-variant='primary'],
 [data-style='minimal'] [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='minimal'] [data-button][data-style='default'][data-variant='secondary'],
 [data-style='minimal'] [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='minimal'] [data-button][data-style='default'][data-variant='accent'],
 [data-style='minimal'] [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='minimal'] [data-button][data-style='default'][data-variant='danger'],
 [data-style='minimal'] [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);
 }
 
 /* =============================================================================

package/src/minimal/dropdown.css

@@ -21,11 +21,11 @@
 }
 
 [data-style='minimal'] [data-dropdown-trigger] [data-dropdown-icon] {
-  @apply text-ink-soft;
+  @apply text-ink-mute;
 }
 
 [data-style='minimal'] [data-dropdown-trigger] [data-dropdown-arrow] {
-  @apply text-paper-edge;
+  @apply text-ink-mute;
 }
 
 [data-style='minimal'] [data-dropdown-panel] {

package/src/minimal/list.css

@@ -43,7 +43,7 @@
 
 [data-style='minimal'] [data-list] a[data-list-item],
 [data-style='minimal'] [data-list] button[data-list-item] {
-  @apply text-ink-soft;
+  @apply text-ink-mute;
 }
 
 /* Hover and focus — text brightening only, no border */
@@ -81,12 +81,12 @@
    ============================================================================= */
 
 [data-style='minimal'] [data-list] [data-list-item] [data-item-icon] {
-  @apply text-ink-soft;
+  @apply text-ink-mute;
 }
 
 [data-style='minimal'] [data-list] [data-list-item]:hover:not(:disabled) [data-item-icon],
 [data-style='minimal'] [data-list] [data-list-item]:focus:not(:disabled) [data-item-icon] {
-  @apply text-ink-soft;
+  @apply text-ink-mute;
 }
 
 [data-style='minimal'] [data-list] [data-list-item][data-active='true'] [data-item-icon] {
@@ -95,12 +95,12 @@
 
 /* Literal / kanji icons */
 [data-style='minimal'] [data-list] [data-list-item] [data-item-icon-literal] {
-  @apply text-ink-soft;
+  @apply text-ink-mute;
 }
 
 [data-style='minimal'] [data-list] [data-list-item]:hover:not(:disabled) [data-item-icon-literal],
 [data-style='minimal'] [data-list] [data-list-item]:focus:not(:disabled) [data-item-icon-literal] {
-  @apply text-ink-soft;
+  @apply text-ink-mute;
 }
 
 [data-style='minimal'] [data-list] [data-list-item][data-active='true'] [data-item-icon-literal] {
@@ -108,7 +108,7 @@
 }
 
 [data-style='minimal'] [data-list] [data-list-item] [data-item-description] {
-  @apply text-ink-soft;
+  @apply text-ink-mute;
 }
 
 [data-style='minimal'] [data-list] [data-list-item][data-active='true'] [data-item-description] {
@@ -116,7 +116,7 @@
 }
 
 [data-style='minimal'] [data-list] [data-list-item] [data-item-badge] {
-  @apply text-ink-soft border-paper-edge border bg-transparent bg-none;
+  @apply text-ink-mute border-paper-edge border bg-transparent bg-none;
 }
 
 [data-style='minimal'] [data-list] [data-list-item][data-active='true'] [data-item-badge] {
@@ -128,7 +128,7 @@
    ============================================================================= */
 
 [data-style='minimal'] [data-list] [data-list-group] {
-  @apply text-ink-soft;
+  @apply text-ink-mute;
 }
 
 /* Group hover — text-only, no border */

package/src/minimal/menu.css

@@ -26,7 +26,7 @@
 
 /* Trigger elements */
 [data-style='minimal'] [data-menu-trigger] [data-menu-icon] {
-  @apply text-ink-soft;
+  @apply text-ink-mute;
 }
 
 [data-style='minimal'] [data-menu-trigger]:hover:not(:disabled) [data-menu-icon] {
@@ -34,7 +34,7 @@
 }
 
 [data-style='minimal'] [data-menu-trigger] [data-menu-arrow] {
-  @apply text-paper-edge;
+  @apply text-ink-mute;
 }
 
 /* =============================================================================
@@ -60,15 +60,15 @@
 
 /* Item elements */
 [data-style='minimal'] [data-menu-item] [data-item-icon] {
-  @apply text-ink-soft;
+  @apply text-ink-mute;
 }
 
 [data-style='minimal'] [data-menu-item]:hover:not(:disabled) [data-item-icon] {
-  @apply text-ink-soft;
+  @apply text-ink-mute;
 }
 
 [data-style='minimal'] [data-menu-item] [data-item-description] {
-  @apply text-ink-soft;
+  @apply text-ink-mute;
 }
 
 /* =============================================================================
@@ -76,7 +76,7 @@
    ============================================================================= */
 
 [data-style='minimal'] [data-menu-group] {
-  @apply text-ink-soft;
+  @apply text-ink-mute;
 }
 
 /* =============================================================================

package/src/minimal/select.css

@@ -29,7 +29,7 @@
    ============================================================================= */
 
 [data-style='minimal'] [data-select-placeholder] {
-  @apply text-ink-soft;
+  @apply text-ink-mute;
 }
 
 /* =============================================================================
@@ -37,11 +37,11 @@
    ============================================================================= */
 
 [data-style='minimal'] [data-select-arrow] {
-  @apply text-ink-soft;
+  @apply text-ink-mute;
 }
 
 [data-style='minimal'] [data-select-trigger]:hover:not(:disabled) [data-select-arrow] {
-  @apply text-ink-soft;
+  @apply text-ink-mute;
 }
 
 /* =============================================================================
@@ -53,7 +53,7 @@
 }
 
 [data-style='minimal'] [data-select-tag-remove] {
-  @apply text-ink-soft;
+  @apply text-ink-mute;
 }
 
 [data-style='minimal'] [data-select-tag-remove]:hover {
@@ -110,7 +110,7 @@
 
 /* Item elements */
 [data-style='minimal'] [data-select-option] [data-item-description] {
-  @apply text-ink-soft;
+  @apply text-ink-mute;
 }
 
 [data-style='minimal'] [data-select-option][data-selected='true'] [data-item-description] {
@@ -122,7 +122,7 @@
    ============================================================================= */
 
 [data-style='minimal'] [data-select-group-label] {
-  @apply text-ink-soft;
+  @apply text-ink-mute;
 }
 
 /* =============================================================================
@@ -150,9 +150,9 @@
 }
 
 [data-style='minimal'] [data-select-filter-input]::placeholder {
-  @apply text-ink-soft;
+  @apply text-ink-mute;
 }
 
 [data-style='minimal'] [data-select-empty] {
-  @apply text-ink-soft;
+  @apply text-ink-mute;
 }

package/src/minimal/table.css

@@ -9,7 +9,7 @@
    ============================================================================= */
 
 [data-style='minimal'] [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='minimal'] [data-table-header-cell][data-sortable='true']:hover {
@@ -22,7 +22,7 @@
 }
 
 [data-style='minimal'] [data-table-sort-icon] {
-  @apply text-ink-soft;
+  @apply text-ink-mute;
 }
 
 [data-style='minimal'] [data-table-header-cell][data-sort-order='ascending'] [data-table-sort-icon],
@@ -83,7 +83,7 @@
    ============================================================================= */
 
 [data-style='minimal'] [data-table-empty] {
-  @apply text-ink-soft;
+  @apply text-ink-mute;
 }
 
 /* =============================================================================
@@ -91,7 +91,7 @@
    ============================================================================= */
 
 [data-style='minimal'] [data-table-cell] [data-cell-icon] {
-  @apply text-ink-soft;
+  @apply text-ink-mute;
 }
 
 [data-style='minimal'] [data-table-row][data-selected='true'] [data-cell-icon] {
@@ -108,7 +108,7 @@
   }
 
   [data-style='minimal'] [data-table-responsive] [data-table-cell]::before {
-    @apply text-ink-soft;
+    @apply text-ink-mute;
   }
 
   /* Disable striped alternating bg in card layout */

package/src/minimal/tabs.css

@@ -32,7 +32,7 @@
    ============================================================================= */
 
 [data-style='minimal'] [data-tabs-trigger] {
-  @apply text-ink-soft border-b-[3px] border-b-transparent bg-transparent;
+  @apply text-ink-mute border-b-[3px] border-b-transparent bg-transparent;
   font-weight: 400;
   transition:
     color 150ms ease,
@@ -135,7 +135,7 @@
 }
 
 [data-style='minimal'] [data-tabs-trigger]:hover:not(:disabled) [data-tabs-icon] {
-  @apply text-ink-soft;
+  @apply text-ink-mute;
 }
 
 [data-style='minimal'] [data-tabs-trigger][data-selected] [data-tabs-icon] {

package/src/minimal/timeline.css

@@ -13,11 +13,11 @@
 }
 
 [data-style='minimal'] [data-timeline-item][data-completed] [data-timeline-circle] {
-  @apply border-primary text-primary;
+  @apply border-primary text-ink;
 }
 
 [data-style='minimal'] [data-timeline-item][data-active] [data-timeline-circle] {
-  @apply border-primary text-primary border-b-2;
+  @apply border-primary text-ink border-b-2;
 }
 
 /* =============================================================================
@@ -29,7 +29,7 @@
 }
 
 [data-style='minimal'] [data-timeline-item][data-completed] [data-timeline-connector] {
-  @apply bg-primary;
+  background-color: var(--primary);
 }
 
 /* =============================================================================

package/src/minimal/toggle.css

@@ -17,7 +17,7 @@
    ============================================================================= */
 
 [data-style='minimal'] [data-toggle-option] {
-  @apply text-ink-soft border-0 border-solid border-transparent;
+  @apply text-ink-mute border-0 border-solid border-transparent;
 }
 
 [data-style='minimal'] [data-toggle-option]:hover:not(:disabled):not([data-disabled='true']),
@@ -35,7 +35,7 @@
    ============================================================================= */
 
 [data-style='minimal'] [data-toggle-option] [data-toggle-icon] {
-  @apply text-ink-soft;
+  @apply text-ink-mute;
 }
 
 [data-style='minimal'] [data-toggle-option]:hover:not(:disabled) [data-toggle-icon],
@@ -55,7 +55,7 @@
    ============================================================================= */
 
 [data-style='minimal'] [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;
 }
 
@@ -65,7 +65,7 @@
 }
 
 [data-style='minimal'] [data-toggle][data-toggle-variant='button'] [data-toggle-icon] {
-  @apply text-ink-soft;
+  @apply text-ink-mute;
 }
 
 [data-style='minimal'] [data-toggle][data-toggle-variant='button']:hover:not(:disabled) [data-toggle-icon],

package/src/minimal/tree.css

@@ -4,6 +4,17 @@
  * Clean, understated tree with subtle borders.
  */
 
+/* =============================================================================
+   Connector Lines — hairline tone (mode-aware), not currentColor (which
+   renders white in dark mode and greyish in light).
+   ============================================================================= */
+
+[data-style='minimal'] [data-tree]:not([data-line-style='none']) [data-connector-v],
+[data-style='minimal'] [data-tree]:not([data-line-style='none']) [data-connector-h],
+[data-style='minimal'] [data-tree]:not([data-line-style='none']) [data-connector-corner] {
+  @apply border-paper-edge;
+}
+
 /* =============================================================================
    Tree Container
    ============================================================================= */
@@ -17,11 +28,11 @@
    ============================================================================= */
 
 [data-style='minimal'] [data-tree-toggle-btn] {
-  @apply text-paper-edge;
+  @apply text-ink-mute;
 }
 
 [data-style='minimal'] [data-tree-toggle-btn]:hover {
-  @apply text-ink-soft bg-none;
+  @apply text-ink-mute bg-none;
 }
 
 /* =============================================================================
@@ -75,11 +86,11 @@
    ============================================================================= */
 
 [data-style='minimal'] [data-tree-item-content] [data-item-icon] {
-  @apply text-ink-soft;
+  @apply text-ink-mute;
 }
 
 [data-style='minimal'] [data-tree-item-content]:hover:not(:disabled) [data-item-icon] {
-  @apply text-ink-soft;
+  @apply text-ink-mute;
 }
 
 [data-style='minimal'] [data-tree-item-content][data-active='true'] [data-item-icon] {
@@ -87,7 +98,7 @@
 }
 
 [data-style='minimal'] [data-tree-item-content] [data-item-description] {
-  @apply text-ink-soft;
+  @apply text-ink-mute;
 }
 
 [data-style='minimal'] [data-tree-item-content][data-active='true'] [data-item-description] {
@@ -95,7 +106,7 @@
 }
 
 [data-style='minimal'] [data-tree-item-content] [data-item-badge] {
-  @apply text-ink-soft border-paper-edge border bg-transparent bg-none;
+  @apply text-ink-mute border-paper-edge border bg-transparent bg-none;
 }
 
 [data-style='minimal'] [data-tree-item-content][data-active='true'] [data-item-badge] {

package/src/rokkit/avatar.css

@@ -3,7 +3,7 @@
  */
 
 [data-style='rokkit'] [data-avatar] {
-  @apply bg-paper-edge text-ink-mute;
+  @apply bg-paper-edge text-ink;
 }
 
 /* Status dot colors */

package/src/rokkit/badge.css

@@ -5,7 +5,7 @@
 /* Default variant */
 [data-style='rokkit'] [data-badge][data-variant='default'],
 [data-style='rokkit'] [data-badge]:not([data-variant]) {
-  @apply bg-ink-soft text-paper-soft;
+  @apply bg-ink-mute text-paper-soft;
 }
 
 /* Primary */

package/src/rokkit/button.css

@@ -235,7 +235,7 @@
   [data-button][data-style='ghost']:hover:not(:disabled):not(
     [data-disabled]
   )[data-variant='primary'] {
-  @apply bg-primary;
+  background-color: var(--primary);
 }
 
 [data-style='rokkit']

package/src/rokkit/divider.css

@@ -22,5 +22,5 @@
 }
 
 [data-style='rokkit'] [data-divider-label] {
-  @apply text-ink-soft;
+  @apply text-ink-mute;
 }

package/src/rokkit/dropdown.css

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

package/src/rokkit/list.css

@@ -54,7 +54,7 @@
 
 [data-style='rokkit'] [data-list] [data-list-item] [data-item-icon] {
   font-size: 1rem;
-  @apply text-ink-soft;
+  @apply text-ink-mute;
 }
 
 [data-style='rokkit'] [data-list] [data-list-item]:hover:not(:disabled) [data-item-icon],
@@ -79,7 +79,7 @@
 
 /* Literal / kanji icons */
 [data-style='rokkit'] [data-list] [data-list-item] [data-item-icon-literal] {
-  @apply text-ink-soft;
+  @apply text-ink-mute;
 }
 
 [data-style='rokkit'] [data-list] [data-list-item]:hover:not(:disabled) [data-item-icon-literal],
@@ -104,7 +104,7 @@
 
 /* Item description */
 [data-style='rokkit'] [data-list] [data-list-item] [data-item-description] {
-  @apply text-ink-soft;
+  @apply text-ink-mute;
 }
 
 [data-style='rokkit'] [data-list] [data-list-item][data-active='true'] [data-item-description] {
@@ -124,7 +124,7 @@
 
 /* Item badge */
 [data-style='rokkit'] [data-list] [data-list-item] [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'] [data-list] [data-list-item][data-active='true'] [data-item-badge] {
@@ -157,7 +157,7 @@
    ============================================================================= */
 
 [data-style='rokkit'] [data-list] [data-list-group] {
-  @apply text-ink-soft mt-2;
+  @apply text-ink-mute mt-2;
 }
 
 [data-style='rokkit'] [data-list] [data-list-group]:first-child {

package/src/rokkit/menu.css

@@ -26,7 +26,7 @@
 
 /* Trigger elements */
 [data-style='rokkit'] [data-menu-trigger] [data-menu-icon] {
-  @apply text-ink-soft;
+  @apply text-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] {
-  @apply text-ink-soft;
+  @apply text-ink-mute;
 }
 
 /* =============================================================================
@@ -64,7 +64,7 @@
 
 /* Item elements */
 [data-style='rokkit'] [data-menu-item] [data-item-icon] {
-  @apply text-ink-soft;
+  @apply text-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] {
-  @apply text-ink-soft;
+  @apply text-ink-mute;
 }
 
 /* =============================================================================
@@ -81,7 +81,7 @@
    ============================================================================= */
 
 [data-style='rokkit'] [data-menu-group] {
-  @apply text-ink-soft;
+  @apply text-ink-mute;
 }
 
 /* =============================================================================