@codenhub/styles 0.1.1 → 0.3.0

package/dist/tw/components/form.css

@@ -58,8 +58,21 @@
      tick on light grey.
 
      Ramping against `--_fill` keeps the two in step at every bound, including
-     the checked state that lifts them. */
-  --_on-fill: min(var(--ui-fg-on-fill, var(--_d-fg-on-fill)), max(0%, calc(var(--_fill) * 2 - 100%)));
+     the checked state that lifts them.
+
+     `--_fg-on-fill-floor` is the seam `:checked` pins instead of touching
+     `--ui-fg-on-fill` directly. `.ghost`/`.soft` are unlayered CSS (P3, and see
+     model.md's `--_fill-cap` history) and `text-control` compiles into
+     Tailwind's `utilities` layer, so a layered `:checked` writing
+     `--ui-fg-on-fill` the way it writes `--_fill-cap`/`--_fill-floor` would
+     lose to `.ghost`'s unlayered `--ui-fg-on-fill: 0%` regardless of
+     specificity -- the same trap `--_fill-cap` exists to avoid on the fill
+     itself. A private floor `.ghost`/`.soft` never touch has nothing
+     unlayered contesting it. */
+  --_on-fill: max(
+    var(--_fg-on-fill-floor, 0%),
+    min(var(--ui-fg-on-fill, var(--_d-fg-on-fill)), max(0%, calc(var(--_fill) * 2 - 100%)))
+  );
   /* The resting line is a fraction of the intent rather than all of it, and the
      fraction is what makes the pointer visible. Drawn at full strength a control
      already sits at its intent's darkest, and hover moves it to a neighbouring
@@ -120,14 +133,41 @@
     --_line-tone: var(--intent-color);
   }
 
-  /* R8, P6: `:checked` lifts the bounds and lets the fill class compose, rather
-     than pinning `--_fill`/`--_fg` (which made every checked toggle render
-     identically). The floor keeps a mark on a ground when a container's `.ghost`
-     would take it away. Lives here, not on the toggles, because a text input is
-     never `:checked`. */
+  /* R8, P6: `:checked` pins the fill by making the floor and the cap the same
+     value, so `clamp()` returns exactly that value whatever `--ui-fill` asks --
+     still a bound on the input, still lifted rather than a rewrite of the
+     result (the failure mode P6 exists for: an early version pinned `--_fill`
+     and `--_fg` directly, which made a checked toggle ignore its own aesthetic
+     and elevation along with presentation).
+
+     The floor used to sit at `12%` rather than `100%`, which kept presentation
+     live on the checked mark too -- a checked `.soft` toggle rendered a pale
+     plate with just the mark at full strength, the classic ring-and-dot radio.
+     The stress-test pass found that cost more than it bought on a real screen:
+     three presentations gave a checkbox, a radio, and a switch three different
+     "on" identities to learn, while every *unchecked* toggle read the same
+     washed-out plate regardless of which class asked for it -- close enough to
+     the disabled look that a form full of ordinary, unchecked, un-intended
+     controls read as half-disabled. Pinning checked to one plate and freeing
+     presentation to separate the *unchecked* one instead (see
+     `checkbox`/`radio`/`switch` below) moves the axis to where it was doing
+     something. Lives here, not on the toggles, because a text input is never
+     `:checked`.
+
+     The ink is pinned alongside the fill, through `--_fg-on-fill-floor` rather
+     than `--ui-fg-on-fill` directly (see that seam, above): the other half of
+     what a fill class asks for is how much contrast ink it wants
+     (`--ui-fg-on-fill: 0%` is `.ghost`/`.soft` declaring "none, my plate stays
+     quiet"), and pinning the fill without pinning this left a checked
+     `.ghost`/`.soft` toggle with an opaque plate and a mark that still read as
+     though the plate were quiet -- both derived from the same intent tone,
+     close enough to disappear into each other. `--_on-fill` ramps against the
+     *composed* `--_fill`, so once that is pinned to 100% the ink has to reach
+     full contrast too, or the ramp's own ceiling has nothing to reach. */
   &:checked {
     --_fill-cap: 100%;
-    --_fill-floor: 12%;
+    --_fill-floor: 100%;
+    --_fg-on-fill-floor: 100%;
   }
 
   /* Native decorations a field replaces with its own artwork. */
@@ -164,11 +204,25 @@
   --_fill-cap: 20%;
 }
 
