@maggioli-design-system/design-tokens 14.0.0 → 14.1.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/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-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-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 +221 -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-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/scss/variables.scss +1 -1
- package/dist/src/formats/css-vars-typography/css-vars-typography.js +45 -0
- package/dist/src/formats/css-vars-typography/template.hbs +88 -0
- package/dist/src/formats/index.js +1 -0
- package/dist/src/lib/utils.mjs +2 -1
- package/package.json +1 -1
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
|
@@ -0,0 +1,221 @@
|
|
|
1
|
+
/*
|
|
2
|
+
@magma-design-system/design-tokens v14.1.0
|
|
3
|
+
Generated by Style Dictionary
|
|
4
|
+
Do not edit directly
|
|
5
|
+
Generated at Mon, 08 Jun 2026 14:52:24 GMT
|
|
6
|
+
*/
|
|
7
|
+
|
|
8
|
+
:root {
|
|
9
|
+
--font-title: Roboto, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
|
10
|
+
--font-info: Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
|
11
|
+
--font-read: 'Merriweather', Times, 'Times New Roman', serif;
|
|
12
|
+
--font-code: 'Roboto Mono', 'Courier New', monospace;
|
|
13
|
+
|
|
14
|
+
--text-size-title-h1: 3rem;
|
|
15
|
+
--text-size-title-h1--font-weight: 900;
|
|
16
|
+
--text-size-title-h1--letter-spacing: -0.025em;
|
|
17
|
+
--text-size-title-h1--line-height: 3rem;
|
|
18
|
+
--text-size-title-h2: 2.25rem;
|
|
19
|
+
--text-size-title-h2--font-weight: 900;
|
|
20
|
+
--text-size-title-h2--letter-spacing: -0.025em;
|
|
21
|
+
--text-size-title-h2--line-height: 2.5rem;
|
|
22
|
+
--text-size-title-h3: 1.875rem;
|
|
23
|
+
--text-size-title-h3--font-weight: 900;
|
|
24
|
+
--text-size-title-h3--letter-spacing: -0.025em;
|
|
25
|
+
--text-size-title-h3--line-height: 2.25rem;
|
|
26
|
+
--text-size-title-h4: 1.5rem;
|
|
27
|
+
--text-size-title-h4--font-weight: 900;
|
|
28
|
+
--text-size-title-h4--letter-spacing: -0.025em;
|
|
29
|
+
--text-size-title-h4--line-height: 2rem;
|
|
30
|
+
--text-size-title-h5: 1.25rem;
|
|
31
|
+
--text-size-title-h5--font-weight: 900;
|
|
32
|
+
--text-size-title-h5--letter-spacing: -0.025em;
|
|
33
|
+
--text-size-title-h5--line-height: 1.75rem;
|
|
34
|
+
--text-size-title-h6: 1rem;
|
|
35
|
+
--text-size-title-h6--font-weight: 700;
|
|
36
|
+
--text-size-title-h6--letter-spacing: -0.025em;
|
|
37
|
+
--text-size-title-h6--line-height: 1.5rem;
|
|
38
|
+
--text-size-title-action: 0.875rem;
|
|
39
|
+
--text-size-title-action--font-weight: 500;
|
|
40
|
+
--text-size-title-action--line-height: 1.5rem;
|
|
41
|
+
--text-size-info-paragraph: 1.25rem;
|
|
42
|
+
--text-size-info-paragraph--font-weight: 400;
|
|
43
|
+
--text-size-info-paragraph--line-height: 2rem;
|
|
44
|
+
--text-size-info-detail: 1rem;
|
|
45
|
+
--text-size-info-detail--font-weight: 400;
|
|
46
|
+
--text-size-info-detail--line-height: 1.5rem;
|
|
47
|
+
--text-size-info-caption: 0.875rem;
|
|
48
|
+
--text-size-info-caption--font-weight: 400;
|
|
49
|
+
--text-size-info-caption--line-height: 1.25rem;
|
|
50
|
+
--text-size-info-label: 0.75rem;
|
|
51
|
+
--text-size-info-label--font-weight: 700;
|
|
52
|
+
--text-size-info-label--line-height: 1rem;
|
|
53
|
+
--text-size-info-option: 0.625rem;
|
|
54
|
+
--text-size-info-option--font-weight: 700;
|
|
55
|
+
--text-size-info-option--letter-spacing: -0.025em;
|
|
56
|
+
--text-size-info-option--line-height: 0.625rem;
|
|
57
|
+
--text-size-info-tip: 0.75rem;
|
|
58
|
+
--text-size-info-tip--font-weight: 400;
|
|
59
|
+
--text-size-info-tip--line-height: 1rem;
|
|
60
|
+
--text-size-read-paragraph: 1.25rem;
|
|
61
|
+
--text-size-read-paragraph--font-weight: 300;
|
|
62
|
+
--text-size-read-paragraph--line-height: 2rem;
|
|
63
|
+
--text-size-read-detail: 1rem;
|
|
64
|
+
--text-size-read-detail--font-weight: 300;
|
|
65
|
+
--text-size-read-detail--line-height: 1.5rem;
|
|
66
|
+
--text-size-read-caption: 0.875rem;
|
|
67
|
+
--text-size-read-caption--font-weight: 400;
|
|
68
|
+
--text-size-read-caption--line-height: 1.25rem;
|
|
69
|
+
--text-size-code-snippet: 1rem;
|
|
70
|
+
--text-size-code-snippet--font-weight: 400;
|
|
71
|
+
--text-size-code-snippet--line-height: 1.5rem;
|
|
72
|
+
--text-size-code-hack: 0.875rem;
|
|
73
|
+
--text-size-code-hack--font-weight: 400;
|
|
74
|
+
--text-size-code-hack--line-height: 1.25rem;
|
|
75
|
+
|
|
76
|
+
--leading-2xs: 0.625rem;
|
|
77
|
+
--leading-xs: 1rem;
|
|
78
|
+
--leading-sm: 1.25rem;
|
|
79
|
+
--leading-md: 1.5rem;
|
|
80
|
+
--leading-lg: 1.75rem;
|
|
81
|
+
--leading-xl: 2rem;
|
|
82
|
+
--leading-2xl: 2.25rem;
|
|
83
|
+
--leading-3xl: 2.5rem;
|
|
84
|
+
--leading-4xl: 3rem;
|
|
85
|
+
|
|
86
|
+
--spacing: 0.0025rem;
|
|
87
|
+
--spacing-none: 0px;
|
|
88
|
+
--spacing-xs: 4px;
|
|
89
|
+
--spacing-sm: 8px;
|
|
90
|
+
--spacing-md: 16px;
|
|
91
|
+
--spacing-lg: 24px;
|
|
92
|
+
--spacing-xl: 32px;
|
|
93
|
+
--spacing-2xl: 48px;
|
|
94
|
+
--spacing-3xl: 64px;
|
|
95
|
+
--spacing-4xl: 96px;
|
|
96
|
+
--spacing-phrase: 50ch;
|
|
97
|
+
--spacing-prose: 65ch;
|
|
98
|
+
--spacing-text: 75ch;
|
|
99
|
+
--spacing-title: 30ch;
|
|
100
|
+
|
|
101
|
+
--container-4xs: 128px;
|
|
102
|
+
--container-3xs: 192px;
|
|
103
|
+
--container-2xs: 240px;
|
|
104
|
+
--container-xs: 320px;
|
|
105
|
+
--container-sm: 384px;
|
|
106
|
+
--container-md: 448px;
|
|
107
|
+
--container-lg: 512px;
|
|
108
|
+
--container-xl: 568px;
|
|
109
|
+
--container-2xl: 640px;
|
|
110
|
+
--container-3xl: 768px;
|
|
111
|
+
--container-4xl: 960px;
|
|
112
|
+
--container-5xl: 1024px;
|
|
113
|
+
--container-6xl: 1152px;
|
|
114
|
+
--container-7xl: 1280px;
|
|
115
|
+
|
|
116
|
+
--breakpoint-mobile: 480px;
|
|
117
|
+
--breakpoint-tablet: 768px;
|
|
118
|
+
--breakpoint-desktop: 1024px;
|
|
119
|
+
--breakpoint-wide: 1280px;
|
|
120
|
+
--breakpoint-large: 1440px;
|
|
121
|
+
--breakpoint-xlarge: 1600px;
|
|
122
|
+
--breakpoint-tv: 1920px;
|
|
123
|
+
|
|
124
|
+
--aspect-cover: 5/3;
|
|
125
|
+
--aspect-picture: 4/3;
|
|
126
|
+
--aspect-landscape: 4/2;
|
|
127
|
+
--aspect-panorama: 4/1;
|
|
128
|
+
--aspect-square: 1/1;
|
|
129
|
+
--aspect-a4: 1/1.4;
|
|
130
|
+
--aspect-book: 1/1.4;
|
|
131
|
+
--aspect-video: 16/9;
|
|
132
|
+
|
|
133
|
+
--ease-in-back: cubic-bezier(0.6, -0.28, 0.735, 0.045);
|
|
134
|
+
--ease-in-circ: cubic-bezier(0.6, 0.04, 0.98, 0.335);
|
|
135
|
+
--ease-in-cubic: cubic-bezier(0.55, 0.055, 0.675, 0.19);
|
|
136
|
+
--ease-in-expo: cubic-bezier(0.95, 0.05, 0.795, 0.035);
|
|
137
|
+
--ease-in-out-back: cubic-bezier(0.68, -0.55, 0.265, 1.55);
|
|
138
|
+
--ease-in-out-circ: cubic-bezier(0.785, 0.135, 0.15, 0.86);
|
|
139
|
+
--ease-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1);
|
|
140
|
+
--ease-in-out-expo: cubic-bezier(1, 0, 0, 1);
|
|
141
|
+
--ease-in-out-quad: cubic-bezier(0.455, 0.03, 0.515, 0.955);
|
|
142
|
+
--ease-in-out-quart: cubic-bezier(0.77, 0, 0.175, 1);
|
|
143
|
+
--ease-in-out-quint: cubic-bezier(0.86, 0, 0.07, 1);
|
|
144
|
+
--ease-in-out-sine: cubic-bezier(0.445, 0.05, 0.55, 0.95);
|
|
145
|
+
--ease-in-quad: cubic-bezier(0.55, 0.085, 0.68, 0.53);
|
|
146
|
+
--ease-in-quart: cubic-bezier(0.895, 0.03, 0.685, 0.22);
|
|
147
|
+
--ease-in-quint: cubic-bezier(0.755, 0.05, 0.855, 0.06);
|
|
148
|
+
--ease-in-sine: cubic-bezier(0.47, 0, 0.745, 0.715);
|
|
149
|
+
--ease-out-back: cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
|
150
|
+
--ease-out-circ: cubic-bezier(0.075, 0.82, 0.165, 1);
|
|
151
|
+
--ease-out-cubic: cubic-bezier(0.215, 0.61, 0.355, 1);
|
|
152
|
+
--ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
|
|
153
|
+
--ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
|
154
|
+
--ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1);
|
|
155
|
+
--ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1);
|
|
156
|
+
--ease-out-sine: cubic-bezier(0.39, 0.575, 0.565, 1);
|
|
157
|
+
|
|
158
|
+
--duration-75: 75ms;
|
|
159
|
+
--duration-100: 100ms;
|
|
160
|
+
--duration-150: 150ms;
|
|
161
|
+
--duration-200: 200ms;
|
|
162
|
+
--duration-300: 300ms;
|
|
163
|
+
--duration-500: 500ms;
|
|
164
|
+
--duration-700: 700ms;
|
|
165
|
+
--duration-1000: 1000ms;
|
|
166
|
+
|
|
167
|
+
--border-none: 0;
|
|
168
|
+
--border-xs: 1px;
|
|
169
|
+
--border-sm: 2px;
|
|
170
|
+
--border-md: 3px;
|
|
171
|
+
--border-lg: 4px;
|
|
172
|
+
--border-xl: 5px;
|
|
173
|
+
|
|
174
|
+
--radius-none: 0px;
|
|
175
|
+
--radius-3xs: 4px;
|
|
176
|
+
--radius-2xs: 6px;
|
|
177
|
+
--radius-xs: 8px;
|
|
178
|
+
--radius-sm: 10px;
|
|
179
|
+
--radius-md: 12px;
|
|
180
|
+
--radius-lg: 16px;
|
|
181
|
+
--radius-xl: 20px;
|
|
182
|
+
--radius-2xl: 24px;
|
|
183
|
+
--radius-3xl: 32px;
|
|
184
|
+
--radius-4xl: 48px;
|
|
185
|
+
--radius-5xl: 64px;
|
|
186
|
+
--radius-full: 1000px;
|
|
187
|
+
|
|
188
|
+
--shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
|
|
189
|
+
--shadow-xs-sharp: 0 0 1px 1px rgb(0 0 0 / 0.06), 0 1px 2px 0 rgb(0 0 0 / 0.05);
|
|
190
|
+
--shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
|
|
191
|
+
--shadow-sm-sharp: 0 0 1px 1px rgb(0 0 0 / 0.06), 0 1px 3px 0 rgb(0 0 0 / 0.1);
|
|
192
|
+
--shadow-sharp: 0 0 1px 1px rgb(0 0 0 / 0.06), 0 1px 3px 0 rgb(0 0 0 / 0.1);
|
|
193
|
+
--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
|
|
194
|
+
--shadow-md-sharp: 0 0 1px 1px rgb(0 0 0 / 0.06), 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -1px rgb(0 0 0 / 0.06);
|
|
195
|
+
--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
|
|
196
|
+
--shadow-lg-sharp: 0 0 1px 1px rgb(0 0 0 / 0.06), 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -2px rgb(0 0 0 / 0.05);
|
|
197
|
+
--shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
|
|
198
|
+
--shadow-xl-sharp: 0 0 1px 1px rgb(0 0 0 / 0.06), 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
|
|
199
|
+
--shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
|
|
200
|
+
--shadow-2xl-sharp: 0 0 1px 1px rgb(0 0 0 / 0.06), 0 25px 50px -12px rgb(0 0 0 / 0.25);
|
|
201
|
+
--shadow-inset-sm: inset 0 2px 4px 0 rgb(0 0 0 / 0.05), inset 0 0 0 1px rgb(0 0 0 / 0.01);
|
|
202
|
+
--shadow-inset-md: inset 0 4px 6px -1px rgb(0 0 0 / 0.1), inset 0 0 0 1px rgb(0 0 0 / 0.02);
|
|
203
|
+
--shadow-inset-lg: inset 0 10px 15px -3px rgb(0 0 0 / 0.1), inset 0 0 0 1px rgb(0 0 0 / 0.04);
|
|
204
|
+
--shadow-inset-xl: inset 0 20px 25px -5px rgb(0 0 0 / 0.1), inset 0 0 0 1px rgb(0 0 0 / 0.04);
|
|
205
|
+
--shadow-glow-near-strong: rgb(0 0 0 / 0.2) 0px 12px 28px 0px, rgb(0 0 0 / 0.1) 0px 2px 4px 0px;
|
|
206
|
+
--shadow-glow-distant-weak: rgb(0 0 0 / 0.2) 0px 60px 40px -7px;
|
|
207
|
+
--shadow-glow-distant-strong: rgb(0 0 0 / 0.25) 0px 50px 100px -20px, rgb(0 0 0 / 0.3) 0px 30px 60px -30px;
|
|
208
|
+
--shadow-box-md: rgb(0 0 0 / 0.06) 0px 0px 0px 1px, rgb(0 0 0 / 0.03) 0px 1px 1px -0.5px, rgb(0 0 0 / 0.04) 0px 2px 2px -1px, rgb(0 0 0 / 0.04) 0px 3px 3px -1.5px, rgb(0 0 0 / 0.03) 0px 5px 5px -2.5px, rgb(0 0 0 / 0.03) 0px 10px 10px -5px, rgb(0 0 0 / 0.03) 0px 24px 24px -8px;
|
|
209
|
+
--shadow-box-lg: rgb(0 0 0 / 0.25) 0px 4px 8px -2px, rgb(0 0 0 / 0.08) 0px 0px 0px 1px;
|
|
210
|
+
--shadow-box-xl: rgb(0 0 0 / 0.05) 0px 0px 0px 1px, rgb(0 0 0 / 0.1) 0px 1px 1px -0.5px, rgb(0 0 0 / 0.1) 0px 3px 3px -1.5px, rgb(0 0 0 / 0.1) 0px 6px 6px -3px, rgb(0 0 0 / 0.1) 0px 12px 12px -6px, rgb(0 0 0 / 0.1) 0px 24px 24px -12px;
|
|
211
|
+
--shadow-box-solid-weak: rgb(0 0 0 / 0.3) 0px 2px 4px, rgb(0 0 0 / 0.03) 0px 0px 0px 1px, rgb(0 0 0 / 0.1) 0px 7px 13px -3px, rgb(0 0 0 / 0.2) 0px -3px 0px inset, rgb(255 255 255 / 0.1) 0px -8px 10px inset, rgb(255 255 255 / 0.15) 0px -4px 0px inset;
|
|
212
|
+
--shadow-box-solid-strong: rgb(0 0 0 / 0.4) 0px 2px 4px, rgb(0 0 0 / 0.3) 0px 7px 13px -3px, rgb(0 0 0 / 0.35) 0px -3px 0px inset, rgb(255 255 255 / 0.1) 0px -8px 10px inset, rgb(255 255 255 / 0.15) 0px -4px 0px inset;
|
|
213
|
+
--shadow-outline-weak: 0 0 0 1px rgb(0 0 0 / 0.05), 0 1px 2px 0 rgb(0 0 0 / 0.05);
|
|
214
|
+
--shadow-outline-md: 0 0 0 1px rgb(0 0 0 / 0.1);
|
|
215
|
+
--shadow-outline-glow-weak: rgb(0 0 0 / 0.05) 0px 6px 24px 0px, rgb(0 0 0 / 0.08) 0px 0px 0px 1px;
|
|
216
|
+
--shadow-outline-glow-strong: rgb(0 0 0 / 0.16) 0px 10px 36px 0px, rgb(0 0 0 / 0.06) 0px 0px 0px 1px;
|
|
217
|
+
--shadow-outline-strong: rgb(0 0 0 / 0.25) 0px 1px 1px, rgb(0 0 0 / 0.13) 0px 0px 1px 1px;
|
|
218
|
+
--shadow-highlight-weak: rgb(0 0 0 / 0.3) 0px 0px 0px 1px;
|
|
219
|
+
--shadow-highlight-md: rgb(0 0 0 / 0.5) 0px 0px 0px 1px, rgb(0 0 0 / 0.3) 0px 4px 6px -1px;
|
|
220
|
+
--shadow-highlight-strong: rgb(0 0 0 / 0.4) 0px 0px 0px 2px, rgb(0 0 0 / 0.65) 0px 4px 6px -1px;
|
|
221
|
+
}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
/*
|
|
2
|
-
@magma-design-system/design-tokens v14.
|
|
2
|
+
@magma-design-system/design-tokens v14.1.0
|
|
3
3
|
Generated by Style Dictionary
|
|
4
4
|
Do not edit directly
|
|
5
|
-
Generated at Mon, 08 Jun 2026
|
|
5
|
+
Generated at Mon, 08 Jun 2026 14:52:24 GMT
|
|
6
6
|
*/
|
|
7
7
|
|
|
8
8
|
// ignore_for_file: unused_import
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
/*
|
|
2
|
-
@magma-design-system/design-tokens v14.
|
|
2
|
+
@magma-design-system/design-tokens v14.1.0
|
|
3
3
|
Generated by Style Dictionary
|
|
4
4
|
Do not edit directly
|
|
5
|
-
Generated at Mon, 08 Jun 2026
|
|
5
|
+
Generated at Mon, 08 Jun 2026 14:52:24 GMT
|
|
6
6
|
*/
|
|
7
7
|
|
|
8
8
|
// ignore_for_file: unused_import
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
/*
|
|
2
|
-
@magma-design-system/design-tokens v14.
|
|
2
|
+
@magma-design-system/design-tokens v14.1.0
|
|
3
3
|
Generated by Style Dictionary
|
|
4
4
|
Do not edit directly
|
|
5
|
-
Generated at Mon, 08 Jun 2026
|
|
5
|
+
Generated at Mon, 08 Jun 2026 14:52:24 GMT
|
|
6
6
|
*/
|
|
7
7
|
|
|
8
8
|
// ignore_for_file: unused_import
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
/*
|
|
2
|
-
@magma-design-system/design-tokens v14.
|
|
2
|
+
@magma-design-system/design-tokens v14.1.0
|
|
3
3
|
Generated by Style Dictionary
|
|
4
4
|
Do not edit directly
|
|
5
|
-
Generated at Mon, 08 Jun 2026
|
|
5
|
+
Generated at Mon, 08 Jun 2026 14:52:24 GMT
|
|
6
6
|
*/
|
|
7
7
|
|
|
8
8
|
// ignore_for_file: unused_import
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
/*
|
|
2
|
-
@magma-design-system/design-tokens v14.
|
|
2
|
+
@magma-design-system/design-tokens v14.1.0
|
|
3
3
|
Generated by Style Dictionary
|
|
4
4
|
Do not edit directly
|
|
5
|
-
Generated at Mon, 08 Jun 2026
|
|
5
|
+
Generated at Mon, 08 Jun 2026 14:52:24 GMT
|
|
6
6
|
*/
|
|
7
7
|
|
|
8
8
|
// ignore_for_file: unused_import
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
/*
|
|
2
|
-
@magma-design-system/design-tokens v14.
|
|
2
|
+
@magma-design-system/design-tokens v14.1.0
|
|
3
3
|
Generated by Style Dictionary
|
|
4
4
|
Do not edit directly
|
|
5
|
-
Generated at Mon, 08 Jun 2026
|
|
5
|
+
Generated at Mon, 08 Jun 2026 14:52:24 GMT
|
|
6
6
|
*/
|
|
7
7
|
|
|
8
8
|
// ignore_for_file: unused_import
|
package/dist/flutter/colors.dart
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
/*
|
|
2
|
-
@magma-design-system/design-tokens v14.
|
|
2
|
+
@magma-design-system/design-tokens v14.1.0
|
|
3
3
|
Generated by Style Dictionary
|
|
4
4
|
Do not edit directly
|
|
5
|
-
Generated at Mon, 08 Jun 2026
|
|
5
|
+
Generated at Mon, 08 Jun 2026 14:52:24 GMT
|
|
6
6
|
*/
|
|
7
7
|
|
|
8
8
|
// ignore_for_file: unused_import
|
package/dist/flutter/fonts.dart
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
/*
|
|
2
|
-
@magma-design-system/design-tokens v14.
|
|
2
|
+
@magma-design-system/design-tokens v14.1.0
|
|
3
3
|
Generated by Style Dictionary
|
|
4
4
|
Do not edit directly
|
|
5
|
-
Generated at Mon, 08 Jun 2026
|
|
5
|
+
Generated at Mon, 08 Jun 2026 14:52:24 GMT
|
|
6
6
|
*/
|
|
7
7
|
|
|
8
8
|
// ignore_for_file: unused_import
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
/*
|
|
2
|
-
@magma-design-system/design-tokens v14.
|
|
2
|
+
@magma-design-system/design-tokens v14.1.0
|
|
3
3
|
Generated by Style Dictionary
|
|
4
4
|
Do not edit directly
|
|
5
|
-
Generated at Mon, 08 Jun 2026
|
|
5
|
+
Generated at Mon, 08 Jun 2026 14:52:24 GMT
|
|
6
6
|
*/
|
|
7
7
|
|
|
8
8
|
const palette = {
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
/*
|
|
2
|
-
@magma-design-system/design-tokens v14.
|
|
2
|
+
@magma-design-system/design-tokens v14.1.0
|
|
3
3
|
Generated by Style Dictionary
|
|
4
4
|
Do not edit directly
|
|
5
|
-
Generated at Mon, 08 Jun 2026
|
|
5
|
+
Generated at Mon, 08 Jun 2026 14:52:24 GMT
|
|
6
6
|
*/
|
|
7
7
|
|
|
8
8
|
const getColor = (cssVar, { opacityVariable, opacityValue }) => {
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
/*
|
|
2
|
-
@magma-design-system/design-tokens v14.
|
|
2
|
+
@magma-design-system/design-tokens v14.1.0
|
|
3
3
|
Generated by Style Dictionary
|
|
4
4
|
Do not edit directly
|
|
5
|
-
Generated at Mon, 08 Jun 2026
|
|
5
|
+
Generated at Mon, 08 Jun 2026 14:52:24 GMT
|
|
6
6
|
*/
|
|
7
7
|
|
|
8
8
|
const fontFamily = {
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
/*
|
|
2
|
-
@magma-design-system/design-tokens v14.
|
|
2
|
+
@magma-design-system/design-tokens v14.1.0
|
|
3
3
|
Generated by Style Dictionary
|
|
4
4
|
Do not edit directly
|
|
5
|
-
Generated at Mon, 08 Jun 2026
|
|
5
|
+
Generated at Mon, 08 Jun 2026 14:52:24 GMT
|
|
6
6
|
*/
|
|
7
7
|
|
|
8
8
|
const fontSize = {
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
/*
|
|
2
|
-
@magma-design-system/design-tokens v14.
|
|
2
|
+
@magma-design-system/design-tokens v14.1.0
|
|
3
3
|
Generated by Style Dictionary
|
|
4
4
|
Do not edit directly
|
|
5
|
-
Generated at Mon, 08 Jun 2026
|
|
5
|
+
Generated at Mon, 08 Jun 2026 14:52:24 GMT
|
|
6
6
|
*/
|
|
7
7
|
|
|
8
8
|
const leading = {
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
/*
|
|
2
|
-
@magma-design-system/design-tokens v14.
|
|
2
|
+
@magma-design-system/design-tokens v14.1.0
|
|
3
3
|
Generated by Style Dictionary
|
|
4
4
|
Do not edit directly
|
|
5
|
-
Generated at Mon, 08 Jun 2026
|
|
5
|
+
Generated at Mon, 08 Jun 2026 14:52:24 GMT
|
|
6
6
|
*/
|
|
7
7
|
|
|
8
8
|
const properties = {
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
/*
|
|
2
|
-
@magma-design-system/design-tokens v14.
|
|
2
|
+
@magma-design-system/design-tokens v14.1.0
|
|
3
3
|
Generated by Style Dictionary
|
|
4
4
|
Do not edit directly
|
|
5
|
-
Generated at Mon, 08 Jun 2026
|
|
5
|
+
Generated at Mon, 08 Jun 2026 14:52:24 GMT
|
|
6
6
|
*/
|
|
7
7
|
|
|
8
8
|
const screens = {
|
package/dist/json/coolors.json
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
{
|
|
2
|
-
"comment": "@magma-design-system/design-tokens v14.
|
|
2
|
+
"comment": "@magma-design-system/design-tokens v14.1.0 Generated by Style Dictionary at Mon, 08 Jun 2026 14:52:24 GMT, do not edit directly.",
|
|
3
3
|
"light": [
|
|
4
4
|
{
|
|
5
5
|
"Tone Porcelain 01": "#000000",
|
package/dist/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@maggioli-design-system/design-tokens",
|
|
3
|
-
"version": "14.
|
|
3
|
+
"version": "14.1.0",
|
|
4
4
|
"description": "This is the Design Token library of Maggioli Design System, here you'll find all the visual data used around the libraries.",
|
|
5
5
|
"author": "Vittorio Vittori",
|
|
6
6
|
"contributors": [
|
package/dist/scss/variables.scss
CHANGED
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
+
};
|
|
5
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
+
exports.cssVarsTypographyFormat = void 0;
|
|
7
|
+
const handlebars_1 = __importDefault(require("handlebars"));
|
|
8
|
+
const fs_1 = __importDefault(require("fs"));
|
|
9
|
+
const path_1 = __importDefault(require("path"));
|
|
10
|
+
const package_json_1 = require("../../../package.json");
|
|
11
|
+
const helpers_1 = require("../helpers");
|
|
12
|
+
const templatePath = path_1.default.resolve(__dirname, './template.hbs');
|
|
13
|
+
const template = handlebars_1.default.compile(fs_1.default.readFileSync(templatePath).toString());
|
|
14
|
+
const ifTailwind4Border = (property, options) => {
|
|
15
|
+
/* exclude number and default value
|
|
16
|
+
keep prop as sm, md...
|
|
17
|
+
*/
|
|
18
|
+
return isNaN(Number(property)) ? options.fn(this) : options.inverse(this);
|
|
19
|
+
};
|
|
20
|
+
// Register every helper used by ./template.hbs so this format is self-contained
|
|
21
|
+
// and not dependent on another module registering them first on the shared
|
|
22
|
+
// Handlebars singleton.
|
|
23
|
+
handlebars_1.default.registerHelper('kebabCase', helpers_1.kebabCase);
|
|
24
|
+
handlebars_1.default.registerHelper('ifTailwindFontSizeProp', helpers_1.ifTailwindFontSizeProp);
|
|
25
|
+
handlebars_1.default.registerHelper('tailwindFontSize', helpers_1.tailwindFontSize);
|
|
26
|
+
handlebars_1.default.registerHelper('pixelToRem', helpers_1.pixelToRem);
|
|
27
|
+
handlebars_1.default.registerHelper('safeString', helpers_1.safeString);
|
|
28
|
+
handlebars_1.default.registerHelper('ifTailwind4Border', ifTailwind4Border);
|
|
29
|
+
/**
|
|
30
|
+
* Classic-CSS counterpart of `css/tailwind-theme-typography`: emits the same
|
|
31
|
+
* typography (and related) custom properties inside a plain `:root {}` block
|
|
32
|
+
* instead of Tailwind v4's `@theme {}`, so they can be consumed without a
|
|
33
|
+
* Tailwind toolchain.
|
|
34
|
+
*/
|
|
35
|
+
exports.cssVarsTypographyFormat = {
|
|
36
|
+
name: 'css/vars-typography',
|
|
37
|
+
formatter: ({ dictionary, platform }) => {
|
|
38
|
+
return template({
|
|
39
|
+
properties: dictionary.properties,
|
|
40
|
+
date: new Date().toUTCString(),
|
|
41
|
+
options: platform,
|
|
42
|
+
version: package_json_1.version,
|
|
43
|
+
});
|
|
44
|
+
},
|
|
45
|
+
};
|
|
@@ -0,0 +1,88 @@
|
|
|
1
|
+
/*
|
|
2
|
+
@magma-design-system/design-tokens v{{ version }}
|
|
3
|
+
Generated by Style Dictionary
|
|
4
|
+
Do not edit directly
|
|
5
|
+
Generated at {{ date }}
|
|
6
|
+
*/
|
|
7
|
+
|
|
8
|
+
:root {
|
|
9
|
+
{{!-- font family --}}
|
|
10
|
+
{{#each properties as | fonts |}}
|
|
11
|
+
{{#each fonts as | groups |}}
|
|
12
|
+
{{#if groups.fontFamily.value }}
|
|
13
|
+
--font-{{@key}}: {{#each groups.fontFamily.value}} {{ safeString this }}{{#unless @last}},{{/unless}}{{/each}};
|
|
14
|
+
{{/if}}
|
|
15
|
+
{{/each}}
|
|
16
|
+
{{/each}}
|
|
17
|
+
|
|
18
|
+
{{!-- fontsize --}}
|
|
19
|
+
{{#each properties as | fonts |}}
|
|
20
|
+
{{#each fonts as | groups |}}
|
|
21
|
+
{{#each groups.variants as | variants |}}
|
|
22
|
+
--text-size-{{@../key}}-{{@key}}: {{#tailwindFontSize 'fontSize' variants.fontSize.value}}{{/tailwindFontSize}};
|
|
23
|
+
{{#each variants as | rules |}}
|
|
24
|
+
{{#ifTailwindFontSizeProp @key}}
|
|
25
|
+
--text-size-{{@../../key}}-{{@../key}}--{{#kebabCase}}{{@key}}{{/kebabCase}}: {{#tailwindFontSize @key rules.value}}{{/tailwindFontSize}};
|
|
26
|
+
{{/ifTailwindFontSizeProp}}
|
|
27
|
+
{{/each}}
|
|
28
|
+
{{/each}}
|
|
29
|
+
{{/each}}
|
|
30
|
+
{{/each}}
|
|
31
|
+
|
|
32
|
+
{{!-- leading --}}
|
|
33
|
+
{{#each properties as | property |}}
|
|
34
|
+
{{#each property.leading as | leading |}}
|
|
35
|
+
--leading-{{@key}}: {{#pixelToRem}}{{leading.value}}{{/pixelToRem}};
|
|
36
|
+
{{/each}}
|
|
37
|
+
{{/each}}
|
|
38
|
+
|
|
39
|
+
{{!-- spacing --}}
|
|
40
|
+
--spacing: {{properties.spacing-scale.value}};
|
|
41
|
+
{{#each properties.spacing as | spacing |}}
|
|
42
|
+
--spacing-{{@key}}: {{spacing.value}};
|
|
43
|
+
{{/each}}
|
|
44
|
+
|
|
45
|
+
{{!-- container with --}}
|
|
46
|
+
{{#each properties.container as | container |}}
|
|
47
|
+
--container-{{@key}}: {{container.value}};
|
|
48
|
+
{{/each}}
|
|
49
|
+
|
|
50
|
+
{{!-- screens breakpoint --}}
|
|
51
|
+
{{#each properties.screen as | screen |}}
|
|
52
|
+
--breakpoint-{{@key}}: {{screen.min.value}};
|
|
53
|
+
{{/each}}
|
|
54
|
+
|
|
55
|
+
{{!-- aspet ration --}}
|
|
56
|
+
{{#each properties.sizing.aspectRatio as | ratio |}}
|
|
57
|
+
--aspect-{{@key}}: {{ratio.value}};
|
|
58
|
+
{{/each}}
|
|
59
|
+
|
|
60
|
+
{{!-- timing function --}}
|
|
61
|
+
{{#each properties.css.timingFunction as | timing |}}
|
|
62
|
+
--ease-{{@key}}: {{timing.value}};
|
|
63
|
+
{{/each}}
|
|
64
|
+
|
|
65
|
+
{{!-- duration --}}
|
|
66
|
+
{{#each properties.css.duration as | duration |}}
|
|
67
|
+
--duration-{{@key}}: {{duration.value}};
|
|
68
|
+
{{/each}}
|
|
69
|
+
|
|
70
|
+
{{!-- border --}}
|
|
71
|
+
{{#each properties.cosmetic.border as | border |}}
|
|
72
|
+
{{#ifTailwind4Border @key}}
|
|
73
|
+
--border-{{@key}}: {{border.value}};
|
|
74
|
+
{{/ifTailwind4Border}}
|
|
75
|
+
{{/each}}
|
|
76
|
+
|
|
77
|
+
{{!-- radius --}}
|
|
78
|
+
{{#each properties.radius as | radius |}}
|
|
79
|
+
{{#ifTailwind4Border @key}}
|
|
80
|
+
--radius-{{@key}}: {{radius.value}};
|
|
81
|
+
{{/ifTailwind4Border}}
|
|
82
|
+
{{/each}}
|
|
83
|
+
|
|
84
|
+
{{!-- box shadow --}}
|
|
85
|
+
{{#each properties.cosmetic.boxShadow as | shadow |}}
|
|
86
|
+
--shadow-{{@key}}: {{shadow.value}};
|
|
87
|
+
{{/each}}
|
|
88
|
+
}
|
|
@@ -19,6 +19,7 @@ __exportStar(require("./css-tailwind-theme-typography/css-tailwind-theme-typogra
|
|
|
19
19
|
__exportStar(require("./css-vars-hex/css-vars-hex.js"), exports);
|
|
20
20
|
__exportStar(require("./css-vars-rgb/css-vars-rgb.js"), exports);
|
|
21
21
|
__exportStar(require("./css-vars-transitions/css-vars-transitions.js"), exports);
|
|
22
|
+
__exportStar(require("./css-vars-typography/css-vars-typography.js"), exports);
|
|
22
23
|
__exportStar(require("./flutter-color/flutter-color.js"), exports);
|
|
23
24
|
__exportStar(require("./flutter-font/flutter-font.js"), exports);
|
|
24
25
|
__exportStar(require("./js-tailwind-colors/js-tailwind-colors.js"), exports);
|
package/dist/src/lib/utils.mjs
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import StyleDictionary from 'style-dictionary';
|
|
2
|
-
import { flutterColorFormat, cssHexFormat, cssRgbFormat, jsFormat, jsTailwindColorsFormat, jsonCoolorsFormat, jsTailwindFontFamilyFormat, flutterFontFormat, flutterFontWeightTransform, flutterToDoubleTransform, jsTailwindFontSizeFormat, jsTailwindLeadingFormat, jsTailwindPropsFormat, jsTailwindScreensFormat, tailwindcssAspetctRationTransform, tailwindPxToRemTransform, cssTailwindThemeTypography, tailwindCss4Filter, cssTailwindThemeColor, cssVarsTransitionsFormat, } from '../formats/index.js';
|
|
2
|
+
import { flutterColorFormat, cssHexFormat, cssRgbFormat, jsFormat, jsTailwindColorsFormat, jsonCoolorsFormat, jsTailwindFontFamilyFormat, flutterFontFormat, flutterFontWeightTransform, flutterToDoubleTransform, jsTailwindFontSizeFormat, jsTailwindLeadingFormat, jsTailwindPropsFormat, jsTailwindScreensFormat, tailwindcssAspetctRationTransform, tailwindPxToRemTransform, cssTailwindThemeTypography, cssVarsTypographyFormat, tailwindCss4Filter, cssTailwindThemeColor, cssVarsTransitionsFormat, } from '../formats/index.js';
|
|
3
3
|
import { getBrandColorConfig } from '../config/styledictionary/sd-brand-color.config.js';
|
|
4
4
|
import chalk from 'chalk';
|
|
5
5
|
import pkg from 'fs-extra';
|
|
@@ -64,6 +64,7 @@ export function getStyleDictionaryWithAllCustomTransform() {
|
|
|
64
64
|
.registerFormat(jsTailwindScreensFormat)
|
|
65
65
|
.registerFormat(jsTailwindPropsFormat)
|
|
66
66
|
.registerFormat(cssTailwindThemeTypography)
|
|
67
|
+
.registerFormat(cssVarsTypographyFormat)
|
|
67
68
|
// TRANSITIONS
|
|
68
69
|
.registerFormat(cssVarsTransitionsFormat)
|
|
69
70
|
// transform for flutter font
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@maggioli-design-system/design-tokens",
|
|
3
|
-
"version": "14.
|
|
3
|
+
"version": "14.1.0",
|
|
4
4
|
"description": "This is the Design Token library of Maggioli Design System, here you'll find all the visual data used around the libraries.",
|
|
5
5
|
"author": "Vittorio Vittori",
|
|
6
6
|
"contributors": [
|