@mcp-b/react-components 0.12.0 → 0.14.0

package/dist/styles/test-results.css

@@ -2,7 +2,7 @@
   display: flex;
   flex-direction: column;
   width: 100%;
-  font-family: var(--sigvelo-font-sans);
+  font-family: inherit;
   color: var(--sigvelo-color-text);
   background-color: var(--sigvelo-color-surface);
   border: var(--sigvelo-border-style) var(--sigvelo-border-width)
@@ -14,8 +14,8 @@
 .test-results__header {
   display: flex;
   flex-direction: column;
-  gap: 0.625rem;
-  padding-block: 0.75rem;
+  gap: var(--sigvelo-spacing-2-5);
+  padding-block: var(--sigvelo-spacing-3);
   padding-inline: 0.875rem;
   border-block-end: var(--sigvelo-border-style) var(--sigvelo-border-width)
     var(--sigvelo-color-neutral-border-subtle);
@@ -24,7 +24,7 @@
 .test-results__summary {
   display: flex;
   align-items: center;
-  gap: 0.75rem;
+  gap: var(--sigvelo-spacing-3);
   flex-wrap: wrap;
 }
 
@@ -35,8 +35,8 @@
 .test-results__stats {
   display: inline-flex;
   align-items: center;
-  gap: 0.75rem;
-  font-size: 0.75rem;
+  gap: var(--sigvelo-spacing-3);
+  font-size: var(--sigvelo-text-xs);
   color: var(--sigvelo-color-text-muted);
   font-variant-numeric: tabular-nums;
 }
@@ -68,7 +68,7 @@
 
 .test-results__progress-segment {
   height: 100%;
-  transition: width 300ms ease;
+  transition: width var(--sigvelo-duration-slow) var(--sigvelo-ease-standard);
 }
 
 .test-results__progress-segment--passed {
@@ -83,7 +83,7 @@
   display: block;
   margin-block-start: 0.25rem;
   color: var(--sigvelo-color-text-muted);
-  font-size: 0.6875rem;
+  font-size: var(--sigvelo-text-2xs);
   font-variant-numeric: tabular-nums;
 }
 
@@ -114,7 +114,7 @@
   border: none;
   color: var(--sigvelo-color-text);
   font-family: inherit;
-  font-size: 0.8125rem;
+  font-size: var(--sigvelo-text-compact);
   font-weight: var(--sigvelo-font-weight-semibold);
   text-align: start;
   cursor: pointer;
@@ -127,15 +127,13 @@
 
 .test-results__suite-trigger:focus-visible {
   outline: none;
-  box-shadow:
-    0 0 0 2px var(--sigvelo-color-canvas),
-    0 0 0 4px var(--sigvelo-color-focus);
+  box-shadow: var(--sigvelo-recipe-focus-shadow);
 }
 
 .test-results__suite-icon {
   display: inline-flex;
   color: var(--sigvelo-color-text-muted);
-  transition: transform 200ms ease;
+  transition: transform var(--sigvelo-duration-medium) var(--sigvelo-ease-standard);
 }
 
 .test-results__suite-trigger[data-panel-open] .test-results__suite-icon {
@@ -146,7 +144,7 @@
   flex: 1;
   min-width: 0;
   font-family: var(--sigvelo-font-mono);
-  font-size: 0.8125rem;
+  font-size: var(--sigvelo-text-compact);
   font-weight: var(--sigvelo-font-weight-normal);
   overflow: hidden;
   text-overflow: ellipsis;
@@ -159,24 +157,10 @@
   align-items: center;
   gap: 0.5rem;
   color: var(--sigvelo-color-text-muted);
-  font-size: 0.75rem;
+  font-size: var(--sigvelo-text-xs);
   font-variant-numeric: tabular-nums;
 }
 
-.test-results__suite-content {
-  height: var(--collapsible-panel-height);
-  overflow: hidden;
-  transition:
-    height 200ms ease,
-    opacity 200ms ease;
-}
-
-.test-results__suite-content[data-starting-style],
-.test-results__suite-content[data-ending-style] {
-  height: 0;
-  opacity: 0;
-}
-
 .test-results__suite-tests {
   display: flex;
   flex-direction: column;
@@ -193,7 +177,7 @@
   gap: 0.5rem;
   padding-block: 0.4375rem;
   padding-inline: 1.5rem;
-  font-size: 0.8125rem;
+  font-size: var(--sigvelo-text-compact);
   border-block-end: var(--sigvelo-border-style) var(--sigvelo-border-width)
     var(--sigvelo-color-neutral-border-subtle);
 }
@@ -233,7 +217,7 @@
   flex: 1;
   min-width: 0;
   font-family: var(--sigvelo-font-mono);
-  font-size: 0.8125rem;
+  font-size: var(--sigvelo-text-compact);
   color: var(--sigvelo-color-text);
   overflow: hidden;
   text-overflow: ellipsis;
@@ -241,7 +225,7 @@
 }
 
 .test-results__test-duration {
-  font-size: 0.6875rem;
+  font-size: var(--sigvelo-text-2xs);
   color: var(--sigvelo-color-text-muted);
   font-variant-numeric: tabular-nums;
 }