-/* A checked toggle fills with its own intent, so neutral has to drop its 20%
-   cap here. Declared where the intents are (0-2-0, unlayered): inside
-   `text-control` `.neutral` would overrule it and a checked toggle would fill to
-   a fifth of its colour. */
-:is(.text-control, .checkbox, .radio, .switch, input):checked {
+/* A checked text-control fills with its own intent, so neutral has to drop its
+   20% cap here. No toggle needs this arm any more (see below), but a text
+   input is never `:checked` in practice either -- kept for whatever custom
+   `.text-control` composition does check itself. Declared where the intents
+   are (0-2-0, unlayered): inside `text-control` `.neutral` would overrule it. */
+:is(.text-control, input):checked {
+  --intent-fill-max: 100%;
+}
+
+/* The three toggles read their own component cap (`--_fill-cap`, below) as the
+   ceiling regardless of intent, checked or not -- not just at `:checked`, the
+   way the arm above still works for a hypothetical checked text-control. A
+   neutral fill stops at 20% everywhere else because it is the page's own ink,
+   and a full one reads as a slab on a badge or a card. That reasoning does not
+   hold for a toggle at rest: a neutral checkbox is the common case, most
+   controls carry no intent class at all, and it has to look like a present,
+   interactive box rather than a washed-out one just because nothing colored
+   it. Declared where the intents are, for the reason given above. */
+:is(.checkbox, .radio, .switch) {
   --intent-fill-max: 100%;
 }
 
@@ -182,6 +236,21 @@
   --_edge-floor: 0%;
 }
 
