@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/sidenavV2.scss CHANGED
@@ -4,23 +4,23 @@
4
4
  .digit-sidebar {
5
5
  position: fixed;
6
6
  height: 100%;
7
- background-color: theme("digitv2.lightTheme.primary-2");
7
+ background-color: var(--digitv2-lightTheme-primary-2);
8
8
  overflow-x: hidden;
9
9
  left: 0;
10
10
  top: 0;
11
- width: theme("digitv2.spacers.spacer12");
11
+ width: var(--digitv2-spacers-spacer12);
12
12
  display: flex;
13
13
  flex-direction: column;
14
14
  padding-top: 1.563rem;
15
- padding-left: theme("digitv2.spacers.spacer3");
16
- padding-right: theme("digitv2.spacers.spacer3");
15
+ padding-left: var(--digitv2-spacers-spacer3);
16
+ padding-right: var(--digitv2-spacers-spacer3);
17
17
  transition: width 0.5s ease;
18
18
  z-index: 10000;
19
19
 
20
20
  &.hovered {
21
21
  width: auto;
22
22
  min-width: 15rem;
23
- padding: theme("digitv2.spacers.spacer0");
23
+ padding: var(--digitv2-spacers-spacer0);
24
24
  }
25
25
 
26
26
 
@@ -28,17 +28,17 @@
28
28
  height: 4.5rem;
29
29
  min-width: 15rem;
30
30
  width: auto;
31
- padding: theme("digitv2.spacers.spacer4") !important;
31
+ padding: var(--digitv2-spacers-spacer4) !important;
32
32
 
33
33
  .digit-sidebar-search {
34
- height: theme("digitv2.spacers.spacer10") !important;
34
+ height: var(--digitv2-spacers-spacer10) !important;
35
35
  min-width: 13rem;
36
36
 
37
37
  .digit-text-input-customIcon {
38
- height: theme("digitv2.spacers.spacer6");
39
- width: theme("digitv2.spacers.spacer6");
40
- top: theme("digitv2.spacers.spacer2");
41
- right: theme("digitv2.spacers.spacer2");
38
+ height: var(--digitv2-spacers-spacer6);
39
+ width: var(--digitv2-spacers-spacer6);
40
+ top: var(--digitv2-spacers-spacer2);
41
+ right: var(--digitv2-spacers-spacer2);
42
42
  }
43
43
 
44
44
  .input-container {
@@ -48,17 +48,17 @@
48
48
  input {
49
49
  max-height: 100%;
50
50
  background-color: transparent;
51
- border: 0.063rem solid theme("digitv2.lightTheme.paper-secondary");
52
- color: theme("digitv2.lightTheme.generic-background");
51
+ border: 0.063rem solid var(--digitv2-lightTheme-paper-secondary);
52
+ color: var(--digitv2-lightTheme-generic-background);
53
53
 
54
54
  ::placeholder {
55
- color: theme("digitv2.lightTheme.generic-background");
55
+ color: var(--digitv2-lightTheme-generic-background);
56
56
  }
57
57
  }
58
58
 
59
59
  .input-container:focus-within {
60
60
  input {
61
- border: 0.063rem solid theme("digitv2.lightTheme.paper-secondary") !important;
61
+ border: 0.063rem solid var(--digitv2-lightTheme-paper-secondary) !important;
62
62
  }
63
63
  }
64
64
  }
@@ -66,56 +66,56 @@
66
66
  ::placeholder {
67
67
  content: attr(placeholder);
68
68
  @include typography-body-s;
69
- font-family: theme("digitv2.fontFamily.sans");
70
- font-style: theme("digitv2.fontStyle.normal");
71
- font-weight: theme("digitv2.fontWeight.regular");
72
- line-height: theme("digitv2.lineHeight.lineheight2");
69
+ font-family: var(--digitv2-fontFamily-sans);
70
+ font-style: var(--digitv2-fontStyle-normal);
71
+ font-weight: var(--digitv2-fontWeight-regular);
72
+ line-height: var(--digitv2-lineHeight-lineheight2);
73
73
 
74
74
  @media (max-aspect-ratio: 9/16) {
75
75
  /* Media query for mobile */
76
- font-size: theme("digitv2.fontSize.body-s.mobile");
76
+ font-size: var( --digitv2-fontSize-body-s-mobile);
77
77
  }
78
78
 
79
79
  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
80
80
  /* Media query for tablets */
81
- font-size: theme("digitv2.fontSize.body-s.tablet");
81
+ font-size: var( --digitv2-fontSize-body-s-tablet);
82
82
  }
83
83
 
84
84
  @media (min-aspect-ratio: 3/4) {
85
85
  /* Media query for desktop */
86
- font-size: theme("digitv2.fontSize.body-s.desktop");
86
+ font-size: var( --digitv2-fontSize-body-s-desktop);
87
87
  }
88
- color: theme("digitv2.lightTheme.generic-background");
88
+ color: var(--digitv2-lightTheme-generic-background);
89
89
  }
90
90
  }
