@codenhub/styles 0.4.0 → 0.6.0

package/dist/tw/components/button.css

@@ -14,16 +14,46 @@
   --_d-border: 0%;
   --_d-elevation: 1;
 
-  @apply box box-hover box-active relative inline-flex w-fit cursor-pointer items-center justify-center gap-2 px-4 py-2 font-semibold whitespace-nowrap no-underline select-none;
+  @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
+     text-shadow utility still beats the aesthetic. Tracking has no fallback on
+     purpose: undefined, the declaration is invalid at computed-value time and
+     `letter-spacing` inherits, which is what it did before the slot existed.
+     Case and shadow fall back to `none`, which is what a button already does:
+     the user agent stops both inheriting into one. The shadow is written
+     without a colour, so it takes the label's own and cannot lower its
+     contrast. See docs/internal/model.md#cascade-layers. */
+  font-weight: var(--ui-label-weight, var(--font-weight-semibold));
+  letter-spacing: var(--ui-label-tracking);
+  text-transform: var(--ui-label-case, none);
+  text-shadow: var(--ui-label-shadow, none);
 
   &.sm {
     @apply min-h-8 px-3 py-1 text-sm;
+
+    --_scale-size: 0.75;
   }
 
   &.lg {
     @apply min-h-12 px-5 py-2.5 text-[1.0625rem];
+
+    --_scale-size: 1.25;
   }
 
   &.icon {
@@ -32,27 +62,34 @@
     min-width: var(--control-height);
   }
 
-  /* `.p-xs`/`.p-sm`/`.p-lg` are the canonical names, matching the `sm`/`md`/`lg`
-     vocabulary the elevation modifier uses; `.dense`/`.compact`/`.spacious` are
-     first-class aliases, not a deprecation shim -- the same pattern
-     `.destructive`/`.danger`/`.error` uses on the intent axis. 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 `.compact`: 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`/`.dense`. `.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`/`.dense` used to get right and the other two
-     tiers did not, leaving a `.icon.compact` floating in a box far bigger than
-     it needed and a `.icon.spacious` doing the same one step further out. */
-  &.p-xs,
-  &.dense {
+  /* 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;
 
+    --_scale-pad: 0.5;
+
     /* The one padding step that also drops the size floor for a labeled
        button. At this tier the button is a chip in a toolbar or a table
        cell, where `--control-height` is taller than the row it sits in;
@@ -67,10 +104,11 @@
     }
   }
 
-  &.p-sm,
-  &.compact {
+  &.p-sm {
     @apply px-2.5 py-1;
 
+    --_scale-pad: 0.75;
+
     &.icon {
       @apply p-1;
 
@@ -79,10 +117,11 @@
     }
   }
 
-  &.p-lg,
-  &.spacious {
+  &.p-lg {
     @apply px-6 py-3;
 
+    --_scale-pad: 1.25;
+
     &.icon {
       @apply p-3;
 
@@ -91,10 +130,10 @@
     }
   }
 
-  /* A pill is a shape the author asked for, so it outranks the aesthetic's
-     radius. It still takes the corner shape from `box`, so under a bevelling
-     aesthetic the full radius cuts to points at both ends. */
+  /* A pill normally takes the round material ahead of the box radius. Sketch
+     gives this token the button's own box outline; a bevel still cuts the full
+     radius to points under cyber. */
   &.pill {
-    @apply rounded-full;
+    border-radius: var(--ui-radius-pill, calc(infinity * 1px));
   }
 }

package/dist/tw/components/feedback.css

@@ -1,7 +1,7 @@
 @reference "tailwindcss";
 @import "../theme.css";
 @reference "../box.css";
