@wtfalch/design 0.9.0 → 0.9.1

package/dist/tf.css

@@ -287,12 +287,9 @@
     --font-sans: var(--font-sans);
     --font-mono: var(--font-mono);
     --text-xs: var(--text-xs);
-    --text-xs--line-height: inherit;
     --text-sm: var(--text-sm);
-    --text-sm--line-height: inherit;
     --text-base: var(--text-base);
     --text-lg: var(--text-lg);
-    --text-lg--line-height: inherit;
     --text-xl: var(--text-xl);
     --font-weight-normal: var(--weight);
     --tracking-normal: var(--tracking);
@@ -307,14 +304,12 @@
     --spacing-5: var(--space-5);
     --spacing-6: var(--space-6);
     --spacing-10: var(--space-10);
-    --text-2xs--line-height: inherit;
     --text-2xs: var(--text-2xs);
     --text-md: var(--text-md);
     --font-weight-strong: var(--weight-strong);
     --radius-pill: var(--radius-pill);
     --color-text: var(--text);
     --color-muted: var(--muted);
-    --color-accent: var(--accent);
     --color-border: var(--border);
     --color-border-strong: var(--border-strong);
   }
@@ -570,9 +565,6 @@
     --tw-border-style: dashed;
     border-style: dashed;
   }
-  .border-accent {
-    border-color: var(--color-accent);
-  }
   .border-border {
     border-color: var(--color-border);
   }
@@ -623,19 +615,15 @@
   }
   .text-2xs {
     font-size: var(--text-2xs);
-    line-height: var(--tw-leading, var(--text-2xs--line-height));
   }
   .text-lg {
     font-size: var(--text-lg);
-    line-height: var(--tw-leading, var(--text-lg--line-height));
   }
   .text-sm {
     font-size: var(--text-sm);
-    line-height: var(--tw-leading, var(--text-sm--line-height));
   }
   .text-xs {
     font-size: var(--text-xs);
-    line-height: var(--tw-leading, var(--text-xs--line-height));
   }
   .leading-\[0\] {
     --tw-leading: 0;
@@ -690,9 +678,6 @@
     --tw-numeric-spacing: tabular-nums;
     font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
   }
-  .opacity-0 {
-    opacity: 0%;
-  }
   .opacity-60 {
     opacity: 60%;
   }
@@ -735,9 +720,6 @@
   .surface-panel {
     background: var(--panel);
   }
-  .surface-panel-2 {
-    background: var(--panel-2);
-  }
   .disabled\:cursor-default:disabled {
     cursor: default;
   }
@@ -977,7 +959,19 @@
   }
 }
 
-/* ---- ./base.css ---- */
+/* ---- ./_system-light.css ---- */
+/* The `system` theme's light half.
+ *
+ * Its own file, and outside the components layer, because it is a *theme*
+ * rather than a component rule. `tokens.css` states the dark base on `:root`
+ * and is unlayered; the moment this sat inside `@layer components` it lost to
+ * that, and every `system` specimen rendered dark on a light-mode machine.
+ * Unlayered beats layered whatever the selector says, which is exactly the
+ * trap this repository keeps finding in different costumes.
+ *
+ * The underscore marks it the same way `_tailwind.built.css` is marked:
+ * `copy-css.mjs` passes both through without wrapping them.
+ */
 /* Light, only under the `system` theme. This used to override `:root`
    unconditionally, so choosing a dark theme on a light-mode laptop got
    silently repainted. Every other theme states its own palette. */
@@ -1006,6 +1000,8 @@
     }
 }
 
