@razorpay/blade 6.7.0 → 7.0.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/CHANGELOG.md +83 -0
  2. package/build/components/index.d.ts +52 -32
  3. package/build/components/index.native.d.ts +52 -32
  4. package/build/components/index.native.js +17 -17
  5. package/build/components/index.native.js.map +1 -1
  6. package/build/components/index.web.js +142 -77
  7. package/build/components/index.web.js.map +1 -1
  8. package/build/css/bankingThemeDarkDesktop.css +29 -26
  9. package/build/css/bankingThemeDarkMobile.css +38 -35
  10. package/build/css/bankingThemeLightDesktop.css +16 -13
  11. package/build/css/bankingThemeLightMobile.css +25 -22
  12. package/build/css/paymentThemeDarkDesktop.css +28 -25
  13. package/build/css/paymentThemeDarkMobile.css +37 -34
  14. package/build/css/paymentThemeLightDesktop.css +16 -13
  15. package/build/css/paymentThemeLightMobile.css +25 -22
  16. package/build/tokens/index.d.ts +82 -52
  17. package/build/tokens/index.native.d.ts +82 -52
  18. package/build/tokens/index.native.js +3 -3
  19. package/build/tokens/index.native.js.map +1 -1
  20. package/build/tokens/index.web.js +68 -62
  21. package/build/tokens/index.web.js.map +1 -1
  22. package/build/utils/index.native.js +1 -1
  23. package/build/utils/index.native.js.map +1 -1
  24. package/build/utils/index.web.js +35 -29
  25. package/build/utils/index.web.js.map +1 -1
  26. package/codemods/migrate-typography/transformers/migrate-typography.ts +33 -0
  27. package/package.json +9 -2
package/build/css/paymentThemeLightDesktop.css CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Fri, 31 Mar 2023 08:00:38 GMT
3
+ * Generated on Tue, 11 Apr 2023 07:35:16 GMT
4
4
  */
5
5
 
6
6
  :root {
@@ -41,7 +41,7 @@
41
41
  --colors-surface-text-placeholder-low-contrast: hsla(214, 18%, 69%, 1);
42
42
  --colors-surface-text-placeholder-high-contrast: hsla(216, 15%, 54%, 1);
43
43
  --colors-surface-action-icon-default-low-contrast: hsla(214, 18%, 69%, 1);
44
- --colors-surface-action-icon-default-high-contrast: hsla(216, 19%, 89%, 1);
44
+ --colors-surface-action-icon-default-high-contrast: hsla(214, 21%, 94%, 0.32);
45
45
  --colors-surface-action-icon-hover-low-contrast: hsla(217, 18%, 45%, 1);
46
46
  --colors-surface-action-icon-hover-high-contrast: hsla(0, 0%, 100%, 1);
47
47
  --colors-surface-action-icon-focus-low-contrast: hsla(217, 18%, 45%, 1);
@@ -49,7 +49,7 @@
49
49
  --colors-surface-action-icon-active-low-contrast: hsla(217, 18%, 45%, 1);
50
50
  --colors-surface-action-icon-active-high-contrast: hsla(0, 0%, 100%, 1);
51
51
  --colors-surface-action-icon-disabled-low-contrast: hsla(216, 19%, 89%, 1);
52
- --colors-surface-action-icon-disabled-high-contrast: hsla(216, 15%, 54%, 0.32);
52
+ --colors-surface-action-icon-disabled-high-contrast: hsla(216, 15%, 54%, 0.18);
53
53
  --colors-overlay-background: hsla(216, 15%, 54%, 0.32);
54
54
  --colors-brand-primary-300: hsla(218, 89%, 51%, 0.09);
55
55
  --colors-brand-primary-400: hsla(218, 89%, 51%, 0.18);
@@ -565,20 +565,23 @@
565
565
  --typography-fonts-size-300: 1.125rem;
566
566
  --typography-fonts-size-400: 1.25rem;
567
567
  --typography-fonts-size-500: 1.375rem;
568
- --typography-fonts-size-600: 1.5625rem;
568
+ --typography-fonts-size-600: 1.5rem;
569
569
  --typography-fonts-size-700: 1.75rem;
570
570
  --typography-fonts-size-800: 2rem;
571
571
  --typography-fonts-size-900: 2.25rem;
572
572
  --typography-fonts-size-1000: 2.5rem;
573
573
  --typography-fonts-weight-regular: 400;
574
574
  --typography-fonts-weight-bold: 700;
575
- --typography-line-heights-s: 1rem;
576
- --typography-line-heights-m: 1rem;
577
- --typography-line-heights-l: 1.25rem;
578
- --typography-line-heights-xl: 1.5rem;
579
- --typography-line-heights-2xl: 1.5rem;
580
- --typography-line-heights-3xl: 1.75rem;
581
- --typography-line-heights-4xl: 2.5rem;
582
- --typography-line-heights-5xl: 2.625rem;
583
- --typography-line-heights-6xl: 3.75rem;
575
+ --typography-line-heights-0: 0rem;
576
+ --typography-line-heights-25: 0.875rem;
577
+ --typography-line-heights-50: 1rem;
578
+ --typography-line-heights-75: 1.125rem;
579
+ --typography-line-heights-100: 1.25rem;
580
+ --typography-line-heights-200: 1.5rem;
581
+ --typography-line-heights-300: 1.5rem;
582
+ --typography-line-heights-400: 1.75rem;
583
+ --typography-line-heights-500: 2rem;
584
+ --typography-line-heights-600: 2.5rem;
585
+ --typography-line-heights-700: 2.5rem;
586
+ --typography-line-heights-800: 3rem;
584
587
  }
