@alfalab/core-components-bank-card 5.7.1 → 5.7.3

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 (9) hide show
  1. package/Component.js +1 -1
  2. package/cssm/index.module.css +8 -8
  3. package/esm/Component.js +1 -1
  4. package/esm/index.css +28 -28
  5. package/index.css +28 -28
  6. package/modern/Component.js +1 -1
  7. package/modern/index.css +28 -28
  8. package/package.json +2 -2
  9. package/src/index.module.css +7 -7
package/Component.js CHANGED
@@ -19,7 +19,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
19
19
  var React__default = /*#__PURE__*/_interopDefaultCompat(React);
20
20
  var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
21
21
 
22
- var styles = {"component":"bank-card__component_10czv","aspectRatioContainer":"bank-card__aspectRatioContainer_10czv","content":"bank-card__content_10czv","label":"bank-card__label_10czv","focused":"bank-card__focused_10czv","filled":"bank-card__filled_10czv","input":"bank-card__input_10czv","bankLogo":"bank-card__bankLogo_10czv","brandLogo":"bank-card__brandLogo_10czv","usePhoto":"bank-card__usePhoto_10czv"};
22
+ var styles = {"component":"bank-card__component_1wl4h","aspectRatioContainer":"bank-card__aspectRatioContainer_1wl4h","content":"bank-card__content_1wl4h","label":"bank-card__label_1wl4h","focused":"bank-card__focused_1wl4h","filled":"bank-card__filled_1wl4h","input":"bank-card__input_1wl4h","bankLogo":"bank-card__bankLogo_1wl4h","brandLogo":"bank-card__brandLogo_1wl4h","usePhoto":"bank-card__usePhoto_1wl4h"};
23
23
  require('./index.css')
24
24
 
25
25
  // prettier-ignore
package/cssm/index.module.css CHANGED
@@ -1,6 +1,6 @@
1
1
  :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
2
2
  } /* deprecated */ :root {
3
- --color-light-neutral-1500: #121213;
3
+ --color-light-neutral-translucent-1300: rgba(3, 3, 6, 0.88);
4
4
  --color-light-text-secondary: rgba(4, 4, 19, 0.55); /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
5
5
  } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
6
6
  } :root {
@@ -28,7 +28,7 @@
28
28
  --form-control-bg-color: transparent;
29
29
 
30
30
  /* focus */
31
- --form-control-focus-border-bottom: 1px solid var(--color-light-neutral-1500);
31
+ --form-control-focus-border-bottom: 1px solid var(--color-light-neutral-translucent-1300);
32
32
  --form-control-focus-shadow: transparent;
33
33
 
34
34
  /* hover */
@@ -66,7 +66,7 @@
66
66
  }
67
67
  } .focused .label,
