@threadlabs/looma 0.41.1 → 0.42.0

package/styles/ui-switch.css

@@ -99,7 +99,8 @@
       width: var(--_thumb);
       height: var(--_thumb);
       border-radius: var(--ui-radius-round);
-      background: var(--ui-text-secondary);
+      background-color: var(--ui-text-secondary);
+      background-image: var(--ui-knob-highlight, none);
       box-shadow: var(--ui-shadow-xs);
       transition: transform var(--ui-motion-base) var(--ui-motion-ease), background-color var(--ui-motion-base) var(--ui-motion-ease);
     }
@@ -112,7 +113,8 @@
 
     input:checked:where(:not([data-component], [data-slotted]))::after {
       transform: translateX(calc(var(--_ui-switch-track-width) - var(--_ui-switch-track-height)));
-      background: var(--ui-text-on-accent);
+      background-color: var(--ui-text-on-accent);
+      background-image: var(--ui-knob-on-accent-highlight, none);
     }
 
     input:focus-visible {
@@ -137,6 +139,7 @@
 
     :scope:where([data-component~="ui-switch"])[data-ui-switch-state~="disabled"] input:where(:not([data-component], [data-slotted]))::after {
       background-color: var(--ui-disabled-text);
+      background-image: none;
       box-shadow: none;
     }
 

package/styles/ui-tabs.css

@@ -150,8 +150,8 @@
     }
     .list button[aria-selected="true"],
     .list > :where([data-slotted], [data-slotted] *):is(button[slot="tab"][aria-selected="true"]) {
-      color: var(--ui-accent-solid);
-      border-block-end-color: var(--ui-accent-solid);
+      color: var(--ui-accent-subtle-text);
+      border-block-end-color: var(--ui-accent-subtle-text);
     }
     .list button:focus-visible,
     .list > :where([data-slotted], [data-slotted] *):is(button[slot="tab"]:focus-visible) {
@@ -174,7 +174,7 @@
 
     :scope:where([data-component~="ui-tabs"])[data-ui-tabs-state~="orientation=vertical"] .list button[aria-selected="true"],
     :scope:where([data-component~="ui-tabs"])[data-ui-tabs-state~="orientation=vertical"] .list > :where([data-slotted], [data-slotted] *):is(button[slot="tab"][aria-selected="true"]) {
-      border-inline-end-color: var(--ui-accent-solid);
+      border-inline-end-color: var(--ui-accent-subtle-text);
     }
 
     @media (prefers-reduced-motion: reduce) {

package/styles/ui-text.css

@@ -59,7 +59,7 @@
       color: var(--ui-text-muted);
     }
     :scope:where([data-component~="ui-text"])[data-ui-text-state~="tone=accent"] {
-      color: var(--ui-accent-active);
+      color: var(--ui-accent-subtle-text);
     }
     /* Every status tone uses the text-safe token a subtle badge sets its words in, so text and badges
        in one tone match, and each holds 4.5:1 on sunken surfaces where some base colours fall short. */
@@ -165,7 +165,7 @@
     /* A link in running text is underlined, so it stands apart from the words around it by more than
        colour. */
     :scope:where([data-component~="ui-text"]) :where([data-slotted], [data-slotted] *):is(a) {
-      color: var(--ui-accent-active);
+      color: var(--ui-accent-subtle-text);
       text-decoration: underline;
       text-decoration-thickness: 0.06em;
       text-underline-offset: 0.18em;

package/styles/ui-tooltip.css

@@ -104,12 +104,12 @@
     }
 
     /* Purpose and measured size shape one shared separation lever. The content plane stays opaque;
-       transparency, saturation and edge light belong to the surrounding decorative material. */
+       transparency, frosting and edge light belong to the surrounding decorative material. */
     .surface {
-      --_ui-material-glassiness: calc(clamp(0, var(--ui-glassiness, 0), 1) + 2 * pow(clamp(0, var(--ui-glassiness, 0), 1), 4));
+      --_ui-material-glassiness: clamp(0, var(--ui-glassiness, 0), 1);
       --_ui-material-separation: clamp(0, var(--ui-surface-separation, 0), 1);
-      --_ui-material-active: clamp(0, calc((var(--_ui-material-glassiness) + var(--_ui-material-separation)) * 100000), 1);
-      --_ui-material-rim: calc((var(--_ui-material-separation) + var(--_ui-material-glassiness) * 0.25) * var(--_ui-material-scale, 0.08) * 8px);
+      --_ui-material-active: clamp(0, calc(var(--_ui-material-separation) * 100000), 1);
+      --_ui-material-rim: calc(var(--_ui-material-separation) * var(--_ui-material-scale, 0.08) * 8px);
       --_ui-material-content-color: var(--_ui-tooltip-surface, var(--ui-material-content, var(--ui-overlay-surface, var(--ui-surface-elevated))));
       --_ui-material-rim-color: color-mix(in srgb, var(--ui-material-glass, var(--ui-surface-elevated)) calc(var(--_ui-material-active) * 100%), transparent);
       background:
@@ -132,10 +132,8 @@
           var(--ui-elevation-tooltip, var(--ui-shadow-md))
         )
       );
-      backdrop-filter: blur(calc(var(--_ui-material-glassiness) * var(--_ui-material-scale, 0.08) * 18px))
-        saturate(calc(1 + var(--_ui-material-glassiness) * var(--_ui-material-scale, 0.08) * 0.18));
-      -webkit-backdrop-filter: blur(calc(var(--_ui-material-glassiness) * var(--_ui-material-scale, 0.08) * 18px))
-        saturate(calc(1 + var(--_ui-material-glassiness) * var(--_ui-material-scale, 0.08) * 0.18));
+      -webkit-backdrop-filter: blur(calc(var(--_ui-material-glassiness) * var(--_ui-material-scale, 0.08) * 32px));
+      backdrop-filter: blur(calc(var(--_ui-material-glassiness) * var(--_ui-material-scale, 0.08) * 32px));
     }
 
     @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
