@codenhub/styles 0.8.0 → 0.9.0

package/tw/utilities/content.css

@@ -77,16 +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-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
@@ -125,18 +125,18 @@
      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(
+  --_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(
+  --_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)
+    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);
+  --_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
@@ -166,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
@@ -177,28 +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(
+  --_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(--_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);
+  --_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
@@ -216,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;
 
@@ -284,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
@@ -309,13 +312,19 @@
      initial value, which counts as naming none. */
   --_table-rule-width: var(--ui-border-width, var(--border-width));
   /* 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. */
+     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 px-4 py-3 text-start align-top;
+    @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
@@ -328,13 +337,13 @@
      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);
+    border-top-color: var(--_table-boundary);
   }
 
   :where(& th) {
@@ -356,14 +365,14 @@
      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);
+    --_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
@@ -387,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
@@ -607,19 +619,25 @@
   --_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.
@@ -633,19 +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(
+  --_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);
-  --quote-width: calc(var(--ui-border-width, var(--border-width)) * 2 + 1px);
+  --_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
@@ -655,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/layout.css

@@ -157,8 +157,10 @@
     }
   }
 
-  --divider-color: var(--intent-color);
-  --divider-width: var(--ui-border-width, var(--border-width));
+  /* Public, read with their defaults, so a value set on any ancestor reaches
+     the line. The colour stands in front of the intent. */
+  --_divider-color: var(--divider-color, var(--intent-color));
+  --_divider-width: var(--divider-width, var(--ui-border-width, var(--border-width)));
 
   @apply m-0 border-0;
 
@@ -166,13 +168,13 @@
      and stretches it down its row. */
   --_vertical-width: var(--_m-vertical) 0px;
   --_vertical-self: var(--_m-vertical) stretch;
-  --_vertical-line: var(--_m-vertical) var(--divider-width);
+  --_vertical-line: var(--_m-vertical) var(--_divider-width);
 
   width: var(--_vertical-width, 100%);
   align-self: var(--_vertical-self, auto);
-  border-color: var(--divider-color);
+  border-color: var(--_divider-color);
   border-style: var(--ui-rule-style, var(--ui-line-style, solid));
-  border-top-width: var(--_vertical-width, var(--divider-width));
+  border-top-width: var(--_vertical-width, var(--_divider-width));
   border-inline-start-width: var(--_vertical-line, 0px);
 }