@rokkit/themes 1.1.17 → 1.1.19

package/dist/base/stepper.css

@@ -47,9 +47,10 @@
 }
 
 [data-stepper-step][data-completed] [data-stepper-circle] {
+  /* solid brand fill + on-primary text (dark, reads on the bright 500). */
   background-color: var(--primary);
   border-color: var(--primary);
-  color: var(--paper);
+  color: var(--on-primary);
 }
 
 /* Check glyph inside a completed circle follows the circle's color
@@ -60,7 +61,9 @@
 
 [data-stepper-step][data-active] [data-stepper-circle] {
   border-color: var(--primary);
-  color: var(--primary);
+  /* ink number (not saffron) so it reads on the page; the saffron border + ring
+     keep the active accent */
+  color: var(--ink);
   --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);
 }
 
@@ -71,9 +74,12 @@
   flex: 1;
   height: 2px;
   min-width: 2rem;
-  align-self: center;
-  /* Vertically center with the circle (half of 2.5rem) */
-  margin-top: 1.25rem;
+  /* Align to the circle's vertical center, NOT the full step height. The step
+     is `circle + label below`, so `align-self: center` drops the line into the
+     label gap (reads as bottom-aligned). Pin to the top and offset by the
+     circle's radius (1.25rem) minus half the line height. */
+  align-self: flex-start;
+  margin-top: calc(1.25rem - 1px);
   transition: background-color 0.2s ease;
 }
 

package/dist/base/table.css

@@ -66,7 +66,10 @@
   display: inline-block;
   vertical-align: middle;
   margin-left: 0.25rem;
-  opacity: 0.4;
+  /* Unsorted hint — visible enough to read as "sortable" against a tinted
+     header, but still clearly secondary to the active (sorted) state below.
+     0.4 was too faint (the glyph all but vanished on dark headers). */
+  opacity: 0.65;
   transition: opacity 150ms ease;
 }
 

package/dist/base/toggle.css

@@ -74,8 +74,11 @@
   padding-inline: 0.375rem;
 }
 
