@egovernments/digit-ui-components-css 2.0.0-dev-10 → 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 +166 -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 +191 -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 +93 -90
  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 +22 -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/selectDropdownV2.scss CHANGED
@@ -19,51 +19,51 @@
19
19
  .digit-dropdown-select {
20
20
  @extend .light-input-border;
21
21
  @apply relative block w-full h-10 bg-white;
22
- border: 0.063rem solid theme("digitv2.lightTheme.text-secondary");
22
+ border: 0.063rem solid var(--digitv2-lightTheme-text-secondary);
23
23
  &.digit-field-error {
24
24
  border: 0.063rem solid;
25
- border-color: theme("digitv2.lightTheme.alert-error");
25
+ border-color: var(--digitv2-lightTheme-alert-error);
26
26
  }
27
27
  &.disabled {
28
28
  pointer-events: none !important;
29
- border: 0.063rem solid theme("digitv2.lightTheme.generic-divider") !important;
30
- color: theme("digitv2.lightTheme.generic-divider") !important;
29
+ border: 0.063rem solid var(--digitv2-lightTheme-generic-divider) !important;
30
+ color: var(--digitv2-lightTheme-generic-divider) !important;
31
31
  }
32
32
  input[type="text"] {
33
33
  @include typography-body-s;
34
34
  @media (max-aspect-ratio: 9/16) {
35
35
  /* Media query for mobile */
36
- font-size: theme("digitv2.fontSize.body-s.mobile");
37
- font-family: theme("digitv2.fontFamily.sans");
38
- font-style: theme("digitv2.fontStyle.normal");
39
- font-weight: theme("digitv2.fontWeight.regular");
40
- line-height: theme("digitv2.lineHeight.lineheight2");
36
+ font-size: var( --digitv2-fontSize-body-s-mobile);
37
+ font-family: var(--digitv2-fontFamily-sans);
38
+ font-style: var(--digitv2-fontStyle-normal);
39
+ font-weight: var(--digitv2-fontWeight-regular);
40
+ line-height: var(--digitv2-lineHeight-lineheight2);
41
41
  }
42
42
 
43
43
  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
44
44
  /* Media query for tablets */
45
- font-size: theme("digitv2.fontSize.body-s.tablet");
46
- font-family: theme("digitv2.fontFamily.sans");
47
- font-style: theme("digitv2.fontStyle.normal");
48
- font-weight: theme("digitv2.fontWeight.regular");
49
- line-height: theme("digitv2.lineHeight.lineheight2");
45
+ font-size: var( --digitv2-fontSize-body-s-tablet);
46
+ font-family: var(--digitv2-fontFamily-sans);
47
+ font-style: var(--digitv2-fontStyle-normal);
48
+ font-weight: var(--digitv2-fontWeight-regular);
49
+ line-height: var(--digitv2-lineHeight-lineheight2);
50
50
  }
51
51
 
52
52
  @media (min-aspect-ratio: 3/4) {
53
53
  /* Media query for desktop */
54
- font-size: theme("digitv2.fontSize.body-s.desktop");
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");
54
+ font-size: var( --digitv2-fontSize-body-s-desktop);
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
  @apply absolute z-10 h-full outline-none;
61
- width:calc(100% - (theme("digitv2.spacers.spacer7")));
61
+ width:calc(100% - (var(--digitv2-spacers-spacer7)));
62
62
  background-color: transparent;
63
- padding-top:theme("digitv2.spacers.spacer2");
64
- padding-bottom: theme("digitv2.spacers.spacer2");
65
- padding-left:theme("digitv2.spacers.spacer3");
66
- color: theme("digitv2.lightTheme.text-primary");
63
+ padding-top:var(--digitv2-spacers-spacer2);
64
+ padding-bottom: var(--digitv2-spacers-spacer2);
65
+ padding-left:var(--digitv2-spacers-spacer3);
66
+ color: var(--digitv2-lightTheme-text-primary);
67
67
  }
68
68
  p {
69
69
  @extend .light-text-color-primary;
@@ -79,42 +79,42 @@
79
79
  }
80
80
  .digit-dropdown-select-active {
81
81
  @apply relative block w-full h-10 bg-white;
82
- border: 0.063rem solid theme("digitv2.lightTheme.primary-1");
82
+ border: 0.063rem solid var(--digitv2-lightTheme-primary-1);
83
83
  input[type="text"] {
84
84
  @include typography-body-s;
85
85
  @media (max-aspect-ratio: 9/16) {
86
86
  /* Media query for mobile */
87
- font-size: theme("digitv2.fontSize.body-s.mobile");
88
- font-family: theme("digitv2.fontFamily.sans");
89
- font-style: theme("digitv2.fontStyle.normal");
90
- font-weight: theme("digitv2.fontWeight.regular");
91
- line-height: theme("digitv2.lineHeight.lineheight2");
87
+ font-size: var( --digitv2-fontSize-body-s-mobile);
88
+ font-family: var(--digitv2-fontFamily-sans);
89
+ font-style: var(--digitv2-fontStyle-normal);
90
+ font-weight: var(--digitv2-fontWeight-regular);
91
+ line-height: var(--digitv2-lineHeight-lineheight2);
92
92
  }
93
93
 
94
94
  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
95
95
  /* Media query for tablets */
96
- font-size: theme("digitv2.fontSize.body-s.tablet");
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");
96
+ font-size: var( --digitv2-fontSize-body-s-tablet);
97
+ font-family: var(--digitv2-fontFamily-sans);
98
+ font-style: var(--digitv2-fontStyle-normal);
99
+ font-weight: var(--digitv2-fontWeight-regular);
100
+ line-height: var(--digitv2-lineHeight-lineheight2);
101
101
  }
102
102
 
103
103
  @media (min-aspect-ratio: 3/4) {
104
104
  /* Media query for desktop */
105
- font-size: theme("digitv2.fontSize.body-s.desktop");
106
- font-family: theme("digitv2.fontFamily.sans");
107
- font-style: theme("digitv2.fontStyle.normal");
108
- font-weight: theme("digitv2.fontWeight.regular");
109
- line-height: theme("digitv2.lineHeight.lineheight2");
105
+ font-size: var( --digitv2-fontSize-body-s-desktop);
106
+ font-family: var(--digitv2-fontFamily-sans);
107
+ font-style: var(--digitv2-fontStyle-normal);
108
+ font-weight: var(--digitv2-fontWeight-regular);
109
+ line-height: var(--digitv2-lineHeight-lineheight2);
110
110
  }
111
111
  @apply absolute z-10 h-full outline-none;
112
- width:calc(100% - (theme("digitv2.spacers.spacer7")));
112
+ width:calc(100% - (var(--digitv2-spacers-spacer7)));
113
113
  background-color: transparent;
114
- padding-top: theme("digitv2.spacers.spacer2");
115
- padding-bottom: theme("digitv2.spacers.spacer2");
116
- padding-left: theme("digitv2.spacers.spacer3");
117
- color: theme("digitv2.lightTheme.text-primary");
114
+ padding-top: var(--digitv2-spacers-spacer2);
115
+ padding-bottom: var(--digitv2-spacers-spacer2);
116
+ padding-left: var(--digitv2-spacers-spacer3);
117
+ color: var(--digitv2-lightTheme-text-primary);
118
118
  }
119
119
  p {
120
120
  @extend .light-text-color-primary;
@@ -132,7 +132,7 @@
132
132
  }
133
133
  .digit-dropdown-options-card {
134
134
  width: 100% !important;
135
- box-shadow: theme("digitv2.spacers.spacer0") 0.063rem 0.275rem theme("digitv2.spacers.spacer0") #00000026;
135
+ box-shadow: var(--digitv2-spacers-spacer0) 0.063rem 0.275rem var(--digitv2-spacers-spacer0) #00000026;
136
136
  max-height: 20vmax;
137
137
  @apply absolute z-20 bg-white max-w-full overflow-y-auto overflow-x-hidden;
138
138
  p {
@@ -154,58 +154,68 @@
154
154
  }
155
155
  }
156
156
  .digit-dropdown-options-card::-webkit-scrollbar {
157
- width: theme("digitv2.spacers.spacer2");
158
- background-color: theme("digitv2.lightTheme.generic-background");
157
+ width: var(--digitv2-spacers-spacer2);
158
+ background-color: var(--digitv2-lightTheme-generic-background);
159
159
  }
160
160
  .digit-dropdown-options-card::-webkit-scrollbar-track {
161
- background-color: theme("digitv2.lightTheme.generic-background");
161
+ background-color: var(--digitv2-lightTheme-generic-background);
162
162
  border-radius: 0.563rem;
163
163
  }
164
164
  .digit-dropdown-options-card::-webkit-scrollbar-thumb {
165
- background-color: theme("digitv2.lightTheme.generic-divider");
165
+ background-color: var(--digitv2-lightTheme-generic-divider);
166
166
  border-radius: 0.563rem;
167
167
  }
168
168
  .digit-nested-category {
169
169
  @apply flex items-center flex-shrink-0;
170
- background: theme("digitv2.lightTheme.generic-background");
170
+ background: var(--digitv2-lightTheme-generic-background);
171
171
  height: 2.4375rem;
172
- padding: theme("digitv2.spacers.spacer4") 0.625rem;
172
+ padding: var(--digitv2-spacers-spacer4) 0.625rem;
173
173
  gap: 0.625rem;
174
174
  }
175
175
  .digit-nested-category:not(:first-child) {
176
- margin-top: theme("digitv2.spacers.spacer4");
176
+ margin-top: var(--digitv2-spacers-spacer4);
177
177
  }
178
178
  .digit-category-name {
179
179
  @include typography-heading-s;
180
180
  @apply flex items-center overflow-hidden whitespace-nowrap;
181
- color: theme("digitv2.lightTheme.text-primary");
182
- gap: theme("digitv2.spacers.spacer1");
183
- font-family: theme("digitv2.fontFamily.sans");
184
- font-style: theme("digitv2.fontStyle.normal");
185
- font-weight: theme("digitv2.fontWeight.bold");
186
- line-height: theme("digitv2.lineHeight.lineheight1");
181
+ color: var(--digitv2-lightTheme-text-primary);
182
+ gap: var(--digitv2-spacers-spacer1);
183
+ font-family: var(--digitv2-fontFamily-sans);
184
+ font-style: var(--digitv2-fontStyle-normal);
185
+ font-weight: var(--digitv2-fontWeight-bold);
186
+ line-height: var(--digitv2-lineHeight-lineheight1);
187
187
 
188
188
  @media (max-aspect-ratio: 9/16) {
189
189
  /* Media query for mobile */
190
- font-size: theme("digitv2.fontSize.heading-s.mobile");
190
+ font-size: var(--digitv2-fontSize-heading-s-mobile);
191
191
  }
192
192
 
193
193
  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
194
194
  /* Media query for tablets */
195
- font-size: theme("digitv2.fontSize.heading-s.tablet");
195
+ font-size: var(--digitv2-fontSize-heading-s-tablet);
196
196
  }
197
197
 
198
198
  @media (min-aspect-ratio: 3/4) {
199
199
  /* Media query for desktop */
200
- font-size: theme("digitv2.fontSize.heading-s.desktop");
200
+ font-size: var(--digitv2-fontSize-heading-s-desktop);
201
201
  }
202
202
  }
