@medquantis/design-system 1.1.0 → 1.3.0

package/dist/tokens.json

@@ -319,6 +319,76 @@
     ],
     "description": "Info hue for interactive apps (ADR-0004)."
   },
+  "--mq-core-app-green": {
+    "value": "#1c7e3f",
+    "type": "color",
+    "path": [
+      "core",
+      "color",
+      "app-green"
+    ],
+    "description": "App categorical green, a data category in interactive apps only, never the success status (ADR-0008)."
+  },
+  "--mq-core-app-orange": {
+    "value": "#d78000",
+    "type": "color",
+    "path": [
+      "core",
+      "color",
+      "app-orange"
+    ],
+    "description": "App categorical orange, marks and fills only, 3.01:1 on white (ADR-0008)."
+  },
+  "--mq-core-app-orange-dark": {
+    "value": "#a35f00",
+    "type": "color",
+    "path": [
+      "core",
+      "color",
+      "app-orange-dark"
+    ],
+    "description": "Darker app categorical orange for text in that hue, 5.01:1 on white (ADR-0008)."
+  },
+  "--mq-core-app-vermillion": {
+    "value": "#cf2a00",
+    "type": "color",
+    "path": [
+      "core",
+      "color",
+      "app-vermillion"
+    ],
+    "description": "App categorical vermillion, a data category, never the danger status (ADR-0008)."
+  },
+  "--mq-core-app-blue": {
+    "value": "#3a8ff5",
+    "type": "color",
+    "path": [
+      "core",
+      "color",
+      "app-blue"
+    ],
+    "description": "App categorical blue, marks and fills only, 3.27:1 on white (ADR-0008)."
+  },
+  "--mq-core-app-violet": {
+    "value": "#5a2fbe",
+    "type": "color",
+    "path": [
+      "core",
+      "color",
+      "app-violet"
+    ],
+    "description": "App categorical violet (ADR-0008)."
+  },
+  "--mq-core-app-teal": {
+    "value": "#178a91",
+    "type": "color",
+    "path": [
+      "core",
+      "color",
+      "app-teal"
+    ],
+    "description": "App categorical teal, marks and fills only, 4.13:1 on white (ADR-0008)."
+  },
   "--mq-core-font-family-outfit": {
     "value": "Outfit, system-ui, -apple-system, 'Segoe UI', sans-serif",
     "type": "fontFamily",
@@ -654,6 +724,46 @@
     ],
     "description": "Navy-tinted elevation for navy panels (increment 07 component need, Report design system, 2026-10-08)."
   },
+  "--mq-core-shadow-none": {
+    "value": "0px 0px 0px 0px rgba(0, 0, 0, 0)",
+    "type": "shadow",
+    "path": [
+      "core",
+      "shadow",
+      "none"
+    ],
+    "description": "No shadow: a transparent layer of zero size, for a role that draws an edge in one theme only (owner ruling 14)."
+  },
+  "--mq-core-shadow-live": {
+    "value": "0px 0px 0px 3px rgba(46, 125, 50, 0.17)",
+    "type": "shadow",
+    "path": [
+      "core",
+      "shadow",
+      "live"
+    ],
+    "description": "A 3 px ring of the success green at 17 %, the halo of a live mark in apps (ADR-0004, #38 component need)."
+  },
+  "--mq-core-size-64": {
+    "value": "64px",
+    "type": "dimension",
+    "path": [
+      "core",
+      "size",
+      "64"
+    ],
+    "description": "App sidebar collapsed to an icon rail, 64 px (#38 component need: the Maintainer app shell)."
+  },
+  "--mq-core-size-248": {
+    "value": "248px",
+    "type": "dimension",
+    "path": [
+      "core",
+      "size",
+      "248"
+    ],
+    "description": "App sidebar width, 248 px (#38 component need: the Maintainer app shell)."
+  },
   "--mq-core-size-720": {
     "value": "720px",
     "type": "dimension",
@@ -938,6 +1048,16 @@
     ],
     "description": "Quieter pale accent fill."
   },
+  "--mq-accent-highlight": {
+    "value": "#0a2463",
+    "type": "color",
+    "path": [
+      "semantic",
+      "color",
+      "accent-highlight"
+    ],
+    "description": "Large highlighted title text; the accent itself in light, the light navy in dark (ADR-0007)."
+  },
   "--mq-on-accent": {
     "value": "#ffffff",
     "type": "color",
@@ -1210,6 +1330,17 @@
     ],
     "description": "Apps only: information, always with an icon or a word (ADR-0004)."
   },
