@maggioli-design-system/styles 16.0.0 → 17.0.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 (39) hide show
  1. package/README.md +55 -3
  2. package/dist/css/animations.css +2 -2
  3. package/dist/css/base.css +13 -27
  4. package/dist/css/colors-hex-brand-rnd.css +25 -25
  5. package/dist/css/colors-hex-brand.css +46 -46
  6. package/dist/css/colors-hex-default.css +502 -502
  7. package/dist/css/colors-hex-label.css +256 -256
  8. package/dist/css/colors-hex-status.css +88 -88
  9. package/dist/css/colors-hex-theme.css +271 -0
  10. package/dist/css/colors-hex-tones.css +139 -139
  11. package/dist/css/colors-hex.css +883 -631
  12. package/dist/css/colors-rgb-brand-rnd.css +25 -25
  13. package/dist/css/colors-rgb-brand.css +46 -46
  14. package/dist/css/colors-rgb-default.css +502 -502
  15. package/dist/css/colors-rgb-label.css +256 -256
  16. package/dist/css/colors-rgb-status.css +88 -88
  17. package/dist/css/colors-rgb-theme.css +271 -0
  18. package/dist/css/colors-rgb-tones.css +139 -139
  19. package/dist/css/colors-rgb.css +883 -631
  20. package/dist/css/globals.css +3156 -28
  21. package/dist/css/hydrated.css +2 -2
  22. package/dist/css/reset.css +2 -4
  23. package/dist/css/semantic.css +253 -0
  24. package/dist/css/tailwind-theme-color.css +295 -211
  25. package/dist/css/tailwind-theme-typography.css +19 -2
  26. package/dist/css/theme.css +51 -0
  27. package/dist/css/themes.css +93 -0
  28. package/dist/css/tokens.editor.css +1792 -0
  29. package/dist/css/transitions.css +2 -2
  30. package/dist/css/typography.css +237 -253
  31. package/dist/css/utility-typography.css +254 -0
  32. package/dist/tailwind/base.css +31 -23
  33. package/dist/tailwind/semantic.css +119 -0
  34. package/dist/tailwind/theme.css +3 -0
  35. package/dist/tailwind/utilities.css +1 -1
  36. package/dist/tailwind3/base.css +9 -13
  37. package/dist/tailwind3/components.css +1 -1
  38. package/package.json +12 -6
  39. package/tailwind.config.js +2 -2
package/dist/css/colors-hex-tones.css CHANGED
@@ -1,184 +1,184 @@
1
1
  /*
2
- @magma-design-system/design-tokens v14.0.0
2
+ @magma-design-system/design-tokens v15.0.0
3
3
  Generated by Style Dictionary
4
4
  Do not edit directly
5
- Generated at Mon, 08 Jun 2026 08:22:20 GMT
5
+ Generated at Wed, 30 Sep 2026 14:38:45 GMT
6
6
  */
7
7
 
