@egovernments/digit-ui-components-css 0.0.2-beta.32 → 0.0.2-beta.34

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (19) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/dist/index.css +287 -40
  3. package/dist/index.min.css +2 -2
  4. package/package.json +1 -1
  5. package/src/digitv2/components/bottomSheetV2.scss +8 -0
  6. package/src/digitv2/components/buttonsV2.scss +1 -2
  7. package/src/digitv2/components/cardV2.scss +9 -9
  8. package/src/digitv2/components/chipV2.scss +25 -0
  9. package/src/digitv2/components/dividerV2.scss +1 -0
  10. package/src/digitv2/components/landingpagecardV2.scss +8 -1
  11. package/src/digitv2/components/menuCardV2.scss +5 -0
  12. package/src/digitv2/components/multiSelectDropdownV2.scss +53 -6
  13. package/src/digitv2/components/radiobtnV2.scss +2 -2
  14. package/src/digitv2/components/selectDropdownV2.scss +2 -2
  15. package/src/digitv2/components/selectionCardV2.scss +1 -0
  16. package/src/digitv2/components/stepperV2.scss +38 -2
  17. package/src/digitv2/components/tabV2.scss +107 -0
  18. package/src/digitv2/index.scss +62 -0
  19. package/src/digitv2/typography.scss +24 -9
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@egovernments/digit-ui-components-css",
3
- "version": "0.0.2-beta.32",
3
+ "version": "0.0.2-beta.34",
4
4
  "license": "MIT",
5
5
  "main": "dist/index.css",
6
6
  "author": "Jagankumar <jagan.kumar@egovernments.org>",
package/src/digitv2/components/bottomSheetV2.scss CHANGED
@@ -52,6 +52,14 @@
52
52
  margin: theme(digitv2.spacers.spacer2) theme(digitv2.spacers.spacer0);
53
53
  }
54
54
 
