@gemboss/ui 0.7.1 → 0.8.0

package/src/kit-plain.css

@@ -61,23 +61,24 @@
    Link: `<a class="ui-link" href>` for a link inside text. Iris (--gemboss-accent-strong, 6.2:1 on white), underlined
    so it is not told by colour alone (WCAG 1.4.1); visited looks the same (these are tools, not articles). Markdown or
    other generated HTML you cannot add classes to: wrap it in `.ui-prose` and its bare `<a>` get the same look.
+   `.ui-prose` links sit at :where() specificity (0.7.3), so any component's own link rule wins inside it.
 
    Media card: `<article class="ui-card ui-card--media"><a|button class="ui-card__media"><img alt=""></…>
    <div class="ui-card__body">…</div><div class="ui-card__foot">…</div></article>`. The picture is 16:10 and
    cropped to fill; the card has no padding of its own, the body and foot do. */
 .ui-link,
-.ui-prose a:not([class]) {
+.ui-prose :where(a:not([class])) {
   color: var(--gemboss-accent-strong, #3a44de);
   text-decoration: underline;
   text-decoration-thickness: from-font;
   text-underline-offset: 2px;
 }
 .ui-link:visited,
-.ui-prose a:not([class]):visited { color: var(--gemboss-accent-strong, #3a44de); }
+.ui-prose :where(a:not([class])):visited { color: var(--gemboss-accent-strong, #3a44de); }
 .ui-link:hover,
-.ui-prose a:not([class]):hover { color: var(--gemboss-accent, #5661f5); text-decoration-thickness: 2px; }
+.ui-prose :where(a:not([class])):hover { color: var(--gemboss-accent, #5661f5); text-decoration-thickness: 2px; }
 .ui-link:focus-visible,
-.ui-prose a:not([class]):focus-visible { outline: 2px solid var(--ui-focus, #5661f5); outline-offset: 2px; border-radius: 2px; }
+.ui-prose :where(a:not([class])):focus-visible { outline: 2px solid var(--ui-focus, #5661f5); outline-offset: 2px; border-radius: 2px; }
 
 .ui-card--media { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
 .ui-card__media {
@@ -96,13 +97,16 @@ button.ui-card__media, a.ui-card__media { cursor: pointer; }
 }
 
 /* Popup body and foot: `<div class="ui-modal__body">…</div><div class="ui-modal__foot"><button class="ui-btn">…</button></div>`.
-   ui.css never styled these, and the admin does not load this file: its Modal.tsx children carry their own padding
-   (or none). Every non-React surface padded them by hand (GemFactory: 16/20 and a hairline above the actions). kit-plain.js's openModal writes exactly this shape. */
-.ui-modal__body { padding: 16px 20px; }
-.ui-modal__foot {
-  display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end;
-  padding: 12px 20px; border-top: 1px solid var(--ui-border);
-}
+   Their padding moved to ui.css in 0.7.3 (the admin loads that file, not this one). kit-plain.js's openModal writes
+   exactly this shape. What stays here is what only the plain-HTML popups use:
+
+   A head that carries more than a title (a large popup's subtitle and its own actions, GemFactory's detail popup):
+   `<div class="ui-modal__head"><div class="ui-modal__title">Mega menu<span class="ui-modal__subtitle">chrome/header</span>
+   </div><div class="ui-modal__actions"><button class="ui-btn">Copy</button></div><button class="ui-modal__close">…` */
+.ui-modal__subtitle { display: block; margin-top: 2px; font-size: var(--ui-fs-caption); line-height: 16px; font-weight: 450; color: var(--ui-text-muted); overflow-wrap: anywhere; }
+.ui-modal__actions { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: var(--ui-space-2); }
+/* An icon button in the popup's head or foot is square at the popup's 28 (ui.css gives those buttons 0/12 padding). */
+:is(.ui-modal__head, .ui-modal__foot) .ui-btn--icon { width: 28px; padding: 0; }
 /* A popup taller than the screen: the body scrolls, the head and foot stay, so the actions are always reachable
    (320×568 with a long form put Huỷ/Xoá below the fold, unreachable under the locked page; review #3633). */
 .ui-overlay > .ui-modal { display: flex; flex-direction: column; max-height: calc(100dvh - 40px); }
@@ -374,7 +378,7 @@ button.ui-card__media, a.ui-card__media { cursor: pointer; }
    <div class="ui-modal__foot">…</div></dialog>` */
 dialog.ui-modal { padding: 0; max-width: calc(100% - 40px); max-height: calc(100dvh - 40px); color: var(--ui-text); }
 dialog.ui-modal[open] { display: flex; flex-direction: column; }
-dialog.ui-modal::backdrop { background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(2px); }
+dialog.ui-modal::backdrop { background: rgba(0, 0, 0, 0.5); } /* the overlay's own scrim (0.7.3: Polaris' .5, no blur) */
 
 /* ── 0.5.1: what the first surfaces on 0.5.0 still drew themselves (GemFactory, content-radar, 03/10/2026) ─────────── */
 
@@ -435,3 +439,18 @@ button.ui-metric:focus-visible { outline: 2px solid var(--ui-focus); outline-off
 /* Class doubled: the chosen card is usually the one under the pointer, and `button.ui-metric:hover` (0,2,1) would
    repaint its edge grey the moment it is clicked (measured on gemwatcher Radar). */
 .ui-metric.ui-metric:is([aria-pressed="true"], [aria-current="page"]) { border-color: var(--gemboss-accent); box-shadow: inset 0 0 0 1px var(--gemboss-accent); }
+
+/* 0.7.3: numbered pager + ui-more, for the plain surfaces (the admin uses Polaris Pagination). Markup and rationale:
+   README "Long lists". Here, not in ui.css: ui.css is exported verbatim into the admin, under a 90 KB budget. */
+.ui-pager > a, .ui-pager > [aria-disabled="true"] { min-width: 32px; justify-content: center; box-sizing: border-box; gap: 4px; }
+.ui-pager > a[aria-current="page"] { background: var(--ui-text); border-color: var(--ui-text); color: var(--ui-surface); font-size: var(--ui-fs-body); font-weight: 600; }
+.ui-pager > a[aria-current="page"]:hover { background: var(--ui-text); }
+.ui-pager > [aria-disabled="true"] { display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-md); color: var(--ui-text-muted); font-size: var(--ui-fs-body); opacity: .55; cursor: default; }
+.ui-pager > [aria-disabled="true"]:hover { background: none; }
+.ui-pager__gap { min-width: 16px; text-align: center; color: var(--ui-text-muted); }
+.ui-pager__range { margin-left: auto; color: var(--ui-text-muted); font-size: var(--ui-fs-body); font-variant-numeric: tabular-nums; }
+.ui-more { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; padding: 16px 0; color: var(--ui-text-muted); font-size: var(--ui-fs-body); text-align: center; }
+.ui-more[hidden] { display: none; }
+@media (pointer: coarse), (max-width: 47.9975em) { .ui-pager > a, .ui-pager > [aria-disabled="true"] { min-width: 44px; min-height: 44px; } }
+/* Phone: 11 targets of 44px wrapped into 3-4 rows at 320 (measured). Keep Previous · current · Next; the range wraps under. */
+@media (max-width: 35.9975em) { .ui-pager > a:not([rel]):not([aria-current]):not([aria-disabled]), .ui-pager__gap { display: none; } }

package/src/portal.css

@@ -1,7 +1,7 @@
 /* ═══ Portal pieces — @gemboss/ui 0.7.0 (04/10/2026) ════════════════════════════════════════════
-   TopbarNav, Avatar, Leaderboard, Podium (portal.tsx), SearchDialog (dialog.tsx), ThemeToggle and the
-   dark palette (theme.tsx). Tokens only: every colour comes from --gemboss-* / --ui-*, so the dark
-   palette at the end reaches these too. */
+   TopbarNav, Avatar, Leaderboard, Podium (portal.tsx), SearchDialog (dialog.tsx), ThemeToggle (theme.tsx).
+   Component rules only, no rule on :root, html or body (a test holds that): a surface with its own skin
+   can take this file with gemboss-tokens.css alone. The dark palette is theme-dark.css. */
 
 /* ── TopbarNav: section tabs in the topbar, after the brand (Featurebase's "Feedback · Roadmap"). The
    active tab is underlined on the topbar's bottom edge. 44px targets under a finger, 36 under a mouse
@@ -47,6 +47,11 @@
 }
 @media (prefers-reduced-motion: reduce) { .gb-topnav-chevron { transition: none; } }
 
+/* Text for screen readers only ("Rank 1:", ", you"). Its own rule, not ui.css's .ui-sr-only: a surface that
+   takes portal.css without the rest of the kit (GemCommunity) would otherwise print it on the page. */
+.gb-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0);
+  white-space: nowrap; border: 0; }
+
 /* ── Avatar: picture or initials on one of eight tones picked from the name. */
 .gb-avatar { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; border-radius: 50%; overflow: hidden;
   font-weight: 700; line-height: 1; letter-spacing: .01em; user-select: none; }
@@ -83,6 +88,9 @@ a.gb-leaderboard-link:focus-visible { outline: 2px solid var(--gemboss-accent);
 .gb-leaderboard-name { flex: 1 1 auto; min-width: 0; font-size: 13px; font-weight: 560; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .gb-leaderboard-value { flex: 0 0 auto; font-size: 13px; font-weight: 650; color: var(--gemboss-text-muted); font-variant-numeric: tabular-nums; }
 .gb-leaderboard-row.is-first .gb-leaderboard-value { color: #8a5a00; font-weight: 750; }
+/* The viewer's own row and podium slot: the selected tint, never a colour of its own. */
+.gb-leaderboard-row.is-current > .gb-leaderboard-link { background: var(--gemboss-active-bg); }
+.gb-leaderboard-badge { flex: 0 1 auto; min-width: 0; overflow: hidden; }
 .gb-leaderboard-all { justify-self: center; display: inline-flex; align-items: center; min-height: 24px; font-size: 12px; font-weight: 600;
   color: var(--gemboss-text-muted); text-decoration: none; }
 .gb-leaderboard-all:hover { color: var(--gemboss-text-strong); text-decoration: underline; }
@@ -93,6 +101,8 @@ a.gb-leaderboard-link:focus-visible { outline: 2px solid var(--gemboss-accent);
   background: var(--gemboss-surface); color: var(--gemboss-text); text-decoration: none; text-align: center; }
 a.gb-podium-link:hover { background: var(--gemboss-hover); }
 .gb-podium-slot { min-width: 0; }
+/* A podium with fewer than three people keeps its place: second and third stay empty columns. */
+.gb-podium-slot.is-empty { visibility: hidden; }
 .gb-podium-slot--1 .gb-podium-link { padding-top: 22px; padding-bottom: 20px; border-color: color-mix(in srgb, #d4a017 45%, var(--gemboss-divider)); }
 .gb-podium-slot--2 .gb-podium-link { padding-bottom: 12px; }
 .gb-podium-slot--3 .gb-podium-link { padding-bottom: 8px; }
@@ -101,6 +111,7 @@ a.gb-podium-link:hover { background: var(--gemboss-hover); }
 .gb-podium-value { font-size: 15px; font-weight: 750; font-variant-numeric: tabular-nums; }
 .gb-podium-slot--1 .gb-podium-value { color: #8a5a00; }
 .gb-podium-unit { font-size: 11px; font-weight: 500; color: var(--gemboss-text-muted); }
+.gb-podium-slot.is-current .gb-podium-link { border-color: var(--gemboss-text-strong); background: var(--gemboss-active-bg); }
 
 /* ── SearchDialog: the topbar's search button, and the popup (640 wide, near the top, like Featurebase's). */
 .gb-search-trigger, .gb-theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; flex: 0 0 auto;
@@ -126,62 +137,3 @@ dialog.ui-modal.gb-search { width: min(640px, 100%); margin-top: 8vh; max-height
 .gb-search-foot { display: flex; gap: 16px; justify-content: flex-end; padding: 8px 14px; border-top: 1px solid var(--ui-border);
   font-size: 12px; color: var(--ui-text-muted); }
 @media (max-width: 760px) { dialog.ui-modal.gb-search { margin-top: 12px; } .gb-search-foot { display: none; } }
-
-/* ── Dark palette. `ThemeToggle` / `themeScript` set data-theme on <html>; a surface without them stays
-   light. Only colours change: the components above and every kit class read these tokens. */
-:root[data-theme="dark"] {
-  color-scheme: dark;
-  --gemboss-primary: #f2f3f5;
-  --gemboss-primary-dark: #ffffff;
-  --gemboss-primary-soft: #23242a;
-  --gemboss-on-primary: #0d0d12;
-  --gemboss-accent: #7c84ff;
-  --gemboss-accent-strong: #a3a9ff;
-  --gemboss-accent-soft: #1f2140;
-  --gemboss-text-strong: #f2f3f5;
-  --gemboss-text: #e3e4e8;
-  --gemboss-text-muted: #9a9ca6;
-  --gemboss-surface: #16171d;
-  --gemboss-canvas: #0d0d12;
-  --gemboss-app-bg: #0d0d12;
-  --gemboss-rail-bg: #0d0d12;
-  --gemboss-panel-bg: #16171d;
-  --gemboss-topbar-bg: rgba(13, 13, 18, 0.96);
-  --gemboss-nav-bg: #0d0d12;
-  --gemboss-nav-hover: rgba(255, 255, 255, 0.06);
-  --gemboss-divider: #2a2b33;
-  --gemboss-divider-soft: #22232a;
-  --gemboss-hover: #22232b;
-  --gemboss-active-bg: #262833;
-  --gemboss-active-fg: #f2f3f5;
-  --gemboss-field-bg: #121318;
-  --gemboss-field-bg-hover: #17181e;
-  --gemboss-field-ink: #e3e4e8;
-  --gemboss-field-placeholder: #8a8c96;
-  --gemboss-field-line: #3a3c46;
-  --gemboss-field-line-hover: #50525e;
-  --gemboss-field-line-active: #c9cbd3;
-  --gemboss-chip-ink: #d6d8de;
-  --gemboss-chip-line: #3a3c46;
-  --gemboss-chip-line-hover: #50525e;
-  --gemboss-chip-bg-hover: #22232b;
-  --gemboss-success: #34c38f;
-  --gemboss-success-strong: #5fd6a8;
-  --gemboss-success-soft: #13291f;
-  --gemboss-success-border: #22533e;
-  --gemboss-warning: #e0b341;
-  --gemboss-warning-soft: #2b2412;
-  --gemboss-warning-border: #5a4a1d;
-  --gemboss-danger: #ff6b5a;
-  --gemboss-danger-strong: #ff8a7c;
-  --gemboss-danger-soft: #2e1714;
-  --gemboss-danger-border: #5c2a24;
-  --ui-accent-fg: #0d0d12;
-  --ui-warning-fg: #e8c063;
-  --gb-brand-ink: #f2f3f5;
-}
-/* Avatar initials in dark: the tone's light end, so the text clears 4.5:1 on its tinted disc. */
-:root[data-theme="dark"] .gb-avatar[data-tone] { background: color-mix(in srgb, var(--gb-tone) 30%, #16171d); color: color-mix(in srgb, var(--gb-tone) 35%, #ffffff); }
-:root[data-theme="dark"] body { background: var(--gemboss-app-bg); color: var(--gemboss-text); }
-:root[data-theme="dark"] .gb-leaderboard-row.is-first .gb-leaderboard-value,
-:root[data-theme="dark"] .gb-podium-slot--1 .gb-podium-value { color: #e0b341; }

package/src/portal.tsx

@@ -80,7 +80,15 @@ export function Avatar({ name, src, size = 24, className }: { name: string; src?
   );
 }
 
-export type LeaderRow = { key: string | number; name: string; value: number; avatar?: string | null; href?: string };
+export type LeaderRow = {
+  key: string | number; name: string; value: number; avatar?: string | null; href?: string;
+  /** Shown after the name: a level, a role (GemCommunity's "Lv2 · Builder"). */
+  badge?: React.ReactNode;
+  /** The viewer's own row: tinted, and announced. */
+  current?: boolean;
+  /** The row's element id, for a "#me" link that scrolls to it. */
+  id?: string;
+};
 
 const MEDALS = ["🥇", "🥈", "🥉"];
 const PODIUM_SLOT = ["gb-podium-slot--1", "gb-podium-slot--2", "gb-podium-slot--3"];
@@ -90,40 +98,44 @@ const PODIUM_SLOT = ["gb-podium-slot--1", "gb-podium-slot--2", "gb-podium-slot--
  * screen readers ("163 votes") and can be shown with `showUnit`. Empty → nothing (a "top" list of
  * zeros looks dead; GemCommunity hides it the same way).
  */
-export function Leaderboard({ title, caption, rows, unit, showUnit = false, viewAll, as: L = "a", className, headingLevel = 2, id }: {
-  title: React.ReactNode; caption?: React.ReactNode; rows: LeaderRow[]; unit?: string; showUnit?: boolean;
+export function Leaderboard({ title, label, caption, rows, unit, showUnit = false, viewAll, as: L = "a", className, headingLevel = 2, id, currentLabel = "you" }: {
+  /** The visible heading. Leave it out on a page whose own <h1> already names the board; give `label`. */
+  title?: React.ReactNode; label?: string; caption?: React.ReactNode; rows: LeaderRow[]; unit?: string; showUnit?: boolean;
   viewAll?: { href: string; label: React.ReactNode }; as?: LinkLike; className?: string; headingLevel?: 2 | 3;
   /** The heading's id. Pass one when two leaderboards share a page or the title is not plain text. */
   id?: string;
+  /** Read by screen readers after the viewer's own name ("Minh, you"). "" when the name already says it on screen. */
+  currentLabel?: string;
 }) {
   if (!rows.length) return null;
   const H = `h${headingLevel}` as "h2" | "h3";
   // From the title's letters (any script) and a hash of it, so "Most helpful" and a Vietnamese or
   // Chinese title each get their own; two boards with the same title need `id`.
-  const text = typeof title === "string" ? title : "leaderboard";
+  const text = typeof title === "string" ? title : label ?? "leaderboard";
   let h = 0;
   for (const ch of text) h = (h * 31 + ch.codePointAt(0)!) >>> 0;
   const headingId = id ?? `gb-lb-${text.toLowerCase().replace(/[^\p{L}\p{N}]+/gu, "-").replace(/^-|-$/g, "")}-${h.toString(36)}`;
   return (
-    <section className={cx("gb-leaderboard", className)} aria-labelledby={headingId}>
-      <H className="gb-leaderboard-title" id={headingId}>{title}</H>
+    <section className={cx("gb-leaderboard", className)} aria-labelledby={title ? headingId : undefined} aria-label={title ? undefined : label}>
+      {title ? <H className="gb-leaderboard-title" id={headingId}>{title}</H> : null}
       {caption ? <p className="gb-leaderboard-caption">{caption}</p> : null}
       <ol className="gb-leaderboard-list">
         {rows.map((r, i) => {
           const inner = (
             <>
               <span className={cx("gb-leaderboard-rank", !MEDALS[i] && "is-number")}>
-                <span aria-hidden="true">{MEDALS[i] ?? i + 1}</span><span className="ui-sr-only">Rank {i + 1}: </span>
+                <span aria-hidden="true">{MEDALS[i] ?? i + 1}</span><span className="gb-sr-only">Rank {i + 1}: </span>
               </span>
               <Avatar name={r.name} src={r.avatar} />
-              <span className="gb-leaderboard-name">{r.name}</span>
+              <span className="gb-leaderboard-name">{r.name}{r.current && currentLabel ? <span className="gb-sr-only">, {currentLabel}</span> : null}</span>
+              {r.badge ? <span className="gb-leaderboard-badge">{r.badge}</span> : null}
               <span className="gb-leaderboard-value">
-                {r.value}{unit ? (showUnit ? <> {unit}</> : <span className="ui-sr-only"> {unit}</span>) : null}
+                {r.value}{unit ? (showUnit ? <> {unit}</> : <span className="gb-sr-only"> {unit}</span>) : null}
               </span>
             </>
           );
           return (
-            <li key={r.key} className={cx("gb-leaderboard-row", i === 0 && "is-first")}>
+            <li key={r.key} id={r.id} className={cx("gb-leaderboard-row", i === 0 && "is-first", r.current && "is-current")}>
               {r.href ? <L href={r.href} className="gb-leaderboard-link">{inner}</L> : <div className="gb-leaderboard-link">{inner}</div>}
             </li>
           );
@@ -144,14 +156,14 @@ export function Podium({ rows, unit, as: L = "a", className }: { rows: LeaderRow
         if (!r) return <li key={idx} className="gb-podium-slot is-empty" aria-hidden="true" />;
         const body = (
           <>
-            <span className="gb-podium-medal"><span aria-hidden="true">{MEDALS[idx]}</span><span className="ui-sr-only">Rank {idx + 1}: </span></span>
+            <span className="gb-podium-medal"><span aria-hidden="true">{MEDALS[idx]}</span><span className="gb-sr-only">Rank {idx + 1}: </span></span>
             <Avatar name={r.name} src={r.avatar} size={56} />
             <span className="gb-podium-name">{r.name}</span>
             <span className="gb-podium-value">{r.value}{unit ? <span className="gb-podium-unit"> {unit}</span> : null}</span>
           </>
         );
         return (
-          <li key={r.key} className={cx("gb-podium-slot", PODIUM_SLOT[idx])}>
+          <li key={r.key} className={cx("gb-podium-slot", PODIUM_SLOT[idx], r.current && "is-current")}>
             {r.href ? <L href={r.href} className="gb-podium-link">{body}</L> : <div className="gb-podium-link">{body}</div>}
           </li>
         );

package/src/theme-dark.css

@@ -0,0 +1,65 @@
+/* ═══ Dark palette — @gemboss/ui 0.7.2 ═══════════════════════════════════════════════════════════════
+   Split out of portal.css (04/10/2026). `ThemeToggle` / `themeScript` set data-theme on <html>, and this
+   file turns every --gemboss-* colour dark under it. It lives apart so that a surface which takes only
+   the leaderboard (gemboss-tokens.css + portal.css) does not inherit it: GemCommunity sets
+   data-theme="dark" for its own sign-in pages and remembers it, and the rule
+   `:root[data-theme="dark"] body` here outranks its body rule, so a member who once picked dark there
+   would get a dark page behind light cards. gemboss-ui.css still carries this file. */
+/* Dark palette. `ThemeToggle` / `themeScript` set data-theme on <html>; a surface without them stays
+   light. Only colours change: the components above and every kit class read these tokens. */
+:root[data-theme="dark"] {
+  color-scheme: dark;
+  --gemboss-primary: #f2f3f5;
+  --gemboss-primary-dark: #ffffff;
+  --gemboss-primary-soft: #23242a;
+  --gemboss-on-primary: #0d0d12;
+  --gemboss-accent: #7c84ff;
+  --gemboss-accent-strong: #a3a9ff;
+  --gemboss-accent-soft: #1f2140;
+  --gemboss-text-strong: #f2f3f5;
+  --gemboss-text: #e3e4e8;
+  --gemboss-text-muted: #9a9ca6;
+  --gemboss-surface: #16171d;
+  --gemboss-canvas: #0d0d12;
+  --gemboss-app-bg: #0d0d12;
+  --gemboss-rail-bg: #0d0d12;
+  --gemboss-panel-bg: #16171d;
+  --gemboss-topbar-bg: rgba(13, 13, 18, 0.96);
+  --gemboss-nav-bg: #0d0d12;
+  --gemboss-nav-hover: rgba(255, 255, 255, 0.06);
+  --gemboss-divider: #2a2b33;
+  --gemboss-divider-soft: #22232a;
+  --gemboss-hover: #22232b;
+  --gemboss-active-bg: #262833;
+  --gemboss-active-fg: #f2f3f5;
+  --gemboss-field-bg: #121318;
+  --gemboss-field-bg-hover: #17181e;
+  --gemboss-field-ink: #e3e4e8;
+  --gemboss-field-placeholder: #8a8c96;
+  --gemboss-field-line: #3a3c46;
+  --gemboss-field-line-hover: #50525e;
+  --gemboss-field-line-active: #c9cbd3;
+  --gemboss-chip-ink: #d6d8de;
+  --gemboss-chip-line: #3a3c46;
+  --gemboss-chip-line-hover: #50525e;
+  --gemboss-chip-bg-hover: #22232b;
+  --gemboss-success: #34c38f;
+  --gemboss-success-strong: #5fd6a8;
+  --gemboss-success-soft: #13291f;
+  --gemboss-success-border: #22533e;
+  --gemboss-warning: #e0b341;
+  --gemboss-warning-soft: #2b2412;
+  --gemboss-warning-border: #5a4a1d;
+  --gemboss-danger: #ff6b5a;
+  --gemboss-danger-strong: #ff8a7c;
+  --gemboss-danger-soft: #2e1714;
+  --gemboss-danger-border: #5c2a24;
+  --ui-accent-fg: #0d0d12;
+  --ui-warning-fg: #e8c063;
+  --gb-brand-ink: #f2f3f5;
+}
+/* Avatar initials in dark: the tone's light end, so the text clears 4.5:1 on its tinted disc. */
+:root[data-theme="dark"] .gb-avatar[data-tone] { background: color-mix(in srgb, var(--gb-tone) 30%, #16171d); color: color-mix(in srgb, var(--gb-tone) 35%, #ffffff); }
+:root[data-theme="dark"] body { background: var(--gemboss-app-bg); color: var(--gemboss-text); }
+:root[data-theme="dark"] .gb-leaderboard-row.is-first .gb-leaderboard-value,
+:root[data-theme="dark"] .gb-podium-slot--1 .gb-podium-value { color: #e0b341; }

package/src/ui.css

@@ -274,10 +274,11 @@ a.ui-metric:focus-visible { outline: 2px solid var(--ui-focus); outline-offset:
 
 /* ── Modal ────────────────────────────────────────────────────────────────────
    Rendered INLINE (not portaled): a portal escapes the .gemboss-admin-shell token
-   scope and would render light. Kept in-tree so --ui-* resolves to the surface. */
+   scope and would render light. Kept in-tree so --ui-* resolves to the surface.
+   0.7.3: Polaris Modal's density (#1099, README "Popup density"). Popup only: --ui-control-h stays 32. */
 .ui-overlay {
   position: fixed; inset: 0; z-index: 500;
-  background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(2px);
+  background: rgba(0, 0, 0, 0.5);
   display: grid; place-items: center; padding: 20px;
 }
 .ui-modal {
@@ -287,30 +288,39 @@ a.ui-metric:focus-visible { outline: 2px solid var(--ui-focus); outline-offset:
 }
 /* Head = title + the one close button every modal used to draw for itself. */
 .ui-modal__head {
-  display: flex; align-items: flex-start; gap: 16px;
-  padding: 16px 20px; border-bottom: 1px solid var(--ui-border);
-  font-size: 15px; font-weight: 620; color: var(--ui-text);
+  display: flex; align-items: center; gap: 12px;
+  padding: 12px 16px; border-bottom: 1px solid var(--ui-border);
+  font-size: 14px; line-height: 20px; font-weight: 650; color: var(--ui-text);
 }
 .ui-modal__title { min-width: 0; flex: 1 1 auto; }
 .ui-modal__close {
   flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
-  width: 44px; height: 44px; margin: -8px -8px -8px 0;   /* a 44px target that does not grow the head */
+  width: 28px; height: 28px; padding: 0;
   border: 0; border-radius: var(--ui-radius-md, 8px); background: transparent;
   color: var(--ui-text-muted); cursor: pointer;
 }
 .ui-modal__close svg { width: 20px; height: 20px; }
 .ui-modal__close:hover { background: var(--ui-surface-2); color: var(--ui-text); }
 .ui-modal__close:focus-visible { outline: 2px solid var(--ui-focus); outline-offset: -2px; }
+/* Here, not in kit-plain.css: the admin loads only this file (0.7.3). */
+.ui-modal__body { padding: 16px; }
+.ui-modal__foot {
+  display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end;
+  padding: 12px 16px; border-top: 1px solid var(--ui-border);
+}
+:is(.ui-modal__head, .ui-modal__foot) .ui-btn { height: 28px; padding: 0 12px; font-size: var(--ui-fs-caption); }
+/* 44px under a thumb or at phone width; -8px keeps the head 53. */
+@media (pointer: coarse), (max-width: 47.9975em) {
+  .ui-modal__close { width: 44px; height: 44px; margin: -8px -8px -8px 0; }
+  :is(.ui-modal__head, .ui-modal__foot) .ui-btn { min-height: 44px; }
+}
 
-/* `size="lg"` — the screen-shaped dialog. Only the HOOK lives here: this sheet is imported by the
-   root layout, so every rule in it is paid on every screen, and the geometry of a dialog with one
-   consumer belongs in that consumer's chunk (see SettingsDialog.module.css). */
+/* `size="lg"`: only the HOOK here (this sheet is paid on every screen); its geometry is in
+   SettingsDialog.module.css, the one consumer's chunk. */
 .ui-modal--lg { position: relative; }
 
-/* The kit's multi-line field joins the ONE field family (01/10/2026, Chris: "form control đồng bộ"):
-   same input-border token, hover and focus ring as `gemboss-field` and `.ui-select`. Before, it drew a
-   lighter --ui-border box at 14px with no focus ring, so on GemFactory's compose form a textarea sat
-   beside selects of a darker border and text fields of a third look (measured on prod). */
+/* The kit's multi-line field is the ONE field family (01/10/2026, Chris: "form control đồng bộ"): same
+   border token, hover and focus ring as `gemboss-field` / `.ui-select` (it drew a third look on GemFactory). */
 .ui-textarea {
   width: 100%; min-height: 96px; resize: vertical; box-sizing: border-box;
   background: var(--p-color-input-bg-surface, var(--gemboss-field-bg));