@codenhub/styles 0.4.0 → 0.6.0

package/dist/tw/aesthetics/sketch.css

@@ -0,0 +1,333 @@
+/* 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. */
+
+/* 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 {
+  .sketch {
+    /* Complete radii are taken as written, without the size step or corner
+       pattern. Chips use a smaller version of the same irregular outline.
+       Surfaces use sharp, hand-drawn square contours tailored for container
+       dimensions to avoid interior padding encroachment. Knobs follow R8. */
+    --ui-corner: initial;
+    --ui-corner-surface: initial;
+    --ui-corner-tl: initial;
+    --ui-corner-tr: initial;
+    --ui-corner-br: initial;
+    --ui-corner-bl: initial;
+    --ui-radius: var(--sketch-radius, 255px 15px 225px 15px / 15px 225px 15px 255px);
+    --ui-radius-surface: var(--sketch-radius-surface, 80px 4px 75px 5px / 3px 70px 4px 80px);
+    --ui-radius-pill: var(--sketch-radius-pill, 20px 22px 21px 19px / 20px 22px 21px 19px);
+    --ui-radius-tight: 11px 1px 7px 2px / 2px 7px 1px 11px;
+    --ui-corner-shape: round;
+
+    --ui-ink: light-dark(var(--color-neutral-950), var(--color-neutral-50));
+    /* 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;
+    --ui-rule-style: initial;
+
+    --ui-shadow-ink: 0%;
+    /* The foundation depth colour is restated so a sketch region nested inside
+       cyber does not inherit cyber's transparent depth. */
+    --elevation-color: light-dark(rgb(15 23 42 / 0.08), rgb(0 0 0 / 0.55));
+    --ui-shadow-x: 2px;
+    --ui-shadow-y: 2px;
+    --ui-shadow-blur: 0px;
+    --ui-shadow-spread: 0px;
+    --ui-shadow-inset: ;
+    --ui-shadow-edge: initial;
+    --ui-halo-blur: initial;
+    --ui-halo-spread: initial;
+    --ui-halo-ink: initial;
+    --ui-focus-inset: initial;
+
+    --ui-active-shadow-x: initial;
+    --ui-active-shadow-y: initial;
+    --ui-active-transform: scale(0.97);
+    --ui-active-translate-x: initial;
+    --ui-active-translate-y: initial;
+    --ui-hover-transform: none;
+    --ui-clip: none;
+    --ui-clip-tight: none;
+    --ui-backdrop: none;
+    --ui-surface-image: initial;
+    --ui-surface-ground: initial;
+    --ui-surface-shadow: initial;
+    --ui-bg-alpha: 1;
+    --ui-label-weight: initial;
+    --ui-label-tracking: initial;
+    --ui-label-case: initial;
+    --ui-label-shadow: initial;
+
+    font-family: var(--font-sketch, cursive);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .sketch {
+      --ui-active-transform: none;
+    }
+  }
+
+  /* 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 {
+    --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);
+    --ui-radius-tight: 9px 3px 8px 4px / 4px 8px 3px 7px;
+  }
+
+  /* One region token gives every element the same outline, so the rotation and
+     the dashed accents are written on components, which the registry records.
+     The root is a component carrying either class, or one inside either region
+     and not inside another aesthetic nested there, which keeps its own
+     material. The list below is the one place other aesthetics are named, and
+     `registry.test.ts` fails when one is missing from it.
+
+     Rotation is by sibling position, and a field's control takes its field's
+     position instead of its own, so stacked rows alternate. It is stable for a
+     given DOM order. A knob, when set, is one outline for every position. */
+  :is(
+    .sketch,
+    .sketch-rounded,
+    :is(.sketch, .sketch-rounded)
+      :not(
+        :is(.sketch, .sketch-rounded) :is(.neobrutalism, .glass, .pixel, .chunky-tile, .cyber),
+        :is(.sketch, .sketch-rounded) :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) {
+        &:nth-child(4n + 2) {
+          --ui-radius: var(--sketch-radius, 18px 240px 15px 255px / 240px 15px 255px 18px);
+        }
+
+        &:nth-child(4n + 3) {
+          --ui-radius: var(--sketch-radius, 245px 220px 15px 18px / 18px 15px 245px 235px);
+        }
+
+        &:nth-child(4n) {
+          --ui-radius: var(--sketch-radius, 18px 250px 225px 15px / 245px 15px 18px 235px);
+        }
+      }
+
+      &:is(.ipt, .textarea, .select, .input-group) {
+        .field:nth-child(4n + 1) & {
+          --ui-radius: var(--sketch-radius, 255px 15px 225px 15px / 15px 225px 15px 255px);
+        }
+
+        .field:nth-child(4n + 2) & {
+          --ui-radius: var(--sketch-radius, 18px 240px 15px 255px / 240px 15px 255px 18px);
+        }
+
+        .field:nth-child(4n + 3) & {
+          --ui-radius: var(--sketch-radius, 245px 220px 15px 18px / 18px 15px 245px 235px);
+        }
+
+        .field:nth-child(4n) & {
+          --ui-radius: var(--sketch-radius, 18px 250px 225px 15px / 245px 15px 18px 235px);
+        }
+      }
+
+      &: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);
+        }
+
+        &:nth-child(4n + 3) {
+          --ui-radius-surface: var(--sketch-radius-surface, 75px 70px 4px 5px / 4px 3px 75px 70px);
+        }
+
+        &:nth-child(4n) {
+          --ui-radius-surface: var(--sketch-radius-surface, 5px 80px 75px 4px / 75px 4px 5px 70px);
+        }
+      }
+
+      &:is(.badge, .kbd, .code, .checkbox, .switch, .progress) {
+        &:nth-child(4n + 2) {
+          --ui-radius-tight: 2px 8px 1px 10px / 8px 2px 10px 1px;
+        }
+
+        &:nth-child(4n + 3) {
+          --ui-radius-tight: 8px 2px 10px 1px / 1px 9px 2px 8px;
+        }
+
+        &:nth-child(4n) {
+          --ui-radius-tight: 1px 10px 2px 7px / 9px 1px 8px 2px;
+        }
+      }
+    }
+
+    /* The rounded outlines, in the same four places. */
+    &:is(.sketch-rounded, .sketch-rounded *) {
+      &: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);
+        }
+
+        &:nth-child(4n + 3) {
+          --ui-radius: var(--sketch-radius-rounded, 24px 12px 26px 10px / 11px 23px 12px 22px);
+        }
+
+        &:nth-child(4n) {
+          --ui-radius: var(--sketch-radius-rounded, 12px 24px 10px 25px / 22px 12px 23px 11px);
+        }
+      }
+
+      &:is(.ipt, .textarea, .select, .input-group) {
+        .field:nth-child(4n + 1) & {
+          --ui-radius: var(--sketch-radius-rounded, 26px 10px 24px 11px / 12px 23px 11px 20px);
+        }
+
+        .field:nth-child(4n + 2) & {
+          --ui-radius: var(--sketch-radius-rounded, 11px 25px 12px 24px / 23px 11px 22px 12px);
+        }
+
+        .field:nth-child(4n + 3) & {
+          --ui-radius: var(--sketch-radius-rounded, 24px 12px 26px 10px / 11px 23px 12px 22px);
+        }
+
+        .field:nth-child(4n) & {
+          --ui-radius: var(--sketch-radius-rounded, 12px 24px 10px 25px / 22px 12px 23px 11px);
+        }
+      }
+
+      &: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);
+        }
+
+        &:nth-child(4n + 3) {
+          --ui-radius-surface: var(--sketch-radius-surface-rounded, 35px 18px 38px 15px / 17px 32px 16px 34px);
+        }
+
+        &:nth-child(4n) {
+          --ui-radius-surface: var(--sketch-radius-surface-rounded, 18px 35px 16px 37px / 31px 17px 34px 16px);
+        }
+      }
+
+      &:is(.badge, .kbd, .code, .checkbox, .switch, .progress) {
+        &:nth-child(4n + 2) {
+          --ui-radius-tight: 4px 8px 3px 9px / 8px 3px 8px 4px;
+        }
+
+        &:nth-child(4n + 3) {
+          --ui-radius-tight: 8px 4px 9px 3px / 3px 9px 4px 8px;
+        }
+
+        &:nth-child(4n) {
+          --ui-radius-tight: 3px 9px 4px 8px / 9px 4px 8px 3px;
+        }
+      }
+    }
+
+    /* A pill button keeps a rounded pill in either variant, bounded to the
+       button's half-height so a wide one keeps flat top and bottom edges. */
+    &.btn.pill {
+      --ui-radius-pill: var(--sketch-radius-pill, 24px 16px 23px 17px / 17px 21px 16px 20px);
+
+      &:nth-child(4n + 2) {
+        --ui-radius-pill: var(--sketch-radius-pill, 17px 23px 16px 24px / 21px 16px 20px 17px);
+      }
+
+      &:nth-child(4n + 3) {
+        --ui-radius-pill: var(--sketch-radius-pill, 23px 17px 24px 16px / 16px 20px 17px 21px);
+      }
+
+      &:nth-child(4n) {
+        --ui-radius-pill: var(--sketch-radius-pill, 16px 24px 17px 23px / 20px 17px 21px 16px);
+      }
+    }
+
+    /* Badges, progress bars, and switches take their chip outline where they
+       would be fully round. */
+    &:is(.badge, .progress, .switch) {
+      --ui-radius-pill: var(--ui-radius-tight);
+    }
+
+    /* Radios and the tooltip trigger stay circles, slightly uneven, so a radio
+       is never mistaken for a checkbox. */
+    &:is(.radio, .tooltip-icon) {
+      --ui-radius-pill: 48% 52% 46% 54% / 53% 46% 54% 47%;
+    }
+
+    /* The dashed accents; every other line stays solid. */
+    &:is(.sketch, .sketch *) {
+      &.checkbox {
+        --ui-line-style: dashed;
+      }
+
+      &:is(.divider, .data-table) {
+        --ui-rule-style: dashed;
+      }
+    }
+  }
+}
+
+/* Solo: the look on one unstyled element. It uses standalone fallbacks rather
+   than material tokens inherited from an aesthetic around it. */
+.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 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);
+  /* 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: 2px 2px 0 0 light-dark(rgb(15 23 42 / 0.08), rgb(0 0 0 / 0.55));
+  font-family: var(--font-sketch, cursive);
+}
+
+/* An action takes the expressive control shape. */
+.sketch-solo:is(
+  button,
+  a[href],
+  [role="button"],
+  summary,
+  input[type="button"],
+  input[type="submit"],
+  input[type="reset"]
+) {
+  border-radius: var(--sketch-radius, 255px 15px 225px 15px / 15px 225px 15px 255px);
+}
+
+/* With `.sketch-rounded`, the rounded outlines, through their own knobs. */
+.sketch-solo.sketch-rounded {
+  border-radius: var(--sketch-radius-surface-rounded, 38px 16px 36px 17px / 16px 34px 17px 32px);
+}
+
+.sketch-solo.sketch-rounded:is(
+  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);
+}
+
+/* This entrypoint may be the only package stylesheet loaded, so it cannot rely
+   on theme.css's forced-colors material reset. */
+@media (forced-colors: active) {
+  .sketch-solo {
+    border-style: solid;
+  }
+}

