@madgex/design-system 1.14.1 → 1.15.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.
- package/dist/_tokens/css/_tokens.css +6 -4
- package/dist/_tokens/js/_tokens-module.js +42 -6
- package/dist/_tokens/scss/_tokens.scss +10 -4
- package/dist/css/index.css +71 -71
- package/package.json +1 -1
- package/src/scss/functions/__index.scss +1 -0
- package/src/scss/functions/_px2rem.scss +20 -0
- package/src/scss/helpers/_font-types.scss +2 -2
- package/src/scss/index.scss +1 -1
- package/src/tokens/color.json +3 -2
- package/src/tokens/font.json +5 -0
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Do not edit directly
|
|
3
|
-
* Generated on Thu, 11 Jul 2019
|
|
3
|
+
* Generated on Thu, 11 Jul 2019 15:05:30 GMT
|
|
4
4
|
*/
|
|
5
5
|
|
|
6
6
|
:root {
|
|
@@ -20,17 +20,19 @@
|
|
|
20
20
|
--mds-color-brand-3-dark: #119389;
|
|
21
21
|
--mds-color-brand-3-darkest: #063733;
|
|
22
22
|
--mds-color-background-body: #ffffff;
|
|
23
|
-
--mds-color-background-site-container: #
|
|
23
|
+
--mds-color-background-site-container: #f8f8f8;
|
|
24
24
|
--mds-color-background-surface: #ffffff;
|
|
25
25
|
--mds-color-neutral-white: #ffffff;
|
|
26
26
|
--mds-color-neutral-black: #000000;
|
|
27
27
|
--mds-color-neutral-base: #979797;
|
|
28
|
-
--mds-color-neutral-
|
|
28
|
+
--mds-color-neutral-lighter: #dddddd;
|
|
29
|
+
--mds-color-neutral-lightest: #f8f8f8;
|
|
29
30
|
--mds-color-neutral-darker: #333333;
|
|
30
31
|
--mds-color-text-base: #222222;
|
|
31
32
|
--mds-color-text-invert: #ffffff;
|
|
32
|
-
--mds-color-border: #
|
|
33
|
+
--mds-color-border: #dddddd;
|
|
33
34
|
--mds-font-family-base: "Helvetica", Arial, sans-serif;
|
|
35
|
+
--mds-font-size-base: 16px;
|
|
34
36
|
--mds-font-type-canon-default-size: 28px;
|
|
35
37
|
--mds-font-type-canon-default-line-height: 1.15;
|
|
36
38
|
--mds-font-type-canon-sm-size: 32px;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Do not edit directly
|
|
3
|
-
* Generated on Thu, 11 Jul 2019
|
|
3
|
+
* Generated on Thu, 11 Jul 2019 15:05:30 GMT
|
|
4
4
|
*/
|
|
5
5
|
|
|
6
6
|
module.exports = {
|
|
@@ -341,7 +341,7 @@ module.exports = {
|
|
|
341
341
|
]
|
|
342
342
|
},
|
|
343
343
|
"site-container": {
|
|
344
|
-
"value": "#
|
|
344
|
+
"value": "#f8f8f8",
|
|
345
345
|
"original": {
|
|
346
346
|
"value": "{color.neutral.lightest.value}"
|
|
347
347
|
},
|
|
@@ -427,10 +427,27 @@ module.exports = {
|
|
|
427
427
|
"base"
|
|
428
428
|
]
|
|
429
429
|
},
|
|
430
|
+
"lighter": {
|
|
431
|
+
"value": "#dddddd",
|
|
432
|
+
"original": {
|
|
433
|
+
"value": "#DDDDDD"
|
|
434
|
+
},
|
|
435
|
+
"name": "MdsColorNeutralLighter",
|
|
436
|
+
"attributes": {
|
|
437
|
+
"category": "color",
|
|
438
|
+
"type": "neutral",
|
|
439
|
+
"item": "lighter"
|
|
440
|
+
},
|
|
441
|
+
"path": [
|
|
442
|
+
"color",
|
|
443
|
+
"neutral",
|
|
444
|
+
"lighter"
|
|
445
|
+
]
|
|
446
|
+
},
|
|
430
447
|
"lightest": {
|
|
431
|
-
"value": "#
|
|
448
|
+
"value": "#f8f8f8",
|
|
432
449
|
"original": {
|
|
433
|
-
"value": "#
|
|
450
|
+
"value": "#F8F8F8"
|
|
434
451
|
},
|
|
435
452
|
"name": "MdsColorNeutralLightest",
|
|
436
453
|
"attributes": {
|
|
@@ -499,9 +516,9 @@ module.exports = {
|
|
|
499
516
|
}
|
|
500
517
|
},
|
|
501
518
|
"border": {
|
|
502
|
-
"value": "#
|
|
519
|
+
"value": "#dddddd",
|
|
503
520
|
"original": {
|
|
504
|
-
"value": "{color.neutral.
|
|
521
|
+
"value": "{color.neutral.lighter.value}"
|
|
505
522
|
},
|
|
506
523
|
"name": "MdsColorBorder",
|
|
507
524
|
"attributes": {
|
|
@@ -534,6 +551,25 @@ module.exports = {
|
|
|
534
551
|
]
|
|
535
552
|
}
|
|
536
553
|
},
|
|
554
|
+
"size": {
|
|
555
|
+
"base": {
|
|
556
|
+
"value": "16px",
|
|
557
|
+
"original": {
|
|
558
|
+
"value": "16px"
|
|
559
|
+
},
|
|
560
|
+
"name": "MdsFontSizeBase",
|
|
561
|
+
"attributes": {
|
|
562
|
+
"category": "font",
|
|
563
|
+
"type": "size",
|
|
564
|
+
"item": "base"
|
|
565
|
+
},
|
|
566
|
+
"path": [
|
|
567
|
+
"font",
|
|
568
|
+
"size",
|
|
569
|
+
"base"
|
|
570
|
+
]
|
|
571
|
+
}
|
|
572
|
+
},
|
|
537
573
|
"type": {
|
|
538
574
|
"canon": {
|
|
539
575
|
"default": {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
|
|
2
2
|
/*
|
|
3
3
|
Do not edit directly
|
|
4
|
-
Generated on Thu, 11 Jul 2019
|
|
4
|
+
Generated on Thu, 11 Jul 2019 15:05:30 GMT
|
|
5
5
|
*/
|
|
6
6
|
|
|
7
7
|
$mds-color-brand-1-base: #1b75bb !default;
|
|
@@ -20,17 +20,19 @@ $mds-color-brand-3-lightest: lighten($mds-color-brand-3-base,(95% - lightness($m
|
|
|
20
20
|
$mds-color-brand-3-dark: darken($mds-color-brand-3-base,10%) !default;
|
|
21
21
|
$mds-color-brand-3-darkest: darken($mds-color-brand-3-base,(lightness($mds-color-brand-3-base) - 12%)) !default;
|
|
22
22
|
$mds-color-background-body: #ffffff !default;
|
|
23
|
-
$mds-color-background-site-container: #
|
|
23
|
+
$mds-color-background-site-container: #f8f8f8 !default;
|
|
24
24
|
$mds-color-background-surface: #ffffff !default;
|
|
25
25
|
$mds-color-neutral-white: #ffffff !default;
|
|
26
26
|
$mds-color-neutral-black: #000000 !default;
|
|
27
27
|
$mds-color-neutral-base: #979797 !default;
|
|
28
|
-
$mds-color-neutral-
|
|
28
|
+
$mds-color-neutral-lighter: #dddddd !default;
|
|
29
|
+
$mds-color-neutral-lightest: #f8f8f8 !default;
|
|
29
30
|
$mds-color-neutral-darker: #333333 !default;
|
|
30
31
|
$mds-color-text-base: #222222 !default;
|
|
31
32
|
$mds-color-text-invert: #ffffff !default;
|
|
32
|
-
$mds-color-border: #
|
|
33
|
+
$mds-color-border: #dddddd !default;
|
|
33
34
|
$mds-font-family-base: "Helvetica", Arial, sans-serif !default;
|
|
35
|
+
$mds-font-size-base: 16px !default;
|
|
34
36
|
$mds-font-type-canon-default-size: 28px !default;
|
|
35
37
|
$mds-font-type-canon-default-line-height: 1.15 !default;
|
|
36
38
|
$mds-font-type-canon-sm-size: 32px !default;
|
|
@@ -161,6 +163,7 @@ $tokens: (
|
|
|
161
163
|
'white': $mds-color-neutral-white,
|
|
162
164
|
'black': $mds-color-neutral-black,
|
|
163
165
|
'base': $mds-color-neutral-base,
|
|
166
|
+
'lighter': $mds-color-neutral-lighter,
|
|
164
167
|
'lightest': $mds-color-neutral-lightest,
|
|
165
168
|
'darker': $mds-color-neutral-darker
|
|
166
169
|
),
|
|
@@ -174,6 +177,9 @@ $tokens: (
|
|
|
174
177
|
'family': (
|
|
175
178
|
'base': $mds-font-family-base
|
|
176
179
|
),
|
|
180
|
+
'size': (
|
|
181
|
+
'base': $mds-font-size-base
|
|
182
|
+
),
|
|
177
183
|
'type': (
|
|
178
184
|
'canon': (
|
|
179
185
|
'default': (
|
package/dist/css/index.css
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/*
|
|
2
2
|
Do not edit directly
|
|
3
|
-
Generated on Thu, 11 Jul 2019
|
|
3
|
+
Generated on Thu, 11 Jul 2019 15:05:30 GMT
|
|
4
4
|
*/
|
|
5
5
|
html,
|
|
6
6
|
body,
|
|
@@ -430,261 +430,261 @@ template {
|
|
|
430
430
|
}
|
|
431
431
|
|
|
432
432
|
.mds-font-canon, h1 {
|
|
433
|
-
font-size:
|
|
433
|
+
font-size: 1.75rem;
|
|
434
434
|
line-height: 1.15;
|
|
435
435
|
}
|
|
436
436
|
|
|
437
437
|
@media (min-width: 25em) {
|
|
438
438
|
.mds-font-canon, h1 {
|
|
439
|
-
font-size:
|
|
439
|
+
font-size: 2rem;
|
|
440
440
|
line-height: 1.13;
|
|
441
441
|
}
|
|
442
442
|
}
|
|
443
443
|
|
|
444
444
|
@media (min-width: 37.5em) {
|
|
445
445
|
.mds-font-canon, h1 {
|
|
446
|
-
font-size:
|
|
446
|
+
font-size: 3.25rem;
|
|
447
447
|
line-height: 1.08;
|
|
448
448
|
}
|
|
449
449
|
}
|
|
450
450
|
|
|
451
451
|
@media (min-width: 63em) {
|
|
452
452
|
.mds-font-canon, h1 {
|
|
453
|
-
font-size:
|
|
453
|
+
font-size: 2.75rem;
|
|
454
454
|
line-height: 1.1;
|
|
455
455
|
}
|
|
456
456
|
}
|
|
457
457
|
|
|
458
458
|
.mds-font-trafalgar, h2 {
|
|
459
|
-
font-size:
|
|
459
|
+
font-size: 1.25rem;
|
|
460
460
|
line-height: 1.2;
|
|
461
461
|
}
|
|
462
462
|
|
|
463
463
|
@media (min-width: 25em) {
|
|
464
464
|
.mds-font-trafalgar, h2 {
|
|
465
|
-
font-size:
|
|
465
|
+
font-size: 1.5rem;
|
|
466
466
|
line-height: 1.17;
|
|
467
467
|
}
|
|
468
468
|
}
|
|
469
469
|
|
|
470
470
|
@media (min-width: 37.5em) {
|
|
471
471
|
.mds-font-trafalgar, h2 {
|
|
472
|
-
font-size:
|
|
472
|
+
font-size: 2.25rem;
|
|
473
473
|
line-height: 1.12;
|
|
474
474
|
}
|
|
475
475
|
}
|
|
476
476
|
|
|
477
477
|
@media (min-width: 63em) {
|
|
478
478
|
.mds-font-trafalgar, h2 {
|
|
479
|
-
font-size:
|
|
479
|
+
font-size: 2rem;
|
|
480
480
|
line-height: 1.13;
|
|
481
481
|
}
|
|
482
482
|
}
|
|
483
483
|
|
|
484
484
|
.mds-font-paragon, h3 {
|
|
485
|
-
font-size:
|
|
485
|
+
font-size: 1.25rem;
|
|
486
486
|
line-height: 1.2;
|
|
487
487
|
}
|
|
488
488
|
|
|
489
489
|
@media (min-width: 25em) {
|
|
490
490
|
.mds-font-paragon, h3 {
|
|
491
|
-
font-size:
|
|
491
|
+
font-size: 1.375rem;
|
|
492
492
|
line-height: 1.19;
|
|
493
493
|
}
|
|
494
494
|
}
|
|
495
495
|
|
|
496
496
|
@media (min-width: 37.5em) {
|
|
497
497
|
.mds-font-paragon, h3 {
|
|
498
|
-
font-size:
|
|
498
|
+
font-size: 1.75rem;
|
|
499
499
|
line-height: 1.15;
|
|
500
500
|
}
|
|
501
501
|
}
|
|
502
502
|
|
|
503
503
|
@media (min-width: 63em) {
|
|
504
504
|
.mds-font-paragon, h3 {
|
|
505
|
-
font-size:
|
|
505
|
+
font-size: 1.75rem;
|
|
506
506
|
line-height: 1.15;
|
|
507
507
|
}
|
|
508
508
|
}
|
|
509
509
|
|
|
510
510
|
.mds-font-double-pica, h4 {
|
|
511
|
-
font-size:
|
|
511
|
+
font-size: 1.25rem;
|
|
512
512
|
line-height: 1.2;
|
|
513
513
|
}
|
|
514
514
|
|
|
515
515
|
@media (min-width: 25em) {
|
|
516
516
|
.mds-font-double-pica, h4 {
|
|
517
|
-
font-size:
|
|
517
|
+
font-size: 1.25rem;
|
|
518
518
|
line-height: 1.2;
|
|
519
519
|
}
|
|
520
520
|
}
|
|
521
521
|
|
|
522
522
|
@media (min-width: 37.5em) {
|
|
523
523
|
.mds-font-double-pica, h4 {
|
|
524
|
-
font-size:
|
|
524
|
+
font-size: 1.625rem;
|
|
525
525
|
line-height: 1.16;
|
|
526
526
|
}
|
|
527
527
|
}
|
|
528
528
|
|
|
529
529
|
@media (min-width: 63em) {
|
|
530
530
|
.mds-font-double-pica, h4 {
|
|
531
|
-
font-size:
|
|
531
|
+
font-size: 1.5rem;
|
|
532
532
|
line-height: 1.17;
|
|
533
533
|
}
|
|
534
534
|
}
|
|
535
535
|
|
|
536
536
|
.mds-font-great-primer, .js .mds-tabs__list-item {
|
|
537
|
-
font-size:
|
|
537
|
+
font-size: 1.125rem;
|
|
538
538
|
line-height: 1.23;
|
|
539
539
|
}
|
|
540
540
|
|
|
541
541
|
@media (min-width: 25em) {
|
|
542
542
|
.mds-font-great-primer, .js .mds-tabs__list-item {
|
|
543
|
-
font-size:
|
|
543
|
+
font-size: 1.125rem;
|
|
544
544
|
line-height: 1.23;
|
|
545
545
|
}
|
|
546
546
|
}
|
|
547
547
|
|
|
548
548
|
@media (min-width: 37.5em) {
|
|
549
549
|
.mds-font-great-primer, .js .mds-tabs__list-item {
|
|
550
|
-
font-size:
|
|
550
|
+
font-size: 1.3125rem;
|
|
551
551
|
line-height: 1.15;
|
|
552
552
|
}
|
|
553
553
|
}
|
|
554
554
|
|
|
555
555
|
@media (min-width: 63em) {
|
|
556
556
|
.mds-font-great-primer, .js .mds-tabs__list-item {
|
|
557
|
-
font-size:
|
|
557
|
+
font-size: 1.25rem;
|
|
558
558
|
line-height: 1.2;
|
|
559
559
|
}
|
|
560
560
|
}
|
|
561
561
|
|
|
562
562
|
.mds-font-body-copy, body {
|
|
563
|
-
font-size:
|
|
563
|
+
font-size: 0.875rem;
|
|
564
564
|
line-height: 1.43;
|
|
565
565
|
}
|
|
566
566
|
|
|
567
567
|
@media (min-width: 25em) {
|
|
568
568
|
.mds-font-body-copy, body {
|
|
569
|
-
font-size:
|
|
569
|
+
font-size: 1rem;
|
|
570
570
|
line-height: 1.38;
|
|
571
571
|
}
|
|
572
572
|
}
|
|
573
573
|
|
|
574
574
|
@media (min-width: 37.5em) {
|
|
575
575
|
.mds-font-body-copy, body {
|
|
576
|
-
font-size:
|
|
576
|
+
font-size: 1.125rem;
|
|
577
577
|
line-height: 1.34;
|
|
578
578
|
}
|
|
579
579
|
}
|
|
580
580
|
|
|
581
581
|
@media (min-width: 63em) {
|
|
582
582
|
.mds-font-body-copy, body {
|
|
583
|
-
font-size:
|
|
583
|
+
font-size: 1rem;
|
|
584
584
|
line-height: 1.38;
|
|
585
585
|
}
|
|
586
586
|
}
|
|
587
587
|
|
|
588
588
|
.mds-font-pica {
|
|
589
|
-
font-size:
|
|
589
|
+
font-size: 0.9375rem;
|
|
590
590
|
line-height: 1.34;
|
|
591
591
|
}
|
|
592
592
|
|
|
593
593
|
@media (min-width: 25em) {
|
|
594
594
|
.mds-font-pica {
|
|
595
|
-
font-size:
|
|
595
|
+
font-size: 1rem;
|
|
596
596
|
line-height: 1.25;
|
|
597
597
|
}
|
|
598
598
|
}
|
|
599
599
|
|
|
600
600
|
@media (min-width: 37.5em) {
|
|
601
601
|
.mds-font-pica {
|
|
602
|
-
font-size:
|
|
602
|
+
font-size: 1.125rem;
|
|
603
603
|
line-height: 1.23;
|
|
604
604
|
}
|
|
605
605
|
}
|
|
606
606
|
|
|
607
607
|
@media (min-width: 63em) {
|
|
608
608
|
.mds-font-pica {
|
|
609
|
-
font-size:
|
|
609
|
+
font-size: 1rem;
|
|
610
610
|
line-height: 1.25;
|
|
611
611
|
}
|
|
612
612
|
}
|
|
613
613
|
|
|
614
614
|
.mds-font-long-primer {
|
|
615
|
-
font-size:
|
|
615
|
+
font-size: 0.9375rem;
|
|
616
616
|
line-height: 1.2;
|
|
617
617
|
}
|
|
618
618
|
|
|
619
619
|
@media (min-width: 25em) {
|
|
620
620
|
.mds-font-long-primer {
|
|
621
|
-
font-size:
|
|
621
|
+
font-size: 0.9375rem;
|
|
622
622
|
line-height: 1.2;
|
|
623
623
|
}
|
|
624
624
|
}
|
|
625
625
|
|
|
626
626
|
@media (min-width: 37.5em) {
|
|
627
627
|
.mds-font-long-primer {
|
|
628
|
-
font-size:
|
|
628
|
+
font-size: 0.9375rem;
|
|
629
629
|
line-height: 1.34;
|
|
630
630
|
}
|
|
631
631
|
}
|
|
632
632
|
|
|
633
633
|
@media (min-width: 63em) {
|
|
634
634
|
.mds-font-long-primer {
|
|
635
|
-
font-size:
|
|
635
|
+
font-size: 0.875rem;
|
|
636
636
|
line-height: 1.29;
|
|
637
637
|
}
|
|
638
638
|
}
|
|
639
639
|
|
|
640
640
|
.mds-font-brevier {
|
|
641
|
-
font-size:
|
|
641
|
+
font-size: 0.875rem;
|
|
642
642
|
line-height: 1.15;
|
|
643
643
|
}
|
|
644
644
|
|
|
645
645
|
@media (min-width: 25em) {
|
|
646
646
|
.mds-font-brevier {
|
|
647
|
-
font-size:
|
|
647
|
+
font-size: 0.875rem;
|
|
648
648
|
line-height: 1.29;
|
|
649
649
|
}
|
|
650
650
|
}
|
|
651
651
|
|
|
652
652
|
@media (min-width: 37.5em) {
|
|
653
653
|
.mds-font-brevier {
|
|
654
|
-
font-size:
|
|
654
|
+
font-size: 0.875rem;
|
|
655
655
|
line-height: 1.29;
|
|
656
656
|
}
|
|
657
657
|
}
|
|
658
658
|
|
|
659
659
|
@media (min-width: 63em) {
|
|
660
660
|
.mds-font-brevier {
|
|
661
|
-
font-size:
|
|
661
|
+
font-size: 0.8125rem;
|
|
662
662
|
line-height: 1.24;
|
|
663
663
|
}
|
|
664
664
|
}
|
|
665
665
|
|
|
666
666
|
.mds-font-minion, .mds-list__key {
|
|
667
|
-
font-size:
|
|
667
|
+
font-size: 0.75rem;
|
|
668
668
|
line-height: 1.34;
|
|
669
669
|
}
|
|
670
670
|
|
|
671
671
|
@media (min-width: 25em) {
|
|
672
672
|
.mds-font-minion, .mds-list__key {
|
|
673
|
-
font-size:
|
|
673
|
+
font-size: 0.75rem;
|
|
674
674
|
line-height: 1.34;
|
|
675
675
|
}
|
|
676
676
|
}
|
|
677
677
|
|
|
678
678
|
@media (min-width: 37.5em) {
|
|
679
679
|
.mds-font-minion, .mds-list__key {
|
|
680
|
-
font-size:
|
|
680
|
+
font-size: 0.8125rem;
|
|
681
681
|
line-height: 1.24;
|
|
682
682
|
}
|
|
683
683
|
}
|
|
684
684
|
|
|
685
685
|
@media (min-width: 63em) {
|
|
686
686
|
.mds-font-minion, .mds-list__key {
|
|
687
|
-
font-size:
|
|
687
|
+
font-size: 0.75rem;
|
|
688
688
|
line-height: 1.34;
|
|
689
689
|
}
|
|
690
690
|
}
|
|
@@ -3306,7 +3306,7 @@ template {
|
|
|
3306
3306
|
}
|
|
3307
3307
|
|
|
3308
3308
|
.mds-border, .mds-surface {
|
|
3309
|
-
border: 1px solid #
|
|
3309
|
+
border: 1px solid #dddddd;
|
|
3310
3310
|
}
|
|
3311
3311
|
|
|
3312
3312
|
.mds-border-none {
|
|
@@ -3315,25 +3315,25 @@ template {
|
|
|
3315
3315
|
|
|
3316
3316
|
@media (min-width: 25em) {
|
|
3317
3317
|
.mds-border-sm {
|
|
3318
|
-
border: 1px solid #
|
|
3318
|
+
border: 1px solid #dddddd;
|
|
3319
3319
|
}
|
|
3320
3320
|
}
|
|
3321
3321
|
|
|
3322
3322
|
@media (min-width: 37.5em) {
|
|
3323
3323
|
.mds-border-md {
|
|
3324
|
-
border: 1px solid #
|
|
3324
|
+
border: 1px solid #dddddd;
|
|
3325
3325
|
}
|
|
3326
3326
|
}
|
|
3327
3327
|
|
|
3328
3328
|
@media (min-width: 63em) {
|
|
3329
3329
|
.mds-border-lg {
|
|
3330
|
-
border: 1px solid #
|
|
3330
|
+
border: 1px solid #dddddd;
|
|
3331
3331
|
}
|
|
3332
3332
|
}
|
|
3333
3333
|
|
|
3334
3334
|
@media (min-width: 80em) {
|
|
3335
3335
|
.mds-border-xl {
|
|
3336
|
-
border: 1px solid #
|
|
3336
|
+
border: 1px solid #dddddd;
|
|
3337
3337
|
}
|
|
3338
3338
|
}
|
|
3339
3339
|
|
|
@@ -3362,19 +3362,19 @@ template {
|
|
|
3362
3362
|
}
|
|
3363
3363
|
|
|
3364
3364
|
.mds-border-top {
|
|
3365
|
-
border-top: 1px solid #
|
|
3365
|
+
border-top: 1px solid #dddddd;
|
|
3366
3366
|
}
|
|
3367
3367
|
|
|
3368
3368
|
.mds-border-right {
|
|
3369
|
-
border-right: 1px solid #
|
|
3369
|
+
border-right: 1px solid #dddddd;
|
|
3370
3370
|
}
|
|
3371
3371
|
|
|
3372
3372
|
.mds-border-bottom, .mds-tabs__list {
|
|
3373
|
-
border-bottom: 1px solid #
|
|
3373
|
+
border-bottom: 1px solid #dddddd;
|
|
3374
3374
|
}
|
|
3375
3375
|
|
|
3376
3376
|
.mds-border-left {
|
|
3377
|
-
border-left: 1px solid #
|
|
3377
|
+
border-left: 1px solid #dddddd;
|
|
3378
3378
|
}
|
|
3379
3379
|
|
|
3380
3380
|
.mds-border-top-none {
|
|
@@ -3395,61 +3395,61 @@ template {
|
|
|
3395
3395
|
|
|
3396
3396
|
@media (min-width: 25em) {
|
|
3397
3397
|
.mds-border-sm-top {
|
|
3398
|
-
border-top: 1px solid #
|
|
3398
|
+
border-top: 1px solid #dddddd;
|
|
3399
3399
|
}
|
|
3400
3400
|
.mds-border-sm-right {
|
|
3401
|
-
border-right: 1px solid #
|
|
3401
|
+
border-right: 1px solid #dddddd;
|
|
3402
3402
|
}
|
|
3403
3403
|
.mds-border-sm-bottom {
|
|
3404
|
-
border-bottom: 1px solid #
|
|
3404
|
+
border-bottom: 1px solid #dddddd;
|
|
3405
3405
|
}
|
|
3406
3406
|
.mds-border-sm-left {
|
|
3407
|
-
border-left: 1px solid #
|
|
3407
|
+
border-left: 1px solid #dddddd;
|
|
3408
3408
|
}
|
|
3409
3409
|
}
|
|
3410
3410
|
|
|
3411
3411
|
@media (min-width: 37.5em) {
|
|
3412
3412
|
.mds-border-md-top {
|
|
3413
|
-
border-top: 1px solid #
|
|
3413
|
+
border-top: 1px solid #dddddd;
|
|
3414
3414
|
}
|
|
3415
3415
|
.mds-border-md-right {
|
|
3416
|
-
border-right: 1px solid #
|
|
3416
|
+
border-right: 1px solid #dddddd;
|
|
3417
3417
|
}
|
|
3418
3418
|
.mds-border-md-bottom {
|
|
3419
|
-
border-bottom: 1px solid #
|
|
3419
|
+
border-bottom: 1px solid #dddddd;
|
|
3420
3420
|
}
|
|
3421
3421
|
.mds-border-md-left {
|
|
3422
|
-
border-left: 1px solid #
|
|
3422
|
+
border-left: 1px solid #dddddd;
|
|
3423
3423
|
}
|
|
3424
3424
|
}
|
|
3425
3425
|
|
|
3426
3426
|
@media (min-width: 63em) {
|
|
3427
3427
|
.mds-border-lg-top {
|
|
3428
|
-
border-top: 1px solid #
|
|
3428
|
+
border-top: 1px solid #dddddd;
|
|
3429
3429
|
}
|
|
3430
3430
|
.mds-border-lg-right {
|
|
3431
|
-
border-right: 1px solid #
|
|
3431
|
+
border-right: 1px solid #dddddd;
|
|
3432
3432
|
}
|
|
3433
3433
|
.mds-border-lg-bottom {
|
|
3434
|
-
border-bottom: 1px solid #
|
|
3434
|
+
border-bottom: 1px solid #dddddd;
|
|
3435
3435
|
}
|
|
3436
3436
|
.mds-border-lg-left {
|
|
3437
|
-
border-left: 1px solid #
|
|
3437
|
+
border-left: 1px solid #dddddd;
|
|
3438
3438
|
}
|
|
3439
3439
|
}
|
|
3440
3440
|
|
|
3441
3441
|
@media (min-width: 80em) {
|
|
3442
3442
|
.mds-border-xl-top {
|
|
3443
|
-
border-top: 1px solid #
|
|
3443
|
+
border-top: 1px solid #dddddd;
|
|
3444
3444
|
}
|
|
3445
3445
|
.mds-border-xl-right {
|
|
3446
|
-
border-right: 1px solid #
|
|
3446
|
+
border-right: 1px solid #dddddd;
|
|
3447
3447
|
}
|
|
3448
3448
|
.mds-border-xl-bottom {
|
|
3449
|
-
border-bottom: 1px solid #
|
|
3449
|
+
border-bottom: 1px solid #dddddd;
|
|
3450
3450
|
}
|
|
3451
3451
|
.mds-border-xl-left {
|
|
3452
|
-
border-left: 1px solid #
|
|
3452
|
+
border-left: 1px solid #dddddd;
|
|
3453
3453
|
}
|
|
3454
3454
|
}
|
|
3455
3455
|
|
|
@@ -3561,7 +3561,7 @@ body {
|
|
|
3561
3561
|
max-width: 100%;
|
|
3562
3562
|
min-width: 0;
|
|
3563
3563
|
margin: 0 auto;
|
|
3564
|
-
background: #
|
|
3564
|
+
background: #f8f8f8;
|
|
3565
3565
|
}
|
|
3566
3566
|
|
|
3567
3567
|
.mds-wrapper {
|
|
@@ -3605,7 +3605,7 @@ body {
|
|
|
3605
3605
|
}
|
|
3606
3606
|
|
|
3607
3607
|
.mds-list--border {
|
|
3608
|
-
border-left: 5px solid #
|
|
3608
|
+
border-left: 5px solid #f8f8f8;
|
|
3609
3609
|
padding-left: 20px;
|
|
3610
3610
|
}
|
|
3611
3611
|
|
|
@@ -4509,15 +4509,15 @@ body {
|
|
|
4509
4509
|
|
|
4510
4510
|
.mds-card {
|
|
4511
4511
|
padding: 12px 16px;
|
|
4512
|
-
border: 1px solid #
|
|
4512
|
+
border: 1px solid #dddddd;
|
|
4513
4513
|
}
|
|
4514
4514
|
|
|
4515
4515
|
.mds-card--highlighted {
|
|
4516
|
-
background: #
|
|
4516
|
+
background: #f8f8f8;
|
|
4517
4517
|
}
|
|
4518
4518
|
|
|
4519
4519
|
.mds-section-title {
|
|
4520
|
-
border-bottom: 1px solid #
|
|
4520
|
+
border-bottom: 1px solid #dddddd;
|
|
4521
4521
|
}
|
|
4522
4522
|
|
|
4523
4523
|
.js .mds-tabs__panel--hidden {
|
package/package.json
CHANGED
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
/// Convert pixels to rems
|
|
2
|
+
///
|
|
3
|
+
/// @param {Number} $px - value to convert
|
|
4
|
+
/// @param {Number} $base-size ($mds-font-size-base) - `<body>` font size
|
|
5
|
+
///
|
|
6
|
+
/// @example scss
|
|
7
|
+
/// $font-size-in-rems: px2rem(16px);
|
|
8
|
+
/// p { font-size: px2rem(16px); }
|
|
9
|
+
///
|
|
10
|
+
/// @requires $mds-font-size-base
|
|
11
|
+
/// @returns {Number}
|
|
12
|
+
@function px2rem($px, $base-size: $mds-font-size-base) {
|
|
13
|
+
@if unitless($px) {
|
|
14
|
+
@warn "Assuming #{$px} to be in pixels, attempting to convert it into pixels.";
|
|
15
|
+
@return px2rem($px * 1px, $base-size);
|
|
16
|
+
} @else if unit($px) == rem {
|
|
17
|
+
@return $px;
|
|
18
|
+
}
|
|
19
|
+
@return ($px / $base-size) * 1rem;
|
|
20
|
+
}
|
|
@@ -24,11 +24,11 @@ $font-types: map-get(map-get($tokens, 'font'), 'type');
|
|
|
24
24
|
.mds-font-#{$typename} {
|
|
25
25
|
@each $bpname, $props in $typevalue {
|
|
26
26
|
@if $bpname == 'default' {
|
|
27
|
-
font-size: map-get($props, 'size');
|
|
27
|
+
font-size: px2rem(map-get($props, 'size'));
|
|
28
28
|
line-height: map-get($props, 'line-height');
|
|
29
29
|
} @else {
|
|
30
30
|
@include mq($from: $bpname) {
|
|
31
|
-
font-size: map-get($props, 'size');
|
|
31
|
+
font-size: px2rem(map-get($props, 'size'));
|
|
32
32
|
line-height: map-get($props, 'line-height');
|
|
33
33
|
}
|
|
34
34
|
}
|
package/src/scss/index.scss
CHANGED
package/src/tokens/color.json
CHANGED
|
@@ -68,7 +68,8 @@
|
|
|
68
68
|
"white": { "value": "#FFFFFF" },
|
|
69
69
|
"black": { "value": "#000000" },
|
|
70
70
|
"base": { "value": "#979797" },
|
|
71
|
-
"
|
|
71
|
+
"lighter": { "value": "#DDDDDD" },
|
|
72
|
+
"lightest": { "value": "#F8F8F8" },
|
|
72
73
|
"darker": { "value": "#333333" }
|
|
73
74
|
},
|
|
74
75
|
"text": {
|
|
@@ -80,7 +81,7 @@
|
|
|
80
81
|
}
|
|
81
82
|
},
|
|
82
83
|
"border": {
|
|
83
|
-
"value": "{color.neutral.
|
|
84
|
+
"value": "{color.neutral.lighter.value}"
|
|
84
85
|
}
|
|
85
86
|
}
|
|
86
87
|
}
|