203
203
  .digit-dropdown-item {
204
204
  @apply flex flex-row;
205
- padding: theme("digitv2.spacers.spacer3");
205
+ padding: var(--digitv2-spacers-spacer3);
206
206
  gap: 0.625rem;
207
207
  min-height: 2.438rem;
208
- color: theme("digitv2.lightTheme.text-primary") !important;
208
+ color: var(--digitv2-lightTheme-text-primary) !important;
209
+
210
+ &:first-child {
211
+ border-top-left-radius: var(--digitv2-borderRadius-radius2);
212
+ border-top-right-radius: var(--digitv2-borderRadius-radius2);
213
+ }
214
+
215
+ &:last-child {
216
+ border-bottom-left-radius: var(--digitv2-borderRadius-radius2);
217
+ border-bottom-right-radius: var(--digitv2-borderRadius-radius2);
218
+ }
209
219
  .profile-icon-container {
210
220
  flex-shrink: 0;
211
221
  border-radius: 4.5rem;
@@ -220,47 +230,47 @@
220
230
  .icon-option{
221
231
  @apply w-full items-center;
222
232
  display: flex !important;
223
- gap:theme("digitv2.spacers.spacer1");
233
+ gap:var(--digitv2-spacers-spacer1);
224
234
  svg{
225
235
  flex-shrink: 0;
226
236
  }
227
237
  }
228
238
  .main-option {
229
239
  @include typography-body-s;
230
- font-family: theme("digitv2.fontFamily.sans");
231
- font-style: theme("digitv2.fontStyle.normal");
232
- font-weight: theme("digitv2.fontWeight.regular");
233
- line-height: theme("digitv2.lineHeight.lineheight2");
240
+ font-family: var(--digitv2-fontFamily-sans);
241
+ font-style: var(--digitv2-fontStyle-normal);
242
+ font-weight: var(--digitv2-fontWeight-regular);
243
+ line-height: var(--digitv2-lineHeight-lineheight2);
234
244
 
235
245
  @media (max-aspect-ratio: 9/16) {
236
246
  /* Media query for mobile */
237
- font-size: theme("digitv2.fontSize.body-s.mobile");
247
+ font-size: var( --digitv2-fontSize-body-s-mobile);
238
248
  }
239
249
 
240
250
  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
241
251
  /* Media query for tablets */
242
- font-size: theme("digitv2.fontSize.body-s.tablet");
252
+ font-size: var( --digitv2-fontSize-body-s-tablet);
243
253
  }
244
254
 
245
255
  @media (min-aspect-ratio: 3/4) {
246
256
  /* Media query for desktop */
247
- font-size: theme("digitv2.fontSize.body-s.desktop");
257
+ font-size: var( --digitv2-fontSize-body-s-desktop);
248
258
  }
249
259
  @apply whitespace-nowrap w-full max-w-full overflow-hidden;
250
260
  text-overflow: ellipsis;
251
261
  &.nestedtextdropdown,
252
262
  &.profilenestedtext {
253
263
  @include typography-body-l;
254
- color: theme("digitv2.lightTheme.text-secondary");
264
+ color: var(--digitv2-lightTheme-text-secondary);
255
265
  }
256
266
  }
257
267
  .option-description {
258
268
  @include typography-body-xs;
259
- color: theme("digitv2.lightTheme.text-secondary");
269
+ color: var(--digitv2-lightTheme-text-secondary);
260
270
  }
261
271
  }
