@fusion.dev/helix-styles 0.145.0 → 0.147.0

package/dist/base.css

@@ -459,7 +459,7 @@ helix-toggle::part(item) {
   block-size: var(--_toggle-height, auto);
   border: none;
   border-radius: var(--_toggle-radius, var(--helix-radii-sm));
-  color: var(--helix-color-foreground-muted);
+  color: var(--toggle-item-color, var(--helix-color-foreground-muted));
   cursor: pointer;
   display: inline-flex;
   flex: 1 1 auto;
@@ -467,7 +467,7 @@ helix-toggle::part(item) {
   font-size: var(--helix-text-sm);
   font-weight: var(--helix-weight-medium);
   justify-content: center;
-  padding-inline: var(--helix-space-sm);
+  padding-inline: var(--toggle-item-padding-inline, var(--helix-space-sm));
   text-decoration: none;
   background-color: transparent;
   transition:
@@ -484,10 +484,10 @@ helix-toggle-group helix-toggle::part(item):hover {
 }
 helix-toggle:state(selected)::part(item) {
   background-color: transparent;
-  color: var(--helix-color-foreground);
+  color: var(--toggle-item-color-selected, var(--helix-color-foreground));
 }
 helix-toggle:state(pressed)::part(item) {
-  color: var(--helix-color-foreground);
+  color: var(--toggle-item-color-selected, var(--helix-color-foreground));
 }
 helix-toggle[disabled]::part(item) {
   cursor: not-allowed;
@@ -501,13 +501,13 @@ helix-toggle[disabled]::part(item) {
   font-family: var(--helix-font-sans);
   block-size: 100%;
   min-block-size: var(--helix-size-control-sm);
-  border-radius: var(--helix-radii-sm);
+  border-radius: var(--navigation-item-radius, var(--helix-radii-sm));
   color: var(--navigation-item-color, var(--helix-color-foreground-muted));
   display: inline-flex;
-  font-size: var(--helix-text-sm);
-  font-weight: var(--helix-weight-medium);
+  font-size: var(--navigation-item-font-size, var(--helix-text-sm));
+  font-weight: var(--navigation-item-font-weight, var(--helix-weight-medium));
   justify-content: center;
-  padding-inline: var(--helix-space-sm);
+  padding-inline: var(--navigation-item-padding-inline, var(--helix-space-sm));
   text-decoration: none;
   transition:
     background-color var(--helix-duration-fast) var(--helix-easing-standard),
@@ -518,8 +518,45 @@ helix-toggle[disabled]::part(item) {
   justify-content: start;
 }
 :where([data-navigation-item], helix-navigation a):hover {
-  background-color: color-mix(in oklab, var(--helix-color-foreground) 5%, transparent);
-  color: var(--helix-color-foreground);
+  background-color: var(
+    --navigation-item-hover-background-color,
+    color-mix(in oklab, var(--helix-color-foreground) 5%, transparent)
+  );
+  color: var(--navigation-item-hover-color, var(--helix-color-foreground));
+}
+:where(helix-outline) :where(ul, ol) {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+:where(helix-outline) :where(ul, ol) :where(ul, ol) {
+  padding-inline-start: var(--outline-indent, var(--helix-space-sm));
+}
+:where(helix-outline) :where(li) > :where(a) {
+  border-radius: var(--outline-link-radius, var(--helix-radii-sm));
+  color: var(--outline-link-color, var(--helix-color-foreground-muted));
+  display: block;
+  font-size: var(--outline-link-font-size, var(--helix-text-xs));
+  font-weight: var(--helix-weight-medium);
+  line-height: var(--helix-leading-normal);
+  margin-inline-start: var(--outline-rail, var(--helix-space-2xs));
+  padding-block: var(--outline-link-padding-block, var(--helix-space-2xs));
+  padding-inline: var(--outline-link-padding-inline, var(--helix-space-sm));
+  text-decoration: none;
+  transition:
+    background-color var(--helix-duration-fast) var(--helix-easing-standard),
+    color var(--helix-duration-fast) var(--helix-easing-standard);
+}
+:where(helix-outline) :where(li) > :where(a):hover {
+  background-color: var(
+    --outline-link-hover-background-color,
+    color-mix(in oklab, var(--helix-color-foreground) 5%, transparent)
+  );
+  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));
 }
 [data-dock] {
   --_dock-inset: var(--helix-space-lg);
@@ -634,7 +671,7 @@ helix-toggle[disabled]::part(item) {
 }
 :where([data-navigation-item], helix-navigation a)[aria-current="page"] {
   color: var(--navigation-item-current-color, var(--helix-color-foreground));
-  font-weight: var(--helix-weight-semibold);
+  font-weight: var(--navigation-item-current-font-weight, var(--helix-weight-semibold));
 }
 :where([data-navigation-item], helix-navigation a) {
   position: relative;
@@ -904,8 +941,7 @@ helix-toast:not([data-color-mode]) {
     color-mix(in oklab, var(--helix-color-primary) 32%, transparent)
   );
 }
-[data-hidden-visually],
-helix-skip-link:not(:focus-within) {
+[data-hidden-visually] {
   block-size: 1px;
   border: var(--helix-space-none);
   clip-path: inset(50%);

package/dist/elements.css

@@ -92,6 +92,7 @@ helix-number-input:not(:defined),
 helix-object-inspector:not(:defined),
 helix-option:not(:defined),
 helix-option-group:not(:defined),
+helix-option-separator:not(:defined),
 helix-orb:not(:defined),
 helix-outline:not(:defined),
 helix-pagination:not(:defined),
@@ -254,6 +255,7 @@ helix-number-input[align],
 helix-object-inspector[align],
 helix-option[align],
 helix-option-group[align],
+helix-option-separator[align],
 helix-orb[align],
 helix-outline[align],
 helix-pagination[align],

package/package.json

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