@codenhub/styles 0.7.0 → 0.9.0

package/{dist/tw → tw}/utilities/content.css

@@ -1,5 +1,3 @@
-@reference "../box.css";
-
 /* A scroll box clips whatever paints outside it, and `overflow-x` takes the
    vertical overflow with it, so an aesthetic's halo around the table -- cyber's
    glow -- would be cut flush on every side. The wrapper makes room for the halo
@@ -40,6 +38,19 @@
    instead (below), which every engine draws on the rows. Recorded in
    `registry.json` beside the decision. */
 @utility data-table {
+  /* The neutral reset, carried so `@apply data-table` gets it, as `btn` carries its own. */
+  @layer families {
+    :where(&:not(.data-table, .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-rule-ink, var(--ui-ink, var(--color-border)));
+      --intent-fill-max: 20%;
+    }
+  }
+
   @apply box text-body w-full border-separate text-start;
 
   --_d-fill: 12%;
@@ -54,7 +65,6 @@
   /* Capped the way `box` caps, because the head is a fill of the intent like any
      other and a neutral table head is otherwise a slab of the page's ink with
      ink printed on it. */
-  --table-fill: calc(min(var(--ui-fill, var(--_d-fill)), var(--intent-fill-max, 100%)) * var(--ui-bg-alpha, 1));
   /* The head's plate is the tint, so a table carrying no fill has no head
      plate. `.ghost` means no tint here the way it means no fill everywhere
      else, and a ghost table is boundaries and type and nothing else -- which is
@@ -67,17 +77,16 @@
      two presentations separate. A larger multiplier lands both on a fully
      opaque plate, leaving only the small intent mix to tell them apart.
 
-     It reads `--ui-fill` rather than `--table-fill` because the question is
+     It reads `--ui-fill` rather than `--_table-fill` because the question is
      what the presentation wanted, not what the intent cap and an aesthetic's
      alpha left of it: a glass `.soft` table still wants its head plate, and
      neutral's 20% cap has no bearing on whether there is one. Reading the raw
      class value also keeps the expression a `calc()` over one `var()` rather
-     than over `--table-fill`'s own `calc()`/`min()` chain, which matters for
-     the reason `--table-rule-plated` below records. */
-  --table-ground: min(100%, calc(var(--ui-fill, var(--_d-fill)) * 5));
-  --table-head-plate: color-mix(in oklab, var(--intent-subtle) var(--table-ground), transparent);
-  --table-head-bg: color-mix(in oklab, var(--intent-color) var(--table-fill), var(--table-head-plate));
-  --table-head-fg: color-mix(in oklab, var(--intent-contrast) var(--_on-fill), var(--intent-strong));
+     than over `--_table-fill`'s own `calc()`/`min()` chain, which matters for
+     the reason `--_table-rule-plated` below records. */
+  --_table-ground: min(100%, calc(var(--ui-fill, var(--_d-fill)) * 5));
+  --_table-head-bg: color-mix(in oklab, var(--intent-color) var(--_table-fill), var(--_table-head-plate));
+  --_table-head-fg: color-mix(in oklab, var(--intent-contrast) var(--_on-fill), var(--intent-strong));
   /* The table's own contrast ink, resolved here so a row with its own intent
      prints on the table's plate in the ink that plate takes: the row's
      `--intent-contrast` is chosen for the row's fill, which a row does not
@@ -101,25 +110,45 @@
      element, so nothing here fights `.soft` for `--ui-fill`. `.ghost` is left
      at box's default (`--_d-ground: transparent`), so it stays the fully bare
      boundaries-only table; `.soft` differs from it by keeping an opaque,
-     untinted plate and a head label strip.
-
-     `:not(.solid, .ghost)` rather than `.soft`: the published resting fill is
-     `soft`, so a bare `<table class="data-table">` with no fill class at all is
-     the common case this has to reach. */
+     untinted plate and a head label strip. */
+  /* Whether the table rests on the quiet plate, as 0% or 100%: a resolved
+     fill above nothing and below full. Stepped from the resolved fill, as
+     `surface`'s `--_quiet` is, not keyed on `:not(.solid, .ghost)` here:
+     presentation cascades, and keyed on the class a container's `.solid`
+     filled the head and dropped the frame while the body kept this plate. */
+  --_table-quiet: min(
+    clamp(0%, calc(var(--ui-fill, var(--_d-fill)) * 1000), 100%),
+    clamp(0%, calc((100% - var(--ui-fill, var(--_d-fill))) * 1000), 100%)
+  );
+  /* A table is a pane of content, so under an aesthetic whose surfaces are
+     glass it is glass too: the plate is the aesthetic's surface ground when
+     one is named. Head and body share the plate, as they do on the page. Only
+     the quiet rest reads it: a `.solid` table is opaque, like every `.solid`,
+     and a `.ghost` one is boundaries and type. */
+  --_table-ground-plate: var(--ui-surface-ground, var(--color-foreground));
+  --_table-fill: min(
+    calc(min(var(--ui-fill, var(--_d-fill)), var(--intent-fill-max, 100%)) * var(--ui-bg-alpha, 1)),
+    calc(100% - var(--_table-quiet))
+  );
+  --_table-head-plate: color-mix(
+    in oklab,
+    var(--_table-ground-plate) var(--_table-quiet),
+    color-mix(in oklab, var(--intent-subtle) var(--_table-ground), transparent)
+  );
+  --_fill-cap: calc(100% - var(--_table-quiet));
+  --_d-ground: color-mix(in oklab, var(--_table-ground-plate) var(--_table-quiet), transparent);
+
+  /* A table rests on a plate of its own at every fill but `.ghost`, so no
+     ink from above passes through it, as on `surface`. A ghost table on a
+     filled parent therefore prints the page's ink on that fill: a toggle
+     cannot be stepped from the fill. */
+  --_held-ink: var(--_fg-own);
+  --_held-on: var(--_own-hold);
+
+  /* The blur behind the glass plate. A filter cannot be stepped from a
+     percentage, so this one part stays keyed on the class: a table under a
+     container's `.ghost` in a glass region still blurs what is behind it. */
   &:not(.solid, .ghost) {
-    --table-fill: 0%;
-    --table-head-plate: var(--table-ground-plate);
-    --_fill-cap: 0%;
-    --_d-ground: var(--table-ground-plate);
-
-    /* A table is a pane of content, so under an aesthetic whose surfaces are
-       glass it is glass too: the plate is the aesthetic's surface ground when
-       one is named, and the blur behind it is the one surfaces take. Head and
-       body share the plate, as they do on the page. Only this arm reads them:
-       a `.solid` table is opaque, like every `.solid`, and a `.ghost` one is
-       boundaries and type with nothing behind them to blur. */
-    --table-ground-plate: var(--ui-surface-ground, var(--color-foreground));
-
     -webkit-backdrop-filter: var(--ui-backdrop, none);
     backdrop-filter: var(--ui-backdrop, none);
   }
@@ -137,8 +166,8 @@
      both. So `.ruled` writes 100% and gets rules everywhere, `.ruleless` writes
      0% and gets a table with no lines in it at all, and a table nobody classed
      sits between them. */
-  --table-rule-amount: var(--ui-rule, 0%);
-  --table-boundary-amount: var(--ui-rule, 100%);
+  --_table-rule-amount: var(--ui-rule, 0%);
+  --_table-boundary-amount: var(--ui-rule, 100%);
   /* What the rule is drawn in, which is not the same tone at every fill.
      `.ghost` and `.soft` keep `--intent-border` -- the slot an aesthetic
      restates through `--ui-ink` -- because at those fills the plate has not
@@ -148,24 +177,28 @@
      is busiest.
 
      The filled case draws in `currentColor` at a fifth instead: the ink the
-     cell is already printing (`--table-head-fg` on a head, `box`'s own `--_fg`
+     cell is already printing (`--_table-head-fg` on a head, `box`'s own `--_fg`
      in the body), so it reads on a light plate and a dark one without a
      per-intent branch, and it lands *over* the plate because a translucent
      border composites onto the background the element already painted.
 
      Naming the ink rather than composing it also keeps this expression cheap,
      which is a requirement: every `th` and `td` on a page resolves it, and
-     written as `color-mix(--table-head-fg 20%, --_bg)` it expands, through four
+     written as `color-mix(--_table-head-fg 20%, --_bg)` it expands, through four
      levels of substitution, into a `color-mix()` over two more `color-mix()`es
      over a `min()`/`max()`/`calc()` chain, which crashes WebKit's renderer on
      the routes that draw tables. `currentColor` and `transparent` are leaves
      the engine has already resolved, which takes the expression back down to
-     something every engine can carry. `--table-row-hover` below is written the
+     something every engine can carry. `--_table-row-hover` below is written the
      same way, for the same reason. */
-  --table-rule-plated: color-mix(in oklab, currentColor 20%, transparent);
-  --table-rule-tone: color-mix(in oklab, var(--table-rule-plated) var(--ui-fill, var(--_d-fill)), var(--intent-border));
-  --table-rule: color-mix(in oklab, var(--table-rule-tone) var(--table-rule-amount), transparent);
-  --table-boundary: color-mix(in oklab, var(--table-rule-tone) var(--table-boundary-amount), transparent);
+  --_table-rule-plated: color-mix(in oklab, currentColor 20%, transparent);
+  --_table-rule-tone: color-mix(
+    in oklab,
+    var(--_table-rule-plated) var(--ui-fill, var(--_d-fill)),
+    var(--intent-border, var(--ui-rule-ink, var(--ui-ink, var(--color-border))))
+  );
+  --_table-rule: color-mix(in oklab, var(--_table-rule-tone) var(--_table-rule-amount), transparent);
+  --_table-boundary: color-mix(in oklab, var(--_table-rule-tone) var(--_table-boundary-amount), transparent);
   /* A hovered row is a step from the table it is in, not from a tone the page
      happens to own. A translucent step is relative at every fill, the way
      `box-hover` is: the row composites onto whatever plate the table drew, so a
@@ -183,9 +216,12 @@
      already carries and therefore always contrasts with it.
 
      Both ends are leaves, and the step lands on `transparent` rather than on
-     `--_bg`, for the reason `--table-rule-plated` above gives. */
-  --table-hover-tone: color-mix(in oklab, currentColor var(--ui-fill, var(--_d-fill)), var(--intent-hover));
-  --table-row-hover: color-mix(in oklab, var(--table-hover-tone) 12%, transparent);
+     `--_bg`, for the reason `--_table-rule-plated` above gives. */
+  --_table-hover-tone: color-mix(in oklab, currentColor var(--ui-fill, var(--_d-fill)), var(--intent-hover));
+  /* The default hover. `--table-hover` is public and read where the row
+     paints, not here, so a value on any ancestor of the cells reaches them,
+     a `tbody` or row included; `transparent` turns the hover off. */
+  --_table-row-hover: color-mix(in oklab, var(--_table-hover-tone) 12%, transparent);
 
   border-spacing: 0;
 
@@ -251,11 +287,11 @@
      corner cells round it: a section's background ignores the cells' corners. */
   & thead,
   & tfoot {
-    color: var(--table-head-fg);
+    color: var(--_table-head-fg);
   }
 
   & :is(thead, tfoot) > tr > * {
-    background-color: var(--table-head-bg);
+    background-color: var(--_table-head-bg);
   }
 
   /* Every cell carries the hairline; what varies is whether it is painted. The
@@ -275,13 +311,20 @@
      `th` centers unless its parent names an alignment, and `start` is the
      initial value, which counts as naming none. */
   --_table-rule-width: var(--ui-border-width, var(--border-width));
-  & th,
-  & td {
-    @apply px-4 py-3 text-start align-top;
+  /* In `:where()`: these are the cells' defaults, and at the 0-1-1 the plain
+     selector carried, `p-0` or `text-center` on a cell lost to them.
+     `--table-cell-padding` is public and read with the default, `py-3 px-4`,
+     as its fallback. A physical `padding`, because one variable has to carry
+     both axes: in a vertical writing mode its two values stay top-bottom and
+     left-right rather than following the block and inline axes. */
+  :where(& :is(th, td)) {
+    @apply text-start align-top;
+
+    padding: var(--table-cell-padding, calc(var(--spacing) * 3) calc(var(--spacing) * 4));
 
     border-bottom-style: var(--ui-rule-style, var(--ui-line-style, solid));
     border-bottom-width: var(--_table-rule-width);
-    border-color: var(--table-rule);
+    border-color: var(--_table-rule);
   }
 
   /* The two lines that separate the parts of a table from each other: under the
@@ -294,27 +337,16 @@
      because with rules off that row paints nothing. Stated on the foot, the
      boundary holds at every setting. */
   & thead tr:last-child > * {
-    border-bottom-color: var(--table-boundary);
+    border-bottom-color: var(--_table-boundary);
   }
 
   & tfoot tr:first-child > * {
     border-top-style: var(--ui-rule-style, var(--ui-line-style, solid));
     border-top-width: var(--_table-rule-width);
-    border-top-color: var(--table-boundary);
-  }
-
-  /* Rules between body rows, on request -- and every line off, on the opposite
-     request. `.ruleless` is declared second so it wins the nonsense combination
-     rather than leaving it to whichever class the author typed first. */
-  &.ruled {
-    --ui-rule: 100%;
+    border-top-color: var(--_table-boundary);
   }
 
-  &.ruleless {
-    --ui-rule: 0%;
-  }
-
-  & th {
+  :where(& th) {
     @apply text-label font-semibold;
   }
 
@@ -333,29 +365,30 @@
      the same values, but a `color` declared on every row would override a
      colour a consumer set on the table. */
   & tbody tr:is(.neutral, .primary, .secondary, .success, .warning, .destructive, .info) {
-    --table-rule-tone: color-mix(
+    --_table-rule-tone: color-mix(
       in oklab,
-      var(--table-rule-plated) var(--ui-fill, var(--_d-fill)),
+      var(--_table-rule-plated) var(--ui-fill, var(--_d-fill)),
       var(--intent-border)
     );
-    --table-rule: color-mix(in oklab, var(--table-rule-tone) var(--table-rule-amount), transparent);
-    --table-hover-tone: color-mix(in oklab, currentColor var(--ui-fill, var(--_d-fill)), var(--intent-hover));
-    --table-row-hover: color-mix(in oklab, var(--table-hover-tone) 12%, transparent);
-
-    color: color-mix(in oklab, var(--_table-contrast) var(--_on-fill), var(--intent-strong));
-  }
-
-  /* A neutral solid table caps its fill at 20%, so its plate is a light grey
-     and the ramp keeps `--_on-fill` low: the row's ink is then mostly the
-     row's `--intent-strong`, which is chosen against the row's own subtle
-     ground rather than a grey one, and success, warning and destructive fall
-     under 4.5:1 on it. Those rows print the table's own ink, `--_fg`,
-     inherited already resolved against the table, and keep their intent in
-     the rule and the hover. */
-  &.solid:not(.primary, .secondary, .success, .warning, .destructive, .info)
-    tbody
-    tr:is(.neutral, .primary, .secondary, .success, .warning, .destructive, .info) {
-    color: var(--_fg);
+    --_table-rule: color-mix(in oklab, var(--_table-rule-tone) var(--_table-rule-amount), transparent);
+    --_table-hover-tone: color-mix(in oklab, currentColor var(--ui-fill, var(--_d-fill)), var(--intent-hover));
+    --_table-row-hover: color-mix(in oklab, var(--_table-hover-tone) 12%, transparent);
+
+    /* A neutral solid table caps its fill at 20%, so its plate is a light grey
+       and the ramp keeps `--_on-fill` low: the row's ink is then mostly the
+       row's `--intent-strong`, which is chosen against the row's own subtle
+       ground rather than a grey one, and success, warning and destructive fall
+       under 4.5:1 on it. Those rows print the table's own ink, `--_fg`,
+       inherited already resolved against the table, and keep their intent in
+       the rule and the hover.
+       `--_plate` is the table's too: 100% where the intent's cap stopped its
+       fill, read rather than a `.solid` class on the table, which a
+       container's `.solid` does not put there. */
+    color: color-mix(
+      in oklab,
+      var(--_fg) var(--_plate, 0%),
+      color-mix(in oklab, var(--_table-contrast) var(--_on-fill), var(--intent-strong))
+    );
   }
 
   & tbody tr > * {
@@ -363,9 +396,12 @@
   }
 
   /* On the cells, for the reason the head's plate is: a hovered last row keeps
-     the table's bottom corners. */
-  & tbody tr:hover > * {
-    background-color: var(--table-row-hover);
+     the table's bottom corners. Behind the query `box-hover` is, so a tapped
+     row does not stay tinted. */
+  @media (hover: hover) {
+    & tbody tr:hover > * {
+      background-color: var(--table-hover, var(--_table-row-hover));
+    }
   }
 
   /* The rule comes off the row that is visually last, which is not always the
@@ -413,9 +449,23 @@
    separate from, so it alone drops the extra ink. The ground itself is not
    moved the way `.panel`'s is: `--intent-subtle` already resolves to
    `--color-surface` for neutral, a real, visible step past the page on its
-   own, so only the wash on top of it goes. `:not(.solid)` so an explicit
-   `.solid` chip is never clamped to a cap it did not ask for. */
+   own, so only the wash on top of it goes. The cap is stepped from the
+   resolved fill, so a full fill -- the chip's own `.solid` or a container's --
+   is never clamped to a cap it did not ask for. */
 @utility kbd {
+  /* The neutral reset, carried so `@apply kbd` gets it, as `btn` carries its own. */
+  @layer families {
+    :where(&:not(.kbd, .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 items-center px-1.5 py-0.5 font-mono text-xs font-medium;
 
   --_d-fill: 12%;
@@ -424,6 +474,10 @@
   --_d-elevation: 0;
   --_d-ground: var(--intent-subtle);
 
+  /* A ground of its own, so no ink from above passes through, as on `surface`. */
+  --_held-ink: var(--_fg-own);
+  --_held-on: var(--_own-hold);
+
   /* A small default remains when no aesthetic asks for a complete chip shape. */
   border-radius: var(
     --ui-radius-tight,
@@ -431,13 +485,35 @@
   );
   clip-path: var(--ui-clip-tight, var(--ui-clip, none));
 
-  &:not(.primary, .secondary, .success, .warning, .destructive, .info, .solid) {
-    --_fill-cap: 0%;
-  }
+  /* The neutral wash goes, and only that: a neutral intent (its cap is below
+     100%) asking for less than its cap. Stepped from the resolved fill, as
+     `surface`'s `--_quiet` is, not keyed on a class here: presentation
+     cascades, and keyed on the class a container's `.solid` reached the ink
+     and the line while the plate stayed capped. */
+  --_fill-cap: calc(
+    100% -
+      min(
+        clamp(0%, calc((100% - var(--intent-fill-max, 100%)) * 1000), 100%),
+        clamp(0%, calc((var(--intent-fill-max, 100%) - var(--ui-fill, var(--_d-fill))) * 1000), 100%)
+      )
+  );
 }
 
 /* The same plate with no line around it. */
 @utility code {
+  /* The neutral reset, carried so `@apply code` gets it, as `btn` carries its own. */
+  @layer families {
+    :where(&:not(.code, .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 px-1.25 py-0.75 font-mono;
 
   --_d-fill: 12%;
@@ -446,19 +522,45 @@
   --_d-elevation: 0;
   --_d-ground: var(--intent-subtle);
 
+  /* A ground of its own, so no ink from above passes through, as on `surface`. */
+  --_held-ink: var(--_fg-own);
+  --_held-on: var(--_own-hold);
+
   border-radius: var(
     --ui-radius-tight,
     min(var(--ui-radius, var(--ui-corner, var(--radius-small))), var(--radius-small))
   );
   clip-path: var(--ui-clip-tight, var(--ui-clip, none));
 
-  &:not(.primary, .secondary, .success, .warning, .destructive, .info, .solid) {
-    --_fill-cap: 0%;
-  }
+  /* The neutral wash goes, and only that: a neutral intent (its cap is below
+     100%) asking for less than its cap. Stepped from the resolved fill, as
+     `surface`'s `--_quiet` is, not keyed on a class here: presentation
+     cascades, and keyed on the class a container's `.solid` reached the ink
+     and the line while the plate stayed capped. */
+  --_fill-cap: calc(
+    100% -
+      min(
+        clamp(0%, calc((100% - var(--intent-fill-max, 100%)) * 1000), 100%),
+        clamp(0%, calc((var(--intent-fill-max, 100%) - var(--ui-fill, var(--_d-fill))) * 1000), 100%)
+      )
+  );
 }
 
 /* And at block scale, where the radius is a control's rather than a chip's. */
 @utility pre {
+  /* The neutral reset, carried so `@apply pre` gets it, as `btn` carries its own. */
+  @layer families {
+    :where(&:not(.pre, .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 block overflow-x-auto px-2.5 py-1.5 font-mono;
 
   --_d-fill: 12%;
@@ -467,9 +569,22 @@
   --_d-elevation: 0;
   --_d-ground: var(--intent-subtle);
 
-  &:not(.primary, .secondary, .success, .warning, .destructive, .info, .solid) {
-    --_fill-cap: 0%;
-  }
+  /* A ground of its own, so no ink from above passes through, as on `surface`. */
+  --_held-ink: var(--_fg-own);
+  --_held-on: var(--_own-hold);
+
+  /* The neutral wash goes, and only that: a neutral intent (its cap is below
+     100%) asking for less than its cap. Stepped from the resolved fill, as
+     `surface`'s `--_quiet` is, not keyed on a class here: presentation
+     cascades, and keyed on the class a container's `.solid` reached the ink
+     and the line while the plate stayed capped. */
+  --_fill-cap: calc(
+    100% -
+      min(
+        clamp(0%, calc((100% - var(--intent-fill-max, 100%)) * 1000), 100%),
+        clamp(0%, calc((var(--intent-fill-max, 100%) - var(--ui-fill, var(--_d-fill))) * 1000), 100%)
+      )
+  );
 }
 
 /* Typography wearing a component's name, so it composes none of `box`: `box`
@@ -487,23 +602,42 @@
    what makes the bar read as a bar at the default hairline: doubling 1px gives
    2px, and a quotation mark needs more presence than a table rule. */
 @utility quote {
+  /* The neutral reset, carried so `@apply quote` gets it, as `btn` carries its own. */
+  @layer families {
+    :where(&:not(.quote, .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%;
+    }
+  }
+
   --_d-fill: 0%;
   --_d-fg-on-fill: 0%;
   --_d-border: 100%;
   --_d-elevation: 0;
+
+  /* Printed as drawn, as `box` is. A browser leaves backgrounds off paper by
+     default, and a filled quotation prints its text in the contrast colour:
+     white on nothing. */
+  print-color-adjust: exact;
+
   /* Presentation capped by the intent, the same `--_capped` `box` composes, kept
-     separate from `--quote-fill` because the ink ramp below reads it before
+     separate from `--_quote-fill` because the ink ramp below reads it before
      `--ui-bg-alpha` thins it. */
-  --quote-capped: min(var(--ui-fill, var(--_d-fill)), var(--intent-fill-max, 100%));
-  --quote-fill: calc(var(--quote-capped) * var(--ui-bg-alpha, 1));
+  --_quote-capped: min(var(--ui-fill, var(--_d-fill)), var(--intent-fill-max, 100%));
+  --_quote-fill: calc(var(--_quote-capped) * var(--ui-bg-alpha, 1));
   /* `box`'s `--_plate`: a fill the intent's cap stopped short rests on the page
      background, so a neutral `.solid` quotation is a plate rather than a tint
      of whatever is behind it. */
-  --quote-plate: clamp(0%, calc((var(--ui-fill, var(--_d-fill)) - var(--quote-capped)) * 1000), 100%);
-  --quote-bg: color-mix(
+  --_quote-plate: clamp(0%, calc((var(--ui-fill, var(--_d-fill)) - var(--_quote-capped)) * 1000), 100%);
+  --_quote-bg: color-mix(
     in oklab,
-    var(--intent-color) var(--quote-fill),
-    color-mix(in oklab, var(--color-background) var(--quote-plate), transparent)
+    var(--intent-color) var(--_quote-fill),
+    color-mix(in oklab, var(--color-background) var(--_quote-plate), transparent)
   );
   /* The same edge blend `box` draws, in the same order and for the same reason:
      the blend is the line's colour, and how much line there is comes after it.
@@ -517,15 +651,21 @@
      A quotation draws its own edge instead of taking `box`'s, so an edge change
      is made in `box`, `.quote`, and `.progress`. Recorded in `registry.json`
      beside the decision to compose none of `box`. */
-  --quote-line: color-mix(in oklab, transparent var(--ui-fill, var(--_d-fill)), var(--intent-border));
-  --quote-edge: color-mix(in oklab, var(--quote-line) var(--ui-border, var(--_d-border)), transparent);
-  --quote-width: calc(var(--ui-border-width, var(--border-width)) * 2 + 1px);
+  --_quote-line: color-mix(
+    in oklab,
+    transparent var(--ui-fill, var(--_d-fill)),
+    var(--intent-border, var(--ui-ink, var(--color-border)))
+  );
+  --_quote-edge: color-mix(in oklab, var(--_quote-line) var(--ui-border, var(--_d-border)), transparent);
+  /* Public, read with its default, so a value set on any ancestor reaches the
+     bar. */
+  --_quote-width: var(--quote-width, calc(var(--ui-border-width, var(--border-width)) * 2 + 1px));
 
   @apply my-0 border-s py-2 ps-4 italic;
 
-  background-color: var(--quote-bg);
-  border-inline-start-color: var(--quote-edge);
-  border-inline-start-width: var(--quote-width);
+  background-color: var(--_quote-bg);
+  border-inline-start-color: var(--_quote-edge);
+  border-inline-start-width: var(--_quote-width);
   /* The ink is gated by the plate, not tied to the fill: `--ui-fg-on-fill` is
      the ceiling, and the contrast tone only ramps in past a half fill, reaching
      full at a full fill. Below that the ink stays `--intent-strong`, the tone
@@ -535,7 +675,7 @@
   color: color-mix(
     in oklab,
     var(--intent-contrast)
-      min(var(--ui-fg-on-fill, var(--_d-fg-on-fill)), max(0%, calc(var(--quote-capped) * 2 - 100%))),
+      min(var(--ui-fg-on-fill, var(--_d-fg-on-fill)), max(0%, calc(var(--_quote-capped) * 2 - 100%))),
     var(--intent-strong)
   );
 

package/tw/utilities/index.css

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