@rescui/button 0.15.3 → 0.15.5-RUI-201-Support-css-modules-in-typography.11

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 (5) hide show
  1. package/lib/button.p.module.css.js +29 -29
  2. package/lib/index.css +111 -85
  3. package/lib/public-api.p.css +21 -15
  4. package/lib/public-api.pcss +21 -15
  5. package/package.json +8 -8
package/lib/button.p.module.css.js CHANGED
@@ -1,32 +1,32 @@
1
1
  var styles = {
2
- "light": "_light_1nfvtky_6",
3
- "dark": "_dark_1nfvtky_9",
4
- "flatRight": "_flatRight_1nfvtky_13",
5
- "flatLeft": "_flatLeft_1nfvtky_16",
6
- "sizeXs": "_sizeXs_1nfvtky_20",
7
- "sizeS": "_sizeS_1nfvtky_23",
8
- "sizeM": "_sizeM_1nfvtky_26",
9
- "sizeL": "_sizeL_1nfvtky_29",
10
- "modeClassic": "_modeClassic_1nfvtky_33",
11
- "modeRock": "_modeRock_1nfvtky_36",
12
- "modeTransparent": "_modeTransparent_1nfvtky_39",
13
- "modeOutline": "_modeOutline_1nfvtky_42",
14
- "modeClear": "_modeClear_1nfvtky_45",
15
- "alignIconLeft": "_alignIconLeft_1nfvtky_49",
16
- "alignIconRight": "_alignIconRight_1nfvtky_52",
17
- "main": "_main_1nfvtky_56",
18
- "disabled": "_disabled_1nfvtky_141",
19
- "busy": "_busy_1nfvtky_148",
20
- "busyOverlay": "_busyOverlay_1nfvtky_152",
21
- "allowMultiline": "_allowMultiline_1nfvtky_173",
22
- "multiline": "_multiline_1nfvtky_177",
23
- "withoutText": "_withoutText_1nfvtky_181",
24
- "withIcon": "_withIcon_1nfvtky_197",
25
- "icon": "_icon_1nfvtky_203",
26
- "busyIcon": "_busyIcon_1nfvtky_217",
27
- "shiftedLeft": "_shiftedLeft_1nfvtky_234",
28
- "shiftedRight": "_shiftedRight_1nfvtky_237",
29
- "shiftedTop": "_shiftedTop_1nfvtky_240",
30
- "shiftedBottom": "_shiftedBottom_1nfvtky_243"
2
+ "light": "_light_1fe8e5r_6",
3
+ "dark": "_dark_1fe8e5r_9",
4
+ "flatRight": "_flatRight_1fe8e5r_13",
5
+ "flatLeft": "_flatLeft_1fe8e5r_16",
6
+ "sizeXs": "_sizeXs_1fe8e5r_20",
7
+ "sizeS": "_sizeS_1fe8e5r_23",
8
+ "sizeM": "_sizeM_1fe8e5r_26",
9
+ "sizeL": "_sizeL_1fe8e5r_29",
10
+ "modeClassic": "_modeClassic_1fe8e5r_33",
11
+ "modeRock": "_modeRock_1fe8e5r_36",
12
+ "modeTransparent": "_modeTransparent_1fe8e5r_39",
13
+ "modeOutline": "_modeOutline_1fe8e5r_42",
14
+ "modeClear": "_modeClear_1fe8e5r_45",
15
+ "alignIconLeft": "_alignIconLeft_1fe8e5r_49",
16
+ "alignIconRight": "_alignIconRight_1fe8e5r_52",
17
+ "main": "_main_1fe8e5r_56",
18
+ "disabled": "_disabled_1fe8e5r_132",
19
+ "busy": "_busy_1fe8e5r_142",
20
+ "busyOverlay": "_busyOverlay_1fe8e5r_146",
21
+ "allowMultiline": "_allowMultiline_1fe8e5r_186",
22
+ "multiline": "_multiline_1fe8e5r_190",
23
+ "withoutText": "_withoutText_1fe8e5r_194",
24
+ "withIcon": "_withIcon_1fe8e5r_202",
25
+ "icon": "_icon_1fe8e5r_208",
26
+ "busyIcon": "_busyIcon_1fe8e5r_222",
27
+ "shiftedLeft": "_shiftedLeft_1fe8e5r_239",
28
+ "shiftedRight": "_shiftedRight_1fe8e5r_242",
29
+ "shiftedTop": "_shiftedTop_1fe8e5r_245",
30
+ "shiftedBottom": "_shiftedBottom_1fe8e5r_248"
31
31
  };
32
32
  export { styles as default };
