@nomosui/react 0.4.0

package/dist/types/internal/sheet.d.ts

@@ -0,0 +1,25 @@
+import * as React from "react";
+import * as SheetPrimitive from "@radix-ui/react-dialog";
+import { type VariantProps } from "class-variance-authority";
+declare const Sheet: React.FC<SheetPrimitive.DialogProps>;
+declare const SheetTrigger: React.ForwardRefExoticComponent<SheetPrimitive.DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+declare const SheetClose: React.ForwardRefExoticComponent<SheetPrimitive.DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
+declare const SheetPortal: React.FC<SheetPrimitive.DialogPortalProps>;
+declare const SheetOverlay: React.ForwardRefExoticComponent<Omit<SheetPrimitive.DialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const sheetVariants: (props?: ({
+    side?: "top" | "right" | "bottom" | "left" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+interface SheetContentProps extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>, VariantProps<typeof sheetVariants> {
+}
+declare const SheetContent: React.ForwardRefExoticComponent<SheetContentProps & React.RefAttributes<HTMLDivElement>>;
+declare const SheetHeader: {
+    ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element;
+    displayName: string;
+};
+declare const SheetFooter: {
+    ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element;
+    displayName: string;
+};
+declare const SheetTitle: React.ForwardRefExoticComponent<Omit<SheetPrimitive.DialogTitleProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
+declare const SheetDescription: React.ForwardRefExoticComponent<Omit<SheetPrimitive.DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
+export { Sheet, SheetPortal, SheetOverlay, SheetTrigger, SheetClose, SheetContent, SheetHeader, SheetFooter, SheetTitle, SheetDescription, };

package/dist/types/internal/tooltip.d.ts

@@ -0,0 +1,7 @@
+import * as React from "react";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+declare const TooltipProvider: React.FC<TooltipPrimitive.TooltipProviderProps>;
+declare const Tooltip: React.FC<TooltipPrimitive.TooltipProps>;
+declare const TooltipTrigger: React.ForwardRefExoticComponent<TooltipPrimitive.TooltipTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+declare const TooltipContent: React.ForwardRefExoticComponent<Omit<TooltipPrimitive.TooltipContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };

package/dist/types/lib/cn.d.ts

@@ -0,0 +1,6 @@
+import { type ClassValue } from 'clsx';
+/**
+ * Le `cn` du cœur. Il vit ici et pas dans l'app : un composant du design system ne
+ * peut pas dépendre d'un utilitaire qui appartient au dashboard.
+ */
+export declare const cn: (...inputs: ClassValue[]) => string;

package/dist/types/lib/tone.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Le vocabulaire de tons du cœur : sept **intentions**, pas sept couleurs. Un badge de
+ * statut choisit l'intention (« danger », « succès »), et c'est le cœur qui sait la
+ * rendre — l'app ne manipule plus un nom de couleur.
+ *
+ * Chaque ton lit deux emplacements sémantiques (`status-<ton>` pour la surface, lue à
+ * faible opacité, et `status-<ton>-ink` pour l'encre) : c'est le token qui porte le
+ * mode, pas la classe, donc le cœur ne connaît jamais le mode (ADR 0004, garde des tokens).
+ */
+export declare const TONES: readonly ["neutral", "info", "progress", "attention", "warning", "danger", "success"];
+export type Tone = (typeof TONES)[number];
+export declare const toneClasses: Record<Tone, string>;

package/dist/types/tokens/build.d.mts

@@ -0,0 +1,68 @@
+/**
+ * Les types de la dérivation des tokens (ADR 0004). Le module lui-même est en
+ * JavaScript (`.mjs`) : il est exécuté par le CLI en Node sans étape de compilation,
+ * donc ses types vivent ici, à côté — même convention que `scripts/api-lib.d.mts`.
+ */
+
+/** Un token DTCG tel qu'il vit dans `tokens.json`. */
+export interface Token {
+  $type: string
+  $value: unknown
+  $description?: string
+}
+
+export interface TokensDocument {
+  $description?: string
+  $extensions?: Record<string, Record<string, unknown>>
+  primitive?: Record<string, unknown>
+  semantic?: Record<string, unknown>
+}
+
+export interface TokensResource {
+  $description: string
+  namespace: string
+  defaultMode: string
+  modes: string[]
+  densities: Record<string, number>
+  defaultDensity: string
+  slots: Record<string, Record<string, string>>
+}
+
+/** Les modes déclarés par la source (`$extensions["org.nomos"].modes`). */
+export function modes(doc: TokensDocument): string[]
+
+/** Le mode par défaut, qui doit être l'un des modes déclarés. */
+export function defaultMode(doc: TokensDocument): string
+
+/** Les densités déclarées (ADR 0008) : un nom et son multiplicateur d'espacement. */
+export function densities(doc: TokensDocument): Record<string, number>
+
+/** La densité par défaut, qui doit être l'une des densités déclarées. */
+export function defaultDensity(doc: TokensDocument): string
+
+/** Les primitives aplaties, `chemin -> token`. */
+export function primitives(doc: TokensDocument): Map<string, Token>
+
+/** Les emplacements sémantiques aplatis, `chemin -> token`. */
+export function semanticTokens(doc: TokensDocument): Map<string, Token>
+
+/** Tous les tokens du document, aplatis depuis sa racine (résolution des alias). */
+export function allTokens(doc: TokensDocument): Map<string, Token>
+
+/** Résout un emplacement pour un mode, en suivant les alias jusqu'au bout. */
+export function resolve(doc: TokensDocument, path: string, mode: string): unknown
+
+/** Rend une valeur DTCG en texte CSS. Le type n'est requis que pour un tableau. */
+export function cssValue(value: unknown, type?: string): string
+
+/** Le nom de la custom property d'un emplacement sémantique. */
+export function cssName(path: string, namespace: string): string
+
+/** Les emplacements d'un mode, `nom CSS -> valeur`. */
+export function slotsFor(doc: TokensDocument, mode: string): Record<string, string>
+
+/** L'inventaire plat que le serveur MCP du design system servira. */
+export function buildResource(doc: TokensDocument): TokensResource
+
+/** Le CSS dérivé, en entier. */
+export function renderCss(doc: TokensDocument): string

package/dist/types/tokens/resource.d.ts

@@ -0,0 +1,8 @@
+import type { TokensResource } from './build.mjs';
+/**
+ * La ressource de tokens, servie telle quelle à la page de style (et, plus tard, au
+ * serveur MCP). C'est le rendu dérivé de `tokens/tokens.json` par
+ * `npm run tokens` — ne pas l'éditer à la main : le test des tokens échoue si le
+ * fichier committé n'est plus celui que la source produit.
+ */
+export declare const tokensResource: TokensResource;

package/dist/types/tokens/skin.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Le contrat de skin (ADR 0022) : un skin est un **overlay sémantique** posé par-dessus le
+ * défaut du cœur. La fusion est pure et bruyante — un emplacement **absent** hérite du
+ * défaut, un emplacement **inconnu** lève (l'interface de thème est celle du défaut), et un
+ * skin qui porterait une `primitive` lève aussi : le cœur garde les valeurs brutes.
+ */
+type Doc = Record<string, unknown>;
+export declare function resolveSkin(defaultDoc: Doc, overlay?: Doc): Doc;
+export {};

package/package.json

@@ -0,0 +1,107 @@
+{
+  "name": "@nomosui/react",
+  "private": false,
+  "version": "0.4.0",
+  "type": "module",
+  "description": "An app-agnostic design system, built in public: a core of tokens and components exposed to humans and agents.",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/PierreTsia/nomos.git"
+  },
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org",
+    "access": "public"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/types/index.d.ts",
+      "source": "./src/index.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./tokens/theme.css": "./tokens/theme.css",
+    "./tokens/tokens.generated.css": "./tokens/tokens.generated.css",
+    "./tokens/tokens.json": "./tokens/tokens.json"
+  },
+  "files": [
+    "dist",
+    "tokens",
+    "SKILL.md",
+    "README.md",
+    "scripts/install-skill.mjs"
+  ],
+  "bin": {
+    "nomos-mcp": "./dist/mcp/bin.js",
+    "nomos-skill": "./scripts/install-skill.mjs"
+  },
+  "scripts": {
+    "mcp": "tsx src/mcp/bin.ts",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "lint": "eslint .",
+    "typecheck": "tsc -p tsconfig.json --noEmit",
+    "tokens": "node scripts/build-tokens.mjs",
+    "tokens:check": "node scripts/build-tokens.mjs --check",
+    "build:view": "node scripts/build-view.mjs",
+    "view:check": "node scripts/build-view.mjs --check",
+    "build:view-css": "node scripts/build-view-css.mjs",
+    "view-css:check": "node scripts/build-view-css.mjs --check",
+    "build:surface": "tsx scripts/build-surface.ts",
+    "surface:check": "tsx scripts/build-surface.ts --check",
+    "build:package": "node scripts/build-package.mjs",
+    "prepublishOnly": "npm run build:package",
+    "smoke:consumer": "node scripts/smoke-consumer.mjs",
+    "changeset": "changeset",
+    "release": "changeset publish"
+  },
+  "dependencies": {
+    "@modelcontextprotocol/sdk": "^1.31.0",
+    "@radix-ui/react-checkbox": "^1.3.11",
+    "@radix-ui/react-dialog": "^1.1.23",
+    "@radix-ui/react-dropdown-menu": "^2.1.24",
+    "@radix-ui/react-radio-group": "^1.4.7",
+    "@radix-ui/react-select": "^2.3.7",
+    "@radix-ui/react-separator": "^1.1.15",
+    "@radix-ui/react-slot": "^1.3.3",
+    "@radix-ui/react-switch": "^1.3.7",
+    "@radix-ui/react-toggle": "^1.1.18",
+    "@radix-ui/react-toggle-group": "^1.1.19",
+    "@radix-ui/react-tooltip": "^1.2.16",
+    "@tanstack/react-table": "^9.2.4",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "lucide-react": "^0.548.0",
+    "tailwind-merge": "^3.7.0",
+    "zod": "^4.6.5"
+  },
+  "devDependencies": {
+    "@changesets/cli": "^3.0.3",
+    "@eslint/js": "^10.0.1",
+    "@tailwindcss/postcss": "^4.3.3",
+    "@testing-library/jest-dom": "^7.0.1",
+    "@testing-library/react": "^16.3.3",
+    "@testing-library/user-event": "^14.6.7",
+    "@types/node": "^26.6.2",
+    "@types/react": "^19.3.0",
+    "@types/react-dom": "^19.3.0",
+    "@vitejs/plugin-react": "^6.1.1",
+    "eslint": "^10.11.0",
+    "eslint-plugin-react-hooks": "^7.1.1",
+    "eslint-plugin-react-refresh": "^0.5.6",
+    "globals": "^17.12.0",
+    "jsdom": "^30.1.1",
+    "postcss": "^8.5.28",
+    "react": "^19.3.0",
+    "react-dom": "^19.3.0",
+    "tailwindcss": "^4.3.3",
+    "tsx": "^4.23.15",
+    "typescript": "~6.0.3",
+    "typescript-eslint": "~8.70.0",
+    "vite": "^8.3.0",
+    "vitest": "^5.0.1"
+  },
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  }
+}

package/scripts/install-skill.mjs

@@ -0,0 +1,28 @@
+#!/usr/bin/env node
+/**
+ * Installe la skill « nomos » livrée avec le paquet (#54) : copie son `SKILL.md` là où un
+ * hôte lit ses skills. Par défaut `~/.claude/skills/nomos` ; `--dir <dossier>` pour un
+ * autre hôte (opencode, etc.).
+ */
+import { copyFileSync, mkdirSync } from 'node:fs'
+import os from 'node:os'
+import path from 'node:path'
+import { fileURLToPath } from 'node:url'
+
+const here = path.dirname(fileURLToPath(import.meta.url))
+const source = path.resolve(here, '..', 'SKILL.md')
+
+const args = process.argv.slice(2)
+const dirIndex = args.indexOf('--dir')
+const targetDir =
+  dirIndex >= 0 ? args[dirIndex + 1] : path.join(os.homedir(), '.claude', 'skills', 'nomos')
+
+if (!targetDir) {
+  console.error('usage : nomos-skill [--dir <dossier>]')
+  process.exit(1)
+}
+
+mkdirSync(targetDir, { recursive: true })
+const dest = path.join(targetDir, 'SKILL.md')
+copyFileSync(source, dest)
+console.log(`Skill « nomos » installée : ${dest}`)

package/tokens/theme.css

@@ -0,0 +1,63 @@
+/*
+ * Le raccord Tailwind → tokens du cœur (ADR 0003, 0022) : des noms, aucune valeur.
+ * Les valeurs vivent dans `tokens.generated.css`, dérivé de `tokens.json` (ADR 0004).
+ * App-agnostique : un skin (ADR 0022) change les **valeurs**, jamais ces noms.
+ *
+ * L'app l'importe (`src/styles/globals.css`) et le build des vues l'inline
+ * (`src/mcp/view.css`) : une seule définition du raccord, deux rendus.
+ */
+@theme {
+  /*
+    La densité (ADR 0008) multiplie l'échelle d'espacement : toutes les marges, tous les
+    paddings, toutes les hauteurs et les tailles d'icône que Tailwind dérive de
+    `--spacing` suivent `--nomos-density`. Les composants n'ont aucun nombre propre à
+    changer, et le mode se pose sur la racine (`data-density`), donc il est scopable.
+  */
+  --spacing: calc(0.25rem * var(--nomos-density, 1));
+
+  --color-border: hsl(var(--nomos-color-border));
+  --color-input: hsl(var(--nomos-color-input));
+  --color-ring: hsl(var(--nomos-color-ring));
+  --color-background: hsl(var(--nomos-color-background));
+  --color-foreground: hsl(var(--nomos-color-foreground));
+
+  --color-primary: hsl(var(--nomos-color-primary));
+  --color-primary-foreground: hsl(var(--nomos-color-primary-foreground));
+
+  --color-secondary: hsl(var(--nomos-color-secondary));
+  --color-secondary-foreground: hsl(var(--nomos-color-secondary-foreground));
+
+  --color-destructive: hsl(var(--nomos-color-destructive));
+  --color-destructive-foreground: hsl(var(--nomos-color-destructive-foreground));
+
+  --color-muted: hsl(var(--nomos-color-muted));
+  --color-muted-foreground: hsl(var(--nomos-color-muted-foreground));
+
+  --color-accent: hsl(var(--nomos-color-accent));
+  --color-accent-foreground: hsl(var(--nomos-color-accent-foreground));
+
+  --color-popover: hsl(var(--nomos-color-popover));
+  --color-popover-foreground: hsl(var(--nomos-color-popover-foreground));
+
+  --color-card: hsl(var(--nomos-color-card));
+  --color-card-foreground: hsl(var(--nomos-color-card-foreground));
+
+  --color-brand: var(--nomos-color-brand);
+
+  --color-status-info: hsl(var(--nomos-color-status-info));
+  --color-status-info-ink: hsl(var(--nomos-color-status-info-ink));
+  --color-status-progress: hsl(var(--nomos-color-status-progress));
+  --color-status-progress-ink: hsl(var(--nomos-color-status-progress-ink));
+  --color-status-attention: hsl(var(--nomos-color-status-attention));
+  --color-status-attention-ink: hsl(var(--nomos-color-status-attention-ink));
+  --color-status-warning: hsl(var(--nomos-color-status-warning));
+  --color-status-warning-ink: hsl(var(--nomos-color-status-warning-ink));
+  --color-status-danger: hsl(var(--nomos-color-status-danger));
+  --color-status-danger-ink: hsl(var(--nomos-color-status-danger-ink));
+  --color-status-success: hsl(var(--nomos-color-status-success));
+  --color-status-success-ink: hsl(var(--nomos-color-status-success-ink));
+
+  --radius-lg: var(--nomos-radius-control);
+  --radius-md: var(--nomos-radius-field);
+  --radius-sm: var(--nomos-radius-chip);
+}

package/tokens/tokens.generated.css

@@ -0,0 +1,271 @@
+/*
+ * Généré par scripts/build-tokens.mjs — ne pas éditer à la main.
+ * Source unique : tokens/tokens.json (format DTCG, ADR 0004).
+ * Rejouer : npm run tokens
+ */
+
+@layer base {
+  :root {
+    color-scheme: dark;
+    --nomos-color-background: 240 7% 8%;
+    --nomos-color-foreground: 240 10% 94%;
+    --nomos-color-card: 240 17% 12%;
+    --nomos-color-card-foreground: 240 10% 94%;
+    --nomos-color-popover: 240 17% 12%;
+    --nomos-color-popover-foreground: 240 10% 94%;
+    --nomos-color-primary: 174 100% 39%;
+    --nomos-color-primary-foreground: 0 0% 0%;
+    --nomos-color-secondary: 240 8% 16%;
+    --nomos-color-secondary-foreground: 240 10% 94%;
+    --nomos-color-muted: 240 8% 19%;
+    --nomos-color-muted-foreground: 0 0% 60%;
+    --nomos-color-accent: 240 8% 16%;
+    --nomos-color-accent-foreground: 240 10% 94%;
+    --nomos-color-destructive: 0 72% 71%;
+    --nomos-color-destructive-foreground: 0 0% 0%;
+    --nomos-color-border: 240 8% 19%;
+    --nomos-color-input: 240 8% 19%;
+    --nomos-color-ring: 174 100% 39%;
+    --nomos-color-brand: #00c9b1;
+    --nomos-color-status-info: 199 89% 48%;
+    --nomos-color-status-info-ink: 198 93% 74%;
+    --nomos-color-status-progress: 258 90% 66%;
+    --nomos-color-status-progress-ink: 255 92% 85%;
+    --nomos-color-status-attention: 38 92% 50%;
+    --nomos-color-status-attention-ink: 46 97% 65%;
+    --nomos-color-status-warning: 25 95% 53%;
+    --nomos-color-status-warning-ink: 31 97% 72%;
+    --nomos-color-status-danger: 0 84% 60%;
+    --nomos-color-status-danger-ink: 0 94% 82%;
+    --nomos-color-status-success: 160 84% 39%;
+    --nomos-color-status-success-ink: 156 72% 67%;
+    --nomos-radius-pill: 9999px;
+    --nomos-radius-control: 0.625rem;
+    --nomos-radius-field: 0.5rem;
+    --nomos-radius-chip: 0.375rem;
+    --nomos-space-hairline: 2px;
+    --nomos-space-tight: 4px;
+    --nomos-space-snug: 8px;
+    --nomos-space-base: 12px;
+    --nomos-space-comfy: 16px;
+    --nomos-space-loose: 24px;
+    --nomos-space-section: 32px;
+    --nomos-type-size-micro: 0.6875rem;
+    --nomos-type-size-caption: 0.75rem;
+    --nomos-type-size-body: 0.875rem;
+    --nomos-type-size-lead: 1rem;
+    --nomos-type-size-title: 1.125rem;
+    --nomos-type-size-display: 1.5rem;
+    --nomos-type-leading-micro: 0.875rem;
+    --nomos-type-leading-caption: 1rem;
+    --nomos-type-leading-body: 1.25rem;
+    --nomos-type-leading-lead: 1.5rem;
+    --nomos-type-leading-title: 1.75rem;
+    --nomos-type-leading-display: 2rem;
+    --nomos-type-weight-regular: 400;
+    --nomos-type-weight-medium: 500;
+    --nomos-type-weight-strong: 600;
+    --nomos-type-family-sans: ui-sans-serif, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  }
+
+  /* Aucun mode posé sur la racine : c’est le système qui décide (ADR 0009). */
+  @media (prefers-color-scheme: light) {
+    :root:not(.dark):not(.light) {
+      color-scheme: light;
+      --nomos-color-background: 0 0% 100%;
+      --nomos-color-foreground: 240 10% 10%;
+      --nomos-color-card: 0 0% 98%;
+      --nomos-color-card-foreground: 240 10% 10%;
+      --nomos-color-popover: 0 0% 100%;
+      --nomos-color-popover-foreground: 240 10% 10%;
+      --nomos-color-primary: 174 100% 35%;
+      --nomos-color-primary-foreground: 0 0% 100%;
+      --nomos-color-secondary: 240 5% 92%;
+      --nomos-color-secondary-foreground: 240 10% 10%;
+      --nomos-color-muted: 240 5% 92%;
+      --nomos-color-muted-foreground: 240 4% 46%;
+      --nomos-color-accent: 240 5% 92%;
+      --nomos-color-accent-foreground: 240 10% 10%;
+      --nomos-color-destructive: 0 72% 51%;
+      --nomos-color-destructive-foreground: 0 0% 100%;
+      --nomos-color-border: 240 6% 85%;
+      --nomos-color-input: 240 6% 85%;
+      --nomos-color-ring: 174 100% 35%;
+      --nomos-color-brand: #00c9b1;
+      --nomos-color-status-info: 199 89% 48%;
+      --nomos-color-status-info-ink: 201 96% 32%;
+      --nomos-color-status-progress: 258 90% 66%;
+      --nomos-color-status-progress-ink: 263 70% 50%;
+      --nomos-color-status-attention: 38 92% 50%;
+      --nomos-color-status-attention-ink: 26 90% 37%;
+      --nomos-color-status-warning: 25 95% 53%;
+      --nomos-color-status-warning-ink: 17 88% 40%;
+      --nomos-color-status-danger: 0 84% 60%;
+      --nomos-color-status-danger-ink: 0 74% 42%;
+      --nomos-color-status-success: 160 84% 39%;
+      --nomos-color-status-success-ink: 161 94% 25%;
+      --nomos-radius-pill: 9999px;
+      --nomos-radius-control: 0.625rem;
+      --nomos-radius-field: 0.5rem;
+      --nomos-radius-chip: 0.375rem;
+      --nomos-space-hairline: 2px;
+      --nomos-space-tight: 4px;
+      --nomos-space-snug: 8px;
+      --nomos-space-base: 12px;
+      --nomos-space-comfy: 16px;
+      --nomos-space-loose: 24px;
+      --nomos-space-section: 32px;
+      --nomos-type-size-micro: 0.6875rem;
+      --nomos-type-size-caption: 0.75rem;
+      --nomos-type-size-body: 0.875rem;
+      --nomos-type-size-lead: 1rem;
+      --nomos-type-size-title: 1.125rem;
+      --nomos-type-size-display: 1.5rem;
+      --nomos-type-leading-micro: 0.875rem;
+      --nomos-type-leading-caption: 1rem;
+      --nomos-type-leading-body: 1.25rem;
+      --nomos-type-leading-lead: 1.5rem;
+      --nomos-type-leading-title: 1.75rem;
+      --nomos-type-leading-display: 2rem;
+      --nomos-type-weight-regular: 400;
+      --nomos-type-weight-medium: 500;
+      --nomos-type-weight-strong: 600;
+      --nomos-type-family-sans: ui-sans-serif, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+    }
+  }
+
+  .dark, [data-theme='dark'] {
+    color-scheme: dark;
+    --nomos-color-background: 240 7% 8%;
+    --nomos-color-foreground: 240 10% 94%;
+    --nomos-color-card: 240 17% 12%;
+    --nomos-color-card-foreground: 240 10% 94%;
+    --nomos-color-popover: 240 17% 12%;
+    --nomos-color-popover-foreground: 240 10% 94%;
+    --nomos-color-primary: 174 100% 39%;
+    --nomos-color-primary-foreground: 0 0% 0%;
+    --nomos-color-secondary: 240 8% 16%;
+    --nomos-color-secondary-foreground: 240 10% 94%;
+    --nomos-color-muted: 240 8% 19%;
+    --nomos-color-muted-foreground: 0 0% 60%;
+    --nomos-color-accent: 240 8% 16%;
+    --nomos-color-accent-foreground: 240 10% 94%;
+    --nomos-color-destructive: 0 72% 71%;
+    --nomos-color-destructive-foreground: 0 0% 0%;
+    --nomos-color-border: 240 8% 19%;
+    --nomos-color-input: 240 8% 19%;
+    --nomos-color-ring: 174 100% 39%;
+    --nomos-color-brand: #00c9b1;
+    --nomos-color-status-info: 199 89% 48%;
+    --nomos-color-status-info-ink: 198 93% 74%;
+    --nomos-color-status-progress: 258 90% 66%;
+    --nomos-color-status-progress-ink: 255 92% 85%;
+    --nomos-color-status-attention: 38 92% 50%;
+    --nomos-color-status-attention-ink: 46 97% 65%;
+    --nomos-color-status-warning: 25 95% 53%;
+    --nomos-color-status-warning-ink: 31 97% 72%;
+    --nomos-color-status-danger: 0 84% 60%;
+    --nomos-color-status-danger-ink: 0 94% 82%;
+    --nomos-color-status-success: 160 84% 39%;
+    --nomos-color-status-success-ink: 156 72% 67%;
+    --nomos-radius-pill: 9999px;
+    --nomos-radius-control: 0.625rem;
+    --nomos-radius-field: 0.5rem;
+    --nomos-radius-chip: 0.375rem;
+    --nomos-space-hairline: 2px;
+    --nomos-space-tight: 4px;
+    --nomos-space-snug: 8px;
+    --nomos-space-base: 12px;
+    --nomos-space-comfy: 16px;
+    --nomos-space-loose: 24px;
+    --nomos-space-section: 32px;
+    --nomos-type-size-micro: 0.6875rem;
+    --nomos-type-size-caption: 0.75rem;
+    --nomos-type-size-body: 0.875rem;
+    --nomos-type-size-lead: 1rem;
+    --nomos-type-size-title: 1.125rem;
+    --nomos-type-size-display: 1.5rem;
+    --nomos-type-leading-micro: 0.875rem;
+    --nomos-type-leading-caption: 1rem;
+    --nomos-type-leading-body: 1.25rem;
+    --nomos-type-leading-lead: 1.5rem;
+    --nomos-type-leading-title: 1.75rem;
+    --nomos-type-leading-display: 2rem;
+    --nomos-type-weight-regular: 400;
+    --nomos-type-weight-medium: 500;
+    --nomos-type-weight-strong: 600;
+    --nomos-type-family-sans: ui-sans-serif, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  }
+
+  .light, [data-theme='light'] {
+    color-scheme: light;
+    --nomos-color-background: 0 0% 100%;
+    --nomos-color-foreground: 240 10% 10%;
+    --nomos-color-card: 0 0% 98%;
+    --nomos-color-card-foreground: 240 10% 10%;
+    --nomos-color-popover: 0 0% 100%;
+    --nomos-color-popover-foreground: 240 10% 10%;
+    --nomos-color-primary: 174 100% 35%;
+    --nomos-color-primary-foreground: 0 0% 100%;
+    --nomos-color-secondary: 240 5% 92%;
+    --nomos-color-secondary-foreground: 240 10% 10%;
+    --nomos-color-muted: 240 5% 92%;
+    --nomos-color-muted-foreground: 240 4% 46%;
+    --nomos-color-accent: 240 5% 92%;
+    --nomos-color-accent-foreground: 240 10% 10%;
+    --nomos-color-destructive: 0 72% 51%;
+    --nomos-color-destructive-foreground: 0 0% 100%;
+    --nomos-color-border: 240 6% 85%;
+    --nomos-color-input: 240 6% 85%;
+    --nomos-color-ring: 174 100% 35%;
+    --nomos-color-brand: #00c9b1;
+    --nomos-color-status-info: 199 89% 48%;
+    --nomos-color-status-info-ink: 201 96% 32%;
+    --nomos-color-status-progress: 258 90% 66%;
+    --nomos-color-status-progress-ink: 263 70% 50%;
+    --nomos-color-status-attention: 38 92% 50%;
+    --nomos-color-status-attention-ink: 26 90% 37%;
+    --nomos-color-status-warning: 25 95% 53%;
+    --nomos-color-status-warning-ink: 17 88% 40%;
+    --nomos-color-status-danger: 0 84% 60%;
+    --nomos-color-status-danger-ink: 0 74% 42%;
+    --nomos-color-status-success: 160 84% 39%;
+    --nomos-color-status-success-ink: 161 94% 25%;
+    --nomos-radius-pill: 9999px;
+    --nomos-radius-control: 0.625rem;
+    --nomos-radius-field: 0.5rem;
+    --nomos-radius-chip: 0.375rem;
+    --nomos-space-hairline: 2px;
+    --nomos-space-tight: 4px;
+    --nomos-space-snug: 8px;
+    --nomos-space-base: 12px;
+    --nomos-space-comfy: 16px;
+    --nomos-space-loose: 24px;
+    --nomos-space-section: 32px;
+    --nomos-type-size-micro: 0.6875rem;
+    --nomos-type-size-caption: 0.75rem;
+    --nomos-type-size-body: 0.875rem;
+    --nomos-type-size-lead: 1rem;
+    --nomos-type-size-title: 1.125rem;
+    --nomos-type-size-display: 1.5rem;
+    --nomos-type-leading-micro: 0.875rem;
+    --nomos-type-leading-caption: 1rem;
+    --nomos-type-leading-body: 1.25rem;
+    --nomos-type-leading-lead: 1.5rem;
+    --nomos-type-leading-title: 1.75rem;
+    --nomos-type-leading-display: 2rem;
+    --nomos-type-weight-regular: 400;
+    --nomos-type-weight-medium: 500;
+    --nomos-type-weight-strong: 600;
+    --nomos-type-family-sans: ui-sans-serif, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  }
+
+  :root { --nomos-density: 1; }
+
+  [data-density='comfortable'], .comfortable { --nomos-density: 1; }
+
+  [data-density='compact'], .compact { --nomos-density: 0.8; }
+
+}
+
+/* namespace : --nomos — un thème d'app remplace ces emplacements (ADR 0003). */