@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/hamburgerV2.scss CHANGED
@@ -2,8 +2,8 @@
2
2
  @import '../typography.scss';
3
3
 
4
4
  .digit-msb-sidebar {
5
- background-color: theme("digitv2.lightTheme.paper-primary");
6
- color: theme("digitv2.lightTheme.primary-2");
5
+ background-color: var(--digitv2-lightTheme-paper-primary);
6
+ color: var(--digitv2-lightTheme-primary-2);
7
7
  display: flex;
8
8
  flex-direction: column;
9
9
  transition: width 0.3s;
@@ -17,85 +17,85 @@
17
17
  flex-direction: column;
18
18
 
19
19
  &.dark {
20
- background-color: theme("digitv2.lightTheme.primary-2");
21
- color: theme("digitv2.lightTheme.paper-primary");
20
+ background-color: var(--digitv2-lightTheme-primary-2);
21
+ color: var(--digitv2-lightTheme-paper-primary);
22
22
  }
23
23
  }
24
24
 
25
25
  .digit-msb-profile {
26
26
  display: flex;
27
27
  align-items: center;
28
- padding: theme("digitv2.spacers.spacer6");
28
+ padding: var(--digitv2-spacers-spacer6);
29
29
  flex-direction: column;
30
- gap: theme("digitv2.spacers.spacer3");
30
+ gap: var(--digitv2-spacers-spacer3);
31
31
  }
32
32
 
33
33
  .digit-msb-profile-icon {
34
34
  width: 3.875rem;
35
35
  height: 4rem;
36
- margin-right: theme("digitv2.spacers.spacer4");
36
+ margin-right: var(--digitv2-spacers-spacer4);
37
37
  }
38
38
 
39
39
  .digit-msb-profile-details {
40
40
  display: flex;
41
41
  flex-direction: column;
42
- gap: theme("digitv2.spacers.spacer1");
42
+ gap: var(--digitv2-spacers-spacer1);
43
43
  text-align: center;
44
44
  }
45
45
 
46
46
  .digit-msb-profile-name {
47
- font-family: theme("digitv2.fontFamily.sans");
48
- font-style: theme("digitv2.fontStyle.normal");
49
- font-weight: theme("digitv2.fontWeight.bold");
50
- line-height: theme("digitv2.lineHeight.lineheight1");
47
+ font-family: var(--digitv2-fontFamily-sans);
48
+ font-style: var(--digitv2-fontStyle-normal);
49
+ font-weight: var(--digitv2-fontWeight-bold);
50
+ line-height: var(--digitv2-lineHeight-lineheight1);
51
51
 
52
52
  @media (max-aspect-ratio: 9/16) {
53
53
  /* Media query for mobile */
54
- font-size: theme("digitv2.fontSize.heading-s.mobile");
54
+ font-size: var(--digitv2-fontSize-heading-s-mobile);
55
55
  }
56
56
 
57
57
  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
58
58
  /* Media query for tablets */
59
- font-size: theme("digitv2.fontSize.heading-s.tablet");
59
+ font-size: var(--digitv2-fontSize-heading-s-tablet);
60
60
  }
61
61
 
62
62
  @media (min-aspect-ratio: 3/4) {
63
63
  /* Media query for desktop */
64
- font-size: theme("digitv2.fontSize.heading-s.desktop");
64
+ font-size: var(--digitv2-fontSize-heading-s-desktop);
65
65
  }
66
66
 
67
- color: theme("digitv2.lightTheme.text-primary");
67
+ color: var(--digitv2-lightTheme-text-primary);
68
68
 
69
69
  &.dark {
70
- color: theme("digitv2.lightTheme.paper-primary");
70
+ color: var(--digitv2-lightTheme-paper-primary);
71
71
  }
72
72
  }
73
73
 
