@maggioli-design-system/styles 17.4.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 +19 -0
- package/README.md +52 -1
- 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 +14 -2
- 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 +43 -4
- 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 +1 -1
- package/dist/tailwind/base.css +75 -2
- package/dist/tailwind/consumption.json +335 -24
- package/dist/tailwind/typography.css +39 -0
- package/dist/tailwind/utilities.css +70 -0
- package/package.json +6 -6
package/CHANGELOG.md
CHANGED
|
@@ -4,6 +4,25 @@ 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
|
+
|
|
7
26
|
## [styles@17.4.0] - 2026-10-24
|
|
8
27
|
|
|
9
28
|
### Documentation
|
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:
|
|
@@ -343,7 +390,11 @@ token of `tokens.editor.css`. Every group and token of `globals.tokens.json` has
|
|
|
343
390
|
- **`shadowed`**: the roots (or variant patterns) where that class reads another
|
|
344
391
|
variable, and which one (`null`: none of the theme). `--container-xs` has
|
|
345
392
|
`"inline": "--spacing-xs"`: the logical utilities have no namespace of their own, so
|
|
346
|
-
`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`).
|
|
347
398
|
- **`keywords`**: the `@theme` variables that hold a CSS keyword and publish no token.
|
|
348
399
|
`--max-width-none: none` makes `max-w-none` set no limit, where the spacing step would
|
|
349
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
|
@@ -582,6 +582,12 @@
|
|
|
582
582
|
syntax: '<color>';
|
|
583
583
|
}
|
|
584
584
|
|
|
585
|
+
@property --mds-book-publisher-color {
|
|
586
|
+
inherits: true;
|
|
587
|
+
initial-value: rgb(255 255 255);
|
|
588
|
+
syntax: '<color>';
|
|
589
|
+
}
|
|
590
|
+
|
|
585
591
|
@property --mds-book-page-weight-max {
|
|
586
592
|
inherits: true;
|
|
587
593
|
initial-value: 0.05;
|
|
@@ -794,13 +800,13 @@
|
|
|
794
800
|
/* mds-card */
|
|
795
801
|
@property --mds-card-gap {
|
|
796
802
|
inherits: true;
|
|
797
|
-
initial-value:
|
|
803
|
+
initial-value: 12px;
|
|
798
804
|
syntax: '<length>';
|
|
799
805
|
}
|
|
800
806
|
|
|
801
807
|
@property --mds-card-padding {
|
|
802
808
|
inherits: true;
|
|
803
|
-
initial-value:
|
|
809
|
+
initial-value: 24px;
|
|
804
810
|
syntax: '<length>';
|
|
805
811
|
}
|
|
806
812
|
|
|
@@ -1190,6 +1196,12 @@
|
|
|
1190
1196
|
syntax: 'smooth | auto';
|
|
1191
1197
|
}
|
|
1192
1198
|
|
|
1199
|
+
@property --mds-filter-label-gap {
|
|
1200
|
+
inherits: true;
|
|
1201
|
+
initial-value: 12px;
|
|
1202
|
+
syntax: '<length>';
|
|
1203
|
+
}
|
|
1204
|
+
|
|
1193
1205
|
@property --mds-filter-label-padding {
|
|
1194
1206
|
inherits: true;
|
|
1195
1207
|
initial-value: 0 24px;
|
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
|
|
5
|
+
Generated at Wed, 04 Nov 2026 07:17:20 GMT
|
|
6
6
|
*/
|
|
7
7
|
|
|
8
8
|
@theme {
|
|
@@ -73,6 +73,27 @@ Generated at Sat, 24 Oct 2026 12:12:55 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 Sat, 24 Oct 2026 12:12:55 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 Sat, 24 Oct 2026 12:12:55 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);
|
|
@@ -85,6 +85,26 @@
|
|
|
85
85
|
--text-size-code-hack: 0.875rem;
|
|
86
86
|
--text-size-code-hack--font-weight: 400;
|
|
87
87
|
--text-size-code-hack--line-height: 1.25rem;
|
|
88
|
+
--text-size-title-page: var(--text-size-title-h3);
|
|
89
|
+
--text-size-title-page--font-weight: var(--text-size-title-h3--font-weight);
|
|
90
|
+
--text-size-title-page--letter-spacing: var(--text-size-title-h3--letter-spacing);
|
|
91
|
+
--text-size-title-page--line-height: var(--text-size-title-h3--line-height);
|
|
92
|
+
--text-size-title-section: var(--text-size-title-h5);
|
|
93
|
+
--text-size-title-section--font-weight: var(--text-size-title-h5--font-weight);
|
|
94
|
+
--text-size-title-section--letter-spacing: var(--text-size-title-h5--letter-spacing);
|
|
95
|
+
--text-size-title-section--line-height: var(--text-size-title-h5--line-height);
|
|
96
|
+
--text-size-title-dialog: var(--text-size-title-h5);
|
|
97
|
+
--text-size-title-dialog--font-weight: var(--text-size-title-h5--font-weight);
|
|
98
|
+
--text-size-title-dialog--letter-spacing: var(--text-size-title-h5--letter-spacing);
|
|
99
|
+
--text-size-title-dialog--line-height: var(--text-size-title-h5--line-height);
|
|
100
|
+
--text-size-title-part: var(--text-size-title-h6);
|
|
101
|
+
--text-size-title-part--font-weight: var(--text-size-title-h6--font-weight);
|
|
102
|
+
--text-size-title-part--letter-spacing: var(--text-size-title-h6--letter-spacing);
|
|
103
|
+
--text-size-title-part--line-height: var(--text-size-title-h6--line-height);
|
|
104
|
+
--text-size-title-group: var(--text-size-title-h6);
|
|
105
|
+
--text-size-title-group--font-weight: var(--text-size-title-h6--font-weight);
|
|
106
|
+
--text-size-title-group--letter-spacing: var(--text-size-title-h6--letter-spacing);
|
|
107
|
+
--text-size-title-group--line-height: var(--text-size-title-h6--line-height);
|
|
88
108
|
--leading-2xs: 0.625rem;
|
|
89
109
|
--leading-xs: 1rem;
|
|
90
110
|
--leading-sm: 1.25rem;
|
|
@@ -106,7 +126,7 @@
|
|
|
106
126
|
--spacing-4xl: 96px;
|
|
107
127
|
--spacing-phrase: 50ch;
|
|
108
128
|
--spacing-prose: 65ch;
|
|
109
|
-
--spacing-text:
|
|
129
|
+
--spacing-text: var(--magma-width-reading, 56ch);
|
|
110
130
|
--spacing-title: 30ch;
|
|
111
131
|
--container-4xs: 128px;
|
|
112
132
|
--container-3xs: 192px;
|
|
@@ -122,6 +142,21 @@
|
|
|
122
142
|
--container-5xl: 1024px;
|
|
123
143
|
--container-6xl: 1152px;
|
|
124
144
|
--container-7xl: 1280px;
|
|
145
|
+
--magma-rhythm-inline: 12px;
|
|
146
|
+
--magma-rhythm-title-content: 12px;
|
|
147
|
+
--magma-rhythm-label-control: 12px;
|
|
148
|
+
--magma-rhythm-between-containers: 16px;
|
|
149
|
+
--magma-rhythm-between-fields: 24px;
|
|
150
|
+
--magma-rhythm-content-actions: 24px;
|
|
151
|
+
--magma-rhythm-inset: 24px;
|
|
152
|
+
--magma-rhythm-between-groups: 40px;
|
|
153
|
+
--magma-rhythm-between-sections: 64px;
|
|
154
|
+
--magma-width-reading: 56ch;
|
|
155
|
+
--magma-width-form: var(--magma-width-reading);
|
|
156
|
+
--magma-width-page: 1280px;
|
|
157
|
+
--magma-width-page-gutter: 24px;
|
|
158
|
+
--magma-width-dialog: calc(var(--magma-width-form) + 2 * var(--magma-rhythm-inset));
|
|
159
|
+
--magma-container-actions: 23.75rem;
|
|
125
160
|
--breakpoint-mobile: 480px;
|
|
126
161
|
--breakpoint-tablet: 768px;
|
|
127
162
|
--breakpoint-desktop: 1024px;
|
|
@@ -651,7 +686,7 @@
|
|
|
651
686
|
--magma-tint-scale-09: var(--tone-neutral-09);
|
|
652
687
|
--magma-tint-scale-10: var(--tone-neutral-10);
|
|
653
688
|
--magma-surface-sunken: var(--magma-tint-sunken); /* Below the page: wells, insets, code blocks, tracks. */
|
|
654
|
-
--magma-surface-muted: var(--magma-tint-muted); /* Same-plane grouping
|
|
689
|
+
--magma-surface-muted: var(--magma-tint-muted); /* Same-plane grouping inside a component: zebra rows; never the background of a section. */
|
|
655
690
|
--magma-surface-default: var(--magma-tint-default); /* The page canvas, the background of the body. */
|
|
656
691
|
--magma-surface-raised: var(--magma-tint-raised); /* Above the page: cards, panels, sticky headers. */
|
|
657
692
|
--magma-surface-overlay: var(--magma-tint-overlay); /* Floating above everything: modal, dropdown, popover, sheet. */
|
|
@@ -933,6 +968,7 @@
|
|
|
933
968
|
--mds-book-color: rgb(36 103 231);
|
|
934
969
|
--mds-book-paper-color: rgb(250 248 242);
|
|
935
970
|
--mds-book-text-color: rgb(255 255 255);
|
|
971
|
+
--mds-book-publisher-color: rgb(255 255 255);
|
|
936
972
|
--mds-book-page-weight-max: 0.05;
|
|
937
973
|
--mds-book-page-weight-min: 0.1;
|
|
938
974
|
|
|
@@ -997,8 +1033,8 @@
|
|
|
997
1033
|
--mds-calendar-cell-other-month-visibility: visible;
|
|
998
1034
|
|
|
999
1035
|
/* component: mds-card */
|
|
1000
|
-
--mds-card-gap:
|
|
1001
|
-
--mds-card-padding:
|
|
1036
|
+
--mds-card-gap: 12px;
|
|
1037
|
+
--mds-card-padding: 24px;
|
|
1002
1038
|
--mds-card-background: rgb(var(--magma-surface-raised));
|
|
1003
1039
|
|
|
1004
1040
|
/* component: mds-chip */
|
|
@@ -1095,6 +1131,7 @@
|
|
|
1095
1131
|
--mds-filter-items-padding: 8px;
|
|
1096
1132
|
--mds-filter-items-radius: 1000px;
|
|
1097
1133
|
--mds-filter-items-scroll-behavior: smooth;
|
|
1134
|
+
--mds-filter-label-gap: 12px;
|
|
1098
1135
|
--mds-filter-label-padding: 0 24px;
|
|
1099
1136
|
--mds-filter-wrapper-shadow-color: rgb(196 196 196);
|
|
1100
1137
|
--mds-filter-wrapper-shadow-opacity: 0.1;
|
|
@@ -1407,6 +1444,8 @@
|
|
|
1407
1444
|
--mds-notification-translate-offset-x: -1.75;
|
|
1408
1445
|
--mds-notification-dot-transition-duration: var(--duration-300);
|
|
1409
1446
|
--mds-notification-transition-timing-function: var(--ease-out-cubic);
|
|
1447
|
+
--mds-notification-pulse-duration: var(--duration-1000);
|
|
1448
|
+
--mds-notification-pulse-spread: --spacing(200);
|
|
1410
1449
|
|
|
1411
1450
|
/* component: mds-paginator */
|
|
1412
1451
|
--mds-paginator-background: rgb(225 225 225);
|
package/dist/css/transitions.css
CHANGED