package/lib/index.css CHANGED
@@ -1,22 +1,22 @@
1
- ._light_1nfvtky_6{
1
+ ._light_1fe8e5r_6{
2
2
  --rs-theme-dark:0;
3
3
  }
4
- ._dark_1nfvtky_9{
4
+ ._dark_1fe8e5r_9{
5
5
  --rs-theme-dark:1;
6
6
  }
7
- ._flatRight_1nfvtky_13{
7
+ ._flatRight_1fe8e5r_13{
8
8
  --_rs-button-top-right-border-radius-or-initial:0px;
9
9
  --_rs-button-bottom-right-border-radius-or-initial:0px;
10
10
  --_rs-button-top-right-multiline-border-radius-or-initial:0px;
11
11
  --_rs-button-bottom-right-multiline-border-radius-or-initial:0px;
12
12
  }
13
- ._flatLeft_1nfvtky_16{
13
+ ._flatLeft_1fe8e5r_16{
14
14
  --_rs-button-top-left-border-radius-or-initial:0px;
15
15
  --_rs-button-bottom-left-border-radius-or-initial:0px;
16
16
  --_rs-button-top-left-multiline-border-radius-or-initial:0px;
17
17
  --_rs-button-bottom-left-multiline-border-radius-or-initial:0px;
18
18
  }
19
- ._sizeXs_1nfvtky_20{
19
+ ._sizeXs_1fe8e5r_20{
20
20
  --_rs-typography-letter-spacing:0.0045em;
21
21
  --_rs-typography-text-transform:initial;
22
22
  --_rs-typography-font-variant-numeric:initial;
@@ -63,7 +63,7 @@
63
63
  --_rs-button-icon-offset:8px;
64
64
  --_rs-button-icon-margin-top:2px;
65
65
  }
66
- ._sizeS_1nfvtky_23{
66
+ ._sizeS_1fe8e5r_23{
67
67
  --_rs-typography-letter-spacing:0.0045em;
68
68
  --_rs-typography-text-transform:initial;
69
69
  --_rs-typography-font-variant-numeric:initial;
@@ -110,7 +110,7 @@
110
110
  --_rs-button-icon-offset:8px;
111
111
  --_rs-button-icon-margin-top:0px;
112
112
  }
113
- ._sizeM_1nfvtky_26{
113
+ ._sizeM_1fe8e5r_26{
114
114
  --_rs-typography-letter-spacing:0.0015em;
115
115
  --_rs-typography-text-transform:initial;
116
116
  --_rs-typography-font-variant-numeric:initial;
@@ -145,11 +145,11 @@
145
145
  --_rs-typography-link-border-bottom-width-from-text:1px;
146
146
  }
147
147
  @media screen and (max-width: 640px){
148
- ._sizeM_1nfvtky_26{
148
+ ._sizeM_1fe8e5r_26{
149
149
  --_rs-typography-list-li-margin-top-from-text:12px;
150
150
  }
151
151
  }
152
- ._sizeM_1nfvtky_26 {
152
+ ._sizeM_1fe8e5r_26 {
153
153
  --_rs-button-border-radius-base:var(
154
154
  --rs-button-m-border-radius,
155
155
  var(--rs-button-border-radius, 20px)
@@ -164,7 +164,7 @@
164
164
  --_rs-button-icon-offset:8px;
165
165
  --_rs-button-icon-margin-top:0px;
166
166
  }
167
- ._sizeL_1nfvtky_29{
167
+ ._sizeL_1fe8e5r_29{
168
168
  --_rs-typography-letter-spacing:normal;
169
169
  --_rs-typography-text-transform:initial;
170
170
  --_rs-typography-font-variant-numeric:initial;
@@ -199,11 +199,11 @@
199
199
  --_rs-typography-link-border-bottom-width-from-text:1px;
200
200
  }
201
201
  @media screen and (max-width: 640px){
202
- ._sizeL_1nfvtky_29{
202
+ ._sizeL_1fe8e5r_29{
203
203
  --_rs-typography-list-li-margin-top-from-text:16px;
204
204
  }
205
205
  }
206
- ._sizeL_1nfvtky_29 {
206
+ ._sizeL_1fe8e5r_29 {
207
207
  --_rs-button-border-radius-base:var(
208
208
  --rs-button-l-border-radius,
209
209
  var(--rs-button-border-radius, 26px)
@@ -218,72 +218,78 @@
218
218
  --_rs-button-icon-offset:16px;
219
219
  --_rs-button-icon-margin-top:0px;
220
220
  }
221
- ._modeClassic_1nfvtky_33{
222
- --_rs-button-border-width:0px;
223
- --_rs-button-active-border-width:0px;
221
+ ._modeClassic_1fe8e5r_33{
222
+ --_rs-button-inner-border-display:none;
224
223
  --_rs-button-color:#FFFFFF;
225
224
  --_rs-button-background:var(--_rs-color-primary);
226
225
  --_rs-button-hover-background:var(--_rs-color-primary-t-dim);
227
226
  --_rs-button-active-background:var(--_rs-color-primary);
228
- --_rs-button-active-focus-visible-no-hover-background:var(--_rs-color-primary-t-dim);
227
+ --_rs-button-active-focus-visible-no-hover-background:var(
228
+ --_rs-color-primary-t-dim
229
+ );
229
230
  --_rs-button-disabled-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.5);
230
231
  --_rs-button-disabled-background: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);
231
232
  }
232
- ._modeRock_1nfvtky_36{
233
- --_rs-button-border-width:0px;
234
- --_rs-button-active-border-width:0px;
233
+ ._modeRock_1fe8e5r_36{
234
+ --_rs-button-inner-border-display:none;
235
235
  --_rs-button-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));
236
236
  --_rs-button-background: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));
237
237
  --_rs-button-hover-background: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.8);
238
238
  --_rs-button-active-background: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));
239
- --_rs-button-active-focus-visible-no-hover-background: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.8);
239
+ --_rs-button-active-focus-visible-no-hover-background:rgba(
240
+ 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),
241
+ 0.8
242
+ );
240
243
  --_rs-button-disabled-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.5);
241
244
  --_rs-button-disabled-background: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);
242
245
  }
243
- ._modeTransparent_1nfvtky_39{
244
- --_rs-button-border-width:0px;
245
- --_rs-button-active-border-width:0px;
246
+ ._modeTransparent_1fe8e5r_39{
247
+ --_rs-button-inner-border-display:none;
246
248
  --_rs-button-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));
247
249
  --_rs-button-background: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.5);
248
250
  --_rs-button-hover-background: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.8);
249
251
  --_rs-button-active-background: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));
