@threadlabs/looma 0.33.1 → 0.35.0

package/styles/ui-popover.css

@@ -38,6 +38,7 @@
     }
 
     :scope:where([data-component~="ui-popover"]) {
+      --_ui-material-scale: 0.55;
       --_ui-popover-surface: var(--ui-popover-surface);
       --_ui-popover-border: var(--ui-popover-border);
       --_ui-popover-radius: var(--ui-popover-radius);
@@ -70,6 +71,67 @@
       box-shadow: var(--_ui-popover-shadow, var(--ui-overlay-shadow, var(--ui-elevation-overlay, var(--ui-shadow-lg))));
     }
 
+    /* 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. */
+    .surface {
+      --_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.55) * 8px);
+      --_ui-material-content-color: var(--_ui-popover-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:
+        var(--ui-surface-highlight, linear-gradient(transparent, transparent)) padding-box,
+        linear-gradient(var(--_ui-material-content-color), var(--_ui-material-content-color)) padding-box,
+        linear-gradient(var(--_ui-material-rim-color), var(--_ui-material-rim-color)) border-box,
+        var(--_ui-material-content-color) padding-box;
+      border-width: calc(var(--ui-border-width) + var(--_ui-material-rim));
+      border-color: var(
+        --_ui-popover-border,
+        color-mix(in oklab, var(--ui-overlay-border, var(--ui-border-strong)) calc((1 - var(--_ui-material-active)) * 100%), transparent)
+      );
+      box-shadow: var(
+        --_ui-popover-shadow,
+        var(
+          --ui-overlay-shadow,
+          0 calc(var(--_ui-material-separation) * var(--_ui-material-scale, 0.55) * 8px) calc(
+            var(--_ui-material-separation) * var(--_ui-material-scale, 0.55) * 24px
+          ) color-mix(in oklab, var(--ui-text-primary) 15%, transparent),
+          var(--ui-material-glow, 0 0 transparent),
+          inset 0 0 0 calc(var(--_ui-material-active) * var(--ui-border-width)) var(--ui-material-edge, var(--ui-border-strong)),
+          var(--ui-elevation-overlay, var(--ui-shadow-lg))
+        )
+      );
+      backdrop-filter: blur(calc(var(--_ui-material-glassiness) * var(--_ui-material-scale, 0.55) * 18px))
+        saturate(calc(1 + var(--_ui-material-glassiness) * var(--_ui-material-scale, 0.55) * 0.18));
+      -webkit-backdrop-filter: blur(calc(var(--_ui-material-glassiness) * var(--_ui-material-scale, 0.55) * 18px))
+        saturate(calc(1 + var(--_ui-material-glassiness) * var(--_ui-material-scale, 0.55) * 0.18));
+    }
+
+    @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
+      .surface {
+        background: var(--_ui-material-content-color);
+      }
+    }
+
+    @media (prefers-reduced-transparency: reduce) {
+      .surface {
+        background: var(--_ui-material-content-color);
+        backdrop-filter: none;
+        -webkit-backdrop-filter: none;
+      }
+    }
+
+    @media (forced-colors: active) {
+      .surface {
+        background: Canvas;
+        border-color: CanvasText;
+        box-shadow: none;
+        backdrop-filter: none;
+        -webkit-backdrop-filter: none;
+      }
+    }
+
     /* A toolbar or card can supply its own surface, including an unclipped shadow. */
     :scope:where([data-component~="ui-popover"])[data-ui-popover-state~="bare"] .surface {
       overflow: visible;
@@ -77,6 +139,8 @@
       border: 0;
       background: transparent;
       box-shadow: none;
+      backdrop-filter: none;
+      -webkit-backdrop-filter: none;
     }
 
     :scope:where([data-component~="ui-popover"]):not([data-ui-popover-state~="internalOpen"]) {
@@ -134,6 +198,18 @@
 @scope ([data-component~="ui-popover"]) to ([data-component]) {
 /* This component's hooks style the element they are set on, and never a nested one. */
 
+    /* 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. */
+
+    @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
+    }
+
+    @media (prefers-reduced-transparency: reduce) {
+    }
+
+    @media (forced-colors: active) {
+    }
+
     /* A toolbar or card can supply its own surface, including an unclipped shadow. */
 
     @starting-style {

package/styles/ui-select.css

@@ -61,7 +61,7 @@
       border-radius: var(--ui-select-radius, var(--ui-field-radius, var(--ui-radius-md)));
       background-color: var(--ui-select-surface, var(--ui-control-surface, var(--ui-surface-elevated)));
       color: var(--ui-text-primary);
-      color-scheme: light dark;
+      color-scheme: inherit;
       font: inherit;
       line-height: var(--ui-line-height-tight);
       box-shadow: var(--ui-select-shadow, var(--ui-shadow-sm));
@@ -74,15 +74,16 @@
     /* The select draws its own chevron: the native caret cannot be inset or sized consistently.
      * The root stays a native <s-lect>, so the icon is a background image rather than an element. */
     :scope:where([data-component~="ui-select"]) {
+      --_ui-select-highlight: var(--ui-surface-highlight, linear-gradient(transparent, transparent));
       appearance: none;
       padding-inline-end: calc(var(--ui-space-3) + 1.5rem) !important;
       background-image: var(
         --ui-select-chevron,
         url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235c5c58' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")
-      );
+      ), var(--_ui-select-highlight);
       background-repeat: no-repeat;
-      background-position: right var(--ui-space-3) center;
-      background-size: 1.125rem 1.125rem;
+      background-position: right var(--ui-space-3) center, center;
+      background-size: 1.125rem 1.125rem, 100% 100%;
     }
 
     :scope:where([data-component~="ui-select"]):hover:not(:focus):not(:disabled):not([aria-invalid="true"]):not(:is(:user-invalid, [data-user-invalid])) {
@@ -114,6 +115,7 @@
     }
 
     :scope:where([data-component~="ui-select"]):disabled {
+      --_ui-select-highlight: none;
       background-color: var(--ui-control-surface-disabled, var(--ui-surface-muted));
       color: var(--ui-disabled-text);
       box-shadow: none;
@@ -124,8 +126,8 @@
       min-block-size: var(--ui-control-size-sm);
       padding: var(--ui-control-inset-block-sm, var(--ui-space-1)) var(--ui-space-2) !important;
       padding-inline-end: calc(var(--ui-space-2) + var(--ui-icon-size-sm) + var(--ui-space-1)) !important;
-      background-position: right var(--ui-space-2) center;
-      background-size: var(--ui-icon-size-sm) var(--ui-icon-size-sm);
+      background-position: right var(--ui-space-2) center, center;
+      background-size: var(--ui-icon-size-sm) var(--ui-icon-size-sm), 100% 100%;
       font-size: var(--ui-font-size-sm);
     }
 
@@ -133,7 +135,7 @@
       min-block-size: var(--ui-control-size-lg);
       padding: var(--ui-control-inset-block-lg, var(--ui-space-3)) var(--ui-space-4) !important;
       padding-inline-end: calc(var(--ui-space-4) + 1.5rem) !important;
-      background-position: right var(--ui-space-4) center;
+      background-position: right var(--ui-space-4) center, center;
       font-size: var(--ui-font-size-md);
     }
 

