@codenhub/styles 0.5.0 → 0.7.0

package/dist/tw/box.css

@@ -35,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
@@ -57,40 +72,48 @@
      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 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 here clips the background to the padding
-     box), so a line blended toward `--_bg` painted the plate a second time over
-     itself. On an opaque plate that is invisible; on a translucent one -- a
-     neutral fill, capped at 20%, or any fill `--ui-bg-alpha` thins -- it drew a
-     ring around the box, 1.54:1 against its own plate in light. Faded toward
-     nothing, the border shows the one coat beneath it.
+     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 then paints as a second
-     coat: a ring around an element that asked for no edge. See
+     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.
+
+     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));
@@ -111,6 +134,10 @@
      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
@@ -168,17 +195,22 @@
      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),
+    inset 0 0 0 calc(var(--ui-focus-inset) + 2px) var(--color-background);
 
   /* 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);
@@ -221,6 +253,15 @@
     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
      the token is undefined, which makes the whole stack invalid at computed-value
@@ -254,7 +295,7 @@
    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));
+    --_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. */

package/dist/tw/components/button.css

@@ -17,6 +17,18 @@
   @apply box box-hover box-active relative inline-flex w-fit cursor-pointer items-center justify-center gap-2 px-4 py-2 whitespace-nowrap no-underline select-none;
 
   min-height: var(--control-height);
+  /* The vertical padding gives back the line `box` draws, so a default button
+     is exactly `--control-height` tall like `.ipt` beside it, under any
+     aesthetic's line width. At the default 16px/1.5 text the label and the
+     padding fill it; the size and padding modifiers set their own. */
+  padding-block: calc(0.5rem - var(--_width));
+  /* The surrounding font, not the user agent's smaller button one, on every
+     entry: `/components` carries no reset to say so, and a `.btn` link and a
+     `.btn` button have to print the same label. `.sm` and `.lg` set their own
+     size over this. */
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
   /* The label is material, shared with `.badge`: weight, tracking, case, and a
      text shadow, set by an aesthetic as tokens (`.chunky-tile`'s heavier,
      tracked label), and a consumer's own `font-*`, `tracking-*`, `uppercase`, or
@@ -50,20 +62,29 @@
     min-width: var(--control-height);
   }
 
-  /* Bare `sm`/`lg` are already the size modifier's class names, so `p-`
-     prefixes here to avoid colliding with a button's own size. `.p-xs` is the
-     tightest step, below `.p-sm`: a chip-sized button in a toolbar or a table
-     cell.
-
-     `.icon` drops both floors -- `min-width` from its own base rule below and
-     `min-height` from `--control-height` -- at every padding tier, labeled
-     buttons keep the height floor everywhere but `.p-xs`. `.icon`
-     already asks to be square: `aspect-square` ties its width to whatever
-     height it lands on, so a height floor that survives keeps the button
-     bigger than its own glyph regardless of how tight the padding asked to be
-     -- the one combination `.p-xs` used to get right and the other two tiers
-     did not, leaving a `.icon.p-sm` floating in a box far bigger than it
-     needed and a `.icon.p-lg` doing the same one step further out. */
+  /* The size steps for an icon button, square at each: `.sm`'s 2rem, with the
+     padding giving back the line width the way the default button's does, and
+     `.lg`'s 3rem. Each names its width as well as its height, because WebKit
+     does not let `aspect-ratio` widen a box past its `min-width`. */
+  &.icon.sm {
+    min-width: 2rem;
+    padding: calc(0.375rem - var(--_width));
+  }
+
+  &.icon.lg {
+    min-width: 3rem;
+  }
+
+  /* Bare `sm`/`lg` are the size modifier's class names, so `p-` prefixes here.
+     `.p-xs` is the tightest step, below `.p-sm`: a chip-sized button in a
+     toolbar or a table cell.
+
+     `.icon` drops both floors -- `min-width` from its own base rule above and
+     `min-height` from `--control-height` -- at every padding tier; labeled
+     buttons keep the height floor everywhere but `.p-xs`. `.icon` is already
+     square: `aspect-square` ties its width to whatever height it lands on, so a
+     surviving height floor would keep the button bigger than its own glyph
+     however tight the padding asked to be. */
   &.p-xs {
     @apply px-2 py-0.5;
 

package/dist/tw/components/feedback.css

@@ -38,50 +38,45 @@
   --_d-elevation: 0;
 
   /* Same carve-out as `.panel`'s, and for the same reason: a neutral alert
-     mixes 12% of near-black ink onto the page, measured `217, 217, 217`
-     against `250, 250, 250` -- the identical slab `.panel` read before its
-     own fix, not a status-signaling problem, since this is scoped to no
-     named intent. A named intent keeps its ordinary wash; untinting
-     `.alert.soft.destructive` too would silence the status it exists to
-     carry rather than quiet it, which is why an earlier, unconditional
-     version of this fix was rejected for `.alert` specifically. This
-     version never reaches that case: `:not(...)` names every intent class,
-     plus `.solid`/`.ghost` so an explicit presentation on the element is
-     never clamped to a cap it did not ask for.
-
-     Grounds on `--color-foreground` through `--_d-surface-ground`, exactly
-     like `.panel` and a resting `.card.soft`, so glass's ground and a
-     consumer's `--ui-surface-ground` still win over it -- an
-     alert has no hover state to reveal a tint into either, so this is
-     permanent rather than revealed. Unlike a neutral panel or badge, an
-     alert cannot lose its visual identity from this: `--_d-border: 100%`
-     above holds regardless of fill, so a neutral alert still reads as a
-     framed box, just a quiet one instead of a grey slab. */
+     mixes 12% of near-black ink onto the page (`217, 217, 217` against `250,
+     250, 250`), a slab rather than a status signal. Scoped to no named intent:
+     a named intent keeps its ordinary wash, because untinting
+     `.alert.soft.destructive` would silence the status it exists to carry
+     rather than quiet it. `:not(...)` names every intent class, plus
+     `.solid`/`.ghost` so an explicit presentation on the element is never
+     clamped to a cap it did not ask for.
+
+     Grounds on `--color-foreground` through `--_d-surface-ground`, exactly like
+     `.panel` and a resting `.card.soft`, so glass's ground and a consumer's
+     `--ui-surface-ground` still win over it. An alert has no hover state to
+     reveal a tint into either, so this is permanent. A neutral alert keeps its
+     identity: `--_d-border: 100%` above holds regardless of fill, so it still
+     reads as a framed box, just a quiet one instead of a grey slab. */
   &:not(.primary, .secondary, .success, .warning, .destructive, .info, .solid, .ghost) {
     --_fill-cap: 0%;
     --_d-surface-ground: var(--color-foreground);
   }
 }
 
