@evinvest/uikit 0.17.1 → 0.19.0

package/styles/tokens.css

@@ -1,39 +1,42 @@
 /* AUTO-GENERATED by `nix run .#gen` from the repo-root tokens.css — do not edit. */
 /*
- * Shared design tokens — the theme contract for the `ev_lib::uikit` (Rust) and
- * `@evinvest/uikit` (TypeScript) components. Import this file from any Tailwind v4
- * entrypoint. Single source for both ports — `@evinvest/uikit` copies it into
- * `styles/tokens.css` from its `prepare` script.
+ * Shared design tokens for the `ev_lib::uikit` (Rust) and `@evinvest/uikit`
+ * (TypeScript) components. Import this file from any Tailwind v4 entrypoint.
+ * Single source for both ports; `nix run .#gen` flattens it into each.
  *
- * The values below are EV's. A non-EV consumer writes its own sheet against the
- * same names; the class tables reference nothing else.
+ * Two halves, in this order:
  *
- *   SCOPE      :root · .dark · .light      — a consumer defines one or both
+ *   CONTRACT   the names the class tables reference, the Tailwind mapping, the
+ *              tokens derived from a palette, and the geometry. Brand-neutral.
+ *   PALETTE    EV's values for the contract's colour names. A non-EV consumer
+ *              writes (or generates — `evinvest-palette`, see the uikit README)
+ *              its own palette against the same names under `[data-brand="…"]`.
+ *
+ *   SCOPE      :root · [data-brand] — a theme root; .light · .dark — a polarity
  *   SURFACES   background · card · popover · muted · hover
  *   INK        ink · ink-mid · ink-soft
  *   LINES      border · input · ring
  *   ROLES      {role} and on-{role} for the ones that get filled:
  *              brand · primary · secondary · positive ·
  *              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
  *   SCALARS    radius · control-* · display-scale · page-* · shadows · fonts
  *   CHARTS     chart-1 … chart-5
  *   MARK       brand-mark · brand-aspect       — supplied, never defined here
  *
- * Custom properties inherit, so a scope class on a `<section>` re-themes its
- * subtree: `bg-card text-ink` is correct on both polarities with no prop. EV is
- * single-polarity, so `:root` and `.dark` carry the same block and `.light` is
- * undefined — a `Section(Light)` is then a no-op here, which is what a
- * single-polarity palette should do.
+ * Custom properties inherit, so a scope on a `<section>` re-themes its subtree:
+ * `bg-card text-ink` is correct under any brand and either polarity with no
+ * prop. A brand's palette declares `.light` and `.dark` beneath its own
+ * `[data-brand]`, so a `<Section polarity="dark">` inside it takes that
+ * brand's dark values — never EV's. EV is single-polarity: its palette sits on
+ * the theme root alone and both polarity classes inherit it unchanged.
+ * Brand scopes do not nest: CSS has no "nearest ancestor", so a polarity class
+ * inside a brand inside another brand may match either.
  *
  * Accents are ordered by significance, not by meaning; see docs/spec/accents.md.
  * Their values are read outside CSS (gitops mirrors them into Discord embed
  * bars), so they stay plain hex — no color-mix.
- *
- * Surface ladder — dark UI reads as unfinished when every plane is the same
- * value, so the steps below are deliberate and measured; keep them apart if you
- * retune. background #070d18 → secondary #0d1526 (1.07:1) → card #16233c (1.24:1
- * vs background) → popover #1d2c49 (1.13:1 vs card) → muted #26375c. Elevation
- * rides the same ladder via --shadow-card / -elevated / -overlay.
  */
 
 /*
@@ -343,6 +346,8 @@
   }
 }
 
+/* ═══ CONTRACT ═══════════════════════════════════════════════════ */
+
 @theme inline {
   --radius-sm: calc(var(--radius) - 4px);
   --radius-md: calc(var(--radius) - 2px);
@@ -359,15 +364,24 @@
     0 2px 4px -2px rgb(0 0 0 / 0.30);
   --shadow-overlay: 0 16px 48px -12px rgb(0 0 0 / 0.60);
 
-  /* The leading var() carries its own fallback: next/font (landing) sets
-   * `--font-inter` / `--font-playfair`; a Rust consumer `@font-face`s the same
-   * families itself. Without the in-var fallback an undefined leading var would
-   * invalidate the whole `font-family` and drop the browser to its default — so
-   * it must never resolve to guaranteed-invalid. */
-  --font-sans: var(--font-inter, "Inter"), ui-sans-serif, system-ui, sans-serif;
-  --font-serif: var(--font-playfair, "Playfair Display"), ui-serif, Georgia, serif;
-  --font-mono: var(--font-inter, "Inter"), ui-monospace, monospace;
-  --font-display: var(--font-playfair, "Playfair Display"), ui-serif, Georgia, serif;
+  /* The families are parameters: a brand scope sets `--brand-font-sans`,
+   * `--brand-font-display` and `--brand-font-mono` (evinvest-palette writes
+   * them from a brand file's [fonts]); `font-serif` is the display role under
+   * its older name. Unset, each falls through to EV: next/font (landing) sets
+   * `--font-inter` / `--font-playfair`, a Rust consumer `@font-face`s the same
+   * families itself. Every leading var() carries its own fallback — an
+   * undefined one would invalidate the whole `font-family` and drop the
+   * browser to its default, so it must never resolve to guaranteed-invalid.
+   * `inline` puts the var() chain in the utility itself, so it resolves on
+   * the element and a brand scope re-fonts its subtree. */
+  --font-sans: var(--brand-font-sans, var(--font-inter, "Inter")), ui-sans-serif, system-ui, sans-serif;
+  --font-serif: var(--brand-font-display, var(--font-playfair, "Playfair Display")), ui-serif, Georgia, serif;
+  --font-mono: var(--brand-font-mono, var(--font-inter, "Inter")), ui-monospace, monospace;
+  --font-display: var(--brand-font-display, var(--font-playfair, "Playfair Display")), ui-serif, Georgia, serif;
+
+  /* The colour contract: every `--color-X: var(--X)` below is a name a palette
+   * owes, except the derived ones in the next rule. `evinvest-palette` reads
+   * this block as the list, so there is no second copy of it to drift. */
 
   /* surfaces */
   --color-background: var(--background);
@@ -390,6 +404,7 @@
   --color-brand: var(--brand);
   --color-primary: var(--primary);
   --color-on-primary: var(--on-primary);
+  --color-primary-ink: var(--primary-ink);
   --color-secondary: var(--secondary);
   --color-on-secondary: var(--on-secondary);
   --color-positive: var(--positive);
@@ -413,60 +428,27 @@
   --color-chart-5: var(--chart-5);
 }
 
