@maggioli-design-system/styles 17.5.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 +6 -0
- 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/tailwind-theme-color.css +2 -2
- package/dist/css/tailwind-theme-typography.css +2 -2
- package/dist/css/themes.css +68 -0
- package/dist/css/tokens.editor.css +12 -0
- package/dist/css/transitions.css +2 -2
- package/dist/css/typography.css +2 -2
- package/dist/dtcg/magma.resolver.json +24 -2
- package/package.json +2 -2
package/CHANGELOG.md
CHANGED
|
@@ -4,6 +4,12 @@ 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
|
+
|
|
7
13
|
## [styles@17.5.0] - 2026-11-04
|
|
8
14
|
|
|
9
15
|
### Bug Fixes
|
package/dist/css/colors-hex.css
CHANGED
package/dist/css/colors-rgb.css
CHANGED
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);
|
|
@@ -813,6 +813,18 @@
|
|
|
813
813
|
--magma-accent-ai-surface-subtle: var(--magma-tint-accent-ai-surface-subtle); /* A background tinted with the AI accent, lighter. */
|
|
814
814
|
--magma-accent-ai-on-emphasis: var(--magma-tint-text-on-emphasis); /* Text and icons on the solid fill of the AI accent. */
|
|
815
815
|
|
|
816
|
+
/* semantic: theme variants */
|
|
817
|
+
--magma-preview-business-wash: var(--tone-neutral-09);
|
|
818
|
+
--magma-preview-business-accent: var(--variant-primary-04);
|
|
819
|
+
--magma-preview-editorial-wash: var(--tone-bisque-09);
|
|
820
|
+
--magma-preview-editorial-accent: var(--variant-secondary-04);
|
|
821
|
+
--magma-preview-default-wash: var(--tone-neutral-09);
|
|
822
|
+
--magma-preview-default-accent: var(--variant-primary-04);
|
|
823
|
+
--magma-preview-cool-wash: var(--tone-porcelain-09);
|
|
824
|
+
--magma-preview-cool-accent: var(--variant-primary-04);
|
|
825
|
+
--magma-preview-warm-wash: var(--tone-bisque-09);
|
|
826
|
+
--magma-preview-warm-accent: var(--variant-primary-04);
|
|
827
|
+
|
|
816
828
|
/* globals */
|
|
817
829
|
--magma-pref-mode: light; /* The active mode preference, as the mds-pref components write it: read it, never set it. */
|
|
818
830
|
--magma-pref-theme-scheme: light; /* The active theme-scheme preference, as the mds-pref components write it: read it, never set it. */
|
package/dist/css/transitions.css
CHANGED
package/dist/css/typography.css
CHANGED
|
@@ -35,8 +35,30 @@
|
|
|
35
35
|
"default": "light"
|
|
36
36
|
},
|
|
37
37
|
"theme": {
|
|
38
|
-
"description": "Named theme (data-theme-name) and contrast preference (pref-contrast-more) together: under a theme the contrast promotions are restated in the theme family, so the two cannot be two modifiers.",
|
|
38
|
+
"description": "Named theme (data-theme-name) and contrast preference (pref-contrast-more) together: under a theme the contrast promotions are restated in the theme family, so the two cannot be two modifiers. Deprecated, removed in the next major: default (the old name of business: mds-pref-theme still writes it until the next major, when its default becomes business); cool (a worked example of the theme axis, not a product theme: use business or editorial); warm (a worked example of the theme axis, not a product theme: use editorial).",
|
|
39
39
|
"contexts": {
|
|
40
|
+
"business": [],
|
|
41
|
+
"business-contrast-more": [
|
|
42
|
+
{
|
|
43
|
+
"$ref": "../../../design-tokens/dist/dtcg/contrast-more.tokens.json"
|
|
44
|
+
}
|
|
45
|
+
],
|
|
46
|
+
"editorial": [
|
|
47
|
+
{
|
|
48
|
+
"$ref": "../../../design-tokens/dist/dtcg/theme-editorial.tokens.json"
|
|
49
|
+
}
|
|
50
|
+
],
|
|
51
|
+
"editorial-contrast-more": [
|
|
52
|
+
{
|
|
53
|
+
"$ref": "../../../design-tokens/dist/dtcg/contrast-more.tokens.json"
|
|
54
|
+
},
|
|
55
|
+
{
|
|
56
|
+
"$ref": "../../../design-tokens/dist/dtcg/theme-editorial.tokens.json"
|
|
57
|
+
},
|
|
58
|
+
{
|
|
59
|
+
"$ref": "../../../design-tokens/dist/dtcg/theme-editorial-contrast-more.tokens.json"
|
|
60
|
+
}
|
|
61
|
+
],
|
|
40
62
|
"default": [],
|
|
41
63
|
"default-contrast-more": [
|
|
42
64
|
{
|
|
@@ -76,7 +98,7 @@
|
|
|
76
98
|
}
|
|
77
99
|
]
|
|
78
100
|
},
|
|
79
|
-
"default": "
|
|
101
|
+
"default": "business"
|
|
80
102
|
},
|
|
81
103
|
"corner-shape": {
|
|
82
104
|
"description": "The data-corner-shape attribute: [data-corner-shape='<context>']. The default is the value of the :root block.",
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@maggioli-design-system/styles",
|
|
3
|
-
"version": "17.
|
|
3
|
+
"version": "17.6.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": {
|
|
@@ -64,7 +64,7 @@
|
|
|
64
64
|
"@fontsource/merriweather": "5.3.0",
|
|
65
65
|
"@fontsource/roboto": "5.3.0",
|
|
66
66
|
"@fontsource/roboto-mono": "5.3.0",
|
|
67
|
-
"@maggioli-design-system/design-tokens": "^15.
|
|
67
|
+
"@maggioli-design-system/design-tokens": "^15.5.0",
|
|
68
68
|
"normalize.css": "8.0.1"
|
|
69
69
|
},
|
|
70
70
|
"devDependencies": {
|