package/dist/tw/box.css

@@ -1,5 +1,3 @@
-@reference "tailwindcss";
-
 /* How a box is painted, in one place: intent supplies the colour, presentation
    how much of it, the aesthetic the material, and this composes the three. It
    composes here, not on a container, because a custom property resolves its
@@ -16,14 +14,15 @@
 
      `--_fill-cap` is the matching slot for a component that reinterprets what a
      presentation means for itself rather than merely bounding it -- `.card.soft`
-     uses it to rest at 0% regardless of what `.soft` asks for. It has to be a
-     separate term rather than a rewrite of `--ui-fill`: `presentation.css`'s
-     `.soft` is unlayered CSS and `@utility card`'s own rule compiles into
-     Tailwind's `utilities` layer, and an unlayered declaration always wins over
-     a layered one for the same property, at any specificity -- so `.card.soft`
-     writing `--ui-fill: 0%` directly was silently losing to `.soft`'s `12%`
-     every time. `--_fill-cap` is a token `.soft` never touches, so nothing
-     contests it.
+     uses it to rest at 0% regardless of what `.soft` asks for. It is a
+     separate term rather than a write of `--ui-fill`, for two reasons. A
+     component writing `--ui-fill` from `utilities` would beat a consumer's own
+     `[--ui-fill:...]` utility, which the layer map reserves for state
+     (docs/internal/model.md#cascade-layers); a private competes with nothing a
+     consumer writes. And `--ui-fill` cascades by design, so a neutral panel
+     writing `0%` would turn every badge and button inside it ghost, where a
+     cap bounds the component and stops there (below). A state that means the
+     fill it names -- `:checked` -- writes `--ui-fill` itself.
 
      Restated here at `100%` -- a no-op -- for the same reason `--_d-ground`
      is restated `transparent` below rather than left to its `var()` fallback:
@@ -36,6 +35,21 @@
      own presentation instead of the container's reinterpretation of one. */
   --_fill-cap: 100%;
   --_capped: min(var(--ui-fill, var(--_d-fill)), var(--_fill-cap, 100%), var(--intent-fill-max, 100%));
