@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/multiSelectDropdownV2.scss CHANGED
@@ -25,40 +25,40 @@
25
25
  .digit-multiselectdropdown-master,
26
26
  .digit-multiselectdropdown-master-active {
27
27
  @apply relative h-10 w-full bg-white;
28
- border: 0.063rem solid theme("digitv2.lightTheme.generic-inputborder");
28
+ border: 0.063rem solid var(--digitv2-lightTheme-generic-inputborder);
29
29
 
30
30
  input[type="text"] {
31
31
  @include typography-body-s;
32
32
 
33
33
  @media (max-aspect-ratio: 9/16) {
34
34
  /* Media query for mobile */
35
- font-size: theme("digitv2.fontSize.body-s.mobile");
36
- font-family: theme("digitv2.fontFamily.sans");
37
- font-style: theme("digitv2.fontStyle.normal");
38
- font-weight: theme("digitv2.fontWeight.regular");
39
- line-height: theme("digitv2.lineHeight.lineheight2");
35
+ font-size: var( --digitv2-fontSize-body-s-mobile);
36
+ font-family: var(--digitv2-fontFamily-sans);
37
+ font-style: var(--digitv2-fontStyle-normal);
38
+ font-weight: var(--digitv2-fontWeight-regular);
39
+ line-height: var(--digitv2-lineHeight-lineheight2);
40
40
  }
41
41
 
42
42
  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
43
43
  /* Media query for tablets */
44
- font-size: theme("digitv2.fontSize.body-s.tablet");
45
- font-family: theme("digitv2.fontFamily.sans");
46
- font-style: theme("digitv2.fontStyle.normal");
47
- font-weight: theme("digitv2.fontWeight.regular");
48
- line-height: theme("digitv2.lineHeight.lineheight2");
44
+ font-size: var( --digitv2-fontSize-body-s-tablet);
45
+ font-family: var(--digitv2-fontFamily-sans);
46
+ font-style: var(--digitv2-fontStyle-normal);
47
+ font-weight: var(--digitv2-fontWeight-regular);
48
+ line-height: var(--digitv2-lineHeight-lineheight2);
49
49
  }
50
50
 
51
51
  @media (min-aspect-ratio: 3/4) {
52
52
  /* Media query for desktop */
53
- font-size: theme("digitv2.fontSize.body-s.desktop");
54
- font-family: theme("digitv2.fontFamily.sans");
55
- font-style: theme("digitv2.fontStyle.normal");
56
- font-weight: theme("digitv2.fontWeight.regular");
57
- line-height: theme("digitv2.lineHeight.lineheight2");
53
+ font-size: var( --digitv2-fontSize-body-s-desktop);
54
+ font-family: var(--digitv2-fontFamily-sans);
55
+ font-style: var(--digitv2-fontStyle-normal);
56
+ font-weight: var(--digitv2-fontWeight-regular);
57
+ line-height: var(--digitv2-lineHeight-lineheight2);
58
58
  }
59
59
 
60
60
  @apply absolute top-0 left-0 p-sm min-h-full min-w-full opacity-0;
61
- letter-spacing: theme("digitv2.spacers.spacer0");
61
+ letter-spacing: var(--digitv2-spacers-spacer0);
62
62
  padding-left: 1%;
63
63
 
64
64
  &:focus {
@@ -94,45 +94,45 @@
94
94
  .digit-multiselectdropdown-master {
95
95
  &.disabled {
96
96
  pointer-events: none !important;
97
- border: 0.063rem solid theme("digitv2.lightTheme.generic-divider") !important;
98
- color: theme("digitv2.lightTheme.generic-divider") !important;
97
+ border: 0.063rem solid var(--digitv2-lightTheme-generic-divider) !important;
98
+ color: var(--digitv2-lightTheme-generic-divider) !important;
99
99
  }
100
100
  }
101
101
 
102
102
  .digit-multiselectdropdown-master-active {
103
- border: 0.063rem solid theme("digitv2.lightTheme.primary-1");
103
+ border: 0.063rem solid var(--digitv2-lightTheme-primary-1);
104
104
  }
105
105
 
106
106
  .digit-multiselectdropdown-server {
107
- top: theme("digitv2.spacers.spacer10");
107
+ top: var(--digitv2-spacers-spacer10);
108
108
  @apply absolute z-20 bg-white overflow-x-hidden overflow-y-auto;
109
109
  max-height: 20vmax;
110
- box-shadow: theme("digitv2.spacers.spacer0") 0.063rem 0.275rem theme("digitv2.spacers.spacer0") #00000026;
110
+ box-shadow: var(--digitv2-spacers-spacer0) 0.063rem 0.275rem var(--digitv2-spacers-spacer0) #00000026;
111
111
  width: 100% !important;
112
112
  }
113
113
 
114
114
  .digit-multiselectdropdown-server::-webkit-scrollbar {
115
- width: theme("digitv2.spacers.spacer2");
116
- background-color: theme("digitv2.lightTheme.generic-background");
115
+ width: var(--digitv2-spacers-spacer2);
116
+ background-color: var(--digitv2-lightTheme-generic-background);
117
117
  }
118
118
 
119
119
  .digit-multiselectdropdown-server::-webkit-scrollbar-track {
120
- background-color: theme("digitv2.lightTheme.generic-background");
120
+ background-color: var(--digitv2-lightTheme-generic-background);
121
121
  border-radius: 0.563rem;
122
122
  }
123
123
 
124
124
  .digit-multiselectdropdown-server::-webkit-scrollbar-thumb {
125
- background-color: theme("digitv2.lightTheme.generic-divider");
125
+ background-color: var(--digitv2-lightTheme-generic-divider);
126
126
  border-radius: 0.563rem;
127
127
  }
128
128
 
129
129
  .digit-nested-category {
130
130
  @apply flex items-center flex-shrink-0;
131
- background: theme("digitv2.lightTheme.generic-background");
131
+ background: var(--digitv2-lightTheme-generic-background);
132
132
  height: 2.4375rem;
133
- padding: theme("digitv2.spacers.spacer4") 0.625rem;
133
+ padding: var(--digitv2-spacers-spacer4) 0.625rem;
134
134
  gap: 0.625rem;
135
- margin-top: theme("digitv2.spacers.spacer4");
135
+ margin-top: var(--digitv2-spacers-spacer4);
136
136
 
137
137
  &.selectAll {
138
138
  justify-content: space-between;
@@ -140,32 +140,32 @@
140
140
  }
141
141
 
142
142
  .digit-nested-category:nth-child(-n+2) {
143
- margin-top: theme("digitv2.spacers.spacer0");
143
+ margin-top: var(--digitv2-spacers-spacer0);
144
144
  }
145
145
 
146
146
  .digit-category-name {
147
147
  @include typography-heading-s;
148
- font-family: theme("digitv2.fontFamily.sans");
149
- font-style: theme("digitv2.fontStyle.normal");
150
- font-weight: theme("digitv2.fontWeight.bold");
151
- line-height: theme("digitv2.lineHeight.lineheight1");
148
+ font-family: var(--digitv2-fontFamily-sans);
149
+ font-style: var(--digitv2-fontStyle-normal);
150
+ font-weight: var(--digitv2-fontWeight-bold);
151
+ line-height: var(--digitv2-lineHeight-lineheight1);
152
152
 
153
153
  @media (max-aspect-ratio: 9/16) {
154
154
  /* Media query for mobile */
155
- font-size: theme("digitv2.fontSize.heading-s.mobile");
155
+ font-size: var(--digitv2-fontSize-heading-s-mobile);
156
156
  }
157
157
 
158
158
  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
159
159
  /* Media query for tablets */
160
- font-size: theme("digitv2.fontSize.heading-s.tablet");
160
+ font-size: var(--digitv2-fontSize-heading-s-tablet);
161
161
  }
162
162
 
163
163
  @media (min-aspect-ratio: 3/4) {
164
164
  /* Media query for desktop */
165
- font-size: theme("digitv2.fontSize.heading-s.desktop");
165
+ font-size: var(--digitv2-fontSize-heading-s-desktop);
166
166
  }
167
167
 
168
- color: theme("digitv2.lightTheme.text-primary");
168
+ color: var(--digitv2-lightTheme-text-primary);
169
169
  }
170
170
 
171
171
  .digit-category-selectAll {
@@ -176,39 +176,39 @@
176
176
 
177
177
  .category-selectAll-label {
178
178
  @include typography-body-s;
179
- font-family: theme("digitv2.fontFamily.sans");
180
- font-style: theme("digitv2.fontStyle.normal");
181
- font-weight: theme("digitv2.fontWeight.regular");
182
- line-height: theme("digitv2.lineHeight.lineheight2");
179
+ font-family: var(--digitv2-fontFamily-sans);
180
+ font-style: var(--digitv2-fontStyle-normal);
181
+ font-weight: var(--digitv2-fontWeight-regular);
182
+ line-height: var(--digitv2-lineHeight-lineheight2);
183
183
 
184
184
  @media (max-aspect-ratio: 9/16) {
185
185
  /* Media query for mobile */
186
- font-size: theme("digitv2.fontSize.body-s.mobile");
186
+ font-size: var( --digitv2-fontSize-body-s-mobile);
187
187
  }
188
188
 
189
189
  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
190
190
  /* Media query for tablets */
191
- font-size: theme("digitv2.fontSize.body-s.tablet");
191
+ font-size: var( --digitv2-fontSize-body-s-tablet);
192
192
  }
193
193
 
194
194
  @media (min-aspect-ratio: 3/4) {
195
195
  /* Media query for desktop */
196
- font-size: theme("digitv2.fontSize.body-s.desktop");
196
+ font-size: var( --digitv2-fontSize-body-s-desktop);
197
197
  }
198
198
 
199
199
  text-align: left;
200
- color: theme("digitv2.lightTheme.primary-1");
200
+ color: var(--digitv2-lightTheme-primary-1);
201
201
  }
202
202
 
203
203
  input {
204
204
  @apply absolute top-0 left-0 w-full h-full opacity-0 cursor-pointer;
205
- margin: theme("digitv2.spacers.spacer0");
205
+ margin: var(--digitv2-spacers-spacer0);
206
206
  }
207
207
 
208
208
  .digit-multiselectdropodwn-custom-checkbox-selectAll {
209
- height: theme("digitv2.spacers.spacer5");
210
- width: theme("digitv2.spacers.spacer5");
211
- border: 0.063rem solid theme("digitv2.lightTheme.text-secondary");
209
+ height: var(--digitv2-spacers-spacer5);
210
+ width: var(--digitv2-spacers-spacer5);
211
+ border: 0.063rem solid var(--digitv2-lightTheme-text-secondary);
212
212
 
213
213
  svg {
214
214
  @apply opacity-0 z-10;
@@ -217,15 +217,15 @@
217
217
 
218
218
  input:active~.digit-multiselectdropodwn-custom-checkbox-selectAll,
219
219
  input:checked~.digit-multiselectdropodwn-custom-checkbox-selectAll {
220
- border: 0.125rem solid theme("digitv2.lightTheme.primary-1");
221
- background-color: theme("digitv2.lightTheme.paper-secondary");
220
+ border: 0.125rem solid var(--digitv2-lightTheme-primary-1);
221
+ background-color: var(--digitv2-lightTheme-paper-secondary);
222
222
  }
223
223
 
224
224
  input:active~.digit-multiselectdropodwn-custom-checkbox-selectAll svg,
225
225
  input:checked~.digit-multiselectdropodwn-custom-checkbox-selectAll svg {
226
226
  @apply opacity-100;
227
- width: theme("digitv2.spacers.spacer4");
228
- height: theme("digitv2.spacers.spacer4");
227
+ width: var(--digitv2-spacers-spacer4);
228
+ height: var(--digitv2-spacers-spacer4);
229
229
  }
230
230
  }
231
231
 
@@ -251,12 +251,12 @@
251
251
 
252
252
  .option-des-container {
253
253
  @apply w-full max-w-full overflow-hidden box-border;
254
- margin: 0.594rem theme("digitv2.spacers.spacer0") 0.594rem theme("digitv2.spacers.spacer0");
254
+ margin: 0.594rem var(--digitv2-spacers-spacer0) 0.594rem var(--digitv2-spacers-spacer0);
255
255
 
256
256
  .multiselectdropdown-icon-option {
257
257
  @apply w-full items-center;
258
258
  display: flex !important;
259
- gap: theme("digitv2.spacers.spacer1");
259
+ gap: var(--digitv2-spacers-spacer1);
260
260
 
261
261
  svg {
262
262
  flex-shrink: 0;
@@ -273,7 +273,7 @@
273
273
  bottom: 0;
274
274
  left: 0.625rem;
275
275
  right: 0.625rem;
276
- border-bottom: 0.063rem solid theme("digitv2.lightTheme.generic-divider");
276
+ border-bottom: 0.063rem solid var(--digitv2-lightTheme-generic-divider);
277
277
  }
278
278
 
279
279
  &:not(.selectAll):hover,
@@ -285,49 +285,49 @@
285
285
  }
286
286
 
287
287
  &:not(.nestedmultiselect, .keyChange, .checked):not(:active):not(:hover):nth-of-type(even) {
288
- background: theme("digitv2.lightTheme.paper-secondary");
288
+ background: var(--digitv2-lightTheme-paper-secondary);
289
289
  }
290
290
 
291
291
  &:hover,
292
292
  &.keyChange {
293
- background: theme("digitv2.lightTheme.primary-bg");
294
- border: 0.031rem solid theme("digitv2.lightTheme.primary-1");
293
+ background: var(--digitv2-lightTheme-primary-bg);
294
+ border: 0.031rem solid var(--digitv2-lightTheme-primary-1);
295
295
  }
296
296
 
297
297
  &:active,
298
298
  &:active:hover {
299
- background: theme("digitv2.lightTheme.primary-1");
300
- border: 0.031rem solid theme("digitv2.lightTheme.primary-1");
299
+ background: var(--digitv2-lightTheme-primary-1);
300
+ border: 0.031rem solid var(--digitv2-lightTheme-primary-1);
301
301
 
302
302
  p {
303
303
  @include typography-heading-s;
304
- font-family: theme("digitv2.fontFamily.sans");
305
- font-style: theme("digitv2.fontStyle.normal");
306
- font-weight: theme("digitv2.fontWeight.bold");
307
- line-height: theme("digitv2.lineHeight.lineheight1");
304
+ font-family: var(--digitv2-fontFamily-sans);
305
+ font-style: var(--digitv2-fontStyle-normal);
306
+ font-weight: var(--digitv2-fontWeight-bold);
307
+ line-height: var(--digitv2-lineHeight-lineheight1);
308
308
 
309
309
  @media (max-aspect-ratio: 9/16) {
310
310
  /* Media query for mobile */
311
- font-size: theme("digitv2.fontSize.heading-s.mobile");
311
+ font-size: var(--digitv2-fontSize-heading-s-mobile);
312
312
  }
313
313
 
314
314
  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
315
315
  /* Media query for tablets */
316
- font-size: theme("digitv2.fontSize.heading-s.tablet");
316
+ font-size: var(--digitv2-fontSize-heading-s-tablet);
317
317
  }
318
318
 
319
319
  @media (min-aspect-ratio: 3/4) {
320
320
  /* Media query for desktop */
321
- font-size: theme("digitv2.fontSize.heading-s.desktop");
321
+ font-size: var(--digitv2-fontSize-heading-s-desktop);
322
322
  }
323
323
 
324
- color: theme("digitv2.lightTheme.paper-primary");
324
+ color: var(--digitv2-lightTheme-paper-primary);
325
325
  }
326
326
 
327
327
  .digit-label {
328
328
  &.selectAll {
329
329
  @include typography-body-l;
330
- color: theme("digitv2.lightTheme.primary-1");
330
+ color: var(--digitv2-lightTheme-primary-1);
331
331
  }
332
332
  }
333
333
  }
@@ -340,72 +340,72 @@
340
340
  p {
341
341
  @include typography-body-s;
342
342
  @apply w-full overflow-hidden whitespace-nowrap max-w-full;
343
- font-family: theme("digitv2.fontFamily.sans");
344
- font-style: theme("digitv2.fontStyle.normal");
345
- font-weight: theme("digitv2.fontWeight.regular");
346
- line-height: theme("digitv2.lineHeight.lineheight2");
343
+ font-family: var(--digitv2-fontFamily-sans);
344
+ font-style: var(--digitv2-fontStyle-normal);
345
+ font-weight: var(--digitv2-fontWeight-regular);
346
+ line-height: var(--digitv2-lineHeight-lineheight2);
347
347
 
348
348
  @media (max-aspect-ratio: 9/16) {
349
349
  /* Media query for mobile */
350
- font-size: theme("digitv2.fontSize.body-s.mobile");
350
+ font-size: var( --digitv2-fontSize-body-s-mobile);
351
351
  }
352
352
 
353
353
  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
354
354
  /* Media query for tablets */
355
- font-size: theme("digitv2.fontSize.body-s.tablet");
355
+ font-size: var( --digitv2-fontSize-body-s-tablet);
356
356
  }
357
357
 
358
358
  @media (min-aspect-ratio: 3/4) {
359
359
  /* Media query for desktop */
360
- font-size: theme("digitv2.fontSize.body-s.desktop");
360
+ font-size: var( --digitv2-fontSize-body-s-desktop);
361
361
  }
362
362
 
363
- color: theme("digitv2.lightTheme.text-primary");
364
- margin: theme("digitv2.spacers.spacer0");
363
+ color: var(--digitv2-lightTheme-text-primary);
364
+ margin: var(--digitv2-spacers-spacer0);
365
365
  text-overflow: ellipsis;
366
366
  }
367
367
 
368
368
  &.checked {
369
- background: theme("digitv2.lightTheme.primary-1");
369
+ background: var(--digitv2-lightTheme-primary-1);
370
370
 
371
371
  p {
372
372
  @include typography-heading-s;
373
- font-family: theme("digitv2.fontFamily.sans");
374
- font-style: theme("digitv2.fontStyle.normal");
375
- font-weight: theme("digitv2.fontWeight.bold");
376
- line-height: theme("digitv2.lineHeight.lineheight1");
373
+ font-family: var(--digitv2-fontFamily-sans);
374
+ font-style: var(--digitv2-fontStyle-normal);
375
+ font-weight: var(--digitv2-fontWeight-bold);
376
+ line-height: var(--digitv2-lineHeight-lineheight1);
377
377
 
378
378
  @media (max-aspect-ratio: 9/16) {
379
379
  /* Media query for mobile */
380
- font-size: theme("digitv2.fontSize.heading-s.mobile");
380
+ font-size: var(--digitv2-fontSize-heading-s-mobile);
381
381
  }
382
382
 
383
383
  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
384
384
  /* Media query for tablets */
385
- font-size: theme("digitv2.fontSize.heading-s.tablet");
385
+ font-size: var(--digitv2-fontSize-heading-s-tablet);
386
386
  }
387
387
 
388
388
  @media (min-aspect-ratio: 3/4) {
389
389
  /* Media query for desktop */
390
- font-size: theme("digitv2.fontSize.heading-s.desktop");
390
+ font-size: var(--digitv2-fontSize-heading-s-desktop);
391
391
  }
392
392
 
393
- color: theme("digitv2.lightTheme.paper-primary");
393
+ color: var(--digitv2-lightTheme-paper-primary);
394
394
  }
395
395
 
396
396
  .digit-label {
397
397
  &.selectAll {
398
398
  @include typography-body-l;
399
- color: theme("digitv2.lightTheme.primary-1");
399
+ color: var(--digitv2-lightTheme-primary-1);
400
400
  }
401
401
  }
402
402
  }
403
403
 
404
404
  .digit-multiselectdropodwn-custom-checkbox,
405
405
  .digit-multiselectdropodwn-custom-checkbox-selectAll {
406
- height: theme("digitv2.spacers.spacer5");
407
- width: theme("digitv2.spacers.spacer5");
408
- border: 0.063rem solid theme("digitv2.lightTheme.text-secondary");
406
+ height: var(--digitv2-spacers-spacer5);
407
+ width: var(--digitv2-spacers-spacer5);
408
+ border: 0.063rem solid var(--digitv2-lightTheme-text-secondary);
409
409
  margin: 0.594rem 0.75rem 0.594rem 0.625rem;
410
410
 
411
411
  svg {
@@ -415,14 +415,14 @@
415
415
 
416
416
  input:active~.digit-multiselectdropodwn-custom-checkbox,
417
417
  input:checked~.digit-multiselectdropodwn-custom-checkbox {
418
- border: 0.125rem solid theme("digitv2.lightTheme.paper-primary");
419
- background-color: theme("digitv2.lightTheme.primary-1");
418
+ border: 0.125rem solid var(--digitv2-lightTheme-paper-primary);
419
+ background-color: var(--digitv2-lightTheme-primary-1);
420
420
  }
421
421
 
422
422
  input:active~.digit-multiselectdropodwn-custom-checkbox-selectAll,
423
423
  input:checked~.digit-multiselectdropodwn-custom-checkbox-selectAll {
424
- border: 0.125rem solid theme("digitv2.lightTheme.primary-1");
425
- background-color: theme("digitv2.lightTheme.paper-secondary");
424
+ border: 0.125rem solid var(--digitv2-lightTheme-primary-1);
425
+ background-color: var(--digitv2-lightTheme-paper-secondary);
426
426
  }
427
427
 
428
428
  input:active~.digit-multiselectdropodwn-custom-checkbox svg,
@@ -430,13 +430,13 @@
430
430
  input:active~.digit-multiselectdropodwn-custom-checkbox-selectAll svg,
431
431
  input:checked~.digit-multiselectdropodwn-custom-checkbox-selectAll svg {
432
432
  @apply opacity-100;
433
- width: theme("digitv2.spacers.spacer4");
434
- height: theme("digitv2.spacers.spacer4");
433
+ width: var(--digitv2-spacers-spacer4);
434
+ height: var(--digitv2-spacers-spacer4);
435
435
  }
436
436
 
437
437
  &.nestedtextmultiselect {
438
- padding: theme("digitv2.spacers.spacer2") theme("digitv2.spacers.spacer4");
439
- gap: theme("digitv2.spacers.spacer3");
438
+ padding: var(--digitv2-spacers-spacer2) var(--digitv2-spacers-spacer4);
439
+ gap: var(--digitv2-spacers-spacer3);
440
440
  align-items: flex-start !important;
441
441
 
442
442
  &:not(.selectAll) {
@@ -450,22 +450,22 @@
450
450
  .option-des-container {
451
451
  @apply flex flex-col justify-center items-start;
452
452
  width: 100% !important;
453
- margin: theme("digitv2.spacers.spacer0");
453
+ margin: var(--digitv2-spacers-spacer0);
454
454
 
455
455
  p {
456
456
  @include typography-body-l;
457
- color: theme("digitv2.lightTheme.text-secondary");
458
- padding: theme("digitv2.spacers.spacer0");
459
- margin-bottom: theme("digitv2.spacers.spacer0");
460
- margin-top: theme("digitv2.spacers.spacer0");
457
+ color: var(--digitv2-lightTheme-text-secondary);
458
+ padding: var(--digitv2-spacers-spacer0);
459
+ margin-bottom: var(--digitv2-spacers-spacer0);
460
+ margin-top: var(--digitv2-spacers-spacer0);
461
461
  }
462
462
 
463
463
  .option-description {
464
- color: theme("digitv2.lightTheme.text-secondary");
465
- font-family: theme("digitv2.fontFamily.sans");
466
- font-size: theme("digitv2.spacers.spacer3");
467
- font-style: theme("digitv2.fontStyle.normal");
468
- font-weight: theme("digitv2.fontWeight.regular");
464
+ color: var(--digitv2-lightTheme-text-secondary);
465
+ font-family: var(--digitv2-fontFamily-sans);
466
+ font-size: var(--digitv2-spacers-spacer3);
467
+ font-style: var(--digitv2-fontStyle-normal);
468
+ font-weight: var(--digitv2-fontWeight-regular);
469
469
  line-height: 1.125rem;
470
470
  }
471
471
 
@@ -475,7 +475,7 @@
475
475
  }
476
476
 
477
477
  .digit-multiselectdropodwn-custom-checkbox {
478
- margin: theme("digitv2.spacers.spacer0");
478
+ margin: var(--digitv2-spacers-spacer0);
479
479
  margin-top: 0.125rem;
480
480
  }
481
481
 
@@ -484,89 +484,89 @@
484
484
 
485
485
  .option-description,
486
486
  p {
487
- color: theme("digitv2.lightTheme.paper-primary");
487
+ color: var(--digitv2-lightTheme-paper-primary);
488
488
  }
489
489
 
490
490
  .option-des-container {
491
491
  p {
492
492
  @include typography-heading-s;
493
- font-family: theme("digitv2.fontFamily.sans");
494
- font-style: theme("digitv2.fontStyle.normal");
495
- font-weight: theme("digitv2.fontWeight.bold");
496
- line-height: theme("digitv2.lineHeight.lineheight1");
493
+ font-family: var(--digitv2-fontFamily-sans);
494
+ font-style: var(--digitv2-fontStyle-normal);
495
+ font-weight: var(--digitv2-fontWeight-bold);
496
+ line-height: var(--digitv2-lineHeight-lineheight1);
497
497
 
498
498
  @media (max-aspect-ratio: 9/16) {
499
499
  /* Media query for mobile */
500
- font-size: theme("digitv2.fontSize.heading-s.mobile");
500
+ font-size: var(--digitv2-fontSize-heading-s-mobile);
501
501
  }
502
502
 
503
503
  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
504
504
  /* Media query for tablets */
505
- font-size: theme("digitv2.fontSize.heading-s.tablet");
505
+ font-size: var(--digitv2-fontSize-heading-s-tablet);
506
506
  }
507
507
 
508
508
  @media (min-aspect-ratio: 3/4) {
509
509
  /* Media query for desktop */
510
- font-size: theme("digitv2.fontSize.heading-s.desktop");
510
+ font-size: var(--digitv2-fontSize-heading-s-desktop);
511
511
  }
512
512
  }
513
513
  }
514
514
 
515
515
  .digit-multiselectdropodwn-custom-checkbox {
516
- margin-top: theme("digitv2.spacers.spacer0");
516
+ margin-top: var(--digitv2-spacers-spacer0);
517
517
  }
518
518
  }
519
519
 
520
520
  &:active {
521
- background: theme("digitv2.lightTheme.primary-1");
521
+ background: var(--digitv2-lightTheme-primary-1);
522
522
  }
523
523
 
524
524
  .digit-multiselectdropodwn-custom-checkbox-selectAll {
525
- margin: theme("digitv2.spacers.spacer0");
525
+ margin: var(--digitv2-spacers-spacer0);
526
526
  margin-top: 0.125rem;
527
527
  }
528
528
  }
529
529
 
530
530
  &.selectAll {
531
- background-color: theme("digitv2.lightTheme.paper-secondary") !important;
532
- border: 0.063rem solid theme("digitv2.lightTheme.generic-divider") !important;
531
+ background-color: var(--digitv2-lightTheme-paper-secondary) !important;
532
+ border: 0.063rem solid var(--digitv2-lightTheme-generic-divider) !important;
533
533
  }
534
534
 
535
535
  .digit-label {
536
536
  &.selectAll {
537
537
  @include typography-body-l;
538
- color: theme("digitv2.lightTheme.primary-1");
538
+ color: var(--digitv2-lightTheme-primary-1);
539
539
  }
540
540
  }
541
541
 
542
542
  &.unsuccessfulresults {
543
- background-color: theme("digitv2.lightTheme.paper-secondary");
543
+ background-color: var(--digitv2-lightTheme-paper-secondary);
544
544
  pointer-events: none;
545
545
 
546
546
  span {
547
547
  @include typography-body-s;
548
- font-family: theme("digitv2.fontFamily.sans");
549
- font-style: theme("digitv2.fontStyle.normal");
550
- font-weight: theme("digitv2.fontWeight.regular");
551
- line-height: theme("digitv2.lineHeight.lineheight2");
552
- padding-left: theme("digitv2.spacers.spacer3");
548
+ font-family: var(--digitv2-fontFamily-sans);
549
+ font-style: var(--digitv2-fontStyle-normal);
550
+ font-weight: var(--digitv2-fontWeight-regular);
551
+ line-height: var(--digitv2-lineHeight-lineheight2);
552
+ padding-left: var(--digitv2-spacers-spacer3);
553
553
 
554
554
  @media (max-aspect-ratio: 9/16) {
555
555
  /* Media query for mobile */
556
- font-size: theme("digitv2.fontSize.body-s.mobile");
556
+ font-size: var( --digitv2-fontSize-body-s-mobile);
557
557
  }
558
558
 
559
559
  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
560
560
  /* Media query for tablets */
561
- font-size: theme("digitv2.fontSize.body-s.tablet");
561
+ font-size: var( --digitv2-fontSize-body-s-tablet);
562
562
  }
563
563
 
564
564
  @media (min-aspect-ratio: 3/4) {
565
565
  /* Media query for desktop */
566
- font-size: theme("digitv2.fontSize.body-s.desktop");
566
+ font-size: var( --digitv2-fontSize-body-s-desktop);
567
567
  }
568
568
 
569
- color: theme("digitv2.lightTheme.text-disabled");
569
+ color: var(--digitv2-lightTheme-text-disabled);
570
570
  }
571
571
  }
572
572
  }
