@maggioli-design-system/design-tokens 15.2.1 → 15.3.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 +20 -0
- package/LICENSE +21 -0
- package/README.md +28 -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 +36 -2
- package/dist/css/transitions.css +2 -2
- package/dist/css/typography.css +2 -2
- package/dist/dtcg/base.tokens.json +147 -30
- 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 +3 -3
- package/dist/playground/assets/{index-DUEFtvvD.js → index-ByYZ9R9J.js} +23 -25
- package/dist/playground/index.html +1 -1
- package/dist/scss/variables.scss +1 -1
- package/dist/src/formats/css-tailwind-theme-typography/css-tailwind-theme-typography.js +3 -0
- package/dist/src/formats/css-tailwind-theme-typography/template.hbs +12 -0
- package/dist/src/formats/css-vars-hex/css-vars-hex.js +2 -0
- package/dist/src/formats/css-vars-hex/template.hbs +3 -5
- package/dist/src/formats/css-vars-rgb/css-vars-rgb.js +2 -0
- package/dist/src/formats/css-vars-rgb/template.hbs +3 -5
- package/dist/src/formats/dark-scheme.js +25 -0
- package/package.json +3 -3
package/CHANGELOG.md
CHANGED
|
@@ -4,6 +4,26 @@ 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.3.0] - 2026-10-24
|
|
8
|
+
|
|
9
|
+
### Documentation
|
|
10
|
+
|
|
11
|
+
- *(design-tokens,magma)* Document the Android, iOS and Flutter color files
|
|
12
|
+
|
|
13
|
+
### Features
|
|
14
|
+
|
|
15
|
+
- *(design-tokens)* Describe every group of the DTCG export and each typography style
|
|
16
|
+
|
|
17
|
+
### Refactor
|
|
18
|
+
|
|
19
|
+
- *(design-tokens,styles)* Print the dark selectors of the palette from one list
|
|
20
|
+
|
|
21
|
+
## [design-tokens@15.2.2] - 2026-10-21
|
|
22
|
+
|
|
23
|
+
### Bug Fixes
|
|
24
|
+
|
|
25
|
+
- *(design-tokens,styles)* Size utilities with a t-shirt name read the container, not spacing
|
|
26
|
+
|
|
7
27
|
## [design-tokens@15.2.1] - 2026-10-20
|
|
8
28
|
|
|
9
29
|
### Bug Fixes
|
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2020-2026 Maggioli S.p.A.
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# @maggioli-design-system/design-tokens
|
|
2
2
|
|
|
3
|
-
Generates design tokens for colors and other type of agnostic tokens targeted on specific
|
|
3
|
+
Generates design tokens for colors and other type of agnostic tokens targeted on specific platforms, like web, Dart, Android or iOS formats (see [Native platforms](#native-platforms)).
|
|
4
4
|
|
|
5
5
|
This library is based on [Adobe Leonardo][adobe-leonardo] and [Amazon Style Dictionary][style-dictionary].
|
|
6
6
|
|
|
@@ -62,6 +62,8 @@ The theme and the contrast preference are one modifier because they are not inde
|
|
|
62
62
|
| `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
63
|
| `size.<step>` | none | The primitive sizing scale that spacing, container, border and radius name. |
|
|
64
64
|
|
|
65
|
+
Every group of `base.tokens.json` has a `$description` that says what it is for, and so do the semantic roles and the typography styles; a primitive is described by its group (a ramp by its family). The other sets restate values, without descriptions.
|
|
66
|
+
|
|
65
67
|
Every token carries `$extensions["it.maggioli.magma"]`:
|
|
66
68
|
|
|
67
69
|
- `css`: the custom property it is published as;
|
|
@@ -81,6 +83,31 @@ Component tokens (`--mds-*`) are not in this data: they belong to each component
|
|
|
81
83
|
|
|
82
84
|
The globals `@maggioli-design-system/styles` declares on top of these (the `--magma-*` of its `globals.css`, the corner and depth axes) are in its own `dist/dtcg/`, with a resolver that adds them to these sets, and how each token is consumed through Tailwind is its `dist/tailwind/consumption.json`, keyed by the same `css` names (its README, "Token data").
|
|
83
85
|
|
|
86
|
+
# Native platforms
|
|
87
|
+
|
|
88
|
+
Besides the web, the package publishes the colors of Magma for Android, iOS and Flutter, generated at every build from the same sources as the CSS. They are plain files to copy into the app, which needs neither npm nor this package at runtime.
|
|
89
|
+
|
|
90
|
+
| Platform | File | Content |
|
|
91
|
+
| :--- | :--- | :--- |
|
|
92
|
+
| Android | `dist/android/colors.xml` | `<color>` resources: `@color/color_surface_neutral_light_default` |
|
|
93
|
+
| iOS | `dist/ios-swift/StyleDictionaryColor.swift` | `UIColor` constants of an enum: `StyleDictionaryColor.surfaceNeutralLightDefault` |
|
|
94
|
+
| iOS | `dist/ios-swift/StyleDictionary.swift` | The same colors in a class, the group kept in the name: `StyleDictionary.colorSurfaceNeutralLightDefault` (add one of the two files, not both) |
|
|
95
|
+
| Flutter | `dist/flutter/colors.dart` | `Color` constants, one class per mode: `MagmaColorPaletteLight.surfaceNeutralDefault`, `MagmaColorPaletteDark.surfaceNeutralDefault` |
|
|
96
|
+
|
|
97
|
+
What the files hold:
|
|
98
|
+
|
|
99
|
+
- **Colors only**: no type, spacing, radius, shadow or motion tokens.
|
|
100
|
+
- **Both modes side by side**, nothing switches by itself. Android and Swift name the mode in each color (`_light_` / `_dark_`, `Light` / `Dark`), Flutter has one class per mode. The app picks the mode: on Android, give the colors it uses names of its own in `res/values/` (pointing at `_light_`) and `res/values-night/` (pointing at `_dark_`); in UIKit, a dynamic color, `UIColor { traits in traits.userInterfaceStyle == .dark ? ... : ... }`; in Flutter, the class by `Theme.of(context).brightness`.
|
|
101
|
+
- **The palettes**: `tone`, `label`, `status`, `brand` (`maggioli`, `maggioli_editore`, `rnd`) and `variant`, with the steps `1` to `10`, plus `seed` for a tone (the paper of the mode) and `color` for the other families (their own color, `--status-error` on the web). Flutter writes the steps with two digits (`toneNeutral08`) and the family's own color under its bare name (`statusError`).
|
|
102
|
+
- **The roles of each family**: `surface` (`sunken`, `muted`, `default`, `raised`, `overlay`), `border` (`muted`, `default`, `strong`) and `text` (`default`, `muted`, `subtle`, `disabled`), for `neutral`, `porcelain`, `bisque`, `info`, `success`, `warning` and `error`.
|
|
103
|
+
- **Not the semantic layer** (`--magma-*`), nor the named themes or the contrast preference. On the web the surface, border and text roles read one family, which the theme picks: `neutral` by default, `porcelain` for `cool`, `bisque` for `warm`. Paint a native app with the family of its theme, `neutral` unless it has one. For the other roles (accents, washes, inverse, ...), resolve the role in the [DTCG data](#token-data-dtcg) down to `palette.<group>.<family>.<step>`, in light and in dark mode: the native color has the same group, family and step.
|
|
104
|
+
|
|
105
|
+
Do not use:
|
|
106
|
+
|
|
107
|
+
- `dist/ios/` (Objective-C): it does not compile, its enumeration has no name (`typedef NS_ENUM(NSInteger, )`).
|
|
108
|
+
- `dist/flutter/fonts.dart`: it does not compile (`fontSize: 48px`, a `height` in pixels where Flutter takes a multiplier, the fallback fonts unquoted and HTML-escaped). The type styles are in the DTCG data (`typography.*`).
|
|
109
|
+
- The `dist/flutter/colors-*.dart` files together: they split `colors.dart` by group under the same two class names, so only one of them, or `colors.dart`, can be imported.
|
|
110
|
+
|
|
84
111
|
# Generate Custom Palette
|
|
85
112
|
|
|
86
113
|
you can generate custom palettes via cli command, it takes a configuration file to create palettes
|
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.3.0
|
|
3
3
|
Generated by Style Dictionary
|
|
4
4
|
Do not edit directly
|
|
5
|
-
Generated at
|
|
5
|
+
Generated at Sat, 24 Oct 2026 12:12:55 GMT
|
|
6
6
|
*/
|
|
7
7
|
|
|
8
8
|
@theme {
|
|
@@ -113,6 +113,40 @@ Generated at Tue, 20 Oct 2026 14:18:29 GMT
|
|
|
113
113
|
--container-6xl: 1152px;
|
|
114
114
|
--container-7xl: 1280px;
|
|
115
115
|
|
|
116
|
+
--width-xs: var(--container-xs);
|
|
117
|
+
--min-width-xs: var(--container-xs);
|
|
118
|
+
--max-width-xs: var(--container-xs);
|
|
119
|
+
--flex-basis-xs: var(--container-xs);
|
|
120
|
+
--width-sm: var(--container-sm);
|
|
121
|
+
--min-width-sm: var(--container-sm);
|
|
122
|
+
--max-width-sm: var(--container-sm);
|
|
123
|
+
--flex-basis-sm: var(--container-sm);
|
|
124
|
+
--width-md: var(--container-md);
|
|
125
|
+
--min-width-md: var(--container-md);
|
|
126
|
+
--max-width-md: var(--container-md);
|
|
127
|
+
--flex-basis-md: var(--container-md);
|
|
128
|
+
--width-lg: var(--container-lg);
|
|
129
|
+
--min-width-lg: var(--container-lg);
|
|
130
|
+
--max-width-lg: var(--container-lg);
|
|
131
|
+
--flex-basis-lg: var(--container-lg);
|
|
132
|
+
--width-xl: var(--container-xl);
|
|
133
|
+
--min-width-xl: var(--container-xl);
|
|
134
|
+
--max-width-xl: var(--container-xl);
|
|
135
|
+
--flex-basis-xl: var(--container-xl);
|
|
136
|
+
--width-2xl: var(--container-2xl);
|
|
137
|
+
--min-width-2xl: var(--container-2xl);
|
|
138
|
+
--max-width-2xl: var(--container-2xl);
|
|
139
|
+
--flex-basis-2xl: var(--container-2xl);
|
|
140
|
+
--width-3xl: var(--container-3xl);
|
|
141
|
+
--min-width-3xl: var(--container-3xl);
|
|
142
|
+
--max-width-3xl: var(--container-3xl);
|
|
143
|
+
--flex-basis-3xl: var(--container-3xl);
|
|
144
|
+
--width-4xl: var(--container-4xl);
|
|
145
|
+
--min-width-4xl: var(--container-4xl);
|
|
146
|
+
--max-width-4xl: var(--container-4xl);
|
|
147
|
+
--flex-basis-4xl: var(--container-4xl);
|
|
148
|
+
--max-width-none: none;
|
|
149
|
+
|
|
116
150
|
--breakpoint-mobile: 480px;
|
|
117
151
|
--breakpoint-tablet: 768px;
|
|
118
152
|
--breakpoint-desktop: 1024px;
|
package/dist/css/transitions.css
CHANGED
package/dist/css/typography.css
CHANGED