91
91
 
92
92
  .digit-sidebar-search-container.light {
93
93
  .digit-sidebar-search {
94
94
  input {
95
- background-color: theme("digitv2.lightTheme.paper-primary");
96
- border: 0.063rem solid theme("digitv2.lightTheme.generic-divider");
97
- color: theme("digitv2.lightTheme.text-primary");
95
+ background-color: var(--digitv2-lightTheme-paper-primary);
96
+ border: 0.063rem solid var(--digitv2-lightTheme-generic-divider);
97
+ color: var(--digitv2-lightTheme-text-primary);
98
98
 
99
99
  ::placeholder {
100
- color: theme("digitv2.lightTheme.text-disabled");
100
+ color: var(--digitv2-lightTheme-text-disabled);
101
101
  }
102
102
  }
103
103
 
104
104
  .input-container:focus-within {
105
105
  input {
106
- border: 0.063rem solid theme("digitv2.lightTheme.generic-divider") !important;
106
+ border: 0.063rem solid var(--digitv2-lightTheme-generic-divider) !important;
107
107
  }
108
108
  }
109
109
  }
110
110
 
111
111
  ::placeholder {
112
- color: theme("digitv2.lightTheme.text-disabled");
112
+ color: var(--digitv2-lightTheme-text-disabled);
113
113
  }
114
114
  }
115
115
 
116
116
  &.light {
117
- background-color: theme("digitv2.lightTheme.paper-secondary");
118
- border: 0.063rem solid theme("digitv2.lightTheme.generic-divider");
117
+ background-color: var(--digitv2-lightTheme-paper-secondary);
118
+ border: 0.063rem solid var(--digitv2-lightTheme-generic-divider);
119
119
  }
120
120
 
121
121
 
@@ -130,8 +130,8 @@
130
130
  .digit-sidebar-item {
131
131
  display: flex;
132
132
  align-items: center;
133
- padding: theme("digitv2.spacers.spacer4");
134
- color: theme("digitv2.lightTheme.paper-primary");
133
+ padding: var(--digitv2-spacers-spacer4);
134
+ color: var(--digitv2-lightTheme-paper-primary);
135
135
  text-decoration: none;
136
136
  transition: background-color 0.3s;
137
137
  cursor: pointer;
@@ -148,7 +148,7 @@
148
148
  }
149
149
 
150
150
  .digit-sidebar-items-container.dark::-webkit-scrollbar-track {
151
- background: theme("digitv2.lightTheme.primary-2");
151
+ background: var(--digitv2-lightTheme-primary-2);
152
152
  }
153
153
 