68
68
  .filled .label {
69
- color: var(--color-light-neutral-1500);
69
+ color: var(--color-light-neutral-translucent-1300);
70
70
  transform: translateY(-19px) scale(0.6)
71
71
  } @media (max-width: 360px) { .focused .label,
72
72
  .filled .label {
@@ -81,8 +81,8 @@
81
81
  font-feature-settings: 'ss01';
82
82
  font-family: var(--font-family-styrene);
83
83
 
84
- color: var(--color-light-neutral-1500);
85
- caret-color: var(--color-light-neutral-1500);
84
+ color: var(--color-light-neutral-translucent-1300);
85
+ caret-color: var(--color-light-neutral-translucent-1300);
86
86
 
87
87
  /* TODO: обсудить с дизайнером, почему инпут не соответствует дизайн-системе, либо уменьшить каскад в form-control */
88
88
  padding-left: 0 !important;
@@ -99,14 +99,14 @@
99
99
  width: auto;
100
100
  display: block
101
101
  } .bankLogo svg g {
102
- fill: var(--color-light-neutral-1500);
102
+ fill: var(--color-light-neutral-translucent-1300);
103
103
  } .brandLogo {
104
104
  position: absolute;
105
105
  bottom: 20px;
106
106
  right: 20px
107
107
  } .brandLogo svg {
108
108
  display: block;
109
- fill: var(--color-light-neutral-1500);
109
+ fill: var(--color-light-neutral-translucent-1300);
110
110
  } .usePhoto {
111
111
  display: block;
112
112
  margin: 0;
@@ -125,6 +125,6 @@
125
125
  /* В макете иконка прилегает к правому краю поля, а по дизайн-системе там должен быть отступ */
126
126
  margin-right: calc(var(--gap-s) * -1)
127
127
  } .usePhoto svg {
128
- fill: var(--color-light-neutral-1500);
128
+ fill: var(--color-light-neutral-translucent-1300);
129
129
  display: block;
130
130
  }
package/esm/Component.js CHANGED
@@ -10,7 +10,7 @@ import { getDefaultInputLabel } from './helpers/getDefaultInputLabel.js';
10
10
  import { MaskTypeEnum } from './enums.js';
11
11
  import { validateCardNumber } from './utils.js';
12
12
 
13
- var styles = {"component":"bank-card__component_10czv","aspectRatioContainer":"bank-card__aspectRatioContainer_10czv","content":"bank-card__content_10czv","label":"bank-card__label_10czv","focused":"bank-card__focused_10czv","filled":"bank-card__filled_10czv","input":"bank-card__input_10czv","bankLogo":"bank-card__bankLogo_10czv","brandLogo":"bank-card__brandLogo_10czv","usePhoto":"bank-card__usePhoto_10czv"};
13
+ var styles = {"component":"bank-card__component_1wl4h","aspectRatioContainer":"bank-card__aspectRatioContainer_1wl4h","content":"bank-card__content_1wl4h","label":"bank-card__label_1wl4h","focused":"bank-card__focused_1wl4h","filled":"bank-card__filled_1wl4h","input":"bank-card__input_1wl4h","bankLogo":"bank-card__bankLogo_1wl4h","brandLogo":"bank-card__brandLogo_1wl4h","usePhoto":"bank-card__usePhoto_1wl4h"};
14
14
  require('./index.css')
15
15
 
16
16
  // prettier-ignore
package/esm/index.css CHANGED
@@ -1,7 +1,7 @@
1
- /* hash: vt2n8 */
1
+ /* hash: 3w844 */
2
2
  :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
3
3
  } /* deprecated */ :root {
4
- --color-light-neutral-1500: #121213;
4
+ --color-light-neutral-translucent-1300: rgba(3, 3, 6, 0.88);
5
5
  --color-light-text-secondary: rgba(4, 4, 19, 0.55); /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
6
6
  } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