+/* `.switch`'s one exception to the opt-out above: `.ghost` already asks for
+   zero fill, so a `.switch.ghost.edgeless` track has neither a line nor a
+   plate and disappears entirely -- nothing marks its bounds but the floating
+   knob. Every other fill on this component still has something to paint
+   (`.soft`/`.solid`/default all rest above 0%), so only this one pairing
+   needs the floor held up. `.switch.ghost.edgeless` renders identically to
+   `.switch.ghost.edged` now, published unsupported as a distinct look --
+   the same "produces a row indistinguishable from its neighbour" reason
+   `.solid.edgeless`/`.solid.edged` already collapse to one row for. Higher
+   specificity than the rule above (three classes, not an `:is()` of one)
+   wins regardless of source order. */
+.switch.ghost.edgeless {
+  --_edge-floor: 100%;
+}
+
 /* An invalid control is destructive whatever else it was asked to be. A plain
    unlayered rule, not `&[aria-invalid]` inside `@utility`: the intent reset is
    unlayered too and would overrule a layered version (leaving a grey line and
@@ -307,9 +376,17 @@
    No icons ship. Any element works in a slot -- an inline `<svg>`, an `<img>`,
    or a class from an icon set such as `@codenhub/icons` -- placed before the
    control for a leading adornment and after it for a trailing one. See
-   docs/usage/forms.md#icons. */
+   docs/usage/forms.md#icons.
+
+   The gap between the control and its adornment is a token, `--input-group-gap`,
+   rather than a bare Tailwind `gap-2`: an icon reads that 0.5rem as the normal
+   breathing room a distinct glyph needs, but a text affix meant to glue onto the
+   value -- a URL host, a currency symbol, a unit -- reads the same gap as a
+   stray space breaking the two apart. A consumer sets `--input-group-gap: 0` on
+   their own `.input-group` for a flush affix; the default stays the icon-tuned
+   0.5rem so every existing icon composition is unchanged. */
 @utility input-group {
-  @apply text-control flex w-full items-center gap-2;
+  @apply text-control flex w-full items-center;
 
   /* After the `@apply`, for the reason `ipt` states it: `text-control` inlines
      its own resting geometry there, so a default written above it loses to the
@@ -320,9 +397,11 @@
   --_d-border: 100%;
   --_d-elevation: 0;
 
+  --input-group-gap: 0.5rem;
   --input-group-pad: 0.75rem;
 
   min-height: var(--control-height);
+  gap: var(--input-group-gap);
   padding-inline: var(--input-group-pad);
 
   /* The focus ring the wrapper cannot get from `:focus-visible` -- a `<div>` is
@@ -382,18 +461,26 @@
 
 /* The three toggles compose `text-control` for its bounds, not its chrome: the
    edge floor keeps a container's `.edgeless` from erasing the closed silhouette
-   (WCAG 1.4.11), and the checked state that lifts the fill bounds lives there.
-   They raise the fill cap to 20% -- the 6% one keeps typed text legible and a
-   toggle has none; 20% is a `.solid` badge's plate and separates the three
-   fills. `.ghost` is unsupported (an unchecked ghost toggle is the silhouette
-   it already has, a checked one a mark on nothing); the registry records it and
-   the checked fill floor clamps a cascaded one. See model.md#unsupported-values. */
+   (WCAG 1.4.11), and the checked state that pins the fill (see `text-control`'s
+   `:checked` above) lives there. They raise the fill cap to 40% -- the 6% one
+   keeps typed text legible and a toggle has none, and 40% is where a resting
+   `.ghost` (0%), `.soft`/default (12%), and `.solid` (the cap itself) read as
+   three distinct plates rather than three shades of the same wash, the same
+   separation `.switch` was already measured against. Unclassed rests at
+   `.soft` rather than at the cap: `--_d-fill`/`--_d-fg-on-fill` below name the
+   same pair `.soft` does, so a bare `<input class="checkbox">` reads as the
+   quiet tint the stress-test pass preferred over the louder plate `.solid`
+   asks for -- a consumer still reaches that plate by writing `.solid` itself.
+   `.ghost` used to be unsupported here -- a checked one used to be a mark on
+   nothing -- and is not any more, now that checked reads the same plate
+   whatever the presentation.
+   See model.md#the-bounds-that-survive-and-the-test-for-keeping-one. */
 @utility checkbox {
   @apply text-control inline-grid size-4 cursor-pointer place-content-center;
 
-  --_d-fill: 100%;
-  --_d-fg-on-fill: 100%;
-  --_fill-cap: 20%;
+  --_d-fill: 12%;
+  --_d-fg-on-fill: 0%;
+  --_fill-cap: 40%;
   --_line-rest: 100%;
   --_d-border: 100%;
   --_d-elevation: 0;
@@ -439,13 +526,14 @@
   }
 }
 
-/* The same control with a round silhouette and a dot for its mark. */
+/* The same control with a round silhouette and a dot for its mark, and the
+   same fill cap raise given on `checkbox`. */
 @utility radio {
   @apply text-control inline-grid size-4 cursor-pointer place-content-center rounded-full;
 
-  --_d-fill: 100%;
-  --_d-fg-on-fill: 100%;
-  --_fill-cap: 20%;
+  --_d-fill: 12%;
+  --_d-fg-on-fill: 0%;
+  --_fill-cap: 40%;
   --_line-rest: 100%;
   --_d-border: 100%;
   --_d-elevation: 0;
@@ -470,12 +558,14 @@
     content: "";
   }
 
