@youcan/celeste-tokens 0.6.85 → 0.6.87

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/preset.ts ADDED
@@ -0,0 +1,430 @@
1
+ import { definePreset, type Preset } from 'unocss';
2
+
3
+ export interface CelestePresetOptions {
4
+ // placeholder
5
+ }
6
+
7
+ export const presetCeleste = definePreset((options: CelestePresetOptions = {}): Preset => {
8
+ return {
9
+ "name": "presetCeleste",
10
+ "theme": {
11
+ "colors": {
12
+ "white": {
13
+ "alpha-24": "rgba(255, 255, 255, 0.24)",
14
+ "alpha-16": "rgba(255, 255, 255, 0.16)",
15
+ "alpha-10": "rgba(255, 255, 255, 0.1)"
16
+ },
17
+ "black": {
18
+ "alpha-24": "rgba(23, 23, 23, 0.24)",
19
+ "alpha-16": "rgba(23, 23, 23, 0.16)",
20
+ "alpha-10": "rgba(23, 23, 23, 0.1)"
21
+ },
22
+ "neutral": {
23
+ "0": "#ffffff",
24
+ "50": "#f7f7f7",
25
+ "100": "#f5f5f5",
26
+ "200": "#ebebeb",
27
+ "300": "#d1d1d1",
28
+ "400": "#a3a3a3",
29
+ "500": "#7b7b7b",
30
+ "600": "#5c5c5c",
31
+ "700": "#333333",
32
+ "800": "#292929",
33
+ "900": "#1c1c1c",
34
+ "950": "#171717",
35
+ "alpha-10": "rgba(163, 163, 163, 0.1)",
36
+ "alpha-16": "rgba(163, 163, 163, 0.16)",
37
+ "alpha-24": "rgba(163, 163, 163, 0.24)"
38
+ },
39
+ "red": {
40
+ "50": "#ffebec",
41
+ "100": "#ffd5d8",
42
+ "200": "#ffc0c5",
43
+ "300": "#ff97a0",
44
+ "400": "#ff6875",
45
+ "500": "#fb3748",
46
+ "600": "#e93544",
47
+ "700": "#d02533",
48
+ "800": "#ad1f2b",
49
+ "900": "#8b1822",
50
+ "950": "#681219",
51
+ "alpha-10": "rgba(251, 55, 72, 0.1)",
52
+ "alpha-16": "rgba(251, 55, 72, 0.16)",
53
+ "alpha-24": "rgba(251, 55, 72, 0.24)"
54
+ },
55
+ "orange": {
56
+ "50": "#fff1eb",
57
+ "100": "#ffe3d5",
58
+ "200": "#ffd5c0",
59
+ "300": "#ffba97",
60
+ "400": "#ff9a68",
61
+ "500": "#ff8447",
62
+ "600": "#e97135",
63
+ "700": "#d05e25",
64
+ "800": "#ad4e1f",
65
+ "900": "#8b3e18",
66
+ "950": "#682f12",
67
+ "alpha-10": "rgba(255, 145, 71, 0.1)",
68
+ "alpha-16": "rgba(255, 145, 71, 0.16)",
69
+ "alpha-24": "rgba(255, 145, 71, 0.24)"
70
+ },
71
+ "yellow": {
72
+ "50": "#fffaeb",
73
+ "100": "#ffefcc",
74
+ "200": "#ffecc0",
75
+ "300": "#ffe097",
76
+ "400": "#ffd268",
77
+ "500": "#f6b51e",
78
+ "600": "#e6a819",
79
+ "700": "#c99a2c",
80
+ "800": "#a78025",
81
+ "900": "#86661d",
82
+ "950": "#624c18",
83
+ "alpha-10": "rgba(251, 198, 75, 0.1)",
84
+ "alpha-16": "rgba(251, 198, 75, 0.16)",
85
+ "alpha-24": "rgba(251, 198, 75, 0.24)"
86
+ },
87
+ "green": {
88
+ "50": "#e0faec",
89
+ "100": "#d0fbe9",
90
+ "200": "#c2f5da",
91
+ "300": "#84ebb4",
92
+ "400": "#3ee089",
93
+ "500": "#1fc16b",
94
+ "600": "#1daf61",
95
+ "700": "#178c4e",
96
+ "800": "#1a7544",
97
+ "900": "#16643b",
98
+ "950": "#0b4627",
99
+ "alpha-10": "rgba(31, 193, 107, 0.1)",
100
+ "alpha-16": "rgba(31, 193, 107, 0.16)",
101
+ "alpha-24": "rgba(31, 193, 107, 0.24)"
102
+ },
103
+ "teal": {
104
+ "50": "#e4fbf8",
105
+ "100": "#d0fbf5",
106
+ "200": "#c2f5ee",
107
+ "300": "#84ebdd",
108
+ "400": "#3fdec9",
109
+ "500": "#22d3bb",
110
+ "600": "#1daf9c",
111
+ "700": "#178c7d",
112
+ "800": "#1a7569",
113
+ "900": "#16645a",
114
+ "950": "#0b463e",
115
+ "alpha-10": "rgba(34, 211, 187, 0.1)",
116
+ "alpha-16": "rgba(34, 211, 187, 0.16)",
117
+ "alpha-24": "rgba(34, 211, 187, 0.24)"
118
+ },
119
+ "sky": {
120
+ "50": "#ebf8ff",
121
+ "100": "#d5f1ff",
122
+ "200": "#c0eaff",
123
+ "300": "#97dcff",
124
+ "400": "#68cdff",
125
+ "500": "#47c2ff",
126
+ "600": "#35ade9",
127
+ "700": "#2597d0",
128
+ "800": "#1f7ead",
129
+ "900": "#18658b",
130
+ "950": "#124b68",
131
+ "alpha-10": "rgba(71, 194, 255, 0.1)",
132
+ "alpha-16": "rgba(71, 194, 255, 0.16)",
133
+ "alpha-24": "rgba(71, 194, 255, 0.24)"
134
+ },
135
+ "blue": {
136
+ "50": "#ebf1ff",
137
+ "100": "#d5e2ff",
138
+ "200": "#c0d5ff",
139
+ "300": "#97baff",
140
+ "400": "#6895ff",
141
+ "500": "#335cff",
142
+ "600": "#3559e9",
143
+ "700": "#2547d0",
144
+ "800": "#1f3bad",
145
+ "900": "#182f8b",
146
+ "950": "#122368",
147
+ "alpha-10": "rgba(71, 108, 255, 0.1)",
148
+ "alpha-16": "rgba(71, 108, 255, 0.16)",
149
+ "alpha-24": "rgba(71, 108, 255, 0.24)"
150
+ },
151
+ "purple": {
152
+ "50": "#efebff",
153
+ "100": "#dcd5ff",
154
+ "200": "#cac0ff",
155
+ "300": "#a897ff",
156
+ "400": "#8c71f6",
157
+ "500": "#7d52f4",
158
+ "600": "#693ee0",
159
+ "700": "#5b2cc9",
160
+ "800": "#4c25a7",
161
+ "900": "#3d1d86",
162
+ "950": "#351a75",
163
+ "alpha-10": "rgba(120, 77, 239, 0.1)",
164
+ "alpha-16": "rgba(120, 77, 239, 0.16)",
165
+ "alpha-24": "rgba(120, 77, 239, 0.24)"
166
+ },
167
+ "pink": {
168
+ "50": "#ffebf4",
169
+ "100": "#ffd5ea",
170
+ "200": "#ffc0df",
171
+ "300": "#ff97cb",
172
+ "400": "#ff68b3",
173
+ "500": "#fb4ba3",
174
+ "600": "#e9358f",
175
+ "700": "#d0257a",
176
+ "800": "#ad1f66",
177
+ "900": "#8b1852",
178
+ "950": "#68123d",
179
+ "alpha-10": "rgba(251, 75, 163, 0.1)",
180
+ "alpha-16": "rgba(251, 75, 163, 0.16)",
181
+ "alpha-24": "rgba(251, 75, 163, 0.24)"
182
+ },
183
+ "brand": {
184
+ "50": "#ffebf4",
185
+ "100": "#ffd6e9",
186
+ "200": "#ffc2dd",
187
+ "300": "#ff99c7",
188
+ "400": "#ff66ab",
189
+ "500": "#e1116f",
190
+ "600": "#cb0f64",
191
+ "700": "#b40e59",
192
+ "800": "#9e0c4e",
193
+ "900": "#870a43",
194
+ "950": "#681239"
195
+ },
196
+ "static": {
197
+ "white": "#ffffff",
198
+ "black": "#171717"
199
+ },
200
+ "bg": {
201
+ "white-0": "#ffffff",
202
+ "weak-50": "#f7f7f7",
203
+ "strong-950": "#171717",
204
+ "surface-800": "#292929",
205
+ "soft-200": "#ebebeb",
206
+ "sub-300": "#d1d1d1"
207
+ },
208
+ "state": {
209
+ "faded": {
210
+ "light": "#ebebeb",
211
+ "base": "#7b7b7b",
212
+ "dark": "#292929",
213
+ "lighter": "#f5f5f5"
214
+ },
215
+ "error": {
216
+ "base": "#fb3748",
217
+ "light": "#ffc0c5",
218
+ "dark": "#681219",
219
+ "lighter": "#ffebec"
220
+ },
221
+ "warning": {
222
+ "dark": "#682f12",
223
+ "base": "#ff8447",
224
+ "light": "#ffd5c0",
225
+ "lighter": "#fff1eb"
226
+ },
227
+ "information": {
228
+ "dark": "#122368",
229
+ "base": "#335cff",
230
+ "light": "#c0d5ff",
231
+ "lighter": "#ebf1ff"
232
+ },
233
+ "success": {
234
+ "dark": "#0b4627",
235
+ "base": "#1fc16b",
236
+ "light": "#c2f5da",
237
+ "lighter": "#e0faec"
238
+ },
239
+ "away": {
240
+ "dark": "#624c18",
241
+ "base": "#f6b51e",
242
+ "light": "#ffecc0",
243
+ "lighter": "#fffaeb"
244
+ },
245
+ "feature": {
246
+ "dark": "#351a75",
247
+ "base": "#7d52f4",
248
+ "light": "#cac0ff",
249
+ "lighter": "#efebff"
250
+ },
251
+ "verified": {
252
+ "dark": "#124b68",
253
+ "base": "#47c2ff",
254
+ "light": "#c0eaff",
255
+ "lighter": "#ebf8ff"
256
+ },
257
+ "highlighted": {
258
+ "dark": "#68123d",
259
+ "base": "#fb4ba3",
260
+ "light": "#ffc0df",
261
+ "lighter": "#ffebf4"
262
+ },
263
+ "stable": {
264
+ "dark": "#0b463e",
265
+ "base": "#22d3bb",
266
+ "light": "#c2f5ee",
267
+ "lighter": "#e4fbf8"
268
+ }
269
+ },
270
+ "text": {
271
+ "strong-950": "#171717",
272
+ "sub-600": "#5c5c5c",
273
+ "disabled-300": "#d1d1d1",
274
+ "white-0": "#ffffff",
275
+ "soft-400": "#a3a3a3"
276
+ },
277
+ "stroke": {
278
+ "soft-200": "#ebebeb",
279
+ "strong-950": "#171717",
280
+ "white-0": "#ffffff",
281
+ "sub-300": "#d1d1d1"
282
+ },
283
+ "icon": {
284
+ "sub-600": "#5c5c5c",
285
+ "strong-950": "#171717",
286
+ "soft-400": "#a3a3a3",
287
+ "disabled-300": "#d1d1d1",
288
+ "white-0": "#ffffff"
289
+ },
290
+ "social": {
291
+ "apple": "#000000",
292
+ "twitter": "#010101",
293
+ "github": "#24292f",
294
+ "notion": "#1e2226",
295
+ "tidal": "#000000",
296
+ "amazon": "#353e47",
297
+ "zendesk": "#16140d"
298
+ },
299
+ "illustration": {
300
+ "strong-400": "#a3a3a3",
301
+ "sub-300": "#d1d1d1",
302
+ "soft-200": "#ebebeb",
303
+ "weak-100": "#f5f5f5",
304
+ "white-0": "#ffffff"
305
+ },
306
+ "overlay": {
307
+ "overlay": "rgba(2, 13, 23, 0.24)"
308
+ },
309
+ "primary-base": "#e1116f",
310
+ "primary-darker": "#b40e59",
311
+ "primary-alpha-10": "rgba(251, 75, 163, 0.1)",
312
+ "primary-alpha-16": "rgba(251, 75, 163, 0.16)",
313
+ "primary-dark": "#cb0f64",
314
+ "primary-alpha-24": "rgba(251, 75, 163, 0.24)"
315
+ },
316
+ "fontFamily": {
317
+ "inter-display": "InterDisplay",
318
+ "inter": "InterVariable",
319
+ "cairo": "Cairo",
320
+ "geist-mono": "'Geist Mono'",
321
+ "sans": "InterVariable, Cairo, sans-serif",
322
+ "mono": "'Geist Mono', monospace",
323
+ "display": "InterDisplay, Cairo, sans-serif"
324
+ },
325
+ "fontSize": {},
326
+ "fontWeight": {
327
+ "display-0": 500,
328
+ "sans-0": 400,
329
+ "sans-1": 500
330
+ },
331
+ "lineHeight": {
332
+ "0": "64px",
333
+ "1": "56px",
334
+ "2": "48px",
335
+ "3": "40px",
336
+ "4": "32px",
337
+ "5": "28px",
338
+ "6": "24px",
339
+ "7": "20px",
340
+ "8": "16px",
341
+ "9": "12px"
342
+ },
343
+ "letterSpacing": {
344
+ "0": "-0.01em",
345
+ "1": "-0.005em",
346
+ "2": "0em",
347
+ "3": "-0.015em",
348
+ "4": "-0.011000000000000001em",
349
+ "5": "-0.006em",
350
+ "6": "0.06em",
351
+ "7": "0.04em",
352
+ "8": "0.02em"
353
+ },
354
+ "borderRadius": {
355
+ "4": "4px",
356
+ "6": "6px",
357
+ "8": "8px",
358
+ "10": "10px",
359
+ "12": "12px",
360
+ "16": "16px",
361
+ "20": "20px",
362
+ "24": "24px",
363
+ "full": "999px"
364
+ },
365
+ "boxShadow": {
366
+ "regular": {
367
+ "xs": "0 1px 2px 0 #0a0d1408",
368
+ "md": "0 16px 32px -12px #0e121b1a"
369
+ },
370
+ "buttons": {
371
+ "primary-focus": "0 0 0 2px #ffffff, 0 0 0 4px #fb4ba31a",
372
+ "important-focus": "0 0 0 2px #ffffff, 0 0 0 4px #99a0ae29",
373
+ "error-focus": "0 0 0 2px #ffffff, 0 0 0 4px #fb37481a"
374
+ },
375
+ "fancy-buttons": {
376
+ "neutral": "0 1px 2px 0 #1b1c1d7a, 0 0 0 1px #242628",
377
+ "primary": "0 1px 2px 0 #0e121b3d, 0 0 0 1px #e1116f",
378
+ "error": "0 1px 2px 0 #0e121b3d, 0 0 0 1px #fb3748",
379
+ "stroke": "0 1px 3px 0 #0e121b1f, 0 0 0 1px #e1e4ea"
380
+ },
381
+ "toggle": {
382
+ "switch": "0 6px 10px 0 #0e121b0f, 0 2px 4px 0 #0e121b08"
383
+ }
384
+ },
385
+ "spacing": {
386
+ "0": "0",
387
+ "2": "2px",
388
+ "4": "4px",
389
+ "6": "6px",
390
+ "8": "8px",
391
+ "10": "10px",
392
+ "12": "12px",
393
+ "14": "14px",
394
+ "16": "16px",
395
+ "48": "48px"
396
+ },
397
+ "duration": {
398
+ "extra-fast": "100ms",
399
+ "fast": "200ms",
400
+ "normal": "300ms",
401
+ "slow": "400ms",
402
+ "extra-slow": "500ms"
403
+ }
404
+ },
405
+ "shortcuts": {
406
+ "title-h1-title": "[font:var(--title-h1-title)]",
407
+ "title-h2-title": "[font:var(--title-h2-title)]",
408
+ "title-h3-title": "[font:var(--title-h3-title)]",
409
+ "title-h4-title": "[font:var(--title-h4-title)]",
410
+ "title-h5-title": "[font:var(--title-h5-title)]",
411
+ "title-h6-title": "[font:var(--title-h6-title)]",
412
+ "label-xl": "[font:var(--label-xl)]",
413
+ "label-lg": "[font:var(--label-lg)]",
414
+ "label-md": "[font:var(--label-md)]",
415
+ "label-sm": "[font:var(--label-sm)]",
416
+ "label-xs": "[font:var(--label-xs)]",
417
+ "paragraph-xl": "[font:var(--paragraph-xl)]",
418
+ "paragraph-lg": "[font:var(--paragraph-lg)]",
419
+ "paragraph-md": "[font:var(--paragraph-md)]",
420
+ "paragraph-sm": "[font:var(--paragraph-sm)]",
421
+ "paragraph-xs": "[font:var(--paragraph-xs)]",
422
+ "subheading-md": "[font:var(--subheading-md)]",
423
+ "subheading-sm": "[font:var(--subheading-sm)]",
424
+ "subheading-xs": "[font:var(--subheading-xs)]",
425
+ "subheading-xxs": "[font:var(--subheading-xxs)]",
426
+ "docs-label": "[font:var(--docs-label)]",
427
+ "docs-paragraph": "[font:var(--docs-paragraph)]"
428
+ }
429
+ };
430
+ });
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@youcan/celeste-tokens",
3
3
  "type": "module",
