@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.
Files changed (32) hide show
  1. package/CHANGELOG.md +132 -0
  2. package/README.md +39 -2
  3. package/dist/css/base.css +0 -6
  4. package/dist/css/colors-hex-brand-rnd.css +2 -2
  5. package/dist/css/colors-hex-brand.css +2 -2
  6. package/dist/css/colors-hex-default.css +2 -2
  7. package/dist/css/colors-hex-label.css +2 -2
  8. package/dist/css/colors-hex-status.css +2 -2
  9. package/dist/css/colors-hex-theme.css +2 -2
  10. package/dist/css/colors-hex-tones.css +2 -2
  11. package/dist/css/colors-hex.css +2 -2
  12. package/dist/css/colors-rgb-brand-rnd.css +2 -2
  13. package/dist/css/colors-rgb-brand.css +2 -2
  14. package/dist/css/colors-rgb-default.css +2 -2
  15. package/dist/css/colors-rgb-label.css +2 -2
  16. package/dist/css/colors-rgb-status.css +2 -2
  17. package/dist/css/colors-rgb-theme.css +2 -2
  18. package/dist/css/colors-rgb-tones.css +2 -2
  19. package/dist/css/colors-rgb.css +2 -2
  20. package/dist/css/globals.css +73 -362
  21. package/dist/css/hydrated.css +132 -0
  22. package/dist/css/semantic.css +3 -1
  23. package/dist/css/tailwind-theme-color.css +2 -2
  24. package/dist/css/tailwind-theme-typography.css +3 -3
  25. package/dist/css/tokens.editor.css +161 -209
  26. package/dist/css/transitions.css +3 -3
  27. package/dist/css/typography.css +2 -2
  28. package/dist/dtcg/globals.tokens.json +10 -0
  29. package/dist/tailwind/base.css +3 -12
  30. package/dist/tailwind/consumption.json +119 -1
  31. package/dist/tailwind/semantic.css +111 -111
  32. package/package.json +9 -8
package/dist/css/hydrated.css CHANGED
@@ -105,6 +105,7 @@ mds-table-header-cell:not(:is([hydrated], .hydrated)),
105
105
  mds-table-row:not(:is([hydrated], .hydrated)),
106
106
  mds-text:not(:is([hydrated], .hydrated)),
107
107
  mds-toast:not(:is([hydrated], .hydrated)),
108
+ mds-toast-region:not(:is([hydrated], .hydrated)),
108
109
  mds-tooltip:not(:is([hydrated], .hydrated)),
109
110
  mds-tree:not(:is([hydrated], .hydrated)),
110
111
  mds-tree-item:not(:is([hydrated], .hydrated)),
@@ -122,3 +123,134 @@ mds-zero:not(:is([hydrated], .hydrated))
122
123
  transition-duration: 0s;
123
124
  visibility: hidden;
124
125
  }
