@fusion.dev/helix 0.139.0 → 0.141.0

package/dist/aura/root/aura-root.d.ts

@@ -424,11 +424,11 @@ export declare class HelixAura extends HelixElement {
     /**
      * Resolves the ramp. Called when the palette moves, not when a frame draws.
      *
-     * Light pages peak on a deep brand blue and dark ones on the foreground, and
-     * the ground is what says which: mixing a saturated hue toward near-black
-     * takes the chroma out of exactly the pixels carrying the most of it. Read
-     * from the ground's own luminance rather than asked of the color mode, which
-     * is a private token this tier may not reach for.
+     * Light pages peak on the pressed `primary-active` and dark ones on the
+     * foreground, and the ground is what says which: mixing a saturated hue
+     * toward near-black takes the chroma out of exactly the pixels carrying the
+     * most of it. Read from the ground's own luminance rather than asked of the
+     * color mode, which is a private token this tier may not reach for.
      */
     private readPalette;
     private link;

package/dist/aura/root/aura-root.js

@@ -32,9 +32,9 @@ let HelixAura = class HelixAura extends HelixElement {
             this.paintOnce();
         });
         this.palette = {
-            glow: [0.29, 0.61, 1],
+            glow: [0.88, 0.88, 0.88],
             ground: [0, 0, 0],
-            haze: [0.02, 0.15, 0.34],
+            haze: [0.16, 0.16, 0.16],
             peak: [1, 1, 1],
         };
         this.canvas = null;
@@ -267,11 +267,11 @@ let HelixAura = class HelixAura extends HelixElement {
         const ground = this.tokens.read('--helix-color-background', [0, 0, 0]);
         const light = ground[0] * 0.2126 + ground[1] * 0.7152 + ground[2] * 0.0722 > 0.5;
         this.palette = {
-            glow: this.tokens.read('--helix-color-primary', [0.29, 0.61, 1]),
+            glow: this.tokens.read('--helix-color-primary', [0.88, 0.88, 0.88]),
             ground,
-            haze: this.tokens.read('--helix-color-primary-subtle', [0.02, 0.15, 0.34]),
+            haze: this.tokens.read('--helix-color-primary-subtle', [0.16, 0.16, 0.16]),
             peak: light
-                ? this.tokens.read('--helix-color-primary-active', [0.1, 0.2, 0.55])
+                ? this.tokens.read('--helix-color-primary-active', [0.02, 0.02, 0.02])
                 : this.tokens.read('--helix-color-foreground', [1, 1, 1]),
         };
     }

package/dist/badge/root/badge-root.css.js

