@codenhub/styles 0.6.0 → 0.8.0

package/{dist/tw → tw}/aesthetics/cyber.css

@@ -67,10 +67,15 @@
     --ui-rule-style: initial;
 
     /* The glow is light, not depth, so it is the halo: the component's own intent
-       colour at 40%, blurred, with no offset. Elevation does not scale it, so
-       every component glows -- fields and chips included -- and `.flat` does
-       not put it out. There is no depth, and the transparent depth colour keeps
-       `.raised` and `.floating` from drawing any. */
+       colour at 60%, blurred, with no offset. The 1px spread and the 60% put
+       the brightest point on the outline: at 40% with no spread the halo
+       peaked at about a fifth of the ink just outside the box, brighter than a
+       soft or capped neutral fill, so an edgeless element read as something in
+       front of a light -- a shadow -- rather than the light. An edged element
+       has its line for a source and read as lit either way. Elevation does
+       not scale it, so every component glows -- fields and chips included --
+       and `.flat` does not put it out. There is no depth, and the transparent
+       depth colour keeps `.raised` and `.floating` from drawing any. */
     --elevation-color: transparent;
     --ui-shadow-ink: 0%;
     --ui-shadow-x: 0px;
@@ -78,12 +83,12 @@
     --ui-shadow-blur: 0px;
     --ui-shadow-spread: 0px;
     --ui-halo-blur: var(--_cyber-glow);
-    --ui-halo-spread: 0px;
-    --ui-halo-ink: 40%;
+    --ui-halo-spread: 1px;
+    --ui-halo-ink: 60%;
 
     /* The glow holds still under the pointer and under a press; the press is the
        base scale, restated because a region nested inside another aesthetic must
-       not inherit that one's travel. Reduced motion drops it below. */
+       not inherit that one's travel. */
     --ui-hover-transform: none;
     --ui-active-shadow-x: 0px;
     --ui-active-shadow-y: 0px;
@@ -140,26 +145,41 @@
       --ui-radius-surface: 0;
     }
   }