package/styles/ui-slider.css

@@ -0,0 +1,53 @@
+/* Generated by HTML Next 1.0.0-alpha.69. Do not edit. */
+@supports (-moz-appearance: none) {
+:where([data-component], [data-slotted]) { --html-next-scope-owner: boundary; }
+:where([data-slotted]:not([data-component])) { --html-next-scope-owner: projected !important; }
+}
+@supports (-moz-appearance: none) {
+[data-component~="ui-slider"] { --html-next-scope-owner: "ui-slider" !important; }
+}
+@scope ([data-component~="ui-slider"]) to ([data-component], [data-slotted]) {
+:scope:where([data-component~="ui-slider"]) {
+      display: grid !important;
+      grid-template-columns: minmax(4rem, 1fr) minmax(8rem, 1fr) !important;
+      align-items: center !important;
+      gap: var(--ui-space-2) !important;
+      margin: 0 !important;
+      padding: 0 !important;
+      min-inline-size: 0;
+    }
+    input {
+      inline-size: 100%;
+      min-inline-size: 0;
+      min-block-size: var(--ui-control-size-md);
+      margin: 0 !important;
+      accent-color: var(--ui-accent-solid);
+      cursor: pointer;
+    }
+    :scope:where([data-component~="ui-slider"])[data-ui-slider-state~="size=sm"] input {
+      min-block-size: var(--ui-control-size-sm);
+    }
+    :scope:where([data-component~="ui-slider"])[data-ui-slider-state~="size=lg"] input {
+      min-block-size: var(--ui-control-size-lg);
+    }
+    input:focus-visible {
+      outline: var(--ui-focus-width) solid var(--ui-control-focus, var(--ui-accent-solid));
+      outline-offset: var(--ui-space-1);
+      border-radius: var(--ui-radius-sm);
+    }
+    input:disabled {
+      cursor: not-allowed;
+    }
+    @media (pointer: coarse) {
+      input {
+        min-block-size: max(var(--ui-control-size-md), var(--ui-control-min-block-size));
+      }
+    }
+    :scope:where([data-component~="ui-slider"])[hidden] {
+      display: none !important;
+    }
+}
+@scope ([data-component~="ui-slider"]) to ([data-component]) {
+@media (pointer: coarse) {
+    }
+}

