@portnet/ui 5.0.32 → 6.0.1

package/dist/v2/tokens/breakpoints.js

@@ -0,0 +1,114 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.BREAKPOINT_KEYS = void 0;
+exports.bpValue = bpValue;
+exports.mq = exports["default"] = exports.breakpoints = void 0;
+/**
+ * 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). */
+var breakpoints = exports.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. */
+var BREAKPOINT_KEYS = exports.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).
+ */
+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" } }}
+ */
+var mq = exports.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);
+  }
+});
+var _default = exports["default"] = breakpoints;
+//# sourceMappingURL=breakpoints.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"breakpoints.js","names":["breakpoints","exports","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","_default"],"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;AACO,IAAMA,WAAW,GAAAC,OAAA,CAAAD,WAAA,GAAGE,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;AACO,IAAMC,eAAe,GAAAR,OAAA,CAAAQ,eAAA,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;AACO,SAASC,OAAOA,CAACC,GAAkB,EAAU;EAClD,IAAMC,CAAC,GAAGb,WAAW,CAACY,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;AACO,IAAMG,EAAE,GAAAjB,OAAA,CAAAiB,EAAA,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;AAAC,IAAAe,QAAA,GAAA1B,OAAA,cAEYD,WAAW","ignoreList":[]}

package/dist/v2/tokens/colors.d.ts

@@ -0,0 +1,228 @@
+/**
+ * Color tokens — Portnet UI v2
+ * Aligned with Design System v1.0 §02.1.
+ *
+ * Single source of truth for every colour value used in the library.
+ * Charter R-2.3 / R-AI.1 — magic colours are forbidden outside this file.
+ *
+ * Hue swatches are defined ONCE in `_hues` and reused by both the
+ * semantic palette (success / warning / danger / info) and the workflow
+ * status palette (status.*). This eliminates the previous duplication
+ * where the same hex was hard-coded in two distinct places.
+ */
+export declare const brand: {
+    accent: string;
+    accentHover: string;
+    accentSoft: string;
+    accentFg: string;
+};
+export declare const brandSecondary: {
+    secondary: string;
+    secondaryFg: string;
+};
+export declare const ink: {
+    fg: string;
+    fgMuted: string;
+    fgSubtle: string;
+    fgInverse: string;
+};
+export declare const surface: {
+    bg: string;
+    bgElev: string;
+    bgSubtle: string;
+    bgHover: string;
+    surface: string;
+};
+export declare const border: {
+    border: string;
+    borderStrong: string;
+};
+export declare const semantic: {
+    success: string;
+    successSoft: string;
+    successFg: string;
+    warning: string;
+    warningSoft: string;
+    warningFg: string;
+    danger: string;
+    dangerSoft: string;
+    dangerFg: string;
+    info: string;
+    infoSoft: string;
+    infoFg: string;
+};
+export declare const status: {
+    new: {
+        soft: string;
+        fg: string;
+    };
+    sent: {
+        soft: string;
+        fg: string;
+    };
+    pending: {
+        soft: string;
+        fg: string;
+    };
+    approved: {
+        soft: string;
+        fg: string;
+    };
+    rejected: {
+        soft: string;
+        fg: string;
+    };
+    neutral: {
+        soft: string;
+        fg: string;
+    };
+};
+export declare const focus: {
+    ring: string;
+    ringDanger: string;
+    ringSuccess: string;
+};
+export declare const dark: {
+    bg: string;
+    bgElev: string;
+    bgSubtle: string;
+    bgHover: string;
+    surface: string;
+    border: string;
+    borderStrong: string;
+    fg: string;
+    fgMuted: string;
+    fgSubtle: string;
+    fgInverse: string;
+    accentSoft: string;
+    status: {
+        new: {
+            fg: string;
+        };
+        sent: {
+            fg: string;
+        };
+        pending: {
+            fg: string;
+        };
+        approved: {
+            fg: string;
+        };
+        rejected: {
+            fg: string;
+        };
+        neutral: {
+            fg: string;
+        };
+    };
+};
+declare const colors: {
+    brand: {
+        accent: string;
+        accentHover: string;
+        accentSoft: string;
+        accentFg: string;
+    };
+    brandSecondary: {
+        secondary: string;
+        secondaryFg: string;
+    };
+    ink: {
+        fg: string;
+        fgMuted: string;
+        fgSubtle: string;
+        fgInverse: string;
+    };
+    surface: {
+        bg: string;
+        bgElev: string;
+        bgSubtle: string;
+        bgHover: string;
+        surface: string;
+    };
+    border: {
+        border: string;
+        borderStrong: string;
+    };
+    semantic: {
+        success: string;
+        successSoft: string;
+        successFg: string;
+        warning: string;
+        warningSoft: string;
+        warningFg: string;
+        danger: string;
+        dangerSoft: string;
+        dangerFg: string;
+        info: string;
+        infoSoft: string;
+        infoFg: string;
+    };
+    status: {
+        new: {
+            soft: string;
+            fg: string;
+        };
+        sent: {
+            soft: string;
+            fg: string;
+        };
+        pending: {
+            soft: string;
+            fg: string;
+        };
+        approved: {
+            soft: string;
+            fg: string;
+        };
+        rejected: {
+            soft: string;
+            fg: string;
+        };
+        neutral: {
+            soft: string;
+            fg: string;
+        };
+    };
+    focus: {
+        ring: string;
+        ringDanger: string;
+        ringSuccess: string;
+    };
+    dark: {
+        bg: string;
+        bgElev: string;
+        bgSubtle: string;
+        bgHover: string;
+        surface: string;
+        border: string;
+        borderStrong: string;
+        fg: string;
+        fgMuted: string;
+        fgSubtle: string;
+        fgInverse: string;
+        accentSoft: string;
+        status: {
+            new: {
+                fg: string;
+            };
+            sent: {
+                fg: string;
+            };
+            pending: {
+                fg: string;
+            };
+            approved: {
+                fg: string;
+            };
+            rejected: {
+                fg: string;
+            };
+            neutral: {
+                fg: string;
+            };
+        };
+    };
+};
+export default colors;
+//# sourceMappingURL=colors.d.ts.map

