@godxjp/ui 28.13.0 → 30.0.0

package/dist/styles/data-display-layout.css

@@ -11,7 +11,7 @@
     border-radius: var(--radius-pill);
     background:
       linear-gradient(var(--avatar-tint), var(--avatar-tint)),
-      var(--avatar-background, hsl(var(--muted)));
+      var(--avatar-background, hsl(var(--muted) / var(--avatar-background-alpha, 100%)));
     color: hsl(var(--muted-foreground));
     font-size: var(--avatar-font-size);
     font-weight: var(--font-weight-medium);
@@ -20,14 +20,14 @@
   .ui-avatar[data-shape="square"] {
     inline-size: var(--avatar-square-size);
     block-size: var(--avatar-square-size);
-    border-radius: var(--avatar-square-radius);
+    border-radius: var(--avatar-square-radius, var(--radius));
     --avatar-background: var(--avatar-square-background, hsl(var(--primary)));
     color: var(--avatar-square-foreground, hsl(var(--primary-foreground)));
   }
 
   .ui-avatar[data-appearance="tinted"] {
     --avatar-background: var(--avatar-tinted-background, hsl(var(--primary) / 0.1));
-    color: var(--avatar-tinted-foreground, hsl(var(--primary)));
+    color: var(--avatar-tinted-foreground, hsl(var(--text-brand, var(--primary))));
   }
 
   .ui-avatar[data-appearance="tinted"] svg {
@@ -78,7 +78,7 @@
     height: 100%;
     align-items: center;
     justify-content: center;
-    background: var(--avatar-background, hsl(var(--muted)));
+    background: var(--avatar-background, hsl(var(--muted) / var(--avatar-background-alpha, 100%)));
   }
 
   .ui-avatar[data-presence] {
@@ -101,11 +101,11 @@
     block-size: var(--avatar-presence-size);
     min-inline-size: var(--avatar-presence-min-size);
     min-block-size: var(--avatar-presence-min-size);
-    border: var(--avatar-presence-stroke-width) solid transparent;
+    border: var(--avatar-presence-stroke-width, var(--stroke-sm)) solid transparent;
     border-radius: var(--radius-pill);
     background-origin: border-box;
 
-    box-shadow: 0 0 0 var(--avatar-presence-ring-width)
+    box-shadow: 0 0 0 var(--avatar-presence-ring-width, var(--stroke-md))
       hsl(var(--avatar-presence-ring-color, var(--background)));
   }
 
@@ -135,7 +135,7 @@
     inset: 0;
     margin: auto;
     inline-size: var(--avatar-presence-bar-inline-size);
-    block-size: var(--avatar-presence-bar-block-size);
+    block-size: var(--avatar-presence-bar-block-size, var(--stroke-sm));
     border-radius: var(--radius-pill);
     background: hsl(var(--avatar-presence-ring-color, var(--background)));
   }
@@ -150,7 +150,7 @@
       border-color: CanvasText;
       background-color: CanvasText;
       background-image: none;
