@codenhub/styles 0.7.0 → 0.9.0

package/tw/components/button.rules.css

@@ -0,0 +1,187 @@
+/* A filled, edgeless, raised box you can press. `box` paints it; everything
+   here is what makes it a button rather than some other box.
+
+   The resting values are the published default: a button with no presentation
+   class is solid and edgeless, and that is a decision written on three lines
+   rather than a `var()` fallback buried in an expression. */
+@utility btn {
+  /* The neutral reset, carried so `@apply btn` gets it: the reset in
+     `intent.css` names `.btn`, which a consumer's `.my-btn` is not, so an
+     applied one inside a `.card.success` took the card's intent. In
+     `families`, beside the intent classes, so one applied with it wins; never
+     on `.btn` itself, which keeps the reset in `components`. See
+     docs/internal/model.md#what-apply-carries. */
+  @layer families {
+    :where(&:not(.btn, .primary, .secondary, .success, .warning, .destructive, .info)) {
+      --intent-color: var(--color-text);
+      --intent-contrast: var(--color-text-contrast);
+      --intent-hover: var(--color-text-hover);
+      --intent-strong: var(--color-text-strong);
+      --intent-subtle: var(--color-surface);
+      --intent-border: var(--ui-ink, var(--color-border));
+      --intent-fill-max: 20%;
+    }
+  }
+
+  /* The modifier flags, restated so a container's do not reach this button:
+     a `.card.p-xs` would otherwise shrink every button inside it. At zero
+     specificity in `families`, beside the flag utilities, so one on the
+     element wins, applied or as a class. See `modifiers.css`. */
+  @layer families {
+    :where(&:not(.icon)) {
+      --_m-icon: initial;
+    }
+
+    :where(&:not(.pill)) {
+      --_m-pill: initial;
+    }
+
+    :where(&:not(.p-xs)) {
+      --_m-p-xs: initial;
+    }
+
+    :where(&:not(.p-sm)) {
+      --_m-p-sm: initial;
+    }
+
+    :where(&:not(.p-lg)) {
+      --_m-p-lg: initial;
+    }
+  }
+
+  @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;
+
+  /* After `@apply box`: `box` states its own resting defaults, and the later
+     declaration wins. */
+  --_d-fill: 100%;
+  --_d-fg-on-fill: 100%;
+  --_d-border: 0%;
+  --_d-elevation: 1;
+  --_d-holds-ink: ;
+
+  /* With no fill, the neutral line is the region's unfilled ink when the
+     aesthetic names one -- glass does, for a `.ghost.edged` button. See `--_bare-ink` in
+     `box.css`. Unset, the reference is invalid and `box` keeps its line. */
+  --_bare-ink: var(--_unfilled-ink);
+
+  /* The default step's 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 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.
+     Both are the fallbacks of the size steps below. */
+  font-family: 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, case, and shadow
+     fall back to `normal` and `none`, the label's own values, so none of them
+     inherits: body copy's wider tracking is set on `body`, and a button that
+     took it, or a container's, printed a tracked label nothing asked for. The
+     user agent already stops case and shadow inheriting into a button, and
+     `/native` maps `<button>` and the button inputs here. 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, normal);
+  text-transform: var(--ui-label-case, none);
+  text-shadow: var(--ui-label-shadow, none);
+
+  /* The size steps. `sm` and `lg` raise a flag (`size.css`) and each line
+     below computes only while its flag is up, so the declarations that read
+     them fall back to the default step. Written in the component's own body,
+     not as `&.sm`, so `@apply btn sm` carries the step and a consumer's
+     `min-h-*` or `px-*` beats it as it beats the default. `--_scale-size`
+     is the step `box` scales the corner and the depth by. */
+  --_sm-h: var(--_size-sm) 2rem;
+  --_lg-h: var(--_size-lg) 3rem;
+  --_sm-px: var(--_size-sm) 0.75rem;
+  --_lg-px: var(--_size-lg) 1.25rem;
+  --_sm-py: var(--_size-sm) 0.25rem;
+  --_lg-py: var(--_size-lg) 0.625rem;
+  --_sm-text: var(--_size-sm) var(--text-sm);
+  --_lg-text: var(--_size-lg) 1.0625rem;
+  --_sm-leading: var(--_size-sm) var(--text-sm--line-height);
+  --_sm-scale: var(--_size-sm) 0.75;
+  --_lg-scale: var(--_size-lg) 1.25;
+  --_scale-size: var(--_sm-scale, var(--_lg-scale));
+
+  /* The modifiers: `icon`, `pill`, and the padding steps. Each raises a flag
+     (`modifiers.css`) and the lines below compute only while theirs is up, as
+     the size steps above do, so `@apply btn icon` carries the shape. A line
+     that names two flags needs both.
+
+     Bare `sm`/`lg` are the size modifier's names, so the padding steps take
+     a `p-` prefix. `p-xs` is the tightest, below `p-sm`: a chip-sized
+     button in a toolbar or a table cell. */
+  --_icon-pad: var(--_m-icon) var(--_sm-icon-pad, 0.5rem);
+  --_sm-icon-pad: var(--_size-sm) calc(0.375rem - var(--_width));
+  --_xs-px: var(--_m-p-xs) --spacing(2);
+  --_xs-py: var(--_m-p-xs) --spacing(0.5);
+  --_psm-px: var(--_m-p-sm) --spacing(2.5);
+  --_psm-py: var(--_m-p-sm) --spacing(1);
+  --_plg-px: var(--_m-p-lg) --spacing(6);
+  --_plg-py: var(--_m-p-lg) --spacing(3);
+  /* An icon button's padding step is the same on every side. */
+  --_xs-icon-px: var(--_m-icon) var(--_xs-py);
+  --_psm-icon-px: var(--_m-icon) var(--_psm-py);
+  --_plg-icon-px: var(--_m-icon) var(--_plg-py);
+  --_xs-scale: var(--_m-p-xs) 0.5;
+  --_psm-scale: var(--_m-p-sm) 0.75;
+  --_plg-scale: var(--_m-p-lg) 1.25;
+  --_scale-pad: var(--_plg-scale, var(--_psm-scale, var(--_xs-scale)));
+
+  /* The size floor. `p-xs` is the one padding step that drops it for a
+     labeled button: at that tier the button is a chip in a toolbar or a table
+     cell, where `--control-height` is taller than the row it sits in; every
+     other size and padding class keeps the floor, so a plain button stays a
+     comfortable target.
+
+     An icon button drops both floors at every padding tier. It is already
+     square -- `aspect-ratio` ties its width to whatever height it lands on
+     -- so a surviving floor would keep the button bigger than its own glyph
+     however tight the padding asked to be. */
+  --_floor: var(--_sm-h, var(--_lg-h, var(--control-height)));
+  --_xs-floor: var(--_m-p-xs) 0px;
+  --_psm-icon-floor: var(--_m-icon) var(--_m-p-sm) 0px;
+  --_plg-icon-floor: var(--_m-icon) var(--_m-p-lg) 0px;
+  --_icon-floor: var(--_m-icon) var(--_xs-floor, var(--_psm-icon-floor, var(--_plg-icon-floor, var(--_floor))));
+
+  min-height: var(--_xs-floor, var(--_psm-icon-floor, var(--_plg-icon-floor, var(--_floor))));
+  /* Square at each size step. The width is named as well as the height,
+     because WebKit does not let `aspect-ratio` widen a box past its
+     `min-width`. */
+  min-width: var(--_icon-floor, auto);
+  --_icon-ratio: var(--_m-icon) 1 / 1;
+  aspect-ratio: var(--_icon-ratio, auto);
+  padding-inline: var(
+    --_plg-icon-px,
+    var(
+      --_psm-icon-px,
+      var(
+        --_xs-icon-px,
+        var(--_plg-px, var(--_psm-px, var(--_xs-px, var(--_icon-pad, var(--_sm-px, var(--_lg-px, 1rem))))))
+      )
+    )
+  );
+  padding-block: var(
+    --_plg-py,
+    var(--_psm-py, var(--_xs-py, var(--_icon-pad, var(--_sm-py, var(--_lg-py, calc(0.5rem - var(--_width)))))))
+  );
+  font-size: var(--_sm-text, var(--_lg-text, inherit));
+  line-height: var(--_sm-leading, inherit);
+
+  /* A pill takes the round material ahead of the box radius, which is
+     `box`'s own formula restated. Sketch gives the token the button's own box
+     outline; a bevel still cuts the full radius to points under cyber. */
+  --_pill-radius: var(--_m-pill) var(--ui-radius-pill, calc(infinity * 1px));
+  border-radius: var(
+    --_pill-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))
+    )
+  );
+}

