@egovernments/digit-ui-components-css 0.2.3 → 2.0.0-dev-01

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