@codenhub/styles 0.7.0 → 0.9.0

package/tw/aesthetics/sketch.css

@@ -0,0 +1,435 @@
+/* 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);
+  }
+
+  /* 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.
+
+     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);
+    --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 nearest region decides. A component in another aesthetic nested inside
+     a sketch region keeps that aesthetic's material, and one in a sketch region
+     nested again inside that rotates. A `:not(.sketch :is(...) *)` exclusion
+     cannot tell those two apart, since the re-entered component also sits below
+     the other aesthetic, so each region writes private flags instead and
+     inheritance hands a component the nearest one's -- the way neobrutalism
+     rests its alert:
+
+     - `--_sketch-on`, `--_sketch-pointed`, `--_sketch-rounded` are space
+       toggles: empty is on, and `initial` makes a value reading one invalid at
+       computed-value time, which is off. `.sketch` turns on the pointed
+       outlines and `.sketch-rounded` the rounded ones; rounded wins where both
+       are on, as the modifier does. Another aesthetic turns all three off.
+     - `--_sketch-pass-*` is what that other aesthetic declared for each token
+       the rotation writes, so a component under it takes the region's value
+       back rather than a rotation's -- cyber's whole surface shape included.
+       Off, a value is the pass, then the rounded one, then the pointed one; the
+       first that is valid wins, and with none the token is unset, as every
+       other aesthetic declares it.
+
+     The other aesthetics are named below and in the flags, and
+     `registry.test.ts` fails when one is missing. A region's own element is
+     not rotated: it declares the pass from its own tokens, which a rotation
+     would then declare from the pass.
+
+     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. */
+  .sketch,
+  .sketch-rounded:not(.sketch-solo) {
+    --_sketch-on: ;
+    --_sketch-pass-radius: initial;
+    --_sketch-pass-radius-surface: initial;
+    --_sketch-pass-radius-tight: initial;
+    --_sketch-pass-radius-pill: initial;
+    --_sketch-pass-line-style: initial;
+    --_sketch-pass-rule-style: initial;
+  }
+
+  .sketch {
+    --_sketch-pointed: ;
+  }
+
+  .sketch-rounded:not(.sketch-solo) {
+    --_sketch-rounded: ;
+  }
+
+  :is(.neobrutalism, .glass, .pixel, .chunky-tile, .cyber) {
+    --_sketch-on: initial;
+    --_sketch-pointed: initial;
+    --_sketch-rounded: initial;
+    --_sketch-pass-radius: var(--ui-radius);
+    --_sketch-pass-radius-surface: var(--ui-radius-surface);
+    --_sketch-pass-radius-tight: var(--ui-radius-tight);
+    --_sketch-pass-radius-pill: var(--ui-radius-pill);
+    --_sketch-pass-line-style: var(--ui-line-style);
+    --_sketch-pass-rule-style: var(--ui-rule-style);
+  }
+
+  :is(.sketch, .sketch-rounded:not(.sketch-solo), :is(.sketch, .sketch-rounded:not(.sketch-solo)) *):not(
+    :is(.neobrutalism, .glass, .pixel, .chunky-tile, .cyber)
+  ) {
+    /* Controls, fields, surfaces, and chips. Each position names its pointed
+       outline in `--_sketch-p` and its rounded one in `--_sketch-r`, declared
+       with the token, so a position never reads a value inherited from an
+       ancestor's. */
+    &:is(.btn, .ipt, .textarea, .select, .input-group, .pre, .tooltip-bubble) {
+      /* The first position draws the region's own outline, declared here too
+         so a knob set between the region and the element reaches it. */
+      &:nth-child(4n + 1) {
+        --_sketch-p: var(--_sketch-pointed) var(--sketch-radius, 255px 15px 225px 15px / 15px 225px 15px 255px);
+        --_sketch-r: var(--_sketch-rounded) var(--sketch-radius-rounded, 26px 10px 24px 11px / 12px 23px 11px 20px);
+        --ui-radius: var(--_sketch-pass-radius, var(--_sketch-r, var(--_sketch-p)));
+      }
+
+      &:nth-child(4n + 2) {
+        --_sketch-p: var(--_sketch-pointed) var(--sketch-radius, 18px 240px 15px 255px / 240px 15px 255px 18px);
+        --_sketch-r: var(--_sketch-rounded) var(--sketch-radius-rounded, 11px 25px 12px 24px / 23px 11px 22px 12px);
+        --ui-radius: var(--_sketch-pass-radius, var(--_sketch-r, var(--_sketch-p)));
+      }
+
+      &:nth-child(4n + 3) {
+        --_sketch-p: var(--_sketch-pointed) var(--sketch-radius, 245px 220px 15px 18px / 18px 15px 245px 235px);
+        --_sketch-r: var(--_sketch-rounded) var(--sketch-radius-rounded, 24px 12px 26px 10px / 11px 23px 12px 22px);
+        --ui-radius: var(--_sketch-pass-radius, var(--_sketch-r, var(--_sketch-p)));
+      }
+
+      &:nth-child(4n) {
+        --_sketch-p: var(--_sketch-pointed) var(--sketch-radius, 18px 250px 225px 15px / 245px 15px 18px 235px);
+        --_sketch-r: var(--_sketch-rounded) var(--sketch-radius-rounded, 12px 24px 10px 25px / 22px 12px 23px 11px);
+        --ui-radius: var(--_sketch-pass-radius, var(--_sketch-r, var(--_sketch-p)));
+      }
+    }
+
+    &:is(.ipt, .textarea, .select, .input-group) {
+      .field:nth-child(4n + 1) & {
+        --_sketch-p: var(--_sketch-pointed) var(--sketch-radius, 255px 15px 225px 15px / 15px 225px 15px 255px);
+        --_sketch-r: var(--_sketch-rounded) var(--sketch-radius-rounded, 26px 10px 24px 11px / 12px 23px 11px 20px);
+        --ui-radius: var(--_sketch-pass-radius, var(--_sketch-r, var(--_sketch-p)));
+      }
+
+      .field:nth-child(4n + 2) & {
+        --_sketch-p: var(--_sketch-pointed) var(--sketch-radius, 18px 240px 15px 255px / 240px 15px 255px 18px);
+        --_sketch-r: var(--_sketch-rounded) var(--sketch-radius-rounded, 11px 25px 12px 24px / 23px 11px 22px 12px);
+        --ui-radius: var(--_sketch-pass-radius, var(--_sketch-r, var(--_sketch-p)));
+      }
+
+      .field:nth-child(4n + 3) & {
+        --_sketch-p: var(--_sketch-pointed) var(--sketch-radius, 245px 220px 15px 18px / 18px 15px 245px 235px);
+        --_sketch-r: var(--_sketch-rounded) var(--sketch-radius-rounded, 24px 12px 26px 10px / 11px 23px 12px 22px);
+        --ui-radius: var(--_sketch-pass-radius, var(--_sketch-r, var(--_sketch-p)));
+      }
+
+      .field:nth-child(4n) & {
+        --_sketch-p: var(--_sketch-pointed) var(--sketch-radius, 18px 250px 225px 15px / 245px 15px 18px 235px);
+        --_sketch-r: var(--_sketch-rounded) var(--sketch-radius-rounded, 12px 24px 10px 25px / 22px 12px 23px 11px);
+        --ui-radius: var(--_sketch-pass-radius, var(--_sketch-r, var(--_sketch-p)));
+      }
+    }
+
+    &:is(.card, .panel, .alert, .data-table) {
+      &:nth-child(4n + 1) {
+        --_sketch-p: var(--_sketch-pointed) var(--sketch-radius-surface, 80px 4px 75px 5px / 3px 70px 4px 80px);
+        --_sketch-r: var(--_sketch-rounded)
+          var(--sketch-radius-surface-rounded, 38px 16px 36px 17px / 16px 34px 17px 32px);
+        --ui-radius-surface: var(--_sketch-pass-radius-surface, var(--_sketch-r, var(--_sketch-p)));
+      }
+
+      &:nth-child(4n + 2) {
+        --_sketch-p: var(--_sketch-pointed) var(--sketch-radius-surface, 4px 75px 5px 80px / 75px 3px 80px 4px);
+        --_sketch-r: var(--_sketch-rounded)
+          var(--sketch-radius-surface-rounded, 17px 36px 18px 34px / 33px 16px 32px 17px);
+        --ui-radius-surface: var(--_sketch-pass-radius-surface, var(--_sketch-r, var(--_sketch-p)));
+      }
+
+      &:nth-child(4n + 3) {
+        --_sketch-p: var(--_sketch-pointed) var(--sketch-radius-surface, 75px 70px 4px 5px / 4px 3px 75px 70px);
+        --_sketch-r: var(--_sketch-rounded)
+          var(--sketch-radius-surface-rounded, 35px 18px 38px 15px / 17px 32px 16px 34px);
+        --ui-radius-surface: var(--_sketch-pass-radius-surface, var(--_sketch-r, var(--_sketch-p)));
+      }
+
+      &:nth-child(4n) {
+        --_sketch-p: var(--_sketch-pointed) var(--sketch-radius-surface, 5px 80px 75px 4px / 75px 4px 5px 70px);
+        --_sketch-r: var(--_sketch-rounded)
+          var(--sketch-radius-surface-rounded, 18px 35px 16px 37px / 31px 17px 34px 16px);
+        --ui-radius-surface: var(--_sketch-pass-radius-surface, var(--_sketch-r, var(--_sketch-p)));
+      }
+    }
+
+    &:is(.badge, .kbd, .code, .checkbox, .switch, .progress) {
+      &:nth-child(4n + 2) {
+        --_sketch-p: var(--_sketch-pointed) 2px 8px 1px 10px / 8px 2px 10px 1px;
+        --_sketch-r: var(--_sketch-rounded) 4px 8px 3px 9px / 8px 3px 8px 4px;
+        --ui-radius-tight: var(--_sketch-pass-radius-tight, var(--_sketch-r, var(--_sketch-p)));
+      }
+
+      &:nth-child(4n + 3) {
+        --_sketch-p: var(--_sketch-pointed) 8px 2px 10px 1px / 1px 9px 2px 8px;
+        --_sketch-r: var(--_sketch-rounded) 8px 4px 9px 3px / 3px 9px 4px 8px;
+        --ui-radius-tight: var(--_sketch-pass-radius-tight, var(--_sketch-r, var(--_sketch-p)));
+      }
+
+      &:nth-child(4n) {
+        --_sketch-p: var(--_sketch-pointed) 1px 10px 2px 7px / 9px 1px 8px 2px;
+        --_sketch-r: var(--_sketch-rounded) 3px 9px 4px 8px / 9px 4px 8px 3px;
+        --ui-radius-tight: var(--_sketch-pass-radius-tight, var(--_sketch-r, var(--_sketch-p)));
+      }
+    }
+
+    /* 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-pass-radius-pill,
+        var(--_sketch-on) var(--sketch-radius-pill, 24px 16px 23px 17px / 17px 21px 16px 20px)
+      );
+
+      &:nth-child(4n + 2) {
+        --ui-radius-pill: var(
+          --_sketch-pass-radius-pill,
+          var(--_sketch-on) var(--sketch-radius-pill, 17px 23px 16px 24px / 21px 16px 20px 17px)
+        );
+      }
+
+      &:nth-child(4n + 3) {
+        --ui-radius-pill: var(
+          --_sketch-pass-radius-pill,
+          var(--_sketch-on) var(--sketch-radius-pill, 23px 17px 24px 16px / 16px 20px 17px 21px)
+        );
+      }
+
+      &:nth-child(4n) {
+        --ui-radius-pill: var(
+          --_sketch-pass-radius-pill,
+          var(--_sketch-on) 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(--_sketch-pass-radius-pill, var(--_sketch-on) 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: var(--_sketch-pass-radius-pill, var(--_sketch-on) 48% 52% 46% 54% / 53% 46% 54% 47%);
+    }
+
+    /* The dashed accents, under `.sketch`; every other line stays solid. The
+       bare elements `/native` styles as these components are named beside
+       them, in `:where()` so the selector's weight stays the class's. */
+    &:is(.checkbox, :where(input[type="checkbox"]:not(.switch, .radio))) {
+      --ui-line-style: var(--_sketch-pass-line-style, var(--_sketch-pointed) dashed);
+    }
+
+    &:is(.divider, .data-table, :where(hr, table)) {
+      --ui-rule-style: var(--_sketch-pass-rule-style, var(--_sketch-pointed) dashed);
+    }
+  }
+}
+
+/* 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 {
+  /* 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));
+
+  /* Printed as drawn; see `.glass-solo`. */
+  print-color-adjust: exact;
+
+  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);
+  /* 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,
+  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 → tw}/box.css

@@ -34,6 +34,23 @@
      specificity, so restating it here is what keeps a nested box reading its
      own presentation instead of the container's reinterpretation of one. */
   --_fill-cap: 100%;