package/tw/components/feedback.css

@@ -0,0 +1,11 @@
+@reference "tailwindcss";
+@import "../theme.css";
+@reference "../surface.css";
+
+/* The focused entry: what the rules in `feedback.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 "./feedback.rules.css";

package/{dist/tw/components/feedback.css → tw/components/feedback.rules.css}

@@ -1,8 +1,3 @@
-@reference "tailwindcss";
-@import "../theme.css";
-@reference "../box.css";
-@reference "../surface.css";
-
 @keyframes anim-skeleton {
   0% {
     background-position: 200% 0;
@@ -39,12 +34,11 @@
 
   /* Same carve-out as `.panel`'s, and for the same reason: a neutral alert
      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.
+     250, 250`), a slab rather than a status signal. Only a quiet neutral tint
+     is untinted, through `surface`'s `--_quiet`, stepped from the resolved
+     fill so a container's `.ghost` or `.solid` renders the alert as the
+     alert's own `.ghost` or `.solid` would. A named intent keeps its ordinary wash, because untinting
+     `.alert.soft.destructive` would silence the status it exists to carry.
 
      Grounds on `--color-foreground` through `--_d-surface-ground`, exactly like
      `.panel` and a resting `.card.soft`, so glass's ground and a consumer's
@@ -52,10 +46,8 @@
      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);
-  }
+  --_fill-cap: calc(100% - var(--_quiet));
+  --_d-surface-ground: color-mix(in oklab, var(--color-foreground) var(--_quiet), var(--color-background));
 }
 
 /* No icon is shipped. `.alert` is already `flex`, so an icon dropped in as a
@@ -82,17 +74,38 @@
 /* A soft, edgeless chip. Small enough that the structural silhouette would be
    most of its height, so it takes the tight one where an aesthetic ships a pair. */
 @utility badge {
+  /* The neutral reset, carried so `@apply badge` gets it, as `btn` carries its own. */
+  @layer families {
+    :where(&:not(.badge, .primary, .secondary, .success, .warning, .destructive, .info)) {
+      --intent-color: var(--color-text);
+      --intent-contrast: var(--color-text-contrast);
+      --intent-hover: var(--color-text-hover);
+      --intent-strong: var(--color-text-strong);
+      --intent-subtle: var(--color-surface);
+      --intent-border: var(--ui-ink, var(--color-border));
+      --intent-fill-max: 20%;
+    }
+  }
+
+  @apply box inline-flex min-h-6 w-fit items-center gap-1 px-2.5 text-xs;
+
+  /* After `@apply box`: `box` states its own resting defaults, and the later
+     declaration wins. */
   --_d-fill: 12%;
   --_d-fg-on-fill: 0%;
   --_d-border: 0%;
   --_d-elevation: 0;
 
-  @apply box inline-flex min-h-6 w-fit items-center gap-1 px-2.5 text-xs;
+  /* With no fill, the neutral line is the region's unfilled ink when the
+     aesthetic names one -- glass does, for a `.ghost.edged` badge. See `--_bare-ink` in
+     `box.css`. Unset, the reference is invalid and `box` keeps its line. */
+  --_bare-ink: var(--_unfilled-ink);
 
-  /* The label material `.btn` reads. Unset, tracking, case, and shadow inherit,
-     as a badge's text always has. */
+  /* The label material `.btn` reads. Unset, tracking is `normal`, as `.btn`'s
+     is, so neither body copy's tracking nor a container's reaches the label;
+     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);
+  letter-spacing: var(--ui-label-tracking, normal);
   text-transform: var(--ui-label-case);
   text-shadow: var(--ui-label-shadow);
 
@@ -108,13 +121,31 @@
    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. */
 @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));
