@crewlethq/ui 0.4.4 → 0.5.1

package/dist/utils/index.d.ts

@@ -1,6 +1,6 @@
 export { cx } from './cx.js';
 export { useClipboard, writeClipboard } from './useClipboard.js';
 export type { Clipboard, ClipboardOptions, ClipboardState } from './useClipboard.js';
-export type { PhaseTone, Tone } from './tone.js';
+export type { Tone } from './tone.js';
 export { HeadingLevelProvider, headingTag, nextHeadingLevel, useHeadingLevel } from './headingLevel.js';
 export type { HeadingLevel, HeadingLevelProviderProps } from './headingLevel.js';

package/dist/utils/tone.d.ts

@@ -1,5 +1,5 @@
 /**
- * The two colour vocabularies a component is allowed to take as a prop.
+ * The one colour vocabulary a component is allowed to take as a prop.
  *
  * ONE SPELLING. The package shipped `warn` in Tag and Toaster and `warning` in
  * StatCard and Callout, and `danger` beside `error`, so the same state had two
@@ -10,16 +10,11 @@
  * info are states, `brand` is where the reader is, and everything else is
  * neutral. Identity (a seat, a node, a vendor, a tool) takes neutral colour and
  * is carried by its name, its glyph and its position.
- */
-export type Tone = 'neutral' | 'info' | 'success' | 'warning' | 'danger' | 'brand';
-/**
- * The phase vocabulary, and nothing else.
  *
- * Three phases, because that is the whole of the engine's phase model. A
- * per-model or per-worker breakdown is a CHART SERIES SET and takes the data
- * ramp (`--color-data-1` and the rest) inside a legend, not this family: a
- * reader compares phase marks against each other, so the three are separated
- * from one another and from every status hue, which a growing set of series
- * could not be.
+ * So does a CATEGORY. A phase, a unit or a model is neutral with its word, and
+ * inside a figure it is a series its legend names, from the data ramp the
+ * application maps it onto. There used to be a second vocabulary here, three
+ * phase hues, and it spent three of the hues the states and the series are held
+ * apart in on a word the label already said.
  */
