@egovernments/digit-ui-components-css 0.2.1 → 2.0.0-dev-01

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 -14513
  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 +21 -14
  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 +131 -28
  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 +175 -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 +63 -0
  60. package/src/digitv2/pages/employee/inboxsearchcomposer.scss +156 -34
  61. package/src/digitv2/pages/employee/index.scss +4 -3
  62. package/src/digitv2/pages/employee/reactdatatable.scss +15 -15
  63. package/src/digitv2/pages/employee/workbench.scss +29 -28
  64. package/src/digitv2/typography.scss +633 -640
  65. package/src/index.scss +29 -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 -231
  70. package/dist/index.min.css +0 -6
package/src/digitv2/components/fileUploadV2.scss CHANGED
@@ -1,12 +1,15 @@
1
+ @import './theme-variables.css';
2
+ @import '../typography.scss';
3
+
1
4
  .digit-upload-image-drawer {
2
5
  @apply w-full fixed left-0 right-0 flex-col;
3
6
  display: flex;
4
- background-color: theme(digitv2.lightTheme.paper-primary);
5
- border-radius: theme(digitv2.spacers.spacer2) theme(digitv2.spacers.spacer2) theme(digitv2.spacers.spacer0) theme(digitv2.spacers.spacer0);
7
+ background-color: theme("digitv2.lightTheme.paper-primary");
8
+ border-radius: theme("digitv2.spacers.spacer2") theme("digitv2.spacers.spacer2") theme("digitv2.spacers.spacer0") theme("digitv2.spacers.spacer0");
6
9
  z-index: 1000;
7
- border-radius: theme(digitv2.spacers.spacer1);
8
- gap: theme(digitv2.spacers.spacer6);
9
- padding: theme(digitv2.spacers.spacer6);
10
+ border-radius: theme("digitv2.spacers.spacer1");
11
+ gap: theme("digitv2.spacers.spacer6");
12
+ padding: theme("digitv2.spacers.spacer6");
10
13
 
11
14
  .image-upload-options {
12
15
  @apply h-full;
@@ -17,19 +20,19 @@
17
20
  display: flex;
18
21
  flex: 1;
19
22
  justify-content: center;
20
- gap: theme(digitv2.spacers.spacer2) theme(digitv2.spacers.spacer0);
23
+ gap: theme("digitv2.spacers.spacer2") theme("digitv2.spacers.spacer0");
21
24
  }
22
25
 
23
26
  .upload-options-svg-wrap{
24
- width: theme(digitv2.spacers.spacer10);
25
- height: theme(digitv2.spacers.spacer10);
27
+ width: theme("digitv2.spacers.spacer10");
28
+ height: theme("digitv2.spacers.spacer10");
26
29
  cursor: pointer;
27
30
  }
28
31
 
29
32
  .upload-options-label {
30
- @extend .typography.button.large;
33
+ @include typography-button-large;
31
34
  @apply cursor-pointer;
32
- color: theme(digitv2.lightTheme.primary-1);
35
+ color: theme("digitv2.lightTheme.primary-1");
33
36
  }
34
37
  }
35
38
 
@@ -68,14 +71,14 @@
68
71
 
