@godxjp/ui 29.0.0 → 30.0.1

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

@@ -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"] {
@@ -268,7 +268,7 @@
   .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 {
@@ -301,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;
@@ -387,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;
   }
@@ -451,7 +452,7 @@
 
     max-inline-size: 100%;
     block-size: var(--thumbnail-block-size);
-    border: var(--thumbnail-border-width) solid hsl(var(--border));
+    border: var(--thumbnail-border-width, var(--stroke-hairline)) solid hsl(var(--border));
     border-radius: var(--thumbnail-radius, var(--radius));
 
     background: hsl(var(--muted));
@@ -496,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)));
@@ -514,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"] {
@@ -581,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;
@@ -631,7 +633,7 @@
   z-index: 50;
   width: 16rem;
   border-radius: var(--radius-md, calc(var(--radius) / var(--radius-ratio)));
-  border: 1px solid hsl(var(--border));
+  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);
@@ -678,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%);
@@ -807,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"] {
@@ -815,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;
@@ -907,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);
   }
@@ -960,7 +962,7 @@
 
     z-index: 20;
     background-color: hsl(var(--card) / var(--card-alpha, 100%));
-    border-inline-end: 1px solid hsl(var(--border));
+    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);
   }
@@ -1267,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));
   }
@@ -1334,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 {
@@ -1342,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);
@@ -1382,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,
@@ -1421,7 +1423,7 @@
     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,
@@ -1488,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;
   }
@@ -1516,7 +1518,7 @@
 @layer components {
   .ui-range-timeline {
     overflow: auto;
-    border: 1px solid hsl(var(--range-timeline-border-color));
+    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 {
@@ -1540,7 +1542,7 @@
     z-index: 1;
     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 {
@@ -1552,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 {
@@ -1577,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)));
@@ -1590,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)));
   }
 
@@ -1656,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"] {
@@ -1715,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-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]
@@ -1739,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));
   }
 }
 
@@ -1962,7 +1971,7 @@
 
   .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)));
@@ -2126,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: "";
   }
 
@@ -2265,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 {

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

@@ -328,7 +328,7 @@
     cursor: pointer;
     padding: var(--upload-dropzone-space-inset);
     border-radius: var(--upload-dropzone-radius, var(--radius));
-    border: var(--upload-dropzone-border-width) dashed hsl(var(--border));
+    border: var(--upload-dropzone-border-width, var(--stroke-md)) dashed hsl(var(--border));
     text-align: center;
     transition: border-color 150ms ease;
   }
@@ -398,7 +398,7 @@
     block-size: var(--upload-tile-size);
     overflow: hidden;
     border-radius: var(--upload-tile-radius, calc(var(--radius) / var(--radius-ratio)));
-    border: 1px solid hsl(var(--border));
+    border: var(--stroke-hairline) solid hsl(var(--border));
     background-color: hsl(var(--muted));
   }
 
@@ -410,7 +410,7 @@
     inline-size: var(--upload-tile-size);
     block-size: var(--upload-tile-size);
     border-radius: var(--upload-tile-radius, calc(var(--radius) / var(--radius-ratio)));
-    border: 1px dashed hsl(var(--border));
+    border: var(--stroke-hairline) dashed hsl(var(--border));
     color: hsl(var(--muted-foreground));
     transition:
       border-color 150ms ease,
@@ -483,7 +483,7 @@
     position: relative;
     overflow: hidden;
     border-radius: var(--upload-picture-radius, calc(var(--radius) / var(--radius-ratio)));
-    border: 1px solid hsl(var(--border));
+    border: var(--stroke-hairline) solid hsl(var(--border));
   }
 
   .ui-upload-picture-img {
@@ -516,7 +516,7 @@
     inline-size: 100%;
     block-size: var(--upload-picture-empty-height);
     border-radius: var(--upload-picture-radius, calc(var(--radius) / var(--radius-ratio)));
-    border: 1px dashed hsl(var(--border));
+    border: var(--stroke-hairline) dashed hsl(var(--border));
     color: hsl(var(--muted-foreground));
   }
 
@@ -540,7 +540,7 @@
     block-size: var(--upload-avatar-size);
     overflow: hidden;
     border-radius: var(--radius-pill);