@@ -147,8 +145,8 @@
     @media (prefers-reduced-transparency: reduce) {
       .surface {
         background: var(--_ui-material-content-color);
-        backdrop-filter: none;
         -webkit-backdrop-filter: none;
+        backdrop-filter: none;
       }
     }
 
@@ -157,8 +155,8 @@
         background: Canvas;
         border-color: CanvasText;
         box-shadow: none;
-        backdrop-filter: none;
         -webkit-backdrop-filter: none;
+        backdrop-filter: none;
       }
     }
 
@@ -288,7 +286,7 @@
     /* The label and the shortcut sit side by side, a gap apart, with the label wrapping on its own. */
 
     /* Purpose and measured size shape one shared separation lever. The content plane stays opaque;
-       transparency, saturation and edge light belong to the surrounding decorative material. */
+       transparency, frosting and edge light belong to the surrounding decorative material. */
 
     @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
     }

package/theme-system.css

@@ -101,17 +101,19 @@
     /* Decorative outer material is allowed to transmit the scene. Content keeps
        its own opaque plane; changing the scene cannot undermine text contrast. */
     --ui-material-content: var(--ui-surface-raised);
-    --ui-material-glass: color-mix(in srgb, var(--ui-surface-raised) calc((1 - clamp(0, var(--ui-overlay-translucency), 1)) * 35%), transparent);
+    --ui-material-glass: color-mix(in srgb, var(--ui-surface-raised) calc((1 - clamp(0, var(--ui-overlay-translucency), 1)) * 100%), transparent);
     --ui-material-edge: color-mix(in srgb, var(--ui-surface-raised) 80%, var(--ui-text));
     /* Each role has a bounded reflection colour. Shared source coordinates are
        relative to each surface, so size and position never change the lighting. */
