@egovernments/digit-ui-components-css 0.0.2-beta.23 → 0.0.2-beta.25

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 (28) hide show
  1. package/CHANGELOG.md +4 -0
  2. package/dist/index.css +831 -183
  3. package/dist/index.min.css +2 -2
  4. package/package.json +1 -1
  5. package/src/digitv2/components/accordionV2.scss +105 -0
  6. package/src/digitv2/components/bottomSheetV2.scss +12 -1
  7. package/src/digitv2/components/breadcrumbV2.scss +38 -0
  8. package/src/digitv2/components/buttonsV2.scss +27 -25
  9. package/src/digitv2/components/checkboxV2.scss +19 -0
  10. package/src/digitv2/components/fieldV1.scss +38 -0
  11. package/src/digitv2/components/headerdropdownV2.scss +57 -0
  12. package/src/digitv2/components/mobilesidebarV2.scss +38 -0
  13. package/src/digitv2/components/multiSelectDropdownV2.scss +38 -0
  14. package/src/digitv2/components/panelCardV2.scss +19 -0
  15. package/src/digitv2/components/popUpV2.scss +38 -0
  16. package/src/digitv2/components/radiobtnV2.scss +19 -0
  17. package/src/digitv2/components/selectDropdownV2.scss +38 -0
  18. package/src/digitv2/components/sidebarV2.scss +101 -75
  19. package/src/digitv2/components/stepperV2.scss +19 -0
  20. package/src/digitv2/components/switchV2.scss +5 -1
  21. package/src/digitv2/components/textblockV2.scss +19 -0
  22. package/src/digitv2/components/timelineV2.scss +19 -0
  23. package/src/digitv2/components/toastV2.scss +79 -1
  24. package/src/digitv2/components/topbarV2.scss +19 -0
  25. package/src/digitv2/components/treeSelectV2.scss +19 -0
  26. package/src/digitv2/components/uploaderV2.scss +76 -0
  27. package/src/digitv2/components/viewCardFieldPairV2.scss +19 -0
  28. package/src/digitv2/index.scss +1 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@egovernments/digit-ui-components-css",
3
- "version": "0.0.2-beta.23",
3
+ "version": "0.0.2-beta.25",
4
4
  "license": "MIT",
5
5
  "main": "dist/index.css",
6
6
  "author": "Jagankumar <jagan.kumar@egovernments.org>",
