@penskemediacorp/larva-tokens 0.3.10-develop.7 → 0.4.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 (21) hide show
  1. package/build/robbreport.custom-properties.css +3 -2
  2. package/build/robbreport.json +2 -1
  3. package/build/robbreport.map.scss +3 -2
  4. package/build/robbreport.raw.json +10 -3
  5. package/build/rollingstone.custom-properties.css +45 -25
  6. package/build/rollingstone.json +44 -24
  7. package/build/rollingstone.map.scss +45 -25
  8. package/build/rollingstone.raw.json +239 -59
  9. package/build/variety-vip.custom-properties.css +140 -31
  10. package/build/variety-vip.json +141 -32
  11. package/build/variety-vip.map.scss +140 -31
  12. package/build/variety-vip.raw.json +1090 -215
  13. package/build/variety.custom-properties.css +140 -31
  14. package/build/variety.json +141 -32
  15. package/build/variety.map.scss +140 -31
  16. package/build/variety.raw.json +1090 -215
  17. package/package.json +2 -2
  18. package/style-guides/robbreport.html +20 -3
  19. package/style-guides/rollingstone.html +427 -50
  20. package/style-guides/variety-vip.html +1437 -167
  21. package/style-guides/variety.html +1437 -167
package/build/variety.custom-properties.css CHANGED
@@ -4,10 +4,10 @@
4
4
  --border-color-brand-secondary-light: rgb(0, 0, 0);
5
5
  --border-color-grey-light: rgb(204, 204, 204);
6
6
  --border-color-grey-dark: rgb(106, 106, 106);
7
- --border-color-brand-secondary-dark: rgb(0, 0, 0);
7
+ --border-color-brand-secondary-dark: rgb(36, 56, 66);
8
8
  --border-color-brand-secondary: rgb(65, 126, 244);
9
9
  --border-color-grey: rgb(140, 140, 140);
10
- --border-color-brand-primary-light: rgb(236, 28, 36);
10
+ --border-color-brand-primary-light: rgb(243, 245, 203);
11
11
  --border-color-white: rgb(255, 255, 255);
12
12
  --border-color-brand-primary-dark: rgb(236, 28, 36);
13
13
  --border-color-brand-primary: rgb(238, 232, 9);
@@ -70,52 +70,161 @@
70
70
  /* Used for margins and padding only. */
71
71
  --spacing-2: 2rem;
72
72
  --primary-xl-font-size-desktop: initial;
73
- --primary-m-line-height-desktop: initial;
74
73
  --primary-l-font-size-mobile: 24px;
75
- --primary-xl-line-height-desktop: initial;
76
- --primary-s-font-weight-mobile: normal;
74
+ --body-s-font-size-desktop: initial;
77
75
  --primary-s-font-size-desktop: initial;
78
- --primary-s-line-height-desktop: initial;
79
- --secondary-s-line-height-mobile: 21px;
80
- --primary-xl-font-weight-mobile: normal;
76
+ --primary-xxs-font-size-desktop: 24px;
77
+ --accent-l-font-size-desktop: 58px;
78
+ --accent-m-font-size-desktop: initial;
79
+ --primary-xxxs-font-size-desktop: 20px;
80
+ --primary-xs-font-size-desktop: 26px;
81
81
  --secondary-s-font-size-mobile: 14px;
82
- --primary-m-font-weight-mobile: normal;
83
- --primary-l-font-weight-mobile: normal;
84
- --secondary-m-line-height-mobile: 21px;
85
- --font-family-basic-fancy: 'IBM Plex Mono', monospace;
82
+ --accent-regular-xxs-font-size-desktop: 18px;
86
83
  --secondary-m-font-size-mobile: 18px;
84
+ --accent-xxs-font-size-desktop: 18px;
85
+ --accent-s-font-size-desktop: initial;
86
+ --secondary-regular-m-font-size-desktop: initial;
87
87
  --secondary-l-font-size-mobile: 18px;
88
- --background-color-brand-accent: rgb(26, 40, 47);
89
- --secondary-regular-m-line-height-mobile: 21px;
90
- --secondary-s-font-weight-mobile: bold;
91
- --accent-m-letter-spacing-mobile: 2.1px;
92
88
  --secondary-l-font-size-desktop: initial;
93
89
  --secondary-regular-m-font-size-mobile: 16px;
90
+ --accent-xxs-font-size-mobile: 14px;
94
91
  --secondary-m-font-size-desktop: initial;
