@marsaude/tokens 1.0.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.
Files changed (4) hide show
  1. package/README.md +15 -0
  2. package/build/marsaude/tokens/mar-mobile_light-default_primitive-classes.scss +1343 -0
  3. package/build/marsaude/tokens/mar-mobile_light-default_primitive.scss +337 -0
  4. package/package.json +27 -0
package/build/marsaude/tokens/mar-mobile_light-default_primitive.scss ADDED
@@ -0,0 +1,337 @@
1
+ :root {
2
+ --mar-primary-50: #f0f6fe;
3
+ --mar-primary-100: #e2ecfd;
4
+ --mar-primary-200: #bbd4fb;
5
+ --mar-primary-300: #90b8f9;
6
+ --mar-primary-400: #5593f6;
7
+ --mar-primary-500: #0b57d0;
8
+ --mar-primary-600: #0a4db8;
9
+ --mar-primary-700: #0944a5;
10
+ --mar-primary-800: #073a8d;
11
+ --mar-primary-900: #052457;
12
+ --mar-primary-950: #03183a;
13
+ --mar-greyscale-0: #ffffff;
14
+ --mar-greyscale-50: #f5f5f5;
15
+ --mar-greyscale-100: #ebebeb;
16
+ --mar-greyscale-200: #cfcfcf;
17
+ --mar-greyscale-300: #b3b3b3;
18
+ --mar-greyscale-400: #8c8c8c;
19
+ --mar-greyscale-500: #4e4e4e;
20
+ --mar-greyscale-600: #454545;
21
+ --mar-greyscale-700: #404040;
22
+ --mar-greyscale-800: #303030;
23
+ --mar-greyscale-900: #262626;
24
+ --mar-greyscale-950: #1a1a1a;
25
+ --mar-greyscale-1000: #000000;
26
+ --mar-support-red-50: #fef0f0;
27
+ --mar-support-red-100: #fee7e7;
28
+ --mar-support-red-200: #fcc5c5;
29
+ --mar-support-red-300: #fa9e9e;
30
+ --mar-support-red-400: #f76969;
31
+ --mar-support-red-500: #d00b0b;
32
+ --mar-support-red-600: #bd0a0a;
33
+ --mar-support-red-700: #a50909;
34
+ --mar-support-red-800: #830707;
35
+ --mar-support-red-900: #660505;
36
+ --mar-support-red-950: #3a0303;
37
+ --mar-support-yellow-50: #fdfbe8;
38
+ --mar-support-yellow-100: #fbf8d5;
39
+ --mar-support-yellow-200: #f6f0ac;
40
+ --mar-support-yellow-300: #f1e779;
41
+ --mar-support-yellow-400: #ebdd42;
42
+ --mar-support-yellow-500: #e3d218;
43
+ --mar-support-yellow-600: #d0c016;
44
+ --mar-support-yellow-700: #b4a613;
45
+ --mar-support-yellow-800: #988d10;
46
+ --mar-support-yellow-900: #6a620b;
47
+ --mar-support-yellow-950: #4a4408;
48
+ --mar-support-green-50: #ecfef1;
49
+ --mar-support-green-100: #d3fde0;
50
+ --mar-support-green-200: #99fab6;
51
+ --mar-support-green-300: #38f571;
52
+ --mar-support-green-400: #0ce44d;
53
+ --mar-support-green-500: #0bd046;
54
+ --mar-support-green-600: #0abd40;
55
+ --mar-support-green-700: #09a537;
56
+ --mar-support-green-800: #07882e;
57
+ --mar-support-green-900: #056121;
58
+ --mar-support-green-950: #044918;
59
+ --mar-support-blue-50: #ecfdfe;
60
+ --mar-support-blue-100: #cffafc;
61
+ --mar-support-blue-200: #94f4f9;
62
+ --mar-support-blue-300: #38ebf5;
63
+ --mar-support-blue-400: #0cd9e4;
64
+ --mar-support-blue-500: #0bc6d0;
65
+ --mar-support-blue-600: #0ab4bd;
66
+ --mar-support-blue-700: #099da5;
67
+ --mar-support-blue-800: #078188;
68
+ --mar-support-blue-900: #055c61;
69
+ --mar-support-blue-950: #044549;
70
+ --mar-font-size-12px: 12px;
71
+ --mar-font-size-14px: 14px;
72
+ --mar-font-size-16px: 16px;
73
+ --mar-font-size-18px: 18px;
74
+ --mar-font-size-20px: 20px;
75
+ --mar-font-size-22px: 22px;
76
+ --mar-font-size-24px: 24px;
77
+ --mar-font-size-26px: 26px;
78
+ --mar-font-size-28px: 28px;
79
+ --mar-font-size-30px: 30px;
80
+ --mar-font-size-32px: 32px;
81
+ --mar-font-size-36px: 36px;
82
+ --mar-font-size-38px: 38px;
83
+ --mar-font-size-40px: 40px;
84
+ --mar-font-size-42px: 42px;
85
+ --mar-font-size-44px: 44px;
86
+ --mar-font-size-46px: 46px;
87
+ --mar-font-size-48px: 48px;
88
+ --mar-font-size-50px: 50px;
89
+ --mar-font-size-52px: 52px;
90
+ --mar-font-size-54px: 54px;
91
+ --mar-font-size-56px: 56px;
92
+ --mar-font-size-58px: 58px;
93
+ --mar-font-size-60px: 60px;
94
+ --mar-text-case-uppercase: uppercase;
95
+ --mar-text-case-lowercase: lowecase;
96
+ --mar-text-case-capitalize: capitalize;
97
+ --mar-text-case-none: none;
98
+ --mar-text-decoration-none: none;
99
+ --mar-text-decoration-underline: underline;
100
+ --mar-text-decoration-line-through: line-through;
101
+ --mar-font-family-open-sans: 'Open Sans';
102
+ --mar-line-height-16px: 16px;
103
+ --mar-line-height-20px: 20px;
104
+ --mar-line-height-24px: 24px;
105
+ --mar-line-height-28px: 28px;
106
+ --mar-line-height-32px: 32px;
107
+ --mar-line-height-36px: 36px;
108
+ --mar-line-height-40px: 40px;
109
+ --mar-line-height-44px: 44px;
110
+ --mar-line-height-48px: 48px;
111
+ --mar-line-height-52px: 52px;
112
+ --mar-line-height-56px: 56px;
113
+ --mar-line-height-60px: 60px;
114
+ --mar-line-height-64px: 64px;
115
+ --mar-line-height-68px: 68px;
116
+ --mar-letter-spacing-0: 0;
117
+ --mar-font-weight-400: 400;
118
+ --mar-font-weight-500: 500;
119
+ --mar-font-weight-600: 600;
120
+ --mar-font-weight-700: 700;
121
+ --mar-spacing-0: 0px;
122
+ --mar-spacing-50: 4px;
123
+ --mar-spacing-100: 8px;
124
+ --mar-spacing-150: 12px;
125
+ --mar-spacing-200: 16px;
126
+ --mar-spacing-250: 20px;
127
+ --mar-spacing-300: 24px;
128
+ --mar-spacing-350: 28px;
129
+ --mar-spacing-400: 32px;
130
+ --mar-spacing-450: 36px;
131
+ --mar-spacing-500: 40px;
132
+ --mar-spacing-550: 44px;
133
+ --mar-spacing-600: 48px;
134
+ --mar-spacing-650: 52px;
135
+ --mar-spacing-700: 56px;
136
+ --mar-spacing-750: 60px;
137
+ --mar-spacing-800: 64px;
138
+ --mar-spacing-850: 68px;
139
+ --mar-spacing-900: 72px;
140
+ --mar-spacing-950: 76px;
141
+ --mar-spacing-1000: 80px;
142
+ --mar-spacing-default-xs: 4px;
143
+ --mar-spacing-default-sm: 8px;
144
+ --mar-spacing-default-md: 12px;
145
+ --mar-spacing-default-lg: 16px;
146
+ --mar-spacing-default-xl: 24px;
147
+ --mar-spacing-default-2xl: 32px;
148
+ --mar-spacing-default-3xl: 40px;
149
+ --mar-spacing-default-4xl: 48px;
150
+ --mar-spacing-default-component-fixed-xs: 4px;
151
+ --mar-spacing-default-component-fixed-sm: 8px;
152
+ --mar-spacing-default-component-fixed-md: 12px;
153
+ --mar-spacing-default-component-fixed-lg: 16px;
154
+ --mar-spacing-default-component-fixed-xl: 20px;
155
+ --mar-spacing-default-component-responsive-xs: 12px;
156
+ --mar-spacing-default-component-responsive-sm: 16px;
157
+ --mar-border-width-none: 0px;
158
+ --mar-border-width-thin: 1px;
159
+ --mar-border-width-regular: 2px;
160
+ --mar-border-radius-none: 0px;
161
+ --mar-border-radius-xs: 4px;
162
+ --mar-border-radius-sm: 8px;
163
+ --mar-border-radius-md: 12px;
164
+ --mar-border-radius-lg: 16px;
165
+ --mar-border-radius-xl: 20px;
166
+ --mar-border-radius-2xl: 24px;
167
+ --mar-border-radius-circular: 999px;
168
+ --mar-sizing-0: 0px;
169
+ --mar-sizing-50: 4px;
170
+ --mar-sizing-100: 8px;
171
+ --mar-sizing-150: 12px;
172
+ --mar-sizing-200: 16px;
173
+ --mar-sizing-250: 20px;
174
+ --mar-sizing-300: 24px;
175
+ --mar-sizing-350: 28px;
176
+ --mar-sizing-400: 32px;
177
+ --mar-sizing-450: 36px;
178
+ --mar-sizing-500: 40px;
179
+ --mar-sizing-550: 44px;
180
+ --mar-sizing-600: 48px;
181
+ --mar-sizing-650: 52px;
182
+ --mar-sizing-700: 56px;
183
+ --mar-sizing-750: 60px;
184
+ --mar-sizing-800: 64px;
185
+ --mar-sizing-850: 68px;
186
+ --mar-sizing-900: 72px;
187
+ --mar-sizing-950: 76px;
188
+ --mar-sizing-1000: 80px;
189
+ --mar-sizing-fixed-xs: 12px;
190
+ --mar-sizing-fixed-sm: 16px;
191
+ --mar-sizing-fixed-md: 20px;
192
+ --mar-sizing-fixed-lg: 24px;
193
+ --mar-sizing-fixed-xl: 28px;
194
+ --mar-sizing-fixed-2xl: 32px;
195
+ --mar-sizing-fixed-3xl: 36px;
196
+ --mar-sizing-fixed-4xl: 40px;
197
+ --mar-sizing-responsive-sm: 16px;
198
+ --mar-sizing-responsive-md: 20px;
199
+ --mar-opacity-100: 0.12;
200
+ --mar-opacity-200: 0.2;
201
+ --mar-opacity-300: 0.3;
202
+ --mar-opacity-400: 0.4;
203
+ --mar-opacity-500: 0.5;
204
+ --mar-opacity-600: 0.6;
205
+ --mar-chart-green-50: #f1fcf2;
206
+ --mar-chart-green-100: #defae4;
207
+ --mar-chart-green-200: #bff3c9;
208
+ --mar-chart-green-300: #8ee7a0;
209
+ --mar-chart-green-400: #55d36f;
210
+ --mar-chart-green-500: #2eb94b;
211
+ --mar-chart-green-600: #22a13d;
212
+ --mar-chart-green-700: #1d7831;
213
+ --mar-chart-green-800: #1c5f2b;
214
+ --mar-chart-green-900: #194e26;
215
+ --mar-chart-green-950: #082b12;
216
+ --mar-chart-yellow-50: #fffaeb;
217
+ --mar-chart-yellow-100: #fff1c6;
218
+ --mar-chart-yellow-200: #ffe088;
219
+ --mar-chart-yellow-300: #ffc53a;
220
+ --mar-chart-yellow-400: #ffb420;
221
+ --mar-chart-yellow-500: #f99007;
222
+ --mar-chart-yellow-600: #dd6a02;
223
+ --mar-chart-yellow-700: #b74806;
224
+ --mar-chart-yellow-800: #94370c;
225
+ --mar-chart-yellow-900: #7a2e0d;
226
+ --mar-chart-yellow-950: #461602;
227
+ --mar-chart-red-50: #fef2f2;
228
+ --mar-chart-red-100: #fee2e2;
229
+ --mar-chart-red-200: #fecaca;
230
+ --mar-chart-red-300: #fca5a5;
231
+ --mar-chart-red-400: #f97070;
232
+ --mar-chart-red-500: #f04343;
233
+ --mar-chart-red-600: #de2d2d;
234
+ --mar-chart-red-700: #ba1b1b;
235
+ --mar-chart-red-800: #9a1a1a;
236
+ --mar-chart-red-900: #7f1d1d;
237
+ --mar-chart-red-950: #450a0a;
238
+ --mar-chart-purple-50: #f4f3ff;
239
+ --mar-chart-purple-100: #ece9fe;
240
+ --mar-chart-purple-200: #dad5ff;
241
+ --mar-chart-purple-300: #bfb4fe;
242
+ --mar-chart-purple-400: #a089fc;
243
+ --mar-chart-purple-500: #8159f9;
244
+ --mar-chart-purple-600: #7036f1;
245
+ --mar-chart-purple-700: #682dde;
246
+ --mar-chart-purple-800: #511eb9;
247
+ --mar-chart-purple-900: #441b97;
248
+ --mar-chart-purple-950: #280e67;
249
+ --mar-chart-safe-subtle: #defae4;
250
+ --mar-chart-safe-highlight: #22a13d;
251
+ --mar-chart-caution-subtle: #fff1c6;
252
+ --mar-chart-caution-highlight: #ffc53a;
253
+ --mar-chart-danger-subtle: #fee2e2;
254
+ --mar-chart-danger-highlight: #de2d2d;
255
+ --mar-chart-critical-subtle: #ece9fe;
256
+ --mar-chart-critical-highlight: #682dde;
257
+ --mar-chart-neutral-subtle: #e2ecfd;
258
+ --mar-chart-neutral-highlight: #5593f6;
259
+ --mar-background-primary: #ffffff;
260
+ --mar-background-secondary: #f5f5f5;
261
+ --mar-background-inverse: #000000;
262
+ --mar-background-brand: #0b57d0;
263
+ --mar-surface-primary: #ffffff;
264
+ --mar-surface-secondary: #f5f5f5;
265
+ --mar-surface-inverse: #000000;
266
+ --mar-surface-brand: #0b57d0;
267
+ --mar-foreground-primary-default: #0b57d0;
268
+ --mar-foreground-primary-hover: #0944a5;
269
+ --mar-foreground-primary-active: #073a8d;
270
+ --mar-foreground-primary-disabled: #f5f5f5;
271
+ --mar-foreground-secondary-default: #ffffff;
272
+ --mar-foreground-secondary-hover: #f0f6fe;
273
+ --mar-foreground-secondary-active: #e2ecfd;
274
+ --mar-foreground-secondary-disabled: #f5f5f5;
275
+ --mar-foreground-tertiary-default: #f0f6fe;
276
+ --mar-foreground-tertiary-hover: #e2ecfd;
277
+ --mar-foreground-tertiary-active: #bbd4fb;
278
+ --mar-foreground-tertiary-disabled: #f5f5f5;
279
+ --mar-foreground-support-success: #ecfef1;
280
+ --mar-foreground-support-warning: #fbf8d5;
281
+ --mar-foreground-support-danger: #fef0f0;
282
+ --mar-foreground-support-info: #ecfdfe;
283
+ --mar-border-primary-default: #0b57d0;
284
+ --mar-border-primary-hover: #0944a5;
285
+ --mar-border-primary-active: #073a8d;
286
+ --mar-border-primary-disabled: #f5f5f5;
287
+ --mar-border-secondary-default: #cfcfcf;
288
+ --mar-border-secondary-hover: #b3b3b3;
289
+ --mar-border-secondary-active: #8c8c8c;
290
+ --mar-border-secondary-disabled: #f5f5f5;
291
+ --mar-border-inverse-default: #ffffff;
292
+ --mar-border-inverse-hover: #f0f6fe;
293
+ --mar-border-inverse-active: #e2ecfd;
294
+ --mar-border-inverse-disabled: #f5f5f5;
295
+ --mar-border-support-success: #0abd40;
296
+ --mar-border-support-warning: #d0c016;
297
+ --mar-border-support-danger: #bd0a0a;
298
+ --mar-border-support-info: #099da5;
299
+ --mar-border-focus-primary: #90b8f9;
300
+ --mar-text-primary: #000000;
301
+ --mar-text-secondary: #303030;
302
+ --mar-text-tertiary: #4e4e4e;
303
+ --mar-text-inverse: #ffffff;
304
+ --mar-text-disabled: #ebebeb;
305
+ --mar-text-support-success: #0abd40;
306
+ --mar-text-support-warning: #d0c016;
307
+ --mar-text-support-danger: #bd0a0a;
308
+ --mar-text-support-info: #099da5;
309
+ --mar-overlays-default-primary: lch(0 0 none / 0.12);
310
+ --mar-overlays-default-secondary: lch(0 0 none / 0.3);
311
+ --mar-overlays-default-tertiary: lch(0 0 none / 0.6);
312
+ --mar-overlays-action-primary: lch(39.123 71.759 284.31 / 0.12);
313
+ --mar-overlays-action-secondary: lch(39.123 71.759 284.31 / 0.3);
314
+ --mar-overlays-action-tertiary: lch(39.123 71.759 284.31 / 0.6);
315
+ --mar-drop-shadow-primary: 0 4px 8px 4px lch(0 0 none / 0.12);
316
+ --mar-fill-brand: #5593f6;
317
+ --mar-fill-primary: #ffffff;
318
+ --mar-fill-secondary: #000000;
319
+ --mar-heading-xxl: 400 36px/44px 'Open Sans';
320
+ --mar-heading-xl: 400 32px/40px 'Open Sans';
321
+ --mar-heading-lg: 400 28px/36px 'Open Sans';
322
+ --mar-heading-md: 400 24px/32px 'Open Sans';
323
+ --mar-heading-sm: 400 20px/28px 'Open Sans';
324
+ --mar-body-lg: 400 18px/24px 'Open Sans';
325
+ --mar-body-md: 400 16px/20px 'Open Sans';
326
+ --mar-body-sm: 400 14px/20px 'Open Sans';
327
+ --mar-label-lg: 500 18px/24px 'Open Sans';
328
+ --mar-label-md: 500 16px/20px 'Open Sans';
329
+ --mar-label-sm: 500 14px/20px 'Open Sans';
330
+ --mar-caption-default: 400 12px/16px 'Open Sans';
331
+ --mar-caption-strong: 700 12px/16px 'Open Sans';
332
+ --mar-button-lg: 700 18px/24px 'Open Sans';
333
+ --mar-button-md: 700 16px/20px 'Open Sans';
334
+ --mar-button-sm: 700 14px/20px 'Open Sans';
335
+ --mar-links-lg: 600 18px/24px 'Open Sans';
336
+ --mar-links-md: 600 16px/20px 'Open Sans';
337
+ --mar-links-sm: 600 14px/20px 'Open Sans';}
package/package.json ADDED
@@ -0,0 +1,27 @@
1
+ {
2
+ "name": "@marsaude/tokens",
3
+ "version": "1.0.0",
4
+ "type": "module",
5
+ "description": "Design Tokens do Sira Design System",
6
+ "publishConfig": {
7
+ "access": "public"
8
+ },
9
+ "files": [
10
+ "build"
11
+ ],
12
+ "exports": {
13
+ ".": "./build/marsaude/tokens/mar-mobile_light-default_primitive.scss",
14
+ "./mobile": "./build/marsaude/tokens/mar-mobile_light-default_primitive.scss",
15
+ "./mobile-classes": "./build/marsaude/tokens/mar-mobile_light-default_primitive-classes.scss",
16
+ "./styles": "./build/marsaude/tokens/mar-mobile_light-default_primitive.scss"
17
+ },
18
+ "scripts": {
19
+ "build": "node build-tokens.js --verbose",
20
+ "publish": "npm publish --access public",
21
+ "prepublishOnly": "npm run build"
22
+ },
23
+ "devDependencies": {
24
+ "@tokens-studio/sd-transforms": "^1.3.0",
25
+ "style-dictionary": "5.0.0-rc.2"
26
+ }
27
+ }