package/src/digitv2/components/accordionV2.scss ADDED
@@ -0,0 +1,105 @@
1
+ .digit-accordion-header {
2
+ display: flex;
3
+ align-items: center;
4
+ cursor: pointer;
5
+ background-color: transparent;
6
+ gap: theme(digitv2.spacers.spacer5);
7
+
8
+ @media (max-aspect-ratio: 9/16) {
9
+ padding: theme(digitv2.spacers.spacer4);
10
+ }
11
+
12
+ @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
13
+ padding: theme(digitv2.spacers.spacer5);
14
+ }
15
+
16
+ @media (min-aspect-ratio: 3/4) {
17
+ padding: theme(digitv2.spacers.spacer6);
18
+ }
19
+
20
+ }
21
+
22
+ .digit-accordion-icon {
23
+ width: theme(digitv2.spacers.spacer6);
24
+ height: theme(digitv2.spacers.spacer6);
25
+ flex-shrink: 0;
26
+ }
27
+
28
+ .digit-accordion-number {
29
+ @extend .typography.heading-s;
30
+ color: theme(digitv2.lightTheme.text-primary);
31
+ min-width: theme(digitv2.spacers.spacer6);
32
+ height: theme(digitv2.spacers.spacer6);
33
+ display: flex;
34
+ align-items: center;
35
+ }
36
+
37
+ .digit-accordion-title {
38
+ @extend .typography.heading-s;
39
+ color: theme(digitv2.lightTheme.text-primary);
40
+ flex-grow: 1;
41
+ }
42
+
43
+ .digit-accordion-toggle {
44
+ width: theme(digitv2.spacers.spacer8);
45
+ height: theme(digitv2.spacers.spacer8);
46
+ flex-shrink: 0;
47
+ }
48
+
49
+ .digit-accordion-content {
50
+ background-color: transparent;
51
+ display: flex;
52
+ gap:0.625rem;
53
+ flex-direction: column;
54
+ @extend .typography.body-s;
55
+ font-family: theme(digitv2.fontFamily.sans);
56
+ font-style: theme(digitv2.fontStyle.normal);
57
+ font-weight: theme(digitv2.fontWeight.regular);
58
+ line-height: theme(digitv2.lineHeight.lineheight2);
59
+ @media (max-aspect-ratio: 9/16) {
60
+ /* Media query for mobile */
61
+ font-size: theme(digitv2.fontSize.body-s.mobile);
62
+ padding: theme(digitv2.spacers.spacer4);
63
+ }
64
+
65
+ @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
66
+ /* Media query for tablets */
67
+ font-size: theme(digitv2.fontSize.body-s.tablet);
68
+ padding: theme(digitv2.spacers.spacer5);
69
+ }
70
+
71
+ @media (min-aspect-ratio: 3/4) {
72
+ /* Media query for desktop */
73
+ font-size: theme(digitv2.fontSize.body-s.desktop);
74
+ padding: theme(digitv2.spacers.spacer6);
75
+ }
76
+ color: theme(digitv2.lightTheme.text-primary);
77
+ }
78
+
79
+
80
+ .digit-accordion-container {
81
+
82
+ &.border{
83
+ border: 0.063rem solid theme(digitv2.lightTheme.generic-divider);
84
+ }
85
+
86
+ &.borderRadius{
87
+ border-radius: theme(digitv2.spacers.spacer1);
88
+ }
89
+
90
+ &.divider{
91
+ .digit-accordion-content{
92
+ border-top: 1px solid theme(digitv2.lightTheme.generic-divider);
93
+ }
94
+ }
95
+
96
+ &.no-divider{
97
+ .digit-accordion-header{
98
+ padding-bottom: theme(digitv2.spacers.spacer0);
99
+ }
100
+ }
101
+
102
+ &.cardBg{
103
+ background-color: theme(digitv2.lightTheme.paper-secondary);
104
+ }
105
+ }
package/src/digitv2/components/bottomSheetV2.scss CHANGED
@@ -64,7 +64,18 @@
64
64
  overflow-y: scroll;
65
65
  display: flex;
66
66
  flex-direction: column;
67
- gap: theme(digitv2.spacers.spacer4);
67
+
68
+ @media (max-aspect-ratio: 9/16) {
69
+ gap:theme(digitv2.spacers.spacer4);
70
+ }
71
+
72
+ @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
73
+ gap:theme(digitv2.spacers.spacer5);
74
+ }
75
+
76
+ @media (min-aspect-ratio: 3/4) {
77
+ gap:theme(digitv2.spacers.spacer6);
78
+ }
68
79
  }
69
80
 
70
81
 
package/src/digitv2/components/breadcrumbV2.scss CHANGED
@@ -20,6 +20,25 @@
20
20
 
21
21
  .digit-bread-crumb-content {
22
22
  @extend .typography.body-s;
23
+ font-family: theme(digitv2.fontFamily.sans);
24
+ font-style: theme(digitv2.fontStyle.normal);
25
+ font-weight: theme(digitv2.fontWeight.regular);
26
+ line-height: theme(digitv2.lineHeight.lineheight2);
27
+
28
+ @media (max-aspect-ratio: 9/16) {
29
+ /* Media query for mobile */
30
+ font-size: theme(digitv2.fontSize.body-s.mobile);
31
+ }
32
+
33
+ @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
34
+ /* Media query for tablets */
35
+ font-size: theme(digitv2.fontSize.body-s.tablet);
36
+ }
37
+
38
+ @media (min-aspect-ratio: 3/4) {
39
+ /* Media query for desktop */
40
+ font-size: theme(digitv2.fontSize.body-s.desktop);
41
+ }
23
42
  display: flex !important;
