@rokkit/themes 1.1.16 → 1.1.18

package/dist/rokkit/upload-progress.css

@@ -0,0 +1,102 @@
+/**
+ * UploadProgress - Rokkit Theme Styles
+ *
+ * Status colors, progress fill, action buttons.
+ */
+
+/* =============================================================================
+   Header
+   ============================================================================= */
+
+[data-style='rokkit'] [data-upload-header] {
+  color:var(--ink-mute);
+}
+
+[data-style='rokkit'] [data-upload-clear] {
+  border-color:var(--paper-edge);color:var(--ink-soft);
+}
+
+[data-style='rokkit'] [data-upload-clear]:hover {
+  background-color:var(--paper-mute);color:var(--ink);
+}
+
+/* =============================================================================
+   File Rows
+   ============================================================================= */
+
+[data-style='rokkit'] [data-upload-file-status] {
+  color:var(--ink-mute);
+}
+
+[data-style='rokkit'] [data-upload-file-status]:hover {
+  background-color:var(--paper-mute);
+}
+
+/* =============================================================================
+   File Elements
+   ============================================================================= */
+
+[data-style='rokkit'] [data-upload-file-icon] {
+  color:var(--ink-soft);
+}
+
+[data-style='rokkit'] [data-upload-file-size] {
+  color:var(--ink-soft);
+}
+
+/* =============================================================================
+   Progress Bar
+   ============================================================================= */
+
+[data-style='rokkit'] [data-upload-bar] {
+  background-color:var(--paper-mute);
+}
+
+[data-style='rokkit'] [data-upload-fill] {
+  --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));
+}
+
+/* =============================================================================
+   Status Colors
+   ============================================================================= */
+
+[data-style='rokkit'] [data-upload-file-status][data-status='uploading'] [data-upload-status] {
+  color:var(--primary);
+}
+
+[data-style='rokkit'] [data-upload-file-status][data-status='done'] [data-upload-status] {
+  color:var(--success);
+}
+
+[data-style='rokkit'] [data-upload-file-status][data-status='error'] [data-upload-status] {
+  color:var(--danger);
+}
+
+[data-style='rokkit'] [data-upload-file-status][data-status='pending'] [data-upload-status] {
+  color:var(--ink-soft);
+}
+
+/* Status-based file icon tinting */
+[data-style='rokkit'] [data-upload-file-status][data-status='done'] [data-upload-file-icon] {
+  color:var(--success);
+}
+
+[data-style='rokkit'] [data-upload-file-status][data-status='error'] [data-upload-file-icon] {
+  color:var(--danger);
+}
+
+/* =============================================================================
+   Action Buttons
+   ============================================================================= */
+
+[data-style='rokkit'] [data-upload-actions] button {
+  color:var(--ink-soft);
+}
+
+[data-style='rokkit'] [data-upload-actions] button:hover {
+  background-color:var(--paper-mute);color:var(--ink);
+}
+
+[data-style='rokkit'] [data-upload-file-status][data-status='error'] [data-upload-retry]:hover {
+  color:var(--primary);
+}

package/dist/rokkit/upload-target.css

@@ -0,0 +1,50 @@
+/**
+ * UploadTarget - Rokkit Theme Styles
+ *
+ * Colors, drag-over highlight, hover/focus rings.
+ */
+
+/* =============================================================================
+   Drop Zone
+   ============================================================================= */
+
+[data-style='rokkit'] [data-upload-target] {
+  border-color:var(--paper-edge);color:var(--ink-soft);
+}
+
+[data-style='rokkit'] [data-upload-target]:hover:not([data-disabled]) {
+  border-color:var(--ink-soft);color:var(--ink-mute);background-color:var(--paper-mute);
+}
+
+[data-style='rokkit'] [data-upload-target]:focus-visible:not([data-disabled]) {
+  --un-ring-width:2px;--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);border-color:var(--primary);--un-ring-color:var(--primary);
+}
+
+/* Drag-over highlight */
+[data-style='rokkit'] [data-upload-target][data-dragging] {
+  border-color:var(--primary);background-color:var(--primary);color:var(--primary);
+}
+
+/* =============================================================================
+   Upload Icon
+   ============================================================================= */
+
+[data-style='rokkit'] [data-upload-target] [data-upload-icon] {
+  color:var(--ink-soft);
+}
+
+[data-style='rokkit'] [data-upload-target][data-dragging] [data-upload-icon] {
+  color:var(--primary);
+}
+
+/* =============================================================================
+   Browse Button
+   ============================================================================= */
+
+[data-style='rokkit'] [data-upload-target] [data-upload-button] {
+  border-color:var(--paper-edge);color:var(--ink-mute);
+}
+
+[data-style='rokkit'] [data-upload-target] [data-upload-button]:hover:not(:disabled) {
+  background-color:var(--paper-mute);color:var(--ink);
+}

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 */