55
+ .digit-bottom-sheet-header{
56
+ &.full {
57
+ .digit-bottom-sheet-handle-indicator{
58
+ display: none;
59
+ }
60
+ }
61
+ }
62
+
55
63
  .digit-bottom-sheet-content {
56
64
  padding: theme(digitv2.spacers.spacer4);
57
65
  overflow-y: scroll;
package/src/digitv2/components/buttonsV2.scss CHANGED
@@ -4,8 +4,7 @@
4
4
  @apply flex max-w-full items-center;
5
5
  gap: theme(digitv2.spacers.spacer2);
6
6
 
7
- &.small,
8
- &.medium {
7
+ &.small{
9
8
  gap: theme(digitv2.spacers.spacer1);
10
9
  }
11
10
 
package/src/digitv2/components/cardV2.scss CHANGED
@@ -388,7 +388,7 @@
388
388
 
389
389
  width: 100%;
390
390
  height: auto;
391
- background-color: #ffffff;
391
+ background-color: theme(digitv2.lightTheme.paper-primary);
392
392
  border-radius: theme(digitv2.spacers.spacer1);
393
393
  box-shadow: 0rem 0.063rem 0.125rem 0rem #00000029;
394
394
  display: flex;
@@ -396,8 +396,8 @@
396
396
  flex-direction: column;
397
397
 
398
398
  &.secondary {
399
- background-color: #FAFAFA;
400
- border: 0.063em solid #d6d5d4;
399
+ background-color: theme(digitv2.lightTheme.paper-secondary);
400
+ border: 0.063em solid theme(digitv2.lightTheme.generic-divider);
401
401
  }
402
402
 
403
403
  &.secondary.search,
@@ -422,7 +422,7 @@
422
422
  }
423
423
 
424
424
 
425
- @media (min-width: 30.063rem) and (max-width: 47.938rem) {
425
+ @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
426
426
  flex-direction: row;
427
427
 
428
428
  .digit-buttons-group {
@@ -436,11 +436,11 @@
436
436
  }
437
437
  }
438
438
 
439
- @media (min-width: 48rem) {
439
+ @media (min-aspect-ratio: 3/4) {
440
440
  flex-direction: row;
441
441
  }
442
442
 
443
- @media (max-width: 30rem) {
443
+ @media (max-aspect-ratio: 9/16){
444
444
  flex-direction: column;
445
445
 
446
446
  .digit-buttons-group {
@@ -458,15 +458,15 @@
458
458
  }
459
459
  }
460
460
 
461
- @media (min-width: 30.063rem) and (max-width: 47.938rem) {
461
+ @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
462
462
  padding: theme(digitv2.spacers.spacer5);
463
463
  }
464
464
 
465
- @media (min-width: 48rem) {
465
+ @media (min-aspect-ratio: 3/4) {
466
466
  padding: theme(digitv2.spacers.spacer6);
467
467
  }
468
468
 
469
- @media (max-width: 30rem) {
469
+ @media (max-aspect-ratio: 9/16) {
470
470
  padding: theme(digitv2.spacers.spacer4);
471
471
  }
472
472
 
package/src/digitv2/components/chipV2.scss CHANGED
@@ -49,6 +49,25 @@
49
49
  .digit-text {
50
50
  @extend .typography.body-xs;
51
51
  @apply overflow-hidden items-center whitespace-no-wrap;
52
+ font-family: theme(digitv2.fontFamily.sans);
53
+ font-style: theme(digitv2.fontStyle.normal);
54
+ font-weight: theme(digitv2.fontWeight.regular);
55
+ line-height: theme(digitv2.lineHeight.lineheight2);
56
+
57
+ @media (max-aspect-ratio: 9/16) {
58
+ /* Media query for mobile */
59
+ font-size: theme(digitv2.fontSize.body-xs.mobile);
60
+ }
61
+
62
+ @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
63
+ /* Media query for tablets */
64
+ font-size: theme(digitv2.fontSize.body-xs.tablet);
65
+ }
66
+
67
+ @media (min-aspect-ratio: 3/4) {
68
+ /* Media query for desktop */
69
+ font-size: theme(digitv2.fontSize.body-xs.desktop);
70
+ }
52
71
  max-width: calc(100% - (theme(digitv2.spacers.spacer7)));
53
72
  width: calc(100% - (theme(digitv2.spacers.spacer7)));
54
73
  text-overflow: clip;
@@ -120,6 +139,12 @@
120
139
  }
121
140
  }
122
141
 
142
+ .digit-tag{
143
+ &.noClose{
144
+ display: inline;
145
+ }
146
+ }
147
+
123
148
  .cp{
124
149
  cursor: pointer;
125
150
  }
package/src/digitv2/components/dividerV2.scss CHANGED
@@ -1,5 +1,6 @@
1
1
  .digit-divider {
2
2
  border: theme(digitv2.divider.dividerS);
3
+ width: 100%;
3
4
 
4
5
  &.medium {
5
6
  border: theme(digitv2.divider.dividerM);
package/src/digitv2/components/landingpagecardV2.scss CHANGED
@@ -31,10 +31,17 @@
31
31
  align-items: center;
32
32
 
33
33
  &.iconBg {
34
- background-color: theme(digitv2.lightTheme.primary-1);
34
+ background-color: theme(digitv2.lightTheme.primary-1);
35
+ border-radius: 0.125rem;
35
36
  }
36
37
  }
37
38
 
39
+ &.right{
40
+ &.iconBg {
41
+ gap:theme(digitv2.spacers.spacer4);
42
+ }
43
+ }
44
+
38
45
  svg {
39
46
  flex-shrink: 0;
40
47
  }
package/src/digitv2/components/menuCardV2.scss CHANGED
@@ -6,6 +6,11 @@
6
6
  justify-content: flex-start;
7
7
  cursor: pointer;
8
8
 
9
+ &.clickable:hover{
10
+ border: 0.063rem solid theme(digitv2.lightTheme.primary-1);
11
+ box-shadow: 0.063rem theme(digitv2.spacers.spacer1) theme(digitv2.spacers.spacer1) theme(digitv2.spacers.spacer0) #00000029;
12
+ }
13
+
9
14
  .icon-menu-header {
10
15
 
11
16
  display: flex !important;
package/src/digitv2/components/multiSelectDropdownV2.scss CHANGED
@@ -38,6 +38,23 @@
38
38
  }
39
39
  }
40
40
  }
41
+
42
+ .digit-multiselectdropdown-master-active{
43
+ &.serachable{
44
+ input[type="text"]{
45
+ opacity: 1;
46
+ width: calc(100%-24px);
47
+ }
48
+
49
+ .digit-multiselectdropdown-label {
50
+ svg {
51
+ z-index: 1;
52
+ cursor: pointer;
53
+ }
54
+ }
55
+ }
56
+ }
57
+
41
58
  .digit-multiselectdropdown-master {
42
59
  &.disabled {
43
60
  pointer-events: none !important;
@@ -153,7 +170,7 @@
153
170
  }
154
171
  }
155
172
  }
156
- &.nestedmultiselect {
173
+ &.nestedmultiselect:not(.unsuccessfulresults){
157
174
  position: relative;
158
175
  &:not(.selectAll)::before {
159
176
  content: "";
@@ -334,6 +351,33 @@
334
351
  color: theme(digitv2.lightTheme.primary-1);
335
352
  }
336
353
  }
354
+ &.unsuccessfulresults {
355
+ background-color: theme(digitv2.lightTheme.paper-secondary);
356
+ pointer-events: none;
357
+ span {
358
+ @extend .typography.body-s;
359
+ font-family: theme(digitv2.fontFamily.sans);
360
+ font-style: theme(digitv2.fontStyle.normal);
361
+ font-weight: theme(digitv2.fontWeight.regular);
362
+ line-height: theme(digitv2.lineHeight.lineheight2);
363
+
364
+ @media (max-aspect-ratio: 9/16) {
365
+ /* Media query for mobile */
366
+ font-size: theme(digitv2.fontSize.body-s.mobile);
367
+ }
368
+
369
+ @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
370
+ /* Media query for tablets */
371
+ font-size: theme(digitv2.fontSize.body-s.tablet);
372
+ }
373
+
374
+ @media (min-aspect-ratio: 3/4) {
375
+ /* Media query for desktop */
376
+ font-size: theme(digitv2.fontSize.body-s.desktop);
377
+ }
378
+ color: theme(digitv2.lightTheme.text-disabled);
379
+ }
380
+ }
337
381
  }
