@egovernments/digit-ui-components-css 0.0.2-beta.11 → 0.0.2-beta.13

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 (51) hide show
  1. package/CHANGELOG.md +92 -88
  2. package/README.md +80 -80
  3. package/dist/index.css +810 -16
  4. package/dist/index.min.css +2 -2
  5. package/package.json +69 -69
  6. package/src/digitv2/components/FormComposerV2.scss +118 -118
  7. package/src/digitv2/components/actionbarV2.scss +206 -206
  8. package/src/digitv2/components/backLinkV2.scss +36 -36
  9. package/src/digitv2/components/bodyContainerV2.scss +39 -39
  10. package/src/digitv2/components/breadcrumbV2.scss +56 -56
  11. package/src/digitv2/components/buttonsV2.scss +450 -451
  12. package/src/digitv2/components/cardV2.scss +497 -497
  13. package/src/digitv2/components/cardbasedoptionsV2.scss +46 -46
  14. package/src/digitv2/components/cardlabelV2.scss +7 -7
  15. package/src/digitv2/components/checkboxV2.scss +83 -83
  16. package/src/digitv2/components/chipV2.scss +129 -129
  17. package/src/digitv2/components/dividerV2.scss +10 -10
  18. package/src/digitv2/components/errorMessageV2.scss +20 -20
  19. package/src/digitv2/components/fieldV1.scss +96 -96
  20. package/src/digitv2/components/headerdropdownV2.scss +151 -151
  21. package/src/digitv2/components/infoCardV2.scss +139 -139
  22. package/src/digitv2/components/infobuttonV2.scss +75 -75
  23. package/src/digitv2/components/labelFieldPairV2.scss +66 -66
  24. package/src/digitv2/components/mobileNumberV2.scss +65 -65
  25. package/src/digitv2/components/mobilesidebarV2.scss +439 -0
  26. package/src/digitv2/components/multiSelectDropdownV2.scss +315 -315
  27. package/src/digitv2/components/panelCardV2.scss +160 -160
  28. package/src/digitv2/components/panelV2.scss +114 -114
  29. package/src/digitv2/components/popUpV2.scss +330 -330
  30. package/src/digitv2/components/radiobtnV2.scss +115 -115
  31. package/src/digitv2/components/selectDropdownV2.scss +364 -364
  32. package/src/digitv2/components/sidebarV2.scss +409 -0
  33. package/src/digitv2/components/stepperV2.scss +147 -147
  34. package/src/digitv2/components/textInputV2.scss +462 -462
  35. package/src/digitv2/components/textareaV2.scss +99 -99
  36. package/src/digitv2/components/textblockV2.scss +46 -46
  37. package/src/digitv2/components/timelineV2.scss +170 -170
  38. package/src/digitv2/components/toastV2.scss +80 -80
  39. package/src/digitv2/components/toggleV2.scss +72 -72
  40. package/src/digitv2/components/tooltipwrapperV2.scss +96 -0
  41. package/src/digitv2/components/topbarV2.scss +387 -387
  42. package/src/digitv2/components/treeSelectV2.scss +132 -132
  43. package/src/digitv2/components/uploaderV2.scss +556 -556
  44. package/src/digitv2/components/viewCardFieldPairV2.scss +44 -44
  45. package/src/digitv2/index.scss +172 -169
  46. package/src/digitv2/pages/employee/index.scss +1 -1
  47. package/src/digitv2/pages/employee/workbench.scss +615 -615
  48. package/src/digitv2/typography.scss +638 -638
  49. package/src/index.scss +677 -681
  50. package/src/pages/employee/index.scss +625 -625
  51. package/src/pages/employee/login.scss +220 -220
