@evinvest/uikit 0.31.0 → 0.33.0

package/styles/theme.css

@@ -664,6 +664,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. */
@@ -671,25 +676,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`
@@ -748,38 +753,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);
@@ -819,7 +837,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
@@ -834,31 +859,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
@@ -868,22 +902,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;
@@ -927,6 +976,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