250
- --_rs-button-active-focus-visible-no-hover-background:var(--_rs-button-active-background);
252
+ --_rs-button-active-focus-visible-no-hover-background:var(
253
+ --_rs-button-active-background
254
+ );
251
255
  --_rs-button-disabled-color:rgba(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), 0.5);
252
256
  --_rs-button-disabled-background: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.4);
253
257
  }
254
- ._modeOutline_1nfvtky_42{
255
- --_rs-button-border-width:1px;
256
- --_rs-button-active-border-width:2px;
258
+ ._modeOutline_1fe8e5r_42{
259
+ --_rs-button-inner-border-display:block;
257
260
  --_rs-button-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));
258
261
  --_rs-button-background:transparent;
259
262
  --_rs-button-hover-background: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.1);
260
263
  --_rs-button-active-background: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.1);
261
- --_rs-button-active-focus-visible-no-hover-background:var(--_rs-button-active-background);
264
+ --_rs-button-active-focus-visible-no-hover-background:var(
265
+ --_rs-button-active-background
266
+ );
262
267
  --_rs-button-disabled-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.5);
263
268
  --_rs-button-disabled-background:transparent;
264
269
  }
265
- ._modeClear_1nfvtky_45{
266
- --_rs-button-border-width:0px;
267
- --_rs-button-active-border-width:0px;
270
+ ._modeClear_1fe8e5r_45{
271
+ --_rs-button-inner-border-display:none;
268
272
  --_rs-button-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));
269
273
  --_rs-button-background:transparent;
270
274
  --_rs-button-hover-background: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.1);
271
275
  --_rs-button-active-background: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);
272
- --_rs-button-active-focus-visible-no-hover-background:var(--_rs-button-active-background);
276
+ --_rs-button-active-focus-visible-no-hover-background:var(
277
+ --_rs-button-active-background
278
+ );
273
279
  --_rs-button-disabled-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.5);
274
280
  --_rs-button-disabled-background:transparent;
275
281
  }
276
- ._alignIconLeft_1nfvtky_49{
282
+ ._alignIconLeft_1fe8e5r_49{
277
283
  --_rs-button-icon-flex-direction:row;
278
284
  --_rs-button-icon-position-multiplier-left:1;
279
285
  --_rs-button-icon-position-multiplier-right:0;
280
286
  }
281
- ._alignIconRight_1nfvtky_52{
287
+ ._alignIconRight_1fe8e5r_52{
282
288
  --_rs-button-icon-flex-direction:row-reverse;
283
289
  --_rs-button-icon-position-multiplier-left:0;
284
290
  --_rs-button-icon-position-multiplier-right:1;
285
291
  }
286
- ._main_1nfvtky_56{
292
+ ._main_1fe8e5r_56{
287
293
  --_rs-theme-dark:var(
288
294
  --_rs-internal-force-theme-dark-consult-rescui-before-using,
289
295
  var(--rs-theme-dark, 0)
@@ -293,7 +299,7 @@
293
299
  --_rs-theme-light-coefficient:calc(1 - var(--_rs-theme-dark-coefficient));
294
300
  }
295
301
  @supports (color: color-mix(in srgb, #fff 50%, #000 50%)){
296
- ._main_1nfvtky_56{
302
+ ._main_1fe8e5r_56{
297
303
  --_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)));
298
304
  --_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)));
299
305
  --_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)));
