@alfalab/core-components-switch 2.2.1 → 2.2.4

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/CHANGELOG.md +26 -26
  2. package/dist/Component.js +1 -1
  3. package/dist/cssm/index.module.css +5 -5
  4. package/dist/esm/Component.js +1 -1
  5. package/dist/esm/index.css +31 -31
  6. package/dist/index.css +31 -31
  7. package/dist/modern/Component.js +1 -1
  8. package/dist/modern/index.css +31 -31
  9. package/package.json +4 -4
package/CHANGELOG.md CHANGED
@@ -3,40 +3,40 @@
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.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
7
 
8
8
 
9
9
  ### Bug Fixes
10
10
 
11
- * актуализируем @alfalab/utils ([#897](https://github.com/alfa-laboratory/core-components/issues/897)) ([30fb88e](https://github.com/alfa-laboratory/core-components/commit/30fb88eee36f68cabf80069e5125d911fabde4a5))
11
+ * актуализируем @alfalab/utils ([#897](https://github.com/core-ds/core-components/issues/897)) ([30fb88e](https://github.com/core-ds/core-components/commit/30fb88eee36f68cabf80069e5125d911fabde4a5))
12
12
 
13
13
 
14
14
 
15
15
 
16
16
 
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)
17
+ # [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
18
 
19
19
 
20
20
  ### Features
21
21
 
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))
22
+ * 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
23
 
24
24
 
25
25
 
26
26
 
27
27
 
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)
28
+ # [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
29
 
30
30
 
31
31
  ### Features
32
32
 
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))
33
+ * 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
34
 
35
35
 
36
36
 
37
37
 
38
38
 
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)
39
+ ## [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
40
 
41
41
  **Note:** Version bump only for package @alfalab/core-components-switch
42
42
 
@@ -44,14 +44,14 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
44
44
 
45
45
 
46
46
 
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)
47
+ # [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
48
 
49
49
 
50
50
  ### Features
51
51
 
52
- * upgrade storybook ([#696](https://github.com/alfa-laboratory/core-components/issues/696))
52
+ * upgrade storybook ([#696](https://github.com/core-ds/core-components/issues/696))
53
53
 
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)
54
+ ## [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
55
 
56
56
  **Note:** Version bump only for package @alfalab/core-components-switch
57
57
 
@@ -59,7 +59,7 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
59
59
 
60
60
 
61
61
 
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)
62
+ ## [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
63
 
64
64
  **Note:** Version bump only for package @alfalab/core-components-switch
65
65
 
@@ -67,7 +67,7 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
67
67
 
68
68
 
69
69
 
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)
70
+ ## [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
71
 
72
72
  **Note:** Version bump only for package @alfalab/core-components-switch
73
73
 
@@ -75,40 +75,40 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
75
75
 
76
76
 
77
77
 
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)
78
+ ## [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
79
 
80
80
 
81
81
  ### Bug Fixes
82
82
 
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))
83
+ * 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
84
 
85
85
 
86
86
 
87
87
 
88
88
 
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)
89
+ ## [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
90
 
91
91
 
92
92
  ### Bug Fixes
93
93
 
