@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/components/filterCardV2.scss CHANGED
@@ -1,3 +1,6 @@
1
+ @import './theme-variables.css';
2
+ @import '../typography.scss';
3
+
1
4
  .digit-filter-card-popup-overlay {
2
5
  position: fixed;
3
6
  top: 0;
@@ -15,9 +18,9 @@
15
18
  .digit-filter-card-popup-wrapper {
16
19
  @apply w-full h-auto flex-col fixed;
17
20
  z-index: 10000;
18
- background-color: theme(digitv2.lightTheme.paper-primary);
19
- border-radius: theme(digitv2.spacers.spacer1);
20
- box-shadow: theme(digitv2.spacers.spacer0) 0.063rem 0.125rem theme(digitv2.spacers.spacer0) #00000029;
21
+ background-color: theme("digitv2.lightTheme.paper-primary");
22
+ border-radius: theme("digitv2.spacers.spacer1");
23
+ box-shadow: theme("digitv2.spacers.spacer0") 0.063rem 0.125rem theme("digitv2.spacers.spacer0") #00000029;
21
24
  display: flex;
22
25
  top: 50%;
23
26
  left: 50%;
@@ -41,7 +44,7 @@
41
44
  }
42
45
 
43
46
  .digit-radio-options-wrap {
44
- margin-bottom: theme(digitv2.spacers.spacer0);
47
+ margin-bottom: theme("digitv2.spacers.spacer0");
45
48
  }
46
49
  }
47
50
  }
@@ -79,15 +82,15 @@
79
82
  .filter-card {
80
83
  width: 100%;
81
84
  height: auto;
82
- background-color: theme(digitv2.lightTheme.paper-primary);
83
- border-radius: theme(digitv2.spacers.spacer1);
85
+ background-color: theme("digitv2.lightTheme.paper-primary");
86
+ border-radius: theme("digitv2.spacers.spacer1");
84
87
  box-shadow: 0rem 0.063rem 0.125rem 0rem #00000029;
85
88
  display: flex;
86
89
  flex-direction: column;
87
90
  position: relative;
88
91
 
89
92
  .digit-radio-options-wrap {
90
- margin-bottom: theme(digitv2.spacers.spacer0);
93
+ margin-bottom: theme("digitv2.spacers.spacer0");
91
94
  }
92
95
  }
93
96
 
@@ -131,52 +134,52 @@
131
134
  .close-icon {
132
135
  cursor: pointer;
133
136
  position: absolute;
134
- top: theme(digitv2.spacers.spacer2);
135
- right: theme(digitv2.spacers.spacer2);
136
- width: theme(digitv2.spacers.spacer8);
137
- height: theme(digitv2.spacers.spacer8);
137
+ top: theme("digitv2.spacers.spacer2");
138
+ right: theme("digitv2.spacers.spacer2");
139
+ width: theme("digitv2.spacers.spacer8");
140
+ height: theme("digitv2.spacers.spacer8");
138
141
  }
139
142
  }
140
143
 
141
144
  &.with-shadow {
142
- box-shadow: theme(digitv2.spacers.spacer0) 0.063rem 0.125rem theme(digitv2.spacers.spacer0) #00000026;
145
+ box-shadow: theme("digitv2.spacers.spacer0") 0.063rem 0.125rem theme("digitv2.spacers.spacer0") #00000026;
143
146
  }
144
147
 
145
148
  &.with-shadow {
146
- box-shadow: theme(digitv2.spacers.spacer0) 0.063rem 0.125rem theme(digitv2.spacers.spacer0) #00000026;
149
+ box-shadow: theme("digitv2.spacers.spacer0") 0.063rem 0.125rem theme("digitv2.spacers.spacer0") #00000026;
147
150
  }
148
151
 
149
152
  @media (min-aspect-ratio: 3/4) {
150
- padding: theme(digitv2.spacers.spacer6);
151
- padding-bottom: theme(digitv2.spacers.spacer0);
153
+ padding: theme("digitv2.spacers.spacer6");
154
+ padding-bottom: theme("digitv2.spacers.spacer0");
152
155
 
153
156
  &.with-shadow {
154
- padding-bottom: theme(digitv2.spacers.spacer6);
157
+ padding-bottom: theme("digitv2.spacers.spacer6");
155
158
  }
156
159
  }
