@maggioli-design-system/styles 17.2.1 → 17.4.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 +25 -0
- package/LICENSE +21 -0
- package/README.md +16 -4
- 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 +56 -6
- package/dist/css/hydrated.css +4 -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 +100 -80
- package/dist/css/transitions.css +2 -2
- package/dist/css/typography.css +2 -2
- package/dist/dtcg/globals.tokens.json +81 -8
- package/dist/tailwind/consumption.json +114 -50
- package/dist/tailwind/dark-mode.css +16 -0
- package/dist/tailwind/theme.css +3 -1
- package/package.json +5 -4
package/CHANGELOG.md
CHANGED
|
@@ -4,6 +4,31 @@ 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.4.0] - 2026-10-24
|
|
8
|
+
|
|
9
|
+
### Documentation
|
|
10
|
+
|
|
11
|
+
- *(magma,styles)* Allow dark: for a deliberate per-mode choice
|
|
12
|
+
|
|
13
|
+
### Features
|
|
14
|
+
|
|
15
|
+
- *(styles)* Describe every global in the DTCG export and in the editor sheet
|
|
16
|
+
- *(styles)* Bring back the dark: variant, on the Magma mode instead of the OS
|
|
17
|
+
|
|
18
|
+
### Refactor
|
|
19
|
+
|
|
20
|
+
- *(design-tokens,styles)* Print the dark selectors of the palette from one list
|
|
21
|
+
|
|
22
|
+
## [styles@17.3.0] - 2026-10-21
|
|
23
|
+
|
|
24
|
+
### Bug Fixes
|
|
25
|
+
|
|
26
|
+
- *(design-tokens,styles)* Size utilities with a t-shirt name read the container, not spacing
|
|
27
|
+
|
|
28
|
+
### Features
|
|
29
|
+
|
|
30
|
+
- *(styles)* List the aliases and the keyword variables of the theme in consumption.json
|
|
31
|
+
|
|
7
32
|
## [styles@17.2.1] - 2026-10-20
|
|
8
33
|
|
|
9
34
|
### Bug Fixes
|
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2020-2026 Maggioli S.p.A.
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
CHANGED
|
@@ -157,8 +157,9 @@ class on the `html` tag:
|
|
|
157
157
|
|
|
158
158
|
To let the user choose, use the `mds-pref-mode` component of
|
|
159
159
|
`@maggioli-design-system/magma`: it writes the class and remembers the choice. Tailwind's
|
|
160
|
-
`dark:` variant follows
|
|
161
|
-
semantic roles
|
|
160
|
+
`dark:` variant follows these classes too (and the OS under `pref-mode-system`), once the
|
|
161
|
+
Magma Tailwind theme is imported. The semantic roles flip without it: keep `dark:` for a
|
|
162
|
+
deliberate per-mode choice, never to correct a colour.
|
|
162
163
|
|
|
163
164
|
---
|
|
164
165
|
|
|
@@ -317,7 +318,9 @@ stylesheets.
|
|
|
317
318
|
| `dist/tailwind/consumption.json` | How each token is consumed through Tailwind 4 |
|
|
318
319
|
|
|
319
320
|
design-tokens' `base.tokens.json` and `globals.tokens.json` together hold every global
|
|
320
|
-
token of `tokens.editor.css`.
|
|
321
|
+
token of `tokens.editor.css`. Every group and token of `globals.tokens.json` has a
|
|
322
|
+
`$description`, and every entry of a `cssOnly` list a `description`;
|
|
323
|
+
`tokens.editor.css` shows the same line at the end of the declaration. The resolver points at the files of design-tokens as
|
|
321
324
|
`../../../design-tokens/dist/dtcg/`: the two packages sit side by side in
|
|
322
325
|
`node_modules/@maggioli-design-system/`, as they do in this repository.
|
|
323
326
|
|
|
@@ -332,9 +335,18 @@ token of `tokens.editor.css`. The resolver points at the files of design-tokens
|
|
|
332
335
|
root of `namespaces[namespace].utilities` (`text-fg-muted`, `bg-fg-muted`,
|
|
333
336
|
`border-fg-muted`, ...), its variants the patterns of `namespaces[namespace].variants`
|
|
334
337
|
with the key for `*` (`max-tablet:`, `@md:`).
|
|
338
|
+
- **`aliases`**: the `@theme` variables that republish the token whole for the utilities
|
|
339
|
+
of another namespace. `w-*`, `min-w-*`, `max-w-*` and `basis-*` read their own
|
|
340
|
+
namespace, then spacing, then container, so for the keys both scales have (`xs` ...
|
|
341
|
+
`4xl`) `--container-xs` comes with `--width-xs`, `--max-width-xs`, ...: `max-w-xs` is
|
|
342
|
+
the 320px container, not the 4px spacing step.
|
|
335
343
|
- **`shadowed`**: the roots (or variant patterns) where that class reads another
|
|
336
344
|
variable, and which one (`null`: none of the theme). `--container-xs` has
|
|
337
|
-
`"
|
|
345
|
+
`"inline": "--spacing-xs"`: the logical utilities have no namespace of their own, so
|
|
346
|
+
`inline-xs` is 4px; the container is `inline-(--container-xs)`.
|
|
347
|
+
- **`keywords`**: the `@theme` variables that hold a CSS keyword and publish no token.
|
|
348
|
+
`--max-width-none: none` makes `max-w-none` set no limit, where the spacing step would
|
|
349
|
+
set `0px`.
|
|
338
350
|
- **`namespace: null`**: no utility reads the variable. Tailwind 4 has no `--border-*`
|
|
339
351
|
or `--duration-*` namespace, so `border-xs` does not exist and `duration-200` is
|
|
340
352
|
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
|
@@ -563,6 +563,37 @@
|
|
|
563
563
|
syntax: '<color>';
|
|
564
564
|
}
|
|
565
565
|
|
|
566
|
+
/* mds-book */
|
|
567
|
+
@property --mds-book-color {
|
|
568
|
+
inherits: true;
|
|
569
|
+
initial-value: rgb(36 103 231);
|
|
570
|
+
syntax: '<color>';
|
|
571
|
+
}
|
|
572
|
+
|
|
573
|
+
@property --mds-book-paper-color {
|
|
574
|
+
inherits: true;
|
|
575
|
+
initial-value: rgb(250 248 242);
|
|
576
|
+
syntax: '<color>';
|
|
577
|
+
}
|
|
578
|
+
|
|
579
|
+
@property --mds-book-text-color {
|
|
580
|
+
inherits: true;
|
|
581
|
+
initial-value: rgb(255 255 255);
|
|
582
|
+
syntax: '<color>';
|
|
583
|
+
}
|
|
584
|
+
|
|
585
|
+
@property --mds-book-page-weight-max {
|
|
586
|
+
inherits: true;
|
|
587
|
+
initial-value: 0.05;
|
|
588
|
+
syntax: '<number>';
|
|
589
|
+
}
|
|
590
|
+
|
|
591
|
+
@property --mds-book-page-weight-min {
|
|
592
|
+
inherits: true;
|
|
593
|
+
initial-value: 0.1;
|
|
594
|
+
syntax: '<number>';
|
|
595
|
+
}
|
|
596
|
+
|
|
566
597
|
/* mds-breadcrumb-item */
|
|
567
598
|
@property --mds-breadcrumb-item-arrow-depth-color {
|
|
568
599
|
inherits: true;
|
|
@@ -862,13 +893,13 @@
|
|
|
862
893
|
|
|
863
894
|
@property --mds-dropdown-duration {
|
|
864
895
|
inherits: true;
|
|
865
|
-
initial-value:
|
|
896
|
+
initial-value: 500ms;
|
|
866
897
|
syntax: '<time>';
|
|
867
898
|
}
|
|
868
899
|
|
|
869
900
|
@property --mds-dropdown-mouseover-delay {
|
|
870
901
|
inherits: true;
|
|
871
|
-
initial-value:
|
|
902
|
+
initial-value: 500ms;
|
|
872
903
|
syntax: '<time>';
|
|
873
904
|
}
|
|
874
905
|
|
|
@@ -1928,7 +1959,7 @@
|
|
|
1928
1959
|
|
|
1929
1960
|
@property --mds-keyboard-spinner-duration {
|
|
1930
1961
|
inherits: true;
|
|
1931
|
-
initial-value:
|
|
1962
|
+
initial-value: 1000ms;
|
|
1932
1963
|
syntax: '<time>';
|
|
1933
1964
|
}
|
|
1934
1965
|
|
|
@@ -1981,6 +2012,25 @@
|
|
|
1981
2012
|
syntax: '<color>';
|
|
1982
2013
|
}
|
|
1983
2014
|
|
|
2015
|
+
/* mds-link */
|
|
2016
|
+
@property --private-link-band {
|
|
2017
|
+
inherits: false;
|
|
2018
|
+
initial-value: 0px;
|
|
2019
|
+
syntax: '<length>';
|
|
2020
|
+
}
|
|
2021
|
+
|
|
2022
|
+
@property --private-link-fill {
|
|
2023
|
+
inherits: false;
|
|
2024
|
+
initial-value: 0px;
|
|
2025
|
+
syntax: '<length>';
|
|
2026
|
+
}
|
|
2027
|
+
|
|
2028
|
+
@property --private-link-ink {
|
|
2029
|
+
inherits: false;
|
|
2030
|
+
initial-value: 100%;
|
|
2031
|
+
syntax: '<percentage>';
|
|
2032
|
+
}
|
|
2033
|
+
|
|
1984
2034
|
/* mds-list-item */
|
|
1985
2035
|
@property --mds-list-item-icon-margin {
|
|
1986
2036
|
inherits: true;
|
|
@@ -2731,7 +2781,7 @@
|
|
|
2731
2781
|
|
|
2732
2782
|
@property --mds-tab-transition-duration {
|
|
2733
2783
|
inherits: true;
|
|
2734
|
-
initial-value:
|
|
2784
|
+
initial-value: 500ms;
|
|
2735
2785
|
syntax: '<time>';
|
|
2736
2786
|
}
|
|
2737
2787
|
|
|
@@ -2876,7 +2926,7 @@
|
|
|
2876
2926
|
|
|
2877
2927
|
@property --mds-tooltip-delay {
|
|
2878
2928
|
inherits: true;
|
|
2879
|
-
initial-value:
|
|
2929
|
+
initial-value: 1000ms;
|
|
2880
2930
|
syntax: '<time>';
|
|
2881
2931
|
}
|
|
2882
2932
|
|
|
@@ -2888,7 +2938,7 @@
|
|
|
2888
2938
|
|
|
2889
2939
|
@property --mds-tooltip-duration {
|
|
2890
2940
|
inherits: true;
|
|
2891
|
-
initial-value:
|
|
2941
|
+
initial-value: 500ms;
|
|
2892
2942
|
syntax: '<time>';
|
|
2893
2943
|
}
|
|
2894
2944
|
|
package/dist/css/hydrated.css
CHANGED
|
@@ -10,6 +10,7 @@ mds-badge:not(:is([hydrated], .hydrated)),
|
|
|
10
10
|
mds-banner:not(:is([hydrated], .hydrated)),
|
|
11
11
|
mds-benchmark-bar:not(:is([hydrated], .hydrated)),
|
|
12
12
|
mds-bibliography:not(:is([hydrated], .hydrated)),
|
|
13
|
+
mds-book:not(:is([hydrated], .hydrated)),
|
|
13
14
|
mds-breadcrumb:not(:is([hydrated], .hydrated)),
|
|
14
15
|
mds-breadcrumb-item:not(:is([hydrated], .hydrated)),
|
|
15
16
|
mds-button:not(:is([hydrated], .hydrated)),
|
|
@@ -55,6 +56,7 @@ mds-keyboard-key:not(:is([hydrated], .hydrated)),
|
|
|
55
56
|
mds-kpi:not(:is([hydrated], .hydrated)),
|
|
56
57
|
mds-kpi-item:not(:is([hydrated], .hydrated)),
|
|
57
58
|
mds-label:not(:is([hydrated], .hydrated)),
|
|
59
|
+
mds-link:not(:is([hydrated], .hydrated)),
|
|
58
60
|
mds-list:not(:is([hydrated], .hydrated)),
|
|
59
61
|
mds-list-item:not(:is([hydrated], .hydrated)),
|
|
60
62
|
mds-mention:not(:is([hydrated], .hydrated)),
|
|
@@ -145,6 +147,7 @@ mds-badge:is([hydrated], .hydrated),
|
|
|
145
147
|
mds-banner:is([hydrated], .hydrated),
|
|
146
148
|
mds-benchmark-bar:is([hydrated], .hydrated),
|
|
147
149
|
mds-bibliography:is([hydrated], .hydrated),
|
|
150
|
+
mds-book:is([hydrated], .hydrated),
|
|
148
151
|
mds-breadcrumb:is([hydrated], .hydrated),
|
|
149
152
|
mds-breadcrumb-item:is([hydrated], .hydrated),
|
|
150
153
|
mds-button:is([hydrated], .hydrated),
|
|
@@ -190,6 +193,7 @@ mds-keyboard-key:is([hydrated], .hydrated),
|
|
|
190
193
|
mds-kpi:is([hydrated], .hydrated),
|
|
191
194
|
mds-kpi-item:is([hydrated], .hydrated),
|
|
192
195
|
mds-label:is([hydrated], .hydrated),
|
|
196
|
+
mds-link:is([hydrated], .hydrated),
|
|
193
197
|
mds-list:is([hydrated], .hydrated),
|
|
194
198
|
mds-list-item:is([hydrated], .hydrated),
|
|
195
199
|
mds-mention:is([hydrated], .hydrated),
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
/*
|
|
2
|
-
@magma-design-system/design-tokens v15.
|
|
2
|
+
@magma-design-system/design-tokens v15.3.0
|
|
3
3
|
Generated by Style Dictionary
|
|
4
4
|
Do not edit directly
|
|
5
|
-
Generated at
|
|
5
|
+
Generated at Sat, 24 Oct 2026 12:12:55 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;
|