-export type PhaseTone = 'phase-onboarding' | 'phase-execute' | 'phase-review';
+export type Tone = 'neutral' | 'info' | 'success' | 'warning' | 'danger' | 'brand';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crewlethq/ui",
-  "version": "0.4.4",
+  "version": "0.5.1",
   "description": "Crewlet shared React components built on @crewlethq/tokens and @crewlethq/icons.",
   "license": "MIT",
   "repository": {
@@ -37,13 +37,13 @@
   "scripts": {
     "build": "node scripts/write-barrel.mjs && tsup && tsc -p tsconfig.build.json && node scripts/bundle-css.mjs",
     "dev": "node scripts/write-barrel.mjs && tsup --watch --onSuccess \"node scripts/bundle-css.mjs\"",
-    "lint": "node scripts/write-barrel.mjs && eslint src scripts && node scripts/check-css-variables.mjs && node scripts/check-css-literals.mjs src/Avatar src/Layer src/Listbox src/Announcer src/Modal src/Tooltip src/CommandPalette src/VisuallyHidden src/utils src/Count src/StatusDot src/EmptyValue src/Button src/IconButton src/Popover src/Menu src/DataView src/DataTable src/Input src/Tag src/TagGroup src/FilterChip src/EntityChip src/Callout src/Toaster src/Skeleton src/EmptyState src/Meter src/StatCard src/StatGroup src/NewItemsNotice src/PricingCard src/ImageUpload src/Tabs src/SegmentedControl src/PageHeader src/Card src/Section src/Charts src/Layout src/Canvas src/Tree src/TreeCanvas src/TreeGrid src/OrgNode src/OrgLabel src/AddPill src/OrgTable",
+    "lint": "node scripts/write-barrel.mjs && eslint src scripts && node scripts/check-css-variables.mjs && node scripts/check-css-literals.mjs src",
     "typecheck": "node scripts/write-barrel.mjs && tsc -p tsconfig.json --noEmit",
     "clean": "rm -rf dist src/generated"
   },
   "dependencies": {
-    "@crewlethq/icons": "0.4.4",
-    "@crewlethq/tokens": "0.4.4"
+    "@crewlethq/icons": "0.5.1",
+    "@crewlethq/tokens": "0.5.1"
   },
   "peerDependencies": {
     "react": ">=18",

package/scripts/check-css-literals.mjs

@@ -1,17 +1,11 @@
 #!/usr/bin/env node
 // Refuses a value a component should have taken from a token, over the folders
-// it is given.
+// it is given. The package's own lint runs it over all of src/, so every
+// component keeps these rules at every commit.
 //
-// WHY IT TAKES FOLDERS. Its sibling, check-css-variables.mjs, runs over the
-// whole package and holds rules no component may break at any point. This one
-// holds the rules a folder OPTS INTO as it is rewritten onto the token layer,
-// so a component that has not been rewritten yet does not have to be
-// allow-listed to keep the build green. The list of folders in the package's
-// lint script is the record of which are done; when the last one lands, the
-// list becomes `src` and this paragraph goes with it.
-//
-// It is also the published bin, `crewlet-css-check`, so a consumer can hold
-// its own stylesheets to the same rules.
+// WHY IT TAKES FOLDERS. It is also the published bin, `crewlet-css-check`, so
+// a consumer can hold its own stylesheets to the same rules, and a consumer's
+// stylesheets live wherever its build puts them.
 //
 // THE RULES.
 //
@@ -25,9 +19,27 @@
 //     off the scale is a component that drifts from the one beside it.
 //  3. No color-mix(). Mixing two tokens produces a third colour nobody
 //     measured, which is how a "warning text" step ended up at 4.41:1.
-//  4. An animation or a transition is paired with a reduced-motion rule IN THE
-//     SAME FILE. The document baseline collapses motion too, but a component
-//     is also used in an application that does not import the baseline.
+//  4. EVERY MOTION IS PAIRED WITH ITS STOP. A rule that starts an animation or
+//     a transition is named again, selector for selector, by a later rule in
+//     the same file inside `@media (prefers-reduced-motion: reduce)` that sets
+//     it to `none` (or takes the element out with `display: none`), unless it
+//     only starts inside `@media (prefers-reduced-motion: no-preference)`.
+//     The document baseline collapses motion too, but a component is also
+//     used in an application that does not import the baseline.
+//     THE SAME SELECTOR, LATER, because that is the one arrangement the
+//     cascade guarantees: the two tie on specificity and the stop wins on
+//     source order. The rule was "the file mentions prefers-reduced-motion",
+//     and three components passed it while still moving for a reader who had
+//     asked them not to. DataTable stopped everything under a catch-all,
+//     `.crewlet-data-table.crewlet-data-table *`, which is two classes, and
+//     its row's transition was two classes and two elements. TreeCanvas
+//     stopped `.crewlet-tree-canvas__card--composing`, one class, where the
+//     ghost's arrival started on two. And TreeCanvas stopped its node
+//     controls ABOVE the rules that started them, so source order handed
+//     every tie back to the motion. A stop that looks broader is not one the
+//     check can verify, and all three of those looked right. LATER is where
+//     a browser places it: declarations written after a block nested in their
+//     rule come after that block, so a motion below a nested stop beats it.
 //  5. A media query's length is one of the breakpoint tokens. A media query
 //     cannot read a custom property, so the number has to be written out; this
 //     is what says it is still the same number.
@@ -53,6 +65,17 @@ const LENGTH_IN_QUERY = /(\d*\.?\d+)px/g;
 const COLOUR_PROPERTY =
   /^(color|background|background-color|border(-(top|right|bottom|left))?-color|border|border-(top|right|bottom|left)|outline|outline-color|fill|stroke|box-shadow|text-shadow|caret-color|column-rule-color|text-decoration-color|accent-color|scrollbar-color|--crewlet-[\w-]*)$/;
 
+/** The declarations that start a motion, and the one each belongs to. */
+const MOTION = new Map([
+  ['animation', 'animation'],
+  ['animation-name', 'animation'],
+  ['transition', 'transition'],
+  ['transition-property', 'transition'],
+]);
+
+/** The one query a stop is read inside: exactly this, with nothing else around it. */
+const REDUCE = /^@media\s*\(\s*prefers-reduced-motion\s*:\s*reduce\s*\)$/;
+
 function declarations(body) {
   const found = [];
   for (const part of body.split(';')) {
@@ -75,6 +98,123 @@ function withoutTokens(value) {
   return text;
 }
 
+/**
+ * One selector, spelled one way: whitespace collapsed, none round a combinator,
+ * and one kind of quote. Two spellings of one selector are one selector here,
+ * so a stop is never refused for its layout.
+ */
+function normalSelector(selector) {
+  return selector
+    .replace(/\s+/g, ' ')
+    .replace(/\s*([>+~])\s*/g, '$1')
+    .replace(/"/g, "'")
+    .trim();
+}
+
+/** A selector list split at its own commas, not the ones inside `:not(…)` or `[…]`. */
+function selectorList(list) {
+  const parts = [];
+  let depth = 0;
+  let from = 0;
+  for (let at = 0; at < list.length; at += 1) {
+    const char = list[at];
+    if (char === '(' || char === '[') depth += 1;
+    else if (char === ')' || char === ']') depth -= 1;
+    else if (char === ',' && depth === 0) {
+      parts.push(list.slice(from, at));
+      from = at + 1;
+    }
+  }
+  parts.push(list.slice(from));
+  return parts;
+}
+
+/**
+ * The selectors a block's own declarations apply to, with any nesting
+ * resolved, or null for a block that declares for no element: a top-level
+ * at-rule, or a keyframe.
+ */
+function appliesTo(block) {
+  let list = null;
+  for (const head of [...block.context, block.selector]) {
+    if (/^@keyframes\b/.test(head)) return null;
+    if (head.startsWith('@')) continue;
+    const parts = selectorList(head);
+    list =
+      list === null
+        ? parts
+        : list.flatMap((parent) => parts.map((part) => (part.includes('&') ? part.replaceAll('&', parent) : `${parent} ${part}`)));
+  }
+  return list === null ? null : list.map(normalSelector);
+}
+
+/** The conditional heads a block sits under, its own included when it is one. */
+function conditions(block) {
+  return [...block.context, block.selector].filter((head) => head.startsWith('@')).map((head) => head.replace(/\s+/g, ' '));
+}
+
+/**
+ * Whether a block's declarations reach a browser only when the reader has NOT
+ * asked for less motion. Only a plain conjunction counts: under `not`, `or` or
+ * a comma list the same block also applies to a reader who has.
+ */
+function onlyWithMotion(heads) {
+  return heads.some(
+    (head) =>
+      /^@media\b/.test(head) && /\(\s*prefers-reduced-motion\s*:\s*no-preference\s*\)/.test(head) && !/,|\bor\b|\bnot\b/.test(head),
+  );
+}
+
+/**
+ * Rule 4: every rule that starts a motion, answered selector for selector by a
+ * later stop in the same file. Returns the findings.
+ */
+function unpairedMotion(file) {
+  const starts = [];
+  const stops = [];
+  for (const block of rules(file.text)) {
+    const selectors = appliesTo(block);
+    if (selectors === null) continue;
+    const heads = conditions(block);
+    const reduced = heads.some((head) => /prefers-reduced-motion\s*:\s*reduce/.test(head));
+    const isStop = heads.length === 1 && REDUCE.test(heads[0] ?? '');
+    for (const { property, value } of declarations(block.body)) {
+      const important = /!\s*important\s*$/i.test(value);
+      const bare = value.replace(/!\s*important\s*$/i, '').trim().toLowerCase();
+      if (isStop && property === 'display' && bare === 'none') {
+        for (const family of ['animation', 'transition']) stops.push({ family, selectors, index: block.index, important });
+        continue;
+      }
+      const family = MOTION.get(property);
+      if (family === undefined) continue;
+      if (isStop && bare === 'none') stops.push({ family, selectors, index: block.index, important });
+      // Motion declared for a reader who asked for less is a deliberate
+      // alternative, such as a fade in place of a slide, and motion declared
+      // only for a reader who did not ask needs no stop.
+      if (reduced || onlyWithMotion(heads) || bare === 'none') continue;
+      starts.push({ family, property, selectors, index: block.index, important });
+    }
+  }
+
+  const problems = [];
+  for (const start of starts) {
+    for (const selector of start.selectors) {
+      const stopped = stops.some(
+        (stop) =>
+          stop.family === start.family &&
+          stop.index > start.index &&
+          (stop.important || !start.important) &&
+          stop.selectors.includes(selector),
+      );
+      if (stopped) continue;
+      problems.push(
+        `${file.where}:${lineOf(file.text, start.index)}: ${start.property} on ${selector} has no reduced-motion stop. Name the same selector in a later rule of this file inside @media (prefers-reduced-motion: reduce) and set ${start.family}: none, or start it inside @media (prefers-reduced-motion: no-preference): a stop naming another selector can lose on specificity, and one above the rule it stops loses on source order`,
+      );
+    }
+  }
+  return problems;
+}
+
 /**
  * The breakpoint steps, from the tokens package's own typed export.
  *
@@ -94,13 +234,13 @@ export async function findings(roots, base = packageRoot) {
 
   for (const file of files) {
     const at = (index) => `${file.where}:${lineOf(file.text, index)}`;
-    const hasReducedMotion = file.text.includes('prefers-reduced-motion');
 
-    for (const { selector, body, index } of rules(file.text)) {
+    for (const { selector, body, index, nestedDeclarations } of rules(file.text)) {
       const where = at(index);
-      const inQuery = /@media/.test(selector);
 
-      if (inQuery) {
+      // Declarations resumed after a nested block carry their block's head
+      // again, and the head was read with the block.
+      if (/^@media\b/.test(selector) && !nestedDeclarations) {
         for (const match of selector.matchAll(LENGTH_IN_QUERY)) {
           if (!allowed.has(Number(match[1]))) {
             problems.push(
@@ -142,11 +282,7 @@ export async function findings(roots, base = packageRoot) {
       }
     }
 
-    if (!hasReducedMotion && /(^|[;{\s])(animation|transition)\s*:/.test(file.text)) {
-      problems.push(
-        `${file.where}: animates or transitions with no prefers-reduced-motion rule in the file. The document baseline is opt-in, so a component states its own`,
-      );
-    }
+    problems.push(...unpairedMotion(file));
   }
 
   return { problems, checked: `${files.length} stylesheets in ${roots.length} folder(s)` };

package/scripts/check-css-variables.mjs

@@ -1,9 +1,11 @@
 #!/usr/bin/env node
 // The rules EVERY component in the package keeps, checked over all of src/.
 //
-// Its sibling, check-css-literals.mjs, holds the rules a folder opts into as
-// it is rewritten onto the token layer. These are the ones nothing may break
-// at any point, because each of them fails silently in production:
+// Its sibling, check-css-literals.mjs, holds the rules about VALUES: which
+// colour, size, radius, duration and depth a component may spell out, and how
+// every motion is stopped. These are the rules about which names a stylesheet
+// reads, what it loads and how it draws text and focus, and each of them fails
+// silently in production:
 //
 //   1. A name in a token namespace (--color-*, --font-*, --spacing-* and the
 //      rest of TOKEN_PREFIXES) must be one the @crewlethq/tokens build emits,

package/scripts/css-source.mjs

@@ -46,14 +46,106 @@ export function readSources(roots, base, extensions) {
   return files;
 }
 
-/** Every rule body in a stylesheet, with its selector and its start offset. */
+/**
+ * Every block in a stylesheet, in source order, whatever it is nested in.
+ *
+ * Each is `{ selector, body, index, context, nestedDeclarations }`: the text
+ * before its brace (a selector list, or an at-rule's prelude such as
+ * `@media (width < 1024px)`), the declarations it makes ITSELF before the
+ * first block nested in it, where that text starts, and the heads of the
+ * blocks it sits inside, outermost first. A keyframe's `from` or `50%` is a
+ * block too, with its `@keyframes` in its context.
+ *
+ * NESTING-AWARE, because the regex this replaced, `([^{}]+)\{([^{}]*)\}`, saw
+ * only the innermost blocks. It never saw an at-rule's prelude, so the literal
+ * check's breakpoint rule read not one top-level `@media` query in the package;
+ * it could not say which query a rule sat inside, which is the whole of
+ * pairing a motion with the reduced-motion rule that stops it; and it never
+ * saw the declarations of a rule with a rule nested in it. Its offsets also
+ * started after the previous block's brace, so a finding named the line that
+ * block closed on rather than the line of the selector.
+ *
+ * DECLARATIONS AFTER A NESTED BLOCK ARE AN ENTRY OF THEIR OWN, at their own
+ * offset, with the block's selector and context and `nestedDeclarations: true`,
+ * because that is where a browser puts them: in a nested-declarations rule
+ * that matches what its parent matches, at the parent's specificity, AFTER the
+ * nested block in source order. Folded into the parent at the parent's offset,
+ * an `animation` written below a nested reduced-motion stop read as written
+ * above it, and the pairing check passed a motion that beats its own stop. The
+ * flag lets a check that reads the HEAD rather than the declarations, such as
+ * the breakpoint rule, read each head once.
+ */
 export function rules(text) {
   const found = [];
-  const pattern = /([^{}]+)\{([^{}]*)\}/g;
-  for (const match of text.matchAll(pattern)) {
-    found.push({ selector: match[1].trim(), body: match[2], index: match.index });
+  const open = [];
+  // Where the statement being read began: a declaration, or the head of the
+  // next block, which is everything since the last `;`, `{` or `}`.
+  let statement = 0;
+  let quote = null;
+  /**
+   * A block's own declarations from where they resume to `end`: its body while
+   * nothing is nested in it yet, and an entry of their own once something is,
+   * since a browser places them after that nested block.
+   */
+  const declarationsUntil = (frame, end) => {
+    const declared = text.slice(frame.from, end);
+    if (!frame.nested) {
+      frame.body += declared;
+    } else if (declared.trim() !== '') {
+      found.push({
+        selector: frame.selector,
+        body: declared,
+        index: frame.from + declared.length - declared.trimStart().length,
+        context: frame.context,
+        nestedDeclarations: true,
+      });
+    }
+  };
+  for (let at = 0; at < text.length; at += 1) {
+    const char = text[at];
+    if (quote !== null) {
+      if (char === '\\') at += 1;
+      else if (char === quote) quote = null;
+      continue;
+    }
+    if (char === '"' || char === "'") {
+      quote = char;
+    } else if (char === ';') {
+      statement = at + 1;
+    } else if (char === '{') {
+      const parent = open.at(-1);
+      if (parent) {
+        declarationsUntil(parent, statement);
+        parent.nested = true;
+      }
+      const head = text.slice(statement, at);
+      open.push({
+        selector: head.trim(),
+        index: statement + head.length - head.trimStart().length,
+        context: open.map((each) => each.selector),
+        from: at + 1,
+        body: '',
+        nested: false,
+      });
+      statement = at + 1;
+    } else if (char === '}') {
+      const frame = open.pop();
+      if (frame) {
+        declarationsUntil(frame, at);
+        found.push({
+          selector: frame.selector,
+          body: frame.body,
+          index: frame.index,
+          context: frame.context,
+          nestedDeclarations: false,
+        });
+        const parent = open.at(-1);
+        if (parent) parent.from = at + 1;
+      }
+      statement = at + 1;
+    }
   }
-  return found;
+  return found.sort((a, b) => a.index - b.index);
 }
 
 export function report(name, problems, checked) {

package/dist/Avatar-P2KRQM2B.css

@@ -1,156 +0,0 @@
-/*
- * The identity badge.
- *
- * IT IS NEUTRAL, and that is the whole rule. The system this replaces coloured
- * a seat by `PALETTE[hash(name) % 8]`, over the same eight families it also
- * spent on phases and event categories, so one amber meant "the execute
- * phase", "the decision category" and "the Analyst" at once. A hash of a name
- * carries no information: rename the seat and its colour changes, which is the
- * proof it never meant anything. Identity is the monogram and the name.
- *
- * The seeded tints stay for the one case that earns them, a roster somebody
- * scans, and their grounds are TOKENS: measured under white initials and held
- * at 4.5:1 by the palette suite. Spelled as literals, five of the ten sat
- * under that floor while the suite measured ten values nothing painted with.
- */
-
-.crewlet-avatar {
-  --crewlet-avatar-size: 32px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  flex: none;
-  width: var(--crewlet-avatar-size);
-  height: var(--crewlet-avatar-size);
-  overflow: hidden;
-  object-fit: cover;
-  font-family: var(--font-family-sans);
-  font-size: var(--font-size-xs);
-  font-weight: var(--font-weight-semibold);
-  letter-spacing: var(--font-letter-spacing-wide);
-  /* The document's own leading rather than a tight step of the badge's own.
-     The box is a fixed square that centres whatever line it holds, so the ink
-     lands in the same place either way; what the tight step bought was one
-     more number in a component that already sets four. */
-  line-height: var(--font-line-height-normal);
-  text-transform: uppercase;
-  user-select: none;
-  box-sizing: border-box;
-}
-
-/*
- * The four steps. Each pairs its box with a type step, so two initials sit
- * inside the circle at every one of them; a numeric size computes its own,
- * because nothing in the scale can answer for an arbitrary box.
- */
-.crewlet-avatar--xs {
-  --crewlet-avatar-size: 20px;
-  font-size: var(--font-size-2xs);
-}
-
-.crewlet-avatar--sm {
-  --crewlet-avatar-size: 26px;
-  font-size: var(--font-size-2xs);
-}
-
-.crewlet-avatar--md {
-  --crewlet-avatar-size: 32px;
-  font-size: var(--font-size-xs);
-}
-
-.crewlet-avatar--lg {
-  --crewlet-avatar-size: 40px;
-  font-size: var(--font-size-sm);
-}
-
-/*
- * Shapes. THE SQUARE IS THE DEFAULT, which is the change: the engine's
- * identity mark is a rounded square and it is what a reader sees in every seat
- * chip, every list row and every header on that product. A circle stays for a
- * PERSON, where the round badge is the platform convention a member list
- * already speaks.
- *
- * The square's radius moves with the box rather than sitting at one step. The
- * engine draws 4px at 20, 8px at 26 and 12px at 40, which is a roughly
- * constant proportion; one radius across the four steps reads as a pill at the
- * smallest and as a plain box at the largest. A NUMERIC SIZE OBEYS THE SAME
- * LADDER, from `avatarSquareCorner` in the component, which picks the corner
- * of the step nearest the box it was given: taking one fixed step there is how
- * `size={80}` ended up drawn squarer than `size="lg"` at half its width.
- */
-.crewlet-avatar--circle {
-  border-radius: var(--radius-circle);
-}
-
-.crewlet-avatar--square {
-  border-radius: var(--radius-md);
-}
-
-.crewlet-avatar--square.crewlet-avatar--xs {
-  border-radius: var(--radius-xs);
-}
-
-.crewlet-avatar--square.crewlet-avatar--lg {
-  border-radius: var(--radius-lg);
-}
-
-.crewlet-avatar--image {
-  display: block;
-  object-fit: cover;
-}
-
-/* ── tones ─────────────────────────────────────────────────────────────── */
-
-.crewlet-avatar--fallback {
-  border: 1px solid transparent;
-}
-
-.crewlet-avatar--neutral {
-  background: var(--color-surface-elevated);
-  border-color: var(--color-border-default);
-  color: var(--color-text-secondary);
-}
-
-/*
- * The label on the accent fill is the on-accent step, not the on-brand one.
- * The themes repaint the brand fill monochrome and leave the accent where it
- * is, so on-brand is black in the dark palette and black on the accent
- * measures 4.35:1. On-accent is white in every palette and measures 4.83:1.
- */
-.crewlet-avatar--brand {
-  background: var(--color-brand-accent);
-  color: var(--color-text-on-accent);
-}
-
-.crewlet-avatar--seeded {
-  color: var(--color-text-on-accent);
-}
-
-.crewlet-avatar--tint-0 { background: var(--color-avatar-tint-0); }
-.crewlet-avatar--tint-1 { background: var(--color-avatar-tint-1); }
-.crewlet-avatar--tint-2 { background: var(--color-avatar-tint-2); }
-.crewlet-avatar--tint-3 { background: var(--color-avatar-tint-3); }
-.crewlet-avatar--tint-4 { background: var(--color-avatar-tint-4); }
-.crewlet-avatar--tint-5 { background: var(--color-avatar-tint-5); }
-.crewlet-avatar--tint-6 { background: var(--color-avatar-tint-6); }
-.crewlet-avatar--tint-7 { background: var(--color-avatar-tint-7); }
-.crewlet-avatar--tint-8 { background: var(--color-avatar-tint-8); }
-.crewlet-avatar--tint-9 { background: var(--color-avatar-tint-9); }
-
-/*
- * A HUMAN SEAT IS DRAWN, NOT TINTED. The engine does not run it, which is a
- * structural fact rather than a status, so it takes the edge and no fill at
- * all. Last, so it wins over whichever tone it is paired with.
- *
- * The whole border rather than its style alone: the badge is the same person
- * whether or not they have uploaded a photo, and an image draws no border of
- * its own for a style to change.
- */
-.crewlet-avatar--dashed {
-  background: transparent;
-  /* The same hairline the solid neutral badge draws, so the human seat differs
-     by its LINE STYLE and its missing fill rather than by a second grey a
-     reader would have to hold two of in mind. */
-  border: 1px dashed var(--color-border-default);
-  color: var(--color-text-secondary);
-}