@cloud-ru/uikit-product-button-predefined 0.7.14 → 1.0.1-preview-b95fca4e.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 +17 -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
@@ -3,6 +3,17 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ## 0.7.15 (2025-12-17)
7
+
8
+ ### Only dependencies have been changed
9
+ * [@cloud-ru/uikit-product-icons@16.1.1](https://gitverse.ru/cloud-ru-tech/uikit-product/-/blob/master/packages/icons/CHANGELOG.md)
10
+ * [@cloud-ru/uikit-product-mobile-dropdown@0.9.31](https://gitverse.ru/cloud-ru-tech/uikit-product/-/blob/master/packages/mobile-dropdown/CHANGELOG.md)
11
+ * [@cloud-ru/uikit-product-utils@8.1.0](https://gitverse.ru/cloud-ru-tech/uikit-product/-/blob/master/packages/utils/CHANGELOG.md)
12
+
13
+
14
+
15
+
16
+
6
17
  ## 0.7.14 (2025-12-12)
7
18
 
8
19
  ### Only dependencies have been changed
@@ -824,7 +835,7 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
824
835
 
825
836
  ### Features
826
837
 
827
- * **[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))
828
839
 
829
840
 
830
841
 
@@ -845,7 +856,7 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
845
856
 
846
857
  ### Features
847
858
 
848
- * **[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))
849
860
 
850
861
 
851
862
 
@@ -901,7 +912,7 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
901
912
 
902
913
  ### Dependencies
903
914
 
904
- * **[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))
905
916
 
906
917
 
907
918
 
@@ -922,7 +933,7 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
922
933
 
923
934
  ### Bug Fixes
924
935
 
925
- * **[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))
926
937
 
927
938
 
928
939
 
@@ -970,7 +981,7 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
970
981
 
971
982
  ### Bug Fixes
972
983
 
973
- * **[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))
974
985
 
975
986
 
976
987
 
@@ -1077,7 +1088,7 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
1077
1088
 
1078
1089
  ### Features
1079
1090
 
1080
- * **[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))
1081
1092
 
1082
1093
 
1083
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.14",
4
+ "version": "1.0.1-preview-b95fca4e.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.0",
40
- "@cloud-ru/uikit-product-mobile-dropdown": "0.9.30",
41
- "@cloud-ru/uikit-product-utils": "8.0.2",
39
+ "@cloud-ru/uikit-product-icons": "16.1.2-preview-b95fca4e.0",
40
+ "@cloud-ru/uikit-product-mobile-dropdown": "1.0.1-preview-b95fca4e.0",
41
+ "@cloud-ru/uikit-product-utils": "8.1.1-preview-b95fca4e.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": "7303f734eef30f1ac7ac3a279bcf324dcd549059"
50
+ "gitHead": "5e59d6341e92ce7320739df54ab7e6f6d0a7aa26"
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 {