@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/landingpagecardV2.scss CHANGED
@@ -3,18 +3,18 @@
3
3
 
4
4
  .digit-landing-page-card {
5
5
  width: fit-content;
6
- background-color: theme("digitv2.lightTheme.paper-primary");
7
- box-shadow: theme("digitv2.spacers.spacer0") 0.063rem 0.125rem theme("digitv2.spacers.spacer0") #00000029;
6
+ background-color: var(--digitv2-lightTheme-paper-primary);
7
+ box-shadow: var(--digitv2-spacers-spacer0) 0.063rem 0.125rem var(--digitv2-spacers-spacer0) #00000029;
8
8
  min-width: 15%;
9
9
  display: flex;
10
10
  flex-direction: column;
11
- gap: theme("digitv2.spacers.spacer4");
12
- border-radius: theme("digitv2.spacers.spacer1") theme("digitv2.spacers.spacer0") theme("digitv2.spacers.spacer0") theme("digitv2.spacers.spacer0");
11
+ gap: var(--digitv2-spacers-spacer4);
12
+ border-radius: var(--digitv2-spacers-spacer1) var(--digitv2-spacers-spacer0) var(--digitv2-spacers-spacer0) var(--digitv2-spacers-spacer0);
13
13
 
14
14
  .icon-module-header {
15
15
  display: flex !important;
16
16
  align-items: center !important;
17
- gap: theme("digitv2.spacers.spacer2");
17
+ gap: var(--digitv2-spacers-spacer2);
18
18
 
19
19
  .digit-landingpagecard-icon {
20
20
  display: flex;
@@ -23,46 +23,46 @@
23
23
 
24
24
  @media (max-aspect-ratio: 9/16) {
25
25
  /* Media query for mobile */
26
- width: theme("digitv2.spacers.spacer11");
27
- height:theme("digitv2.spacers.spacer11");
26
+ width: var(--digitv2-spacers-spacer11);
27
+ height:var(--digitv2-spacers-spacer11);
28
28
 
29
29
  svg {
30
- width: theme("digitv2.spacers.spacer7");
31
- height:theme("digitv2.spacers.spacer7");
30
+ width: var(--digitv2-spacers-spacer7);
31
+ height:var(--digitv2-spacers-spacer7);
32
32
  }
33
33
  }
34
34
 
35
35
  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
36
36
  /* Media query for tablets */
37
- width: theme("digitv2.spacers.spacer12");
38
- height:theme("digitv2.spacers.spacer12");
37
+ width: var(--digitv2-spacers-spacer12);
38
+ height:var(--digitv2-spacers-spacer12);
39
39
 
40
40
  svg {
41
- width: theme("digitv2.spacers.spacer8");
42
- height:theme("digitv2.spacers.spacer8");
41
+ width: var(--digitv2-spacers-spacer8);
42
+ height:var(--digitv2-spacers-spacer8);
43
43
  }
44
44
  }
45
45
 
46
46
  @media (min-aspect-ratio: 3/4) {
47
47
  /* Media query for desktop */
48
- width: theme("digitv2.spacers.spacer13");
49
- height:theme("digitv2.spacers.spacer13");
48
+ width: var(--digitv2-spacers-spacer13);
49
+ height:var(--digitv2-spacers-spacer13);
50
50
 
51
51
  svg {
52
- width: theme("digitv2.spacers.spacer10");
53
- height:theme("digitv2.spacers.spacer10");
52
+ width: var(--digitv2-spacers-spacer10);
53
+ height:var(--digitv2-spacers-spacer10);
54
54
  }
55
55
  }
56
56
 
57
57
  &.iconBg {
58
- background-color: theme("digitv2.lightTheme.primary-1");
58
+ background-color: var(--digitv2-lightTheme-primary-1);
59
59
  border-radius: 0.125rem;
60
60
  }
61
61
  }
62
62
 
63
63
  &.right{
64
64
  &.iconBg {
65
- gap:theme("digitv2.spacers.spacer4");
65
+ gap:var(--digitv2-spacers-spacer4);
66
66
  }
67
67
  }
68
68
 
@@ -72,26 +72,26 @@
72
72
 
73
73
  .ladingcard-moduleName {
74
74
  @include typography-heading-m;
75
- font-family: theme("digitv2.fontFamily.sans");
76
- font-style: theme("digitv2.fontStyle.normal");
77
- font-weight: theme("digitv2.fontWeight.bold");
78
- line-height: theme("digitv2.lineHeight.lineheight1");
75
+ font-family: var(--digitv2-fontFamily-sans);
76
+ font-style: var(--digitv2-fontStyle-normal);
77
+ font-weight: var(--digitv2-fontWeight-bold);
78
+ line-height: var(--digitv2-lineHeight-lineheight1);
79
79
 
80
80
  @media (max-aspect-ratio: 9/16) {
81
81
  /* Media query for mobile */
82
- font-size: theme("digitv2.fontSize.heading-m.mobile");
82
+ font-size: var(--digitv2-fontSize-heading-m-mobile);
83
83
  }
84
84
 
85
85
  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
86
86
  /* Media query for tablets */
87
- font-size: theme("digitv2.fontSize.heading-m.tablet");
87
+ font-size: var(--digitv2-fontSize-heading-m-tablet);
88
88
  }
89
89
 
90
90
  @media (min-aspect-ratio: 3/4) {
91
91
  /* Media query for desktop */
92
- font-size: theme("digitv2.fontSize.heading-m.desktop");
92
+ font-size: var(--digitv2-fontSize-heading-m-desktop);
93
93
  }
94
- color: theme("digitv2.lightTheme.primary-2");
94
+ color: var(--digitv2-lightTheme-primary-2);
95
95
  overflow: hidden;
96
96
  word-wrap: break-word;
97
97
  word-break: break-word;
@@ -132,26 +132,26 @@
132
132
 
133
133
  .metric-count {
134
134
  @include typography-heading-m;
135
- font-family: theme("digitv2.fontFamily.sans");
136
- font-style: theme("digitv2.fontStyle.normal");
137
- font-weight: theme("digitv2.fontWeight.bold");
138
- line-height: theme("digitv2.lineHeight.lineheight1");
135
+ font-family: var(--digitv2-fontFamily-sans);
136
+ font-style: var(--digitv2-fontStyle-normal);
137
+ font-weight: var(--digitv2-fontWeight-bold);
138
+ line-height: var(--digitv2-lineHeight-lineheight1);
139
139
 
140
140
  @media (max-aspect-ratio: 9/16) {
141
141
  /* Media query for mobile */
142
- font-size: theme("digitv2.fontSize.heading-m.mobile");
142
+ font-size: var(--digitv2-fontSize-heading-m-mobile);
143
143
  }
144
144
 
145
145
  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
146
146
  /* Media query for tablets */
147
- font-size: theme("digitv2.fontSize.heading-m.tablet");
147
+ font-size: var(--digitv2-fontSize-heading-m-tablet);
148
148
  }
149
149
 
150
150
  @media (min-aspect-ratio: 3/4) {
151
151
  /* Media query for desktop */
152
- font-size: theme("digitv2.fontSize.heading-m.desktop");
152
+ font-size: var(--digitv2-fontSize-heading-m-desktop);
153
153
  }
154
- color: theme("digitv2.lightTheme.text-primary");
154
+ color: var(--digitv2-lightTheme-text-primary);
155
155
  }