95
- --secondary-l-line-height-desktop: initial;
96
- --secondary-m-line-height-desktop: initial;
92
+ --accent-s-font-size-mobile: 23px;
93
+ --accent-regular-xxs-font-size-mobile: 14px;
94
+ --primary-xs-font-size-mobile: 18px;
95
+ --primary-xxxs-font-size-mobile: 19px;
96
+ --accent-m-font-size-mobile: 42px;
97
+ --secondary-s-font-size-desktop: initial;
98
+ --accent-l-font-size-mobile: 40px;
99
+ --primary-xxs-font-size-mobile: 22px;
100
+ --primary-s-font-size-mobile: 21px;
101
+ --body-s-font-size-mobile: 16px;
102
+ --primary-l-font-size-desktop: initial;
103
+ --primary-xl-font-size-mobile: 28px;
104
+ --accent-xs-font-size-mobile: 18px;
105
+ --primary-m-font-size-mobile: 24px;
106
+ --body-m-font-size-desktop: initial;
107
+ --body-m-font-size-mobile: 16px;
108
+ --primary-m-font-size-desktop: initial;
109
+ --accent-xs-font-size-desktop: 23px;
110
+ --secondary-s-letter-spacing-mobile: normal;
111
+ --secondary-m-letter-spacing-desktop: normal;
112
+ --secondary-l-letter-spacing-desktop: normal;
113
+ --primary-l-letter-spacing-mobile: normal;
114
+ --secondary-regular-m-letter-spacing-desktop: normal;
115
+ --accent-xs-letter-spacing-mobile: 0.52px;
116
+ --accent-s-letter-spacing-desktop: normal;
117
+ --accent-xxs-letter-spacing-desktop: .52px;
118
+ --body-m-letter-spacing-mobile: normal;
119
+ --primary-m-letter-spacing-mobile: normal;
120
+ --primary-xl-letter-spacing-mobile: normal;
121
+ --accent-regular-xxs-letter-spacing-desktop: 0.52px;
122
+ --body-s-letter-spacing-mobile: normal;
123
+ --primary-s-letter-spacing-mobile: normal;
124
+ --primary-xs-letter-spacing-desktop: normal;
125
+ --primary-xxs-letter-spacing-mobile: normal;
126
+ --primary-xxxs-letter-spacing-desktop: normal;
127
+ --accent-m-letter-spacing-desktop: normal;
128
+ --accent-l-letter-spacing-desktop: 1.66px;
129
+ --accent-l-letter-spacing-mobile: 1.14px;
130
+ --accent-m-letter-spacing-mobile: 2.1px;
131
+ --primary-xxxs-letter-spacing-mobile: normal;
132
+ --primary-xxs-letter-spacing-desktop: normal;
133
+ --primary-xs-letter-spacing-mobile: normal;
134
+ --primary-s-letter-spacing-desktop: normal;
135
+ --body-s-letter-spacing-desktop: normal;
136
+ --accent-regular-xxs-letter-spacing-mobile: 0.4px;
137
+ --primary-xl-letter-spacing-desktop: normal;
138
+ --accent-xs-letter-spacing-desktop: 0.66px;
139
+ --accent-xxs-letter-spacing-mobile: .4px;
140
+ --primary-m-letter-spacing-desktop: normal;
141
+ --body-m-letter-spacing-desktop: normal;
142
+ --accent-s-letter-spacing-mobile: .66px;
143
+ --secondary-regular-m-letter-spacing-mobile: normal;
144
+ --primary-l-letter-spacing-desktop: normal;
145
+ --secondary-l-letter-spacing-mobile: normal;
146
+ --secondary-m-letter-spacing-mobile: normal;
147
+ --secondary-s-letter-spacing-desktop: normal;
148
+ --primary-xs-font-weight-mobile: 700;
149
+ --primary-xxxs-font-weight-mobile: 700;
150
+ --accent-m-font-weight-mobile: 300;
151
+ --accent-regular-xxs-font-weight-desktop: initial;
152
+ --accent-l-font-weight-mobile: 300;
153
+ --primary-xxs-font-weight-mobile: 700;
154
+ --primary-s-font-weight-mobile: normal;
155
+ --body-s-font-weight-mobile: initial;
156
+ --accent-xxs-font-weight-desktop: initial;
157
+ --accent-s-font-weight-desktop: initial;
158
+ --secondary-regular-m-font-weight-desktop: initial;
159
+ --primary-xl-font-weight-mobile: normal;
160
+ --secondary-l-font-weight-desktop: initial;
161
+ --body-m-font-weight-mobile: initial;
162
+ --accent-xs-font-weight-mobile: 300;
163
+ --secondary-m-font-weight-desktop: initial;
164
+ --primary-m-font-weight-mobile: normal;
165
+ --primary-l-font-weight-mobile: normal;
166
+ --secondary-s-font-weight-desktop: initial;
167
+ --secondary-s-font-weight-mobile: bold;
97
168
  --primary-l-font-weight-desktop: normal;
98
- --font-family-accent: Helvetica, sans-serif;
169
+ --body-m-font-weight-desktop: initial;
99
170
  --primary-m-font-weight-desktop: normal;
100
- --accent-m-line-height-mobile: 42px;
171
+ --accent-xs-font-weight-desktop: initial;
172
+ --secondary-m-font-weight-mobile: 600;
101
173
  --primary-xl-font-weight-desktop: normal;
102
174
  --secondary-l-font-weight-mobile: bold;
103
- --font-family-body-fancy: 'IBM Plex Serif', serif;
104
- --accent-m-font-size-mobile: 42px;
105
- --secondary-s-font-size-desktop: initial;
175
+ --secondary-regular-m-font-weight-mobile: initial;
176
+ --accent-s-font-weight-mobile: 300;
177
+ --accent-xxs-font-weight-mobile: 300;
178
+ --body-s-font-weight-desktop: initial;
179
+ --primary-s-font-weight-desktop: normal;
180
+ --primary-xxs-font-weight-desktop: 700;
181
+ --accent-regular-xxs-font-weight-mobile: 400;
182
+ --accent-l-font-weight-desktop: initial;
183
+ --accent-m-font-weight-desktop: initial;
184
+ --primary-xxxs-font-weight-desktop: 700;
185
+ --primary-xs-font-weight-desktop: 700;
186
+ --accent-xs-line-height-desktop: 24px;
187
+ --body-m-line-height-desktop: initial;
188
+ --primary-m-line-height-desktop: initial;
189
+ --primary-xl-line-height-desktop: initial;
190
+ --primary-s-line-height-desktop: initial;
191
+ --primary-xxs-line-height-desktop: 27px;
192
+ --secondary-s-line-height-mobile: 21px;
193
+ --body-s-line-height-desktop: initial;
194
+ --accent-l-line-height-desktop: 50px;
195
+ --primary-xxxs-line-height-desktop: 23px;
196
+ --primary-xs-line-height-desktop: 29px;
197
+ --accent-m-line-height-desktop: initial;
198
+ --accent-regular-xxs-line-height-desktop: 26px;
199
+ --secondary-m-line-height-mobile: 21px;
200
+ --secondary-l-line-height-mobile: 21px;
201
+ --accent-s-line-height-desktop: initial;
202
+ --accent-xxs-line-height-desktop: 18px;
203
+ --secondary-regular-m-line-height-mobile: 21px;
204
+ --secondary-regular-m-line-height-desktop: initial;
205
+ --accent-s-line-height-mobile: 23px;
206
+ --accent-xxs-line-height-mobile: 0.4px;
207
+ --secondary-l-line-height-desktop: initial;
208
+ --secondary-m-line-height-desktop: initial;
209
+ --accent-regular-xxs-line-height-mobile: 14px;
210
+ --primary-xs-line-height-mobile: 21px;
211
+ --primary-xxxs-line-height-mobile: 21px;
212
+ --accent-m-line-height-mobile: 42px;
213
+ --accent-l-line-height-mobile: 36px;
106
214
  --secondary-s-line-height-desktop: initial;
