@alfalab/core-components-switch 2.2.2 → 2.3.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.
package/CHANGELOG.md CHANGED
@@ -3,40 +3,51 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
- ## [2.2.1](https://github.com/alfa-laboratory/core-components/compare/@alfalab/core-components-switch@2.2.0...@alfalab/core-components-switch@2.2.1) (2021-12-08)
6
+ # [2.3.0](https://github.com/core-ds/core-components/compare/@alfalab/core-components-switch@2.2.4...@alfalab/core-components-switch@2.3.0) (2022-06-28)
7
+
8
+
9
+ ### Features
10
+
11
+ * circumflexus retrieval ([#57](https://github.com/core-ds/core-components/issues/57)) ([3820da8](https://github.com/core-ds/core-components/commit/3820da818bcdcbee6904c648b3e29c3c828fe202))
12
+
13
+
14
+
15
+
16
+
17
+ ## [2.2.1](https://github.com/core-ds/core-components/compare/@alfalab/core-components-switch@2.2.0...@alfalab/core-components-switch@2.2.1) (2021-12-08)
7
18
 
8
19
 
9
20
  ### Bug Fixes
10
21
 
11
- * актуализируем @alfalab/utils ([#897](https://github.com/alfa-laboratory/core-components/issues/897)) ([30fb88e](https://github.com/alfa-laboratory/core-components/commit/30fb88eee36f68cabf80069e5125d911fabde4a5))
22
+ * актуализируем @alfalab/utils ([#897](https://github.com/core-ds/core-components/issues/897)) ([30fb88e](https://github.com/core-ds/core-components/commit/30fb88eee36f68cabf80069e5125d911fabde4a5))
12
23
 
13
24
 
14
25
 
15
26
 
16
27
 
17
- # [2.2.0](https://github.com/alfa-laboratory/core-components/compare/@alfalab/core-components-switch@2.1.0...@alfalab/core-components-switch@2.2.0) (2021-08-03)
28
+ # [2.2.0](https://github.com/core-ds/core-components/compare/@alfalab/core-components-switch@2.1.0...@alfalab/core-components-switch@2.2.0) (2021-08-03)
18
29
 
19
30
 
20
31
  ### Features
21
32
 
22
- * add inactive controls (PDS-266) ([#765](https://github.com/alfa-laboratory/core-components/issues/765)) ([ec02c89](https://github.com/alfa-laboratory/core-components/commit/ec02c89ab6bf038c026ca0a72b3185525334840a))
33
+ * add inactive controls (PDS-266) ([#765](https://github.com/core-ds/core-components/issues/765)) ([ec02c89](https://github.com/core-ds/core-components/commit/ec02c89ab6bf038c026ca0a72b3185525334840a))
23
34
 
24
35
 
25
36
 
26
37
 
27
38
 
28
- # [2.1.0](https://github.com/alfa-laboratory/core-components/compare/@alfalab/core-components-switch@2.0.1...@alfalab/core-components-switch@2.1.0) (2021-07-23)
39
+ # [2.1.0](https://github.com/core-ds/core-components/compare/@alfalab/core-components-switch@2.0.1...@alfalab/core-components-switch@2.1.0) (2021-07-23)
29
40
 
30
41
 
31
42
  ### Features
32
43
 
33
- * checkbox/radio/switch design updates (PDS-252) ([#735](https://github.com/alfa-laboratory/core-components/issues/735)) ([62f3c63](https://github.com/alfa-laboratory/core-components/commit/62f3c63279872a80ffb1c018b08addf897597b26))
44
+ * checkbox/radio/switch design updates (PDS-252) ([#735](https://github.com/core-ds/core-components/issues/735)) ([62f3c63](https://github.com/core-ds/core-components/commit/62f3c63279872a80ffb1c018b08addf897597b26))
34
45
 
35
46
 
36
47
 
37
48
 
38
49
 
39
- ## [2.0.1](https://github.com/alfa-laboratory/core-components/compare/@alfalab/core-components-switch@2.0.0...@alfalab/core-components-switch@2.0.1) (2021-07-09)
50
+ ## [2.0.1](https://github.com/core-ds/core-components/compare/@alfalab/core-components-switch@2.0.0...@alfalab/core-components-switch@2.0.1) (2021-07-09)
40
51
 
41
52
  **Note:** Version bump only for package @alfalab/core-components-switch
42
53
 
@@ -44,14 +55,14 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
44
55
 
45
56
 
46
57
 
47
- # [2.0.0](https://github.com/alfa-laboratory/core-components/compare/@alfalab/core-components-switch@1.7.7...@alfalab/core-components-switch@2.0.0) (2021-07-08)
58
+ # [2.0.0](https://github.com/core-ds/core-components/compare/@alfalab/core-components-switch@1.7.7...@alfalab/core-components-switch@2.0.0) (2021-07-08)
48
59
 
49
60
 
50
61
  ### Features
51
62
 
52
- * upgrade storybook ([#696](https://github.com/alfa-laboratory/core-components/issues/696))
63
+ * upgrade storybook ([#696](https://github.com/core-ds/core-components/issues/696))
53
64
 
54
- ## [1.7.7](https://github.com/alfa-laboratory/core-components/compare/@alfalab/core-components-switch@1.7.6...@alfalab/core-components-switch@1.7.7) (2021-04-26)
65
+ ## [1.7.7](https://github.com/core-ds/core-components/compare/@alfalab/core-components-switch@1.7.6...@alfalab/core-components-switch@1.7.7) (2021-04-26)
55
66
 
56
67
  **Note:** Version bump only for package @alfalab/core-components-switch
57
68
 
@@ -59,7 +70,7 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
59
70
 
60
71
 
61
72
 
62
- ## [1.7.6](https://github.com/alfa-laboratory/core-components/compare/@alfalab/core-components-switch@1.7.5...@alfalab/core-components-switch@1.7.6) (2021-04-01)
73
+ ## [1.7.6](https://github.com/core-ds/core-components/compare/@alfalab/core-components-switch@1.7.5...@alfalab/core-components-switch@1.7.6) (2021-04-01)
63
74
 
64
75
  **Note:** Version bump only for package @alfalab/core-components-switch
65
76
 
@@ -67,7 +78,7 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
67
78
 
68
79
 
69
80
 
70
- ## [1.7.5](https://github.com/alfa-laboratory/core-components/compare/@alfalab/core-components-switch@1.7.4...@alfalab/core-components-switch@1.7.5) (2021-03-24)
81
+ ## [1.7.5](https://github.com/core-ds/core-components/compare/@alfalab/core-components-switch@1.7.4...@alfalab/core-components-switch@1.7.5) (2021-03-24)
71
82
 
72
83
  **Note:** Version bump only for package @alfalab/core-components-switch
73
84
 
@@ -75,40 +86,40 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
75
86
 
76
87
 
77
88
 
78
- ## [1.7.4](https://github.com/alfa-laboratory/core-components/compare/@alfalab/core-components-switch@1.7.2...@alfalab/core-components-switch@1.7.4) (2021-03-18)
89
+ ## [1.7.4](https://github.com/core-ds/core-components/compare/@alfalab/core-components-switch@1.7.2...@alfalab/core-components-switch@1.7.4) (2021-03-18)
79
90
 
80
91
 
81
92
  ### Bug Fixes
82
93
 
83
- * one more sborka bug ([#579](https://github.com/alfa-laboratory/core-components/issues/579)) ([9fbe0be](https://github.com/alfa-laboratory/core-components/commit/9fbe0beca56ec5971de78b3f6cda25305b260efc))
94
+ * one more sborka bug ([#579](https://github.com/core-ds/core-components/issues/579)) ([9fbe0be](https://github.com/core-ds/core-components/commit/9fbe0beca56ec5971de78b3f6cda25305b260efc))
84
95
 
85
96
 
86
97
 
87
98
 
88
99
 
89
- ## [1.7.2](https://github.com/alfa-laboratory/core-components/compare/@alfalab/core-components-switch@1.7.0...@alfalab/core-components-switch@1.7.2) (2021-03-16)
100
+ ## [1.7.2](https://github.com/core-ds/core-components/compare/@alfalab/core-components-switch@1.7.0...@alfalab/core-components-switch@1.7.2) (2021-03-16)
90
101
 
91
102
 
92
103
  ### Bug Fixes
93
104
 
94
- * border-radius in packages ([781749e](https://github.com/alfa-laboratory/core-components/commit/781749ef38aefd5a6707ac56d2e297dce9f3e073))
105
+ * border-radius in packages ([781749e](https://github.com/core-ds/core-components/commit/781749ef38aefd5a6707ac56d2e297dce9f3e073))
95
106
 
96
107
 
97
108
 
98
109
 
99
110
 
100
- # [1.7.0](https://github.com/alfa-laboratory/core-components/compare/@alfalab/core-components-switch@1.6.6...@alfalab/core-components-switch@1.7.0) (2021-03-15)
111
+ # [1.7.0](https://github.com/core-ds/core-components/compare/@alfalab/core-components-switch@1.6.6...@alfalab/core-components-switch@1.7.0) (2021-03-15)
101
112
 
102
113
 
103
114
  ### Features
104
115
 
105
- * **vars:** introducing border-radius vars ([1a6fb28](https://github.com/alfa-laboratory/core-components/commit/1a6fb287bcfab50048c3a9100645b4dee8cd3395))
116
+ * **vars:** introducing border-radius vars ([1a6fb28](https://github.com/core-ds/core-components/commit/1a6fb287bcfab50048c3a9100645b4dee8cd3395))
106
117
 
107
118
 
108
119
 
109
120
 
110
121
 
111
- ## [1.6.6](https://github.com/alfa-laboratory/core-components/compare/@alfalab/core-components-switch@1.6.5...@alfalab/core-components-switch@1.6.6) (2021-03-14)
122
+ ## [1.6.6](https://github.com/core-ds/core-components/compare/@alfalab/core-components-switch@1.6.5...@alfalab/core-components-switch@1.6.6) (2021-03-14)
112
123
 
113
124
  **Note:** Version bump only for package @alfalab/core-components-switch
114
125
 
@@ -116,7 +127,7 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
116
127
 
117
128
 
118
129
 
119
- ## [1.6.5](https://github.com/alfa-laboratory/core-components/compare/@alfalab/core-components-switch@1.6.4...@alfalab/core-components-switch@1.6.5) (2021-03-04)
130
+ ## [1.6.5](https://github.com/core-ds/core-components/compare/@alfalab/core-components-switch@1.6.4...@alfalab/core-components-switch@1.6.5) (2021-03-04)
120
131
 
121
132
  **Note:** Version bump only for package @alfalab/core-components-switch
122
133
 
@@ -124,7 +135,7 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
124
135
 
125
136
 
126
137
 
127
- ## [1.6.4](https://github.com/alfa-laboratory/core-components/compare/@alfalab/core-components-switch@1.6.3...@alfalab/core-components-switch@1.6.4) (2021-03-03)
138
+ ## [1.6.4](https://github.com/core-ds/core-components/compare/@alfalab/core-components-switch@1.6.3...@alfalab/core-components-switch@1.6.4) (2021-03-03)
128
139
 
129
140
  **Note:** Version bump only for package @alfalab/core-components-switch
130
141
 
@@ -132,7 +143,7 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
132
143
 
133
144
 
134
145
 
135
- ## [1.6.3](https://github.com/alfa-laboratory/core-components/compare/@alfalab/core-components-switch@1.6.2...@alfalab/core-components-switch@1.6.3) (2021-02-20)
146
+ ## [1.6.3](https://github.com/core-ds/core-components/compare/@alfalab/core-components-switch@1.6.2...@alfalab/core-components-switch@1.6.3) (2021-02-20)
136
147
 
137
148
  **Note:** Version bump only for package @alfalab/core-components-switch
138
149
 
@@ -140,20 +151,20 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
140
151
 
141
152
 
142
153
 
143
- ## [1.6.2](https://github.com/alfa-laboratory/core-components/compare/@alfalab/core-components-switch@1.6.1...@alfalab/core-components-switch@1.6.2) (2021-02-18)
154
+ ## [1.6.2](https://github.com/core-ds/core-components/compare/@alfalab/core-components-switch@1.6.1...@alfalab/core-components-switch@1.6.2) (2021-02-18)
144
155
 
145
156
 
146
157
  ### Bug Fixes
147
158
 
148
- * update versions ([#525](https://github.com/alfa-laboratory/core-components/issues/525)) ([31b2e4c](https://github.com/alfa-laboratory/core-components/commit/31b2e4c92fde6e2b63a3391a4e053cd328e93e70))
159
+ * update versions ([#525](https://github.com/core-ds/core-components/issues/525)) ([31b2e4c](https://github.com/core-ds/core-components/commit/31b2e4c92fde6e2b63a3391a4e053cd328e93e70))
149
160
 
150
161
 
151
162
 
152
163
 
153
164
 
154
- # [@alfalab/core-components-switch-v1.4.0](https://github.com/alfa-laboratory/core-components/compare/@alfalab/core-components-switch@1.3.4...@alfalab/core-components-switch@1.4.0) (2020-11-25)
165
+ # [@alfalab/core-components-switch-v1.4.0](https://github.com/core-ds/core-components/compare/@alfalab/core-components-switch@1.3.4...@alfalab/core-components-switch@1.4.0) (2020-11-25)
155
166
 
156
167
 
157
168
  ### Features
158
169
 
159
- * **switch:** improved theming ([b4ecc39](https://github.com/alfa-laboratory/core-components/commit/b4ecc399c706e1de7086e255e57219e3907414e0))
170
+ * **switch:** improved theming ([b4ecc39](https://github.com/core-ds/core-components/commit/b4ecc399c706e1de7086e255e57219e3907414e0))
package/dist/Component.js CHANGED
@@ -52,7 +52,7 @@ function __rest(s, e) {
52
52
  return t;
53
53
  }
54
54
 
55
- var styles = {"component":"switch__component_qfjsc","start":"switch__start_qfjsc","center":"switch__center_qfjsc","addons":"switch__addons_qfjsc","block":"switch__block_qfjsc","switch":"switch__switch_qfjsc","content":"switch__content_qfjsc","label":"switch__label_qfjsc","hint":"switch__hint_qfjsc","reversed":"switch__reversed_qfjsc","checked":"switch__checked_qfjsc","disabled":"switch__disabled_qfjsc","inactive":"switch__inactive_qfjsc","focused":"switch__focused_qfjsc"};
55
+ var styles = {"component":"switch__component_1kazz","start":"switch__start_1kazz","center":"switch__center_1kazz","addons":"switch__addons_1kazz","block":"switch__block_1kazz","switch":"switch__switch_1kazz","content":"switch__content_1kazz","label":"switch__label_1kazz","hint":"switch__hint_1kazz","reversed":"switch__reversed_1kazz","checked":"switch__checked_1kazz","disabled":"switch__disabled_1kazz","inactive":"switch__inactive_1kazz","focused":"switch__focused_1kazz"};
56
56
  require('./index.css')
57
57
 
58
58
  var Switch = React.forwardRef(function (_a, ref) {
@@ -1,9 +1,9 @@
1
1
  :root {
2
2
  --color-light-border-link: #007aff;
3
- --color-light-border-secondary-inverted: #b6bcc3;
3
+ --color-light-border-underline: #b6bcc3;
4
4
  --color-light-graphic-accent: #ef3124;
5
- --color-light-graphic-neutral: #dbdee1;
6
5
  --color-light-graphic-primary-inverted: #fff;
6
+ --color-light-graphic-quaternary: #dbdee1;
7
7
  --color-light-graphic-secondary: #6d7986;
8
8
  --color-light-text-primary: #0b1f35;
9
9
  --color-light-text-secondary: #546272;
@@ -42,11 +42,11 @@
42
42
 
43
43
  /* disabled */
44
44
  --switch-disabled-color: var(--color-light-text-secondary);
45
- --switch-disabled-bg-color: var(--color-light-graphic-neutral);
46
- --switch-disabled-border-color: var(--color-light-graphic-neutral);
45
+ --switch-disabled-bg-color: var(--color-light-graphic-quaternary);
46
+ --switch-disabled-border-color: var(--color-light-graphic-quaternary);
47
47
 
48
48
  /* inactive */
49
- --switch-inactive-color: var(--color-light-border-secondary-inverted);
49
+ --switch-inactive-color: var(--color-light-border-underline);
50
50
  }
51
51
  .component {
52
52
  display: inline-flex;
@@ -42,7 +42,7 @@ function __rest(s, e) {
42
42
  return t;
43
43
  }
44
44
 
45
- var styles = {"component":"switch__component_qfjsc","start":"switch__start_qfjsc","center":"switch__center_qfjsc","addons":"switch__addons_qfjsc","block":"switch__block_qfjsc","switch":"switch__switch_qfjsc","content":"switch__content_qfjsc","label":"switch__label_qfjsc","hint":"switch__hint_qfjsc","reversed":"switch__reversed_qfjsc","checked":"switch__checked_qfjsc","disabled":"switch__disabled_qfjsc","inactive":"switch__inactive_qfjsc","focused":"switch__focused_qfjsc"};
45
+ var styles = {"component":"switch__component_1kazz","start":"switch__start_1kazz","center":"switch__center_1kazz","addons":"switch__addons_1kazz","block":"switch__block_1kazz","switch":"switch__switch_1kazz","content":"switch__content_1kazz","label":"switch__label_1kazz","hint":"switch__hint_1kazz","reversed":"switch__reversed_1kazz","checked":"switch__checked_1kazz","disabled":"switch__disabled_1kazz","inactive":"switch__inactive_1kazz","focused":"switch__focused_1kazz"};
46
46
  require('./index.css')
47
47
 
48
48
  var Switch = forwardRef(function (_a, ref) {
@@ -1,10 +1,10 @@
1
- /* hash: tx7lo */
1
+ /* hash: 1d0wt */
2
2
  :root {
3
3
  --color-light-border-link: #007aff;
4
- --color-light-border-secondary-inverted: #b6bcc3;
4
+ --color-light-border-underline: #b6bcc3;
5
5
  --color-light-graphic-accent: #ef3124;
6
- --color-light-graphic-neutral: #dbdee1;
7
6
  --color-light-graphic-primary-inverted: #fff;
7
+ --color-light-graphic-quaternary: #dbdee1;
8
8
  --color-light-graphic-secondary: #6d7986;
9
9
  --color-light-text-primary: #0b1f35;
10
10
  --color-light-text-secondary: #546272;
@@ -43,13 +43,13 @@
43
43
 
44
44
  /* disabled */
45
45
  --switch-disabled-color: var(--color-light-text-secondary);
46
- --switch-disabled-bg-color: var(--color-light-graphic-neutral);
47
- --switch-disabled-border-color: var(--color-light-graphic-neutral);
46
+ --switch-disabled-bg-color: var(--color-light-graphic-quaternary);
47
+ --switch-disabled-border-color: var(--color-light-graphic-quaternary);
48
48
 
49
49
  /* inactive */
50
- --switch-inactive-color: var(--color-light-border-secondary-inverted);
50
+ --switch-inactive-color: var(--color-light-border-underline);
51
51
  }
52
- .switch__component_qfjsc {
52
+ .switch__component_1kazz {
53
53
  display: inline-flex;
54
54
  align-items: flex-start;
55
55
  margin: 0;
@@ -58,25 +58,25 @@
58
58
  cursor: pointer;
59
59
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
60
60
  }
61
- .switch__component_qfjsc input {
61
+ .switch__component_1kazz input {
62
62
  opacity: 0;
63
63
  position: absolute;
64
64
  }
65
- .switch__start_qfjsc {
65
+ .switch__start_1kazz {
66
66
  align-items: flex-start;
67
67
  }
68
- .switch__center_qfjsc {
68
+ .switch__center_1kazz {
69
69
  align-items: center;
70
70
  }
71
- .switch__addons_qfjsc {
71
+ .switch__addons_1kazz {
72
72
  margin-left: auto;
73
73
  padding-left: var(--gap-m);
74
74
  line-height: 24px;
75
75
  }
76
- .switch__block_qfjsc {
76
+ .switch__block_1kazz {
77
77
  width: 100%;
78
78
  }
79
- .switch__switch_qfjsc {
79
+ .switch__switch_1kazz {
80
80
  position: relative;
81
81
  border-radius: var(--border-radius-xl);
82
82
  width: 36px;
@@ -88,7 +88,7 @@
88
88
  transition: background-color 0.2s ease, border-color 0.2s ease;
89
89
  box-sizing: border-box;
90
90
  }
91
- .switch__switch_qfjsc:before {
91
+ .switch__switch_1kazz:before {
92
92
  content: '';
93
93
  position: absolute;
94
94
  top: 0;
@@ -101,21 +101,21 @@
101
101
  box-sizing: border-box;
102
102
  transition: transform 0.2s ease;
103
103
  }
104
- .switch__content_qfjsc {
104
+ .switch__content_1kazz {
105
105
  margin-left: var(--gap-s);
106
106
  flex-grow: 1;
107
107
  }
108
- .switch__label_qfjsc {
108
+ .switch__label_1kazz {
109
109
  font-size: 16px;
110
110
  line-height: 24px;
111
111
  font-weight: 400;
112
112
  display: block;
113
113
  color: var(--switch-label-color);
114
114
  }
115
- .switch__label_qfjsc:not(:only-child) {
115
+ .switch__label_1kazz:not(:only-child) {
116
116
  margin-bottom: var(--gap-2xs);
117
117
  }
118
- .switch__hint_qfjsc {
118
+ .switch__hint_1kazz {
119
119
  font-size: 14px;
120
120
  line-height: 18px;
121
121
  font-weight: 400;
@@ -123,55 +123,55 @@
123
123
  color: var(--switch-hint-color);
124
124
  }
125
125
  /* Reversed state */
126
- .switch__component_qfjsc.switch__reversed_qfjsc {
126
+ .switch__component_1kazz.switch__reversed_1kazz {
127
127
  flex-direction: row-reverse;
128
128
  }
129
- .switch__reversed_qfjsc .switch__content_qfjsc {
129
+ .switch__reversed_1kazz .switch__content_1kazz {
130
130
  margin-right: var(--gap-m);
131
131
  margin-left: 0;
132
132
  }
133
- .switch__reversed_qfjsc .switch__addons_qfjsc {
133
+ .switch__reversed_1kazz .switch__addons_1kazz {
134
134
  margin-left: 0;
135
135
  padding-left: 0;
136
136
  margin-right: auto;
137
137
  padding-right: var(--gap-m);
138
138
  }
139
139
  /* Checked state */
140
- .switch__checked_qfjsc .switch__switch_qfjsc {
140
+ .switch__checked_1kazz .switch__switch_1kazz {
141
141
  background-color: var(--switch-checked-bg-color);
142
142
  border-color: var(--switch-checked-border-color);
143
143
  }
144
- .switch__checked_qfjsc .switch__switch_qfjsc:before {
144
+ .switch__checked_1kazz .switch__switch_1kazz:before {
145
145
  /* ширина компонента(36px + 2*2px) - отступы(2 * 2px) - размер кружка(20px) */
146
146
  transform: translateX(16px);
147
147
  }
148
148
  /* Disabled state */
149
- .switch__disabled_qfjsc {
149
+ .switch__disabled_1kazz {
150
150
  cursor: var(--disabled-cursor);
151
151
  }
152
- .switch__disabled_qfjsc .switch__switch_qfjsc {
152
+ .switch__disabled_1kazz .switch__switch_1kazz {
153
153
  background-color: var(--switch-disabled-bg-color);
154
154
  border-color: var(--switch-disabled-border-color);
155
155
  }
156
- .switch__disabled_qfjsc .switch__label_qfjsc {
156
+ .switch__disabled_1kazz .switch__label_1kazz {
157
157
  color: var(--switch-disabled-color);
158
158
  }
159
- .switch__disabled_qfjsc .switch__hint_qfjsc {
159
+ .switch__disabled_1kazz .switch__hint_1kazz {
160
160
  color: var(--switch-disabled-color);
161
161
  }
162
162
  /* Inactive */
163
- .switch__inactive_qfjsc {
163
+ .switch__inactive_1kazz {
164
164
  cursor: var(--disabled-cursor);
165
165
  }
166
- .switch__inactive_qfjsc .switch__switch_qfjsc {
166
+ .switch__inactive_1kazz .switch__switch_1kazz {
167
167
  background-color: var(--switch-disabled-bg-color);
168
168
  border-color: var(--switch-disabled-border-color)
169
169
  }
170
- .switch__inactive_qfjsc .switch__switch_qfjsc:before {
170
+ .switch__inactive_1kazz .switch__switch_1kazz:before {
171
171
  background-color: var(--switch-inactive-color);
172
172
  }
173
173
  /* Focused state */
174
- .switch__focused_qfjsc .switch__switch_qfjsc {
174
+ .switch__focused_1kazz .switch__switch_1kazz {
175
175
  outline: 2px solid var(--focus-color);
176
176
  outline-offset: 2px;
177
177
  }
package/dist/index.css CHANGED
@@ -1,10 +1,10 @@
1
- /* hash: tx7lo */
1
+ /* hash: 1d0wt */
2
2
  :root {
3
3
  --color-light-border-link: #007aff;
4
- --color-light-border-secondary-inverted: #b6bcc3;
4
+ --color-light-border-underline: #b6bcc3;
5
5
  --color-light-graphic-accent: #ef3124;
6
- --color-light-graphic-neutral: #dbdee1;
7
6
  --color-light-graphic-primary-inverted: #fff;
7
+ --color-light-graphic-quaternary: #dbdee1;
8
8
  --color-light-graphic-secondary: #6d7986;
9
9
  --color-light-text-primary: #0b1f35;
10
10
  --color-light-text-secondary: #546272;
@@ -43,13 +43,13 @@
43
43
 
44
44
  /* disabled */
45
45
  --switch-disabled-color: var(--color-light-text-secondary);
46
- --switch-disabled-bg-color: var(--color-light-graphic-neutral);
47
- --switch-disabled-border-color: var(--color-light-graphic-neutral);
46
+ --switch-disabled-bg-color: var(--color-light-graphic-quaternary);
47
+ --switch-disabled-border-color: var(--color-light-graphic-quaternary);
48
48
 
49
49
  /* inactive */
50
- --switch-inactive-color: var(--color-light-border-secondary-inverted);
50
+ --switch-inactive-color: var(--color-light-border-underline);
51
51
  }
52
- .switch__component_qfjsc {
52
+ .switch__component_1kazz {
53
53
  display: inline-flex;
54
54
  align-items: flex-start;
55
55
  margin: 0;
@@ -58,25 +58,25 @@
58
58
  cursor: pointer;
59
59
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
60
60
  }
61
- .switch__component_qfjsc input {
61
+ .switch__component_1kazz input {
62
62
  opacity: 0;
63
63
  position: absolute;
64
64
  }
65
- .switch__start_qfjsc {
65
+ .switch__start_1kazz {
66
66
  align-items: flex-start;
67
67
  }
68
- .switch__center_qfjsc {
68
+ .switch__center_1kazz {
69
69
  align-items: center;
70
70
  }
71
- .switch__addons_qfjsc {
71
+ .switch__addons_1kazz {
72
72
  margin-left: auto;
73
73
  padding-left: var(--gap-m);
74
74
  line-height: 24px;
75
75
  }
76
- .switch__block_qfjsc {
76
+ .switch__block_1kazz {
77
77
  width: 100%;
78
78
  }
79
- .switch__switch_qfjsc {
79
+ .switch__switch_1kazz {
80
80
  position: relative;
81
81
  border-radius: var(--border-radius-xl);
82
82
  width: 36px;
@@ -88,7 +88,7 @@
88
88
  transition: background-color 0.2s ease, border-color 0.2s ease;
89
89
  box-sizing: border-box;
90
90
  }
91
- .switch__switch_qfjsc:before {
91
+ .switch__switch_1kazz:before {
92
92
  content: '';
93
93
  position: absolute;
94
94
  top: 0;
@@ -101,21 +101,21 @@
101
101
  box-sizing: border-box;
102
102
  transition: transform 0.2s ease;
103
103
  }
104
- .switch__content_qfjsc {
104
+ .switch__content_1kazz {
105
105
  margin-left: var(--gap-s);
106
106
  flex-grow: 1;
107
107
  }
108
- .switch__label_qfjsc {
108
+ .switch__label_1kazz {
109
109
  font-size: 16px;
110
110
  line-height: 24px;
111
111
  font-weight: 400;
112
112
  display: block;
113
113
  color: var(--switch-label-color);
114
114
  }
115
- .switch__label_qfjsc:not(:only-child) {
115
+ .switch__label_1kazz:not(:only-child) {
116
116
  margin-bottom: var(--gap-2xs);
117
117
  }
118
- .switch__hint_qfjsc {
118
+ .switch__hint_1kazz {
119
119
  font-size: 14px;
120
120
  line-height: 18px;
121
121
  font-weight: 400;
@@ -123,55 +123,55 @@
123
123
  color: var(--switch-hint-color);
124
124
  }
125
125
  /* Reversed state */
126
- .switch__component_qfjsc.switch__reversed_qfjsc {
126
+ .switch__component_1kazz.switch__reversed_1kazz {
127
127
  flex-direction: row-reverse;
128
128
  }
129
- .switch__reversed_qfjsc .switch__content_qfjsc {
129
+ .switch__reversed_1kazz .switch__content_1kazz {
130
130
  margin-right: var(--gap-m);
131
131
  margin-left: 0;
132
132
  }
133
- .switch__reversed_qfjsc .switch__addons_qfjsc {
133
+ .switch__reversed_1kazz .switch__addons_1kazz {
134
134
  margin-left: 0;
135
135
  padding-left: 0;
136
136
  margin-right: auto;
137
137
  padding-right: var(--gap-m);
138
138
  }
139
139
  /* Checked state */
140
- .switch__checked_qfjsc .switch__switch_qfjsc {
140
+ .switch__checked_1kazz .switch__switch_1kazz {
141
141
  background-color: var(--switch-checked-bg-color);
142
142
  border-color: var(--switch-checked-border-color);
143
143
  }
144
- .switch__checked_qfjsc .switch__switch_qfjsc:before {
144
+ .switch__checked_1kazz .switch__switch_1kazz:before {
145
145
  /* ширина компонента(36px + 2*2px) - отступы(2 * 2px) - размер кружка(20px) */
146
146
  transform: translateX(16px);
147
147
  }
148
148
  /* Disabled state */
149
- .switch__disabled_qfjsc {
149
+ .switch__disabled_1kazz {
150
150
  cursor: var(--disabled-cursor);
151
151
  }
152
- .switch__disabled_qfjsc .switch__switch_qfjsc {
152
+ .switch__disabled_1kazz .switch__switch_1kazz {
153
153
  background-color: var(--switch-disabled-bg-color);
154
154
  border-color: var(--switch-disabled-border-color);
155
155
  }
156
- .switch__disabled_qfjsc .switch__label_qfjsc {
156
+ .switch__disabled_1kazz .switch__label_1kazz {
157
157
  color: var(--switch-disabled-color);
158
158
  }
159
- .switch__disabled_qfjsc .switch__hint_qfjsc {
159
+ .switch__disabled_1kazz .switch__hint_1kazz {
160
160
  color: var(--switch-disabled-color);
161
161
  }
162
162
  /* Inactive */
163
- .switch__inactive_qfjsc {
163
+ .switch__inactive_1kazz {
164
164
  cursor: var(--disabled-cursor);
165
165
  }
166
- .switch__inactive_qfjsc .switch__switch_qfjsc {
166
+ .switch__inactive_1kazz .switch__switch_1kazz {
167
167
  background-color: var(--switch-disabled-bg-color);
168
168
  border-color: var(--switch-disabled-border-color)
169
169
  }
170
- .switch__inactive_qfjsc .switch__switch_qfjsc:before {
170
+ .switch__inactive_1kazz .switch__switch_1kazz:before {
171
171
  background-color: var(--switch-inactive-color);
172
172
  }
173
173
  /* Focused state */
174
- .switch__focused_qfjsc .switch__switch_qfjsc {
174
+ .switch__focused_1kazz .switch__switch_1kazz {
175
175
  outline: 2px solid var(--focus-color);
176
176
  outline-offset: 2px;
177
177
  }
@@ -3,7 +3,7 @@ import cn from 'classnames';
3
3
  import mergeRefs from 'react-merge-refs';
4
4
  import { useFocus } from '@alfalab/hooks';
5
5
 
6
- var styles = {"component":"switch__component_qfjsc","start":"switch__start_qfjsc","center":"switch__center_qfjsc","addons":"switch__addons_qfjsc","block":"switch__block_qfjsc","switch":"switch__switch_qfjsc","content":"switch__content_qfjsc","label":"switch__label_qfjsc","hint":"switch__hint_qfjsc","reversed":"switch__reversed_qfjsc","checked":"switch__checked_qfjsc","disabled":"switch__disabled_qfjsc","inactive":"switch__inactive_qfjsc","focused":"switch__focused_qfjsc"};
6
+ var styles = {"component":"switch__component_1kazz","start":"switch__start_1kazz","center":"switch__center_1kazz","addons":"switch__addons_1kazz","block":"switch__block_1kazz","switch":"switch__switch_1kazz","content":"switch__content_1kazz","label":"switch__label_1kazz","hint":"switch__hint_1kazz","reversed":"switch__reversed_1kazz","checked":"switch__checked_1kazz","disabled":"switch__disabled_1kazz","inactive":"switch__inactive_1kazz","focused":"switch__focused_1kazz"};
7
7
  require('./index.css')
8
8
 
9
9
  const Switch = forwardRef(({ reversed = false, checked = false, align = 'start', addons, block, disabled, inactive, label, hint, name, value, className, onChange, dataTestId, ...restProps }, ref) => {
@@ -1,10 +1,10 @@
1
- /* hash: tx7lo */
1
+ /* hash: 1d0wt */
2
2
  :root {
3
3
  --color-light-border-link: #007aff;
4
- --color-light-border-secondary-inverted: #b6bcc3;
4
+ --color-light-border-underline: #b6bcc3;
5
5
  --color-light-graphic-accent: #ef3124;
6
- --color-light-graphic-neutral: #dbdee1;
7
6
  --color-light-graphic-primary-inverted: #fff;
7
+ --color-light-graphic-quaternary: #dbdee1;
8
8
  --color-light-graphic-secondary: #6d7986;
9
9
  --color-light-text-primary: #0b1f35;
10
10
  --color-light-text-secondary: #546272;
@@ -43,13 +43,13 @@
43
43
 
44
44
  /* disabled */
45
45
  --switch-disabled-color: var(--color-light-text-secondary);
46
- --switch-disabled-bg-color: var(--color-light-graphic-neutral);
47
- --switch-disabled-border-color: var(--color-light-graphic-neutral);
46
+ --switch-disabled-bg-color: var(--color-light-graphic-quaternary);
47
+ --switch-disabled-border-color: var(--color-light-graphic-quaternary);
48
48
 
49
49
  /* inactive */
50
- --switch-inactive-color: var(--color-light-border-secondary-inverted);
50
+ --switch-inactive-color: var(--color-light-border-underline);
51
51
  }
52
- .switch__component_qfjsc {
52
+ .switch__component_1kazz {
53
53
  display: inline-flex;
54
54
  align-items: flex-start;
55
55
  margin: 0;
@@ -58,25 +58,25 @@
58
58
  cursor: pointer;
59
59
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
60
60
  }
61
- .switch__component_qfjsc input {
61
+ .switch__component_1kazz input {
62
62
  opacity: 0;
63
63
  position: absolute;
64
64
  }
65
- .switch__start_qfjsc {
65
+ .switch__start_1kazz {
66
66
  align-items: flex-start;
67
67
  }
68
- .switch__center_qfjsc {
68
+ .switch__center_1kazz {
69
69
  align-items: center;
70
70
  }
71
- .switch__addons_qfjsc {
71
+ .switch__addons_1kazz {
72
72
  margin-left: auto;
73
73
  padding-left: var(--gap-m);
74
74
  line-height: 24px;
75
75
  }
76
- .switch__block_qfjsc {
76
+ .switch__block_1kazz {
77
77
  width: 100%;
78
78
  }
79
- .switch__switch_qfjsc {
79
+ .switch__switch_1kazz {
80
80
  position: relative;
81
81
  border-radius: var(--border-radius-xl);
82
82
  width: 36px;
@@ -88,7 +88,7 @@
88
88
  transition: background-color 0.2s ease, border-color 0.2s ease;
89
89
  box-sizing: border-box;
90
90
  }
91
- .switch__switch_qfjsc:before {
91
+ .switch__switch_1kazz:before {
92
92
  content: '';
93
93
  position: absolute;
94
94
  top: 0;
@@ -101,21 +101,21 @@
101
101
  box-sizing: border-box;
102
102
  transition: transform 0.2s ease;
103
103
  }
104
- .switch__content_qfjsc {
104
+ .switch__content_1kazz {
105
105
  margin-left: var(--gap-s);
106
106
  flex-grow: 1;
107
107
  }
108
- .switch__label_qfjsc {
108
+ .switch__label_1kazz {
109
109
  font-size: 16px;
110
110
  line-height: 24px;
111
111
  font-weight: 400;
112
112
  display: block;
113
113
  color: var(--switch-label-color);
114
114
  }
115
- .switch__label_qfjsc:not(:only-child) {
115
+ .switch__label_1kazz:not(:only-child) {
116
116
  margin-bottom: var(--gap-2xs);
117
117
  }
118
- .switch__hint_qfjsc {
118
+ .switch__hint_1kazz {
119
119
  font-size: 14px;
120
120
  line-height: 18px;
121
121
  font-weight: 400;
@@ -123,55 +123,55 @@
123
123
  color: var(--switch-hint-color);
124
124
  }
125
125
  /* Reversed state */
126
- .switch__component_qfjsc.switch__reversed_qfjsc {
126
+ .switch__component_1kazz.switch__reversed_1kazz {
127
127
  flex-direction: row-reverse;
128
128
  }
129
- .switch__reversed_qfjsc .switch__content_qfjsc {
129
+ .switch__reversed_1kazz .switch__content_1kazz {
130
130
  margin-right: var(--gap-m);
131
131
  margin-left: 0;
132
132
  }
133
- .switch__reversed_qfjsc .switch__addons_qfjsc {
133
+ .switch__reversed_1kazz .switch__addons_1kazz {
134
134
  margin-left: 0;
135
135
  padding-left: 0;
136
136
  margin-right: auto;
137
137
  padding-right: var(--gap-m);
138
138
  }
139
139
  /* Checked state */
140
- .switch__checked_qfjsc .switch__switch_qfjsc {
140
+ .switch__checked_1kazz .switch__switch_1kazz {
141
141
  background-color: var(--switch-checked-bg-color);
142
142
  border-color: var(--switch-checked-border-color);
143
143
  }
144
- .switch__checked_qfjsc .switch__switch_qfjsc:before {
144
+ .switch__checked_1kazz .switch__switch_1kazz:before {
145
145
  /* ширина компонента(36px + 2*2px) - отступы(2 * 2px) - размер кружка(20px) */
146
146
  transform: translateX(16px);
147
147
  }
148
148
  /* Disabled state */
149
- .switch__disabled_qfjsc {
149
+ .switch__disabled_1kazz {
150
150
  cursor: var(--disabled-cursor);
151
151
  }
152
- .switch__disabled_qfjsc .switch__switch_qfjsc {
152
+ .switch__disabled_1kazz .switch__switch_1kazz {
153
153
  background-color: var(--switch-disabled-bg-color);
154
154
  border-color: var(--switch-disabled-border-color);
155
155
  }
156
- .switch__disabled_qfjsc .switch__label_qfjsc {
156
+ .switch__disabled_1kazz .switch__label_1kazz {
157
157
  color: var(--switch-disabled-color);
158
158
  }
159
- .switch__disabled_qfjsc .switch__hint_qfjsc {
159
+ .switch__disabled_1kazz .switch__hint_1kazz {
160
160
  color: var(--switch-disabled-color);
161
161
  }
162
162
  /* Inactive */
163
- .switch__inactive_qfjsc {
163
+ .switch__inactive_1kazz {
164
164
  cursor: var(--disabled-cursor);
165
165
  }
166
- .switch__inactive_qfjsc .switch__switch_qfjsc {
166
+ .switch__inactive_1kazz .switch__switch_1kazz {
167
167
  background-color: var(--switch-disabled-bg-color);
168
168
  border-color: var(--switch-disabled-border-color)
169
169
  }
170
- .switch__inactive_qfjsc .switch__switch_qfjsc:before {
170
+ .switch__inactive_1kazz .switch__switch_1kazz:before {
171
171
  background-color: var(--switch-inactive-color);
172
172
  }
173
173
  /* Focused state */
174
- .switch__focused_qfjsc .switch__switch_qfjsc {
174
+ .switch__focused_1kazz .switch__switch_1kazz {
175
175
  outline: 2px solid var(--focus-color);
176
176
  outline-offset: 2px;
177
177
  }
package/package.json CHANGED
@@ -1,8 +1,8 @@
1
1
  {
2
2
  "name": "@alfalab/core-components-switch",
3
- "version": "2.2.2",
3
+ "version": "2.3.0",
4
4
  "description": "",
5
- "gitHead": "0363f194b7d8e6d2949795b8f0570262d7028aff",
5
+ "gitHead": "dcd5c0c8e25b7c374ff9311505ccf738a82e22c0",
6
6
  "keywords": [],
7
7
  "license": "MIT",
8
8
  "main": "dist/index.js",
@@ -21,7 +21,7 @@
21
21
  },
22
22
  "dependencies": {
23
23
  "@alfalab/hooks": "^1.4.1",
24
- "classnames": "2.2.6",
25
- "react-merge-refs": "1.1.0"
24
+ "classnames": "^2.2.6",
25
+ "react-merge-refs": "^1.1.0"
26
26
  }
27
27
  }