+  /* Whether the intent's cap stopped the fill short, as 0% or 100%. A capped
+     fill is a plate the presentation asked to be full, so it rests on the page
+     background rather than on nothing: 20% of the page's ink over nothing
+     showed whatever sat behind a neutral `.solid` -- glass's backdrop, an
+     image, the colour of a filled card around it -- where on a plain page it
+     read as the light grey plate it is meant to be. The component's own cap
+     is measured out first, so a text control's 20% wash and a neutral
+     `.card.soft`'s 0% stay the tints they are, whatever the intent. Stepped
+     rather than scaled because the two percentages cannot be divided in every
+     engine yet. */
+  --_plate: clamp(
+    0%,
+    calc((min(var(--ui-fill, var(--_d-fill)), var(--_fill-cap, 100%)) - var(--_capped)) * 1000),
+    100%
+  );
   --_fill: calc(var(--_capped) * var(--ui-bg-alpha, 1));
   --_hover-fill: calc(min(100%, var(--_capped) + var(--hover-step)) * var(--ui-bg-alpha, 1));
   /* How much of the foreground is the contrast ink: what the presentation asks
@@ -58,34 +72,41 @@
      declaration beats the inherited one at any specificity; `surface`, `kbd`,
      `code`, `pre` and the tooltip each restate theirs after `@apply box`. */
   --_d-ground: transparent;
