@portnet/ui 6.0.0 → 6.0.1

package/dist/esm/v2/theme/cssVariables.js

@@ -0,0 +1,198 @@
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0) { ; } } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i["return"] && (_r = _i["return"](), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+/**
+ * CSS Variables emitter — Portnet UI v2
+ *
+ * Generates a CSS string declaring all tokens as :root variables.
+ * Mount once at app boot via:
+ *
+ *   import { injectCssVariables } from "@portnet/ui/v2/theme";
+ *   injectCssVariables();
+ *
+ * Or render `getCssVariables()` inside a `<style>` tag if SSR'd.
+ *
+ * Brand override (host-level theming):
+ *
+ *   injectCssVariables({
+ *     brand: { accent: "#2962FF" },
+ *     brandSecondary: { secondary: "#4FB8CF" },
+ *   });
+ *   // Or via the unified theme factory (see createPortnetTheme):
+ *   //   createPortnetTheme({ brand: {...}, brandSecondary: {...} })
+ *
+ *   Override is deep-merged onto the default brand / brandSecondary:
+ *   any field you omit falls back to the token default. Use the SAME
+ *   override objects when calling createPortnetTheme so the MUI
+ *   palette and CSS variables stay in sync — both layers consume the
+ *   same resolvers (./_brand, ./_brandSecondary) so mismatches are
+ *   structurally impossible.
+ */
+import { ink, surface, border, semantic, status, dark, fontFamily, fontSize, fontWeight, lineHeight, letterSpacing, spacing, radius, shadows, duration, easing, zIndex, density, layout, breakpoints, state } from "../tokens";
+import { resolveBrand } from "./_brand";
+import { resolveBrandSecondary } from "./_brandSecondary";
+
+/** Options for the CSS-variable emitter / injector. */
+
+var STYLE_TAG_ID = "portnet-ui-v2-tokens";
+
+/**
+ * Spacing partition: numeric grid keys (s1..s10) vs semantic aliases
+ * (xs/sm/md/lg/xl/xxl). Two output namespaces so the alias names
+ * cannot collide with the grid (s-N) and cannot pollute the global
+ * variable namespace by emitting unprefixed --md / --lg / --xl.
+ *
+ * Uses Object.entries at module-load time — pure / no side-effects.
+ */
+var NUMERIC_GRID_RE = /^s\d+$/;
+var SPACING_ENTRIES = Object.entries(spacing);
+var NUMERIC_ENTRIES = SPACING_ENTRIES.filter(function (_ref) {
+  var _ref2 = _slicedToArray(_ref, 1),
+    k = _ref2[0];
+  return NUMERIC_GRID_RE.test(k);
+});
+var ALIAS_ENTRIES = SPACING_ENTRIES.filter(function (_ref3) {
+  var _ref4 = _slicedToArray(_ref3, 1),
+    k = _ref4[0];
+  return !NUMERIC_GRID_RE.test(k);
+});
+
+/**
+ * Emits the canonical :root block + sidebar / density / dark-mode overrides.
+ * Pass a partial `brand` / `brandSecondary` to mirror a host theme override
+ * (use the SAME object you pass to createPortnetTheme so the two layers agree).
+ */
+export function getCssVariables() {
+  var _radius$none;
+  var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  var brand = resolveBrand(options.brand);
+  var brandSecondary = resolveBrandSecondary(options.brandSecondary);
+  var lightVars = ["/* \u2500\u2500 Brand \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */", "--accent: ".concat(brand.accent, ";"), "--accent-hover: ".concat(brand.accentHover, ";"), "--accent-soft: ".concat(brand.accentSoft, ";"), "--accent-fg: ".concat(brand.accentFg, ";"), "", "/* \u2500\u2500 Brand secondary \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */", "--secondary: ".concat(brandSecondary.secondary, ";"), "--secondary-fg: ".concat(brandSecondary.secondaryFg, ";"), "", "/* \u2500\u2500 Ink \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */", "--fg: ".concat(ink.fg, ";"), "--fg-muted: ".concat(ink.fgMuted, ";"), "--fg-subtle: ".concat(ink.fgSubtle, ";"), "--fg-inverse: ".concat(ink.fgInverse, ";"), "", "/* \u2500\u2500 Surface \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */", "--bg: ".concat(surface.bg, ";"), "--bg-elev: ".concat(surface.bgElev, ";"), "--bg-subtle: ".concat(surface.bgSubtle, ";"), "--bg-hover: ".concat(surface.bgHover, ";"), "--surface: ".concat(surface.surface, ";"), "", "/* \u2500\u2500 Border \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */", "--border: ".concat(border.border, ";"), "--border-strong: ".concat(border.borderStrong, ";"), "", "/* \u2500\u2500 Semantic \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */", "/* Each concept has a saturated fill (--<name>) and a darker text */", "/* foreground (--<name>-fg). Pair fills with text on the same surface. */", "--success: ".concat(semantic.success, ";"), "--success-soft: ".concat(semantic.successSoft, ";"), "--success-fg: ".concat(semantic.successFg, ";"), "--warning: ".concat(semantic.warning, ";"), "--warning-soft: ".concat(semantic.warningSoft, ";"), "--warning-fg: ".concat(semantic.warningFg, ";"), "--danger: ".concat(semantic.danger, ";"), "--danger-soft: ".concat(semantic.dangerSoft, ";"), "--danger-fg: ".concat(semantic.dangerFg, ";"), "--info: ".concat(semantic.info, ";"), "--info-soft: ".concat(semantic.infoSoft, ";"), "--info-fg: ".concat(semantic.infoFg, ";"), "", "/* \u2500\u2500 Status palette \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */", "--status-new-soft: ".concat(status["new"].soft, ";"), "--status-new-fg: ".concat(status["new"].fg, ";"), "--status-sent-soft: ".concat(status.sent.soft, ";"), "--status-sent-fg: ".concat(status.sent.fg, ";"), "--status-pending-soft: ".concat(status.pending.soft, ";"), "--status-pending-fg: ".concat(status.pending.fg, ";"), "--status-approved-soft: ".concat(status.approved.soft, ";"), "--status-approved-fg: ".concat(status.approved.fg, ";"), "--status-rejected-soft: ".concat(status.rejected.soft, ";"), "--status-rejected-fg: ".concat(status.rejected.fg, ";"), "--status-neutral-soft: ".concat(status.neutral.soft, ";"), "--status-neutral-fg: ".concat(status.neutral.fg, ";"), "", "/* \u2500\u2500 State overlays (B2 \u2014 currentColor-based) \u2500\u2500\u2500 */", "--state-hover-overlay: ".concat(state.hoverOverlay, ";"), "--state-pressed-overlay: ".concat(state.pressedOverlay, ";"), "--state-selected-overlay: ".concat(state.selectedOverlay, ";"), "", "/* \u2500\u2500 Typography \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */", "--font-sans: ".concat(fontFamily.sans, ";"), "--font-mono: ".concat(fontFamily.mono, ";"), "--text-display: ".concat(fontSize.display, "px;"), "--text-h2: ".concat(fontSize.h2, "px;"), "--text-h3: ".concat(fontSize.h3, "px;"), "--text-h4: ".concat(fontSize.h4, "px;"), "--text-body: ".concat(fontSize.body, "px;"), "--text-sm: ".concat(fontSize.sm, "px;"), "--text-xs: ".concat(fontSize.xs, "px;"), "--fw-regular: ".concat(fontWeight.regular, ";"), "--fw-medium: ".concat(fontWeight.medium, ";"), "--fw-semibold: ".concat(fontWeight.semibold, ";"), "--fw-bold: ".concat(fontWeight.bold, ";"), // NOTE: there is deliberately no heavier weight than bold (700). Batch 1
+  // dropped the black weight from the typography tokens, and this file kept
+  // emitting the matching variable for a while — resolving to the literal
+  // string "undefined" in :root, which silently flattened every consumer that
+  // referenced it. The dev-only check at the end of this function exists
+  // because of that incident.
+  //
+  // The old variable name is deliberately not written out: banned-patterns
+  // scans raw file text with no comment awareness, so naming it here — even to
+  // record its removal — trips the rule that protects this block.
+  "--lh-tight: ".concat(lineHeight.tight, ";"), "--lh-snug: ".concat(lineHeight.snug, ";"), "--lh-normal: ".concat(lineHeight.normal, ";"), "--lh-loose: ".concat(lineHeight.loose, ";"), // A7-02 — letter-spacing scale. Six token names were referenced fleet-wide
+  // that this emitter never emitted, so their var() fallbacks were the only
+  // thing that ever rendered (R-2.3 / R-AI.1 magic values wearing a token's
+  // name). These two had a real platform basis — -0.01em was hardcoded twice
+  // in tokens/typography.ts itself, 0.04em inside KV and ConfirmDialog — so
+  // they are promoted. `--border-subtle`, `--r-xs`, `--icon-sm`, `--icon-xl`
+  // were local inventions and are fixed at their call sites instead.
+  "--ls-tight: ".concat(letterSpacing.tight, ";"), "--ls-normal: ".concat(letterSpacing.normal, ";"), "--ls-wide: ".concat(letterSpacing.wide, ";"), "", "/* \u2500\u2500 Spacing \u2014 numeric grid (8 px base) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */"].concat(_toConsumableArray(NUMERIC_ENTRIES.map(function (_ref5) {
+    var _ref6 = _slicedToArray(_ref5, 2),
+      k = _ref6[0],
+      v = _ref6[1];
+    return "--s-".concat(k.slice(1), ": ").concat(v, "px;");
+  })), ["", "/* \u2500\u2500 Spacing \u2014 semantic aliases \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */"], _toConsumableArray(ALIAS_ENTRIES.map(function (_ref7) {
+    var _ref8 = _slicedToArray(_ref7, 2),
+      k = _ref8[0],
+      v = _ref8[1];
+    return "--space-".concat(k, ": ").concat(v, "px;");
+  })), ["", "/* \u2500\u2500 Radius \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */", "--r-none: ".concat((_radius$none = radius.none) !== null && _radius$none !== void 0 ? _radius$none : 0, "px;"), "--r-sm: ".concat(radius.sm, "px;"), "--r-md: ".concat(radius.md, "px;"), "--r-lg: ".concat(radius.lg, "px;"), "--r-xl: ".concat(radius.xl, "px;"), "--r-full: ".concat(radius.full, "px;"), "", "/* \u2500\u2500 Shadows \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */", "--shadow-xs: ".concat(shadows.xs, ";"), "--shadow-sm: ".concat(shadows.sm, ";"), "--shadow-md: ".concat(shadows.md, ";"), "--shadow-lg: ".concat(shadows.lg, ";"), "--shadow-focus: ".concat(shadows.focus, ";")], _toConsumableArray(shadows.focusFallback ? ["--shadow-focus-fallback: ".concat(shadows.focusFallback, ";")] : []), ["", "/* \u2500\u2500 Motion (temporal vocabulary) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */", "--duration-fast: ".concat(duration.fast, "ms;"), "--duration-base: ".concat(duration.base, "ms;"), "--duration-slow: ".concat(duration.slow, "ms;"), "", "/* \u2500\u2500 Motion (semantic aliases \u2014 B6) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */", // Same numeric values as fast/base/slow; intent-readable at the
+  // call site. transition() helper recognises both vocabularies.
+  "--duration-microinteraction: ".concat(duration.microinteraction, "ms;"), "--duration-state-change: ".concat(duration.stateChange, "ms;"), "--duration-page-transition: ".concat(duration.pageTransition, "ms;"), "", "/* \u2500\u2500 Easing \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */", "--easing-out: ".concat(easing.out, ";"), "--easing-in: ".concat(easing["in"], ";"), "--easing-soft: ".concat(easing.soft, ";"), "", "/* \u2500\u2500 Z-index \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */"], _toConsumableArray(Object.entries(zIndex).map(function (_ref9) {
+    var _ref0 = _slicedToArray(_ref9, 2),
+      k = _ref0[0],
+      v = _ref0[1];
+    return "--z-".concat(k, ": ").concat(v, ";");
+  })), ["", "/* \u2500\u2500 Layout \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */", "--sidebar-w: ".concat(layout.sidebar, "px;"), "--topbar-h: ".concat(layout.topbar, "px;"), "--content-max: ".concat(layout.contentMax, "px;"), "--form-max: ".concat(layout.formMax, "px;"), "--tactile-min: ".concat(layout.tactileMin, "px;"), "", "/* \u2500\u2500 Breakpoints (R-RS.1) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */", // The single breakpoint scale, also wired into the MUI theme and the
+  // mq() string helpers. Media queries can't read var(), so these are
+  // for @container queries, clamp() and JS (getComputedStyle) — they
+  // exist so no consumer hardcodes a raw px breakpoint anywhere.
+  "--bp-xs: ".concat(breakpoints.xs, "px;"), "--bp-sm: ".concat(breakpoints.sm, "px;"), "--bp-md: ".concat(breakpoints.md, "px;"), "--bp-lg: ".concat(breakpoints.lg, "px;"), "--bp-xl: ".concat(breakpoints.xl, "px;"), "", "/* \u2500\u2500 Density (default = comfortable) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */", "--row-h: ".concat(density.comfortable.row, "px;"), "--input-h: ".concat(density.comfortable.input, "px;"), "--btn-h: ".concat(density.comfortable.btn, "px;"), "--text-fs: ".concat(density.comfortable.fontSize, "px;")]);
+  var collapsedSidebar = "[data-nav-collapsed=\"true\"] { --sidebar-w: ".concat(layout.sidebarMin, "px; }");
+
+  /* Density tier overrides — emitted in order of granularity so a
+   * cascading selector like `[data-density][data-density="compact"]`
+   * (host-side specificity hack) resolves predictably. */
+  var spaciousDensity = ["[data-density=\"spacious\"] {", "  --row-h: ".concat(density.spacious.row, "px;"), "  --input-h: ".concat(density.spacious.input, "px;"), "  --btn-h: ".concat(density.spacious.btn, "px;"), "  --text-fs: ".concat(density.spacious.fontSize, "px;"), "}"].join("\n");
+  var compactDensity = ["[data-density=\"compact\"] {", "  --row-h: ".concat(density.compact.row, "px;"), "  --input-h: ".concat(density.compact.input, "px;"), "  --btn-h: ".concat(density.compact.btn, "px;"), "  --text-fs: ".concat(density.compact.fontSize, "px;"), "}"].join("\n");
+  var ultraCompactDensity = ["[data-density=\"ultra-compact\"] {", "  --row-h: ".concat(density.ultraCompact.row, "px;"), "  --input-h: ".concat(density.ultraCompact.input, "px;"), "  --btn-h: ".concat(density.ultraCompact.btn, "px;"), "  --text-fs: ".concat(density.ultraCompact.fontSize, "px;"), "}"].join("\n");
+
+  /* ── Dark mode overrides ────────────────────────────────────
+   * Soft variants (semantic + status) are DERIVED via color-mix
+   * from the saturated colour or the dark-mode status FG. The
+   * static light-mode soft hex codes are too pale on dark
+   * surfaces and fail WCAG 1.4.11 non-text contrast.
+   * The 22-24% mix produces a tinted overlay that adapts to host
+   * brand overrides automatically.
+   * ───────────────────────────────────────────────────────── */
+  var darkVars = ["[data-theme=\"dark\"] {", "  --bg: ".concat(dark.bg, ";"), "  --bg-elev: ".concat(dark.bgElev, ";"), "  --bg-subtle: ".concat(dark.bgSubtle, ";"), "  --bg-hover: ".concat(dark.bgHover, ";"), "  --surface: ".concat(dark.surface, ";"), "  --border: ".concat(dark.border, ";"), "  --border-strong: ".concat(dark.borderStrong, ";"), "  --fg: ".concat(dark.fg, ";"), "  --fg-muted: ".concat(dark.fgMuted, ";"), "  --fg-subtle: ".concat(dark.fgSubtle, ";"), "  --fg-inverse: ".concat(dark.fgInverse, ";"), "  --accent-soft: ".concat(dark.accentSoft, ";"), "", "  /* Soft semantic fills \u2014 derived from the saturated colour */", "  --success-soft: color-mix(in srgb, var(--success) 24%, transparent);", "  --warning-soft: color-mix(in srgb, var(--warning) 24%, transparent);", "  --danger-soft:  color-mix(in srgb, var(--danger)  24%, transparent);", "  --info-soft:    color-mix(in srgb, var(--info)    24%, transparent);", "", "  /* Status FG \u2014 overridden for dark-mode visibility */", "  --status-new-fg: ".concat(dark.status["new"].fg, ";"), "  --status-sent-fg: ".concat(dark.status.sent.fg, ";"), "  --status-pending-fg: ".concat(dark.status.pending.fg, ";"), "  --status-approved-fg: ".concat(dark.status.approved.fg, ";"), "  --status-rejected-fg: ".concat(dark.status.rejected.fg, ";"), "  --status-neutral-fg: ".concat(dark.status.neutral.fg, ";"), "", "  /* Status soft \u2014 derived from the dark-mode FG */", "  --status-new-soft:      color-mix(in srgb, var(--status-new-fg)      22%, transparent);", "  --status-sent-soft:     color-mix(in srgb, var(--status-sent-fg)     22%, transparent);", "  --status-pending-soft:  color-mix(in srgb, var(--status-pending-fg)  22%, transparent);", "  --status-approved-soft: color-mix(in srgb, var(--status-approved-fg) 22%, transparent);", "  --status-rejected-soft: color-mix(in srgb, var(--status-rejected-fg) 22%, transparent);", "  --status-neutral-soft:  color-mix(in srgb, var(--status-neutral-fg)  22%, transparent);", "}"].join("\n");
+
+  /* Dev-only validation — catches the regression class that motivated it: a
+   * token removed from ../tokens while this emitter still references it, which
+   * puts the literal "undefined" into :root instead of failing loudly. See the
+   * note beside --fw-bold above. */
+  if (typeof console !== "undefined") {
+    var offenders = lightVars.filter(function (l) {
+      return /:\s*undefined\b/.test(l);
+    });
+    if (offenders.length) {
+      // eslint-disable-next-line no-console
+      console.warn("[@portnet/ui v2] cssVariables emitted undefined values — check token imports:", offenders);
+    }
+  }
+  return [":root {"].concat(_toConsumableArray(lightVars.map(function (line) {
+    return line ? "  ".concat(line) : "";
+  })), ["}", "", collapsedSidebar, "", spaciousDensity, "", compactDensity, "", ultraCompactDensity, "", darkVars]).join("\n");
+}
+
+/**
+ * Inject the variables into <head> at runtime.
+ * Idempotent: replaces a previous tag if present.
+ *
+ * Backward-compatible signatures:
+ *   injectCssVariables();                                   // default id, no override
+ *   injectCssVariables("my-style-id");                      // legacy string id
+ *   injectCssVariables({ id, brand, brandSecondary });      // options form
+ */
+export function injectCssVariables(arg) {
+  if (typeof document === "undefined") return;
+  var opts = typeof arg === "string" ? {
+    id: arg
+  } : arg || {};
+  var id = opts.id || STYLE_TAG_ID;
+  var tag = document.getElementById(id);
+  if (!tag) {
+    tag = document.createElement("style");
+    tag.id = id;
+    document.head.appendChild(tag);
+  }
+  tag.textContent = getCssVariables(opts);
+}
+
+/**
+ * Remove the injected style tag. Symmetrical with
+ * injectCssVariables — needed for theme switching, hot-reload
+ * and test cleanup. No-op when the tag is absent or in SSR.
+ *
+ *   removeCssVariables();              // default id
+ *   removeCssVariables("my-style-id"); // legacy string id
+ *   removeCssVariables({ id });        // options form
+ */
+export function removeCssVariables(arg) {
+  if (typeof document === "undefined") return;
+  var id = typeof arg === "string" ? arg : arg && arg.id || STYLE_TAG_ID;
+  var tag = document.getElementById(id);
+  if (tag) tag.remove();
+}
+var cssVariablesApi = {
+  getCssVariables: getCssVariables,
+  injectCssVariables: injectCssVariables,
+  removeCssVariables: removeCssVariables
+};
+export default cssVariablesApi;
+//# sourceMappingURL=cssVariables.js.map

package/dist/esm/v2/theme/cssVariables.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cssVariables.js","names":["ink","surface","border","semantic","status","dark","fontFamily","fontSize","fontWeight","lineHeight","letterSpacing","spacing","radius","shadows","duration","easing","zIndex","density","layout","breakpoints","state","resolveBrand","resolveBrandSecondary","STYLE_TAG_ID","NUMERIC_GRID_RE","SPACING_ENTRIES","Object","entries","NUMERIC_ENTRIES","filter","_ref","_ref2","_slicedToArray","k","test","ALIAS_ENTRIES","_ref3","_ref4","getCssVariables","_radius$none","options","arguments","length","undefined","brand","brandSecondary","lightVars","concat","accent","accentHover","accentSoft","accentFg","secondary","secondaryFg","fg","fgMuted","fgSubtle","fgInverse","bg","bgElev","bgSubtle","bgHover","borderStrong","success","successSoft","successFg","warning","warningSoft","warningFg","danger","dangerSoft","dangerFg","info","infoSoft","infoFg","soft","sent","pending","approved","rejected","neutral","hoverOverlay","pressedOverlay","selectedOverlay","sans","mono","display","h2","h3","h4","body","sm","xs","regular","medium","semibold","bold","tight","snug","normal","loose","wide","_toConsumableArray","map","_ref5","_ref6","v","slice","_ref7","_ref8","none","md","lg","xl","full","focus","focusFallback","fast","base","slow","microinteraction","stateChange","pageTransition","out","_ref9","_ref0","sidebar","topbar","contentMax","formMax","tactileMin","comfortable","row","input","btn","collapsedSidebar","sidebarMin","spaciousDensity","spacious","join","compactDensity","compact","ultraCompactDensity","ultraCompact","darkVars","console","offenders","l","warn","line","injectCssVariables","arg","document","opts","id","tag","getElementById","createElement","head","appendChild","textContent","removeCssVariables","remove","cssVariablesApi"],"sources":["../../../../src/lib/v2/theme/cssVariables.ts"],"sourcesContent":["/**\r\n * CSS Variables emitter — Portnet UI v2\r\n *\r\n * Generates a CSS string declaring all tokens as :root variables.\r\n * Mount once at app boot via:\r\n *\r\n *   import { injectCssVariables } from \"@portnet/ui/v2/theme\";\r\n *   injectCssVariables();\r\n *\r\n * Or render `getCssVariables()` inside a `<style>` tag if SSR'd.\r\n *\r\n * Brand override (host-level theming):\r\n *\r\n *   injectCssVariables({\r\n *     brand: { accent: \"#2962FF\" },\r\n *     brandSecondary: { secondary: \"#4FB8CF\" },\r\n *   });\r\n *   // Or via the unified theme factory (see createPortnetTheme):\r\n *   //   createPortnetTheme({ brand: {...}, brandSecondary: {...} })\r\n *\r\n *   Override is deep-merged onto the default brand / brandSecondary:\r\n *   any field you omit falls back to the token default. Use the SAME\r\n *   override objects when calling createPortnetTheme so the MUI\r\n *   palette and CSS variables stay in sync — both layers consume the\r\n *   same resolvers (./_brand, ./_brandSecondary) so mismatches are\r\n *   structurally impossible.\r\n */\r\nimport {\r\n  ink, surface, border, semantic, status, dark,\r\n  fontFamily, fontSize, fontWeight, lineHeight, letterSpacing,\r\n  spacing, radius, shadows, duration, easing, zIndex,\r\n  density, layout, breakpoints,\r\n  state,\r\n} from \"../tokens\";\r\nimport { resolveBrand, type BrandTokens } from \"./_brand\";\r\nimport { resolveBrandSecondary, type BrandSecondaryTokens } from \"./_brandSecondary\";\r\n\r\n/** Options for the CSS-variable emitter / injector. */\r\ntype CssVariablesOptions = {\r\n  id?: string;\r\n  brand?: Partial<BrandTokens>;\r\n  brandSecondary?: Partial<BrandSecondaryTokens>;\r\n};\r\n\r\nconst STYLE_TAG_ID = \"portnet-ui-v2-tokens\";\r\n\r\n/**\r\n * Spacing partition: numeric grid keys (s1..s10) vs semantic aliases\r\n * (xs/sm/md/lg/xl/xxl). Two output namespaces so the alias names\r\n * cannot collide with the grid (s-N) and cannot pollute the global\r\n * variable namespace by emitting unprefixed --md / --lg / --xl.\r\n *\r\n * Uses Object.entries at module-load time — pure / no side-effects.\r\n */\r\nconst NUMERIC_GRID_RE = /^s\\d+$/;\r\nconst SPACING_ENTRIES = Object.entries(spacing);\r\nconst NUMERIC_ENTRIES = SPACING_ENTRIES.filter(([k]) => NUMERIC_GRID_RE.test(k));\r\nconst ALIAS_ENTRIES   = SPACING_ENTRIES.filter(([k]) => !NUMERIC_GRID_RE.test(k));\r\n\r\n/**\r\n * Emits the canonical :root block + sidebar / density / dark-mode overrides.\r\n * Pass a partial `brand` / `brandSecondary` to mirror a host theme override\r\n * (use the SAME object you pass to createPortnetTheme so the two layers agree).\r\n */\r\nexport function getCssVariables(options: CssVariablesOptions = {}): string {\r\n  const brand          = resolveBrand(options.brand);\r\n  const brandSecondary = resolveBrandSecondary(options.brandSecondary);\r\n\r\n  const lightVars = [\r\n    `/* ── Brand ─────────────────────────────────────── */`,\r\n    `--accent: ${brand.accent};`,\r\n    `--accent-hover: ${brand.accentHover};`,\r\n    `--accent-soft: ${brand.accentSoft};`,\r\n    `--accent-fg: ${brand.accentFg};`,\r\n    ``,\r\n    `/* ── Brand secondary ───────────────────────────── */`,\r\n    `--secondary: ${brandSecondary.secondary};`,\r\n    `--secondary-fg: ${brandSecondary.secondaryFg};`,\r\n    ``,\r\n    `/* ── Ink ───────────────────────────────────────── */`,\r\n    `--fg: ${ink.fg};`,\r\n    `--fg-muted: ${ink.fgMuted};`,\r\n    `--fg-subtle: ${ink.fgSubtle};`,\r\n    `--fg-inverse: ${ink.fgInverse};`,\r\n    ``,\r\n    `/* ── Surface ───────────────────────────────────── */`,\r\n    `--bg: ${surface.bg};`,\r\n    `--bg-elev: ${surface.bgElev};`,\r\n    `--bg-subtle: ${surface.bgSubtle};`,\r\n    `--bg-hover: ${surface.bgHover};`,\r\n    `--surface: ${surface.surface};`,\r\n    ``,\r\n    `/* ── Border ────────────────────────────────────── */`,\r\n    `--border: ${border.border};`,\r\n    `--border-strong: ${border.borderStrong};`,\r\n    ``,\r\n    `/* ── Semantic ──────────────────────────────────── */`,\r\n    `/* Each concept has a saturated fill (--<name>) and a darker text */`,\r\n    `/* foreground (--<name>-fg). Pair fills with text on the same surface. */`,\r\n    `--success: ${semantic.success};`,\r\n    `--success-soft: ${semantic.successSoft};`,\r\n    `--success-fg: ${semantic.successFg};`,\r\n    `--warning: ${semantic.warning};`,\r\n    `--warning-soft: ${semantic.warningSoft};`,\r\n    `--warning-fg: ${semantic.warningFg};`,\r\n    `--danger: ${semantic.danger};`,\r\n    `--danger-soft: ${semantic.dangerSoft};`,\r\n    `--danger-fg: ${semantic.dangerFg};`,\r\n    `--info: ${semantic.info};`,\r\n    `--info-soft: ${semantic.infoSoft};`,\r\n    `--info-fg: ${semantic.infoFg};`,\r\n    ``,\r\n    `/* ── Status palette ────────────────────────────── */`,\r\n    `--status-new-soft: ${status.new.soft};`,\r\n    `--status-new-fg: ${status.new.fg};`,\r\n    `--status-sent-soft: ${status.sent.soft};`,\r\n    `--status-sent-fg: ${status.sent.fg};`,\r\n    `--status-pending-soft: ${status.pending.soft};`,\r\n    `--status-pending-fg: ${status.pending.fg};`,\r\n    `--status-approved-soft: ${status.approved.soft};`,\r\n    `--status-approved-fg: ${status.approved.fg};`,\r\n    `--status-rejected-soft: ${status.rejected.soft};`,\r\n    `--status-rejected-fg: ${status.rejected.fg};`,\r\n    `--status-neutral-soft: ${status.neutral.soft};`,\r\n    `--status-neutral-fg: ${status.neutral.fg};`,\r\n    ``,\r\n    `/* ── State overlays (B2 — currentColor-based) ─── */`,\r\n    `--state-hover-overlay: ${state.hoverOverlay};`,\r\n    `--state-pressed-overlay: ${state.pressedOverlay};`,\r\n    `--state-selected-overlay: ${state.selectedOverlay};`,\r\n    ``,\r\n    `/* ── Typography ────────────────────────────────── */`,\r\n    `--font-sans: ${fontFamily.sans};`,\r\n    `--font-mono: ${fontFamily.mono};`,\r\n    `--text-display: ${fontSize.display}px;`,\r\n    `--text-h2: ${fontSize.h2}px;`,\r\n    `--text-h3: ${fontSize.h3}px;`,\r\n    `--text-h4: ${fontSize.h4}px;`,\r\n    `--text-body: ${fontSize.body}px;`,\r\n    `--text-sm: ${fontSize.sm}px;`,\r\n    `--text-xs: ${fontSize.xs}px;`,\r\n    `--fw-regular: ${fontWeight.regular};`,\r\n    `--fw-medium: ${fontWeight.medium};`,\r\n    `--fw-semibold: ${fontWeight.semibold};`,\r\n    `--fw-bold: ${fontWeight.bold};`,\r\n    // NOTE: there is deliberately no heavier weight than bold (700). Batch 1\r\n    // dropped the black weight from the typography tokens, and this file kept\r\n    // emitting the matching variable for a while — resolving to the literal\r\n    // string \"undefined\" in :root, which silently flattened every consumer that\r\n    // referenced it. The dev-only check at the end of this function exists\r\n    // because of that incident.\r\n    //\r\n    // The old variable name is deliberately not written out: banned-patterns\r\n    // scans raw file text with no comment awareness, so naming it here — even to\r\n    // record its removal — trips the rule that protects this block.\r\n    `--lh-tight: ${lineHeight.tight};`,\r\n    `--lh-snug: ${lineHeight.snug};`,\r\n    `--lh-normal: ${lineHeight.normal};`,\r\n    `--lh-loose: ${lineHeight.loose};`,\r\n    // A7-02 — letter-spacing scale. Six token names were referenced fleet-wide\r\n    // that this emitter never emitted, so their var() fallbacks were the only\r\n    // thing that ever rendered (R-2.3 / R-AI.1 magic values wearing a token's\r\n    // name). These two had a real platform basis — -0.01em was hardcoded twice\r\n    // in tokens/typography.ts itself, 0.04em inside KV and ConfirmDialog — so\r\n    // they are promoted. `--border-subtle`, `--r-xs`, `--icon-sm`, `--icon-xl`\r\n    // were local inventions and are fixed at their call sites instead.\r\n    `--ls-tight: ${letterSpacing.tight};`,\r\n    `--ls-normal: ${letterSpacing.normal};`,\r\n    `--ls-wide: ${letterSpacing.wide};`,\r\n    ``,\r\n    `/* ── Spacing — numeric grid (8 px base) ─────────── */`,\r\n    // s1..s10 → --s-1 .. --s-10 (preserves all existing consumers).\r\n    ...NUMERIC_ENTRIES.map(([k, v]) => `--s-${k.slice(1)}: ${v}px;`),\r\n    ``,\r\n    `/* ── Spacing — semantic aliases ────────────────── */`,\r\n    // xs/sm/md/lg/xl/xxl → --space-xs .. --space-xxl. The \"space-\"\r\n    // prefix is mandatory: emitting them as raw --xs/--md/--lg\r\n    // would pollute the global CSS variable namespace.\r\n    ...ALIAS_ENTRIES.map(([k, v]) => `--space-${k}: ${v}px;`),\r\n    ``,\r\n    `/* ── Radius ────────────────────────────────────── */`,\r\n    `--r-none: ${radius.none ?? 0}px;`,\r\n    `--r-sm: ${radius.sm}px;`,\r\n    `--r-md: ${radius.md}px;`,\r\n    `--r-lg: ${radius.lg}px;`,\r\n    `--r-xl: ${radius.xl}px;`,\r\n    `--r-full: ${radius.full}px;`,\r\n    ``,\r\n    `/* ── Shadows ───────────────────────────────────── */`,\r\n    `--shadow-xs: ${shadows.xs};`,\r\n    `--shadow-sm: ${shadows.sm};`,\r\n    `--shadow-md: ${shadows.md};`,\r\n    `--shadow-lg: ${shadows.lg};`,\r\n    `--shadow-focus: ${shadows.focus};`,\r\n    // Static rgba fallback for non-CSS-vars contexts (SSR strings,\r\n    // raw inline `style={{ boxShadow: ... }}` props that bypass CSS).\r\n    ...(shadows.focusFallback\r\n      ? [`--shadow-focus-fallback: ${shadows.focusFallback};`]\r\n      : []),\r\n    ``,\r\n    `/* ── Motion (temporal vocabulary) ──────────────── */`,\r\n    `--duration-fast: ${duration.fast}ms;`,\r\n    `--duration-base: ${duration.base}ms;`,\r\n    `--duration-slow: ${duration.slow}ms;`,\r\n    ``,\r\n    `/* ── Motion (semantic aliases — B6) ────────────── */`,\r\n    // Same numeric values as fast/base/slow; intent-readable at the\r\n    // call site. transition() helper recognises both vocabularies.\r\n    `--duration-microinteraction: ${duration.microinteraction}ms;`,\r\n    `--duration-state-change: ${duration.stateChange}ms;`,\r\n    `--duration-page-transition: ${duration.pageTransition}ms;`,\r\n    ``,\r\n    `/* ── Easing ────────────────────────────────────── */`,\r\n    `--easing-out: ${easing.out};`,\r\n    `--easing-in: ${easing.in};`,\r\n    `--easing-soft: ${easing.soft};`,\r\n    ``,\r\n    `/* ── Z-index ───────────────────────────────────── */`,\r\n    // Iterates the full zIndex object — picks up popover/snackbar/\r\n    // tooltip slots added in Batch 1 and skipLink (Batch 11 / B3)\r\n    // without code changes here.\r\n    ...Object.entries(zIndex).map(([k, v]) => `--z-${k}: ${v};`),\r\n    ``,\r\n    `/* ── Layout ────────────────────────────────────── */`,\r\n    `--sidebar-w: ${layout.sidebar}px;`,\r\n    `--topbar-h: ${layout.topbar}px;`,\r\n    `--content-max: ${layout.contentMax}px;`,\r\n    `--form-max: ${layout.formMax}px;`,\r\n    `--tactile-min: ${layout.tactileMin}px;`,\r\n    ``,\r\n    `/* ── Breakpoints (R-RS.1) ──────────────────────── */`,\r\n    // The single breakpoint scale, also wired into the MUI theme and the\r\n    // mq() string helpers. Media queries can't read var(), so these are\r\n    // for @container queries, clamp() and JS (getComputedStyle) — they\r\n    // exist so no consumer hardcodes a raw px breakpoint anywhere.\r\n    `--bp-xs: ${breakpoints.xs}px;`,\r\n    `--bp-sm: ${breakpoints.sm}px;`,\r\n    `--bp-md: ${breakpoints.md}px;`,\r\n    `--bp-lg: ${breakpoints.lg}px;`,\r\n    `--bp-xl: ${breakpoints.xl}px;`,\r\n    ``,\r\n    `/* ── Density (default = comfortable) ───────────── */`,\r\n    `--row-h: ${density.comfortable.row}px;`,\r\n    `--input-h: ${density.comfortable.input}px;`,\r\n    `--btn-h: ${density.comfortable.btn}px;`,\r\n    `--text-fs: ${density.comfortable.fontSize}px;`,\r\n  ];\r\n\r\n  const collapsedSidebar = `[data-nav-collapsed=\"true\"] { --sidebar-w: ${layout.sidebarMin}px; }`;\r\n\r\n  /* Density tier overrides — emitted in order of granularity so a\r\n   * cascading selector like `[data-density][data-density=\"compact\"]`\r\n   * (host-side specificity hack) resolves predictably. */\r\n  const spaciousDensity = [\r\n    `[data-density=\"spacious\"] {`,\r\n    `  --row-h: ${density.spacious.row}px;`,\r\n    `  --input-h: ${density.spacious.input}px;`,\r\n    `  --btn-h: ${density.spacious.btn}px;`,\r\n    `  --text-fs: ${density.spacious.fontSize}px;`,\r\n    `}`,\r\n  ].join(\"\\n\");\r\n\r\n  const compactDensity = [\r\n    `[data-density=\"compact\"] {`,\r\n    `  --row-h: ${density.compact.row}px;`,\r\n    `  --input-h: ${density.compact.input}px;`,\r\n    `  --btn-h: ${density.compact.btn}px;`,\r\n    `  --text-fs: ${density.compact.fontSize}px;`,\r\n    `}`,\r\n  ].join(\"\\n\");\r\n\r\n  const ultraCompactDensity = [\r\n    `[data-density=\"ultra-compact\"] {`,\r\n    `  --row-h: ${density.ultraCompact.row}px;`,\r\n    `  --input-h: ${density.ultraCompact.input}px;`,\r\n    `  --btn-h: ${density.ultraCompact.btn}px;`,\r\n    `  --text-fs: ${density.ultraCompact.fontSize}px;`,\r\n    `}`,\r\n  ].join(\"\\n\");\r\n\r\n  /* ── Dark mode overrides ────────────────────────────────────\r\n   * Soft variants (semantic + status) are DERIVED via color-mix\r\n   * from the saturated colour or the dark-mode status FG. The\r\n   * static light-mode soft hex codes are too pale on dark\r\n   * surfaces and fail WCAG 1.4.11 non-text contrast.\r\n   * The 22-24% mix produces a tinted overlay that adapts to host\r\n   * brand overrides automatically.\r\n   * ───────────────────────────────────────────────────────── */\r\n  const darkVars = [\r\n    `[data-theme=\"dark\"] {`,\r\n    `  --bg: ${dark.bg};`,\r\n    `  --bg-elev: ${dark.bgElev};`,\r\n    `  --bg-subtle: ${dark.bgSubtle};`,\r\n    `  --bg-hover: ${dark.bgHover};`,\r\n    `  --surface: ${dark.surface};`,\r\n    `  --border: ${dark.border};`,\r\n    `  --border-strong: ${dark.borderStrong};`,\r\n    `  --fg: ${dark.fg};`,\r\n    `  --fg-muted: ${dark.fgMuted};`,\r\n    `  --fg-subtle: ${dark.fgSubtle};`,\r\n    `  --fg-inverse: ${dark.fgInverse};`,\r\n    `  --accent-soft: ${dark.accentSoft};`,\r\n    ``,\r\n    `  /* Soft semantic fills — derived from the saturated colour */`,\r\n    `  --success-soft: color-mix(in srgb, var(--success) 24%, transparent);`,\r\n    `  --warning-soft: color-mix(in srgb, var(--warning) 24%, transparent);`,\r\n    `  --danger-soft:  color-mix(in srgb, var(--danger)  24%, transparent);`,\r\n    `  --info-soft:    color-mix(in srgb, var(--info)    24%, transparent);`,\r\n    ``,\r\n    `  /* Status FG — overridden for dark-mode visibility */`,\r\n    `  --status-new-fg: ${dark.status.new.fg};`,\r\n    `  --status-sent-fg: ${dark.status.sent.fg};`,\r\n    `  --status-pending-fg: ${dark.status.pending.fg};`,\r\n    `  --status-approved-fg: ${dark.status.approved.fg};`,\r\n    `  --status-rejected-fg: ${dark.status.rejected.fg};`,\r\n    `  --status-neutral-fg: ${dark.status.neutral.fg};`,\r\n    ``,\r\n    `  /* Status soft — derived from the dark-mode FG */`,\r\n    `  --status-new-soft:      color-mix(in srgb, var(--status-new-fg)      22%, transparent);`,\r\n    `  --status-sent-soft:     color-mix(in srgb, var(--status-sent-fg)     22%, transparent);`,\r\n    `  --status-pending-soft:  color-mix(in srgb, var(--status-pending-fg)  22%, transparent);`,\r\n    `  --status-approved-soft: color-mix(in srgb, var(--status-approved-fg) 22%, transparent);`,\r\n    `  --status-rejected-soft: color-mix(in srgb, var(--status-rejected-fg) 22%, transparent);`,\r\n    `  --status-neutral-soft:  color-mix(in srgb, var(--status-neutral-fg)  22%, transparent);`,\r\n    `}`,\r\n  ].join(\"\\n\");\r\n\r\n  /* Dev-only validation — catches the regression class that motivated it: a\r\n   * token removed from ../tokens while this emitter still references it, which\r\n   * puts the literal \"undefined\" into :root instead of failing loudly. See the\r\n   * note beside --fw-bold above. */\r\n  if (typeof console !== \"undefined\") {\r\n    const offenders = lightVars.filter((l) => /:\\s*undefined\\b/.test(l));\r\n    if (offenders.length) {\r\n      // eslint-disable-next-line no-console\r\n      console.warn(\r\n        \"[@portnet/ui v2] cssVariables emitted undefined values — check token imports:\",\r\n        offenders,\r\n      );\r\n    }\r\n  }\r\n\r\n  return [\r\n    `:root {`,\r\n    ...lightVars.map((line) => (line ? `  ${line}` : \"\")),\r\n    `}`,\r\n    ``,\r\n    collapsedSidebar,\r\n    ``,\r\n    spaciousDensity,\r\n    ``,\r\n    compactDensity,\r\n    ``,\r\n    ultraCompactDensity,\r\n    ``,\r\n    darkVars,\r\n  ].join(\"\\n\");\r\n}\r\n\r\n/**\r\n * Inject the variables into <head> at runtime.\r\n * Idempotent: replaces a previous tag if present.\r\n *\r\n * Backward-compatible signatures:\r\n *   injectCssVariables();                                   // default id, no override\r\n *   injectCssVariables(\"my-style-id\");                      // legacy string id\r\n *   injectCssVariables({ id, brand, brandSecondary });      // options form\r\n */\r\nexport function injectCssVariables(arg?: string | CssVariablesOptions): void {\r\n  if (typeof document === \"undefined\") return;\r\n  const opts: CssVariablesOptions = typeof arg === \"string\" ? { id: arg } : (arg || {});\r\n  const id = opts.id || STYLE_TAG_ID;\r\n\r\n  let tag = document.getElementById(id);\r\n  if (!tag) {\r\n    tag = document.createElement(\"style\");\r\n    tag.id = id;\r\n    document.head.appendChild(tag);\r\n  }\r\n  tag.textContent = getCssVariables(opts);\r\n}\r\n\r\n/**\r\n * Remove the injected style tag. Symmetrical with\r\n * injectCssVariables — needed for theme switching, hot-reload\r\n * and test cleanup. No-op when the tag is absent or in SSR.\r\n *\r\n *   removeCssVariables();              // default id\r\n *   removeCssVariables(\"my-style-id\"); // legacy string id\r\n *   removeCssVariables({ id });        // options form\r\n */\r\nexport function removeCssVariables(arg?: string | CssVariablesOptions): void {\r\n  if (typeof document === \"undefined\") return;\r\n  const id = typeof arg === \"string\"\r\n    ? arg\r\n    : ((arg && arg.id) || STYLE_TAG_ID);\r\n  const tag = document.getElementById(id);\r\n  if (tag) tag.remove();\r\n}\r\n\r\nconst cssVariablesApi = { getCssVariables, injectCssVariables, removeCssVariables };\r\nexport default cssVariablesApi;\r\n"],"mappings":"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","ignoreList":[]}

