@rtkelly-labs/design-system 0.0.0-bootstrap.0 → 0.16.0-dev.0.37dedac

package/dist/styles.css

@@ -0,0 +1,203 @@
+/* @rtkelly-labs/design-system — the full opinionated stylesheet.
+ *
+ * theme.css alone ships the tokens and nothing else, for consumers who want to
+ * bring their own resets and fonts. This file layers on the web fonts and the
+ * global resets — and nothing more.
+ *
+ * ============================================================================
+ * Why there are no component classes here
+ * ============================================================================
+ *
+ * Styling lives in the TSX, as Tailwind utilities on the element. What remains
+ * in this file is only what has no element in a component to hang a `className`
+ * on: the document itself, and bare tags arriving from a consumer's own markup.
+ *
+ * `pnpm check:css` enforces that. It counts every declaration whose selector
+ * names a class this repo authors, and fails when the number rises.
+ *
+ * The classes that used to live here — `.brutalist-card`, `.brutalist-btn`,
+ * `.brutalist-badge`, `.ascii-divider` — are now utilities inside `Card`,
+ * `Badge` and `AsciiDivider`. `.brutalist-btn` and `.brutalist-btn-pink` had no
+ * caller anywhere in this package and are gone; use `<Button />`.
+ */
+/* Fonts are self-hosted, from `@fontsource`, and that is a correctness choice
+ * before it is a performance one.
+ *
+ * These lines replace a remote `@import` of the Google Fonts CSS API. Four
+ * things were wrong with that:
+ *
+ *   1. **It transmits every visitor's IP to a third party.** The Munich
+ *      Regional Court held that doing so without consent breaches the GDPR,
+ *      specifically because self-hosting was available and so the transfer was
+ *      not necessary. A design system should not hand that decision — or that
+ *      liability — to whoever installs it.
+ *   2. **The performance argument no longer exists.** It rested on a shared
+ *      browser cache across every site using Google Fonts; cache partitioning
+ *      ended that, so each origin downloads its own copy regardless.
+ *   3. **`@import` of a remote stylesheet is the slowest possible delivery.**
+ *      It serialises: fetch this file, parse it, discover the import, fetch
+ *      Google's CSS, parse that, and only then fetch the WOFF2s. Three round
+ *      trips of render-blocking work before text can paint.
+ *   4. **The rendering was not pinned to anything.** Google can change a font
+ *      binary with no commit here, which moves both consumer rendering and this
+ *      repo's visual baselines with nothing to explain why. Now the exact bytes
+ *      are in the lockfile, pinned by the same mechanism as every other
+ *      dependency.
+ *
+ * Variable where a variable build exists — one file spans the whole weight axis
+ * instead of four to seven static files. `ibm-plex-mono` has no variable build,
+ * so its four weights are imported individually.
+ *
+ * Note `space-grotesk` really is a 300-700 family, while the old Google request
+ * asked for 800. Whatever resolved that gap before — Google clamping to 700
+ * server-side, or the browser synthesising — the outcome is unchanged: the
+ * visual suite compares all 38 baselines at `maxDiffPixels: 0` and every one of
+ * them is byte-identical across this change. Worth knowing that
+ * `font-extrabold` on a display face is not drawn at 800 by this family, but it
+ * was not before either.
+ *
+ * `theme.css` remains the bring-your-own-fonts path: it declares only the
+ * `--ds-font-*` roles, each indirecting through `var(--font-inter, ...)` so a
+ * consumer can substitute their own faces without touching this file. */
+@import "@fontsource-variable/inter";
+@import "@fontsource-variable/space-grotesk";
+@import "@fontsource/ibm-plex-mono/400.css";
+@import "@fontsource/ibm-plex-mono/500.css";
+@import "@fontsource/ibm-plex-mono/600.css";
+@import "@fontsource/ibm-plex-mono/700.css";
+@import "@fontsource/vt323";
+
+@font-face {
+  font-family: "Symbols Nerd Font Mono";
+  src: url("./fonts/SymbolsNerdFontMono-Regular.woff2") format("woff2");
+  font-weight: 400 700;
+  font-style: normal;
+  font-display: swap;
+  unicode-range: U+E000-F8FF, U+F0000-FFFFF, U+23FB-23FE, U+2B58;
+}
+
+/* Every symbol a story renders, drawn by a font this package ships.
+ *
+ * None of the text faces above carry arrows, box drawing, blocks, geometric
+ * shapes, dingbats or `⌘`; IBM Plex Mono is latin-only and Nerd Fonts' symbol
+ * set covers none of U+2500-259F. So `→`, `✓`, `⌘` and every ASCII-art rule
+ * were drawn by whatever the machine had installed — Courier New on one runner,
+ * nothing at all for `⌘` there, a different font in the Playwright image. The
+ * visual suite could not tell a regression from a different operating system.
+ *
+ * A 21 KB subset of JetBrains Mono (OFL-1.1, `fonts/DSSymbols-OFL.txt`), cut to
+ * these blocks only, so it never replaces a Latin glyph. Every advance is 600 of
+ * 1000 units, the same as IBM Plex Mono, so box drawing keeps the mono stack's
+ * column width. One weight declared across the whole axis, so bold text never
+ * gets a synthesised, fattened box-drawing line. `check:fonts` fails when a
+ * rendered character reaches no shipped face. */
+@font-face {
+  font-family: "DS Symbols";
+  src: url("./fonts/DSSymbols-Regular.woff2") format("woff2");
+  font-weight: 100 900;
+  font-style: normal;
+  font-display: swap;
+  unicode-range: U+0370-03FF, U+2190-21FF, U+2300-23FF, U+2500-259F, U+25A0-25FF, U+2600-26FF, U+2700-27BF;
+}
+
+@import "tailwindcss";
+@import "./theme.css";
+@import "./prose.css";
+
+/* The `--animate-ds-*` loops and their keyframes used to be declared here,
+ * which left a consumer on the documented `theme.css` contract with a Spinner
+ * that did not spin (#302). They are generated into `theme.css` now, from
+ * `LOOPS` in `src/theme/media.ts`, and reach this sheet through the import
+ * above. */
+
+body, html {
+  font-family: var(--ds-font-body);
+  background-color: var(--ds-surface-base);
+  color: var(--ds-text-primary);
+}
+
+/* Typography defaults for bare tags. A consumer's own markup and a Markdown
+ * pipeline both emit these with no class to target, so this is the one place
+ * the type roles can reach them. Components state their own font.
+ *
+ * `!important` is inherited from the rule these replace, and is load-bearing
+ * while prose.css still sets fonts on `.docs-prose h1` and friends: a component
+ * carrying `font-mono` inside an article would otherwise lose to the more
+ * specific descendant selector. It comes out with those prose rules. */
+h1, h2, h3, h4, h5, h6 {
+  font-family: var(--ds-font-display) !important;
+}
+
+code, pre {
+  font-family: var(--ds-font-mono) !important;
+}
+
+/* Radius, as a token rather than a reset.
+ *
+ * This was `*, *::before, *::after { border-radius: 0px !important }` — a
+ * universal selector with `!important`, reaching every element in a consumer's
+ * document including ones this package has never heard of. A consumer wanting a
+ * rounded avatar in their own markup could not have one, and the only way out
+ * was a second `!important`. That is #54.
+ *
+ * Zero is a value on the radius scale, not the absence of one. Declared per
+ * Medium in `src/theme/media.ts` and emitted as `--ds-radius-none`, it stops
+ * being a reset: scoped to this package's own elements, and overridable by
+ * ordinary specificity.
+ *
+ * There is no rule here at all, and that is the fix.
+ *
+ * `theme.css` redefines Tailwind's whole radius scale to the Medium's value, so
+ * every `rounded-*` utility — including `rounded-lg` on a component this
+ * package ships — resolves to zero without any selector. Nothing else needs
+ * saying.
+ *
+ * A rule for bare `<input>` / `<button>` tags arriving from a consumer's own
+ * markup was the obvious next thought, and `check:css` was right to refuse it:
+ * `src/styles.css` has a budget of zero, and reaching into a consumer's
+ * document is precisely what #54 is about. A consumer's bare tags are theirs. */
+
+/* Keyboard focus must stay visible even where a component replaces the ring
+ * with a border colour — a border swap is invisible under forced-colors.
+ *
+ * The geometry is the Medium's and the colour is the Level's, which is the two
+ * axes in one declaration. `media.ts` has declared `focusRing` since the axis
+ * landed and this rule kept its own hardcoded `2px` — a token with no reader,
+ * which is the same fault the palette had before `accentHue` gave the Roles
+ * something to point at. A ring that has to be thicker on a 1080p frame now
+ * changes in one place. */
+:focus-visible {
+  outline: var(--ds-focus-width) solid var(--ds-accent-primary);
+  outline-offset: var(--ds-focus-offset);
+}
+
+/* Paper.
+
+ * The document-level half of the PDF flow: what a report or a docs page does
+ * when it leaves the screen. Element selectors and at-rules only — `check:css`
+ * keeps its budget at zero here, and the per-component decisions (hide the
+ * header, drop the sidebar) are `print:` utilities on the element, which is
+ * where all styling lives.
+ *
+ * The margin is declared once, on `@page`, and `ds-report --pdf` reads it with
+ * `preferCSSPageSize` rather than restating it at the driver. The motion kill
+ * is switch 3 of `docs/deterministic-rendering.md` applied to the one
+ * consumer that has no capture harness: the browser's own print pipeline. A
+ * stylesheet is where it belongs because it is wrong on screen and right
+ * exactly once — on paper. Colour-exact is what keeps a border that took the
+ * contrast gate onto the page instead of into a driver's ink-saving guess. */
+@media print {
+  @page { margin: 16mm 14mm; }
+
+  *,
+  *::before,
+  *::after {
+    transition: none !important;
+    animation: none !important;
+    -webkit-print-color-adjust: exact;
+    print-color-adjust: exact;
+  }
+
+  h1, h2, h3, h4 { break-after: avoid; }
+  p { orphans: 3; widows: 3; }
+}

