@codenhub/styles 0.5.0 → 0.7.0

package/dist/tw/aesthetics/neobrutalism.css

@@ -1,8 +1,7 @@
 /* Neobrutalism: thick ink outline, a hard unblurred offset shadow, and a press
    that moves the element into its own shadow. Material tokens only, no component
    named -- the ink reaches everything through the intent reset, the shadow is
-   colourless geometry each component colours against its own intent. Load after
-   the base stylesheet; source order decides against the zero-specificity reset. */
+   colourless geometry each component colours against its own intent. */
 
 /* The layer map, stated before anything uses a layer -- see `theme.css`. The
    aesthetic's token class sits in `components`, below every utility, so a
@@ -37,6 +36,10 @@
        is the whole look, so this aesthetic asks for the intent instead of the
        neutral depth colour every other shadow uses. */
     --ui-shadow-ink: 100%;
+    /* The ink replaces the depth colour whole, so this one is inert here; it is
+       restated so a region nested inside chunky tile or cyber does not inherit
+       their black or transparent depth. */
+    --elevation-color: light-dark(rgb(15 23 42 / 0.08), rgb(0 0 0 / 0.55));
     --ui-shadow-x: var(--_neo-offset);
     --ui-shadow-y: var(--_neo-offset);
     --ui-shadow-blur: 0px;
@@ -47,19 +50,24 @@
     --ui-halo-spread: initial;
     --ui-halo-ink: initial;
 
-    /* The press: travel the offset, shrink the shadow to nothing, so the element
-       lands flat where its slab was. A translation `box` scales with the slab, so
-       the two stay the same length at every size and elevation. Hover keeps the slab still under the pointer;
-       `box-hover`'s derived fill tint is the whole hover response. One token pair,
-       no `:hover` list, R3 intact. */
+    /* The press: travel the offset, shrink the shadow to nothing, so the
+       element lands flat where its slab was. A translation `box` scales with
+       the slab, so the two stay the same length at every size and elevation.
+       Hover keeps the slab still under the pointer; `box-hover`'s derived fill
+       tint is the whole hover response. One token pair, no `:hover` list, R3
+       intact. */
     --ui-active-shadow-x: 0px;
     --ui-active-shadow-y: 0px;
     --ui-active-transform: none;
     --ui-active-translate-x: var(--_neo-offset);
     --ui-active-translate-y: var(--_neo-offset);
+    --ui-hover-transform: none;
 
     /* Nothing here clips or blurs, and an aesthetic nested inside another has to
-       say so rather than inherit it. */
+       say so rather than inherit it. Nothing clips, so the global focus outline
+       shows and no inset focus layer is wanted: cleared so a region nested
+       inside pixel does not inherit pixel's. */
+    --ui-focus-inset: initial;
     --ui-clip: none;
     --ui-clip-tight: none;
     /* Round corners, said explicitly, and the pill and chip corners cleared back
@@ -86,9 +94,13 @@
     --ui-bg-alpha: 1;
     --ui-surface-image: initial;
 
-    /* The control ink glass and chunky tile name, cleared so a region nested
-       inside either draws its controls in this aesthetic's own ink. */
-    --ui-control-ink: initial;
+    /* A control's neutral line is the theme's control border, not this
+       aesthetic's ink: that ink is the primary colour in both themes, so every
+       unchecked toggle and resting field drew its boundary as loudly as a
+       primary one. Named rather than cleared, so a region nested inside glass
+       or chunky tile does not inherit theirs either. */
+    --ui-control-ink: var(--color-control-border);
+    --ui-rule-ink: initial;
 
     /* Chunky tile's heavier label, cleared so a region nested inside it keeps
        the button's and the badge's own label. */
@@ -108,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"],
@@ -158,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

@@ -64,11 +64,10 @@
        has to be wider than the edge to show at all. */
     --ui-focus-inset: calc(var(--_pixel-unit) + var(--focus-ring-width));
 