-/* No icon is shipped: the five hardcoded per-intent masks this used to paint on
-   a `::before` are gone, the same way the per-input-type icon was removed from
-   `.input-group` -- see `docs/internal/model.md#input-group-owns-the-box-the-control-inside-gives-it-up`.
-   `.alert` is
-   already `flex`, so an icon dropped in as a real child is spaced by `gap-3`
-   with nothing to trigger: `.alert-icon` only fixes its size and alignment, not
-   whether one is present. Any icon element works, the same contract
-   `.input-group` documents -- an inline `<svg>`, an `<img>`, or a class from an
-   icon set such as `@codenhub/icons`. */
+/* No icon is shipped. `.alert` is already `flex`, so an icon dropped in as a
+   real child is spaced by `gap-3`: `.alert-icon` only fixes its size and
+   alignment, not whether one is present. Any icon element works, the same
+   contract `.input-group` documents -- an inline `<svg>`, an `<img>`, or a
+   class from an icon set such as `@codenhub/icons`. See
+   `docs/internal/model.md#input-group-owns-the-box-the-control-inside-gives-it-up`. */
 @utility alert-icon {
   @apply inline-flex flex-none items-center justify-center;
 
-  /* `!important`: an icon-set glyph (`@codenhub/icons` among them) carries its
-     own `width`/`height` on a selector this utility cannot outrank -- an
-     attribute selector reads more specific than one class regardless of
-     stylesheet order. Sizing what you drop in is this utility's one job, so it
-     has to win over the glyph's own opinion. */
-  width: 1.25rem !important;
-  height: 1.25rem !important;
+  /* A `@codenhub/icons` glyph sizes itself in an unlayered rule, which no
+     layered rule outranks whatever its specificity, but it reads its size from
+     `--ic-size`, so the size goes there as well as on the box for any other
+     icon. No `!important`: that would shut out the consumer's own resize too.
+     An icon set with another prefix, or one that sizes unlayered with no knob,
+     keeps its own size. */
+  --ic-size: 1.25rem;
+
+  width: 1.25rem;
+  height: 1.25rem;
 }
 
 /* A soft, edgeless chip. Small enough that the structural silhouette would be
@@ -111,10 +106,7 @@
 
 /* An indicator reads intent and no presentation token at all. It is a stand-in
    for content rather than a box with a look of its own, so there is nothing for
-   a container's `.solid` or `.edgeless` to say about it -- which is also what
-   removes the visibility floor that used to fight `--ui-fill` for control of the
-   base tone, and the transparent border that only ever appeared if something up
-   the tree asked for an edge. */
+   a container's `.solid` or `.edgeless` to say about it. */
 @utility skeleton {
   --skeleton-base: color-mix(in oklab, var(--intent-color) 6%, var(--intent-subtle));
   --skeleton-sheen: color-mix(in oklab, var(--intent-color) 10%, var(--color-foreground));
@@ -133,15 +125,21 @@
       calc(var(--_corner) * var(--ui-corner-br, 1)) calc(var(--_corner) * var(--ui-corner-bl, 1))
   );
   corner-shape: var(--ui-corner-shape, round);