+  /* What a box rests as when nothing above `@apply box` says otherwise: no
+     fill, no line, the ordinary depth. Stated on the element, not left to
+     the `var()` fallbacks: `--_d-*` inherit like any custom property, so a
+     bare `box` inside a `.btn` rested as the button does -- a full fill and
+     the button's line. A component writes its own after `@apply box`, where
+     the later declaration wins. See docs/internal/model.md#resting-defaults. */
+  --_d-fill: 0%;
+  --_d-fg-on-fill: 0%;
+  --_d-border: 0%;
+  --_d-elevation: 1;
+  --_d-holds-ink: none;
+
+  /* Printed as drawn. A browser leaves backgrounds off paper by default, and
+     a filled box prints its label in the contrast colour: white on nothing.
+     Inherited, so everything inside keeps its paint too. */
+  print-color-adjust: exact;
+
   --_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
@@ -85,7 +102,26 @@
      `--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 renders a checked neutral checkbox black-on-black. */
-  --_fg: color-mix(in oklab, var(--intent-contrast) var(--_on-fill), var(--intent-strong));
+  --_fg-own: color-mix(in oklab, var(--intent-contrast) var(--_on-fill), var(--intent-strong));
+  /* The ink of the plate beneath. Intent does not cascade, so a component with
+     none prints the page's ink, and on a filled parent that ink sat on the
+     parent's fill: a badge in a primary button read at 1.11:1. A box whose
+     fill is a plate hands its own ink down; one with no plate declares these
+     invalid, which for a registered property means it inherits them, so the
+     ink passes through an input group to the field inside it. `--_through`
+     is 100% for a neutral box (its cap is below 100%) that was handed an ink
+     and holds none: an intent keeps its own ink, as it keeps its own colour.
+     A component that rests on a ground of its own restates all three after
+     `@apply box`. See docs/internal/model.md#the-ink-of-the-plate-beneath. */
+  --_held-ink: var(--_holds-ink, var(--_d-holds-ink)) var(--_fg-own);
+  --_held-on: var(--_holds-ink, var(--_d-holds-ink)) 100%;
+  --_own-hold: var(--_holds-ink, var(--_d-holds-ink)) 100%;
+  --_through: min(
+    var(--_held-on),
+    calc(100% - var(--_own-hold)),
+    clamp(0%, calc((100% - var(--intent-fill-max, 100%)) * 1000), 100%)
+  );
+  --_fg: color-mix(in oklab, var(--_held-ink) var(--_through), var(--_fg-own));
   /* 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
@@ -98,7 +134,29 @@
      `.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));