-:root,
-.dark {
-  /* ── surfaces ────────────────────────────────────────────────── */
-  --background: #070d18;
-  --card: #16233c;
-  --popover: #1d2c49;
-  --muted: #26375c;
+/* Derived from the palette, and redeclared on every scope a palette can be
+ * declared on. A var() inside a custom property is resolved where it is
+ * declared and the result is what inherits — declared on `:root` alone, a brand
+ * scope would change the text and keep EV's borders, hover and focus ring.
+ * Zero specificity, so a palette that sets one of these outright wins. */
+:where(:root, .dark, .light, [data-brand]) {
   /* the menu-item tint: a surface state, so it is named for the state */
   --hover: color-mix(in srgb, var(--ink) 8%, transparent);
-
-  /* ── ink ─────────────────────────────────────────────────────── */
-  --ink: #e6e1d3;
   --ink-mid: color-mix(in srgb, var(--ink) 82%, transparent);
   /* the most-used secondary text token, so it has to clear AA on its own */
   --ink-soft: color-mix(in srgb, var(--ink) 65%, transparent);
-
-  /* ── lines ───────────────────────────────────────────────────── */
   --border: color-mix(in srgb, var(--ink) 14%, transparent);
   --input: color-mix(in srgb, var(--ink) 20%, transparent);
-  --ring: #2a9d8f;
-
-  /* ── roles ───────────────────────────────────────────────────── */
-  --brand: #001e4e;
-  /* teal, not the brand navy: navy filled a Button/Switch at ~1.1:1 against
-   * these surfaces, i.e. an invisible control, and consumers hardcoded teal to
-   * get around it. The brand navy still lives in --brand. */
-  --primary: #2a9d8f;
-  --on-primary: #070d18;
-  --secondary: #0d1526;
-  --on-secondary: var(--ink);
-  /* valence, not significance: a success reads as good while staying quiet */
-  --positive: #2e9e5b;
-  --on-positive: #070d18;
-  --accent-trace: #6b7fa0;
-  --on-accent-trace: #070d18;
-  --accent-debug: #2a9d8f;
-  --on-accent-debug: #070d18;
-  --accent-info: #4a90d9;
-  --on-accent-info: #070d18;
-  --accent-warn: #f2c94c;
-  --on-accent-warn: #070d18;
-  /* lifted off the brand red #da251d, which failed AA on a card. This one value
-   * carries both the fill and the text; the vivid brand red is a gitops
-   * constant, not a UI token. */
-  --accent-error: #ef5b52;
-  --on-accent-error: #070d18;
-
-  --chart-1: #2a9d8f;
-  --chart-2: #2e9e5b;
-  --chart-3: #f2c94c;
-  --chart-4: #e58aae;
-  --chart-5: #4a90d9;
+  --ring: var(--primary-ink);
+}
 
-  /* ── scalars ─────────────────────────────────────────────────── */
+/* Geometry. A `[data-brand]` scope is a theme root of its own, so it restarts
+ * from these defaults (and from the scale-ups below) rather than inheriting
+ * whatever an ancestor computed — `--control-radius` in particular is derived
+ * from `--radius` and has to be recomputed wherever `--radius` may change. */
+:where(:root, [data-brand]) {
   --radius: 0.375rem; /* 6px on mobile; bumped to 8px ≥ sm (see @media below) */
   /* control geometry, so a consumer reshapes every button/input at once */
   --control-radius: calc(var(--radius) - 2px);
@@ -496,7 +478,9 @@
    *   --brand-mark: url("/assets/logo.svg");
    *   --brand-aspect: 387 / 335;
    */
+}
 
+:root {
   /* shell offset — viewport space reserved by whatever shell hosts the app.
      Standalone apps get 0; a hosting shell overrides on :root. Size
      viewport-bound surfaces with calc(100dvh - var(--ev-shell-offset, 0px)). */
@@ -506,21 +490,94 @@
 /* Mobile-first scale-ups: roomier gutters + slightly larger radii on bigger
    viewports. Lives here (not per-component) so every consumer scales alike. */
 @media (min-width: 640px) {
-  :root {
+  :where(:root, [data-brand]) {
     --radius: 0.5rem;
     --page-px: 1.5rem;
   }
 }
 
 @media (min-width: 768px) {
-  :root {
+  :where(:root, [data-brand]) {
     --band-py: 4rem;
     --band-py-tight: 3.5rem;
   }
 }
 
 @media (min-width: 1024px) {
-  :root {
+  :where(:root, [data-brand]) {
     --page-px: 3rem;
   }
 }
+
+/* ═══ PALETTE: EV ════════════════════════════════════════════════
+ *
+ * Zero specificity: EV is the default a brand scope overrides, whatever order
+ * the two sheets are imported in.
+ *
+ * Surface ladder — dark UI reads as unfinished when every plane is the same
+ * value, so the steps below are deliberate and measured; keep them apart if you
+ * retune. background #070d18 → secondary #0d1526 (1.07:1) → card #16233c (1.24:1
+ * vs background) → popover #1d2c49 (1.13:1 vs card) → muted #26375c. Elevation
+ * rides the same ladder via --shadow-card / -elevated / -overlay. Card is also
+ * pinned from above by a second floor: --primary has to clear 3:1 against it
+ * (3.39:1 today), so lifting card one step breaks the tokens test.
+ */
+:where(:root, [data-brand="ev"]) {
+  /* the polarity, for what the platform draws itself (a native <select>'s
+   * popup); a custom property so nothing but the kit's opt-ins reads it */
+  --scheme: dark;
+
+  /* ── surfaces ────────────────────────────────────────────────── */
+  --background: #070d18;
+  --card: #16233c;
+  --popover: #1d2c49;
+  --muted: #26375c;
+
+  /* ── ink ─────────────────────────────────────────────────────── */
+  --ink: #e6e1d3;
+
+  /* ── roles ───────────────────────────────────────────────────── */
+  --brand: #001e4e;
+  /* teal, not the brand navy: navy filled a Button/Switch at ~1.1:1 against
+   * these surfaces, i.e. an invisible control, and consumers hardcoded teal to
+   * get around it. The brand navy still lives in --brand.
+   *
+   * A fill and an ink are different jobs, so the primary role carries two
+   * values (docs/spec/accents.md). --primary-ink is the teal that reads on the
+   * surfaces: 5.85:1 on background, 4.72:1 on card. --primary is the same hue
+   * and chroma one step down in lightness — OKLCH L 0.550 C 0.094 H 183°
+   * against the ink's L 0.630 C 0.101 H 183° — so the CTA carries white:
+   * --on-primary reads on it at 4.63:1, and the fill clears the 3:1 non-text
+   * floor against background (4.20:1), secondary (3.94:1), card (3.39:1) and
+   * popover (3.01:1), so a checked Switch on a Card still reads as one. Muted
+   * is the one surface under the floor (2.54:1); the controls that fill there
+   * carry an on-primary mark, see the spec. Darkening the single value instead
+   * would have dropped every teal label below AA. */
+  --primary: #128377;
+  --on-primary: #ffffff;
+  --primary-ink: #2a9d8f;
+  --secondary: #0d1526;
+  --on-secondary: var(--ink);
+  /* valence, not significance: a success reads as good while staying quiet */
+  --positive: #2e9e5b;
+  --on-positive: #070d18;
+  --accent-trace: #6b7fa0;
+  --on-accent-trace: #070d18;
+  --accent-debug: #2a9d8f;
+  --on-accent-debug: #070d18;
+  --accent-info: #4a90d9;
+  --on-accent-info: #070d18;
+  --accent-warn: #f2c94c;
+  --on-accent-warn: #070d18;
+  /* lifted off the brand red #da251d, which failed AA on a card. This one value
+   * carries both the fill and the text; the vivid brand red is a gitops
+   * constant, not a UI token. */
+  --accent-error: #ef5b52;
+  --on-accent-error: #070d18;
+
+  --chart-1: #2a9d8f;
+  --chart-2: #2e9e5b;
+  --chart-3: #f2c94c;
+  --chart-4: #e58aae;
+  --chart-5: #4a90d9;
+}