@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/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,58 @@
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
209
 
210
210
  &:first-child {
211
211
  border-top-left-radius: var(--digitv2-borderRadius-radius2);
@@ -230,47 +230,47 @@
230
230
  .icon-option{
231
231
  @apply w-full items-center;
232
232
  display: flex !important;
233
- gap:theme("digitv2.spacers.spacer1");
233
+ gap:var(--digitv2-spacers-spacer1);
234
234
  svg{
235
235
  flex-shrink: 0;
236
236
  }
237
237
  }
238
238
  .main-option {
239
239
  @include typography-body-s;
240
- font-family: theme("digitv2.fontFamily.sans");
241
- font-style: theme("digitv2.fontStyle.normal");
242
- font-weight: theme("digitv2.fontWeight.regular");
243
- 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);
244
244
 
245
245
  @media (max-aspect-ratio: 9/16) {
246
246
  /* Media query for mobile */
247
- font-size: theme("digitv2.fontSize.body-s.mobile");
247
+ font-size: var( --digitv2-fontSize-body-s-mobile);
248
248
  }
249
249
 
250
250
  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
251
251
  /* Media query for tablets */
252
- font-size: theme("digitv2.fontSize.body-s.tablet");
252
+ font-size: var( --digitv2-fontSize-body-s-tablet);
253
253
  }
254
254
 
255
255
  @media (min-aspect-ratio: 3/4) {
256
256
  /* Media query for desktop */
257
- font-size: theme("digitv2.fontSize.body-s.desktop");
257
+ font-size: var( --digitv2-fontSize-body-s-desktop);
258
258
  }
259
259
  @apply whitespace-nowrap w-full max-w-full overflow-hidden;
260
260
  text-overflow: ellipsis;
261
261
  &.nestedtextdropdown,
262
262
  &.profilenestedtext {
263
263
  @include typography-body-l;
264
- color: theme("digitv2.lightTheme.text-secondary");
264
+ color: var(--digitv2-lightTheme-text-secondary);
265
265
  }
266
266
  }
267
267
  .option-description {
268
268
  @include typography-body-xs;
269
- color: theme("digitv2.lightTheme.text-secondary");
269
+ color: var(--digitv2-lightTheme-text-secondary);
270
270
  }
271
271
  }
272
272
  &:not(.nesteddropdown, .treedropdown):not(:active):nth-of-type(even) {
273
- background: theme("digitv2.lightTheme.paper-secondary");
273
+ background: var(--digitv2-lightTheme-paper-secondary);
274
274
  }
275
275
  &:not(.unsuccessfulresults).nesteddropdown {
276
276
  position: relative;
@@ -281,7 +281,7 @@
281
281
  bottom: 0;
282
282
  left: 0.625rem;
283
283
  right: 0.635rem;
284
- border-bottom: 0.063rem solid theme("digitv2.lightTheme.generic-divider");
284
+ border-bottom: 0.063rem solid var(--digitv2-lightTheme-generic-divider);
285
285
  }
286
286
  &:hover,
287
287
  &:active {
@@ -292,14 +292,14 @@
292
292
  }
293
293
  &:hover,
294
294
  &.keyChange{
295
- background: theme("digitv2.lightTheme.primary-bg") !important;
296
- 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);
297
297
  }
298
298
  &:active {
299
- background: theme("digitv2.lightTheme.primary-1") !important;
299
+ background: var(--digitv2-lightTheme-primary-1) !important;
300
300
  span,
301
301
  .option-description {
302
- color: theme("digitv2.lightTheme.paper-primary");
302
+ color: var(--digitv2-lightTheme-paper-primary);
303
303
  }
304
304
  .svg {
305
305
  width: 6.25rem;
@@ -307,34 +307,34 @@
307
307
  .option-des-container {
308
308
  .main-option {
309
309
  @include typography-heading-s;
310
- font-family: theme("digitv2.fontFamily.sans");
311
- font-style: theme("digitv2.fontStyle.normal");
312
- font-weight: theme("digitv2.fontWeight.bold");
313
- 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);
314
314
 
315
315
  @media (max-aspect-ratio: 9/16) {
316
316
  /* Media query for mobile */
317
- font-size: theme("digitv2.fontSize.heading-s.mobile");
317
+ font-size: var(--digitv2-fontSize-heading-s-mobile);
318
318
  }
319
319
 
320
320
  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
321
321
  /* Media query for tablets */
322
- font-size: theme("digitv2.fontSize.heading-s.tablet");
322
+ font-size: var(--digitv2-fontSize-heading-s-tablet);
323
323
  }
324
324
 
325
325
  @media (min-aspect-ratio: 3/4) {
326
326
  /* Media query for desktop */
327
- font-size: theme("digitv2.fontSize.heading-s.desktop");
327
+ font-size: var(--digitv2-fontSize-heading-s-desktop);
328
328
  }
329
329
  }
330
330
  }
