@maggioli-design-system/styles 17.0.0 → 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.
Files changed (33) hide show
  1. package/README.md +148 -85
  2. package/dist/css/base.css +1 -1
  3. package/dist/css/colors-hex-brand-rnd.css +2 -2
  4. package/dist/css/colors-hex-brand.css +2 -2
  5. package/dist/css/colors-hex-default.css +2 -2
  6. package/dist/css/colors-hex-label.css +2 -2
  7. package/dist/css/colors-hex-status.css +2 -2
  8. package/dist/css/colors-hex-theme.css +2 -2
  9. package/dist/css/colors-hex-tones.css +2 -2
  10. package/dist/css/colors-hex.css +2 -2
  11. package/dist/css/colors-rgb-brand-rnd.css +2 -2
  12. package/dist/css/colors-rgb-brand.css +2 -2
  13. package/dist/css/colors-rgb-default.css +2 -2
  14. package/dist/css/colors-rgb-label.css +2 -2
  15. package/dist/css/colors-rgb-status.css +2 -2
  16. package/dist/css/colors-rgb-theme.css +2 -2
  17. package/dist/css/colors-rgb-tones.css +2 -2
  18. package/dist/css/colors-rgb.css +2 -2
  19. package/dist/css/reset.css +3 -3
  20. package/dist/css/tailwind-theme-color.css +2 -2
  21. package/dist/css/tailwind-theme-typography.css +2 -2
  22. package/dist/css/theme.css +3 -3
  23. package/dist/css/tokens.editor.css +15 -0
  24. package/dist/css/transitions.css +2 -2
  25. package/dist/css/typography.css +2 -2
  26. package/dist/css/utility-typography.css +1 -1
  27. package/dist/dtcg/corner-shape-round.tokens.json +128 -0
  28. package/dist/dtcg/globals.tokens.json +722 -0
  29. package/dist/dtcg/magma.resolver.json +126 -0
  30. package/dist/dtcg/theme-depth-flat.tokens.json +152 -0
  31. package/dist/tailwind/consumption.json +4577 -0
  32. package/dist/tailwind/theme.css +1 -1
  33. package/package.json +12 -9