+  "--mq-on-warning-fill": {
+    "value": "#1a1a1a",
+    "type": "color",
+    "path": [
+      "semantic",
+      "color",
+      "status",
+      "on-warning-fill"
+    ],
+    "description": "Text on the warning fill: ink in light (5.93:1), near-black in dark (6.18:1), where warm white on the fill is 2.67:1 (ADR-0007, amends owner ruling 5)."
+  },
   "--mq-warning-fill": {
     "value": "#d4850a",
     "type": "color",
@@ -1252,6 +1383,127 @@
     "description": "Retired name of the accent on navy; resolves to the on-navy accent (Owner ruling 2, 2026-10-09). Use --mq-on-navy-title for titles and rules, --mq-on-navy-accent for the one-off accent.",
     "deprecated": "Use --mq-on-navy-title for titles and rules, --mq-on-navy-accent for the one-off accent."
   },
+  "--mq-app-cat-green": {
+    "value": "#1c7e3f",
+    "type": "color",
+    "path": [
+      "semantic",
+      "color",
+      "app-cat",
+      "green"
+    ],
+    "description": "App categorical hue: a many-category app chart or a data category, never a status and never in documents; text in it meets 4.5:1 (ADR-0008)."
+  },
+  "--mq-app-cat-orange": {
+    "value": "#d78000",
+    "type": "color",
+    "path": [
+      "semantic",
+      "color",
+      "app-cat",
+      "orange"
+    ],
+    "description": "App categorical hue for marks and fills on the surface only (3.01:1); text in this hue reads app-cat-orange-text (ADR-0008)."
+  },
+  "--mq-app-cat-orange-text": {
+    "value": "#a35f00",
+    "type": "color",
+    "path": [
+      "semantic",
+      "color",
+      "app-cat",
+      "orange-text"
+    ],
+    "description": "Text in the app categorical orange (counts, labels), 5.01:1 on the surface (ADR-0008)."
+  },
+  "--mq-app-cat-vermillion": {
+    "value": "#cf2a00",
+    "type": "color",
+    "path": [
+      "semantic",
+      "color",
+      "app-cat",
+      "vermillion"
+    ],
+    "description": "App categorical hue: a data category, never the danger status, which stays for errors (ADR-0008)."
+  },
+  "--mq-app-cat-blue": {
+    "value": "#3a8ff5",
+    "type": "color",
+    "path": [
+      "semantic",
+      "color",
+      "app-cat",
+      "blue"
+    ],
+    "description": "App categorical hue for marks and fills on the surface only (3.27:1), never text (ADR-0008)."
+  },
+  "--mq-app-cat-violet": {
+    "value": "#5a2fbe",
+    "type": "color",
+    "path": [
+      "semantic",
+      "color",
+      "app-cat",
+      "violet"
+    ],
+    "description": "App categorical hue: marks, fills and text (ADR-0008)."
+  },
+  "--mq-app-cat-teal": {
+    "value": "#178a91",
+    "type": "color",
+    "path": [
+      "semantic",
+      "color",
+      "app-cat",
+      "teal"
+    ],
+    "description": "App categorical hue for marks and fills on the surface only (4.13:1), never text (ADR-0008)."
+  },
+  "--mq-change-added": {
+    "value": "#1c7e3f",
+    "type": "color",
+    "path": [
+      "semantic",
+      "color",
+      "change",
+      "added"
+    ],
+    "description": "Change type added, in apps only, always with its sign or its word: marks, fills and text (ADR-0008)."
+  },
+  "--mq-change-modified": {
+    "value": "#d78000",
+    "type": "color",
+    "path": [
+      "semantic",
+      "color",
+      "change",
+      "modified"
+    ],
+    "description": "Change type modified, in apps only, always with its word: marks and fills; its text reads change-modified-text (ADR-0008)."
+  },
+  "--mq-change-modified-text": {
+    "value": "#a35f00",
+    "type": "color",
+    "path": [
+      "semantic",
+      "color",
+      "change",
+      "modified-text"
+    ],
+    "description": "Text of the change type modified (counts, labels), in apps only (ADR-0008)."
+  },
+  "--mq-change-removed": {
+    "value": "#cf2a00",
+    "type": "color",
+    "path": [
+      "semantic",
+      "color",
+      "change",
+      "removed"
+    ],
+    "description": "Change type removed, in apps only, always with its sign or its word; a data category, never the danger status (ADR-0008)."
+  },
   "--mq-focus-ring-color": {
     "value": "#0a2463",
     "type": "color",
@@ -1464,6 +1716,26 @@
     ],
     "description": "Navy panels (increment 07 component need)."
   },