-    --ui-surface-highlight: radial-gradient(ellipse calc(35% + var(--ui-light-spread) * 165%) calc(55% + var(--ui-light-spread) * 200%) at calc(var(--ui-light-x) * 100%) calc(var(--ui-light-y) * 100%), color-mix(in srgb, var(--ui-surface-reflection, var(--ui-surface-raised)) calc(var(--ui-finish) * var(--ui-light-strength) * 100%), transparent), transparent 85%);
-    --ui-neutral-highlight: radial-gradient(ellipse calc(35% + var(--ui-light-spread) * 165%) calc(55% + var(--ui-light-spread) * 200%) at calc(var(--ui-light-x) * 100%) calc(var(--ui-light-y) * 100%), color-mix(in srgb, var(--ui-neutral-reflection, var(--ui-surface-raised)) calc(var(--ui-finish) * var(--ui-light-strength) * 100%), transparent), transparent 85%);
-    --ui-accent-highlight: radial-gradient(ellipse calc(35% + var(--ui-light-spread) * 165%) calc(55% + var(--ui-light-spread) * 200%) at calc(var(--ui-light-x) * 100%) calc(var(--ui-light-y) * 100%), color-mix(in srgb, var(--ui-accent-reflection, var(--ui-surface-raised)) calc(var(--ui-finish) * var(--ui-light-strength) * 100%), transparent), transparent 85%);
-    --ui-danger-highlight: radial-gradient(ellipse calc(35% + var(--ui-light-spread) * 165%) calc(55% + var(--ui-light-spread) * 200%) at calc(var(--ui-light-x) * 100%) calc(var(--ui-light-y) * 100%), color-mix(in srgb, var(--ui-danger-reflection, var(--ui-surface-raised)) calc(var(--ui-finish) * var(--ui-light-strength) * 100%), transparent), transparent 85%);
-    --ui-success-highlight: radial-gradient(ellipse calc(35% + var(--ui-light-spread) * 165%) calc(55% + var(--ui-light-spread) * 200%) at calc(var(--ui-light-x) * 100%) calc(var(--ui-light-y) * 100%), color-mix(in srgb, var(--ui-success-reflection, var(--ui-surface-raised)) calc(var(--ui-finish) * var(--ui-light-strength) * 100%), transparent), transparent 85%);
-    --ui-warning-highlight: radial-gradient(ellipse calc(35% + var(--ui-light-spread) * 165%) calc(55% + var(--ui-light-spread) * 200%) at calc(var(--ui-light-x) * 100%) calc(var(--ui-light-y) * 100%), color-mix(in srgb, var(--ui-warning-reflection, var(--ui-surface-raised)) calc(var(--ui-finish) * var(--ui-light-strength) * 100%), transparent), transparent 85%);
-    --ui-info-highlight: radial-gradient(ellipse calc(35% + var(--ui-light-spread) * 165%) calc(55% + var(--ui-light-spread) * 200%) at calc(var(--ui-light-x) * 100%) calc(var(--ui-light-y) * 100%), color-mix(in srgb, var(--ui-info-reflection, var(--ui-surface-raised)) calc(var(--ui-finish) * var(--ui-light-strength) * 100%), transparent), transparent 85%);
+    --ui-surface-highlight: radial-gradient(ellipse calc(35% + var(--ui-light-spread) * 165%) calc(55% + var(--ui-light-spread) * 200%) at calc(var(--ui-light-x) * 100%) calc(var(--ui-light-y) * 100%) in srgb, color-mix(in srgb, var(--ui-surface-specular, var(--ui-surface-reflection, var(--ui-surface-raised))) calc(var(--ui-finish) * var(--ui-light-strength) * 100%), transparent), color-mix(in srgb, var(--ui-surface-reflection, var(--ui-surface-raised)) calc(var(--ui-finish) * var(--ui-light-strength) * 75%), transparent) 8%, transparent 28%, color-mix(in srgb, var(--ui-surface-shade, var(--ui-surface-raised)) calc(var(--ui-finish) * var(--ui-light-strength) * 35%), transparent) 100%);
+    --ui-neutral-highlight: radial-gradient(ellipse calc(35% + var(--ui-light-spread) * 165%) calc(55% + var(--ui-light-spread) * 200%) at calc(var(--ui-light-x) * 100%) calc(var(--ui-light-y) * 100%) in srgb, color-mix(in srgb, var(--ui-neutral-specular, var(--ui-neutral-reflection, var(--ui-surface-raised))) calc(var(--ui-finish) * var(--ui-light-strength) * 100%), transparent), color-mix(in srgb, var(--ui-neutral-reflection, var(--ui-surface-raised)) calc(var(--ui-finish) * var(--ui-light-strength) * 75%), transparent) 8%, transparent 28%, color-mix(in srgb, var(--ui-neutral-shade, var(--ui-surface-raised)) calc(var(--ui-finish) * var(--ui-light-strength) * 35%), transparent) 100%);
+    --ui-knob-highlight: radial-gradient(ellipse calc(35% + var(--ui-light-spread) * 165%) calc(55% + var(--ui-light-spread) * 200%) at calc(var(--ui-light-x) * 100%) calc(var(--ui-light-y) * 100%) in srgb, color-mix(in srgb, var(--ui-knob-specular, var(--ui-knob-reflection, var(--ui-surface-raised))) calc(var(--ui-finish) * var(--ui-light-strength) * 100%), transparent), color-mix(in srgb, var(--ui-knob-reflection, var(--ui-surface-raised)) calc(var(--ui-finish) * var(--ui-light-strength) * 75%), transparent) 8%, transparent 28%, color-mix(in srgb, var(--ui-knob-shade, var(--ui-surface-raised)) calc(var(--ui-finish) * var(--ui-light-strength) * 35%), transparent) 100%);
+    --ui-knob-on-accent-highlight: radial-gradient(ellipse calc(35% + var(--ui-light-spread) * 165%) calc(55% + var(--ui-light-spread) * 200%) at calc(var(--ui-light-x) * 100%) calc(var(--ui-light-y) * 100%) in srgb, color-mix(in srgb, var(--ui-knob-on-accent-specular, var(--ui-knob-on-accent-reflection, var(--ui-surface-raised))) calc(var(--ui-finish) * var(--ui-light-strength) * 100%), transparent), color-mix(in srgb, var(--ui-knob-on-accent-reflection, var(--ui-surface-raised)) calc(var(--ui-finish) * var(--ui-light-strength) * 75%), transparent) 8%, transparent 28%, color-mix(in srgb, var(--ui-knob-on-accent-shade, var(--ui-surface-raised)) calc(var(--ui-finish) * var(--ui-light-strength) * 35%), transparent) 100%);
+    --ui-accent-highlight: radial-gradient(ellipse calc(35% + var(--ui-light-spread) * 165%) calc(55% + var(--ui-light-spread) * 200%) at calc(var(--ui-light-x) * 100%) calc(var(--ui-light-y) * 100%) in srgb, color-mix(in srgb, var(--ui-accent-specular, var(--ui-accent-reflection, var(--ui-surface-raised))) calc(var(--ui-finish) * var(--ui-light-strength) * 100%), transparent), color-mix(in srgb, var(--ui-accent-reflection, var(--ui-surface-raised)) calc(var(--ui-finish) * var(--ui-light-strength) * 75%), transparent) 8%, transparent 28%, color-mix(in srgb, var(--ui-accent-shade, var(--ui-surface-raised)) calc(var(--ui-finish) * var(--ui-light-strength) * 35%), transparent) 100%);
+    --ui-danger-highlight: radial-gradient(ellipse calc(35% + var(--ui-light-spread) * 165%) calc(55% + var(--ui-light-spread) * 200%) at calc(var(--ui-light-x) * 100%) calc(var(--ui-light-y) * 100%) in srgb, color-mix(in srgb, var(--ui-danger-specular, var(--ui-danger-reflection, var(--ui-surface-raised))) calc(var(--ui-finish) * var(--ui-light-strength) * 100%), transparent), color-mix(in srgb, var(--ui-danger-reflection, var(--ui-surface-raised)) calc(var(--ui-finish) * var(--ui-light-strength) * 75%), transparent) 8%, transparent 28%, color-mix(in srgb, var(--ui-danger-shade, var(--ui-surface-raised)) calc(var(--ui-finish) * var(--ui-light-strength) * 35%), transparent) 100%);
+    --ui-success-highlight: radial-gradient(ellipse calc(35% + var(--ui-light-spread) * 165%) calc(55% + var(--ui-light-spread) * 200%) at calc(var(--ui-light-x) * 100%) calc(var(--ui-light-y) * 100%) in srgb, color-mix(in srgb, var(--ui-success-specular, var(--ui-success-reflection, var(--ui-surface-raised))) calc(var(--ui-finish) * var(--ui-light-strength) * 100%), transparent), color-mix(in srgb, var(--ui-success-reflection, var(--ui-surface-raised)) calc(var(--ui-finish) * var(--ui-light-strength) * 75%), transparent) 8%, transparent 28%, color-mix(in srgb, var(--ui-success-shade, var(--ui-surface-raised)) calc(var(--ui-finish) * var(--ui-light-strength) * 35%), transparent) 100%);
+    --ui-warning-highlight: radial-gradient(ellipse calc(35% + var(--ui-light-spread) * 165%) calc(55% + var(--ui-light-spread) * 200%) at calc(var(--ui-light-x) * 100%) calc(var(--ui-light-y) * 100%) in srgb, color-mix(in srgb, var(--ui-warning-specular, var(--ui-warning-reflection, var(--ui-surface-raised))) calc(var(--ui-finish) * var(--ui-light-strength) * 100%), transparent), color-mix(in srgb, var(--ui-warning-reflection, var(--ui-surface-raised)) calc(var(--ui-finish) * var(--ui-light-strength) * 75%), transparent) 8%, transparent 28%, color-mix(in srgb, var(--ui-warning-shade, var(--ui-surface-raised)) calc(var(--ui-finish) * var(--ui-light-strength) * 35%), transparent) 100%);
+    --ui-info-highlight: radial-gradient(ellipse calc(35% + var(--ui-light-spread) * 165%) calc(55% + var(--ui-light-spread) * 200%) at calc(var(--ui-light-x) * 100%) calc(var(--ui-light-y) * 100%) in srgb, color-mix(in srgb, var(--ui-info-specular, var(--ui-info-reflection, var(--ui-surface-raised))) calc(var(--ui-finish) * var(--ui-light-strength) * 100%), transparent), color-mix(in srgb, var(--ui-info-reflection, var(--ui-surface-raised)) calc(var(--ui-finish) * var(--ui-light-strength) * 75%), transparent) 8%, transparent 28%, color-mix(in srgb, var(--ui-info-shade, var(--ui-surface-raised)) calc(var(--ui-finish) * var(--ui-light-strength) * 35%), transparent) 100%);
     /* Keep the low end gentle; the upper range deliberately reaches beyond restrained ornament. */
     --_ui-theme-glow: calc(clamp(0, var(--ui-glow), 1) + 2 * pow(clamp(0, var(--ui-glow), 1), 4));
     --ui-material-glow: 0 0 calc(18px * var(--_ui-theme-glow)) color-mix(in srgb, var(--ui-accent) calc(var(--_ui-theme-glow) * var(--ui-light-strength) * 18%), transparent);