8
8
  :root {
9
- --hex-tone-porcelain-01: #000000;
9
+ --hex-tone-porcelain-01: #040506;
10
10
  --hex-tone-porcelain-02: #232b35;
11
- --hex-tone-porcelain-03: #354151;
12
- --hex-tone-porcelain-04: #4b5a71;
13
- --hex-tone-porcelain-05: #627693;
14
- --hex-tone-porcelain-06: #95a3b8;
15
- --hex-tone-porcelain-07: #aeb9c9;
11
+ --hex-tone-porcelain-03: #3d495b;
12
+ --hex-tone-porcelain-04: #53647d;
13
+ --hex-tone-porcelain-05: #637896;
14
+ --hex-tone-porcelain-06: #99a8bb;
15
+ --hex-tone-porcelain-07: #b3bdcc;
16
16
  --hex-tone-porcelain-08: #c9d0db;
17
- --hex-tone-porcelain-09: #e1e5eb;
18
- --hex-tone-porcelain-10: #eceef2;
19
- --hex-tone-porcelain: #ffffff;
20
- --hex-tone-kaolin-01: #000000;
17
+ --hex-tone-porcelain-09: #dde2e8;
18
+ --hex-tone-porcelain-10: #ebedf1;
19
+ --hex-tone-porcelain-seed: #ffffff;
20
+ --hex-tone-kaolin-01: #050506;
21
21
  --hex-tone-kaolin-02: #272a30;
22
- --hex-tone-kaolin-03: #3b4049;
23
- --hex-tone-kaolin-04: #535a67;
24
- --hex-tone-kaolin-05: #6c7686;
25
- --hex-tone-kaolin-06: #9ba2af;
26
- --hex-tone-kaolin-07: #b4b9c2;
22
+ --hex-tone-kaolin-03: #434852;
23
+ --hex-tone-kaolin-04: #5b6371;
24
+ --hex-tone-kaolin-05: #6e7788;
25
+ --hex-tone-kaolin-06: #a0a6b2;
26
+ --hex-tone-kaolin-07: #b7bcc5;
27
27
  --hex-tone-kaolin-08: #cdd0d7;
28
- --hex-tone-kaolin-09: #e3e5e8;
29
- --hex-tone-kaolin-10: #edeef1;
30
- --hex-tone-kaolin: #ffffff;
31
- --hex-tone-neutral-01: #000000;
28
+ --hex-tone-kaolin-09: #dfe1e5;
29
+ --hex-tone-kaolin-10: #ecedf0;
30
+ --hex-tone-kaolin-seed: #ffffff;
31
+ --hex-tone-neutral-01: #050505;
32
32
  --hex-tone-neutral-02: #2a2a2a;
33
- --hex-tone-neutral-03: #404040;
34
- --hex-tone-neutral-04: #595959;
35
- --hex-tone-neutral-05: #757575;
36
- --hex-tone-neutral-06: #a2a2a2;
37
- --hex-tone-neutral-07: #b8b8b8;
33
+ --hex-tone-neutral-03: #494949;
34
+ --hex-tone-neutral-04: #636363;
35
+ --hex-tone-neutral-05: #777777;
36
+ --hex-tone-neutral-06: #a5a5a5;
37
+ --hex-tone-neutral-07: #bcbcbc;
38
38
  --hex-tone-neutral-08: #d0d0d0;
39
- --hex-tone-neutral-09: #e4e4e4;
40
- --hex-tone-neutral-10: #eeeeee;
41
- --hex-tone-neutral: #ffffff;
42
- --hex-tone-fireclay-01: #000000;
39
+ --hex-tone-neutral-09: #e1e1e1;
40
+ --hex-tone-neutral-10: #ededed;
41
+ --hex-tone-neutral-seed: #ffffff;
42
+ --hex-tone-fireclay-01: #060505;
43
43
  --hex-tone-fireclay-02: #2e2925;
44
- --hex-tone-fireclay-03: #464039;
45
- --hex-tone-fireclay-04: #62584f;
46
- --hex-tone-fireclay-05: #7f7367;
47
- --hex-tone-fireclay-06: #aaa097;
48
- --hex-tone-fireclay-07: #bfb8b0;
44
+ --hex-tone-fireclay-03: #4f4740;
45
+ --hex-tone-fireclay-04: #6c6157;
46
+ --hex-tone-fireclay-05: #827569;
47
+ --hex-tone-fireclay-06: #aea59b;
48
+ --hex-tone-fireclay-07: #c3bbb4;
49
49
  --hex-tone-fireclay-08: #d4cfcb;
50
- --hex-tone-fireclay-09: #e7e4e2;
51
- --hex-tone-fireclay-10: #f0eeed;
52
- --hex-tone-fireclay: #ffffff;
53
- --hex-tone-bisque-01: #000000;
50
+ --hex-tone-fireclay-09: #e4e1dd;
51
+ --hex-tone-fireclay-10: #eeedeb;
52
+ --hex-tone-fireclay-seed: #ffffff;
53
+ --hex-tone-bisque-01: #060505;
54
54
  --hex-tone-bisque-02: #302927;
55
- --hex-tone-bisque-03: #493d3a;
56
- --hex-tone-bisque-04: #665652;
57
- --hex-tone-bisque-05: #85706a;
58
- --hex-tone-bisque-06: #ae9f9a;
59
- --hex-tone-bisque-07: #c2b6b3;
55
+ --hex-tone-bisque-03: #524542;
56
+ --hex-tone-bisque-04: #71605a;
57
+ --hex-tone-bisque-05: #87736c;
58
+ --hex-tone-bisque-06: #b2a39e;
59
+ --hex-tone-bisque-07: #c5bab7;
60
60
  --hex-tone-bisque-08: #d6cecc;
61
- --hex-tone-bisque-09: #e8e4e3;
62
- --hex-tone-bisque-10: #f0eeed;
63
- --hex-tone-bisque: #ffffff;
61
+ --hex-tone-bisque-09: #e5e0df;
62
+ --hex-tone-bisque-10: #efecec;
63
+ --hex-tone-bisque-seed: #ffffff;
64
64
  }
