@penskemediacorp/larva-css 0.5.4 → 0.5.7-alpha.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 (19) hide show
  1. package/__tests__/fixtures/expected.js +19 -31
  2. package/build/css/algorithms.common.inline.css +5 -3
  3. package/build/css/js.common.async.css +2 -1
  4. package/build/css/utilities.common.async.css +2 -1
  5. package/build/css/utilities.common.inline.css +5 -4
  6. package/lib/generators.js +18 -13
  7. package/package.json +3 -3
  8. package/src/02-algorithms/a-children-link-color/a-children-link-color.common.inline.scss +15 -0
  9. package/src/02-algorithms/a-children-link-decoration/a-children-link-decoration.common.inline.scss +7 -0
  10. package/src/02-algorithms/a-glue/a-glue.common.inline.scss +4 -0
  11. package/src/02-algorithms/a-icon/a-icon.common.inline.scss +25 -1
  12. package/src/03-utilities/u-border.common.inline.scss +16 -0
  13. package/src/03-utilities/u-font-size.common.inline.scss +10 -0
  14. package/src/03-utilities/u-letter-spacing.common.inline.scss +11 -0
  15. package/src/03-utilities/u-list-style.common.async.scss +3 -0
  16. package/src/03-utilities/u-margin.common.inline.scss +1 -1
  17. package/src/03-utilities/u-width.common.inline.scss +35 -0
  18. package/src/04-js/js-PopOver.common.async.scss +13 -0
  19. package/src/_generated/_a-font.scss +380 -608
package/src/_generated/_a-font.scss CHANGED
@@ -1,742 +1,514 @@
1
1
  // Generated css from larva-tokens/lib/generators.js
2
2
 
3
3
  .lrv-a-font-primary-xl {
4
- --font-size-desktop: var( --primary-xl-font-size-desktop, var( --primary-xl-font-size-mobile ) );
5
- --font-size-mobile: var(--is-desktop) var( --primary-xl-font-size-mobile);
6
- --line-height-desktop: var( --primary-xl-line-height-desktop, var( --primary-xl-line-height-mobile ) );
7
- --line-height-mobile: var(--is-desktop) var( --primary-xl-line-height-mobile);
8
- --letter-spacing-desktop: var( --primary-xl-letter-spacing-desktop, var( --primary-xl-letter-spacing-mobile ) );
9
- --letter-spacing-mobile: var(--is-desktop) var( --primary-xl-letter-spacing-mobile);
10
- --font-weight-desktop: var( --primary-xl-font-weight-desktop, var( --primary-xl-font-weight-mobile ) );
11
- --font-weight-mobile: var(--is-desktop) var( --primary-xl-font-weight-mobile);
12
- --font-style-desktop: var( --primary-xl-font-style-desktop, var( --primary-xl-font-style-mobile ) );
13
- --font-style-mobile: var(--is-desktop) var( --primary-xl-font-style-mobile);
14
-
15
4
  // Define this token locally; it can be defined via larva-tokens, if needed in the future.
16
5
  --font-family: var( --font-family-primary );
17
6
 
18
7
  font-family: var( --font-family );
19
-
20
- font-size: var(
21
- --font-size-mobile,
22
- var(--font-size-desktop)
23
- );
24
- line-height: var(
25
- --line-height-mobile,
26
- var(--line-height-desktop)
27
- );
28
- letter-spacing: var(
29
- --letter-spacing-mobile,
30
- var(--letter-spacing-desktop)
31
- );
32
- font-weight: var(
33
- --font-weight-mobile,
34
- var(--font-weight-desktop)
35
- );
36
- font-style: var(
37
- --font-style-mobile,
38
- var(--font-style-desktop)
39
- );
8
+ font-size: var( --primary-xl-font-size-mobile );
9
+ line-height: var( --primary-xl-line-height-mobile );
10
+ letter-spacing: var( --primary-xl-letter-spacing-mobile );
11
+ font-weight: var( --primary-xl-font-weight-mobile );
12
+ font-style: var( --primary-xl-font-style-mobile );
13
+
14
+ @media (min-width: $screen-desktop) {
15
+ font-size: var( --primary-xl-font-size-desktop );
16
+ line-height: var( --primary-xl-line-height-desktop );
17
+ letter-spacing: var( --primary-xl-letter-spacing-desktop );
18
+ font-weight: var( --primary-xl-font-weight-desktop );
19
+ font-style: var( --primary-xl-font-style-desktop );
20
+ }
21
+ @media (min-width: $screen-desktop-xl) {
22
+ font-size: var( --primary-xl-font-size-desktop-xl );
23
+ line-height: var( --primary-xl-line-height-desktop-xl );
24
+ letter-spacing: var( --primary-xl-letter-spacing-desktop-xl );
25
+ font-weight: var( --primary-xl-font-weight-desktop-xl );
26
+ font-style: var( --primary-xl-font-style-desktop-xl );
27
+ }
40
28
  }
41
29
 
42
30
  .lrv-a-font-primary-l {
43
- --font-size-desktop: var( --primary-l-font-size-desktop, var( --primary-l-font-size-mobile ) );
44
- --font-size-mobile: var(--is-desktop) var( --primary-l-font-size-mobile);
45
- --line-height-desktop: var( --primary-l-line-height-desktop, var( --primary-l-line-height-mobile ) );
46
- --line-height-mobile: var(--is-desktop) var( --primary-l-line-height-mobile);
47
- --letter-spacing-desktop: var( --primary-l-letter-spacing-desktop, var( --primary-l-letter-spacing-mobile ) );
48
- --letter-spacing-mobile: var(--is-desktop) var( --primary-l-letter-spacing-mobile);
49
- --font-weight-desktop: var( --primary-l-font-weight-desktop, var( --primary-l-font-weight-mobile ) );
50
- --font-weight-mobile: var(--is-desktop) var( --primary-l-font-weight-mobile);
51
- --font-style-desktop: var( --primary-l-font-style-desktop, var( --primary-l-font-style-mobile ) );
52
- --font-style-mobile: var(--is-desktop) var( --primary-l-font-style-mobile);
53
-
54
31
  // Define this token locally; it can be defined via larva-tokens, if needed in the future.
55
32
  --font-family: var( --font-family-primary );
56
33
 
57
34
  font-family: var( --font-family );
58
-
59
- font-size: var(
60
- --font-size-mobile,
61
- var(--font-size-desktop)
62
- );
63
- line-height: var(
64
- --line-height-mobile,
65
- var(--line-height-desktop)
66
- );
67
- letter-spacing: var(
68
- --letter-spacing-mobile,
69
- var(--letter-spacing-desktop)
70
- );
71
- font-weight: var(
72
- --font-weight-mobile,
73
- var(--font-weight-desktop)
74
- );
75
- font-style: var(
76
- --font-style-mobile,
77
- var(--font-style-desktop)
78
- );
35
+ font-size: var( --primary-l-font-size-mobile );
36
+ line-height: var( --primary-l-line-height-mobile );
37
+ letter-spacing: var( --primary-l-letter-spacing-mobile );
38
+ font-weight: var( --primary-l-font-weight-mobile );
39
+ font-style: var( --primary-l-font-style-mobile );
40
+
41
+ @media (min-width: $screen-desktop) {
42
+ font-size: var( --primary-l-font-size-desktop );
43
+ line-height: var( --primary-l-line-height-desktop );
44
+ letter-spacing: var( --primary-l-letter-spacing-desktop );
45
+ font-weight: var( --primary-l-font-weight-desktop );
46
+ font-style: var( --primary-l-font-style-desktop );
47
+ }
48
+ @media (min-width: $screen-desktop-xl) {
49
+ font-size: var( --primary-l-font-size-desktop-xl );
50
+ line-height: var( --primary-l-line-height-desktop-xl );
51
+ letter-spacing: var( --primary-l-letter-spacing-desktop-xl );
52
+ font-weight: var( --primary-l-font-weight-desktop-xl );
53
+ font-style: var( --primary-l-font-style-desktop-xl );
54
+ }
79
55
  }