@@ -583,34 +583,34 @@
583
583
 
584
584
  @media (max-aspect-ratio: 9/16) {
585
585
  /* Media query for mobile */
586
- font-size: theme("digitv2.fontSize.body-s.mobile");
587
- font-family: theme("digitv2.fontFamily.sans");
588
- font-style: theme("digitv2.fontStyle.normal");
589
- font-weight: theme("digitv2.fontWeight.regular");
590
- line-height: theme("digitv2.lineHeight.lineheight2");
586
+ font-size: var( --digitv2-fontSize-body-s-mobile);
587
+ font-family: var(--digitv2-fontFamily-sans);
588
+ font-style: var(--digitv2-fontStyle-normal);
589
+ font-weight: var(--digitv2-fontWeight-regular);
590
+ line-height: var(--digitv2-lineHeight-lineheight2);
591
591
  }
592
592
 
593
593
  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
594
594
  /* Media query for tablets */
595
- font-size: theme("digitv2.fontSize.body-s.tablet");
596
- font-family: theme("digitv2.fontFamily.sans");
597
- font-style: theme("digitv2.fontStyle.normal");
598
- font-weight: theme("digitv2.fontWeight.regular");
599
- line-height: theme("digitv2.lineHeight.lineheight2");
595
+ font-size: var( --digitv2-fontSize-body-s-tablet);
596
+ font-family: var(--digitv2-fontFamily-sans);
597
+ font-style: var(--digitv2-fontStyle-normal);
598
+ font-weight: var(--digitv2-fontWeight-regular);
599
+ line-height: var(--digitv2-lineHeight-lineheight2);
600
600
  }
601
601
 
602
602
  @media (min-aspect-ratio: 3/4) {
603
603
  /* Media query for desktop */
604
- font-size: theme("digitv2.fontSize.body-s.desktop");
605
- font-family: theme("digitv2.fontFamily.sans");
606
- font-style: theme("digitv2.fontStyle.normal");
607
- font-weight: theme("digitv2.fontWeight.regular");
608
- line-height: theme("digitv2.lineHeight.lineheight2");
604
+ font-size: var( --digitv2-fontSize-body-s-desktop);
605
+ font-family: var(--digitv2-fontFamily-sans);
606
+ font-style: var(--digitv2-fontStyle-normal);
607
+ font-weight: var(--digitv2-fontWeight-regular);
608
+ line-height: var(--digitv2-lineHeight-lineheight2);
609
609
  }
610
610
 
611
611
  white-space: pre;
612
612
  margin: auto;
613
- margin-left: theme("digitv2.spacers.spacer0");
613
+ margin-left: var(--digitv2-spacers-spacer0);
614
614
  text-align: left;
615
615
  }
616
616
  }