157
160
 
158
161
  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
159
- padding: theme(digitv2.spacers.spacer5);
160
- padding-bottom: theme(digitv2.spacers.spacer0);
162
+ padding: theme("digitv2.spacers.spacer5");
163
+ padding-bottom: theme("digitv2.spacers.spacer0");
161
164
 
162
165
  &.with-shadow {
163
- padding-bottom: theme(digitv2.spacers.spacer5);
166
+ padding-bottom: theme("digitv2.spacers.spacer5");
164
167
  }
165
168
  }
166
169
 
167
170
  @media (max-aspect-ratio: 9/16) {
168
- padding: theme(digitv2.spacers.spacer4);
169
- padding-bottom: theme(digitv2.spacers.spacer0);
171
+ padding: theme("digitv2.spacers.spacer4");
172
+ padding-bottom: theme("digitv2.spacers.spacer0");
170
173
 
171
174
  &.with-shadow {
172
- padding-bottom: theme(digitv2.spacers.spacer4);
175
+ padding-bottom: theme("digitv2.spacers.spacer4");
173
176
  }
174
177
  }
175
178
  }
176
179
 
177
180
  .filter-header .filter-title {
178
- @extend .typography.caption-l;
179
- color: theme(digitv2.lightTheme.primary-2);
181
+ @include typography-caption-l;
182
+ color: theme("digitv2.lightTheme.primary-2");
180
183
  }
181
184
 
182
185
  .content-container {
@@ -186,34 +189,34 @@
186
189
 
187
190
 
188
191
  @media (min-aspect-ratio: 3/4) {
189
- gap: theme(digitv2.spacers.spacer6);
190
- padding: theme(digitv2.spacers.spacer6) theme(digitv2.spacers.spacer6) theme(digitv2.spacers.spacer0) theme(digitv2.spacers.spacer6);
192
+ gap: theme("digitv2.spacers.spacer6");
193
+ padding: theme("digitv2.spacers.spacer6") theme("digitv2.spacers.spacer6") theme("digitv2.spacers.spacer0") theme("digitv2.spacers.spacer6");
191
194
 
192
195
  &.with-shadow,
193
196
  &.without-footer {
194
- padding: theme(digitv2.spacers.spacer6);
197
+ padding: theme("digitv2.spacers.spacer6");
195
198
  }
196
199
 
197
200
  }
198
201
 
199
202
  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
200
- gap: theme(digitv2.spacers.spacer5);
201
- padding: theme(digitv2.spacers.spacer5) theme(digitv2.spacers.spacer5) theme(digitv2.spacers.spacer0) theme(digitv2.spacers.spacer5);
203
+ gap: theme("digitv2.spacers.spacer5");
204
+ padding: theme("digitv2.spacers.spacer5") theme("digitv2.spacers.spacer5") theme("digitv2.spacers.spacer0") theme("digitv2.spacers.spacer5");
202
205
 
203
206
  &.with-shadow,
204
207
  &.without-footer {
205
- padding: theme(digitv2.spacers.spacer5);
208
+ padding: theme("digitv2.spacers.spacer5");
206
209
  }
207
210
 
208
211
  }
209
212
 
210
213
  @media (max-aspect-ratio: 9/16) {
211
- gap: theme(digitv2.spacers.spacer4);
212
- padding: theme(digitv2.spacers.spacer4) theme(digitv2.spacers.spacer4) theme(digitv2.spacers.spacer0) theme(digitv2.spacers.spacer4);
214
+ gap: theme("digitv2.spacers.spacer4");
215
+ padding: theme("digitv2.spacers.spacer4") theme("digitv2.spacers.spacer4") theme("digitv2.spacers.spacer0") theme("digitv2.spacers.spacer4");
213
216
 
214
217
  &.with-shadow,
215
218
  &.without-footer {
216
- padding: theme(digitv2.spacers.spacer4);
219
+ padding: theme("digitv2.spacers.spacer4");
217
220
  }
218
221
  }