@@ -302,7 +308,7 @@
302
308
  }
303
309
  }
304
310
  @supports not (color: color-mix(in srgb, #fff 50%, #000 50%)){
305
- ._main_1nfvtky_56{
311
+ ._main_1fe8e5r_56{
306
312
  --_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);
307
313
  --_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));
308
314
  --_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));
@@ -310,7 +316,7 @@
310
316
  --_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));
311
317
  }
312
318
  }
313
- ._main_1nfvtky_56 {
319
+ ._main_1fe8e5r_56 {
314
320
  --_rs-button-border-radius:var(
315
321
  --_rs-button-top-left-border-radius-or-initial,
316
322
  var(--_rs-button-border-radius-base)
@@ -352,11 +358,14 @@
352
358
  -webkit-font-feature-settings:'kern', 'liga', 'calt';
353
359
  font-feature-settings:'kern', 'liga', 'calt';
354
360
  }
355
- ._main_1nfvtky_56 > p:not(:nth-child(1)),
356
- ._main_1nfvtky_56 > pre:not(:nth-child(1)){
361
+ ._main_1fe8e5r_56 > p:not(:nth-child(1)),
362
+ ._main_1fe8e5r_56 > pre:not(:nth-child(1)){
357
363
  padding-top:var(--_rs-typography-auto-offset-or-initial);
358
364
  }
359
- ._main_1nfvtky_56 {
365
+ ._main_1fe8e5r_56 {
366
+
367
+ --_rs-button-border-inner-width:1px;
368
+ --_rs-button-border-inner-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.3);
360
369
 
361
370
  position:relative;
362
371
  z-index:1;
@@ -366,9 +375,9 @@
366
375
  -webkit-box-sizing:border-box;
367
376
 
368
377
  box-sizing:border-box;
369
- padding:calc(var(--_rs-button-vertical-padding) - var(--_rs-button-border-width)) calc(var(--_rs-button-horizontal-padding) - var(--_rs-button-border-width));
378
+ padding:var(--_rs-button-vertical-padding) var(--_rs-button-horizontal-padding);
370
379
 
371
- border:var(--_rs-button-border-width) solid 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.3);
380
+ border:none;
372
381
 
373
382
  border-radius:var(--_rs-button-border-radius);
374
383
  outline:none;
@@ -383,24 +392,24 @@
383
392
  background:var(--_rs-button-background);
384
393
  background-origin:border-box;
385
394
 
386
- -webkit-transition:color 100ms, background-color 100ms, border-color 100ms;
395
+ -webkit-transition:color 100ms, background-color 100ms;
387
396
 
388
- transition:color 100ms, background-color 100ms, border-color 100ms;
397
+ transition:color 100ms, background-color 100ms;
389
398
  }
390
- ._main_1nfvtky_56:hover,
391
- ._main_1nfvtky_56:focus,
392
- ._main_1nfvtky_56:active{
399
+ ._main_1fe8e5r_56:hover,
400
+ ._main_1fe8e5r_56:focus,
401
+ ._main_1fe8e5r_56:active{
393
402
  outline:none;
394
403
 
395
404
  text-decoration:none;
396
405
  }
397
- ._main_1nfvtky_56:focus{
406
+ ._main_1fe8e5r_56:focus{
398
407
  color:var(--_rs-button-color);
399
408
  background:var(--_rs-button-background);
400
409
  }
401
410
  @media (hover: hover){
402
- ._main_1nfvtky_56:hover{
403
- border-color:rgba(
411
+ ._main_1fe8e5r_56:hover{
412
+ --_rs-button-border-inner-color:rgba(
404
413
  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),
405
414
  calc(0.3 + var(--_rs-theme-dark-coefficient, 0)*0.1)
406
415
  );
@@ -409,32 +418,33 @@
409
418
  background:var(--_rs-button-hover-background);
410
419
  }
411
420
  }
412
- ._main_1nfvtky_56:active{
413
- padding:calc(var(--_rs-button-vertical-padding) - var(--_rs-button-active-border-width)) calc(var(--_rs-button-horizontal-padding) - var(--_rs-button-active-border-width));
414
-
415
- border-width:var(--_rs-button-active-border-width);
416
- border-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));
421
+ ._main_1fe8e5r_56:active{
422
+ --_rs-button-border-inner-width:2px;
423
+ --_rs-button-border-inner-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));
417
424
 
418
425
  color:var(--_rs-button-color);
419
426
  background:var(--_rs-button-active-background);
420
427
  }
421
- ._main_1nfvtky_56:focus[data-focus-method='key']{
428
+ ._main_1fe8e5r_56:focus[data-focus-method='key']{
422
429
  -webkit-box-shadow:var(--_rs-color-primary-t-dim) 0 0 0 4px;
423
430
  box-shadow:var(--_rs-color-primary-t-dim) 0 0 0 4px;
424
431
  }
425
- ._main_1nfvtky_56:active:not(:hover):focus[data-focus-method='key']{
432
+ ._main_1fe8e5r_56:active:not(:hover):focus[data-focus-method='key']{
426
433
  background:var(--_rs-button-active-focus-visible-no-hover-background);
427
434
  }
428
- ._main_1nfvtky_56._disabled_1nfvtky_141{
429
- border-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);
435
+ ._main_1fe8e5r_56._disabled_1fe8e5r_132{
436
+ --_rs-button-border-inner-color:rgba(
437
+ 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),
438
+ 0.2
439
+ );
430
440
 
431
441
  color:var(--_rs-button-disabled-color);
432
442
  background:var(--_rs-button-disabled-background);
433
443
  }
434
- ._main_1nfvtky_56._busy_1nfvtky_148{
444
+ ._main_1fe8e5r_56._busy_1fe8e5r_142{
435
445
  pointer-events:none;
436
446
  }
437
- ._main_1nfvtky_56._busyOverlay_1nfvtky_152{
447
+ ._main_1fe8e5r_56._busyOverlay_1fe8e5r_146{
438
448
  display:-webkit-inline-box;
439
449
  display:-ms-inline-flexbox;
440
450
  display:inline-flex;
@@ -445,11 +455,11 @@
445
455
  -ms-flex-align:center;
446
456
  align-items:center;
447
457
  }
448
- ._main_1nfvtky_56._busyOverlay_1nfvtky_152,
449
- ._main_1nfvtky_56._busyOverlay_1nfvtky_152:hover,
450
- ._main_1nfvtky_56._busyOverlay_1nfvtky_152:active,
451
- ._main_1nfvtky_56._busyOverlay_1nfvtky_152._disabled_1nfvtky_141,
452
- ._main_1nfvtky_56._busyOverlay_1nfvtky_152:focus{
458
+ ._main_1fe8e5r_56._busyOverlay_1fe8e5r_146,
459
+ ._main_1fe8e5r_56._busyOverlay_1fe8e5r_146:hover,
460
+ ._main_1fe8e5r_56._busyOverlay_1fe8e5r_146:active,
461
+ ._main_1fe8e5r_56._busyOverlay_1fe8e5r_146._disabled_1fe8e5r_132,
462
+ ._main_1fe8e5r_56._busyOverlay_1fe8e5r_146:focus{
453
463
  -webkit-user-select:none;
454
464
  -moz-user-select:none;
455
465
  -ms-user-select:none;
@@ -457,16 +467,35 @@
457
467
 
458
468
  color:transparent;
459
469
  }
460
- ._disabled_1nfvtky_141{
470
+ ._main_1fe8e5r_56::before{
471
+ position:absolute;
472
+ top:0;
473
+ right:0;
474
+ bottom:0;
475
+ left:0;
476
+
477
+ display:var(--_rs-button-inner-border-display);
478
+
479
+ border:var(--_rs-button-border-inner-width) solid var(--_rs-button-border-inner-color);
480
+ border-radius:inherit;
481
+
482
+ content:'';
483
+ pointer-events:none;
484
+
485
+ -webkit-transition:border-color 100ms;
486
+
487
+ transition:border-color 100ms;
488
+ }
489
+ ._disabled_1fe8e5r_132{
461
490
  pointer-events:none;
462
491
  }
463
- ._allowMultiline_1nfvtky_173{
492
+ ._allowMultiline_1fe8e5r_186{
464
493
  white-space:normal;
465
494
  }
466
- ._multiline_1nfvtky_177{
495
+ ._multiline_1fe8e5r_190{
467
496
  border-radius:var(--_rs-button-multiline-border-radius);
468
497
  }
469
- ._withoutText_1nfvtky_181{
498
+ ._withoutText_1fe8e5r_194{
470
499
  display:-webkit-inline-box;
471
500
  display:-ms-inline-flexbox;
472
501
  display:inline-flex;
@@ -477,12 +506,9 @@
477
506
  -ms-flex-align:center;
478
507
  align-items:center;
479
508
 
480
- padding:calc(var(--_rs-button-vertical-padding) - var(--_rs-button-border-width));
509
+ padding:var(--_rs-button-vertical-padding);
481
510
  }
482
- ._withoutText_1nfvtky_181:active{
483
- padding:calc(var(--_rs-button-vertical-padding) - var(--_rs-button-active-border-width));
484
- }
485
- ._withIcon_1nfvtky_197{
511
+ ._withIcon_1fe8e5r_202{
486
512
  display:-webkit-inline-box;
487
513
  display:-ms-inline-flexbox;
488
514
  display:inline-flex;
@@ -497,17 +523,17 @@
497
523
  -ms-flex-align:center;
498
524
  align-items:center;
499
525
  }
500
- ._withIcon_1nfvtky_197 ._icon_1nfvtky_203{
526
+ ._withIcon_1fe8e5r_202 ._icon_1fe8e5r_208{
501
527
  width:auto;
502
528
  height:var(--_rs-button-icon-size);
503
529
 
504
530
  margin:var(--_rs-button-icon-margin-top) var(--_rs-button-icon-margin-right) 0 var(--_rs-button-icon-margin-left);
505
531
  fill:currentColor;
506
532
  }
507
- ._withIcon_1nfvtky_197._withoutText_1nfvtky_181 ._icon_1nfvtky_203{
533
+ ._withIcon_1fe8e5r_202._withoutText_1fe8e5r_194 ._icon_1fe8e5r_208{
508
534
  margin:0;
509
535
  }
510
- ._busyIcon_1nfvtky_217{
536
+ ._busyIcon_1fe8e5r_222{
511
537
  position:absolute;
512
538
  top:50%;
513
539
  left:50%;
@@ -516,21 +542,21 @@
516
542
 
517
543
  transform:translate(-50%, -50%);
518
544
  }
519
- ._main_1nfvtky_56 ._busyIcon_1nfvtky_217{
545
+ ._main_1fe8e5r_56 ._busyIcon_1fe8e5r_222{
520
546
  color:var(--_rs-button-color);
521
547
  }
522
- ._main_1nfvtky_56._disabled_1nfvtky_141 ._busyIcon_1nfvtky_217{
548
+ ._main_1fe8e5r_56._disabled_1fe8e5r_132 ._busyIcon_1fe8e5r_222{
523
549
  color:var(--_rs-button-disabled-color);
524
550
  }
525
- ._shiftedLeft_1nfvtky_234{
551
+ ._shiftedLeft_1fe8e5r_239{
526
552
  margin-left:calc(var(--_rs-button-horizontal-padding)*-1);
527
553
  }
528
- ._shiftedRight_1nfvtky_237{
554
+ ._shiftedRight_1fe8e5r_242{
529
555
  margin-right:calc(var(--_rs-button-horizontal-padding)*-1);
530
556
  }
531
- ._shiftedTop_1nfvtky_240{
557
+ ._shiftedTop_1fe8e5r_245{
532
558
  margin-top:calc(var(--_rs-button-vertical-padding)*-1);
533
559
  }
534
- ._shiftedBottom_1nfvtky_243{
560
+ ._shiftedBottom_1fe8e5r_248{
535
561
  margin-bottom:calc(var(--_rs-button-vertical-padding)*-1);
536
562
  }
package/lib/public-api.p.css CHANGED
@@ -210,65 +210,71 @@
210
210
  }
211
211
  @define-mixin rs-button-mode-classic{
212
212
  &:not(html){
213
- --_rs-button-border-width:0px;
214
- --_rs-button-active-border-width:0px;
213
+ --_rs-button-inner-border-display:none;
215
214
  --_rs-button-color:#FFFFFF;
216
215
  --_rs-button-background:var(--_rs-color-primary);
217
216
  --_rs-button-hover-background:var(--_rs-color-primary-t-dim);
218
217
  --_rs-button-active-background:var(--_rs-color-primary);
219
- --_rs-button-active-focus-visible-no-hover-background:var(--_rs-color-primary-t-dim);
218
+ --_rs-button-active-focus-visible-no-hover-background:var(
219
+ --_rs-color-primary-t-dim
220
+ );
220
221
  --_rs-button-disabled-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.5);
221
222
  --_rs-button-disabled-background: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);
222
223
  }
223
224
  }
224
225
  @define-mixin rs-button-mode-rock{
225
226
  &:not(html){
226
- --_rs-button-border-width:0px;
227
- --_rs-button-active-border-width:0px;
227
+ --_rs-button-inner-border-display:none;
228
228
  --_rs-button-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));
229
229
  --_rs-button-background: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));
230
230
  --_rs-button-hover-background: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.8);
231
231
  --_rs-button-active-background: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));
232
- --_rs-button-active-focus-visible-no-hover-background: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.8);
232
+ --_rs-button-active-focus-visible-no-hover-background:rgba(
233
+ 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),
234
+ 0.8
235
+ );
233
236
  --_rs-button-disabled-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.5);
234
237
  --_rs-button-disabled-background: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);
235
238
  }
236
239
  }
237
240
  @define-mixin rs-button-mode-transparent{
238
241
  &:not(html){
239
- --_rs-button-border-width:0px;
240
- --_rs-button-active-border-width:0px;
242
+ --_rs-button-inner-border-display:none;
241
243
  --_rs-button-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));
242
244
  --_rs-button-background: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.5);
243
245
  --_rs-button-hover-background: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.8);
244
246
  --_rs-button-active-background: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));
245
- --_rs-button-active-focus-visible-no-hover-background:var(--_rs-button-active-background);
247
+ --_rs-button-active-focus-visible-no-hover-background:var(
248
+ --_rs-button-active-background
249
+ );
246
250
  --_rs-button-disabled-color:rgba(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), 0.5);
247
251
  --_rs-button-disabled-background: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.4);