80
56
 
81
57
  .lrv-a-font-primary-m {
82
- --font-size-desktop: var( --primary-m-font-size-desktop, var( --primary-m-font-size-mobile ) );
83
- --font-size-mobile: var(--is-desktop) var( --primary-m-font-size-mobile);
84
- --line-height-desktop: var( --primary-m-line-height-desktop, var( --primary-m-line-height-mobile ) );
85
- --line-height-mobile: var(--is-desktop) var( --primary-m-line-height-mobile);
86
- --letter-spacing-desktop: var( --primary-m-letter-spacing-desktop, var( --primary-m-letter-spacing-mobile ) );
87
- --letter-spacing-mobile: var(--is-desktop) var( --primary-m-letter-spacing-mobile);
88
- --font-weight-desktop: var( --primary-m-font-weight-desktop, var( --primary-m-font-weight-mobile ) );
89
- --font-weight-mobile: var(--is-desktop) var( --primary-m-font-weight-mobile);
90
- --font-style-desktop: var( --primary-m-font-style-desktop, var( --primary-m-font-style-mobile ) );
91
- --font-style-mobile: var(--is-desktop) var( --primary-m-font-style-mobile);
92
-
93
58
  // Define this token locally; it can be defined via larva-tokens, if needed in the future.
94
59
  --font-family: var( --font-family-primary );
95
60
 
96
61
  font-family: var( --font-family );
97
-
98
- font-size: var(
99
- --font-size-mobile,
100
- var(--font-size-desktop)
101
- );
102
- line-height: var(
103
- --line-height-mobile,
104
- var(--line-height-desktop)
105
- );
106
- letter-spacing: var(
107
- --letter-spacing-mobile,
108
- var(--letter-spacing-desktop)
109
- );
110
- font-weight: var(
111
- --font-weight-mobile,
112
- var(--font-weight-desktop)
113
- );
114
- font-style: var(
115
- --font-style-mobile,
116
- var(--font-style-desktop)
117
- );
62
+ font-size: var( --primary-m-font-size-mobile );
63
+ line-height: var( --primary-m-line-height-mobile );
64
+ letter-spacing: var( --primary-m-letter-spacing-mobile );
65
+ font-weight: var( --primary-m-font-weight-mobile );
66
+ font-style: var( --primary-m-font-style-mobile );
67
+
68
+ @media (min-width: $screen-desktop) {
69
+ font-size: var( --primary-m-font-size-desktop );
70
+ line-height: var( --primary-m-line-height-desktop );
71
+ letter-spacing: var( --primary-m-letter-spacing-desktop );
72
+ font-weight: var( --primary-m-font-weight-desktop );
73
+ font-style: var( --primary-m-font-style-desktop );
74
+ }
75
+ @media (min-width: $screen-desktop-xl) {
76
+ font-size: var( --primary-m-font-size-desktop-xl );
77
+ line-height: var( --primary-m-line-height-desktop-xl );
78
+ letter-spacing: var( --primary-m-letter-spacing-desktop-xl );
79
+ font-weight: var( --primary-m-font-weight-desktop-xl );
80
+ font-style: var( --primary-m-font-style-desktop-xl );
81
+ }
118
82
  }
119
83
 
120
84
  .lrv-a-font-primary-s {
121
- --font-size-desktop: var( --primary-s-font-size-desktop, var( --primary-s-font-size-mobile ) );
122
- --font-size-mobile: var(--is-desktop) var( --primary-s-font-size-mobile);
123
- --line-height-desktop: var( --primary-s-line-height-desktop, var( --primary-s-line-height-mobile ) );
124
- --line-height-mobile: var(--is-desktop) var( --primary-s-line-height-mobile);
125
- --letter-spacing-desktop: var( --primary-s-letter-spacing-desktop, var( --primary-s-letter-spacing-mobile ) );
126
- --letter-spacing-mobile: var(--is-desktop) var( --primary-s-letter-spacing-mobile);
127
- --font-weight-desktop: var( --primary-s-font-weight-desktop, var( --primary-s-font-weight-mobile ) );
128
- --font-weight-mobile: var(--is-desktop) var( --primary-s-font-weight-mobile);
129
- --font-style-desktop: var( --primary-s-font-style-desktop, var( --primary-s-font-style-mobile ) );
130
- --font-style-mobile: var(--is-desktop) var( --primary-s-font-style-mobile);
131
-
132
85
  // Define this token locally; it can be defined via larva-tokens, if needed in the future.
133
86
  --font-family: var( --font-family-primary );
134
87
 
135
88
  font-family: var( --font-family );
136
-
137
- font-size: var(
138
- --font-size-mobile,
139
- var(--font-size-desktop)
140
- );
141
- line-height: var(
142
- --line-height-mobile,
143
- var(--line-height-desktop)
144
- );
145
- letter-spacing: var(
146
- --letter-spacing-mobile,
147
- var(--letter-spacing-desktop)
148
- );
149
- font-weight: var(
150
- --font-weight-mobile,
151
- var(--font-weight-desktop)
152
- );
153
- font-style: var(
154
- --font-style-mobile,
155
- var(--font-style-desktop)
156
- );
89
+ font-size: var( --primary-s-font-size-mobile );
90
+ line-height: var( --primary-s-line-height-mobile );
91
+ letter-spacing: var( --primary-s-letter-spacing-mobile );
92
+ font-weight: var( --primary-s-font-weight-mobile );
93
+ font-style: var( --primary-s-font-style-mobile );
94
+
95
+ @media (min-width: $screen-desktop) {
96
+ font-size: var( --primary-s-font-size-desktop );
97
+ line-height: var( --primary-s-line-height-desktop );
98
+ letter-spacing: var( --primary-s-letter-spacing-desktop );
99
+ font-weight: var( --primary-s-font-weight-desktop );
100
+ font-style: var( --primary-s-font-style-desktop );
101
+ }
102
+ @media (min-width: $screen-desktop-xl) {
103
+ font-size: var( --primary-s-font-size-desktop-xl );
104
+ line-height: var( --primary-s-line-height-desktop-xl );
105
+ letter-spacing: var( --primary-s-letter-spacing-desktop-xl );
106
+ font-weight: var( --primary-s-font-weight-desktop-xl );
107
+ font-style: var( --primary-s-font-style-desktop-xl );
108
+ }
157
109
  }
158
110
 