+  /* The neutral line of a box with no fill, where an aesthetic's line cannot
+     be seen without one: glass's hairline is a highlight on a plate, and on a
+     `.ghost.edged` button there is no plate (1.01:1 on a light page). A
+     component that wants the swap names the ink after `@apply box`; cleared
+     here so a box nested in one does not inherit it. `--_bare` is 100% for a
+     neutral intent (its cap is below 100%) resolving to no fill, stepped from
+     the resolved values as `surface`'s `--_quiet` is, so a container's
+     `.ghost` counts and an intent's own line is never swapped. */
+  --_bare-ink: initial;
+  --_bare: min(
+    clamp(0%, calc((100% - var(--intent-fill-max, 100%)) * 1000), 100%),
+    clamp(0%, calc(100% - var(--ui-fill, var(--_d-fill)) * 1000), 100%)
+  );
+  --_line-ink: color-mix(
+    in oklab,
+    var(--_held-ink) var(--_through),
+    color-mix(
+      in oklab,
+      var(--_bare-ink, var(--intent-border, var(--ui-ink, var(--color-border)))) var(--_bare),
+      var(--intent-border, var(--ui-ink, var(--color-border)))
+    )
+  );
+  --_line: color-mix(in oklab, transparent var(--ui-fill, var(--_d-fill)), var(--_line-ink));
   /* 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.
@@ -134,10 +192,6 @@
      public override, undeclared by the package. See docs/internal/model.md#material-tokens. */
   --_scale-size: initial;
   --_scale-pad: initial;