126
+
127
+ /*
128
+ Once hydrated, a component keeps the box it gives itself on :host. A page reset such as
129
+ Tailwind's preflight (margin, padding and border of every element) is page CSS, and page CSS
130
+ beats :host whatever its layer: revert-layer hands each property back to the layers before
131
+ this one, down to the component's own :host rules. This file is imported into `base`, the
132
+ layer the preflight sits in, so the tag beats its `*`. Both forms of the flag: the browser
133
+ builds set the attribute, the server-rendered markup the class.
134
+ */
135
+
136
+ mds-accordion:is([hydrated], .hydrated),
137
+ mds-accordion-item:is([hydrated], .hydrated),
138
+ mds-accordion-timer:is([hydrated], .hydrated),
139
+ mds-accordion-timer-item:is([hydrated], .hydrated),
140
+ mds-author:is([hydrated], .hydrated),
141
+ mds-avatar:is([hydrated], .hydrated),
142
+ mds-avatar-stack:is([hydrated], .hydrated),
143
+ mds-avatar-stack-item:is([hydrated], .hydrated),
144
+ mds-badge:is([hydrated], .hydrated),
145
+ mds-banner:is([hydrated], .hydrated),
146
+ mds-benchmark-bar:is([hydrated], .hydrated),
147
+ mds-bibliography:is([hydrated], .hydrated),
148
+ mds-breadcrumb:is([hydrated], .hydrated),
149
+ mds-breadcrumb-item:is([hydrated], .hydrated),
150
+ mds-button:is([hydrated], .hydrated),
151
+ mds-button-dropdown:is([hydrated], .hydrated),
152
+ mds-button-group:is([hydrated], .hydrated),
153
+ mds-calendar:is([hydrated], .hydrated),
154
+ mds-calendar-cell:is([hydrated], .hydrated),
155
+ mds-card:is([hydrated], .hydrated),
156
+ mds-card-content:is([hydrated], .hydrated),
157
+ mds-card-footer:is([hydrated], .hydrated),
158
+ mds-card-header:is([hydrated], .hydrated),
159
+ mds-card-media:is([hydrated], .hydrated),
160
+ mds-chip:is([hydrated], .hydrated),
161
+ mds-details:is([hydrated], .hydrated),
162
+ mds-dropdown:is([hydrated], .hydrated),
163
+ mds-emoji:is([hydrated], .hydrated),
164
+ mds-entity:is([hydrated], .hydrated),
165
+ mds-file:is([hydrated], .hydrated),
166
+ mds-file-preview:is([hydrated], .hydrated),
167
+ mds-filter:is([hydrated], .hydrated),
168
+ mds-filter-item:is([hydrated], .hydrated),
169
+ mds-header:is([hydrated], .hydrated),
170
+ mds-header-bar:is([hydrated], .hydrated),
171
+ mds-help:is([hydrated], .hydrated),
172
+ mds-horizontal-scroll:is([hydrated], .hydrated),
173
+ mds-hr:is([hydrated], .hydrated),
174
+ mds-icon:is([hydrated], .hydrated),
175
+ mds-img:is([hydrated], .hydrated),
176
+ mds-input:is([hydrated], .hydrated),
177
+ mds-input-date:is([hydrated], .hydrated),
178
+ mds-input-date-range:is([hydrated], .hydrated),
179
+ mds-input-date-range-preselection:is([hydrated], .hydrated),
180
+ mds-input-field:is([hydrated], .hydrated),
181
+ mds-input-otp:is([hydrated], .hydrated),
182
+ mds-input-range:is([hydrated], .hydrated),
183
+ mds-input-select:is([hydrated], .hydrated),
184
+ mds-input-switch:is([hydrated], .hydrated),
185
+ mds-input-tip:is([hydrated], .hydrated),
186
+ mds-input-tip-item:is([hydrated], .hydrated),
187
+ mds-input-upload:is([hydrated], .hydrated),
188
+ mds-keyboard:is([hydrated], .hydrated),
189
+ mds-keyboard-key:is([hydrated], .hydrated),
190
+ mds-kpi:is([hydrated], .hydrated),
191
+ mds-kpi-item:is([hydrated], .hydrated),
192
+ mds-label:is([hydrated], .hydrated),
193
+ mds-list:is([hydrated], .hydrated),
194
+ mds-list-item:is([hydrated], .hydrated),
195
+ mds-mention:is([hydrated], .hydrated),
196
+ mds-modal:is([hydrated], .hydrated),
197
+ mds-note:is([hydrated], .hydrated),
198
+ mds-notification:is([hydrated], .hydrated),
199
+ mds-paginator:is([hydrated], .hydrated),
200
+ mds-paginator-item:is([hydrated], .hydrated),
201
+ mds-policy-ai:is([hydrated], .hydrated),
202
+ mds-pref:is([hydrated], .hydrated),
203
+ mds-pref-animation:is([hydrated], .hydrated),
204
+ mds-pref-consumption:is([hydrated], .hydrated),
205
+ mds-pref-contrast:is([hydrated], .hydrated),
206
+ mds-pref-language:is([hydrated], .hydrated),
207
+ mds-pref-language-item:is([hydrated], .hydrated),
208
+ mds-pref-mode:is([hydrated], .hydrated),
209
+ mds-pref-theme:is([hydrated], .hydrated),
210
+ mds-pref-theme-item:is([hydrated], .hydrated),
211
+ mds-price-table:is([hydrated], .hydrated),
212
+ mds-price-table-features:is([hydrated], .hydrated),
213
+ mds-price-table-features-cell:is([hydrated], .hydrated),
214
+ mds-price-table-features-row:is([hydrated], .hydrated),
215
+ mds-price-table-header:is([hydrated], .hydrated),
216
+ mds-price-table-list:is([hydrated], .hydrated),
217
+ mds-price-table-list-item:is([hydrated], .hydrated),
218
+ mds-progress:is([hydrated], .hydrated),
219
+ mds-push-notification:is([hydrated], .hydrated),
220
+ mds-push-notification-item:is([hydrated], .hydrated),
221
+ mds-quote:is([hydrated], .hydrated),
222
+ mds-radial-menu:is([hydrated], .hydrated),
223
+ mds-radial-menu-item:is([hydrated], .hydrated),
224
+ mds-radial-progress:is([hydrated], .hydrated),
225
+ mds-separator:is([hydrated], .hydrated),
226
+ mds-spinner:is([hydrated], .hydrated),
227
+ mds-status-bar:is([hydrated], .hydrated),
228
+ mds-stepper-bar:is([hydrated], .hydrated),
229
+ mds-stepper-bar-item:is([hydrated], .hydrated),
230
+ mds-tab:is([hydrated], .hydrated),
231
+ mds-tab-bar:is([hydrated], .hydrated),
232
+ mds-tab-bar-item:is([hydrated], .hydrated),
233
+ mds-tab-item:is([hydrated], .hydrated),
234
+ mds-table:is([hydrated], .hydrated),
235
+ mds-table-body:is([hydrated], .hydrated),
236
+ mds-table-cell:is([hydrated], .hydrated),
237
+ mds-table-footer:is([hydrated], .hydrated),
238
+ mds-table-header:is([hydrated], .hydrated),
239
+ mds-table-header-cell:is([hydrated], .hydrated),
240
+ mds-table-row:is([hydrated], .hydrated),
241
+ mds-text:is([hydrated], .hydrated),
242
+ mds-toast:is([hydrated], .hydrated),
243
+ mds-toast-region:is([hydrated], .hydrated),
244
+ mds-tooltip:is([hydrated], .hydrated),
245
+ mds-tree:is([hydrated], .hydrated),
246
+ mds-tree-item:is([hydrated], .hydrated),
247
+ mds-url-view:is([hydrated], .hydrated),
248
+ mds-usage:is([hydrated], .hydrated),
249
+ mds-video-wall:is([hydrated], .hydrated),
250
+ mds-zero:is([hydrated], .hydrated)
251
+ {
252
+ border: revert-layer;
253
+ display: revert-layer;
254
+ margin: revert-layer;
255
+ padding: revert-layer;
256
+ }
package/dist/css/semantic.css CHANGED
@@ -187,16 +187,18 @@
187
187
  --magma-accent-ai-on-emphasis: var(--magma-tint-text-on-emphasis);
