@slotted/styles 0.0.0-stage → 0.1.0-beta.0

package/src/highlight/highlight.css

@@ -0,0 +1,135 @@
+@layer slotted.components {
+  /**
+   * ── The span a query found ─────────────────────────────────────────────
+   *
+   * One mark, drawn once. Every list a reader types into says the same thing
+   * about the same span — this is the part of the label your query matched —
+   * and `combobox` drew it in its own sheet, so `select` with a filter,
+   * `multi-select` and `command-palette` would each have drawn it again, with
+   * their own answers (R6). Until wave 10 it was a shared sheet those hosts
+   * wore as `data-ui='highlight'` on the mark itself; it is now a family, and
+   * the host's label holds one root of it.
+   *
+   * The root is the element that holds the text. It has no rule: it is inline,
+   * it inherits everything, and the whole of what the family paints is the
+   * `mark` inside it. The element is a `mark`, so a reader whose browser
+   * exposes the role hears the emphasis as well as sees it.
+   *
+   * **The mark changes no metric.** A mark that is heavier, padded, or spaced
+   * differently from the text around it makes the word wider than the same
+   * word unmarked, and a filter that marks a different span on every keystroke
+   * reflows the label under the reader's eyes: at 600 weight and 0.1em of
+   * inline padding, `Blueberry` measured 70.03px marked against 63.17px plain,
+   * and the run moved 6.86px as the query grew (CB6). Weight, spacing and
+   * padding are therefore the label's own, and the mark is carried entirely by
+   * colour: the accent's text tone over a band mixed from that same tone, with
+   * a rule of the accent's border tone under it.
+   *
+   * The rule is `text-decoration` rather than a shadow, so it follows the
+   * letters across a line break and is drawn by the same machinery that draws
+   * every other underline the reader has met.
+   *
+   * **The band is not a `*-surface` tone.** `accent-surface` is a ground, and
+   * a ground is calibrated to sit under text on the page rather than to
+   * separate from it: it measured 1.220 | 1.014 | 1.000:1 against the panel in
+   * `light` | `dark` | `high-contrast`, so in two schemes out of three the band
+   * did not exist and the mark was carried by its colour and its rule alone
+   * (CB10, the same fact CK7 found under the pointer halo). The band is mixed
+   * from `accent-text` instead — the one role every scheme keeps legible over
+   * the surface — so one share gives one gesture in all three: 1.120 | 1.165 |
+   * 1.140:1 against the panel, and 1.115 to 1.165 across every ground a marked
+   * label can land on.
+   *
+   * The share is 0.075 and not the halo's 0.12 because a band is read through
+   * and a halo is not. The mark's own text has to keep the ratio its scheme
+   * promises while sitting on the band, and in `high-contrast` — 7:1, over a
+   * highlighted row — that caps the share: 0.075 leaves 7.078:1, 0.08 leaves
+   * 7.001:1, and 0.12 leaves 6.540:1.
+   */
+  [data-ui='highlight'] [data-part='match'] {
+    background-color: var(
+      --slotted-highlight-background,
+      color-mix(
+        in oklab,
+        var(--slotted-tone-accent-text) calc(var(--slotted-highlight-tint-opacity, 0.075) * 100%),
+        transparent
+      )
+    );
+    /**
+     * A run that wraps is two boxes, and each of them carries the ground and
+     * the rule: without this the tint runs to the end of the first line and
+     * stops, and the second half of the word is unmarked.
+     */
+    -webkit-box-decoration-break: clone;
+    box-decoration-break: clone;
+    /* No corner: a radius is a box around the letters, and the mark is a band
+       behind them. */
+    border-radius: var(--slotted-radius-none, 0px);
+    color: var(--slotted-highlight-color, var(--slotted-tone-accent-text));
+    font-weight: inherit;
+    letter-spacing: inherit;
+    padding: 0;
+    text-decoration-color: var(--slotted-highlight-rule-color, var(--slotted-tone-accent-border));
+    text-decoration-line: underline;
+    text-decoration-thickness: var(--slotted-border-width-thin, 1px);
+    /* One step of the space scale between the letters and the rule, which is
+       the smallest the scale holds. */
+    text-underline-offset: var(--slotted-space-1, 0.125rem);
+  }
+
+  /**
+   * The match a find bar is standing on. Every browser's own find draws the
+   * active match apart from the others, and it does so by filling it: the band
+   * cannot be made stronger by degrees — 0.075 is the cap the 7:1 promise sets
+   * in `high-contrast`, and doubling it leaves 6.5:1 — so the current mark
+   * takes the accent's solid ground and the ink the theme pairs with it, which
+   * is a ratio the theme already promises. The rule goes: drawn in the ink it
+   * sits inside the fill and reads as nothing, which the capture showed. An
+   * outline is not used: R3 reserves it for the focus ring.
+   */
+  [data-ui='highlight'] [data-part='match'][data-current] {
+    background-color: var(--slotted-highlight-current-background, var(--slotted-tone-accent-solid));
+    color: var(--slotted-highlight-current-color, var(--slotted-tone-accent-on-solid));
+    text-decoration-line: none;
+  }
+
+  /**
+   * A disabled row's mark steps down with the rest of it. The mark says "this
+   * is why the option is here", and saying it in the accent tone on a row that
+   * answers nothing puts the loudest thing on the surface on the one option a
+   * reader cannot take. The rule stays: the reader still has to see which span
+   * matched, and it is the part of the mark that costs no colour.
+   *
+   * The state is the root's own, or any row's above it: the host's option
+   * already carries `data-disabled`, and the family reads it from there rather
+   * than asking the host to say it twice.
+   */
+  [data-ui='highlight']:is([data-disabled], [data-disabled] *) [data-part='match'] {
+    background-color: var(--slotted-highlight-disabled-background, transparent);
+    color: inherit;
+    /* Restated for the current match, which gave the rule up for its fill. */
+    text-decoration-line: underline;
+  }
+
+  /**
+   * Under forced colours the accent ground becomes `Canvas` and the mark would
+   * vanish. `Mark` and `MarkText` are the system pair for exactly this element,
+   * and they are the one case where this sheet names a system colour because
+   * the theme has no token that maps to it. The current match takes
+   * `Highlight` and `HighlightText`, the pair the user agent draws its own
+   * active find match in.
+   */
+  @media (forced-colors: active) {
+    [data-ui='highlight'] [data-part='match'],
+    [data-ui='highlight']:is([data-disabled], [data-disabled] *) [data-part='match'] {
+      background-color: Mark;
+      color: MarkText;
+      forced-color-adjust: none;
+    }
+
+    [data-ui='highlight'] [data-part='match'][data-current] {
+      background-color: Highlight;
+      color: HighlightText;
+    }
+  }
+}