74
74
  .digit-msb-profile-phone {
75
- font-family: theme("digitv2.fontFamily.sans");
76
- font-style: theme("digitv2.fontStyle.normal");
77
- font-weight: theme("digitv2.fontWeight.regular");
78
- line-height: theme("digitv2.lineHeight.lineheight2");
75
+ font-family: var(--digitv2-fontFamily-sans);
76
+ font-style: var(--digitv2-fontStyle-normal);
77
+ font-weight: var(--digitv2-fontWeight-regular);
78
+ line-height: var(--digitv2-lineHeight-lineheight2);
79
79
 
80
80
  @media (max-aspect-ratio: 9/16) {
81
81
  /* Media query for mobile */
82
- font-size: theme("digitv2.fontSize.body-s.mobile");
82
+ font-size: var( --digitv2-fontSize-body-s-mobile);
83
83
  }
84
84
 
85
85
  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
86
86
  /* Media query for tablets */
87
- font-size: theme("digitv2.fontSize.body-s.tablet");
87
+ font-size: var( --digitv2-fontSize-body-s-tablet);
88
88
  }
89
89
 
90
90
  @media (min-aspect-ratio: 3/4) {
91
91
  /* Media query for desktop */
92
- font-size: theme("digitv2.fontSize.body-s.desktop");
92
+ font-size: var( --digitv2-fontSize-body-s-desktop);
93
93
  }
94
94
 
95
- color: theme("digitv2.lightTheme.text-secondary");
95
+ color: var(--digitv2-lightTheme-text-secondary);
96
96
 
97
97
  &.dark {
98
- color: theme("digitv2.lightTheme.paper-primary");
98
+ color: var(--digitv2-lightTheme-paper-primary);
99
99
  }
100
100
  }
101
101
 
@@ -108,24 +108,24 @@
108
108
  .digit-msb-item-child-wrapper {
109
109
  display: flex;
110
110
  flex-direction: column;
111
- height: theme("digitv2.spacers.spacer12");
112
- padding: theme("digitv2.spacers.spacer3") theme("digitv2.spacers.spacer6");
111
+ height: var(--digitv2-spacers-spacer12);
112
+ padding: var(--digitv2-spacers-spacer3) var(--digitv2-spacers-spacer6);
113
113
  justify-content: space-between;
114
- border-top: 0.063rem solid theme("digitv2.lightTheme.generic-divider");
114
+ border-top: 0.063rem solid var(--digitv2-lightTheme-generic-divider);
115
115
 
116
116
  &.usermanuals{
117
- padding: theme("digitv2.spacers.spacer4") theme("digitv2.spacers.spacer6");
117
+ padding: var(--digitv2-spacers-spacer4) var(--digitv2-spacers-spacer6);
118
118
  height: 3.5rem;
119
119
  }
120
120
  }
121
121
 
122
122
  .digit-msb-item-child-wrapper:last-child,
123
123
  .digit-msb-item-child-wrapper.expanded {
124
- border-bottom: 0.063rem solid theme("digitv2.lightTheme.generic-divider");
124
+ border-bottom: 0.063rem solid var(--digitv2-lightTheme-generic-divider);
125
125
  }
126
126
 
127
127
  .digit-msb-item-child-wrapper:not(.dark):nth-child(2n+1) {
128
- background-color: theme("digitv2.lightTheme.paper-secondary");
128
+ background-color: var(--digitv2-lightTheme-paper-secondary);
129
129
  }
130
130
 
131
131
  .digit-msb-item-child-wrapper.expanded {
@@ -139,27 +139,27 @@
139
139
  }
140
140
 
141
141
  .digit-msb-sidebar-item.digit-msb-parentLevel {
142
- height: theme("digitv2.spacers.spacer6");
142
+ height: var(--digitv2-spacers-spacer6);
143
143
 
144
144
  .digit-msb-item-label {
145
- font-family: theme("digitv2.fontFamily.sans");
146
- font-style: theme("digitv2.fontStyle.normal");
147
- font-weight: theme("digitv2.fontWeight.bold");
148
- line-height: theme("digitv2.lineHeight.lineheight1");
145
+ font-family: var(--digitv2-fontFamily-sans);
146
+ font-style: var(--digitv2-fontStyle-normal);
147
+ font-weight: var(--digitv2-fontWeight-bold);
148
+ line-height: var(--digitv2-lineHeight-lineheight1);
149
149
 
150
150
  @media (max-aspect-ratio: 9/16) {
151
151
  /* Media query for mobile */
152
- font-size: theme("digitv2.fontSize.heading-s.mobile");
152
+ font-size: var(--digitv2-fontSize-heading-s-mobile);
153
153
  }
154
154
 
155
155
  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
156
156
  /* Media query for tablets */
157
- font-size: theme("digitv2.fontSize.heading-s.tablet");
157
+ font-size: var(--digitv2-fontSize-heading-s-tablet);
158
158
  }
159
159
 
160
160
  @media (min-aspect-ratio: 3/4) {
161
161
  /* Media query for desktop */
162
- font-size: theme("digitv2.fontSize.heading-s.desktop");
162
+ font-size: var(--digitv2-fontSize-heading-s-desktop);
163
163
  }
164
164
  }
