@penskemediacorp/larva-tokens 1.63.0 → 1.64.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/vibe-2024.custom-properties.css +1 -0
- package/build/vibe-2024.json +65 -0
- package/build/vibe-2024.map.scss +82 -0
- package/build/vibe-2024.raw.json +685 -0
- package/package.json +2 -2
- package/style-guides/vibe-2024.html +1185 -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(90, 90, 90);--border-color-brand-secondary-dark: rgb(0, 0, 0);--border-color-brand-secondary: rgb(27, 147, 157);--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(27, 147, 157);--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(90, 90, 90);--background-color-grey: rgb(140, 140, 140);--background-color-body: rgb(255, 255, 255);--background-color-brand-secondary: rgb(27, 147, 157);--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(27, 147, 157);--background-color-grey-darkest: rgb(50, 50, 50);--color-brand-secondary: rgb(27, 147, 157);--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(27, 147, 157);--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(90, 90, 90);--color-grey: rgb(140, 140, 140);--font-family-primary-fancy: "DM Serif Text", Georgia, serif;--font-family-primary: "DM Serif Text", Georgia, serif;--font-family-secondary-fancy: Roboto, "Helvetica Regular", serif;--font-family-secondary: Roboto, "Helvetica bold", serif;--font-family-body: Georgia, serif;--font-family-basic: Roboto, "Helvetica bold", 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: rgb(16, 16, 16);--border-color-brand-accent: rgb(16, 16, 16);--color-grey-lightest: rgb(239, 239, 239);--font-family-accent: Roboto, "Helvetica bold", serif;--color-brand-accent: rgb(16, 16, 16);--font-family-accent-fancy: Roboto, "Helvetica bold", serif}
|
|
@@ -0,0 +1,65 @@
|
|
|
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(90, 90, 90)",
|
|
6
|
+
"BORDER_COLOR_BRAND_SECONDARY_DARK": "rgb(0, 0, 0)",
|
|
7
|
+
"BORDER_COLOR_BRAND_SECONDARY": "rgb(27, 147, 157)",
|
|
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(27, 147, 157)",
|
|
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(90, 90, 90)",
|
|
18
|
+
"BACKGROUND_COLOR_GREY": "rgb(140, 140, 140)",
|
|
19
|
+
"BACKGROUND_COLOR_BODY": "rgb(255, 255, 255)",
|
|
20
|
+
"BACKGROUND_COLOR_BRAND_SECONDARY": "rgb(27, 147, 157)",
|
|
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(27, 147, 157)",
|
|
26
|
+
"BACKGROUND_COLOR_GREY_DARKEST": "rgb(50, 50, 50)",
|
|
27
|
+
"COLOR_BRAND_SECONDARY": "rgb(27, 147, 157)",
|
|
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(27, 147, 157)",
|
|
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(90, 90, 90)",
|
|
37
|
+
"COLOR_GREY": "rgb(140, 140, 140)",
|
|
38
|
+
"FONT_FAMILY_PRIMARY_FANCY": "'DM Serif Text', Georgia, serif",
|
|
39
|
+
"FONT_FAMILY_PRIMARY": "'DM Serif Text', Georgia, serif",
|
|
40
|
+
"FONT_FAMILY_SECONDARY_FANCY": "Roboto, 'Helvetica Regular', serif",
|
|
41
|
+
"FONT_FAMILY_SECONDARY": "Roboto, 'Helvetica bold', serif",
|
|
42
|
+
"FONT_FAMILY_BODY": "Georgia, serif",
|
|
43
|
+
"FONT_FAMILY_BASIC": "Roboto, 'Helvetica bold', 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
|
+
"BACKGROUND_COLOR_BRAND_ACCENT": "rgb(16, 16, 16)",
|
|
60
|
+
"BORDER_COLOR_BRAND_ACCENT": "rgb(16, 16, 16)",
|
|
61
|
+
"COLOR_GREY_LIGHTEST": "rgb(239, 239, 239)",
|
|
62
|
+
"FONT_FAMILY_ACCENT": "Roboto, 'Helvetica bold', serif",
|
|
63
|
+
"COLOR_BRAND_ACCENT": "rgb(16, 16, 16)",
|
|
64
|
+
"FONT_FAMILY_ACCENT_FANCY": "Roboto, 'Helvetica bold', serif"
|
|
65
|
+
}
|
|
@@ -0,0 +1,82 @@
|
|
|
1
|
+
|
|
2
|
+
$vibe-2024-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(90, 90, 90)),
|
|
7
|
+
'border-color-brand-secondary-dark': (rgb(0, 0, 0)),
|
|
8
|
+
'border-color-brand-secondary': (rgb(27, 147, 157)),
|
|
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(27, 147, 157)),
|
|
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(90, 90, 90)),
|
|
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
|
+
'background-color-brand-secondary': (rgb(27, 147, 157)),
|
|
23
|
+
'background-color-black': (rgb(0, 0, 0)),
|
|
24
|
+
'background-color-brand-primary-light': (rgb(236, 28, 36)),
|
|
25
|
+
'background-color-brand-primary-dark': (rgb(236, 28, 36)),
|
|
26
|
+
'background-color-white': (rgb(255, 255, 255)),
|
|
27
|
+
'background-color-brand-primary': (rgb(27, 147, 157)),
|
|
28
|
+
'background-color-grey-darkest': (rgb(50, 50, 50)),
|
|
29
|
+
'color-brand-secondary': (rgb(27, 147, 157)),
|
|
30
|
+
'color-black': (rgb(0, 0, 0)),
|
|
31
|
+
'color-brand-primary-light': (rgb(236, 28, 36)),
|
|
32
|
+
'color-brand-primary-dark': (rgb(236, 28, 36)),
|
|
33
|
+
'color-white': (rgb(255, 255, 255)),
|
|
34
|
+
'color-brand-primary': (rgb(27, 147, 157)),
|
|
35
|
+
'color-grey-light': (rgb(220, 220, 220)),
|
|
36
|
+
'color-brand-secondary-dark': (rgb(0, 0, 0)),
|
|
37
|
+
'color-brand-secondary-light': (rgb(0, 0, 0)),
|
|
38
|
+
'color-grey-dark': (rgb(90, 90, 90)),
|
|
39
|
+
'color-grey': (rgb(140, 140, 140)),
|
|
40
|
+
/* The webfont, loaded async */
|
|
41
|
+
'font-family-primary-fancy': ('DM Serif Text', Georgia, serif),
|
|
42
|
+
/* The webfont, loaded async */
|
|
43
|
+
'font-family-primary': ('DM Serif Text', Georgia, serif),
|
|
44
|
+
/* The webfont, loaded async */
|
|
45
|
+
'font-family-secondary-fancy': (Roboto, 'Helvetica Regular', serif),
|
|
46
|
+
/* The webfont, loaded async */
|
|
47
|
+
'font-family-secondary': (Roboto, 'Helvetica bold', serif),
|
|
48
|
+
'font-family-body': (Georgia, serif),
|
|
49
|
+
/* The webfont, loaded async */
|
|
50
|
+
'font-family-basic': (Roboto, 'Helvetica bold', 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
|
+
'background-color-brand-accent': (rgb(16, 16, 16)),
|
|
75
|
+
'border-color-brand-accent': (rgb(16, 16, 16)),
|
|
76
|
+
'color-grey-lightest': (rgb(239, 239, 239)),
|
|
77
|
+
/* The webfont, loaded async */
|
|
78
|
+
'font-family-accent': (Roboto, 'Helvetica bold', serif),
|
|
79
|
+
'color-brand-accent': (rgb(16, 16, 16)),
|
|
80
|
+
/* The webfont, loaded async */
|
|
81
|
+
'font-family-accent-fancy': (Roboto, 'Helvetica bold', serif),
|
|
82
|
+
);
|