331
331
  }
332
332
  &.nestedtextdropdown {
333
333
  min-height: 4.75rem;
334
- padding: theme("digitv2.spacers.spacer2") theme("digitv2.spacers.spacer3") theme("digitv2.spacers.spacer2") theme("digitv2.spacers.spacer3");
335
- 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;
336
336
  &:hover {
337
- border: 0.063rem solid theme("digitv2.lightTheme.primary-1");
337
+ border: 0.063rem solid var(--digitv2-lightTheme-primary-1);
338
338
  }
339
339
  .option-des-container {
340
340
  padding-right: 0.125rem !important;
@@ -343,93 +343,93 @@
343
343
  .option-des-container {
344
344
  .main-option {
345
345
  @include typography-heading-s;
346
- font-family: theme("digitv2.fontFamily.sans");
347
- font-style: theme("digitv2.fontStyle.normal");
348
- font-weight: theme("digitv2.fontWeight.bold");
349
- 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);
350
350
 
351
351
  @media (max-aspect-ratio: 9/16) {
352
352
  /* Media query for mobile */
353
- font-size: theme("digitv2.fontSize.heading-s.mobile");
353
+ font-size: var(--digitv2-fontSize-heading-s-mobile);
354
354
  }
355
355
 
356
356
  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
357
357
  /* Media query for tablets */
358
- font-size: theme("digitv2.fontSize.heading-s.tablet");
358
+ font-size: var(--digitv2-fontSize-heading-s-tablet);
359
359
  }
360
360
 
361
361
  @media (min-aspect-ratio: 3/4) {
362
362
  /* Media query for desktop */
363
- font-size: theme("digitv2.fontSize.heading-s.desktop");
363
+ font-size: var(--digitv2-fontSize-heading-s-desktop);
364
364
  }
365
- color: theme("digitv2.lightTheme.paper-primary");
365
+ color: var(--digitv2-lightTheme-paper-primary);
366
366
  }
367
367
  }
368
368
  }
369
369
  }
370
370
  &.profiledropdown {
371
- min-height: theme("digitv2.spacers.spacer12");
372
- 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);
373
373
  }
374
374
  &.profilenestedtext {
375
375
  min-height: 4.75rem;
376
- padding: theme("digitv2.spacers.spacer2") theme("digitv2.spacers.spacer4");
377
- gap: theme("digitv2.spacers.spacer4");
376
+ padding: var(--digitv2-spacers-spacer2) var(--digitv2-spacers-spacer4);
377
+ gap: var(--digitv2-spacers-spacer4);
378
378
  align-items: center;
379
- color: theme("digitv2.lightTheme.text-secondary") !important;
379
+ color: var(--digitv2-lightTheme-text-secondary) !important;
380
380
  &:active {
381
381
  .option-des-container {
382
382
  .main-option {
383
383
  @include typography-heading-s;
384
- font-family: theme("digitv2.fontFamily.sans");
385
- font-style: theme("digitv2.fontStyle.normal");
386
- font-weight: theme("digitv2.fontWeight.bold");
387
- 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);
388
388
 
389
389
  @media (max-aspect-ratio: 9/16) {
390
390
  /* Media query for mobile */
391
- font-size: theme("digitv2.fontSize.heading-s.mobile");
391
+ font-size: var(--digitv2-fontSize-heading-s-mobile);
392
392
  }
393
393
 
394
394
  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
395
395
  /* Media query for tablets */
396
- font-size: theme("digitv2.fontSize.heading-s.tablet");
396
+ font-size: var(--digitv2-fontSize-heading-s-tablet);
397
397
  }
398
398
 
399
399
  @media (min-aspect-ratio: 3/4) {
400
400
  /* Media query for desktop */
401
- font-size: theme("digitv2.fontSize.heading-s.desktop");
401
+ font-size: var(--digitv2-fontSize-heading-s-desktop);
402
402
  }
403
- color: theme("digitv2.lightTheme.paper-primary");
403
+ color: var(--digitv2-lightTheme-paper-primary);
404
404
  }
405
405
  }