338
382
  .digit-cursorPointer {
339
383
  @apply cursor-pointer;
@@ -343,11 +387,14 @@
343
387
  .digit-multiselectdropdown-label {
344
388
  p {
345
389
  white-space: pre;
346
- margin: auto;
347
- margin-left: theme(digitv2.spacers.spacer0);
348
- padding-left: 1%;
349
- font-size: theme(digitv2.spacers.spacer4);
350
- line-height: theme(digitv2.spacers.spacer6);
390
+ margin: auto;
391
+ margin-left: theme(digitv2.spacers.spacer0);
392
+ padding-left: 1%;
393
+ font-size: theme(digitv2.spacers.spacer4);
394
+ line-height: theme(digitv2.spacers.spacer6);
395
+ font-family: theme(digitv2.fontFamily.sans);
396
+ font-weight: theme(digitv2.fontWeight.regular);
397
+ text-align: left;
351
398
  }
352
399
  }
353
400
  }
package/src/digitv2/components/radiobtnV2.scss CHANGED
@@ -51,8 +51,7 @@
51
51
  pointer-events: none !important;
52
52
  }
53
53
 
54
- &.disabled,
55
- &.preselected {
54
+ &:not(.preselected):not(.has-preselected).disabled{
56
55
  label {
57
56
  color: theme(digitv2.lightTheme.text-disabled);
58
57
  }
@@ -80,6 +79,7 @@
80
79
  font-style: theme(digitv2.fontStyle.normal);
81
80
  font-weight: theme(digitv2.fontWeight.regular);
82
81
  line-height: theme(digitv2.lineHeight.lineheight2);
82
+ margin-top: 0.065rem;
83
83
 
84
84
  @media (max-aspect-ratio: 9/16) {
85
85
  /* Media query for mobile */
package/src/digitv2/components/selectDropdownV2.scss CHANGED
@@ -49,7 +49,7 @@
49
49
  }
50
50
  }
51
51
  .digit-dropdown-select-active {
52
- @apply relative block w-full h-10;
52
+ @apply relative block w-full h-10 bg-white;
53
53
  border: 0.063rem solid theme(digitv2.lightTheme.primary-1);
54
54
  input[type="text"] {
55
55
  @extend .typography.body-l;
@@ -189,7 +189,7 @@
189
189
  &:not(.nesteddropdown, .treedropdown):not(:active):nth-of-type(even) {
190
190
  background: theme(digitv2.lightTheme.paper-secondary);
191
191
  }
192
- &.nesteddropdown {
192
+ &:not(.unsuccessfulresults).nesteddropdown {
193
193
  position: relative;
194
194
  height: 2.4375rem;
195
195
  &::before {
package/src/digitv2/components/selectionCardV2.scss CHANGED
@@ -2,6 +2,7 @@
2
2
  display: flex;
3
3
  flex-direction: column;
4
4
  align-items: flex-start;
5
+ gap:theme(digitv2.spacers.spacer1);
5
6
  }
6
7
 
7
8
  .selection-card {
package/src/digitv2/components/stepperV2.scss CHANGED
@@ -10,6 +10,18 @@
10
10
  @apply relative flex-1;
11
11
  min-height: 4rem;
12
12
  z-index: 1;
13
+
14
+ @media (max-aspect-ratio: 9/16) {
15
+ min-width: 3.75rem;
16
+ }
17
+
18
+ @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
19
+ min-width: 5rem;
20
+ }
21
+
22
+ @media (min-aspect-ratio: 3/4) {
23
+ min-width: 6.25rem;
24
+ }
13
25
  }
14
26
 
15
27
  .digit-stepper-content {
@@ -98,18 +110,30 @@
98
110
  height: 0.125rem;
99
111
 
100
112
  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
113
+ min-width: 6.313rem;
101
114
  max-width: 39.438rem;
102
115
  }
103
116
 
104
117
  @media (max-aspect-ratio: 9/16) {
118
+ min-width: 4.313rem;
105
119
  max-width: 16.875rem;
106
120
  top: 0.875rem;
107
121
  }
108
122
 
109
123
  @media (min-aspect-ratio: 3/4) {
124
+ min-width: 5.313rem;
110
125
  max-width: 82.688rem;
111
126
  }
112
127
 
128
+ &.lastbutone{
129
+ @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
130
+ min-width: unset;
131
+ }
132
+
133
+ @media (max-aspect-ratio: 9/16) {
134
+ min-width: unset;
135
+ }
136
+ }
113
137
  &.active {
114
138
  background-color: theme(digitv2.lightTheme.primary-1);
115
139
  border-color: theme(digitv2.lightTheme.primary-1);
@@ -129,6 +153,12 @@
129
153
  background-color: transparent;
130
154
  border-color: theme(digitv2.lightTheme.primary-1);
131
155
  }
156
+ @media (max-aspect-ratio: 9/16) {
157
+ left: -2.75rem;
158
+ }
159
+ @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
160
+ left: -3.5rem;
161
+ }
132
162
  }
133
163
  }
