@genexus/mercury 0.1.19 → 0.1.20
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.
- package/dist/css/mercury.css +211 -172
- package/dist/css/mercury.css.map +1 -1
- package/dist/mercury.scss +313 -182
- package/package.json +1 -1
package/dist/mercury.scss
CHANGED
|
@@ -141,7 +141,6 @@
|
|
|
141
141
|
}
|
|
142
142
|
}
|
|
143
143
|
|
|
144
|
-
|
|
145
144
|
/*----------------------
|
|
146
145
|
Focus
|
|
147
146
|
----------------------*/
|
|
@@ -386,151 +385,151 @@ Window
|
|
|
386
385
|
// Tokens Primitive
|
|
387
386
|
@mixin border() {
|
|
388
387
|
// border widths
|
|
389
|
-
--mer-
|
|
390
|
-
--mer-
|
|
391
|
-
--mer-
|
|
388
|
+
--mer-border__width--sm: 1px;
|
|
389
|
+
--mer-border__width--md: 2px;
|
|
390
|
+
--mer-border__width--lg: 4px;
|
|
392
391
|
|
|
393
392
|
//border radius
|
|
394
|
-
--mer-
|
|
395
|
-
--mer-
|
|
396
|
-
--mer-
|
|
397
|
-
--mer-
|
|
398
|
-
--mer-
|
|
399
|
-
--mer-
|
|
393
|
+
--mer-border__radius--2xs: 1px;
|
|
394
|
+
--mer-border__radius--xs: 2px;
|
|
395
|
+
--mer-border__radius--sm: 4px;
|
|
396
|
+
--mer-border__radius--md: 8px;
|
|
397
|
+
--mer-border__radius--lg: 12px;
|
|
398
|
+
--mer-border__radius--xl: 30px;
|
|
400
399
|
}
|
|
401
400
|
|
|
402
401
|
@mixin foundation-colors--light() {
|
|
403
402
|
// primary
|
|
404
|
-
--mer-
|
|
405
|
-
--mer-
|
|
406
|
-
--mer-
|
|
407
|
-
--mer-
|
|
403
|
+
--mer-color__primary-blue--200: #2070ce;
|
|
404
|
+
--mer-color__primary-blue--300: #5498e8;
|
|
405
|
+
--mer-color__primary-blue--400: #437dc0;
|
|
406
|
+
--mer-color__primary-blue--600: #335884;
|
|
408
407
|
|
|
409
408
|
// neutral
|
|
410
|
-
--mer-
|
|
411
|
-
--mer-
|
|
412
|
-
--mer-
|
|
413
|
-
--mer-
|
|
414
|
-
--mer-
|
|
415
|
-
--mer-
|
|
416
|
-
--mer-
|
|
417
|
-
--mer-
|
|
409
|
+
--mer-color__neutral-gray--00: #363636;
|
|
410
|
+
--mer-color__neutral-gray--100: #525151;
|
|
411
|
+
--mer-color__neutral-gray--200: #616161;
|
|
412
|
+
--mer-color__neutral-gray--300: #696969;
|
|
413
|
+
--mer-color__neutral-gray--400: #666666;
|
|
414
|
+
--mer-color__neutral-gray--500: #7f7f7f;
|
|
415
|
+
--mer-color__neutral-gray--600: #999999;
|
|
416
|
+
--mer-color__neutral-gray--700: #b3b3b3;
|
|
418
417
|
// 800 to 1400 do not exist anymore in figma (check with designer) ⚠️
|
|
419
|
-
--mer-
|
|
420
|
-
--mer-
|
|
421
|
-
--mer-
|
|
422
|
-
--mer-
|
|
423
|
-
--mer-
|
|
424
|
-
--mer-
|
|
425
|
-
--mer-
|
|
418
|
+
--mer-color__neutral-gray--800: #cccccc;
|
|
419
|
+
--mer-color__neutral-gray--900: #ffffff;
|
|
420
|
+
--mer-color__neutral-gray--1000: #f8f8f8;
|
|
421
|
+
--mer-color__neutral-gray--1100: #f1f1f1;
|
|
422
|
+
--mer-color__neutral-gray--1200: #e4e4e4;
|
|
423
|
+
--mer-color__neutral-gray--1300: #dedede;
|
|
424
|
+
--mer-color__neutral-gray--1400: #ffffff;
|
|
426
425
|
|
|
427
426
|
// tinted grays
|
|
428
|
-
--mer-
|
|
429
|
-
--mer-
|
|
430
|
-
--mer-
|
|
431
|
-
--mer-
|
|
432
|
-
--mer-
|
|
433
|
-
--mer-
|
|
434
|
-
--mer-
|
|
435
|
-
--mer-
|
|
436
|
-
--mer-
|
|
437
|
-
--mer-
|
|
438
|
-
--mer-
|
|
427
|
+
--mer-color__tinted-yellow--5: #ffc96b0d;
|
|
428
|
+
--mer-color__tinted-yellow--60: #ffc96b99;
|
|
429
|
+
--mer-color__tinted-red--5: #fb7c840d;
|
|
430
|
+
--mer-color__tinted-red--60: #fb7c8499;
|
|
431
|
+
--mer-color__tinted-green--5: #3fa89b0d;
|
|
432
|
+
--mer-color__tinted-green--60: #3fa89b99;
|
|
433
|
+
--mer-color__tinted-blue--5: #2070ce0d;
|
|
434
|
+
--mer-color__tinted-blue--8: #2070ce14;
|
|
435
|
+
--mer-color__tinted-blue--10: #2070ce1a;
|
|
436
|
+
--mer-color__tinted-blue--20: #2070ce33;
|
|
437
|
+
--mer-color__tinted-blue--50: #2070ce80;
|
|
439
438
|
|
|
440
439
|
// message
|
|
441
|
-
--mer-
|
|
442
|
-
--mer-
|
|
443
|
-
--mer-
|
|
444
|
-
--mer-
|
|
445
|
-
--mer-
|
|
446
|
-
--mer-
|
|
447
|
-
--mer-
|
|
440
|
+
--mer-color__message-green--100: #3fa89b;
|
|
441
|
+
--mer-color__message-green--200: #3fa89b;
|
|
442
|
+
--mer-color__message-yellow--100: #ffc96b;
|
|
443
|
+
--mer-color__message-yellow--200: #ffc96b;
|
|
444
|
+
--mer-color__message-red--100: #fb7c84;
|
|
445
|
+
--mer-color__message-red--200: #fb7c84;
|
|
446
|
+
--mer-color__message-red--300: #dd8f94;
|
|
448
447
|
|
|
449
448
|
// surface
|
|
450
|
-
--mer-
|
|
449
|
+
--mer-color__surface: #f4f5f5;
|
|
451
450
|
|
|
452
451
|
// elevation
|
|
453
|
-
--mer-
|
|
454
|
-
--mer-
|
|
455
|
-
--mer-
|
|
456
|
-
--mer-
|
|
452
|
+
--mer-color__elevation--01: #f1f1f1;
|
|
453
|
+
--mer-color__elevation--02: #e4e4e4;
|
|
454
|
+
--mer-color__elevation--03: #dedede;
|
|
455
|
+
--mer-color__elevation--04: #ffffff;
|
|
457
456
|
|
|
458
457
|
// secondary
|
|
459
|
-
--mer-
|
|
458
|
+
--mer-color__secondary-green--200: #3fa89b;
|
|
460
459
|
}
|
|
461
460
|
|
|
462
461
|
@mixin foundation-colors--dark() {
|
|
463
462
|
// primary
|
|
464
|
-
--mer-
|
|
465
|
-
--mer-
|
|
466
|
-
--mer-
|
|
467
|
-
--mer-
|
|
463
|
+
--mer-color__primary-blue--200: #5ba7ff;
|
|
464
|
+
--mer-color__primary-blue--300: #5498e8;
|
|
465
|
+
--mer-color__primary-blue--400: #437dc0;
|
|
466
|
+
--mer-color__primary-blue--600: #335884;
|
|
468
467
|
|
|
469
468
|
// neutral
|
|
470
|
-
--mer-
|
|
471
|
-
--mer-
|
|
472
|
-
--mer-
|
|
473
|
-
--mer-
|
|
474
|
-
--mer-
|
|
475
|
-
--mer-
|
|
476
|
-
--mer-
|
|
477
|
-
--mer-
|
|
469
|
+
--mer-color__neutral-gray--00: #ffffff;
|
|
470
|
+
--mer-color__neutral-gray--100: #cccccc;
|
|
471
|
+
--mer-color__neutral-gray--200: #b3b3b3;
|
|
472
|
+
--mer-color__neutral-gray--300: #999999;
|
|
473
|
+
--mer-color__neutral-gray--400: #7f7f7f;
|
|
474
|
+
--mer-color__neutral-gray--500: #666666;
|
|
475
|
+
--mer-color__neutral-gray--600: #4d4d4d;
|
|
476
|
+
--mer-color__neutral-gray--700: #333333;
|
|
478
477
|
// 800 to 1400 do not exist anymore in figma (check with designer) ⚠️
|
|
479
|
-
--mer-
|
|
480
|
-
--mer-
|
|
481
|
-
--mer-
|
|
482
|
-
--mer-
|
|
483
|
-
--mer-
|
|
484
|
-
--mer-
|
|
485
|
-
--mer-
|
|
478
|
+
--mer-color__neutral-gray--800: #1a1a1a;
|
|
479
|
+
--mer-color__neutral-gray--900: #000000;
|
|
480
|
+
--mer-color__neutral-gray--1000: #1f2225;
|
|
481
|
+
--mer-color__neutral-gray--1100: #24272a;
|
|
482
|
+
--mer-color__neutral-gray--1200: #2d3032;
|
|
483
|
+
--mer-color__neutral-gray--1300: #3b3e40;
|
|
484
|
+
--mer-color__neutral-gray--1400: #2d3134;
|
|
486
485
|
|
|
487
486
|
// tinted grays
|
|
488
|
-
--mer-
|
|
489
|
-
--mer-
|
|
490
|
-
--mer-
|
|
491
|
-
--mer-
|
|
492
|
-
--mer-
|
|
493
|
-
--mer-
|
|
494
|
-
--mer-
|
|
495
|
-
--mer-
|
|
496
|
-
--mer-
|
|
497
|
-
--mer-
|
|
498
|
-
--mer-
|
|
487
|
+
--mer-color__tinted-yellow--5: #ffc96b0d;
|
|
488
|
+
--mer-color__tinted-yellow--60: #ffc96b99;
|
|
489
|
+
--mer-color__tinted-red--5: #fb7c840d;
|
|
490
|
+
--mer-color__tinted-red--60: #fb7c8499;
|
|
491
|
+
--mer-color__tinted-green--5: #3fa89b0d;
|
|
492
|
+
--mer-color__tinted-green--60: #3fa89b99;
|
|
493
|
+
--mer-color__tinted-blue--5: #5ba7ff0d;
|
|
494
|
+
--mer-color__tinted-blue--8: #5ba7ff14;
|
|
495
|
+
--mer-color__tinted-blue--10: #5ba7ff1a;
|
|
496
|
+
--mer-color__tinted-blue--20: #5ba7ff33;
|
|
497
|
+
--mer-color__tinted-blue--50: #5ba7ff80;
|
|
499
498
|
|
|
500
499
|
// message
|
|
501
|
-
--mer-
|
|
502
|
-
--mer-
|
|
503
|
-
--mer-
|
|
504
|
-
--mer-
|
|
505
|
-
--mer-
|
|
506
|
-
--mer-
|
|
507
|
-
--mer-
|
|
500
|
+
--mer-color__message-green--100: #3fa89b;
|
|
501
|
+
--mer-color__message-green--200: #3fa89b;
|
|
502
|
+
--mer-color__message-yellow--100: #ffc96b;
|
|
503
|
+
--mer-color__message-yellow--200: #f9bd56;
|
|
504
|
+
--mer-color__message-red--100: #fb7c84;
|
|
505
|
+
--mer-color__message-red--200: #e35861;
|
|
506
|
+
--mer-color__message-red--300: #dd8f94;
|
|
508
507
|
|
|
509
508
|
// surface
|
|
510
|
-
--mer-
|
|
509
|
+
--mer-color__surface: #1a1d20;
|
|
511
510
|
|
|
512
511
|
// elevation
|
|
513
|
-
--mer-
|
|
514
|
-
--mer-
|
|
515
|
-
--mer-
|
|
516
|
-
--mer-
|
|
512
|
+
--mer-color__elevation--01: #202428;
|
|
513
|
+
--mer-color__elevation--02: #262a2f;
|
|
514
|
+
--mer-color__elevation--03: #2b3237;
|
|
515
|
+
--mer-color__elevation--04: #3b4044;
|
|
517
516
|
|
|
518
517
|
// secondary
|
|
519
|
-
--mer-
|
|
518
|
+
--mer-color__secondary-green--200: #3fa89b;
|
|
520
519
|
}
|
|
521
520
|
|
|
522
521
|
@mixin elevation--light() {
|
|
523
522
|
// background color
|
|
524
|
-
--mer-
|
|
525
|
-
--mer-
|
|
526
|
-
--mer-
|
|
527
|
-
--mer-
|
|
523
|
+
--mer-elevation__bg-color--01: var(--mer-color__neutral-gray--900);
|
|
524
|
+
--mer-elevation__bg-color--02: var(--mer-color__neutral-gray--900);
|
|
525
|
+
--mer-elevation__bg-color--03: var(--mer-color__neutral-gray--900);
|
|
526
|
+
--mer-elevation__bg-color--04: var(--mer-color__neutral-gray--900);
|
|
528
527
|
|
|
529
528
|
// border
|
|
530
|
-
--mer-
|
|
531
|
-
--mer-
|
|
532
|
-
--mer-
|
|
533
|
-
--mer-
|
|
529
|
+
--mer-elevation__border-01: transparent;
|
|
530
|
+
--mer-elevation__border-02: transparent;
|
|
531
|
+
--mer-elevation__border-03: transparent;
|
|
532
|
+
--mer-elevation__border-04: transparent;
|
|
534
533
|
|
|
535
534
|
// box shadow
|
|
536
535
|
--mer-box-shadow--01: 0px 4px 20px 0px #00000040;
|
|
@@ -538,21 +537,21 @@ Window
|
|
|
538
537
|
|
|
539
538
|
@mixin elevation--dark() {
|
|
540
539
|
// background color
|
|
541
|
-
--mer-
|
|
542
|
-
--mer-
|
|
543
|
-
--mer-
|
|
544
|
-
--mer-
|
|
540
|
+
--mer-elevation__bg-color--01: var(--mer-color__elevation--01);
|
|
541
|
+
--mer-elevation__bg-color--02: var(--mer-color__elevation--02);
|
|
542
|
+
--mer-elevation__bg-color--03: var(--mer-color__elevation--03);
|
|
543
|
+
--mer-elevation__bg-color--04: var(--mer-color__elevation--04);
|
|
545
544
|
|
|
546
545
|
// border
|
|
547
|
-
--mer-
|
|
548
|
-
--mer-
|
|
549
|
-
--mer-
|
|
546
|
+
--mer-elevation__border-01: 1px solid var(--mer-color__elevation--03);
|
|
547
|
+
--mer-elevation__border-03: transparent;
|
|
548
|
+
--mer-elevation__border-04: transparent;
|
|
550
549
|
|
|
551
550
|
// box shadow
|
|
552
|
-
--mer-
|
|
553
|
-
--mer-
|
|
554
|
-
--mer-
|
|
555
|
-
--mer-
|
|
551
|
+
--mer-elevation__box-shadow--01: none;
|
|
552
|
+
--mer-elevation__box-shadow--02: none;
|
|
553
|
+
--mer-elevation__box-shadow--03: none;
|
|
554
|
+
--mer-elevation__box-shadow--04: none;
|
|
556
555
|
|
|
557
556
|
// box shadow
|
|
558
557
|
--mer-box-shadow--01: 0px 4px 20px 0px #00000040;
|
|
@@ -560,26 +559,24 @@ Window
|
|
|
560
559
|
|
|
561
560
|
@mixin font() {
|
|
562
561
|
// families
|
|
563
|
-
--mer-font-family--
|
|
564
|
-
--mer-font-family--
|
|
565
|
-
--mer-font-family--
|
|
566
|
-
--mer-font-family--inter-bold: "Inter_Bold", arial, sans-serif; // 700
|
|
567
|
-
--mer-font-family--inter-extra-bold: "Inter_ExtraBold", arial, sans-serif; // 800
|
|
562
|
+
--mer-font-family--title: Inter, Helvetica, Arial, sans-serif;
|
|
563
|
+
--mer-font-family--body: Inter, Helvetica, Arial, sans-serif;
|
|
564
|
+
--mer-font-family--code: monospace;
|
|
568
565
|
|
|
569
566
|
// weights
|
|
570
|
-
--mer-
|
|
571
|
-
--mer-
|
|
572
|
-
--mer-
|
|
573
|
-
--mer-
|
|
574
|
-
--mer-
|
|
567
|
+
--mer-font__weight--light: 300;
|
|
568
|
+
--mer-font__weight--regular: 400;
|
|
569
|
+
--mer-font__weight--semi-bold: 600;
|
|
570
|
+
--mer-font__weight--bold: 700;
|
|
571
|
+
--mer-font__weight--extra-bold: 800;
|
|
575
572
|
|
|
576
573
|
// sizes
|
|
577
|
-
--mer-
|
|
578
|
-
--mer-
|
|
579
|
-
--mer-
|
|
580
|
-
--mer-
|
|
581
|
-
--mer-
|
|
582
|
-
--mer-
|
|
574
|
+
--mer-font__size--2xs: 12px;
|
|
575
|
+
--mer-font__size--xs: 14px;
|
|
576
|
+
--mer-font__size--sm: 16px;
|
|
577
|
+
--mer-font__size--md: 20px;
|
|
578
|
+
--mer-font__size--lg: 24px;
|
|
579
|
+
--mer-font__size--xl: 36px;
|
|
583
580
|
|
|
584
581
|
// line heights
|
|
585
582
|
--mer-line-height--tight: 1.4em;
|
|
@@ -685,27 +682,27 @@ Window
|
|
|
685
682
|
|
|
686
683
|
// enabled
|
|
687
684
|
--mer-item__color--enabled: var(--mer-text__on-elevation);
|
|
688
|
-
--mer-item__bg-color--enabled: var(--mer-
|
|
689
|
-
--mer-item__border-color--enabled: var(--mer-
|
|
685
|
+
--mer-item__bg-color--enabled: var(--mer-color__elevation--01);
|
|
686
|
+
--mer-item__border-color--enabled: var(--mer-color__elevation--04);
|
|
690
687
|
|
|
691
688
|
// hover
|
|
692
|
-
--mer-item__color--hover: var(--mer-
|
|
693
|
-
--mer-item__bg-color--hover: var(--mer-
|
|
694
|
-
--mer-item__border-color--hover: var(--mer-
|
|
689
|
+
--mer-item__color--hover: var(--mer-color__neutral-gray--100); // ? (validate)
|
|
690
|
+
--mer-item__bg-color--hover: var(--mer-color__tinted-blue--5);
|
|
691
|
+
--mer-item__border-color--hover: var(--mer-color__tinted-blue--20);
|
|
695
692
|
|
|
696
693
|
// selected
|
|
697
694
|
--mer-item__color--selected: var(
|
|
698
|
-
--mer-
|
|
695
|
+
--mer-color__neutral-gray--100
|
|
699
696
|
); // ? (validate)
|
|
700
|
-
--mer-item__bg-color--selected: var(--mer-
|
|
701
|
-
--mer-item__border-color--selected: var(--mer-
|
|
697
|
+
--mer-item__bg-color--selected: var(--mer-color__tinted-blue--10);
|
|
698
|
+
--mer-item__border-color--selected: var(--mer-color__tinted-blue--20);
|
|
702
699
|
|
|
703
700
|
// selected + hover
|
|
704
701
|
--mer-item__color--selected-hover: var(
|
|
705
|
-
--mer-
|
|
702
|
+
--mer-color__neutral-gray--100
|
|
706
703
|
); // ? (validate)
|
|
707
|
-
--mer-item__bg-color--selected-hover: var(--mer-
|
|
708
|
-
--mer-item__border-color--selected-hover: var(--mer-
|
|
704
|
+
--mer-item__bg-color--selected-hover: var(--mer-color__tinted-blue--10);
|
|
705
|
+
--mer-item__border-color--selected-hover: var(--mer-color__tinted-blue--20);
|
|
709
706
|
|
|
710
707
|
// disabled
|
|
711
708
|
--mer-item__color--disabled: var(); // ? (validate)
|
|
@@ -720,8 +717,10 @@ Window
|
|
|
720
717
|
--mer-body__bg-color: var(--mer-color__surface);
|
|
721
718
|
--mer-body__color: var(--mer-text__on-surface);
|
|
722
719
|
--mer-body__font-size: var(--mer-font__size--2xs);
|
|
723
|
-
--mer-body__font-family: var(--mer-font-family--
|
|
724
|
-
--mer-
|
|
720
|
+
--mer-body__font-family: var(--mer-font-family--body);
|
|
721
|
+
--mer-body__font-weight: var(--mer-font__weight--regular);
|
|
722
|
+
--mer-body__line-height: var(--mer-line-height--comfortable);
|
|
723
|
+
--mer-body__margin-block: var(--mer-spacing--sm);
|
|
725
724
|
|
|
726
725
|
/*----------------------
|
|
727
726
|
System
|
|
@@ -1321,6 +1320,67 @@ Window
|
|
|
1321
1320
|
}
|
|
1322
1321
|
}
|
|
1323
1322
|
|
|
1323
|
+
%fieldset {
|
|
1324
|
+
display: flex;
|
|
1325
|
+
flex-direction: column;
|
|
1326
|
+
gap: var(--mer-spacing--md);
|
|
1327
|
+
border: none;
|
|
1328
|
+
|
|
1329
|
+
&__legend {
|
|
1330
|
+
@extend %heading-6;
|
|
1331
|
+
margin-block-end: var(--mer-spacing--md);
|
|
1332
|
+
}
|
|
1333
|
+
|
|
1334
|
+
&__group {
|
|
1335
|
+
display: flex;
|
|
1336
|
+
flex-direction: column;
|
|
1337
|
+
|
|
1338
|
+
&--row {
|
|
1339
|
+
flex-direction: row;
|
|
1340
|
+
align-items: center;
|
|
1341
|
+
}
|
|
1342
|
+
}
|
|
1343
|
+
|
|
1344
|
+
&--row {
|
|
1345
|
+
flex-direction: row;
|
|
1346
|
+
flex-wrap: wrap;
|
|
1347
|
+
}
|
|
1348
|
+
}
|
|
1349
|
+
|
|
1350
|
+
/// @group Fieldset
|
|
1351
|
+
/// @param {String} $fieldset-selector [".fieldset"] -
|
|
1352
|
+
/// @param {String} $legend-selector [".fieldset-legend"] -
|
|
1353
|
+
/// @param {String} $fieldset-group-selector [".fieldset-group"] -
|
|
1354
|
+
/// @param {String} $fieldset-group-orientation--row-selector [".fieldset-group--row"] -
|
|
1355
|
+
/// @param {String} $fieldset-orientation--row-selector [".fieldset--row"] -
|
|
1356
|
+
@mixin fieldset(
|
|
1357
|
+
$fieldset-selector: ".fieldset",
|
|
1358
|
+
$legend-selector: ".fieldset-legend",
|
|
1359
|
+
$fieldset-group-selector: ".fieldset-group",
|
|
1360
|
+
$fieldset-group-orientation--row-selector: ".fieldset-group--row",
|
|
1361
|
+
$fieldset-orientation--row-selector: ".fieldset--row"
|
|
1362
|
+
) {
|
|
1363
|
+
#{$fieldset-selector} {
|
|
1364
|
+
@extend %fieldset;
|
|
1365
|
+
}
|
|
1366
|
+
|
|
1367
|
+
#{$legend-selector} {
|
|
1368
|
+
@extend %fieldset__legend;
|
|
1369
|
+
}
|
|
1370
|
+
|
|
1371
|
+
#{$fieldset-group-selector} {
|
|
1372
|
+
@extend %fieldset__group;
|
|
1373
|
+
}
|
|
1374
|
+
|
|
1375
|
+
#{$fieldset-group-orientation--row-selector} {
|
|
1376
|
+
@extend %fieldset__group--row;
|
|
1377
|
+
}
|
|
1378
|
+
|
|
1379
|
+
#{$fieldset-orientation--row-selector} {
|
|
1380
|
+
@extend %fieldset--row;
|
|
1381
|
+
}
|
|
1382
|
+
}
|
|
1383
|
+
|
|
1324
1384
|
// - - - - - - - - - - - - - - - - - - - -
|
|
1325
1385
|
// Icon Path
|
|
1326
1386
|
// - - - - - - - - - - - - - - - - - - - -
|
|
@@ -1429,65 +1489,128 @@ Window
|
|
|
1429
1489
|
);
|
|
1430
1490
|
}
|
|
1431
1491
|
|
|
1492
|
+
%heading-base {
|
|
1493
|
+
font-family: var(--mer-font-family--title);
|
|
1494
|
+
color: var(--mer-color__neutral-gray--100);
|
|
1495
|
+
line-height: var(--mer-line-height--tight);
|
|
1496
|
+
}
|
|
1497
|
+
|
|
1432
1498
|
%heading-1 {
|
|
1433
|
-
|
|
1434
|
-
font-size:
|
|
1435
|
-
|
|
1436
|
-
letter-spacing: 0.4px;
|
|
1499
|
+
@extend %heading-base;
|
|
1500
|
+
font-size: 36px; //TODO (Update with token, or add token)
|
|
1501
|
+
font-weight: var(--mer-font__weight--bold);
|
|
1437
1502
|
}
|
|
1438
1503
|
|
|
1439
1504
|
%heading-2 {
|
|
1440
|
-
|
|
1441
|
-
font-size:
|
|
1442
|
-
|
|
1443
|
-
letter-spacing: 0.8px;
|
|
1505
|
+
@extend %heading-base;
|
|
1506
|
+
font-size: var(--mer-font__size--lg); // 24px
|
|
1507
|
+
font-weight: var(--mer-font__weight--bold);
|
|
1444
1508
|
}
|
|
1445
1509
|
|
|
1446
1510
|
%heading-3 {
|
|
1447
|
-
|
|
1448
|
-
font-size:
|
|
1449
|
-
|
|
1450
|
-
letter-spacing: 0.4px;
|
|
1511
|
+
@extend %heading-base;
|
|
1512
|
+
font-size: 20px; //TODO (Update with token, or add token)
|
|
1513
|
+
font-weight: var(--mer-font__weight--bold);
|
|
1451
1514
|
}
|
|
1452
1515
|
|
|
1453
1516
|
%heading-4 {
|
|
1454
|
-
|
|
1455
|
-
font-size:
|
|
1456
|
-
|
|
1457
|
-
|
|
1517
|
+
@extend %heading-base;
|
|
1518
|
+
font-size: var(--mer-font__size--md); // 20px
|
|
1519
|
+
font-weight: var(--mer-font__weight--bold);
|
|
1520
|
+
}
|
|
1521
|
+
|
|
1522
|
+
%heading-5 {
|
|
1523
|
+
@extend %heading-base;
|
|
1524
|
+
font-size: 14px; //TODO (Update with token, or add token)
|
|
1525
|
+
font-weight: var(--mer-font__weight--bold);
|
|
1526
|
+
}
|
|
1527
|
+
|
|
1528
|
+
%heading-6 {
|
|
1529
|
+
@extend %heading-base;
|
|
1530
|
+
font-size: var(--mer-font__size--sm); // 16px
|
|
1531
|
+
font-weight: var(--mer-font__weight--semi-bold);
|
|
1458
1532
|
}
|
|
1459
1533
|
|
|
1460
1534
|
%text-body {
|
|
1461
|
-
font-size: var(--mer-font__size--xs);
|
|
1462
|
-
font-family: var(--mer-
|
|
1463
|
-
|
|
1464
|
-
|
|
1535
|
+
font-size: var(--mer-font__size--xs); // 14px
|
|
1536
|
+
font-family: var(--mer-body__font-family);
|
|
1537
|
+
font-weight: var(--mer-body__font-weight);
|
|
1538
|
+
line-height: var(--mer-body__line-height);
|
|
1539
|
+
margin-block: var(--mer-body__margin-block);
|
|
1465
1540
|
}
|
|
1466
1541
|
|
|
1542
|
+
// tab
|
|
1467
1543
|
%tab-text {
|
|
1468
1544
|
font-family: var(--mer-font-family--inter-regular);
|
|
1469
1545
|
font-size: var(--mer-font__size--2xs);
|
|
1470
1546
|
line-height: var(--mer-font-family--inter-regular);
|
|
1471
1547
|
}
|
|
1472
1548
|
|
|
1473
|
-
|
|
1474
|
-
|
|
1549
|
+
// button
|
|
1550
|
+
%button-text {
|
|
1551
|
+
font-family: var(--mer-font-family--body);
|
|
1552
|
+
font-size: var(--mer-font__size--2xs);
|
|
1553
|
+
line-height: var(--mer-line-height--regular);
|
|
1554
|
+
}
|
|
1555
|
+
|
|
1556
|
+
%button-text--regular {
|
|
1557
|
+
@extend %button-text;
|
|
1558
|
+
font-weight: var(--mer-font__weight--semi-bold);
|
|
1559
|
+
}
|
|
1560
|
+
|
|
1561
|
+
%button-text--light {
|
|
1562
|
+
@extend %button-text;
|
|
1563
|
+
font-weight: var(--mer-font__weight--semi-regular);
|
|
1564
|
+
}
|
|
1565
|
+
|
|
1566
|
+
// tooltip
|
|
1567
|
+
%tooltip-text {
|
|
1568
|
+
font-family: var(--mer-font-family--body);
|
|
1569
|
+
font-size: var(--mer-font-size--2xs);
|
|
1570
|
+
}
|
|
1571
|
+
|
|
1572
|
+
/// @group Typography
|
|
1573
|
+
/// @param {String} $heading--1-selector [".heading-1"] -
|
|
1574
|
+
/// @param {String} $heading--2-selector [".heading-2"] -
|
|
1575
|
+
/// @param {String} $heading--3-selector [".heading-3"] -
|
|
1576
|
+
/// @param {String} $heading--4-selector [".heading-4"] -
|
|
1577
|
+
/// @param {String} $heading--5-selector [".heading-5"] -
|
|
1578
|
+
/// @param {String} $heading--6-selector [".heading-6"] -
|
|
1579
|
+
/// @param {String} $text-body-selector [".text-body"] -
|
|
1580
|
+
@mixin typography-classes(
|
|
1581
|
+
$heading--1-selector: ".heading-1",
|
|
1582
|
+
$heading--2-selector: ".heading-2",
|
|
1583
|
+
$heading--3-selector: ".heading-3",
|
|
1584
|
+
$heading--4-selector: ".heading-4",
|
|
1585
|
+
$heading--5-selector: ".heading-5",
|
|
1586
|
+
$heading--6-selector: ".heading-6",
|
|
1587
|
+
$text-body-selector: ".text-body"
|
|
1588
|
+
) {
|
|
1589
|
+
#{$heading--1-selector} {
|
|
1475
1590
|
@extend %heading-1;
|
|
1476
1591
|
}
|
|
1477
1592
|
|
|
1478
|
-
|
|
1593
|
+
#{$heading--2-selector} {
|
|
1479
1594
|
@extend %heading-2;
|
|
1480
1595
|
}
|
|
1481
1596
|
|
|
1482
|
-
|
|
1597
|
+
#{$heading--3-selector} {
|
|
1483
1598
|
@extend %heading-3;
|
|
1484
1599
|
}
|
|
1485
1600
|
|
|
1486
|
-
|
|
1601
|
+
#{$heading--4-selector} {
|
|
1487
1602
|
@extend %heading-4;
|
|
1488
1603
|
}
|
|
1489
1604
|
|
|
1490
|
-
|
|
1605
|
+
#{$heading--5-selector} {
|
|
1606
|
+
@extend %heading-5;
|
|
1607
|
+
}
|
|
1608
|
+
|
|
1609
|
+
#{$heading--6-selector} {
|
|
1610
|
+
@extend %heading-6;
|
|
1611
|
+
}
|
|
1612
|
+
|
|
1613
|
+
#{$text-body-selector} {
|
|
1491
1614
|
@extend %text-body;
|
|
1492
1615
|
}
|
|
1493
1616
|
}
|
|
@@ -24869,37 +24992,42 @@ MULTICOLOR CONSTRUCTS
|
|
|
24869
24992
|
@if $font-face {
|
|
24870
24993
|
//light
|
|
24871
24994
|
@font-face {
|
|
24872
|
-
font-family:
|
|
24995
|
+
font-family: "Inter";
|
|
24873
24996
|
src: url("#{$font-face-path}Inter_Light.woff2");
|
|
24874
|
-
font-
|
|
24997
|
+
font-weight: 300;
|
|
24998
|
+
font-style: normal;
|
|
24875
24999
|
}
|
|
24876
25000
|
|
|
24877
25001
|
//regular
|
|
24878
25002
|
@font-face {
|
|
24879
|
-
font-family:
|
|
25003
|
+
font-family: "Inter";
|
|
24880
25004
|
src: url("#{$font-face-path}Inter_Regular.woff2");
|
|
24881
|
-
font-
|
|
25005
|
+
font-weight: 400;
|
|
25006
|
+
font-style: normal;
|
|
24882
25007
|
}
|
|
24883
25008
|
|
|
24884
25009
|
//semi-bold
|
|
24885
25010
|
@font-face {
|
|
24886
|
-
font-family:
|
|
25011
|
+
font-family: "Inter";
|
|
24887
25012
|
src: url("#{$font-face-path}Inter_SemiBold.woff2");
|
|
24888
|
-
font-
|
|
25013
|
+
font-weight: 600;
|
|
25014
|
+
font-style: normal;
|
|
24889
25015
|
}
|
|
24890
25016
|
|
|
24891
25017
|
//bold
|
|
24892
25018
|
@font-face {
|
|
24893
|
-
font-family:
|
|
25019
|
+
font-family: "Inter";
|
|
24894
25020
|
src: url("#{$font-face-path}Inter_Bold.woff2");
|
|
24895
|
-
font-
|
|
25021
|
+
font-weight: 700;
|
|
25022
|
+
font-style: normal;
|
|
24896
25023
|
}
|
|
24897
25024
|
|
|
24898
25025
|
//extra-bold
|
|
24899
25026
|
@font-face {
|
|
24900
|
-
font-family:
|
|
25027
|
+
font-family: "Inter";
|
|
24901
25028
|
src: url("#{$font-face-path}Inter_ExtraBold.woff2");
|
|
24902
|
-
font-
|
|
25029
|
+
font-weight: 800;
|
|
25030
|
+
font-style: normal;
|
|
24903
25031
|
}
|
|
24904
25032
|
}
|
|
24905
25033
|
|
|
@@ -25029,11 +25157,13 @@ MULTICOLOR CONSTRUCTS
|
|
|
25029
25157
|
}
|
|
25030
25158
|
|
|
25031
25159
|
@if $font {
|
|
25032
|
-
line-height: var(--mer-
|
|
25160
|
+
line-height: var(--mer-body__line-height);
|
|
25033
25161
|
}
|
|
25034
25162
|
|
|
25035
25163
|
@if $font-face {
|
|
25036
|
-
font-family:
|
|
25164
|
+
font-family: var(--mer-body__font-family);
|
|
25165
|
+
font-size: var(--mer-body__font-size);
|
|
25166
|
+
font-weight: var(--mer-body__font-weight);
|
|
25037
25167
|
}
|
|
25038
25168
|
}
|
|
25039
25169
|
}
|
|
@@ -25096,6 +25226,7 @@ MULTICOLOR CONSTRUCTS
|
|
|
25096
25226
|
// Form control classes
|
|
25097
25227
|
@if $form-controls-classes {
|
|
25098
25228
|
@include form-input();
|
|
25229
|
+
@include fieldset();
|
|
25099
25230
|
}
|
|
25100
25231
|
|
|
25101
25232
|
// Icon classes
|