65
65
 
66
- :root:not(.pref-theme-scheme-light).pref-theme-dark,
66
+ :root:not(.pref-theme-scheme-light).pref-mode-dark,
67
67
  :root.pref-theme-scheme-dark {
68
- --hex-tone-porcelain-01: #ffffff;
68
+ --hex-tone-porcelain-01: #fcfcfd;
69
69
  --hex-tone-porcelain-02: #f3f4f7;
70
- --hex-tone-porcelain-03: #e6eaef;
71
- --hex-tone-porcelain-04: #d5dbe3;
72
- --hex-tone-porcelain-05: #bdc6d3;
73
- --hex-tone-porcelain-06: #909fb5;
74
- --hex-tone-porcelain-07: #7589a4;
70
+ --hex-tone-porcelain-03: #e1e5eb;
71
+ --hex-tone-porcelain-04: #cdd4dd;
72
+ --hex-tone-porcelain-05: #bbc5d2;
73
+ --hex-tone-porcelain-06: #8c9cb2;
74
+ --hex-tone-porcelain-07: #7084a0;
75
75
  --hex-tone-porcelain-08: #596b86;
76
- --hex-tone-porcelain-09: #404d60;
77
- --hex-tone-porcelain-10: #333e4d;
78
- --hex-tone-porcelain: #000000;
79
- --hex-tone-kaolin-01: #ffffff;
76
+ --hex-tone-porcelain-09: #455367;
77
+ --hex-tone-porcelain-10: #343f4f;
78
+ --hex-tone-porcelain-seed: #000000;
79
+ --hex-tone-kaolin-01: #fcfcfd;
80
80
  --hex-tone-kaolin-02: #f4f4f6;
81
- --hex-tone-kaolin-03: #e8e9ec;
82
- --hex-tone-kaolin-04: #d7dadf;
83
- --hex-tone-kaolin-05: #c2c6ce;
84
- --hex-tone-kaolin-06: #979fab;
85
- --hex-tone-kaolin-07: #7e8797;
81
+ --hex-tone-kaolin-03: #e3e5e9;
82
+ --hex-tone-kaolin-04: #d0d3d9;
83
+ --hex-tone-kaolin-05: #c0c4cc;
84
+ --hex-tone-kaolin-06: #949ba8;
85
+ --hex-tone-kaolin-07: #7a8494;
86
86
  --hex-tone-kaolin-08: #636b7a;
87
- --hex-tone-kaolin-09: #474d58;
88
- --hex-tone-kaolin-10: #383c45;
89
- --hex-tone-kaolin: #000000;
90
- --hex-tone-neutral-01: #ffffff;
87
+ --hex-tone-kaolin-09: #4c525e;
88
+ --hex-tone-kaolin-10: #3a3f47;
89
+ --hex-tone-kaolin-seed: #000000;
90
+ --hex-tone-neutral-01: #fcfcfc;
91
91
  --hex-tone-neutral-02: #f4f4f4;
92
- --hex-tone-neutral-03: #e9e9e9;
93
- --hex-tone-neutral-04: #dadada;
94
- --hex-tone-neutral-05: #c5c5c5;
95
- --hex-tone-neutral-06: #9e9e9e;
96
- --hex-tone-neutral-07: #868686;
92
+ --hex-tone-neutral-03: #e4e4e4;
93
+ --hex-tone-neutral-04: #d3d3d3;
94
+ --hex-tone-neutral-05: #c4c4c4;
95
+ --hex-tone-neutral-06: #9a9a9a;
96
+ --hex-tone-neutral-07: #828282;
97
97
  --hex-tone-neutral-08: #6b6b6b;
98
- --hex-tone-neutral-09: #4c4c4c;
99
- --hex-tone-neutral-10: #3c3c3c;
100
- --hex-tone-neutral: #000000;
101
- --hex-tone-fireclay-01: #ffffff;
98
+ --hex-tone-neutral-09: #535353;
99
+ --hex-tone-neutral-10: #3e3e3e;
100
+ --hex-tone-neutral-seed: #000000;
101
+ --hex-tone-fireclay-01: #fdfcfc;
102
102
  --hex-tone-fireclay-02: #f6f4f3;
103
- --hex-tone-fireclay-03: #ece9e7;
104
- --hex-tone-fireclay-04: #ddd9d6;
105
- --hex-tone-fireclay-05: #cbc5be;
106
- --hex-tone-fireclay-06: #a79c92;
107
- --hex-tone-fireclay-07: #918478;
103
+ --hex-tone-fireclay-03: #e7e4e2;
104
+ --hex-tone-fireclay-04: #d7d2ce;
105
+ --hex-tone-fireclay-05: #cac3bd;
106
+ --hex-tone-fireclay-06: #a3998e;
107
+ --hex-tone-fireclay-07: #8e8073;
108
108
  --hex-tone-fireclay-08: #73695e;
109
- --hex-tone-fireclay-09: #534b44;
110
- --hex-tone-fireclay-10: #423b35;
111
- --hex-tone-fireclay: #000000;
112
- --hex-tone-bisque-01: #ffffff;
109
+ --hex-tone-fireclay-09: #595148;
110
+ --hex-tone-fireclay-10: #443d37;
111
+ --hex-tone-fireclay-seed: #000000;
112
+ --hex-tone-bisque-01: #fcfcfc;
113
113
  --hex-tone-bisque-02: #f6f5f4;
114
- --hex-tone-bisque-03: #ece9e8;
115
- --hex-tone-bisque-04: #dfd8d7;
116
- --hex-tone-bisque-05: #cdc4c1;
117
- --hex-tone-bisque-06: #ab9b96;
118
- --hex-tone-bisque-07: #97827c;
114
+ --hex-tone-bisque-03: #e8e4e3;
115
+ --hex-tone-bisque-04: #d9d2cf;
116
+ --hex-tone-bisque-05: #ccc2bf;
117
+ --hex-tone-bisque-06: #a89792;
118
+ --hex-tone-bisque-07: #937e78;
119
119
  --hex-tone-bisque-08: #796761;
120
- --hex-tone-bisque-09: #574a46;
121
- --hex-tone-bisque-10: #453a37;
122
- --hex-tone-bisque: #000000;
120
+ --hex-tone-bisque-09: #5e4f4b;
121
+ --hex-tone-bisque-10: #473c39;
122
+ --hex-tone-bisque-seed: #000000;
123
123
  }
