@evinvest/uikit 0.32.0 → 0.33.0

package/styles/tokens.css

@@ -23,17 +23,21 @@
  *              accent-trace · accent-debug · accent-info · accent-warn · accent-error
  *              primary-ink — the primary role as ink on a surface, where the
  *              fill and the readable value are different colours;
- *              primary-hover · primary-border — the solid button's states
+ *              primary-hover · accent-*-hover — a solid fill's hover, derived;
+ *              primary-border — the primary button's edge;
+ *              on-secondary — the ink, derived
  *              positive-ink · accent-info-ink — a quiet status role as text on
  *              a surface; derived from the role and the ink, a palette may pin
  *              them. warn and error are text in their own colour
- *   FACES      button-primary-* · button-danger-* ({bg,hover,border,ink}) and
- *              chip-{neutral,primary,positive,info,warn,error}-{bg,border}:
- *              what a Button or Badge paints, pinned per theme by EV and
+ *   FACES      button-danger-* ({bg,hover,border,ink}) and
+ *              tint-{neutral,primary,positive,info,warn,error,trace,debug}-{fill,edge}:
+ *              what a Button or a toned chip, toast or banner paints, pinned per theme by EV and
  *              derived for a brand. Not part of what a brand file owes.
  *   TYPE       text-caption · body-s · body · body-l · h3 · h2 · h1 ·
- *              figure-m · figure-l (size and line height); fonts
- *   SCALARS    radius · control-radius · chip-radius · control-* · display-scale ·
+ *              figure-m · figure-l (size and line height), derived from
+ *              body-{size,step,leading} and display-{base,step,leading} ·
+ *              figure-leading · display-scale; fonts
+ *   SCALARS    radius · control-radius · chip-radius · control-* · disabled-opacity · body-* · display-* · figure-leading ·
  *              page-* · shell-* · depth-* (behind shadow-card/elevated/overlay)
  *   MOTION     ev-ease-* · ev-dur-* · ev-rise · ev-stagger(-section)
  *   CHARTS     chart-1 … chart-6
@@ -720,6 +724,11 @@
   --radius-lg: var(--radius);
   --radius-xl: calc(var(--radius) + 4px);
   --radius-2xl: calc(var(--radius) + 8px);
+  /* the roles the kit's tables name; the steps above are the consumer's */
+  --radius-control: var(--control-radius);
+  --radius-panel: var(--radius);
+  --radius-chip: var(--chip-radius);
+  --radius-row: calc(var(--radius) - 4px); /* concentric inside a panel's p-1 */
 
   /* The names stay, the values are per theme: u2 is flat (`--depth-*` is a
    * zero shadow), Oldschool brings the ladder back in ev.css. */
@@ -727,25 +736,25 @@
   --shadow-elevated: var(--depth-elevated);
   --shadow-overlay: var(--depth-overlay);
 
