@nomosui/react 0.5.1 → 0.5.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/dist/index.js +29 -14
  2. package/dist/mcp/bin.js +17 -15
  3. package/dist/types/lib/tone.d.ts +5 -3
  4. package/package.json +1 -1
  5. package/tokens/theme.css +6 -0
  6. package/tokens/tokens.generated.css +24 -0
  7. package/tokens/tokens.json +25 -7
  8. package/tokens/tokens.resource.json +12 -0
package/dist/types/lib/tone.d.ts CHANGED
@@ -3,9 +3,11 @@
3
3
  * statut choisit l'intention (« danger », « succès »), et c'est le cœur qui sait la
4
4
  * rendre — l'app ne manipule plus un nom de couleur.
5
5
  *
6
- * Chaque ton lit deux emplacements sémantiques (`status-<ton>` pour la surface, lue à
7
- * faible opacité, et `status-<ton>-ink` pour l'encre) : c'est le token qui porte le
8
- * mode, pas la classe, donc le cœur ne connaît jamais le mode (ADR 0004, garde des tokens).
6
+ * Chaque ton lit trois emplacements sémantiques (`status-<ton>` pour l'accent, la
7
+ * bordure ; `status-<ton>-surface` pour le fond, **plein** — une carte qui flotte
8
+ * au-dessus du contenu ne doit pas laisser voir ce qui passe dessous ; et `status-<ton>-ink`
9
+ * pour l'encre) : c'est le token qui porte le mode, pas la classe, donc le cœur ne connaît
10
+ * jamais le mode (ADR 0004, ADR 0027).
9
11
  */
10
12
  export declare const TONES: readonly ["neutral", "info", "progress", "attention", "warning", "danger", "success"];
11
13
  export type Tone = (typeof TONES)[number];
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@nomosui/react",
3
3
  "private": false,
4
- "version": "0.5.1",
4
+ "version": "0.5.3",
5
5
  "type": "module",
6
6
  "description": "An app-agnostic design system, built in public: a core of tokens and components exposed to humans and agents.",
7
7
  "repository": {
package/tokens/theme.css CHANGED
@@ -53,16 +53,22 @@
53
53
  --color-scrim: hsl(var(--nomos-color-scrim));
54
54
 
55
55
  --color-status-info: hsl(var(--nomos-color-status-info));
56
+ --color-status-info-surface: hsl(var(--nomos-color-status-info-surface));
56
57
  --color-status-info-ink: hsl(var(--nomos-color-status-info-ink));
57
58
  --color-status-progress: hsl(var(--nomos-color-status-progress));
59
+ --color-status-progress-surface: hsl(var(--nomos-color-status-progress-surface));
58
60
  --color-status-progress-ink: hsl(var(--nomos-color-status-progress-ink));
59
61
  --color-status-attention: hsl(var(--nomos-color-status-attention));
62
+ --color-status-attention-surface: hsl(var(--nomos-color-status-attention-surface));
60
63
  --color-status-attention-ink: hsl(var(--nomos-color-status-attention-ink));
61
64
  --color-status-warning: hsl(var(--nomos-color-status-warning));
65
+ --color-status-warning-surface: hsl(var(--nomos-color-status-warning-surface));
62
66
  --color-status-warning-ink: hsl(var(--nomos-color-status-warning-ink));
63
67
  --color-status-danger: hsl(var(--nomos-color-status-danger));
68
+ --color-status-danger-surface: hsl(var(--nomos-color-status-danger-surface));
64
69
  --color-status-danger-ink: hsl(var(--nomos-color-status-danger-ink));
65
70
  --color-status-success: hsl(var(--nomos-color-status-success));
71
+ --color-status-success-surface: hsl(var(--nomos-color-status-success-surface));
66
72
  --color-status-success-ink: hsl(var(--nomos-color-status-success-ink));
67
73
 
68
74
  --radius-lg: var(--nomos-radius-control);
package/tokens/tokens.generated.css CHANGED
@@ -29,16 +29,22 @@
29
29
  --nomos-color-brand: #00c9b1;
30
30
  --nomos-color-scrim: 0 0% 0% / 0.8;
31
31
  --nomos-color-status-info: 199 89% 48%;
32
+ --nomos-color-status-info-surface: 202 49% 14%;
32
33
  --nomos-color-status-info-ink: 198 93% 74%;
33
34
  --nomos-color-status-progress: 258 90% 66%;
35
+ --nomos-color-status-progress-surface: 256 30% 17%;
34
36
  --nomos-color-status-progress-ink: 255 92% 85%;
35
37
  --nomos-color-status-attention: 38 92% 50%;
38
+ --nomos-color-status-attention-surface: 36 45% 14%;
36
39
  --nomos-color-status-attention-ink: 46 97% 65%;
37
40
  --nomos-color-status-warning: 25 95% 53%;
41
+ --nomos-color-status-warning-surface: 22 42% 15%;
38
42
  --nomos-color-status-warning-ink: 31 97% 72%;
39
43
  --nomos-color-status-danger: 0 84% 60%;
44
+ --nomos-color-status-danger-surface: 354 33% 15%;
40
45
  --nomos-color-status-danger-ink: 0 94% 82%;
41
46
  --nomos-color-status-success: 160 84% 39%;
47
+ --nomos-color-status-success-surface: 166 40% 12%;
42
48
  --nomos-color-status-success-ink: 156 72% 67%;
43
49
  --nomos-radius-pill: 9999px;
44
50
  --nomos-radius-control: 0.625rem;
@@ -105,16 +111,22 @@
105
111
  --nomos-color-brand: #00c9b1;
106
112
  --nomos-color-scrim: 0 0% 0% / 0.8;
107
113
  --nomos-color-status-info: 199 89% 48%;
114
+ --nomos-color-status-info-surface: 199 82% 92%;
108
115
  --nomos-color-status-info-ink: 201 96% 32%;
109
116
  --nomos-color-status-progress: 258 90% 66%;
117
+ --nomos-color-status-progress-surface: 258 90% 95%;
110
118
  --nomos-color-status-progress-ink: 263 70% 50%;
111
119
  --nomos-color-status-attention: 38 92% 50%;
120
+ --nomos-color-status-attention-surface: 38 92% 93%;
112
121
  --nomos-color-status-attention-ink: 26 90% 37%;
113
122
  --nomos-color-status-warning: 25 95% 53%;
123
+ --nomos-color-status-warning-surface: 25 95% 93%;
114
124
  --nomos-color-status-warning-ink: 17 88% 40%;
115
125
  --nomos-color-status-danger: 0 84% 60%;
126
+ --nomos-color-status-danger-surface: 0 84% 94%;
116
127
  --nomos-color-status-danger-ink: 0 74% 42%;
117
128
  --nomos-color-status-success: 160 84% 39%;
129
+ --nomos-color-status-success-surface: 160 54% 91%;
118
130
  --nomos-color-status-success-ink: 161 94% 25%;
119
131
  --nomos-radius-pill: 9999px;
120
132
  --nomos-radius-control: 0.625rem;
@@ -180,16 +192,22 @@
180
192
  --nomos-color-brand: #00c9b1;
181
193
  --nomos-color-scrim: 0 0% 0% / 0.8;
182
194
  --nomos-color-status-info: 199 89% 48%;
195
+ --nomos-color-status-info-surface: 202 49% 14%;
183
196
  --nomos-color-status-info-ink: 198 93% 74%;
184
197
  --nomos-color-status-progress: 258 90% 66%;
198
+ --nomos-color-status-progress-surface: 256 30% 17%;
185
199
  --nomos-color-status-progress-ink: 255 92% 85%;
186
200
  --nomos-color-status-attention: 38 92% 50%;
201
+ --nomos-color-status-attention-surface: 36 45% 14%;
187
202
  --nomos-color-status-attention-ink: 46 97% 65%;
188
203
  --nomos-color-status-warning: 25 95% 53%;
204
+ --nomos-color-status-warning-surface: 22 42% 15%;
189
205
  --nomos-color-status-warning-ink: 31 97% 72%;
190
206
  --nomos-color-status-danger: 0 84% 60%;
207
+ --nomos-color-status-danger-surface: 354 33% 15%;
191
208
  --nomos-color-status-danger-ink: 0 94% 82%;
192
209
  --nomos-color-status-success: 160 84% 39%;
210
+ --nomos-color-status-success-surface: 166 40% 12%;
193
211
  --nomos-color-status-success-ink: 156 72% 67%;
194
212
  --nomos-radius-pill: 9999px;
195
213
  --nomos-radius-control: 0.625rem;
@@ -254,16 +272,22 @@
254
272
  --nomos-color-brand: #00c9b1;
255
273
  --nomos-color-scrim: 0 0% 0% / 0.8;
256
274
  --nomos-color-status-info: 199 89% 48%;
275
+ --nomos-color-status-info-surface: 199 82% 92%;
257
276
  --nomos-color-status-info-ink: 201 96% 32%;
258
277
  --nomos-color-status-progress: 258 90% 66%;
278
+ --nomos-color-status-progress-surface: 258 90% 95%;
259
279
  --nomos-color-status-progress-ink: 263 70% 50%;
260
280
  --nomos-color-status-attention: 38 92% 50%;
281
+ --nomos-color-status-attention-surface: 38 92% 93%;
261
282
  --nomos-color-status-attention-ink: 26 90% 37%;
262
283
  --nomos-color-status-warning: 25 95% 53%;
284
+ --nomos-color-status-warning-surface: 25 95% 93%;
263
285
  --nomos-color-status-warning-ink: 17 88% 40%;
264
286
  --nomos-color-status-danger: 0 84% 60%;
287
+ --nomos-color-status-danger-surface: 0 84% 94%;
265
288
  --nomos-color-status-danger-ink: 0 74% 42%;
266
289
  --nomos-color-status-success: 160 84% 39%;
290
+ --nomos-color-status-success-surface: 160 54% 91%;
267
291
  --nomos-color-status-success-ink: 161 94% 25%;
268
292
  --nomos-radius-pill: 9999px;
269
293
  --nomos-radius-control: 0.625rem;
package/tokens/tokens.json CHANGED
@@ -45,36 +45,48 @@
45
45
  "500": { "$type": "color", "$value": { "colorSpace": "hsl", "components": [0, 72, 51] } }
46
46
  },
47
47
  "status": {
48
- "$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).",
48
+ "$description": "Les rampes de statut du vocabulaire de tons (ADR 0004). Chaque ton porte un accent (500, pour la bordure), une surface **pleine** (100 en clair, 900 en sombre — le fond opaque d'une carte flottante, calculé comme le ton 500 composé à 15 % sur le fond du mode) et une encre (300 en sombre, 700 en clair, lisible sur la surface).",
49
49
  "info": {
50
+ "100": { "$type": "color", "$value": { "colorSpace": "hsl", "components": [199, 82, 92] } },
51
+ "300": { "$type": "color", "$value": { "colorSpace": "hsl", "components": [198, 93, 74] } },
50
52
  "500": { "$type": "color", "$value": { "colorSpace": "hsl", "components": [199, 89, 48] } },
51
53
  "700": { "$type": "color", "$value": { "colorSpace": "hsl", "components": [201, 96, 32] } },
52
- "300": { "$type": "color", "$value": { "colorSpace": "hsl", "components": [198, 93, 74] } }
54
+ "900": { "$type": "color", "$value": { "colorSpace": "hsl", "components": [202, 49, 14] } }
53
55
  },
54
56
  "progress": {
57
+ "100": { "$type": "color", "$value": { "colorSpace": "hsl", "components": [258, 90, 95] } },
58
+ "300": { "$type": "color", "$value": { "colorSpace": "hsl", "components": [255, 92, 85] } },
55
59
  "500": { "$type": "color", "$value": { "colorSpace": "hsl", "components": [258, 90, 66] } },
56
60
  "700": { "$type": "color", "$value": { "colorSpace": "hsl", "components": [263, 70, 50] } },
57
- "300": { "$type": "color", "$value": { "colorSpace": "hsl", "components": [255, 92, 85] } }
61
+ "900": { "$type": "color", "$value": { "colorSpace": "hsl", "components": [256, 30, 17] } }
58
62
  },
59
63
  "attention": {
64
+ "100": { "$type": "color", "$value": { "colorSpace": "hsl", "components": [38, 92, 93] } },
65
+ "300": { "$type": "color", "$value": { "colorSpace": "hsl", "components": [46, 97, 65] } },
60
66
  "500": { "$type": "color", "$value": { "colorSpace": "hsl", "components": [38, 92, 50] } },
61
67
  "700": { "$type": "color", "$value": { "colorSpace": "hsl", "components": [26, 90, 37] } },
62
- "300": { "$type": "color", "$value": { "colorSpace": "hsl", "components": [46, 97, 65] } }
68
+ "900": { "$type": "color", "$value": { "colorSpace": "hsl", "components": [36, 45, 14] } }
63
69
  },
64
70
  "warning": {
71
+ "100": { "$type": "color", "$value": { "colorSpace": "hsl", "components": [25, 95, 93] } },
72
+ "300": { "$type": "color", "$value": { "colorSpace": "hsl", "components": [31, 97, 72] } },
65
73
  "500": { "$type": "color", "$value": { "colorSpace": "hsl", "components": [25, 95, 53] } },
66
74
  "700": { "$type": "color", "$value": { "colorSpace": "hsl", "components": [17, 88, 40] } },
67
- "300": { "$type": "color", "$value": { "colorSpace": "hsl", "components": [31, 97, 72] } }
75
+ "900": { "$type": "color", "$value": { "colorSpace": "hsl", "components": [22, 42, 15] } }
68
76
  },
69
77
  "danger": {
78
+ "100": { "$type": "color", "$value": { "colorSpace": "hsl", "components": [0, 84, 94] } },
79
+ "300": { "$type": "color", "$value": { "colorSpace": "hsl", "components": [0, 94, 82] } },
70
80
  "500": { "$type": "color", "$value": { "colorSpace": "hsl", "components": [0, 84, 60] } },
71
81
  "700": { "$type": "color", "$value": { "colorSpace": "hsl", "components": [0, 74, 42] } },
72
- "300": { "$type": "color", "$value": { "colorSpace": "hsl", "components": [0, 94, 82] } }
82
+ "900": { "$type": "color", "$value": { "colorSpace": "hsl", "components": [354, 33, 15] } }
73
83
  },
74
84
  "success": {
85
+ "100": { "$type": "color", "$value": { "colorSpace": "hsl", "components": [160, 54, 91] } },
86
+ "300": { "$type": "color", "$value": { "colorSpace": "hsl", "components": [156, 72, 67] } },
75
87
  "500": { "$type": "color", "$value": { "colorSpace": "hsl", "components": [160, 84, 39] } },
76
88
  "700": { "$type": "color", "$value": { "colorSpace": "hsl", "components": [161, 94, 25] } },
77
- "300": { "$type": "color", "$value": { "colorSpace": "hsl", "components": [156, 72, 67] } }
89
+ "900": { "$type": "color", "$value": { "colorSpace": "hsl", "components": [166, 40, 12] } }
78
90
  }
79
91
  },
80
92
  "absolute": {
@@ -185,16 +197,22 @@
185
197
  "brand": { "$type": "color", "$value": { "dark": "{primitive.color.brand-teal.400}", "light": "{primitive.color.brand-teal.400}" } },
186
198
  "scrim": { "$type": "color", "$value": { "dark": "{primitive.color.scrim}", "light": "{primitive.color.scrim}" } },
187
199
  "status-info": { "$type": "color", "$value": { "dark": "{primitive.color.status.info.500}", "light": "{primitive.color.status.info.500}" } },
200
+ "status-info-surface": { "$type": "color", "$value": { "dark": "{primitive.color.status.info.900}", "light": "{primitive.color.status.info.100}" } },
188
201
  "status-info-ink": { "$type": "color", "$value": { "dark": "{primitive.color.status.info.300}", "light": "{primitive.color.status.info.700}" } },
189
202
  "status-progress": { "$type": "color", "$value": { "dark": "{primitive.color.status.progress.500}", "light": "{primitive.color.status.progress.500}" } },
203
+ "status-progress-surface": { "$type": "color", "$value": { "dark": "{primitive.color.status.progress.900}", "light": "{primitive.color.status.progress.100}" } },
190
204
  "status-progress-ink": { "$type": "color", "$value": { "dark": "{primitive.color.status.progress.300}", "light": "{primitive.color.status.progress.700}" } },
191
205
  "status-attention": { "$type": "color", "$value": { "dark": "{primitive.color.status.attention.500}", "light": "{primitive.color.status.attention.500}" } },
206
+ "status-attention-surface": { "$type": "color", "$value": { "dark": "{primitive.color.status.attention.900}", "light": "{primitive.color.status.attention.100}" } },
192
207
  "status-attention-ink": { "$type": "color", "$value": { "dark": "{primitive.color.status.attention.300}", "light": "{primitive.color.status.attention.700}" } },
193
208
  "status-warning": { "$type": "color", "$value": { "dark": "{primitive.color.status.warning.500}", "light": "{primitive.color.status.warning.500}" } },
209
+ "status-warning-surface": { "$type": "color", "$value": { "dark": "{primitive.color.status.warning.900}", "light": "{primitive.color.status.warning.100}" } },
194
210
  "status-warning-ink": { "$type": "color", "$value": { "dark": "{primitive.color.status.warning.300}", "light": "{primitive.color.status.warning.700}" } },
195
211
  "status-danger": { "$type": "color", "$value": { "dark": "{primitive.color.status.danger.500}", "light": "{primitive.color.status.danger.500}" } },
212
+ "status-danger-surface": { "$type": "color", "$value": { "dark": "{primitive.color.status.danger.900}", "light": "{primitive.color.status.danger.100}" } },
196
213
  "status-danger-ink": { "$type": "color", "$value": { "dark": "{primitive.color.status.danger.300}", "light": "{primitive.color.status.danger.700}" } },
197
214
  "status-success": { "$type": "color", "$value": { "dark": "{primitive.color.status.success.500}", "light": "{primitive.color.status.success.500}" } },
215
+ "status-success-surface": { "$type": "color", "$value": { "dark": "{primitive.color.status.success.900}", "light": "{primitive.color.status.success.100}" } },
198
216
  "status-success-ink": { "$type": "color", "$value": { "dark": "{primitive.color.status.success.300}", "light": "{primitive.color.status.success.700}" } }
199
217
  },
200
218
  "radius": {
package/tokens/tokens.resource.json CHANGED
@@ -35,16 +35,22 @@
35
35
  "--nomos-color-brand": "#00c9b1",
36
36
  "--nomos-color-scrim": "0 0% 0% / 0.8",
37
37
  "--nomos-color-status-info": "199 89% 48%",
38
+ "--nomos-color-status-info-surface": "202 49% 14%",
38
39
  "--nomos-color-status-info-ink": "198 93% 74%",
39
40
  "--nomos-color-status-progress": "258 90% 66%",
41
+ "--nomos-color-status-progress-surface": "256 30% 17%",
40
42
  "--nomos-color-status-progress-ink": "255 92% 85%",
41
43
  "--nomos-color-status-attention": "38 92% 50%",
44
+ "--nomos-color-status-attention-surface": "36 45% 14%",
42
45
  "--nomos-color-status-attention-ink": "46 97% 65%",
43
46
  "--nomos-color-status-warning": "25 95% 53%",
47
+ "--nomos-color-status-warning-surface": "22 42% 15%",
44
48
  "--nomos-color-status-warning-ink": "31 97% 72%",
45
49
  "--nomos-color-status-danger": "0 84% 60%",
50
+ "--nomos-color-status-danger-surface": "354 33% 15%",
46
51
  "--nomos-color-status-danger-ink": "0 94% 82%",
47
52
  "--nomos-color-status-success": "160 84% 39%",
53
+ "--nomos-color-status-success-surface": "166 40% 12%",
48
54
  "--nomos-color-status-success-ink": "156 72% 67%",
49
55
  "--nomos-radius-pill": "9999px",
50
56
  "--nomos-radius-control": "0.625rem",
@@ -107,16 +113,22 @@
107
113
  "--nomos-color-brand": "#00c9b1",
108
114
  "--nomos-color-scrim": "0 0% 0% / 0.8",
109
115
  "--nomos-color-status-info": "199 89% 48%",
116
+ "--nomos-color-status-info-surface": "199 82% 92%",
110
117
  "--nomos-color-status-info-ink": "201 96% 32%",
111
118
  "--nomos-color-status-progress": "258 90% 66%",
119
+ "--nomos-color-status-progress-surface": "258 90% 95%",
112
120
  "--nomos-color-status-progress-ink": "263 70% 50%",
113
121
  "--nomos-color-status-attention": "38 92% 50%",
122
+ "--nomos-color-status-attention-surface": "38 92% 93%",
114
123
  "--nomos-color-status-attention-ink": "26 90% 37%",
115
124
  "--nomos-color-status-warning": "25 95% 53%",
125
+ "--nomos-color-status-warning-surface": "25 95% 93%",
116
126
  "--nomos-color-status-warning-ink": "17 88% 40%",
117
127
  "--nomos-color-status-danger": "0 84% 60%",
128
+ "--nomos-color-status-danger-surface": "0 84% 94%",
118
129
  "--nomos-color-status-danger-ink": "0 74% 42%",
119
130
  "--nomos-color-status-success": "160 84% 39%",
131
+ "--nomos-color-status-success-surface": "160 54% 91%",
120
132
  "--nomos-color-status-success-ink": "161 94% 25%",
121
133
  "--nomos-radius-pill": "9999px",
122
134
  "--nomos-radius-control": "0.625rem",