@fusion.dev/helix-styles 0.205.2 → 0.207.0

package/README.md

@@ -11,14 +11,15 @@ npm install @fusion.dev/helix-styles
 @import '@fusion.dev/helix-styles/helix.css';
 ```
 
-Or take the pieces:
+Or take the pieces, in the order of the first four rows:
 
 | Entry | What it is |
 |---|---|
-| `tokens.css` | the custom properties, light and dark |
-| `base.css` | element defaults and the reset |
-| `primitives.css` | utility layer |
-| `helix.css` | all four, in order |
+| `primitives.css` | the raw color ramps and scales the tokens are derived from, where the `--helix-seed-*` properties are read. No classes |
+| `tokens.css` | the semantic custom properties, light and dark. They read the primitives, so without `primitives.css` every color resolves to nothing |
+| `base.css` | the element reset and defaults |
+| `elements.css` | hides each Helix element until its definition loads |
+| `helix.css` | the four files above, in that order |
 | `tokens.json` | the same token names for a build step that needs them |
 
 The tokens are the contract every Helix component reads, so overriding one here

package/dist/base.css

@@ -186,10 +186,6 @@ helix-card > [slot="media"] {
 helix-text[emphasis="muted"] {
   color: var(--helix-color-foreground-muted);
 }
-[data-emphasis="subtle"],
-helix-text[emphasis="subtle"] {
-  color: var(--helix-color-foreground-subtle);
-}
 [data-tone="accent"],
 helix-text[tone="accent"] {
   color: var(--helix-color-accent);
@@ -214,28 +210,28 @@ helix-text[tone="success"] {
 helix-text[tone="warning"] {
   color: var(--helix-color-warning);
 }
-[data-tone="accent"]:is([data-emphasis="muted"], [data-emphasis="subtle"]),
-helix-text[tone="accent"]:is([emphasis="muted"], [emphasis="subtle"]) {
+[data-tone="accent"][data-emphasis="muted"],
+helix-text[tone="accent"][emphasis="muted"] {
   color: var(--helix-color-accent-muted);
 }
-[data-tone="danger"]:is([data-emphasis="muted"], [data-emphasis="subtle"]),
-helix-text[tone="danger"]:is([emphasis="muted"], [emphasis="subtle"]) {
+[data-tone="danger"][data-emphasis="muted"],
+helix-text[tone="danger"][emphasis="muted"] {
   color: var(--helix-color-danger-muted);
 }
-[data-tone="info"]:is([data-emphasis="muted"], [data-emphasis="subtle"]),
-helix-text[tone="info"]:is([emphasis="muted"], [emphasis="subtle"]) {
+[data-tone="info"][data-emphasis="muted"],
+helix-text[tone="info"][emphasis="muted"] {
   color: var(--helix-color-info-muted);
 }
-[data-tone="primary"]:is([data-emphasis="muted"], [data-emphasis="subtle"]),
-helix-text[tone="primary"]:is([emphasis="muted"], [emphasis="subtle"]) {
+[data-tone="primary"][data-emphasis="muted"],
+helix-text[tone="primary"][emphasis="muted"] {
   color: var(--helix-color-primary-muted);
 }
-[data-tone="success"]:is([data-emphasis="muted"], [data-emphasis="subtle"]),
-helix-text[tone="success"]:is([emphasis="muted"], [emphasis="subtle"]) {
+[data-tone="success"][data-emphasis="muted"],
+helix-text[tone="success"][emphasis="muted"] {
   color: var(--helix-color-success-muted);
 }
-[data-tone="warning"]:is([data-emphasis="muted"], [data-emphasis="subtle"]),
-helix-text[tone="warning"]:is([emphasis="muted"], [emphasis="subtle"]) {
+[data-tone="warning"][data-emphasis="muted"],
+helix-text[tone="warning"][emphasis="muted"] {
   color: var(--helix-color-warning-muted);
 }
 [data-button] {
@@ -617,7 +613,7 @@ helix-toggle[disabled]::part(item) {
 }
 [data-megamenu-heading] {
   align-items: center;
-  color: var(--helix-color-foreground-subtle);
+  color: var(--helix-color-foreground-muted);
   display: flex;
   gap: var(--helix-space-xs);
   font-family: var(--helix-font-sans);
@@ -809,7 +805,7 @@ helix-toast:not([data-color-mode]) {
   text-align: start;
 }
 :where([data-prose] th) {
-  color: var(--helix-color-foreground-subtle);
+  color: var(--helix-color-foreground-muted);
   font-weight: var(--helix-weight-medium);
 }
 :where([data-prose] tbody tr:last-child th),

package/dist/tokens.css

@@ -395,6 +395,8 @@
   --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-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);
   --helix-color-primary-muted: light-dark(
     var(--_helix-brand-quiet-500, var(--helix-color-foreground-muted)),
     var(--_helix-brand-quiet-400, var(--helix-color-foreground-muted))

package/dist/tokens.json

@@ -17,7 +17,7 @@
     "size",
     "layer"
   ],
-  "count": 197,
+  "count": 199,
   "groups": {
     "separation-policy": ["border-surface", "shadow-surface", "border-floating", "shadow-floating"],
     "surface-ladder": [
@@ -76,11 +76,13 @@
     },
     {
       "category": "color",
+      "description": "Text that recedes and is still read, such as a placeholder, a hint, or a caption.",
       "name": "--helix-color-foreground-muted",
       "value": "light-dark(var(--_helix-neutral-600), var(--_helix-neutral-400))"
     },
     {
       "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.",
       "name": "--helix-color-foreground-subtle",
       "value": "light-dark(var(--_helix-neutral-550), var(--_helix-neutral-450))"
     },
@@ -374,6 +376,16 @@
       "name": "--helix-color-danger",
       "value": "light-dark(var(--_helix-danger-600), var(--_helix-danger-400))"
     },
+    {
+      "category": "color",
+      "name": "--helix-color-rise",
+      "value": "var(--helix-color-success)"
+    },
+    {
+      "category": "color",
+      "name": "--helix-color-fall",
+      "value": "var(--helix-color-danger)"
+    },
     {
       "category": "color",
       "name": "--helix-color-primary-muted",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@fusion.dev/helix-styles",
   "description": "Design tokens and base layer. Pure CSS, no JavaScript.",
-  "version": "0.205.2",
+  "version": "0.207.0",
   "license": "MIT",
   "author": "Ross Sheppard <ross.sheppard@fusion.dev>",
   "repository": {
@@ -11,9 +11,14 @@
   },
   "type": "module",
   "exports": {
+    ".": {
+      "style": "./dist/helix.css",
+      "default": "./dist/helix.css"
+    },
     "./base.css": "./dist/base.css",
     "./elements.css": "./dist/elements.css",
     "./helix.css": "./dist/helix.css",
+    "./package.json": "./package.json",
     "./primitives.css": "./dist/primitives.css",
     "./tokens.css": "./dist/tokens.css",
     "./tokens.json": "./dist/tokens.json"