262
272
  &:not(.nesteddropdown, .treedropdown):not(:active):nth-of-type(even) {
263
- background: theme("digitv2.lightTheme.paper-secondary");
273
+ background: var(--digitv2-lightTheme-paper-secondary);
264
274
  }
265
275
  &:not(.unsuccessfulresults).nesteddropdown {
266
276
  position: relative;
@@ -271,7 +281,7 @@
271
281
  bottom: 0;
272
282
  left: 0.625rem;
273
283
  right: 0.635rem;
274
- border-bottom: 0.063rem solid theme("digitv2.lightTheme.generic-divider");
284
+ border-bottom: 0.063rem solid var(--digitv2-lightTheme-generic-divider);
275
285
  }
276
286
  &:hover,
277
287
  &:active {
@@ -282,14 +292,14 @@
282
292
  }
283
293
  &:hover,
284
294
  &.keyChange{
285
- background: theme("digitv2.lightTheme.primary-bg") !important;
286
- border: 0.031rem solid theme("digitv2.lightTheme.primary-1");
295
+ background: var(--digitv2-lightTheme-primary-bg) !important;
296
+ border: 0.031rem solid var(--digitv2-lightTheme-primary-1);
287
297
  }
288
298
  &:active {
289
- background: theme("digitv2.lightTheme.primary-1") !important;
299
+ background: var(--digitv2-lightTheme-primary-1) !important;
290
300
  span,
291
301
  .option-description {
292
- color: theme("digitv2.lightTheme.paper-primary");
302
+ color: var(--digitv2-lightTheme-paper-primary);
293
303
  }
294
304
  .svg {
295
305
  width: 6.25rem;
@@ -297,34 +307,34 @@
297
307
  .option-des-container {
298
308
  .main-option {
299
309
  @include typography-heading-s;
300
- font-family: theme("digitv2.fontFamily.sans");
301
- font-style: theme("digitv2.fontStyle.normal");
302
- font-weight: theme("digitv2.fontWeight.bold");
303
- line-height: theme("digitv2.lineHeight.lineheight1");
310
+ font-family: var(--digitv2-fontFamily-sans);
311
+ font-style: var(--digitv2-fontStyle-normal);
312
+ font-weight: var(--digitv2-fontWeight-bold);
313
+ line-height: var(--digitv2-lineHeight-lineheight1);
304
314
 
305
315
  @media (max-aspect-ratio: 9/16) {
306
316
  /* Media query for mobile */
307
- font-size: theme("digitv2.fontSize.heading-s.mobile");
317
+ font-size: var(--digitv2-fontSize-heading-s-mobile);
308
318
  }
309
319
 
310
320
  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
311
321
  /* Media query for tablets */
312
- font-size: theme("digitv2.fontSize.heading-s.tablet");
322
+ font-size: var(--digitv2-fontSize-heading-s-tablet);
313
323
  }
314
324
 
315
325
  @media (min-aspect-ratio: 3/4) {
316
326
  /* Media query for desktop */
317
- font-size: theme("digitv2.fontSize.heading-s.desktop");
327
+ font-size: var(--digitv2-fontSize-heading-s-desktop);
318
328
  }
319
329
  }
320
330
  }
321
331
  }
