@alfalab/core-components-switch 4.3.2 → 4.4.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 (44) hide show
  1. package/Component.d.ts +11 -0
  2. package/Component.js +17 -5
  3. package/cssm/Component.d.ts +11 -0
  4. package/cssm/Component.js +14 -4
  5. package/cssm/default.module.css +73 -0
  6. package/cssm/index.module.css +5 -40
  7. package/cssm/inverted.module.css +73 -0
  8. package/cssm/types/colors.d.ts +2 -0
  9. package/cssm/types/colors.js +2 -0
  10. package/cssm/vars.css +14 -0
  11. package/default.css +74 -0
  12. package/esm/Component.d.ts +11 -0
  13. package/esm/Component.js +17 -5
  14. package/esm/default.css +74 -0
  15. package/esm/index.css +23 -58
  16. package/esm/inverted.css +74 -0
  17. package/esm/types/colors.d.ts +2 -0
  18. package/esm/types/colors.js +1 -0
  19. package/index.css +23 -58
  20. package/inverted.css +74 -0
  21. package/modern/Component.d.ts +11 -0
  22. package/modern/Component.js +17 -5
  23. package/modern/default.css +74 -0
  24. package/modern/index.css +23 -58
  25. package/modern/inverted.css +74 -0
  26. package/modern/types/colors.d.ts +2 -0
  27. package/modern/types/colors.js +1 -0
  28. package/moderncssm/Component.d.ts +11 -0
  29. package/moderncssm/Component.js +12 -4
  30. package/moderncssm/default.module.css +58 -0
  31. package/moderncssm/index.module.css +3 -70
  32. package/moderncssm/inverted.module.css +58 -0
  33. package/moderncssm/types/colors.d.ts +2 -0
  34. package/moderncssm/types/colors.js +1 -0
  35. package/moderncssm/vars.css +14 -0
  36. package/package.json +1 -1
  37. package/src/Component.tsx +31 -3
  38. package/src/default.module.css +46 -0
  39. package/src/index.module.css +1 -61
  40. package/src/inverted.module.css +46 -0
  41. package/src/types/colors.ts +1 -0
  42. package/src/vars.css +37 -0
  43. package/types/colors.d.ts +2 -0
  44. package/types/colors.js +2 -0
@@ -0,0 +1,74 @@
1
+ /* hash: i5l8h */
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
+ } /* deprecated */ :root {
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;
10
+ --color-light-text-primary: rgba(3, 3, 6, 0.88);
11
+ --color-light-text-secondary: rgba(4, 4, 19, 0.55); /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* 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
+ } :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 */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* 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
+ } :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 */
14
+ } :root {
15
+
16
+ /* Hard */
17
+
18
+ /* Up */
19
+
20
+ /* Hard up */
21
+ } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
22
+
23
+ /* новые значения, используйте их */
24
+ } :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 */
25
+
26
+ /* новые значения, используйте их */
27
+ } :root {
28
+ } :root {
29
+ } /* сбрасывает синюю подсветку при нажатии */ :root {
30
+ --switch-label-color: var(--color-light-text-primary);
31
+ --switch-hint-color: var(--color-light-text-secondary);
32
+ --switch-bg-color: var(--color-light-neutral-translucent-700);
33
+
34
+ /* inverted */
35
+
36
+ /* hover */
37
+ --switch-hover-bg-color: var(--color-light-neutral-translucent-700-hover);
38
+
39
+ /* checked */
40
+ --switch-checked-bg-color: var(--color-light-status-positive);
41
+ --switch-checked-hover-bg-color: var(--color-light-status-positive-hover);
42
+
43
+ /* disabled */
44
+ --switch-disabled-color: var(--color-light-text-secondary);
45
+ --switch-disabled-bg-color: var(--color-light-neutral-translucent-200);
46
+
47
+ /* disabled checked */
48
+ --switch-disabled-checked-bg-color: var(--switch-disabled-bg-color);
49
+
50
+ /* icon */
51
+ --switch-icon-disabled-color: var(--color-light-neutral-translucent-500);
52
+ } .switch__switch_14m20 {
53
+ background-color: var(--switch-bg-color)
54
+ } .switch__switch_14m20:hover {
55
+ background-color: var(--switch-hover-bg-color);
56
+ } .switch__label_14m20 {
57
+ color: var(--switch-label-color);
58
+ } .switch__hint_14m20 {
59
+ color: var(--switch-hint-color);
60
+ } .switch__checked_14m20 .switch__switch_14m20 {
61
+ background-color: var(--switch-checked-bg-color)
62
+ } .switch__checked_14m20 .switch__switch_14m20:hover {
63
+ background-color: var(--switch-checked-hover-bg-color);
64
+ } .switch__disabled_14m20 .switch__label_14m20 {
65
+ color: var(--switch-disabled-color);
66
+ } .switch__disabled_14m20 .switch__hint_14m20 {
67
+ color: var(--switch-disabled-color);
68
+ } .switch__disabled_14m20 .switch__switch_14m20 {
69
+ background-color: var(--switch-disabled-bg-color)
70
+ } .switch__disabled_14m20 .switch__switch_14m20:before {
71
+ background-color: var(--switch-icon-disabled-color);
72
+ } .switch__disabled_14m20.switch__checked_14m20 .switch__switch_14m20 {
73
+ background-color: var(--switch-disabled-checked-bg-color);
74
+ }
package/modern/index.css CHANGED
@@ -1,16 +1,8 @@
1
- /* hash: 1nwad */
1
+ /* hash: c39sc */
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
- --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
4
  --color-light-status-info: #2288fa;
