@prenta/admin 2.6.1 → 2.8.0

package/src/styles/prenta-tokens.css

@@ -6,70 +6,63 @@
  * Scoped to .prenta-admin rather than :root on purpose: the admin renders
  * inside consumer applications, and custom properties resolve by INHERITANCE,
  * not by specificity — a host site's :root would otherwise win against every
- * admin rule reading these names. Appearance settings mutate --acc / --primary
- * at runtime on this same element.
+ * admin rule reading these names. The ThemeProvider writes --acc-base,
+ * --acc-lt and --acc-dk inline on this same element, and sets data-light and
+ * data-theme on it.
  */
 
 .prenta-admin {
   /* Surfaces */
-  --bg: #f5f4fa; /* App background */
+  --bg: #f4f5f7; /* Porcelain app background */
   --sb: #ffffff; /* Sidebar / topbar surface */
   --card: #ffffff; /* Card / panel surface */
-  --bdr: #e8e6f2; /* Hairline border */
+  --bdr: #e3e5ea; /* Hairline border */
 
   /* Text */
-  --txt: #1a1827; /* Primary text */
-  --sub: #6b6878; /* Secondary text */
+  --txt: #16181d; /* Primary text */
+  --sub: #50555f; /* Secondary text */
   /*
-   * Tertiary text. The handoff value #B0ADBE is 2.2:1 on --card — below WCAG
-   * AA. The admin uses --muted as real text (section labels, check hints,
-   * canvas meta line, character counters), so it is darkened to 4.6:1 while
-   * staying one step lighter than --sub to preserve the hierarchy. Do not
-   * revert without also changing every --muted consumer to decorative use.
-   * Handoff value: #b0adbe — deliberately overridden.
+   * Tertiary text. October 2026 Porcelain value, 5.27:1 on white. Tailwind
+   * exposes it as text-faint, because bg-muted is a surface in this repo.
    */
-  --muted: #716e83;
+  --muted: #676c76;
 
   /* Accent */
-  --acc: #7c3aed; /* Accent / interactive */
-  --acc-l: #ede9fe; /* Accent tint (hover/active bg) */
-  --acc-m: #c4b5fd; /* Accent mid (focus ring) */
-
-  /* Semantic */
   /*
-   * Success text/fill. The handoff value #059669 is 3.57:1 on --suc-l at
-   * 11.5px (axe on Pages Published chips). Emerald-700 meets 4.5:1 on that
-   * tint, on bg-success/10 over a card, and with white. Handoff value: #059669
-   * — deliberately overridden.
+   * Picked accent, Cobalt by default. Presets: Teal #0F8A7E, Actuate coral
+   * #E8645A, Rust #C2410C, Slate #3F4A5A.
    */
-  --suc: #047857;
-  --suc-l: #ecfdf5;
+  --acc-base: #2f5bea;
   /*
-   * Warning text/fill. The handoff value #D97706 is 2.85:1 on --warn-l.
-   * Amber-700 #B45309 is 4.39:1 on bg-warning/10 over a card (axe on dashboard
-   * Scheduled chips). Amber-800 meets 4.5:1 on that mixed tint and with white.
-   * Handoff value: #d97706 — deliberately overridden.
+   * Accent text and fills. --acc-lt is the pick nudged toward black until it
+   * clears 4.6:1.
    */
-  --warn: #92400e;
-  --warn-l: #fffbeb;
+  --acc: var(--acc-lt, var(--acc-base));
+  /* Accent tint: hover, selected rows, active nav */
+  --acc-l: color-mix(in oklch, var(--acc) 11%, var(--card));
+  /* Accent mid: focus ring, hover borders */
+  --acc-m: color-mix(in oklch, var(--acc) 38%, var(--card));
+  --on-acc: #ffffff; /* Text on accent fills */
+
+  /* Semantic */
+  --suc: #047857; /* Success text/fill. Text on its own tint clears 4.5:1. */
+  --suc-l: #ecfdf5;
   /*
-   * Error text/fill. The handoff value #DC2626 is 4.41:1 on --err-l — just
-   * under AA for 11.5px StatusBadge text. Red-700 meets 4.5:1 on that tint and
-   * with white. Handoff value: #dc2626 — deliberately overridden.
+   * Warning text/fill. 4.84:1 on --warn-l, 5.02:1 on white. Pair it with
+   * --warn-l, not a translucent warn mix (4.39:1 at 10%).
    */
-  --err: #b91c1c;
+  --warn: #b45309;
+  --warn-l: #fffbeb;
+  --err: #b91c1c; /* Error text/fill */
   --err-l: #fef2f2;
-  /*
-   * Info text/fill. The handoff value #0891B2 is 3.31:1 on --info-l. Cyan-700
-   * meets 4.5:1 on that tint and with white. Handoff value: #0891b2 —
-   * deliberately overridden.
-   */
-  --info: #0e7490;
+  --info: #0e7490; /* Info text/fill */
   --info-l: #e0f7fa;
+  --orange: #c2410c;
+  --notify-dot: #e11d48; /* Topbar bell unread dot */
 
   /* Tag palette */
-  --tag-purple: #7c3aed;
-  --tag-purple-soft: #f3e8ff;
+  --tag-purple: #4f46e5;
+  --tag-purple-soft: #eef2ff;
   --tag-green: #0f766e;
   --tag-green-soft: #ccfbf1;
   --tag-orange: #c2410c;
@@ -93,10 +86,71 @@
   --tag-gray: #475569;
   --tag-gray-soft: #f1f5f9;
 
+  /* Avatars */
+  --avatar-1: #2f5bea;
+  --avatar-2: #0e7490;
+  --avatar-3: #047857;
+  --avatar-4: #b45309;
+  --avatar-5: #e11d48;
+  --avatar-6: #4f46e5;
+  --avatar-7: #db2777;
+  /*
+   * The handoff value #0D9488 is 3.74:1 with white initials. Teal-700 meets
+   * 4.5:1. Handoff value: #0d9488 — deliberately overridden.
+   */
+  --avatar-8: #0f766e;
+
   /* AI */
-  --ai1: #7c3aed;
-  --ai2: #c026d3;
-  --ai-soft: linear-gradient(135deg, rgba(124, 58, 237, 0.09), rgba(192, 38, 211, 0.07));
+  --ai1: var(--acc);
+  /*
+   * Second AI gradient stop: the accent rotated 50°. Darkened on light bases
+   * so white text keeps 4.5:1, hover brightness included (the kit lightens it,
+   * 2.85:1 on Cobalt)
+   */
+  --ai2: oklch(from var(--acc) calc(l - 0.07) c calc(h - 50));
+  --ai-soft: linear-gradient(
+    135deg,
+    color-mix(in oklch, var(--ai1) 9%, transparent),
+    color-mix(in oklch, var(--ai2) 7%, transparent)
+  );
+
+  /* Overlays */
+  --scrim: rgba(10, 12, 20, 0.38); /* Modal backdrop */
+  --scrim-drawer: rgba(10, 12, 20, 0.28); /* Drawer backdrop */
+
+  /* Code surfaces */
+  --code-bg: #0f1115;
+  --code-txt: #d6dae1;
+  --code-cmt: #6b7280;
+  --code-str: #9fd39b;
+  --code-kw: #c4a7ff;
+  --code-err: #f2b8b5;
+  --code-btn-bg: #171a20;
+  --code-btn-bdr: #2a2e36;
+  --code-btn-txt: #c9cdd4;
+  --code-file: #8a8f99; /* File-name caption over a code block */
+
+  /* Site preview */
+  --site-bg: #ffffff;
+  --site-txt: #16181d;
+  --site-sub: #50555f;
+  --site-muted: #8a8f99;
+  --site-bdr: #e3e5ea;
+  --site-alt: #f4f5f7;
+  --site-alt2: #eef0f3;
+  --site-chip: #d9dce1;
+  --site-foot-txt: #c9cdd4;
+  /* The announcement's Alert tone, as the mock and the Style pills draw it */
+  --site-alert: #b45309;
+  --site-thumb: #2a2d33; /* Footer variant thumbnails */
+  --site-thumb-bar: #555555;
+
+  /* Search preview */
+  /*
+   * Search result title in the SERP preview. Google's link blue, so the card
+   * looks like the result it previews; never derived from the accent.
+   */
+  --serp-link: #1a0dab;
 
   /* Controls */
   /*
@@ -106,31 +160,48 @@
   --toggle-thumb: #ffffff;
 
   /* Type */
-  /*
-   * UI text. system-ui until OFL woff2 ships under design-system/fonts/. Never
-   * a third-party request — the admin renders inside consumer applications.
-   */
-  --font-sans: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
-  /* Code, robots directives, token names */
+  /* UI text. DM Sans is self-hosted via @fontsource (no Google Fonts request). */
+  --font-sans: 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
+  /* Code, keys, ids, paths and slugs */
   --font-mono: 'DM Mono', ui-monospace, 'SFMono-Regular', monospace;
   --fw-reg: 450;
   --fw-med: 500;
   --fw-semi: 600;
   --fw-bold: 700;
   --fs-page: 21px; /* Page title */
-  --fs-card: 14px; /* Card / section title */
+  --fs-drawer: 16px; /* Drawer / modal title */
+  --fs-stat: 20px; /* Jobs drawer result numbers */
+  --fs-figure: 14px; /* Batch wizard match count and estimates */
+  --fs-card: 13.5px; /* Card heading */
   --fs-body: 13px; /* Body, controls, table cells */
-  --fs-sub: 12px; /* Secondary / captions */
-  --fs-hint: 11.5px; /* Hints, metadata */
-  --fs-label: 10px; /* Section labels */
+  --fs-sm: 12.5px; /* Secondary rows, breadcrumbs, chips */
+  --fs-sub: 12px; /* Meta, help */
+  --fs-hint: 11.5px; /* Hints, table meta, mono */
+  --fs-badge: 9.5px; /* Nav unread badges */
+  --fs-tab: 9px; /* Mobile tab bar labels */
+  --fs-count: 10.5px; /* Count badges in tabs and nav */
+  --fs-micro: 11px; /* Table headers */
+  --fs-label: 10px; /* Sidebar section labels */
 
   /* Layout */
-  --sbw: 224px;
-  --sbw-col: 60px;
+  --sbw: 224px; /* Sidebar expanded */
+  --sbw-col: 60px; /* Sidebar collapsed / tablet rail */
   --tbh: 56px;
+  --gut: 28px; /* Page gutter (laptop tier) */
+  --drawer-w: 440px; /* Generic drawer */
+  --jobs-drawer-w: 620px; /* Jobs detail drawer */
+  --tabbar-h: 56px; /* Mobile bottom tab bar */
 
   /* Radius */
-  --r-sm: 6px; /* Small buttons, badges, tags, chips-in-rows */
+  --r-xs: 4px; /* kbd, consent badge */
+  --r-sm: 5px; /* Tiny tags */
+  --r-6: 6px; /* Small icon buttons, chips in rows */
+  --r-7: 7px; /* Nav items, menu buttons */
+  --r-8: 8px; /* Buttons, inputs, selects */
+  --r-9: 9px; /* Toasts, list items */
+  --r-10: 10px; /* Inner cards, alerts, KPI tiles */
+  --r-12: 12px; /* Page cards */
+  --r-14: 14px; /* Modals */
   --r-field: 7px; /* Text inputs, textareas, selects */
   /*
    * Primary / secondary buttons, dropdowns. --r-control is the pre-2.0 name,
@@ -138,7 +209,7 @@
    */
   --r-ctl: 8px;
   --r-control: var(--r-ctl); /* deprecated alias */
-  --r: 10px; /* Cards and panels */
+  --r: 12px; /* Cards and panels */
   --r-fig: 12px; /* Canvas figures and media frames */
   --r-pill: 99px; /* Toggles, meters, notice pills */
 
@@ -170,13 +241,17 @@
   --ring: 0 0 0 3px var(--acc-m); /* Focus ring shadow */
 
   /* Elevation */
-  --shd: 0 1px 2px rgba(0, 0, 0, 0.05), 0 1px 4px rgba(0, 0, 0, 0.04); /* Card resting */
-  --shd2: 0 4px 16px rgba(0, 0, 0, 0.1); /* Popovers, modals, hover */
+  --shd: 0 1px 2px rgba(16, 18, 24, 0.05), 0 1px 4px rgba(16, 18, 24, 0.04); /* Card resting */
+  --shd2: 0 4px 16px rgba(16, 18, 24, 0.1); /* Popovers, modals, hover */
+  --shd-bar: 0 10px 30px rgba(0, 0, 0, 0.22); /* Floating unsaved-changes bar */
+  --shd-knob: 0 1px 2px rgba(0, 0, 0, 0.25); /* Switch knob */
+  --shd-save: 0 -3px 16px rgba(0, 0, 0, 0.06); /* Settings save bar (Settings.html .ap-save) */
+  --shd-tabbar: 0 -2px 12px rgba(0, 0, 0, 0.08); /* Mobile bottom tab bar */
 
   /* Motion */
   --mo-fast: 0.12s; /* Hover, color */
   --motion-fast: var(--mo-fast); /* deprecated alias */
-  --mo-base: 0.18s; /* Toggles, reveals */
+  --mo-base: 0.15s; /* Toggles, reveals */
   --motion-base: var(--mo-base); /* deprecated alias */
   --mo-slow: 0.22s; /* Panels, canvas scale */
   --ease: cubic-bezier(0.4, 0, 0.2, 1);
@@ -185,34 +260,62 @@
 
   /* Layering */
   --z-raise: 2; /* Canvas section labels, sticky group headers */
+  --z-bar: 20; /* Sticky bars */
   --z-resizer: 30; /* Panel drag handle */
   --z-overlay: 45; /* In-panel overlays (version history) */
+  /*
+   * Mobile bottom tab bar. Kit 110; below the admin's overlays (scrims 40,
+   * drawers and dialogs 50+) so it never covers a sheet's footer
+   */
+  --z-tabbar: 30;
   --z-menu: 120; /* Dropdowns, flyouts */
-  --z-toast: 200;
+  --z-drawer-scrim: 150;
+  --z-drawer: 160;
+  --z-modal: 200;
+  --z-toast: 260;
+  --z-toast-jobs: 300; /* Jobs toasts over the Jobs drawer */
+}
+
+.prenta-admin:where([data-light='linen']:not(.dark):not([data-theme='dark']):not(.dark *)) {
+  /* Surfaces */
+  --bg: #f5f2ec;
+  --sb: #fbfaf7;
+  --card: #ffffff;
+  --bdr: #e6e0d6;
+
+  /* Text */
+  --txt: #1e1a15;
+  --sub: #5c554a;
+  --muted: #6d665a;
+
+  /* Elevation */
+  --shd: 0 1px 2px rgba(40, 30, 15, 0.06), 0 1px 4px rgba(40, 30, 15, 0.04);
+  --shd2: 0 4px 16px rgba(40, 30, 15, 0.1);
 }
 
 .dark .prenta-admin,
 .prenta-admin.dark,
 .prenta-admin[data-theme='dark'] {
   /* Surfaces */
-  --bg: #0d0c18;
-  --sb: #141222;
-  --card: #1c1a2e;
-  --bdr: #2c2a42;
+  --bg: #0e0f11;
+  --sb: #15161a;
+  --card: #1b1d21;
+  --bdr: #2a2d33;
 
   /* Text */
-  --txt: #eae8f5;
-  --sub: #8e8ba8;
-  /*
-   * Same AA correction as light mode — the handoff value #504E68 is 2.1:1 on
-   * --card. Handoff value: #504e68 — deliberately overridden.
-   */
-  --muted: #8784a2;
+  --txt: #ecedef;
+  --sub: #adb1ba;
+  --muted: #9499a3; /* Graphite tertiary text. 5.90:1 on the Graphite card. */
 
   /* Accent */
-  --acc: #9d71f0;
-  --acc-l: #231950;
-  --acc-m: #5e3eaa;
+  /*
+   * --acc-dk is the pick nudged toward white until it clears 4.6:1 on
+   * Graphite.
+   */
+  --acc: var(--acc-dk, color-mix(in oklch, var(--acc-base) 70%, #ffffff));
+  --acc-l: color-mix(in oklch, var(--acc-base) 20%, var(--card));
+  --acc-m: color-mix(in oklch, var(--acc-base) 50%, var(--card));
+  --on-acc: #0e0f11;
 
   /* Semantic */
   --suc: #10b981;
@@ -223,10 +326,11 @@
   --err-l: #200808;
   --info: #38bdf8;
   --info-l: #0a2838;
+  --orange: #fb923c;
 
   /* Tag palette */
-  --tag-purple: #a78bfa;
-  --tag-purple-soft: #2e1065;
+  --tag-purple: #818cf8;
+  --tag-purple-soft: #1e1b4b;
   --tag-green: #2dd4bf;
   --tag-green-soft: #042f2e;
   --tag-orange: #fb923c;
@@ -241,11 +345,105 @@
   --tag-gray-soft: #1e293b;
 
   /* AI */
-  --ai1: #7c3aed;
-  --ai2: #c026d3;
-  --ai-soft: linear-gradient(135deg, rgba(157, 113, 240, 0.16), rgba(192, 38, 211, 0.12));
+  /* Graphite keeps the kit's lighter stop: the text on it is dark */
+  --ai2: oklch(from var(--acc) calc(l + 0.1) c calc(h - 50));
+  --ai-soft: linear-gradient(
+    135deg,
+    color-mix(in oklch, var(--ai1) 16%, transparent),
+    color-mix(in oklch, var(--ai2) 12%, transparent)
+  );
+
+  /* Search preview */
+  --serp-link: #8ab4f8;
 
   /* Elevation */
   --shd: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 4px rgba(0, 0, 0, 0.2);
   --shd2: 0 4px 20px rgba(0, 0, 0, 0.45);
 }
+
+.prenta-admin .prenta-base-preview[data-base='porcelain'] {
+  /* Surfaces */
+  --bg: #f4f5f7; /* Porcelain app background */
+  --sb: #ffffff; /* Sidebar / topbar surface */
+  --card: #ffffff; /* Card / panel surface */
+  --bdr: #e3e5ea; /* Hairline border */
+
+  /* Text */
+  --txt: #16181d; /* Primary text */
+  --sub: #50555f; /* Secondary text */
+  /*
+   * Tertiary text. October 2026 Porcelain value, 5.27:1 on white. Tailwind
+   * exposes it as text-faint, because bg-muted is a surface in this repo.
+   */
+  --muted: #676c76;
+
+  /* Accent */
+  /*
+   * Picked accent, Cobalt by default. Presets: Teal #0F8A7E, Actuate coral
+   * #E8645A, Rust #C2410C, Slate #3F4A5A.
+   */
+  --acc-base: #2f5bea;
+  /*
+   * Accent text and fills. --acc-lt is the pick nudged toward black until it
+   * clears 4.6:1.
+   */
+  --acc: var(--acc-lt, var(--acc-base));
+  /* Accent tint: hover, selected rows, active nav */
+  --acc-l: color-mix(in oklch, var(--acc) 11%, var(--card));
+  /* Accent mid: focus ring, hover borders */
+  --acc-m: color-mix(in oklch, var(--acc) 38%, var(--card));
+  --on-acc: #ffffff; /* Text on accent fills */
+}
+
+.prenta-admin .prenta-base-preview[data-base='linen'] {
+  /* Surfaces */
+  --bg: #f5f2ec;
+  --sb: #fbfaf7;
+  --card: #ffffff;
+  --bdr: #e6e0d6;
+
+  /* Text */
+  --txt: #1e1a15;
+  --sub: #5c554a;
+  --muted: #6d665a;
+
+  /* Accent */
+  /*
+   * Picked accent, Cobalt by default. Presets: Teal #0F8A7E, Actuate coral
+   * #E8645A, Rust #C2410C, Slate #3F4A5A.
+   */
+  --acc-base: #2f5bea;
+  /*
+   * Accent text and fills. --acc-lt is the pick nudged toward black until it
+   * clears 4.6:1.
+   */
+  --acc: var(--acc-lt, var(--acc-base));
+  /* Accent tint: hover, selected rows, active nav */
+  --acc-l: color-mix(in oklch, var(--acc) 11%, var(--card));
+  /* Accent mid: focus ring, hover borders */
+  --acc-m: color-mix(in oklch, var(--acc) 38%, var(--card));
+  --on-acc: #ffffff; /* Text on accent fills */
+}
+
+.prenta-admin .prenta-base-preview[data-base='graphite'] {
+  /* Surfaces */
+  --bg: #0e0f11;
+  --sb: #15161a;
+  --card: #1b1d21;
+  --bdr: #2a2d33;
+
+  /* Text */
+  --txt: #ecedef;
+  --sub: #adb1ba;
+  --muted: #9499a3; /* Graphite tertiary text. 5.90:1 on the Graphite card. */
+
+  /* Accent */
+  /*
+   * --acc-dk is the pick nudged toward white until it clears 4.6:1 on
+   * Graphite.
+   */
+  --acc: var(--acc-dk, color-mix(in oklch, var(--acc-base) 70%, #ffffff));
+  --acc-l: color-mix(in oklch, var(--acc-base) 20%, var(--card));
+  --acc-m: color-mix(in oklch, var(--acc-base) 50%, var(--card));
+  --on-acc: #0e0f11;
+}