@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/tableV2.scss CHANGED
@@ -1,3 +1,6 @@
1
+ @import './theme-variables.css';
2
+ @import '../typography.scss';
3
+
1
4
  .digit-table-footer-wrapper{
2
5
  display: flex;
3
6
  flex-direction: column;
@@ -11,8 +14,8 @@
11
14
  max-width: 100%;
12
15
 
13
16
  &.withBorder {
14
- border-radius: theme(digitv2.spacers.spacer1) theme(digitv2.spacers.spacer1) theme(digitv2.spacers.spacer0) theme(digitv2.spacers.spacer0);
15
- border: 0.063rem solid theme(digitv2.lightTheme.generic-divider);
17
+ border-radius: theme("digitv2.spacers.spacer1") theme("digitv2.spacers.spacer1") theme("digitv2.spacers.spacer0") theme("digitv2.spacers.spacer0");
18
+ border: 0.063rem solid theme("digitv2.lightTheme.generic-divider");
16
19
  }
17
20
 
18
21
  .digit-cursorPointer {
@@ -44,29 +47,29 @@ table {
44
47
  }
45
48
 
46
49
  th {
47
- @extend .typography.heading-s;
48
- font-family: theme(digitv2.fontFamily.sans);
49
- font-style: theme(digitv2.fontStyle.normal);
50
- font-weight: theme(digitv2.fontWeight.bold);
51
- line-height: theme(digitv2.lineHeight.lineheight1);
50
+ @include typography-heading-s;
51
+ font-family: theme("digitv2.fontFamily.sans");
52
+ font-style: theme("digitv2.fontStyle.normal");
53
+ font-weight: theme("digitv2.fontWeight.bold");
54
+ line-height: theme("digitv2.lineHeight.lineheight1");
52
55
 
53
56
  @media (max-aspect-ratio: 9/16) {
54
57
  /* Media query for mobile */
55
- font-size: theme(digitv2.fontSize.heading-s.mobile);
58
+ font-size: theme("digitv2.fontSize.heading-s.mobile");
56
59
  }
57
60
 
58
61
  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
59
62
  /* Media query for tablets */
60
- font-size: theme(digitv2.fontSize.heading-s.tablet);
63
+ font-size: theme("digitv2.fontSize.heading-s.tablet");
61
64
  }
62
65
 
63
66
  @media (min-aspect-ratio: 3/4) {
64
67
  /* Media query for desktop */
65
- font-size: theme(digitv2.fontSize.heading-s.desktop);
68
+ font-size: theme("digitv2.fontSize.heading-s.desktop");
66
69
  }
67
- color: theme(digitv2.lightTheme.primary-2);
68
- background-color: theme(digitv2.lightTheme.generic-background);
69
- padding: theme(digitv2.spacers.spacer4);
70
+ color: theme("digitv2.lightTheme.primary-2");
71
+ background-color: theme("digitv2.lightTheme.generic-background");
72
+ padding: theme("digitv2.spacers.spacer4");
70
73
  min-width: 9.375rem;
71
74
  word-wrap: break-word;
72
75
  white-space: normal;
@@ -74,11 +77,11 @@ th {
74
77
  width: fit-content;
75
78
 
76
79
  &.withBorder {
77
- border-bottom: 0.063rem solid theme(digitv2.lightTheme.generic-divider);
80
+ border-bottom: 0.063rem solid theme("digitv2.lightTheme.generic-divider");
78
81
  }
79
82
 
80
83
  &.withColumnDivider {
81
- border-right: 0.063rem solid theme(digitv2.lightTheme.generic-divider);
84
+ border-right: 0.063rem solid theme("digitv2.lightTheme.generic-divider");
82
85
  }
83
86
 
84
87
  &.scrollable-columns.withHeaderDivider {
@@ -87,11 +90,11 @@ th {
87
90
  &::after {
88
91
  content: "";
89
92
  position: absolute;
90
- top: theme(digitv2.spacers.spacer4);
93
+ top: theme("digitv2.spacers.spacer4");
91
94
  right: 0;
92
- bottom: theme(digitv2.spacers.spacer4);
95
+ bottom: theme("digitv2.spacers.spacer4");
93
96
  width: 0.063rem;
94
- background-color: theme(digitv2.lightTheme.text-secondary);
97
+ background-color: theme("digitv2.lightTheme.text-secondary");
95
98
  }
96
99
  }
97
100
  }
@@ -112,19 +115,19 @@ thead th.withHeaderDivider:last-child::after {
112
115
  }
113
116
  }
114
117
  td {
115
- padding: theme(digitv2.spacers.spacer4);
118
+ padding: theme("digitv2.spacers.spacer4");
116
119
  word-wrap: break-word;
117
120
  white-space: normal;
118
- @extend .typography.body-s;
119
- color: theme(digitv2.lightTheme.text-primary);
120
- font-family: theme(digitv2.fontFamily.sans);
121
- font-style: theme(digitv2.fontStyle.normal);
122
- font-weight: theme(digitv2.fontWeight.regular);
123
- line-height: theme(digitv2.lineHeight.lineheight2);
121
+ @include typography-body-s;
122
+ color: theme("digitv2.lightTheme.text-primary");
123
+ font-family: theme("digitv2.fontFamily.sans");
124
+ font-style: theme("digitv2.fontStyle.normal");
125
+ font-weight: theme("digitv2.fontWeight.regular");
126
+ line-height: theme("digitv2.lineHeight.lineheight2");
124
127
  text-align: left;
125
128
  vertical-align: top;
126
129
  width: fit-content;
127
- background-color: theme(digitv2.lightTheme.paper-primary);
130
+ background-color: theme("digitv2.lightTheme.paper-primary");
128
131
 
129
132
  &.numeric,
130
133
  &.serialno{
@@ -133,25 +136,25 @@ td {
133
136
 
134
137
  @media (max-aspect-ratio: 9/16) {
135
138
  /* Media query for mobile */
136
- font-size: theme(digitv2.fontSize.body-s.mobile);
139
+ font-size: theme("digitv2.fontSize.body-s.mobile");
137
140
  }
138
141
 
139
142
  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
140
143
  /* Media query for tablets */
141
- font-size: theme(digitv2.fontSize.body-s.tablet);
144
+ font-size: theme("digitv2.fontSize.body-s.tablet");
142
145
  }
143
146
 
144
147
  @media (min-aspect-ratio: 3/4) {
145
148
  /* Media query for desktop */
146
- font-size: theme(digitv2.fontSize.body-s.desktop);
149
+ font-size: theme("digitv2.fontSize.body-s.desktop");
147
150
  }
148
151
 
149
152
  &.withRowDivider {
150
- border-bottom: 0.063rem solid theme(digitv2.lightTheme.generic-divider);
153
+ border-bottom: 0.063rem solid theme("digitv2.lightTheme.generic-divider");
151
154
  }
152
155
 
153
156
  &.withColumnDivider {
154
- border-right: 0.063rem solid theme(digitv2.lightTheme.generic-divider);
157
+ border-right: 0.063rem solid theme("digitv2.lightTheme.generic-divider");
155
158
  }
156
159
 
157
160
  &.text,
@@ -182,17 +185,17 @@ td {
182
185
  &.numeric {
183
186
  @media (max-aspect-ratio: 9/16) {
184
187
  /* Media query for mobile */
185
- min-width: theme(digitv2.spacers.spacer10);
188
+ min-width: theme("digitv2.spacers.spacer10");
186
189
  }
187
190
 
188
191
  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
189
192
  /* Media query for tablets */
190
- min-width: theme(digitv2.spacers.spacer10);;
193
+ min-width: theme("digitv2.spacers.spacer10");;
191
194
  }
192
195
 
193
196
  @media (min-aspect-ratio: 3/4) {
194
197
  /* Media query for desktop */
195
- min-width: theme(digitv2.spacers.spacer10);;
198
+ min-width: theme("digitv2.spacers.spacer10");;
196
199
  }
197
200
  }
198
201
  &.button {
@@ -220,7 +223,7 @@ tbody tr:last-child {
220
223
  }
221
224
 
222
225
  tbody tr:nth-child(even).withAlternateBg td{
223
- background-color: theme(digitv2.lightTheme.paper-secondary);
226
+ background-color: theme("digitv2.lightTheme.paper-secondary");
224
227
  }
225
228
 
226
229
  tbody tr.addHover{
@@ -229,7 +232,7 @@ tbody tr.addHover{
229
232
 
230
233
  tbody tr.selected{
231
234
  td{
232
- background-color: theme(digitv2.lightTheme.primary-bg) !important;
235
+ background-color: theme("digitv2.lightTheme.primary-bg") !important;
233
236
  }
234
237
 
235
238
  td:first-child::before{
@@ -238,47 +241,47 @@ tbody tr.selected{
238
241
  top: 0.062rem;
239
242
  left: 0;
240
243
  bottom: 0.063rem;
241
- width: theme(digitv2.spacers.spacer1);
242
- background: theme(digitv2.lightTheme.primary-1);
243
- border-top-right-radius: theme(digitv2.spacers.spacer1);
244
- border-bottom-right-radius: theme(digitv2.spacers.spacer1);
244
+ width: theme("digitv2.spacers.spacer1");
245
+ background: theme("digitv2.lightTheme.primary-1");
246
+ border-top-right-radius: theme("digitv2.spacers.spacer1");
247
+ border-bottom-right-radius: theme("digitv2.spacers.spacer1");
245
248
  }
246
249
  }
247
250
 
248
251
  tbody tr.addHover:hover td{
249
- background-color: theme(digitv2.lightTheme.primary-bg) !important;
252
+ background-color: theme("digitv2.lightTheme.primary-bg") !important;
250
253
  }
251
254
 
252
255
 
253
256
  tfoot td {
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);
257
+ @include typography-heading-s;
258
+ font-family: theme("digitv2.fontFamily.sans");
259
+ font-style: theme("digitv2.fontStyle.normal");
260
+ font-weight: theme("digitv2.fontWeight.bold");
261
+ line-height: theme("digitv2.lineHeight.lineheight1");
259
262
 
260
263
  @media (max-aspect-ratio: 9/16) {
261
264
  /* Media query for mobile */
262
- font-size: theme(digitv2.fontSize.heading-s.mobile);
265
+ font-size: theme("digitv2.fontSize.heading-s.mobile");
263
266
  }
264
267
 
265
268
  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
266
269
  /* Media query for tablets */
267
- font-size: theme(digitv2.fontSize.heading-s.tablet);
270
+ font-size: theme("digitv2.fontSize.heading-s.tablet");
268
271
  }
269
272
 
270
273
  @media (min-aspect-ratio: 3/4) {
271
274
  /* Media query for desktop */
272
- font-size: theme(digitv2.fontSize.heading-s.desktop);
275
+ font-size: theme("digitv2.fontSize.heading-s.desktop");
273
276
  }
274
- color: theme(digitv2.lightTheme.text-primary);
275
- background-color: theme(digitv2.lightTheme.generic-background);
276
- padding: theme(digitv2.spacers.spacer4);
277
+ color: theme("digitv2.lightTheme.text-primary");
278
+ background-color: theme("digitv2.lightTheme.generic-background");
279
+ padding: theme("digitv2.spacers.spacer4");
277
280
  text-align: center;
278
281
  width: 100%;
279
282
 
280
283
  &.withBorder {
281
- border: 0.063rem solid theme(digitv2.lightTheme.generic-divider);
284
+ border: 0.063rem solid theme("digitv2.lightTheme.generic-divider");
282
285
  border-top:none;
283
286
  }
284
287
  }
@@ -292,7 +295,7 @@ tfoot td {
292
295
  .footer-pagination-container {
293
296
  display: flex;
294
297
  align-items: center;
295
- gap: theme(digitv2.spacers.spacer2);
298
+ gap: theme("digitv2.spacers.spacer2");
296
299
  margin-left: auto;
297
300
  }
298
301
 
@@ -300,68 +303,68 @@ tfoot td {
300
303
  display: flex;
301
304
  justify-content: center;
302
305
  align-items: center;
303
- gap: theme(digitv2.spacers.spacer2);
306
+ gap: theme("digitv2.spacers.spacer2");
304
307
  }
305
308
 
306
309
  .pagination-dropdown{
307
- padding: theme(digitv2.spacers.spacer1);
310
+ padding: theme("digitv2.spacers.spacer1");
308
311
  outline: none;
309
312
  min-width: 4rem;
310
- @extend .typography.body-s;
311
- color: theme(digitv2.lightTheme.text-primary);
312
- font-family: theme(digitv2.fontFamily.sans);
313
- font-style: theme(digitv2.fontStyle.normal);
314
- font-weight: theme(digitv2.fontWeight.regular);
315
- line-height: theme(digitv2.lineHeight.lineheight2);
313
+ @include typography-body-s;
314
+ color: theme("digitv2.lightTheme.text-primary");
315
+ font-family: theme("digitv2.fontFamily.sans");
316
+ font-style: theme("digitv2.fontStyle.normal");
317
+ font-weight: theme("digitv2.fontWeight.regular");
318
+ line-height: theme("digitv2.lineHeight.lineheight2");
316
319
 
317
320
  @media (max-aspect-ratio: 9/16) {
318
321
  /* Media query for mobile */
319
- font-size: theme(digitv2.fontSize.body-s.mobile);
322
+ font-size: theme("digitv2.fontSize.body-s.mobile");
320
323
  }
321
324
 
322
325
  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
323
326
  /* Media query for tablets */
324
- font-size: theme(digitv2.fontSize.body-s.tablet);
327
+ font-size: theme("digitv2.fontSize.body-s.tablet");
325
328
  }
326
329
 
327
330
  @media (min-aspect-ratio: 3/4) {
328
331
  /* Media query for desktop */
329
- font-size: theme(digitv2.fontSize.body-s.desktop);
332
+ font-size: theme("digitv2.fontSize.body-s.desktop");
330
333
  }
331
334
 
332
335
  option{
333
336
  width: 100%;
334
337
  text-align: center;
335
- @extend .typography.body-s;
336
- color: theme(digitv2.lightTheme.text-primary);
337
- font-family: theme(digitv2.fontFamily.sans);
338
- font-style: theme(digitv2.fontStyle.normal);
339
- font-weight: theme(digitv2.fontWeight.regular);
340
- line-height: theme(digitv2.lineHeight.lineheight2);
338
+ @include typography-body-s;
339
+ color: theme("digitv2.lightTheme.text-primary");
340
+ font-family: theme("digitv2.fontFamily.sans");
341
+ font-style: theme("digitv2.fontStyle.normal");
342
+ font-weight: theme("digitv2.fontWeight.regular");
343
+ line-height: theme("digitv2.lineHeight.lineheight2");
341
344
 
342
345
  @media (max-aspect-ratio: 9/16) {
343
346
  /* Media query for mobile */
344
- font-size: theme(digitv2.fontSize.body-s.mobile);
347
+ font-size: theme("digitv2.fontSize.body-s.mobile");
345
348
  }
346
349
 
347
350
  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
348
351
  /* Media query for tablets */
349
- font-size: theme(digitv2.fontSize.body-s.tablet);
352
+ font-size: theme("digitv2.fontSize.body-s.tablet");
350
353
  }
351
354
 
352
355
  @media (min-aspect-ratio: 3/4) {
353
356
  /* Media query for desktop */
354
- font-size: theme(digitv2.fontSize.body-s.desktop);
357
+ font-size: theme("digitv2.fontSize.body-s.desktop");
355
358
  }
356
359
  }
357
360
  }
358
361
 
359
362
 
360
363
  .pagination button {
361
- border: 0.063 solid theme(digitv2.lightTheme.generic-divider);
364
+ border: 0.063 solid theme("digitv2.lightTheme.generic-divider");
362
365
  cursor: pointer;
363
- width: theme(digitv2.spacers.spacer6);
364
- height: theme(digitv2.spacers.spacer6);
366
+ width: theme("digitv2.spacers.spacer6");
367
+ height: theme("digitv2.spacers.spacer6");
365
368
  }
366
369
 
367
370
  .pagination button:disabled {
@@ -396,15 +399,15 @@ tr td:last-child {
396
399
 
397
400
  td {
398
401
  text-align: right;
399
- background-color: theme(digitv2.lightTheme.paper-secondary);
400
- color: theme(digitv2.lightTheme.primary-2);
402
+ background-color: theme("digitv2.lightTheme.paper-secondary");
403
+ color: theme("digitv2.lightTheme.primary-2");
401
404
  overflow-x: auto;
402
405
  }
403
406
  }
404
407
 
405
408
  .sort-icon{
406
- width: theme(digitv2.spacers.spacer4);
407
- height: theme(digitv2.spacers.spacer4);
409
+ width: theme("digitv2.spacers.spacer4");
410
+ height: theme("digitv2.spacers.spacer4");
408
411
  cursor: pointer;
409
412
  }
410
413
  .footer-pagination-content{
@@ -426,90 +429,90 @@ tr td:last-child {
426
429
  .digit-table-card {
427
430
 
428
431
  .digit-text-block-wrap .digit-text-block-header-content .digit-text-block-subheader.table-header {
429
- color: theme(digitv2.lightTheme.text-primary)
432
+ color: theme("digitv2.lightTheme.text-primary")
430
433
  }
431
434
  }
432
435
 
433
436
  .selected-state {
434
- @extend .typography.body-s;
435
- color: theme(digitv2.lightTheme.text-primary);
436
- font-family: theme(digitv2.fontFamily.sans);
437
- font-style: theme(digitv2.fontStyle.normal);
438
- font-weight: theme(digitv2.fontWeight.regular);
439
- line-height: theme(digitv2.lineHeight.lineheight2);
437
+ @include typography-body-s;
438
+ color: theme("digitv2.lightTheme.text-primary");
439
+ font-family: theme("digitv2.fontFamily.sans");
440
+ font-style: theme("digitv2.fontStyle.normal");
441
+ font-weight: theme("digitv2.fontWeight.regular");
442
+ line-height: theme("digitv2.lineHeight.lineheight2");
440
443
  text-align: left;
441
444
  vertical-align: top;
442
445
 
443
446
  @media (max-aspect-ratio: 9/16) {
444
447
  /* Media query for mobile */
445
- font-size: theme(digitv2.fontSize.body-s.mobile);
448
+ font-size: theme("digitv2.fontSize.body-s.mobile");
446
449
  }
447
450
 
448
451
  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
449
452
  /* Media query for tablets */
450
- font-size: theme(digitv2.fontSize.body-s.tablet);
453
+ font-size: theme("digitv2.fontSize.body-s.tablet");
451
454
  }
452
455
 
453
456
  @media (min-aspect-ratio: 3/4) {
454
457
  /* Media query for desktop */
455
- font-size: theme(digitv2.fontSize.body-s.desktop);
458
+ font-size: theme("digitv2.fontSize.body-s.desktop");
456
459
  }
457
460
  }
458
461
 
459
462
  .header-des-wrap {
460
463
  display: flex;
461
464
  flex-direction: column;
462
- gap: theme(digitv2.spacers.spacer1);
465
+ gap: theme("digitv2.spacers.spacer1");
463
466
 
464
467
  .column-header{
465
- @extend .typography.heading-s;
466
- font-family: theme(digitv2.fontFamily.sans);
467
- font-style: theme(digitv2.fontStyle.normal);
468
- font-weight: theme(digitv2.fontWeight.bold);
469
- line-height: theme(digitv2.lineHeight.lineheight1);
468
+ @include typography-heading-s;
469
+ font-family: theme("digitv2.fontFamily.sans");
470
+ font-style: theme("digitv2.fontStyle.normal");
471
+ font-weight: theme("digitv2.fontWeight.bold");
472
+ line-height: theme("digitv2.lineHeight.lineheight1");
470
473
 
471
474
  @media (max-aspect-ratio: 9/16) {
472
475
  /* Media query for mobile */
473
- font-size: theme(digitv2.fontSize.heading-s.mobile);
476
+ font-size: theme("digitv2.fontSize.heading-s.mobile");
474
477
  }
475
478
 
476
479
  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
477
480
  /* Media query for tablets */
478
- font-size: theme(digitv2.fontSize.heading-s.tablet);
481
+ font-size: theme("digitv2.fontSize.heading-s.tablet");
479
482
  }
480
483
 
481
484
  @media (min-aspect-ratio: 3/4) {
482
485
  /* Media query for desktop */
483
- font-size: theme(digitv2.fontSize.heading-s.desktop);
486
+ font-size: theme("digitv2.fontSize.heading-s.desktop");
484
487
  }
485
488
  white-space: nowrap;
486
489
  display: flex;
487
490
  align-items: center;
488
- gap:theme(digitv2.spacers.spacer1);
491
+ gap:theme("digitv2.spacers.spacer1");
489
492
  }
490
493
 
491
494
  .column-description {
492
- color: theme(digitv2.lightTheme.text-secondary);
495
+ color: theme("digitv2.lightTheme.text-secondary");
493
496
  white-space: nowrap;
494
- @extend .typography.body-s;
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);
497
+ @include typography-body-s;
498
+ font-family: theme("digitv2.fontFamily.sans");
499
+ font-style: theme("digitv2.fontStyle.normal");
500
+ font-weight: theme("digitv2.fontWeight.regular");
501
+ line-height: theme("digitv2.lineHeight.lineheight2");
499
502
 
500
503
  @media (max-aspect-ratio: 9/16) {
501
504
  /* Media query for mobile */
502
- font-size: theme(digitv2.fontSize.body-s.mobile);
505
+ font-size: theme("digitv2.fontSize.body-s.mobile");
503
506
  }
504
507
 
505
508
  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
506
509
  /* Media query for tablets */
507
- font-size: theme(digitv2.fontSize.body-s.tablet);
510
+ font-size: theme("digitv2.fontSize.body-s.tablet");
508
511
  }
509
512
 
510
513
  @media (min-aspect-ratio: 3/4) {
511
514
  /* Media query for desktop */
512
- font-size: theme(digitv2.fontSize.body-s.desktop);
515
+ font-size: theme("digitv2.fontSize.body-s.desktop");
513
516
  }
514
517
  }
515
518
  }
@@ -517,7 +520,7 @@ tr td:last-child {
517
520
  .table-header-wrapper {
518
521
  display: flex;
519
522
  flex-direction: column;
520
- gap: theme(digitv2.spacers.spacer2);
523
+ gap: theme("digitv2.spacers.spacer2");
521
524
 
522
525
  .header-filter-wrapper{
523
526
  display: flex;
@@ -531,27 +534,27 @@ tr td:last-child {
531
534
  }
532
535
 
533
536
  .table-header {
534
- @extend .typography.heading-m;
535
- font-family: theme(digitv2.fontFamily.sans);
536
- font-style: theme(digitv2.fontStyle.normal);
537
- font-weight: theme(digitv2.fontWeight.bold);
538
- line-height: theme(digitv2.lineHeight.lineheight1);
537
+ @include typography-heading-m;
538
+ font-family: theme("digitv2.fontFamily.sans");
539
+ font-style: theme("digitv2.fontStyle.normal");
540
+ font-weight: theme("digitv2.fontWeight.bold");
541
+ line-height: theme("digitv2.lineHeight.lineheight1");
539
542
 
540
543
  @media (max-aspect-ratio: 9/16) {
541
544
  /* Media query for mobile */
542
- font-size: theme(digitv2.fontSize.heading-m.mobile);
545
+ font-size: theme("digitv2.fontSize.heading-m.mobile");
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.heading-m.tablet);
550
+ font-size: theme("digitv2.fontSize.heading-m.tablet");
548
551
  }
549
552
 
550
553
  @media (min-aspect-ratio: 3/4) {
551
554
  /* Media query for desktop */
552
- font-size: theme(digitv2.fontSize.heading-m.desktop);
555
+ font-size: theme("digitv2.fontSize.heading-m.desktop");
553
556
  }
554
- color: theme(digitv2.lightTheme.text-primary);
557
+ color: theme("digitv2.lightTheme.text-primary");
555
558
  line-height: normal;
556
559
  }
557
560
 
@@ -559,58 +562,58 @@ tr td:last-child {
559
562
  }
560
563
 
561
564
  .table-description {
562
- @extend .typography.body-s;
563
- font-family: theme(digitv2.fontFamily.sans);
564
- font-style: theme(digitv2.fontStyle.normal);
565
- font-weight: theme(digitv2.fontWeight.regular);
566
- line-height: theme(digitv2.lineHeight.lineheight2);
565
+ @include typography-body-s;
566
+ font-family: theme("digitv2.fontFamily.sans");
567
+ font-style: theme("digitv2.fontStyle.normal");
568
+ font-weight: theme("digitv2.fontWeight.regular");
569
+ line-height: theme("digitv2.lineHeight.lineheight2");
567
570
 
568
571
  @media (max-aspect-ratio: 9/16) {
569
572
  /* Media query for mobile */
570
- font-size: theme(digitv2.fontSize.body-s.mobile);
573
+ font-size: theme("digitv2.fontSize.body-s.mobile");
571
574
  }
572
575
 
573
576
  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
574
577
  /* Media query for tablets */
575
- font-size: theme(digitv2.fontSize.body-s.tablet);
578
+ font-size: theme("digitv2.fontSize.body-s.tablet");
576
579
  }
577
580
 
578
581
  @media (min-aspect-ratio: 3/4) {
579
582
  /* Media query for desktop */
580
- font-size: theme(digitv2.fontSize.body-s.desktop);
583
+ font-size: theme("digitv2.fontSize.body-s.desktop");
581
584
  }
582
585
 
583
- color: theme(digitv2.lightTheme.generic-inputborder);
586
+ color: theme("digitv2.lightTheme.generic-inputborder");
584
587
  }
585
588
  }
586
589
 
587
590
  .sticker-footer-td::-webkit-scrollbar {
588
591
  height: 0.5rem;
589
- background-color: theme(digitv2.lightTheme.generic-background);
592
+ background-color: theme("digitv2.lightTheme.generic-background");
590
593
  }
591
594
 
592
595
  .sticker-footer-td::-webkit-scrollbar-track {
593
- background-color: theme(digitv2.lightTheme.generic-background);
596
+ background-color: theme("digitv2.lightTheme.generic-background");
594
597
  border-radius: 0.563rem;
595
598
  }
596
599
 
597
600
  .sticker-footer-td::-webkit-scrollbar-thumb {
598
- background-color: theme(digitv2.lightTheme.generic-divider);
601
+ background-color: theme("digitv2.lightTheme.generic-divider");
599
602
  border-radius: 0.563rem;
600
603
  }
601
604
 
602
605
  .digit-table-container::-webkit-scrollbar {
603
606
  height: 0.5rem;
604
- background-color: theme(digitv2.lightTheme.generic-background);
607
+ background-color: theme("digitv2.lightTheme.generic-background");
605
608
  }
606
609
 
607
610
  .digit-table-container::-webkit-scrollbar-track {
608
- background-color: theme(digitv2.lightTheme.generic-background);
611
+ background-color: theme("digitv2.lightTheme.generic-background");
609
612
  border-radius: 0.563rem;
610
613
  }
611
614
 
612
615
  .digit-table-container::-webkit-scrollbar-thumb {
613
- background-color: theme(digitv2.lightTheme.generic-divider);
616
+ background-color: theme("digitv2.lightTheme.generic-divider");
614
617
  border-radius: 0.563rem;
615
618
  }
616
619
 
@@ -630,14 +633,14 @@ tr td:last-child {
630
633
  }
631
634
 
632
635
  .table-checkbox {
633
- margin: theme(digitv2.spacers.spacer0);
636
+ margin: theme("digitv2.spacers.spacer0");
634
637
 
635
638
  input {
636
- margin: theme(digitv2.spacers.spacer0);
639
+ margin: theme("digitv2.spacers.spacer0");
637
640
  }
638
641
 
639
642
  p {
640
- margin: theme(digitv2.spacers.spacer0);
643
+ margin: theme("digitv2.spacers.spacer0");
641
644
  }
642
645
  }
643
646
 
@@ -647,40 +650,40 @@ tr td:last-child {
647
650
  justify-content: space-between;
648
651
  align-items: center;
649
652
  flex-wrap: wrap;
650
- gap: theme(digitv2.spacers.spacer2);
653
+ gap: theme("digitv2.spacers.spacer2");
651
654
 
652
655
  .svg-state-wrapper{
653
656
 
654
657
  display: flex;
655
658
  align-items: center;
656
- gap: theme(digitv2.spacers.spacer2);
659
+ gap: theme("digitv2.spacers.spacer2");
657
660
 
658
661
  svg{
659
662
  flex-shrink: 0
660
663
  }
661
664
 
662
665
  .selected-state{
663
- @extend .typography.heading-s;
664
- font-family: theme(digitv2.fontFamily.sans);
665
- font-style: theme(digitv2.fontStyle.normal);
666
- font-weight: theme(digitv2.fontWeight.bold);
667
- line-height: theme(digitv2.lineHeight.lineheight1);
666
+ @include typography-heading-s;
667
+ font-family: theme("digitv2.fontFamily.sans");
668
+ font-style: theme("digitv2.fontStyle.normal");
669
+ font-weight: theme("digitv2.fontWeight.bold");
670
+ line-height: theme("digitv2.lineHeight.lineheight1");
668
671
 
669
672
  @media (max-aspect-ratio: 9/16) {
670
673
  /* Media query for mobile */
671
- font-size: theme(digitv2.fontSize.heading-s.mobile);
674
+ font-size: theme("digitv2.fontSize.heading-s.mobile");
672
675
  }
673
676
 
674
677
  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
675
678
  /* Media query for tablets */
676
- font-size: theme(digitv2.fontSize.heading-s.tablet);
679
+ font-size: theme("digitv2.fontSize.heading-s.tablet");
677
680
  }
678
681
 
679
682
  @media (min-aspect-ratio: 3/4) {
680
683
  /* Media query for desktop */
681
- font-size: theme(digitv2.fontSize.heading-s.desktop);
684
+ font-size: theme("digitv2.fontSize.heading-s.desktop");
682
685
  }
683
- color: theme(digitv2.lightTheme.primary-2);
686
+ color: theme("digitv2.lightTheme.primary-2");
684
687
  }
685
688
  }
686
689