9
- --color-light-status-positive: #0cc44d;
10
- --color-light-status-positive-hover: #04b545;
11
5
  --color-light-text-negative: #ec2d20;
12
- --color-light-text-primary: rgba(3, 3, 6, 0.88);
13
- --color-light-text-secondary: rgba(4, 4, 19, 0.55);
14
6
  --color-static-neutral-0: #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 */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
15
7
  } :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 */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
16
8
  } :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 */
@@ -44,30 +36,22 @@
44
36
  --focus-color: var(--color-light-status-info);
45
37
  --disabled-cursor: not-allowed;
46
38
  } /* сбрасывает синюю подсветку при нажатии */ :root {
47
- --switch-label-color: var(--color-light-text-primary);
48
- --switch-hint-color: var(--color-light-text-secondary);
49
- --switch-bg-color: var(--color-light-neutral-translucent-700);
50
39
  --switch-border-color: transparent;
51
40
  --switch-error-color: var(--color-light-text-negative);
52
41
 
42
+ /* inverted */
43
+
53
44
  /* hover */
54
- --switch-hover-bg-color: var(--color-light-neutral-translucent-700-hover);
55
45
 
56
46
  /* checked */
57
- --switch-checked-bg-color: var(--color-light-status-positive);
58
- --switch-checked-hover-bg-color: var(--color-light-status-positive-hover);
59
47
 
60
48
  /* disabled */
61
- --switch-disabled-color: var(--color-light-text-secondary);
62
- --switch-disabled-bg-color: var(--color-light-neutral-translucent-200);
63
49
 
64
50
  /* disabled checked */
65
- --switch-disabled-checked-bg-color: var(--switch-disabled-bg-color);
66
51
 
67
52
  /* icon */
68
53
  --switch-icon-color: var(--color-static-neutral-0);
69
- --switch-icon-disabled-color: var(--color-light-neutral-translucent-500);
70
- } .switch__component_1drxk {
54
+ } .switch__component_110yj {
71
55
  display: inline-flex;
72
56
  align-items: flex-start;
73
57
  margin: var(--gap-0);
@@ -75,33 +59,30 @@
75
59
  border: 0;
76
60
  cursor: pointer;
77
61
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
78
- } .switch__component_1drxk input {
62
+ } .switch__component_110yj input {
79
63
  opacity: 0;
80
64
  position: absolute;
81
- } .switch__start_1drxk {
65
+ } .switch__start_110yj {
82
66
  align-items: flex-start;
83
- } .switch__center_1drxk {
67
+ } .switch__center_110yj {
84
68
  align-items: center;
85
- } .switch__addons_1drxk {
69
+ } .switch__addons_110yj {
86
70
  margin-left: auto;
87
71
  padding-left: var(--gap-16);
88
72
  line-height: 24px;
89
- } .switch__block_1drxk {
73
+ } .switch__block_110yj {
90
74
  width: 100%;
91
- } .switch__switch_1drxk {
75
+ } .switch__switch_110yj {
92
76
  position: relative;
93
77
  border-radius: var(--border-radius-16);
94
78
  width: 36px;
95
79
  height: 20px;
96
80
  margin: var(--gap-2);
97
81
  flex-shrink: 0;
98
- background-color: var(--switch-bg-color);
99
82
  border: 2px solid var(--switch-border-color);
100
83
  transition: background-color 0.2s ease, border-color 0.2s ease;
101
- box-sizing: border-box
102
- } .switch__switch_1drxk:hover {
103
- background-color: var(--switch-hover-bg-color);
104
- } .switch__switch_1drxk:before {
84
+ box-sizing: border-box;
85
+ } .switch__switch_110yj:before {
105
86
  content: '';
106
87
  position: absolute;
107
88
  top: var(--gap-0);
@@ -113,58 +94,42 @@
113
94
  background-color: var(--switch-icon-color);
114
95
  box-sizing: border-box;
115
96
  transition: transform 0.2s ease;
116
- } .switch__content_1drxk {
97
+ } .switch__content_110yj {
117
98
  margin-left: var(--gap-12);
118
99
  flex-grow: 1;
119
- } .switch__label_1drxk {
100
+ } .switch__label_110yj {
120
101
  font-size: 16px;
121
102
  line-height: 24px;
122
103
  font-weight: 400;
123
104
  display: block;
124
- color: var(--switch-label-color);
125
- } .switch__label_1drxk:not(:only-child) {
105
+ } .switch__label_110yj:not(:only-child) {
126
106
  margin-bottom: var(--gap-4);
127
- } .switch__errorMessage_1drxk {
107
+ } .switch__errorMessage_110yj {
128
108
  font-size: 14px;
129
109
  line-height: 18px;
130
110
  font-weight: 400;
131
111
  color: var(--switch-error-color);
132
- } .switch__hint_1drxk {
112
+ } .switch__hint_110yj {
133
113
  font-size: 14px;
134
114
  line-height: 18px;
135
115
  font-weight: 400;
136
116
  display: block;
137
- color: var(--switch-hint-color);
138
- } /* Reversed state */ .switch__component_1drxk.switch__reversed_1drxk {
117
+ } /* Reversed state */ .switch__component_110yj.switch__reversed_110yj {
139
118
  flex-direction: row-reverse;
140
- } .switch__reversed_1drxk .switch__content_1drxk {
119
+ } .switch__reversed_110yj .switch__content_110yj {
141
120
  margin-right: var(--gap-16);
142
121
  margin-left: var(--gap-0);
143
- } .switch__reversed_1drxk .switch__addons_1drxk {
122
+ } .switch__reversed_110yj .switch__addons_110yj {
144
123
  margin-left: var(--gap-0);
145
124
  padding-left: var(--gap-0);
146
125
  margin-right: auto;
147
126
  padding-right: var(--gap-16);
148
- } /* Checked state */ .switch__checked_1drxk .switch__switch_1drxk {
149
- background-color: var(--switch-checked-bg-color)
150
- } .switch__checked_1drxk .switch__switch_1drxk:hover {
151
- background-color: var(--switch-checked-hover-bg-color);
152
- } .switch__checked_1drxk .switch__switch_1drxk:before {
127
+ } /* Checked state */ .switch__checked_110yj .switch__switch_110yj:before {
153
128
  /* ширина компонента(36px + 2*2px) - отступы(2 * 2px) - размер кружка(20px) */
154
129
  transform: translateX(16px);
155
- } /* Disabled state */ .switch__disabled_1drxk {
130
+ } /* Disabled state */ .switch__disabled_110yj {
156
131
  cursor: var(--disabled-cursor);
157
- } .switch__disabled_1drxk .switch__switch_1drxk {
158
- background-color: var(--switch-disabled-bg-color)
159
- } .switch__disabled_1drxk .switch__switch_1drxk:before {
160
- background-color: var(--switch-icon-disabled-color);
161
- } .switch__disabled_1drxk.switch__checked_1drxk .switch__switch_1drxk {
162
- background-color: var(--switch-disabled-checked-bg-color);
163
- } .switch__disabled_1drxk .switch__label_1drxk {
164
- color: var(--switch-disabled-color);
165
- } .switch__disabled_1drxk .switch__hint_1drxk {
166
- color: var(--switch-disabled-color);
167
- } /* Focused state */ .switch__focused_1drxk .switch__switch_1drxk {
132
+ } /* Focused state */ .switch__focused_110yj .switch__switch_110yj {
168
133
  outline: 2px solid var(--focus-color);
169
134
  outline-offset: 2px;
170
135
  }
