@usefui/components 1.7.4 → 1.7.5

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 (5) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/dist/index.js +21 -1
  3. package/dist/index.mjs +21 -1
  4. package/package.json +3 -3
  5. package/src/button/styles/index.ts +21 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,11 @@
1
1
  # @usefui/components
2
2
 
3
+ ## 1.7.5
4
+
5
+ ### Patch Changes
6
+
7
+ - Add missing icons, enhance buttons a11y criterias
8
+
3
9
  ## 1.7.4
4
10
 
5
11
  ### Patch Changes
package/dist/index.js CHANGED
@@ -292,6 +292,8 @@ var ButtonVariantsStyles = import_styled_components.css`
292
292
  );
293
293
  background-size: 100% 200%;
294
294
  background-position: 0% 50%;
295
+ box-shadow: 0 var(--measurement-small-20) var(--measurement-small-20)
296
+ calc(var(--measurement-small-10) * -1) var(--alpha-mono-darkest-60);
295
297
 
296
298
  color: var(--body-color-alpha-80) !important;
297
299
  svg * {
@@ -322,10 +324,12 @@ var ButtonVariantsStyles = import_styled_components.css`
322
324
  background: linear-gradient(
323
325
  180deg,
324
326
  transparent 50%,
325
- var(--contrast-color) 100%
327
+ var(--body-color) 100%
326
328
  );
327
329
  background-size: 100% 200%;
328
330
  background-position: 0% 50%;
331
+ box-shadow: 0 var(--measurement-small-20) var(--measurement-small-20)
332
+ calc(var(--measurement-small-10) * -1) var(--alpha-mono-darkest-60);
329
333
 
330
334
  color: var(--font-color-alpha-60) !important;
331
335
 
@@ -342,6 +346,10 @@ var ButtonVariantsStyles = import_styled_components.css`
342
346
  background-color: var(--font-color-alpha-10);
343
347
  background-position: 0% 75%;
344
348
  border-color: transparent;
349
+
350
+ ::before {
351
+ border-color: var(--font-color-alpha-20);
352
+ }
345
353
  }
346
354
  }
347
355
  &[data-variant="tertiary"] {
@@ -418,6 +426,8 @@ var ButtonVariantsStyles = import_styled_components.css`
418
426
  );
419
427
  background-size: 100% 200%;
420
428
  background-position: 0% 50%;
429
+ box-shadow: 0 var(--measurement-small-20) var(--measurement-small-20)
430
+ calc(var(--measurement-small-20) * -1) var(--alpha-mono-darkest-60);
421
431
 
422
432
  ::before {
423
433
  ${ButtonBeforeDefaultStyles}
@@ -443,6 +453,8 @@ var ButtonVariantsStyles = import_styled_components.css`
443
453
  );
444
454
  background-size: 100% 200%;
445
455
  background-position: 0% 50%;
456
+ box-shadow: 0 var(--measurement-small-20) var(--measurement-small-20)
457
+ calc(var(--measurement-small-10) * -1) var(--alpha-mono-darkest-60);
446
458
 
447
459
  color: var(--alpha-mono-white-80) !important;
448
460
 
@@ -474,6 +486,8 @@ var ButtonVariantsStyles = import_styled_components.css`
474
486
  );
475
487
  background-size: 100% 200%;
476
488
  background-position: 0% 50%;
489
+ box-shadow: 0 var(--measurement-small-20) var(--measurement-small-20)
490
+ calc(var(--measurement-small-10) * -1) var(--alpha-mono-darkest-60);
477
491
 
478
492
  color: var(--alpha-mono-white-80) !important;
479
493
 
@@ -501,6 +515,8 @@ var ButtonVariantsStyles = import_styled_components.css`
501
515
  );
502
516
  background-size: 100% 200%;
503
517
  background-position: 0% 50%;
518
+ box-shadow: 0 var(--measurement-small-20) var(--measurement-small-20)
519
+ calc(var(--measurement-small-10) * -1) var(--alpha-mono-darkest-60);
504
520
 
505
521
  color: var(--alpha-mono-white-80) !important;
506
522
 
@@ -528,6 +544,8 @@ var ButtonVariantsStyles = import_styled_components.css`
528
544
  );
529
545
  background-size: 100% 200%;
530
546
  background-position: 0% 50%;
547
+ box-shadow: 0 var(--measurement-small-20) var(--measurement-small-20)
548
+ calc(var(--measurement-small-10) * -1) var(--alpha-mono-darkest-60);
531
549
 
532
550
  color: var(--alpha-mono-white-80) !important;
533
551
 