@@ -1,639 +1,639 @@
1
- @import url("../index.scss");
2
-
3
- .typography {
4
-
5
- &.text-heading-l {
6
- font-family: theme(digitv2.fontFamily.sans);
7
- font-style: theme(digitv2.fontStyle.normal);
8
- font-weight: theme(digitv2.fontWeight.bold);
9
- color: theme(digitv2.lightTheme.text-primary);
10
- line-height: theme(digitv2.lineHeight.normal);
11
-
12
- @media screen and (min-width: theme(digitv2.screens.desktop)) {
13
- font-size: theme(digitv2.fontSize.heading-l.desktop);
14
- }
15
-
16
- @media screen and (min-width: theme(digitv2.screens.tablet)) {
17
- font-size: theme(digitv2.fontSize.heading-l.tablet);
18
- }
19
-
20
- @media screen and (min-width: theme(digitv2.screens.mobile)) {
21
- font-size: theme(digitv2.fontSize.heading-l.mobile);
22
- }
23
- }
24
-
25
- &.text-heading-m {
26
- font-family: theme(digitv2.fontFamily.sans);
27
- font-style: theme(digitv2.fontStyle.normal);
28
- font-weight: theme(digitv2.fontWeight.bold);
29
- color: theme(digitv2.lightTheme.text-primary);
30
- line-height: theme(digitv2.lineHeight.normal);
31
-
32
- @media screen and (min-width: theme(digitv2.screens.desktop)) {
33
- font-size: theme(digitv2.fontSize.heading-m.desktop);
34
- }
35
-
36
- @media screen and (min-width: theme(digitv2.screens.tablet)) {
37
- font-size: theme(digitv2.fontSize.heading-m.tablet);
38
- }
39
-
40
- @media screen and (min-width: theme(digitv2.screens.mobile)) {
41
- font-size: theme(digitv2.fontSize.heading-m.desktop);
42
- }
43
- }
44
-
45
- &.text-heading-s {
46
- font-family: theme(digitv2.fontFamily.sans);
47
- font-style: theme(digitv2.fontStyle.normal);
48
- font-weight: theme(digitv2.fontWeight.bold);
49
- color: theme(digitv2.lightTheme.text-primary);
50
- line-height: theme(digitv2.lineHeight.normal);
51
-
52
- @media screen and (min-width: theme(digitv2.screens.desktop)) {
53
- font-size: theme(digitv2.fontSize.heading-s.desktop);
54
- }
55
-
56
- @media screen and (min-width: theme(digitv2.screens.tablet)) {
57
- font-size: theme(digitv2.fontSize.heading-s.tablet);
58
- }
59
-
60
- @media screen and (min-width: theme(digitv2.screens.mobile)) {
61
- font-size: theme(digitv2.fontSize.heading-s.mobile);
62
- }
63
- }
64
-
65
- &.text-heading-xs {
66
- @media screen and (min-width: theme(digitv2.screens.mobile)) {
67
- font-size: theme(digitv2.fontSize.heading-xs.mobile);
68
- font-family: theme(digitv2.fontFamily.sans);
69
- font-style: theme(digitv2.fontStyle.normal);
70
- font-weight: theme(digitv2.fontWeight.bold);
71
- color: theme(digitv2.lightTheme.text-primary);
72
- line-height: theme(digitv2.lineHeight.normal);
73
- }
74
- }
75
-
76
- &.text-caption-l {
77
- font-family: theme(digitv2.fontFamily.sans);
78
- font-style: theme(digitv2.fontStyle.italic);
79
- font-weight: theme(digitv2.fontWeight.medium);
80
- color: theme(digitv2.lightTheme.text-primary);
81
- line-height: theme(digitv2.lineHeight.normal);
82
-
83
- @media screen and (min-width: theme(digitv2.screens.desktop)) {
84
- font-size: theme(digitv2.fontSize.caption-l.desktop);
85
- }
86
-
87
- @media screen and (min-width: theme(digitv2.screens.tablet)) {
88
- font-size: theme(digitv2.fontSize.caption-l.tablet);
89
- }
90
-
91
- @media screen and (min-width: theme(digitv2.screens.mobile)) {
92
- font-size: theme(digitv2.fontSize.caption-l.mobile);
93
- }
94
- }
95
-
96
- &.text-caption-m {
97
- font-family: theme(digitv2.fontFamily.sans);
98
- font-style: theme(digitv2.fontStyle.italic);
99
- font-weight: theme(digitv2.fontWeight.medium);
100
- color: theme(digitv2.lightTheme.text-primary);
101
- line-height: theme(digitv2.lineHeight.normal);
102
-
103
- @media screen and (min-width: theme(digitv2.screens.desktop)) {
104
- font-size: theme(digitv2.fontSize.caption-m.desktop);
105
- }
106
-
107
- @media screen and (min-width: theme(digitv2.screens.tablet)) {
108
- font-size: theme(digitv2.fontSize.caption-m.tablet);
109
- }
110
-
111
- @media screen and (min-width: theme(digitv2.screens.mobile)) {
112
- font-size: theme(digitv2.fontSize.caption-m.mobile);
113
- }
114
- }
115
-
116
- &.text-caption-s {
117
- font-family: theme(digitv2.fontFamily.sans);
118
- font-style: theme(digitv2.fontStyle.italic);
119
- font-weight: theme(digitv2.fontWeight.medium);
120
- color: theme(digitv2.lightTheme.text-primary);
121
- line-height: theme(digitv2.lineHeight.normal);
122
-
123
- @media screen and (min-width: theme(digitv2.screens.desktop)) {
124
- font-size: theme(digitv2.fontSize.caption-s.desktop);
125
- }
126
-
127
- @media screen and (min-width: theme(digitv2.screens.tablet)) {
128
- font-size: theme(digitv2.fontSize.caption-s.tablet);
129
- }
130
-
131
- @media screen and (min-width: theme(digitv2.screens.mobile)) {
132
- font-size: theme(digitv2.fontSize.caption-s.desktop);
133
- }
134
- }
135
-
136
- &.text-body-l {
137
- font-family: theme(digitv2.fontFamily.sans);
138
- font-style: theme(digitv2.fontStyle.italic);
139
- font-weight: theme(digitv2.fontWeight.regular);
140
- color: theme(digitv2.lightTheme.text-primary);
141
-
142
- @media screen and (min-width: theme(digitv2.screens.desktop)) {
143
- font-size: theme(digitv2.fontSize.body-l.desktop);
144
- line-height: theme(digitv2.lineHeight.line-height-body-l.desktop);
145
- }
146
-
147
- @media screen and (min-width: theme(digitv2.screens.tablet)) {
148
- font-size: theme(digitv2.fontSize.body-l.tablet);
149
- line-height: theme(digitv2.lineHeight.line-height-body-l.tablet);
150
- }
151
-
152
- @media screen and (min-width: theme(digitv2.screens.mobile)) {
153
- font-size: theme(digitv2.fontSize.body-l.mobile);
154
- line-height: theme(digitv2.lineHeight.line-height-body-l.mobile);
155
- }
156
- }
157
-
158
- &.text-body-s {
159
- font-family: theme(digitv2.fontFamily.sans);
160
- font-style: theme(digitv2.fontStyle.italic);
161
- font-weight: theme(digitv2.fontWeight.regular);
162
- color: theme(digitv2.lightTheme.text-primary);
163
-
164
- @media screen and (min-width: theme(digitv2.screens.desktop)) {
165
- font-size: theme(digitv2.fontSize.body-s.desktop);
166
- line-height: theme(digitv2.lineHeight.line-height-body-s.desktop);
167
- }
168
-
169
- @media screen and (min-width: theme(digitv2.screens.tablet)) {
170
- font-size: theme(digitv2.fontSize.body-s.tablet);
171
- line-height: theme(digitv2.lineHeight.line-height-body-s.tablet);
172
- }
173
-
174
- @media screen and (min-width: theme(digitv2.screens.mobile)) {
175
- font-size: theme(digitv2.fontSize.body-s.mobile);
176
- line-height: theme(digitv2.lineHeight.line-height-body-s.mobile);
177
- }
178
- }
179
-
180
- &.text-body-xs {
181
- font-family: theme(digitv2.fontFamily.sans);
182
- font-style: theme(digitv2.fontStyle.italic);
183
- font-weight: theme(digitv2.fontWeight.regular);
184
- color: theme(digitv2.lightTheme.text-primary);
185
-
186
- @media screen and (min-width: theme(digitv2.screens.desktop)) {
187
- font-size: theme(digitv2.fontSize.body-xs.desktop);
188
- line-height: theme(digitv2.lineHeight.line-height-body-xs.desktop);
189
- }
190
-
191
- @media screen and (min-width: theme(digitv2.screens.tablet)) {
192
- font-size: theme(digitv2.fontSize.body-xs.tablet);
193
- line-height: theme(digitv2.lineHeight.line-height-body-xs.tablet);
194
- }
195
-
196
- @media screen and (min-width: theme(digitv2.screens.mobile)) {
197
- font-size: theme(digitv2.fontSize.body-xs.mobile);
198
- line-height: theme(digitv2.lineHeight.line-height-body-xs.mobile);
199
- }
200
- }
201
-
202
- &.text-label {
203
- font-family: theme(digitv2.fontFamily.sans);
204
- font-style: theme(digitv2.fontStyle.italic);
205
- font-weight: theme(digitv2.fontWeight.regular);
206
- color: theme(digitv2.lightTheme.text-primary);
207
- line-height: theme(digitv2.lineHeight.normal);
208
-
209
- @media screen and (min-width: theme(digitv2.screens.desktop)) {
210
- font-size: theme(digitv2.fontSize.label.desktop);
211
- }
212
-
213
- @media screen and (min-width: theme(digitv2.screens.tablet)) {
214
- font-size: theme(digitv2.fontSize.label.tablet);
215
- }
216
-
217
- @media screen and (min-width: theme(digitv2.screens.mobile)) {
218
- font-size: theme(digitv2.fontSize.label.mobile);
219
- }
220
- }
221
-
222
- &.text-link {
223
- font-family: theme(digitv2.fontFamily.sans);
224
- font-style: theme(digitv2.fontStyle.normal);
225
- font-weight: theme(digitv2.fontWeight.regular);
226
- color: theme(digitv2.lightTheme.text-primary);
227
- line-height: theme(digitv2.lineHeight.normal);
228
- text-decoration: theme(digitv2.textDecorationLine.underline);
229
-
230
- @media screen and (min-width: theme(digitv2.screens.desktop)) {
231
- font-size: theme(digitv2.fontSize.link.desktop);
232
- }
233
-
234
- @media screen and (min-width: theme(digitv2.screens.tablet)) {
235
- font-size: theme(digitv2.fontSize.link.tablet);
236
- }
237
-
238
- @media screen and (min-width: theme(digitv2.screens.mobile)) {
239
- font-size: theme(digitv2.fontSize.link.mobile);
240
- }
241
- }
242
-
243
-
244
- &.heading-xl {
245
- font-family: theme(digitv2.fontFamily.rc);
246
- font-style: theme(digitv2.fontStyle.normal);
247
- font-weight: theme(digitv2.fontWeight.bold);
248
- line-height: theme(digitv2.lineHeight.lineheight1);
249
-
250
- @media (max-aspect-ratio: 9/16) {
251
- /* Media query for mobile */
252
- font-size: theme(digitv2.fontSize.heading-xl.mobile);
253
- }
254
-
255
- @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
256
- /* Media query for tablets */
257
- font-size: theme(digitv2.fontSize.heading-xl.tablet);
258
- }
259
-
260
- @media (min-aspect-ratio: 3/4) {
261
- /* Media query for desktop */
262
- font-size: theme(digitv2.fontSize.heading-xl.desktop);
263
- }
264
- }
265
-
266
- &.heading-l {
267
- font-family: theme(digitv2.fontFamily.sans);
268
- font-style: theme(digitv2.fontStyle.normal);
269
- font-weight: theme(digitv2.fontWeight.bold);
270
- line-height: theme(digitv2.lineHeight.lineheight1);
271
-
272
- @media (max-aspect-ratio: 9/16) {
273
- /* Media query for mobile */
274
- font-size: theme(digitv2.fontSize.heading-l.mobile);
275
- }
276
-
277
- @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
278
- /* Media query for tablets */
279
- font-size: theme(digitv2.fontSize.heading-l.tablet);
280
- }
281
-
282
- @media (min-aspect-ratio: 3/4) {
283
- /* Media query for desktop */
284
- font-size: theme(digitv2.fontSize.heading-l.desktop);
285
- }
286
- }
287
-
288
- &.heading-m {
289
- font-family: theme(digitv2.fontFamily.sans);
290
- font-style: theme(digitv2.fontStyle.normal);
291
- font-weight: theme(digitv2.fontWeight.bold);
292
- line-height: theme(digitv2.lineHeight.lineheight1);
293
-
294
- @media (max-aspect-ratio: 9/16) {
295
- /* Media query for mobile */
296
- font-size: theme(digitv2.fontSize.heading-m.mobile);
297
- }
298
-
299
- @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
300
- /* Media query for tablets */
301
- font-size: theme(digitv2.fontSize.heading-m.tablet);
302
- }
303
-
304
- @media (min-aspect-ratio: 3/4) {
305
- /* Media query for desktop */
306
- font-size: theme(digitv2.fontSize.heading-m.desktop);
307
- }
308
- }
309
-
310
- &.heading-s {
311
- font-family: theme(digitv2.fontFamily.sans);
312
- font-style: theme(digitv2.fontStyle.normal);
313
- font-weight: theme(digitv2.fontWeight.bold);
314
- line-height: theme(digitv2.lineHeight.lineheight1);
315
-
316
- @media (max-aspect-ratio: 9/16) {
317
- /* Media query for mobile */
318
- font-size: theme(digitv2.fontSize.heading-s.mobile);
319
- }
320
-
321
- @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
322
- /* Media query for tablets */
323
- font-size: theme(digitv2.fontSize.heading-s.tablet);
324
- }
325
-
326
- @media (min-aspect-ratio: 3/4) {
327
- /* Media query for desktop */
328
- font-size: theme(digitv2.fontSize.heading-s.desktop);
329
- }
330
- }
331
-
332
- &.heading-xs {
333
- font-family: theme(digitv2.fontFamily.sans);
334
- font-style: theme(digitv2.fontStyle.normal);
335
- font-weight: theme(digitv2.fontWeight.bold);
336
- line-height: theme(digitv2.lineHeight.lineheight1);
337
-
338
- @media (max-aspect-ratio: 9/16) {
339
- /* Media query for mobile */
340
- font-size: theme(digitv2.fontSize.heading-xs.mobile);
341
- }
342
-
343
- @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
344
- /* Media query for tablets */
345
- font-size: theme(digitv2.fontSize.heading-xs.tablet);
346
- }
347
-
348
- @media (min-aspect-ratio: 3/4) {
349
- /* Media query for desktop */
350
- font-size: theme(digitv2.fontSize.heading-xs.desktop);
351
- }
352
- }
353
-
354
- &.caption-l {
355
- font-family: theme(digitv2.fontFamily.sans);
356
- font-style: theme(digitv2.fontStyle.normal);
357
- font-weight: theme(digitv2.fontWeight.medium);
358
- line-height: theme(digitv2.lineHeight.lineheight1);
359
-
360
- @media (max-aspect-ratio: 9/16) {
361
- /* Media query for mobile */
362
- font-size: theme(digitv2.fontSize.caption-l.mobile);
363
- }
364
-
365
- @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
366
- /* Media query for tablets */
367
- font-size: theme(digitv2.fontSize.caption-l.tablet);
368
- }
369
-
370
- @media (min-aspect-ratio: 3/4) {
371
- /* Media query for desktop */
372
- font-size: theme(digitv2.fontSize.caption-l.desktop);
373
- }
374
- }
375
-
376
- &.caption-m {
377
- font-family: theme(digitv2.fontFamily.sans);
378
- font-style: theme(digitv2.fontStyle.normal);
379
- font-weight: theme(digitv2.fontWeight.medium);
380
- line-height: theme(digitv2.lineHeight.lineheight1);
381
-
382
- @media (max-aspect-ratio: 9/16) {
383
- /* Media query for mobile */
384
- font-size: theme(digitv2.fontSize.caption-m.mobile);
385
- }
386
-
387
- @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
388
- /* Media query for tablets */
389
- font-size: theme(digitv2.fontSize.caption-m.tablet);
390
-
391
- }
392
-
393
- @media (min-aspect-ratio: 3/4){
394
- /* Media query for desktop */
395
- font-size: theme(digitv2.fontSize.caption-m.desktop);
396
- }
397
-
398
- }
399
-
400
- &.caption-s {
401
- font-family: theme(digitv2.fontFamily.sans);
402
- font-style: theme(digitv2.fontStyle.normal);
403
- font-weight: theme(digitv2.fontWeight.medium);
404
- line-height: theme(digitv2.lineHeight.lineheight1);
405
-
406
- @media (max-aspect-ratio: 9/16) {
407
- /* Media query for mobile */
408
- font-size: theme(digitv2.fontSize.caption-s.mobile);
409
- }
410
-
411
- @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
412
- /* Media query for tablets */
413
- font-size: theme(digitv2.fontSize.caption-s.tablet);
414
- }
415
-
416
- @media (min-aspect-ratio: 3/4){
417
- /* Media query for desktop */
418
- font-size: theme(digitv2.fontSize.caption-s.desktop);
419
- }
420
-
421
- }
422
-
423
- &.body-l {
424
- font-family: theme(digitv2.fontFamily.sans);
425
- font-style: theme(digitv2.fontStyle.normal);
426
- font-weight: theme(digitv2.fontWeight.regular);
427
- line-height: theme(digitv2.lineHeight.lineheight2);
428
-
429
- @media (max-aspect-ratio: 9/16) {
430
- /* Media query for mobile */
431
- font-size: theme(digitv2.fontSize.body-l.mobile);
432
- }
433
-
434
- @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
435
- /* Media query for tablets */
436
- font-size: theme(digitv2.fontSize.body-l.tablet);
437
- }
438
-
439
- @media (min-aspect-ratio: 3/4) {
440
- /* Media query for desktop */
441
- font-size: theme(digitv2.fontSize.body-l.desktop);
442
- }
443
- }
444
-
445
- &.body-s {
446
- font-family: theme(digitv2.fontFamily.sans);
447
- font-style: theme(digitv2.fontStyle.normal);
448
- font-weight: theme(digitv2.fontWeight.regular);
449
- line-height: theme(digitv2.lineHeight.lineheight2);
450
-
451
- @media (max-aspect-ratio: 9/16) {
452
- /* Media query for mobile */
453
- font-size: theme(digitv2.fontSize.body-s.mobile);
454
- }
455
-
456
- @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
457
- /* Media query for tablets */
458
- font-size: theme(digitv2.fontSize.body-s.tablet);
459
- }
460
-
461
- @media (min-aspect-ratio: 3/4) {
462
- /* Media query for desktop */
463
- font-size: theme(digitv2.fontSize.body-s.desktop);
464
- }
465
- }
466
-
467
- &.body-xs {
468
- font-family: theme(digitv2.fontFamily.sans);
469
- font-style: theme(digitv2.fontStyle.normal);
470
- font-weight: theme(digitv2.fontWeight.regular);
471
- line-height: theme(digitv2.lineHeight.lineheight2);
472
-
473
- @media (max-aspect-ratio: 9/16) {
474
- /* Media query for mobile */
475
- font-size: theme(digitv2.fontSize.body-xs.mobile);
476
- }
477
-
478
- @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
479
- /* Media query for tablets */
480
- font-size: theme(digitv2.fontSize.body-xs.tablet);
481
- }
482
-
483
- @media (min-aspect-ratio: 3/4) {
484
- /* Media query for desktop */
485
- font-size: theme(digitv2.fontSize.body-xs.desktop);
486
- }
487
- }
488
-
489
- &.label {
490
- font-family: theme(digitv2.fontFamily.sans);
491
- font-style: theme(digitv2.fontStyle.normal);
492
- font-weight: theme(digitv2.fontWeight.regular);
493
- line-height: theme(digitv2.lineHeight.lineheight2);
494
-
495
- @media (max-aspect-ratio: 9/16) {
496
- /* Media query for mobile */
497
- font-size: theme(digitv2.fontSize.label.mobile);
498
- }
499
-
500
- @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
501
- /* Media query for tablets */
502
- font-size: theme(digitv2.fontSize.label.tablet);
503
- }
504
-
505
- @media (min-aspect-ratio: 3/4) {
506
- /* Media query for desktop */
507
- font-size: theme(digitv2.fontSize.label.desktop);
508
- }
509
- }
510
-
511
- &.link {
512
- font-family: theme(digitv2.fontFamily.sans);
513
- font-style: theme(digitv2.fontStyle.normal);
514
- font-weight: theme(digitv2.fontWeight.regular);
515
- text-decoration: theme(digitv2.textDecorationLine.underline);
516
- font-size: theme(digitv2.fontSize.link-l.mobile);
517
- }
518
-
519
- &.link-L {
520
- @media (max-aspect-ratio: 9/16) {
521
- /* Media query for mobile */
522
- font-family: theme(digitv2.fontFamily.sans);
523
- font-size: theme(digitv2.fontSize.link-l.mobile);
524
- font-weight: theme(digitv2.fontWeight.regular);
525
- line-height: theme(digitv2.lineHeight.lineheight2);
526
- text-decoration: theme(digitv2.textDecorationLine.underline);
527
- text-decoration-thickness: 0.063rem;
528
- }
529
-
530
- @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4){
531
- /* Media query for tablets */
532
- font-family: theme(digitv2.fontFamily.sans);
533
- font-size: theme(digitv2.fontSize.link-l.tablet);
534
- font-weight: theme(digitv2.fontWeight.regular);
535
- line-height: theme(digitv2.lineHeight.lineheight2);
536
- text-decoration: theme(digitv2.textDecorationLine.underline);
537
- text-decoration-thickness: 0.063rem;
538
- }
539
-
540
- @media (min-aspect-ratio: 3/4) {
541
- /* Media query for desktop */
542
- font-family: theme(digitv2.fontFamily.sans);
543
- font-size: theme(digitv2.fontSize.link-l.desktop);
544
- font-weight: theme(digitv2.fontWeight.regular);
545
- line-height: theme(digitv2.lineHeight.lineheight2);
546
- text-decoration: theme(digitv2.textDecorationLine.underline);
547
- text-decoration-thickness: 0.063rem;
548
- }
549
- }
550
-
551
- &.link-S {
552
- @media (max-aspect-ratio: 9/16) {
553
- /* Media query for mobile */
554
- font-family: theme(digitv2.fontFamily.sans);
555
- font-size: theme(digitv2.fontSize.link-s.mobile);
556
- font-weight: theme(digitv2.fontWeight.regular);
557
- line-height: theme(digitv2.lineHeight.lineheight2);
558
- text-decoration: theme(digitv2.textDecorationLine.underline);
559
- text-decoration-thickness: 0.063rem;
560
- }
561
-
562
- @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
563
- /* Media query for tablets */
564
- font-family: theme(digitv2.fontFamily.sans);
565
- font-size: theme(digitv2.fontSize.link-s.tablet);
566
- font-weight: theme(digitv2.fontWeight.regular);
567
- line-height: theme(digitv2.lineHeight.lineheight2);
568
- text-decoration: theme(digitv2.textDecorationLine.underline);
569
- text-decoration-thickness: 0.063rem;
570
- }
571
-
572
-
573
- @media (min-aspect-ratio: 3/4){
574
- /* Media query for desktop */
575
- font-family: theme(digitv2.fontFamily.sans);
576
- font-size: theme(digitv2.fontSize.link-s.desktop);
577
- font-weight: theme(digitv2.fontWeight.regular);
578
- line-height: theme(digitv2.lineHeight.lineheight2);
579
- text-decoration: theme(digitv2.textDecorationLine.underline);
580
- text-decoration-thickness: 0.063rem;
581
- }
582
- }
583
-
584
- &.link-XS {
585
- @media (max-aspect-ratio: 9/16) {
586
- /* Media query for mobile */
587
- font-family: theme(digitv2.fontFamily.sans);
588
- font-size: theme(digitv2.fontSize.link-xs.mobile);
589
- font-weight: theme(digitv2.fontWeight.regular);
590
- line-height: theme(digitv2.lineHeight.lineheight2);
591
- text-decoration: theme(digitv2.textDecorationLine.underline);
592
- text-decoration-thickness: 0.063rem;
593
- }
594
-
595
- @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
596
- /* Media query for tablets */
597
- font-family: theme(digitv2.fontFamily.sans);
598
- font-size: theme(digitv2.fontSize.link-xs.tablet);
599
- font-weight: theme(digitv2.fontWeight.regular);
600
- line-height: theme(digitv2.lineHeight.lineheight2);
601
- text-decoration: theme(digitv2.textDecorationLine.underline);
602
- text-decoration-thickness: 0.063rem;
603
- }
604
-
605
- @media (min-aspect-ratio: 3/4) {
606
- /* Media query for desktop */
607
- font-family: theme(digitv2.fontFamily.sans);
608
- font-size: theme(digitv2.fontSize.link-xs.desktop);
609
- font-weight: theme(digitv2.fontWeight.regular);
610
- line-height: theme(digitv2.lineHeight.lineheight2);
611
- text-decoration: theme(digitv2.textDecorationLine.underline);
612
- text-decoration-thickness: 0.063rem;
613
- }
614
- }
615
-
616
- &.button {
617
-
618
- &.large {
619
- font-size: theme(digitv2.fontSize.button.large);
620
- line-height: theme(digitv2.lineHeight.lineheight1);
621
- font-family: theme(digitv2.fontFamily.sans);
622
- font-weight: theme(digitv2.fontWeight.medium);
623
- }
624
-
625
- &.medium {
626
- font-size: theme(digitv2.fontSize.button.medium);
627
- line-height: theme(digitv2.lineHeight.lineheight1);
628
- font-family: theme(digitv2.fontFamily.sans);
629
- font-weight: theme(digitv2.fontWeight.medium);
630
- }
631
-
632
- &.small {
633
- font-size: theme(digitv2.fontSize.button.small);
634
- line-height: theme(digitv2.lineHeight.lineheight1);
635
- font-family: theme(digitv2.fontFamily.sans);
636
- font-weight: theme(digitv2.fontWeight.medium);
637
- }
638
- }
1
+ @import url("../index.scss");
2
+
3
+ .typography {
4
+
5
+ &.text-heading-l {
6
+ font-family: theme(digitv2.fontFamily.sans);
7
+ font-style: theme(digitv2.fontStyle.normal);
8
+ font-weight: theme(digitv2.fontWeight.bold);
9
+ color: theme(digitv2.lightTheme.text-primary);
10
+ line-height: theme(digitv2.lineHeight.normal);
11
+
12
+ @media screen and (min-width: theme(digitv2.screens.desktop)) {
13
+ font-size: theme(digitv2.fontSize.heading-l.desktop);
14
+ }
15
+
16
+ @media screen and (min-width: theme(digitv2.screens.tablet)) {
17
+ font-size: theme(digitv2.fontSize.heading-l.tablet);
18
+ }
19
+
20
+ @media screen and (min-width: theme(digitv2.screens.mobile)) {
21
+ font-size: theme(digitv2.fontSize.heading-l.mobile);
22
+ }
23
+ }
24
+
25
+ &.text-heading-m {
26
+ font-family: theme(digitv2.fontFamily.sans);
27
+ font-style: theme(digitv2.fontStyle.normal);
28
+ font-weight: theme(digitv2.fontWeight.bold);
29
+ color: theme(digitv2.lightTheme.text-primary);
30
+ line-height: theme(digitv2.lineHeight.normal);
31
+
32
+ @media screen and (min-width: theme(digitv2.screens.desktop)) {
33
+ font-size: theme(digitv2.fontSize.heading-m.desktop);
34
+ }
35
+
36
+ @media screen and (min-width: theme(digitv2.screens.tablet)) {
37
+ font-size: theme(digitv2.fontSize.heading-m.tablet);
38
+ }
39
+
40
+ @media screen and (min-width: theme(digitv2.screens.mobile)) {
41
+ font-size: theme(digitv2.fontSize.heading-m.desktop);
42
+ }
43
+ }
44
+
45
+ &.text-heading-s {
46
+ font-family: theme(digitv2.fontFamily.sans);
47
+ font-style: theme(digitv2.fontStyle.normal);
48
+ font-weight: theme(digitv2.fontWeight.bold);
49
+ color: theme(digitv2.lightTheme.text-primary);
50
+ line-height: theme(digitv2.lineHeight.normal);
51
+
52
+ @media screen and (min-width: theme(digitv2.screens.desktop)) {
53
+ font-size: theme(digitv2.fontSize.heading-s.desktop);
54
+ }
55
+
56
+ @media screen and (min-width: theme(digitv2.screens.tablet)) {
57
+ font-size: theme(digitv2.fontSize.heading-s.tablet);
58
+ }
59
+
60
+ @media screen and (min-width: theme(digitv2.screens.mobile)) {
61
+ font-size: theme(digitv2.fontSize.heading-s.mobile);
62
+ }
63
+ }
64
+
65
+ &.text-heading-xs {
66
+ @media screen and (min-width: theme(digitv2.screens.mobile)) {
67
+ font-size: theme(digitv2.fontSize.heading-xs.mobile);
68
+ font-family: theme(digitv2.fontFamily.sans);
69
+ font-style: theme(digitv2.fontStyle.normal);
70
+ font-weight: theme(digitv2.fontWeight.bold);
71
+ color: theme(digitv2.lightTheme.text-primary);
72
+ line-height: theme(digitv2.lineHeight.normal);
73
+ }
74
+ }
75
+
76
+ &.text-caption-l {
77
+ font-family: theme(digitv2.fontFamily.sans);
78
+ font-style: theme(digitv2.fontStyle.italic);
79
+ font-weight: theme(digitv2.fontWeight.medium);
80
+ color: theme(digitv2.lightTheme.text-primary);
81
+ line-height: theme(digitv2.lineHeight.normal);
82
+
83
+ @media screen and (min-width: theme(digitv2.screens.desktop)) {
84
+ font-size: theme(digitv2.fontSize.caption-l.desktop);
85
+ }
86
+
87
+ @media screen and (min-width: theme(digitv2.screens.tablet)) {
88
+ font-size: theme(digitv2.fontSize.caption-l.tablet);
89
+ }
90
+
91
+ @media screen and (min-width: theme(digitv2.screens.mobile)) {
92
+ font-size: theme(digitv2.fontSize.caption-l.mobile);
93
+ }
94
+ }
95
+
96
+ &.text-caption-m {
97
+ font-family: theme(digitv2.fontFamily.sans);
98
+ font-style: theme(digitv2.fontStyle.italic);
99
+ font-weight: theme(digitv2.fontWeight.medium);
100
+ color: theme(digitv2.lightTheme.text-primary);
101
+ line-height: theme(digitv2.lineHeight.normal);
102
+
103
+ @media screen and (min-width: theme(digitv2.screens.desktop)) {
104
+ font-size: theme(digitv2.fontSize.caption-m.desktop);
105
+ }
106
+
107
+ @media screen and (min-width: theme(digitv2.screens.tablet)) {
108
+ font-size: theme(digitv2.fontSize.caption-m.tablet);
109
+ }
110
+
111
+ @media screen and (min-width: theme(digitv2.screens.mobile)) {
112
+ font-size: theme(digitv2.fontSize.caption-m.mobile);
113
+ }
114
+ }
115
+
116
+ &.text-caption-s {
117
+ font-family: theme(digitv2.fontFamily.sans);
118
+ font-style: theme(digitv2.fontStyle.italic);
119
+ font-weight: theme(digitv2.fontWeight.medium);
120
+ color: theme(digitv2.lightTheme.text-primary);
121
+ line-height: theme(digitv2.lineHeight.normal);
122
+
123
+ @media screen and (min-width: theme(digitv2.screens.desktop)) {
124
+ font-size: theme(digitv2.fontSize.caption-s.desktop);
125
+ }
126
+
127
+ @media screen and (min-width: theme(digitv2.screens.tablet)) {
128
+ font-size: theme(digitv2.fontSize.caption-s.tablet);
129
+ }
130
+
131
+ @media screen and (min-width: theme(digitv2.screens.mobile)) {
132
+ font-size: theme(digitv2.fontSize.caption-s.desktop);
133
+ }
134
+ }
135
+
136
+ &.text-body-l {
137
+ font-family: theme(digitv2.fontFamily.sans);
138
+ font-style: theme(digitv2.fontStyle.italic);
139
+ font-weight: theme(digitv2.fontWeight.regular);
140
+ color: theme(digitv2.lightTheme.text-primary);
141
+
142
+ @media screen and (min-width: theme(digitv2.screens.desktop)) {
143
+ font-size: theme(digitv2.fontSize.body-l.desktop);
144
+ line-height: theme(digitv2.lineHeight.line-height-body-l.desktop);
145
+ }
146
+
147
+ @media screen and (min-width: theme(digitv2.screens.tablet)) {
148
+ font-size: theme(digitv2.fontSize.body-l.tablet);
149
+ line-height: theme(digitv2.lineHeight.line-height-body-l.tablet);
150
+ }
151
+
152
+ @media screen and (min-width: theme(digitv2.screens.mobile)) {
153
+ font-size: theme(digitv2.fontSize.body-l.mobile);
154
+ line-height: theme(digitv2.lineHeight.line-height-body-l.mobile);
155
+ }
156
+ }
157
+
158
+ &.text-body-s {
159
+ font-family: theme(digitv2.fontFamily.sans);
160
+ font-style: theme(digitv2.fontStyle.italic);
161
+ font-weight: theme(digitv2.fontWeight.regular);
162
+ color: theme(digitv2.lightTheme.text-primary);
163
+
164
+ @media screen and (min-width: theme(digitv2.screens.desktop)) {
165
+ font-size: theme(digitv2.fontSize.body-s.desktop);
166
+ line-height: theme(digitv2.lineHeight.line-height-body-s.desktop);
167
+ }
168
+
169
+ @media screen and (min-width: theme(digitv2.screens.tablet)) {
170
+ font-size: theme(digitv2.fontSize.body-s.tablet);
171
+ line-height: theme(digitv2.lineHeight.line-height-body-s.tablet);
172
+ }
173
+
174
+ @media screen and (min-width: theme(digitv2.screens.mobile)) {
175
+ font-size: theme(digitv2.fontSize.body-s.mobile);
176
+ line-height: theme(digitv2.lineHeight.line-height-body-s.mobile);
177
+ }
178
+ }
179
+
180
+ &.text-body-xs {
181
+ font-family: theme(digitv2.fontFamily.sans);
182
+ font-style: theme(digitv2.fontStyle.italic);
183
+ font-weight: theme(digitv2.fontWeight.regular);
184
+ color: theme(digitv2.lightTheme.text-primary);
185
+
186
+ @media screen and (min-width: theme(digitv2.screens.desktop)) {
187
+ font-size: theme(digitv2.fontSize.body-xs.desktop);
188
+ line-height: theme(digitv2.lineHeight.line-height-body-xs.desktop);
189
+ }
190
+
191
+ @media screen and (min-width: theme(digitv2.screens.tablet)) {
192
+ font-size: theme(digitv2.fontSize.body-xs.tablet);
193
+ line-height: theme(digitv2.lineHeight.line-height-body-xs.tablet);
194
+ }
195
+
196
+ @media screen and (min-width: theme(digitv2.screens.mobile)) {
197
+ font-size: theme(digitv2.fontSize.body-xs.mobile);
198
+ line-height: theme(digitv2.lineHeight.line-height-body-xs.mobile);
199
+ }
200
+ }
201
+
202
+ &.text-label {
203
+ font-family: theme(digitv2.fontFamily.sans);
204
+ font-style: theme(digitv2.fontStyle.italic);
205
+ font-weight: theme(digitv2.fontWeight.regular);
206
+ color: theme(digitv2.lightTheme.text-primary);
207
+ line-height: theme(digitv2.lineHeight.normal);
208
+
209
+ @media screen and (min-width: theme(digitv2.screens.desktop)) {
210
+ font-size: theme(digitv2.fontSize.label.desktop);
211
+ }
212
+
213
+ @media screen and (min-width: theme(digitv2.screens.tablet)) {
214
+ font-size: theme(digitv2.fontSize.label.tablet);
215
+ }
216
+
217
+ @media screen and (min-width: theme(digitv2.screens.mobile)) {
218
+ font-size: theme(digitv2.fontSize.label.mobile);
219
+ }
220
+ }
221
+
222
+ &.text-link {
223
+ font-family: theme(digitv2.fontFamily.sans);
224
+ font-style: theme(digitv2.fontStyle.normal);
225
+ font-weight: theme(digitv2.fontWeight.regular);
226
+ color: theme(digitv2.lightTheme.text-primary);
227
+ line-height: theme(digitv2.lineHeight.normal);
228
+ text-decoration: theme(digitv2.textDecorationLine.underline);
229
+
230
+ @media screen and (min-width: theme(digitv2.screens.desktop)) {
231
+ font-size: theme(digitv2.fontSize.link.desktop);
232
+ }
233
+
234
+ @media screen and (min-width: theme(digitv2.screens.tablet)) {
235
+ font-size: theme(digitv2.fontSize.link.tablet);
236
+ }
237
+
238
+ @media screen and (min-width: theme(digitv2.screens.mobile)) {
239
+ font-size: theme(digitv2.fontSize.link.mobile);
240
+ }
241
+ }
242
+
243
+
244
+ &.heading-xl {
245
+ font-family: theme(digitv2.fontFamily.rc);
246
+ font-style: theme(digitv2.fontStyle.normal);
247
+ font-weight: theme(digitv2.fontWeight.bold);
248
+ line-height: theme(digitv2.lineHeight.lineheight1);
249
+
250
+ @media (max-aspect-ratio: 9/16) {
251
+ /* Media query for mobile */
252
+ font-size: theme(digitv2.fontSize.heading-xl.mobile);
253
+ }
254
+
255
+ @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
256
+ /* Media query for tablets */
257
+ font-size: theme(digitv2.fontSize.heading-xl.tablet);
258
+ }
259
+
260
+ @media (min-aspect-ratio: 3/4) {
261
+ /* Media query for desktop */
262
+ font-size: theme(digitv2.fontSize.heading-xl.desktop);
263
+ }
264
+ }
265
+
266
+ &.heading-l {
267
+ font-family: theme(digitv2.fontFamily.sans);
268
+ font-style: theme(digitv2.fontStyle.normal);
269
+ font-weight: theme(digitv2.fontWeight.bold);
270
+ line-height: theme(digitv2.lineHeight.lineheight1);
271
+
272
+ @media (max-aspect-ratio: 9/16) {
273
+ /* Media query for mobile */
274
+ font-size: theme(digitv2.fontSize.heading-l.mobile);
275
+ }
276
+
277
+ @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
278
+ /* Media query for tablets */
279
+ font-size: theme(digitv2.fontSize.heading-l.tablet);
280
+ }
281
+
282
+ @media (min-aspect-ratio: 3/4) {
283
+ /* Media query for desktop */
284
+ font-size: theme(digitv2.fontSize.heading-l.desktop);
285
+ }
286
+ }
287
+
288
+ &.heading-m {
289
+ font-family: theme(digitv2.fontFamily.sans);
290
+ font-style: theme(digitv2.fontStyle.normal);
291
+ font-weight: theme(digitv2.fontWeight.bold);
292
+ line-height: theme(digitv2.lineHeight.lineheight1);
293
+
294
+ @media (max-aspect-ratio: 9/16) {
295
+ /* Media query for mobile */
296
+ font-size: theme(digitv2.fontSize.heading-m.mobile);
297
+ }
298
+
299
+ @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
300
+ /* Media query for tablets */
301
+ font-size: theme(digitv2.fontSize.heading-m.tablet);
302
+ }
303
+
304
+ @media (min-aspect-ratio: 3/4) {
305
+ /* Media query for desktop */
306
+ font-size: theme(digitv2.fontSize.heading-m.desktop);
307
+ }
308
+ }
309
+
310
+ &.heading-s {
311
+ font-family: theme(digitv2.fontFamily.sans);
312
+ font-style: theme(digitv2.fontStyle.normal);
313
+ font-weight: theme(digitv2.fontWeight.bold);
314
+ line-height: theme(digitv2.lineHeight.lineheight1);
315
+
316
+ @media (max-aspect-ratio: 9/16) {
317
+ /* Media query for mobile */
318
+ font-size: theme(digitv2.fontSize.heading-s.mobile);
319
+ }
320
+
321
+ @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
322
+ /* Media query for tablets */
323
+ font-size: theme(digitv2.fontSize.heading-s.tablet);
324
+ }
325
+
326
+ @media (min-aspect-ratio: 3/4) {
327
+ /* Media query for desktop */
328
+ font-size: theme(digitv2.fontSize.heading-s.desktop);
329
+ }
330
+ }
331
+
332
+ &.heading-xs {
333
+ font-family: theme(digitv2.fontFamily.sans);
334
+ font-style: theme(digitv2.fontStyle.normal);
335
+ font-weight: theme(digitv2.fontWeight.bold);
336
+ line-height: theme(digitv2.lineHeight.lineheight1);
337
+
338
+ @media (max-aspect-ratio: 9/16) {
339
+ /* Media query for mobile */
340
+ font-size: theme(digitv2.fontSize.heading-xs.mobile);
341
+ }
342
+
343
+ @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
344
+ /* Media query for tablets */
345
+ font-size: theme(digitv2.fontSize.heading-xs.tablet);
346
+ }
347
+
348
+ @media (min-aspect-ratio: 3/4) {
349
+ /* Media query for desktop */
350
+ font-size: theme(digitv2.fontSize.heading-xs.desktop);
351
+ }
352
+ }
353
+
354
+ &.caption-l {
355
+ font-family: theme(digitv2.fontFamily.sans);
356
+ font-style: theme(digitv2.fontStyle.normal);
357
+ font-weight: theme(digitv2.fontWeight.medium);
358
+ line-height: theme(digitv2.lineHeight.lineheight1);
359
+
360
+ @media (max-aspect-ratio: 9/16) {
361
+ /* Media query for mobile */
362
+ font-size: theme(digitv2.fontSize.caption-l.mobile);
363
+ }
364
+
365
+ @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
366
+ /* Media query for tablets */
367
+ font-size: theme(digitv2.fontSize.caption-l.tablet);
368
+ }
369
+
370
+ @media (min-aspect-ratio: 3/4) {
371
+ /* Media query for desktop */
372
+ font-size: theme(digitv2.fontSize.caption-l.desktop);
373
+ }
374
+ }
375
+
376
+ &.caption-m {
377
+ font-family: theme(digitv2.fontFamily.sans);
378
+ font-style: theme(digitv2.fontStyle.normal);
379
+ font-weight: theme(digitv2.fontWeight.medium);
380
+ line-height: theme(digitv2.lineHeight.lineheight1);
381
+
382
+ @media (max-aspect-ratio: 9/16) {
383
+ /* Media query for mobile */
384
+ font-size: theme(digitv2.fontSize.caption-m.mobile);
385
+ }
386
+
387
+ @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
388
+ /* Media query for tablets */
389
+ font-size: theme(digitv2.fontSize.caption-m.tablet);
390
+
391
+ }
392
+
393
+ @media (min-aspect-ratio: 3/4){
394
+ /* Media query for desktop */
395
+ font-size: theme(digitv2.fontSize.caption-m.desktop);
396
+ }
397
+
398
+ }
399
+
400
+ &.caption-s {
401
+ font-family: theme(digitv2.fontFamily.sans);
402
+ font-style: theme(digitv2.fontStyle.normal);
403
+ font-weight: theme(digitv2.fontWeight.medium);
404
+ line-height: theme(digitv2.lineHeight.lineheight1);
405
+
406
+ @media (max-aspect-ratio: 9/16) {
407
+ /* Media query for mobile */
408
+ font-size: theme(digitv2.fontSize.caption-s.mobile);
409
+ }
410
+
411
+ @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
412
+ /* Media query for tablets */
413
+ font-size: theme(digitv2.fontSize.caption-s.tablet);
414
+ }
415
+
416
+ @media (min-aspect-ratio: 3/4){
417
+ /* Media query for desktop */
418
+ font-size: theme(digitv2.fontSize.caption-s.desktop);
419
+ }
420
+
421
+ }
422
+
423
+ &.body-l {
424
+ font-family: theme(digitv2.fontFamily.sans);
425
+ font-style: theme(digitv2.fontStyle.normal);
426
+ font-weight: theme(digitv2.fontWeight.regular);
427
+ line-height: theme(digitv2.lineHeight.lineheight2);
428
+
429
+ @media (max-aspect-ratio: 9/16) {
430
+ /* Media query for mobile */
431
+ font-size: theme(digitv2.fontSize.body-l.mobile);
432
+ }
433
+
434
+ @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
435
+ /* Media query for tablets */
436
+ font-size: theme(digitv2.fontSize.body-l.tablet);
437
+ }
438
+
439
+ @media (min-aspect-ratio: 3/4) {
440
+ /* Media query for desktop */
441
+ font-size: theme(digitv2.fontSize.body-l.desktop);
442
+ }
443
+ }
444
+
445
+ &.body-s {
446
+ font-family: theme(digitv2.fontFamily.sans);
447
+ font-style: theme(digitv2.fontStyle.normal);
448
+ font-weight: theme(digitv2.fontWeight.regular);
449
+ line-height: theme(digitv2.lineHeight.lineheight2);
450
+
451
+ @media (max-aspect-ratio: 9/16) {
452
+ /* Media query for mobile */
453
+ font-size: theme(digitv2.fontSize.body-s.mobile);
454
+ }
455
+
456
+ @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
457
+ /* Media query for tablets */
458
+ font-size: theme(digitv2.fontSize.body-s.tablet);
459
+ }
460
+
461
+ @media (min-aspect-ratio: 3/4) {
462
+ /* Media query for desktop */
463
+ font-size: theme(digitv2.fontSize.body-s.desktop);
464
+ }
465
+ }
466
+
467
+ &.body-xs {
468
+ font-family: theme(digitv2.fontFamily.sans);
469
+ font-style: theme(digitv2.fontStyle.normal);
470
+ font-weight: theme(digitv2.fontWeight.regular);
471
+ line-height: theme(digitv2.lineHeight.lineheight2);
472
+
473
+ @media (max-aspect-ratio: 9/16) {
474
+ /* Media query for mobile */
475
+ font-size: theme(digitv2.fontSize.body-xs.mobile);
476
+ }
477
+
478
+ @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
479
+ /* Media query for tablets */
480
+ font-size: theme(digitv2.fontSize.body-xs.tablet);
481
+ }
482
+
483
+ @media (min-aspect-ratio: 3/4) {
484
+ /* Media query for desktop */
485
+ font-size: theme(digitv2.fontSize.body-xs.desktop);
486
+ }
487
+ }
488
+
489
+ &.label {
490
+ font-family: theme(digitv2.fontFamily.sans);
491
+ font-style: theme(digitv2.fontStyle.normal);
492
+ font-weight: theme(digitv2.fontWeight.regular);
493
+ line-height: theme(digitv2.lineHeight.lineheight2);
494
+
495
+ @media (max-aspect-ratio: 9/16) {
496
+ /* Media query for mobile */
497
+ font-size: theme(digitv2.fontSize.label.mobile);
498
+ }
499
+
500
+ @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
501
+ /* Media query for tablets */
502
+ font-size: theme(digitv2.fontSize.label.tablet);
503
+ }
504
+
505
+ @media (min-aspect-ratio: 3/4) {
506
+ /* Media query for desktop */
507
+ font-size: theme(digitv2.fontSize.label.desktop);
508
+ }
509
+ }
510
+
511
+ &.link {
512
+ font-family: theme(digitv2.fontFamily.sans);
513
+ font-style: theme(digitv2.fontStyle.normal);
514
+ font-weight: theme(digitv2.fontWeight.regular);
515
+ text-decoration: theme(digitv2.textDecorationLine.underline);
516
+ font-size: theme(digitv2.fontSize.link-l.mobile);
517
+ }
518
+
519
+ &.link-L {
520
+ @media (max-aspect-ratio: 9/16) {
521
+ /* Media query for mobile */
522
+ font-family: theme(digitv2.fontFamily.sans);
523
+ font-size: theme(digitv2.fontSize.link-l.mobile);
524
+ font-weight: theme(digitv2.fontWeight.regular);
525
+ line-height: theme(digitv2.lineHeight.lineheight2);
526
+ text-decoration: theme(digitv2.textDecorationLine.underline);
527
+ text-decoration-thickness: 0.063rem;
528
+ }
529
+
530
+ @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4){
531
+ /* Media query for tablets */
532
+ font-family: theme(digitv2.fontFamily.sans);
533
+ font-size: theme(digitv2.fontSize.link-l.tablet);
534
+ font-weight: theme(digitv2.fontWeight.regular);
535
+ line-height: theme(digitv2.lineHeight.lineheight2);
536
+ text-decoration: theme(digitv2.textDecorationLine.underline);
537
+ text-decoration-thickness: 0.063rem;
538
+ }
539
+
540
+ @media (min-aspect-ratio: 3/4) {
541
+ /* Media query for desktop */
542
+ font-family: theme(digitv2.fontFamily.sans);
543
+ font-size: theme(digitv2.fontSize.link-l.desktop);
544
+ font-weight: theme(digitv2.fontWeight.regular);
545
+ line-height: theme(digitv2.lineHeight.lineheight2);
546
+ text-decoration: theme(digitv2.textDecorationLine.underline);
547
+ text-decoration-thickness: 0.063rem;
548
+ }
549
+ }
550
+
551
+ &.link-S {
552
+ @media (max-aspect-ratio: 9/16) {
553
+ /* Media query for mobile */
554
+ font-family: theme(digitv2.fontFamily.sans);
555
+ font-size: theme(digitv2.fontSize.link-s.mobile);
556
+ font-weight: theme(digitv2.fontWeight.regular);
557
+ line-height: theme(digitv2.lineHeight.lineheight2);
558
+ text-decoration: theme(digitv2.textDecorationLine.underline);
559
+ text-decoration-thickness: 0.063rem;
560
+ }
561
+
562
+ @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
563
+ /* Media query for tablets */
564
+ font-family: theme(digitv2.fontFamily.sans);
565
+ font-size: theme(digitv2.fontSize.link-s.tablet);
566
+ font-weight: theme(digitv2.fontWeight.regular);
567
+ line-height: theme(digitv2.lineHeight.lineheight2);
568
+ text-decoration: theme(digitv2.textDecorationLine.underline);
569
+ text-decoration-thickness: 0.063rem;
570
+ }
571
+
572
+
573
+ @media (min-aspect-ratio: 3/4){
574
+ /* Media query for desktop */
575
+ font-family: theme(digitv2.fontFamily.sans);
576
+ font-size: theme(digitv2.fontSize.link-s.desktop);
577
+ font-weight: theme(digitv2.fontWeight.regular);
578
+ line-height: theme(digitv2.lineHeight.lineheight2);
579
+ text-decoration: theme(digitv2.textDecorationLine.underline);
580
+ text-decoration-thickness: 0.063rem;
581
+ }
582
+ }
583
+
584
+ &.link-XS {
585
+ @media (max-aspect-ratio: 9/16) {
586
+ /* Media query for mobile */
587
+ font-family: theme(digitv2.fontFamily.sans);
588
+ font-size: theme(digitv2.fontSize.link-xs.mobile);
589
+ font-weight: theme(digitv2.fontWeight.regular);
590
+ line-height: theme(digitv2.lineHeight.lineheight2);
591
+ text-decoration: theme(digitv2.textDecorationLine.underline);
592
+ text-decoration-thickness: 0.063rem;
593
+ }
594
+
595
+ @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
596
+ /* Media query for tablets */
597
+ font-family: theme(digitv2.fontFamily.sans);
598
+ font-size: theme(digitv2.fontSize.link-xs.tablet);
599
+ font-weight: theme(digitv2.fontWeight.regular);
600
+ line-height: theme(digitv2.lineHeight.lineheight2);
601
+ text-decoration: theme(digitv2.textDecorationLine.underline);
602
+ text-decoration-thickness: 0.063rem;
603
+ }
604
+
605
+ @media (min-aspect-ratio: 3/4) {
606
+ /* Media query for desktop */
607
+ font-family: theme(digitv2.fontFamily.sans);
608
+ font-size: theme(digitv2.fontSize.link-xs.desktop);
609
+ font-weight: theme(digitv2.fontWeight.regular);
610
+ line-height: theme(digitv2.lineHeight.lineheight2);
611
+ text-decoration: theme(digitv2.textDecorationLine.underline);
612
+ text-decoration-thickness: 0.063rem;
613
+ }
614
+ }
615
+
616
+ &.button {
617
+
618
+ &.large {
619
+ font-size: theme(digitv2.fontSize.button.large);
620
+ line-height: theme(digitv2.lineHeight.lineheight1);
621
+ font-family: theme(digitv2.fontFamily.sans);
622
+ font-weight: theme(digitv2.fontWeight.medium);
623
+ }
624
+
625
+ &.medium {
626
+ font-size: theme(digitv2.fontSize.button.medium);
627
+ line-height: theme(digitv2.lineHeight.lineheight1);
628
+ font-family: theme(digitv2.fontFamily.sans);
629
+ font-weight: theme(digitv2.fontWeight.medium);
630
+ }
631
+
632
+ &.small {
633
+ font-size: theme(digitv2.fontSize.button.small);
634
+ line-height: theme(digitv2.lineHeight.lineheight1);
635
+ font-family: theme(digitv2.fontFamily.sans);
636
+ font-weight: theme(digitv2.fontWeight.medium);
637
+ }
638
+ }
639
639
  }