+/* Icon-only options are square — min-width matches the height (same treatment
+   the `button` variant gets), so a lone icon sits in a square, not a portrait box. */
 [data-toggle][data-toggle-size='sm']:not([data-toggle-labels='true']) [data-toggle-option] {
   padding-inline: 0.25rem;
+  min-width: var(--control-h-sm);
 }
 
 [data-toggle][data-toggle-size='sm'] [data-toggle-icon] {
@@ -98,6 +101,7 @@
 [data-toggle][data-toggle-size='md']:not([data-toggle-labels='true']) [data-toggle-option],
 [data-toggle]:not([data-toggle-size]):not([data-toggle-labels='true']) [data-toggle-option] {
   padding-inline: 0.375rem;
+  min-width: var(--control-h-md);
 }
 
 [data-toggle][data-toggle-size='md'] [data-toggle-icon],
@@ -118,6 +122,7 @@
 
 [data-toggle][data-toggle-size='lg']:not([data-toggle-labels='true']) [data-toggle-option] {
   padding-inline: 0.5rem;
+  min-width: var(--control-h-lg);
 }
 
 [data-toggle][data-toggle-size='lg'] [data-toggle-icon] {

package/dist/base.css

@@ -2279,8 +2279,11 @@
   padding-inline: 0.375rem;
 }
 
+/* Icon-only options are square — min-width matches the height (same treatment
+   the `button` variant gets), so a lone icon sits in a square, not a portrait box. */
 [data-toggle][data-toggle-size='sm']:not([data-toggle-labels='true']) [data-toggle-option] {
   padding-inline: 0.25rem;
+  min-width: var(--control-h-sm);
 }
 
 [data-toggle][data-toggle-size='sm'] [data-toggle-icon] {
@@ -2303,6 +2306,7 @@
 [data-toggle][data-toggle-size='md']:not([data-toggle-labels='true']) [data-toggle-option],
 [data-toggle]:not([data-toggle-size]):not([data-toggle-labels='true']) [data-toggle-option] {
   padding-inline: 0.375rem;
+  min-width: var(--control-h-md);
 }
 
 [data-toggle][data-toggle-size='md'] [data-toggle-icon],
@@ -2323,6 +2327,7 @@
 
 [data-toggle][data-toggle-size='lg']:not([data-toggle-labels='true']) [data-toggle-option] {
   padding-inline: 0.5rem;
+  min-width: var(--control-h-lg);
 }
 
 [data-toggle][data-toggle-size='lg'] [data-toggle-icon] {
@@ -4289,9 +4294,10 @@ a[data-card] {
 }
 
 [data-stepper-step][data-completed] [data-stepper-circle] {
+  /* solid brand fill + on-primary text (dark, reads on the bright 500). */
   background-color: var(--primary);
   border-color: var(--primary);
-  color: var(--paper);
+  color: var(--on-primary);
 }
 
 /* Check glyph inside a completed circle follows the circle's color
@@ -4302,7 +4308,9 @@ a[data-card] {
 
 [data-stepper-step][data-active] [data-stepper-circle] {
   border-color: var(--primary);
-  color: var(--primary);
+  /* ink number (not saffron) so it reads on the page; the saffron border + ring
+     keep the active accent */
+  color: var(--ink);
   --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);
 }
 
@@ -4313,9 +4321,12 @@ a[data-card] {
   flex: 1;
   height: 2px;
   min-width: 2rem;
-  align-self: center;
-  /* Vertically center with the circle (half of 2.5rem) */
-  margin-top: 1.25rem;
+  /* Align to the circle's vertical center, NOT the full step height. The step
+     is `circle + label below`, so `align-self: center` drops the line into the
+     label gap (reads as bottom-aligned). Pin to the top and offset by the
+     circle's radius (1.25rem) minus half the line height. */
+  align-self: flex-start;
+  margin-top: calc(1.25rem - 1px);
   transition: background-color 0.2s ease;
 }
 
@@ -4626,7 +4637,10 @@ a[data-card] {
   display: inline-block;
   vertical-align: middle;
   margin-left: 0.25rem;
-  opacity: 0.4;
+  /* Unsorted hint — visible enough to read as "sortable" against a tinted
+     header, but still clearly secondary to the active (sorted) state below.
+     0.4 was too faint (the glyph all but vanished on dark headers). */
+  opacity: 0.65;
   transition: opacity 150ms ease;
 }
 

package/dist/frosted/button.css

@@ -41,21 +41,21 @@
 
 [data-style='frosted'] [data-button][data-style='default'][data-variant='accent'],
 [data-style='frosted'] [data-button]:not([data-style])[data-variant='accent'] {
-  border-width:1px;background-color:color-mix(in srgb, var(--color-accent) calc(0.6 * 100%), transparent);--un-text-opacity:1;color:color-mix(in srgb, var(--color-accent-50) calc(var(--un-text-opacity) * 100%), transparent);--un-backdrop-blur:blur(24px);-webkit-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);
+  border-width:1px;background-color:color-mix(in srgb, var(--color-accent) calc(0.6 * 100%), transparent);--un-text-opacity:1;color:rgb(22 22 22 / var(--un-text-opacity));--un-backdrop-blur:blur(24px);-webkit-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);
   border-color: rgba(255, 255, 255, 0.25);
   box-shadow:
     inset 0 1px 0 rgba(255, 255, 255, 0.25),
     0 2px 8px rgba(0, 0, 0, 0.12);
-}[data-mode="dark"][data-style="frosted"] [data-button][data-style="default"][data-variant="accent"],[data-mode="dark"] [data-style="frosted"] [data-button][data-style="default"][data-variant="accent"],[data-mode="dark"][data-style="frosted"] [data-button]:not([data-style])[data-variant="accent"],[data-mode="dark"] [data-style="frosted"] [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);}
+}
 
 [data-style='frosted'] [data-button][data-style='default'][data-variant='danger'],
 [data-style='frosted'] [data-button]:not([data-style])[data-variant='danger'] {
-  border-width:1px;background-color:color-mix(in srgb, var(--color-danger) calc(0.6 * 100%), transparent);--un-text-opacity:1;color:color-mix(in srgb, var(--color-danger-50) calc(var(--un-text-opacity) * 100%), transparent);--un-backdrop-blur:blur(24px);-webkit-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);
+  border-width:1px;background-color:color-mix(in srgb, var(--color-danger) calc(0.6 * 100%), transparent);--un-text-opacity:1;color:rgb(22 22 22 / var(--un-text-opacity));--un-backdrop-blur:blur(24px);-webkit-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);
   border-color: rgba(255, 255, 255, 0.25);
   box-shadow:
     inset 0 1px 0 rgba(255, 255, 255, 0.25),
     0 2px 8px rgba(0, 0, 0, 0.12);