-    border: var(--upload-avatar-border-width) solid hsl(var(--border));
+    border: var(--upload-avatar-border-width, var(--stroke-md)) solid hsl(var(--border));
     background-color: hsl(var(--muted));
   }
 
@@ -584,7 +584,7 @@
     inset-inline-end: calc(var(--upload-remove-offset) * -1);
     padding: var(--upload-remove-space-inset);
     border-radius: var(--radius-pill);
-    border: 1px solid hsl(var(--border));
+    border: var(--stroke-hairline) solid hsl(var(--border));
     background-color: hsl(var(--background));
     box-shadow: var(--shadow-sm);
   }
@@ -602,7 +602,7 @@
     padding-inline: var(--upload-draft-space-inline);
     padding-block: var(--upload-draft-space-block);
     border-radius: var(--upload-draft-radius, calc(var(--radius) / var(--radius-ratio)));
-    border: 1px dashed hsl(var(--destructive) / 0.4);
+    border: var(--stroke-hairline) dashed hsl(var(--destructive) / 0.4);
     background-color: var(
       --surface-destructive,
       hsl(var(--destructive) / var(--surface-destructive-alpha, 0.05))
@@ -633,7 +633,7 @@
     padding-inline: var(--upload-row-space-inline);
     padding-block: var(--upload-row-space-block);
     border-radius: var(--upload-row-radius, calc(var(--radius) / var(--radius-ratio)));
-    border: 1px solid hsl(var(--border));
+    border: var(--stroke-hairline) solid hsl(var(--border));
     font-size: var(--upload-row-font-size);
   }
 
@@ -692,7 +692,7 @@
     flex-direction: column;
     gap: var(--branch-scope-picker-subset-gap);
     padding-inline-start: var(--branch-scope-picker-subset-padding-inline);
-    border-inline-start-width: var(--branch-scope-picker-subset-border-width);
+    border-inline-start-width: var(--branch-scope-picker-subset-border-width, var(--stroke-md));
   }
 
   .ui-branch-scope-picker-list {
@@ -707,7 +707,7 @@
     inline-size: 100%;
     padding-block: var(--chat-composer-padding-block);
     padding-inline: var(--chat-composer-padding-inline);
-    border-width: var(--control-border-width);
+    border-width: var(--control-border-width, var(--stroke-hairline));
     border-style: solid;
     border-radius: var(--chat-composer-radius, var(--control-radius));
   }
@@ -721,7 +721,7 @@
     padding-block-end: var(--chat-composer-gap);
     border-block-end: var(
       --chat-composer-header-border,
-      var(--control-border-width) solid hsl(var(--border))
+      var(--control-border-width, var(--stroke-hairline)) solid hsl(var(--border))
     );
   }
 

package/dist/styles/dialog-layout.css

@@ -8,11 +8,11 @@
   }
 
   [data-slot="sheet-content"]:has([data-slot="sheet-body"]) [data-slot="sheet-header"] {
-    border-bottom: 1px solid hsl(var(--border));
+    border-bottom: var(--stroke-hairline) solid hsl(var(--border));
   }
 
   [data-slot="sheet-content"]:has([data-slot="sheet-body"]) [data-slot="sheet-footer"] {
-    border-top: 1px solid hsl(var(--border));
+    border-top: var(--stroke-hairline) solid hsl(var(--border));
   }
 
   .ui-dialog-overlay {
@@ -51,7 +51,7 @@
     max-width: none;
     transform: translate(-50%, -50%);
     gap: var(--dialog-space-gap);
-    border: 1px solid hsl(var(--border));
+    border: var(--stroke-hairline) solid hsl(var(--border));
 
     background-color: var(--dialog-surface-background, hsl(var(--background)));
 
@@ -137,14 +137,14 @@
     margin-inline: calc(-1 * var(--dialog-space-x));
     margin-block-start: calc(-1 * var(--dialog-space-y));
     padding: var(--dialog-space-y) var(--dialog-space-x);
-    border-bottom: 1px solid hsl(var(--border));
+    border-bottom: var(--stroke-hairline) solid hsl(var(--border));
   }
 
   [data-slot="dialog-content"]:has([data-slot="dialog-body"]) [data-slot="dialog-footer"] {
     margin-inline: calc(-1 * var(--dialog-space-x));
     margin-block-end: calc(-1 * var(--dialog-space-y));
     padding: var(--dialog-space-y) var(--dialog-space-x);
-    border-top: 1px solid hsl(var(--border));
+    border-top: var(--stroke-hairline) solid hsl(var(--border));
   }
 
   .ui-dialog-close {
@@ -221,7 +221,7 @@
   }
 
   .ui-two-factor-setup-notice {
-    border: 1px dashed hsl(var(--border));
+    border: var(--stroke-hairline) dashed hsl(var(--border));
     border-radius: var(--radius-md, calc(var(--radius) / var(--radius-ratio)));
     padding: var(--space-2) var(--space-3);
   }
