@portnet/ui 5.0.27 → 6.0.0

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

@@ -0,0 +1,74 @@
+/**
+ * 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)
+ */
+export declare const breakpoints: Readonly<{
+    xs: 0;
+    sm: 481;
+    md: 768;
+    lg: 1024;
+    xl: 1280;
+}>;
+type BreakpointKey = keyof typeof breakpoints;
+export declare const BREAKPOINT_KEYS: readonly ["xs", "sm", "md", "lg", "xl"];
+/**
+ * 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 declare function bpValue(key: BreakpointKey): number;
+/**
+ * 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 declare const mq: Readonly<{
+    up(key: BreakpointKey): string;
+    down(key: BreakpointKey): string;
+    between(start: BreakpointKey, end: BreakpointKey): string;
+    only(key: BreakpointKey): string;
+}>;
+export default breakpoints;
+//# sourceMappingURL=breakpoints.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"breakpoints.d.ts","sourceRoot":"","sources":["../../../src/lib/v2/tokens/breakpoints.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AAGH,eAAO,MAAM,WAAW;;;;;;EAMtB,CAAC;AAIH,KAAK,aAAa,GAAG,MAAM,OAAO,WAAW,CAAC;AAI9C,eAAO,MAAM,eAAe,yCAAyD,CAAC;AAOtF;;;;GAIG;AACH,wBAAgB,OAAO,CAAC,GAAG,EAAE,aAAa,GAAG,MAAM,CAGlD;AAUD;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,EAAE;YACL,aAAa,GAAG,MAAM;cAGpB,aAAa,GAAG,MAAM;mBAGjB,aAAa,OAAO,aAAa,GAAG,MAAM;cAG/C,aAAa,GAAG,MAAM;EAIhC,CAAC;AAEH,eAAe,WAAW,CAAC"}

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