219
222
 
@@ -285,20 +288,20 @@
285
288
  }
286
289
 
287
290
  &.with-shadow {
288
- box-shadow: theme(digitv2.spacers.spacer0) -0.063rem 0.125rem theme(digitv2.spacers.spacer0) #00000026;
291
+ box-shadow: theme("digitv2.spacers.spacer0") -0.063rem 0.125rem theme("digitv2.spacers.spacer0") #00000026;
289
292
  }
290
293
 
291
294
  @media (min-aspect-ratio: 3/4) {
292
- padding: theme(digitv2.spacers.spacer6);
295
+ padding: theme("digitv2.spacers.spacer6");
293
296
  }
294
297
 
295
298
  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
296
299
  @apply w-full;
297
- padding: theme(digitv2.spacers.spacer5);
300
+ padding: theme("digitv2.spacers.spacer5");
298
301
  }
299
302
 
300
303
  @media (max-aspect-ratio: 9/16) {
301
- padding: theme(digitv2.spacers.spacer4);
304
+ padding: theme("digitv2.spacers.spacer4");
302
305
  }
303
306
  }
304
307
 
@@ -308,18 +311,18 @@
308
311
  overflow-y: auto;
309
312
 
310
313
  @media (min-aspect-ratio: 3/4) {
311
- gap: theme(digitv2.spacers.spacer6);
312
- padding: theme(digitv2.spacers.spacer6);
314
+ gap: theme("digitv2.spacers.spacer6");
315
+ padding: theme("digitv2.spacers.spacer6");
313
316
  }
314
317
 
315
318
  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
316
- padding: theme(digitv2.spacers.spacer5);
317
- gap: theme(digitv2.spacers.spacer5);
319
+ padding: theme("digitv2.spacers.spacer5");
320
+ gap: theme("digitv2.spacers.spacer5");
318
321
  }
319
322
 
320
323
  @media (max-aspect-ratio: 9/16) {
321
- padding: theme(digitv2.spacers.spacer4);
322
- gap: theme(digitv2.spacers.spacer4);
324
+ padding: theme("digitv2.spacers.spacer4");
325
+ gap: theme("digitv2.spacers.spacer4");
323
326
  }
324
327
 
325
328
  .content-container {
@@ -385,33 +388,33 @@
385
388
  }
386
389
 
387
390
  .content-container::-webkit-scrollbar {
388
- width: theme(digitv2.spacers.spacer2);
391
+ width: theme("digitv2.spacers.spacer2");
389
392
  height: 0rem;
390
- background-color: theme(digitv2.lightTheme.generic-background);
393
+ background-color: theme("digitv2.lightTheme.generic-background");
391
394
  }
392
395
 
393
396
  .content-container::-webkit-scrollbar-track {
394
- background-color: theme(digitv2.lightTheme.generic-background);
397
+ background-color: theme("digitv2.lightTheme.generic-background");
395
398
  border-radius: 0.563rem;
396
399
  }
397
400
 
398
401
  .content-container::-webkit-scrollbar-thumb {
399
- background-color: theme(digitv2.lightTheme.generic-divider);
402
+ background-color: theme("digitv2.lightTheme.generic-divider");
400
403
  border-radius: 0.563rem;
401
404
  }
402
405
 
403
406
  .content-action-wrapper::-webkit-scrollbar {
404
- width: theme(digitv2.spacers.spacer2);
405
- background-color: theme(digitv2.lightTheme.generic-background);
407
+ width: theme("digitv2.spacers.spacer2");
408
+ background-color: theme("digitv2.lightTheme.generic-background");
406
409
  }
407
410
 
408
411
 
409
412
  .content-action-wrapper::-webkit-scrollbar-track {
410
- background-color: theme(digitv2.lightTheme.generic-background);
413
+ background-color: theme("digitv2.lightTheme.generic-background");
411
414
  border-radius: 0.563rem;
412
415
  }
