@mcp-b/react-components 0.20.5 → 0.22.0

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 1px 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));
@@ -35,16 +50,16 @@
 }
 
 .dialog__title {
-  font-size: var(--sigvelo-text-base);
-  font-weight: var(--sigvelo-font-weight-semibold);
-  line-height: var(--sigvelo-leading-compact);
+  font-size: var(--sigvelo-text-lg);
+  font-weight: var(--sigvelo-font-weight-normal);
+  line-height: var(--sigvelo-text-lg-leading);
   color: var(--sigvelo-color-text);
   margin-block-end: var(--sigvelo-spacing-1);
 }
 
 .dialog__description {
-  font-size: var(--sigvelo-text-compact);
-  line-height: var(--sigvelo-leading-normal);
+  font-size: var(--sigvelo-text-sm);
+  line-height: var(--sigvelo-text-sm-leading);
   color: var(--sigvelo-color-text-muted);
   margin-block-end: var(--sigvelo-spacing-3);
 }

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);

package/dist/styles/field.css

@@ -94,7 +94,7 @@
 .field__description {
   font-family: inherit;
   font-size: var(--sigvelo-text-xs);
-  line-height: 1.4;
+  line-height: var(--sigvelo-leading-snug);
   color: var(--sigvelo-color-text-muted);
   margin: 0;
 }
