@mild-ui/tokens 0.0.0-stage → 1.2.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/tokens.ts ADDED
@@ -0,0 +1,404 @@
1
+ /**
2
+ * Do not edit directly, this file was auto-generated by @mild-ui/tokens.
3
+ * Source: src/primitives/, src/semantics/, src/components/.
4
+ */
5
+
6
+ export const tokens = {
7
+ "duration": {
8
+ "75": "75ms",
9
+ "100": "100ms",
10
+ "150": "150ms",
11
+ "200": "200ms",
12
+ "300": "300ms",
13
+ "500": "500ms",
14
+ "700": "700ms",
15
+ "1000": "1000ms",
16
+ },
17
+ "easing": {
18
+ "linear": "linear",
19
+ "in": "cubic-bezier(0.4, 0, 1, 1)",
20
+ "out": "cubic-bezier(0, 0, 0.2, 1)",
21
+ "in-out": "cubic-bezier(0.4, 0, 0.2, 1)",
22
+ },
23
+ "breakpoint": {
24
+ "xs": "0",
25
+ "sm": "640px",
26
+ "md": "768px",
27
+ "lg": "1024px",
28
+ "xl": "1280px",
29
+ "2xl": "1536px",
30
+ },
31
+ "color": {
32
+ "blue": {
33
+ "50": "#f0f9ff",
34
+ "100": "#e0f2fe",
35
+ "200": "#bae6fd",
36
+ "300": "#7dd3fc",
37
+ "400": "#38bdf8",
38
+ "500": "#0ea5e9",
39
+ "600": "#0284c7",
40
+ "700": "#0369a1",
41
+ "800": "#075985",
42
+ "900": "#0c4a6e",
43
+ "950": "#082f49",
44
+ },
45
+ "gray": {
46
+ "50": "#f9fafb",
47
+ "100": "#f3f4f6",
48
+ "200": "#e5e7eb",
49
+ "300": "#d1d5db",
50
+ "400": "#9ca3af",
51
+ "500": "#6b7280",
52
+ "600": "#4b5563",
53
+ "700": "#374151",
54
+ "800": "#1f2937",
55
+ "900": "#111827",
56
+ "950": "#030712",
57
+ },
58
+ "red": {
59
+ "50": "#fef2f2",
60
+ "100": "#fee2e2",
61
+ "200": "#fecaca",
62
+ "300": "#fca5a5",
63
+ "400": "#f87171",
64
+ "500": "#ef4444",
65
+ "600": "#dc2626",
66
+ "700": "#b91c1c",
67
+ "800": "#991b1b",
68
+ "900": "#7f1d1d",
69
+ "950": "#450a0a",
70
+ },
71
+ "green": {
72
+ "50": "#f0fdf4",
73
+ "100": "#dcfce7",
74
+ "200": "#bbf7d0",
75
+ "300": "#86efac",
76
+ "400": "#4ade80",
77
+ "500": "#22c55e",
78
+ "600": "#16a34a",
79
+ "700": "#15803d",
80
+ "800": "#166534",
81
+ "900": "#14532d",
82
+ "950": "#052e16",
83
+ },
84
+ "yellow": {
85
+ "50": "#fefce8",
86
+ "100": "#fef9c3",
87
+ "200": "#fef08a",
88
+ "300": "#fde047",
89
+ "400": "#facc15",
90
+ "500": "#eab308",
91
+ "600": "#ca8a04",
92
+ "700": "#a16207",
93
+ "800": "#854d0e",
94
+ "900": "#713f12",
95
+ "950": "#422006",
96
+ },
97
+ "white": "#ffffff",
98
+ "black": "#000000",
99
+ "black-alpha": {
100
+ "0": "rgba(0, 0, 0, 0)",
101
+ "10": "rgba(0, 0, 0, 0.1)",
102
+ "20": "rgba(0, 0, 0, 0.2)",
103
+ "30": "rgba(0, 0, 0, 0.3)",
104
+ "40": "rgba(0, 0, 0, 0.4)",
105
+ "50": "rgba(0, 0, 0, 0.5)",
106
+ "60": "rgba(0, 0, 0, 0.6)",
107
+ "70": "rgba(0, 0, 0, 0.7)",
108
+ "80": "rgba(0, 0, 0, 0.8)",
109
+ "90": "rgba(0, 0, 0, 0.9)",
110
+ },
111
+ "white-alpha": {
112
+ "0": "rgba(255, 255, 255, 0)",
113
+ "10": "rgba(255, 255, 255, 0.1)",
114
+ "20": "rgba(255, 255, 255, 0.2)",
115
+ "30": "rgba(255, 255, 255, 0.3)",
116
+ "40": "rgba(255, 255, 255, 0.4)",
117
+ "50": "rgba(255, 255, 255, 0.5)",
118
+ "60": "rgba(255, 255, 255, 0.6)",
119
+ "70": "rgba(255, 255, 255, 0.7)",
120
+ "80": "rgba(255, 255, 255, 0.8)",
121
+ "90": "rgba(255, 255, 255, 0.9)",
122
+ },
123
+ "primary": {
124
+ "50": "#f0f9ff",
125
+ "100": "#e0f2fe",
126
+ "200": "#bae6fd",
127
+ "300": "#7dd3fc",
128
+ "400": "#38bdf8",
129
+ "500": "#0ea5e9",
130
+ "600": "#0284c7",
131
+ "700": "#0369a1",
132
+ "800": "#075985",
133
+ "900": "#0c4a6e",
134
+ "950": "#082f49",
135
+ },
136
+ "secondary": {
137
+ "50": "#f9fafb",
138
+ "100": "#f3f4f6",
139
+ "200": "#e5e7eb",
140
+ "300": "#d1d5db",
141
+ "400": "#9ca3af",
142
+ "500": "#6b7280",
143
+ "600": "#4b5563",
144
+ "700": "#374151",
145
+ "800": "#1f2937",
146
+ "900": "#111827",
147
+ "950": "#030712",
148
+ },
149
+ "success": {
150
+ "50": "#f0fdf4",
151
+ "100": "#dcfce7",
152
+ "200": "#bbf7d0",
153
+ "300": "#86efac",
154
+ "400": "#4ade80",
155
+ "500": "#22c55e",
156
+ "600": "#16a34a",
157
+ "700": "#15803d",
158
+ "800": "#166534",
159
+ "900": "#14532d",
160
+ "950": "#052e16",
161
+ },
162
+ "warning": {
163
+ "50": "#fefce8",
164
+ "100": "#fef9c3",
165
+ "200": "#fef08a",
166
+ "300": "#fde047",
167
+ "400": "#facc15",
168
+ "500": "#eab308",
169
+ "600": "#ca8a04",
170
+ "700": "#a16207",
171
+ "800": "#854d0e",
172
+ "900": "#713f12",
173
+ "950": "#422006",
174
+ },
175
+ "danger": {
176
+ "50": "#fef2f2",
177
+ "100": "#fee2e2",
178
+ "200": "#fecaca",
179
+ "300": "#fca5a5",
180
+ "400": "#f87171",
181
+ "500": "#ef4444",
182
+ "600": "#dc2626",
183
+ "700": "#b91c1c",
184
+ "800": "#991b1b",
185
+ "900": "#7f1d1d",
186
+ "950": "#450a0a",
187
+ },
188
+ "error": {
189
+ "50": "#fef2f2",
190
+ "100": "#fee2e2",
191
+ "200": "#fecaca",
192
+ "300": "#fca5a5",
193
+ "400": "#f87171",
194
+ "500": "#ef4444",
195
+ "600": "#dc2626",
196
+ "700": "#b91c1c",
197
+ "800": "#991b1b",
198
+ "900": "#7f1d1d",
199
+ "950": "#450a0a",
200
+ },
201
+ "accent": "#0ea5e9",
202
+ "accent-hover": "#0284c7",
203
+ "accent-active": "#0369a1",
204
+ "accent-foreground": "#ffffff",
205
+ "accent-soft": "#7dd3fc",
206
+ "accent-subtle": "#f0f9ff",
207
+ "accent-muted": "#e0f2fe",
208
+ },
209
+ "dimension": {
210
+ "full": "100%",
211
+ "1-2": "50%",
212
+ "1-3": "33.333333%",
213
+ "2-3": "66.666667%",
214
+ "1-4": "25%",
215
+ "3-4": "75%",
216
+ "1-5": "20%",
217
+ "2-5": "40%",
218
+ "3-5": "60%",
219
+ "4-5": "80%",
220
+ "1-6": "16.666667%",
221
+ "5-6": "83.333333%",
222
+ "1-7": "14.285714%",
223
+ "2-7": "28.571429%",
224
+ "3-7": "42.857143%",
225
+ "4-7": "57.142857%",
226
+ "5-7": "71.428571%",
227
+ "6-7": "85.714286%",
228
+ "1-8": "12.5%",
229
+ "3-8": "37.5%",
230
+ "5-8": "62.5%",
231
+ "7-8": "87.5%",
232
+ "1-9": "11.111111%",
233
+ "2-9": "22.222222%",
234
+ "4-9": "44.444444%",
235
+ "5-9": "55.555556%",
236
+ "7-9": "77.777778%",
237
+ "8-9": "88.888889%",
238
+ "1-10": "10%",
239
+ "3-10": "30%",
240
+ "7-10": "70%",
241
+ "9-10": "90%",
242
+ "1-11": "9.090909%",
243
+ "2-11": "18.181818%",
244
+ "3-11": "27.272727%",
245
+ "4-11": "36.363636%",
246
+ "5-11": "45.454545%",
247
+ "6-11": "54.545455%",
248
+ "7-11": "63.636364%",
249
+ "8-11": "72.727273%",
250
+ "9-11": "81.818182%",
251
+ "10-11": "90.909091%",
252
+ "1-12": "8.333333%",
253
+ "5-12": "41.666667%",
254
+ "7-12": "58.333333%",
255
+ "11-12": "91.666667%",
256
+ },
257
+ "shadow": {
258
+ "xs": "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
259
+ "sm": "0 1px 2px 0 rgba(0, 0, 0, 0.05), 0 1px 3px 0 rgba(0, 0, 0, 0.1)",
260
+ "base": "0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)",
261
+ "md": "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",
262
+ "lg": "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)",
263
+ "xl": "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)",
264
+ "2xl": "0 25px 50px -12px rgba(0, 0, 0, 0.25)",
265
+ "inner": "inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)",
266
+ "none": "none",
267
+ },
268
+ "radius": {
269
+ "none": "0px",
270
+ "sm": "0.125rem",
271
+ "base": "0.25rem",
272
+ "md": "0.375rem",
273
+ "lg": "0.5rem",
274
+ "xl": "0.75rem",
275
+ "2xl": "1rem",
276
+ "3xl": "1.5rem",
277
+ "full": "9999px",
278
+ },
279
+ "space-base": "0.25rem",
280
+ "space": {
281
+ "0": "0px",
282
+ "1": "0.25rem",
283
+ "2": "0.5rem",
284
+ "3": "0.75rem",
285
+ "4": "1rem",
286
+ "5": "1.25rem",
287
+ "6": "1.5rem",
288
+ "7": "1.75rem",
289
+ "8": "2rem",
290
+ "9": "2.25rem",
291
+ "10": "2.5rem",
292
+ "11": "2.75rem",
293
+ "12": "3rem",
294
+ "14": "3.5rem",
295
+ "16": "4rem",
296
+ "20": "5rem",
297
+ "24": "6rem",
298
+ "28": "7rem",
299
+ "32": "8rem",
300
+ "36": "9rem",
301
+ "40": "10rem",
302
+ "44": "11rem",
303
+ "48": "12rem",
304
+ "52": "13rem",
305
+ "56": "14rem",
306
+ "60": "15rem",
307
+ "64": "16rem",
308
+ "72": "18rem",
309
+ "80": "20rem",
310
+ "96": "24rem",
311
+ "px": "1px",
312
+ "0-5": "0.125rem",
313
+ "1-5": "0.375rem",
314
+ "2-5": "0.625rem",
315
+ "3-5": "0.875rem",
316
+ },
317
+ "font": {
318
+ "family": {
319
+ "sans": [
320
+ "Inter",
321
+ "-apple-system",
322
+ "BlinkMacSystemFont",
323
+ "Segoe UI",
324
+ "Roboto",
325
+ "Helvetica Neue",
326
+ "Arial",
327
+ "Noto Sans",
328
+ "sans-serif",
329
+ "Apple Color Emoji",
330
+ "Segoe UI Emoji",
331
+ "Segoe UI Symbol",
332
+ "Noto Color Emoji",
333
+ ],
334
+ "serif": ["Georgia","Cambria","Times New Roman","Times","serif"],
335
+ "mono": [
336
+ "JetBrains Mono",
337
+ "SF Mono",
338
+ "Monaco",
339
+ "Inconsolata",
340
+ "Roboto Mono",
341
+ "source-code-pro",
342
+ "Menlo",
343
+ "Consolas",
344
+ "DejaVu Sans Mono",
345
+ "monospace",
346
+ ],
347
+ },
348
+ "size": {
349
+ "xs": "0.75rem",
350
+ "sm": "0.875rem",
351
+ "base": "1rem",
352
+ "lg": "1.125rem",
353
+ "xl": "1.25rem",
354
+ "2xl": "1.5rem",
355
+ "3xl": "1.875rem",
356
+ "4xl": "2.25rem",
357
+ "5xl": "3rem",
358
+ "6xl": "3.75rem",
359
+ "7xl": "4.5rem",
360
+ "8xl": "6rem",
361
+ "9xl": "8rem",
362
+ },
363
+ "weight": {
364
+ "thin": 100,
365
+ "extralight": 200,
366
+ "light": 300,
367
+ "normal": 400,
368
+ "medium": 500,
369
+ "semibold": 600,
370
+ "bold": 700,
371
+ "extrabold": 800,
372
+ "black": 900,
373
+ },
374
+ },
375
+ "line-height": {
376
+ "none": 1,
377
+ "tight": 1.25,
378
+ "snug": 1.375,
379
+ "normal": 1.5,
380
+ "relaxed": 1.625,
381
+ "loose": 2,
382
+ },
383
+ "letter-spacing": {
384
+ "tighter": "-0.05em",
385
+ "tight": "-0.025em",
386
+ "normal": "0em",
387
+ "wide": "0.025em",
388
+ "wider": "0.05em",
389
+ "widest": "0.1em",
390
+ },
391
+ "transition": {
392
+ "none": "none",
393
+ "all": "all 150ms cubic-bezier(0.4, 0, 0.2, 1)",
394
+ "default": "all 150ms cubic-bezier(0.4, 0, 0.2, 1)",
395
+ "colors": "color 150ms cubic-bezier(0.4, 0, 0.2, 1)",
396
+ "opacity": "opacity 150ms cubic-bezier(0.4, 0, 0.2, 1)",
397
+ "shadow": "box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1)",
398
+ "transform": "transform 150ms cubic-bezier(0.4, 0, 0.2, 1)",
399
+ },
400
+ } as const;
401
+
402
+ export type MildTokens = typeof tokens;
403
+
404
+ export default tokens;
package/package.json CHANGED
@@ -1,6 +1,59 @@
1
1
  {
2
2
  "name": "@mild-ui/tokens",
3
- "version": "0.0.0-stage",
4
- "stub": true,
5
- "description": "Temporary package placeholder for staged publishing"
3
+ "version": "1.2.0",
4
+ "description": "Design tokens for mild-ui as JSON: primitives, semantics and component tokens",
5
+ "keywords": [
6
+ "design-tokens",
7
+ "tokens",
8
+ "json",
9
+ "design-system",
10
+ "mild-ui"
11
+ ],
12
+ "homepage": "https://github.com/CodeWithRiyan/mild-ui/tree/main/packages/tokens#readme",
13
+ "bugs": {
14
+ "url": "https://github.com/CodeWithRiyan/mild-ui/issues"
15
+ },
16
+ "repository": {
17
+ "type": "git",
18
+ "url": "git+https://github.com/CodeWithRiyan/mild-ui.git",
19
+ "directory": "packages/tokens"
20
+ },
21
+ "license": "MIT",
22
+ "author": "Muhamad Riyan (https://github.com/CodeWithRiyan)",
23
+ "type": "module",
24
+ "sideEffects": false,
25
+ "files": [
26
+ "src/**/*.json",
27
+ "dist/"
28
+ ],
29
+ "exports": {
30
+ "./primitives/*": "./src/primitives/*.json",
31
+ "./semantics/*": "./src/semantics/*.json",
32
+ "./css": "./dist/tokens.css",
33
+ "./tokens.css": "./dist/tokens.css",
34
+ "./scss": "./dist/_tokens.scss",
35
+ "./json": "./dist/tokens.json",
36
+ "./tokens.json": "./dist/tokens.json",
37
+ "./ts": {
38
+ "types": "./dist/tokens.ts",
39
+ "default": "./dist/tokens.ts"
40
+ },
41
+ "./package.json": "./package.json"
42
+ },
43
+ "devDependencies": {
44
+ "rimraf": "^5.0.10",
45
+ "style-dictionary": "^4.4.0",
46
+ "tsx": "^4.23.15"
47
+ },
48
+ "engines": {
49
+ "node": "^20.0.0 || ^22.0.0 || >=24.0.0"
50
+ },
51
+ "publishConfig": {
52
+ "access": "public"
53
+ },
54
+ "scripts": {
55
+ "build": "style-dictionary build --config style-dictionary.config.mjs",
56
+ "clean": "rimraf dist",
57
+ "test": "tsx scripts/check-contrast.ts"
58
+ }
6
59
  }
