@egovernments/digit-ui-components-css 2.0.0-dev-10 → 2.0.0-dev-12

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