@cloud-ru/uikit-product-button-predefined 0.7.15 → 1.0.1-preview-23c44fe9.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 (10) hide show
  1. package/CHANGELOG.md +6 -6
  2. package/dist/cjs/components/ButtonPromo/styles.module.css +40 -40
  3. package/dist/cjs/components/ButtonPromoOutline/styles.module.css +40 -40
  4. package/dist/esm/components/ButtonPromo/styles.module.css +40 -40
  5. package/dist/esm/components/ButtonPromoOutline/styles.module.css +40 -40
  6. package/package.json +5 -5
  7. package/src/components/ButtonPromo/styles.module.scss +1 -1
  8. package/src/components/ButtonPromoOutline/styles.module.scss +1 -1
  9. package/src/helperComponents/ButtonPrivate/styles.module.scss +1 -1
  10. package/src/styles.module.scss +1 -1
package/CHANGELOG.md CHANGED
@@ -835,7 +835,7 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
835
835
 
836
836
  ### Features
837
837
 
838
- * **[FF-5836](https://jira.sbercloud.tech/browse/FF-5836):** support cjs syntax ([d44abd0](https://gitverse.ru/cloud-ru-tech/uikit-product/commits/d44abd0ddbbea0cd2bf0e1b99442cdb83b87df48))
838
+ * **FF-5836:** support cjs syntax ([d44abd0](https://gitverse.ru/cloud-ru-tech/uikit-product/commits/d44abd0ddbbea0cd2bf0e1b99442cdb83b87df48))
839
839
 
840
840
 
841
841
 
@@ -856,7 +856,7 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
856
856
 
857
857
  ### Features
858
858
 
859
- * **[FF-5782](https://jira.sbercloud.tech/browse/FF-5782):** dart v3 use/forward approach ([eb0c4b3](https://gitverse.ru/cloud-ru-tech/uikit-product/commits/eb0c4b30a008aa82ad7555ecc9d8420c21b1c7a4))
859
+ * **FF-5782:** dart v3 use/forward approach ([eb0c4b3](https://gitverse.ru/cloud-ru-tech/uikit-product/commits/eb0c4b30a008aa82ad7555ecc9d8420c21b1c7a4))
860
860
 
861
861
 
862
862
 
@@ -912,7 +912,7 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
912
912
 
913
913
  ### Dependencies
914
914
 
915
- * **[PDS-611](https://jira.sbercloud.tech/browse/PDS-611):** up deps ([c30ac4c](https://gitverse.ru/cloud-ru-tech/uikit-product/commits/c30ac4c2adb7c00e84fbe557d85314add6b6977a))
915
+ * **PDS-611:** up deps ([c30ac4c](https://gitverse.ru/cloud-ru-tech/uikit-product/commits/c30ac4c2adb7c00e84fbe557d85314add6b6977a))
916
916
 
917
917
 
918
918
 
@@ -933,7 +933,7 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
933
933
 
934
934
  ### Bug Fixes
935
935
 
936
- * **[FF-5383](https://jira.sbercloud.tech/browse/FF-5383):** update snack packages versions ([3fc6a2f](https://gitverse.ru/cloud-ru-tech/uikit-product/commits/3fc6a2f940db810e5c514c7fb3d30350b291c61b))
936
+ * **FF-5383:** update snack packages versions ([3fc6a2f](https://gitverse.ru/cloud-ru-tech/uikit-product/commits/3fc6a2f940db810e5c514c7fb3d30350b291c61b))
937
937
 
938
938
 
939
939
 
@@ -981,7 +981,7 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
981
981
 
982
982
  ### Bug Fixes
983
983
 
984
- * **[FF-3789](https://jira.sbercloud.tech/browse/FF-3789):** updated typescript to v5 ([1e50951](https://gitverse.ru/cloud-ru-tech/uikit-product/commits/1e50951d88db18b69a760d38a6a8bf93335dcd1c))
984
+ * **FF-3789:** updated typescript to v5 ([1e50951](https://gitverse.ru/cloud-ru-tech/uikit-product/commits/1e50951d88db18b69a760d38a6a8bf93335dcd1c))
985
985
 
986
986
 
987
987
 
@@ -1088,7 +1088,7 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
1088
1088
 
1089
1089
  ### Features
1090
1090
 
1091
- * **[PDS-32](https://jira.sbercloud.tech/browse/PDS-32):** add button predefined ([24432d3](https://gitverse.ru/cloud-ru-tech/uikit-product/commits/24432d3584c3e4ac3c1e3fbfed5e2d58623f1857))
1091
+ * **PDS-32:** add button predefined ([24432d3](https://gitverse.ru/cloud-ru-tech/uikit-product/commits/24432d3584c3e4ac3c1e3fbfed5e2d58623f1857))
1092
1092
 
1093
1093
 
1094
1094
 
package/dist/cjs/components/ButtonPromo/styles.module.css CHANGED
@@ -18,19 +18,19 @@
18
18
  max-height:var(--size-icon-container-s, 24px);
19
19
  }
20
20
  .button[data-size=xs][data-variant=label-only]{
21
- border-radius:var(--radius-button-xs, 0px);
21
+ border-radius:var(--radius-button-xs, 2px);
22
22
  height:var(--size-button-xs, 24px);
23
23
  padding-right:var(--space-button-xs-from-label, 8px);
24
24
  padding-left:var(--space-button-xs-from-label, 8px);
25
25
  min-width:var(--size-button-mininal-width-xs, 0px);
26
26
  }
27
27
  .button[data-size=xs][data-variant=icon-only]{
28
- border-radius:var(--radius-button-xs, 0px);
28
+ border-radius:var(--radius-button-xs, 2px);
29
29
  height:var(--size-button-xs, 24px);
30
30
  width:var(--size-button-xs, 24px);
31
31
  }
32
32
  .button[data-size=xs][data-variant=icon-after]{
33
- border-radius:var(--radius-button-xs, 0px);
33
+ border-radius:var(--radius-button-xs, 2px);
34
34
  height:var(--size-button-xs, 24px);
35
35
  gap:var(--space-button-xs-gap, 2px);
36
36
  padding-right:var(--space-button-xs-from-icon, 4px);
@@ -57,19 +57,19 @@
57
57
  max-height:var(--size-icon-container-s, 24px);
58
58
  }
59
59
  .button[data-size=s][data-variant=label-only]{
60
- border-radius:var(--radius-button-s, 0px);
60
+ border-radius:var(--radius-button-s, 2px);
61
61
  height:var(--size-button-s, 32px);
62
62
  padding-right:var(--space-button-s-from-label, 16px);
63
63
  padding-left:var(--space-button-s-from-label, 16px);
64
64
  min-width:var(--size-button-mininal-width-s, 0px);
65
65
  }
66
66
  .button[data-size=s][data-variant=icon-only]{
67
- border-radius:var(--radius-button-s, 0px);
67
+ border-radius:var(--radius-button-s, 2px);
68
68
  height:var(--size-button-s, 32px);
69
69
  width:var(--size-button-s, 32px);
70
70
  }
71
71
  .button[data-size=s][data-variant=icon-after]{
72
- border-radius:var(--radius-button-s, 0px);
72
+ border-radius:var(--radius-button-s, 2px);
73
73
  height:var(--size-button-s, 32px);
74
74
  gap:var(--space-button-s-gap, 4px);
75
75
  padding-right:var(--space-button-s-from-icon, 8px);
@@ -96,19 +96,19 @@
96
96
  max-height:var(--size-icon-container-s, 24px);
97
97
  }
98
98
  .button[data-size=m][data-variant=label-only]{
99
- border-radius:var(--radius-button-m, 0px);
99
+ border-radius:var(--radius-button-m, 2px);
100
100
  height:var(--size-button-m, 40px);
101
101
  padding-right:var(--space-button-m-from-label, 24px);
102
102
  padding-left:var(--space-button-m-from-label, 24px);
103
103
  min-width:var(--size-button-mininal-width-m, 0px);
104
104
  }
105
105
  .button[data-size=m][data-variant=icon-only]{
106
- border-radius:var(--radius-button-m, 0px);
106
+ border-radius:var(--radius-button-m, 2px);
107
107
  height:var(--size-button-m, 40px);
108
108
  width:var(--size-button-m, 40px);
109
109
  }
110
110
  .button[data-size=m][data-variant=icon-after]{
111
- border-radius:var(--radius-button-m, 0px);
111
+ border-radius:var(--radius-button-m, 2px);
112
112
  height:var(--size-button-m, 40px);
113
113
  gap:var(--space-button-m-gap, 4px);
114
114
  padding-right:var(--space-button-m-from-icon, 16px);
@@ -135,19 +135,19 @@
135
135
  max-height:var(--size-icon-container-s, 24px);
136
136
  }
137
137
  .button[data-size=l][data-variant=label-only]{
138
- border-radius:var(--radius-button-l, 0px);
138
+ border-radius:var(--radius-button-l, 2px);
139
139
  height:var(--size-button-l, 48px);
140
140
  padding-right:var(--space-button-l-from-label, 32px);
141
141
  padding-left:var(--space-button-l-from-label, 32px);
142
142
  min-width:var(--size-button-mininal-width-l, 0px);
143
143
  }
144
144
  .button[data-size=l][data-variant=icon-only]{
145
- border-radius:var(--radius-button-l, 0px);
145
+ border-radius:var(--radius-button-l, 2px);
146
146
  height:var(--size-button-l, 48px);
147
147
  width:var(--size-button-l, 48px);
148
148
  }
149
149
  .button[data-size=l][data-variant=icon-after]{
150
- border-radius:var(--radius-button-l, 0px);
150
+ border-radius:var(--radius-button-l, 2px);
151
151
  height:var(--size-button-l, 48px);
152
152
  gap:var(--space-button-l-gap, 4px);
153
153
  padding-right:var(--space-button-l-from-icon, 24px);
@@ -163,38 +163,35 @@
163
163
  .button[data-loading][data-variant=label-only] .label{
164
164
  opacity:var(--opacity-a0, 0);
165
165
  }
166
- .button[data-appearance=fluorescent-yellow]{
167
- background-color:var(--sys-fluorescent-yellow-accent-default, #cff500);
168
- }
169
166
  .button[data-appearance=fluorescent-yellow] .label{
170
167
  color:var(--sys-fluorescent-yellow-on-accent, #2e3807);
171
168
  }
172
169
  .button[data-appearance=fluorescent-yellow] .icon{
173
170
  color:var(--sys-fluorescent-yellow-on-accent, #2e3807);
174
171
  }
172
+ .button[data-appearance=fluorescent-yellow]{
173
+ background-color:var(--sys-fluorescent-yellow-accent-default, #cff500);
174
+ }
175
175
  @media (hover: hover){
176
- .button[data-appearance=fluorescent-yellow]:hover{
177
- background-color:var(--sys-fluorescent-yellow-accent-hovered, #abcb0f);
178
- }
179
176
  .button[data-appearance=fluorescent-yellow]:hover .label{
180
177
  color:var(--sys-fluorescent-yellow-on-accent, #2e3807);
181
178
  }
182
179
  .button[data-appearance=fluorescent-yellow]:hover .icon{
183
180
  color:var(--sys-fluorescent-yellow-on-accent, #2e3807);
184
181
  }
185
- }
186
- @media (hover: none) or (hover: hover){
187
- .button[data-appearance=fluorescent-yellow]:focus-visible{
182
+ .button[data-appearance=fluorescent-yellow]:hover{
188
183
  background-color:var(--sys-fluorescent-yellow-accent-hovered, #abcb0f);
189
184
  }
185
+ }
186
+ @media (hover: none) or (hover: hover){
190
187
  .button[data-appearance=fluorescent-yellow]:focus-visible .label{
191
188
  color:var(--sys-fluorescent-yellow-on-accent, #2e3807);
192
189
  }
193
190
  .button[data-appearance=fluorescent-yellow]:focus-visible .icon{
194
191
  color:var(--sys-fluorescent-yellow-on-accent, #2e3807);
195
192
  }
196
- .button[data-appearance=fluorescent-yellow]:active{
197
- background-color:var(--sys-fluorescent-yellow-accent-pressed, #859c2d);
193
+ .button[data-appearance=fluorescent-yellow]:focus-visible{
194
+ background-color:var(--sys-fluorescent-yellow-accent-hovered, #abcb0f);
198
195
  }
199
196
  .button[data-appearance=fluorescent-yellow]:active .label{
200
197
  color:var(--sys-fluorescent-yellow-on-accent, #2e3807);
@@ -202,7 +199,7 @@
202
199
  .button[data-appearance=fluorescent-yellow]:active .icon{
203
200
  color:var(--sys-fluorescent-yellow-on-accent, #2e3807);
204
201
  }
205
- .button[data-appearance=fluorescent-yellow][data-loading]{
202
+ .button[data-appearance=fluorescent-yellow]:active{
206
203
  background-color:var(--sys-fluorescent-yellow-accent-pressed, #859c2d);
207
204
  }
208
205
  .button[data-appearance=fluorescent-yellow][data-loading] .label{
@@ -211,8 +208,8 @@
211
208
  .button[data-appearance=fluorescent-yellow][data-loading] .icon{
212
209
  color:var(--sys-fluorescent-yellow-on-accent, #2e3807);
213
210
  }
214
- .button[data-appearance=fluorescent-yellow]:disabled, .button[data-appearance=fluorescent-yellow][data-disabled]{
215
- background-color:var(--sys-neutral-decor-disabled, #e6e8ef);
211
+ .button[data-appearance=fluorescent-yellow][data-loading]{
212
+ background-color:var(--sys-fluorescent-yellow-accent-pressed, #859c2d);
216
213
  }
217
214
  .button[data-appearance=fluorescent-yellow]:disabled .label, .button[data-appearance=fluorescent-yellow][data-disabled] .label{
218
215
  color:var(--sys-neutral-text-light, #8b8e9b);
@@ -220,9 +217,9 @@
220
217
  .button[data-appearance=fluorescent-yellow]:disabled .icon, .button[data-appearance=fluorescent-yellow][data-disabled] .icon{
221
218
  color:var(--sys-neutral-text-light, #8b8e9b);
222
219
  }
223
- }
224
- .button[data-appearance=graphite]{
225
- background-color:var(--sys-graphite-accent-default, #222222);
220
+ .button[data-appearance=fluorescent-yellow]:disabled, .button[data-appearance=fluorescent-yellow][data-disabled]{
221
+ background-color:var(--sys-neutral-decor-disabled, #e6e8ef);
222
+ }
226
223
  }
227
224
  .button[data-appearance=graphite] .label{
228
225
  color:var(--sys-graphite-on-accent, #ffffff);
@@ -230,29 +227,29 @@
230
227
  .button[data-appearance=graphite] .icon{
231
228
  color:var(--sys-graphite-on-accent, #ffffff);
232
229
  }
230
+ .button[data-appearance=graphite]{
231
+ background-color:var(--sys-graphite-accent-default, #222222);
232
+ }
233
233
  @media (hover: hover){
234
- .button[data-appearance=graphite]:hover{
235
- background-color:var(--sys-graphite-accent-hovered, #383838);
236
- }
237
234
  .button[data-appearance=graphite]:hover .label{
238
235
  color:var(--sys-graphite-on-accent, #ffffff);
239
236
  }
240
237
  .button[data-appearance=graphite]:hover .icon{
241
238
  color:var(--sys-graphite-on-accent, #ffffff);
242
239
  }
243
- }
244
- @media (hover: none) or (hover: hover){
245
- .button[data-appearance=graphite]:focus-visible{
240
+ .button[data-appearance=graphite]:hover{
246
241
  background-color:var(--sys-graphite-accent-hovered, #383838);
247
242
  }
243
+ }
244
+ @media (hover: none) or (hover: hover){
248
245
  .button[data-appearance=graphite]:focus-visible .label{
249
246
  color:var(--sys-graphite-on-accent, #ffffff);
250
247
  }
251
248
  .button[data-appearance=graphite]:focus-visible .icon{
252
249
  color:var(--sys-graphite-on-accent, #ffffff);
253
250
  }
254
- .button[data-appearance=graphite]:active{
255
- background-color:var(--sys-graphite-accent-pressed, #4e4e4e);
251
+ .button[data-appearance=graphite]:focus-visible{
252
+ background-color:var(--sys-graphite-accent-hovered, #383838);
256
253
  }
257
254
  .button[data-appearance=graphite]:active .label{
258
255
  color:var(--sys-graphite-on-accent, #ffffff);
@@ -260,7 +257,7 @@
260
257
  .button[data-appearance=graphite]:active .icon{
261
258
  color:var(--sys-graphite-on-accent, #ffffff);
262
259
  }
263
- .button[data-appearance=graphite][data-loading]{
260
+ .button[data-appearance=graphite]:active{
264
261
  background-color:var(--sys-graphite-accent-pressed, #4e4e4e);
265
262
  }
266
263
  .button[data-appearance=graphite][data-loading] .label{
@@ -269,8 +266,8 @@
269
266
  .button[data-appearance=graphite][data-loading] .icon{
270
267
  color:var(--sys-graphite-on-accent, #ffffff);
271
268
  }
272
- .button[data-appearance=graphite]:disabled, .button[data-appearance=graphite][data-disabled]{
273
- background-color:var(--sys-neutral-decor-disabled, #e6e8ef);
269
+ .button[data-appearance=graphite][data-loading]{
270
+ background-color:var(--sys-graphite-accent-pressed, #4e4e4e);
274
271
  }
275
272
  .button[data-appearance=graphite]:disabled .label, .button[data-appearance=graphite][data-disabled] .label{
276
273
  color:var(--sys-neutral-text-light, #8b8e9b);
@@ -278,6 +275,9 @@
278
275
  .button[data-appearance=graphite]:disabled .icon, .button[data-appearance=graphite][data-disabled] .icon{
279
276
  color:var(--sys-neutral-text-light, #8b8e9b);
280
277
  }
278
+ .button[data-appearance=graphite]:disabled, .button[data-appearance=graphite][data-disabled]{
279
+ background-color:var(--sys-neutral-decor-disabled, #e6e8ef);
280
+ }
281
281
  }
282
282
  .button[data-appearance=fluorescent-yellow]:focus-visible{
283
283
  outline-color:var(--sys-available-complementary, #15151b);
package/dist/cjs/components/ButtonPromoOutline/styles.module.css CHANGED
@@ -18,7 +18,7 @@
18
18
  max-height:var(--size-icon-container-s, 24px);
19
19
  }
20
20
  .button[data-size=xs][data-variant=label-only]{
21
- border-radius:var(--radius-button-xs, 0px);
21
+ border-radius:var(--radius-button-xs, 2px);
22
22
  height:var(--size-button-xs, 24px);
23
23
  padding-right:var(--space-button-xs-from-label, 8px);
24
24
  padding-left:var(--space-button-xs-from-label, 8px);
@@ -26,13 +26,13 @@
26
26
  min-width:var(--size-button-mininal-width-xs, 0px);
27
27
  }
28
28
  .button[data-size=xs][data-variant=icon-only]{
29
- border-radius:var(--radius-button-xs, 0px);
29
+ border-radius:var(--radius-button-xs, 2px);
30
30
  height:var(--size-button-xs, 24px);
31
31
  width:var(--size-button-xs, 24px);
32
32
  border-width:var(--border-width-button-outline-single, 1px);
33
33
  }
34
34
  .button[data-size=xs][data-variant=icon-after]{
35
- border-radius:var(--radius-button-xs, 0px);
35
+ border-radius:var(--radius-button-xs, 2px);
36
36
  height:var(--size-button-xs, 24px);
37
37
  gap:var(--space-button-xs-gap, 2px);
38
38
  padding-right:var(--space-button-xs-from-icon, 4px);
@@ -60,7 +60,7 @@
60
60
  max-height:var(--size-icon-container-s, 24px);
61
61
  }
62
62
  .button[data-size=s][data-variant=label-only]{
63
- border-radius:var(--radius-button-s, 0px);
63
+ border-radius:var(--radius-button-s, 2px);
64
64
  height:var(--size-button-s, 32px);
65
65
  padding-right:var(--space-button-s-from-label, 16px);
66
66
  padding-left:var(--space-button-s-from-label, 16px);
@@ -68,13 +68,13 @@
68
68
  min-width:var(--size-button-mininal-width-s, 0px);
69
69
  }
70
70
  .button[data-size=s][data-variant=icon-only]{
71
- border-radius:var(--radius-button-s, 0px);
71
+ border-radius:var(--radius-button-s, 2px);
72
72
  height:var(--size-button-s, 32px);
73
73
  width:var(--size-button-s, 32px);
74
74
  border-width:var(--border-width-button-outline-single, 1px);
75
75
  }
76
76
  .button[data-size=s][data-variant=icon-after]{
77
- border-radius:var(--radius-button-s, 0px);
77
+ border-radius:var(--radius-button-s, 2px);
78
78
  height:var(--size-button-s, 32px);
79
79
  gap:var(--space-button-s-gap, 4px);
80
80
  padding-right:var(--space-button-s-from-icon, 8px);
@@ -102,7 +102,7 @@
102
102
  max-height:var(--size-icon-container-s, 24px);
103
103
  }
104
104
  .button[data-size=m][data-variant=label-only]{
105
- border-radius:var(--radius-button-m, 0px);
105
+ border-radius:var(--radius-button-m, 2px);
106
106
  height:var(--size-button-m, 40px);
107
107
  padding-right:var(--space-button-m-from-label, 24px);
108
108
  padding-left:var(--space-button-m-from-label, 24px);
@@ -110,13 +110,13 @@
110
110
  min-width:var(--size-button-mininal-width-m, 0px);
111
111
  }
112
112
  .button[data-size=m][data-variant=icon-only]{
113
- border-radius:var(--radius-button-m, 0px);
113
+ border-radius:var(--radius-button-m, 2px);
114
114
  height:var(--size-button-m, 40px);
115
115
  width:var(--size-button-m, 40px);
116
116
  border-width:var(--border-width-button-outline-single, 1px);
117
117
  }
118
118
  .button[data-size=m][data-variant=icon-after]{
119
- border-radius:var(--radius-button-m, 0px);
119
+ border-radius:var(--radius-button-m, 2px);
120
120
  height:var(--size-button-m, 40px);
121
121
  gap:var(--space-button-m-gap, 4px);
122
122
  padding-right:var(--space-button-m-from-icon, 16px);
@@ -144,7 +144,7 @@
144
144
  max-height:var(--size-icon-container-s, 24px);
145
145
  }
146
146
  .button[data-size=l][data-variant=label-only]{
147
- border-radius:var(--radius-button-l, 0px);
147
+ border-radius:var(--radius-button-l, 2px);
148
148
  height:var(--size-button-l, 48px);
149
149
  padding-right:var(--space-button-l-from-label, 32px);
150
150
  padding-left:var(--space-button-l-from-label, 32px);
@@ -152,13 +152,13 @@
152
152
  min-width:var(--size-button-mininal-width-l, 0px);
153
153
  }
154
154
  .button[data-size=l][data-variant=icon-only]{
155
- border-radius:var(--radius-button-l, 0px);
155
+ border-radius:var(--radius-button-l, 2px);
156
156
  height:var(--size-button-l, 48px);
157
157
  width:var(--size-button-l, 48px);
158
158
  border-width:var(--border-width-button-outline-single, 1px);
159
159
  }
160
160
  .button[data-size=l][data-variant=icon-after]{
161
- border-radius:var(--radius-button-l, 0px);
161
+ border-radius:var(--radius-button-l, 2px);
162
162
  height:var(--size-button-l, 48px);
163
163
  gap:var(--space-button-l-gap, 4px);
164
164
  padding-right:var(--space-button-l-from-icon, 24px);
@@ -175,38 +175,35 @@
175
175
  .button[data-loading][data-variant=label-only] .label{
176
176
  opacity:var(--opacity-a0, 0);
177
177
  }
178
- .button[data-appearance=fluorescent-yellow]{
179
- border-color:var(--sys-fluorescent-yellow-accent-default, #cff500);
180
- }
181
178
  .button[data-appearance=fluorescent-yellow] .label{
182
179
  color:var(--sys-fluorescent-yellow-accent-default, #cff500);
183
180
  }
184
181
  .button[data-appearance=fluorescent-yellow] .icon{
185
182
  color:var(--sys-fluorescent-yellow-accent-default, #cff500);
186
183
  }
184
+ .button[data-appearance=fluorescent-yellow]{
185
+ border-color:var(--sys-fluorescent-yellow-accent-default, #cff500);
186
+ }
187
187
  @media (hover: hover){
188
- .button[data-appearance=fluorescent-yellow]:hover{
189
- border-color:var(--sys-fluorescent-yellow-accent-hovered, #abcb0f);
190
- }
191
188
  .button[data-appearance=fluorescent-yellow]:hover .label{
192
189
  color:var(--sys-fluorescent-yellow-accent-hovered, #abcb0f);
193
190
  }
194
191
  .button[data-appearance=fluorescent-yellow]:hover .icon{
195
192
  color:var(--sys-fluorescent-yellow-accent-hovered, #abcb0f);
196
193
  }
197
- }
198
- @media (hover: none) or (hover: hover){
199
- .button[data-appearance=fluorescent-yellow]:focus-visible{
194
+ .button[data-appearance=fluorescent-yellow]:hover{
200
195
  border-color:var(--sys-fluorescent-yellow-accent-hovered, #abcb0f);
201
196
  }
197
+ }
198
+ @media (hover: none) or (hover: hover){
202
199
  .button[data-appearance=fluorescent-yellow]:focus-visible .label{
203
200
  color:var(--sys-fluorescent-yellow-accent-hovered, #abcb0f);
204
201
  }
205
202
  .button[data-appearance=fluorescent-yellow]:focus-visible .icon{
206
203
  color:var(--sys-fluorescent-yellow-accent-hovered, #abcb0f);
207
204
  }
208
- .button[data-appearance=fluorescent-yellow]:active{
209
- border-color:var(--sys-fluorescent-yellow-accent-pressed, #859c2d);
205
+ .button[data-appearance=fluorescent-yellow]:focus-visible{
206
+ border-color:var(--sys-fluorescent-yellow-accent-hovered, #abcb0f);
210
207
  }
211
208
  .button[data-appearance=fluorescent-yellow]:active .label{
212
209
  color:var(--sys-fluorescent-yellow-accent-pressed, #859c2d);
@@ -214,7 +211,7 @@
214
211
  .button[data-appearance=fluorescent-yellow]:active .icon{
215
212
  color:var(--sys-fluorescent-yellow-accent-pressed, #859c2d);
216
213
  }
217
- .button[data-appearance=fluorescent-yellow][data-loading]{
214
+ .button[data-appearance=fluorescent-yellow]:active{
218
215
  border-color:var(--sys-fluorescent-yellow-accent-pressed, #859c2d);
219
216
  }
220
217
  .button[data-appearance=fluorescent-yellow][data-loading] .label{
@@ -223,8 +220,8 @@
223
220
  .button[data-appearance=fluorescent-yellow][data-loading] .icon{
224
221
  color:var(--sys-fluorescent-yellow-accent-pressed, #859c2d);
225
222
  }
226
- .button[data-appearance=fluorescent-yellow]:disabled, .button[data-appearance=fluorescent-yellow][data-disabled]{
227
- border-color:var(--sys-neutral-decor-disabled, #e6e8ef);
223
+ .button[data-appearance=fluorescent-yellow][data-loading]{
224
+ border-color:var(--sys-fluorescent-yellow-accent-pressed, #859c2d);
228
225
  }
229
226
  .button[data-appearance=fluorescent-yellow]:disabled .label, .button[data-appearance=fluorescent-yellow][data-disabled] .label{
230
227
  color:var(--sys-neutral-text-disabled, #aaaebd);
@@ -232,9 +229,9 @@
232
229
  .button[data-appearance=fluorescent-yellow]:disabled .icon, .button[data-appearance=fluorescent-yellow][data-disabled] .icon{
233
230
  color:var(--sys-neutral-text-disabled, #aaaebd);
234
231
  }
235
- }
236
- .button[data-appearance=graphite]{
237
- border-color:var(--sys-graphite-accent-default, #222222);
232
+ .button[data-appearance=fluorescent-yellow]:disabled, .button[data-appearance=fluorescent-yellow][data-disabled]{
233
+ border-color:var(--sys-neutral-decor-disabled, #e6e8ef);
234
+ }
238
235
  }
239
236
  .button[data-appearance=graphite] .label{
240
237
  color:var(--sys-graphite-accent-default, #222222);
@@ -242,29 +239,29 @@
242
239
  .button[data-appearance=graphite] .icon{
243
240
  color:var(--sys-graphite-accent-default, #222222);
244
241
  }
242
+ .button[data-appearance=graphite]{
243
+ border-color:var(--sys-graphite-accent-default, #222222);
244
+ }
245
245
  @media (hover: hover){
246
- .button[data-appearance=graphite]:hover{
247
- border-color:var(--sys-graphite-accent-hovered, #383838);
248
- }
249
246
  .button[data-appearance=graphite]:hover .label{
250
247
  color:var(--sys-graphite-accent-hovered, #383838);
251
248
  }
252
249
  .button[data-appearance=graphite]:hover .icon{
253
250
  color:var(--sys-graphite-accent-hovered, #383838);
254
251
  }
255
- }
256
- @media (hover: none) or (hover: hover){
257
- .button[data-appearance=graphite]:focus-visible{
252
+ .button[data-appearance=graphite]:hover{
258
253
  border-color:var(--sys-graphite-accent-hovered, #383838);
259
254
  }
255
+ }
256
+ @media (hover: none) or (hover: hover){
260
257
  .button[data-appearance=graphite]:focus-visible .label{
261
258
  color:var(--sys-graphite-accent-hovered, #383838);
262
259
  }
263
260
  .button[data-appearance=graphite]:focus-visible .icon{
264
261
  color:var(--sys-graphite-accent-hovered, #383838);
265
262
  }
266
- .button[data-appearance=graphite]:active{
267
- border-color:var(--sys-graphite-accent-pressed, #4e4e4e);
263
+ .button[data-appearance=graphite]:focus-visible{
264
+ border-color:var(--sys-graphite-accent-hovered, #383838);
268
265
  }
269
266
  .button[data-appearance=graphite]:active .label{
270
267
  color:var(--sys-graphite-accent-pressed, #4e4e4e);
@@ -272,7 +269,7 @@
272
269
  .button[data-appearance=graphite]:active .icon{
273
270
  color:var(--sys-graphite-accent-pressed, #4e4e4e);
274
271
  }
275
- .button[data-appearance=graphite][data-loading]{
272
+ .button[data-appearance=graphite]:active{
276
273
  border-color:var(--sys-graphite-accent-pressed, #4e4e4e);
277
274
  }
278
275
  .button[data-appearance=graphite][data-loading] .label{
@@ -281,8 +278,8 @@
281
278
  .button[data-appearance=graphite][data-loading] .icon{
282
279
  color:var(--sys-graphite-accent-pressed, #4e4e4e);
283
280
  }
284
- .button[data-appearance=graphite]:disabled, .button[data-appearance=graphite][data-disabled]{
285
- border-color:var(--sys-neutral-decor-disabled, #e6e8ef);
281
+ .button[data-appearance=graphite][data-loading]{
282
+ border-color:var(--sys-graphite-accent-pressed, #4e4e4e);
286
283
  }
287
284
  .button[data-appearance=graphite]:disabled .label, .button[data-appearance=graphite][data-disabled] .label{
288
285
  color:var(--sys-neutral-text-disabled, #aaaebd);
@@ -290,6 +287,9 @@
290
287
  .button[data-appearance=graphite]:disabled .icon, .button[data-appearance=graphite][data-disabled] .icon{
291
288
  color:var(--sys-neutral-text-disabled, #aaaebd);
292
289
  }
290
+ .button[data-appearance=graphite]:disabled, .button[data-appearance=graphite][data-disabled]{
291
+ border-color:var(--sys-neutral-decor-disabled, #e6e8ef);
292
+ }
293
293
  }
294
294
  .button[data-appearance=fluorescent-yellow]:focus-visible{
295
295
  outline-color:var(--sys-available-complementary, #15151b);
package/dist/esm/components/ButtonPromo/styles.module.css CHANGED
@@ -18,19 +18,19 @@
18
18
  max-height:var(--size-icon-container-s, 24px);
19
19
  }
20
20
  .button[data-size=xs][data-variant=label-only]{
21
- border-radius:var(--radius-button-xs, 0px);
21
+ border-radius:var(--radius-button-xs, 2px);
22
22
  height:var(--size-button-xs, 24px);
23
23
  padding-right:var(--space-button-xs-from-label, 8px);
24
24
  padding-left:var(--space-button-xs-from-label, 8px);
25
25
  min-width:var(--size-button-mininal-width-xs, 0px);
26
26
  }
27
27
  .button[data-size=xs][data-variant=icon-only]{
28
- border-radius:var(--radius-button-xs, 0px);
28
+ border-radius:var(--radius-button-xs, 2px);
29
29
  height:var(--size-button-xs, 24px);
30
30
  width:var(--size-button-xs, 24px);
31
31
  }
32
32
  .button[data-size=xs][data-variant=icon-after]{
33
- border-radius:var(--radius-button-xs, 0px);
33
+ border-radius:var(--radius-button-xs, 2px);
34
34
  height:var(--size-button-xs, 24px);
35
35
  gap:var(--space-button-xs-gap, 2px);
36
36
  padding-right:var(--space-button-xs-from-icon, 4px);
@@ -57,19 +57,19 @@
57
57
  max-height:var(--size-icon-container-s, 24px);
58
58
  }
59
59
  .button[data-size=s][data-variant=label-only]{
60
- border-radius:var(--radius-button-s, 0px);
60
+ border-radius:var(--radius-button-s, 2px);
61
61
  height:var(--size-button-s, 32px);
62
62
  padding-right:var(--space-button-s-from-label, 16px);
63
63
  padding-left:var(--space-button-s-from-label, 16px);
64
64
  min-width:var(--size-button-mininal-width-s, 0px);
65
65
  }
66
66
  .button[data-size=s][data-variant=icon-only]{
67
- border-radius:var(--radius-button-s, 0px);
67
+ border-radius:var(--radius-button-s, 2px);
68
68
  height:var(--size-button-s, 32px);
69
69
  width:var(--size-button-s, 32px);
70
70
  }
71
71
  .button[data-size=s][data-variant=icon-after]{
72
- border-radius:var(--radius-button-s, 0px);
72
+ border-radius:var(--radius-button-s, 2px);
73
73
  height:var(--size-button-s, 32px);
74
74
  gap:var(--space-button-s-gap, 4px);
75
75
  padding-right:var(--space-button-s-from-icon, 8px);
@@ -96,19 +96,19 @@
96
96
  max-height:var(--size-icon-container-s, 24px);
97
97
  }
98
98
  .button[data-size=m][data-variant=label-only]{
99
- border-radius:var(--radius-button-m, 0px);
99
+ border-radius:var(--radius-button-m, 2px);
100
100
  height:var(--size-button-m, 40px);
101
101
  padding-right:var(--space-button-m-from-label, 24px);
102
102
  padding-left:var(--space-button-m-from-label, 24px);
103
103
  min-width:var(--size-button-mininal-width-m, 0px);
104
104
  }
105
105
  .button[data-size=m][data-variant=icon-only]{
106
- border-radius:var(--radius-button-m, 0px);
106
+ border-radius:var(--radius-button-m, 2px);
107
107
  height:var(--size-button-m, 40px);
108
108
  width:var(--size-button-m, 40px);
109
109
  }
110
110
  .button[data-size=m][data-variant=icon-after]{
111
- border-radius:var(--radius-button-m, 0px);
111
+ border-radius:var(--radius-button-m, 2px);
112
112
  height:var(--size-button-m, 40px);
113
113
  gap:var(--space-button-m-gap, 4px);
114
114
  padding-right:var(--space-button-m-from-icon, 16px);
@@ -135,19 +135,19 @@
135
135
  max-height:var(--size-icon-container-s, 24px);
136
136
  }
137
137
  .button[data-size=l][data-variant=label-only]{
138
- border-radius:var(--radius-button-l, 0px);
138
+ border-radius:var(--radius-button-l, 2px);
139
139
  height:var(--size-button-l, 48px);
140
140
  padding-right:var(--space-button-l-from-label, 32px);
141
141
  padding-left:var(--space-button-l-from-label, 32px);
142
142
  min-width:var(--size-button-mininal-width-l, 0px);
143
143
  }
144
144
  .button[data-size=l][data-variant=icon-only]{
145
- border-radius:var(--radius-button-l, 0px);
145
+ border-radius:var(--radius-button-l, 2px);
146
146
  height:var(--size-button-l, 48px);
147
147
  width:var(--size-button-l, 48px);
148
148
  }
149
149
  .button[data-size=l][data-variant=icon-after]{
150
- border-radius:var(--radius-button-l, 0px);
150
+ border-radius:var(--radius-button-l, 2px);
151
151
  height:var(--size-button-l, 48px);
152
152
  gap:var(--space-button-l-gap, 4px);
153
153
  padding-right:var(--space-button-l-from-icon, 24px);
@@ -163,38 +163,35 @@
163
163
  .button[data-loading][data-variant=label-only] .label{
164
164
  opacity:var(--opacity-a0, 0);
165
165
  }
166
- .button[data-appearance=fluorescent-yellow]{
167
- background-color:var(--sys-fluorescent-yellow-accent-default, #cff500);
168
- }
169
166
  .button[data-appearance=fluorescent-yellow] .label{
170
167
  color:var(--sys-fluorescent-yellow-on-accent, #2e3807);
171
168
  }
172
169
  .button[data-appearance=fluorescent-yellow] .icon{
173
170
  color:var(--sys-fluorescent-yellow-on-accent, #2e3807);
174
171
  }
172
+ .button[data-appearance=fluorescent-yellow]{
173
+ background-color:var(--sys-fluorescent-yellow-accent-default, #cff500);
174
+ }
175
175
  @media (hover: hover){
176
- .button[data-appearance=fluorescent-yellow]:hover{
177
- background-color:var(--sys-fluorescent-yellow-accent-hovered, #abcb0f);
178
- }
179
176
  .button[data-appearance=fluorescent-yellow]:hover .label{
180
177
  color:var(--sys-fluorescent-yellow-on-accent, #2e3807);
181
178
  }
182
179
  .button[data-appearance=fluorescent-yellow]:hover .icon{
183
180
  color:var(--sys-fluorescent-yellow-on-accent, #2e3807);
184
181
  }
185
- }
186
- @media (hover: none) or (hover: hover){
187
- .button[data-appearance=fluorescent-yellow]:focus-visible{
182
+ .button[data-appearance=fluorescent-yellow]:hover{
188
183
  background-color:var(--sys-fluorescent-yellow-accent-hovered, #abcb0f);
189
184
  }
185
+ }
186
+ @media (hover: none) or (hover: hover){
190
187
  .button[data-appearance=fluorescent-yellow]:focus-visible .label{
191
188
  color:var(--sys-fluorescent-yellow-on-accent, #2e3807);
192
189
  }
193
190
  .button[data-appearance=fluorescent-yellow]:focus-visible .icon{
194
191
  color:var(--sys-fluorescent-yellow-on-accent, #2e3807);
195
192
  }
196
- .button[data-appearance=fluorescent-yellow]:active{
197
- background-color:var(--sys-fluorescent-yellow-accent-pressed, #859c2d);
193
+ .button[data-appearance=fluorescent-yellow]:focus-visible{
194
+ background-color:var(--sys-fluorescent-yellow-accent-hovered, #abcb0f);
198
195
  }
199
196
  .button[data-appearance=fluorescent-yellow]:active .label{
200
197
  color:var(--sys-fluorescent-yellow-on-accent, #2e3807);
@@ -202,7 +199,7 @@
202
199
  .button[data-appearance=fluorescent-yellow]:active .icon{
203
200
  color:var(--sys-fluorescent-yellow-on-accent, #2e3807);
204
201
  }
205
- .button[data-appearance=fluorescent-yellow][data-loading]{
202
+ .button[data-appearance=fluorescent-yellow]:active{
206
203
  background-color:var(--sys-fluorescent-yellow-accent-pressed, #859c2d);
207
204
  }
208
205
  .button[data-appearance=fluorescent-yellow][data-loading] .label{
@@ -211,8 +208,8 @@
211
208
  .button[data-appearance=fluorescent-yellow][data-loading] .icon{
212
209
  color:var(--sys-fluorescent-yellow-on-accent, #2e3807);
213
210
  }
214
- .button[data-appearance=fluorescent-yellow]:disabled, .button[data-appearance=fluorescent-yellow][data-disabled]{
215
- background-color:var(--sys-neutral-decor-disabled, #e6e8ef);
211
+ .button[data-appearance=fluorescent-yellow][data-loading]{
212
+ background-color:var(--sys-fluorescent-yellow-accent-pressed, #859c2d);
216
213
  }
217
214
  .button[data-appearance=fluorescent-yellow]:disabled .label, .button[data-appearance=fluorescent-yellow][data-disabled] .label{
218
215
  color:var(--sys-neutral-text-light, #8b8e9b);
@@ -220,9 +217,9 @@
220
217
  .button[data-appearance=fluorescent-yellow]:disabled .icon, .button[data-appearance=fluorescent-yellow][data-disabled] .icon{
221
218
  color:var(--sys-neutral-text-light, #8b8e9b);
222
219
  }
223
- }
224
- .button[data-appearance=graphite]{
225
- background-color:var(--sys-graphite-accent-default, #222222);
220
+ .button[data-appearance=fluorescent-yellow]:disabled, .button[data-appearance=fluorescent-yellow][data-disabled]{
221
+ background-color:var(--sys-neutral-decor-disabled, #e6e8ef);
222
+ }
226
223
  }
227
224
  .button[data-appearance=graphite] .label{
228
225
  color:var(--sys-graphite-on-accent, #ffffff);
@@ -230,29 +227,29 @@
230
227
  .button[data-appearance=graphite] .icon{
231
228
  color:var(--sys-graphite-on-accent, #ffffff);
232
229
  }
230
+ .button[data-appearance=graphite]{
231
+ background-color:var(--sys-graphite-accent-default, #222222);
232
+ }
233
233
  @media (hover: hover){
234
- .button[data-appearance=graphite]:hover{
235
- background-color:var(--sys-graphite-accent-hovered, #383838);
236
- }
237
234
  .button[data-appearance=graphite]:hover .label{
238
235
  color:var(--sys-graphite-on-accent, #ffffff);
239
236
  }
240
237
  .button[data-appearance=graphite]:hover .icon{
241
238
  color:var(--sys-graphite-on-accent, #ffffff);
242
239
  }
243
- }
244
- @media (hover: none) or (hover: hover){
245
- .button[data-appearance=graphite]:focus-visible{
240
+ .button[data-appearance=graphite]:hover{
246
241
  background-color:var(--sys-graphite-accent-hovered, #383838);
247
242
  }
243
+ }
244
+ @media (hover: none) or (hover: hover){
248
245
  .button[data-appearance=graphite]:focus-visible .label{
249
246
  color:var(--sys-graphite-on-accent, #ffffff);
250
247
  }
251
248
  .button[data-appearance=graphite]:focus-visible .icon{
252
249
  color:var(--sys-graphite-on-accent, #ffffff);
253
250
  }
254
- .button[data-appearance=graphite]:active{
255
- background-color:var(--sys-graphite-accent-pressed, #4e4e4e);
251
+ .button[data-appearance=graphite]:focus-visible{
252
+ background-color:var(--sys-graphite-accent-hovered, #383838);
256
253
  }
257
254
  .button[data-appearance=graphite]:active .label{
258
255
  color:var(--sys-graphite-on-accent, #ffffff);
@@ -260,7 +257,7 @@
260
257
  .button[data-appearance=graphite]:active .icon{
261
258
  color:var(--sys-graphite-on-accent, #ffffff);
262
259
  }
263
- .button[data-appearance=graphite][data-loading]{
260
+ .button[data-appearance=graphite]:active{
264
261
  background-color:var(--sys-graphite-accent-pressed, #4e4e4e);
265
262
  }
266
263
  .button[data-appearance=graphite][data-loading] .label{
@@ -269,8 +266,8 @@
269
266
  .button[data-appearance=graphite][data-loading] .icon{
270
267
  color:var(--sys-graphite-on-accent, #ffffff);
271
268
  }
272
- .button[data-appearance=graphite]:disabled, .button[data-appearance=graphite][data-disabled]{
273
- background-color:var(--sys-neutral-decor-disabled, #e6e8ef);
269
+ .button[data-appearance=graphite][data-loading]{
270
+ background-color:var(--sys-graphite-accent-pressed, #4e4e4e);
274
271
  }
275
272
  .button[data-appearance=graphite]:disabled .label, .button[data-appearance=graphite][data-disabled] .label{
276
273
  color:var(--sys-neutral-text-light, #8b8e9b);
@@ -278,6 +275,9 @@
278
275
  .button[data-appearance=graphite]:disabled .icon, .button[data-appearance=graphite][data-disabled] .icon{
279
276
  color:var(--sys-neutral-text-light, #8b8e9b);
280
277
  }
278
+ .button[data-appearance=graphite]:disabled, .button[data-appearance=graphite][data-disabled]{
279
+ background-color:var(--sys-neutral-decor-disabled, #e6e8ef);
280
+ }
281
281
  }
282
282
  .button[data-appearance=fluorescent-yellow]:focus-visible{
283
283
  outline-color:var(--sys-available-complementary, #15151b);
package/dist/esm/components/ButtonPromoOutline/styles.module.css CHANGED
@@ -18,7 +18,7 @@
18
18
  max-height:var(--size-icon-container-s, 24px);
19
19
  }
20
20
  .button[data-size=xs][data-variant=label-only]{
21
- border-radius:var(--radius-button-xs, 0px);
21
+ border-radius:var(--radius-button-xs, 2px);
22
22
  height:var(--size-button-xs, 24px);
23
23
  padding-right:var(--space-button-xs-from-label, 8px);
24
24
  padding-left:var(--space-button-xs-from-label, 8px);
@@ -26,13 +26,13 @@
26
26
  min-width:var(--size-button-mininal-width-xs, 0px);
27
27
  }
28
28
  .button[data-size=xs][data-variant=icon-only]{
29
- border-radius:var(--radius-button-xs, 0px);
29
+ border-radius:var(--radius-button-xs, 2px);
30
30
  height:var(--size-button-xs, 24px);
31
31
  width:var(--size-button-xs, 24px);
32
32
  border-width:var(--border-width-button-outline-single, 1px);
33
33
  }
34
34
  .button[data-size=xs][data-variant=icon-after]{
35
- border-radius:var(--radius-button-xs, 0px);
35
+ border-radius:var(--radius-button-xs, 2px);
36
36
  height:var(--size-button-xs, 24px);
37
37
  gap:var(--space-button-xs-gap, 2px);
38
38
  padding-right:var(--space-button-xs-from-icon, 4px);
@@ -60,7 +60,7 @@
60
60
  max-height:var(--size-icon-container-s, 24px);
61
61
  }
62
62
  .button[data-size=s][data-variant=label-only]{
63
- border-radius:var(--radius-button-s, 0px);
63
+ border-radius:var(--radius-button-s, 2px);
64
64
  height:var(--size-button-s, 32px);
65
65
  padding-right:var(--space-button-s-from-label, 16px);
66
66
  padding-left:var(--space-button-s-from-label, 16px);
@@ -68,13 +68,13 @@
68
68
  min-width:var(--size-button-mininal-width-s, 0px);
69
69
  }
70
70
  .button[data-size=s][data-variant=icon-only]{
71
- border-radius:var(--radius-button-s, 0px);
71
+ border-radius:var(--radius-button-s, 2px);
72
72
  height:var(--size-button-s, 32px);
73
73
  width:var(--size-button-s, 32px);
74
74
  border-width:var(--border-width-button-outline-single, 1px);
75
75
  }
76
76
  .button[data-size=s][data-variant=icon-after]{
77
- border-radius:var(--radius-button-s, 0px);
77
+ border-radius:var(--radius-button-s, 2px);
78
78
  height:var(--size-button-s, 32px);
79
79
  gap:var(--space-button-s-gap, 4px);
80
80
  padding-right:var(--space-button-s-from-icon, 8px);
@@ -102,7 +102,7 @@
102
102
  max-height:var(--size-icon-container-s, 24px);
103
103
  }
104
104
  .button[data-size=m][data-variant=label-only]{
105
- border-radius:var(--radius-button-m, 0px);
105
+ border-radius:var(--radius-button-m, 2px);
106
106
  height:var(--size-button-m, 40px);
107
107
  padding-right:var(--space-button-m-from-label, 24px);
108
108
  padding-left:var(--space-button-m-from-label, 24px);
@@ -110,13 +110,13 @@
110
110
  min-width:var(--size-button-mininal-width-m, 0px);
111
111
  }
112
112
  .button[data-size=m][data-variant=icon-only]{
113
- border-radius:var(--radius-button-m, 0px);
113
+ border-radius:var(--radius-button-m, 2px);
114
114
  height:var(--size-button-m, 40px);
115
115
  width:var(--size-button-m, 40px);
116
116
  border-width:var(--border-width-button-outline-single, 1px);
117
117
  }
118
118
  .button[data-size=m][data-variant=icon-after]{
119
- border-radius:var(--radius-button-m, 0px);
119
+ border-radius:var(--radius-button-m, 2px);
120
120
  height:var(--size-button-m, 40px);
121
121
  gap:var(--space-button-m-gap, 4px);
122
122
  padding-right:var(--space-button-m-from-icon, 16px);
@@ -144,7 +144,7 @@
144
144
  max-height:var(--size-icon-container-s, 24px);
145
145
  }
146
146
  .button[data-size=l][data-variant=label-only]{
147
- border-radius:var(--radius-button-l, 0px);
147
+ border-radius:var(--radius-button-l, 2px);
148
148
  height:var(--size-button-l, 48px);
149
149
  padding-right:var(--space-button-l-from-label, 32px);
150
150
  padding-left:var(--space-button-l-from-label, 32px);
@@ -152,13 +152,13 @@
152
152
  min-width:var(--size-button-mininal-width-l, 0px);
153
153
  }
154
154
  .button[data-size=l][data-variant=icon-only]{
155
- border-radius:var(--radius-button-l, 0px);
155
+ border-radius:var(--radius-button-l, 2px);
156
156
  height:var(--size-button-l, 48px);
157
157
  width:var(--size-button-l, 48px);
158
158
  border-width:var(--border-width-button-outline-single, 1px);
159
159
  }
160
160
  .button[data-size=l][data-variant=icon-after]{
161
- border-radius:var(--radius-button-l, 0px);
161
+ border-radius:var(--radius-button-l, 2px);
162
162
  height:var(--size-button-l, 48px);
163
163
  gap:var(--space-button-l-gap, 4px);
164
164
  padding-right:var(--space-button-l-from-icon, 24px);
@@ -175,38 +175,35 @@
175
175
  .button[data-loading][data-variant=label-only] .label{
176
176
  opacity:var(--opacity-a0, 0);
177
177
  }
178
- .button[data-appearance=fluorescent-yellow]{
179
- border-color:var(--sys-fluorescent-yellow-accent-default, #cff500);
180
- }
181
178
  .button[data-appearance=fluorescent-yellow] .label{
182
179
  color:var(--sys-fluorescent-yellow-accent-default, #cff500);
183
180
  }
184
181
  .button[data-appearance=fluorescent-yellow] .icon{
185
182
  color:var(--sys-fluorescent-yellow-accent-default, #cff500);
186
183
  }
184
+ .button[data-appearance=fluorescent-yellow]{
185
+ border-color:var(--sys-fluorescent-yellow-accent-default, #cff500);
186
+ }
187
187
  @media (hover: hover){
188
- .button[data-appearance=fluorescent-yellow]:hover{
189
- border-color:var(--sys-fluorescent-yellow-accent-hovered, #abcb0f);
190
- }
191
188
  .button[data-appearance=fluorescent-yellow]:hover .label{
192
189
  color:var(--sys-fluorescent-yellow-accent-hovered, #abcb0f);
193
190
  }
194
191
  .button[data-appearance=fluorescent-yellow]:hover .icon{
195
192
  color:var(--sys-fluorescent-yellow-accent-hovered, #abcb0f);
196
193
  }
197
- }
198
- @media (hover: none) or (hover: hover){
199
- .button[data-appearance=fluorescent-yellow]:focus-visible{
194
+ .button[data-appearance=fluorescent-yellow]:hover{
200
195
  border-color:var(--sys-fluorescent-yellow-accent-hovered, #abcb0f);
201
196
  }
197
+ }
198
+ @media (hover: none) or (hover: hover){
202
199
  .button[data-appearance=fluorescent-yellow]:focus-visible .label{
203
200
  color:var(--sys-fluorescent-yellow-accent-hovered, #abcb0f);
204
201
  }
205
202
  .button[data-appearance=fluorescent-yellow]:focus-visible .icon{
206
203
  color:var(--sys-fluorescent-yellow-accent-hovered, #abcb0f);
207
204
  }
208
- .button[data-appearance=fluorescent-yellow]:active{
209
- border-color:var(--sys-fluorescent-yellow-accent-pressed, #859c2d);
205
+ .button[data-appearance=fluorescent-yellow]:focus-visible{
206
+ border-color:var(--sys-fluorescent-yellow-accent-hovered, #abcb0f);
210
207
  }
211
208
  .button[data-appearance=fluorescent-yellow]:active .label{
212
209
  color:var(--sys-fluorescent-yellow-accent-pressed, #859c2d);
@@ -214,7 +211,7 @@
214
211
  .button[data-appearance=fluorescent-yellow]:active .icon{
215
212
  color:var(--sys-fluorescent-yellow-accent-pressed, #859c2d);
216
213
  }
217
- .button[data-appearance=fluorescent-yellow][data-loading]{
214
+ .button[data-appearance=fluorescent-yellow]:active{
218
215
  border-color:var(--sys-fluorescent-yellow-accent-pressed, #859c2d);
219
216
  }
220
217
  .button[data-appearance=fluorescent-yellow][data-loading] .label{
@@ -223,8 +220,8 @@
223
220
  .button[data-appearance=fluorescent-yellow][data-loading] .icon{
224
221
  color:var(--sys-fluorescent-yellow-accent-pressed, #859c2d);
225
222
  }
226
- .button[data-appearance=fluorescent-yellow]:disabled, .button[data-appearance=fluorescent-yellow][data-disabled]{
227
- border-color:var(--sys-neutral-decor-disabled, #e6e8ef);
223
+ .button[data-appearance=fluorescent-yellow][data-loading]{
224
+ border-color:var(--sys-fluorescent-yellow-accent-pressed, #859c2d);
228
225
  }
229
226
  .button[data-appearance=fluorescent-yellow]:disabled .label, .button[data-appearance=fluorescent-yellow][data-disabled] .label{
230
227
  color:var(--sys-neutral-text-disabled, #aaaebd);
@@ -232,9 +229,9 @@
232
229
  .button[data-appearance=fluorescent-yellow]:disabled .icon, .button[data-appearance=fluorescent-yellow][data-disabled] .icon{
233
230
  color:var(--sys-neutral-text-disabled, #aaaebd);
234
231
  }
235
- }
236
- .button[data-appearance=graphite]{
237
- border-color:var(--sys-graphite-accent-default, #222222);
232
+ .button[data-appearance=fluorescent-yellow]:disabled, .button[data-appearance=fluorescent-yellow][data-disabled]{
233
+ border-color:var(--sys-neutral-decor-disabled, #e6e8ef);
234
+ }
238
235
  }
239
236
  .button[data-appearance=graphite] .label{
240
237
  color:var(--sys-graphite-accent-default, #222222);
@@ -242,29 +239,29 @@
242
239
  .button[data-appearance=graphite] .icon{
243
240
  color:var(--sys-graphite-accent-default, #222222);
244
241
  }
242
+ .button[data-appearance=graphite]{
243
+ border-color:var(--sys-graphite-accent-default, #222222);
244
+ }
245
245
  @media (hover: hover){
246
- .button[data-appearance=graphite]:hover{
247
- border-color:var(--sys-graphite-accent-hovered, #383838);
248
- }
249
246
  .button[data-appearance=graphite]:hover .label{
250
247
  color:var(--sys-graphite-accent-hovered, #383838);
251
248
  }
252
249
  .button[data-appearance=graphite]:hover .icon{
253
250
  color:var(--sys-graphite-accent-hovered, #383838);
254
251
  }
255
- }
256
- @media (hover: none) or (hover: hover){
257
- .button[data-appearance=graphite]:focus-visible{
252
+ .button[data-appearance=graphite]:hover{
258
253
  border-color:var(--sys-graphite-accent-hovered, #383838);
259
254
  }
255
+ }
256
+ @media (hover: none) or (hover: hover){
260
257
  .button[data-appearance=graphite]:focus-visible .label{
261
258
  color:var(--sys-graphite-accent-hovered, #383838);
262
259
  }
263
260
  .button[data-appearance=graphite]:focus-visible .icon{
264
261
  color:var(--sys-graphite-accent-hovered, #383838);
265
262
  }
266
- .button[data-appearance=graphite]:active{
267
- border-color:var(--sys-graphite-accent-pressed, #4e4e4e);
263
+ .button[data-appearance=graphite]:focus-visible{
264
+ border-color:var(--sys-graphite-accent-hovered, #383838);
268
265
  }
269
266
  .button[data-appearance=graphite]:active .label{
270
267
  color:var(--sys-graphite-accent-pressed, #4e4e4e);
@@ -272,7 +269,7 @@
272
269
  .button[data-appearance=graphite]:active .icon{
273
270
  color:var(--sys-graphite-accent-pressed, #4e4e4e);
274
271
  }
275
- .button[data-appearance=graphite][data-loading]{
272
+ .button[data-appearance=graphite]:active{
276
273
  border-color:var(--sys-graphite-accent-pressed, #4e4e4e);
277
274
  }
278
275
  .button[data-appearance=graphite][data-loading] .label{
@@ -281,8 +278,8 @@
281
278
  .button[data-appearance=graphite][data-loading] .icon{
282
279
  color:var(--sys-graphite-accent-pressed, #4e4e4e);
283
280
  }
284
- .button[data-appearance=graphite]:disabled, .button[data-appearance=graphite][data-disabled]{
285
- border-color:var(--sys-neutral-decor-disabled, #e6e8ef);
281
+ .button[data-appearance=graphite][data-loading]{
282
+ border-color:var(--sys-graphite-accent-pressed, #4e4e4e);
286
283
  }
287
284
  .button[data-appearance=graphite]:disabled .label, .button[data-appearance=graphite][data-disabled] .label{
288
285
  color:var(--sys-neutral-text-disabled, #aaaebd);
@@ -290,6 +287,9 @@
290
287
  .button[data-appearance=graphite]:disabled .icon, .button[data-appearance=graphite][data-disabled] .icon{
291
288
  color:var(--sys-neutral-text-disabled, #aaaebd);
292
289
  }
290
+ .button[data-appearance=graphite]:disabled, .button[data-appearance=graphite][data-disabled]{
291
+ border-color:var(--sys-neutral-decor-disabled, #e6e8ef);
292
+ }
293
293
  }
294
294
  .button[data-appearance=fluorescent-yellow]:focus-visible{
295
295
  outline-color:var(--sys-available-complementary, #15151b);
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@cloud-ru/uikit-product-button-predefined",
3
3
  "title": "Button Predefined",
4
- "version": "0.7.15",
4
+ "version": "1.0.1-preview-23c44fe9.0",
5
5
  "sideEffects": [
6
6
  "*.css",
7
7
  "*.woff",
@@ -36,9 +36,9 @@
36
36
  },
37
37
  "scripts": {},
38
38
  "dependencies": {
39
- "@cloud-ru/uikit-product-icons": "16.1.1",
40
- "@cloud-ru/uikit-product-mobile-dropdown": "0.9.31",
41
- "@cloud-ru/uikit-product-utils": "8.1.0",
39
+ "@cloud-ru/uikit-product-icons": "16.1.2-preview-23c44fe9.0",
40
+ "@cloud-ru/uikit-product-mobile-dropdown": "1.0.1-preview-23c44fe9.0",
41
+ "@cloud-ru/uikit-product-utils": "8.1.1-preview-23c44fe9.0",
42
42
  "@snack-uikit/button": "0.19.16",
43
43
  "@snack-uikit/dropdown": "0.4.5",
44
44
  "@snack-uikit/list": "0.25.0",
@@ -47,5 +47,5 @@
47
47
  "classnames": "2.5.1",
48
48
  "uncontrollable": "8.0.4"
49
49
  },
50
- "gitHead": "1a98d6d9bff32edcbb3f9b0be0a14dce3f2abe5d"
50
+ "gitHead": "eb43cd21d0a4d229011e2f7e87f87d862dcda635"
51
51
  }
package/src/components/ButtonPromo/styles.module.scss CHANGED
@@ -1,4 +1,4 @@
1
- @use '@sbercloud/figma-tokens-web/build/scss/components/styles-tokens-button-buttonFilled' as buttonStyles;
1
+ @use '@cloud-ru/figma-tokens-web/build/scss/components/styles-tokens-button-buttonFilled' as buttonStyles;
2
2
  @use '../../styles.module';
3
3
 
4
4
  $appearances: 'fluorescent-yellow', 'graphite';
package/src/components/ButtonPromoOutline/styles.module.scss CHANGED
@@ -1,4 +1,4 @@
1
- @use '@sbercloud/figma-tokens-web/build/scss/components/styles-tokens-button-buttonOutline' as buttonStyles;
1
+ @use '@cloud-ru/figma-tokens-web/build/scss/components/styles-tokens-button-buttonOutline' as buttonStyles;
2
2
  @use '../../styles.module';
3
3
 
4
4
  $appearances: 'fluorescent-yellow', 'graphite';
package/src/helperComponents/ButtonPrivate/styles.module.scss CHANGED
@@ -1,4 +1,4 @@
1
- @use '@sbercloud/figma-tokens-web/build/scss/components/styles-tokens-element';
1
+ @use '@cloud-ru/figma-tokens-web/build/scss/components/styles-tokens-element';
2
2
 
3
3
  .button {
4
4
  cursor: pointer;
package/src/styles.module.scss CHANGED
@@ -1,4 +1,4 @@
1
- @use '@sbercloud/figma-tokens-web/build/scss/components/styles-tokens-element';
1
+ @use '@cloud-ru/figma-tokens-web/build/scss/components/styles-tokens-element';
2
2
 
3
3
  @mixin icon-fill($color) {
4
4
  .icon {