@times-design-system/theme-scss 1.9.1-alpha.2 → 2.0.1

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 (33) hide show
  1. package/dist/palettes/_business-dark.scss +289 -286
  2. package/dist/palettes/_business-light.scss +289 -286
  3. package/dist/palettes/_channels-dark.scss +315 -315
  4. package/dist/palettes/_channels-light.scss +315 -315
  5. package/dist/palettes/_comment-dark.scss +289 -286
  6. package/dist/palettes/_comment-light.scss +289 -286
  7. package/dist/palettes/_core-dark.scss +289 -286
  8. package/dist/palettes/_core-light.scss +289 -286
  9. package/dist/palettes/_culture-dark.scss +289 -286
  10. package/dist/palettes/_culture-light.scss +289 -286
  11. package/dist/palettes/_home-dark.scss +289 -286
  12. package/dist/palettes/_home-light.scss +289 -286
  13. package/dist/palettes/_ireland-dark.scss +289 -286
  14. package/dist/palettes/_ireland-light.scss +289 -286
  15. package/dist/palettes/_lifeAndStyle-dark.scss +289 -286
  16. package/dist/palettes/_lifeAndStyle-light.scss +289 -286
  17. package/dist/palettes/_money-dark.scss +289 -286
  18. package/dist/palettes/_money-light.scss +289 -286
  19. package/dist/palettes/_obituaries-dark.scss +289 -286
  20. package/dist/palettes/_obituaries-light.scss +289 -286
  21. package/dist/palettes/_puzzles-dark.scss +289 -286
  22. package/dist/palettes/_puzzles-light.scss +289 -286
  23. package/dist/palettes/_sport-dark.scss +289 -286
  24. package/dist/palettes/_sport-light.scss +289 -286
  25. package/dist/palettes/_travel-dark.scss +289 -286
  26. package/dist/palettes/_travel-light.scss +289 -286
  27. package/dist/palettes/_uk-dark.scss +289 -286
  28. package/dist/palettes/_uk-light.scss +289 -286
  29. package/dist/palettes/_world-dark.scss +289 -286
  30. package/dist/palettes/_world-light.scss +289 -286
  31. package/dist/tds-layout.scss +38 -70
  32. package/dist/tds-typography.scss +298 -331
  33. package/package.json +2 -2
package/dist/tds-typography.scss CHANGED
@@ -1,73 +1,37 @@
1
- :root {
2
- --font-size0025: 0.8rem;
3
- --font-size005: 1rem;
4
- --font-size010: 1.2rem;
5
- --font-size020: 1.4rem;
6
- --font-size025: 1.5008rem;
7
- --font-size030: 1.6rem;
8
- --font-size035: 1.7008rem;
9
- --font-size040: 1.8rem;
10
- --font-size045: 1.9008rem;
11
- --font-size050: 2rem;
12
- --font-size060: 2.2rem;
13
- --font-size070: 2.4rem;
14
- --font-size080: 2.8rem;
15
- --font-size090: 3.2rem;
16
- --font-size095: 3.4rem;
17
- --font-size100: 3.6rem;
18
- --font-size105: 4.6rem;
19
- --font-size110: 4rem;
20
- --font-size120: 4.4rem;
21
- --font-size125: 4.5008rem;
22
- --font-size130: 4.8rem;
23
- --font-size140: 5.6rem;
24
- --font-size150: 6.4rem;
25
- --font-size155: 7rem;
26
- --font-size160: 8rem;
27
- --font-size170: 9.4rem;
28
- --font-size180: 12rem;
29
- --font-size190: 14.5008rem;
30
- --font-size200: 17.1008rem;
31
- --font-size210: 19.7008rem;
32
- --font-size220: 22.3008rem;
33
- --font-size230: 24.8rem;
34
- --font-size240: 27.4rem;
35
- --font-size250: 30rem;
36
- }
37
- $fontSize0025: var(--font-size0025);
38
- $fontSize005: var(--font-size005);
39
- $fontSize010: var(--font-size010);
40
- $fontSize020: var(--font-size020);
41
- $fontSize025: var(--font-size025);
42
- $fontSize030: var(--font-size030);
43
- $fontSize035: var(--font-size035);
44
- $fontSize040: var(--font-size040);
45
- $fontSize045: var(--font-size045);
46
- $fontSize050: var(--font-size050);
47
- $fontSize060: var(--font-size060);
48
- $fontSize070: var(--font-size070);
49
- $fontSize080: var(--font-size080);
50
- $fontSize090: var(--font-size090);
51
- $fontSize095: var(--font-size095);
52
- $fontSize100: var(--font-size100);
53
- $fontSize105: var(--font-size105);
54
- $fontSize110: var(--font-size110);
55
- $fontSize120: var(--font-size120);
56
- $fontSize125: var(--font-size125);
57
- $fontSize130: var(--font-size130);
58
- $fontSize140: var(--font-size140);
59
- $fontSize150: var(--font-size150);
60
- $fontSize155: var(--font-size155);
61
- $fontSize160: var(--font-size160);
62
- $fontSize170: var(--font-size170);
63
- $fontSize180: var(--font-size180);
64
- $fontSize190: var(--font-size190);
65
- $fontSize200: var(--font-size200);
66
- $fontSize210: var(--font-size210);
67
- $fontSize220: var(--font-size220);
68
- $fontSize230: var(--font-size230);
69
- $fontSize240: var(--font-size240);
70
- $fontSize250: var(--font-size250);
1
+ $fontSize0025: 0.8rem;
2
+ $fontSize005: 1rem;
3
+ $fontSize010: 1.2rem;
4
+ $fontSize020: 1.4rem;
5
+ $fontSize025: 1.5008rem;
6
+ $fontSize030: 1.6rem;
7
+ $fontSize035: 1.7008rem;
8
+ $fontSize040: 1.8rem;
9
+ $fontSize045: 1.9008rem;
10
+ $fontSize050: 2rem;
11
+ $fontSize060: 2.2rem;
12
+ $fontSize070: 2.4rem;
13
+ $fontSize080: 2.8rem;
14
+ $fontSize090: 3.2rem;
15
+ $fontSize095: 3.4rem;
16
+ $fontSize100: 3.6rem;
17
+ $fontSize105: 4.6rem;
18
+ $fontSize110: 4rem;
19
+ $fontSize120: 4.4rem;
20
+ $fontSize125: 4.5008rem;
21
+ $fontSize130: 4.8rem;
22
+ $fontSize140: 5.6rem;
23
+ $fontSize150: 6.4rem;
24
+ $fontSize155: 7rem;
25
+ $fontSize160: 8rem;
26
+ $fontSize170: 9.4rem;
27
+ $fontSize180: 12rem;
28
+ $fontSize190: 14.5008rem;
29
+ $fontSize200: 17.1008rem;
30
+ $fontSize210: 19.7008rem;
31
+ $fontSize220: 22.3008rem;
32
+ $fontSize230: 24.8rem;
33
+ $fontSize240: 27.4rem;
34
+ $fontSize250: 30rem;
71
35
  $fontWeight010: 100;