413
416
 
414
417
  .content-action-wrapper::-webkit-scrollbar-thumb {
415
- background-color: theme(digitv2.lightTheme.generic-divider);
418
+ background-color: theme("digitv2.lightTheme.generic-divider");
416
419
  border-radius: 0.563rem;
417
420
  }
package/src/digitv2/components/footerV2.scss CHANGED
@@ -1,4 +1,5 @@
1
- @import url("../index.scss");
1
+ @import './theme-variables.css';
2
+ @import '../typography.scss';
2
3
 
3
4
  /*.digit-action-bar-wrap {
4
5
  @extend .light-text-color-primary;
@@ -111,12 +112,12 @@
111
112
  .digit-action-bar-wrap{
112
113
  width: 100%;
113
114
  max-width: 100%;
114
- padding: theme(digitv2.spacers.spacer4) theme(digitv2.spacers.spacer8);
115
+ padding: theme("digitv2.spacers.spacer4") theme("digitv2.spacers.spacer8");
115
116
  display: flex !important;
116
117
  align-items: center;
117
118
  justify-content: space-between;
118
- box-shadow: theme(digitv2.spacers.spacer0) -0.063rem 0.125rem theme(digitv2.spacers.spacer0) #00000029;
119
- background-color: theme(digitv2.lightTheme.paper-primary);
119
+ box-shadow: theme("digitv2.spacers.spacer0") -0.063rem 0.125rem theme("digitv2.spacers.spacer0") #00000029;
120
+ background-color: theme("digitv2.lightTheme.paper-primary");
120
121
  height: 4.5rem;
121
122
  position: fixed;
122
123
  bottom: 0;
@@ -125,18 +126,18 @@
125
126
  z-index: 100;
126
127
 
127
128
  @media (min-width: 48rem) {
128
- gap: theme(digitv2.spacers.spacer6);
129
+ gap: theme("digitv2.spacers.spacer6");
129
130
  }
130
131
 
131
132
  @media (min-width: 30.063rem) and (max-width: 47.938rem) {
132
- gap: theme(digitv2.spacers.spacer5);
133
+ gap: theme("digitv2.spacers.spacer5");
133
134
  }
134
135
 
135
136
  @media (max-width: 30rem) {
136
- gap: theme(digitv2.spacers.spacer4);
137
- box-shadow: theme(digitv2.spacers.spacer0) -0.063rem 0.125rem theme(digitv2.spacers.spacer0) #00000026;
137
+ gap: theme("digitv2.spacers.spacer4");
138
+ box-shadow: theme("digitv2.spacers.spacer0") -0.063rem 0.125rem theme("digitv2.spacers.spacer0") #00000026;
138
139
  height: 8rem;
139
- padding: theme(digitv2.spacers.spacer4);
140
+ padding: theme("digitv2.spacers.spacer4");
140
141
  }
141
142
 
142
143
  .digit-action-bar-fields{
@@ -163,15 +164,15 @@
163
164
  }
164
165
 
165
166
  @media (min-width: 48rem) {
166
- gap: theme(digitv2.spacers.spacer6);
167
+ gap: theme("digitv2.spacers.spacer6");
167
168
  }
168
169
 
169
170
  @media (min-width: 30.063rem) and (max-width: 47.938rem) {
170
- gap: theme(digitv2.spacers.spacer5);
171
+ gap: theme("digitv2.spacers.spacer5");
171
172
  }
172
173
 
173
174
  @media (max-width: 30rem) {
174
- gap: theme(digitv2.spacers.spacer4);
175
+ gap: theme("digitv2.spacers.spacer4");
175
176
  flex-direction: column;
176
177
  width: 100%;
177
178
 
@@ -195,7 +196,7 @@
195
196
 
196
197
  .header-dropdown-menu {
197
198
  @apply absolute z-30;
198
- bottom: theme(digitv2.spacers.spacer10);
199
+ bottom: theme("digitv2.spacers.spacer10");
199
200
  right: 0;
200
201
  max-height: unset;
201
202
  margin-top: unset;
package/src/digitv2/components/formCardV2.scss CHANGED
@@ -1,125 +1,128 @@
1
+ @import './theme-variables.css';
2
+ @import '../typography.scss';
3
+
1
4
  .digit-form-card{
2
5
  width: 100%;
3
6
  max-width: 100%;
4
7
  height: fit-content;
5
- background-color: theme(digitv2.lightTheme.paper-primary);
8
+ background-color: theme("digitv2.lightTheme.paper-primary");
6
9
  display: flex;
7
10
  flex-direction: column;
8
- border-radius: theme(digitv2.spacers.spacer1);
11
+ border-radius: theme("digitv2.spacers.spacer1");
9
12
  box-shadow: 0rem 0.063rem 0.125rem 0rem #00000029;
10
13
 
11
14
  .digit-form-card-header {
12
15
  @apply flex-col;
13
16
  display: flex !important;
14
- gap: theme(digitv2.spacers.spacer4);
17
+ gap: theme("digitv2.spacers.spacer4");
15
18
 
16
19
  &.with-shadow {
17
- box-shadow: theme(digitv2.spacers.spacer0) 0.063rem 0.125rem theme(digitv2.spacers.spacer0) #00000026;
20
+ box-shadow: theme("digitv2.spacers.spacer0") 0.063rem 0.125rem theme("digitv2.spacers.spacer0") #00000026;
18
21
  }
19
22
 
20
23
  @media (min-width: 48rem) {
21
- padding: theme(digitv2.spacers.spacer6);
22
- padding-bottom: theme(digitv2.spacers.spacer0);
24
+ padding: theme("digitv2.spacers.spacer6");
25
+ padding-bottom: theme("digitv2.spacers.spacer0");
23
26
 
24
27
  &.with-shadow {
25
- padding-bottom: theme(digitv2.spacers.spacer6);
28
+ padding-bottom: theme("digitv2.spacers.spacer6");
26
29
  }
27
30
  }
28
31
 
29
32
  @media (min-width: 30.063rem) and (max-width: 47.938rem) {
30
- padding: theme(digitv2.spacers.spacer5);
31
- padding-bottom: theme(digitv2.spacers.spacer0);
33
+ padding: theme("digitv2.spacers.spacer5");
34
+ padding-bottom: theme("digitv2.spacers.spacer0");
32
35
 
33
36
  &.with-shadow {
34
- padding-bottom: theme(digitv2.spacers.spacer5);
37
+ padding-bottom: theme("digitv2.spacers.spacer5");
35
38
  }
36
39
  }
37
40
 
38
41
  @media (max-width: 30rem) {
39
- padding: theme(digitv2.spacers.spacer4);
40
- padding-bottom: theme(digitv2.spacers.spacer0);
42
+ padding: theme("digitv2.spacers.spacer4");
43
+ padding-bottom: theme("digitv2.spacers.spacer0");
41
44
 
42
45
  &.with-shadow {
43
- padding-bottom: theme(digitv2.spacers.spacer4);
46
+ padding-bottom: theme("digitv2.spacers.spacer4");
44
47
  }
45
48
  }
46
49
 
47
50
  }
48
51
 
49
52
  .digit-form-card-content {
50
- @extend .typography.body-s;
53
+ @include typography-body-s;
51
54
  position: relative;
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);
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");
56
59
 
57
60
  @media (max-aspect-ratio: 9/16) {
58
61
  /* Media query for mobile */