-    /* One square unit off each corner, and nothing else. The staircase this
-       replaces stepped twice at half the unit to approximate a curve, which is the
-       one thing a low-resolution grid cannot do: at any size it read as a bevel
-       that had not quite committed. A single cut of the grid's own unit is the
-       shape the look is actually made of.
+    /* One square unit off each corner, and nothing else. A staircase
+       approximates a curve, which is the one thing a low-resolution grid cannot
+       do: it reads as a bevel that has not quite committed. A single cut of the
+       grid's own unit is the shape the look is made of.
 
        The polygon resolves the unit here, on `.pixel`, and inherits down
        already-resolved -- so a component cannot rescale the corner by setting
@@ -108,6 +107,13 @@
     --ui-corner-br: initial;
     --ui-corner-bl: initial;
 
+    /* The ring is the edge and nothing here is depth, so the shadow ink, the
+       press's shadow, and the depth colour are cleared or restated rather than
+       inherited from an aesthetic around this one. */
+    --ui-shadow-ink: initial;
+    --ui-active-shadow-x: initial;
+    --ui-active-shadow-y: initial;
+    --elevation-color: light-dark(rgb(15 23 42 / 0.08), rgb(0 0 0 / 0.55));
     --ui-hover-transform: none;
     --ui-active-transform: none;
     --ui-active-translate-x: initial;
@@ -122,9 +128,13 @@
        font to fall back to but a monospace stack. */
     font-family: var(--font-pixel, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
 
-    /* The control ink glass and chunky tile name, cleared so a region nested
-       inside either draws its controls in this aesthetic's own ink. */
-    --ui-control-ink: initial;
+    /* A control's neutral line is the theme's control border, not this
+       aesthetic's ink: that ink is the primary colour in both themes, so every
+       unchecked toggle and resting field drew its boundary as loudly as a
+       primary one. Named rather than cleared, so a region nested inside glass
+       or chunky tile does not inherit theirs either. */
+    --ui-control-ink: var(--color-control-border);
+    --ui-rule-ink: initial;
 
     /* Chunky tile's heavier label, cleared so a region nested inside it keeps
        the button's and the badge's own label. */
@@ -137,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),
@@ -166,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;
+  }
 }

package/dist/tw/aesthetics/sketch.css

@@ -1,6 +1,6 @@
 /* Sketch: uneven elliptical corners, a solid ink edge, and a small hard shadow.
    The handwriting face is consumer-supplied, so this file has no font asset or
-   network side effect. Load after the base stylesheet. */
+   network side effect. */
 
 /* The layer map, stated before anything uses a layer -- see `theme.css`. The
    aesthetic's token class sits in `components`, below every utility, so a
@@ -28,7 +28,10 @@
     --ui-corner-shape: round;
 
     --ui-ink: light-dark(var(--color-neutral-950), var(--color-neutral-50));
-    --ui-control-ink: initial;
+    /* Controls take the theme's control border rather than the ink, which is the
+       primary colour in both themes; see `neobrutalism.css`. */
+    --ui-control-ink: var(--color-control-border);
+    --ui-rule-ink: initial;
     --ui-border-width: 1px;
     --ui-border-max: 100px;
     --ui-line-style: solid;