package/dist/dtcg/magma.resolver.json ADDED
@@ -0,0 +1,126 @@
1
+ {
2
+ "$schema": "https://www.designtokens.org/schemas/2025.10/resolver.json",
3
+ "version": "2025.10",
4
+ "name": "Magma global tokens",
5
+ "description": "Every global token of Magma: the sets of @maggioli-design-system/design-tokens and the globals of @maggioli-design-system/styles. Merge the sets in resolutionOrder for one mode, theme, corner shape and depth; the result matches the stylesheets of the two packages in the same conditions.",
6
+ "sets": {
7
+ "base": {
8
+ "description": "Every primitive in light mode, and the semantic layer of the default theme.",
9
+ "sources": [
10
+ {
11
+ "$ref": "../../../design-tokens/dist/dtcg/base.tokens.json"
12
+ }
13
+ ]
14
+ },
15
+ "globals": {
16
+ "description": "The --magma-* globals, the corner axis and the depth axis of @maggioli-design-system/styles, at their :root values.",
17
+ "sources": [
18
+ {
19
+ "$ref": "globals.tokens.json"
20
+ }
21
+ ]
22
+ }
23
+ },
24
+ "modifiers": {
25
+ "mode": {
26
+ "description": "Color scheme: pref-mode-dark, or prefers-color-scheme: dark without a mds-pref controller.",
27
+ "contexts": {
28
+ "light": [],
29
+ "dark": [
30
+ {
31
+ "$ref": "../../../design-tokens/dist/dtcg/mode-dark.tokens.json"
32
+ }
33
+ ]
34
+ },
35
+ "default": "light"
36
+ },
37
+ "theme": {
38
+ "description": "Named theme (data-theme-name) and contrast preference (pref-contrast-more) together: under a theme the contrast promotions are restated in the theme family, so the two cannot be two modifiers.",
39
+ "contexts": {
40
+ "default": [],
41
+ "default-contrast-more": [
42
+ {
43
+ "$ref": "../../../design-tokens/dist/dtcg/contrast-more.tokens.json"
44
+ }
45
+ ],
46
+ "cool": [
47
+ {
48
+ "$ref": "../../../design-tokens/dist/dtcg/theme-cool.tokens.json"
49
+ }
50
+ ],
51
+ "cool-contrast-more": [
52
+ {
53
+ "$ref": "../../../design-tokens/dist/dtcg/contrast-more.tokens.json"
54
+ },
55
+ {
56
+ "$ref": "../../../design-tokens/dist/dtcg/theme-cool.tokens.json"
57
+ },
58
+ {
59
+ "$ref": "../../../design-tokens/dist/dtcg/theme-cool-contrast-more.tokens.json"
60
+ }
61
+ ],
62
+ "warm": [
63
+ {
64
+ "$ref": "../../../design-tokens/dist/dtcg/theme-warm.tokens.json"
65
+ }
66
+ ],
67
+ "warm-contrast-more": [
68
+ {
69
+ "$ref": "../../../design-tokens/dist/dtcg/contrast-more.tokens.json"
70
+ },
71
+ {
72
+ "$ref": "../../../design-tokens/dist/dtcg/theme-warm.tokens.json"
73
+ },
74
+ {
75
+ "$ref": "../../../design-tokens/dist/dtcg/theme-warm-contrast-more.tokens.json"
76
+ }
77
+ ]
78
+ },
79
+ "default": "default"
80
+ },
81
+ "corner-shape": {
82
+ "description": "The data-corner-shape attribute: [data-corner-shape='<context>']. The default is the value of the :root block.",
83
+ "contexts": {
84
+ "squircle": [],
85
+ "round": [
86
+ {
87
+ "$ref": "corner-shape-round.tokens.json"
88
+ }
89
+ ]
90
+ },
91
+ "default": "squircle"
92
+ },
93
+ "theme-depth": {
94
+ "description": "The data-theme-depth attribute: :root[data-theme-depth='<context>']. The default is the value of the :root block.",
95
+ "contexts": {
96
+ "default": [],
97
+ "flat": [
98
+ {
99
+ "$ref": "theme-depth-flat.tokens.json"
100
+ }
101
+ ]
102
+ },
103
+ "default": "default"
104
+ }
105
+ },
106
+ "resolutionOrder": [
107
+ {
108
+ "$ref": "#/sets/base"
109
+ },
110
+ {
111
+ "$ref": "#/sets/globals"
112
+ },
113
+ {
114
+ "$ref": "#/modifiers/mode"
115
+ },
116
+ {
117
+ "$ref": "#/modifiers/theme"
118
+ },
119
+ {
120
+ "$ref": "#/modifiers/corner-shape"
121
+ },
122
+ {
123
+ "$ref": "#/modifiers/theme-depth"
124
+ }
125
+ ]
126
+ }
package/dist/dtcg/theme-depth-flat.tokens.json ADDED
@@ -0,0 +1,152 @@
1
+ {
2
+ "depth": {
3
+ "$type": "number",
4
+ "$value": 0,
5
+ "$extensions": {
6
+ "it.maggioli.magma": {
7
+ "css": "--depth",
8
+ "tier": "semantic"
9
+ }
10
+ }
11
+ },
12
+ "mds": {
13
+ "elevation": {
14
+ "raised": {
15
+ "$type": "shadow",
16
+ "$value": [
17
+ {
18
+ "color": {
19
+ "colorSpace": "srgb",
20
+ "components": [
21
+ 0,
22
+ 0,
23
+ 0
24
+ ],
25
+ "hex": "#000000",
26
+ "alpha": 0
27
+ },
28
+ "offsetX": {
29
+ "value": 0,
30
+ "unit": "px"
31
+ },
32
+ "offsetY": {
33
+ "value": 0,
34
+ "unit": "px"
35
+ },
36
+ "blur": {
37
+ "value": 0,
38
+ "unit": "px"
39
+ },
40
+ "spread": {
41
+ "value": 0,
42
+ "unit": "px"
43
+ }
44
+ },
45
+ {
46
+ "color": {
47
+ "colorSpace": "srgb",
48
+ "components": [
49
+ 0,
50
+ 0,
51
+ 0
52
+ ],
53
+ "hex": "#000000",
54
+ "alpha": 0
55
+ },
56
+ "offsetX": {
57
+ "value": 0,
58
+ "unit": "px"
59
+ },
60
+ "offsetY": {
61
+ "value": 0,
62
+ "unit": "px"
63
+ },
64
+ "blur": {
65
+ "value": 0,
66
+ "unit": "px"
67
+ },
68
+ "spread": {
69
+ "value": 0,
70
+ "unit": "px"
71
+ }
72
+ }
73
+ ],
74
+ "$extensions": {
75
+ "it.maggioli.magma": {
76
+ "css": "--mds-elevation-raised",
77
+ "tier": "semantic",
78
+ "cssValue": "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)))"
79
+ }
80
+ }
81
+ },
82
+ "overlay": {
83
+ "$type": "shadow",
84
+ "$value": [
85
+ {
86
+ "color": {
87
+ "colorSpace": "srgb",
88
+ "components": [
89
+ 0,
90
+ 0,
91
+ 0
92
+ ],
93
+ "hex": "#000000",
94
+ "alpha": 0
95
+ },
96
+ "offsetX": {
97
+ "value": 0,
98
+ "unit": "px"
99
+ },
100
+ "offsetY": {
101
+ "value": 0,
102
+ "unit": "px"
103
+ },
104
+ "blur": {
105
+ "value": 0,
106
+ "unit": "px"
107
+ },
108
+ "spread": {
109
+ "value": 0,
110
+ "unit": "px"
111
+ }
112
+ },
113
+ {
114
+ "color": {
115
+ "colorSpace": "srgb",
116
+ "components": [
117
+ 0,
118
+ 0,
119
+ 0
120
+ ],
121
+ "hex": "#000000",
122
+ "alpha": 0
123
+ },
124
+ "offsetX": {
125
+ "value": 0,
126
+ "unit": "px"
127
+ },
128
+ "offsetY": {
129
+ "value": 0,
130
+ "unit": "px"
131
+ },
132
+ "blur": {
133
+ "value": 0,
134
+ "unit": "px"
135
+ },
136
+ "spread": {
137
+ "value": 0,
138
+ "unit": "px"
139
+ }
140
+ }
141
+ ],
142
+ "$extensions": {
143
+ "it.maggioli.magma": {
144
+ "css": "--mds-elevation-overlay",
145
+ "tier": "semantic",
146
+ "cssValue": "0 calc(4px * var(--depth)) calc(12px * var(--depth)) rgb(var(--magma-backdrop-color) / calc(0.12 * var(--depth))), 0 calc(8px * var(--depth)) calc(24px * var(--depth)) rgb(var(--magma-backdrop-color) / calc(0.16 * var(--depth)))"
147
+ }
148
+ }
149
+ }
150
+ }
151
+ }
152
+ }