@rescui/button 0.19.1 → 0.20.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 (6) hide show
  1. package/lib/_virtual/index.css.js +7 -7
  2. package/lib/button.p.module.css.js +29 -29
  3. package/lib/index.css +72 -74
  4. package/lib/public-api.p.css +11 -9
  5. package/lib/public-api.pcss +11 -9
  6. package/package.json +2 -2
package/lib/_virtual/index.css.js CHANGED
@@ -1,10 +1,10 @@
1
1
  var styles = {
2
- "icon": "_icon_j7ewom_4",
3
- "sizeXS": "_sizeXS_j7ewom_14",
4
- "sizeS": "_sizeS_j7ewom_18",
5
- "sizeM": "_sizeM_j7ewom_22",
6
- "sizeL": "_sizeL_j7ewom_26",
7
- "light": "_light_j7ewom_30",
8
- "dark": "_dark_j7ewom_34"
2
+ "icon": "_icon_1p590we_4",
3
+ "sizeXS": "_sizeXS_1p590we_14",
4
+ "sizeS": "_sizeS_1p590we_18",
5
+ "sizeM": "_sizeM_1p590we_22",
6
+ "sizeL": "_sizeL_1p590we_26",
7
+ "light": "_light_1p590we_30",
8
+ "dark": "_dark_1p590we_34"
9
9
  };
10
10
  export { styles as default };
package/lib/button.p.module.css.js CHANGED
@@ -1,32 +1,32 @@
1
1
  var styles = {
2
- "light": "_light_13lu5th_6",
3
- "dark": "_dark_13lu5th_9",
4
- "flatRight": "_flatRight_13lu5th_13",
5
- "flatLeft": "_flatLeft_13lu5th_16",
6
- "sizeXs": "_sizeXs_13lu5th_20",
7
- "sizeS": "_sizeS_13lu5th_23",
8
- "sizeM": "_sizeM_13lu5th_26",
9
- "sizeL": "_sizeL_13lu5th_29",
10
- "modeClassic": "_modeClassic_13lu5th_33",
11
- "modeRock": "_modeRock_13lu5th_36",
12
- "modeTransparent": "_modeTransparent_13lu5th_39",
13
- "modeOutline": "_modeOutline_13lu5th_42",
14
- "modeClear": "_modeClear_13lu5th_45",
15
- "alignIconLeft": "_alignIconLeft_13lu5th_49",
16
- "alignIconRight": "_alignIconRight_13lu5th_52",
17
- "main": "_main_13lu5th_56",
18
- "disabled": "_disabled_13lu5th_133",
19
- "busy": "_busy_13lu5th_143",
20
- "busyOverlay": "_busyOverlay_13lu5th_147",
21
- "icon": "_icon_13lu5th_182",
22
- "allowMultiline": "_allowMultiline_13lu5th_195",
23
- "multiline": "_multiline_13lu5th_199",
24
- "withoutText": "_withoutText_13lu5th_203",
25
- "busyIcon": "_busyIcon_13lu5th_208",
26
- "content": "_content_13lu5th_224",
27
- "shiftedLeft": "_shiftedLeft_13lu5th_229",
28
- "shiftedRight": "_shiftedRight_13lu5th_232",
29
- "shiftedTop": "_shiftedTop_13lu5th_235",
30
- "shiftedBottom": "_shiftedBottom_13lu5th_238"
2
+ "light": "_light_1r256b1_6",
3
+ "dark": "_dark_1r256b1_9",
4
+ "flatRight": "_flatRight_1r256b1_13",
5
+ "flatLeft": "_flatLeft_1r256b1_16",
6
+ "sizeXs": "_sizeXs_1r256b1_20",
7
+ "sizeS": "_sizeS_1r256b1_23",
8
+ "sizeM": "_sizeM_1r256b1_26",
9
+ "sizeL": "_sizeL_1r256b1_29",
10
+ "modeClassic": "_modeClassic_1r256b1_33",
11
+ "modeRock": "_modeRock_1r256b1_36",
12
+ "modeTransparent": "_modeTransparent_1r256b1_39",
13
+ "modeOutline": "_modeOutline_1r256b1_42",
14
+ "modeClear": "_modeClear_1r256b1_45",
15
+ "alignIconLeft": "_alignIconLeft_1r256b1_49",
16
+ "alignIconRight": "_alignIconRight_1r256b1_52",
17
+ "main": "_main_1r256b1_56",
18
+ "disabled": "_disabled_1r256b1_133",
19
+ "busy": "_busy_1r256b1_143",
20
+ "busyOverlay": "_busyOverlay_1r256b1_147",
21
+ "icon": "_icon_1r256b1_182",
22
+ "allowMultiline": "_allowMultiline_1r256b1_195",
23
+ "multiline": "_multiline_1r256b1_199",
24
+ "withoutText": "_withoutText_1r256b1_203",
25
+ "busyIcon": "_busyIcon_1r256b1_208",
26
+ "content": "_content_1r256b1_224",
27
+ "shiftedLeft": "_shiftedLeft_1r256b1_229",
28
+ "shiftedRight": "_shiftedRight_1r256b1_232",
29
+ "shiftedTop": "_shiftedTop_1r256b1_235",
30
+ "shiftedBottom": "_shiftedBottom_1r256b1_238"
31
31
  };