24
43
  gap: theme(digitv2.spacers.spacer1);
25
44
  cursor: pointer;
@@ -44,6 +63,25 @@
44
63
  .digit-bread-crumb-content.current,
45
64
  .digit-bread-crumb-seperator {
46
65
  @extend .typography.body-s;
66
+ font-family: theme(digitv2.fontFamily.sans);
67
+ font-style: theme(digitv2.fontStyle.normal);
68
+ font-weight: theme(digitv2.fontWeight.regular);
69
+ line-height: theme(digitv2.lineHeight.lineheight2);
70
+
71
+ @media (max-aspect-ratio: 9/16) {
72
+ /* Media query for mobile */
73
+ font-size: theme(digitv2.fontSize.body-s.mobile);
74
+ }
75
+
76
+ @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
77
+ /* Media query for tablets */
78
+ font-size: theme(digitv2.fontSize.body-s.tablet);
79
+ }
80
+
81
+ @media (min-aspect-ratio: 3/4) {
82
+ /* Media query for desktop */
83
+ font-size: theme(digitv2.fontSize.body-s.desktop);
84
+ }
47
85
  color: theme(digitv2.lightTheme.text-secondary);
48
86
  text-decoration: none;
49
87
  cursor: default;
package/src/digitv2/components/buttonsV2.scss CHANGED
@@ -324,34 +324,44 @@
324
324
  }
325
325
 
326
326
  .digit-submit-bar {
327
- /* @extend .light-primary-button;*/
328
- @apply h-10 text-center w-full outline-none cursor-pointer;
329
- box-shadow: inset theme(digitv2.spacers.spacer0) -0.125rem theme(digitv2.spacers.spacer0) theme(colors.text.primary);
327
+ @apply w-full text-center cursor-pointer outline-none flex max-w-full items-center justify-center h-10;
328
+ padding-left: theme(digitv2.spacers.spacer6);
329
+ padding-right: theme(digitv2.spacers.spacer6);
330
+ gap: theme(digitv2.spacers.spacer2);
331
+ min-width: 15rem;
330
332
  background-color: theme(digitv2.lightTheme.primary-1);
331
333
 
332
- &:focus {
333
- @apply outline-none;
334
- }
335
-
336
334
  h2 {
337
- @apply font-medium text-legend text-white leading-normal;
335
+ @extend .typography.button.large;
336
+ @apply text-white;
338
337
  margin: 0;
339
- font-family: theme(digitv2.fontFamily.sans)
338
+ width: 100%;
339
+ overflow: hidden;
340
+ white-space: nowrap;
341
+ text-overflow: ellipsis;
342
+ @apply h-5;
343
+ margin-top: 0.125rem;
340
344
  }
341
- }
342
345
 
343
- .digit-submit-bar-disabled {
344
- @apply h-10 text-center w-full outline-none opacity-50;
345
- background-color: theme(digitv2.lightTheme.primary-1);
346
+ &.disabled {
347
+ @apply opacity-50;
348
+ background: theme(digitv2.lightTheme.text-disabled);
349
+ }
346
350
 
347
351
  &:focus {
348
352
  @apply outline-none;
349
353
  }
350
354
 
351
- h2 {
352
- @apply font-medium text-legend text-white leading-normal;
353
- margin: 0;
354
- font-family: theme(digitv2.fontFamily.sans)
355
+ &:hover {
356
+ box-shadow: theme(digitv2.spacers.spacer0) -0.125rem theme(digitv2.spacers.spacer0) theme(digitv2.spacers.spacer0) theme(digitv2.lightTheme.text-primary) inset;
357
+ }
358
+
359
+ &:active {
360
+ box-shadow: theme(digitv2.spacers.spacer0) -0.125rem theme(digitv2.spacers.spacer0) theme(digitv2.spacers.spacer0) #0B0C0C inset, theme(digitv2.spacers.spacer0) 0.063rem 0.175rem theme(digitv2.spacers.spacer0) #00000040;
361
+
362
+ h2 {
363
+ font-weight: theme(digitv2.fontWeight.bold);
364
+ }
355
365
  }
356
366
  }
357
367
 
@@ -393,14 +403,6 @@
393
403
  }
