@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/selectDropdownV2.scss CHANGED
@@ -1,3 +1,6 @@
1
+ @import './theme-variables.css';
2
+ @import '../typography.scss';
3
+
1
4
  .digit-dropdown-employee-select-wrap {
2
5
  @apply w-full relative;
3
6
  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
@@ -16,51 +19,51 @@
16
19
  .digit-dropdown-select {
17
20
  @extend .light-input-border;
18
21
  @apply relative block w-full h-10 bg-white;
19
- border: 0.063rem solid theme(digitv2.lightTheme.text-secondary);
22
+ border: 0.063rem solid theme("digitv2.lightTheme.text-secondary");
20
23
  &.digit-field-error {
21
24
  border: 0.063rem solid;
22
- border-color: theme(digitv2.lightTheme.alert-error);
25
+ border-color: theme("digitv2.lightTheme.alert-error");
23
26
  }
24
27
  &.disabled {
25
28
  pointer-events: none !important;
26
- border: 0.063rem solid theme(digitv2.lightTheme.generic-divider) !important;
27
- color: theme(digitv2.lightTheme.generic-divider) !important;
29
+ border: 0.063rem solid theme("digitv2.lightTheme.generic-divider") !important;
30
+ color: theme("digitv2.lightTheme.generic-divider") !important;
28
31
  }
29
32
  input[type="text"] {
30
- @extend .typography.body-s;
33
+ @include typography-body-s;
31
34
  @media (max-aspect-ratio: 9/16) {
32
35
  /* Media query for mobile */
33
- font-size: theme(digitv2.fontSize.body-s.mobile);
34
- font-family: theme(digitv2.fontFamily.sans);
35
- font-style: theme(digitv2.fontStyle.normal);
36
- font-weight: theme(digitv2.fontWeight.regular);
37
- line-height: theme(digitv2.lineHeight.lineheight2);
36
+ font-size: theme("digitv2.fontSize.body-s.mobile");
37
+ font-family: theme("digitv2.fontFamily.sans");
38
+ font-style: theme("digitv2.fontStyle.normal");
39
+ font-weight: theme("digitv2.fontWeight.regular");
40
+ line-height: theme("digitv2.lineHeight.lineheight2");
38
41
  }
39
42
 
40
43
  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
41
44
  /* Media query for tablets */
42
- font-size: theme(digitv2.fontSize.body-s.tablet);
43
- font-family: theme(digitv2.fontFamily.sans);
44
- font-style: theme(digitv2.fontStyle.normal);
45
- font-weight: theme(digitv2.fontWeight.regular);
46
- line-height: theme(digitv2.lineHeight.lineheight2);
45
+ font-size: theme("digitv2.fontSize.body-s.tablet");
46
+ font-family: theme("digitv2.fontFamily.sans");
47
+ font-style: theme("digitv2.fontStyle.normal");
48
+ font-weight: theme("digitv2.fontWeight.regular");
49
+ line-height: theme("digitv2.lineHeight.lineheight2");
47
50
  }
48
51
 
49
52
  @media (min-aspect-ratio: 3/4) {
50
53
  /* Media query for desktop */
51
- font-size: theme(digitv2.fontSize.body-s.desktop);
52
- font-family: theme(digitv2.fontFamily.sans);
53
- font-style: theme(digitv2.fontStyle.normal);
54
- font-weight: theme(digitv2.fontWeight.regular);
55
- line-height: theme(digitv2.lineHeight.lineheight2);
54
+ font-size: theme("digitv2.fontSize.body-s.desktop");
55
+ font-family: theme("digitv2.fontFamily.sans");
56
+ font-style: theme("digitv2.fontStyle.normal");
57
+ font-weight: theme("digitv2.fontWeight.regular");
58
+ line-height: theme("digitv2.lineHeight.lineheight2");
56
59
  }
57
60
  @apply absolute z-10 h-full outline-none;
58
- width:calc(100%- (theme(digitv2.spacers.spacer7)));
61
+ width:calc(100% - (theme("digitv2.spacers.spacer7")));
59
62
  background-color: transparent;
60
- padding-top:theme(digitv2.spacers.spacer2);
61
- padding-bottom: theme(digitv2.spacers.spacer2);
62
- padding-left:theme(digitv2.spacers.spacer3);
63
- color: theme(digitv2.lightTheme.text-primary);
63
+ padding-top:theme("digitv2.spacers.spacer2");
64
+ padding-bottom: theme("digitv2.spacers.spacer2");
65
+ padding-left:theme("digitv2.spacers.spacer3");
66
+ color: theme("digitv2.lightTheme.text-primary");
64
67
  }
65
68
  p {
66
69
  @extend .light-text-color-primary;
@@ -76,42 +79,42 @@
76
79
  }
77
80
  .digit-dropdown-select-active {
78
81
  @apply relative block w-full h-10 bg-white;
79
- border: 0.063rem solid theme(digitv2.lightTheme.primary-1);
82
+ border: 0.063rem solid theme("digitv2.lightTheme.primary-1");
80
83
  input[type="text"] {
81
- @extend .typography.body-s;
84
+ @include typography-body-s;
82
85
  @media (max-aspect-ratio: 9/16) {
83
86
  /* Media query for mobile */
84
- font-size: theme(digitv2.fontSize.body-s.mobile);
85
- font-family: theme(digitv2.fontFamily.sans);
86
- font-style: theme(digitv2.fontStyle.normal);
87
- font-weight: theme(digitv2.fontWeight.regular);
88
- line-height: theme(digitv2.lineHeight.lineheight2);
87
+ font-size: theme("digitv2.fontSize.body-s.mobile");
88
+ font-family: theme("digitv2.fontFamily.sans");
89
+ font-style: theme("digitv2.fontStyle.normal");
90
+ font-weight: theme("digitv2.fontWeight.regular");
91
+ line-height: theme("digitv2.lineHeight.lineheight2");
89
92
  }
90
93
 
91
94
  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
92
95
  /* Media query for tablets */
93
- font-size: theme(digitv2.fontSize.body-s.tablet);
94
- font-family: theme(digitv2.fontFamily.sans);
95
- font-style: theme(digitv2.fontStyle.normal);
96
- font-weight: theme(digitv2.fontWeight.regular);
97
- line-height: theme(digitv2.lineHeight.lineheight2);
96
+ font-size: theme("digitv2.fontSize.body-s.tablet");
97
+ font-family: theme("digitv2.fontFamily.sans");
98
+ font-style: theme("digitv2.fontStyle.normal");
99
+ font-weight: theme("digitv2.fontWeight.regular");
100
+ line-height: theme("digitv2.lineHeight.lineheight2");
98
101
  }
99
102
 
100
103
  @media (min-aspect-ratio: 3/4) {
101
104
  /* Media query for desktop */
102
- font-size: theme(digitv2.fontSize.body-s.desktop);
103
- font-family: theme(digitv2.fontFamily.sans);
104
- font-style: theme(digitv2.fontStyle.normal);
105
- font-weight: theme(digitv2.fontWeight.regular);
106
- line-height: theme(digitv2.lineHeight.lineheight2);
105
+ font-size: theme("digitv2.fontSize.body-s.desktop");
106
+ font-family: theme("digitv2.fontFamily.sans");
107
+ font-style: theme("digitv2.fontStyle.normal");
108
+ font-weight: theme("digitv2.fontWeight.regular");
109
+ line-height: theme("digitv2.lineHeight.lineheight2");
107
110
  }
108
111
  @apply absolute z-10 h-full outline-none;
109
- width:calc(100%- (theme(digitv2.spacers.spacer7)));
112
+ width:calc(100% - (theme("digitv2.spacers.spacer7")));
110
113
  background-color: transparent;
111
- padding-top: theme(digitv2.spacers.spacer2);
112
- padding-bottom: theme(digitv2.spacers.spacer2);
113
- padding-left: theme(digitv2.spacers.spacer3);
114
- color: theme(digitv2.lightTheme.text-primary);
114
+ padding-top: theme("digitv2.spacers.spacer2");
115
+ padding-bottom: theme("digitv2.spacers.spacer2");
116
+ padding-left: theme("digitv2.spacers.spacer3");
117
+ color: theme("digitv2.lightTheme.text-primary");
115
118
  }
116
119
  p {
117
120
  @extend .light-text-color-primary;
@@ -129,7 +132,7 @@
129
132
  }
130
133
  .digit-dropdown-options-card {
131
134
  width: 100% !important;
132
- box-shadow: theme(digitv2.spacers.spacer0) 0.063rem 0.275rem theme(digitv2.spacers.spacer0) #00000026;
135
+ box-shadow: theme("digitv2.spacers.spacer0") 0.063rem 0.275rem theme("digitv2.spacers.spacer0") #00000026;
133
136
  max-height: 20vmax;
134
137
  @apply absolute z-20 bg-white max-w-full overflow-y-auto overflow-x-hidden;
135
138
  p {
@@ -151,58 +154,58 @@
151
154
  }
152
155
  }
153
156
  .digit-dropdown-options-card::-webkit-scrollbar {
154
- width: theme(digitv2.spacers.spacer2);
155
- background-color: theme(digitv2.lightTheme.generic-background);
157
+ width: theme("digitv2.spacers.spacer2");
158
+ background-color: theme("digitv2.lightTheme.generic-background");
156
159
  }
157
160
  .digit-dropdown-options-card::-webkit-scrollbar-track {
158
- background-color: theme(digitv2.lightTheme.generic-background);
161
+ background-color: theme("digitv2.lightTheme.generic-background");
159
162
  border-radius: 0.563rem;
160
163
  }
161
164
  .digit-dropdown-options-card::-webkit-scrollbar-thumb {
162
- background-color: theme(digitv2.lightTheme.generic-divider);
165
+ background-color: theme("digitv2.lightTheme.generic-divider");
163
166
  border-radius: 0.563rem;
164
167
  }
165
168
  .digit-nested-category {
166
169
  @apply flex items-center flex-shrink-0;
167
- background: theme(digitv2.lightTheme.generic-background);
170
+ background: theme("digitv2.lightTheme.generic-background");
168
171
  height: 2.4375rem;
169
- padding: theme(digitv2.spacers.spacer4) 0.625rem;
172
+ padding: theme("digitv2.spacers.spacer4") 0.625rem;
170
173
  gap: 0.625rem;
171
174
  }
172
175
  .digit-nested-category:not(:first-child) {
173
- margin-top: theme(digitv2.spacers.spacer4);
176
+ margin-top: theme("digitv2.spacers.spacer4");
174
177
  }
175
178
  .digit-category-name {
176
- @extend .typography.heading-s;
177
- @apply flex items-center overflow-hidden whitespace-no-wrap;
178
- color: theme(digitv2.lightTheme.text-primary);
179
- gap: theme(digitv2.spacers.spacer1);
180
- font-family: theme(digitv2.fontFamily.sans);
181
- font-style: theme(digitv2.fontStyle.normal);
182
- font-weight: theme(digitv2.fontWeight.bold);
183
- line-height: theme(digitv2.lineHeight.lineheight1);
179
+ @include typography-heading-s;
180
+ @apply flex items-center overflow-hidden whitespace-nowrap;
181
+ color: theme("digitv2.lightTheme.text-primary");
182
+ gap: theme("digitv2.spacers.spacer1");
183
+ font-family: theme("digitv2.fontFamily.sans");
184
+ font-style: theme("digitv2.fontStyle.normal");
185
+ font-weight: theme("digitv2.fontWeight.bold");
186
+ line-height: theme("digitv2.lineHeight.lineheight1");
184
187
 
185
188
  @media (max-aspect-ratio: 9/16) {
186
189
  /* Media query for mobile */
187
- font-size: theme(digitv2.fontSize.heading-s.mobile);
190
+ font-size: theme("digitv2.fontSize.heading-s.mobile");
188
191
  }
189
192
 
190
193
  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
191
194
  /* Media query for tablets */
192
- font-size: theme(digitv2.fontSize.heading-s.tablet);
195
+ font-size: theme("digitv2.fontSize.heading-s.tablet");
193
196
  }
194
197
 
195
198
  @media (min-aspect-ratio: 3/4) {
196
199
  /* Media query for desktop */
197
- font-size: theme(digitv2.fontSize.heading-s.desktop);
200
+ font-size: theme("digitv2.fontSize.heading-s.desktop");
198
201
  }
199
202
  }