165
165
  }
@@ -167,37 +167,37 @@
167
167
  .digit-msb-item-label{
168
168
  &.usermanuals{
169
169
  @include typography-body-xs;
170
- font-family: theme("digitv2.fontFamily.sans");
171
- font-style: theme("digitv2.fontStyle.normal");
172
- font-weight: theme("digitv2.fontWeight.regular");
173
- line-height: theme("digitv2.lineHeight.lineheight2");
170
+ font-family: var(--digitv2-fontFamily-sans);
171
+ font-style: var(--digitv2-fontStyle-normal);
172
+ font-weight: var(--digitv2-fontWeight-regular);
173
+ line-height: var(--digitv2-lineHeight-lineheight2);
174
174
 
175
175
  @media (max-aspect-ratio: 9/16) {
176
176
  /* Media query for mobile */
177
- font-size: theme("digitv2.fontSize.body-xs.mobile");
177
+ font-size: var(--digitv2-fontSize-body-xs-mobile);
178
178
  }
179
179
 
180
180
  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
181
181
  /* Media query for tablets */
182
- font-size: theme("digitv2.fontSize.body-xs.tablet");
182
+ font-size: var(--digitv2-fontSize-body-xs-tablet);
183
183
  }
184
184
 
185
185
  @media (min-aspect-ratio: 3/4) {
186
186
  /* Media query for desktop */
187
- font-size: theme("digitv2.fontSize.body-xs.desktop");
187
+ font-size: var(--digitv2-fontSize-body-xs-desktop);
188
188
  }
189
189
  }
190
190
  }
191
191
  .digit-msb-sidebar-item .digit-msb-icon {
192
- margin-right: theme("digitv2.spacers.spacer4");
192
+ margin-right: var(--digitv2-spacers-spacer4);
193
193
 
194
194
  &.usermanuals{
195
195
  display: flex;
196
- width: theme("digitv2.spacers.spacer6");
197
- height: theme("digitv2.spacers.spacer6");
196
+ width: var(--digitv2-spacers-spacer6);
197
+ height: var(--digitv2-spacers-spacer6);
198
198
  justify-content: center;
199
199
  align-items: center;
200
- margin-right: theme("digitv2.spacers.spacer2");
200
+ margin-right: var(--digitv2-spacers-spacer2);
201
201
  }
202
202
  }
203
203
 
@@ -211,10 +211,10 @@
211
211
 
212
212
  .digit-inner-level-child {
213
213
  margin-left: 2.25rem;
214
- border-left: 0.063rem solid theme("digitv2.lightTheme.generic-divider");
214
+ border-left: 0.063rem solid var(--digitv2-lightTheme-generic-divider);
215
215
 
216
216
  &.dark {
217
- border-left: 0.063rem solid theme("digitv2.lightTheme.paper-primary");
217
+ border-left: 0.063rem solid var(--digitv2-lightTheme-paper-primary);
218
218
  }
219
219
  }
220
220
  }
@@ -224,29 +224,29 @@
224
224
  display: flex;
225
225
  text-align: center;
226
226
  flex-direction: column;
227
- height: theme("digitv2.spacers.spacer12");
228
- padding: theme("digitv2.spacers.spacer3") theme("digitv2.spacers.spacer6");
227
+ height: var(--digitv2-spacers-spacer12);
228
+ padding: var(--digitv2-spacers-spacer3) var(--digitv2-spacers-spacer6);
229
229
  justify-content: space-between;