package/styles/ui-switch.css

@@ -84,6 +84,7 @@
       border: var(--ui-border-width) solid var(--ui-control-border, var(--ui-border-strong));
       border-radius: var(--ui-radius-round);
       background-color: var(--ui-control-surface, var(--ui-surface-default));
+      background-image: var(--ui-surface-highlight, none);
       box-shadow: var(--ui-control-inset);
       cursor: pointer;
       transition: background-color var(--ui-motion-base) var(--ui-motion-ease), border-color var(--ui-motion-base) var(--ui-motion-ease);
@@ -105,6 +106,7 @@
 
     input:checked {
       background-color: var(--ui-accent-solid);
+      background-image: var(--ui-accent-highlight, none);
       border-color: var(--ui-accent-solid);
     }
 
@@ -128,6 +130,7 @@
     :scope:where([data-component~="ui-switch"])[data-ui-switch-state~="disabled"] input {
       border-color: var(--ui-disabled-border);
       background-color: var(--ui-disabled-surface);
+      background-image: none;
       box-shadow: none;
       cursor: not-allowed;
     }

package/styles/ui-tabs.css

@@ -20,6 +20,10 @@
       syntax: "*";
       inherits: false;
     }
+    @property --ui-tabs-panel-padding {
+      syntax: "*";
+      inherits: false;
+    }
 
     /* Density resolves into the tab row's own values; the public tokens still override them. */
     :scope:where([data-component~="ui-tabs"]) {
@@ -27,6 +31,7 @@
       --_ui-tabs-tab-min-block-size: var(--ui-tabs-tab-min-block-size);
       --_ui-tabs-tab-padding-block: var(--ui-tabs-tab-padding-block);
       --_ui-tabs-tab-padding-inline: var(--ui-tabs-tab-padding-inline);
+      --_ui-tabs-panel-padding: var(--ui-tabs-panel-padding);
 
       --_tab-min-block-size: var(--ui-control-size);
       --_tab-padding-block: var(--ui-space-2);
@@ -157,7 +162,7 @@
       border-radius: var(--ui-radius-sm);
     }
     .panels > :where([data-slotted], [data-slotted] *):is(*) {
-      padding: var(--ui-space-4) !important;
+      padding: var(--_ui-tabs-panel-padding, var(--ui-space-4)) !important;
     }
 
     :scope:where([data-component~="ui-tabs"])[data-ui-tabs-state~="orientation=vertical"] .list button,

package/styles/ui-text.css

@@ -23,7 +23,7 @@
 
     /* A heading drops the browser's heading size and weight, so size and weight set it as they set
        any text, and inherit keeps the text around it. */