200
203
  .digit-dropdown-item {
201
204
  @apply flex flex-row;
202
- padding: theme(digitv2.spacers.spacer3);
205
+ padding: theme("digitv2.spacers.spacer3");
203
206
  gap: 0.625rem;
204
207
  min-height: 2.438rem;
205
- color: theme(digitv2.lightTheme.text-primary) !important;
208
+ color: theme("digitv2.lightTheme.text-primary") !important;
206
209
  .profile-icon-container {
207
210
  flex-shrink: 0;
208
211
  border-radius: 4.5rem;
@@ -217,47 +220,47 @@
217
220
  .icon-option{
218
221
  @apply w-full items-center;
219
222
  display: flex !important;
220
- gap:theme(digitv2.spacers.spacer1);
223
+ gap:theme("digitv2.spacers.spacer1");
221
224
  svg{
222
225
  flex-shrink: 0;
223
226
  }
224
227
  }
225
228
  .main-option {
226
- @extend .typography.body-s;
227
- font-family: theme(digitv2.fontFamily.sans);
228
- font-style: theme(digitv2.fontStyle.normal);
229
- font-weight: theme(digitv2.fontWeight.regular);
230
- line-height: theme(digitv2.lineHeight.lineheight2);
229
+ @include typography-body-s;
230
+ font-family: theme("digitv2.fontFamily.sans");
231
+ font-style: theme("digitv2.fontStyle.normal");
232
+ font-weight: theme("digitv2.fontWeight.regular");
233
+ line-height: theme("digitv2.lineHeight.lineheight2");
231
234
 
232
235
  @media (max-aspect-ratio: 9/16) {
233
236
  /* Media query for mobile */
234
- font-size: theme(digitv2.fontSize.body-s.mobile);
237
+ font-size: theme("digitv2.fontSize.body-s.mobile");
235
238
  }
236
239
 
237
240
  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
238
241
  /* Media query for tablets */
239
- font-size: theme(digitv2.fontSize.body-s.tablet);
242
+ font-size: theme("digitv2.fontSize.body-s.tablet");
240
243
  }
241
244
 
242
245
  @media (min-aspect-ratio: 3/4) {
243
246
  /* Media query for desktop */
244
- font-size: theme(digitv2.fontSize.body-s.desktop);
247
+ font-size: theme("digitv2.fontSize.body-s.desktop");
245
248
  }
246
- @apply whitespace-no-wrap w-full max-w-full overflow-hidden;
249
+ @apply whitespace-nowrap w-full max-w-full overflow-hidden;
247
250
  text-overflow: ellipsis;
248
251
  &.nestedtextdropdown,
249
252
  &.profilenestedtext {
250
- @extend .typography.body-l;
251
- color: theme(digitv2.lightTheme.text-secondary);
253
+ @include typography-body-l;
254
+ color: theme("digitv2.lightTheme.text-secondary");
252
255
  }
253
256
  }
254
257
  .option-description {
255
- @extend .typography.body-xs;
256
- color: theme(digitv2.lightTheme.text-secondary);
258
+ @include typography-body-xs;
259
+ color: theme("digitv2.lightTheme.text-secondary");
257
260
  }
258
261
  }