@@ -0,0 +1,74 @@
1
+ /* hash: 6qqvm */
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
+ } /* deprecated */ :root {
4
+ --color-light-neutral-translucent-200-inverted: rgba(225, 225, 248, 0.09);
5
+ --color-light-neutral-translucent-500-inverted: rgba(228, 228, 251, 0.28);
6
+ --color-light-neutral-translucent-700-inverted: rgba(238, 238, 251, 0.55);
7
+ --color-light-neutral-translucent-700-inverted-hover: rgba(239, 240, 252, 0.65);
8
+ --color-light-status-positive-inverted: #17d055;
9
+ --color-light-status-positive-inverted-hover: #22e068;
10
+ --color-light-text-primary-inverted: rgba(255, 255, 255, 0.94);
11
+ --color-light-text-secondary-inverted: rgba(238, 238, 251, 0.55); /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* 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
+ } :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 */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* 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
+ } :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 */
14
+ } :root {
15
+
16
+ /* Hard */
17
+
18
+ /* Up */
19
+
20
+ /* Hard up */
21
+ } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
22
+
23
+ /* новые значения, используйте их */
24
+ } :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 */
25
+
26
+ /* новые значения, используйте их */
27
+ } :root {
28
+ } :root {
29
+ } /* сбрасывает синюю подсветку при нажатии */ :root {
30
+
31
+ /* inverted */
32
+ --switch-label-inverted-color: var(--color-light-text-primary-inverted);
33
+ --switch-hint-inverted-color: var(--color-light-text-secondary-inverted);
34
+ --switch-checked-bg-inverted-color: var(--color-light-status-positive-inverted);
35
+ --switch-checked-hover-bg-inverted-color: var(--color-light-status-positive-inverted-hover);
36
+ --switch-bg-inverted-color: var(--color-light-neutral-translucent-700-inverted);
37
+
38
+ /* hover */
39
+ --switch-hover-bg-inverted-color: var(--color-light-neutral-translucent-700-inverted-hover);
40
+
41
+ /* checked */
42
+
43
+ /* disabled */
44
+ --switch-disabled-inverted-color: var(--color-light-text-secondary-inverted);
45
+ --switch-disabled-bg-inverted-color: var(--color-light-neutral-translucent-200-inverted);
46
+
47
+ /* disabled checked */
48
+ --switch-disabled-checked-bg-inverted-color: var(--switch-disabled-bg-inverted-color);
49
+
50
+ /* icon */
51
+ --switch-icon-disabled-inverted-color: var(--color-light-neutral-translucent-500-inverted);
52
+ } .switch__switch_u8wl7 {
53
+ background-color: var(--switch-bg-inverted-color)
54
+ } .switch__switch_u8wl7:hover {
55
+ background-color: var(--switch-hover-bg-inverted-color);
56
+ } .switch__label_u8wl7 {
57
+ color: var(--switch-label-inverted-color);
58
+ } .switch__hint_u8wl7 {
59
+ color: var(--switch-hint-inverted-color);
60
+ } .switch__checked_u8wl7 .switch__switch_u8wl7 {
61
+ background-color: var(--switch-checked-bg-inverted-color)
62
+ } .switch__checked_u8wl7 .switch__switch_u8wl7:hover {
63
+ background-color: var(--switch-checked-hover-bg-inverted-color);
64
+ } .switch__disabled_u8wl7 .switch__label_u8wl7 {
65
+ color: var(--switch-disabled-inverted-color);
66
+ } .switch__disabled_u8wl7 .switch__hint_u8wl7 {
67
+ color: var(--switch-disabled-inverted-color);
68
+ } .switch__disabled_u8wl7 .switch__switch_u8wl7 {
69
+ background-color: var(--switch-disabled-bg-inverted-color)
70
+ } .switch__disabled_u8wl7 .switch__switch_u8wl7:before {
71
+ background-color: var(--switch-icon-disabled-inverted-color);
72
+ } .switch__disabled_u8wl7.switch__checked_u8wl7 .switch__switch_u8wl7 {
73
+ background-color: var(--switch-disabled-checked-bg-inverted-color);
74
+ }
@@ -0,0 +1,2 @@
1
+ type Colors = 'default' | 'inverted';
2
+ export { Colors };
@@ -0,0 +1 @@
1
+
@@ -1,6 +1,7 @@
1
1
  /// <reference types="react" />