-  /* Type scale: size / line-height in pairs, the Figma text styles. */
-  --text-caption: 0.6875rem;
-  --text-caption--line-height: 0.875rem;
-  --text-body-s: 0.75rem;
-  --text-body-s--line-height: 1rem;
-  --text-body: 0.8125rem;
-  --text-body--line-height: 1.125rem;
-  --text-body-l: 0.875rem;
-  --text-body-l--line-height: 1.25rem;
-  --text-h3: 0.875rem;
-  --text-h3--line-height: 1.25rem;
-  --text-h2: 1.5rem;
-  --text-h2--line-height: 1.875rem;
-  --text-h1: 2rem;
-  --text-h1--line-height: 2.375rem;
-  --text-figure-m: 1.25rem;
-  --text-figure-m--line-height: 1.5rem;
-  --text-figure-l: 1.75rem;
-  --text-figure-l--line-height: 2rem;
+  /* Type scale: two even-step ramps off the geometry rule's inputs (docs/spec/roles.md). */
+  --text-caption: calc(var(--body-size) - 2 * var(--body-step));
+  --text-caption--line-height: calc(var(--body-leading) - 4 * var(--body-step));
+  --text-body-s: calc(var(--body-size) - var(--body-step));
+  --text-body-s--line-height: calc(var(--body-leading) - 2 * var(--body-step));
+  --text-body: var(--body-size);
+  --text-body--line-height: var(--body-leading);
+  --text-body-l: calc(var(--body-size) + var(--body-step));
+  --text-body-l--line-height: calc(var(--body-leading) + 2 * var(--body-step));
+  --text-h3: calc(var(--body-size) + var(--body-step));
+  --text-h3--line-height: calc(var(--body-leading) + 2 * var(--body-step));
+  --text-h2: calc((var(--display-base) + 2 * var(--display-step)) * var(--display-scale));
+  --text-h2--line-height: calc((var(--display-base) + 2 * var(--display-step) + var(--display-leading)) * var(--display-scale));
+  --text-h1: calc((var(--display-base) + 4 * var(--display-step)) * var(--display-scale));
+  --text-h1--line-height: calc((var(--display-base) + 4 * var(--display-step) + var(--display-leading)) * var(--display-scale));
+  --text-figure-m: calc((var(--display-base) + var(--display-step)) * var(--display-scale));
+  --text-figure-m--line-height: calc((var(--display-base) + var(--display-step) + var(--figure-leading)) * var(--display-scale));
+  --text-figure-l: calc((var(--display-base) + 3 * var(--display-step)) * var(--display-scale));
+  --text-figure-l--line-height: calc((var(--display-base) + 3 * var(--display-step) + var(--figure-leading)) * var(--display-scale));
 
   /* The families are parameters, apart from the colour contract: a brand scope
    * sets `--brand-font-sans`, `--brand-font-serif` and `--brand-font-mono`
@@ -804,38 +813,51 @@
   --color-positive-ink: var(--positive-ink);
   --color-accent-trace: var(--accent-trace);
   --color-on-accent-trace: var(--on-accent-trace);
+  --color-accent-trace-hover: var(--accent-trace-hover);
   --color-accent-debug: var(--accent-debug);
   --color-on-accent-debug: var(--on-accent-debug);
+  --color-accent-debug-hover: var(--accent-debug-hover);
   --color-accent-info: var(--accent-info);
   --color-on-accent-info: var(--on-accent-info);
+  --color-accent-info-hover: var(--accent-info-hover);
   --color-accent-info-ink: var(--accent-info-ink);
   --color-accent-warn: var(--accent-warn);
   --color-on-accent-warn: var(--on-accent-warn);
+  --color-accent-warn-hover: var(--accent-warn-hover);
   --color-accent-error: var(--accent-error);
   --color-on-accent-error: var(--on-accent-error);
+  --color-accent-error-hover: var(--accent-error-hover);
 
-  /* component faces: derived below, pinned per theme by EV, so `bg-button-primary-bg`
-   * and `border-chip-error-border` are real utilities the class merge understands */
-  --color-button-primary-bg: var(--button-primary-bg);
-  --color-button-primary-hover: var(--button-primary-hover);
-  --color-button-primary-border: var(--button-primary-border);
-  --color-button-primary-ink: var(--button-primary-ink);
+  /* component faces: derived below, pinned per theme by EV, so `bg-button-danger-bg`
+   * and `border-tint-error-edge` are real utilities the class merge understands */
   --color-button-danger-bg: var(--button-danger-bg);
   --color-button-danger-hover: var(--button-danger-hover);
   --color-button-danger-border: var(--button-danger-border);
   --color-button-danger-ink: var(--button-danger-ink);