394
404
  }
395
405
 
396
- @screen dt {
397
-
398
- .digit-submit-bar,
399
- .digit-submit-bar-disabled {
400
- width: 15rem;
401
- }
402
- }
403
-
404
406
  .digit-submit-bar:focus {
405
407
  @apply outline-none !important;
406
408
  }
package/src/digitv2/components/checkboxV2.scss CHANGED
@@ -62,6 +62,25 @@
62
62
 
63
63
  .label {
64
64
  @extend .typography.body-s;
65
+ font-family: theme(digitv2.fontFamily.sans);
66
+ font-style: theme(digitv2.fontStyle.normal);
67
+ font-weight: theme(digitv2.fontWeight.regular);
68
+ line-height: theme(digitv2.lineHeight.lineheight2);
69
+
70
+ @media (max-aspect-ratio: 9/16) {
71
+ /* Media query for mobile */
72
+ font-size: theme(digitv2.fontSize.body-s.mobile);
73
+ }
74
+
75
+ @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
76
+ /* Media query for tablets */
77
+ font-size: theme(digitv2.fontSize.body-s.tablet);
78
+ }
79
+
80
+ @media (min-aspect-ratio: 3/4) {
81
+ /* Media query for desktop */
82
+ font-size: theme(digitv2.fontSize.body-s.desktop);
83
+ }
65
84
  @apply text-left;
66
85
  word-break: break-word;
67
86
  letter-spacing: theme(digitv2.spacers.spacer0);
package/src/digitv2/components/fieldV1.scss CHANGED
@@ -35,6 +35,25 @@
35
35
  .info-icon .infotext {
36
36
  @extend .typography.body-s;
37
37
  @apply absolute text-center;
38
+ font-family: theme(digitv2.fontFamily.sans);
39
+ font-style: theme(digitv2.fontStyle.normal);
40
+ font-weight: theme(digitv2.fontWeight.regular);
41
+ line-height: theme(digitv2.lineHeight.lineheight2);
42
+
43
+ @media (max-aspect-ratio: 9/16) {
44
+ /* Media query for mobile */
45
+ font-size: theme(digitv2.fontSize.body-s.mobile);
46
+ }
47
+
48
+ @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
49
+ /* Media query for tablets */
50
+ font-size: theme(digitv2.fontSize.body-s.tablet);
51
+ }
52
+
53
+ @media (min-aspect-ratio: 3/4) {
54
+ /* Media query for desktop */
55
+ font-size: theme(digitv2.fontSize.body-s.desktop);
56
+ }
38
57
  visibility: hidden;
39
58
  width: 7.5rem;
40
59
  background-color: #555555;
@@ -75,6 +94,25 @@
75
94
  @apply flex justify-between items-baseline;
76
95
  color: theme(digitv2.lightTheme.text-secondary);
77
96
  gap: theme(digitv2.spacers.spacer2);
