@penskemediacorp/larva-tokens 1.18.0 → 1.19.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.
Files changed (7) hide show
  1. package/README.md +1 -1
  2. package/build/bbesp.custom-properties.css +96 -0
  3. package/build/bbesp.json +80 -0
  4. package/build/bbesp.map.scss +96 -0
  5. package/build/bbesp.raw.json +789 -0
  6. package/package.json +2 -2
  7. package/style-guides/bbesp.html +1394 -0
package/README.md CHANGED
@@ -24,7 +24,7 @@ Given that tokens are strictly controlled, contributions should be relatively in
24
24
 
25
25
  1. Clone this repository, and follow the setup instructions in the root README.
26
26
  2. Make changes to packages/larva-tokens/src, e.g. adding a new {brand}.json tokens file, or updating a value in an existing brand.
27
- 5. From the root of this repo, run `npm run build-tokens`.
27
+ 5. From the root of this repo, run `npm run build`.
28
28
  6. Record changed in CHANGELOG.md, and open a pull request with your changes.
29
29
  7. Once the PR is merged and the release published, update the larva npm package in a consuming project.
30
30
 
package/build/bbesp.custom-properties.css ADDED
@@ -0,0 +1,96 @@
1
+
2
+ :root {
3
+ --border-color-grey-lightest: rgb(237, 235, 235);
4
+ --border-color-brand-secondary-light: rgb(0, 0, 0);
5
+ --border-color-grey-light: rgb(204, 204, 204);
6
+ --border-color-grey-dark: rgb(76, 81, 103);
7
+ --border-color-brand-secondary-dark: rgb(0, 0, 0);
8
+ --border-color-brand-secondary: rgb(18, 118, 181);
9
+ --border-color-grey: rgb(130, 137, 161);
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(0, 157, 219);
14
+ --background-color-grey-light: rgb(204, 204, 204);
15
+ --background-color-grey-lightest: rgb(237, 235, 235);
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(76, 81, 103);
19
+ --background-color-grey: rgb(130, 137, 161);
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(18, 118, 181);
23
+ --background-color-black: rgb(16, 17, 25);
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(0, 157, 219);
28
+ --background-color-grey-darkest: rgb(43, 46, 60);
29
+ --color-brand-secondary: rgb(18, 118, 181);
30
+ --color-black: rgb(16, 17, 25);
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(0, 157, 219);
35
+ --color-grey-light: rgb(230, 230, 230);
36
+ --color-brand-secondary-dark: rgb(0, 0, 0);
37
+ --color-brand-secondary-light: rgb(0, 0, 0);
38
+ --color-grey-dark: rgb(76, 81, 103);
39
+ --color-grey: rgb(130, 137, 161);
40
+ /* The webfont for font-family-primary. */
41
+ --font-family-primary-fancy: 'neue-haas-grotesk-display', 'Arial Narrow', Arial, sans-serif;
42
+ /* The fallback font for font-family-primary. */
43
+ --font-family-primary: 'Arial Narrow', Arial, sans-serif;
44
+ /* The webfont for font-family-secondary. */
45
+ --font-family-secondary-fancy: 'neue-haas-grotesk-display';
46
+ /* Fallback from font-family-secondary */
47
+ --font-family-secondary: Arial, serif;
48
+ --font-family-body: Helvetica, Arial, sans-serif;
49
+ --font-family-basic: Helvetica, Arial, sans-serif;
50
+ --font-weight-light: 300;
51
+ --font-weight-normal: 400;
52
+ --font-weight-bold: 700;
53
+ --line-height-small: 1.1;
54
+ --line-height-normal: 1.35;
55
+ --line-height-copy: 1.5;
56
+ --line-height-large: 1.85;
57
+ /* Used for margins and padding only. */
58
+ --spacing-00: 0;
59
+ /* Used for margins and padding only. */
60
+ --spacing-025: 0.25rem;
61
+ /* Used for margins and padding only. */
62
+ --spacing-050: 0.5rem;
63
+ /* Used for margins and padding only. */
64
+ --spacing-075: 0.75rem;
65
+ /* Used for margins and padding only. */
66
+ --spacing-1: 1rem;
67
+ /* Used for margins and padding only. */
68
+ --spacing-125: 1.25rem;
69
+ /* Used for margins and padding only. */
70
+ --spacing-150: 1.5rem;
71
+ /* Used for margins and padding only. */
72
+ --spacing-2: 2rem;
73
+ --background-color-brand-accent-1: rgb(239, 132, 26);
74
+ --color-grey-ligh: rgb(213, 213, 213);
75
+ --background-color-brand-accent-2: rgb(0, 221, 161);
76
+ --border-color-brand-accent-1: rgb(239, 132, 26);
77
+ --background-color-brand-accent-3: rgb(248, 201, 154);
78
+ --border-color-brand-accent-2: rgb(0, 221, 161);
79
+ --border-color-brand-accent-3: rgb(248, 201, 154);
80
+ --color-grey-darkest: rgb(43, 46, 60);
81
+ --border-color-grey-ligh: rgb(213, 213, 213);
82
+ --background-color-brand-accent: rgb(239, 132, 26);
83
+ --color-brand-accent-1: rgb(239, 132, 26);
84
+ --border-color-black: rgb(16, 17, 25);
85
+ --color-brand-accent-2: rgb(0, 221, 161);
86
+ --background-color-grey-ligh: rgb(213, 213, 213);
87
+ --border-color-brand-accent: rgb(239, 132, 26);
88
+ --color-brand-accent-3: rgb(248, 201, 154);
89
+ --color-grey-lightest: rgb(237, 235, 235);
90
+ /* The fallback for the accent font */
91
+ --font-family-accent: 'Arial Narrow', Arial, sans-serif;
92
+ --color-brand-accent: rgb(239, 132, 26);
93
+ --border-color-grey-darkest: rgb(43, 46, 60);
94
+ /* The accent webfont, loaded async */
95
+ --font-family-accent-fancy: 'acumin-pro-condensed';
96
+ }
package/build/bbesp.json ADDED
@@ -0,0 +1,80 @@
1
+ {
2
+ "BORDER_COLOR_GREY_LIGHTEST": "rgb(237, 235, 235)",
3
+ "BORDER_COLOR_BRAND_SECONDARY_LIGHT": "rgb(0, 0, 0)",
4
+ "BORDER_COLOR_GREY_LIGHT": "rgb(204, 204, 204)",
5
+ "BORDER_COLOR_GREY_DARK": "rgb(76, 81, 103)",
6
+ "BORDER_COLOR_BRAND_SECONDARY_DARK": "rgb(0, 0, 0)",
7
+ "BORDER_COLOR_BRAND_SECONDARY": "rgb(18, 118, 181)",
8
+ "BORDER_COLOR_GREY": "rgb(130, 137, 161)",
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(0, 157, 219)",
13
+ "BACKGROUND_COLOR_GREY_LIGHT": "rgb(204, 204, 204)",
14
+ "BACKGROUND_COLOR_GREY_LIGHTEST": "rgb(237, 235, 235)",
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(76, 81, 103)",
18
+ "BACKGROUND_COLOR_GREY": "rgb(130, 137, 161)",
19
+ "BACKGROUND_COLOR_BODY": "rgb(255, 255, 255)",
20
+ "BACKGROUND_COLOR_BRAND_SECONDARY": "rgb(18, 118, 181)",
21
+ "BACKGROUND_COLOR_BLACK": "rgb(16, 17, 25)",
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(0, 157, 219)",
26
+ "BACKGROUND_COLOR_GREY_DARKEST": "rgb(43, 46, 60)",
27
+ "COLOR_BRAND_SECONDARY": "rgb(18, 118, 181)",
28
+ "COLOR_BLACK": "rgb(16, 17, 25)",
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(0, 157, 219)",
33
+ "COLOR_GREY_LIGHT": "rgb(230, 230, 230)",
34
+ "COLOR_BRAND_SECONDARY_DARK": "rgb(0, 0, 0)",
35
+ "COLOR_BRAND_SECONDARY_LIGHT": "rgb(0, 0, 0)",
36
+ "COLOR_GREY_DARK": "rgb(76, 81, 103)",
37
+ "COLOR_GREY": "rgb(130, 137, 161)",
38
+ "FONT_FAMILY_PRIMARY_FANCY": "'neue-haas-grotesk-display', 'Arial Narrow', Arial, sans-serif",
39
+ "FONT_FAMILY_PRIMARY": "'Arial Narrow', Arial, sans-serif",
40
+ "FONT_FAMILY_SECONDARY_FANCY": "'neue-haas-grotesk-display'",
41
+ "FONT_FAMILY_SECONDARY": "Arial, serif",
42
+ "FONT_FAMILY_BODY": "Helvetica, Arial, sans-serif",
43
+ "FONT_FAMILY_BASIC": "Helvetica, 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
+ "BACKGROUND_COLOR_BRAND_ACCENT_1": "rgb(239, 132, 26)",
60
+ "COLOR_GREY_LIGH": "rgb(213, 213, 213)",
61
+ "BACKGROUND_COLOR_BRAND_ACCENT_2": "rgb(0, 221, 161)",
62
+ "BORDER_COLOR_BRAND_ACCENT_1": "rgb(239, 132, 26)",
63
+ "BACKGROUND_COLOR_BRAND_ACCENT_3": "rgb(248, 201, 154)",
64
+ "BORDER_COLOR_BRAND_ACCENT_2": "rgb(0, 221, 161)",
65
+ "BORDER_COLOR_BRAND_ACCENT_3": "rgb(248, 201, 154)",
66
+ "COLOR_GREY_DARKEST": "rgb(43, 46, 60)",
67
+ "BORDER_COLOR_GREY_LIGH": "rgb(213, 213, 213)",
68
+ "BACKGROUND_COLOR_BRAND_ACCENT": "rgb(239, 132, 26)",
69
+ "COLOR_BRAND_ACCENT_1": "rgb(239, 132, 26)",
70
+ "BORDER_COLOR_BLACK": "rgb(16, 17, 25)",
71
+ "COLOR_BRAND_ACCENT_2": "rgb(0, 221, 161)",
72
+ "BACKGROUND_COLOR_GREY_LIGH": "rgb(213, 213, 213)",
73
+ "BORDER_COLOR_BRAND_ACCENT": "rgb(239, 132, 26)",
74
+ "COLOR_BRAND_ACCENT_3": "rgb(248, 201, 154)",
75
+ "COLOR_GREY_LIGHTEST": "rgb(237, 235, 235)",
76
+ "FONT_FAMILY_ACCENT": "'Arial Narrow', Arial, sans-serif",
77
+ "COLOR_BRAND_ACCENT": "rgb(239, 132, 26)",
78
+ "BORDER_COLOR_GREY_DARKEST": "rgb(43, 46, 60)",
79
+ "FONT_FAMILY_ACCENT_FANCY": "'acumin-pro-condensed'"
80
+ }
package/build/bbesp.map.scss ADDED
@@ -0,0 +1,96 @@
1
+
2
+ $bbesp-map: (
3
+ 'border-color-grey-lightest': (rgb(237, 235, 235)),
4
+ 'border-color-brand-secondary-light': (rgb(0, 0, 0)),
5
+ 'border-color-grey-light': (rgb(204, 204, 204)),
6
+ 'border-color-grey-dark': (rgb(76, 81, 103)),
7
+ 'border-color-brand-secondary-dark': (rgb(0, 0, 0)),
8
+ 'border-color-brand-secondary': (rgb(18, 118, 181)),
9
+ 'border-color-grey': (rgb(130, 137, 161)),
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(0, 157, 219)),
14
+ 'background-color-grey-light': (rgb(204, 204, 204)),
15
+ 'background-color-grey-lightest': (rgb(237, 235, 235)),
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(76, 81, 103)),
19
+ 'background-color-grey': (rgb(130, 137, 161)),
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(18, 118, 181)),
23
+ 'background-color-black': (rgb(16, 17, 25)),
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(0, 157, 219)),
28
+ 'background-color-grey-darkest': (rgb(43, 46, 60)),
29
+ 'color-brand-secondary': (rgb(18, 118, 181)),
30
+ 'color-black': (rgb(16, 17, 25)),
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(0, 157, 219)),
35
+ 'color-grey-light': (rgb(230, 230, 230)),
36
+ 'color-brand-secondary-dark': (rgb(0, 0, 0)),
37
+ 'color-brand-secondary-light': (rgb(0, 0, 0)),
38
+ 'color-grey-dark': (rgb(76, 81, 103)),
39
+ 'color-grey': (rgb(130, 137, 161)),
40
+ /* The webfont for font-family-primary. */
41
+ 'font-family-primary-fancy': ('neue-haas-grotesk-display', 'Arial Narrow', Arial, sans-serif),
42
+ /* The fallback font for font-family-primary. */
43
+ 'font-family-primary': ('Arial Narrow', Arial, sans-serif),
44
+ /* The webfont for font-family-secondary. */
45
+ 'font-family-secondary-fancy': ('neue-haas-grotesk-display'),
46
+ /* Fallback from font-family-secondary */
47
+ 'font-family-secondary': (Arial, serif),
48
+ 'font-family-body': (Helvetica, Arial, sans-serif),
49
+ 'font-family-basic': (Helvetica, Arial, sans-serif),
50
+ 'font-weight-light': (300),
51
+ 'font-weight-normal': (400),
52
+ 'font-weight-bold': (700),
53
+ 'line-height-small': (1.1),
54
+ 'line-height-normal': (1.35),
55
+ 'line-height-copy': (1.5),
56
+ 'line-height-large': (1.85),
57
+ /* Used for margins and padding only. */
58
+ 'spacing-00': (0),
59
+ /* Used for margins and padding only. */
60
+ 'spacing-025': (0.25rem),
61
+ /* Used for margins and padding only. */
62
+ 'spacing-050': (0.5rem),
63
+ /* Used for margins and padding only. */
64
+ 'spacing-075': (0.75rem),
65
+ /* Used for margins and padding only. */
66
+ 'spacing-1': (1rem),
67
+ /* Used for margins and padding only. */
68
+ 'spacing-125': (1.25rem),
69
+ /* Used for margins and padding only. */
70
+ 'spacing-150': (1.5rem),
71
+ /* Used for margins and padding only. */
72
+ 'spacing-2': (2rem),
73
+ 'background-color-brand-accent-1': (rgb(239, 132, 26)),
74
+ 'color-grey-ligh': (rgb(213, 213, 213)),
75
+ 'background-color-brand-accent-2': (rgb(0, 221, 161)),
76
+ 'border-color-brand-accent-1': (rgb(239, 132, 26)),
77
+ 'background-color-brand-accent-3': (rgb(248, 201, 154)),
78
+ 'border-color-brand-accent-2': (rgb(0, 221, 161)),
79
+ 'border-color-brand-accent-3': (rgb(248, 201, 154)),
80
+ 'color-grey-darkest': (rgb(43, 46, 60)),
81
+ 'border-color-grey-ligh': (rgb(213, 213, 213)),
82
+ 'background-color-brand-accent': (rgb(239, 132, 26)),
83
+ 'color-brand-accent-1': (rgb(239, 132, 26)),
84
+ 'border-color-black': (rgb(16, 17, 25)),
85
+ 'color-brand-accent-2': (rgb(0, 221, 161)),
86
+ 'background-color-grey-ligh': (rgb(213, 213, 213)),
87
+ 'border-color-brand-accent': (rgb(239, 132, 26)),
88
+ 'color-brand-accent-3': (rgb(248, 201, 154)),
89
+ 'color-grey-lightest': (rgb(237, 235, 235)),
90
+ /* The fallback for the accent font */
91
+ 'font-family-accent': ('Arial Narrow', Arial, sans-serif),
92
+ 'color-brand-accent': (rgb(239, 132, 26)),
93
+ 'border-color-grey-darkest': (rgb(43, 46, 60)),
94
+ /* The accent webfont, loaded async */
95
+ 'font-family-accent-fancy': ('acumin-pro-condensed'),
96
+ );