@maggioli-design-system/styles 17.0.1 → 17.1.0
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/README.md +58 -0
- package/dist/css/colors-hex-brand-rnd.css +2 -2
- package/dist/css/colors-hex-brand.css +2 -2
- package/dist/css/colors-hex-default.css +2 -2
- package/dist/css/colors-hex-label.css +2 -2
- package/dist/css/colors-hex-status.css +2 -2
- package/dist/css/colors-hex-theme.css +2 -2
- package/dist/css/colors-hex-tones.css +2 -2
- package/dist/css/colors-hex.css +2 -2
- package/dist/css/colors-rgb-brand-rnd.css +2 -2
- package/dist/css/colors-rgb-brand.css +2 -2
- package/dist/css/colors-rgb-default.css +2 -2
- package/dist/css/colors-rgb-label.css +2 -2
- package/dist/css/colors-rgb-status.css +2 -2
- package/dist/css/colors-rgb-theme.css +2 -2
- package/dist/css/colors-rgb-tones.css +2 -2
- package/dist/css/colors-rgb.css +2 -2
- package/dist/css/tailwind-theme-color.css +2 -2
- package/dist/css/tailwind-theme-typography.css +2 -2
- package/dist/css/tokens.editor.css +15 -0
- package/dist/css/transitions.css +2 -2
- package/dist/css/typography.css +2 -2
- package/dist/dtcg/corner-shape-round.tokens.json +128 -0
- package/dist/dtcg/globals.tokens.json +722 -0
- package/dist/dtcg/magma.resolver.json +126 -0
- package/dist/dtcg/theme-depth-flat.tokens.json +152 -0
- package/dist/tailwind/consumption.json +4577 -0
- package/package.json +7 -4
package/README.md
CHANGED
|
@@ -264,6 +264,62 @@ never match, which makes an accidental import a no-op.
|
|
|
264
264
|
|
|
265
265
|
---
|
|
266
266
|
|
|
267
|
+
### Token data
|
|
268
|
+
|
|
269
|
+
Two kinds of generated JSON describe this package for tools that read tokens rather than
|
|
270
|
+
paint with them (a documentation site, a design tool). They complete the DTCG export of
|
|
271
|
+
`@maggioli-design-system/design-tokens` (its README, "Token data (DTCG)"), and use the
|
|
272
|
+
same names: a token is keyed by the custom property it is published as, the
|
|
273
|
+
`$extensions["it.maggioli.magma"].css` of its DTCG entry. To style a page, use the
|
|
274
|
+
stylesheets.
|
|
275
|
+
|
|
276
|
+
| File | Content |
|
|
277
|
+
| :--- | :--- |
|
|
278
|
+
| `dist/dtcg/globals.tokens.json` | The globals this package declares: the `--magma-*` of `globals.css`, the corner axis, the depth axis of `theme.css`. Same DTCG 2025.10 shape as design-tokens, aliasing its tokens where the CSS names one (`--magma-radius-md` is `{radius.squircle-md}`) |
|
|
279
|
+
| `dist/dtcg/corner-shape-round.tokens.json`, `theme-depth-flat.tokens.json` | What `[data-corner-shape='round']` and `:root[data-theme-depth='flat']` change |
|
|
280
|
+
| `dist/dtcg/magma.resolver.json` | The resolver of design-tokens plus these sets: `base`, `globals`, then the `mode`, `theme`, `corner-shape` and `theme-depth` modifiers |
|
|
281
|
+
| `dist/tailwind/consumption.json` | How each token is consumed through Tailwind 4 |
|
|
282
|
+
|
|
283
|
+
design-tokens' `base.tokens.json` and `globals.tokens.json` together hold every global
|
|
284
|
+
token of `tokens.editor.css`. The resolver points at the files of design-tokens as
|
|
285
|
+
`../../../design-tokens/dist/dtcg/`: the two packages sit side by side in
|
|
286
|
+
`node_modules/@maggioli-design-system/`, as they do in this repository.
|
|
287
|
+
|
|
288
|
+
#### consumption.json
|
|
289
|
+
|
|
290
|
+
```json
|
|
291
|
+
"--magma-text-muted": { "theme": "--color-fg-muted", "namespace": "--color", "key": "fg-muted" }
|
|
292
|
+
```
|
|
293
|
+
|
|
294
|
+
- **`tokens`**: `theme` is the `@theme` variable that publishes the token; `namespace` and
|
|
295
|
+
`key` split it the way Tailwind reads it. Its utilities are `<root>-<key>` for every
|
|
296
|
+
root of `namespaces[namespace].utilities` (`text-fg-muted`, `bg-fg-muted`,
|
|
297
|
+
`border-fg-muted`, ...), its variants the patterns of `namespaces[namespace].variants`
|
|
298
|
+
with the key for `*` (`max-tablet:`, `@md:`).
|
|
299
|
+
- **`shadowed`**: the roots (or variant patterns) where that class reads another
|
|
300
|
+
variable, and which one (`null`: none of the theme). `--container-xs` has
|
|
301
|
+
`"max-w": "--spacing-xs"`: `max-w-xs` is 4px, the container is `max-w-(--container-xs)`.
|
|
302
|
+
- **`namespace: null`**: no utility reads the variable. Tailwind 4 has no `--border-*`
|
|
303
|
+
or `--duration-*` namespace, so `border-xs` does not exist and `duration-200` is
|
|
304
|
+
Tailwind's own 200ms, not the token: write `border-(length:--border-xs)`.
|
|
305
|
+
- **`property`**: a value that comes with another token, Tailwind's
|
|
306
|
+
`--<variable>--<property>` (`--text-size-title-h1--line-height`).
|
|
307
|
+
- **`spacing`**: `--spacing: 0.0025rem` multiplies every numeric step, so `gap-400` is
|
|
308
|
+
`400 x 0.0025rem = 1rem`. `utilities` lists the roots that take a step, `keys` the named
|
|
309
|
+
ones (`xs` ... `4xl`, `phrase`, `prose`, ...), `steps` the numeric keys the theme
|
|
310
|
+
publishes explicitly.
|
|
311
|
+
- **`utilities`**: every `@utility` of `dist/tailwind/*.css` and of the design-tokens
|
|
312
|
+
sheets they import, with where it is defined, what it `@apply`s, the tokens and the
|
|
313
|
+
Tailwind theme variables it reads (`text-title-h1` reads Tailwind's `--font-weight-black`)
|
|
314
|
+
and its compiled CSS.
|
|
315
|
+
|
|
316
|
+
The map is generated from Tailwind's own design system (the version is in `tailwind`),
|
|
317
|
+
loaded on the entry point of the [Tailwind](#tailwind) section (`entry`): every class and
|
|
318
|
+
variant Tailwind can generate is compiled, and nothing is listed by hand. It covers
|
|
319
|
+
Tailwind 4 only; the Tailwind 3 preset is legacy.
|
|
320
|
+
|
|
321
|
+
---
|
|
322
|
+
|
|
267
323
|
### Dist folder
|
|
268
324
|
|
|
269
325
|
| Folder | For | Files |
|
|
@@ -273,6 +329,8 @@ never match, which makes an accidental import a no-op.
|
|
|
273
329
|
| `css` | editors only, never import | `tokens.editor.css` |
|
|
274
330
|
| `css` | tailwind (copied from design-tokens) | `tailwind-theme-color.css`, `tailwind-theme-typography.css` |
|
|
275
331
|
| `tailwind` | Tailwind 4 | `theme.css` (palette, typography tokens, semantic colors; imports `semantic.css`), `typography.css` (the `text-title-*`, `text-info-*`, ... utilities), `utilities.css` (`focus-bounce`, `focus-zoom`, ...), `base.css`, `reset.css`, `semantic.css` |
|
|
332
|
+
| `tailwind` | tools that read tokens | `consumption.json` (the Tailwind map, see [Token data](#token-data)) |
|
|
333
|
+
| `dtcg` | tools that read tokens | `globals.tokens.json`, `corner-shape-round.tokens.json`, `theme-depth-flat.tokens.json`, `magma.resolver.json` |
|
|
276
334
|
| `tailwind3` | Tailwind 3 | `base.css`, `components.css`, `reset.css`, `typography.css` |
|
|
277
335
|
|
|
278
336
|
[mds]: https://magma.maggiolicloud.it/
|
package/dist/css/colors-hex.css
CHANGED
package/dist/css/colors-rgb.css
CHANGED
|
@@ -816,6 +816,21 @@
|
|
|
816
816
|
--magma-overlay-blur: var(--magma-backdrop-blur);
|
|
817
817
|
--magma-overlay: rgb(var(--magma-overlay-color) / var(--magma-overlay-opacity));
|
|
818
818
|
|
|
819
|
+
/* globals: corner */
|
|
820
|
+
--magma-radius-none: var(--radius-none);
|
|
821
|
+
--magma-radius-3xs: var(--radius-squircle-3xs);
|
|
822
|
+
--magma-radius-2xs: var(--radius-squircle-2xs);
|
|
823
|
+
--magma-radius-xs: var(--radius-squircle-xs);
|
|
824
|
+
--magma-radius-sm: var(--radius-squircle-sm);
|
|
825
|
+
--magma-radius-md: var(--radius-squircle-md);
|
|
826
|
+
--magma-radius-lg: var(--radius-squircle-lg);
|
|
827
|
+
--magma-radius-xl: var(--radius-squircle-xl);
|
|
828
|
+
--magma-radius-2xl: var(--radius-squircle-2xl);
|
|
829
|
+
--magma-radius-3xl: var(--radius-squircle-3xl);
|
|
830
|
+
--magma-radius-4xl: var(--radius-squircle-4xl);
|
|
831
|
+
--magma-radius-5xl: var(--radius-squircle-5xl);
|
|
832
|
+
--magma-radius-full: var(--radius-full);
|
|
833
|
+
|
|
819
834
|
/* globals: theme */
|
|
820
835
|
--depth: 1;
|
|
821
836
|
--mds-elevation-raised: 0 calc(1px * var(--depth)) calc(2px * var(--depth)) rgb(var(--magma-backdrop-color) / calc(0.06 * var(--depth))), 0 calc(2px * var(--depth)) calc(8px * var(--depth)) rgb(var(--magma-backdrop-color) / calc(0.08 * var(--depth)));
|
package/dist/css/transitions.css
CHANGED
package/dist/css/typography.css
CHANGED
|
@@ -0,0 +1,128 @@
|
|
|
1
|
+
{
|
|
2
|
+
"magma": {
|
|
3
|
+
"corner": {
|
|
4
|
+
"$extensions": {
|
|
5
|
+
"it.maggioli.magma": {
|
|
6
|
+
"cssOnly": [
|
|
7
|
+
{
|
|
8
|
+
"css": "--magma-corner-shape",
|
|
9
|
+
"value": "round"
|
|
10
|
+
}
|
|
11
|
+
]
|
|
12
|
+
}
|
|
13
|
+
}
|
|
14
|
+
},
|
|
15
|
+
"radius": {
|
|
16
|
+
"3xs": {
|
|
17
|
+
"$type": "dimension",
|
|
18
|
+
"$value": "{radius.3xs}",
|
|
19
|
+
"$extensions": {
|
|
20
|
+
"it.maggioli.magma": {
|
|
21
|
+
"css": "--magma-radius-3xs",
|
|
22
|
+
"tier": "semantic"
|
|
23
|
+
}
|
|
24
|
+
}
|
|
25
|
+
},
|
|
26
|
+
"2xs": {
|
|
27
|
+
"$type": "dimension",
|
|
28
|
+
"$value": "{radius.2xs}",
|
|
29
|
+
"$extensions": {
|
|
30
|
+
"it.maggioli.magma": {
|
|
31
|
+
"css": "--magma-radius-2xs",
|
|
32
|
+
"tier": "semantic"
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
},
|
|
36
|
+
"xs": {
|
|
37
|
+
"$type": "dimension",
|
|
38
|
+
"$value": "{radius.xs}",
|
|
39
|
+
"$extensions": {
|
|
40
|
+
"it.maggioli.magma": {
|
|
41
|
+
"css": "--magma-radius-xs",
|
|
42
|
+
"tier": "semantic"
|
|
43
|
+
}
|
|
44
|
+
}
|
|
45
|
+
},
|
|
46
|
+
"sm": {
|
|
47
|
+
"$type": "dimension",
|
|
48
|
+
"$value": "{radius.sm}",
|
|
49
|
+
"$extensions": {
|
|
50
|
+
"it.maggioli.magma": {
|
|
51
|
+
"css": "--magma-radius-sm",
|
|
52
|
+
"tier": "semantic"
|
|
53
|
+
}
|
|
54
|
+
}
|
|
55
|
+
},
|
|
56
|
+
"md": {
|
|
57
|
+
"$type": "dimension",
|
|
58
|
+
"$value": "{radius.md}",
|
|
59
|
+
"$extensions": {
|
|
60
|
+
"it.maggioli.magma": {
|
|
61
|
+
"css": "--magma-radius-md",
|
|
62
|
+
"tier": "semantic"
|
|
63
|
+
}
|
|
64
|
+
}
|
|
65
|
+
},
|
|
66
|
+
"lg": {
|
|
67
|
+
"$type": "dimension",
|
|
68
|
+
"$value": "{radius.lg}",
|
|
69
|
+
"$extensions": {
|
|
70
|
+
"it.maggioli.magma": {
|
|
71
|
+
"css": "--magma-radius-lg",
|
|
72
|
+
"tier": "semantic"
|
|
73
|
+
}
|
|
74
|
+
}
|
|
75
|
+
},
|
|
76
|
+
"xl": {
|
|
77
|
+
"$type": "dimension",
|
|
78
|
+
"$value": "{radius.xl}",
|
|
79
|
+
"$extensions": {
|
|
80
|
+
"it.maggioli.magma": {
|
|
81
|
+
"css": "--magma-radius-xl",
|
|
82
|
+
"tier": "semantic"
|
|
83
|
+
}
|
|
84
|
+
}
|
|
85
|
+
},
|
|
86
|
+
"2xl": {
|
|
87
|
+
"$type": "dimension",
|
|
88
|
+
"$value": "{radius.2xl}",
|
|
89
|
+
"$extensions": {
|
|
90
|
+
"it.maggioli.magma": {
|
|
91
|
+
"css": "--magma-radius-2xl",
|
|
92
|
+
"tier": "semantic"
|
|
93
|
+
}
|
|
94
|
+
}
|
|
95
|
+
},
|
|
96
|
+
"3xl": {
|
|
97
|
+
"$type": "dimension",
|
|
98
|
+
"$value": "{radius.3xl}",
|
|
99
|
+
"$extensions": {
|
|
100
|
+
"it.maggioli.magma": {
|
|
101
|
+
"css": "--magma-radius-3xl",
|
|
102
|
+
"tier": "semantic"
|
|
103
|
+
}
|
|
104
|
+
}
|
|
105
|
+
},
|
|
106
|
+
"4xl": {
|
|
107
|
+
"$type": "dimension",
|
|
108
|
+
"$value": "{radius.4xl}",
|
|
109
|
+
"$extensions": {
|
|
110
|
+
"it.maggioli.magma": {
|
|
111
|
+
"css": "--magma-radius-4xl",
|
|
112
|
+
"tier": "semantic"
|
|
113
|
+
}
|
|
114
|
+
}
|
|
115
|
+
},
|
|
116
|
+
"5xl": {
|
|
117
|
+
"$type": "dimension",
|
|
118
|
+
"$value": "{radius.5xl}",
|
|
119
|
+
"$extensions": {
|
|
120
|
+
"it.maggioli.magma": {
|
|
121
|
+
"css": "--magma-radius-5xl",
|
|
122
|
+
"tier": "semantic"
|
|
123
|
+
}
|
|
124
|
+
}
|
|
125
|
+
}
|
|
126
|
+
}
|
|
127
|
+
}
|
|
128
|
+
}
|