@@ -78,8 +81,14 @@
 
   /* Rounded variant: bounded elliptical corners, so the top and bottom edges of
      a wide element stay straight instead of bulging into an egg. On the region
-     with `.sketch`, or on one component inside it. Knobs follow R8. */
-  .sketch-rounded {
+     with `.sketch`, or on one component inside it. Knobs follow R8.
+
+     Never on a solo element, here or in the rotation below:
+     `.sketch-solo.sketch-rounded` paints its own outline, and a complete
+     radius declared on it would inherit into whatever it holds -- a `.btn`
+     inside a solo toast took a sketch outline on a page with no sketch in
+     scope. */
+  .sketch-rounded:not(.sketch-solo) {
     --ui-radius: var(--sketch-radius-rounded, 26px 10px 24px 11px / 12px 23px 11px 20px);
     --ui-radius-surface: var(--sketch-radius-surface-rounded, 38px 16px 36px 17px / 16px 34px 17px 32px);
     --ui-radius-pill: var(--sketch-radius-pill, 24px 16px 23px 17px / 17px 21px 16px 20px);
@@ -98,16 +107,16 @@
      given DOM order. A knob, when set, is one outline for every position. */
   :is(
     .sketch,
-    .sketch-rounded,
-    :is(.sketch, .sketch-rounded)
+    .sketch-rounded:not(.sketch-solo),
+    :is(.sketch, .sketch-rounded:not(.sketch-solo))
       :not(
-        :is(.sketch, .sketch-rounded) :is(.neobrutalism, .glass, .pixel, .chunky-tile, .cyber),
-        :is(.sketch, .sketch-rounded) :is(.neobrutalism, .glass, .pixel, .chunky-tile, .cyber) *
+        :is(.sketch, .sketch-rounded:not(.sketch-solo)) :is(.neobrutalism, .glass, .pixel, .chunky-tile, .cyber),
+        :is(.sketch, .sketch-rounded:not(.sketch-solo)) :is(.neobrutalism, .glass, .pixel, .chunky-tile, .cyber) *
       )
   ) {
     /* The pointed outlines: controls, fields, surfaces, and chips. */
-    &:is(.sketch, .sketch *):not(.sketch-rounded, .sketch-rounded *) {
-      &:is(.btn, .ipt, .textarea, .select, .input-group, .pre, .tooltip-bubble, .data-table) {
+    &:is(.sketch, .sketch *):not(.sketch-rounded:not(.sketch-solo), .sketch-rounded:not(.sketch-solo) *) {
+      &:is(.btn, .ipt, .textarea, .select, .input-group, .pre, .tooltip-bubble) {
         &:nth-child(4n + 2) {
           --ui-radius: var(--sketch-radius, 18px 240px 15px 255px / 240px 15px 255px 18px);
         }
@@ -139,7 +148,7 @@
         }
       }
 
-      &:is(.card, .panel, .alert) {
+      &:is(.card, .panel, .alert, .data-table) {
         &:nth-child(4n + 2) {
           --ui-radius-surface: var(--sketch-radius-surface, 4px 75px 5px 80px / 75px 3px 80px 4px);
         }
@@ -169,8 +178,8 @@
     }
 
     /* The rounded outlines, in the same four places. */
-    &:is(.sketch-rounded, .sketch-rounded *) {
-      &:is(.btn, .ipt, .textarea, .select, .input-group, .pre, .tooltip-bubble, .data-table) {
+    &:is(.sketch-rounded:not(.sketch-solo), .sketch-rounded:not(.sketch-solo) *) {
+      &:is(.btn, .ipt, .textarea, .select, .input-group, .pre, .tooltip-bubble) {
         &:nth-child(4n + 2) {
           --ui-radius: var(--sketch-radius-rounded, 11px 25px 12px 24px / 23px 11px 22px 12px);
         }
@@ -202,7 +211,7 @@
         }
       }
 
-      &:is(.card, .panel, .alert) {
+      &:is(.card, .panel, .alert, .data-table) {
         &:nth-child(4n + 2) {
           --ui-radius-surface: var(--sketch-radius-surface-rounded, 17px 36px 18px 34px / 33px 16px 32px 17px);
         }
@@ -274,19 +283,82 @@
   }
 }
 
-/* Solo: the look on one unstyled element. It uses standalone fallbacks rather
-   than material tokens inherited from an aesthetic around it. */
+/* 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`: 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. */
 .sketch-solo {
-  --_sketch-ink: light-dark(var(--color-neutral-950, oklch(14.5% 0 0)), var(--color-neutral-50, oklch(98.5% 0 0)));
-
-  border: 1px solid var(--_sketch-ink);
+  /* 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));
+  --_solo-depth: calc(2px * var(--ui-elevation, 1));
+
+  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(--sketch-radius-surface, 80px 4px 75px 5px / 3px 70px 4px 80px);
-  box-shadow: 2px 2px 0 0 var(--_sketch-ink);
+  /* The aesthetic's neutral depth cue, not the ink: the class casts its 2px
+     offset in the depth colour, and casting a solo pane in full ink would read
+     as a heavier, neobrutalist slab. The depth colour is a literal, for the reason
+     `.glass-solo` gives. */
+  box-shadow:
+    var(--_solo-depth) var(--_solo-depth) 0 0 light-dark(rgb(15 23 42 / 0.08), rgb(0 0 0 / 0.55)),
+    inset 0 0 0 100vmax var(--_solo-fill);
   font-family: var(--font-sketch, cursive);
 }
 
+/* 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. */
+.sketch-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. */
+.sketch-solo:is(
+  .solid,
+  .soft,
+  .ghost,
+  .primary,
+  .secondary,
+  .success,
+  .warning,
+  .destructive,
+  .info,
+  :is(.solid, .soft, .ghost) *
+) {
+  color: var(--_solo-fg);
+}
+
 /* An action takes the expressive control shape. */
 .sketch-solo:is(
   button,
@@ -306,14 +378,14 @@
 }
 
 .sketch-solo.sketch-rounded:is(
-  button,
-  a[href],
-  [role="button"],
-  summary,
-  input[type="button"],
-  input[type="submit"],
-  input[type="reset"]
-) {
+    button,
+    a[href],
+    [role="button"],
+    summary,
+    input[type="button"],
+    input[type="submit"],
+    input[type="reset"]
+  ) {
   border-radius: var(--sketch-radius-rounded, 26px 10px 24px 11px / 12px 23px 11px 20px);
 }