@@ -5,6 +5,8 @@ export const styles = createSheet(`:host {
 --_badge-text: var(--helix-text-xs);
 --_badge-inset: var(--helix-space-2xs);
 --_badge-dot: var(--helix-space-xs);
+
+--_badge-on: var(--helix-color-foreground-on-primary);
 display: inline-flex;
 position: relative;
 vertical-align: middle;
@@ -18,7 +20,7 @@ block-size: var(--_badge-size);
 border-radius: var(--helix-radii-full);
 
 box-shadow: 0 0 0 var(--helix-border-thick) var(--badge-ring-color, var(--helix-color-background));
-color: var(--helix-color-foreground-on-accent);
+color: var(--_badge-on);
 display: inline-flex;
 font-size: var(--_badge-text);
 font-weight: var(--helix-weight-semibold);
@@ -70,6 +72,17 @@ background-color: var(--badge-background-color, var(--helix-color-primary-surfac
 background-color: var(--badge-background-color, var(--helix-color-accent-surface));
 }
 
+:host([tone="accent"]) {
+--_badge-on: var(--helix-color-foreground-on-accent);
+}
+
+:host([tone="danger"]),
+:host([tone="info"]),
+:host([tone="success"]),
+:host([tone="warning"]) {
+--_badge-on: var(--helix-color-foreground-on-status);
+}
+
 :host([tone="info"]) [part="indicator"] {
 background-color: var(--badge-background-color, var(--helix-color-info-surface));
 }

package/dist/badge/root/badge-root.d.ts

@@ -27,8 +27,8 @@ export declare class HelixBadge extends HelixHeadlessBadge {
      * different sets for no reason anybody decided: a tag could say `success` and
      * a badge could not, so a page marking a build green wrote one word on the
      * chip and had no word for the count beside it. Every fill these name already
-     * exists and every one carries `foreground-on-accent`, so this costs a rule
-     * apiece and no new color.
+     * exists with its family's label, so this costs a rule apiece and no new
+     * color.
      *
      * **`primary` is sayable as well as the default**, which is the reason
      * `Announcement` gives for its own neutral: a generated page should be able to

package/dist/button/root/button-root.css.js

@@ -24,7 +24,7 @@ var(--helix-color-background)
 --_button-edge: var(--helix-color-primary);
 --_button-fill: var(--helix-color-primary-surface);
 --_button-fill-hover: var(--helix-color-primary-surface-hover);
---_button-on-tone: var(--helix-color-foreground-on-accent);
+--_button-on-tone: var(--helix-color-foreground-on-primary);
 --_button-tone: var(--helix-color-primary);
 --_button-tone-hover: var(--helix-color-primary-hover);
 }
@@ -41,7 +41,7 @@ var(--helix-color-background)
 --_button-edge: var(--helix-color-danger);
 --_button-fill: var(--helix-color-danger-surface);
 --_button-fill-hover: var(--helix-color-danger-surface-hover);
---_button-on-tone: var(--helix-color-foreground-on-accent);
+--_button-on-tone: var(--helix-color-foreground-on-status);
 --_button-tone: var(--helix-color-danger);
 
 --_button-tone-hover: color-mix(

package/dist/callout/root/callout-root.css.js

@@ -28,6 +28,10 @@ inset-inline-start: 0;
 position: absolute;
 }
 
+:host([tone="neutral"]) {
+--_callout-color: var(--helix-color-foreground-muted);
+}
+
 :host([tone="success"]) {
 --_callout-color: var(--helix-color-success);
 }

package/dist/callout/root/callout-root.d.ts

@@ -1,10 +1,12 @@
 import { HelixHeadlessCallout } from '@fusion.dev/helix-headless/callout';
 import type { CSSResultGroup } from 'lit';
 /**
- * @summary A passage set apart as information, a warning, or an error.
+ * @summary A passage set apart as a note, information, a warning, or an error.
  *
  * @description
- * The background is a tint of the tone's status color, mixed with `color-mix`.
+ * The background is a tint of the tone's color, mixed with `color-mix`. A
+ * `neutral` callout is drawn in the muted ink, for a note that reports no
+ * status, so it keeps to the palette whatever the brand.
  * A bar on the inline start edge also marks the tone, so it still shows in
  * grayscale and for people who do not distinguish the hues.
  *

package/dist/color-picker/root/color-picker-root.css.js

@@ -44,14 +44,27 @@ touch-action: none;
 }
 
 [part="grid"]::after {
+
+--_color-picker-mark-half: calc(var(--helix-size-icon-tight) / 2);
 block-size: var(--helix-size-icon-tight);
-border: var(--helix-border-thick) solid var(--helix-color-surface);
+border: var(--helix-border-thick) solid var(--helix-color-foreground-media);
 border-radius: var(--helix-radii-full);
-box-shadow: var(--helix-shadow-sm);
+box-shadow:
+0 0 0 var(--helix-border-thin)
+color-mix(in oklab, var(--helix-color-surface-media) 60%, transparent),
+var(--helix-shadow-sm);
 content: "";
 inline-size: var(--helix-size-icon-tight);
-inset-block-start: calc(100% - var(--color-picker-brightness, 100%));
-inset-inline-start: var(--color-picker-saturation, 100%);
+inset-block-start: clamp(
+var(--_color-picker-mark-half),
+calc(100% - var(--color-picker-brightness, 100%)),
+calc(100% - var(--_color-picker-mark-half))
+);
+inset-inline-start: clamp(
+var(--_color-picker-mark-half),
+var(--color-picker-saturation, 100%),
+calc(100% - var(--_color-picker-mark-half))
+);
 pointer-events: none;
 position: absolute;
 translate: -50% -50%;

package/dist/icon-button/root/icon-button-root.css.js

@@ -25,7 +25,7 @@ var(--helix-color-background)
 --_icon-button-ink-hover: var(--helix-color-primary);
 --_icon-button-fill: var(--helix-color-primary-surface);
 --_icon-button-fill-hover: var(--helix-color-primary-surface-hover);
---_icon-button-on-tone: var(--helix-color-foreground-on-accent);
+--_icon-button-on-tone: var(--helix-color-foreground-on-primary);
 --_icon-button-tone: var(--helix-color-primary);
 --_icon-button-tone-hover: var(--helix-color-primary-hover);
 }
@@ -47,7 +47,7 @@ var(--helix-color-background)
 --_icon-button-ink-hover: var(--helix-color-danger);
 --_icon-button-fill: var(--helix-color-danger-surface);
 --_icon-button-fill-hover: var(--helix-color-danger-surface-hover);
---_icon-button-on-tone: var(--helix-color-foreground-on-accent);
+--_icon-button-on-tone: var(--helix-color-foreground-on-status);
 --_icon-button-tone: var(--helix-color-danger);
 --_icon-button-tone-hover: color-mix(
 in oklab,

package/dist/map/marker/map-marker.css.js

@@ -3,7 +3,7 @@ export const styles = createSheet(`:host {
 --_map-marker-color: var(--map-marker-color, var(--helix-color-primary));
 
 --_map-marker-fill: var(--map-marker-color, var(--helix-color-primary-surface));
---_map-marker-ink: var(--map-marker-ink, var(--helix-color-foreground-on-accent));
+--_map-marker-ink: var(--map-marker-ink, var(--helix-color-foreground-on-primary));
 
 --_map-marker-edge: var(--helix-color-surface);
 --_map-marker-lift: 0px;
@@ -180,7 +180,7 @@ var(--map-marker-cluster-color, var(--helix-color-primary-surface)) 28%,
 transparent
 ),
 var(--_map-marker-shadow);
-color: var(--helix-color-foreground-on-accent);
+color: var(--helix-color-foreground-on-primary);
 font-size: calc(var(--_map-marker-size) * 0.42);
 font-variant-numeric: tabular-nums;
 rotate: none;
@@ -301,14 +301,17 @@ outline-offset: var(--helix-size-focus-offset);
 :host([tone="accent"]) {
 --_map-marker-color: var(--helix-color-accent);
 --_map-marker-fill: var(--helix-color-accent-surface);
+--_map-marker-ink: var(--map-marker-ink, var(--helix-color-foreground-on-accent));
 }
 :host([tone="danger"]) {
 --_map-marker-color: var(--helix-color-danger);
 --_map-marker-fill: var(--helix-color-danger-surface);
+--_map-marker-ink: var(--map-marker-ink, var(--helix-color-foreground-on-status));
 }
 :host([tone="info"]) {
 --_map-marker-color: var(--helix-color-info);
 --_map-marker-fill: var(--helix-color-info-surface);
+--_map-marker-ink: var(--map-marker-ink, var(--helix-color-foreground-on-status));
 }
 
 :host([tone="neutral"]) {
@@ -319,10 +322,12 @@ outline-offset: var(--helix-size-focus-offset);
 :host([tone="success"]) {
 --_map-marker-color: var(--helix-color-success);
 --_map-marker-fill: var(--helix-color-success-surface);
+--_map-marker-ink: var(--map-marker-ink, var(--helix-color-foreground-on-status));
 }
 :host([tone="warning"]) {
 --_map-marker-color: var(--helix-color-warning);
 --_map-marker-fill: var(--helix-color-warning-surface);
+--_map-marker-ink: var(--map-marker-ink, var(--helix-color-foreground-on-status));
 }
 
 :host(:state(passed)) {

package/dist/map/points/map-points.css.js

@@ -8,7 +8,7 @@ display: block;
 inline-size: 0;
 inset-block-start: 0;
 left: 0;
-outline-color: var(--map-points-ink, var(--helix-color-foreground-on-accent));
+outline-color: var(--map-points-ink, var(--helix-color-foreground-on-primary));
 pointer-events: none;
 position: absolute;
 }
@@ -58,14 +58,17 @@ opacity: 1;
 
 :host([tone="accent"]) {
 color: var(--helix-color-accent-surface);
+outline-color: var(--map-points-ink, var(--helix-color-foreground-on-accent));
 }
 
 :host([tone="danger"]) {
 color: var(--helix-color-danger-surface);
+outline-color: var(--map-points-ink, var(--helix-color-foreground-on-status));
 }
 
 :host([tone="info"]) {
 color: var(--helix-color-info-surface);
+outline-color: var(--map-points-ink, var(--helix-color-foreground-on-status));
 }
 
 :host([tone="neutral"]) {
@@ -75,8 +78,10 @@ outline-color: var(--map-points-ink, var(--helix-color-surface));
 
 :host([tone="success"]) {
 color: var(--helix-color-success-surface);
+outline-color: var(--map-points-ink, var(--helix-color-foreground-on-status));
 }
 
 :host([tone="warning"]) {
 color: var(--helix-color-warning-surface);
+outline-color: var(--map-points-ink, var(--helix-color-foreground-on-status));
 }`);

package/dist/map/root/map-root.css.js

@@ -155,7 +155,7 @@ font-weight: var(--helix-weight-semibold);
 [part="tilt"][aria-pressed="true"] {
 background-color: var(--helix-color-primary-surface);
 border-color: var(--helix-color-primary-surface);
-color: var(--helix-color-foreground-on-accent);
+color: var(--helix-color-foreground-on-primary);
 }
 
 [part="tilt"][aria-pressed="true"]:hover {

package/dist/popover/root/popover-root.css.js

@@ -20,7 +20,8 @@ inset: auto;
 margin: var(--helix-space-none);
 
 max-inline-size: calc(100vw - var(--helix-space-lg));
-padding: var(--popover-padding, var(--helix-space-md));
+
+padding: var(--helix-space-none);
 inline-size: var(--popover-inline-size, max-content);
 }
 
@@ -28,10 +29,6 @@ inline-size: var(--popover-inline-size, max-content);
 display: none;
 }
 
-:host([separation="plain"]) [part="popover"] {
-padding: var(--popover-padding, var(--helix-space-none));
-}
-
 [part="popover"] {
 --_travel: calc(var(--helix-space-2xs) * -1);
 
@@ -85,6 +82,11 @@ transition: none;
 [part="content"] {
 max-block-size: var(--popover-max-block-size, var(--floating-available-block-size, none));
 overflow: auto;
+padding: var(--popover-padding, var(--helix-space-md));
+}
+
+:host([separation="plain"]) [part="content"] {
+padding: var(--popover-padding, var(--helix-space-none));
 }
 
 @media print {

package/dist/speed-dial/root/speed-dial-root.css.js

@@ -115,7 +115,7 @@ block-size: var(--helix-size-control);
 border-radius: var(--helix-radii-full);
 box-shadow: var(--helix-shadow-md);
 box-sizing: border-box;
-color: var(--helix-color-foreground-on-accent);
+color: var(--helix-color-foreground-on-primary);
 cursor: pointer;
 display: inline-flex;
 inline-size: var(--helix-size-control);

package/dist/switch/root/switch-root.css.js

@@ -79,7 +79,7 @@ opacity: 0;
 
 :host(:state(checked)) [part="track"]::after {
 
-background-color: var(--switch-thumb-color, var(--helix-color-foreground-on-accent));
+background-color: var(--switch-thumb-color, var(--helix-color-foreground-on-primary));
 
 translate: calc(var(--_switch-width) - var(--_switch-height)) -50%;
 }