-    :scope:where([data-component~="ui-text"]):is(h2, h3, h4, h5, h6) {
+    :scope:where([data-component~="ui-text"]):is(h1, h2, h3, h4, h5, h6) {
       font-family: var(--ui-font-display, inherit);
       font-size: inherit;
       font-weight: inherit;
@@ -86,10 +86,32 @@
       font-weight: var(--ui-font-semibold);
     }
 
+    :scope:where([data-component~="ui-text"])[data-ui-text-state~="variant=display"], :scope:where([data-component~="ui-text"])[data-ui-text-state~="variant=heading"] {
+      font-family: var(--ui-font-display, var(--ui-font-family-sans));
+      font-weight: var(--ui-font-semibold);
+      line-height: var(--ui-line-height-tight);
+    }
+    :scope:where([data-component~="ui-text"])[data-ui-text-state~="variant=display"] {
+      font-size: var(--ui-font-size-2xl);
+    }
+    :scope:where([data-component~="ui-text"])[data-ui-text-state~="variant=heading"] {
+      font-size: var(--ui-font-size-xl);
+    }
+    :scope:where([data-component~="ui-text"])[data-ui-text-state~="variant=label"] {
+      font-size: var(--ui-font-size-sm);
+      font-weight: var(--ui-font-medium);
+      line-height: var(--ui-line-height);
+    }
+    :scope:where([data-component~="ui-text"])[data-ui-text-state~="variant=caption"] {
+      font-size: var(--ui-font-size-sm);
+      line-height: var(--ui-line-height);
+    }
+
     :scope:where([data-component~="ui-text"])[data-ui-text-state~="variant=eyebrow"] {
       font-size: var(--ui-font-size-xs);
       font-weight: var(--ui-font-semibold);
       letter-spacing: 0.06em;
+      line-height: var(--ui-line-height);
       text-transform: uppercase;
     }
     :scope:where([data-component~="ui-text"])[data-ui-text-state~="variant=code"] {

package/styles/ui-textarea.css

@@ -72,7 +72,8 @@
       border: var(--ui-textarea-border-width, var(--_ui-default-textarea-border-width, var(--ui-border-width))) solid
         var(--ui-textarea-border, var(--_ui-default-textarea-border, var(--ui-control-border, var(--ui-border-strong))));
       border-radius: var(--ui-textarea-radius, var(--_ui-default-textarea-radius, var(--ui-field-radius, var(--ui-radius-md))));
-      background: var(--ui-textarea-surface, var(--_ui-default-textarea-surface, var(--ui-control-surface, var(--ui-surface-elevated))));
+      background-color: var(--ui-textarea-surface, var(--_ui-default-textarea-surface, var(--ui-control-surface, var(--ui-surface-elevated))));
+      background-image: var(--_ui-default-textarea-highlight, var(--ui-surface-highlight, none));
       color: var(--ui-text-primary);
       font: inherit;
       line-height: var(--ui-line-height-md);

package/styles/ui-tooltip.css

@@ -50,6 +50,7 @@
     }
 
     :scope:where([data-component~="ui-tooltip"]) {
+      --_ui-material-scale: 0.08;
       /* Hooks do not inherit, so the parts below read them from the root. */
       --_ui-tooltip-border: var(--ui-tooltip-border);
       --_ui-tooltip-max-inline-size: var(--ui-tooltip-max-inline-size);
@@ -102,6 +103,65 @@
       box-shadow: var(--_ui-tooltip-shadow, var(--ui-overlay-shadow, var(--ui-elevation-tooltip, var(--ui-shadow-md))));
     }
 
+    /* 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. */
+    .surface {
+      --_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-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:
+        linear-gradient(var(--_ui-material-content-color), var(--_ui-material-content-color)) padding-box,
+        linear-gradient(var(--_ui-material-rim-color), var(--_ui-material-rim-color)) border-box,
+        var(--_ui-material-content-color) padding-box;
+      border-width: calc(var(--ui-border-width) + var(--_ui-material-rim));
+      border-color: var(
+        --_ui-tooltip-border,
+        color-mix(in oklab, var(--ui-overlay-border, var(--ui-border-strong)) calc((1 - var(--_ui-material-active)) * 100%), transparent)
+      );
+      box-shadow: var(
+        --_ui-tooltip-shadow,
+        var(
+          --ui-overlay-shadow,
+          0 calc(var(--_ui-material-separation) * var(--_ui-material-scale, 0.08) * 8px) calc(
+            var(--_ui-material-separation) * var(--_ui-material-scale, 0.08) * 24px
+          ) color-mix(in oklab, var(--ui-text-primary) 15%, transparent),
+          inset 0 0 0 calc(var(--_ui-material-active) * var(--ui-border-width)) var(--ui-material-edge, var(--ui-border-strong)),
+          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));
+    }
+
+    @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
+      .surface {
+        background: var(--_ui-material-content-color);
+      }
+    }
+
+    @media (prefers-reduced-transparency: reduce) {
+      .surface {
+        background: var(--_ui-material-content-color);
+        backdrop-filter: none;
+        -webkit-backdrop-filter: none;
+      }
+    }
+
+    @media (forced-colors: active) {
+      .surface {
+        background: Canvas;
+        border-color: CanvasText;
+        box-shadow: none;
+        backdrop-filter: none;
+        -webkit-backdrop-filter: none;
+      }
+    }
+
     /* A keyboard shortcut follows the label after a thin divider, smaller and quieter, as menus show
        it. The label stays first in the description, so a screen reader hears the name, then the keys. */
     .shortcut {
@@ -226,6 +286,18 @@
 
     /* 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. */
+
+    @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
+    }
+
+    @media (prefers-reduced-transparency: reduce) {
+    }
+
+    @media (forced-colors: active) {
+    }
+
     /* A keyboard shortcut follows the label after a thin divider, smaller and quieter, as menus show
        it. The label stays first in the description, so a screen reader hears the name, then the keys. */
 

