@fusion.dev/helix-styles 0.228.0 → 0.229.0

package/dist/base.css

@@ -83,33 +83,37 @@ helix-card > [slot="media"] {
     color var(--helix-duration-fast) var(--helix-easing-standard),
     text-decoration-color var(--helix-duration-fast) var(--helix-easing-standard),
     text-decoration-thickness var(--helix-duration-fast) var(--helix-easing-standard);
-}
+}@media (hover: hover) {
 :where([data-prose] a):hover,
 [data-link]:hover {
   color: var(--helix-color-primary-hover);
   text-decoration-color: currentColor;
   text-decoration-thickness: 2px;
 }
+}
 [data-link="subtle"],
 [data-link="quiet"] {
   color: var(--helix-color-foreground-muted);
-}
+}@media (hover: hover) {
 [data-link="subtle"]:hover {
   color: var(--helix-color-primary);
 }
+}
 [data-link="quiet"] {
   text-decoration: none;
-}
+}@media (hover: hover) {
 [data-link="quiet"]:hover {
   color: var(--helix-color-foreground);
   text-decoration: none;
 }
+}
 [data-link-underline="hover"] {
   text-decoration: none;
-}
+}@media (hover: hover) {
 [data-link-underline="hover"]:hover {
   text-decoration: underline;
 }
+}
 [data-link-size="xs"] {
   font-size: var(--helix-text-xs);
 }