69
72
  .digit-uploader-wrap {
70
73
  @apply flex flex-col;
71
- gap: theme(digitv2.spacers.spacer3);
74
+ gap: theme("digitv2.spacers.spacer3");
72
75
 
73
76
  @media (max-width: 30rem) {
74
- gap: theme(digitv2.spacers.spacer2);
77
+ gap: theme("digitv2.spacers.spacer2");
75
78
  }
76
79
 
77
80
  &.error{
78
- gap:theme(digitv2.spacers.spacer1);
81
+ gap:theme("digitv2.spacers.spacer1");
79
82
  }
80
83
 
81
84
  &.inline{
@@ -83,15 +86,15 @@
83
86
  }
84
87
 
85
88
  .digit-upload-label {
86
- @extend .typography.label;
89
+ @include typography-label;
87
90
  @apply text-left;
88
- margin: theme(digitv2.spacers.spacer0);
89
- color: theme(digitv2.lightTheme.text-primary);
91
+ margin: theme("digitv2.spacers.spacer0");
92
+ color: theme("digitv2.lightTheme.text-primary");
90
93
  }
91
94
 
92
95
  .digit-uploader-content {
93
96
  @apply flex w-full;
94
- gap: theme(digitv2.spacers.spacer3);
97
+ gap: theme("digitv2.spacers.spacer3");
95
98
 
96
99
  @media (min-width: 30.063rem) and (max-width: 47.938rem) {
97
100
  max-width: 27.5rem;
@@ -116,10 +119,10 @@
116
119
 
117
120
  .digit-uploader-content-uploadWidget {
118
121
  @apply flex flex-col w-full items-center justify-center max-w-full;
119
- gap: theme(digitv2.spacers.spacer4);
120
- border: 0.063rem solid theme(digitv2.lightTheme.generic-divider);
121
- background: theme(digitv2.lightTheme.paper-secondary);
122
- padding: theme(digitv2.spacers.spacer4);
122
+ gap: theme("digitv2.spacers.spacer4");
123
+ border: 0.063rem solid theme("digitv2.lightTheme.generic-divider");
124
+ background: theme("digitv2.lightTheme.paper-secondary");
125
+ padding: theme("digitv2.spacers.spacer4");
123
126
  height: 9rem;
124
127
  border-style: dashed;
125
128
 
@@ -140,30 +143,30 @@
140
143
  }
141
144
 
142
145
  .drag-drop-text {
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);
146
+ @include typography-body-s;
147
+ font-family: theme("digitv2.fontFamily.sans");
148
+ font-style: theme("digitv2.fontStyle.normal");
149
+ font-weight: theme("digitv2.fontWeight.regular");
150
+ line-height: theme("digitv2.lineHeight.lineheight2");
148
151
 
149
152
  @media (max-aspect-ratio: 9/16) {
150
153
  /* Media query for mobile */
151
- font-size: theme(digitv2.fontSize.body-s.mobile);
154
+ font-size: theme("digitv2.fontSize.body-s.mobile");
152
155
  }
153
156
 
154
157
  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
155
158
  /* Media query for tablets */
156
- font-size: theme(digitv2.fontSize.body-s.tablet);
159
+ font-size: theme("digitv2.fontSize.body-s.tablet");
157
160
  }
158
161
 
159
162
  @media (min-aspect-ratio: 3/4) {
160
163
  /* Media query for desktop */
161
- font-size: theme(digitv2.fontSize.body-s.desktop);
164
+ font-size: theme("digitv2.fontSize.body-s.desktop");
162
165
  }
163
166
  @apply items-center;
164
- color: theme(digitv2.lightTheme.text-disabled);
167
+ color: theme("digitv2.lightTheme.text-disabled");
165
168
  display: flex;
166
- margin: theme(digitv2.spacers.spacer0);
169
+ margin: theme("digitv2.spacers.spacer0");
167
170
 
168
171
  @media (max-width: 30rem) {
169
172
  @apply flex-col;
@@ -171,40 +174,40 @@
171
174
  }
172
175
 
173
176
  .drag-drop-link{
174
- @extend .typography.link-S;
175
- margin-left: theme(digitv2.spacers.spacer1);
176
- color: theme(digitv2.lightTheme.primary-1);
177
+ @include typography-link-S;
178
+ margin-left: theme("digitv2.spacers.spacer1");
179
+ color: theme("digitv2.lightTheme.primary-1");
177
180
  cursor: pointer;
178
181
  }
179
182
 
180
183
  &.error {
181
184
  border-style: dashed !important;
182
- border: 0.094rem solid theme(digitv2.lightTheme.alert-error);
185
+ border: 0.094rem solid theme("digitv2.lightTheme.alert-error");
183
186
  }
184
187
  }
185
188
 
186
189
  .digit-uploadWidget-label {
187
- @extend .typography.body-s;
188
- font-family: theme(digitv2.fontFamily.sans);
189
- font-style: theme(digitv2.fontStyle.normal);
190
- font-weight: theme(digitv2.fontWeight.regular);
191
- line-height: theme(digitv2.lineHeight.lineheight2);
190
+ @include typography-body-s;
191
+ font-family: theme("digitv2.fontFamily.sans");
192
+ font-style: theme("digitv2.fontStyle.normal");
193
+ font-weight: theme("digitv2.fontWeight.regular");
194
+ line-height: theme("digitv2.lineHeight.lineheight2");
192
195
 
193
196
  @media (max-aspect-ratio: 9/16) {
194
197
  /* Media query for mobile */
195
- font-size: theme(digitv2.fontSize.body-s.mobile);
198
+ font-size: theme("digitv2.fontSize.body-s.mobile");
196
199
  }
197
200
 
198
201
  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
199
202
  /* Media query for tablets */
200
- font-size: theme(digitv2.fontSize.body-s.tablet);
203
+ font-size: theme("digitv2.fontSize.body-s.tablet");
201
204
  }
202
205
 
203
206
  @media (min-aspect-ratio: 3/4) {
204
207
  /* Media query for desktop */
205
- font-size: theme(digitv2.fontSize.body-s.desktop);
208
+ font-size: theme("digitv2.fontSize.body-s.desktop");
206
209
  }
207
- color: theme(digitv2.lightTheme.text-disabled);
210
+ color: theme("digitv2.lightTheme.text-disabled");
208
211
  }
