@fusion.dev/helix 0.22.0 → 0.24.0

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

@@ -27,8 +27,9 @@ import type { CSSResultGroup } from 'lit';
  * the ramp is named, and a page built from it is consistent because there was
  * nothing else to choose.
  *
- * `tone` stays separate, because color carries state rather than typography.
- * Folding it in would mean `caption-danger` and `label-primary` and the rest of
+ * `tone` and `emphasis` stay separate, because color carries state rather than
+ * typography, and what a line means is not how loudly it says it. Folding
+ * either in would mean `caption-danger` and `label-muted` and the rest of the
  * cross product, which is the explosion a named ramp exists to prevent.
  *
  * @since 0.1.0
@@ -49,23 +50,35 @@ export declare class HelixText extends HelixElement {
      */
     as?: 'span' | 'p' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'strong' | 'em' | 'code' | 'label';
     /**
-     * Color role. A separate axis from the type ramp, because color carries
-     * state: folding it in would mean `caption-danger` and the rest of the cross
-     * product.
+     * How loud the text is, beside what it means.
+     *
+     * `muted` is the quiet ink that still has to be read, and `subtle` the
+     * quieter one below it. Two axes because the test says so: a line can be a
+     * danger *and* quiet at once, and a muted danger is what a validation hint
+     * under a field is.
+     *
+     * **With a `tone`, both are that tone's one quiet ink**: the tone's hue at half
+     * its chroma, as readable as the tone. The readable range holds one quiet step
+     * and not two, measured in #124 for the neutral ink, and a tone has less room
+     * there rather than more, so `subtle` on a tone is the same ink as `muted`
+     * rather than a second one that could not be read.
+     *
+     * The resting case is the absent attribute, full strength.
+     */
+    emphasis?: 'muted' | 'subtle';
+    /**
+     * What the text means. A separate axis from the type ramp, because color
+     * carries state: folding it in would mean `caption-danger` and the rest of the
+     * cross product.
      *
      * **There is no `default` value**, and one must not be added: it would match
      * no rule and fall through to the inherited ink, reading as working while
      * saying nothing. The resting case is the absent attribute.
      *
-     * **`muted` and `subtle` are weight rather than meaning and belong on
-     * `emphasis`, which is why this is still off the registry.** Splitting them
-     * out is blocked on the palette rather than on the rename: there is a quiet
-     * step for the neutral ink and none for any other tone, so a muted danger has
-     * nothing to be made of. `primary-subtle` is a tinted *ground* and not a
-     * quiet ink. That is #141's to derive, and until it does, folding the two
-     * halves apart would leave three of the four combinations unsayable.
+     * Weight is not a tone. How loud the text is belongs on `emphasis`, which is
+     * why `muted` and `subtle` moved there.
      */
-    tone?: 'muted' | 'subtle' | 'primary' | 'danger';
+    tone?: 'accent' | 'danger' | 'info' | 'primary' | 'success' | 'warning';
     /**
      * Type treatment.
      *

package/dist/text/root/text-root.js

@@ -32,6 +32,9 @@ let HelixText = class HelixText extends HelixElement {
 __decorate([
     property({ reflect: true })
 ], HelixText.prototype, "as", void 0);
+__decorate([
+    property({ reflect: true })
+], HelixText.prototype, "emphasis", void 0);
 __decorate([
     property({ reflect: true })
 ], HelixText.prototype, "tone", void 0);

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

@@ -111,8 +111,8 @@ background-color: var(--helix-color-surface-sunken);
 }
 
 [part="column"] [part="option"]:state(selected)::part(label) {
-background-color: var(--time-picker-selected-color, var(--helix-color-foreground-muted));
-color: var(--helix-color-foreground-on-accent);
+background-color: var(--time-picker-selected-color, var(--helix-color-surface-inverse));
+color: var(--helix-color-foreground-inverse);
 }
 
 [part="column"] [part="option"]::part(item)::after {

package/dist/toast/item/toast-item.css.js

@@ -2,7 +2,11 @@ import { createSheet } from '@fusion.dev/helix-core';
 export const styles = createSheet(`:host {
 
 --helix-size-icon: var(--helix-size-icon-sm);
+--helix-size-icon-loose: calc(var(--helix-size-icon) * 1.2);
+--helix-size-icon-tight: calc(var(--helix-size-icon) * 0.8);
 --helix-size-control: var(--helix-size-control-sm);
+--helix-size-control-loose: calc(var(--helix-size-control) * 1.2);
+--helix-size-control-tight: calc(var(--helix-size-control) * 0.8);
 
 --_toast-line: calc(var(--helix-text-sm) * var(--helix-leading-normal));
 
@@ -42,7 +46,7 @@ padding: var(--toast-item-padding, var(--helix-space-sm));
 
 padding-inline-end: calc(
 var(--helix-space-sm) +
-var(--helix-size-control-tight) +
+var(--helix-size-control) +
 var(--helix-space-2xs)
 );
 
@@ -112,19 +116,20 @@ all: unset;
 box-sizing: border-box;
 
 position: absolute;
+
 inset-block-start: calc(
 var(--toast-item-padding, var(--helix-space-sm)) +
-(var(--_toast-line) - var(--helix-size-control-tight)) /
+(var(--_toast-line) - var(--helix-size-control)) /
 2
 );
 inset-inline-end: var(--helix-space-sm);
-block-size: var(--helix-size-control-tight);
+block-size: var(--helix-size-control);
 border-radius: var(--helix-radii-sm);
 color: var(--helix-color-foreground-muted);
 cursor: pointer;
 display: inline-flex;
 flex: 0 0 auto;
-inline-size: var(--helix-size-control-tight);
+inline-size: var(--helix-size-control);
 place-content: center;
 place-items: center;
 transition: color var(--helix-duration-fast) var(--helix-easing-standard);

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

@@ -2,9 +2,15 @@ import { createSheet } from '@fusion.dev/helix-core';
 export const styles = createSheet(`:host {
 
 --helix-size-checkbox: var(--helix-size-checkbox-sm);
+--helix-size-checkbox-loose: calc(var(--helix-size-checkbox) * 1.2);
+--helix-size-checkbox-tight: calc(var(--helix-size-checkbox) * 0.8);
 
 --helix-size-icon: var(--helix-size-icon-sm);
+--helix-size-icon-loose: calc(var(--helix-size-icon) * 1.2);
+--helix-size-icon-tight: calc(var(--helix-size-icon) * 0.8);
 --helix-size-control: var(--helix-size-control-sm);
+--helix-size-control-loose: calc(var(--helix-size-control) * 1.2);
+--helix-size-control-tight: calc(var(--helix-size-control) * 0.8);
 --helix-size-tag: var(--helix-size-tag-sm);
 
 display: inline-flex;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@fusion.dev/helix",
   "description": "Styled component tier. Extends the headless tier with token-driven presentation.",
-  "version": "0.22.0",
+  "version": "0.24.0",
   "license": "MIT",
   "author": "Ross Sheppard <ross.sheppard@fusion.dev>",
   "repository": {
@@ -46,14 +46,14 @@
   },
   "bugs": "https://github.com/project-fusion/fusion/issues",
   "dependencies": {
-    "@fusion.dev/helix-core": "0.22.0",
-    "@fusion.dev/helix-headless": "0.22.0",
-    "@fusion.dev/helix-styles": "0.22.0"
+    "@fusion.dev/helix-core": "0.24.0",
+    "@fusion.dev/helix-headless": "0.24.0",
+    "@fusion.dev/helix-styles": "0.24.0"
   },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "^0.11.0",
-    "@fusion.dev/helix-cem": "0.22.0",
-    "@fusion.dev/helix-testing": "0.22.0",
+    "@fusion.dev/helix-cem": "0.24.0",
+    "@fusion.dev/helix-testing": "0.24.0",
     "@fusion.dev/scripts": "0.0.0-dev",
     "@happy-dom/global-registrator": "^20.0.0",
     "@lit-labs/ssr": "^3.3.0",