259
262
  &:not(.nesteddropdown, .treedropdown):not(:active):nth-of-type(even) {
260
- background: theme(digitv2.lightTheme.paper-secondary);
263
+ background: theme("digitv2.lightTheme.paper-secondary");
261
264
  }
262
265
  &:not(.unsuccessfulresults).nesteddropdown {
263
266
  position: relative;
@@ -268,7 +271,7 @@
268
271
  bottom: 0;
269
272
  left: 0.625rem;
270
273
  right: 0.635rem;
271
- border-bottom: 0.063rem solid theme(digitv2.lightTheme.generic-divider);
274
+ border-bottom: 0.063rem solid theme("digitv2.lightTheme.generic-divider");
272
275
  }
273
276
  &:hover,
274
277
  &:active {
@@ -279,49 +282,49 @@
279
282
  }
280
283
  &:hover,
281
284
  &.keyChange{
282
- background: theme(digitv2.lightTheme.primary-bg) !important;
283
- border: 0.031rem solid theme(digitv2.lightTheme.primary-1);
285
+ background: theme("digitv2.lightTheme.primary-bg") !important;
286
+ border: 0.031rem solid theme("digitv2.lightTheme.primary-1");
284
287
  }
285
288
  &:active {
286
- background: theme(digitv2.lightTheme.primary-1) !important;
289
+ background: theme("digitv2.lightTheme.primary-1") !important;
287
290
  span,
288
291
  .option-description {
289
- color: theme(digitv2.lightTheme.paper-primary);
292
+ color: theme("digitv2.lightTheme.paper-primary");
290
293
  }
291
294
  .svg {
292
295
  width: 6.25rem;
293
296
  }
294
297
  .option-des-container {
295
298
  .main-option {
296
- @extend .typography.heading-s;
297
- font-family: theme(digitv2.fontFamily.sans);
298
- font-style: theme(digitv2.fontStyle.normal);
299
- font-weight: theme(digitv2.fontWeight.bold);
300
- line-height: theme(digitv2.lineHeight.lineheight1);
299
+ @include typography-heading-s;
300
+ font-family: theme("digitv2.fontFamily.sans");
301
+ font-style: theme("digitv2.fontStyle.normal");
302
+ font-weight: theme("digitv2.fontWeight.bold");
303
+ line-height: theme("digitv2.lineHeight.lineheight1");
301
304
 
302
305
  @media (max-aspect-ratio: 9/16) {
303
306
  /* Media query for mobile */
304
- font-size: theme(digitv2.fontSize.heading-s.mobile);
307
+ font-size: theme("digitv2.fontSize.heading-s.mobile");
305
308
  }
306
309
 
307
310
  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
308
311
  /* Media query for tablets */
309
- font-size: theme(digitv2.fontSize.heading-s.tablet);
312
+ font-size: theme("digitv2.fontSize.heading-s.tablet");
310
313
  }
311
314
 
312
315
  @media (min-aspect-ratio: 3/4) {
313
316
  /* Media query for desktop */
314
- font-size: theme(digitv2.fontSize.heading-s.desktop);
317
+ font-size: theme("digitv2.fontSize.heading-s.desktop");
315
318
  }
316
319
  }
317
320
  }