-  /* A checked radio thickens its ring and takes the intent whole on the line;
-     the fill is left to the presentation. The dot takes `box`'s composed
-     foreground, which walks to the contrast tone as the plate fills, so a
-     filled circle still carries a readable dot. `--_line-tone` rather than
-     `--_edge`, so `text-control`'s edge floor still draws the ring under a
-     container's `.edgeless`. */
+  /* A checked radio thickens its ring and takes the intent whole on the line.
+     The fill is pinned by `text-control`'s `:checked` now, not left to the
+     presentation -- a filled circle at every checked radio, whatever fill
+     class it carries, rather than the classic ring-and-dot a checked `.soft`
+     used to draw. The dot still takes `box`'s composed foreground, which walks
+     to the contrast tone as the (now always full) plate fills, so it stays
+     readable. `--_line-tone` rather than `--_edge`, so `text-control`'s edge
+     floor still draws the ring under a container's `.edgeless`. */
   &:checked {
     --_line-tone: var(--intent-color);
 
@@ -491,24 +581,28 @@
 }
 
 /* A2: every dimension derives from the border width `box` resolved, so the knob
-   cannot drift out of a track a thick aesthetic widened. A switch caps its fill
-   higher than the other toggles because its track is the whole component. */
+   cannot drift out of a track a thick aesthetic widened. */
 @utility switch {
   @apply text-control relative cursor-pointer;
 
-  --_d-fill: 100%;
-  --_d-fg-on-fill: 100%;
+  --_d-fill: 12%;
+  --_d-fg-on-fill: 0%;
   --_line-rest: 100%;
   --_d-border: 100%;
   --_d-elevation: 0;
 
-  /* 40%, measured: at `text-control`'s 6% the three fills collapsed to two looks
-     and the switch had to vary its *line* per fill class -- the one place a fill
-     class decided an edge. 40% separates all three (29/67/144 sRGB steps on the
-     light page, against ~20 for a visible one) without reaching a checked
-     track's 100%, so the knob's position still says which. `axes.spec.ts`
-     asserts all three. `--intent-fill-max` still caps neutral at 20%. A cap
-     rather than a resting value, because it answers the cascade case. */
+  /* 40%, measured: at `text-control`'s 6% the three resting fills collapsed to
+     two looks and the switch had to vary its *line* per fill class instead --
+     the one place a fill class decided an edge. 40% separates all three
+     (29/67/144 sRGB steps on the light page, against ~20 for a visible one)
+     without reaching a checked track's pinned 100%, so the knob's position
+     still says which. `axes.spec.ts` asserts all three. `checkbox`/`radio`
+     raise their own cap to the same value for the same reason -- a switch does
+     not need a higher one, a track is just the component every toggle's box
+     already was. A cap rather than a resting value, because it answers the
+     cascade case; `--intent-fill-max` (declared where the intents are, above)
+     lifts to 100% for all three toggles so a neutral one reads this cap too,
+     not the 20% ceiling a badge or a card stays under. */
   --_fill-cap: 40%;
 
   --switch-height: 1.25rem;

package/dist/tw/components/index.css

@@ -25,4 +25,4 @@
    makes the emission deliberate; the composition-body check in
    `exports.test.ts` fails the build if one is dropped. `text-control` and
    `surface` are also documented as consumer-usable on their own. */
-@source inline("box box-hover box-active loader-mask text-control surface input-group text-display text-title-lg text-title text-title-sm text-label-lg text-label text-body btn field label hint ipt email password url tel search date datetime month week time icon left right textarea select checkbox radio switch alert badge skeleton progress tooltip card panel interactive flush compact spacious neutral solid soft ghost edged edgeless flat raised floating loader");
+@source inline("box box-hover box-active loader-mask text-control surface input-group text-display text-title-lg text-title text-title-sm text-label-lg text-label text-body btn field label hint ipt email password url tel search date datetime month week time icon left right textarea select checkbox radio switch alert alert-icon badge skeleton progress tooltip tooltip-bubble tooltip-icon card panel interactive flush compact spacious neutral solid soft ghost edged edgeless flat raised floating loader");

package/dist/tw/components/loader.css

@@ -28,19 +28,6 @@
     .bars-wave,
     .pulse-ring
   )