159
111
  .lrv-a-font-primary-xs {
160
- --font-size-desktop: var( --primary-xs-font-size-desktop, var( --primary-xs-font-size-mobile ) );
161
- --font-size-mobile: var(--is-desktop) var( --primary-xs-font-size-mobile);
162
- --line-height-desktop: var( --primary-xs-line-height-desktop, var( --primary-xs-line-height-mobile ) );
163
- --line-height-mobile: var(--is-desktop) var( --primary-xs-line-height-mobile);
164
- --letter-spacing-desktop: var( --primary-xs-letter-spacing-desktop, var( --primary-xs-letter-spacing-mobile ) );
165
- --letter-spacing-mobile: var(--is-desktop) var( --primary-xs-letter-spacing-mobile);
166
- --font-weight-desktop: var( --primary-xs-font-weight-desktop, var( --primary-xs-font-weight-mobile ) );
167
- --font-weight-mobile: var(--is-desktop) var( --primary-xs-font-weight-mobile);
168
- --font-style-desktop: var( --primary-xs-font-style-desktop, var( --primary-xs-font-style-mobile ) );
169
- --font-style-mobile: var(--is-desktop) var( --primary-xs-font-style-mobile);
170
-
171
112
  // Define this token locally; it can be defined via larva-tokens, if needed in the future.
172
113
  --font-family: var( --font-family-primary );
173
114
 
174
115
  font-family: var( --font-family );
175
-
176
- font-size: var(
177
- --font-size-mobile,
178
- var(--font-size-desktop)
179
- );
180
- line-height: var(
181
- --line-height-mobile,
182
- var(--line-height-desktop)
183
- );
184
- letter-spacing: var(
185
- --letter-spacing-mobile,
186
- var(--letter-spacing-desktop)
187
- );
188
- font-weight: var(
189
- --font-weight-mobile,
190
- var(--font-weight-desktop)
191
- );
192
- font-style: var(
193
- --font-style-mobile,
194
- var(--font-style-desktop)
195
- );
116
+ font-size: var( --primary-xs-font-size-mobile );
117
+ line-height: var( --primary-xs-line-height-mobile );
118
+ letter-spacing: var( --primary-xs-letter-spacing-mobile );
119
+ font-weight: var( --primary-xs-font-weight-mobile );
120
+ font-style: var( --primary-xs-font-style-mobile );
121
+
122
+ @media (min-width: $screen-desktop) {
123
+ font-size: var( --primary-xs-font-size-desktop );
124
+ line-height: var( --primary-xs-line-height-desktop );
125
+ letter-spacing: var( --primary-xs-letter-spacing-desktop );
126
+ font-weight: var( --primary-xs-font-weight-desktop );
127
+ font-style: var( --primary-xs-font-style-desktop );
128
+ }
129
+ @media (min-width: $screen-desktop-xl) {
130
+ font-size: var( --primary-xs-font-size-desktop-xl );
131
+ line-height: var( --primary-xs-line-height-desktop-xl );
132
+ letter-spacing: var( --primary-xs-letter-spacing-desktop-xl );
133
+ font-weight: var( --primary-xs-font-weight-desktop-xl );
134
+ font-style: var( --primary-xs-font-style-desktop-xl );
135
+ }
196
136
  }
197
137
 
198
138
  .lrv-a-font-primary-xxs {
199
- --font-size-desktop: var( --primary-xxs-font-size-desktop, var( --primary-xxs-font-size-mobile ) );
200
- --font-size-mobile: var(--is-desktop) var( --primary-xxs-font-size-mobile);
201
- --line-height-desktop: var( --primary-xxs-line-height-desktop, var( --primary-xxs-line-height-mobile ) );
202
- --line-height-mobile: var(--is-desktop) var( --primary-xxs-line-height-mobile);
203
- --letter-spacing-desktop: var( --primary-xxs-letter-spacing-desktop, var( --primary-xxs-letter-spacing-mobile ) );
204
- --letter-spacing-mobile: var(--is-desktop) var( --primary-xxs-letter-spacing-mobile);
205
- --font-weight-desktop: var( --primary-xxs-font-weight-desktop, var( --primary-xxs-font-weight-mobile ) );
206
- --font-weight-mobile: var(--is-desktop) var( --primary-xxs-font-weight-mobile);
207
- --font-style-desktop: var( --primary-xxs-font-style-desktop, var( --primary-xxs-font-style-mobile ) );
208
- --font-style-mobile: var(--is-desktop) var( --primary-xxs-font-style-mobile);
209
-
210
139
  // Define this token locally; it can be defined via larva-tokens, if needed in the future.
211
140
  --font-family: var( --font-family-primary );
212
141
 
213
142
  font-family: var( --font-family );
214
-
215
- font-size: var(
216
- --font-size-mobile,
217
- var(--font-size-desktop)
218
- );
219
- line-height: var(
220
- --line-height-mobile,
221
- var(--line-height-desktop)
222
- );
223
- letter-spacing: var(
224
- --letter-spacing-mobile,
225
- var(--letter-spacing-desktop)
226
- );
227
- font-weight: var(
228
- --font-weight-mobile,
229
- var(--font-weight-desktop)
230
- );
231
- font-style: var(
232
- --font-style-mobile,
233
- var(--font-style-desktop)
234
- );
143
+ font-size: var( --primary-xxs-font-size-mobile );
144
+ line-height: var( --primary-xxs-line-height-mobile );
145
+ letter-spacing: var( --primary-xxs-letter-spacing-mobile );
146
+ font-weight: var( --primary-xxs-font-weight-mobile );
147
+ font-style: var( --primary-xxs-font-style-mobile );
148
+
149
+ @media (min-width: $screen-desktop) {
150
+ font-size: var( --primary-xxs-font-size-desktop );
151
+ line-height: var( --primary-xxs-line-height-desktop );
152
+ letter-spacing: var( --primary-xxs-letter-spacing-desktop );
153
+ font-weight: var( --primary-xxs-font-weight-desktop );
154
+ font-style: var( --primary-xxs-font-style-desktop );
155
+ }
156
+ @media (min-width: $screen-desktop-xl) {
157
+ font-size: var( --primary-xxs-font-size-desktop-xl );
158
+ line-height: var( --primary-xxs-line-height-desktop-xl );
159
+ letter-spacing: var( --primary-xxs-letter-spacing-desktop-xl );
160
+ font-weight: var( --primary-xxs-font-weight-desktop-xl );
161
+ font-style: var( --primary-xxs-font-style-desktop-xl );
162
+ }
235
163
  }
236
164
 
237
165
  .lrv-a-font-primary-xxxs {
238
- --font-size-desktop: var( --primary-xxxs-font-size-desktop, var( --primary-xxxs-font-size-mobile ) );
239
- --font-size-mobile: var(--is-desktop) var( --primary-xxxs-font-size-mobile);
240
- --line-height-desktop: var( --primary-xxxs-line-height-desktop, var( --primary-xxxs-line-height-mobile ) );
241
- --line-height-mobile: var(--is-desktop) var( --primary-xxxs-line-height-mobile);
242
- --letter-spacing-desktop: var( --primary-xxxs-letter-spacing-desktop, var( --primary-xxxs-letter-spacing-mobile ) );
243
- --letter-spacing-mobile: var(--is-desktop) var( --primary-xxxs-letter-spacing-mobile);
244
- --font-weight-desktop: var( --primary-xxxs-font-weight-desktop, var( --primary-xxxs-font-weight-mobile ) );
245
- --font-weight-mobile: var(--is-desktop) var( --primary-xxxs-font-weight-mobile);
246
- --font-style-desktop: var( --primary-xxxs-font-style-desktop, var( --primary-xxxs-font-style-mobile ) );
247
- --font-style-mobile: var(--is-desktop) var( --primary-xxxs-font-style-mobile);
248
-
249
166
  // Define this token locally; it can be defined via larva-tokens, if needed in the future.
250
167
  --font-family: var( --font-family-primary );
251
168
 
252
169
  font-family: var( --font-family );
253
-
254
- font-size: var(
255
- --font-size-mobile,
256
- var(--font-size-desktop)
257
- );
258
- line-height: var(
259
- --line-height-mobile,
260
- var(--line-height-desktop)
261
- );
262
- letter-spacing: var(
263
- --letter-spacing-mobile,
264
- var(--letter-spacing-desktop)
265
- );
266
- font-weight: var(
267
- --font-weight-mobile,
268
- var(--font-weight-desktop)
269
- );
270
- font-style: var(
271
- --font-style-mobile,
272
- var(--font-style-desktop)
273
- );
170
+ font-size: var( --primary-xxxs-font-size-mobile );
171
+ line-height: var( --primary-xxxs-line-height-mobile );
172
+ letter-spacing: var( --primary-xxxs-letter-spacing-mobile );
173
+ font-weight: var( --primary-xxxs-font-weight-mobile );
174
+ font-style: var( --primary-xxxs-font-style-mobile );
175
+
176
+ @media (min-width: $screen-desktop) {
177
+ font-size: var( --primary-xxxs-font-size-desktop );
178
+ line-height: var( --primary-xxxs-line-height-desktop );
179
+ letter-spacing: var( --primary-xxxs-letter-spacing-desktop );
180
+ font-weight: var( --primary-xxxs-font-weight-desktop );
181
+ font-style: var( --primary-xxxs-font-style-desktop );
182
+ }
183
+ @media (min-width: $screen-desktop-xl) {
184
+ font-size: var( --primary-xxxs-font-size-desktop-xl );
185
+ line-height: var( --primary-xxxs-line-height-desktop-xl );
186
+ letter-spacing: var( --primary-xxxs-letter-spacing-desktop-xl );
187
+ font-weight: var( --primary-xxxs-font-weight-desktop-xl );
188
+ font-style: var( --primary-xxxs-font-style-desktop-xl );
189
+ }
274
190
  }
