@maggioli-design-system/design-tokens 15.4.0 → 15.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 +7 -0
- package/README.md +1 -1
- package/dist/android/colors.xml +1 -1
- 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/transitions.css +2 -2
- package/dist/css/typography.css +2 -2
- package/dist/dtcg/base.tokens.json +119 -0
- package/dist/dtcg/magma.resolver.json +24 -2
- package/dist/dtcg/theme-editorial-contrast-more.tokens.json +56 -0
- package/dist/dtcg/theme-editorial.tokens.json +306 -0
- package/dist/flutter/colors-brand-rnd.dart +2 -2
- package/dist/flutter/colors-brand.dart +2 -2
- package/dist/flutter/colors-default.dart +2 -2
- package/dist/flutter/colors-label.dart +2 -2
- package/dist/flutter/colors-status.dart +2 -2
- package/dist/flutter/colors-theme.dart +2 -2
- package/dist/flutter/colors-tones.dart +2 -2
- package/dist/flutter/colors.dart +2 -2
- package/dist/flutter/fonts.dart +2 -2
- package/dist/ios/StyleDictionaryColor.h +1 -1
- package/dist/ios/StyleDictionaryColor.m +1 -1
- package/dist/ios-swift/StyleDictionary.swift +1 -1
- package/dist/ios-swift/StyleDictionaryColor.swift +1 -1
- package/dist/js/colors-css-vars.js +2 -2
- package/dist/js/tailwind-colors-css-vars.js +2 -2
- package/dist/js/tailwind-font-family.js +2 -2
- package/dist/js/tailwind-font-size.js +2 -2
- package/dist/js/tailwind-leading.js +2 -2
- package/dist/js/tailwind-props.js +2 -2
- package/dist/js/tailwind-screens.js +2 -2
- package/dist/json/coolors.json +1 -1
- package/dist/package.json +1 -1
- package/dist/playground/assets/{index-D85plIV0.js → index-1swhXs-9.js} +2 -2
- package/dist/playground/index.html +1 -1
- package/dist/scss/variables.scss +1 -1
- package/dist/src/lib/contrast-gate.js +38 -0
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -4,6 +4,13 @@ Every release of `@maggioli-design-system/design-tokens`, newest first. Each sec
|
|
|
4
4
|
release with the same tag, written by git-cliff from the conventional commits of the
|
|
5
5
|
package.
|
|
6
6
|
|
|
7
|
+
## [design-tokens@15.5.0] - 2026-11-04
|
|
8
|
+
|
|
9
|
+
### Features
|
|
10
|
+
|
|
11
|
+
- *(design-tokens,styles)* Name the two product themes, business and editorial
|
|
12
|
+
- *(design-tokens)* Verify every named theme in the contrast gate, in its own family
|
|
13
|
+
|
|
7
14
|
## [design-tokens@15.4.0] - 2026-11-04
|
|
8
15
|
|
|
9
16
|
### Bug Fixes
|
package/README.md
CHANGED
|
@@ -92,7 +92,7 @@ Each set lists only what it changes. To get the tokens of one condition, merge t
|
|
|
92
92
|
| Modifier | Contexts |
|
|
93
93
|
| :--- | :--- |
|
|
94
94
|
| `mode` | `light` (default), `dark` |
|
|
95
|
-
| `theme` | `
|
|
95
|
+
| `theme` | `business` (default), `editorial`, the deprecated `default`, `cool` and `warm`, and each of them with `-contrast-more` |
|
|
96
96
|
|
|
97
97
|
The theme and the contrast preference are one modifier because they are not independent: under a named theme, the stylesheets restate the contrast promotions in the theme's own family. Dark mode with the `cool` theme and more contrast, for example, merges `base`, `mode-dark`, `contrast-more`, `theme-cool` and `theme-cool-contrast-more`.
|
|
98
98
|
|
package/dist/android/colors.xml
CHANGED
package/dist/css/colors-hex.css
CHANGED
package/dist/css/colors-rgb.css
CHANGED
package/dist/css/transitions.css
CHANGED
package/dist/css/typography.css
CHANGED
|
@@ -8421,6 +8421,125 @@
|
|
|
8421
8421
|
}
|
|
8422
8422
|
}
|
|
8423
8423
|
},
|
|
8424
|
+
"preview": {
|
|
8425
|
+
"$description": "The preview of each named theme, whichever is active: its wash and its accent, for a theme picker. UI paints with the roles, which follow the active theme.",
|
|
8426
|
+
"business-wash": {
|
|
8427
|
+
"$type": "color",
|
|
8428
|
+
"$value": "{palette.tone.neutral.09}",
|
|
8429
|
+
"$description": "The wash of the business theme, for its preview in a theme picker.",
|
|
8430
|
+
"$extensions": {
|
|
8431
|
+
"it.maggioli.magma": {
|
|
8432
|
+
"css": "--magma-preview-business-wash",
|
|
8433
|
+
"tier": "semantic"
|
|
8434
|
+
}
|
|
8435
|
+
}
|
|
8436
|
+
},
|
|
8437
|
+
"business-accent": {
|
|
8438
|
+
"$type": "color",
|
|
8439
|
+
"$value": "{palette.variant.primary.04}",
|
|
8440
|
+
"$description": "The accent fill of the business theme, for its preview in a theme picker.",
|
|
8441
|
+
"$extensions": {
|
|
8442
|
+
"it.maggioli.magma": {
|
|
8443
|
+
"css": "--magma-preview-business-accent",
|
|
8444
|
+
"tier": "semantic"
|
|
8445
|
+
}
|
|
8446
|
+
}
|
|
8447
|
+
},
|
|
8448
|
+
"editorial-wash": {
|
|
8449
|
+
"$type": "color",
|
|
8450
|
+
"$value": "{palette.tone.bisque.09}",
|
|
8451
|
+
"$description": "The wash of the editorial theme, for its preview in a theme picker.",
|
|
8452
|
+
"$extensions": {
|
|
8453
|
+
"it.maggioli.magma": {
|
|
8454
|
+
"css": "--magma-preview-editorial-wash",
|
|
8455
|
+
"tier": "semantic"
|
|
8456
|
+
}
|
|
8457
|
+
}
|
|
8458
|
+
},
|
|
8459
|
+
"editorial-accent": {
|
|
8460
|
+
"$type": "color",
|
|
8461
|
+
"$value": "{palette.variant.secondary.04}",
|
|
8462
|
+
"$description": "The accent fill of the editorial theme, for its preview in a theme picker.",
|
|
8463
|
+
"$extensions": {
|
|
8464
|
+
"it.maggioli.magma": {
|
|
8465
|
+
"css": "--magma-preview-editorial-accent",
|
|
8466
|
+
"tier": "semantic"
|
|
8467
|
+
}
|
|
8468
|
+
}
|
|
8469
|
+
},
|
|
8470
|
+
"default-wash": {
|
|
8471
|
+
"$type": "color",
|
|
8472
|
+
"$value": "{palette.tone.neutral.09}",
|
|
8473
|
+
"$description": "The wash of the default theme, for its preview in a theme picker.",
|
|
8474
|
+
"$deprecated": "the old name of business: mds-pref-theme still writes it until the next major, when its default becomes business",
|
|
8475
|
+
"$extensions": {
|
|
8476
|
+
"it.maggioli.magma": {
|
|
8477
|
+
"css": "--magma-preview-default-wash",
|
|
8478
|
+
"tier": "semantic"
|
|
8479
|
+
}
|
|
8480
|
+
}
|
|
8481
|
+
},
|
|
8482
|
+
"default-accent": {
|
|
8483
|
+
"$type": "color",
|
|
8484
|
+
"$value": "{palette.variant.primary.04}",
|
|
8485
|
+
"$description": "The accent fill of the default theme, for its preview in a theme picker.",
|
|
8486
|
+
"$deprecated": "the old name of business: mds-pref-theme still writes it until the next major, when its default becomes business",
|
|
8487
|
+
"$extensions": {
|
|
8488
|
+
"it.maggioli.magma": {
|
|
8489
|
+
"css": "--magma-preview-default-accent",
|
|
8490
|
+
"tier": "semantic"
|
|
8491
|
+
}
|
|
8492
|
+
}
|
|
8493
|
+
},
|
|
8494
|
+
"cool-wash": {
|
|
8495
|
+
"$type": "color",
|
|
8496
|
+
"$value": "{palette.tone.porcelain.09}",
|
|
8497
|
+
"$description": "The wash of the cool theme, for its preview in a theme picker.",
|
|
8498
|
+
"$deprecated": "a worked example of the theme axis, not a product theme: use business or editorial",
|
|
8499
|
+
"$extensions": {
|
|
8500
|
+
"it.maggioli.magma": {
|
|
8501
|
+
"css": "--magma-preview-cool-wash",
|
|
8502
|
+
"tier": "semantic"
|
|
8503
|
+
}
|
|
8504
|
+
}
|
|
8505
|
+
},
|
|
8506
|
+
"cool-accent": {
|
|
8507
|
+
"$type": "color",
|
|
8508
|
+
"$value": "{palette.variant.primary.04}",
|
|
8509
|
+
"$description": "The accent fill of the cool theme, for its preview in a theme picker.",
|
|
8510
|
+
"$deprecated": "a worked example of the theme axis, not a product theme: use business or editorial",
|
|
8511
|
+
"$extensions": {
|
|
8512
|
+
"it.maggioli.magma": {
|
|
8513
|
+
"css": "--magma-preview-cool-accent",
|
|
8514
|
+
"tier": "semantic"
|
|
8515
|
+
}
|
|
8516
|
+
}
|
|
8517
|
+
},
|
|
8518
|
+
"warm-wash": {
|
|
8519
|
+
"$type": "color",
|
|
8520
|
+
"$value": "{palette.tone.bisque.09}",
|
|
8521
|
+
"$description": "The wash of the warm theme, for its preview in a theme picker.",
|
|
8522
|
+
"$deprecated": "a worked example of the theme axis, not a product theme: use editorial",
|
|
8523
|
+
"$extensions": {
|
|
8524
|
+
"it.maggioli.magma": {
|
|
8525
|
+
"css": "--magma-preview-warm-wash",
|
|
8526
|
+
"tier": "semantic"
|
|
8527
|
+
}
|
|
8528
|
+
}
|
|
8529
|
+
},
|
|
8530
|
+
"warm-accent": {
|
|
8531
|
+
"$type": "color",
|
|
8532
|
+
"$value": "{palette.variant.primary.04}",
|
|
8533
|
+
"$description": "The accent fill of the warm theme, for its preview in a theme picker.",
|
|
8534
|
+
"$deprecated": "a worked example of the theme axis, not a product theme: use editorial",
|
|
8535
|
+
"$extensions": {
|
|
8536
|
+
"it.maggioli.magma": {
|
|
8537
|
+
"css": "--magma-preview-warm-accent",
|
|
8538
|
+
"tier": "semantic"
|
|
8539
|
+
}
|
|
8540
|
+
}
|
|
8541
|
+
}
|
|
8542
|
+
},
|
|
8424
8543
|
"rhythm": {
|
|
8425
8544
|
"$description": "The space of each relation of the rhythm, named after its rule (rhythm/between-fields is --magma-rhythm-between-fields): UI code writes the relation (gap-between-fields, p-inset), never its step, and a project that changes --spacing does not move it.",
|
|
8426
8545
|
"inline": {
|
|
@@ -27,8 +27,30 @@
|
|
|
27
27
|
"default": "light"
|
|
28
28
|
},
|
|
29
29
|
"theme": {
|
|
30
|
-
"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.",
|
|
30
|
+
"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).",
|
|
31
31
|
"contexts": {
|
|
32
|
+
"business": [],
|
|
33
|
+
"business-contrast-more": [
|
|
34
|
+
{
|
|
35
|
+
"$ref": "contrast-more.tokens.json"
|
|
36
|
+
}
|
|
37
|
+
],
|
|
38
|
+
"editorial": [
|
|
39
|
+
{
|
|
40
|
+
"$ref": "theme-editorial.tokens.json"
|
|
41
|
+
}
|
|
42
|
+
],
|
|
43
|
+
"editorial-contrast-more": [
|
|
44
|
+
{
|
|
45
|
+
"$ref": "contrast-more.tokens.json"
|
|
46
|
+
},
|
|
47
|
+
{
|
|
48
|
+
"$ref": "theme-editorial.tokens.json"
|
|
49
|
+
},
|
|
50
|
+
{
|
|
51
|
+
"$ref": "theme-editorial-contrast-more.tokens.json"
|
|
52
|
+
}
|
|
53
|
+
],
|
|
32
54
|
"default": [],
|
|
33
55
|
"default-contrast-more": [
|
|
34
56
|
{
|
|
@@ -68,7 +90,7 @@
|
|
|
68
90
|
}
|
|
69
91
|
]
|
|
70
92
|
},
|
|
71
|
-
"default": "
|
|
93
|
+
"default": "business"
|
|
72
94
|
}
|
|
73
95
|
},
|
|
74
96
|
"resolutionOrder": [
|
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
{
|
|
2
|
+
"magma": {
|
|
3
|
+
"tint": {
|
|
4
|
+
"text-muted": {
|
|
5
|
+
"$type": "color",
|
|
6
|
+
"$value": "{palette.text.bisque.default}",
|
|
7
|
+
"$extensions": {
|
|
8
|
+
"it.maggioli.magma": {
|
|
9
|
+
"css": "--magma-tint-text-muted",
|
|
10
|
+
"tier": "internal"
|
|
11
|
+
}
|
|
12
|
+
}
|
|
13
|
+
},
|
|
14
|
+
"text-subtle": {
|
|
15
|
+
"$type": "color",
|
|
16
|
+
"$value": "{palette.text.bisque.muted}",
|
|
17
|
+
"$extensions": {
|
|
18
|
+
"it.maggioli.magma": {
|
|
19
|
+
"css": "--magma-tint-text-subtle",
|
|
20
|
+
"tier": "internal"
|
|
21
|
+
}
|
|
22
|
+
}
|
|
23
|
+
},
|
|
24
|
+
"border-muted": {
|
|
25
|
+
"$type": "color",
|
|
26
|
+
"$value": "{palette.border.bisque.default}",
|
|
27
|
+
"$extensions": {
|
|
28
|
+
"it.maggioli.magma": {
|
|
29
|
+
"css": "--magma-tint-border-muted",
|
|
30
|
+
"tier": "internal"
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
},
|
|
34
|
+
"border-default": {
|
|
35
|
+
"$type": "color",
|
|
36
|
+
"$value": "{palette.border.bisque.strong}",
|
|
37
|
+
"$extensions": {
|
|
38
|
+
"it.maggioli.magma": {
|
|
39
|
+
"css": "--magma-tint-border-default",
|
|
40
|
+
"tier": "internal"
|
|
41
|
+
}
|
|
42
|
+
}
|
|
43
|
+
},
|
|
44
|
+
"default": {
|
|
45
|
+
"$type": "color",
|
|
46
|
+
"$value": "{palette.tone.bisque.seed}",
|
|
47
|
+
"$extensions": {
|
|
48
|
+
"it.maggioli.magma": {
|
|
49
|
+
"css": "--magma-tint-default",
|
|
50
|
+
"tier": "internal"
|
|
51
|
+
}
|
|
52
|
+
}
|
|
53
|
+
}
|
|
54
|
+
}
|
|
55
|
+
}
|
|
56
|
+
}
|