322
332
  &.nestedtextdropdown {
323
333
  min-height: 4.75rem;
324
- padding: theme("digitv2.spacers.spacer2") theme("digitv2.spacers.spacer3") theme("digitv2.spacers.spacer2") theme("digitv2.spacers.spacer3");
325
- color: theme("digitv2.lightTheme.text-secondary") !important;
334
+ padding: var(--digitv2-spacers-spacer2) var(--digitv2-spacers-spacer3) var(--digitv2-spacers-spacer2) var(--digitv2-spacers-spacer3);
335
+ color: var(--digitv2-lightTheme-text-secondary) !important;
326
336
  &:hover {
327
- border: 0.063rem solid theme("digitv2.lightTheme.primary-1");
337
+ border: 0.063rem solid var(--digitv2-lightTheme-primary-1);
328
338
  }
329
339
  .option-des-container {
330
340
  padding-right: 0.125rem !important;
@@ -333,93 +343,93 @@
333
343
  .option-des-container {
334
344
  .main-option {
335
345
  @include typography-heading-s;
336
- font-family: theme("digitv2.fontFamily.sans");
337
- font-style: theme("digitv2.fontStyle.normal");
338
- font-weight: theme("digitv2.fontWeight.bold");
339
- line-height: theme("digitv2.lineHeight.lineheight1");
346
+ font-family: var(--digitv2-fontFamily-sans);
347
+ font-style: var(--digitv2-fontStyle-normal);
348
+ font-weight: var(--digitv2-fontWeight-bold);
349
+ line-height: var(--digitv2-lineHeight-lineheight1);
340
350
 
341
351
  @media (max-aspect-ratio: 9/16) {
342
352
  /* Media query for mobile */
343
- font-size: theme("digitv2.fontSize.heading-s.mobile");
353
+ font-size: var(--digitv2-fontSize-heading-s-mobile);
344
354
  }
345
355
 
346
356
  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
347
357
  /* Media query for tablets */
348
- font-size: theme("digitv2.fontSize.heading-s.tablet");
358
+ font-size: var(--digitv2-fontSize-heading-s-tablet);
349
359
  }
350
360
 
351
361
  @media (min-aspect-ratio: 3/4) {
352
362
  /* Media query for desktop */
353
- font-size: theme("digitv2.fontSize.heading-s.desktop");
363
+ font-size: var(--digitv2-fontSize-heading-s-desktop);
354
364
  }
355
- color: theme("digitv2.lightTheme.paper-primary");
365
+ color: var(--digitv2-lightTheme-paper-primary);
356
366
  }
357
367
  }
358
368
  }
