@razorpay/blade 8.7.0 → 8.8.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/build/components/index.d.ts +2235 -260
  2. package/build/components/index.native.d.ts +1386 -259
  3. package/build/components/index.native.js +19 -13
  4. package/build/components/index.native.js.map +1 -1
  5. package/build/components/index.web.js +4399 -1603
  6. package/build/components/index.web.js.map +1 -1
  7. package/build/css/bankingThemeDarkDesktop.css +2 -2
  8. package/build/css/bankingThemeDarkMobile.css +2 -2
  9. package/build/css/bankingThemeLightDesktop.css +33 -33
  10. package/build/css/bankingThemeLightMobile.css +33 -33
  11. package/build/css/paymentThemeDarkDesktop.css +2 -2
  12. package/build/css/paymentThemeDarkMobile.css +2 -2
  13. package/build/css/paymentThemeLightDesktop.css +33 -33
  14. package/build/css/paymentThemeLightMobile.css +33 -33
  15. package/build/tokens/index.d.ts +11 -4
  16. package/build/tokens/index.native.d.ts +11 -4
  17. package/build/tokens/index.native.js +5 -5
  18. package/build/tokens/index.native.js.map +1 -1
  19. package/build/tokens/index.web.js +92 -77
  20. package/build/tokens/index.web.js.map +1 -1
  21. package/build/utils/index.d.ts +10 -0
  22. package/build/utils/index.native.d.ts +10 -0
  23. package/build/utils/index.native.js +1 -1
  24. package/build/utils/index.native.js.map +1 -1
  25. package/build/utils/index.web.js +10 -0
  26. package/build/utils/index.web.js.map +1 -1
  27. package/package.json +2 -1
package/build/css/bankingThemeDarkDesktop.css CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Mon, 05 Jun 2023 06:03:19 GMT
3
+ * Generated on Fri, 09 Jun 2023 10:27:19 GMT
4
4
  */
5
5
 
