@portnet/ui 6.0.2 → 6.0.3

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

@@ -0,0 +1,261 @@
+/**
+ * Categorical chart palette — Portnet UI v2
+ *
+ * A cyclable sequence of visually distinct fills for CATEGORY series in
+ * charts (pie slices, stacked bars, multi-series lines). Charter §02.
+ *
+ * ─────────────────────────────────────────────────────────────────────────────
+ * WHY THIS BELONGS IN THE LIBRARY (capability gap G-37)
+ *
+ * R-2.3 MUST: "aucune valeur magique : tout px/color/font-size passe par un
+ * token". R-AI.1 MUST repeats it for generated UI. Yet the library shipped only
+ * SEMANTIC colour: brand, ink, surface, border, the four severities and the six
+ * workflow statuses. None of them answers "give me N colours that a reader can
+ * tell apart", so every charting screen wrote its own list of hex literals.
+ *
+ * Observed in `refonte-frontend` (Area 4): THIRTY-TWO literals across two
+ * files — a 30-entry palette in `GraphiqueCamembert` (itself already
+ * de-duplicated from two copies) plus two more in
+ * `ChartBilanDPCIParDelegation`. The file carried a comment explaining, quite
+ * correctly, why it could not be fixed locally: mapping categories onto the
+ * SEMANTIC tones would make "red" mean *a category of measuring instrument*
+ * rather than *an error*, which R-2.2 exists to prevent. So the module was
+ * stuck between two MUST rules, and the only way out was here.
+ *
+ * >>> THE ARGUMENT FOR OWNING IT IS THE VERIFICATION, NOT THE STORAGE. Moving
+ * >>> thirty hex codes from a module to a library would only relocate them. The
+ * >>> reason they belong here is that a categorical palette carries three
+ * >>> claims no host can check for itself, and that this repository already has
+ * >>> the tooling for: each fill must clear the 3:1 non-text floor (WCAG
+ * >>> 1.4.11 / R-C.3) against the surface it sits on, the entries must stay
+ * >>> apart from each other, and they must stay apart under colour-vision
+ * >>> deficiency — a pie chart encodes its data in hue alone, so a palette that
+ * >>> collapses under deuteranopia loses the data, not just the styling. The
+ * >>> module's 30 literals had NONE of the three verified. See
+ * >>> __tests__/chart-palette.test.ts, which asserts all three. <<<
+ * ─────────────────────────────────────────────────────────────────────────────
+ *
+ * HOW THESE VALUES WERE DERIVED
+ *
+ * Hue-balanced, then constrained — not picked by eye:
+ *
+ *   1. Twelve hues, the first eight evenly spaced around the wheel, so the
+ *      sequence reads as intentional rather than arbitrary.
+ *   2. Lightness solved numerically per entry so that relative luminance lands
+ *      inside the window where a fill clears 3:1 against BOTH the light surface
+ *      (#FFFFFF) and the dark-mode surface. That window is roughly
+ *      L ∈ [0.119, 0.300] and it is why ONE array serves both themes — unlike
+ *      `status`, which needs a `dark.status` override. Entries alternate
+ *      between the two ends of the window, which adds a lightness difference to
+ *      the hue difference between neighbours.
+ *   3. Entries 9 to 12 were then chosen by maximising the minimum separation
+ *      against the first eight, measured as the WORST of three distances:
+ *      normal vision, deuteranopia and protanopia (Viénot simulation, CIE76).
+ *
+ * Measured properties (all pinned in the test):
+ *   · every entry ≥ 3.06:1 on #FFFFFF and ≥ 3.37:1 on the dark surface;
+ *   · minimum pairwise separation ≥ 12 ΔE under normal vision AND under both
+ *     simulated dichromacies — the closest pair is entry 1 (red) against
+ *     entry 3 (olive), at ~12.4.
+ *
+ * USE THE FIRST EIGHT WHERE YOU CAN. Entries 1-8 are the hue-balanced core;
+ * 9-12 extend it for larger sets. Past twelve, `chartColor` CYCLES, and two
+ * slices then share a colour — which is a defect in the chart, not in the
+ * palette. A series with more than a dozen categories should aggregate its
+ * tail into a single "Autres" slice: R-3.1 / R-3.2 cap what one screen may
+ * show at once for the same reason.
+ *
+ * COLOUR IS NEVER THE ONLY CHANNEL (WCAG 1.4.1). This palette makes slices
+ * distinguishable; it does not make a chart accessible. Every consumer still
+ * owes a legend with text labels, and a text equivalent of the data — 1.1.1
+ * for the chart as a whole.
+ *
+ * Usage — prefer the JS token in a chart library, since SVG presentation
+ * attributes given a `var()` are not reliably resolved by every renderer:
+ *
+ *   import { chartColor } from "@portnet/ui/tokens";
+ *   <Cell fill={chartColor(index)} />
+ *
+ * In CSS or `sx`, the same values are emitted as `--chart-1` … `--chart-12`
+ * (see theme/cssVariables).
+ *
+ * ─────────────────────────────────────────────────────────────────────────────
+ * TEXT *ON* A SLICE IS A SECOND CONTRAST PROBLEM — see `chartColorOn`.
+ *
+ * The 3:1 floor above covers the FILL against the page. A percentage printed
+ * inside the slice is text on that fill, and owes 4.5:1 (WCAG 1.4.3). The
+ * palette deliberately spans two lightness tiers, so no single label colour
+ * works for all twelve: `refonte-frontend` printed `fill="white"` on all six
+ * of its pies, which was ~3:1 on half of them.
+ * ─────────────────────────────────────────────────────────────────────────────
+ */
+import { contrastRatio, WCAG_AA_NORMAL } from "../utils/contrast";
+import { ink } from "./colors";
+import { fontFamily, fontSize, fontWeight } from "./typography";
+
+/**
+ * The palette, in display order. Entries 1-8 (indices 0-7) are the
+ * hue-balanced, CVD-verified core; 9-12 extend it.
+ */
+export const chartCategorical = Object.freeze(["#C92E1D",
+// 1  red
+"#A89318",
+// 2  amber / olive-gold
+"#3B7911",
+// 3  olive green
+"#18A84B",
+// 4  green
+"#127681",
+// 5  teal
+"#7A8CEC",
+// 6  periwinkle
+"#9B30E1",
+// 7  violet
+"#E860B8",
+// 8  pink
+"#119870",
+// 9  jade
+"#B915B0",
+// 10 magenta
+"#9A0DF9",
+// 11 blue-violet
+"#965848" // 12 brown
+]);
+
+/** Size of the hue-balanced core. Beyond it, separation is still verified but the sequence stops being evenly spaced. */
+export const CHART_CATEGORICAL_CORE = 8;
+
+/**
+ * Colour for the n-th category, cycling past the end of the palette.
+ *
+ * Non-finite or negative indices resolve to the first entry rather than
+ * throwing: a chart is a read-only view, and a bad index should not blank a
+ * page. In development an out-of-range index also warns, because CYCLING IS
+ * SILENT — two slices sharing a colour looks like a design choice, not like the
+ * data-loss it is.
+ */
+export function chartColor(index) {
+  const total = chartCategorical.length;
+  if (!Number.isFinite(index) || index < 0) {
+    return chartCategorical[0];
+  }
+  const i = Math.floor(index);
+  if (i >= total && process.env["NODE_ENV"] !== "production") {
+    // eslint-disable-next-line no-console
+    console.warn(`[@portnet/ui] chartColor(${i}): the palette holds ${total} colours, so ` + `this category reuses the colour of category ${i % total}. Aggregate ` + `the tail of the series instead (R-3.2).`);
+  }
+  return chartCategorical[i % total];
+}
+
+/**
+ * Label colour for text drawn ON a slice — `#FFFFFF` or `ink.fg`, whichever
+ * clears WCAG 1.4.3 AA against that fill.
+ *
+ * DERIVED, NOT TABULATED, and that is the whole point: a parallel array of
+ * twelve label colours would be a second list to keep in step with the first,
+ * and the failure mode of letting them drift is silent — unreadable text, at
+ * the exact spot where the chart states its numbers. Computed here with this
+ * library's own `contrastRatio`, so nudging a hue re-derives its label colour
+ * in the same breath.
+ *
+ * Measured: every entry pairs at ≥ 4.98:1, so the AA floor holds with margin
+ * on all twelve. The dev warning below is for a future hue that lands in the
+ * band where NEITHER candidate reaches 4.5:1 — possible in principle, since the
+ * fill constraint only bounds luminance to [0.119, 0.300].
+ */
+const LABEL_CANDIDATES = Object.freeze(["#FFFFFF", ink.fg]);
+function pickLabelColour(fill) {
+  let best = LABEL_CANDIDATES[0];
+  let bestRatio = 0;
+  for (const candidate of LABEL_CANDIDATES) {
+    const ratio = contrastRatio(candidate, fill) ?? 0;
+    if (ratio > bestRatio) {
+      bestRatio = ratio;
+      best = candidate;
+    }
+  }
+  if (bestRatio < WCAG_AA_NORMAL && process.env["NODE_ENV"] !== "production") {
+    // eslint-disable-next-line no-console
+    console.warn(`[@portnet/ui] chart fill ${fill} has no AA-compliant label colour ` + `(best ${bestRatio.toFixed(2)}:1). Draw the label outside the slice, or ` + `re-solve the fill's lightness.`);
+  }
+  return best;
+}
+
+/** Label colours, index-aligned with `chartCategorical`. */
+export const chartCategoricalOn = Object.freeze(chartCategorical.map(pickLabelColour));
+
+/** AA-safe colour for text drawn on top of `chartColor(index)`. Cycles identically. */
+export function chartColorOn(index) {
+  const total = chartCategoricalOn.length;
+  if (!Number.isFinite(index) || index < 0) {
+    return chartCategoricalOn[0];
+  }
+  return chartCategoricalOn[Math.floor(index) % total];
+}
+
+/**
+ * Non-data chart furniture — title, labels, canvas (capability gap G-54).
+ *
+ * ────────────────────────────────────────────────────────────────────────────────
+ * THIS IS A ROLE→TOKEN MAPPING, NOT A STORE OF VALUES, and the distinction is
+ * the justification. Every value below already exists in this library, and a
+ * module reading `ink.fgMuted` for its axis labels is already compliant with
+ * R-2.3. What no module can get right alone is WHICH token plays WHICH role:
+ * is a chart title an `h2` or an `h3`? are axis labels `xs` or `sm`? is the
+ * canvas `surface` or transparent?
+ *
+ * Left unanswered, each screen answers it again. Observed in
+ * `autorisation-admis-pour-conforme-fe` (Area 5): three bilan screens, five
+ * chart definitions, the same five-line block of title / label / canvas styling
+ * copied into each — agreeing only because they were copied from one another.
+ * The next module starts from a blank chart and picks `h2`, and nothing in code
+ * review can call that wrong, because the platform never said.
+ *
+ * So this is the answer, once: a chart title reads as a card title (`h3`,
+ * semibold, full-strength ink), its labels as hints (`xs`, muted ink), and its
+ * canvas is TRANSPARENT — the chart sits on whatever `Surface` holds it, and a
+ * hard-coded white canvas is exactly what breaks a chart in dark mode.
+ * ────────────────────────────────────────────────────────────────────────────────
+ *
+ * LIBRARY-AGNOSTIC BY CONSTRUCTION. Plain strings, no chart library imported,
+ * no option shape assumed: Highcharts, Recharts, Chart.js and a hand-written
+ * SVG all take these. A consumer maps them to its renderer's option names,
+ * which is a binding — and a binding holding no design values is not a
+ * duplication of this.
+ *
+ * FONT SIZES ARE STRINGS WITH UNITS, unlike `fontSize.*`, which are integers.
+ * Chart libraries pass their style objects to SVG attributes rather than to
+ * React's style prop, so they never get a unit appended for free — a bare `16`
+ * is silently ignored by some renderers and read as `16px` by others.
+ *
+ * WHAT THIS DOES NOT MAKE ACCESSIBLE. Nothing here supplies the text
+ * equivalent WCAG 1.1.1 requires of a chart, or the non-colour channel of
+ * 1.4.1. See the `ChartFigure` pattern, which carries the caption, and the note
+ * at the head of this file.
+ */
+export const chartChrome = Object.freeze({
+  /** Canvas fill. Transparent so the holding `Surface` shows through, light or dark. */
+  background: "transparent",
+  /** One family for every text in the chart — §02.2 UI stack. */
+  fontFamily: fontFamily.sans,
+  /** Chart title: reads as a card title (§02.2 `h3`). */
+  title: Object.freeze({
+    color: ink.fg,
+    fontSize: `${fontSize.h3}px`,
+    fontWeight: String(fontWeight.semibold)
+  }),
+  /** Axis labels, legend items, data labels drawn OUTSIDE a slice: hints. */
+  label: Object.freeze({
+    color: ink.fgMuted,
+    fontSize: `${fontSize.xs}px`
+  })
+});
+const chart = {
+  chartCategorical,
+  chartColor,
+  chartColorOn,
+  chartChrome,
+  CHART_CATEGORICAL_CORE
+};
+export default chart;
+//# sourceMappingURL=chart.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"chart.js","names":["contrastRatio","WCAG_AA_NORMAL","ink","fontFamily","fontSize","fontWeight","chartCategorical","Object","freeze","CHART_CATEGORICAL_CORE","chartColor","index","total","length","Number","isFinite","i","Math","floor","process","env","console","warn","LABEL_CANDIDATES","fg","pickLabelColour","fill","best","bestRatio","candidate","ratio","toFixed","chartCategoricalOn","map","chartColorOn","chartChrome","background","sans","title","color","h3","String","semibold","label","fgMuted","xs","chart"],"sources":["../../../../src/lib/v2/tokens/chart.ts"],"sourcesContent":["/**\r\n * Categorical chart palette — Portnet UI v2\r\n *\r\n * A cyclable sequence of visually distinct fills for CATEGORY series in\r\n * charts (pie slices, stacked bars, multi-series lines). Charter §02.\r\n *\r\n * ─────────────────────────────────────────────────────────────────────────────\r\n * WHY THIS BELONGS IN THE LIBRARY (capability gap G-37)\r\n *\r\n * R-2.3 MUST: \"aucune valeur magique : tout px/color/font-size passe par un\r\n * token\". R-AI.1 MUST repeats it for generated UI. Yet the library shipped only\r\n * SEMANTIC colour: brand, ink, surface, border, the four severities and the six\r\n * workflow statuses. None of them answers \"give me N colours that a reader can\r\n * tell apart\", so every charting screen wrote its own list of hex literals.\r\n *\r\n * Observed in `refonte-frontend` (Area 4): THIRTY-TWO literals across two\r\n * files — a 30-entry palette in `GraphiqueCamembert` (itself already\r\n * de-duplicated from two copies) plus two more in\r\n * `ChartBilanDPCIParDelegation`. The file carried a comment explaining, quite\r\n * correctly, why it could not be fixed locally: mapping categories onto the\r\n * SEMANTIC tones would make \"red\" mean *a category of measuring instrument*\r\n * rather than *an error*, which R-2.2 exists to prevent. So the module was\r\n * stuck between two MUST rules, and the only way out was here.\r\n *\r\n * >>> THE ARGUMENT FOR OWNING IT IS THE VERIFICATION, NOT THE STORAGE. Moving\r\n * >>> thirty hex codes from a module to a library would only relocate them. The\r\n * >>> reason they belong here is that a categorical palette carries three\r\n * >>> claims no host can check for itself, and that this repository already has\r\n * >>> the tooling for: each fill must clear the 3:1 non-text floor (WCAG\r\n * >>> 1.4.11 / R-C.3) against the surface it sits on, the entries must stay\r\n * >>> apart from each other, and they must stay apart under colour-vision\r\n * >>> deficiency — a pie chart encodes its data in hue alone, so a palette that\r\n * >>> collapses under deuteranopia loses the data, not just the styling. The\r\n * >>> module's 30 literals had NONE of the three verified. See\r\n * >>> __tests__/chart-palette.test.ts, which asserts all three. <<<\r\n * ─────────────────────────────────────────────────────────────────────────────\r\n *\r\n * HOW THESE VALUES WERE DERIVED\r\n *\r\n * Hue-balanced, then constrained — not picked by eye:\r\n *\r\n *   1. Twelve hues, the first eight evenly spaced around the wheel, so the\r\n *      sequence reads as intentional rather than arbitrary.\r\n *   2. Lightness solved numerically per entry so that relative luminance lands\r\n *      inside the window where a fill clears 3:1 against BOTH the light surface\r\n *      (#FFFFFF) and the dark-mode surface. That window is roughly\r\n *      L ∈ [0.119, 0.300] and it is why ONE array serves both themes — unlike\r\n *      `status`, which needs a `dark.status` override. Entries alternate\r\n *      between the two ends of the window, which adds a lightness difference to\r\n *      the hue difference between neighbours.\r\n *   3. Entries 9 to 12 were then chosen by maximising the minimum separation\r\n *      against the first eight, measured as the WORST of three distances:\r\n *      normal vision, deuteranopia and protanopia (Viénot simulation, CIE76).\r\n *\r\n * Measured properties (all pinned in the test):\r\n *   · every entry ≥ 3.06:1 on #FFFFFF and ≥ 3.37:1 on the dark surface;\r\n *   · minimum pairwise separation ≥ 12 ΔE under normal vision AND under both\r\n *     simulated dichromacies — the closest pair is entry 1 (red) against\r\n *     entry 3 (olive), at ~12.4.\r\n *\r\n * USE THE FIRST EIGHT WHERE YOU CAN. Entries 1-8 are the hue-balanced core;\r\n * 9-12 extend it for larger sets. Past twelve, `chartColor` CYCLES, and two\r\n * slices then share a colour — which is a defect in the chart, not in the\r\n * palette. A series with more than a dozen categories should aggregate its\r\n * tail into a single \"Autres\" slice: R-3.1 / R-3.2 cap what one screen may\r\n * show at once for the same reason.\r\n *\r\n * COLOUR IS NEVER THE ONLY CHANNEL (WCAG 1.4.1). This palette makes slices\r\n * distinguishable; it does not make a chart accessible. Every consumer still\r\n * owes a legend with text labels, and a text equivalent of the data — 1.1.1\r\n * for the chart as a whole.\r\n *\r\n * Usage — prefer the JS token in a chart library, since SVG presentation\r\n * attributes given a `var()` are not reliably resolved by every renderer:\r\n *\r\n *   import { chartColor } from \"@portnet/ui/tokens\";\r\n *   <Cell fill={chartColor(index)} />\r\n *\r\n * In CSS or `sx`, the same values are emitted as `--chart-1` … `--chart-12`\r\n * (see theme/cssVariables).\r\n *\r\n * ─────────────────────────────────────────────────────────────────────────────\r\n * TEXT *ON* A SLICE IS A SECOND CONTRAST PROBLEM — see `chartColorOn`.\r\n *\r\n * The 3:1 floor above covers the FILL against the page. A percentage printed\r\n * inside the slice is text on that fill, and owes 4.5:1 (WCAG 1.4.3). The\r\n * palette deliberately spans two lightness tiers, so no single label colour\r\n * works for all twelve: `refonte-frontend` printed `fill=\"white\"` on all six\r\n * of its pies, which was ~3:1 on half of them.\r\n * ─────────────────────────────────────────────────────────────────────────────\r\n */\r\nimport { contrastRatio, WCAG_AA_NORMAL } from \"../utils/contrast\";\r\nimport { ink } from \"./colors\";\r\nimport { fontFamily, fontSize, fontWeight } from \"./typography\";\r\n\r\n/**\r\n * The palette, in display order. Entries 1-8 (indices 0-7) are the\r\n * hue-balanced, CVD-verified core; 9-12 extend it.\r\n */\r\nexport const chartCategorical = Object.freeze([\r\n  \"#C92E1D\", // 1  red\r\n  \"#A89318\", // 2  amber / olive-gold\r\n  \"#3B7911\", // 3  olive green\r\n  \"#18A84B\", // 4  green\r\n  \"#127681\", // 5  teal\r\n  \"#7A8CEC\", // 6  periwinkle\r\n  \"#9B30E1\", // 7  violet\r\n  \"#E860B8\", // 8  pink\r\n  \"#119870\", // 9  jade\r\n  \"#B915B0\", // 10 magenta\r\n  \"#9A0DF9\", // 11 blue-violet\r\n  \"#965848\", // 12 brown\r\n] as const);\r\n\r\n/** Size of the hue-balanced core. Beyond it, separation is still verified but the sequence stops being evenly spaced. */\r\nexport const CHART_CATEGORICAL_CORE = 8;\r\n\r\n/**\r\n * Colour for the n-th category, cycling past the end of the palette.\r\n *\r\n * Non-finite or negative indices resolve to the first entry rather than\r\n * throwing: a chart is a read-only view, and a bad index should not blank a\r\n * page. In development an out-of-range index also warns, because CYCLING IS\r\n * SILENT — two slices sharing a colour looks like a design choice, not like the\r\n * data-loss it is.\r\n */\r\nexport function chartColor(index: number): string {\r\n  const total = chartCategorical.length;\r\n  if (!Number.isFinite(index) || index < 0) {\r\n    return chartCategorical[0] as string;\r\n  }\r\n  const i = Math.floor(index);\r\n  if (i >= total && process.env[\"NODE_ENV\"] !== \"production\") {\r\n    // eslint-disable-next-line no-console\r\n    console.warn(\r\n      `[@portnet/ui] chartColor(${i}): the palette holds ${total} colours, so ` +\r\n        `this category reuses the colour of category ${i % total}. Aggregate ` +\r\n        `the tail of the series instead (R-3.2).`\r\n    );\r\n  }\r\n  return chartCategorical[i % total] as string;\r\n}\r\n\r\n/**\r\n * Label colour for text drawn ON a slice — `#FFFFFF` or `ink.fg`, whichever\r\n * clears WCAG 1.4.3 AA against that fill.\r\n *\r\n * DERIVED, NOT TABULATED, and that is the whole point: a parallel array of\r\n * twelve label colours would be a second list to keep in step with the first,\r\n * and the failure mode of letting them drift is silent — unreadable text, at\r\n * the exact spot where the chart states its numbers. Computed here with this\r\n * library's own `contrastRatio`, so nudging a hue re-derives its label colour\r\n * in the same breath.\r\n *\r\n * Measured: every entry pairs at ≥ 4.98:1, so the AA floor holds with margin\r\n * on all twelve. The dev warning below is for a future hue that lands in the\r\n * band where NEITHER candidate reaches 4.5:1 — possible in principle, since the\r\n * fill constraint only bounds luminance to [0.119, 0.300].\r\n */\r\nconst LABEL_CANDIDATES: readonly string[] = Object.freeze([\"#FFFFFF\", ink.fg]);\r\n\r\nfunction pickLabelColour(fill: string): string {\r\n  let best = LABEL_CANDIDATES[0] as string;\r\n  let bestRatio = 0;\r\n  for (const candidate of LABEL_CANDIDATES) {\r\n    const ratio = contrastRatio(candidate, fill) ?? 0;\r\n    if (ratio > bestRatio) {\r\n      bestRatio = ratio;\r\n      best = candidate;\r\n    }\r\n  }\r\n  if (bestRatio < WCAG_AA_NORMAL && process.env[\"NODE_ENV\"] !== \"production\") {\r\n    // eslint-disable-next-line no-console\r\n    console.warn(\r\n      `[@portnet/ui] chart fill ${fill} has no AA-compliant label colour ` +\r\n        `(best ${bestRatio.toFixed(2)}:1). Draw the label outside the slice, or ` +\r\n        `re-solve the fill's lightness.`\r\n    );\r\n  }\r\n  return best;\r\n}\r\n\r\n/** Label colours, index-aligned with `chartCategorical`. */\r\nexport const chartCategoricalOn = Object.freeze(\r\n  chartCategorical.map(pickLabelColour)\r\n);\r\n\r\n/** AA-safe colour for text drawn on top of `chartColor(index)`. Cycles identically. */\r\nexport function chartColorOn(index: number): string {\r\n  const total = chartCategoricalOn.length;\r\n  if (!Number.isFinite(index) || index < 0) {\r\n    return chartCategoricalOn[0] as string;\r\n  }\r\n  return chartCategoricalOn[Math.floor(index) % total] as string;\r\n}\r\n\r\n/**\r\n * Non-data chart furniture — title, labels, canvas (capability gap G-54).\r\n *\r\n * ────────────────────────────────────────────────────────────────────────────────\r\n * THIS IS A ROLE→TOKEN MAPPING, NOT A STORE OF VALUES, and the distinction is\r\n * the justification. Every value below already exists in this library, and a\r\n * module reading `ink.fgMuted` for its axis labels is already compliant with\r\n * R-2.3. What no module can get right alone is WHICH token plays WHICH role:\r\n * is a chart title an `h2` or an `h3`? are axis labels `xs` or `sm`? is the\r\n * canvas `surface` or transparent?\r\n *\r\n * Left unanswered, each screen answers it again. Observed in\r\n * `autorisation-admis-pour-conforme-fe` (Area 5): three bilan screens, five\r\n * chart definitions, the same five-line block of title / label / canvas styling\r\n * copied into each — agreeing only because they were copied from one another.\r\n * The next module starts from a blank chart and picks `h2`, and nothing in code\r\n * review can call that wrong, because the platform never said.\r\n *\r\n * So this is the answer, once: a chart title reads as a card title (`h3`,\r\n * semibold, full-strength ink), its labels as hints (`xs`, muted ink), and its\r\n * canvas is TRANSPARENT — the chart sits on whatever `Surface` holds it, and a\r\n * hard-coded white canvas is exactly what breaks a chart in dark mode.\r\n * ────────────────────────────────────────────────────────────────────────────────\r\n *\r\n * LIBRARY-AGNOSTIC BY CONSTRUCTION. Plain strings, no chart library imported,\r\n * no option shape assumed: Highcharts, Recharts, Chart.js and a hand-written\r\n * SVG all take these. A consumer maps them to its renderer's option names,\r\n * which is a binding — and a binding holding no design values is not a\r\n * duplication of this.\r\n *\r\n * FONT SIZES ARE STRINGS WITH UNITS, unlike `fontSize.*`, which are integers.\r\n * Chart libraries pass their style objects to SVG attributes rather than to\r\n * React's style prop, so they never get a unit appended for free — a bare `16`\r\n * is silently ignored by some renderers and read as `16px` by others.\r\n *\r\n * WHAT THIS DOES NOT MAKE ACCESSIBLE. Nothing here supplies the text\r\n * equivalent WCAG 1.1.1 requires of a chart, or the non-colour channel of\r\n * 1.4.1. See the `ChartFigure` pattern, which carries the caption, and the note\r\n * at the head of this file.\r\n */\r\nexport const chartChrome = Object.freeze({\r\n  /** Canvas fill. Transparent so the holding `Surface` shows through, light or dark. */\r\n  background: \"transparent\",\r\n  /** One family for every text in the chart — §02.2 UI stack. */\r\n  fontFamily: fontFamily.sans,\r\n  /** Chart title: reads as a card title (§02.2 `h3`). */\r\n  title: Object.freeze({\r\n    color: ink.fg,\r\n    fontSize: `${fontSize.h3}px`,\r\n    fontWeight: String(fontWeight.semibold),\r\n  }),\r\n  /** Axis labels, legend items, data labels drawn OUTSIDE a slice: hints. */\r\n  label: Object.freeze({\r\n    color: ink.fgMuted,\r\n    fontSize: `${fontSize.xs}px`,\r\n  }),\r\n});\r\n\r\nconst chart = {\r\n  chartCategorical,\r\n  chartColor,\r\n  chartColorOn,\r\n  chartChrome,\r\n  CHART_CATEGORICAL_CORE,\r\n};\r\nexport default chart;\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;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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASA,aAAa,EAAEC,cAAc,QAAQ,mBAAmB;AACjE,SAASC,GAAG,QAAQ,UAAU;AAC9B,SAASC,UAAU,EAAEC,QAAQ,EAAEC,UAAU,QAAQ,cAAc;;AAE/D;AACA;AACA;AACA;AACA,OAAO,MAAMC,gBAAgB,GAAGC,MAAM,CAACC,MAAM,CAAC,CAC5C,SAAS;AAAE;AACX,SAAS;AAAE;AACX,SAAS;AAAE;AACX,SAAS;AAAE;AACX,SAAS;AAAE;AACX,SAAS;AAAE;AACX,SAAS;AAAE;AACX,SAAS;AAAE;AACX,SAAS;AAAE;AACX,SAAS;AAAE;AACX,SAAS;AAAE;AACX,SAAS,CAAE;AAAA,CACH,CAAC;;AAEX;AACA,OAAO,MAAMC,sBAAsB,GAAG,CAAC;;AAEvC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,UAAUA,CAACC,KAAa,EAAU;EAChD,MAAMC,KAAK,GAAGN,gBAAgB,CAACO,MAAM;EACrC,IAAI,CAACC,MAAM,CAACC,QAAQ,CAACJ,KAAK,CAAC,IAAIA,KAAK,GAAG,CAAC,EAAE;IACxC,OAAOL,gBAAgB,CAAC,CAAC,CAAC;EAC5B;EACA,MAAMU,CAAC,GAAGC,IAAI,CAACC,KAAK,CAACP,KAAK,CAAC;EAC3B,IAAIK,CAAC,IAAIJ,KAAK,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","ignoreList":[]}

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

