@alfalab/core-components-switch 4.2.4 → 4.2.6

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 +20 -12
  3. package/esm/Component.js +1 -1
  4. package/esm/index.css +48 -40
  5. package/index.css +48 -40
  6. package/modern/Component.js +1 -1
  7. package/modern/index.css +48 -40
  8. package/package.json +5 -3
  9. package/src/index.module.css +6 -6
package/Component.js CHANGED
@@ -15,7 +15,7 @@ var React__default = /*#__PURE__*/_interopDefaultCompat(React);
15
15
  var mergeRefs__default = /*#__PURE__*/_interopDefaultCompat(mergeRefs);
16
16
  var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
17
17
 
18
- var styles = {"component":"switch__component_1gmyw","start":"switch__start_1gmyw","center":"switch__center_1gmyw","addons":"switch__addons_1gmyw","block":"switch__block_1gmyw","switch":"switch__switch_1gmyw","content":"switch__content_1gmyw","label":"switch__label_1gmyw","errorMessage":"switch__errorMessage_1gmyw","hint":"switch__hint_1gmyw","reversed":"switch__reversed_1gmyw","checked":"switch__checked_1gmyw","disabled":"switch__disabled_1gmyw","focused":"switch__focused_1gmyw"};
18
+ var styles = {"component":"switch__component_180is","start":"switch__start_180is","center":"switch__center_180is","addons":"switch__addons_180is","block":"switch__block_180is","switch":"switch__switch_180is","content":"switch__content_180is","label":"switch__label_180is","errorMessage":"switch__errorMessage_180is","hint":"switch__hint_180is","reversed":"switch__reversed_180is","checked":"switch__checked_180is","disabled":"switch__disabled_180is","focused":"switch__focused_180is"};
19
19
  require('./index.css')
20
20
 