7
7
  } :root {
@@ -22,14 +22,14 @@
22
22
  --font-family-styrene: 'Styrene UI', system-ui, -apple-system, 'Segoe UI', Roboto,
23
23
  'Helvetica Neue', Helvetica, sans-serif;
24
24
  } :root {
25
- } .bank-card__component_10czv {
25
+ } .bank-card__component_1wl4h {
26
26
  /* TODO: как это будет собираться и работать в webView */
27
27
  --form-control-border-radius: 0;
28
28
  --form-control-border-bottom: 1px solid var(--color-light-neutral-translucent-700);
29
29
  --form-control-bg-color: transparent;
30
30
 
31
31
  /* focus */
32
- --form-control-focus-border-bottom: 1px solid var(--color-light-neutral-1500);
32
+ --form-control-focus-border-bottom: 1px solid var(--color-light-neutral-translucent-1300);
33
33
  --form-control-focus-shadow: transparent;
34
34
 
35
35
  /* hover */
@@ -41,10 +41,10 @@
41
41
  max-width: 343px;
42
42
 
43
43
  font-family: var(--font-family-styrene);
44
- } .bank-card__aspectRatioContainer_10czv {
44
+ } .bank-card__aspectRatioContainer_1wl4h {
45
45
  /* Эталонный размер 343x216 */
46
46
  padding-bottom: 63%;
47
- } .bank-card__content_10czv {
47
+ } .bank-card__content_1wl4h {
48
48
  position: absolute;
49
49
  top: 0;
50
50
  right: 0;
@@ -56,59 +56,59 @@
56
56
  padding-right: var(--gap-l);
57
57
  border-radius: var(--border-radius-l);
58
58
  box-sizing: border-box;
59
- } .bank-card__label_10czv {
59
+ } .bank-card__label_1wl4h {
60
60
  left: 0;
61
61
  transform: translateY(-1px);
62
62
  color: var(--color-light-text-secondary);
63
63
  font-size: 20px;
64
64
  line-height: 24px
65
- } @media (max-width: 360px) { .bank-card__label_10czv {
65
+ } @media (max-width: 360px) { .bank-card__label_1wl4h {
66
66
  font-size: 16px
67
67
  }
68
- } .bank-card__focused_10czv .bank-card__label_10czv,
69
- .bank-card__filled_10czv .bank-card__label_10czv {
70
- color: var(--color-light-neutral-1500);
68
+ } .bank-card__focused_1wl4h .bank-card__label_1wl4h,
69
+ .bank-card__filled_1wl4h .bank-card__label_1wl4h {
70
+ color: var(--color-light-neutral-translucent-1300);
71
71
  transform: translateY(-19px) scale(0.6)
72
- } @media (max-width: 360px) { .bank-card__focused_10czv .bank-card__label_10czv,
73
- .bank-card__filled_10czv .bank-card__label_10czv {
72
+ } @media (max-width: 360px) { .bank-card__focused_1wl4h .bank-card__label_1wl4h,
73
+ .bank-card__filled_1wl4h .bank-card__label_1wl4h {
74
74
  transform: translateY(-22px) scale(0.75)
75
75
  }
76
- } .bank-card__focused_10czv:before {
76
+ } .bank-card__focused_1wl4h:before {
77
77
  transform: scale(1) !important;
78
- } .bank-card__input_10czv {
78
+ } .bank-card__input_1wl4h {
79
79
  font-size: 20px;
80
80
  line-height: 24px;
81
81
  font-weight: 400;
82
82
  font-feature-settings: 'ss01';
83
83
  font-family: var(--font-family-styrene);
84
84
 
85
- color: var(--color-light-neutral-1500);
86
- caret-color: var(--color-light-neutral-1500);
85
+ color: var(--color-light-neutral-translucent-1300);
86
+ caret-color: var(--color-light-neutral-translucent-1300);
87
87
 
88
88
  /* TODO: обсудить с дизайнером, почему инпут не соответствует дизайн-системе, либо уменьшить каскад в form-control */
89
89
  padding-left: 0 !important;
90
90
  padding-bottom: var(--gap-2xs) !important
91
- } @media (max-width: 360px) { .bank-card__input_10czv {
91
+ } @media (max-width: 360px) { .bank-card__input_1wl4h {
92
92
  font-size: 16px
93
93
  }
94
- } .bank-card__bankLogo_10czv {
94
+ } .bank-card__bankLogo_1wl4h {
95
95
  position: absolute;
96
96
  top: 20px;
97
97
  left: 20px
98
- } .bank-card__bankLogo_10czv svg {
98
+ } .bank-card__bankLogo_1wl4h svg {
99
99
  max-height: 32px;
100
100
  width: auto;
101
101
  display: block
102
- } .bank-card__bankLogo_10czv svg g {
103
- fill: var(--color-light-neutral-1500);
104
- } .bank-card__brandLogo_10czv {
102
+ } .bank-card__bankLogo_1wl4h svg g {
103
+ fill: var(--color-light-neutral-translucent-1300);
104
+ } .bank-card__brandLogo_1wl4h {
105
105
  position: absolute;
106
106
  bottom: 20px;
107
107
  right: 20px
108
- } .bank-card__brandLogo_10czv svg {
108
+ } .bank-card__brandLogo_1wl4h svg {
109
109
  display: block;
110
- fill: var(--color-light-neutral-1500);
111
- } .bank-card__usePhoto_10czv {
110
+ fill: var(--color-light-neutral-translucent-1300);
111
+ } .bank-card__usePhoto_1wl4h {
112
112
  display: block;
113
113
  margin: 0;
114
114
  padding: 0;
@@ -125,7 +125,7 @@
125
125
 
126
126
  /* В макете иконка прилегает к правому краю поля, а по дизайн-системе там должен быть отступ */
127
127
  margin-right: calc(var(--gap-s) * -1)
128
- } .bank-card__usePhoto_10czv svg {
129
- fill: var(--color-light-neutral-1500);
128
+ } .bank-card__usePhoto_1wl4h svg {
129
+ fill: var(--color-light-neutral-translucent-1300);
130
130
  display: block;
131
131
  }
package/index.css CHANGED
@@ -1,7 +1,7 @@
1
- /* hash: vt2n8 */
1
+ /* hash: 3w844 */
2
2
  :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
3
3
  } /* deprecated */ :root {
4
- --color-light-neutral-1500: #121213;
4
+ --color-light-neutral-translucent-1300: rgba(3, 3, 6, 0.88);
5
5
  --color-light-text-secondary: rgba(4, 4, 19, 0.55); /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
6
6
  } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
7
7
  } :root {
@@ -22,14 +22,14 @@
22
22
  --font-family-styrene: 'Styrene UI', system-ui, -apple-system, 'Segoe UI', Roboto,
23
23
  'Helvetica Neue', Helvetica, sans-serif;
24
24
  } :root {
25
- } .bank-card__component_10czv {
25
+ } .bank-card__component_1wl4h {
26
26
  /* TODO: как это будет собираться и работать в webView */
27
27
  --form-control-border-radius: 0;
28
28
  --form-control-border-bottom: 1px solid var(--color-light-neutral-translucent-700);
29
29
  --form-control-bg-color: transparent;
30
30
 
31
31
  /* focus */
32
- --form-control-focus-border-bottom: 1px solid var(--color-light-neutral-1500);
32
+ --form-control-focus-border-bottom: 1px solid var(--color-light-neutral-translucent-1300);
33
33
  --form-control-focus-shadow: transparent;
34
34
 
35
35
  /* hover */
@@ -41,10 +41,10 @@
41
41
  max-width: 343px;
42
42
 
43
43
  font-family: var(--font-family-styrene);
44
- } .bank-card__aspectRatioContainer_10czv {
44
+ } .bank-card__aspectRatioContainer_1wl4h {
45
45
  /* Эталонный размер 343x216 */
46
46
  padding-bottom: 63%;
47
- } .bank-card__content_10czv {
47
+ } .bank-card__content_1wl4h {
48
48
  position: absolute;
49
49
  top: 0;
50
50
  right: 0;
@@ -56,59 +56,59 @@
56
56
  padding-right: var(--gap-l);
57
57
  border-radius: var(--border-radius-l);
58
58
  box-sizing: border-box;
59
- } .bank-card__label_10czv {
59
+ } .bank-card__label_1wl4h {
60
60
  left: 0;
61
61
  transform: translateY(-1px);
62
62
  color: var(--color-light-text-secondary);
63
63
  font-size: 20px;
64
64
  line-height: 24px
65
- } @media (max-width: 360px) { .bank-card__label_10czv {
65
+ } @media (max-width: 360px) { .bank-card__label_1wl4h {
66
66
  font-size: 16px
67
67
  }
68
- } .bank-card__focused_10czv .bank-card__label_10czv,
69
- .bank-card__filled_10czv .bank-card__label_10czv {
70
- color: var(--color-light-neutral-1500);
68
+ } .bank-card__focused_1wl4h .bank-card__label_1wl4h,
69
+ .bank-card__filled_1wl4h .bank-card__label_1wl4h {
70
+ color: var(--color-light-neutral-translucent-1300);
71
71
  transform: translateY(-19px) scale(0.6)
72
- } @media (max-width: 360px) { .bank-card__focused_10czv .bank-card__label_10czv,
73
- .bank-card__filled_10czv .bank-card__label_10czv {
72
+ } @media (max-width: 360px) { .bank-card__focused_1wl4h .bank-card__label_1wl4h,
73
+ .bank-card__filled_1wl4h .bank-card__label_1wl4h {
74
74
  transform: translateY(-22px) scale(0.75)
75
75
  }
76
- } .bank-card__focused_10czv:before {
76
+ } .bank-card__focused_1wl4h:before {
77
77
  transform: scale(1) !important;
78
- } .bank-card__input_10czv {
78
+ } .bank-card__input_1wl4h {
79
79
  font-size: 20px;
80
80
  line-height: 24px;
81
81
  font-weight: 400;
82
82
  font-feature-settings: 'ss01';
83
83
  font-family: var(--font-family-styrene);
84
84
 
85
- color: var(--color-light-neutral-1500);
86
- caret-color: var(--color-light-neutral-1500);
85
+ color: var(--color-light-neutral-translucent-1300);
86
+ caret-color: var(--color-light-neutral-translucent-1300);
87
87
 
88
88
  /* TODO: обсудить с дизайнером, почему инпут не соответствует дизайн-системе, либо уменьшить каскад в form-control */
89
89
  padding-left: 0 !important;
90
90
  padding-bottom: var(--gap-2xs) !important
91
- } @media (max-width: 360px) { .bank-card__input_10czv {
91
+ } @media (max-width: 360px) { .bank-card__input_1wl4h {
92
92
  font-size: 16px
93
93
  }
94
- } .bank-card__bankLogo_10czv {
94
+ } .bank-card__bankLogo_1wl4h {
95
95
  position: absolute;
96
96
  top: 20px;
97
97
  left: 20px
98
- } .bank-card__bankLogo_10czv svg {
98
+ } .bank-card__bankLogo_1wl4h svg {
99
99
  max-height: 32px;
100
100
  width: auto;
101
101
  display: block
102
- } .bank-card__bankLogo_10czv svg g {
103
- fill: var(--color-light-neutral-1500);
104
- } .bank-card__brandLogo_10czv {
102
+ } .bank-card__bankLogo_1wl4h svg g {
103
+ fill: var(--color-light-neutral-translucent-1300);
104
+ } .bank-card__brandLogo_1wl4h {
105
105
  position: absolute;
106
106
  bottom: 20px;
107
107
  right: 20px
108
- } .bank-card__brandLogo_10czv svg {
108
+ } .bank-card__brandLogo_1wl4h svg {
109
109
  display: block;
110
- fill: var(--color-light-neutral-1500);
111
- } .bank-card__usePhoto_10czv {
110
+ fill: var(--color-light-neutral-translucent-1300);
111
+ } .bank-card__usePhoto_1wl4h {
112
112
  display: block;
113
113
  margin: 0;
114
114
  padding: 0;
@@ -125,7 +125,7 @@
125
125
 
126
126
  /* В макете иконка прилегает к правому краю поля, а по дизайн-системе там должен быть отступ */
127
127
  margin-right: calc(var(--gap-s) * -1)
128
- } .bank-card__usePhoto_10czv svg {
129
- fill: var(--color-light-neutral-1500);
128
+ } .bank-card__usePhoto_1wl4h svg {
129
+ fill: var(--color-light-neutral-translucent-1300);
130
130
  display: block;
131
131
  }
package/modern/Component.js CHANGED
@@ -10,7 +10,7 @@ import { getDefaultInputLabel } from './helpers/getDefaultInputLabel.js';
10
10
  import { MaskTypeEnum } from './enums.js';
11
11
  import { validateCardNumber } from './utils.js';
12
12
 
13
- const styles = {"component":"bank-card__component_10czv","aspectRatioContainer":"bank-card__aspectRatioContainer_10czv","content":"bank-card__content_10czv","label":"bank-card__label_10czv","focused":"bank-card__focused_10czv","filled":"bank-card__filled_10czv","input":"bank-card__input_10czv","bankLogo":"bank-card__bankLogo_10czv","brandLogo":"bank-card__brandLogo_10czv","usePhoto":"bank-card__usePhoto_10czv"};
13
+ const styles = {"component":"bank-card__component_1wl4h","aspectRatioContainer":"bank-card__aspectRatioContainer_1wl4h","content":"bank-card__content_1wl4h","label":"bank-card__label_1wl4h","focused":"bank-card__focused_1wl4h","filled":"bank-card__filled_1wl4h","input":"bank-card__input_1wl4h","bankLogo":"bank-card__bankLogo_1wl4h","brandLogo":"bank-card__brandLogo_1wl4h","usePhoto":"bank-card__usePhoto_1wl4h"};
14
14
  require('./index.css')
15
15
 
16
16
  // prettier-ignore
package/modern/index.css CHANGED
@@ -1,7 +1,7 @@
1
- /* hash: vt2n8 */
1
+ /* hash: 3w844 */
2
2
  :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
3
3
  } /* deprecated */ :root {
4
- --color-light-neutral-1500: #121213;
4
+ --color-light-neutral-translucent-1300: rgba(3, 3, 6, 0.88);
5
5
  --color-light-text-secondary: rgba(4, 4, 19, 0.55); /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
6
6
  } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
7
7
  } :root {
@@ -22,14 +22,14 @@
22
22
  --font-family-styrene: 'Styrene UI', system-ui, -apple-system, 'Segoe UI', Roboto,
23
23
  'Helvetica Neue', Helvetica, sans-serif;
24
24
  } :root {
25
- } .bank-card__component_10czv {
25
+ } .bank-card__component_1wl4h {
26
26
  /* TODO: как это будет собираться и работать в webView */
27
27
  --form-control-border-radius: 0;
28
28
  --form-control-border-bottom: 1px solid var(--color-light-neutral-translucent-700);
29
29
  --form-control-bg-color: transparent;
30
30
 
31
31
  /* focus */
32
- --form-control-focus-border-bottom: 1px solid var(--color-light-neutral-1500);
32
+ --form-control-focus-border-bottom: 1px solid var(--color-light-neutral-translucent-1300);
33
33
  --form-control-focus-shadow: transparent;
34
34
 
35
35
  /* hover */
@@ -41,10 +41,10 @@
41
41
  max-width: 343px;
42
42
 
43
43
  font-family: var(--font-family-styrene);
44
- } .bank-card__aspectRatioContainer_10czv {
44
+ } .bank-card__aspectRatioContainer_1wl4h {
45
45
  /* Эталонный размер 343x216 */
46
46
  padding-bottom: 63%;
47
- } .bank-card__content_10czv {
47
+ } .bank-card__content_1wl4h {
48
48
  position: absolute;
49
49
  top: 0;
50
50
  right: 0;
@@ -56,59 +56,59 @@
56
56
  padding-right: var(--gap-l);
57
57
  border-radius: var(--border-radius-l);
58
58
  box-sizing: border-box;
59
- } .bank-card__label_10czv {
59
+ } .bank-card__label_1wl4h {
60
60
  left: 0;
61
61
  transform: translateY(-1px);
62
62
  color: var(--color-light-text-secondary);
63
63
  font-size: 20px;
64
64
  line-height: 24px
65
- } @media (max-width: 360px) { .bank-card__label_10czv {
65
+ } @media (max-width: 360px) { .bank-card__label_1wl4h {
66
66
  font-size: 16px
67
67
  }
68
- } .bank-card__focused_10czv .bank-card__label_10czv,
69
- .bank-card__filled_10czv .bank-card__label_10czv {
70
- color: var(--color-light-neutral-1500);
68
+ } .bank-card__focused_1wl4h .bank-card__label_1wl4h,
69
+ .bank-card__filled_1wl4h .bank-card__label_1wl4h {
70
+ color: var(--color-light-neutral-translucent-1300);
71
71
  transform: translateY(-19px) scale(0.6)
72
- } @media (max-width: 360px) { .bank-card__focused_10czv .bank-card__label_10czv,
73
- .bank-card__filled_10czv .bank-card__label_10czv {
72
+ } @media (max-width: 360px) { .bank-card__focused_1wl4h .bank-card__label_1wl4h,
73
+ .bank-card__filled_1wl4h .bank-card__label_1wl4h {
74
74
  transform: translateY(-22px) scale(0.75)
75
75
  }
76
- } .bank-card__focused_10czv:before {
76
+ } .bank-card__focused_1wl4h:before {
77
77
  transform: scale(1) !important;
78
- } .bank-card__input_10czv {
78
+ } .bank-card__input_1wl4h {
79
79
  font-size: 20px;
80
80
  line-height: 24px;
81
81
  font-weight: 400;
82
82
  font-feature-settings: 'ss01';
83
83
  font-family: var(--font-family-styrene);
84
84
 
85
- color: var(--color-light-neutral-1500);
86
- caret-color: var(--color-light-neutral-1500);
85
+ color: var(--color-light-neutral-translucent-1300);
86
+ caret-color: var(--color-light-neutral-translucent-1300);
87
87
 
88
88
  /* TODO: обсудить с дизайнером, почему инпут не соответствует дизайн-системе, либо уменьшить каскад в form-control */
89
89
  padding-left: 0 !important;
90
90
  padding-bottom: var(--gap-2xs) !important
91
- } @media (max-width: 360px) { .bank-card__input_10czv {
91
+ } @media (max-width: 360px) { .bank-card__input_1wl4h {
92
92
  font-size: 16px
93
93
  }
94
- } .bank-card__bankLogo_10czv {
94
+ } .bank-card__bankLogo_1wl4h {
95
95
  position: absolute;
96
96
  top: 20px;
97
97
  left: 20px
98
- } .bank-card__bankLogo_10czv svg {
98
+ } .bank-card__bankLogo_1wl4h svg {
99
99
  max-height: 32px;
100
100
  width: auto;
101
101
  display: block
102
- } .bank-card__bankLogo_10czv svg g {
103
- fill: var(--color-light-neutral-1500);
104
- } .bank-card__brandLogo_10czv {
102
+ } .bank-card__bankLogo_1wl4h svg g {
103
+ fill: var(--color-light-neutral-translucent-1300);
104
+ } .bank-card__brandLogo_1wl4h {
105
105
  position: absolute;
106
106
  bottom: 20px;
107
107
  right: 20px
108
- } .bank-card__brandLogo_10czv svg {
108
+ } .bank-card__brandLogo_1wl4h svg {
109
109
  display: block;
110
- fill: var(--color-light-neutral-1500);
111
- } .bank-card__usePhoto_10czv {
110
+ fill: var(--color-light-neutral-translucent-1300);
111
+ } .bank-card__usePhoto_1wl4h {
112
112
  display: block;
113
113
  margin: 0;
114
114
  padding: 0;
@@ -125,7 +125,7 @@
125
125
 
126
126
  /* В макете иконка прилегает к правому краю поля, а по дизайн-системе там должен быть отступ */
127
127
  margin-right: calc(var(--gap-s) * -1)
128
- } .bank-card__usePhoto_10czv svg {
129
- fill: var(--color-light-neutral-1500);
128
+ } .bank-card__usePhoto_1wl4h svg {
129
+ fill: var(--color-light-neutral-translucent-1300);
130
130
  display: block;
131
131
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@alfalab/core-components-bank-card",
3
- "version": "5.7.1",
3
+ "version": "5.7.3",
4
4
  "description": "Bank card component",
5
5
  "keywords": [],
6
6
  "license": "MIT",
@@ -15,7 +15,7 @@
15
15
  "react-dom": "^16.9.0 || ^17.0.1 || ^18.0.0"
16
16
  },
17
17
  "dependencies": {
18
- "@alfalab/core-components-masked-input": "^6.3.6",
18
+ "@alfalab/core-components-masked-input": "^6.3.8",
19
19
  "@alfalab/icons-glyph": "^2.139.0",
20
20
  "@alfalab/icons-logotype": "^2.27.0",
21
21
  "classnames": "^2.3.1",
package/src/index.module.css CHANGED
@@ -8,7 +8,7 @@
8
8
  --form-control-bg-color: transparent;
9
9
 
10
10
  /* focus */
11
- --form-control-focus-border-bottom: 1px solid var(--color-light-neutral-1500);
11
+ --form-control-focus-border-bottom: 1px solid var(--color-light-neutral-translucent-1300);
12
12
  --form-control-focus-shadow: transparent;
13
13
 
14
14
  /* hover */
@@ -55,7 +55,7 @@
55
55
 
56
56
  .focused .label,
57
57
  .filled .label {
58
- color: var(--color-light-neutral-1500);
58
+ color: var(--color-light-neutral-translucent-1300);
59
59
  transform: translateY(-19px) scale(0.6);
60
60
 
61
61
  @media (max-width: 360px) {
@@ -70,8 +70,8 @@
70
70
  .input {
71
71
  @mixin promo_xsmall;
72
72
 
73
- color: var(--color-light-neutral-1500);
74
- caret-color: var(--color-light-neutral-1500);
73
+ color: var(--color-light-neutral-translucent-1300);
74
+ caret-color: var(--color-light-neutral-translucent-1300);
75
75
 
76
76
  /* TODO: обсудить с дизайнером, почему инпут не соответствует дизайн-системе, либо уменьшить каскад в form-control */
77
77
  padding-left: 0 !important;
@@ -93,7 +93,7 @@
93
93
  display: block;
94
94
 
95
95
  & g {
96
- fill: var(--color-light-neutral-1500);
96
+ fill: var(--color-light-neutral-translucent-1300);
97
97
  }
98
98
  }
99
99
  }
@@ -105,7 +105,7 @@
105
105
 
106
106
  & svg {
107
107
  display: block;
108
- fill: var(--color-light-neutral-1500);
108
+ fill: var(--color-light-neutral-translucent-1300);
109
109
  }
110
110
  }
111
111
 
@@ -127,7 +127,7 @@
127
127
  margin-right: calc(var(--gap-s) * -1);
128
128
 
129
129
  & svg {
130
- fill: var(--color-light-neutral-1500);
130
+ fill: var(--color-light-neutral-translucent-1300);
131
131
  display: block;
132
132
  }
133
133
  }