2
2
  import React from 'react';
3
3
  import { ChangeEvent, InputHTMLAttributes, ReactNode } from "react";
4
+ import { Colors } from "./types/colors";
4
5
  type Align = 'start' | 'center';
5
6
  type SwitchProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'hint' | 'onChange' | 'disabled' | 'enterKeyHint'> & {
6
7
  /**
@@ -56,6 +57,11 @@ type SwitchProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'hint' |
56
57
  * Идентификатор для систем автоматизированного тестирования
57
58
  */
58
59
  dataTestId?: string;
60
+ /**
61
+ * Набор цветов для компонента
62
+ * @default default
63
+ */
64
+ colors?: Colors;
59
65
  };
60
66
  declare const Switch: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "hint" | "onChange" | "disabled" | "enterKeyHint"> & {
61
67
  /**
@@ -111,5 +117,10 @@ declare const Switch: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttrib
111
117
  * Идентификатор для систем автоматизированного тестирования
112
118
  */
113
119
  dataTestId?: string | undefined;
120
+ /**
121
+ * Набор цветов для компонента
122
+ * @default default
123
+ */
124
+ colors?: Colors | undefined;
114
125
  } & React.RefAttributes<HTMLLabelElement>>;
115
126
  export { SwitchProps, Switch };
