@maggioli-design-system/styles 15.11.1 → 16.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 (45) hide show
  1. package/README.md +58 -7
  2. package/dist/css/animations.css +3 -1
  3. package/dist/css/base.css +109 -67
  4. package/dist/css/colors-hex-brand-rnd.css +39 -37
  5. package/dist/css/colors-hex-brand.css +72 -70
  6. package/dist/css/colors-hex-default.css +732 -664
  7. package/dist/css/colors-hex-label.css +402 -334
  8. package/dist/css/colors-hex-status.css +138 -136
  9. package/dist/css/colors-hex-tones.css +171 -169
  10. package/dist/css/colors-hex.css +897 -2230
  11. package/dist/css/colors-rgb-brand-rnd.css +34 -32
  12. package/dist/css/colors-rgb-brand.css +65 -63
  13. package/dist/css/colors-rgb-default.css +692 -624
  14. package/dist/css/colors-rgb-label.css +399 -331
  15. package/dist/css/colors-rgb-status.css +124 -122
  16. package/dist/css/colors-rgb-tones.css +166 -164
  17. package/dist/css/colors-rgb.css +852 -2185
  18. package/dist/css/globals.css +222 -7
  19. package/dist/css/hydrated.css +2 -0
  20. package/dist/css/layer.css +1 -0
  21. package/dist/css/reset.css +123 -115
  22. package/dist/css/tailwind-theme-color.css +306 -0
  23. package/dist/css/tailwind-theme-typography.css +251 -0
  24. package/dist/css/transitions.css +45 -0
  25. package/dist/css/typography.css +218 -129
  26. package/dist/tailwind/base.css +88 -41
  27. package/dist/tailwind/reset.css +116 -99
  28. package/dist/tailwind/theme.css +5 -0
  29. package/dist/tailwind/typography.css +137 -157
  30. package/dist/tailwind/utilities.css +97 -0
  31. package/dist/tailwind3/base.css +51 -0
  32. package/dist/{tailwind → tailwind3}/components.css +5 -4
  33. package/dist/tailwind3/reset.css +114 -0
  34. package/dist/tailwind3/typography.css +140 -0
  35. package/package.json +19 -10
  36. package/postcss.config.js +2 -7
  37. package/tailwind.config.js +11 -10
  38. package/dist/css/colors-hex-brand-apk.css +0 -281
  39. package/dist/css/colors-hex-brand-mindy.css +0 -50
  40. package/dist/css/colors-hex-brand-synbee.css +0 -83
  41. package/dist/css/colors-hex-synbee-v1.css +0 -1025
  42. package/dist/css/colors-rgb-brand-apk.css +0 -281
  43. package/dist/css/colors-rgb-brand-mindy.css +0 -50
  44. package/dist/css/colors-rgb-brand-synbee.css +0 -83
  45. package/dist/css/colors-rgb-synbee-v1.css +0 -1025
package/dist/css/colors-hex-tones.css CHANGED
@@ -1,182 +1,184 @@
1
1
  /*
2
- @magma-design-system/design-tokens v13.7.2
2
+ @magma-design-system/design-tokens v14.0.0
3
3
  Generated by Style Dictionary
4
4
  Do not edit directly
5
- Generated at Mon, 20 Apr 2026 17:13:19 GMT
5
+ Generated at Mon, 08 Jun 2026 08:22:20 GMT
6
6
  */
7
7
 
