@egovernments/digit-ui-components-css 2.0.0-dev-11 → 2.0.0-dev-12

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