@penskemediacorp/larva-css 1.8.0-alpha.0 → 1.8.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 (120) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +199 -22
  3. package/__tests__/fixtures/expected.js +29 -0
  4. package/__tests__/lib/generators.test.js +11 -0
  5. package/build/css/algorithms.common.async.css +4 -0
  6. package/build/css/algorithms.common.inline.css +21 -0
  7. package/build/css/generic.common.inline.css +4 -0
  8. package/build/css/js.common.async.css +3 -0
  9. package/build/css/js.common.inline.css +6 -0
  10. package/build/css/utilities.common.async.css +8 -0
  11. package/build/css/utilities.common.inline.css +29 -0
  12. package/gulpfile.js +110 -82
  13. package/lib/generators.js +93 -0
  14. package/package.json +14 -6
  15. package/src/01-generic/elements.common.inline.scss +33 -1
  16. package/src/01-generic/forms.common.inline.scss +10 -0
  17. package/src/01-generic/side-skins.common.inline.scss +10 -0
  18. package/src/01-generic/typography.common.inline.scss +23 -15
  19. package/src/02-algorithms/a-buy-now/a-buy-now.common.inline.scss +112 -0
  20. package/src/02-algorithms/a-carousel-grid/a-carousel-grid.common.inline.scss +66 -0
  21. package/src/02-algorithms/a-children-border/a-children-border.common.inline.scss +43 -0
  22. package/src/02-algorithms/a-children-link-color/a-children-link-color.common.inline.scss +15 -0
  23. package/src/02-algorithms/a-children-link-decoration/a-children-link-decoration.common.inline.scss +13 -0
  24. package/src/02-algorithms/a-counter/a-counter.common.inline.scss +26 -0
  25. package/src/02-algorithms/a-crop/README.md +17 -13
  26. package/src/02-algorithms/a-crop/a-crop.common.inline.scss +96 -12
  27. package/src/02-algorithms/a-crop/a-crop.html +2 -2
  28. package/src/02-algorithms/a-floated/a-floated.common.inline.scss +32 -0
  29. package/src/02-algorithms/a-font/a-font.common.inline.scss +3 -0
  30. package/src/02-algorithms/a-glue/a-glue.common.inline.scss +63 -6
  31. package/src/02-algorithms/a-glue/a-glue.html +2 -2
  32. package/src/02-algorithms/a-grid/README.md +141 -14
  33. package/src/02-algorithms/a-grid/a-grid.common.inline.scss +53 -5
  34. package/src/02-algorithms/a-grid/a-grid.html +4 -4
  35. package/src/02-algorithms/a-hidden/a-hidden.common.inline.scss +43 -0
  36. package/src/02-algorithms/a-hover-dropup/a-hover-dropup.common.async.scss +7 -7
  37. package/src/02-algorithms/a-hover-dropup/a-hover-dropup.html +3 -3
  38. package/src/02-algorithms/a-hover-effect/a-hover-effect.common.async.scss +25 -0
  39. package/src/02-algorithms/a-hover-effect/a-hover-effect.html +16 -0
  40. package/src/02-algorithms/a-icon/a-icon.common.async.scss +28 -3
  41. package/src/02-algorithms/a-icon/a-icon.common.inline.scss +51 -73
  42. package/src/02-algorithms/a-screen-reader-only/a-screen-reader-only.common.inline.scss +30 -0
  43. package/src/02-algorithms/a-scrollable-grid/a-scrollable-grid.common.inline.scss +52 -0
  44. package/src/02-algorithms/a-show-on-hover/a-show-on-hover.common.inline.scss +16 -0
  45. package/src/02-algorithms/a-space-children/a-space-children.common.inline.scss +88 -17
  46. package/src/02-algorithms/a-truncate-ellipsis/a-truncate-ellipsis.common.async.scss +71 -0
  47. package/src/02-algorithms/a-unstyle-button/a-unstyle-button.common.inline.scss +2 -3
  48. package/src/02-algorithms/a-unstyle-link/a-unstyle-link.common.inline.scss +7 -0
  49. package/src/02-algorithms/a-unstyle-list/a-unstyle-list.common.inline.scss +1 -1
  50. package/src/02-algorithms/a-wrapper/a-wrapper.common.inline.scss +14 -2
  51. package/src/03-utilities/u-background-color.common.async.scss +15 -0
  52. package/src/03-utilities/u-background-color.common.inline.scss +37 -0
  53. package/src/03-utilities/u-border-color.common.async.scss +36 -8
  54. package/src/03-utilities/u-border-radius.common.async.scss +26 -2
  55. package/src/03-utilities/u-border.common.inline.scss +215 -4
  56. package/src/03-utilities/u-box-alignment.common.inline.scss +64 -4
  57. package/src/03-utilities/u-box-shadow.common.async.scss +34 -3
  58. package/src/03-utilities/u-color.common.async.scss +19 -21
  59. package/src/03-utilities/u-color.common.inline.scss +39 -0
  60. package/src/03-utilities/u-cursor.common.async.scss +1 -1
  61. package/src/03-utilities/u-display.common.inline.scss +87 -4
  62. package/src/03-utilities/u-filter.common.async.scss +5 -0
  63. package/src/03-utilities/u-flex.common.inline.scss +151 -9
  64. package/src/03-utilities/u-font-family.common.inline.scss +41 -17
  65. package/src/03-utilities/u-font-size.common.inline.scss +58 -5
  66. package/src/03-utilities/u-font-style.common.inline.scss +9 -0
  67. package/src/03-utilities/u-font-weight.common.inline.scss +50 -12
  68. package/src/03-utilities/u-height.common.inline.scss +38 -8
  69. package/src/03-utilities/u-left.common.inline.scss +7 -0
  70. package/src/03-utilities/u-letter-spacing.common.inline.scss +11 -0
  71. package/src/03-utilities/u-line-height.common.inline.scss +49 -13
  72. package/src/03-utilities/u-list-style.common.async.scss +3 -0
  73. package/src/03-utilities/u-margin.common.inline.scss +182 -47
  74. package/src/03-utilities/u-max-width.common.inline.scss +25 -0
  75. package/src/03-utilities/u-opacity.common.inline.scss +3 -0
  76. package/src/03-utilities/u-order.common.inline.scss +29 -2
  77. package/src/03-utilities/u-overflow.common.inline.scss +14 -2
  78. package/src/03-utilities/u-padding.common.inline.scss +157 -52
  79. package/src/03-utilities/u-position.common.inline.scss +11 -0
  80. package/src/03-utilities/u-text-align.common.inline.scss +27 -4
  81. package/src/03-utilities/u-text-decoration.common.inline.scss +11 -0
  82. package/src/03-utilities/u-text-transform.common.inline.scss +14 -2
  83. package/src/03-utilities/u-top.common.inline.scss +7 -0
  84. package/src/03-utilities/u-transform.common.inline.scss +12 -0
  85. package/src/03-utilities/u-vertical-align.common.inline.scss +7 -0
  86. package/src/03-utilities/u-whitespace.common.inline.scss +1 -1
  87. package/src/03-utilities/u-width.common.inline.scss +198 -12
  88. package/src/04-js/README.md +5 -0
  89. package/src/04-js/js-Collapsible.common.inline.scss +15 -0
  90. package/src/04-js/js-ExpandableSearch.common.async.scss +33 -0
  91. package/src/04-js/js-Flickity.common.async.scss +91 -0
  92. package/src/04-js/js-Header.common.inline.scss +73 -0
  93. package/src/04-js/js-MegaMenu.common.inline.scss +50 -0
  94. package/src/04-js/js-MobileHeightToggle.common.inline.scss +7 -5
  95. package/src/04-js/js-PopOver.common.async.scss +13 -0
  96. package/src/04-js/js-Tooltip.common.inline.scss +17 -0
  97. package/src/04-js/js-VideoShowcase.common.inline.scss +33 -0
  98. package/src/04-js/partials/expandable-search.scss +202 -0
  99. package/src/04-js/partials/flickity.scss +149 -0
  100. package/src/_generated/_a-font.scss +1027 -0
  101. package/src/larva-ui/prism.scss +127 -0
  102. package/src/setup.scss +7 -0
  103. package/stylelint.config.js +10 -11
  104. package/build/css/algorithms.common.async.scss +0 -36
  105. package/build/css/algorithms.common.inline.scss +0 -274
  106. package/build/css/generic.common.inline.scss +0 -66
  107. package/build/css/js.common.inline.scss +0 -9
  108. package/build/css/utilities.common.async.scss +0 -57
  109. package/build/css/utilities.common.inline.scss +0 -473
  110. package/holding/a-truncate-children/README.md +0 -3
  111. package/holding/a-truncate-children/a-truncate-children.browser-test.js +0 -104
  112. package/holding/a-truncate-children/a-truncate-children.css +0 -4
  113. package/holding/a-truncate-children/a-truncate-children.html +0 -15
  114. package/holding/a-truncate-children/a-truncate-children.scss +0 -5
  115. package/src/01-generic/config.common.inline.scss +0 -18
  116. package/src/02-algorithms/.DS_Store +0 -0
  117. package/src/02-algorithms/a-glue/index.js +0 -1
  118. package/src/02-algorithms/a-icon/a-icon.html +0 -20
  119. package/src/02-algorithms/a-unstyle-link/a-unstyle-link.common.async.scss +0 -5
  120. package/src/03-utilities/u-background.common.async.scss +0 -28