230
- border-top: 0.063rem solid theme("digitv2.lightTheme.generic-divider");
231
- color:theme("digitv2.lightTheme.text-disabled");
232
- font-family: theme("digitv2.fontFamily.sans");
233
- font-style: theme("digitv2.fontStyle.normal");
234
- font-weight: theme("digitv2.fontWeight.regular");
235
- line-height: theme("digitv2.lineHeight.lineheight2");
230
+ border-top: 0.063rem solid var(--digitv2-lightTheme-generic-divider);
231
+ color:var(--digitv2-lightTheme-text-disabled);
232
+ font-family: var(--digitv2-fontFamily-sans);
233
+ font-style: var(--digitv2-fontStyle-normal);
234
+ font-weight: var(--digitv2-fontWeight-regular);
235
+ line-height: var(--digitv2-lineHeight-lineheight2);
236
236
 
237
237
  @media (max-aspect-ratio: 9/16) {
238
238
  /* Media query for mobile */
239
- font-size: theme("digitv2.fontSize.body-s.mobile");
239
+ font-size: var( --digitv2-fontSize-body-s-mobile);
240
240
  }
241
241
 
242
242
  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
243
243
  /* Media query for tablets */
244
- font-size: theme("digitv2.fontSize.body-s.tablet");
244
+ font-size: var( --digitv2-fontSize-body-s-tablet);
245
245
  }
246
246
 
247
247
  @media (min-aspect-ratio: 3/4) {
248
248
  /* Media query for desktop */
249
- font-size: theme("digitv2.fontSize.body-s.desktop");
249
+ font-size: var( --digitv2-fontSize-body-s-desktop);
250
250
  }
251
251
  }
252
252
 
@@ -260,17 +260,17 @@
260
260
  height: 4.5rem;
261
261
  min-width: 15rem;
262
262
  width: auto;
263
- padding: theme("digitv2.spacers.spacer4") !important;
263
+ padding: var(--digitv2-spacers-spacer4) !important;
264
264
 
265
265
  .digit-mb-search {
266
- height: theme("digitv2.spacers.spacer10") !important;
266
+ height: var(--digitv2-spacers-spacer10) !important;
267
267
  min-width: 13rem;
268
268
 
269
269
  .digit-text-input-customIcon {
270
- height: theme("digitv2.spacers.spacer6");
271
- width: theme("digitv2.spacers.spacer6");
272
- top: theme("digitv2.spacers.spacer2");
273
- right: theme("digitv2.spacers.spacer2");
270
+ height: var(--digitv2-spacers-spacer6);
271
+ width: var(--digitv2-spacers-spacer6);
272
+ top: var(--digitv2-spacers-spacer2);
273
+ right: var(--digitv2-spacers-spacer2);
274
274
  }
275
275
 
276
276
  .input-container {
@@ -279,19 +279,19 @@
279
279
 
280
280
  input {
281
281
  max-height: 100%;
282
- background-color: theme("digitv2.lightTheme.paper-primary");
283
- border: 0.063rem solid theme("digitv2.lightTheme.generic-divider");
284
- color: theme("digitv2.lightTheme.text-primary");
285
- height: theme("digitv2.spacers.spacer8") !important;
282
+ background-color: var(--digitv2-lightTheme-paper-primary);
283
+ border: 0.063rem solid var(--digitv2-lightTheme-generic-divider);
284
+ color: var(--digitv2-lightTheme-text-primary);
285
+ height: var(--digitv2-spacers-spacer8) !important;
286
286
 
287
287
  ::placeholder {
288
- color: theme("digitv2.lightTheme.text-disabled");
288
+ color: var(--digitv2-lightTheme-text-disabled);
289
289
  }
290
290
  }
291
291
 
292
292
  .input-container:focus-within {
293
293
  input {
294
- border: 0.063rem solid theme("digitv2.lightTheme.generic-divider") !important;
294
+ border: 0.063rem solid var(--digitv2-lightTheme-generic-divider) !important;
295
295
  }
296
296
  }
297
297
  }
@@ -299,26 +299,26 @@
299
299
  ::placeholder {
300
300
  content: attr(placeholder);
301
301
  @include typography-body-s;
302
- font-family: theme("digitv2.fontFamily.sans");
303
- font-style: theme("digitv2.fontStyle.normal");
304
- font-weight: theme("digitv2.fontWeight.regular");
305
- line-height: theme("digitv2.lineHeight.lineheight2");
302
+ font-family: var(--digitv2-fontFamily-sans);
303
+ font-style: var(--digitv2-fontStyle-normal);
304
+ font-weight: var(--digitv2-fontWeight-regular);
305
+ line-height: var(--digitv2-lineHeight-lineheight2);
306
306
 
307
307
  @media (max-aspect-ratio: 9/16) {
308
308
  /* Media query for mobile */
309
- font-size: theme("digitv2.fontSize.body-s.mobile");
309
+ font-size: var( --digitv2-fontSize-body-s-mobile);
310
310
  }
311
311
 
312
312
  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
313
313
  /* Media query for tablets */
314
- font-size: theme("digitv2.fontSize.body-s.tablet");
314
+ font-size: var( --digitv2-fontSize-body-s-tablet);
315
315
  }
316
316
 
317
317
  @media (min-aspect-ratio: 3/4) {
318
318
  /* Media query for desktop */
319
- font-size: theme("digitv2.fontSize.body-s.desktop");
319
+ font-size: var( --digitv2-fontSize-body-s-desktop);
320
320
  }
321
- color: theme("digitv2.lightTheme.text-disabled");
321
+ color: var(--digitv2-lightTheme-text-disabled);
322
322
  }