215
+ --primary-xxs-line-height-mobile: 23px;
107
216
  --primary-s-line-height-mobile: 24px;
108
- --primary-s-font-size-mobile: 21px;
109
- --primary-s-font-weight-desktop: normal;
217
+ --body-s-line-height-mobile: 22px;
110
218
  --primary-xl-line-height-mobile: 32px;
111
- --color-brand-accent: rgb(243, 112, 33);
112
- --primary-l-font-size-desktop: initial;
113
219
  --primary-m-line-height-mobile: 27px;
114
- --primary-xl-font-size-mobile: 28px;
220
+ --body-m-line-height-mobile: 24px;
221
+ --accent-xs-line-height-mobile: 19px;
115
222
  --primary-l-line-height-desktop: initial;
116
- --primary-m-font-size-mobile: 24px;
117
- --body-m-font-size-mobile: 16px;
118
- --primary-m-font-size-desktop: initial;
119
223
  --primary-l-line-height-mobile: 27px;
224
+ --font-family-accent: Helvetica, sans-serif;
120
225
  --font-family-accent-fancy: 'Graphik XX Cond', sans-serif;
226
+ --font-family-basic-fancy: 'IBM Plex Mono', monospace;
227
+ --background-color-brand-accent: rgb(26, 40, 47);
228
+ --font-family-body-fancy: 'IBM Plex Serif', serif;
229
+ --color-brand-accent: rgb(243, 112, 33);
121
230
  }
package/build/variety.json CHANGED
@@ -3,10 +3,10 @@
3
3
  "BORDER_COLOR_BRAND_SECONDARY_LIGHT": "rgb(0, 0, 0)",
4
4
  "BORDER_COLOR_GREY_LIGHT": "rgb(204, 204, 204)",
5
5
  "BORDER_COLOR_GREY_DARK": "rgb(106, 106, 106)",
6
- "BORDER_COLOR_BRAND_SECONDARY_DARK": "rgb(0, 0, 0)",
6
+ "BORDER_COLOR_BRAND_SECONDARY_DARK": "rgb(36, 56, 66)",
7
7
  "BORDER_COLOR_BRAND_SECONDARY": "rgb(65, 126, 244)",
8
8
  "BORDER_COLOR_GREY": "rgb(140, 140, 140)",
9
- "BORDER_COLOR_BRAND_PRIMARY_LIGHT": "rgb(236, 28, 36)",
9
+ "BORDER_COLOR_BRAND_PRIMARY_LIGHT": "rgb(243, 245, 203)",
10
10
  "BORDER_COLOR_WHITE": "rgb(255, 255, 255)",
11
11
  "BORDER_COLOR_BRAND_PRIMARY_DARK": "rgb(236, 28, 36)",
12
12
  "BORDER_COLOR_BRAND_PRIMARY": "rgb(238, 232, 9)",
@@ -57,52 +57,161 @@
57
57
  "SPACING_150": "1.5rem",
58
58
  "SPACING_2": "2rem",
59
59
  "PRIMARY_XL_FONT_SIZE_DESKTOP": "initial",
60
- "PRIMARY_M_LINE_HEIGHT_DESKTOP": "initial",
61
60
  "PRIMARY_L_FONT_SIZE_MOBILE": "24px",
62
- "PRIMARY_XL_LINE_HEIGHT_DESKTOP": "initial",
63
- "PRIMARY_S_FONT_WEIGHT_MOBILE": "normal",
61
+ "BODY_S_FONT_SIZE_DESKTOP": "initial",
64
62
  "PRIMARY_S_FONT_SIZE_DESKTOP": "initial",
65
- "PRIMARY_S_LINE_HEIGHT_DESKTOP": "initial",
66
- "SECONDARY_S_LINE_HEIGHT_MOBILE": "21px",
67
- "PRIMARY_XL_FONT_WEIGHT_MOBILE": "normal",
63
+ "PRIMARY_XXS_FONT_SIZE_DESKTOP": "24px",
64
+ "ACCENT_L_FONT_SIZE_DESKTOP": "58px",
65
+ "ACCENT_M_FONT_SIZE_DESKTOP": "initial",
66
+ "PRIMARY_XXXS_FONT_SIZE_DESKTOP": "20px",
67
+ "PRIMARY_XS_FONT_SIZE_DESKTOP": "26px",
68
68
  "SECONDARY_S_FONT_SIZE_MOBILE": "14px",
69
- "PRIMARY_M_FONT_WEIGHT_MOBILE": "normal",
70
- "PRIMARY_L_FONT_WEIGHT_MOBILE": "normal",
71
- "SECONDARY_M_LINE_HEIGHT_MOBILE": "21px",
72
- "FONT_FAMILY_BASIC_FANCY": "'IBM Plex Mono', monospace",
69
+ "ACCENT_REGULAR_XXS_FONT_SIZE_DESKTOP": "18px",
73
70
  "SECONDARY_M_FONT_SIZE_MOBILE": "18px",