-  --color-chip-neutral-bg: var(--chip-neutral-bg);
-  --color-chip-neutral-border: var(--chip-neutral-border);
-  --color-chip-primary-bg: var(--chip-primary-bg);
-  --color-chip-primary-border: var(--chip-primary-border);
-  --color-chip-positive-bg: var(--chip-positive-bg);
-  --color-chip-positive-border: var(--chip-positive-border);
-  --color-chip-info-bg: var(--chip-info-bg);
-  --color-chip-info-border: var(--chip-info-border);
-  --color-chip-warn-bg: var(--chip-warn-bg);
-  --color-chip-warn-border: var(--chip-warn-border);
-  --color-chip-error-bg: var(--chip-error-bg);
-  --color-chip-error-border: var(--chip-error-border);
+  --color-tint-neutral-fill: var(--tint-neutral-fill);
+  --color-tint-neutral-edge: var(--tint-neutral-edge);
+  --color-tint-neutral-wash: var(--tint-neutral-wash);
+  --color-tint-primary-fill: var(--tint-primary-fill);
+  --color-tint-primary-edge: var(--tint-primary-edge);
+  --color-tint-primary-wash: var(--tint-primary-wash);
+  --color-tint-positive-fill: var(--tint-positive-fill);
+  --color-tint-positive-edge: var(--tint-positive-edge);
+  --color-tint-positive-wash: var(--tint-positive-wash);
+  --color-tint-info-fill: var(--tint-info-fill);
+  --color-tint-info-edge: var(--tint-info-edge);
+  --color-tint-info-wash: var(--tint-info-wash);
+  --color-tint-warn-fill: var(--tint-warn-fill);
+  --color-tint-warn-edge: var(--tint-warn-edge);
+  --color-tint-warn-wash: var(--tint-warn-wash);
+  --color-tint-error-fill: var(--tint-error-fill);
+  --color-tint-error-edge: var(--tint-error-edge);
+  --color-tint-error-wash: var(--tint-error-wash);
+  --color-tint-trace-fill: var(--tint-trace-fill);
+  --color-tint-trace-edge: var(--tint-trace-edge);
+  --color-tint-trace-wash: var(--tint-trace-wash);
+  --color-tint-debug-fill: var(--tint-debug-fill);
+  --color-tint-debug-edge: var(--tint-debug-edge);
+  --color-tint-debug-wash: var(--tint-debug-wash);
 
   /* charts — distinguishable hues carrying no significance */
   --color-chart-1: var(--chart-1);
@@ -875,7 +897,14 @@
    * side — ink over white needs ~47% to clear it, dark lands near 4:1. */
   --input: color-mix(in srgb, var(--ink) 48%, transparent);
   --ring: var(--primary-ink);