323
323
  }
324
324
 
@@ -326,17 +326,17 @@
326
326
  height: 4.5rem;
327
327
  min-width: 15rem;
328
328
  width: auto;
329
- padding: theme("digitv2.spacers.spacer4") !important;
329
+ padding: var(--digitv2-spacers-spacer4) !important;
330
330
 
331
331
  .digit-mb-search {
332
- height: theme("digitv2.spacers.spacer10") !important;
332
+ height: var(--digitv2-spacers-spacer10) !important;
333
333
  min-width: 13rem;
334
334
 
335
335
  .digit-text-input-customIcon {
336
- height: theme("digitv2.spacers.spacer6");
337
- width: theme("digitv2.spacers.spacer6");
338
- top: theme("digitv2.spacers.spacer2");
339
- right: theme("digitv2.spacers.spacer2");
336
+ height: var(--digitv2-spacers-spacer6);
337
+ width: var(--digitv2-spacers-spacer6);
338
+ top: var(--digitv2-spacers-spacer2);
339
+ right: var(--digitv2-spacers-spacer2);
340
340
  }
341
341
 
342
342
  .input-container {
@@ -346,17 +346,17 @@
346
346
  input {
347
347
  max-height: 100%;
348
348
  background-color: transparent;
349
- border: 0.063rem solid theme("digitv2.lightTheme.paper-secondary");
350
- color: theme("digitv2.lightTheme.generic-background");
349
+ border: 0.063rem solid var(--digitv2-lightTheme-paper-secondary);
350
+ color: var(--digitv2-lightTheme-generic-background);
351
351
 
352
352
  ::placeholder {
353
- color: theme("digitv2.lightTheme.generic-background");
353
+ color: var(--digitv2-lightTheme-generic-background);
354
354
  }
355
355
  }
356
356
 
357
357
  .input-container:focus-within {
358
358
  input {
359
- border: 0.063rem solid theme("digitv2.lightTheme.paper-secondary") !important;
359
+ border: 0.063rem solid var(--digitv2-lightTheme-paper-secondary) !important;
360
360
  }
361
361
  }
362
362
  }
@@ -364,37 +364,37 @@
364
364
  ::placeholder {
365
365
  content: attr(placeholder);
366
366
  @include typography-body-s;
367
- font-family: theme("digitv2.fontFamily.sans");
368
- font-style: theme("digitv2.fontStyle.normal");
369
- font-weight: theme("digitv2.fontWeight.regular");
370
- line-height: theme("digitv2.lineHeight.lineheight2");
367
+ font-family: var(--digitv2-fontFamily-sans);
368
+ font-style: var(--digitv2-fontStyle-normal);
369
+ font-weight: var(--digitv2-fontWeight-regular);
370
+ line-height: var(--digitv2-lineHeight-lineheight2);
371
371
 
372
372
  @media (max-aspect-ratio: 9/16) {
373
373
  /* Media query for mobile */
374
- font-size: theme("digitv2.fontSize.body-s.mobile");
374
+ font-size: var( --digitv2-fontSize-body-s-mobile);
375
375
  }
376
376
 
377
377
  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
378
378
  /* Media query for tablets */
379
- font-size: theme("digitv2.fontSize.body-s.tablet");
379
+ font-size: var( --digitv2-fontSize-body-s-tablet);
380
380
  }
381
381
 
382
382
  @media (min-aspect-ratio: 3/4) {
383
383
  /* Media query for desktop */
384
- font-size: theme("digitv2.fontSize.body-s.desktop");
384
+ font-size: var( --digitv2-fontSize-body-s-desktop);
385
385
  }
386
- color: theme("digitv2.lightTheme.generic-background");
386
+ color: var(--digitv2-lightTheme-generic-background);
387
387
  }