@@ -15,7 +15,7 @@
  * 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 = {
+const _hues = {
   green: {
     soft: "#E7F7EF",
     fg: "#0A6E44"
@@ -48,7 +48,7 @@ var _hues = {
 };
 
 /* ---------- Brand --------------------------------------------------- */
-export var brand = {
+export const brand = {
   accent: "#232F66",
   // Portnet navy — AAA · ~12.6:1 on white
   accentHover: "#1A2452",
@@ -73,7 +73,7 @@ export var brand = {
  * (e.g. ink.fg) MUST be chosen before this token is used for text-
  * bearing buttons or alerts.
  */
-export var brandSecondary = {
+export const brandSecondary = {
   secondary: "#4FB8CF",
   secondaryFg: "#FFFFFF"
 };
@@ -96,7 +96,7 @@ export var brandSecondary = {
  *                             preserve the muted/subtle hierarchy.
  *   fgInverse white on dark surfaces (always paired with dark bgs).
  */
-export var ink = {
+export const ink = {
   fg: "#0F1525",
   // AAA · 17.40:1 on white
   fgMuted: "#474C5A",
@@ -107,7 +107,7 @@ export var ink = {
 };
 
 /* ---------- Surfaces ------------------------------------------------ */
-export var surface = {
+export const surface = {
   bg: "#F7F8FA",
   bgElev: "#FFFFFF",
   bgSubtle: "#F1F2F5",
@@ -116,7 +116,7 @@ export var surface = {
 };
 
 /* ---------- Borders ------------------------------------------------- */
-export var border = {
+export const border = {
   border: "#E4E6EB",
   borderStrong: "#9099AA" // WCAG 1.4.11 · ≥ 3:1 against white
 };
@@ -126,7 +126,7 @@ export var border = {
  * `<name>Soft` tinted background.
  * `<name>Fg`   darker text-grade (≥ 4.5:1 on white AND `<name>Soft`).
  */
-export var semantic = {
+export const semantic = {
   success: "#10A968",
   successSoft: _hues.green.soft,
   successFg: _hues.green.fg,
@@ -146,8 +146,8 @@ export var semantic = {
  * (R-2.2). New chips with custom colours require a charter amendment.
  * Charter §02.1 + V2_ARCHITECTURE.md §5.
  */
-export var status = {
-  "new": _hues.indigo,
+export const status = {
+  new: _hues.indigo,
   sent: _hues.blue,
   pending: _hues.amber,
   approved: _hues.green,
@@ -160,7 +160,7 @@ export var status = {
  * static-context fallbacks when CSS custom properties aren't
  * resolvable (server-rendered emails, raw inline style, etc.).
  */
-export var focus = {
+export const 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)"
@@ -170,7 +170,7 @@ export var focus = {
  * Applied when `[data-theme="dark"]` on `<html>`. OLED-optimised
  * backgrounds (RGESN R-9.5).
  */
-export var dark = {
+export const dark = {
   bg: "#0A0A0F",
   bgElev: "#111218",
   bgSubtle: "#181C26",
@@ -184,7 +184,7 @@ export var dark = {
   fgInverse: "#0A0A0F",
   accentSoft: "#1A2340",
   status: {
-    "new": {
+    new: {
       fg: "#7EA2FF"
     },
     sent: {
@@ -204,16 +204,16 @@ export var dark = {
     }
   }
 };
-var colors = {
-  brand: brand,
-  brandSecondary: brandSecondary,
-  ink: ink,
-  surface: surface,
-  border: border,
-  semantic: semantic,
-  status: status,
-  focus: focus,
-  dark: dark
+const colors = {
+  brand,
+  brandSecondary,
+  ink,
+  surface,
+  border,
+  semantic,
+  status,
+  focus,
+  dark
 };
 export default colors;
 //# sourceMappingURL=colors.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"colors.js","names":["_hues","green","soft","fg","amber","red","blue","indigo","slate","brand","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"],"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":"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","ignoreList":[]}
+{"version":3,"file":"colors.js","names":["_hues","green","soft","fg","amber","red","blue","indigo","slate","brand","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","new","sent","pending","approved","rejected","neutral","focus","ring","ringDanger","ringSuccess","dark","colors"],"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":"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","ignoreList":[]}

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

@@ -31,7 +31,7 @@
  */
 
 import breakpoints from "./breakpoints";
-export var density = {
+export const density = {
   spacious: {
     row: 56,
     input: 44,
@@ -57,7 +57,7 @@ export var density = {
     fontSize: 12
   }
 };
-export var layout = {
+export const layout = {
   sidebar: 248,
   sidebarMin: 64,
   // collapsed icons-only
@@ -69,6 +69,36 @@ export var layout = {
   tactileMin: 44,
   // WCAG 2.5.5 — hard floor for any tactile target
 
+  /**
+   * Gabarits de largeur de champ (G-H) — section « Form Field Width & Layout
+   * Standards » des Platform Mandatory UX Patterns.
+   *
+   * Ces quatre valeurs ÉTAIENT déjà la décision de design, mais elles vivaient
+   * en dur dans `Field.FIELD_MAX_WIDTH`, uniquement comme REPLIS de variables
+   * CSS que l'émetteur ne produisait pas. Le docblock de `Field` annonçait
+   * qu'elles étaient « exposées en variables CSS pour être revues sans toucher
+   * au code » : c'était faux, et c'est précisément la révision que ce même
+   * docblock demande à l'équipe design. Les valeurs sont donc promues ici, et
+   * `cssVariables` les émet.
+   *
+   * Le standard donne des FOURCHETTES (« ~80px to 120px max ») ; c'est le HAUT
+   * de chaque fourchette qui est retenu, ces largeurs étant des plafonds —
+   * prendre le bas tronquerait des valeurs qui tiennent dans la contrainte de
+   * caractères annoncée.
+   *
+   * `xl` n'y figure pas, et ce n'est pas un oubli : le gabarit XL vaut `100%`,
+   * une largeur relative et non une valeur de la grille. En faire un token en
+   * px inviterait à lui donner un plafond qu'il ne doit pas avoir.
+   */
+  fieldWidth: {
+    xs: 120,
+    // 1 a 5 caracteres   — code postal, CVV, age
+    s: 200,
+    // 6 a 15             — telephone, montant, date
+    m: 400,
+    // 16 a 60            — nom, courriel, ville
+    l: 600 // 61 a 256           — adresse, recherche complexe
+  },
   /**
    * Modal max-widths (§03 Modal). MUI-bounded dialogs aligned with
    * the charter spacing system.
@@ -83,16 +113,41 @@ export var layout = {
    * Drawer default width (§03 Drawer). Hosts may override per usage,
    * but should pull from this scale rather than invent new values.
    */
-  drawer: 560
+  drawer: 560,
+  /**
+   * Detail-page split (§07 R-L.7 + §Detail / Vertical Progress).
+   *
+   * The charter's detail skeleton is "content on the left, progression
+   * rail on the right", and the rail is a MUST on every consultation
+   * page. Hosts were writing that geometry by hand — `refonte-frontend`
+   * carried `flex: "1 1 560px"` / `flex: "0 1 300px"` / `minWidth: 260`
+   * twice (Area 4), which is three magic values per copy and no shared
+   * definition to keep the two screens agreeing.
+   *
+   *   mainMin  — flex-basis of the content column. Below the sum of the
+   *              two bases the rail wraps UNDER the content, which is how
+   *              the layout reflows without a media query (WCAG 1.4.10).
+   *   aside    — flex-basis of the rail (shrinkable, never grows).
+   *   asideMin — hard floor: a `VStepper` label stops being readable
+   *              below this, so the rail wraps instead of compressing.
+   *
+   * Consumed by `DetailSplit`; hosts should adopt that pattern rather
+   * than re-deriving these widths.
+   */
+  detail: {
+    mainMin: 560,
+    aside: 300,
+    asideMin: 260
+  }
 };
 
 /* Re-export the canonical breakpoint scale (now owned by ./breakpoints)
  * so existing consumers and the densityLayout default keep working. */
 export { breakpoints };
-var densityLayout = {
-  density: density,
-  layout: layout,
-  breakpoints: breakpoints
+const densityLayout = {
+  density,
+  layout,
+  breakpoints
 };
 export default densityLayout;
 //# sourceMappingURL=density.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"density.js","names":["breakpoints","density","spacious","row","input","btn","fontSize","comfortable","compact","ultraCompact","layout","sidebar","sidebarMin","topbar","contentMax","formMax","tactileMin","modal","sm","md","lg","xl","drawer","densityLayout"],"sources":["../../../../src/lib/v2/tokens/density.ts"],"sourcesContent":["/**\r\n * Density & layout tokens — Portnet UI v2\r\n * Aligned with Design System v1.0 §02.7 + §07.\r\n *\r\n * R-DG.11 — Density togglable, preference persisted.\r\n * R-7.4   — Tactile targets ≥ 44 × 44 px (WCAG 2.5.5).\r\n *\r\n * IMPORTANT: in any density tier, the visual button height\r\n * (`density.<tier>.btn`) may be below `layout.tactileMin` (44).\r\n * Components MUST extend the hit area to 44 via padding or a\r\n * pseudo-element (the FieldHelp / Button pattern), so R-7.4 is\r\n * satisfied without altering the visual size.\r\n * Icon-only buttons MUST set min-width/min-height to `tactileMin`.\r\n *\r\n * Tier picker (host opt-in via the `data-density` attribute):\r\n *   - default                    → comfortable\r\n *   - data-density=\"spacious\"    → spacious      (kiosk / TV / a11y-large)\r\n *   - data-density=\"compact\"     → compact       (dense workflows)\r\n *   - data-density=\"ultra-compact\" → ultraCompact (audit ledgers, dense lists)\r\n *\r\n *   The kebab-case attribute is the public contract; the camelCase\r\n *   key on this object is the JS-side identifier. Don't rename\r\n *   either without coordinating cssVariables.js.\r\n *\r\n * NOTE (Batch 1 — responsive certification): the breakpoint scale used\r\n * to be declared here. It now lives in the dedicated ./breakpoints\r\n * module (single source shared by the MUI theme, the mq() helpers and\r\n * the --bp-* CSS variables) and is re-exported below so that every\r\n * `import { breakpoints } from \"@portnet/ui/v2/tokens\"` and the\r\n * densityLayout default shape are unchanged.\r\n */\r\n\r\nimport breakpoints from \"./breakpoints\";\r\n\r\nexport const density = {\r\n  spacious:     { row: 56, input: 44, btn: 44, fontSize: 15 },\r\n  comfortable:  { row: 44, input: 40, btn: 40, fontSize: 14 },\r\n  compact:      { row: 36, input: 32, btn: 32, fontSize: 13 },\r\n  ultraCompact: { row: 28, input: 28, btn: 28, fontSize: 12 },\r\n};\r\n\r\nexport const layout = {\r\n  sidebar:    248,\r\n  sidebarMin:  64,    // collapsed icons-only\r\n  topbar:      56,\r\n  contentMax: 1440,   // wide table layouts\r\n  formMax:     720,   // mono-column form\r\n  tactileMin:  44,    // WCAG 2.5.5 — hard floor for any tactile target\r\n\r\n  /**\r\n   * Modal max-widths (§03 Modal). MUI-bounded dialogs aligned with\r\n   * the charter spacing system.\r\n   */\r\n  modal: {\r\n    sm:  440,\r\n    md:  640,\r\n    lg:  840,\r\n    xl: 1000,\r\n  },\r\n\r\n  /**\r\n   * Drawer default width (§03 Drawer). Hosts may override per usage,\r\n   * but should pull from this scale rather than invent new values.\r\n   */\r\n  drawer: 560,\r\n};\r\n\r\n/* Re-export the canonical breakpoint scale (now owned by ./breakpoints)\r\n * so existing consumers and the densityLayout default keep working. */\r\nexport { breakpoints };\r\n\r\nconst densityLayout = { density, layout, breakpoints };\r\nexport default densityLayout;\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;;AAEA,OAAOA,WAAW,MAAM,eAAe;AAEvC,OAAO,IAAMC,OAAO,GAAG;EACrBC,QAAQ,EAAM;IAAEC,GAAG,EAAE,EAAE;IAAEC,KAAK,EAAE,EAAE;IAAEC,GAAG,EAAE,EAAE;IAAEC,QAAQ,EAAE;EAAG,CAAC;EAC3DC,WAAW,EAAG;IAAEJ,GAAG,EAAE,EAAE;IAAEC,KAAK,EAAE,EAAE;IAAEC,GAAG,EAAE,EAAE;IAAEC,QAAQ,EAAE;EAAG,CAAC;EAC3DE,OAAO,EAAO;IAAEL,GAAG,EAAE,EAAE;IAAEC,KAAK,EAAE,EAAE;IAAEC,GAAG,EAAE,EAAE;IAAEC,QAAQ,EAAE;EAAG,CAAC;EAC3DG,YAAY,EAAE;IAAEN,GAAG,EAAE,EAAE;IAAEC,KAAK,EAAE,EAAE;IAAEC,GAAG,EAAE,EAAE;IAAEC,QAAQ,EAAE;EAAG;AAC5D,CAAC;AAED,OAAO,IAAMI,MAAM,GAAG;EACpBC,OAAO,EAAK,GAAG;EACfC,UAAU,EAAG,EAAE;EAAK;EACpBC,MAAM,EAAO,EAAE;EACfC,UAAU,EAAE,IAAI;EAAI;EACpBC,OAAO,EAAM,GAAG;EAAI;EACpBC,UAAU,EAAG,EAAE;EAAK;;EAEpB;AACF;AACA;AACA;EACEC,KAAK,EAAE;IACLC,EAAE,EAAG,GAAG;IACRC,EAAE,EAAG,GAAG;IACRC,EAAE,EAAG,GAAG;IACRC,EAAE,EAAE;EACN,CAAC;EAED;AACF;AACA;AACA;EACEC,MAAM,EAAE;AACV,CAAC;;AAED;AACA;AACA,SAAStB,WAAW;AAEpB,IAAMuB,aAAa,GAAG;EAAEtB,OAAO,EAAPA,OAAO;EAAES,MAAM,EAANA,MAAM;EAAEV,WAAW,EAAXA;AAAY,CAAC;AACtD,eAAeuB,aAAa","ignoreList":[]}
+{"version":3,"file":"density.js","names":["breakpoints","density","spacious","row","input","btn","fontSize","comfortable","compact","ultraCompact","layout","sidebar","sidebarMin","topbar","contentMax","formMax","tactileMin","fieldWidth","xs","s","m","l","modal","sm","md","lg","xl","drawer","detail","mainMin","aside","asideMin","densityLayout"],"sources":["../../../../src/lib/v2/tokens/density.ts"],"sourcesContent":["/**\r\n * Density & layout tokens — Portnet UI v2\r\n * Aligned with Design System v1.0 §02.7 + §07.\r\n *\r\n * R-DG.11 — Density togglable, preference persisted.\r\n * R-7.4   — Tactile targets ≥ 44 × 44 px (WCAG 2.5.5).\r\n *\r\n * IMPORTANT: in any density tier, the visual button height\r\n * (`density.<tier>.btn`) may be below `layout.tactileMin` (44).\r\n * Components MUST extend the hit area to 44 via padding or a\r\n * pseudo-element (the FieldHelp / Button pattern), so R-7.4 is\r\n * satisfied without altering the visual size.\r\n * Icon-only buttons MUST set min-width/min-height to `tactileMin`.\r\n *\r\n * Tier picker (host opt-in via the `data-density` attribute):\r\n *   - default                    → comfortable\r\n *   - data-density=\"spacious\"    → spacious      (kiosk / TV / a11y-large)\r\n *   - data-density=\"compact\"     → compact       (dense workflows)\r\n *   - data-density=\"ultra-compact\" → ultraCompact (audit ledgers, dense lists)\r\n *\r\n *   The kebab-case attribute is the public contract; the camelCase\r\n *   key on this object is the JS-side identifier. Don't rename\r\n *   either without coordinating cssVariables.js.\r\n *\r\n * NOTE (Batch 1 — responsive certification): the breakpoint scale used\r\n * to be declared here. It now lives in the dedicated ./breakpoints\r\n * module (single source shared by the MUI theme, the mq() helpers and\r\n * the --bp-* CSS variables) and is re-exported below so that every\r\n * `import { breakpoints } from \"@portnet/ui/v2/tokens\"` and the\r\n * densityLayout default shape are unchanged.\r\n */\r\n\r\nimport breakpoints from \"./breakpoints\";\r\n\r\nexport const density = {\r\n  spacious:     { row: 56, input: 44, btn: 44, fontSize: 15 },\r\n  comfortable:  { row: 44, input: 40, btn: 40, fontSize: 14 },\r\n  compact:      { row: 36, input: 32, btn: 32, fontSize: 13 },\r\n  ultraCompact: { row: 28, input: 28, btn: 28, fontSize: 12 },\r\n};\r\n\r\nexport const layout = {\r\n  sidebar:    248,\r\n  sidebarMin:  64,    // collapsed icons-only\r\n  topbar:      56,\r\n  contentMax: 1440,   // wide table layouts\r\n  formMax:     720,   // mono-column form\r\n  tactileMin:  44,    // WCAG 2.5.5 — hard floor for any tactile target\r\n\r\n  /**\r\n   * Gabarits de largeur de champ (G-H) — section « Form Field Width & Layout\r\n   * Standards » des Platform Mandatory UX Patterns.\r\n   *\r\n   * Ces quatre valeurs ÉTAIENT déjà la décision de design, mais elles vivaient\r\n   * en dur dans `Field.FIELD_MAX_WIDTH`, uniquement comme REPLIS de variables\r\n   * CSS que l'émetteur ne produisait pas. Le docblock de `Field` annonçait\r\n   * qu'elles étaient « exposées en variables CSS pour être revues sans toucher\r\n   * au code » : c'était faux, et c'est précisément la révision que ce même\r\n   * docblock demande à l'équipe design. Les valeurs sont donc promues ici, et\r\n   * `cssVariables` les émet.\r\n   *\r\n   * Le standard donne des FOURCHETTES (« ~80px to 120px max ») ; c'est le HAUT\r\n   * de chaque fourchette qui est retenu, ces largeurs étant des plafonds —\r\n   * prendre le bas tronquerait des valeurs qui tiennent dans la contrainte de\r\n   * caractères annoncée.\r\n   *\r\n   * `xl` n'y figure pas, et ce n'est pas un oubli : le gabarit XL vaut `100%`,\r\n   * une largeur relative et non une valeur de la grille. En faire un token en\r\n   * px inviterait à lui donner un plafond qu'il ne doit pas avoir.\r\n   */\r\n  fieldWidth: {\r\n    xs: 120,   // 1 a 5 caracteres   — code postal, CVV, age\r\n    s:  200,   // 6 a 15             — telephone, montant, date\r\n    m:  400,   // 16 a 60            — nom, courriel, ville\r\n    l:  600,   // 61 a 256           — adresse, recherche complexe\r\n  },\r\n\r\n  /**\r\n   * Modal max-widths (§03 Modal). MUI-bounded dialogs aligned with\r\n   * the charter spacing system.\r\n   */\r\n  modal: {\r\n    sm:  440,\r\n    md:  640,\r\n    lg:  840,\r\n    xl: 1000,\r\n  },\r\n\r\n  /**\r\n   * Drawer default width (§03 Drawer). Hosts may override per usage,\r\n   * but should pull from this scale rather than invent new values.\r\n   */\r\n  drawer: 560,\r\n\r\n  /**\r\n   * Detail-page split (§07 R-L.7 + §Detail / Vertical Progress).\r\n   *\r\n   * The charter's detail skeleton is \"content on the left, progression\r\n   * rail on the right\", and the rail is a MUST on every consultation\r\n   * page. Hosts were writing that geometry by hand — `refonte-frontend`\r\n   * carried `flex: \"1 1 560px\"` / `flex: \"0 1 300px\"` / `minWidth: 260`\r\n   * twice (Area 4), which is three magic values per copy and no shared\r\n   * definition to keep the two screens agreeing.\r\n   *\r\n   *   mainMin  — flex-basis of the content column. Below the sum of the\r\n   *              two bases the rail wraps UNDER the content, which is how\r\n   *              the layout reflows without a media query (WCAG 1.4.10).\r\n   *   aside    — flex-basis of the rail (shrinkable, never grows).\r\n   *   asideMin — hard floor: a `VStepper` label stops being readable\r\n   *              below this, so the rail wraps instead of compressing.\r\n   *\r\n   * Consumed by `DetailSplit`; hosts should adopt that pattern rather\r\n   * than re-deriving these widths.\r\n   */\r\n  detail: {\r\n    mainMin:  560,\r\n    aside:    300,\r\n    asideMin: 260,\r\n  },\r\n};\r\n\r\n/* Re-export the canonical breakpoint scale (now owned by ./breakpoints)\r\n * so existing consumers and the densityLayout default keep working. */\r\nexport { breakpoints };\r\n\r\nconst densityLayout = { density, layout, breakpoints };\r\nexport default densityLayout;\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;;AAEA,OAAOA,WAAW,MAAM,eAAe;AAEvC,OAAO,MAAMC,OAAO,GAAG;EACrBC,QAAQ,EAAM;IAAEC,GAAG,EAAE,EAAE;IAAEC,KAAK,EAAE,EAAE;IAAEC,GAAG,EAAE,EAAE;IAAEC,QAAQ,EAAE;EAAG,CAAC;EAC3DC,WAAW,EAAG;IAAEJ,GAAG,EAAE,EAAE;IAAEC,KAAK,EAAE,EAAE;IAAEC,GAAG,EAAE,EAAE;IAAEC,QAAQ,EAAE;EAAG,CAAC;EAC3DE,OAAO,EAAO;IAAEL,GAAG,EAAE,EAAE;IAAEC,KAAK,EAAE,EAAE;IAAEC,GAAG,EAAE,EAAE;IAAEC,QAAQ,EAAE;EAAG,CAAC;EAC3DG,YAAY,EAAE;IAAEN,GAAG,EAAE,EAAE;IAAEC,KAAK,EAAE,EAAE;IAAEC,GAAG,EAAE,EAAE;IAAEC,QAAQ,EAAE;EAAG;AAC5D,CAAC;AAED,OAAO,MAAMI,MAAM,GAAG;EACpBC,OAAO,EAAK,GAAG;EACfC,UAAU,EAAG,EAAE;EAAK;EACpBC,MAAM,EAAO,EAAE;EACfC,UAAU,EAAE,IAAI;EAAI;EACpBC,OAAO,EAAM,GAAG;EAAI;EACpBC,UAAU,EAAG,EAAE;EAAK;;EAEpB;AACF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;EACEC,UAAU,EAAE;IACVC,EAAE,EAAE,GAAG;IAAI;IACXC,CAAC,EAAG,GAAG;IAAI;IACXC,CAAC,EAAG,GAAG;IAAI;IACXC,CAAC,EAAG,GAAG,CAAI;EACb,CAAC;EAED;AACF;AACA;AACA;EACEC,KAAK,EAAE;IACLC,EAAE,EAAG,GAAG;IACRC,EAAE,EAAG,GAAG;IACRC,EAAE,EAAG,GAAG;IACRC,EAAE,EAAE;EACN,CAAC;EAED;AACF;AACA;AACA;EACEC,MAAM,EAAE,GAAG;EAEX;AACF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;EACEC,MAAM,EAAE;IACNC,OAAO,EAAG,GAAG;IACbC,KAAK,EAAK,GAAG;IACbC,QAAQ,EAAE;EACZ;AACF,CAAC;;AAED;AACA;AACA,SAAS/B,WAAW;AAEpB,MAAMgC,aAAa,GAAG;EAAE/B,OAAO;EAAES,MAAM;EAAEV;AAAY,CAAC;AACtD,eAAegC,aAAa","ignoreList":[]}