-  --primary-hover: color-mix(in srgb, var(--primary) 95%, black);
+  --on-secondary: var(--ink);
+  /* a solid fill's hover moves away from its label, so the label only gains contrast */
+  --primary-hover: color-mix(in srgb, rgb(from var(--on-primary) calc(255 - r) calc(255 - g) calc(255 - b)) var(--tint-hover), var(--primary));
+  --accent-trace-hover: color-mix(in srgb, rgb(from var(--on-accent-trace) calc(255 - r) calc(255 - g) calc(255 - b)) var(--tint-hover), var(--accent-trace));
+  --accent-debug-hover: color-mix(in srgb, rgb(from var(--on-accent-debug) calc(255 - r) calc(255 - g) calc(255 - b)) var(--tint-hover), var(--accent-debug));
+  --accent-info-hover: color-mix(in srgb, rgb(from var(--on-accent-info) calc(255 - r) calc(255 - g) calc(255 - b)) var(--tint-hover), var(--accent-info));
+  --accent-warn-hover: color-mix(in srgb, rgb(from var(--on-accent-warn) calc(255 - r) calc(255 - g) calc(255 - b)) var(--tint-hover), var(--accent-warn));
+  --accent-error-hover: color-mix(in srgb, rgb(from var(--on-accent-error) calc(255 - r) calc(255 - g) calc(255 - b)) var(--tint-hover), var(--accent-error));
   --primary-border: color-mix(in srgb, var(--primary-ink) 55%, transparent);
   /* the quiet status roles as text on a surface: a fill is a shape, and as text
    * it reads far below AA on a light plane. warn and error have none: they are
@@ -890,31 +919,40 @@
  * same scopes, listed in another order so the contract reader finds one rule
  * per selector. */
 :where([data-theme], [data-brand], .light, .dark, :root) {
-  /* primary is an outline button, danger the same in the error role */
-  --button-primary-bg: transparent;
-  --button-primary-hover: var(--hover);
-  --button-primary-border: color-mix(in srgb, var(--ink) 60%, transparent);
-  --button-primary-ink: var(--ink);
+  /* danger is an outline in the error role */
   --button-danger-bg: transparent;
-  --button-danger-hover: color-mix(in srgb, var(--accent-error) 10%, transparent);
+  --button-danger-hover: color-mix(in srgb, var(--accent-error) var(--tint-hover), transparent);
   --button-danger-border: var(--accent-error);
   --button-danger-ink: var(--accent-error);
 
-  /* chips (Badge, status pills). The source is the colour the label wears, so
-   * the edge and the label are one hue; --chip-fill and --chip-edge are in the
-   * geometry. */
-  --chip-neutral-bg: var(--hover);
-  --chip-neutral-border: var(--border);
-  --chip-primary-bg: color-mix(in srgb, var(--primary-ink) var(--chip-fill), transparent);
-  --chip-primary-border: color-mix(in srgb, var(--primary-ink) var(--chip-edge), transparent);
-  --chip-positive-bg: color-mix(in srgb, var(--positive-ink) var(--chip-fill), transparent);
-  --chip-positive-border: color-mix(in srgb, var(--positive-ink) var(--chip-edge), transparent);
-  --chip-info-bg: color-mix(in srgb, var(--accent-info-ink) var(--chip-fill), transparent);
-  --chip-info-border: color-mix(in srgb, var(--accent-info-ink) var(--chip-edge), transparent);
-  --chip-warn-bg: color-mix(in srgb, var(--accent-warn) var(--chip-fill), transparent);
-  --chip-warn-border: color-mix(in srgb, var(--accent-warn) var(--chip-edge), transparent);
-  --chip-error-bg: color-mix(in srgb, var(--accent-error) var(--chip-fill), transparent);
-  --chip-error-border: color-mix(in srgb, var(--accent-error) var(--chip-edge), transparent);
+  /* a tone worn as a tint: a chip's fill and edge are the tone's ink at
+   * --tint-fill and --tint-edge, so the edge and the label are one hue, and an
+   * area's wash is it at --tint-wash. warn and error are their own ink
+   * (docs/spec/accents.md). */
+  --tint-neutral-fill: var(--hover);
+  --tint-neutral-edge: var(--border);
+  --tint-neutral-wash: transparent;
+  --tint-primary-fill: color-mix(in srgb, var(--primary-ink) var(--tint-fill), transparent);
+  --tint-primary-edge: color-mix(in srgb, var(--primary-ink) var(--tint-edge), transparent);
+  --tint-primary-wash: color-mix(in srgb, var(--primary-ink) var(--tint-wash), transparent);
+  --tint-positive-fill: color-mix(in srgb, var(--positive-ink) var(--tint-fill), transparent);
+  --tint-positive-edge: color-mix(in srgb, var(--positive-ink) var(--tint-edge), transparent);
+  --tint-positive-wash: color-mix(in srgb, var(--positive-ink) var(--tint-wash), transparent);
+  --tint-info-fill: color-mix(in srgb, var(--accent-info-ink) var(--tint-fill), transparent);
+  --tint-info-edge: color-mix(in srgb, var(--accent-info-ink) var(--tint-edge), transparent);
+  --tint-info-wash: color-mix(in srgb, var(--accent-info-ink) var(--tint-wash), transparent);
+  --tint-warn-fill: color-mix(in srgb, var(--accent-warn) var(--tint-fill), transparent);
+  --tint-warn-edge: color-mix(in srgb, var(--accent-warn) var(--tint-edge), transparent);
+  --tint-warn-wash: color-mix(in srgb, var(--accent-warn) var(--tint-wash), transparent);
+  --tint-error-fill: color-mix(in srgb, var(--accent-error) var(--tint-fill), transparent);
+  --tint-error-edge: color-mix(in srgb, var(--accent-error) var(--tint-edge), transparent);
+  --tint-error-wash: color-mix(in srgb, var(--accent-error) var(--tint-wash), transparent);
+  --tint-trace-fill: color-mix(in srgb, var(--accent-trace) var(--tint-fill), transparent);
+  --tint-trace-edge: color-mix(in srgb, var(--accent-trace) var(--tint-edge), transparent);
+  --tint-trace-wash: color-mix(in srgb, var(--accent-trace) var(--tint-wash), transparent);
+  --tint-debug-fill: color-mix(in srgb, var(--accent-debug) var(--tint-fill), transparent);
+  --tint-debug-edge: color-mix(in srgb, var(--accent-debug) var(--tint-edge), transparent);
+  --tint-debug-wash: color-mix(in srgb, var(--accent-debug) var(--tint-wash), transparent);
 }
 
 /* Geometry. A `[data-brand]` scope is a theme root of its own, so it restarts
@@ -924,22 +962,37 @@
   --radius: 0.375rem; /* panels and menus */
   /* control geometry, so a consumer reshapes every button/input at once */
   --control-radius: 0.25rem;