21
21
  var Switch = React.forwardRef(function (_a, ref) {
package/cssm/index.module.css CHANGED
@@ -20,14 +20,22 @@
20
20
  /* Up */
21
21
 
22
22
  /* Hard up */
23
- } :root {
24
- --border-radius-xl: 16px;
23
+ } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
24
+ --border-radius-xl: 16px; /* deprecated */ /* deprecated */ /* deprecated */
25
25
  --border-radius-circle: 50%;
26
+
27
+ /* новые значения, используйте их */
26
28
  } :root {
27
- --gap-3xs: 2px;
28
- --gap-2xs: 4px;
29
- --gap-s: 12px;
30
- --gap-m: 16px;
29
+ --gap-3xs: 2px; /* deprecated */
30
+ --gap-2xs: 4px; /* deprecated */ /* deprecated */
31
+ --gap-s: 12px; /* deprecated */ /* deprecated */
32
+ --gap-m: 16px; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
33
+
34
+ /* новые значения, используйте их */
35
+ --gap-2: var(--gap-3xs);
36
+ --gap-4: var(--gap-2xs);
37
+ --gap-12: var(--gap-s);
38
+ --gap-16: var(--gap-m);
31
39
  } :root {
32
40
  } :root {
33
41
  --focus-color: var(--color-light-status-info);
@@ -73,7 +81,7 @@
73
81
  align-items: center;
74
82
  } .addons {
75
83
  margin-left: auto;
76
- padding-left: var(--gap-m);
84
+ padding-left: var(--gap-16);
77
85
  line-height: 24px;
78
86
  } .block {
79
87
  width: 100%;
@@ -82,7 +90,7 @@
82
90
  border-radius: var(--border-radius-xl);
83
91
  width: 36px;
84
92
  height: 20px;
85
- margin: var(--gap-3xs);
93
+ margin: var(--gap-2);
86
94
  flex-shrink: 0;
87
95
  background-color: var(--switch-bg-color);
88
96
  border: 2px solid var(--switch-border-color);
@@ -103,7 +111,7 @@
103
111
  box-sizing: border-box;
104
112
  transition: transform 0.2s ease;
105
113
  } .content {
106
- margin-left: var(--gap-s);
114
+ margin-left: var(--gap-12);
107
115
  flex-grow: 1;
108
116
  } .label {
109
117
  font-size: 16px;
@@ -112,7 +120,7 @@
112
120
  display: block;
113
121
  color: var(--switch-label-color);
114
122
  } .label:not(:only-child) {
115
- margin-bottom: var(--gap-2xs);
123
+ margin-bottom: var(--gap-4);
116
124
  } .errorMessage {
117
125
  font-size: 14px;
118
126
  line-height: 18px;
@@ -127,13 +135,13 @@
127
135
  } /* Reversed state */ .component.reversed {
128
136
  flex-direction: row-reverse;
129
137
  } .reversed .content {
130
- margin-right: var(--gap-m);
138
+ margin-right: var(--gap-16);
131
139
  margin-left: 0;
132
140
  } .reversed .addons {
133
141
  margin-left: 0;
134
142
  padding-left: 0;
135
143
  margin-right: auto;
136
- padding-right: var(--gap-m);
144
+ padding-right: var(--gap-16);
137
145
  } /* Checked state */ .checked .switch {
138
146
  background-color: var(--switch-checked-bg-color)
139
147
  } .checked .switch:hover {
package/esm/Component.js CHANGED
@@ -5,7 +5,7 @@ import cn from 'classnames';
5
5
  import { dom } from '@alfalab/core-components-shared/esm';
6
6
  import { useFocus } from '@alfalab/hooks';
7
7
 
8
- var styles = {"component":"switch__component_1gmyw","start":"switch__start_1gmyw","center":"switch__center_1gmyw","addons":"switch__addons_1gmyw","block":"switch__block_1gmyw","switch":"switch__switch_1gmyw","content":"switch__content_1gmyw","label":"switch__label_1gmyw","errorMessage":"switch__errorMessage_1gmyw","hint":"switch__hint_1gmyw","reversed":"switch__reversed_1gmyw","checked":"switch__checked_1gmyw","disabled":"switch__disabled_1gmyw","focused":"switch__focused_1gmyw"};
8
+ var styles = {"component":"switch__component_180is","start":"switch__start_180is","center":"switch__center_180is","addons":"switch__addons_180is","block":"switch__block_180is","switch":"switch__switch_180is","content":"switch__content_180is","label":"switch__label_180is","errorMessage":"switch__errorMessage_180is","hint":"switch__hint_180is","reversed":"switch__reversed_180is","checked":"switch__checked_180is","disabled":"switch__disabled_180is","focused":"switch__focused_180is"};
9
9
  require('./index.css')
10
10
 
11
11
  var Switch = forwardRef(function (_a, ref) {
package/esm/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: 42vxs */
1
+ /* hash: 1dewz */
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
4
  --color-light-neutral-translucent-200: rgba(30, 43, 68, 0.08);
@@ -21,14 +21,22 @@
21
21
  /* Up */
22
22
 
23
23
  /* Hard up */
24
- } :root {
25
- --border-radius-xl: 16px;
24
+ } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
25
+ --border-radius-xl: 16px; /* deprecated */ /* deprecated */ /* deprecated */
26
26
  --border-radius-circle: 50%;
27
+
28
+ /* новые значения, используйте их */
27
29
  } :root {
28
- --gap-3xs: 2px;
29
- --gap-2xs: 4px;
30
- --gap-s: 12px;
31
- --gap-m: 16px;
30
+ --gap-3xs: 2px; /* deprecated */
31
+ --gap-2xs: 4px; /* deprecated */ /* deprecated */
32
+ --gap-s: 12px; /* deprecated */ /* deprecated */
33
+ --gap-m: 16px; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
34
+
35
+ /* новые значения, используйте их */
36
+ --gap-2: var(--gap-3xs);
37
+ --gap-4: var(--gap-2xs);
38
+ --gap-12: var(--gap-s);
39
+ --gap-16: var(--gap-m);
32
40
  } :root {
33
41
  } :root {
34
42
  --focus-color: var(--color-light-status-info);
@@ -57,7 +65,7 @@
57
65
  /* icon */
58
66
  --switch-icon-color: var(--color-static-neutral-0);
59
67
  --switch-icon-disabled-color: var(--color-light-neutral-translucent-500);
60
- } .switch__component_1gmyw {
68
+ } .switch__component_180is {
61
69
  display: inline-flex;
62
70
  align-items: flex-start;
63
71
  margin: 0;
@@ -65,33 +73,33 @@
65
73
  border: 0;
66
74
  cursor: pointer;
67
75
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
68
- } .switch__component_1gmyw input {
76
+ } .switch__component_180is input {
69
77
  opacity: 0;
70
78
  position: absolute;
71
- } .switch__start_1gmyw {
79
+ } .switch__start_180is {
72
80
  align-items: flex-start;
73
- } .switch__center_1gmyw {
81
+ } .switch__center_180is {
74
82
  align-items: center;
75
- } .switch__addons_1gmyw {
83
+ } .switch__addons_180is {
76
84
  margin-left: auto;
77
- padding-left: var(--gap-m);
85
+ padding-left: var(--gap-16);
78
86
  line-height: 24px;
79
- } .switch__block_1gmyw {
87
+ } .switch__block_180is {
80
88
  width: 100%;
81
- } .switch__switch_1gmyw {
89
+ } .switch__switch_180is {
82
90
  position: relative;
83
91
  border-radius: var(--border-radius-xl);
84
92
  width: 36px;
85
93
  height: 20px;
86
- margin: var(--gap-3xs);
94
+ margin: var(--gap-2);
87
95
  flex-shrink: 0;
88
96
  background-color: var(--switch-bg-color);
89
97
  border: 2px solid var(--switch-border-color);
90
98
  transition: background-color 0.2s ease, border-color 0.2s ease;
91
99
  box-sizing: border-box
92
- } .switch__switch_1gmyw:hover {
100
+ } .switch__switch_180is:hover {
93
101
  background-color: var(--switch-hover-bg-color);
94
- } .switch__switch_1gmyw:before {
102
+ } .switch__switch_180is:before {
95
103
  content: '';
96
104
  position: absolute;
97
105
  top: 0;
@@ -103,58 +111,58 @@
103
111
  background-color: var(--switch-icon-color);
104
112
  box-sizing: border-box;
105
113
  transition: transform 0.2s ease;
106
- } .switch__content_1gmyw {
107
- margin-left: var(--gap-s);
114
+ } .switch__content_180is {
115
+ margin-left: var(--gap-12);
108
116
  flex-grow: 1;
109
- } .switch__label_1gmyw {
117
+ } .switch__label_180is {
110
118
  font-size: 16px;
111
119
  line-height: 24px;
112
120
  font-weight: 400;
113
121
  display: block;
114
122
  color: var(--switch-label-color);
115
- } .switch__label_1gmyw:not(:only-child) {
116
- margin-bottom: var(--gap-2xs);
117
- } .switch__errorMessage_1gmyw {
123
+ } .switch__label_180is:not(:only-child) {
124
+ margin-bottom: var(--gap-4);
125
+ } .switch__errorMessage_180is {
118
126
  font-size: 14px;
119
127
  line-height: 18px;
120
128
  font-weight: 400;
121
129
  color: var(--switch-error-color);
122
- } .switch__hint_1gmyw {
130
+ } .switch__hint_180is {
123
131
  font-size: 14px;
124
132
  line-height: 18px;
125
133
  font-weight: 400;
126
134
  display: block;
127
135
  color: var(--switch-hint-color);
128
- } /* Reversed state */ .switch__component_1gmyw.switch__reversed_1gmyw {
136
+ } /* Reversed state */ .switch__component_180is.switch__reversed_180is {
129
137
  flex-direction: row-reverse;
130
- } .switch__reversed_1gmyw .switch__content_1gmyw {
131
- margin-right: var(--gap-m);
138
+ } .switch__reversed_180is .switch__content_180is {
139
+ margin-right: var(--gap-16);
132
140
  margin-left: 0;
133
- } .switch__reversed_1gmyw .switch__addons_1gmyw {
141
+ } .switch__reversed_180is .switch__addons_180is {
134
142
  margin-left: 0;
135
143
  padding-left: 0;
136
144
  margin-right: auto;
137
- padding-right: var(--gap-m);
138
- } /* Checked state */ .switch__checked_1gmyw .switch__switch_1gmyw {
145
+ padding-right: var(--gap-16);
146
+ } /* Checked state */ .switch__checked_180is .switch__switch_180is {
139
147
  background-color: var(--switch-checked-bg-color)
140
- } .switch__checked_1gmyw .switch__switch_1gmyw:hover {
148
+ } .switch__checked_180is .switch__switch_180is:hover {
141
149
  background-color: var(--switch-checked-hover-bg-color);
142
- } .switch__checked_1gmyw .switch__switch_1gmyw:before {
150
+ } .switch__checked_180is .switch__switch_180is:before {
143
151
  /* ширина компонента(36px + 2*2px) - отступы(2 * 2px) - размер кружка(20px) */
144
152
  transform: translateX(16px);
145
- } /* Disabled state */ .switch__disabled_1gmyw {
153
+ } /* Disabled state */ .switch__disabled_180is {
146
154
  cursor: var(--disabled-cursor);
147
- } .switch__disabled_1gmyw .switch__switch_1gmyw {
155
+ } .switch__disabled_180is .switch__switch_180is {
148
156
  background-color: var(--switch-disabled-bg-color)
149
- } .switch__disabled_1gmyw .switch__switch_1gmyw:before {
157
+ } .switch__disabled_180is .switch__switch_180is:before {
150
158
  background-color: var(--switch-icon-disabled-color);
151
- } .switch__disabled_1gmyw.switch__checked_1gmyw .switch__switch_1gmyw {
159
+ } .switch__disabled_180is.switch__checked_180is .switch__switch_180is {
152
160
  background-color: var(--switch-disabled-checked-bg-color);
153
- } .switch__disabled_1gmyw .switch__label_1gmyw {
161
+ } .switch__disabled_180is .switch__label_180is {
154
162
  color: var(--switch-disabled-color);
155
- } .switch__disabled_1gmyw .switch__hint_1gmyw {
163
+ } .switch__disabled_180is .switch__hint_180is {
156
164
  color: var(--switch-disabled-color);
157
- } /* Focused state */ .switch__focused_1gmyw .switch__switch_1gmyw {
165
+ } /* Focused state */ .switch__focused_180is .switch__switch_180is {
158
166
  outline: 2px solid var(--focus-color);
159
167
  outline-offset: 2px;
160
168
  }
package/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: 42vxs */
1
+ /* hash: 1dewz */
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
4
  --color-light-neutral-translucent-200: rgba(30, 43, 68, 0.08);
@@ -21,14 +21,22 @@
21
21
  /* Up */
22
22
 
23
23
  /* Hard up */
24
- } :root {
25
- --border-radius-xl: 16px;
24
+ } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
25
+ --border-radius-xl: 16px; /* deprecated */ /* deprecated */ /* deprecated */
26
26
  --border-radius-circle: 50%;
