@rescui/toggle 0.2.5 → 0.3.1

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 (7) hide show
  1. package/lib/index.css +104 -264
  2. package/lib/public-api.p.css +199 -0
  3. package/lib/public-api.pcss +199 -0
  4. package/lib/toggle-control.js +4 -3
  5. package/lib/toggle.js +2 -2
  6. package/lib/toggle.p.module.css.js +10 -10
  7. package/package.json +8 -7
package/lib/index.css CHANGED
@@ -1,4 +1,66 @@
1
- ._main_ahrofk_64{
1
+ ._themeLight_12pt9kp_6{
2
+ --rs-theme-dark:0;
3
+ }
4
+ ._themeDark_12pt9kp_9{
5
+ --rs-theme-dark:1;
6
+ }
7
+ ._sizeS_12pt9kp_13{
8
+ --_rs-toggle-width:20px;
9
+ --_rs-toggle-height:12px;
10
+ --_rs-toggle-shadow:3px;
11
+ }
12
+ ._sizeM_12pt9kp_16{
13
+ --_rs-toggle-width:28px;
14
+ --_rs-toggle-height:16px;
15
+ --_rs-toggle-shadow:3px;
16
+ }
17
+ ._sizeL_12pt9kp_19{
18
+ --_rs-toggle-width:32px;
19
+ --_rs-toggle-height:18px;
20
+ --_rs-toggle-shadow:4px;
21
+ }
22
+ ._classic_12pt9kp_23{
23
+ --_rs-toggle-hover-slider-box-shadow-color:var(--_rs-color-primary-t-fog);
24
+ --_rs-toggle-checked-slider-background-color:var(--_rs-color-primary);
25
+ }
26
+ ._rock_12pt9kp_26{
27
+ --_rs-toggle-hover-slider-box-shadow-color:rgba(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227), 0.2);
28
+ --_rs-toggle-checked-slider-background-color:rgb(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227));
29
+ }
30
+ ._main_12pt9kp_30{
31
+ --_rs-toggle-circle-border:2px;
32
+
33
+ --_rs-theme-dark:var(
34
+ --_rs-internal-force-theme-dark-consult-rescui-before-using,
35
+ var(--rs-theme-dark, 0)
36
+ );
37
+
38
+ --_rs-theme-flip:var(--rs-theme-flip, 0);
39
+
40
+ --_rs-theme-dark-coefficient:calc(var(--_rs-theme-dark)*(1 - var(--_rs-theme-flip)) + var(--_rs-theme-flip)*(1 - var(--_rs-theme-dark)));
41
+
42
+ --_rs-theme-light-coefficient:calc(1 - var(--_rs-theme-dark-coefficient));
43
+ }
44
+ @supports (color: color-mix(in srgb, #fff 50%, #000 50%)){
45
+ ._main_12pt9kp_30{
46
+ --_rs-color-primary:color-mix(in srgb, var(--rs-color-primary-light-theme, #6B57FF) calc(100%*var(--_rs-theme-light-coefficient, 1)), var(--rs-color-primary-dark-theme, #8473FF) calc(100%*var(--_rs-theme-dark-coefficient, 0)));
47
+ --_rs-color-primary-dim:color-mix(in srgb, var(--rs-color-primary-dim-light-theme, #8979ff) calc(100%*var(--_rs-theme-light-coefficient, 1)), var(--rs-color-primary-dim-dark-theme, #6f61d2) calc(100%*var(--_rs-theme-dark-coefficient, 0)));
48
+ --_rs-color-primary-fog:color-mix(in srgb, var(--rs-color-primary-fog-light-theme, #e1ddff) calc(100%*var(--_rs-theme-light-coefficient, 1)), var(--rs-color-primary-fog-dark-theme, #2e2b49) calc(100%*var(--_rs-theme-dark-coefficient, 0)));
49
+ --_rs-color-primary-t-dim:color-mix(in srgb, var(--rs-color-primary-t-dim-light-theme, rgba(107, 87, 255, 0.8)) calc(100%*var(--_rs-theme-light-coefficient, 1)), var(--rs-color-primary-t-dim-dark-theme, rgba(132, 115, 255,0.8)) calc(100%*var(--_rs-theme-dark-coefficient, 0)));
50
+ --_rs-color-primary-t-fog:color-mix(in srgb, var(--rs-color-primary-t-fog-light-theme, rgba(107, 87, 255,0.2)) calc(100%*var(--_rs-theme-light-coefficient, 1)), var(--rs-color-primary-t-fog-dark-theme, rgba(132, 115, 255,0.3)) calc(100%*var(--_rs-theme-dark-coefficient, 0)));
51
+ }
52
+ }
53
+ @supports not (color: color-mix(in srgb, #fff 50%, #000 50%)){
54
+ ._main_12pt9kp_30{
55
+ --_rs-color-primary:rgb(calc(var(--_rs-theme-light-coefficient, 1)*107 + var(--_rs-theme-dark-coefficient, 0)*132), calc(var(--_rs-theme-light-coefficient, 1)*87 + var(--_rs-theme-dark-coefficient, 0)*115), 255);
56
+ --_rs-color-primary-dim:rgb(calc(var(--_rs-theme-light-coefficient, 1)*137 + var(--_rs-theme-dark-coefficient, 0)*111), calc(var(--_rs-theme-light-coefficient, 1)*121 + var(--_rs-theme-dark-coefficient, 0)*97), calc(var(--_rs-theme-light-coefficient, 1)*255 + var(--_rs-theme-dark-coefficient, 0)*210));
57
+ --_rs-color-primary-fog:rgb(calc(var(--_rs-theme-light-coefficient, 1)*225 + var(--_rs-theme-dark-coefficient, 0)*46), calc(var(--_rs-theme-light-coefficient, 1)*221 + var(--_rs-theme-dark-coefficient, 0)*43), calc(var(--_rs-theme-light-coefficient, 1)*255 + var(--_rs-theme-dark-coefficient, 0)*73));
58
+ --_rs-color-primary-t-dim:rgba(calc(var(--_rs-theme-light-coefficient, 1)*107 + var(--_rs-theme-dark-coefficient, 0)*132), calc(var(--_rs-theme-light-coefficient, 1)*87 + var(--_rs-theme-dark-coefficient, 0)*115), 255, 0.8);
59
+ --_rs-color-primary-t-fog:rgba(calc(var(--_rs-theme-light-coefficient, 1)*107 + var(--_rs-theme-dark-coefficient, 0)*132), calc(var(--_rs-theme-light-coefficient, 1)*87 + var(--_rs-theme-dark-coefficient, 0)*115), 255, calc(var(--_rs-theme-light-coefficient, 1)*0.2 + var(--_rs-theme-dark-coefficient, 0)*0.3));
60
+ }
61
+ }
62
+ ._main_12pt9kp_30 {
63
+
2
64
  position:relative;
3
65
 
4
66
  display:-webkit-inline-box;
@@ -9,10 +71,12 @@
9
71
  -ms-flex-item-align:center;
10
72
  align-self:center;
11
73
 
74
+ width:calc(var(--_rs-toggle-width) + var(--_rs-toggle-shadow)*2);
75
+ height:calc(var(--_rs-toggle-height) + var(--_rs-toggle-shadow)*2);
76
+
12
77
  cursor:pointer;
13
78
  }
14
-
15
- ._main_ahrofk_64 input{
79
+ ._main_12pt9kp_30 input{
16
80
  position:absolute;
17
81
  z-index:-1;
18
82
 
@@ -22,21 +86,27 @@
22
86
 
23
87
  pointer-events:none;
24
88
  }
25
-
26
- ._main_ahrofk_64._disabled_ahrofk_42{
89
+ ._main_12pt9kp_30._disabled_12pt9kp_57{
27
90
  cursor:default;
28
91
  pointer-events:none;
29
92
  }
30
- ._slider_ahrofk_19{
93
+ ._slider_12pt9kp_63{
31
94
  position:absolute;
95
+ top:var(--_rs-toggle-shadow);
96
+ left:var(--_rs-toggle-shadow);
97
+
98
+ width:var(--_rs-toggle-width);
99
+ height:var(--_rs-toggle-height);
32
100
 
33
101
  border-radius:34px;
34
102
 
103
+ background-color:#8C8C8E;
104
+
35
105
  -webkit-transition:background-color 200ms;
36
106
 
37
107
  transition:background-color 200ms;
38
108
  }
39
- ._slider_ahrofk_19:after{
109
+ ._slider_12pt9kp_63:after{
40
110
  position:absolute;
41
111
  top:0;
42
112
  left:0;
@@ -44,15 +114,16 @@
44
114
  -webkit-box-sizing:border-box;
45
115
 
46
116
  box-sizing:border-box;
117
+ width:var(--_rs-toggle-height);
118
+ height:var(--_rs-toggle-height);
47
119
 
48
- border:2px solid #8C8C8E;
49
-
50
- border:2px solid var(--rs-color-grey-50, #8C8C8E);
51
-
120
+ border:var(--_rs-toggle-circle-border) solid #8C8C8E;
52
121
  border-radius:50%;
53
122
 
54
123
  content:'';
55
124
 
125
+ background-color:rgb(calc(255 - var(--_rs-theme-dark-coefficient, 0)*230), calc(255 - var(--_rs-theme-dark-coefficient, 0)*230), calc(255 - var(--_rs-theme-dark-coefficient, 0)*227));
126
+
56
127
  -webkit-transition:height 200ms, width 200ms, border-color 200ms, -webkit-transform 200ms;
57
128
 
58
129
  transition:height 200ms, width 200ms, border-color 200ms, -webkit-transform 200ms;
@@ -63,270 +134,39 @@
63
134
  -webkit-transform:translate(0);
64
135
  transform:translate(0);
65
136
  }
66
- ._themeLight_ahrofk_42 ._slider_ahrofk_19{
67
- background-color:#8C8C8E;
68
- background-color:var(--rs-color-grey-50, #8C8C8E);
69
- }
70
- ._themeLight_ahrofk_42 ._slider_ahrofk_19:after{
71
- background-color:#FFFFFF;
72
- background-color:var(--rs-color-white, #FFFFFF);
73
- }
74
- ._themeDark_ahrofk_45 ._slider_ahrofk_19{
75
- background-color:#8C8C8E;
76
- background-color:var(--rs-color-grey-50, #8C8C8E);
77
- }
78
- ._themeDark_ahrofk_45 ._slider_ahrofk_19:after{
79
- background-color:#19191C;
80
- background-color:var(--rs-color-black, #19191C);
81
- }
82
- ._themeLight_ahrofk_42._disabled_ahrofk_42 ._slider_ahrofk_19{
83
- background:#D1D1D2;
84
- background:var(--rs-color-grey-20, #D1D1D2);
85
- }
86
- ._themeLight_ahrofk_42._disabled_ahrofk_42 ._slider_ahrofk_19:after{
87
- border-color:#D1D1D2;
88
- border-color:var(--rs-color-grey-20, #D1D1D2);
89
-
90
- background:#E8E8E8;
91
-
92
- background:var(--rs-color-grey-10, #E8E8E8);
93
- }
94
- ._themeDark_ahrofk_45._disabled_ahrofk_42 ._slider_ahrofk_19{
95
- background:#474749;
96
- background:var(--rs-color-grey-80, #474749);
97
- }
98
- ._themeDark_ahrofk_45._disabled_ahrofk_42 ._slider_ahrofk_19:after{
99
- border-color:#474749;
100
- border-color:var(--rs-color-grey-80, #474749);
101
-
102
- background:#303033;
103
-
104
- background:var(--rs-color-grey-90, #303033);
105
- }
106
- ._themeLight_ahrofk_42._classic_ahrofk_42:not(._disabled_ahrofk_42) input:checked + ._slider_ahrofk_19{
107
- background-color:#6B57FF;
108
- background-color:var(--rs-color-primary-light-theme, #6B57FF);
109
- }
110
- ._themeLight_ahrofk_42._classic_ahrofk_42:not(._disabled_ahrofk_42) input:checked + ._slider_ahrofk_19:after{
111
- border-color:#6B57FF;
112
- border-color:var(--rs-color-primary-light-theme, #6B57FF);
113
- }
114
- ._themeDark_ahrofk_45._classic_ahrofk_42:not(._disabled_ahrofk_42) input:checked + ._slider_ahrofk_19{
115
- background-color:#8473FF;
116
- background-color:var(--rs-color-primary-dark-theme, #8473FF);
117
- }
118
- ._themeDark_ahrofk_45._classic_ahrofk_42:not(._disabled_ahrofk_42) input:checked + ._slider_ahrofk_19:after{
119
- border-color:#8473FF;
120
- border-color:var(--rs-color-primary-dark-theme, #8473FF);
121
- }
122
- ._themeLight_ahrofk_42._rock_ahrofk_49:not(._disabled_ahrofk_42) input:checked + ._slider_ahrofk_19{
123
- background-color:#19191C;
124
- background-color:var(--rs-color-black, #19191C);
125
- }
126
- ._themeLight_ahrofk_42._rock_ahrofk_49:not(._disabled_ahrofk_42) input:checked + ._slider_ahrofk_19:after{
127
- border-color:#19191C;
128
- border-color:var(--rs-color-black, #19191C);
129
- }
130
- ._themeDark_ahrofk_45._rock_ahrofk_49:not(._disabled_ahrofk_42) input:checked + ._slider_ahrofk_19{
131
- background-color:#FFFFFF;
132
- background-color:var(--rs-color-white, #FFFFFF);
137
+ ._disabled_12pt9kp_57 ._slider_12pt9kp_63{
138
+ background:rgb(calc(209 - var(--_rs-theme-dark-coefficient, 0)*138), calc(209 - var(--_rs-theme-dark-coefficient, 0)*138), calc(210 - var(--_rs-theme-dark-coefficient, 0)*137));
133
139
  }
134
- ._themeDark_ahrofk_45._rock_ahrofk_49:not(._disabled_ahrofk_42) input:checked + ._slider_ahrofk_19:after{
135
- border-color:#FFFFFF;
136
- border-color:var(--rs-color-white, #FFFFFF);
137
- }
138
- ._sizeS_ahrofk_175{
139
- width:26px;
140
- height:18px;
141
- }
142
- ._sizeS_ahrofk_175 ._slider_ahrofk_19{
143
- top:3px;
144
- left:3px;
140
+ ._disabled_12pt9kp_57 ._slider_12pt9kp_63:after{
141
+ border-color:rgb(calc(209 - var(--_rs-theme-dark-coefficient, 0)*138), calc(209 - var(--_rs-theme-dark-coefficient, 0)*138), calc(210 - var(--_rs-theme-dark-coefficient, 0)*137));
145
142
 
146
- width:20px;
147
- height:12px;
148
- }
149
- ._sizeS_ahrofk_175 ._slider_ahrofk_19:after{
150
- width:12px;
151
- height:12px;
143
+ background:rgb(calc(232 - var(--_rs-theme-dark-coefficient, 0)*184), calc(232 - var(--_rs-theme-dark-coefficient, 0)*184), calc(232 - var(--_rs-theme-dark-coefficient, 0)*181));
152
144
  }
153
- ._sizeS_ahrofk_175 input:checked + ._slider_ahrofk_19:after{
154
- width:14px;
155
- height:14px;
145
+ input:checked + ._slider_12pt9kp_63:after{
146
+ width:calc(var(--_rs-toggle-height) + var(--_rs-toggle-circle-border));
147
+ height:calc(var(--_rs-toggle-height) + var(--_rs-toggle-circle-border));
156
148
 
157
149
  -webkit-transform:translate(
158
- 7px,
159
- -1px
150
+ calc(var(--_rs-toggle-width) - var(--_rs-toggle-height) - var(--_rs-toggle-circle-border)/2),
151
+ calc(var(--_rs-toggle-circle-border)/-2)
160
152
  );
161
153
 
162
154
  transform:translate(
163
- 7px,
164
- -1px
155
+ calc(var(--_rs-toggle-width) - var(--_rs-toggle-height) - var(--_rs-toggle-circle-border)/2),
156
+ calc(var(--_rs-toggle-circle-border)/-2)
165
157
  );
166
158
  }
167
- ._sizeS_ahrofk_175._themeLight_ahrofk_42._classic_ahrofk_42:not(._disabled_ahrofk_42) input:hover + ._slider_ahrofk_19{
168
- -webkit-box-shadow:rgba(107, 87, 255,0.2) 0 0 0 3px;
169
- -webkit-box-shadow:var(--rs-color-primary-t-fog-light-theme, rgba(107, 87, 255,0.2)) 0 0 0 3px;
170
- box-shadow:rgba(107, 87, 255,0.2) 0 0 0 3px;
171
- box-shadow:var(--rs-color-primary-t-fog-light-theme, rgba(107, 87, 255,0.2)) 0 0 0 3px;
172
- }
173
- ._sizeS_ahrofk_175._themeDark_ahrofk_45._classic_ahrofk_42:not(._disabled_ahrofk_42) input:hover + ._slider_ahrofk_19{
174
- -webkit-box-shadow:rgba(132, 115, 255,0.3) 0 0 0 3px;
175
- -webkit-box-shadow:var(--rs-color-primary-t-fog-dark-theme, rgba(132, 115, 255,0.3)) 0 0 0 3px;
176
- box-shadow:rgba(132, 115, 255,0.3) 0 0 0 3px;
177
- box-shadow:var(--rs-color-primary-t-fog-dark-theme, rgba(132, 115, 255,0.3)) 0 0 0 3px;
159
+ ._main_12pt9kp_30:not(._disabled_12pt9kp_57) input:hover + ._slider_12pt9kp_63{
160
+ -webkit-box-shadow:var(--_rs-toggle-hover-slider-box-shadow-color) 0 0 0 var(--_rs-toggle-shadow);
161
+ box-shadow:var(--_rs-toggle-hover-slider-box-shadow-color) 0 0 0 var(--_rs-toggle-shadow);
178
162
  }
179
- ._sizeS_ahrofk_175._themeLight_ahrofk_42._rock_ahrofk_49:not(._disabled_ahrofk_42) input:hover + ._slider_ahrofk_19{
180
- -webkit-box-shadow:rgba(25,25,28,0.2) 0 0 0 3px;
181
- -webkit-box-shadow:var(--rs-color-black-t20, rgba(25,25,28,0.2)) 0 0 0 3px;
182
- box-shadow:rgba(25,25,28,0.2) 0 0 0 3px;
183
- box-shadow:var(--rs-color-black-t20, rgba(25,25,28,0.2)) 0 0 0 3px;
163
+ ._main_12pt9kp_30:not(._disabled_12pt9kp_57) input:checked + ._slider_12pt9kp_63{
164
+ background-color:var(--_rs-toggle-checked-slider-background-color);
184
165
  }
185
- ._sizeS_ahrofk_175._themeDark_ahrofk_45._rock_ahrofk_49:not(._disabled_ahrofk_42) input:hover + ._slider_ahrofk_19{
186
- -webkit-box-shadow:rgba(255,255,255,0.2) 0 0 0 3px;
187
- -webkit-box-shadow:var(--rs-color-white-t20, rgba(255,255,255,0.2)) 0 0 0 3px;
188
- box-shadow:rgba(255,255,255,0.2) 0 0 0 3px;
189
- box-shadow:var(--rs-color-white-t20, rgba(255,255,255,0.2)) 0 0 0 3px;
190
- }
191
- ._sizeS_ahrofk_175._themeLight_ahrofk_42:not(._disabled_ahrofk_42) input:focus[data-focus-method='key'] + ._slider_ahrofk_19{
192
- -webkit-box-shadow:0 0 0 3px rgba(107, 87, 255, 0.8);
193
- -webkit-box-shadow:0 0 0 3px var(--rs-color-primary-t-dim-light-theme, rgba(107, 87, 255, 0.8));
194
- box-shadow:0 0 0 3px rgba(107, 87, 255, 0.8);
195
- box-shadow:0 0 0 3px var(--rs-color-primary-t-dim-light-theme, rgba(107, 87, 255, 0.8));
196
- }
197
- ._sizeS_ahrofk_175._themeDark_ahrofk_45:not(._disabled_ahrofk_42) input:focus[data-focus-method='key'] + ._slider_ahrofk_19{
198
- -webkit-box-shadow:0 0 0 3px rgba(132, 115, 255,0.8);
199
- -webkit-box-shadow:0 0 0 3px var(--rs-color-primary-t-dim-dark-theme, rgba(132, 115, 255,0.8));
200
- box-shadow:0 0 0 3px rgba(132, 115, 255,0.8);
201
- box-shadow:0 0 0 3px var(--rs-color-primary-t-dim-dark-theme, rgba(132, 115, 255,0.8));
202
- }
203
- ._sizeM_ahrofk_180{
204
- width:34px;
205
- height:22px;
206
- }
207
- ._sizeM_ahrofk_180 ._slider_ahrofk_19{
208
- top:3px;
209
- left:3px;
210
-
211
- width:28px;
212
- height:16px;
213
- }
214
- ._sizeM_ahrofk_180 ._slider_ahrofk_19:after{
215
- width:16px;
216
- height:16px;
166
+ ._main_12pt9kp_30:not(._disabled_12pt9kp_57) input:checked + ._slider_12pt9kp_63:after{
167
+ border-color:var(--_rs-toggle-checked-slider-background-color);
217
168
  }
218
- ._sizeM_ahrofk_180 input:checked + ._slider_ahrofk_19:after{
219
- width:18px;
220
- height:18px;
221
-
222
- -webkit-transform:translate(
223
- 11px,
224
- -1px
225
- );
226
-
227
- transform:translate(
228
- 11px,
229
- -1px
230
- );
231
- }
232
- ._sizeM_ahrofk_180._themeLight_ahrofk_42._classic_ahrofk_42:not(._disabled_ahrofk_42) input:hover + ._slider_ahrofk_19{
233
- -webkit-box-shadow:rgba(107, 87, 255,0.2) 0 0 0 3px;
234
- -webkit-box-shadow:var(--rs-color-primary-t-fog-light-theme, rgba(107, 87, 255,0.2)) 0 0 0 3px;
235
- box-shadow:rgba(107, 87, 255,0.2) 0 0 0 3px;
236
- box-shadow:var(--rs-color-primary-t-fog-light-theme, rgba(107, 87, 255,0.2)) 0 0 0 3px;
237
- }
238
- ._sizeM_ahrofk_180._themeDark_ahrofk_45._classic_ahrofk_42:not(._disabled_ahrofk_42) input:hover + ._slider_ahrofk_19{
239
- -webkit-box-shadow:rgba(132, 115, 255,0.3) 0 0 0 3px;
240
- -webkit-box-shadow:var(--rs-color-primary-t-fog-dark-theme, rgba(132, 115, 255,0.3)) 0 0 0 3px;
241
- box-shadow:rgba(132, 115, 255,0.3) 0 0 0 3px;
242
- box-shadow:var(--rs-color-primary-t-fog-dark-theme, rgba(132, 115, 255,0.3)) 0 0 0 3px;
243
- }
244
- ._sizeM_ahrofk_180._themeLight_ahrofk_42._rock_ahrofk_49:not(._disabled_ahrofk_42) input:hover + ._slider_ahrofk_19{
245
- -webkit-box-shadow:rgba(25,25,28,0.2) 0 0 0 3px;
246
- -webkit-box-shadow:var(--rs-color-black-t20, rgba(25,25,28,0.2)) 0 0 0 3px;
247
- box-shadow:rgba(25,25,28,0.2) 0 0 0 3px;
248
- box-shadow:var(--rs-color-black-t20, rgba(25,25,28,0.2)) 0 0 0 3px;
249
- }
250
- ._sizeM_ahrofk_180._themeDark_ahrofk_45._rock_ahrofk_49:not(._disabled_ahrofk_42) input:hover + ._slider_ahrofk_19{
251
- -webkit-box-shadow:rgba(255,255,255,0.2) 0 0 0 3px;
252
- -webkit-box-shadow:var(--rs-color-white-t20, rgba(255,255,255,0.2)) 0 0 0 3px;
253
- box-shadow:rgba(255,255,255,0.2) 0 0 0 3px;
254
- box-shadow:var(--rs-color-white-t20, rgba(255,255,255,0.2)) 0 0 0 3px;
255
- }
256
- ._sizeM_ahrofk_180._themeLight_ahrofk_42:not(._disabled_ahrofk_42) input:focus[data-focus-method='key'] + ._slider_ahrofk_19{
257
- -webkit-box-shadow:0 0 0 3px rgba(107, 87, 255, 0.8);
258
- -webkit-box-shadow:0 0 0 3px var(--rs-color-primary-t-dim-light-theme, rgba(107, 87, 255, 0.8));
259
- box-shadow:0 0 0 3px rgba(107, 87, 255, 0.8);
260
- box-shadow:0 0 0 3px var(--rs-color-primary-t-dim-light-theme, rgba(107, 87, 255, 0.8));
261
- }
262
- ._sizeM_ahrofk_180._themeDark_ahrofk_45:not(._disabled_ahrofk_42) input:focus[data-focus-method='key'] + ._slider_ahrofk_19{
263
- -webkit-box-shadow:0 0 0 3px rgba(132, 115, 255,0.8);
264
- -webkit-box-shadow:0 0 0 3px var(--rs-color-primary-t-dim-dark-theme, rgba(132, 115, 255,0.8));
265
- box-shadow:0 0 0 3px rgba(132, 115, 255,0.8);
266
- box-shadow:0 0 0 3px var(--rs-color-primary-t-dim-dark-theme, rgba(132, 115, 255,0.8));
267
- }
268
- ._sizeL_ahrofk_185{
269
- width:40px;
270
- height:26px;
271
- }
272
- ._sizeL_ahrofk_185 ._slider_ahrofk_19{
273
- top:4px;
274
- left:4px;
275
-
276
- width:32px;
277
- height:18px;
278
- }
279
- ._sizeL_ahrofk_185 ._slider_ahrofk_19:after{
280
- width:18px;
281
- height:18px;
282
- }
283
- ._sizeL_ahrofk_185 input:checked + ._slider_ahrofk_19:after{
284
- width:20px;
285
- height:20px;
286
-
287
- -webkit-transform:translate(
288
- 13px,
289
- -1px
290
- );
291
-
292
- transform:translate(
293
- 13px,
294
- -1px
295
- );
296
- }
297
- ._sizeL_ahrofk_185._themeLight_ahrofk_42._classic_ahrofk_42:not(._disabled_ahrofk_42) input:hover + ._slider_ahrofk_19{
298
- -webkit-box-shadow:rgba(107, 87, 255,0.2) 0 0 0 4px;
299
- -webkit-box-shadow:var(--rs-color-primary-t-fog-light-theme, rgba(107, 87, 255,0.2)) 0 0 0 4px;
300
- box-shadow:rgba(107, 87, 255,0.2) 0 0 0 4px;
301
- box-shadow:var(--rs-color-primary-t-fog-light-theme, rgba(107, 87, 255,0.2)) 0 0 0 4px;
302
- }
303
- ._sizeL_ahrofk_185._themeDark_ahrofk_45._classic_ahrofk_42:not(._disabled_ahrofk_42) input:hover + ._slider_ahrofk_19{
304
- -webkit-box-shadow:rgba(132, 115, 255,0.3) 0 0 0 4px;
305
- -webkit-box-shadow:var(--rs-color-primary-t-fog-dark-theme, rgba(132, 115, 255,0.3)) 0 0 0 4px;
306
- box-shadow:rgba(132, 115, 255,0.3) 0 0 0 4px;
307
- box-shadow:var(--rs-color-primary-t-fog-dark-theme, rgba(132, 115, 255,0.3)) 0 0 0 4px;
308
- }
309
- ._sizeL_ahrofk_185._themeLight_ahrofk_42._rock_ahrofk_49:not(._disabled_ahrofk_42) input:hover + ._slider_ahrofk_19{
310
- -webkit-box-shadow:rgba(25,25,28,0.2) 0 0 0 4px;
311
- -webkit-box-shadow:var(--rs-color-black-t20, rgba(25,25,28,0.2)) 0 0 0 4px;
312
- box-shadow:rgba(25,25,28,0.2) 0 0 0 4px;
313
- box-shadow:var(--rs-color-black-t20, rgba(25,25,28,0.2)) 0 0 0 4px;
314
- }
315
- ._sizeL_ahrofk_185._themeDark_ahrofk_45._rock_ahrofk_49:not(._disabled_ahrofk_42) input:hover + ._slider_ahrofk_19{
316
- -webkit-box-shadow:rgba(255,255,255,0.2) 0 0 0 4px;
317
- -webkit-box-shadow:var(--rs-color-white-t20, rgba(255,255,255,0.2)) 0 0 0 4px;
318
- box-shadow:rgba(255,255,255,0.2) 0 0 0 4px;
319
- box-shadow:var(--rs-color-white-t20, rgba(255,255,255,0.2)) 0 0 0 4px;
320
- }
321
- ._sizeL_ahrofk_185._themeLight_ahrofk_42:not(._disabled_ahrofk_42) input:focus[data-focus-method='key'] + ._slider_ahrofk_19{
322
- -webkit-box-shadow:0 0 0 4px rgba(107, 87, 255, 0.8);
323
- -webkit-box-shadow:0 0 0 4px var(--rs-color-primary-t-dim-light-theme, rgba(107, 87, 255, 0.8));
324
- box-shadow:0 0 0 4px rgba(107, 87, 255, 0.8);
325
- box-shadow:0 0 0 4px var(--rs-color-primary-t-dim-light-theme, rgba(107, 87, 255, 0.8));
326
- }
327
- ._sizeL_ahrofk_185._themeDark_ahrofk_45:not(._disabled_ahrofk_42) input:focus[data-focus-method='key'] + ._slider_ahrofk_19{
328
- -webkit-box-shadow:0 0 0 4px rgba(132, 115, 255,0.8);
329
- -webkit-box-shadow:0 0 0 4px var(--rs-color-primary-t-dim-dark-theme, rgba(132, 115, 255,0.8));
330
- box-shadow:0 0 0 4px rgba(132, 115, 255,0.8);
331
- box-shadow:0 0 0 4px var(--rs-color-primary-t-dim-dark-theme, rgba(132, 115, 255,0.8));
169
+ ._main_12pt9kp_30:not(._disabled_12pt9kp_57) input:focus[data-focus-method='key'] + ._slider_12pt9kp_63{
170
+ -webkit-box-shadow:0 0 0 var(--_rs-toggle-shadow) var(--_rs-color-primary-t-dim);
171
+ box-shadow:0 0 0 var(--_rs-toggle-shadow) var(--_rs-color-primary-t-dim);
332
172
  }
package/lib/public-api.p.css ADDED
@@ -0,0 +1,199 @@
1
+ @define-mixin rs-toggle-size-s{
2
+ & [data-rs-internal="toggle"]{
3
+ --_rs-toggle-width:20px;
4
+ --_rs-toggle-height:12px;
5
+ --_rs-toggle-shadow:3px;
6
+ }
7
+ &[class][class]{
8
+ --_rs-menu-mi-icon-offset:8px;
9
+ --_rs-menu-mi-vertical-padding:6px;
10
+ --_rs-menu-mi-horizontal-padding:8px;
11
+ --_rs-typography-letter-spacing:0.0045em;
12
+ --_rs-typography-text-transform:initial;
13
+ --_rs-typography-font-variant-numeric:initial;
14
+ --_rs-typography-font-family:var(
15
+ --rs-font-family-ui,
16
+ var(--rs-font-family-jb-sans, 'JetBrains Sans', Inter, system-ui, -apple-system,
17
+ BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
18
+ 'Droid Sans', 'Helvetica Neue', Arial, sans-serif)
19
+ );
20
+ --_rs-typography-font-size:var(--rs-text-3-font-size, 13px);
21
+ --_rs-typography-font-weight:var(
22
+ --rs-font-weight-regular,
23
+ 400
24
+ );
25
+ --_rs-typography-line-height:var(
26
+ --rs-text-3-line-height,
27
+ 20px
28
+ );
29
+ --_rs-typography-base-color:var(
30
+ --_rs-typography-hardness-color,
31
+ var(
32
+ --rs-color-average,
33
+ rgba(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227), 0.7)
34
+ )
35
+ );
36
+ --_rs-typography-text-auto-offset:8px;
37
+ --_rs-typography-ul-list-li-padding-left:28px;
38
+ --_rs-typography-ol-list-li-padding-left:21px;
39
+ --_rs-typography-list-li-margin-top-from-text:8px;
40
+ --_rs-typography-link-standalone-border-offset-from-text-base:1.15em;
41
+ --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
42
+ --_rs-typography-link-border-bottom-width-from-text:1px;
43
+ }
44
+ }
45
+ @define-mixin rs-toggle-size-m{
46
+ & [data-rs-internal="toggle"]{
47
+ --_rs-toggle-width:28px;
48
+ --_rs-toggle-height:16px;
49
+ --_rs-toggle-shadow:3px;
50
+ }
51
+ &[class][class]{
52
+ --_rs-menu-mi-icon-offset:8px;
53
+ --_rs-menu-mi-vertical-padding:8px;
54
+ --_rs-menu-mi-horizontal-padding:16px;
55
+ --_rs-typography-letter-spacing:0.0015em;
56
+ --_rs-typography-text-transform:initial;
57
+ --_rs-typography-font-variant-numeric:initial;
58
+ --_rs-typography-font-family:var(
59
+ --rs-font-family-ui,
60
+ var(--rs-font-family-jb-sans, 'JetBrains Sans', Inter, system-ui, -apple-system,
61
+ BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
62
+ 'Droid Sans', 'Helvetica Neue', Arial, sans-serif)
63
+ );
64
+ --_rs-typography-font-size:var(--rs-text-2-font-size, 16px);
65
+ --_rs-typography-font-weight:var(
66
+ --rs-font-weight-regular,
67
+ 400
68
+ );
69
+ --_rs-typography-line-height:var(
70
+ --rs-text-2-line-height,
71
+ 24px
72
+ );
73
+ --_rs-typography-base-color:var(
74
+ --_rs-typography-hardness-color,
75
+ var(
76
+ --rs-color-average,
77
+ rgba(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227), 0.7)
78
+ )
79
+ );
80
+ --_rs-typography-text-auto-offset:16px;
81
+ --_rs-typography-ul-list-li-padding-left:22px;
82
+ --_rs-typography-ol-list-li-padding-left:26px;
83
+ --_rs-typography-list-li-margin-top-from-text:16px;
84
+ --_rs-typography-link-standalone-border-offset-from-text-base:1.15em;
85
+ --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
86
+ --_rs-typography-link-border-bottom-width-from-text:1px;
87
+ }
88
+ @media screen and (max-width: 640px){
89
+ &[class][class]{
90
+ --_rs-typography-list-li-margin-top-from-text:12px;
91
+ }
92
+ }
93
+ }
94
+ @define-mixin rs-toggle-size-l{
95
+ & [data-rs-internal="toggle"]{
96
+ --_rs-toggle-width:32px;
97
+ --_rs-toggle-height:18px;
98
+ --_rs-toggle-shadow:4px;
99
+ }
100
+ &[class][class]{
101
+ --_rs-menu-mi-icon-offset:16px;
102
+ --_rs-menu-mi-vertical-padding:12px;
103
+ --_rs-menu-mi-horizontal-padding:16px;
104
+ --_rs-typography-letter-spacing:normal;
105
+ --_rs-typography-text-transform:initial;
106
+ --_rs-typography-font-variant-numeric:initial;
107
+ --_rs-typography-font-family:var(
108
+ --rs-font-family-ui,
109
+ var(--rs-font-family-jb-sans, 'JetBrains Sans', Inter, system-ui, -apple-system,
110
+ BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
111
+ 'Droid Sans', 'Helvetica Neue', Arial, sans-serif)
112
+ );
113
+ --_rs-typography-font-size:var(--rs-text-1-font-size, 20px);
114
+ --_rs-typography-font-weight:var(
115
+ --rs-font-weight-regular,
116
+ 400
117
+ );
118
+ --_rs-typography-line-height:var(
119
+ --rs-text-1-line-height,
120
+ 28px
121
+ );
122
+ --_rs-typography-base-color:var(
123
+ --_rs-typography-hardness-color,
124
+ var(
125
+ --rs-color-average,
126
+ rgba(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227), 0.7)
127
+ )
128
+ );
129
+ --_rs-typography-text-auto-offset:32px;
130
+ --_rs-typography-ul-list-li-padding-left:26px;
131
+ --_rs-typography-ol-list-li-padding-left:32px;
132
+ --_rs-typography-list-li-margin-top-from-text:24px;
133
+ --_rs-typography-link-standalone-border-offset-from-text-base:1.15em;
134
+ --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
135
+ --_rs-typography-link-border-bottom-width-from-text:1px;
136
+ }
137
+ @media screen and (max-width: 640px){
138
+ &[class][class]{
139
+ --_rs-typography-list-li-margin-top-from-text:16px;
140
+ }
141
+ }
142
+ }
143
+ @define-mixin rs-toggle-mode-classic{
144
+ & [data-rs-internal="toggle"]{
145
+ --_rs-toggle-hover-slider-box-shadow-color:var(--_rs-color-primary-t-fog);
146
+ --_rs-toggle-checked-slider-background-color:var(--_rs-color-primary);
147
+ }
148
+ }
149
+ @define-mixin rs-toggle-mode-rock{
150
+ & [data-rs-internal="toggle"]{
151
+ --_rs-toggle-hover-slider-box-shadow-color:rgba(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227), 0.2);
152
+ --_rs-toggle-checked-slider-background-color:rgb(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227));
153
+ }
154
+ }
155
+ @define-mixin rs-toggle-label-placement-left{
156
+ &[class][class]{
157
+ --_rs-menu-mi-flex-direction:row-reverse;
158
+ --_rs-menu-mi-justify-content:space-between;
159
+ }
160
+ }
161
+ @define-mixin rs-toggle-label-placement-right{
162
+ &[class][class]{
163
+ --_rs-menu-mi-flex-direction:row;
164
+ --_rs-menu-mi-justify-content:initial;
165
+ }
166
+ }
167
+ @define-mixin rs-toggle-control-size-s{
168
+ &[class]{
169
+ --_rs-toggle-width:20px;
170
+ --_rs-toggle-height:12px;
171
+ --_rs-toggle-shadow:3px;
172
+ }
173
+ }
174
+ @define-mixin rs-toggle-control-size-m{
175
+ &[class]{
176
+ --_rs-toggle-width:28px;
177
+ --_rs-toggle-height:16px;
178
+ --_rs-toggle-shadow:3px;
179
+ }
180
+ }
181
+ @define-mixin rs-toggle-control-size-l{
182
+ &[class]{
183
+ --_rs-toggle-width:32px;
184
+ --_rs-toggle-height:18px;
185
+ --_rs-toggle-shadow:4px;
186
+ }
187
+ }
188
+ @define-mixin rs-toggle-control-mode-classic{
189
+ &[class]{
190
+ --_rs-toggle-hover-slider-box-shadow-color:var(--_rs-color-primary-t-fog);
191
+ --_rs-toggle-checked-slider-background-color:var(--_rs-color-primary);
192
+ }
193
+ }
194
+ @define-mixin rs-toggle-control-mode-rock{
195
+ &[class]{
196
+ --_rs-toggle-hover-slider-box-shadow-color:rgba(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227), 0.2);
197
+ --_rs-toggle-checked-slider-background-color:rgb(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227));
198
+ }
199
+ }
package/lib/public-api.pcss ADDED
@@ -0,0 +1,199 @@
1
+ @define-mixin rs-toggle-size-s{
2
+ & [data-rs-internal="toggle"]{
3
+ --_rs-toggle-width:20px;
4
+ --_rs-toggle-height:12px;
5
+ --_rs-toggle-shadow:3px;
6
+ }
7
+ &[class][class]{
8
+ --_rs-menu-mi-icon-offset:8px;
9
+ --_rs-menu-mi-vertical-padding:6px;
10
+ --_rs-menu-mi-horizontal-padding:8px;
11
+ --_rs-typography-letter-spacing:0.0045em;
12
+ --_rs-typography-text-transform:initial;
13
+ --_rs-typography-font-variant-numeric:initial;
14
+ --_rs-typography-font-family:var(
15
+ --rs-font-family-ui,
16
+ var(--rs-font-family-jb-sans, 'JetBrains Sans', Inter, system-ui, -apple-system,
17
+ BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
18
+ 'Droid Sans', 'Helvetica Neue', Arial, sans-serif)
19
+ );
20
+ --_rs-typography-font-size:var(--rs-text-3-font-size, 13px);
21
+ --_rs-typography-font-weight:var(
22
+ --rs-font-weight-regular,
23
+ 400
24
+ );
25
+ --_rs-typography-line-height:var(
26
+ --rs-text-3-line-height,
27
+ 20px
28
+ );
29
+ --_rs-typography-base-color:var(
30
+ --_rs-typography-hardness-color,
31
+ var(
32
+ --rs-color-average,
33
+ rgba(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227), 0.7)
34
+ )
35
+ );
36
+ --_rs-typography-text-auto-offset:8px;
37
+ --_rs-typography-ul-list-li-padding-left:28px;
38
+ --_rs-typography-ol-list-li-padding-left:21px;
39
+ --_rs-typography-list-li-margin-top-from-text:8px;
40
+ --_rs-typography-link-standalone-border-offset-from-text-base:1.15em;
41
+ --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
42
+ --_rs-typography-link-border-bottom-width-from-text:1px;
43
+ }
44
+ }
45
+ @define-mixin rs-toggle-size-m{
46
+ & [data-rs-internal="toggle"]{
47
+ --_rs-toggle-width:28px;
48
+ --_rs-toggle-height:16px;
49
+ --_rs-toggle-shadow:3px;
50
+ }
51
+ &[class][class]{
52
+ --_rs-menu-mi-icon-offset:8px;
53
+ --_rs-menu-mi-vertical-padding:8px;
54
+ --_rs-menu-mi-horizontal-padding:16px;
55
+ --_rs-typography-letter-spacing:0.0015em;
56
+ --_rs-typography-text-transform:initial;
57
+ --_rs-typography-font-variant-numeric:initial;
58
+ --_rs-typography-font-family:var(
59
+ --rs-font-family-ui,
60
+ var(--rs-font-family-jb-sans, 'JetBrains Sans', Inter, system-ui, -apple-system,
61
+ BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
62
+ 'Droid Sans', 'Helvetica Neue', Arial, sans-serif)
63
+ );
64
+ --_rs-typography-font-size:var(--rs-text-2-font-size, 16px);
65
+ --_rs-typography-font-weight:var(
66
+ --rs-font-weight-regular,
67
+ 400
68
+ );
69
+ --_rs-typography-line-height:var(
70
+ --rs-text-2-line-height,
71
+ 24px
72
+ );
73
+ --_rs-typography-base-color:var(
74
+ --_rs-typography-hardness-color,
75
+ var(
76
+ --rs-color-average,
77
+ rgba(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227), 0.7)
78
+ )
79
+ );
80
+ --_rs-typography-text-auto-offset:16px;
81
+ --_rs-typography-ul-list-li-padding-left:22px;
82
+ --_rs-typography-ol-list-li-padding-left:26px;
83
+ --_rs-typography-list-li-margin-top-from-text:16px;
84
+ --_rs-typography-link-standalone-border-offset-from-text-base:1.15em;
85
+ --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
86
+ --_rs-typography-link-border-bottom-width-from-text:1px;
87
+ }
88
+ @media screen and (max-width: 640px){
89
+ &[class][class]{
90
+ --_rs-typography-list-li-margin-top-from-text:12px;
91
+ }
92
+ }
93
+ }
94
+ @define-mixin rs-toggle-size-l{
95
+ & [data-rs-internal="toggle"]{
96
+ --_rs-toggle-width:32px;
97
+ --_rs-toggle-height:18px;
98
+ --_rs-toggle-shadow:4px;
99
+ }
100
+ &[class][class]{
101
+ --_rs-menu-mi-icon-offset:16px;
102
+ --_rs-menu-mi-vertical-padding:12px;
103
+ --_rs-menu-mi-horizontal-padding:16px;
104
+ --_rs-typography-letter-spacing:normal;
105
+ --_rs-typography-text-transform:initial;
106
+ --_rs-typography-font-variant-numeric:initial;
107
+ --_rs-typography-font-family:var(
108
+ --rs-font-family-ui,
109
+ var(--rs-font-family-jb-sans, 'JetBrains Sans', Inter, system-ui, -apple-system,
110
+ BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
111
+ 'Droid Sans', 'Helvetica Neue', Arial, sans-serif)
112
+ );
113
+ --_rs-typography-font-size:var(--rs-text-1-font-size, 20px);
114
+ --_rs-typography-font-weight:var(
115
+ --rs-font-weight-regular,
116
+ 400
117
+ );
118
+ --_rs-typography-line-height:var(
119
+ --rs-text-1-line-height,
120
+ 28px
121
+ );
122
+ --_rs-typography-base-color:var(
123
+ --_rs-typography-hardness-color,
124
+ var(
125
+ --rs-color-average,
126
+ rgba(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227), 0.7)
127
+ )
128
+ );
129
+ --_rs-typography-text-auto-offset:32px;
130
+ --_rs-typography-ul-list-li-padding-left:26px;
131
+ --_rs-typography-ol-list-li-padding-left:32px;
132
+ --_rs-typography-list-li-margin-top-from-text:24px;
133
+ --_rs-typography-link-standalone-border-offset-from-text-base:1.15em;
134
+ --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
135
+ --_rs-typography-link-border-bottom-width-from-text:1px;
136
+ }
137
+ @media screen and (max-width: 640px){
138
+ &[class][class]{
139
+ --_rs-typography-list-li-margin-top-from-text:16px;
140
+ }
141
+ }
142
+ }
143
+ @define-mixin rs-toggle-mode-classic{
144
+ & [data-rs-internal="toggle"]{
145
+ --_rs-toggle-hover-slider-box-shadow-color:var(--_rs-color-primary-t-fog);
146
+ --_rs-toggle-checked-slider-background-color:var(--_rs-color-primary);
147
+ }
148
+ }
149
+ @define-mixin rs-toggle-mode-rock{
150
+ & [data-rs-internal="toggle"]{
151
+ --_rs-toggle-hover-slider-box-shadow-color:rgba(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227), 0.2);
152
+ --_rs-toggle-checked-slider-background-color:rgb(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227));
153
+ }
154
+ }
155
+ @define-mixin rs-toggle-label-placement-left{
156
+ &[class][class]{
157
+ --_rs-menu-mi-flex-direction:row-reverse;
158
+ --_rs-menu-mi-justify-content:space-between;
159
+ }
160
+ }
161
+ @define-mixin rs-toggle-label-placement-right{
162
+ &[class][class]{
163
+ --_rs-menu-mi-flex-direction:row;
164
+ --_rs-menu-mi-justify-content:initial;
165
+ }
166
+ }
167
+ @define-mixin rs-toggle-control-size-s{
168
+ &[class]{
169
+ --_rs-toggle-width:20px;
170
+ --_rs-toggle-height:12px;
171
+ --_rs-toggle-shadow:3px;
172
+ }
173
+ }
174
+ @define-mixin rs-toggle-control-size-m{
175
+ &[class]{
176
+ --_rs-toggle-width:28px;
177
+ --_rs-toggle-height:16px;
178
+ --_rs-toggle-shadow:3px;
179
+ }
180
+ }
181
+ @define-mixin rs-toggle-control-size-l{
182
+ &[class]{
183
+ --_rs-toggle-width:32px;
184
+ --_rs-toggle-height:18px;
185
+ --_rs-toggle-shadow:4px;
186
+ }
187
+ }
188
+ @define-mixin rs-toggle-control-mode-classic{
189
+ &[class]{
190
+ --_rs-toggle-hover-slider-box-shadow-color:var(--_rs-color-primary-t-fog);
191
+ --_rs-toggle-checked-slider-background-color:var(--_rs-color-primary);
192
+ }
193
+ }
194
+ @define-mixin rs-toggle-control-mode-rock{
195
+ &[class]{
196
+ --_rs-toggle-hover-slider-box-shadow-color:rgba(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227), 0.2);
197
+ --_rs-toggle-checked-slider-background-color:rgb(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227));
198
+ }
199
+ }
package/lib/toggle-control.js CHANGED
@@ -16,7 +16,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
16
16
  import React from 'react';
17
17
  import PropTypes from 'prop-types';
18
18
  import cn from 'classnames';
19
- import { useTheme } from '@rescui/ui-contexts';
19
+ import { useThemeWithUndefined } from '@rescui/ui-contexts';
20
20
  import styles from './toggle.p.module.css.js';
21
21
  var SIZE_STYLES = {
22
22
  s: styles.sizeS,
@@ -49,10 +49,11 @@ var ToggleControl = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
49
49
  tabIndex = _ref$tabIndex === void 0 ? 0 : _ref$tabIndex,
50
50
  restProps = _objectWithoutProperties(_ref, _excluded);
51
51
 
52
- var theme = useTheme(themeFromProps);
52
+ var theme = useThemeWithUndefined(themeFromProps);
53
53
  var RootTag = notUseLabelTag ? 'span' : 'label';
54
54
  return /*#__PURE__*/React.createElement(RootTag, {
55
- className: cn(className, styles.main, SIZE_STYLES[size], MODE_STYLES[mode], THEME_STYLES[theme], disabled && styles.disabled)
55
+ className: cn(className, styles.main, SIZE_STYLES[size], MODE_STYLES[mode], THEME_STYLES[theme], disabled && styles.disabled),
56
+ "data-rs-internal": 'toggle'
56
57
  }, /*#__PURE__*/React.createElement("input", _objectSpread({
57
58
  type: "checkbox",
58
59
  "data-test": "toggle__input",
package/lib/toggle.js CHANGED
@@ -16,7 +16,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
16
16
  import React from 'react';
17
17
  import PropTypes from 'prop-types';
18
18
  import cn from 'classnames';
19
- import { useTheme } from '@rescui/ui-contexts';
19
+ import { useThemeWithUndefined } from '@rescui/ui-contexts';
20
20
  import { MenuItem } from '@rescui/menu';
21
21
  import { ToggleControl } from './toggle-control.js';
22
22
  var Toggle = /*#__PURE__*/React.forwardRef(function Toggle(_ref, ref) {
@@ -37,7 +37,7 @@ var Toggle = /*#__PURE__*/React.forwardRef(function Toggle(_ref, ref) {
37
37
  labelPlacement = _ref$labelPlacement === void 0 ? 'right' : _ref$labelPlacement,
38
38
  restProps = _objectWithoutProperties(_ref, _excluded);
39
39
 
40
- var theme = useTheme(themeFromProps);
40
+ var theme = useThemeWithUndefined(themeFromProps);
41
41
  var iconPlacement = labelPlacement === 'right' ? 'left' : 'right';
42
42
  return /*#__PURE__*/React.createElement(MenuItem, {
43
43
  className: cn(className),
package/lib/toggle.p.module.css.js CHANGED
@@ -1,13 +1,13 @@
1
1
  var styles = {
2
- "main": "_main_ahrofk_64",
3
- "disabled": "_disabled_ahrofk_42",
4
- "slider": "_slider_ahrofk_19",
5
- "themeLight": "_themeLight_ahrofk_42",
6
- "themeDark": "_themeDark_ahrofk_45",
7
- "classic": "_classic_ahrofk_42",
8
- "rock": "_rock_ahrofk_49",
9
- "sizeS": "_sizeS_ahrofk_175",
10
- "sizeM": "_sizeM_ahrofk_180",
11
- "sizeL": "_sizeL_ahrofk_185"
2
+ "themeLight": "_themeLight_12pt9kp_6",
3
+ "themeDark": "_themeDark_12pt9kp_9",
4
+ "sizeS": "_sizeS_12pt9kp_13",
5
+ "sizeM": "_sizeM_12pt9kp_16",
6
+ "sizeL": "_sizeL_12pt9kp_19",
7
+ "classic": "_classic_12pt9kp_23",
8
+ "rock": "_rock_12pt9kp_26",
9
+ "main": "_main_12pt9kp_30",
10
+ "disabled": "_disabled_12pt9kp_57",
11
+ "slider": "_slider_12pt9kp_63"
12
12
  };
13
13
  export { styles as default };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@rescui/toggle",
3
- "version": "0.2.5",
3
+ "version": "0.3.1",
4
4
  "description": "Toggle is a control that allows you to turn elements on and off instantly",
5
5
  "license": "Apache-2.0",
6
6
  "author": "JetBrains",
@@ -15,23 +15,24 @@
15
15
  },
16
16
  "dependencies": {
17
17
  "@babel/runtime-corejs3": "^7.14.0",
18
- "@rescui/menu": "^0.9.8",
18
+ "@rescui/menu": "^0.10.1",
19
19
  "classnames": "^2.2.6",
20
20
  "core-js": "^3.9.1"
21
21
  },
22
22
  "peerDependencies": {
23
- "@rescui/ui-contexts": "^0.4.0",
23
+ "@rescui/ui-contexts": "^0.5.0",
24
24
  "prop-types": "^15.7.2",
25
25
  "react": ">=16.8.0 <19"
26
26
  },
27
27
  "devDependencies": {
28
- "@rescui/colors": "^0.1.11",
29
- "@rescui/scripts": "^0.2.3",
28
+ "@rescui/colors": "^0.2.0",
29
+ "@rescui/scripts": "^0.3.0",
30
30
  "@rescui/visual-regression": "^0.1.1",
31
31
  "@types/classnames": "^2.2.11"
32
32
  },
33
33
  "scripts": {
34
- "build": "rescui-scripts build"
34
+ "build": "rescui-scripts build && yarn run build-pcss-api",
35
+ "build-pcss-api": "rescui-scripts build-pcss-api --file public-api.p.css"
35
36
  },
36
- "gitHead": "e21b6f80037993b094ceaff022db6d4cd176a88d"
37
+ "gitHead": "6457f4265a1a30050b9f4cc1f0dd808c005d1ca0"
37
38
  }