406
406
  }
407
407
  }
408
408
  &.unsuccessfulresults {
409
- background-color: theme("digitv2.lightTheme.paper-secondary");
409
+ background-color: var(--digitv2-lightTheme-paper-secondary);
410
410
  pointer-events: none;
411
411
  span {
412
412
  @include typography-body-s;
413
- font-family: theme("digitv2.fontFamily.sans");
414
- font-style: theme("digitv2.fontStyle.normal");
415
- font-weight: theme("digitv2.fontWeight.regular");
416
- 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);
417
417
 
418
418
  @media (max-aspect-ratio: 9/16) {
419
419
  /* Media query for mobile */
420
- font-size: theme("digitv2.fontSize.body-s.mobile");
420
+ font-size: var( --digitv2-fontSize-body-s-mobile);
421
421
  }
422
422
 
423
423
  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
424
424
  /* Media query for tablets */
425
- font-size: theme("digitv2.fontSize.body-s.tablet");
425
+ font-size: var( --digitv2-fontSize-body-s-tablet);
426
426
  }
427
427
 
428
428
  @media (min-aspect-ratio: 3/4) {
429
429
  /* Media query for desktop */
430
- font-size: theme("digitv2.fontSize.body-s.desktop");
430
+ font-size: var( --digitv2-fontSize-body-s-desktop);
431
431
  }
432
- color: theme("digitv2.lightTheme.text-disabled");
432
+ color: var(--digitv2-lightTheme-text-disabled);
433
433
  }
434
434
  }
435
435
  }
@@ -437,32 +437,32 @@
437
437
  @include typography-body-s;
438
438
  @media (max-aspect-ratio: 9/16) {
439
439
  /* Media query for mobile */
440
- font-size: theme("digitv2.fontSize.body-s.mobile");
441
- font-family: theme("digitv2.fontFamily.sans");
442
- font-style: theme("digitv2.fontStyle.normal");
443
- font-weight: theme("digitv2.fontWeight.regular");
444
- 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);
445
445
  }
446
446
 
447
447
  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
448
448
  /* Media query for tablets */
449
- font-size: theme("digitv2.fontSize.body-s.tablet");
450
- font-family: theme("digitv2.fontFamily.sans");
451
- font-style: theme("digitv2.fontStyle.normal");
452
- font-weight: theme("digitv2.fontWeight.regular");
453
- 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);
454
454
  }
455
455
 
456
456
  @media (min-aspect-ratio: 3/4) {
457
457
  /* Media query for desktop */
458
- font-size: theme("digitv2.fontSize.body-s.desktop");
459
- font-family: theme("digitv2.fontFamily.sans");
460
- font-style: theme("digitv2.fontStyle.normal");
461
- font-weight: theme("digitv2.fontWeight.regular");
462
- 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);
463
463
  }
464
464
  @apply overflow-hidden whitespace-nowrap;
465
- width:calc(100% - (theme("digitv2.spacers.spacer7")));
465
+ width:calc(100% - (var(--digitv2-spacers-spacer7)));
466
466
  text-overflow: ellipsis;
467
467
  &.treedropdown,
468
468
  &.notSearchable {
@@ -487,47 +487,47 @@
487
487
  .digit-dropdown-select {
488
488
  @extend .light-input-border;
489
489
  @apply relative block w-full h-10 bg-white;
490
- border: 0.063rem solid theme("digitv2.lightTheme.text-secondary");
490
+ border: 0.063rem solid var(--digitv2-lightTheme-text-secondary);
491
491
  input[type="text"] {
492
492
  @include typography-body-s;
493
493
  @media (max-aspect-ratio: 9/16) {
494
494
  /* Media query for mobile */
495
- font-size: theme("digitv2.fontSize.body-s.mobile");
496
- font-family: theme("digitv2.fontFamily.sans");
497
- font-style: theme("digitv2.fontStyle.normal");
498
- font-weight: theme("digitv2.fontWeight.regular");
499
- 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);
500
500
  }
501
501
 
502
502
  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
503
503
  /* Media query for tablets */
504
- font-size: theme("digitv2.fontSize.body-s.tablet");
505
- font-family: theme("digitv2.fontFamily.sans");
506
- font-style: theme("digitv2.fontStyle.normal");
507
- font-weight: theme("digitv2.fontWeight.regular");
508
- 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);
509
509
  }