27
+
28
+ /* новые значения, используйте их */
27
29
  } :root {
28
- --gap-3xs: 2px;
29
- --gap-2xs: 4px;
30
- --gap-s: 12px;
31
- --gap-m: 16px;
30
+ --gap-3xs: 2px; /* deprecated */
31
+ --gap-2xs: 4px; /* deprecated */ /* deprecated */
32
+ --gap-s: 12px; /* deprecated */ /* deprecated */
33
+ --gap-m: 16px; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
34
+
35
+ /* новые значения, используйте их */
36
+ --gap-2: var(--gap-3xs);
37
+ --gap-4: var(--gap-2xs);
38
+ --gap-12: var(--gap-s);
39
+ --gap-16: var(--gap-m);
32
40
  } :root {
33
41
  } :root {
34
42
  --focus-color: var(--color-light-status-info);
@@ -57,7 +65,7 @@
57
65
  /* icon */
58
66
  --switch-icon-color: var(--color-static-neutral-0);
59
67
  --switch-icon-disabled-color: var(--color-light-neutral-translucent-500);
60
- } .switch__component_1gmyw {
68
+ } .switch__component_180is {
61
69
  display: inline-flex;
62
70
  align-items: flex-start;
63
71
  margin: 0;
@@ -65,33 +73,33 @@
65
73
  border: 0;
66
74
  cursor: pointer;
67
75
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
68
- } .switch__component_1gmyw input {
76
+ } .switch__component_180is input {
69
77
  opacity: 0;
70
78
  position: absolute;
71
- } .switch__start_1gmyw {
79
+ } .switch__start_180is {
72
80
  align-items: flex-start;
73
- } .switch__center_1gmyw {
81
+ } .switch__center_180is {
74
82
  align-items: center;
75
- } .switch__addons_1gmyw {
83
+ } .switch__addons_180is {
76
84
  margin-left: auto;
77
- padding-left: var(--gap-m);
85
+ padding-left: var(--gap-16);
78
86
  line-height: 24px;
79
- } .switch__block_1gmyw {
87
+ } .switch__block_180is {
80
88
  width: 100%;
81
- } .switch__switch_1gmyw {
89
+ } .switch__switch_180is {
82
90
  position: relative;
83
91
  border-radius: var(--border-radius-xl);
84
92
  width: 36px;
85
93
  height: 20px;
86
- margin: var(--gap-3xs);
94
+ margin: var(--gap-2);
87
95
  flex-shrink: 0;
88
96
  background-color: var(--switch-bg-color);
89
97
  border: 2px solid var(--switch-border-color);
90
98
  transition: background-color 0.2s ease, border-color 0.2s ease;
91
99
  box-sizing: border-box
92
- } .switch__switch_1gmyw:hover {
100
+ } .switch__switch_180is:hover {
93
101
  background-color: var(--switch-hover-bg-color);
94
- } .switch__switch_1gmyw:before {
102
+ } .switch__switch_180is:before {
95
103
  content: '';
96
104
  position: absolute;
97
105
  top: 0;
@@ -103,58 +111,58 @@
103
111
  background-color: var(--switch-icon-color);
104
112
  box-sizing: border-box;
105
113
  transition: transform 0.2s ease;
106
- } .switch__content_1gmyw {
107
- margin-left: var(--gap-s);
114
+ } .switch__content_180is {
115
+ margin-left: var(--gap-12);
108
116
  flex-grow: 1;
109
- } .switch__label_1gmyw {
117
+ } .switch__label_180is {
110
118
  font-size: 16px;
111
119
  line-height: 24px;
112
120
  font-weight: 400;
113
121
  display: block;
114
122
  color: var(--switch-label-color);
115
- } .switch__label_1gmyw:not(:only-child) {
116
- margin-bottom: var(--gap-2xs);
117
- } .switch__errorMessage_1gmyw {
123
+ } .switch__label_180is:not(:only-child) {
124
+ margin-bottom: var(--gap-4);
125
+ } .switch__errorMessage_180is {
118
126
  font-size: 14px;
119
127
  line-height: 18px;
120
128
  font-weight: 400;
121
129
  color: var(--switch-error-color);
122
- } .switch__hint_1gmyw {
130
+ } .switch__hint_180is {
123
131
  font-size: 14px;
124
132
  line-height: 18px;
125
133
  font-weight: 400;
126
134
  display: block;
127
135
  color: var(--switch-hint-color);
128
- } /* Reversed state */ .switch__component_1gmyw.switch__reversed_1gmyw {
136
+ } /* Reversed state */ .switch__component_180is.switch__reversed_180is {
129
137
  flex-direction: row-reverse;
130
- } .switch__reversed_1gmyw .switch__content_1gmyw {
131
- margin-right: var(--gap-m);
138
+ } .switch__reversed_180is .switch__content_180is {
139
+ margin-right: var(--gap-16);
132
140
  margin-left: 0;
133
- } .switch__reversed_1gmyw .switch__addons_1gmyw {
141
+ } .switch__reversed_180is .switch__addons_180is {
134
142
  margin-left: 0;
135
143
  padding-left: 0;
136
144
  margin-right: auto;
137
- padding-right: var(--gap-m);
138
- } /* Checked state */ .switch__checked_1gmyw .switch__switch_1gmyw {
145
+ padding-right: var(--gap-16);
146
+ } /* Checked state */ .switch__checked_180is .switch__switch_180is {
139
147
  background-color: var(--switch-checked-bg-color)
140
- } .switch__checked_1gmyw .switch__switch_1gmyw:hover {
148
+ } .switch__checked_180is .switch__switch_180is:hover {
141
149
  background-color: var(--switch-checked-hover-bg-color);
142
- } .switch__checked_1gmyw .switch__switch_1gmyw:before {
150
+ } .switch__checked_180is .switch__switch_180is:before {
143
151
  /* ширина компонента(36px + 2*2px) - отступы(2 * 2px) - размер кружка(20px) */
144
152
  transform: translateX(16px);
145
- } /* Disabled state */ .switch__disabled_1gmyw {
153
+ } /* Disabled state */ .switch__disabled_180is {
146
154
  cursor: var(--disabled-cursor);
147
- } .switch__disabled_1gmyw .switch__switch_1gmyw {
155
+ } .switch__disabled_180is .switch__switch_180is {
148
156
  background-color: var(--switch-disabled-bg-color)
149
- } .switch__disabled_1gmyw .switch__switch_1gmyw:before {
157
+ } .switch__disabled_180is .switch__switch_180is:before {
150
158
  background-color: var(--switch-icon-disabled-color);
151
- } .switch__disabled_1gmyw.switch__checked_1gmyw .switch__switch_1gmyw {
159
+ } .switch__disabled_180is.switch__checked_180is .switch__switch_180is {
152
160
  background-color: var(--switch-disabled-checked-bg-color);
153
- } .switch__disabled_1gmyw .switch__label_1gmyw {
161
+ } .switch__disabled_180is .switch__label_180is {
154
162
  color: var(--switch-disabled-color);
155
- } .switch__disabled_1gmyw .switch__hint_1gmyw {
163
+ } .switch__disabled_180is .switch__hint_180is {
156
164
  color: var(--switch-disabled-color);
157
- } /* Focused state */ .switch__focused_1gmyw .switch__switch_1gmyw {
165
+ } /* Focused state */ .switch__focused_180is .switch__switch_180is {
158
166
  outline: 2px solid var(--focus-color);
159
167
  outline-offset: 2px;
160
168
  }