@@ -231,7 +231,7 @@
     grid-template-columns: repeat(2, minmax(0, 1fr));
     gap: var(--space-2);
     padding: var(--space-3);
-    border: 1px solid hsl(var(--border));
+    border: var(--stroke-hairline) solid hsl(var(--border));
     border-radius: var(--radius-md, calc(var(--radius) / var(--radius-ratio)));
     background: hsl(var(--muted) / 0.4);
   }
@@ -294,7 +294,7 @@
     padding-inline: var(--tooltip-space-inline);
     padding-block: var(--tooltip-space-block);
     border-radius: var(--tooltip-radius, var(--radius));
-    border: 1px solid
+    border: var(--stroke-hairline) solid
       var(--tooltip-border-color, hsl(var(--border) / var(--tooltip-border-color-alpha, 100%)));
     background-color: var(--tooltip-background, hsl(var(--popover) / var(--popover-alpha, 100%)));
     color: var(--tooltip-foreground, hsl(var(--popover-foreground)));
@@ -312,7 +312,7 @@
     width: var(--popover-surface-inline-size, var(--popover-width));
     padding: var(--popover-space-inset);
     border-radius: var(--popover-radius, var(--radius));
-    border: 1px solid
+    border: var(--stroke-hairline) solid
       var(
         --popover-surface-border-color,
         hsl(var(--border) / var(--popover-surface-border-color-alpha, 100%))
@@ -428,12 +428,12 @@
 
   .ui-sheet-panel[data-side="top"] {
     inset-block-start: 0;
-    border-block-end: 1px solid hsl(var(--border));
+    border-block-end: var(--stroke-hairline) solid hsl(var(--border));
   }
 
   .ui-sheet-panel[data-side="bottom"] {
     inset-block-end: 0;
-    border-block-start: 1px solid hsl(var(--border));
+    border-block-start: var(--stroke-hairline) solid hsl(var(--border));
   }
 
   .ui-sheet-body-space {

package/dist/styles/focus-ring.css

@@ -165,7 +165,7 @@
   }
 
   .ui-toggle {
-    --focus-ring-weight: var(--toggle-focus-ring-width);
+    --focus-ring-weight: var(--toggle-focus-ring-width, var(--stroke-lg));
     --focus-ring-width-component: calc(var(--focus-ring-weight) * var(--focus-outline));
     --focus-ring-opacity: var(--toggle-focus-ring-alpha);
   }
@@ -200,7 +200,7 @@
     .ui-app-setting-picker-icon,
     .ui-app-setting-picker-inline
   ) {
-    --focus-ring-weight: var(--control-focus-ring-width);
+    --focus-ring-weight: var(--control-focus-ring-width, var(--stroke-hairline));
     --focus-ring-width-component: calc(var(--focus-ring-weight) * var(--focus-outline));
   }
 

package/dist/styles/layout.css

@@ -14,12 +14,12 @@
 
   .ui-separator:not([data-labelled])[data-orientation="horizontal"] {
     width: 100%;
-    height: var(--separator-rule-size);
+    height: var(--separator-rule-size, var(--stroke-hairline));
     background: hsl(var(--separator-rule-color, var(--border)));
   }
 
   .ui-separator:not([data-labelled])[data-orientation="vertical"] {
-    width: var(--separator-rule-size);
+    width: var(--separator-rule-size, var(--stroke-hairline));
     height: 100%;
     background: hsl(var(--separator-rule-color, var(--border)));
   }
