@teamofsilicons/silicon-ui 0.1.0 → 0.3.0

package/components/file-dropzone/file-dropzone.module.css

@@ -4,9 +4,9 @@
 /* A folded prompt is a slimmer surface, so its corners step down to the panel radius. */
 .dropzone.compact { border-radius: var(--radius-container); corner-shape: var(--corner-shape); }
 /* The edge is a drawn stroke, fitted to the perimeter in script, so a drag can close its dashes into one line. */
-.edge { position: absolute; top: .5px; left: .5px; width: calc(100% - 1px); height: calc(100% - 1px); overflow: visible; pointer-events: none; }
+.edge { position: absolute; top: var(--space-hair); left: var(--space-hair); width: calc(100% - 1px); height: calc(100% - 1px); overflow: visible; pointer-events: none; }
 .edge rect { fill: none; stroke: var(--border-strong); stroke-width: 1; stroke-dasharray: 3.5 3.5; stroke-dashoffset: 0; transition: stroke var(--duration-fast) var(--ease-standard), stroke-dasharray var(--duration-standard) var(--ease-standard), stroke-dashoffset var(--duration-standard) var(--ease-standard); }
-.trigger { display: flex; width: 100%; flex-direction: column; align-items: stretch; justify-content: center; border: 0; border-radius: inherit; corner-shape: inherit; padding: 34px var(--space-comfort); background: transparent; color: inherit; font: inherit; letter-spacing: var(--tracking-body); text-align: center; cursor: pointer; }
+.trigger { display: flex; width: 100%; flex-direction: column; align-items: stretch; justify-content: center; border: 0; border-radius: inherit; corner-shape: inherit; padding: var(--space-block) var(--space-comfort); background: transparent; color: inherit; font: inherit; letter-spacing: var(--tracking-body); text-align: center; cursor: pointer; }
 .trigger > * { pointer-events: none; }
 @media (hover: hover) and (pointer: fine) {
   .dropzone:has(.trigger:hover) { background: var(--surface-muted); }
@@ -19,24 +19,24 @@
 @keyframes breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.012); } }
 /* Light that follows the pointer: a wash inside, and a brighter stretch of the edge nearest the file. */
 .wash, .glow { position: absolute; inset: 0; border-radius: inherit; corner-shape: inherit; opacity: 0; pointer-events: none; transition: opacity var(--duration-standard) var(--ease-standard); }