32
32
  export { styles as default };
package/lib/index.css CHANGED
@@ -1,4 +1,4 @@
1
- ._icon_j7ewom_4{
1
+ ._icon_1p590we_4{
2
2
  --_rs-theme-dark:var(
3
3
  --_rs-internal-force-theme-dark-consult-rescui-before-using,
4
4
  var(--rs-theme-dark, 0)
@@ -8,7 +8,7 @@
8
8
  --_rs-theme-light-coefficient:calc(1 - var(--_rs-theme-dark-coefficient));
9
9
  }
10
10
  @supports (color: color-mix(in srgb, #fff 50%, #000 50%)){
11
- ._icon_j7ewom_4{
11
+ ._icon_1p590we_4{
12
12
  --_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)));
13
13
  --_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)));
14
14
  --_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)));
@@ -17,7 +17,7 @@
17
17
  }
18
18
  }
19
19
  @supports not (color: color-mix(in srgb, #fff 50%, #000 50%)){
20
- ._icon_j7ewom_4{
20
+ ._icon_1p590we_4{
21
21
  --_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);
22
22
  --_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));
23
23
  --_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));
@@ -25,30 +25,30 @@
25
25
  --_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));
26
26
  }
27
27
  }
28
- ._icon_j7ewom_4{
28
+ ._icon_1p590we_4{
29
29
 
30
30
  fill:var(--_rs-icons-themed-fill-or-initial, currentcolor);
31
31
 
32
32
  width:auto;
33
33
  height:var(--_rs-icons-height);
34
34
  }
35
- ._sizeXS_j7ewom_14{
35
+ ._sizeXS_1p590we_14{
36
36
  --_rs-icons-height:16px;
37
37
  }
38
- ._sizeS_j7ewom_18{
38
+ ._sizeS_1p590we_18{
39
39
  --_rs-icons-height:20px;
40
40
  }
41
- ._sizeM_j7ewom_22{
41
+ ._sizeM_1p590we_22{
42
42
  --_rs-icons-height:24px;
43
43
  }
44
- ._sizeL_j7ewom_26{
44
+ ._sizeL_1p590we_26{
45
45
  --_rs-icons-height:28px;
46
46
  }
47
- ._light_j7ewom_30{
47
+ ._light_1p590we_30{
48
48
  --rs-theme-dark:0;
49
49
  --_rs-icons-themed-fill-or-initial: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));
50
50
  }
51
- ._dark_j7ewom_34{
51
+ ._dark_1p590we_34{
52
52
  --rs-theme-dark:1;
53
53
  --_rs-icons-themed-fill-or-initial: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));
54
54
  }
@@ -60,25 +60,25 @@
60
60
  transform:rotate(360deg);
61
61
  }
62
62
  }
63
- ._light_13lu5th_6{
63
+ ._light_1r256b1_6{
64
64
  --rs-theme-dark:0;
65
65
  }
66
- ._dark_13lu5th_9{
66
+ ._dark_1r256b1_9{
67
67
  --rs-theme-dark:1;
68
68
  }
69
- ._flatRight_13lu5th_13{
69
+ ._flatRight_1r256b1_13{
70
70
  --_rs-button-top-right-border-radius-or-initial:0px;
71
71
  --_rs-button-bottom-right-border-radius-or-initial:0px;
72
72
  --_rs-button-top-right-multiline-border-radius-or-initial:0px;
73
73
  --_rs-button-bottom-right-multiline-border-radius-or-initial:0px;
74
74
  }
75
- ._flatLeft_13lu5th_16{
75
+ ._flatLeft_1r256b1_16{
76
76
  --_rs-button-top-left-border-radius-or-initial:0px;
77
77
  --_rs-button-bottom-left-border-radius-or-initial:0px;
78
78
  --_rs-button-top-left-multiline-border-radius-or-initial:0px;
79
79
  --_rs-button-bottom-left-multiline-border-radius-or-initial:0px;
80
80
  }
81
- ._sizeXs_13lu5th_20{
81
+ ._sizeXs_1r256b1_20{
82
82
  --_rs-button-border-radius-base:var(
83
83
  --rs-button-xs-border-radius,
84
84
  var(--rs-button-border-radius, 4px)
@@ -93,7 +93,7 @@
93
93
  --_rs-button-icon-size:16px;
94
94
  --_rs-button-icon-offset:4px;
95
95
  }
96
- ._sizeXs_13lu5th_20 [data-rs-internal="button__content"]{
96
+ ._sizeXs_1r256b1_20 [data-rs-internal='button__content']{
97
97
  --_rs-typography-letter-spacing:0.0045em;
98
98
  --_rs-typography-text-transform:initial;
99
99
  --_rs-typography-font-variant-numeric:initial;
@@ -127,7 +127,7 @@
127
127
  --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
128
128
  --_rs-typography-link-border-bottom-width-from-text:1px;
129
129
  }
130
- ._sizeS_13lu5th_23{
130
+ ._sizeS_1r256b1_23{
131
131
  --_rs-button-border-radius-base:var(
132
132
  --rs-button-s-border-radius,
133
133
  var(--rs-button-border-radius, 16px)
@@ -142,7 +142,7 @@
142
142
  --_rs-button-icon-size:20px;
143
143
  --_rs-button-icon-offset:8px;
144
144
  }
145
- ._sizeS_13lu5th_23 [data-rs-internal="button__content"]{
145
+ ._sizeS_1r256b1_23 [data-rs-internal='button__content']{
146
146
  --_rs-typography-letter-spacing:0.0045em;
147
147
  --_rs-typography-text-transform:initial;
148
148
  --_rs-typography-font-variant-numeric:initial;
@@ -176,7 +176,7 @@
176
176
  --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
177
177
  --_rs-typography-link-border-bottom-width-from-text:1px;
178
178
  }
179
- ._sizeM_13lu5th_26{
179
+ ._sizeM_1r256b1_26{
180
180
  --_rs-button-border-radius-base:var(
181
181
  --rs-button-m-border-radius,
182
182
  var(--rs-button-border-radius, 20px)
@@ -191,7 +191,7 @@
191
191
  --_rs-button-icon-size:24px;
192
192
  --_rs-button-icon-offset:8px;
193
193
  }
194
- ._sizeM_13lu5th_26 [data-rs-internal="button__content"]{
194
+ ._sizeM_1r256b1_26 [data-rs-internal='button__content']{
195
195
  --_rs-typography-letter-spacing:0.0015em;
196
196
  --_rs-typography-text-transform:initial;
197
197
  --_rs-typography-font-variant-numeric:initial;
@@ -226,11 +226,11 @@
226
226
  --_rs-typography-link-border-bottom-width-from-text:1px;
227
227
  }
228
228
  @media screen and (max-width: 640px){
229
- ._sizeM_13lu5th_26 [data-rs-internal="button__content"]{
229
+ ._sizeM_1r256b1_26 [data-rs-internal='button__content']{
230
230
  --_rs-typography-list-li-margin-top-from-text:12px;
231
231
  }
232
232
  }
233
- ._sizeL_13lu5th_29{
233
+ ._sizeL_1r256b1_29{
234
234
  --_rs-button-border-radius-base:var(
235
235
  --rs-button-l-border-radius,
236
236
  var(--rs-button-border-radius, 26px)
@@ -245,7 +245,7 @@
245
245
  --_rs-button-icon-size:28px;
246
246
  --_rs-button-icon-offset:16px;
247
247
  }
248
- ._sizeL_13lu5th_29 [data-rs-internal="button__content"]{
248
+ ._sizeL_1r256b1_29 [data-rs-internal='button__content']{
249
249
  --_rs-typography-letter-spacing:normal;
250
250
  --_rs-typography-text-transform:initial;
251
251
  --_rs-typography-font-variant-numeric:initial;
@@ -280,13 +280,17 @@
280
280
  --_rs-typography-link-border-bottom-width-from-text:1px;
281
281
  }
282
282
  @media screen and (max-width: 640px){
283
- ._sizeL_13lu5th_29 [data-rs-internal="button__content"]{
283
+ ._sizeL_1r256b1_29 [data-rs-internal='button__content']{
284
284
  --_rs-typography-list-li-margin-top-from-text:16px;
285
285
  }
286
286
  }
287
- ._modeClassic_13lu5th_33{
287
+ ._modeClassic_1r256b1_33{
288
288
  --_rs-button-inner-border-display:none;
289
- --_rs-button-color:#FFFFFF;
289
+ --_rs-button-color:rgb(
290
+ calc(255 - var(--rs-button-flip-text-color, 0)*230),
291
+ calc(255 - var(--rs-button-flip-text-color, 0)*230),
292
+ calc(255 - var(--rs-button-flip-text-color, 0)*227)
293
+ );
290
294
  --_rs-button-background:var(--_rs-color-primary);
291
295
  --_rs-button-hover-background:var(--_rs-color-primary-t-dim);
292
296
  --_rs-button-active-background:var(--_rs-color-primary);
@@ -296,7 +300,7 @@
296
300
  --_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);
297
301
  --_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);
298
302
  }
299
- ._modeRock_13lu5th_36{
303
+ ._modeRock_1r256b1_36{
300
304
  --_rs-button-inner-border-display:none;
301
305
  --_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));
302
306
  --_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));
@@ -309,7 +313,7 @@
309
313
  --_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);
310
314
  --_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);
311
315
  }
312
- ._modeTransparent_13lu5th_39{
316
+ ._modeTransparent_1r256b1_39{
313
317
  --_rs-button-inner-border-display:none;
314
318
  --_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));
315
319
  --_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);
@@ -321,7 +325,7 @@
321
325
  --_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);
322
326
  --_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);
323
327
  }
324
- ._modeOutline_13lu5th_42{
328
+ ._modeOutline_1r256b1_42{
325
329
  --_rs-button-inner-border-display:block;
326
330
  --_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));
327
331
  --_rs-button-background:transparent;
@@ -333,7 +337,7 @@
333
337
  --_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);
334
338
  --_rs-button-disabled-background:transparent;
335
339
  }
336
- ._modeClear_13lu5th_45{
340
+ ._modeClear_1r256b1_45{
337
341
  --_rs-button-inner-border-display:none;
338
342
  --_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));
339
343
  --_rs-button-background:transparent;
@@ -345,13 +349,13 @@
345
349
  --_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);
346
350
  --_rs-button-disabled-background:transparent;
347
351
  }
348
- ._alignIconLeft_13lu5th_49{
352
+ ._alignIconLeft_1r256b1_49{
349
353
  --_rs-button-icon-flex-direction:row;
350
354
  }
351
- ._alignIconRight_13lu5th_52{
355
+ ._alignIconRight_1r256b1_52{
352
356
  --_rs-button-icon-flex-direction:row-reverse;
353
357
  }
354
- ._main_13lu5th_56{
358
+ ._main_1r256b1_56{
355
359
  --_rs-theme-dark:var(
356
360
  --_rs-internal-force-theme-dark-consult-rescui-before-using,
357
361
  var(--rs-theme-dark, 0)
@@ -361,7 +365,7 @@
361
365
  --_rs-theme-light-coefficient:calc(1 - var(--_rs-theme-dark-coefficient));
362
366
  }
363
367
  @supports (color: color-mix(in srgb, #fff 50%, #000 50%)){
364
- ._main_13lu5th_56{
368
+ ._main_1r256b1_56{
365
369
  --_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)));
366
370
  --_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)));
367
371
  --_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)));
@@ -370,7 +374,7 @@
370
374
  }
371
375
  }
372
376
  @supports not (color: color-mix(in srgb, #fff 50%, #000 50%)){
373
- ._main_13lu5th_56{
377
+ ._main_1r256b1_56{
374
378
  --_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);
375
379
  --_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));
376
380
  --_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));
@@ -378,11 +382,7 @@
378
382
  --_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));