275
191
 
276
192
  .lrv-a-font-secondary-l {
277
- --font-size-desktop: var( --secondary-l-font-size-desktop, var( --secondary-l-font-size-mobile ) );
278
- --font-size-mobile: var(--is-desktop) var( --secondary-l-font-size-mobile);
279
- --line-height-desktop: var( --secondary-l-line-height-desktop, var( --secondary-l-line-height-mobile ) );
280
- --line-height-mobile: var(--is-desktop) var( --secondary-l-line-height-mobile);
281
- --letter-spacing-desktop: var( --secondary-l-letter-spacing-desktop, var( --secondary-l-letter-spacing-mobile ) );
282
- --letter-spacing-mobile: var(--is-desktop) var( --secondary-l-letter-spacing-mobile);
283
- --font-weight-desktop: var( --secondary-l-font-weight-desktop, var( --secondary-l-font-weight-mobile ) );
284
- --font-weight-mobile: var(--is-desktop) var( --secondary-l-font-weight-mobile);
285
- --font-style-desktop: var( --secondary-l-font-style-desktop, var( --secondary-l-font-style-mobile ) );
286
- --font-style-mobile: var(--is-desktop) var( --secondary-l-font-style-mobile);
287
-
288
193
  // Define this token locally; it can be defined via larva-tokens, if needed in the future.
289
194
  --font-family: var( --font-family-secondary );
290
195
 
291
196
  font-family: var( --font-family );
292
-
293
- font-size: var(
294
- --font-size-mobile,
295
- var(--font-size-desktop)
296
- );
297
- line-height: var(
298
- --line-height-mobile,
299
- var(--line-height-desktop)
300
- );
301
- letter-spacing: var(
302
- --letter-spacing-mobile,
303
- var(--letter-spacing-desktop)
304
- );
305
- font-weight: var(
306
- --font-weight-mobile,
307
- var(--font-weight-desktop)
308
- );
309
- font-style: var(
310
- --font-style-mobile,
311
- var(--font-style-desktop)
312
- );
197
+ font-size: var( --secondary-l-font-size-mobile );
198
+ line-height: var( --secondary-l-line-height-mobile );
199
+ letter-spacing: var( --secondary-l-letter-spacing-mobile );
200
+ font-weight: var( --secondary-l-font-weight-mobile );
201
+ font-style: var( --secondary-l-font-style-mobile );
202
+
203
+ @media (min-width: $screen-desktop) {
204
+ font-size: var( --secondary-l-font-size-desktop );
205
+ line-height: var( --secondary-l-line-height-desktop );
206
+ letter-spacing: var( --secondary-l-letter-spacing-desktop );
207
+ font-weight: var( --secondary-l-font-weight-desktop );
208
+ font-style: var( --secondary-l-font-style-desktop );
209
+ }
210
+ @media (min-width: $screen-desktop-xl) {
211
+ font-size: var( --secondary-l-font-size-desktop-xl );
212
+ line-height: var( --secondary-l-line-height-desktop-xl );
213
+ letter-spacing: var( --secondary-l-letter-spacing-desktop-xl );
214
+ font-weight: var( --secondary-l-font-weight-desktop-xl );
215
+ font-style: var( --secondary-l-font-style-desktop-xl );
216
+ }
313
217
  }
314
218
 
315
219
  .lrv-a-font-secondary-m {
316
- --font-size-desktop: var( --secondary-m-font-size-desktop, var( --secondary-m-font-size-mobile ) );
317
- --font-size-mobile: var(--is-desktop) var( --secondary-m-font-size-mobile);
318
- --line-height-desktop: var( --secondary-m-line-height-desktop, var( --secondary-m-line-height-mobile ) );
319
- --line-height-mobile: var(--is-desktop) var( --secondary-m-line-height-mobile);
320
- --letter-spacing-desktop: var( --secondary-m-letter-spacing-desktop, var( --secondary-m-letter-spacing-mobile ) );
321
- --letter-spacing-mobile: var(--is-desktop) var( --secondary-m-letter-spacing-mobile);
322
- --font-weight-desktop: var( --secondary-m-font-weight-desktop, var( --secondary-m-font-weight-mobile ) );
323
- --font-weight-mobile: var(--is-desktop) var( --secondary-m-font-weight-mobile);
324
- --font-style-desktop: var( --secondary-m-font-style-desktop, var( --secondary-m-font-style-mobile ) );
325
- --font-style-mobile: var(--is-desktop) var( --secondary-m-font-style-mobile);
326
-
327
220
  // Define this token locally; it can be defined via larva-tokens, if needed in the future.
328
221
  --font-family: var( --font-family-secondary );
329
222
 
330
223
  font-family: var( --font-family );
331
-
332
- font-size: var(
333
- --font-size-mobile,
334
- var(--font-size-desktop)
335
- );
336
- line-height: var(
337
- --line-height-mobile,
338
- var(--line-height-desktop)
339
- );
340
- letter-spacing: var(
341
- --letter-spacing-mobile,
342
- var(--letter-spacing-desktop)
343
- );
344
- font-weight: var(
345
- --font-weight-mobile,
346
- var(--font-weight-desktop)
347
- );
348
- font-style: var(
349
- --font-style-mobile,
350
- var(--font-style-desktop)
351
- );
224
+ font-size: var( --secondary-m-font-size-mobile );
225
+ line-height: var( --secondary-m-line-height-mobile );
226
+ letter-spacing: var( --secondary-m-letter-spacing-mobile );
227
+ font-weight: var( --secondary-m-font-weight-mobile );
228
+ font-style: var( --secondary-m-font-style-mobile );
229
+
230
+ @media (min-width: $screen-desktop) {
231
+ font-size: var( --secondary-m-font-size-desktop );
232
+ line-height: var( --secondary-m-line-height-desktop );
233
+ letter-spacing: var( --secondary-m-letter-spacing-desktop );
234
+ font-weight: var( --secondary-m-font-weight-desktop );
235
+ font-style: var( --secondary-m-font-style-desktop );
236
+ }
237
+ @media (min-width: $screen-desktop-xl) {
238
+ font-size: var( --secondary-m-font-size-desktop-xl );
239
+ line-height: var( --secondary-m-line-height-desktop-xl );
240
+ letter-spacing: var( --secondary-m-letter-spacing-desktop-xl );
241
+ font-weight: var( --secondary-m-font-weight-desktop-xl );
242
+ font-style: var( --secondary-m-font-style-desktop-xl );
243
+ }
352
244
  }
353
245
 