package/tokens.css

@@ -23,8 +23,31 @@
     --ui-surface-raised: #ffffff;
     --ui-surface-sunken: #f0f0ec;
     --ui-text: #1a1a1a;
+    /* The reflected environment is independent of object pigment. */
+    --ui-light-color: #ffffff;
     --ui-focus-halo: 0 0 0 calc(var(--ui-focus-width) * 1.5) color-mix(in srgb, var(--ui-focus-ring) 40%, transparent);
 
+    /* Shared action boundaries follow their fills until a recipe refines the family. */
+    --ui-tonal-opacity: 1;
+    --ui-accent-border: var(--ui-accent);
+    --ui-accent-hover-border: var(--ui-accent-hover);
+    --ui-accent-active-border: var(--ui-accent-active);
+    --ui-danger-border: var(--ui-danger);
+    --ui-danger-hover-border: var(--ui-danger-hover);
+    --ui-danger-active-border: var(--ui-danger-active);
+    --ui-success-border: var(--ui-success);
+    --ui-success-hover-border: var(--ui-success-hover);
+    --ui-success-active-border: var(--ui-success-active);
+    --ui-warning-border: var(--ui-warning);
+    --ui-warning-hover-border: var(--ui-warning-hover);
+    --ui-warning-active-border: var(--ui-warning-active);
+    --ui-info-border: var(--ui-info);
+    --ui-info-hover-border: var(--ui-info-hover);
+    --ui-info-active-border: var(--ui-info-active);
+    --ui-neutral-border: var(--ui-neutral-surface);
+    --ui-neutral-hover-border: var(--ui-neutral-hover);
+    --ui-neutral-active-border: var(--ui-neutral-active);
+
     /* The base type token owns the document root; rem-based roles scale from it once. */
     font-size: var(--ui-font-size);
 

package/vue/UiButton.vue