154
154
  .digit-sidebar-items-container.dark::-webkit-scrollbar-thumb {
@@ -166,45 +166,45 @@
166
166
 
167
167
  .digit-sidebar-items-container.light::-webkit-scrollbar {
168
168
  width: 0.375rem;
169
- background-color: theme("digitv2.lightTheme.generic-background");
169
+ background-color: var(--digitv2-lightTheme-generic-background);
170
170
  }
171
171
 
172
172
  .digit-sidebar-items-container.light::-webkit-scrollbar-track {
173
- background-color: theme("digitv2.lightTheme.generic-background");
173
+ background-color: var(--digitv2-lightTheme-generic-background);
174
174
  border-radius: 0.563rem;
175
175
  }
176
176
 
177
177
  .digit-sidebar-items-container.light::-webkit-scrollbar-thumb {
178
- background-color: theme("digitv2.lightTheme.generic-divider");
178
+ background-color: var(--digitv2-lightTheme-generic-divider);
179
179
  border-radius: 0.563rem;
180
180
  }
181
181
 
182
182
  .icon {
183
- margin-right: theme("digitv2.spacers.spacer3");
184
- width: theme("digitv2.spacers.spacer6");
185
- height: theme("digitv2.spacers.spacer6");
183
+ margin-right: var(--digitv2-spacers-spacer3);
184
+ width: var(--digitv2-spacers-spacer6);
185
+ height: var(--digitv2-spacers-spacer6);
186
186
  }
187
187
 
188
188
  .item-label {
189
189
 
190
- font-family: theme("digitv2.fontFamily.sans");
191
- font-style: theme("digitv2.fontStyle.normal");
192
- font-weight: theme("digitv2.fontWeight.regular");
193
- line-height: theme("digitv2.lineHeight.lineheight2");
190
+ font-family: var(--digitv2-fontFamily-sans);
191
+ font-style: var(--digitv2-fontStyle-normal);
192
+ font-weight: var(--digitv2-fontWeight-regular);
193
+ line-height: var(--digitv2-lineHeight-lineheight2);
194
194
 
195
195
  @media (max-aspect-ratio: 9/16) {
196
196
  /* Media query for mobile */
197
- font-size: theme("digitv2.fontSize.body-s.mobile");
197
+ font-size: var( --digitv2-fontSize-body-s-mobile);
198
198
  }
199
199
 
200
200
  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
201
201
  /* Media query for tablets */
202
- font-size: theme("digitv2.fontSize.body-s.tablet");
202
+ font-size: var( --digitv2-fontSize-body-s-tablet);
203
203
  }
204
204
 
205
205
  @media (min-aspect-ratio: 3/4) {
206
206
  /* Media query for desktop */
207
- font-size: theme("digitv2.fontSize.body-s.desktop");
207
+ font-size: var( --digitv2-fontSize-body-s-desktop);
208
208
  }
209
209
 
210
210
  opacity: 0;
@@ -212,8 +212,8 @@
212
212
  }
213
213
 
214
214
  .expand-icon {
215
- width: theme("digitv2.spacers.spacer6");
216
- height: theme("digitv2.spacers.spacer6");
215
+ width: var(--digitv2-spacers-spacer6);
216
+ height: var(--digitv2-spacers-spacer6);
217
217
  margin-left: auto !important;
218
218
  }
219
219
 
@@ -222,12 +222,12 @@
222
222
  }
223
223
 
224
224
  .digit-sidebar-item.light:hover {
225
- background-color: theme("digitv2.lightTheme.generic-background");
225
+ background-color: var(--digitv2-lightTheme-generic-background);
226
226
  }
227
227
 
228
228
  .digit-sidebar-item.light {
229
229
  .item-label {
230
- color: theme("digitv2.lightTheme.primary-2");
230
+ color: var(--digitv2-lightTheme-primary-2);
231
231
  }
232
232
  }
233
233
 
@@ -235,30 +235,30 @@
235
235
  .digit-sidebar-item.selected,
236
236
  .digit-sidebar-item:active:hover,
237
237
  .digit-sidebar-item.selected:hover {
238
- background: theme("digitv2.lightTheme.primary-1");
238
+ background: var(--digitv2-lightTheme-primary-1);
239
239
 
240
240
  .item-label {
241
241
  @include typography-heading-s;
242
- font-family: theme("digitv2.fontFamily.sans");
243
- font-style: theme("digitv2.fontStyle.normal");
244
- font-weight: theme("digitv2.fontWeight.bold");
245
- line-height: theme("digitv2.lineHeight.lineheight1");
242
+ font-family: var(--digitv2-fontFamily-sans);
243
+ font-style: var(--digitv2-fontStyle-normal);
244
+ font-weight: var(--digitv2-fontWeight-bold);
245
+ line-height: var(--digitv2-lineHeight-lineheight1);
246
246
 
247
247
  @media (max-aspect-ratio: 9/16) {
248
248
  /* Media query for mobile */
249
- font-size: theme("digitv2.fontSize.heading-s.mobile");
249
+ font-size: var(--digitv2-fontSize-heading-s-mobile);
250
250
  }
251
251
 
252
252
  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
253
253
  /* Media query for tablets */
254
- font-size: theme("digitv2.fontSize.heading-s.tablet");
254
+ font-size: var(--digitv2-fontSize-heading-s-tablet);
255
255
  }
256
256
 
257
257
  @media (min-aspect-ratio: 3/4) {
258
258
  /* Media query for desktop */
259
- font-size: theme("digitv2.fontSize.heading-s.desktop");
259
+ font-size: var(--digitv2-fontSize-heading-s-desktop);
260
260
  }
261
- color: theme("digitv2.lightTheme.paper-primary");
261
+ color: var(--digitv2-lightTheme-paper-primary);
262
262
  }