318
321
  }
319
322
  &.nestedtextdropdown {
320
323
  min-height: 4.75rem;
321
- padding: theme(digitv2.spacers.spacer2) theme(digitv2.spacers.spacer3) theme(digitv2.spacers.spacer2) theme(digitv2.spacers.spacer3);
322
- color: theme(digitv2.lightTheme.text-secondary) !important;
324
+ padding: theme("digitv2.spacers.spacer2") theme("digitv2.spacers.spacer3") theme("digitv2.spacers.spacer2") theme("digitv2.spacers.spacer3");
325
+ color: theme("digitv2.lightTheme.text-secondary") !important;
323
326
  &:hover {
324
- border: 0.063rem solid theme(digitv2.lightTheme.primary-1);
327
+ border: 0.063rem solid theme("digitv2.lightTheme.primary-1");
325
328
  }
326
329
  .option-des-container {
327
330
  padding-right: 0.125rem !important;
@@ -329,127 +332,127 @@
329
332
  &:active {
330
333
  .option-des-container {
331
334
  .main-option {
332
- @extend .typography.heading-s;
333
- font-family: theme(digitv2.fontFamily.sans);
334
- font-style: theme(digitv2.fontStyle.normal);
335
- font-weight: theme(digitv2.fontWeight.bold);
336
- line-height: theme(digitv2.lineHeight.lineheight1);
335
+ @include typography-heading-s;
336
+ font-family: theme("digitv2.fontFamily.sans");
337
+ font-style: theme("digitv2.fontStyle.normal");
338
+ font-weight: theme("digitv2.fontWeight.bold");
339
+ line-height: theme("digitv2.lineHeight.lineheight1");
337
340
 
338
341
  @media (max-aspect-ratio: 9/16) {
339
342
  /* Media query for mobile */
340
- font-size: theme(digitv2.fontSize.heading-s.mobile);
343
+ font-size: theme("digitv2.fontSize.heading-s.mobile");
341
344
  }
342
345
 
343
346
  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
344
347
  /* Media query for tablets */
345
- font-size: theme(digitv2.fontSize.heading-s.tablet);
348
+ font-size: theme("digitv2.fontSize.heading-s.tablet");
346
349
  }
347
350
 
348
351
  @media (min-aspect-ratio: 3/4) {
349
352
  /* Media query for desktop */
350
- font-size: theme(digitv2.fontSize.heading-s.desktop);
353
+ font-size: theme("digitv2.fontSize.heading-s.desktop");
351
354
  }
352
- color: theme(digitv2.lightTheme.paper-primary);
355
+ color: theme("digitv2.lightTheme.paper-primary");
353
356
  }
354
357
  }
355
358
  }
356
359
  }