124
124
 
125
125
  @media (prefers-color-scheme: dark) {
126
- :root:not(.pref-theme-scheme-light).pref-theme-system,
126
+ :root:not(.pref-theme-scheme-light).pref-mode-system,
127
127
  :root:not([data-magma-pref]) {
128
- --hex-tone-porcelain-01: #ffffff;
128
+ --hex-tone-porcelain-01: #fcfcfd;
129
129
  --hex-tone-porcelain-02: #f3f4f7;
130
- --hex-tone-porcelain-03: #e6eaef;
131
- --hex-tone-porcelain-04: #d5dbe3;
132
- --hex-tone-porcelain-05: #bdc6d3;
133
- --hex-tone-porcelain-06: #909fb5;
134
- --hex-tone-porcelain-07: #7589a4;
130
+ --hex-tone-porcelain-03: #e1e5eb;
131
+ --hex-tone-porcelain-04: #cdd4dd;
132
+ --hex-tone-porcelain-05: #bbc5d2;
133
+ --hex-tone-porcelain-06: #8c9cb2;
134
+ --hex-tone-porcelain-07: #7084a0;
135
135
  --hex-tone-porcelain-08: #596b86;
136
- --hex-tone-porcelain-09: #404d60;
137
- --hex-tone-porcelain-10: #333e4d;
138
- --hex-tone-porcelain: #000000;
139
- --hex-tone-kaolin-01: #ffffff;
136
+ --hex-tone-porcelain-09: #455367;
137
+ --hex-tone-porcelain-10: #343f4f;
138
+ --hex-tone-porcelain-seed: #000000;
139
+ --hex-tone-kaolin-01: #fcfcfd;
140
140
  --hex-tone-kaolin-02: #f4f4f6;
141
- --hex-tone-kaolin-03: #e8e9ec;
142
- --hex-tone-kaolin-04: #d7dadf;
143
- --hex-tone-kaolin-05: #c2c6ce;
144
- --hex-tone-kaolin-06: #979fab;
145
- --hex-tone-kaolin-07: #7e8797;
141
+ --hex-tone-kaolin-03: #e3e5e9;
142
+ --hex-tone-kaolin-04: #d0d3d9;
143
+ --hex-tone-kaolin-05: #c0c4cc;
144
+ --hex-tone-kaolin-06: #949ba8;
145
+ --hex-tone-kaolin-07: #7a8494;
146
146
  --hex-tone-kaolin-08: #636b7a;
147
- --hex-tone-kaolin-09: #474d58;
148
- --hex-tone-kaolin-10: #383c45;
149
- --hex-tone-kaolin: #000000;
150
- --hex-tone-neutral-01: #ffffff;
147
+ --hex-tone-kaolin-09: #4c525e;
148
+ --hex-tone-kaolin-10: #3a3f47;
149
+ --hex-tone-kaolin-seed: #000000;
150
+ --hex-tone-neutral-01: #fcfcfc;
151
151
  --hex-tone-neutral-02: #f4f4f4;
152
- --hex-tone-neutral-03: #e9e9e9;
153
- --hex-tone-neutral-04: #dadada;
154
- --hex-tone-neutral-05: #c5c5c5;
155
- --hex-tone-neutral-06: #9e9e9e;
156
- --hex-tone-neutral-07: #868686;
152
+ --hex-tone-neutral-03: #e4e4e4;
153
+ --hex-tone-neutral-04: #d3d3d3;
154
+ --hex-tone-neutral-05: #c4c4c4;
155
+ --hex-tone-neutral-06: #9a9a9a;
156
+ --hex-tone-neutral-07: #828282;
157
157
  --hex-tone-neutral-08: #6b6b6b;
158
- --hex-tone-neutral-09: #4c4c4c;
159
- --hex-tone-neutral-10: #3c3c3c;
160
- --hex-tone-neutral: #000000;
161
- --hex-tone-fireclay-01: #ffffff;
158
+ --hex-tone-neutral-09: #535353;
159
+ --hex-tone-neutral-10: #3e3e3e;
160
+ --hex-tone-neutral-seed: #000000;
161
+ --hex-tone-fireclay-01: #fdfcfc;
162
162
  --hex-tone-fireclay-02: #f6f4f3;
163
- --hex-tone-fireclay-03: #ece9e7;
164
- --hex-tone-fireclay-04: #ddd9d6;
165
- --hex-tone-fireclay-05: #cbc5be;
166
- --hex-tone-fireclay-06: #a79c92;
167
- --hex-tone-fireclay-07: #918478;
163
+ --hex-tone-fireclay-03: #e7e4e2;
164
+ --hex-tone-fireclay-04: #d7d2ce;
165
+ --hex-tone-fireclay-05: #cac3bd;
166
+ --hex-tone-fireclay-06: #a3998e;
167
+ --hex-tone-fireclay-07: #8e8073;
168
168
  --hex-tone-fireclay-08: #73695e;
169
- --hex-tone-fireclay-09: #534b44;
170
- --hex-tone-fireclay-10: #423b35;
171
- --hex-tone-fireclay: #000000;
172
- --hex-tone-bisque-01: #ffffff;
169
+ --hex-tone-fireclay-09: #595148;
170
+ --hex-tone-fireclay-10: #443d37;
171
+ --hex-tone-fireclay-seed: #000000;
172
+ --hex-tone-bisque-01: #fcfcfc;
173
173
  --hex-tone-bisque-02: #f6f5f4;
174
- --hex-tone-bisque-03: #ece9e8;
175
- --hex-tone-bisque-04: #dfd8d7;
176
- --hex-tone-bisque-05: #cdc4c1;
177
- --hex-tone-bisque-06: #ab9b96;
178
- --hex-tone-bisque-07: #97827c;
174
+ --hex-tone-bisque-03: #e8e4e3;
175
+ --hex-tone-bisque-04: #d9d2cf;
176
+ --hex-tone-bisque-05: #ccc2bf;
177
+ --hex-tone-bisque-06: #a89792;
178
+ --hex-tone-bisque-07: #937e78;
179
179
  --hex-tone-bisque-08: #796761;
180
- --hex-tone-bisque-09: #574a46;
181
- --hex-tone-bisque-10: #453a37;
182
- --hex-tone-bisque: #000000;
180
+ --hex-tone-bisque-09: #5e4f4b;
181
+ --hex-tone-bisque-10: #473c39;
182
+ --hex-tone-bisque-seed: #000000;
183
183
  }
184
184
  }