263
263
  }
264
264
 
@@ -271,10 +271,10 @@
271
271
  top: 0.062rem;
272
272
  left: 0;
273
273
  bottom: 0.063rem;
274
- width: theme("digitv2.spacers.spacer2");
275
- background: theme("digitv2.lightTheme.paper-primary");
276
- border-top-right-radius: theme("digitv2.spacers.spacer1");
277
- border-bottom-right-radius: theme("digitv2.spacers.spacer1");
274
+ width: var(--digitv2-spacers-spacer2);
275
+ background: var(--digitv2-lightTheme-paper-primary);
276
+ border-top-right-radius: var(--digitv2-spacers-spacer1);
277
+ border-bottom-right-radius: var(--digitv2-spacers-spacer1);
278
278
  }
279
279
 
280
280
  .digit-sidebar-item.secondary:active,
@@ -291,7 +291,7 @@
291
291
  background: #c84c0e1a;
292
292
 
293
293
  .item-label {
294
- color: theme("digitv2.lightTheme.primary-2");
294
+ color: var(--digitv2-lightTheme-primary-2);
295
295
  }
296
296
  }
297
297
 
@@ -304,10 +304,10 @@
304
304
  top: 0.063rem;
305
305
  left: 0;
306
306
  bottom: 0.063rem;
307
- width: theme("digitv2.spacers.spacer2");
308
- background: theme("digitv2.lightTheme.primary-1");
309
- border-top-right-radius: theme("digitv2.spacers.spacer1");
310
- border-bottom-right-radius: theme("digitv2.spacers.spacer1");
307
+ width: var(--digitv2-spacers-spacer2);
308
+ background: var(--digitv2-lightTheme-primary-1);
309
+ border-top-right-radius: var(--digitv2-spacers-spacer1);
310
+ border-bottom-right-radius: var(--digitv2-spacers-spacer1);
311
311
  }
312
312
 
313
313
  .digit-sidebar.hovered .item-label {
@@ -315,26 +315,26 @@
315
315
  }
316
316
 
317
317
  .digit-sidebar-children {
318
- margin-left: theme("digitv2.spacers.spacer6");
319
- border-left: 0.031rem solid theme("digitv2.lightTheme.text-disabled");
318
+ margin-left: var(--digitv2-spacers-spacer6);
319
+ border-left: 0.031rem solid var(--digitv2-lightTheme-text-disabled);
320
320
  }
321
321
 