+  /* The ground, made the page background wherever `--_plate` says the cap
+     stopped the fill -- over a component's own ground too, so a capped
+     `.solid` surface under glass is opaque like every other `.solid`. */
+  --_ground: color-mix(in oklab, var(--color-background) var(--_plate), var(--_d-ground, transparent));
 
-  --_bg: color-mix(in oklab, var(--intent-color) var(--_fill), var(--_d-ground, transparent));
+  --_bg: color-mix(in oklab, var(--intent-color) var(--_fill), var(--_ground));
   /* The two ends answer different questions: `--intent-contrast` prints *on* the
      fill, `--intent-strong` prints on the page (the slot for readable ink on a
      subtle fill). Reading `--intent-color` at the page end instead makes every
      colour do double duty and prints a soft amber component at 3.1:1.
      `--intent-contrast` keeps its own meaning -- `--_on-fill` reconciles it with
      a capped intent -- rather than being bent so neutral's contrast is the ink,
-     which rendered a checked neutral checkbox black-on-black. */
+     which renders a checked neutral checkbox black-on-black. */
   --_fg: color-mix(in oklab, var(--intent-contrast) var(--_on-fill), var(--intent-strong));
-  /* P3: the line blends toward the fill by the fill amount, so a filled box has
-     a seamless edge. Blend first, amount after (`--_edge-amount` below) -- the
-     other order lands `.edgeless` on the fill colour, which the border box then
-     paints as a second translucent coat: a ring around an element that asked for
-     no edge. The blend runs toward `--_bg`, not raw `--intent-color`, so under
-     an aesthetic that thins the fill a translucent box does not keep an opaque
-     ring. */
-  --_line: color-mix(in oklab, var(--_bg) var(--ui-fill, var(--_d-fill)), var(--intent-border));
+  /* P3: the line fades out as the fill fills in, so a filled box has a seamless
+     edge. It fades toward `transparent`, not toward the plate: the plate
+     already runs under the border (nothing clips the background to the padding
+     box), so a line blended toward `--_bg` paints the plate a second time over
+     itself -- invisible on an opaque plate, a ring on a translucent one (a
+     neutral fill capped at 20%, or any fill `--ui-bg-alpha` thins). Faded
+     toward nothing, the border shows the one coat beneath it.
+
+     Blend first, amount after (`--_edge-amount` below): the other order lands
+     `.edgeless` on the fill colour, which the border box paints as a second
+     coat -- a ring around an element that asked for no edge. See
+     docs/internal/model.md#presentation. */
+  --_line: color-mix(in oklab, transparent var(--ui-fill, var(--_d-fill)), var(--intent-border));
   /* How much line there is, as an input rather than a result. A component that
      must keep its line whatever the edge class says raises `--_edge-floor`
      instead of rewriting `--_edge`, and the composition above still runs.
 
-     The distinction is not cosmetic. Rewriting the result drops every term the
-     result was composed from, silently and with nothing to report: that is how
-     `--ui-border` stopped reaching all six text controls, and how `--_d-border`
-     sat declared and unread on each of them for a release. Bounding the input
-     leaves the axis live, so `.edged` and `.edgeless` still mean what they say
-     on a component that happens to floor itself. */
+     Rewriting the result drops every term it was composed from, silently and
+     with nothing to report. Bounding the input leaves the axis live, so
+     `.edged` and `.edgeless` still mean what they say on a component that
+     floors itself. */
   --_edge-amount: max(var(--ui-border, var(--_d-border)), var(--_edge-floor, 0%));
   --_edge: color-mix(in oklab, var(--_line) var(--_edge-amount), transparent);
   --_width: min(var(--ui-border-width, var(--border-width)), var(--ui-border-max, 100px));
