@semcore/button 4.2.4 → 4.3.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 (7) hide show
  1. package/CHANGELOG.md +3 -3
  2. package/lib/cjs/Button.js +27 -27
  3. package/lib/cjs/style/button.shadow.css +93 -82
  4. package/lib/es6/Button.js +27 -27
  5. package/lib/es6/style/button.shadow.css +93 -82
  6. package/package.json +1 -1
  7. package/src/style/button.shadow.css +93 -82
package/lib/es6/style/button.shadow.css CHANGED
@@ -1,5 +1,3 @@
1
- @import '@semcore/utils/style/var.css';
2
-
3
1
  SButton {
4
2
  position: relative;
5
3
  display: inline-block;
@@ -8,7 +6,7 @@ SButton {
8
6
  padding: 0;
9
7
  margin: 0;
10
8
  white-space: nowrap;
11
- font-family: Inter, sans-serif;
9
+ font-family: var(--intergalactic-base, Inter), sans-serif;
12
10
  line-height: normal;
13
11
  text-decoration: none;
14
12
  text-align: center;
@@ -22,8 +20,8 @@ SButton {
22
20
  user-select: none;
23
21
  touch-action: manipulation;
24
22
  -webkit-tap-highlight-color: transparent;
25
- font-weight: 500;
26
- color: var(--gray-500);
23
+ font-weight: var(--intergalactic-medium, 500);
24
+ color: var(--intergalactic-text-secondary, #6c6e79);
27
25
 
28
26
  &::-moz-focus-inner {
29
27
  padding: 0;
@@ -39,188 +37,199 @@ SButton {
39
37
  }
40
38
 
41
39
  SButton[disabled] {
42
- opacity: var(--disabled-opacity);
40
+ opacity: var(--intergalactic-disabled-opacity, 0.3);
43
41
  cursor: default;
44
- pointer-events: none; /* Disable link interactions */
42
+ pointer-events: none;
45
43
  }
46
44
 
47
45
  SButton[keyboardFocused] {
48
- box-shadow: var(--keyboard-focus);
46
+ box-shadow: var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.3));
49
47
  z-index: 1;
50
48
  }
51
-
52
49
  SButton[size='m'] {
53
50
  height: 28px;
54
51
  min-width: 28px;
55
- border-radius: var(--rounded-m);
56
- font-size: 14px;
52
+ border-radius: var(--intergalactic-rounded-medium, 6px);
53
+ font-size: var(--intergalactic-fs-200, 14px);
57
54
  }
58
55
 
59
56
  SButton[size='l'] {
60
57
  height: 40px;
61
58
  min-width: 40px;
62
- border-radius: var(--rounded-m);
63
- font-size: 16px;
59
+ border-radius: var(--intergalactic-rounded-medium, 6px);
60
+ font-size: var(--intergalactic-fs-300, 16px);
64
61
  }
65
62
 
66
63
  SButton[theme='primary-info'] {
67
- color: var(--white);
68
- background-color: var(--blue-400);
64
+ color: var(--intergalactic-text-primary-invert, #ffffff);
65
+ background-color: var(--intergalactic-control-primary-info, #008ff8);
69
66
 
70
67
  &:hover {
71
- background-color: var(--blue-500);
68
+ background-color: var(--intergalactic-control-primary-info-hover, #006dca);
72
69
  }
73
70
 
74
71
  &:active,
75
72
  &[active] {
76
- background-color: var(--blue-600);
73
+ background-color: var(--intergalactic-control-primary-info-active, #044792);
77
74
  }
78
75
  }
79
76
 
80
77
  SButton[theme='primary-success'] {
81
- color: var(--white);
82
- background-color: var(--green-400);
78
+ color: var(--intergalactic-text-primary-invert, #ffffff);
79
+ background-color: var(--intergalactic-control-primary-success, #009f81);
83
80
 
84
81
  &:hover {
85
- background-color: var(--green-500);
82
+ background-color: var(--intergalactic-control-primary-success-hover, #007c65);
86
83
  }
87
84
 
88
85
  &:active,
89
86
  &[active] {
90
- background-color: var(--green-600);
87
+ background-color: var(--intergalactic-control-primary-success-active, #055345);
91
88
  }
92
89
  }
93
90
 
94
91
  SButton[theme='primary-warning'] {
95
- background-color: var(--orange-400);
96
- color: var(--white);
92
+ color: var(--intergalactic-text-primary-invert, #ffffff);
93
+ background-color: var(--intergalactic-icon-primary-warning, #ff642d);
97
94
 
98
95
  &:hover {
99
- background-color: var(--orange-500);
96
+ background-color: var(--intergalactic-icon-primary-warning-hover-active, #c33909);
100
97
  }
101
98
 
102
99
  &:active,
103
100
  &[active] {
104
- background-color: var(--orange-600);
101
+ background-color: var(--intergalactic-icon-primary-warning-hover-active, #c33909);
105
102
  }
106
103
  }
107
104
 
108
105
  SButton[theme='primary-danger'] {
109
- background-color: var(--red-400);
110
- color: var(--white);
106
+ color: var(--intergalactic-text-primary-invert, #ffffff);
107
+ background-color: var(--intergalactic-control-primary-critical, #ff4953);
111
108
 
112
109
  &:hover {
113
- background-color: var(--red-500);
110
+ background-color: var(--intergalactic-control-primary-critical-hover, #d1002f);
114
111
  }
115
112
 
116
113
  &:active,
117
114
  &[active] {
118
- background-color: var(--red-600);
115
+ background-color: var(--intergalactic-control-primary-critical-active, #8e0016);
119
116
  }
120
117
  }
121
118
 
122
119
  SButton[theme='primary-invert'] {
123
- background-color: #fff;
124
- color: var(--gray-800);
120
+ color: var(--intergalactic-text-primary, #191b23);
121
+ background-color: var(--intergalactic-control-primary-invert, #ffffff);
125
122
 
126
123
  &:hover {
127
- background-color: var(--gray-50);
124
+ background-color: var(--intergalactic-control-primary-invert-hover, #f4f5f9);
128
125
  }
129
126
 
130
127
  &:active,
131
128
  &[active] {
132
- background-color: var(--gray-100);
129
+ background-color: var(--intergalactic-control-primary-invert-active, #e0e1e9);
133
130
  }
134
131
  }
135
132
 
136
133
  SButton[theme='secondary-muted'] {
137
- color: var(--gray-500);
138
- border-color: var(--gray-200);
139
- background-color: color-mod(var(--gray-400) a(10%));
134
+ color: var(--intergalactic-text-secondary, #6c6e79);
135
+ border-color: var(--intergalactic-border-primary, #c4c7cf);
136
+ background-color: var(--intergalactic-control-secondary-neutral, rgba(138, 142, 155, 0.1));
140
137
 
141
138
  &:hover {
142
- background-color: color-mod(var(--gray-400) a(20%));
143
- color: var(--gray-800);
139
+ background-color: var(
140
+ --intergalactic-control-secondary-neutral-hover,
141
+ rgba(138, 142, 155, 0.2)
142
+ );
143
+ color: var(--intergalactic-text-primary, #191b23);
144
144
  }
145
145
 
146
146
  &:active,
147
147
  &[active] {
148
- background-color: color-mod(var(--gray-400) a(30%));
149
- color: var(--gray-800);
148
+ background-color: var(
149
+ --intergalactic-control-secondary-neutral-active,
150
+ rgba(138, 142, 155, 0.3)
151
+ );
152
+ color: var(--intergalactic-text-primary, #191b23);
150
153
  }
151
154
  }
152
155
 
153
156
  SButton[theme='secondary-info'] {
154
- background-color: color-mod(var(--blue-400) a(5%));
155
- color: var(--blue-400);
156
- border-color: var(--blue-400);
157
+ background-color: var(--intergalactic-control-secondary-info, rgba(0, 143, 248, 0.1));
158
+ color: var(--intergalactic-control-primary-info, #008ff8);
159
+ border-color: var(--intergalactic-control-primary-info, #008ff8);
157
160
 
158
161
  &:hover {
159
- background-color: color-mod(var(--blue-500) a(20%));
162
+ background-color: var(--intergalactic-control-secondary-info-hover, rgba(0, 143, 248, 0.2));
160
163
  }
161
164
 
162
165
  &:active,
163
166
  &[active] {
164
- background-color: color-mod(var(--blue-500) a(30%));
167
+ background-color: var(--intergalactic-control-secondary-info-active, rgba(0, 143, 248, 0.3));
165
168
  }
166
169
  }
167
170
 
168
171
  SButton[theme='secondary-invert'] {
169
- background-color: color-mod(#fff a(5%));
170
- color: #fff;
171
- border-color: #fff;
172
+ color: var(--intergalactic-text-primary-invert, #ffffff);
173
+ border-color: var(--intergalactic-border-primary-invert, #ffffff);
174
+ background-color: var(--intergalactic-control-secondary-invert, rgba(255, 255, 255, 0.05));
172
175
 
173
176
  &:hover {
174
- background-color: color-mod(#fff a(10%));
177
+ background-color: var(--intergalactic-control-secondary-invert-hover, rgba(255, 255, 255, 0.1));
175
178
  }
176
179
 
177
180
  &:active,
178
181
  &[active] {
179
- background-color: color-mod(#fff a(30%));
182
+ background-color: var(
183
+ --intergalactic-control-secondary-invert-active,
184
+ rgba(255, 255, 255, 0.3)
185
+ );
180
186
  }
181
187
  }
182
188
 
183
189
  SButton[theme='tertiary-info'] {
184
- color: var(--blue-500);
185
- background-color: transparent;
190
+ color: var(--intergalactic-text-link, #006dca);
191
+ background-color: var(--intergalactic-control-tertiary-info, rgba(0, 143, 248, 0));
186
192
 
187
193
  &:hover {
188
- background-color: color-mod(var(--blue-400) a(20%));
194
+ background-color: var(--intergalactic-control-tertiary-info-hover, rgba(0, 143, 248, 0.2));
189
195
  }
190
196
 
191
197
  &:active,
192
198
  &[active] {
193
- background-color: color-mod(var(--blue-400) a(30%));
199
+ background-color: var(--intergalactic-control-tertiary-info-active, rgba(0, 143, 248, 0.3));
194
200
  }
195
201
  }
196
202
 
197
203
  SButton[theme='tertiary-muted'] {
198
- color: var(--gray-500);
199
- background-color: transparent;
204
+ color: var(--intergalactic-text-secondary, #6c6e79);
205
+ background-color: var(--intergalactic-control-tertiary-neutral, rgba(138, 142, 155, 0));
200
206
 
201
207
  &:hover {
202
- background-color: color-mod(var(--gray-400) a(20%));
203
- color: var(--gray-800);
208
+ background-color: var(--intergalactic-control-tertiary-neutral-hover, rgba(138, 142, 155, 0.2));
209
+ color: var(--intergalactic-text-primary, #191b23);
204
210
  }
205
211
 
206
212
  &:active,
207
213
  &[active] {
208
- background-color: color-mod(var(--gray-400) a(30%));
209
- color: var(--gray-800);
214
+ background-color: var(
215
+ --intergalactic-control-tertiary-neutral-active,
216
+ rgba(138, 142, 155, 0.3)
217
+ );
218
+ color: var(--intergalactic-text-primary, #191b23);
210
219
  }
211
220
  }
212
221
 
213
222
  SButton[theme='tertiary-invert'] {
214
- color: #fff;
215
- background-color: transparent;
223
+ color: var(--intergalactic-text-primary-invert, #ffffff);
224
+ background-color: var(--intergalactic-control-tertiary-invert, rgba(255, 255, 255, 0));
216
225
 
217
226
  &:hover {
218
- background-color: color-mod(#fff a(10%));
227
+ background-color: var(--intergalactic-control-tertiary-invert-hover, rgba(255, 255, 255, 0.1));
219
228
  }
220
229
 
221
230
  &:active,
222
231
  &[active] {
223
- background-color: color-mod(#fff a(30%));
232
+ background-color: var(--intergalactic-control-tertiary-invert-active, rgba(255, 255, 255, 0.3));
224
233
  }
225
234
  }
226
235
 
@@ -231,34 +240,36 @@ SButton[neighborLocation='right'] {
231
240
 
232
241
  SButton[neighborLocation='both'] {
233
242
  border-radius: 0;
243
+ /* disable-tokens-validator */
234
244
  margin-left: -1px;
235
245
 
236
246
  &[theme='primary-info'],
237
247
  &[theme='primary-success'],
238
248
  &[theme='primary-warning'],
239
249
  &[theme='primary-danger'] {
240
- border-left-color: rgba(255, 255, 255, 0.5);
250
+ border-left-color: var(--intergalactic-neighbor-location-neutral, rgba(255, 255, 255, 0.5));
241
251
  }
242
252
 
243
253
  &[theme='primary-invert'] {
244
- border-left-color: rgba(0, 0, 0, 0.5);
254
+ border-left-color: var(--intergalactic-neighbor-location-invert, rgba(0, 0, 0, 0.5));
245
255
  }
246
256
  }
247
257
 
248
258
  SButton[neighborLocation='left'] {
249
259
  border-top-left-radius: 0;
250
260
  border-bottom-left-radius: 0;
261
+ /* disable-tokens-validator */
251
262
  margin-left: -1px;
252
263
 
253
264
  &[theme='primary-info'],
254
265
  &[theme='primary-success'],
255
266
  &[theme='primary-warning'],
256
267
  &[theme='primary-danger'] {
257
- border-left-color: rgba(255, 255, 255, 0.5);
268
+ border-left-color: var(--intergalactic-neighbor-location-neutral, rgba(255, 255, 255, 0.5));
258
269
  }
259
270
 
260
271
  &[theme='primary-invert'] {
261
- border-left-color: rgba(0, 0, 0, 0.5);
272
+ border-left-color: var(--intergalactic-neighbor-location-invert, rgba(0, 0, 0, 0.5));
262
273
  }
263
274
  }
264
275
 
@@ -288,15 +299,15 @@ SText {
288
299
  }
289
300
 
290
301
  SText[size='m'] {
291
- margin-left: 8px;
292
- margin-right: 8px;
293
- line-height: var(--lh-200);
302
+ margin-left: var(--intergalactic-spacing-2x, 8px);
303
+ margin-right: var(--intergalactic-spacing-2x, 8px);
304
+ line-height: var(--intergalactic-lh-200, 142%);
294
305
  }
295
306
 
296
307
  SText[size='l'] {
297
- margin-left: 12px;
298
- margin-right: 12px;
299
- line-height: var(--lh-300);
308
+ margin-left: var(--intergalactic-spacing-3x, 12px);
309
+ margin-right: var(--intergalactic-spacing-3x, 12px);
310
+ line-height: var(--intergalactic-lh-300, 150%);
300
311
  }
301
312
 
302
313
  SAddon {
@@ -307,30 +318,30 @@ SAddon {
307
318
 
308
319
  SAddon[size='m'] {
309
320
  &:not(:only-child):first-child {
310
- margin-left: 8px;
321
+ margin-left: var(--intergalactic-spacing-2x, 8px);
311
322
  }
312
323
 
313
324
  &:not(:only-child):last-child {
314
- margin-right: 8px;
325
+ margin-right: var(--intergalactic-spacing-2x, 8px);
315
326
  }
316
327
 
317
328
  &:only-child {
318
- margin-left: -4px;
319
- margin-right: -4px;
329
+ margin-left: calc(-1 * var(--intergalactic-spacing-1x, 4px));
330
+ margin-right: calc(-1 * var(--intergalactic-spacing-1x, 4px));
320
331
  }
321
332
  }
322
333
 
323
334
  SAddon[size='l'] {
324
335
  &:not(:only-child):first-child {
325
- margin-left: 8px;
336
+ margin-left: var(--intergalactic-spacing-2x, 8px);
326
337
  }
327
338
 
328
339
  &:not(:only-child):last-child {
329
- margin-right: 8px;
340
+ margin-right: var(--intergalactic-spacing-2x, 8px);
330
341
  }
331
342
 
332
343
  &:only-child {
333
- margin-left: -4px;
334
- margin-right: -4px;
344
+ margin-left: calc(-1 * var(--intergalactic-spacing-1x, 4px));
345
+ margin-right: calc(-1 * var(--intergalactic-spacing-1x, 4px));
335
346
  }
336
347
  }
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@semcore/button",
3
3
  "description": "Semrush Button Component",
4
- "version": "4.2.4",
4
+ "version": "4.3.0",
5
5
  "main": "lib/cjs/index.js",
6
6
  "module": "lib/es6/index.js",
7
7
  "typings": "lib/types/index.d.ts",