156
156
 
157
157
  .metric-label {
@@ -163,25 +163,25 @@
163
163
  white-space: nowrap;
164
164
  overflow: hidden;
165
165
  text-overflow: ellipsis;
166
- color: theme("digitv2.lightTheme.generic-inputborder");
167
- font-family: theme("digitv2.fontFamily.sans");
168
- font-style: theme("digitv2.fontStyle.normal");
169
- font-weight: theme("digitv2.fontWeight.regular");
170
- line-height: theme("digitv2.lineHeight.lineheight2");
166
+ color: var(--digitv2-lightTheme-generic-inputborder);
167
+ font-family: var(--digitv2-fontFamily-sans);
168
+ font-style: var(--digitv2-fontStyle-normal);
169
+ font-weight: var(--digitv2-fontWeight-regular);
170
+ line-height: var(--digitv2-lineHeight-lineheight2);
171
171
 
172
172
  @media (max-aspect-ratio: 9/16) {
173
173
  /* Media query for mobile */
174
- font-size: theme("digitv2.fontSize.body-xs.mobile");
174
+ font-size: var(--digitv2-fontSize-body-xs-mobile);
175
175
  }
176
176
 
177
177
  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
178
178
  /* Media query for tablets */
179
- font-size: theme("digitv2.fontSize.body-xs.tablet");
179
+ font-size: var(--digitv2-fontSize-body-xs-tablet);
180
180
  }