package/dist/esm/v2/theme/index.js

@@ -0,0 +1,32 @@
+import createPortnetTheme from "./createPortnetTheme";
+import { getCssVariables, injectCssVariables, removeCssVariables } from "./cssVariables";
+export { default as createPortnetTheme } from "./createPortnetTheme";
+export { getCssVariables, injectCssVariables, removeCssVariables } from "./cssVariables";
+
+/**
+ * Public typed contract of the theme factory.
+ *
+ * Every host module wraps `createPortnetTheme` in a local `build<Module>Theme`
+ * helper (see the GU modules' `utils/appearance`), and those wrappers need to
+ * declare their own option surface without redefining it. Before this export
+ * the options type was module-private, which forced consumers into either
+ * `brand?: object` or an `as Parameters<typeof createPortnetTheme>[0]`
+ * assertion — both of which the Platform TypeScript Guidelines forbid
+ * ("Never use object", "Avoid unsafe assertions").
+ *
+ * `BrandTokens` / `BrandSecondaryTokens` are surfaced for the same reason: a
+ * host that receives a partial brand payload from the shell (themeReceived)
+ * must be able to type that payload against the shared token group instead of
+ * inventing a local twin.
+ *
+ * Additive, non-breaking: type-only re-exports, no runtime change.
+ */
+
+var themeApi = {
+  createPortnetTheme: createPortnetTheme,
+  getCssVariables: getCssVariables,
+  injectCssVariables: injectCssVariables,
+  removeCssVariables: removeCssVariables
+};
+export default themeApi;
+//# sourceMappingURL=index.js.map

