@nomosui/react 0.4.0

package/tokens/tokens.json

@@ -0,0 +1,225 @@
+{
+  "$description": "La source unique des tokens de Nomos. Format DTCG (W3C Design Tokens Community Group) : deux étages — `primitive` (les valeurs brutes, jamais consommées directement) et `semantic` (les emplacements que les composants et les thèmes renseignent). Rien d'autre n'est une source : le CSS de l'app et la ressource servie aux agents en sont dérivés par `scripts/build-tokens.mjs` (docs/adr/0004).",
+  "$extensions": {
+    "org.nomos": {
+      "modes": ["dark", "light"],
+      "defaultMode": "dark",
+      "cssNamespace": "--nomos",
+      "densities": { "comfortable": 1, "compact": 0.8 },
+      "defaultDensity": "comfortable"
+    }
+  },
+  "primitive": {
+    "$description": "Les valeurs brutes. Un composant ne les référence jamais : il parle en tokens sémantiques, sinon le skin n'est plus remplaçable (ADR 0002, ADR 0003).",
+    "color": {
+      "$description": "Les couleurs sont écrites en HSL dans la forme DTCG (`colorSpace: hsl`, composantes [teinte, saturation, clarté]) et non en hexadécimal : c'est la forme que l'app consomme (`hsl(var(--nomos-color-…))`), celle qui laisse fonctionner les modificateurs d'opacité de Tailwind, et elle garde au rendu la valeur exacte qu'il avait avant la dérivation.",
+      "ink": {
+        "$description": "La rampe de fond de la console, sombre et légèrement bleutée.",
+        "950": { "$type": "color", "$value": { "colorSpace": "hsl", "components": [240, 7, 8] } },
+        "900": { "$type": "color", "$value": { "colorSpace": "hsl", "components": [240, 17, 12] } },
+        "800": { "$type": "color", "$value": { "colorSpace": "hsl", "components": [240, 8, 16] } },
+        "750": { "$type": "color", "$value": { "colorSpace": "hsl", "components": [240, 8, 19] } }
+      },
+      "paper": {
+        "$description": "La rampe de fond claire.",
+        "0": { "$type": "color", "$value": { "colorSpace": "hsl", "components": [0, 0, 100] } },
+        "50": { "$type": "color", "$value": { "colorSpace": "hsl", "components": [0, 0, 98] } },
+        "100": { "$type": "color", "$value": { "colorSpace": "hsl", "components": [240, 5, 92] } },
+        "200": { "$type": "color", "$value": { "colorSpace": "hsl", "components": [240, 6, 85] } }
+      },
+      "text": {
+        "$description": "Les deux valeurs de texte plein et leur version atténuée, de part et d'autre de la bascule.",
+        "on-dark": { "$type": "color", "$value": { "colorSpace": "hsl", "components": [240, 10, 94] } },
+        "on-light": { "$type": "color", "$value": { "colorSpace": "hsl", "components": [240, 10, 10] } },
+        "muted-on-dark": { "$type": "color", "$value": { "colorSpace": "hsl", "components": [0, 0, 60] } },
+        "muted-on-light": { "$type": "color", "$value": { "colorSpace": "hsl", "components": [240, 4, 46] } }
+      },
+      "teal": {
+        "$description": "L'accent de la console : deux paliers, celui du fond sombre et celui du fond clair.",
+        "500": { "$type": "color", "$value": { "colorSpace": "hsl", "components": [174, 100, 39] } },
+        "600": { "$type": "color", "$value": { "colorSpace": "hsl", "components": [174, 100, 35] } }
+      },
+      "danger": {
+        "$description": "L'état destructif : plus clair sur fond sombre, plus soutenu sur fond clair.",
+        "300": { "$type": "color", "$value": { "colorSpace": "hsl", "components": [0, 72, 71] } },
+        "500": { "$type": "color", "$value": { "colorSpace": "hsl", "components": [0, 72, 51] } }
+      },
+      "status": {
+        "$description": "Les rampes de statut du vocabulaire de tons (ADR 0004). Chaque ton porte une surface (500, lue à faible opacité pour le fond et la bordure) et une encre (300 en sombre, 700 en clair, lisible sur le fond).",
+        "info": {
+          "500": { "$type": "color", "$value": { "colorSpace": "hsl", "components": [199, 89, 48] } },
+          "700": { "$type": "color", "$value": { "colorSpace": "hsl", "components": [201, 96, 32] } },
+          "300": { "$type": "color", "$value": { "colorSpace": "hsl", "components": [198, 93, 74] } }
+        },
+        "progress": {
+          "500": { "$type": "color", "$value": { "colorSpace": "hsl", "components": [258, 90, 66] } },
+          "700": { "$type": "color", "$value": { "colorSpace": "hsl", "components": [263, 70, 50] } },
+          "300": { "$type": "color", "$value": { "colorSpace": "hsl", "components": [255, 92, 85] } }
+        },
+        "attention": {
+          "500": { "$type": "color", "$value": { "colorSpace": "hsl", "components": [38, 92, 50] } },
+          "700": { "$type": "color", "$value": { "colorSpace": "hsl", "components": [26, 90, 37] } },
+          "300": { "$type": "color", "$value": { "colorSpace": "hsl", "components": [46, 97, 65] } }
+        },
+        "warning": {
+          "500": { "$type": "color", "$value": { "colorSpace": "hsl", "components": [25, 95, 53] } },
+          "700": { "$type": "color", "$value": { "colorSpace": "hsl", "components": [17, 88, 40] } },
+          "300": { "$type": "color", "$value": { "colorSpace": "hsl", "components": [31, 97, 72] } }
+        },
+        "danger": {
+          "500": { "$type": "color", "$value": { "colorSpace": "hsl", "components": [0, 84, 60] } },
+          "700": { "$type": "color", "$value": { "colorSpace": "hsl", "components": [0, 74, 42] } },
+          "300": { "$type": "color", "$value": { "colorSpace": "hsl", "components": [0, 94, 82] } }
+        },
+        "success": {
+          "500": { "$type": "color", "$value": { "colorSpace": "hsl", "components": [160, 84, 39] } },
+          "700": { "$type": "color", "$value": { "colorSpace": "hsl", "components": [161, 94, 25] } },
+          "300": { "$type": "color", "$value": { "colorSpace": "hsl", "components": [156, 72, 67] } }
+        }
+      },
+      "absolute": {
+        "black": { "$type": "color", "$value": { "colorSpace": "hsl", "components": [0, 0, 0] } },
+        "white": { "$type": "color", "$value": { "colorSpace": "hsl", "components": [0, 0, 100] } }
+      },
+      "brand-teal": {
+        "$description": "Le teal de marque, conservé en hexadécimal : il vient d'une identité (ADR 0001) et non d'une rampe calculée.",
+        "400": { "$type": "color", "$value": "#00c9b1" }
+      }
+    },
+    "space": {
+      "$description": "L'échelle d'espacement, base 4 : la progression va de 2 à 32 px, les clés sont sémantiques pour que la densité puisse la multiplier sans casser le code appelant (ADR 0008).",
+      "hairline": { "$type": "dimension", "$value": { "value": 2, "unit": "px" } },
+      "tight": { "$type": "dimension", "$value": { "value": 4, "unit": "px" } },
+      "snug": { "$type": "dimension", "$value": { "value": 8, "unit": "px" } },
+      "base": { "$type": "dimension", "$value": { "value": 12, "unit": "px" } },
+      "comfy": { "$type": "dimension", "$value": { "value": 16, "unit": "px" } },
+      "loose": { "$type": "dimension", "$value": { "value": 24, "unit": "px" } },
+      "section": { "$type": "dimension", "$value": { "value": 32, "unit": "px" } }
+    },
+    "radius": {
+      "$description": "Les rayons, nommés par usage et non par numéro : les valeurs reprennent exactement celles que l'app calculait (`--radius` moins 2 px et moins 4 px).",
+      "pill": { "$type": "dimension", "$value": { "value": 9999, "unit": "px" } },
+      "control": { "$type": "dimension", "$value": { "value": 0.625, "unit": "rem" } },
+      "field": { "$type": "dimension", "$value": { "value": 0.5, "unit": "rem" } },
+      "chip": { "$type": "dimension", "$value": { "value": 0.375, "unit": "rem" } }
+    },
+    "type": {
+      "$description": "L'échelle typographique : des tailles nommées par leur rôle, chacune avec sa hauteur de ligne.",
+      "size": {
+        "micro": { "$type": "dimension", "$value": { "value": 0.6875, "unit": "rem" } },
+        "caption": { "$type": "dimension", "$value": { "value": 0.75, "unit": "rem" } },
+        "body": { "$type": "dimension", "$value": { "value": 0.875, "unit": "rem" } },
+        "lead": { "$type": "dimension", "$value": { "value": 1, "unit": "rem" } },
+        "title": { "$type": "dimension", "$value": { "value": 1.125, "unit": "rem" } },
+        "display": { "$type": "dimension", "$value": { "value": 1.5, "unit": "rem" } }
+      },
+      "leading": {
+        "micro": { "$type": "dimension", "$value": { "value": 0.875, "unit": "rem" } },
+        "caption": { "$type": "dimension", "$value": { "value": 1, "unit": "rem" } },
+        "body": { "$type": "dimension", "$value": { "value": 1.25, "unit": "rem" } },
+        "lead": { "$type": "dimension", "$value": { "value": 1.5, "unit": "rem" } },
+        "title": { "$type": "dimension", "$value": { "value": 1.75, "unit": "rem" } },
+        "display": { "$type": "dimension", "$value": { "value": 2, "unit": "rem" } }
+      },
+      "weight": {
+        "regular": { "$type": "fontWeight", "$value": 400 },
+        "medium": { "$type": "fontWeight", "$value": 500 },
+        "strong": { "$type": "fontWeight", "$value": 600 }
+      },
+      "family": {
+        "sans": {
+          "$type": "fontFamily",
+          "$value": ["ui-sans-serif", "system-ui", "Segoe UI", "Roboto", "Helvetica Neue", "Arial", "sans-serif"]
+        }
+      }
+    }
+  },
+  "semantic": {
+    "$description": "Les emplacements. C'est le contrat de l'interface de thème (ADR 0003) : chaque mode remplit exactement les mêmes clés, et un emplacement manquant fait échouer le test de parité au lieu de produire un blanc silencieux (ADR 0009).",
+    "color": {
+      "$description": "Chaque couleur porte les deux modes. Une valeur de mode est un alias `{primitive.…}` : c'est l'alias qui dit qu'un thème remplace un emplacement, il ne recopie pas la valeur.",
+      "background": { "$type": "color", "$value": { "dark": "{primitive.color.ink.950}", "light": "{primitive.color.paper.0}" } },
+      "foreground": { "$type": "color", "$value": { "dark": "{primitive.color.text.on-dark}", "light": "{primitive.color.text.on-light}" } },
+      "card": { "$type": "color", "$value": { "dark": "{primitive.color.ink.900}", "light": "{primitive.color.paper.50}" } },
+      "card-foreground": { "$type": "color", "$value": { "dark": "{primitive.color.text.on-dark}", "light": "{primitive.color.text.on-light}" } },
+      "popover": { "$type": "color", "$value": { "dark": "{primitive.color.ink.900}", "light": "{primitive.color.paper.0}" } },
+      "popover-foreground": { "$type": "color", "$value": { "dark": "{primitive.color.text.on-dark}", "light": "{primitive.color.text.on-light}" } },
+      "primary": { "$type": "color", "$value": { "dark": "{primitive.color.teal.500}", "light": "{primitive.color.teal.600}" } },
+      "primary-foreground": { "$type": "color", "$value": { "dark": "{primitive.color.absolute.black}", "light": "{primitive.color.absolute.white}" } },
+      "secondary": { "$type": "color", "$value": { "dark": "{primitive.color.ink.800}", "light": "{primitive.color.paper.100}" } },
+      "secondary-foreground": { "$type": "color", "$value": { "dark": "{primitive.color.text.on-dark}", "light": "{primitive.color.text.on-light}" } },
+      "muted": { "$type": "color", "$value": { "dark": "{primitive.color.ink.750}", "light": "{primitive.color.paper.100}" } },
+      "muted-foreground": { "$type": "color", "$value": { "dark": "{primitive.color.text.muted-on-dark}", "light": "{primitive.color.text.muted-on-light}" } },
+      "accent": { "$type": "color", "$value": { "dark": "{primitive.color.ink.800}", "light": "{primitive.color.paper.100}" } },
+      "accent-foreground": { "$type": "color", "$value": { "dark": "{primitive.color.text.on-dark}", "light": "{primitive.color.text.on-light}" } },
+      "destructive": { "$type": "color", "$value": { "dark": "{primitive.color.danger.300}", "light": "{primitive.color.danger.500}" } },
+      "destructive-foreground": { "$type": "color", "$value": { "dark": "{primitive.color.absolute.black}", "light": "{primitive.color.absolute.white}" } },
+      "border": { "$type": "color", "$value": { "dark": "{primitive.color.ink.750}", "light": "{primitive.color.paper.200}" } },
+      "input": { "$type": "color", "$value": { "dark": "{primitive.color.ink.750}", "light": "{primitive.color.paper.200}" } },
+      "ring": { "$type": "color", "$value": { "dark": "{primitive.color.teal.500}", "light": "{primitive.color.teal.600}" } },
+      "brand": { "$type": "color", "$value": { "dark": "{primitive.color.brand-teal.400}", "light": "{primitive.color.brand-teal.400}" } },
+      "status-info": { "$type": "color", "$value": { "dark": "{primitive.color.status.info.500}", "light": "{primitive.color.status.info.500}" } },
+      "status-info-ink": { "$type": "color", "$value": { "dark": "{primitive.color.status.info.300}", "light": "{primitive.color.status.info.700}" } },
+      "status-progress": { "$type": "color", "$value": { "dark": "{primitive.color.status.progress.500}", "light": "{primitive.color.status.progress.500}" } },
+      "status-progress-ink": { "$type": "color", "$value": { "dark": "{primitive.color.status.progress.300}", "light": "{primitive.color.status.progress.700}" } },
+      "status-attention": { "$type": "color", "$value": { "dark": "{primitive.color.status.attention.500}", "light": "{primitive.color.status.attention.500}" } },
+      "status-attention-ink": { "$type": "color", "$value": { "dark": "{primitive.color.status.attention.300}", "light": "{primitive.color.status.attention.700}" } },
+      "status-warning": { "$type": "color", "$value": { "dark": "{primitive.color.status.warning.500}", "light": "{primitive.color.status.warning.500}" } },
+      "status-warning-ink": { "$type": "color", "$value": { "dark": "{primitive.color.status.warning.300}", "light": "{primitive.color.status.warning.700}" } },
+      "status-danger": { "$type": "color", "$value": { "dark": "{primitive.color.status.danger.500}", "light": "{primitive.color.status.danger.500}" } },
+      "status-danger-ink": { "$type": "color", "$value": { "dark": "{primitive.color.status.danger.300}", "light": "{primitive.color.status.danger.700}" } },
+      "status-success": { "$type": "color", "$value": { "dark": "{primitive.color.status.success.500}", "light": "{primitive.color.status.success.500}" } },
+      "status-success-ink": { "$type": "color", "$value": { "dark": "{primitive.color.status.success.300}", "light": "{primitive.color.status.success.700}" } }
+    },
+    "radius": {
+      "$description": "Les rayons tels que les composants les nomment. Les modes ne les séparent pas : un rayon est le même de part et d'autre de la bascule, et le test de parité le vérifie comme les couleurs.",
+      "pill": { "$type": "dimension", "$value": { "dark": "{primitive.radius.pill}", "light": "{primitive.radius.pill}" } },
+      "control": { "$type": "dimension", "$value": { "dark": "{primitive.radius.control}", "light": "{primitive.radius.control}" } },
+      "field": { "$type": "dimension", "$value": { "dark": "{primitive.radius.field}", "light": "{primitive.radius.field}" } },
+      "chip": { "$type": "dimension", "$value": { "dark": "{primitive.radius.chip}", "light": "{primitive.radius.chip}" } }
+    },
+    "space": {
+      "$description": "L'espacement sémantique : ce que les composants lisent. La densité (ADR 0008) le multipliera en une passe, ici les deux modes portent la même valeur.",
+      "hairline": { "$type": "dimension", "$value": { "dark": "{primitive.space.hairline}", "light": "{primitive.space.hairline}" } },
+      "tight": { "$type": "dimension", "$value": { "dark": "{primitive.space.tight}", "light": "{primitive.space.tight}" } },
+      "snug": { "$type": "dimension", "$value": { "dark": "{primitive.space.snug}", "light": "{primitive.space.snug}" } },
+      "base": { "$type": "dimension", "$value": { "dark": "{primitive.space.base}", "light": "{primitive.space.base}" } },
+      "comfy": { "$type": "dimension", "$value": { "dark": "{primitive.space.comfy}", "light": "{primitive.space.comfy}" } },
+      "loose": { "$type": "dimension", "$value": { "dark": "{primitive.space.loose}", "light": "{primitive.space.loose}" } },
+      "section": { "$type": "dimension", "$value": { "dark": "{primitive.space.section}", "light": "{primitive.space.section}" } }
+    },
+    "type": {
+      "$description": "Les tailles et hauteurs de ligne sémantiques. Aucun composant ne les consomme encore : elles remplacent les tailles numériques au moment où le premier en aura besoin.",
+      "size": {
+        "micro": { "$type": "dimension", "$value": { "dark": "{primitive.type.size.micro}", "light": "{primitive.type.size.micro}" } },
+        "caption": { "$type": "dimension", "$value": { "dark": "{primitive.type.size.caption}", "light": "{primitive.type.size.caption}" } },
+        "body": { "$type": "dimension", "$value": { "dark": "{primitive.type.size.body}", "light": "{primitive.type.size.body}" } },
+        "lead": { "$type": "dimension", "$value": { "dark": "{primitive.type.size.lead}", "light": "{primitive.type.size.lead}" } },
+        "title": { "$type": "dimension", "$value": { "dark": "{primitive.type.size.title}", "light": "{primitive.type.size.title}" } },
+        "display": { "$type": "dimension", "$value": { "dark": "{primitive.type.size.display}", "light": "{primitive.type.size.display}" } }
+      },
+      "leading": {
+        "micro": { "$type": "dimension", "$value": { "dark": "{primitive.type.leading.micro}", "light": "{primitive.type.leading.micro}" } },
+        "caption": { "$type": "dimension", "$value": { "dark": "{primitive.type.leading.caption}", "light": "{primitive.type.leading.caption}" } },
+        "body": { "$type": "dimension", "$value": { "dark": "{primitive.type.leading.body}", "light": "{primitive.type.leading.body}" } },
+        "lead": { "$type": "dimension", "$value": { "dark": "{primitive.type.leading.lead}", "light": "{primitive.type.leading.lead}" } },
+        "title": { "$type": "dimension", "$value": { "dark": "{primitive.type.leading.title}", "light": "{primitive.type.leading.title}" } },
+        "display": { "$type": "dimension", "$value": { "dark": "{primitive.type.leading.display}", "light": "{primitive.type.leading.display}" } }
+      },
+      "weight": {
+        "regular": { "$type": "fontWeight", "$value": { "dark": 400, "light": 400 } },
+        "medium": { "$type": "fontWeight", "$value": { "dark": 500, "light": 500 } },
+        "strong": { "$type": "fontWeight", "$value": { "dark": 600, "light": 600 } }
+      },
+      "family": {
+        "sans": {
+          "$type": "fontFamily",
+          "$value": {
+            "dark": ["ui-sans-serif", "system-ui", "Segoe UI", "Roboto", "Helvetica Neue", "Arial", "sans-serif"],
+            "light": ["ui-sans-serif", "system-ui", "Segoe UI", "Roboto", "Helvetica Neue", "Arial", "sans-serif"]
+          }
+        }
+      }
+    }
+  }
+}

package/tokens/tokens.resource.json

@@ -0,0 +1,138 @@
+{
+  "$description": "La ressource `tokens` : la source unique aplatie, un inventaire par mode. Dérivée de `tokens/tokens.json` — ne pas éditer.",
+  "namespace": "--nomos",
+  "defaultMode": "dark",
+  "modes": [
+    "dark",
+    "light"
+  ],
+  "densities": {
+    "comfortable": 1,
+    "compact": 0.8
+  },
+  "defaultDensity": "comfortable",
+  "slots": {
+    "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": {
+      "--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"
+    }
+  }
+}