248
252
  }
249
253
  }
250
254
  @define-mixin rs-button-mode-outline{
251
255
  &:not(html){
252
- --_rs-button-border-width:1px;
253
- --_rs-button-active-border-width:2px;
256
+ --_rs-button-inner-border-display:block;
254
257
  --_rs-button-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));
255
258
  --_rs-button-background:transparent;
256
259
  --_rs-button-hover-background: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.1);
257
260
  --_rs-button-active-background: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.1);
258
- --_rs-button-active-focus-visible-no-hover-background:var(--_rs-button-active-background);
261
+ --_rs-button-active-focus-visible-no-hover-background:var(
262
+ --_rs-button-active-background
263
+ );
259
264
  --_rs-button-disabled-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.5);
260
265
  --_rs-button-disabled-background:transparent;
261
266
  }
262
267
  }
263
268
  @define-mixin rs-button-mode-clear{
264
269
  &:not(html){
265
- --_rs-button-border-width:0px;
266
- --_rs-button-active-border-width:0px;
270
+ --_rs-button-inner-border-display:none;
267
271
  --_rs-button-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));
268
272
  --_rs-button-background:transparent;
269
273
  --_rs-button-hover-background: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.1);
270
274
  --_rs-button-active-background: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);
271
- --_rs-button-active-focus-visible-no-hover-background:var(--_rs-button-active-background);
275
+ --_rs-button-active-focus-visible-no-hover-background:var(
276
+ --_rs-button-active-background
277
+ );
272
278
  --_rs-button-disabled-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.5);