@@ -0,0 +1,21 @@
1
+ {
2
+ "duration": {
3
+ "$description": "Source: $mild-durations.",
4
+ "$type": "duration",
5
+ "75": { "$value": "75ms" },
6
+ "100": { "$value": "100ms" },
7
+ "150": { "$value": "150ms" },
8
+ "200": { "$value": "200ms" },
9
+ "300": { "$value": "300ms" },
10
+ "500": { "$value": "500ms" },
11
+ "700": { "$value": "700ms" },
12
+ "1000": { "$value": "1000ms" }
13
+ },
14
+ "easing": {
15
+ "$description": "Timing functions as CSS values. Source: $mild-easings.",
16
+ "linear": { "$value": "linear" },
17
+ "in": { "$value": "cubic-bezier(0.4, 0, 1, 1)" },
18
+ "out": { "$value": "cubic-bezier(0, 0, 0.2, 1)" },
19
+ "in-out": { "$value": "cubic-bezier(0.4, 0, 0.2, 1)" }
20
+ }
21
+ }
@@ -0,0 +1,12 @@
1
+ {
2
+ "breakpoint": {
3
+ "$description": "Min-width breakpoints. Source: $mild-breakpoints.",
4
+ "$type": "dimension",
5
+ "xs": { "$value": "0" },
6
+ "sm": { "$value": "640px" },
7
+ "md": { "$value": "768px" },
8
+ "lg": { "$value": "1024px" },
9
+ "xl": { "$value": "1280px" },
10
+ "2xl": { "$value": "1536px" }
11
+ }
12
+ }