4
- "version": "0.6.85",
4
+ "version": "0.6.87",
5
5
  "author": "YouCan <tech@youcan.shop>",
6
6
  "repository": {
7
7
  "type": "git",
@@ -17,6 +17,9 @@
17
17
  },
18
18
  "./tokens.scss": {
19
19
  "import": "./dist/tokens.scss"
20
+ },
21
+ "./preset": {
22
+ "import": "./dist/preset.ts"
20
23
  }
21
24
  },
22
25
  "engines": {
@@ -26,7 +29,8 @@
26
29
  "@tokens-studio/sd-transforms": "^1.2.9",
27
30
  "csso": "^5.0.5",
28
31
  "style-dictionary": "^4.3.0",
29
- "tsx": "^4.19.2"
32
+ "tsx": "^4.19.2",
33
+ "unocss": "^66.5.9"
30
34
  },
31
35
  "scripts": {
32
36
  "build": "pnpm generate",
package/src/generate.ts CHANGED
@@ -77,7 +77,7 @@ const sd = new StyleDictionary({
77
77
  buildPath: dist,
78
78
  files: [
79
79
  {
80
- destination: 'theme.json',
80
+ destination: 'preset.ts',
81
81
  format: 'unocss',
82
82
  },
83
83
  ],
@@ -1,15 +1,18 @@
1
1
  export function unocssFormat({ dictionary }: { dictionary: any }): string {
2
- const theme: Record<string, any> = {
3
- colors: {},
4
- fontFamily: {},
5
- fontSize: {},
6
- fontWeight: {},
7
- lineHeight: {},
8
- letterSpacing: {},
9
- borderRadius: {},
10
- boxShadow: {},
11
- spacing: {},
12
- duration: {},
2
+ const preset: Record<string, any> = {
3
+ name: 'presetCeleste',
4
+ theme: {
5
+ colors: {},
6
+ fontFamily: {},
7
+ fontSize: {},
8
+ fontWeight: {},
9
+ lineHeight: {},
10
+ letterSpacing: {},
11
+ borderRadius: {},
12
+ boxShadow: {},
13
+ spacing: {},
14
+ duration: {},
15
+ },
13
16
  shortcuts: {},
14
17
  };
15
18
 
@@ -39,7 +42,7 @@ export function unocssFormat({ dictionary }: { dictionary: any }): string {
39
42
  duration: 'duration',
40
43
  };
41
44
 
42
- dictionary.allTokens.forEach((token) => {
45
+ dictionary.allTokens.forEach((token: any) => {
43
46
  const { path, value, type, $type, name } = token;
44
47
  const val = value ?? token.$value;
45
48
  const root = path[0];
@@ -51,7 +54,7 @@ export function unocssFormat({ dictionary }: { dictionary: any }): string {
51
54
  if ($type === 'typography' || type === 'typography' || root === 'typography') {
52
55
  const shortcutName = name;
53
56
  if (shortcutName) {
54
- theme.shortcuts[shortcutName] = `[font:var(--${shortcutName})]`;
57
+ preset.shortcuts[shortcutName] = `[font:var(--${shortcutName})]`;
55
58
  }
56
59
  return;
57
60
  }
@@ -78,9 +81,18 @@ export function unocssFormat({ dictionary }: { dictionary: any }): string {
78
81
  }
79
82
  }
80
83
 
81
- set(theme[themeKey], subPath, finalValue);
84
+ set(preset.theme[themeKey], subPath, finalValue);
82
85
  }
83
86
  });
84
87
 
85
- return JSON.stringify(theme, null, 2);
88
+ return `import { definePreset, type Preset } from 'unocss';
89
+
90
+ export interface CelestePresetOptions {
91
+ // placeholder
92
+ }
93
+
94
+ export const presetCeleste = definePreset((options: CelestePresetOptions = {}): Preset => {
95
+ return ${JSON.stringify(preset, null, 2)};
96
+ });
97
+ `;
86
98
  }
package/dist/theme.json DELETED
@@ -1,419 +0,0 @@
1
- {
2
- "colors": {
3
- "white": {
4
- "alpha-24": "rgba(255, 255, 255, 0.24)",
5
- "alpha-16": "rgba(255, 255, 255, 0.16)",
6
- "alpha-10": "rgba(255, 255, 255, 0.1)"
7
- },
8
- "black": {
9
- "alpha-24": "rgba(23, 23, 23, 0.24)",
10
- "alpha-16": "rgba(23, 23, 23, 0.16)",
11
- "alpha-10": "rgba(23, 23, 23, 0.1)"
12
- },
13
- "neutral": {
14
- "0": "#ffffff",
15
- "50": "#f7f7f7",
16
- "100": "#f5f5f5",
17
- "200": "#ebebeb",
18
- "300": "#d1d1d1",
19
- "400": "#a3a3a3",
20
- "500": "#7b7b7b",
21
- "600": "#5c5c5c",
22
- "700": "#333333",
23
- "800": "#292929",
24
- "900": "#1c1c1c",
25
- "950": "#171717",
26
- "alpha-10": "rgba(163, 163, 163, 0.1)",
27
- "alpha-16": "rgba(163, 163, 163, 0.16)",
28
- "alpha-24": "rgba(163, 163, 163, 0.24)"
29
- },
30
- "red": {
31
- "50": "#ffebec",
32
- "100": "#ffd5d8",
33
- "200": "#ffc0c5",
34
- "300": "#ff97a0",
35
- "400": "#ff6875",
36
- "500": "#fb3748",
37
- "600": "#e93544",
38
- "700": "#d02533",
39
- "800": "#ad1f2b",
40
- "900": "#8b1822",
41
- "950": "#681219",
42
- "alpha-10": "rgba(251, 55, 72, 0.1)",
43
- "alpha-16": "rgba(251, 55, 72, 0.16)",
44
- "alpha-24": "rgba(251, 55, 72, 0.24)"
45
- },
46
- "orange": {
47
- "50": "#fff1eb",
48
- "100": "#ffe3d5",
49
- "200": "#ffd5c0",
50
- "300": "#ffba97",
51
- "400": "#ff9a68",
52
- "500": "#ff8447",
53
- "600": "#e97135",
54
- "700": "#d05e25",
55
- "800": "#ad4e1f",
56
- "900": "#8b3e18",
57
- "950": "#682f12",
58
- "alpha-10": "rgba(255, 145, 71, 0.1)",
59
- "alpha-16": "rgba(255, 145, 71, 0.16)",
60
- "alpha-24": "rgba(255, 145, 71, 0.24)"
61
- },
62
- "yellow": {
63
- "50": "#fffaeb",
64
- "100": "#ffefcc",
65
- "200": "#ffecc0",
66
- "300": "#ffe097",
67
- "400": "#ffd268",
68
- "500": "#f6b51e",
69
- "600": "#e6a819",
70
- "700": "#c99a2c",
71
- "800": "#a78025",
72
- "900": "#86661d",
73
- "950": "#624c18",
74
- "alpha-10": "rgba(251, 198, 75, 0.1)",
75
- "alpha-16": "rgba(251, 198, 75, 0.16)",
76
- "alpha-24": "rgba(251, 198, 75, 0.24)"
77
- },
78
- "green": {
79
- "50": "#e0faec",
80
- "100": "#d0fbe9",
81
- "200": "#c2f5da",
82
- "300": "#84ebb4",
83
- "400": "#3ee089",
84
- "500": "#1fc16b",
85
- "600": "#1daf61",
86
- "700": "#178c4e",
87
- "800": "#1a7544",
88
- "900": "#16643b",
89
- "950": "#0b4627",
90
- "alpha-10": "rgba(31, 193, 107, 0.1)",
91
- "alpha-16": "rgba(31, 193, 107, 0.16)",
92
- "alpha-24": "rgba(31, 193, 107, 0.24)"
93
- },
94
- "teal": {
95
- "50": "#e4fbf8",
96
- "100": "#d0fbf5",
97
- "200": "#c2f5ee",
98
- "300": "#84ebdd",
99
- "400": "#3fdec9",
100
- "500": "#22d3bb",
101
- "600": "#1daf9c",
102
- "700": "#178c7d",
103
- "800": "#1a7569",
104
- "900": "#16645a",
105
- "950": "#0b463e",
106
- "alpha-10": "rgba(34, 211, 187, 0.1)",
107
- "alpha-16": "rgba(34, 211, 187, 0.16)",
108
- "alpha-24": "rgba(34, 211, 187, 0.24)"
109
- },
110
- "sky": {
111
- "50": "#ebf8ff",
112
- "100": "#d5f1ff",
113
- "200": "#c0eaff",
114
- "300": "#97dcff",
115
- "400": "#68cdff",
116
- "500": "#47c2ff",
117
- "600": "#35ade9",
118
- "700": "#2597d0",
119
- "800": "#1f7ead",
120
- "900": "#18658b",
121
- "950": "#124b68",
122
- "alpha-10": "rgba(71, 194, 255, 0.1)",
123
- "alpha-16": "rgba(71, 194, 255, 0.16)",
124
- "alpha-24": "rgba(71, 194, 255, 0.24)"
125
- },
126
- "blue": {
127
- "50": "#ebf1ff",
128
- "100": "#d5e2ff",
129
- "200": "#c0d5ff",
130
- "300": "#97baff",
131
- "400": "#6895ff",
132
- "500": "#335cff",
133
- "600": "#3559e9",
134
- "700": "#2547d0",
135
- "800": "#1f3bad",
136
- "900": "#182f8b",
137
- "950": "#122368",
138
- "alpha-10": "rgba(71, 108, 255, 0.1)",
139
- "alpha-16": "rgba(71, 108, 255, 0.16)",
140
- "alpha-24": "rgba(71, 108, 255, 0.24)"
141
- },
142
- "purple": {
143
- "50": "#efebff",
144
- "100": "#dcd5ff",
145
- "200": "#cac0ff",
146
- "300": "#a897ff",
147
- "400": "#8c71f6",
148
- "500": "#7d52f4",
149
- "600": "#693ee0",
150
- "700": "#5b2cc9",
151
- "800": "#4c25a7",
152
- "900": "#3d1d86",
153
- "950": "#351a75",
154
- "alpha-10": "rgba(120, 77, 239, 0.1)",
155
- "alpha-16": "rgba(120, 77, 239, 0.16)",
156
- "alpha-24": "rgba(120, 77, 239, 0.24)"
157
- },
158
- "pink": {
159
- "50": "#ffebf4",
160
- "100": "#ffd5ea",
161
- "200": "#ffc0df",
162
- "300": "#ff97cb",
163
- "400": "#ff68b3",
164
- "500": "#fb4ba3",
165
- "600": "#e9358f",
166
- "700": "#d0257a",
167
- "800": "#ad1f66",
168
- "900": "#8b1852",
169
- "950": "#68123d",
170
- "alpha-10": "rgba(251, 75, 163, 0.1)",
171
- "alpha-16": "rgba(251, 75, 163, 0.16)",
172
- "alpha-24": "rgba(251, 75, 163, 0.24)"
173
- },
174
- "brand": {
175
- "50": "#ffebf4",
176
- "100": "#ffd6e9",
177
- "200": "#ffc2dd",
178
- "300": "#ff99c7",
179
- "400": "#ff66ab",
180
- "500": "#e1116f",
181
- "600": "#cb0f64",
182
- "700": "#b40e59",
183
- "800": "#9e0c4e",
184
- "900": "#870a43",
185
- "950": "#681239"
186
- },
187
- "static": {
188
- "white": "#ffffff",
189
- "black": "#171717"
190
- },
191
- "bg": {
192
- "white-0": "#ffffff",
193
- "weak-50": "#f7f7f7",
194
- "strong-950": "#171717",
195
- "surface-800": "#292929",
196
- "soft-200": "#ebebeb",
197
- "sub-300": "#d1d1d1"
198
- },
199
- "state": {
200
- "faded": {
201
- "light": "#ebebeb",
202
- "base": "#7b7b7b",
203
- "dark": "#292929",
204
- "lighter": "#f5f5f5"
205
- },
206
- "error": {
207
- "base": "#fb3748",
208
- "light": "#ffc0c5",
209
- "dark": "#681219",
210
- "lighter": "#ffebec"
211
- },
212
- "warning": {
213
- "dark": "#682f12",
214
- "base": "#ff8447",
215
- "light": "#ffd5c0",
216
- "lighter": "#fff1eb"
217
- },
218
- "information": {
219
- "dark": "#122368",
220
- "base": "#335cff",
221
- "light": "#c0d5ff",
222
- "lighter": "#ebf1ff"
223
- },
224
- "success": {
225
- "dark": "#0b4627",
226
- "base": "#1fc16b",
227
- "light": "#c2f5da",
228
- "lighter": "#e0faec"
229
- },
230
- "away": {
231
- "dark": "#624c18",
232
- "base": "#f6b51e",
233
- "light": "#ffecc0",
234
- "lighter": "#fffaeb"
235
- },
236
- "feature": {
237
- "dark": "#351a75",
238
- "base": "#7d52f4",
239
- "light": "#cac0ff",
240
- "lighter": "#efebff"
241
- },
242
- "verified": {
243
- "dark": "#124b68",
244
- "base": "#47c2ff",
245
- "light": "#c0eaff",
246
- "lighter": "#ebf8ff"
247
- },
248
- "highlighted": {
249
- "dark": "#68123d",
250
- "base": "#fb4ba3",
251
- "light": "#ffc0df",
252
- "lighter": "#ffebf4"
253
- },
254
- "stable": {
255
- "dark": "#0b463e",
256
- "base": "#22d3bb",
257
- "light": "#c2f5ee",
258
- "lighter": "#e4fbf8"
259
- }
260
- },
261
- "text": {
262
- "strong-950": "#171717",
263
- "sub-600": "#5c5c5c",
264
- "disabled-300": "#d1d1d1",
265
- "white-0": "#ffffff",
266
- "soft-400": "#a3a3a3"
267
- },
268
- "stroke": {
269
- "soft-200": "#ebebeb",
270
- "strong-950": "#171717",
271
- "white-0": "#ffffff",
272
- "sub-300": "#d1d1d1"
273
- },
274
- "icon": {
275
- "sub-600": "#5c5c5c",
276
- "strong-950": "#171717",
277
- "soft-400": "#a3a3a3",
278
- "disabled-300": "#d1d1d1",
279
- "white-0": "#ffffff"
280
- },
281
- "social": {
282
- "apple": "#000000",
283
- "twitter": "#010101",
284
- "github": "#24292f",
285
- "notion": "#1e2226",
286
- "tidal": "#000000",
287
- "amazon": "#353e47",
288
- "zendesk": "#16140d"
289
- },
290
- "illustration": {
291
- "strong-400": "#a3a3a3",
292
- "sub-300": "#d1d1d1",
293
- "soft-200": "#ebebeb",
294
- "weak-100": "#f5f5f5",
295
- "white-0": "#ffffff"
296
- },
297
- "overlay": {
298
- "overlay": "rgba(2, 13, 23, 0.24)"
299
- },
300
- "primary-base": "#e1116f",
301
- "primary-darker": "#b40e59",
302
- "primary-alpha-10": "rgba(251, 75, 163, 0.1)",
303
- "primary-alpha-16": "rgba(251, 75, 163, 0.16)",
304
- "primary-dark": "#cb0f64",
305
- "primary-alpha-24": "rgba(251, 75, 163, 0.24)"
306
- },
307
- "fontFamily": {
308
- "inter-display": "InterDisplay",
309
- "inter": "InterVariable",
310
- "cairo": "Cairo",
311
- "geist-mono": "'Geist Mono'",
312
- "sans": "InterVariable, Cairo, sans-serif",
313
- "mono": "'Geist Mono', monospace",
314
- "display": "InterDisplay, Cairo, sans-serif"
315
- },
316
- "fontSize": {},
317
- "fontWeight": {
318
- "display-0": 500,
319
- "sans-0": 400,
320
- "sans-1": 500
321
- },
322
- "lineHeight": {
323
- "0": "64px",
324
- "1": "56px",
325
- "2": "48px",
326
- "3": "40px",
327
- "4": "32px",
328
- "5": "28px",
329
- "6": "24px",
330
- "7": "20px",
331
- "8": "16px",
332
- "9": "12px"
333
- },
334
- "letterSpacing": {
335
- "0": "-0.01em",
336
- "1": "-0.005em",
337
- "2": "0em",
338
- "3": "-0.015em",
339
- "4": "-0.011000000000000001em",
340
- "5": "-0.006em",
341
- "6": "0.06em",
342
- "7": "0.04em",
343
- "8": "0.02em"
344
- },
345
- "borderRadius": {
346
- "4": "4px",
347
- "6": "6px",
348
- "8": "8px",
349
- "10": "10px",
350
- "12": "12px",
351
- "16": "16px",
352
- "20": "20px",
353
- "24": "24px",
354
- "full": "999px"
355
- },
356
- "boxShadow": {
357
- "regular": {
358
- "xs": "0 1px 2px 0 #0a0d1408",
359
- "md": "0 16px 32px -12px #0e121b1a"
360
- },
361
- "buttons": {
362
- "primary-focus": "0 0 0 2px #ffffff, 0 0 0 4px #fb4ba31a",
363
- "important-focus": "0 0 0 2px #ffffff, 0 0 0 4px #99a0ae29",
364
- "error-focus": "0 0 0 2px #ffffff, 0 0 0 4px #fb37481a"
365
- },
366
- "fancy-buttons": {
367
- "neutral": "0 1px 2px 0 #1b1c1d7a, 0 0 0 1px #242628",
368
- "primary": "0 1px 2px 0 #0e121b3d, 0 0 0 1px #e1116f",
369
- "error": "0 1px 2px 0 #0e121b3d, 0 0 0 1px #fb3748",
370
- "stroke": "0 1px 3px 0 #0e121b1f, 0 0 0 1px #e1e4ea"
371
- },
372
- "toggle": {
373
- "switch": "0 6px 10px 0 #0e121b0f, 0 2px 4px 0 #0e121b08"
374
- }
375
- },
376
- "spacing": {
377
- "0": "0",
378
- "2": "2px",
379
- "4": "4px",
380
- "6": "6px",
381
- "8": "8px",
382
- "10": "10px",
383
- "12": "12px",
384
- "14": "14px",
385
- "16": "16px",
386
- "48": "48px"
387
- },
388
- "duration": {
389
- "extra-fast": "100ms",
390
- "fast": "200ms",
391
- "normal": "300ms",
392
- "slow": "400ms",
393
- "extra-slow": "500ms"
394
- },
395
- "shortcuts": {
396
- "title-h1-title": "[font:var(--title-h1-title)]",
397
- "title-h2-title": "[font:var(--title-h2-title)]",
398
- "title-h3-title": "[font:var(--title-h3-title)]",
399
- "title-h4-title": "[font:var(--title-h4-title)]",
400
- "title-h5-title": "[font:var(--title-h5-title)]",
401
- "title-h6-title": "[font:var(--title-h6-title)]",
402
- "label-xl": "[font:var(--label-xl)]",
403
- "label-lg": "[font:var(--label-lg)]",
404
- "label-md": "[font:var(--label-md)]",
405
- "label-sm": "[font:var(--label-sm)]",
406
- "label-xs": "[font:var(--label-xs)]",
407
- "paragraph-xl": "[font:var(--paragraph-xl)]",
408
- "paragraph-lg": "[font:var(--paragraph-lg)]",
409
- "paragraph-md": "[font:var(--paragraph-md)]",
410
- "paragraph-sm": "[font:var(--paragraph-sm)]",
411
- "paragraph-xs": "[font:var(--paragraph-xs)]",
412
- "subheading-md": "[font:var(--subheading-md)]",
413
- "subheading-sm": "[font:var(--subheading-sm)]",
414
- "subheading-xs": "[font:var(--subheading-xs)]",
415
- "subheading-xxs": "[font:var(--subheading-xxs)]",
416
- "docs-label": "[font:var(--docs-label)]",
417
- "docs-paragraph": "[font:var(--docs-paragraph)]"
418
- }
419
- }