273
279
  --_rs-button-disabled-background:transparent;
274
280
  }
package/lib/public-api.pcss CHANGED
@@ -210,65 +210,71 @@
210
210
  }
211
211
  @define-mixin rs-button-mode-classic{
212
212
  &:not(html){
213
- --_rs-button-border-width:0px;
214
- --_rs-button-active-border-width:0px;
213
+ --_rs-button-inner-border-display:none;
215
214
  --_rs-button-color:#FFFFFF;
216
215
  --_rs-button-background:var(--_rs-color-primary);
217
216
  --_rs-button-hover-background:var(--_rs-color-primary-t-dim);
218
217
  --_rs-button-active-background:var(--_rs-color-primary);
219
- --_rs-button-active-focus-visible-no-hover-background:var(--_rs-color-primary-t-dim);
218
+ --_rs-button-active-focus-visible-no-hover-background:var(
219
+ --_rs-color-primary-t-dim
220
+ );
220
221
  --_rs-button-disabled-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.5);
221
222
  --_rs-button-disabled-background: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);
222
223
  }
223
224
  }
224
225
  @define-mixin rs-button-mode-rock{
225
226
  &:not(html){
226
- --_rs-button-border-width:0px;
227
- --_rs-button-active-border-width:0px;
227
+ --_rs-button-inner-border-display:none;
228
228
  --_rs-button-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));