@@ -558,6 +576,8 @@ var ButtonVariantsStyles = import_styled_components.css`
558
576
  );
559
577
  background-size: 100% 200%;
560
578
  background-position: 0% 50%;
579
+ box-shadow: 0 var(--measurement-small-20) var(--measurement-small-20)
580
+ calc(var(--measurement-small-10) * -1) var(--alpha-mono-darkest-60);
561
581
 
562
582
  color: var(--alpha-mono-dark-80) !important;
563
583
 
package/dist/index.mjs CHANGED
@@ -148,6 +148,8 @@ var ButtonVariantsStyles = css`
148
148
  );
149
149
  background-size: 100% 200%;
150
150
  background-position: 0% 50%;
151
+ box-shadow: 0 var(--measurement-small-20) var(--measurement-small-20)
152
+ calc(var(--measurement-small-10) * -1) var(--alpha-mono-darkest-60);
151
153
 
152
154
  color: var(--body-color-alpha-80) !important;
153
155
  svg * {
@@ -178,10 +180,12 @@ var ButtonVariantsStyles = css`
178
180
  background: linear-gradient(
179
181
  180deg,
180
182
  transparent 50%,
181
- var(--contrast-color) 100%
183
+ var(--body-color) 100%
182
184
  );
183
185
  background-size: 100% 200%;
184
186
  background-position: 0% 50%;
187
+ box-shadow: 0 var(--measurement-small-20) var(--measurement-small-20)
188
+ calc(var(--measurement-small-10) * -1) var(--alpha-mono-darkest-60);
185
189
 
186
190
  color: var(--font-color-alpha-60) !important;
187
191
 
@@ -198,6 +202,10 @@ var ButtonVariantsStyles = css`
198
202
  background-color: var(--font-color-alpha-10);
199
203
  background-position: 0% 75%;
200
204
  border-color: transparent;
205
+
206
+ ::before {
207
+ border-color: var(--font-color-alpha-20);
208
+ }
201
209
  }
202
210
  }
203
211
  &[data-variant="tertiary"] {
@@ -274,6 +282,8 @@ var ButtonVariantsStyles = css`
274
282
  );
275
283
  background-size: 100% 200%;
276
284
  background-position: 0% 50%;
285
+ box-shadow: 0 var(--measurement-small-20) var(--measurement-small-20)
286
+ calc(var(--measurement-small-20) * -1) var(--alpha-mono-darkest-60);
277
287
 
278
288
  ::before {
279
289
  ${ButtonBeforeDefaultStyles}
@@ -299,6 +309,8 @@ var ButtonVariantsStyles = css`
299
309
  );
300
310
  background-size: 100% 200%;
301
311
  background-position: 0% 50%;
312
+ box-shadow: 0 var(--measurement-small-20) var(--measurement-small-20)
313
+ calc(var(--measurement-small-10) * -1) var(--alpha-mono-darkest-60);
302
314
 
303
315
  color: var(--alpha-mono-white-80) !important;
304
316
 
@@ -330,6 +342,8 @@ var ButtonVariantsStyles = css`
330
342
  );
331
343
  background-size: 100% 200%;
332
344
  background-position: 0% 50%;
345
+ box-shadow: 0 var(--measurement-small-20) var(--measurement-small-20)
346
+ calc(var(--measurement-small-10) * -1) var(--alpha-mono-darkest-60);
333
347
 
334
348
  color: var(--alpha-mono-white-80) !important;
335
349
 
@@ -357,6 +371,8 @@ var ButtonVariantsStyles = css`
357
371
  );
358
372
  background-size: 100% 200%;
359
373
  background-position: 0% 50%;
374
+ box-shadow: 0 var(--measurement-small-20) var(--measurement-small-20)
375
+ calc(var(--measurement-small-10) * -1) var(--alpha-mono-darkest-60);
360
376
 
361
377
  color: var(--alpha-mono-white-80) !important;
362
378
 
@@ -384,6 +400,8 @@ var ButtonVariantsStyles = css`
384
400
  );
385
401
  background-size: 100% 200%;
386
402
  background-position: 0% 50%;
403
+ box-shadow: 0 var(--measurement-small-20) var(--measurement-small-20)
404
+ calc(var(--measurement-small-10) * -1) var(--alpha-mono-darkest-60);
387
405
 
388
406
  color: var(--alpha-mono-white-80) !important;
389
407
 
@@ -414,6 +432,8 @@ var ButtonVariantsStyles = css`
414
432
  );
415
433
  background-size: 100% 200%;
416
434
  background-position: 0% 50%;
435
+ box-shadow: 0 var(--measurement-small-20) var(--measurement-small-20)
436
+ calc(var(--measurement-small-10) * -1) var(--alpha-mono-darkest-60);
417
437
 
418
438
  color: var(--alpha-mono-dark-80) !important;
419
439
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@usefui/components",
3
- "version": "1.7.4",
3
+ "version": "1.7.5",
4
4
  "description": "Open Source React components library",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.mjs",
@@ -31,9 +31,9 @@
31
31
  "react-dom": "^19.2.4",