97
+ font-family: theme(digitv2.fontFamily.sans);
98
+ font-style: theme(digitv2.fontStyle.normal);
99
+ font-weight: theme(digitv2.fontWeight.regular);
100
+ line-height: theme(digitv2.lineHeight.lineheight2);
101
+
102
+ @media (max-aspect-ratio: 9/16) {
103
+ /* Media query for mobile */
104
+ font-size: theme(digitv2.fontSize.body-s.mobile);
105
+ }
106
+
107
+ @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
108
+ /* Media query for tablets */
109
+ font-size: theme(digitv2.fontSize.body-s.tablet);
110
+ }
111
+
112
+ @media (min-aspect-ratio: 3/4) {
113
+ /* Media query for desktop */
114
+ font-size: theme(digitv2.fontSize.body-s.desktop);
115
+ }
78
116
 
79
117
 
80
118
  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
package/src/digitv2/components/headerdropdownV2.scss CHANGED
@@ -31,6 +31,25 @@
31
31
  .header-dropdown-label {
32
32
  @extend .typography.body-s;
33
33
  cursor: pointer;
34
+ font-family: theme(digitv2.fontFamily.sans);
35
+ font-style: theme(digitv2.fontStyle.normal);
36
+ font-weight: theme(digitv2.fontWeight.regular);
37
+ line-height: theme(digitv2.lineHeight.lineheight2);
38
+
39
+ @media (max-aspect-ratio: 9/16) {
40
+ /* Media query for mobile */
41
+ font-size: theme(digitv2.fontSize.body-s.mobile);
42
+ }
43
+
44
+ @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
45
+ /* Media query for tablets */
46
+ font-size: theme(digitv2.fontSize.body-s.tablet);
47
+ }
48
+
49
+ @media (min-aspect-ratio: 3/4) {
50
+ /* Media query for desktop */
51
+ font-size: theme(digitv2.fontSize.body-s.desktop);
52
+ }
34
53
  display: flex;
35
54
  align-items: center;
36
55
  color: theme(digitv2.lightTheme.text-primary);
@@ -96,6 +115,25 @@
96
115
  .header-dropdown-option {
97
116
  @extend .typography.body-s;
98
117
  @apply whitespace-no-wrap w-full max-w-full overflow-hidden;
118
+ font-family: theme(digitv2.fontFamily.sans);
119
+ font-style: theme(digitv2.fontStyle.normal);
120
+ font-weight: theme(digitv2.fontWeight.regular);
121
+ line-height: theme(digitv2.lineHeight.lineheight2);
122
+
123
+ @media (max-aspect-ratio: 9/16) {
124
+ /* Media query for mobile */
125
+ font-size: theme(digitv2.fontSize.body-s.mobile);
126
+ }
127
+
128
+ @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
129
+ /* Media query for tablets */
130
+ font-size: theme(digitv2.fontSize.body-s.tablet);
131
+ }
132
+
133
+ @media (min-aspect-ratio: 3/4) {
134
+ /* Media query for desktop */
135
+ font-size: theme(digitv2.fontSize.body-s.desktop);
136
+ }
99
137
  padding: theme(digitv2.spacers.spacer4) 0.625rem;
100
138
  color: theme(digitv2.lightTheme.text-primary);
101
139
  gap: theme(digitv2.spacers.spacer2);
@@ -117,6 +155,25 @@
117
155
 
118
156
  .header-dropdown-nooption {
119
157
  @extend .typography.body-s;
158
+ font-family: theme(digitv2.fontFamily.sans);
159
+ font-style: theme(digitv2.fontStyle.normal);
160
+ font-weight: theme(digitv2.fontWeight.regular);
161
+ line-height: theme(digitv2.lineHeight.lineheight2);
162
+
163
+ @media (max-aspect-ratio: 9/16) {
164
+ /* Media query for mobile */
165
+ font-size: theme(digitv2.fontSize.body-s.mobile);
166
+ }
167
+
168
+ @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
169
+ /* Media query for tablets */
170
+ font-size: theme(digitv2.fontSize.body-s.tablet);
171
+ }
172
+
173
+ @media (min-aspect-ratio: 3/4) {
174
+ /* Media query for desktop */
175
+ font-size: theme(digitv2.fontSize.body-s.desktop);
176
+ }
120
177
  padding: theme(digitv2.spacers.spacer2);