package/dist/esm/v2/theme/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["createPortnetTheme","getCssVariables","injectCssVariables","removeCssVariables","default","themeApi"],"sources":["../../../../src/lib/v2/theme/index.ts"],"sourcesContent":["import createPortnetTheme from \"./createPortnetTheme\";\r\nimport {\r\n  getCssVariables,\r\n  injectCssVariables,\r\n  removeCssVariables,\r\n} from \"./cssVariables\";\r\n\r\nexport { default as createPortnetTheme } from \"./createPortnetTheme\";\r\nexport {\r\n  getCssVariables,\r\n  injectCssVariables,\r\n  removeCssVariables,\r\n} from \"./cssVariables\";\r\n\r\n/**\r\n * Public typed contract of the theme factory.\r\n *\r\n * Every host module wraps `createPortnetTheme` in a local `build<Module>Theme`\r\n * helper (see the GU modules' `utils/appearance`), and those wrappers need to\r\n * declare their own option surface without redefining it. Before this export\r\n * the options type was module-private, which forced consumers into either\r\n * `brand?: object` or an `as Parameters<typeof createPortnetTheme>[0]`\r\n * assertion — both of which the Platform TypeScript Guidelines forbid\r\n * (\"Never use object\", \"Avoid unsafe assertions\").\r\n *\r\n * `BrandTokens` / `BrandSecondaryTokens` are surfaced for the same reason: a\r\n * host that receives a partial brand payload from the shell (themeReceived)\r\n * must be able to type that payload against the shared token group instead of\r\n * inventing a local twin.\r\n *\r\n * Additive, non-breaking: type-only re-exports, no runtime change.\r\n */\r\nexport type { CreatePortnetThemeOptions } from \"./createPortnetTheme\";\r\nexport type { BrandTokens } from \"./_brand\";\r\nexport type { BrandSecondaryTokens } from \"./_brandSecondary\";\r\n\r\nconst themeApi = {\r\n  createPortnetTheme,\r\n  getCssVariables,\r\n  injectCssVariables,\r\n  removeCssVariables,\r\n};\r\nexport default themeApi;\r\n"],"mappings":"AAAA,OAAOA,kBAAkB,MAAM,sBAAsB;AACrD,SACEC,eAAe,EACfC,kBAAkB,EAClBC,kBAAkB,QACb,gBAAgB;AAEvB,SAASC,OAAO,IAAIJ,kBAAkB,QAAQ,sBAAsB;AACpE,SACEC,eAAe,EACfC,kBAAkB,EAClBC,kBAAkB,QACb,gBAAgB;;AAEvB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAKA,IAAME,QAAQ,GAAG;EACfL,kBAAkB,EAAlBA,kBAAkB;EAClBC,eAAe,EAAfA,eAAe;EACfC,kBAAkB,EAAlBA,kBAAkB;EAClBC,kBAAkB,EAAlBA;AACF,CAAC;AACD,eAAeE,QAAQ","ignoreList":[]}

