@alfalab/core-components-switch 3.2.0 → 4.0.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 (15) hide show
  1. package/Component.d.ts +4 -0
  2. package/Component.js +2 -3
  3. package/cssm/Component.d.ts +4 -0
  4. package/cssm/Component.js +1 -2
  5. package/cssm/index.module.css +38 -31
  6. package/esm/Component.d.ts +4 -0
  7. package/esm/Component.js +2 -3
  8. package/esm/index.css +57 -50
  9. package/index.css +57 -50
  10. package/modern/Component.d.ts +4 -0
  11. package/modern/Component.js +2 -3
  12. package/modern/index.css +57 -50
  13. package/package.json +1 -1
  14. package/src/Component.tsx +3 -2
  15. package/src/index.module.css +31 -26
package/Component.d.ts CHANGED
@@ -36,6 +36,8 @@ type SwitchProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'hint' |
36
36
  */
37
37
  disabled?: boolean;
38
38
  /**
39
+ * @deprecated данный проп больше не используется, временно оставлен для обратной совместимости
40
+ * Используйте props disabled
39
41
  * Управление состоянием активен / неактивен
40
42
  */
41
43
  inactive?: boolean;
@@ -85,6 +87,8 @@ declare const Switch: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttrib
85
87
  */
86
88
  disabled?: boolean | undefined;
87
89
  /**
90
+ * @deprecated данный проп больше не используется, временно оставлен для обратной совместимости
91
+ * Используйте props disabled
88
92
  * Управление состоянием активен / неактивен
89
93
  */
90
94
  inactive?: boolean | undefined;
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_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"};
17
+ var styles = {"component":"switch__component_14iw6","start":"switch__start_14iw6","center":"switch__center_14iw6","addons":"switch__addons_14iw6","block":"switch__block_14iw6","switch":"switch__switch_14iw6","content":"switch__content_14iw6","label":"switch__label_14iw6","hint":"switch__hint_14iw6","reversed":"switch__reversed_14iw6","checked":"switch__checked_14iw6","disabled":"switch__disabled_14iw6","focused":"switch__focused_14iw6"};
18
18
  require('./index.css')
19
19
 
