@egovernments/digit-ui-components-css 0.2.0-beta.9 → 0.2.0-rc.16

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 +4 -14685
  2. package/package.json +33 -36
  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 +69 -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 +117 -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 +121 -37
  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 +107 -37
  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 +21 -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 -235
  70. package/dist/index.min.css +0 -6
package/src/digitv2/components/multiSelectDropdownV2.scss CHANGED
@@ -1,4 +1,6 @@
1
- @import url("../index.scss");
1
+ @import './theme-variables.css';
2
+ @import '../typography.scss';
3
+
2
4
  .digit-multiselectdropdown-wrap {
3
5
  margin-bottom: 0.625rem;
4
6
 
@@ -22,37 +24,37 @@
22
24
  .digit-multiselectdropdown-master,
23
25
  .digit-multiselectdropdown-master-active {
24
26
  @apply relative h-10 w-full bg-white;
25
- border: 0.063rem solid theme(digitv2.lightTheme.generic-inputborder);
27
+ border: 0.063rem solid theme("digitv2.lightTheme.generic-inputborder");
26
28
  input[type="text"] {
27
- @extend .typography.body-s;
29
+ @include typography-body-s;
28
30
  @media (max-aspect-ratio: 9/16) {
29
31
  /* Media query for mobile */
30
- font-size: theme(digitv2.fontSize.body-s.mobile);
31
- font-family: theme(digitv2.fontFamily.sans);
32
- font-style: theme(digitv2.fontStyle.normal);
33
- font-weight: theme(digitv2.fontWeight.regular);
34
- line-height: theme(digitv2.lineHeight.lineheight2);
32
+ font-size: theme("digitv2.fontSize.body-s.mobile");
33
+ font-family: theme("digitv2.fontFamily.sans");
34
+ font-style: theme("digitv2.fontStyle.normal");
35
+ font-weight: theme("digitv2.fontWeight.regular");
36
+ line-height: theme("digitv2.lineHeight.lineheight2");
35
37
  }
36
38
 
37
39
  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
38
40
  /* Media query for tablets */
39
- font-size: theme(digitv2.fontSize.body-s.tablet);
40
- font-family: theme(digitv2.fontFamily.sans);
41
- font-style: theme(digitv2.fontStyle.normal);
42
- font-weight: theme(digitv2.fontWeight.regular);
43
- line-height: theme(digitv2.lineHeight.lineheight2);
41
+ font-size: theme("digitv2.fontSize.body-s.tablet");
42
+ font-family: theme("digitv2.fontFamily.sans");
43
+ font-style: theme("digitv2.fontStyle.normal");
44
+ font-weight: theme("digitv2.fontWeight.regular");
45
+ line-height: theme("digitv2.lineHeight.lineheight2");
44
46
  }
45
47
 
46
48
  @media (min-aspect-ratio: 3/4) {
47
49
  /* Media query for desktop */
48
- font-size: theme(digitv2.fontSize.body-s.desktop);
49
- font-family: theme(digitv2.fontFamily.sans);
50
- font-style: theme(digitv2.fontStyle.normal);
51
- font-weight: theme(digitv2.fontWeight.regular);
52
- line-height: theme(digitv2.lineHeight.lineheight2);
50
+ font-size: theme("digitv2.fontSize.body-s.desktop");
51
+ font-family: theme("digitv2.fontFamily.sans");
52
+ font-style: theme("digitv2.fontStyle.normal");
53
+ font-weight: theme("digitv2.fontWeight.regular");
54
+ line-height: theme("digitv2.lineHeight.lineheight2");
53
55
  }
54
56
  @apply absolute top-0 left-0 p-sm min-h-full min-w-full opacity-0;
55
- letter-spacing: theme(digitv2.spacers.spacer0);
57
+ letter-spacing: theme("digitv2.spacers.spacer0");
56
58
  padding-left: 1%;
57
59
  &:focus {
58
60
  @apply outline-none;
@@ -70,7 +72,7 @@
70
72
  &.searchable{
71
73
  input[type="text"]{
72
74
  opacity: 1;
73
- width: calc(100%-24px);
75
+ width: calc(100% - 24px);
74
76
  }
75
77
 
76
78
  .digit-multiselectdropdown-label {
@@ -85,68 +87,68 @@
85
87
  .digit-multiselectdropdown-master {
86
88
  &.disabled {
87
89
  pointer-events: none !important;
88
- border: 0.063rem solid theme(digitv2.lightTheme.generic-divider) !important;
89
- color: theme(digitv2.lightTheme.generic-divider) !important;
90
+ border: 0.063rem solid theme("digitv2.lightTheme.generic-divider") !important;
91
+ color: theme("digitv2.lightTheme.generic-divider") !important;
90
92
  }
91
93
  }
92
94
  .digit-multiselectdropdown-master-active {
93
- border: 0.063rem solid theme(digitv2.lightTheme.primary-1);
95
+ border: 0.063rem solid theme("digitv2.lightTheme.primary-1");
94
96
  }
95
97
  .digit-multiselectdropdown-server {
96
- top: theme(digitv2.spacers.spacer10);
98
+ top: theme("digitv2.spacers.spacer10");
97
99
  @apply absolute z-20 bg-white overflow-x-hidden overflow-y-auto;
98
100
  max-height: 20vmax;
99
- box-shadow: theme(digitv2.spacers.spacer0) 0.063rem 0.275rem theme(digitv2.spacers.spacer0) #00000026;
101
+ box-shadow: theme("digitv2.spacers.spacer0") 0.063rem 0.275rem theme("digitv2.spacers.spacer0") #00000026;
100
102
  width: 100% !important;
101
103
  }
102
104
  .digit-multiselectdropdown-server::-webkit-scrollbar {
103
- width: theme(digitv2.spacers.spacer2);
104
- background-color: theme(digitv2.lightTheme.generic-background);
105
+ width: theme("digitv2.spacers.spacer2");
106
+ background-color: theme("digitv2.lightTheme.generic-background");
105
107
  }
106
108
  .digit-multiselectdropdown-server::-webkit-scrollbar-track {
107
- background-color: theme(digitv2.lightTheme.generic-background);
109
+ background-color: theme("digitv2.lightTheme.generic-background");
108
110
  border-radius: 0.563rem;
109
111
  }
110
112
  .digit-multiselectdropdown-server::-webkit-scrollbar-thumb {
111
- background-color: theme(digitv2.lightTheme.generic-divider);
113
+ background-color: theme("digitv2.lightTheme.generic-divider");
112
114
  border-radius: 0.563rem;
113
115
  }
114
116
  .digit-nested-category {
115
117
  @apply flex items-center flex-shrink-0;
116
- background: theme(digitv2.lightTheme.generic-background);
118
+ background: theme("digitv2.lightTheme.generic-background");
117
119
  height: 2.4375rem;
118
- padding: theme(digitv2.spacers.spacer4) 0.625rem;
120
+ padding: theme("digitv2.spacers.spacer4") 0.625rem;
119
121
  gap: 0.625rem;
120
- margin-top: theme(digitv2.spacers.spacer4);
122
+ margin-top: theme("digitv2.spacers.spacer4");
121
123
  &.selectAll {
122
124
  justify-content: space-between;
123
125
  }
124
126
  }
125
127
  .digit-nested-category:nth-child(-n+2) {
126
- margin-top: theme(digitv2.spacers.spacer0);
128
+ margin-top: theme("digitv2.spacers.spacer0");
127
129
  }
128
130
  .digit-category-name {
129
- @extend .typography.heading-s;
130
- font-family: theme(digitv2.fontFamily.sans);
131
- font-style: theme(digitv2.fontStyle.normal);
132
- font-weight: theme(digitv2.fontWeight.bold);
133
- line-height: theme(digitv2.lineHeight.lineheight1);
131
+ @include typography-heading-s;
132
+ font-family: theme("digitv2.fontFamily.sans");
133
+ font-style: theme("digitv2.fontStyle.normal");
134
+ font-weight: theme("digitv2.fontWeight.bold");
135
+ line-height: theme("digitv2.lineHeight.lineheight1");
134
136
 
135
137
  @media (max-aspect-ratio: 9/16) {
136
138
  /* Media query for mobile */
137
- font-size: theme(digitv2.fontSize.heading-s.mobile);
139
+ font-size: theme("digitv2.fontSize.heading-s.mobile");
138
140
  }
139
141
 
140
142
  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
141
143
  /* Media query for tablets */
142
- font-size: theme(digitv2.fontSize.heading-s.tablet);
144
+ font-size: theme("digitv2.fontSize.heading-s.tablet");
143
145
  }
144
146
 
145
147
  @media (min-aspect-ratio: 3/4) {
146
148
  /* Media query for desktop */
147
- font-size: theme(digitv2.fontSize.heading-s.desktop);
149
+ font-size: theme("digitv2.fontSize.heading-s.desktop");
148
150
  }
149
- color: theme(digitv2.lightTheme.text-primary);
151
+ color: theme("digitv2.lightTheme.text-primary");
150
152
  }
151
153
  .digit-category-selectAll {
152
154
  @apply flex relative;
@@ -154,51 +156,51 @@
154
156
  cursor: pointer !important;
155
157
  align-items: center;
156
158
  .category-selectAll-label {
157
- @extend .typography.body-s;
158
- font-family: theme(digitv2.fontFamily.sans);
159
- font-style: theme(digitv2.fontStyle.normal);
160
- font-weight: theme(digitv2.fontWeight.regular);
161
- line-height: theme(digitv2.lineHeight.lineheight2);
159
+ @include typography-body-s;
160
+ font-family: theme("digitv2.fontFamily.sans");
161
+ font-style: theme("digitv2.fontStyle.normal");
162
+ font-weight: theme("digitv2.fontWeight.regular");
163
+ line-height: theme("digitv2.lineHeight.lineheight2");
162
164
 
163
165
  @media (max-aspect-ratio: 9/16) {
164
166
  /* Media query for mobile */
165
- font-size: theme(digitv2.fontSize.body-s.mobile);
167
+ font-size: theme("digitv2.fontSize.body-s.mobile");
166
168
  }
167
169
 
168
170
  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
169
171
  /* Media query for tablets */
170
- font-size: theme(digitv2.fontSize.body-s.tablet);
172
+ font-size: theme("digitv2.fontSize.body-s.tablet");
171
173
  }
172
174
 
173
175
  @media (min-aspect-ratio: 3/4) {
174
176
  /* Media query for desktop */
175
- font-size: theme(digitv2.fontSize.body-s.desktop);
177
+ font-size: theme("digitv2.fontSize.body-s.desktop");
176
178
  }
177
179
  text-align: left;
178
- color: theme(digitv2.lightTheme.primary-1);
180
+ color: theme("digitv2.lightTheme.primary-1");
179
181
  }
180
182
  input {
181
183
  @apply absolute top-0 left-0 w-full h-full opacity-0 cursor-pointer;
182
- margin: theme(digitv2.spacers.spacer0);
184
+ margin: theme("digitv2.spacers.spacer0");
183
185
  }
184
186
  .digit-multiselectdropodwn-custom-checkbox-selectAll {
185
- height: theme(digitv2.spacers.spacer5);
186
- width: theme(digitv2.spacers.spacer5);
187
- border: 0.063rem solid theme(digitv2.lightTheme.text-secondary);
187
+ height: theme("digitv2.spacers.spacer5");
188
+ width: theme("digitv2.spacers.spacer5");
189
+ border: 0.063rem solid theme("digitv2.lightTheme.text-secondary");
188
190
  svg {
189
191
  @apply opacity-0 z-10;
190
192
  }
191
193
  }
192
194
  input:active~.digit-multiselectdropodwn-custom-checkbox-selectAll,
193
195
  input:checked~.digit-multiselectdropodwn-custom-checkbox-selectAll {
194
- border: 0.125rem solid theme(digitv2.lightTheme.primary-1);
195
- background-color: theme(digitv2.lightTheme.paper-secondary);
196
+ border: 0.125rem solid theme("digitv2.lightTheme.primary-1");
197
+ background-color: theme("digitv2.lightTheme.paper-secondary");
196
198
  }
197
199
  input:active~.digit-multiselectdropodwn-custom-checkbox-selectAll svg,
198
200
  input:checked~.digit-multiselectdropodwn-custom-checkbox-selectAll svg {
199
201
  @apply opacity-100;
200
- width: theme(digitv2.spacers.spacer4);
201
- height: theme(digitv2.spacers.spacer4);
202
+ width: theme("digitv2.spacers.spacer4");
203
+ height: theme("digitv2.spacers.spacer4");
202
204
  }
203
205
  }
204
206
  .digit-multiselectdropodwn-menuitem {
@@ -211,11 +213,11 @@
211
213
  min-height: 2.438rem;
212
214
  .option-des-container {
213
215
  @apply w-full max-w-full overflow-hidden box-border;
214
- margin: 0.594rem theme(digitv2.spacers.spacer0) 0.594rem theme(digitv2.spacers.spacer0);
216
+ margin: 0.594rem theme("digitv2.spacers.spacer0") 0.594rem theme("digitv2.spacers.spacer0");
215
217
  .multiselectdropdown-icon-option {
216
218
  @apply w-full items-center;
217
219
  display: flex !important;
218
- gap: theme(digitv2.spacers.spacer1);
220
+ gap: theme("digitv2.spacers.spacer1");
219
221
  svg {
220
222
  flex-shrink: 0;
221
223
  }
@@ -229,7 +231,7 @@
229
231
  bottom: 0;
230
232
  left: 0.625rem;
231
233
  right: 0.625rem;
232
- border-bottom: 0.063rem solid theme(digitv2.lightTheme.generic-divider);
234
+ border-bottom: 0.063rem solid theme("digitv2.lightTheme.generic-divider");
233
235
  }
234
236
  &:not(.selectAll):hover,
235
237
  &:not(.selectAll):active {
@@ -239,44 +241,44 @@
239
241
  }
240
242
  }
241
243
  &:not(.nestedmultiselect, .keyChange, .checked):not(:active):not(:hover):nth-of-type(even) {
242
- background: theme(digitv2.lightTheme.paper-secondary);
244
+ background: theme("digitv2.lightTheme.paper-secondary");
243
245
  }
244
246
  &:hover,
245
247
  &.keyChange {
246
- background: theme(digitv2.lightTheme.primary-bg);
247
- border: 0.031rem solid theme(digitv2.lightTheme.primary-1);
248
+ background: theme("digitv2.lightTheme.primary-bg");
249
+ border: 0.031rem solid theme("digitv2.lightTheme.primary-1");
248
250
  }
249
251
  &:active,
250
252
  &:active:hover {
251
- background: theme(digitv2.lightTheme.primary-1);
252
- border: 0.031rem solid theme(digitv2.lightTheme.primary-1);
253
+ background: theme("digitv2.lightTheme.primary-1");
254
+ border: 0.031rem solid theme("digitv2.lightTheme.primary-1");
253
255
  p {
254
- @extend .typography.heading-s;
255
- font-family: theme(digitv2.fontFamily.sans);
256
- font-style: theme(digitv2.fontStyle.normal);
257
- font-weight: theme(digitv2.fontWeight.bold);
258
- line-height: theme(digitv2.lineHeight.lineheight1);
256
+ @include typography-heading-s;
257
+ font-family: theme("digitv2.fontFamily.sans");
258
+ font-style: theme("digitv2.fontStyle.normal");
259
+ font-weight: theme("digitv2.fontWeight.bold");
260
+ line-height: theme("digitv2.lineHeight.lineheight1");
259
261
 
260
262
  @media (max-aspect-ratio: 9/16) {
261
263
  /* Media query for mobile */
262
- font-size: theme(digitv2.fontSize.heading-s.mobile);
264
+ font-size: theme("digitv2.fontSize.heading-s.mobile");
263
265
  }
264
266
 
265
267
  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
266
268
  /* Media query for tablets */
267
- font-size: theme(digitv2.fontSize.heading-s.tablet);
269
+ font-size: theme("digitv2.fontSize.heading-s.tablet");
268
270
  }
269
271
 
270
272
  @media (min-aspect-ratio: 3/4) {
271
273
  /* Media query for desktop */
272
- font-size: theme(digitv2.fontSize.heading-s.desktop);
274
+ font-size: theme("digitv2.fontSize.heading-s.desktop");
273
275
  }
274
- color: theme(digitv2.lightTheme.paper-primary);
276
+ color: theme("digitv2.lightTheme.paper-primary");
275
277
  }
276
278
  .digit-label {
277
279
  &.selectAll {
278
- @extend .typography.body-l;
279
- color: theme(digitv2.lightTheme.primary-1);
280
+ @include typography-body-l;
281
+ color: theme("digitv2.lightTheme.primary-1");
280
282
  }
281
283
  }
282
284
  }
@@ -285,68 +287,68 @@
285
287
  @apply absolute min-w-full opacity-0 z-20 cursor-pointer;
286
288
  }
287
289
  p {
288
- @extend .typography.body-s;
289
- @apply w-full overflow-hidden whitespace-no-wrap max-w-full;
290
- font-family: theme(digitv2.fontFamily.sans);
291
- font-style: theme(digitv2.fontStyle.normal);
292
- font-weight: theme(digitv2.fontWeight.regular);
293
- line-height: theme(digitv2.lineHeight.lineheight2);
290
+ @include typography-body-s;
291
+ @apply w-full overflow-hidden whitespace-nowrap max-w-full;
292
+ font-family: theme("digitv2.fontFamily.sans");
293
+ font-style: theme("digitv2.fontStyle.normal");
294
+ font-weight: theme("digitv2.fontWeight.regular");
295
+ line-height: theme("digitv2.lineHeight.lineheight2");
294
296
 
295
297
  @media (max-aspect-ratio: 9/16) {
296
298
  /* Media query for mobile */
297
- font-size: theme(digitv2.fontSize.body-s.mobile);
299
+ font-size: theme("digitv2.fontSize.body-s.mobile");
298
300
  }
299
301
 
300
302
  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
301
303
  /* Media query for tablets */
302
- font-size: theme(digitv2.fontSize.body-s.tablet);
304
+ font-size: theme("digitv2.fontSize.body-s.tablet");
303
305
  }
304
306
 
305
307
  @media (min-aspect-ratio: 3/4) {
306
308
  /* Media query for desktop */
307
- font-size: theme(digitv2.fontSize.body-s.desktop);
309
+ font-size: theme("digitv2.fontSize.body-s.desktop");
308
310
  }
309
- color: theme(digitv2.lightTheme.text-primary);
310
- margin: theme(digitv2.spacers.spacer0);
311
+ color: theme("digitv2.lightTheme.text-primary");
312
+ margin: theme("digitv2.spacers.spacer0");
311
313
  text-overflow: ellipsis;
312
314
  }
313
315
  &.checked {
314
- background: theme(digitv2.lightTheme.primary-1);
316
+ background: theme("digitv2.lightTheme.primary-1");
315
317
  p {
316
- @extend .typography.heading-s;
317
- font-family: theme(digitv2.fontFamily.sans);
318
- font-style: theme(digitv2.fontStyle.normal);
319
- font-weight: theme(digitv2.fontWeight.bold);
320
- line-height: theme(digitv2.lineHeight.lineheight1);
318
+ @include typography-heading-s;
319
+ font-family: theme("digitv2.fontFamily.sans");
320
+ font-style: theme("digitv2.fontStyle.normal");
321
+ font-weight: theme("digitv2.fontWeight.bold");
322
+ line-height: theme("digitv2.lineHeight.lineheight1");
321
323
 
322
324
  @media (max-aspect-ratio: 9/16) {
323
325
  /* Media query for mobile */
324
- font-size: theme(digitv2.fontSize.heading-s.mobile);
326
+ font-size: theme("digitv2.fontSize.heading-s.mobile");
325
327
  }
326
328
 
327
329
  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
328
330
  /* Media query for tablets */
329
- font-size: theme(digitv2.fontSize.heading-s.tablet);
331
+ font-size: theme("digitv2.fontSize.heading-s.tablet");
330
332
  }
331
333
 
332
334
  @media (min-aspect-ratio: 3/4) {
333
335
  /* Media query for desktop */
334
- font-size: theme(digitv2.fontSize.heading-s.desktop);
336
+ font-size: theme("digitv2.fontSize.heading-s.desktop");
335
337
  }
336
- color: theme(digitv2.lightTheme.paper-primary);
338
+ color: theme("digitv2.lightTheme.paper-primary");
337
339
  }
338
340
  .digit-label {
339
341
  &.selectAll {
340
- @extend .typography.body-l;
341
- color: theme(digitv2.lightTheme.primary-1);
342
+ @include typography-body-l;
343
+ color: theme("digitv2.lightTheme.primary-1");
342
344
  }
343
345
  }
344
346
  }