72
36
  $fontWeight020: 200;
73
37
  $fontWeight030: 300;
@@ -87,525 +51,528 @@ $fontLineHeight030: 1.25;
87
51
  $fontLineHeight040: 1.5;
88
52
  $fontLineHeight050: 1.75;
89
53
  $fontLineHeight060: 2;
90
-
91
54
 
92
- .brand-heading-fluid-light-2xsmall {
93
- font: var($fontWeight030) var($fontSize045)/var($fontLineHeight020) var($fontFamily010);
55
+ @mixin brand-heading-fluid-light-2xsmall {
56
+ font: $fontWeight030 #{$fontSize045}/#{$fontLineHeight020} $fontFamily010;
57
+ }
58
+
59
+ @mixin brand-heading-fluid-light-xsmall {
60
+ font: $fontWeight030 #{$fontSize050}/#{$fontLineHeight020} $fontFamily010;
94
61
  }
95
62
 
96
- .brand-heading-fluid-light-xsmall {
97
- font: var($fontWeight030) var($fontSize050)/var($fontLineHeight020) var($fontFamily010);
63
+ @mixin brand-heading-fluid-light-small {
64
+ font: $fontWeight030 #{$fontSize070}/#{$fontLineHeight020} $fontFamily010;
98
65
  }
99
66
 
100
- .brand-heading-fluid-light-small {
101
- font: var($fontWeight030) var($fontSize070)/var($fontLineHeight020) var($fontFamily010);
67
+ @mixin brand-heading-fluid-light-medium {
68
+ font: $fontWeight030 #{$fontSize080}/#{$fontLineHeight020} $fontFamily010;
102
69
  }
103
70
 
104
- .brand-heading-fluid-light-medium {
105
- font: var($fontWeight030) var($fontSize080)/var($fontLineHeight020) var($fontFamily010);
71
+ @mixin brand-heading-fluid-light-large {
72
+ font: $fontWeight030 #{$fontSize090}/#{$fontLineHeight020} $fontFamily010;
106
73
  }
107
74
 
108
- .brand-heading-fluid-light-large {
109
- font: var($fontWeight030) var($fontSize090)/var($fontLineHeight020) var($fontFamily010);
75
+ @mixin brand-heading-fluid-light-xlarge {
76
+ font: $fontWeight030 #{$fontSize095}/#{$fontLineHeight020} $fontFamily010;
110
77
  }
111
78
 
112
- .brand-heading-fluid-light-xlarge {
113
- font: var($fontWeight030) var($fontSize095)/var($fontLineHeight020) var($fontFamily010);
79
+ @mixin brand-heading-fluid-light-2xlarge {
80
+ font: $fontWeight030 #{$fontSize100}/#{$fontLineHeight020} $fontFamily010;
114
81
  }
115
82
 
116
- .brand-heading-fluid-light-2xlarge {
117
- font: var($fontWeight030) var($fontSize100)/var($fontLineHeight020) var($fontFamily010);
83
+ @mixin brand-heading-fluid-regular-2xsmall {
84
+ font: $fontWeight040 #{$fontSize045}/#{$fontLineHeight020} $fontFamily010;
118
85
  }
119
86
 
120
- .brand-heading-fluid-regular-2xsmall {
121
- font: var($fontWeight040) var($fontSize045)/var($fontLineHeight020) var($fontFamily010);
87
+ @mixin brand-heading-fluid-regular-xsmall {
88
+ font: $fontWeight040 #{$fontSize050}/#{$fontLineHeight020} $fontFamily010;
122
89
  }
123
90
 
124
- .brand-heading-fluid-regular-xsmall {
125
- font: var($fontWeight040) var($fontSize050)/var($fontLineHeight020) var($fontFamily010);
91
+ @mixin brand-heading-fluid-regular-small {
92
+ font: $fontWeight040 #{$fontSize070}/#{$fontLineHeight020} $fontFamily010;
126
93
  }
127
94
 
128
- .brand-heading-fluid-regular-small {
129
- font: var($fontWeight040) var($fontSize070)/var($fontLineHeight020) var($fontFamily010);
95
+ @mixin brand-heading-fluid-regular-medium {
96
+ font: $fontWeight040 #{$fontSize080}/#{$fontLineHeight020} $fontFamily010;
130
97
  }
131
98
 
132
- .brand-heading-fluid-regular-medium {
133
- font: var($fontWeight040) var($fontSize080)/var($fontLineHeight020) var($fontFamily010);
99
+ @mixin brand-heading-fluid-regular-large {
100
+ font: $fontWeight040 #{$fontSize090}/#{$fontLineHeight020} $fontFamily010;
134
101
  }
135
102
 
136
- .brand-heading-fluid-regular-large {
137
- font: var($fontWeight040) var($fontSize090)/var($fontLineHeight020) var($fontFamily010);
103
+ @mixin brand-heading-fluid-regular-xlarge {
104
+ font: $fontWeight040 #{$fontSize095}/#{$fontLineHeight020} $fontFamily010;
138
105
  }
139
106
 
140
- .brand-heading-fluid-regular-xlarge {
141
- font: var($fontWeight040) var($fontSize095)/var($fontLineHeight020) var($fontFamily010);
107
+ @mixin brand-heading-fluid-regular-2xlarge {
108
+ font: $fontWeight040 #{$fontSize100}/#{$fontLineHeight020} $fontFamily010;
142
109
  }
143
110
 
144
- .brand-heading-fluid-regular-2xlarge {
145
- font: var($fontWeight040) var($fontSize100)/var($fontLineHeight020) var($fontFamily010);
111
+ @mixin brand-heading-fluid-bold-2xsmall {
112
+ font: $fontWeight070 #{$fontSize045}/#{$fontLineHeight020} $fontFamily010;
146
113
  }
147
114
 
148
- .brand-heading-fluid-bold-2xsmall {
149
- font: var($fontWeight070) var($fontSize045)/var($fontLineHeight020) var($fontFamily010);
115
+ @mixin brand-heading-fluid-bold-xsmall {
116
+ font: $fontWeight070 #{$fontSize050}/#{$fontLineHeight020} $fontFamily010;
150
117
  }
151
118
 
152
- .brand-heading-fluid-bold-xsmall {
153
- font: var($fontWeight070) var($fontSize050)/var($fontLineHeight020) var($fontFamily010);
119
+ @mixin brand-heading-fluid-bold-small {
120
+ font: $fontWeight070 #{$fontSize070}/#{$fontLineHeight020} $fontFamily010;
154
121
  }
155
122
 
156
- .brand-heading-fluid-bold-small {
157
- font: var($fontWeight070) var($fontSize070)/var($fontLineHeight020) var($fontFamily010);
123
+ @mixin brand-heading-fluid-bold-medium {
124
+ font: $fontWeight070 #{$fontSize080}/#{$fontLineHeight020} $fontFamily010;
158
125
  }
159
126
 
160
- .brand-heading-fluid-bold-medium {
161
- font: var($fontWeight070) var($fontSize080)/var($fontLineHeight020) var($fontFamily010);
127
+ @mixin brand-heading-fluid-bold-large {
128
+ font: $fontWeight070 #{$fontSize090}/#{$fontLineHeight020} $fontFamily010;
162
129
  }
163
130
 
164
- .brand-heading-fluid-bold-large {
165
- font: var($fontWeight070) var($fontSize090)/var($fontLineHeight020) var($fontFamily010);
131
+ @mixin brand-heading-fluid-bold-xlarge {
132
+ font: $fontWeight070 #{$fontSize095}/#{$fontLineHeight020} $fontFamily010;
166
133
  }
167
134
 
168
- .brand-heading-fluid-bold-xlarge {
169
- font: var($fontWeight070) var($fontSize095)/var($fontLineHeight020) var($fontFamily010);
135
+ @mixin brand-heading-fluid-bold-2xlarge {
136
+ font: $fontWeight070 #{$fontSize100}/#{$fontLineHeight020} $fontFamily010;
170
137
  }
171
138
 
172
- .brand-heading-fluid-bold-2xlarge {
173
- font: var($fontWeight070) var($fontSize100)/var($fontLineHeight020) var($fontFamily010);
139
+ @mixin brand-heading-fluid-black-2xsmall {
140
+ font: $fontWeight080 #{$fontSize045}/#{$fontLineHeight020} $fontFamily010;
174
141
  }
175
142
 
176
- .brand-heading-fluid-black-2xsmall {
177
- font: var($fontWeight080) var($fontSize045)/var($fontLineHeight020) var($fontFamily010);
143
+ @mixin brand-heading-fluid-black-xsmall {
144
+ font: $fontWeight080 #{$fontSize050}/#{$fontLineHeight020} $fontFamily010;
178
145
  }
179
146
 
180
- .brand-heading-fluid-black-xsmall {
181
- font: var($fontWeight080) var($fontSize050)/var($fontLineHeight020) var($fontFamily010);
147
+ @mixin brand-heading-fluid-black-small {
148
+ font: $fontWeight080 #{$fontSize070}/#{$fontLineHeight020} $fontFamily010;
182
149
  }
183
150
 
184
- .brand-heading-fluid-black-small {
185
- font: var($fontWeight080) var($fontSize070)/var($fontLineHeight020) var($fontFamily010);
151
+ @mixin brand-heading-fluid-black-medium {
152
+ font: $fontWeight080 #{$fontSize080}/#{$fontLineHeight020} $fontFamily010;
186
153
  }
187
154
 
188
- .brand-heading-fluid-black-medium {
189
- font: var($fontWeight080) var($fontSize080)/var($fontLineHeight020) var($fontFamily010);
155
+ @mixin brand-heading-fluid-black-large {
156
+ font: $fontWeight080 #{$fontSize090}/#{$fontLineHeight020} $fontFamily010;
190
157
  }
191
158
 
192
- .brand-heading-fluid-black-large {
193
- font: var($fontWeight080) var($fontSize090)/var($fontLineHeight020) var($fontFamily010);
159
+ @mixin brand-heading-fluid-black-xlarge {
160
+ font: $fontWeight080 #{$fontSize095}/#{$fontLineHeight020} $fontFamily010;
194
161
  }
195
162
 
196
- .brand-heading-fluid-black-xlarge {
197
- font: var($fontWeight080) var($fontSize095)/var($fontLineHeight020) var($fontFamily010);
163
+ @mixin brand-heading-fluid-black-2xlarge {
164
+ font: $fontWeight080 #{$fontSize100}/#{$fontLineHeight020} $fontFamily010;
198
165
  }
199
166
 
200
- .brand-heading-fluid-black-2xlarge {
201
- font: var($fontWeight080) var($fontSize100)/var($fontLineHeight020) var($fontFamily010);
167
+ @mixin brand-heading-static-light-100 {
168
+ font: $fontWeight030 56px / #{$fontLineHeight020} $fontFamily010;
202
169
  }
203
170
 
204
- .brand-heading-static-light-100 {
205
- font: var($fontWeight030) 56px / var($fontLineHeight020) var($fontFamily010);
171
+ @mixin brand-heading-static-light-010 {
172
+ font: $fontWeight030 19px / #{$fontLineHeight020} $fontFamily010;
206
173
  }
207
174
 
208
- .brand-heading-static-light-010 {
209
- font: var($fontWeight030) 19px / var($fontLineHeight020) var($fontFamily010);
175
+ @mixin brand-heading-static-light-020 {
176
+ font: $fontWeight030 20px / #{$fontLineHeight020} $fontFamily010;
210
177
  }
211
178
 
212
- .brand-heading-static-light-020 {
213
- font: var($fontWeight030) 20px / var($fontLineHeight020) var($fontFamily010);
179
+ @mixin brand-heading-static-light-030 {
180
+ font: $fontWeight030 24px / #{$fontLineHeight020} $fontFamily010;
214
181
  }
215
182
 
216
- .brand-heading-static-light-030 {
217
- font: var($fontWeight030) 24px / var($fontLineHeight020) var($fontFamily010);
183
+ @mixin brand-heading-static-light-040 {
184
+ font: $fontWeight030 28px / #{$fontLineHeight020} $fontFamily010;
218
185
  }
219
186
 
220
- .brand-heading-static-light-040 {
221
- font: var($fontWeight030) 28px / var($fontLineHeight020) var($fontFamily010);
187
+ @mixin brand-heading-static-light-050 {
188
+ font: $fontWeight030 32px / #{$fontLineHeight020} $fontFamily010;
222
189
  }
223
190
 
224
- .brand-heading-static-light-050 {
225
- font: var($fontWeight030) 32px / var($fontLineHeight020) var($fontFamily010);
191
+ @mixin brand-heading-static-light-060 {
192
+ font: $fontWeight030 36px / #{$fontLineHeight020} $fontFamily010;
226
193
  }
227
194
 
228
- .brand-heading-static-light-060 {
229
- font: var($fontWeight030) 36px / var($fontLineHeight020) var($fontFamily010);
195
+ @mixin brand-heading-static-light-070 {
196
+ font: $fontWeight030 40px / #{$fontLineHeight020} $fontFamily010;
230
197
  }
231
198
 
232
- .brand-heading-static-light-070 {
233
- font: var($fontWeight030) 40px / var($fontLineHeight020) var($fontFamily010);
199
+ @mixin brand-heading-static-light-080 {
200
+ font: $fontWeight030 46px / #{$fontLineHeight020} $fontFamily010;
234
201
  }
235
202
 
236
- .brand-heading-static-light-080 {
237
- font: var($fontWeight030) 46px / var($fontLineHeight020) var($fontFamily010);
203
+ @mixin brand-heading-static-light-090 {
204
+ font: $fontWeight030 48px / #{$fontLineHeight020} $fontFamily010;
238
205
  }
239
206
 
240
- .brand-heading-static-light-090 {
241
- font: var($fontWeight030) 48px / var($fontLineHeight020) var($fontFamily010);
207
+ @mixin brand-heading-static-regular-100 {
208
+ font: $fontWeight040 56px / #{$fontLineHeight020} $fontFamily010;
242
209
  }
243
210
 
244
- .brand-heading-static-regular-100 {
245
- font: var($fontWeight040) 56px / var($fontLineHeight020) var($fontFamily010);
211
+ @mixin brand-heading-static-regular-010 {
212
+ font: $fontWeight040 19px / #{$fontLineHeight020} $fontFamily010;
246
213
  }
247
214
 
248
- .brand-heading-static-regular-010 {
249
- font: var($fontWeight040) 19px / var($fontLineHeight020) var($fontFamily010);
215
+ @mixin brand-heading-static-regular-020 {
216
+ font: $fontWeight040 20px / #{$fontLineHeight020} $fontFamily010;
250
217
  }
251
218
 
252
- .brand-heading-static-regular-020 {
253
- font: var($fontWeight040) 20px / var($fontLineHeight020) var($fontFamily010);
219
+ @mixin brand-heading-static-regular-030 {
220
+ font: $fontWeight040 24px / #{$fontLineHeight020} $fontFamily010;
254
221
  }
255
222
 
256
- .brand-heading-static-regular-030 {
257
- font: var($fontWeight040) 24px / var($fontLineHeight020) var($fontFamily010);
223
+ @mixin brand-heading-static-regular-040 {
224
+ font: $fontWeight040 28px / #{$fontLineHeight020} $fontFamily010;
258
225
  }
259
226
 
260
- .brand-heading-static-regular-040 {
261
- font: var($fontWeight040) 28px / var($fontLineHeight020) var($fontFamily010);
227
+ @mixin brand-heading-static-regular-050 {
228
+ font: $fontWeight040 32px / #{$fontLineHeight020} $fontFamily010;
262
229
  }
263
230
 
264
- .brand-heading-static-regular-050 {
265
- font: var($fontWeight040) 32px / var($fontLineHeight020) var($fontFamily010);
231
+ @mixin brand-heading-static-regular-060 {
232
+ font: $fontWeight040 36px / #{$fontLineHeight020} $fontFamily010;
266
233
  }
267
234
 
268
- .brand-heading-static-regular-060 {
269
- font: var($fontWeight040) 36px / var($fontLineHeight020) var($fontFamily010);
235
+ @mixin brand-heading-static-regular-070 {
236
+ font: $fontWeight040 40px / #{$fontLineHeight020} $fontFamily010;
270
237
  }
271
238
 
272
- .brand-heading-static-regular-070 {
273
- font: var($fontWeight040) 40px / var($fontLineHeight020) var($fontFamily010);
239
+ @mixin brand-heading-static-regular-080 {
240
+ font: $fontWeight040 46px / #{$fontLineHeight020} $fontFamily010;
274
241
  }
275
242
 
276
- .brand-heading-static-regular-080 {
277
- font: var($fontWeight040) 46px / var($fontLineHeight020) var($fontFamily010);
243
+ @mixin brand-heading-static-regular-090 {
244
+ font: $fontWeight040 48px / #{$fontLineHeight020} $fontFamily010;
278
245
  }
279
246
 
280
- .brand-heading-static-regular-090 {
281
- font: var($fontWeight040) 48px / var($fontLineHeight020) var($fontFamily010);
247
+ @mixin brand-heading-static-bold-100 {
248
+ font: $fontWeight070 56px / #{$fontLineHeight020} $fontFamily010;
282
249
  }
283
250
 
284
- .brand-heading-static-bold-100 {
285
- font: var($fontWeight070) 56px / var($fontLineHeight020) var($fontFamily010);
251
+ @mixin brand-heading-static-bold-010 {
252
+ font: $fontWeight070 19px / #{$fontLineHeight020} $fontFamily010;
286
253
  }
287
254
 
288
- .brand-heading-static-bold-010 {
289
- font: var($fontWeight070) 19px / var($fontLineHeight020) var($fontFamily010);
255
+ @mixin brand-heading-static-bold-020 {
256
+ font: $fontWeight070 20px / #{$fontLineHeight020} $fontFamily010;
290
257
  }
291
258
 
292
- .brand-heading-static-bold-020 {
293
- font: var($fontWeight070) 20px / var($fontLineHeight020) var($fontFamily010);
259
+ @mixin brand-heading-static-bold-030 {
260
+ font: $fontWeight070 24px / #{$fontLineHeight020} $fontFamily010;
294
261
  }
295
262
 
296
- .brand-heading-static-bold-030 {
297
- font: var($fontWeight070) 24px / var($fontLineHeight020) var($fontFamily010);
263
+ @mixin brand-heading-static-bold-040 {
264
+ font: $fontWeight070 28px / #{$fontLineHeight020} $fontFamily010;
298
265
  }
299
266
 
300
- .brand-heading-static-bold-040 {
301
- font: var($fontWeight070) 28px / var($fontLineHeight020) var($fontFamily010);
267
+ @mixin brand-heading-static-bold-050 {
268
+ font: $fontWeight070 32px / #{$fontLineHeight020} $fontFamily010;
302
269
  }
303
270
 
304
- .brand-heading-static-bold-050 {
305
- font: var($fontWeight070) 32px / var($fontLineHeight020) var($fontFamily010);
271
+ @mixin brand-heading-static-bold-060 {
272
+ font: $fontWeight070 36px / #{$fontLineHeight020} $fontFamily010;
306
273
  }
307
274
 
308
- .brand-heading-static-bold-060 {
309
- font: var($fontWeight070) 36px / var($fontLineHeight020) var($fontFamily010);
275
+ @mixin brand-heading-static-bold-070 {
276
+ font: $fontWeight070 40px / #{$fontLineHeight020} $fontFamily010;
310
277
  }
311
278
 
312
- .brand-heading-static-bold-070 {
313
- font: var($fontWeight070) 40px / var($fontLineHeight020) var($fontFamily010);
279
+ @mixin brand-heading-static-bold-080 {
280
+ font: $fontWeight070 46px / #{$fontLineHeight020} $fontFamily010;
314
281
  }
315
282
 
316
- .brand-heading-static-bold-080 {
317
- font: var($fontWeight070) 46px / var($fontLineHeight020) var($fontFamily010);
283
+ @mixin brand-heading-static-bold-090 {
284
+ font: $fontWeight070 48px / #{$fontLineHeight020} $fontFamily010;
318
285
  }
319
286
 
320
- .brand-heading-static-bold-090 {
321
- font: var($fontWeight070) 48px / var($fontLineHeight020) var($fontFamily010);
287
+ @mixin brand-heading-static-black-100 {
288
+ font: $fontWeight080 56px / #{$fontLineHeight020} $fontFamily010;
322
289
  }
323
290
 
324
- .brand-heading-static-black-100 {
325
- font: var($fontWeight080) 56px / var($fontLineHeight020) var($fontFamily010);
291
+ @mixin brand-heading-static-black-010 {
292
+ font: $fontWeight080 19px / #{$fontLineHeight020} $fontFamily010;
326
293
  }
327
294
 
328
- .brand-heading-static-black-010 {
329
- font: var($fontWeight080) 19px / var($fontLineHeight020) var($fontFamily010);
295
+ @mixin brand-heading-static-black-020 {
296
+ font: $fontWeight080 20px / #{$fontLineHeight020} $fontFamily010;
330
297
  }
331
298
 
332
- .brand-heading-static-black-020 {
333
- font: var($fontWeight080) 20px / var($fontLineHeight020) var($fontFamily010);
299
+ @mixin brand-heading-static-black-030 {
300
+ font: $fontWeight080 24px / #{$fontLineHeight020} $fontFamily010;
334
301
  }
335
302
 
336
- .brand-heading-static-black-030 {
337
- font: var($fontWeight080) 24px / var($fontLineHeight020) var($fontFamily010);
303
+ @mixin brand-heading-static-black-040 {
304
+ font: $fontWeight080 28px / #{$fontLineHeight020} $fontFamily010;
338
305
  }
339
306
 
340
- .brand-heading-static-black-040 {
341
- font: var($fontWeight080) 28px / var($fontLineHeight020) var($fontFamily010);
307
+ @mixin brand-heading-static-black-050 {
308
+ font: $fontWeight080 32px / #{$fontLineHeight020} $fontFamily010;
342
309
  }
343
310
 
344
- .brand-heading-static-black-050 {
345
- font: var($fontWeight080) 32px / var($fontLineHeight020) var($fontFamily010);
311
+ @mixin brand-heading-static-black-060 {
312
+ font: $fontWeight080 36px / #{$fontLineHeight020} $fontFamily010;
346
313
  }
347
314
 
348
- .brand-heading-static-black-060 {
349
- font: var($fontWeight080) 36px / var($fontLineHeight020) var($fontFamily010);
315
+ @mixin brand-heading-static-black-070 {
316
+ font: $fontWeight080 40px / #{$fontLineHeight020} $fontFamily010;
350
317
  }
351
318
 
352
- .brand-heading-static-black-070 {
353
- font: var($fontWeight080) 40px / var($fontLineHeight020) var($fontFamily010);
319
+ @mixin brand-heading-static-black-080 {
320
+ font: $fontWeight080 46px / #{$fontLineHeight020} $fontFamily010;
354
321
  }
355
322
 
356
- .brand-heading-static-black-080 {
357
- font: var($fontWeight080) 46px / var($fontLineHeight020) var($fontFamily010);
323
+ @mixin brand-heading-static-black-090 {
324
+ font: $fontWeight080 48px / #{$fontLineHeight020} $fontFamily010;
358
325
  }
359
326
 
360
- .brand-heading-static-black-090 {
361
- font: var($fontWeight080) 48px / var($fontLineHeight020) var($fontFamily010);
327
+ @mixin brand-subheading-light-small {
328
+ font: $fontWeight030 #{$fontSize020}/#{$fontLineHeight020} $fontFamily010;
362
329
  }
363
330
 
364
- .brand-subheading-light-small {
365
- font: var($fontWeight030) var($fontSize020)/var($fontLineHeight020) var($fontFamily010);
331
+ @mixin brand-subheading-light-medium {
332
+ font: $fontWeight030 #{$fontSize040}/#{$fontLineHeight020} $fontFamily010;
366
333
  }
367
334
 
368
- .brand-subheading-light-medium {
369
- font: var($fontWeight030) var($fontSize040)/var($fontLineHeight020) var($fontFamily010);
335
+ @mixin brand-subheading-light-large {
336
+ font: $fontWeight030 #{$fontSize050}/#{$fontLineHeight020} $fontFamily010;
370
337
  }
371
338
 
372
- .brand-subheading-light-large {
373
- font: var($fontWeight030) var($fontSize050)/var($fontLineHeight020) var($fontFamily010);
339
+ @mixin brand-subheading-light-xlarge {
340
+ font: $fontWeight030 #{$fontSize070}/#{$fontLineHeight020} $fontFamily010;
374
341
  }
375
342
 
376
- .brand-subheading-light-xlarge {
377
- font: var($fontWeight030) var($fontSize070)/var($fontLineHeight020) var($fontFamily010);
343
+ @mixin brand-subheading-regular-small {
344
+ font: $fontWeight040 #{$fontSize020}/#{$fontLineHeight020} $fontFamily010;
378
345
  }
379
346
 
380
- .brand-subheading-regular-small {
381
- font: var($fontWeight040) var($fontSize020)/var($fontLineHeight020) var($fontFamily010);
347
+ @mixin brand-subheading-regular-medium {
348
+ font: $fontWeight040 #{$fontSize040}/#{$fontLineHeight020} $fontFamily010;
382
349
  }
383
350
 
384
- .brand-subheading-regular-medium {
385
- font: var($fontWeight040) var($fontSize040)/var($fontLineHeight020) var($fontFamily010);
351
+ @mixin brand-subheading-regular-large {
352
+ font: $fontWeight040 #{$fontSize050}/#{$fontLineHeight020} $fontFamily010;
386
353
  }
387
354
 
388
- .brand-subheading-regular-large {
389
- font: var($fontWeight040) var($fontSize050)/var($fontLineHeight020) var($fontFamily010);
355
+ @mixin brand-subheading-regular-xlarge {
356
+ font: $fontWeight040 #{$fontSize070}/#{$fontLineHeight020} $fontFamily010;
390
357
  }
391
358
 
392
- .brand-subheading-regular-xlarge {
393
- font: var($fontWeight040) var($fontSize070)/var($fontLineHeight020) var($fontFamily010);
359
+ @mixin brand-subheading-bold-small {
360
+ font: $fontWeight070 #{$fontSize020}/#{$fontLineHeight020} $fontFamily010;
394
361
  }
395
362
 
396
- .brand-subheading-bold-small {
397
- font: var($fontWeight070) var($fontSize020)/var($fontLineHeight020) var($fontFamily010);
363
+ @mixin brand-subheading-bold-medium {
364
+ font: $fontWeight070 #{$fontSize040}/#{$fontLineHeight020} $fontFamily010;
398
365
  }
399
366
 
400
- .brand-subheading-bold-medium {
401
- font: var($fontWeight070) var($fontSize040)/var($fontLineHeight020) var($fontFamily010);
367
+ @mixin brand-subheading-bold-large {
368
+ font: $fontWeight070 #{$fontSize050}/#{$fontLineHeight020} $fontFamily010;
402
369
  }
403
370
 
404
- .brand-subheading-bold-large {
405
- font: var($fontWeight070) var($fontSize050)/var($fontLineHeight020) var($fontFamily010);
371
+ @mixin brand-subheading-bold-xlarge {
372
+ font: $fontWeight070 #{$fontSize070}/#{$fontLineHeight020} $fontFamily010;
406
373
  }
407
374
 
408
- .brand-subheading-bold-xlarge {
409
- font: var($fontWeight070) var($fontSize070)/var($fontLineHeight020) var($fontFamily010);
375
+ @mixin brand-standfirst-large {
376
+ font: $fontWeight040 #{$fontSize050}/#{$fontLineHeight020} $fontFamily010;
410
377
  }
411
378
 
412
- .brand-standfirst-large {
413
- font: var($fontWeight040) var($fontSize050)/var($fontLineHeight020) var($fontFamily010);
379
+ @mixin brand-standfirst-medium {
380
+ font: $fontWeight040 #{$fontSize020}/#{$fontLineHeight020} $fontFamily010;
414
381
  }
415
382
 
416
- .brand-standfirst-medium {
417
- font: var($fontWeight040) var($fontSize020)/var($fontLineHeight020) var($fontFamily010);
383
+ @mixin brand-paragraph-regular-small {
384
+ font: #{$fontSize030}/#{$fontLineHeight040} $fontFamily020;
418
385
  }
419
386
 
420
- .brand-paragraph-regular-small {
421
- font: var($fontSize030)/var($fontLineHeight040) var($fontFamily020);
387
+ @mixin brand-paragraph-regular-medium {
388
+ font: #{$fontSize035}/#{$fontLineHeight040} $fontFamily020;
422
389
  }
423
390
 
424
- .brand-paragraph-regular-medium {
425
- font: var($fontSize035)/var($fontLineHeight040) var($fontFamily020);
391
+ @mixin brand-paragraph-bold-small {
392
+ font: #{$fontSize030}/#{$fontLineHeight040} $fontFamily030;
426
393
  }
427
394
 
428
- .brand-paragraph-bold-small {
429
- font: var($fontSize030)/var($fontLineHeight040) var($fontFamily030);
395
+ @mixin brand-paragraph-bold-medium {
396
+ font: #{$fontSize035}/#{$fontLineHeight040} $fontFamily030;
430
397
  }
431
398
 
432
- .brand-paragraph-bold-medium {
433
- font: var($fontSize035)/var($fontLineHeight040) var($fontFamily030);
399
+ @mixin brand-caption-medium {
400
+ font: $fontWeight040 #{$fontSize020}/#{$fontLineHeight040} $fontFamily040;
434
401
  }
435
402
 
436
- .brand-caption {
437
- font: var($fontWeight040) var($fontSize020)/var($fontLineHeight040) var($fontFamily040);
403
+ @mixin brand-caption-small {
404
+ font: $fontWeight040 #{$fontSize010}/#{$fontLineHeight040} $fontFamily040;
438
405
  }
439
406
 
440
- .brand-byline-medium {
441
- font: var($fontWeight040) var($fontSize020)/var($fontLineHeight020) var($fontFamily040);
407
+ @mixin brand-byline-medium {
408
+ font: $fontWeight040 #{$fontSize020}/#{$fontLineHeight020} $fontFamily040;
442
409
  }
443
410
 
444
- .brand-byline-small {
445
- font: var($fontWeight040) var($fontSize010)/var($fontLineHeight020) var($fontFamily040);
411
+ @mixin brand-byline-small {
412
+ font: $fontWeight040 #{$fontSize010}/#{$fontLineHeight020} $fontFamily040;
446
413
  }
447
414
 
448
- .utility-heading-small {
449
- font: var($fontWeight070) var($fontSize040)/var($fontLineHeight030) var($fontFamily040);
415
+ @mixin utility-heading-small {
416
+ font: $fontWeight070 #{$fontSize040}/#{$fontLineHeight030} $fontFamily040;
450
417
  }
451
418
 
452
- .utility-heading-medium {
453
- font: var($fontWeight070) var($fontSize070)/var($fontLineHeight030) var($fontFamily040);
419
+ @mixin utility-heading-medium {
420
+ font: $fontWeight070 #{$fontSize070}/#{$fontLineHeight030} $fontFamily040;
454
421
  }
455
422
 
456
- .utility-heading-large {
457
- font: var($fontWeight070) var($fontSize080)/var($fontLineHeight030) var($fontFamily040);
423
+ @mixin utility-heading-large {
424
+ font: $fontWeight070 #{$fontSize080}/#{$fontLineHeight030} $fontFamily040;
458
425
  }
459
426
 
460
- .utility-subheading-xsmall {
461
- font: var($fontWeight050) var($fontSize010)/var($fontLineHeight030) var($fontFamily040);
427
+ @mixin utility-subheading-xsmall {
428
+ font: $fontWeight050 #{$fontSize010}/#{$fontLineHeight030} $fontFamily040;
462
429
  }
463
430
 
464
- .utility-subheading-small {
465
- font: var($fontWeight050) var($fontSize020)/var($fontLineHeight030) var($fontFamily040);
431
+ @mixin utility-subheading-small {
432
+ font: $fontWeight050 #{$fontSize020}/#{$fontLineHeight030} $fontFamily040;
466
433
  }
467
434
 
468
- .utility-subheading-medium {
469
- font: var($fontWeight050) var($fontSize030)/var($fontLineHeight030) var($fontFamily040);
435
+ @mixin utility-subheading-medium {
436
+ font: $fontWeight050 #{$fontSize030}/#{$fontLineHeight030} $fontFamily040;
470
437
  }
471
438
 
472
- .utility-subheading-large {
473
- font: var($fontWeight050) var($fontSize050)/var($fontLineHeight030) var($fontFamily040);
439
+ @mixin utility-subheading-large {
440
+ font: $fontWeight050 #{$fontSize050}/#{$fontLineHeight030} $fontFamily040;
474
441
  }
475
442
 
476
- .utility-body-regular-xsmall {
477
- font: var($fontWeight040) var($fontSize010)/var($fontLineHeight040) var($fontFamily040);
443
+ @mixin utility-body-regular-xsmall {
444
+ font: $fontWeight040 #{$fontSize010}/#{$fontLineHeight040} $fontFamily040;
478
445
  }
479
446
 
480
- .utility-body-regular-2xsmall {
481
- font: var($fontWeight040) var($fontSize005)/var($fontLineHeight040) var($fontFamily040);
447
+ @mixin utility-body-regular-2xsmall {
448
+ font: $fontWeight040 #{$fontSize005}/#{$fontLineHeight040} $fontFamily040;
482
449
  }
483
450
 
484
- .utility-body-regular-small {
485
- font: var($fontWeight040) var($fontSize020)/var($fontLineHeight040) var($fontFamily040);
451
+ @mixin utility-body-regular-small {
452
+ font: $fontWeight040 #{$fontSize020}/#{$fontLineHeight040} $fontFamily040;
486
453
  }
487
454
 
488
- .utility-body-regular-medium {
489
- font: var($fontWeight040) var($fontSize030)/var($fontLineHeight040) var($fontFamily040);
455
+ @mixin utility-body-regular-medium {
456
+ font: $fontWeight040 #{$fontSize030}/#{$fontLineHeight040} $fontFamily040;
490
457
  }
491
458
 
492
- .utility-body-regular-large {
493
- font: var($fontWeight040) var($fontSize040)/var($fontLineHeight040) var($fontFamily040);
459
+ @mixin utility-body-regular-large {
460
+ font: $fontWeight040 #{$fontSize040}/#{$fontLineHeight040} $fontFamily040;
494
461
  }
495
462
 
496
- .utility-body-bold-2xsmall {
497
- font: var($fontWeight070) var($fontSize005)/var($fontLineHeight040) var($fontFamily040);
463
+ @mixin utility-body-bold-2xsmall {
464
+ font: $fontWeight070 #{$fontSize005}/#{$fontLineHeight040} $fontFamily040;
498
465
  }
499
466
 
500
- .utility-body-bold-xsmall {
501
- font: var($fontWeight070) var($fontSize010)/var($fontLineHeight040) var($fontFamily040);
467
+ @mixin utility-body-bold-xsmall {
468
+ font: $fontWeight070 #{$fontSize010}/#{$fontLineHeight040} $fontFamily040;
502
469
  }
503
470
 
504
- .utility-body-bold-small {
505
- font: var($fontWeight070) var($fontSize020)/var($fontLineHeight040) var($fontFamily040);
471
+ @mixin utility-body-bold-small {
472
+ font: $fontWeight070 #{$fontSize020}/#{$fontLineHeight040} $fontFamily040;
506
473
  }
507
474
 
508
- .utility-body-bold-medium {
509
- font: var($fontWeight070) var($fontSize030)/var($fontLineHeight040) var($fontFamily040);
475
+ @mixin utility-body-bold-medium {
476
+ font: $fontWeight070 #{$fontSize030}/#{$fontLineHeight040} $fontFamily040;
510
477
  }
511
478
 
512
- .utility-body-bold-large {
513
- font: var($fontWeight070) var($fontSize040)/var($fontLineHeight040) var($fontFamily040);
479
+ @mixin utility-body-bold-large {
480
+ font: $fontWeight070 #{$fontSize040}/#{$fontLineHeight040} $fontFamily040;
514
481
  }
515
482
 
516
- .utility-button-xsmall {
517
- font: var($fontWeight050) var($fontSize010)/var($fontLineHeight010) var($fontFamily040);
483
+ @mixin utility-button-xsmall {
484
+ font: $fontWeight050 #{$fontSize010}/#{$fontLineHeight010} $fontFamily040;
518
485
  }
519
486
 
520
- .utility-button-small {
521
- font: var($fontWeight050) var($fontSize020)/var($fontLineHeight010) var($fontFamily040);
487
+ @mixin utility-button-small {
488
+ font: $fontWeight050 #{$fontSize020}/#{$fontLineHeight010} $fontFamily040;
522
489
  }
523
490
 
524
- .utility-button-medium {
525
- font: var($fontWeight050) var($fontSize030)/var($fontLineHeight010) var($fontFamily040);
491
+ @mixin utility-button-medium {
492
+ font: $fontWeight050 #{$fontSize030}/#{$fontLineHeight010} $fontFamily040;
526
493
  }
527
494
 
528
- .utility-button-large {
529
- font: var($fontWeight050) var($fontSize040)/var($fontLineHeight010) var($fontFamily040);
495
+ @mixin utility-button-large {
496
+ font: $fontWeight050 #{$fontSize040}/#{$fontLineHeight010} $fontFamily040;
530
497
  }
531
498
 
532
- .utility-label-xsmall {
533
- font: var($fontWeight050) var($fontSize010)/var($fontLineHeight020) var($fontFamily040);
499
+ @mixin utility-label-xsmall {
500
+ font: $fontWeight050 #{$fontSize010}/#{$fontLineHeight020} $fontFamily040;
534
501
  }
535
502
 
536
- .utility-label-small {
537
- font: var($fontWeight050) var($fontSize020)/var($fontLineHeight020) var($fontFamily040);
503
+ @mixin utility-label-small {
504
+ font: $fontWeight050 #{$fontSize020}/#{$fontLineHeight020} $fontFamily040;
538
505
  }
539
506
 
540
- .utility-label-medium {
541
- font: var($fontWeight050) var($fontSize030)/var($fontLineHeight020) var($fontFamily040);
507
+ @mixin utility-label-medium {
508
+ font: $fontWeight050 #{$fontSize030}/#{$fontLineHeight020} $fontFamily040;
542
509
  }
543
510
 
544
- .utility-label-large {
545
- font: var($fontWeight050) var($fontSize040)/var($fontLineHeight020) var($fontFamily040);
511
+ @mixin utility-label-large {
512
+ font: $fontWeight050 #{$fontSize040}/#{$fontLineHeight020} $fontFamily040;
546
513
  }
547
514
 
548
- .utility-link-inline-utility-xsmall {
549
- font: var($fontWeight070) var($fontSize010)/var($fontLineHeight040) var($fontFamily040);
515
+ @mixin utility-link-inline-utility-xsmall {
516
+ font: $fontWeight070 #{$fontSize010}/#{$fontLineHeight040} $fontFamily040;
550
517
  }
551
518
 
552
- .utility-link-inline-utility-small {
553
- font: var($fontWeight070) var($fontSize020)/var($fontLineHeight040) var($fontFamily040);
519
+ @mixin utility-link-inline-utility-small {
520
+ font: $fontWeight070 #{$fontSize020}/#{$fontLineHeight040} $fontFamily040;
554
521
  }
555
522
 
556
- .utility-link-inline-utility-medium {
557
- font: var($fontWeight070) var($fontSize030)/var($fontLineHeight040) var($fontFamily040);
523
+ @mixin utility-link-inline-utility-medium {
524
+ font: $fontWeight070 #{$fontSize030}/#{$fontLineHeight040} $fontFamily040;
558
525
  }
559
526
 
560
- .utility-link-inline-utility-large {
561
- font: var($fontWeight070) var($fontSize040)/var($fontLineHeight040) var($fontFamily040);
527
+ @mixin utility-link-inline-utility-large {
528
+ font: $fontWeight070 #{$fontSize040}/#{$fontLineHeight040} $fontFamily040;
562
529
  }
563
530
 
564
- .utility-link-inline-brand-xsmall {
565
- font: var($fontWeight040) var($fontSize010)/var($fontLineHeight040) var($fontFamily020);
531
+ @mixin utility-link-inline-brand-xsmall {
532
+ font: $fontWeight040 #{$fontSize010}/#{$fontLineHeight040} $fontFamily020;
566
533
  }
567
534
 
568
- .utility-link-inline-brand-small {
569
- font: var($fontWeight040) var($fontSize020)/var($fontLineHeight040) var($fontFamily020);
535
+ @mixin utility-link-inline-brand-small {
536
+ font: $fontWeight040 #{$fontSize020}/#{$fontLineHeight040} $fontFamily020;
570
537
  }
571
538
 
572
- .utility-link-inline-brand-medium {
573
- font: var($fontWeight040) var($fontSize030)/var($fontLineHeight040) var($fontFamily020);
539
+ @mixin utility-link-inline-brand-medium {
540
+ font: $fontWeight040 #{$fontSize030}/#{$fontLineHeight040} $fontFamily020;
574
541
  }
575
542
 
576
- .utility-link-inline-brand-large {
577
- font: var($fontWeight040) var($fontSize040)/var($fontLineHeight040) var($fontFamily020);
543
+ @mixin utility-link-inline-brand-large {
544
+ font: $fontWeight040 #{$fontSize040}/#{$fontLineHeight040} $fontFamily020;
578
545
  }
579
546
 
580
- .utility-link-standalone-utility-xsmall {
581
- font: var($fontWeight070) var($fontSize010)/var($fontLineHeight040) var($fontFamily040);
547
+ @mixin utility-link-standalone-utility-xsmall {
548
+ font: $fontWeight070 #{$fontSize010}/#{$fontLineHeight040} $fontFamily040;
582
549
  }
583
550
 
584
- .utility-link-standalone-utility-small {
585
- font: var($fontWeight070) var($fontSize020)/var($fontLineHeight040) var($fontFamily040);
551
+ @mixin utility-link-standalone-utility-small {
552
+ font: $fontWeight070 #{$fontSize020}/#{$fontLineHeight040} $fontFamily040;
586
553
  }
587
554
 
588
- .utility-link-standalone-utility-medium {
589
- font: var($fontWeight070) var($fontSize030)/var($fontLineHeight040) var($fontFamily040);
555
+ @mixin utility-link-standalone-utility-medium {
556
+ font: $fontWeight070 #{$fontSize030}/#{$fontLineHeight040} $fontFamily040;
590
557
  }
591
558
 
592
- .utility-link-standalone-utility-large {
593
- font: var($fontWeight070) var($fontSize040)/var($fontLineHeight040) var($fontFamily040);
559
+ @mixin utility-link-standalone-utility-large {
560
+ font: $fontWeight070 #{$fontSize040}/#{$fontLineHeight040} $fontFamily040;
594
561
  }
595
562
 
596
- .utility-link-standalone-brand-xsmall {
597
- font: var($fontWeight040) var($fontSize010)/var($fontLineHeight040) var($fontFamily020);
563
+ @mixin utility-link-standalone-brand-xsmall {
564
+ font: $fontWeight040 #{$fontSize010}/#{$fontLineHeight040} $fontFamily020;
598
565
  }
599
566
 
600
- .utility-link-standalone-brand-small {
601
- font: var($fontWeight040) var($fontSize020)/var($fontLineHeight040) var($fontFamily020);
567
+ @mixin utility-link-standalone-brand-small {
568
+ font: $fontWeight040 #{$fontSize020}/#{$fontLineHeight040} $fontFamily020;
602
569
  }
603
570
 
604
- .utility-link-standalone-brand-medium {
605
- font: var($fontWeight040) var($fontSize030)/var($fontLineHeight040) var($fontFamily020);
571
+ @mixin utility-link-standalone-brand-medium {
572
+ font: $fontWeight040 #{$fontSize030}/#{$fontLineHeight040} $fontFamily020;
606
573
  }
607
574
 
608
- .utility-link-standalone-brand-large {
609
- font: var($fontWeight040) var($fontSize040)/var($fontLineHeight040) var($fontFamily020);
575
+ @mixin utility-link-standalone-brand-large {
576
+ font: $fontWeight040 #{$fontSize040}/#{$fontLineHeight040} $fontFamily020;
610
577
  }
611
578