-      outline: var(--avatar-presence-ring-width) solid Canvas;
+      outline: var(--avatar-presence-ring-width, var(--stroke-md)) solid Canvas;
     }
 
     [data-slot="avatar-presence"][data-presence="away"] {
@@ -176,7 +176,10 @@
     height: var(--progress-meter-block-size);
     overflow: hidden;
     border-radius: var(--radius-pill);
-    background: var(--progress-track-background, hsl(var(--secondary)));
+    background: var(
+      --progress-track-background,
+      hsl(var(--secondary) / var(--progress-track-background-alpha, 100%))
+    );
   }
 
   .ui-progress-bar {
@@ -207,7 +210,7 @@
   .ui-progress[data-breakdown] .ui-progress-track {
     display: flex;
     height: var(--progress-breakdown-block-size);
-    border-radius: var(--progress-breakdown-radius);
+    border-radius: var(--progress-breakdown-radius, var(--radius));
   }
 
   .ui-progress[data-size="sm"] .ui-progress-track {
@@ -265,11 +268,14 @@
   .ui-progress-ring-track,
   .ui-progress-ring-indicator {
     fill: none;
-    stroke-width: var(--progress-ring-border-width);
+    stroke-width: var(--progress-ring-border-width, var(--stroke-lg));
   }
 
   .ui-progress-ring-track {
-    stroke: var(--progress-track-background, hsl(var(--secondary)));
+    stroke: var(
+      --progress-track-background,
+      hsl(var(--secondary) / var(--progress-track-background-alpha, 100%))
+    );
   }
 
   .ui-progress-ring-indicator {
@@ -295,7 +301,8 @@
     line-height: var(--line-height-normal);
 
     max-inline-size: calc(
-      var(--progress-ring-size) - 2 * var(--progress-ring-border-width) - var(--space-1)
+      var(--progress-ring-size) - 2 * var(--progress-ring-border-width, var(--stroke-lg)) -
+        var(--space-1)
     );
     overflow: hidden;
     text-overflow: ellipsis;
@@ -381,7 +388,7 @@
     block-size: var(--swatch-size);
     border-radius: var(--swatch-radius);
     background: var(--swatch-color);
-    box-shadow: inset 0 0 0 var(--swatch-border-width)
+    box-shadow: inset 0 0 0 var(--swatch-border-width, var(--stroke-hairline))
       var(--swatch-border-color, hsl(var(--border)));
     forced-color-adjust: none;
   }
@@ -445,8 +452,8 @@
 
     max-inline-size: 100%;
     block-size: var(--thumbnail-block-size);
-    border: var(--thumbnail-border-width) solid hsl(var(--border));
-    border-radius: var(--thumbnail-radius);
+    border: var(--thumbnail-border-width, var(--stroke-hairline)) solid hsl(var(--border));
+    border-radius: var(--thumbnail-radius, var(--radius));
 
     background: hsl(var(--muted));
     object-fit: contain;
@@ -490,7 +497,7 @@
     width: 1.5rem;
     height: 1.5rem;
     place-items: center;
-    border: 1px solid transparent;
+    border: var(--stroke-hairline) solid transparent;
     border-radius: var(--radius-pill);
     background: var(--timeline-dot-done-background, hsl(var(--primary)));
     color: var(--timeline-dot-done-foreground, hsl(var(--primary-foreground)));
@@ -508,7 +515,8 @@
   .ui-timeline-dot[data-current="true"] {
     background: var(--timeline-dot-current-background, hsl(var(--primary)));
     color: hsl(var(--primary-foreground));
-    box-shadow: 0 0 0 var(--timeline-dot-current-ring-width) hsl(var(--primary) / 0.2);
+    box-shadow: 0 0 0 var(--timeline-dot-current-ring-width, var(--stroke-xl))
+      hsl(var(--primary) / 0.2);
   }
 
   .ui-timeline-dot[data-status="pending"] {
@@ -557,7 +565,7 @@
   }
 
   .ui-timeline-title[data-current="true"] {
-    color: hsl(var(--primary));
+    color: hsl(var(--text-brand, var(--primary)));
     font-weight: var(--font-weight-semibold);
   }
 
@@ -575,7 +583,7 @@
 }
 
 .ui-accordion-item {
-  border-bottom: 1px solid hsl(var(--border));
+  border-bottom: var(--stroke-hairline) solid hsl(var(--border));
 }
 .ui-accordion-header {
   display: flex;
@@ -595,7 +603,7 @@
   text-decoration: underline;
 }
 .ui-accordion-trigger:focus-visible {
-  border-radius: var(--radius-sm);
+  border-radius: var(--radius-sm, calc(var(--radius) / var(--radius-ratio) / var(--radius-ratio)));
 }
 .ui-accordion-trigger:disabled,
 .ui-accordion-trigger[data-disabled] {
@@ -624,9 +632,9 @@
 .ui-hover-card-content {
   z-index: 50;
   width: 16rem;
-  border-radius: var(--radius-md);
-  border: 1px solid hsl(var(--border));
-  background: hsl(var(--popover));
+  border-radius: var(--radius-md, calc(var(--radius) / var(--radius-ratio)));
+  border: var(--stroke-hairline) solid hsl(var(--border));
+  background: hsl(var(--popover) / var(--popover-alpha, 100%));
   color: hsl(var(--popover-foreground));
   padding: var(--space-4);
   box-shadow: var(--shadow-md);
@@ -653,10 +661,18 @@
   padding-inline: var(--space-4);
 }
 
+.ui-carousel:has(.ui-carousel-dots) {
+  --carousel-dots-block-size: calc(var(--space-4) + var(--touch-target-min));
+}
+
 .ui-carousel-previous,
 .ui-carousel-next {
   position: absolute;
-  top: 50%;
+
+  inset-block-start: var(
+    --carousel-arrow-inset-block-start,
+    calc(50% - var(--carousel-dots-block-size) / 2)
+  );
   z-index: 20;
   display: grid;
   width: 2rem;
@@ -664,7 +680,7 @@
   place-items: center;
   border-radius: var(--radius-pill);
   background: hsl(var(--background));
-  border: 1px solid hsl(var(--border));
+  border: var(--stroke-hairline) solid hsl(var(--border));
   color: hsl(var(--foreground));
   transition: background-color 150ms ease;
   transform: translateY(-50%);
@@ -685,8 +701,15 @@
 }
 
 .ui-carousel-arrow {
+  display: grid;
   width: var(--carousel-arrow-icon-size);
   height: var(--carousel-arrow-icon-size);
+  place-items: center;
+}
+
+.ui-carousel-arrow > * {
+  width: 100%;
+  height: 100%;
 }
 
 .ui-carousel-dots {
@@ -786,7 +809,7 @@
     align-items: flex-start;
   }
   [data-slot="list-row"]:not(:last-child) {
-    border-block-end: var(--list-row-border, 1px solid hsl(var(--border)));
+    border-block-end: var(--list-row-border, var(--stroke-hairline) solid hsl(var(--border)));
   }
 
   [data-slot="list-row-item"] {
@@ -794,7 +817,7 @@
     list-style: none;
   }
   [data-slot="list-row-item"]:not(:last-child) {
-    border-block-end: var(--list-row-border, 1px solid hsl(var(--border)));
+    border-block-end: var(--list-row-border, var(--stroke-hairline) solid hsl(var(--border)));
   }
   [data-slot="list-row-indicator"] {
     position: relative;
@@ -886,7 +909,7 @@
     min-height: var(--control-height);
     padding-block: var(--space-1);
     padding-inline: var(--space-3);
-    border: 1px solid hsl(var(--border));
+    border: var(--stroke-hairline) solid hsl(var(--border));
     border-radius: var(--control-radius);
     background: hsl(var(--muted) / 0.4);
   }
@@ -938,12 +961,51 @@
     inset-inline-start: 0;
 
     z-index: 20;
-    background-color: inherit;
-    border-inline-end: 1px solid hsl(var(--border));
+    background-color: hsl(var(--card) / var(--card-alpha, 100%));
+    border-inline-end: var(--stroke-hairline) solid hsl(var(--border));
     inline-size: var(--permission-matrix-label-width);
     min-inline-size: var(--permission-matrix-label-width);
   }
 
+  .ui-permission-matrix .ui-table-row[data-tone] > .ui-permission-matrix-pin {
+    background-image: linear-gradient(
+      var(
+        --table-row-tone-surface,
+        hsl(var(--table-row-tone-color) / var(--table-row-tone-wash-alpha))
+      ),
+      var(
+        --table-row-tone-surface,
+        hsl(var(--table-row-tone-color) / var(--table-row-tone-wash-alpha))
+      )
+    );
+  }
+
+  .ui-permission-matrix tbody tr:hover > .ui-permission-matrix-pin {
+    background-image: linear-gradient(
+      var(
+        --table-row-hover-background,
+        hsl(var(--accent) / var(--table-row-hover-background-alpha, 0.7))
+      ),
+      var(
+        --table-row-hover-background,
+        hsl(var(--accent) / var(--table-row-hover-background-alpha, 0.7))
+      )
+    );
+  }
+
+  .ui-permission-matrix tbody tr[data-state="selected"] > .ui-permission-matrix-pin {
+    background-image: linear-gradient(
+      var(
+        --table-row-selected-background,
+        hsl(var(--primary) / var(--table-row-selected-background-alpha, 0.06))
+      ),
+      var(
+        --table-row-selected-background,
+        hsl(var(--primary) / var(--table-row-selected-background-alpha, 0.06))
+      )
+    );
+  }
+
   .ui-permission-matrix-role {
     display: inline-flex;
     align-items: center;
@@ -1016,7 +1078,7 @@
   :is(.ui-code-block, .ui-prose pre) {
     margin: 0;
     overflow: auto;
-    border-radius: var(--code-block-radius);
+    border-radius: var(--code-block-radius, calc(var(--radius) / var(--radius-ratio)));
     background: hsl(var(--muted));
     padding: var(--code-block-space-inset);
     color: var(--code-block-foreground, hsl(var(--foreground)));
@@ -1062,7 +1124,7 @@
 
   .ui-code-block [data-code-token="keyword"],
   .ui-prose pre [data-code-token="keyword"] {
-    color: var(--code-block-token-keyword-color, hsl(var(--primary)));
+    color: var(--code-block-token-keyword-color, hsl(var(--text-brand, var(--primary))));
   }
 
   .ui-code-block [data-code-token="string"],
@@ -1207,7 +1269,7 @@
   }
 
   .ui-prose blockquote {
-    border-inline-start: var(--prose-quote-border-width) solid hsl(var(--border));
+    border-inline-start: var(--prose-quote-border-width, var(--stroke-md)) solid hsl(var(--border));
     padding-inline-start: var(--prose-quote-space-inline);
     color: hsl(var(--muted-foreground));
   }
@@ -1217,11 +1279,14 @@
     font-size: var(--prose-code-font-size);
     background: hsl(var(--muted));
     padding-inline: var(--prose-code-space-inline);
-    border-radius: var(--prose-code-radius);
+    border-radius: var(
+      --prose-code-radius,
+      calc(var(--radius) / var(--radius-ratio) / var(--radius-ratio))
+    );
   }
 
   .ui-prose a {
-    color: hsl(var(--prose-link-color, var(--primary)));
+    color: hsl(var(--prose-link-color, var(--text-link, var(--primary))));
     text-decoration-line: var(--prose-link-decoration-line);
   }
 
@@ -1245,7 +1310,7 @@
   .ui-prose img {
     max-inline-size: 100%;
     block-size: auto;
-    border-radius: var(--prose-image-radius);
+    border-radius: var(--prose-image-radius, calc(var(--radius) / var(--radius-ratio)));
   }
 
   .ui-prose[data-image-size="original"] img {
@@ -1271,7 +1336,7 @@
   }
 
   .ui-timeline-grid-corner {
-    border-block-end: 1px solid hsl(var(--border));
+    border-block-end: var(--stroke-hairline) solid hsl(var(--border));
   }
 
   .ui-timeline-grid-head {
@@ -1279,8 +1344,8 @@
     flex-direction: column;
     align-items: center;
     padding: var(--space-1);
-    border-block-end: 1px solid hsl(var(--border));
-    border-inline-start: 1px solid hsl(var(--border));
+    border-block-end: var(--stroke-hairline) solid hsl(var(--border));
+    border-inline-start: var(--stroke-hairline) solid hsl(var(--border));
     background: hsl(var(--secondary));
     font-size: var(--timeline-grid-head-font-size);
     font-weight: var(--font-weight-medium);
@@ -1319,7 +1384,7 @@
   .ui-timeline-grid-column {
     margin: 0;
     padding: 0;
-    border-inline-start: 1px solid hsl(var(--border));
+    border-inline-start: var(--stroke-hairline) solid hsl(var(--border));
     background-image: repeating-linear-gradient(
       to bottom,
       var(--timeline-grid-line-color, hsl(var(--border))) 0 1px,
@@ -1358,9 +1423,12 @@
     inline-size: 100%;
     block-size: 100%;
     padding: var(--timeline-grid-event-space-inset);
-    border-inline-start: var(--timeline-grid-event-border-width) solid
+    border-inline-start: var(--timeline-grid-event-border-width, var(--stroke-md)) solid
       var(--timeline-grid-event-color, hsl(var(--primary)));
-    border-radius: var(--timeline-grid-event-radius);
+    border-radius: var(
+      --timeline-grid-event-radius,
+      calc(var(--radius) / var(--radius-ratio) / var(--radius-ratio))
+    );
 
     background-color: color-mix(
       in srgb,
@@ -1422,7 +1490,7 @@
     position: absolute;
     inset-inline: 0;
     inset-block-start: calc(var(--timeline-grid-hour-height) * var(--timeline-grid-now-offset, 0));
-    block-size: var(--timeline-grid-now-width);
+    block-size: var(--timeline-grid-now-width, var(--stroke-sm));
     background: var(--timeline-grid-now-color, hsl(var(--destructive)));
     pointer-events: none;
   }
@@ -1450,8 +1518,8 @@
 @layer components {
   .ui-range-timeline {
     overflow: auto;
-    border: 1px solid hsl(var(--range-timeline-border-color));
-    border-radius: var(--radius-md);
+    border: var(--stroke-hairline) solid hsl(var(--range-timeline-border-color));
+    border-radius: var(--radius-md, calc(var(--radius) / var(--radius-ratio)));
   }
   .ui-range-timeline-canvas {
     min-inline-size: calc(
@@ -1472,9 +1540,9 @@
     position: sticky;
     inset-inline-start: 0;
     z-index: 1;
-    background: hsl(var(--card));
+    background: hsl(var(--card) / var(--card-alpha, 100%));
     padding: var(--space-2);
-    border-inline-end: 1px solid hsl(var(--range-timeline-border-color));
+    border-inline-end: var(--stroke-hairline) solid hsl(var(--range-timeline-border-color));
   }
 
   .ui-range-timeline-columns {
@@ -1486,9 +1554,11 @@
     min-inline-size: 0;
     overflow: hidden;
     padding: var(--space-2);
-    padding-inline-start: calc(var(--space-2) + var(--range-timeline-grid-width));
+    padding-inline-start: calc(
+      var(--space-2) + var(--range-timeline-grid-width, var(--stroke-hairline))
+    );
     text-align: center;
-    border-inline-end: var(--range-timeline-grid-width) solid
+    border-inline-end: var(--range-timeline-grid-width, var(--stroke-hairline)) solid
       hsl(var(--range-timeline-border-color));
   }
   .ui-range-timeline-track {
@@ -1511,7 +1581,7 @@
   .ui-range-timeline-grid-column {
     min-inline-size: 0;
     padding-inline: var(--space-2);
-    border-inline-end: var(--range-timeline-grid-width) solid transparent;
+    border-inline-end: var(--range-timeline-grid-width, var(--stroke-hairline)) solid transparent;
   }
   .ui-range-timeline-grid-column[data-muted="true"] {
     background: var(--range-timeline-muted-column-background, hsl(var(--muted)));
@@ -1524,7 +1594,7 @@
   }
   .ui-range-timeline[data-bordered="true"] .ui-range-timeline-header + .ui-range-timeline-header,
   .ui-range-timeline[data-bordered="true"] .ui-range-timeline-row {
-    border-block-start: var(--range-timeline-grid-width) solid
+    border-block-start: var(--range-timeline-grid-width, var(--stroke-hairline)) solid
       var(--range-timeline-grid-color, hsl(var(--border)));
   }
 
@@ -1563,7 +1633,10 @@
     inset-block-start: 50%;
     transform: translateY(-50%);
     block-size: var(--range-timeline-bar-height);
-    border-radius: var(--radius-sm);
+    border-radius: var(
+      --radius-sm,
+      calc(var(--radius) / var(--radius-ratio) / var(--radius-ratio))
+    );
     background: hsl(var(--primary));
     color: hsl(var(--primary-foreground));
   }
@@ -1587,7 +1660,7 @@
   .ui-range-timeline-today {
     position: absolute;
     inset-block: 0;
-    border-inline-start: 1px solid hsl(var(--primary));
+    border-inline-start: var(--stroke-hairline) solid hsl(var(--primary));
   }
 
   .ui-range-timeline-label[data-nested="true"] {
@@ -1646,16 +1719,20 @@
 
   [data-slot="descriptions"][data-bordered] {
     gap: 0;
-    border-inline-end: var(--descriptions-border-width) solid hsl(var(--border));
-    border-block-end: var(--descriptions-border-width) solid hsl(var(--border));
-    border-radius: var(--descriptions-border-radius);
+    border-inline-end: var(--descriptions-border-width, var(--stroke-hairline)) solid
+      hsl(var(--border));
+    border-block-end: var(--descriptions-border-width, var(--stroke-hairline)) solid
+      hsl(var(--border));
+    border-radius: var(--descriptions-border-radius, calc(var(--radius) / var(--radius-ratio)));
     overflow: hidden;
   }
 
   [data-slot="descriptions"][data-bordered] [data-slot="descriptions-item"] {
     gap: 0;
-    border-block-start: var(--descriptions-border-width) solid hsl(var(--border));
-    border-inline-start: var(--descriptions-border-width) solid hsl(var(--border));
+    border-block-start: var(--descriptions-border-width, var(--stroke-hairline)) solid
+      hsl(var(--border));
+    border-inline-start: var(--descriptions-border-width, var(--stroke-hairline)) solid
+      hsl(var(--border));
   }
 
   [data-slot="descriptions"][data-bordered]
@@ -1670,7 +1747,8 @@
   [data-slot="descriptions"][data-bordered]
     [data-slot="descriptions-item"][data-layout="horizontal"]
     [data-slot="descriptions-label"] {
-    border-inline-end: var(--descriptions-border-width) solid hsl(var(--border));
+    border-inline-end: var(--descriptions-border-width, var(--stroke-hairline)) solid
+      hsl(var(--border));
   }
 }
 
@@ -1771,7 +1849,10 @@
   }
   .ui-text[data-chip] {
     background: hsl(var(--muted));
-    border-radius: var(--prose-code-radius);
+    border-radius: var(
+      --prose-code-radius,
+      calc(var(--radius) / var(--radius-ratio) / var(--radius-ratio))
+    );
     padding-inline: var(--prose-code-space-inline);
     font-size: var(--prose-code-font-size);
   }
@@ -1816,7 +1897,7 @@
 
   .ui-chat-bubble-body {
     min-inline-size: 0;
-    border-radius: var(--chat-bubble-radius);
+    border-radius: var(--chat-bubble-radius, var(--radius));
     padding-block: var(--chat-bubble-padding-block);
     padding-inline: var(--chat-bubble-padding-inline);
     background: var(--chat-bubble-background, hsl(var(--muted)));
@@ -1860,28 +1941,37 @@
 
   .ui-chat-bubble[data-tone="info"] .ui-chat-bubble-body {
     border: var(--stroke-hairline) solid hsl(var(--info) / var(--chat-bubble-tone-border-alpha));
-    background: hsl(var(--info) / var(--chat-bubble-tone-background-alpha));
+    background: var(--surface-info, hsl(var(--info) / var(--chat-bubble-tone-background-alpha)));
   }
 
   .ui-chat-bubble[data-tone="success"] .ui-chat-bubble-body {
     border: var(--stroke-hairline) solid hsl(var(--success) / var(--chat-bubble-tone-border-alpha));
-    background: hsl(var(--success) / var(--chat-bubble-tone-background-alpha));
+    background: var(
+      --surface-success,
+      hsl(var(--success) / var(--chat-bubble-tone-background-alpha))
+    );
   }
 
   .ui-chat-bubble[data-tone="warning"] .ui-chat-bubble-body {
     border: var(--stroke-hairline) solid hsl(var(--warning) / var(--chat-bubble-tone-border-alpha));
-    background: hsl(var(--warning) / var(--chat-bubble-tone-background-alpha));
+    background: var(
+      --surface-warning,
+      hsl(var(--warning) / var(--chat-bubble-tone-background-alpha))
+    );
   }
 
   .ui-chat-bubble[data-tone="destructive"] .ui-chat-bubble-body {
     border: var(--stroke-hairline) solid
       hsl(var(--destructive) / var(--chat-bubble-tone-border-alpha));
-    background: hsl(var(--destructive) / var(--chat-bubble-tone-background-alpha));
+    background: var(
+      --surface-destructive,
+      hsl(var(--destructive) / var(--chat-bubble-tone-background-alpha))
+    );
   }
 
   .ui-chat-bubble-caret {
     display: inline-block;
-    inline-size: var(--chat-bubble-typing-caret-width);
+    inline-size: var(--chat-bubble-typing-caret-width, var(--stroke-md));
     block-size: var(--chat-bubble-typing-caret-height);
     margin-inline-start: var(--space-1);
     background: var(--chat-bubble-typing-caret-color, hsl(var(--muted-foreground)));
@@ -1951,7 +2041,10 @@
     gap: var(--tree-node-gap);
 
     min-block-size: var(--tree-node-height, var(--control-height));
-    border-radius: var(--tree-node-radius);
+    border-radius: var(
+      --tree-node-radius,
+      calc(var(--radius) / var(--radius-ratio) / var(--radius-ratio))
+    );
     padding-inline: var(--tree-node-padding-inline);
 
     padding-inline-start: calc(
@@ -1961,11 +2054,17 @@
   }
 
   .ui-tree-node:hover {
-    background: var(--tree-node-hover-background, hsl(var(--accent)));
+    background: var(
+      --tree-node-hover-background,
+      hsl(var(--accent) / var(--tree-node-hover-background-alpha, 100%))
+    );
   }
 
   .ui-tree-node[data-selected="true"] {
-    background: var(--tree-node-selected-background, hsl(var(--accent)));
+    background: var(
+      --tree-node-selected-background,
+      hsl(var(--accent) / var(--tree-node-selected-background-alpha, 100%))
+    );
     color: var(--tree-node-selected-foreground, hsl(var(--accent-foreground)));
     font-weight: var(--font-weight-medium);
   }
@@ -2036,7 +2135,7 @@
       var(--tree-node-padding-inline) + (var(--tree-node-level, 1) - 1) * var(--tree-indent-width) +
         var(--tree-switcher-size) / 2
     );
-    border-inline-start: 1px solid var(--tree-line-color, hsl(var(--border)));
+    border-inline-start: var(--stroke-hairline) solid var(--tree-line-color, hsl(var(--border)));
     content: "";
   }
 
@@ -2086,7 +2185,10 @@
   }
 
   .ui-tree[data-variant="directory"] .ui-tree-node[data-selected="true"] {
-    background: var(--tree-node-selected-background, hsl(var(--primary) / 0.12));
+    background: var(
+      --tree-node-selected-background,
+      hsl(var(--primary) / var(--tree-node-selected-background-alpha, 0.12))
+    );
   }
 }
 
@@ -2097,7 +2199,7 @@
     min-inline-size: 0;
     align-items: flex-start;
     gap: var(--welcome-gap);
-    border-radius: var(--welcome-radius);
+    border-radius: var(--welcome-radius, var(--radius));
   }
 
   .ui-welcome[data-variant="filled"] {
@@ -2172,10 +2274,10 @@
     position: absolute;
     inset-block: var(--thought-chain-icon-size) calc(-1 * var(--thought-chain-gap));
     inset-inline-start: calc(var(--thought-chain-icon-size) / 2);
-    border-inline-start: var(--thought-chain-line-width) solid
+    border-inline-start: var(--thought-chain-line-width, var(--stroke-hairline)) solid
       var(--thought-chain-line-color, hsl(var(--border)));
     content: "";
-    translate: calc(-1 * var(--thought-chain-line-width) / 2) 0;
+    translate: calc(-1 * var(--thought-chain-line-width, var(--stroke-hairline)) / 2) 0;
   }
 
   .ui-thought-chain[data-line="dashed"] .ui-thought-chain-node::before {
@@ -2292,7 +2394,7 @@
     padding-block: var(--thought-chain-item-padding-block);
     padding-inline: var(--thought-chain-item-padding-inline);
     border: 0;
-    border-radius: var(--thought-chain-item-radius);
+    border-radius: var(--thought-chain-item-radius, var(--radius));
     background: transparent;
     color: inherit;
     font: inherit;