121
178
  pointer-events: none;
122
179
  color: theme(digitv2.lightTheme.text-disabled);
package/src/digitv2/components/mobilesidebarV2.scss CHANGED
@@ -228,6 +228,25 @@
228
228
  ::placeholder {
229
229
  content: attr(placeholder);
230
230
  @extend .typography.body-s;
231
+ font-family: theme(digitv2.fontFamily.sans);
232
+ font-style: theme(digitv2.fontStyle.normal);
233
+ font-weight: theme(digitv2.fontWeight.regular);
234
+ line-height: theme(digitv2.lineHeight.lineheight2);
235
+
236
+ @media (max-aspect-ratio: 9/16) {
237
+ /* Media query for mobile */
238
+ font-size: theme(digitv2.fontSize.body-s.mobile);
239
+ }
240
+
241
+ @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
242
+ /* Media query for tablets */
243
+ font-size: theme(digitv2.fontSize.body-s.tablet);
244
+ }
245
+
246
+ @media (min-aspect-ratio: 3/4) {
247
+ /* Media query for desktop */
248
+ font-size: theme(digitv2.fontSize.body-s.desktop);
249
+ }
231
250
  color: theme(digitv2.lightTheme.text-disabled);
232
251
  }
233
252
  }
@@ -274,6 +293,25 @@
274
293
  ::placeholder {
275
294
  content: attr(placeholder);
276
295
  @extend .typography.body-s;
296
+ font-family: theme(digitv2.fontFamily.sans);
297
+ font-style: theme(digitv2.fontStyle.normal);
298
+ font-weight: theme(digitv2.fontWeight.regular);
299
+ line-height: theme(digitv2.lineHeight.lineheight2);
300
+
301
+ @media (max-aspect-ratio: 9/16) {
302
+ /* Media query for mobile */
303
+ font-size: theme(digitv2.fontSize.body-s.mobile);
304
+ }
305
+
306
+ @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
307
+ /* Media query for tablets */
308
+ font-size: theme(digitv2.fontSize.body-s.tablet);
309
+ }
310
+
311
+ @media (min-aspect-ratio: 3/4) {
312
+ /* Media query for desktop */
313
+ font-size: theme(digitv2.fontSize.body-s.desktop);
314
+ }
277
315
  color: theme(digitv2.lightTheme.generic-background);
278
316
  }
279
317
  }
package/src/digitv2/components/multiSelectDropdownV2.scss CHANGED
@@ -92,6 +92,25 @@
92
92
  align-items: center;
93
93
  .category-selectAll-label {
94
94
  @extend .typography.body-s;
95
+ font-family: theme(digitv2.fontFamily.sans);
96
+ font-style: theme(digitv2.fontStyle.normal);
97
+ font-weight: theme(digitv2.fontWeight.regular);
98
+ line-height: theme(digitv2.lineHeight.lineheight2);
99
+
100
+ @media (max-aspect-ratio: 9/16) {
101
+ /* Media query for mobile */
102
+ font-size: theme(digitv2.fontSize.body-s.mobile);
103
+ }
104
+
105
+ @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
106
+ /* Media query for tablets */
107
+ font-size: theme(digitv2.fontSize.body-s.tablet);
108
+ }
109
+
110
+ @media (min-aspect-ratio: 3/4) {
111
+ /* Media query for desktop */
112
+ font-size: theme(digitv2.fontSize.body-s.desktop);
113
+ }
95
114
  text-align: left;
96
115
  color: theme(digitv2.lightTheme.primary-1);
97
116
  }
