@razorpay/blade 3.5.2 → 3.6.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 (22) hide show
  1. package/CHANGELOG.md +13 -0
  2. package/build/components/index.d.ts +33 -2
  3. package/build/components/index.native.d.ts +33 -2
  4. package/build/components/index.native.js +10 -8
  5. package/build/components/index.native.js.map +1 -1
  6. package/build/components/index.web.js +52 -25
  7. package/build/components/index.web.js.map +1 -1
  8. package/build/css/bankingThemeDarkDesktop.css +20 -12
  9. package/build/css/bankingThemeDarkMobile.css +20 -12
  10. package/build/css/bankingThemeLightDesktop.css +20 -12
  11. package/build/css/bankingThemeLightMobile.css +20 -12
  12. package/build/css/paymentThemeDarkDesktop.css +20 -12
  13. package/build/css/paymentThemeDarkMobile.css +20 -12
  14. package/build/css/paymentThemeLightDesktop.css +20 -12
  15. package/build/css/paymentThemeLightMobile.css +20 -12
  16. package/build/tokens/index.d.ts +4 -1
  17. package/build/tokens/index.native.d.ts +4 -1
  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 +164 -50
  21. package/build/tokens/index.web.js.map +1 -1
  22. package/package.json +4 -1
package/build/css/bankingThemeDarkDesktop.css CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Mon, 31 Oct 2022 12:58:37 GMT
3
+ * Generated on Thu, 03 Nov 2022 15:48:18 GMT
4
4
  */
5
5
 
