@crewlethq/ui 0.74.0 → 0.75.0

package/dist/styles.css

@@ -4560,7 +4560,7 @@ a.crewlet-make-row__item:active {
 }
 
 
-/* Avatar-FDQSCB7A.css */
+/* Avatar-VJSJGFRG.css */
 /*
  * The identity badge.
  *
@@ -4643,6 +4643,54 @@ a.crewlet-make-row__item:active {
  * 9px, in the component), so the step and its numeric twin draw one badge and
  * two initials clear the ring by a pixel or more.
  */
+/*
+ * A FACE IN A SENTENCE (`size="text"`): its box is the words' own size, so
+ * it takes their font size and is measured in it, and its initials are set
+ * apart at half that (`.crewlet-avatar__initials`), since setting the box's
+ * own type would change what its em measures.
+ */
+.crewlet-avatar--text {
+  --crewlet-avatar-size: 1.15em;
+  font-size: inherit;
+  /*
+   * AN INLINE BLOCK, not a flex box, because it sits inside words a reader
+   * copies: a browser copies a line break before an inline flex container,
+   * so "ask @miles" came out over two lines. Its face is centred by its line
+   * instead (`line-height` is its own height).
+   */
+  display: inline-block;
+  text-align: center;
+  line-height: var(--crewlet-avatar-size);
+}
+
+/* An image face is a block at every other size. */
+.crewlet-avatar--text.crewlet-avatar--image {
+  display: inline-block;
+}
+
+/* A glyph face (a token's key) centred by the line too, never a flex box. */
+.crewlet-avatar--text .crewlet-avatar__icon {
+  display: inline-block;
+  vertical-align: middle;
+}
+
+/* The character takes 74% of the box: the rest, shared above and below it. */
+.crewlet-avatar--text .crewlet-avatar__character {
+  margin: 13% auto;
+}
+
+.crewlet-avatar__initials {
+  /*
+   * RELATIVE, like InlineCode's size and for its reason: the face sits in
+   * whatever register its sentence is set in, so its initials are half of
+   * that, never a step off the scale.
+   */
+  --crewlet-avatar-initials-size: 0.5em;
+  font-size: var(--crewlet-avatar-initials-size);
+  line-height: 1;
+  vertical-align: middle;
+}
+
 .crewlet-avatar--xs {
   --crewlet-avatar-size: 20px;
   font-size: calc(var(--crewlet-avatar-size) * 0.45);
@@ -10055,7 +10103,7 @@ button.crewlet-histogram__bar[data-empty]:focus-visible > .crewlet-histogram__fi
 }
 
 
-/* ChoiceButtons-Q2ET3I2N.css */
+/* ChoiceButtons-G7XHZKDP.css */
 /*
  * One answer, sent with one press: a column of buttons as tall as a touch
  * target, the recommended one first and filled with the accent.
@@ -10155,6 +10203,13 @@ button.crewlet-histogram__bar[data-empty]:focus-visible > .crewlet-histogram__fi
   background: var(--color-brand-accent);
   border-color: transparent;
   color: var(--color-text-on-accent);
+  /*
+   * A COLOUR OR A REFERENCE IN THE LABEL takes the label's own ink for its
+   * edge and its mark: the control border and the secondary grey are measured
+   * on the surfaces, and on the accent they all but vanish (1.09:1 light).
+   */
+  --crewlet-color-chip-ring: currentColor;
+  --crewlet-inline-ref-mark-ink: currentColor;
 }
 
 .crewlet-choice-buttons__option--recommended:hover:not([aria-disabled='true']) {
@@ -10707,7 +10762,7 @@ button.crewlet-histogram__bar[data-empty]:focus-visible > .crewlet-histogram__fi
 }
 
 
-/* ColorChip-A5XHTH3J.css */
+/* ColorChip-EYQCUXBV.css */
 /*
  * A colour as a small chip (ColorChip.tsx). Its fill is the one value that is
  * not a token, and it arrives through `--crewlet-color-chip-value` only after
@@ -10720,8 +10775,15 @@ button.crewlet-histogram__bar[data-empty]:focus-visible > .crewlet-histogram__fi
   width: var(--spacing-3);
   height: var(--spacing-3);
   background: var(--crewlet-color-chip-value, var(--color-surface-inset));
-  /* An edge of its own, so a colour that matches its ground is still a chip. */
-  box-shadow: inset 0 0 0 1px var(--color-border-hover);
+  /*
+   * AN EDGE OF ITS OWN, so a colour that matches its ground is still a chip,
+   * at the control border's step: it is the chip's boundary, a graphic a
+   * reader has to see (WCAG 1.4.11), and that step clears 3:1 on every ground
+   * in both themes. On a filled ground (an accent option) the ground sets
+   * `--crewlet-color-chip-ring` to its own label's ink, since a grey edge
+   * drawn on the accent nearly vanishes into it.
+   */
+  box-shadow: inset 0 0 0 1px var(--crewlet-color-chip-ring, var(--color-border-control));
   vertical-align: middle;
 }
 
@@ -10730,6 +10792,20 @@ button.crewlet-histogram__bar[data-empty]:focus-visible > .crewlet-histogram__fi
   height: var(--spacing-4);
 }
 
+/*
+ * AT THE TEXT'S SIZE, for a colour written in a sentence, a code span or a
+ * label: sized by the words around it, so it scales with any register, and
+ * nearly square, since a round chip at this size reads as a status dot.
+ */
+.crewlet-color-chip--text {
+  width: 0.8em;
+  height: 0.8em;
+}
+
+.crewlet-color-chip--text.crewlet-color-chip--square {
+  border-radius: calc(var(--radius-xs) / 2);
+}
+
 .crewlet-color-chip--round {
   border-radius: var(--radius-circle);
 }