+  --control-h: 2.25rem;
+  --control-step: 0.25rem;
+  --control-inset: 1rem; /* the md rung's side inset; every other rung's moves with its height */
   --chip-radius: 0.25rem;
-  /* how much of its ink a chip's fill and edge take, for a brand that pins
-   * nothing: an outline by default, a tint where a theme raises the fill */
-  --chip-fill: 0%;
-  --chip-edge: 50%;
+  --disabled-opacity: 0.5;
+  /* how much of its ink a tint's fill and edge take: an outline by default, a
+   * tinted pill where a theme raises the fill; and a tone's pointed-at row or face */
+  --tint-fill: 0%;
+  --tint-edge: 50%;
+  --tint-hover: 10%;
+  /* how much of its ink an area in a tone (a banner, an alert) is washed with:
+   * an area needs a body to read as content, where a chip reads as an outline.
+   * At 10 % Light's positive and warn labels fall under their floor. */
+  --tint-wash: 6%;
   /* u2 is flat: depth is surface steps and hairlines. Never `none` — inside
    * Tailwind's comma-separated box-shadow list it invalidates the whole
    * declaration, and the focus ring goes with it. */
   --depth-card: 0 0 #0000;
   --depth-elevated: 0 0 #0000;
   --depth-overlay: 0 0 #0000;
-  --control-py: 0.5rem;
-  /* the Xl (call-to-action) button reads all three */
+  /* the Xl (call-to-action) rung's inset and text */
   --control-px: 2rem;
   --control-text: 1rem;
-  /* multiplies the display type scale (uikit <Display>) */
+  /* the type ramps: text steps 1 px, display steps 4 px, a scale over the display tier */
+  --body-size: 0.8125rem;
+  --body-step: 0.0625rem;
+  --body-leading: 1.125rem;
+  --display-base: 1rem;
+  --display-step: 0.25rem;
+  --display-leading: 0.375rem; /* h1, h2 */
+  --figure-leading: 0.25rem; /* figure-m, figure-l */
   --display-scale: 1;
   /* the vertical rhythm of a full-bleed <Section>; `tight` is the sub-page one */
   --band-py: 2.25rem;
@@ -983,6 +1036,24 @@
    */
 }
 
