@codenhub/styles 0.6.0 → 0.8.0

package/tw/aesthetics/sketch.css

@@ -0,0 +1,417 @@
+/* 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) {
+      &: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 + 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));
+
+  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.
@@ -106,7 +164,14 @@
      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. */
+     floors itself.
+
+     Restated at `0%` -- no floor -- for the reason `--_fill-cap` is restated
+     above: the floor inherits, so a field's or a tooltip bubble's `100%` reached
+     every box nested inside, and a `.btn.edgeless` clear button in an
+     `.input-group` drew a field's line it had asked not to have. Components
+     that floor themselves declare theirs after `@apply box`. */
+  --_edge-floor: 0%;
   --_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));
@@ -150,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,
@@ -176,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
@@ -184,7 +253,28 @@
      on anything that set one. `--ui-surface-shadow` is that escape hatch narrowed
      to the single case that needs it. */
   --_shadow: var(--_shadow-parts) var(--_halo-layer,);
-  --_focus-stack: var(--_shadow), inset 0 0 0 var(--ui-focus-inset) var(--focus-ring);
+  /* The inset focus layer an aesthetic that clips asks for, in two tones. The
+     ring is the primary colour, so on a `.solid.primary` box it was painted
+     over its own colour and a focused button was pixel for pixel a resting
+     one. A line of the page colour sits inside it: one of the two always
+     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, 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
@@ -255,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,
@@ -295,7 +385,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
@@ -312,7 +404,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";