357
360
  &.profiledropdown {
358
- min-height: theme(digitv2.spacers.spacer12);
359
- padding: theme(digitv2.spacers.spacer2) theme(digitv2.spacers.spacer3);
361
+ min-height: theme("digitv2.spacers.spacer12");
362
+ padding: theme("digitv2.spacers.spacer2") theme("digitv2.spacers.spacer3");
360
363
  }
361
364
  &.profilenestedtext {
362
365
  min-height: 4.75rem;
363
- padding: theme(digitv2.spacers.spacer2) theme(digitv2.spacers.spacer4);
364
- gap: theme(digitv2.spacers.spacer4);
366
+ padding: theme("digitv2.spacers.spacer2") theme("digitv2.spacers.spacer4");
367
+ gap: theme("digitv2.spacers.spacer4");
365
368
  align-items: center;
366
- color: theme(digitv2.lightTheme.text-secondary) !important;
369
+ color: theme("digitv2.lightTheme.text-secondary") !important;
367
370
  &:active {
368
371
  .option-des-container {
369
372
  .main-option {
370
- @extend .typography.heading-s;
371
- font-family: theme(digitv2.fontFamily.sans);
372
- font-style: theme(digitv2.fontStyle.normal);
373
- font-weight: theme(digitv2.fontWeight.bold);
374
- line-height: theme(digitv2.lineHeight.lineheight1);
373
+ @include typography-heading-s;
374
+ font-family: theme("digitv2.fontFamily.sans");
375
+ font-style: theme("digitv2.fontStyle.normal");
376
+ font-weight: theme("digitv2.fontWeight.bold");
377
+ line-height: theme("digitv2.lineHeight.lineheight1");
375
378
 
376
379
  @media (max-aspect-ratio: 9/16) {
377
380
  /* Media query for mobile */
378
- font-size: theme(digitv2.fontSize.heading-s.mobile);
381
+ font-size: theme("digitv2.fontSize.heading-s.mobile");
379
382
  }
380
383
 
381
384
  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
382
385
  /* Media query for tablets */
383
- font-size: theme(digitv2.fontSize.heading-s.tablet);
386
+ font-size: theme("digitv2.fontSize.heading-s.tablet");
384
387
  }
385
388
 
386
389
  @media (min-aspect-ratio: 3/4) {
387
390
  /* Media query for desktop */
388
- font-size: theme(digitv2.fontSize.heading-s.desktop);
391
+ font-size: theme("digitv2.fontSize.heading-s.desktop");
389
392
  }
390
- color: theme(digitv2.lightTheme.paper-primary);
393
+ color: theme("digitv2.lightTheme.paper-primary");
391
394
  }
392
395
  }
393
396
  }