6
6
  :root {
@@ -50,7 +50,7 @@
50
50
  --colors-surface-action-icon-active-high-contrast: hsla(0, 0%, 99%, 1);
51
51
  --colors-surface-action-icon-disabled-low-contrast: hsla(230, 23%, 29%, 1);
52
52
  --colors-surface-action-icon-disabled-high-contrast: hsla(233, 11%, 84%, 0.18);
53
- --colors-overlay-background: hsla(231, 11%, 76%, 0.18);
53
+ --colors-overlay-background: hsla(231, 11%, 12%, 0.72);
54
54
  --colors-brand-primary-300: hsla(218, 89%, 51%, 0.18);
55
55
  --colors-brand-primary-400: hsla(218, 89%, 51%, 0.32);
56
56
  --colors-brand-primary-500: hsla(213, 91%, 66%, 1);
package/build/css/bankingThemeDarkMobile.css CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Mon, 05 Jun 2023 06:03:19 GMT
3
+ * Generated on Fri, 09 Jun 2023 10:27:19 GMT
4
4
  */
5
5
 
6
6
  :root {
@@ -50,7 +50,7 @@
50
50
  --colors-surface-action-icon-active-high-contrast: hsla(0, 0%, 99%, 1);
51
51
  --colors-surface-action-icon-disabled-low-contrast: hsla(230, 23%, 29%, 1);
52
52
  --colors-surface-action-icon-disabled-high-contrast: hsla(233, 11%, 84%, 0.18);
53
- --colors-overlay-background: hsla(231, 11%, 76%, 0.18);
53
+ --colors-overlay-background: hsla(231, 11%, 12%, 0.72);
54
54
  --colors-brand-primary-300: hsla(218, 89%, 51%, 0.18);
55
55
  --colors-brand-primary-400: hsla(218, 89%, 51%, 0.32);
56
56
  --colors-brand-primary-500: hsla(213, 91%, 66%, 1);
package/build/css/bankingThemeLightDesktop.css CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Mon, 05 Jun 2023 06:03:19 GMT
3
+ * Generated on Fri, 09 Jun 2023 10:27:19 GMT
4
4
  */
5
5
 
6
6
  :root {
@@ -50,12 +50,12 @@
50
50
  --colors-surface-action-icon-active-high-contrast: hsla(0, 0%, 100%, 1);
51
51
  --colors-surface-action-icon-disabled-low-contrast: hsla(226, 19%, 89%, 1);
52
52
  --colors-surface-action-icon-disabled-high-contrast: hsla(226, 15%, 54%, 0.18);
53
- --colors-overlay-background: hsla(226, 15%, 54%, 0.32);
53
+ --colors-overlay-background: hsla(214, 15%, 18%, 0.64);
54
54
  --colors-brand-primary-300: hsla(218, 89%, 51%, 0.09);
55
55
  --colors-brand-primary-400: hsla(218, 89%, 51%, 0.18);
56
- --colors-brand-primary-500: hsla(213, 89%, 56%, 1);
57
- --colors-brand-primary-600: hsla(218, 89%, 51%, 1);
58
- --colors-brand-primary-700: hsla(223, 95%, 48%, 1);
56
+ --colors-brand-primary-500: hsla(218, 89%, 51%, 1);
57
+ --colors-brand-primary-600: hsla(223, 95%, 48%, 1);
58
+ --colors-brand-primary-700: hsla(227, 100%, 45%, 1);
59
59
  --colors-brand-primary-800: hsla(234, 100%, 34%, 1);
60
60
  --colors-brand-gray-200-low-contrast: hsla(230, 27%, 98%, 1);
61
61
  --colors-brand-gray-200-high-contrast: hsla(226, 33%, 29%, 1);
@@ -414,10 +414,10 @@
414
414
  --colors-feedback-information-action-icon-link-active-high-contrast: hsla(181, 75%, 85%, 1);
415
415
  --colors-feedback-information-action-icon-link-disabled-low-contrast: hsla(193, 100%, 35%, 0.32);
416
416
  --colors-feedback-information-action-icon-link-disabled-high-contrast: hsla(187, 68%, 52%, 1);
417
- --colors-action-background-primary-default: hsla(213, 89%, 56%, 1);
418
- --colors-action-background-primary-hover: hsla(218, 89%, 51%, 1);
419
- --colors-action-background-primary-focus: hsla(223, 95%, 48%, 1);
420
- --colors-action-background-primary-active: hsla(227, 100%, 45%, 1);
417
+ --colors-action-background-primary-default: hsla(218, 89%, 51%, 1);
418
+ --colors-action-background-primary-hover: hsla(223, 95%, 48%, 1);
419
+ --colors-action-background-primary-focus: hsla(227, 100%, 45%, 1);
420
+ --colors-action-background-primary-active: hsla(230, 100%, 42%, 1);
421
421
  --colors-action-background-primary-disabled: hsla(226, 19%, 89%, 1);
422
422
  --colors-action-background-secondary-default: hsla(218, 89%, 51%, 0);
423
423
  --colors-action-background-secondary-hover: hsla(218, 89%, 51%, 0.09);
@@ -429,15 +429,15 @@
429
429
  --colors-action-background-tertiary-focus: hsla(230, 30%, 96%, 1);
430
430
  --colors-action-background-tertiary-active: hsla(224, 21%, 94%, 1);
431
431
  --colors-action-background-tertiary-disabled: hsla(0, 0%, 100%, 1);
432
- --colors-action-border-primary-default: hsla(213, 89%, 56%, 1);
433
- --colors-action-border-primary-hover: hsla(218, 89%, 51%, 1);
434
- --colors-action-border-primary-focus: hsla(223, 95%, 48%, 1);
435
- --colors-action-border-primary-active: hsla(227, 100%, 45%, 1);
432
+ --colors-action-border-primary-default: hsla(218, 89%, 51%, 1);
433
+ --colors-action-border-primary-hover: hsla(223, 95%, 48%, 1);
434
+ --colors-action-border-primary-focus: hsla(227, 100%, 45%, 1);
435
+ --colors-action-border-primary-active: hsla(230, 100%, 42%, 1);
436
436
  --colors-action-border-primary-disabled: hsla(226, 19%, 89%, 1);
437
- --colors-action-border-secondary-default: hsla(213, 89%, 56%, 1);
438
- --colors-action-border-secondary-hover: hsla(213, 89%, 56%, 1);
439
- --colors-action-border-secondary-focus: hsla(213, 89%, 56%, 1);
440
- --colors-action-border-secondary-active: hsla(213, 89%, 56%, 1);
437
+ --colors-action-border-secondary-default: hsla(218, 89%, 51%, 1);
438
+ --colors-action-border-secondary-hover: hsla(218, 89%, 51%, 1);
439
+ --colors-action-border-secondary-focus: hsla(218, 89%, 51%, 1);
440
+ --colors-action-border-secondary-active: hsla(218, 89%, 51%, 1);
441
441
  --colors-action-border-secondary-disabled: hsla(228, 19%, 81%, 1);
442
442
  --colors-action-border-tertiary-default: hsla(228, 19%, 81%, 1);
443
443
  --colors-action-border-tertiary-hover: hsla(228, 19%, 81%, 1);
@@ -449,20 +449,20 @@
449
449
  --colors-action-text-primary-focus: hsla(0, 0%, 100%, 1);
450
450
  --colors-action-text-primary-active: hsla(0, 0%, 100%, 1);
451
451
  --colors-action-text-primary-disabled: hsla(226, 16%, 60%, 1);
452
- --colors-action-text-secondary-default: hsla(213, 89%, 56%, 1);
453
- --colors-action-text-secondary-hover: hsla(213, 89%, 56%, 1);
454
- --colors-action-text-secondary-focus: hsla(213, 89%, 56%, 1);
455
- --colors-action-text-secondary-active: hsla(213, 89%, 56%, 1);
452
+ --colors-action-text-secondary-default: hsla(218, 89%, 51%, 1);
453
+ --colors-action-text-secondary-hover: hsla(218, 89%, 51%, 1);
454
+ --colors-action-text-secondary-focus: hsla(218, 89%, 51%, 1);
455
+ --colors-action-text-secondary-active: hsla(218, 89%, 51%, 1);
456
456
  --colors-action-text-secondary-disabled: hsla(228, 19%, 81%, 1);
457
457
  --colors-action-text-tertiary-default: hsla(226, 33%, 29%, 1);
458
458
  --colors-action-text-tertiary-hover: hsla(226, 33%, 29%, 1);
459
459
  --colors-action-text-tertiary-focus: hsla(226, 33%, 29%, 1);
460
460
  --colors-action-text-tertiary-active: hsla(226, 33%, 29%, 1);
461
461
  --colors-action-text-tertiary-disabled: hsla(228, 19%, 81%, 1);
462
- --colors-action-text-link-default: hsla(213, 89%, 56%, 1);
463
- --colors-action-text-link-hover: hsla(218, 89%, 51%, 1);
464
- --colors-action-text-link-focus: hsla(223, 95%, 48%, 1);
465
- --colors-action-text-link-active: hsla(223, 95%, 48%, 1);
462
+ --colors-action-text-link-default: hsla(218, 89%, 51%, 1);
463
+ --colors-action-text-link-hover: hsla(223, 95%, 48%, 1);
464
+ --colors-action-text-link-focus: hsla(227, 100%, 45%, 1);
465
+ --colors-action-text-link-active: hsla(227, 100%, 45%, 1);
466
466
  --colors-action-text-link-disabled: hsla(228, 19%, 81%, 1);
467
467
  --colors-action-text-link-visited: hsla(268, 100%, 79%, 1);
468
468
  --colors-action-icon-primary-default: hsla(0, 0%, 100%, 1);
@@ -470,20 +470,20 @@
470
470
  --colors-action-icon-primary-focus: hsla(0, 0%, 100%, 1);
471
471
  --colors-action-icon-primary-active: hsla(0, 0%, 100%, 1);
472
472
  --colors-action-icon-primary-disabled: hsla(226, 16%, 60%, 1);
473
- --colors-action-icon-secondary-default: hsla(213, 89%, 56%, 1);
474
- --colors-action-icon-secondary-hover: hsla(213, 89%, 56%, 1);
475
- --colors-action-icon-secondary-focus: hsla(213, 89%, 56%, 1);
476
- --colors-action-icon-secondary-active: hsla(213, 89%, 56%, 1);
473
+ --colors-action-icon-secondary-default: hsla(218, 89%, 51%, 1);
474
+ --colors-action-icon-secondary-hover: hsla(218, 89%, 51%, 1);
475
+ --colors-action-icon-secondary-focus: hsla(218, 89%, 51%, 1);
476
+ --colors-action-icon-secondary-active: hsla(218, 89%, 51%, 1);
477
477
  --colors-action-icon-secondary-disabled: hsla(228, 19%, 81%, 1);
478
478
  --colors-action-icon-tertiary-default: hsla(226, 33%, 29%, 1);
479
479
  --colors-action-icon-tertiary-hover: hsla(226, 33%, 29%, 1);
480
480
  --colors-action-icon-tertiary-focus: hsla(226, 33%, 29%, 1);
481
481
  --colors-action-icon-tertiary-active: hsla(226, 33%, 29%, 1);
482
482
  --colors-action-icon-tertiary-disabled: hsla(228, 19%, 81%, 1);
483
- --colors-action-icon-link-default: hsla(213, 89%, 56%, 1);
484
- --colors-action-icon-link-hover: hsla(218, 89%, 51%, 1);
485
- --colors-action-icon-link-focus: hsla(223, 95%, 48%, 1);
486
- --colors-action-icon-link-active: hsla(223, 95%, 48%, 1);
483
+ --colors-action-icon-link-default: hsla(218, 89%, 51%, 1);
484
+ --colors-action-icon-link-hover: hsla(223, 95%, 48%, 1);
485
+ --colors-action-icon-link-focus: hsla(227, 100%, 45%, 1);
486
+ --colors-action-icon-link-active: hsla(227, 100%, 45%, 1);
487
487
  --colors-action-icon-link-disabled: hsla(228, 19%, 81%, 1);
488
488
  --colors-action-icon-link-visited: hsla(268, 100%, 79%, 1);
489
489
  --colors-badge-background-blue-low-contrast: hsla(218, 89%, 51%, 0.09);
package/build/css/bankingThemeLightMobile.css CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Mon, 05 Jun 2023 06:03:19 GMT
3
+ * Generated on Fri, 09 Jun 2023 10:27:19 GMT
4
4
  */
5
5
 
6
6
  :root {
@@ -50,12 +50,12 @@
50
50
  --colors-surface-action-icon-active-high-contrast: hsla(0, 0%, 100%, 1);
51
51
  --colors-surface-action-icon-disabled-low-contrast: hsla(226, 19%, 89%, 1);
52
52
  --colors-surface-action-icon-disabled-high-contrast: hsla(226, 15%, 54%, 0.18);
53
- --colors-overlay-background: hsla(226, 15%, 54%, 0.32);
53
+ --colors-overlay-background: hsla(214, 15%, 18%, 0.64);
54
54
  --colors-brand-primary-300: hsla(218, 89%, 51%, 0.09);
55
55
  --colors-brand-primary-400: hsla(218, 89%, 51%, 0.18);
56
- --colors-brand-primary-500: hsla(213, 89%, 56%, 1);
57
- --colors-brand-primary-600: hsla(218, 89%, 51%, 1);
58
- --colors-brand-primary-700: hsla(223, 95%, 48%, 1);
56
+ --colors-brand-primary-500: hsla(218, 89%, 51%, 1);
57
+ --colors-brand-primary-600: hsla(223, 95%, 48%, 1);
58
+ --colors-brand-primary-700: hsla(227, 100%, 45%, 1);
59
59
  --colors-brand-primary-800: hsla(234, 100%, 34%, 1);
60
60
  --colors-brand-gray-200-low-contrast: hsla(230, 27%, 98%, 1);
61
61
  --colors-brand-gray-200-high-contrast: hsla(226, 33%, 29%, 1);
@@ -414,10 +414,10 @@
414
414
  --colors-feedback-information-action-icon-link-active-high-contrast: hsla(181, 75%, 85%, 1);
415
415
  --colors-feedback-information-action-icon-link-disabled-low-contrast: hsla(193, 100%, 35%, 0.32);
416
416
  --colors-feedback-information-action-icon-link-disabled-high-contrast: hsla(187, 68%, 52%, 1);
417
- --colors-action-background-primary-default: hsla(213, 89%, 56%, 1);
418
- --colors-action-background-primary-hover: hsla(218, 89%, 51%, 1);
419
- --colors-action-background-primary-focus: hsla(223, 95%, 48%, 1);
420
- --colors-action-background-primary-active: hsla(227, 100%, 45%, 1);
417
+ --colors-action-background-primary-default: hsla(218, 89%, 51%, 1);
418
+ --colors-action-background-primary-hover: hsla(223, 95%, 48%, 1);
419
+ --colors-action-background-primary-focus: hsla(227, 100%, 45%, 1);
420
+ --colors-action-background-primary-active: hsla(230, 100%, 42%, 1);
421
421
  --colors-action-background-primary-disabled: hsla(226, 19%, 89%, 1);
422
422
  --colors-action-background-secondary-default: hsla(218, 89%, 51%, 0);
423
423
  --colors-action-background-secondary-hover: hsla(218, 89%, 51%, 0.09);
@@ -429,15 +429,15 @@
429
429
  --colors-action-background-tertiary-focus: hsla(230, 30%, 96%, 1);
430
430
  --colors-action-background-tertiary-active: hsla(224, 21%, 94%, 1);
431
431
  --colors-action-background-tertiary-disabled: hsla(0, 0%, 100%, 1);
432
- --colors-action-border-primary-default: hsla(213, 89%, 56%, 1);
433
- --colors-action-border-primary-hover: hsla(218, 89%, 51%, 1);
434
- --colors-action-border-primary-focus: hsla(223, 95%, 48%, 1);
435
- --colors-action-border-primary-active: hsla(227, 100%, 45%, 1);
432
+ --colors-action-border-primary-default: hsla(218, 89%, 51%, 1);
433
+ --colors-action-border-primary-hover: hsla(223, 95%, 48%, 1);
434
+ --colors-action-border-primary-focus: hsla(227, 100%, 45%, 1);
435
+ --colors-action-border-primary-active: hsla(230, 100%, 42%, 1);
436
436
  --colors-action-border-primary-disabled: hsla(226, 19%, 89%, 1);
437
- --colors-action-border-secondary-default: hsla(213, 89%, 56%, 1);
438
- --colors-action-border-secondary-hover: hsla(213, 89%, 56%, 1);
439
- --colors-action-border-secondary-focus: hsla(213, 89%, 56%, 1);
440
- --colors-action-border-secondary-active: hsla(213, 89%, 56%, 1);
437
+ --colors-action-border-secondary-default: hsla(218, 89%, 51%, 1);
438
+ --colors-action-border-secondary-hover: hsla(218, 89%, 51%, 1);
439
+ --colors-action-border-secondary-focus: hsla(218, 89%, 51%, 1);
440
+ --colors-action-border-secondary-active: hsla(218, 89%, 51%, 1);
441
441
  --colors-action-border-secondary-disabled: hsla(228, 19%, 81%, 1);
442
442
  --colors-action-border-tertiary-default: hsla(228, 19%, 81%, 1);
443
443
  --colors-action-border-tertiary-hover: hsla(228, 19%, 81%, 1);
@@ -449,20 +449,20 @@
449
449
  --colors-action-text-primary-focus: hsla(0, 0%, 100%, 1);
450
450
  --colors-action-text-primary-active: hsla(0, 0%, 100%, 1);
451
451
  --colors-action-text-primary-disabled: hsla(226, 16%, 60%, 1);
452
- --colors-action-text-secondary-default: hsla(213, 89%, 56%, 1);
453
- --colors-action-text-secondary-hover: hsla(213, 89%, 56%, 1);
454
- --colors-action-text-secondary-focus: hsla(213, 89%, 56%, 1);
455
- --colors-action-text-secondary-active: hsla(213, 89%, 56%, 1);
452
+ --colors-action-text-secondary-default: hsla(218, 89%, 51%, 1);
453
+ --colors-action-text-secondary-hover: hsla(218, 89%, 51%, 1);
454
+ --colors-action-text-secondary-focus: hsla(218, 89%, 51%, 1);
455
+ --colors-action-text-secondary-active: hsla(218, 89%, 51%, 1);
456
456
  --colors-action-text-secondary-disabled: hsla(228, 19%, 81%, 1);
457
457
  --colors-action-text-tertiary-default: hsla(226, 33%, 29%, 1);
458
458
  --colors-action-text-tertiary-hover: hsla(226, 33%, 29%, 1);
459
459
  --colors-action-text-tertiary-focus: hsla(226, 33%, 29%, 1);
460
460
  --colors-action-text-tertiary-active: hsla(226, 33%, 29%, 1);
461
461
  --colors-action-text-tertiary-disabled: hsla(228, 19%, 81%, 1);
462
- --colors-action-text-link-default: hsla(213, 89%, 56%, 1);
463
- --colors-action-text-link-hover: hsla(218, 89%, 51%, 1);
464
- --colors-action-text-link-focus: hsla(223, 95%, 48%, 1);
465
- --colors-action-text-link-active: hsla(223, 95%, 48%, 1);
462
+ --colors-action-text-link-default: hsla(218, 89%, 51%, 1);
463
+ --colors-action-text-link-hover: hsla(223, 95%, 48%, 1);
464
+ --colors-action-text-link-focus: hsla(227, 100%, 45%, 1);
465
+ --colors-action-text-link-active: hsla(227, 100%, 45%, 1);
466
466
  --colors-action-text-link-disabled: hsla(228, 19%, 81%, 1);
467
467
  --colors-action-text-link-visited: hsla(268, 100%, 79%, 1);
468
468
  --colors-action-icon-primary-default: hsla(0, 0%, 100%, 1);
@@ -470,20 +470,20 @@
470
470
  --colors-action-icon-primary-focus: hsla(0, 0%, 100%, 1);
471
471
  --colors-action-icon-primary-active: hsla(0, 0%, 100%, 1);
472
472
  --colors-action-icon-primary-disabled: hsla(226, 16%, 60%, 1);
473
- --colors-action-icon-secondary-default: hsla(213, 89%, 56%, 1);
474
- --colors-action-icon-secondary-hover: hsla(213, 89%, 56%, 1);
475
- --colors-action-icon-secondary-focus: hsla(213, 89%, 56%, 1);
476
- --colors-action-icon-secondary-active: hsla(213, 89%, 56%, 1);
473
+ --colors-action-icon-secondary-default: hsla(218, 89%, 51%, 1);
474
+ --colors-action-icon-secondary-hover: hsla(218, 89%, 51%, 1);
475
+ --colors-action-icon-secondary-focus: hsla(218, 89%, 51%, 1);
476
+ --colors-action-icon-secondary-active: hsla(218, 89%, 51%, 1);
477
477
  --colors-action-icon-secondary-disabled: hsla(228, 19%, 81%, 1);
478
478
  --colors-action-icon-tertiary-default: hsla(226, 33%, 29%, 1);
479
479
  --colors-action-icon-tertiary-hover: hsla(226, 33%, 29%, 1);
480
480
  --colors-action-icon-tertiary-focus: hsla(226, 33%, 29%, 1);
481
481
  --colors-action-icon-tertiary-active: hsla(226, 33%, 29%, 1);
482
482
  --colors-action-icon-tertiary-disabled: hsla(228, 19%, 81%, 1);
483
- --colors-action-icon-link-default: hsla(213, 89%, 56%, 1);
484
- --colors-action-icon-link-hover: hsla(218, 89%, 51%, 1);
485
- --colors-action-icon-link-focus: hsla(223, 95%, 48%, 1);
486
- --colors-action-icon-link-active: hsla(223, 95%, 48%, 1);
483
+ --colors-action-icon-link-default: hsla(218, 89%, 51%, 1);
484
+ --colors-action-icon-link-hover: hsla(223, 95%, 48%, 1);
485
+ --colors-action-icon-link-focus: hsla(227, 100%, 45%, 1);
486
+ --colors-action-icon-link-active: hsla(227, 100%, 45%, 1);
487
487
  --colors-action-icon-link-disabled: hsla(228, 19%, 81%, 1);
488
488
  --colors-action-icon-link-visited: hsla(268, 100%, 79%, 1);
489
489
  --colors-badge-background-blue-low-contrast: hsla(218, 89%, 51%, 0.09);
package/build/css/paymentThemeDarkDesktop.css CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Mon, 05 Jun 2023 06:03:19 GMT
3
+ * Generated on Fri, 09 Jun 2023 10:27:19 GMT
4
4
  */
5
5
 
6
6
  :root {
@@ -50,7 +50,7 @@
50
50
  --colors-surface-action-icon-active-high-contrast: hsla(0, 0%, 99%, 1);
51
51
  --colors-surface-action-icon-disabled-low-contrast: hsla(220, 23%, 29%, 1);
52
52
  --colors-surface-action-icon-disabled-high-contrast: hsla(220, 11%, 84%, 0.18);
53
- --colors-overlay-background: hsla(217, 11%, 76%, 0.18);
53
+ --colors-overlay-background: hsla(231, 11%, 12%, 0.72);
54
54
  --colors-brand-primary-300: hsla(218, 89%, 51%, 0.18);
55
55
  --colors-brand-primary-400: hsla(218, 89%, 51%, 0.32);
56
56
  --colors-brand-primary-500: hsla(213, 91%, 66%, 1);
package/build/css/paymentThemeDarkMobile.css CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Mon, 05 Jun 2023 06:03:19 GMT
3
+ * Generated on Fri, 09 Jun 2023 10:27:19 GMT
4
4
  */
5
5
 
6
6
  :root {
@@ -50,7 +50,7 @@
50
50
  --colors-surface-action-icon-active-high-contrast: hsla(0, 0%, 99%, 1);
51
51
  --colors-surface-action-icon-disabled-low-contrast: hsla(220, 23%, 29%, 1);
52
52
  --colors-surface-action-icon-disabled-high-contrast: hsla(220, 11%, 84%, 0.18);
53
- --colors-overlay-background: hsla(217, 11%, 76%, 0.18);
53
+ --colors-overlay-background: hsla(231, 11%, 12%, 0.72);
54
54
  --colors-brand-primary-300: hsla(218, 89%, 51%, 0.18);
55
55
  --colors-brand-primary-400: hsla(218, 89%, 51%, 0.32);
56
56
  --colors-brand-primary-500: hsla(213, 91%, 66%, 1);
package/build/css/paymentThemeLightDesktop.css CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Mon, 05 Jun 2023 06:03:18 GMT
3
+ * Generated on Fri, 09 Jun 2023 10:27:19 GMT
4
4
  */
5
5
 
6
6
  :root {
@@ -50,12 +50,12 @@
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
52
  --colors-surface-action-icon-disabled-high-contrast: hsla(216, 15%, 54%, 0.18);
53
- --colors-overlay-background: hsla(216, 15%, 54%, 0.32);
53
+ --colors-overlay-background: hsla(214, 15%, 18%, 0.64);
54
54
  --colors-brand-primary-300: hsla(218, 89%, 51%, 0.09);
55
55
  --colors-brand-primary-400: hsla(218, 89%, 51%, 0.18);
56
- --colors-brand-primary-500: hsla(213, 89%, 56%, 1);
57
- --colors-brand-primary-600: hsla(218, 89%, 51%, 1);
58
- --colors-brand-primary-700: hsla(223, 95%, 48%, 1);
56
+ --colors-brand-primary-500: hsla(218, 89%, 51%, 1);
57
+ --colors-brand-primary-600: hsla(223, 95%, 48%, 1);
58
+ --colors-brand-primary-700: hsla(227, 100%, 45%, 1);
59
59
  --colors-brand-primary-800: hsla(234, 100%, 34%, 1);
60
60
  --colors-brand-gray-200-low-contrast: hsla(220, 27%, 98%, 1);
61
61
  --colors-brand-gray-200-high-contrast: hsla(216, 33%, 29%, 1);
@@ -414,10 +414,10 @@
414
414
  --colors-feedback-information-action-icon-link-active-high-contrast: hsla(181, 75%, 85%, 1);
415
415
  --colors-feedback-information-action-icon-link-disabled-low-contrast: hsla(193, 100%, 35%, 0.32);
416
416
  --colors-feedback-information-action-icon-link-disabled-high-contrast: hsla(187, 68%, 52%, 1);
417
- --colors-action-background-primary-default: hsla(213, 89%, 56%, 1);
418
- --colors-action-background-primary-hover: hsla(218, 89%, 51%, 1);
419
- --colors-action-background-primary-focus: hsla(223, 95%, 48%, 1);
420
- --colors-action-background-primary-active: hsla(227, 100%, 45%, 1);
417
+ --colors-action-background-primary-default: hsla(218, 89%, 51%, 1);
418
+ --colors-action-background-primary-hover: hsla(223, 95%, 48%, 1);
419
+ --colors-action-background-primary-focus: hsla(227, 100%, 45%, 1);
420
+ --colors-action-background-primary-active: hsla(230, 100%, 42%, 1);
421
421
  --colors-action-background-primary-disabled: hsla(216, 19%, 89%, 1);
422
422
  --colors-action-background-secondary-default: hsla(218, 89%, 51%, 0);
423
423
  --colors-action-background-secondary-hover: hsla(218, 89%, 51%, 0.09);
@@ -429,15 +429,15 @@
429
429
  --colors-action-background-tertiary-focus: hsla(220, 30%, 96%, 1);
430
430
  --colors-action-background-tertiary-active: hsla(214, 21%, 94%, 1);
431
431
  --colors-action-background-tertiary-disabled: hsla(0, 0%, 100%, 1);
432
- --colors-action-border-primary-default: hsla(213, 89%, 56%, 1);
433
- --colors-action-border-primary-hover: hsla(218, 89%, 51%, 1);
434
- --colors-action-border-primary-focus: hsla(223, 95%, 48%, 1);
435
- --colors-action-border-primary-active: hsla(227, 100%, 45%, 1);
432
+ --colors-action-border-primary-default: hsla(218, 89%, 51%, 1);
433
+ --colors-action-border-primary-hover: hsla(223, 95%, 48%, 1);
434
+ --colors-action-border-primary-focus: hsla(227, 100%, 45%, 1);
435
+ --colors-action-border-primary-active: hsla(230, 100%, 42%, 1);
436
436
  --colors-action-border-primary-disabled: hsla(216, 19%, 89%, 1);
437
- --colors-action-border-secondary-default: hsla(213, 89%, 56%, 1);
438
- --colors-action-border-secondary-hover: hsla(213, 89%, 56%, 1);
439
- --colors-action-border-secondary-focus: hsla(213, 89%, 56%, 1);
440
- --colors-action-border-secondary-active: hsla(213, 89%, 56%, 1);
437
+ --colors-action-border-secondary-default: hsla(218, 89%, 51%, 1);
438
+ --colors-action-border-secondary-hover: hsla(218, 89%, 51%, 1);
439
+ --colors-action-border-secondary-focus: hsla(218, 89%, 51%, 1);
440
+ --colors-action-border-secondary-active: hsla(218, 89%, 51%, 1);
441
441
  --colors-action-border-secondary-disabled: hsla(218, 19%, 81%, 1);
442
442
  --colors-action-border-tertiary-default: hsla(216, 19%, 89%, 1);
443
443
  --colors-action-border-tertiary-hover: hsla(216, 19%, 89%, 1);
@@ -449,20 +449,20 @@
449
449
  --colors-action-text-primary-focus: hsla(0, 0%, 100%, 1);
450
450
  --colors-action-text-primary-active: hsla(0, 0%, 100%, 1);
451
451
  --colors-action-text-primary-disabled: hsla(216, 16%, 60%, 1);
452
- --colors-action-text-secondary-default: hsla(213, 89%, 56%, 1);
453
- --colors-action-text-secondary-hover: hsla(213, 89%, 56%, 1);
454
- --colors-action-text-secondary-focus: hsla(213, 89%, 56%, 1);
455
- --colors-action-text-secondary-active: hsla(213, 89%, 56%, 1);
452
+ --colors-action-text-secondary-default: hsla(218, 89%, 51%, 1);
453
+ --colors-action-text-secondary-hover: hsla(218, 89%, 51%, 1);
454
+ --colors-action-text-secondary-focus: hsla(218, 89%, 51%, 1);
455
+ --colors-action-text-secondary-active: hsla(218, 89%, 51%, 1);
456
456
  --colors-action-text-secondary-disabled: hsla(218, 19%, 81%, 1);
457
457
  --colors-action-text-tertiary-default: hsla(216, 33%, 29%, 1);
458
458
  --colors-action-text-tertiary-hover: hsla(216, 33%, 29%, 1);
459
459
  --colors-action-text-tertiary-focus: hsla(216, 33%, 29%, 1);
460
460
  --colors-action-text-tertiary-active: hsla(216, 33%, 29%, 1);
461
461
  --colors-action-text-tertiary-disabled: hsla(218, 19%, 81%, 1);
462
- --colors-action-text-link-default: hsla(213, 89%, 56%, 1);
463
- --colors-action-text-link-hover: hsla(218, 89%, 51%, 1);
464
- --colors-action-text-link-focus: hsla(223, 95%, 48%, 1);
465
- --colors-action-text-link-active: hsla(223, 95%, 48%, 1);
462
+ --colors-action-text-link-default: hsla(218, 89%, 51%, 1);
463
+ --colors-action-text-link-hover: hsla(223, 95%, 48%, 1);
464
+ --colors-action-text-link-focus: hsla(227, 100%, 45%, 1);
465
+ --colors-action-text-link-active: hsla(227, 100%, 45%, 1);
466
466
  --colors-action-text-link-disabled: hsla(218, 19%, 81%, 1);
467
467
  --colors-action-text-link-visited: hsla(268, 100%, 79%, 1);
468
468
  --colors-action-icon-primary-default: hsla(0, 0%, 100%, 1);
@@ -470,20 +470,20 @@
470
470
  --colors-action-icon-primary-focus: hsla(0, 0%, 100%, 1);
471
471
  --colors-action-icon-primary-active: hsla(0, 0%, 100%, 1);
472
472
  --colors-action-icon-primary-disabled: hsla(216, 16%, 60%, 1);
473
- --colors-action-icon-secondary-default: hsla(213, 89%, 56%, 1);
474
- --colors-action-icon-secondary-hover: hsla(213, 89%, 56%, 1);
475
- --colors-action-icon-secondary-focus: hsla(213, 89%, 56%, 1);
476
- --colors-action-icon-secondary-active: hsla(213, 89%, 56%, 1);
473
+ --colors-action-icon-secondary-default: hsla(218, 89%, 51%, 1);
474
+ --colors-action-icon-secondary-hover: hsla(218, 89%, 51%, 1);
475
+ --colors-action-icon-secondary-focus: hsla(218, 89%, 51%, 1);
476
+ --colors-action-icon-secondary-active: hsla(218, 89%, 51%, 1);
477
477
  --colors-action-icon-secondary-disabled: hsla(218, 19%, 81%, 1);
478
478
  --colors-action-icon-tertiary-default: hsla(216, 33%, 29%, 1);
479
479
  --colors-action-icon-tertiary-hover: hsla(216, 33%, 29%, 1);
480
480
  --colors-action-icon-tertiary-focus: hsla(216, 33%, 29%, 1);
481
481
  --colors-action-icon-tertiary-active: hsla(216, 33%, 29%, 1);
482
482
  --colors-action-icon-tertiary-disabled: hsla(218, 19%, 81%, 1);
483
- --colors-action-icon-link-default: hsla(213, 89%, 56%, 1);
484
- --colors-action-icon-link-hover: hsla(218, 89%, 51%, 1);
485
- --colors-action-icon-link-focus: hsla(223, 95%, 48%, 1);
486
- --colors-action-icon-link-active: hsla(223, 95%, 48%, 1);
483
+ --colors-action-icon-link-default: hsla(218, 89%, 51%, 1);
484
+ --colors-action-icon-link-hover: hsla(223, 95%, 48%, 1);
485
+ --colors-action-icon-link-focus: hsla(227, 100%, 45%, 1);
486
+ --colors-action-icon-link-active: hsla(227, 100%, 45%, 1);
487
487
  --colors-action-icon-link-disabled: hsla(218, 19%, 81%, 1);
488
488
  --colors-action-icon-link-visited: hsla(268, 100%, 79%, 1);
489
489
  --colors-badge-background-blue-low-contrast: hsla(218, 89%, 51%, 0.09);
package/build/css/paymentThemeLightMobile.css CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Mon, 05 Jun 2023 06:03:19 GMT
3
+ * Generated on Fri, 09 Jun 2023 10:27:19 GMT
4
4
  */
5
5
 
6
6
  :root {
@@ -50,12 +50,12 @@
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
52
  --colors-surface-action-icon-disabled-high-contrast: hsla(216, 15%, 54%, 0.18);
53
- --colors-overlay-background: hsla(216, 15%, 54%, 0.32);
53
+ --colors-overlay-background: hsla(214, 15%, 18%, 0.64);
54
54
  --colors-brand-primary-300: hsla(218, 89%, 51%, 0.09);
55
55
  --colors-brand-primary-400: hsla(218, 89%, 51%, 0.18);
56
- --colors-brand-primary-500: hsla(213, 89%, 56%, 1);
57
- --colors-brand-primary-600: hsla(218, 89%, 51%, 1);
58
- --colors-brand-primary-700: hsla(223, 95%, 48%, 1);
56
+ --colors-brand-primary-500: hsla(218, 89%, 51%, 1);
57
+ --colors-brand-primary-600: hsla(223, 95%, 48%, 1);
58
+ --colors-brand-primary-700: hsla(227, 100%, 45%, 1);
59
59
  --colors-brand-primary-800: hsla(234, 100%, 34%, 1);
60
60
  --colors-brand-gray-200-low-contrast: hsla(220, 27%, 98%, 1);
61
61
  --colors-brand-gray-200-high-contrast: hsla(216, 33%, 29%, 1);
@@ -414,10 +414,10 @@
414
414
  --colors-feedback-information-action-icon-link-active-high-contrast: hsla(181, 75%, 85%, 1);
415
415
  --colors-feedback-information-action-icon-link-disabled-low-contrast: hsla(193, 100%, 35%, 0.32);
416
416
  --colors-feedback-information-action-icon-link-disabled-high-contrast: hsla(187, 68%, 52%, 1);
417
- --colors-action-background-primary-default: hsla(213, 89%, 56%, 1);
418
- --colors-action-background-primary-hover: hsla(218, 89%, 51%, 1);
419
- --colors-action-background-primary-focus: hsla(223, 95%, 48%, 1);
420
- --colors-action-background-primary-active: hsla(227, 100%, 45%, 1);
417
+ --colors-action-background-primary-default: hsla(218, 89%, 51%, 1);
418
+ --colors-action-background-primary-hover: hsla(223, 95%, 48%, 1);
419
+ --colors-action-background-primary-focus: hsla(227, 100%, 45%, 1);
420
+ --colors-action-background-primary-active: hsla(230, 100%, 42%, 1);
421
421
  --colors-action-background-primary-disabled: hsla(216, 19%, 89%, 1);
422
422
  --colors-action-background-secondary-default: hsla(218, 89%, 51%, 0);
423
423
  --colors-action-background-secondary-hover: hsla(218, 89%, 51%, 0.09);
@@ -429,15 +429,15 @@
429
429
  --colors-action-background-tertiary-focus: hsla(220, 30%, 96%, 1);
430
430
  --colors-action-background-tertiary-active: hsla(214, 21%, 94%, 1);
431
431
  --colors-action-background-tertiary-disabled: hsla(0, 0%, 100%, 1);
432
- --colors-action-border-primary-default: hsla(213, 89%, 56%, 1);
433
- --colors-action-border-primary-hover: hsla(218, 89%, 51%, 1);
434
- --colors-action-border-primary-focus: hsla(223, 95%, 48%, 1);
435
- --colors-action-border-primary-active: hsla(227, 100%, 45%, 1);
432
+ --colors-action-border-primary-default: hsla(218, 89%, 51%, 1);
433
+ --colors-action-border-primary-hover: hsla(223, 95%, 48%, 1);
434
+ --colors-action-border-primary-focus: hsla(227, 100%, 45%, 1);
435
+ --colors-action-border-primary-active: hsla(230, 100%, 42%, 1);
436
436
  --colors-action-border-primary-disabled: hsla(216, 19%, 89%, 1);
437
- --colors-action-border-secondary-default: hsla(213, 89%, 56%, 1);
438
- --colors-action-border-secondary-hover: hsla(213, 89%, 56%, 1);
439
- --colors-action-border-secondary-focus: hsla(213, 89%, 56%, 1);
440
- --colors-action-border-secondary-active: hsla(213, 89%, 56%, 1);
437
+ --colors-action-border-secondary-default: hsla(218, 89%, 51%, 1);
438
+ --colors-action-border-secondary-hover: hsla(218, 89%, 51%, 1);
439
+ --colors-action-border-secondary-focus: hsla(218, 89%, 51%, 1);
440
+ --colors-action-border-secondary-active: hsla(218, 89%, 51%, 1);
441
441
  --colors-action-border-secondary-disabled: hsla(218, 19%, 81%, 1);
442
442
  --colors-action-border-tertiary-default: hsla(216, 19%, 89%, 1);
443
443
  --colors-action-border-tertiary-hover: hsla(216, 19%, 89%, 1);
@@ -449,20 +449,20 @@
449
449
  --colors-action-text-primary-focus: hsla(0, 0%, 100%, 1);
450
450
  --colors-action-text-primary-active: hsla(0, 0%, 100%, 1);
451
451
  --colors-action-text-primary-disabled: hsla(216, 16%, 60%, 1);
452
- --colors-action-text-secondary-default: hsla(213, 89%, 56%, 1);
453
- --colors-action-text-secondary-hover: hsla(213, 89%, 56%, 1);
454
- --colors-action-text-secondary-focus: hsla(213, 89%, 56%, 1);
455
- --colors-action-text-secondary-active: hsla(213, 89%, 56%, 1);
452
+ --colors-action-text-secondary-default: hsla(218, 89%, 51%, 1);
453
+ --colors-action-text-secondary-hover: hsla(218, 89%, 51%, 1);
454
+ --colors-action-text-secondary-focus: hsla(218, 89%, 51%, 1);
455
+ --colors-action-text-secondary-active: hsla(218, 89%, 51%, 1);
456
456
  --colors-action-text-secondary-disabled: hsla(218, 19%, 81%, 1);
457
457
  --colors-action-text-tertiary-default: hsla(216, 33%, 29%, 1);
458
458
  --colors-action-text-tertiary-hover: hsla(216, 33%, 29%, 1);
459
459
  --colors-action-text-tertiary-focus: hsla(216, 33%, 29%, 1);
460
460
  --colors-action-text-tertiary-active: hsla(216, 33%, 29%, 1);
461
461
  --colors-action-text-tertiary-disabled: hsla(218, 19%, 81%, 1);
462
- --colors-action-text-link-default: hsla(213, 89%, 56%, 1);
463
- --colors-action-text-link-hover: hsla(218, 89%, 51%, 1);
464
- --colors-action-text-link-focus: hsla(223, 95%, 48%, 1);
465
- --colors-action-text-link-active: hsla(223, 95%, 48%, 1);
462
+ --colors-action-text-link-default: hsla(218, 89%, 51%, 1);
463
+ --colors-action-text-link-hover: hsla(223, 95%, 48%, 1);
464
+ --colors-action-text-link-focus: hsla(227, 100%, 45%, 1);
465
+ --colors-action-text-link-active: hsla(227, 100%, 45%, 1);
466
466
  --colors-action-text-link-disabled: hsla(218, 19%, 81%, 1);
467
467
  --colors-action-text-link-visited: hsla(268, 100%, 79%, 1);
468
468
  --colors-action-icon-primary-default: hsla(0, 0%, 100%, 1);
@@ -470,20 +470,20 @@
470
470
  --colors-action-icon-primary-focus: hsla(0, 0%, 100%, 1);
471
471
  --colors-action-icon-primary-active: hsla(0, 0%, 100%, 1);
472
472
  --colors-action-icon-primary-disabled: hsla(216, 16%, 60%, 1);
473
- --colors-action-icon-secondary-default: hsla(213, 89%, 56%, 1);
474
- --colors-action-icon-secondary-hover: hsla(213, 89%, 56%, 1);
475
- --colors-action-icon-secondary-focus: hsla(213, 89%, 56%, 1);
476
- --colors-action-icon-secondary-active: hsla(213, 89%, 56%, 1);
473
+ --colors-action-icon-secondary-default: hsla(218, 89%, 51%, 1);
474
+ --colors-action-icon-secondary-hover: hsla(218, 89%, 51%, 1);
475
+ --colors-action-icon-secondary-focus: hsla(218, 89%, 51%, 1);
476
+ --colors-action-icon-secondary-active: hsla(218, 89%, 51%, 1);
477
477
  --colors-action-icon-secondary-disabled: hsla(218, 19%, 81%, 1);
478
478
  --colors-action-icon-tertiary-default: hsla(216, 33%, 29%, 1);
479
479
  --colors-action-icon-tertiary-hover: hsla(216, 33%, 29%, 1);
480
480
  --colors-action-icon-tertiary-focus: hsla(216, 33%, 29%, 1);
481
481
  --colors-action-icon-tertiary-active: hsla(216, 33%, 29%, 1);
482
482
  --colors-action-icon-tertiary-disabled: hsla(218, 19%, 81%, 1);
483
- --colors-action-icon-link-default: hsla(213, 89%, 56%, 1);
484
- --colors-action-icon-link-hover: hsla(218, 89%, 51%, 1);
485
- --colors-action-icon-link-focus: hsla(223, 95%, 48%, 1);
486
- --colors-action-icon-link-active: hsla(223, 95%, 48%, 1);
483
+ --colors-action-icon-link-default: hsla(218, 89%, 51%, 1);
484
+ --colors-action-icon-link-hover: hsla(223, 95%, 48%, 1);
485
+ --colors-action-icon-link-focus: hsla(227, 100%, 45%, 1);
486
+ --colors-action-icon-link-active: hsla(227, 100%, 45%, 1);
487
487
  --colors-action-icon-link-disabled: hsla(218, 19%, 81%, 1);
488
488
  --colors-action-icon-link-visited: hsla(268, 100%, 79%, 1);
489
489
  --colors-badge-background-blue-low-contrast: hsla(218, 89%, 51%, 0.09);
package/build/tokens/index.d.ts CHANGED
@@ -137,6 +137,7 @@ declare type ColorNeutralScale = Readonly<{
137
137
  a300: string;
138
138
  a400: string;
139
139
  a500: string;
140
+ a1100: string;
140
141
  }>;
141
142
  declare type Color = Readonly<{
142
143
  chromatic: {
@@ -168,13 +169,13 @@ declare type Opacity = Readonly<{
168
169
  2: number;
169
170
  /**3: 0.32 */
170
171
  3: number;
171
- /**4: 1.0 */
172
+ /**4: 0.48 */
172
173
  4: number;
173
- /**5: 1.0 */
174
+ /**5: 0.56 */
174
175
  5: number;
175
- /**6: 1.0 */
176
+ /**6: 0.64 */
176
177
  6: number;
177
- /**7: 1.0 */
178
+ /**7: 0.72 */
178
179
  7: number;
179
180
  /**8: 1.0 */
180
181
  8: number;
@@ -1024,8 +1025,14 @@ declare const size: {
1024
1025
  readonly 120: 120;
1025
1026
  /** 300 px */
1026
1027
  readonly 300: 300;
1028
+ /** 400 px */
1029
+ readonly 400: 400;
1027
1030
  /** 584 px */
1028
1031
  readonly 584: 584;
1032
+ /** 760 px */
1033
+ readonly 760: 760;
1034
+ /** 1024 px */
1035
+ readonly 1024: 1024;
1029
1036
  };
1030
1037
  declare type Size = typeof size;
1031
1038