package/dist/theme/ansi.js

@@ -0,0 +1,77 @@
+// src/theme/ansi.ts
+import { LEVELS } from "./levels.js";
+function achromatic(level, step) {
+  const dark = level.polarity === "dark";
+  switch (step) {
+    // The terminal's own black: the theme's deepest ground on a dark Level, its
+    // ink on a light one.
+    case "darkest":
+      return dark ? level.surface.sunken : level.text.primary;
+    case "dark":
+      return dark ? level.surface.raised : level.text.secondary;
+    case "light":
+      return dark ? level.text.secondary : level.surface.sunken;
+    case "lightest":
+      return dark ? level.text.primary : level.surface.raised;
+  }
+}
+var ANSI_SLOTS = [
+  "black",
+  "red",
+  "green",
+  "yellow",
+  "blue",
+  "magenta",
+  "cyan",
+  "white",
+  "brightBlack",
+  "brightRed",
+  "brightGreen",
+  "brightYellow",
+  "brightBlue",
+  "brightMagenta",
+  "brightCyan",
+  "brightWhite"
+];
+var SLOTS = {
+  black: { kind: "role", read: (l) => achromatic(l, "darkest") },
+  red: { kind: "hue", hue: "red", bright: false },
+  green: { kind: "hue", hue: "green", bright: false },
+  yellow: { kind: "hue", hue: "yellow", bright: false },
+  blue: { kind: "hue", hue: "blue", bright: false },
+  magenta: { kind: "hue", hue: "magenta", bright: false },
+  cyan: { kind: "hue", hue: "cyan", bright: false },
+  white: { kind: "role", read: (l) => achromatic(l, "light") },
+  brightBlack: { kind: "role", read: (l) => achromatic(l, "dark") },
+  brightRed: { kind: "hue", hue: "red", bright: true },
+  brightGreen: { kind: "hue", hue: "green", bright: true },
+  brightYellow: { kind: "hue", hue: "yellow", bright: true },
+  brightBlue: { kind: "hue", hue: "blue", bright: true },
+  brightMagenta: { kind: "hue", hue: "magenta", bright: true },
+  brightCyan: { kind: "hue", hue: "cyan", bright: true },
+  brightWhite: { kind: "role", read: (l) => achromatic(l, "lightest") }
+};
+function ansiScheme(level) {
+  const def = LEVELS[level];
+  const slots = {};
+  for (const slot of ANSI_SLOTS) {
+    const source = SLOTS[slot];
+    slots[slot] = source.kind === "hue" ? (source.bright ? def.paletteBright : def.palette)[source.hue] : source.kind === "role" ? source.read(def) : source.read();
+  }
+  return {
+    level,
+    slots,
+    chrome: {
+      background: def.surface.base,
+      foreground: def.text.primary,
+      cursor: def.accent.primary,
+      selectionBackground: def.surface.raised
+    }
+  };
+}
+export {
+  ANSI_SLOTS,
+  SLOTS,
+  ansiScheme
+};
+//# sourceMappingURL=ansi.js.map