345
347
  .digit-multiselectdropodwn-custom-checkbox,
346
348
  .digit-multiselectdropodwn-custom-checkbox-selectAll {
347
- height: theme(digitv2.spacers.spacer5);
348
- width: theme(digitv2.spacers.spacer5);
349
- border: 0.063rem solid theme(digitv2.lightTheme.text-secondary);
349
+ height: theme("digitv2.spacers.spacer5");
350
+ width: theme("digitv2.spacers.spacer5");
351
+ border: 0.063rem solid theme("digitv2.lightTheme.text-secondary");
350
352
  margin: 0.594rem 0.75rem 0.594rem 0.625rem;
351
353
  svg {
352
354
  @apply opacity-0 z-10;
@@ -354,25 +356,25 @@
354
356
  }
355
357
  input:active~.digit-multiselectdropodwn-custom-checkbox,
356
358
  input:checked~.digit-multiselectdropodwn-custom-checkbox {
357
- border: 0.125rem solid theme(digitv2.lightTheme.paper-primary);
358
- background-color: theme(digitv2.lightTheme.primary-1);
359
+ border: 0.125rem solid theme("digitv2.lightTheme.paper-primary");
360
+ background-color: theme("digitv2.lightTheme.primary-1");
359
361
  }
360
362
  input:active~.digit-multiselectdropodwn-custom-checkbox-selectAll,
361
363
  input:checked~.digit-multiselectdropodwn-custom-checkbox-selectAll {
362
- border: 0.125rem solid theme(digitv2.lightTheme.primary-1);
363
- background-color: theme(digitv2.lightTheme.paper-secondary);
364
+ border: 0.125rem solid theme("digitv2.lightTheme.primary-1");
365
+ background-color: theme("digitv2.lightTheme.paper-secondary");
364
366
  }
365
367
  input:active~.digit-multiselectdropodwn-custom-checkbox svg,
366
368
  input:checked~.digit-multiselectdropodwn-custom-checkbox svg,
367
369
  input:active~.digit-multiselectdropodwn-custom-checkbox-selectAll svg,
368
370
  input:checked~.digit-multiselectdropodwn-custom-checkbox-selectAll svg {
369
371
  @apply opacity-100;
370
- width: theme(digitv2.spacers.spacer4);
371
- height: theme(digitv2.spacers.spacer4);
372
+ width: theme("digitv2.spacers.spacer4");
373
+ height: theme("digitv2.spacers.spacer4");
372
374
  }
373
375
  &.nestedtextmultiselect {
374
- padding: theme(digitv2.spacers.spacer2) theme(digitv2.spacers.spacer4);
375
- gap: theme(digitv2.spacers.spacer3);
376
+ padding: theme("digitv2.spacers.spacer2") theme("digitv2.spacers.spacer4");
377
+ gap: theme("digitv2.spacers.spacer3");
376
378
  align-items: flex-start !important;
377
379
  &:not(.selectAll) {
378
380
  min-height: 4.75rem;
@@ -383,20 +385,20 @@
383
385
  .option-des-container {
384
386
  @apply flex flex-col justify-center items-start;
385
387
  width: 100% !important;
386
- margin: theme(digitv2.spacers.spacer0);
388
+ margin: theme("digitv2.spacers.spacer0");
387
389
  p {
388
- @extend .typography.body-l;
389
- color: theme(digitv2.lightTheme.text-secondary);
390
- padding: theme(digitv2.spacers.spacer0);
391
- margin-bottom: theme(digitv2.spacers.spacer0);
392
- margin-top: theme(digitv2.spacers.spacer0);
390
+ @include typography-body-l;
391
+ color: theme("digitv2.lightTheme.text-secondary");
392
+ padding: theme("digitv2.spacers.spacer0");
393
+ margin-bottom: theme("digitv2.spacers.spacer0");
394
+ margin-top: theme("digitv2.spacers.spacer0");
393
395
  }
394
396
  .option-description {
395
- color: theme(digitv2.lightTheme.text-secondary);
396
- font-family: theme(digitv2.fontFamily.sans);
397
- font-size: theme(digitv2.spacers.spacer3);
398
- font-style: theme(digitv2.fontStyle.normal);
399
- font-weight: theme(digitv2.fontWeight.regular);
397
+ color: theme("digitv2.lightTheme.text-secondary");
398
+ font-family: theme("digitv2.fontFamily.sans");
399
+ font-size: theme("digitv2.spacers.spacer3");
400
+ font-style: theme("digitv2.fontStyle.normal");
401
+ font-weight: theme("digitv2.fontWeight.regular");
400
402
  line-height: 1.125rem;
401
403
  }
402
404
  .svg {
@@ -404,87 +406,87 @@
404
406
  }
405
407
  }
406
408
  .digit-multiselectdropodwn-custom-checkbox {
407
- margin: theme(digitv2.spacers.spacer0);
409
+ margin: theme("digitv2.spacers.spacer0");
408
410
  margin-top: 0.125rem;
409
411
  }
410
412
  &:active,
411
413
  &.checked {
412
414
  .option-description,
413
415
  p {
414
- color: theme(digitv2.lightTheme.paper-primary);
416
+ color: theme("digitv2.lightTheme.paper-primary");
415
417
  }
416
418
  .option-des-container {
417
419
  p {
418
- @extend .typography.heading-s;
419
- font-family: theme(digitv2.fontFamily.sans);
420
- font-style: theme(digitv2.fontStyle.normal);
421
- font-weight: theme(digitv2.fontWeight.bold);
422
- line-height: theme(digitv2.lineHeight.lineheight1);
420
+ @include typography-heading-s;
421
+ font-family: theme("digitv2.fontFamily.sans");
422
+ font-style: theme("digitv2.fontStyle.normal");
423
+ font-weight: theme("digitv2.fontWeight.bold");
424
+ line-height: theme("digitv2.lineHeight.lineheight1");
423
425
 
424
426
  @media (max-aspect-ratio: 9/16) {
425
427
  /* Media query for mobile */
426
- font-size: theme(digitv2.fontSize.heading-s.mobile);
428
+ font-size: theme("digitv2.fontSize.heading-s.mobile");
427
429
  }
428
430
 
429
431
  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
430
432
  /* Media query for tablets */
431
- font-size: theme(digitv2.fontSize.heading-s.tablet);
433
+ font-size: theme("digitv2.fontSize.heading-s.tablet");
432
434
  }
433
435
 
434
436
  @media (min-aspect-ratio: 3/4) {
435
437
  /* Media query for desktop */
436
- font-size: theme(digitv2.fontSize.heading-s.desktop);
438
+ font-size: theme("digitv2.fontSize.heading-s.desktop");
437
439
  }
438
440
  }
439
441
  }
440
442
  .digit-multiselectdropodwn-custom-checkbox {
441
- margin-top: theme(digitv2.spacers.spacer0);
443
+ margin-top: theme("digitv2.spacers.spacer0");
442
444
  }
443
445
  }
444
446
  &:active {
445
- background: theme(digitv2.lightTheme.primary-1);
447
+ background: theme("digitv2.lightTheme.primary-1");
446
448
  }
447
449
  .digit-multiselectdropodwn-custom-checkbox-selectAll {
448
- margin: theme(digitv2.spacers.spacer0);
450
+ margin: theme("digitv2.spacers.spacer0");
449
451
  margin-top: 0.125rem;
450
452
  }
451
453
  }
452
454
  &.selectAll {
453
- background-color: theme(digitv2.lightTheme.paper-secondary) !important;
454
- border: 0.063rem solid theme(digitv2.lightTheme.generic-divider) !important;
455
+ background-color: theme("digitv2.lightTheme.paper-secondary") !important;
456
+ border: 0.063rem solid theme("digitv2.lightTheme.generic-divider") !important;
455
457
  }
456
458
  .digit-label {
457
459
  &.selectAll {
458
- @extend .typography.body-l;
459
- color: theme(digitv2.lightTheme.primary-1);
460
+ @include typography-body-l;
461
+ color: theme("digitv2.lightTheme.primary-1");
460
462
  }
461
463
  }
462
464
  &.unsuccessfulresults {
463
- background-color: theme(digitv2.lightTheme.paper-secondary);
465
+ background-color: theme("digitv2.lightTheme.paper-secondary");
464
466
  pointer-events: none;
465
467
  span {
466
- @extend .typography.body-s;
467
- font-family: theme(digitv2.fontFamily.sans);
468
- font-style: theme(digitv2.fontStyle.normal);
469
- font-weight: theme(digitv2.fontWeight.regular);
470
- line-height: theme(digitv2.lineHeight.lineheight2);
471
- padding-left: theme(digitv2.spacers.spacer3);
468
+ @include typography-body-s;
469
+ font-family: theme("digitv2.fontFamily.sans");
470
+ font-style: theme("digitv2.fontStyle.normal");
471
+ font-weight: theme("digitv2.fontWeight.regular");
472
+ line-height: theme("digitv2.lineHeight.lineheight2");
473
+ padding-left: theme("digitv2.spacers.spacer3");
472
474
 
473
475
  @media (max-aspect-ratio: 9/16) {
474
476
  /* Media query for mobile */
475
- font-size: theme(digitv2.fontSize.body-s.mobile);
477
+ font-size: theme("digitv2.fontSize.body-s.mobile");
476
478
  }
477
479
 
478
480
  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
479
481
  /* Media query for tablets */
480
- font-size: theme(digitv2.fontSize.body-s.tablet);
482
+ font-size: theme("digitv2.fontSize.body-s.tablet");
481
483
  }
482
484
 
483
485
  @media (min-aspect-ratio: 3/4) {
484
486
  /* Media query for desktop */
485
- font-size: theme(digitv2.fontSize.body-s.desktop);
487
+ font-size: theme("digitv2.fontSize.body-s.desktop");
486
488
  }
487
- color: theme(digitv2.lightTheme.text-disabled);
489
+ color: theme("digitv2.lightTheme.text-disabled");
488
490
  }
489
491
  }