+  /* The indicator reset, carried so `@apply skeleton` gets it, as `btn` carries
+     its own: the neutral slots, with the two an indicator takes from the
+     colour it sits in. Without it an applied one read an undefined
+     `--intent-border`. */
+  @layer families {
+    :where(&:not(.skeleton, .primary, .secondary, .success, .warning, .destructive, .info)) {
+      --intent-color: currentColor;
+      --intent-contrast: var(--color-text-contrast);
+      --intent-hover: var(--color-text-hover);
+      --intent-strong: var(--color-text-strong);
+      --intent-subtle: var(--color-surface);
+      --intent-border: currentColor;
+      --intent-fill-max: 20%;
+    }
+  }
+
+  /* Public, read with their defaults, so a value set on any ancestor reaches
+     the placeholder. */
+  --_skeleton-base: var(--skeleton-base, color-mix(in oklab, var(--intent-color) 6%, var(--intent-subtle)));
+  --_skeleton-sheen: var(--skeleton-sheen, color-mix(in oklab, var(--intent-color) 10%, var(--color-foreground)));
 
   @apply min-h-4 w-full;
 
   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: linear-gradient(90deg, var(--_skeleton-base), var(--_skeleton-sheen), var(--_skeleton-base));
   background-size: 200% 100%;
   /* 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. */