354
246
  .lrv-a-font-secondary-s {
355
- --font-size-desktop: var( --secondary-s-font-size-desktop, var( --secondary-s-font-size-mobile ) );
356
- --font-size-mobile: var(--is-desktop) var( --secondary-s-font-size-mobile);
357
- --line-height-desktop: var( --secondary-s-line-height-desktop, var( --secondary-s-line-height-mobile ) );
358
- --line-height-mobile: var(--is-desktop) var( --secondary-s-line-height-mobile);
359
- --letter-spacing-desktop: var( --secondary-s-letter-spacing-desktop, var( --secondary-s-letter-spacing-mobile ) );
360
- --letter-spacing-mobile: var(--is-desktop) var( --secondary-s-letter-spacing-mobile);
361
- --font-weight-desktop: var( --secondary-s-font-weight-desktop, var( --secondary-s-font-weight-mobile ) );
362
- --font-weight-mobile: var(--is-desktop) var( --secondary-s-font-weight-mobile);
363
- --font-style-desktop: var( --secondary-s-font-style-desktop, var( --secondary-s-font-style-mobile ) );
364
- --font-style-mobile: var(--is-desktop) var( --secondary-s-font-style-mobile);
365
-
366
247
  // Define this token locally; it can be defined via larva-tokens, if needed in the future.
367
248
  --font-family: var( --font-family-secondary );
368
249
 
369
250
  font-family: var( --font-family );
370
-
371
- font-size: var(
372
- --font-size-mobile,
373
- var(--font-size-desktop)
374
- );
375
- line-height: var(
376
- --line-height-mobile,
377
- var(--line-height-desktop)
378
- );
379
- letter-spacing: var(
380
- --letter-spacing-mobile,
381
- var(--letter-spacing-desktop)
382
- );
383
- font-weight: var(
384
- --font-weight-mobile,
385
- var(--font-weight-desktop)
386
- );
387
- font-style: var(
388
- --font-style-mobile,
389
- var(--font-style-desktop)
390
- );
251
+ font-size: var( --secondary-s-font-size-mobile );
252
+ line-height: var( --secondary-s-line-height-mobile );
253
+ letter-spacing: var( --secondary-s-letter-spacing-mobile );
254
+ font-weight: var( --secondary-s-font-weight-mobile );
255
+ font-style: var( --secondary-s-font-style-mobile );
256
+
257
+ @media (min-width: $screen-desktop) {
258
+ font-size: var( --secondary-s-font-size-desktop );
259
+ line-height: var( --secondary-s-line-height-desktop );
260
+ letter-spacing: var( --secondary-s-letter-spacing-desktop );
261
+ font-weight: var( --secondary-s-font-weight-desktop );
262
+ font-style: var( --secondary-s-font-style-desktop );
263
+ }
264
+ @media (min-width: $screen-desktop-xl) {
265
+ font-size: var( --secondary-s-font-size-desktop-xl );
266
+ line-height: var( --secondary-s-line-height-desktop-xl );
267
+ letter-spacing: var( --secondary-s-letter-spacing-desktop-xl );
268
+ font-weight: var( --secondary-s-font-weight-desktop-xl );
269
+ font-style: var( --secondary-s-font-style-desktop-xl );
270
+ }
391
271
  }
392
272
 
393
273
  .lrv-a-font-secondary-regular-m {
394
- --font-size-desktop: var( --secondary-regular-m-font-size-desktop, var( --secondary-regular-m-font-size-mobile ) );
395
- --font-size-mobile: var(--is-desktop) var( --secondary-regular-m-font-size-mobile);
396
- --line-height-desktop: var( --secondary-regular-m-line-height-desktop, var( --secondary-regular-m-line-height-mobile ) );
397
- --line-height-mobile: var(--is-desktop) var( --secondary-regular-m-line-height-mobile);
398
- --letter-spacing-desktop: var( --secondary-regular-m-letter-spacing-desktop, var( --secondary-regular-m-letter-spacing-mobile ) );
399
- --letter-spacing-mobile: var(--is-desktop) var( --secondary-regular-m-letter-spacing-mobile);
400
- --font-weight-desktop: var( --secondary-regular-m-font-weight-desktop, var( --secondary-regular-m-font-weight-mobile ) );
401
- --font-weight-mobile: var(--is-desktop) var( --secondary-regular-m-font-weight-mobile);
402
- --font-style-desktop: var( --secondary-regular-m-font-style-desktop, var( --secondary-regular-m-font-style-mobile ) );
403
- --font-style-mobile: var(--is-desktop) var( --secondary-regular-m-font-style-mobile);
404
-
405
274
  // Define this token locally; it can be defined via larva-tokens, if needed in the future.
406
275
  --font-family: var( --font-family-secondary );
407
276
 
408
277
  font-family: var( --font-family );
409
-
410
- font-size: var(
411
- --font-size-mobile,
412
- var(--font-size-desktop)
413
- );
414
- line-height: var(
415
- --line-height-mobile,
416
- var(--line-height-desktop)
417
- );
418
- letter-spacing: var(
419
- --letter-spacing-mobile,
420
- var(--letter-spacing-desktop)
421
- );
422
- font-weight: var(
423
- --font-weight-mobile,
424
- var(--font-weight-desktop)
425
- );
426
- font-style: var(
427
- --font-style-mobile,
428
- var(--font-style-desktop)
429
- );
278
+ font-size: var( --secondary-regular-m-font-size-mobile );
279
+ line-height: var( --secondary-regular-m-line-height-mobile );
280
+ letter-spacing: var( --secondary-regular-m-letter-spacing-mobile );
281
+ font-weight: var( --secondary-regular-m-font-weight-mobile );
282
+ font-style: var( --secondary-regular-m-font-style-mobile );
283
+
284
+ @media (min-width: $screen-desktop) {
285
+ font-size: var( --secondary-regular-m-font-size-desktop );
286
+ line-height: var( --secondary-regular-m-line-height-desktop );
287
+ letter-spacing: var( --secondary-regular-m-letter-spacing-desktop );
288
+ font-weight: var( --secondary-regular-m-font-weight-desktop );
289
+ font-style: var( --secondary-regular-m-font-style-desktop );
290
+ }
291
+ @media (min-width: $screen-desktop-xl) {
292
+ font-size: var( --secondary-regular-m-font-size-desktop-xl );
293
+ line-height: var( --secondary-regular-m-line-height-desktop-xl );
294
+ letter-spacing: var( --secondary-regular-m-letter-spacing-desktop-xl );
295
+ font-weight: var( --secondary-regular-m-font-weight-desktop-xl );
296
+ font-style: var( --secondary-regular-m-font-style-desktop-xl );
297
+ }
430
298
  }
431
299
 
432
300
  .lrv-a-font-accent-l {
433
- --font-size-desktop: var( --accent-l-font-size-desktop, var( --accent-l-font-size-mobile ) );
434
- --font-size-mobile: var(--is-desktop) var( --accent-l-font-size-mobile);
435
- --line-height-desktop: var( --accent-l-line-height-desktop, var( --accent-l-line-height-mobile ) );
436
- --line-height-mobile: var(--is-desktop) var( --accent-l-line-height-mobile);
437
- --letter-spacing-desktop: var( --accent-l-letter-spacing-desktop, var( --accent-l-letter-spacing-mobile ) );
438
- --letter-spacing-mobile: var(--is-desktop) var( --accent-l-letter-spacing-mobile);
439
- --font-weight-desktop: var( --accent-l-font-weight-desktop, var( --accent-l-font-weight-mobile ) );
440
- --font-weight-mobile: var(--is-desktop) var( --accent-l-font-weight-mobile);
441
- --font-style-desktop: var( --accent-l-font-style-desktop, var( --accent-l-font-style-mobile ) );
442
- --font-style-mobile: var(--is-desktop) var( --accent-l-font-style-mobile);
443
-
444
301
  // Define this token locally; it can be defined via larva-tokens, if needed in the future.
445
302
  --font-family: var( --font-family-accent );
446
303
 
447
304
  font-family: var( --font-family );
448
-
449
- font-size: var(
450
- --font-size-mobile,
451
- var(--font-size-desktop)
452
- );
453
- line-height: var(
454
- --line-height-mobile,
455
- var(--line-height-desktop)
456
- );
457
- letter-spacing: var(
458
- --letter-spacing-mobile,
459
- var(--letter-spacing-desktop)
460
- );
461
- font-weight: var(
462
- --font-weight-mobile,
463
- var(--font-weight-desktop)
464
- );
465
- font-style: var(
466
- --font-style-mobile,
467
- var(--font-style-desktop)
468
- );
305
+ font-size: var( --accent-l-font-size-mobile );
306
+ line-height: var( --accent-l-line-height-mobile );
307
+ letter-spacing: var( --accent-l-letter-spacing-mobile );
308
+ font-weight: var( --accent-l-font-weight-mobile );
309
+ font-style: var( --accent-l-font-style-mobile );
310
+
311
+ @media (min-width: $screen-desktop) {
312
+ font-size: var( --accent-l-font-size-desktop );
313
+ line-height: var( --accent-l-line-height-desktop );
314
+ letter-spacing: var( --accent-l-letter-spacing-desktop );
315
+ font-weight: var( --accent-l-font-weight-desktop );
316
+ font-style: var( --accent-l-font-style-desktop );
317
+ }
318
+ @media (min-width: $screen-desktop-xl) {
319
+ font-size: var( --accent-l-font-size-desktop-xl );
320
+ line-height: var( --accent-l-line-height-desktop-xl );
321
+ letter-spacing: var( --accent-l-letter-spacing-desktop-xl );
322
+ font-weight: var( --accent-l-font-weight-desktop-xl );
323
+ font-style: var( --accent-l-font-style-desktop-xl );
324
+ }
469
325
  }