package/dist/v2/tokens/colors.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"colors.d.ts","sourceRoot":"","sources":["../../../src/lib/v2/tokens/colors.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAgBH,eAAO,MAAM,KAAK;;;;;CAKjB,CAAC;AAiBF,eAAO,MAAM,cAAc;;;CAG1B,CAAC;AAoBF,eAAO,MAAM,GAAG;;;;;CAKf,CAAC;AAGF,eAAO,MAAM,OAAO;;;;;;CAMnB,CAAC;AAGF,eAAO,MAAM,MAAM;;;CAGlB,CAAC;AAOF,eAAO,MAAM,QAAQ;;;;;;;;;;;;;CAapB,CAAC;AAOF,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;CAOlB,CAAC;AAOF,eAAO,MAAM,KAAK;;;;CAIjB,CAAC;AAMF,eAAO,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqBhB,CAAC;AAEF,QAAA,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAiF,CAAC;AAC9F,eAAe,MAAM,CAAC"}

package/dist/v2/tokens/colors.js

@@ -0,0 +1,225 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.surface = exports.status = exports.semantic = exports.ink = exports.focus = exports["default"] = exports.dark = exports.brandSecondary = exports.brand = exports.border = void 0;
+/**
+ * Color tokens — Portnet UI v2
+ * Aligned with Design System v1.0 §02.1.
+ *
+ * Single source of truth for every colour value used in the library.
+ * Charter R-2.3 / R-AI.1 — magic colours are forbidden outside this file.
+ *
+ * Hue swatches are defined ONCE in `_hues` and reused by both the
+ * semantic palette (success / warning / danger / info) and the workflow
+ * status palette (status.*). This eliminates the previous duplication
+ * where the same hex was hard-coded in two distinct places.
+ */
+
+/* ---------- Internal hue swatches ----------------------------------
+ * Each hue ships {soft, fg}. `soft` is the tinted background, `fg` is
+ * the darker text-grade colour, AA-verified on both white AND its soft.
+ */
+var _hues = {
+  green: {
+    soft: "#E7F7EF",
+    fg: "#0A6E44"
+  },
+  // ~6.3:1 / ~5.7:1
+  amber: {
+    soft: "#FDF4E0",
+    fg: "#7A5200"
+  },
+  // ~7.0:1 / ~6.4:1
+  red: {
+    soft: "#FBEBED",
+    fg: "#9B1F2B"
+  },
+  // ~7.95:1 / ~5.6:1
+  blue: {
+    soft: "#E0F2FE",
+    fg: "#075985"
+  },
+  // ~7.6:1 / ~6.6:1
+  indigo: {
+    soft: "#EEF3FF",
+    fg: "#1A3EA8"
+  },
+  // ~7.8:1 / ~6.4:1
+  slate: {
+    soft: "#F1F2F5",
+    fg: "#3A3F4A"
+  } // ~9.5:1 / ~8.6:1
+};
+
+/* ---------- Brand --------------------------------------------------- */
+var brand = exports.brand = {
+  accent: "#232F66",
+  // Portnet navy — AAA · ~12.6:1 on white
+  accentHover: "#1A2452",
+  // pressed / hover (darker)
+  accentSoft: "#E9ECF4",
+  // pale tint for soft backgrounds
+  accentFg: "#FFFFFF"
+};
+
+/* ---------- Brand secondary -----------------------------------------
+ * PORTNET teal — used for secondary CTAs / accent layers.
+ *
+ * Promoted from gu-modules/addpe/addpe-fe (was a module-local
+ * constant `PORTNET_TEAL = "#4fb8cf"` in src/common/utils/appearance.js
+ * that overlaid createTheme to inject palette.secondary). Lifted here
+ * as the canonical PORTNET brand secondary so every host inherits it
+ * via createPortnetTheme without re-overlaying.
+ *
+ * Audit note (R-T.2 follow-up): secondaryFg = #FFFFFF on #4FB8CF
+ * is ~1.96:1, which FAILS WCAG AA for body text. Acceptable for
+ * chip/badge surfaces and non-text accent fills, but a darker fg
+ * (e.g. ink.fg) MUST be chosen before this token is used for text-
+ * bearing buttons or alerts.
+ */
+var brandSecondary = exports.brandSecondary = {
+  secondary: "#4FB8CF",
+  secondaryFg: "#FFFFFF"
+};
+
+/* ---------- Ink (text) ---------------------------------------------
+ *
+ * Contrast tiers (all ratios computed against the lib's light surfaces
+ * via WCAG relative-luminance — see colors.js commit log for the math):
+ *
+ *   fg        AAA · 17.40:1   primary body text + headings
+ *   fgMuted   AAA ·  8.43:1   labels, subtitles, chip text, table
+ *                             headers, pagination — every "essential
+ *                             muted text" surface. Elevated to AAA
+ *                             so the bump propagates fleet-wide to
+ *                             every consumer of @portnet/ui.
+ *   fgSubtle  AA  ·  4.81:1   placeholders, helper text, captions,
+ *                             breadcrumb trail. AA-only by design —
+ *                             "incidental text" per WCAG 1.4.6
+ *                             footnote 4, intentionally lighter to
+ *                             preserve the muted/subtle hierarchy.
+ *   fgInverse white on dark surfaces (always paired with dark bgs).
+ */
+var ink = exports.ink = {
+  fg: "#0F1525",
+  // AAA · 17.40:1 on white
+  fgMuted: "#474C5A",
+  // AAA ·  8.43:1 on white, 7.94:1 on bg, 7.52:1 on bg-subtle
+  fgSubtle: "#6B7280",
+  // AA  ·  4.81:1 on white — incidental text only (WCAG 1.4.6)
+  fgInverse: "#FFFFFF"
+};
+
+/* ---------- Surfaces ------------------------------------------------ */
+var surface = exports.surface = {
+  bg: "#F7F8FA",
+  bgElev: "#FFFFFF",
+  bgSubtle: "#F1F2F5",
+  bgHover: "#EAECF0",
+  surface: "#FFFFFF"
+};
+
+/* ---------- Borders ------------------------------------------------- */
+var border = exports.border = {
+  border: "#E4E6EB",
+  borderStrong: "#9099AA" // WCAG 1.4.11 · ≥ 3:1 against white
+};
+
+/* ---------- Semantic ------------------------------------------------
+ * `<name>`     saturated, used for fills / icons / borders (≥ 3:1).
+ * `<name>Soft` tinted background.
+ * `<name>Fg`   darker text-grade (≥ 4.5:1 on white AND `<name>Soft`).
+ */
+var semantic = exports.semantic = {
+  success: "#10A968",
+  successSoft: _hues.green.soft,
+  successFg: _hues.green.fg,
+  warning: "#C78400",
+  warningSoft: _hues.amber.soft,
+  warningFg: _hues.amber.fg,
+  danger: "#D93644",
+  dangerSoft: _hues.red.soft,
+  dangerFg: _hues.red.fg,
+  info: "#1A7FB8",
+  infoSoft: _hues.blue.soft,
+  infoFg: _hues.blue.fg
+};
+
+/* ---------- Workflow status ----------------------------------------
+ * Six and only six. Any new business status MUST map onto one of these
+ * (R-2.2). New chips with custom colours require a charter amendment.
+ * Charter §02.1 + V2_ARCHITECTURE.md §5.
+ */
+var status = exports.status = {
+  "new": _hues.indigo,
+  sent: _hues.blue,
+  pending: _hues.amber,
+  approved: _hues.green,
+  rejected: _hues.red,
+  neutral: _hues.slate
+};
+
+/* ---------- Focus ring (static fallback) ---------------------------
+ * `shadows.focus` references --accent via CSS var. Use these as
+ * static-context fallbacks when CSS custom properties aren't
+ * resolvable (server-rendered emails, raw inline style, etc.).
+ */
+var focus = exports.focus = {
+  ring: "0 0 0 3px rgba(35, 47, 102, 0.22)",
+  ringDanger: "0 0 0 3px rgba(217, 54, 68, 0.22)",
+  ringSuccess: "0 0 0 3px rgba(16, 169, 104, 0.22)"
+};
+
+/* ---------- Dark mode ----------------------------------------------
+ * Applied when `[data-theme="dark"]` on `<html>`. OLED-optimised
+ * backgrounds (RGESN R-9.5).
+ */
+var dark = exports.dark = {
+  bg: "#0A0A0F",
+  bgElev: "#111218",
+  bgSubtle: "#181C26",
+  bgHover: "#1E2230",
+  surface: "#111218",
+  border: "#262B36",
+  borderStrong: "#484F60",
+  fg: "#E8EAEE",
+  fgMuted: "#9BA1AD",
+  fgSubtle: "#9CA3AF",
+  fgInverse: "#0A0A0F",
+  accentSoft: "#1A2340",
+  status: {
+    "new": {
+      fg: "#7EA2FF"
+    },
+    sent: {
+      fg: "#5FB5E0"
+    },
+    pending: {
+      fg: "#E5B04A"
+    },
+    approved: {
+      fg: "#4FD49A"
+    },
+    rejected: {
+      fg: "#EF5A68"
+    },
+    neutral: {
+      fg: "#A0A6B0"
+    }
+  }
+};
+var colors = {
+  brand: brand,
+  brandSecondary: brandSecondary,
+  ink: ink,
+  surface: surface,
+  border: border,
+  semantic: semantic,
+  status: status,
+  focus: focus,
+  dark: dark
+};
+var _default = exports["default"] = colors;
+//# sourceMappingURL=colors.js.map