359
369
  }
360
370
  &.profiledropdown {
361
- min-height: theme("digitv2.spacers.spacer12");
362
- padding: theme("digitv2.spacers.spacer2") theme("digitv2.spacers.spacer3");
371
+ min-height: var(--digitv2-spacers-spacer12);
372
+ padding: var(--digitv2-spacers-spacer2) var(--digitv2-spacers-spacer3);
363
373
  }
364
374
  &.profilenestedtext {
365
375
  min-height: 4.75rem;
366
- padding: theme("digitv2.spacers.spacer2") theme("digitv2.spacers.spacer4");
367
- gap: theme("digitv2.spacers.spacer4");
376
+ padding: var(--digitv2-spacers-spacer2) var(--digitv2-spacers-spacer4);
377
+ gap: var(--digitv2-spacers-spacer4);
368
378
  align-items: center;
369
- color: theme("digitv2.lightTheme.text-secondary") !important;
379
+ color: var(--digitv2-lightTheme-text-secondary) !important;
370
380
  &:active {
371
381
  .option-des-container {
372
382
  .main-option {
373
383
  @include typography-heading-s;
374
- font-family: theme("digitv2.fontFamily.sans");
375
- font-style: theme("digitv2.fontStyle.normal");
376
- font-weight: theme("digitv2.fontWeight.bold");
377
- line-height: theme("digitv2.lineHeight.lineheight1");
384
+ font-family: var(--digitv2-fontFamily-sans);
385
+ font-style: var(--digitv2-fontStyle-normal);
386
+ font-weight: var(--digitv2-fontWeight-bold);
387
+ line-height: var(--digitv2-lineHeight-lineheight1);
378
388
 
379
389
  @media (max-aspect-ratio: 9/16) {
380
390
  /* Media query for mobile */
381
- font-size: theme("digitv2.fontSize.heading-s.mobile");
391
+ font-size: var(--digitv2-fontSize-heading-s-mobile);
382
392
  }
383
393
 
384
394
  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
385
395
  /* Media query for tablets */
386
- font-size: theme("digitv2.fontSize.heading-s.tablet");
396
+ font-size: var(--digitv2-fontSize-heading-s-tablet);
387
397
  }
388
398
 
389
399
  @media (min-aspect-ratio: 3/4) {
390
400
  /* Media query for desktop */
391
- font-size: theme("digitv2.fontSize.heading-s.desktop");
401
+ font-size: var(--digitv2-fontSize-heading-s-desktop);
392
402
  }
393
- color: theme("digitv2.lightTheme.paper-primary");
403
+ color: var(--digitv2-lightTheme-paper-primary);
394
404
  }
395
405
  }
396
406
  }
