@entur/button 3.4.0-beta.0 → 3.4.1

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 (2) hide show
  1. package/dist/styles.css +129 -183
  2. package/package.json +5 -6
package/dist/styles.css CHANGED
@@ -235,119 +235,80 @@
235
235
  --components-button-success-standard-text:#08091c;
236
236
  }
237
237
 
238
+ [data-view-mode=standard],
238
239
  :root{
239
- /* number */
240
- --size-0:0rem;
241
- --size-1:0.0625rem;
242
- --size-2:0.125rem;
243
- --size-3:0.25rem;
244
- --size-4:0.375rem;
245
- --size-5:0.5rem;
246
- --size-6:0.75rem;
247
- --size-7:0.875rem;
248
- --size-8:1rem;
249
- --size-9:1.25rem;
250
- --size-10:1.5rem;
251
- --size-11:1.75rem;
252
- --size-12:2rem;
253
- --size-13:2.25rem;
254
- --size-14:2.5rem;
255
- --size-15:2.75rem;
256
- --size-16:3rem;
257
- --size-17:3.25rem;
258
- --size-18:3.5rem;
259
- --size-19:4rem;
260
- --size-20:4.5rem;
261
- --size-21:5rem;
262
- --size-22:5.5rem;
263
- --size-23:6rem;
264
- --size-24:6.5rem;
265
- --size-25:7rem;
266
- --size-26:7.5rem;
267
- --size-27:8rem;
268
- --size-28:8.5rem;
269
- --size-29:9rem;
270
- --size-30:9.5rem;
271
- --size-31:10rem;
240
+ --components-button-border-large:0.125rem;
241
+ --components-button-border-medium:0.125rem;
242
+ --components-button-border-small:0.125rem;
243
+ --components-button-gap-small:0.25rem;
244
+ --components-button-gap-large:0.5rem;
245
+ --components-button-gap-medium:0.5rem;
246
+ --components-button-height-horizontalcontent-small:2rem;
247
+ --components-button-height-horizontalcontent-medium:3rem;
248
+ --components-button-height-horizontalcontent-large:4rem;
249
+ --components-button-height-verticalcontent-small:3rem;
250
+ --components-button-height-verticalcontent-medium:3.5rem;
251
+ --components-button-height-verticalcontent-large:4.5rem;
252
+ --components-button-icon-small:1rem;
253
+ --components-button-icon-medium:1.25rem;
254
+ --components-button-icon-large:1.5rem;
255
+ --components-button-inlinepadding-small:0.75rem;
256
+ --components-button-inlinepadding-medium:1rem;
257
+ --components-button-inlinepadding-large:1.5rem;
258
+ --components-button-radius-small:0.375rem;
259
+ --components-button-radius-large:0.5rem;
260
+ --components-button-radius-medium:0.5rem;
261
+ --components-button-radius-round:6rem;
272
262
  }
273
263
 
