@maggioli-design-system/styles 17.2.1 → 17.3.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.
- package/CHANGELOG.md +10 -0
- package/README.md +10 -1
- 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 +25 -6
- package/dist/css/hydrated.css +2 -0
- package/dist/css/tailwind-theme-color.css +2 -2
- package/dist/css/tailwind-theme-typography.css +36 -2
- package/dist/css/tokens.editor.css +37 -24
- package/dist/css/transitions.css +2 -2
- package/dist/css/typography.css +2 -2
- package/dist/tailwind/consumption.json +114 -50
- package/package.json +2 -2
package/CHANGELOG.md
CHANGED
|
@@ -4,6 +4,16 @@ Every release of `@maggioli-design-system/styles`, newest first. Each section is
|
|
|
4
4
|
release with the same tag, written by git-cliff from the conventional commits of the
|
|
5
5
|
package.
|
|
6
6
|
|
|
7
|
+
## [styles@17.3.0] - 2026-10-21
|
|
8
|
+
|
|
9
|
+
### Bug Fixes
|
|
10
|
+
|
|
11
|
+
- *(design-tokens,styles)* Size utilities with a t-shirt name read the container, not spacing
|
|
12
|
+
|
|
13
|
+
### Features
|
|
14
|
+
|
|
15
|
+
- *(styles)* List the aliases and the keyword variables of the theme in consumption.json
|
|
16
|
+
|
|
7
17
|
## [styles@17.2.1] - 2026-10-20
|
|
8
18
|
|
|
9
19
|
### Bug Fixes
|
package/README.md
CHANGED
|
@@ -332,9 +332,18 @@ token of `tokens.editor.css`. The resolver points at the files of design-tokens
|
|
|
332
332
|
root of `namespaces[namespace].utilities` (`text-fg-muted`, `bg-fg-muted`,
|
|
333
333
|
`border-fg-muted`, ...), its variants the patterns of `namespaces[namespace].variants`
|
|
334
334
|
with the key for `*` (`max-tablet:`, `@md:`).
|
|
335
|
+
- **`aliases`**: the `@theme` variables that republish the token whole for the utilities
|
|
336
|
+
of another namespace. `w-*`, `min-w-*`, `max-w-*` and `basis-*` read their own
|
|
337
|
+
namespace, then spacing, then container, so for the keys both scales have (`xs` ...
|
|
338
|
+
`4xl`) `--container-xs` comes with `--width-xs`, `--max-width-xs`, ...: `max-w-xs` is
|
|
339
|
+
the 320px container, not the 4px spacing step.
|
|
335
340
|
- **`shadowed`**: the roots (or variant patterns) where that class reads another
|
|
336
341
|
variable, and which one (`null`: none of the theme). `--container-xs` has
|
|
337
|
-
`"
|
|
342
|
+
`"inline": "--spacing-xs"`: the logical utilities have no namespace of their own, so
|
|
343
|
+
`inline-xs` is 4px; the container is `inline-(--container-xs)`.
|
|
344
|
+
- **`keywords`**: the `@theme` variables that hold a CSS keyword and publish no token.
|
|
345
|
+
`--max-width-none: none` makes `max-w-none` set no limit, where the spacing step would
|
|
346
|
+
set `0px`.
|
|
338
347
|
- **`namespace: null`**: no utility reads the variable. Tailwind 4 has no `--border-*`
|
|
339
348
|
or `--duration-*` namespace, so `border-xs` does not exist and `duration-200` is
|
|
340
349
|
Tailwind's own 200ms, not the token: write `border-(length:--border-xs)`.
|
package/dist/css/colors-hex.css
CHANGED
package/dist/css/colors-rgb.css
CHANGED
package/dist/css/globals.css
CHANGED
|
@@ -862,13 +862,13 @@
|
|
|
862
862
|
|
|
863
863
|
@property --mds-dropdown-duration {
|
|
864
864
|
inherits: true;
|
|
865
|
-
initial-value:
|
|
865
|
+
initial-value: 500ms;
|
|
866
866
|
syntax: '<time>';
|
|
867
867
|
}
|
|
868
868
|
|
|
869
869
|
@property --mds-dropdown-mouseover-delay {
|
|
870
870
|
inherits: true;
|
|
871
|
-
initial-value:
|
|
871
|
+
initial-value: 500ms;
|
|
872
872
|
syntax: '<time>';
|
|
873
873
|
}
|
|
874
874
|
|
|
@@ -1928,7 +1928,7 @@
|
|
|
1928
1928
|
|
|
1929
1929
|
@property --mds-keyboard-spinner-duration {
|
|
1930
1930
|
inherits: true;
|
|
1931
|
-
initial-value:
|
|
1931
|
+
initial-value: 1000ms;
|
|
1932
1932
|
syntax: '<time>';
|
|
1933
1933
|
}
|
|
1934
1934
|
|
|
@@ -1981,6 +1981,25 @@
|
|
|
1981
1981
|
syntax: '<color>';
|
|
1982
1982
|
}
|
|
1983
1983
|
|
|
1984
|
+
/* mds-link */
|
|
1985
|
+
@property --private-link-band {
|
|
1986
|
+
inherits: false;
|
|
1987
|
+
initial-value: 0px;
|
|
1988
|
+
syntax: '<length>';
|
|
1989
|
+
}
|
|
1990
|
+
|
|
1991
|
+
@property --private-link-fill {
|
|
1992
|
+
inherits: false;
|
|
1993
|
+
initial-value: 0px;
|
|
1994
|
+
syntax: '<length>';
|
|
1995
|
+
}
|
|
1996
|
+
|
|
1997
|
+
@property --private-link-ink {
|
|
1998
|
+
inherits: false;
|
|
1999
|
+
initial-value: 100%;
|
|
2000
|
+
syntax: '<percentage>';
|
|
2001
|
+
}
|
|
2002
|
+
|
|
1984
2003
|
/* mds-list-item */
|
|
1985
2004
|
@property --mds-list-item-icon-margin {
|
|
1986
2005
|
inherits: true;
|
|
@@ -2731,7 +2750,7 @@
|
|
|
2731
2750
|
|
|
2732
2751
|
@property --mds-tab-transition-duration {
|
|
2733
2752
|
inherits: true;
|
|
2734
|
-
initial-value:
|
|
2753
|
+
initial-value: 500ms;
|
|
2735
2754
|
syntax: '<time>';
|
|
2736
2755
|
}
|
|
2737
2756
|
|
|
@@ -2876,7 +2895,7 @@
|
|
|
2876
2895
|
|
|
2877
2896
|
@property --mds-tooltip-delay {
|
|
2878
2897
|
inherits: true;
|
|
2879
|
-
initial-value:
|
|
2898
|
+
initial-value: 1000ms;
|
|
2880
2899
|
syntax: '<time>';
|
|
2881
2900
|
}
|
|
2882
2901
|
|
|
@@ -2888,7 +2907,7 @@
|
|
|
2888
2907
|
|
|
2889
2908
|
@property --mds-tooltip-duration {
|
|
2890
2909
|
inherits: true;
|
|
2891
|
-
initial-value:
|
|
2910
|
+
initial-value: 500ms;
|
|
2892
2911
|
syntax: '<time>';
|
|
2893
2912
|
}
|
|
2894
2913
|
|
package/dist/css/hydrated.css
CHANGED
|
@@ -55,6 +55,7 @@ mds-keyboard-key:not(:is([hydrated], .hydrated)),
|
|
|
55
55
|
mds-kpi:not(:is([hydrated], .hydrated)),
|
|
56
56
|
mds-kpi-item:not(:is([hydrated], .hydrated)),
|
|
57
57
|
mds-label:not(:is([hydrated], .hydrated)),
|
|
58
|
+
mds-link:not(:is([hydrated], .hydrated)),
|
|
58
59
|
mds-list:not(:is([hydrated], .hydrated)),
|
|
59
60
|
mds-list-item:not(:is([hydrated], .hydrated)),
|
|
60
61
|
mds-mention:not(:is([hydrated], .hydrated)),
|
|
@@ -190,6 +191,7 @@ mds-keyboard-key:is([hydrated], .hydrated),
|
|
|
190
191
|
mds-kpi:is([hydrated], .hydrated),
|
|
191
192
|
mds-kpi-item:is([hydrated], .hydrated),
|
|
192
193
|
mds-label:is([hydrated], .hydrated),
|
|
194
|
+
mds-link:is([hydrated], .hydrated),
|
|
193
195
|
mds-list:is([hydrated], .hydrated),
|
|
194
196
|
mds-list-item:is([hydrated], .hydrated),
|
|
195
197
|
mds-mention:is([hydrated], .hydrated),
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
/*
|
|
2
|
-
@magma-design-system/design-tokens v15.2.
|
|
2
|
+
@magma-design-system/design-tokens v15.2.2
|
|
3
3
|
Generated by Style Dictionary
|
|
4
4
|
Do not edit directly
|
|
5
|
-
Generated at
|
|
5
|
+
Generated at Wed, 21 Oct 2026 16:52:02 GMT
|
|
6
6
|
*/
|
|
7
7
|
|
|
8
8
|
@theme {
|
|
@@ -113,6 +113,40 @@ Generated at Tue, 20 Oct 2026 14:18:30 GMT
|
|
|
113
113
|
--container-6xl: 1152px;
|
|
114
114
|
--container-7xl: 1280px;
|
|
115
115
|
|
|
116
|
+
--width-xs: var(--container-xs);
|
|
117
|
+
--min-width-xs: var(--container-xs);
|
|
118
|
+
--max-width-xs: var(--container-xs);
|
|
119
|
+
--flex-basis-xs: var(--container-xs);
|
|
120
|
+
--width-sm: var(--container-sm);
|
|
121
|
+
--min-width-sm: var(--container-sm);
|
|
122
|
+
--max-width-sm: var(--container-sm);
|
|
123
|
+
--flex-basis-sm: var(--container-sm);
|
|
124
|
+
--width-md: var(--container-md);
|
|
125
|
+
--min-width-md: var(--container-md);
|
|
126
|
+
--max-width-md: var(--container-md);
|
|
127
|
+
--flex-basis-md: var(--container-md);
|
|
128
|
+
--width-lg: var(--container-lg);
|
|
129
|
+
--min-width-lg: var(--container-lg);
|
|
130
|
+
--max-width-lg: var(--container-lg);
|
|
131
|
+
--flex-basis-lg: var(--container-lg);
|
|
132
|
+
--width-xl: var(--container-xl);
|
|
133
|
+
--min-width-xl: var(--container-xl);
|
|
134
|
+
--max-width-xl: var(--container-xl);
|
|
135
|
+
--flex-basis-xl: var(--container-xl);
|
|
136
|
+
--width-2xl: var(--container-2xl);
|
|
137
|
+
--min-width-2xl: var(--container-2xl);
|
|
138
|
+
--max-width-2xl: var(--container-2xl);
|
|
139
|
+
--flex-basis-2xl: var(--container-2xl);
|
|
140
|
+
--width-3xl: var(--container-3xl);
|
|
141
|
+
--min-width-3xl: var(--container-3xl);
|
|
142
|
+
--max-width-3xl: var(--container-3xl);
|
|
143
|
+
--flex-basis-3xl: var(--container-3xl);
|
|
144
|
+
--width-4xl: var(--container-4xl);
|
|
145
|
+
--min-width-4xl: var(--container-4xl);
|
|
146
|
+
--max-width-4xl: var(--container-4xl);
|
|
147
|
+
--flex-basis-4xl: var(--container-4xl);
|
|
148
|
+
--max-width-none: none;
|
|
149
|
+
|
|
116
150
|
--breakpoint-mobile: 480px;
|
|
117
151
|
--breakpoint-tablet: 768px;
|
|
118
152
|
--breakpoint-desktop: 1024px;
|
|
@@ -840,9 +840,9 @@
|
|
|
840
840
|
/* component: mds-accordion */
|
|
841
841
|
--mds-accordion-color: rgb(var(--magma-text-default));
|
|
842
842
|
--mds-accordion-border-color: rgb(var(--magma-border-default));
|
|
843
|
-
--mds-accordion-border-width:
|
|
843
|
+
--mds-accordion-border-width: --spacing(50);
|
|
844
844
|
--mds-accordion-description-color: rgb(var(--magma-text-default));
|
|
845
|
-
--mds-accordion-duration:
|
|
845
|
+
--mds-accordion-duration: var(--duration-300);
|
|
846
846
|
--mds-accordion-padding-selected: --spacing(400) 0 --spacing(800) 0;
|
|
847
847
|
--mds-accordion-padding-unselected: --spacing(400) 0;
|
|
848
848
|
|
|
@@ -860,7 +860,7 @@
|
|
|
860
860
|
--mds-accordion-timer-progress-bar-color: rgb(var(--magma-text-muted));
|
|
861
861
|
--mds-accordion-timer-progress-bar-background: rgb(var(--magma-wash-strong));
|
|
862
862
|
--mds-accordion-timer-progress-bar-thickness: --spacing(100);
|
|
863
|
-
--mds-accordion-timer-duration:
|
|
863
|
+
--mds-accordion-timer-duration: var(--duration-500);
|
|
864
864
|
|
|
865
865
|
/* component: mds-accordion-timer-item */
|
|
866
866
|
--mds-accordion-timer-item-color: rgb(5 5 5);
|
|
@@ -1022,12 +1022,12 @@
|
|
|
1022
1022
|
--mds-dropdown-backdrop-z-index: 4000;
|
|
1023
1023
|
--mds-dropdown-background: rgb(255 255 255);
|
|
1024
1024
|
--mds-dropdown-drop-shadow-color-rgb: rgb(5 5 5);
|
|
1025
|
-
--mds-dropdown-duration:
|
|
1026
|
-
--mds-dropdown-mouseover-delay:
|
|
1025
|
+
--mds-dropdown-duration: 500ms;
|
|
1026
|
+
--mds-dropdown-mouseover-delay: 500ms;
|
|
1027
1027
|
--mds-dropdown-transform-from: scale(0.9) translateY(-3%);
|
|
1028
1028
|
--mds-dropdown-transform-to: scale(1) translate(0, 0);
|
|
1029
1029
|
--mds-dropdown-z-index: 5000;
|
|
1030
|
-
--mds-dropdown-drop-shadow: drop-shadow(0 0
|
|
1030
|
+
--mds-dropdown-drop-shadow: drop-shadow(0 0 --spacing(100) rgb(var(--magma-text-default) / 0.075)) drop-shadow(0 0 --spacing(100) rgb(var(--magma-text-default) / 0.45)) drop-shadow(0 0 --spacing(100) rgb(var(--magma-text-default) / 0.45));
|
|
1031
1031
|
--mds-dropdown-ease: var(--ease-out-expo);
|
|
1032
1032
|
|
|
1033
1033
|
/* component: mds-emoji */
|
|
@@ -1117,7 +1117,7 @@
|
|
|
1117
1117
|
|
|
1118
1118
|
/* component: mds-header-bar */
|
|
1119
1119
|
--mds-header-bar-hamburger-color: rgb(73 73 73);
|
|
1120
|
-
--mds-header-bar-transition-duration:
|
|
1120
|
+
--mds-header-bar-transition-duration: var(--duration-500);
|
|
1121
1121
|
|
|
1122
1122
|
/* component: mds-help */
|
|
1123
1123
|
--mds-help-tooltip-delay: 0.25s;
|
|
@@ -1165,13 +1165,13 @@
|
|
|
1165
1165
|
--mds-input-variant-color-rgb: rgb(0 0 0);
|
|
1166
1166
|
--mds-input-ring: var(--shadow-ring-strong-2);
|
|
1167
1167
|
--mds-input-tip-background: rgb(var(--magma-accent-ai-fg));
|
|
1168
|
-
--mds-input-shadow: 0 1px
|
|
1168
|
+
--mds-input-shadow: 0 1px --spacing(75) 0 rgb(var(--mds-input-variant-color-rgb) / 0.1), 0 1px --spacing(50) 0 rgb(var(--mds-input-variant-color-rgb) / 0.06);
|
|
1169
1169
|
--mds-input-tip-horizontal-offset-focused: --spacing(100);
|
|
1170
1170
|
--mds-input-tip-horizontal-offset: --spacing(100);
|
|
1171
1171
|
--mds-input-tip-vertical-offset: --spacing(100);
|
|
1172
1172
|
--mds-input-border-radius: min( var(--magma-radius-xl), var(--magma-corner-cap) * var(--private-input-height) );
|
|
1173
1173
|
--mds-input-transition-duration: var(--duration-300);
|
|
1174
|
-
--mds-input-controls-border:
|
|
1174
|
+
--mds-input-controls-border: --spacing(50) solid rgb(var(--magma-border-muted));
|
|
1175
1175
|
--mds-input-controls-color: rgb(var(--magma-text-muted));
|
|
1176
1176
|
|
|
1177
1177
|
/* component: mds-input-date */
|
|
@@ -1181,7 +1181,7 @@
|
|
|
1181
1181
|
--mds-input-date-icon-color: rgb(36 103 231);
|
|
1182
1182
|
--mds-input-date-variant-color-rgb: rgb(0 0 0);
|
|
1183
1183
|
--mds-input-date-ring: var(--shadow-ring-strong-2);
|
|
1184
|
-
--mds-input-date-shadow: 0 1px
|
|
1184
|
+
--mds-input-date-shadow: 0 1px --spacing(75) 0 rgb(var(--mds-input-date-variant-color-rgb) / 0.1), 0 1px --spacing(50) 0 rgb(var(--mds-input-date-variant-color-rgb) / 0.06);
|
|
1185
1185
|
--mds-input-date-transition-duration: var(--duration-300);
|
|
1186
1186
|
|
|
1187
1187
|
/* component: mds-input-date-range */
|
|
@@ -1192,7 +1192,7 @@
|
|
|
1192
1192
|
--mds-input-date-range-icon-color: rgb(36 103 231);
|
|
1193
1193
|
--mds-input-date-range-variant-color-rgb: rgb(0 0 0);
|
|
1194
1194
|
--mds-input-date-range-ring: var(--shadow-ring-strong-2);
|
|
1195
|
-
--mds-input-date-range-shadow: 0 1px
|
|
1195
|
+
--mds-input-date-range-shadow: 0 1px --spacing(75) 0 rgb(var(--mds-input-date-range-variant-color-rgb) / 0.1), 0 1px --spacing(50) 0 rgb(var(--mds-input-date-range-variant-color-rgb) / 0.06);
|
|
1196
1196
|
--mds-input-date-range-transition-duration: var(--duration-300);
|
|
1197
1197
|
|
|
1198
1198
|
/* component: mds-input-date-range-preselection */
|
|
@@ -1234,7 +1234,7 @@
|
|
|
1234
1234
|
--mds-input-select-arrow-icon-hover-color: rgb(7 76 204);
|
|
1235
1235
|
--mds-input-select-variant-color-rgb: rgb(0 0 0);
|
|
1236
1236
|
--mds-input-select-ring: var(--shadow-ring-strong-2);
|
|
1237
|
-
--mds-input-select-shadow: 0 1px
|
|
1237
|
+
--mds-input-select-shadow: 0 1px --spacing(75) 0 rgb(var(--mds-input-select-variant-color-rgb) / 0.1), 0 1px --spacing(50) 0 rgb(var(--mds-input-select-variant-color-rgb) / 0.06);
|
|
1238
1238
|
--mds-input-select-transition-duration: var(--duration-300);
|
|
1239
1239
|
--mds-input-select-icon-transition-duration: var(--duration-200);
|
|
1240
1240
|
|
|
@@ -1282,8 +1282,8 @@
|
|
|
1282
1282
|
--mds-input-upload-drag-area-background-color: rgb(255 255 255);
|
|
1283
1283
|
--mds-input-upload-drag-area-background-color-on-drag: rgb(237 237 237);
|
|
1284
1284
|
--mds-input-upload-min-cols: 3;
|
|
1285
|
-
--mds-input-upload-drag-area-border-on-drag:
|
|
1286
|
-
--mds-input-upload-drag-area-border:
|
|
1285
|
+
--mds-input-upload-drag-area-border-on-drag: --spacing(75) dashed rgb(var(--magma-border-strong));
|
|
1286
|
+
--mds-input-upload-drag-area-border: --spacing(75) dashed rgb(var(--magma-border-default));
|
|
1287
1287
|
|
|
1288
1288
|
/* component: mds-keyboard */
|
|
1289
1289
|
--mds-keyboard-background: rgb(208 208 208);
|
|
@@ -1298,8 +1298,8 @@
|
|
|
1298
1298
|
--mds-keyboard-illumination-light-opacity: 0.075;
|
|
1299
1299
|
--mds-keyboard-illumination-light-size: 1px;
|
|
1300
1300
|
--mds-keyboard-padding: 8px;
|
|
1301
|
-
--mds-keyboard-spinner-duration:
|
|
1302
|
-
--mds-keyboard-illumination-shadow: 0 0
|
|
1301
|
+
--mds-keyboard-spinner-duration: 1000ms;
|
|
1302
|
+
--mds-keyboard-illumination-shadow: 0 0 --spacing(75) 0 rgb(255 255 255 / 0.5);
|
|
1303
1303
|
--mds-keyboard-key-background: rgb(var(--magma-wash-strong));
|
|
1304
1304
|
--mds-keyboard-key-illumination-dark-opacity: 0.5;
|
|
1305
1305
|
--mds-keyboard-key-illumination-light-opacity: 0.15;
|
|
@@ -1340,6 +1340,19 @@
|
|
|
1340
1340
|
--mds-text-selection-background: var(--mds-label-selection-background);
|
|
1341
1341
|
--mds-text-selection-color: var(--mds-label-selection-color);
|
|
1342
1342
|
|
|
1343
|
+
/* component: mds-link */
|
|
1344
|
+
--private-link-band: 0px;
|
|
1345
|
+
--private-link-fill: 0px;
|
|
1346
|
+
--private-link-ink: 100%;
|
|
1347
|
+
--mds-link-underline-thickness: --spacing(50);
|
|
1348
|
+
--mds-link-underline-color: color-mix(in srgb, currentcolor 30%, transparent);
|
|
1349
|
+
--mds-link-background-hover: color-mix(in srgb, currentcolor 12%, transparent);
|
|
1350
|
+
--mds-link-color: rgb(var(--magma-accent-fg));
|
|
1351
|
+
--mds-link-icon-gap: --spacing(100);
|
|
1352
|
+
--mds-link-icon-size: --spacing(400);
|
|
1353
|
+
--mds-link-transition-duration: var(--duration-500);
|
|
1354
|
+
--mds-link-underline-offset: --spacing(100);
|
|
1355
|
+
|
|
1343
1356
|
/* component: mds-list-item */
|
|
1344
1357
|
--mds-list-item-icon-margin: 0 8px 0 0;
|
|
1345
1358
|
|
|
@@ -1482,9 +1495,9 @@
|
|
|
1482
1495
|
--mds-radial-menu-radius: 80px;
|
|
1483
1496
|
--mds-radial-menu-disc-scale: 0;
|
|
1484
1497
|
--mds-radial-menu-disc-delay: calc( (var(--mds-radial-menu-nth-siblings) + 1) * var(--mds-radial-menu-delay) );
|
|
1485
|
-
--mds-radial-menu-disc-filter: blur(
|
|
1498
|
+
--mds-radial-menu-disc-filter: blur(--spacing(200));
|
|
1486
1499
|
--mds-radial-menu-disc-shadow: var(--shadow-lg-sharp);
|
|
1487
|
-
--mds-radial-menu-transition-duration:
|
|
1500
|
+
--mds-radial-menu-transition-duration: var(--duration-500);
|
|
1488
1501
|
--mds-radial-menu-transition-timing-function: var(--ease-out-expo);
|
|
1489
1502
|
--mds-radial-menu-nth-siblings: 0;
|
|
1490
1503
|
--mds-radial-menu-radius-current: 0;
|
|
@@ -1558,7 +1571,7 @@
|
|
|
1558
1571
|
--mds-tab-tabs-wrapper-margin: 0;
|
|
1559
1572
|
--mds-tab-tabs-wrapper-outline-opacity: 0.7;
|
|
1560
1573
|
--mds-tab-tabs-wrapper-shadow-color: rgb(237 237 237);
|
|
1561
|
-
--mds-tab-transition-duration:
|
|
1574
|
+
--mds-tab-transition-duration: 500ms;
|
|
1562
1575
|
--mds-tab-slider-offset-x: 0;
|
|
1563
1576
|
--mds-tab-slider-offset-y: 0;
|
|
1564
1577
|
--mds-tab-slider-width: 0;
|
|
@@ -1572,7 +1585,7 @@
|
|
|
1572
1585
|
--mds-tab-item-hover-color: rgb(var(--magma-text-default));
|
|
1573
1586
|
--mds-tab-item-radius: min( calc(var(--mds-tab-tabs-radius) - var(--mds-tab-tabs-padding)), var(--magma-corner-cap) * var(--private-tab-item-height) );
|
|
1574
1587
|
--mds-tab-scroll-behavior: smooth;
|
|
1575
|
-
--mds-tab-tabs-overflow-shadow: 0 0 var(--mds-tab-tabs-overflow-shadow-size) -
|
|
1588
|
+
--mds-tab-tabs-overflow-shadow: 0 0 var(--mds-tab-tabs-overflow-shadow-size) --spacing(-50) rgb(0 0 0 / 0.375);
|
|
1576
1589
|
--mds-tab-transition-timing-function: var(--ease-out-expo);
|
|
1577
1590
|
--mds-tab-corner-shape: var(--magma-corner-shape);
|
|
1578
1591
|
--mds-tab-item-hover-shadow: none;
|
|
@@ -1601,7 +1614,7 @@
|
|
|
1601
1614
|
--mds-table-transition-duration: var(--duration-300);
|
|
1602
1615
|
--mds-table-actions-gap: --spacing(200);
|
|
1603
1616
|
--mds-table-background-alt: rgb(var(--magma-surface-raised));
|
|
1604
|
-
--mds-table-border-width:
|
|
1617
|
+
--mds-table-border-width: --spacing(50);
|
|
1605
1618
|
--mds-table-cell-padding: --spacing(400);
|
|
1606
1619
|
--mds-table-color-alt: rgb(var(--magma-text-muted));
|
|
1607
1620
|
--mds-table-batch-actions-width: --spacing(4800);
|
|
@@ -1657,11 +1670,11 @@
|
|
|
1657
1670
|
--mds-tooltip-arrow-background: rgb(255 255 255);
|
|
1658
1671
|
--mds-tooltip-background: rgb(255 255 255);
|
|
1659
1672
|
--mds-tooltip-dot-padding: 4px;
|
|
1660
|
-
--mds-tooltip-duration:
|
|
1673
|
+
--mds-tooltip-duration: 500ms;
|
|
1661
1674
|
--mds-tooltip-transform-from: scale(0.9) translateY(calc(16px * -1));
|
|
1662
1675
|
--mds-tooltip-transform-to: scale(1) translate(0, 0);
|
|
1663
1676
|
--mds-tooltip-z-index: 6000;
|
|
1664
|
-
--mds-tooltip-drop-shadow: drop-shadow(0 0
|
|
1677
|
+
--mds-tooltip-drop-shadow: drop-shadow(0 0 --spacing(100) rgb(var(--magma-text-default) / 0.075)) drop-shadow(0 0 --spacing(100) rgb(var(--magma-text-default) / 0.45)) drop-shadow(0 0 --spacing(100) rgb(var(--magma-text-default) / 0.45));
|
|
1665
1678
|
--mds-tooltip-ease: var(--ease-out-expo);
|
|
1666
1679
|
|
|
1667
1680
|
/* component: mds-tree */
|
|
@@ -1691,7 +1704,7 @@
|
|
|
1691
1704
|
--mds-tree-toggle-icon-position-right-default-color: rgb(var(--magma-text-subtle));
|
|
1692
1705
|
--mds-tree-toggle-icon-position-right-expanded-background: transparent;
|
|
1693
1706
|
--mds-tree-toggle-icon-position-right-expanded-color: rgb(var(--magma-text-subtle));
|
|
1694
|
-
--mds-tree-transition-duration:
|
|
1707
|
+
--mds-tree-transition-duration: var(--duration-300);
|
|
1695
1708
|
--mds-tree-transition-timing-function: var(--ease-in-out-expo);
|
|
1696
1709
|
--mds-tree-toggle-border-radius: var(--magma-radius-lg);
|
|
1697
1710
|
--mds-tree-toggle-size: --spacing(900);
|
package/dist/css/transitions.css
CHANGED
package/dist/css/typography.css
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
{
|
|
2
|
-
"description": "How the global tokens of Magma are consumed through Tailwind 4. tokens: by the custom property dist/dtcg names them with, the @theme variable that publishes each one, its namespace and key, and where a class or variant of that namespace reads another variable instead. namespaces: the utility roots (<root>-<key>) and variant patterns (* is the key) that read the namespace. Generated from the Tailwind design system of the entry point below; do not edit.",
|
|
2
|
+
"description": "How the global tokens of Magma are consumed through Tailwind 4. tokens: by the custom property dist/dtcg names them with, the @theme variable that publishes each one, its namespace and key, the @theme variables that republish it for the utilities of another namespace (aliases), and where a class or variant of that namespace reads another variable instead. keywords: the @theme variables that hold a CSS keyword, no token. namespaces: the utility roots (<root>-<key>) and variant patterns (* is the key) that read the namespace. Generated from the Tailwind design system of the entry point below; do not edit.",
|
|
3
3
|
"tailwind": "4.3.3",
|
|
4
4
|
"entry": [
|
|
5
5
|
"@import 'tailwindcss/theme.css' layer(theme);",
|
|
@@ -2335,14 +2335,21 @@
|
|
|
2335
2335
|
"--spacing-none": {
|
|
2336
2336
|
"theme": "--spacing-none",
|
|
2337
2337
|
"namespace": "--spacing",
|
|
2338
|
-
"key": "none"
|
|
2338
|
+
"key": "none",
|
|
2339
|
+
"shadowed": {
|
|
2340
|
+
"max-w": "--max-width-none"
|
|
2341
|
+
}
|
|
2339
2342
|
},
|
|
2340
2343
|
"--spacing-xs": {
|
|
2341
2344
|
"theme": "--spacing-xs",
|
|
2342
2345
|
"namespace": "--spacing",
|
|
2343
2346
|
"key": "xs",
|
|
2344
2347
|
"shadowed": {
|
|
2345
|
-
"
|
|
2348
|
+
"basis": "--flex-basis-xs",
|
|
2349
|
+
"leading": "--leading-xs",
|
|
2350
|
+
"max-w": "--max-width-xs",
|
|
2351
|
+
"min-w": "--min-width-xs",
|
|
2352
|
+
"w": "--width-xs"
|
|
2346
2353
|
}
|
|
2347
2354
|
},
|
|
2348
2355
|
"--spacing-sm": {
|
|
@@ -2350,7 +2357,11 @@
|
|
|
2350
2357
|
"namespace": "--spacing",
|
|
2351
2358
|
"key": "sm",
|
|
2352
2359
|
"shadowed": {
|
|
2353
|
-
"
|
|
2360
|
+
"basis": "--flex-basis-sm",
|
|
2361
|
+
"leading": "--leading-sm",
|
|
2362
|
+
"max-w": "--max-width-sm",
|
|
2363
|
+
"min-w": "--min-width-sm",
|
|
2364
|
+
"w": "--width-sm"
|
|
2354
2365
|
}
|
|
2355
2366
|
},
|
|
2356
2367
|
"--spacing-md": {
|
|
@@ -2358,7 +2369,11 @@
|
|
|
2358
2369
|
"namespace": "--spacing",
|
|
2359
2370
|
"key": "md",
|
|
2360
2371
|
"shadowed": {
|
|
2361
|
-
"
|
|
2372
|
+
"basis": "--flex-basis-md",
|
|
2373
|
+
"leading": "--leading-md",
|
|
2374
|
+
"max-w": "--max-width-md",
|
|
2375
|
+
"min-w": "--min-width-md",
|
|
2376
|
+
"w": "--width-md"
|
|
2362
2377
|
}
|
|
2363
2378
|
},
|
|
2364
2379
|
"--spacing-lg": {
|
|
@@ -2366,7 +2381,11 @@
|
|
|
2366
2381
|
"namespace": "--spacing",
|
|
2367
2382
|
"key": "lg",
|
|
2368
2383
|
"shadowed": {
|
|
2369
|
-
"
|
|
2384
|
+
"basis": "--flex-basis-lg",
|
|
2385
|
+
"leading": "--leading-lg",
|
|
2386
|
+
"max-w": "--max-width-lg",
|
|
2387
|
+
"min-w": "--min-width-lg",
|
|
2388
|
+
"w": "--width-lg"
|
|
2370
2389
|
}
|
|
2371
2390
|
},
|
|
2372
2391
|
"--spacing-xl": {
|
|
@@ -2374,7 +2393,11 @@
|
|
|
2374
2393
|
"namespace": "--spacing",
|
|
2375
2394
|
"key": "xl",
|
|
2376
2395
|
"shadowed": {
|
|
2377
|
-
"
|
|
2396
|
+
"basis": "--flex-basis-xl",
|
|
2397
|
+
"leading": "--leading-xl",
|
|
2398
|
+
"max-w": "--max-width-xl",
|
|
2399
|
+
"min-w": "--min-width-xl",
|
|
2400
|
+
"w": "--width-xl"
|
|
2378
2401
|
}
|
|
2379
2402
|
},
|
|
2380
2403
|
"--spacing-2xl": {
|
|
@@ -2382,7 +2405,11 @@
|
|
|
2382
2405
|
"namespace": "--spacing",
|
|
2383
2406
|
"key": "2xl",
|
|
2384
2407
|
"shadowed": {
|
|
2385
|
-
"
|
|
2408
|
+
"basis": "--flex-basis-2xl",
|
|
2409
|
+
"leading": "--leading-2xl",
|
|
2410
|
+
"max-w": "--max-width-2xl",
|
|
2411
|
+
"min-w": "--min-width-2xl",
|
|
2412
|
+
"w": "--width-2xl"
|
|
2386
2413
|
}
|
|
2387
2414
|
},
|
|
2388
2415
|
"--spacing-3xl": {
|
|
@@ -2390,7 +2417,11 @@
|
|
|
2390
2417
|
"namespace": "--spacing",
|
|
2391
2418
|
"key": "3xl",
|
|
2392
2419
|
"shadowed": {
|
|
2393
|
-
"
|
|
2420
|
+
"basis": "--flex-basis-3xl",
|
|
2421
|
+
"leading": "--leading-3xl",
|
|
2422
|
+
"max-w": "--max-width-3xl",
|
|
2423
|
+
"min-w": "--min-width-3xl",
|
|
2424
|
+
"w": "--width-3xl"
|
|
2394
2425
|
}
|
|
2395
2426
|
},
|
|
2396
2427
|
"--spacing-4xl": {
|
|
@@ -2398,7 +2429,11 @@
|
|
|
2398
2429
|
"namespace": "--spacing",
|
|
2399
2430
|
"key": "4xl",
|
|
2400
2431
|
"shadowed": {
|
|
2401
|
-
"
|
|
2432
|
+
"basis": "--flex-basis-4xl",
|
|
2433
|
+
"leading": "--leading-4xl",
|
|
2434
|
+
"max-w": "--max-width-4xl",
|
|
2435
|
+
"min-w": "--min-width-4xl",
|
|
2436
|
+
"w": "--width-4xl"
|
|
2402
2437
|
}
|
|
2403
2438
|
},
|
|
2404
2439
|
"--spacing-phrase": {
|
|
@@ -2443,112 +2478,128 @@
|
|
|
2443
2478
|
"theme": "--container-xs",
|
|
2444
2479
|
"namespace": "--container",
|
|
2445
2480
|
"key": "xs",
|
|
2481
|
+
"aliases": [
|
|
2482
|
+
"--flex-basis-xs",
|
|
2483
|
+
"--max-width-xs",
|
|
2484
|
+
"--min-width-xs",
|
|
2485
|
+
"--width-xs"
|
|
2486
|
+
],
|
|
2446
2487
|
"shadowed": {
|
|
2447
|
-
"basis": "--spacing-xs",
|
|
2448
2488
|
"inline": "--spacing-xs",
|
|
2449
2489
|
"max-inline": "--spacing-xs",
|
|
2450
|
-
"
|
|
2451
|
-
"min-inline": "--spacing-xs",
|
|
2452
|
-
"min-w": "--spacing-xs",
|
|
2453
|
-
"w": "--spacing-xs"
|
|
2490
|
+
"min-inline": "--spacing-xs"
|
|
2454
2491
|
}
|
|
2455
2492
|
},
|
|
2456
2493
|
"--container-sm": {
|
|
2457
2494
|
"theme": "--container-sm",
|
|
2458
2495
|
"namespace": "--container",
|
|
2459
2496
|
"key": "sm",
|
|
2497
|
+
"aliases": [
|
|
2498
|
+
"--flex-basis-sm",
|
|
2499
|
+
"--max-width-sm",
|
|
2500
|
+
"--min-width-sm",
|
|
2501
|
+
"--width-sm"
|
|
2502
|
+
],
|
|
2460
2503
|
"shadowed": {
|
|
2461
|
-
"basis": "--spacing-sm",
|
|
2462
2504
|
"inline": "--spacing-sm",
|
|
2463
2505
|
"max-inline": "--spacing-sm",
|
|
2464
|
-
"
|
|
2465
|
-
"min-inline": "--spacing-sm",
|
|
2466
|
-
"min-w": "--spacing-sm",
|
|
2467
|
-
"w": "--spacing-sm"
|
|
2506
|
+
"min-inline": "--spacing-sm"
|
|
2468
2507
|
}
|
|
2469
2508
|
},
|
|
2470
2509
|
"--container-md": {
|
|
2471
2510
|
"theme": "--container-md",
|
|
2472
2511
|
"namespace": "--container",
|
|
2473
2512
|
"key": "md",
|
|
2513
|
+
"aliases": [
|
|
2514
|
+
"--flex-basis-md",
|
|
2515
|
+
"--max-width-md",
|
|
2516
|
+
"--min-width-md",
|
|
2517
|
+
"--width-md"
|
|
2518
|
+
],
|
|
2474
2519
|
"shadowed": {
|
|
2475
|
-
"basis": "--spacing-md",
|
|
2476
2520
|
"inline": "--spacing-md",
|
|
2477
2521
|
"max-inline": "--spacing-md",
|
|
2478
|
-
"
|
|
2479
|
-
"min-inline": "--spacing-md",
|
|
2480
|
-
"min-w": "--spacing-md",
|
|
2481
|
-
"w": "--spacing-md"
|
|
2522
|
+
"min-inline": "--spacing-md"
|
|
2482
2523
|
}
|
|
2483
2524
|
},
|
|
2484
2525
|
"--container-lg": {
|
|
2485
2526
|
"theme": "--container-lg",
|
|
2486
2527
|
"namespace": "--container",
|
|
2487
2528
|
"key": "lg",
|
|
2529
|
+
"aliases": [
|
|
2530
|
+
"--flex-basis-lg",
|
|
2531
|
+
"--max-width-lg",
|
|
2532
|
+
"--min-width-lg",
|
|
2533
|
+
"--width-lg"
|
|
2534
|
+
],
|
|
2488
2535
|
"shadowed": {
|
|
2489
|
-
"basis": "--spacing-lg",
|
|
2490
2536
|
"inline": "--spacing-lg",
|
|
2491
2537
|
"max-inline": "--spacing-lg",
|
|
2492
|
-
"
|
|
2493
|
-
"min-inline": "--spacing-lg",
|
|
2494
|
-
"min-w": "--spacing-lg",
|
|
2495
|
-
"w": "--spacing-lg"
|
|
2538
|
+
"min-inline": "--spacing-lg"
|
|
2496
2539
|
}
|
|
2497
2540
|
},
|
|
2498
2541
|
"--container-xl": {
|
|
2499
2542
|
"theme": "--container-xl",
|
|
2500
2543
|
"namespace": "--container",
|
|
2501
2544
|
"key": "xl",
|
|
2545
|
+
"aliases": [
|
|
2546
|
+
"--flex-basis-xl",
|
|
2547
|
+
"--max-width-xl",
|
|
2548
|
+
"--min-width-xl",
|
|
2549
|
+
"--width-xl"
|
|
2550
|
+
],
|
|
2502
2551
|
"shadowed": {
|
|
2503
|
-
"basis": "--spacing-xl",
|
|
2504
2552
|
"inline": "--spacing-xl",
|
|
2505
2553
|
"max-inline": "--spacing-xl",
|
|
2506
|
-
"
|
|
2507
|
-
"min-inline": "--spacing-xl",
|
|
2508
|
-
"min-w": "--spacing-xl",
|
|
2509
|
-
"w": "--spacing-xl"
|
|
2554
|
+
"min-inline": "--spacing-xl"
|
|
2510
2555
|
}
|
|
2511
2556
|
},
|
|
2512
2557
|
"--container-2xl": {
|
|
2513
2558
|
"theme": "--container-2xl",
|
|
2514
2559
|
"namespace": "--container",
|
|
2515
2560
|
"key": "2xl",
|
|
2561
|
+
"aliases": [
|
|
2562
|
+
"--flex-basis-2xl",
|
|
2563
|
+
"--max-width-2xl",
|
|
2564
|
+
"--min-width-2xl",
|
|
2565
|
+
"--width-2xl"
|
|
2566
|
+
],
|
|
2516
2567
|
"shadowed": {
|
|
2517
|
-
"basis": "--spacing-2xl",
|
|
2518
2568
|
"inline": "--spacing-2xl",
|
|
2519
2569
|
"max-inline": "--spacing-2xl",
|
|
2520
|
-
"
|
|
2521
|
-
"min-inline": "--spacing-2xl",
|
|
2522
|
-
"min-w": "--spacing-2xl",
|
|
2523
|
-
"w": "--spacing-2xl"
|
|
2570
|
+
"min-inline": "--spacing-2xl"
|
|
2524
2571
|
}
|
|
2525
2572
|
},
|
|
2526
2573
|
"--container-3xl": {
|
|
2527
2574
|
"theme": "--container-3xl",
|
|
2528
2575
|
"namespace": "--container",
|
|
2529
2576
|
"key": "3xl",
|
|
2577
|
+
"aliases": [
|
|
2578
|
+
"--flex-basis-3xl",
|
|
2579
|
+
"--max-width-3xl",
|
|
2580
|
+
"--min-width-3xl",
|
|
2581
|
+
"--width-3xl"
|
|
2582
|
+
],
|
|
2530
2583
|
"shadowed": {
|
|
2531
|
-
"basis": "--spacing-3xl",
|
|
2532
2584
|
"inline": "--spacing-3xl",
|
|
2533
2585
|
"max-inline": "--spacing-3xl",
|
|
2534
|
-
"
|
|
2535
|
-
"min-inline": "--spacing-3xl",
|
|
2536
|
-
"min-w": "--spacing-3xl",
|
|
2537
|
-
"w": "--spacing-3xl"
|
|
2586
|
+
"min-inline": "--spacing-3xl"
|
|
2538
2587
|
}
|
|
2539
2588
|
},
|
|
2540
2589
|
"--container-4xl": {
|
|
2541
2590
|
"theme": "--container-4xl",
|
|
2542
2591
|
"namespace": "--container",
|
|
2543
2592
|
"key": "4xl",
|
|
2593
|
+
"aliases": [
|
|
2594
|
+
"--flex-basis-4xl",
|
|
2595
|
+
"--max-width-4xl",
|
|
2596
|
+
"--min-width-4xl",
|
|
2597
|
+
"--width-4xl"
|
|
2598
|
+
],
|
|
2544
2599
|
"shadowed": {
|
|
2545
|
-
"basis": "--spacing-4xl",
|
|
2546
2600
|
"inline": "--spacing-4xl",
|
|
2547
2601
|
"max-inline": "--spacing-4xl",
|
|
2548
|
-
"
|
|
2549
|
-
"min-inline": "--spacing-4xl",
|
|
2550
|
-
"min-w": "--spacing-4xl",
|
|
2551
|
-
"w": "--spacing-4xl"
|
|
2602
|
+
"min-inline": "--spacing-4xl"
|
|
2552
2603
|
}
|
|
2553
2604
|
},
|
|
2554
2605
|
"--container-5xl": {
|
|
@@ -3806,6 +3857,13 @@
|
|
|
3806
3857
|
"key": "accent-ai-on-emphasis"
|
|
3807
3858
|
}
|
|
3808
3859
|
},
|
|
3860
|
+
"keywords": {
|
|
3861
|
+
"--max-width-none": {
|
|
3862
|
+
"value": "none",
|
|
3863
|
+
"namespace": "--max-width",
|
|
3864
|
+
"key": "none"
|
|
3865
|
+
}
|
|
3866
|
+
},
|
|
3809
3867
|
"namespaces": {
|
|
3810
3868
|
"--color": {
|
|
3811
3869
|
"utilities": [
|
|
@@ -4072,6 +4130,12 @@
|
|
|
4072
4130
|
"shadow"
|
|
4073
4131
|
],
|
|
4074
4132
|
"variants": []
|
|
4133
|
+
},
|
|
4134
|
+
"--max-width": {
|
|
4135
|
+
"utilities": [
|
|
4136
|
+
"max-w"
|
|
4137
|
+
],
|
|
4138
|
+
"variants": []
|
|
4075
4139
|
}
|
|
4076
4140
|
},
|
|
4077
4141
|
"spacing": {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@maggioli-design-system/styles",
|
|
3
|
-
"version": "17.
|
|
3
|
+
"version": "17.3.0",
|
|
4
4
|
"description": "This module contains SCSS and CSS styles used by Maggioli Design System, it also makes available a Tailwind config based on Maggioli design tokens.",
|
|
5
5
|
"main": "./tailwind.config.js",
|
|
6
6
|
"scripts": {
|
|
@@ -63,7 +63,7 @@
|
|
|
63
63
|
"@fontsource/merriweather": "5.3.0",
|
|
64
64
|
"@fontsource/roboto": "5.3.0",
|
|
65
65
|
"@fontsource/roboto-mono": "5.3.0",
|
|
66
|
-
"@maggioli-design-system/design-tokens": "^15.2.
|
|
66
|
+
"@maggioli-design-system/design-tokens": "^15.2.2",
|
|
67
67
|
"normalize.css": "8.0.1"
|
|
68
68
|
},
|
|
69
69
|
"devDependencies": {
|