397
407
  }
398
408
  &.unsuccessfulresults {
399
- background-color: theme("digitv2.lightTheme.paper-secondary");
409
+ background-color: var(--digitv2-lightTheme-paper-secondary);
400
410
  pointer-events: none;
401
411
  span {
402
412
  @include typography-body-s;
403
- font-family: theme("digitv2.fontFamily.sans");
404
- font-style: theme("digitv2.fontStyle.normal");
405
- font-weight: theme("digitv2.fontWeight.regular");
406
- line-height: theme("digitv2.lineHeight.lineheight2");
413
+ font-family: var(--digitv2-fontFamily-sans);
414
+ font-style: var(--digitv2-fontStyle-normal);
415
+ font-weight: var(--digitv2-fontWeight-regular);
416
+ line-height: var(--digitv2-lineHeight-lineheight2);
407
417
 
408
418
  @media (max-aspect-ratio: 9/16) {
409
419
  /* Media query for mobile */
410
- font-size: theme("digitv2.fontSize.body-s.mobile");
420
+ font-size: var( --digitv2-fontSize-body-s-mobile);
411
421
  }
412
422
 
413
423
  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
414
424
  /* Media query for tablets */
415
- font-size: theme("digitv2.fontSize.body-s.tablet");
425
+ font-size: var( --digitv2-fontSize-body-s-tablet);
416
426
  }
417
427
 
418
428
  @media (min-aspect-ratio: 3/4) {
419
429
  /* Media query for desktop */
420
- font-size: theme("digitv2.fontSize.body-s.desktop");
430
+ font-size: var( --digitv2-fontSize-body-s-desktop);
421
431
  }
422
- color: theme("digitv2.lightTheme.text-disabled");
432
+ color: var(--digitv2-lightTheme-text-disabled);
423
433
  }
424
434
  }
425
435
  }
@@ -427,32 +437,32 @@
427
437
  @include typography-body-s;
428
438
  @media (max-aspect-ratio: 9/16) {
429
439
  /* Media query for mobile */
430
- font-size: theme("digitv2.fontSize.body-s.mobile");
431
- font-family: theme("digitv2.fontFamily.sans");
432
- font-style: theme("digitv2.fontStyle.normal");
433
- font-weight: theme("digitv2.fontWeight.regular");
434
- line-height: theme("digitv2.lineHeight.lineheight2");
440
+ font-size: var( --digitv2-fontSize-body-s-mobile);
441
+ font-family: var(--digitv2-fontFamily-sans);
442
+ font-style: var(--digitv2-fontStyle-normal);
443
+ font-weight: var(--digitv2-fontWeight-regular);
444
+ line-height: var(--digitv2-lineHeight-lineheight2);
435
445
  }
436
446
 
437
447
  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
438
448
  /* Media query for tablets */
439
- font-size: theme("digitv2.fontSize.body-s.tablet");
440
- font-family: theme("digitv2.fontFamily.sans");
441
- font-style: theme("digitv2.fontStyle.normal");
442
- font-weight: theme("digitv2.fontWeight.regular");
443
- line-height: theme("digitv2.lineHeight.lineheight2");
449
+ font-size: var( --digitv2-fontSize-body-s-tablet);
450
+ font-family: var(--digitv2-fontFamily-sans);
451
+ font-style: var(--digitv2-fontStyle-normal);
452
+ font-weight: var(--digitv2-fontWeight-regular);
453
+ line-height: var(--digitv2-lineHeight-lineheight2);
444
454
  }
445
455
 
446
456
  @media (min-aspect-ratio: 3/4) {
447
457
  /* Media query for desktop */
448
- font-size: theme("digitv2.fontSize.body-s.desktop");
449
- font-family: theme("digitv2.fontFamily.sans");
450
- font-style: theme("digitv2.fontStyle.normal");
451
- font-weight: theme("digitv2.fontWeight.regular");
452
- line-height: theme("digitv2.lineHeight.lineheight2");
458
+ font-size: var( --digitv2-fontSize-body-s-desktop);
459
+ font-family: var(--digitv2-fontFamily-sans);
460
+ font-style: var(--digitv2-fontStyle-normal);
461
+ font-weight: var(--digitv2-fontWeight-regular);
462
+ line-height: var(--digitv2-lineHeight-lineheight2);
453
463
  }
