@mlola-ui/engine 1.0.3 → 1.0.4
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.
- package/generated/agents.json +419 -0
- package/generated/assets.json +807 -122
- package/package.json +1 -1
|
@@ -0,0 +1,419 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 1,
|
|
3
|
+
"description": "The Mlola UI design language as data: tokens by purpose, the rules for new UI, and the composition primitives. Generated with agents.md.",
|
|
4
|
+
"themes": [
|
|
5
|
+
{
|
|
6
|
+
"id": "graphite",
|
|
7
|
+
"name": "Graphite"
|
|
8
|
+
},
|
|
9
|
+
{
|
|
10
|
+
"id": "atelier",
|
|
11
|
+
"name": "Atelier Umami"
|
|
12
|
+
},
|
|
13
|
+
{
|
|
14
|
+
"id": "machined",
|
|
15
|
+
"name": "Machined Titanium"
|
|
16
|
+
},
|
|
17
|
+
{
|
|
18
|
+
"id": "aerogel",
|
|
19
|
+
"name": "Aerogel Glass"
|
|
20
|
+
},
|
|
21
|
+
{
|
|
22
|
+
"id": "nordic",
|
|
23
|
+
"name": "Nordic Earth"
|
|
24
|
+
}
|
|
25
|
+
],
|
|
26
|
+
"tokens": [
|
|
27
|
+
{
|
|
28
|
+
"group": "Planes and ink",
|
|
29
|
+
"purpose": "Backgrounds, surfaces, the three levels of text, borders.",
|
|
30
|
+
"names": [
|
|
31
|
+
"--ml-background",
|
|
32
|
+
"--ml-background-subtle",
|
|
33
|
+
"--ml-surface",
|
|
34
|
+
"--ml-surface-elevated",
|
|
35
|
+
"--ml-text",
|
|
36
|
+
"--ml-text-muted",
|
|
37
|
+
"--ml-text-faint",
|
|
38
|
+
"--ml-border",
|
|
39
|
+
"--ml-border-subtle"
|
|
40
|
+
]
|
|
41
|
+
},
|
|
42
|
+
{
|
|
43
|
+
"group": "Color roles",
|
|
44
|
+
"purpose": "Each role is a fill with its `-foreground`, a `-text` for text and marks on the page, and (primary) a `-subtle` tint.",
|
|
45
|
+
"names": [
|
|
46
|
+
"--ml-primary",
|
|
47
|
+
"--ml-primary-foreground",
|
|
48
|
+
"--ml-primary-text",
|
|
49
|
+
"--ml-primary-subtle",
|
|
50
|
+
"--ml-success",
|
|
51
|
+
"--ml-success-foreground",
|
|
52
|
+
"--ml-success-text",
|
|
53
|
+
"--ml-warning",
|
|
54
|
+
"--ml-warning-foreground",
|
|
55
|
+
"--ml-warning-text",
|
|
56
|
+
"--ml-danger",
|
|
57
|
+
"--ml-danger-foreground",
|
|
58
|
+
"--ml-danger-text",
|
|
59
|
+
"--ml-info",
|
|
60
|
+
"--ml-info-foreground",
|
|
61
|
+
"--ml-info-text"
|
|
62
|
+
]
|
|
63
|
+
},
|
|
64
|
+
{
|
|
65
|
+
"group": "Charts",
|
|
66
|
+
"purpose": "A categorical palette for series, 3:1 on the surface. Never a status.",
|
|
67
|
+
"names": [
|
|
68
|
+
"--ml-chart-1",
|
|
69
|
+
"--ml-chart-2",
|
|
70
|
+
"--ml-chart-3",
|
|
71
|
+
"--ml-chart-4",
|
|
72
|
+
"--ml-chart-5",
|
|
73
|
+
"--ml-chart-6"
|
|
74
|
+
]
|
|
75
|
+
},
|
|
76
|
+
{
|
|
77
|
+
"group": "Interaction and light",
|
|
78
|
+
"purpose": "Focus, hover and pressed fills, tracks, the veil behind overlays, light and knobs.",
|
|
79
|
+
"names": [
|
|
80
|
+
"--ml-focus",
|
|
81
|
+
"--ml-primary-hover",
|
|
82
|
+
"--ml-fill-hover",
|
|
83
|
+
"--ml-fill-active",
|
|
84
|
+
"--ml-track",
|
|
85
|
+
"--ml-control-border",
|
|
86
|
+
"--ml-ring",
|
|
87
|
+
"--ml-scrim",
|
|
88
|
+
"--ml-highlight",
|
|
89
|
+
"--ml-knob",
|
|
90
|
+
"--ml-knob-shadow",
|
|
91
|
+
"--ml-sheen"
|
|
92
|
+
]
|
|
93
|
+
},
|
|
94
|
+
{
|
|
95
|
+
"group": "Spacing",
|
|
96
|
+
"purpose": "The only spacing: gaps, padding, margins, offsets.",
|
|
97
|
+
"names": [
|
|
98
|
+
"--ml-space-px",
|
|
99
|
+
"--ml-space-0-5",
|
|
100
|
+
"--ml-space-1",
|
|
101
|
+
"--ml-space-1-5",
|
|
102
|
+
"--ml-space-2",
|
|
103
|
+
"--ml-space-2-5",
|
|
104
|
+
"--ml-space-3",
|
|
105
|
+
"--ml-space-3-5",
|
|
106
|
+
"--ml-space-4",
|
|
107
|
+
"--ml-space-4-5",
|
|
108
|
+
"--ml-space-5",
|
|
109
|
+
"--ml-space-6",
|
|
110
|
+
"--ml-space-7",
|
|
111
|
+
"--ml-space-8",
|
|
112
|
+
"--ml-space-9",
|
|
113
|
+
"--ml-space-10",
|
|
114
|
+
"--ml-space-12",
|
|
115
|
+
"--ml-space-14",
|
|
116
|
+
"--ml-space-16"
|
|
117
|
+
]
|
|
118
|
+
},
|
|
119
|
+
{
|
|
120
|
+
"group": "Type",
|
|
121
|
+
"purpose": "The only type sizes, line heights, families and weights.",
|
|
122
|
+
"names": [
|
|
123
|
+
"--ml-type-2xs",
|
|
124
|
+
"--ml-type-xs",
|
|
125
|
+
"--ml-type-sm",
|
|
126
|
+
"--ml-type-base",
|
|
127
|
+
"--ml-type-md",
|
|
128
|
+
"--ml-type-lg",
|
|
129
|
+
"--ml-type-xl",
|
|
130
|
+
"--ml-type-2xl",
|
|
131
|
+
"--ml-leading-tight",
|
|
132
|
+
"--ml-leading-snug",
|
|
133
|
+
"--ml-leading-normal",
|
|
134
|
+
"--ml-font-sans",
|
|
135
|
+
"--ml-font-display",
|
|
136
|
+
"--ml-font-mono",
|
|
137
|
+
"--ml-display-weight",
|
|
138
|
+
"--ml-body-leading",
|
|
139
|
+
"--ml-tracking"
|
|
140
|
+
]
|
|
141
|
+
},
|
|
142
|
+
{
|
|
143
|
+
"group": "Density",
|
|
144
|
+
"purpose": "Control heights, panel padding, the touch target.",
|
|
145
|
+
"names": [
|
|
146
|
+
"--ml-control-sm",
|
|
147
|
+
"--ml-control-md",
|
|
148
|
+
"--ml-control-lg",
|
|
149
|
+
"--ml-panel-padding",
|
|
150
|
+
"--ml-target-min"
|
|
151
|
+
]
|
|
152
|
+
},
|
|
153
|
+
{
|
|
154
|
+
"group": "Shape",
|
|
155
|
+
"purpose": "Corner radii by the size of the thing, and the border weight.",
|
|
156
|
+
"names": [
|
|
157
|
+
"--ml-radius-xs",
|
|
158
|
+
"--ml-radius-sm",
|
|
159
|
+
"--ml-radius-md",
|
|
160
|
+
"--ml-radius-lg",
|
|
161
|
+
"--ml-radius-pill",
|
|
162
|
+
"--ml-border-width"
|
|
163
|
+
]
|
|
164
|
+
},
|
|
165
|
+
{
|
|
166
|
+
"group": "Depth and material",
|
|
167
|
+
"purpose": "Elevation, and the material a floating surface is made of.",
|
|
168
|
+
"names": [
|
|
169
|
+
"--ml-texture-opacity",
|
|
170
|
+
"--ml-material",
|
|
171
|
+
"--ml-surface-alpha",
|
|
172
|
+
"--ml-surface-blur",
|
|
173
|
+
"--ml-surface-grain",
|
|
174
|
+
"--ml-surface-highlight",
|
|
175
|
+
"--ml-shadow-xs",
|
|
176
|
+
"--ml-shadow-sm",
|
|
177
|
+
"--ml-shadow-md",
|
|
178
|
+
"--ml-shadow-lg",
|
|
179
|
+
"--ml-shadow-xl",
|
|
180
|
+
"--ml-shadow-tint"
|
|
181
|
+
]
|
|
182
|
+
},
|
|
183
|
+
{
|
|
184
|
+
"group": "Motion",
|
|
185
|
+
"purpose": "Every transition and entrance.",
|
|
186
|
+
"names": [
|
|
187
|
+
"--ml-duration-fast",
|
|
188
|
+
"--ml-duration-normal",
|
|
189
|
+
"--ml-duration-slow",
|
|
190
|
+
"--ml-duration-reveal",
|
|
191
|
+
"--ml-ease-standard",
|
|
192
|
+
"--ml-ease-spring",
|
|
193
|
+
"--ml-ease-bounce"
|
|
194
|
+
]
|
|
195
|
+
},
|
|
196
|
+
{
|
|
197
|
+
"group": "Layers",
|
|
198
|
+
"purpose": "The one stacking order.",
|
|
199
|
+
"names": [
|
|
200
|
+
"--ml-layer-raised",
|
|
201
|
+
"--ml-layer-sticky",
|
|
202
|
+
"--ml-layer-header",
|
|
203
|
+
"--ml-layer-dropdown",
|
|
204
|
+
"--ml-layer-overlay",
|
|
205
|
+
"--ml-layer-modal",
|
|
206
|
+
"--ml-layer-popover",
|
|
207
|
+
"--ml-layer-toast",
|
|
208
|
+
"--ml-layer-tooltip",
|
|
209
|
+
"--ml-layer-top"
|
|
210
|
+
]
|
|
211
|
+
},
|
|
212
|
+
{
|
|
213
|
+
"group": "Icons",
|
|
214
|
+
"purpose": "The theme's icon channel.",
|
|
215
|
+
"names": [
|
|
216
|
+
"--ml-icon-stroke"
|
|
217
|
+
]
|
|
218
|
+
}
|
|
219
|
+
],
|
|
220
|
+
"rules": "## Designing new UI in the Mlola language\n\nWhen the elements above do not cover what you need, build it the way they are\nbuilt, and it will look like it belongs.\n\n1. **Compose first.** Reach for a component, then a layout primitive, and\n write CSS only for what neither covers. Put it in a layer of your own,\n declared before `mlola.accessibility` so the accessibility guarantees\n still win:\n `@layer mlola.tokens, mlola.foundations, mlola.materials, mlola.recipes, mlola.motion, app, mlola.accessibility;`\n2. **Name what it is, not how it looks.** One class per element role, with\n your own prefix (not `ml-`, so a later Mlola element never collides).\n State and variant go in `data-*` and `aria-*`, never in a second class.\n Reuse the shared words: `data-tone` is `neutral primary info success\n warning danger`; `data-size` is `xs sm md lg xl`; work that went\n wrong is `error`.\n3. **Color by role, never by value.** Planes are `background`,\n `background-subtle`, `surface`, `surface-elevated`. Ink is `text`,\n `text-muted`, `text-faint`. A colored fill (`primary`, `danger`, …)\n always carries its `-foreground`. Colored text, icons, lines and status\n marks on the page use the `-text` role: fills are only kept 1.5:1 from the\n page, enough for an area, not for meaning. Series use `chart-1`…`chart-6`.\n4. **Measure with the scales.** Spacing from `--ml-space-*`, type from\n `--ml-type-*` with `--ml-leading-*`, control heights from\n `--ml-control-*`, panel padding from `--ml-panel-padding`. A `clamp()`\n between two steps is fine; a value invented between them is not.\n5. **Shape and depth come from the theme.** Radii by the size of the thing\n (`xs` a tag, `sm` a small control, `md` a control or card, `lg` a panel\n or dialog, `pill`). Elevation from `--ml-shadow-*`; a floating surface\n also takes the material: `--ml-surface-alpha`, `--ml-surface-blur`,\n `--ml-surface-highlight`.\n6. **Move with the theme.** Durations from `--ml-duration-*`, easing from\n `--ml-ease-*`. Reduced motion is handled by the engine.\n7. **Stack with the layers.** `--ml-layer-*`, never a raw z-index above 9.\n8. **Keep it usable by hand.** Never remove an outline without a\n `:focus-visible` style in its place. Targets are at least 24px; a smaller\n control adds `data-hit=\"expand\"` for touch. Text is never under\n `--ml-type-2xs`.\n9. **Leave the theme alone.** `data-theme` and `data-mode` belong to the\n engine; never set them for a component's own meaning, and never style a\n theme or mode by name. If something must differ by theme, it is a token.\n",
|
|
221
|
+
"primitives": [
|
|
222
|
+
{
|
|
223
|
+
"name": "ml-actions",
|
|
224
|
+
"note": ""
|
|
225
|
+
},
|
|
226
|
+
{
|
|
227
|
+
"name": "ml-brand",
|
|
228
|
+
"note": ""
|
|
229
|
+
},
|
|
230
|
+
{
|
|
231
|
+
"name": "ml-brand-mark",
|
|
232
|
+
"note": ""
|
|
233
|
+
},
|
|
234
|
+
{
|
|
235
|
+
"name": "ml-brand-name",
|
|
236
|
+
"note": ""
|
|
237
|
+
},
|
|
238
|
+
{
|
|
239
|
+
"name": "ml-chart",
|
|
240
|
+
"note": ""
|
|
241
|
+
},
|
|
242
|
+
{
|
|
243
|
+
"name": "ml-chart-bar",
|
|
244
|
+
"note": ""
|
|
245
|
+
},
|
|
246
|
+
{
|
|
247
|
+
"name": "ml-chart-bars",
|
|
248
|
+
"note": ""
|
|
249
|
+
},
|
|
250
|
+
{
|
|
251
|
+
"name": "ml-chart-heading",
|
|
252
|
+
"note": ""
|
|
253
|
+
},
|
|
254
|
+
{
|
|
255
|
+
"name": "ml-cluster",
|
|
256
|
+
"note": ""
|
|
257
|
+
},
|
|
258
|
+
{
|
|
259
|
+
"name": "ml-definition-list",
|
|
260
|
+
"note": ""
|
|
261
|
+
},
|
|
262
|
+
{
|
|
263
|
+
"name": "ml-display",
|
|
264
|
+
"note": ""
|
|
265
|
+
},
|
|
266
|
+
{
|
|
267
|
+
"name": "ml-divider",
|
|
268
|
+
"note": ""
|
|
269
|
+
},
|
|
270
|
+
{
|
|
271
|
+
"name": "ml-empty-state",
|
|
272
|
+
"note": ""
|
|
273
|
+
},
|
|
274
|
+
{
|
|
275
|
+
"name": "ml-eyebrow",
|
|
276
|
+
"note": ""
|
|
277
|
+
},
|
|
278
|
+
{
|
|
279
|
+
"name": "ml-filter-chip",
|
|
280
|
+
"note": ""
|
|
281
|
+
},
|
|
282
|
+
{
|
|
283
|
+
"name": "ml-filter-group",
|
|
284
|
+
"note": ""
|
|
285
|
+
},
|
|
286
|
+
{
|
|
287
|
+
"name": "ml-fine-print",
|
|
288
|
+
"note": ""
|
|
289
|
+
},
|
|
290
|
+
{
|
|
291
|
+
"name": "ml-form",
|
|
292
|
+
"note": ""
|
|
293
|
+
},
|
|
294
|
+
{
|
|
295
|
+
"name": "ml-form-message",
|
|
296
|
+
"note": ""
|
|
297
|
+
},
|
|
298
|
+
{
|
|
299
|
+
"name": "ml-form-options",
|
|
300
|
+
"note": ""
|
|
301
|
+
},
|
|
302
|
+
{
|
|
303
|
+
"name": "ml-grid",
|
|
304
|
+
"note": ""
|
|
305
|
+
},
|
|
306
|
+
{
|
|
307
|
+
"name": "ml-heading",
|
|
308
|
+
"note": ""
|
|
309
|
+
},
|
|
310
|
+
{
|
|
311
|
+
"name": "ml-icon-chip",
|
|
312
|
+
"note": ""
|
|
313
|
+
},
|
|
314
|
+
{
|
|
315
|
+
"name": "ml-inline-form",
|
|
316
|
+
"note": ""
|
|
317
|
+
},
|
|
318
|
+
{
|
|
319
|
+
"name": "ml-inline-form-field",
|
|
320
|
+
"note": ""
|
|
321
|
+
},
|
|
322
|
+
{
|
|
323
|
+
"name": "ml-label",
|
|
324
|
+
"note": ""
|
|
325
|
+
},
|
|
326
|
+
{
|
|
327
|
+
"name": "ml-lede",
|
|
328
|
+
"note": ""
|
|
329
|
+
},
|
|
330
|
+
{
|
|
331
|
+
"name": "ml-link",
|
|
332
|
+
"note": "A glyph inside a link flows with the text instead of breaking the line."
|
|
333
|
+
},
|
|
334
|
+
{
|
|
335
|
+
"name": "ml-page-shell",
|
|
336
|
+
"note": "A full page: header, main and footer stacked on the page background."
|
|
337
|
+
},
|
|
338
|
+
{
|
|
339
|
+
"name": "ml-person",
|
|
340
|
+
"note": ""
|
|
341
|
+
},
|
|
342
|
+
{
|
|
343
|
+
"name": "ml-person-copy",
|
|
344
|
+
"note": ""
|
|
345
|
+
},
|
|
346
|
+
{
|
|
347
|
+
"name": "ml-positive",
|
|
348
|
+
"note": ""
|
|
349
|
+
},
|
|
350
|
+
{
|
|
351
|
+
"name": "ml-price",
|
|
352
|
+
"note": ""
|
|
353
|
+
},
|
|
354
|
+
{
|
|
355
|
+
"name": "ml-required-mark",
|
|
356
|
+
"note": ""
|
|
357
|
+
},
|
|
358
|
+
{
|
|
359
|
+
"name": "ml-section",
|
|
360
|
+
"note": ""
|
|
361
|
+
},
|
|
362
|
+
{
|
|
363
|
+
"name": "ml-section-description",
|
|
364
|
+
"note": ""
|
|
365
|
+
},
|
|
366
|
+
{
|
|
367
|
+
"name": "ml-section-header",
|
|
368
|
+
"note": ""
|
|
369
|
+
},
|
|
370
|
+
{
|
|
371
|
+
"name": "ml-section-header-centered",
|
|
372
|
+
"note": ""
|
|
373
|
+
},
|
|
374
|
+
{
|
|
375
|
+
"name": "ml-section-muted",
|
|
376
|
+
"note": ""
|
|
377
|
+
},
|
|
378
|
+
{
|
|
379
|
+
"name": "ml-section-shell",
|
|
380
|
+
"note": ""
|
|
381
|
+
},
|
|
382
|
+
{
|
|
383
|
+
"name": "ml-stack",
|
|
384
|
+
"note": ""
|
|
385
|
+
},
|
|
386
|
+
{
|
|
387
|
+
"name": "ml-stat",
|
|
388
|
+
"note": ""
|
|
389
|
+
},
|
|
390
|
+
{
|
|
391
|
+
"name": "ml-stat-card",
|
|
392
|
+
"note": ""
|
|
393
|
+
},
|
|
394
|
+
{
|
|
395
|
+
"name": "ml-stat-grid",
|
|
396
|
+
"note": ""
|
|
397
|
+
},
|
|
398
|
+
{
|
|
399
|
+
"name": "ml-stat-list",
|
|
400
|
+
"note": ""
|
|
401
|
+
},
|
|
402
|
+
{
|
|
403
|
+
"name": "ml-stat-meta",
|
|
404
|
+
"note": ""
|
|
405
|
+
},
|
|
406
|
+
{
|
|
407
|
+
"name": "ml-stat-value",
|
|
408
|
+
"note": ""
|
|
409
|
+
},
|
|
410
|
+
{
|
|
411
|
+
"name": "ml-text-primary",
|
|
412
|
+
"note": ""
|
|
413
|
+
},
|
|
414
|
+
{
|
|
415
|
+
"name": "ml-value",
|
|
416
|
+
"note": ""
|
|
417
|
+
}
|
|
418
|
+
]
|
|
419
|
+
}
|