package/src/highlight/highlight.tokens.json

@@ -0,0 +1,16 @@
+[
+  "--slotted-border-width-thin",
+  "--slotted-highlight-background",
+  "--slotted-highlight-color",
+  "--slotted-highlight-current-background",
+  "--slotted-highlight-current-color",
+  "--slotted-highlight-disabled-background",
+  "--slotted-highlight-rule-color",
+  "--slotted-highlight-tint-opacity",
+  "--slotted-radius-none",
+  "--slotted-space-1",
+  "--slotted-tone-accent-border",
+  "--slotted-tone-accent-on-solid",
+  "--slotted-tone-accent-solid",
+  "--slotted-tone-accent-text"
+]

package/src/hover-card/hover-card.css

@@ -0,0 +1,93 @@
+@layer slotted.components {
+  /**
+   * The trigger of a hover card: the link a reader hovers or focuses to see a
+   * preview of where it goes, or of who it names.
+   *
+   *   root ─ the trigger ─ <a> ─ data-open
+   *         └─ [data-ui='popover'] ─ unchanged, autoFocus off ─┐
+   *            │  header / body / footer — the consumer's      │
+   *            │  arrow                                        │
+   *            └───────────────────────────────────────────────┘
+   *
+   * The family owns this one part and no surface: the card is `popover`,
+   * imported as it is, the way `menubar` holds `menu`. Radix's `HoverCard`
+   * restates `Popover.Content` under a second name, and two copies drift.
+   *
+   * ── Why the trigger is painted at all ────────────────────────────────
+   *
+   * A bare `<a>` is the browser's blue. When the consumer renders the trigger
+   * onto `link`, that family's paint wins and these rules never match; when
+   * the family renders its own anchor, it owes the reader a link that reads as
+   * one and says, while the card shows, which word the card is about.
+   */
+  [data-ui='hover-card'] {
+    --_text: var(--slotted-hover-card-color, var(--slotted-tone-accent-text, LinkText));
+    /* The underline at rest is the text at less than half strength, as
+       `link` draws it: present enough to say "link", quiet enough that a
+       paragraph of mentions is not a paragraph of bars. */
+    --_underline: var(
+      --slotted-hover-card-underline-color,
+      color-mix(in oklab, var(--_text) 40%, transparent)
+    );
+    /* The ground behind the word while its card is open. A band with no edge
+       to pair with is mixed from the tone's text at the share `highlight` uses
+       for the band behind a matched span (`docs/token-foundation.md`,
+       Highlight), rather than taken from the tone's surface: the surface is
+       painted the page's own white in `high-contrast`, where a state that has
+       to be seen would then not be. */
+    --_tint: var(
+      --slotted-hover-card-tint,
+      color-mix(
+        in oklab,
+        var(--_text) calc(var(--slotted-highlight-tint-opacity, 0.075) * 100%),
+        transparent
+      )
+    );
+    --_halo: var(--slotted-hover-card-halo, var(--slotted-space-1, 0.125rem));
+
+    border-radius: var(--slotted-hover-card-radius, var(--slotted-radius-xs, 2px));
+    color: var(--_text);
+    text-decoration-color: var(--_underline);
+    text-decoration-line: underline;
+    text-decoration-thickness: from-font;
+    text-underline-offset: 0.15em;
+    transition:
+      background-color var(--slotted-duration-short) var(--slotted-easing-standard),
+      box-shadow var(--slotted-duration-short) var(--slotted-easing-standard),
+      text-decoration-color var(--slotted-duration-short) var(--slotted-easing-standard);
+  }
+
+  /* Hover fills the underline. The card itself waits for `openDelay`, so this
+     is the only thing that answers the pointer at once. */
+  [data-ui='hover-card']:not([data-disabled]):hover {
+    text-decoration-color: currentColor;
+  }
+
+  /**
+   * While the card shows, the word it is about is marked: the tint behind it
+   * and a halo of the same colour drawn as a spread shadow, so the inline box
+   * grows by one step of space without moving the line it sits on. A padding
+   * would have reflowed the paragraph on every open.
+   */
+  [data-ui='hover-card'][data-open] {
+    background-color: var(--_tint);
+    box-shadow: 0 0 0 var(--_halo) var(--_tint);
+    text-decoration-color: currentColor;
+  }
+
+  [data-ui='hover-card']:focus-visible {
+    outline: var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);
+    outline-offset: var(--slotted-focus-ring-offset, 2px);
+  }
+
+  /**
+   * Forced colours remove backgrounds, so the open mark would vanish with them;
+   * a link the reader is looking at is underlined in the system's own link
+   * colour instead, which is the one thing forced colours keep.
+   */
+  @media (forced-colors: active) {
+    [data-ui='hover-card'][data-open] {
+      text-decoration-thickness: var(--slotted-border-width-thick, 2px);
+    }
+  }
+}