470
326
 
471
327
  .lrv-a-font-accent-m {
472
- --font-size-desktop: var( --accent-m-font-size-desktop, var( --accent-m-font-size-mobile ) );
473
- --font-size-mobile: var(--is-desktop) var( --accent-m-font-size-mobile);
474
- --line-height-desktop: var( --accent-m-line-height-desktop, var( --accent-m-line-height-mobile ) );
475
- --line-height-mobile: var(--is-desktop) var( --accent-m-line-height-mobile);
476
- --letter-spacing-desktop: var( --accent-m-letter-spacing-desktop, var( --accent-m-letter-spacing-mobile ) );
477
- --letter-spacing-mobile: var(--is-desktop) var( --accent-m-letter-spacing-mobile);
478
- --font-weight-desktop: var( --accent-m-font-weight-desktop, var( --accent-m-font-weight-mobile ) );
479
- --font-weight-mobile: var(--is-desktop) var( --accent-m-font-weight-mobile);
480
- --font-style-desktop: var( --accent-m-font-style-desktop, var( --accent-m-font-style-mobile ) );
481
- --font-style-mobile: var(--is-desktop) var( --accent-m-font-style-mobile);
482
-
483
328
  // Define this token locally; it can be defined via larva-tokens, if needed in the future.
484
329
  --font-family: var( --font-family-accent );
485
330
 
486
331
  font-family: var( --font-family );
487
-
488
- font-size: var(
489
- --font-size-mobile,
490
- var(--font-size-desktop)
491
- );
492
- line-height: var(
493
- --line-height-mobile,
494
- var(--line-height-desktop)
495
- );
496
- letter-spacing: var(
497
- --letter-spacing-mobile,
498
- var(--letter-spacing-desktop)
499
- );
500
- font-weight: var(
501
- --font-weight-mobile,
502
- var(--font-weight-desktop)
503
- );
504
- font-style: var(
505
- --font-style-mobile,
506
- var(--font-style-desktop)
507
- );
332
+ font-size: var( --accent-m-font-size-mobile );
333
+ line-height: var( --accent-m-line-height-mobile );
334
+ letter-spacing: var( --accent-m-letter-spacing-mobile );
335
+ font-weight: var( --accent-m-font-weight-mobile );
336
+ font-style: var( --accent-m-font-style-mobile );
337
+
338
+ @media (min-width: $screen-desktop) {
339
+ font-size: var( --accent-m-font-size-desktop );
340
+ line-height: var( --accent-m-line-height-desktop );
341
+ letter-spacing: var( --accent-m-letter-spacing-desktop );
342
+ font-weight: var( --accent-m-font-weight-desktop );
343
+ font-style: var( --accent-m-font-style-desktop );
344
+ }
345
+ @media (min-width: $screen-desktop-xl) {
346
+ font-size: var( --accent-m-font-size-desktop-xl );
347
+ line-height: var( --accent-m-line-height-desktop-xl );
348
+ letter-spacing: var( --accent-m-letter-spacing-desktop-xl );
349
+ font-weight: var( --accent-m-font-weight-desktop-xl );
350
+ font-style: var( --accent-m-font-style-desktop-xl );
351
+ }
508
352
  }
509
353
 
510
354
  .lrv-a-font-accent-s {
511
- --font-size-desktop: var( --accent-s-font-size-desktop, var( --accent-s-font-size-mobile ) );
512
- --font-size-mobile: var(--is-desktop) var( --accent-s-font-size-mobile);
513
- --line-height-desktop: var( --accent-s-line-height-desktop, var( --accent-s-line-height-mobile ) );
514
- --line-height-mobile: var(--is-desktop) var( --accent-s-line-height-mobile);
515
- --letter-spacing-desktop: var( --accent-s-letter-spacing-desktop, var( --accent-s-letter-spacing-mobile ) );
516
- --letter-spacing-mobile: var(--is-desktop) var( --accent-s-letter-spacing-mobile);
517
- --font-weight-desktop: var( --accent-s-font-weight-desktop, var( --accent-s-font-weight-mobile ) );
518
- --font-weight-mobile: var(--is-desktop) var( --accent-s-font-weight-mobile);
519
- --font-style-desktop: var( --accent-s-font-style-desktop, var( --accent-s-font-style-mobile ) );
520
- --font-style-mobile: var(--is-desktop) var( --accent-s-font-style-mobile);
521
-
522
355
  // Define this token locally; it can be defined via larva-tokens, if needed in the future.
523
356
  --font-family: var( --font-family-accent );
524
357
 
525
358
  font-family: var( --font-family );
526
-
527
- font-size: var(
528
- --font-size-mobile,
529
- var(--font-size-desktop)
530
- );
531
- line-height: var(
532
- --line-height-mobile,
533
- var(--line-height-desktop)
534
- );
535
- letter-spacing: var(
536
- --letter-spacing-mobile,
537
- var(--letter-spacing-desktop)
538
- );
539
- font-weight: var(
540
- --font-weight-mobile,
541
- var(--font-weight-desktop)
542
- );
543
- font-style: var(
544
- --font-style-mobile,
545
- var(--font-style-desktop)
546
- );
359
+ font-size: var( --accent-s-font-size-mobile );
360
+ line-height: var( --accent-s-line-height-mobile );
361
+ letter-spacing: var( --accent-s-letter-spacing-mobile );
362
+ font-weight: var( --accent-s-font-weight-mobile );
363
+ font-style: var( --accent-s-font-style-mobile );
364
+
365
+ @media (min-width: $screen-desktop) {
366
+ font-size: var( --accent-s-font-size-desktop );
367
+ line-height: var( --accent-s-line-height-desktop );
368
+ letter-spacing: var( --accent-s-letter-spacing-desktop );
369
+ font-weight: var( --accent-s-font-weight-desktop );
370
+ font-style: var( --accent-s-font-style-desktop );
371
+ }
372
+ @media (min-width: $screen-desktop-xl) {
373
+ font-size: var( --accent-s-font-size-desktop-xl );
374
+ line-height: var( --accent-s-line-height-desktop-xl );
375
+ letter-spacing: var( --accent-s-letter-spacing-desktop-xl );
376
+ font-weight: var( --accent-s-font-weight-desktop-xl );
377
+ font-style: var( --accent-s-font-style-desktop-xl );
378
+ }
547
379
  }
548
380
 
