@mcp-b/react-components 0.20.5 → 0.21.0

package/dist/styles/base.css

@@ -13,11 +13,96 @@
   margin: 0;
 }
 
+/*
+ * Corner shape, system-wide.
+ *
+ * corner-shape has no effect on a square corner, so applying it everywhere
+ * costs nothing and means a component gets the shape by having a radius rather
+ * than by remembering to opt in. In browsers without corner-shape the token
+ * resolves to `round` and nothing changes.
+ *
+ * The exception is a pill or a circle: a superellipse turns a stadium into a
+ * lozenge and a circle into a squircle. Anything using --sigvelo-radius-full or
+ * --sigvelo-radius-circle therefore overrides the custom property back to
+ * `round` in the block below. audit:css-recipes fails if that list falls out of
+ * sync with the stylesheets.
+ */
+:where(*) {
+  corner-shape: var(--sigvelo-corner-shape);
+}
+
+/* sigvelo-pill-shapes:start */
+:where(
+  .agent-activity-preview__badge,
+  .agent-activity-preview__dismiss,
+  .agent-activity-preview__favicons img,
+  .agent-activity-preview__unviewed-dot,
+  .approval__key,
+  .avatar,
+  .avatar-group__count,
+  .avatar__badge,
+  .avatar__fallback,
+  .badge,
+  .browser-run-panel__tab-glyph,
+  .chain-of-thought__search-result,
+  .chain-of-thought__step-indicator,
+  .codex-model-selector__trigger,
+  .codex-model-selector__trigger::before,
+  .empty-state__icon,
+  .inline-citation__trigger,
+  .media-preview-card__play,
+  .menu__radio-indicator::before,
+  .message-scroller__button,
+  .plan__step-indicator,
+  .prompt-input__button[data-responsive-label],
+  .prompt-input__context-trigger,
+  .prompt-input__dictation[data-listening] .prompt-input__dictation-icon::before,
+  .prompt-input__permissions-trigger,
+  .prompt-input__recording-button,
+  .prompt-input__stop,
+  .prompt-input__submit,
+  .queue__item-indicator,
+  .radio,
+  .radio__indicator,
+  .scroll-area__thumb,
+  .slider__indicator,
+  .slider__thumb,
+  .slider__track,
+  .status-pill__dot,
+  .stepper__indicator,
+  .stepper__separator,
+  .stepper__trigger,
+  .subagent-run__milestone::before,
+  .subagent-run__selector,
+  .switch,
+  .switch__thumb,
+  .task__item::before,
+  .test-results__test-status,
+  .think-routine-library__routine-status,
+  [data-slot="meter-indicator"],
+  [data-slot="meter-track"],
+  [data-slot="progress-indicator"],
+  [data-slot="progress-track"]
+) {
+  --sigvelo-corner-shape: round;
+}
+/* sigvelo-pill-shapes:end */
+
+/*
+ * Interface text reads at 14px, not at the 16px root.
+ *
+ * The root stays 16px so 1rem is still 16px and the 4px spacing grid is
+ * untouched — the same split the reference bundles use, where the type scale
+ * is re-pointed but the spacing base stays at 0.25rem. Components that name a
+ * step explicitly are unaffected; this only moves what inherited text lands on,
+ * which is where a 16px default reads oversized against 32px rows and 13px
+ * control labels.
+ */
 body {
   position: relative;
   font-family: var(--sigvelo-font-sans);
-  font-size: var(--sigvelo-text-base);
-  line-height: var(--sigvelo-leading-normal);
+  font-size: var(--sigvelo-text-sm);
+  line-height: var(--sigvelo-text-sm-leading);
   color: var(--sigvelo-color-text);
   background-color: var(--sigvelo-color-canvas);
   -webkit-font-smoothing: antialiased;
@@ -25,7 +110,7 @@ body {
 }
 
 .sigvelo-icon--spinner {
-  animation: sigvelo-icon-spin var(--sigvelo-duration-slow) linear infinite;
+  animation: sigvelo-icon-spin var(--sigvelo-motion-duration-spin) linear infinite;
   transform-origin: center;
 }
 
@@ -56,6 +141,13 @@ body {
   }
 }
 
+/* Headings are short enough for the browser to balance the rag for free;
+   balance gives up past a handful of lines, so this costs nothing on the
+   occasional long one. */
+:where(h1, h2, h3, h4, h5, h6) {
+  text-wrap: balance;
+}
+
 code,
 kbd,
 samp,

