@fusion.dev/helix-styles 0.22.0 → 0.24.0

package/dist/base.css

@@ -174,22 +174,62 @@ helix-card > [slot="media"] {
   letter-spacing: var(--helix-tracking-normal);
   line-height: var(--helix-leading-normal);
 }
-[data-tone="muted"],
-helix-text[tone="muted"] {
+[data-emphasis="muted"],
+helix-text[emphasis="muted"] {
   color: var(--helix-color-foreground-muted);
 }
-[data-tone="subtle"],
-helix-text[tone="subtle"] {
+[data-emphasis="subtle"],
+helix-text[emphasis="subtle"] {
   color: var(--helix-color-foreground-subtle);
 }
-[data-tone="primary"],
-helix-text[tone="primary"] {
-  color: var(--helix-color-primary);
+[data-tone="accent"],
+helix-text[tone="accent"] {
+  color: var(--helix-color-accent);
 }
 [data-tone="danger"],
 helix-text[tone="danger"] {
   color: var(--helix-color-danger);
 }
+[data-tone="info"],
+helix-text[tone="info"] {
+  color: var(--helix-color-info);
+}
+[data-tone="primary"],
+helix-text[tone="primary"] {
+  color: var(--helix-color-primary);
+}
+[data-tone="success"],
+helix-text[tone="success"] {
+  color: var(--helix-color-success);
+}
+[data-tone="warning"],
+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"]) {
+  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"]) {
+  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"]) {
+  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"]) {
+  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"]) {
+  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"]) {
+  color: var(--helix-color-warning-muted);
+}
 [data-button] {
   --_button-edge: var(--helix-color-border);
   min-inline-size: var(--button-inline-size, auto);
@@ -642,9 +682,9 @@ helix-toast:not([data-color-mode]) {
 }
 :where([data-prose] p),
 :where([data-prose] ul, [data-prose] ol),
-:where([data-prose] pre),
+:where([data-prose] pre, [data-prose] helix-code-block),
 :where([data-prose] table),
-:where([data-prose] blockquote) {
+:where([data-prose] blockquote, [data-prose] helix-callout) {
   margin-block: var(--helix-space-none) var(--helix-space-sm);
 }
 :where([data-prose] > :last-child) {
@@ -690,6 +730,61 @@ helix-toast:not([data-color-mode]) {
   font-size: inherit;
   padding: var(--helix-space-none);
 }
+:where(helix-chat-message[data-prose], helix-chat-message [data-prose]) :where(table, pre),
+:where(helix-chat-message) :where(helix-table) {
+  background-color: var(--helix-color-surface-sunken);
+  border: var(--helix-border-thin) solid var(--helix-color-border);
+  border-radius: var(--helix-radii-lg);
+}
+:where(helix-chat-message[data-prose], helix-chat-message [data-prose]) :where(table),
+:where(helix-chat-message) :where(helix-table) {
+  padding-inline: var(--helix-space-sm);
+}
+:where(helix-chat-message[data-prose], helix-chat-message [data-prose]) :where(table) {
+  border-collapse: separate;
+  border-spacing: 0;
+  display: table;
+  inline-size: 100%;
+}
+:where(helix-chat-message[data-prose], helix-chat-message [data-prose]) :where(th, td) {
+  padding-block: var(--helix-space-xs);
+  padding-inline: var(--helix-space-none) var(--helix-space-md);
+}
+:where(helix-chat-message[data-prose], helix-chat-message [data-prose]) :where(h1) {
+  font-size: var(--helix-text-xl);
+}
+:where(helix-chat-message[data-prose], helix-chat-message [data-prose]) :where(h2) {
+  font-size: var(--helix-text-lg);
+}
+:where(helix-chat-message[data-prose], helix-chat-message [data-prose]) :where(h3) {
+  font-size: var(--helix-text-md);
+}
+:where(helix-chat-message[data-prose], helix-chat-message [data-prose]) :where(h4, h5, h6) {
+  font-size: var(--helix-text-sm);
+}
+:where(helix-chat-message[data-prose], helix-chat-message [data-prose])
+:where(h1, h2, h3, h4, h5, h6) {
+  font-weight: var(--helix-weight-medium);
+  margin-block: var(--helix-space-md) var(--helix-space-sm);
+}
+:where(helix-chat-message[data-prose], helix-chat-message [data-prose])
+  :where(h1, h2, h3, h4, h5, h6):first-child {
+  margin-block-start: var(--helix-space-none);
+}
+:where(helix-chat-message) :where(helix-table) {
+  --helix-size-control: var(--helix-size-control-sm);
+}
+:where(helix-chat-message) :where(helix-code-block) {
+  --code-block-background-color: var(--helix-color-surface-sunken);
+}
+:where(helix-chat-message) :where(helix-table-row:last-of-type > helix-table-cell) {
+  border-block-end-color: transparent;
+}
+:where(helix-chat-message)
+  :where(helix-list[kind="ordered"], helix-list[kind="unordered"])
+  > :where(helix-list-item) {
+  --list-item-padding: var(--helix-space-2xs) var(--helix-space-none);
+}
 :where([data-prose] blockquote) {
   border-inline-start: var(--helix-border-thick) solid var(--helix-color-border);
   color: var(--helix-color-foreground-muted);
@@ -700,6 +795,46 @@ helix-toast:not([data-color-mode]) {
   border-block-start: var(--helix-border-thin) solid var(--helix-color-border);
   margin-block: var(--helix-space-md);
 }
+:where(helix-chat-message[data-prose], helix-chat-message [data-prose]) :where(:not(pre) > code) {
+  background-color: color-mix(in oklab, var(--helix-color-foreground) 6%, transparent);
+  border-radius: var(--helix-radii-sm);
+  color: color-mix(
+    in oklab,
+    var(--helix-color-foreground) 30%,
+    var(--helix-color-foreground-muted)
+  );
+  font-size: calc(var(--helix-text-sm) / var(--helix-text-md) * 1em);
+  padding-inline: calc(var(--helix-space-2xs) * 0.5);
+}
+:where(helix-chat-message[data-prose], helix-chat-message [data-prose]) :where(ul, ol) {
+  padding-inline-start: var(--helix-space-md);
+}
+:where(helix-chat-message[data-prose], helix-chat-message [data-prose]) :where(li) {
+  margin-block: var(--helix-space-none);
+  padding-block: var(--helix-space-2xs);
+}
+:where(helix-chat-message[data-prose], helix-chat-message [data-prose]) :where(blockquote) {
+  background-color: var(--helix-color-surface-sunken);
+  border: none;
+  border-radius: var(--helix-radii-sm);
+  color: var(--helix-color-foreground);
+  overflow: hidden;
+  padding: var(--helix-space-md);
+  padding-inline-start: calc(var(--helix-space-md) + var(--helix-border-thick));
+  position: relative;
+}
+:where(helix-chat-message[data-prose], helix-chat-message [data-prose])
+:where(blockquote > :last-child) {
+  margin-block-end: var(--helix-space-none);
+}
+:where(helix-chat-message[data-prose], helix-chat-message [data-prose]) :where(blockquote)::before {
+  background-color: var(--helix-color-foreground-subtle);
+  content: "";
+  inline-size: var(--helix-border-thick);
+  inset-block: 0;
+  inset-inline-start: 0;
+  position: absolute;
+}
 :where(:focus-visible) {
   outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
   outline-offset: var(--helix-size-focus-offset);
@@ -737,7 +872,8 @@ helix-toast:not([data-color-mode]) {
     color-mix(in oklab, var(--helix-color-primary) 32%, transparent)
   );
 }
-[data-hidden-visually] {
+[data-hidden-visually],
+helix-skip-link:not(:focus-within) {
   block-size: 1px;
   border: var(--helix-space-none);
   clip-path: inset(50%);

package/dist/elements.css

@@ -3,6 +3,7 @@ helix-accordion:not(:defined),
 helix-accordion-item:not(:defined),
 helix-announcement:not(:defined),
 helix-app-header:not(:defined),
+helix-area-chart:not(:defined),
 helix-aura:not(:defined),
 helix-avatar:not(:defined),
 helix-avatar-group:not(:defined),
@@ -31,6 +32,8 @@ helix-copy-button:not(:defined),
 helix-data-table:not(:defined),
 helix-date-input:not(:defined),
 helix-date-picker:not(:defined),
+helix-description-list:not(:defined),
+helix-description-list-item:not(:defined),
 helix-dialog:not(:defined),
 helix-divider:not(:defined),
 helix-donut-chart:not(:defined),
@@ -39,7 +42,11 @@ helix-drilldown:not(:defined),
 helix-drilldown-item:not(:defined),
 helix-empty:not(:defined),
 helix-file-input:not(:defined),
+helix-filter-chip:not(:defined),
+helix-filter-field:not(:defined),
 helix-filter-input:not(:defined),
+helix-filter-menu:not(:defined),
+helix-filter-operator:not(:defined),
 helix-flex:not(:defined),
 helix-format-date:not(:defined),
 helix-grid:not(:defined),
@@ -61,8 +68,10 @@ helix-menu-item:not(:defined),
 helix-meter:not(:defined),
 helix-navigation:not(:defined),
 helix-notification:not(:defined),
+helix-notification-group:not(:defined),
 helix-notifications:not(:defined),
 helix-number-input:not(:defined),
+helix-object-inspector:not(:defined),
 helix-option:not(:defined),
 helix-option-group:not(:defined),
 helix-orb:not(:defined),
@@ -84,9 +93,11 @@ helix-sandbox-source:not(:defined),
 helix-sandbox-status-bar:not(:defined),
 helix-sandbox-terminal:not(:defined),
 helix-sandbox-toolbar:not(:defined),
+helix-scatter-chart:not(:defined),
 helix-scroll-area:not(:defined),
 helix-select:not(:defined),
 helix-skeleton:not(:defined),
+helix-skip-link:not(:defined),
 helix-slider:not(:defined),
 helix-sparkline:not(:defined),
 helix-speed-dial:not(:defined),
@@ -134,6 +145,7 @@ helix-accordion[align],
 helix-accordion-item[align],
 helix-announcement[align],
 helix-app-header[align],
+helix-area-chart[align],
 helix-aura[align],
 helix-avatar[align],
 helix-avatar-group[align],
@@ -162,6 +174,8 @@ helix-copy-button[align],
 helix-data-table[align],
 helix-date-input[align],
 helix-date-picker[align],
+helix-description-list[align],
+helix-description-list-item[align],
 helix-dialog[align],
 helix-divider[align],
 helix-donut-chart[align],
@@ -170,7 +184,11 @@ helix-drilldown[align],
 helix-drilldown-item[align],
 helix-empty[align],
 helix-file-input[align],
+helix-filter-chip[align],
+helix-filter-field[align],
 helix-filter-input[align],
+helix-filter-menu[align],
+helix-filter-operator[align],
 helix-flex[align],
 helix-format-date[align],
 helix-grid[align],
@@ -192,8 +210,10 @@ helix-menu-item[align],
 helix-meter[align],
 helix-navigation[align],
 helix-notification[align],
+helix-notification-group[align],
 helix-notifications[align],
 helix-number-input[align],
+helix-object-inspector[align],
 helix-option[align],
 helix-option-group[align],
 helix-orb[align],
@@ -215,9 +235,11 @@ helix-sandbox-source[align],
 helix-sandbox-status-bar[align],
 helix-sandbox-terminal[align],
 helix-sandbox-toolbar[align],
+helix-scatter-chart[align],
 helix-scroll-area[align],
 helix-select[align],
 helix-skeleton[align],
+helix-skip-link[align],
 helix-slider[align],
 helix-sparkline[align],
 helix-speed-dial[align],

package/dist/primitives.css

@@ -2,10 +2,14 @@
 :root,
 [data-helix-theme] {
   --_helix-seed-brand: var(--helix-seed-brand, oklch(0.539 0.19 258));
-  --helix-seed-accent-hue: 180;
+  --helix-seed-accent-hue: 0;
+  --_helix-accent-lightness: var(--helix-seed-accent-lightness, l);
   --_helix-seed-accent: var(
     --helix-seed-accent,
-    oklch(from var(--_helix-seed-brand) l c calc(h + var(--helix-seed-accent-hue)))
+    oklch(
+      from var(--_helix-seed-brand) var(--_helix-accent-lightness) c
+        calc(h + var(--helix-seed-accent-hue))
+    )
   );
   --_helix-seed-chroma-scale: var(--helix-seed-chroma-scale, 1);
   --_helix-seed-neutral-chroma: var(--helix-seed-neutral-chroma, 0);
@@ -47,7 +51,7 @@
   --_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.12) c h);
+  --_helix-accent-400: oklch(from var(--_helix-seed-accent) calc(l + 0.13) 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-info-500: oklch(0.58 0.16 245);

package/dist/tokens.css

@@ -68,7 +68,7 @@
   --helix-color-accent-surface-hover: var(--_helix-accent-700);
   --helix-color-primary-surface: var(--_helix-brand-600);
   --helix-color-primary-surface-hover: var(--_helix-brand-700);
-  --helix-color-focus-ring: var(--_helix-brand-500);
+  --helix-color-focus-ring: var(--helix-color-primary);
   --helix-color-brand-mark: light-dark(var(--_helix-brand-500), var(--_helix-brand-400));
   --helix-color-syntax-callable: light-dark(
     var(--_helix-syntax-callable-light),
@@ -346,6 +346,30 @@
   --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-primary-muted: light-dark(
+    oklch(from var(--_helix-brand-500) l calc(c * 0.5) h),
+    oklch(from var(--_helix-brand-400) l calc(c * 0.5) h)
+  );
+  --helix-color-accent-muted: light-dark(
+    oklch(from var(--_helix-accent-500) l calc(c * 0.5) h),
+    oklch(from var(--_helix-accent-400) l calc(c * 0.5) h)
+  );
+  --helix-color-danger-muted: light-dark(
+    oklch(from var(--_helix-danger-600) l calc(c * 0.5) h),
+    oklch(from var(--_helix-danger-400) l calc(c * 0.5) h)
+  );
+  --helix-color-info-muted: light-dark(
+    oklch(from var(--_helix-info-600) l calc(c * 0.5) h),
+    oklch(from var(--_helix-info-400) l calc(c * 0.5) h)
+  );
+  --helix-color-success-muted: light-dark(
+    oklch(from var(--_helix-success-600) l calc(c * 0.5) h),
+    oklch(from var(--_helix-success-400) l calc(c * 0.5) h)
+  );
+  --helix-color-warning-muted: light-dark(
+    oklch(from var(--_helix-warning-600) l calc(c * 0.5) h),
+    oklch(from var(--_helix-warning-400) l calc(c * 0.5) h)
+  );
   --helix-color-danger-surface: var(--_helix-danger-600);
   --helix-color-danger-surface-hover: var(--_helix-danger-700);
   --helix-color-info-surface: var(--_helix-info-600);

package/dist/tokens.json

@@ -16,7 +16,7 @@
     "size",
     "layer"
   ],
-  "count": 185,
+  "count": 191,
   "groups": {
     "separation-policy": ["border-surface", "shadow-surface", "border-floating", "shadow-floating"],
     "surface-ladder": [
@@ -176,7 +176,7 @@
     {
       "category": "color",
       "name": "--helix-color-focus-ring",
-      "value": "var(--_helix-brand-500)"
+      "value": "var(--helix-color-primary)"
     },
     {
       "category": "color",
@@ -363,6 +363,36 @@
       "name": "--helix-color-danger",
       "value": "light-dark(var(--_helix-danger-600), var(--_helix-danger-400))"
     },
+    {
+      "category": "color",
+      "name": "--helix-color-primary-muted",
+      "value": "light-dark(oklch(from var(--_helix-brand-500) l calc(c * 0.5) h), oklch(from var(--_helix-brand-400) l calc(c * 0.5) h))"
+    },
+    {
+      "category": "color",
+      "name": "--helix-color-accent-muted",
+      "value": "light-dark(oklch(from var(--_helix-accent-500) l calc(c * 0.5) h), oklch(from var(--_helix-accent-400) l calc(c * 0.5) h))"
+    },
+    {
+      "category": "color",
+      "name": "--helix-color-danger-muted",
+      "value": "light-dark(oklch(from var(--_helix-danger-600) l calc(c * 0.5) h), oklch(from var(--_helix-danger-400) l calc(c * 0.5) h))"
+    },
+    {
+      "category": "color",
+      "name": "--helix-color-info-muted",
+      "value": "light-dark(oklch(from var(--_helix-info-600) l calc(c * 0.5) h), oklch(from var(--_helix-info-400) l calc(c * 0.5) h))"
+    },
+    {
+      "category": "color",
+      "name": "--helix-color-success-muted",
+      "value": "light-dark(oklch(from var(--_helix-success-600) l calc(c * 0.5) h), oklch(from var(--_helix-success-400) l calc(c * 0.5) h))"
+    },
+    {
+      "category": "color",
+      "name": "--helix-color-warning-muted",
+      "value": "light-dark(oklch(from var(--_helix-warning-600) l calc(c * 0.5) h), oklch(from var(--_helix-warning-400) l calc(c * 0.5) h))"
+    },
     {
       "category": "color",
       "name": "--helix-color-danger-surface",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@fusion.dev/helix-styles",
   "description": "Design tokens and base layer. Pure CSS, no JavaScript.",
-  "version": "0.22.0",
+  "version": "0.24.0",
   "license": "MIT",
   "author": "Ross Sheppard <ross.sheppard@fusion.dev>",
   "repository": {