@alfalab/core-components-switch 3.1.0 → 3.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/Component.js +1 -1
  2. package/cssm/index.module.css +3 -3
  3. package/esm/Component.js +1 -1
  4. package/esm/index.css +29 -29
  5. package/index.css +29 -29
  6. package/modern/Component.js +1 -1
  7. package/modern/index.css +29 -29
  8. package/package.json +1 -1
  9. package/src/index.module.css +2 -2
package/Component.js CHANGED
@@ -14,7 +14,7 @@ var React__default = /*#__PURE__*/_interopDefaultCompat(React);
14
14
  var mergeRefs__default = /*#__PURE__*/_interopDefaultCompat(mergeRefs);
15
15
  var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
16
16
 
17
- var styles = {"component":"switch__component_195dg","start":"switch__start_195dg","center":"switch__center_195dg","addons":"switch__addons_195dg","block":"switch__block_195dg","switch":"switch__switch_195dg","content":"switch__content_195dg","label":"switch__label_195dg","hint":"switch__hint_195dg","reversed":"switch__reversed_195dg","checked":"switch__checked_195dg","disabled":"switch__disabled_195dg","inactive":"switch__inactive_195dg","focused":"switch__focused_195dg"};
17
+ var styles = {"component":"switch__component_xxcqg","start":"switch__start_xxcqg","center":"switch__center_xxcqg","addons":"switch__addons_xxcqg","block":"switch__block_xxcqg","switch":"switch__switch_xxcqg","content":"switch__content_xxcqg","label":"switch__label_xxcqg","hint":"switch__hint_xxcqg","reversed":"switch__reversed_xxcqg","checked":"switch__checked_xxcqg","disabled":"switch__disabled_xxcqg","inactive":"switch__inactive_xxcqg","focused":"switch__focused_xxcqg"};
18
18
  require('./index.css')
19
19
 