@@ -251,15 +235,15 @@
 }
 
 .test-results__error {
-  margin-block-start: 0.375rem;
+  margin-block-start: var(--sigvelo-spacing-1-5);
   margin-inline-start: 1.5rem;
 }
 
 .test-results__error-text {
   margin: 0;
-  padding: 0.5rem 0.75rem;
+  padding: 0.5rem var(--sigvelo-spacing-3);
   font-family: var(--sigvelo-font-mono);
-  font-size: 0.6875rem;
+  font-size: var(--sigvelo-text-2xs);
   line-height: 1.55;
   color: var(--sigvelo-color-danger-text);
   background-color: var(--sigvelo-color-danger-bg-subtle);
@@ -272,9 +256,9 @@
 }
 
 .test-results__error-message {
-  margin: 0 0 0.375rem;
+  margin: 0 0 var(--sigvelo-spacing-1-5);
   color: var(--sigvelo-color-danger-text);
-  font-size: 0.75rem;
+  font-size: var(--sigvelo-text-xs);
   font-weight: var(--sigvelo-font-weight-semibold);
 }
 

package/dist/styles/think-execution-workbench.css

@@ -18,11 +18,11 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: 0.75rem;
+  gap: var(--sigvelo-spacing-3);
   flex: 0 0 auto;
   min-block-size: 2.75rem;
-  padding-block: 0.375rem;
-  padding-inline: 0.75rem 0.625rem;
+  padding-block: var(--sigvelo-spacing-1-5);
+  padding-inline: var(--sigvelo-spacing-3) var(--sigvelo-spacing-2-5);
   border-block-end: var(--sigvelo-border-style) var(--sigvelo-border-width)
     var(--sigvelo-color-neutral-border-subtle);
 }
@@ -31,13 +31,13 @@
   display: inline-flex;
   align-items: center;
   min-inline-size: 0;
-  gap: 0.375rem;
+  gap: var(--sigvelo-spacing-1-5);
 }
 
 .think-execution-workbench__title {
   min-inline-size: 0;
   margin: 0;
-  font-size: 0.875rem;
+  font-size: var(--sigvelo-text-sm);
   font-weight: 650;
   line-height: 1;
 }