@@ -20307,6 +20383,138 @@ a.crewlet-icon-btn {
 }
 
 
+/* InlineRef-SJWUKXGT.css */
+/*
+ * A reference inside a sentence (InlineRef.tsx): a mark at the text's size,
+ * then its words, in the sentence's own ink unless it is a link.
+ */
+
+.crewlet-inline-ref {
+  /*
+   * InlineCode's size, restated because a consumer may import this component
+   * without that one's stylesheet; the suite holds the two equal.
+   */
+  --crewlet-inline-code-size: 0.92em;
+  /* THE SENTENCE'S OWN INK: a reference in a row or on a filled option reads in what is around it. */
+  color: inherit;
+  /* A token is one word to a reader, and moves to the next line whole. */
+  white-space: nowrap;
+}
+
+.crewlet-inline-ref--wrap {
+  white-space: normal;
+}
+
+/* The mark and the first word are one run, so no mark ever ends a line alone. */
+.crewlet-inline-ref__head {
+  white-space: nowrap;
+}
+
+/*
+ * A LINK reads as one, in the accent's ink step as `Link` draws it. The
+ * underline is the words', never the mark's: an inline-block takes no
+ * decoration from the anchor around it.
+ */
+.crewlet-inline-ref--link {
+  color: var(--color-brand-accent-ink);
+  text-decoration: none;
+  border-radius: var(--radius-xs);
+}
+
+.crewlet-inline-ref--link:hover {
+  text-decoration: underline;
+}
+
+.crewlet-inline-ref--link:focus-visible {
+  outline: 2px solid var(--color-focus);
+  outline-offset: 2px;
+}
+
+/*
+ * ONE SQUARE AT THE TEXT'S SIZE for every glyph, mark and chip, centred on
+ * the same line, so a GitHub mark beside one word and a task's glyph beside
+ * the next stand at the same height.
+ *
+ * AN INLINE BLOCK THAT CLIPS, because that is the one box whose baseline is
+ * its own bottom edge whatever it holds: an inline-flex box takes its first
+ * child's, so a vendor mark's `vertical-align: middle` put every mark a fifth
+ * of an em low, and a smaller colour chip moved its box a tenth of an em
+ * below the marks beside it. The drawing inside is centred in it.
+ */
+.crewlet-inline-ref__mark {
+  display: inline-block;
+  overflow: hidden;
+  line-height: 0;
+  margin-inline-end: 0.3em;
+  /* A copy carries the words, never a picture's place. */
+  user-select: none;
+}
+
+.crewlet-inline-ref__mark--glyph {
+  width: 1em;
+  height: 1em;
+  vertical-align: -0.125em;
+  /*
+   * The words' quiet step, or the ink a filled ground asks for: on an accent
+   * fill a secondary grey is the one colour that does not read.
+   */
+  color: var(--crewlet-inline-ref-mark-ink, var(--color-text-secondary));
+}
+
+.crewlet-inline-ref__mark--glyph > * {
+  display: block;
+  position: relative;
+  top: 50%;
+  margin-inline: auto;
+  translate: 0 -50%;
+}
+
+.crewlet-inline-ref__mark--glyph > svg {
+  width: 100%;
+  height: 100%;
+}
+
+/*
+ * A FACE (`Avatar size="text"`) stands in a square a little larger than the
+ * words, and a little below their centre, so it reaches no higher than a
+ * capital and the line keeps its height. It fills its square from the top.
+ */
+.crewlet-inline-ref__mark--face {
+  width: 1.15em;
+  height: 1.15em;
+  vertical-align: -0.22em;
+}
+
+.crewlet-inline-ref__mark--face > * {
+  vertical-align: top;
+}
+
+.crewlet-inline-ref--code .crewlet-inline-ref__text {
+  font-family: var(--font-family-mono);
+  font-size: var(--crewlet-inline-code-size);
+  /* An identifier is read character by character. */
+  font-variant-ligatures: none;
+}
+
+/*
+ * WHAT A SCREEN READER IS TOLD AND THE EYE IS NOT: what the mark means, and
+ * that a link opens a tab. Clipped as `VisuallyHidden` clips, and left out of
+ * a copy, which carries the words a reader selected.
+ */
+.crewlet-inline-ref__said {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  border: 0;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: pre;
+  user-select: none;
+}
+
+
 /* Input-GEFFMKBS.css */
 /*
  * The form row: Input, Textarea, Label, FormField, FormRow, FormSection and

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crewlethq/ui",
-  "version": "0.74.0",
+  "version": "0.75.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.74.0",
-    "@crewlethq/tokens": "0.74.0",
+    "@crewlethq/icons": "0.75.0",
+    "@crewlethq/tokens": "0.75.0",
     "prosemirror-commands": "1.7.2",
     "prosemirror-gapcursor": "1.4.1",
     "prosemirror-history": "1.5.1",

package/dist/{chunk-LWFOX3PB.js → chunk-BYNKGOBA.js}

@@ -1,7 +1,7 @@
 import { ThemeSwatch } from './chunk-3XQUEF5C.js';
 import { useHighlightRest } from './chunk-7KHM2FZH.js';
-import { Tag } from './chunk-I5OIKDX2.js';
 import { useRoving, tabStop } from './chunk-EGMQURBR.js';
+import { Tag } from './chunk-I5OIKDX2.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './ThemeGallery-UEFZRT6W.css';
 import { useId } from 'react';