package/src/_generated/_a-font.scss ADDED
@@ -0,0 +1,1027 @@
1
+ // Generated css from larva-tokens/lib/generators.js
2
+
3
+ .lrv-a-font-primary-xxl {
4
+ // Define this token locally; it can be defined via larva-tokens, if needed in the future.
5
+ --font-family: var( --font-family-primary );
6
+
7
+ font-family: var( --font-family );
8
+ font-size: var( --primary-xxl-font-size-mobile );
9
+ line-height: var( --primary-xxl-line-height-mobile );
10
+ letter-spacing: var( --primary-xxl-letter-spacing-mobile );
11
+ font-weight: var( --primary-xxl-font-weight-mobile );
12
+ font-style: var( --primary-xxl-font-style-mobile );
13
+
14
+ @media (min-width: $screen-desktop) {
15
+ font-size: var( --primary-xxl-font-size-desktop );
16
+ line-height: var( --primary-xxl-line-height-desktop );
17
+ letter-spacing: var( --primary-xxl-letter-spacing-desktop );
18
+ font-weight: var( --primary-xxl-font-weight-desktop );
19
+ font-style: var( --primary-xxl-font-style-desktop );
20
+ }
21
+ @media (min-width: $screen-desktop-xl) {
22
+ font-size: var( --primary-xxl-font-size-desktop-xl );
23
+ line-height: var( --primary-xxl-line-height-desktop-xl );
24
+ letter-spacing: var( --primary-xxl-letter-spacing-desktop-xl );
25
+ font-weight: var( --primary-xxl-font-weight-desktop-xl );
26
+ font-style: var( --primary-xxl-font-style-desktop-xl );
27
+ }
28
+ }
29
+
30
+ .lrv-a-font-primary-xl {
31
+ // Define this token locally; it can be defined via larva-tokens, if needed in the future.
32
+ --font-family: var( --font-family-primary );
33
+
34
+ font-family: var( --font-family );
35
+ font-size: var( --primary-xl-font-size-mobile );
36
+ line-height: var( --primary-xl-line-height-mobile );
37
+ letter-spacing: var( --primary-xl-letter-spacing-mobile );
38
+ font-weight: var( --primary-xl-font-weight-mobile );
39
+ font-style: var( --primary-xl-font-style-mobile );
40
+
41
+ @media (min-width: $screen-desktop) {
42
+ font-size: var( --primary-xl-font-size-desktop );
43
+ line-height: var( --primary-xl-line-height-desktop );
44
+ letter-spacing: var( --primary-xl-letter-spacing-desktop );
45
+ font-weight: var( --primary-xl-font-weight-desktop );
46
+ font-style: var( --primary-xl-font-style-desktop );
47
+ }
48
+ @media (min-width: $screen-desktop-xl) {
49
+ font-size: var( --primary-xl-font-size-desktop-xl );
50
+ line-height: var( --primary-xl-line-height-desktop-xl );
51
+ letter-spacing: var( --primary-xl-letter-spacing-desktop-xl );
52
+ font-weight: var( --primary-xl-font-weight-desktop-xl );
53
+ font-style: var( --primary-xl-font-style-desktop-xl );
54
+ }
55
+ }
56
+
57
+ .lrv-a-font-primary-l {
58
+ // Define this token locally; it can be defined via larva-tokens, if needed in the future.
59
+ --font-family: var( --font-family-primary );
60
+
61
+ font-family: var( --font-family );
62
+ font-size: var( --primary-l-font-size-mobile );
63
+ line-height: var( --primary-l-line-height-mobile );
64
+ letter-spacing: var( --primary-l-letter-spacing-mobile );
65
+ font-weight: var( --primary-l-font-weight-mobile );
66
+ font-style: var( --primary-l-font-style-mobile );
67
+
68
+ @media (min-width: $screen-desktop) {
69
+ font-size: var( --primary-l-font-size-desktop );
70
+ line-height: var( --primary-l-line-height-desktop );
71
+ letter-spacing: var( --primary-l-letter-spacing-desktop );
72
+ font-weight: var( --primary-l-font-weight-desktop );
73
+ font-style: var( --primary-l-font-style-desktop );
74
+ }
75
+ @media (min-width: $screen-desktop-xl) {
76
+ font-size: var( --primary-l-font-size-desktop-xl );
77
+ line-height: var( --primary-l-line-height-desktop-xl );
78
+ letter-spacing: var( --primary-l-letter-spacing-desktop-xl );
79
+ font-weight: var( --primary-l-font-weight-desktop-xl );
80
+ font-style: var( --primary-l-font-style-desktop-xl );
81
+ }
82
+ }
83
+
84
+ .lrv-a-font-primary-m {
85
+ // Define this token locally; it can be defined via larva-tokens, if needed in the future.
86
+ --font-family: var( --font-family-primary );
87
+
88
+ font-family: var( --font-family );
89
+ font-size: var( --primary-m-font-size-mobile );
90
+ line-height: var( --primary-m-line-height-mobile );
91
+ letter-spacing: var( --primary-m-letter-spacing-mobile );
92
+ font-weight: var( --primary-m-font-weight-mobile );
93
+ font-style: var( --primary-m-font-style-mobile );
94
+
95
+ @media (min-width: $screen-desktop) {
96
+ font-size: var( --primary-m-font-size-desktop );
97
+ line-height: var( --primary-m-line-height-desktop );
98
+ letter-spacing: var( --primary-m-letter-spacing-desktop );
99
+ font-weight: var( --primary-m-font-weight-desktop );
100
+ font-style: var( --primary-m-font-style-desktop );
101
+ }
102
+ @media (min-width: $screen-desktop-xl) {
103
+ font-size: var( --primary-m-font-size-desktop-xl );
104
+ line-height: var( --primary-m-line-height-desktop-xl );
105
+ letter-spacing: var( --primary-m-letter-spacing-desktop-xl );
106
+ font-weight: var( --primary-m-font-weight-desktop-xl );
107
+ font-style: var( --primary-m-font-style-desktop-xl );
108
+ }
109
+ }
110
+
111
+ .lrv-a-font-primary-s {
112
+ // Define this token locally; it can be defined via larva-tokens, if needed in the future.
113
+ --font-family: var( --font-family-primary );
114
+
115
+ font-family: var( --font-family );
116
+ font-size: var( --primary-s-font-size-mobile );
117
+ line-height: var( --primary-s-line-height-mobile );
118
+ letter-spacing: var( --primary-s-letter-spacing-mobile );
119
+ font-weight: var( --primary-s-font-weight-mobile );
120
+ font-style: var( --primary-s-font-style-mobile );
121
+
122
+ @media (min-width: $screen-desktop) {
123
+ font-size: var( --primary-s-font-size-desktop );
124
+ line-height: var( --primary-s-line-height-desktop );
125
+ letter-spacing: var( --primary-s-letter-spacing-desktop );
126
+ font-weight: var( --primary-s-font-weight-desktop );
127
+ font-style: var( --primary-s-font-style-desktop );
128
+ }
129
+ @media (min-width: $screen-desktop-xl) {
130
+ font-size: var( --primary-s-font-size-desktop-xl );
131
+ line-height: var( --primary-s-line-height-desktop-xl );
132
+ letter-spacing: var( --primary-s-letter-spacing-desktop-xl );
133
+ font-weight: var( --primary-s-font-weight-desktop-xl );
134
+ font-style: var( --primary-s-font-style-desktop-xl );
135
+ }
136
+ }
137
+
138
+ .lrv-a-font-primary-xs {
139
+ // Define this token locally; it can be defined via larva-tokens, if needed in the future.
140
+ --font-family: var( --font-family-primary );
141
+
142
+ font-family: var( --font-family );
143
+ font-size: var( --primary-xs-font-size-mobile );
144
+ line-height: var( --primary-xs-line-height-mobile );
145
+ letter-spacing: var( --primary-xs-letter-spacing-mobile );
146
+ font-weight: var( --primary-xs-font-weight-mobile );
147
+ font-style: var( --primary-xs-font-style-mobile );
148
+
149
+ @media (min-width: $screen-desktop) {
150
+ font-size: var( --primary-xs-font-size-desktop );
151
+ line-height: var( --primary-xs-line-height-desktop );
152
+ letter-spacing: var( --primary-xs-letter-spacing-desktop );
153
+ font-weight: var( --primary-xs-font-weight-desktop );
154
+ font-style: var( --primary-xs-font-style-desktop );
155
+ }
156
+ @media (min-width: $screen-desktop-xl) {
157
+ font-size: var( --primary-xs-font-size-desktop-xl );
158
+ line-height: var( --primary-xs-line-height-desktop-xl );
159
+ letter-spacing: var( --primary-xs-letter-spacing-desktop-xl );
160
+ font-weight: var( --primary-xs-font-weight-desktop-xl );
161
+ font-style: var( --primary-xs-font-style-desktop-xl );
162
+ }
163
+ }
164
+
165
+ .lrv-a-font-primary-xxs {
166
+ // Define this token locally; it can be defined via larva-tokens, if needed in the future.
167
+ --font-family: var( --font-family-primary );
168
+
169
+ font-family: var( --font-family );
170
+ font-size: var( --primary-xxs-font-size-mobile );
171
+ line-height: var( --primary-xxs-line-height-mobile );
172
+ letter-spacing: var( --primary-xxs-letter-spacing-mobile );
173
+ font-weight: var( --primary-xxs-font-weight-mobile );
174
+ font-style: var( --primary-xxs-font-style-mobile );
175
+
176
+ @media (min-width: $screen-desktop) {
177
+ font-size: var( --primary-xxs-font-size-desktop );
178
+ line-height: var( --primary-xxs-line-height-desktop );
179
+ letter-spacing: var( --primary-xxs-letter-spacing-desktop );
180
+ font-weight: var( --primary-xxs-font-weight-desktop );
181
+ font-style: var( --primary-xxs-font-style-desktop );
182
+ }
183
+ @media (min-width: $screen-desktop-xl) {
184
+ font-size: var( --primary-xxs-font-size-desktop-xl );
185
+ line-height: var( --primary-xxs-line-height-desktop-xl );
186
+ letter-spacing: var( --primary-xxs-letter-spacing-desktop-xl );
187
+ font-weight: var( --primary-xxs-font-weight-desktop-xl );
188
+ font-style: var( --primary-xxs-font-style-desktop-xl );
189
+ }
190
+ }
191
+
192
+ .lrv-a-font-primary-xxxs {
193
+ // Define this token locally; it can be defined via larva-tokens, if needed in the future.
194
+ --font-family: var( --font-family-primary );
195
+
196
+ font-family: var( --font-family );
197
+ font-size: var( --primary-xxxs-font-size-mobile );
198
+ line-height: var( --primary-xxxs-line-height-mobile );
199
+ letter-spacing: var( --primary-xxxs-letter-spacing-mobile );
200
+ font-weight: var( --primary-xxxs-font-weight-mobile );
201
+ font-style: var( --primary-xxxs-font-style-mobile );
202
+
203
+ @media (min-width: $screen-desktop) {
204
+ font-size: var( --primary-xxxs-font-size-desktop );
205
+ line-height: var( --primary-xxxs-line-height-desktop );
206
+ letter-spacing: var( --primary-xxxs-letter-spacing-desktop );
207
+ font-weight: var( --primary-xxxs-font-weight-desktop );
208
+ font-style: var( --primary-xxxs-font-style-desktop );
209
+ }
210
+ @media (min-width: $screen-desktop-xl) {
211
+ font-size: var( --primary-xxxs-font-size-desktop-xl );
212
+ line-height: var( --primary-xxxs-line-height-desktop-xl );
213
+ letter-spacing: var( --primary-xxxs-letter-spacing-desktop-xl );
214
+ font-weight: var( --primary-xxxs-font-weight-desktop-xl );
215
+ font-style: var( --primary-xxxs-font-style-desktop-xl );
216
+ }
217
+ }
218
+
219
+ .lrv-a-font-secondary-xxl {
220
+ // Define this token locally; it can be defined via larva-tokens, if needed in the future.
221
+ --font-family: var( --font-family-secondary );
222
+
223
+ font-family: var( --font-family );
224
+ font-size: var( --secondary-xxl-font-size-mobile );
225
+ line-height: var( --secondary-xxl-line-height-mobile );
226
+ letter-spacing: var( --secondary-xxl-letter-spacing-mobile );
227
+ font-weight: var( --secondary-xxl-font-weight-mobile );
228
+ font-style: var( --secondary-xxl-font-style-mobile );
229
+
230
+ @media (min-width: $screen-desktop) {
231
+ font-size: var( --secondary-xxl-font-size-desktop );
232
+ line-height: var( --secondary-xxl-line-height-desktop );
233
+ letter-spacing: var( --secondary-xxl-letter-spacing-desktop );
234
+ font-weight: var( --secondary-xxl-font-weight-desktop );
235
+ font-style: var( --secondary-xxl-font-style-desktop );
236
+ }
237
+ @media (min-width: $screen-desktop-xl) {
238
+ font-size: var( --secondary-xxl-font-size-desktop-xl );
239
+ line-height: var( --secondary-xxl-line-height-desktop-xl );
240
+ letter-spacing: var( --secondary-xxl-letter-spacing-desktop-xl );
241
+ font-weight: var( --secondary-xxl-font-weight-desktop-xl );
242
+ font-style: var( --secondary-xxl-font-style-desktop-xl );
243
+ }
244
+ }
245
+
246
+ .lrv-a-font-secondary-xl {
247
+ // Define this token locally; it can be defined via larva-tokens, if needed in the future.
248
+ --font-family: var( --font-family-secondary );
249
+
250
+ font-family: var( --font-family );
251
+ font-size: var( --secondary-xl-font-size-mobile );
252
+ line-height: var( --secondary-xl-line-height-mobile );
253
+ letter-spacing: var( --secondary-xl-letter-spacing-mobile );
254
+ font-weight: var( --secondary-xl-font-weight-mobile );
255
+ font-style: var( --secondary-xl-font-style-mobile );
256
+
257
+ @media (min-width: $screen-desktop) {
258
+ font-size: var( --secondary-xl-font-size-desktop );
259
+ line-height: var( --secondary-xl-line-height-desktop );
260
+ letter-spacing: var( --secondary-xl-letter-spacing-desktop );
261
+ font-weight: var( --secondary-xl-font-weight-desktop );
262
+ font-style: var( --secondary-xl-font-style-desktop );
263
+ }
264
+ @media (min-width: $screen-desktop-xl) {
265
+ font-size: var( --secondary-xl-font-size-desktop-xl );
266
+ line-height: var( --secondary-xl-line-height-desktop-xl );
267
+ letter-spacing: var( --secondary-xl-letter-spacing-desktop-xl );
268
+ font-weight: var( --secondary-xl-font-weight-desktop-xl );
269
+ font-style: var( --secondary-xl-font-style-desktop-xl );
270
+ }
271
+ }
272
+
273
+ .lrv-a-font-secondary-l {
274
+ // Define this token locally; it can be defined via larva-tokens, if needed in the future.
275
+ --font-family: var( --font-family-secondary );
276
+
277
+ font-family: var( --font-family );
278
+ font-size: var( --secondary-l-font-size-mobile );
279
+ line-height: var( --secondary-l-line-height-mobile );
280
+ letter-spacing: var( --secondary-l-letter-spacing-mobile );
281
+ font-weight: var( --secondary-l-font-weight-mobile );
282
+ font-style: var( --secondary-l-font-style-mobile );
283
+
284
+ @media (min-width: $screen-desktop) {
285
+ font-size: var( --secondary-l-font-size-desktop );
286
+ line-height: var( --secondary-l-line-height-desktop );
287
+ letter-spacing: var( --secondary-l-letter-spacing-desktop );
288
+ font-weight: var( --secondary-l-font-weight-desktop );
289
+ font-style: var( --secondary-l-font-style-desktop );
290
+ }
291
+ @media (min-width: $screen-desktop-xl) {
292
+ font-size: var( --secondary-l-font-size-desktop-xl );
293
+ line-height: var( --secondary-l-line-height-desktop-xl );
294
+ letter-spacing: var( --secondary-l-letter-spacing-desktop-xl );
295
+ font-weight: var( --secondary-l-font-weight-desktop-xl );
296
+ font-style: var( --secondary-l-font-style-desktop-xl );
297
+ }
298
+ }
299
+
300
+ .lrv-a-font-secondary-m {
301
+ // Define this token locally; it can be defined via larva-tokens, if needed in the future.
302
+ --font-family: var( --font-family-secondary );
303
+
304
+ font-family: var( --font-family );
305
+ font-size: var( --secondary-m-font-size-mobile );
306
+ line-height: var( --secondary-m-line-height-mobile );
307
+ letter-spacing: var( --secondary-m-letter-spacing-mobile );
308
+ font-weight: var( --secondary-m-font-weight-mobile );
309
+ font-style: var( --secondary-m-font-style-mobile );
310
+
311
+ @media (min-width: $screen-desktop) {
312
+ font-size: var( --secondary-m-font-size-desktop );
313
+ line-height: var( --secondary-m-line-height-desktop );
314
+ letter-spacing: var( --secondary-m-letter-spacing-desktop );
315
+ font-weight: var( --secondary-m-font-weight-desktop );
316
+ font-style: var( --secondary-m-font-style-desktop );
317
+ }
318
+ @media (min-width: $screen-desktop-xl) {
319
+ font-size: var( --secondary-m-font-size-desktop-xl );
320
+ line-height: var( --secondary-m-line-height-desktop-xl );
321
+ letter-spacing: var( --secondary-m-letter-spacing-desktop-xl );
322
+ font-weight: var( --secondary-m-font-weight-desktop-xl );
323
+ font-style: var( --secondary-m-font-style-desktop-xl );
324
+ }
325
+ }
326
+
327
+ .lrv-a-font-secondary-s {
328
+ // Define this token locally; it can be defined via larva-tokens, if needed in the future.
329
+ --font-family: var( --font-family-secondary );
330
+
331
+ font-family: var( --font-family );
332
+ font-size: var( --secondary-s-font-size-mobile );
333
+ line-height: var( --secondary-s-line-height-mobile );
334
+ letter-spacing: var( --secondary-s-letter-spacing-mobile );
335
+ font-weight: var( --secondary-s-font-weight-mobile );
336
+ font-style: var( --secondary-s-font-style-mobile );
337
+
338
+ @media (min-width: $screen-desktop) {
339
+ font-size: var( --secondary-s-font-size-desktop );
340
+ line-height: var( --secondary-s-line-height-desktop );
341
+ letter-spacing: var( --secondary-s-letter-spacing-desktop );
342
+ font-weight: var( --secondary-s-font-weight-desktop );
343
+ font-style: var( --secondary-s-font-style-desktop );
344
+ }
345
+ @media (min-width: $screen-desktop-xl) {
346
+ font-size: var( --secondary-s-font-size-desktop-xl );
347
+ line-height: var( --secondary-s-line-height-desktop-xl );
348
+ letter-spacing: var( --secondary-s-letter-spacing-desktop-xl );
349
+ font-weight: var( --secondary-s-font-weight-desktop-xl );
350
+ font-style: var( --secondary-s-font-style-desktop-xl );
351
+ }
352
+ }
353
+
354
+ .lrv-a-font-secondary-xs {
355
+ // Define this token locally; it can be defined via larva-tokens, if needed in the future.
356
+ --font-family: var( --font-family-secondary );
357
+
358
+ font-family: var( --font-family );
359
+ font-size: var( --secondary-xs-font-size-mobile );
360
+ line-height: var( --secondary-xs-line-height-mobile );
361
+ letter-spacing: var( --secondary-xs-letter-spacing-mobile );
362
+ font-weight: var( --secondary-xs-font-weight-mobile );
363
+ font-style: var( --secondary-xs-font-style-mobile );
364
+
365
+ @media (min-width: $screen-desktop) {
366
+ font-size: var( --secondary-xs-font-size-desktop );
367
+ line-height: var( --secondary-xs-line-height-desktop );
368
+ letter-spacing: var( --secondary-xs-letter-spacing-desktop );
369
+ font-weight: var( --secondary-xs-font-weight-desktop );
370
+ font-style: var( --secondary-xs-font-style-desktop );
371
+ }
372
+ @media (min-width: $screen-desktop-xl) {
373
+ font-size: var( --secondary-xs-font-size-desktop-xl );
374
+ line-height: var( --secondary-xs-line-height-desktop-xl );
375
+ letter-spacing: var( --secondary-xs-letter-spacing-desktop-xl );
376
+ font-weight: var( --secondary-xs-font-weight-desktop-xl );
377
+ font-style: var( --secondary-xs-font-style-desktop-xl );
378
+ }
379
+ }
380
+
381
+ .lrv-a-font-secondary-xxs {
382
+ // Define this token locally; it can be defined via larva-tokens, if needed in the future.
383
+ --font-family: var( --font-family-secondary );
384
+
385
+ font-family: var( --font-family );
386
+ font-size: var( --secondary-xxs-font-size-mobile );
387
+ line-height: var( --secondary-xxs-line-height-mobile );
388
+ letter-spacing: var( --secondary-xxs-letter-spacing-mobile );
389
+ font-weight: var( --secondary-xxs-font-weight-mobile );
390
+ font-style: var( --secondary-xxs-font-style-mobile );
391
+
392
+ @media (min-width: $screen-desktop) {
393
+ font-size: var( --secondary-xxs-font-size-desktop );
394
+ line-height: var( --secondary-xxs-line-height-desktop );
395
+ letter-spacing: var( --secondary-xxs-letter-spacing-desktop );
396
+ font-weight: var( --secondary-xxs-font-weight-desktop );
397
+ font-style: var( --secondary-xxs-font-style-desktop );
398
+ }
399
+ @media (min-width: $screen-desktop-xl) {
400
+ font-size: var( --secondary-xxs-font-size-desktop-xl );
401
+ line-height: var( --secondary-xxs-line-height-desktop-xl );
402
+ letter-spacing: var( --secondary-xxs-letter-spacing-desktop-xl );
403
+ font-weight: var( --secondary-xxs-font-weight-desktop-xl );
404
+ font-style: var( --secondary-xxs-font-style-desktop-xl );
405
+ }
406
+ }
407
+
408
+ .lrv-a-font-secondary-regular-m {
409
+ // Define this token locally; it can be defined via larva-tokens, if needed in the future.
410
+ --font-family: var( --font-family-secondary );
411
+
412
+ font-family: var( --font-family );
413
+ font-size: var( --secondary-regular-m-font-size-mobile );
414
+ line-height: var( --secondary-regular-m-line-height-mobile );
415
+ letter-spacing: var( --secondary-regular-m-letter-spacing-mobile );
416
+ font-weight: var( --secondary-regular-m-font-weight-mobile );
417
+ font-style: var( --secondary-regular-m-font-style-mobile );
418
+
419
+ @media (min-width: $screen-desktop) {
420
+ font-size: var( --secondary-regular-m-font-size-desktop );
421
+ line-height: var( --secondary-regular-m-line-height-desktop );
422
+ letter-spacing: var( --secondary-regular-m-letter-spacing-desktop );
423
+ font-weight: var( --secondary-regular-m-font-weight-desktop );
424
+ font-style: var( --secondary-regular-m-font-style-desktop );
425
+ }
426
+ @media (min-width: $screen-desktop-xl) {
427
+ font-size: var( --secondary-regular-m-font-size-desktop-xl );
428
+ line-height: var( --secondary-regular-m-line-height-desktop-xl );
429
+ letter-spacing: var( --secondary-regular-m-letter-spacing-desktop-xl );
430
+ font-weight: var( --secondary-regular-m-font-weight-desktop-xl );
431
+ font-style: var( --secondary-regular-m-font-style-desktop-xl );
432
+ }
433
+ }
434
+
435
+ .lrv-a-font-accent-l {
436
+ // Define this token locally; it can be defined via larva-tokens, if needed in the future.
437
+ --font-family: var( --font-family-accent );
438
+
439
+ font-family: var( --font-family );
440
+ font-size: var( --accent-l-font-size-mobile );
441
+ line-height: var( --accent-l-line-height-mobile );
442
+ letter-spacing: var( --accent-l-letter-spacing-mobile );
443
+ font-weight: var( --accent-l-font-weight-mobile );
444
+ font-style: var( --accent-l-font-style-mobile );
445
+
446
+ @media (min-width: $screen-desktop) {
447
+ font-size: var( --accent-l-font-size-desktop );
448
+ line-height: var( --accent-l-line-height-desktop );
449
+ letter-spacing: var( --accent-l-letter-spacing-desktop );
450
+ font-weight: var( --accent-l-font-weight-desktop );
451
+ font-style: var( --accent-l-font-style-desktop );
452
+ }
453
+ @media (min-width: $screen-desktop-xl) {
454
+ font-size: var( --accent-l-font-size-desktop-xl );
455
+ line-height: var( --accent-l-line-height-desktop-xl );
456
+ letter-spacing: var( --accent-l-letter-spacing-desktop-xl );
457
+ font-weight: var( --accent-l-font-weight-desktop-xl );
458
+ font-style: var( --accent-l-font-style-desktop-xl );
459
+ }
460
+ }
461
+
462
+ .lrv-a-font-accent-m {
463
+ // Define this token locally; it can be defined via larva-tokens, if needed in the future.
464
+ --font-family: var( --font-family-accent );
465
+
466
+ font-family: var( --font-family );
467
+ font-size: var( --accent-m-font-size-mobile );
468
+ line-height: var( --accent-m-line-height-mobile );
469
+ letter-spacing: var( --accent-m-letter-spacing-mobile );
470
+ font-weight: var( --accent-m-font-weight-mobile );
471
+ font-style: var( --accent-m-font-style-mobile );
472
+
473
+ @media (min-width: $screen-desktop) {
474
+ font-size: var( --accent-m-font-size-desktop );
475
+ line-height: var( --accent-m-line-height-desktop );
476
+ letter-spacing: var( --accent-m-letter-spacing-desktop );
477
+ font-weight: var( --accent-m-font-weight-desktop );
478
+ font-style: var( --accent-m-font-style-desktop );
479
+ }
480
+ @media (min-width: $screen-desktop-xl) {
481
+ font-size: var( --accent-m-font-size-desktop-xl );
482
+ line-height: var( --accent-m-line-height-desktop-xl );
483
+ letter-spacing: var( --accent-m-letter-spacing-desktop-xl );
484
+ font-weight: var( --accent-m-font-weight-desktop-xl );
485
+ font-style: var( --accent-m-font-style-desktop-xl );
486
+ }
487
+ }
488
+
489
+ .lrv-a-font-accent-s {
490
+ // Define this token locally; it can be defined via larva-tokens, if needed in the future.
491
+ --font-family: var( --font-family-accent );
492
+
493
+ font-family: var( --font-family );
494
+ font-size: var( --accent-s-font-size-mobile );
495
+ line-height: var( --accent-s-line-height-mobile );
496
+ letter-spacing: var( --accent-s-letter-spacing-mobile );
497
+ font-weight: var( --accent-s-font-weight-mobile );
498
+ font-style: var( --accent-s-font-style-mobile );
499
+
500
+ @media (min-width: $screen-desktop) {
501
+ font-size: var( --accent-s-font-size-desktop );
502
+ line-height: var( --accent-s-line-height-desktop );
503
+ letter-spacing: var( --accent-s-letter-spacing-desktop );
504
+ font-weight: var( --accent-s-font-weight-desktop );
505
+ font-style: var( --accent-s-font-style-desktop );
506
+ }
507
+ @media (min-width: $screen-desktop-xl) {
508
+ font-size: var( --accent-s-font-size-desktop-xl );
509
+ line-height: var( --accent-s-line-height-desktop-xl );
510
+ letter-spacing: var( --accent-s-letter-spacing-desktop-xl );
511
+ font-weight: var( --accent-s-font-weight-desktop-xl );
512
+ font-style: var( --accent-s-font-style-desktop-xl );
513
+ }
514
+ }
515
+
516
+ .lrv-a-font-accent-xs {
517
+ // Define this token locally; it can be defined via larva-tokens, if needed in the future.
518
+ --font-family: var( --font-family-accent );
519
+
520
+ font-family: var( --font-family );
521
+ font-size: var( --accent-xs-font-size-mobile );
522
+ line-height: var( --accent-xs-line-height-mobile );
523
+ letter-spacing: var( --accent-xs-letter-spacing-mobile );
524
+ font-weight: var( --accent-xs-font-weight-mobile );
525
+ font-style: var( --accent-xs-font-style-mobile );
526
+
527
+ @media (min-width: $screen-desktop) {
528
+ font-size: var( --accent-xs-font-size-desktop );
529
+ line-height: var( --accent-xs-line-height-desktop );
530
+ letter-spacing: var( --accent-xs-letter-spacing-desktop );
531
+ font-weight: var( --accent-xs-font-weight-desktop );
532
+ font-style: var( --accent-xs-font-style-desktop );
533
+ }
534
+ @media (min-width: $screen-desktop-xl) {
535
+ font-size: var( --accent-xs-font-size-desktop-xl );
536
+ line-height: var( --accent-xs-line-height-desktop-xl );
537
+ letter-spacing: var( --accent-xs-letter-spacing-desktop-xl );
538
+ font-weight: var( --accent-xs-font-weight-desktop-xl );
539
+ font-style: var( --accent-xs-font-style-desktop-xl );
540
+ }
541
+ }
542
+
543
+ .lrv-a-font-accent-xxs {
544
+ // Define this token locally; it can be defined via larva-tokens, if needed in the future.
545
+ --font-family: var( --font-family-accent );
546
+
547
+ font-family: var( --font-family );
548
+ font-size: var( --accent-xxs-font-size-mobile );
549
+ line-height: var( --accent-xxs-line-height-mobile );
550
+ letter-spacing: var( --accent-xxs-letter-spacing-mobile );
551
+ font-weight: var( --accent-xxs-font-weight-mobile );
552
+ font-style: var( --accent-xxs-font-style-mobile );
553
+
554
+ @media (min-width: $screen-desktop) {
555
+ font-size: var( --accent-xxs-font-size-desktop );
556
+ line-height: var( --accent-xxs-line-height-desktop );
557
+ letter-spacing: var( --accent-xxs-letter-spacing-desktop );
558
+ font-weight: var( --accent-xxs-font-weight-desktop );
559
+ font-style: var( --accent-xxs-font-style-desktop );
560
+ }
561
+ @media (min-width: $screen-desktop-xl) {
562
+ font-size: var( --accent-xxs-font-size-desktop-xl );
563
+ line-height: var( --accent-xxs-line-height-desktop-xl );
564
+ letter-spacing: var( --accent-xxs-letter-spacing-desktop-xl );
565
+ font-weight: var( --accent-xxs-font-weight-desktop-xl );
566
+ font-style: var( --accent-xxs-font-style-desktop-xl );
567
+ }
568
+ }
569
+
570
+ .lrv-a-font-accent-regular-xxs {
571
+ // Define this token locally; it can be defined via larva-tokens, if needed in the future.
572
+ --font-family: var( --font-family-accent );
573
+
574
+ font-family: var( --font-family );
575
+ font-size: var( --accent-regular-xxs-font-size-mobile );
576
+ line-height: var( --accent-regular-xxs-line-height-mobile );
577
+ letter-spacing: var( --accent-regular-xxs-letter-spacing-mobile );
578
+ font-weight: var( --accent-regular-xxs-font-weight-mobile );
579
+ font-style: var( --accent-regular-xxs-font-style-mobile );
580
+
581
+ @media (min-width: $screen-desktop) {
582
+ font-size: var( --accent-regular-xxs-font-size-desktop );
583
+ line-height: var( --accent-regular-xxs-line-height-desktop );
584
+ letter-spacing: var( --accent-regular-xxs-letter-spacing-desktop );
585
+ font-weight: var( --accent-regular-xxs-font-weight-desktop );
586
+ font-style: var( --accent-regular-xxs-font-style-desktop );
587
+ }
588
+ @media (min-width: $screen-desktop-xl) {
589
+ font-size: var( --accent-regular-xxs-font-size-desktop-xl );
590
+ line-height: var( --accent-regular-xxs-line-height-desktop-xl );
591
+ letter-spacing: var( --accent-regular-xxs-letter-spacing-desktop-xl );
592
+ font-weight: var( --accent-regular-xxs-font-weight-desktop-xl );
593
+ font-style: var( --accent-regular-xxs-font-style-desktop-xl );
594
+ }
595
+ }
596
+
597
+ .lrv-a-font-body-xxxl {
598
+ // Define this token locally; it can be defined via larva-tokens, if needed in the future.
599
+ --font-family: var( --font-family-body );
600
+
601
+ font-family: var( --font-family );
602
+ font-size: var( --body-xxxl-font-size-mobile );
603
+ line-height: var( --body-xxxl-line-height-mobile );
604
+ letter-spacing: var( --body-xxxl-letter-spacing-mobile );
605
+ font-weight: var( --body-xxxl-font-weight-mobile );
606
+ font-style: var( --body-xxxl-font-style-mobile );
607
+
608
+ @media (min-width: $screen-desktop) {
609
+ font-size: var( --body-xxxl-font-size-desktop );
610
+ line-height: var( --body-xxxl-line-height-desktop );
611
+ letter-spacing: var( --body-xxxl-letter-spacing-desktop );
612
+ font-weight: var( --body-xxxl-font-weight-desktop );
613
+ font-style: var( --body-xxxl-font-style-desktop );
614
+ }
615
+ @media (min-width: $screen-desktop-xl) {
616
+ font-size: var( --body-xxxl-font-size-desktop-xl );
617
+ line-height: var( --body-xxxl-line-height-desktop-xl );
618
+ letter-spacing: var( --body-xxxl-letter-spacing-desktop-xl );
619
+ font-weight: var( --body-xxxl-font-weight-desktop-xl );
620
+ font-style: var( --body-xxxl-font-style-desktop-xl );
621
+ }
622
+ }
623
+
624
+ .lrv-a-font-body-xxl {
625
+ // Define this token locally; it can be defined via larva-tokens, if needed in the future.
626
+ --font-family: var( --font-family-body );
627
+
628
+ font-family: var( --font-family );
629
+ font-size: var( --body-xxl-font-size-mobile );
630
+ line-height: var( --body-xxl-line-height-mobile );
631
+ letter-spacing: var( --body-xxl-letter-spacing-mobile );
632
+ font-weight: var( --body-xxl-font-weight-mobile );
633
+ font-style: var( --body-xxl-font-style-mobile );
634
+
635
+ @media (min-width: $screen-desktop) {
636
+ font-size: var( --body-xxl-font-size-desktop );
637
+ line-height: var( --body-xxl-line-height-desktop );
638
+ letter-spacing: var( --body-xxl-letter-spacing-desktop );
639
+ font-weight: var( --body-xxl-font-weight-desktop );
640
+ font-style: var( --body-xxl-font-style-desktop );
641
+ }
642
+ @media (min-width: $screen-desktop-xl) {
643
+ font-size: var( --body-xxl-font-size-desktop-xl );
644
+ line-height: var( --body-xxl-line-height-desktop-xl );
645
+ letter-spacing: var( --body-xxl-letter-spacing-desktop-xl );
646
+ font-weight: var( --body-xxl-font-weight-desktop-xl );
647
+ font-style: var( --body-xxl-font-style-desktop-xl );
648
+ }
649
+ }
650
+
651
+ .lrv-a-font-body-xl {
652
+ // Define this token locally; it can be defined via larva-tokens, if needed in the future.
653
+ --font-family: var( --font-family-body );
654
+
655
+ font-family: var( --font-family );
656
+ font-size: var( --body-xl-font-size-mobile );
657
+ line-height: var( --body-xl-line-height-mobile );
658
+ letter-spacing: var( --body-xl-letter-spacing-mobile );
659
+ font-weight: var( --body-xl-font-weight-mobile );
660
+ font-style: var( --body-xl-font-style-mobile );
661
+
662
+ @media (min-width: $screen-desktop) {
663
+ font-size: var( --body-xl-font-size-desktop );
664
+ line-height: var( --body-xl-line-height-desktop );
665
+ letter-spacing: var( --body-xl-letter-spacing-desktop );
666
+ font-weight: var( --body-xl-font-weight-desktop );
667
+ font-style: var( --body-xl-font-style-desktop );
668
+ }
669
+ @media (min-width: $screen-desktop-xl) {
670
+ font-size: var( --body-xl-font-size-desktop-xl );
671
+ line-height: var( --body-xl-line-height-desktop-xl );
672
+ letter-spacing: var( --body-xl-letter-spacing-desktop-xl );
673
+ font-weight: var( --body-xl-font-weight-desktop-xl );
674
+ font-style: var( --body-xl-font-style-desktop-xl );
675
+ }
676
+ }
677
+
678
+ .lrv-a-font-body-l {
679
+ // Define this token locally; it can be defined via larva-tokens, if needed in the future.
680
+ --font-family: var( --font-family-body );
681
+
682
+ font-family: var( --font-family );
683
+ font-size: var( --body-l-font-size-mobile );
684
+ line-height: var( --body-l-line-height-mobile );
685
+ letter-spacing: var( --body-l-letter-spacing-mobile );
686
+ font-weight: var( --body-l-font-weight-mobile );
687
+ font-style: var( --body-l-font-style-mobile );
688
+
689
+ @media (min-width: $screen-desktop) {
690
+ font-size: var( --body-l-font-size-desktop );
691
+ line-height: var( --body-l-line-height-desktop );
692
+ letter-spacing: var( --body-l-letter-spacing-desktop );
693
+ font-weight: var( --body-l-font-weight-desktop );
694
+ font-style: var( --body-l-font-style-desktop );
695
+ }
696
+ @media (min-width: $screen-desktop-xl) {
697
+ font-size: var( --body-l-font-size-desktop-xl );
698
+ line-height: var( --body-l-line-height-desktop-xl );
699
+ letter-spacing: var( --body-l-letter-spacing-desktop-xl );
700
+ font-weight: var( --body-l-font-weight-desktop-xl );
701
+ font-style: var( --body-l-font-style-desktop-xl );
702
+ }
703
+ }
704
+
705
+ .lrv-a-font-body-m {
706
+ // Define this token locally; it can be defined via larva-tokens, if needed in the future.
707
+ --font-family: var( --font-family-body );
708
+
709
+ font-family: var( --font-family );
710
+ font-size: var( --body-m-font-size-mobile );
711
+ line-height: var( --body-m-line-height-mobile );
712
+ letter-spacing: var( --body-m-letter-spacing-mobile );
713
+ font-weight: var( --body-m-font-weight-mobile );
714
+ font-style: var( --body-m-font-style-mobile );
715
+
716
+ @media (min-width: $screen-desktop) {
717
+ font-size: var( --body-m-font-size-desktop );
718
+ line-height: var( --body-m-line-height-desktop );
719
+ letter-spacing: var( --body-m-letter-spacing-desktop );
720
+ font-weight: var( --body-m-font-weight-desktop );
721
+ font-style: var( --body-m-font-style-desktop );
722
+ }
723
+ @media (min-width: $screen-desktop-xl) {
724
+ font-size: var( --body-m-font-size-desktop-xl );
725
+ line-height: var( --body-m-line-height-desktop-xl );
726
+ letter-spacing: var( --body-m-letter-spacing-desktop-xl );
727
+ font-weight: var( --body-m-font-weight-desktop-xl );
728
+ font-style: var( --body-m-font-style-desktop-xl );
729
+ }
730
+ }
731
+
732
+ .lrv-a-font-body-s {
733
+ // Define this token locally; it can be defined via larva-tokens, if needed in the future.
734
+ --font-family: var( --font-family-body );
735
+
736
+ font-family: var( --font-family );
737
+ font-size: var( --body-s-font-size-mobile );
738
+ line-height: var( --body-s-line-height-mobile );
739
+ letter-spacing: var( --body-s-letter-spacing-mobile );
740
+ font-weight: var( --body-s-font-weight-mobile );
741
+ font-style: var( --body-s-font-style-mobile );
742
+
743
+ @media (min-width: $screen-desktop) {
744
+ font-size: var( --body-s-font-size-desktop );
745
+ line-height: var( --body-s-line-height-desktop );
746
+ letter-spacing: var( --body-s-letter-spacing-desktop );
747
+ font-weight: var( --body-s-font-weight-desktop );
748
+ font-style: var( --body-s-font-style-desktop );
749
+ }
750
+ @media (min-width: $screen-desktop-xl) {
751
+ font-size: var( --body-s-font-size-desktop-xl );
752
+ line-height: var( --body-s-line-height-desktop-xl );
753
+ letter-spacing: var( --body-s-letter-spacing-desktop-xl );
754
+ font-weight: var( --body-s-font-weight-desktop-xl );
755
+ font-style: var( --body-s-font-style-desktop-xl );
756
+ }
757
+ }
758
+
759
+ .lrv-a-font-body-xs {
760
+ // Define this token locally; it can be defined via larva-tokens, if needed in the future.
761
+ --font-family: var( --font-family-body );
762
+
763
+ font-family: var( --font-family );
764
+ font-size: var( --body-xs-font-size-mobile );
765
+ line-height: var( --body-xs-line-height-mobile );
766
+ letter-spacing: var( --body-xs-letter-spacing-mobile );
767
+ font-weight: var( --body-xs-font-weight-mobile );
768
+ font-style: var( --body-xs-font-style-mobile );
769
+
770
+ @media (min-width: $screen-desktop) {
771
+ font-size: var( --body-xs-font-size-desktop );
772
+ line-height: var( --body-xs-line-height-desktop );
773
+ letter-spacing: var( --body-xs-letter-spacing-desktop );
774
+ font-weight: var( --body-xs-font-weight-desktop );
775
+ font-style: var( --body-xs-font-style-desktop );
776
+ }
777
+ @media (min-width: $screen-desktop-xl) {
778
+ font-size: var( --body-xs-font-size-desktop-xl );
779
+ line-height: var( --body-xs-line-height-desktop-xl );
780
+ letter-spacing: var( --body-xs-letter-spacing-desktop-xl );
781
+ font-weight: var( --body-xs-font-weight-desktop-xl );
782
+ font-style: var( --body-xs-font-style-desktop-xl );
783
+ }
784
+ }
785
+
786
+ .lrv-a-font-body-xxs {
787
+ // Define this token locally; it can be defined via larva-tokens, if needed in the future.
788
+ --font-family: var( --font-family-body );
789
+
790
+ font-family: var( --font-family );
791
+ font-size: var( --body-xxs-font-size-mobile );
792
+ line-height: var( --body-xxs-line-height-mobile );
793
+ letter-spacing: var( --body-xxs-letter-spacing-mobile );
794
+ font-weight: var( --body-xxs-font-weight-mobile );
795
+ font-style: var( --body-xxs-font-style-mobile );
796
+
797
+ @media (min-width: $screen-desktop) {
798
+ font-size: var( --body-xxs-font-size-desktop );
799
+ line-height: var( --body-xxs-line-height-desktop );
800
+ letter-spacing: var( --body-xxs-letter-spacing-desktop );
801
+ font-weight: var( --body-xxs-font-weight-desktop );
802
+ font-style: var( --body-xxs-font-style-desktop );
803
+ }
804
+ @media (min-width: $screen-desktop-xl) {
805
+ font-size: var( --body-xxs-font-size-desktop-xl );
806
+ line-height: var( --body-xxs-line-height-desktop-xl );
807
+ letter-spacing: var( --body-xxs-letter-spacing-desktop-xl );
808
+ font-weight: var( --body-xxs-font-weight-desktop-xl );
809
+ font-style: var( --body-xxs-font-style-desktop-xl );
810
+ }
811
+ }
812
+
813
+ .lrv-a-font-body-xxxs {
814
+ // Define this token locally; it can be defined via larva-tokens, if needed in the future.
815
+ --font-family: var( --font-family-body );
816
+
817
+ font-family: var( --font-family );
818
+ font-size: var( --body-xxxs-font-size-mobile );
819
+ line-height: var( --body-xxxs-line-height-mobile );
820
+ letter-spacing: var( --body-xxxs-letter-spacing-mobile );
821
+ font-weight: var( --body-xxxs-font-weight-mobile );
822
+ font-style: var( --body-xxxs-font-style-mobile );
823
+
824
+ @media (min-width: $screen-desktop) {
825
+ font-size: var( --body-xxxs-font-size-desktop );
826
+ line-height: var( --body-xxxs-line-height-desktop );
827
+ letter-spacing: var( --body-xxxs-letter-spacing-desktop );
828
+ font-weight: var( --body-xxxs-font-weight-desktop );
829
+ font-style: var( --body-xxxs-font-style-desktop );
830
+ }
831
+ @media (min-width: $screen-desktop-xl) {
832
+ font-size: var( --body-xxxs-font-size-desktop-xl );
833
+ line-height: var( --body-xxxs-line-height-desktop-xl );
834
+ letter-spacing: var( --body-xxxs-letter-spacing-desktop-xl );
835
+ font-weight: var( --body-xxxs-font-weight-desktop-xl );
836
+ font-style: var( --body-xxxs-font-style-desktop-xl );
837
+ }
838
+ }
839
+
840
+ .lrv-a-font-basic-xxl {
841
+ // Define this token locally; it can be defined via larva-tokens, if needed in the future.
842
+ --font-family: var( --font-family-basic );
843
+
844
+ font-family: var( --font-family );
845
+ font-size: var( --basic-xxl-font-size-mobile );
846
+ line-height: var( --basic-xxl-line-height-mobile );
847
+ letter-spacing: var( --basic-xxl-letter-spacing-mobile );
848
+ font-weight: var( --basic-xxl-font-weight-mobile );
849
+ font-style: var( --basic-xxl-font-style-mobile );
850
+
851
+ @media (min-width: $screen-desktop) {
852
+ font-size: var( --basic-xxl-font-size-desktop );
853
+ line-height: var( --basic-xxl-line-height-desktop );
854
+ letter-spacing: var( --basic-xxl-letter-spacing-desktop );
855
+ font-weight: var( --basic-xxl-font-weight-desktop );
856
+ font-style: var( --basic-xxl-font-style-desktop );
857
+ }
858
+ @media (min-width: $screen-desktop-xl) {
859
+ font-size: var( --basic-xxl-font-size-desktop-xl );
860
+ line-height: var( --basic-xxl-line-height-desktop-xl );
861
+ letter-spacing: var( --basic-xxl-letter-spacing-desktop-xl );
862
+ font-weight: var( --basic-xxl-font-weight-desktop-xl );
863
+ font-style: var( --basic-xxl-font-style-desktop-xl );
864
+ }
865
+ }
866
+
867
+ .lrv-a-font-basic-xl {
868
+ // Define this token locally; it can be defined via larva-tokens, if needed in the future.
869
+ --font-family: var( --font-family-basic );
870
+
871
+ font-family: var( --font-family );
872
+ font-size: var( --basic-xl-font-size-mobile );
873
+ line-height: var( --basic-xl-line-height-mobile );
874
+ letter-spacing: var( --basic-xl-letter-spacing-mobile );
875
+ font-weight: var( --basic-xl-font-weight-mobile );
876
+ font-style: var( --basic-xl-font-style-mobile );
877
+
878
+ @media (min-width: $screen-desktop) {
879
+ font-size: var( --basic-xl-font-size-desktop );
880
+ line-height: var( --basic-xl-line-height-desktop );
881
+ letter-spacing: var( --basic-xl-letter-spacing-desktop );
882
+ font-weight: var( --basic-xl-font-weight-desktop );
883
+ font-style: var( --basic-xl-font-style-desktop );
884
+ }
885
+ @media (min-width: $screen-desktop-xl) {
886
+ font-size: var( --basic-xl-font-size-desktop-xl );
887
+ line-height: var( --basic-xl-line-height-desktop-xl );
888
+ letter-spacing: var( --basic-xl-letter-spacing-desktop-xl );
889
+ font-weight: var( --basic-xl-font-weight-desktop-xl );
890
+ font-style: var( --basic-xl-font-style-desktop-xl );
891
+ }
892
+ }
893
+
894
+ .lrv-a-font-basic-l {
895
+ // Define this token locally; it can be defined via larva-tokens, if needed in the future.
896
+ --font-family: var( --font-family-basic );
897
+
898
+ font-family: var( --font-family );
899
+ font-size: var( --basic-l-font-size-mobile );
900
+ line-height: var( --basic-l-line-height-mobile );
901
+ letter-spacing: var( --basic-l-letter-spacing-mobile );
902
+ font-weight: var( --basic-l-font-weight-mobile );
903
+ font-style: var( --basic-l-font-style-mobile );
904
+
905
+ @media (min-width: $screen-desktop) {
906
+ font-size: var( --basic-l-font-size-desktop );
907
+ line-height: var( --basic-l-line-height-desktop );
908
+ letter-spacing: var( --basic-l-letter-spacing-desktop );
909
+ font-weight: var( --basic-l-font-weight-desktop );
910
+ font-style: var( --basic-l-font-style-desktop );
911
+ }
912
+ @media (min-width: $screen-desktop-xl) {
913
+ font-size: var( --basic-l-font-size-desktop-xl );
914
+ line-height: var( --basic-l-line-height-desktop-xl );
915
+ letter-spacing: var( --basic-l-letter-spacing-desktop-xl );
916
+ font-weight: var( --basic-l-font-weight-desktop-xl );
917
+ font-style: var( --basic-l-font-style-desktop-xl );
918
+ }
919
+ }
920
+
921
+ .lrv-a-font-basic-m {
922
+ // Define this token locally; it can be defined via larva-tokens, if needed in the future.
923
+ --font-family: var( --font-family-basic );
924
+
925
+ font-family: var( --font-family );
926
+ font-size: var( --basic-m-font-size-mobile );
927
+ line-height: var( --basic-m-line-height-mobile );
928
+ letter-spacing: var( --basic-m-letter-spacing-mobile );
929
+ font-weight: var( --basic-m-font-weight-mobile );
930
+ font-style: var( --basic-m-font-style-mobile );
931
+
932
+ @media (min-width: $screen-desktop) {
933
+ font-size: var( --basic-m-font-size-desktop );
934
+ line-height: var( --basic-m-line-height-desktop );
935
+ letter-spacing: var( --basic-m-letter-spacing-desktop );
936
+ font-weight: var( --basic-m-font-weight-desktop );
937
+ font-style: var( --basic-m-font-style-desktop );
938
+ }
939
+ @media (min-width: $screen-desktop-xl) {
940
+ font-size: var( --basic-m-font-size-desktop-xl );
941
+ line-height: var( --basic-m-line-height-desktop-xl );
942
+ letter-spacing: var( --basic-m-letter-spacing-desktop-xl );
943
+ font-weight: var( --basic-m-font-weight-desktop-xl );
944
+ font-style: var( --basic-m-font-style-desktop-xl );
945
+ }
946
+ }
947
+
948
+ .lrv-a-font-basic-s {
949
+ // Define this token locally; it can be defined via larva-tokens, if needed in the future.
950
+ --font-family: var( --font-family-basic );
951
+
952
+ font-family: var( --font-family );
953
+ font-size: var( --basic-s-font-size-mobile );
954
+ line-height: var( --basic-s-line-height-mobile );
955
+ letter-spacing: var( --basic-s-letter-spacing-mobile );
956
+ font-weight: var( --basic-s-font-weight-mobile );
957
+ font-style: var( --basic-s-font-style-mobile );
958
+
959
+ @media (min-width: $screen-desktop) {
960
+ font-size: var( --basic-s-font-size-desktop );
961
+ line-height: var( --basic-s-line-height-desktop );
962
+ letter-spacing: var( --basic-s-letter-spacing-desktop );
963
+ font-weight: var( --basic-s-font-weight-desktop );
964
+ font-style: var( --basic-s-font-style-desktop );
965
+ }
966
+ @media (min-width: $screen-desktop-xl) {
967
+ font-size: var( --basic-s-font-size-desktop-xl );
968
+ line-height: var( --basic-s-line-height-desktop-xl );
969
+ letter-spacing: var( --basic-s-letter-spacing-desktop-xl );
970
+ font-weight: var( --basic-s-font-weight-desktop-xl );
971
+ font-style: var( --basic-s-font-style-desktop-xl );
972
+ }
973
+ }
974
+
975
+ .lrv-a-font-basic-xs {
976
+ // Define this token locally; it can be defined via larva-tokens, if needed in the future.
977
+ --font-family: var( --font-family-basic );
978
+
979
+ font-family: var( --font-family );
980
+ font-size: var( --basic-xs-font-size-mobile );
981
+ line-height: var( --basic-xs-line-height-mobile );
982
+ letter-spacing: var( --basic-xs-letter-spacing-mobile );
983
+ font-weight: var( --basic-xs-font-weight-mobile );
984
+ font-style: var( --basic-xs-font-style-mobile );
985
+
986
+ @media (min-width: $screen-desktop) {
987
+ font-size: var( --basic-xs-font-size-desktop );
988
+ line-height: var( --basic-xs-line-height-desktop );
989
+ letter-spacing: var( --basic-xs-letter-spacing-desktop );
990
+ font-weight: var( --basic-xs-font-weight-desktop );
991
+ font-style: var( --basic-xs-font-style-desktop );
992
+ }
993
+ @media (min-width: $screen-desktop-xl) {
994
+ font-size: var( --basic-xs-font-size-desktop-xl );
995
+ line-height: var( --basic-xs-line-height-desktop-xl );
996
+ letter-spacing: var( --basic-xs-letter-spacing-desktop-xl );
997
+ font-weight: var( --basic-xs-font-weight-desktop-xl );
998
+ font-style: var( --basic-xs-font-style-desktop-xl );
999
+ }
1000
+ }
1001
+
1002
+ .lrv-a-font-basic-xxs {
1003
+ // Define this token locally; it can be defined via larva-tokens, if needed in the future.
1004
+ --font-family: var( --font-family-basic );
1005
+
1006
+ font-family: var( --font-family );
1007
+ font-size: var( --basic-xxs-font-size-mobile );
1008
+ line-height: var( --basic-xxs-line-height-mobile );
1009
+ letter-spacing: var( --basic-xxs-letter-spacing-mobile );
1010
+ font-weight: var( --basic-xxs-font-weight-mobile );
1011
+ font-style: var( --basic-xxs-font-style-mobile );
1012
+
1013
+ @media (min-width: $screen-desktop) {
1014
+ font-size: var( --basic-xxs-font-size-desktop );
1015
+ line-height: var( --basic-xxs-line-height-desktop );
1016
+ letter-spacing: var( --basic-xxs-letter-spacing-desktop );
1017
+ font-weight: var( --basic-xxs-font-weight-desktop );
1018
+ font-style: var( --basic-xxs-font-style-desktop );
1019
+ }
1020
+ @media (min-width: $screen-desktop-xl) {
1021
+ font-size: var( --basic-xxs-font-size-desktop-xl );
1022
+ line-height: var( --basic-xxs-line-height-desktop-xl );
1023
+ letter-spacing: var( --basic-xxs-letter-spacing-desktop-xl );
1024
+ font-weight: var( --basic-xxs-font-weight-desktop-xl );
1025
+ font-style: var( --basic-xxs-font-style-desktop-xl );
1026
+ }
1027
+ }