-
-  @media (prefers-reduced-motion: reduce) {
-    .cyber {
-      --ui-active-transform: none;
-    }
-  }
 }
 
 /* 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. */
 .cyber-solo {
-  --_cyber-ink: var(
-    --cyber-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,
+    var(--cyber-ink, 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));
 
-  border: 1px solid var(--_cyber-ink);
+  border: 1px solid var(--_solo-edge);
   /* The surface shape: the element this exists for is usually a pane. An action
      takes the control shape below. */
   border-radius: var(
@@ -167,14 +187,49 @@
     0 min(var(--cyber-cut, 0.625rem), 25%) / 0 min(var(--cyber-cut, 0.625rem), 25%)
   );
   corner-shape: bevel;
-  /* Always lit: the elevation gate the aesthetic class answers to is `box`'s,
-     and a solo element is one the consumer chose to light up. */
-  box-shadow: 0 0 var(--cyber-glow, 8px) 0 color-mix(in oklab, var(--_cyber-ink) 40%, transparent);
+  /* Always lit, in the element's own colour: the glow is a halo and not depth,
+     so `.flat` leaves it on, as under the aesthetic class. */
+  box-shadow:
+    0 0 var(--cyber-glow, 8px) 1px color-mix(in oklab, var(--_solo-ink) 60%, transparent),
+    inset 0 0 0 100vmax var(--_solo-fill);
   font-family: var(--font-cyber, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
-  transition: transform var(--motion-duration-normal, 200ms) var(--motion-ease, cubic-bezier(0.2, 0, 0, 1));
 }
 
-/* An action takes the control shape, on the opposite diagonal to a pane's. */
+/* 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. */
+.cyber-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. */
+.cyber-solo:is(
+  .solid,
+  .soft,
+  .ghost,
+  .primary,
+  .secondary,
+  .success,
+  .warning,
+  .destructive,
+  .info,
+  :is(.solid, .soft, .ghost) *
+) {
+  color: var(--_solo-fg);
+}
+
+/* An action takes the control shape, on the opposite diagonal to a pane's.
+
+   And the press's transition, on an action only: `transition` is one list, so
+   writing it on every solo element replaced a container's own -- a toast's
+   fade and height stopped animating. The press is the independent `scale`, so
+   the element's own `transform` stays its own. */
 .cyber-solo:is(
   button,
   a[href],
@@ -185,6 +240,13 @@
   input[type="reset"]
 ) {
   border-radius: var(--cyber-shape, min(var(--cyber-cut, 0.625rem), 25%) 0 / min(var(--cyber-cut, 0.625rem), 25%) 0);
+  transition: scale var(--motion-duration-normal, 200ms) var(--motion-ease, cubic-bezier(0.2, 0, 0, 1));
+
+  /* Reduced motion keeps the press and drops its motion: the element gives at
+     once. The near-zero duration `box` uses, so a `transitionend` still fires. */
+  @media (prefers-reduced-motion: reduce) {
+    transition-duration: 0.01ms;
+  }
 }
 
 @supports not (corner-shape: bevel) {
@@ -206,19 +268,6 @@
    container stays put, the way only `.btn` and an opted-in card press under
    the aesthetic class. */
 .cyber-solo:is(
-  button,
-  a[href],
-  [role="button"],
-  summary,
-  input[type="button"],
-  input[type="submit"],
-  input[type="reset"]
-):active:not(:disabled, [aria-disabled="true"]) {
-  transform: scale(0.97);
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .cyber-solo:is(
     button,
     a[href],
     [role="button"],
@@ -227,6 +276,5 @@
     input[type="submit"],
     input[type="reset"]
   ):active:not(:disabled, [aria-disabled="true"]) {
-    transform: none;
-  }
+  scale: 0.97;
 }

package/{dist/tw → tw}/aesthetics/glass.css

@@ -39,6 +39,13 @@
        on a field's 60% resting line, in light. See
        docs/internal/model.md#presentation. */
     --ui-control-ink: light-dark(rgb(0 0 0 / 0.55), rgb(255 255 255 / 0.55));
+    /* Buttons and badges keep the hairline, which needs a plate to be seen
+       on. Unfilled they have none -- white at 65% on a light page is 1.01:1,
+       an edged ghost button with no edge -- so there the neutral line is the
+       control one. `box` reads it only for a neutral box resolving to no
+       fill; the other aesthetics clear it below, so the nearest region
+       decides. */
+    --_unfilled-ink: light-dark(rgb(0 0 0 / 0.55), rgb(255 255 255 / 0.55));
     /* Nor is a line drawn on a plate: the hairline vanishes on a table's light
        plate, and its default, `.ruled`, and `.ruleless` forms would render as
        one. A table's frame and rules take the theme's ink at a fifth,
@@ -124,20 +131,41 @@
     --ui-label-tracking: initial;
     --ui-label-case: initial;
     --ui-label-shadow: initial;
+
+    /* No face of its own, so the theme's, named rather than inherited: a glass
+       region nested inside pixel, cyber, sketch, or chunky tile otherwise took
+       their face. `--font-default` is the token the reset applies to the page,
+       as chunky tile reads it. */
+    font-family: var(--font-default, ui-sans-serif, system-ui, sans-serif);
+  }
+
+  /* A region of another aesthetic nested in glass draws its own line. */
+  :is(.neobrutalism, .pixel, .chunky-tile, .cyber, .sketch) {
+    --_unfilled-ink: initial;
   }
 
   /* Transparency is the whole aesthetic, so the honest degradation is an opaque
-     surface rather than a softer blur. */
-  @media (prefers-reduced-transparency: reduce) {
+     surface rather than a softer blur.
+
+     Forced colours take the same branch. They repaint a background in `Canvas`
+     but keep its alpha -- measured in Chromium -- so the translucent ground
+     stayed translucent over whatever was behind it, and a liquid card's text
+     sat at about 2.5:1 over a busy page. An opaque ground is `Canvas` whole. */
+  @media (prefers-reduced-transparency: reduce), (forced-colors: active), (prefers-contrast: more) {
     .glass {
       --ui-backdrop: none;
       --ui-surface-ground: var(--color-background);
     }
   }
 
-  @media (prefers-reduced-motion: reduce) {
+  /* More contrast also takes the ground whole, above, and then the white
+     hairline has nothing to be seen against: 1.03:1 on an opaque light page.
+     The line becomes the theme's control grey, above 4:1 on both grounds.
+     Only under this preference: reduced transparency asks for no stronger
+     line. See docs/accessibility.md. */
+  @media (prefers-contrast: more) {
     .glass {
-      --ui-active-transform: none;
+      --ui-ink: var(--color-control-border);
     }
   }
 
@@ -154,12 +182,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 +213,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,59 +234,104 @@
   }
 
   /* 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`. With the backdrop
+     cleared here it kept the clearer ground with nothing blurred behind it. A
+     host of 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 {
+  @media (prefers-reduced-transparency: reduce), (forced-colors: active), (prefers-contrast: more) {
+    .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) *
-  ) {
-    position: relative;
-    isolation: isolate;
+  @media (prefers-contrast: more) {
+    .glass.glass-liquid:not(.glass-solo),
+    .glass .glass-liquid:not(.glass-solo) {
+      --ui-ink: var(--color-control-border);
+    }
+  }
+
+  /* The layers: a treatment no token reaches. 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. Both slots are spent, so a
+     host carries no `::before` or `::after` of the consumer's; the fields
+     cannot host one.
+
+     Surfaces draw them in `surface` itself, from the flag and the values
+     below, so every element that applies it takes them: the package's
+     surfaces and a consumer's `@apply surface` alike. A selector list here
+     reached only the classes it named. The list below is for the two hosts
+     that are not surfaces, and the registry records it: a default or `.soft`
+     table, which frosts under glass, and a liquid button.
+
+     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, and a liquid region nested again inside that takes them back:
+     the nearest region decides. A `:not(.glass-liquid :is(...) *)` exclusion
+     cannot tell those two apart, since the re-entered surface also sits below
+     the other aesthetic, so each region writes a private flag instead and
+     inheritance hands a surface the nearest one's -- the way neobrutalism
+     rests its alert. The flag is on only for a liquid region in a glass
+     scope, so it alone says whether a surface takes the layers. Off, it
+     withholds the layers, the anchor, and the isolation, and a table or a
+     button gets back the backdrop the nearest region set. The list below
+     names the other aesthetics, and `registry.test.ts` fails when one is
+     missing. A region's own element is not a host: it declares the flag's
+     backdrop from its own, which a host would then declare from the flag.
+
+     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. */
+  .glass-liquid:not(.glass-solo):is(.glass, .glass *) {
+    /* A space toggle: empty is on, and `initial` makes every declaration
+       reading it invalid at computed-value time, which is off. */
+    --_glass-liquid-on: ;
+    --_glass-liquid-backdrop: initial;
+  }
+
+  .glass:not(.glass-liquid),
+  :is(.neobrutalism, .pixel, .chunky-tile, .cyber, .sketch) {
+    --_glass-liquid-on: initial;
+    --_glass-liquid-backdrop: var(--ui-backdrop);
+  }
+
+  :is(.glass-liquid:not(.glass-solo), .glass-liquid:not(.glass-solo) *):is(.glass, .glass *):is(
+      .data-table:not(.solid, .ghost)
+    ):not(.glass:not(.glass-liquid), :is(.neobrutalism, .pixel, .chunky-tile, .cyber, .sketch)),
+  .btn.glass-liquid:is(.glass, .glass *) {
+    --ui-backdrop: var(--_glass-liquid-backdrop, none);
+
+    position: var(--_glass-liquid-on) relative;
+    isolation: var(--_glass-liquid-on) isolate;
 
     &::before,
     &::after {
@@ -253,7 +340,7 @@
       z-index: -1;
       border-radius: inherit;
       corner-shape: inherit;
-      content: "";
+      content: var(--_glass-liquid-on) "";
       pointer-events: none;
     }
 
@@ -269,6 +356,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 +385,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 +396,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,14 +462,52 @@
   backdrop-filter: blur(14px) saturate(1.6);
 }
 
-@media (prefers-reduced-transparency: reduce) {
+/* 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);
+}
+
+/* Forced colours with it, for the reason the aesthetic class gives. */
+@media (prefers-reduced-transparency: reduce), (forced-colors: active), (prefers-contrast: more) {
   .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;
   }
 }
 
+/* The line on an opaque ground, as the aesthetic class draws it. */
+@media (prefers-contrast: more) {
+  .glass-solo {
+    --_solo-ink: var(--_solo-intent-border, var(--color-control-border, oklch(55.6% 0 0)));
+  }
+}
+
 /* With `.glass-liquid`, the liquid pane: its corner and ground, and the same two
    layers behind the element's content. The element's own blur goes, for the
    backdrop-root reason the modifier gives. Both pseudo-elements are spent, so a
@@ -336,13 +523,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;
@@ -371,8 +559,16 @@
   }
 }
 
-@media (prefers-reduced-transparency: reduce) {
+@media (prefers-reduced-transparency: reduce), (forced-colors: active), (prefers-contrast: more) {
+  .glass-solo.glass-liquid {
+    --_solo-ground: var(--color-background, light-dark(oklch(98.5% 0 0), oklch(14.5% 0 0)));
+  }
+}
+
+/* After the liquid pane's own ink, which it would otherwise override by source
+   order at the same specificity. */
+@media (prefers-contrast: more) {
   .glass-solo.glass-liquid {
-    background-color: var(--color-background, light-dark(oklch(98.5% 0 0), oklch(14.5% 0 0)));
+    --_solo-ink: var(--_solo-intent-border, var(--color-control-border, oklch(55.6% 0 0)));
   }
 }