6
6
  :root {
@@ -20,11 +20,11 @@
20
20
  --breakpoints-xl: 1200px;
21
21
  --breakpoints-max: 1201px;
22
22
  --colors-surface-background-level1-low-contrast: hsla(231, 67%, 10%, 1);
23
- --colors-surface-background-level1-high-contrast: hsla(231, 35%, 22%, 1);
23
+ --colors-surface-background-level1-high-contrast: hsla(231, 41%, 19%, 1);
24
24
  --colors-surface-background-level2-low-contrast: hsla(231, 54%, 15%, 1);
25
- --colors-surface-background-level2-high-contrast: hsla(230, 23%, 29%, 1);
25
+ --colors-surface-background-level2-high-contrast: hsla(231, 35%, 22%, 1);
26
26
  --colors-surface-background-level3-low-contrast: hsla(230, 49%, 17%, 1);
27
- --colors-surface-background-level3-high-contrast: hsla(231, 54%, 15%, 1);
27
+ --colors-surface-background-level3-high-contrast: hsla(230, 23%, 29%, 1);
28
28
  --colors-surface-border-normal-low-contrast: hsla(233, 11%, 84%, 0.18);
29
29
  --colors-surface-border-normal-high-contrast: hsla(233, 11%, 84%, 0.18);
30
30
  --colors-surface-border-subtle-low-contrast: hsla(233, 11%, 84%, 0.09);
@@ -56,14 +56,22 @@
56
56
  --colors-brand-primary-600: hsla(213, 89%, 56%, 1);
57
57
  --colors-brand-primary-700: hsla(218, 89%, 51%, 1);
58
58
  --colors-brand-primary-800: hsla(230, 100%, 42%, 1);
59
- --colors-brand-gray-200: hsla(231, 41%, 19%, 1);
60
- --colors-brand-gray-300: hsla(231, 35%, 22%, 1);
61
- --colors-brand-gray-400: hsla(230, 23%, 29%, 1);
62
- --colors-brand-gray-500: hsla(230, 16%, 37%, 1);
63
- --colors-brand-gray-600: hsla(229, 12%, 45%, 1);
64
- --colors-brand-gray-700: hsla(231, 11%, 76%, 1);
65
- --colors-brand-gray-a50: hsla(233, 11%, 84%, 0.09);
66
- --colors-brand-gray-a100: hsla(233, 11%, 84%, 0.18);
59
+ --colors-brand-gray-200-low-contrast: hsla(231, 41%, 19%, 1);
60
+ --colors-brand-gray-200-high-contrast: hsla(230, 23%, 29%, 1);
61
+ --colors-brand-gray-300-low-contrast: hsla(231, 35%, 22%, 1);
62
+ --colors-brand-gray-300-high-contrast: hsla(230, 16%, 37%, 1);
63
+ --colors-brand-gray-400-low-contrast: hsla(230, 23%, 29%, 1);
64
+ --colors-brand-gray-400-high-contrast: hsla(229, 12%, 45%, 1);
65
+ --colors-brand-gray-500-low-contrast: hsla(230, 16%, 37%, 1);
66
+ --colors-brand-gray-500-high-contrast: hsla(229, 10%, 60%, 1);
67
+ --colors-brand-gray-600-low-contrast: hsla(229, 12%, 45%, 1);
68
+ --colors-brand-gray-600-high-contrast: hsla(231, 11%, 76%, 1);
69
+ --colors-brand-gray-700-low-contrast: hsla(231, 11%, 76%, 1);
70
+ --colors-brand-gray-700-high-contrast: hsla(228, 12%, 92%, 1);
71
+ --colors-brand-gray-a50-low-contrast: hsla(233, 11%, 84%, 0.09);
72
+ --colors-brand-gray-a50-high-contrast: hsla(231, 11%, 76%, 0.09);
73
+ --colors-brand-gray-a100-low-contrast: hsla(233, 11%, 84%, 0.18);
74
+ --colors-brand-gray-a100-high-contrast: hsla(231, 11%, 76%, 0.18);
67
75
  --colors-brand-secondary-500: hsla(36, 100%, 44%, 1);
68
76
  --colors-feedback-background-neutral-low-contrast: hsla(233, 11%, 84%, 0.18);
69
77
  --colors-feedback-background-neutral-high-contrast: hsla(228, 12%, 92%, 1);
package/build/css/bankingThemeDarkMobile.css CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Mon, 31 Oct 2022 12:58:37 GMT
3
+ * Generated on Thu, 03 Nov 2022 15:48:18 GMT
4
4
  */
5
5
 
6
6
  :root {
@@ -20,11 +20,11 @@
20
20
  --breakpoints-xl: 1200px;
21
21
  --breakpoints-max: 1201px;
22
22
  --colors-surface-background-level1-low-contrast: hsla(231, 67%, 10%, 1);
23
- --colors-surface-background-level1-high-contrast: hsla(231, 35%, 22%, 1);
23
+ --colors-surface-background-level1-high-contrast: hsla(231, 41%, 19%, 1);
24
24
  --colors-surface-background-level2-low-contrast: hsla(231, 54%, 15%, 1);
25
- --colors-surface-background-level2-high-contrast: hsla(230, 23%, 29%, 1);
25
+ --colors-surface-background-level2-high-contrast: hsla(231, 35%, 22%, 1);
26
26
  --colors-surface-background-level3-low-contrast: hsla(230, 49%, 17%, 1);
27
- --colors-surface-background-level3-high-contrast: hsla(231, 54%, 15%, 1);
27
+ --colors-surface-background-level3-high-contrast: hsla(230, 23%, 29%, 1);
28
28
  --colors-surface-border-normal-low-contrast: hsla(233, 11%, 84%, 0.18);
29
29
  --colors-surface-border-normal-high-contrast: hsla(233, 11%, 84%, 0.18);
30
30
  --colors-surface-border-subtle-low-contrast: hsla(233, 11%, 84%, 0.09);
@@ -56,14 +56,22 @@
56
56
  --colors-brand-primary-600: hsla(213, 89%, 56%, 1);
57
57
  --colors-brand-primary-700: hsla(218, 89%, 51%, 1);
58
58
  --colors-brand-primary-800: hsla(230, 100%, 42%, 1);
59
- --colors-brand-gray-200: hsla(231, 41%, 19%, 1);
60
- --colors-brand-gray-300: hsla(231, 35%, 22%, 1);
61
- --colors-brand-gray-400: hsla(230, 23%, 29%, 1);
62
- --colors-brand-gray-500: hsla(230, 16%, 37%, 1);
63
- --colors-brand-gray-600: hsla(229, 12%, 45%, 1);
64
- --colors-brand-gray-700: hsla(231, 11%, 76%, 1);
65
- --colors-brand-gray-a50: hsla(233, 11%, 84%, 0.09);
66
- --colors-brand-gray-a100: hsla(233, 11%, 84%, 0.18);
59
+ --colors-brand-gray-200-low-contrast: hsla(231, 41%, 19%, 1);
60
+ --colors-brand-gray-200-high-contrast: hsla(230, 23%, 29%, 1);
61
+ --colors-brand-gray-300-low-contrast: hsla(231, 35%, 22%, 1);
62
+ --colors-brand-gray-300-high-contrast: hsla(230, 16%, 37%, 1);
63
+ --colors-brand-gray-400-low-contrast: hsla(230, 23%, 29%, 1);
64
+ --colors-brand-gray-400-high-contrast: hsla(229, 12%, 45%, 1);
65
+ --colors-brand-gray-500-low-contrast: hsla(230, 16%, 37%, 1);
66
+ --colors-brand-gray-500-high-contrast: hsla(229, 10%, 60%, 1);
67
+ --colors-brand-gray-600-low-contrast: hsla(229, 12%, 45%, 1);
68
+ --colors-brand-gray-600-high-contrast: hsla(231, 11%, 76%, 1);
69
+ --colors-brand-gray-700-low-contrast: hsla(231, 11%, 76%, 1);
70
+ --colors-brand-gray-700-high-contrast: hsla(228, 12%, 92%, 1);
71
+ --colors-brand-gray-a50-low-contrast: hsla(233, 11%, 84%, 0.09);
72
+ --colors-brand-gray-a50-high-contrast: hsla(231, 11%, 76%, 0.09);
73
+ --colors-brand-gray-a100-low-contrast: hsla(233, 11%, 84%, 0.18);
74
+ --colors-brand-gray-a100-high-contrast: hsla(231, 11%, 76%, 0.18);
67
75
  --colors-brand-secondary-500: hsla(36, 100%, 44%, 1);
68
76
  --colors-feedback-background-neutral-low-contrast: hsla(233, 11%, 84%, 0.18);
69
77
  --colors-feedback-background-neutral-high-contrast: hsla(228, 12%, 92%, 1);
package/build/css/bankingThemeLightDesktop.css CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Mon, 31 Oct 2022 12:58:36 GMT
3
+ * Generated on Thu, 03 Nov 2022 15:48:18 GMT
4
4
  */
5
5
 
6
6
  :root {
@@ -20,11 +20,11 @@
20
20
  --breakpoints-xl: 1200px;
21
21
  --breakpoints-max: 1201px;
22
22
  --colors-surface-background-level1-low-contrast: hsla(230, 30%, 96%, 1);
23
- --colors-surface-background-level1-high-contrast: hsla(226, 44%, 23%, 1);
23
+ --colors-surface-background-level1-high-contrast: hsla(228, 56%, 17%, 1);
24
24
  --colors-surface-background-level2-low-contrast: hsla(0, 0%, 100%, 1);
25
- --colors-surface-background-level2-high-contrast: hsla(226, 27%, 36%, 1);
25
+ --colors-surface-background-level2-high-contrast: hsla(226, 44%, 23%, 1);
26
26
  --colors-surface-background-level3-low-contrast: hsla(230, 27%, 98%, 1);
27
- --colors-surface-background-level3-high-contrast: hsla(226, 70%, 13%, 1);
27
+ --colors-surface-background-level3-high-contrast: hsla(226, 33%, 29%, 1);
28
28
  --colors-surface-border-normal-low-contrast: hsla(226, 44%, 23%, 0.18);
29
29
  --colors-surface-border-normal-high-contrast: hsla(226, 44%, 23%, 0.18);
30
30
  --colors-surface-border-subtle-low-contrast: hsla(226, 44%, 23%, 0.09);
@@ -56,14 +56,22 @@
56
56
  --colors-brand-primary-600: hsla(218, 89%, 51%, 1);
57
57
  --colors-brand-primary-700: hsla(223, 95%, 48%, 1);
58
58
  --colors-brand-primary-800: hsla(234, 100%, 34%, 1);
59
- --colors-brand-gray-200: hsla(230, 27%, 98%, 1);
60
- --colors-brand-gray-300: hsla(230, 30%, 96%, 1);
61
- --colors-brand-gray-400: hsla(226, 19%, 89%, 1);
62
- --colors-brand-gray-500: hsla(225, 18%, 69%, 1);
63
- --colors-brand-gray-600: hsla(226, 16%, 60%, 1);
64
- --colors-brand-gray-700: hsla(227, 18%, 45%, 1);
65
- --colors-brand-gray-a50: hsla(226, 44%, 23%, 0.09);
66
- --colors-brand-gray-a100: hsla(226, 44%, 23%, 0.18);
59
+ --colors-brand-gray-200-low-contrast: hsla(230, 27%, 98%, 1);
60
+ --colors-brand-gray-200-high-contrast: hsla(226, 33%, 29%, 1);
61
+ --colors-brand-gray-300-low-contrast: hsla(230, 30%, 96%, 1);
62
+ --colors-brand-gray-300-high-contrast: hsla(226, 27%, 36%, 1);
63
+ --colors-brand-gray-400-low-contrast: hsla(226, 19%, 89%, 1);
64
+ --colors-brand-gray-400-high-contrast: hsla(227, 18%, 45%, 1);
65
+ --colors-brand-gray-500-low-contrast: hsla(225, 18%, 69%, 1);
66
+ --colors-brand-gray-500-high-contrast: hsla(226, 15%, 54%, 1);
67
+ --colors-brand-gray-600-low-contrast: hsla(226, 16%, 60%, 1);
68
+ --colors-brand-gray-600-high-contrast: hsla(225, 18%, 69%, 1);
69
+ --colors-brand-gray-700-low-contrast: hsla(227, 18%, 45%, 1);
70
+ --colors-brand-gray-700-high-contrast: hsla(230, 30%, 96%, 1);
71
+ --colors-brand-gray-a50-low-contrast: hsla(226, 44%, 23%, 0.09);
72
+ --colors-brand-gray-a50-high-contrast: hsla(223, 21%, 94%, 0.09);
73
+ --colors-brand-gray-a100-low-contrast: hsla(226, 44%, 23%, 0.18);
74
+ --colors-brand-gray-a100-high-contrast: hsla(223, 21%, 94%, 0.18);
67
75
  --colors-brand-secondary-500: hsla(36, 100%, 44%, 1);
68
76
  --colors-feedback-background-neutral-low-contrast: hsla(226, 44%, 23%, 0.09);
69
77
  --colors-feedback-background-neutral-high-contrast: hsla(226, 33%, 29%, 1);
package/build/css/bankingThemeLightMobile.css CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Mon, 31 Oct 2022 12:58:37 GMT
3
+ * Generated on Thu, 03 Nov 2022 15:48:18 GMT
4
4
  */
5
5
 
6
6
  :root {
@@ -20,11 +20,11 @@
20
20
  --breakpoints-xl: 1200px;
21
21
  --breakpoints-max: 1201px;
22
22
  --colors-surface-background-level1-low-contrast: hsla(230, 30%, 96%, 1);
23
- --colors-surface-background-level1-high-contrast: hsla(226, 44%, 23%, 1);
23
+ --colors-surface-background-level1-high-contrast: hsla(228, 56%, 17%, 1);
24
24
  --colors-surface-background-level2-low-contrast: hsla(0, 0%, 100%, 1);
25
- --colors-surface-background-level2-high-contrast: hsla(226, 27%, 36%, 1);
25
+ --colors-surface-background-level2-high-contrast: hsla(226, 44%, 23%, 1);
26
26
  --colors-surface-background-level3-low-contrast: hsla(230, 27%, 98%, 1);
27
- --colors-surface-background-level3-high-contrast: hsla(226, 70%, 13%, 1);
27
+ --colors-surface-background-level3-high-contrast: hsla(226, 33%, 29%, 1);
28
28
  --colors-surface-border-normal-low-contrast: hsla(226, 44%, 23%, 0.18);
29
29
  --colors-surface-border-normal-high-contrast: hsla(226, 44%, 23%, 0.18);
30
30
  --colors-surface-border-subtle-low-contrast: hsla(226, 44%, 23%, 0.09);
@@ -56,14 +56,22 @@
56
56
  --colors-brand-primary-600: hsla(218, 89%, 51%, 1);
57
57
  --colors-brand-primary-700: hsla(223, 95%, 48%, 1);
58
58
  --colors-brand-primary-800: hsla(234, 100%, 34%, 1);
59
- --colors-brand-gray-200: hsla(230, 27%, 98%, 1);
60
- --colors-brand-gray-300: hsla(230, 30%, 96%, 1);
61
- --colors-brand-gray-400: hsla(226, 19%, 89%, 1);
62
- --colors-brand-gray-500: hsla(225, 18%, 69%, 1);
63
- --colors-brand-gray-600: hsla(226, 16%, 60%, 1);
64
- --colors-brand-gray-700: hsla(227, 18%, 45%, 1);
65
- --colors-brand-gray-a50: hsla(226, 44%, 23%, 0.09);
66
- --colors-brand-gray-a100: hsla(226, 44%, 23%, 0.18);
59
+ --colors-brand-gray-200-low-contrast: hsla(230, 27%, 98%, 1);
60
+ --colors-brand-gray-200-high-contrast: hsla(226, 33%, 29%, 1);
61
+ --colors-brand-gray-300-low-contrast: hsla(230, 30%, 96%, 1);
62
+ --colors-brand-gray-300-high-contrast: hsla(226, 27%, 36%, 1);
63
+ --colors-brand-gray-400-low-contrast: hsla(226, 19%, 89%, 1);
64
+ --colors-brand-gray-400-high-contrast: hsla(227, 18%, 45%, 1);
65
+ --colors-brand-gray-500-low-contrast: hsla(225, 18%, 69%, 1);
66
+ --colors-brand-gray-500-high-contrast: hsla(226, 15%, 54%, 1);
67
+ --colors-brand-gray-600-low-contrast: hsla(226, 16%, 60%, 1);
68
+ --colors-brand-gray-600-high-contrast: hsla(225, 18%, 69%, 1);
69
+ --colors-brand-gray-700-low-contrast: hsla(227, 18%, 45%, 1);
70
+ --colors-brand-gray-700-high-contrast: hsla(230, 30%, 96%, 1);
71
+ --colors-brand-gray-a50-low-contrast: hsla(226, 44%, 23%, 0.09);
72
+ --colors-brand-gray-a50-high-contrast: hsla(223, 21%, 94%, 0.09);
73
+ --colors-brand-gray-a100-low-contrast: hsla(226, 44%, 23%, 0.18);
74
+ --colors-brand-gray-a100-high-contrast: hsla(223, 21%, 94%, 0.18);
67
75
  --colors-brand-secondary-500: hsla(36, 100%, 44%, 1);
68
76
  --colors-feedback-background-neutral-low-contrast: hsla(226, 44%, 23%, 0.09);
69
77
  --colors-feedback-background-neutral-high-contrast: hsla(226, 33%, 29%, 1);
package/build/css/paymentThemeDarkDesktop.css CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Mon, 31 Oct 2022 12:58:36 GMT
3
+ * Generated on Thu, 03 Nov 2022 15:48:18 GMT
4
4
  */
5
5
 
6
6
  :root {
@@ -20,11 +20,11 @@
20
20
  --breakpoints-xl: 1200px;
21
21
  --breakpoints-max: 1201px;
22
22
  --colors-surface-background-level1-low-contrast: hsla(218, 67%, 10%, 1);
23
- --colors-surface-background-level1-high-contrast: hsla(220, 35%, 22%, 1);
23
+ --colors-surface-background-level1-high-contrast: hsla(219, 41%, 19%, 1);
24
24
  --colors-surface-background-level2-low-contrast: hsla(218, 54%, 15%, 1);
25
- --colors-surface-background-level2-high-contrast: hsla(220, 23%, 29%, 1);
25
+ --colors-surface-background-level2-high-contrast: hsla(220, 35%, 22%, 1);
26
26
  --colors-surface-background-level3-low-contrast: hsla(218, 49%, 17%, 1);
27
- --colors-surface-background-level3-high-contrast: hsla(218, 54%, 15%, 1);
27
+ --colors-surface-background-level3-high-contrast: hsla(220, 23%, 29%, 1);
28
28
  --colors-surface-border-normal-low-contrast: hsla(220, 11%, 84%, 0.18);
29
29
  --colors-surface-border-normal-high-contrast: hsla(220, 11%, 84%, 0.18);
30
30
  --colors-surface-border-subtle-low-contrast: hsla(220, 11%, 84%, 0.09);
@@ -56,14 +56,22 @@
56
56
  --colors-brand-primary-600: hsla(213, 89%, 56%, 1);
57
57
  --colors-brand-primary-700: hsla(218, 89%, 51%, 1);
58
58
  --colors-brand-primary-800: hsla(230, 100%, 42%, 1);
59
- --colors-brand-gray-200: hsla(219, 41%, 19%, 1);
60
- --colors-brand-gray-300: hsla(220, 35%, 22%, 1);
61
- --colors-brand-gray-400: hsla(220, 23%, 29%, 1);
62
- --colors-brand-gray-500: hsla(220, 16%, 37%, 1);
63
- --colors-brand-gray-600: hsla(219, 12%, 45%, 1);
64
- --colors-brand-gray-700: hsla(218, 11%, 76%, 1);
65
- --colors-brand-gray-a50: hsla(220, 11%, 84%, 0.09);
66
- --colors-brand-gray-a100: hsla(220, 11%, 84%, 0.18);
59
+ --colors-brand-gray-200-low-contrast: hsla(219, 41%, 19%, 1);
60
+ --colors-brand-gray-200-high-contrast: hsla(220, 23%, 29%, 1);
61
+ --colors-brand-gray-300-low-contrast: hsla(220, 35%, 22%, 1);
62
+ --colors-brand-gray-300-high-contrast: hsla(220, 16%, 37%, 1);
63
+ --colors-brand-gray-400-low-contrast: hsla(220, 23%, 29%, 1);
64
+ --colors-brand-gray-400-high-contrast: hsla(219, 12%, 45%, 1);
65
+ --colors-brand-gray-500-low-contrast: hsla(220, 16%, 37%, 1);
66
+ --colors-brand-gray-500-high-contrast: hsla(219, 10%, 60%, 1);
67
+ --colors-brand-gray-600-low-contrast: hsla(219, 12%, 45%, 1);
68
+ --colors-brand-gray-600-high-contrast: hsla(218, 11%, 76%, 1);
69
+ --colors-brand-gray-700-low-contrast: hsla(218, 11%, 76%, 1);
70
+ --colors-brand-gray-700-high-contrast: hsla(215, 12%, 92%, 1);
71
+ --colors-brand-gray-a50-low-contrast: hsla(220, 11%, 84%, 0.09);
72
+ --colors-brand-gray-a50-high-contrast: hsla(217, 11%, 76%, 0.09);
73
+ --colors-brand-gray-a100-low-contrast: hsla(220, 11%, 84%, 0.18);
74
+ --colors-brand-gray-a100-high-contrast: hsla(217, 11%, 76%, 0.18);
67
75
  --colors-brand-secondary-500: hsla(149, 99%, 35%, 1);
68
76
  --colors-feedback-background-neutral-low-contrast: hsla(220, 11%, 84%, 0.18);
69
77
  --colors-feedback-background-neutral-high-contrast: hsla(215, 12%, 92%, 1);
package/build/css/paymentThemeDarkMobile.css CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Mon, 31 Oct 2022 12:58:36 GMT
3
+ * Generated on Thu, 03 Nov 2022 15:48:18 GMT
4
4
  */
5
5
 
6
6
  :root {
@@ -20,11 +20,11 @@
20
20
  --breakpoints-xl: 1200px;
21
21
  --breakpoints-max: 1201px;
22
22
  --colors-surface-background-level1-low-contrast: hsla(218, 67%, 10%, 1);
23
- --colors-surface-background-level1-high-contrast: hsla(220, 35%, 22%, 1);
23
+ --colors-surface-background-level1-high-contrast: hsla(219, 41%, 19%, 1);
24
24
  --colors-surface-background-level2-low-contrast: hsla(218, 54%, 15%, 1);
25
- --colors-surface-background-level2-high-contrast: hsla(220, 23%, 29%, 1);
25
+ --colors-surface-background-level2-high-contrast: hsla(220, 35%, 22%, 1);
26
26
  --colors-surface-background-level3-low-contrast: hsla(218, 49%, 17%, 1);
27
- --colors-surface-background-level3-high-contrast: hsla(218, 54%, 15%, 1);
27
+ --colors-surface-background-level3-high-contrast: hsla(220, 23%, 29%, 1);
28
28
  --colors-surface-border-normal-low-contrast: hsla(220, 11%, 84%, 0.18);
29
29
  --colors-surface-border-normal-high-contrast: hsla(220, 11%, 84%, 0.18);
30
30
  --colors-surface-border-subtle-low-contrast: hsla(220, 11%, 84%, 0.09);
@@ -56,14 +56,22 @@
56
56
  --colors-brand-primary-600: hsla(213, 89%, 56%, 1);
57
57
  --colors-brand-primary-700: hsla(218, 89%, 51%, 1);
58
58
  --colors-brand-primary-800: hsla(230, 100%, 42%, 1);
59
- --colors-brand-gray-200: hsla(219, 41%, 19%, 1);
60
- --colors-brand-gray-300: hsla(220, 35%, 22%, 1);
61
- --colors-brand-gray-400: hsla(220, 23%, 29%, 1);
62
- --colors-brand-gray-500: hsla(220, 16%, 37%, 1);
63
- --colors-brand-gray-600: hsla(219, 12%, 45%, 1);
64
- --colors-brand-gray-700: hsla(218, 11%, 76%, 1);
65
- --colors-brand-gray-a50: hsla(220, 11%, 84%, 0.09);
66
- --colors-brand-gray-a100: hsla(220, 11%, 84%, 0.18);
59
+ --colors-brand-gray-200-low-contrast: hsla(219, 41%, 19%, 1);
60
+ --colors-brand-gray-200-high-contrast: hsla(220, 23%, 29%, 1);
61
+ --colors-brand-gray-300-low-contrast: hsla(220, 35%, 22%, 1);
62
+ --colors-brand-gray-300-high-contrast: hsla(220, 16%, 37%, 1);
63
+ --colors-brand-gray-400-low-contrast: hsla(220, 23%, 29%, 1);
64
+ --colors-brand-gray-400-high-contrast: hsla(219, 12%, 45%, 1);
65
+ --colors-brand-gray-500-low-contrast: hsla(220, 16%, 37%, 1);
66
+ --colors-brand-gray-500-high-contrast: hsla(219, 10%, 60%, 1);
67
+ --colors-brand-gray-600-low-contrast: hsla(219, 12%, 45%, 1);
68
+ --colors-brand-gray-600-high-contrast: hsla(218, 11%, 76%, 1);
69
+ --colors-brand-gray-700-low-contrast: hsla(218, 11%, 76%, 1);
70
+ --colors-brand-gray-700-high-contrast: hsla(215, 12%, 92%, 1);
71
+ --colors-brand-gray-a50-low-contrast: hsla(220, 11%, 84%, 0.09);
72
+ --colors-brand-gray-a50-high-contrast: hsla(217, 11%, 76%, 0.09);
73
+ --colors-brand-gray-a100-low-contrast: hsla(220, 11%, 84%, 0.18);
74
+ --colors-brand-gray-a100-high-contrast: hsla(217, 11%, 76%, 0.18);
67
75
  --colors-brand-secondary-500: hsla(149, 99%, 35%, 1);
68
76
  --colors-feedback-background-neutral-low-contrast: hsla(220, 11%, 84%, 0.18);
69
77
  --colors-feedback-background-neutral-high-contrast: hsla(215, 12%, 92%, 1);
package/build/css/paymentThemeLightDesktop.css CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Mon, 31 Oct 2022 12:58:36 GMT
3
+ * Generated on Thu, 03 Nov 2022 15:48:18 GMT
4
4
  */
5
5
 
6
6
  :root {
@@ -20,11 +20,11 @@
20
20
  --breakpoints-xl: 1200px;
21
21
  --breakpoints-max: 1201px;
22
22
  --colors-surface-background-level1-low-contrast: hsla(220, 30%, 96%, 1);
23
- --colors-surface-background-level1-high-contrast: hsla(216, 44%, 23%, 1);
23
+ --colors-surface-background-level1-high-contrast: hsla(217, 56%, 17%, 1);
24
24
  --colors-surface-background-level2-low-contrast: hsla(0, 0%, 100%, 1);
25
- --colors-surface-background-level2-high-contrast: hsla(216, 27%, 36%, 1);
25
+ --colors-surface-background-level2-high-contrast: hsla(216, 44%, 23%, 1);
26
26
  --colors-surface-background-level3-low-contrast: hsla(220, 27%, 98%, 1);
27
- --colors-surface-background-level3-high-contrast: hsla(215, 70%, 13%, 1);
27
+ --colors-surface-background-level3-high-contrast: hsla(216, 33%, 29%, 1);
28
28
  --colors-surface-border-normal-low-contrast: hsla(216, 44%, 23%, 0.18);
29
29
  --colors-surface-border-normal-high-contrast: hsla(216, 44%, 23%, 0.18);
30
30
  --colors-surface-border-subtle-low-contrast: hsla(216, 44%, 23%, 0.09);
@@ -56,14 +56,22 @@
56
56
  --colors-brand-primary-600: hsla(218, 89%, 51%, 1);
57
57
  --colors-brand-primary-700: hsla(223, 95%, 48%, 1);
58
58
  --colors-brand-primary-800: hsla(234, 100%, 34%, 1);
59
- --colors-brand-gray-200: hsla(220, 27%, 98%, 1);
60
- --colors-brand-gray-300: hsla(220, 30%, 96%, 1);
61
- --colors-brand-gray-400: hsla(216, 19%, 89%, 1);
62
- --colors-brand-gray-500: hsla(214, 18%, 69%, 1);
63
- --colors-brand-gray-600: hsla(216, 16%, 60%, 1);
64
- --colors-brand-gray-700: hsla(217, 18%, 45%, 1);
65
- --colors-brand-gray-a50: hsla(216, 44%, 23%, 0.09);
66
- --colors-brand-gray-a100: hsla(216, 44%, 23%, 0.18);
59
+ --colors-brand-gray-200-low-contrast: hsla(220, 27%, 98%, 1);
60
+ --colors-brand-gray-200-high-contrast: hsla(216, 33%, 29%, 1);
61
+ --colors-brand-gray-300-low-contrast: hsla(220, 30%, 96%, 1);
62
+ --colors-brand-gray-300-high-contrast: hsla(216, 27%, 36%, 1);
63
+ --colors-brand-gray-400-low-contrast: hsla(216, 19%, 89%, 1);
64
+ --colors-brand-gray-400-high-contrast: hsla(217, 18%, 45%, 1);
65
+ --colors-brand-gray-500-low-contrast: hsla(214, 18%, 69%, 1);
66
+ --colors-brand-gray-500-high-contrast: hsla(216, 15%, 54%, 1);
67
+ --colors-brand-gray-600-low-contrast: hsla(216, 16%, 60%, 1);
68
+ --colors-brand-gray-600-high-contrast: hsla(214, 18%, 69%, 1);
69
+ --colors-brand-gray-700-low-contrast: hsla(217, 18%, 45%, 1);
70
+ --colors-brand-gray-700-high-contrast: hsla(220, 30%, 96%, 1);
71
+ --colors-brand-gray-a50-low-contrast: hsla(216, 44%, 23%, 0.09);
72
+ --colors-brand-gray-a50-high-contrast: hsla(214, 21%, 94%, 0.09);
73
+ --colors-brand-gray-a100-low-contrast: hsla(216, 44%, 23%, 0.18);
74
+ --colors-brand-gray-a100-high-contrast: hsla(214, 21%, 94%, 0.18);
67
75
  --colors-brand-secondary-500: hsla(149, 99%, 35%, 1);
68
76
  --colors-feedback-background-neutral-low-contrast: hsla(216, 44%, 23%, 0.09);
69
77
  --colors-feedback-background-neutral-high-contrast: hsla(216, 33%, 29%, 1);
package/build/css/paymentThemeLightMobile.css CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Mon, 31 Oct 2022 12:58:36 GMT
3
+ * Generated on Thu, 03 Nov 2022 15:48:18 GMT
4
4
  */
5
5
 
6
6
  :root {
@@ -20,11 +20,11 @@
20
20
  --breakpoints-xl: 1200px;
21
21
  --breakpoints-max: 1201px;
22
22
  --colors-surface-background-level1-low-contrast: hsla(220, 30%, 96%, 1);
23
- --colors-surface-background-level1-high-contrast: hsla(216, 44%, 23%, 1);
23
+ --colors-surface-background-level1-high-contrast: hsla(217, 56%, 17%, 1);
24
24
  --colors-surface-background-level2-low-contrast: hsla(0, 0%, 100%, 1);
25
- --colors-surface-background-level2-high-contrast: hsla(216, 27%, 36%, 1);
25
+ --colors-surface-background-level2-high-contrast: hsla(216, 44%, 23%, 1);
26
26
  --colors-surface-background-level3-low-contrast: hsla(220, 27%, 98%, 1);
27
- --colors-surface-background-level3-high-contrast: hsla(215, 70%, 13%, 1);
27
+ --colors-surface-background-level3-high-contrast: hsla(216, 33%, 29%, 1);
28
28
  --colors-surface-border-normal-low-contrast: hsla(216, 44%, 23%, 0.18);
29
29
  --colors-surface-border-normal-high-contrast: hsla(216, 44%, 23%, 0.18);
30
30
  --colors-surface-border-subtle-low-contrast: hsla(216, 44%, 23%, 0.09);
@@ -56,14 +56,22 @@
56
56
  --colors-brand-primary-600: hsla(218, 89%, 51%, 1);
57
57
  --colors-brand-primary-700: hsla(223, 95%, 48%, 1);
58
58
  --colors-brand-primary-800: hsla(234, 100%, 34%, 1);
59
- --colors-brand-gray-200: hsla(220, 27%, 98%, 1);
60
- --colors-brand-gray-300: hsla(220, 30%, 96%, 1);
61
- --colors-brand-gray-400: hsla(216, 19%, 89%, 1);
62
- --colors-brand-gray-500: hsla(214, 18%, 69%, 1);
63
- --colors-brand-gray-600: hsla(216, 16%, 60%, 1);
64
- --colors-brand-gray-700: hsla(217, 18%, 45%, 1);
65
- --colors-brand-gray-a50: hsla(216, 44%, 23%, 0.09);
66
- --colors-brand-gray-a100: hsla(216, 44%, 23%, 0.18);
59
+ --colors-brand-gray-200-low-contrast: hsla(220, 27%, 98%, 1);
60
+ --colors-brand-gray-200-high-contrast: hsla(216, 33%, 29%, 1);
61
+ --colors-brand-gray-300-low-contrast: hsla(220, 30%, 96%, 1);
62
+ --colors-brand-gray-300-high-contrast: hsla(216, 27%, 36%, 1);
63
+ --colors-brand-gray-400-low-contrast: hsla(216, 19%, 89%, 1);
64
+ --colors-brand-gray-400-high-contrast: hsla(217, 18%, 45%, 1);
65
+ --colors-brand-gray-500-low-contrast: hsla(214, 18%, 69%, 1);
66
+ --colors-brand-gray-500-high-contrast: hsla(216, 15%, 54%, 1);
67
+ --colors-brand-gray-600-low-contrast: hsla(216, 16%, 60%, 1);
68
+ --colors-brand-gray-600-high-contrast: hsla(214, 18%, 69%, 1);
69
+ --colors-brand-gray-700-low-contrast: hsla(217, 18%, 45%, 1);
70
+ --colors-brand-gray-700-high-contrast: hsla(220, 30%, 96%, 1);
71
+ --colors-brand-gray-a50-low-contrast: hsla(216, 44%, 23%, 0.09);
72
+ --colors-brand-gray-a50-high-contrast: hsla(214, 21%, 94%, 0.09);
73
+ --colors-brand-gray-a100-low-contrast: hsla(216, 44%, 23%, 0.18);
74
+ --colors-brand-gray-a100-high-contrast: hsla(214, 21%, 94%, 0.18);
67
75
  --colors-brand-secondary-500: hsla(149, 99%, 35%, 1);
68
76
  --colors-feedback-background-neutral-low-contrast: hsla(216, 44%, 23%, 0.09);
69
77
  --colors-feedback-background-neutral-high-contrast: hsla(216, 33%, 29%, 1);
package/build/tokens/index.d.ts CHANGED
@@ -77,6 +77,9 @@ declare type ColorNeutralScale = Readonly<{
77
77
  a50: string;
78
78
  a100: string;
79
79
  a200: string;
80
+ a300: string;
81
+ a400: string;
82
+ a500: string;
80
83
  }>;
81
84
  declare type Color = Readonly<{
82
85
  chromatic: {
@@ -839,7 +842,7 @@ type Colors = {
839
842
  brand: {
840
843
  primary: Record<300 | 400 | 500 | 600 | 700 | 800, string>;
841
844
  secondary: Record<500, string>;
842
- gray: Record<200 | 300 | 400 | 500 | 600 | 700 | 'a50' | 'a100', string>;
845
+ gray: Record<200 | 300 | 400 | 500 | 600 | 700 | 'a50' | 'a100', ColorContrast>;
843
846
  };
844
847
  feedback: {
845
848
  background: Record<Feedback, ColorContrast>;
package/build/tokens/index.native.d.ts CHANGED
@@ -77,6 +77,9 @@ declare type ColorNeutralScale = Readonly<{
77
77
  a50: string;
78
78
  a100: string;
79
79
  a200: string;
80
+ a300: string;
81
+ a400: string;
82
+ a500: string;
80
83
  }>;
81
84
  declare type Color = Readonly<{
82
85
  chromatic: {
@@ -839,7 +842,7 @@ type Colors = {
839
842
  brand: {
840
843
  primary: Record<300 | 400 | 500 | 600 | 700 | 800, string>;
841
844
  secondary: Record<500, string>;
842
- gray: Record<200 | 300 | 400 | 500 | 600 | 700 | 'a50' | 'a100', string>;
845
+ gray: Record<200 | 300 | 400 | 500 | 600 | 700 | 'a50' | 'a100', ColorContrast>;
843
846
  };
844
847
  feedback: {
845
848
  background: Record<Feedback, ColorContrast>;