package/dist/theme/ansi.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/theme/ansi.ts"],"sourcesContent":["import { LEVELS } from './levels.ts';\nimport type { LevelDefinition, PALETTE_HUES, ThemeLevel } from './levels.ts';\n\n/**\n * The sixteen ANSI slots, and the fan-out that fills them from ten Hues.\n *\n * ## Why a terminal is the cheapest Target on the list\n *\n * Sixteen Slots, a foreground, a background, a cursor and a selection. No\n * chrome, no scopes, no semantic map. And four encodings — iTerm2, Windows\n * Terminal, Alacritty, Ghostty — are the same sixteen values written four\n * ways, so one fan-out unlocks all of them.\n *\n * It was also, until `palette` existed, completely impossible. A terminal has\n * sixteen positions *named by colour* and no concept of a keyword, so a Role\n * vocabulary could not address it at all. Measured before the Hue layer\n * landed: 5 of 16 slots fillable, with `accent.tertiary` stretched across both\n * `red` and `magenta` — 30° from each — and `blue` uncovered at 52°.\n *\n * ## Why the map lives here and not in a Level\n *\n * ADR 0001: *\"Slot maps are Derived, and their fan-out lives in the Emitter.\"*\n * It is data, so it is unit-testable, and keeping it out of the Levels means\n * adding a Target can never change a colour. `SLOTS` below is the whole of the\n * decision; the values are the Level's.\n *\n * ## The one honest compromise\n *\n * `blue` resolves to `palette.blue`, which sits at **233°** — a sky blue, not\n * a true blue — because that is where six years of authored colour put the\n * dark Level's primary accent. `violet` is at 295°, leaving a 62° gap where a\n * true blue would be. Recorded rather than papered over: an eleventh Hue would\n * close it, and ten is already the ceiling, with `teal`/`cyan` on the light\n * Level at ΔE 0.049.\n */\n\n/**\n * The four achromatic slots, resolved by *lightness* rather than by name.\n *\n * The first version of this map read `surface.sunken` for `black` and\n * `text.secondary` for `white` — correct on a dark Level and wrong on a light\n * one, where it gave the terminal a `black` of `#efeadf` (nearly white) and\n * collided `brightBlack` and `brightWhite` on `#ffffff`. A terminal's ramp runs\n * dark to light regardless of which way the theme runs, so the slots have to\n * ask about lightness, not about which Group a value lives in.\n *\n * `fixed.white` is deliberately not used for `lightest`. A terminal cell\n * painted pure white inside a `#f5f3ec` window reads as a hole in the same way\n * true black does inside `#121316` — the extreme should be the theme's own\n * extreme, and on the dark Level `text.primary` already is.\n */\nfunction achromatic(\n  level: LevelDefinition,\n  step: 'darkest' | 'dark' | 'light' | 'lightest',\n): string {\n  const dark = level.polarity === 'dark';\n  switch (step) {\n    // The terminal's own black: the theme's deepest ground on a dark Level, its\n    // ink on a light one.\n    case 'darkest':\n      return dark ? level.surface.sunken : level.text.primary;\n    case 'dark':\n      return dark ? level.surface.raised : level.text.secondary;\n    case 'light':\n      return dark ? level.text.secondary : level.surface.sunken;\n    case 'lightest':\n      return dark ? level.text.primary : level.surface.raised;\n  }\n}\n\n/** The sixteen slots, in the order every terminal format lists them. */\nexport const ANSI_SLOTS = [\n  'black',\n  'red',\n  'green',\n  'yellow',\n  'blue',\n  'magenta',\n  'cyan',\n  'white',\n  'brightBlack',\n  'brightRed',\n  'brightGreen',\n  'brightYellow',\n  'brightBlue',\n  'brightMagenta',\n  'brightCyan',\n  'brightWhite',\n] as const;\n\nexport type AnsiSlot = (typeof ANSI_SLOTS)[number];\n\n/**\n * What fills each slot.\n *\n * `hue` reads `palette` (or `paletteBright` when `bright`); `role` reads a\n * named Role path for the four achromatic slots, which are grounds and inks\n * rather than hues. A slot is never a literal — that would be a second origin,\n * which ADR 0002 forbids.\n */\ntype SlotSource =\n  | { readonly kind: 'hue'; readonly hue: (typeof PALETTE_HUES)[number]; readonly bright: boolean }\n  | { readonly kind: 'role'; readonly read: (level: LevelDefinition) => string }\n  | { readonly kind: 'fixed'; readonly read: () => string };\n\n/**\n * The fan-out map. **This is the whole decision**, and it is data.\n *\n * The four achromatic slots are the interesting ones. A terminal's `black` is\n * not `fixed.black` — it is the darkest ground the theme *has*, because a\n * terminal cell painted true black inside a `#121316` window reads as a hole.\n * Likewise `white` is the theme's ink, not `#ffffff`. Only `brightWhite`\n * reaches for the invariant, because \"brighter than the ink\" has nowhere else\n * to go.\n */\nexport const SLOTS: Readonly<Record<AnsiSlot, SlotSource>> = {\n  black: { kind: 'role', read: (l) => achromatic(l, 'darkest') },\n  red: { kind: 'hue', hue: 'red', bright: false },\n  green: { kind: 'hue', hue: 'green', bright: false },\n  yellow: { kind: 'hue', hue: 'yellow', bright: false },\n  blue: { kind: 'hue', hue: 'blue', bright: false },\n  magenta: { kind: 'hue', hue: 'magenta', bright: false },\n  cyan: { kind: 'hue', hue: 'cyan', bright: false },\n  white: { kind: 'role', read: (l) => achromatic(l, 'light') },\n\n  brightBlack: { kind: 'role', read: (l) => achromatic(l, 'dark') },\n  brightRed: { kind: 'hue', hue: 'red', bright: true },\n  brightGreen: { kind: 'hue', hue: 'green', bright: true },\n  brightYellow: { kind: 'hue', hue: 'yellow', bright: true },\n  brightBlue: { kind: 'hue', hue: 'blue', bright: true },\n  brightMagenta: { kind: 'hue', hue: 'magenta', bright: true },\n  brightCyan: { kind: 'hue', hue: 'cyan', bright: true },\n  brightWhite: { kind: 'role', read: (l) => achromatic(l, 'lightest') },\n};\n\n/**\n * The four values a terminal needs beyond the sixteen.\n *\n * `selectionBackground` is the one that would be wrong to derive. A terminal\n * has no alpha, so a selection band must be an opaque colour that every\n * foreground still reads against — which is why it is `surface.raised` and not\n * a tinted `surface.base`. Composited contrast, resolved at declaration time\n * because the Target cannot resolve it at paint time.\n */\nexport interface AnsiChrome {\n  readonly background: string;\n  readonly foreground: string;\n  readonly cursor: string;\n  readonly selectionBackground: string;\n}\n\nexport interface AnsiScheme {\n  readonly level: ThemeLevel;\n  readonly slots: Readonly<Record<AnsiSlot, string>>;\n  readonly chrome: AnsiChrome;\n}\n\n/** Resolve one Level into a complete sixteen-colour scheme. */\nexport function ansiScheme(level: ThemeLevel): AnsiScheme {\n  const def = LEVELS[level];\n  const slots = {} as Record<AnsiSlot, string>;\n\n  for (const slot of ANSI_SLOTS) {\n    const source = SLOTS[slot];\n    slots[slot] =\n      source.kind === 'hue'\n        ? (source.bright ? def.paletteBright : def.palette)[source.hue]\n        : source.kind === 'role'\n          ? source.read(def)\n          : source.read();\n  }\n\n  return {\n    level,\n    slots,\n    chrome: {\n      background: def.surface.base,\n      foreground: def.text.primary,\n      cursor: def.accent.primary,\n      selectionBackground: def.surface.raised,\n    },\n  };\n}\n"],"mappings":";AAAA,SAAS,cAAc;AAmDvB,SAAS,WACP,OACA,MACQ;AACR,QAAM,OAAO,MAAM,aAAa;AAChC,UAAQ,MAAM;AAAA;AAAA;AAAA,IAGZ,KAAK;AACH,aAAO,OAAO,MAAM,QAAQ,SAAS,MAAM,KAAK;AAAA,IAClD,KAAK;AACH,aAAO,OAAO,MAAM,QAAQ,SAAS,MAAM,KAAK;AAAA,IAClD,KAAK;AACH,aAAO,OAAO,MAAM,KAAK,YAAY,MAAM,QAAQ;AAAA,IACrD,KAAK;AACH,aAAO,OAAO,MAAM,KAAK,UAAU,MAAM,QAAQ;AAAA,EACrD;AACF;AAGO,IAAM,aAAa;AAAA,EACxB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AA2BO,IAAM,QAAgD;AAAA,EAC3D,OAAO,EAAE,MAAM,QAAQ,MAAM,CAAC,MAAM,WAAW,GAAG,SAAS,EAAE;AAAA,EAC7D,KAAK,EAAE,MAAM,OAAO,KAAK,OAAO,QAAQ,MAAM;AAAA,EAC9C,OAAO,EAAE,MAAM,OAAO,KAAK,SAAS,QAAQ,MAAM;AAAA,EAClD,QAAQ,EAAE,MAAM,OAAO,KAAK,UAAU,QAAQ,MAAM;AAAA,EACpD,MAAM,EAAE,MAAM,OAAO,KAAK,QAAQ,QAAQ,MAAM;AAAA,EAChD,SAAS,EAAE,MAAM,OAAO,KAAK,WAAW,QAAQ,MAAM;AAAA,EACtD,MAAM,EAAE,MAAM,OAAO,KAAK,QAAQ,QAAQ,MAAM;AAAA,EAChD,OAAO,EAAE,MAAM,QAAQ,MAAM,CAAC,MAAM,WAAW,GAAG,OAAO,EAAE;AAAA,EAE3D,aAAa,EAAE,MAAM,QAAQ,MAAM,CAAC,MAAM,WAAW,GAAG,MAAM,EAAE;AAAA,EAChE,WAAW,EAAE,MAAM,OAAO,KAAK,OAAO,QAAQ,KAAK;AAAA,EACnD,aAAa,EAAE,MAAM,OAAO,KAAK,SAAS,QAAQ,KAAK;AAAA,EACvD,cAAc,EAAE,MAAM,OAAO,KAAK,UAAU,QAAQ,KAAK;AAAA,EACzD,YAAY,EAAE,MAAM,OAAO,KAAK,QAAQ,QAAQ,KAAK;AAAA,EACrD,eAAe,EAAE,MAAM,OAAO,KAAK,WAAW,QAAQ,KAAK;AAAA,EAC3D,YAAY,EAAE,MAAM,OAAO,KAAK,QAAQ,QAAQ,KAAK;AAAA,EACrD,aAAa,EAAE,MAAM,QAAQ,MAAM,CAAC,MAAM,WAAW,GAAG,UAAU,EAAE;AACtE;AAyBO,SAAS,WAAW,OAA+B;AACxD,QAAM,MAAM,OAAO,KAAK;AACxB,QAAM,QAAQ,CAAC;AAEf,aAAW,QAAQ,YAAY;AAC7B,UAAM,SAAS,MAAM,IAAI;AACzB,UAAM,IAAI,IACR,OAAO,SAAS,SACX,OAAO,SAAS,IAAI,gBAAgB,IAAI,SAAS,OAAO,GAAG,IAC5D,OAAO,SAAS,SACd,OAAO,KAAK,GAAG,IACf,OAAO,KAAK;AAAA,EACtB;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,MACN,YAAY,IAAI,QAAQ;AAAA,MACxB,YAAY,IAAI,KAAK;AAAA,MACrB,QAAQ,IAAI,OAAO;AAAA,MACnB,qBAAqB,IAAI,QAAQ;AAAA,IACnC;AAAA,EACF;AACF;","names":[]}

package/dist/theme/contrast.js

@@ -0,0 +1,342 @@
+// src/theme/contrast.ts
+var HEX = /^#([0-9a-f]{3,8})$/i;
+var RGB_FN = /^rgba?\(\s*([0-9.]+)[\s,]+([0-9.]+)[\s,]+([0-9.]+)(?:[\s,/]+([0-9.]+))?\s*\)$/i;
+function parseColor(value) {
+  const input = value.trim();
+  const hex = HEX.exec(input);
+  if (hex) {
+    const digits = hex[1];
+    const expand = (s) => Number.parseInt(s.length === 1 ? s + s : s, 16);
+    if (digits.length === 3 || digits.length === 4) {
+      return {
+        r: expand(digits[0]),
+        g: expand(digits[1]),
+        b: expand(digits[2]),
+        a: digits.length === 4 ? expand(digits[3]) / 255 : 1
+      };
+    }
+    if (digits.length === 6 || digits.length === 8) {
+      return {
+        r: expand(digits.slice(0, 2)),
+        g: expand(digits.slice(2, 4)),
+        b: expand(digits.slice(4, 6)),
+        a: digits.length === 8 ? expand(digits.slice(6, 8)) / 255 : 1
+      };
+    }
+  }
+  const fn = RGB_FN.exec(input);
+  if (fn) {
+    return {
+      r: Number(fn[1]),
+      g: Number(fn[2]),
+      b: Number(fn[3]),
+      a: fn[4] === void 0 ? 1 : Number(fn[4])
+    };
+  }
+  throw new Error(`Unparseable colour: ${value}`);
+}
+function composite(foreground, backdrop) {
+  if (foreground.a >= 1) return foreground;
+  const a = foreground.a;
+  return {
+    r: foreground.r * a + backdrop.r * (1 - a),
+    g: foreground.g * a + backdrop.g * (1 - a),
+    b: foreground.b * a + backdrop.b * (1 - a),
+    a: 1
+  };
+}
+function relativeLuminance(color) {
+  const channel = (value) => {
+    const c = value / 255;
+    return c <= 0.03928 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;
+  };
+  return 0.2126 * channel(color.r) + 0.7152 * channel(color.g) + 0.0722 * channel(color.b);
+}
+function contrastRatio(foreground, background) {
+  const bg = parseColor(background);
+  const fg = composite(parseColor(foreground), bg);
+  const lighter = Math.max(relativeLuminance(fg), relativeLuminance(bg));
+  const darker = Math.min(relativeLuminance(fg), relativeLuminance(bg));
+  return (lighter + 0.05) / (darker + 0.05);
+}
+function apcaContrast(foreground, background) {
+  const bg = parseColor(background);
+  const fg = composite(parseColor(foreground), bg);
+  const y = (c) => 0.2126729 * (c.r / 255) ** 2.4 + 0.7151522 * (c.g / 255) ** 2.4 + 0.072175 * (c.b / 255) ** 2.4;
+  const clamp = (lum) => lum > 0.022 ? lum : lum + (0.022 - lum) ** 1.414;
+  const text = clamp(y(fg));
+  const ground = clamp(y(bg));
+  if (Math.abs(ground - text) < 5e-4) return 0;
+  if (ground > text) {
+    const sapc2 = (ground ** 0.56 - text ** 0.57) * 1.14;
+    return sapc2 < 0.1 ? 0 : (sapc2 - 0.027) * 100;
+  }
+  const sapc = (ground ** 0.65 - text ** 0.62) * 1.14;
+  return sapc > -0.1 ? 0 : (sapc + 0.027) * 100;
+}
+var MAXIMUM_NEUTRAL_CHROMA = 0.045;
+function oklabChroma(hex) {
+  const decode = (v) => v <= 0.04045 ? v / 12.92 : ((v + 0.055) / 1.055) ** 2.4;
+  const [r, g, b] = [1, 3, 5].map((i) => decode(Number.parseInt(hex.slice(i, i + 2), 16) / 255));
+  const l = Math.cbrt(0.4122214708 * r + 0.5363325363 * g + 0.0514459929 * b);
+  const m = Math.cbrt(0.2119034982 * r + 0.6806995451 * g + 0.1073969566 * b);
+  const s = Math.cbrt(0.0883024619 * r + 0.2817188376 * g + 0.6299787005 * b);
+  const a = 1.9779984951 * l - 2.428592205 * m + 0.4505937099 * s;
+  const bb = 0.0259040371 * l + 0.7827717662 * m - 0.808675766 * s;
+  return Math.hypot(a, bb);
+}
+var PALETTE_HUES_ORDER = [
+  "red",
+  "orange",
+  "yellow",
+  "green",
+  "teal",
+  "cyan",
+  "blue",
+  "violet",
+  "magenta",
+  "pink"
+];
+var MINIMUM_RATIO = {
+  text: 4.5,
+  /** `text.inverse` sits on an accent fill, not on a surface. */
+  textInverse: 4.5,
+  accent: 4.5,
+  intent: 4.5,
+  /**
+   * A Hue, above WCAG AA deliberately. An editor draws selection, current-line,
+   * find-match and diff backgrounds *behind* the same tokens, so a palette
+   * solved to exactly 4.5:1 has no room left to tint the ground. At 4.5 the
+   * light palette has one sRGB step of headroom; at 5.5 it has twenty-two.
+   * See `docs/palette-provenance.md` and #78.
+   */
+  palette: 5.5,
+  /**
+   * These numbers are the **web** Medium's, and that indexing is the point.
+   *
+   * ADR 0004 names this the asymmetry most likely to be got wrong later:
+   * *colour values do not vary by Medium, but the floors they must clear do.* A
+   * projected 1080p frame, a compression-damaged video and an unantialiased
+   * terminal cell are not the browser's legibility problem, and until now this
+   * was one set of numbers for every surface the system emits to.
+   *
+   * `MEDIA_DEFINITIONS[medium].contrastFloor` carries the per-Medium values;
+   * `auditContrast` takes a Medium and reads them. The constants here remain as
+   * the web Medium's, so nothing moves on merge and a caller that does not care
+   * about Media keeps working.
+   */
+  /** `bright` Hues carry emphasis, not body text, so AA is the right bar. */
+  paletteBright: 4.5,
+  borderStrong: 3,
+  borderDefault: 3,
+  borderSubtle: 1.4,
+  /**
+   * A modal's dialog against the scrimmed page behind it. Not an accessibility
+   * threshold — an assertion that the scrim does the one job it exists for.
+   */
+  overlaySeparation: 3,
+  /**
+   * A selection device — the accent `fill` behind a chosen tab, or the 4px
+   * accent `edge` beside it — against the surface it sits on. WCAG 1.4.11's
+   * non-text bar: the device is a UI component boundary, not text.
+   */
+  stateDevice: 3
+};
+function auditHueAgreement(ladder) {
+  const results = [];
+  for (const level of Object.keys(ladder)) {
+    const def = ladder[level];
+    const check = (role, value, ref) => {
+      if (ref === "neutral") {
+        const chroma = oklabChroma(value);
+        results.push({
+          level,
+          role,
+          declared: ref,
+          value,
+          expected: null,
+          passes: chroma <= MAXIMUM_NEUTRAL_CHROMA,
+          detail: `chroma ${chroma.toFixed(3)} (max ${MAXIMUM_NEUTRAL_CHROMA})`
+        });
+        return;
+      }
+      const expected = def.palette[ref];
+      results.push({
+        level,
+        role,
+        declared: ref,
+        value,
+        expected,
+        passes: value.toLowerCase() === expected.toLowerCase(),
+        detail: `palette.${ref} is ${expected}`
+      });
+    };
+    for (const [role, ref] of Object.entries(def.accentHue)) {
+      check(`accent.${role}`, def.accent[role], ref);
+    }
+    for (const [role, ref] of Object.entries(def.intentHue)) {
+      check(`intent.${role}`, def.intent[role], ref);
+    }
+  }
+  return results;
+}
+var WEB_FLOOR = {
+  role: MINIMUM_RATIO.text,
+  hue: MINIMUM_RATIO.palette,
+  hueBright: MINIMUM_RATIO.paletteBright
+};
+function auditContrast(ladder, floor = WEB_FLOOR) {
+  const results = [];
+  for (const [level, def] of Object.entries(ladder)) {
+    const grounds = [
+      ["surface.base", def.surface.base],
+      ["surface.raised", def.surface.raised],
+      ["surface.sunken", def.surface.sunken]
+    ];
+    const check = (pair, foreground, background, minimum) => {
+      const ratio = contrastRatio(foreground, background);
+      results.push({
+        level,
+        pair,
+        foreground,
+        background,
+        ratio,
+        apca: apcaContrast(foreground, background),
+        minimum,
+        passes: ratio >= minimum
+      });
+    };
+    for (const [groundName, ground] of grounds) {
+      for (const tone of ["primary", "secondary", "muted"]) {
+        check(`text.${tone} on ${groundName}`, def.text[tone], ground, floor.role);
+      }
+      for (const tone of ["primary", "secondary", "tertiary", "quiet"]) {
+        check(`accent.${tone} on ${groundName}`, def.accent[tone], ground, floor.role);
+      }
+      for (const tone of ["info", "success", "warning", "danger"]) {
+        check(`intent.${tone} on ${groundName}`, def.intent[tone], ground, floor.role);
+      }
+      for (const hue of PALETTE_HUES_ORDER) {
+        check(`palette.${hue} on ${groundName}`, def.palette[hue], ground, floor.hue);
+        check(
+          `palette.bright.${hue} on ${groundName}`,
+          def.paletteBright[hue],
+          ground,
+          floor.hueBright
+        );
+      }
+      check(`border.strong on ${groundName}`, def.border.strong, ground, MINIMUM_RATIO.borderStrong);
+      check(`border.default on ${groundName}`, def.border.default, ground, MINIMUM_RATIO.borderDefault);
+      check(`border.subtle on ${groundName}`, def.border.subtle, ground, MINIMUM_RATIO.borderSubtle);
+    }
+    for (const tone of ["primary", "secondary", "tertiary", "quiet"]) {
+      check(
+        `text.inverse on accent.${tone}`,
+        def.text.inverse,
+        def.accent[tone],
+        floor.role
+      );
+    }
+    for (const tone of ["info", "success", "warning", "danger"]) {
+      check(
+        `text.inverse on intent.${tone}`,
+        def.text.inverse,
+        def.intent[tone],
+        floor.role
+      );
+    }
+    check("select.option: text.primary on surface.raised", def.text.primary, def.surface.raised, floor.role);
+    check("select.option disabled: text.muted on surface.raised", def.text.muted, def.surface.raised, floor.role);
+    check("select.placeholder: text.muted on surface.base", def.text.muted, def.surface.base, floor.role);
+    const listAccents = [
+      ...["primary", "secondary", "tertiary", "quiet"].map(
+        (tone) => [`accent.${tone}`, def.accent[tone]]
+      ),
+      ...["info", "success", "warning", "danger"].map(
+        (tone) => [`intent.${tone}`, def.intent[tone]]
+      )
+    ];
+    for (const [name, fill] of listAccents) {
+      check(`select.option highlighted: text.inverse on ${name}`, def.text.inverse, fill, floor.role);
+      check(`select.option selected mark: ${name} on surface.raised`, fill, def.surface.raised, floor.role);
+    }
+    const scrimOverBase = composite(
+      parseColor(def.surface.overlay),
+      parseColor(def.surface.base)
+    );
+    const scrim = `rgb(${Math.round(scrimOverBase.r)}, ${Math.round(scrimOverBase.g)}, ${Math.round(scrimOverBase.b)})`;
+    const separation = Math.max(
+      contrastRatio(def.surface.raised, scrim),
+      contrastRatio(def.border.strong, scrim)
+    );
+    results.push({
+      level,
+      pair: "dialog (fill or border) against scrimmed page",
+      foreground: `${def.surface.raised} / ${def.border.strong}`,
+      background: scrim,
+      ratio: separation,
+      apca: null,
+      minimum: MINIMUM_RATIO.overlaySeparation,
+      passes: separation >= MINIMUM_RATIO.overlaySeparation
+    });
+  }
+  return results;
+}
+function auditTextHierarchy(ladder) {
+  const steps = [];
+  for (const [level, def] of Object.entries(ladder)) {
+    for (const ground of ["base", "raised", "sunken"]) {
+      const lc = (tone) => Math.abs(apcaContrast(def.text[tone], def.surface[ground]));
+      const tones = { primary: lc("primary"), secondary: lc("secondary"), muted: lc("muted") };
+      steps.push({ level, ground: `surface.${ground}`, lc: tones, mutedStep: tones.secondary - tones.muted });
+    }
+  }
+  return steps;
+}
+function auditSelectionDevices(ladder) {
+  const results = [];
+  for (const [level, def] of Object.entries(ladder)) {
+    const grounds = [
+      ["surface.base", def.surface.base],
+      ["surface.raised", def.surface.raised]
+    ];
+    const check = (device, pair, foreground, background) => {
+      const ratio = contrastRatio(foreground, background);
+      results.push({
+        level,
+        device,
+        pair,
+        foreground,
+        background,
+        ratio,
+        minimum: MINIMUM_RATIO.stateDevice,
+        passes: ratio >= MINIMUM_RATIO.stateDevice
+      });
+    };
+    for (const [groundName, ground] of grounds) {
+      for (const tone of ["primary", "secondary", "tertiary"]) {
+        check("fill", `accent.${tone} fill on ${groundName}`, def.accent[tone], ground);
+        check("edge", `accent.${tone} edge on ${groundName}`, def.accent[tone], ground);
+      }
+    }
+    check("surface pair", "surface.raised against surface.base", def.surface.raised, def.surface.base);
+    check("surface pair", "surface.sunken against surface.base", def.surface.sunken, def.surface.base);
+    check("surface pair", "surface.sunken against surface.raised", def.surface.sunken, def.surface.raised);
+  }
+  return results;
+}
+export {
+  MAXIMUM_NEUTRAL_CHROMA,
+  MINIMUM_RATIO,
+  WEB_FLOOR,
+  apcaContrast,
+  auditContrast,
+  auditHueAgreement,
+  auditSelectionDevices,
+  auditTextHierarchy,
+  composite,
+  contrastRatio,
+  parseColor,
+  relativeLuminance
+};
+//# sourceMappingURL=contrast.js.map