181
181
 
182
182
  @media (min-aspect-ratio: 3/4) {
183
183
  /* Media query for desktop */
184
- font-size: theme("digitv2.fontSize.body-xs.desktop");
184
+ font-size: var(--digitv2-fontSize-body-xs-desktop);
185
185
  }
186
186
  }
187
187
  }
@@ -200,56 +200,56 @@
200
200
 
201
201
  .digit-landingpage-divider {
202
202
  width: 100%;
203
- margin: theme("digitv2.spacers.spacer0");
203
+ margin: var(--digitv2-spacers-spacer0);
204
204
  }
205
205
 
206
206
  .landingpagecard-section{
207
207
  display: flex;
208
208
  flex-direction: column;
209
- color: theme("digitv2.lightTheme.text-primary");
209
+ color: var(--digitv2-lightTheme-text-primary);
210
210
  @include typography-body-s;
211
211
  text-align: left;
212
212
  justify-content: flex-start;
213
213
  @media (max-aspect-ratio: 9/16) {
214
214
  /* Media query for mobile */
215
- font-size: theme("digitv2.fontSize.body-s.mobile");
216
- font-family: theme("digitv2.fontFamily.sans");
217
- font-style: theme("digitv2.fontStyle.normal");
218
- font-weight: theme("digitv2.fontWeight.regular");
219
- line-height: theme("digitv2.lineHeight.lineheight2");
215
+ font-size: var( --digitv2-fontSize-body-s-mobile);
216
+ font-family: var(--digitv2-fontFamily-sans);
217
+ font-style: var(--digitv2-fontStyle-normal);
218
+ font-weight: var(--digitv2-fontWeight-regular);
219
+ line-height: var(--digitv2-lineHeight-lineheight2);
220
220
  }
221
221
 
222
222
  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
223
223
  /* Media query for tablets */
224
- font-size: theme("digitv2.fontSize.body-s.tablet");
225
- font-family: theme("digitv2.fontFamily.sans");
226
- font-style: theme("digitv2.fontStyle.normal");
227
- font-weight: theme("digitv2.fontWeight.regular");
228
- line-height: theme("digitv2.lineHeight.lineheight2");
224
+ font-size: var( --digitv2-fontSize-body-s-tablet);
225
+ font-family: var(--digitv2-fontFamily-sans);
226
+ font-style: var(--digitv2-fontStyle-normal);
227
+ font-weight: var(--digitv2-fontWeight-regular);
228
+ line-height: var(--digitv2-lineHeight-lineheight2);
229
229
  }
230
230
 
231
231
  @media (min-aspect-ratio: 3/4) {
232
232
  /* Media query for desktop */
233
- font-size: theme("digitv2.fontSize.body-s.desktop");
234
- font-family: theme("digitv2.fontFamily.sans");
235
- font-style: theme("digitv2.fontStyle.normal");
236
- font-weight: theme("digitv2.fontWeight.regular");
237
- line-height: theme("digitv2.lineHeight.lineheight2");
233
+ font-size: var( --digitv2-fontSize-body-s-desktop);
234
+ font-family: var(--digitv2-fontFamily-sans);
235
+ font-style: var(--digitv2-fontStyle-normal);
236
+ font-weight: var(--digitv2-fontWeight-regular);
237
+ line-height: var(--digitv2-lineHeight-lineheight2);
238
238
  }
239
239
 
240
240
  @media (max-aspect-ratio: 9/16) {
241
241
  /* Media query for mobile */
242
- gap: theme("digitv2.spacers.spacer4");
242
+ gap: var(--digitv2-spacers-spacer4);
243
243
  }
244
244
 
245
245
  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
246
246
  /* Media query for tablets */
247
- gap: theme("digitv2.spacers.spacer5");
247
+ gap: var(--digitv2-spacers-spacer5);
248
248
  }
249
249
 