59
- font-size: theme(digitv2.fontSize.body-s.mobile);
62
+ font-size: theme("digitv2.fontSize.body-s.mobile");
60
63
  }
61
64
 
62
65
  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
63
66
  /* Media query for tablets */
64
- font-size: theme(digitv2.fontSize.body-s.tablet);
67
+ font-size: theme("digitv2.fontSize.body-s.tablet");
65
68
  }
66
69
 
67
70
  @media (min-aspect-ratio: 3/4) {
68
71
  /* Media query for desktop */
69
- font-size: theme(digitv2.fontSize.body-s.desktop);
72
+ font-size: theme("digitv2.fontSize.body-s.desktop");
70
73
  }
71
74
  @apply overflow-hidden overflow-y-auto flex-col;
72
75
  display: flex;
73
76
  flex: 1;
74
- color: theme(digitv2.lightTheme.text-primary);
77
+ color: theme("digitv2.lightTheme.text-primary");
75
78
 
76
79
  &.inline {
77
80
  flex-direction: row;
78
81
  }
79
82
 
80
83
  @media (min-width: 48rem) {
81
- gap: theme(digitv2.spacers.spacer6);
82
- padding: theme(digitv2.spacers.spacer6) theme(digitv2.spacers.spacer6) theme(digitv2.spacers.spacer0) theme(digitv2.spacers.spacer6);
84
+ gap: theme("digitv2.spacers.spacer6");
85
+ padding: theme("digitv2.spacers.spacer6") theme("digitv2.spacers.spacer6") theme("digitv2.spacers.spacer0") theme("digitv2.spacers.spacer6");
83
86
 
84
87
  &.with-shadow,
85
88
  &.without-footer{
86
- padding: theme(digitv2.spacers.spacer6);
89
+ padding: theme("digitv2.spacers.spacer6");
87
90
  }
88
91
 
89
92
  }