71
+ "ACCENT_XXS_FONT_SIZE_DESKTOP": "18px",
72
+ "ACCENT_S_FONT_SIZE_DESKTOP": "initial",
73
+ "SECONDARY_REGULAR_M_FONT_SIZE_DESKTOP": "initial",
74
74
  "SECONDARY_L_FONT_SIZE_MOBILE": "18px",
75
- "BACKGROUND_COLOR_BRAND_ACCENT": "rgb(26, 40, 47)",
76
- "SECONDARY_REGULAR_M_LINE_HEIGHT_MOBILE": "21px",
77
- "SECONDARY_S_FONT_WEIGHT_MOBILE": "bold",
78
- "ACCENT_M_LETTER_SPACING_MOBILE": "2.1px",
79
75
  "SECONDARY_L_FONT_SIZE_DESKTOP": "initial",
80
76
  "SECONDARY_REGULAR_M_FONT_SIZE_MOBILE": "16px",
77
+ "ACCENT_XXS_FONT_SIZE_MOBILE": "14px",
81
78
  "SECONDARY_M_FONT_SIZE_DESKTOP": "initial",
82
- "SECONDARY_L_LINE_HEIGHT_DESKTOP": "initial",
83
- "SECONDARY_M_LINE_HEIGHT_DESKTOP": "initial",
79
+ "ACCENT_S_FONT_SIZE_MOBILE": "23px",
80
+ "ACCENT_REGULAR_XXS_FONT_SIZE_MOBILE": "14px",
81
+ "PRIMARY_XS_FONT_SIZE_MOBILE": "18px",
82
+ "PRIMARY_XXXS_FONT_SIZE_MOBILE": "19px",
83
+ "ACCENT_M_FONT_SIZE_MOBILE": "42px",
84
+ "SECONDARY_S_FONT_SIZE_DESKTOP": "initial",
85
+ "ACCENT_L_FONT_SIZE_MOBILE": "40px",
86
+ "PRIMARY_XXS_FONT_SIZE_MOBILE": "22px",
87
+ "PRIMARY_S_FONT_SIZE_MOBILE": "21px",
88
+ "BODY_S_FONT_SIZE_MOBILE": "16px",
89
+ "PRIMARY_L_FONT_SIZE_DESKTOP": "initial",
90
+ "PRIMARY_XL_FONT_SIZE_MOBILE": "28px",
91
+ "ACCENT_XS_FONT_SIZE_MOBILE": "18px",
92
+ "PRIMARY_M_FONT_SIZE_MOBILE": "24px",
93
+ "BODY_M_FONT_SIZE_DESKTOP": "initial",
94
+ "BODY_M_FONT_SIZE_MOBILE": "16px",
95
+ "PRIMARY_M_FONT_SIZE_DESKTOP": "initial",
96
+ "ACCENT_XS_FONT_SIZE_DESKTOP": "23px",
97
+ "SECONDARY_S_LETTER_SPACING_MOBILE": "normal",
98
+ "SECONDARY_M_LETTER_SPACING_DESKTOP": "normal",
99
+ "SECONDARY_L_LETTER_SPACING_DESKTOP": "normal",
100
+ "PRIMARY_L_LETTER_SPACING_MOBILE": "normal",
101
+ "SECONDARY_REGULAR_M_LETTER_SPACING_DESKTOP": "normal",
102
+ "ACCENT_XS_LETTER_SPACING_MOBILE": "0.52px",
103
+ "ACCENT_S_LETTER_SPACING_DESKTOP": "normal",
104
+ "ACCENT_XXS_LETTER_SPACING_DESKTOP": ".52px",
105
+ "BODY_M_LETTER_SPACING_MOBILE": "normal",
106
+ "PRIMARY_M_LETTER_SPACING_MOBILE": "normal",
107
+ "PRIMARY_XL_LETTER_SPACING_MOBILE": "normal",
108
+ "ACCENT_REGULAR_XXS_LETTER_SPACING_DESKTOP": "0.52px",
109
+ "BODY_S_LETTER_SPACING_MOBILE": "normal",
110
+ "PRIMARY_S_LETTER_SPACING_MOBILE": "normal",
111
+ "PRIMARY_XS_LETTER_SPACING_DESKTOP": "normal",
112
+ "PRIMARY_XXS_LETTER_SPACING_MOBILE": "normal",
113
+ "PRIMARY_XXXS_LETTER_SPACING_DESKTOP": "normal",
114
+ "ACCENT_M_LETTER_SPACING_DESKTOP": "normal",
115
+ "ACCENT_L_LETTER_SPACING_DESKTOP": "1.66px",
116
+ "ACCENT_L_LETTER_SPACING_MOBILE": "1.14px",
117
+ "ACCENT_M_LETTER_SPACING_MOBILE": "2.1px",
118
+ "PRIMARY_XXXS_LETTER_SPACING_MOBILE": "normal",
119
+ "PRIMARY_XXS_LETTER_SPACING_DESKTOP": "normal",
120
+ "PRIMARY_XS_LETTER_SPACING_MOBILE": "normal",
121
+ "PRIMARY_S_LETTER_SPACING_DESKTOP": "normal",
122
+ "BODY_S_LETTER_SPACING_DESKTOP": "normal",
123
+ "ACCENT_REGULAR_XXS_LETTER_SPACING_MOBILE": "0.4px",
124
+ "PRIMARY_XL_LETTER_SPACING_DESKTOP": "normal",
125
+ "ACCENT_XS_LETTER_SPACING_DESKTOP": "0.66px",
126
+ "ACCENT_XXS_LETTER_SPACING_MOBILE": ".4px",
127
+ "PRIMARY_M_LETTER_SPACING_DESKTOP": "normal",
128
+ "BODY_M_LETTER_SPACING_DESKTOP": "normal",
129
+ "ACCENT_S_LETTER_SPACING_MOBILE": ".66px",
130
+ "SECONDARY_REGULAR_M_LETTER_SPACING_MOBILE": "normal",
131
+ "PRIMARY_L_LETTER_SPACING_DESKTOP": "normal",
132
+ "SECONDARY_L_LETTER_SPACING_MOBILE": "normal",
133
+ "SECONDARY_M_LETTER_SPACING_MOBILE": "normal",
134
+ "SECONDARY_S_LETTER_SPACING_DESKTOP": "normal",
135
+ "PRIMARY_XS_FONT_WEIGHT_MOBILE": "700",
136
+ "PRIMARY_XXXS_FONT_WEIGHT_MOBILE": "700",
137
+ "ACCENT_M_FONT_WEIGHT_MOBILE": "300",
138
+ "ACCENT_REGULAR_XXS_FONT_WEIGHT_DESKTOP": "initial",
139
+ "ACCENT_L_FONT_WEIGHT_MOBILE": "300",
140
+ "PRIMARY_XXS_FONT_WEIGHT_MOBILE": "700",
141
+ "PRIMARY_S_FONT_WEIGHT_MOBILE": "normal",
142
+ "BODY_S_FONT_WEIGHT_MOBILE": "initial",
143
+ "ACCENT_XXS_FONT_WEIGHT_DESKTOP": "initial",
144
+ "ACCENT_S_FONT_WEIGHT_DESKTOP": "initial",
145
+ "SECONDARY_REGULAR_M_FONT_WEIGHT_DESKTOP": "initial",
146
+ "PRIMARY_XL_FONT_WEIGHT_MOBILE": "normal",
147
+ "SECONDARY_L_FONT_WEIGHT_DESKTOP": "initial",
148
+ "BODY_M_FONT_WEIGHT_MOBILE": "initial",
149
+ "ACCENT_XS_FONT_WEIGHT_MOBILE": "300",
150
+ "SECONDARY_M_FONT_WEIGHT_DESKTOP": "initial",
151
+ "PRIMARY_M_FONT_WEIGHT_MOBILE": "normal",
152
+ "PRIMARY_L_FONT_WEIGHT_MOBILE": "normal",
153
+ "SECONDARY_S_FONT_WEIGHT_DESKTOP": "initial",
154
+ "SECONDARY_S_FONT_WEIGHT_MOBILE": "bold",
84
155
  "PRIMARY_L_FONT_WEIGHT_DESKTOP": "normal",