322
322
  .digit-sidebar-bottom {
323
323
  background-color: #FFFFFF33;
324
324
  z-index: 5;
325
- padding: theme("digitv2.spacers.spacer4");
325
+ padding: var(--digitv2-spacers-spacer4);
326
326
  display: flex;
327
327
  flex-direction: column;
328
- gap: theme("digitv2.spacers.spacer4");
329
- padding-right: theme("digitv2.spacers.spacer0");
330
- padding-left: theme("digitv2.spacers.spacer0");
328
+ gap: var(--digitv2-spacers-spacer4);
329
+ padding-right: var(--digitv2-spacers-spacer0);
330
+ padding-left: var(--digitv2-spacers-spacer0);
331
331
 
332
332
  .digit-sidebar-bottom-item {
333
333
  display: flex;
334
334
  align-items: center;
335
- gap: theme("digitv2.spacers.spacer2");
335
+ gap: var(--digitv2-spacers-spacer2);
336
336
  cursor: pointer;
337
- height: theme("digitv2.spacers.spacer10");
337
+ height: var(--digitv2-spacers-spacer10);
338
338
 
339
339
  &:hover {
340
340
  background-color: #FFFFFF4D;
@@ -342,44 +342,44 @@
342
342
 
343
343
  svg {
344
344
  flex-shrink: 0;
345
- margin-left: theme("digitv2.spacers.spacer6");
345
+ margin-left: var(--digitv2-spacers-spacer6);
346
346
  }
347
347
 
348
348
  .digit-sidebar-bottom-item-text {
349
349
 
350
- font-family: theme("digitv2.fontFamily.sans");
351
- font-style: theme("digitv2.fontStyle.normal");
352
- font-weight: theme("digitv2.fontWeight.regular");
353
- line-height: theme("digitv2.lineHeight.lineheight2");
350
+ font-family: var(--digitv2-fontFamily-sans);
351
+ font-style: var(--digitv2-fontStyle-normal);
352
+ font-weight: var(--digitv2-fontWeight-regular);
353
+ line-height: var(--digitv2-lineHeight-lineheight2);
354
354
 
355
355
  @media (max-aspect-ratio: 9/16) {
356
356
  /* Media query for mobile */
357
- font-size: theme("digitv2.fontSize.body-xs.mobile");
357
+ font-size: var(--digitv2-fontSize-body-xs-mobile);
358
358
  }
359
359
 
360
360
  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
361
361
  /* Media query for tablets */
362
- font-size: theme("digitv2.fontSize.body-xs.tablet");
362
+ font-size: var(--digitv2-fontSize-body-xs-tablet);
363
363
  }
364
364
 
365
365
  @media (min-aspect-ratio: 3/4) {
366
366
  /* Media query for desktop */
367
- font-size: theme("digitv2.fontSize.body-xs.desktop");
367
+ font-size: var(--digitv2-fontSize-body-xs-desktop);
368
368
  }
369
369
 
370
- color: theme("digitv2.lightTheme.paper-primary");
370
+ color: var(--digitv2-lightTheme-paper-primary);
371
371
  }
372
372
  }
373
373
 
374
374
  &.light .digit-sidebar-bottom-item .digit-sidebar-bottom-item-text {
375
- color: theme("digitv2.lightTheme.primary-2");
375
+ color: var(--digitv2-lightTheme-primary-2);
376
376
  }
377
377
 
378
378
  &.light {
379
- border-top: 0.063rem solid theme("digitv2.lightTheme.generic-divider");
379
+ border-top: 0.063rem solid var(--digitv2-lightTheme-generic-divider);
380
380
 
381
381
  .digit-sidebar-bottom-item:hover {
382
- background-color: theme("digitv2.lightTheme.generic-background");
382
+ background-color: var(--digitv2-lightTheme-generic-background);
383
383
  }
384
384
 
385
385
  }
@@ -387,51 +387,51 @@
387
387
  .divider {
388
388
  width: 80%;
389
389
  height: 0.031rem;
390
- background-color: theme("digitv2.lightTheme.generic-divider");
390
+ background-color: var(--digitv2-lightTheme-generic-divider);
391
391
  }
392
392
  }
393
393
 