package/dist/styles/browser-control-overlay.css

@@ -2,6 +2,12 @@
  * Standalone stylesheet for browser-control chrome mounted in a closed shadow
  * root. It intentionally uses system colors so it remains legible on arbitrary
  * pages without leaking the full document-level token sheet into the host.
+ *
+ * Every length here is a literal on purpose. The token layer does not exist
+ * inside this shadow root, so a --sigvelo-* reference resolves to nothing and
+ * takes its whole declaration with it — silently, and only on a real host page,
+ * which is the one place this is hard to notice. Keep the values on the 4px
+ * grid by hand; audit:css-recipes checks both halves of that.
  */
 
 :host {
@@ -18,6 +24,10 @@
   padding: 0;
   pointer-events: none;
   position: fixed;
+  /* Mirrors --sigvelo-z-host-overlay, deliberately as a literal. This sheet is
+     mounted in a closed shadow root on someone else's page, where the token
+     layer does not exist; var() would resolve to nothing, z-index would fall
+     back to auto, and the overlay would quietly stop being on top. */
   z-index: 2147483647;
 }
 
@@ -69,7 +79,7 @@
   font:
     600 12px/1.2 system-ui,
     sans-serif;
-  padding: 7px 12px;
+  padding: 8px 12px;
 }
 
 :host button:focus-visible {
@@ -85,7 +95,7 @@
 :host .takeover,
 :host .owner {
   background: var(--browser-control-accent);
-  border: var(--sigvelo-border-style) var(--sigvelo-border-width) var(--browser-control-accent-text);
+  border: solid 1px var(--browser-control-accent-text);
   box-shadow: 0 2px 10px var(--browser-control-shadow);
   color: var(--browser-control-accent-text);
 }
@@ -109,7 +119,7 @@
   left: 10px;
   max-width: min(360px, 60vw);
   overflow: hidden;
-  padding: 7px 12px;
+  padding: 8px 12px;
   pointer-events: none;
   position: fixed;
   text-overflow: ellipsis;
@@ -120,8 +130,7 @@
 :host .banner {
   align-items: center;
   background: var(--browser-control-warning);
-  border: var(--sigvelo-border-style) var(--sigvelo-border-width)
-    var(--browser-control-warning-text);
+  border: solid 1px var(--browser-control-warning-text);
   border-radius: 14px;
   box-shadow: 0 4px 18px var(--browser-control-shadow);
   color: var(--browser-control-warning-text);
@@ -132,7 +141,7 @@
   gap: 10px;
   left: 50%;
   max-width: min(720px, calc(100vw - 32px));
-  padding: 9px 10px 9px 16px;
+  padding: 8px 10px 8px 16px;
   pointer-events: auto;
   position: fixed;
   top: 12px;
@@ -148,7 +157,7 @@
 
 :host .banner .done,
 :host .banner .cannot {
-  border: var(--sigvelo-border-style) var(--sigvelo-border-width) currentcolor;
+  border: solid 1px currentcolor;
   color: inherit;
   flex-shrink: 0;
 }

package/dist/styles/browser-live-view.css

@@ -27,25 +27,17 @@
   opacity: 1;
 }
 
-/* The chip itself is the library Badge (sm/destructive) — only the overlay
-   placement lives here. */
+/* The chip itself is the library StatusPill (sm/destructive/busy) — only the
+   overlay placement lives here. */
 .browser-live-view__badge {
   position: absolute;
   inset-block-start: var(--sigvelo-spacing-2);
   inset-inline-end: var(--sigvelo-spacing-2);
   z-index: 1;
-  box-shadow: var(--sigvelo-shadow-sm);
+  box-shadow: var(--sigvelo-elevation-raised);
   pointer-events: none;
 }
 
-.browser-live-view__badge-dot {
-  inline-size: var(--sigvelo-spacing-1-5);
-  block-size: var(--sigvelo-spacing-1-5);
-  border-radius: var(--sigvelo-radius-circle);
-  background-color: currentColor;
-  animation: browser-live-view-pulse 1.4s ease-in-out infinite;
-}
-
 /* Ended state: quiet fill, same footprint so the layout never jumps */
 .browser-live-view__ended {
   display: flex;
@@ -91,10 +83,6 @@
   z-index: 1;
 }
 
-.browser-live-view__state-spinner {
-  animation: sigvelo-icon-spin 900ms linear infinite;
-}
-
 /* Expand affordance, video-player style: quiet until the box is hovered or
    the button is focused */
 .browser-live-view__expand {
@@ -102,8 +90,8 @@
   inset-block-end: var(--sigvelo-spacing-2);
   inset-inline-end: var(--sigvelo-spacing-2);
   z-index: 1;
-  background-color: var(--sigvelo-color-surface);
-  box-shadow: var(--sigvelo-shadow-sm);
+  background-color: var(--sigvelo-color-surface-raised);
+  box-shadow: var(--sigvelo-elevation-floating);
   opacity: 0;
   transition:
     opacity var(--sigvelo-motion-duration-interaction) var(--sigvelo-motion-ease-change),
@@ -144,27 +132,6 @@
   object-fit: contain;
 }
 
-@keyframes browser-live-view-pulse {
-  0%,
-  100% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0.4;
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .browser-live-view__badge-dot,
-  .browser-live-view__state-spinner {
-    animation: none;
-  }
-}
-
-:root[data-motion="reduce"] :is(.browser-live-view__badge-dot, .browser-live-view__state-spinner) {
-  animation: none;
-}
-
 @media (hover: none) {
   .browser-live-view__expand {
     opacity: 1;

package/dist/styles/browser-replay.css

@@ -34,15 +34,11 @@
   pointer-events: none;
 }
 
+/* Positioning only: this overlays the replay stage. The typography is
+   .empty-state. */
 .browser-replay__empty {
   position: absolute;
   inset: 0;
-  display: grid;
-  place-content: center;
-  padding: var(--sigvelo-spacing-4);
-  color: var(--sigvelo-color-text-muted);
-  font-size: var(--sigvelo-text-compact);
-  text-align: center;
 }
 
 .browser-replay__controls {

package/dist/styles/browser-run-panel.css

@@ -5,7 +5,7 @@
 }
 
 .browser-run-panel .web-preview__nav:has(.browser-run-panel__tabs) {
-  min-block-size: 3rem;
+  min-block-size: var(--sigvelo-spacing-12);
   gap: 0;
   padding-block: 0;
   padding-inline: var(--sigvelo-spacing-1-5);
@@ -49,8 +49,8 @@
 .browser-run-panel__tab-glyph {
   display: grid;
   flex: none;
-  inline-size: 1.125rem;
-  block-size: 1.125rem;
+  inline-size: var(--sigvelo-control-icon-size-lg);
+  block-size: var(--sigvelo-control-icon-size-lg);
   place-items: center;
   border-radius: var(--sigvelo-radius-circle);
   background: var(--sigvelo-color-primary-bg-subtle);
@@ -67,7 +67,7 @@
 }
 
 .browser-run-panel__address-bar {
-  min-block-size: 3rem;
+  min-block-size: var(--sigvelo-spacing-12);
   background: var(--sigvelo-color-surface);
 }
 
@@ -101,20 +101,6 @@
   color: var(--sigvelo-color-danger-text);
 }
 
-.browser-run-panel__spinner {
-  animation: sigvelo-icon-spin 900ms linear infinite;
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .browser-run-panel__spinner {
-    animation: none;
-  }
-}
-
-:root[data-motion="reduce"] .browser-run-panel__spinner {
-  animation: none;
-}
-
 @media (forced-colors: active) {
   .browser-run-panel__tab[data-active] {
     outline: var(--sigvelo-focus-ring-forced);

package/dist/styles/button.css

@@ -27,7 +27,9 @@
     color var(--sigvelo-motion-duration-interaction) var(--sigvelo-motion-ease-change),
     border-color var(--sigvelo-motion-duration-interaction) var(--sigvelo-motion-ease-change),
     box-shadow var(--sigvelo-motion-duration-interaction) var(--sigvelo-motion-ease-change),
-    translate var(--sigvelo-motion-duration-interaction) var(--sigvelo-motion-ease-change);
+    /* Release settles with a damped spring; the color transitions above stay on
+       the standard curve, where a bounce would just read as a slow fade. */
+    translate var(--sigvelo-motion-duration-presence) var(--sigvelo-ease-press);
 }
 
 .button svg {

package/dist/styles/card.css

@@ -1,10 +1,10 @@
 .card {
-  background-color: var(--sigvelo-color-surface);
+  background-color: var(--sigvelo-color-surface-raised);
   color: var(--sigvelo-color-text);
-  /* Shadow-led elevation: no perimeter border */
+  /* Shadow-led elevation: the hairline ring in the stack is the perimeter. */
   border-radius: var(--sigvelo-radius-lg);
   padding: var(--sigvelo-spacing-4);
-  box-shadow: var(--sigvelo-shadow-sm);
+  box-shadow: var(--sigvelo-elevation-raised);
   transition: box-shadow var(--sigvelo-motion-duration-interaction)
     var(--sigvelo-motion-ease-change);
 }
@@ -83,7 +83,7 @@
 }
 
 .card--hover:hover {
-  box-shadow: var(--sigvelo-shadow-md);
+  box-shadow: var(--sigvelo-elevation-floating);
 }
 
 .card--hover:focus-visible {

package/dist/styles/chain-of-thought.css

@@ -44,7 +44,6 @@
   background-color: var(--sigvelo-color-primary-bg-subtle);
   border-color: var(--sigvelo-color-primary-border-muted);
   color: var(--sigvelo-color-primary-text);
-  animation: sigvelo-icon-spin 1.6s linear infinite;
 }
 
 .chain-of-thought__step-body {

package/dist/styles/chatgpt-sign-in-screen.css

@@ -73,7 +73,7 @@
   font-size: var(--sigvelo-text-2xl);
   font-weight: var(--sigvelo-font-weight-bold);
   letter-spacing: 0;
-  line-height: 1.1;
+  line-height: var(--sigvelo-leading-tight);
 }
 
 .chatgpt-sign-in__brand p {
@@ -93,8 +93,8 @@
 }
 
 .chatgpt-sign-in__brand-mark :where(img, svg) {
-  inline-size: 1.35rem;
-  block-size: 1.35rem;
+  inline-size: var(--sigvelo-control-icon-size-xl);
+  block-size: var(--sigvelo-control-icon-size-xl);
   filter: drop-shadow(
     0 0.25rem 0.5rem color-mix(in oklab, var(--sigvelo-color-primary-bg), transparent 72%)
   );
@@ -109,7 +109,8 @@
   overflow: hidden;
   min-inline-size: min(100%, 16.75rem);
   box-shadow:
-    inset 0 0 0 1px color-mix(in oklab, var(--sigvelo-color-primary-text-on-bg), transparent 84%),
+    inset 0 0 0 var(--sigvelo-border-width)
+      color-mix(in oklab, var(--sigvelo-color-primary-text-on-bg), transparent 84%),
     0 0.75rem 1.5rem color-mix(in oklab, var(--sigvelo-color-primary-bg), transparent 78%);
   translate: 0;
   scale: 1;
@@ -153,7 +154,8 @@
 
 .chatgpt-sign-in__button:hover:not([data-disabled]) {
   box-shadow:
-    inset 0 0 0 1px color-mix(in oklab, var(--sigvelo-color-primary-text-on-bg), transparent 76%),
+    inset 0 0 0 var(--sigvelo-border-width)
+      color-mix(in oklab, var(--sigvelo-color-primary-text-on-bg), transparent 76%),
     0 0.9rem 1.9rem color-mix(in oklab, var(--sigvelo-color-primary-bg), transparent 72%);
   translate: 0 -0.0625rem;
 }

package/dist/styles/checkbox-group.css

@@ -15,7 +15,7 @@
   display: flex;
   align-items: center;
   gap: var(--sigvelo-spacing-2);
-  min-block-size: 2.75rem;
+  min-block-size: var(--sigvelo-spacing-11);
   padding-inline: var(--sigvelo-spacing-3);
   border-radius: var(--sigvelo-radius-md);
   color: var(--sigvelo-color-text);
@@ -40,8 +40,8 @@
 }
 
 .checkbox-group__icon svg {
-  inline-size: 1rem;
-  block-size: 1rem;
+  inline-size: var(--sigvelo-control-icon-size-md);
+  block-size: var(--sigvelo-control-icon-size-md);
 }
 
 .checkbox-group__content {

package/dist/styles/code-block.css

@@ -56,10 +56,10 @@
 .code-block__content {
   margin: 0;
   padding-block: var(--sigvelo-spacing-3);
-  padding-inline: 0.875rem;
+  padding-inline: var(--sigvelo-spacing-3-5);
   font-family: var(--sigvelo-font-mono);
   font-size: var(--sigvelo-text-compact);
-  line-height: 1.55;
+  line-height: var(--sigvelo-leading-normal);
   color: var(--sigvelo-color-text);
   overflow: visible;
 }
@@ -71,11 +71,11 @@
 .code-block__content--highlighted pre.shiki {
   margin: 0;
   padding-block: var(--sigvelo-spacing-3);
-  padding-inline: 0.875rem;
+  padding-inline: var(--sigvelo-spacing-3-5);
   background-color: transparent !important;
   font-family: var(--sigvelo-font-mono);
   font-size: var(--sigvelo-text-compact);
-  line-height: 1.55;
+  line-height: var(--sigvelo-leading-normal);
   overflow: visible;
 }
 

package/dist/styles/context-menu.css

@@ -30,7 +30,7 @@
 .context-menu__radio-item:focus-visible,
 .context-menu__submenu-trigger:focus-visible {
   outline: none;
-  box-shadow: inset 0 0 0 var(--sigvelo-focus-width) var(--sigvelo-color-focus);
+  box-shadow: var(--sigvelo-recipe-focus-shadow-inset);
 }
 
 .context-menu__label {

package/dist/styles/conversation.css

@@ -32,51 +32,16 @@
   min-block-size: 0;
 }
 
-.conversation__empty {
-  display: flex;
-  flex: 1;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: var(--sigvelo-spacing-2);
-  padding-block: var(--sigvelo-spacing-12);
-  padding-inline: var(--sigvelo-spacing-6);
-  text-align: center;
-  color: var(--sigvelo-color-text-muted);
-}
-
-.conversation__empty-icon {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  inline-size: var(--sigvelo-spacing-12);
-  block-size: var(--sigvelo-spacing-12);
-  border-radius: var(--sigvelo-radius-full);
-  background-color: var(--sigvelo-color-neutral-bg-subtle);
-  color: var(--sigvelo-color-text-muted);
-  margin-block-end: var(--sigvelo-spacing-1);
-}
-
-.conversation__empty-title {
-  font-size: var(--sigvelo-text-base);
-  font-weight: var(--sigvelo-font-weight-semibold);
-  color: var(--sigvelo-color-text);
-}
-
-.conversation__empty-description {
-  max-inline-size: 32ch;
-  font-size: var(--sigvelo-text-sm);
-  line-height: var(--sigvelo-leading-normal);
-  color: var(--sigvelo-color-text-muted);
-}
-
 .conversation__scroll-button {
   position: absolute;
   inset-inline-end: var(--sigvelo-spacing-3);
   inset-block-end: var(--sigvelo-spacing-3);
   z-index: 1;
-  box-shadow: var(--sigvelo-shadow-sm);
-  background-color: var(--sigvelo-color-surface);
+  /* Hovers over the transcript rather than sitting in it, so it takes the
+     floating stack: the wide ambient layer is what separates it from whatever
+     message happens to scroll underneath. */
+  box-shadow: var(--sigvelo-elevation-floating);
+  background-color: var(--sigvelo-color-surface-raised);
 }
 
 .conversation__download-button {
@@ -84,8 +49,8 @@
   inset-inline-end: var(--sigvelo-spacing-3);
   inset-block-start: var(--sigvelo-spacing-3);
   z-index: 1;
-  box-shadow: var(--sigvelo-shadow-xs);
-  background-color: var(--sigvelo-color-surface);
+  box-shadow: var(--sigvelo-elevation-floating);
+  background-color: var(--sigvelo-color-surface-raised);
 }
 
 @media (forced-colors: active) {

package/dist/styles/description-list.css

@@ -44,7 +44,7 @@
 }
 
 .description-list[data-variant="divided"] .description-list__term svg {
-  inline-size: 1rem;
-  block-size: 1rem;
+  inline-size: var(--sigvelo-control-icon-size-md);
+  block-size: var(--sigvelo-control-icon-size-md);
   flex: 0 0 auto;
 }

package/dist/styles/dialog.css

@@ -1,6 +1,21 @@
+/* Blurring the page behind the scrim reads as depth rather than as a dark
+   sheet, and keeps the dismissed content recognizable underneath. Browsers
+   without backdrop-filter still get the scrim on its own.
+
+   The blur does run on every frame of the open fade — the scrim covers the
+   viewport, so each frame re-filters all of it. What makes that affordable is
+   the filter itself: one 8px radius, no second pass. An earlier
+   blur(24px) saturate(180%) cost about a third of the Storybook suite in
+   timing failures, in stories that had nothing to do with dialogs.
+
+   Gating this behind :not([data-starting-style]) looks like it skips the fade
+   and does not. Base UI drops that attribute on the frame after mount, so the
+   blur is live from frame 1 while the opacity climbs for ~13 more. It bought
+   one frame and read as though it bought fourteen. */
 .dialog__backdrop {
   background-color: var(--sigvelo-color-backdrop);
-  z-index: 50;
+  backdrop-filter: var(--sigvelo-glass-filter);
+  z-index: var(--sigvelo-z-overlay);
 }
 
 .dialog__popup {
@@ -10,7 +25,7 @@
   inset-block-start: 50%;
   inset-inline-start: 50%;
   translate: -50% -50%;
-  z-index: 50;
+  z-index: var(--sigvelo-z-overlay);
   inline-size: calc(100% - var(--sigvelo-control-height-sm));
   max-inline-size: 32rem;
   max-block-size: calc(100dvb - var(--sigvelo-spacing-8));

package/dist/styles/empty-state.css

@@ -0,0 +1,48 @@
+/*
+ * One anatomy for every "there is nothing here yet". Codex splits these into
+ * an inline variant and a page variant, but the difference between them is how
+ * much the container gives the block, not what the block is — so the size
+ * lives in one variable and the centring lives in the parent.
+ */
+.empty-state {
+  --sigvelo-recipe-empty-state-padding-block: var(--sigvelo-spacing-4);
+
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--sigvelo-spacing-2);
+  padding-block: var(--sigvelo-recipe-empty-state-padding-block);
+  padding-inline: var(--sigvelo-spacing-3);
+  color: var(--sigvelo-color-text-muted);
+  font-size: var(--sigvelo-text-compact);
+  line-height: var(--sigvelo-text-compact-leading);
+  text-align: center;
+}
+
+.empty-state__icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  inline-size: var(--sigvelo-spacing-12);
+  block-size: var(--sigvelo-spacing-12);
+  margin-block-end: var(--sigvelo-spacing-1);
+  border-radius: var(--sigvelo-radius-full);
+  background-color: var(--sigvelo-color-neutral-bg-subtle);
+  color: var(--sigvelo-color-text-muted);
+}
+
+.empty-state__title {
+  color: var(--sigvelo-color-text);
+  font-size: var(--sigvelo-text-base);
+  font-weight: var(--sigvelo-font-weight-semibold);
+  line-height: var(--sigvelo-text-base-leading);
+}
+
+/* Prose, so it takes a measure. Without one a wide panel sets a single
+   sentence across its whole width and the reader loses the line. */
+.empty-state__description {
+  max-inline-size: 32ch;
+  font-size: var(--sigvelo-text-sm);
+  line-height: var(--sigvelo-text-sm-leading);
+}

package/dist/styles/environment-variables.css

@@ -4,7 +4,7 @@
   justify-content: space-between;
   gap: var(--sigvelo-spacing-3);
   padding-block: var(--sigvelo-spacing-2-5);
-  padding-inline: 0.875rem;
+  padding-inline: var(--sigvelo-spacing-3-5);
   border-block-end: var(--sigvelo-border-style) var(--sigvelo-border-width)
     var(--sigvelo-color-neutral-border-subtle);
 }
@@ -42,7 +42,7 @@
 
 .environment-variables__group-label {
   padding-block: var(--sigvelo-spacing-1-5);
-  padding-inline: 0.875rem;
+  padding-inline: var(--sigvelo-spacing-3-5);
   font-size: var(--sigvelo-text-2xs);
   font-weight: var(--sigvelo-font-weight-bold);
   text-transform: uppercase;
@@ -58,7 +58,7 @@
   align-items: center;
   gap: var(--sigvelo-spacing-2-5);
   padding-block: var(--sigvelo-spacing-2);
-  padding-inline: 0.875rem;
+  padding-inline: var(--sigvelo-spacing-3-5);
   border-block-end: var(--sigvelo-border-style) var(--sigvelo-border-width)
     var(--sigvelo-color-neutral-border-subtle);
 }
@@ -79,7 +79,7 @@
 .environment-variables__value {
   flex: 1;
   min-width: 0;
-  padding-block: 0.3125rem;
+  padding-block: var(--sigvelo-spacing-1-5);
   padding-inline: var(--sigvelo-spacing-2);
   font-family: var(--sigvelo-font-mono);
   font-size: var(--sigvelo-text-xs);