85
- "FONT_FAMILY_ACCENT": "Helvetica, sans-serif",
156
+ "BODY_M_FONT_WEIGHT_DESKTOP": "initial",
86
157
  "PRIMARY_M_FONT_WEIGHT_DESKTOP": "normal",
87
- "ACCENT_M_LINE_HEIGHT_MOBILE": "42px",
158
+ "ACCENT_XS_FONT_WEIGHT_DESKTOP": "initial",
159
+ "SECONDARY_M_FONT_WEIGHT_MOBILE": "600",
88
160
  "PRIMARY_XL_FONT_WEIGHT_DESKTOP": "normal",
89
161
  "SECONDARY_L_FONT_WEIGHT_MOBILE": "bold",
90
- "FONT_FAMILY_BODY_FANCY": "'IBM Plex Serif', serif",
91
- "ACCENT_M_FONT_SIZE_MOBILE": "42px",
92
- "SECONDARY_S_FONT_SIZE_DESKTOP": "initial",
162
+ "SECONDARY_REGULAR_M_FONT_WEIGHT_MOBILE": "initial",
163
+ "ACCENT_S_FONT_WEIGHT_MOBILE": "300",
164
+ "ACCENT_XXS_FONT_WEIGHT_MOBILE": "300",
165
+ "BODY_S_FONT_WEIGHT_DESKTOP": "initial",
166
+ "PRIMARY_S_FONT_WEIGHT_DESKTOP": "normal",
167
+ "PRIMARY_XXS_FONT_WEIGHT_DESKTOP": "700",
168
+ "ACCENT_REGULAR_XXS_FONT_WEIGHT_MOBILE": "400",
169
+ "ACCENT_L_FONT_WEIGHT_DESKTOP": "initial",
170
+ "ACCENT_M_FONT_WEIGHT_DESKTOP": "initial",
171
+ "PRIMARY_XXXS_FONT_WEIGHT_DESKTOP": "700",
172
+ "PRIMARY_XS_FONT_WEIGHT_DESKTOP": "700",
173
+ "ACCENT_XS_LINE_HEIGHT_DESKTOP": "24px",
174
+ "BODY_M_LINE_HEIGHT_DESKTOP": "initial",
175
+ "PRIMARY_M_LINE_HEIGHT_DESKTOP": "initial",
176
+ "PRIMARY_XL_LINE_HEIGHT_DESKTOP": "initial",
177
+ "PRIMARY_S_LINE_HEIGHT_DESKTOP": "initial",
178
+ "PRIMARY_XXS_LINE_HEIGHT_DESKTOP": "27px",
179
+ "SECONDARY_S_LINE_HEIGHT_MOBILE": "21px",
180
+ "BODY_S_LINE_HEIGHT_DESKTOP": "initial",
181
+ "ACCENT_L_LINE_HEIGHT_DESKTOP": "50px",
182
+ "PRIMARY_XXXS_LINE_HEIGHT_DESKTOP": "23px",
183
+ "PRIMARY_XS_LINE_HEIGHT_DESKTOP": "29px",
184
+ "ACCENT_M_LINE_HEIGHT_DESKTOP": "initial",
185
+ "ACCENT_REGULAR_XXS_LINE_HEIGHT_DESKTOP": "26px",
186
+ "SECONDARY_M_LINE_HEIGHT_MOBILE": "21px",
187
+ "SECONDARY_L_LINE_HEIGHT_MOBILE": "21px",
188
+ "ACCENT_S_LINE_HEIGHT_DESKTOP": "initial",
189
+ "ACCENT_XXS_LINE_HEIGHT_DESKTOP": "18px",
190
+ "SECONDARY_REGULAR_M_LINE_HEIGHT_MOBILE": "21px",
191
+ "SECONDARY_REGULAR_M_LINE_HEIGHT_DESKTOP": "initial",
192
+ "ACCENT_S_LINE_HEIGHT_MOBILE": "23px",
193
+ "ACCENT_XXS_LINE_HEIGHT_MOBILE": "0.4px",
194
+ "SECONDARY_L_LINE_HEIGHT_DESKTOP": "initial",
195
+ "SECONDARY_M_LINE_HEIGHT_DESKTOP": "initial",
196
+ "ACCENT_REGULAR_XXS_LINE_HEIGHT_MOBILE": "14px",
197
+ "PRIMARY_XS_LINE_HEIGHT_MOBILE": "21px",
198
+ "PRIMARY_XXXS_LINE_HEIGHT_MOBILE": "21px",
199
+ "ACCENT_M_LINE_HEIGHT_MOBILE": "42px",
200
+ "ACCENT_L_LINE_HEIGHT_MOBILE": "36px",
93
201
  "SECONDARY_S_LINE_HEIGHT_DESKTOP": "initial",