134
164
 
@@ -148,8 +178,8 @@
148
178
  }
149
179
 
150
180
  .digit-stepper-container::-webkit-scrollbar {
151
- width: theme(digitv2.spacers.spacer2);
152
- height: theme(digitv2.spacers.spacer2);
181
+ width: theme(digitv2.spacers.spacer0);
182
+ height: theme(digitv2.spacers.spacer0);
153
183
  background-color: theme(digitv2.lightTheme.generic-background);
154
184
  }
155
185
 
@@ -161,4 +191,10 @@
161
191
  .digit-stepper-container::-webkit-scrollbar-thumb {
162
192
  background-color: theme(digitv2.lightTheme.generic-divider);
163
193
  border-radius: 0.563rem;
194
+ }
195
+
196
+ .stepper-vertical-divider{
197
+ position: absolute;
198
+ left: theme(digitv2.spacers.spacer10);
199
+ margin: theme(digitv2.spacers.spacer0);
164
200
  }
package/src/digitv2/components/tabV2.scss ADDED
@@ -0,0 +1,107 @@
1
+ .digit-tab {
2
+ display: flex;
3
+ height: fit-content;
4
+ overflow: auto;
5
+ align-items: flex-end;
6
+
7
+ .digit-tab-list {
8
+
9
+ height: 3.75rem;
10
+
11
+ .digit-tab-item {
12
+ display: flex;
13
+ width: 100%;
14
+ min-height: 3.75rem;
15
+ padding: theme(digitv2.spacers.spacer4) theme(digitv2.spacers.spacer6);
16
+ height: 3.75rem;
17
+ align-items: center;
18
+ justify-content: center;
19
+ background-color: theme(digitv2.lightTheme.paper-secondary);
20
+ border: 0.063rem solid theme(digitv2.lightTheme.generic-inputborder);
21
+ border-radius: theme(digitv2.spacers.spacer2) theme(digitv2.spacers.spacer2) theme(digitv2.spacers.spacer0) theme(digitv2.spacers.spacer0);
22
+ cursor: pointer;
23
+ gap: theme(digitv2.spacers.spacer1);
24
+
25
+ .digit-tab-icon {
26
+ display: flex;
27
+ align-items: center;
28
+
29
+ svg {
30
+ flex-shrink: 0;
31
+ }
32
+ }
33
+
34
+
35
+ justify-content: center;
36
+
37
+
38
+ .digit-tab-label {
39
+ @extend .typography.body-s;
40
+ font-family: theme(digitv2.fontFamily.sans);
41
+ font-style: theme(digitv2.fontStyle.normal);
42
+ font-weight: theme(digitv2.fontWeight.regular);
43
+ line-height: theme(digitv2.lineHeight.lineheight2);
44
+
45
+ @media (max-aspect-ratio: 9/16) {
46
+ /* Media query for mobile */
47
+ font-size: theme(digitv2.fontSize.body-s.mobile);
48
+ }
49
+
50
+
51
+ @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
52
+ /* Media query for tablets */
53
+ font-size: theme(digitv2.fontSize.body-s.tablet);
54
+ }
55
+
56
+
57
+
58
+ @media (min-aspect-ratio: 3/4) {
59
+ /* Media query for desktop */
60
+ font-size: theme(digitv2.fontSize.body-s.desktop);
61
+ }
62
+
63
+ color: theme(digitv2.lightTheme.text-secondary);
64
+ white-space: noWrap;
65
+ overflow: hidden;
66
+ text-overflow: ellipsis;
67
+ line-height: normal;
68
+ }
69
+ }
70
+
71
+ &.active {
72
+ height: 4rem;
73
+
74
+ .digit-tab-item {
75
+ border: 0.125rem solid theme(digitv2.lightTheme.primary-1);
76
+ border-bottom: theme(digitv2.spacers.spacer1) solid theme(digitv2.lightTheme.primary-1);
77
+ background-color: theme(digitv2.lightTheme.paper-primary);
78
+ height: 4rem;
79
+ min-height: 4rem;
80
+
81
+ .digit-tab-label {
82
+ @extend .typography.heading-s;
83
+ color: theme(digitv2.lightTheme.primary-1);
84
+ white-space: noWrap;
85
+ overflow: hidden;
86
+ text-overflow: ellipsis;
87
+ line-height: normal;
88
+ }
89
+ }
90
+ }
91
+ }
92
+ }
93
+
94
+ .digit-tab::-webkit-scrollbar {
95
+ height: 0.375rem;
96
+ background-color: transparent;
97
+ }
98
+
99
+ .digit-tab::-webkit-scrollbar-track {
100
+ background-color: transparent;
101
+ border-radius: 0.563rem;
102
+ }
103
+
104
+ .digit--tab::-webkit-scrollbar-thumb {
105
+ background-color: transparent;
106
+ border-radius: 0.563rem;
107
+ }
package/src/digitv2/index.scss CHANGED
@@ -38,6 +38,7 @@
38
38
  @import url("./components/actionbarV2.scss");