package/dist/esm/v2/tokens/breakpoints.js

@@ -0,0 +1,106 @@
+/**
+ * Breakpoint tokens — Portnet UI v2
+ * Aligned with Design System v1.0 §07 (Responsive) + R-RS.1.
+ *
+ * SINGLE SOURCE OF TRUTH for the responsive breakpoint scale.
+ * Previously these lived inside tokens/density.js, conflating two
+ * unrelated concerns (row/control density vs. viewport breakpoints).
+ * They now live here; density.js re-exports `breakpoints` so every
+ * existing `import { breakpoints } from "@portnet/ui/v2/tokens"`
+ * (and the `densityLayout` shape) keeps working unchanged.
+ *
+ * Two layers consume this scale and MUST stay in lockstep:
+ *   1. The MUI theme — createPortnetTheme wires `breakpoints` into
+ *      createTheme's `breakpoints.values`, so `theme.breakpoints.up()`
+ *      and every `sx={{ prop: { xs, md } }}` on a MUI component resolve
+ *      against THESE values.
+ *   2. The CSS layer — the `mq` helpers below emit the SAME media
+ *      queries as strings, for:
+ *        - the theme-free v2 Box/Stack responsive sx engine (Layout.js),
+ *        - raw `.css` / container styles,
+ *        - any `sx={{ [mq.up("md")]: {...} }}`,
+ *      and the `--bp-*` CSS variables emitted by cssVariables.js for
+ *      pure-CSS / container-query consumers.
+ *
+ * IMPORTANT — keep `breakpoints` a PURE value map ({ key: number }).
+ * MUI's createTheme iterates `breakpoints.values` to build its own
+ * up/down/between; a non-numeric key (e.g. a helper function) would be
+ * mis-read as a breakpoint named "up". Helpers therefore live on the
+ * SEPARATE `mq` export, never on `breakpoints` itself.
+ *
+ * Charter viewport targets covered:
+ *   - xs band : 320 / 360 / 375 / 390 / 414  (phones, base, no query)
+ *   - md      : 768 / 820                     (tablet)
+ *   - lg      : 1024                          (small desktop / landscape tablet)
+ *   - xl band : 1280 / 1440 / 1920            (desktop)
+ */
+
+/* Ascending, mobile-first. xs = 0 is the base band (phones 320-480). */
+export var breakpoints = Object.freeze({
+  xs: 0,
+  sm: 481,
+  md: 768,
+  lg: 1024,
+  xl: 1280
+});
+
+/* Local key type — canonical union of breakpoint keys. Not exported;
+ * the public token surface is unchanged. */
+
+/* Ordered key list — the canonical iteration order for any mobile-first
+ * cascade (base -> up). Re-used by Layout.js so the order can't drift. */
+export var BREAKPOINT_KEYS = Object.freeze(["xs", "sm", "md", "lg", "xl"]);
+
+/* MUI parity: down()/between() subtract this from the upper bound so a
+ * `down(key)` query and the matching `up(key)` query never overlap at
+ * the exact pixel. Mirrors MUI's default step (5/100 = 0.05px). */
+var STEP = 0.05;
+
+/**
+ * Resolve a key to its numeric min-width, falling back to 0 for an
+ * unknown key so a typo degrades to "always matches" rather than
+ * emitting a NaN width (which silently disables the whole query).
+ */
+export function bpValue(key) {
+  var v = breakpoints[key];
+  return typeof v === "number" ? v : 0;
+}
+
+/* Next key up the scale, or null when `key` is the largest. */
+function nextKey(key) {
+  var i = BREAKPOINT_KEYS.indexOf(key);
+  return i >= 0 && i < BREAKPOINT_KEYS.length - 1 ? BREAKPOINT_KEYS[i + 1] : null;
+}
+
+/**
+ * Token-derived media-query string helpers. Output is identical in
+ * intent to MUI's `theme.breakpoints.*` so the CSS layer and the
+ * JS/MUI layer can never diverge.
+ *
+ *   mq.up("md")            -> "@media (min-width:<md>px)"
+ *   mq.down("md")          -> "@media (max-width:<md - 0.05>px)"
+ *   mq.between("sm","lg")  -> "@media (min-width:<sm>px) and (max-width:<lg - 0.05>px)"
+ *   mq.only("md")          -> mq.between("md","lg")
+ *
+ * Usage (theme-free CSS layer / raw stylesheet):
+ *   `${mq.up("md")}{ .x{ gap:24px } }`
+ * Usage (sx object key):
+ *   sx={{ [mq.up("md")]: { flexDirection: "row" } }}
+ */
+export var mq = Object.freeze({
+  up: function up(key) {
+    return "@media (min-width:".concat(bpValue(key), "px)");
+  },
+  down: function down(key) {
+    return "@media (max-width:".concat(bpValue(key) - STEP, "px)");
+  },
+  between: function between(start, end) {
+    return "@media (min-width:".concat(bpValue(start), "px) and (max-width:").concat(bpValue(end) - STEP, "px)");
+  },
+  only: function only(key) {
+    var next = nextKey(key);
+    return next ? mq.between(key, next) : mq.up(key);
+  }
+});
+export default breakpoints;
+//# sourceMappingURL=breakpoints.js.map