package/build/css/paymentThemeLightMobile.css CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Fri, 31 Mar 2023 08:00:38 GMT
3
+ * Generated on Tue, 11 Apr 2023 07:35:16 GMT
4
4
  */
5
5
 
6
6
  :root {
@@ -41,7 +41,7 @@
41
41
  --colors-surface-text-placeholder-low-contrast: hsla(214, 18%, 69%, 1);
42
42
  --colors-surface-text-placeholder-high-contrast: hsla(216, 15%, 54%, 1);
43
43
  --colors-surface-action-icon-default-low-contrast: hsla(214, 18%, 69%, 1);
44
- --colors-surface-action-icon-default-high-contrast: hsla(216, 19%, 89%, 1);
44
+ --colors-surface-action-icon-default-high-contrast: hsla(214, 21%, 94%, 0.32);
45
45
  --colors-surface-action-icon-hover-low-contrast: hsla(217, 18%, 45%, 1);
46
46
  --colors-surface-action-icon-hover-high-contrast: hsla(0, 0%, 100%, 1);
47
47
  --colors-surface-action-icon-focus-low-contrast: hsla(217, 18%, 45%, 1);
@@ -49,7 +49,7 @@
49
49
  --colors-surface-action-icon-active-low-contrast: hsla(217, 18%, 45%, 1);
50
50
  --colors-surface-action-icon-active-high-contrast: hsla(0, 0%, 100%, 1);
51
51
  --colors-surface-action-icon-disabled-low-contrast: hsla(216, 19%, 89%, 1);
52
- --colors-surface-action-icon-disabled-high-contrast: hsla(216, 15%, 54%, 0.32);
52
+ --colors-surface-action-icon-disabled-high-contrast: hsla(216, 15%, 54%, 0.18);
53
53
  --colors-overlay-background: hsla(216, 15%, 54%, 0.32);
54
54
  --colors-brand-primary-300: hsla(218, 89%, 51%, 0.09);
55
55
  --colors-brand-primary-400: hsla(218, 89%, 51%, 0.18);
@@ -556,29 +556,32 @@
556
556
  --shadows-android-elevation-level-5: 5;
557
557
  --typography-fonts-family-text: Lato, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
558
558
  --typography-fonts-family-code: monospace;
559
- --typography-fonts-size-10: 0.625rem;
560
- --typography-fonts-size-25: 0.6875rem;
559
+ --typography-fonts-size-10: 0.5625rem;
560
+ --typography-fonts-size-25: 0.625rem;
561
561
  --typography-fonts-size-50: 0.6875rem;
562
562
  --typography-fonts-size-75: 0.75rem;
563
- --typography-fonts-size-100: 0.9375rem;
564
- --typography-fonts-size-200: 1.0625rem;
565
- --typography-fonts-size-300: 1.125rem;
566
- --typography-fonts-size-400: 1.25rem;
567
- --typography-fonts-size-500: 1.375rem;
568
- --typography-fonts-size-600: 1.375rem;
563
+ --typography-fonts-size-100: 0.875rem;
564
+ --typography-fonts-size-200: 1rem;
565
+ --typography-fonts-size-300: 1rem;
566
+ --typography-fonts-size-400: 1.125rem;
567
+ --typography-fonts-size-500: 1.25rem;
568
+ --typography-fonts-size-600: 1.25rem;
569
569
  --typography-fonts-size-700: 1.5rem;
570
570
  --typography-fonts-size-800: 1.75rem;
571
- --typography-fonts-size-900: 1.8125rem;
572
- --typography-fonts-size-1000: 1.8125rem;
571
+ --typography-fonts-size-900: 2rem;
572
+ --typography-fonts-size-1000: 2rem;
573
573
  --typography-fonts-weight-regular: 400;
574
574
  --typography-fonts-weight-bold: 700;
575
- --typography-line-heights-s: 1rem;
576
- --typography-line-heights-m: 1.125rem;
577
- --typography-line-heights-l: 1.5rem;
578
- --typography-line-heights-xl: 1.75rem;
579
- --typography-line-heights-2xl: 1.5rem;
580
- --typography-line-heights-3xl: 1.75rem;
581
- --typography-line-heights-4xl: 2rem;
582
- --typography-line-heights-5xl: 1.875rem;
583
- --typography-line-heights-6xl: 2.5rem;
575
+ --typography-line-heights-0: 0rem;
576
+ --typography-line-heights-25: 0.875rem;
577
+ --typography-line-heights-50: 1rem;
578
+ --typography-line-heights-75: 1.125rem;
579
+ --typography-line-heights-100: 1.25rem;
580
+ --typography-line-heights-200: 1.25rem;
581
+ --typography-line-heights-300: 1.5rem;
582
+ --typography-line-heights-400: 1.5rem;
583
+ --typography-line-heights-500: 1.75rem;
584
+ --typography-line-heights-600: 2rem;
585
+ --typography-line-heights-700: 2.5rem;
586
+ --typography-line-heights-800: 2.5rem;
584
587
  }