8
8
  :root {
9
- --tone-slate-01: #1c222a;
10
- --tone-slate-02: #212932;
11
- --tone-slate-03: #364151;
12
- --tone-slate-04: #47556a;
13
- --tone-slate-05: #5f738f;
14
- --tone-slate-06: #95a4b8;
15
- --tone-slate-07: #cfd5df;
16
- --tone-slate-08: #e2e6ec;
17
- --tone-slate-09: #f1f3f6;
18
- --tone-slate-10: #f7f8fa;
19
- --tone-slate: #ffffff;
20
- --tone-grey-01: #1f2126;
21
- --tone-grey-02: #25282e;
22
- --tone-grey-03: #3b4049;
23
- --tone-grey-04: #4e5560;
24
- --tone-grey-05: #697282;
25
- --tone-grey-06: #9ca3af;
26
- --tone-grey-07: #d2d5da;
27
- --tone-grey-08: #e6e7ea;
28
- --tone-grey-09: #f2f3f5;
29
- --tone-grey-10: #f8f8f9;
30
- --tone-grey: #ffffff;
31
- --tone-zinc-01: #212125;
32
- --tone-zinc-02: #28282c;
33
- --tone-zinc-03: #404046;
34
- --tone-zinc-04: #54545c;
35
- --tone-zinc-05: #70707c;
36
- --tone-zinc-06: #a1a1aa;
37
- --tone-zinc-07: #d4d4d8;
38
- --tone-zinc-08: #e6e6e8;
39
- --tone-zinc-09: #f3f3f4;
40
- --tone-zinc-10: #f8f8f9;
41
- --tone-zinc: #ffffff;
42
- --tone-neutral-01: #212121;
43
- --tone-neutral-02: #282828;
44
- --tone-neutral-03: #404040;
45
- --tone-neutral-04: #545454;
46
- --tone-neutral-05: #717171;
47
- --tone-neutral-06: #a2a2a2;
48
- --tone-neutral-07: #d4d4d4;
49
- --tone-neutral-08: #e7e7e7;
50
- --tone-neutral-09: #f3f3f3;
51
- --tone-neutral-10: #f8f8f8;
52
- --tone-neutral: #ffffff;
53
- --tone-stone-01: #232120;
54
- --tone-stone-02: #2a2826;
55
- --tone-stone-03: #44403d;
56
- --tone-stone-04: #59534f;
57
- --tone-stone-05: #78706c;
58
- --tone-stone-06: #a7a19d;
59
- --tone-stone-07: #d7d4d2;
60
- --tone-stone-08: #e8e6e5;
61
- --tone-stone-09: #f4f3f2;
62
- --tone-stone-10: #f9f8f8;
63
- --tone-stone: #ffffff;
9
+ --hex-tone-porcelain-01: #000000;
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;
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;
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;
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;
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;
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;
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;
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;
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;
60
+ --hex-tone-bisque-08: #d6cecc;
61
+ --hex-tone-bisque-09: #e8e4e3;
62
+ --hex-tone-bisque-10: #f0eeed;
63
+ --hex-tone-bisque: #ffffff;
64
64
  }
65
65
 