394
397
  }
395
398
  &.unsuccessfulresults {
396
- background-color: theme(digitv2.lightTheme.paper-secondary);
399
+ background-color: theme("digitv2.lightTheme.paper-secondary");
397
400
  pointer-events: none;
398
401
  span {
399
- @extend .typography.body-s;
400
- font-family: theme(digitv2.fontFamily.sans);
401
- font-style: theme(digitv2.fontStyle.normal);
402
- font-weight: theme(digitv2.fontWeight.regular);
403
- line-height: theme(digitv2.lineHeight.lineheight2);
402
+ @include typography-body-s;
403
+ font-family: theme("digitv2.fontFamily.sans");
404
+ font-style: theme("digitv2.fontStyle.normal");
405
+ font-weight: theme("digitv2.fontWeight.regular");
406
+ line-height: theme("digitv2.lineHeight.lineheight2");
404
407
 
405
408
  @media (max-aspect-ratio: 9/16) {
406
409
  /* Media query for mobile */
407
- font-size: theme(digitv2.fontSize.body-s.mobile);
410
+ font-size: theme("digitv2.fontSize.body-s.mobile");
408
411
  }
409
412
 
410
413
  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
411
414
  /* Media query for tablets */
412
- font-size: theme(digitv2.fontSize.body-s.tablet);
415
+ font-size: theme("digitv2.fontSize.body-s.tablet");
413
416
  }
414
417
 
415
418
  @media (min-aspect-ratio: 3/4) {
416
419
  /* Media query for desktop */
417
- font-size: theme(digitv2.fontSize.body-s.desktop);
420
+ font-size: theme("digitv2.fontSize.body-s.desktop");
418
421
  }
419
- color: theme(digitv2.lightTheme.text-disabled);
422
+ color: theme("digitv2.lightTheme.text-disabled");
420
423
  }
421
424
  }
422
425
  }
423
426
  .digit-dropdown-employee-select-wrap--elipses {
424
- @extend .typography.body-s;
427
+ @include typography-body-s;
425
428
  @media (max-aspect-ratio: 9/16) {
426
429
  /* Media query for mobile */
427
- font-size: theme(digitv2.fontSize.body-s.mobile);
428
- font-family: theme(digitv2.fontFamily.sans);
429
- font-style: theme(digitv2.fontStyle.normal);
430
- font-weight: theme(digitv2.fontWeight.regular);
431
- line-height: theme(digitv2.lineHeight.lineheight2);
430
+ font-size: theme("digitv2.fontSize.body-s.mobile");
431
+ font-family: theme("digitv2.fontFamily.sans");
432
+ font-style: theme("digitv2.fontStyle.normal");
433
+ font-weight: theme("digitv2.fontWeight.regular");
434
+ line-height: theme("digitv2.lineHeight.lineheight2");
432
435
  }
433
436
 
434
437
  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
435
438
  /* Media query for tablets */
436
- font-size: theme(digitv2.fontSize.body-s.tablet);
437
- font-family: theme(digitv2.fontFamily.sans);
438
- font-style: theme(digitv2.fontStyle.normal);
439
- font-weight: theme(digitv2.fontWeight.regular);
440
- line-height: theme(digitv2.lineHeight.lineheight2);
439
+ font-size: theme("digitv2.fontSize.body-s.tablet");
440
+ font-family: theme("digitv2.fontFamily.sans");
441
+ font-style: theme("digitv2.fontStyle.normal");
442
+ font-weight: theme("digitv2.fontWeight.regular");
443
+ line-height: theme("digitv2.lineHeight.lineheight2");
441
444
  }
442
445
 