274
- :root,
275
- [data-theme=standard]{
276
- /* number */
277
- --button-border-large:var(--size-2);
278
- --button-border-medium:var(--size-2);
279
- --button-border-small:var(--size-2);
280
- --button-gap-small:var(--size-3);
281
- --button-gap-large:var(--size-5);
282
- --button-gap-medium:var(--size-5);
283
- --button-height-horizontal-small:var(--size-12);
284
- --button-height-horizontal-medium:var(--size-16);
285
- --button-height-horizontal-large:var(--size-19);
286
- --button-height-vertical-small:var(--size-16);
287
- --button-height-vertical-medium:var(--size-18);
288
- --button-height-vertical-large:var(--size-20);
289
- --button-icon-small:var(--size-8);
290
- --button-icon-medium:var(--size-9);
291
- --button-icon-large:var(--size-10);
292
- --button-inline-padding-small:var(--size-6);
293
- --button-inline-padding-medium:var(--size-8);
294
- --button-inline-padding-large:var(--size-10);
295
- --button-radius-small:var(--size-4);
296
- --button-radius-large:var(--size-5);
297
- --button-radius-medium:var(--size-5);
298
- --button-radius-round:var(--size-23);
264
+ [data-view-mode=compact]{
265
+ --components-button-border-large:0.125rem;
266
+ --components-button-border-medium:0.125rem;
267
+ --components-button-border-small:0.125rem;
268
+ --components-button-gap-medium:0.25rem;
269
+ --components-button-gap-small:0.25rem;
270
+ --components-button-gap-large:0.5rem;
271
+ --components-button-height-horizontalcontent-small:1.75rem;
272
+ --components-button-height-horizontalcontent-medium:2.5rem;
273
+ --components-button-height-horizontalcontent-large:3.5rem;
274
+ --components-button-height-verticalcontent-small:2.5rem;
275
+ --components-button-height-verticalcontent-medium:3rem;
276
+ --components-button-height-verticalcontent-large:3.5rem;
277
+ --components-button-icon-medium:1rem;
278
+ --components-button-icon-small:1rem;
279
+ --components-button-icon-large:1.25rem;
280
+ --components-button-inlinepadding-small:0.5rem;
281
+ --components-button-inlinepadding-medium:0.75rem;
282
+ --components-button-inlinepadding-large:1rem;
283
+ --components-button-radius-small:0.25rem;
284
+ --components-button-radius-large:0.5rem;
285
+ --components-button-radius-medium:0.5rem;
286
+ --components-button-radius-round:6rem;
299
287
  }
300
288
 
301
- [data-theme=compact]{
302
- /* number */
303
- --button-border-large:var(--size-2);
304
- --button-border-medium:var(--size-2);
305
- --button-border-small:var(--size-2);
306
- --button-gap-medium:var(--size-3);
307
- --button-gap-small:var(--size-3);
308
- --button-gap-large:var(--size-5);
309
- --button-height-horizontal-small:var(--size-11);
310
- --button-height-horizontal-medium:var(--size-14);
311
- --button-height-horizontal-large:var(--size-18);
312
- --button-height-vertical-small:var(--size-14);
313
- --button-height-vertical-medium:var(--size-16);
314
- --button-height-vertical-large:var(--size-18);
315
- --button-icon-medium:var(--size-8);
316
- --button-icon-small:var(--size-8);
317
- --button-icon-large:var(--size-9);
318
- --button-inline-padding-small:var(--size-5);
319
- --button-inline-padding-medium:var(--size-6);
320
- --button-inline-padding-large:var(--size-8);
321
- --button-radius-small:var(--size-3);
322
- --button-radius-large:var(--size-5);
323
- --button-radius-medium:var(--size-5);
324
- --button-radius-round:var(--size-23);
325
- }
326
-
327
- [data-theme=display]{
328
- /* number */
329
- --button-border-small:var(--size-2);
330
- --button-border-large:var(--size-3);
331
- --button-border-medium:var(--size-3);
332
- --button-gap-small:var(--size-5);
333
- --button-gap-medium:var(--size-6);
334
- --button-gap-large:var(--size-8);
335
- --button-height-horizontal-small:var(--size-19);
336
- --button-height-horizontal-medium:var(--size-23);
337
- --button-height-horizontal-large:var(--size-26);
338
- --button-height-vertical-small:var(--size-21);
339
- --button-height-vertical-medium:var(--size-24);
340
- --button-height-vertical-large:var(--size-28);
341
- --button-icon-small:var(--size-10);
342
- --button-icon-medium:var(--size-12);
343
- --button-icon-large:var(--size-16);
344
- --button-inline-padding-small:var(--size-10);
345
- --button-inline-padding-medium:var(--size-12);
346
- --button-inline-padding-large:var(--size-14);
347
- --button-radius-small:var(--size-5);
348
- --button-radius-large:var(--size-8);
349
- --button-radius-medium:var(--size-8);
350
- --button-radius-round:var(--size-23);
289
+ [data-view-mode=display]{
290
+ --components-button-border-small:0.125rem;
291
+ --components-button-border-large:0.25rem;
292
+ --components-button-border-medium:0.25rem;
293
+ --components-button-gap-small:0.5rem;
294
+ --components-button-gap-medium:0.75rem;
295
+ --components-button-gap-large:1rem;
296
+ --components-button-height-horizontalcontent-small:4rem;
297
+ --components-button-height-horizontalcontent-medium:6rem;
298
+ --components-button-height-horizontalcontent-large:7.5rem;
299
+ --components-button-height-verticalcontent-small:5rem;
300
+ --components-button-height-verticalcontent-medium:6.5rem;
301
+ --components-button-height-verticalcontent-large:8.5rem;
302
+ --components-button-icon-small:1.5rem;
303
+ --components-button-icon-medium:2rem;
304
+ --components-button-icon-large:3rem;
305
+ --components-button-inlinepadding-small:1.5rem;
306
+ --components-button-inlinepadding-medium:2rem;
307
+ --components-button-inlinepadding-large:2.5rem;
308
+ --components-button-radius-small:0.5rem;
309
+ --components-button-radius-large:1rem;
310
+ --components-button-radius-medium:1rem;
311
+ --components-button-radius-round:6rem;
351
312
  }
352
313
  [data-color-mode=light],
353
314
  :root{
@@ -360,8 +321,8 @@
360
321
  --basecolors-frame-subdued:#d9dae8;
361
322
  --basecolors-frame-tint:#f6f6f9;
362
323
  --basecolors-shape-accent:#181c56;
363
- --basecolors-shape-bicycle-contrast:#00db9b;
364
- --basecolors-shape-bicycle-default:#33826b;
324
+ --basecolors-shape-bicycle-contrast:#00dbb6;
325
+ --basecolors-shape-bicycle-default:#0d827e;
365
326
  --basecolors-shape-bus-contrast:#ff6392;
366
327
  --basecolors-shape-bus-default:#c5044e;
367
328
  --basecolors-shape-cableway-contrast:#b482fb;
@@ -380,8 +341,8 @@
380
341
  --basecolors-shape-maskalt:#ffffff;
381
342
  --basecolors-shape-metro-contrast:#f08901;
382
343
  --basecolors-shape-metro-default:#bf5826;
383
- --basecolors-shape-mobility-contrast:#00db9b;
384
- --basecolors-shape-mobility-default:#33826b;
344
+ --basecolors-shape-mobility-contrast:#00dbb6;
345
+ --basecolors-shape-mobility-default:#0d827e;
385
346
  --basecolors-shape-plane-contrast:#fbafea;
386
347
  --basecolors-shape-plane-default:#800664;
387
348
  --basecolors-shape-subdued:#626493;
@@ -426,8 +387,8 @@
426
387
  --basecolors-frame-subdued:#2d2e3e;
427
388
  --basecolors-frame-tint:#141527;
428
389
  --basecolors-shape-accent:#e5e5e9;
429
- --basecolors-shape-bicycle-contrast:#4db295;
430
- --basecolors-shape-bicycle-default:#4db295;
390
+ --basecolors-shape-bicycle-contrast:#4db2a1;
391
+ --basecolors-shape-bicycle-default:#4db2a1;
431
392
  --basecolors-shape-bus-contrast:#ef7398;
432
393
  --basecolors-shape-bus-default:#ef7398;
433
394
  --basecolors-shape-cableway-contrast:#b898e5;
@@ -446,8 +407,8 @@
446
407
  --basecolors-shape-maskalt:#393a49;
447
408
  --basecolors-shape-metro-contrast:#dd973c;
448
409
  --basecolors-shape-metro-default:#dd973c;
449
- --basecolors-shape-mobility-contrast:#4db295;
450
- --basecolors-shape-mobility-default:#4db295;
410
+ --basecolors-shape-mobility-contrast:#4db2a1;
411
+ --basecolors-shape-mobility-default:#4db2a1;
451
412
  --basecolors-shape-plane-contrast:#f2b8e5;
452
413
  --basecolors-shape-plane-default:#f2b8e5;
453
414
  --basecolors-shape-subdued:#b3b4bd;
@@ -484,15 +445,38 @@
484
445
 
485
446
  :root{
486
447
  --eds-button:1;
487
- }.eds-button{
488
- min-width:var(--size-30);
448
+ }a.eds-button{
449
+ display:-webkit-box;
450
+ display:-webkit-flex;
451
+ display:-moz-box;
452
+ display:flex;
453
+ -webkit-box-align:center;
454
+ -webkit-align-items:center;
455
+ -moz-box-align:center;
456
+ align-items:center;
457
+ -webkit-box-pack:center;
458
+ -webkit-justify-content:center;
459
+ -moz-box-pack:center;
460
+ justify-content:center;
461
+ }
462
+ a.eds-button .eds-icon{
463
+ position:static;
464
+ position:initial;
465
+ }
466
+
467
+ .eds-button{
468
+ min-width:9.5rem;
489
469
  width:-webkit-max-content;
490
470
  width:-moz-max-content;
491
471
  width:max-content;
492
- height:var(--button-height-horizontal-medium);
493
- -webkit-border-radius:var(--button-radius-medium);
494
- -moz-border-radius:var(--button-radius-medium);
495
- border-radius:var(--button-radius-medium);
472
+ min-height:3rem;
473
+ height:-webkit-fit-content;
474
+ height:-moz-fit-content;
475
+ height:fit-content;
476
+ -webkit-border-radius:0.25rem;
477
+ -moz-border-radius:0.25rem;
478
+ border-radius:0.25rem;
479
+ font-size:inherit;
496
480
  cursor:pointer;
497
481
  display:inline-block;
498
482
  -webkit-appearance:none;
@@ -500,20 +484,16 @@
500
484
  appearance:none;
501
485
  -webkit-text-decoration:none;
502
486
  text-decoration:none;
503
- overflow-x:hidden;
504
- -o-text-overflow:ellipsis;
505
- text-overflow:ellipsis;
506
- white-space:nowrap;
507
- padding-inline:var(--button-inline-padding-medium);
508
- font-size:var(--font-size-body-m);
509
- line-height:var(--font-line-height-body-m);
510
- font-weight:var(--font-weight-body);
487
+ padding:0 1rem;
488
+ font-size:1rem;
489
+ line-height:1.5rem;
490
+ font-weight:500;
511
491
  text-align:center;
512
492
  font-family:inherit;
513
493
  position:relative;
514
- vertical-align:middle;
494
+ vertical-align:top;
515
495
  background-color:var(--eds-button-background);
516
- border:var(--button-border-medium) solid var(--eds-button-border);
496
+ border:0.125rem solid var(--eds-button-border);
517
497
  color:var(--eds-button-text);
518
498
  }
519
499
  .eds-button:hover{
@@ -538,47 +518,25 @@
538
518
  .eds-button > .eds-button__loading-dots .eds-loading-dots__dot{
539
519
  background:var(--eds-button-text);
540
520
  }
541
- .eds-button :where(.eds-icon){
521
+ .eds-button .eds-icon{
542
522
  position:relative;
543
523
  top:0.2em;
544
524
  }
545
- .eds-button--trailing-icon :where(.eds-icon:last-child){
546
- margin-left:var(--button-gap-medium);
547
- }
548
- .eds-button--trailing-icon:where(.eds-button--size-small .eds-icon:last-child){
549
- margin-left:var(--button-gap-small);
550
- }
551
- .eds-button--trailing-icon:where(.eds-button--size-large .eds-icon:last-child){
552
- margin-left:var(--button-gap-large);
553
- }
554
- .eds-button--leading-icon :where(.eds-icon:first-child){
555
- margin-right:var(--button-gap-medium);
556
- }
557
- .eds-button--leading-icon:where(.eds-button--size-small .eds-icon:first-child){
558
- margin-right:var(--button-gap-small);
525
+ .eds-button--leading-icon .eds-icon{
526
+ margin-right:0.75rem;
559
527
  }
560
- .eds-button--leading-icon:where(.eds-button--size-large .eds-icon:first-child){
561
- margin-right:var(--button-gap-large);
528
+ .eds-button--trailing-icon .eds-icon{
529
+ margin-left:0.75rem;
562
530
  }
563
531
  .eds-button--size-small{
564
- height:var(--button-height-horizontal-small);
565
- -webkit-border-radius:var(--button-radius-small);
566
- -moz-border-radius:var(--button-radius-small);
567
- border-radius:var(--button-radius-small);
568
- padding-inline:var(--button-inline-padding-small);
569
- font-size:var(--font-size-body-s);
570
- line-height:var(--font-line-height-body-s);
571
- border:var(--button-border-small) solid var(--eds-button-border);
532
+ min-width:5.75rem;
533
+ min-height:2rem;
534
+ font-size:0.875rem;
535
+ line-height:1.375rem;
572
536
  }
573
537
  .eds-button--size-large{
574
- height:var(--button-height-horizontal-large);
575
- -webkit-border-radius:var(--button-radius-large);
576
- -moz-border-radius:var(--button-radius-large);
577
- border-radius:var(--button-radius-large);
578
- padding-inline:var(--button-inline-padding-large);
579
- font-size:var(--font-size-body-xl);
580
- line-height:var(--font-line-height-body-xl);
581
- border:var(--button-border-large) solid var(--eds-button-border);
538
+ min-width:11.75rem;
539
+ min-height:3.75rem;
582
540
  }
583
541
  .eds-button--width-fluid{
584
542
  width:100%;
@@ -673,6 +631,12 @@
673
631
  .eds-button--variant-tertiary:active{
674
632
  background-color:#aeb7e2;
675
633
  }
634
+ .eds-button--variant-tertiary.eds-button--leading-icon .eds-icon{
635
+ margin-right:0.5rem;
636
+ }
637
+ .eds-button--variant-tertiary.eds-button--trailing-icon .eds-icon{
638
+ margin-left:0.5rem;
639
+ }
676
640
  .eds-contrast .eds-button--variant-tertiary{
677
641
  background-color:transparent;
678
642
  color:#ffffff;
@@ -704,24 +668,6 @@
704
668
  background-color:var(--components-button-disabled-contrast-fill);
705
669
  color:var(--components-button-disabled-contrast-text-disabled);
706
670
  border-color:transparent;
707
- }
708
- .eds-button:where(a){
709
- display:-webkit-box;
710
- display:-webkit-flex;
711
- display:-moz-box;
712
- display:flex;
713
- -webkit-box-align:center;
714
- -webkit-align-items:center;
715
- -moz-box-align:center;
716
- align-items:center;
717
- -webkit-box-pack:center;
718
- -webkit-justify-content:center;
719
- -moz-box-pack:center;
720
- justify-content:center;
721
- }
722
- .eds-button:where(a) :where(.eds-icon){
723
- position:static;
724
- position:initial;
725
671
  }.eds-button-group .eds-button{
726
672
  margin-right:0.75rem;
727
673
  margin-bottom:0.75rem;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@entur/button",
3
- "version": "3.4.0-beta.0",
3
+ "version": "3.4.1",
4
4
  "license": "EUPL-1.2",
5
5
  "main": "dist/button.cjs.js",
6
6
  "module": "dist/button.esm.js",
@@ -27,10 +27,9 @@
27
27
  "react-dom": ">=16.8.0"
28
28
  },
29
29
  "dependencies": {
30
- "@entur/loader": "^0.5.36-beta.0",
31
- "@entur/tokens": "^3.20.0",
32
- "@entur/typography": "^2.0.4-beta.0",
33
- "@entur/utils": "^0.12.5",
30
+ "@entur/loader": "^0.6.1",
31
+ "@entur/tokens": "^3.21.1",
32
+ "@entur/utils": "^0.13.1",
34
33
  "classnames": "^2.5.1"
35
34
  },
36
35
  "devDependencies": {
@@ -46,5 +45,5 @@
46
45
  "vite": "^7.1.3",
47
46
  "vite-plugin-dts": "^4.5.4"
48
47
  },
49
- "gitHead": "e3da53c27deec5444106581c2339049814f633fe"
48
+ "gitHead": "fc1996af692ebbe6c00454abf846cf61e0fe6231"
50
49
  }