-  /* The padding the same modifiers set on a `.card` or `.panel`, restated for
-     the same reason: a `.card.p-xs` or `.flush` would otherwise pad every
-     surface nested inside it to its own value. */
-  --surface-padding: 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
@@ -149,8 +203,8 @@
      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(--_depth));
-  --_sb: calc(var(--ui-shadow-blur, var(--_d-shadow-blur, var(--elevation-blur, 0px))) * var(--_depth));
+  --_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:
@@ -161,7 +215,11 @@
      mixes where the intent lives). An intent-coloured shadow at full opacity is
      a smear of the component's hue, not depth; neobrutalism's slab, which *is*
      ink, asks for it by name. */
-  --_depth-color: color-mix(in oklab, var(--intent-border) var(--ui-shadow-ink, 0%), var(--elevation-color));
+  --_depth-color: color-mix(
+    in oklab,
+    var(--intent-border, var(--ui-ink, var(--color-border))) var(--ui-shadow-ink, 0%),
+    var(--elevation-color)
+  );
   /* Or the shadow *is* the edge. An aesthetic that draws its line as an inset
      ring (`.pixel`) puts the border where `clip-path` cannot cut it, so that
      ring must answer the edge axis like a real border -- `--_edge` already does,
@@ -187,7 +245,7 @@
   --_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);
+      color-mix(in oklab, var(--intent-border, var(--ui-ink, var(--color-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
@@ -202,8 +260,21 @@
      differs from the fill, whatever the fill is. Shadows paint first-on-top,
      so the line is listed last and is the two pixels the ring leaves showing. */
   --_focus-stack:
-    var(--_shadow), inset 0 0 0 var(--ui-focus-inset) var(--focus-ring),
+    var(--_shadow),
+    inset 0 0 0 var(--ui-focus-inset) var(--focus-ring, color-mix(in srgb, var(--color-primary) 64%, transparent)),
     inset 0 0 0 calc(var(--ui-focus-inset) + 2px) var(--color-background);
+  /* The same line of the page colour under the outline `reset.css` draws,
+     for the same reason: the outline sits over the box's own edge, and on a
+     box filled with the ring's colour that part of it was invisible. Under a
+     two-pixel line that left one pixel of ring, which neobrutalism's slab
+     covered on two sides. Stepped from the capped fill, so only a box filled
+     past half takes it: on an unfilled one the ring already reads against the
+     page, and a line of the page colour inside a soft field is a stray mark. */
+  --_focus-gap: color-mix(
+    in oklab,
+    var(--color-background) clamp(0%, calc((var(--_capped) - 50%) * 1000), 100%),
+    transparent
+  );
 
   /* 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
@@ -274,7 +345,7 @@
      non-inherited property is `initial`, that is `none`. Every focused box would
      lose its shadow rather than keep it. */
   &:focus-visible {
-    box-shadow: var(--_focus-stack, var(--_shadow));
+    box-shadow: var(--_focus-stack, var(--_shadow), inset 0 0 0 2px var(--_focus-gap));
   }
 
   &:disabled,
@@ -292,20 +363,26 @@
    full and darkens because the colour changed.
 
    Separate from `box` because tinting on hover is right for something you press
-   and wrong for something you type into, so a component opts in. */
+   and wrong for something you type into, so a component opts in.
+
+   Only where the primary pointer can hover, as Tailwind's `hover:` variant:
+   a touch screen leaves a tapped element in `:hover` until something else is
+   tapped, so without the query a button kept its hover tint after the tap. */
 @utility box-hover {
-  &:not(:disabled, .disabled, [aria-disabled="true"], [data-disabled]):hover {
-    --_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(--_depth)
-    );
+  @media (hover: hover) {
+    &:not(:disabled, .disabled, [aria-disabled="true"], [data-disabled]):hover {
+      --_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(--_depth)
+      );
 
-    transform: var(--ui-hover-transform, none);
+      transform: var(--ui-hover-transform, none);
+    }
   }
 }
 
@@ -314,7 +391,9 @@
    component opts in. `btn` and `.card.interactive` both do. The gesture is the
    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
+   `theme.css`. Reduced motion keeps every press and drops its motion, in
+   `box`, since a press is the feedback that a click landed. The
+   `--ui-active-shadow-*` slots
    stay no-ops until an aesthetic sets them.
 
    A press that travels into the element's own depth is a translation, given as
@@ -331,7 +410,11 @@
 @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(--_depth));
-    --_sy: calc(var(--ui-active-shadow-y, var(--ui-shadow-y, var(--_d-shadow-y, 0px))) * var(--_depth));
+    /* The same three slots as the resting offset, `.raised`'s plain step last,
+       so with no aesthetic a pressed button keeps the depth it rests on. */
+    --_sy: calc(
+      var(--ui-active-shadow-y, var(--ui-shadow-y, var(--_d-shadow-y, var(--_elevation-y, 0px)))) * var(--_depth)
+    );
 
     --_press: calc(var(--ui-active-translate-x, 0px) * var(--_depth))
       calc(var(--ui-active-translate-y, 0px) * var(--_depth));

package/tw/components/button.css

@@ -0,0 +1,11 @@
+@reference "tailwindcss";
+@import "../theme.css";
+@reference "../box.css";
+
+/* The focused entry: what the rules in `button.rules.css` need to compile on their
+   own, then the rules. An aggregate entry imports the rules file directly and
+   supplies those needs once -- Tailwind stacks a `@utility` each time a file
+   that defines it is imported or referenced, so a second route to `box.css`
+   doubles every `@apply box`. See docs/internal/model.md (One route to each
+   utility). */
+@import "./button.rules.css";