@codenhub/styles 0.5.0 → 0.6.0

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,6 +125,12 @@
       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,
@@ -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;
     }
   }
 }