@@ -102,7 +102,7 @@
 .field__error {
   font-family: inherit;
   font-size: var(--sigvelo-text-xs);
-  line-height: 1.4;
+  line-height: var(--sigvelo-leading-snug);
   color: var(--sigvelo-color-danger-bg);
   margin: 0;
   opacity: 1;

package/dist/styles/index.css

@@ -25,8 +25,10 @@
 @import "./attachment-preview.css" layer(components);
 @import "./autocomplete.css" layer(components);
 @import "./avatar.css" layer(components);
+@import "./app-icon.css" layer(components);
 @import "./badge.css" layer(components);
 @import "./button.css" layer(components);
+@import "./action-guide.css" layer(components);
 @import "./card.css" layer(components);
 @import "./checkbox.css" layer(components);
 @import "./checkbox-group.css" layer(components);
@@ -34,11 +36,13 @@
 @import "./combobox.css" layer(components);
 @import "./context-menu.css" layer(components);
 @import "./dialog.css" layer(components);
+@import "./empty-state.css" layer(components);
 @import "./field.css" layer(components);
 @import "./fieldset.css" layer(components);
 @import "./form.css" layer(components);
 @import "./github-motion-mark.css" layer(components);
 @import "./input.css" layer(components);
+@import "./kbd.css" layer(components);
 @import "./label.css" layer(components);
 @import "./marker.css" layer(components);
 @import "./media-preview-card.css" layer(components);
@@ -50,6 +54,7 @@
 @import "./nanite-scene.css" layer(components);
 @import "./number-field.css" layer(components);
 @import "./popover.css" layer(components);
+@import "./mcp-plugin-catalog.css" layer(components);
 @import "./mcp-server-picker.css" layer(components);
 @import "./mcp-connection-request.css" layer(components);
 @import "./preview-card.css" layer(components);
@@ -61,6 +66,7 @@
 @import "./select.css" layer(components);
 @import "./separator.css" layer(components);
 @import "./slider.css" layer(components);
+@import "./status-pill.css" layer(components);
 @import "./stepper.css" layer(components);
 @import "./switch.css" layer(components);
 @import "./tabs.css" layer(components);

package/dist/styles/inline-citation.css

@@ -81,7 +81,7 @@
   overflow-wrap: anywhere;
   color: var(--sigvelo-color-text-muted);
   font-size: var(--sigvelo-text-xs);
-  line-height: 1.4;
+  line-height: var(--sigvelo-leading-snug);
 }
 
 .inline-citation__metadata {

package/dist/styles/kbd.css

@@ -0,0 +1,40 @@
+/*
+ * Everything here resolves from currentColor, which is what lets one chip work
+ * on a page surface and on the inverted surface of a tooltip. A fixed
+ * neutral background is legible on exactly one of those.
+ *
+ * Codex renders its keys at tertiary text and strips the shadow its base sheet
+ * applies, so the resting state here is quiet by default rather than quieted
+ * at each call site.
+ */
+.kbd {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-inline-size: var(--sigvelo-spacing-5);
+  padding-block: var(--sigvelo-spacing-0-5);
+  padding-inline: var(--sigvelo-spacing-1);
+  font-family: var(--sigvelo-font-mono);
+  /* em, not a type step: a key sits inside a label and should track whatever
+     size that label is set at. */
+  font-size: 0.75em;
+  line-height: var(--sigvelo-text-xs-leading);
+  /* currentcolor in the color property is the *inherited* color, so this dims
+     whatever the surface already set. In every declaration below it, though,
+     currentcolor is this new value — which is why nothing here names a
+     specific text token. Naming one would pin the chip to a light surface and
+     lose the tooltip. */
+  color: color-mix(in oklab, currentcolor, transparent 25%);
+  background-color: color-mix(in oklab, currentcolor, transparent 90%);
+  border: var(--sigvelo-border-style) var(--sigvelo-border-width)
+    color-mix(in oklab, currentcolor, transparent 82%);
+  border-radius: var(--sigvelo-radius-sm);
+  white-space: nowrap;
+}
+
+@media (forced-colors: active) {
+  .kbd {
+    color: ButtonText;
+    border-color: ButtonText;
+  }
+}

package/dist/styles/mcp-plugin-catalog.css

@@ -0,0 +1,296 @@
+.mcp-plugin-catalog {
+  container: mcp-plugin-catalog / inline-size;
+  box-sizing: border-box;
+  inline-size: 100%;
+  max-inline-size: var(--sigvelo-measure-wide-block);
+  padding-inline: var(--sigvelo-spacing-4);
+  margin-inline: auto;
+  color: var(--sigvelo-color-text);
+}
+
+.mcp-plugin-catalog__header,
+.mcp-plugin-catalog__heading-copy,
+.mcp-plugin-catalog__installed,
+.mcp-plugin-catalog__sections,
+.mcp-plugin-catalog__section {
+  display: grid;
+}
+
+.mcp-plugin-catalog__header {
+  gap: var(--sigvelo-spacing-4);
+  margin-block-end: var(--sigvelo-spacing-6);
+}
+
+.mcp-plugin-catalog__heading-copy {
+  gap: var(--sigvelo-spacing-1);
+}
+
+.mcp-plugin-catalog__heading,
+.mcp-plugin-catalog__description,
+.mcp-plugin-catalog__section-heading,
+.mcp-plugin-catalog__empty,
+.mcp-plugin-details p {
+  margin: 0;
+}
+
+.mcp-plugin-catalog__heading {
+  font-size: var(--sigvelo-text-3xl);
+  font-weight: var(--sigvelo-font-weight-normal);
+  line-height: var(--sigvelo-text-3xl-leading);
+  letter-spacing: var(--sigvelo-tracking-normal);
+}
+
+.mcp-plugin-catalog__description {
+  max-inline-size: var(--sigvelo-measure-prose);
+  color: var(--sigvelo-color-text-muted);
+  font-size: var(--sigvelo-text-base);
+  line-height: var(--sigvelo-text-base-leading);
+}
+
+.mcp-plugin-catalog__search {
+  inline-size: 100%;
+}
+
+.mcp-plugin-catalog__installed {
+  gap: var(--sigvelo-spacing-2);
+  margin-block-end: var(--sigvelo-spacing-6);
+}
+
+.mcp-plugin-catalog__installed-list,
+.mcp-plugin-catalog__list {
+  padding: 0;
+  margin: 0;
+  list-style: none;
+}
+
+.mcp-plugin-catalog__installed-list {
+  display: flex;
+  gap: var(--sigvelo-spacing-2);
+  overflow-x: auto;
+}
+
+.mcp-plugin-catalog__sections {
+  gap: var(--sigvelo-spacing-6);
+}
+
+.mcp-plugin-catalog__section {
+  gap: var(--sigvelo-spacing-2);
+}
+
+.mcp-plugin-catalog__section-heading {
+  color: var(--sigvelo-color-text);
+  font-size: var(--sigvelo-text-sm);
+  font-weight: var(--sigvelo-font-weight-semibold);
+  line-height: var(--sigvelo-text-sm-leading);
+}
+
+.mcp-plugin-catalog__list {
+  display: grid;
+  gap: var(--sigvelo-spacing-4) var(--sigvelo-spacing-2);
+  margin-inline: calc(-1 * var(--sigvelo-spacing-2));
+}
+
+.mcp-plugin-catalog__card {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: center;
+  gap: var(--sigvelo-spacing-2);
+  min-block-size: var(--sigvelo-spacing-14);
+  padding-inline-end: var(--sigvelo-spacing-2);
+  border-radius: var(--sigvelo-radius-lg);
+  transition: background-color var(--sigvelo-motion-duration-interaction)
+    var(--sigvelo-motion-ease-change);
+}
+
+.mcp-plugin-catalog__card:hover {
+  background-color: var(--sigvelo-color-neutral-bg-subtle);
+}
+
+.mcp-plugin-catalog__card .button:hover:not([data-disabled]) {
+  background-color: transparent;
+}
+
+.mcp-plugin-catalog__card-main {
+  display: grid;
+  grid-template-columns: var(--sigvelo-spacing-10) minmax(0, 1fr);
+  align-items: center;
+  justify-content: start;
+  gap: var(--sigvelo-spacing-3-5);
+  inline-size: 100%;
+  min-inline-size: 0;
+  padding-inline: var(--sigvelo-spacing-2);
+  text-align: start;
+  white-space: normal;
+}
+
+.mcp-plugin-catalog__card-copy {
+  display: grid;
+  min-inline-size: 0;
+}
+
+.mcp-plugin-catalog__card-name {
+  font-size: var(--sigvelo-text-sm);
+  font-weight: var(--sigvelo-font-weight-normal);
+  line-height: var(--sigvelo-text-compact-leading);
+}
+
+.mcp-plugin-catalog__card-description {
+  color: var(--sigvelo-color-text-muted);
+  font-size: var(--sigvelo-text-compact);
+  line-height: var(--sigvelo-text-compact-leading);
+}
+
+.mcp-plugin-catalog__empty {
+  padding-block: var(--sigvelo-spacing-8);
+  color: var(--sigvelo-color-text-muted);
+  font-size: var(--sigvelo-text-sm);
+  text-align: center;
+}
+
+.dialog__popup.mcp-plugin-details {
+  --sigvelo-recipe-surface-padding: 0;
+
+  display: block;
+  max-inline-size: 36.25rem;
+  overflow-block: auto;
+  overflow-inline: hidden;
+  overscroll-behavior: contain;
+}
+
+.mcp-plugin-details__hero {
+  position: relative;
+  isolation: isolate;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--sigvelo-spacing-4);
+  min-block-size: 22.75rem;
+  padding-block-start: calc(var(--sigvelo-spacing-12) + var(--sigvelo-spacing-1));
+  overflow: hidden;
+  background:
+    radial-gradient(
+      ellipse 48% 135% at 0% 38%,
+      var(--sigvelo-color-warning-400) 0%,
+      transparent 74%
+    ),
+    radial-gradient(
+      ellipse 50% 85% at 48% -8%,
+      var(--sigvelo-color-primary-300) 0%,
+      transparent 78%
+    ),
+    radial-gradient(
+      ellipse 68% 78% at 42% 112%,
+      var(--sigvelo-color-primary-700) 0%,
+      transparent 72%
+    ),
+    linear-gradient(
+      108deg,
+      var(--sigvelo-color-primary-600),
+      var(--sigvelo-color-primary-400) 70%,
+      var(--sigvelo-color-primary-500)
+    );
+  color: var(--sigvelo-color-primary-text-on-bg);
+}
+
+.mcp-plugin-details__hero > .dialog__close {
+  position: absolute;
+  inset-block-start: var(--sigvelo-spacing-2);
+  inset-inline-end: var(--sigvelo-spacing-2);
+  color: inherit;
+}
+
+.mcp-plugin-details__hero > .dialog__close:hover:not([data-disabled]) {
+  background-color: color-mix(in oklab, transparent, white 12%);
+}
+
+.mcp-plugin-details__title-copy {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+}
+
+.mcp-plugin-details__identity {
+  display: flex;
+  align-items: center;
+  gap: var(--sigvelo-spacing-3-5);
+}
+
+.mcp-plugin-details__identity > .separator {
+  block-size: var(--sigvelo-spacing-8);
+  background-color: color-mix(in oklab, currentcolor, transparent 30%);
+}
+
+.mcp-plugin-details__title-copy {
+  gap: var(--sigvelo-spacing-2);
+  inline-size: 100%;
+  padding-inline: var(--sigvelo-spacing-5);
+}
+
+.mcp-plugin-details__title {
+  margin: 0;
+  color: inherit;
+  font-size: var(--sigvelo-text-2xl);
+  font-weight: var(--sigvelo-font-weight-semibold);
+  line-height: var(--sigvelo-text-2xl-leading);
+}
+
+.mcp-plugin-details__state {
+  color: inherit;
+  font-size: var(--sigvelo-text-xs);
+  line-height: var(--sigvelo-text-xs-leading);
+  opacity: 0.8;
+}
+
+.mcp-plugin-details__description {
+  display: -webkit-box;
+  max-inline-size: 33.75rem;
+  max-block-size: calc(5 * var(--sigvelo-text-sm-leading));
+  margin: 0;
+  overflow: hidden;
+  color: inherit;
+  font-size: var(--sigvelo-text-sm);
+  line-height: var(--sigvelo-text-sm-leading);
+  text-align: center;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 5;
+}
+
+.mcp-plugin-details__footer {
+  display: flex;
+  justify-content: center;
+  margin-block-start: auto;
+  padding-block: var(--sigvelo-spacing-4) var(--sigvelo-spacing-8);
+}
+
+.mcp-plugin-details__disclosure {
+  display: grid;
+  gap: var(--sigvelo-spacing-2-5);
+  padding: var(--sigvelo-spacing-4) var(--sigvelo-spacing-5);
+  color: var(--sigvelo-color-text-subtle);
+  font-size: var(--sigvelo-text-xs);
+  line-height: var(--sigvelo-leading-snug);
+}
+
+.mcp-plugin-details__disclosure strong {
+  color: var(--sigvelo-color-text);
+  font-weight: var(--sigvelo-font-weight-semibold);
+}
+
+@media (forced-colors: active) {
+  .mcp-plugin-details__hero {
+    background: Canvas;
+    color: CanvasText;
+  }
+}
+
+@container mcp-plugin-catalog (inline-size >= 36rem) {
+  .mcp-plugin-catalog__header {
+    grid-template-columns: minmax(0, 1fr) 16rem;
+    align-items: end;
+  }
+
+  .mcp-plugin-catalog__list {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}

package/dist/styles/mcp-server-picker.css

@@ -74,28 +74,6 @@
   object-fit: contain;
 }
 