-}[data-mode="dark"][data-style="frosted"] [data-button][data-style="default"][data-variant="danger"],[data-mode="dark"] [data-style="frosted"] [data-button][data-style="default"][data-variant="danger"],[data-mode="dark"][data-style="frosted"] [data-button]:not([data-style])[data-variant="danger"],[data-mode="dark"] [data-style="frosted"] [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
@@ -149,16 +149,16 @@
 }
 
 [data-style='frosted'] [data-button][data-style='gradient'][data-variant='accent'] {
-  --un-gradient-from-position:0%;--un-gradient-from:color-mix(in srgb, var(--color-accent) calc(0.8 * 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(0.6 * 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);--un-backdrop-blur:blur(24px);-webkit-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);
+  --un-gradient-from-position:0%;--un-gradient-from:color-mix(in srgb, var(--color-accent) calc(0.8 * 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(0.6 * 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));--un-backdrop-blur:blur(24px);-webkit-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);
   border-color: rgba(255, 255, 255, 0.25);
   box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
-}[data-mode="dark"][data-style="frosted"] [data-button][data-style="gradient"][data-variant="accent"],[data-mode="dark"] [data-style="frosted"] [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);}
+}
 
 [data-style='frosted'] [data-button][data-style='gradient'][data-variant='danger'] {
-  --un-gradient-from-position:0%;--un-gradient-from:color-mix(in srgb, var(--color-danger) calc(0.8 * 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(0.6 * 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);--un-backdrop-blur:blur(24px);-webkit-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);
+  --un-gradient-from-position:0%;--un-gradient-from:color-mix(in srgb, var(--color-danger) calc(0.8 * 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(0.6 * 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));--un-backdrop-blur:blur(24px);-webkit-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);
   border-color: rgba(255, 255, 255, 0.25);
   box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
-}[data-mode="dark"][data-style="frosted"] [data-button][data-style="gradient"][data-variant="danger"],[data-mode="dark"] [data-style="frosted"] [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);}
+}
 
 [data-style='frosted']
   [data-button][data-style='gradient']:hover:not(:disabled):not([data-disabled]) {

package/dist/frosted/card.css

@@ -99,8 +99,8 @@
 }
 
 [data-style='frosted'] [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="frosted"] [data-card][data-variant="primary"] [data-card-body],[data-mode="dark"] [data-style="frosted"] [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 — tinted secondary glass */
 [data-style='frosted'] [data-card][data-variant='secondary'] {
@@ -117,8 +117,8 @@
 }
 
 [data-style='frosted'] [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="frosted"] [data-card][data-variant="secondary"] [data-card-body],[data-mode="dark"] [data-style="frosted"] [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 — barely-there frosted glass */
 [data-style='frosted'] [data-card][data-variant='tertiary'] {

package/dist/frosted/dropdown.css

@@ -28,11 +28,11 @@
 }
 
 [data-style='frosted'] [data-dropdown-trigger] [data-dropdown-icon] {
-  color:var(--ink-soft);
+  color:var(--ink-mute);
 }
 
 [data-style='frosted'] [data-dropdown-trigger] [data-dropdown-arrow] {
-  color:var(--ink-soft);
+  color:var(--ink-mute);
 }
 
 [data-style='frosted'] [data-dropdown-panel] {

package/dist/frosted/list.css

@@ -55,7 +55,7 @@
    ============================================================================= */
 
 [data-style='frosted'] [data-list] [data-list-item] [data-item-icon] {
-  color:var(--ink-soft);
+  color:var(--ink-mute);
 }
 
 [data-style='frosted'] [data-list] [data-list-item]:hover:not(:disabled) [data-item-icon],
@@ -69,7 +69,7 @@
 
 /* Literal / kanji icons */
 [data-style='frosted'] [data-list] [data-list-item] [data-item-icon-literal] {
-  color:var(--ink-soft);
+  color:var(--ink-mute);
 }
 
 [data-style='frosted'] [data-list] [data-list-item]:hover:not(:disabled) [data-item-icon-literal],
@@ -93,7 +93,7 @@
 }
 
 [data-style='frosted'] [data-list] [data-list-item] [data-item-description] {
-  color:var(--ink-soft);
+  color:var(--ink-mute);
 }
 
 [data-style='frosted'] [data-list] [data-list-item][data-active='true'] [data-item-description] {
@@ -101,7 +101,7 @@
 }
 
 [data-style='frosted'] [data-list] [data-list-item] [data-item-badge] {
-  background-image:none;color:var(--ink-soft);
+  background-image:none;color:var(--ink-mute);
   background-color: color-mix(in oklch, var(--paper-mute) 15%, transparent);
 }
 
@@ -114,7 +114,7 @@
    ============================================================================= */
 
 [data-style='frosted'] [data-list] [data-list-group] {
-  color:var(--ink-soft);
+  color:var(--ink-mute);
 }
 
 [data-style='frosted'] [data-list] [data-list-group]:hover:not(:disabled),

package/dist/frosted/menu.css

@@ -33,7 +33,7 @@
 
 /* Trigger elements */
 [data-style='frosted'] [data-menu-trigger] [data-menu-icon] {
-  color:var(--ink-soft);
+  color:var(--ink-mute);
 }
 
 [data-style='frosted'] [data-menu-trigger]:hover:not(:disabled) [data-menu-icon] {
@@ -41,7 +41,7 @@
 }
 
 [data-style='frosted'] [data-menu-trigger] [data-menu-arrow] {
-  color:var(--ink-soft);
+  color:var(--ink-mute);
 }
 
 /* =============================================================================
@@ -78,7 +78,7 @@
 
 /* Item elements */
 [data-style='frosted'] [data-menu-item] [data-item-icon] {
-  color:var(--ink-soft);
+  color:var(--ink-mute);
 }
 
 [data-style='frosted'] [data-menu-item]:hover:not(:disabled) [data-item-icon] {
@@ -86,7 +86,7 @@
 }
 
 [data-style='frosted'] [data-menu-item] [data-item-description] {
-  color:var(--ink-soft);
+  color:var(--ink-mute);
 }
 
 /* =============================================================================
@@ -94,7 +94,7 @@
    ============================================================================= */
 
 [data-style='frosted'] [data-menu-group] {
-  color:var(--ink-soft);
+  color:var(--ink-mute);
 }
 
 /* =============================================================================

package/dist/frosted/message.css

@@ -4,7 +4,7 @@
 
 [data-style='frosted'] [data-message-root][data-type='error'] {
   border-color:color-mix(in srgb, var(--color-error) calc(0.4 * 100%), transparent);--un-backdrop-blur:blur(4px);-webkit-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);color:var(--error);
-  background-color: color-mix(in oklch, var(--error-soft) 50%, transparent);
+  background-color: var(--error-soft);
 }
 [data-style='frosted'] [data-message-root][data-type='error'] [data-message-icon],
 [data-style='frosted'] [data-message-root][data-type='error'] [data-message-dismiss] {
@@ -13,7 +13,7 @@
 
 [data-style='frosted'] [data-message-root][data-type='warning'] {
   border-color:color-mix(in srgb, var(--color-warning) calc(0.4 * 100%), transparent);--un-backdrop-blur:blur(4px);-webkit-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);color:var(--warning);
-  background-color: color-mix(in oklch, var(--warning-soft) 50%, transparent);
+  background-color: var(--warning-soft);
 }
 [data-style='frosted'] [data-message-root][data-type='warning'] [data-message-icon],
 [data-style='frosted'] [data-message-root][data-type='warning'] [data-message-dismiss] {
@@ -22,7 +22,7 @@
 
 [data-style='frosted'] [data-message-root][data-type='info'] {
   border-color:color-mix(in srgb, var(--color-info) calc(0.4 * 100%), transparent);--un-backdrop-blur:blur(4px);-webkit-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);color:var(--info);
-  background-color: color-mix(in oklch, var(--info-soft) 50%, transparent);
+  background-color: var(--info-soft);
 }
 [data-style='frosted'] [data-message-root][data-type='info'] [data-message-icon],
 [data-style='frosted'] [data-message-root][data-type='info'] [data-message-dismiss] {
@@ -31,7 +31,7 @@
 
 [data-style='frosted'] [data-message-root][data-type='success'] {
   border-color:color-mix(in srgb, var(--color-success) calc(0.4 * 100%), transparent);--un-backdrop-blur:blur(4px);-webkit-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);color:var(--success);
-  background-color: color-mix(in oklch, var(--success-soft) 50%, transparent);
+  background-color: var(--success-soft);
 }
 [data-style='frosted'] [data-message-root][data-type='success'] [data-message-icon],
 [data-style='frosted'] [data-message-root][data-type='success'] [data-message-dismiss] {

package/dist/frosted/select.css

@@ -42,7 +42,7 @@
    ============================================================================= */
 
 [data-style='frosted'] [data-select-placeholder] {
-  color:var(--ink-soft);
+  color:var(--ink-mute);
 }
 
 /* =============================================================================
@@ -50,7 +50,7 @@
    ============================================================================= */
 
 [data-style='frosted'] [data-select-arrow] {
-  color:var(--ink-soft);
+  color:var(--ink-mute);
 }
 
 [data-style='frosted'] [data-select-trigger]:hover:not(:disabled) [data-select-arrow] {
@@ -67,7 +67,7 @@
 }
 
 [data-style='frosted'] [data-select-tag-remove] {
-  color:var(--ink-soft);
+  color:var(--ink-mute);
 }
 
 [data-style='frosted'] [data-select-tag-remove]:hover {
@@ -129,7 +129,7 @@
 
 /* Item elements */
 [data-style='frosted'] [data-select-option] [data-item-icon] {
-  color:var(--ink-soft);
+  color:var(--ink-mute);
 }
 
 [data-style='frosted'] [data-select-option]:hover:not(:disabled) [data-item-icon] {
@@ -141,7 +141,7 @@
 }
 
 [data-style='frosted'] [data-select-option] [data-item-description] {
-  color:var(--ink-soft);
+  color:var(--ink-mute);
 }
 
 [data-style='frosted'] [data-select-option][data-selected='true'] [data-item-description] {
@@ -153,7 +153,7 @@
    ============================================================================= */
 
 [data-style='frosted'] [data-select-group-label] {
-  color:var(--ink-soft);
+  color:var(--ink-mute);
 }
 
 /* =============================================================================
@@ -184,9 +184,9 @@
 }
 
 [data-style='frosted'] [data-select-filter-input]::placeholder {
-  color:var(--ink-soft);
+  color:var(--ink-mute);
 }
 
 [data-style='frosted'] [data-select-empty] {
-  color:var(--ink-soft);
+  color:var(--ink-mute);
 }

package/dist/frosted/table.css

@@ -9,7 +9,7 @@
    ============================================================================= */
 
 [data-style='frosted'] [data-table-header] th {
-  border-bottom-width:1px;--un-backdrop-blur:blur(4px);-webkit-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);color:var(--ink-soft);
+  border-bottom-width:1px;--un-backdrop-blur:blur(4px);-webkit-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);color:var(--ink-mute);
   border-color: color-mix(in oklch, var(--ink-soft) 20%, transparent);
   background-color: color-mix(in oklch, var(--paper-mute) 80%, transparent);
 }
@@ -24,7 +24,7 @@
 }
 
 [data-style='frosted'] [data-table-sort-icon] {
-  color:var(--ink-soft);
+  color:var(--ink-mute);
 }
 
 [data-style='frosted'] [data-table-header-cell][data-sort-order='ascending'] [data-table-sort-icon],
@@ -85,7 +85,7 @@
    ============================================================================= */
 
 [data-style='frosted'] [data-table-empty] {
-  color:var(--ink-soft);
+  color:var(--ink-mute);
 }
 
 /* =============================================================================
@@ -93,7 +93,7 @@
    ============================================================================= */
 
 [data-style='frosted'] [data-table-cell] [data-cell-icon] {
-  color:var(--ink-soft);
+  color:var(--ink-mute);
 }
 
 [data-style='frosted'] [data-table-row][data-selected='true'] [data-cell-icon] {
@@ -112,7 +112,7 @@
   }
 
   [data-style='frosted'] [data-table-responsive] [data-table-cell]::before {
-    color:var(--ink-soft);
+    color:var(--ink-mute);
   }
 
   /* Disable striped alternating bg in card layout */

package/dist/frosted/tabs.css

@@ -23,7 +23,7 @@
    ============================================================================= */
 
 [data-style='frosted'] [data-tabs-trigger] {
-  background-color:transparent;color:var(--ink-soft);
+  background-color:transparent;color:var(--ink-mute);
 }
 
 [data-style='frosted'] [data-tabs-trigger]:hover:not(:disabled):not([data-disabled]) {
@@ -41,7 +41,7 @@
    ============================================================================= */
 
 [data-style='frosted'] [data-tabs-trigger] [data-tabs-icon] {
-  color:var(--ink-soft);
+  color:var(--ink-mute);
 }
 
 [data-style='frosted'] [data-tabs-trigger]:hover:not(:disabled) [data-tabs-icon] {

package/dist/frosted/timeline.css

@@ -18,7 +18,7 @@
 }
 
 [data-style='frosted'] [data-timeline-item][data-active] [data-timeline-circle] {
-  border-color:color-mix(in srgb, var(--color-primary) calc(0.6 * 100%), transparent);--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.15 * 100%), transparent);color:var(--primary);
+  border-color:color-mix(in srgb, var(--color-primary) calc(0.6 * 100%), transparent);--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.15 * 100%), transparent);color:var(--ink);
 }
 
 /* =============================================================================

package/dist/frosted/toggle.css

@@ -19,7 +19,7 @@
    ============================================================================= */
 
 [data-style='frosted'] [data-toggle-option] {
-  color:var(--ink-soft);
+  color:var(--ink-mute);
 }
 
 [data-style='frosted'] [data-toggle-option]:hover:not(:disabled):not([data-disabled='true']),
