@codenhub/styles 0.4.0 → 0.5.0

package/dist/tw/aesthetics/cyber.css

@@ -1,113 +1,150 @@
 /* Cyber: bevelled corners, a thin bright edge, and a glow in the component's own
-   colour. See docs/internal/cyber-aesthetic.md for the decision.
+   colour. See docs/internal/model.md#cyber for the decision.
 
    Tier 1 only. The bevel is `corner-shape`, not `clip-path`: a clip removes
    every outer shadow, so a clipped chamfer has nothing left to glow, and an
    inset ring cannot follow a diagonal cut the way `.pixel`'s follows its square
    one. `corner-shape` draws the corner itself, and the border, the glow, and the
    focus outline all follow it. Load after the base stylesheet. */
-.cyber {
-  /* Knobs, read with a fallback so an ancestor can set them (R8; see
-     model.md#rules-for-aesthetics). One cut size for controls and surfaces
-     alike, so a button and the card around it read as the same material; the
-     two shapes then place that cut on opposite diagonals, so they read as
-     different things. A shape knob takes any `border-radius` value -- the
-     documented presets are a hexagon, a parallelogram, and a single notch --
-     and the cut knob scales the default pair without restating it.
-
-     The cut is a ceiling, not a size: the default pair caps it at a quarter of
-     the element's own box, so a 40px button or a card takes the full cut and a
-     19px icon button about 5px rather than having its corners eaten. Nothing in
-     the model scales a corner with a component's size -- `.sm` and `.dense`
-     change padding and height, never the radius -- and a radius percentage is
-     the one length that already knows the box. Horizontal percentages resolve
-     against the width and vertical ones against the height, so on a small wide
-     button the cut runs slightly shallower than 45 degrees; at those sizes that
-     is not visible. A shape set through the knob is taken as written. */
-  --_cyber-cut: var(--cyber-cut, 0.625rem);
-  --_cyber-glow: var(--cyber-glow, 8px);
-  --_cyber-shape: var(--cyber-shape, min(var(--_cyber-cut), 25%) 0 / min(var(--_cyber-cut), 25%) 0);
-  --_cyber-shape-surface: var(--cyber-shape-surface, 0 min(var(--_cyber-cut), 25%) / 0 min(var(--_cyber-cut), 25%));
-
-  /* The neutral line. A neon hue is the look's signature, but hue is intent's
-     (R1), so the default follows the theme the way neobrutalism's and pixel's
-     ink does, and `--cyber-ink` lets an application choose a neon neutral
-     without the aesthetic imposing one on every palette. A named intent keeps
-     its own edge colour. */
-  --ui-ink: var(--cyber-ink, light-dark(var(--color-neutral-950), var(--color-neutral-50)));
-
-  /* Controls cut top-left and bottom-right, surfaces top-right and bottom-left.
-     Anything fully round -- a badge, a switch, the progress track, the tooltip
-     icon, and through their own full radius a radio and a `.btn.pill` -- cuts
-     all the way to points: a diamond, or a hexagon on something wider than it
-     is tall. Chips square outright, which is what tells the checkbox from the
-     radio beside it. */
-  --ui-corner-shape: bevel;
-  --ui-radius: var(--_cyber-shape);
-  --ui-radius-surface: var(--_cyber-shape-surface);
-  --ui-radius-pill: calc(infinity * 1px);
-  --ui-radius-tight: 0;
-  --ui-border-width: 1px;
-  --ui-border-max: 100px;
-
-  /* The glow: the component's own ink, blurred, with no offset. `box` mixes
-     depth as `color-mix(in oklab, var(--intent-border) var(--ui-shadow-ink),
-     var(--elevation-color))`, so a transparent depth colour turns 40% ink into
-     the intent colour at 40% alpha rather than into a darker shade of it.
-     Elevation scales the blur like every shadow, so the glow lights what rests
-     above zero -- buttons and cards -- and anything raised, and leaves fields
-     and chips crisp. */
-  --elevation-color: transparent;
-  --ui-shadow-ink: 40%;
-  --ui-shadow-x: 0px;
-  --ui-shadow-y: 0px;
-  --ui-shadow-blur: var(--_cyber-glow);
-  --ui-shadow-spread: 0px;
-
-  /* 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. */
-  --ui-hover-transform: none;
-  --ui-active-shadow-x: 0px;
-  --ui-active-shadow-y: 0px;
-  --ui-active-transform: scale(0.97);
-
-  /* Nothing here clips, blurs, thins its fill, or draws its edge as a ring, and
-     an aesthetic nested inside one that does has to say so rather than inherit
-     it. */
-  --ui-clip: none;
-  --ui-clip-tight: none;
-  --ui-shadow-inset: ;
-  --ui-shadow-edge: initial;
-  --ui-backdrop: none;
-  --ui-bg-alpha: 1;
-
-  /* Consumer-supplied, the way `.pixel` reads `--font-pixel`. The package ships
-     no font binary; the monospace stack is the closest technical face every
-     platform already has. */
-  font-family: var(--font-cyber, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
-}
 
-/* Firefox and Safari do not draw `corner-shape` yet, and there the radius would
-   round the corners instead. A rounded cyber element reads as a different
-   aesthetic; a square one reads as the same aesthetic simplified. What is fully
-   round stays round rather than square: a square radio is a checkbox, and a
-   pill is the nearest a diamond gets without a bevel. */
-@supports not (corner-shape: bevel) {
+/* 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
+   consumer's own utility or unlayered CSS beats it; the solo class stays
+   unlayered, because it has to beat a foreign component's unlayered CSS. See
+   docs/internal/model.md#cascade-layers. */
+@layer theme, base, components, utilities;
+
+@layer components {
   .cyber {
-    --ui-radius: 0;
-    --ui-radius-surface: 0;
+    /* Knobs, read with a fallback so an ancestor can set them (R8; see
+       model.md#rules-for-aesthetics). One cut size for controls and surfaces
+       alike, so a button and the card around it read as the same material; the
+       two shapes then place that cut on opposite diagonals, so they read as
+       different things. A shape knob takes any `border-radius` value -- the
+       documented presets are a hexagon, a parallelogram, and a single notch --
+       and the cut knob sizes the default pair without restating it.
+
+       The cut is the corner length at scale 1, and `box` multiplies it by the
+       size step, so a `.p-xs` icon button takes half the cut and a `.lg` button
+       a quarter more -- always a true 45 degrees, because it stays a length. It
+       used to be capped at a quarter of the element's box, a percentage, which
+       ran shallower than 45 degrees on a small wide button; the step retired
+       the cap. A shape set through a knob is taken as written, unscaled: it is
+       read as `--ui-radius`, which `box` honours over the computed corner, and
+       left unset the reference makes the token guaranteed-invalid so the
+       computed corner draws. */
+    --_cyber-cut: var(--cyber-cut, 0.625rem);
+    --_cyber-glow: var(--cyber-glow, 8px);
+
+    /* The neutral line. A neon hue is the look's signature, but hue is intent's
+       (R1), so the default follows the theme the way neobrutalism's and pixel's
+       ink does, and `--cyber-ink` lets an application choose a neon neutral
+       without the aesthetic imposing one on every palette. A named intent keeps
+       its own edge colour. */
+    --ui-ink: var(--cyber-ink, light-dark(var(--color-neutral-950), var(--color-neutral-50)));
+
+    /* Controls cut top-left and bottom-right, through the four corner switches
+       every component reads; surfaces cut top-right and bottom-left, which the
+       switches cannot say at the same time, so their shape is written whole and
+       does not scale -- a card is large enough that the full cut is right at
+       every padding. Anything fully round -- a badge, a switch, the progress
+       track, the tooltip icon, and through their own full radius a radio and a
+       `.btn.pill` -- cuts all the way to points: a diamond, or a hexagon on
+       something wider than it is tall. Chips square outright, which is what
+       tells the checkbox from the radio beside it. */
+    --ui-corner-shape: bevel;
+    --ui-corner: var(--_cyber-cut);
+    --ui-corner-surface: var(--_cyber-cut);
+    --ui-corner-tl: 1;
+    --ui-corner-tr: 0;
+    --ui-corner-br: 1;
+    --ui-corner-bl: 0;
+    --ui-radius: var(--cyber-shape);
+    --ui-radius-surface: var(--cyber-shape-surface, 0 var(--_cyber-cut) / 0 var(--_cyber-cut));
+    --ui-radius-pill: calc(infinity * 1px);
+    --ui-radius-tight: 0;
+    --ui-border-width: 1px;
+    --ui-border-max: 100px;
+    --ui-line-style: initial;
+    --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. */
+    --elevation-color: transparent;
+    --ui-shadow-ink: 0%;
+    --ui-shadow-x: 0px;
+    --ui-shadow-y: 0px;
+    --ui-shadow-blur: 0px;
+    --ui-shadow-spread: 0px;
+    --ui-halo-blur: var(--_cyber-glow);
+    --ui-halo-spread: 0px;
+    --ui-halo-ink: 40%;
+
+    /* 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. */
+    --ui-hover-transform: none;
+    --ui-active-shadow-x: 0px;
+    --ui-active-shadow-y: 0px;
+    --ui-active-transform: scale(0.97);
+    --ui-active-translate-x: initial;
+    --ui-active-translate-y: initial;
+
+    /* Nothing here clips, blurs, thins its fill, or draws its edge as a ring, and
+       an aesthetic nested inside one that does has to say so rather than inherit
+       it. */
+    --ui-clip: none;
+    --ui-clip-tight: none;
+    --ui-shadow-inset: ;
+    --ui-shadow-edge: initial;
+    --ui-backdrop: none;
+    --ui-surface-ground: initial;
+    --ui-surface-shadow: initial;
+    --ui-surface-image: initial;
+    --ui-bg-alpha: 1;
+
+    /* Consumer-supplied, the way `.pixel` reads `--font-pixel`. The package ships
+       no font binary; the monospace stack is the closest technical face every
+       platform already has. */
+    font-family: var(--font-cyber, 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;
+
+    /* Chunky tile's heavier label, cleared so a region nested inside it keeps
+       the button's and the badge's own label. */
+    --ui-label-weight: initial;
+    --ui-label-tracking: initial;
+    --ui-label-case: initial;
+    --ui-label-shadow: initial;
   }
-}
 
-@media (prefers-reduced-motion: reduce) {
-  .cyber {
-    --ui-active-transform: none;
+  /* Firefox and Safari do not draw `corner-shape` yet, and there the radius would
+     round the corners instead. A rounded cyber element reads as a different
+     aesthetic; a square one reads as the same aesthetic simplified. What is fully
+     round stays round rather than square: a square radio is a checkbox, and a
+     pill is the nearest a diamond gets without a bevel. */
+  @supports not (corner-shape: bevel) {
+    .cyber {
+      --ui-corner: 0;
+      --ui-radius: 0;
+      --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/solo-utilities.md and
+   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. */

package/dist/tw/aesthetics/glass.css

@@ -7,74 +7,115 @@
    panels, alerts and tooltips while controls stay solid. An active blur costs a
    compositing layer apiece, and one under every control of a dense cluster reads
    as noise. */
-.glass {
-  /* Knobs read with a fallback so an ancestor can set them -- declared here they
-     outrank `:root` (R8; see model.md#rules-for-aesthetics). Glass is softer
-     than the base geometry because a translucent tight corner reads as a
-     cut-out; a control/surface pair rather than one value, because they do not
-     scale together and 12/16 keeps a button looking at home inside a card. */
-  --ui-radius: var(--glass-radius, 0.75rem);
-  --ui-radius-surface: var(--glass-radius-surface, 1rem);
-  --ui-border-width: 1px;
-  --ui-border-max: 100px;
 
-  /* Glass catches light from above whatever is under it, so the edge is a light
-     hairline in both themes rather than a theme-following ink. */
-  --ui-ink: light-dark(rgb(255 255 255 / 0.65), rgb(255 255 255 / 0.22));
+/* 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
+   consumer's own utility or unlayered CSS beats it; the solo class stays
+   unlayered, because it has to beat a foreign component's unlayered CSS. See
+   docs/internal/model.md#cascade-layers. */
+@layer theme, base, components, utilities;
 
-  --ui-bg-alpha: 0.8;
-  --ui-backdrop: blur(14px) saturate(1.6);
+@layer components {
+  .glass {
+    /* Knobs read with a fallback so an ancestor can set them -- declared here they
+       outrank `:root` (R8; see model.md#rules-for-aesthetics). Glass is softer
+       than the base geometry because a translucent tight corner reads as a
+       cut-out; a control/surface pair rather than one value, because they do not
+       scale together and 12/16 keeps a button looking at home inside a card. */
+    --ui-corner: var(--glass-radius, 0.75rem);
+    --ui-corner-surface: var(--glass-radius-surface, 1rem);
+    --ui-border-width: 1px;
+    --ui-border-max: 100px;
+    --ui-line-style: initial;
+    --ui-rule-style: initial;
 
-  /* R6. Controls carry no shadow of their own -- the depth in this aesthetic is
-     the blur, and a drop shadow under a translucent button reads as grime. All
-     general parts are explicitly zero so inherited or future geometry cannot
-     leak onto controls. `--ui-surface-shadow` below replaces the shadow of
-     surfaces only. */
-  --ui-shadow-x: 0px;
-  --ui-shadow-y: 0px;
-  --ui-shadow-blur: 0px;
-  --ui-shadow-spread: 0px;
-  /* `--ui-bg-alpha` multiplies the fill, and a surface's default fill is 0%:
-     without a translucent ground the blur ends up behind an opaque background
-     and nothing shows through. */
-  --ui-surface-ground: color-mix(in srgb, var(--color-background) 45%, transparent);
+    /* Glass catches light from above whatever is under it, so the edge is a light
+       hairline in both themes rather than a theme-following ink. */
+    --ui-ink: light-dark(rgb(255 255 255 / 0.65), rgb(255 255 255 / 0.22));
+    /* A control's boundary is not a pane's edge. The hairline erases an
+       unchecked checkbox on a light page (1.33:1 inside a glass card) and leaves
+       a field with nothing marking where typing goes, so controls take the
+       theme's ink at 55% instead: translucent, so it tints whatever is behind
+       the pane rather than drawing a flat grey, and 6.31:1 on a checkbox, 2.31:1
+       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));
 
-  /* Two layers pulling in with negative spread, so the shadow tucks under the
-     surface instead of haloing onto the backdrop. It is the one shipped aesthetic
-     that cannot be described with the parts, so it takes `surface`'s
-     complete-value slot -- which is also what keeps it off buttons and chips --
-     and the registry records that `.flat` does not reach it. */
-  --ui-surface-shadow: 0 1px 2px -1px var(--elevation-color), 0 18px 40px -16px var(--elevation-color);
+    --ui-bg-alpha: 0.8;
+    --ui-backdrop: blur(14px) saturate(1.6);
+    --ui-surface-image: initial;
 
-  --ui-clip: none;
-  --ui-clip-tight: none;
-  /* Round corners, said explicitly, and the pill and chip corners cleared back
-     to `--ui-radius`: a region nested inside `.cyber` would otherwise inherit
-     its bevel, its diamond pills, and its square chips. */
-  --ui-corner-shape: round;
-  --ui-radius-pill: initial;
-  --ui-radius-tight: initial;
-  /* Nothing here draws its edge as a ring, and an aesthetic nested inside pixel
-     has to say so rather than inherit it. */
-  --ui-shadow-edge: initial;
-  --ui-hover-transform: none;
-  --ui-active-transform: none;
-}
+    /* R6. Controls carry no shadow of their own -- the depth in this aesthetic is
+       the blur, and a drop shadow under a translucent button reads as grime. All
+       general parts are explicitly zero so inherited or future geometry cannot
+       leak onto controls. `--ui-surface-shadow` below replaces the shadow of
+       surfaces only. */
+    --ui-shadow-x: 0px;
+    --ui-shadow-y: 0px;
+    --ui-shadow-blur: 0px;
+    --ui-shadow-spread: 0px;
+    /* No halo, cleared so a region nested inside another
+       aesthetic does not inherit one. */
+    --ui-halo-blur: initial;
+    --ui-halo-spread: initial;
+    --ui-halo-ink: initial;
+    /* `--ui-bg-alpha` multiplies the fill, and a surface's default fill is 0%:
+       without a translucent ground the blur ends up behind an opaque background
+       and nothing shows through. */
+    --ui-surface-ground: color-mix(in srgb, var(--color-background) 45%, transparent);
 
-/* Transparency is the whole aesthetic, so the honest degradation is an opaque
-   surface rather than a softer blur. */
-@media (prefers-reduced-transparency: reduce) {
-  .glass {
-    --ui-bg-alpha: 1;
-    --ui-backdrop: none;
-    --ui-surface-ground: var(--color-background);
+    /* Two layers pulling in with negative spread, so the shadow tucks under the
+       surface instead of haloing onto the backdrop. It is the one shipped aesthetic
+       that cannot be described with the parts, so it takes `surface`'s
+       complete-value slot -- which is also what keeps it off buttons and chips --
+       and the registry records that `.flat` does not reach it. */
+    --ui-surface-shadow: 0 1px 2px -1px var(--elevation-color), 0 18px 40px -16px var(--elevation-color);
+
+    --ui-clip: none;
+    --ui-clip-tight: none;
+    /* Round corners, said explicitly, and the pill and chip corners cleared back
+       to `--ui-corner`: a region nested inside `.cyber` would otherwise inherit
+       its bevel, its diagonal, its diamond pills, and its square chips. */
+    --ui-corner-shape: round;
+    --ui-radius-pill: initial;
+    --ui-radius-tight: initial;
+    --ui-radius: initial;
+    --ui-radius-surface: initial;
+    --ui-corner-tl: initial;
+    --ui-corner-tr: initial;
+    --ui-corner-br: initial;
+    --ui-corner-bl: initial;
+    /* Nothing here draws its edge as a ring, and an aesthetic nested inside pixel
+       has to say so rather than inherit it. */
+    --ui-shadow-edge: initial;
+    --ui-hover-transform: none;
+    --ui-active-transform: none;
+    --ui-active-translate-x: initial;
+    --ui-active-translate-y: initial;
+
+    /* Chunky tile's heavier label, cleared so a region nested inside it keeps
+       the button's and the badge's own label. */
+    --ui-label-weight: initial;
+    --ui-label-tracking: initial;
+    --ui-label-case: initial;
+    --ui-label-shadow: initial;
+  }
+
+  /* Transparency is the whole aesthetic, so the honest degradation is an opaque
+     surface rather than a softer blur. */
+  @media (prefers-reduced-transparency: reduce) {
+    .glass {
+      --ui-bg-alpha: 1;
+      --ui-backdrop: none;
+      --ui-surface-ground: var(--color-background);
+    }
   }
 }
 
 /* Solo: the same look painted onto the one element carrying the class, for an
    element the package does not style -- a toast from another library, a plain
    `<div>` on a page that never loaded the base stylesheet. See
-   docs/internal/solo-utilities.md.
+   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-*`,

package/dist/tw/aesthetics/index.css

@@ -8,3 +8,4 @@
 @import "./pixel.css";
 @import "./chunky-tile.css";
 @import "./cyber.css";
+@import "./sketch.css";

package/dist/tw/aesthetics/neobrutalism.css

@@ -3,59 +3,100 @@
    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. */
-.neobrutalism {
-  /* Read with a fallback, not declared, so an ancestor (`:root`, where an app
-     themes) can set `--neo-offset`; the private carries the resolved value to
-     the six places below. See model.md#rules-for-aesthetics (R8). */
-  --_neo-offset: var(--neo-offset, 4px);
 
-  /* Pure black reads as ink on a light page and disappears on a dark one, so the
-     ink follows the theme rather than the palette. A thick border in the neutral
-     border grey is a thick grey box, not a brutalist one. */
-  --ui-ink: light-dark(var(--color-neutral-950), var(--color-neutral-50));
+/* 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
+   consumer's own utility or unlayered CSS beats it; the solo class stays
+   unlayered, because it has to beat a foreign component's unlayered CSS. See
+   docs/internal/model.md#cascade-layers. */
+@layer theme, base, components, utilities;
+
+@layer components {
+  .neobrutalism {
+    /* Read with a fallback, not declared, so an ancestor (`:root`, where an app
+       themes) can set `--neo-offset`; the private carries the resolved value to
+       the six places below. See model.md#rules-for-aesthetics (R8). */
+    --_neo-offset: var(--neo-offset, 4px);
+
+    /* Pure black reads as ink on a light page and disappears on a dark one, so the
+       ink follows the theme rather than the palette. A thick border in the neutral
+       border grey is a thick grey box, not a brutalist one. */
+    --ui-ink: light-dark(var(--color-neutral-950), var(--color-neutral-50));
+
+    --ui-corner: 0;
+    --ui-corner-surface: 0;
+    --ui-border-width: 2px;
+    --ui-border-max: 100px;
+    --ui-line-style: initial;
+    --ui-rule-style: initial;
 
-  --ui-radius: 0;
-  --ui-radius-surface: 0;
-  --ui-border-width: 2px;
-  --ui-border-max: 100px;
+    /* Hard, unblurred, and offset. Scaled by each component's own elevation, so
+       the registry decides which components sit on a slab and `.flat` takes one
+       off without this file knowing which component it landed on. */
+    /* The slab is ink, not shade: a hard offset of the element's own line colour
+       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%;
+    --ui-shadow-x: var(--_neo-offset);
+    --ui-shadow-y: var(--_neo-offset);
+    --ui-shadow-blur: 0px;
+    --ui-shadow-spread: 0px;
+    /* No halo, cleared so a region nested inside another
+       aesthetic does not inherit one. */
+    --ui-halo-blur: initial;
+    --ui-halo-spread: initial;
+    --ui-halo-ink: initial;
 
-  /* Hard, unblurred, and offset. Scaled by each component's own elevation, so
-     the registry decides which components sit on a slab and `.flat` takes one
-     off without this file knowing which component it landed on. */
-  /* The slab is ink, not shade: a hard offset of the element's own line colour
-     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%;
-  --ui-shadow-x: var(--_neo-offset);
-  --ui-shadow-y: var(--_neo-offset);
-  --ui-shadow-blur: 0px;
-  --ui-shadow-spread: 0px;
+    /* 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);
 
-  /* The press: travel the offset, shrink the shadow to nothing, so the element
-     lands flat where its slab was. 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: translate(var(--_neo-offset), var(--_neo-offset));
+    /* Nothing here clips or blurs, and an aesthetic nested inside another has to
+       say so rather than inherit it. */
+    --ui-clip: none;
+    --ui-clip-tight: none;
+    /* Round corners, said explicitly, and the pill and chip corners cleared back
+       to `--ui-corner`: a region nested inside `.cyber` would otherwise inherit
+       its bevel, its diagonal, its diamond pills, and its square chips. */
+    --ui-corner-shape: round;
+    --ui-radius-pill: initial;
+    --ui-radius-tight: initial;
+    --ui-radius: initial;
+    --ui-radius-surface: initial;
+    --ui-corner-tl: initial;
+    --ui-corner-tr: initial;
+    --ui-corner-br: initial;
+    --ui-corner-bl: initial;
+    --ui-shadow-inset: ;
+    /* The slab is depth cast in ink, not this element's line, so an `.edgeless`
+       button keeps it. Cleared rather than omitted, because a neobrutalist region
+       nested inside a pixel one would otherwise inherit pixel's answer and lose the
+       slab on everything the edge axis rests at zero. */
+    --ui-shadow-edge: initial;
+    --ui-backdrop: none;
+    --ui-surface-ground: initial;
+    --ui-surface-shadow: initial;
+    --ui-bg-alpha: 1;
+    --ui-surface-image: initial;
 
-  /* Nothing here clips or blurs, and an aesthetic nested inside another has to
-     say so rather than inherit it. */
-  --ui-clip: none;
-  --ui-clip-tight: none;
-  /* Round corners, said explicitly, and the pill and chip corners cleared back
-     to `--ui-radius`: a region nested inside `.cyber` would otherwise inherit
-     its bevel, its diamond pills, and its square chips. */
-  --ui-corner-shape: round;
-  --ui-radius-pill: initial;
-  --ui-radius-tight: initial;
-  --ui-shadow-inset: ;
-  /* The slab is depth cast in ink, not this element's line, so an `.edgeless`
-     button keeps it. Cleared rather than omitted, because a neobrutalist region
-     nested inside a pixel one would otherwise inherit pixel's answer and lose the
-     slab on everything the edge axis rests at zero. */
-  --ui-shadow-edge: initial;
-  --ui-backdrop: none;
+    /* 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;
+
+    /* Chunky tile's heavier label, cleared so a region nested inside it keeps
+       the button's and the badge's own label. */
+    --ui-label-weight: initial;
+    --ui-label-tracking: initial;
+    --ui-label-case: initial;
+    --ui-label-shadow: initial;
+  }
 }
 
 /* The one R3 exception, recorded in the registry as `selectors`. The slab here
@@ -63,13 +104,19 @@
    registry rests flat -- looks unfinished without it. It writes the component's
    resting default rather than the modifier, so `.flat`/`.raised`/`.floating`
    still win on the element; a token would name the component through a longer
-   route. `--_d-elevation` inheriting is inert -- it equals `box`'s own fallback. */
-.neobrutalism .alert {
-  --_d-elevation: 1;
+   route. `--_d-elevation` inheriting is inert -- it equals `box`'s own fallback.
+
+   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. */
+@layer utilities {
+  .neobrutalism .alert {
+    --_d-elevation: 1;
+  }
 }
 
 /* Solo: the same look painted onto the one element carrying the class, for an
-   element the package does not style. See docs/internal/solo-utilities.md and
+   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. */