package/theme-light.css

@@ -2,6 +2,7 @@
   :root:not([data-theme], [data-contrast="high"]),
   [data-theme="light"] {
     color-scheme: light;
+    --ui-select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235c5c58' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
     /* The seeds, and only the seeds. Neutrals, hovers, tints, and disabled colours are mixed from
        these in tokens.css, so a product themes Looma by changing these eleven values. */
     --ui-surface: #ffffff;

package/theme-system.css

@@ -1,5 +1,15 @@
 /* Optional shared recipe. Load after tokens.css and the chosen palette.
    Existing public roles remain the customization interface; no component selectors. */
+/* Resolve shared geometry once where it is declared, rather than once per consuming
+   control's font. Palette roles remain unregistered so light-dark resolves locally. */
+/* Reserve the same order when the remembered theme arrives before baseline CSS. */
+@layer tokens, base, theme, components;
+
+@property --ui-font-size { syntax: "<length>"; inherits: true; initial-value: 16px; }
+@property --ui-control-size { syntax: "<length>"; inherits: true; initial-value: 40px; }
+@property --ui-radius-md { syntax: "<length>"; inherits: true; initial-value: 8px; }
+@property --ui-border-width { syntax: "<length>"; inherits: true; initial-value: 1px; }
+
 @layer theme {
   :root {
     --ui-density: 1;
@@ -9,6 +19,14 @@
     --ui-inner-depth: 0.3;
     --ui-edge-light: 0;
     --ui-overlay-translucency: 0;
+    --ui-glassiness: 0;
+    --ui-surface-separation: 0;
+    --ui-finish: 0;
+    --ui-glow: 0;
+    --ui-light-x: 0.5;
+    --ui-light-y: 0;
+    --ui-light-spread: 0.5;
+    --ui-light-strength: 0.65;
   }
 
   :where(:root, [data-theme], [data-contrast]) {
@@ -20,21 +38,23 @@
     --ui-control-size-sm: calc(var(--ui-control-size) / var(--_ui-theme-ratio));
     --ui-control-size-md: var(--ui-control-size);
     --ui-control-size-lg: calc(var(--ui-control-size) * var(--_ui-theme-ratio));
+    /* Bend the interior of the family while keeping its endpoints stable. */
     --ui-space-1: var(--_ui-theme-unit);
-    --ui-space-2: calc(var(--_ui-theme-unit) * pow(2, var(--_ui-theme-curve)));
-    --ui-space-3: calc(var(--_ui-theme-unit) * pow(3, var(--_ui-theme-curve)));
-    --ui-space-4: calc(var(--_ui-theme-unit) * pow(4, var(--_ui-theme-curve)));
+    --ui-space-2: calc(var(--_ui-theme-unit) * (1 + 7 * pow(1 / 7, var(--_ui-theme-curve))));
+    --ui-space-3: calc(var(--_ui-theme-unit) * (1 + 7 * pow(2 / 7, var(--_ui-theme-curve))));
+    --ui-space-4: calc(var(--_ui-theme-unit) * (1 + 7 * pow(3 / 7, var(--_ui-theme-curve))));
     --ui-space-0-5: calc(var(--ui-space-1) * 0.5);
-    --ui-space-5: calc(var(--_ui-theme-unit) * pow(6, var(--_ui-theme-curve)));
-    --ui-space-6: calc(var(--_ui-theme-unit) * pow(8, var(--_ui-theme-curve)));
+    --ui-space-5: calc(var(--_ui-theme-unit) * (1 + 7 * pow(5 / 7, var(--_ui-theme-curve))));
+    --ui-space-6: calc(var(--_ui-theme-unit) * (1 + 7 * pow(7 / 7, var(--_ui-theme-curve))));
     /* Vertical editing/action insets fit the shared box instead of growing with the
        page spacing curve. Multi-line content can still grow intrinsically. */
     --ui-control-inset-block-sm: max(0px, calc((var(--ui-control-size-sm) - var(--ui-font-size-sm) * var(--ui-line-height-tight) - 2 * var(--ui-border-width)) / 2));
     --ui-control-inset-block-md: max(0px, calc((var(--ui-control-size-md) - var(--ui-font-size-md) * var(--ui-line-height-tight) - 2 * var(--ui-border-width)) / 2));
     --ui-control-inset-block-lg: max(0px, calc((var(--ui-control-size-lg) - var(--ui-font-size-md) * var(--ui-line-height-tight) - 2 * var(--ui-border-width)) / 2));
-    --ui-action-inset-sm: calc(var(--ui-control-size-sm) * 0.625 * var(--ui-density));
-    --ui-action-inset-md: calc(var(--ui-control-size-md) * 0.625 * var(--ui-density));
-    --ui-action-inset-lg: calc(var(--ui-control-size-lg) * 0.625 * var(--ui-density));
+    --ui-font-size-xs: max(12px, calc(var(--ui-font-size) * 0.75));
+    --ui-action-inset-sm: var(--ui-space-2);
+    --ui-action-inset-md: var(--ui-space-3);
+    --ui-action-inset-lg: var(--ui-space-4);
 
     --ui-radius-sm: calc(var(--ui-radius-md) * 0.5);
     --ui-radius-lg: calc(var(--ui-radius-md) * 1.5);
@@ -47,25 +67,51 @@
     --_ui-theme-outer: max(0, var(--ui-outer-depth));
     --_ui-theme-inner: max(0, var(--ui-inner-depth));
     --_ui-theme-edge: clamp(0, var(--ui-edge-light), 1);
-    --_ui-theme-edge-paint: inset 1px 1px 0 rgb(255 255 255 / calc(var(--_ui-theme-edge) * 0.08)), inset -1px -1px 0 rgb(0 0 0 / calc(var(--_ui-theme-edge) * 0.08));
+    --_ui-light-inline: calc((0.5 - var(--ui-light-x)) * 2px);
+    --_ui-shadow-x: calc((0.5 - var(--ui-light-x)) * 2);
+    --_ui-shadow-y: calc((0.5 - var(--ui-light-y)) * 2);
+    --_ui-light-block: calc((0.5 - var(--ui-light-y)) * 2px);
+    --_ui-theme-edge-paint: inset var(--_ui-light-inline) var(--_ui-light-block) 0 rgb(255 255 255 / calc(var(--_ui-theme-edge) * var(--ui-light-strength) * 0.3)), inset calc(-1 * var(--_ui-light-inline)) calc(-1 * var(--_ui-light-block)) 0 rgb(0 0 0 / calc(var(--_ui-theme-edge) * 0.1));
     --ui-action-edge: var(--_ui-theme-edge-paint);
-    --ui-shadow-xs: 0 calc(1px * var(--_ui-theme-outer)) calc(2px * var(--_ui-theme-outer)) rgb(0 0 0 / 0.08);
-    --ui-shadow-sm: 0 calc(1px * var(--_ui-theme-outer)) calc(3px * var(--_ui-theme-outer)) rgb(0 0 0 / 0.12), 0 calc(4px * var(--_ui-theme-outer)) calc(12px * var(--_ui-theme-outer)) rgb(0 0 0 / 0.06);
+    --ui-shadow-xs: calc(1px * var(--_ui-theme-outer) * var(--_ui-shadow-x)) calc(1px * var(--_ui-theme-outer) * var(--_ui-shadow-y)) calc(2px * var(--_ui-theme-outer)) rgb(0 0 0 / 0.08);
+    --ui-shadow-sm: calc(1px * var(--_ui-theme-outer) * var(--_ui-shadow-x)) calc(1px * var(--_ui-theme-outer) * var(--_ui-shadow-y)) calc(3px * var(--_ui-theme-outer)) rgb(0 0 0 / 0.12), calc(4px * var(--_ui-theme-outer) * var(--_ui-shadow-x)) calc(4px * var(--_ui-theme-outer) * var(--_ui-shadow-y)) calc(12px * var(--_ui-theme-outer)) rgb(0 0 0 / 0.06);
     --ui-shadow-md: var(--ui-shadow-sm);
-    --ui-shadow-lg: 0 calc(8px * var(--_ui-theme-outer)) calc(24px * var(--_ui-theme-outer)) rgb(0 0 0 / 0.12), 0 calc(4px * var(--_ui-theme-outer)) calc(8px * var(--_ui-theme-outer)) rgb(0 0 0 / 0.06);
+    --ui-shadow-lg: calc(8px * var(--_ui-theme-outer) * var(--_ui-shadow-x)) calc(8px * var(--_ui-theme-outer) * var(--_ui-shadow-y)) calc(24px * var(--_ui-theme-outer)) rgb(0 0 0 / 0.12), calc(4px * var(--_ui-theme-outer) * var(--_ui-shadow-x)) calc(4px * var(--_ui-theme-outer) * var(--_ui-shadow-y)) calc(8px * var(--_ui-theme-outer)) rgb(0 0 0 / 0.06);
     --ui-shadow-xl: var(--ui-shadow-lg);
-    --ui-action-shadow: var(--ui-shadow-sm);
+    --ui-action-shadow: var(--ui-action-edge), var(--ui-shadow-sm);
     --ui-raised: var(--ui-shadow-sm);
     --ui-elevation-tooltip: var(--ui-shadow-sm);
     --ui-elevation-overlay: var(--ui-shadow-lg);
     --ui-elevation-dialog: var(--ui-shadow-lg);
-    --ui-control-inset: inset 0 calc(1px * var(--_ui-theme-inner)) calc(3px * var(--_ui-theme-inner)) rgb(0 0 0 / 0.15), inset 0 -1px 0 rgb(255 255 255 / calc(var(--_ui-theme-edge) * 0.18));
-    --ui-pressed: inset 0 calc(2px * var(--_ui-theme-inner)) calc(4px * var(--_ui-theme-inner)) rgb(0 0 0 / 0.2);
+    --ui-control-inset: inset calc(var(--_ui-light-inline) * var(--_ui-theme-inner)) calc(var(--_ui-light-block) * var(--_ui-theme-inner)) calc(3px * var(--_ui-theme-inner)) rgb(0 0 0 / 0.15), inset calc(-1 * var(--_ui-light-inline)) calc(-1 * var(--_ui-light-block)) 0 rgb(255 255 255 / calc(var(--_ui-theme-edge) * var(--ui-light-strength) * 0.18)), var(--ui-material-glow);
+    --ui-pressed: inset calc(2 * var(--_ui-light-inline) * var(--_ui-theme-inner)) calc(2 * var(--_ui-light-block) * var(--_ui-theme-inner)) calc(4px * var(--_ui-theme-inner)) rgb(0 0 0 / 0.2);
     --ui-overlay-surface: color-mix(in srgb, var(--ui-surface-raised) calc((1 - clamp(0, var(--ui-overlay-translucency), 1)) * 100%), transparent);
+    /* 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-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-material-glow: 0 0 calc(18px * var(--ui-glow)) color-mix(in srgb, var(--ui-accent) calc(var(--ui-glow) * var(--ui-light-strength) * 18%), transparent);
+    --ui-neutral-glow: 0 0 calc(18px * var(--ui-glow)) color-mix(in srgb, var(--ui-text) calc(var(--ui-glow) * var(--ui-light-strength) * 18%), transparent);
+    --ui-accent-glow: 0 0 calc(18px * var(--ui-glow)) color-mix(in srgb, var(--ui-accent) calc(var(--ui-glow) * var(--ui-light-strength) * 18%), transparent);
+    --ui-danger-glow: 0 0 calc(18px * var(--ui-glow)) color-mix(in srgb, var(--ui-danger) calc(var(--ui-glow) * var(--ui-light-strength) * 18%), transparent);
+    --ui-success-glow: 0 0 calc(18px * var(--ui-glow)) color-mix(in srgb, var(--ui-success) calc(var(--ui-glow) * var(--ui-light-strength) * 18%), transparent);
+    --ui-warning-glow: 0 0 calc(18px * var(--ui-glow)) color-mix(in srgb, var(--ui-warning) calc(var(--ui-glow) * var(--ui-light-strength) * 18%), transparent);
+    --ui-info-glow: 0 0 calc(18px * var(--ui-glow)) color-mix(in srgb, var(--ui-info) calc(var(--ui-glow) * var(--ui-light-strength) * 18%), transparent);
+    --ui-raised-highlight: var(--ui-surface-highlight);
 
     /* Existing timing and easing names stay canonical. */
-    --ui-motion-press: calc(var(--ui-motion-fast) / 3);
-    --ui-motion-base: calc(var(--ui-motion-fast) * 1.2);
+    --ui-motion-press: var(--ui-motion-fast);
+    --ui-motion-base: calc(var(--ui-motion-fast) * 1.5);
     --ui-motion-ease-out: var(--ui-motion-ease);
     --ui-press-scale: 0.98;
   }
@@ -77,4 +123,10 @@
       --ui-press-scale: 1;
     }
   }