@@ -1067,12 +1067,15 @@ useComponentHost(() => import('../components/ui-button/ui-button.js'), {
     --_ui-action-shadow:
       var(--_ui-action-edge),
       0 1px 2px light-dark(rgb(0 0 0 / 0.10), rgb(0 0 0 / 0.20));
+    --_tone-border: var(--ui-accent-border, var(--ui-accent));
+    --_tone-hover-border: var(--ui-accent-hover-border, var(--ui-accent-hover));
+    --_tone-active-border: var(--ui-accent-active-border, var(--ui-accent-active));
     --_tone-highlight: var(--ui-accent-highlight, none);
     --_tone-glow: var(--ui-accent-glow, 0 0 transparent);
     --_hue: var(--ui-accent);
     --_hue-hover: var(--ui-accent-hover);
     --_hue-active: var(--ui-accent-active);
-    --_hue-text: var(--ui-accent-active);
+    --_hue-text: var(--ui-accent-subtle-text);
     --_on-hue: var(--ui-on-accent);
 
     --_tone: var(--_hue);
@@ -1110,9 +1113,12 @@ useComponentHost(() => import('../components/ui-button/ui-button.js'), {
     min-block-size: var(--ui-button-min-block-size, var(--ui-control-size-md));
     border-style: solid;
     border-width: var(--ui-border-width);
-    border-color: var(--ui-button-border, var(--_tone));
+    border-color: var(--ui-button-border, var(--_tone-text));
     border-radius: var(--ui-button-radius, var(--ui-action-radius, var(--ui-radius-md)));
-    background-color: var(--ui-button-surface, oklch(from var(--_tone) l c h / 5%));
+    background-color: var(
+      --ui-button-surface,
+      oklch(from var(--_tone) l c h / calc(5% * var(--ui-tonal-opacity, 1)))
+    );
     color: var(--ui-button-text, var(--_tone-text));
     font: inherit;
     font-weight: var(--ui-font-medium);
@@ -1243,8 +1249,11 @@ useComponentHost(() => import('../components/ui-button/ui-button.js'), {
     align-self: center;
   }
   :global(:scope:hover:not(:disabled, [aria-disabled="true"]):where([data-hn-ui-button])) {
-    border-color: var(--ui-button-hover-border, var(--_tone-hover));
-    background-color: var(--ui-button-hover-surface, oklch(from var(--_tone) l c h / 12%));
+    border-color: var(--ui-button-hover-border, var(--_tone-text));
+    background-color: var(
+      --ui-button-hover-surface,
+      oklch(from var(--_tone) l c h / calc(12% * var(--ui-tonal-opacity, 1)))
+    );
   }
 
   :global(:scope[data-appearance="card"][data-tone="neutral"]:where([data-hn-ui-button])) {
@@ -1262,14 +1271,17 @@ useComponentHost(() => import('../components/ui-button/ui-button.js'), {
   }
   :global(:scope:active:not(:disabled, [aria-disabled="true"]):where([data-hn-ui-button])) {
     scale: var(--ui-press-scale, 1);
-    background-color: var(--ui-button-active-surface, oklch(from var(--_tone) l c h / 18%));
+    background-color: var(
+      --ui-button-active-surface,
+      oklch(from var(--_tone) l c h / calc(18% * var(--ui-tonal-opacity, 1)))
+    );
     background-image: none;
     box-shadow: var(--ui-pressed);
   }
 
   :global(:scope[data-appearance="solid"]:where([data-hn-ui-button])),
   :global(:scope[data-appearance="danger"]:where([data-hn-ui-button])) {
-    border-color: var(--_tone);
+    border-color: var(--ui-button-border, var(--_tone-border));
     background-color: var(--_tone);
     color: var(--_on-tone);
     background-image: var(--_tone-highlight);
@@ -1278,18 +1290,22 @@ useComponentHost(() => import('../components/ui-button/ui-button.js'), {
       var(--_tone-glow);
   }
 
-  :global(:is(:scope[data-appearance="solid"], :scope[data-appearance="danger"]):hover:not(:disabled, [aria-disabled="true"]):where([data-hn-ui-button])) {
+  :global(:scope[data-appearance="solid"]:hover:not(:disabled, [aria-disabled="true"]):where([data-hn-ui-button])),
+  :global(:scope[data-appearance="danger"]:hover:not(:disabled, [aria-disabled="true"]):where([data-hn-ui-button])) {
     background-color: var(--_tone-hover);
-    border-color: var(--_tone-hover);
+    border-color: var(--ui-button-hover-border, var(--_tone-hover-border));
   }
 
   :global(:is(:scope[data-appearance="solid"], :scope[data-appearance="danger"]):active:not(:disabled, [aria-disabled="true"]):where([data-hn-ui-button])) {
     background-color: var(--_tone-active);
-    border-color: var(--_tone-active);
+    border-color: var(--_tone-active-border);
     background-image: none;
     box-shadow: var(--ui-pressed);
   }
   :global(:scope[data-tone="neutral"]:where([data-hn-ui-button])) {
+    --_tone-border: var(--ui-neutral-border, var(--ui-neutral-surface));
+    --_tone-hover-border: var(--ui-neutral-hover-border, var(--ui-neutral-hover));
+    --_tone-active-border: var(--ui-neutral-active-border, var(--ui-neutral-active));
     --_tone-highlight: var(--ui-neutral-highlight, none);
     --_tone-glow: var(--ui-neutral-glow, 0 0 transparent);
     --_hue: var(--ui-text);
@@ -1300,7 +1316,7 @@ useComponentHost(() => import('../components/ui-button/ui-button.js'), {
   }
 
   :global(:scope[data-tone="neutral"][data-appearance="solid"]:where([data-hn-ui-button])) {
-    border-color: var(--ui-button-border, var(--ui-control-border));
+    border-color: var(--ui-button-border, var(--_tone-border));
     background-color: var(--ui-button-surface, var(--ui-neutral-surface));
     color: var(--ui-button-text, var(--ui-text));
   }
@@ -1323,14 +1339,19 @@ useComponentHost(() => import('../components/ui-button/ui-button.js'), {
     background-color: var(--ui-button-active-surface, var(--ui-neutral-active));
   }
   :global(:scope[data-tone="neutral"][data-appearance="solid"]:hover:not(:disabled, [aria-disabled="true"]):where([data-hn-ui-button])) {
+    border-color: var(--ui-button-hover-border, var(--_tone-hover-border));
     background-color: var(--ui-button-hover-surface, var(--ui-neutral-hover));
   }
   :global(:scope[data-tone="neutral"][data-appearance="solid"]:active:not(:disabled, [aria-disabled="true"]):where([data-hn-ui-button])) {
+    border-color: var(--_tone-active-border);
     background-color: var(--ui-button-active-surface, var(--ui-neutral-active));
   }
 
   :global(:scope[data-tone="danger"]:where([data-hn-ui-button])),
   :global(:scope[data-appearance="danger"]:where([data-hn-ui-button])) {
+    --_tone-border: var(--ui-danger-border, var(--ui-danger));
+    --_tone-hover-border: var(--ui-danger-hover-border, var(--ui-danger-hover));
+    --_tone-active-border: var(--ui-danger-active-border, var(--ui-danger-active));
     --_tone-highlight: var(--ui-danger-highlight, none);
     --_tone-glow: var(--ui-danger-glow, 0 0 transparent);
     --_hue: var(--ui-danger);
@@ -1341,6 +1362,9 @@ useComponentHost(() => import('../components/ui-button/ui-button.js'), {
   }
 
   :global(:scope[data-tone="success"]:where([data-hn-ui-button])) {
+    --_tone-border: var(--ui-success-border, var(--ui-success));
+    --_tone-hover-border: var(--ui-success-hover-border, var(--ui-success-hover));
+    --_tone-active-border: var(--ui-success-active-border, var(--ui-success-active));
     --_tone-highlight: var(--ui-success-highlight, none);
     --_tone-glow: var(--ui-success-glow, 0 0 transparent);
     --_hue: var(--ui-success);
@@ -1351,6 +1375,9 @@ useComponentHost(() => import('../components/ui-button/ui-button.js'), {
   }
 
   :global(:scope[data-tone="warning"]:where([data-hn-ui-button])) {
+    --_tone-border: var(--ui-warning-border, var(--ui-warning));
+    --_tone-hover-border: var(--ui-warning-hover-border, var(--ui-warning-hover));
+    --_tone-active-border: var(--ui-warning-active-border, var(--ui-warning-active));
     --_tone-highlight: var(--ui-warning-highlight, none);
     --_tone-glow: var(--ui-warning-glow, 0 0 transparent);
     --_hue: var(--ui-warning);
@@ -1361,6 +1388,9 @@ useComponentHost(() => import('../components/ui-button/ui-button.js'), {
   }
 
   :global(:scope[data-tone="info"]:where([data-hn-ui-button])) {
+    --_tone-border: var(--ui-info-border, var(--ui-info));
+    --_tone-hover-border: var(--ui-info-hover-border, var(--ui-info-hover));
+    --_tone-active-border: var(--ui-info-active-border, var(--ui-info-active));
     --_tone-highlight: var(--ui-info-highlight, none);
     --_tone-glow: var(--ui-info-glow, 0 0 transparent);
     --_hue: var(--ui-info);
@@ -1411,7 +1441,10 @@ useComponentHost(() => import('../components/ui-button/ui-button.js'), {
     color: var(--ui-button-ghost-text, var(--_tone-text));
   }
   :global(:scope[data-appearance="ghost"]:hover:not(:disabled, [aria-disabled="true"]):where([data-hn-ui-button])) {
-    background-color: var(--ui-button-ghost-hover-surface, oklch(from var(--_tone) l c h / 10%));
+    background-color: var(
+      --ui-button-ghost-hover-surface,
+      oklch(from var(--_tone) l c h / calc(10% * var(--ui-tonal-opacity, 1)))
+    );
     border-color: transparent;
   }
 

package/vue/UiCallout.vue

@@ -447,7 +447,7 @@ const hostState = computed(() =>
     --_callout-icon: var(--ui-danger-solid);
   }
   :global(.content :where(:not([data-hn-ui-callout])):is(a)) {
-    color: var(--ui-accent-active);
+    color: var(--ui-accent-subtle-text);
     text-decoration: underline;
     text-decoration-thickness: 0.06em;
     text-underline-offset: 0.18em;

package/vue/UiCard.vue

@@ -60,7 +60,7 @@ const propValidityContract = {
       required: false,
       target: { attribute: 'treatment' },
       description:
-        'How much of the theme\'s decorative material the surface expresses. standard preserves its restrained treatment; expressive uses the full material\n      treatment. This does not add elevation or require glass.',
+        'How much of the theme\'s decorative material the surface expresses. standard preserves its restrained treatment; expressive uses the full material\n      treatment. Its glass rim can transmit and frost the surrounding scene while content remains opaque. Surface separation controls the rim, independently of frosting. This does not add elevation or require glass.',
       values: ['standard', 'expressive'],
       default: 'standard',
     },
@@ -329,13 +329,9 @@ const hostState = computed(() =>
   }
 
   :global(:scope[data-ui-card-state~="treatment=expressive"]:where([data-hn-ui-card])) {
-    --_ui-panel-glass: calc(
-      clamp(0, var(--ui-glassiness, 0), 1) + 2 * pow(clamp(0, var(--ui-glassiness, 0), 1), 4)
-    );
+    --_ui-panel-glass: clamp(0, var(--ui-glassiness, 0), 1);
     --_ui-panel-separation: clamp(0, var(--ui-surface-separation, 0), 1);
-    --_ui-panel-rim: calc(
-      (var(--_ui-panel-separation) + var(--_ui-panel-glass) * 0.25) * 0.65 * 8px
-    );
+    --_ui-panel-rim: calc(var(--_ui-panel-separation) * 8px);
     border-width: calc(var(--ui-border-width) + var(--_ui-panel-rim));
     border-color: transparent;
     background:
@@ -350,10 +346,8 @@ const hostState = computed(() =>
       var(--_ui-card-elevation),
       var(--ui-material-glow, 0 0 transparent),
       inset 0 0 0 var(--ui-border-width) var(--ui-material-edge, var(--ui-border-strong));
-    backdrop-filter: blur(calc(var(--_ui-panel-glass) * 0.65 * 18px))
-      saturate(calc(1 + var(--_ui-panel-glass) * 0.65 * 0.18));
-    -webkit-backdrop-filter: blur(calc(var(--_ui-panel-glass) * 0.65 * 18px))
-      saturate(calc(1 + var(--_ui-panel-glass) * 0.65 * 0.18));
+    -webkit-backdrop-filter: blur(calc(var(--_ui-panel-glass) * 32px));
+    backdrop-filter: blur(calc(var(--_ui-panel-glass) * 32px));
   }
   @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
     :global(:scope[data-ui-card-state~="treatment=expressive"]:where([data-hn-ui-card])) {
@@ -365,8 +359,8 @@ const hostState = computed(() =>
       background: var(--_ui-card-surface);
       border-width: var(--ui-border-width);
       border-color: var(--ui-border-strong);
-      backdrop-filter: none;
       -webkit-backdrop-filter: none;
+      backdrop-filter: none;
     }
   }
   @media (forced-colors: active) {
@@ -375,8 +369,8 @@ const hostState = computed(() =>
       color: CanvasText;
       border: var(--ui-border-width) solid CanvasText;
       box-shadow: none;
-      backdrop-filter: none;
       -webkit-backdrop-filter: none;
+      backdrop-filter: none;
     }
   }
 

package/vue/UiCheckbox.vue

@@ -496,7 +496,7 @@ useComponentHost(() => import('../components/ui-checkbox/ui-checkbox.js'), {
     border-color: var(--ui-accent-solid);
     background-color: var(--ui-accent-solid);
     background-image: var(--ui-accent-highlight, none);
-    box-shadow: var(--ui-control-inset);
+    box-shadow: none;
   }
   :global(input:checked:where([data-hn-ui-checkbox])::after) {
     inset: 50% auto auto 50% !important;

package/vue/UiDialog.vue

@@ -372,7 +372,7 @@ useComponentHost(() => import('../components/ui-dialog/ui-dialog.js'), {
 }
 
 /* Purpose and measured size shape one shared separation lever. The content plane stays opaque;
-   transparency, saturation and edge light belong to the surrounding decorative material. */
+   transparency, frosting and edge light belong to the surrounding decorative material. */
 
 /* Own the layout wrapper; nested component roots are outside these scoped rules. */
 
@@ -432,22 +432,10 @@ useComponentHost(() => import('../components/ui-dialog/ui-dialog.js'), {
       overlay var(--ui-dialog-duration, var(--ui-motion-base)) var(--ui-motion-ease) allow-discrete;
   }
   :global(:scope:where([data-hn-ui-dialog])) {
-    --_ui-material-glassiness: calc(
-      clamp(0, var(--ui-glassiness, 0), 1) + 2 * pow(clamp(0, var(--ui-glassiness, 0), 1), 4)
-    );
+    --_ui-material-glassiness: clamp(0, var(--ui-glassiness, 0), 1);
     --_ui-material-separation: clamp(0, var(--ui-surface-separation, 0), 1);
-    --_ui-material-active: clamp(
-      0,
-      calc((var(--_ui-material-glassiness) + var(--_ui-material-separation)) * 100000),
-      1
-    );
-    --_ui-material-rim: calc(
-      (
-        var(--_ui-material-separation) + var(--_ui-material-glassiness) * 0.25
-      ) *
-        var(--_ui-material-scale, 1) *
-        8px
-    );
+    --_ui-material-active: clamp(0, calc(var(--_ui-material-separation) * 100000), 1);
+    --_ui-material-rim: calc(var(--_ui-material-separation) * var(--_ui-material-scale, 1) * 8px);
     --_ui-material-content-color: var(
       --ui-dialog-surface,
       var(--ui-material-content, var(--ui-overlay-surface, var(--ui-surface-elevated)))
@@ -489,12 +477,12 @@ useComponentHost(() => import('../components/ui-dialog/ui-dialog.js'), {
         var(--ui-elevation-dialog, var(--ui-shadow-xl))
       )
     );
-    backdrop-filter: blur(
-      calc(var(--_ui-material-glassiness) * var(--_ui-material-scale, 1) * 18px)
-    ) saturate(calc(1 + var(--_ui-material-glassiness) * var(--_ui-material-scale, 1) * 0.18));
     -webkit-backdrop-filter: blur(
-      calc(var(--_ui-material-glassiness) * var(--_ui-material-scale, 1) * 18px)
-    ) saturate(calc(1 + var(--_ui-material-glassiness) * var(--_ui-material-scale, 1) * 0.18));
+      calc(var(--_ui-material-glassiness) * var(--_ui-material-scale, 1) * 32px)
+    );
+    backdrop-filter: blur(
+      calc(var(--_ui-material-glassiness) * var(--_ui-material-scale, 1) * 32px)
+    );
   }
 
   @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
@@ -506,8 +494,8 @@ useComponentHost(() => import('../components/ui-dialog/ui-dialog.js'), {
   @media (prefers-reduced-transparency: reduce) {
     :global(:scope:where([data-hn-ui-dialog])) {
       background: var(--_ui-material-content-color);
-      backdrop-filter: none;
       -webkit-backdrop-filter: none;
+      backdrop-filter: none;
     }
   }
 
@@ -516,8 +504,8 @@ useComponentHost(() => import('../components/ui-dialog/ui-dialog.js'), {
       background: Canvas;
       border-color: CanvasText;
       box-shadow: none;
-      backdrop-filter: none;
       -webkit-backdrop-filter: none;
+      backdrop-filter: none;
     }
   }
 
@@ -667,22 +655,10 @@ useComponentHost(() => import('../components/ui-dialog/ui-dialog.js'), {
       overlay var(--ui-dialog-duration, var(--ui-motion-base)) var(--ui-motion-ease) allow-discrete;
   }
   :global(:where(.ui-dialog):where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-dialog"]))):where([data-hn-ui-dialog])) {
-    --_ui-material-glassiness: calc(
-      clamp(0, var(--ui-glassiness, 0), 1) + 2 * pow(clamp(0, var(--ui-glassiness, 0), 1), 4)
-    );
+    --_ui-material-glassiness: clamp(0, var(--ui-glassiness, 0), 1);
     --_ui-material-separation: clamp(0, var(--ui-surface-separation, 0), 1);
-    --_ui-material-active: clamp(
-      0,
-      calc((var(--_ui-material-glassiness) + var(--_ui-material-separation)) * 100000),
-      1
-    );
-    --_ui-material-rim: calc(
-      (
-        var(--_ui-material-separation) + var(--_ui-material-glassiness) * 0.25
-      ) *
-        var(--_ui-material-scale, 1) *
-        8px
-    );
+    --_ui-material-active: clamp(0, calc(var(--_ui-material-separation) * 100000), 1);
+    --_ui-material-rim: calc(var(--_ui-material-separation) * var(--_ui-material-scale, 1) * 8px);
     --_ui-material-content-color: var(
       --ui-dialog-surface,
       var(--ui-material-content, var(--ui-overlay-surface, var(--ui-surface-elevated)))
@@ -724,12 +700,12 @@ useComponentHost(() => import('../components/ui-dialog/ui-dialog.js'), {
         var(--ui-elevation-dialog, var(--ui-shadow-xl))
       )
     );
-    backdrop-filter: blur(
-      calc(var(--_ui-material-glassiness) * var(--_ui-material-scale, 1) * 18px)
-    ) saturate(calc(1 + var(--_ui-material-glassiness) * var(--_ui-material-scale, 1) * 0.18));
     -webkit-backdrop-filter: blur(
-      calc(var(--_ui-material-glassiness) * var(--_ui-material-scale, 1) * 18px)
-    ) saturate(calc(1 + var(--_ui-material-glassiness) * var(--_ui-material-scale, 1) * 0.18));
+      calc(var(--_ui-material-glassiness) * var(--_ui-material-scale, 1) * 32px)
+    );
+    backdrop-filter: blur(
+      calc(var(--_ui-material-glassiness) * var(--_ui-material-scale, 1) * 32px)
+    );
   }
 
   @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
@@ -741,8 +717,8 @@ useComponentHost(() => import('../components/ui-dialog/ui-dialog.js'), {
   @media (prefers-reduced-transparency: reduce) {
     :global(:where(.ui-dialog):where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-dialog"]))):where([data-hn-ui-dialog])) {
       background: var(--_ui-material-content-color);
-      backdrop-filter: none;
       -webkit-backdrop-filter: none;
+      backdrop-filter: none;
     }
   }
 
@@ -751,8 +727,8 @@ useComponentHost(() => import('../components/ui-dialog/ui-dialog.js'), {
       background: Canvas;
       border-color: CanvasText;
       box-shadow: none;
-      backdrop-filter: none;
       -webkit-backdrop-filter: none;
+      backdrop-filter: none;
     }
   }
 

package/vue/UiEditorMentionMenu.vue

@@ -541,7 +541,7 @@ useComponentHost(() => import('../components/ui-editor-mention-menu/ui-editor-me
     width: 32px;
     height: 32px;
     flex: 0 0 auto;
-    color: var(--ui-accent-active, var(--ui-accent-solid));
+    color: var(--ui-accent-subtle-text);
     background: var(--ui-accent-soft, var(--ui-accent-subtle));
     border-radius: var(--ui-radius-round);
     font-size: var(--ui-font-size-xs);

package/vue/UiEditorMentionMenuItem.vue

@@ -167,7 +167,7 @@ checkHydratedRoot('li', 'ui-editor-mention-menu-item')
     inline-size: 32px;
     block-size: 32px;
     flex: 0 0 auto;
-    color: var(--ui-accent-active);
+    color: var(--ui-accent-subtle-text);
     background: var(--ui-accent-soft);
     border-radius: var(--ui-radius-round);
     font-size: var(--ui-font-size-xs);

package/vue/UiEditorTableContextMenu.vue

@@ -623,7 +623,7 @@ useComponentHost(
     background: var(--ui-accent-subtle, rgb(59 130 246 / 0.1));
   }
   :global(:scope button.danger) {
-    color: var(--ui-danger);
+    color: var(--ui-danger-subtle-text);
   }
   :global(.swatches) {
     display: flex !important;

package/vue/UiEditorTableToolbar.vue

@@ -736,7 +736,7 @@ useComponentHost(() => import('../components/ui-editor-table-toolbar/ui-editor-t
   }
   :global(:scope button.active) {
     background: var(--ui-accent-soft, var(--ui-accent-subtle));
-    color: var(--ui-accent-active);
+    color: var(--ui-accent-subtle-text);
   }
   :global(.group button) {
     border-radius: var(--ui-radius-sm);
@@ -749,7 +749,7 @@ useComponentHost(() => import('../components/ui-editor-table-toolbar/ui-editor-t
     border-radius: var(--ui-radius-sm);
   }
   :global(:scope button.danger) {
-    color: var(--ui-danger);
+    color: var(--ui-danger-subtle-text);
   }
   :global(:scope) {
     --_ui-default-icon-size: var(--ui-editor-toolbar-icon-size, 1rem);