@maggioli-design-system/styles 17.1.0 → 17.2.1
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/CHANGELOG.md +132 -0
- package/README.md +39 -2
- package/dist/css/base.css +0 -6
- 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/globals.css +73 -362
- package/dist/css/hydrated.css +132 -0
- package/dist/css/semantic.css +3 -1
- package/dist/css/tailwind-theme-color.css +2 -2
- package/dist/css/tailwind-theme-typography.css +3 -3
- package/dist/css/tokens.editor.css +161 -209
- package/dist/css/transitions.css +3 -3
- package/dist/css/typography.css +2 -2
- package/dist/dtcg/globals.tokens.json +10 -0
- package/dist/tailwind/base.css +3 -12
- package/dist/tailwind/consumption.json +119 -1
- package/dist/tailwind/semantic.css +111 -111
- package/package.json +9 -8
package/CHANGELOG.md
ADDED
|
@@ -0,0 +1,132 @@
|
|
|
1
|
+
# Changelog
|
|
2
|
+
|
|
3
|
+
Every release of `@maggioli-design-system/styles`, newest first. Each section is the body of the GitHub
|
|
4
|
+
release with the same tag, written by git-cliff from the conventional commits of the
|
|
5
|
+
package.
|
|
6
|
+
|
|
7
|
+
## [styles@17.2.1] - 2026-10-20
|
|
8
|
+
|
|
9
|
+
### Bug Fixes
|
|
10
|
+
|
|
11
|
+
- *(design-tokens,styles,magma)* The shadow ink stays dark in dark mode, no more light halo
|
|
12
|
+
- *(design-tokens,styles)* Transition-cosmetic animates translate, scale and rotate
|
|
13
|
+
|
|
14
|
+
### Documentation
|
|
15
|
+
|
|
16
|
+
- *(styles,magma)* A pill that casts a shadow takes surface-overlay, not a wash
|
|
17
|
+
|
|
18
|
+
## [styles@17.2.0] - 2026-10-15
|
|
19
|
+
|
|
20
|
+
### Bug Fixes
|
|
21
|
+
|
|
22
|
+
- *(styles)* Keep the box of the hydrated components against tailwind's preflight
|
|
23
|
+
- *(styles)* Give every role of the semantic tailwind bridge its light default as fallback
|
|
24
|
+
|
|
25
|
+
### Build
|
|
26
|
+
|
|
27
|
+
- *(design-tokens,identity,styles,svg-icons,icons,magma)* Ship CHANGELOG.md in every package
|
|
28
|
+
|
|
29
|
+
### Documentation
|
|
30
|
+
|
|
31
|
+
- *(styles)* Add the tailwind half of editor autocomplete to the readme
|
|
32
|
+
|
|
33
|
+
### Features
|
|
34
|
+
|
|
35
|
+
- *(styles)* Carry the role descriptions into consumption.json and the editor sheet
|
|
36
|
+
- *(styles)* Fall back to the round scale where corner-shape cannot be drawn
|
|
37
|
+
|
|
38
|
+
### Refactor
|
|
39
|
+
|
|
40
|
+
- *(styles)* Move the token resolver of properties.ts into css-resolve.ts
|
|
41
|
+
|
|
42
|
+
## [styles@17.1.0] - 2026-10-14
|
|
43
|
+
|
|
44
|
+
### Bug Fixes
|
|
45
|
+
|
|
46
|
+
- *(styles)* List the corner radius steps in tokens.editor.css
|
|
47
|
+
|
|
48
|
+
### Documentation
|
|
49
|
+
|
|
50
|
+
- *(styles)* Say that the semantic layer is expanded by semantic.model.ts
|
|
51
|
+
- *(styles)* Document the globals DTCG and the consumption map
|
|
52
|
+
|
|
53
|
+
### Features
|
|
54
|
+
|
|
55
|
+
- *(styles)* Publish the globals as DTCG 2025.10 JSON
|
|
56
|
+
- *(styles)* Export the Tailwind consumption map as JSON
|
|
57
|
+
|
|
58
|
+
### Refactor
|
|
59
|
+
|
|
60
|
+
- *(design-tokens,styles)* Build the semantic layer as data in design-tokens
|
|
61
|
+
|
|
62
|
+
## [styles@17.0.1] - 2026-10-10
|
|
63
|
+
|
|
64
|
+
### Bug Fixes
|
|
65
|
+
|
|
66
|
+
- *(styles,magma)* Require internal dependencies as caret ranges
|
|
67
|
+
|
|
68
|
+
### Documentation
|
|
69
|
+
|
|
70
|
+
- *(styles)* Point the semantic migration at codemod category L
|
|
71
|
+
- *(magma,styles,design-tokens)* Rewrite the color docs on the semantic layer
|
|
72
|
+
- *(magma,styles,design-tokens)* Align the styles and design-tokens docs with the build
|
|
73
|
+
|
|
74
|
+
## [styles@17.0.0] - 2026-09-30
|
|
75
|
+
|
|
76
|
+
### Bug Fixes
|
|
77
|
+
|
|
78
|
+
- *(stencil,styles)* Close the escape hatch of #624, and repair the registration snapshots
|
|
79
|
+
- *(styles)* Let the corner shape token inherit, and admit functional shapes
|
|
80
|
+
- *(styles)* Put the page on the semantic surface, and give a link a colour that exists
|
|
81
|
+
- *(styles)* Let the global tokens inherit
|
|
82
|
+
- *(styles)* Let color-scheme follow the palette in every mode
|
|
83
|
+
- *(styles)* Retint the inverse surface with the named theme
|
|
84
|
+
|
|
85
|
+
### Build
|
|
86
|
+
|
|
87
|
+
- *(styles)* Fix dead Nx targetDefaults block
|
|
88
|
+
|
|
89
|
+
### Changes
|
|
90
|
+
|
|
91
|
+
- *(styles)* Space the comments the way stylelint wants them
|
|
92
|
+
|
|
93
|
+
### Documentation
|
|
94
|
+
|
|
95
|
+
- *(styles)* Add semantic color system SPEC (S0)
|
|
96
|
+
- *(styles)* Themes derive from any surface-opted family (spec 8)
|
|
97
|
+
- *(styles,magma)* Document the corner axis, and stop recommending the hatch
|
|
98
|
+
- *(styles)* The contrast layer promotes the page surface (spec 9.3)
|
|
99
|
+
- *(styles,magma)* Update the compatibility table for magma 2 stable
|
|
100
|
+
|
|
101
|
+
### Features
|
|
102
|
+
|
|
103
|
+
- *(styles)* Semantic color layer (--mds-*) + Tailwind 4 bridge (#573)
|
|
104
|
+
- *(styles)* Theming axes - data-theme-name, tint indirection, --depth (#574)
|
|
105
|
+
- *(styles)* Generate the --magma-* semantic layer from a config (#328)
|
|
106
|
+
- *(styles)* Retint the foreground with the theme via --magma-tint-text-*
|
|
107
|
+
- *(styles)* Ruolo inverse-surface (rename da neutral-emphasis)
|
|
108
|
+
- *(styles)* Generate named-theme overrides, retire the stale tint rules
|
|
109
|
+
- *(styles)* Emit theme-aware accent roles from the accents map
|
|
110
|
+
- *(styles)* Emit accent interaction-state roles from the state-step map
|
|
111
|
+
- *(design-tokens,stencil,styles)* Collapse accent roles to {accent, ai}
|
|
112
|
+
- *(design-tokens,styles,stencil)* Publish the hue role scales and promote them under pref-contrast-more
|
|
113
|
+
- *(styles,stencil)* Register the component custom properties from globals.css
|
|
114
|
+
- *(design-tokens,styles,stencil)* Retint the raw ramp with the theme via --magma-scale-*
|
|
115
|
+
- *(design-tokens,styles,stencil)* Give the colored hues the emphasis band states
|
|
116
|
+
- *(design-tokens,styles)* Give the neutral pills a wash band
|
|
117
|
+
- *(design-tokens,styles,stencil)* A shadow ink role, the ring family back, and a guard
|
|
118
|
+
- *(styles)* Generate a token sheet editors can autocomplete from
|
|
119
|
+
- *(styles,stencil)* Emit the corner axis, shape and scale in one block
|
|
120
|
+
- *(styles)* Publish --magma-surface-inverse-muted
|
|
121
|
+
- *(styles)* Add --magma-on-backdrop, the ink on the modal scrim
|
|
122
|
+
- *(styles)* Dark on-emphasis ink follows the canvas instead of pure black
|
|
123
|
+
|
|
124
|
+
### Refactor
|
|
125
|
+
|
|
126
|
+
- *(stencil,styles)* [**breaking**] Migrate --tone-*(bare) usages to --tone-*-seed (#572)
|
|
127
|
+
- *(styles)* Rename semantic layer prefix to --magma-* (#573)
|
|
128
|
+
- *(styles)* Stage generated CSS in a dedicated build dir
|
|
129
|
+
- *(styles)* Emit accent tint overrides via the shared helper
|
|
130
|
+
- *(design-tokens,styles,stencil)* Name the hue background levels wash-*, not surface-*
|
|
131
|
+
- *(styles)* Paint the light focus-zoom outline with text-on-emphasis
|
|
132
|
+
- *(styles)* Retire the --magma-scale-NN bridge from the semantic layer
|
package/README.md
CHANGED
|
@@ -85,7 +85,11 @@ step only follows the mode.
|
|
|
85
85
|
```
|
|
86
86
|
|
|
87
87
|
The values come from `dist/css/semantic.css`, the Tailwind utilities from
|
|
88
|
-
`dist/tailwind/theme.css`.
|
|
88
|
+
`dist/tailwind/theme.css`. Every role of the Tailwind bridge carries its light default as
|
|
89
|
+
the fallback of its `var()` (`rgb(var(--magma-surface-default, 242 242 242))`): Tailwind
|
|
90
|
+
IntelliSense reads a utility's colour only from that literal, so the semantic utilities get
|
|
91
|
+
a swatch in the editor. Without `semantic.css` they paint that light default, in every mode:
|
|
92
|
+
the file is still required. The roles, their pairing rules and the Magma 1 -> 2 map are
|
|
89
93
|
in the color guide shipped with the components package
|
|
90
94
|
(`@maggioli-design-system/magma/agents/color.md`).
|
|
91
95
|
|
|
@@ -262,6 +266,38 @@ Never import this file. It only holds light-theme defaults, so loading it would
|
|
|
262
266
|
token at the highest-priority origin and freeze theming; it is wrapped in a query that can
|
|
263
267
|
never match, which makes an accidental import a no-op.
|
|
264
268
|
|
|
269
|
+
Do not install `vunguyentuan.vscode-css-variables` next to it: it sorts alphabetically,
|
|
270
|
+
never opens the list by itself and duplicates every entry. To share the setup with the
|
|
271
|
+
team, recommend the extensions in `.vscode/extensions.json`:
|
|
272
|
+
|
|
273
|
+
```json
|
|
274
|
+
{
|
|
275
|
+
"recommendations": ["phoenisx.cssvar", "bradlc.vscode-tailwindcss"],
|
|
276
|
+
"unwantedRecommendations": ["vunguyentuan.vscode-css-variables"]
|
|
277
|
+
}
|
|
278
|
+
```
|
|
279
|
+
|
|
280
|
+
#### Tailwind classes
|
|
281
|
+
|
|
282
|
+
The classes complete through [Tailwind CSS IntelliSense][tailwind-intellisense], which
|
|
283
|
+
reads the CSS entry importing Tailwind and Magma's theme (see Tailwind above). It finds
|
|
284
|
+
that file on its own, split imports included; only if hovering a class shows nothing, add
|
|
285
|
+
`"tailwindCSS.experimental.configFile": "<path of that CSS file>"` to the settings. Classes
|
|
286
|
+
built through functions (`clsx`, `cva`, `cn`) complete once those functions are listed in
|
|
287
|
+
`"tailwindCSS.classFunctions"`.
|
|
288
|
+
|
|
289
|
+
To check it works: hovering `p-600` shows `1.5rem = 24px`, and `bg-surface-default` gets a
|
|
290
|
+
swatch in the completion list (the semantic utilities carry their light default as a
|
|
291
|
+
fallback for that; see Semantic colors).
|
|
292
|
+
|
|
293
|
+
Two limits, with nothing to configure:
|
|
294
|
+
|
|
295
|
+
- the utilities are listed alphabetically, whatever the order of the theme:
|
|
296
|
+
`bg-surface-bisque-*` comes before `bg-surface-default`;
|
|
297
|
+
- the class list offers Tailwind's stock spacing steps (`p-1` ... `p-96`), not Magma's,
|
|
298
|
+
and with Magma's theme `p-1` is 0.04px. Write the Magma steps in full (`p-600`,
|
|
299
|
+
`gap-400`): they work and hover with their value, they are just not suggested.
|
|
300
|
+
|
|
265
301
|
---
|
|
266
302
|
|
|
267
303
|
### Token data
|
|
@@ -334,6 +370,7 @@ Tailwind 4 only; the Tailwind 3 preset is legacy.
|
|
|
334
370
|
| `tailwind3` | Tailwind 3 | `base.css`, `components.css`, `reset.css`, `typography.css` |
|
|
335
371
|
|
|
336
372
|
[mds]: https://magma.maggiolicloud.it/
|
|
337
|
-
[css-variable-autocomplete]: https://marketplace.visualstudio.com/items?itemName=
|
|
373
|
+
[css-variable-autocomplete]: https://marketplace.visualstudio.com/items?itemName=phoenisx.cssvar
|
|
374
|
+
[tailwind-intellisense]: https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss
|
|
338
375
|
[fontsource-var-fonts]: https://fontsource.org/docs/variable-fonts
|
|
339
376
|
[tailwindcss-config]: https://github.com/magma-design-system/magma/blob/main/projects/styles/tailwind.config.js
|
package/dist/css/base.css
CHANGED
package/dist/css/colors-hex.css
CHANGED
package/dist/css/colors-rgb.css
CHANGED