@maggioli-design-system/styles 17.4.0 → 17.6.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/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/themes.css +68 -0
- package/dist/css/tokens.editor.css +55 -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/dtcg/magma.resolver.json +24 -2
- 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,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.6.0] - 2026-11-04
|
|
8
|
+
|
|
9
|
+
### Features
|
|
10
|
+
|
|
11
|
+
- *(design-tokens,styles)* Name the two product themes, business and editorial
|
|
12
|
+
|
|
13
|
+
## [styles@17.5.0] - 2026-11-04
|
|
14
|
+
|
|
15
|
+
### Bug Fixes
|
|
16
|
+
|
|
17
|
+
- *(styles,mds-input)* Leave the text of an input untrimmed, so a drag no longer scrolls it
|
|
18
|
+
|
|
19
|
+
### Documentation
|
|
20
|
+
|
|
21
|
+
- *(magma,design-tokens,styles)* Point the guides to the domains
|
|
22
|
+
|
|
23
|
+
### Features
|
|
24
|
+
|
|
25
|
+
- *(styles)* Titles by role, page-frame and field-group, the utilities of the design language
|
|
26
|
+
- *(design-tokens,styles,mds-text)* The reading measure reaches the text (56ch)
|
|
27
|
+
- *(design-tokens,styles)* The rhythm of the row of actions, content-actions
|
|
28
|
+
- *(design-tokens,styles)* The threshold of a row of actions as --magma-container-actions
|
|
29
|
+
- *(stencil,styles)* Rows of actions stack, the status bar keeps its room, fields step down
|
|
30
|
+
- *(mds-header,styles)* The bar stands in the flow, sticky: drop the padding kept for it
|
|
31
|
+
|
|
7
32
|
## [styles@17.4.0] - 2026-10-24
|
|
8
33
|
|
|
9
34
|
### 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.5.0
|
|
3
3
|
Generated by Style Dictionary
|
|
4
4
|
Do not edit directly
|
|
5
|
-
Generated at
|
|
5
|
+
Generated at Wed, 04 Nov 2026 15:12:42 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);
|
package/dist/css/themes.css
CHANGED
|
@@ -4,6 +4,73 @@
|
|
|
4
4
|
Contract + rationale: semantic.config.ts and SEMANTIC_COLOR_SPEC.md.
|
|
5
5
|
*/
|
|
6
6
|
|
|
7
|
+
/* The preview of each theme (#692): its wash and its accent, for a theme picker. */
|
|
8
|
+
:root {
|
|
9
|
+
--magma-preview-business-wash: var(--tone-neutral-09);
|
|
10
|
+
--magma-preview-business-accent: var(--variant-primary-04);
|
|
11
|
+
--magma-preview-editorial-wash: var(--tone-bisque-09);
|
|
12
|
+
--magma-preview-editorial-accent: var(--variant-secondary-04);
|
|
13
|
+
--magma-preview-default-wash: var(--tone-neutral-09);
|
|
14
|
+
--magma-preview-default-accent: var(--variant-primary-04);
|
|
15
|
+
--magma-preview-cool-wash: var(--tone-porcelain-09);
|
|
16
|
+
--magma-preview-cool-accent: var(--variant-primary-04);
|
|
17
|
+
--magma-preview-warm-wash: var(--tone-bisque-09);
|
|
18
|
+
--magma-preview-warm-accent: var(--variant-primary-04);
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
:root[data-theme-name='editorial'] {
|
|
22
|
+
--magma-tint-sunken: var(--surface-bisque-sunken);
|
|
23
|
+
--magma-tint-muted: var(--surface-bisque-muted);
|
|
24
|
+
--magma-tint-default: var(--surface-bisque-default);
|
|
25
|
+
--magma-tint-raised: var(--surface-bisque-raised);
|
|
26
|
+
--magma-tint-overlay: var(--surface-bisque-overlay);
|
|
27
|
+
--magma-tint-border-muted: var(--border-bisque-muted);
|
|
28
|
+
--magma-tint-border-default: var(--border-bisque-default);
|
|
29
|
+
--magma-tint-border-strong: var(--border-bisque-strong);
|
|
30
|
+
--magma-tint-text-default: var(--text-bisque-default);
|
|
31
|
+
--magma-tint-text-muted: var(--text-bisque-muted);
|
|
32
|
+
--magma-tint-text-subtle: var(--text-bisque-subtle);
|
|
33
|
+
--magma-tint-text-disabled: var(--text-bisque-disabled);
|
|
34
|
+
--magma-tint-scale-01: var(--tone-bisque-01);
|
|
35
|
+
--magma-tint-scale-02: var(--tone-bisque-02);
|
|
36
|
+
--magma-tint-scale-03: var(--tone-bisque-03);
|
|
37
|
+
--magma-tint-scale-04: var(--tone-bisque-04);
|
|
38
|
+
--magma-tint-scale-05: var(--tone-bisque-05);
|
|
39
|
+
--magma-tint-scale-06: var(--tone-bisque-06);
|
|
40
|
+
--magma-tint-scale-07: var(--tone-bisque-07);
|
|
41
|
+
--magma-tint-scale-08: var(--tone-bisque-08);
|
|
42
|
+
--magma-tint-scale-09: var(--tone-bisque-09);
|
|
43
|
+
--magma-tint-scale-10: var(--tone-bisque-10);
|
|
44
|
+
--magma-tint-accent-surface: var(--variant-secondary-09);
|
|
45
|
+
--magma-tint-accent-fg: var(--variant-secondary-03);
|
|
46
|
+
--magma-tint-accent-border: var(--variant-secondary-06);
|
|
47
|
+
--magma-tint-accent-emphasis: var(--variant-secondary-04);
|
|
48
|
+
--magma-tint-accent-emphasis-hover: var(--variant-secondary-03);
|
|
49
|
+
--magma-tint-accent-emphasis-active: var(--variant-secondary-02);
|
|
50
|
+
--magma-tint-accent-surface-hover: var(--variant-secondary-08);
|
|
51
|
+
--magma-tint-accent-surface-subtle: var(--variant-secondary-10);
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
:root[data-theme-name='editorial'].pref-contrast-more {
|
|
55
|
+
--magma-tint-text-muted: var(--text-bisque-default);
|
|
56
|
+
--magma-tint-text-subtle: var(--text-bisque-muted);
|
|
57
|
+
--magma-tint-border-muted: var(--border-bisque-default);
|
|
58
|
+
--magma-tint-border-default: var(--border-bisque-strong);
|
|
59
|
+
--magma-tint-default: var(--tone-bisque-seed);
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
@media (prefers-contrast: more) {
|
|
63
|
+
:root[data-theme-name='editorial'].pref-contrast-system,
|
|
64
|
+
:root[data-theme-name='editorial']:not([data-magma-pref]) {
|
|
65
|
+
--magma-tint-text-muted: var(--text-bisque-default);
|
|
66
|
+
--magma-tint-text-subtle: var(--text-bisque-muted);
|
|
67
|
+
--magma-tint-border-muted: var(--border-bisque-default);
|
|
68
|
+
--magma-tint-border-default: var(--border-bisque-strong);
|
|
69
|
+
--magma-tint-default: var(--tone-bisque-seed);
|
|
70
|
+
}
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
/* cool, deprecated: a worked example of the theme axis, not a product theme: use business or editorial. */
|
|
7
74
|
:root[data-theme-name='cool'] {
|
|
8
75
|
--magma-tint-sunken: var(--surface-porcelain-sunken);
|
|
9
76
|
--magma-tint-muted: var(--surface-porcelain-muted);
|
|
@@ -48,6 +115,7 @@
|
|
|
48
115
|
}
|
|
49
116
|
}
|
|
50
117
|
|
|
118
|
+
/* warm, deprecated: a worked example of the theme axis, not a product theme: use editorial. */
|
|
51
119
|
:root[data-theme-name='warm'] {
|
|
52
120
|
--magma-tint-sunken: var(--surface-bisque-sunken);
|
|
53
121
|
--magma-tint-muted: var(--surface-bisque-muted);
|