20
20
  var Switch = React.forwardRef(function (_a, ref) {
@@ -30,8 +30,7 @@ var Switch = React.forwardRef(function (_a, ref) {
30
30
  return (
31
31
  // eslint-disable-next-line jsx-a11y/label-has-associated-control
32
32
  React__default.default.createElement("label", { className: cn__default.default(styles.component, styles[align], className, (_b = {},
33
- _b[styles.disabled] = disabled,
34
- _b[styles.inactive] = inactive,
33
+ _b[styles.disabled] = disabled || inactive,
35
34
  _b[styles.checked] = checked,
36
35
  _b[styles.reversed] = reversed,
37
36
  _b[styles.focused] = focused,
package/cssm/Component.d.ts CHANGED
@@ -36,6 +36,8 @@ type SwitchProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'hint' |
36
36
  */
37
37
  disabled?: boolean;
38
38
  /**
39
+ * @deprecated данный проп больше не используется, временно оставлен для обратной совместимости
40
+ * Используйте props disabled
39
41
  * Управление состоянием активен / неактивен
40
42
  */
41
43
  inactive?: boolean;
@@ -85,6 +87,8 @@ declare const Switch: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttrib
85
87
  */
86
88
  disabled?: boolean | undefined;
87
89
  /**
90
+ * @deprecated данный проп больше не используется, временно оставлен для обратной совместимости
91
+ * Используйте props disabled
88
92
  * Управление состоянием активен / неактивен
89
93
  */
90
94
  inactive?: boolean | undefined;
package/cssm/Component.js CHANGED
@@ -29,8 +29,7 @@ var Switch = React.forwardRef(function (_a, ref) {
29
29
  return (
30
30
  // eslint-disable-next-line jsx-a11y/label-has-associated-control
31
31
  React__default.default.createElement("label", { className: cn__default.default(styles__default.default.component, styles__default.default[align], className, (_b = {},
32
- _b[styles__default.default.disabled] = disabled,
33
- _b[styles__default.default.inactive] = inactive,
32
+ _b[styles__default.default.disabled] = disabled || inactive,
34
33
  _b[styles__default.default.checked] = checked,
35
34
  _b[styles__default.default.reversed] = reversed,
36
35
  _b[styles__default.default.focused] = focused,
package/cssm/index.module.css CHANGED
@@ -1,13 +1,15 @@
1
1
  :root {
2
2
  } /* deprecated */ :root {
3
- --color-light-border-link: #0072ef;
4
- --color-light-border-underline: #c5c5c7;
5
- --color-light-graphic-positive: #2fc26e;
6
- --color-light-graphic-quaternary: #dcdcdd;
7
- --color-light-graphic-secondary: #86868a;
3
+ --color-light-border-link: #2288fa;
4
+ --color-light-neutral-translucent-200: rgba(30, 43, 68, 0.08);
5
+ --color-light-neutral-translucent-500: rgba(9, 12, 37, 0.28);
6
+ --color-light-neutral-translucent-700: rgba(4, 4, 21, 0.47);
7
+ --color-light-neutral-translucent-700-hover: rgba(4, 4, 19, 0.55);
8
+ --color-light-status-positive: #0cc44d;
9
+ --color-light-status-positive-hover: #04b545;
8
10
  --color-light-text-primary: #0e0e0e;
9
- --color-light-text-secondary: rgba(60, 60, 67, 0.66);
10
- --color-static-graphic-light: #fff; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
11
+ --color-light-text-secondary: rgba(4, 4, 19, 0.55);
12
+ --color-static-neutral-1500-inverted: #fff; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
11
13
  } :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 */
12
14
  } :root {
13
15
  } :root {
@@ -32,20 +34,26 @@
32
34
  } :root {
33
35
  --switch-label-color: var(--color-light-text-primary);
34
36
  --switch-hint-color: var(--color-light-text-secondary);
35
- --switch-bg-color: var(--color-light-graphic-secondary);
36
- --switch-border-color: var(--color-light-graphic-secondary);
37
+ --switch-bg-color: var(--color-light-neutral-translucent-700);
38
+ --switch-border-color: transparent;
39
+
40
+ /* hover */
41
+ --switch-hover-bg-color: var(--color-light-neutral-translucent-700-hover);
37
42
 
38
43
  /* checked */
39
- --switch-checked-bg-color: var(--color-light-graphic-positive);
40
- --switch-checked-border-color: transparent;
44
+ --switch-checked-bg-color: var(--color-light-status-positive);
45
+ --switch-checked-hover-bg-color: var(--color-light-status-positive-hover);
41
46
 
42
47
  /* disabled */
43
48
  --switch-disabled-color: var(--color-light-text-secondary);
44
- --switch-disabled-bg-color: var(--color-light-graphic-quaternary);
45
- --switch-disabled-border-color: var(--color-light-graphic-quaternary);
49
+ --switch-disabled-bg-color: var(--color-light-neutral-translucent-700);
50
+
51
+ /* disabled checked */
52
+ --switch-disabled-checked-bg-color: var(--color-light-neutral-translucent-200);
46
53
 
47
- /* inactive */
48
- --switch-inactive-color: var(--color-light-border-underline);
54
+ /* icon */
55
+ --switch-icon-color: var(--color-static-neutral-1500-inverted);
56
+ --switch-icon-disabled-checked-color: var(--color-light-neutral-translucent-500);
49
57
  } .component {
50
58
  display: inline-flex;
51
59
  align-items: flex-start;
@@ -77,8 +85,10 @@
77
85
  background-color: var(--switch-bg-color);
78
86
  border: 2px solid var(--switch-border-color);
79
87
  transition: background-color 0.2s ease, border-color 0.2s ease;
80
- box-sizing: border-box;
81
- } .switch:before {
88
+ box-sizing: border-box
89
+ } .switch:hover {
90
+ background-color: var(--switch-hover-bg-color);
91
+ } .switch:before {
82
92
  content: '';
83
93
  position: absolute;
84
94
  top: 0;
@@ -87,7 +97,7 @@
87
97
  width: 16px;
88
98
  height: 16px;
89
99
  border-radius: var(--border-radius-circle);
90
- background-color: var(--color-static-graphic-light);
100
+ background-color: var(--switch-icon-color);
91
101
  box-sizing: border-box;
92
102
  transition: transform 0.2s ease;
93
103
  } .content {
@@ -118,28 +128,25 @@
118
128
  margin-right: auto;
119
129
  padding-right: var(--gap-m);
120
130
  } /* Checked state */ .checked .switch {
121
- background-color: var(--switch-checked-bg-color);
122
- border-color: var(--switch-checked-border-color);
123
- } .checked .switch:before {
131
+ background-color: var(--switch-checked-bg-color)
132
+ } .checked .switch:hover {
133
+ background-color: var(--switch-checked-hover-bg-color);
134
+ } .checked .switch:before {
124
135
  /* ширина компонента(36px + 2*2px) - отступы(2 * 2px) - размер кружка(20px) */
125
136
  transform: translateX(16px);
126
137
  } /* Disabled state */ .disabled {
127
138
  cursor: var(--disabled-cursor);
128
139
  } .disabled .switch {
129
140
  background-color: var(--switch-disabled-bg-color);
130
- border-color: var(--switch-disabled-border-color);
131
- } .disabled .label {
141
+ } .disabled.checked .switch {
142
+ background-color: var(--switch-disabled-checked-bg-color)
143
+ } .disabled.checked .switch:before {
144
+ background-color: var(--switch-icon-disabled-checked-color);
145
+ } .disabled .label {
132
146
  color: var(--switch-disabled-color);
133
147
  } .disabled .hint {
134
148
  color: var(--switch-disabled-color);
135
- } /* Inactive */ .inactive {
136
- cursor: var(--disabled-cursor);
137
- } .inactive .switch {
138
- background-color: var(--switch-disabled-bg-color);
139
- border-color: var(--switch-disabled-border-color)
140
- } .inactive .switch:before {
141
- background-color: var(--switch-inactive-color);
142
- } /* Focused state */ .focused .switch {
149
+ } /* Focused state */ .focused .switch {
143
150
  outline: 2px solid var(--focus-color);
144
151
  outline-offset: 2px;
145
152
  }
package/esm/Component.d.ts CHANGED
@@ -36,6 +36,8 @@ type SwitchProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'hint' |
36
36
  */
37
37
  disabled?: boolean;
38
38
  /**
39
+ * @deprecated данный проп больше не используется, временно оставлен для обратной совместимости
40
+ * Используйте props disabled
39
41
  * Управление состоянием активен / неактивен
40
42
  */
41
43
  inactive?: boolean;
@@ -85,6 +87,8 @@ declare const Switch: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttrib
85
87
  */
86
88
  disabled?: boolean | undefined;
87
89
  /**
90
+ * @deprecated данный проп больше не используется, временно оставлен для обратной совместимости
91
+ * Используйте props disabled
88
92
  * Управление состоянием активен / неактивен
89
93
  */
90
94
  inactive?: boolean | undefined;
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_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
+ var styles = {"component":"switch__component_14iw6","start":"switch__start_14iw6","center":"switch__center_14iw6","addons":"switch__addons_14iw6","block":"switch__block_14iw6","switch":"switch__switch_14iw6","content":"switch__content_14iw6","label":"switch__label_14iw6","hint":"switch__hint_14iw6","reversed":"switch__reversed_14iw6","checked":"switch__checked_14iw6","disabled":"switch__disabled_14iw6","focused":"switch__focused_14iw6"};
8
8
  require('./index.css')
9
9
 
10
10
  var Switch = forwardRef(function (_a, ref) {
@@ -20,8 +20,7 @@ var Switch = forwardRef(function (_a, ref) {
20
20
  return (
21
21
  // eslint-disable-next-line jsx-a11y/label-has-associated-control
22
22
  React.createElement("label", { className: cn(styles.component, styles[align], className, (_b = {},
23
- _b[styles.disabled] = disabled,
24
- _b[styles.inactive] = inactive,
23
+ _b[styles.disabled] = disabled || inactive,
25
24
  _b[styles.checked] = checked,
26
25
  _b[styles.reversed] = reversed,
27
26
  _b[styles.focused] = focused,
package/esm/index.css CHANGED
@@ -1,14 +1,16 @@
1
- /* hash: 4rfss */
1
+ /* hash: 1kphk */
2
2
  :root {
3
3
  } /* deprecated */ :root {
4
- --color-light-border-link: #0072ef;
5
- --color-light-border-underline: #c5c5c7;
6
- --color-light-graphic-positive: #2fc26e;
7
- --color-light-graphic-quaternary: #dcdcdd;
8
- --color-light-graphic-secondary: #86868a;
4
+ --color-light-border-link: #2288fa;
5
+ --color-light-neutral-translucent-200: rgba(30, 43, 68, 0.08);
6
+ --color-light-neutral-translucent-500: rgba(9, 12, 37, 0.28);
7
+ --color-light-neutral-translucent-700: rgba(4, 4, 21, 0.47);
8
+ --color-light-neutral-translucent-700-hover: rgba(4, 4, 19, 0.55);
9
+ --color-light-status-positive: #0cc44d;
10
+ --color-light-status-positive-hover: #04b545;
9
11
  --color-light-text-primary: #0e0e0e;
10
- --color-light-text-secondary: rgba(60, 60, 67, 0.66);
11
- --color-static-graphic-light: #fff; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
12
+ --color-light-text-secondary: rgba(4, 4, 19, 0.55);
13
+ --color-static-neutral-1500-inverted: #fff; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
12
14
  } :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 */
13
15
  } :root {
14
16
  } :root {
@@ -33,21 +35,27 @@
33
35
  } :root {
34
36
  --switch-label-color: var(--color-light-text-primary);
35
37
  --switch-hint-color: var(--color-light-text-secondary);
36
- --switch-bg-color: var(--color-light-graphic-secondary);
37
- --switch-border-color: var(--color-light-graphic-secondary);
38
+ --switch-bg-color: var(--color-light-neutral-translucent-700);
39
+ --switch-border-color: transparent;
40
+
41
+ /* hover */
42
+ --switch-hover-bg-color: var(--color-light-neutral-translucent-700-hover);
38
43
 
39
44
  /* checked */
40
- --switch-checked-bg-color: var(--color-light-graphic-positive);
41
- --switch-checked-border-color: transparent;
45
+ --switch-checked-bg-color: var(--color-light-status-positive);
46
+ --switch-checked-hover-bg-color: var(--color-light-status-positive-hover);
42
47
 
43
48
  /* disabled */
44
49
  --switch-disabled-color: var(--color-light-text-secondary);
45
- --switch-disabled-bg-color: var(--color-light-graphic-quaternary);
46
- --switch-disabled-border-color: var(--color-light-graphic-quaternary);
50
+ --switch-disabled-bg-color: var(--color-light-neutral-translucent-700);
51
+
52
+ /* disabled checked */
53
+ --switch-disabled-checked-bg-color: var(--color-light-neutral-translucent-200);
47
54
 
48
- /* inactive */
49
- --switch-inactive-color: var(--color-light-border-underline);
50
- } .switch__component_xxcqg {
55
+ /* icon */
56
+ --switch-icon-color: var(--color-static-neutral-1500-inverted);
57
+ --switch-icon-disabled-checked-color: var(--color-light-neutral-translucent-500);
58
+ } .switch__component_14iw6 {
51
59
  display: inline-flex;
52
60
  align-items: flex-start;
53
61
  margin: 0;
@@ -55,20 +63,20 @@
55
63
  border: 0;
56
64
  cursor: pointer;
57
65
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
58
- } .switch__component_xxcqg input {
66
+ } .switch__component_14iw6 input {
59
67
  opacity: 0;
60
68
  position: absolute;
61
- } .switch__start_xxcqg {
69
+ } .switch__start_14iw6 {
62
70
  align-items: flex-start;
63
- } .switch__center_xxcqg {
71
+ } .switch__center_14iw6 {
64
72
  align-items: center;
65
- } .switch__addons_xxcqg {
73
+ } .switch__addons_14iw6 {
66
74
  margin-left: auto;
67
75
  padding-left: var(--gap-m);
68
76
  line-height: 24px;
69
- } .switch__block_xxcqg {
77
+ } .switch__block_14iw6 {
70
78
  width: 100%;
71
- } .switch__switch_xxcqg {
79
+ } .switch__switch_14iw6 {
72
80
  position: relative;
73
81
  border-radius: var(--border-radius-xl);
74
82
  width: 36px;
@@ -78,8 +86,10 @@
78
86
  background-color: var(--switch-bg-color);
79
87
  border: 2px solid var(--switch-border-color);
80
88
  transition: background-color 0.2s ease, border-color 0.2s ease;
81
- box-sizing: border-box;
82
- } .switch__switch_xxcqg:before {
89
+ box-sizing: border-box
90
+ } .switch__switch_14iw6:hover {
91
+ background-color: var(--switch-hover-bg-color);
92
+ } .switch__switch_14iw6:before {
83
93
  content: '';
84
94
  position: absolute;
85
95
  top: 0;
@@ -88,59 +98,56 @@
88
98
  width: 16px;
89
99
  height: 16px;
90
100
  border-radius: var(--border-radius-circle);
91
- background-color: var(--color-static-graphic-light);
101
+ background-color: var(--switch-icon-color);
92
102
  box-sizing: border-box;
93
103
  transition: transform 0.2s ease;
94
- } .switch__content_xxcqg {
104
+ } .switch__content_14iw6 {
95
105
  margin-left: var(--gap-s);
96
106
  flex-grow: 1;
97
- } .switch__label_xxcqg {
107
+ } .switch__label_14iw6 {
98
108
  font-size: 16px;
99
109
  line-height: 24px;
100
110
  font-weight: 400;
101
111
  display: block;
102
112
  color: var(--switch-label-color);
103
- } .switch__label_xxcqg:not(:only-child) {
113
+ } .switch__label_14iw6:not(:only-child) {
104
114
  margin-bottom: var(--gap-2xs);
105
- } .switch__hint_xxcqg {
115
+ } .switch__hint_14iw6 {
106
116
  font-size: 14px;
107
117
  line-height: 18px;
108
118
  font-weight: 400;
109
119
  display: block;
110
120
  color: var(--switch-hint-color);
111
- } /* Reversed state */ .switch__component_xxcqg.switch__reversed_xxcqg {
121
+ } /* Reversed state */ .switch__component_14iw6.switch__reversed_14iw6 {
112
122
  flex-direction: row-reverse;
113
- } .switch__reversed_xxcqg .switch__content_xxcqg {
123
+ } .switch__reversed_14iw6 .switch__content_14iw6 {
114
124
  margin-right: var(--gap-m);
115
125
  margin-left: 0;
116
- } .switch__reversed_xxcqg .switch__addons_xxcqg {
126
+ } .switch__reversed_14iw6 .switch__addons_14iw6 {
117
127
  margin-left: 0;
118
128
  padding-left: 0;
119
129
  margin-right: auto;
120
130
  padding-right: var(--gap-m);
121
- } /* Checked state */ .switch__checked_xxcqg .switch__switch_xxcqg {
122
- background-color: var(--switch-checked-bg-color);
123
- border-color: var(--switch-checked-border-color);
124
- } .switch__checked_xxcqg .switch__switch_xxcqg:before {
131
+ } /* Checked state */ .switch__checked_14iw6 .switch__switch_14iw6 {
132
+ background-color: var(--switch-checked-bg-color)
133
+ } .switch__checked_14iw6 .switch__switch_14iw6:hover {
134
+ background-color: var(--switch-checked-hover-bg-color);
135
+ } .switch__checked_14iw6 .switch__switch_14iw6:before {
125
136
  /* ширина компонента(36px + 2*2px) - отступы(2 * 2px) - размер кружка(20px) */
126
137
  transform: translateX(16px);
127
- } /* Disabled state */ .switch__disabled_xxcqg {
138
+ } /* Disabled state */ .switch__disabled_14iw6 {
128
139
  cursor: var(--disabled-cursor);
129
- } .switch__disabled_xxcqg .switch__switch_xxcqg {
140
+ } .switch__disabled_14iw6 .switch__switch_14iw6 {
130
141
  background-color: var(--switch-disabled-bg-color);
131
- border-color: var(--switch-disabled-border-color);
132
- } .switch__disabled_xxcqg .switch__label_xxcqg {
142
+ } .switch__disabled_14iw6.switch__checked_14iw6 .switch__switch_14iw6 {
143
+ background-color: var(--switch-disabled-checked-bg-color)
144
+ } .switch__disabled_14iw6.switch__checked_14iw6 .switch__switch_14iw6:before {
145
+ background-color: var(--switch-icon-disabled-checked-color);
146
+ } .switch__disabled_14iw6 .switch__label_14iw6 {
133
147
  color: var(--switch-disabled-color);
134
- } .switch__disabled_xxcqg .switch__hint_xxcqg {
148
+ } .switch__disabled_14iw6 .switch__hint_14iw6 {
135
149
  color: var(--switch-disabled-color);
136
- } /* Inactive */ .switch__inactive_xxcqg {
137
- cursor: var(--disabled-cursor);
138
- } .switch__inactive_xxcqg .switch__switch_xxcqg {
139
- background-color: var(--switch-disabled-bg-color);
140
- border-color: var(--switch-disabled-border-color)
141
- } .switch__inactive_xxcqg .switch__switch_xxcqg:before {
142
- background-color: var(--switch-inactive-color);
143
- } /* Focused state */ .switch__focused_xxcqg .switch__switch_xxcqg {
150
+ } /* Focused state */ .switch__focused_14iw6 .switch__switch_14iw6 {
144
151
  outline: 2px solid var(--focus-color);
145
152
  outline-offset: 2px;
146
153
  }
package/index.css CHANGED
@@ -1,14 +1,16 @@
1
- /* hash: 4rfss */
1
+ /* hash: 1kphk */
2
2
  :root {
3
3
  } /* deprecated */ :root {
4
- --color-light-border-link: #0072ef;
5
- --color-light-border-underline: #c5c5c7;
6
- --color-light-graphic-positive: #2fc26e;
7
- --color-light-graphic-quaternary: #dcdcdd;
8
- --color-light-graphic-secondary: #86868a;
4
+ --color-light-border-link: #2288fa;
5
+ --color-light-neutral-translucent-200: rgba(30, 43, 68, 0.08);
6
+ --color-light-neutral-translucent-500: rgba(9, 12, 37, 0.28);
7
+ --color-light-neutral-translucent-700: rgba(4, 4, 21, 0.47);
8
+ --color-light-neutral-translucent-700-hover: rgba(4, 4, 19, 0.55);
9
+ --color-light-status-positive: #0cc44d;
10
+ --color-light-status-positive-hover: #04b545;
9
11
  --color-light-text-primary: #0e0e0e;
10
- --color-light-text-secondary: rgba(60, 60, 67, 0.66);
11
- --color-static-graphic-light: #fff; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
12
+ --color-light-text-secondary: rgba(4, 4, 19, 0.55);
13
+ --color-static-neutral-1500-inverted: #fff; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
12
14
  } :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 */
13
15
  } :root {
14
16
  } :root {
@@ -33,21 +35,27 @@
33
35
  } :root {
34
36
  --switch-label-color: var(--color-light-text-primary);
35
37
  --switch-hint-color: var(--color-light-text-secondary);
36
- --switch-bg-color: var(--color-light-graphic-secondary);
37
- --switch-border-color: var(--color-light-graphic-secondary);
38
+ --switch-bg-color: var(--color-light-neutral-translucent-700);
39
+ --switch-border-color: transparent;
40
+
41
+ /* hover */
42
+ --switch-hover-bg-color: var(--color-light-neutral-translucent-700-hover);
38
43
 
39
44
  /* checked */
40
- --switch-checked-bg-color: var(--color-light-graphic-positive);
41
- --switch-checked-border-color: transparent;
45
+ --switch-checked-bg-color: var(--color-light-status-positive);
46
+ --switch-checked-hover-bg-color: var(--color-light-status-positive-hover);
42
47
 
43
48
  /* disabled */
44
49
  --switch-disabled-color: var(--color-light-text-secondary);
45
- --switch-disabled-bg-color: var(--color-light-graphic-quaternary);
46
- --switch-disabled-border-color: var(--color-light-graphic-quaternary);
50
+ --switch-disabled-bg-color: var(--color-light-neutral-translucent-700);
51
+
52
+ /* disabled checked */
53
+ --switch-disabled-checked-bg-color: var(--color-light-neutral-translucent-200);
47
54
 
48
- /* inactive */
49
- --switch-inactive-color: var(--color-light-border-underline);
50
- } .switch__component_xxcqg {
55
+ /* icon */
56
+ --switch-icon-color: var(--color-static-neutral-1500-inverted);
57
+ --switch-icon-disabled-checked-color: var(--color-light-neutral-translucent-500);
58
+ } .switch__component_14iw6 {
51
59
  display: inline-flex;
52
60
  align-items: flex-start;
53
61
  margin: 0;
@@ -55,20 +63,20 @@
55
63
  border: 0;
56
64
  cursor: pointer;
57
65
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
58
- } .switch__component_xxcqg input {
66
+ } .switch__component_14iw6 input {
59
67
  opacity: 0;
60
68
  position: absolute;
61
- } .switch__start_xxcqg {
69
+ } .switch__start_14iw6 {
62
70
  align-items: flex-start;
63
- } .switch__center_xxcqg {
71
+ } .switch__center_14iw6 {
64
72
  align-items: center;
65
- } .switch__addons_xxcqg {
73
+ } .switch__addons_14iw6 {
66
74
  margin-left: auto;
67
75
  padding-left: var(--gap-m);
68
76
  line-height: 24px;
69
- } .switch__block_xxcqg {
77
+ } .switch__block_14iw6 {
70
78
  width: 100%;
71
- } .switch__switch_xxcqg {
79
+ } .switch__switch_14iw6 {
72
80
  position: relative;
73
81
  border-radius: var(--border-radius-xl);
74
82
  width: 36px;
@@ -78,8 +86,10 @@
78
86
  background-color: var(--switch-bg-color);
79
87
  border: 2px solid var(--switch-border-color);
80
88
  transition: background-color 0.2s ease, border-color 0.2s ease;
81
- box-sizing: border-box;
82
- } .switch__switch_xxcqg:before {
89
+ box-sizing: border-box
90
+ } .switch__switch_14iw6:hover {
91
+ background-color: var(--switch-hover-bg-color);
92
+ } .switch__switch_14iw6:before {
83
93
  content: '';
84
94
  position: absolute;
85
95
  top: 0;
@@ -88,59 +98,56 @@
88
98
  width: 16px;
89
99
  height: 16px;
90
100
  border-radius: var(--border-radius-circle);
91
- background-color: var(--color-static-graphic-light);
101
+ background-color: var(--switch-icon-color);
92
102
  box-sizing: border-box;
93
103
  transition: transform 0.2s ease;
94
- } .switch__content_xxcqg {
104
+ } .switch__content_14iw6 {
95
105
  margin-left: var(--gap-s);
96
106
  flex-grow: 1;
97
- } .switch__label_xxcqg {
107
+ } .switch__label_14iw6 {
98
108
  font-size: 16px;
99
109
  line-height: 24px;
100
110
  font-weight: 400;
101
111
  display: block;
102
112
  color: var(--switch-label-color);
103
- } .switch__label_xxcqg:not(:only-child) {
113
+ } .switch__label_14iw6:not(:only-child) {
104
114
  margin-bottom: var(--gap-2xs);
105
- } .switch__hint_xxcqg {
115
+ } .switch__hint_14iw6 {
106
116
  font-size: 14px;
107
117
  line-height: 18px;
108
118
  font-weight: 400;
109
119
  display: block;
110
120
  color: var(--switch-hint-color);
111
- } /* Reversed state */ .switch__component_xxcqg.switch__reversed_xxcqg {
121
+ } /* Reversed state */ .switch__component_14iw6.switch__reversed_14iw6 {
112
122
  flex-direction: row-reverse;
113
- } .switch__reversed_xxcqg .switch__content_xxcqg {
123
+ } .switch__reversed_14iw6 .switch__content_14iw6 {
114
124
  margin-right: var(--gap-m);
115
125
  margin-left: 0;
116
- } .switch__reversed_xxcqg .switch__addons_xxcqg {
126
+ } .switch__reversed_14iw6 .switch__addons_14iw6 {
117
127
  margin-left: 0;
118
128
  padding-left: 0;
119
129
  margin-right: auto;
120
130
  padding-right: var(--gap-m);
121
- } /* Checked state */ .switch__checked_xxcqg .switch__switch_xxcqg {
122
- background-color: var(--switch-checked-bg-color);
123
- border-color: var(--switch-checked-border-color);
124
- } .switch__checked_xxcqg .switch__switch_xxcqg:before {
131
+ } /* Checked state */ .switch__checked_14iw6 .switch__switch_14iw6 {
132
+ background-color: var(--switch-checked-bg-color)
133
+ } .switch__checked_14iw6 .switch__switch_14iw6:hover {
134
+ background-color: var(--switch-checked-hover-bg-color);
135
+ } .switch__checked_14iw6 .switch__switch_14iw6:before {
125
136
  /* ширина компонента(36px + 2*2px) - отступы(2 * 2px) - размер кружка(20px) */
126
137
  transform: translateX(16px);
127
- } /* Disabled state */ .switch__disabled_xxcqg {
138
+ } /* Disabled state */ .switch__disabled_14iw6 {
128
139
  cursor: var(--disabled-cursor);
129
- } .switch__disabled_xxcqg .switch__switch_xxcqg {
140
+ } .switch__disabled_14iw6 .switch__switch_14iw6 {
130
141
  background-color: var(--switch-disabled-bg-color);
131
- border-color: var(--switch-disabled-border-color);
132
- } .switch__disabled_xxcqg .switch__label_xxcqg {
142
+ } .switch__disabled_14iw6.switch__checked_14iw6 .switch__switch_14iw6 {
143
+ background-color: var(--switch-disabled-checked-bg-color)
144
+ } .switch__disabled_14iw6.switch__checked_14iw6 .switch__switch_14iw6:before {
145
+ background-color: var(--switch-icon-disabled-checked-color);
146
+ } .switch__disabled_14iw6 .switch__label_14iw6 {
133
147
  color: var(--switch-disabled-color);
134
- } .switch__disabled_xxcqg .switch__hint_xxcqg {
148
+ } .switch__disabled_14iw6 .switch__hint_14iw6 {
135
149
  color: var(--switch-disabled-color);
136
- } /* Inactive */ .switch__inactive_xxcqg {
137
- cursor: var(--disabled-cursor);
138
- } .switch__inactive_xxcqg .switch__switch_xxcqg {
139
- background-color: var(--switch-disabled-bg-color);
140
- border-color: var(--switch-disabled-border-color)
141
- } .switch__inactive_xxcqg .switch__switch_xxcqg:before {
142
- background-color: var(--switch-inactive-color);
143
- } /* Focused state */ .switch__focused_xxcqg .switch__switch_xxcqg {
150
+ } /* Focused state */ .switch__focused_14iw6 .switch__switch_14iw6 {
144
151
  outline: 2px solid var(--focus-color);
145
152
  outline-offset: 2px;
146
153
  }
package/modern/Component.d.ts CHANGED
@@ -36,6 +36,8 @@ type SwitchProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'hint' |
36
36
  */
37
37
  disabled?: boolean;
38
38
  /**
39
+ * @deprecated данный проп больше не используется, временно оставлен для обратной совместимости
40
+ * Используйте props disabled
39
41
  * Управление состоянием активен / неактивен
40
42
  */
41
43
  inactive?: boolean;
@@ -85,6 +87,8 @@ declare const Switch: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttrib
85
87
  */
86
88
  disabled?: boolean | undefined;
87
89
  /**
90
+ * @deprecated данный проп больше не используется, временно оставлен для обратной совместимости
91
+ * Используйте props disabled
88
92
  * Управление состоянием активен / неактивен
89
93
  */
90
94
  inactive?: boolean | undefined;
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_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"};
6
+ const styles = {"component":"switch__component_14iw6","start":"switch__start_14iw6","center":"switch__center_14iw6","addons":"switch__addons_14iw6","block":"switch__block_14iw6","switch":"switch__switch_14iw6","content":"switch__content_14iw6","label":"switch__label_14iw6","hint":"switch__hint_14iw6","reversed":"switch__reversed_14iw6","checked":"switch__checked_14iw6","disabled":"switch__disabled_14iw6","focused":"switch__focused_14iw6"};
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) => {
@@ -17,8 +17,7 @@ const Switch = forwardRef(({ reversed = false, checked = false, align = 'start',
17
17
  return (
18
18
  // eslint-disable-next-line jsx-a11y/label-has-associated-control
19
19
  React.createElement("label", { className: cn(styles.component, styles[align], className, {
20
- [styles.disabled]: disabled,
21
- [styles.inactive]: inactive,
20
+ [styles.disabled]: disabled || inactive,
22
21
  [styles.checked]: checked,
23
22
  [styles.reversed]: reversed,
24
23
  [styles.focused]: focused,
package/modern/index.css CHANGED
@@ -1,14 +1,16 @@
1
- /* hash: 4rfss */
1
+ /* hash: 1kphk */
2
2
  :root {
3
3
  } /* deprecated */ :root {
4
- --color-light-border-link: #0072ef;
5
- --color-light-border-underline: #c5c5c7;
6
- --color-light-graphic-positive: #2fc26e;
7
- --color-light-graphic-quaternary: #dcdcdd;
8
- --color-light-graphic-secondary: #86868a;
4
+ --color-light-border-link: #2288fa;
5
+ --color-light-neutral-translucent-200: rgba(30, 43, 68, 0.08);
6
+ --color-light-neutral-translucent-500: rgba(9, 12, 37, 0.28);
7
+ --color-light-neutral-translucent-700: rgba(4, 4, 21, 0.47);
8
+ --color-light-neutral-translucent-700-hover: rgba(4, 4, 19, 0.55);
9
+ --color-light-status-positive: #0cc44d;
10
+ --color-light-status-positive-hover: #04b545;
9
11
  --color-light-text-primary: #0e0e0e;
10
- --color-light-text-secondary: rgba(60, 60, 67, 0.66);
11
- --color-static-graphic-light: #fff; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
12
+ --color-light-text-secondary: rgba(4, 4, 19, 0.55);
13
+ --color-static-neutral-1500-inverted: #fff; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
12
14
  } :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 */
13
15
  } :root {
14
16
  } :root {
@@ -33,21 +35,27 @@
33
35
  } :root {
34
36
  --switch-label-color: var(--color-light-text-primary);
35
37
  --switch-hint-color: var(--color-light-text-secondary);
36
- --switch-bg-color: var(--color-light-graphic-secondary);
37
- --switch-border-color: var(--color-light-graphic-secondary);
38
+ --switch-bg-color: var(--color-light-neutral-translucent-700);
39
+ --switch-border-color: transparent;
40
+
41
+ /* hover */
42
+ --switch-hover-bg-color: var(--color-light-neutral-translucent-700-hover);
38
43
 
39
44
  /* checked */
40
- --switch-checked-bg-color: var(--color-light-graphic-positive);
41
- --switch-checked-border-color: transparent;
45
+ --switch-checked-bg-color: var(--color-light-status-positive);
46
+ --switch-checked-hover-bg-color: var(--color-light-status-positive-hover);
42
47
 
43
48
  /* disabled */
44
49
  --switch-disabled-color: var(--color-light-text-secondary);
45
- --switch-disabled-bg-color: var(--color-light-graphic-quaternary);
46
- --switch-disabled-border-color: var(--color-light-graphic-quaternary);
50
+ --switch-disabled-bg-color: var(--color-light-neutral-translucent-700);
51
+
52
+ /* disabled checked */
53
+ --switch-disabled-checked-bg-color: var(--color-light-neutral-translucent-200);
47
54
 
48
- /* inactive */
49
- --switch-inactive-color: var(--color-light-border-underline);
50
- } .switch__component_xxcqg {
55
+ /* icon */
56
+ --switch-icon-color: var(--color-static-neutral-1500-inverted);
57
+ --switch-icon-disabled-checked-color: var(--color-light-neutral-translucent-500);
58
+ } .switch__component_14iw6 {
51
59
  display: inline-flex;
52
60
  align-items: flex-start;
53
61
  margin: 0;
@@ -55,20 +63,20 @@
55
63
  border: 0;
56
64
  cursor: pointer;
57
65
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
58
- } .switch__component_xxcqg input {
66
+ } .switch__component_14iw6 input {
59
67
  opacity: 0;
60
68
  position: absolute;
61
- } .switch__start_xxcqg {
69
+ } .switch__start_14iw6 {
62
70
  align-items: flex-start;
63
- } .switch__center_xxcqg {
71
+ } .switch__center_14iw6 {
64
72
  align-items: center;
65
- } .switch__addons_xxcqg {
73
+ } .switch__addons_14iw6 {
66
74
  margin-left: auto;
67
75
  padding-left: var(--gap-m);
68
76
  line-height: 24px;
69
- } .switch__block_xxcqg {
77
+ } .switch__block_14iw6 {
70
78
  width: 100%;
71
- } .switch__switch_xxcqg {
79
+ } .switch__switch_14iw6 {
72
80
  position: relative;
73
81
  border-radius: var(--border-radius-xl);
74
82
  width: 36px;
@@ -78,8 +86,10 @@
78
86
  background-color: var(--switch-bg-color);
79
87
  border: 2px solid var(--switch-border-color);
80
88
  transition: background-color 0.2s ease, border-color 0.2s ease;
81
- box-sizing: border-box;
82
- } .switch__switch_xxcqg:before {
89
+ box-sizing: border-box
90
+ } .switch__switch_14iw6:hover {
91
+ background-color: var(--switch-hover-bg-color);
92
+ } .switch__switch_14iw6:before {
83
93
  content: '';
84
94
  position: absolute;
85
95
  top: 0;
@@ -88,59 +98,56 @@
88
98
  width: 16px;
89
99
  height: 16px;
90
100
  border-radius: var(--border-radius-circle);
91
- background-color: var(--color-static-graphic-light);
101
+ background-color: var(--switch-icon-color);
92
102
  box-sizing: border-box;
93
103
  transition: transform 0.2s ease;
94
- } .switch__content_xxcqg {
104
+ } .switch__content_14iw6 {
95
105
  margin-left: var(--gap-s);
96
106
  flex-grow: 1;
97
- } .switch__label_xxcqg {
107
+ } .switch__label_14iw6 {
98
108
  font-size: 16px;
99
109
  line-height: 24px;
100
110
  font-weight: 400;
101
111
  display: block;
102
112
  color: var(--switch-label-color);
103
- } .switch__label_xxcqg:not(:only-child) {
113
+ } .switch__label_14iw6:not(:only-child) {
104
114
  margin-bottom: var(--gap-2xs);
105
- } .switch__hint_xxcqg {
115
+ } .switch__hint_14iw6 {
106
116
  font-size: 14px;
107
117
  line-height: 18px;
108
118
  font-weight: 400;
109
119
  display: block;
110
120
  color: var(--switch-hint-color);
111
- } /* Reversed state */ .switch__component_xxcqg.switch__reversed_xxcqg {
121
+ } /* Reversed state */ .switch__component_14iw6.switch__reversed_14iw6 {
112
122
  flex-direction: row-reverse;
113
- } .switch__reversed_xxcqg .switch__content_xxcqg {
123
+ } .switch__reversed_14iw6 .switch__content_14iw6 {
114
124
  margin-right: var(--gap-m);
115
125
  margin-left: 0;
116
- } .switch__reversed_xxcqg .switch__addons_xxcqg {
126
+ } .switch__reversed_14iw6 .switch__addons_14iw6 {
117
127
  margin-left: 0;
118
128
  padding-left: 0;
119
129
  margin-right: auto;
120
130
  padding-right: var(--gap-m);
121
- } /* Checked state */ .switch__checked_xxcqg .switch__switch_xxcqg {
122
- background-color: var(--switch-checked-bg-color);
123
- border-color: var(--switch-checked-border-color);
124
- } .switch__checked_xxcqg .switch__switch_xxcqg:before {
131
+ } /* Checked state */ .switch__checked_14iw6 .switch__switch_14iw6 {
132
+ background-color: var(--switch-checked-bg-color)
133
+ } .switch__checked_14iw6 .switch__switch_14iw6:hover {
134
+ background-color: var(--switch-checked-hover-bg-color);
135
+ } .switch__checked_14iw6 .switch__switch_14iw6:before {
125
136
  /* ширина компонента(36px + 2*2px) - отступы(2 * 2px) - размер кружка(20px) */
126
137
  transform: translateX(16px);
127
- } /* Disabled state */ .switch__disabled_xxcqg {
138
+ } /* Disabled state */ .switch__disabled_14iw6 {
128
139
  cursor: var(--disabled-cursor);
129
- } .switch__disabled_xxcqg .switch__switch_xxcqg {
140
+ } .switch__disabled_14iw6 .switch__switch_14iw6 {
130
141
  background-color: var(--switch-disabled-bg-color);
131
- border-color: var(--switch-disabled-border-color);
132
- } .switch__disabled_xxcqg .switch__label_xxcqg {
142
+ } .switch__disabled_14iw6.switch__checked_14iw6 .switch__switch_14iw6 {
143
+ background-color: var(--switch-disabled-checked-bg-color)
144
+ } .switch__disabled_14iw6.switch__checked_14iw6 .switch__switch_14iw6:before {
145
+ background-color: var(--switch-icon-disabled-checked-color);
146
+ } .switch__disabled_14iw6 .switch__label_14iw6 {
133
147
  color: var(--switch-disabled-color);
134
- } .switch__disabled_xxcqg .switch__hint_xxcqg {
148
+ } .switch__disabled_14iw6 .switch__hint_14iw6 {
135
149
  color: var(--switch-disabled-color);
136
- } /* Inactive */ .switch__inactive_xxcqg {
137
- cursor: var(--disabled-cursor);
138
- } .switch__inactive_xxcqg .switch__switch_xxcqg {
139
- background-color: var(--switch-disabled-bg-color);
140
- border-color: var(--switch-disabled-border-color)
141
- } .switch__inactive_xxcqg .switch__switch_xxcqg:before {
142
- background-color: var(--switch-inactive-color);
143
- } /* Focused state */ .switch__focused_xxcqg .switch__switch_xxcqg {
150
+ } /* Focused state */ .switch__focused_14iw6 .switch__switch_14iw6 {
144
151
  outline: 2px solid var(--focus-color);
145
152
  outline-offset: 2px;
146
153
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@alfalab/core-components-switch",
3
- "version": "3.2.0",
3
+ "version": "4.0.0",
4
4
  "description": "",
5
5
  "gitHead": "f054fef20200664c65e2501ef1f916c555cdf05d",
6
6
  "keywords": [],
package/src/Component.tsx CHANGED
@@ -53,6 +53,8 @@ export type SwitchProps = Omit<
53
53
  disabled?: boolean;
54
54
 
55
55
  /**
56
+ * @deprecated данный проп больше не используется, временно оставлен для обратной совместимости
57
+ * Используйте props disabled
56
58
  * Управление состоянием активен / неактивен
57
59
  */
58
60
  inactive?: boolean;
@@ -109,8 +111,7 @@ export const Switch = forwardRef<HTMLLabelElement, SwitchProps>(
109
111
  // eslint-disable-next-line jsx-a11y/label-has-associated-control
110
112
  <label
111
113
  className={cn(styles.component, styles[align], className, {
112
- [styles.disabled]: disabled,
113
- [styles.inactive]: inactive,
114
+ [styles.disabled]: disabled || inactive,
114
115
  [styles.checked]: checked,
115
116
  [styles.reversed]: reversed,
116
117
  [styles.focused]: focused,
package/src/index.module.css CHANGED
@@ -3,20 +3,26 @@
3
3
  :root {
4
4
  --switch-label-color: var(--color-light-text-primary);
5
5
  --switch-hint-color: var(--color-light-text-secondary);
6
- --switch-bg-color: var(--color-light-graphic-secondary);
7
- --switch-border-color: var(--color-light-graphic-secondary);
6
+ --switch-bg-color: var(--color-light-neutral-translucent-700);
7
+ --switch-border-color: transparent;
8
+
9
+ /* hover */
10
+ --switch-hover-bg-color: var(--color-light-neutral-translucent-700-hover);
8
11
 
9
12
  /* checked */
10
- --switch-checked-bg-color: var(--color-light-graphic-positive);
11
- --switch-checked-border-color: transparent;
13
+ --switch-checked-bg-color: var(--color-light-status-positive);
14
+ --switch-checked-hover-bg-color: var(--color-light-status-positive-hover);
12
15
 
13
16
  /* disabled */
14
17
  --switch-disabled-color: var(--color-light-text-secondary);
15
- --switch-disabled-bg-color: var(--color-light-graphic-quaternary);
16
- --switch-disabled-border-color: var(--color-light-graphic-quaternary);
18
+ --switch-disabled-bg-color: var(--color-light-neutral-translucent-700);
19
+
20
+ /* disabled checked */
21
+ --switch-disabled-checked-bg-color: var(--color-light-neutral-translucent-200);
17
22
 
18
- /* inactive */
19
- --switch-inactive-color: var(--color-light-border-underline);
23
+ /* icon */
24
+ --switch-icon-color: var(--color-static-neutral-1500-inverted);
25
+ --switch-icon-disabled-checked-color: var(--color-light-neutral-translucent-500);
20
26
  }
21
27
 
22
28
  .component {
@@ -63,6 +69,10 @@
63
69
  border: 2px solid var(--switch-border-color);
64
70
  transition: background-color 0.2s ease, border-color 0.2s ease;
65
71
  box-sizing: border-box;
72
+
73
+ &:hover {
74
+ background-color: var(--switch-hover-bg-color);
75
+ }
66
76
  }
67
77
 
68
78
  .switch:before {
@@ -74,7 +84,7 @@
74
84
  width: 16px;
75
85
  height: 16px;
76
86
  border-radius: var(--border-radius-circle);
77
- background-color: var(--color-static-graphic-light);
87
+ background-color: var(--switch-icon-color);
78
88
  box-sizing: border-box;
79
89
  transition: transform 0.2s ease;
80
90
  }
@@ -122,7 +132,10 @@
122
132
 
123
133
  .checked .switch {
124
134
  background-color: var(--switch-checked-bg-color);
125
- border-color: var(--switch-checked-border-color);
135
+
136
+ &:hover {
137
+ background-color: var(--switch-checked-hover-bg-color);
138
+ }
126
139
  }
127
140
 
128
141
  .checked .switch:before {
@@ -138,7 +151,14 @@
138
151
 
139
152
  .disabled .switch {
140
153
  background-color: var(--switch-disabled-bg-color);
141
- border-color: var(--switch-disabled-border-color);
154
+ }
155
+
156
+ .disabled.checked .switch {
157
+ background-color: var(--switch-disabled-checked-bg-color);
158
+
159
+ &:before {
160
+ background-color: var(--switch-icon-disabled-checked-color);
161
+ }
142
162
  }
143
163
 
144
164
  .disabled .label {
@@ -149,21 +169,6 @@
149
169
  color: var(--switch-disabled-color);
150
170
  }
151
171
 
152
- /* Inactive */
153
-
154
- .inactive {
155
- cursor: var(--disabled-cursor);
156
- }
157
-
158
- .inactive .switch {
159
- background-color: var(--switch-disabled-bg-color);
160
- border-color: var(--switch-disabled-border-color);
161
-
162
- &:before {
163
- background-color: var(--switch-inactive-color);
164
- }
165
- }
166
-
167
172
  /* Focused state */
168
173
 
169
174
  .focused .switch {