@razorpay/blade 6.7.0 → 7.0.1

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 +90 -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 +18 -18
  5. package/build/components/index.native.js.map +1 -1
  6. package/build/components/index.web.js +143 -78
  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 +10 -2
package/build/tokens/index.web.js CHANGED
@@ -358,7 +358,7 @@ var typography = {
358
358
  300: 18,
359
359
  400: 20,
360
360
  500: 22,
361
- 600: 25,
361
+ 600: 24,
362
362
  700: 28,
363
363
  800: 32,
364
364
  900: 36,
@@ -367,15 +367,18 @@ var typography = {
367
367
  weight: _objectSpread$1({}, fontWeight)
368
368
  },
369
369
  lineHeights: {
370
- s: 16,
371
- m: 16,
372
- l: 20,
373
- xl: 24,
374
- '2xl': 24,
375
- '3xl': 28,
376
- '4xl': 40,
377
- '5xl': 42,
378
- '6xl': 60
370
+ 0: 0,
371
+ 25: 14,
372
+ 50: 16,
373
+ 75: 18,
374
+ 100: 20,
375
+ 200: 24,
376
+ 300: 24,
377
+ 400: 28,
378
+ 500: 32,
379
+ 600: 40,
380
+ 700: 40,
381
+ 800: 48
379
382
  } // letterSpacings: {},
380
383
 
381
384
  },
@@ -383,33 +386,36 @@ var typography = {
383
386
  fonts: {
384
387
  family: _objectSpread$1({}, fontFamily),
385
388
  size: {
386
- 10: 10,
387
- 25: 11,
389
+ 10: 9,
390
+ 25: 10,
388
391
  50: 11,
389
392
  75: 12,
390
- 100: 15,
391
- 200: 17,
392
- 300: 18,
393
- 400: 20,
394
- 500: 22,
395
- 600: 22,
393
+ 100: 14,
394
+ 200: 16,
395
+ 300: 16,
396
+ 400: 18,
397
+ 500: 20,
398
+ 600: 20,
396
399
  700: 24,
397
400
  800: 28,
398
- 900: 29,
399
- 1000: 29
401
+ 900: 32,
402
+ 1000: 32
400
403
  },
401
404
  weight: _objectSpread$1({}, fontWeight)
402
405
  },
403
406
  lineHeights: {
404
- s: 16,
405
- m: 18,
406
- l: 24,
407
- xl: 28,
408
- '2xl': 24,
409
- '3xl': 28,
410
- '4xl': 32,
411
- '5xl': 30,
412
- '6xl': 40
407
+ 0: 0,
408
+ 25: 14,
409
+ 50: 16,
410
+ 75: 18,
411
+ 100: 20,
412
+ 200: 20,
413
+ 300: 24,
414
+ 400: 24,
415
+ 500: 28,
416
+ 600: 32,
417
+ 700: 40,
418
+ 800: 40
413
419
  } // letterSpacings: {},
414
420
 
415
421
  }