66
- :root.pref-theme-dark {
67
- --tone-slate-01: #dde1e8;
68
- --tone-slate-02: #d2d8e1;
69
- --tone-slate-03: #abb6c7;
70
- --tone-slate-04: #8c9cb3;
71
- --tone-slate-05: #657b98;
72
- --tone-slate-06: #424f63;
73
- --tone-slate-07: #232b35;
74
- --tone-slate-08: #181d24;
75
- --tone-slate-09: #0e1115;
76
- --tone-slate-10: #07090b;
77
- --tone-slate: #000000;
78
- --tone-grey-01: #dee1e5;
79
- --tone-grey-02: #d4d7dd;
80
- --tone-grey-03: #b1b6c0;
81
- --tone-grey-04: #949ba8;
82
- --tone-grey-05: #707a8a;
83
- --tone-grey-06: #484f5a;
84
- --tone-grey-07: #272b31;
85
- --tone-grey-08: #1b1d21;
86
- --tone-grey-09: #0e0f11;
87
- --tone-grey-10: #08090a;
88
- --tone-grey: #000000;
89
- --tone-zinc-01: #e0e0e3;
90
- --tone-zinc-02: #d7d7db;
91
- --tone-zinc-03: #b5b5bd;
92
- --tone-zinc-04: #9a9aa4;
93
- --tone-zinc-05: #797985;
94
- --tone-zinc-06: #4e4e57;
95
- --tone-zinc-07: #2a2a2e;
96
- --tone-zinc-08: #1c1c1f;
97
- --tone-zinc-09: #111113;
98
- --tone-zinc-10: #090909;
99
- --tone-zinc: #000000;
100
- --tone-neutral-01: #e1e1e1;
101
- --tone-neutral-02: #d8d8d8;
102
- --tone-neutral-03: #b5b5b5;
103
- --tone-neutral-04: #9b9b9b;
104
- --tone-neutral-05: #7a7a7a;
105
- --tone-neutral-06: #4e4e4e;
106
- --tone-neutral-07: #2b2b2b;
107
- --tone-neutral-08: #1d1d1d;
108
- --tone-neutral-09: #0f0f0f;
109
- --tone-neutral-10: #090909;
110
- --tone-neutral: #000000;
111
- --tone-stone-01: #e2e0df;
112
- --tone-stone-02: #dad7d6;
113
- --tone-stone-03: #b9b5b1;
114
- --tone-stone-04: #a09a96;
115
- --tone-stone-05: #7f7872;
116
- --tone-stone-06: #534e4a;
117
- --tone-stone-07: #2d2a29;
118
- --tone-stone-08: #1e1c1b;
119
- --tone-stone-09: #100f0f;
120
- --tone-stone-10: #090908;
121
- --tone-stone: #000000;
66
+ :root:not(.pref-theme-scheme-light).pref-theme-dark,
67
+ :root.pref-theme-scheme-dark {
68
+ --hex-tone-porcelain-01: #ffffff;
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;
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;
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;
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;
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;
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;
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;
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;
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;
119
+ --hex-tone-bisque-08: #796761;
120
+ --hex-tone-bisque-09: #574a46;
121
+ --hex-tone-bisque-10: #453a37;
122
+ --hex-tone-bisque: #000000;
122
123
  }
123
124
 
124
125
  @media (prefers-color-scheme: dark) {
125
- :root.pref-theme-system {
126
- --tone-slate-01: #dde1e8;
127
- --tone-slate-02: #d2d8e1;
128
- --tone-slate-03: #abb6c7;
129
- --tone-slate-04: #8c9cb3;
130
- --tone-slate-05: #657b98;
131
- --tone-slate-06: #424f63;
132
- --tone-slate-07: #232b35;
133
- --tone-slate-08: #181d24;
134
- --tone-slate-09: #0e1115;
135
- --tone-slate-10: #07090b;
136
- --tone-slate: #000000;
137
- --tone-grey-01: #dee1e5;
138
- --tone-grey-02: #d4d7dd;
139
- --tone-grey-03: #b1b6c0;
140
- --tone-grey-04: #949ba8;
141
- --tone-grey-05: #707a8a;
142
- --tone-grey-06: #484f5a;
143
- --tone-grey-07: #272b31;
144
- --tone-grey-08: #1b1d21;
145
- --tone-grey-09: #0e0f11;
146
- --tone-grey-10: #08090a;
147
- --tone-grey: #000000;
148
- --tone-zinc-01: #e0e0e3;
149
- --tone-zinc-02: #d7d7db;
150
- --tone-zinc-03: #b5b5bd;
151
- --tone-zinc-04: #9a9aa4;
152
- --tone-zinc-05: #797985;
153
- --tone-zinc-06: #4e4e57;
154
- --tone-zinc-07: #2a2a2e;
155
- --tone-zinc-08: #1c1c1f;
156
- --tone-zinc-09: #111113;
157
- --tone-zinc-10: #090909;
158
- --tone-zinc: #000000;
159
- --tone-neutral-01: #e1e1e1;
160
- --tone-neutral-02: #d8d8d8;
161
- --tone-neutral-03: #b5b5b5;
162
- --tone-neutral-04: #9b9b9b;
163
- --tone-neutral-05: #7a7a7a;
164
- --tone-neutral-06: #4e4e4e;
165
- --tone-neutral-07: #2b2b2b;
166
- --tone-neutral-08: #1d1d1d;
167
- --tone-neutral-09: #0f0f0f;
168
- --tone-neutral-10: #090909;
169
- --tone-neutral: #000000;
170
- --tone-stone-01: #e2e0df;
171
- --tone-stone-02: #dad7d6;
172
- --tone-stone-03: #b9b5b1;
173
- --tone-stone-04: #a09a96;
174
- --tone-stone-05: #7f7872;
175
- --tone-stone-06: #534e4a;
176
- --tone-stone-07: #2d2a29;
177
- --tone-stone-08: #1e1c1b;
178
- --tone-stone-09: #100f0f;
179
- --tone-stone-10: #090908;
180
- --tone-stone: #000000;
126
+ :root:not(.pref-theme-scheme-light).pref-theme-system,
127
+ :root:not([data-magma-pref]) {
128
+ --hex-tone-porcelain-01: #ffffff;
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;
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;
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;
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;
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;
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;
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;
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;
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;
179
+ --hex-tone-bisque-08: #796761;
180
+ --hex-tone-bisque-09: #574a46;
181
+ --hex-tone-bisque-10: #453a37;
182
+ --hex-tone-bisque: #000000;
181
183
  }
182
184
  }