202
+ "PRIMARY_XXS_LINE_HEIGHT_MOBILE": "23px",
94
203
  "PRIMARY_S_LINE_HEIGHT_MOBILE": "24px",
95
- "PRIMARY_S_FONT_SIZE_MOBILE": "21px",
96
- "PRIMARY_S_FONT_WEIGHT_DESKTOP": "normal",
204
+ "BODY_S_LINE_HEIGHT_MOBILE": "22px",
97
205
  "PRIMARY_XL_LINE_HEIGHT_MOBILE": "32px",
98
- "COLOR_BRAND_ACCENT": "rgb(243, 112, 33)",
99
- "PRIMARY_L_FONT_SIZE_DESKTOP": "initial",
100
206
  "PRIMARY_M_LINE_HEIGHT_MOBILE": "27px",
101
- "PRIMARY_XL_FONT_SIZE_MOBILE": "28px",
207
+ "BODY_M_LINE_HEIGHT_MOBILE": "24px",
208
+ "ACCENT_XS_LINE_HEIGHT_MOBILE": "19px",
102
209
  "PRIMARY_L_LINE_HEIGHT_DESKTOP": "initial",
103
- "PRIMARY_M_FONT_SIZE_MOBILE": "24px",
104
- "BODY_M_FONT_SIZE_MOBILE": "16px",
105
- "PRIMARY_M_FONT_SIZE_DESKTOP": "initial",
106
210
  "PRIMARY_L_LINE_HEIGHT_MOBILE": "27px",
107
- "FONT_FAMILY_ACCENT_FANCY": "'Graphik XX Cond', sans-serif"
211
+ "FONT_FAMILY_ACCENT": "Helvetica, sans-serif",
212
+ "FONT_FAMILY_ACCENT_FANCY": "'Graphik XX Cond', sans-serif",
213
+ "FONT_FAMILY_BASIC_FANCY": "'IBM Plex Mono', monospace",
214
+ "BACKGROUND_COLOR_BRAND_ACCENT": "rgb(26, 40, 47)",
215
+ "FONT_FAMILY_BODY_FANCY": "'IBM Plex Serif', serif",
216
+ "COLOR_BRAND_ACCENT": "rgb(243, 112, 33)"
108
217
  }