209
212
 
210
213
  .digit-upload {
@@ -212,44 +215,44 @@
212
215
  }
213
216
 
214
217
  .digit-uploader-input {
215
- @extend .typography.body-s;
216
- font-family: theme(digitv2.fontFamily.sans);
217
- font-style: theme(digitv2.fontStyle.normal);
218
- font-weight: theme(digitv2.fontWeight.regular);
219
- line-height: theme(digitv2.lineHeight.lineheight2);
218
+ @include typography-body-s;
219
+ font-family: theme("digitv2.fontFamily.sans");
220
+ font-style: theme("digitv2.fontStyle.normal");
221
+ font-weight: theme("digitv2.fontWeight.regular");
222
+ line-height: theme("digitv2.lineHeight.lineheight2");
220
223
 
221
224
  @media (max-aspect-ratio: 9/16) {
222
225
  /* Media query for mobile */
223
- font-size: theme(digitv2.fontSize.body-s.mobile);
226
+ font-size: theme("digitv2.fontSize.body-s.mobile");
224
227
  }
225
228
 
226
229
  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
227
230
  /* Media query for tablets */
228
- font-size: theme(digitv2.fontSize.body-s.tablet);
231
+ font-size: theme("digitv2.fontSize.body-s.tablet");
229
232
  }
230
233
 
231
234
  @media (min-aspect-ratio: 3/4) {
232
235
  /* Media query for desktop */
233
- font-size: theme(digitv2.fontSize.body-s.desktop);
236
+ font-size: theme("digitv2.fontSize.body-s.desktop");
234
237
  }
235
238
  @apply h-10;
236
239
  background-color: transparent;
237
- border: 0.063rem solid theme(digitv2.lightTheme.text-secondary);
238
- padding: theme(digitv2.spacers.spacer2);
239
- color: theme(digitv2.lightTheme.text-primary) !important;
240
+ border: 0.063rem solid theme("digitv2.lightTheme.text-secondary");
241
+ padding: theme("digitv2.spacers.spacer2");
242
+ color: theme("digitv2.lightTheme.text-primary") !important;
240
243
 
241
244
  &:focus {
242
245
  @apply outline-none;
243
246
  }
244
247
 
245
248
  &.error {
246
- border: 0.094rem solid theme(digitv2.lightTheme.alert-error);
249
+ border: 0.094rem solid theme("digitv2.lightTheme.alert-error");
247
250
  }