+/* The control height and inset ramps a `Size` step names, re-derived on every
+ * scope that may set `--control-h`. Pin one step to bend the ramp. */
+:where(:root, [data-brand], [data-theme]) {
+  --control-h-2xs: calc(var(--control-h) - 3 * var(--control-step));
+  --control-h-xs: calc(var(--control-h) - 2 * var(--control-step));
+  --control-h-sm: calc(var(--control-h) - var(--control-step));
+  --control-h-md: var(--control-h);
+  --control-h-lg: calc(var(--control-h) + var(--control-step));
+  --control-h-xl: calc(var(--control-h) + 3 * var(--control-step));
+  --control-h-touch: max(var(--control-h-lg), 2.75rem); /* the 44 px pointer-target floor (WCAG 2.5.5) */
+  --control-inset-xs: calc(var(--control-h-xs) - var(--control-h) + var(--control-inset));
+  --control-inset-sm: calc(var(--control-h-sm) - var(--control-h) + var(--control-inset));
+  --control-inset-md: var(--control-inset);
+  --control-inset-lg: calc(var(--control-h-lg) - var(--control-h) + var(--control-inset));
+  --control-inset-xl: var(--control-px);
+  --control-inset-touch: calc(var(--control-h-touch) - var(--control-h) + var(--control-inset));
+}
+
 :root {
   /* shell offset — viewport space reserved by whatever shell hosts the app.
      Standalone apps get 0; a hosting shell overrides on :root. Size
@@ -1051,7 +1122,6 @@
   --background: #0d0d0f;
   --card: #151518;
   --secondary: #1c1c20;
-  --on-secondary: var(--ink);
   --popover: #252529;
   --muted: #070709;
   --hover: #e6e1d30f;
@@ -1075,13 +1145,11 @@
 
   /* brand and primary. A fill and an ink are different jobs (docs/spec/accents.md):
    * --primary carries white at 4.62:1 and reads as a shape on every plane (3.30:1
-   * on the popover); --primary-ink is the teal that reads as text (4.96:1 there).
-   * Figma's hover #18998b is 3.52:1 under white, so #127c71 (5.06:1) is pinned. */
+   * on the popover); --primary-ink is the teal that reads as text (4.96:1 there). */
   --brand: #0d1627;
   --primary: #138377;
   --on-primary: #ffffff;
   --primary-ink: #35a395;
-  --primary-hover: #127c71;
   --primary-border: #35a3958c;
 
   /* status. Fills carry the dark label (white fails 3:1–3.4:1 on these); the
@@ -1107,29 +1175,6 @@
   --chart-4: #e68aaf;
   --chart-5: #2e9e5c;
   --chart-6: #988eef;
-
-  --button-primary-bg: #e6e1d300;
-  --button-primary-hover: #e6e1d314;
-  --button-primary-border: #e6e1d399;
-  --button-primary-ink: #e6e1d3;
-  --button-danger-bg: #f05b5200;
-  --button-danger-hover: #f05b521a;
-  --button-danger-border: #f05b52;
-  --button-danger-ink: var(--accent-error);
-
-  /* chips are outlines: a transparent fill and the label's hue at 50 % */
-  --chip-neutral-bg: var(--hover);
-  --chip-neutral-border: var(--border);
-  --chip-primary-bg: #35a39500;
-  --chip-primary-border: #35a3958c;
-  --chip-positive-bg: #2e9e5c00;
-  --chip-positive-border: #4abf7680;
-  --chip-info-bg: #4990d800;
-  --chip-info-border: #6ca6e480;
-  --chip-warn-bg: #f5c84e00;
-  --chip-warn-border: #f5c84e80;
-  --chip-error-bg: #f05b5200;
-  --chip-error-border: #f05b5280;
 }
 
 /* ── u2 Light ────────────────────────────────────────────────── */
@@ -1139,7 +1184,6 @@
   --background: #efebdf;
   --card: #f6f3eb;
   --secondary: #fbfaf6;
-  --on-secondary: var(--ink);
   --popover: #ffffff;
   --muted: #e6e1d3;
   --hover: #0d0d0f0d;
@@ -1161,7 +1205,6 @@
   --primary: #138377;
   --on-primary: #ffffff;
   --primary-ink: #116f65;