@@ -47,14 +47,14 @@
 }
 
 .think-execution-workbench__error {
-  margin: 0.75rem 0.75rem 0;
-  padding: 0.4375rem 0.625rem;
+  margin: var(--sigvelo-spacing-3) var(--sigvelo-spacing-3) 0;
+  padding: 0.4375rem var(--sigvelo-spacing-2-5);
   border: var(--sigvelo-border-style) var(--sigvelo-border-width)
     var(--sigvelo-color-danger-border-subtle);
   border-radius: var(--sigvelo-radius-sm);
   background: var(--sigvelo-color-danger-bg-subtle);
   color: var(--sigvelo-color-danger-text);
-  font-size: 0.75rem;
+  font-size: var(--sigvelo-text-xs);
 }
 
 .think-execution-workbench__content {
@@ -88,21 +88,21 @@
 
 .think-execution-workbench__list-header h3 {
   margin: 0;
-  font-size: 0.8125rem;
+  font-size: var(--sigvelo-text-compact);
   font-weight: var(--sigvelo-font-weight-semibold);
   line-height: var(--sigvelo-leading-tight);
 }
 
 .think-execution-workbench__empty {
-  margin: 0.75rem;
-  padding: 0.625rem 0;
+  margin: var(--sigvelo-spacing-3);
+  padding: var(--sigvelo-spacing-2-5) 0;
   color: var(--sigvelo-color-text-muted);
-  font-size: 0.8125rem;
+  font-size: var(--sigvelo-text-compact);
 }
 
 .think-execution-workbench__list {
   margin: 0;
-  padding: 0.25rem 0.75rem 0.75rem;
+  padding: 0.25rem var(--sigvelo-spacing-3) var(--sigvelo-spacing-3);
   list-style: none;
   display: grid;
 }
@@ -135,8 +135,8 @@
   display: grid;
   grid-template-columns: auto minmax(0, 1fr);
   align-items: center;
-  gap: 0.625rem;
-  padding-block: 0.625rem;
+  gap: var(--sigvelo-spacing-2-5);
+  padding-block: var(--sigvelo-spacing-2-5);
   padding-inline: 0.25rem;
   border-radius: inherit;
   border: 0;
@@ -174,7 +174,7 @@
 .think-execution-workbench__run-title {
   min-inline-size: 0;
   overflow: hidden;
-  font-size: 0.8125rem;
+  font-size: var(--sigvelo-text-compact);
   font-weight: var(--sigvelo-font-weight-semibold);
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -187,7 +187,7 @@
   color: var(--sigvelo-color-text-muted);
   overflow-wrap: anywhere;
   font-family: var(--sigvelo-font-mono);
-  font-size: 0.75rem;
+  font-size: var(--sigvelo-text-xs);
 }
 
 .think-execution-workbench__run-copy code {
@@ -197,7 +197,7 @@
 
 .think-execution-workbench__run-summary {
   color: var(--sigvelo-color-text-muted);
-  font-size: 0.75rem;
+  font-size: var(--sigvelo-text-xs);
   line-height: var(--sigvelo-leading-tight);
 }
 
@@ -254,7 +254,7 @@
   display: flex;
   align-items: flex-start;
   justify-content: space-between;
-  gap: 0.75rem;
+  gap: var(--sigvelo-spacing-3);
   min-inline-size: 0;
 }
 
@@ -268,13 +268,13 @@
   align-items: center;
   gap: 0.5rem;
   color: var(--sigvelo-color-text-muted);
-  font-size: 0.75rem;
+  font-size: var(--sigvelo-text-xs);
   text-align: end;
 }
 
 .think-execution-workbench__detail-status > div {
   display: grid;
-  gap: 0.125rem;
+  gap: var(--sigvelo-spacing-0-5);
 }
 
 .think-execution-workbench__detail-status strong {
@@ -284,7 +284,7 @@
 
 .think-execution-workbench__detail h3 {
   margin: 0;
-  font-size: 0.875rem;
+  font-size: var(--sigvelo-text-sm);
   font-weight: var(--sigvelo-font-weight-semibold);
   line-height: var(--sigvelo-leading-tight);
 }
@@ -294,7 +294,7 @@
   display: grid;
   place-items: center;
   color: var(--sigvelo-color-text-muted);
-  font-size: 0.8125rem;
+  font-size: var(--sigvelo-text-compact);
   text-align: center;
 }
 

package/dist/styles/think-full-app.css

@@ -8,8 +8,8 @@
   grid-template-columns: minmax(0, 1fr) var(--think-full-app-workbench-w, 21.25rem);
   background: var(--sigvelo-color-canvas);
   color: var(--sigvelo-color-text);
