@pingux/astro 2.136.1-alpha.3 → 2.137.0-alpha.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 (27) hide show
  1. package/lib/cjs/components/Badge/Badge.stories.js +72 -69
  2. package/lib/cjs/components/Badge/Badge.styles.d.ts +1 -14
  3. package/lib/cjs/components/Badge/Badge.styles.js +3 -8
  4. package/lib/cjs/styles/themeOverrides/nextGenDarkMode/colors.js +5 -4
  5. package/lib/cjs/styles/themeOverrides/nextGenDarkMode/variants/badges.d.ts +71 -54
  6. package/lib/cjs/styles/themeOverrides/nextGenDarkMode/variants/badges.js +99 -52
  7. package/lib/cjs/styles/themes/next-gen/colors/colors.d.ts +10 -1
  8. package/lib/cjs/styles/themes/next-gen/colors/colors.js +11 -4
  9. package/lib/cjs/styles/themes/next-gen/convertedComponentList.d.ts +0 -1
  10. package/lib/cjs/styles/themes/next-gen/convertedComponentList.js +0 -1
  11. package/lib/cjs/styles/themes/next-gen/next-gen.d.ts +686 -29
  12. package/lib/cjs/styles/themes/next-gen/variants/badges.d.ts +597 -4
  13. package/lib/cjs/styles/themes/next-gen/variants/badges.js +90 -37
  14. package/lib/cjs/styles/themes/next-gen/variants/button.d.ts +60 -0
  15. package/lib/cjs/styles/themes/next-gen/variants/button.js +21 -0
  16. package/lib/cjs/styles/themes/next-gen/variants/variants.d.ts +0 -208
  17. package/lib/cjs/styles/themes/next-gen/variants/variants.js +2 -90
  18. package/lib/components/Badge/Badge.stories.js +72 -69
  19. package/lib/components/Badge/Badge.styles.js +3 -8
  20. package/lib/styles/themeOverrides/nextGenDarkMode/colors.js +5 -4
  21. package/lib/styles/themeOverrides/nextGenDarkMode/variants/badges.js +99 -52
  22. package/lib/styles/themes/next-gen/colors/colors.js +9 -3
  23. package/lib/styles/themes/next-gen/convertedComponentList.js +0 -1
  24. package/lib/styles/themes/next-gen/variants/badges.js +90 -37
  25. package/lib/styles/themes/next-gen/variants/button.js +21 -0
  26. package/lib/styles/themes/next-gen/variants/variants.js +1 -83
  27. package/package.json +1 -1
package/lib/cjs/styles/themes/next-gen/variants/badges.d.ts CHANGED
@@ -32,47 +32,188 @@ export declare const badgeDeleteButton: {
32
32
  };