@@ -3,9 +3,15 @@ import mergeRefs from 'react-merge-refs';
3
3
  import cn from 'classnames';
4
4
  import { dom } from '@alfalab/core-components-shared/moderncssm';
5
5
  import { useFocus } from '@alfalab/hooks';
6
+ import defaultStyles from './default.module.css';
6
7
  import styles from './index.module.css';
8
+ import invertedStyles from './inverted.module.css';
7
9
 
8
- const Switch = forwardRef(({ reversed = false, checked = false, align = 'start', addons, block, disabled, inactive, error, label, hint, name, value, className, onChange, dataTestId, ...restProps }, ref) => {
10
+ const colorStyles = {
11
+ default: defaultStyles,
12
+ inverted: invertedStyles,
13
+ };
14
+ const Switch = forwardRef(({ reversed = false, checked = false, align = 'start', addons, block, disabled, inactive, error, label, hint, name, value, className, onChange, dataTestId, colors = 'default', ...restProps }, ref) => {
9
15
  const labelRef = useRef(null);
10
16
  const [focused] = useFocus(labelRef, 'keyboard');
11
17
  const handleChange = (e) => {
@@ -16,16 +22,18 @@ const Switch = forwardRef(({ reversed = false, checked = false, align = 'start',
16
22
  const errorMessage = typeof error === 'boolean' ? '' : error;
17
23
  return (React.createElement("label", { className: cn(styles.component, styles[align], className, {
18
24
  [styles.disabled]: disabled || inactive,
25
+ [colorStyles[colors].disabled]: disabled || inactive,
19
26
  [styles.checked]: checked,
27
+ [colorStyles[colors].checked]: checked,
20
28
  [styles.reversed]: reversed,
21
29
  [styles.focused]: focused,
22
30
  [styles.block]: block,
23
31
  }), ref: mergeRefs([labelRef, ref]) },
24
32
  React.createElement("input", { type: 'checkbox', onChange: handleChange, disabled: disabled || inactive, checked: checked, name: name, value: value, "data-test-id": dataTestId, ...restProps }),
25
- React.createElement("span", { className: styles.switch }),
33
+ React.createElement("span", { className: cn(styles.switch, colorStyles[colors].switch) }),
26
34
  (label || hint || errorMessage) && (React.createElement("span", { className: styles.content },
27
- label && React.createElement("span", { className: styles.label }, label),
28
- hint && !errorMessage && React.createElement("span", { className: styles.hint }, hint),
35
+ label && (React.createElement("span", { className: cn(styles.label, colorStyles[colors].label) }, label)),
36
+ hint && !errorMessage && (React.createElement("span", { className: cn(styles.hint, colorStyles[colors].hint) }, hint)),
29
37
  errorMessage && (React.createElement("span", { className: styles.errorMessage, role: 'alert' }, errorMessage)))),
30
38
  addons && (
31
39
  // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
@@ -0,0 +1,58 @@
1
+ /* */
2
+ :root {
3
+ --switch-label-color: var(--color-light-text-primary);
4
+ --switch-hint-color: var(--color-light-text-secondary);
5
+ --switch-bg-color: var(--color-light-neutral-translucent-700);
6
+
7
+ /* inverted */
8
+
9
+ /* hover */
10
+ --switch-hover-bg-color: var(--color-light-neutral-translucent-700-hover);
11
+
12
+ /* checked */
13
+ --switch-checked-bg-color: var(--color-light-status-positive);
14
+ --switch-checked-hover-bg-color: var(--color-light-status-positive-hover);
15
+
16
+ /* disabled */
17
+ --switch-disabled-color: var(--color-light-text-secondary);
18
+ --switch-disabled-bg-color: var(--color-light-neutral-translucent-200);
19
+
20
+ /* disabled checked */
21
+ --switch-disabled-checked-bg-color: var(--switch-disabled-bg-color);
22
+
23
+ /* icon */
24
+ --switch-icon-disabled-color: var(--color-light-neutral-translucent-500);
25
+ }
26
+ .switch {
27
+ background-color: var(--switch-bg-color)
28
+ }
29
+ .switch:hover {
30
+ background-color: var(--switch-hover-bg-color);
31
+ }
32
+ .label {
33
+ color: var(--switch-label-color);
34
+ }
35
+ .hint {
36
+ color: var(--switch-hint-color);
37
+ }
38
+ .checked .switch {
39
+ background-color: var(--switch-checked-bg-color)
40
+ }
41
+ .checked .switch:hover {
42
+ background-color: var(--switch-checked-hover-bg-color);
43
+ }
44
+ .disabled .label {
45
+ color: var(--switch-disabled-color);
46
+ }
47
+ .disabled .hint {
48
+ color: var(--switch-disabled-color);
49
+ }
50
+ .disabled .switch {
51
+ background-color: var(--switch-disabled-bg-color)
52
+ }
53
+ .disabled .switch:before {
54
+ background-color: var(--switch-icon-disabled-color);
55
+ }
56
+ .disabled.checked .switch {
57
+ background-color: var(--switch-disabled-checked-bg-color);
58
+ }