-  font-family: var(--sigvelo-font-sans);
-  transition: grid-template-columns 160ms ease;
+  font-family: inherit;
+  transition: grid-template-columns var(--sigvelo-duration-fast) var(--sigvelo-ease-standard);
 }
 
 .think-full-app[data-has-workbench-topbar="true"] {
@@ -67,14 +67,14 @@
 
 .think-full-app__error {
   inline-size: min(100%, var(--agent-chat-content-max-inline-size));
-  margin: 0 auto 0.375rem;
-  padding: 0.4375rem 0.625rem;
+  margin: 0 auto var(--sigvelo-spacing-1-5);
+  padding: 0.4375rem var(--sigvelo-spacing-2-5);
   border: var(--sigvelo-border-style) var(--sigvelo-border-width)
     var(--sigvelo-color-danger-border-subtle);
   border-radius: var(--sigvelo-radius-sm);
   background: var(--sigvelo-color-danger-bg-subtle);
   color: var(--sigvelo-color-danger-text);
-  font-size: 0.75rem;
+  font-size: var(--sigvelo-text-xs);
 }
 
 .think-full-app__error-dismiss {
@@ -155,7 +155,7 @@ body.is-resizing-think-full-app .think-full-app {
   margin-inline-start: auto;
   border: var(--sigvelo-border-style) var(--sigvelo-border-width)
     color-mix(in srgb, var(--sigvelo-color-neutral-border-subtle) 58%, transparent);
-  border-radius: 0.75rem;
+  border-radius: var(--sigvelo-radius-lg);
   background: color-mix(
     in srgb,
     color-mix(in oklab, var(--sigvelo-color-canvas), var(--sigvelo-color-primary-bg-subtle) 18%) 72%,
@@ -180,30 +180,22 @@ body.is-resizing-think-full-app .think-full-app {
 
 .think-full-app__workbench .workspace-explorer__header {
   min-block-size: 2.75rem;
-  padding-block: 0.375rem;
-  padding-inline: 0.75rem 0.625rem;
+  padding-block: var(--sigvelo-spacing-1-5);
+  padding-inline: var(--sigvelo-spacing-3) var(--sigvelo-spacing-2-5);
   border-block-end-color: var(--sigvelo-color-neutral-border-subtle);
 }
 
 .think-full-app__workbench .workspace-explorer__title {
-  font-size: 0.875rem;
+  font-size: var(--sigvelo-text-sm);
   font-weight: 650;
   line-height: 1;
 }
 
 .think-full-app__workbench .workspace-explorer__count {
-  font-size: 0.8125rem;
+  font-size: var(--sigvelo-text-compact);
   line-height: 1;
 }
 
-.think-full-app__workbench .workspace-explorer__actions .button,
-.think-full-app__workbench .workspace-explorer__header > .button {
-  inline-size: 1.75rem;
-  min-block-size: 1.75rem;
-  padding: 0;
-  border-radius: 0.5rem;
-}
-
 .think-full-app__workspace-back {
   display: none;
 }
@@ -231,7 +223,7 @@ body.is-resizing-think-full-app .think-full-app {
     min-block-size: calc(2.75rem + env(safe-area-inset-top, 0px));
     display: flex;
     padding-block: calc(0.25rem + env(safe-area-inset-top, 0px)) 0.25rem;
-    padding-inline: calc(0.625rem + env(safe-area-inset-left, 0px))
+    padding-inline: calc(var(--sigvelo-spacing-2-5) + env(safe-area-inset-left, 0px))
       calc(0.625rem + env(safe-area-inset-right, 0px));
   }
 
@@ -250,7 +242,7 @@ body.is-resizing-think-full-app .think-full-app {
     justify-content: flex-end;
     min-block-size: calc(2.5rem + env(safe-area-inset-top, 0px));
     padding-block: calc(0.25rem + env(safe-area-inset-top, 0px)) 0.25rem;
-    padding-inline: calc(0.625rem + env(safe-area-inset-left, 0px))
+    padding-inline: calc(var(--sigvelo-spacing-2-5) + env(safe-area-inset-left, 0px))
       calc(0.625rem + env(safe-area-inset-right, 0px));
     pointer-events: none;
   }

package/dist/styles/think-resize-handle.css

@@ -2,7 +2,7 @@
 .think-resize-handle {
   position: absolute;
   inset-block: 0;
-  inline-size: 0.625rem;
+  inline-size: var(--sigvelo-spacing-2-5);
   padding: 0;
   border: 0;
   background: transparent;
@@ -19,7 +19,7 @@
   inline-size: 1px;
   transform: translateX(-50%);
   background: transparent;
-  transition: background 120ms ease;
+  transition: background-color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard);
 }
 
 .think-resize-handle:hover::before,

package/dist/styles/think-thread-picker.css

@@ -18,7 +18,7 @@
   align-items: center;
   gap: 0.5rem;
   padding-block: 0.5rem;
-  padding-inline: calc(0.875rem + env(safe-area-inset-left, 0px)) 0.625rem;
+  padding-inline: calc(0.875rem + env(safe-area-inset-left, 0px)) var(--sigvelo-spacing-2-5);
 }
 
 .think-thread-picker__title {
@@ -27,7 +27,7 @@
   flex: 1 1 auto;
   overflow: hidden;
   color: var(--sigvelo-color-text-muted);
-  font-size: 0.8125rem;
+  font-size: var(--sigvelo-text-compact);
   font-weight: var(--sigvelo-font-weight-semibold);
   line-height: var(--sigvelo-leading-tight);
   text-overflow: ellipsis;
@@ -51,7 +51,7 @@
 .think-thread-picker__viewport {
   --think-thread-picker-fade-size: min(12%, 2.5rem);
 
-  padding: 0.375rem 0.5rem 0.75rem;
+  padding: var(--sigvelo-spacing-1-5) 0.5rem var(--sigvelo-spacing-3);
   overscroll-behavior: contain;
   scrollbar-gutter: stable;
   -webkit-mask-image: linear-gradient(
@@ -112,7 +112,7 @@
   min-inline-size: 0;
   display: block;
   overflow: hidden;
-  font-size: 0.8125rem;
+  font-size: var(--sigvelo-text-compact);
   line-height: var(--sigvelo-leading-snug);
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -120,7 +120,7 @@
 
 .think-thread-picker__thread-time {
   color: var(--sigvelo-color-text-muted);
-  font-size: 0.75rem;
+  font-size: var(--sigvelo-text-xs);
   line-height: var(--sigvelo-leading-tight);
 }
 
@@ -134,8 +134,8 @@
 }
 
 .think-thread-picker__thread-status svg {
-  inline-size: 0.75rem;
-  block-size: 0.75rem;
+  inline-size: var(--sigvelo-spacing-3);
+  block-size: var(--sigvelo-spacing-3);
 }
 
 .think-thread-picker__thread[data-status="pending"] .think-thread-picker__thread-status,
@@ -169,15 +169,17 @@
 .think-thread-picker__empty {
   margin: 0.5rem;
   color: var(--sigvelo-color-text-muted);
-  font-size: 0.8125rem;
+  font-size: var(--sigvelo-text-compact);
   line-height: var(--sigvelo-leading-snug);
 }
 
 .think-thread-picker__footer {
   display: flex;
   justify-content: center;
-  padding-block: 0.625rem calc(0.75rem + env(safe-area-inset-bottom, 0px));
-  padding-inline: calc(0.75rem + env(safe-area-inset-left, 0px)) 0.75rem;
+  padding-block: var(--sigvelo-spacing-2-5)
+    calc(var(--sigvelo-spacing-3) + env(safe-area-inset-bottom, 0px));
+  padding-inline: calc(var(--sigvelo-spacing-3) + env(safe-area-inset-left, 0px))
+    var(--sigvelo-spacing-3);
 }
 
 .think-thread-picker__create {
@@ -197,6 +199,13 @@
   }
 }
 
+@media (prefers-reduced-motion: reduce) {
+  .think-thread-picker__thread[data-status="submitted"] .think-thread-picker__thread-status svg,
+  .think-thread-picker__thread[data-status="recovering"] .think-thread-picker__thread-status svg {
+    animation: none;
+  }
+}
+
 @media (forced-colors: active) {
   .think-thread-picker {
     border-inline-end: 1px solid canvastext;

package/dist/styles/think-thread-shell.css

@@ -19,8 +19,8 @@
   overflow: hidden;
   background: var(--sigvelo-color-canvas);
   color: var(--sigvelo-color-text);
-  font-family: var(--sigvelo-font-sans);
-  transition: grid-template-columns 180ms ease;
+  font-family: inherit;
+  transition: grid-template-columns var(--sigvelo-duration-medium) var(--sigvelo-ease-standard);
 }
 
 .think-thread-shell__sidebar,
@@ -59,8 +59,8 @@
 .think-thread-shell__panel-toggle {
   display: inline-flex;
   align-items: center;
-  gap: 0.125rem;
-  padding: 0.125rem;
+  gap: var(--sigvelo-spacing-0-5);
+  padding: var(--sigvelo-spacing-0-5);
   border: var(--sigvelo-border-style) var(--sigvelo-border-width)
     color-mix(in srgb, var(--sigvelo-color-neutral-border-subtle) 58%, transparent);
   border-radius: 0.625rem;
@@ -156,7 +156,7 @@ body.is-resizing-think-thread-shell .think-thread-shell__frame {
     z-index: 20;
     inline-size: var(--think-thread-mobile-sidebar-w);
     max-inline-size: calc(100cqi - 4rem);
-    transition: transform 180ms ease;
+    transition: transform var(--sigvelo-duration-medium) var(--sigvelo-ease-standard);
   }
 
   .think-thread-shell__resizer {
@@ -170,8 +170,8 @@ body.is-resizing-think-thread-shell .think-thread-shell__frame {
 
   .think-thread-shell__main {
     transition:
-      transform 180ms ease,
-      filter 180ms ease;
+      transform var(--sigvelo-duration-medium) var(--sigvelo-ease-standard),
+      filter var(--sigvelo-duration-medium) var(--sigvelo-ease-standard);
   }
 
   .think-thread-shell__frame[data-sidebar-open="true"] .think-thread-shell__main {

package/dist/styles/toast.css

@@ -12,22 +12,15 @@
 }
 
 .toast {
+  --sigvelo-recipe-surface-padding: var(--sigvelo-spacing-4);
+
   display: flex;
   flex-direction: column;
   width: 100%;
-  padding: 1rem;
-  font-family: var(--sigvelo-font-sans);
-  background-color: var(--sigvelo-color-canvas);
-  border: var(--sigvelo-border-style) var(--sigvelo-border-width)
-    var(--sigvelo-color-neutral-border-muted);
-  border-radius: var(--sigvelo-radius-md);
-  box-shadow:
-    0 10px 15px -3px color-mix(in oklab, var(--sigvelo-color-text), transparent 90%),
-    0 4px 6px -4px color-mix(in oklab, var(--sigvelo-color-text), transparent 90%);
   pointer-events: auto;
   transition:
-    opacity 200ms ease,
-    transform 200ms ease;
+    opacity var(--sigvelo-duration-medium) var(--sigvelo-ease-standard),
+    transform var(--sigvelo-duration-medium) var(--sigvelo-ease-standard);
 }
 
 .toast[data-starting-style],
@@ -61,7 +54,7 @@
 
 .toast__title {
   margin: 0;
-  font-size: 0.875rem;
+  font-size: var(--sigvelo-text-sm);
   font-weight: var(--sigvelo-font-weight-bold);
   line-height: 1.25;
   color: var(--sigvelo-color-text);
@@ -69,7 +62,7 @@
 
 .toast__description {
   margin: 0;
-  font-size: 0.875rem;
+  font-size: var(--sigvelo-text-sm);
   line-height: 1.5;
   color: var(--sigvelo-color-text-muted);
 }
@@ -78,11 +71,11 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  padding-block: 0.375rem;
-  padding-inline: 0.75rem;
-  margin-block-start: 0.75rem;
-  font-family: var(--sigvelo-font-sans);
-  font-size: 0.75rem;
+  padding-block: var(--sigvelo-spacing-1-5);
+  padding-inline: var(--sigvelo-spacing-3);
+  margin-block-start: var(--sigvelo-spacing-3);
+  font-family: inherit;
+  font-size: var(--sigvelo-text-xs);
   font-weight: var(--sigvelo-font-weight-semibold);
   color: var(--sigvelo-color-primary-text-on-bg);
   background-color: var(--sigvelo-color-primary-bg);
@@ -98,9 +91,7 @@
 
 .toast__action:focus-visible {
   outline: none;
-  box-shadow:
-    0 0 0 2px var(--sigvelo-color-canvas),
-    0 0 0 4px var(--sigvelo-color-focus);
+  box-shadow: var(--sigvelo-recipe-focus-shadow);
 }
 
 .toast__close {
@@ -113,7 +104,7 @@
   width: 1.5rem;
   height: 1.5rem;
   padding: 0;
-  font-size: 1rem;
+  font-size: var(--sigvelo-text-base);
   color: var(--sigvelo-color-text-muted);
   background-color: transparent;
   border: none;
@@ -137,7 +128,5 @@
 .toast__close:focus-visible {
   opacity: 1;
   outline: none;
-  box-shadow:
-    0 0 0 2px var(--sigvelo-color-canvas),
-    0 0 0 4px var(--sigvelo-color-focus);
+  box-shadow: var(--sigvelo-recipe-focus-shadow);
 }