@penskemediacorp/larva-tokens 1.66.4 → 1.68.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.
- package/build/wwd-fn.custom-properties.css +1 -0
- package/build/wwd-fn.json +67 -0
- package/build/wwd-fn.map.scss +84 -0
- package/build/wwd-fn.raw.json +699 -0
- package/package.json +2 -2
- package/style-guides/wwd-fn.html +1215 -0
|
@@ -0,0 +1 @@
|
|
|
1
|
+
:root{--border-color-grey-lightest: rgb(239, 239, 239);--border-color-brand-secondary-light: rgb(0, 0, 0);--border-color-grey-light: rgb(220, 220, 220);--border-color-grey-dark: rgb(72, 61, 50);--border-color-brand-secondary-dark: rgb(0, 0, 0);--border-color-brand-secondary: rgb(0, 0, 0);--border-color-grey: rgb(140, 140, 140);--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(217, 33, 40);--background-color-grey-light: rgb(220, 220, 220);--background-color-grey-lightest: rgb(239, 239, 239);--background-color-brand-secondary-dark: rgb(0, 0, 0);--background-color-brand-secondary-light: rgb(0, 0, 0);--background-color-grey-dark: rgb(72, 61, 50);--background-color-grey: rgb(140, 140, 140);--background-color-body: rgb(255, 255, 255);--background-color-brand-secondary: rgb(0, 0, 0);--background-color-black: rgb(0, 0, 0);--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(217, 33, 40);--background-color-grey-darkest: rgb(50, 50, 50);--color-brand-secondary: rgb(0, 0, 0);--color-black: rgb(0, 0, 0);--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(217, 33, 40);--color-grey-light: rgb(220, 220, 220);--color-brand-secondary-dark: rgb(0, 0, 0);--color-brand-secondary-light: rgb(0, 0, 0);--color-grey-dark: rgb(72, 61, 50);--color-grey: rgb(140, 140, 140);--font-family-primary-fancy: "Ivar Headline", Times New Roman, sans-serif;--font-family-primary: "Times New Roman", serif;--font-family-secondary-fancy: "Libre Franklin", Arial, sans-serif;--font-family-secondary: Arial, serif;--font-family-body: "Ivar Text Regular", Arial, sans-serif;--font-family-basic: Arial, 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;--color-grey-darkest: rgb(50, 50, 50);--background-color-brand-accent: rgb(224, 215, 194);--border-color-brand-accent: rgb(224, 215, 194);--color-grey-lightest: rgb(239, 239, 239);--font-family-accent: "EngraversGothic Bold", Helvetica, serif;--color-brand-accent: rgb(224, 215, 194);--border-color-grey-darkest: rgb(50, 50, 50);--font-family-accent-fancy: "EngraversGothic Regular", Helvetica, sans-serif}
|
|
@@ -0,0 +1,67 @@
|
|
|
1
|
+
{
|
|
2
|
+
"BORDER_COLOR_GREY_LIGHTEST": "rgb(239, 239, 239)",
|
|
3
|
+
"BORDER_COLOR_BRAND_SECONDARY_LIGHT": "rgb(0, 0, 0)",
|
|
4
|
+
"BORDER_COLOR_GREY_LIGHT": "rgb(220, 220, 220)",
|
|
5
|
+
"BORDER_COLOR_GREY_DARK": "rgb(72, 61, 50)",
|
|
6
|
+
"BORDER_COLOR_BRAND_SECONDARY_DARK": "rgb(0, 0, 0)",
|
|
7
|
+
"BORDER_COLOR_BRAND_SECONDARY": "rgb(0, 0, 0)",
|
|
8
|
+
"BORDER_COLOR_GREY": "rgb(140, 140, 140)",
|
|
9
|
+
"BORDER_COLOR_BRAND_PRIMARY_LIGHT": "rgb(236, 28, 36)",
|
|
10
|
+
"BORDER_COLOR_WHITE": "rgb(255, 255, 255)",
|
|
11
|
+
"BORDER_COLOR_BRAND_PRIMARY_DARK": "rgb(236, 28, 36)",
|
|
12
|
+
"BORDER_COLOR_BRAND_PRIMARY": "rgb(217, 33, 40)",
|
|
13
|
+
"BACKGROUND_COLOR_GREY_LIGHT": "rgb(220, 220, 220)",
|
|
14
|
+
"BACKGROUND_COLOR_GREY_LIGHTEST": "rgb(239, 239, 239)",
|
|
15
|
+
"BACKGROUND_COLOR_BRAND_SECONDARY_DARK": "rgb(0, 0, 0)",
|
|
16
|
+
"BACKGROUND_COLOR_BRAND_SECONDARY_LIGHT": "rgb(0, 0, 0)",
|
|
17
|
+
"BACKGROUND_COLOR_GREY_DARK": "rgb(72, 61, 50)",
|
|
18
|
+
"BACKGROUND_COLOR_GREY": "rgb(140, 140, 140)",
|
|
19
|
+
"BACKGROUND_COLOR_BODY": "rgb(255, 255, 255)",
|
|
20
|
+
"BACKGROUND_COLOR_BRAND_SECONDARY": "rgb(0, 0, 0)",
|
|
21
|
+
"BACKGROUND_COLOR_BLACK": "rgb(0, 0, 0)",
|
|
22
|
+
"BACKGROUND_COLOR_BRAND_PRIMARY_LIGHT": "rgb(236, 28, 36)",
|
|
23
|
+
"BACKGROUND_COLOR_BRAND_PRIMARY_DARK": "rgb(236, 28, 36)",
|
|
24
|
+
"BACKGROUND_COLOR_WHITE": "rgb(255, 255, 255)",
|
|
25
|
+
"BACKGROUND_COLOR_BRAND_PRIMARY": "rgb(217, 33, 40)",
|
|
26
|
+
"BACKGROUND_COLOR_GREY_DARKEST": "rgb(50, 50, 50)",
|
|
27
|
+
"COLOR_BRAND_SECONDARY": "rgb(0, 0, 0)",
|
|
28
|
+
"COLOR_BLACK": "rgb(0, 0, 0)",
|
|
29
|
+
"COLOR_BRAND_PRIMARY_LIGHT": "rgb(236, 28, 36)",
|
|
30
|
+
"COLOR_BRAND_PRIMARY_DARK": "rgb(236, 28, 36)",
|
|
31
|
+
"COLOR_WHITE": "rgb(255, 255, 255)",
|
|
32
|
+
"COLOR_BRAND_PRIMARY": "rgb(217, 33, 40)",
|
|
33
|
+
"COLOR_GREY_LIGHT": "rgb(220, 220, 220)",
|
|
34
|
+
"COLOR_BRAND_SECONDARY_DARK": "rgb(0, 0, 0)",
|
|
35
|
+
"COLOR_BRAND_SECONDARY_LIGHT": "rgb(0, 0, 0)",
|
|
36
|
+
"COLOR_GREY_DARK": "rgb(72, 61, 50)",
|
|
37
|
+
"COLOR_GREY": "rgb(140, 140, 140)",
|
|
38
|
+
"FONT_FAMILY_PRIMARY_FANCY": "'Ivar Headline', Times New Roman, sans-serif",
|
|
39
|
+
"FONT_FAMILY_PRIMARY": "'Times New Roman', serif",
|
|
40
|
+
"FONT_FAMILY_SECONDARY_FANCY": "'Libre Franklin', Arial, sans-serif",
|
|
41
|
+
"FONT_FAMILY_SECONDARY": "Arial, serif",
|
|
42
|
+
"FONT_FAMILY_BODY": "'Ivar Text Regular', Arial, sans-serif",
|
|
43
|
+
"FONT_FAMILY_BASIC": "Arial, sans-serif",
|
|
44
|
+
"FONT_WEIGHT_LIGHT": "300",
|
|
45
|
+
"FONT_WEIGHT_NORMAL": "400",
|
|
46
|
+
"FONT_WEIGHT_BOLD": "700",
|
|
47
|
+
"LINE_HEIGHT_SMALL": "1.1",
|
|
48
|
+
"LINE_HEIGHT_NORMAL": "1.35",
|
|
49
|
+
"LINE_HEIGHT_COPY": "1.5",
|
|
50
|
+
"LINE_HEIGHT_LARGE": "1.85",
|
|
51
|
+
"SPACING_00": "0",
|
|
52
|
+
"SPACING_025": "0.25rem",
|
|
53
|
+
"SPACING_050": "0.5rem",
|
|
54
|
+
"SPACING_075": "0.75rem",
|
|
55
|
+
"SPACING_1": "1rem",
|
|
56
|
+
"SPACING_125": "1.25rem",
|
|
57
|
+
"SPACING_150": "1.5rem",
|
|
58
|
+
"SPACING_2": "2rem",
|
|
59
|
+
"COLOR_GREY_DARKEST": "rgb(50, 50, 50)",
|
|
60
|
+
"BACKGROUND_COLOR_BRAND_ACCENT": "rgb(224, 215, 194)",
|
|
61
|
+
"BORDER_COLOR_BRAND_ACCENT": "rgb(224, 215, 194)",
|
|
62
|
+
"COLOR_GREY_LIGHTEST": "rgb(239, 239, 239)",
|
|
63
|
+
"FONT_FAMILY_ACCENT": "'EngraversGothic Bold', Helvetica, serif",
|
|
64
|
+
"COLOR_BRAND_ACCENT": "rgb(224, 215, 194)",
|
|
65
|
+
"BORDER_COLOR_GREY_DARKEST": "rgb(50, 50, 50)",
|
|
66
|
+
"FONT_FAMILY_ACCENT_FANCY": "'EngraversGothic Regular', Helvetica, sans-serif"
|
|
67
|
+
}
|
|
@@ -0,0 +1,84 @@
|
|
|
1
|
+
|
|
2
|
+
$wwd-fn-map: (
|
|
3
|
+
'border-color-grey-lightest': (rgb(239, 239, 239)),
|
|
4
|
+
'border-color-brand-secondary-light': (rgb(0, 0, 0)),
|
|
5
|
+
'border-color-grey-light': (rgb(220, 220, 220)),
|
|
6
|
+
'border-color-grey-dark': (rgb(72, 61, 50)),
|
|
7
|
+
'border-color-brand-secondary-dark': (rgb(0, 0, 0)),
|
|
8
|
+
'border-color-brand-secondary': (rgb(0, 0, 0)),
|
|
9
|
+
'border-color-grey': (rgb(140, 140, 140)),
|
|
10
|
+
'border-color-brand-primary-light': (rgb(236, 28, 36)),
|
|
11
|
+
'border-color-white': (rgb(255, 255, 255)),
|
|
12
|
+
'border-color-brand-primary-dark': (rgb(236, 28, 36)),
|
|
13
|
+
'border-color-brand-primary': (rgb(217, 33, 40)),
|
|
14
|
+
'background-color-grey-light': (rgb(220, 220, 220)),
|
|
15
|
+
'background-color-grey-lightest': (rgb(239, 239, 239)),
|
|
16
|
+
'background-color-brand-secondary-dark': (rgb(0, 0, 0)),
|
|
17
|
+
'background-color-brand-secondary-light': (rgb(0, 0, 0)),
|
|
18
|
+
'background-color-grey-dark': (rgb(72, 61, 50)),
|
|
19
|
+
'background-color-grey': (rgb(140, 140, 140)),
|
|
20
|
+
/* The background color of the main body of the site. */
|
|
21
|
+
'background-color-body': (rgb(255, 255, 255)),
|
|
22
|
+
/* The secondary brand color. This should be lighter in hue, and sufficient contrast with black text. */
|
|
23
|
+
'background-color-brand-secondary': (rgb(0, 0, 0)),
|
|
24
|
+
'background-color-black': (rgb(0, 0, 0)),
|
|
25
|
+
'background-color-brand-primary-light': (rgb(236, 28, 36)),
|
|
26
|
+
'background-color-brand-primary-dark': (rgb(236, 28, 36)),
|
|
27
|
+
'background-color-white': (rgb(255, 255, 255)),
|
|
28
|
+
'background-color-brand-primary': (rgb(217, 33, 40)),
|
|
29
|
+
'background-color-grey-darkest': (rgb(50, 50, 50)),
|
|
30
|
+
'color-brand-secondary': (rgb(0, 0, 0)),
|
|
31
|
+
'color-black': (rgb(0, 0, 0)),
|
|
32
|
+
'color-brand-primary-light': (rgb(236, 28, 36)),
|
|
33
|
+
'color-brand-primary-dark': (rgb(236, 28, 36)),
|
|
34
|
+
'color-white': (rgb(255, 255, 255)),
|
|
35
|
+
'color-brand-primary': (rgb(217, 33, 40)),
|
|
36
|
+
'color-grey-light': (rgb(220, 220, 220)),
|
|
37
|
+
'color-brand-secondary-dark': (rgb(0, 0, 0)),
|
|
38
|
+
'color-brand-secondary-light': (rgb(0, 0, 0)),
|
|
39
|
+
'color-grey-dark': (rgb(72, 61, 50)),
|
|
40
|
+
'color-grey': (rgb(140, 140, 140)),
|
|
41
|
+
/* The webfont for font-family-primary. */
|
|
42
|
+
'font-family-primary-fancy': ('Ivar Headline', Times New Roman, sans-serif),
|
|
43
|
+
/* The fallback font for font-family-primary. */
|
|
44
|
+
'font-family-primary': ('Times New Roman', serif),
|
|
45
|
+
/* Available via Typekit. */
|
|
46
|
+
'font-family-secondary-fancy': ('Libre Franklin', Arial, sans-serif),
|
|
47
|
+
/* Fallback from secondary-fancy */
|
|
48
|
+
'font-family-secondary': (Arial, serif),
|
|
49
|
+
'font-family-body': ('Ivar Text Regular', Arial, sans-serif),
|
|
50
|
+
'font-family-basic': (Arial, sans-serif),
|
|
51
|
+
'font-weight-light': (300),
|
|
52
|
+
'font-weight-normal': (400),
|
|
53
|
+
'font-weight-bold': (700),
|
|
54
|
+
'line-height-small': (1.1),
|
|
55
|
+
'line-height-normal': (1.35),
|
|
56
|
+
'line-height-copy': (1.5),
|
|
57
|
+
'line-height-large': (1.85),
|
|
58
|
+
/* Used for margins and padding only. */
|
|
59
|
+
'spacing-00': (0),
|
|
60
|
+
/* Used for margins and padding only. */
|
|
61
|
+
'spacing-025': (0.25rem),
|
|
62
|
+
/* Used for margins and padding only. */
|
|
63
|
+
'spacing-050': (0.5rem),
|
|
64
|
+
/* Used for margins and padding only. */
|
|
65
|
+
'spacing-075': (0.75rem),
|
|
66
|
+
/* Used for margins and padding only. */
|
|
67
|
+
'spacing-1': (1rem),
|
|
68
|
+
/* Used for margins and padding only. */
|
|
69
|
+
'spacing-125': (1.25rem),
|
|
70
|
+
/* Used for margins and padding only. */
|
|
71
|
+
'spacing-150': (1.5rem),
|
|
72
|
+
/* Used for margins and padding only. */
|
|
73
|
+
'spacing-2': (2rem),
|
|
74
|
+
'color-grey-darkest': (rgb(50, 50, 50)),
|
|
75
|
+
'background-color-brand-accent': (rgb(224, 215, 194)),
|
|
76
|
+
'border-color-brand-accent': (rgb(224, 215, 194)),
|
|
77
|
+
'color-grey-lightest': (rgb(239, 239, 239)),
|
|
78
|
+
/* Fallback from secondary-fancy */
|
|
79
|
+
'font-family-accent': ('EngraversGothic Bold', Helvetica, serif),
|
|
80
|
+
'color-brand-accent': (rgb(224, 215, 194)),
|
|
81
|
+
'border-color-grey-darkest': (rgb(50, 50, 50)),
|
|
82
|
+
/* Available via Typekit. */
|
|
83
|
+
'font-family-accent-fancy': ('EngraversGothic Regular', Helvetica, sans-serif),
|
|
84
|
+
);
|