@@ -95,14 +116,30 @@
      draws. Zero lengths are written `0px` because `calc(0 * 1)` yields a number
      and a shadow position needs a length. */
   --_elevation: var(--ui-elevation, var(--_d-elevation, 1));
-  --_sx: calc(var(--ui-shadow-x, var(--_d-shadow-x, 0px)) * var(--_elevation));
+
+  /* The size step, a unitless multiplier the size and padding modifiers publish
+     as two privates -- `.sm`/`.p-sm` 0.75, `.p-xs` 0.5, `.lg`/`.p-lg` 1.25 --
+     so that when both sit on one element the tighter wins: `.lg.p-xs` is
+     small. An unset step takes the other's value, so a lone `.lg` still grows.
+     Restated `initial` here, before any modifier, because a custom property
+     inherits and a `.card.p-xs` would otherwise shrink every button inside it;
+     the modifier rules outrank this one on specificity. `--ui-scale` is the
+     public override, undeclared by the package. See docs/internal/model.md#material-tokens. */
+  --_scale-size: initial;
+  --_scale-pad: initial;
+  --_scale: var(--ui-scale, min(var(--_scale-size, var(--_scale-pad, 1)), var(--_scale-pad, var(--_scale-size, 1))));
+  /* Depth follows the step down and not up: a 4px slab under a 20px button
+     swallows it, while a press that travels the aesthetic's whole depth has to
+     land flat on a `.lg` button too. */
+  --_depth: calc(var(--_elevation) * min(1, var(--_scale)));
+  --_sx: calc(var(--ui-shadow-x, var(--_d-shadow-x, 0px)) * var(--_depth));
   /* Three slots, most specific first: the aesthetic, then a component that draws
      its own depth, then the plain step `.raised`/`.floating` supply on a page
      with no aesthetic. The order lets a raised card under `.neobrutalism` keep
      the slab. Nothing declares the last slot until something asks for depth, so
      a plain unmodified page has no shadow anywhere. */
