@mcp-b/react-components 0.12.0 → 0.13.0

package/dist/styles/recipes.css

@@ -0,0 +1,475 @@
+/*
+ * Low-specificity visual contracts shared by stable data-slot parts.
+ * Components own anatomy and set recipe variables only when they need a
+ * supported variation. Consumers can override these variables by inheritance.
+ */
+:where(:root, .sigvelo-light, .sigvelo-dark, [data-theme="light"], [data-theme="dark"]) {
+  --sigvelo-recipe-control-height: var(--sigvelo-control-height-md);
+  --sigvelo-recipe-control-padding-inline: var(--sigvelo-spacing-3);
+  --sigvelo-recipe-control-gap: var(--sigvelo-spacing-2);
+  --sigvelo-recipe-control-font-size: var(--sigvelo-control-text-md);
+  --sigvelo-recipe-control-radius: var(--sigvelo-radius-md);
+  --sigvelo-recipe-field-background: var(--sigvelo-color-canvas);
+  --sigvelo-recipe-field-border: var(--sigvelo-color-neutral-border-muted);
+  --sigvelo-recipe-focus-shadow:
+    0 0 0 2px var(--sigvelo-color-canvas), 0 0 0 4px var(--sigvelo-color-focus);
+  --sigvelo-recipe-focus-shadow-subtle:
+    0 0 0 2px var(--sigvelo-color-canvas),
+    0 0 0 4px color-mix(in oklab, var(--sigvelo-color-focus), transparent 80%);
+  --sigvelo-recipe-invalid-focus-shadow:
+    0 0 0 2px var(--sigvelo-color-canvas),
+    0 0 0 4px color-mix(in oklab, var(--sigvelo-color-danger-bg), transparent 80%);
+  --sigvelo-recipe-disabled-opacity: 0.5;
+  --sigvelo-recipe-surface-background: var(--sigvelo-color-surface);
+  --sigvelo-recipe-surface-border: var(--sigvelo-color-neutral-border-muted);
+  --sigvelo-recipe-surface-radius: var(--sigvelo-radius-md);
+  --sigvelo-recipe-surface-shadow: var(--sigvelo-shadow-lg);
+  --sigvelo-recipe-surface-padding: var(--sigvelo-spacing-1);
+  --sigvelo-recipe-row-min-height: var(--sigvelo-control-height-sm);
+  --sigvelo-recipe-row-padding-block: var(--sigvelo-spacing-1);
+  --sigvelo-recipe-row-padding-inline: var(--sigvelo-spacing-3);
+  --sigvelo-recipe-row-gap: var(--sigvelo-spacing-2);
+  --sigvelo-recipe-row-font-size: var(--sigvelo-text-sm);
+  --sigvelo-recipe-row-radius: var(--sigvelo-radius-sm);
+}
+
+:where(
+  [data-slot="input"],
+  [data-slot="select-trigger"],
+  [data-slot="combobox-input"],
+  [data-slot="autocomplete-input"],
+  [data-slot="field-control"],
+  [data-slot="number-field-input"],
+  [data-slot="toolbar-input"]
+) {
+  min-inline-size: 0;
+  block-size: var(--sigvelo-recipe-control-height);
+  padding-block: 0;
+  padding-inline: var(--sigvelo-recipe-control-padding-inline);
+  font-family: inherit;
+  font-size: var(--sigvelo-recipe-control-font-size);
+  line-height: 1.25;
+  color: var(--sigvelo-color-text);
+  background-color: var(--sigvelo-recipe-field-background);
+  border: var(--sigvelo-border-style) var(--sigvelo-border-width) var(--sigvelo-recipe-field-border);
+  border-radius: var(--sigvelo-recipe-control-radius);
+  transition:
+    color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard),
+    border-color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard),
+    box-shadow var(--sigvelo-duration-fast) var(--sigvelo-ease-standard);
+}
+
+:where([data-slot="input"], [data-slot="select-trigger"], [data-slot="field-control"]):hover:not(
+  :disabled,
+  [data-disabled]
+) {
+  border-color: var(--sigvelo-color-focus);
+}
+
+:where(
+  [data-slot="input"],
+  [data-slot="select-trigger"],
+  [data-slot="combobox-input"],
+  [data-slot="autocomplete-input"],
+  [data-slot="field-control"],
+  [data-slot="number-field-input"],
+  [data-slot="toolbar-input"]
+):focus-visible {
+  outline: none;
+  border-color: var(--sigvelo-color-focus);
+  box-shadow: var(--sigvelo-recipe-focus-shadow-subtle);
+}
+
+:where(
+  [data-slot="input"],
+  [data-slot="select-trigger"],
+  [data-slot="combobox-input"],
+  [data-slot="autocomplete-input"],
+  [data-slot="field-control"],
+  [data-slot="number-field-input"],
+  [data-slot="toolbar-input"]
+)::placeholder {
+  color: var(--sigvelo-control-placeholder-color);
+}
+
+:where([data-slot="input"], [data-slot="select-trigger"], [data-slot="field-control"]):is(
+  [aria-invalid="true"],
+  [data-invalid="true"],
+  [data-invalid=""]
+) {
+  border-color: var(--sigvelo-color-danger-bg);
+}
+
+:where([data-slot="input"], [data-slot="select-trigger"], [data-slot="field-control"]):is(
+  [aria-invalid="true"],
+  [data-invalid="true"],
+  [data-invalid=""]
+):focus-visible {
+  box-shadow: var(--sigvelo-recipe-invalid-focus-shadow);
+}
+
+:where(
+  [data-slot="input"]:disabled,
+  [data-slot="select-trigger"][data-disabled],
+  [data-slot="field-control"]:disabled,
+  [data-slot="number-field-input"]:disabled,
+  [data-slot="toolbar-input"]:disabled
+) {
+  cursor: not-allowed;
+  opacity: var(--sigvelo-recipe-disabled-opacity);
+}
+
+:where(
+  [data-slot="dropdown-menu-content"],
+  [data-slot="context-menu-content"],
+  [data-slot="menubar-content"],
+  [data-slot="select-content"],
+  [data-slot="combobox-content"],
+  [data-slot="autocomplete-content"],
+  [data-slot="popover-content"],
+  [data-slot="hover-card-content"],
+  [data-slot="tooltip-content"],
+  [data-slot="navigation-menu-popup"],
+  [data-slot="dialog-content"],
+  [data-slot="alert-dialog-content"],
+  [data-slot="toast"]
+) {
+  max-inline-size: var(--available-width);
+  max-block-size: var(--available-height);
+  padding: var(--sigvelo-recipe-surface-padding);
+  font-family: inherit;
+  color: var(--sigvelo-color-text);
+  background-color: var(--sigvelo-recipe-surface-background);
+  border: var(--sigvelo-border-style) var(--sigvelo-border-width)
+    var(--sigvelo-recipe-surface-border);
+  border-radius: var(--sigvelo-recipe-surface-radius);
+  box-shadow: var(--sigvelo-recipe-surface-shadow);
+  outline: none;
+}
+
+:where(
+  [data-slot="dropdown-menu-item"],
+  [data-slot="dropdown-menu-radio-item"],
+  [data-slot="dropdown-menu-checkbox-item"],
+  [data-slot="dropdown-menu-sub-trigger"],
+  [data-slot="context-menu-item"],
+  [data-slot="context-menu-radio-item"],
+  [data-slot="context-menu-checkbox-item"],
+  [data-slot="context-menu-sub-trigger"],
+  [data-slot="menubar-item"],
+  [data-slot="menubar-radio-item"],
+  [data-slot="menubar-checkbox-item"],
+  [data-slot="menubar-sub-trigger"],
+  [data-slot="select-item"],
+  [data-slot="combobox-item"],
+  [data-slot="autocomplete-item"]
+) {
+  display: flex;
+  align-items: center;
+  gap: var(--sigvelo-recipe-row-gap);
+  min-block-size: var(--sigvelo-recipe-row-min-height);
+  padding-block: var(--sigvelo-recipe-row-padding-block);
+  padding-inline: var(--sigvelo-recipe-row-padding-inline);
+  font-family: inherit;
+  font-size: var(--sigvelo-recipe-row-font-size);
+  line-height: 1.25;
+  color: var(--sigvelo-color-text);
+  border-radius: var(--sigvelo-recipe-row-radius);
+  cursor: pointer;
+  outline: none;
+  user-select: none;
+  transition:
+    color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard),
+    background-color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard);
+}
+
+:where(
+  [data-slot="dropdown-menu-item"],
+  [data-slot="dropdown-menu-radio-item"],
+  [data-slot="dropdown-menu-checkbox-item"],
+  [data-slot="dropdown-menu-sub-trigger"],
+  [data-slot="context-menu-item"],
+  [data-slot="context-menu-radio-item"],
+  [data-slot="context-menu-checkbox-item"],
+  [data-slot="context-menu-sub-trigger"],
+  [data-slot="menubar-item"],
+  [data-slot="menubar-radio-item"],
+  [data-slot="menubar-checkbox-item"],
+  [data-slot="menubar-sub-trigger"],
+  [data-slot="select-item"],
+  [data-slot="combobox-item"],
+  [data-slot="autocomplete-item"]
+)[data-highlighted] {
+  color: var(--sigvelo-color-neutral-text-on-subtle);
+  background-color: var(--sigvelo-color-neutral-bg-subtle);
+}
+
+:where(
+  [data-slot="dropdown-menu-item"],
+  [data-slot="dropdown-menu-radio-item"],
+  [data-slot="dropdown-menu-checkbox-item"],
+  [data-slot="dropdown-menu-sub-trigger"],
+  [data-slot="context-menu-item"],
+  [data-slot="context-menu-radio-item"],
+  [data-slot="context-menu-checkbox-item"],
+  [data-slot="context-menu-sub-trigger"],
+  [data-slot="menubar-item"],
+  [data-slot="menubar-radio-item"],
+  [data-slot="menubar-checkbox-item"],
+  [data-slot="menubar-sub-trigger"],
+  [data-slot="select-item"],
+  [data-slot="combobox-item"],
+  [data-slot="autocomplete-item"]
+)[data-disabled] {
+  pointer-events: none;
+  opacity: var(--sigvelo-recipe-disabled-opacity);
+}
+
+:where([data-slot="dropdown-menu-trigger"]:not([data-unstyled]), [data-slot="popover-trigger"]) {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--sigvelo-recipe-control-gap);
+  min-block-size: var(--sigvelo-recipe-control-height);
+  padding-block: 0;
+  padding-inline: var(--sigvelo-recipe-control-padding-inline);
+  font-family: inherit;
+  font-size: var(--sigvelo-recipe-control-font-size);
+  font-weight: var(--sigvelo-font-weight-semibold);
+  line-height: 1.25;
+  color: var(--sigvelo-color-text);
+  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-recipe-control-radius);
+  cursor: pointer;
+  transition:
+    color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard),
+    background-color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard),
+    border-color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard);
+}
+
+:where([data-slot="dropdown-menu-trigger"]:not([data-unstyled]), [data-slot="popover-trigger"]):is(
+  :hover,
+  [data-popup-open]
+) {
+  color: var(--sigvelo-color-neutral-text-on-subtle);
+  background-color: var(--sigvelo-color-neutral-bg-subtle);
+}
+
+:where(
+  [data-slot="dropdown-menu-trigger"]:not([data-unstyled]),
+  [data-slot="popover-trigger"]
+):focus-visible {
+  outline: none;
+  box-shadow: var(--sigvelo-recipe-focus-shadow);
+}
+
+:where(
+  [data-slot="combobox-trigger"],
+  [data-slot="combobox-clear"],
+  [data-slot="autocomplete-trigger"],
+  [data-slot="autocomplete-clear"]
+) {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--sigvelo-spacing-1);
+  color: var(--sigvelo-color-text-muted);
+  background-color: transparent;
+  border: 0;
+  border-radius: var(--sigvelo-radius-sm);
+  cursor: pointer;
+  transition:
+    color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard),
+    background-color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard);
+}
+
+:where(
+  [data-slot="combobox-trigger"],
+  [data-slot="combobox-clear"],
+  [data-slot="autocomplete-trigger"],
+  [data-slot="autocomplete-clear"]
+):hover {
+  color: var(--sigvelo-color-text);
+  background-color: var(--sigvelo-color-neutral-bg-subtle);
+}
+
+:where(
+  [data-slot="combobox-trigger"],
+  [data-slot="combobox-clear"],
+  [data-slot="autocomplete-trigger"],
+  [data-slot="autocomplete-clear"]
+):focus-visible {
+  outline: none;
+  box-shadow: var(--sigvelo-recipe-focus-shadow);
+}
+
+:where([data-slot="combobox-list"], [data-slot="autocomplete-list"]) {
+  max-block-size: min(22.5rem, var(--available-height));
+  padding: var(--sigvelo-spacing-1);
+  overflow-y: auto;
+  overscroll-behavior: contain;
+}
+
+:where([data-slot="combobox-empty"], [data-slot="autocomplete-empty"]) {
+  padding: var(--sigvelo-spacing-4);
+  color: var(--sigvelo-color-text-muted);
+  font-size: var(--sigvelo-text-sm);
+  text-align: center;
+}
+
+:where([data-slot="combobox-group"], [data-slot="autocomplete-group"]) {
+  padding-block: var(--sigvelo-spacing-1);
+}
+
+:where(
+  [data-slot="combobox-group"] + [data-slot="combobox-group"],
+  [data-slot="autocomplete-group"] + [data-slot="autocomplete-group"]
+) {
+  border-block-start: var(--sigvelo-border-width) solid var(--sigvelo-color-neutral-border-muted);
+}
+
+:where(
+  [data-slot="chain-of-thought-trigger"],
+  [data-slot="reasoning-trigger"],
+  [data-slot="sources-trigger"]
+) {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--sigvelo-recipe-control-gap);
+  padding-block: var(--sigvelo-spacing-2);
+  padding-inline: var(--sigvelo-recipe-control-padding-inline);
+  color: var(--sigvelo-color-text-muted);
+  background-color: transparent;
+  border: 0;
+  border-radius: var(--sigvelo-radius-sm);
+  font-family: inherit;
+  font-size: var(--sigvelo-text-compact);
+  font-weight: var(--sigvelo-font-weight-semibold);
+  cursor: pointer;
+  transition:
+    color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard),
+    background-color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard);
+}
+
+:where(
+  [data-slot="chain-of-thought-trigger"],
+  [data-slot="reasoning-trigger"],
+  [data-slot="sources-trigger"]
+):hover:not([data-disabled]) {
+  color: var(--sigvelo-color-text);
+  background-color: var(--sigvelo-color-neutral-bg-subtle);
+}
+
+:where(
+  [data-slot="chain-of-thought-trigger"],
+  [data-slot="reasoning-trigger"],
+  [data-slot="sources-trigger"]
+):focus-visible {
+  outline: none;
+  box-shadow: var(--sigvelo-recipe-focus-shadow);
+}
+
+:where(
+  [data-slot="chain-of-thought-trigger-icon"],
+  [data-slot="reasoning-trigger-icon"],
+  [data-slot="sources-trigger-icon"],
+  [data-slot="task-trigger-icon"]
+) {
+  display: inline-flex;
+  transition: transform var(--sigvelo-duration-medium) var(--sigvelo-ease-standard);
+}
+
+:where(
+    [data-slot="chain-of-thought-trigger"],
+    [data-slot="reasoning-trigger"],
+    [data-slot="sources-trigger"],
+    [data-slot="task-trigger"]
+  )[data-panel-open]
+  > :where(
+    [data-slot="chain-of-thought-trigger-icon"],
+    [data-slot="reasoning-trigger-icon"],
+    [data-slot="sources-trigger-icon"],
+    [data-slot="task-trigger-icon"]
+  ) {
+  transform: rotate(90deg);
+}
+
+:where([data-slot="meter-track"], [data-slot="progress-track"]) {
+  position: relative;
+  inline-size: 100%;
+  block-size: var(--sigvelo-spacing-2);
+  overflow: hidden;
+  background-color: var(--sigvelo-color-neutral-bg-subtle);
+  border-radius: var(--sigvelo-radius-full);
+}
+
+:where([data-slot="meter-indicator"], [data-slot="progress-indicator"]) {
+  block-size: 100%;
+  background-color: var(--sigvelo-color-primary-bg);
+  border-radius: var(--sigvelo-radius-full);
+  transition: width var(--sigvelo-duration-slow) var(--sigvelo-ease-standard);
+}
+
+:where(
+  [data-slot="dropdown-menu-label"],
+  [data-slot="context-menu-label"],
+  [data-slot="menubar-label"],
+  [data-slot="select-label"],
+  [data-slot="combobox-group-label"],
+  [data-slot="autocomplete-group-label"]
+) {
+  padding-block: var(--sigvelo-spacing-1-5);
+  padding-inline: var(--sigvelo-recipe-row-padding-inline);
+  color: var(--sigvelo-color-text-muted);
+  font-size: var(--sigvelo-text-xs);
+  font-weight: var(--sigvelo-font-weight-semibold);
+}
+
+:where(
+  [data-slot="dropdown-menu-separator"],
+  [data-slot="context-menu-separator"],
+  [data-slot="menubar-separator"],
+  [data-slot="select-separator"]
+) {
+  block-size: var(--sigvelo-border-width);
+  margin-block: var(--sigvelo-spacing-1);
+  background-color: var(--sigvelo-color-neutral-border-muted);
+}
+
+:where(
+  [data-slot="dropdown-menu-shortcut"],
+  [data-slot="context-menu-shortcut"],
+  [data-slot="menubar-shortcut"]
+) {
+  margin-inline-start: auto;
+  color: var(--sigvelo-color-text-muted);
+  font-size: var(--sigvelo-text-xs);
+}
+
+@media (forced-colors: active) {
+  :where(
+    [data-slot="input"],
+    [data-slot="select-trigger"],
+    [data-slot="combobox-input"],
+    [data-slot="autocomplete-input"],
+    [data-slot="field-control"],
+    [data-slot="number-field-input"],
+    [data-slot="toolbar-input"]
+  ):focus-visible {
+    outline: 2px solid Highlight;
+    outline-offset: 2px;
+    box-shadow: none;
+  }
+
+  :where(
+    [data-slot="chain-of-thought-trigger"],
+    [data-slot="reasoning-trigger"],
+    [data-slot="sources-trigger"]
+  ):focus-visible {
+    outline: 2px solid Highlight;
+    outline-offset: 2px;
+    box-shadow: none;
+  }
+}