250
250
  @media (min-aspect-ratio: 3/4) {
251
251
  /* Media query for desktop */
252
- gap: theme("digitv2.spacers.spacer6");
252
+ gap: var(--digitv2-spacers-spacer6);
253
253
  }
254
254
  }
255
255
 
@@ -266,16 +266,16 @@
266
266
  @media (max-aspect-ratio: 9/16) {
267
267
  /* Media query for mobile */
268
268
  flex-direction: column;
269
- gap: theme("digitv2.spacers.spacer4");
269
+ gap: var(--digitv2-spacers-spacer4);
270
270
  }
271
271
 
272
272
  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
273
273
  /* Media query for tablets */
274
- gap: theme("digitv2.spacers.spacer5");
274
+ gap: var(--digitv2-spacers-spacer5);
275
275
  }
276
276
 
277
277
  @media (min-aspect-ratio: 3/4) {
278
278
  /* Media query for desktop */
279
- gap: theme("digitv2.spacers.spacer6");
279
+ gap: var(--digitv2-spacers-spacer6);
280
280
  }
281
281
  }
package/src/digitv2/components/loaderV2.scss CHANGED
@@ -14,7 +14,7 @@
14
14
 
15
15
  .digit-loader-text {
16
16
  @include typography-caption-s;
17
- color: theme("digitv2.lightTheme.primary-2");
17
+ color: var(--digitv2-lightTheme-primary-2);
18
18
  }
19
19
 
20
20
  &.PageLoader {
@@ -38,13 +38,13 @@
38
38
  -webkit-backdrop-filter: blur(0.125rem);
39
39
 
40
40
  .digit-loader-text{
41
- color: theme("digitv2.lightTheme.paper-primary");
41
+ color: var(--digitv2-lightTheme-paper-primary);
42
42
  }
43
43
  }
44
44
  }
45
45
 
46
46
  .custom-loader-example{
47
47
  .digit-loader-text{
48
- color: theme("digitv2.lightTheme.primary-1");
48
+ color: var(--digitv2-lightTheme-primary-1);
49
49
  }
50
50
  }
package/src/digitv2/components/menuCardV2.scss CHANGED
@@ -5,39 +5,39 @@
5
5
 
6
6
  display: flex;
7
7
  flex-direction: column;
8
- gap: theme("digitv2.spacers.spacer3");
8
+ gap: var(--digitv2-spacers-spacer3);
9
9
  justify-content: flex-start;
10
10
  cursor: pointer;
11
11
 
12
12
  &.clickable:hover{
13
- border: 0.063rem solid theme("digitv2.lightTheme.primary-1");
14
- box-shadow: 0.063rem theme("digitv2.spacers.spacer1") theme("digitv2.spacers.spacer1") theme("digitv2.spacers.spacer0") #00000029;
13
+ border: 0.063rem solid var(--digitv2-lightTheme-primary-1);
14
+ box-shadow: 0.063rem var(--digitv2-spacers-spacer1) var(--digitv2-spacers-spacer1) var(--digitv2-spacers-spacer0) #00000029;
15
15
  }
16
16
 
17
17
  .icon-menu-header {
18
18
 
19
19
  display: flex !important;
20
20
  align-items: center;
21
- gap: theme("digitv2.spacers.spacer2");
21
+ gap: var(--digitv2-spacers-spacer2);
22
22
 
23
23
  .digit-menucard-icon {
24
24
 
25
25
  @media (max-aspect-ratio: 9/16) {
26
26
  /* Media query for mobile */
27
- width: theme("digitv2.spacers.spacer6");
28
- height: theme("digitv2.spacers.spacer6");
27
+ width: var(--digitv2-spacers-spacer6);
28
+ height: var(--digitv2-spacers-spacer6);
29
29
  }
30
30
 
31
31
  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
32
32
  /* Media query for tablets */
33
- width: theme("digitv2.spacers.spacer8");
34
- height: theme("digitv2.spacers.spacer8");
33
+ width: var(--digitv2-spacers-spacer8);
34
+ height: var(--digitv2-spacers-spacer8);
35
35
  }
36
36
 
37
37
  @media (min-aspect-ratio: 3/4) {
38
38
  /* Media query for desktop */
39
- width: theme("digitv2.spacers.spacer10");
40
- height: theme("digitv2.spacers.spacer10");
39
+ width: var(--digitv2-spacers-spacer10);
40
+ height: var(--digitv2-spacers-spacer10);
41
41
  }
42
42
  }