-  --primary-hover: #116f65;
   --primary-border: #116f658c;
 
   /* Figma's positive #228a4e carries neither label at 4.5:1 (white 4.36, dark
@@ -1190,29 +1233,6 @@
   --chart-4: #b74679;
   --chart-5: #228a4e;
   --chart-6: #6d5acc;
-
-  --button-primary-bg: #0d0d0f00;
-  --button-primary-hover: #0d0d0f0f;
-  --button-primary-border: #0d0d0fa6;
-  --button-primary-ink: #080e1a;
-  --button-danger-bg: #db383400;
-  --button-danger-hover: #db383414;
-  --button-danger-border: #db3834;
-  --button-danger-ink: var(--accent-error);
-
-  /* the solid hue at 50 % (warning 60 %), where Dark uses the ink's */
-  --chip-neutral-bg: var(--hover);
-  --chip-neutral-border: var(--border);
-  --chip-primary-bg: #13837700;
-  --chip-primary-border: #116f658c;
-  --chip-positive-bg: #228a4e00;
-  --chip-positive-border: #228a4e80;
-  --chip-info-bg: #2d79c200;
-  --chip-info-border: #2d79c280;
-  --chip-warn-bg: #a77f1200;
-  --chip-warn-border: #a77f1299;
-  --chip-error-bg: #db383400;
-  --chip-error-border: #db383480;
 }
 
 /* ── Oldschool ───────────────────────────────────────────────── *
@@ -1232,7 +1252,6 @@
   --background: #070d18;
   --card: #16233c;
   --secondary: #0d1526;
-  --on-secondary: var(--ink);
   --popover: #1d2c49;
   --muted: #26375c;
   --hover: #e6e1d312;
@@ -1254,7 +1273,6 @@
   --primary: #138377;
   --on-primary: #ffffff;
   --primary-ink: #35a395;
-  --primary-hover: #127c71;
   --primary-border: #35a39500;
 
   --positive: #2e9e5c;
@@ -1279,31 +1297,21 @@
   --chart-5: #2e9e5c;
   --chart-6: #988eef;
 
-  /* filled buttons. The danger label stays dark: white on #f05b52 is 3.32:1. */
-  --button-primary-bg: #138377;
-  --button-primary-hover: #127c71;
-  --button-primary-border: #138377;
-  --button-primary-ink: #ffffff;
-  --button-danger-bg: #f05b52;
-  --button-danger-hover: #f06c61;
-  --button-danger-border: #f05b52;
-  --button-danger-ink: #070d18;
-
-  /* chips are tinted pills with no edge */
-  --chip-neutral-bg: var(--hover);
-  --chip-neutral-border: #e6e1d300;
+  /* danger is a fill */
+  --button-danger-bg: var(--accent-error);
+  --button-danger-hover: var(--accent-error-hover);
+  --button-danger-border: var(--accent-error);
+  --button-danger-ink: var(--on-accent-error);
+
+  /* tints are pills with no edge */
+  --tint-fill: 18%;
+  --tint-edge: 0%;
+  --tint-neutral-edge: transparent;
   /* Figma tints the accent chip 16 %, which leaves its teal label at 4.03:1 on
    * the card; 8 % holds 4.56:1 */
-  --chip-primary-bg: #35a39514;
-  --chip-primary-border: #35a39500;
-  --chip-positive-bg: #2e9e5c2e;
-  --chip-positive-border: #4abf7600;
-  --chip-info-bg: #4990d82e;
-  --chip-info-border: #6ca6e400;
-  --chip-warn-bg: #f5c84e29;
-  --chip-warn-border: #f5c84e00;
-  --chip-error-bg: #f05b522e;
-  --chip-error-border: #f06c6100;
+  --tint-primary-fill: color-mix(in srgb, var(--primary-ink) 8%, transparent);
+  /* at 18 % the info label reads 4.43:1 on its fill; 16 % clears 4.5:1 */
+  --tint-info-fill: color-mix(in srgb, var(--accent-info-ink) 16%, transparent);
 
   --radius: 0.5rem;
   --control-radius: 0.375rem;