-@reference "./surface.css";
+@reference "../surface.css";
 
 @keyframes anim-skeleton {
   0% {
@@ -38,49 +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 the public `--ui-surface-ground`
-     escape hatch, exactly like `.panel` and a resting `.card.soft` -- 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. */
-  &:not(.primary, .secondary, .success, .warning, .destructive, .danger, .error, .info, .solid, .ghost) {
+     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%;
-    --ui-surface-ground: var(--color-foreground);
+    --_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
@@ -91,22 +87,26 @@
   --_d-border: 0%;
   --_d-elevation: 0;
 
-  @apply box inline-flex min-h-6 w-fit items-center gap-1 px-2.5 text-xs font-bold;
+  @apply box inline-flex min-h-6 w-fit items-center gap-1 px-2.5 text-xs;
+
+  /* The label material `.btn` reads. Unset, tracking, case, and shadow inherit,
+     as a badge's text always has. */
+  font-weight: var(--ui-label-weight, var(--font-weight-bold));
+  letter-spacing: var(--ui-label-tracking);
+  text-transform: var(--ui-label-case);
+  text-shadow: var(--ui-label-shadow);
 
   /* Pill by default, but an aesthetic that declares no radius has to mean it, so
      the round corner is this component's fallback rather than a hardcoded value.
      An aesthetic that keeps pills distinct from its control corner says so
      through `--ui-radius-pill` first. */
-  border-radius: var(--ui-radius-pill, var(--ui-radius, calc(infinity * 1px)));
+  border-radius: var(--ui-radius-pill, var(--ui-radius, var(--ui-corner, calc(infinity * 1px))));
   clip-path: var(--ui-clip-tight, var(--ui-clip, none));
 }
 
 /* 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));
@@ -116,9 +116,21 @@
   animation: anim-skeleton calc(var(--motion-duration-slow) * 4) linear infinite;
   background: linear-gradient(90deg, var(--skeleton-base), var(--skeleton-sheen), var(--skeleton-base));
   background-size: 200% 100%;
-  border-radius: var(--ui-radius, var(--radius-control));
-  /* Not a box, so it reads the corner shape itself, beside the radius. */
+  /* Not a box, so it draws the control corner and its pattern itself, the way
+     `box` does at scale 1, and reads the corner shape beside it. */
+  --_corner: var(--ui-corner, var(--radius-control));
+  border-radius: var(
+    --ui-radius,
+    calc(var(--_corner) * var(--ui-corner-tl, 1)) calc(var(--_corner) * var(--ui-corner-tr, 1))
+      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,
@@ -126,8 +138,8 @@
    same contract as `.loader`/`.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/progress-presentation-axes.md for the decision and why the
-   other three indicators do not get the same treatment. */
+   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. */
 @utility progress {
   --_d-fill: 12%;
   --_d-fg-on-fill: 0%;
@@ -147,25 +159,25 @@
      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;
   background-color: var(--progress-surface, var(--_progress-surface));
-  border: var(--ui-border-width, var(--border-width)) solid var(--progress-edge, var(--_progress-edge));
+  border: var(--ui-border-width, var(--border-width)) var(--ui-line-style, solid)
+    var(--progress-edge, var(--_progress-edge));
   /* Round by default; an aesthetic that declares no radius squares the track and
      its fill together, and a pill corner reaches both first. */
-  border-radius: var(--ui-radius-pill, var(--ui-radius, calc(infinity * 1px)));
+  border-radius: var(--ui-radius-pill, var(--ui-radius, var(--ui-corner, calc(infinity * 1px))));
   /* Not a box either, and the fill below restates it, so a bevelled track
      carries a bevelled fill rather than a pill inside a cut frame. */
   corner-shape: var(--ui-corner-shape, round);
@@ -174,7 +186,7 @@
     content: "";
     @apply absolute start-0 top-0 bottom-0 block h-full transition-[width] duration-(--motion-duration-slow) ease-(--motion-ease);
 
-    border-radius: var(--ui-radius-pill, var(--ui-radius, calc(infinity * 1px)));
+    border-radius: var(--ui-radius-pill, var(--ui-radius, var(--ui-corner, calc(infinity * 1px))));
     corner-shape: var(--ui-corner-shape, round);
     background-color: var(--progress-color, var(--intent-color));
     width: var(--progress-value, 0%);
@@ -198,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;
     }
   }
 }