549
381
  .lrv-a-font-accent-xs {
550
- --font-size-desktop: var( --accent-xs-font-size-desktop, var( --accent-xs-font-size-mobile ) );
551
- --font-size-mobile: var(--is-desktop) var( --accent-xs-font-size-mobile);
552
- --line-height-desktop: var( --accent-xs-line-height-desktop, var( --accent-xs-line-height-mobile ) );
553
- --line-height-mobile: var(--is-desktop) var( --accent-xs-line-height-mobile);
554
- --letter-spacing-desktop: var( --accent-xs-letter-spacing-desktop, var( --accent-xs-letter-spacing-mobile ) );
555
- --letter-spacing-mobile: var(--is-desktop) var( --accent-xs-letter-spacing-mobile);
556
- --font-weight-desktop: var( --accent-xs-font-weight-desktop, var( --accent-xs-font-weight-mobile ) );
557
- --font-weight-mobile: var(--is-desktop) var( --accent-xs-font-weight-mobile);
558
- --font-style-desktop: var( --accent-xs-font-style-desktop, var( --accent-xs-font-style-mobile ) );
559
- --font-style-mobile: var(--is-desktop) var( --accent-xs-font-style-mobile);
560
-
561
382
  // Define this token locally; it can be defined via larva-tokens, if needed in the future.
562
383
  --font-family: var( --font-family-accent );
563
384
 
564
385
  font-family: var( --font-family );
565
-
566
- font-size: var(
567
- --font-size-mobile,
568
- var(--font-size-desktop)
569
- );
570
- line-height: var(
571
- --line-height-mobile,
572
- var(--line-height-desktop)
573
- );
574
- letter-spacing: var(
575
- --letter-spacing-mobile,
576
- var(--letter-spacing-desktop)
577
- );
578
- font-weight: var(
579
- --font-weight-mobile,
580
- var(--font-weight-desktop)
581
- );
582
- font-style: var(
583
- --font-style-mobile,
584
- var(--font-style-desktop)
585
- );
386
+ font-size: var( --accent-xs-font-size-mobile );
387
+ line-height: var( --accent-xs-line-height-mobile );
388
+ letter-spacing: var( --accent-xs-letter-spacing-mobile );
389
+ font-weight: var( --accent-xs-font-weight-mobile );
390
+ font-style: var( --accent-xs-font-style-mobile );
391
+
392
+ @media (min-width: $screen-desktop) {
393
+ font-size: var( --accent-xs-font-size-desktop );
394
+ line-height: var( --accent-xs-line-height-desktop );
395
+ letter-spacing: var( --accent-xs-letter-spacing-desktop );
396
+ font-weight: var( --accent-xs-font-weight-desktop );
397
+ font-style: var( --accent-xs-font-style-desktop );
398
+ }
399
+ @media (min-width: $screen-desktop-xl) {
400
+ font-size: var( --accent-xs-font-size-desktop-xl );
401
+ line-height: var( --accent-xs-line-height-desktop-xl );
402
+ letter-spacing: var( --accent-xs-letter-spacing-desktop-xl );
403
+ font-weight: var( --accent-xs-font-weight-desktop-xl );
404
+ font-style: var( --accent-xs-font-style-desktop-xl );
405
+ }
586
406
  }
587
407
 
588
408
  .lrv-a-font-accent-xxs {
589
- --font-size-desktop: var( --accent-xxs-font-size-desktop, var( --accent-xxs-font-size-mobile ) );
590
- --font-size-mobile: var(--is-desktop) var( --accent-xxs-font-size-mobile);
591
- --line-height-desktop: var( --accent-xxs-line-height-desktop, var( --accent-xxs-line-height-mobile ) );
592
- --line-height-mobile: var(--is-desktop) var( --accent-xxs-line-height-mobile);
593
- --letter-spacing-desktop: var( --accent-xxs-letter-spacing-desktop, var( --accent-xxs-letter-spacing-mobile ) );
594
- --letter-spacing-mobile: var(--is-desktop) var( --accent-xxs-letter-spacing-mobile);
595
- --font-weight-desktop: var( --accent-xxs-font-weight-desktop, var( --accent-xxs-font-weight-mobile ) );
596
- --font-weight-mobile: var(--is-desktop) var( --accent-xxs-font-weight-mobile);
597
- --font-style-desktop: var( --accent-xxs-font-style-desktop, var( --accent-xxs-font-style-mobile ) );
598
- --font-style-mobile: var(--is-desktop) var( --accent-xxs-font-style-mobile);
599
-
600
409
  // Define this token locally; it can be defined via larva-tokens, if needed in the future.
601
410
  --font-family: var( --font-family-accent );
602
411
 
603
412
  font-family: var( --font-family );
604
-
605
- font-size: var(
606
- --font-size-mobile,
607
- var(--font-size-desktop)
608
- );
609
- line-height: var(
610
- --line-height-mobile,
611
- var(--line-height-desktop)
612
- );
613
- letter-spacing: var(
614
- --letter-spacing-mobile,
615
- var(--letter-spacing-desktop)
616
- );
617
- font-weight: var(
618
- --font-weight-mobile,
619
- var(--font-weight-desktop)
620
- );
621
- font-style: var(
622
- --font-style-mobile,
623
- var(--font-style-desktop)
624
- );
413
+ font-size: var( --accent-xxs-font-size-mobile );
414
+ line-height: var( --accent-xxs-line-height-mobile );
415
+ letter-spacing: var( --accent-xxs-letter-spacing-mobile );
416
+ font-weight: var( --accent-xxs-font-weight-mobile );
417
+ font-style: var( --accent-xxs-font-style-mobile );
418
+
419
+ @media (min-width: $screen-desktop) {
420
+ font-size: var( --accent-xxs-font-size-desktop );
421
+ line-height: var( --accent-xxs-line-height-desktop );
422
+ letter-spacing: var( --accent-xxs-letter-spacing-desktop );
423
+ font-weight: var( --accent-xxs-font-weight-desktop );
424
+ font-style: var( --accent-xxs-font-style-desktop );
425
+ }
426
+ @media (min-width: $screen-desktop-xl) {
427
+ font-size: var( --accent-xxs-font-size-desktop-xl );
428
+ line-height: var( --accent-xxs-line-height-desktop-xl );
429
+ letter-spacing: var( --accent-xxs-letter-spacing-desktop-xl );
430
+ font-weight: var( --accent-xxs-font-weight-desktop-xl );
431
+ font-style: var( --accent-xxs-font-style-desktop-xl );
432
+ }
625
433
  }
626
434
 
627
435
  .lrv-a-font-accent-regular-xxs {
628
- --font-size-desktop: var( --accent-regular-xxs-font-size-desktop, var( --accent-regular-xxs-font-size-mobile ) );
629
- --font-size-mobile: var(--is-desktop) var( --accent-regular-xxs-font-size-mobile);
630
- --line-height-desktop: var( --accent-regular-xxs-line-height-desktop, var( --accent-regular-xxs-line-height-mobile ) );
631
- --line-height-mobile: var(--is-desktop) var( --accent-regular-xxs-line-height-mobile);
632
- --letter-spacing-desktop: var( --accent-regular-xxs-letter-spacing-desktop, var( --accent-regular-xxs-letter-spacing-mobile ) );
633
- --letter-spacing-mobile: var(--is-desktop) var( --accent-regular-xxs-letter-spacing-mobile);
634
- --font-weight-desktop: var( --accent-regular-xxs-font-weight-desktop, var( --accent-regular-xxs-font-weight-mobile ) );
635
- --font-weight-mobile: var(--is-desktop) var( --accent-regular-xxs-font-weight-mobile);
636
- --font-style-desktop: var( --accent-regular-xxs-font-style-desktop, var( --accent-regular-xxs-font-style-mobile ) );
637
- --font-style-mobile: var(--is-desktop) var( --accent-regular-xxs-font-style-mobile);
638
-
639
436
  // Define this token locally; it can be defined via larva-tokens, if needed in the future.
640
437
  --font-family: var( --font-family-accent );
641
438
 
642
439
  font-family: var( --font-family );
643
-
644
- font-size: var(
645
- --font-size-mobile,
646
- var(--font-size-desktop)
647
- );
648
- line-height: var(
649
- --line-height-mobile,
650
- var(--line-height-desktop)
651
- );
652
- letter-spacing: var(
653
- --letter-spacing-mobile,
654
- var(--letter-spacing-desktop)
655
- );
656
- font-weight: var(
657
- --font-weight-mobile,
658
- var(--font-weight-desktop)
659
- );
660
- font-style: var(
661
- --font-style-mobile,
662
- var(--font-style-desktop)
663
- );
440
+ font-size: var( --accent-regular-xxs-font-size-mobile );
441
+ line-height: var( --accent-regular-xxs-line-height-mobile );
442
+ letter-spacing: var( --accent-regular-xxs-letter-spacing-mobile );
443
+ font-weight: var( --accent-regular-xxs-font-weight-mobile );
444
+ font-style: var( --accent-regular-xxs-font-style-mobile );
445
+
446
+ @media (min-width: $screen-desktop) {
447
+ font-size: var( --accent-regular-xxs-font-size-desktop );
448
+ line-height: var( --accent-regular-xxs-line-height-desktop );
449
+ letter-spacing: var( --accent-regular-xxs-letter-spacing-desktop );
450
+ font-weight: var( --accent-regular-xxs-font-weight-desktop );
451
+ font-style: var( --accent-regular-xxs-font-style-desktop );
452
+ }
453
+ @media (min-width: $screen-desktop-xl) {
454
+ font-size: var( --accent-regular-xxs-font-size-desktop-xl );
455
+ line-height: var( --accent-regular-xxs-line-height-desktop-xl );
456
+ letter-spacing: var( --accent-regular-xxs-letter-spacing-desktop-xl );
457
+ font-weight: var( --accent-regular-xxs-font-weight-desktop-xl );
458
+ font-style: var( --accent-regular-xxs-font-style-desktop-xl );
459
+ }
664
460
  }