388
388
  }
389
389
 
390
390
  .digit-msb-sidebar-bottom {
391
- background-color: theme("digitv2.lightTheme.paper-secondary");
391
+ background-color: var(--digitv2-lightTheme-paper-secondary);
392
392
  z-index: 5;
393
- padding: theme("digitv2.spacers.spacer4");
393
+ padding: var(--digitv2-spacers-spacer4);
394
394
  display: flex;
395
395
  flex-direction: column;
396
- gap: theme("digitv2.spacers.spacer4");
397
- border-top: 0.063rem solid theme("digitv2.lightTheme.generic-divider");
396
+ gap: var(--digitv2-spacers-spacer4);
397
+ border-top: 0.063rem solid var(--digitv2-lightTheme-generic-divider);
398
398
  height: 4rem;
399
399
 
400
400
 
@@ -402,54 +402,54 @@
402
402
  width: 100%;
403
403
 
404
404
  .icon-label-container .digit-button-customIcon {
405
- width: theme("digitv2.spacers.spacer5");
406
- height: theme("digitv2.spacers.spacer5");
405
+ width: var(--digitv2-spacers-spacer5);
406
+ height: var(--digitv2-spacers-spacer5);
407
407
  ;
408
408
  }
409
409
  }
410
410
 
411
411
  &.dark {
412
- background-color: theme("digitv2.lightTheme.primary-2");
412
+ background-color: var(--digitv2-lightTheme-primary-2);
413
413
  }
414
414
  }
415
415
 
416
416
  .digit-icon-msb {
417
- margin-right: theme("digitv2.spacers.spacer3");
418
- width: theme("digitv2.spacers.spacer6");
419
- height: theme("digitv2.spacers.spacer6");
420
- margin-left: theme("digitv2.spacers.spacer6");
417
+ margin-right: var(--digitv2-spacers-spacer3);
418
+ width: var(--digitv2-spacers-spacer6);
419
+ height: var(--digitv2-spacers-spacer6);
420
+ margin-left: var(--digitv2-spacers-spacer6);
421
421
  }
422
422
 
423
423
  .digit-item-label-msb {
424
424
 
425
- font-family: theme("digitv2.fontFamily.sans");
426
- font-style: theme("digitv2.fontStyle.normal");
427
- font-weight: theme("digitv2.fontWeight.regular");
428
- line-height: theme("digitv2.lineHeight.lineheight2");
425
+ font-family: var(--digitv2-fontFamily-sans);
426
+ font-style: var(--digitv2-fontStyle-normal);
427
+ font-weight: var(--digitv2-fontWeight-regular);
428
+ line-height: var(--digitv2-lineHeight-lineheight2);
429
429
 
430
430
  @media (max-aspect-ratio: 9/16) {
431
431
  /* Media query for mobile */
432
- font-size: theme("digitv2.fontSize.body-s.mobile");
432
+ font-size: var( --digitv2-fontSize-body-s-mobile);
433
433
  }
434
434
 
435
435
  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
436
436
  /* Media query for tablets */
437
- font-size: theme("digitv2.fontSize.body-s.tablet");
437
+ font-size: var( --digitv2-fontSize-body-s-tablet);
438
438
  }
439
439
 
440
440
  @media (min-aspect-ratio: 3/4) {
441
441
  /* Media query for desktop */
442
- font-size: theme("digitv2.fontSize.body-s.desktop");
442
+ font-size: var( --digitv2-fontSize-body-s-desktop);
443
443
  }
444
444
 
