@codenhub/styles 0.6.0 → 0.7.0

package/dist/tw/aesthetics/glass.css

@@ -154,12 +154,20 @@
 
      The corner knobs are glass's own, with larger defaults: a continuous corner
      reads smaller than a round one of the same radius. Where `corner-shape` is
-     not drawn the corners stay round. */
-  .glass-liquid {
+     not drawn the corners stay round.
+
+     Not on a solo element: `.glass-solo.glass-liquid` paints its own corner
+     below, and a token declared on it would inherit into whatever it holds --
+     a `.btn` inside a solo toast took liquid's corners on a page with no glass
+     in scope. Every scope below skips a solo element for the same reason. */
+  .glass-liquid:not(.glass-solo) {
     --ui-corner: var(--glass-radius, 1rem);
     --ui-corner-surface: var(--glass-radius-surface, 1.5rem);
     --ui-corner-shape: squircle;
+  }
 
+  /* The layers' values, on a solo element too: it draws the same two. */
+  .glass-liquid {
     --_glass-liquid-blur: blur(2px) saturate(1.8);
 
     /* The lens is its own layer rather than a second function in the blur's
@@ -177,6 +185,12 @@
        property, so the band and the strength are fixed, not knobs. */
     --_glass-liquid-lens: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='lens' x='0' y='0' width='100%' height='100%' color-interpolation-filters='sRGB'><feFlood flood-color='white'/><feMorphology operator='erode' radius='8'/><feGaussianBlur stdDeviation='10' result='ramp'/><feOffset in='ramp' dx='-3' result='l'/><feOffset in='ramp' dx='3' result='r'/><feComposite in='l' in2='r' operator='arithmetic' k2='2' k3='-2' k4='0.5' result='dx'/><feOffset in='ramp' dy='-3' result='u'/><feOffset in='ramp' dy='3' result='d'/><feComposite in='u' in2='d' operator='arithmetic' k2='2' k3='-2' k4='0.5' result='dy'/><feColorMatrix in='dx' values='0 0 0 1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1' result='x'/><feColorMatrix in='dy' values='0 0 0 0 0 0 0 0 1 0 0 0 0 0 0 0 0 0 0 1'/><feComposite in='x' operator='arithmetic' k2='1' k3='1'/><feDisplacementMap in='SourceGraphic' scale='110' xChannelSelector='R' yChannelSelector='G'/></filter></svg>#lens");
 
+    /* The same lens at a control's size. The pane's band is 8px of erosion
+       under a 10px blur, which is most of a 40px button's height: the two
+       sides' ramps meet in the middle and the label sits in a loop. A third of
+       each length keeps a clear centre for the label. */
+    --_glass-liquid-lens-control: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='lens' x='0' y='0' width='100%' height='100%' color-interpolation-filters='sRGB'><feFlood flood-color='white'/><feMorphology operator='erode' radius='3'/><feGaussianBlur stdDeviation='3.5' result='ramp'/><feOffset in='ramp' dx='-1' result='l'/><feOffset in='ramp' dx='1' result='r'/><feComposite in='l' in2='r' operator='arithmetic' k2='2' k3='-2' k4='0.5' result='dx'/><feOffset in='ramp' dy='-1' result='u'/><feOffset in='ramp' dy='1' result='d'/><feComposite in='u' in2='d' operator='arithmetic' k2='2' k3='-2' k4='0.5' result='dy'/><feColorMatrix in='dx' values='0 0 0 1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1' result='x'/><feColorMatrix in='dy' values='0 0 0 0 0 0 0 0 1 0 0 0 0 0 0 0 0 0 0 1'/><feComposite in='x' operator='arithmetic' k2='1' k3='1'/><feDisplacementMap in='SourceGraphic' scale='40' xChannelSelector='R' yChannelSelector='G'/></filter></svg>#lens");
+
     /* The rim: light caught on the top-left edge and, fainter, the bottom-right,
        over a soft inner glow. Drawn on the lens layer, the topmost, because a
        rim drawn on the surface itself would sit under the layers and blur. */
@@ -192,57 +206,77 @@
   }
 
   /* The glass material the modifier changes, where glass is in scope: on the
-     same element, or on a surface inside a glass region. The blur moves off the
-     surface onto a layer behind its content (below): a surface with a backdrop
-     filter of its own is a backdrop root, and a layer inside one sees only the
-     surface, never the page behind it. */
-  .glass.glass-liquid,
-  .glass .glass-liquid {
+     same element, or on a surface inside a glass region.
+
+     The backdrop is liquid's lighter blur, for whatever frosts under glass and
+     takes no layers below: a bare `<table>` under `/native`, a consumer's own
+     `@apply surface`. The layers' selector list cannot name those, and with
+     the backdrop cleared here they kept the clearer ground with nothing
+     blurred behind it. A surface that does take the layers clears its own. */
+  .glass.glass-liquid:not(.glass-solo),
+  .glass .glass-liquid:not(.glass-solo) {
     --ui-ink: light-dark(rgb(255 255 255 / 0.45), rgb(255 255 255 / 0.16));
     --ui-surface-ground: color-mix(in srgb, var(--color-background) 30%, transparent);
     --ui-surface-image: initial;
-    --ui-backdrop: none;
+    --ui-backdrop: var(--_glass-liquid-blur);
   }
 
   @media (prefers-reduced-transparency: reduce) {
-    .glass.glass-liquid,
-    .glass .glass-liquid {
+    .glass.glass-liquid:not(.glass-solo),
+    .glass .glass-liquid:not(.glass-solo) {
       --ui-surface-ground: var(--color-background);
     }
 
     .glass-liquid {
       --_glass-liquid-blur: none;
       --_glass-liquid-lens: none;
+      --_glass-liquid-lens-control: none;
     }
   }
 
   /* The layers: a treatment no token reaches, so a selector list glass owns and
-     the registry records. Two pseudo-elements behind a surface's content, the
-     blur beneath and the lens with the rim and sheen above it. `isolation`
-     keeps them above the surface's own plate, which they then blur with the
-     page; `position` anchors them, and a component that positions itself --
-     the tooltip bubble -- keeps its own. A default or `.soft` table frosts
-     under glass, so it takes the layers too. Both slots are spent, so a surface
-     inside a liquid region carries no `::before` or `::after` of the
-     consumer's; the fields cannot host one, and controls stay solid as they do
-     under glass.
-
-     A region of another aesthetic nested inside, or of plain glass, keeps its
-     own material and takes no layers. This list names the other aesthetics, and
-     `registry.test.ts` fails when one is missing. */
-  :is(.glass-liquid, .glass-liquid *):is(.glass, .glass *):is(
-    .card,
-    .panel,
-    .alert,
-    .tooltip-bubble,
-    .surface,
-    .data-table:not(.solid, .ghost)
-  ):not(
-    .glass-liquid :is(.neobrutalism, .pixel, .chunky-tile, .cyber, .sketch),
-    .glass-liquid :is(.neobrutalism, .pixel, .chunky-tile, .cyber, .sketch) *,
-    .glass-liquid .glass:not(.glass-liquid),
-    .glass-liquid .glass:not(.glass-liquid) *
-  ) {
+     the registry records. Two pseudo-elements behind the content, the blur
+     beneath and the lens with the rim and sheen above it. `isolation` keeps
+     them above the element's own plate, which they then blur with the page;
+     `position` anchors them, and a component that positions itself -- the
+     tooltip bubble -- keeps its own. A default or `.soft` table frosts under
+     glass, so it takes the layers too. Both slots are spent, so a host carries
+     no `::before` or `::after` of the consumer's; the fields cannot host one.
+
+     The blur is on the layer and not on the host: an element with a backdrop
+     filter of its own is a backdrop root, and a layer inside one sees only that
+     element, never the page behind it. So a host clears the region's backdrop.
+
+     Surfaces take the layers from a liquid scope. A region of another
+     aesthetic nested inside, or of plain glass, keeps its own material and
+     takes none; this list names the other aesthetics, and `registry.test.ts`
+     fails when one is missing.
+
+     A button takes them only when it carries `.glass-liquid` itself, in a
+     glass scope. Controls stay solid under a liquid region, for the reason
+     glass gives -- two composited layers and a filter under every control of a
+     dense cluster -- and a class on the one button that is meant to be a pane
+     is a request rather than a cascade, the idiom `text-control` uses for
+     `.edgeless`. Its fill is still presentation's: `.solid` stays an opaque
+     plate under the rim, and `.soft` and `.ghost` are the clear panes. A
+     disabled one is dimmed by `opacity`, which makes it a backdrop root, so it
+     keeps the ground and the rim and bends nothing. */
+  :is(.glass-liquid:not(.glass-solo), .glass-liquid:not(.glass-solo) *):is(.glass, .glass *):is(
+      .card,
+      .panel,
+      .alert,
+      .tooltip-bubble,
+      .surface,
+      .data-table:not(.solid, .ghost)
+    ):not(
+      .glass-liquid :is(.neobrutalism, .pixel, .chunky-tile, .cyber, .sketch),
+      .glass-liquid :is(.neobrutalism, .pixel, .chunky-tile, .cyber, .sketch) *,
+      .glass-liquid .glass:not(.glass-liquid),
+      .glass-liquid .glass:not(.glass-liquid) *
+    ),
+  .btn.glass-liquid:is(.glass, .glass *) {
+    --ui-backdrop: none;
+
     position: relative;
     isolation: isolate;
 
@@ -269,6 +303,28 @@
       box-shadow: var(--_glass-liquid-rim);
     }
   }
+
+  /* A button's lens is the control one. Swapped as the value the layer reads
+     rather than on the layer: the list above outranks any selector that names
+     the button's `::after` alone. */
+  .btn.glass-liquid:is(.glass, .glass *) {
+    --_glass-liquid-lens: var(--_glass-liquid-lens-control);
+  }
+}
+
+/* A liquid button rests on liquid's ground rather than on nothing, so a
+   `.ghost` or `.soft` one is a pane and not a hole in the page. It reads the
+   surface ground the modifier set on it, so reduced transparency and a
+   consumer's own `--ui-surface-ground` reach it as they reach a card.
+
+   In `utilities`, not with the layers: it has to beat `box`'s own
+   `--_d-ground: transparent`, which it does there on specificity, and it
+   writes only a private nothing a consumer sets. See
+   docs/internal/model.md#cascade-layers. */
+@layer utilities {
+  .btn.glass-liquid:is(.glass, .glass *) {
+    --_d-ground: var(--ui-surface-ground, transparent);
+  }
 }
 
 /* Forced colours paint the plain surface: no layer blurs, bends, or lights it. */
@@ -276,6 +332,7 @@
   .glass-liquid {
     --_glass-liquid-blur: none;
     --_glass-liquid-lens: none;
+    --_glass-liquid-lens-control: none;
     --_glass-liquid-rim: none;
     --_glass-liquid-sheen: none;
   }
@@ -286,24 +343,63 @@
    `<div>` on a page that never loaded the base stylesheet. See
    docs/internal/model.md#solo-classes.
 
-   It reads the aesthetic's own knobs and the theme's foundation tokens, each
-   with its shipped literal as the fallback, and never a `--ui-*`, `--intent-*`,
-   or `--elevation-color` token: those belong to whichever aesthetic an ancestor
-   carries, and a solo element has to look the same inside any of them.
+   It composes with what the element is asked to be, the way a component does:
+   the fill and edge a presentation class asks for, on the element or cascaded
+   from a container; the intent class on the element; the element's own
+   elevation class. Each is read with the unclassed look as its fallback, so
+   with none of them, or with no theme loaded, it paints what it always did.
+
+   Material is the exception. It reads the aesthetic's own knobs and the
+   theme's foundation tokens, each with its shipped literal as the fallback,
+   and never a material `--ui-*` or `--elevation-color` token: those belong to
+   whichever aesthetic an ancestor carries, and a solo element has to be this
+   aesthetic inside any of them.
+
    Unlayered and one class deep, so it beats a foreign component's
    zero-specificity rules wherever they load. Not for this package's own
-   components, which take the aesthetic class instead. */
+   components, which take the aesthetic class instead.
+
+   The other five paint the fill as an inset layer over whatever the element
+   already is, and write no background, so an unclassed solo element keeps its
+   own. Glass's translucent ground is its material, so it owns the background
+   and mixes the fill over that ground. */
 .glass-solo {
-  background-color: color-mix(
+  /* The composition, the same in every solo class; `registry.test.ts` holds
+     the copies together. See the note on `.glass-solo`. */
+  --_solo-intent-color: initial;
+  --_solo-intent-contrast: initial;
+  --_solo-intent-strong: initial;
+  --_solo-intent-border: initial;
+  --_solo-intent-fill-max: initial;
+  --_solo-color: var(--_solo-intent-color, var(--color-text, light-dark(oklch(14.5% 0 0), oklch(98.5% 0 0))));
+  --_solo-contrast: var(
+    --_solo-intent-contrast,
+    var(--color-text-contrast, light-dark(oklch(98.5% 0 0), oklch(14.5% 0 0)))
+  );
+  --_solo-strong: var(--_solo-intent-strong, var(--color-text-strong, light-dark(oklch(20.5% 0 0), oklch(97% 0 0))));
+  --_solo-capped: min(var(--ui-fill, 0%), var(--_solo-intent-fill-max, 20%));
+  --_solo-fill: color-mix(in oklab, var(--_solo-color) var(--_solo-capped), transparent);
+  --_solo-on-fill: min(var(--ui-fg-on-fill, 0%), max(0%, calc(var(--_solo-capped) * 2 - 100%)));
+  --_solo-fg: color-mix(in oklab, var(--_solo-contrast) var(--_solo-on-fill), var(--_solo-strong));
+  /* The line with no intent on the element: this aesthetic's own ink. */
+  --_solo-ink: var(--_solo-intent-border, light-dark(rgb(255 255 255 / 0.65), rgb(255 255 255 / 0.22)));
+  --_solo-ground: color-mix(
     in srgb,
     var(--color-background, light-dark(oklch(98.5% 0 0), oklch(14.5% 0 0))) 45%,
     transparent
   );
-  border: 1px solid light-dark(rgb(255 255 255 / 0.65), rgb(255 255 255 / 0.22));
+  /* The plate runs under the border, so the line fades to nothing, as `box`'s
+     does, rather than to the fill. */
+  --_solo-edge: color-mix(in oklab, var(--_solo-ink) var(--ui-border, 100%), transparent);
+
+  background-color: color-mix(in oklab, var(--_solo-color) var(--_solo-capped), var(--_solo-ground));
+  border: 1px solid var(--_solo-edge);
   /* The surface corner: the element this exists for is a pane. */
   border-radius: var(--glass-radius-surface, 1rem);
   /* The theme's depth colour as a literal, for the reason above: inside a
-     `.chunky-tile` region the token is black. */
+     `.chunky-tile` region the token is black. A complete shadow, so the
+     elevation classes do not reach it, as they do not under the aesthetic
+     class. */
   box-shadow:
     0 1px 2px -1px light-dark(rgb(15 23 42 / 0.08), rgb(0 0 0 / 0.55)),
     0 18px 40px -16px light-dark(rgb(15 23 42 / 0.08), rgb(0 0 0 / 0.55));
@@ -313,9 +409,39 @@
   backdrop-filter: blur(14px) saturate(1.6);
 }
 
+/* An intent class on the element colours it, as on a component. Named rather
+   than read from `--intent-*` alone: those slots inherit, so a `.success`
+   container would colour a solo element where it leaves a component neutral. */
+.glass-solo:is(.primary, .secondary, .success, .warning, .destructive, .info) {
+  --_solo-intent-color: var(--intent-color);
+  --_solo-intent-contrast: var(--intent-contrast);
+  --_solo-intent-strong: var(--intent-strong);
+  --_solo-intent-border: var(--intent-border);
+  --_solo-intent-fill-max: var(--intent-fill-max);
+}
+
+/* The text colour is written only where a fill or an intent is asked for, on
+   the element or by a container's fill class. Anywhere else the element keeps
+   its own: a dark toast keeps its light text. */
+.glass-solo:is(
+  .solid,
+  .soft,
+  .ghost,
+  .primary,
+  .secondary,
+  .success,
+  .warning,
+  .destructive,
+  .info,
+  :is(.solid, .soft, .ghost) *
+) {
+  color: var(--_solo-fg);
+}
+
 @media (prefers-reduced-transparency: reduce) {
   .glass-solo {
-    background-color: var(--color-background, light-dark(oklch(98.5% 0 0), oklch(14.5% 0 0)));
+    --_solo-ground: var(--color-background, light-dark(oklch(98.5% 0 0), oklch(14.5% 0 0)));
+
     -webkit-backdrop-filter: none;
     backdrop-filter: none;
   }
@@ -336,13 +462,14 @@
 }
 
 .glass-solo.glass-liquid {
-  isolation: isolate;
-  background-color: color-mix(
+  --_solo-ground: color-mix(
     in srgb,
     var(--color-background, light-dark(oklch(98.5% 0 0), oklch(14.5% 0 0))) 30%,
     transparent
   );
-  border-color: light-dark(rgb(255 255 255 / 0.45), rgb(255 255 255 / 0.16));
+  --_solo-ink: var(--_solo-intent-border, light-dark(rgb(255 255 255 / 0.45), rgb(255 255 255 / 0.16)));
+
+  isolation: isolate;
   border-radius: var(--glass-radius-surface, 1.5rem);
   corner-shape: squircle;
   -webkit-backdrop-filter: none;
@@ -373,6 +500,6 @@
 
 @media (prefers-reduced-transparency: reduce) {
   .glass-solo.glass-liquid {
-    background-color: var(--color-background, light-dark(oklch(98.5% 0 0), oklch(14.5% 0 0)));
+    --_solo-ground: var(--color-background, light-dark(oklch(98.5% 0 0), oklch(14.5% 0 0)));
   }
 }

package/dist/tw/aesthetics/neobrutalism.css

@@ -120,48 +120,108 @@
 
    In `utilities`, not with the token class: it has to beat `@utility alert`'s
    own `--_d-elevation: 0`, which it does there at 0-2-0, and it writes only a
-   private nothing a consumer sets. */
+   private nothing a consumer sets.
+
+   Bounded by the nearest aesthetic region: an alert inside another aesthetic
+   nested in a neobrutalist region rests as that aesthetic rests it, and one in
+   a neobrutalist region nested again inside that takes the slab back. A
+   `:not(.neobrutalism :is(...) *)` exclusion cannot tell those two apart, since
+   the re-entered alert also sits below the other aesthetic, so each region
+   writes a private flag instead and inheritance hands the alert the nearest
+   one's. The slab is the alert's own resting default when the flag is unset. */
 @layer utilities {
+  .neobrutalism {
+    --_neo-alert-elevation: 1;
+  }
+
+  :is(.glass, .pixel, .chunky-tile, .cyber, .sketch) {
+    --_neo-alert-elevation: initial;
+  }
+
   .neobrutalism .alert {
-    --_d-elevation: 1;
+    --_d-elevation: var(--_neo-alert-elevation, 0);
   }
 }
 
 /* Solo: the same look painted onto the one element carrying the class, for an
    element the package does not style. See docs/internal/model.md#solo-classes and
-   the note on `.glass-solo`: own knobs and foundation tokens with literal
-   fallbacks, never a shared `--ui-*`, `--intent-*`, or `--elevation-color`
-   token, unlayered, and not for this package's own components. */
+   the note on `.glass-solo`: it composes with the element's presentation,
+   intent, and elevation, and reads its material from its own knobs and
+   foundation tokens with literal fallbacks, never a shared material `--ui-*`
+   or `--elevation-color` token. Unlayered, and not for this package's own
+   components. */
 .neobrutalism-solo {
   --_neo-offset: var(--neo-offset, 4px);
-  --_neo-ink: light-dark(var(--color-neutral-950, oklch(14.5% 0 0)), var(--color-neutral-50, oklch(98.5% 0 0)));
+  /* The composition, the same in every solo class; `registry.test.ts` holds
+     the copies together. See the note on `.glass-solo`. */
+  --_solo-intent-color: initial;
+  --_solo-intent-contrast: initial;
+  --_solo-intent-strong: initial;
+  --_solo-intent-border: initial;
+  --_solo-intent-fill-max: initial;
+  --_solo-color: var(--_solo-intent-color, var(--color-text, light-dark(oklch(14.5% 0 0), oklch(98.5% 0 0))));
+  --_solo-contrast: var(
+    --_solo-intent-contrast,
+    var(--color-text-contrast, light-dark(oklch(98.5% 0 0), oklch(14.5% 0 0)))
+  );
+  --_solo-strong: var(--_solo-intent-strong, var(--color-text-strong, light-dark(oklch(20.5% 0 0), oklch(97% 0 0))));
+  --_solo-capped: min(var(--ui-fill, 0%), var(--_solo-intent-fill-max, 20%));
+  --_solo-fill: color-mix(in oklab, var(--_solo-color) var(--_solo-capped), transparent);
+  --_solo-on-fill: min(var(--ui-fg-on-fill, 0%), max(0%, calc(var(--_solo-capped) * 2 - 100%)));
+  --_solo-fg: color-mix(in oklab, var(--_solo-contrast) var(--_solo-on-fill), var(--_solo-strong));
+  /* The line with no intent on the element: this aesthetic's own ink. */
+  --_solo-ink: var(
+    --_solo-intent-border,
+    light-dark(var(--color-neutral-950, oklch(14.5% 0 0)), var(--color-neutral-50, oklch(98.5% 0 0)))
+  );
+  --_solo-edge: color-mix(in oklab, var(--_solo-ink) var(--ui-border, 100%), var(--_solo-fill));
+  /* The slab, scaled by the element's own elevation class: `.flat` takes it off
+     and `.floating` doubles it, and the press travels the same distance. */
+  --_solo-depth: calc(var(--_neo-offset) * var(--ui-elevation, 1));
 
-  border: 2px solid var(--_neo-ink);
+  border: 2px solid var(--_solo-edge);
   border-radius: 0;
-  box-shadow: var(--_neo-offset) var(--_neo-offset) 0 0 var(--_neo-ink);
+  box-shadow:
+    var(--_solo-depth) var(--_solo-depth) 0 0 var(--_solo-ink),
+    inset 0 0 0 100vmax var(--_solo-fill);
   transition:
     box-shadow var(--motion-duration-normal, 200ms) var(--motion-ease, cubic-bezier(0.2, 0, 0, 1)),
     transform var(--motion-duration-normal, 200ms) var(--motion-ease, cubic-bezier(0.2, 0, 0, 1));
 }
 
+/* An intent class on the element colours it, as on a component. Named rather
+   than read from `--intent-*` alone: those slots inherit, so a `.success`
+   container would colour a solo element where it leaves a component neutral. */
+.neobrutalism-solo:is(.primary, .secondary, .success, .warning, .destructive, .info) {
+  --_solo-intent-color: var(--intent-color);
+  --_solo-intent-contrast: var(--intent-contrast);
+  --_solo-intent-strong: var(--intent-strong);
+  --_solo-intent-border: var(--intent-border);
+  --_solo-intent-fill-max: var(--intent-fill-max);
+}
+
+/* The text colour is written only where a fill or an intent is asked for, on
+   the element or by a container's fill class. Anywhere else the element keeps
+   its own: a dark toast keeps its light text. */
+.neobrutalism-solo:is(
+  .solid,
+  .soft,
+  .ghost,
+  .primary,
+  .secondary,
+  .success,
+  .warning,
+  .destructive,
+  .info,
+  :is(.solid, .soft, .ghost) *
+) {
+  color: var(--_solo-fg);
+}
+
 /* The press, only on something pressed: an action, not disabled. A solo
    container -- a toast clicked to dismiss -- stays put, the way only `.btn` and
    an opted-in card press under the aesthetic class. */
 .neobrutalism-solo:is(
-  button,
-  a[href],
-  [role="button"],
-  summary,
-  input[type="button"],
-  input[type="submit"],
-  input[type="reset"]
-):active:not(:disabled, [aria-disabled="true"]) {
-  box-shadow: 0 0 0 0 var(--_neo-ink);
-  transform: translate(var(--_neo-offset), var(--_neo-offset));
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .neobrutalism-solo:is(
     button,
     a[href],
     [role="button"],
@@ -170,6 +230,22 @@
     input[type="submit"],
     input[type="reset"]
   ):active:not(:disabled, [aria-disabled="true"]) {
+  box-shadow:
+    0 0 0 0 var(--_solo-ink),
+    inset 0 0 0 100vmax var(--_solo-fill);
+  transform: translate(var(--_solo-depth), var(--_solo-depth));
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .neobrutalism-solo:is(
+      button,
+      a[href],
+      [role="button"],
+      summary,
+      input[type="button"],
+      input[type="submit"],
+      input[type="reset"]
+    ):active:not(:disabled, [aria-disabled="true"]) {
     transform: none;
   }
 }

package/dist/tw/aesthetics/pixel.css

@@ -147,18 +147,46 @@
 
 /* Solo: the same look painted onto the one element carrying the class, for an
    element the package does not style. See docs/internal/model.md#solo-classes and
-   the note on `.glass-solo`: own knobs and foundation tokens with literal
-   fallbacks, never a shared `--ui-*`, `--intent-*`, or `--elevation-color`
-   token, unlayered, and not for this package's own components. */
+   the note on `.glass-solo`: it composes with the element's presentation,
+   intent, and elevation, and reads its material from its own knobs and
+   foundation tokens with literal fallbacks, never a shared material `--ui-*`
+   or `--elevation-color` token. Unlayered, and not for this package's own
+   components. */
 .pixel-solo {
   --_pixel-unit: var(--pixel-unit, 4px);
-  --_pixel-ink: light-dark(var(--color-neutral-950, oklch(14.5% 0 0)), var(--color-neutral-50, oklch(98.5% 0 0)));
+  /* The composition, the same in every solo class; `registry.test.ts` holds
+     the copies together. See the note on `.glass-solo`. */
+  --_solo-intent-color: initial;
+  --_solo-intent-contrast: initial;
+  --_solo-intent-strong: initial;
+  --_solo-intent-border: initial;
+  --_solo-intent-fill-max: initial;
+  --_solo-color: var(--_solo-intent-color, var(--color-text, light-dark(oklch(14.5% 0 0), oklch(98.5% 0 0))));
+  --_solo-contrast: var(
+    --_solo-intent-contrast,
+    var(--color-text-contrast, light-dark(oklch(98.5% 0 0), oklch(14.5% 0 0)))
+  );
+  --_solo-strong: var(--_solo-intent-strong, var(--color-text-strong, light-dark(oklch(20.5% 0 0), oklch(97% 0 0))));
+  --_solo-capped: min(var(--ui-fill, 0%), var(--_solo-intent-fill-max, 20%));
+  --_solo-fill: color-mix(in oklab, var(--_solo-color) var(--_solo-capped), transparent);
+  --_solo-on-fill: min(var(--ui-fg-on-fill, 0%), max(0%, calc(var(--_solo-capped) * 2 - 100%)));
+  --_solo-fg: color-mix(in oklab, var(--_solo-contrast) var(--_solo-on-fill), var(--_solo-strong));
+  /* The line with no intent on the element: this aesthetic's own ink. */
+  --_solo-ink: var(
+    --_solo-intent-border,
+    light-dark(var(--color-neutral-950, oklch(14.5% 0 0)), var(--color-neutral-50, oklch(98.5% 0 0)))
+  );
+  /* The ring is the edge, and the fill is a layer under it rather than a plate
+     beneath a border, so the line fades to nothing instead of to the fill. */
+  --_solo-edge: color-mix(in oklab, var(--_solo-ink) var(--ui-border, 100%), transparent);
 
   /* The clip removes a border at the straight sides, so the ring draws the
      edge and the element's own border goes. */
   border: 0;
   border-radius: 0;
-  box-shadow: inset 0 0 0 var(--_pixel-unit) var(--_pixel-ink);
+  box-shadow:
+    inset 0 0 0 var(--_pixel-unit) var(--_solo-edge),
+    inset 0 0 0 100vmax var(--_solo-fill);
   clip-path: polygon(
     0 var(--_pixel-unit),
     var(--_pixel-unit) var(--_pixel-unit),
@@ -176,11 +204,68 @@
   font-family: var(--font-pixel, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
 }
 
+/* An intent class on the element colours it, as on a component. Named rather
+   than read from `--intent-*` alone: those slots inherit, so a `.success`
+   container would colour a solo element where it leaves a component neutral. */
+.pixel-solo:is(.primary, .secondary, .success, .warning, .destructive, .info) {
+  --_solo-intent-color: var(--intent-color);
+  --_solo-intent-contrast: var(--intent-contrast);
+  --_solo-intent-strong: var(--intent-strong);
+  --_solo-intent-border: var(--intent-border);
+  --_solo-intent-fill-max: var(--intent-fill-max);
+}
+
+/* The text colour is written only where a fill or an intent is asked for, on
+   the element or by a container's fill class. Anywhere else the element keeps
+   its own: a dark toast keeps its light text. */
+.pixel-solo:is(
+  .solid,
+  .soft,
+  .ghost,
+  .primary,
+  .secondary,
+  .success,
+  .warning,
+  .destructive,
+  .info,
+  :is(.solid, .soft, .ghost) *
+) {
+  color: var(--_solo-fg);
+}
+
 /* The clip takes the focus outline too, so focus is a second inset layer under
-   the ring, wider than it so it shows -- shadows paint first-on-top. */
+   the ring, wider than it so it shows -- shadows paint first-on-top. A line of
+   the page colour sits inside that one, as in `box`: the ring is the ink, and
+   on an element filled with the ink it would not show. */
 .pixel-solo:focus-visible {
   box-shadow:
-    inset 0 0 0 var(--_pixel-unit) var(--_pixel-ink),
+    inset 0 0 0 var(--_pixel-unit) var(--_solo-edge),
     inset 0 0 0 calc(var(--_pixel-unit) + var(--focus-ring-width, 3px))
-      var(--focus-ring, color-mix(in srgb, var(--_pixel-ink) 64%, transparent));
+      var(
+        --focus-ring,
+        color-mix(
+          in srgb,
+          light-dark(var(--color-neutral-950, oklch(14.5% 0 0)), var(--color-neutral-50, oklch(98.5% 0 0))) 64%,
+          transparent
+        )
+      ),
+    inset 0 0 0 calc(var(--_pixel-unit) + var(--focus-ring-width, 3px) + 2px)
+      var(--color-background, light-dark(oklch(98.5% 0 0), oklch(14.5% 0 0))),
+    inset 0 0 0 100vmax var(--_solo-fill);
+}
+
+/* Forced colours remove every box shadow, and the ring is one: the element
+   would have no edge at all. An outline stands in for it, drawn inward so
+   nothing moves, and the clip goes so the focus outline can show. This
+   entrypoint may be the only package stylesheet loaded, so it says so itself. */
+@media (forced-colors: active) {
+  .pixel-solo {
+    outline: var(--_pixel-unit) solid CanvasText;
+    outline-offset: calc(-1 * var(--_pixel-unit));
+    clip-path: none;
+  }
+
+  .pixel-solo:focus-visible {
+    outline-color: Highlight;
+  }
 }