@@ -243,16 +247,16 @@ helix-text[tone="warning"][emphasis="muted"] {
   --_button-ink: color-mix(in oklab, var(--_button-tone) 78%, var(--helix-color-foreground));
   --_button-on-tone: var(--helix-color-background);
   --_button-tone: var(--helix-color-foreground);
-  --_button-tone-hover: color-mix(
-    in oklab,
-    var(--helix-color-foreground) 86%,
-    var(--helix-color-background)
+  --_button-tone-hover: light-dark(
+    color-mix(in oklab, var(--helix-color-foreground) 72%, var(--helix-color-background)),
+    color-mix(in oklab, var(--helix-color-foreground) 90%, var(--helix-color-background))
   );
-  align-items: center;
-  background-color: var(
-    --button-background-color,
-    color-mix(in oklab, var(--_button-tone) 6%, transparent)
+  --_button-fill-press: light-dark(
+    color-mix(in oklab, var(--helix-color-foreground) 60%, var(--helix-color-background)),
+    color-mix(in oklab, var(--helix-color-foreground) 80%, var(--helix-color-background))
   );
+  align-items: center;
+  background-color: var(--button-background-color, transparent);
   block-size: var(--button-size, var(--helix-size-control));
   border: var(--helix-border-thin) solid var(--_button-edge);
   border-radius: var(--button-radius, var(--helix-radii-sm));
@@ -278,6 +282,7 @@ helix-text[tone="warning"][emphasis="muted"] {
   --_button-edge: var(--helix-color-primary);
   --_button-fill: var(--helix-color-primary-surface);
   --_button-fill-hover: var(--helix-color-primary-surface-hover);
+  --_button-fill-press: var(--helix-color-primary-surface-active);
   --_button-on-tone: var(--helix-color-foreground-on-primary);
   --_button-tone: var(--helix-color-primary);
   --_button-tone-hover: var(--helix-color-primary-hover);
@@ -286,6 +291,7 @@ helix-text[tone="warning"][emphasis="muted"] {
   --_button-edge: var(--helix-color-accent);
   --_button-fill: var(--helix-color-accent-surface);
   --_button-fill-hover: var(--helix-color-accent-surface-hover);
+  --_button-fill-press: oklch(from var(--helix-color-accent-surface-hover) calc(l - 0.05) c h);
   --_button-on-tone: var(--helix-color-foreground-on-accent);
   --_button-tone: var(--helix-color-accent);
   --_button-tone-hover: var(--helix-color-accent-hover);
@@ -294,6 +300,7 @@ helix-text[tone="warning"][emphasis="muted"] {
   --_button-edge: var(--helix-color-danger);
   --_button-fill: var(--helix-color-danger-surface);
   --_button-fill-hover: var(--helix-color-danger-surface-hover);
+  --_button-fill-press: oklch(from var(--helix-color-danger-surface-hover) calc(l - 0.05) c h);
   --_button-on-tone: var(--helix-color-foreground-on-status);
   --_button-tone: var(--helix-color-danger);
   --_button-tone-hover: color-mix(
@@ -306,6 +313,7 @@ helix-text[tone="warning"][emphasis="muted"] {
   --_button-edge: var(--helix-color-info);
   --_button-fill: var(--helix-color-info-surface);
   --_button-fill-hover: var(--helix-color-info-surface-hover);
+  --_button-fill-press: oklch(from var(--helix-color-info-surface-hover) calc(l - 0.05) c h);
   --_button-on-tone: var(--helix-color-foreground-on-status);
   --_button-tone: var(--helix-color-info);
   --_button-tone-hover: color-mix(
@@ -318,6 +326,7 @@ helix-text[tone="warning"][emphasis="muted"] {
   --_button-edge: var(--helix-color-success);
   --_button-fill: var(--helix-color-success-surface);
   --_button-fill-hover: var(--helix-color-success-surface-hover);
+  --_button-fill-press: oklch(from var(--helix-color-success-surface-hover) calc(l - 0.05) c h);
   --_button-on-tone: var(--helix-color-foreground-on-status);
   --_button-tone: var(--helix-color-success);
   --_button-tone-hover: color-mix(
@@ -330,6 +339,7 @@ helix-text[tone="warning"][emphasis="muted"] {
   --_button-edge: var(--helix-color-warning);
   --_button-fill: var(--helix-color-warning-surface);
   --_button-fill-hover: var(--helix-color-warning-surface-hover);
+  --_button-fill-press: oklch(from var(--helix-color-warning-surface-hover) calc(l - 0.05) c h);
   --_button-on-tone: var(--helix-color-foreground-on-status);
   --_button-tone: var(--helix-color-warning);
   --_button-tone-hover: color-mix(
@@ -337,13 +347,20 @@ helix-text[tone="warning"][emphasis="muted"] {
     var(--helix-color-warning) 86%,
     var(--helix-color-foreground)
   );
-}
+}@media (hover: hover) {
 [data-button]:not(:disabled):hover {
   background-color: var(
     --button-background-color-hover,
     var(--button-background-color, color-mix(in oklab, var(--_button-tone) 12%, transparent))
   );
 }
+}
+[data-button]:not(:disabled):active {
+  background-color: var(
+    --button-background-color,
+    color-mix(in oklab, var(--_button-tone) 16%, transparent)
+  );
+}
 [data-button][data-button-width="full"] {
   display: flex;
   inline-size: 100%;
@@ -352,7 +369,7 @@ helix-text[tone="warning"][emphasis="muted"] {
   background-color: var(--button-background-color, var(--_button-fill));
   border-color: transparent;
   color: var(--button-foreground-color, var(--_button-on-tone));
-}
+}@media (hover: hover) {
 [data-button="solid"]:not(:disabled):hover {
   background-color: var(
     --button-background-color-hover,
@@ -360,6 +377,7 @@ helix-text[tone="warning"][emphasis="muted"] {
   );
   border-color: transparent;
 }
+}
 [data-button="subtle"] {
   background-color: var(
     --button-background-color,
@@ -367,7 +385,7 @@ helix-text[tone="warning"][emphasis="muted"] {
   );
   border-color: transparent;
   color: var(--button-foreground-color, var(--_button-ink));
-}
+}@media (hover: hover) {
 [data-button="subtle"]:not(:disabled):hover {
   background-color: var(
     --button-background-color-hover,
@@ -375,6 +393,7 @@ helix-text[tone="warning"][emphasis="muted"] {
   );
   border-color: transparent;
 }
+}
 helix-button-group:not([variant="spaced"], [orientation="vertical"])
   > :not(:first-child)
   [data-button],
@@ -427,7 +446,7 @@ helix-button-group[orientation="vertical"]:not([variant="spaced"]) > button:not(
   background-color: var(--button-background-color, transparent);
   border-color: transparent;
   color: var(--button-foreground-color, var(--_button-tone));
-}
+}@media (hover: hover) {
 [data-button="ghost"]:not(:disabled):hover {
   background-color: var(
     --button-background-color-hover,
@@ -436,25 +455,40 @@ helix-button-group[orientation="vertical"]:not([variant="spaced"]) > button:not(
   border-color: transparent;
   color: var(--button-foreground-color, var(--_button-ink));
 }
-[data-density="sm"] helix-checkbox::part(label) {
-  font-size: var(--helix-text-xs);
 }
-[data-density="lg"] helix-checkbox::part(label) {
-  font-size: var(--helix-text-md);
+[data-button="solid"]:not(:disabled):active {
+  background-color: var(--button-background-color, var(--_button-fill-press));
+}
+[data-button="subtle"]:not(:disabled):active {
+  background-color: var(
+    --button-background-color,
+    color-mix(in oklab, var(--_button-tone) 30%, transparent)
+  );
+}
+[data-button="ghost"]:not(:disabled):active {
+  background-color: var(
+    --button-background-color,
+    color-mix(in oklab, var(--_button-tone) 16%, transparent)
+  );
 }
 [data-button][aria-disabled="true"] {
   cursor: not-allowed;
-  opacity: 0.5;
+  opacity: var(--helix-opacity-disabled);
 }
 [data-density] {
-  --helix-size-control-tight: calc(var(--helix-size-control) * 0.8);
+  --helix-size-control-tight: round(calc(var(--helix-size-control) * 0.8), 1px);
   --helix-size-control-loose: calc(var(--helix-size-control) * 1.2);
   --helix-size-icon-tight: calc(var(--helix-size-icon) * 0.8);
   --helix-size-icon-loose: calc(var(--helix-size-icon) * 1.2);
   --helix-size-checkbox-tight: calc(var(--helix-size-checkbox) * 0.8);
   --helix-size-checkbox-loose: calc(var(--helix-size-checkbox) * 1.2);
-  --helix-text-control: calc(var(--helix-text-sm) * var(--helix-density, 1));
+}
+[data-density] {
+  --helix-text-control: calc(var(--helix-text-control-md) * var(--helix-density, 1));
   --helix-space-control: calc(var(--helix-space-md) * var(--helix-density, 1));
+  --helix-text-field: calc(var(--helix-text-md) * var(--helix-density, 1));
+  --helix-text-field-label: calc(var(--helix-text-sm) * var(--helix-density, 1));
+  --helix-space-field: calc(var(--helix-space-sm) * var(--helix-density, 1));
   --helix-size-checkbox: calc(var(--helix-size-checkbox-md) * var(--helix-density, 1));
   --helix-size-icon: calc(var(--helix-size-icon-md) * var(--helix-density, 1));
   --helix-size-control: calc(var(--helix-size-control-md) * var(--helix-density, 1));
@@ -462,14 +496,11 @@ helix-button-group[orientation="vertical"]:not([variant="spaced"]) > button:not(
   --helix-size-tag: calc(var(--helix-size-tag-md) * var(--helix-density, 1));
 }
 [data-density="sm"] {
-  --helix-size-control-tight: calc(var(--helix-size-control) * 0.8);
-  --helix-size-control-loose: calc(var(--helix-size-control) * 1.2);
-  --helix-size-icon-tight: calc(var(--helix-size-icon) * 0.8);
-  --helix-size-icon-loose: calc(var(--helix-size-icon) * 1.2);
-  --helix-size-checkbox-tight: calc(var(--helix-size-checkbox) * 0.8);
-  --helix-size-checkbox-loose: calc(var(--helix-size-checkbox) * 1.2);
-  --helix-text-control: var(--helix-text-xs);
+  --helix-text-control: var(--helix-text-control-sm);
   --helix-space-control: var(--helix-space-sm);
+  --helix-text-field: var(--helix-text-sm);
+  --helix-text-field-label: var(--helix-text-xs);
+  --helix-space-field: var(--helix-space-xs);
   --helix-size-checkbox: var(--helix-size-checkbox-sm);
   --helix-size-icon: var(--helix-size-icon-sm);
   --helix-size-control: var(--helix-size-control-sm);
@@ -477,14 +508,11 @@ helix-button-group[orientation="vertical"]:not([variant="spaced"]) > button:not(
   --helix-size-tag: var(--helix-size-tag-sm);
 }
 [data-density="md"] {
-  --helix-size-control-tight: calc(var(--helix-size-control) * 0.8);
-  --helix-size-control-loose: calc(var(--helix-size-control) * 1.2);
-  --helix-size-icon-tight: calc(var(--helix-size-icon) * 0.8);
-  --helix-size-icon-loose: calc(var(--helix-size-icon) * 1.2);
-  --helix-size-checkbox-tight: calc(var(--helix-size-checkbox) * 0.8);
-  --helix-size-checkbox-loose: calc(var(--helix-size-checkbox) * 1.2);
-  --helix-text-control: var(--helix-text-sm);
+  --helix-text-control: var(--helix-text-control-md);
   --helix-space-control: var(--helix-space-md);
+  --helix-text-field: var(--helix-text-md);
+  --helix-text-field-label: var(--helix-text-sm);
+  --helix-space-field: var(--helix-space-sm);
   --helix-size-checkbox: var(--helix-size-checkbox-md);
   --helix-size-icon: var(--helix-size-icon-md);
   --helix-size-control: var(--helix-size-control-md);
@@ -492,14 +520,11 @@ helix-button-group[orientation="vertical"]:not([variant="spaced"]) > button:not(
   --helix-size-tag: var(--helix-size-tag-md);
 }
 [data-density="lg"] {
-  --helix-size-control-tight: calc(var(--helix-size-control) * 0.8);
-  --helix-size-control-loose: calc(var(--helix-size-control) * 1.2);
-  --helix-size-icon-tight: calc(var(--helix-size-icon) * 0.8);
-  --helix-size-icon-loose: calc(var(--helix-size-icon) * 1.2);
-  --helix-size-checkbox-tight: calc(var(--helix-size-checkbox) * 0.8);
-  --helix-size-checkbox-loose: calc(var(--helix-size-checkbox) * 1.2);
-  --helix-text-control: var(--helix-text-md);
+  --helix-text-control: var(--helix-text-control-lg);
   --helix-space-control: var(--helix-space-lg);
+  --helix-text-field: var(--helix-text-md);
+  --helix-text-field-label: var(--helix-text-sm);
+  --helix-space-field: var(--helix-space-md);
   --helix-size-checkbox: var(--helix-size-checkbox-lg);
   --helix-size-icon: var(--helix-size-icon-lg);
   --helix-size-control: var(--helix-size-control-lg);
@@ -517,8 +542,11 @@ helix-toggle::part(item) {
   display: inline-flex;
   flex: 1 1 auto;
   font-family: var(--helix-font-sans);
-  font-size: var(--helix-text-sm);
+  font-size: var(--helix-text-control);
   font-weight: var(--helix-weight-medium);
+  min-inline-size: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
   justify-content: center;
   padding-inline: var(--toggle-item-padding-inline, var(--helix-space-sm));
   text-decoration: none;
@@ -527,14 +555,19 @@ helix-toggle::part(item) {
     background-color var(--helix-duration-fast) var(--helix-easing-standard),
     color var(--helix-duration-fast) var(--helix-easing-standard);
   white-space: nowrap;
-}
+}@media (hover: hover) {
 helix-toggle:not([disabled])::part(item):hover {
   background-color: color-mix(in oklab, var(--helix-color-foreground) 5%, transparent);
   color: var(--helix-color-foreground);
 }
+}@media (hover: hover) {
 helix-toggle-group helix-toggle::part(item):hover {
   background-color: transparent;
 }
+}
+helix-toggle:not([disabled])::part(item):active {
+  background-color: var(--helix-color-press);
+}
 helix-toggle:state(selected)::part(item) {
   background-color: transparent;
   color: var(--toggle-item-color-selected, var(--helix-color-foreground));
@@ -542,9 +575,16 @@ helix-toggle:state(selected)::part(item) {
 helix-toggle:state(pressed)::part(item) {
   color: var(--toggle-item-color-selected, var(--helix-color-foreground));
 }
+@media (forced-colors: active) {
+  helix-toggle:state(selected)::part(item),
+  helix-toggle:state(pressed)::part(item) {
+    color: HighlightText;
+    forced-color-adjust: none;
+  }
+}
 helix-toggle[disabled]::part(item) {
   cursor: not-allowed;
-  opacity: 0.5;
+  opacity: var(--helix-opacity-disabled);
 }
 :where([data-navigation-item], helix-navigation a) {
   align-items: center;
@@ -570,12 +610,29 @@ helix-toggle[disabled]::part(item) {
 :where(helix-navigation[orientation="vertical"]) :where([data-navigation-item], a) {
   justify-content: start;
 }
+:where(helix-navigation:not([orientation="vertical"])) :where([data-navigation-item], a) {
+  position: relative;
+}
+:where(helix-navigation:not([orientation="vertical"])) :where([data-navigation-item], a)::after {
+  content: "";
+  inset-block: calc((var(--helix-size-target) - 100%) / -2);
+  inset-inline: 0;
+  position: absolute;
+}
+@media (pointer: coarse) {
+  :where(helix-navigation[orientation="vertical"]) :where([data-navigation-item], a) {
+    min-block-size: var(--helix-size-target);
+  }
+}
 :where(helix-navigation[variant="segmented"]) :where([data-navigation-item], a) {
   min-block-size: 0;
 }
 :where(helix-navigation[orientation="vertical"]) :where(li) > :where([data-navigation-item], a) {
   display: flex;
 }
+:where([data-navigation-item], helix-navigation a):active {
+  background-color: var(--helix-color-press);
+}@media (hover: hover) {
 :where([data-navigation-item], helix-navigation a):hover {
   background-color: var(
     --navigation-item-hover-background-color,
@@ -583,6 +640,7 @@ helix-toggle[disabled]::part(item) {
   );
   color: var(--navigation-item-hover-color, var(--helix-color-foreground));
 }
+}
 :where(helix-outline) :where(ul, ol) {
   list-style: none;
   margin: 0;
@@ -611,7 +669,7 @@ helix-toggle[disabled]::part(item) {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-}
+}@media (hover: hover) {
 :where(helix-outline) :where(li) > :where(a):hover {
   background-color: var(
     --outline-link-hover-background-color,
@@ -619,6 +677,7 @@ helix-toggle[disabled]::part(item) {
   );
   color: var(--outline-link-hover-color, var(--helix-color-foreground));
 }
+}
 :where(helix-outline) :where(li) > :where(a[aria-current]) {
   color: var(--outline-link-current-color, var(--helix-color-foreground));
   font-weight: var(--outline-link-current-weight, var(--helix-weight-semibold));
@@ -701,13 +760,15 @@ helix-toggle[disabled]::part(item) {
   font-size: var(--helix-text-sm);
   font-weight: var(--helix-weight-regular);
   margin: var(--helix-space-none);
-}
+}@media (hover: hover) {
 [data-megamenu-group] :where([data-navigation-item], a):hover {
   background-color: transparent;
 }
+}@media (hover: hover) {
 [data-megamenu-item]:hover > :where(span, p) {
   color: var(--helix-color-foreground);
 }
+}
 [data-megamenu-item]:not(:has(> :where(helix-icon, img, svg)))::before {
   align-self: center;
   background-color: transparent;
@@ -752,10 +813,11 @@ helix-toggle[disabled]::part(item) {
   display: block;
   text-decoration: none;
   transition: background-color var(--helix-duration-fast) var(--helix-easing-standard);
-}
+}@media (hover: hover) {
 :where([data-list-item]):hover {
   background-color: color-mix(in oklab, var(--helix-color-foreground) 5%, transparent);
 }
+}
 :where([data-list-item])[aria-current] {
   background-color: color-mix(in oklab, var(--helix-color-foreground) 7%, transparent);
   font-weight: var(--helix-weight-medium);
@@ -796,18 +858,19 @@ helix-toggle[disabled]::part(item) {
   box-shadow: none;
 }
 :where([data-card]) {
-  border-radius: var(--card-radius, var(--helix-radii-lg));
+  border-radius: var(--card-radius, var(--helix-radii-md));
   color: inherit;
   display: block;
   outline: var(--helix-border-thin) solid transparent;
   outline-offset: 0;
   text-decoration: none;
   transition: outline-color var(--helix-duration-fast) var(--helix-easing-standard);
-}
+}@media (hover: hover) {
 :where([data-card]):hover {
   --card-border-color: var(--helix-color-primary);
   outline-color: var(--helix-color-primary);
 }
+}
 :where([data-card])[aria-current] {
   --card-border-color: var(--helix-color-primary);
 }

package/dist/elements.css

@@ -503,7 +503,7 @@ helix-table:not(:defined) > helix-table-row > helix-table-cell {
   border-block-end: var(--helix-border-thin) solid var(--helix-color-border);
   box-sizing: border-box;
   display: flex;
-  font-size: var(--helix-text-sm);
+  font-size: var(--helix-text-control);
   min-inline-size: 0;
   padding-inline: var(--helix-space-none) var(--helix-space-md);
 }
@@ -518,9 +518,14 @@ helix-table:not(:defined) > helix-table-column::part(column) {
   padding: 0;
 }
 helix-table:not(:defined) > helix-table-row > helix-table-cell {
+  font-variant-numeric: tabular-nums;
   min-block-size: var(--helix-size-control);
   overflow-wrap: anywhere;
-  padding-block: var(--helix-space-xs);
+  padding-block: calc(var(--helix-space-control) * 0.5);
+}
+helix-table:not(:defined) > helix-table-column:last-of-type,
+helix-table:not(:defined) > helix-table-row > helix-table-cell:last-child {
+  padding-inline-end: var(--helix-space-none);
 }
 helix-table:not(:defined) > helix-table-row > helix-table-cell[header] {
   font-weight: var(--helix-weight-medium);
@@ -551,13 +556,16 @@ helix-data-table:not(:defined):has(> helix-table-row) > helix-table-column:not([
   color: var(--data-table-heading-color, var(--helix-color-foreground-muted));
   display: flex;
   font-family: var(--helix-font-sans);
-  font-size: var(--data-table-text, var(--helix-text-sm));
+  font-size: var(--data-table-text, var(--helix-text-control));
   font-weight: var(--helix-weight-semibold);
   min-block-size: var(--helix-size-control-loose);
   min-inline-size: 0;
   padding-block: var(--data-table-padding-block, var(--helix-space-none));
   padding-inline: var(--data-table-padding-inline, var(--helix-space-none) var(--helix-space-md));
 }
+helix-data-table:not(:defined):has(> helix-table-row) > helix-table-column:last-of-type {
+  padding-inline: var(--data-table-padding-inline, var(--helix-space-none));
+}
 helix-data-table:not(:defined):has(> helix-table-row) > helix-table-column[text-align="center"] {
   justify-content: center;
 }
@@ -579,7 +587,8 @@ helix-data-table > helix-table-row > helix-table-cell {
   color: var(--data-table-color, var(--helix-color-foreground));
   display: block;
   font-family: var(--helix-font-sans);
-  font-size: var(--data-table-text, var(--helix-text-sm));
+  font-size: var(--data-table-text, var(--helix-text-control));
+  font-variant-numeric: tabular-nums;
   font-weight: inherit;
   min-block-size: auto;
   min-inline-size: auto;
@@ -587,6 +596,9 @@ helix-data-table > helix-table-row > helix-table-cell {
   padding-block: var(--data-table-padding-block, var(--helix-space-sm));
   padding-inline: var(--data-table-padding-inline, var(--helix-space-none) var(--helix-space-md));
 }
+helix-data-table > helix-table-row > helix-table-cell:last-child {
+  padding-inline: var(--data-table-padding-inline, var(--helix-space-none));
+}
 helix-data-table > helix-table-row:last-of-type > helix-table-cell {
   border-block-end-color: transparent;
 }

package/dist/primitives.css

@@ -3,7 +3,7 @@
 [data-helix-theme] {
   --_helix-unset: initial;
   --_helix-seed-brand: var(--helix-seed-brand, var(--_helix-unset));
-  --_helix-series-origin: var(--helix-seed-brand, oklch(0.539 0.19 258));
+  --_helix-series-origin: var(--helix-seed-brand, oklch(0.539 0.19 270));
   --helix-seed-accent-hue: 0;
   --_helix-accent-lightness: var(--helix-seed-accent-lightness, l);
   --_helix-seed-accent: var(
@@ -24,6 +24,7 @@
   --_helix-neutral-50: oklch(0.985 var(--_helix-neutral-cast));
   --_helix-neutral-100: oklch(0.97 var(--_helix-neutral-cast));
   --_helix-neutral-200: oklch(0.96 var(--_helix-neutral-cast));
+  --_helix-neutral-225: oklch(0.94 var(--_helix-neutral-cast));
   --_helix-neutral-300: oklch(0.91 var(--_helix-neutral-cast));
   --_helix-neutral-400: oklch(0.71 var(--_helix-neutral-cast));
   --_helix-neutral-450: oklch(0.67 var(--_helix-neutral-cast));
@@ -34,6 +35,7 @@
   --_helix-neutral-800: oklch(0.21 var(--_helix-neutral-cast));
   --_helix-neutral-900: oklch(0.182 var(--_helix-neutral-cast));
   --_helix-neutral-950: oklch(0.15 var(--_helix-neutral-cast));
+  --_helix-neutral-925: oklch(0.154 var(--_helix-neutral-cast));
   --_helix-series-hue-1: 0;
   --_helix-series-hue-2: 135;
   --_helix-series-hue-3: 270;
@@ -45,6 +47,7 @@
   --_helix-brand-500: var(--_helix-seed-brand);
   --_helix-brand-600: oklch(from var(--_helix-seed-brand) calc(l - 0.05) c h);
   --_helix-brand-700: oklch(from var(--_helix-seed-brand) calc(l - 0.1) c h);
+  --_helix-brand-800: oklch(from var(--_helix-brand-700) calc(l - 0.05) c h);
   --_helix-brand-400: oklch(from var(--_helix-seed-brand) calc(l + 0.13) c h);
   --_helix-brand-300: oklch(from var(--_helix-seed-brand) calc(l + 0.18) c h);
   --_helix-brand-200: oklch(from var(--_helix-seed-brand) calc(l + 0.23) c h);
@@ -52,7 +55,12 @@
   --_helix-brand-900: oklch(from var(--_helix-seed-brand) 0.28 calc(c * 0.5) h);
   --_helix-brand-quiet-500: oklch(from var(--_helix-brand-500) l calc(c * 0.5) h);
   --_helix-brand-quiet-400: oklch(from var(--_helix-brand-400) l calc(c * 0.5) h);
-  --_helix-brand-on: oklch(from var(--_helix-seed-brand) 1 0 0);
+  --_helix-brand-on: oklch(from var(--_helix-seed-brand) clamp(0, (0.68 - l) * 1000, 1) 0 0);
+  --_helix-brand-wash: color-mix(
+    in oklab,
+    light-dark(var(--_helix-brand-500), var(--_helix-brand-400)) 20%,
+    transparent
+  );
   --_helix-ink-500: var(--_helix-neutral-800);
   --_helix-ink-600: oklch(from var(--_helix-ink-500) calc(l - 0.05) c h);
   --_helix-ink-700: oklch(from var(--_helix-ink-500) calc(l - 0.1) c h);
@@ -62,13 +70,19 @@
   --_helix-ink-200: var(--_helix-neutral-0);
   --_helix-ink-50: oklch(0.95 var(--_helix-neutral-cast));
   --_helix-ink-900: oklch(0.28 var(--_helix-neutral-cast));
+  --_helix-ink-surface-hover: oklch(from var(--_helix-ink-500) calc(l + 0.09) c h);
+  --_helix-ink-surface-hover-dark: oklch(from var(--_helix-ink-400) calc(l - 0.09) c h);
+  --_helix-ink-surface-active: oklch(from var(--_helix-ink-500) calc(l + 0.16) c h);
+  --_helix-ink-surface-active-dark: oklch(from var(--_helix-ink-400) calc(l - 0.17) c h);
   --_helix-accent-500: var(--_helix-seed-accent);
   --_helix-accent-600: oklch(from var(--_helix-seed-accent) calc(l - 0.05) c h);
   --_helix-accent-700: oklch(from var(--_helix-seed-accent) calc(l - 0.1) c h);
   --_helix-accent-400: oklch(from var(--_helix-seed-accent) calc(l + 0.13) c h);
+  --_helix-accent-300: oklch(from var(--_helix-seed-accent) calc(l + 0.18) c h);
+  --_helix-accent-200: oklch(from var(--_helix-seed-accent) calc(l + 0.23) c h);
   --_helix-accent-50: oklch(from var(--_helix-seed-accent) 0.95 calc(c * 0.25) h);
   --_helix-accent-900: oklch(from var(--_helix-seed-accent) 0.28 calc(c * 0.5) h);
-  --_helix-accent-on: oklch(from var(--_helix-seed-accent) 1 0 0);
+  --_helix-accent-on: oklch(from var(--_helix-seed-accent) clamp(0, (0.68 - l) * 1000, 1) 0 0);
   --_helix-accent-quiet-500: oklch(from var(--_helix-accent-500) l calc(c * 0.5) h);
   --_helix-accent-quiet-400: oklch(from var(--_helix-accent-400) l calc(c * 0.5) h);
   --_helix-info-500: oklch(0.58 0.16 245);

package/dist/tokens.css

@@ -36,32 +36,48 @@
   }
 }
 :root {
+  --_helix-size-target: 1.5rem;
   --_helix-text-field-min: 0px;
+  --_helix-text-control-sm: var(--helix-text-xs);
+  --_helix-text-control-md: var(--helix-text-sm);
+  --_helix-text-control-lg: var(--helix-text-md);
 }
 @media (pointer: coarse) {
   :root {
+    --_helix-size-target: 2.75rem;
     --_helix-text-field-min: 16px;
+    --_helix-text-control-sm: var(--helix-text-sm);
+    --_helix-text-control-md: var(--helix-text-md);
   }
 }
 :root,
 [data-helix-theme] {
   --helix-color-background: light-dark(var(--_helix-neutral-0), var(--_helix-neutral-1000));
-  --helix-color-surface: light-dark(var(--_helix-neutral-50), var(--_helix-neutral-900));
+  --helix-color-surface: light-dark(var(--_helix-neutral-50), var(--_helix-neutral-925));
   --helix-color-surface-raised: light-dark(var(--_helix-neutral-100), var(--_helix-neutral-800));
   --helix-color-surface-overlay: light-dark(var(--_helix-neutral-0), var(--_helix-neutral-800));
-  --helix-color-surface-sunken: light-dark(var(--_helix-neutral-200), var(--_helix-neutral-950));
+  --helix-color-surface-sunken: light-dark(var(--_helix-neutral-225), var(--_helix-neutral-900));
   --helix-color-well: color-mix(in oklab, var(--helix-color-foreground) 5%, transparent);
   --helix-color-hover: light-dark(
     color-mix(in oklab, var(--helix-color-foreground) 8%, transparent),
     color-mix(in oklab, var(--helix-color-foreground) 12%, transparent)
   );
+  --helix-color-primary-wash: var(
+    --_helix-brand-wash,
+    color-mix(in oklab, var(--helix-color-primary) 14%, transparent)
+  );
+  --helix-color-press: light-dark(
+    color-mix(in oklab, var(--helix-color-foreground) 16%, transparent),
+    color-mix(in oklab, var(--helix-color-foreground) 20%, transparent)
+  );
+  --helix-color-selected: color-mix(in oklab, var(--helix-color-foreground) 14%, transparent);
   --helix-color-overlay: light-dark(
     color-mix(in oklab, var(--_helix-neutral-950) 40%, transparent),
     color-mix(in oklab, var(--_helix-neutral-950) 64%, transparent)
   );
   --helix-color-foreground: light-dark(var(--_helix-neutral-1000), var(--_helix-neutral-0));
   --helix-color-foreground-muted: light-dark(var(--_helix-neutral-600), var(--_helix-neutral-400));
-  --helix-color-foreground-subtle: light-dark(var(--_helix-neutral-550), var(--_helix-neutral-450));
+  --helix-color-foreground-subtle: light-dark(var(--_helix-neutral-500), var(--_helix-neutral-550));
   --helix-color-foreground-on-primary: var(--_helix-brand-on, var(--helix-color-background));
   --helix-color-foreground-on-accent: var(--_helix-accent-on, var(--helix-color-background));
   --helix-color-foreground-on-status: var(--_helix-neutral-0);
@@ -87,7 +103,7 @@
   );
   --helix-color-primary-subtle: light-dark(
     var(--_helix-brand-50, var(--_helix-ink-50)),
-    var(--_helix-brand-900, var(--_helix-ink-900))
+    oklch(from var(--_helix-brand-900, var(--_helix-ink-900)) l calc(c * 0.5) h)
   );
   --helix-color-accent: light-dark(
     var(--_helix-accent-500, var(--_helix-ink-500)),
@@ -95,15 +111,15 @@
   );
   --helix-color-accent-hover: light-dark(
     var(--_helix-accent-600, var(--_helix-ink-600)),
-    var(--_helix-accent-600, var(--_helix-ink-300))
+    var(--_helix-accent-300, var(--_helix-ink-300))
   );
   --helix-color-accent-active: light-dark(
     var(--_helix-accent-700, var(--_helix-ink-700)),
-    var(--_helix-accent-700, var(--_helix-ink-200))
+    var(--_helix-accent-200, var(--_helix-ink-200))
   );
   --helix-color-accent-subtle: light-dark(
     var(--_helix-accent-50, var(--_helix-ink-50)),
-    var(--_helix-accent-900, var(--_helix-ink-900))
+    oklch(from var(--_helix-accent-900, var(--_helix-ink-900)) l calc(c * 0.5) h)
   );
   --helix-color-accent-surface: light-dark(
     var(--_helix-accent-600, var(--_helix-ink-500)),
@@ -118,8 +134,16 @@
     var(--_helix-brand-600, var(--_helix-ink-400))
   );
   --helix-color-primary-surface-hover: light-dark(
-    var(--_helix-brand-700, var(--_helix-ink-600)),
-    var(--_helix-brand-700, var(--_helix-ink-450))
+    var(--_helix-brand-700, var(--_helix-ink-surface-hover)),
+    var(--_helix-brand-700, var(--_helix-ink-surface-hover-dark))
+  );
+  --helix-color-primary-surface-active: light-dark(
+    var(--_helix-brand-800, var(--_helix-ink-surface-active)),
+    var(--_helix-brand-800, var(--_helix-ink-surface-active-dark))
+  );
+  --helix-color-border-hover: light-dark(
+    var(--_helix-brand-500, var(--_helix-neutral-450)),
+    var(--_helix-brand-400, var(--_helix-neutral-550))
   );
   --helix-color-focus-ring: var(--helix-color-primary);
   --helix-color-brand-mark: light-dark(
@@ -170,11 +194,11 @@
   );
   --helix-color-series-2: light-dark(
     oklch(
-      from var(--_helix-series-origin) 0.645 calc(0.238 * var(--_helix-seed-chroma-scale))
+      from var(--_helix-series-origin) 0.645 calc(0.18 * var(--_helix-seed-chroma-scale))
         calc(h + var(--_helix-series-hue-2))
     ),
     oklch(
-      from var(--_helix-series-origin) 0.645 calc(0.238 * var(--_helix-seed-chroma-scale))
+      from var(--_helix-series-origin) 0.645 calc(0.18 * var(--_helix-seed-chroma-scale))
         calc(h + var(--_helix-series-hue-2))
     )
   );
@@ -401,6 +425,10 @@
   --helix-color-info: light-dark(var(--_helix-info-600), var(--_helix-info-400));
   --helix-color-success: light-dark(var(--_helix-success-600), var(--_helix-success-400));
   --helix-color-warning: light-dark(var(--_helix-warning-600), var(--_helix-warning-400));
+  --helix-color-warning-mark: light-dark(
+    oklch(from var(--helix-color-warning) calc(l + 0.11) calc(c * 1.25) h),
+    var(--helix-color-warning)
+  );
   --helix-color-danger: light-dark(var(--_helix-danger-600), var(--_helix-danger-400));
   --helix-color-rise: var(--helix-color-success);
   --helix-color-fall: var(--helix-color-danger);
@@ -484,21 +512,31 @@
   --helix-shadow-lg: 0 12px 32px var(--_helix-shadow-ink-lg);
   --helix-shadow-surface: var(--helix-shadow-none);
   --helix-shadow-floating: var(--helix-shadow-lg);
+  --helix-shadow-raised: var(--helix-shadow-floating);
   --helix-material-backdrop: blur(var(--helix-material-blur-md)) saturate(1.5);
   --helix-material-opacity: 1;
+  --helix-opacity-disabled: 0.5;
+  --helix-opacity-busy: 0.5;
   --helix-material-blur-sm: 8px;
   --helix-material-blur-md: 16px;
   --helix-material-blur-lg: 32px;
-  --helix-material-translucent: color-mix(
-    in oklab,
-    light-dark(var(--_helix-neutral-0), var(--_helix-neutral-900)) 30%,
-    transparent
+  --helix-material-translucent: light-dark(
+    color-mix(in oklab, var(--_helix-neutral-0) 30%, transparent),
+    color-mix(in oklab, var(--_helix-neutral-900) 60%, transparent)
   );
   --helix-material-translucent-strong: color-mix(
     in oklab,
     light-dark(var(--_helix-neutral-0), var(--_helix-neutral-900)) 88%,
     transparent
   );
+  --helix-material-modal: light-dark(
+    var(--helix-material-translucent-strong),
+    var(--helix-material-translucent)
+  );
+  --helix-material-panel: light-dark(
+    color-mix(in oklab, var(--_helix-neutral-0) 72%, transparent),
+    var(--helix-material-translucent)
+  );
   --helix-material-border: light-dark(
     color-mix(in oklab, var(--_helix-neutral-950) 14%, transparent),
     color-mix(in oklab, var(--_helix-neutral-0) 12%, transparent)
@@ -529,11 +567,18 @@
   --helix-size-control-md: calc(2.5rem * var(--_helix-seed-density));
   --helix-size-control-sm: calc(2rem * var(--_helix-seed-density));
   --helix-size-control: var(--helix-size-control-md);
-  --helix-text-control: var(--helix-text-sm);
+  --helix-text-control-sm: var(--_helix-text-control-sm);
+  --helix-text-control-md: var(--_helix-text-control-md);
+  --helix-text-control-lg: var(--_helix-text-control-lg);
+  --helix-text-control: var(--helix-text-control-md);
+  --helix-text-field: var(--helix-text-md);
+  --helix-text-field-label: var(--helix-text-sm);
+  --helix-space-field: var(--helix-space-sm);
   --helix-text-field-min: var(--_helix-text-field-min);
   --helix-space-control: var(--helix-space-md);
+  --helix-size-target: var(--_helix-size-target);
   --helix-size-control-lg: calc(3rem * var(--_helix-seed-density));
-  --helix-size-control-tight: calc(var(--helix-size-control) * 0.8);
+  --helix-size-control-tight: round(calc(var(--helix-size-control) * 0.8), 1px);
   --helix-size-control-loose: calc(var(--helix-size-control) * 1.2);
   --helix-size-icon-tight: calc(var(--helix-size-icon) * 0.8);
   --helix-size-icon-loose: calc(var(--helix-size-icon) * 1.2);

package/dist/tokens.json

@@ -12,12 +12,13 @@
     "border",
     "shadow",
     "material",
+    "opacity",
     "duration",
     "easing",
     "size",
     "layer"
   ],
-  "count": 200,
+  "count": 218,
   "groups": {
     "separation-policy": ["border-surface", "shadow-surface", "border-floating", "shadow-floating"],
     "surface-ladder": [
@@ -39,11 +40,11 @@
       "category": "color",
       "description": "A surface on the page, such as a card or a panel. The separation policy sets it apart with a fill, a border, or a shadow.",
       "name": "--helix-color-surface",
-      "value": "light-dark(var(--_helix-neutral-50), var(--_helix-neutral-900))"
+      "value": "light-dark(var(--_helix-neutral-50), var(--_helix-neutral-925))"
     },
     {
       "category": "color",
-      "description": "A raised surface on the page, such as a selected tab or a hovered row. Its fill is one step down the ramp.",
+      "description": "A panel raised inside a surface, such as a card inside a card. Its fill is one step down the ramp.",
       "name": "--helix-color-surface-raised",
       "value": "light-dark(var(--_helix-neutral-100), var(--_helix-neutral-800))"
     },
@@ -55,9 +56,9 @@
     },
     {
       "category": "color",
-      "description": "A recessed surface that holds a value, such as an input, a track, or a groove. Its fill sets it apart.",
+      "description": "A recessed surface, such as a track or a groove. Its fill sets it apart. A field reads `well`.",
       "name": "--helix-color-surface-sunken",
-      "value": "light-dark(var(--_helix-neutral-200), var(--_helix-neutral-950))"
+      "value": "light-dark(var(--_helix-neutral-225), var(--_helix-neutral-900))"
     },
     {
       "category": "color",
@@ -69,6 +70,24 @@
       "name": "--helix-color-hover",
       "value": "light-dark( color-mix(in oklab, var(--helix-color-foreground) 8%, transparent), color-mix(in oklab, var(--helix-color-foreground) 12%, transparent) )"
     },
+    {
+      "category": "color",
+      "description": "A wash of the primary color, such as the bubble of your own Chat message.",
+      "name": "--helix-color-primary-wash",
+      "value": "var(--_helix-brand-wash, color-mix(in oklab, var(--helix-color-primary) 14%, transparent))"
+    },
+    {
+      "category": "color",
+      "description": "A wash under a control being pressed, a step past the hover wash.",
+      "name": "--helix-color-press",
+      "value": "light-dark( color-mix(in oklab, var(--helix-color-foreground) 16%, transparent), color-mix(in oklab, var(--helix-color-foreground) 20%, transparent) )"
+    },
+    {
+      "category": "color",
+      "description": "A wash under something chosen that keeps its ground, such as a range of days.",
+      "name": "--helix-color-selected",
+      "value": "color-mix(in oklab, var(--helix-color-foreground) 14%, transparent)"
+    },
     {
       "category": "color",
       "name": "--helix-color-overlay",
@@ -87,9 +106,9 @@
     },
     {
       "category": "color",
-      "description": "A mark that is not text, such as a separator, a chevron, or a grip, and the text of a disabled control. Its contrast is not guaranteed.",
+      "description": "A mark that is not text, such as a separator, a chevron, or a grip. Its contrast is not guaranteed.",
       "name": "--helix-color-foreground-subtle",
-      "value": "light-dark(var(--_helix-neutral-550), var(--_helix-neutral-450))"
+      "value": "light-dark(var(--_helix-neutral-500), var(--_helix-neutral-550))"
     },
     {
       "category": "color",
@@ -149,7 +168,7 @@
     {
       "category": "color",
       "name": "--helix-color-primary-subtle",
-      "value": "light-dark(var(--_helix-brand-50, var(--_helix-ink-50)), var(--_helix-brand-900, var(--_helix-ink-900)))"
+      "value": "light-dark(var(--_helix-brand-50, var(--_helix-ink-50)), oklch(from var(--_helix-brand-900, var(--_helix-ink-900)) l calc(c * 0.5) h))"
     },
     {
       "category": "color",
@@ -159,17 +178,17 @@
     {
       "category": "color",
       "name": "--helix-color-accent-hover",
-      "value": "light-dark(var(--_helix-accent-600, var(--_helix-ink-600)), var(--_helix-accent-600, var(--_helix-ink-300)))"
+      "value": "light-dark(var(--_helix-accent-600, var(--_helix-ink-600)), var(--_helix-accent-300, var(--_helix-ink-300)))"
     },
     {
       "category": "color",
       "name": "--helix-color-accent-active",
-      "value": "light-dark(var(--_helix-accent-700, var(--_helix-ink-700)), var(--_helix-accent-700, var(--_helix-ink-200)))"
+      "value": "light-dark(var(--_helix-accent-700, var(--_helix-ink-700)), var(--_helix-accent-200, var(--_helix-ink-200)))"
     },
     {
       "category": "color",
       "name": "--helix-color-accent-subtle",
-      "value": "light-dark(var(--_helix-accent-50, var(--_helix-ink-50)), var(--_helix-accent-900, var(--_helix-ink-900)))"
+      "value": "light-dark(var(--_helix-accent-50, var(--_helix-ink-50)), oklch(from var(--_helix-accent-900, var(--_helix-ink-900)) l calc(c * 0.5) h))"
     },
     {
       "category": "color",
@@ -189,7 +208,18 @@
     {
       "category": "color",
       "name": "--helix-color-primary-surface-hover",
-      "value": "light-dark(var(--_helix-brand-700, var(--_helix-ink-600)), var(--_helix-brand-700, var(--_helix-ink-450)))"
+      "value": "light-dark(var(--_helix-brand-700, var(--_helix-ink-surface-hover)), var(--_helix-brand-700, var(--_helix-ink-surface-hover-dark)))"
+    },
+    {
+      "category": "color",
+      "name": "--helix-color-primary-surface-active",
+      "value": "light-dark(var(--_helix-brand-800, var(--_helix-ink-surface-active)), var(--_helix-brand-800, var(--_helix-ink-surface-active-dark)))"
+    },
+    {
+      "category": "color",
+      "description": "The edge of a field under the pointer.",
+      "name": "--helix-color-border-hover",
+      "value": "light-dark(var(--_helix-brand-500, var(--_helix-neutral-450)), var(--_helix-brand-400, var(--_helix-neutral-550)))"
     },
     {
       "category": "color",
@@ -249,7 +279,7 @@
     {
       "category": "color",
       "name": "--helix-color-series-2",
-      "value": "light-dark( oklch( from var(--_helix-series-origin) 0.645 calc(0.238 * var(--_helix-seed-chroma-scale)) calc(h + var(--_helix-series-hue-2)) ), oklch( from var(--_helix-series-origin) 0.645 calc(0.238 * var(--_helix-seed-chroma-scale)) calc(h + var(--_helix-series-hue-2)) ) )"
+      "value": "light-dark( oklch( from var(--_helix-series-origin) 0.645 calc(0.18 * var(--_helix-seed-chroma-scale)) calc(h + var(--_helix-series-hue-2)) ), oklch( from var(--_helix-series-origin) 0.645 calc(0.18 * var(--_helix-seed-chroma-scale)) calc(h + var(--_helix-series-hue-2)) ) )"
     },
     {
       "category": "color",
@@ -376,6 +406,12 @@
       "name": "--helix-color-warning",
       "value": "light-dark(var(--_helix-warning-600), var(--_helix-warning-400))"
     },
+    {
+      "category": "color",
+      "description": "Warning as a mark that is not text, such as a star or a Meter fill.",
+      "name": "--helix-color-warning-mark",
+      "value": "light-dark(oklch(from var(--helix-color-warning) calc(l + 0.11) calc(c * 1.25) h), var(--helix-color-warning))"
+    },
     {
       "category": "color",
       "name": "--helix-color-danger",
@@ -722,9 +758,15 @@
       "name": "--helix-shadow-floating",
       "value": "var(--helix-shadow-lg)"
     },
+    {
+      "category": "shadow",
+      "description": "The shadow of a control lifted over content.",
+      "name": "--helix-shadow-raised",
+      "value": "var(--helix-shadow-floating)"
+    },
     {
       "category": "material",
-      "description": "The tint behind a modal.",
+      "description": "The blur and saturation behind a translucent surface.",
       "name": "--helix-material-backdrop",
       "value": "blur(var(--helix-material-blur-md)) saturate(1.5)"
     },
@@ -734,6 +776,18 @@
       "name": "--helix-material-opacity",
       "value": "1"
     },
+    {
+      "category": "opacity",
+      "description": "How far a disabled control fades.",
+      "name": "--helix-opacity-disabled",
+      "value": "0.5"
+    },
+    {
+      "category": "opacity",
+      "description": "How far rows fade while a new set loads.",
+      "name": "--helix-opacity-busy",
+      "value": "0.5"
+    },
     {
       "category": "material",
       "description": "The lightest backdrop blur.",
@@ -756,7 +810,7 @@
       "category": "material",
       "description": "The translucent background, for a surface that shows what is behind it.",
       "name": "--helix-material-translucent",
-      "value": "color-mix( in oklab, light-dark(var(--_helix-neutral-0), var(--_helix-neutral-900)) 30%, transparent )"
+      "value": "light-dark( color-mix(in oklab, var(--_helix-neutral-0) 30%, transparent), color-mix(in oklab, var(--_helix-neutral-900) 60%, transparent) )"
     },
     {
       "category": "material",
@@ -764,6 +818,18 @@
       "name": "--helix-material-translucent-strong",
       "value": "color-mix( in oklab, light-dark(var(--_helix-neutral-0), var(--_helix-neutral-900)) 88%, transparent )"
     },
+    {
+      "category": "material",
+      "description": "The glass of a Dialog or Drawer, which sits over its own scrim.",
+      "name": "--helix-material-modal",
+      "value": "light-dark(var(--helix-material-translucent-strong), var(--helix-material-translucent))"
+    },
+    {
+      "category": "material",
+      "description": "The glass of a panel over the page, such as a Menu, Popover, or Tooltip.",
+      "name": "--helix-material-panel",
+      "value": "light-dark( color-mix(in oklab, var(--_helix-neutral-0) 72%, transparent), var(--helix-material-translucent) )"
+    },
     {
       "category": "material",
       "description": "The border a translucent surface needs to keep a visible edge.",
@@ -830,11 +896,41 @@
       "name": "--helix-size-control",
       "value": "var(--helix-size-control-md)"
     },
+    {
+      "category": "text",
+      "name": "--helix-text-control-sm",
+      "value": "var(--_helix-text-control-sm)"
+    },
+    {
+      "category": "text",
+      "name": "--helix-text-control-md",
+      "value": "var(--_helix-text-control-md)"
+    },
+    {
+      "category": "text",
+      "name": "--helix-text-control-lg",
+      "value": "var(--_helix-text-control-lg)"
+    },
     {
       "category": "text",
       "name": "--helix-text-control",
+      "value": "var(--helix-text-control-md)"
+    },
+    {
+      "category": "text",
+      "name": "--helix-text-field",
+      "value": "var(--helix-text-md)"
+    },
+    {
+      "category": "text",
+      "name": "--helix-text-field-label",
       "value": "var(--helix-text-sm)"
     },
+    {
+      "category": "space",
+      "name": "--helix-space-field",
+      "value": "var(--helix-space-sm)"
+    },
     {
       "category": "text",
       "name": "--helix-text-field-min",
@@ -845,6 +941,11 @@
       "name": "--helix-space-control",
       "value": "var(--helix-space-md)"
     },
+    {
+      "category": "size",
+      "name": "--helix-size-target",
+      "value": "var(--_helix-size-target)"
+    },
     {
       "category": "size",
       "name": "--helix-size-control-lg",
@@ -853,7 +954,7 @@
     {
       "category": "size",
       "name": "--helix-size-control-tight",
-      "value": "calc(var(--helix-size-control) * 0.8)"
+      "value": "round(calc(var(--helix-size-control) * 0.8), 1px)"
     },
     {
       "category": "size",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@fusion.dev/helix-styles",
   "description": "Design tokens and base layer. Pure CSS, no JavaScript.",
-  "version": "0.228.0",
+  "version": "0.229.0",
   "license": "MIT",
   "author": "Fusion Development Group",
   "repository": {