-.mcp-server-picker__avatar {
-  inline-size: var(--sigvelo-control-icon-size-lg);
-  block-size: var(--sigvelo-control-icon-size-lg);
-  background-color: transparent;
-  border-radius: var(--sigvelo-radius-sm);
-}
-
-.mcp-server-picker__avatar-image,
-.mcp-server-picker__avatar-fallback {
-  border-radius: var(--sigvelo-radius-sm);
-}
-
-.mcp-server-picker__avatar-image {
-  object-fit: contain;
-}
-
-.mcp-server-picker__avatar-fallback {
-  font-size: var(--sigvelo-text-xs);
-  font-weight: var(--sigvelo-font-weight-bold);
-  line-height: var(--sigvelo-leading-none);
-}
-
 .mcp-server-picker__copy {
   display: flex;
   align-items: baseline;
@@ -195,10 +173,6 @@
 }
 
 @media (forced-colors: active) {
-  .mcp-server-picker__avatar-fallback {
-    border: var(--sigvelo-border-style) var(--sigvelo-border-width) ButtonText;
-  }
-
   .mcp-server-picker__row-shell:has(.mcp-server-picker__row[data-highlighted]) {
     outline: 1px solid Highlight;
   }

package/dist/styles/media-preview-card.css

@@ -15,7 +15,7 @@
 }
 
 .media-preview-card:is(:hover, :focus-within) {
-  box-shadow: var(--sigvelo-shadow-md);
+  box-shadow: var(--sigvelo-elevation-floating);
 }
 
 .media-preview-card:has(> :is(a, button):focus-visible) {
@@ -73,8 +73,10 @@
     var(--sigvelo-color-neutral-border);
   border-radius: var(--sigvelo-radius-full);
   color: var(--sigvelo-color-text);
-  background: color-mix(in oklab, var(--sigvelo-color-surface), transparent 12%);
-  box-shadow: var(--sigvelo-shadow-sm);
+  /* Sits over arbitrary artwork, so it keeps the hard border and takes the
+     translucent surface the glass token already defines. */
+  background: var(--sigvelo-color-surface-glass);
+  box-shadow: var(--sigvelo-elevation-floating);
   translate: -50% -50%;
   scale: 1;
   transition:

package/dist/styles/message-scroller.css

@@ -42,11 +42,11 @@
 .message-scroller__button {
   position: absolute;
   inset-inline-start: 50%;
-  inset-block-end: var(--message-scroller-button-inset-block-end, 1rem);
+  inset-block-end: var(--message-scroller-button-inset-block-end, var(--sigvelo-spacing-4));
   z-index: 1;
   translate: -50% 0;
-  border-radius: 999rem;
-  box-shadow: var(--sigvelo-shadow-sm);
+  border-radius: var(--sigvelo-radius-full);
+  box-shadow: var(--sigvelo-elevation-floating);
   transition:
     opacity var(--sigvelo-duration-fast) var(--sigvelo-ease-standard),
     scale var(--sigvelo-duration-fast) var(--sigvelo-ease-standard),
@@ -54,7 +54,7 @@
 }
 
 .message-scroller__button[data-direction="start"] {
-  inset-block-start: 1rem;
+  inset-block-start: var(--sigvelo-spacing-4);
   inset-block-end: auto;
 }
 

package/dist/styles/message.css

@@ -26,7 +26,7 @@
   padding-inline: var(--sigvelo-spacing-3);
   border-radius: var(--sigvelo-radius-lg);
   font-size: var(--sigvelo-text-sm);
-  line-height: 1.55;
+  line-height: var(--sigvelo-leading-normal);
   background-color: var(--sigvelo-color-neutral-bg-subtle);
   color: var(--sigvelo-color-text);
   overflow-wrap: anywhere;
@@ -45,6 +45,13 @@
   padding-inline: 0;
 }
 
+/* Structured parts can opt into the transcript rail without teaching Message
+   which product feature they represent. The child still owns its own measure
+   and responsive layout. */
+.message[data-from="assistant"] .message__content:has(> [data-message-layout="wide"]) {
+  inline-size: 100%;
+}
+
 .message[data-from="system"] .message__content {
   background-color: transparent;
   color: var(--sigvelo-color-text-muted);
@@ -139,15 +146,13 @@
   inline-size: min(42rem, 85%);
   padding: var(--sigvelo-spacing-3);
   color: var(--sigvelo-color-text);
-  background-color: var(--sigvelo-color-surface);
-  border: var(--sigvelo-border-style) var(--sigvelo-border-width)
-    var(--sigvelo-color-neutral-border-muted);
+  background-color: var(--sigvelo-color-surface-raised);
   border-radius: var(--sigvelo-radius-lg);
-  box-shadow: var(--sigvelo-shadow-sm);
+  box-shadow: var(--sigvelo-elevation-raised);
 }
 
 .message__edit-textarea {
-  min-block-size: 6rem;
+  min-block-size: var(--sigvelo-spacing-24);
   max-block-size: 18rem;
 }