@@ -131,6 +162,15 @@
   @media (prefers-reduced-motion: reduce) {
     animation: none;
   }
+
+  /* Forced colours remove background images, and the gradient is all a
+     skeleton is: it vanished. A system-colour outline keeps the placeholder's
+     shape on the page. A border, inside the box, so nothing moves. */
+  @media (forced-colors: active) {
+    box-sizing: border-box;
+    border: 1px solid CanvasText;
+    animation: none;
+  }
 }
 
 /* The track is a box, the fill is not: `box.css`'s formula composes the frame,
@@ -141,9 +181,52 @@
    docs/internal/model.md#components-that-do-not-take-the-whole-of-box for the
    decision and why the other two indicators do not get the same treatment. */
 @utility progress {
+  /* The indicator reset, carried so `@apply progress` gets it, as `btn` carries
+     its own: the neutral slots, with the two an indicator takes from the
+     colour it sits in. Without it an applied one read an undefined
+     `--intent-border`. */
+  @layer families {
+    :where(&:not(.progress, .primary, .secondary, .success, .warning, .destructive, .info)) {
+      --intent-color: currentColor;
+      --intent-contrast: var(--color-text-contrast);
+      --intent-hover: var(--color-text-hover);
+      --intent-strong: var(--color-text-strong);
+      --intent-subtle: var(--color-surface);
+      --intent-border: currentColor;
+      --intent-fill-max: 20%;
+    }
+  }
+
+  @layer families {
+    :where(&:not(.active)) {
+      --_m-active: initial;
+    }
+
+    :where(&:not(.indeterminate)) {
+      --_m-indeterminate: initial;
+    }
+  }
+
+  /* The two states. Each raises a flag (`modifiers.css`); the pseudo-elements
+     below read these lines, which inherit to them as the flags do. */
+  --_active-content: var(--_m-active) "";
+  --_active-shimmer: var(--_m-active) anim-skeleton calc(var(--motion-duration-slow) * 4) linear infinite;
+  --_indeterminate-width: var(--_m-indeterminate) 33%;
+  --_indeterminate-sweep: var(--_m-indeterminate) anim-progress-indeterminate 1.5s infinite ease-in-out;
+
+  /* Printed as drawn. A browser leaves backgrounds off paper by default, and
+     the bar is nothing but two backgrounds: the track and the value. */
+  print-color-adjust: exact;
+
   --_d-fill: 12%;
   --_d-fg-on-fill: 0%;
   --_d-border: 0%;
+  /* The track is a 12% tint, 1.2:1 against the page. With more contrast asked
+     for it is outlined, so where the bar ends is not left to the tint. An edge
+     class still decides: `--ui-border` is read before this. */
+  @media (prefers-contrast: more) {
+    --_d-border: 100%;
+  }
   --_d-elevation: 0;
   /* `--progress-color`/`--progress-surface`/`--progress-edge` are the Tier 1
      override path an aesthetic or consumer reaches `.progress` through (see
@@ -189,14 +272,19 @@
     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%);
+    width: var(--_indeterminate-width, var(--progress-value, 0%));
+    animation: var(--_indeterminate-sweep, none);
     z-index: 2;
   }
 
-  &.active::before {
-    content: "";
+  /* The shimmer, which generates no box unless `active`. Its animation is
+     gated with it: WebKit 26 lists an animation on a pseudo-element that
+     generates no box in `getAnimations()`, and an endless one there never
+     settles (`structure.spec.ts`, "reaches every line a component draws"). */
+  &::before {
+    content: var(--_active-content, none);
     @apply absolute inset-0 block h-full;
-    animation: anim-skeleton calc(var(--motion-duration-slow) * 4) linear infinite;
+    animation: var(--_active-shimmer, none);
     background: linear-gradient(
       90deg,
       transparent,
@@ -207,11 +295,6 @@
     z-index: 1;
   }
 
-  &.indeterminate::after {
-    width: 33%;
-    animation: anim-progress-indeterminate 1.5s infinite ease-in-out;
-  }
-
   /* 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. */
@@ -220,9 +303,49 @@
       transition-duration: 0.01ms;
     }
 
-    &.active::before,
-    &.indeterminate::after {
+    &::before,
+    &::after {
       animation: none;
     }
   }
+
+  /* Forced colours, carried for an applied bar, as the toggles carry theirs.
+     The class also keeps the unlayered copy below, which beats every layered
+     rule; see there for why each part is named. */
+  @media (forced-colors: active) {
+    forced-color-adjust: none;
+    background-color: Canvas;
+    border-color: CanvasText;
+
+    &::after {
+      background-color: CanvasText;
+    }
+
+    &::before {
+      display: none;
+    }
+  }
+}
+
+/* Forced colours repaint every background as Canvas, the value fill on a
+   Canvas track included, so a half-full bar read as an empty one. The bar opts
+   out, as the toggles do in `form.css`, and names system colours for every
+   part: the value in CanvasText, the track in Canvas, and a CanvasText
+   boundary at the track's own width, because a `.soft.edgeless` track has no
+   visible line and the extent of the bar is half of what it says. The shimmer
+   is decoration in the intent colour, so it goes. */
+@media (forced-colors: active) {
+  .progress {
+    forced-color-adjust: none;
+    background-color: Canvas;
+    border-color: CanvasText;
+
+    &::after {
+      background-color: CanvasText;
+    }
+
+    &::before {
+      display: none;
+    }
+  }
 }

package/tw/components/form.css

@@ -0,0 +1,11 @@
+@reference "tailwindcss";
+@import "../theme.css";
+@reference "../box.css";
+
+/* The focused entry: what the rules in `form.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 "./form.rules.css";