94
- * border-radius in packages ([781749e](https://github.com/alfa-laboratory/core-components/commit/781749ef38aefd5a6707ac56d2e297dce9f3e073))
94
+ * border-radius in packages ([781749e](https://github.com/core-ds/core-components/commit/781749ef38aefd5a6707ac56d2e297dce9f3e073))
95
95
 
96
96
 
97
97
 
98
98
 
99
99
 
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)
100
+ # [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
101
 
102
102
 
103
103
  ### Features
104
104
 
105
- * **vars:** introducing border-radius vars ([1a6fb28](https://github.com/alfa-laboratory/core-components/commit/1a6fb287bcfab50048c3a9100645b4dee8cd3395))
105
+ * **vars:** introducing border-radius vars ([1a6fb28](https://github.com/core-ds/core-components/commit/1a6fb287bcfab50048c3a9100645b4dee8cd3395))
106
106
 
107
107
 
108
108
 
109
109
 
110
110
 
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)
111
+ ## [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
112
 
113
113
  **Note:** Version bump only for package @alfalab/core-components-switch
114
114
 
@@ -116,7 +116,7 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
116
116
 
117
117
 
118
118
 
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)
119
+ ## [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
120
 
121
121
  **Note:** Version bump only for package @alfalab/core-components-switch
122
122
 
@@ -124,7 +124,7 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
124
124
 
125
125
 
126
126
 
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)
127
+ ## [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
128
 
129
129
  **Note:** Version bump only for package @alfalab/core-components-switch
130
130
 
@@ -132,7 +132,7 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
132
132
 
133
133
 
134
134
 
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)
135
+ ## [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
136
 
137
137
  **Note:** Version bump only for package @alfalab/core-components-switch
138
138
 
@@ -140,20 +140,20 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
140
140
 
141
141
 
142
142
 
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)
143
+ ## [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
144
 
145
145
 
146
146
  ### Bug Fixes
147
147
 
148
- * update versions ([#525](https://github.com/alfa-laboratory/core-components/issues/525)) ([31b2e4c](https://github.com/alfa-laboratory/core-components/commit/31b2e4c92fde6e2b63a3391a4e053cd328e93e70))
148
+ * update versions ([#525](https://github.com/core-ds/core-components/issues/525)) ([31b2e4c](https://github.com/core-ds/core-components/commit/31b2e4c92fde6e2b63a3391a4e053cd328e93e70))
149
149
 
150
150
 
151
151
 
152
152
 
153
153
 
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)
154
+ # [@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
155
 
156
156
 
157
157
  ### Features
158
158
 
159
- * **switch:** improved theming ([b4ecc39](https://github.com/alfa-laboratory/core-components/commit/b4ecc399c706e1de7086e255e57219e3907414e0))
159
+ * **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_k3m9x","start":"switch__start_k3m9x","center":"switch__center_k3m9x","addons":"switch__addons_k3m9x","block":"switch__block_k3m9x","switch":"switch__switch_k3m9x","content":"switch__content_k3m9x","label":"switch__label_k3m9x","hint":"switch__hint_k3m9x","reversed":"switch__reversed_k3m9x","checked":"switch__checked_k3m9x","disabled":"switch__disabled_k3m9x","inactive":"switch__inactive_k3m9x","focused":"switch__focused_k3m9x"};
55
+ var styles = {"component":"switch__component_thrxl","start":"switch__start_thrxl","center":"switch__center_thrxl","addons":"switch__addons_thrxl","block":"switch__block_thrxl","switch":"switch__switch_thrxl","content":"switch__content_thrxl","label":"switch__label_thrxl","hint":"switch__hint_thrxl","reversed":"switch__reversed_thrxl","checked":"switch__checked_thrxl","disabled":"switch__disabled_thrxl","inactive":"switch__inactive_thrxl","focused":"switch__focused_thrxl"};
56
56
  require('./index.css')
57
57
 
58
58
  var Switch = React.forwardRef(function (_a, ref) {
package/dist/cssm/index.module.css CHANGED
@@ -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;
package/dist/esm/Component.js CHANGED
@@ -42,7 +42,7 @@ function __rest(s, e) {
42
42
  return t;
43
43
  }
44
44
 
45
- var styles = {"component":"switch__component_k3m9x","start":"switch__start_k3m9x","center":"switch__center_k3m9x","addons":"switch__addons_k3m9x","block":"switch__block_k3m9x","switch":"switch__switch_k3m9x","content":"switch__content_k3m9x","label":"switch__label_k3m9x","hint":"switch__hint_k3m9x","reversed":"switch__reversed_k3m9x","checked":"switch__checked_k3m9x","disabled":"switch__disabled_k3m9x","inactive":"switch__inactive_k3m9x","focused":"switch__focused_k3m9x"};
45
+ var styles = {"component":"switch__component_thrxl","start":"switch__start_thrxl","center":"switch__center_thrxl","addons":"switch__addons_thrxl","block":"switch__block_thrxl","switch":"switch__switch_thrxl","content":"switch__content_thrxl","label":"switch__label_thrxl","hint":"switch__hint_thrxl","reversed":"switch__reversed_thrxl","checked":"switch__checked_thrxl","disabled":"switch__disabled_thrxl","inactive":"switch__inactive_thrxl","focused":"switch__focused_thrxl"};
46
46
  require('./index.css')
47
47
 
48
48
  var Switch = forwardRef(function (_a, ref) {
package/dist/esm/index.css CHANGED
@@ -1,10 +1,10 @@
1
- /* hash: 1ga9c */
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_k3m9x {
52
+ .switch__component_thrxl {
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_k3m9x input {
61
+ .switch__component_thrxl input {
62
62
  opacity: 0;
63
63
  position: absolute;
64
64
  }
65
- .switch__start_k3m9x {
65
+ .switch__start_thrxl {
66
66
  align-items: flex-start;
67
67
  }
68
- .switch__center_k3m9x {
68
+ .switch__center_thrxl {
69
69
  align-items: center;
70
70
  }
71
- .switch__addons_k3m9x {
71
+ .switch__addons_thrxl {
72
72
  margin-left: auto;
73
73
  padding-left: var(--gap-m);
74
74
  line-height: 24px;
75
75
  }
76
- .switch__block_k3m9x {
76
+ .switch__block_thrxl {
77
77
  width: 100%;
78
78
  }
79
- .switch__switch_k3m9x {
79
+ .switch__switch_thrxl {
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_k3m9x:before {
91
+ .switch__switch_thrxl: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_k3m9x {
104
+ .switch__content_thrxl {
105
105
  margin-left: var(--gap-s);
106
106
  flex-grow: 1;
107
107
  }
108
- .switch__label_k3m9x {
108
+ .switch__label_thrxl {
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_k3m9x:not(:only-child) {
115
+ .switch__label_thrxl:not(:only-child) {
116
116
  margin-bottom: var(--gap-2xs);
117
117
  }
118
- .switch__hint_k3m9x {
118
+ .switch__hint_thrxl {
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_k3m9x.switch__reversed_k3m9x {
126
+ .switch__component_thrxl.switch__reversed_thrxl {
127
127
  flex-direction: row-reverse;
128
128
  }
129
- .switch__reversed_k3m9x .switch__content_k3m9x {
129
+ .switch__reversed_thrxl .switch__content_thrxl {
130
130
  margin-right: var(--gap-m);
131
131
  margin-left: 0;
132
132
  }
133
- .switch__reversed_k3m9x .switch__addons_k3m9x {
133
+ .switch__reversed_thrxl .switch__addons_thrxl {
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_k3m9x .switch__switch_k3m9x {
140
+ .switch__checked_thrxl .switch__switch_thrxl {
141
141
  background-color: var(--switch-checked-bg-color);
142
142
  border-color: var(--switch-checked-border-color);
143
143
  }
144
- .switch__checked_k3m9x .switch__switch_k3m9x:before {
144
+ .switch__checked_thrxl .switch__switch_thrxl:before {
145
145
  /* ширина компонента(36px + 2*2px) - отступы(2 * 2px) - размер кружка(20px) */
146
146
  transform: translateX(16px);
147
147
  }
148
148
  /* Disabled state */
149
- .switch__disabled_k3m9x {
149
+ .switch__disabled_thrxl {
150
150
  cursor: var(--disabled-cursor);
151
151
  }
152
- .switch__disabled_k3m9x .switch__switch_k3m9x {
152
+ .switch__disabled_thrxl .switch__switch_thrxl {
153
153
  background-color: var(--switch-disabled-bg-color);
154
154
  border-color: var(--switch-disabled-border-color);
155
155
  }
156
- .switch__disabled_k3m9x .switch__label_k3m9x {
156
+ .switch__disabled_thrxl .switch__label_thrxl {
157
157
  color: var(--switch-disabled-color);
158
158
  }
159
- .switch__disabled_k3m9x .switch__hint_k3m9x {
159
+ .switch__disabled_thrxl .switch__hint_thrxl {
160
160
  color: var(--switch-disabled-color);
161
161
  }
162
162
  /* Inactive */
163
- .switch__inactive_k3m9x {
163
+ .switch__inactive_thrxl {
164
164
  cursor: var(--disabled-cursor);
165
165
  }
166
- .switch__inactive_k3m9x .switch__switch_k3m9x {
166
+ .switch__inactive_thrxl .switch__switch_thrxl {
167
167
  background-color: var(--switch-disabled-bg-color);
168
168
  border-color: var(--switch-disabled-border-color)
169
169
  }
170
- .switch__inactive_k3m9x .switch__switch_k3m9x:before {
170
+ .switch__inactive_thrxl .switch__switch_thrxl:before {
171
171
  background-color: var(--switch-inactive-color);
172
172
  }
173
173
  /* Focused state */
174
- .switch__focused_k3m9x .switch__switch_k3m9x {
174
+ .switch__focused_thrxl .switch__switch_thrxl {
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: 1ga9c */
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_k3m9x {
52
+ .switch__component_thrxl {
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_k3m9x input {
61
+ .switch__component_thrxl input {
62
62
  opacity: 0;
63
63
  position: absolute;
64
64
  }
65
- .switch__start_k3m9x {
65
+ .switch__start_thrxl {
66
66
  align-items: flex-start;
67
67
  }
68
- .switch__center_k3m9x {
68
+ .switch__center_thrxl {
69
69
  align-items: center;
70
70
  }
71
- .switch__addons_k3m9x {
71
+ .switch__addons_thrxl {
72
72
  margin-left: auto;
73
73
  padding-left: var(--gap-m);
74
74
  line-height: 24px;
75
75
  }
76
- .switch__block_k3m9x {
76
+ .switch__block_thrxl {
77
77
  width: 100%;
78
78
  }
79
- .switch__switch_k3m9x {
79
+ .switch__switch_thrxl {
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_k3m9x:before {
91
+ .switch__switch_thrxl: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_k3m9x {
104
+ .switch__content_thrxl {
105
105
  margin-left: var(--gap-s);
106
106
  flex-grow: 1;
107
107
  }
108
- .switch__label_k3m9x {
108
+ .switch__label_thrxl {
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_k3m9x:not(:only-child) {
115
+ .switch__label_thrxl:not(:only-child) {
116
116
  margin-bottom: var(--gap-2xs);
117
117
  }
118
- .switch__hint_k3m9x {
118
+ .switch__hint_thrxl {
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_k3m9x.switch__reversed_k3m9x {
126
+ .switch__component_thrxl.switch__reversed_thrxl {
127
127
  flex-direction: row-reverse;
128
128
  }
129
- .switch__reversed_k3m9x .switch__content_k3m9x {
129
+ .switch__reversed_thrxl .switch__content_thrxl {
130
130
  margin-right: var(--gap-m);
131
131
  margin-left: 0;
132
132
  }
133
- .switch__reversed_k3m9x .switch__addons_k3m9x {
133
+ .switch__reversed_thrxl .switch__addons_thrxl {
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_k3m9x .switch__switch_k3m9x {
140
+ .switch__checked_thrxl .switch__switch_thrxl {
141
141
  background-color: var(--switch-checked-bg-color);
142
142
  border-color: var(--switch-checked-border-color);
143
143
  }
144
- .switch__checked_k3m9x .switch__switch_k3m9x:before {
144
+ .switch__checked_thrxl .switch__switch_thrxl:before {
145
145
  /* ширина компонента(36px + 2*2px) - отступы(2 * 2px) - размер кружка(20px) */
146
146
  transform: translateX(16px);
147
147
  }
148
148
  /* Disabled state */
149
- .switch__disabled_k3m9x {
149
+ .switch__disabled_thrxl {
150
150
  cursor: var(--disabled-cursor);
151
151
  }
152
- .switch__disabled_k3m9x .switch__switch_k3m9x {
152
+ .switch__disabled_thrxl .switch__switch_thrxl {
153
153
  background-color: var(--switch-disabled-bg-color);
154
154
  border-color: var(--switch-disabled-border-color);
155
155
  }
156
- .switch__disabled_k3m9x .switch__label_k3m9x {
156
+ .switch__disabled_thrxl .switch__label_thrxl {
157
157
  color: var(--switch-disabled-color);
158
158
  }
159
- .switch__disabled_k3m9x .switch__hint_k3m9x {
159
+ .switch__disabled_thrxl .switch__hint_thrxl {
160
160
  color: var(--switch-disabled-color);
161
161
  }
162
162
  /* Inactive */
163
- .switch__inactive_k3m9x {
163
+ .switch__inactive_thrxl {
164
164
  cursor: var(--disabled-cursor);
165
165
  }
166
- .switch__inactive_k3m9x .switch__switch_k3m9x {
166
+ .switch__inactive_thrxl .switch__switch_thrxl {
167
167
  background-color: var(--switch-disabled-bg-color);
168
168
  border-color: var(--switch-disabled-border-color)
169
169
  }
170
- .switch__inactive_k3m9x .switch__switch_k3m9x:before {
170
+ .switch__inactive_thrxl .switch__switch_thrxl:before {
171
171
  background-color: var(--switch-inactive-color);
172
172
  }
173
173
  /* Focused state */
174
- .switch__focused_k3m9x .switch__switch_k3m9x {
174
+ .switch__focused_thrxl .switch__switch_thrxl {
175
175
  outline: 2px solid var(--focus-color);
176
176
  outline-offset: 2px;
177
177
  }
package/dist/modern/Component.js CHANGED
@@ -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_k3m9x","start":"switch__start_k3m9x","center":"switch__center_k3m9x","addons":"switch__addons_k3m9x","block":"switch__block_k3m9x","switch":"switch__switch_k3m9x","content":"switch__content_k3m9x","label":"switch__label_k3m9x","hint":"switch__hint_k3m9x","reversed":"switch__reversed_k3m9x","checked":"switch__checked_k3m9x","disabled":"switch__disabled_k3m9x","inactive":"switch__inactive_k3m9x","focused":"switch__focused_k3m9x"};
6
+ var styles = {"component":"switch__component_thrxl","start":"switch__start_thrxl","center":"switch__center_thrxl","addons":"switch__addons_thrxl","block":"switch__block_thrxl","switch":"switch__switch_thrxl","content":"switch__content_thrxl","label":"switch__label_thrxl","hint":"switch__hint_thrxl","reversed":"switch__reversed_thrxl","checked":"switch__checked_thrxl","disabled":"switch__disabled_thrxl","inactive":"switch__inactive_thrxl","focused":"switch__focused_thrxl"};
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) => {
package/dist/modern/index.css CHANGED
@@ -1,10 +1,10 @@
1
- /* hash: 1ga9c */
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_k3m9x {
52
+ .switch__component_thrxl {
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_k3m9x input {
61
+ .switch__component_thrxl input {
62
62
  opacity: 0;
63
63
  position: absolute;
64
64
  }
65
- .switch__start_k3m9x {
65
+ .switch__start_thrxl {
66
66
  align-items: flex-start;
67
67
  }
68
- .switch__center_k3m9x {
68
+ .switch__center_thrxl {
69
69
  align-items: center;
70
70
  }
71
- .switch__addons_k3m9x {
71
+ .switch__addons_thrxl {
72
72
  margin-left: auto;
73
73
  padding-left: var(--gap-m);
74
74
  line-height: 24px;
75
75
  }
76
- .switch__block_k3m9x {
76
+ .switch__block_thrxl {
77
77
  width: 100%;
78
78
  }
79
- .switch__switch_k3m9x {
79
+ .switch__switch_thrxl {
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_k3m9x:before {
91
+ .switch__switch_thrxl: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_k3m9x {
104
+ .switch__content_thrxl {
105
105
  margin-left: var(--gap-s);
106
106
  flex-grow: 1;
107
107
  }
108
- .switch__label_k3m9x {
108
+ .switch__label_thrxl {
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_k3m9x:not(:only-child) {
115
+ .switch__label_thrxl:not(:only-child) {
116
116
  margin-bottom: var(--gap-2xs);
117
117
  }
118
- .switch__hint_k3m9x {
118
+ .switch__hint_thrxl {
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_k3m9x.switch__reversed_k3m9x {
126
+ .switch__component_thrxl.switch__reversed_thrxl {
127
127
  flex-direction: row-reverse;
128
128
  }
129
- .switch__reversed_k3m9x .switch__content_k3m9x {
129
+ .switch__reversed_thrxl .switch__content_thrxl {
130
130
  margin-right: var(--gap-m);
131
131
  margin-left: 0;
132
132
  }
133
- .switch__reversed_k3m9x .switch__addons_k3m9x {
133
+ .switch__reversed_thrxl .switch__addons_thrxl {
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_k3m9x .switch__switch_k3m9x {
140
+ .switch__checked_thrxl .switch__switch_thrxl {
141
141
  background-color: var(--switch-checked-bg-color);
142
142
  border-color: var(--switch-checked-border-color);
143
143
  }
144
- .switch__checked_k3m9x .switch__switch_k3m9x:before {
144
+ .switch__checked_thrxl .switch__switch_thrxl:before {
145
145
  /* ширина компонента(36px + 2*2px) - отступы(2 * 2px) - размер кружка(20px) */
146
146
  transform: translateX(16px);
147
147
  }
148
148
  /* Disabled state */
149
- .switch__disabled_k3m9x {
149
+ .switch__disabled_thrxl {
150
150
  cursor: var(--disabled-cursor);
151
151
  }
152
- .switch__disabled_k3m9x .switch__switch_k3m9x {
152
+ .switch__disabled_thrxl .switch__switch_thrxl {
153
153
  background-color: var(--switch-disabled-bg-color);
154
154
  border-color: var(--switch-disabled-border-color);
155
155
  }
156
- .switch__disabled_k3m9x .switch__label_k3m9x {
156
+ .switch__disabled_thrxl .switch__label_thrxl {
157
157
  color: var(--switch-disabled-color);
158
158
  }
159
- .switch__disabled_k3m9x .switch__hint_k3m9x {
159
+ .switch__disabled_thrxl .switch__hint_thrxl {
160
160
  color: var(--switch-disabled-color);
161
161
  }
162
162
  /* Inactive */
163
- .switch__inactive_k3m9x {
163
+ .switch__inactive_thrxl {
164
164
  cursor: var(--disabled-cursor);
165
165
  }
166
- .switch__inactive_k3m9x .switch__switch_k3m9x {
166
+ .switch__inactive_thrxl .switch__switch_thrxl {
167
167
  background-color: var(--switch-disabled-bg-color);
168
168
  border-color: var(--switch-disabled-border-color)
169
169
  }
170
- .switch__inactive_k3m9x .switch__switch_k3m9x:before {
170
+ .switch__inactive_thrxl .switch__switch_thrxl:before {
171
171
  background-color: var(--switch-inactive-color);
172
172
  }
173
173
  /* Focused state */
174
- .switch__focused_k3m9x .switch__switch_k3m9x {
174
+ .switch__focused_thrxl .switch__switch_thrxl {
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.1",
3
+ "version": "2.2.4",
4
4
  "description": "",
5
- "gitHead": "19a2d088b6c18a127940199cfd6e6fc4e8639ec5",
5
+ "gitHead": "b44d81f1c42835fa6946c4bf15aee99abe2b4b96",
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
  }