npm - @prenta/admin - Versions diffs - 0.92.0 → 0.94.0 - Mend

@prenta/admin 0.92.0 → 0.94.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (425) hide show

package/design-system/tokens.css CHANGED Viewed

@@ -1,81 +1,185 @@
-/* ============================================================
-   PrentaCMS — Design Tokens
-   Version 1.0 · Generated for developer handoff
-   ------------------------------------------------------------
-   Drop this file in and reference the CSS custom properties.
-   Light theme is the default (:root). Dark theme activates
-   via [data-theme="dark"] on the <html> element.
-   ============================================================ */
+/*
+ * PrentaCMS — Design Tokens v2.0.0
+ * GENERATED FILE — DO NOT EDIT. Source: design-system/tokens.json.
+ * Regenerate: pnpm --filter @prenta/admin generate
+ *
+ * Light theme is the default (:root); dark activates via [data-theme="dark"]
+ * on <html>. Consumers embedding @prenta/admin should import
+ * src/styles/prenta-tokens.css instead — it scopes the same values to
+ * .prenta-admin so a host page's :root cannot override them.
+ */
 :root {
-  /* ── Surfaces ─────────────────────────────────────────── */
-  --bg: #f5f4fa; /* app background            */
-  --sb: #ffffff; /* sidebar / topbar surface  */
-  --card: #ffffff; /* card / panel surface      */
-  --bdr: #e8e6f2; /* hairline border           */
-  /* ── Text ─────────────────────────────────────────────── */
-  --txt: #1a1827; /* primary text              */
-  --sub: #6b6878; /* secondary text            */
-  --muted: #b0adbe; /* tertiary / placeholder    */
-  /* ── Accent (brand purple) ────────────────────────────── */
-  --acc: #7c3aed; /* accent / interactive      */
-  --acc-l: #ede9fe; /* accent tint (hover/active)*/
-  --acc-m: #c4b5fd; /* accent mid (focus ring)   */
-  /* ── Semantic ─────────────────────────────────────────── */
+  /* Surfaces */
+  --bg: #f5f4fa; /* App background */
+  --sb: #ffffff; /* Sidebar / topbar surface */
+  --card: #ffffff; /* Card / panel surface */
+  --bdr: #e8e6f2; /* Hairline border */
+  /* Text */
+  --txt: #1a1827; /* Primary text */
+  --sub: #6b6878; /* 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.
+   */
+  --muted: #716e83;
+  /* Accent */
+  --acc: #7c3aed; /* Accent / interactive */
+  --acc-l: #ede9fe; /* Accent tint (hover/active bg) */
+  --acc-m: #c4b5fd; /* Accent mid (focus ring) */
+  /* Semantic */
   --suc: #059669;
-  --suc-l: #ecfdf5; /* success */
+  --suc-l: #ecfdf5;
   --warn: #d97706;
-  --warn-l: #fffbeb; /* warning */
+  --warn-l: #fffbeb;
   --err: #dc2626;
-  --err-l: #fef2f2; /* error   */
+  --err-l: #fef2f2;
   --info: #0891b2;
-  --info-l: #e0f7fa; /* info    */
-  /* ── AI gradient ──────────────────────────────────────── */
+  --info-l: #e0f7fa;
+  /* Tag palette */
+  --tag-purple: #7c3aed;
+  --tag-purple-soft: #f3e8ff;
+  --tag-green: #0f766e;
+  --tag-green-soft: #ccfbf1;
+  --tag-orange: #c2410c;
+  --tag-orange-soft: #ffedd5;
+  --tag-red: #be123c;
+  --tag-red-soft: #ffe4e6;
+  --tag-blue: #1d4ed8;
+  --tag-blue-soft: #dbeafe;
+  --tag-pink: #db2777;
+  --tag-pink-soft: #fce7f3;
+  --tag-gray: #64748b;
+  --tag-gray-soft: #f1f5f9;
+  /* AI */
   --ai1: #7c3aed;
   --ai2: #c026d3;
   --ai-soft: linear-gradient(135deg, rgba(124, 58, 237, 0.09), rgba(192, 38, 211, 0.07));
-  /* ── Dimensions ───────────────────────────────────────── */
-  --sbw: 224px; /* sidebar width (expanded)  */
-  --sbw-col: 60px; /* sidebar width (collapsed) */
-  --tbh: 56px; /* topbar height             */
-  --r: 10px; /* base radius (cards)       */
-  --r-control: 8px; /* buttons, inputs           */
-  --r-sm: 6px; /* badges, tags              */
-  --r-pill: 99px; /* toggles, progress         */
-  /* ── Motion ───────────────────────────────────────────── */
-  --motion-fast: 0.12s;
-  --motion-base: 0.18s;
+  /* Controls */
+  /*
+   * Switch knob stays white in both themes per the design system; tokenized so
+   * a consumer theme can move it.
+   */
+  --toggle-thumb: #ffffff;
+  /* Type */
+  /*
+   * UI text. Self-hosted woff2 under design-system/fonts — never a third-party
+   * request, because the admin renders inside consumer applications.
+   */
+  --font-sans: 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
+  /* Code, robots directives, token names */
+  --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-body: 13px; /* Body, controls, table cells */
+  --fs-sub: 12px; /* Secondary / captions */
+  --fs-hint: 11.5px; /* Hints, metadata */
+  --fs-label: 10px; /* Section labels */
+  /* Layout */
+  --sbw: 224px;
+  --sbw-col: 60px;
+  --tbh: 56px;
+  /* Radius */
+  --r-sm: 6px; /* Small buttons, badges, tags, chips-in-rows */
+  --r-field: 7px; /* Text inputs, textareas, selects */
+  /*
+   * Primary / secondary buttons, dropdowns. --r-control is the pre-2.0 name,
+   * kept resolving for existing rules.
+   */
+  --r-ctl: 8px;
+  --r-control: var(--r-ctl); /* deprecated alias */
+  --r: 10px; /* Cards and panels */
+  --r-fig: 12px; /* Canvas figures and media frames */
+  --r-pill: 99px; /* Toggles, meters, notice pills */
+  /* Spacing */
+  --sp-2: 2px;
+  --sp-4: 4px;
+  --sp-6: 6px;
+  --sp-8: 8px;
+  --sp-10: 10px;
+  --sp-12: 12px; /* Row padding-y */
+  --sp-14: 14px; /* Panel padding */
+  --sp-16: 16px; /* Editor header padding-x */
+  --sp-18: 18px; /* Canvas gutter top */
+  --sp-20: 20px;
+  --sp-24: 24px; /* Canvas gutter sides */
+  --sp-28: 28px;
+  --sp-32: 32px;
+  --sp-40: 40px; /* Canvas gutter bottom */
+  /* Control sizing */
+  --h-chip: 26px; /* Rail buttons, theme toggle */
+  --h-field: 33px; /* Text inputs and small buttons */
+  --h-ctl: 34px; /* Header controls: icon buttons, breakpoint trigger, zoom chip, SEO chip */
+  /* Border */
+  --bw: 1px;
+  --bw-ctl: 1.5px; /* Input and card border */
+  --bw-focus: 2px; /* Focus and active outline */
+  --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 */
+  /* Motion */
+  --mo-fast: 0.12s; /* Hover, color */
+  --motion-fast: var(--mo-fast); /* deprecated alias */
+  --mo-base: 0.18s; /* 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);
+  /* Pre-2.0 composite. Use --mo-slow var(--ease) instead. */
   --motion-layout: 0.22s cubic-bezier(0.4, 0, 0.2, 1);
-  /* ── Elevation ────────────────────────────────────────── */
-  --shd: 0 1px 2px rgba(0, 0, 0, 0.05), 0 1px 4px rgba(0, 0, 0, 0.04);
-  --shd2: 0 4px 16px rgba(0, 0, 0, 0.1);
+  /* Layering */
+  --z-raise: 2; /* Canvas section labels, sticky group headers */
+  --z-resizer: 30; /* Panel drag handle */
+  --z-overlay: 45; /* In-panel overlays (version history) */
+  --z-menu: 120; /* Dropdowns, flyouts */
+  --z-toast: 200;
 }
 [data-theme='dark'] {
-  /* ── Surfaces ─────────────────────────────────────────── */
+  /* Surfaces */
   --bg: #0d0c18;
   --sb: #141222;
   --card: #1c1a2e;
   --bdr: #2c2a42;
-  /* ── Text ─────────────────────────────────────────────── */
+  /* Text */
   --txt: #eae8f5;
   --sub: #8e8ba8;
-  --muted: #504e68;
+  /*
+   * Same AA correction as light mode — the handoff value #504E68 is 2.1:1 on
+   * --card. Handoff value: #504e68 — deliberately overridden.
+   */
+  --muted: #8784a2;
-  /* ── Accent ───────────────────────────────────────────── */
+  /* Accent */
   --acc: #9d71f0;
   --acc-l: #231950;
   --acc-m: #5e3eaa;
-  /* ── Semantic ─────────────────────────────────────────── */
+  /* Semantic */
   --suc: #10b981;
   --suc-l: #022c22;
   --warn: #fbbf24;
@@ -85,30 +189,28 @@
   --info: #38bdf8;
   --info-l: #0a2838;
-  /* ── AI gradient ──────────────────────────────────────── */
+  /* Tag palette */
+  --tag-purple: #a78bfa;
+  --tag-purple-soft: #2e1065;
+  --tag-green: #2dd4bf;
+  --tag-green-soft: #042f2e;
+  --tag-orange: #fb923c;
+  --tag-orange-soft: #431407;
+  --tag-red: #fb7185;
+  --tag-red-soft: #4c0519;
+  --tag-blue: #60a5fa;
+  --tag-blue-soft: #1e3a8a;
+  --tag-pink: #f472b6;
+  --tag-pink-soft: #500724;
+  --tag-gray: #94a3b8;
+  --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));
-  /* ── Elevation ────────────────────────────────────────── */
+  /* 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);
 }
-/* ============================================================
-   Type — DM Sans (UI) + DM Mono (code / tokens)
-   Load via:
-   https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&family=DM+Mono:wght@400;500&display=swap
-   ============================================================ */
-:root {
-  --font-sans: 'DM Sans', system-ui, -apple-system, sans-serif;
-  --font-mono: 'DM Mono', ui-monospace, 'SFMono-Regular', monospace;
-  /* Type scale (px) */
-  --fs-page: 21px; /* page title      · 700 · -0.5px */
-  --fs-card: 14px; /* card title      · 600          */
-  --fs-body: 13px; /* body / control  · 450          */
-  --fs-sub: 12px; /* secondary       · 500          */
-  --fs-hint: 11.5px; /* hint / meta     · 450          */
-  --fs-label: 10px; /* section label   · 600 · UPPER  */
-}