@maggioli-design-system/styles 17.3.0 → 17.5.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 +34 -0
- package/LICENSE +21 -0
- package/README.md +58 -4
- package/dist/css/base.css +52 -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 +45 -2
- package/dist/css/hydrated.css +2 -0
- package/dist/css/reset.css +4 -4
- package/dist/css/tailwind-theme-color.css +2 -2
- package/dist/css/tailwind-theme-typography.css +37 -3
- package/dist/css/tokens.editor.css +107 -61
- package/dist/css/transitions.css +2 -2
- package/dist/css/typography.css +40 -3
- package/dist/css/utility-typography.css +126 -2
- package/dist/dtcg/globals.tokens.json +81 -8
- package/dist/tailwind/base.css +75 -2
- package/dist/tailwind/consumption.json +335 -24
- package/dist/tailwind/dark-mode.css +16 -0
- package/dist/tailwind/theme.css +3 -1
- package/dist/tailwind/typography.css +39 -0
- package/dist/tailwind/utilities.css +70 -0
- package/package.json +9 -8
package/CHANGELOG.md
CHANGED
|
@@ -4,6 +4,40 @@ 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.5.0] - 2026-11-04
|
|
8
|
+
|
|
9
|
+
### Bug Fixes
|
|
10
|
+
|
|
11
|
+
- *(styles,mds-input)* Leave the text of an input untrimmed, so a drag no longer scrolls it
|
|
12
|
+
|
|
13
|
+
### Documentation
|
|
14
|
+
|
|
15
|
+
- *(magma,design-tokens,styles)* Point the guides to the domains
|
|
16
|
+
|
|
17
|
+
### Features
|
|
18
|
+
|
|
19
|
+
- *(styles)* Titles by role, page-frame and field-group, the utilities of the design language
|
|
20
|
+
- *(design-tokens,styles,mds-text)* The reading measure reaches the text (56ch)
|
|
21
|
+
- *(design-tokens,styles)* The rhythm of the row of actions, content-actions
|
|
22
|
+
- *(design-tokens,styles)* The threshold of a row of actions as --magma-container-actions
|
|
23
|
+
- *(stencil,styles)* Rows of actions stack, the status bar keeps its room, fields step down
|
|
24
|
+
- *(mds-header,styles)* The bar stands in the flow, sticky: drop the padding kept for it
|
|
25
|
+
|
|
26
|
+
## [styles@17.4.0] - 2026-10-24
|
|
27
|
+
|
|
28
|
+
### Documentation
|
|
29
|
+
|
|
30
|
+
- *(magma,styles)* Allow dark: for a deliberate per-mode choice
|
|
31
|
+
|
|
32
|
+
### Features
|
|
33
|
+
|
|
34
|
+
- *(styles)* Describe every global in the DTCG export and in the editor sheet
|
|
35
|
+
- *(styles)* Bring back the dark: variant, on the Magma mode instead of the OS
|
|
36
|
+
|
|
37
|
+
### Refactor
|
|
38
|
+
|
|
39
|
+
- *(design-tokens,styles)* Print the dark selectors of the palette from one list
|
|
40
|
+
|
|
7
41
|
## [styles@17.3.0] - 2026-10-21
|
|
8
42
|
|
|
9
43
|
### 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
|
@@ -4,6 +4,53 @@ These are the CSS and Tailwind styles used by components libraries of [Magma Des
|
|
|
4
4
|
|
|
5
5
|
---
|
|
6
6
|
|
|
7
|
+
### Architecture
|
|
8
|
+
|
|
9
|
+
The generators turn the tokens of `design-tokens` into the semantic roles, the globals and the
|
|
10
|
+
dark mode; the Tailwind 4 theme sits on them, and the token data describes both for the tools.
|
|
11
|
+
The components compile their sheets against the theme; a consumer app imports the sheets in
|
|
12
|
+
cascade layers.
|
|
13
|
+
|
|
14
|
+
```mermaid
|
|
15
|
+
flowchart LR
|
|
16
|
+
DT["design-tokens<br/>dist/css, dist/dtcg, semantic.model.ts"]
|
|
17
|
+
subgraph st["styles"]
|
|
18
|
+
GENS["scripts/<br/>semantic, corner, properties, dark-variant, hydrated"]
|
|
19
|
+
SHEETS["css/, postcss/<br/>reset, base, layer, typography"]
|
|
20
|
+
TW["tailwind/<br/>the Tailwind 4 theme, utilities"]
|
|
21
|
+
DATA["scripts/<br/>consumption from the theme, dtcg, editor-tokens"]
|
|
22
|
+
GENS --> TW
|
|
23
|
+
end
|
|
24
|
+
DT --> GENS
|
|
25
|
+
DT --> DATA
|
|
26
|
+
TW -->|"@reference"| WC["stencil<br/>component sheets"]
|
|
27
|
+
GENS -->|"generate.semantic"| CM["codemod<br/>semantic table"]
|
|
28
|
+
SHEETS & GENS & TW -.->|"dist/css, dist/tailwind"| APP(["consumer app"])
|
|
29
|
+
DATA -.->|"consumption.json, dist/dtcg"| LINT["lint<br/>core, MCP server"]
|
|
30
|
+
DATA -.->|"consumption.json, dist/dtcg"| DOCS(["docs site"])
|
|
31
|
+
DATA -.->|"tokens.editor.css"| EDITOR(["editor autocomplete"])
|
|
32
|
+
class LINT ai
|
|
33
|
+
class DT,GENS,SHEETS,TW,DATA visual
|
|
34
|
+
class WC components
|
|
35
|
+
class CM,EDITOR tooling
|
|
36
|
+
class APP,DOCS outside
|
|
37
|
+
class st area
|
|
38
|
+
classDef ai fill:#efe5ff,stroke:#8250df,color:#3e1f79
|
|
39
|
+
classDef assets fill:#fff1d6,stroke:#bf8700,color:#5c3d00
|
|
40
|
+
classDef visual fill:#dcf5ec,stroke:#1a7f64,color:#0b4a3a
|
|
41
|
+
classDef components fill:#ddf0ff,stroke:#0969da,color:#0a3069
|
|
42
|
+
classDef tooling fill:#eceff3,stroke:#57606a,color:#24292f
|
|
43
|
+
classDef outside fill:#ffffff,stroke:#8c959f,color:#24292f
|
|
44
|
+
classDef area fill:none,stroke:#8c959f
|
|
45
|
+
```
|
|
46
|
+
|
|
47
|
+
Rectangles: this repository; rounded boxes: outside it. Solid arrows: inside the repository;
|
|
48
|
+
dashed: where the package is installed. Labels: the file, export or command that crosses.
|
|
49
|
+
Colours: purple ai, amber assets, teal visual, blue components, grey tooling, white outside
|
|
50
|
+
([convention](../../docs/ARCHITECTURE.md#diagrams-of-the-projects)).
|
|
51
|
+
|
|
52
|
+
---
|
|
53
|
+
|
|
7
54
|
### Compatibility
|
|
8
55
|
|
|
9
56
|
Use the version of this package matching the major version of [`@maggioli-design-system/magma`](https://www.npmjs.com/package/@maggioli-design-system/magma) you are using:
|
|
@@ -157,8 +204,9 @@ class on the `html` tag:
|
|
|
157
204
|
|
|
158
205
|
To let the user choose, use the `mds-pref-mode` component of
|
|
159
206
|
`@maggioli-design-system/magma`: it writes the class and remembers the choice. Tailwind's
|
|
160
|
-
`dark:` variant follows
|
|
161
|
-
semantic roles
|
|
207
|
+
`dark:` variant follows these classes too (and the OS under `pref-mode-system`), once the
|
|
208
|
+
Magma Tailwind theme is imported. The semantic roles flip without it: keep `dark:` for a
|
|
209
|
+
deliberate per-mode choice, never to correct a colour.
|
|
162
210
|
|
|
163
211
|
---
|
|
164
212
|
|
|
@@ -317,7 +365,9 @@ stylesheets.
|
|
|
317
365
|
| `dist/tailwind/consumption.json` | How each token is consumed through Tailwind 4 |
|
|
318
366
|
|
|
319
367
|
design-tokens' `base.tokens.json` and `globals.tokens.json` together hold every global
|
|
320
|
-
token of `tokens.editor.css`.
|
|
368
|
+
token of `tokens.editor.css`. Every group and token of `globals.tokens.json` has a
|
|
369
|
+
`$description`, and every entry of a `cssOnly` list a `description`;
|
|
370
|
+
`tokens.editor.css` shows the same line at the end of the declaration. The resolver points at the files of design-tokens as
|
|
321
371
|
`../../../design-tokens/dist/dtcg/`: the two packages sit side by side in
|
|
322
372
|
`node_modules/@maggioli-design-system/`, as they do in this repository.
|
|
323
373
|
|
|
@@ -340,7 +390,11 @@ token of `tokens.editor.css`. The resolver points at the files of design-tokens
|
|
|
340
390
|
- **`shadowed`**: the roots (or variant patterns) where that class reads another
|
|
341
391
|
variable, and which one (`null`: none of the theme). `--container-xs` has
|
|
342
392
|
`"inline": "--spacing-xs"`: the logical utilities have no namespace of their own, so
|
|
343
|
-
`inline-xs` is 4px; the container is `inline-(--container-xs)`.
|
|
393
|
+
`inline-xs` is 4px; the container is `inline-(--container-xs)`. A class or variant that
|
|
394
|
+
Tailwind compiles to nothing is shadowed by `null` too: `--container-form` (`max-w-form`,
|
|
395
|
+
#1189) has `"@*": null`, since its value is a `var()` and a container query cannot read one.
|
|
396
|
+
- **`description`**: what the token is for, the `$description` of its DTCG token, or of its
|
|
397
|
+
`cssOnly` entry for a value DTCG cannot type (`--magma-width-form`).
|
|
344
398
|
- **`keywords`**: the `@theme` variables that hold a CSS keyword and publish no token.
|
|
345
399
|
`--max-width-none: none` makes `max-w-none` set no limit, where the spacing step would
|
|
346
400
|
set `0px`.
|
package/dist/css/base.css
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/*! tailwindcss v4.3.
|
|
1
|
+
/*! tailwindcss v4.3.4 | MIT License | https://tailwindcss.com */
|
|
2
2
|
@layer properties;
|
|
3
3
|
@layer base {
|
|
4
4
|
@view-transition {
|
|
@@ -11,6 +11,9 @@
|
|
|
11
11
|
body {
|
|
12
12
|
min-height: auto;
|
|
13
13
|
text-box: trim-both text;
|
|
14
|
+
&:where(input) {
|
|
15
|
+
text-box: normal;
|
|
16
|
+
}
|
|
14
17
|
font-size: var(--text-size-info-detail, 1rem);
|
|
15
18
|
line-height: var(--tw-leading, var(--text-size-info-detail--line-height, 1.5rem));
|
|
16
19
|
font-weight: var(--tw-font-weight, var(--text-size-info-detail--font-weight, 400));
|
|
@@ -45,6 +48,9 @@
|
|
|
45
48
|
select {
|
|
46
49
|
min-height: auto;
|
|
47
50
|
text-box: trim-both text;
|
|
51
|
+
&:where(input) {
|
|
52
|
+
text-box: normal;
|
|
53
|
+
}
|
|
48
54
|
font-family: var(--font-title, Roboto, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
|
|
49
55
|
font-size: var(--text-size-title-action, 0.875rem);
|
|
50
56
|
line-height: var(--tw-leading, var(--text-size-title-action--line-height, 1.5rem));
|
|
@@ -72,8 +78,50 @@
|
|
|
72
78
|
h6 {
|
|
73
79
|
max-width: var(--spacing-title, 30ch);
|
|
74
80
|
}
|
|
75
|
-
|
|
76
|
-
|
|
81
|
+
html:has(mds-status-bar[visible]) {
|
|
82
|
+
--magma-status-bar-room: calc(
|
|
83
|
+
calc(var(--spacing, 0.0025rem) * 800) + 2 * calc(var(--spacing, 0.0025rem) * 600) + var(--text-size-info-caption--line-height) +
|
|
84
|
+
calc(var(--spacing, 0.0025rem) * 400) + calc(var(--spacing, 0.0025rem) * 900) + var(--magma-rhythm-between-fields)
|
|
85
|
+
);
|
|
86
|
+
scroll-padding-bottom: var(--magma-status-bar-room);
|
|
87
|
+
}
|
|
88
|
+
html:has(mds-status-bar[visible])::after {
|
|
89
|
+
content: '';
|
|
90
|
+
display: block;
|
|
91
|
+
height: var(--magma-status-bar-room);
|
|
92
|
+
}
|
|
93
|
+
@media (width <= 480px) {
|
|
94
|
+
html:has(mds-status-bar[visible] > :nth-child(2)) {
|
|
95
|
+
--magma-status-bar-room: calc(
|
|
96
|
+
calc(var(--spacing, 0.0025rem) * 800) + 2 * calc(var(--spacing, 0.0025rem) * 600) + var(--text-size-info-caption--line-height) +
|
|
97
|
+
calc(var(--spacing, 0.0025rem) * 400) + 2 * calc(var(--spacing, 0.0025rem) * 900) + var(--magma-rhythm-inline) +
|
|
98
|
+
var(--magma-rhythm-between-fields)
|
|
99
|
+
);
|
|
100
|
+
}
|
|
101
|
+
html:has(mds-status-bar[visible] > :nth-child(3)) {
|
|
102
|
+
--magma-status-bar-room: calc(
|
|
103
|
+
calc(var(--spacing, 0.0025rem) * 800) + 2 * calc(var(--spacing, 0.0025rem) * 600) + var(--text-size-info-caption--line-height) +
|
|
104
|
+
calc(var(--spacing, 0.0025rem) * 400) + 3 * calc(var(--spacing, 0.0025rem) * 900) + 2 * var(--magma-rhythm-inline) +
|
|
105
|
+
var(--magma-rhythm-between-fields)
|
|
106
|
+
);
|
|
107
|
+
}
|
|
108
|
+
}
|
|
109
|
+
html:has(mds-header) {
|
|
110
|
+
scroll-padding-top: calc(
|
|
111
|
+
2 * calc(var(--spacing, 0.0025rem) * 400) + calc(var(--spacing, 0.0025rem) * 900) + var(--magma-rhythm-between-fields)
|
|
112
|
+
);
|
|
113
|
+
}
|
|
114
|
+
html:has(mds-header[appearance='inline']) {
|
|
115
|
+
scroll-padding-top: calc(
|
|
116
|
+
calc(var(--spacing, 0.0025rem) * 600) + 2 * calc(var(--spacing, 0.0025rem) * 400) + calc(var(--spacing, 0.0025rem) * 900) + var(--magma-rhythm-between-fields)
|
|
117
|
+
);
|
|
118
|
+
}
|
|
119
|
+
@media (width <= 767px) {
|
|
120
|
+
html:has(mds-header[appearance='inline']) {
|
|
121
|
+
scroll-padding-top: calc(
|
|
122
|
+
calc(var(--spacing, 0.0025rem) * 400) + 2 * calc(var(--spacing, 0.0025rem) * 400) + calc(var(--spacing, 0.0025rem) * 900) + var(--magma-rhythm-between-fields)
|
|
123
|
+
);
|
|
124
|
+
}
|
|
77
125
|
}
|
|
78
126
|
}
|
|
79
127
|
@property --tw-font-weight {
|
|
@@ -85,7 +133,7 @@
|
|
|
85
133
|
inherits: false;
|
|
86
134
|
}
|
|
87
135
|
@layer properties {
|
|
88
|
-
@supports ((-webkit-hyphens: none) and (not (margin-trim:
|
|
136
|
+
@supports ((-webkit-hyphens: none) and (not (margin-trim: block))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
|
|
89
137
|
*, ::before, ::after, ::backdrop {
|
|
90
138
|
--tw-font-weight: initial;
|
|
91
139
|
--tw-tracking: initial;
|
package/dist/css/colors-hex.css
CHANGED
package/dist/css/colors-rgb.css
CHANGED
package/dist/css/globals.css
CHANGED
|
@@ -563,6 +563,43 @@
|
|
|
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-publisher-color {
|
|
586
|
+
inherits: true;
|
|
587
|
+
initial-value: rgb(255 255 255);
|
|
588
|
+
syntax: '<color>';
|
|
589
|
+
}
|
|
590
|
+
|
|
591
|
+
@property --mds-book-page-weight-max {
|
|
592
|
+
inherits: true;
|
|
593
|
+
initial-value: 0.05;
|
|
594
|
+
syntax: '<number>';
|
|
595
|
+
}
|
|
596
|
+
|
|
597
|
+
@property --mds-book-page-weight-min {
|
|
598
|
+
inherits: true;
|
|
599
|
+
initial-value: 0.1;
|
|
600
|
+
syntax: '<number>';
|
|
601
|
+
}
|
|
602
|
+
|
|
566
603
|
/* mds-breadcrumb-item */
|
|
567
604
|
@property --mds-breadcrumb-item-arrow-depth-color {
|
|
568
605
|
inherits: true;
|
|
@@ -763,13 +800,13 @@
|
|
|
763
800
|
/* mds-card */
|
|
764
801
|
@property --mds-card-gap {
|
|
765
802
|
inherits: true;
|
|
766
|
-
initial-value:
|
|
803
|
+
initial-value: 12px;
|
|
767
804
|
syntax: '<length>';
|
|
768
805
|
}
|
|
769
806
|
|
|
770
807
|
@property --mds-card-padding {
|
|
771
808
|
inherits: true;
|
|
772
|
-
initial-value:
|
|
809
|
+
initial-value: 24px;
|
|
773
810
|
syntax: '<length>';
|
|
774
811
|
}
|
|
775
812
|
|
|
@@ -1159,6 +1196,12 @@
|
|
|
1159
1196
|
syntax: 'smooth | auto';
|
|
1160
1197
|
}
|
|
1161
1198
|
|
|
1199
|
+
@property --mds-filter-label-gap {
|
|
1200
|
+
inherits: true;
|
|
1201
|
+
initial-value: 12px;
|
|
1202
|
+
syntax: '<length>';
|
|
1203
|
+
}
|
|
1204
|
+
|
|
1162
1205
|
@property --mds-filter-label-padding {
|
|
1163
1206
|
inherits: true;
|
|
1164
1207
|
initial-value: 0 24px;
|
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)),
|
|
@@ -146,6 +147,7 @@ mds-badge:is([hydrated], .hydrated),
|
|
|
146
147
|
mds-banner:is([hydrated], .hydrated),
|
|
147
148
|
mds-benchmark-bar:is([hydrated], .hydrated),
|
|
148
149
|
mds-bibliography:is([hydrated], .hydrated),
|
|
150
|
+
mds-book:is([hydrated], .hydrated),
|
|
149
151
|
mds-breadcrumb:is([hydrated], .hydrated),
|
|
150
152
|
mds-breadcrumb-item:is([hydrated], .hydrated),
|
|
151
153
|
mds-button:is([hydrated], .hydrated),
|
package/dist/css/reset.css
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/*! tailwindcss v4.3.
|
|
1
|
+
/*! tailwindcss v4.3.4 | MIT License | https://tailwindcss.com */
|
|
2
2
|
@layer properties;
|
|
3
3
|
@layer reset {
|
|
4
4
|
@media (prefers-reduced-motion: no-preference) {
|
|
@@ -81,13 +81,13 @@
|
|
|
81
81
|
text-wrap: balance;
|
|
82
82
|
}
|
|
83
83
|
p {
|
|
84
|
-
max-width: var(--spacing-text,
|
|
84
|
+
max-width: var(--spacing-text, var(--magma-width-reading, 56ch));
|
|
85
85
|
margin: 0;
|
|
86
86
|
text-wrap: pretty;
|
|
87
87
|
}
|
|
88
88
|
li,
|
|
89
89
|
figcaption {
|
|
90
|
-
max-width: var(--spacing-text,
|
|
90
|
+
max-width: var(--spacing-text, var(--magma-width-reading, 56ch));
|
|
91
91
|
text-wrap: pretty;
|
|
92
92
|
}
|
|
93
93
|
header,
|
|
@@ -117,7 +117,7 @@
|
|
|
117
117
|
inherits: false;
|
|
118
118
|
}
|
|
119
119
|
@layer properties {
|
|
120
|
-
@supports ((-webkit-hyphens: none) and (not (margin-trim:
|
|
120
|
+
@supports ((-webkit-hyphens: none) and (not (margin-trim: block))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
|
|
121
121
|
*, ::before, ::after, ::backdrop {
|
|
122
122
|
--tw-ease: initial;
|
|
123
123
|
}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
/*
|
|
2
|
-
@magma-design-system/design-tokens v15.
|
|
2
|
+
@magma-design-system/design-tokens v15.4.0
|
|
3
3
|
Generated by Style Dictionary
|
|
4
4
|
Do not edit directly
|
|
5
|
-
Generated at Wed,
|
|
5
|
+
Generated at Wed, 04 Nov 2026 07:17:20 GMT
|
|
6
6
|
*/
|
|
7
7
|
|
|
8
8
|
@theme {
|
|
@@ -73,6 +73,27 @@ Generated at Wed, 21 Oct 2026 16:52:02 GMT
|
|
|
73
73
|
--text-size-code-hack--font-weight: 400;
|
|
74
74
|
--text-size-code-hack--line-height: 1.25rem;
|
|
75
75
|
|
|
76
|
+
--text-size-title-page: var(--text-size-title-h3, 1.875rem);
|
|
77
|
+
--text-size-title-page--font-weight: var(--text-size-title-h3--font-weight, 900);
|
|
78
|
+
--text-size-title-page--letter-spacing: var(--text-size-title-h3--letter-spacing, -0.025em);
|
|
79
|
+
--text-size-title-page--line-height: var(--text-size-title-h3--line-height, 2.25rem);
|
|
80
|
+
--text-size-title-section: var(--text-size-title-h5, 1.25rem);
|
|
81
|
+
--text-size-title-section--font-weight: var(--text-size-title-h5--font-weight, 900);
|
|
82
|
+
--text-size-title-section--letter-spacing: var(--text-size-title-h5--letter-spacing, -0.025em);
|
|
83
|
+
--text-size-title-section--line-height: var(--text-size-title-h5--line-height, 1.75rem);
|
|
84
|
+
--text-size-title-dialog: var(--text-size-title-h5, 1.25rem);
|
|
85
|
+
--text-size-title-dialog--font-weight: var(--text-size-title-h5--font-weight, 900);
|
|
86
|
+
--text-size-title-dialog--letter-spacing: var(--text-size-title-h5--letter-spacing, -0.025em);
|
|
87
|
+
--text-size-title-dialog--line-height: var(--text-size-title-h5--line-height, 1.75rem);
|
|
88
|
+
--text-size-title-part: var(--text-size-title-h6, 1rem);
|
|
89
|
+
--text-size-title-part--font-weight: var(--text-size-title-h6--font-weight, 700);
|
|
90
|
+
--text-size-title-part--letter-spacing: var(--text-size-title-h6--letter-spacing, -0.025em);
|
|
91
|
+
--text-size-title-part--line-height: var(--text-size-title-h6--line-height, 1.5rem);
|
|
92
|
+
--text-size-title-group: var(--text-size-title-h6, 1rem);
|
|
93
|
+
--text-size-title-group--font-weight: var(--text-size-title-h6--font-weight, 700);
|
|
94
|
+
--text-size-title-group--letter-spacing: var(--text-size-title-h6--letter-spacing, -0.025em);
|
|
95
|
+
--text-size-title-group--line-height: var(--text-size-title-h6--line-height, 1.5rem);
|
|
96
|
+
|
|
76
97
|
--leading-2xs: 0.625rem;
|
|
77
98
|
--leading-xs: 1rem;
|
|
78
99
|
--leading-sm: 1.25rem;
|
|
@@ -95,7 +116,7 @@ Generated at Wed, 21 Oct 2026 16:52:02 GMT
|
|
|
95
116
|
--spacing-4xl: 96px;
|
|
96
117
|
--spacing-phrase: 50ch;
|
|
97
118
|
--spacing-prose: 65ch;
|
|
98
|
-
--spacing-text:
|
|
119
|
+
--spacing-text: var(--magma-width-reading, 56ch);
|
|
99
120
|
--spacing-title: 30ch;
|
|
100
121
|
|
|
101
122
|
--container-4xs: 128px;
|
|
@@ -113,6 +134,19 @@ Generated at Wed, 21 Oct 2026 16:52:02 GMT
|
|
|
113
134
|
--container-6xl: 1152px;
|
|
114
135
|
--container-7xl: 1280px;
|
|
115
136
|
|
|
137
|
+
--spacing-inline: var(--magma-rhythm-inline, 12px);
|
|
138
|
+
--spacing-title-content: var(--magma-rhythm-title-content, 12px);
|
|
139
|
+
--spacing-label-control: var(--magma-rhythm-label-control, 12px);
|
|
140
|
+
--spacing-between-containers: var(--magma-rhythm-between-containers, 16px);
|
|
141
|
+
--spacing-between-fields: var(--magma-rhythm-between-fields, 24px);
|
|
142
|
+
--spacing-content-actions: var(--magma-rhythm-content-actions, 24px);
|
|
143
|
+
--spacing-inset: var(--magma-rhythm-inset, 24px);
|
|
144
|
+
--spacing-between-groups: var(--magma-rhythm-between-groups, 40px);
|
|
145
|
+
--spacing-between-sections: var(--magma-rhythm-between-sections, 64px);
|
|
146
|
+
--container-form: var(--magma-width-form, 56ch);
|
|
147
|
+
|
|
148
|
+
--container-actions: 23.75rem;
|
|
149
|
+
|
|
116
150
|
--width-xs: var(--container-xs);
|
|
117
151
|
--min-width-xs: var(--container-xs);
|
|
118
152
|
--max-width-xs: var(--container-xs);
|