infinity-ui-elements 1.0.3 → 1.0.4

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 (14) hide show
  1. package/dist/components/Button/Button.d.ts +8 -3
  2. package/dist/components/Button/Button.d.ts.map +1 -1
  3. package/dist/index.css +2 -1
  4. package/dist/index.d.ts +0 -1
  5. package/dist/index.d.ts.map +1 -1
  6. package/dist/index.esm.js.map +1 -1
  7. package/dist/index.js.map +1 -1
  8. package/package.json +3 -3
  9. package/src/components/Button/Button.stories.tsx +0 -458
  10. package/src/components/Button/Button.tsx +0 -308
  11. package/src/components/Button/index.ts +0 -2
  12. package/src/index.css +0 -546
  13. package/src/index.ts +0 -5
  14. package/src/lib/utils.ts +0 -6
package/src/index.css DELETED
@@ -1,546 +0,0 @@
1
- @import 'tailwindcss';
2
- @theme {
3
- /* PRIMITIVE COLORS */
4
-
5
- /* Blue Night */
6
- --color-blue-night-50: #E6E9EAFF;
7
- --color-blue-night-100: #B3BCBEFF;
8
- --color-blue-night-200: #8E9B9FFF;
9
- --color-blue-night-300: #5A6E73FF;
10
- --color-blue-night-400: #3A5158FF;
11
- --color-blue-night-500: #09262EFF;
12
- --color-blue-night-600: #08232AFF;
13
- --color-blue-night-700: #061B21FF;
14
- --color-blue-night-800: #051519FF;
15
- --color-blue-night-900: #041013FF;
16
-
17
- /* Teal */
18
- --color-teal-50: #E8EFF1FF;
19
- --color-teal-100: #B9CDD2FF;
20
- --color-teal-200: #97B5BCFF;
21
- --color-teal-300: #67939EFF;
22
- --color-teal-400: #497E8BFF;
23
- --color-teal-500: #1C5E6EFF;
24
- --color-teal-600: #195664FF;
25
- --color-teal-700: #14434EFF;
26
- --color-teal-800: #0F343DFF;
27
- --color-teal-900: #0C272EFF;
28
- --color-teal-900-9: #1C5E6E17;
29
- --color-teal-900-18: #1C5E6E2E;
30
-
31
- /* Sun */
32
- --color-sun-50: #FEF0EAFF;
33
- --color-sun-100: #FBD0BCFF;
34
- --color-sun-200: #F9B99CFF;
35
- --color-sun-300: #F6986FFF;
36
- --color-sun-400: #F58553FF;
37
- --color-sun-500: #F26628FF;
38
- --color-sun-600: #DC5D24FF;
39
- --color-sun-700: #AC481CFF;
40
- --color-sun-800: #853816FF;
41
- --color-sun-900: #662B11FF;
42
-
43
- /* Wine */
44
- --color-wine-50: #F1EAEFFF;
45
- --color-wine-100: #D5BFCDFF;
46
- --color-wine-200: #C0A0B5FF;
47
- --color-wine-300: #A47593FF;
48
- --color-wine-400: #925A7EFF;
49
- --color-wine-500: #77315EFF;
50
- --color-wine-600: #6C2D56FF;
51
- --color-wine-700: #542343FF;
52
- --color-wine-800: #411B34FF;
53
- --color-wine-900: #321527FF;
54
-
55
- /* Ripple */
56
- --color-ripple-50: #F2F6FEFF;
57
- --color-ripple-100: #D5E3FCFF;
58
- --color-ripple-200: #C1D5FAFF;
59
- --color-ripple-300: #A5C2F8FF;
60
- --color-ripple-400: #94B6F7FF;
61
- --color-ripple-500: #79A4F5FF;
62
- --color-ripple-600: #6E95DFFF;
63
- --color-ripple-700: #5674AEFF;
64
- --color-ripple-800: #435A87FF;
65
- --color-ripple-900: #334567FF;
66
-
67
- /* Grove */
68
- --color-grove-50: #EBF6F2FF;
69
- --color-grove-100: #C1E3D6FF;
70
- --color-grove-200: #A3D6C3FF;
71
- --color-grove-300: #78C3A7FF;
72
- --color-grove-400: #5EB796FF;
73
- --color-grove-500: #36A57CFF;
74
- --color-grove-600: #319671FF;
75
- --color-grove-700: #267558FF;
76
- --color-grove-800: #1E5B44FF;
77
- --color-grove-900: #174534FF;
78
-
79
- /* Brick */
80
- --color-brick-50: #FAECEBFF;
81
- --color-brick-100: #EEC3BFFF;
82
- --color-brick-200: #E6A7A1FF;
83
- --color-brick-300: #DA7E76FF;
84
- --color-brick-400: #D3655BFF;
85
- --color-brick-500: #C83F32FF;
86
- --color-brick-600: #B6392EFF;
87
- --color-brick-700: #8E2D24FF;
88
- --color-brick-800: #6E231CFF;
89
- --color-brick-900: #541A15FF;
90
-
91
- /* Ember */
92
- --color-ember-50: #FDF5EBFF;
93
- --color-ember-100: #F8E0C0FF;
94
- --color-ember-200: #F4D1A2FF;
95
- --color-ember-300: #F0BC78FF;
96
- --color-ember-400: #EDAF5DFF;
97
- --color-ember-500: #E89B35FF;
98
- --color-ember-600: #D38D30FF;
99
- --color-ember-700: #A56E26FF;
100
- --color-ember-800: #80551DFF;
101
- --color-ember-900: #614116FF;
102
-
103
- /* Horizon */
104
- --color-horizon-50: #ECF2F6FF;
105
- --color-horizon-100: #C3D7E2FF;
106
- --color-horizon-200: #A5C4D4FF;
107
- --color-horizon-300: #7CA9C0FF;
108
- --color-horizon-400: #6398B4FF;
109
- --color-horizon-500: #3C7EA1FF;
110
- --color-horizon-600: #377393FF;
111
- --color-horizon-700: #2B5972FF;
112
- --color-horizon-800: #214559FF;
113
- --color-horizon-900: #193544FF;
114
-
115
- /* Neutral */
116
- --color-neutral-00: #FFFFFFFF;
117
- --color-neutral-10: #FAFAFAFF;
118
- --color-neutral-20: #F5F6F6FF;
119
- --color-neutral-30: #EBECECFF;
120
- --color-neutral-40: #DFE0E1FF;
121
- --color-neutral-50: #C1C4C5FF;
122
- --color-neutral-60: #B2B6B7FF;
123
- --color-neutral-70: #A6AAABFF;
124
- --color-neutral-80: #979C9DFF;
125
- --color-neutral-90: #888E8FFF;
126
- --color-neutral-100: #7A8081FF;
127
- --color-neutral-200: #6B7273FF;
128
- --color-neutral-300: #5C6465FF;
129
- --color-neutral-400: #50585AFF;
130
- --color-neutral-500: #414A4CFF;
131
- --color-neutral-600: #343E40FF;
132
- --color-neutral-700: #232E30FF;
133
- --color-neutral-800: #142022FF;
134
- --color-neutral-900: #081416FF;
135
-
136
-
137
- /* SEMENTIC COLORS */
138
-
139
- /* Surface */
140
- --color-surface-fill-neutral-intense: var(--color-neutral-00);
141
- --color-surface-fill-neutral-moderate: var(--color-neutral-20);
142
- --color-surface-fill-neutral-subtle: var(--color-neutral-30);
143
-
144
- --color-surface-fill-primary-intense: var(--color-blue-night-500);
145
- --color-surface-fill-primary-moderate: var(--color-neutral-00);
146
-
147
- --color-surface-outline-neutral-normal: var(--color-neutral-60);
148
- --color-surface-outline-neutral-subtle: var(--color-neutral-30);
149
- --color-surface-outline-neutral-muted: var(--color-neutral-10);
150
-
151
- --color-surface-outline-primary-normal: var(--color-teal-500);
152
- --color-surface-outline-primary-muted: var(--color-teal-50);
153
-
154
-
155
- --color-surface-ink-neutral-normal: var(--color-neutral-900);
156
- --color-surface-ink-neutral-subtle: var(--color-neutral-700);
157
- --color-surface-ink-neutral-muted: var(--color-neutral-100);
158
- --color-surface-ink-neutral-disabled: var(--color-neutral-50);
159
-
160
- --color-surface-ink-primary-normal: var(--color-teal-500);
161
-
162
-
163
-
164
- /* Feedback */
165
-
166
- /* Fill */
167
- --color-feedback-fill-positive-subtle: var(--color-grove-50);
168
- --color-feedback-fill-positive-intense: var(--color-grove-600);
169
-
170
- --color-feedback-fill-negative-subtle: var(--color-brick-50);
171
- --color-feedback-fill-negative-intense: var(--color-brick-600);
172
-
173
- --color-feedback-fill-notice-subtle: var(--color-ember-50);
174
- --color-feedback-fill-notice-intense: var(--color-ember-600);
175
-
176
- --color-feedback-fill-info-subtle: var(--color-horizon-50);
177
- --color-feedback-fill-info-intense: var(--color-horizon-600);
178
-
179
- --color-feedback-fill-neutral-intense: var(--color-neutral-20);
180
- --color-feedback-fill-neutral-intense: var(--color-neutral-800);
181
-
182
- /* Outline */
183
- --color-feedback-outline-positive-subtle: var(--color-grove-100);
184
- /* --color-feedback-outline-positive-intense: var(--color-grove-600); */
185
-
186
- --color-feedback-outline-negative-subtle: var(--color-brick-200);
187
- /* --color-feedback-outline-negative-intense: var(--color-brick-600); */
188
-
189
- --color-feedback-outline-notice-subtle: var(--color-ember-200);
190
- /* --color-feedback-outline-notice-intense: var(--color-ember-600); */
191
-
192
- --color-feedback-outline-info-subtle: var(--color-horizon-200);
193
- /* --color-feedback-outline-info-intense: var(--color-horizon-600); */
194
-
195
- --color-feedback-outline-neutral-intense: var(--color-neutral-20);
196
- /* --color-feedback-outline-neutral-intense: var(--color-neutral-800); */
197
-
198
- /* Ink */
199
-
200
- /* --color-feedback-ink-positive-subtle: var(--color-grove-500); */
201
- --color-feedback-ink-positive-intense: var(--color-grove-500);
202
-
203
- --color-feedback-ink-negative-subtle: var(--color-brick-500);
204
- /* --color-feedback-ink-negative-intense: var(--color-brick-600); */
205
-
206
- --color-feedback-ink-notice-subtle: var(--color-ember-500);
207
- /* --color-feedback-ink-notice-intense: var(--color-ember-600); */
208
-
209
- --color-feedback-ink-info-subtle: var(--color-horizon-500);
210
- /* --color-feedback-ink-info-intense: var(--color-horizon-600); */
211
-
212
- /* --color-feedback-ink-neutral-intense: var(--color-neutral-20); */
213
- --color-feedback-ink-neutral-intense: var(--color-neutral-800);
214
-
215
-
216
-
217
- /* Action */
218
-
219
- /* Fill */
220
- --color-action-fill-positive-default: var(--color-grove-500);
221
- --color-action-fill-positive-hover: var(--color-grove-700);
222
- --color-action-fill-positive-disabled: var(--color-grove-50);
223
- --color-action-fill-positive-faded: var(--color-grove-50);
224
- --color-action-fill-positive-faded-hover: var(--color-grove-300);
225
-
226
- --color-action-fill-negative-default: var(--color-brick-500);
227
- --color-action-fill-negative-hover: var(--color-brick-700);
228
- --color-action-fill-negative-disabled: var(--color-brick-50);
229
- --color-action-fill-negative-faded: var(--color-brick-50);
230
- --color-action-fill-negative-faded-hover: var(--color-brick-300);
231
-
232
- --color-action-fill-notice-default: var(--color-ember-500);
233
- --color-action-fill-notice-hover: var(--color-ember-700);
234
- --color-action-fill-notice-disabled: var(--color-ember-50);
235
- --color-action-fill-notice-faded: var(--color-ember-50);
236
- --color-action-fill-notice-faded-hover: var(--color-ember-300);
237
-
238
- --color-action-fill-info-default: var(--color-horizon-500);
239
- --color-action-fill-info-hover: var(--color-horizon-700);
240
- --color-action-fill-info-disabled: var(--color-horizon-50);
241
- --color-action-fill-info-faded: var(--color-horizon-50);
242
- --color-action-fill-info-faded-hover: var(--color-horizon-300);
243
-
244
- --color-action-fill-neutral-default: var(--color-neutral-600);
245
- --color-action-fill-neutral-hover: var(--color-neutral-800);
246
- --color-action-fill-neutral-disabled: var(--color-neutral-50);
247
- --color-action-fill-neutral-faded: var(--color-neutral-50);
248
- --color-action-fill-neutral-faded-hover: var(--color-neutral-80);
249
-
250
- --color-action-fill-primary-default: var(--color-teal-500);
251
- --color-action-fill-primary-hover: var(--color-teal-700);
252
- --color-action-fill-primary-disabled: var(--color-teal-50);
253
- --color-action-fill-primary-faded: var(--color-teal-50);
254
- --color-action-fill-primary-faded-hover: var(--color-teal-300);
255
-
256
-
257
- /* Outline */
258
- --color-action-outline-positive-default: var(--color-grove-500);
259
- --color-action-outline-positive-hover: var(--color-grove-700);
260
- --color-action-outline-positive-disabled: var(--color-grove-200);
261
- --color-action-outline-positive-faded: var(--color-grove-200);
262
- --color-action-outline-positive-faded-hover: var(--color-grove-300);
263
-
264
- --color-action-outline-negative-default: var(--color-brick-500);
265
- --color-action-outline-negative-hover: var(--color-brick-700);
266
- --color-action-outline-negative-disabled: var(--color-brick-50);
267
- --color-action-outline-negative-faded: var(--color-brick-200);
268
- --color-action-outline-negative-faded-hover: var(--color-brick-300);
269
-
270
-
271
- --color-action-outline-notice-default: var(--color-ember-500);
272
- --color-action-outline-notice-hover: var(--color-ember-700);
273
- --color-action-outline-notice-disabled: var(--color-ember-50);
274
- --color-action-outline-notice-faded: var(--color-ember-200);
275
- --color-action-outline-notice-faded-hover: var(--color-ember-300);
276
-
277
-
278
- --color-action-outline-info-default: var(--color-horizon-500);
279
- --color-action-outline-info-hover: var(--color-horizon-700);
280
- --color-action-outline-info-disabled: var(--color-horizon-50);
281
- --color-action-outline-info-faded: var(--color-horizon-200);
282
- --color-action-outline-info-faded-hover: var(--color-horizon-300);
283
-
284
-
285
- --color-action-outline-neutral-default: var(--color-neutral-600);
286
- --color-action-outline-neutral-hover: var(--color-neutral-800);
287
- --color-action-outline-neutral-disabled: var(--color-neutral-50);
288
- --color-action-outline-neutral-faded: var(--color-neutral-70);
289
- --color-action-outline-neutral-faded-hover: var(--color-neutral-80);
290
-
291
-
292
- /* Ink */
293
-
294
- --color-action-ink-positive-normal: var(--color-grove-700);
295
- --color-action-ink-positive-subtle: var(--color-grove-600);
296
- --color-action-ink-positive-muted: var(--color-grove-400);
297
- --color-action-ink-positive-disabled: var(--color-grove-200);
298
-
299
- --color-action-ink-negative-normal: var(--color-brick-600);
300
- --color-action-ink-negative-subtle: var(--color-brick-600);
301
- --color-action-ink-negative-muted: var(--color-brick-400);
302
- --color-action-ink-negative-disabled: var(--color-brick-200);
303
-
304
-
305
- --color-action-ink-notice-normal: var(--color-ember-600);
306
- --color-action-ink-notice-subtle: var(--color-ember-600);
307
- --color-action-ink-notice-muted: var(--color-ember-400);
308
- --color-action-ink-notice-disabled: var(--color-ember-200);
309
-
310
-
311
- --color-action-ink-info-normal: var(--color-horizon-700);
312
- --color-action-ink-info-subtle: var(--color-horizon-600);
313
- --color-action-ink-info-muted: var(--color-horizon-400);
314
- --color-action-ink-info-disabled: var(--color-horizon-200);
315
-
316
-
317
-
318
- --color-action-ink-neutral-normal: var(--color-neutral-900);
319
- --color-action-ink-neutral-subtle: var(--color-neutral-700);
320
- --color-action-ink-neutral-muted: var(--color-neutral-400);
321
- --color-action-ink-neutral-disabled: var(--color-neutral-60);
322
-
323
-
324
- --color-action-ink-primary-normal: var(--color-teal-600);
325
- --color-action-ink-primary-subtle: var(--color-teal-500);
326
- --color-action-ink-primary-muted: var(--color-teal-400);
327
- --color-action-ink-primary-disabled: var(--color-teal-100);
328
-
329
- --color-action-ink-on-primary-normal: var(--color-neutral-00);
330
- --color-action-ink-on-primary-subtle: var(--color-neutral-20);
331
- --color-action-ink-on-primary-muted: var(--color-neutral-60);
332
- --color-action-ink-on-primary-disabled: var(--color-neutral-100);
333
-
334
-
335
-
336
-
337
-
338
-
339
-
340
- /* Size */
341
- --size-0: 0px;
342
- --size-1: 1px;
343
- --size-2: 2px;
344
- --size-4: 4px;
345
- --size-6: 6px;
346
- --size-8: 8px;
347
- --size-12: 12px;
348
- --size-14: 14px;
349
- --size-16: 16px;
350
- --size-20: 20px;
351
- --size-24: 96px;
352
- --size-28: 28px;
353
- --size-32: 32px;
354
- --size-36: 36px;
355
- --size-40: 40px;
356
- --size-44: 44px;
357
- --size-48: 48px;
358
- --size-52: 52px;
359
- --size-56: 56px;
360
- --size-60: 60px;
361
- --size-64: 64px;
362
- --size-72: 72px;
363
- --size-80: 80px;
364
- --size-100: 100px;
365
- --size-120: 120px;
366
- --size-1000: 1000px;
367
-
368
- --size-full: 100%;
369
- --size-screen: 100vh;
370
- --size-min-content: min-content;
371
- --size-max-content: max-content;
372
- --size-fit-content: fit-content;
373
- --size-content: content;
374
- --size-auto: auto;
375
- --size-inherit: inherit;
376
- --size-initial: initial;
377
-
378
- --spacing-0: 0px;
379
- --spacing-1: 2px;
380
- --spacing-2: 4px;
381
- --spacing-3: 8px;
382
- --spacing-4: 12px;
383
- --spacing-5: 16px;
384
- --spacing-6: 20px;
385
- --spacing-7: 24px;
386
- --spacing-8: 32px;
387
- --spacing-9: 40px;
388
- --spacing-10: 48px;
389
- --spacing-11: 56px;
390
-
391
-
392
-
393
- --border-width-none: 0px;
394
- --border-width-thinner: 0.5px;
395
- --border-width-thin: 1px;
396
- --border-width-thick: 1.5px;
397
- --border-width-thicker: 2px;
398
-
399
-
400
- --radius-none: 0px;
401
- --radius-xsmall: 1px;
402
- --radius-small: 2px;
403
- --radius-medium: 4px;
404
- --radius-large: 6px;
405
- --radius-xlarge: 8px;
406
- --radius-2xlarge: 12px;
407
- --radius-3xlarge: 16px;
408
- --radius-max: 1000px;
409
-
410
-
411
- --icon-size-xsmall: 8px;
412
- --icon-size-small: 12px;
413
- --icon-size-medium: 16px;
414
- --icon-size-large: 20px;
415
- --icon-size-xlarge: 24px;
416
- --icon-size-2xlarge: 32px;
417
-
418
-
419
-
420
-
421
-
422
-
423
- --font-functional: "Clash Grotesk", system-ui, sans-serif;
424
- --font-display: "Switzer", system-ui, sans-serif;
425
-
426
-
427
- --font-size-25: 10px;
428
- --font-size-50: 11px;
429
- --font-size-75: 12px;
430
- --font-size-100: 14px;
431
- --font-size-200: 16px;
432
- --font-size-300: 18px;
433
- --font-size-400: 20px;
434
- --font-size-500: 24px;
435
- --font-size-600: 32px;
436
- --font-size-700: 40px;
437
- --font-size-800: 48px;
438
- --font-size-900: 56px;
439
- --font-size-1000: 64px;
440
- --font-size-1100: 72px;
441
-
442
-
443
- --font-weight-regular: 400;
444
- --font-wieght-medium: 500;
445
- --font-wieght-semibold: 600;
446
- --font-wieght-bold: 700;
447
-
448
-
449
- --line-height-00: 0px;
450
- --line-height-25: 14px;
451
- --line-height-50: 16px;
452
- --line-height-75: 18px;
453
- --line-height-100: 20px;
454
- --line-height-200: 24px;
455
- --line-height-300: 24px;
456
- --line-height-400: 26px;
457
- --line-height-500: 32px;
458
- --line-height-600: 38px;
459
- --line-height-700: 46px;
460
- --line-height-800: 56px;
461
- --line-height-900: 64px;
462
- --line-height-1000: 70px;
463
- --line-height-1100: 78px;
464
-
465
-
466
- --paragraph-spacing-00: 0px;
467
- --paragraph-spacing-100: 8px;
468
- --paragraph-spacing-200: 10px;
469
- --paragraph-spacing-300: 11px;
470
- --paragraph-spacing-400: 12px;
471
-
472
-
473
- /* optionally override Tailwind defaults */
474
- /* --font-display: var(--font-functional);
475
- --font-sans: var(--font-display); */
476
- /* --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace; */
477
-
478
- }
479
-
480
- @layer base {
481
- h1{
482
- @apply font-medium
483
- }
484
- }
485
-
486
- @layer components {
487
- .btn-primary {
488
- background-color: var(--color-blue-night-500);
489
- }
490
-
491
- }
492
-
493
- @layer utilities{
494
- .primary-gradient {
495
- background: linear-gradient(to right, var(--color-teal-300), var(--color-teal-700));
496
- }
497
- }
498
-
499
-
500
-
501
-
502
-
503
-
504
- @media (min-width: 767px) { /* sm */
505
- @theme {
506
- --font-size-25: 10px;
507
- --font-size-50: 11px;
508
- --font-size-75: 12px;
509
- --font-size-100: 14px;
510
- --font-size-200: 16px;
511
- --font-size-300: 18px;
512
- --font-size-400: 18px;
513
- --font-size-500: 20px;
514
- --font-size-600: 24px;
515
- --font-size-700: 32px;
516
- --font-size-800: 34px;
517
- --font-size-900: 36px;
518
- --font-size-1000: 38px;
519
- --font-size-1100: 40px;
520
-
521
-
522
- --line-height-00: 0px;
523
- --line-height-25: 14px;
524
- --line-height-50: 16px;
525
- --line-height-75: 18px;
526
- --line-height-100: 20px;
527
- --line-height-200: 24px;
528
- --line-height-300: 22px;
529
- --line-height-400: 24px;
530
- --line-height-500: 26px;
531
- --line-height-600: 32px;
532
- --line-height-700: 38px;
533
- --line-height-800: 40px;
534
- --line-height-900: 42px;
535
- --line-height-1000: 46px;
536
- --line-height-1100: 48px;
537
- }
538
- }
539
-
540
-
541
-
542
-
543
-
544
-
545
-
546
-
package/src/index.ts DELETED
@@ -1,5 +0,0 @@
1
- // Import CSS
2
- import "./index.css";
3
-
4
- // Export all components
5
- export * from "./components/Button";
package/src/lib/utils.ts DELETED
@@ -1,6 +0,0 @@
1
- import { type ClassValue, clsx } from "clsx";
2
- import { twMerge } from "tailwind-merge";
3
-
4
- export function cn(...inputs: ClassValue[]) {
5
- return twMerge(clsx(inputs));
6
- }