@mcp-b/react-components 0.1.1 → 0.1.3

package/dist/styles/checkbox.css

@@ -4,29 +4,43 @@
   justify-content: center;
   width: 1rem;
   height: 1rem;
-  border: var(--sigvelo-border-style) var(--sigvelo-border-width) var(--sigvelo-neutral-stroke-soft);
-  border-radius: calc(var(--sigvelo-border-radius-md) - 4px);
-  background-color: var(--sigvelo-background-color);
+  flex-shrink: 0;
+  border: var(--sigvelo-border-style) var(--sigvelo-border-width)
+    var(--sigvelo-color-neutral-border-muted);
+  border-radius: calc(var(--sigvelo-radius-md) - 4px);
+  background-color: var(--sigvelo-color-canvas);
+  outline: none;
   cursor: pointer;
   transition:
     background-color 150ms ease,
-    border-color 150ms ease;
+    border-color 150ms ease,
+    box-shadow 150ms ease;
 }
 
 .checkbox:hover:not([data-disabled]) {
-  border-color: var(--sigvelo-primary-fill-mid);
+  border-color: var(--sigvelo-color-primary-bg);
 }
 
 .checkbox: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);
 }
 
 .checkbox[data-checked] {
-  background-color: var(--sigvelo-primary-fill-mid);
-  border-color: var(--sigvelo-primary-fill-mid);
+  background-color: var(--sigvelo-color-primary-bg);
+  border-color: var(--sigvelo-color-primary-bg);
+}
+
+.checkbox:is([aria-invalid="true"], [data-invalid="true"], [data-invalid=""]) {
+  border-color: var(--sigvelo-color-danger-bg);
+}
+
+.checkbox:is([aria-invalid="true"], [data-invalid="true"], [data-invalid=""]):focus-visible {
+  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%);
 }
 
 .checkbox[data-disabled] {
@@ -38,5 +52,5 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  color: var(--sigvelo-primary-text-on-mid);
+  color: var(--sigvelo-color-primary-text-on-bg);
 }

package/dist/styles/code-block.css

@@ -2,11 +2,11 @@
   display: flex;
   flex-direction: column;
   width: 100%;
-  font-family: var(--sigvelo-font-family);
-  background-color: var(--sigvelo-paper-color);
+  font-family: var(--sigvelo-font-sans);
+  background-color: var(--sigvelo-color-surface);
   border: var(--sigvelo-border-style) var(--sigvelo-border-width)
-    var(--sigvelo-neutral-stroke-softer);
-  border-radius: var(--sigvelo-border-radius-md);
+    var(--sigvelo-color-neutral-border-subtle);
+  border-radius: var(--sigvelo-radius-md);
   overflow: hidden;
 }
 
@@ -16,21 +16,24 @@
   gap: 0.5rem;
   padding-block: 0.5rem;
   padding-inline: 0.75rem;
-  background-color: var(--sigvelo-neutral-fill-softer);
+  background-color: var(--sigvelo-color-neutral-bg-subtle);
   border-block-end: var(--sigvelo-border-style) var(--sigvelo-border-width)
-    var(--sigvelo-neutral-stroke-softer);
+    var(--sigvelo-color-neutral-border-subtle);
 }
 
 .code-block__title {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
   font-size: 0.75rem;
   font-weight: var(--sigvelo-font-weight-semibold);
-  color: var(--sigvelo-text-body);
+  color: var(--sigvelo-color-text);
 }
 
 .code-block__filename {
-  font-family: var(--sigvelo-font-family-code);
+  font-family: var(--sigvelo-font-mono);
   font-size: 0.75rem;
-  color: var(--sigvelo-text-muted);
+  color: var(--sigvelo-color-text-muted);
 }
 
 .code-block__actions {
@@ -55,11 +58,11 @@
   margin: 0;
   padding-block: 0.75rem;
   padding-inline: 0.875rem;
-  font-family: var(--sigvelo-font-family-code);
+  font-family: var(--sigvelo-font-mono);
   font-size: 0.8125rem;
   line-height: 1.55;
-  color: var(--sigvelo-text-body);
-  background-color: var(--sigvelo-paper-color);
+  color: var(--sigvelo-color-text);
+  background-color: var(--sigvelo-color-surface);
   overflow-x: auto;
 }
 