+  "--mq-shadow-edge": {
+    "value": "0px 0px 0px 0px rgba(0, 0, 0, 0)",
+    "type": "shadow",
+    "path": [
+      "semantic",
+      "shadow",
+      "edge"
+    ],
+    "description": "The navy panel's edge for a navy mark that has no panel shadow: the monogram, a navy KPI tile, a navy brand or app tile. None in light; on dark the panel's 1 px light-navy outline (owner rulings 13 and 14)."
+  },
+  "--mq-shadow-live": {
+    "value": "0px 0px 0px 3px rgba(46, 125, 50, 0.17)",
+    "type": "shadow",
+    "path": [
+      "semantic",
+      "shadow",
+      "live"
+    ],
+    "description": "Apps only: the halo around a live status dot, the row in force on a timeline; built on the success colour, so never in documents (ADR-0004)."
+  },
   "--mq-slide-width": {
     "value": "1280px",
     "type": "dimension",
@@ -1524,6 +1796,26 @@
     ],
     "description": "A4 sheet height (increment 07 component need)."
   },
+  "--mq-sidebar-width": {
+    "value": "248px",
+    "type": "dimension",
+    "path": [
+      "semantic",
+      "sidebar",
+      "width"
+    ],
+    "description": "Apps only: the expanded app sidebar."
+  },
+  "--mq-sidebar-rail-width": {
+    "value": "64px",
+    "type": "dimension",
+    "path": [
+      "semantic",
+      "sidebar",
+      "rail-width"
+    ],
+    "description": "Apps only: the app sidebar collapsed to an icon rail."
+  },
   "--mq-font-family-heading": {
     "value": "Outfit, system-ui, -apple-system, 'Segoe UI', sans-serif",
     "type": "fontFamily",

package/guidelines/README.md

@@ -8,19 +8,20 @@ The MedQuantis brand, writing, colour, type, layout, chart, data and accessibili
 | [brand.md](brand.md) | Name, tagline, legal line, wordmark, monogram, favicon, icons |
 | [voice.md](voice.md) | Tone, words to prefer and avoid, languages, terminology in French, German, Italian and English |
 | [writing.md](writing.md) | No em or en dash, titles, sentences and lists, French typography |
-| [colour.md](colour.md) | Semantic colour tokens, the medium split, navy panels, states by mark style, status colours in apps |
+| [colour.md](colour.md) | Semantic colour tokens, the medium split, navy panels, states by mark style, status colours in apps, the dark theme |
 | [typography.md](typography.md) | Families, weights, roles, sizes and line heights |
 | [layout.md](layout.md) | Media, report skeleton, widths and spacing, radius, components, tables, app patterns, print |
 | [charts.md](charts.md) | The ordered palette, highlight on grey, sequential and diverging use, marks, legends |
 | [data-patterns.md](data-patterns.md) | Numbers, amounts, dates, null versus zero, confidential and illustrative data |
 | [accessibility.md](accessibility.md) | WCAG 2.2 AA, contrast pairs, focus, targets, motion, structure |
+| [app-patterns.md](app-patterns.md) | Apps only: the app shell, and the review, decision and history patterns of dense internal tools |
 | [specialising.md](specialising.md) | Framework neutrality, the four rules, the promotion tests, the one-off log |
 
 The values themselves live in `tokens/` and reach these pages as `--mq-*` names; when a guideline and a token disagree, the token is right and the guideline is fixed. The generated specimen (`make specimen`) is the visual reference: when a rendering is in doubt, it decides.
 
 ## Where the legacy rules went
 
-These guidelines replace five earlier documents, which competed and partly contradicted each other: the platform brand document, the platform design-system document, the platform report design system of 2026-10-08, the platform style guide and the Paracel design document. Every rule found in them is listed below, rewritten, either as carried over (with the file that now holds it) or as dropped (with the reason). Rulings cited by number are the owner rulings of 2026-10-09 and 2026-10-10 recorded in the bootstrap plan; ADRs are in `docs/architecture/decisions/`.
+These guidelines replace five earlier documents, which competed and partly contradicted each other: the platform brand document, the platform design-system document, the platform report design system of 2026-10-08, the platform style guide and the Paracel design document. Every rule found in them is listed below, rewritten, either as carried over (with the file that now holds it) or as dropped (with the reason). Rulings cited by number are the owner rulings of 2026-10-09 and 2026-10-10 recorded in the bootstrap plan (1 to 11) and the later ones listed under "Rulings after the bootstrap" (12 on); ADRs are in `docs/architecture/decisions/`.
 
 | Source | Rules found | Carried over | Dropped |
 | :-- | --: | --: | --: |
@@ -308,3 +309,20 @@ These guidelines replace five earlier documents, which competed and partly contr
 | Copy-paste root block of custom properties | Paracel design document | Superseded by ADR-0002 and ADR-0006 (generated --mq- tokens) |
 | Machine-readable kit token section with the red accent | Paracel design document | Superseded by ADR-0006: the kit contract is generated |
 | Workflow stage colours with white text inside the bar segments | Paracel design document | Superseded by ADR-0004 (status hues for system status only) and the contrast pairs (white fails on the light series) |
+
+## Rulings after the bootstrap
+
+Owner rulings taken after the bootstrap plan, numbered on from ruling 11. Each is recorded in its decision record and applied in the guideline named.
+
+| Ruling | Date | Rule | Now in | Source |
+| :-- | :-- | :-- | :-- | :-- |
+| 12 | 2026-10-15 | MedQuantis has a dark theme: the semantic roles re-valued under `.dark` and shipped in `themes/dark.css`, for apps, documents and slides | [colour.md](colour.md) | ADR-0007, design pass of 2026-10-15 |
+| 13 | 2026-10-15 | No glow on dark: a navy panel on dark draws a 1 px light-navy outline (`--mq-shadow-panel`) | [colour.md](colour.md), [layout.md](layout.md) | ADR-0007, design pass of 2026-10-15 |
+| 14 | 2026-10-15 | The white wordmark on every dark surface, never the navy one; a navy tile on dark takes the panel gradient; the monogram takes the panel's outline | [brand.md](brand.md) | ADR-0007, design pass of 2026-10-15 |
+| 15 | 2026-10-15 | A document is light or dark, chosen by its author at build time, never from the reader's screen | [colour.md](colour.md) | ADR-0007, design pass of 2026-10-15 |
+| 16 | 2026-10-15 | Status and chart values on dark; text on the warning fill reads `--mq-on-warning-fill`, ink in light | [colour.md](colour.md) | ADR-0007, design pass of 2026-10-15 |
+| 17 | 2026-10-15 | A deck's classification sits at the right of the slide footer, before the number, in the deck's language: the label only, never the C0 to C3 code. Amends ruling 11 | [layout.md](layout.md), [brand.md](brand.md) | Design pass of 2026-10-15 (the ADR-0007 decision log), Plan-0003 |
+| 18 | 2026-10-17 | Accent text on the pale fills (the pale KPI value, the pale badge, the callout title) reads `--mq-accent-highlight`, the accent itself in light | [colour.md](colour.md) | ADR-0007 |
+| 19 | 2026-10-17 | On the dark panel start, `--mq-on-navy-accent` is `#b2c2ed` and `--mq-on-navy-discreet` white at 50 %, large text or non-text only; the light values are unchanged | [colour.md](colour.md) | ADR-0007 |
+| 20 | 2026-11-03 | Interactive apps may use the app categorical palette (six hues) and the change-type tokens built on it, light only; documents keep the ordered navy and blue-grey palette | [charts.md](charts.md), [colour.md](colour.md) | ADR-0008, issue #35 |
+| 21 | 2026-11-03 | A one-series chart stays navy; no series uses a status token; the vermillion is a data category, never `--mq-danger`; marks sit on the surface; text in a hue meets 4.5:1; never colour alone | [charts.md](charts.md), [accessibility.md](accessibility.md) | ADR-0008, issue #35 |

package/guidelines/accessibility.md

@@ -11,7 +11,8 @@ Colour never carries meaning on its own (WCAG 1.4.1):
 - documents show states by mark style (solid, ring, pale, outline, quiet, dashed, struck through) and a page that uses these marks gives their key once, in a legend or a note;
 - apps pair every status colour with an icon or a word;
 - charts label the marks that use series 3 or 4, or give them an outline, since those colours are below 3:1 on the page ([charts](charts.md));
-- a change in a figure is shown by its sign, not by a colour or an arrow alone.
+- a change in a figure is shown by its sign, not by a colour or an arrow alone;
+- in apps, a mark in the app categorical palette carries a direct label, a legend entry, a sign or a word, since two of its hues share their lightness ([charts](charts.md)).
 
 ## Contrast pairs