39
39
  @import url("./components/headerdropdownV2.scss");
40
40
  @import url("./components/topbarV2.scss");
41
+ @import url("./components/tabV2.scss");
41
42
  @import url("./components/sidebarV2.scss");
42
43
  @import url("./components/mobilesidebarV2.scss");
43
44
  @import url("./components/tooltipwrapperV2.scss");
@@ -177,4 +178,65 @@
177
178
  &-item-5 {
178
179
  color: theme(digitv2.chart.chart-5);
179
180
  }
181
+ }
182
+
183
+ .color-constants-story{
184
+
185
+ &.primary-1{
186
+ background-color: theme(digitv2.lightTheme.primary-1);
187
+ }
188
+ &.primary-bg{
189
+ background-color: theme(digitv2.lightTheme.primary-bg);
190
+ }
191
+ &.primary-2{
192
+ background-color: theme(digitv2.lightTheme.primary-2);
193
+ }
194
+ &.text-primary{
195
+ background-color: theme(digitv2.lightTheme.text-primary);
196
+ }
197
+ &.text-secondary{
198
+ background-color: theme(digitv2.lightTheme.text-secondary);
199
+ }
200
+ &.text-disabled{
201
+ background-color: theme(digitv2.lightTheme.text-disabled);
202
+ }
203
+ &.alert-error{
204
+ background-color: theme(digitv2.lightTheme.alert-error);
205
+ }
206
+ &.alert-errorbg{
207
+ background-color: theme(digitv2.lightTheme.alert-errorbg);
208
+ }
209
+ &.alert-success{
210
+ background-color: theme(digitv2.lightTheme.alert-success);
211
+ }
212
+ &.alert-successbg{
213
+ background-color: theme(digitv2.lightTheme.alert-successbg);
214
+ }
215
+ &.alert-info{
216
+ background-color: theme(digitv2.lightTheme.alert-info);
217
+ }
218
+ &.alert-infobg{
219
+ background-color: theme(digitv2.lightTheme.alert-infobg);
220
+ }
221
+ &.alert-warning{
222
+ background-color: theme(digitv2.lightTheme.alert-warning);
223
+ }
224
+ &.alert-warningbg{
225
+ background-color: theme(digitv2.lightTheme.alert-warning-bg);
226
+ }
227
+ &.generic-background{
228
+ background-color: theme(digitv2.lightTheme.generic-background);
229
+ }
230
+ &.generic-divider{
231
+ background-color: theme(digitv2.lightTheme.generic-divider);
232
+ }
233
+ &.generic-inputborder{
234
+ background-color: theme(digitv2.lightTheme.generic-inputborder);
235
+ }
236
+ &.paper-primary{
237
+ background-color: theme(digitv2.lightTheme.paper-primary);
238
+ }
239
+ &.paper-secondary{
240
+ background-color: theme(digitv2.lightTheme.paper-secondary);
241
+ }
180
242
  }
package/src/digitv2/typography.scss CHANGED
@@ -443,46 +443,61 @@
443
443
  }
444
444
 
445
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
446
  @media (max-aspect-ratio: 9/16) {
452
447
  /* Media query for mobile */
453
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);
454
453
  }
455
454
 
456
455
  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
457
456
  /* Media query for tablets */
458
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);
459
462
  }
460
463
 
461
464
  @media (min-aspect-ratio: 3/4) {
462
465
  /* Media query for desktop */
463
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);
464
471
  }
465
472
  }
466
473
 
467
474
  &.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
475
 
473
476
  @media (max-aspect-ratio: 9/16) {
474
477
  /* Media query for mobile */
475
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);
476
483
  }
477
484
 
478
485
  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
479
486
  /* Media query for tablets */
480
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);
481
492
  }
482
493
 
483
494
  @media (min-aspect-ratio: 3/4) {
484
495
  /* Media query for desktop */
485
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);
486
501
  }
487
502
  }
488
503