+  @media (prefers-reduced-transparency: reduce), (forced-colors: active) {
+    :where(:root, [data-theme], [data-contrast]) {
+      --ui-finish: 0;
+      --ui-glow: 0;
+    }
+  }
 }

package/tokens.css

@@ -85,6 +85,10 @@
      never has to: these exist so components share one vocabulary, not to be configured. */
   :root,
   :where([data-theme], [data-contrast]) {
+    /* Neutral is a quiet filled surface, never the text colour inverted. */
+    --ui-neutral-surface: color-mix(in srgb, var(--ui-text) 6%, var(--ui-surface-raised));
+    --ui-neutral-hover: color-mix(in srgb, var(--ui-text) 10%, var(--ui-surface-raised));
+    --ui-neutral-active: color-mix(in srgb, var(--ui-text) 14%, var(--ui-surface-raised));
     --ui-accent-line-width: var(--ui-border-width);
 
     /* Type scale, from the base size. */
@@ -161,6 +165,12 @@
     --ui-accent-active: color-mix(in oklab, var(--ui-accent) 74%, var(--ui-text));
     --ui-accent-subtle: color-mix(in oklab, var(--ui-accent) 12%, var(--ui-surface));
     --ui-danger-hover: color-mix(in oklab, var(--ui-danger) 86%, var(--ui-text));
+    --ui-danger-active: color-mix(in oklab, var(--ui-danger) 74%, var(--ui-text));
+    --ui-success-active: color-mix(in oklab, var(--ui-success) 74%, var(--ui-text));
+    --ui-warning-active: color-mix(in oklab, var(--ui-warning) 74%, var(--ui-text));
+    --ui-info-active: color-mix(in oklab, var(--ui-info) 74%, var(--ui-text));
+    --ui-warning-hover: color-mix(in oklab, var(--ui-warning) 86%, var(--ui-text));
+    --ui-info-hover: color-mix(in oklab, var(--ui-info) 86%, var(--ui-text));
 
     /* Disabled is one decision, not a per-component one: the sunken surface and a pale ink, at
        full opacity, so a disabled control reads as unavailable rather than as a faded variant.
@@ -340,7 +350,7 @@
 
   [data-ui-choice-option]:is(:hover, .active) {
     background: var(--ui-surface-muted);
-    outline: var(--ui-border-width) solid var(--ui-focus-ring);
+    outline: var(--ui-focus-width) solid var(--ui-focus-ring);
     outline-offset: calc(-1 * var(--ui-border-width));
   }
 
@@ -390,7 +400,7 @@
 
   @media (forced-colors: active) {
     [data-ui-choice-option][aria-selected="true"]:not([aria-disabled="true"]):not(.active) {
-      outline: var(--ui-border-width) solid Highlight;
+      outline: var(--ui-focus-width) solid Highlight;
       outline-offset: calc(-1 * var(--ui-border-width));
     }
   }

package/vanilla/UiButton.d.ts

@@ -16,6 +16,7 @@ export interface UiButtonProps {
   href?: string | null;
   loading?: boolean | null;
   pending?: boolean | null;
+  preset?: "none" | "primary" | "standard" | "quiet" | "destructive" | null;
   rel?: string | null;
   shape?: "rounded" | "pill" | null;
   size?: "xs" | "sm" | "md" | "lg" | null;