package/dist/esm/v2/tokens/breakpoints.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"breakpoints.js","names":["breakpoints","Object","freeze","xs","sm","md","lg","xl","BREAKPOINT_KEYS","STEP","bpValue","key","v","nextKey","i","indexOf","length","mq","up","concat","down","between","start","end","only","next"],"sources":["../../../../src/lib/v2/tokens/breakpoints.ts"],"sourcesContent":["/**\r\n * Breakpoint tokens — Portnet UI v2\r\n * Aligned with Design System v1.0 §07 (Responsive) + R-RS.1.\r\n *\r\n * SINGLE SOURCE OF TRUTH for the responsive breakpoint scale.\r\n * Previously these lived inside tokens/density.js, conflating two\r\n * unrelated concerns (row/control density vs. viewport breakpoints).\r\n * They now live here; density.js re-exports `breakpoints` so every\r\n * existing `import { breakpoints } from \"@portnet/ui/v2/tokens\"`\r\n * (and the `densityLayout` shape) keeps working unchanged.\r\n *\r\n * Two layers consume this scale and MUST stay in lockstep:\r\n *   1. The MUI theme — createPortnetTheme wires `breakpoints` into\r\n *      createTheme's `breakpoints.values`, so `theme.breakpoints.up()`\r\n *      and every `sx={{ prop: { xs, md } }}` on a MUI component resolve\r\n *      against THESE values.\r\n *   2. The CSS layer — the `mq` helpers below emit the SAME media\r\n *      queries as strings, for:\r\n *        - the theme-free v2 Box/Stack responsive sx engine (Layout.js),\r\n *        - raw `.css` / container styles,\r\n *        - any `sx={{ [mq.up(\"md\")]: {...} }}`,\r\n *      and the `--bp-*` CSS variables emitted by cssVariables.js for\r\n *      pure-CSS / container-query consumers.\r\n *\r\n * IMPORTANT — keep `breakpoints` a PURE value map ({ key: number }).\r\n * MUI's createTheme iterates `breakpoints.values` to build its own\r\n * up/down/between; a non-numeric key (e.g. a helper function) would be\r\n * mis-read as a breakpoint named \"up\". Helpers therefore live on the\r\n * SEPARATE `mq` export, never on `breakpoints` itself.\r\n *\r\n * Charter viewport targets covered:\r\n *   - xs band : 320 / 360 / 375 / 390 / 414  (phones, base, no query)\r\n *   - md      : 768 / 820                     (tablet)\r\n *   - lg      : 1024                          (small desktop / landscape tablet)\r\n *   - xl band : 1280 / 1440 / 1920            (desktop)\r\n */\r\n\r\n/* Ascending, mobile-first. xs = 0 is the base band (phones 320-480). */\r\nexport const breakpoints = Object.freeze({\r\n  xs:    0,\r\n  sm:  481,\r\n  md:  768,\r\n  lg: 1024,\r\n  xl: 1280,\r\n});\r\n\r\n/* Local key type — canonical union of breakpoint keys. Not exported;\r\n * the public token surface is unchanged. */\r\ntype BreakpointKey = keyof typeof breakpoints;\r\n\r\n/* Ordered key list — the canonical iteration order for any mobile-first\r\n * cascade (base -> up). Re-used by Layout.js so the order can't drift. */\r\nexport const BREAKPOINT_KEYS = Object.freeze([\"xs\", \"sm\", \"md\", \"lg\", \"xl\"] as const);\r\n\r\n/* MUI parity: down()/between() subtract this from the upper bound so a\r\n * `down(key)` query and the matching `up(key)` query never overlap at\r\n * the exact pixel. Mirrors MUI's default step (5/100 = 0.05px). */\r\nconst STEP = 0.05;\r\n\r\n/**\r\n * Resolve a key to its numeric min-width, falling back to 0 for an\r\n * unknown key so a typo degrades to \"always matches\" rather than\r\n * emitting a NaN width (which silently disables the whole query).\r\n */\r\nexport function bpValue(key: BreakpointKey): number {\r\n  const v = breakpoints[key];\r\n  return typeof v === \"number\" ? v : 0;\r\n}\r\n\r\n/* Next key up the scale, or null when `key` is the largest. */\r\nfunction nextKey(key: BreakpointKey) {\r\n  const i = BREAKPOINT_KEYS.indexOf(key);\r\n  return i >= 0 && i < BREAKPOINT_KEYS.length - 1\r\n    ? BREAKPOINT_KEYS[i + 1]\r\n    : null;\r\n}\r\n\r\n/**\r\n * Token-derived media-query string helpers. Output is identical in\r\n * intent to MUI's `theme.breakpoints.*` so the CSS layer and the\r\n * JS/MUI layer can never diverge.\r\n *\r\n *   mq.up(\"md\")            -> \"@media (min-width:<md>px)\"\r\n *   mq.down(\"md\")          -> \"@media (max-width:<md - 0.05>px)\"\r\n *   mq.between(\"sm\",\"lg\")  -> \"@media (min-width:<sm>px) and (max-width:<lg - 0.05>px)\"\r\n *   mq.only(\"md\")          -> mq.between(\"md\",\"lg\")\r\n *\r\n * Usage (theme-free CSS layer / raw stylesheet):\r\n *   `${mq.up(\"md\")}{ .x{ gap:24px } }`\r\n * Usage (sx object key):\r\n *   sx={{ [mq.up(\"md\")]: { flexDirection: \"row\" } }}\r\n */\r\nexport const mq = Object.freeze({\r\n  up(key: BreakpointKey): string {\r\n    return `@media (min-width:${bpValue(key)}px)`;\r\n  },\r\n  down(key: BreakpointKey): string {\r\n    return `@media (max-width:${bpValue(key) - STEP}px)`;\r\n  },\r\n  between(start: BreakpointKey, end: BreakpointKey): string {\r\n    return `@media (min-width:${bpValue(start)}px) and (max-width:${bpValue(end) - STEP}px)`;\r\n  },\r\n  only(key: BreakpointKey): string {\r\n    const next = nextKey(key);\r\n    return next ? mq.between(key, next) : mq.up(key);\r\n  },\r\n});\r\n\r\nexport default breakpoints;\r\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA,OAAO,IAAMA,WAAW,GAAGC,MAAM,CAACC,MAAM,CAAC;EACvCC,EAAE,EAAK,CAAC;EACRC,EAAE,EAAG,GAAG;EACRC,EAAE,EAAG,GAAG;EACRC,EAAE,EAAE,IAAI;EACRC,EAAE,EAAE;AACN,CAAC,CAAC;;AAEF;AACA;;AAGA;AACA;AACA,OAAO,IAAMC,eAAe,GAAGP,MAAM,CAACC,MAAM,CAAC,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAU,CAAC;;AAErF;AACA;AACA;AACA,IAAMO,IAAI,GAAG,IAAI;;AAEjB;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,OAAOA,CAACC,GAAkB,EAAU;EAClD,IAAMC,CAAC,GAAGZ,WAAW,CAACW,GAAG,CAAC;EAC1B,OAAO,OAAOC,CAAC,KAAK,QAAQ,GAAGA,CAAC,GAAG,CAAC;AACtC;;AAEA;AACA,SAASC,OAAOA,CAACF,GAAkB,EAAE;EACnC,IAAMG,CAAC,GAAGN,eAAe,CAACO,OAAO,CAACJ,GAAG,CAAC;EACtC,OAAOG,CAAC,IAAI,CAAC,IAAIA,CAAC,GAAGN,eAAe,CAACQ,MAAM,GAAG,CAAC,GAC3CR,eAAe,CAACM,CAAC,GAAG,CAAC,CAAC,GACtB,IAAI;AACV;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,IAAMG,EAAE,GAAGhB,MAAM,CAACC,MAAM,CAAC;EAC9BgB,EAAE,WAAAA,GAACP,GAAkB,EAAU;IAC7B,4BAAAQ,MAAA,CAA4BT,OAAO,CAACC,GAAG,CAAC;EAC1C,CAAC;EACDS,IAAI,WAAAA,KAACT,GAAkB,EAAU;IAC/B,4BAAAQ,MAAA,CAA4BT,OAAO,CAACC,GAAG,CAAC,GAAGF,IAAI;EACjD,CAAC;EACDY,OAAO,WAAAA,QAACC,KAAoB,EAAEC,GAAkB,EAAU;IACxD,4BAAAJ,MAAA,CAA4BT,OAAO,CAACY,KAAK,CAAC,yBAAAH,MAAA,CAAsBT,OAAO,CAACa,GAAG,CAAC,GAAGd,IAAI;EACrF,CAAC;EACDe,IAAI,WAAAA,KAACb,GAAkB,EAAU;IAC/B,IAAMc,IAAI,GAAGZ,OAAO,CAACF,GAAG,CAAC;IACzB,OAAOc,IAAI,GAAGR,EAAE,CAACI,OAAO,CAACV,GAAG,EAAEc,IAAI,CAAC,GAAGR,EAAE,CAACC,EAAE,CAACP,GAAG,CAAC;EAClD;AACF,CAAC,CAAC;AAEF,eAAeX,WAAW","ignoreList":[]}