@mcp-b/react-components 0.1.1 → 0.1.2

package/dist/styles/badge.css

@@ -1,17 +1,47 @@
 .badge {
   display: inline-flex;
+  flex-shrink: 0;
   align-items: center;
   justify-content: center;
+  gap: 0.25rem;
+  width: fit-content;
+  overflow: hidden;
   padding-block: 0.125rem;
   padding-inline: 0.5rem;
-  font-family: var(--sigvelo-font-family);
+  font-family: var(--sigvelo-font-sans);
   font-size: 0.75rem;
   font-weight: var(--sigvelo-font-weight-bold);
   line-height: 1.25;
   text-transform: uppercase;
   letter-spacing: 0.025em;
-  border-radius: var(--sigvelo-border-radius-pill);
+  border: var(--sigvelo-border-style) var(--sigvelo-border-width) transparent;
+  border-radius: var(--sigvelo-radius-full);
   white-space: nowrap;
+  transition:
+    background-color 150ms ease,
+    color 150ms ease,
+    border-color 150ms ease,
+    box-shadow 150ms ease;
+}
+
+.badge:where(a, button) {
+  text-decoration: none;
+}
+
+.badge:focus-visible {
+  outline: var(--sigvelo-focus-ring);
+  outline-offset: var(--sigvelo-focus-offset);
+}
+
+.badge:is([aria-invalid="true"], [data-invalid="true"], [data-invalid=""]) {
+  border-color: var(--sigvelo-color-danger-bg);
+}
+
+.badge > svg {
+  flex-shrink: 0;
+  width: 0.75rem;
+  height: 0.75rem;
+  pointer-events: none;
 }
 
 .badge--sm {
@@ -23,34 +53,68 @@
 /* Normal appearance */
 
 .badge--normal.badge--primary {
-  background-color: var(--sigvelo-primary-fill-mid);
-  color: var(--sigvelo-primary-text-on-mid);
+  background-color: var(--sigvelo-color-primary-bg);
+  color: var(--sigvelo-color-primary-text-on-bg);
 }
 
 .badge--normal.badge--neutral {
-  background-color: var(--sigvelo-neutral-fill-softer);
-  color: var(--sigvelo-neutral-text-on-soft);
+  background-color: var(--sigvelo-color-neutral-bg-subtle);
+  color: var(--sigvelo-color-neutral-text-on-subtle);
 }
 
 .badge--normal.badge--success {
-  background-color: var(--sigvelo-success-fill-mid);
-  color: var(--sigvelo-success-text-on-mid);
+  background-color: var(--sigvelo-color-success-bg);
+  color: var(--sigvelo-color-success-text-on-bg);
 }
 
 .badge--normal.badge--warning {
-  background-color: var(--sigvelo-warning-fill-mid);
-  color: var(--sigvelo-warning-text-on-mid);
+  background-color: var(--sigvelo-color-warning-bg);
+  color: var(--sigvelo-color-warning-text-on-bg);
 }
 
 .badge--normal.badge--destructive {
-  background-color: var(--sigvelo-destructive-fill-mid);
-  color: var(--sigvelo-destructive-text-on-mid);
+  background-color: var(--sigvelo-color-danger-bg);
+  color: var(--sigvelo-color-danger-text-on-bg);
 }
 
 /* Outline appearance */
 
 .badge--outline {
   background-color: transparent;
-  color: var(--sigvelo-text-body);
-  border: var(--sigvelo-border-style) var(--sigvelo-border-width) var(--sigvelo-neutral-stroke-soft);
+  color: var(--sigvelo-color-text);
+  border-color: var(--sigvelo-color-neutral-border-muted);
+}
+
+/* Ghost appearance */
+
+.badge--ghost {
+  background-color: transparent;
+  color: var(--sigvelo-color-neutral-text-on-subtle);
+}
+
+.badge--ghost:where(a, button):hover {
+  background-color: color-mix(in oklab, transparent, var(--sigvelo-color-text) 5%);
+}
+
+/* Link appearance */
+
+.badge--link {
+  background-color: transparent;
+  color: var(--sigvelo-color-primary-text);
+  text-underline-offset: 4px;
+}
+
+.badge--link:where(a, button):hover {
+  text-decoration: underline;
+}
+
+@media (forced-colors: active) {
+  .badge {
+    border: 1px solid ButtonText;
+  }
+
+  .badge--ghost,
+  .badge--link {
+    border-color: transparent;
+  }
 }

package/dist/styles/base.css

@@ -14,11 +14,11 @@
 }
 
 body {
-  font-family: var(--sigvelo-font-family);
+  font-family: var(--sigvelo-font-sans);
   font-size: 1rem;
   line-height: 1.5;
-  color: var(--sigvelo-text-body);
-  background-color: var(--sigvelo-background-color);
+  color: var(--sigvelo-color-text);
+  background-color: var(--sigvelo-color-canvas);
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
@@ -27,7 +27,7 @@ code,
 kbd,
 samp,
 pre {
-  font-family: var(--sigvelo-font-family-code);
+  font-family: var(--sigvelo-font-mono);
 }
 
 button,
@@ -40,8 +40,8 @@ a {
 }
 
 ::selection {
-  background-color: var(--sigvelo-selection-background-color);
-  color: var(--sigvelo-selection-color);
+  background-color: var(--sigvelo-color-selection-bg);
+  color: var(--sigvelo-color-selection-text);
 }
 
 .tabular-nums {
@@ -61,9 +61,9 @@ a {
 
 @media (prefers-contrast: more) {
   :root {
-    --sigvelo-neutral-stroke-soft: var(--sigvelo-neutral-600);
-    --sigvelo-neutral-stroke-softer: var(--sigvelo-neutral-500);
-    --sigvelo-neutral-fill-softer: var(--sigvelo-neutral-200);
+    --sigvelo-color-neutral-border-muted: var(--sigvelo-color-neutral-600);
+    --sigvelo-color-neutral-border-subtle: var(--sigvelo-color-neutral-500);
+    --sigvelo-color-neutral-bg-subtle: var(--sigvelo-color-neutral-200);
   }
 }
 

package/dist/styles/button.css

@@ -6,11 +6,11 @@
   white-space: nowrap;
   border: none;
   cursor: pointer;
-  font-family: var(--sigvelo-font-family);
+  font-family: var(--sigvelo-font-sans);
   font-weight: var(--sigvelo-font-weight-semibold);
   line-height: 1.25;
   text-decoration: none;
-  border-radius: var(--sigvelo-border-radius-md);
+  border-radius: var(--sigvelo-radius-md);
   transition:
     background-color 150ms ease,
     color 150ms ease,
@@ -31,81 +31,80 @@
 /* Normal appearance */
 
 .button--normal.button--primary {
-  background-color: var(--sigvelo-primary-fill-mid);
-  color: var(--sigvelo-primary-text-on-mid);
+  background-color: var(--sigvelo-color-primary-bg);
+  color: var(--sigvelo-color-primary-text-on-bg);
 }
 
 .button--normal.button--primary:hover:not([data-disabled]) {
-  background-color: color-mix(in oklab, var(--sigvelo-primary-fill-mid), black 5%);
+  background-color: color-mix(in oklab, var(--sigvelo-color-primary-bg), black 5%);
 }
 
 .button--normal.button--neutral {
-  background-color: var(--sigvelo-neutral-fill-softer);
-  color: var(--sigvelo-neutral-text-on-soft);
+  background-color: var(--sigvelo-color-neutral-bg-subtle);
+  color: var(--sigvelo-color-neutral-text-on-subtle);
 }
 
 .button--normal.button--neutral:hover:not([data-disabled]) {
-  background-color: color-mix(in oklab, var(--sigvelo-neutral-fill-softer), black 5%);
+  background-color: color-mix(in oklab, var(--sigvelo-color-neutral-bg-subtle), black 5%);
 }
 
 .button--normal.button--destructive {
-  background-color: var(--sigvelo-destructive-fill-mid);
-  color: var(--sigvelo-destructive-text-on-mid);
+  background-color: var(--sigvelo-color-danger-bg);
+  color: var(--sigvelo-color-danger-text-on-bg);
 }
 
 .button--normal.button--destructive:hover:not([data-disabled]) {
-  background-color: color-mix(in oklab, var(--sigvelo-destructive-fill-mid), black 5%);
+  background-color: color-mix(in oklab, var(--sigvelo-color-danger-bg), black 5%);
 }
 
 /* Outline appearance */
 
 .button--outline.button--neutral {
   background-color: transparent;
-  color: var(--sigvelo-neutral-text-colorful);
-  border: var(--sigvelo-border-style) var(--sigvelo-border-width) var(--sigvelo-neutral-fill-mid);
+  color: var(--sigvelo-color-neutral-text);
+  border: var(--sigvelo-border-style) var(--sigvelo-border-width) var(--sigvelo-color-neutral-bg);
 }
 
 .button--outline.button--neutral:hover:not([data-disabled]) {
-  background-color: color-mix(in oklab, transparent, var(--sigvelo-neutral-fill-mid) 7.5%);
+  background-color: color-mix(in oklab, transparent, var(--sigvelo-color-neutral-bg) 7.5%);
 }
 
 .button--outline.button--primary {
   background-color: transparent;
-  color: var(--sigvelo-primary-text-colorful);
-  border: var(--sigvelo-border-style) var(--sigvelo-border-width) var(--sigvelo-primary-fill-mid);
+  color: var(--sigvelo-color-primary-text);
+  border: var(--sigvelo-border-style) var(--sigvelo-border-width) var(--sigvelo-color-primary-bg);
 }
 
 .button--outline.button--primary:hover:not([data-disabled]) {
-  background-color: color-mix(in oklab, transparent, var(--sigvelo-primary-fill-mid) 7.5%);
+  background-color: color-mix(in oklab, transparent, var(--sigvelo-color-primary-bg) 7.5%);
 }
 
 .button--outline.button--destructive {
   background-color: transparent;
-  color: var(--sigvelo-destructive-text-colorful);
-  border: var(--sigvelo-border-style) var(--sigvelo-border-width)
-    var(--sigvelo-destructive-fill-mid);
+  color: var(--sigvelo-color-danger-text);
+  border: var(--sigvelo-border-style) var(--sigvelo-border-width) var(--sigvelo-color-danger-bg);
 }
 
 .button--outline.button--destructive:hover:not([data-disabled]) {
-  background-color: color-mix(in oklab, transparent, var(--sigvelo-destructive-fill-mid) 7.5%);
+  background-color: color-mix(in oklab, transparent, var(--sigvelo-color-danger-bg) 7.5%);
 }
 
 /* Ghost appearance */
 
 .button--ghost {
   background: none;
-  color: var(--sigvelo-neutral-text-on-soft);
+  color: var(--sigvelo-color-neutral-text-on-subtle);
 }
 
 .button--ghost:hover:not([data-disabled]) {
-  background-color: color-mix(in oklab, transparent, var(--sigvelo-text-body) 5%);
+  background-color: color-mix(in oklab, transparent, var(--sigvelo-color-text) 5%);
 }
 
 /* Link appearance */
 
 .button--link {
   background-color: transparent;
-  color: var(--sigvelo-primary-text-colorful);
+  color: var(--sigvelo-color-primary-text);
   text-underline-offset: 4px;
 }
 
@@ -116,45 +115,65 @@
 /* Sizes */
 
 .button--xs {
-  min-height: var(--sigvelo-form-control-height-xs);
+  min-height: var(--sigvelo-control-height-xs);
   padding-block: 0;
   padding-inline: 0.65rem;
-  font-size: var(--sigvelo-form-control-font-size-xs);
-  border-radius: var(--sigvelo-border-radius-sm);
+  font-size: var(--sigvelo-control-text-xs);
+  border-radius: var(--sigvelo-radius-sm);
 }
 
 .button--sm {
-  min-height: var(--sigvelo-form-control-height-sm);
+  min-height: var(--sigvelo-control-height-sm);
   padding-block: 0;
   padding-inline: 0.85rem;
-  font-size: var(--sigvelo-form-control-font-size-sm);
-  border-radius: var(--sigvelo-border-radius-sm);
+  font-size: var(--sigvelo-control-text-sm);
+  border-radius: var(--sigvelo-radius-sm);
 }
 
 .button--md {
-  min-height: var(--sigvelo-form-control-height-md);
+  min-height: var(--sigvelo-control-height-md);
   padding-block: 0;
   padding-inline: 1.25rem;
-  font-size: var(--sigvelo-form-control-font-size-md);
+  font-size: var(--sigvelo-control-text-md);
 }
 
 .button--lg {
-  min-height: var(--sigvelo-form-control-height-lg);
+  min-height: var(--sigvelo-control-height-lg);
   padding-block: 0;
   padding-inline: 1.5rem;
-  font-size: var(--sigvelo-form-control-font-size-lg);
+  font-size: var(--sigvelo-control-text-lg);
 }
 
 .button--xl {
-  min-height: var(--sigvelo-form-control-height-xl);
+  min-height: var(--sigvelo-control-height-xl);
   padding-block: 0;
   padding-inline: 1.75rem;
-  font-size: var(--sigvelo-form-control-font-size-xl);
+  font-size: var(--sigvelo-control-text-xl);
 }
 
 .button--icon {
-  min-height: var(--sigvelo-form-control-height-md);
-  width: var(--sigvelo-form-control-height-md);
+  min-height: var(--sigvelo-control-height-md);
+  width: var(--sigvelo-control-height-md);
+  padding: 0;
+}
+
+.button--icon-xs {
+  min-height: var(--sigvelo-control-height-xs);
+  width: var(--sigvelo-control-height-xs);
+  padding: 0;
+  border-radius: var(--sigvelo-radius-sm);
+}
+
+.button--icon-sm {
+  min-height: var(--sigvelo-control-height-sm);
+  width: var(--sigvelo-control-height-sm);
+  padding: 0;
+  border-radius: var(--sigvelo-radius-sm);
+}
+
+.button--icon-lg {
+  min-height: var(--sigvelo-control-height-lg);
+  width: var(--sigvelo-control-height-lg);
   padding: 0;
 }
 

package/dist/styles/card.css

@@ -1,31 +1,78 @@
 .card {
-  background-color: var(--sigvelo-paper-color);
-  color: var(--sigvelo-text-body);
-  border: var(--sigvelo-border-style) var(--sigvelo-border-width) var(--sigvelo-neutral-stroke-soft);
-  border-radius: var(--sigvelo-border-radius-md);
+  background-color: var(--sigvelo-color-surface);
+  color: var(--sigvelo-color-text);
+  border: var(--sigvelo-border-style) var(--sigvelo-border-width)
+    var(--sigvelo-color-neutral-border-muted);
+  border-radius: var(--sigvelo-radius-md);
   padding: 1.5rem;
   container-type: inline-size;
-  box-shadow: var(--sigvelo-shadow-soft);
+  box-shadow: var(--sigvelo-shadow-sm);
   transition:
     box-shadow 150ms ease,
     border-color 150ms ease,
     transform 150ms ease;
 }
 
+.card__header,
+.card__footer {
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.card__header {
+  display: grid;
+  grid-template-rows: auto auto;
+  grid-template-columns: minmax(0, 1fr);
+  align-items: start;
+  margin-block-end: 1rem;
+}
+
+.card__header:has(.card__action) {
+  grid-template-columns: minmax(0, 1fr) auto;
+}
+
+.card__action {
+  grid-row: 1 / span 2;
+  grid-column-start: 2;
+  align-self: start;
+  justify-self: end;
+}
+
+.card__title {
+  font-size: var(--sigvelo-text-lg);
+  font-weight: var(--sigvelo-font-weight-semibold);
+  line-height: var(--sigvelo-leading-tight);
+}
+
+.card__description {
+  color: var(--sigvelo-color-text-muted);
+  font-size: var(--sigvelo-text-sm);
+}
+
+.card__content {
+  display: grid;
+  gap: 1rem;
+}
+
+.card__footer {
+  display: flex;
+  margin-block-start: 1rem;
+}
+
 .card--hover {
   cursor: default;
 }
 
 .card--hover:hover {
-  box-shadow: var(--sigvelo-shadow-mid);
-  border-color: var(--sigvelo-focus-color);
+  box-shadow: var(--sigvelo-shadow-md);
+  border-color: var(--sigvelo-color-focus);
   transform: translateY(-2px);
 }
 
 .card--hover:focus-visible {
   outline: none;
-  border-color: var(--sigvelo-focus-color);
+  border-color: var(--sigvelo-color-focus);
   box-shadow:
-    0 0 0 2px var(--sigvelo-background-color),
-    0 0 0 4px var(--sigvelo-focus-color);
+    0 0 0 2px var(--sigvelo-color-canvas),
+    0 0 0 4px var(--sigvelo-color-focus);
 }

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

@@ -2,8 +2,8 @@
   display: flex;
   flex-direction: column;
   width: 100%;
-  font-family: var(--sigvelo-font-family);
-  color: var(--sigvelo-text-body);
+  font-family: var(--sigvelo-font-sans);
+  color: var(--sigvelo-color-text);
 }
 
 .chain-of-thought__header {
@@ -14,8 +14,8 @@
   padding-inline: 0.75rem;
   background-color: transparent;
   border: none;
-  border-radius: var(--sigvelo-border-radius-sm);
-  color: var(--sigvelo-text-muted);
+  border-radius: var(--sigvelo-radius-sm);
+  color: var(--sigvelo-color-text-muted);
   font-family: inherit;
   font-size: 0.8125rem;
   font-weight: var(--sigvelo-font-weight-semibold);
@@ -26,15 +26,15 @@
 }
 
 .chain-of-thought__header:hover:not([data-disabled]) {
-  background-color: var(--sigvelo-neutral-fill-softer);
-  color: var(--sigvelo-text-body);
+  background-color: var(--sigvelo-color-neutral-bg-subtle);
+  color: var(--sigvelo-color-text);
 }
 
 .chain-of-thought__header:focus-visible {
   outline: none;
   box-shadow:
-    0 0 0 2px var(--sigvelo-background-color),
-    0 0 0 4px var(--sigvelo-focus-color);
+    0 0 0 2px var(--sigvelo-color-canvas),
+    0 0 0 4px var(--sigvelo-color-focus);
 }
 
 .chain-of-thought__header-icon {
@@ -75,7 +75,7 @@
   padding-block: 0.75rem;
   padding-inline: 0.75rem;
   margin-inline-start: 1rem;
-  border-inline-start: var(--sigvelo-border-style) 2px var(--sigvelo-neutral-stroke-softer);
+  border-inline-start: var(--sigvelo-border-style) 2px var(--sigvelo-color-neutral-border-subtle);
   list-style: none;
 }
 
@@ -94,23 +94,24 @@
   width: 1.25rem;
   height: 1.25rem;
   margin-inline-start: -1.625rem;
-  border-radius: var(--sigvelo-border-radius-pill);
-  background-color: var(--sigvelo-paper-color);
-  border: var(--sigvelo-border-style) var(--sigvelo-border-width) var(--sigvelo-neutral-stroke-soft);
-  color: var(--sigvelo-text-muted);
+  border-radius: var(--sigvelo-radius-full);
+  background-color: var(--sigvelo-color-surface);
+  border: var(--sigvelo-border-style) var(--sigvelo-border-width)
+    var(--sigvelo-color-neutral-border-muted);
+  color: var(--sigvelo-color-text-muted);
   flex-shrink: 0;
 }
 
 .chain-of-thought__step--complete .chain-of-thought__step-indicator {
-  background-color: var(--sigvelo-success-fill-mid);
-  border-color: var(--sigvelo-success-fill-mid);
-  color: var(--sigvelo-success-text-on-mid);
+  background-color: var(--sigvelo-color-success-bg);
+  border-color: var(--sigvelo-color-success-bg);
+  color: var(--sigvelo-color-success-text-on-bg);
 }
 
 .chain-of-thought__step--active .chain-of-thought__step-indicator {
-  background-color: var(--sigvelo-primary-fill-softer);
-  border-color: var(--sigvelo-primary-stroke-soft);
-  color: var(--sigvelo-primary-text-colorful);
+  background-color: var(--sigvelo-color-primary-bg-subtle);
+  border-color: var(--sigvelo-color-primary-border-muted);
+  color: var(--sigvelo-color-primary-text);
   animation: chain-of-thought-spin 1.6s linear infinite;
 }
 
@@ -125,16 +126,16 @@
 .chain-of-thought__step-label {
   font-size: 0.8125rem;
   font-weight: var(--sigvelo-font-weight-semibold);
-  color: var(--sigvelo-text-body);
+  color: var(--sigvelo-color-text);
 }
 
 .chain-of-thought__step--pending .chain-of-thought__step-label {
-  color: var(--sigvelo-text-muted);
+  color: var(--sigvelo-color-text-muted);
 }
 
 .chain-of-thought__step-description {
   font-size: 0.75rem;
-  color: var(--sigvelo-text-muted);
+  color: var(--sigvelo-color-text-muted);
   line-height: 1.5;
 }
 
@@ -163,12 +164,12 @@
   align-items: center;
   padding-block: 0.25rem;
   padding-inline: 0.5rem;
-  background-color: var(--sigvelo-neutral-fill-softer);
+  background-color: var(--sigvelo-color-neutral-bg-subtle);
   border: var(--sigvelo-border-style) var(--sigvelo-border-width)
-    var(--sigvelo-neutral-stroke-softer);
-  border-radius: var(--sigvelo-border-radius-pill);
+    var(--sigvelo-color-neutral-border-subtle);
+  border-radius: var(--sigvelo-radius-full);
   font-size: 0.75rem;
-  color: var(--sigvelo-text-body);
+  color: var(--sigvelo-color-text);
   text-decoration: none;
   max-width: 18rem;
   overflow: hidden;
@@ -180,15 +181,15 @@
 }
 
 .chain-of-thought__search-result:hover {
-  background-color: var(--sigvelo-neutral-fill-soft);
-  border-color: var(--sigvelo-neutral-stroke-soft);
+  background-color: var(--sigvelo-color-neutral-bg-muted);
+  border-color: var(--sigvelo-color-neutral-border-muted);
 }
 
 .chain-of-thought__search-result:focus-visible {
   outline: none;
   box-shadow:
-    0 0 0 2px var(--sigvelo-background-color),
-    0 0 0 4px var(--sigvelo-focus-color);
+    0 0 0 2px var(--sigvelo-color-canvas),
+    0 0 0 4px var(--sigvelo-color-focus);
 }
 
 .chain-of-thought__image {
@@ -202,14 +203,27 @@
 .chain-of-thought__image-img {
   width: 100%;
   height: auto;
-  border-radius: var(--sigvelo-border-radius-sm);
+  border-radius: var(--sigvelo-radius-sm);
+  border: var(--sigvelo-border-style) var(--sigvelo-border-width)
+    var(--sigvelo-color-neutral-border-subtle);
+}
+
+.chain-of-thought__image-frame {
+  display: flex;
+  max-height: 22rem;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  padding: 0.75rem;
+  background-color: var(--sigvelo-color-neutral-bg-subtle);
   border: var(--sigvelo-border-style) var(--sigvelo-border-width)
-    var(--sigvelo-neutral-stroke-softer);
+    var(--sigvelo-color-neutral-border-subtle);
+  border-radius: var(--sigvelo-radius-sm);
 }
 
 .chain-of-thought__image-caption {
   font-size: 0.6875rem;
-  color: var(--sigvelo-text-muted);
+  color: var(--sigvelo-color-text-muted);
 }
 
 @keyframes chain-of-thought-spin {