@wtfalch/design 0.9.1 → 0.10.0

package/dist/tf.css

@@ -315,6 +315,9 @@
   }
 }
 @layer utilities {
+  .pointer-events-none {
+    pointer-events: none;
+  }
   .collapse {
     visibility: collapse;
   }
@@ -347,6 +350,9 @@
   .sticky {
     position: sticky;
   }
+  .inset-0 {
+    inset: 0px;
+  }
   .z-\[60\] {
     z-index: 60;
   }
@@ -380,12 +386,21 @@
   .mt-1 {
     margin-top: var(--spacing-1);
   }
+  .mt-2 {
+    margin-top: var(--spacing-2);
+  }
+  .mt-px {
+    margin-top: 1px;
+  }
   .mb-3 {
     margin-bottom: var(--spacing-3);
   }
   .ml-2 {
     margin-left: var(--spacing-2);
   }
+  .ml-auto {
+    margin-left: auto;
+  }
   .block {
     display: block;
   }
@@ -410,6 +425,9 @@
   .table {
     display: table;
   }
+  .h-4 {
+    height: var(--spacing-4);
+  }
   .h-\[14px\] {
     height: 14px;
   }
@@ -428,6 +446,9 @@
   .min-h-screen {
     min-height: 100vh;
   }
+  .w-4 {
+    width: var(--spacing-4);
+  }
   .w-\[18px\] {
     width: 18px;
   }
@@ -455,6 +476,18 @@
   .flex-1 {
     flex: 1;
   }
+  .flex-\[0_0_var\(--split\)\] {
+    flex: 0 0 var(--split);
+  }
+  .flex-\[1_1_0\] {
+    flex: 1 1 0;
+  }
+  .flex-\[1_1_260px\] {
+    flex: 1 1 260px;
+  }
+  .flex-\[1_1_auto\] {
+    flex: 1 1 auto;
+  }
   .flex-none {
     flex: none;
   }
@@ -485,6 +518,9 @@
   .flex-wrap {
     flex-wrap: wrap;
   }
+  .place-items-center {
+    place-items: center;
+  }
   .items-baseline {
     align-items: baseline;
   }
@@ -518,6 +554,9 @@
   .gap-\[var\(--border-width\)\] {
     gap: var(--border-width);
   }
+  .gap-px {
+    gap: 1px;
+  }
   .self-center {
     align-self: center;
   }
@@ -580,9 +619,15 @@
   .p-2 {
     padding: var(--spacing-2);
   }
+  .p-3 {
+    padding: var(--spacing-3);
+  }
   .p-4 {
     padding: var(--spacing-4);
   }
+  .px-2 {
+    padding-inline: var(--spacing-2);
+  }
   .px-4 {
     padding-inline: var(--spacing-4);
   }
@@ -601,6 +646,12 @@
   .py-10 {
     padding-block: var(--spacing-10);
   }
+  .pt-2 {
+    padding-top: var(--spacing-2);
+  }
+  .pb-1 {
+    padding-bottom: var(--spacing-1);
+  }
   .pb-2 {
     padding-bottom: var(--spacing-2);
   }
@@ -616,6 +667,9 @@
   .text-2xs {
     font-size: var(--text-2xs);
   }
+  .text-base {
+    font-size: var(--text-base);
+  }
   .text-lg {
     font-size: var(--text-lg);
   }
@@ -637,6 +691,10 @@
     --tw-leading: 1.25;
     line-height: 1.25;
   }