394
394
  .digit-sidebar {
395
395
  &.collapsed {
396
396
 
397
- padding-left: theme("digitv2.spacers.spacer0");
398
- padding-right: theme("digitv2.spacers.spacer0");
397
+ padding-left: var(--digitv2-spacers-spacer0);
398
+ padding-right: var(--digitv2-spacers-spacer0);
399
399
 
400
400
  .digit-sidebar-search-container-collapsed {
401
- padding-left: theme("digitv2.spacers.spacer3");
402
- padding-right: theme("digitv2.spacers.spacer3");
401
+ padding-left: var(--digitv2-spacers-spacer3);
402
+ padding-right: var(--digitv2-spacers-spacer3);
403
403
  display: flex;
404
404
  align-items: center;
405
405
  justify-content: center;
406
406
  }
407
407
 
408
408
  &.searchDisabled{
409
- padding-top: theme("digitv2.spacers.spacer0");
409
+ padding-top: var(--digitv2-spacers-spacer0);
410
410
  }
411
411
 
412
412
  .digit-sidebar-items-container {
413
413
 
414
414
  display: flex !important;
415
415
  flex-direction: column;
416
- gap: theme("digitv2.spacers.spacer6");
417
- margin-top: theme("digitv2.spacers.spacer6");
416
+ gap: var(--digitv2-spacers-spacer6);
417
+ margin-top: var(--digitv2-spacers-spacer6);
418
418
 
419
419
  .item-child-wrapper {
420
420
  width: 100%;
421
- height: theme("digitv2.spacers.spacer10");
421
+ height: var(--digitv2-spacers-spacer10);
422
422
  display: flex;
423
423
  align-items: center;
424
424
  justify-content: center;
425
425
 
426
426
  .digit-sidebar-item {
427
- padding: theme("digitv2.spacers.spacer0");
428
- width: theme("digitv2.spacers.spacer6");
427
+ padding: var(--digitv2-spacers-spacer0);
428
+ width: var(--digitv2-spacers-spacer6);
429
429
  height: 100%;
430
430
 
431
431
 
432
432
  .icon {
433
- margin-right: theme("digitv2.spacers.spacer3");
434
- margin-left: theme("digitv2.spacers.spacer3");
433
+ margin-right: var(--digitv2-spacers-spacer3);
434
+ margin-left: var(--digitv2-spacers-spacer3);
435
435
  }
436
436
 
437
437
  &.parentLevel {
@@ -442,7 +442,7 @@
442
442
  .digit-sidebar-item:active,
443
443
  .digit-sidebar-item.selected,
444
444
  .digit-sidebar-item.selectedAsParent {
445
- background: theme("digitv2.lightTheme.primary-1");
445
+ background: var(--digitv2-lightTheme-primary-1);
446
446
  display: flex;
447
447
  align-items: center;
448
448
  justify-content: center;
@@ -458,10 +458,10 @@
458
458
  top: 0.062rem;
459
459
  left: 0;
460
460
  bottom: 0.063rem;
461
- width: theme("digitv2.spacers.spacer1");
462
- background: theme("digitv2.lightTheme.paper-primary");
463
- border-top-right-radius: theme("digitv2.spacers.spacer1");
464
- border-bottom-right-radius: theme("digitv2.spacers.spacer1");
461
+ width: var(--digitv2-spacers-spacer1);
462
+ background: var(--digitv2-lightTheme-paper-primary);
463
+ border-top-right-radius: var(--digitv2-spacers-spacer1);
464
+ border-bottom-right-radius: var(--digitv2-spacers-spacer1);
465
465
  }
466
466
 
467
467
  .digit-sidebar-item.secondary:active,
@@ -482,7 +482,7 @@
482
482
  background: #c84c0e1a;
483
483
 
484
484
  .item-label {
485
- color: theme("digitv2.lightTheme.primary-2");
485
+ color: var(--digitv2-lightTheme-primary-2);
486
486
  }
487
487
  }
488
488
 
@@ -497,16 +497,16 @@
497
497
  top: 0.063rem;
498
498
  left: 0;
499
499
  bottom: 0.063rem;
500
- width: theme("digitv2.spacers.spacer1");
501
- background: theme("digitv2.lightTheme.primary-1");
502
- border-top-right-radius: theme("digitv2.spacers.spacer1");
503
- border-bottom-right-radius: theme("digitv2.spacers.spacer1");
500
+ width: var(--digitv2-spacers-spacer1);
501
+ background: var(--digitv2-lightTheme-primary-1);
502
+ border-top-right-radius: var(--digitv2-spacers-spacer1);
503
+ border-bottom-right-radius: var(--digitv2-spacers-spacer1);
504
504
  }
505
505
 
506
506
  }
507
507
 
508
508
  &.searchDisabled{
509
- margin-top: theme("digitv2.spacers.spacer0");
509
+ margin-top: var(--digitv2-spacers-spacer0);
510
510
  }
511
511
  }
512
512
  }
@@ -514,6 +514,6 @@
514
514
 
515
515
  .digit-sidebar-footer-img {
516
516
  width: 6.563rem;
517
- height: theme("digitv2.spacers.spacer3");
517
+ height: var(--digitv2-spacers-spacer3);
518
518
  margin-left: 25%;
519
519
  }