@prenta/admin 0.92.0 → 0.94.0

package/design-system/tokens.json

@@ -1,72 +1,144 @@
 {
   "$schema": "https://design-tokens.github.io/community-group/format/",
   "name": "PrentaCMS",
-  "version": "1.0.0",
-  "description": "Design tokens for the PrentaCMS admin interface. Two themes: light (default) and dark.",
+  "version": "2.0.0",
+  "description": "Design tokens for the PrentaCMS admin interface. Two themes: light (default) and dark. THIS FILE IS THE SOURCE OF TRUTH — tokens.css, tokens.scss, tokens.tailwind.cjs, and src/styles/prenta-tokens.css are all generated from it by `pnpm --filter @prenta/admin generate`. Never hand-edit a generated file.",
+  "conventions": {
+    "var": "Every token carries the exact CSS custom property it emits. The generator never derives a name — a rename happens here or not at all.",
+    "aliases": "Deprecated custom property names kept alive so existing rules keep resolving. Emitted after the canonical name. Remove only in a major.",
+    "designValue": "Present when the shipped value deliberately differs from the design handoff. The reason belongs in `comment`. This is how a documented deviation stays documented instead of decaying into drift.",
+    "scope": "The handoff bundle (design-system/tokens.css) emits :root. The runtime copy (src/styles/prenta-tokens.css) emits .prenta-admin, because the admin mounts inside consumer applications and custom properties resolve by inheritance rather than specificity — a host :root would otherwise win."
+  },
   "color": {
     "light": {
       "surface": {
-        "bg": { "value": "#F5F4FA", "comment": "App background" },
-        "sb": { "value": "#FFFFFF", "comment": "Sidebar / topbar surface" },
-        "card": { "value": "#FFFFFF", "comment": "Card / panel surface" },
-        "bdr": { "value": "#E8E6F2", "comment": "Hairline border" }
+        "bg": { "value": "#F5F4FA", "var": "--bg", "comment": "App background" },
+        "sb": { "value": "#FFFFFF", "var": "--sb", "comment": "Sidebar / topbar surface" },
+        "card": { "value": "#FFFFFF", "var": "--card", "comment": "Card / panel surface" },
+        "bdr": { "value": "#E8E6F2", "var": "--bdr", "comment": "Hairline border" }
       },
       "text": {
-        "txt": { "value": "#1A1827", "comment": "Primary text" },
-        "sub": { "value": "#6B6878", "comment": "Secondary text" },
-        "muted": { "value": "#B0ADBE", "comment": "Tertiary / placeholder" }
+        "txt": { "value": "#1A1827", "var": "--txt", "comment": "Primary text" },
+        "sub": { "value": "#6B6878", "var": "--sub", "comment": "Secondary text" },
+        "muted": {
+          "value": "#716E83",
+          "designValue": "#B0ADBE",
+          "var": "--muted",
+          "comment": "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."
+        }
       },
       "accent": {
-        "acc": { "value": "#7C3AED", "comment": "Accent / interactive" },
-        "acc-l": { "value": "#EDE9FE", "comment": "Accent tint (hover/active bg)" },
-        "acc-m": { "value": "#C4B5FD", "comment": "Accent mid (focus ring)" }
+        "acc": { "value": "#7C3AED", "var": "--acc", "comment": "Accent / interactive" },
+        "acc-l": {
+          "value": "#EDE9FE",
+          "var": "--acc-l",
+          "comment": "Accent tint (hover/active bg)"
+        },
+        "acc-m": { "value": "#C4B5FD", "var": "--acc-m", "comment": "Accent mid (focus ring)" }
       },
       "semantic": {
-        "suc": { "value": "#059669" },
-        "suc-l": { "value": "#ECFDF5" },
-        "warn": { "value": "#D97706" },
-        "warn-l": { "value": "#FFFBEB" },
-        "err": { "value": "#DC2626" },
-        "err-l": { "value": "#FEF2F2" },
-        "info": { "value": "#0891B2" },
-        "info-l": { "value": "#E0F7FA" }
+        "suc": { "value": "#059669", "var": "--suc" },
+        "suc-l": { "value": "#ECFDF5", "var": "--suc-l" },
+        "warn": { "value": "#D97706", "var": "--warn" },
+        "warn-l": { "value": "#FFFBEB", "var": "--warn-l" },
+        "err": { "value": "#DC2626", "var": "--err" },
+        "err-l": { "value": "#FEF2F2", "var": "--err-l" },
+        "info": { "value": "#0891B2", "var": "--info" },
+        "info-l": { "value": "#E0F7FA", "var": "--info-l" }
+      },
+      "tag": {
+        "comment": "Editorial hues for page / post-type pills. Deliberately separate from the semantic ramp so 'pink' is not warning orange and 'blue' is not info cyan.",
+        "tag-purple": { "value": "#7C3AED", "var": "--tag-purple" },
+        "tag-purple-soft": { "value": "#F3E8FF", "var": "--tag-purple-soft" },
+        "tag-green": { "value": "#0F766E", "var": "--tag-green" },
+        "tag-green-soft": { "value": "#CCFBF1", "var": "--tag-green-soft" },
+        "tag-orange": { "value": "#C2410C", "var": "--tag-orange" },
+        "tag-orange-soft": { "value": "#FFEDD5", "var": "--tag-orange-soft" },
+        "tag-red": { "value": "#BE123C", "var": "--tag-red" },
+        "tag-red-soft": { "value": "#FFE4E6", "var": "--tag-red-soft" },
+        "tag-blue": { "value": "#1D4ED8", "var": "--tag-blue" },
+        "tag-blue-soft": { "value": "#DBEAFE", "var": "--tag-blue-soft" },
+        "tag-pink": { "value": "#DB2777", "var": "--tag-pink" },
+        "tag-pink-soft": { "value": "#FCE7F3", "var": "--tag-pink-soft" },
+        "tag-gray": { "value": "#64748B", "var": "--tag-gray" },
+        "tag-gray-soft": { "value": "#F1F5F9", "var": "--tag-gray-soft" }
       },
       "ai": {
-        "ai1": { "value": "#7C3AED" },
-        "ai2": { "value": "#C026D3" }
+        "ai1": { "value": "#7C3AED", "var": "--ai1" },
+        "ai2": { "value": "#C026D3", "var": "--ai2" },
+        "ai-soft": {
+          "value": "linear-gradient(135deg, rgba(124, 58, 237, 0.09), rgba(192, 38, 211, 0.07))",
+          "var": "--ai-soft"
+        }
+      },
+      "control": {
+        "toggle-thumb": {
+          "value": "#FFFFFF",
+          "var": "--toggle-thumb",
+          "comment": "Switch knob stays white in both themes per the design system; tokenized so a consumer theme can move it."
+        }
       }
     },
     "dark": {
       "surface": {
-        "bg": { "value": "#0D0C18" },
-        "sb": { "value": "#141222" },
-        "card": { "value": "#1C1A2E" },
-        "bdr": { "value": "#2C2A42" }
+        "bg": { "value": "#0D0C18", "var": "--bg" },
+        "sb": { "value": "#141222", "var": "--sb" },
+        "card": { "value": "#1C1A2E", "var": "--card" },
+        "bdr": { "value": "#2C2A42", "var": "--bdr" }
       },
       "text": {
-        "txt": { "value": "#EAE8F5" },
-        "sub": { "value": "#8E8BA8" },
-        "muted": { "value": "#504E68" }
+        "txt": { "value": "#EAE8F5", "var": "--txt" },
+        "sub": { "value": "#8E8BA8", "var": "--sub" },
+        "muted": {
+          "value": "#8784A2",
+          "designValue": "#504E68",
+          "var": "--muted",
+          "comment": "Same AA correction as light mode — the handoff value #504E68 is 2.1:1 on --card."
+        }
       },
       "accent": {
-        "acc": { "value": "#9D71F0" },
-        "acc-l": { "value": "#231950" },
-        "acc-m": { "value": "#5E3EAA" }
+        "acc": { "value": "#9D71F0", "var": "--acc" },
+        "acc-l": { "value": "#231950", "var": "--acc-l" },
+        "acc-m": { "value": "#5E3EAA", "var": "--acc-m" }
       },
       "semantic": {
-        "suc": { "value": "#10B981" },
-        "suc-l": { "value": "#022C22" },
-        "warn": { "value": "#FBBF24" },
-        "warn-l": { "value": "#1A1000" },
-        "err": { "value": "#F87171" },
-        "err-l": { "value": "#200808" },
-        "info": { "value": "#38BDF8" },
-        "info-l": { "value": "#0A2838" }
+        "suc": { "value": "#10B981", "var": "--suc" },
+        "suc-l": { "value": "#022C22", "var": "--suc-l" },
+        "warn": { "value": "#FBBF24", "var": "--warn" },
+        "warn-l": { "value": "#1A1000", "var": "--warn-l" },
+        "err": { "value": "#F87171", "var": "--err" },
+        "err-l": { "value": "#200808", "var": "--err-l" },
+        "info": { "value": "#38BDF8", "var": "--info" },
+        "info-l": { "value": "#0A2838", "var": "--info-l" }
+      },
+      "tag": {
+        "tag-purple": { "value": "#A78BFA", "var": "--tag-purple" },
+        "tag-purple-soft": { "value": "#2E1065", "var": "--tag-purple-soft" },
+        "tag-green": { "value": "#2DD4BF", "var": "--tag-green" },
+        "tag-green-soft": { "value": "#042F2E", "var": "--tag-green-soft" },
+        "tag-orange": { "value": "#FB923C", "var": "--tag-orange" },
+        "tag-orange-soft": { "value": "#431407", "var": "--tag-orange-soft" },
+        "tag-red": { "value": "#FB7185", "var": "--tag-red" },
+        "tag-red-soft": { "value": "#4C0519", "var": "--tag-red-soft" },
+        "tag-blue": { "value": "#60A5FA", "var": "--tag-blue" },
+        "tag-blue-soft": { "value": "#1E3A8A", "var": "--tag-blue-soft" },
+        "tag-pink": { "value": "#F472B6", "var": "--tag-pink" },
+        "tag-pink-soft": { "value": "#500724", "var": "--tag-pink-soft" },
+        "tag-gray": { "value": "#94A3B8", "var": "--tag-gray" },
+        "tag-gray-soft": { "value": "#1E293B", "var": "--tag-gray-soft" }
+      },
+      "ai": {
+        "ai1": { "value": "#7C3AED", "var": "--ai1" },
+        "ai2": { "value": "#C026D3", "var": "--ai2" },
+        "ai-soft": {
+          "value": "linear-gradient(135deg, rgba(157, 113, 240, 0.16), rgba(192, 38, 211, 0.12))",
+          "var": "--ai-soft"
+        }
       }
     }
   },
   "accentOptions": {
-    "comment": "Selectable admin accent colors (Appearance settings). All swap into --acc.",
+    "comment": "Selectable admin accent colors (Appearance settings). All swap into --acc at runtime.",
     "purple": { "value": "#7C3AED" },
     "blue": { "value": "#2563EB" },
     "teal": { "value": "#0D9488" },
@@ -76,35 +148,57 @@
   "font": {
     "family": {
       "sans": {
-        "value": "'DM Sans', system-ui, -apple-system, sans-serif",
-        "comment": "UI text"
+        "value": "'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif",
+        "var": "--font-sans",
+        "comment": "UI text. Self-hosted woff2 under design-system/fonts — never a third-party request, because the admin renders inside consumer applications."
       },
       "mono": {
-        "value": "'DM Mono', ui-monospace, monospace",
-        "comment": "Code, tokens, keys"
+        "value": "'DM Mono', ui-monospace, 'SFMono-Regular', monospace",
+        "var": "--font-mono",
+        "comment": "Code, robots directives, token names"
       }
     },
+    "weight": {
+      "reg": { "value": "450", "var": "--fw-reg" },
+      "med": { "value": "500", "var": "--fw-med" },
+      "semi": { "value": "600", "var": "--fw-semi" },
+      "bold": { "value": "700", "var": "--fw-bold" }
+    },
     "size": {
       "page": {
         "value": "21px",
+        "var": "--fs-page",
         "weight": 700,
         "letterSpacing": "-0.5px",
         "comment": "Page title"
       },
       "card": {
         "value": "14px",
+        "var": "--fs-card",
         "weight": 600,
         "comment": "Card / section title"
       },
       "body": {
         "value": "13px",
+        "var": "--fs-body",
         "weight": 450,
         "comment": "Body, controls, table cells"
       },
-      "sub": { "value": "12px", "weight": 500, "comment": "Secondary / captions" },
-      "hint": { "value": "11.5px", "weight": 450, "comment": "Hints, metadata" },
+      "sub": {
+        "value": "12px",
+        "var": "--fs-sub",
+        "weight": 500,
+        "comment": "Secondary / captions"
+      },
+      "hint": {
+        "value": "11.5px",
+        "var": "--fs-hint",
+        "weight": 450,
+        "comment": "Hints, metadata"
+      },
       "label": {
         "value": "10px",
+        "var": "--fs-label",
         "weight": 600,
         "letterSpacing": "0.8px",
         "textTransform": "uppercase",
@@ -113,37 +207,124 @@
     }
   },
   "dimension": {
-    "sidebarWidth": { "value": "224px" },
-    "sidebarWidthCollapsed": { "value": "60px" },
-    "topbarHeight": { "value": "56px" },
-    "radius": { "value": "10px", "comment": "Base card radius" },
-    "radiusControl": { "value": "8px", "comment": "Buttons, inputs" },
-    "radiusSmall": { "value": "6px", "comment": "Badges, tags" },
-    "radiusPill": { "value": "99px", "comment": "Toggles, progress bars" }
+    "layout": {
+      "sidebarWidth": { "value": "224px", "var": "--sbw" },
+      "sidebarWidthCollapsed": { "value": "60px", "var": "--sbw-col" },
+      "topbarHeight": { "value": "56px", "var": "--tbh" }
+    },
+    "radius": {
+      "comment": "Measured from the shipped UI, not aspirational.",
+      "sm": {
+        "value": "6px",
+        "var": "--r-sm",
+        "comment": "Small buttons, badges, tags, chips-in-rows"
+      },
+      "field": { "value": "7px", "var": "--r-field", "comment": "Text inputs, textareas, selects" },
+      "ctl": {
+        "value": "8px",
+        "var": "--r-ctl",
+        "aliases": ["--r-control"],
+        "comment": "Primary / secondary buttons, dropdowns. --r-control is the pre-2.0 name, kept resolving for existing rules."
+      },
+      "base": { "value": "10px", "var": "--r", "comment": "Cards and panels" },
+      "fig": { "value": "12px", "var": "--r-fig", "comment": "Canvas figures and media frames" },
+      "pill": { "value": "99px", "var": "--r-pill", "comment": "Toggles, meters, notice pills" }
+    },
+    "spacing": {
+      "comment": "Named by px so there is no index-to-value guesswork.",
+      "2": { "value": "2px", "var": "--sp-2" },
+      "4": { "value": "4px", "var": "--sp-4" },
+      "6": { "value": "6px", "var": "--sp-6" },
+      "8": { "value": "8px", "var": "--sp-8" },
+      "10": { "value": "10px", "var": "--sp-10" },
+      "12": { "value": "12px", "var": "--sp-12", "comment": "Row padding-y" },
+      "14": { "value": "14px", "var": "--sp-14", "comment": "Panel padding" },
+      "16": { "value": "16px", "var": "--sp-16", "comment": "Editor header padding-x" },
+      "18": { "value": "18px", "var": "--sp-18", "comment": "Canvas gutter top" },
+      "20": { "value": "20px", "var": "--sp-20" },
+      "24": { "value": "24px", "var": "--sp-24", "comment": "Canvas gutter sides" },
+      "28": { "value": "28px", "var": "--sp-28" },
+      "32": { "value": "32px", "var": "--sp-32" },
+      "40": { "value": "40px", "var": "--sp-40", "comment": "Canvas gutter bottom" }
+    },
+    "control": {
+      "comment": "Primary/secondary buttons (30-31px) and segmented buttons (29px) are padding-derived, not fixed — deliberately not tokenized.",
+      "chip": { "value": "26px", "var": "--h-chip", "comment": "Rail buttons, theme toggle" },
+      "field": { "value": "33px", "var": "--h-field", "comment": "Text inputs and small buttons" },
+      "ctl": {
+        "value": "34px",
+        "var": "--h-ctl",
+        "comment": "Header controls: icon buttons, breakpoint trigger, zoom chip, SEO chip"
+      }
+    },
+    "border": {
+      "hairline": { "value": "1px", "var": "--bw" },
+      "ctl": { "value": "1.5px", "var": "--bw-ctl", "comment": "Input and card border" },
+      "focus": { "value": "2px", "var": "--bw-focus", "comment": "Focus and active outline" },
+      "ring": { "value": "0 0 0 3px var(--acc-m)", "var": "--ring", "comment": "Focus ring shadow" }
+    }
   },
   "elevation": {
     "light": {
       "shd": {
-        "value": "0 1px 2px rgba(0,0,0,.05), 0 1px 4px rgba(0,0,0,.04)",
+        "value": "0 1px 2px rgba(0, 0, 0, 0.05), 0 1px 4px rgba(0, 0, 0, 0.04)",
+        "var": "--shd",
         "comment": "Card resting"
       },
       "shd2": {
-        "value": "0 4px 16px rgba(0,0,0,.1)",
+        "value": "0 4px 16px rgba(0, 0, 0, 0.1)",
+        "var": "--shd2",
         "comment": "Popovers, modals, hover"
       }
     },
     "dark": {
-      "shd": { "value": "0 1px 2px rgba(0,0,0,.3), 0 1px 4px rgba(0,0,0,.2)" },
-      "shd2": { "value": "0 4px 20px rgba(0,0,0,.45)" }
+      "shd": {
+        "value": "0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 4px rgba(0, 0, 0, 0.2)",
+        "var": "--shd"
+      },
+      "shd2": { "value": "0 4px 20px rgba(0, 0, 0, 0.45)", "var": "--shd2" }
     }
   },
   "motion": {
-    "fast": { "value": "0.12s", "comment": "Hover / color transitions" },
-    "base": { "value": "0.18s", "comment": "Toggles, modal-in" },
-    "layout": {
+    "fast": {
+      "value": "0.12s",
+      "var": "--mo-fast",
+      "aliases": ["--motion-fast"],
+      "comment": "Hover, color"
+    },
+    "base": {
+      "value": "0.18s",
+      "var": "--mo-base",
+      "aliases": ["--motion-base"],
+      "comment": "Toggles, reveals"
+    },
+    "slow": {
       "value": "0.22s",
-      "easing": "cubic-bezier(.4,0,.2,1)",
-      "comment": "Sidebar collapse"
+      "var": "--mo-slow",
+      "comment": "Panels, canvas scale"
+    },
+    "ease": { "value": "cubic-bezier(0.4, 0, 0.2, 1)", "var": "--ease" },
+    "layout": {
+      "value": "0.22s cubic-bezier(0.4, 0, 0.2, 1)",
+      "var": "--motion-layout",
+      "deprecated": true,
+      "comment": "Pre-2.0 composite. Use --mo-slow var(--ease) instead."
     }
+  },
+  "layer": {
+    "comment": "The five layers the UI actually uses. Anything outside this set is a bug.",
+    "raise": {
+      "value": "2",
+      "var": "--z-raise",
+      "comment": "Canvas section labels, sticky group headers"
+    },
+    "resizer": { "value": "30", "var": "--z-resizer", "comment": "Panel drag handle" },
+    "overlay": {
+      "value": "45",
+      "var": "--z-overlay",
+      "comment": "In-panel overlays (version history)"
+    },
+    "menu": { "value": "120", "var": "--z-menu", "comment": "Dropdowns, flyouts" },
+    "toast": { "value": "200", "var": "--z-toast" }
   }
 }