229
229
  --_rs-button-background: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));
230
230
  --_rs-button-hover-background: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.8);
231
231
  --_rs-button-active-background: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));
232
- --_rs-button-active-focus-visible-no-hover-background: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.8);
232
+ --_rs-button-active-focus-visible-no-hover-background:rgba(
233
+ 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),
234
+ 0.8
235
+ );
233
236
  --_rs-button-disabled-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.5);
234
237
  --_rs-button-disabled-background: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);
235
238
  }
236
239
  }
237
240
  @define-mixin rs-button-mode-transparent{
238
241
  &:not(html){
239
- --_rs-button-border-width:0px;
240
- --_rs-button-active-border-width:0px;
242
+ --_rs-button-inner-border-display:none;
241
243
  --_rs-button-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));
242
244
  --_rs-button-background: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.5);
243
245
  --_rs-button-hover-background: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.8);
244
246
  --_rs-button-active-background: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));
245
- --_rs-button-active-focus-visible-no-hover-background:var(--_rs-button-active-background);
247
+ --_rs-button-active-focus-visible-no-hover-background:var(
248
+ --_rs-button-active-background
249
+ );
246
250
  --_rs-button-disabled-color:rgba(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), 0.5);
247
251
  --_rs-button-disabled-background: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.4);
248
252
  }