443
446
  @media (min-aspect-ratio: 3/4) {
444
447
  /* Media query for desktop */
445
- font-size: theme(digitv2.fontSize.body-s.desktop);
446
- font-family: theme(digitv2.fontFamily.sans);
447
- font-style: theme(digitv2.fontStyle.normal);
448
- font-weight: theme(digitv2.fontWeight.regular);
449
- line-height: theme(digitv2.lineHeight.lineheight2);
448
+ font-size: theme("digitv2.fontSize.body-s.desktop");
449
+ font-family: theme("digitv2.fontFamily.sans");
450
+ font-style: theme("digitv2.fontStyle.normal");
451
+ font-weight: theme("digitv2.fontWeight.regular");
452
+ line-height: theme("digitv2.lineHeight.lineheight2");
450
453
  }
451
- @apply overflow-hidden whitespace-no-wrap;
452
- width:calc(100%- (theme(digitv2.spacers.spacer7)));
454
+ @apply overflow-hidden whitespace-nowrap;
455
+ width:calc(100% - (theme("digitv2.spacers.spacer7")));
453
456
  text-overflow: ellipsis;
454
457
  &.treedropdown,
455
458
  &.notSearchable {
@@ -474,47 +477,47 @@
474
477
  .digit-dropdown-select {
475
478
  @extend .light-input-border;
476
479
  @apply relative block w-full h-10 bg-white;
477
- border: 0.063rem solid theme(digitv2.lightTheme.text-secondary);
480
+ border: 0.063rem solid theme("digitv2.lightTheme.text-secondary");
478
481
  input[type="text"] {
479
- @extend .typography.body-s;
482
+ @include typography-body-s;
480
483
  @media (max-aspect-ratio: 9/16) {
481
484
  /* Media query for mobile */
482
- font-size: theme(digitv2.fontSize.body-s.mobile);
483
- font-family: theme(digitv2.fontFamily.sans);
484
- font-style: theme(digitv2.fontStyle.normal);
485
- font-weight: theme(digitv2.fontWeight.regular);
486
- line-height: theme(digitv2.lineHeight.lineheight2);
485
+ font-size: theme("digitv2.fontSize.body-s.mobile");
486
+ font-family: theme("digitv2.fontFamily.sans");
487
+ font-style: theme("digitv2.fontStyle.normal");
488
+ font-weight: theme("digitv2.fontWeight.regular");
489
+ line-height: theme("digitv2.lineHeight.lineheight2");
487
490
  }
488
491
 
489
492
  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
490
493
  /* Media query for tablets */
491
- font-size: theme(digitv2.fontSize.body-s.tablet);
492
- font-family: theme(digitv2.fontFamily.sans);
493
- font-style: theme(digitv2.fontStyle.normal);
494
- font-weight: theme(digitv2.fontWeight.regular);
495
- line-height: theme(digitv2.lineHeight.lineheight2);
494
+ font-size: theme("digitv2.fontSize.body-s.tablet");
495
+ font-family: theme("digitv2.fontFamily.sans");
496
+ font-style: theme("digitv2.fontStyle.normal");
497
+ font-weight: theme("digitv2.fontWeight.regular");
498
+ line-height: theme("digitv2.lineHeight.lineheight2");
496
499
  }
497
500
 
498
501
  @media (min-aspect-ratio: 3/4) {
499
502
  /* Media query for desktop */
500
- font-size: theme(digitv2.fontSize.body-s.desktop);
501
- font-family: theme(digitv2.fontFamily.sans);
502
- font-style: theme(digitv2.fontStyle.normal);
503
- font-weight: theme(digitv2.fontWeight.regular);
504
- line-height: theme(digitv2.lineHeight.lineheight2);
503
+ font-size: theme("digitv2.fontSize.body-s.desktop");
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");
505
508
  }
506
509
  @apply absolute z-10 h-full outline-none;
507
- width:calc(100%- (theme(digitv2.spacers.spacer7)));
510
+ width:calc(100% - (theme("digitv2.spacers.spacer7")));
508
511
  background-color: transparent;
509
- padding-top: theme(digitv2.spacers.spacer2);
510
- padding-bottom: theme(digitv2.spacers.spacer2);
511
- padding-left: theme(digitv2.spacers.spacer3);
512
- color: theme(digitv2.lightTheme.text-primary);
512
+ padding-top: theme("digitv2.spacers.spacer2");
513
+ padding-bottom: theme("digitv2.spacers.spacer2");
514
+ padding-left: theme("digitv2.spacers.spacer3");
515
+ color: theme("digitv2.lightTheme.text-primary");
513
516
  }
514
517
  &.disabled {
515
518
  pointer-events: none !important;
516
- border: 0.063rem solid theme(digitv2.lightTheme.generic-divider) !important;
517
- color: theme(digitv2.lightTheme.generic-divider) !important;
519
+ border: 0.063rem solid theme("digitv2.lightTheme.generic-divider") !important;
520
+ color: theme("digitv2.lightTheme.generic-divider") !important;
518
521
  }
519
522
  p {
520
523
  @extend .light-text-color-primary;
@@ -530,42 +533,42 @@
530
533
  }
531
534
  .digit-dropdown-select-active {
532
535
  @apply relative block w-full h-10;
533
- border: 0.063rem solid theme(digitv2.lightTheme.primary-1);
536
+ border: 0.063rem solid theme("digitv2.lightTheme.primary-1");
534
537
  input[type="text"] {
535
- @extend .typography.body-s;
538
+ @include typography-body-s;
536
539
  @media (max-aspect-ratio: 9/16) {
537
540
  /* Media query for mobile */
538
- font-size: theme(digitv2.fontSize.body-s.mobile);
539
- font-family: theme(digitv2.fontFamily.sans);
540
- font-style: theme(digitv2.fontStyle.normal);
541
- font-weight: theme(digitv2.fontWeight.regular);
542
- line-height: theme(digitv2.lineHeight.lineheight2);
541
+ font-size: theme("digitv2.fontSize.body-s.mobile");
542
+ font-family: theme("digitv2.fontFamily.sans");
543
+ font-style: theme("digitv2.fontStyle.normal");
544
+ font-weight: theme("digitv2.fontWeight.regular");
545
+ line-height: theme("digitv2.lineHeight.lineheight2");
543
546
  }
544
547
 
545
548
  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
546
549
  /* Media query for tablets */
547
- font-size: theme(digitv2.fontSize.body-s.tablet);
548
- font-family: theme(digitv2.fontFamily.sans);
549
- font-style: theme(digitv2.fontStyle.normal);
550
- font-weight: theme(digitv2.fontWeight.regular);
551
- line-height: theme(digitv2.lineHeight.lineheight2);
550
+ font-size: theme("digitv2.fontSize.body-s.tablet");
551
+ font-family: theme("digitv2.fontFamily.sans");
552
+ font-style: theme("digitv2.fontStyle.normal");
553
+ font-weight: theme("digitv2.fontWeight.regular");
554
+ line-height: theme("digitv2.lineHeight.lineheight2");
552
555
  }
553
556
 
554
557
  @media (min-aspect-ratio: 3/4) {
555
558
  /* Media query for desktop */
556
- font-size: theme(digitv2.fontSize.body-s.desktop);
557
- font-family: theme(digitv2.fontFamily.sans);
558
- font-style: theme(digitv2.fontStyle.normal);
559
- font-weight: theme(digitv2.fontWeight.regular);
560
- line-height: theme(digitv2.lineHeight.lineheight2);
559
+ font-size: theme("digitv2.fontSize.body-s.desktop");
560
+ font-family: theme("digitv2.fontFamily.sans");
561
+ font-style: theme("digitv2.fontStyle.normal");
562
+ font-weight: theme("digitv2.fontWeight.regular");
563
+ line-height: theme("digitv2.lineHeight.lineheight2");
561
564
  }
562
565
  @apply absolute z-10 h-full outline-none;
563
- width:calc(100%- (theme(digitv2.spacers.spacer7)));
566
+ width:calc(100% - (theme("digitv2.spacers.spacer7")));
564
567
  background-color: transparent;
565
- padding-top: theme(digitv2.spacers.spacer2);
566
- padding-bottom: theme(digitv2.spacers.spacer2);
567
- padding-left: theme(digitv2.spacers.spacer3);
568
- color: theme(digitv2.lightTheme.text-primary);
568
+ padding-top: theme("digitv2.spacers.spacer2");
569
+ padding-bottom: theme("digitv2.spacers.spacer2");
570
+ padding-left: theme("digitv2.spacers.spacer3");
571
+ color: theme("digitv2.lightTheme.text-primary");
569
572
  }
570
573
  p {
571
574
  @extend .light-text-color-primary;
@@ -590,7 +593,7 @@
590
593
  }
591
594
  .digit-dropdown-options-card {
592
595
  width: 100% !important;
593
- box-shadow: theme(digitv2.spacers.spacer0) 0.063rem 0.275rem theme(digitv2.spacers.spacer0) #00000026;
596
+ box-shadow: theme("digitv2.spacers.spacer0") 0.063rem 0.275rem theme("digitv2.spacers.spacer0") #00000026;
594
597
  @apply absolute z-20 bg-white overflow-y-auto overflow-x-hidden;
595
598
  max-height: 20vmax;
596
599
  p {