-  --_sy: calc(var(--ui-shadow-y, var(--_d-shadow-y, var(--elevation-y, 0px))) * var(--_elevation));
-  --_sb: calc(var(--ui-shadow-blur, var(--_d-shadow-blur, var(--elevation-blur, 0px))) * var(--_elevation));
+  --_sy: calc(var(--ui-shadow-y, var(--_d-shadow-y, var(--elevation-y, 0px))) * var(--_depth));
+  --_sb: calc(var(--ui-shadow-blur, var(--_d-shadow-blur, var(--elevation-blur, 0px))) * var(--_depth));
   /* Spread is deliberately not scaled. An aesthetic that draws its edge as an
      inset ring spends spread on it, and scaling that by elevation would erase
      the edge of every component the registry rests at zero. Elevation is depth:
@@ -130,29 +167,50 @@
   --_edge-shadow-color: var(--ui-shadow-edge) var(--_edge);
   --_shadow-color: var(--_edge-shadow-color, var(--_depth-color));
   --_shadow-parts: var(--ui-shadow-inset,) var(--_sx) var(--_sy) var(--_sb) var(--_ss) var(--_shadow-color);
+  /* A shadow that is not depth: light in the element's own intent colour, with
+     no offset. Outside the depth layer, and not scaled by elevation, so `.flat`
+     leaves it alone and a field resting at zero still takes it. Present only
+     when `--ui-halo-ink` is declared: undeclared, the whole layer, leading
+     comma included, is invalid at computed-value time and `var()` drops it, so
+     no empty layer sits in every box's shadow. */
+  --_halo-layer:
+    ,
+    0 0 var(--ui-halo-blur, 0px) var(--ui-halo-spread, 0px)
+      color-mix(in oklab, var(--intent-border) var(--ui-halo-ink), transparent);
   /* Indirection so a component can substitute a complete value of its own
      without restating the parts -- `surface` does, for the multi-layer case.
      There is deliberately no `--ui-shadow` wrapper: a complete value has nothing
      for the elevation multiplier to reach, so `.flat` would silently stop working
      on anything that set one. `--ui-surface-shadow` is that escape hatch narrowed
      to the single case that needs it. */