@@ -41,7 +41,7 @@
   }
 
   .ui-separator-rule {
-    block-size: var(--separator-rule-size);
+    block-size: var(--separator-rule-size, var(--stroke-hairline));
     background: hsl(var(--separator-rule-color, var(--border)));
   }
 
@@ -563,7 +563,7 @@
   }
 
   .ui-resizable-handle {
-    width: var(--control-border-width);
+    width: var(--control-border-width, var(--stroke-hairline));
     background: hsl(var(--border));
     position: relative;
     flex-shrink: 0;
@@ -575,7 +575,7 @@
 
   .ui-resizable-handle[aria-orientation="vertical"] {
     width: auto;
-    height: var(--control-border-width);
+    height: var(--control-border-width, var(--stroke-hairline));
   }
 
   .ui-resizable-handle:hover,
@@ -923,7 +923,7 @@
     gap: var(--space-inline-sm);
     padding-top: var(--space-stack-md);
     padding-inline-end: calc(var(--space-page-active-x) + var(--page-footer-content-slack));
-    border-top: var(--page-footer-divider, 1px solid hsl(var(--border)));
+    border-top: var(--page-footer-divider, var(--stroke-hairline) solid hsl(var(--border)));
   }
 
   .ui-page-footer > * {
@@ -1137,7 +1137,7 @@
       --radius-sm,
       calc(var(--radius) / var(--radius-ratio) / var(--radius-ratio))
     );
-    border: 1px solid hsl(var(--border));
+    border: var(--stroke-hairline) solid hsl(var(--border));
     color: hsl(var(--foreground));
     text-decoration: none;
   }
@@ -1404,7 +1404,7 @@
     display: block;
     padding: var(--legal-document-toc-item-padding);
     border-radius: var(--legal-document-toc-item-radius, var(--radius));
-    border-inline-start: var(--legal-document-toc-marker-width) solid transparent;
+    border-inline-start: var(--legal-document-toc-marker-width, var(--stroke-md)) solid transparent;
     font-size: var(--legal-document-toc-font-size);
     line-height: 1.6;
     color: hsl(var(--legal-document-toc-foreground, var(--muted-foreground)));
@@ -1946,7 +1946,7 @@
     max-inline-size: calc(100% - var(--draggable-panel-inset) - var(--draggable-panel-inset));
     block-size: var(--draggable-panel-block-size);
     max-block-size: var(--draggable-panel-max-block-size);
-    border: var(--draggable-panel-border-width) solid hsl(var(--border));
+    border: var(--draggable-panel-border-width, var(--stroke-hairline)) solid hsl(var(--border));
     border-radius: var(--draggable-panel-radius, var(--radius));
     background-color: hsl(var(--background));
     box-shadow: var(--draggable-panel-shadow);
@@ -1994,7 +1994,8 @@
     align-items: center;
     gap: var(--draggable-panel-bar-gap);
     padding: var(--draggable-panel-bar-padding);
-    border-block-end: var(--draggable-panel-border-width) solid hsl(var(--border));
+    border-block-end: var(--draggable-panel-border-width, var(--stroke-hairline)) solid
+      hsl(var(--border));
     background-color: hsl(var(--muted) / 0.4);
   }
 

package/dist/styles/logo-layout.css

@@ -199,9 +199,9 @@
   .ui-logo-lockup .ui-logo-product-suffix::before {
     content: "";
     flex: 0 0 auto;
-    inline-size: var(--logo-divider-width);
+    inline-size: var(--logo-divider-width, var(--stroke-hairline));
     block-size: var(--logo-divider-height);
-    border-radius: var(--logo-divider-width);
+    border-radius: var(--logo-divider-width, var(--stroke-hairline));
     background: hsl(
       var(--logo-divider-color, var(--logo-godx-ink-color)) / var(--logo-divider-alpha)
     );

package/dist/styles/motion.css

@@ -208,7 +208,7 @@
       background: CanvasText;
     }
     .ui-activity-bar {
-      border: 1px solid CanvasText;
+      border: var(--stroke-hairline) solid CanvasText;
     }
   }
 }