-.glow { padding: 1.5px; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
+.glow { padding: var(--space-hair); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
 .dragging .wash, .dragging .glow { opacity: 1; }
 .dragging .edge rect { stroke: color-mix(in oklab, var(--accent) 40%, var(--border)); stroke-dasharray: 7 0; stroke-dashoffset: 1.75; }
 /* No gaps between the prompt's parts: each slot carries its own space, so a folding slot takes its space with it. */
 .iconSlot, .noteSlot { display: flex; flex-direction: column; overflow: hidden; }
 /* Three sheets of paper, the target's one illustration. The slot's top margin is room for them to lift without clipping. */
-.sheets { position: relative; display: block; width: 36px; height: 44px; align-self: center; margin: 10px 0 14px; }
+.sheets { position: relative; display: block; width: 36px; height: 44px; align-self: center; margin: var(--space-group) 0 var(--space-inset); }
 .sheet {
   --r: 0deg; --x: 0px; --y: 0px;
-  position: absolute; inset: 0; display: grid; place-items: end center; padding: 0 0 5px;
+  position: absolute; inset: 0; display: grid; place-items: end center; padding: 0 0 var(--space-tight);
   border: 1px solid var(--border); border-radius: var(--radius-detail); corner-shape: var(--corner-shape); background: var(--surface-raised); color: var(--text-muted);
-  box-shadow: 0 1px 2px oklch(0% 0 0 / .05), 0 3px 8px oklch(0% 0 0 / .04);
+  box-shadow: var(--shadow-thumb);
   transform: translate(var(--x), var(--y)) rotate(var(--r));
   transform-origin: 50% 100%;
   transition: transform var(--duration-spring) var(--ease-spring), color var(--duration-standard) var(--ease-standard), border-color var(--duration-standard) var(--ease-standard);
 }
-.sheet::before, .sheet::after { position: absolute; top: 8px; left: 7px; width: 16px; height: 2px; border-radius: var(--radius-full); corner-shape: round; background: currentColor; content: ""; opacity: .3; }
-.sheet::after { top: 13px; width: 11px; }
+.sheet::before, .sheet::after { position: absolute; top: var(--space-related); left: var(--space-related); width: 16px; height: 2px; border-radius: var(--radius-full); corner-shape: round; background: currentColor; content: ""; opacity: .3; }
+.sheet::after { top: var(--space-group); width: 11px; }
 .sheet > svg { transition: transform var(--duration-spring) var(--ease-spring); }
 .dragging .sheet > svg { transform: translateY(-3px); }
 .sheet[data-sheet="back"] { --r: -10deg; --x: -9px; --y: 2px; }
@@ -53,31 +53,31 @@
 /* Full width and centered text: the label box never moves, so an outgoing label leaves from exactly where it was. */
 .label { position: relative; display: block; font-size: var(--text-sm); font-weight: 500; line-height: var(--leading-body); }
 .labelText { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; vertical-align: top; white-space: nowrap; }
-.hint { margin-top: 6px; color: var(--text-secondary); font-size: var(--text-sm); line-height: var(--leading-body); }
-.note { padding-top: 6px; color: var(--text-muted); font-size: var(--text-xs); line-height: var(--leading-body); }
+.hint { margin-top: var(--space-related); color: var(--text-secondary); font-size: var(--text-sm); line-height: var(--leading-body); }
+.note { padding-top: var(--space-related); color: var(--text-muted); font-size: var(--text-xs); line-height: var(--leading-body); }
 .input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
 .messageSlot { overflow: hidden; }
-.error { display: flex; align-items: flex-start; gap: 6px; padding-top: var(--space-group); color: var(--danger); font-size: var(--text-sm); line-height: var(--leading-body); }
+.error { display: flex; align-items: flex-start; gap: var(--space-related); padding-top: var(--space-group); color: var(--danger); font-size: var(--text-sm); line-height: var(--leading-body); }
 /* The icon sits on the first line's optical center, so a wrapped message keeps it at the top. */
-.errorIcon { flex: 0 0 auto; margin-top: 3px; }
+.errorIcon { flex: 0 0 auto; margin-top: var(--space-tight); }
 .errorCopy { position: relative; min-width: 0; flex: 1; }
 
 .list { display: grid; min-width: 0; margin: 0; padding: 0; list-style: none; container: dropzone-list / inline-size; }
-.inside .list { padding-inline: 12px; }
+.inside .list { padding-inline: var(--space-group); }
 /* Rows animate height; the gap lives inside the clipped row as margin, so a closing row reaches a true zero. */
 .item { min-width: 0; overflow: hidden; }
-.row { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; column-gap: 12px; min-height: 58px; margin-top: 8px; border: 1px solid var(--border); border-radius: var(--radius-control); corner-shape: var(--corner-shape); padding: 8px 8px 8px 9px; background: var(--surface); transition: border-color var(--duration-standard) var(--ease-standard); }
+.row { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; column-gap: var(--space-group); min-height: 58px; margin-top: var(--space-related); border: 1px solid var(--border); border-radius: var(--radius-control); corner-shape: var(--corner-shape); padding: var(--space-related) var(--space-related) var(--space-related) var(--space-related); background: var(--surface); transition: border-color var(--duration-standard) var(--ease-standard); }
 .row.isFailed { border-color: color-mix(in oklab, var(--danger) 26%, var(--border)); }
 .fileIcon { display: grid; width: 40px; height: 40px; place-items: center; color: var(--text-secondary); }
-.thumb { display: block; width: 40px; height: 40px; overflow: hidden; border-radius: var(--radius-detail); corner-shape: var(--corner-shape); background: var(--surface-muted); box-shadow: inset 0 0 0 1px oklch(0% 0 0 / .06); }
+.thumb { display: block; width: 40px; height: 40px; overflow: hidden; border-radius: var(--radius-detail); corner-shape: var(--corner-shape); background: var(--surface-muted); box-shadow: var(--edge-inset); }
 .thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
 .copy { display: grid; min-width: 0; }
 .name { overflow: hidden; font-size: var(--text-sm); font-weight: 500; line-height: var(--leading-body); text-overflow: ellipsis; white-space: nowrap; }
 .meta { display: flex; min-width: 0; align-items: center; margin-top: 1px; color: var(--text-muted); font-size: var(--text-xs); line-height: var(--leading-body); font-variant-numeric: tabular-nums; white-space: nowrap; }
-.dot { padding-inline: 6px; }
+.dot { padding-inline: var(--space-related); }
 /* The outgoing status is measured against this box when it pops out to leave. */
 .phase { position: relative; display: flex; min-width: 0; flex: 1; }
-.state { display: inline-flex; min-width: 0; align-items: center; gap: 5px; }
+.state { display: inline-flex; min-width: 0; align-items: center; gap: var(--space-tight); }
 .uploaded { color: var(--text-secondary); }
 .uploaded .stateIcon { color: var(--success); }
 .failed { color: var(--danger); }
@@ -85,18 +85,18 @@
 .reason { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
 .percent { font-variant-numeric: tabular-nums; }
 .barFrame { display: block; overflow: hidden; }
-.bar { display: block; height: 4px; margin: 7px 0 2px; overflow: hidden; border-radius: var(--radius-full); corner-shape: round; background: var(--border); }
+.bar { display: block; height: 4px; margin: var(--space-related) 0 var(--space-hair); overflow: hidden; border-radius: var(--radius-full); corner-shape: round; background: var(--border); }
 /* The fill slides in from the left instead of scaling, so its rounded end keeps its shape at every value. */
 .barFill { display: block; width: 100%; height: 100%; border-radius: inherit; corner-shape: inherit; background: var(--accent); }
 .actions { display: flex; align-items: center; }
 .retrySlot { display: flex; overflow: hidden; }
-.retryInner { display: flex; padding: 3px 6px 3px 3px; }
+.retryInner { display: flex; padding: var(--space-tight) var(--space-related) var(--space-tight) var(--space-tight); }
 .retry, .remove { display: grid; place-items: center; border: 0; color: var(--text-secondary); font: inherit; cursor: pointer; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), transform var(--duration-spring) var(--ease-spring); }
-.retry { display: flex; height: 30px; align-items: center; gap: 5px; border: 1px solid var(--border); border-radius: var(--radius-full); corner-shape: round; padding: 0 12px 0 10px; background: var(--surface); color: var(--foreground); font-size: var(--text-xs); font-weight: 500; letter-spacing: var(--tracking-body); white-space: nowrap; }
+.retry { display: flex; height: 30px; align-items: center; gap: var(--space-tight); border: 1px solid var(--border); border-radius: var(--radius-full); corner-shape: round; padding: 0 var(--space-group) 0 var(--space-group); background: var(--surface); color: var(--foreground); font-size: var(--text-xs); font-weight: 500; letter-spacing: var(--tracking-body); white-space: nowrap; }
 /* On narrow lists Retry keeps only its icon, so the failure reason keeps the room to be read in full. */
 @container dropzone-list (max-width: 440px) { .retry { width: 30px; justify-content: center; padding: 0; } .retryLabel { display: none; } }
 /* On the narrowest lists the type icon steps aside for the name and status. */
-@container dropzone-list (max-width: 300px) { .row { grid-template-columns: minmax(0, 1fr) auto; padding-left: 14px; } .fileIcon, .thumb { display: none; } }
+@container dropzone-list (max-width: 300px) { .row { grid-template-columns: minmax(0, 1fr) auto; padding-left: var(--space-inset); } .fileIcon, .thumb { display: none; } }
 .remove { width: 32px; height: 32px; border-radius: var(--radius-full); corner-shape: round; background: transparent; }
 @media (hover: hover) and (pointer: fine) {
   .retry:hover { border-color: var(--border-strong); background: var(--surface-muted); }

package/components/file-upload/file-upload.module.css

@@ -1,38 +1,38 @@
 .root { display: grid; width: 100%; min-width: 0; color: var(--foreground); }
 .input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; clip-path: inset(50%); }
 /* A full-width drop target: press feedback is color only, never a scale. */
-.dropzone { display: flex; min-height: 92px; align-items: center; gap: 12px; padding: 16px; border: 1px dashed var(--border-strong); border-radius: var(--radius-container); corner-shape: var(--corner-shape); background: var(--surface); cursor: pointer; transition: border-color var(--duration-standard) var(--ease-standard), background-color var(--duration-standard) var(--ease-standard); }
+.dropzone { display: flex; min-height: 92px; align-items: center; gap: var(--space-group); padding: var(--space-inset); border: 1px dashed var(--border-strong); border-radius: var(--radius-container); corner-shape: var(--corner-shape); background: var(--surface); cursor: pointer; transition: border-color var(--duration-standard) var(--ease-standard), background-color var(--duration-standard) var(--ease-standard); }
 .dropzone.dragging, .dropzone:not(.disabled):active { border-color: var(--accent); background: var(--accent-subtle); }
 .dropzone.disabled { cursor: not-allowed; opacity: .52; }
 .uploadIcon, .fileIcon { display: grid; flex: 0 0 auto; place-items: center; color: var(--accent-strong); }
 /* The cloud lifts toward the file while it hovers over the drop target. */
 .uploadIcon { width: 24px; height: 24px; transition: transform var(--duration-spring) var(--ease-spring); }
 .dragging .uploadIcon { transform: translateY(-3px); }
-.copy { display: grid; min-width: 0; gap: 3px; flex: 1; }
+.copy { display: grid; min-width: 0; gap: var(--space-tight); flex: 1; }
 .copy strong { font-size: var(--text-sm); font-weight: 500; line-height: var(--leading-body); }
 .label { position: relative; display: block; min-width: 0; }
 .labelText { display: block; }
 .copy > span { color: var(--text-muted); font-size: var(--text-xs); line-height: var(--leading-body); overflow-wrap: anywhere; }
 .browse { flex: 0 0 auto; color: var(--accent-strong); font-size: var(--text-xs); font-weight: 500; }
 .statusFrame { overflow: hidden; }
-.status { position: relative; min-height: 16px; margin: 0; padding-top: 8px; color: var(--text-muted); font-size: var(--text-xs); line-height: var(--leading-body); }
+.status { position: relative; min-height: 16px; margin: 0; padding-top: var(--space-related); color: var(--text-muted); font-size: var(--text-xs); line-height: var(--leading-body); }
 .statusText { display: block; }
 .fileList { display: grid; margin: 0; padding: 0; list-style: none; }
 /* The gap lives inside the clipped row, so a collapsing row reaches zero height instead of stopping at its padding. */
 .fileRow { overflow: hidden; }
-.fileItem { display: flex; margin-top: 6px; min-width: 0; align-items: center; gap: 12px; padding: 10px 10px 10px 12px; border: 1px solid var(--border-subtle); border-radius: var(--radius-control); corner-shape: var(--corner-shape); background: var(--surface-muted); }
+.fileItem { display: flex; margin-top: var(--space-related); min-width: 0; align-items: center; gap: var(--space-group); padding: var(--space-group) var(--space-group) var(--space-group) var(--space-group); border: 1px solid var(--border-subtle); border-radius: var(--radius-control); corner-shape: var(--corner-shape); background: var(--surface-muted); }
 .fileIcon { width: 24px; height: 24px; color: var(--text-secondary); }
-.fileCopy { display: grid; min-width: 0; flex: 1; gap: 2px; }
+.fileCopy { display: grid; min-width: 0; flex: 1; gap: var(--space-hair); }
 .fileCopy strong { overflow: hidden; font-size: var(--text-sm); font-weight: 500; line-height: var(--leading-body); text-overflow: ellipsis; white-space: nowrap; }
 .fileCopy > span { color: var(--text-muted); font-size: var(--text-xs); line-height: var(--leading-body); }
 .meta { display: flex; min-width: 0; white-space: nowrap; font-variant-numeric: tabular-nums; }
-.dot { padding-inline: 5px; }
+.dot { padding-inline: var(--space-tight); }
 .phase { position: relative; display: inline-block; }
 .phaseText { display: block; }
 .percent { display: inline-block; min-width: 4ch; }
 .fileCopy .error { color: var(--danger); }
 .barFrame { display: block; }
-.bar { display: block; height: 3px; margin: 5px 0 1px; overflow: hidden; border-radius: var(--radius-full); corner-shape: round; background: var(--border); }
+.bar { display: block; height: 3px; margin: var(--space-tight) 0 1px; overflow: hidden; border-radius: var(--radius-full); corner-shape: round; background: var(--border); }
 .barFill { display: block; width: 100%; height: 100%; border-radius: inherit; corner-shape: inherit; background: var(--accent); }
 .statusSlot { position: relative; display: grid; width: 26px; height: 26px; flex: 0 0 auto; place-items: center; }
 .retrySlot { display: grid; place-items: center; }

package/components/filter-toolbar/filter-toolbar.module.css

@@ -24,7 +24,7 @@
 /* Add filter: the trigger is transparent and the surface behind it is the button's rounded rectangle.
    Opening springs that same surface to the panel size, so the button itself becomes the menu. */
 .menu { position: relative; display: inline-flex; flex: none; isolation: isolate; }
-.menu:not([data-state="closed"]) { z-index: 30; }
+.menu:not([data-state="closed"]) { z-index: var(--layer-dropdown); }
 .trigger { position: relative; z-index: 1; display: inline-flex; min-height: var(--control-height-sm); align-items: center; padding: 0 var(--space-group); border: 1px solid transparent; border-radius: var(--radius-control); corner-shape: var(--corner-shape); background: transparent; color: var(--foreground); font: inherit; font-size: var(--text-sm); font-weight: 500; line-height: var(--leading-body); letter-spacing: var(--tracking-body); white-space: nowrap; cursor: pointer; -webkit-tap-highlight-color: transparent; }
 .menu[data-state="open"] .trigger { pointer-events: none; }
 .face { display: inline-flex; align-items: center; gap: var(--space-related); }
@@ -38,24 +38,24 @@
 @media (hover: hover) and (pointer: fine) {
   .menu[data-state="closed"] .trigger:hover + .surface { background: var(--surface-muted); box-shadow: var(--shadow-resting); }
 }
-.panel { position: absolute; top: 0; left: 0; width: min(var(--filter-menu-width, 16rem), calc(100vw - var(--space-block))); padding: 6px 6px 6px; outline: none; }
+.panel { position: absolute; top: 0; left: 0; width: min(var(--filter-menu-width, 16rem), calc(100vw - var(--space-block))); padding: var(--space-related) var(--space-related) var(--space-related); outline: none; }
 .menu[data-y="up"] .panel { top: auto; bottom: 0; }
 .menu[data-state="closed"] .panel { visibility: hidden; }
-.head { display: flex; height: 32px; align-items: center; padding: 0 var(--space-related) 0 10px; }
-.menu[data-y="up"] .head { margin-top: 4px; }
-.back { display: grid; width: 28px; height: 28px; flex: none; place-items: center; margin-left: -6px; padding: 0; border: 0; border-radius: var(--radius-full); corner-shape: round; background: transparent; color: var(--text-secondary); cursor: pointer; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); }
+.head { display: flex; height: 32px; align-items: center; padding: 0 var(--space-related) 0 var(--space-group); }
+.menu[data-y="up"] .head { margin-top: var(--space-tight); }
+.back { display: grid; width: 28px; height: 28px; flex: none; place-items: center; margin-left: calc(var(--space-related) * -1); padding: 0; border: 0; border-radius: var(--radius-full); corner-shape: round; background: transparent; color: var(--text-secondary); cursor: pointer; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); }
 .back:active { background: var(--surface-muted); color: var(--foreground); }
 .title { position: relative; display: flex; min-width: 0; color: var(--foreground); font-size: var(--text-sm); font-weight: 500; letter-spacing: var(--tracking-body); white-space: nowrap; }
 .titleText { display: block; }