-  --_shadow: var(--_shadow-parts);
+  --_shadow: var(--_shadow-parts) var(--_halo-layer,);
   --_focus-stack: var(--_shadow), inset 0 0 0 var(--ui-focus-inset) var(--focus-ring);
 
   /* Every box sizes itself as `min-height`/`min-width: var(--control-height)`
-     plus its own padding and the border shorthand above, so its geometry is only
-     right under `box-sizing: border-box`. `reset.css` sets that on `*`, but only
-     the `.`, `/native` and `/tw/reset` entrypoints carry the reset -- and the
-     first two pull Tailwind's Preflight, which sets it anyway. `/components` and
-     the granular `/tw/*` component entrypoints ship neither, so a box there
-     inherited the `content-box` default and every sized control came out
-     inflated by its own padding and border. A component's own geometry is not an
-     external reset's job; `box` owns it. */
+     plus its own padding and the border shorthand above, so its geometry is
+     only right under `border-box`. `reset.css` sets that on `*`, but only the
+     `.`, `/native` and `/tw/reset` entrypoints carry the reset; `/components`
+     and the granular `/tw/*` component entrypoints ship neither it nor
+     Preflight, so `box` owns it. */
   box-sizing: border-box;
   background-color: var(--_bg);
   color: var(--_fg);
-  border: var(--_width) solid var(--_edge);
-  border-radius: var(--ui-radius, var(--radius-control));
+  /* The line's style is material: `solid`, `dashed`, `dotted`, or `double`,
+     which needs a width of 3px or more to draw two lines. It keeps the line's
+     colour, so its contrast, whatever it draws. */
+  border: var(--_width) var(--ui-line-style, solid) var(--_edge);
+  /* The corner is the aesthetic's length at scale 1 times the size step, so a
+     small button takes a small corner and a cut stays a true 45 degrees. Each
+     corner then multiplies by its own `--ui-corner-tl`/`-tr`/`-br`/`-bl`, 0 or
+     1, which is how `.cut-diagonal` and a bevelling aesthetic's diagonal draw
+     two corners and leave two square. An explicit `--ui-radius` still wins,
+     taken as written. */
+  --_corner: calc(var(--ui-corner, var(--radius-control)) * var(--_scale));
+  border-radius: var(
+    --ui-radius,
+    calc(var(--_corner) * var(--ui-corner-tl, 1)) calc(var(--_corner) * var(--ui-corner-tr, 1))
+      calc(var(--_corner) * var(--ui-corner-br, 1)) calc(var(--_corner) * var(--ui-corner-bl, 1))
+  );
   /* What the radius draws: a round arc by default, a straight cut under an
      aesthetic that bevels (`.cyber`). `round` is the property's initial value,
      so with no aesthetic in scope this is a no-op, and an engine without
@@ -162,13 +220,28 @@
   corner-shape: var(--ui-corner-shape, round);
   box-shadow: var(--_shadow);
   clip-path: var(--ui-clip, none);
+  /* The press travel `box-active` writes; `none` at rest, because any other
+     `translate` makes the box a stacking context and a containing block.
+     Restated here so a pressed card does not carry the boxes inside it. */
+  --_press: none;
+  translate: var(--_press);
   transition:
     background-color var(--motion-duration-normal) var(--motion-ease),
     border-color var(--motion-duration-normal) var(--motion-ease),
     box-shadow var(--motion-duration-normal) var(--motion-ease),
     color var(--motion-duration-normal) var(--motion-ease),
     opacity var(--motion-duration-normal) var(--motion-ease),