90
93
 
91
94
  @media (min-width: 30.063rem) and (max-width: 47.938rem) {
92
- gap: theme(digitv2.spacers.spacer5);
93
- padding: theme(digitv2.spacers.spacer5) theme(digitv2.spacers.spacer5) theme(digitv2.spacers.spacer0) theme(digitv2.spacers.spacer5);
95
+ gap: theme("digitv2.spacers.spacer5");
96
+ padding: theme("digitv2.spacers.spacer5") theme("digitv2.spacers.spacer5") theme("digitv2.spacers.spacer0") theme("digitv2.spacers.spacer5");
94
97
 
95
98
  &.with-shadow,
96
99
  &.without-footer{
97
- padding: theme(digitv2.spacers.spacer5);
100
+ padding: theme("digitv2.spacers.spacer5");
98
101
  }
99
102
 
100
103
  }
101
104
 
102
105
  @media (max-width: 30rem) {
103
- gap: theme(digitv2.spacers.spacer4);
104
- padding: theme(digitv2.spacers.spacer4) theme(digitv2.spacers.spacer4) theme(digitv2.spacers.spacer0) theme(digitv2.spacers.spacer4);
106
+ gap: theme("digitv2.spacers.spacer4");
107
+ padding: theme("digitv2.spacers.spacer4") theme("digitv2.spacers.spacer4") theme("digitv2.spacers.spacer0") theme("digitv2.spacers.spacer4");
105
108
 
106
109
  &.with-shadow,
107
110
  &.without-footer{
108
- padding: theme(digitv2.spacers.spacer4);
111
+ padding: theme("digitv2.spacers.spacer4");
109
112
  }
110
113
  }
111
114
 
112
115
  &.with-divider{
113
116
  @media (min-width: 48rem) {
114
- grid-column-gap: theme(digitv2.spacers.spacer12);
117
+ grid-column-gap: theme("digitv2.spacers.spacer12");
115
118
  }
116
119
 
117
120
  @media (min-width: 30.063rem) and (max-width: 47.938rem) {
118
- grid-column-gap: theme(digitv2.spacers.spacer10);
121
+ grid-column-gap: theme("digitv2.spacers.spacer10");
119
122
  }
120
123
 
121
124
  @media (max-width: 30rem) {
122
- grid-column-gap: theme(digitv2.spacers.spacer8);
125
+ grid-column-gap: theme("digitv2.spacers.spacer8");
123
126
  }
124
127
  }
125
128
 