package/build/variety.map.scss CHANGED
@@ -4,10 +4,10 @@ $variety-map: (
4
4
  'border-color-brand-secondary-light': (rgb(0, 0, 0)),
5
5
  'border-color-grey-light': (rgb(204, 204, 204)),
6
6
  'border-color-grey-dark': (rgb(106, 106, 106)),
7
- 'border-color-brand-secondary-dark': (rgb(0, 0, 0)),
7
+ 'border-color-brand-secondary-dark': (rgb(36, 56, 66)),
8
8
  'border-color-brand-secondary': (rgb(65, 126, 244)),
9
9
  'border-color-grey': (rgb(140, 140, 140)),
10
- 'border-color-brand-primary-light': (rgb(236, 28, 36)),
10
+ 'border-color-brand-primary-light': (rgb(243, 245, 203)),
11
11
  'border-color-white': (rgb(255, 255, 255)),
12
12
  'border-color-brand-primary-dark': (rgb(236, 28, 36)),
13
13
  'border-color-brand-primary': (rgb(238, 232, 9)),
@@ -70,52 +70,161 @@ $variety-map: (
70
70
  /* Used for margins and padding only. */
71
71
  'spacing-2': (2rem),
72
72
  'primary-xl-font-size-desktop': (initial),
73
- 'primary-m-line-height-desktop': (initial),
74
73
  'primary-l-font-size-mobile': (24px),
75
- 'primary-xl-line-height-desktop': (initial),
76
- 'primary-s-font-weight-mobile': (normal),
74
+ 'body-s-font-size-desktop': (initial),
77
75
  'primary-s-font-size-desktop': (initial),
78
- 'primary-s-line-height-desktop': (initial),
79
- 'secondary-s-line-height-mobile': (21px),
80
- 'primary-xl-font-weight-mobile': (normal),
76
+ 'primary-xxs-font-size-desktop': (24px),
77
+ 'accent-l-font-size-desktop': (58px),
78
+ 'accent-m-font-size-desktop': (initial),
79
+ 'primary-xxxs-font-size-desktop': (20px),
80
+ 'primary-xs-font-size-desktop': (26px),
81
81
  'secondary-s-font-size-mobile': (14px),
82
- 'primary-m-font-weight-mobile': (normal),
83
- 'primary-l-font-weight-mobile': (normal),
84
- 'secondary-m-line-height-mobile': (21px),
85
- 'font-family-basic-fancy': ('IBM Plex Mono', monospace),
82
+ 'accent-regular-xxs-font-size-desktop': (18px),
86
83
  'secondary-m-font-size-mobile': (18px),
84
+ 'accent-xxs-font-size-desktop': (18px),
85
+ 'accent-s-font-size-desktop': (initial),
86
+ 'secondary-regular-m-font-size-desktop': (initial),
87
87
  'secondary-l-font-size-mobile': (18px),
88
- 'background-color-brand-accent': (rgb(26, 40, 47)),
89
- 'secondary-regular-m-line-height-mobile': (21px),
90
- 'secondary-s-font-weight-mobile': (bold),
91
- 'accent-m-letter-spacing-mobile': (2.1px),
92
88
  'secondary-l-font-size-desktop': (initial),
93
89
  'secondary-regular-m-font-size-mobile': (16px),
90
+ 'accent-xxs-font-size-mobile': (14px),
94
91
  'secondary-m-font-size-desktop': (initial),
95
- 'secondary-l-line-height-desktop': (initial),
96
- 'secondary-m-line-height-desktop': (initial),
92
+ 'accent-s-font-size-mobile': (23px),
93
+ 'accent-regular-xxs-font-size-mobile': (14px),
94
+ 'primary-xs-font-size-mobile': (18px),
95
+ 'primary-xxxs-font-size-mobile': (19px),
96
+ 'accent-m-font-size-mobile': (42px),
97
+ 'secondary-s-font-size-desktop': (initial),
98
+ 'accent-l-font-size-mobile': (40px),
99
+ 'primary-xxs-font-size-mobile': (22px),
100
+ 'primary-s-font-size-mobile': (21px),
101
+ 'body-s-font-size-mobile': (16px),
102
+ 'primary-l-font-size-desktop': (initial),
103
+ 'primary-xl-font-size-mobile': (28px),
104
+ 'accent-xs-font-size-mobile': (18px),
105
+ 'primary-m-font-size-mobile': (24px),
106
+ 'body-m-font-size-desktop': (initial),
107
+ 'body-m-font-size-mobile': (16px),
108
+ 'primary-m-font-size-desktop': (initial),
109
+ 'accent-xs-font-size-desktop': (23px),
110
+ 'secondary-s-letter-spacing-mobile': (normal),
111
+ 'secondary-m-letter-spacing-desktop': (normal),
112
+ 'secondary-l-letter-spacing-desktop': (normal),
113
+ 'primary-l-letter-spacing-mobile': (normal),
114
+ 'secondary-regular-m-letter-spacing-desktop': (normal),
115
+ 'accent-xs-letter-spacing-mobile': (0.52px),
116
+ 'accent-s-letter-spacing-desktop': (normal),
117
+ 'accent-xxs-letter-spacing-desktop': (.52px),
118
+ 'body-m-letter-spacing-mobile': (normal),
119
+ 'primary-m-letter-spacing-mobile': (normal),
120
+ 'primary-xl-letter-spacing-mobile': (normal),
121
+ 'accent-regular-xxs-letter-spacing-desktop': (0.52px),
122
+ 'body-s-letter-spacing-mobile': (normal),
123
+ 'primary-s-letter-spacing-mobile': (normal),
124
+ 'primary-xs-letter-spacing-desktop': (normal),
125
+ 'primary-xxs-letter-spacing-mobile': (normal),
126
+ 'primary-xxxs-letter-spacing-desktop': (normal),
127
+ 'accent-m-letter-spacing-desktop': (normal),
128
+ 'accent-l-letter-spacing-desktop': (1.66px),
129
+ 'accent-l-letter-spacing-mobile': (1.14px),
130
+ 'accent-m-letter-spacing-mobile': (2.1px),
131
+ 'primary-xxxs-letter-spacing-mobile': (normal),
132
+ 'primary-xxs-letter-spacing-desktop': (normal),
133
+ 'primary-xs-letter-spacing-mobile': (normal),
134
+ 'primary-s-letter-spacing-desktop': (normal),
135
+ 'body-s-letter-spacing-desktop': (normal),
136
+ 'accent-regular-xxs-letter-spacing-mobile': (0.4px),
137
+ 'primary-xl-letter-spacing-desktop': (normal),
138
+ 'accent-xs-letter-spacing-desktop': (0.66px),
139
+ 'accent-xxs-letter-spacing-mobile': (.4px),
140
+ 'primary-m-letter-spacing-desktop': (normal),
141
+ 'body-m-letter-spacing-desktop': (normal),
142
+ 'accent-s-letter-spacing-mobile': (.66px),
143
+ 'secondary-regular-m-letter-spacing-mobile': (normal),
144
+ 'primary-l-letter-spacing-desktop': (normal),
145
+ 'secondary-l-letter-spacing-mobile': (normal),
146
+ 'secondary-m-letter-spacing-mobile': (normal),
147
+ 'secondary-s-letter-spacing-desktop': (normal),
148
+ 'primary-xs-font-weight-mobile': (700),
149
+ 'primary-xxxs-font-weight-mobile': (700),
150
+ 'accent-m-font-weight-mobile': (300),
151
+ 'accent-regular-xxs-font-weight-desktop': (initial),
152
+ 'accent-l-font-weight-mobile': (300),
153
+ 'primary-xxs-font-weight-mobile': (700),
154
+ 'primary-s-font-weight-mobile': (normal),
155
+ 'body-s-font-weight-mobile': (initial),
156
+ 'accent-xxs-font-weight-desktop': (initial),
157
+ 'accent-s-font-weight-desktop': (initial),
158
+ 'secondary-regular-m-font-weight-desktop': (initial),
159
+ 'primary-xl-font-weight-mobile': (normal),
160
+ 'secondary-l-font-weight-desktop': (initial),
161
+ 'body-m-font-weight-mobile': (initial),
162
+ 'accent-xs-font-weight-mobile': (300),
163
+ 'secondary-m-font-weight-desktop': (initial),
164
+ 'primary-m-font-weight-mobile': (normal),
165
+ 'primary-l-font-weight-mobile': (normal),
166
+ 'secondary-s-font-weight-desktop': (initial),
167
+ 'secondary-s-font-weight-mobile': (bold),
97
168
  'primary-l-font-weight-desktop': (normal),
98
- 'font-family-accent': (Helvetica, sans-serif),
169
+ 'body-m-font-weight-desktop': (initial),
99
170
  'primary-m-font-weight-desktop': (normal),
100
- 'accent-m-line-height-mobile': (42px),
171
+ 'accent-xs-font-weight-desktop': (initial),
172
+ 'secondary-m-font-weight-mobile': (600),
101
173
  'primary-xl-font-weight-desktop': (normal),
102
174
  'secondary-l-font-weight-mobile': (bold),
103
- 'font-family-body-fancy': ('IBM Plex Serif', serif),
104
- 'accent-m-font-size-mobile': (42px),
105
- 'secondary-s-font-size-desktop': (initial),
175
+ 'secondary-regular-m-font-weight-mobile': (initial),
176
+ 'accent-s-font-weight-mobile': (300),
177
+ 'accent-xxs-font-weight-mobile': (300),
178
+ 'body-s-font-weight-desktop': (initial),
179
+ 'primary-s-font-weight-desktop': (normal),
180
+ 'primary-xxs-font-weight-desktop': (700),
181
+ 'accent-regular-xxs-font-weight-mobile': (400),
182
+ 'accent-l-font-weight-desktop': (initial),
183
+ 'accent-m-font-weight-desktop': (initial),
184
+ 'primary-xxxs-font-weight-desktop': (700),
185
+ 'primary-xs-font-weight-desktop': (700),
186
+ 'accent-xs-line-height-desktop': (24px),
187
+ 'body-m-line-height-desktop': (initial),
188
+ 'primary-m-line-height-desktop': (initial),
189
+ 'primary-xl-line-height-desktop': (initial),
190
+ 'primary-s-line-height-desktop': (initial),
191
+ 'primary-xxs-line-height-desktop': (27px),
192
+ 'secondary-s-line-height-mobile': (21px),
193
+ 'body-s-line-height-desktop': (initial),
194
+ 'accent-l-line-height-desktop': (50px),
195
+ 'primary-xxxs-line-height-desktop': (23px),
196
+ 'primary-xs-line-height-desktop': (29px),
197
+ 'accent-m-line-height-desktop': (initial),
198
+ 'accent-regular-xxs-line-height-desktop': (26px),
199
+ 'secondary-m-line-height-mobile': (21px),
200
+ 'secondary-l-line-height-mobile': (21px),
201
+ 'accent-s-line-height-desktop': (initial),
202
+ 'accent-xxs-line-height-desktop': (18px),
203
+ 'secondary-regular-m-line-height-mobile': (21px),
204
+ 'secondary-regular-m-line-height-desktop': (initial),
205
+ 'accent-s-line-height-mobile': (23px),
206
+ 'accent-xxs-line-height-mobile': (0.4px),
207
+ 'secondary-l-line-height-desktop': (initial),
208
+ 'secondary-m-line-height-desktop': (initial),
209
+ 'accent-regular-xxs-line-height-mobile': (14px),
210
+ 'primary-xs-line-height-mobile': (21px),
211
+ 'primary-xxxs-line-height-mobile': (21px),
212
+ 'accent-m-line-height-mobile': (42px),
213
+ 'accent-l-line-height-mobile': (36px),
106
214
  'secondary-s-line-height-desktop': (initial),
215
+ 'primary-xxs-line-height-mobile': (23px),
107
216
  'primary-s-line-height-mobile': (24px),
108
- 'primary-s-font-size-mobile': (21px),
109
- 'primary-s-font-weight-desktop': (normal),
217
+ 'body-s-line-height-mobile': (22px),
110
218
  'primary-xl-line-height-mobile': (32px),
111
- 'color-brand-accent': (rgb(243, 112, 33)),
112
- 'primary-l-font-size-desktop': (initial),
113
219
  'primary-m-line-height-mobile': (27px),
114
- 'primary-xl-font-size-mobile': (28px),
220
+ 'body-m-line-height-mobile': (24px),
221
+ 'accent-xs-line-height-mobile': (19px),
115
222
  'primary-l-line-height-desktop': (initial),
116
- 'primary-m-font-size-mobile': (24px),
117
- 'body-m-font-size-mobile': (16px),
118
- 'primary-m-font-size-desktop': (initial),
119
223
  'primary-l-line-height-mobile': (27px),
224
+ 'font-family-accent': (Helvetica, sans-serif),
120
225
  'font-family-accent-fancy': ('Graphik XX Cond', sans-serif),
226
+ 'font-family-basic-fancy': ('IBM Plex Mono', monospace),
227
+ 'background-color-brand-accent': (rgb(26, 40, 47)),
228
+ 'font-family-body-fancy': ('IBM Plex Serif', serif),
229
+ 'color-brand-accent': (rgb(243, 112, 33)),
121
230
  );