445
445
  &.withoutIcon{
446
- margin-left: theme("digitv2.spacers.spacer7");
446
+ margin-left: var(--digitv2-spacers-spacer7);
447
447
  }
448
448
  }
449
449
 
450
450
  .digit-expand-icon-msb {
451
- width: theme("digitv2.spacers.spacer6");
452
- height: theme("digitv2.spacers.spacer6");
451
+ width: var(--digitv2-spacers-spacer6);
452
+ height: var(--digitv2-spacers-spacer6);
453
453
  margin-left: auto !important;
454
454
 
455
455
  &.child-level{
@@ -472,7 +472,7 @@
472
472
 
473
473
  .digit-item-child-wrapper-msb {
474
474
  width: 100%;
475
- height: theme("digitv2.spacers.spacer12");
475
+ height: var(--digitv2-spacers-spacer12);
476
476
  display: flex;
477
477
  align-items: center;
478
478
  justify-content: center;
@@ -487,7 +487,7 @@
487
487
  background: #c84c0e1a;
488
488
 
489
489
  .digit-item-label-msb {
490
- color: theme("digitv2.lightTheme.primary-2");
490
+ color: var(--digitv2-lightTheme-primary-2);
491
491
  }
492
492
  }
493
493
 
@@ -502,18 +502,18 @@
502
502
  top: 0.062rem;
503
503
  left: 0;
504
504
  bottom: 0.063rem;
505
- width: theme("digitv2.spacers.spacer2");
506
- background: theme("digitv2.lightTheme.primary-1");
507
- border-top-right-radius: theme("digitv2.spacers.spacer1");
508
- border-bottom-right-radius: theme("digitv2.spacers.spacer1");
505
+ width: var(--digitv2-spacers-spacer2);
506
+ background: var(--digitv2-lightTheme-primary-1);
507
+ border-top-right-radius: var(--digitv2-spacers-spacer1);
508
+ border-bottom-right-radius: var(--digitv2-spacers-spacer1);
509
509
  }
510
510
 
511
511
  .digit-sidebar-item-msb.dark:active,
512
512
  .digit-sidebar-item-msb.dark.selected,
513
513
  .digit-sidebar-item-msb.dark.selectedAsParent {
514
- background: theme("digitv2.lightTheme.primary-1");
514
+ background: var(--digitv2-lightTheme-primary-1);
515
515
  .digit-item-label-msb {
516
- color: theme("digitv2.lightTheme.paper-primary");
516
+ color: var(--digitv2-lightTheme-paper-primary);
517
517
  }
518
518
  }
519
519
 
@@ -528,26 +528,26 @@
528
528
  top: 0.062rem;
529
529
  left: 0;
530
530
  bottom: 0.063rem;
531
- width: theme("digitv2.spacers.spacer2");
532
- background: theme("digitv2.lightTheme.paper-primary");
533
- border-top-right-radius: theme("digitv2.spacers.spacer1");
534
- border-bottom-right-radius: theme("digitv2.spacers.spacer1");
531
+ width: var(--digitv2-spacers-spacer2);
532
+ background: var(--digitv2-lightTheme-paper-primary);
533
+ border-top-right-radius: var(--digitv2-spacers-spacer1);
534
+ border-bottom-right-radius: var(--digitv2-spacers-spacer1);
535
535
  }
536
536
  }
537
537
 
538
538
 
539
539
  .digit-msb-sidebar-items::-webkit-scrollbar {
540
540
  width: 0.375rem;
541
- background-color: theme("digitv2.lightTheme.generic-background");
541
+ background-color: var(--digitv2-lightTheme-generic-background);
542
542
  }
543
543
 
544
544
  .digit-msb-sidebar-items::-webkit-scrollbar-track {
545
- background-color: theme("digitv2.lightTheme.generic-background");
545
+ background-color: var(--digitv2-lightTheme-generic-background);
546
546
  border-radius: 0.563rem;
547
547
  }
548
548
 
549
549
  .digit-msb-sidebar-items::-webkit-scrollbar-thumb {
550
- background-color: theme("digitv2.lightTheme.generic-divider");
550
+ background-color: var(--digitv2-lightTheme-generic-divider);
551
551
  border-radius: 0.563rem;
552
552
  }
553
553