454
464
  @apply overflow-hidden whitespace-nowrap;
455
- width:calc(100% - (theme("digitv2.spacers.spacer7")));
465
+ width:calc(100% - (var(--digitv2-spacers-spacer7)));
456
466
  text-overflow: ellipsis;
457
467
  &.treedropdown,
458
468
  &.notSearchable {
@@ -477,47 +487,47 @@
477
487
  .digit-dropdown-select {
478
488
  @extend .light-input-border;
479
489
  @apply relative block w-full h-10 bg-white;
480
- border: 0.063rem solid theme("digitv2.lightTheme.text-secondary");
490
+ border: 0.063rem solid var(--digitv2-lightTheme-text-secondary);
481
491
  input[type="text"] {
482
492
  @include typography-body-s;
483
493
  @media (max-aspect-ratio: 9/16) {
484
494
  /* Media query for mobile */
485
- font-size: theme("digitv2.fontSize.body-s.mobile");
486
- font-family: theme("digitv2.fontFamily.sans");
487
- font-style: theme("digitv2.fontStyle.normal");
488
- font-weight: theme("digitv2.fontWeight.regular");
489
- line-height: theme("digitv2.lineHeight.lineheight2");
495
+ font-size: var( --digitv2-fontSize-body-s-mobile);
496
+ font-family: var(--digitv2-fontFamily-sans);
497
+ font-style: var(--digitv2-fontStyle-normal);
498
+ font-weight: var(--digitv2-fontWeight-regular);
499
+ line-height: var(--digitv2-lineHeight-lineheight2);
490
500
  }
491
501
 
492
502
  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
493
503
  /* Media query for tablets */
494
- font-size: theme("digitv2.fontSize.body-s.tablet");
495
- font-family: theme("digitv2.fontFamily.sans");
496
- font-style: theme("digitv2.fontStyle.normal");
497
- font-weight: theme("digitv2.fontWeight.regular");
498
- line-height: theme("digitv2.lineHeight.lineheight2");
504
+ font-size: var( --digitv2-fontSize-body-s-tablet);
505
+ font-family: var(--digitv2-fontFamily-sans);
506
+ font-style: var(--digitv2-fontStyle-normal);
507
+ font-weight: var(--digitv2-fontWeight-regular);
508
+ line-height: var(--digitv2-lineHeight-lineheight2);
499
509
  }
500
510
 
501
511
  @media (min-aspect-ratio: 3/4) {
502
512
  /* Media query for desktop */
503
- font-size: theme("digitv2.fontSize.body-s.desktop");
504
- font-family: theme("digitv2.fontFamily.sans");
505
- font-style: theme("digitv2.fontStyle.normal");
506
- font-weight: theme("digitv2.fontWeight.regular");
507
- line-height: theme("digitv2.lineHeight.lineheight2");
513
+ font-size: var( --digitv2-fontSize-body-s-desktop);
514
+ font-family: var(--digitv2-fontFamily-sans);
515
+ font-style: var(--digitv2-fontStyle-normal);
516
+ font-weight: var(--digitv2-fontWeight-regular);
517
+ line-height: var(--digitv2-lineHeight-lineheight2);
508
518
  }
509
519
  @apply absolute z-10 h-full outline-none;
510
- width:calc(100% - (theme("digitv2.spacers.spacer7")));
520
+ width:calc(100% - (var(--digitv2-spacers-spacer7)));
511
521
  background-color: transparent;
512
- padding-top: theme("digitv2.spacers.spacer2");
513
- padding-bottom: theme("digitv2.spacers.spacer2");
514
- padding-left: theme("digitv2.spacers.spacer3");
515
- color: theme("digitv2.lightTheme.text-primary");
522
+ padding-top: var(--digitv2-spacers-spacer2);
523
+ padding-bottom: var(--digitv2-spacers-spacer2);
524
+ padding-left: var(--digitv2-spacers-spacer3);
525
+ color: var(--digitv2-lightTheme-text-primary);
516
526
  }
517
527
  &.disabled {
518
528
  pointer-events: none !important;
519
- border: 0.063rem solid theme("digitv2.lightTheme.generic-divider") !important;
520
- color: theme("digitv2.lightTheme.generic-divider") !important;
529
+ border: 0.063rem solid var(--digitv2-lightTheme-generic-divider) !important;
530
+ color: var(--digitv2-lightTheme-generic-divider) !important;
521
531
  }
522
532
  p {
523
533
  @extend .light-text-color-primary;
@@ -533,42 +543,42 @@
533
543
  }
534
544
  .digit-dropdown-select-active {
535
545
  @apply relative block w-full h-10;
536
- border: 0.063rem solid theme("digitv2.lightTheme.primary-1");
546
+ border: 0.063rem solid var(--digitv2-lightTheme-primary-1);
537
547
  input[type="text"] {
538
548
  @include typography-body-s;
539
549
  @media (max-aspect-ratio: 9/16) {
540
550
  /* Media query for mobile */
541
- font-size: theme("digitv2.fontSize.body-s.mobile");
542
- font-family: theme("digitv2.fontFamily.sans");
543
- font-style: theme("digitv2.fontStyle.normal");
544
- font-weight: theme("digitv2.fontWeight.regular");
545
- line-height: theme("digitv2.lineHeight.lineheight2");
551
+ font-size: var( --digitv2-fontSize-body-s-mobile);
552
+ font-family: var(--digitv2-fontFamily-sans);
553
+ font-style: var(--digitv2-fontStyle-normal);
554
+ font-weight: var(--digitv2-fontWeight-regular);
555
+ line-height: var(--digitv2-lineHeight-lineheight2);
546
556
  }
547
557
 
548
558
  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
549
559
  /* Media query for tablets */
550
- font-size: theme("digitv2.fontSize.body-s.tablet");
551
- font-family: theme("digitv2.fontFamily.sans");
552
- font-style: theme("digitv2.fontStyle.normal");
553
- font-weight: theme("digitv2.fontWeight.regular");
554
- line-height: theme("digitv2.lineHeight.lineheight2");
560
+ font-size: var( --digitv2-fontSize-body-s-tablet);
561
+ font-family: var(--digitv2-fontFamily-sans);
562
+ font-style: var(--digitv2-fontStyle-normal);
563
+ font-weight: var(--digitv2-fontWeight-regular);
564
+ line-height: var(--digitv2-lineHeight-lineheight2);
555
565
  }
556
566
 
557
567
  @media (min-aspect-ratio: 3/4) {
558
568
  /* Media query for desktop */
559
- font-size: theme("digitv2.fontSize.body-s.desktop");
560
- font-family: theme("digitv2.fontFamily.sans");
561
- font-style: theme("digitv2.fontStyle.normal");
562
- font-weight: theme("digitv2.fontWeight.regular");
563
- line-height: theme("digitv2.lineHeight.lineheight2");
569
+ font-size: var( --digitv2-fontSize-body-s-desktop);
570
+ font-family: var(--digitv2-fontFamily-sans);
571
+ font-style: var(--digitv2-fontStyle-normal);
572
+ font-weight: var(--digitv2-fontWeight-regular);
573
+ line-height: var(--digitv2-lineHeight-lineheight2);
564
574
  }
565
575
  @apply absolute z-10 h-full outline-none;
566
- width:calc(100% - (theme("digitv2.spacers.spacer7")));
576
+ width:calc(100% - (var(--digitv2-spacers-spacer7)));
567
577
  background-color: transparent;
568
- padding-top: theme("digitv2.spacers.spacer2");
569
- padding-bottom: theme("digitv2.spacers.spacer2");
570
- padding-left: theme("digitv2.spacers.spacer3");
571
- color: theme("digitv2.lightTheme.text-primary");
578
+ padding-top: var(--digitv2-spacers-spacer2);
579
+ padding-bottom: var(--digitv2-spacers-spacer2);
580
+ padding-left: var(--digitv2-spacers-spacer3);
581
+ color: var(--digitv2-lightTheme-text-primary);
572
582
  }
573
583
  p {
574
584
  @extend .light-text-color-primary;
@@ -593,7 +603,7 @@
593
603
  }
594
604
  .digit-dropdown-options-card {
595
605
  width: 100% !important;
596
- box-shadow: theme("digitv2.spacers.spacer0") 0.063rem 0.275rem theme("digitv2.spacers.spacer0") #00000026;
606
+ box-shadow: var(--digitv2-spacers-spacer0) 0.063rem 0.275rem var(--digitv2-spacers-spacer0) #00000026;
597
607
  @apply absolute z-20 bg-white overflow-y-auto overflow-x-hidden;
598
608
  max-height: 20vmax;
599
609
  p {