43
43
 
@@ -47,53 +47,53 @@
47
47
 
48
48
  .digit-menuacard-menuName {
49
49
  @include typography-heading-m;
50
- font-family: theme("digitv2.fontFamily.sans");
51
- font-style: theme("digitv2.fontStyle.normal");
52
- font-weight: theme("digitv2.fontWeight.bold");
53
- line-height: theme("digitv2.lineHeight.lineheight1");
50
+ font-family: var(--digitv2-fontFamily-sans);
51
+ font-style: var(--digitv2-fontStyle-normal);
52
+ font-weight: var(--digitv2-fontWeight-bold);
53
+ line-height: var(--digitv2-lineHeight-lineheight1);
54
54
 
55
55
  @media (max-aspect-ratio: 9/16) {
56
56
  /* Media query for mobile */
57
- font-size: theme("digitv2.fontSize.heading-m.mobile");
57
+ font-size: var(--digitv2-fontSize-heading-m-mobile);
58
58
  }
59
59
 
60
60
  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
61
61
  /* Media query for tablets */
62
- font-size: theme("digitv2.fontSize.heading-m.tablet");
62
+ font-size: var(--digitv2-fontSize-heading-m-tablet);
63
63
  }
64
64
 
65
65
  @media (min-aspect-ratio: 3/4) {
66
66
  /* Media query for desktop */
67
- font-size: theme("digitv2.fontSize.heading-m.desktop");
67
+ font-size: var(--digitv2-fontSize-heading-m-desktop);
68
68
  }
69
69
  line-height: normal;
70
- color: theme("digitv2.lightTheme.primary-2");
70
+ color: var(--digitv2-lightTheme-primary-2);
71
71
  }
72
72
  }
73
73
 
74
74
  .digit-menucard-description {
75
75
  @include typography-body-s;
76
- font-family: theme("digitv2.fontFamily.sans");
77
- font-style: theme("digitv2.fontStyle.normal");
78
- font-weight: theme("digitv2.fontWeight.regular");
79
- line-height: theme("digitv2.lineHeight.lineheight2");
76
+ font-family: var(--digitv2-fontFamily-sans);
77
+ font-style: var(--digitv2-fontStyle-normal);
78
+ font-weight: var(--digitv2-fontWeight-regular);
79
+ line-height: var(--digitv2-lineHeight-lineheight2);
80
80
 
81
81
  @media (max-aspect-ratio: 9/16) {
82
82
  /* Media query for mobile */
83
- font-size: theme("digitv2.fontSize.body-s.mobile");
83
+ font-size: var( --digitv2-fontSize-body-s-mobile);
84
84
  }
85
85
 
86
86
  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
87
87
  /* Media query for tablets */
88
- font-size: theme("digitv2.fontSize.body-s.tablet");
88
+ font-size: var( --digitv2-fontSize-body-s-tablet);
89
89
  }
90
90
 
91
91
  @media (min-aspect-ratio: 3/4) {
92
92
  /* Media query for desktop */
93
- font-size: theme("digitv2.fontSize.body-s.desktop");
93
+ font-size: var( --digitv2-fontSize-body-s-desktop);
94
94
  }
95
95
 
96
- color: theme("digitv2.lightTheme.text-primary");
96
+ color: var(--digitv2-lightTheme-text-primary);
97
97
  }
98
98
  }
99
99
 
@@ -103,17 +103,17 @@
103
103
 
104
104
  @media (max-aspect-ratio: 9/16) {
105
105
  /* Media query for mobile */
106
- gap: theme("digitv2.spacers.spacer4");
106
+ gap: var(--digitv2-spacers-spacer4);
107
107
  }
108
108
 
109
109
  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
110
110
  /* Media query for tablets */
111
- gap: theme("digitv2.spacers.spacer5");
111
+ gap: var(--digitv2-spacers-spacer5);
112
112
  }
113
113
 
114
114
  @media (min-aspect-ratio: 3/4) {
115
115
  /* Media query for desktop */
116
- gap: theme("digitv2.spacers.spacer6");
116
+ gap: var(--digitv2-spacers-spacer6);
117
117
  }
118
118
 
119
119
  }