32
32
  "styled-components": "^5.3.11",
33
33
  "typescript": "^5.9.3",
34
- "@usefui/hooks": "^1.4.0",
35
34
  "@usefui/core": "^1.4.0",
36
- "@usefui/tokens": "^1.7.0"
35
+ "@usefui/tokens": "^1.7.0",
36
+ "@usefui/hooks": "^1.4.0"
37
37
  },
38
38
  "scripts": {
39
39
  "test": "vitest run --coverage --logHeapUsage",
package/src/button/styles/index.ts CHANGED
@@ -121,6 +121,8 @@ const ButtonVariantsStyles = css`
121
121
  );
122
122
  background-size: 100% 200%;
123
123
  background-position: 0% 50%;
124
+ box-shadow: 0 var(--measurement-small-20) var(--measurement-small-20)
125
+ calc(var(--measurement-small-10) * -1) var(--alpha-mono-darkest-60);
124
126
 
125
127
  color: var(--body-color-alpha-80) !important;
126
128
  svg * {
@@ -151,10 +153,12 @@ const ButtonVariantsStyles = css`
151
153
  background: linear-gradient(
152
154
  180deg,
153
155
  transparent 50%,
154
- var(--contrast-color) 100%
156
+ var(--body-color) 100%
155
157
  );
156
158
  background-size: 100% 200%;
157
159
  background-position: 0% 50%;
160
+ box-shadow: 0 var(--measurement-small-20) var(--measurement-small-20)
161
+ calc(var(--measurement-small-10) * -1) var(--alpha-mono-darkest-60);
158
162
 
159
163
  color: var(--font-color-alpha-60) !important;
160
164
 
@@ -171,6 +175,10 @@ const ButtonVariantsStyles = css`
171
175
  background-color: var(--font-color-alpha-10);
172
176
  background-position: 0% 75%;
173
177
  border-color: transparent;
178
+
179
+ ::before {
180
+ border-color: var(--font-color-alpha-20);
181
+ }
174
182
  }
175
183
  }
176
184
  &[data-variant="tertiary"] {
@@ -247,6 +255,8 @@ const ButtonVariantsStyles = css`
247
255
  );
248
256
  background-size: 100% 200%;
249
257
  background-position: 0% 50%;
258
+ box-shadow: 0 var(--measurement-small-20) var(--measurement-small-20)
259
+ calc(var(--measurement-small-20) * -1) var(--alpha-mono-darkest-60);
250
260
 
251
261
  ::before {
252
262
  ${ButtonBeforeDefaultStyles}
@@ -272,6 +282,8 @@ const ButtonVariantsStyles = css`
272
282
  );
273
283
  background-size: 100% 200%;
274
284
  background-position: 0% 50%;
285
+ box-shadow: 0 var(--measurement-small-20) var(--measurement-small-20)
286
+ calc(var(--measurement-small-10) * -1) var(--alpha-mono-darkest-60);
275
287
 
276
288
  color: var(--alpha-mono-white-80) !important;
277
289
 
@@ -303,6 +315,8 @@ const ButtonVariantsStyles = css`
303
315
  );
304
316
  background-size: 100% 200%;
305
317
  background-position: 0% 50%;
318
+ box-shadow: 0 var(--measurement-small-20) var(--measurement-small-20)
319
+ calc(var(--measurement-small-10) * -1) var(--alpha-mono-darkest-60);
306
320
 
307
321
  color: var(--alpha-mono-white-80) !important;
308
322
 
@@ -330,6 +344,8 @@ const ButtonVariantsStyles = css`
330
344
  );
331
345
  background-size: 100% 200%;
332
346
  background-position: 0% 50%;
347
+ box-shadow: 0 var(--measurement-small-20) var(--measurement-small-20)
348
+ calc(var(--measurement-small-10) * -1) var(--alpha-mono-darkest-60);
333
349
 
334
350
  color: var(--alpha-mono-white-80) !important;
335
351
 
@@ -357,6 +373,8 @@ const ButtonVariantsStyles = css`
357
373
  );
358
374
  background-size: 100% 200%;
359
375
  background-position: 0% 50%;
376
+ box-shadow: 0 var(--measurement-small-20) var(--measurement-small-20)
377
+ calc(var(--measurement-small-10) * -1) var(--alpha-mono-darkest-60);
360
378
 
361
379
  color: var(--alpha-mono-white-80) !important;
362
380
 
@@ -387,6 +405,8 @@ const ButtonVariantsStyles = css`
387
405
  );
388
406
  background-size: 100% 200%;
389
407
  background-position: 0% 50%;
408
+ box-shadow: 0 var(--measurement-small-20) var(--measurement-small-20)
409
+ calc(var(--measurement-small-10) * -1) var(--alpha-mono-darkest-60);
390
410
 
391
411
  color: var(--alpha-mono-dark-80) !important;
392
412