package/modern/Component.js CHANGED
@@ -4,7 +4,7 @@ import cn from 'classnames';
4
4
  import { dom } from '@alfalab/core-components-shared/modern';
5
5
  import { useFocus } from '@alfalab/hooks';
6
6
 
7
- const styles = {"component":"switch__component_1gmyw","start":"switch__start_1gmyw","center":"switch__center_1gmyw","addons":"switch__addons_1gmyw","block":"switch__block_1gmyw","switch":"switch__switch_1gmyw","content":"switch__content_1gmyw","label":"switch__label_1gmyw","errorMessage":"switch__errorMessage_1gmyw","hint":"switch__hint_1gmyw","reversed":"switch__reversed_1gmyw","checked":"switch__checked_1gmyw","disabled":"switch__disabled_1gmyw","focused":"switch__focused_1gmyw"};
7
+ const styles = {"component":"switch__component_180is","start":"switch__start_180is","center":"switch__center_180is","addons":"switch__addons_180is","block":"switch__block_180is","switch":"switch__switch_180is","content":"switch__content_180is","label":"switch__label_180is","errorMessage":"switch__errorMessage_180is","hint":"switch__hint_180is","reversed":"switch__reversed_180is","checked":"switch__checked_180is","disabled":"switch__disabled_180is","focused":"switch__focused_180is"};
8
8
  require('./index.css')