-),
-.loading:not(
-  :where(
-    .dots-wave,
-    .dots-fade,
-    .dots-queue,
-    .dots-rotate,
-    .dots-grow,
-    .dots-grow-alternate,
-    .dot-bounce,
-    .bars-wave,
-    .pulse-ring
-  )
 ) {
   --loader-art: url("data:image/svg+xml;charset=utf-8,<svg stroke='currentColor' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><style>.spinner_V8m1{transform-origin:center;animation:spinner_zKoa 2s linear infinite}.spinner_V8m1 circle{stroke-linecap:round;animation:spinner_YpZS 1.5s ease-in-out infinite}@keyframes spinner_zKoa{100%{transform:rotate(360deg)}}@keyframes spinner_YpZS{0%{stroke-dasharray:0 150;stroke-dashoffset:0}47.5%{stroke-dasharray:42 150;stroke-dashoffset:-16}95%,100%{stroke-dasharray:42 150;stroke-dashoffset:-59}}</style><g class='spinner_V8m1'><circle cx='12' cy='12' r='9.5' fill='none' stroke-width='3'></circle></g></svg>");
 }
@@ -87,15 +74,14 @@
    a loader inside filled content matches the text around it and
    `.loader.success` is green. There is nothing else to know. */
 @utility loader {
-  @apply loader-mask inline-block size-8 [&.lg]:size-10 [&.sm]:size-6;
+  @apply loader-mask inline-block size-7 [&.lg]:size-9 [&.sm]:size-5;
 
   color: var(--intent-color);
   background-color: currentColor;
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .loader,
-  .loading {
+  .loader {
     --loader-art: url("data:image/svg+xml;charset=utf-8,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><circle cx='12' cy='12' r='9.5' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-dasharray='42 18'/></svg>");
   }
 

package/dist/tw/components/surface.css

@@ -67,6 +67,53 @@
     --surface-padding: 0;
   }
 
+  /* `.soft` rests untinted for no named intent, rather than mixing its 12% --
+     measured on a neutral card, 12% of `--color-text` onto any of
+     `--color-background`, `--color-foreground`, or `--color-surface` lands
+     within a few units of the others (a near-black ink dominates the result
+     regardless of which near-white ground it is mixed onto), which is why
+     swapping the ground token alone does not read as quieter. A resting
+     no-intent `.card.soft` is instead `--color-foreground` with no ink mixed
+     in at all -- a plain step up from the page that marks a different
+     container without drawing attention to it, the way a card that is not
+     currently interesting should.
+
+     A named intent keeps its ordinary 12% wash rather than being untinted
+     unconditionally: 12% of an actual hue does not read as a slab the way
+     12% of near-black ink does -- measured, `.card.soft.destructive` at 12%
+     is a gentle `249, 225, 225`, nothing like the `217, 217, 217` a neutral
+     surface mixing the same 12% of its own ink used to read as -- and
+     untinting it anyway would silence a `.card.soft.destructive` at rest
+     rather than merely quiet it, the same reason `.panel`'s own carve-out
+     (below) is scoped the same way. `:not(...)` names every intent class for
+     that reason; a version of this fix that untinted every intent shipped
+     first and was corrected once `.panel` needed the identical, narrower
+     carve-out to keep a resting `.panel.destructive` legible.
+
+     `--_fill-cap: 0%` (box.css's override slot, not `--ui-fill` directly --
+     see the comment there) composed with `box-hover`'s own formula
+     (`min(100%, resting + 14%)`) is what reveals the intent on hover without
+     a second fill declaration, for the no-intent case: resting at 0% means
+     hover lands at exactly the hover step, 14%, in `--intent-hover` as
+     always. The ground steps to `--color-surface` at the same moment,
+     through the public `--ui-surface-ground` escape hatch rather than the
+     private `--_d-ground`, so a consumer's own override still wins over both
+     states the way it always has. Scoped to `.interactive` and `.hoverable`,
+     the two classes that already opt a card into `box-hover` -- a plain
+     `.card.soft` with neither has no hover state to reveal into and stays at
+     the quiet, untinted rest. A named intent needs neither special case: it
+     already rests tinted, so the same generic `box-hover` formula deepens it
+     on hover (12% to 26%) with no ground shift required. */
+  &.soft:not(.primary, .secondary, .success, .warning, .destructive, .danger, .error, .info) {
+    --_fill-cap: 0%;
+    --ui-surface-ground: var(--color-foreground);
+
+    &.interactive:hover,
+    &.hoverable:hover {
+      --ui-surface-ground: var(--color-surface);
+    }
+  }
+
   /* Opt-in, because a card is only sometimes a control. Applications still owe
      it a real interactive element and an accessible name. Hover and press are
      the derived ones every other pressable box gets; there is nothing
@@ -119,4 +166,50 @@
   &.flush {
     --surface-padding: 0;
   }
+
+  /* Neutral panels are the common case -- most are plain layout wells,
+     sidebars, and toolbars with no named intent -- and 12% of `--color-text`
+     (near-black) mixed onto the page is a far more assertive move than 12%
+     of an actual hue: measured, `217, 217, 217` against a `250, 250, 250`
+     page, the same "neutral ink reads louder" effect `.card.soft`'s fix
+     already answered, and the same reason `--intent-fill-max` stops
+     neutral's fill short everywhere else in the model.
+
+     Scoped to no named intent rather than untinted unconditionally the way
+     `data-table` is: a panel is not interactive, so there is no hover to
+     reveal a colored intent back into later, and it is edgeless by default,
+     so the fill is the only channel a `.primary` bulk-actions bar or a
+     `.destructive` danger-zone panel has to say what it is. Untinting those
+     unconditionally would silence them, not just quiet them -- measured, a
+     resting `.panel.destructive` is a gentle `249, 225, 225` warm wash,
+     nothing like the neutral slab above. `.card.soft` carries the identical
+     no-named-intent scoping now, corrected to match once this carve-out
+     shipped -- see the comment on `.card`'s own `&.soft`, above. `:not(...)`
+     names every intent class for that reason, plus `.solid`/`.ghost` so an
+     explicit presentation on the element is never clamped to a cap it did
+     not ask for -- the same guard `data-table`'s own `:not(.solid, .ghost)`
+     uses.
+
+     Grounds on `--color-foreground` through the public `--ui-surface-ground`
+     escape hatch, not the private `--_d-ground`, the same token `.card.soft`
+     steps to -- so a consumer's own override still wins, and a bare `.panel`
+     rests at exactly the plate a `.card.soft` does (measured: `245, 245, 245`
+     light, `23, 23, 23` dark, identical both ways). Permanent rather than
+     hover-revealed: neither a panel nor `data-table` has an interaction
+     state to reveal a tint into, so both rest quiet rather than reveal.
+
+     The one cost, inherited rather than new: an own declaration always beats
+     an inherited one, so this also beats `.glass` setting the same token on
+     an ancestor for its translucent ground -- a neutral panel under `.glass`
+     is quiet but opaque rather than blurred. `.card.soft` has carried this
+     exact trade-off since it shipped; nothing exercised it there because
+     `tests/browser/aesthetics.spec.ts`'s glass coverage tests a default
+     (ghost) card, never a soft one. Accepted rather than solved differently:
+     there is no way to ask "did an ancestor already set this token" in CSS,
+     only which declaration wins, and the quiet neutral rest is the more
+     common case a panel needs to get right. */
+  &:not(.primary, .secondary, .success, .warning, .destructive, .danger, .error, .info, .solid, .ghost) {
+    --_fill-cap: 0%;
+    --ui-surface-ground: var(--color-foreground);
+  }
 }