248
251
 
249
252
  }
250
253
 
251
254
  input::placeholder {
252
- color: theme(digitv2.lightTheme.text-disabled) !important;
255
+ color: theme("digitv2.lightTheme.text-disabled") !important;
253
256
  }
254
257
 
255
258
  .digit-upload,
@@ -276,7 +279,7 @@
276
279
 
277
280
  .digit-img-container {
278
281
  @apply flex flex-wrap max-w-full;
279
- gap: theme(digitv2.spacers.spacer3);
282
+ gap: theme("digitv2.spacers.spacer3");
280
283
 
281
284
  .preview-container {
282
285
  @apply relative cursor-pointer h-auto;
@@ -308,7 +311,7 @@
308
311
  }
309
312
 
310
313
  .digit-docupload-icon{
311
- border: 0.063rem solid theme(digitv2.lightTheme.generic-divider);
314
+ border: 0.063rem solid theme("digitv2.lightTheme.generic-divider");
312
315
 
313
316
  &:hover{
314
317
  box-shadow: 0rem 0.063rem 0.125rem 0rem #00000029;
@@ -316,9 +319,9 @@
316
319
  }
317
320
 
318
321
  .preview-file-name{
319
- @extend .typography.body-xs;
322
+ @include typography-body-xs;
320
323
  @apply whitespace-pre-wrap break-words;
321
- color: theme(digitv2.lightTheme.text-secondary);
324
+ color: theme("digitv2.lightTheme.text-secondary");
322
325
  word-break: break-word;
323
326
  cursor: default;
324
327
  }
@@ -334,7 +337,7 @@
334
337
 
335
338
  &.error {
336
339
  img {
337
- border: 0.063rem solid theme(digitv2.lightTheme.alert-error);
340
+ border: 0.063rem solid theme("digitv2.lightTheme.alert-error");
338
341
  }
339
342
  }
340
343
 
@@ -382,49 +385,49 @@
382
385
 
383
386
  .digit-uploader-close-icon {
384
387
  @apply absolute top-0 right-0 w-6 h-6 cursor-pointer;
385
- background-color: theme(digitv2.lightTheme.primary-2);
386
- padding: theme(digitv2.spacers.spacer1);
388
+ background-color: theme("digitv2.lightTheme.primary-2");
389
+ padding: theme("digitv2.spacers.spacer1");
387
390
 
388
391
  &.error {
389
- background-color: theme(digitv2.lightTheme.alert-error);
392
+ background-color: theme("digitv2.lightTheme.alert-error");
390
393
  }
391
394
  }
392
395
 
393
396
  .digit-upload-helptext {
394
- @extend .typography.body-s;
395
- font-family: theme(digitv2.fontFamily.sans);
396
- font-style: theme(digitv2.fontStyle.normal);
397
- font-weight: theme(digitv2.fontWeight.regular);
398
- line-height: theme(digitv2.lineHeight.lineheight2);
397
+ @include typography-body-s;
398
+ font-family: theme("digitv2.fontFamily.sans");
399
+ font-style: theme("digitv2.fontStyle.normal");
400
+ font-weight: theme("digitv2.fontWeight.regular");
401
+ line-height: theme("digitv2.lineHeight.lineheight2");
399
402
 
400
403
  @media (max-aspect-ratio: 9/16) {
401
404
  /* Media query for mobile */
402
- font-size: theme(digitv2.fontSize.body-s.mobile);
405
+ font-size: theme("digitv2.fontSize.body-s.mobile");
403
406
  }
404
407
 
405
408
  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
406
409
  /* Media query for tablets */
407
- font-size: theme(digitv2.fontSize.body-s.tablet);
410
+ font-size: theme("digitv2.fontSize.body-s.tablet");
408
411
  }
409
412
 
410
413
  @media (min-aspect-ratio: 3/4) {
411
414
  /* Media query for desktop */
412
- font-size: theme(digitv2.fontSize.body-s.desktop);
415
+ font-size: theme("digitv2.fontSize.body-s.desktop");
413
416
  }
414
417
  @apply text-left;
415
- margin: theme(digitv2.spacers.spacer0);
416
- color: theme(digitv2.lightTheme.text-secondary);
418
+ margin: theme("digitv2.spacers.spacer0");
419
+ color: theme("digitv2.lightTheme.text-secondary");
417
420
  }
418
421
 
419
422
  .digit-uploaded-file-container {
420
423
  @apply items-start relative w-full max-w-full flex-wrap;
421
424
  display: flex !important;
422
- gap: theme(digitv2.spacers.spacer3);
423
- border: 0.063rem solid theme(digitv2.lightTheme.generic-divider);
424
- background-color: theme(digitv2.lightTheme.paper-secondary);
425
- margin: theme(digitv2.spacers.spacer0);
426
- padding: theme(digitv2.spacers.spacer4);
427
- border-radius: theme(digitv2.spacers.spacer0);
425
+ gap: theme("digitv2.spacers.spacer3");
426
+ border: 0.063rem solid theme("digitv2.lightTheme.generic-divider");
427
+ background-color: theme("digitv2.lightTheme.paper-secondary");
428
+ margin: theme("digitv2.spacers.spacer0");
429
+ padding: theme("digitv2.spacers.spacer4");
430
+ border-radius: theme("digitv2.spacers.spacer0");
428
431
 
429
432
  @media (min-width: 30.063rem) and (max-width: 47.938rem) {
430
433
  min-width: 18.75rem;
@@ -441,30 +444,30 @@
441
444
  .uploaded-file-container-sub {
442
445
  @apply items-center cursor-pointer;
443
446
  display: flex !important;
444
- gap: theme(digitv2.spacers.spacer2);
447
+ gap: theme("digitv2.spacers.spacer2");
445
448
 
446
449
  .uploaded-file-details {
447
- @extend .typography.heading-s;
448
- font-family: theme(digitv2.fontFamily.sans);
449
- font-style: theme(digitv2.fontStyle.normal);
450
- font-weight: theme(digitv2.fontWeight.bold);
451
- line-height: theme(digitv2.lineHeight.lineheight1);
450
+ @include typography-heading-s;
451
+ font-family: theme("digitv2.fontFamily.sans");
452
+ font-style: theme("digitv2.fontStyle.normal");
453
+ font-weight: theme("digitv2.fontWeight.bold");
454
+ line-height: theme("digitv2.lineHeight.lineheight1");
452
455
 
453
456
  @media (max-aspect-ratio: 9/16) {
454
457
  /* Media query for mobile */
455
- font-size: theme(digitv2.fontSize.heading-s.mobile);
458
+ font-size: theme("digitv2.fontSize.heading-s.mobile");
456
459
  }
457
460
 
458
461
  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
459
462
  /* Media query for tablets */
460
- font-size: theme(digitv2.fontSize.heading-s.tablet);
463
+ font-size: theme("digitv2.fontSize.heading-s.tablet");
461
464
  }
462
465
 
463
466
  @media (min-aspect-ratio: 3/4) {
464
467
  /* Media query for desktop */
465
- font-size: theme(digitv2.fontSize.heading-s.desktop);
468
+ font-size: theme("digitv2.fontSize.heading-s.desktop");
466
469
  }
467
- color: theme(digitv2.lightTheme.text-secondary);
470
+ color: theme("digitv2.lightTheme.text-secondary");
468
471
  }
469
472
 
470
473
  svg {
@@ -475,19 +478,19 @@
475
478
  .digit-upload-and-download-button {
476
479
  @apply flex-wrap;
477
480
  display: flex !important;
478
- gap: theme(digitv2.spacers.spacer4);
481
+ gap: theme("digitv2.spacers.spacer4");
479
482
  margin-left: auto;
480
- margin-right: theme(digitv2.spacers.spacer6);
483
+ margin-right: theme("digitv2.spacers.spacer6");
481
484
 
482
485
  &.error-card{
483
- margin-right: theme(digitv2.spacers.spacer0);
486
+ margin-right: theme("digitv2.spacers.spacer0");
484
487
  }
485
488
  }
486
489
 
487
490
  .digit-uploadWidget-close-icon {
488
491
  @apply absolute top-0 right-0 w-6 h-6 items-center cursor-pointer;
489
- background: theme(digitv2.lightTheme.generic-background);
490
- border: 0.063rem solid theme(digitv2.lightTheme.generic-divider);
492
+ background: theme("digitv2.lightTheme.generic-background");
493
+ border: 0.063rem solid theme("digitv2.lightTheme.generic-divider");
491
494
  display: flex !important;
492
495
  justify-content: center;
493
496
  border-top: none;
@@ -499,11 +502,11 @@
499
502
  }
500
503
 
501
504
  &.error {
502
- border: 0.063rem solid theme(digitv2.lightTheme.alert-error);
505
+ border: 0.063rem solid theme("digitv2.lightTheme.alert-error");
503
506
 
504
507
  .digit-uploadWidget-close-icon {
505
- background: theme(digitv2.lightTheme.alert-error);
506
- border: 0.063rem solid theme(digitv2.lightTheme.alert-error);
508
+ background: theme("digitv2.lightTheme.alert-error");
509
+ border: 0.063rem solid theme("digitv2.lightTheme.alert-error");
507
510
  border-top: none;
508
511
  border-right: none;
509
512
  }
@@ -512,15 +515,15 @@
512
515
 
513
516
  .uploaded-file-details {
514
517
  @apply flex-col;
515
- color: theme(digitv2.lightTheme.alert-error);
518
+ color: theme("digitv2.lightTheme.alert-error");
516
519
  display: flex;
517
- gap: theme(digitv2.spacers.spacer1);
520
+ gap: theme("digitv2.spacers.spacer1");
518
521
  }
519
522
  }
520
523
 
521
524
  .uploadWidget-error-card {
522
525
  @apply w-full max-w-full;
523
- margin: theme(digitv2.spacers.spacer0);
526
+ margin: theme("digitv2.spacers.spacer0");
524
527
  }
525
528
  }
526
529
  }
@@ -528,17 +531,17 @@
528
531
  .image-background {
529
532
  @apply fixed top-0 left-0 right-0 bottom-0 w-full;
530
533
  height: 100vh;
531
- background-color: theme(digitv2.lightTheme.text-color-primary);
534
+ background-color: theme("digitv2.lightTheme.text-color-primary");
532
535
  }
533
536
 
534
537
  .digit-image-uploader {
535
538
  @apply flex-col items-center cursor-pointer;
536
539
  display: flex;
537
- border: 0.063rem solid theme(digitv2.lightTheme.generic-inputborder);
540
+ border: 0.063rem solid theme("digitv2.lightTheme.generic-inputborder");
538
541
  background-color: transparent;
539
542
  justify-content: center;
540
543
  gap: 0.188rem;
541
- padding: theme(digitv2.spacers.spacer10);
544
+ padding: theme("digitv2.spacers.spacer10");
542
545
 
543
546
  width: 100%;
544
547
 
@@ -555,8 +558,8 @@
555
558
  }
556
559
 
557
560
  .upload-image-label {
558
- @extend .typography.body-xs;
559
- color: theme(digitv2.lightTheme.primary-1);
561
+ @include typography-body-xs;
562
+ color: theme("digitv2.lightTheme.primary-1");
560
563
  }
561
564
  }
562
565
 
@@ -566,10 +569,10 @@
566
569
  left: 50%;
567
570
  top: 25%;
568
571
  transform: translateX(-50%);
569
- gap: theme(digitv2.spacers.spacer6);
570
- background-color: theme(digitv2.lightTheme.paper-primary);
571
- border-radius: theme(digitv2.spacers.spacer1);
572
- padding: theme(digitv2.spacers.spacer6);
572
+ gap: theme("digitv2.spacers.spacer6");
573
+ background-color: theme("digitv2.lightTheme.paper-primary");
574
+ border-radius: theme("digitv2.spacers.spacer1");
575
+ padding: theme("digitv2.spacers.spacer6");
573
576
 
574
577
  @media (min-width: 30.063rem) and (max-width: 47.938rem) {
575
578
  max-height: 31.25rem;
@@ -607,7 +610,7 @@
607
610
  }
608
611
 
609
612
  video {
610
- border: 0.063rem solid theme(digitv2.lightTheme.text-secondary);
613
+ border: 0.063rem solid theme("digitv2.lightTheme.text-secondary");
611
614
  width: 100% !important;
612
615
  height: 100% !important;
613
616
  max-width: 100% !important;
@@ -615,12 +618,12 @@
615
618
  }
616
619
 
617
620
  .cancel-capture-button-wrap {
618
- gap: theme(digitv2.spacers.spacer6);
621
+ gap: theme("digitv2.spacers.spacer6");
619
622
  margin-left: auto;
620
623
 
621
624
  @media (max-width: 30rem) {
622
625
  justify-content: space-between;
623
- margin-left: theme(digitv2.spacers.spacer0);
626
+ margin-left: theme("digitv2.spacers.spacer0");
624
627
  flex-direction: column;
625
628
 
626
629
  button {
@@ -631,25 +634,25 @@
631
634
  }
632
635
 
633
636
  .capture-heading {
634
- @extend .typography.heading-m;
635
- font-family: theme(digitv2.fontFamily.sans);
636
- font-style: theme(digitv2.fontStyle.normal);
637
- font-weight: theme(digitv2.fontWeight.bold);
638
- line-height: theme(digitv2.lineHeight.lineheight1);
637
+ @include typography-heading-m;
638
+ font-family: theme("digitv2.fontFamily.sans");
639
+ font-style: theme("digitv2.fontStyle.normal");
640
+ font-weight: theme("digitv2.fontWeight.bold");
641
+ line-height: theme("digitv2.lineHeight.lineheight1");
639
642
 
640
643
  @media (max-aspect-ratio: 9/16) {
641
644
  /* Media query for mobile */
642
- font-size: theme(digitv2.fontSize.heading-m.mobile);
645
+ font-size: theme("digitv2.fontSize.heading-m.mobile");
643
646
  }
644
647
 
645
648
  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
646
649
  /* Media query for tablets */
647
- font-size: theme(digitv2.fontSize.heading-m.tablet);
650
+ font-size: theme("digitv2.fontSize.heading-m.tablet");
648
651
  }
649
652
 
650
653
  @media (min-aspect-ratio: 3/4) {
651
654
  /* Media query for desktop */
652
- font-size: theme(digitv2.fontSize.heading-m.desktop);
655
+ font-size: theme("digitv2.fontSize.heading-m.desktop");
653
656
  }
654
657
  @apply items-center;
655
658
  color: #000000;
@@ -693,19 +696,19 @@
693
696
  flex-direction: column;
694
697
 
695
698
  @media (min-width: 30.063rem) and (max-width: 47.938rem) {
696
- gap:theme(digitv2.spacers.spacer5);
699
+ gap:theme("digitv2.spacers.spacer5");
697
700
  }
698
701
 
699
702
  @media (max-width: 30rem) {
700
- gap:theme(digitv2.spacers.spacer4);
703
+ gap:theme("digitv2.spacers.spacer4");
701
704
  }
702
705
 
703
706
  @media (min-width: 48rem) {
704
- gap:theme(digitv2.spacers.spacer6);
707
+ gap:theme("digitv2.spacers.spacer6");
705
708
  }
706
709
 
707
710
  .upload-filecomposer-header{
708
- color: theme(digitv2.lightTheme.text-primary) !important;
711
+ color: theme("digitv2.lightTheme.text-primary") !important;
709
712
  }
710
713
 
711
714
  }