@rescui/button 0.14.1 → 0.15.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.
@@ -0,0 +1,305 @@
1
+ @define-mixin rs-button-size-xs{
2
+ &:not(html){
3
+ --_rs-typography-letter-spacing:0.0045em;
4
+ --_rs-typography-text-transform:initial;
5
+ --_rs-typography-font-variant-numeric:initial;
6
+ --_rs-typography-font-family:var(
7
+ --rs-font-family-ui,
8
+ var(--rs-font-family-jb-sans, 'JetBrains Sans', Inter, system-ui, -apple-system,
9
+ BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
10
+ 'Droid Sans', 'Helvetica Neue', Arial, sans-serif)
11
+ );
12
+ --_rs-typography-font-size:var(--rs-text-3-font-size, 13px);
13
+ --_rs-typography-font-weight:var(
14
+ --rs-font-weight-regular,
15
+ 400
16
+ );
17
+ --_rs-typography-line-height:var(
18
+ --rs-text-3-line-height,
19
+ 20px
20
+ );
21
+ --_rs-typography-base-color:var(
22
+ --_rs-typography-hardness-color,
23
+ var(
24
+ --rs-color-average,
25
+ 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)
26
+ )
27
+ );
28
+ --_rs-typography-text-auto-offset:8px;
29
+ --_rs-typography-ul-list-li-padding-left:28px;
30
+ --_rs-typography-ol-list-li-padding-left:21px;
31
+ --_rs-typography-list-li-margin-top-from-text:8px;
32
+ --_rs-typography-link-standalone-border-offset-from-text-base:1.15em;
33
+ --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
34
+ --_rs-typography-link-border-bottom-width-from-text:1px;
35
+ --_rs-button-border-radius-base:var(
36
+ --rs-button-xs-border-radius,
37
+ var(--rs-button-border-radius, 4px)
38
+ );
39
+ --_rs-button-multiline-border-radius-base:var(
40
+ --rs-button-xs-multiline-border-radius,
41
+ var(--rs-button-multiline-border-radius, 4px)
42
+ );
43
+ --_rs-button-vertical-padding:2px;
44
+ --_rs-button-horizontal-padding:16px;
45
+ --_rs-button-icon-size:16px;
46
+ --_rs-button-icon-offset:8px;
47
+ --_rs-button-icon-margin-top:2px;
48
+ }
49
+ }
50
+ @define-mixin rs-button-size-s{
51
+ &:not(html){
52
+ --_rs-typography-letter-spacing:0.0045em;
53
+ --_rs-typography-text-transform:initial;
54
+ --_rs-typography-font-variant-numeric:initial;
55
+ --_rs-typography-font-family:var(
56
+ --rs-font-family-ui,
57
+ var(--rs-font-family-jb-sans, 'JetBrains Sans', Inter, system-ui, -apple-system,
58
+ BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
59
+ 'Droid Sans', 'Helvetica Neue', Arial, sans-serif)
60
+ );
61
+ --_rs-typography-font-size:var(--rs-text-3-font-size, 13px);
62
+ --_rs-typography-font-weight:var(
63
+ --rs-font-weight-regular,
64
+ 400
65
+ );
66
+ --_rs-typography-line-height:var(
67
+ --rs-text-3-line-height,
68
+ 20px
69
+ );
70
+ --_rs-typography-base-color:var(
71
+ --_rs-typography-hardness-color,
72
+ var(
73
+ --rs-color-average,
74
+ 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)
75
+ )
76
+ );
77
+ --_rs-typography-text-auto-offset:8px;
78
+ --_rs-typography-ul-list-li-padding-left:28px;
79
+ --_rs-typography-ol-list-li-padding-left:21px;
80
+ --_rs-typography-list-li-margin-top-from-text:8px;
81
+ --_rs-typography-link-standalone-border-offset-from-text-base:1.15em;
82
+ --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
83
+ --_rs-typography-link-border-bottom-width-from-text:1px;
84
+ --_rs-button-border-radius-base:var(
85
+ --rs-button-s-border-radius,
86
+ var(--rs-button-border-radius, 24px)
87
+ );
88
+ --_rs-button-multiline-border-radius-base:var(
89
+ --rs-button-s-multiline-border-radius,
90
+ var(--rs-button-multiline-border-radius, 4px)
91
+ );
92
+ --_rs-button-vertical-padding:6px;
93
+ --_rs-button-horizontal-padding:16px;
94
+ --_rs-button-icon-size:20px;
95
+ --_rs-button-icon-offset:8px;
96
+ --_rs-button-icon-margin-top:0px;
97
+ }
98
+ }
99
+ @define-mixin rs-button-size-m{
100
+ &:not(html){
101
+ --_rs-typography-letter-spacing:0.0015em;
102
+ --_rs-typography-text-transform:initial;
103
+ --_rs-typography-font-variant-numeric:initial;
104
+ --_rs-typography-font-family:var(
105
+ --rs-font-family-ui,
106
+ var(--rs-font-family-jb-sans, 'JetBrains Sans', Inter, system-ui, -apple-system,
107
+ BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
108
+ 'Droid Sans', 'Helvetica Neue', Arial, sans-serif)
109
+ );
110
+ --_rs-typography-font-size:var(--rs-text-2-font-size, 16px);
111
+ --_rs-typography-font-weight:var(
112
+ --rs-font-weight-regular,
113
+ 400
114
+ );
115
+ --_rs-typography-line-height:var(
116
+ --rs-text-2-line-height,
117
+ 24px
118
+ );
119
+ --_rs-typography-base-color:var(
120
+ --_rs-typography-hardness-color,
121
+ var(
122
+ --rs-color-average,
123
+ 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)
124
+ )
125
+ );
126
+ --_rs-typography-text-auto-offset:16px;
127
+ --_rs-typography-ul-list-li-padding-left:22px;
128
+ --_rs-typography-ol-list-li-padding-left:26px;
129
+ --_rs-typography-list-li-margin-top-from-text:16px;
130
+ --_rs-typography-link-standalone-border-offset-from-text-base:1.15em;
131
+ --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
132
+ --_rs-typography-link-border-bottom-width-from-text:1px;
133
+ }
134
+ @media screen and (max-width: 640px){
135
+ &:not(html){
136
+ --_rs-typography-list-li-margin-top-from-text:12px;
137
+ }
138
+ }
139
+ &:not(html){
140
+ --_rs-button-border-radius-base:var(
141
+ --rs-button-m-border-radius,
142
+ var(--rs-button-border-radius, 24px)
143
+ );
144
+ --_rs-button-multiline-border-radius-base:var(
145
+ --rs-button-m-multiline-border-radius,
146
+ var(--rs-button-multiline-border-radius, 8px)
147
+ );
148
+ --_rs-button-vertical-padding:8px;
149
+ --_rs-button-horizontal-padding:24px;
150
+ --_rs-button-icon-size:24px;
151
+ --_rs-button-icon-offset:8px;
152
+ --_rs-button-icon-margin-top:0px;
153
+ }
154
+ }
155
+ @define-mixin rs-button-size-l{
156
+ &:not(html){
157
+ --_rs-typography-letter-spacing:normal;
158
+ --_rs-typography-text-transform:initial;
159
+ --_rs-typography-font-variant-numeric:initial;
160
+ --_rs-typography-font-family:var(
161
+ --rs-font-family-ui,
162
+ var(--rs-font-family-jb-sans, 'JetBrains Sans', Inter, system-ui, -apple-system,
163
+ BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
164
+ 'Droid Sans', 'Helvetica Neue', Arial, sans-serif)
165
+ );
166
+ --_rs-typography-font-size:var(--rs-text-1-font-size, 20px);
167
+ --_rs-typography-font-weight:var(
168
+ --rs-font-weight-regular,
169
+ 400
170
+ );
171
+ --_rs-typography-line-height:var(
172
+ --rs-text-1-line-height,
173
+ 28px
174
+ );
175
+ --_rs-typography-base-color:var(
176
+ --_rs-typography-hardness-color,
177
+ var(
178
+ --rs-color-average,
179
+ 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)
180
+ )
181
+ );
182
+ --_rs-typography-text-auto-offset:32px;
183
+ --_rs-typography-ul-list-li-padding-left:26px;
184
+ --_rs-typography-ol-list-li-padding-left:32px;
185
+ --_rs-typography-list-li-margin-top-from-text:24px;
186
+ --_rs-typography-link-standalone-border-offset-from-text-base:1.15em;
187
+ --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
188
+ --_rs-typography-link-border-bottom-width-from-text:1px;
189
+ }
190
+ @media screen and (max-width: 640px){
191
+ &:not(html){
192
+ --_rs-typography-list-li-margin-top-from-text:16px;
193
+ }
194
+ }
195
+ &:not(html){
196
+ --_rs-button-border-radius-base:var(
197
+ --rs-button-l-border-radius,
198
+ var(--rs-button-border-radius, 36px)
199
+ );
200
+ --_rs-button-multiline-border-radius-base:var(
201
+ --rs-button-l-multiline-border-radius,
202
+ var(--rs-button-multiline-border-radius, 12px)
203
+ );
204
+ --_rs-button-vertical-padding:12px;
205
+ --_rs-button-horizontal-padding:32px;
206
+ --_rs-button-icon-size:28px;
207
+ --_rs-button-icon-offset:16px;
208
+ --_rs-button-icon-margin-top:0px;
209
+ }
210
+ }
211
+ @define-mixin rs-button-mode-classic{
212
+ &:not(html){
213
+ --_rs-button-border-width:0px;
214
+ --_rs-button-active-border-width:0px;
215
+ --_rs-button-color:#FFFFFF;
216
+ --_rs-button-background:var(--_rs-color-primary);
217
+ --_rs-button-hover-background:var(--_rs-color-primary-t-dim);
218
+ --_rs-button-active-background:var(--_rs-color-primary);
219
+ --_rs-button-focus-background:var(--_rs-color-primary-t-dim);
220
+ --_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
+ --_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
+ }
224
+ @define-mixin rs-button-mode-rock{
225
+ &:not(html){
226
+ --_rs-button-border-width:0px;
227
+ --_rs-button-active-border-width:0px;
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
+ --_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
+ --_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
+ --_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-focus-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);
233
+ --_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
+ --_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
+ }
236
+ }
237
+ @define-mixin rs-button-mode-transparent{
238
+ &:not(html){
239
+ --_rs-button-border-width:0px;
240
+ --_rs-button-active-border-width:0px;
241
+ --_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
+ --_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
+ --_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
+ --_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-focus-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);
246
+ --_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
+ --_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
+ }
249
+ }
250
+ @define-mixin rs-button-mode-outline{
251
+ &:not(html){
252
+ --_rs-button-border-width:1px;
253
+ --_rs-button-active-border-width:2px;
254
+ --_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
+ --_rs-button-background:transparent;
256
+ --_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
+ --_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-focus-background:transparent;
259
+ --_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
+ --_rs-button-disabled-background:transparent;
261
+ }
262
+ }
263
+ @define-mixin rs-button-mode-clear{
264
+ &:not(html){
265
+ --_rs-button-border-width:0px;
266
+ --_rs-button-active-border-width:0px;
267
+ --_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
+ --_rs-button-background:transparent;
269
+ --_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
+ --_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-focus-background:transparent;
272
+ --_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
+ --_rs-button-disabled-background:transparent;
274
+ }
275
+ }
276
+ @define-mixin rs-button-icon-left{
277
+ &:not(html){
278
+ --_rs-button-icon-flex-direction:row;
279
+ --_rs-button-icon-position-multiplier-left:1;
280
+ --_rs-button-icon-position-multiplier-right:0;
281
+ }
282
+ }
283
+ @define-mixin rs-button-icon-right{
284
+ &:not(html){
285
+ --_rs-button-icon-flex-direction:row-reverse;
286
+ --_rs-button-icon-position-multiplier-left:0;
287
+ --_rs-button-icon-position-multiplier-right:1;
288
+ }
289
+ }
290
+ @define-mixin rs-button-flat-right{
291
+ &:not(html){
292
+ --_rs-button-top-right-border-radius-or-initial:0px;
293
+ --_rs-button-bottom-right-border-radius-or-initial:0px;
294
+ --_rs-button-top-right-multiline-border-radius-or-initial:0px;
295
+ --_rs-button-bottom-right-multiline-border-radius-or-initial:0px;
296
+ }
297
+ }
298
+ @define-mixin rs-button-flat-left{
299
+ &:not(html){
300
+ --_rs-button-top-left-border-radius-or-initial:0px;
301
+ --_rs-button-bottom-left-border-radius-or-initial:0px;
302
+ --_rs-button-top-left-multiline-border-radius-or-initial:0px;
303
+ --_rs-button-bottom-left-multiline-border-radius-or-initial:0px;
304
+ }
305
+ }
@@ -0,0 +1,305 @@
1
+ @define-mixin rs-button-size-xs{
2
+ &:not(html){
3
+ --_rs-typography-letter-spacing:0.0045em;
4
+ --_rs-typography-text-transform:initial;
5
+ --_rs-typography-font-variant-numeric:initial;
6
+ --_rs-typography-font-family:var(
7
+ --rs-font-family-ui,
8
+ var(--rs-font-family-jb-sans, 'JetBrains Sans', Inter, system-ui, -apple-system,
9
+ BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
10
+ 'Droid Sans', 'Helvetica Neue', Arial, sans-serif)
11
+ );
12
+ --_rs-typography-font-size:var(--rs-text-3-font-size, 13px);
13
+ --_rs-typography-font-weight:var(
14
+ --rs-font-weight-regular,
15
+ 400
16
+ );
17
+ --_rs-typography-line-height:var(
18
+ --rs-text-3-line-height,
19
+ 20px
20
+ );
21
+ --_rs-typography-base-color:var(
22
+ --_rs-typography-hardness-color,
23
+ var(
24
+ --rs-color-average,
25
+ 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)
26
+ )
27
+ );
28
+ --_rs-typography-text-auto-offset:8px;
29
+ --_rs-typography-ul-list-li-padding-left:28px;
30
+ --_rs-typography-ol-list-li-padding-left:21px;
31
+ --_rs-typography-list-li-margin-top-from-text:8px;
32
+ --_rs-typography-link-standalone-border-offset-from-text-base:1.15em;
33
+ --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
34
+ --_rs-typography-link-border-bottom-width-from-text:1px;
35
+ --_rs-button-border-radius-base:var(
36
+ --rs-button-xs-border-radius,
37
+ var(--rs-button-border-radius, 4px)
38
+ );
39
+ --_rs-button-multiline-border-radius-base:var(
40
+ --rs-button-xs-multiline-border-radius,
41
+ var(--rs-button-multiline-border-radius, 4px)
42
+ );
43
+ --_rs-button-vertical-padding:2px;
44
+ --_rs-button-horizontal-padding:16px;
45
+ --_rs-button-icon-size:16px;
46
+ --_rs-button-icon-offset:8px;
47
+ --_rs-button-icon-margin-top:2px;
48
+ }
49
+ }
50
+ @define-mixin rs-button-size-s{
51
+ &:not(html){
52
+ --_rs-typography-letter-spacing:0.0045em;
53
+ --_rs-typography-text-transform:initial;
54
+ --_rs-typography-font-variant-numeric:initial;
55
+ --_rs-typography-font-family:var(
56
+ --rs-font-family-ui,
57
+ var(--rs-font-family-jb-sans, 'JetBrains Sans', Inter, system-ui, -apple-system,
58
+ BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
59
+ 'Droid Sans', 'Helvetica Neue', Arial, sans-serif)
60
+ );
61
+ --_rs-typography-font-size:var(--rs-text-3-font-size, 13px);
62
+ --_rs-typography-font-weight:var(
63
+ --rs-font-weight-regular,
64
+ 400
65
+ );
66
+ --_rs-typography-line-height:var(
67
+ --rs-text-3-line-height,
68
+ 20px
69
+ );
70
+ --_rs-typography-base-color:var(
71
+ --_rs-typography-hardness-color,
72
+ var(
73
+ --rs-color-average,
74
+ 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)
75
+ )
76
+ );
77
+ --_rs-typography-text-auto-offset:8px;
78
+ --_rs-typography-ul-list-li-padding-left:28px;
79
+ --_rs-typography-ol-list-li-padding-left:21px;
80
+ --_rs-typography-list-li-margin-top-from-text:8px;
81
+ --_rs-typography-link-standalone-border-offset-from-text-base:1.15em;
82
+ --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
83
+ --_rs-typography-link-border-bottom-width-from-text:1px;
84
+ --_rs-button-border-radius-base:var(
85
+ --rs-button-s-border-radius,
86
+ var(--rs-button-border-radius, 24px)
87
+ );
88
+ --_rs-button-multiline-border-radius-base:var(
89
+ --rs-button-s-multiline-border-radius,
90
+ var(--rs-button-multiline-border-radius, 4px)
91
+ );
92
+ --_rs-button-vertical-padding:6px;
93
+ --_rs-button-horizontal-padding:16px;
94
+ --_rs-button-icon-size:20px;
95
+ --_rs-button-icon-offset:8px;
96
+ --_rs-button-icon-margin-top:0px;
97
+ }
98
+ }
99
+ @define-mixin rs-button-size-m{
100
+ &:not(html){
101
+ --_rs-typography-letter-spacing:0.0015em;
102
+ --_rs-typography-text-transform:initial;
103
+ --_rs-typography-font-variant-numeric:initial;
104
+ --_rs-typography-font-family:var(
105
+ --rs-font-family-ui,
106
+ var(--rs-font-family-jb-sans, 'JetBrains Sans', Inter, system-ui, -apple-system,
107
+ BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
108
+ 'Droid Sans', 'Helvetica Neue', Arial, sans-serif)
109
+ );
110
+ --_rs-typography-font-size:var(--rs-text-2-font-size, 16px);
111
+ --_rs-typography-font-weight:var(
112
+ --rs-font-weight-regular,
113
+ 400
114
+ );
115
+ --_rs-typography-line-height:var(
116
+ --rs-text-2-line-height,
117
+ 24px
118
+ );
119
+ --_rs-typography-base-color:var(
120
+ --_rs-typography-hardness-color,
121
+ var(
122
+ --rs-color-average,
123
+ 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)
124
+ )
125
+ );
126
+ --_rs-typography-text-auto-offset:16px;
127
+ --_rs-typography-ul-list-li-padding-left:22px;
128
+ --_rs-typography-ol-list-li-padding-left:26px;
129
+ --_rs-typography-list-li-margin-top-from-text:16px;
130
+ --_rs-typography-link-standalone-border-offset-from-text-base:1.15em;
131
+ --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
132
+ --_rs-typography-link-border-bottom-width-from-text:1px;
133
+ }
134
+ @media screen and (max-width: 640px){
135
+ &:not(html){
136
+ --_rs-typography-list-li-margin-top-from-text:12px;
137
+ }
138
+ }
139
+ &:not(html){
140
+ --_rs-button-border-radius-base:var(
141
+ --rs-button-m-border-radius,
142
+ var(--rs-button-border-radius, 24px)
143
+ );
144
+ --_rs-button-multiline-border-radius-base:var(
145
+ --rs-button-m-multiline-border-radius,
146
+ var(--rs-button-multiline-border-radius, 8px)
147
+ );
148
+ --_rs-button-vertical-padding:8px;
149
+ --_rs-button-horizontal-padding:24px;
150
+ --_rs-button-icon-size:24px;
151
+ --_rs-button-icon-offset:8px;
152
+ --_rs-button-icon-margin-top:0px;
153
+ }
154
+ }
155
+ @define-mixin rs-button-size-l{
156
+ &:not(html){
157
+ --_rs-typography-letter-spacing:normal;
158
+ --_rs-typography-text-transform:initial;
159
+ --_rs-typography-font-variant-numeric:initial;
160
+ --_rs-typography-font-family:var(
161
+ --rs-font-family-ui,
162
+ var(--rs-font-family-jb-sans, 'JetBrains Sans', Inter, system-ui, -apple-system,
163
+ BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
164
+ 'Droid Sans', 'Helvetica Neue', Arial, sans-serif)
165
+ );
166
+ --_rs-typography-font-size:var(--rs-text-1-font-size, 20px);
167
+ --_rs-typography-font-weight:var(
168
+ --rs-font-weight-regular,
169
+ 400
170
+ );
171
+ --_rs-typography-line-height:var(
172
+ --rs-text-1-line-height,
173
+ 28px
174
+ );
175
+ --_rs-typography-base-color:var(
176
+ --_rs-typography-hardness-color,
177
+ var(
178
+ --rs-color-average,
179
+ 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)
180
+ )
181
+ );
182
+ --_rs-typography-text-auto-offset:32px;
183
+ --_rs-typography-ul-list-li-padding-left:26px;
184
+ --_rs-typography-ol-list-li-padding-left:32px;
185
+ --_rs-typography-list-li-margin-top-from-text:24px;
186
+ --_rs-typography-link-standalone-border-offset-from-text-base:1.15em;
187
+ --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
188
+ --_rs-typography-link-border-bottom-width-from-text:1px;
189
+ }
190
+ @media screen and (max-width: 640px){
191
+ &:not(html){
192
+ --_rs-typography-list-li-margin-top-from-text:16px;
193
+ }
194
+ }
195
+ &:not(html){
196
+ --_rs-button-border-radius-base:var(
197
+ --rs-button-l-border-radius,
198
+ var(--rs-button-border-radius, 36px)
199
+ );
200
+ --_rs-button-multiline-border-radius-base:var(
201
+ --rs-button-l-multiline-border-radius,
202
+ var(--rs-button-multiline-border-radius, 12px)
203
+ );
204
+ --_rs-button-vertical-padding:12px;
205
+ --_rs-button-horizontal-padding:32px;
206
+ --_rs-button-icon-size:28px;
207
+ --_rs-button-icon-offset:16px;
208
+ --_rs-button-icon-margin-top:0px;
209
+ }
210
+ }
211
+ @define-mixin rs-button-mode-classic{
212
+ &:not(html){
213
+ --_rs-button-border-width:0px;
214
+ --_rs-button-active-border-width:0px;
215
+ --_rs-button-color:#FFFFFF;
216
+ --_rs-button-background:var(--_rs-color-primary);
217
+ --_rs-button-hover-background:var(--_rs-color-primary-t-dim);
218
+ --_rs-button-active-background:var(--_rs-color-primary);
219
+ --_rs-button-focus-background:var(--_rs-color-primary-t-dim);
220
+ --_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
+ --_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
+ }
224
+ @define-mixin rs-button-mode-rock{
225
+ &:not(html){
226
+ --_rs-button-border-width:0px;
227
+ --_rs-button-active-border-width:0px;
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
+ --_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
+ --_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
+ --_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-focus-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);
233
+ --_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
+ --_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
+ }
236
+ }
237
+ @define-mixin rs-button-mode-transparent{
238
+ &:not(html){
239
+ --_rs-button-border-width:0px;
240
+ --_rs-button-active-border-width:0px;
241
+ --_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
+ --_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
+ --_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
+ --_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-focus-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);
246
+ --_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
+ --_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
+ }
249
+ }
250
+ @define-mixin rs-button-mode-outline{
251
+ &:not(html){
252
+ --_rs-button-border-width:1px;
253
+ --_rs-button-active-border-width:2px;
254
+ --_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
+ --_rs-button-background:transparent;
256
+ --_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
+ --_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-focus-background:transparent;
259
+ --_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
+ --_rs-button-disabled-background:transparent;
261
+ }
262
+ }
263
+ @define-mixin rs-button-mode-clear{
264
+ &:not(html){
265
+ --_rs-button-border-width:0px;
266
+ --_rs-button-active-border-width:0px;
267
+ --_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
+ --_rs-button-background:transparent;
269
+ --_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
+ --_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-focus-background:transparent;
272
+ --_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
+ --_rs-button-disabled-background:transparent;
274
+ }
275
+ }
276
+ @define-mixin rs-button-icon-left{
277
+ &:not(html){
278
+ --_rs-button-icon-flex-direction:row;
279
+ --_rs-button-icon-position-multiplier-left:1;
280
+ --_rs-button-icon-position-multiplier-right:0;
281
+ }
282
+ }
283
+ @define-mixin rs-button-icon-right{
284
+ &:not(html){
285
+ --_rs-button-icon-flex-direction:row-reverse;
286
+ --_rs-button-icon-position-multiplier-left:0;
287
+ --_rs-button-icon-position-multiplier-right:1;
288
+ }
289
+ }
290
+ @define-mixin rs-button-flat-right{
291
+ &:not(html){
292
+ --_rs-button-top-right-border-radius-or-initial:0px;
293
+ --_rs-button-bottom-right-border-radius-or-initial:0px;
294
+ --_rs-button-top-right-multiline-border-radius-or-initial:0px;
295
+ --_rs-button-bottom-right-multiline-border-radius-or-initial:0px;
296
+ }
297
+ }
298
+ @define-mixin rs-button-flat-left{
299
+ &:not(html){
300
+ --_rs-button-top-left-border-radius-or-initial:0px;
301
+ --_rs-button-bottom-left-border-radius-or-initial:0px;
302
+ --_rs-button-top-left-multiline-border-radius-or-initial:0px;
303
+ --_rs-button-bottom-left-multiline-border-radius-or-initial:0px;
304
+ }
305
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@rescui/button",
3
- "version": "0.14.1",
3
+ "version": "0.15.0",
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.15.2",
19
- "@rescui/use-resize-observer": "^0.1.6",
18
+ "@rescui/icons": "^0.16.0",
19
+ "@rescui/use-resize-observer": "^0.2.0",
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.1.10",
30
- "@rescui/postcss-preset-library": "^0.1.1",
31
- "@rescui/scripts": "^0.2.2",
32
- "@rescui/typography": "^0.14.0",
29
+ "@rescui/colors": "^0.2.0",
30
+ "@rescui/scripts": "^0.3.0",
31
+ "@rescui/typography": "^0.16.0",
33
32
  "@rescui/visual-regression": "^0.1.1",
34
33
  "@types/classnames": "^2.2.11"
35
34
  },
36
35
  "scripts": {
37
- "build": "rescui-scripts build"
36
+ "build": "rescui-scripts build && yarn run build-pcss-api",
37
+ "build-pcss-api": "rescui-scripts build-pcss-api --file public-api.p.css"
38
38
  },
39
- "gitHead": "3be2e2a867635e8ebcb7fbbdfb8ad65a0700a61f"
39
+ "gitHead": "51da8a7188f4c558c563065a4ff4ef5c8e74994c"
40
40
  }