@@ -181,6 +200,25 @@
181
200
  p {
182
201
  @extend .typography.body-s;
183
202
  @apply w-full overflow-hidden whitespace-no-wrap max-w-full;
203
+ font-family: theme(digitv2.fontFamily.sans);
204
+ font-style: theme(digitv2.fontStyle.normal);
205
+ font-weight: theme(digitv2.fontWeight.regular);
206
+ line-height: theme(digitv2.lineHeight.lineheight2);
207
+
208
+ @media (max-aspect-ratio: 9/16) {
209
+ /* Media query for mobile */
210
+ font-size: theme(digitv2.fontSize.body-s.mobile);
211
+ }
212
+
213
+ @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
214
+ /* Media query for tablets */
215
+ font-size: theme(digitv2.fontSize.body-s.tablet);
216
+ }
217
+
218
+ @media (min-aspect-ratio: 3/4) {
219
+ /* Media query for desktop */
220
+ font-size: theme(digitv2.fontSize.body-s.desktop);
221
+ }
184
222
  color: theme(digitv2.lightTheme.text-primary);
185
223
  margin: theme(digitv2.spacers.spacer0);
186
224
  text-overflow: ellipsis;
package/src/digitv2/components/panelCardV2.scss CHANGED
@@ -84,6 +84,25 @@
84
84
 
85
85
  .digit-panelcard-description {
86
86
  @extend .typography.body-s;
87
+ font-family: theme(digitv2.fontFamily.sans);
88
+ font-style: theme(digitv2.fontStyle.normal);
89
+ font-weight: theme(digitv2.fontWeight.regular);
90
+ line-height: theme(digitv2.lineHeight.lineheight2);
91
+
92
+ @media (max-aspect-ratio: 9/16) {
93
+ /* Media query for mobile */
94
+ font-size: theme(digitv2.fontSize.body-s.mobile);
95
+ }
96
+
97
+ @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
98
+ /* Media query for tablets */
99
+ font-size: theme(digitv2.fontSize.body-s.tablet);
100
+ }
101
+
102
+ @media (min-aspect-ratio: 3/4) {
103
+ /* Media query for desktop */
104
+ font-size: theme(digitv2.fontSize.body-s.desktop);
105
+ }
87
106
  color: theme(digitv2.lightTheme.generic-inputborder);
88
107
  }
89
108
 
package/src/digitv2/components/popUpV2.scss CHANGED
@@ -141,6 +141,25 @@
141
141
 
142
142
  .digit-popup-children-wrap {
143
143
  @extend .typography.body-s;
144
+ font-family: theme(digitv2.fontFamily.sans);
145
+ font-style: theme(digitv2.fontStyle.normal);
146
+ font-weight: theme(digitv2.fontWeight.regular);
147
+ line-height: theme(digitv2.lineHeight.lineheight2);
148
+
149
+ @media (max-aspect-ratio: 9/16) {
150
+ /* Media query for mobile */
151
+ font-size: theme(digitv2.fontSize.body-s.mobile);
152
+ }
153
+
154
+ @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
155
+ /* Media query for tablets */
156
+ font-size: theme(digitv2.fontSize.body-s.tablet);
157
+ }
158
+
159
+ @media (min-aspect-ratio: 3/4) {
160
+ /* Media query for desktop */
161
+ font-size: theme(digitv2.fontSize.body-s.desktop);
162
+ }
144
163
  @apply overflow-hidden overflow-y-auto flex-col;
145
164
  display: flex;
146
165
  flex: 1;
@@ -148,6 +167,25 @@
148
167
 
149
168
  .digit-popup-description {
150
169
  @extend .typography.body-s;
170
+ font-family: theme(digitv2.fontFamily.sans);
171
+ font-style: theme(digitv2.fontStyle.normal);
172
+ font-weight: theme(digitv2.fontWeight.regular);
173
+ line-height: theme(digitv2.lineHeight.lineheight2);
174
+
175
+ @media (max-aspect-ratio: 9/16) {
176
+ /* Media query for mobile */
177
+ font-size: theme(digitv2.fontSize.body-s.mobile);
178
+ }
179
+
180
+ @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
181
+ /* Media query for tablets */
182
+ font-size: theme(digitv2.fontSize.body-s.tablet);
183
+ }
184
+
185
+ @media (min-aspect-ratio: 3/4) {
186
+ /* Media query for desktop */
187
+ font-size: theme(digitv2.fontSize.body-s.desktop);
188
+ }
151
189
  color: theme(digitv2.lightTheme.text-primary);