@@ -72,30 +75,34 @@
   padding-block: 0.75rem;
   padding-inline: 0.875rem;
   background-color: transparent !important;
-  font-family: var(--sigvelo-font-family-code);
+  font-family: var(--sigvelo-font-mono);
   font-size: 0.8125rem;
   line-height: 1.55;
   overflow-x: auto;
 }
 
+.code-block__content--numbered:is(pre) > code,
 .code-block__content--numbered pre code {
   counter-reset: line;
 }
 
+.code-block__content--numbered:is(pre) > code .line,
 .code-block__content--numbered pre code .line {
+  display: block;
   counter-increment: line;
 }
 
+.code-block__content--numbered:is(pre) > code .line::before,
 .code-block__content--numbered pre code .line::before {
   content: counter(line);
   display: inline-block;
   width: 2rem;
   padding-inline-end: 0.75rem;
   margin-inline-end: 0.75rem;
-  color: var(--sigvelo-text-muted);
+  color: var(--sigvelo-color-text-muted);
   text-align: end;
   border-inline-end: var(--sigvelo-border-style) var(--sigvelo-border-width)
-    var(--sigvelo-neutral-stroke-softer);
+    var(--sigvelo-color-neutral-border-subtle);
 }
 
 @media (forced-colors: active) {

package/dist/styles/collapsible.css

@@ -12,14 +12,15 @@
   width: 100%;
   padding-block: 0.75rem;
   padding-inline: 1rem;
-  font-family: var(--sigvelo-font-family);
+  font-family: var(--sigvelo-font-sans);
   font-size: 0.875rem;
   font-weight: var(--sigvelo-font-weight-semibold);
   text-align: start;
-  color: var(--sigvelo-text-body);
+  color: var(--sigvelo-color-text);
   background-color: transparent;
-  border: var(--sigvelo-border-style) var(--sigvelo-border-width) var(--sigvelo-neutral-stroke-soft);
-  border-radius: var(--sigvelo-border-radius-md);
+  border: var(--sigvelo-border-style) var(--sigvelo-border-width)
+    var(--sigvelo-color-neutral-border-muted);
+  border-radius: var(--sigvelo-radius-md);
   cursor: pointer;
   transition:
     background-color 150ms ease,
@@ -27,14 +28,14 @@
 }
 
 .collapsible__trigger:hover {
-  background-color: var(--sigvelo-neutral-fill-softer);
+  background-color: var(--sigvelo-color-neutral-bg-subtle);
 }
 
 .collapsible__trigger: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);
 }
 
 .collapsible__trigger[data-disabled] {
@@ -64,9 +65,9 @@
 
 .collapsible__panel {
   overflow: hidden;
-  font-family: var(--sigvelo-font-family);
+  font-family: var(--sigvelo-font-sans);
   font-size: 0.875rem;
-  color: var(--sigvelo-text-body);
+  color: var(--sigvelo-color-text);
   transition:
     height 200ms ease,
     opacity 200ms ease;
@@ -88,8 +89,9 @@
 
 .collapsible__panel > * {
   padding: 1rem;
-  background-color: var(--sigvelo-paper-color);
-  border: var(--sigvelo-border-style) var(--sigvelo-border-width) var(--sigvelo-neutral-stroke-soft);
+  background-color: var(--sigvelo-color-surface);
+  border: var(--sigvelo-border-style) var(--sigvelo-border-width)
+    var(--sigvelo-color-neutral-border-muted);
   border-top: none;
-  border-radius: 0 0 var(--sigvelo-border-radius-md) var(--sigvelo-border-radius-md);
+  border-radius: 0 0 var(--sigvelo-radius-md) var(--sigvelo-radius-md);
 }

package/dist/styles/combobox.css

@@ -3,16 +3,16 @@
   min-width: 0;
   padding-block: 0.5rem;
   padding-inline: 0.75rem;
-  font-family: var(--sigvelo-font-family);
+  font-family: var(--sigvelo-font-sans);
   font-size: 0.875rem;
-  color: var(--sigvelo-text-body);
+  color: var(--sigvelo-color-text);
   background-color: transparent;
   border: none;
   outline: none;
 }
 
 .combobox__input::placeholder {
-  color: var(--sigvelo-text-muted);
+  color: var(--sigvelo-color-text-muted);
 }
 
 .combobox__trigger {
@@ -20,7 +20,7 @@
   align-items: center;
   justify-content: center;
   padding: 0.5rem;
-  color: var(--sigvelo-text-muted);
+  color: var(--sigvelo-color-text-muted);
   background-color: transparent;
   border: none;
   cursor: pointer;
@@ -28,7 +28,7 @@
 }
 
 .combobox__trigger:hover {
-  color: var(--sigvelo-text-body);
+  color: var(--sigvelo-color-text);
 }
 
 .combobox__trigger:focus-visible {
@@ -36,7 +36,7 @@
 }
 
 .combobox__trigger[data-popup-open] {
-  color: var(--sigvelo-text-body);
+  color: var(--sigvelo-color-text);
 }
 
 .combobox__clear {
@@ -44,10 +44,10 @@
   align-items: center;
   justify-content: center;
   padding: 0.25rem;
-  color: var(--sigvelo-text-muted);
+  color: var(--sigvelo-color-text-muted);
   background-color: transparent;
   border: none;
-  border-radius: var(--sigvelo-border-radius-sm);
+  border-radius: var(--sigvelo-radius-sm);
   cursor: pointer;
   transition:
     color 150ms ease,
@@ -55,8 +55,8 @@
 }
 
 .combobox__clear:hover {
-  color: var(--sigvelo-text-body);
-  background-color: var(--sigvelo-neutral-fill-softer);
+  color: var(--sigvelo-color-text);
+  background-color: var(--sigvelo-color-neutral-bg-subtle);
 }
 
 .combobox__positioner {
@@ -67,13 +67,14 @@
   min-width: 200px;
   max-height: 300px;
   overflow: auto;
-  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);
   box-shadow:
-    0 10px 15px -3px color-mix(in oklab, var(--sigvelo-text-body), transparent 90%),
-    0 4px 6px -4px color-mix(in oklab, var(--sigvelo-text-body), transparent 90%);
+    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%);
   animation: combobox-popup-enter 150ms ease;
 }
 