379
383
  }
380
384
  }
381
- ._main_13lu5th_56 {
382
- --_rs-button-color-final:var(
383
- --_rs-button-color-from-state-active,
384
- var(--_rs-button-color-from-state-hover, var(--_rs-button-color))
385
- );
385
+ ._main_1r256b1_56 {
386
386
  --_rs-button-background-final:var(
387
387
  --_rs-button-background-from-state-active-focus-visible-no-hover,
388
388
  var(
@@ -453,7 +453,7 @@
453
453
  white-space:nowrap;
454
454
  text-decoration:none;
455
455
 
456
- color:var(--_rs-button-color-final);
456
+ color:var(--_rs-button-color);
457
457
 
458
458
  background:var(--_rs-button-background-final);
459
459
  background-origin:border-box;
@@ -463,46 +463,44 @@
463
463
  -moz-column-gap:var(--_rs-button-icon-offset);
464
464
  column-gap:var(--_rs-button-icon-offset);
465
465
  }
466
- ._main_13lu5th_56:hover,
467
- ._main_13lu5th_56:focus,
468
- ._main_13lu5th_56:active{
466
+ ._main_1r256b1_56:hover,
467
+ ._main_1r256b1_56:focus,
468
+ ._main_1r256b1_56:active{
469
469
  outline:none;
470
470
 
471
471
  text-decoration:none;
472
472
  }
473
- ._main_13lu5th_56:focus{
474
- color:var(--_rs-button-color-final);
473
+ ._main_1r256b1_56:focus{
474
+ color:var(--_rs-button-color);
475
475
  background:var(--_rs-button-background-final);
476
476
  }
477
477
  @media (hover: hover){
478
- ._main_13lu5th_56:hover{
478
+ ._main_1r256b1_56:hover{
479
479
  --_rs-button-border-inner-color:rgba(
480
480
  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),
481
481
  calc(0.3 + var(--_rs-theme-dark-coefficient, 0)*0.1)
482
482
  );
483
- --_rs-button-color-from-state-hover:var(--_rs-button-color);
484
483
  --_rs-button-background-from-state-hover:var(--_rs-button-hover-background);
485
484
  }
486
485
  }
487
- ._main_13lu5th_56:active{
486
+ ._main_1r256b1_56:active{
488
487
  --_rs-button-border-inner-width:2px;
489
488
  --_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));
490
- --_rs-button-color-from-state-active:var(--_rs-button-color);
491
489
  --_rs-button-background-from-state-active:var(
492
490
  --_rs-button-active-background
493
491
  );
494
492
  }
495
- ._main_13lu5th_56:focus[data-focus-method='key']{
493
+ ._main_1r256b1_56:focus[data-focus-method='key']{
496
494
  --_rs-button-box-shadow-from-state-focus-visible:var(
497
495
  --_rs-color-primary-t-dim
498
496
  ) 0 0 0 4px;
499
497
  }
500
- ._main_13lu5th_56:active:not(:hover):focus[data-focus-method='key']{
498
+ ._main_1r256b1_56:active:not(:hover):focus[data-focus-method='key']{
501
499
  --_rs-button-background-from-state-active-focus-visible-no-hover:var(
502
500
  --_rs-button-active-focus-visible-no-hover-background
503
501
  );
504
502
  }
505
- ._main_13lu5th_56._disabled_13lu5th_133{
503
+ ._main_1r256b1_56._disabled_1r256b1_133{
506
504
  --_rs-button-border-inner-color:rgba(
507
505
  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),
508
506
  0.2
@@ -511,26 +509,26 @@
511
509
  color:var(--_rs-button-disabled-color);
512
510
  background:var(--_rs-button-disabled-background);
513
511
  }
514
- ._main_13lu5th_56._busy_13lu5th_143{
512
+ ._main_1r256b1_56._busy_1r256b1_143{
515
513
  pointer-events:none;
516
514
  }
517
- ._main_13lu5th_56._busyOverlay_13lu5th_147{
515
+ ._main_1r256b1_56._busyOverlay_1r256b1_147{
518
516
  display:inline-flex;
519
517
  justify-content:center;
520
518
  align-items:center;
521
519
  }
522
- ._main_13lu5th_56._busyOverlay_13lu5th_147,
523
- ._main_13lu5th_56._busyOverlay_13lu5th_147:hover,
524
- ._main_13lu5th_56._busyOverlay_13lu5th_147:active,
525
- ._main_13lu5th_56._busyOverlay_13lu5th_147._disabled_13lu5th_133,
526
- ._main_13lu5th_56._busyOverlay_13lu5th_147:focus{
520
+ ._main_1r256b1_56._busyOverlay_1r256b1_147,
521
+ ._main_1r256b1_56._busyOverlay_1r256b1_147:hover,
522
+ ._main_1r256b1_56._busyOverlay_1r256b1_147:active,
523
+ ._main_1r256b1_56._busyOverlay_1r256b1_147._disabled_1r256b1_133,
524
+ ._main_1r256b1_56._busyOverlay_1r256b1_147:focus{
527
525
  -webkit-user-select:none;
528
526
  -moz-user-select:none;
529
527
  user-select:none;
530
528
 
531
529
  color:transparent;
532
530
  }
533
- ._main_13lu5th_56::before{
531
+ ._main_1r256b1_56::before{
534
532
  position:absolute;
535
533
  top:0;
536
534
  right:0;
@@ -547,40 +545,40 @@
547
545
 
548
546
  transition:border-color 100ms;
549
547
  }
550
- ._main_13lu5th_56 ._icon_13lu5th_182{
548
+ ._main_1r256b1_56 ._icon_1r256b1_182{
551
549
  width:auto;
552
550
  height:var(--_rs-button-icon-size);
553
551
 
554
552
  margin:0;
555
553
  fill:currentColor;
556
554
  }
557
- ._disabled_13lu5th_133{
555
+ ._disabled_1r256b1_133{
558
556
  pointer-events:none;
559
557
  }
560
- ._allowMultiline_13lu5th_195{
558
+ ._allowMultiline_1r256b1_195{
561
559
  white-space:normal;
562
560
  }
563
- ._multiline_13lu5th_199{
561
+ ._multiline_1r256b1_199{
564
562
  border-radius:var(--_rs-button-multiline-border-radius);
565
563
  }
566
- ._withoutText_13lu5th_203{
564
+ ._withoutText_1r256b1_203{
567
565
  --_rs-button-horizontal-real-padding:var(--_rs-button-icon-only-padding);
568
566
  --_rs-button-vertical-real-padding:var(--_rs-button-icon-only-padding);
569
567
  }
570
- ._busyIcon_13lu5th_208{
568
+ ._busyIcon_1r256b1_208{
571
569
  position:absolute;
572
570
  top:50%;
573
571
  left:50%;
574
572
 
575
573
  transform:translate(-50%, -50%);
576
574
  }
577
- ._main_13lu5th_56 ._busyIcon_13lu5th_208{
575
+ ._main_1r256b1_56 ._busyIcon_1r256b1_208{
578
576
  color:var(--_rs-button-color);
579
577
  }
580
- ._main_13lu5th_56._disabled_13lu5th_133 ._busyIcon_13lu5th_208{
578
+ ._main_1r256b1_56._disabled_1r256b1_133 ._busyIcon_1r256b1_208{
581
579
  color:var(--_rs-button-disabled-color);
582
580
  }
583
- ._content_13lu5th_224{
581
+ ._content_1r256b1_224{
584
582
  letter-spacing:var(
585
583
  --rs-text-base-letter-spacing,
586
584
  var(--_rs-typography-letter-spacing)
@@ -593,15 +591,15 @@
593
591
  font-variant-numeric:var(--_rs-typography-font-variant-numeric);
594
592
  font-feature-settings:'kern', 'liga', 'calt';
595
593
  }
596
- ._shiftedLeft_13lu5th_229{
594
+ ._shiftedLeft_1r256b1_229{
597
595
  margin-left:calc(var(--_rs-button-horizontal-real-padding)*-1);
598
596
  }
599
- ._shiftedRight_13lu5th_232{
597
+ ._shiftedRight_1r256b1_232{
600
598
  margin-right:calc(var(--_rs-button-horizontal-real-padding)*-1);
601
599
  }
602
- ._shiftedTop_13lu5th_235{
600
+ ._shiftedTop_1r256b1_235{
603
601
  margin-top:calc(var(--_rs-button-vertical-real-padding)*-1);
604
602
  }
605
- ._shiftedBottom_13lu5th_238{
603
+ ._shiftedBottom_1r256b1_238{
606
604
  margin-bottom:calc(var(--_rs-button-vertical-real-padding)*-1);
607
605
  }
package/lib/public-api.p.css CHANGED
@@ -14,7 +14,7 @@
14
14
  --_rs-button-icon-size:16px;
15
15
  --_rs-button-icon-offset:4px;
16
16
  }
17
- &:not(html) [data-rs-internal="button__content"]{
17
+ &:not(html) [data-rs-internal='button__content']{
18
18
  --_rs-typography-letter-spacing:0.0045em;
19
19
  --_rs-typography-text-transform:initial;
20
20
  --_rs-typography-font-variant-numeric:initial;
@@ -65,7 +65,7 @@
65
65
  --_rs-button-icon-size:20px;
66
66
  --_rs-button-icon-offset:8px;
67
67
  }
68
- &:not(html) [data-rs-internal="button__content"]{
68
+ &:not(html) [data-rs-internal='button__content']{
69
69
  --_rs-typography-letter-spacing:0.0045em;
70
70
  --_rs-typography-text-transform:initial;
71
71
  --_rs-typography-font-variant-numeric:initial;
@@ -116,7 +116,7 @@
116
116
  --_rs-button-icon-size:24px;
117
117
  --_rs-button-icon-offset:8px;
118
118
  }
119
- &:not(html) [data-rs-internal="button__content"]{
119
+ &:not(html) [data-rs-internal='button__content']{
120
120
  --_rs-typography-letter-spacing:0.0015em;
121
121
  --_rs-typography-text-transform:initial;
122
122
  --_rs-typography-font-variant-numeric:initial;
@@ -151,7 +151,7 @@
151
151
  --_rs-typography-link-border-bottom-width-from-text:1px;
152
152
  }
153
153
  @media screen and (max-width: 640px){
154
- &:not(html) [data-rs-internal="button__content"]{
154
+ &:not(html) [data-rs-internal='button__content']{
155
155
  --_rs-typography-list-li-margin-top-from-text:12px;
156
156
  }
157
157
  }
@@ -172,7 +172,7 @@
172
172
  --_rs-button-icon-size:28px;
173
173
  --_rs-button-icon-offset:16px;
174
174
  }
175
- &:not(html) [data-rs-internal="button__content"]{
175
+ &:not(html) [data-rs-internal='button__content']{
176
176
  --_rs-typography-letter-spacing:normal;
177
177
  --_rs-typography-text-transform:initial;
178
178
  --_rs-typography-font-variant-numeric:initial;
@@ -207,7 +207,7 @@
207
207
  --_rs-typography-link-border-bottom-width-from-text:1px;
208
208
  }
209
209
  @media screen and (max-width: 640px){
210
- &:not(html) [data-rs-internal="button__content"]{
210
+ &:not(html) [data-rs-internal='button__content']{
211
211
  --_rs-typography-list-li-margin-top-from-text:16px;
212
212
  }
213
213
  }
@@ -215,7 +215,11 @@
215
215
  @define-mixin rs-button-mode-classic{
216
216
  &:not(html){
217
217
  --_rs-button-inner-border-display:none;
218
- --_rs-button-color:#FFFFFF;
218
+ --_rs-button-color:rgb(
219
+ calc(255 - var(--rs-button-flip-text-color, 0)*230),
220
+ calc(255 - var(--rs-button-flip-text-color, 0)*230),
221
+ calc(255 - var(--rs-button-flip-text-color, 0)*227)
222
+ );
219
223
  --_rs-button-background:var(--_rs-color-primary);
220
224
  --_rs-button-hover-background:var(--_rs-color-primary-t-dim);
221
225
  --_rs-button-active-background:var(--_rs-color-primary);
@@ -314,13 +318,11 @@
314
318
  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),
315
319
  calc(0.3 + var(--_rs-theme-dark-coefficient, 0)*0.1)
316
320
  );
317
- --_rs-button-color-from-state-hover:var(--_rs-button-color);
318
321
  --_rs-button-background-from-state-hover:var(--_rs-button-hover-background);
319
322
  }
320
323
  @define-mixin rs-button-state-active{
321
324
  --_rs-button-border-inner-width:2px;
322
325
  --_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));
323
- --_rs-button-color-from-state-active:var(--_rs-button-color);
324
326
  --_rs-button-background-from-state-active:var(
325
327
  --_rs-button-active-background
326
328
  );
package/lib/public-api.pcss CHANGED
@@ -14,7 +14,7 @@
14
14
  --_rs-button-icon-size:16px;
15
15
  --_rs-button-icon-offset:4px;
16
16
  }
17
- &:not(html) [data-rs-internal="button__content"]{
17
+ &:not(html) [data-rs-internal='button__content']{
18
18
  --_rs-typography-letter-spacing:0.0045em;
19
19
  --_rs-typography-text-transform:initial;
20
20
  --_rs-typography-font-variant-numeric:initial;
@@ -65,7 +65,7 @@
65
65
  --_rs-button-icon-size:20px;
66
66
  --_rs-button-icon-offset:8px;
67
67
  }
68
- &:not(html) [data-rs-internal="button__content"]{
68
+ &:not(html) [data-rs-internal='button__content']{
69
69
  --_rs-typography-letter-spacing:0.0045em;
70
70
  --_rs-typography-text-transform:initial;
71
71
  --_rs-typography-font-variant-numeric:initial;
@@ -116,7 +116,7 @@
116
116
  --_rs-button-icon-size:24px;
117
117
  --_rs-button-icon-offset:8px;
118
118
  }
119
- &:not(html) [data-rs-internal="button__content"]{
119
+ &:not(html) [data-rs-internal='button__content']{
120
120
  --_rs-typography-letter-spacing:0.0015em;
121
121
  --_rs-typography-text-transform:initial;
122
122
  --_rs-typography-font-variant-numeric:initial;
@@ -151,7 +151,7 @@
151
151
  --_rs-typography-link-border-bottom-width-from-text:1px;
152
152
  }
153
153
  @media screen and (max-width: 640px){
154
- &:not(html) [data-rs-internal="button__content"]{
154
+ &:not(html) [data-rs-internal='button__content']{
155
155
  --_rs-typography-list-li-margin-top-from-text:12px;
156
156
  }
157
157
  }
@@ -172,7 +172,7 @@
172
172
  --_rs-button-icon-size:28px;
173
173
  --_rs-button-icon-offset:16px;
174
174
  }
175
- &:not(html) [data-rs-internal="button__content"]{
175
+ &:not(html) [data-rs-internal='button__content']{
176
176
  --_rs-typography-letter-spacing:normal;
177
177
  --_rs-typography-text-transform:initial;
178
178
  --_rs-typography-font-variant-numeric:initial;
@@ -207,7 +207,7 @@
207
207
  --_rs-typography-link-border-bottom-width-from-text:1px;
208
208
  }
209
209
  @media screen and (max-width: 640px){
210
- &:not(html) [data-rs-internal="button__content"]{
210
+ &:not(html) [data-rs-internal='button__content']{
211
211
  --_rs-typography-list-li-margin-top-from-text:16px;
212
212
  }
213
213
  }
@@ -215,7 +215,11 @@
215
215
  @define-mixin rs-button-mode-classic{
216
216
  &:not(html){
217
217
  --_rs-button-inner-border-display:none;
218
- --_rs-button-color:#FFFFFF;
218
+ --_rs-button-color:rgb(
219
+ calc(255 - var(--rs-button-flip-text-color, 0)*230),
220
+ calc(255 - var(--rs-button-flip-text-color, 0)*230),
221
+ calc(255 - var(--rs-button-flip-text-color, 0)*227)
222
+ );
219
223
  --_rs-button-background:var(--_rs-color-primary);
220
224
  --_rs-button-hover-background:var(--_rs-color-primary-t-dim);
221
225
  --_rs-button-active-background:var(--_rs-color-primary);
@@ -314,13 +318,11 @@
314
318
  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),
315
319
  calc(0.3 + var(--_rs-theme-dark-coefficient, 0)*0.1)
316
320
  );
317
- --_rs-button-color-from-state-hover:var(--_rs-button-color);
318
321
  --_rs-button-background-from-state-hover:var(--_rs-button-hover-background);
319
322
  }
320
323
  @define-mixin rs-button-state-active{
321
324
  --_rs-button-border-inner-width:2px;
322
325
  --_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));
323
- --_rs-button-color-from-state-active:var(--_rs-button-color);
324
326
  --_rs-button-background-from-state-active:var(
325
327
  --_rs-button-active-background
326
328
  );
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@rescui/button",
3
- "version": "0.19.1",
3
+ "version": "0.20.0",
4
4
  "description": "",
5
5
  "license": "Apache-2.0",
6
6
  "author": "JetBrains",
@@ -36,5 +36,5 @@
36
36
  "build-pcss-api": "rescui-scripts build-pcss-api --file public-api.p.css"
37
37
  },
38
38
  "nx": {},
39
- "gitHead": "c01ec5e587ecd6f379cad0ce732300d5a1273201"
39
+ "gitHead": "0736ddaa3aad7cdec54d8eb2e6f6ce79f8f9cdce"
40
40
  }