20
20
  var Switch = React.forwardRef(function (_a, ref) {
package/cssm/index.module.css CHANGED
@@ -2,7 +2,7 @@
2
2
  } /* deprecated */ :root {
3
3
  --color-light-border-link: #0072ef;
4
4
  --color-light-border-underline: #c5c5c7;
5
- --color-light-graphic-accent: #ef3124;
5
+ --color-light-graphic-positive: #2fc26e;
6
6
  --color-light-graphic-quaternary: #dcdcdd;
7
7
  --color-light-graphic-secondary: #86868a;
8
8
  --color-light-text-primary: #0e0e0e;
@@ -36,8 +36,8 @@
36
36
  --switch-border-color: var(--color-light-graphic-secondary);
37
37
 
38
38
  /* checked */
39
- --switch-checked-bg-color: var(--color-light-graphic-accent);
40
- --switch-checked-border-color: var(--color-light-graphic-accent);
39
+ --switch-checked-bg-color: var(--color-light-graphic-positive);
40
+ --switch-checked-border-color: transparent;
41
41
 
42
42
  /* disabled */
43
43
  --switch-disabled-color: var(--color-light-text-secondary);
package/esm/Component.js CHANGED
@@ -4,7 +4,7 @@ import mergeRefs from 'react-merge-refs';
4
4
  import cn from 'classnames';
5
5
  import { useFocus } from '@alfalab/hooks';
6
6
 
7
- var styles = {"component":"switch__component_195dg","start":"switch__start_195dg","center":"switch__center_195dg","addons":"switch__addons_195dg","block":"switch__block_195dg","switch":"switch__switch_195dg","content":"switch__content_195dg","label":"switch__label_195dg","hint":"switch__hint_195dg","reversed":"switch__reversed_195dg","checked":"switch__checked_195dg","disabled":"switch__disabled_195dg","inactive":"switch__inactive_195dg","focused":"switch__focused_195dg"};
7
+ var styles = {"component":"switch__component_xxcqg","start":"switch__start_xxcqg","center":"switch__center_xxcqg","addons":"switch__addons_xxcqg","block":"switch__block_xxcqg","switch":"switch__switch_xxcqg","content":"switch__content_xxcqg","label":"switch__label_xxcqg","hint":"switch__hint_xxcqg","reversed":"switch__reversed_xxcqg","checked":"switch__checked_xxcqg","disabled":"switch__disabled_xxcqg","inactive":"switch__inactive_xxcqg","focused":"switch__focused_xxcqg"};
8
8
  require('./index.css')
9
9
 
10
10
  var Switch = forwardRef(function (_a, ref) {
package/esm/index.css CHANGED
@@ -1,9 +1,9 @@
1
- /* hash: 1bwak */
1
+ /* hash: 4rfss */
2
2
  :root {
3
3
  } /* deprecated */ :root {
4
4
  --color-light-border-link: #0072ef;
5
5
  --color-light-border-underline: #c5c5c7;
6
- --color-light-graphic-accent: #ef3124;
6
+ --color-light-graphic-positive: #2fc26e;
7
7
  --color-light-graphic-quaternary: #dcdcdd;
8
8
  --color-light-graphic-secondary: #86868a;
9
9
  --color-light-text-primary: #0e0e0e;
@@ -37,8 +37,8 @@
37
37
  --switch-border-color: var(--color-light-graphic-secondary);
38
38
 
39
39
  /* checked */
40
- --switch-checked-bg-color: var(--color-light-graphic-accent);
41
- --switch-checked-border-color: var(--color-light-graphic-accent);
40
+ --switch-checked-bg-color: var(--color-light-graphic-positive);
41
+ --switch-checked-border-color: transparent;
42
42
 
43
43
  /* disabled */
44
44
  --switch-disabled-color: var(--color-light-text-secondary);
@@ -47,7 +47,7 @@
47
47
 
48
48
  /* inactive */
49
49
  --switch-inactive-color: var(--color-light-border-underline);
50
- } .switch__component_195dg {
50
+ } .switch__component_xxcqg {
51
51
  display: inline-flex;
52
52
  align-items: flex-start;
53
53
  margin: 0;
@@ -55,20 +55,20 @@
55
55
  border: 0;
56
56
  cursor: pointer;
57
57
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
58
- } .switch__component_195dg input {
58
+ } .switch__component_xxcqg input {
59
59
  opacity: 0;
60
60
  position: absolute;
61
- } .switch__start_195dg {
61
+ } .switch__start_xxcqg {
62
62
  align-items: flex-start;
63
- } .switch__center_195dg {
63
+ } .switch__center_xxcqg {
64
64
  align-items: center;
65
- } .switch__addons_195dg {
65
+ } .switch__addons_xxcqg {
66
66
  margin-left: auto;
67
67
  padding-left: var(--gap-m);
68
68
  line-height: 24px;
69
- } .switch__block_195dg {
69
+ } .switch__block_xxcqg {
70
70
  width: 100%;
71
- } .switch__switch_195dg {
71
+ } .switch__switch_xxcqg {
72
72
  position: relative;
73
73
  border-radius: var(--border-radius-xl);
74
74
  width: 36px;
@@ -79,7 +79,7 @@
79
79
  border: 2px solid var(--switch-border-color);
80
80
  transition: background-color 0.2s ease, border-color 0.2s ease;
81
81
  box-sizing: border-box;
82
- } .switch__switch_195dg:before {
82
+ } .switch__switch_xxcqg:before {
83
83
  content: '';
84
84
  position: absolute;
85
85
  top: 0;
@@ -91,56 +91,56 @@
91
91
  background-color: var(--color-static-graphic-light);
92
92
  box-sizing: border-box;
93
93
  transition: transform 0.2s ease;
94
- } .switch__content_195dg {
94
+ } .switch__content_xxcqg {
95
95
  margin-left: var(--gap-s);
96
96
  flex-grow: 1;
97
- } .switch__label_195dg {
97
+ } .switch__label_xxcqg {
98
98
  font-size: 16px;
99
99
  line-height: 24px;
100
100
  font-weight: 400;
101
101
  display: block;
102
102
  color: var(--switch-label-color);
103
- } .switch__label_195dg:not(:only-child) {
103
+ } .switch__label_xxcqg:not(:only-child) {
104
104
  margin-bottom: var(--gap-2xs);
105
- } .switch__hint_195dg {
105
+ } .switch__hint_xxcqg {
106
106
  font-size: 14px;
107
107
  line-height: 18px;
108
108
  font-weight: 400;
109
109
  display: block;
110
110
  color: var(--switch-hint-color);
111
- } /* Reversed state */ .switch__component_195dg.switch__reversed_195dg {
111
+ } /* Reversed state */ .switch__component_xxcqg.switch__reversed_xxcqg {
112
112
  flex-direction: row-reverse;
113
- } .switch__reversed_195dg .switch__content_195dg {
113
+ } .switch__reversed_xxcqg .switch__content_xxcqg {
114
114
  margin-right: var(--gap-m);
115
115
  margin-left: 0;
116
- } .switch__reversed_195dg .switch__addons_195dg {
116
+ } .switch__reversed_xxcqg .switch__addons_xxcqg {
117
117
  margin-left: 0;
118
118
  padding-left: 0;
119
119
  margin-right: auto;
120
120
  padding-right: var(--gap-m);
121
- } /* Checked state */ .switch__checked_195dg .switch__switch_195dg {
121
+ } /* Checked state */ .switch__checked_xxcqg .switch__switch_xxcqg {
122
122
  background-color: var(--switch-checked-bg-color);
123
123
  border-color: var(--switch-checked-border-color);
124
- } .switch__checked_195dg .switch__switch_195dg:before {
124
+ } .switch__checked_xxcqg .switch__switch_xxcqg:before {
125
125
  /* ширина компонента(36px + 2*2px) - отступы(2 * 2px) - размер кружка(20px) */
126
126
  transform: translateX(16px);
127
- } /* Disabled state */ .switch__disabled_195dg {
127
+ } /* Disabled state */ .switch__disabled_xxcqg {
128
128
  cursor: var(--disabled-cursor);
129
- } .switch__disabled_195dg .switch__switch_195dg {
129
+ } .switch__disabled_xxcqg .switch__switch_xxcqg {
130
130
  background-color: var(--switch-disabled-bg-color);
131
131
  border-color: var(--switch-disabled-border-color);
132
- } .switch__disabled_195dg .switch__label_195dg {
132
+ } .switch__disabled_xxcqg .switch__label_xxcqg {
133
133
  color: var(--switch-disabled-color);
134
- } .switch__disabled_195dg .switch__hint_195dg {
134
+ } .switch__disabled_xxcqg .switch__hint_xxcqg {
135
135
  color: var(--switch-disabled-color);
136
- } /* Inactive */ .switch__inactive_195dg {
136
+ } /* Inactive */ .switch__inactive_xxcqg {
137
137
  cursor: var(--disabled-cursor);
138
- } .switch__inactive_195dg .switch__switch_195dg {
138
+ } .switch__inactive_xxcqg .switch__switch_xxcqg {
139
139
  background-color: var(--switch-disabled-bg-color);
140
140
  border-color: var(--switch-disabled-border-color)
141
- } .switch__inactive_195dg .switch__switch_195dg:before {
141
+ } .switch__inactive_xxcqg .switch__switch_xxcqg:before {
142
142
  background-color: var(--switch-inactive-color);
143
- } /* Focused state */ .switch__focused_195dg .switch__switch_195dg {
143
+ } /* Focused state */ .switch__focused_xxcqg .switch__switch_xxcqg {
144
144
  outline: 2px solid var(--focus-color);
145
145
  outline-offset: 2px;
146
146
  }
package/index.css CHANGED
@@ -1,9 +1,9 @@
1
- /* hash: 1bwak */
1
+ /* hash: 4rfss */
2
2
  :root {
3
3
  } /* deprecated */ :root {
4
4
  --color-light-border-link: #0072ef;
5
5
  --color-light-border-underline: #c5c5c7;
6
- --color-light-graphic-accent: #ef3124;
6
+ --color-light-graphic-positive: #2fc26e;
7
7
  --color-light-graphic-quaternary: #dcdcdd;
8
8
  --color-light-graphic-secondary: #86868a;
9
9
  --color-light-text-primary: #0e0e0e;
@@ -37,8 +37,8 @@
37
37
  --switch-border-color: var(--color-light-graphic-secondary);
38
38
 
39
39
  /* checked */
40
- --switch-checked-bg-color: var(--color-light-graphic-accent);
41
- --switch-checked-border-color: var(--color-light-graphic-accent);
40
+ --switch-checked-bg-color: var(--color-light-graphic-positive);
41
+ --switch-checked-border-color: transparent;
42
42
 
43
43
  /* disabled */
44
44
  --switch-disabled-color: var(--color-light-text-secondary);
@@ -47,7 +47,7 @@
47
47
 
48
48
  /* inactive */
49
49
  --switch-inactive-color: var(--color-light-border-underline);
50
- } .switch__component_195dg {
50
+ } .switch__component_xxcqg {
51
51
  display: inline-flex;
52
52
  align-items: flex-start;
53
53
  margin: 0;
@@ -55,20 +55,20 @@
55
55
  border: 0;
56
56
  cursor: pointer;
57
57
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
58
- } .switch__component_195dg input {
58
+ } .switch__component_xxcqg input {
59
59
  opacity: 0;
60
60
  position: absolute;
61
- } .switch__start_195dg {
61
+ } .switch__start_xxcqg {
62
62
  align-items: flex-start;
63
- } .switch__center_195dg {
63
+ } .switch__center_xxcqg {
64
64
  align-items: center;
65
- } .switch__addons_195dg {
65
+ } .switch__addons_xxcqg {
66
66
  margin-left: auto;
67
67
  padding-left: var(--gap-m);
68
68
  line-height: 24px;
69
- } .switch__block_195dg {
69
+ } .switch__block_xxcqg {
70
70
  width: 100%;
71
- } .switch__switch_195dg {
71
+ } .switch__switch_xxcqg {
72
72
  position: relative;
73
73
  border-radius: var(--border-radius-xl);
74
74
  width: 36px;
@@ -79,7 +79,7 @@
79
79
  border: 2px solid var(--switch-border-color);
80
80
  transition: background-color 0.2s ease, border-color 0.2s ease;
81
81
  box-sizing: border-box;
82
- } .switch__switch_195dg:before {
82
+ } .switch__switch_xxcqg:before {
83
83
  content: '';
84
84
  position: absolute;
85
85
  top: 0;
@@ -91,56 +91,56 @@
91
91
  background-color: var(--color-static-graphic-light);
92
92
  box-sizing: border-box;
93
93
  transition: transform 0.2s ease;
94
- } .switch__content_195dg {
94
+ } .switch__content_xxcqg {
95
95
  margin-left: var(--gap-s);
96
96
  flex-grow: 1;
97
- } .switch__label_195dg {
97
+ } .switch__label_xxcqg {
98
98
  font-size: 16px;
99
99
  line-height: 24px;
100
100
  font-weight: 400;
101
101
  display: block;
102
102
  color: var(--switch-label-color);
103
- } .switch__label_195dg:not(:only-child) {
103
+ } .switch__label_xxcqg:not(:only-child) {
104
104
  margin-bottom: var(--gap-2xs);
105
- } .switch__hint_195dg {
105
+ } .switch__hint_xxcqg {
106
106
  font-size: 14px;
107
107
  line-height: 18px;
108
108
  font-weight: 400;
109
109
  display: block;
110
110
  color: var(--switch-hint-color);
111
- } /* Reversed state */ .switch__component_195dg.switch__reversed_195dg {
111
+ } /* Reversed state */ .switch__component_xxcqg.switch__reversed_xxcqg {
112
112
  flex-direction: row-reverse;
113
- } .switch__reversed_195dg .switch__content_195dg {
113
+ } .switch__reversed_xxcqg .switch__content_xxcqg {
114
114
  margin-right: var(--gap-m);
115
115
  margin-left: 0;
116
- } .switch__reversed_195dg .switch__addons_195dg {
116
+ } .switch__reversed_xxcqg .switch__addons_xxcqg {
117
117
  margin-left: 0;
118
118
  padding-left: 0;
119
119
  margin-right: auto;
120
120
  padding-right: var(--gap-m);
121
- } /* Checked state */ .switch__checked_195dg .switch__switch_195dg {
121
+ } /* Checked state */ .switch__checked_xxcqg .switch__switch_xxcqg {
122
122
  background-color: var(--switch-checked-bg-color);
123
123
  border-color: var(--switch-checked-border-color);
124
- } .switch__checked_195dg .switch__switch_195dg:before {
124
+ } .switch__checked_xxcqg .switch__switch_xxcqg:before {
125
125
  /* ширина компонента(36px + 2*2px) - отступы(2 * 2px) - размер кружка(20px) */
126
126
  transform: translateX(16px);
127
- } /* Disabled state */ .switch__disabled_195dg {
127
+ } /* Disabled state */ .switch__disabled_xxcqg {
128
128
  cursor: var(--disabled-cursor);
129
- } .switch__disabled_195dg .switch__switch_195dg {
129
+ } .switch__disabled_xxcqg .switch__switch_xxcqg {
130
130
  background-color: var(--switch-disabled-bg-color);
131
131
  border-color: var(--switch-disabled-border-color);
132
- } .switch__disabled_195dg .switch__label_195dg {
132
+ } .switch__disabled_xxcqg .switch__label_xxcqg {
133
133
  color: var(--switch-disabled-color);
134
- } .switch__disabled_195dg .switch__hint_195dg {
134
+ } .switch__disabled_xxcqg .switch__hint_xxcqg {
135
135
  color: var(--switch-disabled-color);
136
- } /* Inactive */ .switch__inactive_195dg {
136
+ } /* Inactive */ .switch__inactive_xxcqg {
137
137
  cursor: var(--disabled-cursor);
138
- } .switch__inactive_195dg .switch__switch_195dg {
138
+ } .switch__inactive_xxcqg .switch__switch_xxcqg {
139
139
  background-color: var(--switch-disabled-bg-color);
140
140
  border-color: var(--switch-disabled-border-color)
141
- } .switch__inactive_195dg .switch__switch_195dg:before {
141
+ } .switch__inactive_xxcqg .switch__switch_xxcqg:before {
142
142
  background-color: var(--switch-inactive-color);
143
- } /* Focused state */ .switch__focused_195dg .switch__switch_195dg {
143
+ } /* Focused state */ .switch__focused_xxcqg .switch__switch_xxcqg {
144
144
  outline: 2px solid var(--focus-color);
145
145
  outline-offset: 2px;
146
146
  }
package/modern/Component.js CHANGED
@@ -3,7 +3,7 @@ import mergeRefs from 'react-merge-refs';
3
3
  import cn from 'classnames';
4
4
  import { useFocus } from '@alfalab/hooks';
5
5
 
6
- const styles = {"component":"switch__component_195dg","start":"switch__start_195dg","center":"switch__center_195dg","addons":"switch__addons_195dg","block":"switch__block_195dg","switch":"switch__switch_195dg","content":"switch__content_195dg","label":"switch__label_195dg","hint":"switch__hint_195dg","reversed":"switch__reversed_195dg","checked":"switch__checked_195dg","disabled":"switch__disabled_195dg","inactive":"switch__inactive_195dg","focused":"switch__focused_195dg"};
6
+ const styles = {"component":"switch__component_xxcqg","start":"switch__start_xxcqg","center":"switch__center_xxcqg","addons":"switch__addons_xxcqg","block":"switch__block_xxcqg","switch":"switch__switch_xxcqg","content":"switch__content_xxcqg","label":"switch__label_xxcqg","hint":"switch__hint_xxcqg","reversed":"switch__reversed_xxcqg","checked":"switch__checked_xxcqg","disabled":"switch__disabled_xxcqg","inactive":"switch__inactive_xxcqg","focused":"switch__focused_xxcqg"};
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/modern/index.css CHANGED
@@ -1,9 +1,9 @@
1
- /* hash: 1bwak */
1
+ /* hash: 4rfss */
2
2
  :root {
3
3
  } /* deprecated */ :root {
4
4
  --color-light-border-link: #0072ef;
5
5
  --color-light-border-underline: #c5c5c7;
6
- --color-light-graphic-accent: #ef3124;
6
+ --color-light-graphic-positive: #2fc26e;
7
7
  --color-light-graphic-quaternary: #dcdcdd;
8
8
  --color-light-graphic-secondary: #86868a;
9
9
  --color-light-text-primary: #0e0e0e;
@@ -37,8 +37,8 @@
37
37
  --switch-border-color: var(--color-light-graphic-secondary);
38
38
 
39
39
  /* checked */
40
- --switch-checked-bg-color: var(--color-light-graphic-accent);
41
- --switch-checked-border-color: var(--color-light-graphic-accent);
40
+ --switch-checked-bg-color: var(--color-light-graphic-positive);
41
+ --switch-checked-border-color: transparent;
42
42
 
43
43
  /* disabled */
44
44
  --switch-disabled-color: var(--color-light-text-secondary);
@@ -47,7 +47,7 @@
47
47
 
48
48
  /* inactive */
49
49
  --switch-inactive-color: var(--color-light-border-underline);
50
- } .switch__component_195dg {
50
+ } .switch__component_xxcqg {
51
51
  display: inline-flex;
52
52
  align-items: flex-start;
53
53
  margin: 0;
@@ -55,20 +55,20 @@
55
55
  border: 0;
56
56
  cursor: pointer;
57
57
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
58
- } .switch__component_195dg input {
58
+ } .switch__component_xxcqg input {
59
59
  opacity: 0;
60
60
  position: absolute;
61
- } .switch__start_195dg {
61
+ } .switch__start_xxcqg {
62
62
  align-items: flex-start;
63
- } .switch__center_195dg {
63
+ } .switch__center_xxcqg {
64
64
  align-items: center;
65
- } .switch__addons_195dg {
65
+ } .switch__addons_xxcqg {
66
66
  margin-left: auto;
67
67
  padding-left: var(--gap-m);
68
68
  line-height: 24px;
69
- } .switch__block_195dg {
69
+ } .switch__block_xxcqg {
70
70
  width: 100%;
71
- } .switch__switch_195dg {
71
+ } .switch__switch_xxcqg {
72
72
  position: relative;
73
73
  border-radius: var(--border-radius-xl);
74
74
  width: 36px;
@@ -79,7 +79,7 @@
79
79
  border: 2px solid var(--switch-border-color);
80
80
  transition: background-color 0.2s ease, border-color 0.2s ease;
81
81
  box-sizing: border-box;
82
- } .switch__switch_195dg:before {
82
+ } .switch__switch_xxcqg:before {
83
83
  content: '';
84
84
  position: absolute;
85
85
  top: 0;
@@ -91,56 +91,56 @@
91
91
  background-color: var(--color-static-graphic-light);
92
92
  box-sizing: border-box;
93
93
  transition: transform 0.2s ease;
94
- } .switch__content_195dg {
94
+ } .switch__content_xxcqg {
95
95
  margin-left: var(--gap-s);
96
96
  flex-grow: 1;
97
- } .switch__label_195dg {
97
+ } .switch__label_xxcqg {
98
98
  font-size: 16px;
99
99
  line-height: 24px;
100
100
  font-weight: 400;
101
101
  display: block;
102
102
  color: var(--switch-label-color);
103
- } .switch__label_195dg:not(:only-child) {
103
+ } .switch__label_xxcqg:not(:only-child) {
104
104
  margin-bottom: var(--gap-2xs);
105
- } .switch__hint_195dg {
105
+ } .switch__hint_xxcqg {
106
106
  font-size: 14px;
107
107
  line-height: 18px;
108
108
  font-weight: 400;
109
109
  display: block;
110
110
  color: var(--switch-hint-color);
111
- } /* Reversed state */ .switch__component_195dg.switch__reversed_195dg {
111
+ } /* Reversed state */ .switch__component_xxcqg.switch__reversed_xxcqg {
112
112
  flex-direction: row-reverse;
113
- } .switch__reversed_195dg .switch__content_195dg {
113
+ } .switch__reversed_xxcqg .switch__content_xxcqg {
114
114
  margin-right: var(--gap-m);
115
115
  margin-left: 0;
116
- } .switch__reversed_195dg .switch__addons_195dg {
116
+ } .switch__reversed_xxcqg .switch__addons_xxcqg {
117
117
  margin-left: 0;
118
118
  padding-left: 0;
119
119
  margin-right: auto;
120
120
  padding-right: var(--gap-m);
121
- } /* Checked state */ .switch__checked_195dg .switch__switch_195dg {
121
+ } /* Checked state */ .switch__checked_xxcqg .switch__switch_xxcqg {
122
122
  background-color: var(--switch-checked-bg-color);
123
123
  border-color: var(--switch-checked-border-color);
124
- } .switch__checked_195dg .switch__switch_195dg:before {
124
+ } .switch__checked_xxcqg .switch__switch_xxcqg:before {
125
125
  /* ширина компонента(36px + 2*2px) - отступы(2 * 2px) - размер кружка(20px) */
126
126
  transform: translateX(16px);
127
- } /* Disabled state */ .switch__disabled_195dg {
127
+ } /* Disabled state */ .switch__disabled_xxcqg {
128
128
  cursor: var(--disabled-cursor);
129
- } .switch__disabled_195dg .switch__switch_195dg {
129
+ } .switch__disabled_xxcqg .switch__switch_xxcqg {
130
130
  background-color: var(--switch-disabled-bg-color);
131
131
  border-color: var(--switch-disabled-border-color);
132
- } .switch__disabled_195dg .switch__label_195dg {
132
+ } .switch__disabled_xxcqg .switch__label_xxcqg {
133
133
  color: var(--switch-disabled-color);
134
- } .switch__disabled_195dg .switch__hint_195dg {
134
+ } .switch__disabled_xxcqg .switch__hint_xxcqg {
135
135
  color: var(--switch-disabled-color);
136
- } /* Inactive */ .switch__inactive_195dg {
136
+ } /* Inactive */ .switch__inactive_xxcqg {
137
137
  cursor: var(--disabled-cursor);
138
- } .switch__inactive_195dg .switch__switch_195dg {
138
+ } .switch__inactive_xxcqg .switch__switch_xxcqg {
139
139
  background-color: var(--switch-disabled-bg-color);
140
140
  border-color: var(--switch-disabled-border-color)
141
- } .switch__inactive_195dg .switch__switch_195dg:before {
141
+ } .switch__inactive_xxcqg .switch__switch_xxcqg:before {
142
142
  background-color: var(--switch-inactive-color);
143
- } /* Focused state */ .switch__focused_195dg .switch__switch_195dg {
143
+ } /* Focused state */ .switch__focused_xxcqg .switch__switch_xxcqg {
144
144
  outline: 2px solid var(--focus-color);
145
145
  outline-offset: 2px;
146
146
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@alfalab/core-components-switch",
3
- "version": "3.1.0",
3
+ "version": "3.2.0",
4
4
  "description": "",
5
5
  "gitHead": "f054fef20200664c65e2501ef1f916c555cdf05d",
6
6
  "keywords": [],
package/src/index.module.css CHANGED
@@ -7,8 +7,8 @@
7
7
  --switch-border-color: var(--color-light-graphic-secondary);
8
8
 
9
9
  /* checked */
10
- --switch-checked-bg-color: var(--color-light-graphic-accent);
11
- --switch-checked-border-color: var(--color-light-graphic-accent);
10
+ --switch-checked-bg-color: var(--color-light-graphic-positive);
11
+ --switch-checked-border-color: transparent;
12
12
 
13
13
  /* disabled */
14
14
  --switch-disabled-color: var(--color-light-text-secondary);