@@ -38,7 +38,7 @@
    ============================================================================= */
 
 [data-style='frosted'] [data-toggle-option] [data-toggle-icon] {
-  color:var(--ink-soft);
+  color:var(--ink-mute);
 }
 
 [data-style='frosted'] [data-toggle-option]:hover:not(:disabled) [data-toggle-icon],
@@ -58,7 +58,7 @@
    ============================================================================= */
 
 [data-style='frosted'] [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;
 }
 
@@ -68,7 +68,7 @@
 }
 
 [data-style='frosted'] [data-toggle][data-toggle-variant='button'] [data-toggle-icon] {
-  color:var(--ink-soft);
+  color:var(--ink-mute);
 }
 
 [data-style='frosted'] [data-toggle][data-toggle-variant='button']:hover:not(:disabled) [data-toggle-icon],

package/dist/frosted/tree.css

@@ -4,6 +4,17 @@
  * Glassmorphism styling with blur and transparency.
  */
 
+/* =============================================================================
+   Connector Lines — hairline tone (mode-aware), not currentColor (which
+   renders white in dark mode and greyish in light).
+   ============================================================================= */
+
+[data-style='frosted'] [data-tree]:not([data-line-style='none']) [data-connector-v],
+[data-style='frosted'] [data-tree]:not([data-line-style='none']) [data-connector-h],
+[data-style='frosted'] [data-tree]:not([data-line-style='none']) [data-connector-corner] {
+  border-color:var(--paper-edge);
+}
+
 /* =============================================================================
    Tree Container
    ============================================================================= */
@@ -18,7 +29,7 @@
    ============================================================================= */
 
 [data-style='frosted'] [data-tree-toggle-btn] {
-  color:var(--ink-soft);
+  color:var(--ink-mute);
 }
 
 [data-style='frosted'] [data-tree-toggle-btn]:hover {
@@ -60,7 +71,7 @@
    ============================================================================= */
 
 [data-style='frosted'] [data-tree-item-content] [data-item-icon] {
-  color:var(--ink-soft);
+  color:var(--ink-mute);
 }
 
 [data-style='frosted'] [data-tree-item-content]:hover:not(:disabled) [data-item-icon] {
@@ -72,7 +83,7 @@
 }
 
 [data-style='frosted'] [data-tree-item-content] [data-item-description] {
-  color:var(--ink-soft);
+  color:var(--ink-mute);
 }
 
 [data-style='frosted'] [data-tree-item-content][data-active='true'] [data-item-description] {
@@ -80,7 +91,7 @@
 }
 
 [data-style='frosted'] [data-tree-item-content] [data-item-badge] {
-  color:var(--ink-soft);
+  color:var(--ink-mute);
   background-color: color-mix(in oklch, var(--paper-mute) 15%, transparent);
 }