188
188
  }
189
189
 
190
- /* Dark ink: the canvas, not pure black (spec 6.5) */
190
+ /* Dark: the fill ink takes the canvas (spec 6.5), the shadow ink pure black (spec 6.1c) */
191
191
  :root:not(.pref-theme-scheme-light).pref-mode-dark,
192
192
  :root.pref-theme-scheme-dark {
193
193
  --magma-tint-text-on-emphasis: var(--magma-tint-default);
194
+ --magma-shadow-ink: var(--tone-neutral-seed);
194
195
  }
195
196
 
196
197
  @media (prefers-color-scheme: dark) {
197
198
  :root:not(.pref-theme-scheme-light).pref-mode-system,
198
199
  :root:not([data-magma-pref]) {
199
200
  --magma-tint-text-on-emphasis: var(--magma-tint-default);
201
+ --magma-shadow-ink: var(--tone-neutral-seed);
200
202
  }
201
203
  }
202
204
 
package/dist/css/tailwind-theme-color.css CHANGED
@@ -1,8 +1,8 @@
1
1
  /*
2
- @magma-design-system/design-tokens v15.1.0
2
+ @magma-design-system/design-tokens v15.2.1
3
3
  Generated by Style Dictionary
4
4
  Do not edit directly
5
- Generated at Wed, 14 Oct 2026 12:21:39 GMT
5
+ Generated at Tue, 20 Oct 2026 14:18:30 GMT
6
6
  */
7
7
 
8
8
  @theme {
package/dist/css/tailwind-theme-typography.css CHANGED
@@ -1,8 +1,8 @@
1
1
  /*
2
- @magma-design-system/design-tokens v15.1.0
2
+ @magma-design-system/design-tokens v15.2.1
3
3
  Generated by Style Dictionary
4
4
  Do not edit directly
5
- Generated at Wed, 14 Oct 2026 12:21:39 GMT
5
+ Generated at Tue, 20 Oct 2026 14:18:30 GMT
6
6
  */
7
7
 
8
8
  @theme {
@@ -238,7 +238,7 @@ Generated at Wed, 14 Oct 2026 12:21:39 GMT
238
238
  }
239
239
 
240
240
  @utility transition-cosmetic {
241
- transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;
241
+ transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, rotate, scale, transform, translate, width;
242
242
  transition-timing-function: var(--default-transition-timing-function); /* default cubic-bezier(0.4, 0, 0.2, 1) */
243
243
  transition-duration: var(--default-transition-duration); /* default 150ms */
244
244
  }