@@ -4799,7 +4805,7 @@ var colors$1 = {
4799
4805
  icon: {
4800
4806
  "default": {
4801
4807
  lowContrast: colors$2.neutral.blueGrayLight[500],
4802
- highContrast: colors$2.neutral.blueGrayLight[300]
4808
+ highContrast: colors$2.neutral.blueGrayLight.a500
4803
4809
  },
4804
4810
  hover: {
4805
4811
  lowContrast: colors$2.neutral.blueGrayLight[800],
@@ -4815,7 +4821,7 @@ var colors$1 = {
4815
4821
  },
4816
4822
  disabled: {
4817
4823
  lowContrast: colors$2.neutral.blueGrayLight[300],
4818
- highContrast: colors$2.neutral.blueGrayLight.a200
4824
+ highContrast: colors$2.neutral.blueGrayLight.a100
4819
4825
  }
4820
4826
  }
4821
4827
  }
@@ -5869,7 +5875,7 @@ var colors$1 = {
5869
5875
  icon: {
5870
5876
  "default": {
5871
5877
  lowContrast: colors$2.neutral.blueGrayDark[400],
5872
- highContrast: colors$2.neutral.blueGrayDark[100]
5878
+ highContrast: colors$2.neutral.blueGrayDark.a200
5873
5879
  },
5874
5880
  hover: {
5875
5881
  lowContrast: colors$2.neutral.blueGrayDark[200],
@@ -5885,7 +5891,7 @@ var colors$1 = {
5885
5891
  },
5886
5892
  disabled: {
5887
5893
  lowContrast: colors$2.neutral.blueGrayDark[600],
5888
- highContrast: colors$2.neutral.blueGrayDark.a200
5894
+ highContrast: colors$2.neutral.blueGrayDark.a100
5889
5895
  }
5890
5896
  }
5891
5897
  }
@@ -6346,19 +6352,19 @@ var colors$1 = {
6346
6352
  border: {
6347
6353
  primary: {
6348
6354
  "default": {
6349
- lowContrast: colors$2.chromatic.crimson[700],
6355
+ lowContrast: colors$2.chromatic.crimson[500],
6350
6356
  highContrast: colors$2.chromatic.crimson[50]
6351
6357
  },
6352
6358
  hover: {
6353
- lowContrast: colors$2.chromatic.crimson[700],
6359
+ lowContrast: colors$2.chromatic.crimson[500],
6354
6360
  highContrast: colors$2.chromatic.crimson[50]
6355
6361
  },
6356
6362
  focus: {
6357
- lowContrast: colors$2.chromatic.crimson[700],
6363
+ lowContrast: colors$2.chromatic.crimson[500],
6358
6364
  highContrast: colors$2.chromatic.crimson[50]
6359
6365
  },
6360
6366
  active: {
6361
- lowContrast: colors$2.chromatic.crimson[700],
6367
+ lowContrast: colors$2.chromatic.crimson[500],
6362
6368
  highContrast: colors$2.chromatic.crimson[50]
6363
6369
  },
6364
6370
  disabled: {
@@ -6370,19 +6376,19 @@ var colors$1 = {
6370
6376
  text: {
6371
6377
  primary: {
6372
6378
  "default": {
6373
- lowContrast: colors$2.chromatic.crimson[500],
6379
+ lowContrast: colors$2.chromatic.crimson[400],
6374
6380
  highContrast: colors$2.chromatic.crimson[50]
6375
6381
  },
6376
6382
  hover: {
6377
- lowContrast: colors$2.chromatic.crimson[500],
6383
+ lowContrast: colors$2.chromatic.crimson[400],
6378
6384
  highContrast: colors$2.chromatic.crimson[50]
6379
6385
  },
6380
6386
  focus: {
6381
- lowContrast: colors$2.chromatic.crimson[500],
6387
+ lowContrast: colors$2.chromatic.crimson[400],
6382
6388
  highContrast: colors$2.chromatic.crimson[50]
6383
6389
  },
6384
6390
  active: {
6385
- lowContrast: colors$2.chromatic.crimson[500],
6391
+ lowContrast: colors$2.chromatic.crimson[400],
6386
6392
  highContrast: colors$2.chromatic.crimson[50]
6387
6393
  },
6388
6394
  disabled: {
@@ -6416,19 +6422,19 @@ var colors$1 = {
6416
6422
  icon: {
6417
6423
  primary: {
6418
6424
  "default": {
6419
- lowContrast: colors$2.chromatic.crimson[500],
6425
+ lowContrast: colors$2.chromatic.crimson[400],
6420
6426
  highContrast: colors$2.chromatic.crimson[50]
6421
6427
  },
6422
6428
  hover: {
6423
- lowContrast: colors$2.chromatic.crimson[500],
6429
+ lowContrast: colors$2.chromatic.crimson[400],
6424
6430
  highContrast: colors$2.chromatic.crimson[50]
6425
6431
  },
6426
6432
  focus: {
6427
- lowContrast: colors$2.chromatic.crimson[500],
6433
+ lowContrast: colors$2.chromatic.crimson[400],
6428
6434
  highContrast: colors$2.chromatic.crimson[50]
6429
6435
  },
6430
6436
  active: {
6431
- lowContrast: colors$2.chromatic.crimson[500],
6437
+ lowContrast: colors$2.chromatic.crimson[400],
6432
6438
  highContrast: colors$2.chromatic.crimson[50]
6433
6439
  },
6434
6440
  disabled: {
@@ -7012,7 +7018,7 @@ var colors = {
7012
7018
  icon: {
7013
7019
  "default": {
7014
7020
  lowContrast: colors$2.neutral.navyGrayLight[500],
7015
- highContrast: colors$2.neutral.navyGrayLight[300]
7021
+ highContrast: colors$2.neutral.navyGrayLight.a500
7016
7022
  },
7017
7023
  hover: {
7018
7024
  lowContrast: colors$2.neutral.navyGrayLight[800],
@@ -7028,7 +7034,7 @@ var colors = {
7028
7034
  },
7029
7035
  disabled: {
7030
7036
  lowContrast: colors$2.neutral.navyGrayLight[300],
7031
- highContrast: colors$2.neutral.navyGrayLight.a200
7037
+ highContrast: colors$2.neutral.navyGrayLight.a100
7032
7038
  }
7033
7039
  }
7034
7040
  }
@@ -8082,7 +8088,7 @@ var colors = {
8082
8088
  icon: {
8083
8089
  "default": {
8084
8090
  lowContrast: colors$2.neutral.navyGrayDark[400],
8085
- highContrast: colors$2.neutral.navyGrayDark[100]
8091
+ highContrast: colors$2.neutral.navyGrayDark.a200
8086
8092
  },
8087
8093
  hover: {
8088
8094
  lowContrast: colors$2.neutral.navyGrayDark[200],
@@ -8098,7 +8104,7 @@ var colors = {
8098
8104
  },
8099
8105
  disabled: {
8100
8106
  lowContrast: colors$2.neutral.navyGrayDark[600],
8101
- highContrast: colors$2.neutral.navyGrayDark.a200
8107
+ highContrast: colors$2.neutral.navyGrayDark.a100
8102
8108
  }
8103
8109
  }
8104
8110
  }
@@ -8230,7 +8236,7 @@ var colors = {
8230
8236
  highContrast: colors$2.neutral.navyGrayDark[0]
8231
8237
  },
8232
8238
  negative: {
8233
- lowContrast: colors$2.chromatic.crimson[600],
8239
+ lowContrast: colors$2.chromatic.crimson[400],
8234
8240
  highContrast: colors$2.neutral.navyGrayDark[0]
8235
8241
  },
8236
8242
  notice: {
@@ -8559,19 +8565,19 @@ var colors = {
8559
8565
  border: {
8560
8566
  primary: {
8561
8567
  "default": {
8562
- lowContrast: colors$2.chromatic.crimson[700],
8568
+ lowContrast: colors$2.chromatic.crimson[500],
8563
8569
  highContrast: colors$2.chromatic.crimson[50]
8564
8570
  },
8565
8571
  hover: {
8566
- lowContrast: colors$2.chromatic.crimson[700],
8572
+ lowContrast: colors$2.chromatic.crimson[500],
8567
8573
  highContrast: colors$2.chromatic.crimson[50]
8568
8574
  },
8569
8575
  focus: {
8570
- lowContrast: colors$2.chromatic.crimson[700],
8576
+ lowContrast: colors$2.chromatic.crimson[500],
8571
8577
  highContrast: colors$2.chromatic.crimson[50]
8572
8578
  },
8573
8579
  active: {
8574
- lowContrast: colors$2.chromatic.crimson[700],
8580
+ lowContrast: colors$2.chromatic.crimson[500],
8575
8581
  highContrast: colors$2.chromatic.crimson[50]
8576
8582
  },
8577
8583
  disabled: {
@@ -8583,19 +8589,19 @@ var colors = {
8583
8589
  text: {
8584
8590
  primary: {
8585
8591
  "default": {
8586
- lowContrast: colors$2.chromatic.crimson[500],
8592
+ lowContrast: colors$2.chromatic.crimson[400],
8587
8593
  highContrast: colors$2.chromatic.crimson[50]
8588
8594
  },
8589
8595
  hover: {
8590
- lowContrast: colors$2.chromatic.crimson[500],
8596
+ lowContrast: colors$2.chromatic.crimson[400],
8591
8597
  highContrast: colors$2.chromatic.crimson[50]
8592
8598
  },
8593
8599
  focus: {
8594
- lowContrast: colors$2.chromatic.crimson[500],
8600
+ lowContrast: colors$2.chromatic.crimson[400],
8595
8601
  highContrast: colors$2.chromatic.crimson[50]
8596
8602
  },
8597
8603
  active: {
8598
- lowContrast: colors$2.chromatic.crimson[500],
8604
+ lowContrast: colors$2.chromatic.crimson[400],
8599
8605
  highContrast: colors$2.chromatic.crimson[50]
8600
8606
  },
8601
8607
  disabled: {
@@ -8629,19 +8635,19 @@ var colors = {
8629
8635
  icon: {
8630
8636
  primary: {
8631
8637
  "default": {
8632
- lowContrast: colors$2.chromatic.crimson[500],
8638
+ lowContrast: colors$2.chromatic.crimson[400],
8633
8639
  highContrast: colors$2.chromatic.crimson[50]
8634
8640
  },
8635
8641
  hover: {
8636
- lowContrast: colors$2.chromatic.crimson[500],
8642
+ lowContrast: colors$2.chromatic.crimson[400],
8637
8643
  highContrast: colors$2.chromatic.crimson[50]
8638
8644
  },
8639
8645
  focus: {
8640
- lowContrast: colors$2.chromatic.crimson[500],
8646
+ lowContrast: colors$2.chromatic.crimson[400],
8641
8647
  highContrast: colors$2.chromatic.crimson[50]
8642
8648
  },
8643
8649
  active: {
8644
- lowContrast: colors$2.chromatic.crimson[500],
8650
+ lowContrast: colors$2.chromatic.crimson[400],
8645
8651
  highContrast: colors$2.chromatic.crimson[50]
8646
8652
  },
8647
8653
  disabled: {