@jotis-me/tokens 0.0.0-stage → 0.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.
Files changed (15) hide show
  1. package/README.md +45 -2
  2. package/dist/fonts/BricolageGrotesque-Variable-latin-ext.woff2 +0 -0
  3. package/dist/fonts/BricolageGrotesque-Variable-latin.woff2 +0 -0
  4. package/dist/fonts/Geist-Variable-Italic.woff2 +0 -0
  5. package/dist/fonts/Geist-Variable.woff2 +0 -0
  6. package/dist/fonts/GeistMono-Variable.woff2 +0 -0
  7. package/dist/fonts/LICENSE-BricolageGrotesque.txt +93 -0
  8. package/dist/fonts/LICENSE-Geist.txt +92 -0
  9. package/dist/fonts.css +43 -0
  10. package/dist/index.d.ts +24 -0
  11. package/dist/index.js +1775 -0
  12. package/dist/theme.css +345 -0
  13. package/dist/tokens.css +517 -0
  14. package/dist/tokens.json +2610 -0
  15. package/package.json +53 -5
package/dist/theme.css ADDED
@@ -0,0 +1,345 @@
1
+ /* Generado por @jotis-me/tokens a partir de tokens.json. No editar a mano. */
2
+
3
+ @custom-variant dark (&:where(.dark-mode, .dark-mode *));
4
+
5
+ @theme inline {
6
+ --color-*: initial;
7
+ --text-*: initial;
8
+ --font-*: initial;
9
+ --radius-*: initial;
10
+ --shadow-*: initial;
11
+ --blur-*: initial;
12
+
13
+ --text-color-primary: var(--text-primary);
14
+ --text-color-primary_on-brand: var(--text-primary_on-brand);
15
+ --text-color-secondary: var(--text-secondary);
16
+ --text-color-secondary_hover: var(--text-secondary_hover);
17
+ --text-color-secondary_on-brand: var(--text-secondary_on-brand);
18
+ --text-color-tertiary: var(--text-tertiary);
19
+ --text-color-tertiary_hover: var(--text-tertiary_hover);
20
+ --text-color-tertiary_on-brand: var(--text-tertiary_on-brand);
21
+ --text-color-quaternary: var(--text-quaternary);
22
+ --text-color-quaternary_on-brand: var(--text-quaternary_on-brand);
23
+ --text-color-white: var(--text-white);
24
+ --text-color-placeholder: var(--text-placeholder);
25
+ --text-color-brand-primary: var(--text-brand-primary);
26
+ --text-color-brand-secondary: var(--text-brand-secondary);
27
+ --text-color-brand-secondary_hover: var(--text-brand-secondary_hover);
28
+ --text-color-brand-tertiary: var(--text-brand-tertiary);
29
+ --text-color-brand-tertiary_alt: var(--text-brand-tertiary_alt);
30
+ --text-color-error-primary: var(--text-error-primary);
31
+ --text-color-error-primary_hover: var(--text-error-primary_hover);
32
+ --text-color-warning-primary: var(--text-warning-primary);
33
+ --text-color-success-primary: var(--text-success-primary);
34
+ --border-color-primary: var(--border-primary);
35
+ --ring-color-primary: var(--border-primary);
36
+ --outline-color-primary: var(--border-primary);
37
+ --border-color-secondary: var(--border-secondary);
38
+ --ring-color-secondary: var(--border-secondary);
39
+ --outline-color-secondary: var(--border-secondary);
40
+ --border-color-secondary_alt: var(--border-secondary_alt);
41
+ --ring-color-secondary_alt: var(--border-secondary_alt);
42
+ --outline-color-secondary_alt: var(--border-secondary_alt);
43
+ --border-color-tertiary: var(--border-tertiary);
44
+ --ring-color-tertiary: var(--border-tertiary);
45
+ --outline-color-tertiary: var(--border-tertiary);
46
+ --border-color-brand: var(--border-brand);
47
+ --ring-color-brand: var(--border-brand);
48
+ --outline-color-brand: var(--border-brand);
49
+ --border-color-brand_alt: var(--border-brand_alt);
50
+ --ring-color-brand_alt: var(--border-brand_alt);
51
+ --outline-color-brand_alt: var(--border-brand_alt);
52
+ --border-color-error: var(--border-error);
53
+ --ring-color-error: var(--border-error);
54
+ --outline-color-error: var(--border-error);
55
+ --border-color-error_subtle: var(--border-error_subtle);
56
+ --ring-color-error_subtle: var(--border-error_subtle);
57
+ --outline-color-error_subtle: var(--border-error_subtle);
58
+ --color-fg-primary: var(--fg-primary);
59
+ --color-fg-secondary: var(--fg-secondary);
60
+ --color-fg-secondary_hover: var(--fg-secondary_hover);
61
+ --color-fg-tertiary: var(--fg-tertiary);
62
+ --color-fg-tertiary_hover: var(--fg-tertiary_hover);
63
+ --color-fg-quaternary: var(--fg-quaternary);
64
+ --color-fg-quaternary_hover: var(--fg-quaternary_hover);
65
+ --color-fg-white: var(--fg-white);
66
+ --color-fg-brand-primary: var(--fg-brand-primary);
67
+ --color-fg-brand-primary_alt: var(--fg-brand-primary_alt);
68
+ --color-fg-brand-secondary: var(--fg-brand-secondary);
69
+ --color-fg-brand-secondary_alt: var(--fg-brand-secondary_alt);
70
+ --color-fg-brand-secondary_hover: var(--fg-brand-secondary_hover);
71
+ --color-fg-error-primary: var(--fg-error-primary);
72
+ --color-fg-error-secondary: var(--fg-error-secondary);
73
+ --color-fg-warning-primary: var(--fg-warning-primary);
74
+ --color-fg-warning-secondary: var(--fg-warning-secondary);
75
+ --color-fg-success-primary: var(--fg-success-primary);
76
+ --color-fg-success-secondary: var(--fg-success-secondary);
77
+ --background-color-primary: var(--bg-primary);
78
+ --background-color-primary_alt: var(--bg-primary_alt);
79
+ --background-color-primary_hover: var(--bg-primary_hover);
80
+ --background-color-primary-solid: var(--bg-primary-solid);
81
+ --background-color-secondary: var(--bg-secondary);
82
+ --background-color-secondary_alt: var(--bg-secondary_alt);
83
+ --background-color-secondary_hover: var(--bg-secondary_hover);
84
+ --background-color-secondary-solid: var(--bg-secondary-solid);
85
+ --background-color-tertiary: var(--bg-tertiary);
86
+ --background-color-quaternary: var(--bg-quaternary);
87
+ --background-color-overlay: var(--bg-overlay);
88
+ --background-color-brand-primary: var(--bg-brand-primary);
89
+ --background-color-brand-primary_alt: var(--bg-brand-primary_alt);
90
+ --background-color-brand-secondary: var(--bg-brand-secondary);
91
+ --background-color-brand-solid: var(--bg-brand-solid);
92
+ --background-color-brand-solid_hover: var(--bg-brand-solid_hover);
93
+ --background-color-brand-section: var(--bg-brand-section);
94
+ --background-color-brand-section_subtle: var(--bg-brand-section_subtle);
95
+ --background-color-error-primary: var(--bg-error-primary);
96
+ --background-color-error-secondary: var(--bg-error-secondary);
97
+ --background-color-error-solid: var(--bg-error-solid);
98
+ --background-color-error-solid_hover: var(--bg-error-solid_hover);
99
+ --background-color-warning-primary: var(--bg-warning-primary);
100
+ --background-color-warning-secondary: var(--bg-warning-secondary);
101
+ --background-color-warning-solid: var(--bg-warning-solid);
102
+ --background-color-success-primary: var(--bg-success-primary);
103
+ --background-color-success-secondary: var(--bg-success-secondary);
104
+ --background-color-success-solid: var(--bg-success-solid);
105
+ --color-focus-ring: var(--focus-ring);
106
+ --color-focus-ring-error: var(--focus-ring-error);
107
+ --color-utility-neutral-50: var(--utility-neutral-50);
108
+ --color-utility-neutral-100: var(--utility-neutral-100);
109
+ --color-utility-neutral-200: var(--utility-neutral-200);
110
+ --color-utility-neutral-300: var(--utility-neutral-300);
111
+ --color-utility-neutral-400: var(--utility-neutral-400);
112
+ --color-utility-neutral-500: var(--utility-neutral-500);
113
+ --color-utility-neutral-600: var(--utility-neutral-600);
114
+ --color-utility-neutral-700: var(--utility-neutral-700);
115
+ --color-utility-neutral-800: var(--utility-neutral-800);
116
+ --color-utility-neutral-900: var(--utility-neutral-900);
117
+ --color-utility-brand-50: var(--utility-brand-50);
118
+ --color-utility-brand-100: var(--utility-brand-100);
119
+ --color-utility-brand-200: var(--utility-brand-200);
120
+ --color-utility-brand-300: var(--utility-brand-300);
121
+ --color-utility-brand-400: var(--utility-brand-400);
122
+ --color-utility-brand-500: var(--utility-brand-500);
123
+ --color-utility-brand-600: var(--utility-brand-600);
124
+ --color-utility-brand-700: var(--utility-brand-700);
125
+ --color-utility-brand-800: var(--utility-brand-800);
126
+ --color-utility-brand-900: var(--utility-brand-900);
127
+ --color-utility-slate-50: var(--utility-slate-50);
128
+ --color-utility-slate-100: var(--utility-slate-100);
129
+ --color-utility-slate-200: var(--utility-slate-200);
130
+ --color-utility-slate-300: var(--utility-slate-300);
131
+ --color-utility-slate-400: var(--utility-slate-400);
132
+ --color-utility-slate-500: var(--utility-slate-500);
133
+ --color-utility-slate-600: var(--utility-slate-600);
134
+ --color-utility-slate-700: var(--utility-slate-700);
135
+ --color-utility-red-50: var(--utility-red-50);
136
+ --color-utility-red-100: var(--utility-red-100);
137
+ --color-utility-red-200: var(--utility-red-200);
138
+ --color-utility-red-300: var(--utility-red-300);
139
+ --color-utility-red-400: var(--utility-red-400);
140
+ --color-utility-red-500: var(--utility-red-500);
141
+ --color-utility-red-600: var(--utility-red-600);
142
+ --color-utility-red-700: var(--utility-red-700);
143
+ --color-utility-orange-50: var(--utility-orange-50);
144
+ --color-utility-orange-100: var(--utility-orange-100);
145
+ --color-utility-orange-200: var(--utility-orange-200);
146
+ --color-utility-orange-300: var(--utility-orange-300);
147
+ --color-utility-orange-400: var(--utility-orange-400);
148
+ --color-utility-orange-500: var(--utility-orange-500);
149
+ --color-utility-orange-600: var(--utility-orange-600);
150
+ --color-utility-orange-700: var(--utility-orange-700);
151
+ --color-utility-amber-50: var(--utility-amber-50);
152
+ --color-utility-amber-100: var(--utility-amber-100);
153
+ --color-utility-amber-200: var(--utility-amber-200);
154
+ --color-utility-amber-300: var(--utility-amber-300);
155
+ --color-utility-amber-400: var(--utility-amber-400);
156
+ --color-utility-amber-500: var(--utility-amber-500);
157
+ --color-utility-amber-600: var(--utility-amber-600);
158
+ --color-utility-amber-700: var(--utility-amber-700);
159
+ --color-utility-yellow-50: var(--utility-yellow-50);
160
+ --color-utility-yellow-100: var(--utility-yellow-100);
161
+ --color-utility-yellow-200: var(--utility-yellow-200);
162
+ --color-utility-yellow-300: var(--utility-yellow-300);
163
+ --color-utility-yellow-400: var(--utility-yellow-400);
164
+ --color-utility-yellow-500: var(--utility-yellow-500);
165
+ --color-utility-yellow-600: var(--utility-yellow-600);
166
+ --color-utility-yellow-700: var(--utility-yellow-700);
167
+ --color-utility-green-50: var(--utility-green-50);
168
+ --color-utility-green-100: var(--utility-green-100);
169
+ --color-utility-green-200: var(--utility-green-200);
170
+ --color-utility-green-300: var(--utility-green-300);
171
+ --color-utility-green-400: var(--utility-green-400);
172
+ --color-utility-green-500: var(--utility-green-500);
173
+ --color-utility-green-600: var(--utility-green-600);
174
+ --color-utility-green-700: var(--utility-green-700);
175
+ --color-utility-emerald-50: var(--utility-emerald-50);
176
+ --color-utility-emerald-100: var(--utility-emerald-100);
177
+ --color-utility-emerald-200: var(--utility-emerald-200);
178
+ --color-utility-emerald-300: var(--utility-emerald-300);
179
+ --color-utility-emerald-400: var(--utility-emerald-400);
180
+ --color-utility-emerald-500: var(--utility-emerald-500);
181
+ --color-utility-emerald-600: var(--utility-emerald-600);
182
+ --color-utility-emerald-700: var(--utility-emerald-700);
183
+ --color-utility-sky-50: var(--utility-sky-50);
184
+ --color-utility-sky-100: var(--utility-sky-100);
185
+ --color-utility-sky-200: var(--utility-sky-200);
186
+ --color-utility-sky-300: var(--utility-sky-300);
187
+ --color-utility-sky-400: var(--utility-sky-400);
188
+ --color-utility-sky-500: var(--utility-sky-500);
189
+ --color-utility-sky-600: var(--utility-sky-600);
190
+ --color-utility-sky-700: var(--utility-sky-700);
191
+ --color-utility-blue-50: var(--utility-blue-50);
192
+ --color-utility-blue-100: var(--utility-blue-100);
193
+ --color-utility-blue-200: var(--utility-blue-200);
194
+ --color-utility-blue-300: var(--utility-blue-300);
195
+ --color-utility-blue-400: var(--utility-blue-400);
196
+ --color-utility-blue-500: var(--utility-blue-500);
197
+ --color-utility-blue-600: var(--utility-blue-600);
198
+ --color-utility-blue-700: var(--utility-blue-700);
199
+ --color-utility-indigo-50: var(--utility-indigo-50);
200
+ --color-utility-indigo-100: var(--utility-indigo-100);
201
+ --color-utility-indigo-200: var(--utility-indigo-200);
202
+ --color-utility-indigo-300: var(--utility-indigo-300);
203
+ --color-utility-indigo-400: var(--utility-indigo-400);
204
+ --color-utility-indigo-500: var(--utility-indigo-500);
205
+ --color-utility-indigo-600: var(--utility-indigo-600);
206
+ --color-utility-indigo-700: var(--utility-indigo-700);
207
+ --color-utility-purple-50: var(--utility-purple-50);
208
+ --color-utility-purple-100: var(--utility-purple-100);
209
+ --color-utility-purple-200: var(--utility-purple-200);
210
+ --color-utility-purple-300: var(--utility-purple-300);
211
+ --color-utility-purple-400: var(--utility-purple-400);
212
+ --color-utility-purple-500: var(--utility-purple-500);
213
+ --color-utility-purple-600: var(--utility-purple-600);
214
+ --color-utility-purple-700: var(--utility-purple-700);
215
+ --color-utility-fuchsia-50: var(--utility-fuchsia-50);
216
+ --color-utility-fuchsia-100: var(--utility-fuchsia-100);
217
+ --color-utility-fuchsia-200: var(--utility-fuchsia-200);
218
+ --color-utility-fuchsia-300: var(--utility-fuchsia-300);
219
+ --color-utility-fuchsia-400: var(--utility-fuchsia-400);
220
+ --color-utility-fuchsia-500: var(--utility-fuchsia-500);
221
+ --color-utility-fuchsia-600: var(--utility-fuchsia-600);
222
+ --color-utility-fuchsia-700: var(--utility-fuchsia-700);
223
+ --color-utility-pink-50: var(--utility-pink-50);
224
+ --color-utility-pink-100: var(--utility-pink-100);
225
+ --color-utility-pink-200: var(--utility-pink-200);
226
+ --color-utility-pink-300: var(--utility-pink-300);
227
+ --color-utility-pink-400: var(--utility-pink-400);
228
+ --color-utility-pink-500: var(--utility-pink-500);
229
+ --color-utility-pink-600: var(--utility-pink-600);
230
+ --color-utility-pink-700: var(--utility-pink-700);
231
+ --color-alpha-white-10: var(--alpha-white-10);
232
+ --color-alpha-white-20: var(--alpha-white-20);
233
+ --color-alpha-white-30: var(--alpha-white-30);
234
+ --color-alpha-white-40: var(--alpha-white-40);
235
+ --color-alpha-white-50: var(--alpha-white-50);
236
+ --color-alpha-white-60: var(--alpha-white-60);
237
+ --color-alpha-white-70: var(--alpha-white-70);
238
+ --color-alpha-white-80: var(--alpha-white-80);
239
+ --color-alpha-white-90: var(--alpha-white-90);
240
+ --color-alpha-white-100: var(--alpha-white-100);
241
+ --color-alpha-black-10: var(--alpha-black-10);
242
+ --color-alpha-black-20: var(--alpha-black-20);
243
+ --color-alpha-black-30: var(--alpha-black-30);
244
+ --color-alpha-black-40: var(--alpha-black-40);
245
+ --color-alpha-black-50: var(--alpha-black-50);
246
+ --color-alpha-black-60: var(--alpha-black-60);
247
+ --color-alpha-black-70: var(--alpha-black-70);
248
+ --color-alpha-black-80: var(--alpha-black-80);
249
+ --color-alpha-black-90: var(--alpha-black-90);
250
+ --color-alpha-black-100: var(--alpha-black-100);
251
+ --color-avatar-styles-bg-neutral: var(--avatar-styles-bg-neutral);
252
+ --color-featured-icon-light-fg-brand: var(--featured-icon-light-fg-brand);
253
+ --color-featured-icon-light-fg-gray: var(--featured-icon-light-fg-gray);
254
+ --color-featured-icon-light-fg-error: var(--featured-icon-light-fg-error);
255
+ --color-featured-icon-light-fg-warning: var(--featured-icon-light-fg-warning);
256
+ --color-featured-icon-light-fg-success: var(--featured-icon-light-fg-success);
257
+ --color-icon-fg-brand: var(--icon-fg-brand);
258
+ --color-icon-fg-brand_on-brand: var(--icon-fg-brand_on-brand);
259
+ --color-slider-handle-bg: var(--slider-handle-bg);
260
+ --color-slider-handle-border: var(--slider-handle-border);
261
+ --color-toggle-border: var(--toggle-border);
262
+ --color-toggle-slim-border_pressed: var(--toggle-slim-border_pressed);
263
+ --color-toggle-slim-border_pressed-hover: var(--toggle-slim-border_pressed-hover);
264
+ --color-tooltip-supporting-text: var(--tooltip-supporting-text);
265
+ --text-color-editor-icon-fg: var(--text-editor-icon-fg);
266
+ --text-color-editor-icon-fg_active: var(--text-editor-icon-fg_active);
267
+ --color-footer-button-fg: var(--footer-button-fg);
268
+ --color-footer-button-fg_hover: var(--footer-button-fg_hover);
269
+ --background-color-active: var(--bg-active);
270
+ --color-alpha-white: var(--alpha-white-100);
271
+ --color-alpha-black: var(--alpha-black-100);
272
+
273
+ --font-display: "Bricolage Grotesque", "Geist", ui-sans-serif, system-ui, sans-serif;
274
+ --font-body: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
275
+ --font-mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
276
+ --font-sans: var(--font-body);
277
+
278
+ --text-display-2xl: 4.5rem;
279
+ --text-display-2xl--line-height: 5.625rem;
280
+ --text-display-2xl--letter-spacing: -0.02em;
281
+ --text-display-xl: 3.75rem;
282
+ --text-display-xl--line-height: 4.5rem;
283
+ --text-display-xl--letter-spacing: -0.02em;
284
+ --text-display-lg: 3rem;
285
+ --text-display-lg--line-height: 3.75rem;
286
+ --text-display-lg--letter-spacing: -0.02em;
287
+ --text-display-md: 2.25rem;
288
+ --text-display-md--line-height: 2.75rem;
289
+ --text-display-md--letter-spacing: -0.02em;
290
+ --text-display-sm: 1.875rem;
291
+ --text-display-sm--line-height: 2.375rem;
292
+ --text-display-xs: 1.5rem;
293
+ --text-display-xs--line-height: 2rem;
294
+ --text-xl: 1.25rem;
295
+ --text-xl--line-height: 1.875rem;
296
+ --text-lg: 1.125rem;
297
+ --text-lg--line-height: 1.75rem;
298
+ --text-md: 1rem;
299
+ --text-md--line-height: 1.5rem;
300
+ --text-sm: 0.875rem;
301
+ --text-sm--line-height: 1.25rem;
302
+ --text-xs: 0.75rem;
303
+ --text-xs--line-height: 1.125rem;
304
+ --text-code-sm: 0.875rem;
305
+ --text-code-sm--line-height: 1.25rem;
306
+ --text-code-xs: 0.75rem;
307
+ --text-code-xs--line-height: 1.125rem;
308
+
309
+ --radius-none: 0px;
310
+ --radius-xs: 2px;
311
+ --radius-sm: 4px;
312
+ --radius-md: 6px;
313
+ --radius-lg: 8px;
314
+ --radius-xl: 12px;
315
+ --radius-2xl: 16px;
316
+ --radius-3xl: 24px;
317
+ --radius-full: 9999px;
318
+
319
+ --shadow-xs: 0 1px 2px 0 #0000000d;
320
+ --shadow-xs-skeuomorphic: 0 1px 2px 0 #0000000d, inset 0 0 0 1px #0000002e, inset 0 -2px 0 0 #0000000d;
321
+ --shadow-sm: 0 1px 3px 0 #0000001a, 0 1px 2px -1px #0000001a;
322
+ --shadow-md: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000000f;
323
+ --shadow-lg: 0 12px 16px -4px #00000014, 0 4px 6px -2px #00000008, 0 2px 2px -1px #0000000a;
324
+ --shadow-xl: 0 20px 24px -4px #00000014, 0 8px 8px -4px #00000008, 0 3px 3px -1.5px #0000000a;
325
+ --shadow-2xl: 0 24px 48px -12px #0000002e, 0 4px 4px -2px #0000000a;
326
+ --shadow-3xl: 0 32px 64px -12px #00000024, 0 5px 5px -2.5px #0000000a;
327
+ --shadow-focus-ring: var(--focus-ring-shadow);
328
+ --shadow-focus-ring-error: var(--focus-ring-error-shadow);
329
+
330
+ --blur-sm: 8px;
331
+ --blur-lg: 16px;
332
+ --blur-xl: 24px;
333
+ --blur-2xl: 40px;
334
+
335
+ --container-container: 1280px;
336
+ --container-paragraph: 720px;
337
+ }
338
+
339
+ @layer base {
340
+ html {
341
+ font-family: var(--font-body);
342
+ color: var(--text-primary);
343
+ background-color: var(--bg-primary);
344
+ }
345
+ }