@medquantis/design-system 1.1.0 → 1.3.0

package/dist/llms.txt

@@ -8,32 +8,33 @@ The links below point at the exact release on the jsDelivr CDN; pin that version
 
 ## Guidelines
 
-- [Principles](https://cdn.jsdelivr.net/npm/@medquantis/design-system@1.1.0/guidelines/principles.md): The principles that decide the cases the other files do not cover
-- [Brand](https://cdn.jsdelivr.net/npm/@medquantis/design-system@1.1.0/guidelines/brand.md): Name, tagline, legal line, wordmark, monogram, favicon, icons
-- [Voice](https://cdn.jsdelivr.net/npm/@medquantis/design-system@1.1.0/guidelines/voice.md): Tone, words to prefer and avoid, languages, terminology in French, German, Italian and English
-- [Writing](https://cdn.jsdelivr.net/npm/@medquantis/design-system@1.1.0/guidelines/writing.md): No em or en dash, titles, sentences and lists, French typography
-- [Colour](https://cdn.jsdelivr.net/npm/@medquantis/design-system@1.1.0/guidelines/colour.md): Semantic colour tokens, the medium split, navy panels, states by mark style, status colours in apps
-- [Typography](https://cdn.jsdelivr.net/npm/@medquantis/design-system@1.1.0/guidelines/typography.md): Families, weights, roles, sizes and line heights
-- [Layout](https://cdn.jsdelivr.net/npm/@medquantis/design-system@1.1.0/guidelines/layout.md): Media, report skeleton, widths and spacing, radius, components, tables, app patterns, print
-- [Charts](https://cdn.jsdelivr.net/npm/@medquantis/design-system@1.1.0/guidelines/charts.md): The ordered palette, highlight on grey, sequential and diverging use, marks, legends
-- [Data patterns](https://cdn.jsdelivr.net/npm/@medquantis/design-system@1.1.0/guidelines/data-patterns.md): Numbers, amounts, dates, null versus zero, confidential and illustrative data
-- [Accessibility](https://cdn.jsdelivr.net/npm/@medquantis/design-system@1.1.0/guidelines/accessibility.md): WCAG 2.2 AA, contrast pairs, focus, targets, motion, structure
-- [Specialising the design system](https://cdn.jsdelivr.net/npm/@medquantis/design-system@1.1.0/guidelines/specialising.md): Framework neutrality, the four rules, the promotion tests, the one-off log
+- [Principles](https://cdn.jsdelivr.net/npm/@medquantis/design-system@1.3.0/guidelines/principles.md): The principles that decide the cases the other files do not cover
+- [Brand](https://cdn.jsdelivr.net/npm/@medquantis/design-system@1.3.0/guidelines/brand.md): Name, tagline, legal line, wordmark, monogram, favicon, icons
+- [Voice](https://cdn.jsdelivr.net/npm/@medquantis/design-system@1.3.0/guidelines/voice.md): Tone, words to prefer and avoid, languages, terminology in French, German, Italian and English
+- [Writing](https://cdn.jsdelivr.net/npm/@medquantis/design-system@1.3.0/guidelines/writing.md): No em or en dash, titles, sentences and lists, French typography
+- [Colour](https://cdn.jsdelivr.net/npm/@medquantis/design-system@1.3.0/guidelines/colour.md): Semantic colour tokens, the medium split, navy panels, states by mark style, status colours in apps, the dark theme
+- [Typography](https://cdn.jsdelivr.net/npm/@medquantis/design-system@1.3.0/guidelines/typography.md): Families, weights, roles, sizes and line heights
+- [Layout](https://cdn.jsdelivr.net/npm/@medquantis/design-system@1.3.0/guidelines/layout.md): Media, report skeleton, widths and spacing, radius, components, tables, app patterns, print
+- [Charts](https://cdn.jsdelivr.net/npm/@medquantis/design-system@1.3.0/guidelines/charts.md): The ordered palette, highlight on grey, sequential and diverging use, marks, legends
+- [Data patterns](https://cdn.jsdelivr.net/npm/@medquantis/design-system@1.3.0/guidelines/data-patterns.md): Numbers, amounts, dates, null versus zero, confidential and illustrative data
+- [Accessibility](https://cdn.jsdelivr.net/npm/@medquantis/design-system@1.3.0/guidelines/accessibility.md): WCAG 2.2 AA, contrast pairs, focus, targets, motion, structure
+- [App patterns](https://cdn.jsdelivr.net/npm/@medquantis/design-system@1.3.0/guidelines/app-patterns.md): Apps only: the app shell, and the review, decision and history patterns of dense internal tools
+- [Specialising the design system](https://cdn.jsdelivr.net/npm/@medquantis/design-system@1.3.0/guidelines/specialising.md): Framework neutrality, the four rules, the promotion tests, the one-off log
 
 ## Tokens and CSS
 
-- [tokens.css](https://cdn.jsdelivr.net/npm/@medquantis/design-system@1.1.0/dist/tokens.css): every token as a `--mq-*` custom property; load it first
-- [tokens.json](https://cdn.jsdelivr.net/npm/@medquantis/design-system@1.1.0/dist/tokens.json): every token with its resolved value and description
-- [tailwind.css](https://cdn.jsdelivr.net/npm/@medquantis/design-system@1.1.0/dist/tailwind.css): Tailwind 4 theme with 50 to 950 scales, for apps
-- [base.css](https://cdn.jsdelivr.net/npm/@medquantis/design-system@1.1.0/css/base.css): typography roles for documents
-- [components.css](https://cdn.jsdelivr.net/npm/@medquantis/design-system@1.1.0/css/components.css): the shared `mq-` document components
-- [slide.css](https://cdn.jsdelivr.net/npm/@medquantis/design-system@1.1.0/css/slide.css): the 1280 by 720 slide canvas
-- [print.css](https://cdn.jsdelivr.net/npm/@medquantis/design-system@1.1.0/css/print.css): A4 pages with exact colour printing
-- [app.css](https://cdn.jsdelivr.net/npm/@medquantis/design-system@1.1.0/css/app.css): status badges, for interactive apps only
-- [fonts.css](https://cdn.jsdelivr.net/npm/@medquantis/design-system@1.1.0/fonts/fonts.css): self-hosted Outfit, Newsreader and Geist Mono
+- [tokens.css](https://cdn.jsdelivr.net/npm/@medquantis/design-system@1.3.0/dist/tokens.css): every token as a `--mq-*` custom property; load it first
+- [tokens.json](https://cdn.jsdelivr.net/npm/@medquantis/design-system@1.3.0/dist/tokens.json): every token with its resolved value and description
+- [tailwind.css](https://cdn.jsdelivr.net/npm/@medquantis/design-system@1.3.0/dist/tailwind.css): Tailwind 4 theme with 50 to 950 scales, for apps
+- [base.css](https://cdn.jsdelivr.net/npm/@medquantis/design-system@1.3.0/css/base.css): typography roles for documents
+- [components.css](https://cdn.jsdelivr.net/npm/@medquantis/design-system@1.3.0/css/components.css): the shared `mq-` document components
+- [slide.css](https://cdn.jsdelivr.net/npm/@medquantis/design-system@1.3.0/css/slide.css): the 1280 by 720 slide canvas
+- [print.css](https://cdn.jsdelivr.net/npm/@medquantis/design-system@1.3.0/css/print.css): A4 pages with exact colour printing
+- [app.css](https://cdn.jsdelivr.net/npm/@medquantis/design-system@1.3.0/css/app.css): status badges, for interactive apps only
+- [fonts.css](https://cdn.jsdelivr.net/npm/@medquantis/design-system@1.3.0/fonts/fonts.css): self-hosted Outfit, Newsreader and Geist Mono
 
 ## Optional
 
-- [llms-full.txt](https://cdn.jsdelivr.net/npm/@medquantis/design-system@1.1.0/dist/llms-full.txt): every guideline in full and every token with its value
-- [kit-contract.css](https://cdn.jsdelivr.net/npm/@medquantis/design-system@1.1.0/dist/kit-contract.css): unprefixed names for homemade-claude-kit renderers only, never loaded in an app
-- [Guidelines index](https://cdn.jsdelivr.net/npm/@medquantis/design-system@1.1.0/guidelines/README.md): the file list and where each legacy rule went
+- [llms-full.txt](https://cdn.jsdelivr.net/npm/@medquantis/design-system@1.3.0/dist/llms-full.txt): every guideline in full and every token with its value
+- [kit-contract.css](https://cdn.jsdelivr.net/npm/@medquantis/design-system@1.3.0/dist/kit-contract.css): unprefixed names for homemade-claude-kit renderers only, never loaded in an app
+- [Guidelines index](https://cdn.jsdelivr.net/npm/@medquantis/design-system@1.3.0/guidelines/README.md): the file list and where each legacy rule went

package/dist/tailwind.css

@@ -90,6 +90,7 @@
   --color-accent-hover: var(--mq-accent-hover);
   --color-accent-pale: var(--mq-accent-pale);
   --color-accent-pale-2: var(--mq-accent-pale-2);
+  --color-accent-highlight: var(--mq-accent-highlight);
   --color-on-accent: var(--mq-on-accent);
   --color-ink: var(--mq-ink);
   --color-muted: var(--mq-muted);
@@ -114,4 +115,15 @@
   --color-on-navy-discreet: var(--mq-on-navy-discreet);
   --color-warning-fill: var(--mq-warning-fill);
   --color-warning-tint: var(--mq-warning-tint);
+  --color-app-cat-green: var(--mq-app-cat-green);
+  --color-app-cat-orange: var(--mq-app-cat-orange);
+  --color-app-cat-orange-text: var(--mq-app-cat-orange-text);
+  --color-app-cat-vermillion: var(--mq-app-cat-vermillion);
+  --color-app-cat-blue: var(--mq-app-cat-blue);
+  --color-app-cat-violet: var(--mq-app-cat-violet);
+  --color-app-cat-teal: var(--mq-app-cat-teal);
+  --color-change-added: var(--mq-change-added);
+  --color-change-modified: var(--mq-change-modified);
+  --color-change-modified-text: var(--mq-change-modified-text);
+  --color-change-removed: var(--mq-change-removed);
 }

package/dist/themes/dark.css

@@ -0,0 +1,50 @@
+/*! @medquantis/design-system | © 2026 MedQuantis SA | MIT License, see LICENSE */
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+.dark {
+  --mq-chart-series-1: #9fb3e8; /** Series 1 on dark, the lightest first: 8.71:1 on the canvas (ADR-0007). */
+  --mq-chart-series-2: #6f88c9; /** Series 2 on dark: 5.22:1 on the canvas (ADR-0007). */
+  --mq-chart-series-3: #5d6f91; /** Series 3 on dark: 3.58:1 on the canvas (ADR-0007). */
+  --mq-chart-series-4: #3a4560; /** Series 4 on dark, context bars: 1.90:1 on the canvas (ADR-0007). */
+  --mq-chart-rest: #232b3d; /** Remainder fill on dark, drawn with a series 4 outline: 1.28:1 on the canvas (ADR-0007). */
+  --mq-chart-axis: #6b7385; /** Axis lines and ticks on dark (non-text): 3.81:1 on the canvas (ADR-0007). */
+  --mq-chart-baseline: rgba(255, 255, 255, 0.1); /** Gridlines and baselines on dark, white at 10 % (decorative, ADR-0007). */
+  --mq-accent: #6f88c9; /** The lifted navy, the accent on dark: 5.22:1 on the canvas, 4.63:1 on the surface (ADR-0007). */
+  --mq-accent-hover: #8aa0d6; /** Hover state of accent-coloured controls on dark, 6.98:1 on the canvas (ADR-0007). */
+  --mq-accent-pale: rgba(111, 136, 201, 0.18); /** The lifted navy at 18 % for a highlighted row, tag or state (ADR-0007). */
+  --mq-accent-pale-2: rgba(111, 136, 201, 0.1); /** The lifted navy at 10 %, the quieter fill (ADR-0007). */
+  --mq-accent-highlight: #9fb3e8; /** The light navy for large highlighted title text: 8.71:1 on the canvas, 7.73:1 on the surface (ADR-0007). */
+  --mq-on-accent: #11161f; /** Near-black on the lifted accent, 5.22:1; white on it is 3.48:1 and is never used (ADR-0007). */
+  --mq-ink: #f5f4f1; /** Warm white, primary text: 16.48:1 on the canvas, 14.62:1 on the surface (ADR-0007). */
+  --mq-muted: #c3cbdc; /** Secondary text: 11.13:1 on the canvas, 9.88:1 on the surface (ADR-0007). */
+  --mq-tertiary: #8f98aa; /** Tertiary text, captions and footers: 6.25:1 on the canvas, 5.54:1 on the surface (ADR-0007). */
+  --mq-decoration: #6b7385; /** Non-text decoration only, never text: 3.81:1 on the canvas, 3.38:1 on the surface (ADR-0007). */
+  --mq-canvas: #11161f; /** A near-black with a navy cast, the background of every dark page (ADR-0007). */
+  --mq-surface: #1a2131; /** Cards and panels on a dark page (ADR-0007). */
+  --mq-surface-alt: #141a26; /** Recessed surface on dark: table headers, grouped areas (ADR-0007). */
+  --mq-desk: #0b0f16; /** On screen only, around a dark page preview (ADR-0007). */
+  --mq-border: rgba(255, 255, 255, 0.14); /** Borders and dividers on dark, white at 14 % (decorative, ADR-0007). */
+  --mq-border-light: rgba(255, 255, 255, 0.1); /** Hairlines and card borders on dark, white at 10 % (decorative, ADR-0007). */
+  --mq-border-strong: #8795b3; /** Outline of outlined and dashed state marks on dark: 6.03:1 on the canvas, 5.35:1 on the surface (ADR-0007). */
+  --mq-panel-start: #2f4c8f; /** Light end of the navy panel gradient on dark, white 8.23:1 on it (ADR-0007). */
+  --mq-panel-end: #0f2a5e; /** Dark end of the navy panel gradient on dark (ADR-0007). */
+  --mq-on-navy-accent: #b2c2ed; /** The one-off accent on the dark navy panel, 4.64:1 on its light end (owner ruling of 2026-10-17, ADR-0007). */
+  --mq-on-navy-discreet: rgba(255, 255, 255, 0.5); /** Discreet numbers on the dark navy panel, 3.37:1 on its light end, so large text or non-text only (owner ruling of 2026-10-17, ADR-0007). */
+  --mq-success: #6fbf73; /** Apps only: success on dark, 8.09:1 on the canvas (ADR-0007, ADR-0004). */
+  --mq-warning: #e0a040; /** Apps only: warning text, icons and borders on dark, 8.00:1 on the canvas (ADR-0007, ADR-0004). */
+  --mq-danger: #ff6b6b; /** Apps only: errors and destructive actions on dark, 6.53:1 on the canvas (ADR-0007, ADR-0004). */
+  --mq-info: #64a8f0; /** Apps only: information on dark, 7.25:1 on the canvas (ADR-0007, ADR-0004). */
+  --mq-on-warning-fill: #11161f; /** Near-black on the warning fill, 6.18:1; warm white on it is 2.67:1 (ADR-0007). */
+  --mq-warning-fill: #d4850a; /** The warning fill, unchanged on dark (ADR-0007). */
+  --mq-warning-tint: rgba(212, 133, 10, 0.16); /** The warning fill at 16 % behind ink text, 11.63:1 on the surface (ADR-0007). */
+  --mq-dim: #8f98aa; /** Retired name of the old tertiary grey; resolves to tertiary on dark too (ADR-0007). */
+  --mq-accent-on-dark: #b2c2ed; /** Retired name of the accent on navy; resolves to the on-navy accent on dark too (owner ruling of 2026-10-17, ADR-0007). */
+  --mq-focus-ring-color: #9fb3e8; /** Focus ring on dark backgrounds, the light navy: 8.71:1 on the canvas (ADR-0007). */
+  --mq-shadow-small: 0px 1px 2px 0px rgba(0, 0, 0, 0.4); /** Cards on dark: black at 40 %, since the light 5 % shadow does not show on the dark canvas (ADR-0007, owner approval of 2026-10-17). */
+  --mq-shadow-medium: 0px 3px 12px 0px rgba(0, 0, 0, 0.5); /** A slide or page previewed on the dark desk: black at 50 % (ADR-0007, owner approval of 2026-10-17). */
+  --mq-shadow-panel: 0px 0px 0px 1px rgba(159, 179, 232, 0.35); /** Navy panels on dark: a 1 px light-navy outline, no glow (ADR-0007, owner 2026-10-15). */
+  --mq-shadow-edge: 0px 0px 0px 1px rgba(159, 179, 232, 0.35); /** On dark, the panel's 1 px light-navy outline around a navy KPI tile, a navy brand tile and the monogram, whose navy square is 1.11:1 on the dark surface (owner rulings 13 and 14, ADR-0007). */
+  --mq-shadow-live: 0px 0px 0px 3px rgba(111, 191, 115, 0.17); /** The live halo on dark: a 3 px ring of the dark success green at 17 % (ADR-0004, ADR-0007). */
+}

package/dist/themes/dark.json

@@ -0,0 +1,446 @@
+{
+  "--mq-chart-series-1": {
+    "value": "#9fb3e8",
+    "type": "color",
+    "path": [
+      "semantic",
+      "chart",
+      "series",
+      "1"
+    ],
+    "description": "Series 1 on dark, the lightest first: 8.71:1 on the canvas (ADR-0007)."
+  },
+  "--mq-chart-series-2": {
+    "value": "#6f88c9",
+    "type": "color",
+    "path": [
+      "semantic",
+      "chart",
+      "series",
+      "2"
+    ],
+    "description": "Series 2 on dark: 5.22:1 on the canvas (ADR-0007)."
+  },
+  "--mq-chart-series-3": {
+    "value": "#5d6f91",
+    "type": "color",
+    "path": [
+      "semantic",
+      "chart",
+      "series",
+      "3"
+    ],
+    "description": "Series 3 on dark: 3.58:1 on the canvas (ADR-0007)."
+  },
+  "--mq-chart-series-4": {
+    "value": "#3a4560",
+    "type": "color",
+    "path": [
+      "semantic",
+      "chart",
+      "series",
+      "4"
+    ],
+    "description": "Series 4 on dark, context bars: 1.90:1 on the canvas (ADR-0007)."
+  },
+  "--mq-chart-rest": {
+    "value": "#232b3d",
+    "type": "color",
+    "path": [
+      "semantic",
+      "chart",
+      "rest"
+    ],
+    "description": "Remainder fill on dark, drawn with a series 4 outline: 1.28:1 on the canvas (ADR-0007)."
+  },
+  "--mq-chart-axis": {
+    "value": "#6b7385",
+    "type": "color",
+    "path": [
+      "semantic",
+      "chart",
+      "axis"
+    ],
+    "description": "Axis lines and ticks on dark (non-text): 3.81:1 on the canvas (ADR-0007)."
+  },
+  "--mq-chart-baseline": {
+    "value": "rgba(255, 255, 255, 0.1)",
+    "type": "color",
+    "path": [
+      "semantic",
+      "chart",
+      "baseline"
+    ],
+    "description": "Gridlines and baselines on dark, white at 10 % (decorative, ADR-0007)."
+  },
+  "--mq-accent": {
+    "value": "#6f88c9",
+    "type": "color",
+    "path": [
+      "semantic",
+      "color",
+      "accent"
+    ],
+    "description": "The lifted navy, the accent on dark: 5.22:1 on the canvas, 4.63:1 on the surface (ADR-0007)."
+  },
+  "--mq-accent-hover": {
+    "value": "#8aa0d6",
+    "type": "color",
+    "path": [
+      "semantic",
+      "color",
+      "accent-hover"
+    ],
+    "description": "Hover state of accent-coloured controls on dark, 6.98:1 on the canvas (ADR-0007)."
+  },
+  "--mq-accent-pale": {
+    "value": "rgba(111, 136, 201, 0.18)",
+    "type": "color",
+    "path": [
+      "semantic",
+      "color",
+      "accent-pale"
+    ],
+    "description": "The lifted navy at 18 % for a highlighted row, tag or state (ADR-0007)."
+  },
+  "--mq-accent-pale-2": {
+    "value": "rgba(111, 136, 201, 0.1)",
+    "type": "color",
+    "path": [
+      "semantic",
+      "color",
+      "accent-pale-2"
+    ],
+    "description": "The lifted navy at 10 %, the quieter fill (ADR-0007)."
+  },
+  "--mq-accent-highlight": {
+    "value": "#9fb3e8",
+    "type": "color",
+    "path": [
+      "semantic",
+      "color",
+      "accent-highlight"
+    ],
+    "description": "The light navy for large highlighted title text: 8.71:1 on the canvas, 7.73:1 on the surface (ADR-0007)."
+  },
+  "--mq-on-accent": {
+    "value": "#11161f",
+    "type": "color",
+    "path": [
+      "semantic",
+      "color",
+      "on-accent"
+    ],
+    "description": "Near-black on the lifted accent, 5.22:1; white on it is 3.48:1 and is never used (ADR-0007)."
+  },
+  "--mq-ink": {
+    "value": "#f5f4f1",
+    "type": "color",
+    "path": [
+      "semantic",
+      "color",
+      "ink"
+    ],
+    "description": "Warm white, primary text: 16.48:1 on the canvas, 14.62:1 on the surface (ADR-0007)."
+  },
+  "--mq-muted": {
+    "value": "#c3cbdc",
+    "type": "color",
+    "path": [
+      "semantic",
+      "color",
+      "muted"
+    ],
+    "description": "Secondary text: 11.13:1 on the canvas, 9.88:1 on the surface (ADR-0007)."
+  },
+  "--mq-tertiary": {
+    "value": "#8f98aa",
+    "type": "color",
+    "path": [
+      "semantic",
+      "color",
+      "tertiary"
+    ],
+    "description": "Tertiary text, captions and footers: 6.25:1 on the canvas, 5.54:1 on the surface (ADR-0007)."
+  },
+  "--mq-decoration": {
+    "value": "#6b7385",
+    "type": "color",
+    "path": [
+      "semantic",
+      "color",
+      "decoration"
+    ],
+    "description": "Non-text decoration only, never text: 3.81:1 on the canvas, 3.38:1 on the surface (ADR-0007)."
+  },
+  "--mq-canvas": {
+    "value": "#11161f",
+    "type": "color",
+    "path": [
+      "semantic",
+      "color",
+      "canvas"
+    ],
+    "description": "A near-black with a navy cast, the background of every dark page (ADR-0007)."
+  },
+  "--mq-surface": {
+    "value": "#1a2131",
+    "type": "color",
+    "path": [
+      "semantic",
+      "color",
+      "surface"
+    ],
+    "description": "Cards and panels on a dark page (ADR-0007)."
+  },
+  "--mq-surface-alt": {
+    "value": "#141a26",
+    "type": "color",
+    "path": [
+      "semantic",
+      "color",
+      "surface-alt"
+    ],
+    "description": "Recessed surface on dark: table headers, grouped areas (ADR-0007)."
+  },
+  "--mq-desk": {
+    "value": "#0b0f16",
+    "type": "color",
+    "path": [
+      "semantic",
+      "color",
+      "desk"
+    ],
+    "description": "On screen only, around a dark page preview (ADR-0007)."
+  },
+  "--mq-border": {
+    "value": "rgba(255, 255, 255, 0.14)",
+    "type": "color",
+    "path": [
+      "semantic",
+      "color",
+      "border"
+    ],
+    "description": "Borders and dividers on dark, white at 14 % (decorative, ADR-0007)."
+  },
+  "--mq-border-light": {
+    "value": "rgba(255, 255, 255, 0.1)",
+    "type": "color",
+    "path": [
+      "semantic",
+      "color",
+      "border-light"
+    ],
+    "description": "Hairlines and card borders on dark, white at 10 % (decorative, ADR-0007)."
+  },
+  "--mq-border-strong": {
+    "value": "#8795b3",
+    "type": "color",
+    "path": [
+      "semantic",
+      "color",
+      "border-strong"
+    ],
+    "description": "Outline of outlined and dashed state marks on dark: 6.03:1 on the canvas, 5.35:1 on the surface (ADR-0007)."
+  },
+  "--mq-panel-start": {
+    "value": "#2f4c8f",
+    "type": "color",
+    "path": [
+      "semantic",
+      "color",
+      "panel-start"
+    ],
+    "description": "Light end of the navy panel gradient on dark, white 8.23:1 on it (ADR-0007)."
+  },
+  "--mq-panel-end": {
+    "value": "#0f2a5e",
+    "type": "color",
+    "path": [
+      "semantic",
+      "color",
+      "panel-end"
+    ],
+    "description": "Dark end of the navy panel gradient on dark (ADR-0007)."
+  },
+  "--mq-on-navy-accent": {
+    "value": "#b2c2ed",
+    "type": "color",
+    "path": [
+      "semantic",
+      "color",
+      "on-navy",
+      "accent"
+    ],
+    "description": "The one-off accent on the dark navy panel, 4.64:1 on its light end (owner ruling of 2026-10-17, ADR-0007)."
+  },
+  "--mq-on-navy-discreet": {
+    "value": "rgba(255, 255, 255, 0.5)",
+    "type": "color",
+    "path": [
+      "semantic",
+      "color",
+      "on-navy",
+      "discreet"
+    ],
+    "description": "Discreet numbers on the dark navy panel, 3.37:1 on its light end, so large text or non-text only (owner ruling of 2026-10-17, ADR-0007)."
+  },
+  "--mq-success": {
+    "value": "#6fbf73",
+    "type": "color",
+    "path": [
+      "semantic",
+      "color",
+      "status",
+      "success"
+    ],
+    "description": "Apps only: success on dark, 8.09:1 on the canvas (ADR-0007, ADR-0004)."
+  },
+  "--mq-warning": {
+    "value": "#e0a040",
+    "type": "color",
+    "path": [
+      "semantic",
+      "color",
+      "status",
+      "warning"
+    ],
+    "description": "Apps only: warning text, icons and borders on dark, 8.00:1 on the canvas (ADR-0007, ADR-0004)."
+  },
+  "--mq-danger": {
+    "value": "#ff6b6b",
+    "type": "color",
+    "path": [
+      "semantic",
+      "color",
+      "status",
+      "danger"
+    ],
+    "description": "Apps only: errors and destructive actions on dark, 6.53:1 on the canvas (ADR-0007, ADR-0004)."
+  },
+  "--mq-info": {
+    "value": "#64a8f0",
+    "type": "color",
+    "path": [
+      "semantic",
+      "color",
+      "status",
+      "info"
+    ],
+    "description": "Apps only: information on dark, 7.25:1 on the canvas (ADR-0007, ADR-0004)."
+  },
+  "--mq-on-warning-fill": {
+    "value": "#11161f",
+    "type": "color",
+    "path": [
+      "semantic",
+      "color",
+      "status",
+      "on-warning-fill"
+    ],
+    "description": "Near-black on the warning fill, 6.18:1; warm white on it is 2.67:1 (ADR-0007)."
+  },
+  "--mq-warning-fill": {
+    "value": "#d4850a",
+    "type": "color",
+    "path": [
+      "semantic",
+      "color",
+      "warning-fill"
+    ],
+    "description": "The warning fill, unchanged on dark (ADR-0007)."
+  },
+  "--mq-warning-tint": {
+    "value": "rgba(212, 133, 10, 0.16)",
+    "type": "color",
+    "path": [
+      "semantic",
+      "color",
+      "warning-tint"
+    ],
+    "description": "The warning fill at 16 % behind ink text, 11.63:1 on the surface (ADR-0007)."
+  },
+  "--mq-dim": {
+    "value": "#8f98aa",
+    "type": "color",
+    "path": [
+      "semantic",
+      "color",
+      "dim"
+    ],
+    "description": "Retired name of the old tertiary grey; resolves to tertiary on dark too (ADR-0007).",
+    "deprecated": "Use --mq-tertiary for text or --mq-decoration for non-text decoration."
+  },
+  "--mq-accent-on-dark": {
+    "value": "#b2c2ed",
+    "type": "color",
+    "path": [
+      "semantic",
+      "color",
+      "accent-on-dark"
+    ],
+    "description": "Retired name of the accent on navy; resolves to the on-navy accent on dark too (owner ruling of 2026-10-17, ADR-0007).",
+    "deprecated": "Use --mq-on-navy-title for titles and rules, --mq-on-navy-accent for the one-off accent."
+  },
+  "--mq-focus-ring-color": {
+    "value": "#9fb3e8",
+    "type": "color",
+    "path": [
+      "semantic",
+      "focus",
+      "ring",
+      "color"
+    ],
+    "description": "Focus ring on dark backgrounds, the light navy: 8.71:1 on the canvas (ADR-0007)."
+  },
+  "--mq-shadow-small": {
+    "value": "0px 1px 2px 0px rgba(0, 0, 0, 0.4)",
+    "type": "shadow",
+    "path": [
+      "semantic",
+      "shadow",
+      "small"
+    ],
+    "description": "Cards on dark: black at 40 %, since the light 5 % shadow does not show on the dark canvas (ADR-0007, owner approval of 2026-10-17)."
+  },
+  "--mq-shadow-medium": {
+    "value": "0px 3px 12px 0px rgba(0, 0, 0, 0.5)",
+    "type": "shadow",
+    "path": [
+      "semantic",
+      "shadow",
+      "medium"
+    ],
+    "description": "A slide or page previewed on the dark desk: black at 50 % (ADR-0007, owner approval of 2026-10-17)."
+  },
+  "--mq-shadow-panel": {
+    "value": "0px 0px 0px 1px rgba(159, 179, 232, 0.35)",
+    "type": "shadow",
+    "path": [
+      "semantic",
+      "shadow",
+      "panel"
+    ],
+    "description": "Navy panels on dark: a 1 px light-navy outline, no glow (ADR-0007, owner 2026-10-15)."
+  },
+  "--mq-shadow-edge": {
+    "value": "0px 0px 0px 1px rgba(159, 179, 232, 0.35)",
+    "type": "shadow",
+    "path": [
+      "semantic",
+      "shadow",
+      "edge"
+    ],
+    "description": "On dark, the panel's 1 px light-navy outline around a navy KPI tile, a navy brand tile and the monogram, whose navy square is 1.11:1 on the dark surface (owner rulings 13 and 14, ADR-0007)."
+  },
+  "--mq-shadow-live": {
+    "value": "0px 0px 0px 3px rgba(111, 191, 115, 0.17)",
+    "type": "shadow",
+    "path": [
+      "semantic",
+      "shadow",
+      "live"
+    ],
+    "description": "The live halo on dark: a 3 px ring of the dark success green at 17 % (ADR-0004, ADR-0007)."
+  }
+}

package/dist/tokens.css

@@ -36,6 +36,13 @@
   --mq-core-amber-tint: #fbf3e7; /** Owner ruling 5, 2026-10-09: warning tint, the warning fill at 10 % on white; warning strong on it is 4.42:1, so text on the tint stays ink. */
   --mq-core-red: #d8232a; /** Swiss red, kept only as the danger status colour (ADR-0003, ADR-0004). */
   --mq-core-blue: #1565c0; /** Info hue for interactive apps (ADR-0004). */
+  --mq-core-app-green: #1c7e3f; /** App categorical green, a data category in interactive apps only, never the success status (ADR-0008). */
+  --mq-core-app-orange: #d78000; /** App categorical orange, marks and fills only, 3.01:1 on white (ADR-0008). */
+  --mq-core-app-orange-dark: #a35f00; /** Darker app categorical orange for text in that hue, 5.01:1 on white (ADR-0008). */
+  --mq-core-app-vermillion: #cf2a00; /** App categorical vermillion, a data category, never the danger status (ADR-0008). */
+  --mq-core-app-blue: #3a8ff5; /** App categorical blue, marks and fills only, 3.27:1 on white (ADR-0008). */
+  --mq-core-app-violet: #5a2fbe; /** App categorical violet (ADR-0008). */
+  --mq-core-app-teal: #178a91; /** App categorical teal, marks and fills only, 4.13:1 on white (ADR-0008). */
   --mq-core-font-family-outfit: Outfit, system-ui, -apple-system, 'Segoe UI', sans-serif; /** Outfit, the sans for headings, labels and app UI (Owner ruling 10, 2026-10-09). */
   --mq-core-font-family-newsreader: Newsreader, Georgia, 'Times New Roman', serif; /** Newsreader, the only serif; Georgia and Times New Roman are fallbacks only (Owner ruling 10, 2026-10-09). */
   --mq-core-font-family-geist-mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace; /** Geist Mono for figures and codes (Owner ruling 10, 2026-10-09). */
@@ -67,6 +74,10 @@
   --mq-core-shadow-small: 0px 1px 2px 0px rgba(0, 0, 0, 0.05); /** Small elevation for cards (increment 07 component need, Report design system, 2026-10-08). */
   --mq-core-shadow-medium: 0px 3px 12px 0px rgba(0, 0, 0, 0.07); /** Medium elevation for a slide or page shown on the desk (increment 07 component need, Report design system, 2026-10-08). */
   --mq-core-shadow-panel: 0px 14px 36px 0px rgba(10, 36, 99, 0.24); /** Navy-tinted elevation for navy panels (increment 07 component need, Report design system, 2026-10-08). */
+  --mq-core-shadow-none: 0px 0px 0px 0px rgba(0, 0, 0, 0); /** 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: 0px 0px 0px 3px rgba(46, 125, 50, 0.17); /** 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: 64px; /** App sidebar collapsed to an icon rail, 64 px (#38 component need: the Maintainer app shell). */
+  --mq-core-size-248: 248px; /** App sidebar width, 248 px (#38 component need: the Maintainer app shell). */
   --mq-core-size-720: 720px; /** Slide canvas height, 720 px (increment 07 component need: the 1280 by 720 slide canvas). */
   --mq-core-size-760: 760px; /** Reading measure, 760 px (increment 07 component need, Report design system, 2026-10-08). */
   --mq-core-size-1040: 1040px; /** Content width of a screen document, 1040 px (increment 07 component need, Report design system, 2026-10-08). */
@@ -95,6 +106,7 @@
   --mq-accent-hover: #061a4d; /** Hover state of accent-coloured controls. */
   --mq-accent-pale: #eaeef7; /** Pale accent fill for a highlighted row, tag or state. */
   --mq-accent-pale-2: #f2f4f9; /** Quieter pale accent fill. */
+  --mq-accent-highlight: #0a2463; /** Large highlighted title text; the accent itself in light, the light navy in dark (ADR-0007). */
   --mq-on-accent: #ffffff; /** Text and icons on an accent fill, 14.53:1 on navy. */
   --mq-ink: #1a1a1a; /** Primary text. */
   --mq-muted: #555555; /** Secondary text. */
@@ -121,10 +133,22 @@
   --mq-warning: #a06400; /** Owner ruling 5, 2026-10-09: warning text, icons and borders; apps only (ADR-0004). */
   --mq-danger: #d8232a; /** Apps only: errors and destructive actions, always with an icon or a word (ADR-0003, ADR-0004). */
   --mq-info: #1565c0; /** Apps only: information, always with an icon or a word (ADR-0004). */
+  --mq-on-warning-fill: #1a1a1a; /** 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: #d4850a; /** Owner ruling 5, 2026-10-09: warning badge and highlight fill, always with ink text; white on it is forbidden (2.93:1). */
   --mq-warning-tint: #fbf3e7; /** Owner ruling 5, 2026-10-09: warning tint behind ink text; warning strong only for icons and borders on it. */
   --mq-dim: #707070; /** Retired name of the old tertiary grey; resolves to tertiary (Owner ruling 1, 2026-10-09). */
   --mq-accent-on-dark: #8795b3; /** 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. */
+  --mq-app-cat-green: #1c7e3f; /** 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: #d78000; /** 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: #a35f00; /** Text in the app categorical orange (counts, labels), 5.01:1 on the surface (ADR-0008). */
+  --mq-app-cat-vermillion: #cf2a00; /** App categorical hue: a data category, never the danger status, which stays for errors (ADR-0008). */
+  --mq-app-cat-blue: #3a8ff5; /** App categorical hue for marks and fills on the surface only (3.27:1), never text (ADR-0008). */
+  --mq-app-cat-violet: #5a2fbe; /** App categorical hue: marks, fills and text (ADR-0008). */
+  --mq-app-cat-teal: #178a91; /** App categorical hue for marks and fills on the surface only (4.13:1), never text (ADR-0008). */
+  --mq-change-added: #1c7e3f; /** Change type added, in apps only, always with its sign or its word: marks, fills and text (ADR-0008). */
+  --mq-change-modified: #d78000; /** 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: #a35f00; /** Text of the change type modified (counts, labels), in apps only (ADR-0008). */
+  --mq-change-removed: #cf2a00; /** 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: #0a2463; /** Focus ring on light backgrounds: 2 px navy with an offset, 13.90:1 on canvas (research note 0001, section 7). */
   --mq-focus-ring-color-on-navy: #ffffff; /** Focus ring on navy backgrounds, 14.53:1. */
   --mq-focus-ring-width: 2px; /** Focus ring width (WCAG 2.4.7 and 1.4.11). */
@@ -146,12 +170,16 @@
   --mq-shadow-small: 0px 1px 2px 0px rgba(0, 0, 0, 0.05); /** Cards (increment 07 component need). */
   --mq-shadow-medium: 0px 3px 12px 0px rgba(0, 0, 0, 0.07); /** A slide or page previewed on the desk, never in print (increment 07 component need). */
   --mq-shadow-panel: 0px 14px 36px 0px rgba(10, 36, 99, 0.24); /** Navy panels (increment 07 component need). */
+  --mq-shadow-edge: 0px 0px 0px 0px rgba(0, 0, 0, 0); /** 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: 0px 0px 0px 3px rgba(46, 125, 50, 0.17); /** 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: 1280px; /** Slide canvas width (increment 07 component need). */
   --mq-slide-height: 720px; /** Slide canvas height (increment 07 component need). */
   --mq-page-width: 1040px; /** Content width of a screen document (increment 07 component need). */
   --mq-page-measure: 760px; /** Longest line of running text (increment 07 component need). */
   --mq-a4-width: 793.7px; /** A4 sheet width (increment 07 component need). */
   --mq-a4-height: 1122.52px; /** A4 sheet height (increment 07 component need). */
+  --mq-sidebar-width: 248px; /** Apps only: the expanded app sidebar. */
+  --mq-sidebar-rail-width: 64px; /** Apps only: the app sidebar collapsed to an icon rail. */
   --mq-font-family-heading: Outfit, system-ui, -apple-system, 'Segoe UI', sans-serif; /** Headings, column titles and hero figures (Owner ruling 4, 2026-10-09, Owner ruling 10, 2026-10-09). */
   --mq-font-family-body: Newsreader, Georgia, 'Times New Roman', serif; /** Body text of documents and slides, regulatory text in apps (Owner ruling 10, 2026-10-09). */
   --mq-font-family-ui: Outfit, system-ui, -apple-system, 'Segoe UI', sans-serif; /** Labels and app UI (Owner ruling 10, 2026-10-09). */