@semcore/button 3.3.5 → 4.0.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 (19) hide show
  1. package/CHANGELOG.md +19 -0
  2. package/lib/cjs/Button.js +30 -32
  3. package/lib/cjs/Button.js.map +1 -1
  4. package/lib/cjs/SpinButton.js +3 -3
  5. package/lib/cjs/SpinButton.js.map +1 -1
  6. package/lib/cjs/index.d.ts +52 -0
  7. package/lib/cjs/style/button.shadow.css +50 -99
  8. package/lib/es6/Button.js +30 -32
  9. package/lib/es6/Button.js.map +1 -1
  10. package/lib/es6/SpinButton.js +3 -3
  11. package/lib/es6/SpinButton.js.map +1 -1
  12. package/lib/es6/index.d.ts +52 -0
  13. package/lib/es6/style/button.shadow.css +50 -99
  14. package/lib/types/index.d.ts +1 -1
  15. package/package.json +5 -2
  16. package/src/{Button.js → Button.jsx} +0 -0
  17. package/src/{SpinButton.js → SpinButton.jsx} +3 -3
  18. package/src/index.d.ts +1 -1
  19. package/src/style/button.shadow.css +50 -99
package/src/style/button.shadow.css CHANGED
@@ -8,14 +8,12 @@ SButton {
8
8
  padding: 0;
9
9
  margin: 0;
10
10
  white-space: nowrap;
11
- font-family: inherit;
12
- font-weight: normal;
11
+ font-family: Inter, sans-serif;
13
12
  line-height: normal;
14
13
  text-decoration: none;
15
14
  text-align: center;
16
15
  vertical-align: middle;
17
16
  border: 1px solid transparent;
18
- color: var(--gray40);
19
17
  outline: 0;
20
18
  box-shadow: none;
21
19
  cursor: pointer;
@@ -24,6 +22,8 @@ SButton {
24
22
  user-select: none;
25
23
  touch-action: manipulation;
26
24
  -webkit-tap-highlight-color: transparent;
25
+ font-weight: 500;
26
+ color: var(--gray-500);
27
27
 
28
28
  &::-moz-focus-inner {
29
29
  padding: 0;
@@ -45,135 +45,123 @@ SButton[disabled] {
45
45
  }
46
46
 
47
47
  SButton[keyboardFocused] {
48
- box-shadow: var(--keyborad-focus);
48
+ box-shadow: var(--keyboard-focus);
49
49
  z-index: 1;
50
50
  }
51
51
 
52
- SButton[size='s'] {
53
- height: 18px;
54
- min-width: 18px;
55
- border-radius: 2px;
56
- font-size: 10px;
57
- }
58
-
59
52
  SButton[size='m'] {
60
53
  height: 26px;
61
54
  min-width: 26px;
62
- border-radius: 3px;
63
- font-size: 12px;
64
- }
65
-
66
- SButton[size='l'] {
67
- height: 32px;
68
- min-width: 32px;
69
- border-radius: 4px;
55
+ border-radius: var(--rounded-m);
70
56
  font-size: 14px;
71
57
  }
72
58
 
73
- SButton[size='xl'] {
74
- height: 42px;
75
- min-width: 42px;
76
- border-radius: 5px;
59
+ SButton[size='l'] {
60
+ height: 38px;
61
+ min-width: 38px;
62
+ border-radius: var(--rounded-m);
77
63
  font-size: 16px;
78
64
  }
79
65
 
80
66
  SButton[theme='primary-info'] {
81
67
  color: var(--white);
82
- background-color: var(--light-blue);
68
+ background-color: var(--blue-400);
83
69
 
84
70
  &:hover {
85
- background-color: var(--denim-blue);
71
+ background-color: var(--blue-500);
86
72
  }
87
73
 
88
74
  &:active,
89
75
  &[active] {
90
- background-color: color-mod(var(--denim-blue) shade(5%) saturation(+5%));
76
+ background-color: var(--blue-600);
91
77
  }
92
78
  }
93
79
 
94
80
  SButton[theme='primary-success'] {
95
81
  color: var(--white);
96
- background-color: var(--green);
82
+ background-color: var(--green-400);
97
83
 
98
84
  &:hover {
99
- background-color: var(--dark-green);
85
+ background-color: var(--green-500);
100
86
  }
101
87
 
102
88
  &:active,
103
89
  &[active] {
104
- background-color: color-mod(var(--dark-green) shade(5%) saturation(+5%));
90
+ background-color: var(--green-600);
105
91
  }
106
92
  }
107
93
 
108
94
  SButton[theme='primary-warning'] {
109
- background-color: var(--orange);
110
- color: #fff;
95
+ background-color: var(--orange-400);
96
+ color: var(--white);
111
97
 
112
98
  &:hover {
113
- background-color: var(--dark-orange);
99
+ background-color: var(--orange-500);
114
100
  }
115
101
 
116
102
  &:active,
117
103
  &[active] {
118
- background-color: color-mod(var(--dark-orange) shade(5%) saturation(+5%));
104
+ background-color: color-mod(var(--orange-500) shade(5%) saturation(+5%));
119
105
  }
120
106
  }
121
107
 
122
108
  SButton[theme='primary-danger'] {
123
- background-color: var(--red);
124
- color: #fff;
109
+ background-color: var(--red-400);
110
+ color: var(--white);
125
111
 
126
112
  &:hover {
127
- background-color: var(--dark-red);
113
+ background-color: var(--red-500);
128
114
  }
129
115
 
130
116
  &:active,
131
117
  &[active] {
132
- background-color: color-mod(var(--dark-red) shade(5%) saturation(+5%));
118
+ background-color: var(--red-600);
133
119
  }
134
120
  }
135
121
 
136
122
  SButton[theme='primary-invert'] {
137
123
  background-color: #fff;
138
- color: var(--gray20);
124
+ color: var(--gray-800);
139
125
 
140
126
  &:hover {
141
- background-color: var(--gray94);
127
+ background-color: var(--gray-50);
142
128
  }
143
129
 
144
130
  &:active,
145
131
  &[active] {
146
- background-color: color-mod(var(--gray94) shade(5%) saturation(+5%));
132
+ background-color: var(--gray-100);
147
133
  }
148
134
  }
149
135
 
150
136
  SButton[theme='secondary-muted'] {
151
- color: var(--gray60);
152
- border-color: var(--stone);
153
- background-color: color-mod(var(--stone) a(10%));
137
+ color: var(--gray-500);
138
+ border-color: var(--gray-200);
139
+ background-color: color-mod(var(--gray-400) a(10%));
154
140
 
155
141
  &:hover {
156
- background-color: color-mod(var(--stone) a(20%));
142
+ background-color: color-mod(var(--gray-400) a(20%));
143
+ color: var(--gray-800);
157
144
  }
158
145
 
159
146
  &:active,
160
147
  &[active] {
161
- background-color: color-mod(var(--stone) a(30%));
148
+ background-color: color-mod(var(--gray-400) a(30%));
149
+ color: var(--gray-800);
162
150
  }
163
151
  }
164
152
 
165
153
  SButton[theme='secondary-info'] {
166
- background-color: color-mod(var(--light-blue) a(5%));
167
- color: var(--light-blue);
168
- border-color: var(--light-blue);
154
+ background-color: color-mod(var(--blue-400) a(5%));
155
+ color: var(--blue-400);
156
+ border-color: var(--blue-400);
169
157
 
170
158
  &:hover {
171
- background-color: color-mod(var(--denim-blue) a(20%));
159
+ background-color: color-mod(var(--blue-500) a(20%));
172
160
  }
173
161
 
174
162
  &:active,
175
163
  &[active] {
176
- background-color: color-mod(var(--denim-blue) a(30%));
164
+ background-color: color-mod(var(--blue-500) a(30%));
177
165
  }
178
166
  }
179
167
 
@@ -183,7 +171,7 @@ SButton[theme='secondary-invert'] {
183
171
  border-color: #fff;
184
172
 
185
173
  &:hover {
186
- background-color: color-mod(#fff a(20%));
174
+ background-color: color-mod(#fff a(10%));
187
175
  }
188
176
 
189
177
  &:active,
@@ -193,30 +181,32 @@ SButton[theme='secondary-invert'] {
193
181
  }
194
182
 
195
183
  SButton[theme='tertiary-info'] {
196
- color: var(--denim-blue);
184
+ color: var(--blue-500);
197
185
  background-color: transparent;
198
186
 
199
187
  &:hover {
200
- background-color: color-mod(var(--light-blue) a(20%));
188
+ background-color: color-mod(var(--blue-400) a(20%));
201
189
  }
202
190
 
203
191
  &:active,
204
192
  &[active] {
205
- background-color: color-mod(var(--light-blue) a(30%));
193
+ background-color: color-mod(var(--blue-400) a(30%));
206
194
  }
207
195
  }
208
196
 
209
197
  SButton[theme='tertiary-muted'] {
210
- color: var(--gray60);
198
+ color: var(--gray-500);
211
199
  background-color: transparent;
212
200
 
213
201
  &:hover {
214
- background-color: color-mod(var(--stone) a(20%));
202
+ background-color: color-mod(var(--gray-400) a(20%));
203
+ color: var(--gray-800);
215
204
  }
216
205
 
217
206
  &:active,
218
207
  &[active] {
219
- background-color: color-mod(var(--stone) a(30%));
208
+ background-color: color-mod(var(--gray-400) a(30%));
209
+ color: var(--gray-800);
220
210
  }
221
211
  }
222
212
 
@@ -225,7 +215,7 @@ SButton[theme='tertiary-invert'] {
225
215
  background-color: transparent;
226
216
 
227
217
  &:hover {
228
- background-color: color-mod(#fff a(20%));
218
+ background-color: color-mod(#fff a(10%));
229
219
  }
230
220
 
231
221
  &:active,
@@ -295,27 +285,18 @@ SInner[loading] {
295
285
 
296
286
  SText {
297
287
  display: inline-flex;
298
- line-height: 1.1;
299
- }
300
-
301
- SText[size='s'] {
302
- margin-left: 4px;
303
- margin-right: 4px;
304
288
  }
305
289
 
306
290
  SText[size='m'] {
307
291
  margin-left: 8px;
308
292
  margin-right: 8px;
293
+ line-height: var(--lh-200);
309
294
  }
310
295
 
311
296
  SText[size='l'] {
312
- margin-left: 8px;
313
- margin-right: 8px;
314
- }
315
-
316
- SText[size='xl'] {
317
297
  margin-left: 12px;
318
298
  margin-right: 12px;
299
+ line-height: var(--lh-300);
319
300
  }
320
301
 
321
302
  SAddon {
@@ -324,21 +305,6 @@ SAddon {
324
305
  justify-content: center;
325
306
  }
326
307
 
327
- SAddon[size='s'] {
328
- &:not(:only-child):first-child {
329
- margin-left: 4px;
330
- }
331
-
332
- &:not(:only-child):last-child {
333
- margin-right: 4px;
334
- }
335
-
336
- &:only-child {
337
- margin-left: -2px;
338
- margin-right: -2px;
339
- }
340
- }
341
-
342
308
  SAddon[size='m'] {
343
309
  &:not(:only-child):first-child {
344
310
  margin-left: 8px;
@@ -368,18 +334,3 @@ SAddon[size='l'] {
368
334
  margin-right: -4px;
369
335
  }
370
336
  }
371
-
372
- SAddon[size='xl'] {
373
- &:not(:only-child):first-child {
374
- margin-left: 12px;
375
- }
376
-
377
- &:not(:only-child):last-child {
378
- margin-right: 12px;
379
- }
380
-
381
- &:only-child {
382
- margin-left: -6px;
383
- margin-right: -6px;
384
- }
385
- }