@@ -113,10 +114,10 @@
   gap: 0.5rem;
   padding-block: 0.5rem;
   padding-inline: 0.75rem;
-  font-family: var(--sigvelo-font-family);
+  font-family: var(--sigvelo-font-sans);
   font-size: 0.875rem;
-  color: var(--sigvelo-text-body);
-  border-radius: var(--sigvelo-border-radius-sm);
+  color: var(--sigvelo-color-text);
+  border-radius: var(--sigvelo-radius-sm);
   cursor: pointer;
   outline: none;
   transition:
@@ -126,8 +127,8 @@
 
 .combobox__item:hover,
 .combobox__item[data-highlighted] {
-  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);
 }
 
 .combobox__item[data-selected] {
@@ -144,14 +145,14 @@
   align-items: center;
   justify-content: center;
   width: 1rem;
-  color: var(--sigvelo-primary-fill-mid);
+  color: var(--sigvelo-color-primary-bg);
 }
 
 .combobox__empty {
   padding: 1rem;
   text-align: center;
   font-size: 0.875rem;
-  color: var(--sigvelo-text-muted);
+  color: var(--sigvelo-color-text-muted);
 }
 
 .combobox__group {
@@ -159,7 +160,7 @@
 }
 
 .combobox__group + .combobox__group {
-  border-block-start: 1px solid var(--sigvelo-neutral-stroke-soft);
+  border-block-start: 1px solid var(--sigvelo-color-neutral-border-muted);
 }
 
 .combobox__group-label {
@@ -167,5 +168,5 @@
   padding-inline: 0.75rem;
   font-size: 0.75rem;
   font-weight: var(--sigvelo-font-weight-semibold);
-  color: var(--sigvelo-text-muted);
+  color: var(--sigvelo-color-text-muted);
 }

package/dist/styles/commit.css

@@ -2,12 +2,12 @@
   display: flex;
   flex-direction: column;
   width: 100%;
-  font-family: var(--sigvelo-font-family);
-  color: var(--sigvelo-text-body);
-  background-color: var(--sigvelo-paper-color);
+  font-family: var(--sigvelo-font-sans);
+  color: var(--sigvelo-color-text);
+  background-color: var(--sigvelo-color-surface);
   border: var(--sigvelo-border-style) var(--sigvelo-border-width)