@@ -135,31 +138,31 @@
135
138
  .digit-form-card-footer {
136
139
  @apply flex-wrap;
137
140
  display: flex;
138
- gap: theme(digitv2.spacers.spacer4);
141
+ gap: theme("digitv2.spacers.spacer4");
139
142
 
140
143
  &.with-shadow {
141
- box-shadow: theme(digitv2.spacers.spacer0) -0.063rem 0.125rem theme(digitv2.spacers.spacer0) #00000026;
144
+ box-shadow: theme("digitv2.spacers.spacer0") -0.063rem 0.125rem theme("digitv2.spacers.spacer0") #00000026;
142
145
  }
143
146
 
144
147
  @media (min-width: 48rem) {
145
- padding: theme(digitv2.spacers.spacer6);
148
+ padding: theme("digitv2.spacers.spacer6");
146
149
  }
147
150
 
148
151
  @media (min-width: 30.063rem) and (max-width: 47.938rem) {
149
152
  @apply w-full;
150
- padding: theme(digitv2.spacers.spacer5);
153
+ padding: theme("digitv2.spacers.spacer5");
151
154
  }
152
155
 
153
156
  @media (max-width: 30rem) {
154
157
  @apply flex-col;
155
- padding: theme(digitv2.spacers.spacer4);
158
+ padding: theme("digitv2.spacers.spacer4");
156
159
  }
157
160
 
158
161
 
159
162
  .digit-form-card-buttons {
160
163
  margin-left: auto;
161
164
  display: flex;
162
- gap: theme(digitv2.spacers.spacer4);
165
+ gap: theme("digitv2.spacers.spacer4");
163
166
  @apply max-w-full flex-wrap;
164
167
 
165
168
  @media (min-width: 30.063rem) and (max-width: 47.938rem) {
@@ -172,7 +175,7 @@
172
175
 
173
176
  @media (max-width: 30rem) {
174
177
  @apply flex-col;
175
- margin: theme(digitv2.spacers.spacer0);
178
+ margin: theme("digitv2.spacers.spacer0");
176
179
 
177
180
  button {
178
181
  width: 100%;
@@ -198,37 +201,37 @@
198
201
 
199
202
  @media (max-aspect-ratio: 9/16) {
200
203
  /* Media query for mobile */
201
- top: theme(digitv2.spacers.spacer4);
204
+ top: theme("digitv2.spacers.spacer4");
202
205
  /*height: calc(100% - 2rem);*/
203
206
  }
204
207
 
205
208
  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
206
209
  /* Media query for tablets */
207
- top: theme(digitv2.spacers.spacer5);
210
+ top: theme("digitv2.spacers.spacer5");
208
211
  /*height: calc(100% - 2.5rem);*/
209
212
  }
210
213
 
211
214
  @media (min-aspect-ratio: 3/4) {
212
215
  /* Media query for desktop */
213
- top: theme(digitv2.spacers.spacer6);
216
+ top: theme("digitv2.spacers.spacer6");
214
217
  /*height: calc(100% - 3rem);*/
215
218
  }
216
- border: 0.063rem solid theme(digitv2.lightTheme.generic-divider);
219
+ border: 0.063rem solid theme("digitv2.lightTheme.generic-divider");
217
220
  z-index: 1;
218
221
  }
219
222
  }
220
223
 
221
224
 
222
225
  .digit-form-card-content::-webkit-scrollbar {
223
- width: theme(digitv2.spacers.spacer2);
224
- background-color: theme(digitv2.lightTheme.generic-background);
226
+ width: theme("digitv2.spacers.spacer2");
227
+ background-color: theme("digitv2.lightTheme.generic-background");
225
228
  }
226
229
  .digit-form-card-content::-webkit-scrollbar-track {
227
- background-color: theme(digitv2.lightTheme.generic-background);
230
+ background-color: theme("digitv2.lightTheme.generic-background");
228
231
  border-radius: 0.563rem;
229
232
  }
230
233
 
231
234
  .digit-form-card-content::-webkit-scrollbar-thumb {
232
- background-color: theme(digitv2.lightTheme.generic-divider);
235
+ background-color: theme("digitv2.lightTheme.generic-divider");
233
236
  border-radius: 0.563rem;
234
237
  }