+  .leading-\[1\.35\] {
+    --tw-leading: 1.35;
+    line-height: 1.35;
+  }
   .leading-\[16px\] {
     --tw-leading: 16px;
     line-height: 16px;
@@ -681,6 +739,9 @@
   .opacity-60 {
     opacity: 60%;
   }
+  .opacity-90 {
+    opacity: 90%;
+  }
   .opacity-\[0\.55\] {
     opacity: 0.55;
   }
@@ -1719,23 +1780,6 @@ input:active, textarea:active, select:active { transform: none; }
    template are allowed to diverge, and this is only saying that they have. */
 .set-hint.drifted { color: var(--warn); }
 
-/* What an applet drew, read back. A tree rather than prose, so it is left as
-   preformatted text and given a ceiling -- a busy applet is a hundred lines and
-   this sits inside a settings pane. */
-.drawn {
-  margin: var(--space-2) 0 0;
-  padding: var(--space-2) var(--space-2);
-  max-height: 220px;
-  overflow: auto;
-  font-size: var(--text-xs);
-  line-height: 1.45;
-  white-space: pre-wrap;
-  overflow-wrap: anywhere;
-  border: 1px solid var(--border);
-  border-radius: var(--radius);
-  background: var(--panel-2);
-}
-
 /* One applet, alone on the page, at `/applet/<id>`. Fills the window: there is
    no grid here to decide a height, and a screenshot of an applet letterboxed
    inside a page is mostly not the applet. */
@@ -1782,11 +1826,6 @@ input:active, textarea:active, select:active { transform: none; }
    that belongs to a conversation lives here any more, so it can breathe. */
 .topbar .ctl-grow { flex: 1; min-width: 0; }
 
-/* Back on the left, Next on the right, with the gap between them doing the
-   separating -- so the button that goes forward is in the same place on both
-   pages instead of sliding when Back appears. */
-.first-run-actions { align-items: center; }
-
 @keyframes listening-pulse { 0%, 100% { opacity: 1 } 50% { opacity: .35 } }
 
 /* table ---------------------------------------------------------------- */
@@ -2127,8 +2166,6 @@ input:active, textarea:active, select:active { transform: none; }
   border-radius: 4px;
 }
 
-.danger-unavailable { margin-top: var(--space-2); opacity: 0.85; }
-
 /* Label beside the control, for a settings pane: a column of names on the left
    and their controls on the right reads as a list of what is set, where the
    same rows stacked read as a form waiting to be filled in. The description
@@ -2206,8 +2243,6 @@ input:active, textarea:active, select:active { transform: none; }
 /* A callout that leaves on its own.
    Room at the bottom for the bar, and `position: relative` so the bar can sit
    on the border rather than inside the text. */
-.callout-timed { position: relative; padding-bottom: var(--space-5); overflow: hidden; }
-
 /* The countdown. Drawn as a shrinking bar rather than a number: nobody wants to
    read a clock, they want to know whether they have time. Animated width rather
    than a transition, so it starts the moment it is painted. */
@@ -2268,14 +2303,6 @@ input:active, textarea:active, select:active { transform: none; }
    is the operating system's font drawing a glyph beside an app that has an icon
    set for exactly this. The ring went with it: a circle around a warning
    triangle is two shapes saying one thing. */
-.callout-mark {
-  flex: none;
-  display: grid;
-  place-items: center;
-  margin-top: 1px;
-  opacity: 0.9;
-}
-
 /* Held-back history when a local conversation would cross to a hosted model.
    Deliberately loud: the cost of missing it is uploading work that was kept
    local on purpose. */
@@ -2291,6 +2318,19 @@ input:active, textarea:active, select:active { transform: none; }
 }
 
 .callout button { flex: none; }
+/* A state, so it stays a class.
+ *
+ * `Callout` applies this as `running ? ' callout-timed' : ''` inside a
+ * template literal -- which is not a class list a rewrite can read, and the
+ * first pass at converting it deleted the rule while leaving the usage. The
+ * box lost five spacing steps of padding and the countdown bar had nothing
+ * to sit in. A class that appears only inside a conditional is a state; the
+ * sheet is where those belong. */
+.callout-timed {
+  position: relative;
+  padding-bottom: var(--space-5);
+  overflow: hidden;
+}
 }
 
 /* ---- ./card.css ---- */
@@ -2349,16 +2389,6 @@ input:active, textarea:active, select:active { transform: none; }
    which reads as a different column of content. */
 .card:has(.card-icon) .card-inline { padding-left: calc(var(--card-icon) + var(--space-3)); }
 
-/* Its own line, above the sentence it introduces. */
-.card-inline-label {
-  display: block;
-  font-size: var(--text-xs);
-  text-transform: uppercase;
-  letter-spacing: 0.04em;
-  color: var(--muted);
-  margin-bottom: 2px;
-}
-
 .card-title { display: block; font-size: var(--text-base); }
 
 .card-desc { margin-top: var(--space-1); color: var(--muted); font-size: var(--text-sm); line-height: 1.5; }
@@ -2496,12 +2526,8 @@ input:active, textarea:active, select:active { transform: none; }
    tooltip ended up orphaned under it. */
 .set-row > .switch-row { flex: 1; min-width: 0; padding-block: 0; }
 
-.switch-label { color: var(--text); }
-
 .switch-hint { font-size: var(--text-sm); color: var(--muted); }
 
-.switch-said { flex: none; font-size: var(--text-xs); color: var(--muted); }
-
 /* Three sizes, the same names every other control uses. The switch scales with
    the row: a 30x18 track beside 12px text is a different control from the same
    track beside 16px text. */