package/build/tokens/index.d.ts CHANGED
@@ -200,12 +200,12 @@ declare type FontWeight$1 = {
200
200
  declare type FontSize$1 = {
201
201
  /** desktop: 9(px/rem/pt)
202
202
  *
203
- * mobile: 10(px/rem/pt)
203
+ * mobile: 9(px/rem/pt)
204
204
  */
205
205
  10: number;
206
206
  /** desktop: 10(px/rem/pt)
207
207
  *
208
- * mobile: 11(px/rem/pt)
208
+ * mobile: 10(px/rem/pt)
209
209
  */
210
210
  25: number;
211
211
  /** desktop: 11(px/rem/pt)
@@ -220,32 +220,32 @@ declare type FontSize$1 = {
220
220
  75: number;
221
221
  /** desktop: 14(px/rem/pt)
222
222
  *
223
- * mobile: 15(px/rem/pt)
223
+ * mobile: 14(px/rem/pt)
224
224
  */
225
225
  100: number;
226
226
  /** desktop: 16(px/rem/pt)
227
227
  *
228
- * mobile: 17(px/rem/pt)
228
+ * mobile: 16(px/rem/pt)
229
229
  */
230
230
  200: number;
231
231
  /** desktop: 18(px/rem/pt)
232
232
  *
233
- * mobile: 18(px/rem/pt)
233
+ * mobile: 16(px/rem/pt)
234
234
  */
235
235
  300: number;
236
236
  /** desktop: 20(px/rem/pt)
237
237
  *
238
- * mobile: 20(px/rem/pt)
238
+ * mobile: 18(px/rem/pt)
239
239
  */
240
240
  400: number;
241
241
  /** desktop: 22(px/rem/pt)
242
242
  *
243
- * mobile: 22(px/rem/pt)
243
+ * mobile: 20(px/rem/pt)
244
244
  */
245
245
  500: number;
246
- /** desktop: 25(px/rem/pt)
246
+ /** desktop: 24(px/rem/pt)
247
247
  *
248
- * mobile: 22(px/rem/pt)
248
+ * mobile: 20(px/rem/pt)
249
249
  */
250
250
  600: number;
251
251
  /** desktop: 28(px/rem/pt)
@@ -260,12 +260,12 @@ declare type FontSize$1 = {
260
260
  800: number;
261
261
  /** desktop: 36(px/rem/pt)
262
262
  *
263
- * mobile: 29(px/rem/pt)
263
+ * mobile: 32(px/rem/pt)
264
264
  */
265
265
  900: number;
266
266
  /** desktop: 40(px/rem/pt)
267
267
  *
268
- * mobile: 29(px/rem/pt)
268
+ * mobile: 32(px/rem/pt)
269
269
  */
270
270
  1000: number;
271
271
  };
@@ -276,51 +276,66 @@ declare type Typography$1 = {
276
276
  weight: FontWeight$1;
277
277
  };
278
278
  lineHeights: {
279
+ /** desktop: 0(px/rem/pt)
280
+ *
281
+ * mobile: 0(px/rem/pt)
282
+ */
283
+ 0: number;
284
+ /** desktop: 14(px/rem/pt)
285
+ *
286
+ * mobile: 14(px/rem/pt)
287
+ */
288
+ 25: number;
279
289
  /** desktop: 16(px/rem/pt)
280
290
  *
281
291
  * mobile: 16(px/rem/pt)
282
292
  */
283
- s: number;
284
- /** desktop: 16(px/rem/pt)
293
+ 50: number;
294
+ /** desktop: 18(px/rem/pt)
285
295
  *
286
296
  * mobile: 18(px/rem/pt)
287
297
  */
288
- m: number;
298
+ 75: number;
289
299
  /** desktop: 20(px/rem/pt)
290
300
  *
291
- * mobile: 24(px/rem/pt)
301
+ * mobile: 20(px/rem/pt)
292
302
  */
293
- l: number;
303
+ 100: number;
294
304
  /** desktop: 24(px/rem/pt)
295
305
  *
296
- * mobile: 28(px/rem/pt)
306
+ * mobile: 20(px/rem/pt)
297
307
  */
298
- xl: number;
308
+ 200: number;
299
309
  /** desktop: 24(px/rem/pt)
300
310
  *
301
311
  * mobile: 24(px/rem/pt)
302
312
  */
303
- '2xl': number;
313
+ 300: number;
304
314
  /** desktop: 28(px/rem/pt)
315
+ *
316
+ * mobile: 24(px/rem/pt)
317
+ */
318
+ 400: number;
319
+ /** desktop: 32(px/rem/pt)
305
320
  *
306
321
  * mobile: 28(px/rem/pt)
307
322
  */
308
- '3xl': number;
323
+ 500: number;
309
324
  /** desktop: 40(px/rem/pt)
310
325
  *
311
326
  * mobile: 32(px/rem/pt)
312
327
  */
313
- '4xl': number;
314
- /** desktop: 42(px/rem/pt)
328
+ 600: number;
329
+ /** desktop: 40(px/rem/pt)
315
330
  *
316
- * mobile: 30(px/rem/pt)
331
+ * mobile: 40(px/rem/pt)
317
332
  */
318
- '5xl': number;
319
- /** desktop: 60(px/rem/pt)
333
+ 700: number;
334
+ /** desktop: 48(px/rem/pt)
320
335
  *
321
336
  * mobile: 40(px/rem/pt)
322
337
  */
323
- '6xl': number;
338
+ 800: number;
324
339
  };
325
340
  };
