@penskemediacorp/larva-tokens 1.70.0 → 1.71.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.
|
@@ -1 +1 @@
|
|
|
1
|
-
:root{--border-color-grey-lightest: rgb(237, 235, 235);--border-color-brand-secondary-light: rgb(0, 0, 0);--border-color-grey-light: rgb(204, 204, 204);--border-color-grey-dark: rgb(76, 81, 103);--border-color-brand-secondary-dark: rgb(0, 0, 0);--border-color-brand-secondary: rgb(203, 0, 27);--border-color-grey: rgb(130, 137, 161);--border-color-brand-primary-light: rgb(236, 28, 36);--border-color-white: rgb(255, 255, 255);--border-color-brand-primary-dark: rgb(236, 28, 36);--border-color-brand-primary: rgb(26, 72, 196);--background-color-grey-light: rgb(204, 204, 204);--background-color-grey-lightest: rgb(237, 235, 235);--background-color-brand-secondary-dark: rgb(0, 0, 0);--background-color-brand-secondary-light: rgb(0, 0, 0);--background-color-grey-dark: rgb(76, 81, 103);--background-color-grey: rgb(130, 137, 161);--background-color-body: rgb(255, 255, 255);--background-color-brand-secondary: rgb(203, 0, 27);--background-color-black: rgb(16, 17, 25);--background-color-brand-primary-light: rgb(236, 28, 36);--background-color-brand-primary-dark: rgb(236, 28, 36);--background-color-white: rgb(255, 255, 255);--background-color-brand-primary: rgb(26, 72, 196);--background-color-grey-darkest: rgb(43, 46, 60);--color-brand-secondary: rgb(203, 0, 27);--color-black: rgb(16, 17, 25);--color-brand-primary-light: rgb(236, 28, 36);--color-brand-primary-dark: rgb(236, 28, 36);--color-white: rgb(255, 255, 255);--color-brand-primary: rgb(26, 72, 196);--color-grey-light: rgb(230, 230, 230);--color-brand-secondary-dark: rgb(0, 0, 0);--color-brand-secondary-light: rgb(0, 0, 0);--color-grey-dark: rgb(76, 81, 103);--color-grey: rgb(130, 137, 161);--font-family-primary-fancy: "neue-haas-grotesk-display", Times New Roman, sans-serif;--font-family-primary: "Times New Roman", serif;--font-family-secondary-fancy: Arial, sams-serif;--font-family-secondary: Arial, sans-serif;--font-family-body: "open-sans", Helvetica, sans-serif;--font-family-basic: Helvetica, sans-serif;--font-weight-light: 300;--font-weight-normal: 400;--font-weight-bold: 700;--line-height-small: 1.1;--line-height-normal: 1.35;--line-height-copy: 1.5;--line-height-large: 1.85;--spacing-00: 0;--spacing-025: 0.25rem;--spacing-050: 0.5rem;--spacing-075: 0.75rem;--spacing-1: 1rem;--spacing-125: 1.25rem;--spacing-150: 1.5rem;--spacing-2: 2rem;--background-color-brand-accent-red: rgb(251, 103, 107);--color-grey-ligh: rgb(213, 213, 213);--color-brand-accent-green: rgb(0, 221, 161);--border-color-brand-accent-red: rgb(251, 103, 107);--border-color-brand-accent-blue: rgb(118, 186, 223);--background-color-brand-accent-blue: rgb(118, 186, 223);--color-grey-darkest: rgb(43, 46, 60);--border-color-grey-ligh: rgb(213, 213, 213);--background-color-brand-accent: rgb(207, 213, 230);--border-color-black: rgb(16, 17, 25);--color-brand-accent-red: rgb(251, 103, 107);--background-color-grey-ligh: rgb(213, 213, 213);--border-color-brand-accent: rgb(207, 213, 230);--background-color-brand-accent-green: rgb(0, 221, 161);--color-grey-lightest: rgb(237, 235, 235);--border-color-brand-accent-green: rgb(0, 221, 161);--font-family-accent: Arial, serif;--color-brand-accent-blue: rgb(118, 186, 223);--color-brand-accent: rgb(207, 213, 230);--border-color-grey-darkest: rgb(43, 46, 60);--font-family-accent-fancy: "acumin-pro-condensed", Arial, sans-serif}
|
|
1
|
+
:root{--border-color-grey-lightest: rgb(237, 235, 235);--border-color-brand-secondary-light: rgb(0, 0, 0);--border-color-grey-light: rgb(204, 204, 204);--border-color-grey-dark: rgb(76, 81, 103);--border-color-brand-secondary-dark: rgb(0, 0, 0);--border-color-brand-secondary: rgb(203, 0, 27);--border-color-grey: rgb(130, 137, 161);--border-color-brand-primary-light: rgb(236, 28, 36);--border-color-white: rgb(255, 255, 255);--border-color-brand-primary-dark: rgb(236, 28, 36);--border-color-brand-primary: rgb(26, 72, 196);--background-color-grey-light: rgb(204, 204, 204);--background-color-grey-lightest: rgb(237, 235, 235);--background-color-brand-secondary-dark: rgb(0, 0, 0);--background-color-brand-secondary-light: rgb(0, 0, 0);--background-color-grey-dark: rgb(76, 81, 103);--background-color-grey: rgb(130, 137, 161);--background-color-body: rgb(255, 255, 255);--background-color-brand-secondary: rgb(203, 0, 27);--background-color-black: rgb(16, 17, 25);--background-color-brand-primary-light: rgb(236, 28, 36);--background-color-brand-primary-dark: rgb(236, 28, 36);--background-color-white: rgb(255, 255, 255);--background-color-brand-primary: rgb(26, 72, 196);--background-color-grey-darkest: rgb(43, 46, 60);--color-brand-secondary: rgb(203, 0, 27);--color-black: rgb(16, 17, 25);--color-brand-primary-light: rgb(236, 28, 36);--color-brand-primary-dark: rgb(236, 28, 36);--color-white: rgb(255, 255, 255);--color-brand-primary: rgb(26, 72, 196);--color-grey-light: rgb(230, 230, 230);--color-brand-secondary-dark: rgb(0, 0, 0);--color-brand-secondary-light: rgb(0, 0, 0);--color-grey-dark: rgb(76, 81, 103);--color-grey: rgb(130, 137, 161);--font-family-primary-fancy: "neue-haas-grotesk-display", Times New Roman, sans-serif;--font-family-primary: "Times New Roman", serif;--font-family-secondary-fancy: Arial, sams-serif;--font-family-secondary: Arial, sans-serif;--font-family-body: "open-sans", Helvetica, sans-serif;--font-family-basic: Helvetica, sans-serif;--font-weight-light: 300;--font-weight-normal: 400;--font-weight-bold: 700;--line-height-small: 1.1;--line-height-normal: 1.35;--line-height-copy: 1.5;--line-height-large: 1.85;--spacing-00: 0;--spacing-025: 0.25rem;--spacing-050: 0.5rem;--spacing-075: 0.75rem;--spacing-1: 1rem;--spacing-125: 1.25rem;--spacing-150: 1.5rem;--spacing-2: 2rem;--background-color-brand-accent-red: rgb(251, 103, 107);--basic-xxs-line-height-desktop-xl: 13px;--color-grey-ligh: rgb(213, 213, 213);--color-brand-accent-green: rgb(0, 221, 161);--basic-xxs-font-size-desktop-xl: 11px;--border-color-brand-accent-red: rgb(251, 103, 107);--basic-xxs-letter-spacing-desktop: 0.22px;--border-color-brand-accent-blue: rgb(118, 186, 223);--basic-xxs-font-weight-desktop: 800;--background-color-brand-accent-blue: rgb(118, 186, 223);--basic-xxs-font-weight-desktop-xl: 800;--color-grey-darkest: rgb(43, 46, 60);--basic-xxs-line-height-mobile: 13px;--basic-xxs-font-size-mobile: 11px;--basic-xxs-letter-spacing-desktop-xl: 0.22px;--border-color-grey-ligh: rgb(213, 213, 213);--background-color-brand-accent: rgb(207, 213, 230);--border-color-black: rgb(16, 17, 25);--color-brand-accent-red: rgb(251, 103, 107);--background-color-grey-ligh: rgb(213, 213, 213);--basic-xxs-font-size-desktop: 11px;--border-color-brand-accent: rgb(207, 213, 230);--basic-xxs-line-height-desktop: 13px;--background-color-brand-accent-green: rgb(0, 221, 161);--color-grey-lightest: rgb(237, 235, 235);--border-color-brand-accent-green: rgb(0, 221, 161);--font-family-accent: Arial, serif;--basic-xxs-font-weight-mobile: 800;--basic-xxs-letter-spacing-mobile: 0.22px;--color-brand-accent-blue: rgb(118, 186, 223);--color-brand-accent: rgb(207, 213, 230);--border-color-grey-darkest: rgb(43, 46, 60);--font-family-accent-fancy: "acumin-pro-condensed", Arial, sans-serif}
|
package/build/billboard.json
CHANGED
|
@@ -57,22 +57,34 @@
|
|
|
57
57
|
"SPACING_150": "1.5rem",
|
|
58
58
|
"SPACING_2": "2rem",
|
|
59
59
|
"BACKGROUND_COLOR_BRAND_ACCENT_RED": "rgb(251, 103, 107)",
|
|
60
|
+
"BASIC_XXS_LINE_HEIGHT_DESKTOP_XL": "13px",
|
|
60
61
|
"COLOR_GREY_LIGH": "rgb(213, 213, 213)",
|
|
61
62
|
"COLOR_BRAND_ACCENT_GREEN": "rgb(0, 221, 161)",
|
|
63
|
+
"BASIC_XXS_FONT_SIZE_DESKTOP_XL": "11px",
|
|
62
64
|
"BORDER_COLOR_BRAND_ACCENT_RED": "rgb(251, 103, 107)",
|
|
65
|
+
"BASIC_XXS_LETTER_SPACING_DESKTOP": "0.22px",
|
|
63
66
|
"BORDER_COLOR_BRAND_ACCENT_BLUE": "rgb(118, 186, 223)",
|
|
67
|
+
"BASIC_XXS_FONT_WEIGHT_DESKTOP": "800",
|
|
64
68
|
"BACKGROUND_COLOR_BRAND_ACCENT_BLUE": "rgb(118, 186, 223)",
|
|
69
|
+
"BASIC_XXS_FONT_WEIGHT_DESKTOP_XL": "800",
|
|
65
70
|
"COLOR_GREY_DARKEST": "rgb(43, 46, 60)",
|
|
71
|
+
"BASIC_XXS_LINE_HEIGHT_MOBILE": "13px",
|
|
72
|
+
"BASIC_XXS_FONT_SIZE_MOBILE": "11px",
|
|
73
|
+
"BASIC_XXS_LETTER_SPACING_DESKTOP_XL": "0.22px",
|
|
66
74
|
"BORDER_COLOR_GREY_LIGH": "rgb(213, 213, 213)",
|
|
67
75
|
"BACKGROUND_COLOR_BRAND_ACCENT": "rgb(207, 213, 230)",
|
|
68
76
|
"BORDER_COLOR_BLACK": "rgb(16, 17, 25)",
|
|
69
77
|
"COLOR_BRAND_ACCENT_RED": "rgb(251, 103, 107)",
|
|
70
78
|
"BACKGROUND_COLOR_GREY_LIGH": "rgb(213, 213, 213)",
|
|
79
|
+
"BASIC_XXS_FONT_SIZE_DESKTOP": "11px",
|
|
71
80
|
"BORDER_COLOR_BRAND_ACCENT": "rgb(207, 213, 230)",
|
|
81
|
+
"BASIC_XXS_LINE_HEIGHT_DESKTOP": "13px",
|
|
72
82
|
"BACKGROUND_COLOR_BRAND_ACCENT_GREEN": "rgb(0, 221, 161)",
|
|
73
83
|
"COLOR_GREY_LIGHTEST": "rgb(237, 235, 235)",
|
|
74
84
|
"BORDER_COLOR_BRAND_ACCENT_GREEN": "rgb(0, 221, 161)",
|
|
75
85
|
"FONT_FAMILY_ACCENT": "Arial, serif",
|
|
86
|
+
"BASIC_XXS_FONT_WEIGHT_MOBILE": "800",
|
|
87
|
+
"BASIC_XXS_LETTER_SPACING_MOBILE": "0.22px",
|
|
76
88
|
"COLOR_BRAND_ACCENT_BLUE": "rgb(118, 186, 223)",
|
|
77
89
|
"COLOR_BRAND_ACCENT": "rgb(207, 213, 230)",
|
|
78
90
|
"BORDER_COLOR_GREY_DARKEST": "rgb(43, 46, 60)",
|
package/build/billboard.map.scss
CHANGED
|
@@ -71,23 +71,35 @@ $billboard-map: (
|
|
|
71
71
|
/* Used for margins and padding only. */
|
|
72
72
|
'spacing-2': (2rem),
|
|
73
73
|
'background-color-brand-accent-red': (rgb(251, 103, 107)),
|
|
74
|
+
'basic-xxs-line-height-desktop-xl': (13px),
|
|
74
75
|
'color-grey-ligh': (rgb(213, 213, 213)),
|
|
75
76
|
'color-brand-accent-green': (rgb(0, 221, 161)),
|
|
77
|
+
'basic-xxs-font-size-desktop-xl': (11px),
|
|
76
78
|
'border-color-brand-accent-red': (rgb(251, 103, 107)),
|
|
79
|
+
'basic-xxs-letter-spacing-desktop': (0.22px),
|
|
77
80
|
'border-color-brand-accent-blue': (rgb(118, 186, 223)),
|
|
81
|
+
'basic-xxs-font-weight-desktop': (800),
|
|
78
82
|
'background-color-brand-accent-blue': (rgb(118, 186, 223)),
|
|
83
|
+
'basic-xxs-font-weight-desktop-xl': (800),
|
|
79
84
|
'color-grey-darkest': (rgb(43, 46, 60)),
|
|
85
|
+
'basic-xxs-line-height-mobile': (13px),
|
|
86
|
+
'basic-xxs-font-size-mobile': (11px),
|
|
87
|
+
'basic-xxs-letter-spacing-desktop-xl': (0.22px),
|
|
80
88
|
'border-color-grey-ligh': (rgb(213, 213, 213)),
|
|
81
89
|
'background-color-brand-accent': (rgb(207, 213, 230)),
|
|
82
90
|
'border-color-black': (rgb(16, 17, 25)),
|
|
83
91
|
'color-brand-accent-red': (rgb(251, 103, 107)),
|
|
84
92
|
'background-color-grey-ligh': (rgb(213, 213, 213)),
|
|
93
|
+
'basic-xxs-font-size-desktop': (11px),
|
|
85
94
|
'border-color-brand-accent': (rgb(207, 213, 230)),
|
|
95
|
+
'basic-xxs-line-height-desktop': (13px),
|
|
86
96
|
'background-color-brand-accent-green': (rgb(0, 221, 161)),
|
|
87
97
|
'color-grey-lightest': (rgb(237, 235, 235)),
|
|
88
98
|
'border-color-brand-accent-green': (rgb(0, 221, 161)),
|
|
89
99
|
/* The fallback for the accent font */
|
|
90
100
|
'font-family-accent': (Arial, serif),
|
|
101
|
+
'basic-xxs-font-weight-mobile': (800),
|
|
102
|
+
'basic-xxs-letter-spacing-mobile': (0.22px),
|
|
91
103
|
'color-brand-accent-blue': (rgb(118, 186, 223)),
|
|
92
104
|
'color-brand-accent': (rgb(207, 213, 230)),
|
|
93
105
|
'border-color-grey-darkest': (rgb(43, 46, 60)),
|
package/build/billboard.raw.json
CHANGED
|
@@ -643,6 +643,13 @@
|
|
|
643
643
|
"originalValue": "#FB676B",
|
|
644
644
|
"name": "BACKGROUND_COLOR_BRAND_ACCENT_RED"
|
|
645
645
|
},
|
|
646
|
+
"BASIC_XXS_LINE_HEIGHT_DESKTOP_XL": {
|
|
647
|
+
"category": "line-height",
|
|
648
|
+
"type": "number",
|
|
649
|
+
"value": "13px",
|
|
650
|
+
"originalValue": "13px",
|
|
651
|
+
"name": "BASIC_XXS_LINE_HEIGHT_DESKTOP_XL"
|
|
652
|
+
},
|
|
646
653
|
"COLOR_GREY_LIGH": {
|
|
647
654
|
"value": "rgb(213, 213, 213)",
|
|
648
655
|
"type": "color",
|
|
@@ -657,6 +664,13 @@
|
|
|
657
664
|
"originalValue": "#00DDA1",
|
|
658
665
|
"name": "COLOR_BRAND_ACCENT_GREEN"
|
|
659
666
|
},
|
|
667
|
+
"BASIC_XXS_FONT_SIZE_DESKTOP_XL": {
|
|
668
|
+
"category": "font-size",
|
|
669
|
+
"type": "number",
|
|
670
|
+
"value": "11px",
|
|
671
|
+
"originalValue": "11px",
|
|
672
|
+
"name": "BASIC_XXS_FONT_SIZE_DESKTOP_XL"
|
|
673
|
+
},
|
|
660
674
|
"BORDER_COLOR_BRAND_ACCENT_RED": {
|
|
661
675
|
"value": "rgb(251, 103, 107)",
|
|
662
676
|
"type": "color",
|
|
@@ -664,6 +678,13 @@
|
|
|
664
678
|
"originalValue": "#FB676B",
|
|
665
679
|
"name": "BORDER_COLOR_BRAND_ACCENT_RED"
|
|
666
680
|
},
|
|
681
|
+
"BASIC_XXS_LETTER_SPACING_DESKTOP": {
|
|
682
|
+
"category": "letter-spacing",
|
|
683
|
+
"type": "number",
|
|
684
|
+
"value": "0.22px",
|
|
685
|
+
"originalValue": "0.22px",
|
|
686
|
+
"name": "BASIC_XXS_LETTER_SPACING_DESKTOP"
|
|
687
|
+
},
|
|
667
688
|
"BORDER_COLOR_BRAND_ACCENT_BLUE": {
|
|
668
689
|
"value": "rgb(118, 186, 223)",
|
|
669
690
|
"type": "color",
|
|
@@ -671,6 +692,13 @@
|
|
|
671
692
|
"originalValue": "#76BADF",
|
|
672
693
|
"name": "BORDER_COLOR_BRAND_ACCENT_BLUE"
|
|
673
694
|
},
|
|
695
|
+
"BASIC_XXS_FONT_WEIGHT_DESKTOP": {
|
|
696
|
+
"category": "font-weight",
|
|
697
|
+
"type": "number",
|
|
698
|
+
"value": "800",
|
|
699
|
+
"originalValue": "800",
|
|
700
|
+
"name": "BASIC_XXS_FONT_WEIGHT_DESKTOP"
|
|
701
|
+
},
|
|
674
702
|
"BACKGROUND_COLOR_BRAND_ACCENT_BLUE": {
|
|
675
703
|
"value": "rgb(118, 186, 223)",
|
|
676
704
|
"type": "color",
|
|
@@ -678,6 +706,13 @@
|
|
|
678
706
|
"originalValue": "#76BADF",
|
|
679
707
|
"name": "BACKGROUND_COLOR_BRAND_ACCENT_BLUE"
|
|
680
708
|
},
|
|
709
|
+
"BASIC_XXS_FONT_WEIGHT_DESKTOP_XL": {
|
|
710
|
+
"category": "font-weight",
|
|
711
|
+
"type": "number",
|
|
712
|
+
"value": "800",
|
|
713
|
+
"originalValue": "800",
|
|
714
|
+
"name": "BASIC_XXS_FONT_WEIGHT_DESKTOP_XL"
|
|
715
|
+
},
|
|
681
716
|
"COLOR_GREY_DARKEST": {
|
|
682
717
|
"value": "rgb(43, 46, 60)",
|
|
683
718
|
"type": "color",
|
|
@@ -685,6 +720,27 @@
|
|
|
685
720
|
"originalValue": "#2B2E3C",
|
|
686
721
|
"name": "COLOR_GREY_DARKEST"
|
|
687
722
|
},
|
|
723
|
+
"BASIC_XXS_LINE_HEIGHT_MOBILE": {
|
|
724
|
+
"category": "line-height",
|
|
725
|
+
"type": "number",
|
|
726
|
+
"value": "13px",
|
|
727
|
+
"originalValue": "13px",
|
|
728
|
+
"name": "BASIC_XXS_LINE_HEIGHT_MOBILE"
|
|
729
|
+
},
|
|
730
|
+
"BASIC_XXS_FONT_SIZE_MOBILE": {
|
|
731
|
+
"category": "font-size",
|
|
732
|
+
"type": "number",
|
|
733
|
+
"value": "11px",
|
|
734
|
+
"originalValue": "11px",
|
|
735
|
+
"name": "BASIC_XXS_FONT_SIZE_MOBILE"
|
|
736
|
+
},
|
|
737
|
+
"BASIC_XXS_LETTER_SPACING_DESKTOP_XL": {
|
|
738
|
+
"category": "letter-spacing",
|
|
739
|
+
"type": "number",
|
|
740
|
+
"value": "0.22px",
|
|
741
|
+
"originalValue": "0.22px",
|
|
742
|
+
"name": "BASIC_XXS_LETTER_SPACING_DESKTOP_XL"
|
|
743
|
+
},
|
|
688
744
|
"BORDER_COLOR_GREY_LIGH": {
|
|
689
745
|
"value": "rgb(213, 213, 213)",
|
|
690
746
|
"type": "color",
|
|
@@ -720,6 +776,13 @@
|
|
|
720
776
|
"originalValue": "#D5D5D5",
|
|
721
777
|
"name": "BACKGROUND_COLOR_GREY_LIGH"
|
|
722
778
|
},
|
|
779
|
+
"BASIC_XXS_FONT_SIZE_DESKTOP": {
|
|
780
|
+
"category": "font-size",
|
|
781
|
+
"type": "number",
|
|
782
|
+
"value": "11px",
|
|
783
|
+
"originalValue": "11px",
|
|
784
|
+
"name": "BASIC_XXS_FONT_SIZE_DESKTOP"
|
|
785
|
+
},
|
|
723
786
|
"BORDER_COLOR_BRAND_ACCENT": {
|
|
724
787
|
"value": "rgb(207, 213, 230)",
|
|
725
788
|
"type": "color",
|
|
@@ -727,6 +790,13 @@
|
|
|
727
790
|
"originalValue": "#CFD5E6",
|
|
728
791
|
"name": "BORDER_COLOR_BRAND_ACCENT"
|
|
729
792
|
},
|
|
793
|
+
"BASIC_XXS_LINE_HEIGHT_DESKTOP": {
|
|
794
|
+
"category": "line-height",
|
|
795
|
+
"type": "number",
|
|
796
|
+
"value": "13px",
|
|
797
|
+
"originalValue": "13px",
|
|
798
|
+
"name": "BASIC_XXS_LINE_HEIGHT_DESKTOP"
|
|
799
|
+
},
|
|
730
800
|
"BACKGROUND_COLOR_BRAND_ACCENT_GREEN": {
|
|
731
801
|
"value": "rgb(0, 221, 161)",
|
|
732
802
|
"type": "color",
|
|
@@ -756,6 +826,20 @@
|
|
|
756
826
|
"originalValue": "Arial, serif",
|
|
757
827
|
"name": "FONT_FAMILY_ACCENT"
|
|
758
828
|
},
|
|
829
|
+
"BASIC_XXS_FONT_WEIGHT_MOBILE": {
|
|
830
|
+
"category": "font-weight",
|
|
831
|
+
"type": "number",
|
|
832
|
+
"value": "800",
|
|
833
|
+
"originalValue": "800",
|
|
834
|
+
"name": "BASIC_XXS_FONT_WEIGHT_MOBILE"
|
|
835
|
+
},
|
|
836
|
+
"BASIC_XXS_LETTER_SPACING_MOBILE": {
|
|
837
|
+
"category": "letter-spacing",
|
|
838
|
+
"type": "number",
|
|
839
|
+
"value": "0.22px",
|
|
840
|
+
"originalValue": "0.22px",
|
|
841
|
+
"name": "BASIC_XXS_LETTER_SPACING_MOBILE"
|
|
842
|
+
},
|
|
759
843
|
"COLOR_BRAND_ACCENT_BLUE": {
|
|
760
844
|
"value": "rgb(118, 186, 223)",
|
|
761
845
|
"type": "color",
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@penskemediacorp/larva-tokens",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.71.0",
|
|
4
4
|
"description": "Design tokens",
|
|
5
5
|
"author": "laras126 <laras126@gmail.com>",
|
|
6
6
|
"homepage": "https://github.com/penske-media-corp/pmc-larva#readme",
|
|
@@ -34,5 +34,5 @@
|
|
|
34
34
|
"plugin-error": "^2",
|
|
35
35
|
"sass": "^1"
|
|
36
36
|
},
|
|
37
|
-
"gitHead": "
|
|
37
|
+
"gitHead": "ed4d209930232254337b644b3af92de47d4a1730"
|
|
38
38
|
}
|
|
@@ -316,6 +316,57 @@
|
|
|
316
316
|
</div>
|
|
317
317
|
</td>
|
|
318
318
|
|
|
319
|
+
<td></td>
|
|
320
|
+
</tr>
|
|
321
|
+
|
|
322
|
+
<tr>
|
|
323
|
+
<th scope="row">
|
|
324
|
+
<code>basic-xxs-font-weight-desktop</code>
|
|
325
|
+
</th>
|
|
326
|
+
<td>
|
|
327
|
+
<code>800</code>
|
|
328
|
+
</td>
|
|
329
|
+
|
|
330
|
+
<td>
|
|
331
|
+
<div style="font-weight: 800;">
|
|
332
|
+
The quick brown fox jumps over the lazy dog.
|
|
333
|
+
</div>
|
|
334
|
+
</td>
|
|
335
|
+
|
|
336
|
+
<td></td>
|
|
337
|
+
</tr>
|
|
338
|
+
|
|
339
|
+
<tr>
|
|
340
|
+
<th scope="row">
|
|
341
|
+
<code>basic-xxs-font-weight-desktop-xl</code>
|
|
342
|
+
</th>
|
|
343
|
+
<td>
|
|
344
|
+
<code>800</code>
|
|
345
|
+
</td>
|
|
346
|
+
|
|
347
|
+
<td>
|
|
348
|
+
<div style="font-weight: 800;">
|
|
349
|
+
The quick brown fox jumps over the lazy dog.
|
|
350
|
+
</div>
|
|
351
|
+
</td>
|
|
352
|
+
|
|
353
|
+
<td></td>
|
|
354
|
+
</tr>
|
|
355
|
+
|
|
356
|
+
<tr>
|
|
357
|
+
<th scope="row">
|
|
358
|
+
<code>basic-xxs-font-weight-mobile</code>
|
|
359
|
+
</th>
|
|
360
|
+
<td>
|
|
361
|
+
<code>800</code>
|
|
362
|
+
</td>
|
|
363
|
+
|
|
364
|
+
<td>
|
|
365
|
+
<div style="font-weight: 800;">
|
|
366
|
+
The quick brown fox jumps over the lazy dog.
|
|
367
|
+
</div>
|
|
368
|
+
</td>
|
|
369
|
+
|
|
319
370
|
<td></td>
|
|
320
371
|
</tr>
|
|
321
372
|
</tbody>
|
|
@@ -324,6 +375,74 @@
|
|
|
324
375
|
</section>
|
|
325
376
|
|
|
326
377
|
|
|
378
|
+
<section>
|
|
379
|
+
<table>
|
|
380
|
+
|
|
381
|
+
<thead>
|
|
382
|
+
<tr id=font-size>
|
|
383
|
+
<th scope="col">Font Sizes</th>
|
|
384
|
+
<th scope="col">Value</th>
|
|
385
|
+
<th scope="col">Examples</th>
|
|
386
|
+
<th scope="col">Usage</th>
|
|
387
|
+
</tr>
|
|
388
|
+
</thead>
|
|
389
|
+
|
|
390
|
+
<tbody>
|
|
391
|
+
<tr>
|
|
392
|
+
<th scope="row">
|
|
393
|
+
<code>basic-xxs-font-size-desktop-xl</code>
|
|
394
|
+
</th>
|
|
395
|
+
<td>
|
|
396
|
+
<code>11px</code>
|
|
397
|
+
</td>
|
|
398
|
+
|
|
399
|
+
<td>
|
|
400
|
+
<div style="font-size: 11px;">
|
|
401
|
+
The quick brown fox jumps over the lazy dog.
|
|
402
|
+
</div>
|
|
403
|
+
</td>
|
|
404
|
+
|
|
405
|
+
<td></td>
|
|
406
|
+
</tr>
|
|
407
|
+
|
|
408
|
+
<tr>
|
|
409
|
+
<th scope="row">
|
|
410
|
+
<code>basic-xxs-font-size-mobile</code>
|
|
411
|
+
</th>
|
|
412
|
+
<td>
|
|
413
|
+
<code>11px</code>
|
|
414
|
+
</td>
|
|
415
|
+
|
|
416
|
+
<td>
|
|
417
|
+
<div style="font-size: 11px;">
|
|
418
|
+
The quick brown fox jumps over the lazy dog.
|
|
419
|
+
</div>
|
|
420
|
+
</td>
|
|
421
|
+
|
|
422
|
+
<td></td>
|
|
423
|
+
</tr>
|
|
424
|
+
|
|
425
|
+
<tr>
|
|
426
|
+
<th scope="row">
|
|
427
|
+
<code>basic-xxs-font-size-desktop</code>
|
|
428
|
+
</th>
|
|
429
|
+
<td>
|
|
430
|
+
<code>11px</code>
|
|
431
|
+
</td>
|
|
432
|
+
|
|
433
|
+
<td>
|
|
434
|
+
<div style="font-size: 11px;">
|
|
435
|
+
The quick brown fox jumps over the lazy dog.
|
|
436
|
+
</div>
|
|
437
|
+
</td>
|
|
438
|
+
|
|
439
|
+
<td></td>
|
|
440
|
+
</tr>
|
|
441
|
+
</tbody>
|
|
442
|
+
</table>
|
|
443
|
+
<hr />
|
|
444
|
+
</section>
|
|
445
|
+
|
|
327
446
|
|
|
328
447
|
<section>
|
|
329
448
|
<table>
|
|
@@ -411,6 +530,63 @@
|
|
|
411
530
|
</div>
|
|
412
531
|
</td>
|
|
413
532
|
|
|
533
|
+
<td></td>
|
|
534
|
+
</tr>
|
|
535
|
+
|
|
536
|
+
<tr>
|
|
537
|
+
<th scope="row">
|
|
538
|
+
<code>basic-xxs-line-height-desktop-xl</code>
|
|
539
|
+
</th>
|
|
540
|
+
<td>
|
|
541
|
+
<code>13px</code>
|
|
542
|
+
</td>
|
|
543
|
+
|
|
544
|
+
<td>
|
|
545
|
+
<div class="line-height-example" style="line-height: 13px; background-size: 100% 13px;">
|
|
546
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
|
|
547
|
+
elementum odio et lacus rutrum molestie. Nunc arcu enim, elementum
|
|
548
|
+
id feugiat at, venenatis quis erat.
|
|
549
|
+
</div>
|
|
550
|
+
</td>
|
|
551
|
+
|
|
552
|
+
<td></td>
|
|
553
|
+
</tr>
|
|
554
|
+
|
|
555
|
+
<tr>
|
|
556
|
+
<th scope="row">
|
|
557
|
+
<code>basic-xxs-line-height-mobile</code>
|
|
558
|
+
</th>
|
|
559
|
+
<td>
|
|
560
|
+
<code>13px</code>
|
|
561
|
+
</td>
|
|
562
|
+
|
|
563
|
+
<td>
|
|
564
|
+
<div class="line-height-example" style="line-height: 13px; background-size: 100% 13px;">
|
|
565
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
|
|
566
|
+
elementum odio et lacus rutrum molestie. Nunc arcu enim, elementum
|
|
567
|
+
id feugiat at, venenatis quis erat.
|
|
568
|
+
</div>
|
|
569
|
+
</td>
|
|
570
|
+
|
|
571
|
+
<td></td>
|
|
572
|
+
</tr>
|
|
573
|
+
|
|
574
|
+
<tr>
|
|
575
|
+
<th scope="row">
|
|
576
|
+
<code>basic-xxs-line-height-desktop</code>
|
|
577
|
+
</th>
|
|
578
|
+
<td>
|
|
579
|
+
<code>13px</code>
|
|
580
|
+
</td>
|
|
581
|
+
|
|
582
|
+
<td>
|
|
583
|
+
<div class="line-height-example" style="line-height: 13px; background-size: 100% 13px;">
|
|
584
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
|
|
585
|
+
elementum odio et lacus rutrum molestie. Nunc arcu enim, elementum
|
|
586
|
+
id feugiat at, venenatis quis erat.
|
|
587
|
+
</div>
|
|
588
|
+
</td>
|
|
589
|
+
|
|
414
590
|
<td></td>
|
|
415
591
|
</tr>
|
|
416
592
|
</tbody>
|