@teammodlr/ui-kit 2.1.72 → 2.1.74

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/lib/style.css +1 -1
  2. package/package.json +1 -1
  3. package/src/components/button/style/Button.css.ts +695 -695
  4. package/src/components/tab/style/Tab.css.ts +7 -4
package/src/components/button/style/Button.css.ts CHANGED
@@ -1,695 +1,695 @@
1
- import {
2
- createVar,
3
- globalKeyframes,
4
- globalStyle,
5
- style,
6
- styleVariants
7
- } from '@vanilla-extract/css';
8
- import { themeVars } from '../../../styles/theme.css';
9
-
10
- const sizes = {
11
- xs: '22px',
12
- sm: '28px',
13
- md: '36px',
14
- lg: '40px',
15
- xl: '45px'
16
- };
17
-
18
- const borderRadiuses = {
19
- xs: '2px',
20
- sm: '3px',
21
- md: '4px',
22
- lg: '6px',
23
- xl: '8px'
24
- };
25
-
26
- const padding = {
27
- xs: `0 ${themeVars.space[1]}`,
28
- sm: `0 ${themeVars.space[2]}`,
29
- md: `0 ${themeVars.space[3]}`,
30
- lg: `0 ${themeVars.space[3]}`,
31
- xl: `0 ${themeVars.space[4]}`
32
- };
33
-
34
- export const vars = {
35
- height: createVar(),
36
- radius: createVar(),
37
- padding: createVar(),
38
- backgroundColor: createVar(),
39
- borderColor: createVar(),
40
- boxShadowColor: createVar(),
41
- color: createVar()
42
- };
43
-
44
- export const base = style({
45
- alignItems: 'center',
46
- boxSizing: 'border-box',
47
- display: 'inline-flex',
48
- fontSize: themeVars.fontSize.base,
49
- fontWeight: '500',
50
- maxWidth: '100%',
51
- width: 'auto',
52
- position: 'relative',
53
- textAlign: 'center',
54
- textDecoration: 'none',
55
- verticalAlign: 'middle',
56
- whiteSpace: 'nowrap',
57
- justifyContent: 'center',
58
- height: vars.height,
59
- lineHeight: vars.height,
60
- borderRadius: vars.radius,
61
- padding: vars.padding,
62
- zIndex: 'auto',
63
- backgroundColor: vars.backgroundColor,
64
- border: 0,
65
- color: vars.color,
66
- transition: `color .2s ${themeVars.transition.default},
67
- background-color .25s ${themeVars.transition.default},
68
- box-shadow .25s ${themeVars.transition.default},
69
- border-color .25s ${themeVars.transition.default}`,
70
- fontFamily: 'inherit',
71
- ':hover': {
72
- cursor: 'pointer'
73
- },
74
- ':focus': {
75
- outline: 'none'
76
- },
77
- selectors: {
78
- [`a&:hover`]: {
79
- textDecoration: 'none',
80
- color: vars.color
81
- }
82
- }
83
- });
84
-
85
- export const variant = styleVariants({
86
- primary: {
87
- vars: {
88
- [vars.backgroundColor]: themeVars.color.blue[500],
89
- [vars.borderColor]: themeVars.color.blue[500],
90
- [vars.boxShadowColor]: themeVars.color.blue[500],
91
- [vars.color]: '#FFFFFF'
92
- },
93
- ':hover': {
94
- vars: {
95
- [vars.backgroundColor]: themeVars.color.blue[600],
96
- [vars.borderColor]: themeVars.color.blue[600]
97
- }
98
- },
99
- ':focus': {
100
- vars: {
101
- [vars.backgroundColor]: themeVars.color.blue[600],
102
- [vars.borderColor]: themeVars.color.blue[600]
103
- }
104
- }
105
- },
106
- dark: {
107
- vars: {
108
- [vars.backgroundColor]: themeVars.color.saxe[700],
109
- [vars.borderColor]: themeVars.color.saxe[700],
110
- [vars.boxShadowColor]: themeVars.color.saxe[700],
111
- [vars.color]: '#FFFFFF'
112
- },
113
- ':hover': {
114
- vars: {
115
- [vars.backgroundColor]: themeVars.color.saxe[800],
116
- [vars.borderColor]: themeVars.color.saxe[800]
117
- }
118
- },
119
- ':focus': {
120
- vars: {
121
- [vars.backgroundColor]: themeVars.color.saxe[900],
122
- [vars.borderColor]: themeVars.color.saxe[900]
123
- }
124
- }
125
- },
126
- default: {
127
- vars: {
128
- [vars.color]: themeVars.color.font.text,
129
- [vars.backgroundColor]: 'white',
130
- [vars.boxShadowColor]: themeVars.color.blue[500],
131
- [vars.borderColor]: themeVars.color.gray[300]
132
- },
133
- ':hover': {
134
- vars: {
135
- [vars.color]: themeVars.color.blue[500],
136
- [vars.borderColor]: themeVars.color.blue[500]
137
- }
138
- },
139
- ':focus': {
140
- vars: {
141
- [vars.color]: themeVars.color.blue[500],
142
- [vars.borderColor]: themeVars.color.blue[500]
143
- }
144
- }
145
- },
146
- tertiary: {
147
- vars: {
148
- [vars.color]: themeVars.color.font.default,
149
- [vars.backgroundColor]: themeVars.color.gray[100],
150
- [vars.boxShadowColor]: themeVars.color.blue[100],
151
- [vars.borderColor]: themeVars.color.gray[300]
152
- },
153
- ':hover': {
154
- vars: {
155
- [vars.color]: themeVars.color.font.default,
156
- [vars.backgroundColor]: themeVars.color.gray[250],
157
- [vars.borderColor]: themeVars.color.gray[300]
158
- }
159
- },
160
- ':focus': {
161
- vars: {
162
- [vars.color]: themeVars.color.font.text,
163
- [vars.backgroundColor]: themeVars.color.gray[200],
164
- [vars.borderColor]: themeVars.color.gray[300]
165
- }
166
- }
167
- },
168
- success: {
169
- vars: {
170
- [vars.backgroundColor]: themeVars.color.green[500],
171
- [vars.borderColor]: themeVars.color.green[500],
172
- [vars.boxShadowColor]: themeVars.color.green[500],
173
- [vars.color]: '#FFFFFF'
174
- },
175
- ':hover': {
176
- vars: {
177
- [vars.backgroundColor]: themeVars.color.green[600],
178
- [vars.borderColor]: themeVars.color.green[600],
179
- [vars.color]: '#FFFFFF'
180
- }
181
- },
182
- ':focus': {
183
- vars: {
184
- [vars.borderColor]: themeVars.color.green[600],
185
- [vars.backgroundColor]: themeVars.color.green[600]
186
- }
187
- }
188
- },
189
- warning: {
190
- vars: {
191
- [vars.backgroundColor]: themeVars.color.amber[400],
192
- [vars.borderColor]: themeVars.color.amber[400],
193
- [vars.boxShadowColor]: themeVars.color.amber[400],
194
- [vars.color]: themeVars.color.gray[800]
195
- },
196
- ':hover': {
197
- vars: {
198
- [vars.backgroundColor]: themeVars.color.amber[500],
199
- [vars.borderColor]: themeVars.color.amber[500],
200
- [vars.color]: themeVars.color.gray[900]
201
- }
202
- },
203
- ':focus': {
204
- vars: {
205
- [vars.borderColor]: themeVars.color.amber[500],
206
- [vars.backgroundColor]: themeVars.color.amber[500]
207
- }
208
- }
209
- },
210
- error: {
211
- vars: {
212
- [vars.backgroundColor]: themeVars.color.red[500],
213
- [vars.borderColor]: themeVars.color.red[500],
214
- [vars.boxShadowColor]: themeVars.color.red[500],
215
- [vars.color]: '#FFFFFF'
216
- },
217
- ':hover': {
218
- vars: {
219
- [vars.backgroundColor]: themeVars.color.red[600],
220
- [vars.borderColor]: themeVars.color.red[600]
221
- }
222
- },
223
- ':focus': {
224
- vars: {
225
- [vars.borderColor]: themeVars.color.red[600],
226
- [vars.backgroundColor]: themeVars.color.red[600]
227
- }
228
- }
229
- }
230
- });
231
-
232
- export const secondary = styleVariants({
233
- primary: {
234
- vars: {
235
- [vars.backgroundColor]: themeVars.color.blue[100],
236
- [vars.borderColor]: themeVars.color.blue[100],
237
- [vars.color]: themeVars.color.blue[500]
238
- },
239
- ':hover': {
240
- vars: {
241
- [vars.backgroundColor]: themeVars.color.blue[200],
242
- [vars.borderColor]: themeVars.color.blue[200],
243
- [vars.color]: themeVars.color.blue[600]
244
- }
245
- },
246
- ':focus': {
247
- vars: {
248
- [vars.backgroundColor]: themeVars.color.blue[200],
249
- [vars.borderColor]: themeVars.color.blue[200],
250
- [vars.color]: themeVars.color.blue[600]
251
- }
252
- }
253
- },
254
- dark: {
255
- vars: {
256
- [vars.backgroundColor]: themeVars.color.saxe[100],
257
- [vars.borderColor]: themeVars.color.saxe[100],
258
- [vars.color]: themeVars.color.saxe[700]
259
- },
260
- ':hover': {
261
- vars: {
262
- [vars.backgroundColor]: themeVars.color.saxe[200],
263
- [vars.borderColor]: themeVars.color.saxe[200],
264
- [vars.color]: themeVars.color.saxe[800]
265
- }
266
- },
267
- ':focus': {
268
- vars: {
269
- [vars.backgroundColor]: themeVars.color.saxe[200],
270
- [vars.borderColor]: themeVars.color.saxe[200],
271
- [vars.color]: themeVars.color.saxe[800]
272
- }
273
- }
274
- },
275
- default: {
276
- vars: {
277
- [vars.backgroundColor]: themeVars.color.gray[100],
278
- [vars.borderColor]: themeVars.color.gray[100],
279
- [vars.color]: themeVars.color.gray[500]
280
- },
281
- ':hover': {
282
- vars: {
283
- [vars.backgroundColor]: themeVars.color.gray[200],
284
- [vars.borderColor]: themeVars.color.gray[200],
285
- [vars.color]: themeVars.color.gray[600]
286
- }
287
- },
288
- ':focus': {
289
- vars: {
290
- [vars.backgroundColor]: themeVars.color.gray[200],
291
- [vars.borderColor]: themeVars.color.gray[200],
292
- [vars.color]: themeVars.color.gray[600]
293
- }
294
- }
295
- },
296
- tertiary: {
297
- vars: {
298
- [vars.backgroundColor]: themeVars.color.gray[100],
299
- [vars.borderColor]: themeVars.color.gray[100],
300
- [vars.color]: themeVars.color.gray[400]
301
- },
302
- ':hover': {
303
- vars: {
304
- [vars.backgroundColor]: themeVars.color.gray[200],
305
- [vars.borderColor]: themeVars.color.gray[200],
306
- [vars.color]: themeVars.color.gray[500]
307
- }
308
- },
309
- ':focus': {
310
- vars: {
311
- [vars.backgroundColor]: themeVars.color.gray[200],
312
- [vars.borderColor]: themeVars.color.gray[200],
313
- [vars.color]: themeVars.color.gray[500]
314
- }
315
- }
316
- },
317
- success: {
318
- vars: {
319
- [vars.backgroundColor]: themeVars.color.green[100],
320
- [vars.borderColor]: themeVars.color.green[100],
321
- [vars.color]: themeVars.color.green[600]
322
- },
323
- ':hover': {
324
- vars: {
325
- [vars.backgroundColor]: themeVars.color.green[200],
326
- [vars.borderColor]: themeVars.color.green[200],
327
- [vars.color]: themeVars.color.green[700]
328
- }
329
- },
330
- ':focus': {
331
- vars: {
332
- [vars.backgroundColor]: themeVars.color.green[200],
333
- [vars.borderColor]: themeVars.color.green[200],
334
- [vars.color]: themeVars.color.green[700]
335
- }
336
- }
337
- },
338
- warning: {
339
- vars: {
340
- [vars.backgroundColor]: themeVars.color.amber[100],
341
- [vars.borderColor]: themeVars.color.amber[100],
342
- [vars.color]: themeVars.color.amber[600]
343
- },
344
- ':hover': {
345
- vars: {
346
- [vars.backgroundColor]: themeVars.color.amber[200],
347
- [vars.borderColor]: themeVars.color.amber[200],
348
- [vars.color]: themeVars.color.amber[700]
349
- }
350
- },
351
- ':focus': {
352
- vars: {
353
- [vars.backgroundColor]: themeVars.color.amber[200],
354
- [vars.borderColor]: themeVars.color.amber[200],
355
- [vars.color]: themeVars.color.amber[700]
356
- }
357
- }
358
- },
359
- error: {
360
- vars: {
361
- [vars.backgroundColor]: themeVars.color.red[100],
362
- [vars.borderColor]: themeVars.color.red[100],
363
- [vars.color]: themeVars.color.red[500]
364
- },
365
- ':hover': {
366
- vars: {
367
- [vars.backgroundColor]: themeVars.color.red[200],
368
- [vars.borderColor]: themeVars.color.red[200],
369
- [vars.color]: themeVars.color.red[600]
370
- }
371
- },
372
- ':focus': {
373
- vars: {
374
- [vars.backgroundColor]: themeVars.color.red[200],
375
- [vars.borderColor]: themeVars.color.red[200],
376
- [vars.color]: themeVars.color.red[600]
377
- }
378
- }
379
- }
380
- });
381
-
382
- export const link = styleVariants({
383
- primary: {
384
- vars: {
385
- [vars.backgroundColor]: 'transparent',
386
- [vars.borderColor]: 'transparent',
387
- [vars.color]: themeVars.color.blue[500]
388
- },
389
- ':hover': {
390
- vars: {
391
- [vars.backgroundColor]: 'transparent',
392
- [vars.borderColor]: 'transparent',
393
- [vars.color]: themeVars.color.blue[600]
394
- },
395
- textDecoration: 'underline'
396
- }
397
- },
398
- dark: {
399
- vars: {
400
- [vars.backgroundColor]: 'transparent',
401
- [vars.borderColor]: 'transparent',
402
- [vars.color]: themeVars.color.saxe[800]
403
- },
404
- ':hover': {
405
- vars: {
406
- [vars.backgroundColor]: 'transparent',
407
- [vars.borderColor]: 'transparent',
408
- [vars.color]: themeVars.color.saxe[900]
409
- },
410
- textDecoration: 'underline'
411
- }
412
- },
413
- default: {
414
- vars: {
415
- [vars.backgroundColor]: 'transparent',
416
- [vars.borderColor]: 'transparent',
417
- [vars.color]: themeVars.color.gray[500]
418
- },
419
- ':hover': {
420
- vars: {
421
- [vars.backgroundColor]: 'transparent',
422
- [vars.borderColor]: 'transparent',
423
- [vars.color]: themeVars.color.gray[600]
424
- },
425
- textDecoration: 'underline'
426
- }
427
- },
428
- tertiary: {
429
- vars: {
430
- [vars.backgroundColor]: 'transparent',
431
- [vars.borderColor]: 'transparent',
432
- [vars.color]: themeVars.color.gray[400]
433
- },
434
- ':hover': {
435
- vars: {
436
- [vars.backgroundColor]: 'transparent',
437
- [vars.borderColor]: 'transparent',
438
- [vars.color]: themeVars.color.gray[500]
439
- },
440
- textDecoration: 'underline'
441
- }
442
- },
443
- success: {
444
- vars: {
445
- [vars.backgroundColor]: 'transparent',
446
- [vars.borderColor]: 'transparent',
447
- [vars.color]: themeVars.color.green[500]
448
- },
449
- ':hover': {
450
- vars: {
451
- [vars.backgroundColor]: 'transparent',
452
- [vars.borderColor]: 'transparent',
453
- [vars.color]: themeVars.color.green[600]
454
- },
455
- textDecoration: 'underline'
456
- }
457
- },
458
- warning: {
459
- vars: {
460
- [vars.backgroundColor]: 'transparent',
461
- [vars.borderColor]: 'transparent',
462
- [vars.color]: themeVars.color.amber[600]
463
- },
464
- ':hover': {
465
- vars: {
466
- [vars.backgroundColor]: 'transparent',
467
- [vars.borderColor]: 'transparent',
468
- [vars.color]: themeVars.color.amber[700]
469
- },
470
- textDecoration: 'underline'
471
- }
472
- },
473
- error: {
474
- vars: {
475
- [vars.backgroundColor]: 'transparent',
476
- [vars.borderColor]: 'transparent',
477
- [vars.color]: themeVars.color.red[500]
478
- },
479
- ':hover': {
480
- vars: {
481
- [vars.backgroundColor]: 'transparent',
482
- [vars.borderColor]: 'transparent',
483
- [vars.color]: themeVars.color.red[600]
484
- },
485
- textDecoration: 'underline'
486
- }
487
- }
488
- });
489
-
490
- export const size = styleVariants({
491
- xs: {
492
- vars: {
493
- [vars.height]: sizes.xs,
494
- [vars.radius]: borderRadiuses.xs,
495
- [vars.padding]: padding.xs
496
- },
497
- fontSize: themeVars.fontSize.small
498
- },
499
- sm: {
500
- vars: {
501
- [vars.height]: sizes.sm,
502
- [vars.radius]: borderRadiuses.sm,
503
- [vars.padding]: padding.sm
504
- },
505
- fontSize: themeVars.fontSize.small
506
- },
507
- md: {
508
- vars: {
509
- [vars.height]: sizes.md,
510
- [vars.radius]: borderRadiuses.md,
511
- [vars.padding]: padding.md
512
- }
513
- },
514
- lg: {
515
- vars: {
516
- [vars.height]: sizes.lg,
517
- [vars.radius]: borderRadiuses.lg,
518
- [vars.padding]: padding.lg
519
- },
520
- fontSize: themeVars.fontSize.large
521
- },
522
- xl: {
523
- vars: {
524
- [vars.height]: sizes.xl,
525
- [vars.radius]: borderRadiuses.xl,
526
- [vars.padding]: padding.xl
527
- },
528
- fontSize: themeVars.fontSize.large
529
- }
530
- });
531
-
532
- const baseBorder = style({
533
- position: 'absolute',
534
- top: 0,
535
- left: 0,
536
- bottom: 0,
537
- right: 0,
538
- pointerEvents: 'none',
539
- borderRadius: 'inherit',
540
- transition: 'border-color 0.2s ease-in-out'
541
- });
542
-
543
- export const border = style([
544
- baseBorder,
545
- {
546
- border: `1px solid ${vars.borderColor}`
547
- }
548
- ]);
549
-
550
- export const borderState = style([
551
- baseBorder,
552
- {
553
- border: `1px solid transparent`,
554
- zIndex: 1
555
- }
556
- ]);
557
-
558
- globalStyle(`${base}:hover ${border}, ${base}:focus ${border}`, {
559
- borderColor: 'transparent'
560
- });
561
-
562
- globalStyle(`${base}:hover ${borderState}, ${base}:focus ${borderState}`, {
563
- borderColor: vars.borderColor
564
- });
565
-
566
- export const wave = style({
567
- position: 'absolute',
568
- top: 0,
569
- left: 0,
570
- bottom: 0,
571
- right: 0,
572
- pointerEvents: 'none',
573
- borderRadius: 'inherit',
574
- animationIterationCount: 1,
575
- animationDuration: '0.5s',
576
- zIndex: 1,
577
- animationTimingFunction:
578
- 'cubic-bezier(0.4, 0, 0.15, 1), cubic-bezier(0.4, 0, 0.4, 1)'
579
- });
580
-
581
- const buttonWaveGrow = 'button-wave-grow';
582
-
583
- globalKeyframes(buttonWaveGrow, {
584
- from: {
585
- boxShadow: `0 0 0.5px 0 ${vars.boxShadowColor}`
586
- },
587
- to: {
588
- boxShadow: `0 0 0.5px 4.4px ${vars.boxShadowColor}`
589
- }
590
- });
591
-
592
- const buttonWaveOpacity = 'button-wave-opacity';
593
-
594
- globalKeyframes(buttonWaveOpacity, {
595
- '0%': {
596
- opacity: 0.5
597
- },
598
- '90%': {
599
- opacity: 0
600
- },
601
- '100%': {
602
- opacity: 0
603
- }
604
- });
605
-
606
- export const waveActive = style({
607
- zIndex: 1,
608
- animationName: `${buttonWaveGrow}, ${buttonWaveOpacity}`
609
- });
610
-
611
- export const iconButton = style({
612
- display: 'flex',
613
- flexGrow: 0,
614
- flexShrink: 0,
615
- fontSize: 0,
616
- lineHeight: 0,
617
- userSelect: 'none',
618
- padding: 'initial',
619
- height: vars.height,
620
- width: vars.height
621
- });
622
-
623
- export const icon = style({
624
- display: 'flex',
625
- flexGrow: 0,
626
- flexShrink: 0,
627
- fontSize: 0,
628
- lineHeight: 0,
629
- userSelect: 'none'
630
- });
631
-
632
- globalStyle(`${icon} > svg`, {
633
- overflow: 'hidden',
634
- pointerEvents: 'none',
635
- maxWidth: '100%',
636
- maxHeight: '100%',
637
- verticalAlign: 'middle'
638
- });
639
-
640
- export const iconLeft = style([
641
- icon,
642
- {
643
- marginRight: themeVars.space[2],
644
- position: 'relative'
645
- }
646
- ]);
647
-
648
- export const iconRight = style({
649
- marginLeft: themeVars.space[2]
650
- });
651
-
652
- export const rounded = style({
653
- borderRadius: '9999px'
654
- });
655
-
656
- export const block = style({
657
- display: 'flex',
658
- width: '100%'
659
- });
660
-
661
- const spinAround = 'spin-around';
662
-
663
- globalKeyframes(spinAround, {
664
- '0%': {
665
- transform: 'rotate(0deg)'
666
- },
667
- '100%': {
668
- transform: 'rotate(360deg)'
669
- }
670
- });
671
-
672
- export const loading = style({
673
- pointerEvents: 'none',
674
- color: 'transparent',
675
- userSelect: 'none',
676
- opacity: 0.75,
677
- selectors: {
678
- [`&:after`]: {
679
- transition: 'all 0.2s ease-in-out',
680
- position: 'absolute',
681
- animationIterationCount: 'infinite',
682
- animationDuration: '0.75s',
683
- animationTimingFunction: 'cubic-bezier(0.8, 0.5, 0.4, 0)',
684
- animationName: spinAround,
685
- borderRadius: themeVars.rounded.full,
686
- borderColor: `transparent transparent ${vars.color} ${vars.color}`,
687
- borderStyle: `solid`,
688
- borderWidth: `2px`,
689
- content: '',
690
- display: `block`,
691
- height: `1em`,
692
- width: `1em`
693
- }
694
- }
695
- });
1
+ import {
2
+ createVar,
3
+ globalKeyframes,
4
+ globalStyle,
5
+ style,
6
+ styleVariants
7
+ } from '@vanilla-extract/css';
8
+ import { themeVars } from '../../../styles/theme.css';
9
+
10
+ const sizes = {
11
+ xs: '22px',
12
+ sm: '28px',
13
+ md: '36px',
14
+ lg: '40px',
15
+ xl: '45px'
16
+ };
17
+
18
+ const borderRadiuses = {
19
+ xs: '2px',
20
+ sm: '3px',
21
+ md: '4px',
22
+ lg: '6px',
23
+ xl: '8px'
24
+ };
25
+
26
+ const padding = {
27
+ xs: `0 ${themeVars.space[1]}`,
28
+ sm: `0 ${themeVars.space[2]}`,
29
+ md: `0 ${themeVars.space[3]}`,
30
+ lg: `0 ${themeVars.space[3]}`,
31
+ xl: `0 ${themeVars.space[4]}`
32
+ };
33
+
34
+ export const vars = {
35
+ height: createVar(),
36
+ radius: createVar(),
37
+ padding: createVar(),
38
+ backgroundColor: createVar(),
39
+ borderColor: createVar(),
40
+ boxShadowColor: createVar(),
41
+ color: createVar()
42
+ };
43
+
44
+ export const base = style({
45
+ alignItems: 'center',
46
+ boxSizing: 'border-box',
47
+ display: 'inline-flex',
48
+ fontSize: themeVars.fontSize.base,
49
+ fontWeight: '500',
50
+ maxWidth: '100%',
51
+ width: 'auto',
52
+ position: 'relative',
53
+ textAlign: 'center',
54
+ textDecoration: 'none',
55
+ verticalAlign: 'middle',
56
+ whiteSpace: 'nowrap',
57
+ justifyContent: 'center',
58
+ height: vars.height,
59
+ lineHeight: vars.height,
60
+ borderRadius: vars.radius,
61
+ padding: vars.padding,
62
+ zIndex: 'auto',
63
+ backgroundColor: vars.backgroundColor,
64
+ border: 0,
65
+ color: vars.color,
66
+ transition: `color .2s ${themeVars.transition.default},
67
+ background-color .25s ${themeVars.transition.default},
68
+ box-shadow .25s ${themeVars.transition.default},
69
+ border-color .25s ${themeVars.transition.default}`,
70
+ fontFamily: 'inherit',
71
+ ':hover': {
72
+ cursor: 'pointer'
73
+ },
74
+ ':focus': {
75
+ outline: 'none'
76
+ },
77
+ selectors: {
78
+ [`a&:hover`]: {
79
+ textDecoration: 'none',
80
+ color: vars.color
81
+ }
82
+ }
83
+ });
84
+
85
+ export const variant = styleVariants({
86
+ primary: {
87
+ vars: {
88
+ [vars.backgroundColor]: themeVars.color.blue[500],
89
+ [vars.borderColor]: themeVars.color.blue[500],
90
+ [vars.boxShadowColor]: themeVars.color.blue[500],
91
+ [vars.color]: '#FFFFFF'
92
+ },
93
+ ':hover': {
94
+ vars: {
95
+ [vars.backgroundColor]: themeVars.color.blue[600],
96
+ [vars.borderColor]: themeVars.color.blue[600]
97
+ }
98
+ },
99
+ ':focus': {
100
+ vars: {
101
+ [vars.backgroundColor]: themeVars.color.blue[600],
102
+ [vars.borderColor]: themeVars.color.blue[600]
103
+ }
104
+ }
105
+ },
106
+ dark: {
107
+ vars: {
108
+ [vars.backgroundColor]: themeVars.color.saxe[700],
109
+ [vars.borderColor]: themeVars.color.saxe[700],
110
+ [vars.boxShadowColor]: themeVars.color.saxe[700],
111
+ [vars.color]: '#FFFFFF'
112
+ },
113
+ ':hover': {
114
+ vars: {
115
+ [vars.backgroundColor]: themeVars.color.saxe[800],
116
+ [vars.borderColor]: themeVars.color.saxe[800]
117
+ }
118
+ },
119
+ ':focus': {
120
+ vars: {
121
+ [vars.backgroundColor]: themeVars.color.saxe[900],
122
+ [vars.borderColor]: themeVars.color.saxe[900]
123
+ }
124
+ }
125
+ },
126
+ default: {
127
+ vars: {
128
+ [vars.color]: themeVars.color.font.text,
129
+ [vars.backgroundColor]: 'white',
130
+ [vars.boxShadowColor]: themeVars.color.blue[500],
131
+ [vars.borderColor]: themeVars.color.gray[300]
132
+ },
133
+ ':hover': {
134
+ vars: {
135
+ [vars.color]: themeVars.color.blue[500],
136
+ [vars.borderColor]: themeVars.color.blue[500]
137
+ }
138
+ },
139
+ ':focus': {
140
+ vars: {
141
+ [vars.color]: themeVars.color.blue[500],
142
+ [vars.borderColor]: themeVars.color.blue[500]
143
+ }
144
+ }
145
+ },
146
+ tertiary: {
147
+ vars: {
148
+ [vars.color]: themeVars.color.gray[600],
149
+ [vars.backgroundColor]: themeVars.color.gray[100],
150
+ [vars.boxShadowColor]: themeVars.color.blue[100],
151
+ [vars.borderColor]: themeVars.color.gray[300]
152
+ },
153
+ ':hover': {
154
+ vars: {
155
+ [vars.color]: themeVars.color.gray[800],
156
+ [vars.backgroundColor]: themeVars.color.gray[250],
157
+ [vars.borderColor]: themeVars.color.gray[300]
158
+ }
159
+ },
160
+ ':focus': {
161
+ vars: {
162
+ [vars.color]: themeVars.color.font.text,
163
+ [vars.backgroundColor]: themeVars.color.gray[200],
164
+ [vars.borderColor]: themeVars.color.gray[300]
165
+ }
166
+ }
167
+ },
168
+ success: {
169
+ vars: {
170
+ [vars.backgroundColor]: themeVars.color.green[500],
171
+ [vars.borderColor]: themeVars.color.green[500],
172
+ [vars.boxShadowColor]: themeVars.color.green[500],
173
+ [vars.color]: '#FFFFFF'
174
+ },
175
+ ':hover': {
176
+ vars: {
177
+ [vars.backgroundColor]: themeVars.color.green[600],
178
+ [vars.borderColor]: themeVars.color.green[600],
179
+ [vars.color]: '#FFFFFF'
180
+ }
181
+ },
182
+ ':focus': {
183
+ vars: {
184
+ [vars.borderColor]: themeVars.color.green[600],
185
+ [vars.backgroundColor]: themeVars.color.green[600]
186
+ }
187
+ }
188
+ },
189
+ warning: {
190
+ vars: {
191
+ [vars.backgroundColor]: themeVars.color.amber[400],
192
+ [vars.borderColor]: themeVars.color.amber[400],
193
+ [vars.boxShadowColor]: themeVars.color.amber[400],
194
+ [vars.color]: themeVars.color.gray[800]
195
+ },
196
+ ':hover': {
197
+ vars: {
198
+ [vars.backgroundColor]: themeVars.color.amber[500],
199
+ [vars.borderColor]: themeVars.color.amber[500],
200
+ [vars.color]: themeVars.color.gray[900]
201
+ }
202
+ },
203
+ ':focus': {
204
+ vars: {
205
+ [vars.borderColor]: themeVars.color.amber[500],
206
+ [vars.backgroundColor]: themeVars.color.amber[500]
207
+ }
208
+ }
209
+ },
210
+ error: {
211
+ vars: {
212
+ [vars.backgroundColor]: themeVars.color.red[500],
213
+ [vars.borderColor]: themeVars.color.red[500],
214
+ [vars.boxShadowColor]: themeVars.color.red[500],
215
+ [vars.color]: '#FFFFFF'
216
+ },
217
+ ':hover': {
218
+ vars: {
219
+ [vars.backgroundColor]: themeVars.color.red[600],
220
+ [vars.borderColor]: themeVars.color.red[600]
221
+ }
222
+ },
223
+ ':focus': {
224
+ vars: {
225
+ [vars.borderColor]: themeVars.color.red[600],
226
+ [vars.backgroundColor]: themeVars.color.red[600]
227
+ }
228
+ }
229
+ }
230
+ });
231
+
232
+ export const secondary = styleVariants({
233
+ primary: {
234
+ vars: {
235
+ [vars.backgroundColor]: themeVars.color.blue[100],
236
+ [vars.borderColor]: themeVars.color.blue[100],
237
+ [vars.color]: themeVars.color.blue[500]
238
+ },
239
+ ':hover': {
240
+ vars: {
241
+ [vars.backgroundColor]: themeVars.color.blue[200],
242
+ [vars.borderColor]: themeVars.color.blue[200],
243
+ [vars.color]: themeVars.color.blue[600]
244
+ }
245
+ },
246
+ ':focus': {
247
+ vars: {
248
+ [vars.backgroundColor]: themeVars.color.blue[200],
249
+ [vars.borderColor]: themeVars.color.blue[200],
250
+ [vars.color]: themeVars.color.blue[600]
251
+ }
252
+ }
253
+ },
254
+ dark: {
255
+ vars: {
256
+ [vars.backgroundColor]: themeVars.color.saxe[100],
257
+ [vars.borderColor]: themeVars.color.saxe[100],
258
+ [vars.color]: themeVars.color.saxe[700]
259
+ },
260
+ ':hover': {
261
+ vars: {
262
+ [vars.backgroundColor]: themeVars.color.saxe[200],
263
+ [vars.borderColor]: themeVars.color.saxe[200],
264
+ [vars.color]: themeVars.color.saxe[800]
265
+ }
266
+ },
267
+ ':focus': {
268
+ vars: {
269
+ [vars.backgroundColor]: themeVars.color.saxe[200],
270
+ [vars.borderColor]: themeVars.color.saxe[200],
271
+ [vars.color]: themeVars.color.saxe[800]
272
+ }
273
+ }
274
+ },
275
+ default: {
276
+ vars: {
277
+ [vars.backgroundColor]: themeVars.color.gray[100],
278
+ [vars.borderColor]: themeVars.color.gray[100],
279
+ [vars.color]: themeVars.color.gray[500]
280
+ },
281
+ ':hover': {
282
+ vars: {
283
+ [vars.backgroundColor]: themeVars.color.gray[200],
284
+ [vars.borderColor]: themeVars.color.gray[200],
285
+ [vars.color]: themeVars.color.gray[600]
286
+ }
287
+ },
288
+ ':focus': {
289
+ vars: {
290
+ [vars.backgroundColor]: themeVars.color.gray[200],
291
+ [vars.borderColor]: themeVars.color.gray[200],
292
+ [vars.color]: themeVars.color.gray[600]
293
+ }
294
+ }
295
+ },
296
+ tertiary: {
297
+ vars: {
298
+ [vars.backgroundColor]: themeVars.color.gray[100],
299
+ [vars.borderColor]: themeVars.color.gray[100],
300
+ [vars.color]: themeVars.color.gray[400]
301
+ },
302
+ ':hover': {
303
+ vars: {
304
+ [vars.backgroundColor]: themeVars.color.gray[200],
305
+ [vars.borderColor]: themeVars.color.gray[200],
306
+ [vars.color]: themeVars.color.gray[500]
307
+ }
308
+ },
309
+ ':focus': {
310
+ vars: {
311
+ [vars.backgroundColor]: themeVars.color.gray[200],
312
+ [vars.borderColor]: themeVars.color.gray[200],
313
+ [vars.color]: themeVars.color.gray[500]
314
+ }
315
+ }
316
+ },
317
+ success: {
318
+ vars: {
319
+ [vars.backgroundColor]: themeVars.color.green[100],
320
+ [vars.borderColor]: themeVars.color.green[100],
321
+ [vars.color]: themeVars.color.green[600]
322
+ },
323
+ ':hover': {
324
+ vars: {
325
+ [vars.backgroundColor]: themeVars.color.green[200],
326
+ [vars.borderColor]: themeVars.color.green[200],
327
+ [vars.color]: themeVars.color.green[700]
328
+ }
329
+ },
330
+ ':focus': {
331
+ vars: {
332
+ [vars.backgroundColor]: themeVars.color.green[200],
333
+ [vars.borderColor]: themeVars.color.green[200],
334
+ [vars.color]: themeVars.color.green[700]
335
+ }
336
+ }
337
+ },
338
+ warning: {
339
+ vars: {
340
+ [vars.backgroundColor]: themeVars.color.amber[100],
341
+ [vars.borderColor]: themeVars.color.amber[100],
342
+ [vars.color]: themeVars.color.amber[600]
343
+ },
344
+ ':hover': {
345
+ vars: {
346
+ [vars.backgroundColor]: themeVars.color.amber[200],
347
+ [vars.borderColor]: themeVars.color.amber[200],
348
+ [vars.color]: themeVars.color.amber[700]
349
+ }
350
+ },
351
+ ':focus': {
352
+ vars: {
353
+ [vars.backgroundColor]: themeVars.color.amber[200],
354
+ [vars.borderColor]: themeVars.color.amber[200],
355
+ [vars.color]: themeVars.color.amber[700]
356
+ }
357
+ }
358
+ },
359
+ error: {
360
+ vars: {
361
+ [vars.backgroundColor]: themeVars.color.red[100],
362
+ [vars.borderColor]: themeVars.color.red[100],
363
+ [vars.color]: themeVars.color.red[500]
364
+ },
365
+ ':hover': {
366
+ vars: {
367
+ [vars.backgroundColor]: themeVars.color.red[200],
368
+ [vars.borderColor]: themeVars.color.red[200],
369
+ [vars.color]: themeVars.color.red[600]
370
+ }
371
+ },
372
+ ':focus': {
373
+ vars: {
374
+ [vars.backgroundColor]: themeVars.color.red[200],
375
+ [vars.borderColor]: themeVars.color.red[200],
376
+ [vars.color]: themeVars.color.red[600]
377
+ }
378
+ }
379
+ }
380
+ });
381
+
382
+ export const link = styleVariants({
383
+ primary: {
384
+ vars: {
385
+ [vars.backgroundColor]: 'transparent',
386
+ [vars.borderColor]: 'transparent',
387
+ [vars.color]: themeVars.color.blue[500]
388
+ },
389
+ ':hover': {
390
+ vars: {
391
+ [vars.backgroundColor]: 'transparent',
392
+ [vars.borderColor]: 'transparent',
393
+ [vars.color]: themeVars.color.blue[600]
394
+ },
395
+ textDecoration: 'underline'
396
+ }
397
+ },
398
+ dark: {
399
+ vars: {
400
+ [vars.backgroundColor]: 'transparent',
401
+ [vars.borderColor]: 'transparent',
402
+ [vars.color]: themeVars.color.saxe[800]
403
+ },
404
+ ':hover': {
405
+ vars: {
406
+ [vars.backgroundColor]: 'transparent',
407
+ [vars.borderColor]: 'transparent',
408
+ [vars.color]: themeVars.color.saxe[900]
409
+ },
410
+ textDecoration: 'underline'
411
+ }
412
+ },
413
+ default: {
414
+ vars: {
415
+ [vars.backgroundColor]: 'transparent',
416
+ [vars.borderColor]: 'transparent',
417
+ [vars.color]: themeVars.color.gray[500]
418
+ },
419
+ ':hover': {
420
+ vars: {
421
+ [vars.backgroundColor]: 'transparent',
422
+ [vars.borderColor]: 'transparent',
423
+ [vars.color]: themeVars.color.gray[600]
424
+ },
425
+ textDecoration: 'underline'
426
+ }
427
+ },
428
+ tertiary: {
429
+ vars: {
430
+ [vars.backgroundColor]: 'transparent',
431
+ [vars.borderColor]: 'transparent',
432
+ [vars.color]: themeVars.color.gray[400]
433
+ },
434
+ ':hover': {
435
+ vars: {
436
+ [vars.backgroundColor]: 'transparent',
437
+ [vars.borderColor]: 'transparent',
438
+ [vars.color]: themeVars.color.gray[500]
439
+ },
440
+ textDecoration: 'underline'
441
+ }
442
+ },
443
+ success: {
444
+ vars: {
445
+ [vars.backgroundColor]: 'transparent',
446
+ [vars.borderColor]: 'transparent',
447
+ [vars.color]: themeVars.color.green[500]
448
+ },
449
+ ':hover': {
450
+ vars: {
451
+ [vars.backgroundColor]: 'transparent',
452
+ [vars.borderColor]: 'transparent',
453
+ [vars.color]: themeVars.color.green[600]
454
+ },
455
+ textDecoration: 'underline'
456
+ }
457
+ },
458
+ warning: {
459
+ vars: {
460
+ [vars.backgroundColor]: 'transparent',
461
+ [vars.borderColor]: 'transparent',
462
+ [vars.color]: themeVars.color.amber[600]
463
+ },
464
+ ':hover': {
465
+ vars: {
466
+ [vars.backgroundColor]: 'transparent',
467
+ [vars.borderColor]: 'transparent',
468
+ [vars.color]: themeVars.color.amber[700]
469
+ },
470
+ textDecoration: 'underline'
471
+ }
472
+ },
473
+ error: {
474
+ vars: {
475
+ [vars.backgroundColor]: 'transparent',
476
+ [vars.borderColor]: 'transparent',
477
+ [vars.color]: themeVars.color.red[500]
478
+ },
479
+ ':hover': {
480
+ vars: {
481
+ [vars.backgroundColor]: 'transparent',
482
+ [vars.borderColor]: 'transparent',
483
+ [vars.color]: themeVars.color.red[600]
484
+ },
485
+ textDecoration: 'underline'
486
+ }
487
+ }
488
+ });
489
+
490
+ export const size = styleVariants({
491
+ xs: {
492
+ vars: {
493
+ [vars.height]: sizes.xs,
494
+ [vars.radius]: borderRadiuses.xs,
495
+ [vars.padding]: padding.xs
496
+ },
497
+ fontSize: themeVars.fontSize.small
498
+ },
499
+ sm: {
500
+ vars: {
501
+ [vars.height]: sizes.sm,
502
+ [vars.radius]: borderRadiuses.sm,
503
+ [vars.padding]: padding.sm
504
+ },
505
+ fontSize: themeVars.fontSize.small
506
+ },
507
+ md: {
508
+ vars: {
509
+ [vars.height]: sizes.md,
510
+ [vars.radius]: borderRadiuses.md,
511
+ [vars.padding]: padding.md
512
+ }
513
+ },
514
+ lg: {
515
+ vars: {
516
+ [vars.height]: sizes.lg,
517
+ [vars.radius]: borderRadiuses.lg,
518
+ [vars.padding]: padding.lg
519
+ },
520
+ fontSize: themeVars.fontSize.large
521
+ },
522
+ xl: {
523
+ vars: {
524
+ [vars.height]: sizes.xl,
525
+ [vars.radius]: borderRadiuses.xl,
526
+ [vars.padding]: padding.xl
527
+ },
528
+ fontSize: themeVars.fontSize.large
529
+ }
530
+ });
531
+
532
+ const baseBorder = style({
533
+ position: 'absolute',
534
+ top: 0,
535
+ left: 0,
536
+ bottom: 0,
537
+ right: 0,
538
+ pointerEvents: 'none',
539
+ borderRadius: 'inherit',
540
+ transition: 'border-color 0.2s ease-in-out'
541
+ });
542
+
543
+ export const border = style([
544
+ baseBorder,
545
+ {
546
+ border: `1px solid ${vars.borderColor}`
547
+ }
548
+ ]);
549
+
550
+ export const borderState = style([
551
+ baseBorder,
552
+ {
553
+ border: `1px solid transparent`,
554
+ zIndex: 1
555
+ }
556
+ ]);
557
+
558
+ globalStyle(`${base}:hover ${border}, ${base}:focus ${border}`, {
559
+ borderColor: 'transparent'
560
+ });
561
+
562
+ globalStyle(`${base}:hover ${borderState}, ${base}:focus ${borderState}`, {
563
+ borderColor: vars.borderColor
564
+ });
565
+
566
+ export const wave = style({
567
+ position: 'absolute',
568
+ top: 0,
569
+ left: 0,
570
+ bottom: 0,
571
+ right: 0,
572
+ pointerEvents: 'none',
573
+ borderRadius: 'inherit',
574
+ animationIterationCount: 1,
575
+ animationDuration: '0.5s',
576
+ zIndex: 1,
577
+ animationTimingFunction:
578
+ 'cubic-bezier(0.4, 0, 0.15, 1), cubic-bezier(0.4, 0, 0.4, 1)'
579
+ });
580
+
581
+ const buttonWaveGrow = 'button-wave-grow';
582
+
583
+ globalKeyframes(buttonWaveGrow, {
584
+ from: {
585
+ boxShadow: `0 0 0.5px 0 ${vars.boxShadowColor}`
586
+ },
587
+ to: {
588
+ boxShadow: `0 0 0.5px 4.4px ${vars.boxShadowColor}`
589
+ }
590
+ });
591
+
592
+ const buttonWaveOpacity = 'button-wave-opacity';
593
+
594
+ globalKeyframes(buttonWaveOpacity, {
595
+ '0%': {
596
+ opacity: 0.5
597
+ },
598
+ '90%': {
599
+ opacity: 0
600
+ },
601
+ '100%': {
602
+ opacity: 0
603
+ }
604
+ });
605
+
606
+ export const waveActive = style({
607
+ zIndex: 1,
608
+ animationName: `${buttonWaveGrow}, ${buttonWaveOpacity}`
609
+ });
610
+
611
+ export const iconButton = style({
612
+ display: 'flex',
613
+ flexGrow: 0,
614
+ flexShrink: 0,
615
+ fontSize: 0,
616
+ lineHeight: 0,
617
+ userSelect: 'none',
618
+ padding: 'initial',
619
+ height: vars.height,
620
+ width: vars.height
621
+ });
622
+
623
+ export const icon = style({
624
+ display: 'flex',
625
+ flexGrow: 0,
626
+ flexShrink: 0,
627
+ fontSize: 0,
628
+ lineHeight: 0,
629
+ userSelect: 'none'
630
+ });
631
+
632
+ globalStyle(`${icon} > svg`, {
633
+ overflow: 'hidden',
634
+ pointerEvents: 'none',
635
+ maxWidth: '100%',
636
+ maxHeight: '100%',
637
+ verticalAlign: 'middle'
638
+ });
639
+
640
+ export const iconLeft = style([
641
+ icon,
642
+ {
643
+ marginRight: themeVars.space[2],
644
+ position: 'relative'
645
+ }
646
+ ]);
647
+
648
+ export const iconRight = style({
649
+ marginLeft: themeVars.space[2]
650
+ });
651
+
652
+ export const rounded = style({
653
+ borderRadius: '9999px'
654
+ });
655
+
656
+ export const block = style({
657
+ display: 'flex',
658
+ width: '100%'
659
+ });
660
+
661
+ const spinAround = 'spin-around';
662
+
663
+ globalKeyframes(spinAround, {
664
+ '0%': {
665
+ transform: 'rotate(0deg)'
666
+ },
667
+ '100%': {
668
+ transform: 'rotate(360deg)'
669
+ }
670
+ });
671
+
672
+ export const loading = style({
673
+ pointerEvents: 'none',
674
+ color: 'transparent',
675
+ userSelect: 'none',
676
+ opacity: 0.75,
677
+ selectors: {
678
+ [`&:after`]: {
679
+ transition: 'all 0.2s ease-in-out',
680
+ position: 'absolute',
681
+ animationIterationCount: 'infinite',
682
+ animationDuration: '0.75s',
683
+ animationTimingFunction: 'cubic-bezier(0.8, 0.5, 0.4, 0)',
684
+ animationName: spinAround,
685
+ borderRadius: themeVars.rounded.full,
686
+ borderColor: `transparent transparent ${vars.color} ${vars.color}`,
687
+ borderStyle: `solid`,
688
+ borderWidth: `2px`,
689
+ content: '',
690
+ display: `block`,
691
+ height: `1em`,
692
+ width: `1em`
693
+ }
694
+ }
695
+ });