665
461
 
666
462
  .lrv-a-font-body-m {
667
- --font-size-desktop: var( --body-m-font-size-desktop, var( --body-m-font-size-mobile ) );
668
- --font-size-mobile: var(--is-desktop) var( --body-m-font-size-mobile);
669
- --line-height-desktop: var( --body-m-line-height-desktop, var( --body-m-line-height-mobile ) );
670
- --line-height-mobile: var(--is-desktop) var( --body-m-line-height-mobile);
671
- --letter-spacing-desktop: var( --body-m-letter-spacing-desktop, var( --body-m-letter-spacing-mobile ) );
672
- --letter-spacing-mobile: var(--is-desktop) var( --body-m-letter-spacing-mobile);
673
- --font-weight-desktop: var( --body-m-font-weight-desktop, var( --body-m-font-weight-mobile ) );
674
- --font-weight-mobile: var(--is-desktop) var( --body-m-font-weight-mobile);
675
- --font-style-desktop: var( --body-m-font-style-desktop, var( --body-m-font-style-mobile ) );
676
- --font-style-mobile: var(--is-desktop) var( --body-m-font-style-mobile);
677
-
678
463
  // Define this token locally; it can be defined via larva-tokens, if needed in the future.
679
464
  --font-family: var( --font-family-body );
680
465
 
681
466
  font-family: var( --font-family );
682
-
683
- font-size: var(
684
- --font-size-mobile,
685
- var(--font-size-desktop)
686
- );
687
- line-height: var(
688
- --line-height-mobile,
689
- var(--line-height-desktop)
690
- );
691
- letter-spacing: var(
692
- --letter-spacing-mobile,
693
- var(--letter-spacing-desktop)
694
- );
695
- font-weight: var(
696
- --font-weight-mobile,
697
- var(--font-weight-desktop)
698
- );
699
- font-style: var(
700
- --font-style-mobile,
701
- var(--font-style-desktop)
702
- );
467
+ font-size: var( --body-m-font-size-mobile );
468
+ line-height: var( --body-m-line-height-mobile );
469
+ letter-spacing: var( --body-m-letter-spacing-mobile );
470
+ font-weight: var( --body-m-font-weight-mobile );
471
+ font-style: var( --body-m-font-style-mobile );
472
+
473
+ @media (min-width: $screen-desktop) {
474
+ font-size: var( --body-m-font-size-desktop );
475
+ line-height: var( --body-m-line-height-desktop );
476
+ letter-spacing: var( --body-m-letter-spacing-desktop );
477
+ font-weight: var( --body-m-font-weight-desktop );
478
+ font-style: var( --body-m-font-style-desktop );
479
+ }
480
+ @media (min-width: $screen-desktop-xl) {
481
+ font-size: var( --body-m-font-size-desktop-xl );
482
+ line-height: var( --body-m-line-height-desktop-xl );
483
+ letter-spacing: var( --body-m-letter-spacing-desktop-xl );
484
+ font-weight: var( --body-m-font-weight-desktop-xl );
485
+ font-style: var( --body-m-font-style-desktop-xl );
486
+ }
703
487
  }
704
488
 
705
489
  .lrv-a-font-body-s {
706
- --font-size-desktop: var( --body-s-font-size-desktop, var( --body-s-font-size-mobile ) );
707
- --font-size-mobile: var(--is-desktop) var( --body-s-font-size-mobile);
708
- --line-height-desktop: var( --body-s-line-height-desktop, var( --body-s-line-height-mobile ) );
709
- --line-height-mobile: var(--is-desktop) var( --body-s-line-height-mobile);
710
- --letter-spacing-desktop: var( --body-s-letter-spacing-desktop, var( --body-s-letter-spacing-mobile ) );
711
- --letter-spacing-mobile: var(--is-desktop) var( --body-s-letter-spacing-mobile);
712
- --font-weight-desktop: var( --body-s-font-weight-desktop, var( --body-s-font-weight-mobile ) );
713
- --font-weight-mobile: var(--is-desktop) var( --body-s-font-weight-mobile);
714
- --font-style-desktop: var( --body-s-font-style-desktop, var( --body-s-font-style-mobile ) );
715
- --font-style-mobile: var(--is-desktop) var( --body-s-font-style-mobile);
716
-
717
490
  // Define this token locally; it can be defined via larva-tokens, if needed in the future.
718
491
  --font-family: var( --font-family-body );
719
492
 
720
493
  font-family: var( --font-family );
721
-
722
- font-size: var(
723
- --font-size-mobile,
724
- var(--font-size-desktop)
725
- );
726
- line-height: var(
727
- --line-height-mobile,
728
- var(--line-height-desktop)
729
- );
730
- letter-spacing: var(
731
- --letter-spacing-mobile,
732
- var(--letter-spacing-desktop)
733
- );
734
- font-weight: var(
735
- --font-weight-mobile,
736
- var(--font-weight-desktop)
737
- );
738
- font-style: var(
739
- --font-style-mobile,
740
- var(--font-style-desktop)
741
- );
494
+ font-size: var( --body-s-font-size-mobile );
495
+ line-height: var( --body-s-line-height-mobile );
496
+ letter-spacing: var( --body-s-letter-spacing-mobile );
497
+ font-weight: var( --body-s-font-weight-mobile );
498
+ font-style: var( --body-s-font-style-mobile );
499
+
500
+ @media (min-width: $screen-desktop) {
501
+ font-size: var( --body-s-font-size-desktop );
502
+ line-height: var( --body-s-line-height-desktop );
503
+ letter-spacing: var( --body-s-letter-spacing-desktop );
504
+ font-weight: var( --body-s-font-weight-desktop );
505
+ font-style: var( --body-s-font-style-desktop );
506
+ }
507
+ @media (min-width: $screen-desktop-xl) {
508
+ font-size: var( --body-s-font-size-desktop-xl );
509
+ line-height: var( --body-s-line-height-desktop-xl );
510
+ letter-spacing: var( --body-s-letter-spacing-desktop-xl );
511
+ font-weight: var( --body-s-font-weight-desktop-xl );
512
+ font-style: var( --body-s-font-style-desktop-xl );
513
+ }
742
514
  }