152
190
  }
153
191
 
package/src/digitv2/components/radiobtnV2.scss CHANGED
@@ -76,6 +76,25 @@
76
76
 
77
77
  label {
78
78
  @extend .typography.body-s;
79
+ font-family: theme(digitv2.fontFamily.sans);
80
+ font-style: theme(digitv2.fontStyle.normal);
81
+ font-weight: theme(digitv2.fontWeight.regular);
82
+ line-height: theme(digitv2.lineHeight.lineheight2);
83
+
84
+ @media (max-aspect-ratio: 9/16) {
85
+ /* Media query for mobile */
86
+ font-size: theme(digitv2.fontSize.body-s.mobile);
87
+ }
88
+
89
+ @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
90
+ /* Media query for tablets */
91
+ font-size: theme(digitv2.fontSize.body-s.tablet);
92
+ }
93
+
94
+ @media (min-aspect-ratio: 3/4) {
95
+ /* Media query for desktop */
96
+ font-size: theme(digitv2.fontSize.body-s.desktop);
97
+ }
79
98
  color: theme(digitv2.lightTheme.text-primary);
80
99
  overflow-wrap: anywhere;
81
100
  }
package/src/digitv2/components/selectDropdownV2.scss CHANGED
@@ -154,6 +154,25 @@
154
154
  }
155
155
  .main-option {
156
156
  @extend .typography.body-s;
157
+ font-family: theme(digitv2.fontFamily.sans);
158
+ font-style: theme(digitv2.fontStyle.normal);
159
+ font-weight: theme(digitv2.fontWeight.regular);
160
+ line-height: theme(digitv2.lineHeight.lineheight2);
161
+
162
+ @media (max-aspect-ratio: 9/16) {
163
+ /* Media query for mobile */
164
+ font-size: theme(digitv2.fontSize.body-s.mobile);
165
+ }
166
+
167
+ @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
168
+ /* Media query for tablets */
169
+ font-size: theme(digitv2.fontSize.body-s.tablet);
170
+ }
171
+
172
+ @media (min-aspect-ratio: 3/4) {
173
+ /* Media query for desktop */
174
+ font-size: theme(digitv2.fontSize.body-s.desktop);
175
+ }
157
176
  @apply whitespace-no-wrap w-full max-w-full overflow-hidden;
158
177
  text-overflow: ellipsis;
159
178
  &.nestedtextdropdown,
@@ -251,6 +270,25 @@
251
270
  pointer-events: none;
252
271
  span {
253
272
  @extend .typography.body-s;
273
+ font-family: theme(digitv2.fontFamily.sans);
274
+ font-style: theme(digitv2.fontStyle.normal);
275
+ font-weight: theme(digitv2.fontWeight.regular);
276
+ line-height: theme(digitv2.lineHeight.lineheight2);
277
+
278
+ @media (max-aspect-ratio: 9/16) {
279
+ /* Media query for mobile */
280
+ font-size: theme(digitv2.fontSize.body-s.mobile);
281
+ }
282
+
283
+ @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
284
+ /* Media query for tablets */
285
+ font-size: theme(digitv2.fontSize.body-s.tablet);
286
+ }
287
+
288
+ @media (min-aspect-ratio: 3/4) {
289
+ /* Media query for desktop */
290
+ font-size: theme(digitv2.fontSize.body-s.desktop);
291
+ }
254
292
  color: theme(digitv2.lightTheme.text-disabled);
255
293
  }
256
294
  }