490
492
  }
@@ -495,36 +497,36 @@
495
497
  .digit-multiselectdropdown-master-active {
496
498
  .digit-multiselectdropdown-label {
497
499
  p {
498
- @extend .typography.body-s;
500
+ @include typography-body-s;
499
501
  @media (max-aspect-ratio: 9/16) {
500
502
  /* Media query for mobile */
501
- font-size: theme(digitv2.fontSize.body-s.mobile);
502
- font-family: theme(digitv2.fontFamily.sans);
503
- font-style: theme(digitv2.fontStyle.normal);
504
- font-weight: theme(digitv2.fontWeight.regular);
505
- line-height: theme(digitv2.lineHeight.lineheight2);
503
+ font-size: theme("digitv2.fontSize.body-s.mobile");
504
+ font-family: theme("digitv2.fontFamily.sans");
505
+ font-style: theme("digitv2.fontStyle.normal");
506
+ font-weight: theme("digitv2.fontWeight.regular");
507
+ line-height: theme("digitv2.lineHeight.lineheight2");
506
508
  }
507
509
 
508
510
  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
509
511
  /* Media query for tablets */
510
- font-size: theme(digitv2.fontSize.body-s.tablet);
511
- font-family: theme(digitv2.fontFamily.sans);
512
- font-style: theme(digitv2.fontStyle.normal);
513
- font-weight: theme(digitv2.fontWeight.regular);
514
- line-height: theme(digitv2.lineHeight.lineheight2);
512
+ font-size: theme("digitv2.fontSize.body-s.tablet");
513
+ font-family: theme("digitv2.fontFamily.sans");
514
+ font-style: theme("digitv2.fontStyle.normal");
515
+ font-weight: theme("digitv2.fontWeight.regular");
516
+ line-height: theme("digitv2.lineHeight.lineheight2");
515
517
  }
516
518
 
517
519
  @media (min-aspect-ratio: 3/4) {
518
520
  /* Media query for desktop */
519
- font-size: theme(digitv2.fontSize.body-s.desktop);
520
- font-family: theme(digitv2.fontFamily.sans);
521
- font-style: theme(digitv2.fontStyle.normal);
522
- font-weight: theme(digitv2.fontWeight.regular);
523
- line-height: theme(digitv2.lineHeight.lineheight2);
521
+ font-size: theme("digitv2.fontSize.body-s.desktop");
522
+ font-family: theme("digitv2.fontFamily.sans");
523
+ font-style: theme("digitv2.fontStyle.normal");
524
+ font-weight: theme("digitv2.fontWeight.regular");
525
+ line-height: theme("digitv2.lineHeight.lineheight2");
524
526
  }
525
527
  white-space: pre;
526
528
  margin: auto;
527
- margin-left: theme(digitv2.spacers.spacer0);
529
+ margin-left: theme("digitv2.spacers.spacer0");
528
530
  text-align: left;
529
531
  }
530
532
  }