249
253
  }
250
254
  @define-mixin rs-button-mode-outline{
251
255
  &:not(html){
252
- --_rs-button-border-width:1px;
253
- --_rs-button-active-border-width:2px;
256
+ --_rs-button-inner-border-display:block;
254
257
  --_rs-button-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));
255
258
  --_rs-button-background:transparent;
256
259
  --_rs-button-hover-background: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.1);
257
260
  --_rs-button-active-background: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.1);
258
- --_rs-button-active-focus-visible-no-hover-background:var(--_rs-button-active-background);
261
+ --_rs-button-active-focus-visible-no-hover-background:var(
262
+ --_rs-button-active-background
263
+ );
259
264
  --_rs-button-disabled-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.5);
260
265
  --_rs-button-disabled-background:transparent;
261
266
  }
262
267
  }
263
268
  @define-mixin rs-button-mode-clear{
264
269
  &:not(html){
265
- --_rs-button-border-width:0px;
266
- --_rs-button-active-border-width:0px;
270
+ --_rs-button-inner-border-display:none;
267
271
  --_rs-button-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));
268
272
  --_rs-button-background:transparent;
269
273
  --_rs-button-hover-background: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.1);
270
274
  --_rs-button-active-background: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);
271
- --_rs-button-active-focus-visible-no-hover-background:var(--_rs-button-active-background);
275
+ --_rs-button-active-focus-visible-no-hover-background:var(
276
+ --_rs-button-active-background
277
+ );
272
278
  --_rs-button-disabled-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.5);
273
279
  --_rs-button-disabled-background:transparent;
274
280
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@rescui/button",
3
- "version": "0.15.3",
3
+ "version": "0.15.5-RUI-201-Support-css-modules-in-typography.11+2583dfa0",
4
4
  "description": "",
5
5
  "license": "Apache-2.0",
6
6
  "author": "JetBrains",
@@ -15,8 +15,8 @@
15
15
  },
16
16
  "dependencies": {
17
17
  "@babel/runtime-corejs3": "^7.14.0",
18
- "@rescui/icons": "^0.16.1",
19
- "@rescui/use-resize-observer": "^0.2.0",
18
+ "@rescui/icons": "0.16.2-RUI-201-Support-css-modules-in-typography.23+2583dfa0",
19
+ "@rescui/use-resize-observer": "0.2.1-RUI-201-Support-css-modules-in-typography.25+2583dfa0",
20
20
  "classnames": "^2.2.6",
21
21
  "core-js": "^3.9.1"
22
22
  },
@@ -26,15 +26,15 @@
26
26
  "react": ">=16.8.0 <19"
27
27
  },
28
28
  "devDependencies": {
29
- "@rescui/colors": "^0.2.0",
30
- "@rescui/scripts": "^0.3.0",
31
- "@rescui/typography": "^0.16.1",
32
- "@rescui/visual-regression": "^0.1.1",
29
+ "@rescui/colors": "0.2.1-RUI-201-Support-css-modules-in-typography.25+2583dfa0",
30
+ "@rescui/scripts": "0.3.0",
31
+ "@rescui/typography": "0.16.2-RUI-201-Support-css-modules-in-typography.23+2583dfa0",
32
+ "@rescui/visual-regression": "0.1.1",
33
33
  "@types/classnames": "^2.2.11"
34
34
  },
35
35
  "scripts": {
36
36
  "build": "rescui-scripts build && yarn run build-pcss-api",
37
37
  "build-pcss-api": "rescui-scripts build-pcss-api --file public-api.p.css"
38
38
  },
39
- "gitHead": "a5690100cda7d749a58c4082d1d1eb3c4fc63970"
39
+ "gitHead": "2583dfa060441a32fe4e32024b04fa6f32a51eec"
40
40
  }