@@ -2674,17 +2700,6 @@ input[type='radio']:active:not(:disabled) {
 
 /* ---- ./skeleton.css ---- */
 @layer components {
-.muted { color: var(--muted); }
-
-.pulse-block {
-  display: inline-block;
-  height: 8px;
-  border-radius: var(--radius-sm);
-  background: var(--muted);
-  animation: ds-pulse 1.4s ease-in-out infinite;
-  vertical-align: middle;
-}
-
 /* skeletons ------------------------------------------------------------ */
 
 /* Ink at low alpha, not a named surface.
@@ -2943,8 +2958,6 @@ input[type='radio']:active:not(:disabled) {
 
 .rows-split:first-of-type { margin-top: var(--space-2); }
 
-.rows-empty { padding: var(--space-3) 0; }
-
 /* The name, the pills and the line underneath. `min-width: 0` is the whole
    reason this is a class: a flex item will not shrink below its content, so
    without it the name pushes the pills off the end -- and the pills are the
@@ -2961,8 +2974,6 @@ input[type='radio']:active:not(:disabled) {
 
 /* The aligned column. `margin-left: auto` rather than a grid, because the rows
    are flex and a size that varies by two characters does not need a track. */
-.row-trail { flex: none; margin-left: auto; white-space: nowrap; }
-
 .rows-row.rows-top { align-items: flex-start; }
 
 .rows-row.rows-bad .truncate { color: var(--bad); }
@@ -3108,14 +3119,6 @@ input[type='radio']:active:not(:disabled) {
 
 .tabs-vertical .tab.on .tab-label { color: var(--accent); }
 
-.tab-hint {
-  display: block;
-  margin-top: 1px;
-  font-size: var(--text-xs);
-  color: var(--muted);
-  line-height: 1.35;
-}
-
 /* A heading above a run of tabs. Set apart from the run above by space, not
    a rule -- the rail already has one edge -- and the tabs under it step in
    by the label's own padding so the label reads as theirs. */
@@ -3126,8 +3129,6 @@ input[type='radio']:active:not(:disabled) {
 
 .tabs-vertical .tab-group:first-child { padding-top: var(--space-2); }
 
-.tab-group-label { display: block; font-size: var(--text-sm); font-weight: 600; color: var(--text); }
-
 .tabs-vertical .tab.in-group { padding-left: var(--space-5); }
 
 /* No line under a vertical strip -- its edge is the border on the right. */
@@ -3337,8 +3338,6 @@ input[type='radio']:active:not(:disabled) {
    `<strong>` rule above is the one that sets the size. */
 /* Under the title, on the header's padding rather than the body's, so it reads
    as part of the heading rather than as the first line of content. */
-.modal-desc { line-height: 1.5; }
-
 .modal-body { padding: var(--space-2) var(--space-4) var(--space-3); overflow-y: auto; }
 
 /* The close cross. Its rule stayed behind in tf's stylesheet when the split
@@ -3506,12 +3505,8 @@ input[type='radio']:active:not(:disabled) {
 
 .slider-row.is-disabled { opacity: 0.55; }
 
-.slider-body { flex: 1 1 260px; min-width: 0; display: grid; gap: 1px; }
-
 .set-row > .slider-row { flex: 1; min-width: 0; padding-block: 0; }
 
-.slider-label { color: var(--text); }
-
 .slider-hint { font-size: var(--text-sm); color: var(--muted); }
 
 /* The box, with the value printed inside it at the right where a select
@@ -3737,8 +3732,6 @@ input[type='range'].slider:disabled::-moz-range-thumb { opacity: 0; }
 /* A run of checkboxes is one choice, not several settings that happen to be
    adjacent. Tight enough that the group reads as a block -- at the spacing a
    form field wants, four tools look like four unrelated questions. */
-.choice-group { display: grid; gap: var(--space-1); }
-
 /* The same choice, laid out as tiles instead of a column.
    
    Four short names down the full width of a card is four wide bands for four
@@ -3862,8 +3855,6 @@ input[type='range'].slider:disabled::-moz-range-thumb { opacity: 0; }
    second line is what the first line is actually asking for. */
 .choice-why { display: block; color: var(--muted); font-size: var(--text-sm); margin-top: 1px; }
 
-.choice-meta { color: var(--muted); font-size: var(--text-xs); font-family: var(--font-mono); }
-
 .choice[data-disabled] {
   cursor: not-allowed;
   border-color: var(--border);
@@ -4060,8 +4051,9 @@ input[type='range'].slider:disabled::-moz-range-thumb { opacity: 0; }
    reason they can live in an app with four palettes: `ink` becomes the current
    text colour and `paper` becomes the surface behind it, so one file covers
    Night, Paper and both halves of System. Give the wrapper a `color` and
-   the figure follows it -- `.muted` for a quiet empty state, `--accent` for the
-   one thing on screen worth looking at. */
+   the figure follows it: `--muted` for a quiet empty state, `--accent` for the
+   one thing on screen worth looking at. Set that colour on the wrapper --
+   `Empty` reaches for `text-muted`, and any token works. */
 .illo {
   display: inline-block;
   /* Height is the given dimension and the width comes from the drawing, so a
@@ -4078,18 +4070,6 @@ input[type='range'].slider:disabled::-moz-range-thumb { opacity: 0; }
    caller says otherwise. Not `transparent`: these have overlapping shapes, and
    a shirt that lets the arm behind it show through reads as a hole. */
 .illo .paper { fill: var(--illo-paper); }
-
-/* The figure in a whole-surface `Empty`, drawn in the muted grey of the
-   sentence under it.
- *
- * A utility cannot do this, and the reason is worth keeping: `.illo` sets
- * `color: inherit` and is unlayered, while every Tailwind utility lives in
- * `@layer utilities` -- and an unlayered declaration beats a layered one
- * whatever the specificity. So `text-muted` on the figure lost, silently,
- * and the shirt came out full text black beside a muted sentence. The
- * 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 ---- */
@@ -4101,7 +4081,9 @@ input[type='range'].slider:disabled::-moz-range-thumb { opacity: 0; }
    to what was typed, so it goes after. */
 .field { display: grid; gap: var(--space-1); }
 
-.field-stack-layout { /* the default: label, description, control, error */ }
+/* `.field-stack-layout` carries no rules: stacking is what `.field` already
+   does, and the class is emitted only so that both layouts name themselves
+   the same way (`field-${layout}-layout`). Only the row layout overrides. */
 
 .field-row-layout > .field-label { grid-column: 1; }
 
@@ -4122,8 +4104,6 @@ input[type='range'].slider:disabled::-moz-range-thumb { opacity: 0; }
 
 /* Not red. The asterisk marks which fields are required; colouring it the same
    as a failure says something has already gone wrong with every one of them. */
-.field-required { color: var(--muted); }
-
 .field-hint,
 .field-error { margin: 0; font-size: var(--text-sm); line-height: 1.45; }
 
@@ -4145,8 +4125,6 @@ input[type='range'].slider:disabled::-moz-range-thumb { opacity: 0; }
 /* Fields stacked down a form. Wider than the gap inside one field, so the
    label of the next belongs to the input under it rather than to the error
    above it. */
-.field-stack { display: grid; gap: var(--space-4); }
-
 .field-row > .field { flex: 1; min-width: 0; }
 
 /* A password with an eye -- `Input type="password"`.
@@ -4274,10 +4252,6 @@ input[type='range'].slider:disabled::-moz-range-thumb { opacity: 0; }
 @layer components {
 /* tour ----------------------------------------------------------------- */
 
-/* The layer sits over everything and catches nothing: the scrim is painted by
-   the hole's shadow, so there is no full-screen element to swallow a click. */
-.tour { position: fixed; inset: 0; z-index: 60; pointer-events: none; }
-
 /* The control the tour is currently pointing at.
    
    Much of this chrome is invisible until you touch it -- `.view-add` lives at
@@ -4288,11 +4262,14 @@ input[type='range'].slider:disabled::-moz-range-thumb { opacity: 0; }
    what every control does at rest, and the alternative is naming each one here
    and watching that list drift from the rules that hide them. One declaration
    that outranks whatever the resting state is beats an enumeration that goes
-   stale. It is scoped to a class only ever present on one element at a time. */
-.tour-target {
-  opacity: 1 !important;
-  color: var(--text) !important;
-}
+   stale. It is scoped to a class only ever present on one element at a time.
+
+   Opacity and nothing else. This forced `color: var(--text)` too, from the
+   original port, with no case on record that needed it -- and it broke the
+   first target that painted its own background, turning a primary button's
+   label dark on accent at 2.2:1. The spotlight makes a control visible; what
+   colour it is at rest is the control's business. */
+.tour-target { opacity: 1 !important; }
 
 /* The spotlight. An enormous spread shadow dims the whole window except the
    rectangle it is drawn on, which needs no clip path and no arithmetic. */
@@ -4326,8 +4303,6 @@ input[type='range'].slider:disabled::-moz-range-thumb { opacity: 0; }
 
 .tour-card:focus { outline: none; }
 
-.tour-title { font-size: var(--text-base); }
-
 .tour-body { margin: 0; color: var(--muted); font-size: var(--text-sm); line-height: 1.5; }
 
 .tour-actions { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-2); }
@@ -4499,17 +4474,6 @@ input[type='range'].slider:disabled::-moz-range-thumb { opacity: 0; }
    the intrinsic width of a mail list is the longest unbroken subject line in
    it. Without this the handle stops partway across and nothing on screen says
    why -- it just refuses, differently for every mailbox. */
-.split-pane {
-  min-width: 0;
-  min-height: 0;
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
-}
-
-.split-first { flex: 0 0 var(--split); }
-.split-second { flex: 1 1 0; }
-
 /* The handle is wider than it looks: a hairline is a correct-looking divider
    and an impossible pointer target. The grip is the line, drawn at
    `--border-width` down the middle of a `--space-3` strip, and the strip is
@@ -4606,13 +4570,6 @@ body.splitting * { cursor: inherit !important; }
   z-index: 60;
 }
 
-.pop-body {
-  padding: var(--space-3);
-  outline: none;
-  color: var(--text);
-  font-size: var(--text-sm);
-}
-
 /* Entry, and the direction it comes from. `data-placement` is React Aria's,
    set to where the surface actually went rather than where it was asked to go,
    so the movement agrees with the flip. */
@@ -4673,8 +4630,6 @@ body.splitting * { cursor: inherit !important; }
 .menu-icon { flex: none; width: var(--space-4); height: var(--space-4); color: var(--muted); }
 .menu-item[data-focused] .menu-icon { color: var(--text); }
 
-.menu-text { flex: 1 1 auto; min-width: 0; display: grid; }
-.menu-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .menu-desc {
   font-size: var(--text-xs);
   color: var(--muted);
@@ -4753,18 +4708,6 @@ body.splitting * { cursor: inherit !important; }
   flex-direction: column;
 }
 
-.cmd-body { outline: none; display: flex; flex-direction: column; min-height: 0; }
-
-.cmd-field {
-  display: flex;
-  align-items: center;
-  gap: var(--space-2);
-  padding: var(--space-3) var(--space-4);
-  border-bottom: var(--border-width) solid var(--border);
-}
-
-.cmd-mark { flex: none; width: var(--space-4); height: var(--space-4); color: var(--muted); }
-
 /* No border, no focus ring on the input itself: the whole surface is the
    field, focus is already in it when it opens, and a ring around a box that
    fills the top of the palette is a ring around the palette. */
@@ -4781,22 +4724,6 @@ body.splitting * { cursor: inherit !important; }
 
 .cmd-input::placeholder { color: var(--muted); }
 
-.cmd-list {
-  padding: var(--space-2);
-  overflow: auto;
-  overscroll-behavior: contain;
-  outline: none;
-  min-height: 0;
-}
-
-.cmd-group-title {
-  padding: var(--space-2) var(--space-2) var(--space-1);
-  font-size: var(--text-2xs);
-  text-transform: uppercase;
-  letter-spacing: var(--tracking);
-  color: var(--muted);
-}
-
 .cmd-item {
   display: flex;
   align-items: center;
@@ -4832,8 +4759,6 @@ body.splitting * { cursor: inherit !important; }
 .cmd-icon { flex: none; width: var(--space-4); height: var(--space-4); color: var(--muted); }
 .cmd-item[data-focused] .cmd-icon { color: var(--text); }
 
-.cmd-text { flex: 1 1 auto; min-width: 0; display: grid; }
-.cmd-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .cmd-desc {
   font-size: var(--text-xs);
   color: var(--muted);
@@ -5035,25 +4960,6 @@ body.splitting * { cursor: inherit !important; }
   font-size: var(--text-2xs);
 }
 
-.ident-text { display: grid; min-width: 0; }
-
-.ident-name {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  font-weight: var(--weight);
-}
-
-.ident-address {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  font-size: var(--text-xs);
-  color: var(--muted);
-}
-
-.ident-aside { flex: none; color: var(--muted); font-size: var(--text-xs); }
-
 /* A chip in a composer's To field: boxed, tighter, removable. */
 .ident.kind-chip {
   gap: var(--space-1);