package/src/hover-card/hover-card.tokens.json

@@ -0,0 +1,17 @@
+[
+  "--slotted-border-width-thick",
+  "--slotted-duration-short",
+  "--slotted-easing-standard",
+  "--slotted-focus-ring-color",
+  "--slotted-focus-ring-offset",
+  "--slotted-focus-ring-width",
+  "--slotted-highlight-tint-opacity",
+  "--slotted-hover-card-color",
+  "--slotted-hover-card-halo",
+  "--slotted-hover-card-radius",
+  "--slotted-hover-card-tint",
+  "--slotted-hover-card-underline-color",
+  "--slotted-radius-xs",
+  "--slotted-space-1",
+  "--slotted-tone-accent-text"
+]

package/src/icon/icon.css

@@ -0,0 +1,136 @@
+@layer slotted.components {
+  /**
+   * Icon is the box a glyph is drawn in, not the glyph. The library ships no
+   * catalogue: the artwork is the consumer's, and this family owns the size it
+   * is drawn at, the colour it inherits, where it sits against a line of text,
+   * and whether it mirrors in a right-to-left document.
+   *
+   * The size is read through the family token rather than stated, so a
+   * container — a button, a table row, a tag — sizes every icon inside it by
+   * setting `--slotted-icon-size` once and needs to know nothing else about
+   * this family. An instance overrides that container through `data-size`,
+   * which sets the same token on the element itself.
+   */
+  [data-ui='icon'] {
+    --_size: var(--slotted-icon-size, var(--slotted-control-icon-size-md, 16px));
+
+    align-items: center;
+    block-size: var(--_size);
+    display: inline-flex;
+    /* A box that shrinks is not a box: an icon keeps its size in a flex row. */
+    flex: none;
+    inline-size: var(--_size);
+    justify-content: center;
+    line-height: 1;
+    /**
+     * An inline box sits with its bottom edge on the baseline, which puts its
+     * centre half its own height above the line while text reads centred
+     * between the baseline and the cap height. The icon reads high without a
+     * correction, and by more the larger it is relative to the type around it:
+     * a constant shift is right at one ratio and wrong at every other, which a
+     * large step inside small text shows plainly.
+     *
+     * The default is therefore computed rather than stated. `cap` is the cap
+     * height of the font the icon inherits and `--_size` is the box, so the
+     * expression puts the box's centre on the text's optical centre at every
+     * combination of the two. At `1em` it resolves near the `-0.125em` this
+     * family used to state, which is why that constant looked right until the
+     * ratio changed. A theme still overrides the whole thing through the token.
+     *
+     * It is inert inside a flex or grid container, where alignment is the
+     * parent's decision.
+     */
+    vertical-align: var(--slotted-icon-baseline-shift, calc(0.5cap - 0.5 * var(--_size)));
+  }
+
+  /**
+   * The artwork fills the box rather than deciding it. The descendant form is
+   * needed as well as the child form because a glyph component renders its own
+   * host in between, as `<ng-icon><svg/></ng-icon>` does. This reaches into
+   * markup the consumer wrote, deliberately: a box whose content sets its own
+   * size is not a box.
+   *
+   * Such a host sizes itself at `1em` from a stylesheet outside any layer,
+   * and an unlayered declaration outranks a layered one whatever its
+   * specificity: the two lengths below never reach it. The box does not fight
+   * that host. It gives the host a font-size equal to the box, and `1em` is
+   * then the box — 14 pixels at `sm`, the type's size at `text`. The font-size
+   * is on the child and not on the box, because `vertical-align` above reads
+   * `cap` from the text the box sits in.
+   */
+  [data-ui='icon'] > *,
+  [data-ui='icon'] svg {
+    block-size: 100%;
+    display: block;
+    font-size: var(--_size);
+    inline-size: 100%;
+  }
+
+  /**
+   * Three steps read the control icon scale, which the theme restates per
+   * density, so an icon shrinks with the control beside it. The fourth follows
+   * the type it sits in, because sixteen pixels inside a display heading is
+   * not an icon.
+   */
+  [data-ui='icon'][data-size='text'] {
+    --slotted-icon-size: 1em;
+  }
+
+  [data-ui='icon'][data-size='sm'] {
+    --slotted-icon-size: var(--slotted-control-icon-size-sm, 14px);
+  }
+
+  [data-ui='icon'][data-size='md'] {
+    --slotted-icon-size: var(--slotted-control-icon-size-md, 16px);
+  }
+
+  [data-ui='icon'][data-size='lg'] {
+    --slotted-icon-size: var(--slotted-control-icon-size-lg, 18px);
+  }
+
+  /**
+   * Colour is inherited rather than painted, so an icon beside a label is the
+   * colour of that label without anyone deciding it. The family sets `color`
+   * and never `fill` or `stroke`: stroked artwork declares
+   * `stroke="currentColor"` and filled artwork declares `fill="currentColor"`,
+   * and imposing either would break the other.
+   */
+  [data-ui='icon'][data-tone='default'] {
+    color: var(--slotted-text, CanvasText);
+  }
+
+  [data-ui='icon'][data-tone='muted'] {
+    color: var(--slotted-text-muted, GrayText);
+  }
+
+  [data-ui='icon'][data-tone='accent'] {
+    color: var(--slotted-tone-accent-text, LinkText);
+  }
+
+  [data-ui='icon'][data-tone='success'] {
+    color: var(--slotted-tone-success-text, CanvasText);
+  }
+
+  [data-ui='icon'][data-tone='warning'] {
+    color: var(--slotted-tone-warning-text, CanvasText);
+  }
+
+  [data-ui='icon'][data-tone='danger'] {
+    color: var(--slotted-tone-danger-text, CanvasText);
+  }
+
+  [data-ui='icon'][data-tone='inverse'] {
+    color: var(--slotted-text-inverse, Canvas);
+  }
+
+  /**
+   * Only artwork that points somewhere mirrors, and only the consumer knows
+   * which artwork that is. `:dir()` rather than an ancestor `[dir]` selector,
+   * because a mirrored icon inside a left-to-right island inside a
+   * right-to-left page has to read the directionality that actually applies to
+   * it.
+   */
+  [data-ui='icon'][data-directional]:dir(rtl) {
+    scale: -1 1;
+  }
+}

package/src/icon/icon.tokens.json

@@ -0,0 +1,14 @@
+[
+  "--slotted-control-icon-size-lg",
+  "--slotted-control-icon-size-md",
+  "--slotted-control-icon-size-sm",
+  "--slotted-icon-baseline-shift",
+  "--slotted-icon-size",
+  "--slotted-text",
+  "--slotted-text-inverse",
+  "--slotted-text-muted",
+  "--slotted-tone-accent-text",
+  "--slotted-tone-danger-text",
+  "--slotted-tone-success-text",
+  "--slotted-tone-warning-text"
+]