package/dist/v2/tokens/colors.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"colors.js","names":["_hues","green","soft","fg","amber","red","blue","indigo","slate","brand","exports","accent","accentHover","accentSoft","accentFg","brandSecondary","secondary","secondaryFg","ink","fgMuted","fgSubtle","fgInverse","surface","bg","bgElev","bgSubtle","bgHover","border","borderStrong","semantic","success","successSoft","successFg","warning","warningSoft","warningFg","danger","dangerSoft","dangerFg","info","infoSoft","infoFg","status","sent","pending","approved","rejected","neutral","focus","ring","ringDanger","ringSuccess","dark","colors","_default"],"sources":["../../../src/lib/v2/tokens/colors.ts"],"sourcesContent":["/**\r\n * Color tokens — Portnet UI v2\r\n * Aligned with Design System v1.0 §02.1.\r\n *\r\n * Single source of truth for every colour value used in the library.\r\n * Charter R-2.3 / R-AI.1 — magic colours are forbidden outside this file.\r\n *\r\n * Hue swatches are defined ONCE in `_hues` and reused by both the\r\n * semantic palette (success / warning / danger / info) and the workflow\r\n * status palette (status.*). This eliminates the previous duplication\r\n * where the same hex was hard-coded in two distinct places.\r\n */\r\n\r\n/* ---------- Internal hue swatches ----------------------------------\r\n * Each hue ships {soft, fg}. `soft` is the tinted background, `fg` is\r\n * the darker text-grade colour, AA-verified on both white AND its soft.\r\n */\r\nconst _hues = {\r\n  green:  { soft: \"#E7F7EF\", fg: \"#0A6E44\" }, // ~6.3:1 / ~5.7:1\r\n  amber:  { soft: \"#FDF4E0\", fg: \"#7A5200\" }, // ~7.0:1 / ~6.4:1\r\n  red:    { soft: \"#FBEBED\", fg: \"#9B1F2B\" }, // ~7.95:1 / ~5.6:1\r\n  blue:   { soft: \"#E0F2FE\", fg: \"#075985\" }, // ~7.6:1 / ~6.6:1\r\n  indigo: { soft: \"#EEF3FF\", fg: \"#1A3EA8\" }, // ~7.8:1 / ~6.4:1\r\n  slate:  { soft: \"#F1F2F5\", fg: \"#3A3F4A\" }, // ~9.5:1 / ~8.6:1\r\n};\r\n\r\n/* ---------- Brand --------------------------------------------------- */\r\nexport const brand = {\r\n  accent:      \"#232F66\", // Portnet navy — AAA · ~12.6:1 on white\r\n  accentHover: \"#1A2452\", // pressed / hover (darker)\r\n  accentSoft:  \"#E9ECF4\", // pale tint for soft backgrounds\r\n  accentFg:    \"#FFFFFF\",\r\n};\r\n\r\n/* ---------- Brand secondary -----------------------------------------\r\n * PORTNET teal — used for secondary CTAs / accent layers.\r\n *\r\n * Promoted from gu-modules/addpe/addpe-fe (was a module-local\r\n * constant `PORTNET_TEAL = \"#4fb8cf\"` in src/common/utils/appearance.js\r\n * that overlaid createTheme to inject palette.secondary). Lifted here\r\n * as the canonical PORTNET brand secondary so every host inherits it\r\n * via createPortnetTheme without re-overlaying.\r\n *\r\n * Audit note (R-T.2 follow-up): secondaryFg = #FFFFFF on #4FB8CF\r\n * is ~1.96:1, which FAILS WCAG AA for body text. Acceptable for\r\n * chip/badge surfaces and non-text accent fills, but a darker fg\r\n * (e.g. ink.fg) MUST be chosen before this token is used for text-\r\n * bearing buttons or alerts.\r\n */\r\nexport const brandSecondary = {\r\n  secondary:    \"#4FB8CF\",\r\n  secondaryFg:  \"#FFFFFF\",\r\n};\r\n\r\n/* ---------- Ink (text) ---------------------------------------------\r\n *\r\n * Contrast tiers (all ratios computed against the lib's light surfaces\r\n * via WCAG relative-luminance — see colors.js commit log for the math):\r\n *\r\n *   fg        AAA · 17.40:1   primary body text + headings\r\n *   fgMuted   AAA ·  8.43:1   labels, subtitles, chip text, table\r\n *                             headers, pagination — every \"essential\r\n *                             muted text\" surface. Elevated to AAA\r\n *                             so the bump propagates fleet-wide to\r\n *                             every consumer of @portnet/ui.\r\n *   fgSubtle  AA  ·  4.81:1   placeholders, helper text, captions,\r\n *                             breadcrumb trail. AA-only by design —\r\n *                             \"incidental text\" per WCAG 1.4.6\r\n *                             footnote 4, intentionally lighter to\r\n *                             preserve the muted/subtle hierarchy.\r\n *   fgInverse white on dark surfaces (always paired with dark bgs).\r\n */\r\nexport const ink = {\r\n  fg:        \"#0F1525\", // AAA · 17.40:1 on white\r\n  fgMuted:   \"#474C5A\", // AAA ·  8.43:1 on white, 7.94:1 on bg, 7.52:1 on bg-subtle\r\n  fgSubtle:  \"#6B7280\", // AA  ·  4.81:1 on white — incidental text only (WCAG 1.4.6)\r\n  fgInverse: \"#FFFFFF\",\r\n};\r\n\r\n/* ---------- Surfaces ------------------------------------------------ */\r\nexport const surface = {\r\n  bg:       \"#F7F8FA\",\r\n  bgElev:   \"#FFFFFF\",\r\n  bgSubtle: \"#F1F2F5\",\r\n  bgHover:  \"#EAECF0\",\r\n  surface:  \"#FFFFFF\",\r\n};\r\n\r\n/* ---------- Borders ------------------------------------------------- */\r\nexport const border = {\r\n  border:       \"#E4E6EB\",\r\n  borderStrong: \"#9099AA\", // WCAG 1.4.11 · ≥ 3:1 against white\r\n};\r\n\r\n/* ---------- Semantic ------------------------------------------------\r\n * `<name>`     saturated, used for fills / icons / borders (≥ 3:1).\r\n * `<name>Soft` tinted background.\r\n * `<name>Fg`   darker text-grade (≥ 4.5:1 on white AND `<name>Soft`).\r\n */\r\nexport const semantic = {\r\n  success:     \"#10A968\",\r\n  successSoft: _hues.green.soft,\r\n  successFg:   _hues.green.fg,\r\n  warning:     \"#C78400\",\r\n  warningSoft: _hues.amber.soft,\r\n  warningFg:   _hues.amber.fg,\r\n  danger:      \"#D93644\",\r\n  dangerSoft:  _hues.red.soft,\r\n  dangerFg:    _hues.red.fg,\r\n  info:        \"#1A7FB8\",\r\n  infoSoft:    _hues.blue.soft,\r\n  infoFg:      _hues.blue.fg,\r\n};\r\n\r\n/* ---------- Workflow status ----------------------------------------\r\n * Six and only six. Any new business status MUST map onto one of these\r\n * (R-2.2). New chips with custom colours require a charter amendment.\r\n * Charter §02.1 + V2_ARCHITECTURE.md §5.\r\n */\r\nexport const status = {\r\n  new:      _hues.indigo,\r\n  sent:     _hues.blue,\r\n  pending:  _hues.amber,\r\n  approved: _hues.green,\r\n  rejected: _hues.red,\r\n  neutral:  _hues.slate,\r\n};\r\n\r\n/* ---------- Focus ring (static fallback) ---------------------------\r\n * `shadows.focus` references --accent via CSS var. Use these as\r\n * static-context fallbacks when CSS custom properties aren't\r\n * resolvable (server-rendered emails, raw inline style, etc.).\r\n */\r\nexport const focus = {\r\n  ring:        \"0 0 0 3px rgba(35, 47, 102, 0.22)\",\r\n  ringDanger:  \"0 0 0 3px rgba(217, 54, 68, 0.22)\",\r\n  ringSuccess: \"0 0 0 3px rgba(16, 169, 104, 0.22)\",\r\n};\r\n\r\n/* ---------- Dark mode ----------------------------------------------\r\n * Applied when `[data-theme=\"dark\"]` on `<html>`. OLED-optimised\r\n * backgrounds (RGESN R-9.5).\r\n */\r\nexport const dark = {\r\n  bg:           \"#0A0A0F\",\r\n  bgElev:       \"#111218\",\r\n  bgSubtle:     \"#181C26\",\r\n  bgHover:      \"#1E2230\",\r\n  surface:      \"#111218\",\r\n  border:       \"#262B36\",\r\n  borderStrong: \"#484F60\",\r\n  fg:           \"#E8EAEE\",\r\n  fgMuted:      \"#9BA1AD\",\r\n  fgSubtle:     \"#9CA3AF\",\r\n  fgInverse:    \"#0A0A0F\",\r\n  accentSoft:   \"#1A2340\",\r\n  status: {\r\n    new:      { fg: \"#7EA2FF\" },\r\n    sent:     { fg: \"#5FB5E0\" },\r\n    pending:  { fg: \"#E5B04A\" },\r\n    approved: { fg: \"#4FD49A\" },\r\n    rejected: { fg: \"#EF5A68\" },\r\n    neutral:  { fg: \"#A0A6B0\" },\r\n  },\r\n};\r\n\r\nconst colors = { brand, brandSecondary, ink, surface, border, semantic, status, focus, dark };\r\nexport default colors;\r\n"],"mappings":";;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA,IAAMA,KAAK,GAAG;EACZC,KAAK,EAAG;IAAEC,IAAI,EAAE,SAAS;IAAEC,EAAE,EAAE;EAAU,CAAC;EAAE;EAC5CC,KAAK,EAAG;IAAEF,IAAI,EAAE,SAAS;IAAEC,EAAE,EAAE;EAAU,CAAC;EAAE;EAC5CE,GAAG,EAAK;IAAEH,IAAI,EAAE,SAAS;IAAEC,EAAE,EAAE;EAAU,CAAC;EAAE;EAC5CG,IAAI,EAAI;IAAEJ,IAAI,EAAE,SAAS;IAAEC,EAAE,EAAE;EAAU,CAAC;EAAE;EAC5CI,MAAM,EAAE;IAAEL,IAAI,EAAE,SAAS;IAAEC,EAAE,EAAE;EAAU,CAAC;EAAE;EAC5CK,KAAK,EAAG;IAAEN,IAAI,EAAE,SAAS;IAAEC,EAAE,EAAE;EAAU,CAAC,CAAE;AAC9C,CAAC;;AAED;AACO,IAAMM,KAAK,GAAAC,OAAA,CAAAD,KAAA,GAAG;EACnBE,MAAM,EAAO,SAAS;EAAE;EACxBC,WAAW,EAAE,SAAS;EAAE;EACxBC,UAAU,EAAG,SAAS;EAAE;EACxBC,QAAQ,EAAK;AACf,CAAC;;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,IAAMC,cAAc,GAAAL,OAAA,CAAAK,cAAA,GAAG;EAC5BC,SAAS,EAAK,SAAS;EACvBC,WAAW,EAAG;AAChB,CAAC;;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,IAAMC,GAAG,GAAAR,OAAA,CAAAQ,GAAA,GAAG;EACjBf,EAAE,EAAS,SAAS;EAAE;EACtBgB,OAAO,EAAI,SAAS;EAAE;EACtBC,QAAQ,EAAG,SAAS;EAAE;EACtBC,SAAS,EAAE;AACb,CAAC;;AAED;AACO,IAAMC,OAAO,GAAAZ,OAAA,CAAAY,OAAA,GAAG;EACrBC,EAAE,EAAQ,SAAS;EACnBC,MAAM,EAAI,SAAS;EACnBC,QAAQ,EAAE,SAAS;EACnBC,OAAO,EAAG,SAAS;EACnBJ,OAAO,EAAG;AACZ,CAAC;;AAED;AACO,IAAMK,MAAM,GAAAjB,OAAA,CAAAiB,MAAA,GAAG;EACpBA,MAAM,EAAQ,SAAS;EACvBC,YAAY,EAAE,SAAS,CAAE;AAC3B,CAAC;;AAED;AACA;AACA;AACA;AACA;AACO,IAAMC,QAAQ,GAAAnB,OAAA,CAAAmB,QAAA,GAAG;EACtBC,OAAO,EAAM,SAAS;EACtBC,WAAW,EAAE/B,KAAK,CAACC,KAAK,CAACC,IAAI;EAC7B8B,SAAS,EAAIhC,KAAK,CAACC,KAAK,CAACE,EAAE;EAC3B8B,OAAO,EAAM,SAAS;EACtBC,WAAW,EAAElC,KAAK,CAACI,KAAK,CAACF,IAAI;EAC7BiC,SAAS,EAAInC,KAAK,CAACI,KAAK,CAACD,EAAE;EAC3BiC,MAAM,EAAO,SAAS;EACtBC,UAAU,EAAGrC,KAAK,CAACK,GAAG,CAACH,IAAI;EAC3BoC,QAAQ,EAAKtC,KAAK,CAACK,GAAG,CAACF,EAAE;EACzBoC,IAAI,EAAS,SAAS;EACtBC,QAAQ,EAAKxC,KAAK,CAACM,IAAI,CAACJ,IAAI;EAC5BuC,MAAM,EAAOzC,KAAK,CAACM,IAAI,CAACH;AAC1B,CAAC;;AAED;AACA;AACA;AACA;AACA;AACO,IAAMuC,MAAM,GAAAhC,OAAA,CAAAgC,MAAA,GAAG;EACpB,OAAU1C,KAAK,CAACO,MAAM;EACtBoC,IAAI,EAAM3C,KAAK,CAACM,IAAI;EACpBsC,OAAO,EAAG5C,KAAK,CAACI,KAAK;EACrByC,QAAQ,EAAE7C,KAAK,CAACC,KAAK;EACrB6C,QAAQ,EAAE9C,KAAK,CAACK,GAAG;EACnB0C,OAAO,EAAG/C,KAAK,CAACQ;AAClB,CAAC;;AAED;AACA;AACA;AACA;AACA;AACO,IAAMwC,KAAK,GAAAtC,OAAA,CAAAsC,KAAA,GAAG;EACnBC,IAAI,EAAS,mCAAmC;EAChDC,UAAU,EAAG,mCAAmC;EAChDC,WAAW,EAAE;AACf,CAAC;;AAED;AACA;AACA;AACA;AACO,IAAMC,IAAI,GAAA1C,OAAA,CAAA0C,IAAA,GAAG;EAClB7B,EAAE,EAAY,SAAS;EACvBC,MAAM,EAAQ,SAAS;EACvBC,QAAQ,EAAM,SAAS;EACvBC,OAAO,EAAO,SAAS;EACvBJ,OAAO,EAAO,SAAS;EACvBK,MAAM,EAAQ,SAAS;EACvBC,YAAY,EAAE,SAAS;EACvBzB,EAAE,EAAY,SAAS;EACvBgB,OAAO,EAAO,SAAS;EACvBC,QAAQ,EAAM,SAAS;EACvBC,SAAS,EAAK,SAAS;EACvBR,UAAU,EAAI,SAAS;EACvB6B,MAAM,EAAE;IACN,OAAU;MAAEvC,EAAE,EAAE;IAAU,CAAC;IAC3BwC,IAAI,EAAM;MAAExC,EAAE,EAAE;IAAU,CAAC;IAC3ByC,OAAO,EAAG;MAAEzC,EAAE,EAAE;IAAU,CAAC;IAC3B0C,QAAQ,EAAE;MAAE1C,EAAE,EAAE;IAAU,CAAC;IAC3B2C,QAAQ,EAAE;MAAE3C,EAAE,EAAE;IAAU,CAAC;IAC3B4C,OAAO,EAAG;MAAE5C,EAAE,EAAE;IAAU;EAC5B;AACF,CAAC;AAED,IAAMkD,MAAM,GAAG;EAAE5C,KAAK,EAALA,KAAK;EAAEM,cAAc,EAAdA,cAAc;EAAEG,GAAG,EAAHA,GAAG;EAAEI,OAAO,EAAPA,OAAO;EAAEK,MAAM,EAANA,MAAM;EAAEE,QAAQ,EAARA,QAAQ;EAAEa,MAAM,EAANA,MAAM;EAAEM,KAAK,EAALA,KAAK;EAAEI,IAAI,EAAJA;AAAK,CAAC;AAAC,IAAAE,QAAA,GAAA5C,OAAA,cAC/E2C,MAAM","ignoreList":[]}