@crewlethq/ui 0.8.1 → 0.10.0

package/dist/styles.css

@@ -1088,25 +1088,34 @@
 }
 
 
-/* Avatar-XID7Z74C.css */
+/* Avatar-QHYOFID3.css */
 /*
  * 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 OUTLINE (a squircle for an
- * agent, a circle for a person), the monogram and the name.
+ * IT IS NEUTRAL UNLESS SOMEBODY CHOSE OTHERWISE, and a hash never chooses. 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
+ * OUTLINE (a squircle for an agent, a circle for a person), the monogram and
+ * the name, and for an agent an operator gave one, its character and its hue.
  *
- * THE ONE HUE A BADGE CARRIES IS A STATE, as a ring round it, and the ring is
- * the component's only coloured line.
+ * A STATE IS A CORNER BADGE, NEVER A LINE ROUND THE PLATE. A ring in a state's
+ * hue round a plate in the agent's own hue put two colours on a 32px mark and
+ * framed what the agent was doing louder than who it is. The one ring left is
+ * SELECTED, in the accent.
  *
  * 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.
+ *
+ * AN AGENT'S OWN HUE IS NOT A HASH. An agent an operator gave a Crewlet
+ * character and a hue is drawn as that character, in that hue, on a plate of
+ * it: the hue was chosen for the seat and survives a rename, which a hash of
+ * the name never did. It is one of the six node hues (`NodeHue`), each a
+ * measured set of steps rather than a colour with alphas applied here.
  */
 
 .crewlet-avatar {
@@ -1238,11 +1247,69 @@
 .crewlet-avatar--tint-8 { background: var(--color-avatar-tint-8); }
 .crewlet-avatar--tint-9 { background: var(--color-avatar-tint-9); }
 
-/* ── the state ring ────────────────────────────────────────────────────── */
+/* ── an agent's character ─────────────────────────────────────────────── */
+
+/*
+ * THE CHARACTER FILLS MOST OF THE PLATE, centred by its own frame (it frames
+ * every silhouette square on what it draws), with the plate's corner clear of
+ * it: a wide character such as the original Crewlet reaches the plate's
+ * sides, a tall one its top and its foot, and none touches the curve.
+ */
+.crewlet-avatar--character {
+  border: 1px solid transparent;
+}
+
+.crewlet-avatar__character {
+  display: block;
+  flex: none;
+  width: 74%;
+  height: 74%;
+}
+
+/* The plate an agent's hue is drawn on: the hue's fill, its line round the
+   badge and the hue itself as the character's ink. */
+.crewlet-avatar--hue-purple {
+  background: var(--color-node-purple-fill);
+  border-color: var(--color-node-purple-line);
+  color: var(--color-node-purple);
+}
+
+.crewlet-avatar--hue-cyan {
+  background: var(--color-node-cyan-fill);
+  border-color: var(--color-node-cyan-line);
+  color: var(--color-node-cyan);
+}
+
+.crewlet-avatar--hue-green {
+  background: var(--color-node-green-fill);
+  border-color: var(--color-node-green-line);
+  color: var(--color-node-green);
+}
+
+.crewlet-avatar--hue-amber {
+  background: var(--color-node-amber-fill);
+  border-color: var(--color-node-amber-line);
+  color: var(--color-node-amber);
+}
+
+.crewlet-avatar--hue-rose {
+  background: var(--color-node-rose-fill);
+  border-color: var(--color-node-rose-line);
+  color: var(--color-node-rose);
+}
+
+.crewlet-avatar--hue-blue {
+  background: var(--color-node-blue-fill);
+  border-color: var(--color-node-blue-line);
+  color: var(--color-node-blue);
+}
+
+/* ── the selected ring ────────────────────────────────────────────────── */
 
 /*
  * A 1.5px LINE 2px OUTSIDE THE BADGE, which is the design's ring: it draws a
  * 3.5px shadow over a 2px one in the card's colour, and 3.5 less 2 is 1.5.
+ * Longhands, so nothing else that sets an outline resets the ring's geometry.
  *
  * AN OUTLINE RATHER THAN THAT SHADOW PAIR, for three reasons. The gap is
  * TRANSPARENT, so the ring reads on whatever the badge stands on, where the
@@ -1250,44 +1317,99 @@
  * other ground. An outline follows the corner, the squircle's included, in
  * every engine this package supports. And forced-colors mode keeps an outline
  * and drops every shadow, so the ring is still drawn for the readers who most
- * need a boundary; it is drawn in the system colour there, which is why the
- * state is always said in words beside the badge as well.
- *
- * LONGHANDS, so the tone rules below set the colour alone and cannot reset the
- * geometry, whichever order they are read in. Each fill is measured at 3:1 as
- * a mark on every opaque surface by @crewlethq/tokens, which is the floor a
- * boundary a reader has to see is held to.
- */
-.crewlet-avatar--ring-info,
-.crewlet-avatar--ring-warning,
-.crewlet-avatar--ring-danger,
-.crewlet-avatar--ring-success,
+ * need a boundary.
+ *
+ * SELECTED, in the accent, which is what the accent means: where the reader
+ * is. It is the only place a badge spends the accent, and the accent is
+ * measured at 3:1 as a mark on every opaque surface by @crewlethq/tokens.
+ */
 .crewlet-avatar--ring-brand {
   outline-style: solid;
   outline-width: 1.5px;
   outline-offset: 2px;
+  outline-color: var(--color-brand-accent);
 }
 
-.crewlet-avatar--ring-info {
-  outline-color: var(--color-feedback-info);
+/* ── the status badge ─────────────────────────────────────────────────── */
+
+/*
+ * THE FRAME is the face's own box, so a badge with a status takes exactly the
+ * room one without takes: the corner badge hangs past it rather than growing
+ * it, and a row lays out the same either way. The badge is 0.42 of the box,
+ * never under 10px, which is the size its glyph stays a shape at.
+ */
+.crewlet-avatar-frame {
+  --crewlet-avatar-status-size: max(10px, calc(var(--crewlet-avatar-size) * 0.42));
+  --crewlet-avatar-status-overhang: 2px;
+  --crewlet-avatar-status-gap: 1.5px;
+  position: relative;
+  display: inline-flex;
+  flex: none;
+  width: var(--crewlet-avatar-size);
+  height: var(--crewlet-avatar-size);
+  vertical-align: middle;
 }
 
-.crewlet-avatar--ring-warning {
-  outline-color: var(--color-feedback-warning);
+/*
+ * THE NOTCH: the face is masked by a circle a gap wider than the badge, centred
+ * where the badge sits, so the gap shows whatever the badge stands on. A ring
+ * of the ground's colour would need to know that ground, and a badge on a card,
+ * a hovered row and the page would each need a different one. A mask reads only
+ * alpha, so its black is opacity rather than a colour.
+ */
+.crewlet-avatar--notched {
+  --crewlet-avatar-status-centre: calc(
+    100% + var(--crewlet-avatar-status-overhang) - var(--crewlet-avatar-status-size) / 2
+  );
+  --crewlet-avatar-status-cut: calc(var(--crewlet-avatar-status-size) / 2 + var(--crewlet-avatar-status-gap));
+  -webkit-mask-image: radial-gradient(
+    circle at var(--crewlet-avatar-status-centre) var(--crewlet-avatar-status-centre),
+    transparent var(--crewlet-avatar-status-cut),
+    #000 calc(var(--crewlet-avatar-status-cut) + 0.5px)
+  );
+  mask-image: radial-gradient(
+    circle at var(--crewlet-avatar-status-centre) var(--crewlet-avatar-status-centre),
+    transparent var(--crewlet-avatar-status-cut),
+    #000 calc(var(--crewlet-avatar-status-cut) + 0.5px)
+  );
 }
 
-.crewlet-avatar--ring-danger {
-  outline-color: var(--color-feedback-danger);
+/*
+ * THE BADGE: a state's fill step carrying its glyph in the inverse ink, which
+ * the tokens' palette suite holds at 3:1 on each fill (`MARK_ON_FILL`). The
+ * transparent outline is drawn only in forced-colors mode, where the fill
+ * becomes the page's own colour and the outline is what keeps a boundary.
+ */
+.crewlet-avatar__status {
+  position: absolute;
+  right: calc(var(--crewlet-avatar-status-overhang) * -1);
+  bottom: calc(var(--crewlet-avatar-status-overhang) * -1);
+  display: grid;
+  place-items: center;
+  width: var(--crewlet-avatar-status-size);
+  height: var(--crewlet-avatar-status-size);
+  border-radius: var(--radius-circle);
+  outline: 1px solid transparent;
+  color: var(--color-text-inverse);
+  pointer-events: none;
+}
+
+.crewlet-avatar__status > svg {
+  display: block;
+  width: 100%;
+  height: 100%;
 }
 
-.crewlet-avatar--ring-success {
-  outline-color: var(--color-feedback-success);
+.crewlet-avatar__status--working {
+  background: var(--color-feedback-info);
 }
 
-/* SELECTED, in the accent, which is what the accent means: where the reader
-   is. It is the only place a badge spends the accent. */
-.crewlet-avatar--ring-brand {
-  outline-color: var(--color-brand-accent);
+.crewlet-avatar__status--needs {
+  background: var(--color-feedback-warning);
+}
+
+.crewlet-avatar__status--stopped {
+  background: var(--color-feedback-danger);
 }
 
 
@@ -2877,6 +2999,51 @@
 }
 
 
+/* CharacterPicker-ZEYIKUNQ.css */
+/*
+ * The grid of characters.
+ *
+ * SIX COLUMNS, ALWAYS, and the tiles share the width: the arrow keys move a
+ * whole row on Up and Down, so a row has to hold the same options at every
+ * width (`CHARACTER_PICKER_COLUMNS`). A tile is a target the size of the
+ * badge it holds and the gap round it, never smaller than the kit's control
+ * floor.
+ */
+
+.crewlet-character-picker {
+  display: grid;
+  grid-template-columns: repeat(6, minmax(0, 1fr));
+  gap: var(--spacing-1);
+  justify-items: center;
+}
+
+.crewlet-character-picker__option {
+  display: grid;
+  place-items: center;
+  min-width: var(--size-control-lg);
+  min-height: var(--size-control-lg);
+  padding: var(--spacing-1);
+  border: 0;
+  border-radius: var(--radius-md);
+  background: transparent;
+  cursor: pointer;
+}
+
+.crewlet-character-picker__option:hover:not(:disabled) {
+  background: var(--color-surface-hover);
+}
+
+.crewlet-character-picker__option:focus-visible {
+  outline: 2px solid var(--color-focus);
+  outline-offset: 2px;
+}
+
+.crewlet-character-picker__option:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+
 /* Charts-JUERFLAR.css */
 /* The chart kit: a legend, a ranked bar list, a stacked bar, stacked
    columns, an activity strip, a time series and the reading layer they share. Hand-drawn rather than a charting library, for one reason that
@@ -7978,6 +8145,27 @@ svg.crewlet-datetime__chevron {
 }
 
 
+/* HuePicker-5QIUR6L7.css */
+/*
+ * A hue's swatch: the hue itself, as a dot beside its name. The name carries
+ * the choice; the dot is there so the row can be scanned for a colour.
+ */
+
+.crewlet-hue-picker__swatch {
+  display: block;
+  width: var(--spacing-3);
+  height: var(--spacing-3);
+  border-radius: var(--radius-circle);
+}
+
+.crewlet-hue-picker__swatch--purple { background: var(--color-node-purple); }
+.crewlet-hue-picker__swatch--cyan { background: var(--color-node-cyan); }
+.crewlet-hue-picker__swatch--green { background: var(--color-node-green); }
+.crewlet-hue-picker__swatch--amber { background: var(--color-node-amber); }
+.crewlet-hue-picker__swatch--rose { background: var(--color-node-rose); }
+.crewlet-hue-picker__swatch--blue { background: var(--color-node-blue); }
+
+
 /* IconButton-VYWP6SGW.css */
 /*
  * IconButton: a square icon-only control.

package/dist/utils/index.d.ts

@@ -2,5 +2,7 @@ export { cx } from './cx.js';
 export { useClipboard, writeClipboard } from './useClipboard.js';
 export type { Clipboard, ClipboardOptions, ClipboardState } from './useClipboard.js';
 export type { Tone } from './tone.js';
+export { NODE_HUES, NODE_HUE_NAMES, isNodeHue } from './nodeHue.js';
+export type { NodeHue } from './nodeHue.js';
 export { HeadingLevelProvider, headingTag, nextHeadingLevel, useHeadingLevel } from './headingLevel.js';
 export type { HeadingLevel, HeadingLevelProviderProps } from './headingLevel.js';

package/dist/utils/index.js

@@ -1,4 +1,5 @@
-import '../chunk-IJ7QXNIJ.js';
+import '../chunk-AER7UDD4.js';
+export { NODE_HUES, NODE_HUE_NAMES, isNodeHue } from '../chunk-AYKXMIOR.js';
 export { useClipboard, writeClipboard } from '../chunk-5VNUYO76.js';
 export { HeadingLevelProvider, headingTag, nextHeadingLevel, useHeadingLevel } from '../chunk-PQADV6P6.js';
 export { cx } from '../chunk-ODEQTPFM.js';

package/dist/utils/nodeHue.d.ts

@@ -0,0 +1,25 @@
+/**
+ * The six hues an entity is told apart by, where an operator has chosen one.
+ *
+ * DECORATIVE AND PER ENTITY, never a series and never a state: two things
+ * sharing a hue say nothing, so the palette is not measured for separability
+ * and nothing owes a legend (`--color-node-*` in the tokens package says the
+ * same). It is what an operator picks for one agent so they can find it
+ * again: on its avatar, on its card in a chart and on its row in a table.
+ *
+ * CHOSEN, NEVER DERIVED. A hue hashed from a name carries no information:
+ * rename the seat and its colour changes, which is the proof it never meant
+ * anything. A hue a person picked survives a rename because it was never
+ * made from one.
+ *
+ * A NAMED SET RATHER THAN A COLOUR. A caller that could hand in any colour
+ * would hand in a literal, and the fill, the border and the ink of a tinted
+ * surface are measured steps of one hue rather than one value with alphas
+ * applied by whoever drew it last.
+ */
+export declare const NODE_HUES: readonly ["purple", "cyan", "green", "amber", "rose", "blue"];
+export type NodeHue = (typeof NODE_HUES)[number];
+/** Each hue's name, for a label: `Cyan`. */
+export declare const NODE_HUE_NAMES: Readonly<Record<NodeHue, string>>;
+/** Whether a value read off the wire names one of the six hues. */
+export declare const isNodeHue: (value: unknown) => value is NodeHue;

package/dist/utils/tone.d.ts

@@ -9,7 +9,10 @@
  * A tone says what a thing IS, never who it is: success, warning, danger and
  * 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.
+ * is carried by its name, its glyph and its position, with ONE exception that
+ * is not a tone: an agent an operator has given a hue of its own wears it
+ * ([NodeHue] in `nodeHue.ts`), because a hue somebody chose names that agent
+ * the way its name does, where a hue hashed from the name named nothing.
  *
  * 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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crewlethq/ui",
-  "version": "0.8.1",
+  "version": "0.10.0",
   "description": "Crewlet shared React components built on @crewlethq/tokens and @crewlethq/icons.",
   "license": "MIT",
   "repository": {
@@ -42,8 +42,8 @@
     "clean": "rm -rf dist src/generated"
   },
   "dependencies": {
-    "@crewlethq/icons": "0.8.1",
-    "@crewlethq/tokens": "0.8.1"
+    "@crewlethq/icons": "0.10.0",
+    "@crewlethq/tokens": "0.10.0"
   },
   "peerDependencies": {
     "react": ">=18",

package/dist/Avatar-XID7Z74C.css

@@ -1,200 +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 OUTLINE (a squircle for an
- * agent, a circle for a person), the monogram and the name.
- *
- * THE ONE HUE A BADGE CARRIES IS A STATE, as a ring round it, and the ring is
- * the component's only coloured line.
- *
- * 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-body);
-  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 outline at every one of them. A numeric size sets the same
- * `--crewlet-avatar-size` inline and computes its own type, because nothing in
- * the scale can answer for an arbitrary box; everything else it takes from the
- * rules below exactly as a step does.
- */
-.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);
-}
-
-/* ── kinds ─────────────────────────────────────────────────────────────── */
-
-/*
- * AN AGENT IS A SQUIRCLE, set in the mono face: what the engine runs, named
- * the way a handle is written.
- *
- * THE CORNER MOVES WITH THE BOX, at 0.29 of it (`AVATAR_CORNER_RATIO` in the
- * component, which the suite holds equal to this number): the approved
- * design's 7px at 24 and 9px at 30, as one proportion. It is computed here from
- * the size property every step and every numeric size sets, so there is ONE
- * ladder. There used to be two, a step table here and a numeric table in the
- * component, and they disagreed: `size={80}` drew a squarer badge than
- * `size="lg"` at half its width.
- *
- * WHERE THE BROWSER DRAWS A SQUIRCLE, IT IS A WHOLE ONE. `corner-shape:
- * squircle` is a superellipse of exponent 4, which at a given radius reaches
- * much closer to the box's corner than a circular arc does: at the 45 degree
- * point it stands 0.159 of the radius in from each edge, against 0.293 for an
- * arc. Kept at 0.29 of the box, that corner would stand 0.046 of the box in,
- * half the design's depth and a nearly square badge. At half the box it stands
- * 0.0795 of the box in, against the design's 0.0849 (0.13px at 24px), with the
- * continuous curvature a squircle is for. So the corner is the circle token
- * there, and the fallback above is what every other browser draws.
- */
-.crewlet-avatar--agent {
-  border-radius: calc(var(--crewlet-avatar-size) * 0.29);
-  font-family: var(--font-family-mono);
-}
-
-@supports (corner-shape: squircle) {
-  .crewlet-avatar--agent {
-    corner-shape: squircle;
-    border-radius: var(--radius-circle);
-  }
-}
-
-/* A PERSON IS A CIRCLE, set in the sans face, the round badge every member list
-   a reader has used already speaks. */
-.crewlet-avatar--human {
-  border-radius: var(--radius-circle);
-  font-family: var(--font-family-sans);
-}
-
-.crewlet-avatar--image {
-  display: block;
-  object-fit: cover;
-}
-
-/* ── tones ─────────────────────────────────────────────────────────────── */
-
-.crewlet-avatar--fallback {
-  border: 1px solid transparent;
-}
-
-/* The design's badge: the raised rung with the strong hairline round it and
-   the secondary ink, so a badge on a card reads as a mark standing on it
-   rather than as a hole in it. */
-.crewlet-avatar--neutral {
-  background: var(--color-surface-elevated);
-  border-color: var(--color-border-strong);
-  color: var(--color-text-secondary);
-}
-
-.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); }
-
-/* ── the state ring ────────────────────────────────────────────────────── */
-
-/*
- * A 1.5px LINE 2px OUTSIDE THE BADGE, which is the design's ring: it draws a
- * 3.5px shadow over a 2px one in the card's colour, and 3.5 less 2 is 1.5.
- *
- * AN OUTLINE RATHER THAN THAT SHADOW PAIR, for three reasons. The gap is
- * TRANSPARENT, so the ring reads on whatever the badge stands on, where the
- * design's gap is the card's own fill and cuts a card-coloured band into any
- * other ground. An outline follows the corner, the squircle's included, in
- * every engine this package supports. And forced-colors mode keeps an outline
- * and drops every shadow, so the ring is still drawn for the readers who most
- * need a boundary; it is drawn in the system colour there, which is why the
- * state is always said in words beside the badge as well.
- *
- * LONGHANDS, so the tone rules below set the colour alone and cannot reset the
- * geometry, whichever order they are read in. Each fill is measured at 3:1 as
- * a mark on every opaque surface by @crewlethq/tokens, which is the floor a
- * boundary a reader has to see is held to.
- */
-.crewlet-avatar--ring-info,
-.crewlet-avatar--ring-warning,
-.crewlet-avatar--ring-danger,
-.crewlet-avatar--ring-success,
-.crewlet-avatar--ring-brand {
-  outline-style: solid;
-  outline-width: 1.5px;
-  outline-offset: 2px;
-}
-
-.crewlet-avatar--ring-info {
-  outline-color: var(--color-feedback-info);
-}
-
-.crewlet-avatar--ring-warning {
-  outline-color: var(--color-feedback-warning);
-}
-
-.crewlet-avatar--ring-danger {
-  outline-color: var(--color-feedback-danger);
-}
-
-.crewlet-avatar--ring-success {
-  outline-color: var(--color-feedback-success);
-}
-
-/* SELECTED, in the accent, which is what the accent means: where the reader
-   is. It is the only place a badge spends the accent. */
-.crewlet-avatar--ring-brand {
-  outline-color: var(--color-brand-accent);
-}