-    var(--sigvelo-neutral-stroke-softer);
-  border-radius: var(--sigvelo-border-radius-md);
+    var(--sigvelo-color-neutral-border-subtle);
+  border-radius: var(--sigvelo-radius-md);
   overflow: hidden;
 }
 
@@ -20,7 +20,7 @@
   padding-inline: 0.75rem;
   background-color: transparent;
   border: none;
-  color: var(--sigvelo-text-body);
+  color: var(--sigvelo-color-text);
   font-family: inherit;
   font-size: 0.8125rem;
   text-align: start;
@@ -29,20 +29,20 @@
 }
 
 .commit__header:hover:not([data-disabled]) {
-  background-color: var(--sigvelo-neutral-fill-softer);
+  background-color: var(--sigvelo-color-neutral-bg-subtle);
 }
 
 .commit__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);
 }
 
 .commit__header-icon {
   display: inline-flex;
   flex-shrink: 0;
-  color: var(--sigvelo-text-muted);
+  color: var(--sigvelo-color-text-muted);
   transition: transform 200ms ease;
 }
 
@@ -79,19 +79,39 @@
   flex: 1;
 }
 
+.commit__message {
+  min-width: 0;
+  overflow: hidden;
+  font-weight: var(--sigvelo-font-weight-semibold);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.commit__metadata {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  color: var(--sigvelo-color-text-muted);
+  font-size: 0.75rem;
+}
+
+.commit__separator {
+  color: var(--sigvelo-color-text-muted);
+}
+
 .commit__hash {
-  font-family: var(--sigvelo-font-family-code);
+  font-family: var(--sigvelo-font-mono);
   font-size: 0.75rem;
-  color: var(--sigvelo-text-muted);
+  color: var(--sigvelo-color-text-muted);
   padding-block: 0.0625rem;
   padding-inline: 0.375rem;
-  background-color: var(--sigvelo-neutral-fill-softer);
-  border-radius: var(--sigvelo-border-radius-sm);
+  background-color: var(--sigvelo-color-neutral-bg-subtle);
+  border-radius: var(--sigvelo-radius-sm);
 }
 
 .commit__timestamp {
   font-size: 0.75rem;
-  color: var(--sigvelo-text-muted);
+  color: var(--sigvelo-color-text-muted);
   font-variant-numeric: tabular-nums;
 }
 
@@ -125,7 +145,7 @@
 
 .commit__content-inner {
   border-block-start: var(--sigvelo-border-style) var(--sigvelo-border-width)
-    var(--sigvelo-neutral-stroke-softer);
+    var(--sigvelo-color-neutral-border-subtle);
 }
 
 .commit__files {
@@ -144,7 +164,7 @@
   padding-inline: 0.75rem;
   font-size: 0.8125rem;
   border-block-end: var(--sigvelo-border-style) var(--sigvelo-border-width)
-    var(--sigvelo-neutral-stroke-softer);
+    var(--sigvelo-color-neutral-border-subtle);
 }
 
 .commit__file:last-child {
@@ -159,14 +179,14 @@
 
 .commit__file-icon {
   display: inline-flex;
-  color: var(--sigvelo-text-muted);
+  color: var(--sigvelo-color-text-muted);
   flex-shrink: 0;
 }
 
 .commit__file-path {
-  font-family: var(--sigvelo-font-family-code);
+  font-family: var(--sigvelo-font-mono);
   font-size: 0.75rem;
-  color: var(--sigvelo-text-body);
+  color: var(--sigvelo-color-text);
   flex: 1;
   min-width: 0;
   overflow: hidden;
@@ -175,19 +195,24 @@
 }
 
 .commit__file-additions {
-  font-family: var(--sigvelo-font-family-code);
+  font-family: var(--sigvelo-font-mono);
   font-size: 0.75rem;
-  color: var(--sigvelo-success-text-colorful);
+  color: var(--sigvelo-color-success-text);
   font-variant-numeric: tabular-nums;
 }
 
 .commit__file-deletions {
-  font-family: var(--sigvelo-font-family-code);
+  font-family: var(--sigvelo-font-mono);
   font-size: 0.75rem;
-  color: var(--sigvelo-destructive-text-colorful);
+  color: var(--sigvelo-color-danger-text);
   font-variant-numeric: tabular-nums;
 }
 
+.commit__file-changes {
+  display: inline-flex;
+  gap: 0.375rem;
+}
+
 @media (forced-colors: active) {
   .commit,
   .commit__file {

package/dist/styles/context-menu.css

@@ -10,13 +10,14 @@
 .context-menu__popup {
   min-width: 10rem;
   padding: 0.25rem;
-  font-family: var(--sigvelo-font-family);
-  background-color: var(--sigvelo-background-color);
-  border: var(--sigvelo-border-style) var(--sigvelo-border-width) var(--sigvelo-neutral-stroke-soft);
-  border-radius: var(--sigvelo-border-radius-md);
+  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-text-body), transparent 90%),
-    0 4px 6px -4px color-mix(in oklab, var(--sigvelo-text-body), transparent 90%);
+    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%);
   outline: none;
   transform-origin: var(--transform-origin);
   transition:
@@ -30,7 +31,10 @@
   transform: scale(0.95);
 }
 
-.context-menu__item {
+.context-menu__item,
+.context-menu__checkbox-item,
+.context-menu__radio-item,
+.context-menu__submenu-trigger {
   display: flex;
   align-items: center;
   gap: 0.5rem;
@@ -38,31 +42,81 @@
   padding-inline: 0.75rem;
   font-size: 0.875rem;
   line-height: 1.25;
-  color: var(--sigvelo-text-body);
-  border-radius: var(--sigvelo-border-radius-sm);
+  color: var(--sigvelo-color-text);
+  border-radius: var(--sigvelo-radius-sm);
   cursor: pointer;
   user-select: none;
   outline: none;
   transition: background-color 100ms ease;
 }
 
-.context-menu__item[data-highlighted] {
-  background-color: var(--sigvelo-neutral-fill-softer);
-  color: var(--sigvelo-neutral-text-on-soft);
+.context-menu__item--inset,
+.context-menu__label--inset {
+  padding-inline-start: 2rem;
 }
 
-.context-menu__item:focus-visible {
+.context-menu__indicator {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  inline-size: 1rem;
+  flex: 0 0 1rem;
+}
+
+.context-menu__submenu-icon {
+  margin-inline-start: auto;
+  flex: 0 0 auto;
+}
+
+.context-menu__item[data-highlighted],
+.context-menu__checkbox-item[data-highlighted],
+.context-menu__radio-item[data-highlighted],
+.context-menu__submenu-trigger[data-highlighted] {
+  background-color: var(--sigvelo-color-neutral-bg-subtle);
+  color: var(--sigvelo-color-neutral-text-on-subtle);
+}
+
+.context-menu__item[data-variant="destructive"] {
+  color: var(--sigvelo-color-danger-text);
+}
+
+.context-menu__item[data-variant="destructive"][data-highlighted] {
+  background-color: var(--sigvelo-color-danger-bg-subtle);
+  color: var(--sigvelo-color-danger-text-on-subtle);
+}
+
+.context-menu__item:focus-visible,
+.context-menu__checkbox-item:focus-visible,
+.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-focus-color);
+  box-shadow: inset 0 0 0 var(--sigvelo-focus-width) var(--sigvelo-color-focus);
 }
 
-.context-menu__item[data-disabled] {
+.context-menu__item[data-disabled],
+.context-menu__checkbox-item[data-disabled],
+.context-menu__radio-item[data-disabled],
+.context-menu__submenu-trigger[data-disabled] {
   opacity: 0.5;
   pointer-events: none;
 }
 
+.context-menu__label {
+  padding-block: 0.5rem 0.25rem;
+  padding-inline: 0.75rem;
+  color: var(--sigvelo-color-text-muted);
+  font-size: 0.75rem;
+  font-weight: var(--sigvelo-font-weight-semibold);
+}
+
+.context-menu__shortcut {
+  margin-inline-start: auto;
+  color: var(--sigvelo-color-text-muted);
+  font-size: 0.75rem;
+}
+
 .context-menu__separator {
   height: 1px;
   margin: 0.25rem 0;
-  background-color: var(--sigvelo-neutral-stroke-soft);
+  background-color: var(--sigvelo-color-neutral-border-muted);
 }