510
510
 
511
511
  @media (min-aspect-ratio: 3/4) {
512
512
  /* Media query for desktop */
513
- font-size: theme("digitv2.fontSize.body-s.desktop");
514
- font-family: theme("digitv2.fontFamily.sans");
515
- font-style: theme("digitv2.fontStyle.normal");
516
- font-weight: theme("digitv2.fontWeight.regular");
517
- 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);
518
518
  }
519
519
  @apply absolute z-10 h-full outline-none;
520
- width:calc(100% - (theme("digitv2.spacers.spacer7")));
520
+ width:calc(100% - (var(--digitv2-spacers-spacer7)));
521
521
  background-color: transparent;
522
- padding-top: theme("digitv2.spacers.spacer2");
523
- padding-bottom: theme("digitv2.spacers.spacer2");
524
- padding-left: theme("digitv2.spacers.spacer3");
525
- 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);
526
526
  }
527
527
  &.disabled {
528
528
  pointer-events: none !important;
529
- border: 0.063rem solid theme("digitv2.lightTheme.generic-divider") !important;
530
- 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;
531
531
  }
532
532
  p {
533
533
  @extend .light-text-color-primary;
@@ -543,42 +543,42 @@
543
543
  }
544
544
  .digit-dropdown-select-active {
545
545
  @apply relative block w-full h-10;
546
- border: 0.063rem solid theme("digitv2.lightTheme.primary-1");
546
+ border: 0.063rem solid var(--digitv2-lightTheme-primary-1);
547
547
  input[type="text"] {
548
548
  @include typography-body-s;
549
549
  @media (max-aspect-ratio: 9/16) {
550
550
  /* Media query for mobile */
551
- font-size: theme("digitv2.fontSize.body-s.mobile");
552
- font-family: theme("digitv2.fontFamily.sans");
553
- font-style: theme("digitv2.fontStyle.normal");
554
- font-weight: theme("digitv2.fontWeight.regular");
555
- 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);
556
556
  }
557
557
 
558
558
  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
559
559
  /* Media query for tablets */
560
- font-size: theme("digitv2.fontSize.body-s.tablet");
561
- font-family: theme("digitv2.fontFamily.sans");
562
- font-style: theme("digitv2.fontStyle.normal");
563
- font-weight: theme("digitv2.fontWeight.regular");
564
- 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);
565
565
  }
566
566
 
567
567
  @media (min-aspect-ratio: 3/4) {
568
568
  /* Media query for desktop */
569
- font-size: theme("digitv2.fontSize.body-s.desktop");
570
- font-family: theme("digitv2.fontFamily.sans");
571
- font-style: theme("digitv2.fontStyle.normal");
572
- font-weight: theme("digitv2.fontWeight.regular");
573
- 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);
574
574
  }
575
575
  @apply absolute z-10 h-full outline-none;
576
- width:calc(100% - (theme("digitv2.spacers.spacer7")));
576
+ width:calc(100% - (var(--digitv2-spacers-spacer7)));
577
577
  background-color: transparent;
578
- padding-top: theme("digitv2.spacers.spacer2");
579
- padding-bottom: theme("digitv2.spacers.spacer2");
580
- padding-left: theme("digitv2.spacers.spacer3");
581
- 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);
582
582
  }
583
583
  p {
584
584
  @extend .light-text-color-primary;
@@ -603,7 +603,7 @@
603
603
  }
604
604
  .digit-dropdown-options-card {
605
605
  width: 100% !important;
606
- 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;
607
607
  @apply absolute z-20 bg-white overflow-y-auto overflow-x-hidden;
608
608
  max-height: 20vmax;
609
609
  p {