9
9
 
10
10
  const Switch = forwardRef(({ reversed = false, checked = false, align = 'start', addons, block, disabled, inactive, error, label, hint, name, value, className, onChange, dataTestId, ...restProps }, ref) => {
package/modern/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: 42vxs */
1
+ /* hash: 1dewz */
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
4
  --color-light-neutral-translucent-200: rgba(30, 43, 68, 0.08);
@@ -21,14 +21,22 @@
21
21
  /* Up */
22
22
 
23
23
  /* Hard up */
24
- } :root {
25
- --border-radius-xl: 16px;
24
+ } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
25
+ --border-radius-xl: 16px; /* deprecated */ /* deprecated */ /* deprecated */
26
26
  --border-radius-circle: 50%;
27
+
28
+ /* новые значения, используйте их */
27
29
  } :root {
28
- --gap-3xs: 2px;
29
- --gap-2xs: 4px;
30
- --gap-s: 12px;
31
- --gap-m: 16px;
30
+ --gap-3xs: 2px; /* deprecated */
31
+ --gap-2xs: 4px; /* deprecated */ /* deprecated */
32
+ --gap-s: 12px; /* deprecated */ /* deprecated */
33
+ --gap-m: 16px; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
34
+
35
+ /* новые значения, используйте их */
36
+ --gap-2: var(--gap-3xs);
37
+ --gap-4: var(--gap-2xs);
38
+ --gap-12: var(--gap-s);
39
+ --gap-16: var(--gap-m);
32
40
  } :root {
33
41
  } :root {
34
42
  --focus-color: var(--color-light-status-info);
@@ -57,7 +65,7 @@
57
65
  /* icon */
58
66
  --switch-icon-color: var(--color-static-neutral-0);
59
67
  --switch-icon-disabled-color: var(--color-light-neutral-translucent-500);
60
- } .switch__component_1gmyw {
68
+ } .switch__component_180is {
61
69
  display: inline-flex;
62
70
  align-items: flex-start;
63
71
  margin: 0;
@@ -65,33 +73,33 @@
65
73
  border: 0;
66
74
  cursor: pointer;
67
75
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
68
- } .switch__component_1gmyw input {
76
+ } .switch__component_180is input {
69
77
  opacity: 0;
70
78
  position: absolute;
71
- } .switch__start_1gmyw {
79
+ } .switch__start_180is {
72
80
  align-items: flex-start;
73
- } .switch__center_1gmyw {
81
+ } .switch__center_180is {
74
82
  align-items: center;
75
- } .switch__addons_1gmyw {
83
+ } .switch__addons_180is {
76
84
  margin-left: auto;
77
- padding-left: var(--gap-m);
85
+ padding-left: var(--gap-16);
78
86
  line-height: 24px;
79
- } .switch__block_1gmyw {
87
+ } .switch__block_180is {
80
88
  width: 100%;
81
- } .switch__switch_1gmyw {
89
+ } .switch__switch_180is {
82
90
  position: relative;
83
91
  border-radius: var(--border-radius-xl);
84
92
  width: 36px;
85
93
  height: 20px;
86
- margin: var(--gap-3xs);
94
+ margin: var(--gap-2);
87
95
  flex-shrink: 0;
88
96
  background-color: var(--switch-bg-color);
89
97
  border: 2px solid var(--switch-border-color);
90
98
  transition: background-color 0.2s ease, border-color 0.2s ease;
91
99
  box-sizing: border-box
92
- } .switch__switch_1gmyw:hover {
100
+ } .switch__switch_180is:hover {
93
101
  background-color: var(--switch-hover-bg-color);
94
- } .switch__switch_1gmyw:before {
102
+ } .switch__switch_180is:before {
95
103
  content: '';
96
104
  position: absolute;
97
105
  top: 0;
@@ -103,58 +111,58 @@
103
111
  background-color: var(--switch-icon-color);
104
112
  box-sizing: border-box;
105
113
  transition: transform 0.2s ease;
106
- } .switch__content_1gmyw {
107
- margin-left: var(--gap-s);
114
+ } .switch__content_180is {
115
+ margin-left: var(--gap-12);
108
116
  flex-grow: 1;
109
- } .switch__label_1gmyw {
117
+ } .switch__label_180is {
110
118
  font-size: 16px;
111
119
  line-height: 24px;
112
120
  font-weight: 400;
113
121
  display: block;
114
122
  color: var(--switch-label-color);
115
- } .switch__label_1gmyw:not(:only-child) {
116
- margin-bottom: var(--gap-2xs);
117
- } .switch__errorMessage_1gmyw {
123
+ } .switch__label_180is:not(:only-child) {
124
+ margin-bottom: var(--gap-4);
125
+ } .switch__errorMessage_180is {
118
126
  font-size: 14px;
119
127
  line-height: 18px;
120
128
  font-weight: 400;
121
129
  color: var(--switch-error-color);
122
- } .switch__hint_1gmyw {
130
+ } .switch__hint_180is {
123
131
  font-size: 14px;
124
132
  line-height: 18px;
125
133
  font-weight: 400;
126
134
  display: block;
127
135
  color: var(--switch-hint-color);
128
- } /* Reversed state */ .switch__component_1gmyw.switch__reversed_1gmyw {
136
+ } /* Reversed state */ .switch__component_180is.switch__reversed_180is {
129
137
  flex-direction: row-reverse;
130
- } .switch__reversed_1gmyw .switch__content_1gmyw {
131
- margin-right: var(--gap-m);
138
+ } .switch__reversed_180is .switch__content_180is {
139
+ margin-right: var(--gap-16);
132
140
  margin-left: 0;
133
- } .switch__reversed_1gmyw .switch__addons_1gmyw {
141
+ } .switch__reversed_180is .switch__addons_180is {
134
142
  margin-left: 0;
135
143
  padding-left: 0;
136
144
  margin-right: auto;
137
- padding-right: var(--gap-m);
138
- } /* Checked state */ .switch__checked_1gmyw .switch__switch_1gmyw {
145
+ padding-right: var(--gap-16);
146
+ } /* Checked state */ .switch__checked_180is .switch__switch_180is {
139
147
  background-color: var(--switch-checked-bg-color)
140
- } .switch__checked_1gmyw .switch__switch_1gmyw:hover {
148
+ } .switch__checked_180is .switch__switch_180is:hover {
141
149
  background-color: var(--switch-checked-hover-bg-color);
142
- } .switch__checked_1gmyw .switch__switch_1gmyw:before {
150
+ } .switch__checked_180is .switch__switch_180is:before {
143
151
  /* ширина компонента(36px + 2*2px) - отступы(2 * 2px) - размер кружка(20px) */
144
152
  transform: translateX(16px);
145
- } /* Disabled state */ .switch__disabled_1gmyw {
153
+ } /* Disabled state */ .switch__disabled_180is {
146
154
  cursor: var(--disabled-cursor);
147
- } .switch__disabled_1gmyw .switch__switch_1gmyw {
155
+ } .switch__disabled_180is .switch__switch_180is {
148
156
  background-color: var(--switch-disabled-bg-color)
149
- } .switch__disabled_1gmyw .switch__switch_1gmyw:before {
157
+ } .switch__disabled_180is .switch__switch_180is:before {
150
158
  background-color: var(--switch-icon-disabled-color);
151
- } .switch__disabled_1gmyw.switch__checked_1gmyw .switch__switch_1gmyw {
159
+ } .switch__disabled_180is.switch__checked_180is .switch__switch_180is {
152
160
  background-color: var(--switch-disabled-checked-bg-color);
153
- } .switch__disabled_1gmyw .switch__label_1gmyw {
161
+ } .switch__disabled_180is .switch__label_180is {
154
162
  color: var(--switch-disabled-color);
155
- } .switch__disabled_1gmyw .switch__hint_1gmyw {
163
+ } .switch__disabled_180is .switch__hint_180is {
156
164
  color: var(--switch-disabled-color);
157
- } /* Focused state */ .switch__focused_1gmyw .switch__switch_1gmyw {
165
+ } /* Focused state */ .switch__focused_180is .switch__switch_180is {
158
166
  outline: 2px solid var(--focus-color);
159
167
  outline-offset: 2px;
160
168
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@alfalab/core-components-switch",
3
- "version": "4.2.4",
3
+ "version": "4.2.6",
4
4
  "description": "",
5
5
  "gitHead": "f054fef20200664c65e2501ef1f916c555cdf05d",
6
6
  "keywords": [],
@@ -16,9 +16,11 @@
16
16
  },