326
341
 
@@ -477,12 +492,12 @@ type FontWeight = {
477
492
  type FontSize = {
478
493
  /** desktop: 9(px/rem/pt)
479
494
  *
480
- * mobile: 10(px/rem/pt)
495
+ * mobile: 9(px/rem/pt)
481
496
  */
482
497
  10: number;
483
498
  /** desktop: 10(px/rem/pt)
484
499
  *
485
- * mobile: 11(px/rem/pt)
500
+ * mobile: 10(px/rem/pt)
486
501
  */
487
502
  25: number;
488
503
  /** desktop: 11(px/rem/pt)
@@ -497,32 +512,32 @@ type FontSize = {
497
512
  75: number;
498
513
  /** desktop: 14(px/rem/pt)
499
514
  *
500
- * mobile: 15(px/rem/pt)
515
+ * mobile: 14(px/rem/pt)
501
516
  */
502
517
  100: number;
503
518
  /** desktop: 16(px/rem/pt)
504
519
  *
505
- * mobile: 17(px/rem/pt)
520
+ * mobile: 16(px/rem/pt)
506
521
  */
507
522
  200: number;
508
523
  /** desktop: 18(px/rem/pt)
509
524
  *
510
- * mobile: 18(px/rem/pt)
525
+ * mobile: 16(px/rem/pt)
511
526
  */
512
527
  300: number;
513
528
  /** desktop: 20(px/rem/pt)
514
529
  *
515
- * mobile: 20(px/rem/pt)
530
+ * mobile: 18(px/rem/pt)
516
531
  */
517
532
  400: number;
518
533
  /** desktop: 22(px/rem/pt)
519
534
  *
520
- * mobile: 22(px/rem/pt)
535
+ * mobile: 20(px/rem/pt)
521
536
  */
522
537
  500: number;
523
- /** desktop: 25(px/rem/pt)
538
+ /** desktop: 24(px/rem/pt)
524
539
  *
525
- * mobile: 22(px/rem/pt)
540
+ * mobile: 20(px/rem/pt)
526
541
  */
527
542
  600: number;
528
543
  /** desktop: 28(px/rem/pt)
@@ -537,12 +552,12 @@ type FontSize = {
537
552
  800: number;
538
553
  /** desktop: 36(px/rem/pt)
539
554
  *
540
- * mobile: 29(px/rem/pt)
555
+ * mobile: 32(px/rem/pt)
541
556
  */
542
557
  900: number;
543
558
  /** desktop: 40(px/rem/pt)
544
559
  *
545
- * mobile: 29(px/rem/pt)
560
+ * mobile: 32(px/rem/pt)
546
561
  */
547
562
  1000: number;
548
563
  };
@@ -554,51 +569,66 @@ type Typography = {
554
569
  weight: FontWeight;
555
570
  };
556
571
  lineHeights: {
572
+ /** desktop: 0(px/rem/pt)
573
+ *
574
+ * mobile: 0(px/rem/pt)
575
+ */
576
+ 0: number;
577
+ /** desktop: 14(px/rem/pt)
578
+ *
579
+ * mobile: 14(px/rem/pt)
580
+ */
581
+ 25: number;
557
582
  /** desktop: 16(px/rem/pt)
558
583
  *
559
584
  * mobile: 16(px/rem/pt)
560
585
  */
561
- s: number;
562
- /** desktop: 16(px/rem/pt)
586
+ 50: number;
587
+ /** desktop: 18(px/rem/pt)
563
588
  *
564
589
  * mobile: 18(px/rem/pt)
565
590
  */
566
- m: number;
591
+ 75: number;
567
592
  /** desktop: 20(px/rem/pt)
568
593
  *
569
- * mobile: 24(px/rem/pt)
594
+ * mobile: 20(px/rem/pt)
570
595
  */
571
- l: number;
596
+ 100: number;
572
597
  /** desktop: 24(px/rem/pt)
573
598
  *
574
- * mobile: 28(px/rem/pt)
599
+ * mobile: 20(px/rem/pt)
575
600
  */
576
- xl: number;
601
+ 200: number;
577
602
  /** desktop: 24(px/rem/pt)
578
603
  *
579
604
  * mobile: 24(px/rem/pt)
580
605
  */
581
- '2xl': number;
606
+ 300: number;
582
607
  /** desktop: 28(px/rem/pt)
608
+ *
609
+ * mobile: 24(px/rem/pt)
610
+ */
611
+ 400: number;
612
+ /** desktop: 32(px/rem/pt)
583
613
  *
584
614
  * mobile: 28(px/rem/pt)
585
615
  */
586
- '3xl': number;
616
+ 500: number;
587
617
  /** desktop: 40(px/rem/pt)
588
618
  *
589
619
  * mobile: 32(px/rem/pt)
590
620
  */
591
- '4xl': number;
592
- /** desktop: 42(px/rem/pt)
621
+ 600: number;
622
+ /** desktop: 40(px/rem/pt)
593
623
  *
594
- * mobile: 30(px/rem/pt)
624
+ * mobile: 40(px/rem/pt)
595
625
  */
596
- '5xl': number;
597
- /** desktop: 60(px/rem/pt)
626
+ 700: number;
627
+ /** desktop: 48(px/rem/pt)
598
628
  *
599
629
  * mobile: 40(px/rem/pt)
600
630
  */
601
- '6xl': number;
631
+ 800: number;
602
632
  };
603
633
  // letterSpacings: {};
604
634
  };