@egovernments/digit-ui-components-css 0.2.0-beta.9 → 0.2.0-rc.16

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