-    transform var(--motion-duration-normal) var(--motion-ease);
+    transform var(--motion-duration-normal) var(--motion-ease),
+    translate var(--motion-duration-normal) var(--motion-ease);
+
+  /* Reduced motion stops here as well as in `reset.css`: `/components` and the
+     focused `/tw/*` entries carry no reset, so each component that moves says
+     so itself -- this for everything `box` paints, and the components with a
+     transition or animation of their own beside it. The same near-zero
+     duration the reset uses, so a `transitionend` still fires. */
+  @media (prefers-reduced-motion: reduce) {
+    transition-duration: 0.01ms;
+  }
 
   /* An aesthetic that clips cannot show the global focus outline, so it declares
      `--ui-focus-inset` and gets an inset layer instead. With no such aesthetic
@@ -203,15 +276,14 @@
    and wrong for something you type into, so a component opts in. */
 @utility box-hover {
   &:not(:disabled, .disabled, [aria-disabled="true"], [data-disabled]):hover {
-    --_bg: color-mix(in oklab, var(--intent-hover) var(--_hover-fill), var(--_d-ground, transparent));
-    /* P3 again, against the hover tone. Only the ink end has to move: the fill
-       end is `--_bg`, which the line above already redefined, so the resting
-       formula follows the hover on its own. Without this the edge blends toward
-       the resting ink -- a ring of the colour the box just left. */
-    --_line: color-mix(in oklab, var(--_bg) var(--ui-fill, var(--_d-fill)), var(--intent-hover));
-    --_sx: calc(var(--ui-hover-shadow-x, var(--ui-shadow-x, var(--_d-shadow-x, 0px))) * var(--_elevation));
+    --_bg: color-mix(in oklab, var(--intent-hover) var(--_hover-fill), var(--_ground));
+    /* P3 again, against the hover tone: the line still fades as the fill fills
+       in, but toward the hover ink. Without this the edge keeps the resting ink
+       -- a ring of the colour the box just left. */
+    --_line: color-mix(in oklab, transparent var(--ui-fill, var(--_d-fill)), var(--intent-hover));
+    --_sx: calc(var(--ui-hover-shadow-x, var(--ui-shadow-x, var(--_d-shadow-x, 0px))) * var(--_depth));
     --_sy: calc(
-      var(--ui-hover-shadow-y, var(--ui-shadow-y, var(--_d-shadow-y, var(--elevation-y, 0px)))) * var(--_elevation)
+      var(--ui-hover-shadow-y, var(--ui-shadow-y, var(--_d-shadow-y, var(--elevation-y, 0px)))) * var(--_depth)
     );
 
     transform: var(--ui-hover-transform, none);
@@ -224,11 +296,26 @@
    aesthetic's -- neobrutalism travels into its offset shadow, chunky-tile drops
    onto its bar -- and with no aesthetic it is the base `scale(0.97)` from
    `theme.css`, dropped under reduced motion. The `--ui-active-shadow-*` slots
-   stay no-ops until an aesthetic sets them. */
+   stay no-ops until an aesthetic sets them.
+
+   A press that travels into the element's own depth is a translation, given as
+   `--ui-active-translate-x`/`-y` and scaled by `--_depth` like the shadow it
+   travels into, so a `.p-xs` button that sits on half the slab moves half as
+   far, a `.floating` one twice as far, and a `.flat` one, with no slab to land
+   on, not at all. It is the independent `translate` property, so it composes
+   with `--ui-active-transform` rather than replacing it.
+
+   The press writes only `--_press`, and `box` declares `translate` from it.
+   A `translate` declaration here sorts this rule ahead of `box-hover`'s -- the
+   property ranks before `transform` in Tailwind's order -- and the hovered
+   `transform: none` then beats every press. */
 @utility box-active {
   &:active:not(:disabled, .disabled, [aria-disabled="true"], [data-disabled]) {
-    --_sx: calc(var(--ui-active-shadow-x, var(--ui-shadow-x, var(--_d-shadow-x, 0px))) * var(--_elevation));
-    --_sy: calc(var(--ui-active-shadow-y, var(--ui-shadow-y, var(--_d-shadow-y, 0px))) * var(--_elevation));
+    --_sx: calc(var(--ui-active-shadow-x, var(--ui-shadow-x, var(--_d-shadow-x, 0px))) * var(--_depth));
+    --_sy: calc(var(--ui-active-shadow-y, var(--ui-shadow-y, var(--_d-shadow-y, 0px))) * var(--_depth));
+
+    --_press: calc(var(--ui-active-translate-x, 0px) * var(--_depth))
+      calc(var(--ui-active-translate-y, 0px) * var(--_depth));
 
     transform: var(--ui-active-transform, none);
   }