17
17
  "dependencies": {
18
18
  "@alfalab/hooks": "^1.13.0",
19
- "@alfalab/core-components-shared": "^0.11.0",
19
+ "@alfalab/core-components-shared": "^0.12.0",
20
20
  "classnames": "^2.3.1",
21
21
  "react-merge-refs": "^1.1.0",
22
22
  "tslib": "^2.4.0"
23
- }
23
+ },
24
+ "themesVersion": "13.0.2",
25
+ "varsVersion": "9.11.1"
24
26
  }
package/src/index.module.css CHANGED
@@ -51,7 +51,7 @@
51
51
 
52
52
  .addons {
53
53
  margin-left: auto;
54
- padding-left: var(--gap-m);
54
+ padding-left: var(--gap-16);
55
55
  line-height: 24px;
56
56
  }
57
57
 
@@ -64,7 +64,7 @@
64
64
  border-radius: var(--border-radius-xl);
65
65
  width: 36px;
66
66
  height: 20px;
67
- margin: var(--gap-3xs);
67
+ margin: var(--gap-2);
68
68
  flex-shrink: 0;
69
69
  background-color: var(--switch-bg-color);
70
70
  border: 2px solid var(--switch-border-color);
@@ -91,7 +91,7 @@
91
91
  }
92
92
 
93
93
  .content {
94
- margin-left: var(--gap-s);
94
+ margin-left: var(--gap-12);
95
95
  flex-grow: 1;
96
96
  }
97
97
 
@@ -102,7 +102,7 @@
102
102
  }
103
103
 
104
104
  .label:not(:only-child) {
105
- margin-bottom: var(--gap-2xs);
105
+ margin-bottom: var(--gap-4);
106
106
  }
107
107
 
108
108
  .errorMessage {
@@ -123,7 +123,7 @@
123
123
  }
124
124
 
125
125
  .reversed .content {
126
- margin-right: var(--gap-m);
126
+ margin-right: var(--gap-16);
127
127
  margin-left: 0;
128
128
  }
129
129
 
@@ -131,7 +131,7 @@
131
131
  margin-left: 0;
132
132
  padding-left: 0;
133
133
  margin-right: auto;
134
- padding-right: var(--gap-m);
134
+ padding-right: var(--gap-16);
135
135
  }
136
136
 
137
137
  /* Checked state */