-.stage { position: relative; margin-top: 2px; }
+.stage { position: relative; margin-top: var(--space-hair); }
 .step { width: 100%; }
 .list { position: relative; display: grid; max-height: min(20rem, 55vh); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
-.highlight { position: absolute; top: 0; right: 0; left: 0; border-radius: calc(var(--radius-container) - 6px); corner-shape: var(--corner-shape); background: color-mix(in oklab, var(--foreground) 6%, transparent); opacity: 0; pointer-events: none; }
+.highlight { position: absolute; top: 0; right: 0; left: 0; border-radius: calc(var(--radius-container) - var(--space-related)); corner-shape: var(--corner-shape); background: color-mix(in oklab, var(--foreground) 6%, transparent); opacity: 0; pointer-events: none; }
 .item:focus-visible { outline: none; }
-.item { position: relative; display: flex; min-width: 0; min-height: var(--control-height-sm); align-items: center; gap: 10px; padding: 0 10px; border: 0; border-radius: calc(var(--radius-container) - 6px); corner-shape: var(--corner-shape); background: transparent; color: var(--foreground); font: inherit; font-size: var(--text-sm); letter-spacing: var(--tracking-body); text-align: left; cursor: pointer; outline: none; -webkit-tap-highlight-color: transparent; }
+.item { position: relative; display: flex; min-width: 0; min-height: var(--control-height-sm); align-items: center; gap: var(--space-group); padding: 0 var(--space-group); border: 0; border-radius: calc(var(--radius-container) - var(--space-related)); corner-shape: var(--corner-shape); background: transparent; color: var(--foreground); font: inherit; font-size: var(--text-sm); letter-spacing: var(--tracking-body); text-align: left; cursor: pointer; outline: none; -webkit-tap-highlight-color: transparent; }
 .itemIcon { display: inline-flex; min-width: 16px; flex: none; align-items: center; justify-content: center; color: var(--text-secondary); }
 .itemLabel { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.itemMeta { display: inline-flex; min-width: 0; flex: none; align-items: center; gap: 6px; max-width: 50%; color: var(--text-muted); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
+.itemMeta { display: inline-flex; min-width: 0; flex: none; align-items: center; gap: var(--space-related); max-width: 50%; color: var(--text-muted); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
 .metaValue { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .hint { min-width: 2ch; text-align: right; }
 .check { display: inline-flex; width: 15px; color: var(--foreground); opacity: 0; }

package/components/floating-button-group/floating-button-group.module.css

@@ -33,7 +33,7 @@
 /* Buttons are not positioned, so the highlight measures them against the tray and stacks above their background. */
 .item { display: inline-flex; min-width: var(--fbg-h); height: var(--fbg-h); flex: none; align-items: center; justify-content: center; margin: 0; padding: 0 var(--fbg-pad-x); border: 0; border-radius: var(--fbg-radius); background: transparent; color: inherit; font: inherit; font-size: var(--text-sm); font-weight: 500; line-height: 1; white-space: nowrap; cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; touch-action: manipulation; transition: color var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard), opacity var(--duration-fast) var(--ease-standard); }
 .sm .item { font-size: var(--text-xs); }
-.item[data-icon]:not([data-icon-only]) { padding-left: calc(var(--fbg-pad-x) - 2px); }
+.item[data-icon]:not([data-icon-only]) { padding-left: calc(var(--fbg-pad-x) - var(--space-hair)); }
 .item[data-icon-only] { width: var(--fbg-h); padding: 0; }
 .item[data-active], .item[aria-pressed="true"] { color: var(--foreground); }
 .item[aria-pressed="true"] { background: var(--fbg-on); }
@@ -45,21 +45,21 @@
 .slot { position: relative; z-index: 2; display: inline-grid; align-items: center; justify-items: center; }
 .slot > * { grid-area: 1 / 1; }
 .vertical .slot { justify-items: start; }
-.ghost { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; visibility: hidden; pointer-events: none; }
+.ghost { display: inline-flex; align-items: center; gap: var(--space-related); white-space: nowrap; visibility: hidden; pointer-events: none; }
 .iconSpace { display: block; width: 16px; height: 16px; flex: none; }
-.phase { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
+.phase { display: inline-flex; align-items: center; gap: var(--space-related); white-space: nowrap; }
 .icon { display: inline-flex; flex: none; }
 .icon svg { width: 16px; height: 16px; stroke-width: 1.75; }
 .text { display: block; }
 
-.separator { flex: none; align-self: center; width: 1px; height: calc(var(--fbg-h) * .5); margin-inline: 2px; border-radius: var(--radius-full); corner-shape: round; background: var(--fbg-rule); }
-.vertical .separator { width: calc(var(--fbg-h) * .5); height: 1px; margin: 2px 0; }
+.separator { flex: none; align-self: center; width: 1px; height: calc(var(--fbg-h) * .5); margin-inline: var(--space-hair); border-radius: var(--radius-full); corner-shape: round; background: var(--fbg-rule); }
+.vertical .separator { width: calc(var(--fbg-h) * .5); height: 1px; margin: var(--space-hair) 0; }
 
 .tip { display: inline-flex; align-items: baseline; gap: var(--space-group); white-space: nowrap; }
 .kbd { font: inherit; color: color-mix(in oklab, var(--background) 58%, var(--foreground)); font-variant-numeric: tabular-nums; }
 
 /* Side tooltips for a column match the library tooltip, rising a few pixels away from the rail instead of up. */
-.sideTip { --tip-x: -3px; z-index: 90; max-width: 15rem; padding: var(--space-group) var(--space-inset); border: 1px solid color-mix(in oklab, var(--background) 14%, var(--foreground)); border-radius: var(--radius-control); corner-shape: var(--corner-shape); background: var(--foreground); color: var(--background); box-shadow: var(--shadow-raised); font-family: var(--font-body); font-size: var(--text-sm); font-weight: 400; letter-spacing: var(--tracking-body); line-height: var(--leading-body); transform-origin: var(--radix-tooltip-content-transform-origin); transition: opacity var(--duration-fast) var(--ease-enter), transform var(--duration-fast) var(--ease-enter); }
+.sideTip { --tip-x: -3px; z-index: var(--layer-tooltip); max-width: 15rem; padding: var(--space-group) var(--space-inset); border: 1px solid color-mix(in oklab, var(--background) 14%, var(--foreground)); border-radius: var(--radius-control); corner-shape: var(--corner-shape); background: var(--foreground); color: var(--background); box-shadow: var(--shadow-raised); font-family: var(--font-body); font-size: var(--text-sm); font-weight: 400; letter-spacing: var(--tracking-body); line-height: var(--leading-body); transform-origin: var(--radix-tooltip-content-transform-origin); transition: opacity var(--duration-fast) var(--ease-enter), transform var(--duration-fast) var(--ease-enter); }
 .sideTip[data-side="left"] { --tip-x: 3px; }
 @starting-style {
   .sideTip[data-state$="-open"] { opacity: 0; transform: translateX(var(--tip-x)) scale(.97); }

package/components/gauge/gauge.module.css

@@ -1,4 +1,4 @@
-.figure { display: grid; justify-items: center; min-width: 0; gap: 10px; margin: 0; text-align: center; }.figure figcaption { display: grid; gap: 3px; min-width: 0; }.figure strong { font-size: var(--text-sm); font-weight: 500; }.detail { color: var(--text-muted); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
+.figure { display: grid; justify-items: center; min-width: 0; gap: var(--space-group); margin: 0; text-align: center; }.figure figcaption { display: grid; gap: var(--space-tight); min-width: 0; }.figure strong { font-size: var(--text-sm); font-weight: 500; }.detail { color: var(--text-muted); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
 .accent { --gauge-color: var(--accent); --gauge-text: var(--accent-strong); }.success { --gauge-color: var(--success); --gauge-text: var(--success); }.warning { --gauge-color: var(--warning); --gauge-text: var(--warning); }.danger { --gauge-color: var(--danger); --gauge-text: var(--danger); }
 
 /* An activity style ring: a thick stroke with round caps over a faint tint of its own color. The stroke scales with the ring. */
@@ -9,7 +9,7 @@
 .arc { stroke: var(--gauge-color); }
 
 /* The readout sits on the ring's true centre, which is the middle of a square as wide as the ring. */
-.readout { position: absolute; top: 0; left: 0; display: grid; width: 100%; aspect-ratio: 1; place-content: center; justify-items: center; gap: 4px; pointer-events: none; }
+.readout { position: absolute; top: 0; left: 0; display: grid; width: 100%; aspect-ratio: 1; place-content: center; justify-items: center; gap: var(--space-tight); pointer-events: none; }
 .number { position: relative; display: inline-flex; align-items: baseline; color: var(--foreground); font-family: var(--font-display); font-size: var(--text-3xl); font-weight: 500; letter-spacing: var(--tracking-display); line-height: 1; font-variant-numeric: tabular-nums; }
 .digits { display: inline-flex; justify-content: flex-end; white-space: nowrap; }
 .unit { margin-left: 1px; color: var(--text-secondary); font-family: var(--font-body); font-size: .5em; letter-spacing: 0; }

package/components/hover-card/hover-card.module.css

@@ -1,5 +1,5 @@
 /* A floating layer, so it earns the floating shadow. Transforms pivot on the placed origin, the corner nearest the trigger. */
-.card { z-index: 60; box-sizing: border-box; width: 18.5rem; max-width: min(18.5rem, var(--radix-popover-content-available-width, calc(100vw - 24px))); padding: var(--space-inset); border: 1px solid var(--border); border-radius: var(--radius-container); corner-shape: var(--corner-shape); background: var(--surface-raised); color: var(--foreground); box-shadow: var(--shadow-floating); font-family: var(--font-body); letter-spacing: var(--tracking-body); transform-origin: var(--radix-popover-content-transform-origin); outline: none; }
+.card { z-index: var(--layer-popover); box-sizing: border-box; width: 18.5rem; max-width: min(18.5rem, var(--radix-popover-content-available-width, calc(100vw - 24px))); padding: var(--space-inset); border: 1px solid var(--border); border-radius: var(--radius-container); corner-shape: var(--corner-shape); background: var(--surface-raised); color: var(--foreground); box-shadow: var(--shadow-floating); font-family: var(--font-body); letter-spacing: var(--tracking-body); transform-origin: var(--radix-popover-content-transform-origin); outline: none; }
 .profile { display: grid; gap: var(--space-group); }
 .head { display: flex; min-width: 0; align-items: center; gap: var(--space-group); }
 .avatar { position: relative; display: grid; width: 48px; height: 48px; flex: none; place-items: center; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-full); corner-shape: round; background: var(--surface-muted); color: var(--foreground); font-size: var(--text-sm); font-weight: 500; }
@@ -15,6 +15,6 @@
 .stat { display: flex; flex-direction: column-reverse; }
 .stat dt { color: var(--text-muted); font-size: var(--text-xs); line-height: var(--leading-body); }
 .stat dd { margin: 0; color: var(--foreground); font-size: var(--text-base); font-variant-numeric: tabular-nums; font-weight: 500; line-height: var(--leading-body); }
-.meta { display: flex; align-items: center; gap: 6px; color: var(--text-muted); font-size: var(--text-xs); line-height: var(--leading-body); }
+.meta { display: flex; align-items: center; gap: var(--space-related); color: var(--text-muted); font-size: var(--text-xs); line-height: var(--leading-body); }
 .meta svg { flex: none; }
 @media (prefers-reduced-motion: reduce) { .avatar img { transition: none; } .avatar img[data-loading] { filter: none; } }

package/components/image-compare/image-compare.module.css

@@ -6,20 +6,20 @@
 .layer { position: absolute; inset: 0; }
 .layer :where(img, picture, video) { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; -webkit-user-drag: none; }
 /* Captions sit on a frosted chip so they read over any photo, below the divider. */
-.chip { position: absolute; z-index: 1; top: var(--space-group); left: var(--space-group); padding: 3px 10px; border-radius: var(--radius-full); corner-shape: round; background: color-mix(in oklab, var(--background) 74%, transparent); color: var(--foreground); font-size: var(--text-xs); font-weight: 500; line-height: var(--leading-body); letter-spacing: var(--tracking-body); pointer-events: none; -webkit-backdrop-filter: blur(12px) saturate(1.4); backdrop-filter: blur(12px) saturate(1.4); }
+.chip { position: absolute; z-index: 1; top: var(--space-group); left: var(--space-group); padding: var(--space-tight) var(--space-group); border-radius: var(--radius-full); corner-shape: round; background: color-mix(in oklab, var(--background) 74%, transparent); color: var(--foreground); font-size: var(--text-xs); font-weight: 500; line-height: var(--leading-body); letter-spacing: var(--tracking-body); pointer-events: none; -webkit-backdrop-filter: blur(12px) saturate(1.4); backdrop-filter: blur(12px) saturate(1.4); }
 .chip[data-place="end"] { right: var(--space-group); left: auto; }
 .chip[data-place="bottom"] { top: auto; bottom: var(--space-group); }
 /* The pivot is a frame-sized layer moved by a percentage of itself; its top-left corner is the divider's center. */
 .pivot { position: absolute; z-index: 2; inset: 0; pointer-events: none; }
 .rotor { position: absolute; top: 0; left: 0; width: 0; height: 0; }
-.line { position: absolute; top: calc((100cqw + 100cqh) * -1); left: -1px; width: 2px; height: calc((100cqw + 100cqh) * 2); background: var(--surface-raised); box-shadow: 0 0 0 .5px oklch(0% 0 0 / .14); }
+.line { position: absolute; top: calc((100cqw + 100cqh) * -1); left: -1px; width: 2px; height: calc((100cqw + 100cqh) * 2); background: var(--surface-raised); box-shadow: var(--shadow-hairline); }
 /* The line sits on photography, not on the theme, so it stays light in dark mode too. */
 :global(:root[data-theme="dark"]) .line { background: var(--foreground); }
 .handleSlot { position: absolute; top: 0; left: 0; }
 /* Centered with the translate property; Motion only animates its width and height, so the shape morphs without scaling the icons. */
 .handle { position: absolute; top: 0; left: 0; display: grid; box-sizing: border-box; width: 40px; height: 40px; place-items: center; translate: -50% -50%; border: 1px solid var(--border); border-radius: var(--radius-full); corner-shape: round; background: var(--surface-raised); box-shadow: var(--shadow-raised); color: var(--foreground); pointer-events: auto; outline: 0 solid transparent; transition: border-color var(--duration-fast) var(--ease-standard); }
-.handle::after { content: ""; position: absolute; inset: -8px; border-radius: inherit; corner-shape: inherit; }
+.handle::after { content: ""; position: absolute; inset: calc(var(--space-related) * -1); border-radius: inherit; corner-shape: inherit; }
 @media (hover: hover) and (pointer: fine) { .root:hover .handle { border-color: var(--border-strong); } }
 .chevrons { display: flex; align-items: center; }
-.chevron { display: grid; margin-inline: -2.5px; place-items: center; }
+.chevron { display: grid; margin-inline: calc(var(--space-hair) * -1); place-items: center; }
 @media (prefers-reduced-motion: reduce) { .handle { transition: none; } }

package/components/inline-edit/inline-edit.module.css

@@ -4,9 +4,9 @@
 .root[data-variant="title"] { --size: var(--text-xl); --leading: round(var(--size) * 1.3, 2px); --weight: 500; --ink: var(--foreground); }
 .root[data-variant="body"] { --pad-y: 5px; --size: var(--text-sm); --leading: round(var(--size) * 1.5, 1px); --weight: 400; --ink: var(--text-secondary); }
 /* Room for the actions is reserved in every state, so the text never rewraps when editing starts. */
-/* Inter at every size here: a heading host keeps its semantics but not the display face. */
-.line { display: block; min-width: 0; margin: 0; padding-inline-end: 66px; color: var(--ink); font-family: var(--font-body); font-size: var(--size); font-weight: var(--weight); line-height: var(--leading); letter-spacing: var(--tracking-body); }
-.root[data-multiline] .line { padding-inline-end: 38px; }
+/* The body face at every size here: a heading host keeps its semantics but not the display face. */
+.line { display: block; min-width: 0; margin: 0; padding-inline-end: var(--space-stage); color: var(--ink); font-family: var(--font-body); font-size: var(--size); font-weight: var(--weight); line-height: var(--leading); letter-spacing: var(--tracking-body); }
+.root[data-multiline] .line { padding-inline-end: var(--space-block); }
 .box { position: relative; display: inline-block; max-width: 100%; vertical-align: top; }
 .root[data-multiline] .box { display: block; }
 
@@ -16,7 +16,7 @@
 .root[data-multiline] .display { width: 100%; }
 .root[data-editing] .display { visibility: hidden; }
 /* While editing, a single line keeps a little extra room, so the next character never has to wait for the box. */
-.root[data-editing]:not([data-multiline]) .display { min-width: 5em; padding-inline-end: calc(var(--pad-x) + 16px); }
+.root[data-editing]:not([data-multiline]) .display { min-width: 5em; padding-inline-end: calc(var(--pad-x) + var(--space-inset)); }
 .display[aria-disabled="true"] { cursor: progress; }
 .layer { position: relative; display: block; transition: opacity var(--duration-standard) var(--ease-standard); }
 .layer[data-empty] { color: var(--text-muted); }
@@ -45,28 +45,28 @@ textarea.control { white-space: pre-wrap; overflow-wrap: break-word; }
 .root[data-flash="off"] .frame { transition-duration: var(--duration-considered); }
 
 /* The slot rides on the frame's edge, so it follows the width morph instead of jumping to the new width. */
-.slot { position: absolute; top: 50%; left: calc(100% + 6px); display: grid; min-height: 28px; margin-top: -14px; pointer-events: auto; }
-.root[data-multiline] .slot { top: 0; left: calc(100% + 8px); margin-top: calc(var(--pad-y) + var(--leading) / 2 - 13px); }
+.slot { position: absolute; top: 50%; left: calc(100% + var(--space-related)); display: grid; min-height: 28px; margin-top: calc(var(--space-inset) * -1); pointer-events: auto; }
+.root[data-multiline] .slot { top: 0; left: calc(100% + var(--space-related)); margin-top: calc(var(--pad-y) + var(--leading) / 2 - var(--space-group)); }
 .slotItem { display: grid; grid-area: 1 / 1; min-height: 28px; place-items: center start; }
-.actions { display: flex; gap: 4px; }
+.actions { display: flex; gap: var(--space-tight); }
 .root[data-multiline] .actions { flex-direction: column; }
 .save, .cancel { display: grid; width: 28px; height: 28px; flex: none; place-items: center; padding: 0; border: 1px solid transparent; border-radius: var(--radius-full); corner-shape: round; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), transform var(--duration-instant) var(--ease-standard); }
 .save { background: var(--foreground); color: var(--background); }
 .cancel { border-color: var(--border); background: var(--surface); color: var(--text-secondary); }
 .save:active, .cancel:active { transform: scale(.96); }
 @media (hover: hover) and (pointer: fine) { .save:hover { background: color-mix(in oklab, var(--foreground) 86%, var(--background)); } .cancel:hover { border-color: var(--border-strong); background: var(--surface-muted); color: var(--foreground); } }
-.pencil { margin-left: 2px; color: var(--text-muted); cursor: pointer; }
-.spinner { display: block; width: 14px; height: 14px; margin-left: 2px; border: 1.5px solid var(--text-muted); border-right-color: transparent; border-radius: var(--radius-full); corner-shape: round; animation: spin .7s linear infinite; }
+.pencil { margin-left: var(--space-hair); color: var(--text-muted); cursor: pointer; }
+.spinner { display: block; width: 14px; height: 14px; margin-left: var(--space-hair); border: 1.5px solid var(--text-muted); border-right-color: transparent; border-radius: var(--radius-full); corner-shape: round; animation: spin .7s linear infinite; }
 .saved { display: grid; margin-left: 1px; place-items: center; color: var(--success); }
 .failedIcon { margin-left: 1px; color: var(--danger); }
 
 /* The message row opens from a true zero; its spacing lives inside the clipped slot. */
 .reveal { display: block; overflow: hidden; }
 .revealInner { position: relative; display: block; }
-.message { display: flex; align-items: flex-start; gap: 6px; padding: 6px var(--pad-x) 4px calc(var(--pad-x) + 1px); color: var(--text-secondary); font-size: var(--text-xs); font-weight: 400; line-height: var(--leading-body); }
+.message { display: flex; align-items: flex-start; gap: var(--space-related); padding: var(--space-related) var(--pad-x) var(--space-tight) calc(var(--pad-x) + 1px); color: var(--text-secondary); font-size: var(--text-xs); font-weight: 400; line-height: var(--leading-body); }
 .message[data-tone="error"] { color: var(--danger); }
-.messageIcon { flex: none; margin-top: 2px; color: var(--danger); }
-.retry { margin: 0 0 0 2px; padding: 0; border: 0; border-radius: var(--radius-detail); corner-shape: var(--corner-shape); background: none; color: var(--foreground); font: inherit; font-weight: 500; text-decoration: underline; text-decoration-color: var(--border-strong); text-underline-offset: 3px; cursor: pointer; }
+.messageIcon { flex: none; margin-top: var(--space-hair); color: var(--danger); }
+.retry { margin: 0 0 0 var(--space-hair); padding: 0; border: 0; border-radius: var(--radius-detail); corner-shape: var(--corner-shape); background: none; color: var(--foreground); font: inherit; font-weight: 500; text-decoration: underline; text-decoration-color: var(--border-strong); text-underline-offset: 3px; cursor: pointer; }
 @media (hover: hover) and (pointer: fine) { .retry:hover { text-decoration-color: currentColor; } }
 .srOnly { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
 @keyframes spin { to { transform: rotate(360deg); } }

package/components/json-viewer/json-viewer.module.css

@@ -1,16 +1,16 @@
 .root { --mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace; --indent: 16px; display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-container); background: var(--surface); color: var(--foreground); font-family: var(--font-body); letter-spacing: var(--tracking-body); }
 
 /* Toolbar: search with a match counter, then expand and collapse all. */
-.toolbar { display: flex; align-items: center; gap: 2px; padding: 6px; border-bottom: 1px solid var(--border-subtle); }
-.search { position: relative; display: flex; min-width: 0; flex: 1; align-items: center; gap: 4px; min-height: 34px; padding: 0 4px 0 10px; border-radius: var(--radius-control); background: var(--surface-muted); cursor: text; }
+.toolbar { display: flex; align-items: center; gap: var(--space-hair); padding: var(--space-related); border-bottom: 1px solid var(--border-subtle); }
+.search { position: relative; display: flex; min-width: 0; flex: 1; align-items: center; gap: var(--space-tight); min-height: 34px; padding: 0 var(--space-tight) 0 var(--space-group); border-radius: var(--radius-control); background: var(--surface-muted); cursor: text; }
 .searchIcon { flex: none; color: var(--text-muted); }
-.input { min-width: 0; flex: 1; height: 34px; padding: 0 4px; border: 0; background: transparent; color: var(--foreground); font: inherit; font-size: var(--text-sm); outline: none; }
+.input { min-width: 0; flex: 1; height: 34px; padding: 0 var(--space-tight); border: 0; background: transparent; color: var(--foreground); font: inherit; font-size: var(--text-sm); outline: none; }
 .input::placeholder { color: var(--text-muted); }
 .input::-webkit-search-cancel-button { display: none; }
 .matches { display: inline-flex; flex: none; align-items: center; gap: 0; }
-.count { min-width: 3.5ch; padding-inline: 4px; color: var(--text-muted); font-size: var(--text-xs); font-variant-numeric: tabular-nums; text-align: right; }
+.count { min-width: 3.5ch; padding-inline: var(--space-tight); color: var(--text-muted); font-size: var(--text-xs); font-variant-numeric: tabular-nums; text-align: right; }
 .grow { flex: 1; }
-.divider { width: 1px; height: 18px; margin-inline: 4px; background: var(--border-subtle); }
+.divider { width: 1px; height: 18px; margin-inline: var(--space-tight); background: var(--border-subtle); }
 .tool { display: inline-grid; width: 34px; height: 34px; flex: none; place-items: center; padding: 0; border: 0; border-radius: var(--radius-control); background: transparent; color: var(--text-secondary); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: color var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard), opacity var(--duration-fast) var(--ease-standard); }
 .tool:disabled { cursor: default; opacity: .4; }
 .tool:active:not(:disabled) { background: var(--surface-muted); color: var(--foreground); }
@@ -18,10 +18,10 @@
 .search .tool:active:not(:disabled) { background: var(--surface); }
 
 /* Tree. Rows are one fixed height, so scrolling can aim at where a row will settle. */
-.tree { position: relative; max-height: var(--json-max-height, 420px); padding: 6px; overflow: auto; overflow-anchor: none; overscroll-behavior: contain; font-family: var(--mono); font-size: 13px; font-variant-ligatures: none; letter-spacing: 0; scrollbar-width: thin; }
+.tree { position: relative; max-height: var(--json-max-height, 420px); padding: var(--space-related); overflow: auto; overflow-anchor: none; overscroll-behavior: contain; font-family: var(--mono); font-size: var(--text-sm); font-variant-ligatures: none; letter-spacing: 0; scrollbar-width: thin; }
 .row { position: relative; border-radius: var(--radius-detail); cursor: default; outline: none; -webkit-tap-highlight-color: transparent; }
 .highlight { position: absolute; inset: 1px 0; border-radius: var(--radius-detail); background: var(--surface-muted); }
-.line { position: relative; display: flex; height: 30px; min-width: 0; align-items: center; gap: 6px; padding-right: 6px; padding-left: calc(4px + var(--level, 0) * var(--indent)); white-space: nowrap; }
+.line { position: relative; display: flex; height: 30px; min-width: 0; align-items: center; gap: var(--space-related); padding-right: var(--space-related); padding-left: calc(var(--space-tight) + var(--level, 0) * var(--indent)); white-space: nowrap; }
 .row[data-kind="node"] .line { cursor: pointer; }
 
 .chevron { display: inline-grid; width: 14px; height: 14px; flex: none; place-items: center; color: var(--text-muted); transition: transform var(--duration-spring) var(--ease-spring), color var(--duration-fast) var(--ease-standard); }
@@ -30,8 +30,8 @@
 
 .key { flex: none; max-width: 45%; overflow: hidden; color: var(--foreground); text-overflow: ellipsis; }
 .index { flex: none; color: var(--text-muted); font-variant-numeric: tabular-nums; }
-.colon { flex: none; margin-left: -5px; color: var(--text-muted); }
-.summary { display: inline-flex; min-width: 0; align-items: baseline; gap: 8px; overflow: hidden; }
+.colon { flex: none; margin-left: calc(var(--space-tight) * -1); color: var(--text-muted); }
+.summary { display: inline-flex; min-width: 0; align-items: baseline; gap: var(--space-related); overflow: hidden; }
 .preview { min-width: 0; overflow: hidden; color: var(--text-muted); text-overflow: ellipsis; }
 .countLabel { flex: none; color: var(--text-muted); font-family: var(--font-body); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
 
@@ -45,14 +45,14 @@
 .mark { border-radius: var(--radius-detail); background: color-mix(in oklab, var(--warning) 22%, transparent); color: inherit; box-shadow: 0 0 0 1px color-mix(in oklab, var(--warning) 22%, transparent); transition: background-color var(--duration-fast) var(--ease-standard); }
 .mark[data-current] { background: color-mix(in oklab, var(--warning) 48%, transparent); }
 
-.more { display: inline-flex; align-items: baseline; gap: 10px; padding-left: 20px; font-family: var(--font-body); font-size: var(--text-sm); }
+.more { display: inline-flex; align-items: baseline; gap: var(--space-group); padding-left: var(--space-comfort); font-family: var(--font-body); font-size: var(--text-sm); }
 .moreLabel { color: var(--foreground); font-weight: 500; }
 .row[data-kind="more"] { cursor: pointer; }
 .muted { color: var(--text-muted); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
 
 /* Copy actions appear at the row's end over a soft fade, on hover or on the current row. */
 /* Inset like the highlight, with its right corners, so the fade never shows a square edge past the row's rounded end. */
-.actions { position: absolute; top: 1px; right: 0; bottom: 1px; display: flex; align-items: center; gap: 0; padding-right: 1px; padding-left: 24px; border-radius: 0 var(--radius-detail) var(--radius-detail) 0; background: linear-gradient(to right, transparent, var(--surface) 22px); opacity: 0; pointer-events: none; transition: opacity var(--duration-fast) var(--ease-standard); }
+.actions { position: absolute; top: 1px; right: 0; bottom: 1px; display: flex; align-items: center; gap: 0; padding-right: 1px; padding-left: var(--space-section); border-radius: 0 var(--radius-detail) var(--radius-detail) 0; background: linear-gradient(to right, transparent, var(--surface) 22px); opacity: 0; pointer-events: none; transition: opacity var(--duration-fast) var(--ease-standard); }
 .row[data-active] .actions { background: linear-gradient(to right, transparent, var(--surface-muted) 22px); }
 .action { position: relative; display: inline-grid; width: 26px; height: 26px; place-items: center; padding: 0; border: 0; border-radius: var(--radius-detail); background: transparent; color: var(--text-secondary); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: color var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard); }
 .action[data-state="done"] { color: var(--success); }
@@ -62,7 +62,7 @@
 .row[data-active] .actions, .row:focus-within .actions { opacity: 1; pointer-events: auto; }
 
 /* The current path, always readable in full through its copy action. */
-.pathBar { display: flex; min-width: 0; align-items: center; gap: 10px; padding: 6px 6px 6px 14px; border-top: 1px solid var(--border-subtle); }
+.pathBar { display: flex; min-width: 0; align-items: center; gap: var(--space-group); padding: var(--space-related) var(--space-related) var(--space-related) var(--space-inset); border-top: 1px solid var(--border-subtle); }
 .path { min-width: 0; flex: 1; overflow: hidden; color: var(--text-secondary); font-family: var(--mono); font-size: var(--text-xs); letter-spacing: 0; text-overflow: ellipsis; white-space: nowrap; }
 .pathType { flex: none; color: var(--text-muted); font-size: var(--text-xs); }
 .pathCopy { width: 30px; height: 30px; border-radius: var(--radius-detail); }

package/components/line-chart/line-chart.module.css

@@ -1,8 +1,8 @@
 .figure { display: grid; min-width: 0; gap: var(--space-inset); margin: 0; color: var(--foreground); font-family: var(--font-body); letter-spacing: var(--tracking-body); }
 
 /* Series toggles: a plain line swatch beside each name. A hidden series keeps its place, its swatch empties and its name steps back. */
-.legend { display: flex; flex-wrap: wrap; gap: 2px 4px; min-width: 0; margin-inline: -8px; }
-.toggle { display: inline-flex; min-height: 32px; align-items: center; gap: 8px; padding: 0 10px 0 8px; border: 0; border-radius: var(--radius-full); corner-shape: round; background: transparent; color: var(--text-secondary); cursor: pointer; font: inherit; font-size: var(--text-sm); line-height: var(--leading-body); -webkit-tap-highlight-color: transparent; transition: color var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard), transform var(--duration-instant) var(--ease-standard); }
+.legend { display: flex; flex-wrap: wrap; gap: var(--space-hair) var(--space-tight); min-width: 0; margin-inline: calc(var(--space-related) * -1); }
+.toggle { display: inline-flex; min-height: 32px; align-items: center; gap: var(--space-related); padding: 0 var(--space-group) 0 var(--space-related); border: 0; border-radius: var(--radius-full); corner-shape: round; background: transparent; color: var(--text-secondary); cursor: pointer; font: inherit; font-size: var(--text-sm); line-height: var(--leading-body); -webkit-tap-highlight-color: transparent; transition: color var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard), transform var(--duration-instant) var(--ease-standard); }
 .toggle:active { transform: scale(.97); }
 .toggle[aria-pressed="false"] { color: var(--text-muted); }
 .toggleLabel { white-space: nowrap; transition: opacity var(--duration-fast) var(--ease-standard); }
@@ -31,25 +31,25 @@
 .chart[data-scrubbing] .dot:not([data-hidden]) { opacity: 1; }
 
 /* The tooltip floats over the plot, so it is the one layer here with a shadow. Springs carry its position; opacity and a small scale bring it in. */
-.tooltip { position: absolute; top: 0; left: 0; z-index: 1; display: grid; min-width: 140px; max-width: min(220px, 100%); gap: 4px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-control); corner-shape: var(--corner-shape); background: var(--surface-raised); box-shadow: var(--shadow-floating); opacity: 0; pointer-events: none; scale: .96; transition: opacity var(--duration-fast) var(--ease-standard), scale var(--duration-fast) var(--ease-standard); }
+.tooltip { position: absolute; top: 0; left: 0; z-index: 1; display: grid; min-width: 140px; max-width: min(220px, 100%); gap: var(--space-tight); padding: var(--space-group) var(--space-group); border: 1px solid var(--border); border-radius: var(--radius-control); corner-shape: var(--corner-shape); background: var(--surface-raised); box-shadow: var(--shadow-floating); opacity: 0; pointer-events: none; scale: .96; transition: opacity var(--duration-fast) var(--ease-standard), scale var(--duration-fast) var(--ease-standard); }
 .chart[data-scrubbing] .tooltip { opacity: 1; scale: 1; }
-.tipTitle { margin: 0 0 2px; color: var(--text-secondary); font-size: var(--text-xs); line-height: var(--leading-body); white-space: nowrap; font-variant-numeric: tabular-nums; }
-.tipRow { display: flex; min-width: 0; align-items: center; gap: 8px; margin: 0; font-size: var(--text-sm); line-height: var(--leading-body); }
+.tipTitle { margin: 0 0 var(--space-hair); color: var(--text-secondary); font-size: var(--text-xs); line-height: var(--leading-body); white-space: nowrap; font-variant-numeric: tabular-nums; }
+.tipRow { display: flex; min-width: 0; align-items: center; gap: var(--space-related); margin: 0; font-size: var(--text-sm); line-height: var(--leading-body); }
 .tipSwatch { width: 10px; height: 2.5px; flex: none; border-radius: var(--radius-full); corner-shape: round; background: var(--series); }
 .tipSwatch[data-dashed] { background: repeating-linear-gradient(to right, var(--series) 0 3px, transparent 3px 5px); }
 .tipName { min-width: 0; flex: 1; overflow: hidden; color: var(--text-secondary); text-overflow: ellipsis; white-space: nowrap; }
-.tipValue { flex: none; margin-left: 8px; color: var(--foreground); font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
+.tipValue { flex: none; margin-left: var(--space-related); color: var(--foreground); font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
 
 .message { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; color: var(--text-muted); font-size: var(--text-sm); pointer-events: none; }
 /* First load with nothing to keep on screen: a calm band that breathes where the lines will be. */
 .skeleton { position: absolute; inset: 30% 0 25%; border-radius: var(--radius-control); corner-shape: var(--corner-shape); background: linear-gradient(to bottom, transparent, color-mix(in oklab, var(--foreground) 5%, transparent)); animation: breathe 1.4s var(--ease-in-out) infinite alternate; }
 
 .gutter { position: relative; grid-area: 1 / 2; min-width: 0; }
-.tick { position: absolute; top: 0; left: 10px; display: block; height: 0; white-space: nowrap; pointer-events: none; }
+.tick { position: absolute; top: 0; left: var(--space-group); display: block; height: 0; white-space: nowrap; pointer-events: none; }
 .tickText { display: block; transform: translateY(-50%); color: var(--text-muted); font-size: var(--text-xs); line-height: 1; font-variant-numeric: tabular-nums; }
 
 .axis { position: relative; grid-area: 2 / 1; min-width: 0; }
-.axisLabel { position: absolute; top: 8px; color: var(--text-muted); font-size: var(--text-xs); line-height: 1; white-space: nowrap; font-variant-numeric: tabular-nums; }
+.axisLabel { position: absolute; top: var(--space-related); color: var(--text-muted); font-size: var(--text-xs); line-height: 1; white-space: nowrap; font-variant-numeric: tabular-nums; }
 
 .srOnly { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
 

package/components/mention-input/mention-input.module.css

@@ -24,7 +24,7 @@
   box-sizing: border-box;
   width: 100%;
   margin: 0;
-  padding: 11px 14px;
+  padding: var(--space-group) var(--space-inset);
   border: 0;
   font: inherit;
   font-size: var(--text-base);
@@ -66,8 +66,8 @@
 
 /* A token is tinted around its own glyphs; the negative margin keeps every character where the textarea put it. */
 .token {
-  margin: 0 -3px;
-  padding: 1px 3px;
+  margin: 0 calc(var(--space-tight) * -1);
+  padding: 1px var(--space-tight);
   border-radius: var(--radius-detail); corner-shape: var(--corner-shape);
   background: var(--accent-subtle);
   color: var(--accent-strong);
@@ -78,7 +78,7 @@
 
 .popover {
   position: absolute;
-  z-index: 30;
+  z-index: var(--layer-dropdown);
   width: 272px;
   max-width: 100%;
   overflow: hidden;
@@ -88,7 +88,7 @@
   box-shadow: var(--shadow-floating);
 }
 .popover[data-above] { translate: 0 -100%; }
-.popoverBody { padding: 6px; }
+.popoverBody { padding: var(--space-related); }
 
 .list { position: relative; display: grid; margin: 0; padding: 0; list-style: none; }
 .highlight { position: absolute; top: 0; right: 0; left: 0; border-radius: var(--radius-control); corner-shape: var(--corner-shape); background: color-mix(in oklab, var(--foreground) 6.5%, transparent); pointer-events: none; }
@@ -98,8 +98,8 @@
   display: flex;
   min-width: 0;
   align-items: center;
-  gap: 10px;
-  padding: 7px 10px 7px 8px;
+  gap: var(--space-group);
+  padding: var(--space-related) var(--space-group) var(--space-related) var(--space-related);
   border-radius: var(--radius-control); corner-shape: var(--corner-shape);
   cursor: pointer;
   font-size: var(--text-sm);
@@ -129,6 +129,6 @@
 .optionMeta { overflow: hidden; color: var(--text-muted); font-size: var(--text-xs); text-overflow: ellipsis; white-space: nowrap; }
 .count { flex: none; color: var(--text-muted); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
 
-.empty { margin: 0; padding: 10px 10px; color: var(--text-secondary); font-size: var(--text-sm); }
+.empty { margin: 0; padding: var(--space-group) var(--space-group); color: var(--text-secondary); font-size: var(--text-sm); }
 
 .srOnly { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

package/components/metric-card/metric-card.module.css

@@ -1,7 +1,7 @@
 .card { min-width: 0; border: 1px solid var(--border); border-radius: var(--radius-overlay); corner-shape: var(--corner-shape); padding: var(--space-section); background: var(--surface); box-shadow: var(--shadow-resting); }
 .top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-group); margin-bottom: var(--space-block); }
 .top span { color: var(--text-secondary); font-size: var(--text-sm); }
-.top small { display: inline-flex; flex: 0 0 auto; border: 1px solid var(--border); border-radius: var(--radius-full); corner-shape: round; padding: 3px 8px; color: var(--text-secondary); font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
+.top small { display: inline-flex; flex: 0 0 auto; border: 1px solid var(--border); border-radius: var(--radius-full); corner-shape: round; padding: var(--space-tight) var(--space-related); color: var(--text-secondary); font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
 .card p { margin: var(--space-inset) 0 0; color: var(--text-muted); font-size: var(--text-sm); line-height: var(--leading-body); }
 @media (max-width: 380px) { .card { padding: var(--space-inset); } .top { align-items: flex-start; flex-wrap: wrap; margin-bottom: var(--space-section); } }
 /* Text swaps: the outgoing copy is popped out of flow so the wrapper never holds both widths. */