33
33
  export declare const badges: {
34
34
  baseBadge: {
35
+ '& span': {
36
+ color: string;
37
+ fontSize: string;
38
+ fontWeight: number;
39
+ };
40
+ '& button': {
41
+ alignSelf: string;
42
+ p: string;
43
+ bg: string;
44
+ '&.is-hovered': {
45
+ bg: string;
46
+ '& svg': {
47
+ path: {
48
+ fill: string;
49
+ };
50
+ };
51
+ };
52
+ };
53
+ '& svg': {
54
+ path: {
55
+ fill: string;
56
+ };
57
+ };
35
58
  alignItems: string;
36
59
  justifyContent: string;
37
60
  py: string;
38
61
  px: string;
39
62
  borderRadius: string;
63
+ maxHeight: string;
64
+ minHeight: string;
40
65
  fontSize: string;
41
66
  alignSelf: string;
42
67
  display: string;
43
68
  width: string;
69
+ color: string;
70
+ };
71
+ default: {
44
72
  '& span': {
73
+ color: string;
45
74
  fontSize: string;
46
75
  fontWeight: number;
47
76
  };
77
+ '& button': {
78
+ alignSelf: string;
79
+ p: string;
80
+ bg: string;
81
+ '&.is-hovered': {
82
+ bg: string;
83
+ '& svg': {
84
+ path: {
85
+ fill: string;
86
+ };
87
+ };
88
+ };
89
+ };
90
+ '& svg': {
91
+ path: {
92
+ fill: string;
93
+ };
94
+ };
95
+ alignItems: string;
96
+ justifyContent: string;
97
+ py: string;
98
+ px: string;
99
+ borderRadius: string;
100
+ maxHeight: string;
101
+ minHeight: string;
102
+ fontSize: string;
103
+ alignSelf: string;
104
+ display: string;
105
+ width: string;
106
+ color: string;
48
107
  };
49
- default: {
108
+ primary: {
109
+ backgroundColor: string;
110
+ color: string;
111
+ '& span': {
112
+ color: string;
113
+ fontSize: string;
114
+ fontWeight: number;
115
+ };
116
+ '& button': {
117
+ alignSelf: string;
118
+ p: string;
119
+ bg: string;
120
+ '&.is-hovered': {
121
+ bg: string;
122
+ '& svg': {
123
+ path: {
124
+ fill: string;
125
+ };
126
+ };
127
+ };
128
+ };
129
+ '& svg': {
130
+ path: {
131
+ fill: string;
132
+ };
133
+ };
50
134
  alignItems: string;
51
135
  justifyContent: string;
52
136
  py: string;
53
137
  px: string;
54
138
  borderRadius: string;
139
+ maxHeight: string;
140
+ minHeight: string;
55
141
  fontSize: string;
56
142
  alignSelf: string;
57
143
  display: string;
58
144
  width: string;
145
+ };
146
+ countBadge: {
147
+ backgroundColor: string;
59
148
  '& span': {
149
+ color: string;
60
150
  fontSize: string;
61
151
  fontWeight: number;
62
152
  };
153
+ '& button': {
154
+ alignSelf: string;
155
+ p: string;
156
+ bg: string;
157
+ '&.is-hovered': {
158
+ bg: string;
159
+ '& svg': {
160
+ path: {
161
+ fill: string;
162
+ };
163
+ };
164
+ };
165
+ };
166
+ '& svg': {
167
+ path: {
168
+ fill: string;
169
+ };
170
+ };
171
+ alignItems: string;
172
+ justifyContent: string;
173
+ py: string;
174
+ px: string;
175
+ borderRadius: string;
176
+ maxHeight: string;
177
+ minHeight: string;
178
+ fontSize: string;
179
+ alignSelf: string;
180
+ display: string;
181
+ width: string;
182
+ color: string;
63
183
  };
64
- primary: {
184
+ countNeutral: {
65
185
  backgroundColor: string;
186
+ color: string;
66
187
  '& span': {
67
188
  color: string;
68
189
  fontSize: string;
69
190
  fontWeight: number;
70
191
  };
192
+ '& button': {
193
+ alignSelf: string;
194
+ p: string;
195
+ bg: string;
196
+ '&.is-hovered': {
197
+ bg: string;
198
+ '& svg': {
199
+ path: {
200
+ fill: string;
201
+ };
202
+ };
203
+ };
204
+ };
205
+ '& svg': {
206
+ path: {
207
+ fill: string;
208
+ };
209
+ };
71
210
  alignItems: string;
72
211
  justifyContent: string;
73
212
  py: string;
74
213
  px: string;
75
214
  borderRadius: string;
215
+ maxHeight: string;
216
+ minHeight: string;
76
217
  fontSize: string;
77
218
  alignSelf: string;
78
219
  display: string;
@@ -80,16 +221,37 @@ export declare const badges: {
80
221
  };
81
222
  secondary: {
82
223
  backgroundColor: string;
224
+ color: string;
83
225
  '& span': {
84
226
  color: string;
85
227
  fontSize: string;
86
228
  fontWeight: number;
87
229
  };
230
+ '& button': {
231
+ alignSelf: string;
232
+ p: string;
233
+ bg: string;
234
+ '&.is-hovered': {
235
+ bg: string;
236
+ '& svg': {
237
+ path: {
238
+ fill: string;
239
+ };
240
+ };
241
+ };
242
+ };
243
+ '& svg': {
244
+ path: {
245
+ fill: string;
246
+ };
247
+ };
88
248
  alignItems: string;
89
249
  justifyContent: string;
90
250
  py: string;
91
251
  px: string;
92
252
  borderRadius: string;
253
+ maxHeight: string;
254
+ minHeight: string;
93
255
  fontSize: string;
94
256
  alignSelf: string;
95
257
  display: string;
@@ -97,16 +259,37 @@ export declare const badges: {
97
259
  };
98
260
  success: {
99
261
  backgroundColor: string;
262
+ color: string;
100
263
  '& span': {
101
264
  color: string;
102
265
  fontSize: string;
103
266
  fontWeight: number;
104
267
  };
268
+ '& button': {
269
+ alignSelf: string;
270
+ p: string;
271
+ bg: string;
272
+ '&.is-hovered': {
273
+ bg: string;
274
+ '& svg': {
275
+ path: {
276
+ fill: string;
277
+ };
278
+ };
279
+ };
280
+ };
281
+ '& svg': {
282
+ path: {
283
+ fill: string;
284
+ };
285
+ };
105
286
  alignItems: string;
106
287
  justifyContent: string;
107
288
  py: string;
108
289
  px: string;
109
290
  borderRadius: string;
291
+ maxHeight: string;
292
+ minHeight: string;
110
293
  fontSize: string;
111
294
  alignSelf: string;
112
295
  display: string;
@@ -114,16 +297,37 @@ export declare const badges: {
114
297
  };
115
298
  danger: {
116
299
  backgroundColor: string;
300
+ color: string;
117
301
  '& span': {
118
302
  color: string;
119
303
  fontSize: string;
120
304
  fontWeight: number;
121
305
  };
306
+ '& button': {
307
+ alignSelf: string;
308
+ p: string;
309
+ bg: string;
310
+ '&.is-hovered': {
311
+ bg: string;
312
+ '& svg': {
313
+ path: {
314
+ fill: string;
315
+ };
316
+ };
317
+ };
318
+ };
319
+ '& svg': {
320
+ path: {
321
+ fill: string;
322
+ };
323
+ };
122
324
  alignItems: string;
123
325
  justifyContent: string;
124
326
  py: string;
125
327
  px: string;
126
328
  borderRadius: string;
329
+ maxHeight: string;
330
+ minHeight: string;
127
331
  fontSize: string;
128
332
  alignSelf: string;
129
333
  display: string;
@@ -131,16 +335,37 @@ export declare const badges: {
131
335
  };
132
336
  warning: {
133
337
  backgroundColor: string;
338
+ color: string;
134
339
  '& span': {
135
340
  color: string;
136
341
  fontSize: string;
137
342
  fontWeight: number;
138
343
  };
344
+ '& button': {
345
+ alignSelf: string;
346
+ p: string;
347
+ bg: string;
348
+ '&.is-hovered': {
349
+ bg: string;
350
+ '& svg': {
351
+ path: {
352
+ fill: string;
353
+ };
354
+ };
355
+ };
356
+ };
357
+ '& svg': {
358
+ path: {
359
+ fill: string;
360
+ };
361
+ };
139
362
  alignItems: string;
140
363
  justifyContent: string;
141
364
  py: string;
142
365
  px: string;
143
366
  borderRadius: string;
367
+ maxHeight: string;
368
+ minHeight: string;
144
369
  fontSize: string;
145
370
  alignSelf: string;
146
371
  display: string;
@@ -148,16 +373,75 @@ export declare const badges: {
148
373
  };
149
374
  dark: {
150
375
  backgroundColor: string;
376
+ color: string;
151
377
  '& span': {
152
378
  color: string;
153
379
  fontSize: string;
154
380
  fontWeight: number;
155
381
  };
382
+ '& button': {
383
+ alignSelf: string;
384
+ p: string;
385
+ bg: string;
386
+ '&.is-hovered': {
387
+ bg: string;
388
+ '& svg': {
389
+ path: {
390
+ fill: string;
391
+ };
392
+ };
393
+ };
394
+ };
395
+ '& svg': {
396
+ path: {
397
+ fill: string;
398
+ };
399
+ };
156
400
  alignItems: string;
157
401
  justifyContent: string;
158
402
  py: string;
159
403
  px: string;
160
404
  borderRadius: string;
405
+ maxHeight: string;
406
+ minHeight: string;
407
+ fontSize: string;
408
+ alignSelf: string;
409
+ display: string;
410
+ width: string;
411
+ };
412
+ info: {
413
+ backgroundColor: string;
414
+ color: string;
415
+ '& span': {
416
+ color: string;
417
+ fontSize: string;
418
+ fontWeight: number;
419
+ };
420
+ '& button': {
421
+ alignSelf: string;
422
+ p: string;
423
+ bg: string;
424
+ '&.is-hovered': {
425
+ bg: string;
426
+ '& svg': {
427
+ path: {
428
+ fill: string;
429
+ };
430
+ };
431
+ };
432
+ };
433
+ '& svg': {
434
+ path: {
435
+ fill: string;
436
+ };
437
+ };
438
+ alignItems: string;
439
+ justifyContent: string;
440
+ py: string;
441
+ px: string;
442
+ borderRadius: string;
443
+ maxHeight: string;
444
+ minHeight: string;
161
445
  fontSize: string;
162
446
  alignSelf: string;
163
447
  display: string;
@@ -167,39 +451,152 @@ export declare const badges: {
167
451
  backgroundColor: string;
168
452
  paddingRight: string;
169
453
  '& span': {
170
- fontSize: string;
171
454
  color: string;
172
455
  fontWeight: number;
456
+ fontSize: string;
457
+ };
458
+ '& button': {
459
+ alignSelf: string;
460
+ p: string;
461
+ bg: string;
462
+ '&.is-hovered': {
463
+ bg: string;
464
+ '& svg': {
465
+ path: {
466
+ fill: string;
467
+ };
468
+ };
469
+ };
470
+ };
471
+ '& svg': {
472
+ path: {
473
+ fill: string;
474
+ };
173
475
  };
174
476
  alignItems: string;
175
477
  justifyContent: string;
176
478
  py: string;
177
479
  px: string;
178
480
  borderRadius: string;
481
+ maxHeight: string;
482
+ minHeight: string;
179
483
  fontSize: string;
180
484
  alignSelf: string;
181
485
  display: string;
182
486
  width: string;
487
+ color: string;
183
488
  };
184
489
  readOnlyBadge: {
490
+ border: string;
185
491
  '& span': {
492
+ color: string;
493
+ fontWeight: number;
186
494
  fontSize: string;
187
495
  };
496
+ '& button': {
497
+ alignSelf: string;
498
+ p: string;
499
+ bg: string;
500
+ '&.is-hovered': {
501
+ bg: string;
502
+ '& svg': {
503
+ path: {
504
+ fill: string;
505
+ };
506
+ };
507
+ };
508
+ };
509
+ '& svg': {
510
+ path: {
511
+ fill: string;
512
+ };
513
+ };
514
+ alignItems: string;
515
+ justifyContent: string;
516
+ py: string;
517
+ px: string;
518
+ borderRadius: string;
519
+ maxHeight: string;
520
+ minHeight: string;
521
+ fontSize: string;
522
+ alignSelf: string;
523
+ display: string;
524
+ width: string;
525
+ color: string;
526
+ };
527
+ readOnlyFieldBadge: {
528
+ '& span': {
529
+ color: string;
530
+ fontSize: string;
531
+ fontWeight: number;
532
+ };
533
+ border: string;
534
+ '& button': {
535
+ alignSelf: string;
536
+ p: string;
537
+ bg: string;
538
+ '&.is-hovered': {
539
+ bg: string;
540
+ '& svg': {
541
+ path: {
542
+ fill: string;
543
+ };
544
+ };
545
+ };
546
+ };
547
+ '& svg': {
548
+ path: {
549
+ fill: string;
550
+ };
551
+ };
552
+ alignItems: string;
553
+ justifyContent: string;
554
+ py: string;
555
+ px: string;
556
+ borderRadius: string;
557
+ maxHeight: string;
558
+ minHeight: string;
559
+ fontSize: string;
560
+ alignSelf: string;
561
+ display: string;
562
+ width: string;
563
+ color: string;
188
564
  };
189
565
  activeStatusBadge: {
190
566
  minWidth: string;
191
567
  border: string;
192
568
  backgroundColor: string;
569
+ color: string;
193
570
  '& span': {
194
571
  color: string;
195
572
  fontSize: string;
196
573
  fontWeight: number;
197
574
  };
575
+ '& button': {
576
+ alignSelf: string;
577
+ p: string;
578
+ bg: string;
579
+ '&.is-hovered': {
580
+ bg: string;
581
+ '& svg': {
582
+ path: {
583
+ fill: string;
584
+ };
585
+ };
586
+ };
587
+ };
588
+ '& svg': {
589
+ path: {
590
+ fill: string;
591
+ };
592
+ };
198
593
  alignItems: string;
199
594
  justifyContent: string;
200
595
  py: string;
201
596
  px: string;
202
597
  borderRadius: string;
598
+ maxHeight: string;
599
+ minHeight: string;
203
600
  fontSize: string;
204
601
  alignSelf: string;
205
602
  display: string;
@@ -209,16 +606,37 @@ export declare const badges: {
209
606
  minWidth: string;
210
607
  border: string;
211
608
  backgroundColor: string;
609
+ color: string;
212
610
  '& span': {
213
611
  color: string;
214
612
  fontSize: string;
215
613
  fontWeight: number;
216
614
  };
615
+ '& button': {
616
+ alignSelf: string;
617
+ p: string;
618
+ bg: string;
619
+ '&.is-hovered': {
620
+ bg: string;
621
+ '& svg': {
622
+ path: {
623
+ fill: string;
624
+ };
625
+ };
626
+ };
627
+ };
628
+ '& svg': {
629
+ path: {
630
+ fill: string;
631
+ };
632
+ };
217
633
  alignItems: string;
218
634
  justifyContent: string;
219
635
  py: string;
220
636
  px: string;
221
637
  borderRadius: string;
638
+ maxHeight: string;
639
+ minHeight: string;
222
640
  fontSize: string;
223
641
  alignSelf: string;
224
642
  display: string;
@@ -228,16 +646,37 @@ export declare const badges: {
228
646
  minWidth: string;
229
647
  border: string;
230
648
  backgroundColor: string;
649
+ color: string;
231
650
  '& span': {
232
651
  color: string;
233
652
  fontSize: string;
234
653
  fontWeight: number;
235
654
  };
655
+ '& button': {
656
+ alignSelf: string;
657
+ p: string;
658
+ bg: string;
659
+ '&.is-hovered': {
660
+ bg: string;
661
+ '& svg': {
662
+ path: {
663
+ fill: string;
664
+ };
665
+ };
666
+ };
667
+ };
668
+ '& svg': {
669
+ path: {
670
+ fill: string;
671
+ };
672
+ };
236
673
  alignItems: string;
237
674
  justifyContent: string;
238
675
  py: string;
239
676
  px: string;
240
677
  borderRadius: string;
678
+ maxHeight: string;
679
+ minHeight: string;
241
680
  fontSize: string;
242
681
  alignSelf: string;
243
682
  display: string;
@@ -247,16 +686,37 @@ export declare const badges: {
247
686
  minWidth: string;
248
687
  border: string;
249
688
  backgroundColor: string;
689
+ color: string;
250
690
  '& span': {
251
691
  color: string;
252
692
  fontSize: string;
253
693
  fontWeight: number;
254
694
  };
695
+ '& button': {
696
+ alignSelf: string;
697
+ p: string;
698
+ bg: string;
699
+ '&.is-hovered': {
700
+ bg: string;
701
+ '& svg': {
702
+ path: {
703
+ fill: string;
704
+ };
705
+ };
706
+ };
707
+ };
708
+ '& svg': {
709
+ path: {
710
+ fill: string;
711
+ };
712
+ };
255
713
  alignItems: string;
256
714
  justifyContent: string;
257
715
  py: string;
258
716
  px: string;
259
717
  borderRadius: string;
718
+ maxHeight: string;
719
+ minHeight: string;
260
720
  fontSize: string;
261
721
  alignSelf: string;
262
722
  display: string;
@@ -266,16 +726,37 @@ export declare const badges: {
266
726
  minWidth: string;
267
727
  border: string;
268
728
  backgroundColor: string;
729
+ color: string;
269
730
  '& span': {
270
731
  color: string;
271
732
  fontSize: string;
272
733
  fontWeight: number;
273
734
  };
735
+ '& button': {
736
+ alignSelf: string;
737
+ p: string;
738
+ bg: string;
739
+ '&.is-hovered': {
740
+ bg: string;
741
+ '& svg': {
742
+ path: {
743
+ fill: string;
744
+ };
745
+ };
746
+ };
747
+ };
748
+ '& svg': {
749
+ path: {
750
+ fill: string;
751
+ };
752
+ };
274
753
  alignItems: string;
275
754
  justifyContent: string;
276
755
  py: string;
277
756
  px: string;
278
757
  borderRadius: string;
758
+ maxHeight: string;
759
+ minHeight: string;
279
760
  fontSize: string;
280
761
  alignSelf: string;
281
762
  display: string;
@@ -313,21 +794,133 @@ export declare const badges: {
313
794
  };
314
795
  };
315
796
  };
316
- info: {
797
+ itemBadgeWithSlot: {
798
+ bg: string;
799
+ fontWeight: number;
800
+ '& span': {
801
+ color: string;
802
+ fontSize: string;
803
+ fontWeight: number;
804
+ };
805
+ border: string;
806
+ '& button': {
807
+ alignSelf: string;
808
+ p: string;
809
+ bg: string;
810
+ '&.is-hovered': {
811
+ bg: string;
812
+ '& svg': {
813
+ path: {
814
+ fill: string;
815
+ };
816
+ };
817
+ };
818
+ };
819
+ '& svg': {
820
+ path: {
821
+ fill: string;
822
+ };
823
+ };
824
+ alignItems: string;
825
+ justifyContent: string;
826
+ py: string;
827
+ px: string;
828
+ borderRadius: string;
829
+ maxHeight: string;
830
+ minHeight: string;
831
+ fontSize: string;
832
+ alignSelf: string;
833
+ display: string;
834
+ width: string;
835
+ color: string;
836
+ };
837
+ removableBadge: {
838
+ border: string;
839
+ backgroundColor: string;
840
+ color: string;
841
+ '& span': {
842
+ color: string;
843
+ fontSize: string;
844
+ fontWeight: number;
845
+ };
846
+ '& button': {
847
+ alignSelf: string;
848
+ p: string;
849
+ bg: string;
850
+ '&.is-hovered': {
851
+ bg: string;
852
+ '& svg': {
853
+ path: {
854
+ fill: string;
855
+ };
856
+ };
857
+ };
858
+ };
859
+ '& svg': {
860
+ path: {
861
+ fill: string;
862
+ };
863
+ };
864
+ alignItems: string;
865
+ justifyContent: string;
866
+ py: string;
867
+ px: string;
868
+ borderRadius: string;
869
+ maxHeight: string;
870
+ minHeight: string;
871
+ fontSize: string;
872
+ alignSelf: string;
873
+ display: string;
874
+ width: string;
875
+ };
876
+ invertedRemovableBadge: {
317
877
  backgroundColor: string;
878
+ color: string;
318
879
  '& span': {
319
880
  color: string;
320
881
  fontSize: string;
321
882
  fontWeight: number;
322
883
  };
884
+ '& button': {
885
+ alignSelf: string;
886
+ p: string;
887
+ bg: string;
888
+ '&.is-hovered': {
889
+ bg: string;
890
+ '& svg': {
891
+ path: {
892
+ fill: string;
893
+ };
894
+ };
895
+ };
896
+ };
897
+ '& svg': {
898
+ path: {
899
+ fill: string;
900
+ };
901
+ };
323
902
  alignItems: string;
324
903
  justifyContent: string;
325
904
  py: string;
326
905
  px: string;
327
906
  borderRadius: string;
907
+ maxHeight: string;
908
+ minHeight: string;
328
909
  fontSize: string;
329
910
  alignSelf: string;
330
911
  display: string;
331
912
  width: string;
332
913
  };
914
+ errorCalloutBadge: {
915
+ backgroundColor: string;
916
+ };
917
+ infoCalloutBadge: {
918
+ backgroundColor: string;
919
+ };
920
+ successCalloutBadge: {
921
+ backgroundColor: string;
922
+ };
923
+ warningCalloutBadge: {
924
+ backgroundColor: string;
925
+ };
333
926
  };