+
+  /* Reduced motion stops the shimmer here, for the entries without the reset;
+     see `box.css`. The gradient stays, so the placeholder still reads. */
+  @media (prefers-reduced-motion: reduce) {
+    animation: none;
+  }
 }
 
 /* The track is a box, the fill is not: `box.css`'s formula composes the frame,
    the value fill stays `--intent-color` at full strength with no presentation,
-   same contract as `.loader`/`.skeleton`. `.progress` cannot `@apply box`
+   same contract as `.skeleton`. `.progress` cannot `@apply box`
    (the fill is a `::after`, not the element's own background), so it hand-
    reimplements the formula the way `.quote` does -- see
    docs/internal/model.md#components-that-do-not-take-the-whole-of-box for the
-   decision and why the other three indicators do not get the same treatment. */
+   decision and why the other two indicators do not get the same treatment. */
 @utility progress {
   --_d-fill: 12%;
   --_d-fg-on-fill: 0%;
@@ -161,17 +159,16 @@
      not `.pre`/`.code`/`.kbd`'s opaque `--intent-subtle` ground. */
   --_progress-surface: color-mix(in oklab, var(--intent-color) var(--_progress-fill), transparent);
   /* One `color-mix()`, not `box`/`.quote`'s two chained through a `--_line`
-     step: a WebKit build measurably destabilizes composing dozens of tracks
-     each carrying a three-level color-mix chain into the same page -- fine
-     at ten, a reproducible ~30-minute CI hang at forty, isolated by removing
-     one variable at a time (element count, then border at all, then chain
-     depth) until only chain depth reproduced it. `box`/`.quote`'s extra step
-     blends the line toward the fill first so a heavily filled box does not
-     draw a ring of a different colour around its own plate -- a real risk up
-     to `.solid`'s 100% fill. `.progress` never reaches that: `.solid` is
-     unsupported here (`registry.json`), so the fill this reads never exceeds
-     `.soft`'s 12%, and mixing straight from `--intent-border` at that fill
-     is indistinguishable from blending through the surface first. */
+     step: a WebKit build destabilizes when composing dozens of tracks each
+     carrying a three-level color-mix chain into one page (fine at ten, a
+     ~30-minute CI hang at forty; only chain depth reproduces it).
+     `box`/`.quote`'s extra step blends the line toward the fill first so a
+     heavily filled box does not draw a ring of a different colour around its
+     own plate -- a real risk up to `.solid`'s 100% fill. `.progress` never
+     reaches that: `.solid` is unsupported here (`registry.json`), so the fill
+     this reads never exceeds `.soft`'s 12%, and mixing straight from
+     `--intent-border` at that fill is indistinguishable from blending through
+     the surface first. */
   --_progress-edge: color-mix(in oklab, var(--intent-border) var(--ui-border, var(--_d-border)), transparent);
 
   @apply relative h-2.5 w-full overflow-hidden;
@@ -213,13 +210,19 @@
   &.indeterminate::after {
     width: 33%;
     animation: anim-progress-indeterminate 1.5s infinite ease-in-out;
-    /* No logical form exists for transform-origin, so the inline-start edge
-       is named directly and mirrored under :dir(rtl) to match the
-       inset-inline-start positioning above. */
-    transform-origin: left;
+  }
+
+  /* Reduced motion, for the entries without the reset; see `box.css`. The
+     value moves without sliding, and the shimmer and the indeterminate sweep
+     stop where the reset would stop them: the fill rests at the start. */
+  @media (prefers-reduced-motion: reduce) {
+    &::after {
+      transition-duration: 0.01ms;
+    }
 
-    :dir(rtl) & {
-      transform-origin: right;
+    &.active::before,
+    &.indeterminate::after {
+      animation: none;
     }
   }
 }