@maggioli-design-system/design-tokens 15.3.0 → 15.4.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 +17 -0
- package/README.md +50 -2
- 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 +37 -3
- package/dist/css/transitions.css +2 -2
- package/dist/css/typography.css +40 -3
- package/dist/dtcg/base.tokens.json +453 -3
- 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 +4 -4
- package/dist/js/tailwind-screens.js +2 -2
- package/dist/json/coolors.json +1 -1
- package/dist/package.json +2 -2
- package/dist/playground/assets/index-D85plIV0.js +196 -0
- package/dist/playground/index.html +1 -1
- package/dist/scss/variables.scss +1 -1
- package/dist/src/formats/css-tailwind-theme-typography/template.hbs +31 -0
- package/dist/src/formats/css-vars-typography/template.hbs +21 -0
- package/dist/style-dictionary/tokens/sizing/role.json +70 -0
- package/dist/style-dictionary/tokens/sizing/spacing.json +1 -1
- package/dist/style-dictionary/tokens/typography/role.json +26 -0
- package/dist/style-dictionary/tokens/typography/sizing.json +1 -1
- package/package.json +2 -2
- package/dist/playground/assets/index-ByYZ9R9J.js +0 -196
package/CHANGELOG.md
CHANGED
|
@@ -4,6 +4,23 @@ 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.4.0] - 2026-11-04
|
|
8
|
+
|
|
9
|
+
### Bug Fixes
|
|
10
|
+
|
|
11
|
+
- *(design-tokens)* Give the title roles of the Tailwind theme the literal of their level
|
|
12
|
+
|
|
13
|
+
### Documentation
|
|
14
|
+
|
|
15
|
+
- *(magma,design-tokens,styles)* Point the guides to the domains
|
|
16
|
+
|
|
17
|
+
### Features
|
|
18
|
+
|
|
19
|
+
- *(design-tokens)* The role tokens of the design language, rhythm, widths and titles
|
|
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
|
+
|
|
7
24
|
## [design-tokens@15.3.0] - 2026-10-24
|
|
8
25
|
|
|
9
26
|
### Documentation
|
package/README.md
CHANGED
|
@@ -4,6 +4,52 @@ Generates design tokens for colors and other type of agnostic tokens targeted on
|
|
|
4
4
|
|
|
5
5
|
This library is based on [Adobe Leonardo][adobe-leonardo] and [Amazon Style Dictionary][style-dictionary].
|
|
6
6
|
|
|
7
|
+
# Architecture
|
|
8
|
+
|
|
9
|
+
One configuration generates the palette; Style Dictionary writes it, with the other tokens, in
|
|
10
|
+
every format, and the DTCG export describes the whole set, the semantic layer included. `styles`
|
|
11
|
+
builds on the CSS and on the semantic model; the tools read the DTCG data where the package is
|
|
12
|
+
installed.
|
|
13
|
+
|
|
14
|
+
```mermaid
|
|
15
|
+
flowchart LR
|
|
16
|
+
subgraph dt["design-tokens"]
|
|
17
|
+
GEN["generator, CLI, src/lib<br/>.magma-design-tokensrc.json, Leonardo"]
|
|
18
|
+
TOK["tokens/<br/>sizing, typography, screen"]
|
|
19
|
+
SD["Style Dictionary<br/>src/formats"]
|
|
20
|
+
MODEL["semantic.model.ts<br/>dark-scheme.ts"]
|
|
21
|
+
DTCG["DTCG export<br/>scripts/dtcg"]
|
|
22
|
+
GEN --> SD
|
|
23
|
+
TOK --> SD
|
|
24
|
+
MODEL --> DTCG
|
|
25
|
+
SD --> DTCG
|
|
26
|
+
end
|
|
27
|
+
SD & MODEL & DTCG -->|"dist/css, dist/dtcg, semantic model"| ST["styles"]
|
|
28
|
+
DTCG -->|"dist/dtcg"| WC["stencil<br/>usage docs check"]
|
|
29
|
+
DTCG -.->|"dist/dtcg"| LINT["lint<br/>core, MCP server"]
|
|
30
|
+
DTCG -.->|"dist/dtcg"| DOCS(["docs site, design tools"])
|
|
31
|
+
SD -.->|"android, ios-swift, flutter"| NATIVE(["native apps"])
|
|
32
|
+
SD -.->|"dist/json"| FIGMA(["Figma variables"])
|
|
33
|
+
GEN -.->|"npx magma-design-tokens"| PROD(["a product palette"])
|
|
34
|
+
class LINT ai
|
|
35
|
+
class GEN,TOK,SD,MODEL,DTCG,ST,FIGMA,PROD visual
|
|
36
|
+
class WC components
|
|
37
|
+
class DOCS,NATIVE outside
|
|
38
|
+
class dt area
|
|
39
|
+
classDef ai fill:#efe5ff,stroke:#8250df,color:#3e1f79
|
|
40
|
+
classDef assets fill:#fff1d6,stroke:#bf8700,color:#5c3d00
|
|
41
|
+
classDef visual fill:#dcf5ec,stroke:#1a7f64,color:#0b4a3a
|
|
42
|
+
classDef components fill:#ddf0ff,stroke:#0969da,color:#0a3069
|
|
43
|
+
classDef tooling fill:#eceff3,stroke:#57606a,color:#24292f
|
|
44
|
+
classDef outside fill:#ffffff,stroke:#8c959f,color:#24292f
|
|
45
|
+
classDef area fill:none,stroke:#8c959f
|
|
46
|
+
```
|
|
47
|
+
|
|
48
|
+
Rectangles: this repository; rounded boxes: outside it. Solid arrows: inside the repository;
|
|
49
|
+
dashed: where the package is installed. Labels: the file, export or command that crosses.
|
|
50
|
+
Colours: purple ai, amber assets, teal visual, blue components, grey tooling, white outside
|
|
51
|
+
([convention](../../docs/ARCHITECTURE.md#diagrams-of-the-projects)).
|
|
52
|
+
|
|
7
53
|
# Compatibility
|
|
8
54
|
|
|
9
55
|
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:
|
|
@@ -56,9 +102,10 @@ The theme and the contrast preference are one modifier because they are not inde
|
|
|
56
102
|
| :--- | :--- | :--- |
|
|
57
103
|
| `palette.<group>.<family>.<step>` | `--tone-neutral-08` | The color primitives. The family's own color is `$root` (`--status-info`), the paper of the mode is `seed`. Aliased families (`variant`) are aliases of the family they name. |
|
|
58
104
|
| `magma.<group>.<key>` | `--magma-surface-default` | The semantic roles, as aliases of the primitive they point at. `magma.tint` holds the internal `--magma-tint-*` pointers that themes and contrast repoint; an accent with an infix is a group of its own (`magma.accent-ai`). |
|
|
105
|
+
| `magma.rhythm.<id>`, `magma.width.<id>` | `--magma-rhythm-between-fields` | The roles of the design language (#1189): the space of each relation of the rhythm, an alias of its size step, and the widths. |
|
|
59
106
|
| `font.<family>` | `--font-title` | Font families. |
|
|
60
107
|
| `text-size.<family>.<style>` | `--text-size-title-h1` | The size of a style (`$root`) and its `font-weight`, `letter-spacing`, `line-height`. |
|
|
61
|
-
| `typography.<family>.<style>` | none | The same style as one `typography` token. |
|
|
108
|
+
| `typography.<family>.<style>` | none | The same style as one `typography` token. The titles by role (`typography.title.page`, `section`, `dialog`, `part`, `group`) are aliases of the level they are styled as, and so are their `text-size` parts. |
|
|
62
109
|
| `leading`, `spacing`, `container`, `breakpoint`, `aspect`, `border`, `radius`, `shadow`, `duration`, `ease` | `--leading-md`, `--spacing-xs`, ... | One group per CSS prefix. `spacing.$root` is `--spacing`, the multiplier of the numeric utilities. |
|
|
63
110
|
| `size.<step>` | none | The primitive sizing scale that spacing, container, border and radius name. |
|
|
64
111
|
|
|
@@ -77,7 +124,8 @@ Where the JSON and the CSS write a value differently:
|
|
|
77
124
|
- **Line height** of a `typography` token: a multiplier of the font size, as DTCG defines it. The `line-height` token of the style keeps the length.
|
|
78
125
|
- **Aspect ratios**: a `number` (`5/3` becomes `1.6666666666666667`); `cssValue` keeps the ratio.
|
|
79
126
|
- **Ring shadows** (`--shadow-ring*`): the CSS draws them with `--tone-neutral-01`; the JSON resolves that color, so `mode-dark` restates them.
|
|
80
|
-
- **No DTCG type**: the text measures `--spacing-phrase`, `-prose`, `-
|
|
127
|
+
- **No DTCG type**: the text measures `--spacing-phrase`, `-prose`, `-title` (in `ch`) and `-text` (`var()` of the reading measure), the widths `--magma-width-reading` (in `ch`), `-form` and `-dialog` (written from other roles), and the `--transition-property-*` lists are listed in the `cssOnly` extension of their group, each `{ css, value }`, with its `description` where it has one.
|
|
128
|
+
- **Titles by role**: the CSS points at the custom property of the level (`--text-size-title-page: var(--text-size-title-h3)`), kept in `cssValue`; the JSON is an alias of the level.
|
|
81
129
|
|
|
82
130
|
Component tokens (`--mds-*`) are not in this data: they belong to each component.
|
|
83
131
|
|
package/dist/android/colors.xml
CHANGED
package/dist/css/colors-hex.css
CHANGED
package/dist/css/colors-rgb.css
CHANGED
|
@@ -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);
|
package/dist/css/transitions.css
CHANGED
package/dist/css/typography.css
CHANGED
|
@@ -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
|
:root {
|
|
@@ -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);
|
|
77
|
+
--text-size-title-page--font-weight: var(--text-size-title-h3--font-weight);
|
|
78
|
+
--text-size-title-page--letter-spacing: var(--text-size-title-h3--letter-spacing);
|
|
79
|
+
--text-size-title-page--line-height: var(--text-size-title-h3--line-height);
|
|
80
|
+
--text-size-title-section: var(--text-size-title-h5);
|
|
81
|
+
--text-size-title-section--font-weight: var(--text-size-title-h5--font-weight);
|
|
82
|
+
--text-size-title-section--letter-spacing: var(--text-size-title-h5--letter-spacing);
|
|
83
|
+
--text-size-title-section--line-height: var(--text-size-title-h5--line-height);
|
|
84
|
+
--text-size-title-dialog: var(--text-size-title-h5);
|
|
85
|
+
--text-size-title-dialog--font-weight: var(--text-size-title-h5--font-weight);
|
|
86
|
+
--text-size-title-dialog--letter-spacing: var(--text-size-title-h5--letter-spacing);
|
|
87
|
+
--text-size-title-dialog--line-height: var(--text-size-title-h5--line-height);
|
|
88
|
+
--text-size-title-part: var(--text-size-title-h6);
|
|
89
|
+
--text-size-title-part--font-weight: var(--text-size-title-h6--font-weight);
|
|
90
|
+
--text-size-title-part--letter-spacing: var(--text-size-title-h6--letter-spacing);
|
|
91
|
+
--text-size-title-part--line-height: var(--text-size-title-h6--line-height);
|
|
92
|
+
--text-size-title-group: var(--text-size-title-h6);
|
|
93
|
+
--text-size-title-group--font-weight: var(--text-size-title-h6--font-weight);
|
|
94
|
+
--text-size-title-group--letter-spacing: var(--text-size-title-h6--letter-spacing);
|
|
95
|
+
--text-size-title-group--line-height: var(--text-size-title-h6--line-height);
|
|
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,22 @@ Generated at Sat, 24 Oct 2026 12:12:55 GMT
|
|
|
113
134
|
--container-6xl: 1152px;
|
|
114
135
|
--container-7xl: 1280px;
|
|
115
136
|
|
|
137
|
+
--magma-rhythm-inline: 12px;
|
|
138
|
+
--magma-rhythm-title-content: 12px;
|
|
139
|
+
--magma-rhythm-label-control: 12px;
|
|
140
|
+
--magma-rhythm-between-containers: 16px;
|
|
141
|
+
--magma-rhythm-between-fields: 24px;
|
|
142
|
+
--magma-rhythm-content-actions: 24px;
|
|
143
|
+
--magma-rhythm-inset: 24px;
|
|
144
|
+
--magma-rhythm-between-groups: 40px;
|
|
145
|
+
--magma-rhythm-between-sections: 64px;
|
|
146
|
+
--magma-width-reading: 56ch;
|
|
147
|
+
--magma-width-form: var(--magma-width-reading);
|
|
148
|
+
--magma-width-page: 1280px;
|
|
149
|
+
--magma-width-page-gutter: 24px;
|
|
150
|
+
--magma-width-dialog: calc(var(--magma-width-form) + 2 * var(--magma-rhythm-inset));
|
|
151
|
+
--magma-container-actions: 23.75rem;
|
|
152
|
+
|
|
116
153
|
--breakpoint-mobile: 480px;
|
|
117
154
|
--breakpoint-tablet: 768px;
|
|
118
155
|
--breakpoint-desktop: 1024px;
|