package/dist/styles/select.css

@@ -2,23 +2,9 @@
   display: inline-flex;
   align-items: center;
   justify-content: space-between;
-  gap: 0.5rem;
+  gap: var(--sigvelo-recipe-control-gap);
   width: 100%;
-  height: 2.5rem;
-  padding-block: 0.5rem;
-  padding-inline: 0.75rem;
-  font-family: var(--sigvelo-font-sans);
-  font-size: 0.875rem;
-  color: var(--sigvelo-color-text);
-  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);
   cursor: pointer;
-  transition:
-    color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard),
-    border-color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard),
-    box-shadow var(--sigvelo-duration-fast) var(--sigvelo-ease-standard);
 }
 
 .select__trigger > [data-slot="select-value"] {
@@ -38,65 +24,17 @@
   opacity: 0.7;
 }
 
-.select__trigger:hover:not([data-disabled]) {
-  border-color: var(--sigvelo-color-focus);
-}
-
-.select__trigger:focus-visible {
-  outline: none;
-  border-color: var(--sigvelo-color-focus);
-  box-shadow:
-    0 0 0 2px var(--sigvelo-color-canvas),
-    0 0 0 4px color-mix(in oklab, var(--sigvelo-color-focus), transparent 80%);
-}
-
-.select__trigger[data-disabled] {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-.select__trigger:is([aria-invalid="true"], [data-invalid="true"], [data-invalid=""]) {
-  border-color: var(--sigvelo-color-danger-bg);
-}
-
-.select__trigger:is([aria-invalid="true"], [data-invalid="true"], [data-invalid=""]):focus-visible {
-  border-color: var(--sigvelo-color-danger-bg);
-  box-shadow:
-    0 0 0 2px var(--sigvelo-color-canvas),
-    0 0 0 4px color-mix(in oklab, var(--sigvelo-color-danger-bg), transparent 80%);
-}
-
 .select__trigger--sm {
-  height: 2rem;
-  padding-block: 0.25rem;
-  padding-inline: 0.5rem;
-  font-size: 0.75rem;
-}
-
-.select__placeholder {
-  color: var(--sigvelo-color-text-muted);
-}
-
-.select__positioner {
-  z-index: 50;
+  --sigvelo-recipe-control-height: var(--sigvelo-control-height-sm);
+  --sigvelo-recipe-control-padding-inline: var(--sigvelo-spacing-2);
+  --sigvelo-recipe-control-font-size: var(--sigvelo-control-text-sm);
 }
 
 .select__popup {
+  --sigvelo-recipe-surface-padding: 0;
+
   min-width: 8rem;
   overflow: hidden;
-  background-color: var(--sigvelo-color-surface);
-  border: var(--sigvelo-border-style) var(--sigvelo-border-width)
-    var(--sigvelo-color-neutral-border-muted);
-  border-radius: var(--sigvelo-radius-md);
-  box-shadow:
-    0 4px 6px -1px color-mix(in oklab, var(--sigvelo-color-text), transparent 90%),
-    0 2px 4px -2px color-mix(in oklab, var(--sigvelo-color-text), transparent 90%);
-}
-
-.select__popup[data-starting-style],
-.select__popup[data-ending-style] {
-  opacity: 0;
-  transform: scale(0.95);
 }
 
 .select__list {
@@ -105,26 +43,8 @@
 
 .select__option {
   position: relative;
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
   width: 100%;
-  padding-block: 0.5rem;
-  padding-inline: 0.75rem 2rem;
-  font-family: var(--sigvelo-font-sans);
-  font-size: 0.875rem;
-  color: var(--sigvelo-color-text);
-  border-radius: calc(var(--sigvelo-radius-md) - 2px);
-  cursor: pointer;
-  outline: none;
-  user-select: none;
-  transition: background-color 100ms ease;
-}
-
-.select__option:hover,
-.select__option[data-highlighted] {
-  background-color: var(--sigvelo-color-neutral-bg-subtle);
-  color: var(--sigvelo-color-neutral-text-on-subtle);
+  padding-inline: var(--sigvelo-spacing-3) 2rem;
 }
 
 .select__option[data-selected] {
@@ -132,11 +52,6 @@
   color: var(--sigvelo-color-primary-text-on-bg);
 }
 
-.select__option[data-disabled] {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
 .select__item-indicator {
   position: absolute;
   inset-inline-end: 0.5rem;
@@ -153,17 +68,6 @@
 
 .select__group-label {
   padding-block: 0.5rem 0.25rem;
-  padding-inline: 0.75rem;
-  font-family: var(--sigvelo-font-sans);
-  font-size: 0.75rem;
-  font-weight: var(--sigvelo-font-weight-semibold);
-  color: var(--sigvelo-color-text-muted);
-}
-
-.select__separator {
-  height: 1px;
-  margin-block: 0.25rem;
-  background-color: var(--sigvelo-color-neutral-border-muted);
 }
 
 .select__scroll-button {

package/dist/styles/shell.css

@@ -14,7 +14,7 @@
 .shell__header {
   display: flex;
   align-items: center;
-  padding: 0.75rem 1rem;
+  padding: var(--sigvelo-spacing-3) 1rem;
   background: var(--sigvelo-color-neutral-bg-subtle);
   border-bottom: var(--sigvelo-border-style) var(--sigvelo-border-width)
     var(--sigvelo-color-neutral-border-muted);
@@ -99,8 +99,8 @@
 }
 
 .shell__panel-heading {
-  padding: 0.75rem 1rem;
-  font-size: 0.875rem;
+  padding: var(--sigvelo-spacing-3) 1rem;
+  font-size: var(--sigvelo-text-sm);
   font-weight: var(--sigvelo-font-weight-bold);
   color: var(--sigvelo-color-text);
   border-bottom: var(--sigvelo-border-style) var(--sigvelo-border-width)

package/dist/styles/slider.css

@@ -13,8 +13,8 @@
 }
 
 .slider__output {
-  font-family: var(--sigvelo-font-sans);
-  font-size: 0.875rem;
+  font-family: inherit;
+  font-size: var(--sigvelo-text-sm);
   font-weight: var(--sigvelo-font-weight-semibold);
   font-variant-numeric: tabular-nums;
   color: var(--sigvelo-color-text);
@@ -58,7 +58,7 @@
 }
 
 .slider[data-disabled] .slider__track {
-  opacity: 0.5;
+  opacity: var(--sigvelo-recipe-disabled-opacity);
 }
 
 .slider__indicator {
@@ -97,14 +97,12 @@
 
 .slider__thumb: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);
 }
 
 .slider[data-disabled] .slider__thumb {
   cursor: not-allowed;
-  opacity: 0.5;
+  opacity: var(--sigvelo-recipe-disabled-opacity);
 }
 
 .slider[data-disabled] .slider__thumb:hover {