+/* ---- ./base.css ---- */
+@layer components {
 /* Derived from the two surfaces every theme already defines, so a theme gets a
    control colour without knowing this exists. */
 /* Pseudo-elements too. `*` does not match them, and `box-sizing` is not
@@ -1866,8 +1862,10 @@ input:active, textarea:active, select:active { transform: none; }
   color: var(--muted);
   opacity: 1;
 }
+}
 
 /* ---- ./select.css ---- */
+@layer components {
 /* How big a control is, asked for rather than inherited.
    Four sizes existed and every one of them came from a descendant selector:
    `.set-row button` was 11px in 3px of padding, `.approval-actions button` was
@@ -1962,16 +1960,19 @@ input:active, textarea:active, select:active { transform: none; }
 /* State is read off React Aria's attributes: `data-open` on the root,
    `data-focused` / `data-selected` / `data-disabled` on an item, where
    `.open`, `[data-active]`, `.on` and `.off` used to be. */
-.sel-list { scroll-padding-block: var(--space-1); box-shadow: var(--shadow-2); })` brings up ended flush against the
-     border and read as clipped rather than as one of a set -- and this list
-     opens scrolled to whatever is chosen, so that was the ordinary state.
-     `scroll-padding` insets what counts as "in view", so it stops short by
-     the same four the sides have. */
+/* The list keeps two things the utilities on `Select` cannot say.
+ *
+ * `scroll-padding-block`: the same room while the list is scrolled as it has
+ * at rest. Padding at the top of a scroll container scrolls away with the
+ * content, so the row `scrollIntoView({block: 'nearest'})` brings up ended
+ * flush against the border and read as clipped rather than as one of a set --
+ * and this list opens scrolled to whatever is chosen, so that was the
+ * ordinary state.
+ *
+ * `box-shadow`: `--shadow-2` is a token, and a utility would have to inline
+ * the value, which is the one thing the vocabulary exists to stop. */
+.sel-list {
   scroll-padding-block: var(--space-1);
-  list-style: none;
-  border: var(--border-width) solid var(--border-strong);
-  border-radius: var(--radius-md);
-  background: var(--panel);
   box-shadow: var(--shadow-2);
 }
 
@@ -1986,6 +1987,19 @@ input:active, textarea:active, select:active { transform: none; }
 
 /* The tick marks the chosen row. Colour alone would not: a list where the only
    difference is a hue is a list you cannot read past. */
+/* The tick's resting state lives here, beside the state that overrides it.
+ *
+ * It was `opacity-0` on the element and `opacity: 1` here, which worked only
+ * while this sheet was unlayered. A utility is in `@layer utilities` and
+ * beats `@layer components` whatever the selector, so the moment the sheets
+ * moved into a layer the tick stopped appearing on the selected row -- the
+ * resting state won permanently.
+ *
+ * The rule generalises: a utility for a resting state whose active state is a
+ * relationship between elements will always beat that active state. The pair
+ * has to sit in the same layer. */
+.sel-tick { opacity: 0; }
+
 .sel-item[data-selected] .sel-tick { opacity: 1; }
 
 /* The icon on a speaker's row in the open list -- `Select`'s `aside`. Last in
@@ -2020,8 +2034,10 @@ input:active, textarea:active, select:active { transform: none; }
 .field > input,
 .field > textarea,
 .field > .sel { width: 100%; }
+}
 
 /* ---- ./dangerzone.css ---- */
+@layer components {
 /* Destructive, and legible as such standing still. */
 .btn.danger {
   color: var(--bad);
@@ -2133,8 +2149,10 @@ input:active, textarea:active, select:active { transform: none; }
    controls in the same column at the same indent that do not line up read as
    an accident rather than as a pair. */
 .field-row > button { min-width: 9ch; }
+}
 
 /* ---- ./callout.css ---- */
+@layer components {
 /* One shape for everything that tells you something.
    `.banner` and `.callout` were the same box drawn twice: a bordered, rounded,
    12px panel with a tint. They differed in padding by a pixel in each direction
@@ -2273,8 +2291,10 @@ input:active, textarea:active, select:active { transform: none; }
 }
 
 .callout button { flex: none; }
+}
 
 /* ---- ./card.css ---- */
+@layer components {
 /* `.card` is public API, not this component's private styling.
  *
  * Consumers apply it to their own markup -- the gallery's skeleton specimen
@@ -2416,8 +2436,10 @@ input:active, textarea:active, select:active { transform: none; }
 }
 
 .card[aria-pressed='true']:hover { border-color: var(--accent); }
+}
 
 /* ---- ./toggle.css ---- */
+@layer components {
 .card-action .switch-row { padding: 0; gap: var(--space-2); }
 
 .card-action .switch-row .switch-body { flex: none; }
@@ -2648,8 +2670,10 @@ input[type='radio']:active:not(:disabled) {
 @media (prefers-reduced-motion: reduce) {
   .toggle-sweep::before { animation: none; background: color-mix(in oklab, var(--accent) 45%, transparent); }
 }
+}
 
 /* ---- ./skeleton.css ---- */
+@layer components {
 .muted { color: var(--muted); }
 
 .pulse-block {
@@ -2704,8 +2728,10 @@ input[type='radio']:active:not(:disabled) {
   /* Still distinguishable from a real block of colour, and still still. */
   .skel-pulse { animation: none; opacity: 0.8; }
 }
+}
 
 /* ---- ./rows.css ---- */
+@layer components {
 .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 
 /* A name and the pills that qualify it, on one line, where the name is the only
@@ -2966,8 +2992,10 @@ input[type='radio']:active:not(:disabled) {
 .row-hit:hover .truncate { color: var(--accent); }
 
 .row-hit:focus-visible { outline: none; box-shadow: var(--focus-ring); }
+}
 
 /* ---- ./progress.css ---- */
+@layer components {
 /* progress ----------------------------------------------------------- */
 
 /* The bar itself: a track with a child it fills, an animation and a
@@ -3009,8 +3037,10 @@ input[type='radio']:active:not(:disabled) {
   /* Still distinguishable from empty, and from full. */
   .bar-indeterminate > i { animation: none; width: 100%; opacity: 0.35; }
 }
+}
 
 /* ---- ./tabs.css ---- */
+@layer components {
 /* ---------------------------------------------------------------- tabs */
 .tabs { position: relative; display: flex; gap: var(--space-1); }
 
@@ -3111,8 +3141,10 @@ input[type='radio']:active:not(:disabled) {
 }
 
 .tabs-vertical .tab:active:not(:disabled) { border-color: transparent; }
+}
 
 /* ---- ./toast.css ---- */
+@layer components {
 /* ---------------------------------------------------------------- toasts */
 .toasts {
   position: fixed;
@@ -3210,8 +3242,10 @@ input[type='radio']:active:not(:disabled) {
   outline: 2px solid var(--accent);
   outline-offset: 2px;
 }
+}
 
 /* ---- ./modal.css ---- */
+@layer components {
 /* modal --------------------------------------------------------------- */
 
 /* `hidden` needs saying out loud here. The browser's own `[hidden]` rule is a
@@ -3442,8 +3476,10 @@ input[type='radio']:active:not(:disabled) {
   .modal.sheet[data-entering],
   .modal.sheet[data-exiting] { animation: none; }
 }
+}
 
 /* ---- ./slider.css ---- */
+@layer components {
 /* slider ----------------------------------------------------------------- */
 /* A number from a range -- `Slider.tsx` says when one is the right control.
    The row is laid out like a switch row: words on the left, the control on the
@@ -3665,8 +3701,10 @@ input[type='range'].slider:disabled::-moz-range-thumb { opacity: 0; }
    the scale, and the two line up; an explicit `size-*` still wins. */
 :where(.set-row) button,
 :where(.set-row) .slider-box { font-size: var(--text-xs); }
+}
 
 /* ---- ./checkbox.css ---- */
+@layer components {
 /* A row you choose. There is no checkbox in it.
    Every one of the fourteen in this app sits beside a name and a line of
    explanation, so the row was always the thing being designed and the 17px
@@ -3836,8 +3874,10 @@ input[type='range'].slider:disabled::-moz-range-thumb { opacity: 0; }
 .choice[data-disabled] .choice-why { opacity: 0.5; }
 
 .choice[data-disabled]::after { opacity: 0.4; }
+}
 
 /* ---- ./table.css ---- */
+@layer components {
 /* A second line under a row's name, inside the `<th scope="row">` that makes it
    one. The cell is bold because it is a heading; what hangs under it is not,
    and inherited the weight -- so a pinned version read as loud as the thing it
@@ -3885,27 +3925,48 @@ input[type='range'].slider:disabled::-moz-range-thumb { opacity: 0; }
 .data-table .num { text-align: right; font-variant-numeric: tabular-nums; font-family: var(--font-mono); }
 
 .data-table thead th[style*='right'] { text-align: right; }
+}
 
 /* ---- ./sizegrid.css ---- */
-/* What is left of the size grid once it draws itself.
+@layer components {
+/* The cell's colour, all of it, in one place.
+ *
+ * `SizeGrid` draws the cell's geometry with utilities and leaves every colour
+ * here, because `on` and `chosen` override the resting state -- and a utility
+ * is in `@layer utilities`, which beats `@layer components` whatever the
+ * selector. Stated as `surface-panel-2` and `border-border` on the element,
+ * the resting state won permanently and no cell ever lit up.
  *
- * `on` follows the pointer; `chosen` is what is actually saved, shown only
- * when nothing is hovered so the two can never contradict each other.
- * `chosen` is a border colour and says so at the call site; `on` is a fill
- * mixed from the accent, and `color-mix` in an arbitrary value is less
- * readable than the rule it replaces. */
+ * That is the third time this pattern has bitten: `Select`'s tick and
+ * `Empty`'s figure were the other two. The rule: a resting state whose
+ * active state is a CSS rule has to be a CSS rule too. */
+.size-cell {
+  border: var(--border-width) solid var(--border);
+  background: var(--panel-2);
+}
+
+/* `on` follows the pointer; `chosen` is what is actually saved, shown only
+   when nothing is hovered so the two can never contradict each other. */
 .size-cell.on {
   border-color: var(--accent);
   background: color-mix(in srgb, var(--accent) 45%, transparent);
 }
 
+.size-cell.chosen { border-color: var(--accent); }
+}
+
 /* ---- ./tooltip.css ---- */
+@layer components {
 /* A callout: something worth knowing, with nothing to answer. Distinct from a
    `?`, which is an offer to read more, and from a banner, which is a problem.
    The mark is a round `i` rather than an emoji so it takes the theme's colours
    and stays the same size as the text beside it. */
-/* An info-toned `.callout`, spelled the old way. Identical to it now rather than
-   nearly identical to it, which is the whole point of the consolidation: the
+/* An info-toned `.callout`, spelled the old way. Identical to it now rather
+   than nearly identical to it, which is the whole point of the consolidation.
+   (This comment has been unterminated since before the Tailwind branch -- it
+   stops mid-sentence and never closes, so the CSS parser merged it with the
+   one below and recovered. Nothing was lost from the stylesheet; the rest of
+   the sentence was. Closed here rather than guessed at.) */
 
 /* What is left once `Tooltip` draws its own mark: the hover and focus that
    reach the mark from its parent, and the tip -- whose closed and open
@@ -3988,8 +4049,10 @@ input[type='range'].slider:disabled::-moz-range-thumb { opacity: 0; }
 }
 
 .explain-tip strong { color: var(--text); font-weight: 600; }
+}
 
 /* ---- ./illustration.css ---- */
+@layer components {
 /* illustrations -------------------------------------------------------- */
 
 /* Open Peeps, two colours, wearing whatever the theme is.
@@ -4027,8 +4090,10 @@ input[type='range'].slider:disabled::-moz-range-thumb { opacity: 0; }
  * original rule already carried a note about needing two classes to beat
  * `.illo`; layers make that impossible rather than merely fiddly. */
 .nothing-figure { color: var(--muted); }
+}
 
 /* ---- ./field.css ---- */
+@layer components {
 /* fields --------------------------------------------------------------- */
 
 /* Label, description, input, error -- in the order they are wanted. The
@@ -4203,8 +4268,10 @@ input[type='range'].slider:disabled::-moz-range-thumb { opacity: 0; }
   background: var(--panel-2);
   color: var(--text);
 }
+}
 
 /* ---- ./tour.css ---- */
+@layer components {
 /* tour ----------------------------------------------------------------- */
 
 /* The layer sits over everything and catches nothing: the scrim is painted by
@@ -4266,12 +4333,14 @@ input[type='range'].slider:disabled::-moz-range-thumb { opacity: 0; }
 .tour-actions { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-2); }
 
 .tour-count { color: var(--muted); font-size: var(--text-xs); }
+}
 
 /* The mail and forum shell, added in 0.4.0. After the rest, because the
    anchored surfaces (`.pop`, `.menu-sheet`, `.cmd`) sit over everything and a
    rule of equal specificity that came earlier would lose to whatever the
    sheets they cover happen to set. */
 /* ---- ./stat.css ---- */
+@layer components {
 /* What the utilities on `Stat` cannot say: a tone on the tile colouring the
    figure inside it. An attribute on the parent selecting a child is a
    relationship; a utility is a property on one element.
@@ -4282,8 +4351,10 @@ input[type='range'].slider:disabled::-moz-range-thumb { opacity: 0; }
 .stat[data-tone='good'] .stat-value { color: var(--good); }
 .stat[data-tone='warn'] .stat-value { color: var(--warn); }
 .stat[data-tone='bad'] .stat-value { color: var(--bad); }
+}
 
 /* ---- ./shell.css ---- */
+@layer components {
 /* The measure, and only the measure.
  *
  * `Shell` draws itself with utilities -- it is layout and nothing else. What
@@ -4310,8 +4381,10 @@ input[type='range'].slider:disabled::-moz-range-thumb { opacity: 0; }
   font-size: var(--text-sm);
   white-space: nowrap;
 }
+}
 
 /* ---- ./scrollarea.css ---- */
+@layer components {
 /* A box that scrolls, with its edges drawn.
    
    The fades are `::before`/`::after` on the scroller itself, pinned with
@@ -4404,8 +4477,10 @@ input[type='range'].slider:disabled::-moz-range-thumb { opacity: 0; }
   .scroller.faded::before,
   .scroller.faded::after { transition: none; }
 }
+}
 
 /* ---- ./splitpane.css ---- */
+@layer components {
 /* Two panes and the handle between them. */
 .split {
   display: flex;
@@ -4505,8 +4580,10 @@ body.splitting * { cursor: inherit !important; }
 @media (prefers-reduced-motion: reduce) {
   .split-grip { transition: none; }
 }
+}
 
 /* ---- ./popover.css ---- */
+@layer components {
 /* A small surface anchored to what opened it. Same sheet as the select's list,
    because they are the same object -- something that appeared over the page,
    attached to a control. */
@@ -4560,8 +4637,10 @@ body.splitting * { cursor: inherit !important; }
   .pop[data-entering],
   .pop[data-exiting] { animation: none; }
 }
+}
 
 /* ---- ./menu.css ---- */
+@layer components {
 /* What is left once `Menu` draws its sheet and its list: the rows, whose
    `data-focused`, `data-pressed` and danger states React Aria stamps on
    them, and the rules that reach from a row into what it holds. The
@@ -4643,8 +4722,10 @@ body.splitting * { cursor: inherit !important; }
 }
 
 .menu-sheet { box-shadow: var(--shadow-2); }
+}
 
 /* ---- ./command.css ---- */
+@layer components {
 /* The command palette: a field over the app and a list under it. */
 .cmd-scrim {
   position: fixed;
@@ -4786,8 +4867,10 @@ body.splitting * { cursor: inherit !important; }
   .cmd-scrim[data-exiting],
   .cmd[data-entering] { animation: none; }
 }
+}
 
 /* ---- ./pagination.css ---- */
+@layer components {
 /* What is left once `Pagination` draws its own frame: the step and page
    buttons, whose hover, focus-visible and current states are pseudo-classes
    on two selectors at once, and `.pager-count strong`, which reaches into
@@ -4906,8 +4989,10 @@ body.splitting * { cursor: inherit !important; }
   .pager-page,
   .pager-jump { transition: none; }
 }
+}
 
 /* ---- ./identity.css ---- */
+@layer components {
 /* A person, said in one line: initials, name, sometimes the address. */
 .ident {
   display: inline-flex;
@@ -5008,6 +5093,7 @@ body.splitting * { cursor: inherit !important; }
 
 .ident-remove:hover { background: var(--panel); color: var(--text); }
 .ident-remove:focus-visible { outline: none; box-shadow: var(--focus-ring); }
+}
 /* ---- tf: the themes ---- */
 :root[data-theme='night']{--bg:#0f1115;--panel:#161a21;--panel-2:#1c222b;--border:#262d38;--text:#e6e9ef;--muted:#8b94a4;--accent:#5b9dff;--accent-dim:#2a4877;--app-bg:#0f1115;color-scheme:dark}
 :root[data-theme='paper']{--bg:#f6f7f9;--panel:#ffffff;--panel-2:#f0f2f5;--border:#e4e8ec;--border-strong:#8792a1;--text:#191d23;--muted:#5d6773;--accent:#0e7872;--accent-dim:#7fbdb8;--on-accent:#ffffff;--good:#1c7a4a;--warn:#8a6216;--bad:#b3312c;--info:#216bc9;--shadow-1:0 4px 14px rgba(16, 24, 40, 0.08);--shadow-2:0 8px 24px rgba(16, 24, 40, 0.10);--shadow-3:0 12px 32px rgba(16, 24, 40, 0.12);--scrim:rgba(16, 24, 40, 0.32);color-scheme:light}