@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/popUpV2.scss CHANGED
@@ -18,9 +18,9 @@
18
18
  .digit-popup-wrapper {
19
19
  @apply w-full h-auto flex-col fixed;
20
20
  z-index: 10000;
21
- background-color: theme("digitv2.lightTheme.paper-primary");
22
- border-radius: theme("digitv2.spacers.spacer1");
23
- box-shadow: theme("digitv2.spacers.spacer0") 0.063rem 0.125rem theme("digitv2.spacers.spacer0") #00000029;
21
+ background-color: var(--digitv2-lightTheme-paper-primary);
22
+ border-radius: var(--digitv2-spacers-spacer1);
23
+ box-shadow: var(--digitv2-spacers-spacer0) 0.063rem 0.125rem var(--digitv2-spacers-spacer0) #00000029;
24
24
  display: flex;
25
25
  top: 50%;
26
26
  left: 50%;
@@ -51,22 +51,22 @@
51
51
  @apply items-center cursor-pointer absolute;
52
52
  display: flex;
53
53
  justify-content: flex-end;
54
- width: theme("digitv2.spacers.spacer6");
55
- height: theme("digitv2.spacers.spacer6");
54
+ width: var(--digitv2-spacers-spacer6);
55
+ height: var(--digitv2-spacers-spacer6);
56
56
 
57
57
  @media (min-width: 48rem) {
58
- top: theme("digitv2.spacers.spacer3");
59
- right: theme("digitv2.spacers.spacer3");
58
+ top: var(--digitv2-spacers-spacer3);
59
+ right: var(--digitv2-spacers-spacer3);
60
60
  }
61
61
 
62
62
  @media (min-width: 30.063rem) and (max-width: 47.938rem) {
63
- top: theme("digitv2.spacers.spacer3");
64
- right: theme("digitv2.spacers.spacer3");
63
+ top: var(--digitv2-spacers-spacer3);
64
+ right: var(--digitv2-spacers-spacer3);
65
65
  }
66
66
 
67
67
  @media (max-width: 30rem) {
68
- top: theme("digitv2.spacers.spacer2");
69
- right: theme("digitv2.spacers.spacer2");
68
+ top: var(--digitv2-spacers-spacer2);
69
+ right: var(--digitv2-spacers-spacer2);
70
70
  }
71
71
 
72
72
 
@@ -74,8 +74,8 @@
74
74
  flex-shrink: 0;
75
75
 
76
76
  @media (min-width: 48rem) {
77
- width: theme("digitv2.spacers.spacer7") !important;
78
- height: theme("digitv2.spacers.spacer7") !important;
77
+ width: var(--digitv2-spacers-spacer7) !important;
78
+ height: var(--digitv2-spacers-spacer7) !important;
79
79
  }
80
80
 
81
81
  }
@@ -84,11 +84,11 @@
84
84
  .digit-popup-header {
85
85
  @apply flex-col;
86
86
  display: flex !important;
87
- gap: theme("digitv2.spacers.spacer4");
87
+ gap: var(--digitv2-spacers-spacer4);
88
88
 
89
89
  .digit-popup-icon-header-container {
90
90
  display: flex !important;
91
- gap: theme("digitv2.spacers.spacer2");
91
+ gap: var(--digitv2-spacers-spacer2);
92
92
 
93
93
  svg {
94
94
  flex-shrink: 0;
@@ -97,8 +97,8 @@
97
97
  .digit-popup-heading-subheading-wrap {
98
98
  @apply flex-col;
99
99
  display: flex !important;
100
- gap: theme("digitv2.spacers.spacer1");
101
- color: theme("digitv2.lightTheme.text-primary");
100
+ gap: var(--digitv2-spacers-spacer1);
101
+ color: var(--digitv2-lightTheme-text-primary);
102
102
 
103
103
  .digit-popup-heading {
104
104
  @include typography-heading-l;
@@ -112,33 +112,33 @@
112
112
  }
113
113
 
114
114
  &.with-shadow {
115
- box-shadow: theme("digitv2.spacers.spacer0") 0.063rem 0.125rem theme("digitv2.spacers.spacer0") #00000026;
115
+ box-shadow: var(--digitv2-spacers-spacer0) 0.063rem 0.125rem var(--digitv2-spacers-spacer0) #00000026;
116
116
  }
117
117
 
118
118
  @media (min-width: 48rem) {
119
- padding: theme("digitv2.spacers.spacer6");
120
- padding-bottom: theme("digitv2.spacers.spacer0");
119
+ padding: var(--digitv2-spacers-spacer6);
120
+ padding-bottom: var(--digitv2-spacers-spacer0);
121
121
 
122
122
  &.with-shadow {
123
- padding-bottom: theme("digitv2.spacers.spacer6");
123
+ padding-bottom: var(--digitv2-spacers-spacer6);
124
124
  }
125
125
  }
126
126
 
127
127
  @media (min-width: 30.063rem) and (max-width: 47.938rem) {
128
- padding: theme("digitv2.spacers.spacer5");
129
- padding-bottom: theme("digitv2.spacers.spacer0");
128
+ padding: var(--digitv2-spacers-spacer5);
129
+ padding-bottom: var(--digitv2-spacers-spacer0);
130
130
 
131
131
  &.with-shadow {
132
- padding-bottom: theme("digitv2.spacers.spacer5");
132
+ padding-bottom: var(--digitv2-spacers-spacer5);
133
133
  }
134
134
  }
135
135
 
136
136
  @media (max-width: 30rem) {
137
- padding: theme("digitv2.spacers.spacer4");
138
- padding-bottom: theme("digitv2.spacers.spacer0");
137
+ padding: var(--digitv2-spacers-spacer4);
138
+ padding-bottom: var(--digitv2-spacers-spacer0);
139
139
 
140
140
  &.with-shadow {
141
- padding-bottom: theme("digitv2.spacers.spacer4");
141
+ padding-bottom: var(--digitv2-spacers-spacer4);
142
142
  }
143
143
  }
144
144
 
@@ -146,59 +146,59 @@
146
146
 
147
147
  .digit-popup-children-wrap {
148
148
  @include typography-body-s;
149
- font-family: theme("digitv2.fontFamily.sans");
150
- font-style: theme("digitv2.fontStyle.normal");
151
- font-weight: theme("digitv2.fontWeight.regular");
152
- line-height: theme("digitv2.lineHeight.lineheight2");
149
+ font-family: var(--digitv2-fontFamily-sans);
150
+ font-style: var(--digitv2-fontStyle-normal);
151
+ font-weight: var(--digitv2-fontWeight-regular);
152
+ line-height: var(--digitv2-lineHeight-lineheight2);
153
153
 
154
154
  @media (max-aspect-ratio: 9/16) {
155
155
  /* Media query for mobile */
156
- font-size: theme("digitv2.fontSize.body-s.mobile");
156
+ font-size: var( --digitv2-fontSize-body-s-mobile);
157
157
  }
158
158
 
159
159
  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
160
160
  /* Media query for tablets */
161
- font-size: theme("digitv2.fontSize.body-s.tablet");
161
+ font-size: var( --digitv2-fontSize-body-s-tablet);
162
162
  }
163
163
 
164
164
  @media (min-aspect-ratio: 3/4) {
165
165
  /* Media query for desktop */
166
- font-size: theme("digitv2.fontSize.body-s.desktop");
166
+ font-size: var( --digitv2-fontSize-body-s-desktop);
167
167
  }
168
168
  @apply overflow-hidden overflow-y-auto flex-col;
169
169
  display: flex;
170
170
  flex: 1;
171
- color: theme("digitv2.lightTheme.text-primary");
171
+ color: var(--digitv2-lightTheme-text-primary);
172
172
 
173
173
  .digit-popup-description {
174
174
  @include typography-body-s;
175
175
  @media (max-aspect-ratio: 9/16) {
176
176
  /* Media query for mobile */
177
- font-size: theme("digitv2.fontSize.body-s.mobile");
178
- font-family: theme("digitv2.fontFamily.sans");
179
- font-style: theme("digitv2.fontStyle.normal");
180
- font-weight: theme("digitv2.fontWeight.regular");
181
- line-height: theme("digitv2.lineHeight.lineheight2");
177
+ font-size: var( --digitv2-fontSize-body-s-mobile);
178
+ font-family: var(--digitv2-fontFamily-sans);
179
+ font-style: var(--digitv2-fontStyle-normal);
180
+ font-weight: var(--digitv2-fontWeight-regular);
181
+ line-height: var(--digitv2-lineHeight-lineheight2);
182
182
  }
183
183
 
184
184
  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
185
185
  /* Media query for tablets */
186
- font-size: theme("digitv2.fontSize.body-s.tablet");
187
- font-family: theme("digitv2.fontFamily.sans");
188
- font-style: theme("digitv2.fontStyle.normal");
189
- font-weight: theme("digitv2.fontWeight.regular");
190
- line-height: theme("digitv2.lineHeight.lineheight2");
186
+ font-size: var( --digitv2-fontSize-body-s-tablet);
187
+ font-family: var(--digitv2-fontFamily-sans);
188
+ font-style: var(--digitv2-fontStyle-normal);
189
+ font-weight: var(--digitv2-fontWeight-regular);
190
+ line-height: var(--digitv2-lineHeight-lineheight2);
191
191
  }
192
192
 
193
193
  @media (min-aspect-ratio: 3/4) {
194
194
  /* Media query for desktop */
195
- font-size: theme("digitv2.fontSize.body-s.desktop");
196
- font-family: theme("digitv2.fontFamily.sans");
197
- font-style: theme("digitv2.fontStyle.normal");
198
- font-weight: theme("digitv2.fontWeight.regular");
199
- line-height: theme("digitv2.lineHeight.lineheight2");
195
+ font-size: var( --digitv2-fontSize-body-s-desktop);
196
+ font-family: var(--digitv2-fontFamily-sans);
197
+ font-style: var(--digitv2-fontStyle-normal);
198
+ font-weight: var(--digitv2-fontWeight-regular);
199
+ line-height: var(--digitv2-lineHeight-lineheight2);
200
200
  }
201
- color: theme("digitv2.lightTheme.text-primary");
201
+ color: var(--digitv2-lightTheme-text-primary);
202
202
  }
203
203
 
204
204
  &.inline {
@@ -206,34 +206,34 @@
206
206
  }
207
207
 
208
208
  @media (min-width: 48rem) {
209
- gap: theme("digitv2.spacers.spacer6");
210
- padding: theme("digitv2.spacers.spacer6") theme("digitv2.spacers.spacer6") theme("digitv2.spacers.spacer0") theme("digitv2.spacers.spacer6");
209
+ gap: var(--digitv2-spacers-spacer6);
210
+ padding: var(--digitv2-spacers-spacer6) var(--digitv2-spacers-spacer6) var(--digitv2-spacers-spacer0) var(--digitv2-spacers-spacer6);
211
211
 
212
212
  &.with-shadow,
213
213
  &.without-footer{
214
- padding: theme("digitv2.spacers.spacer6");
214
+ padding: var(--digitv2-spacers-spacer6);
215
215
  }
216
216
 
217
217
  }
218
218
 
219
219
  @media (min-width: 30.063rem) and (max-width: 47.938rem) {
220
- gap: theme("digitv2.spacers.spacer5");
221
- padding: theme("digitv2.spacers.spacer5") theme("digitv2.spacers.spacer5") theme("digitv2.spacers.spacer0") theme("digitv2.spacers.spacer5");
220
+ gap: var(--digitv2-spacers-spacer5);
221
+ padding: var(--digitv2-spacers-spacer5) var(--digitv2-spacers-spacer5) var(--digitv2-spacers-spacer0) var(--digitv2-spacers-spacer5);
222
222
 
223
223
  &.with-shadow,
224
224
  &.without-footer{
225
- padding: theme("digitv2.spacers.spacer5");
225
+ padding: var(--digitv2-spacers-spacer5);
226
226
  }
227
227
 
228
228
  }
229
229
 
230
230
  @media (max-width: 30rem) {
231
- gap: theme("digitv2.spacers.spacer4");
232
- padding: theme("digitv2.spacers.spacer4") theme("digitv2.spacers.spacer4") theme("digitv2.spacers.spacer0") theme("digitv2.spacers.spacer4");
231
+ gap: var(--digitv2-spacers-spacer4);
232
+ padding: var(--digitv2-spacers-spacer4) var(--digitv2-spacers-spacer4) var(--digitv2-spacers-spacer0) var(--digitv2-spacers-spacer4);
233
233
 
234
234
  &.with-shadow,
235
235
  &.without-footer{
236
- padding: theme("digitv2.spacers.spacer4");
236
+ padding: var(--digitv2-spacers-spacer4);
237
237
  }
238
238
  }
239
239
  }
@@ -241,31 +241,31 @@
241
241
  .digit-popup-footer {
242
242
  @apply flex-wrap;
243
243
  display: flex;
244
- gap: theme("digitv2.spacers.spacer4");
244
+ gap: var(--digitv2-spacers-spacer4);
245
245
 
246
246
  &.with-shadow {
247
- box-shadow: theme("digitv2.spacers.spacer0") -0.063rem 0.125rem theme("digitv2.spacers.spacer0") #00000026;
247
+ box-shadow: var(--digitv2-spacers-spacer0) -0.063rem 0.125rem var(--digitv2-spacers-spacer0) #00000026;
248
248
  }
249
249
 
250
250
  @media (min-width: 48rem) {
251
- padding: theme("digitv2.spacers.spacer6");
251
+ padding: var(--digitv2-spacers-spacer6);
252
252
  }
253
253
 
254
254
  @media (min-width: 30.063rem) and (max-width: 47.938rem) {
255
255
  @apply w-full;
256
- padding: theme("digitv2.spacers.spacer5");
256
+ padding: var(--digitv2-spacers-spacer5);
257
257
  }
258
258
 
259
259
  @media (max-width: 30rem) {
260
260
  @apply flex-col;
261
- padding: theme("digitv2.spacers.spacer4");
261
+ padding: var(--digitv2-spacers-spacer4);
262
262
  }
263
263
  }
264
264
 
265
265
  .digit-popup-footer-buttons {
266
266
  margin-left: auto;
267
267
  display: flex;
268
- gap: theme("digitv2.spacers.spacer4");
268
+ gap: var(--digitv2-spacers-spacer4);
269
269
  @apply max-w-full flex-wrap;
270
270
 
271
271
  @media (min-width: 30.063rem) and (max-width: 47.938rem) {
@@ -278,7 +278,7 @@
278
278
 
279
279
  @media (max-width: 30rem) {
280
280
  @apply flex-col;
281
- margin: theme("digitv2.spacers.spacer0");
281
+ margin: var(--digitv2-spacers-spacer0);
282
282
 
283
283
  button {
284
284
  width: 100%;
@@ -310,54 +310,54 @@
310
310
  .digit-popup-alert-content {
311
311
  @apply flex-col items-center;
312
312
  display: flex;
313
- gap: theme("digitv2.spacers.spacer2");
313
+ gap: var(--digitv2-spacers-spacer2);
314
314
 
315
315
  .digit-popup-alert-heading {
316
316
  @include typography-heading-l;
317
317
  line-height: normal;
318
- color: theme("digitv2.lightTheme.text-primary");
318
+ color: var(--digitv2-lightTheme-text-primary);
319
319
  }
320
320
 
321
321
  .digit-popup-alert-message {
322
322
  @include typography-caption-s;
323
323
  text-align: center;
324
- color: theme("digitv2.lightTheme.text-primary");
324
+ color: var(--digitv2-lightTheme-text-primary);
325
325
  }
326
326
 
327
327
  &.with-shadow {
328
- box-shadow: theme("digitv2.spacers.spacer0") 0.063rem 0.125rem theme("digitv2.spacers.spacer0") #00000026;
328
+ box-shadow: var(--digitv2-spacers-spacer0) 0.063rem 0.125rem var(--digitv2-spacers-spacer0) #00000026;
329
329
  }
330
330
 
331
331
  @media (min-width: 48rem) {
332
- padding: theme("digitv2.spacers.spacer6");
333
- padding-bottom: theme("digitv2.spacers.spacer0");
332
+ padding: var(--digitv2-spacers-spacer6);
333
+ padding-bottom: var(--digitv2-spacers-spacer0);
334
334
 
335
335
  &.with-shadow {
336
- padding-bottom: theme("digitv2.spacers.spacer6");
336
+ padding-bottom: var(--digitv2-spacers-spacer6);
337
337
  }
338
338
  }
339
339
 
340
340
  @media (min-width: 30.063rem) and (max-width: 47.938rem) {
341
- padding: theme("digitv2.spacers.spacer5");
342
- padding-bottom: theme("digitv2.spacers.spacer0");
341
+ padding: var(--digitv2-spacers-spacer5);
342
+ padding-bottom: var(--digitv2-spacers-spacer0);
343
343
 
344
344
  &.with-shadow {
345
- padding-bottom: theme("digitv2.spacers.spacer5");
345
+ padding-bottom: var(--digitv2-spacers-spacer5);
346
346
  }
347
347
  }
348
348
 
349
349
  @media (max-width: 30rem) {
350
- padding: theme("digitv2.spacers.spacer4");
351
- padding-bottom: theme("digitv2.spacers.spacer0");
350
+ padding: var(--digitv2-spacers-spacer4);
351
+ padding-bottom: var(--digitv2-spacers-spacer0);
352
352
 
353
353
  &.with-shadow {
354
- padding-bottom: theme("digitv2.spacers.spacer4");
354
+ padding-bottom: var(--digitv2-spacers-spacer4);
355
355
  }
356
356
  }
357
357
  }
358
358
 
359
359
  .popup-info-card {
360
- margin: theme("digitv2.spacers.spacer0");
360
+ margin: var(--digitv2-spacers-spacer0);
361
361
  width: 100%;
362
362
  max-width: 100%;
363
363
  min-width: 100%;
@@ -370,17 +370,17 @@
370
370
  }
371
371
 
372
372
  .digit-popup-children-wrap::-webkit-scrollbar {
373
- width: theme("digitv2.spacers.spacer2");
374
- background-color: theme("digitv2.lightTheme.generic-background");
373
+ width: var(--digitv2-spacers-spacer2);
374
+ background-color: var(--digitv2-lightTheme-generic-background);
375
375
  }
376
376
 
377
377
  .digit-popup-children-wrap::-webkit-scrollbar-track {
378
- background-color: theme("digitv2.lightTheme.generic-background");
378
+ background-color: var(--digitv2-lightTheme-generic-background);
379
379
  border-radius: 0.563rem;
380
380
  }
381
381
 
382
382
  .digit-popup-children-wrap::-webkit-scrollbar-thumb {
383
- background-color: theme("digitv2.lightTheme.generic-divider");
383
+ background-color: var(--digitv2-lightTheme-generic-divider);
384
384
  border-radius: 0.563rem;
385
385
  }
386
386
 
package/src/digitv2/components/radiobtnV2.scss CHANGED
@@ -3,7 +3,7 @@
3
3
 
4
4
  .digit-radio-options-wrap {
5
5
  @apply leading-10 flex justify-between flex-wrap;
6
- margin-bottom: theme("digitv2.spacers.spacer2");
6
+ margin-bottom: var(--digitv2-spacers-spacer2);
7
7
 
8
8
  @media (max-aspect-ratio: 9/16) {
9
9
  @apply flex-col;
@@ -22,14 +22,14 @@
22
22
 
23
23
  &:hover {
24
24
  .digit-radio-btn-checkmark {
25
- border-color: theme("digitv2.lightTheme.primary-1");
25
+ border-color: var(--digitv2-lightTheme-primary-1);
26
26
  }
27
27
  }
28
28
 
29
29
  &:active {
30
30
  .digit-radio-btn-checkmark {
31
31
  outline: 0.188rem solid #FFFAF7;
32
- border-color: theme("digitv2.lightTheme.primary-1");
32
+ border-color: var(--digitv2-lightTheme-primary-1);
33
33
  }
34
34
  }
35
35
 
@@ -37,20 +37,20 @@
37
37
 
38
38
  .radio-option-container {
39
39
  @apply inline-flex;
40
- gap: theme("digitv2.spacers.spacer2");
40
+ gap: var(--digitv2-spacers-spacer2);
41
41
  align-items: self-start;
42
42
 
43
43
  &.disabled {
44
44
  .digit-radio-btn-checkmark {
45
- border: 0.063rem solid theme("digitv2.lightTheme.text-disabled");
46
- background-color: theme("digitv2.lightTheme.paper-secondary");
45
+ border: 0.063rem solid var(--digitv2-lightTheme-text-disabled);
46
+ background-color: var(--digitv2-lightTheme-paper-secondary);
47
47
  }
48
48
  }
49
49
 
50
50
 
51
51
  &.preselected {
52
52
  .digit-radio-btn-checkmark {
53
- border: 0.125rem solid theme("digitv2.lightTheme.text-disabled");
53
+ border: 0.125rem solid var(--digitv2-lightTheme-text-disabled);
54
54
  }
55
55
 
56
56
  pointer-events: none !important;
@@ -58,7 +58,7 @@
58
58
 
59
59
  &:not(.preselected):not(.has-preselected).disabled{
60
60
  label {
61
- color: theme("digitv2.lightTheme.text-disabled");
61
+ color: var(--digitv2-lightTheme-text-disabled);
62
62
  }
63
63
  }
64
64
 
@@ -74,7 +74,7 @@
74
74
 
75
75
  .digit-radio-btn {
76
76
  @apply opacity-0 absolute cursor-pointer h-6 w-6;
77
- margin: theme("digitv2.spacers.spacer0");
77
+ margin: var(--digitv2-spacers-spacer0);
78
78
  }
79
79
 
80
80
  .digit-radio-btn-checkmark {
@@ -85,27 +85,27 @@
85
85
 
86
86
  label {
87
87
  @include typography-body-s;
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");
88
+ font-family: var(--digitv2-fontFamily-sans);
89
+ font-style: var(--digitv2-fontStyle-normal);
90
+ font-weight: var(--digitv2-fontWeight-regular);
91
+ line-height: var(--digitv2-lineHeight-lineheight2);
92
92
  margin-top: 0.065rem;
93
93
 
94
94
  @media (max-aspect-ratio: 9/16) {
95
95
  /* Media query for mobile */
96
- font-size: theme("digitv2.fontSize.body-s.mobile");
96
+ font-size: var( --digitv2-fontSize-body-s-mobile);
97
97
  }
98
98
 
99
99
  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
100
100
  /* Media query for tablets */
101
- font-size: theme("digitv2.fontSize.body-s.tablet");
101
+ font-size: var( --digitv2-fontSize-body-s-tablet);
102
102
  }
103
103
 
104
104
  @media (min-aspect-ratio: 3/4) {
105
105
  /* Media query for desktop */
106
- font-size: theme("digitv2.fontSize.body-s.desktop");
106
+ font-size: var( --digitv2-fontSize-body-s-desktop);
107
107
  }
108
- color: theme("digitv2.lightTheme.text-primary");
108
+ color: var(--digitv2-lightTheme-text-primary);
109
109
  overflow-wrap: anywhere;
110
110
  }
111
111
 
@@ -114,7 +114,7 @@
114
114
  }
115
115
 
116
116
  .digit-radio-btn-wrap input:checked~.digit-radio-btn-checkmark {
117
- border: 0.125rem solid theme("digitv2.lightTheme.primary-1");
117
+ border: 0.125rem solid var(--digitv2-lightTheme-primary-1);
118
118
  }
119
119
 
120
120
  .digit-radio-btn-wrap input:checked~.digit-radio-btn-checkmark:after {
@@ -122,11 +122,11 @@
122
122
  left: 50%;
123
123
  transform: translate(-50%);
124
124
  top: 25%;
125
- background-color: theme("digitv2.lightTheme.primary-1");
125
+ background-color: var(--digitv2-lightTheme-primary-1);
126
126
  }
127
127
 
128
128
  .preselected .digit-radio-btn-wrap input:checked~.digit-radio-btn-checkmark {
129
- border: 0.125rem solid theme("digitv2.lightTheme.generic-divider");
129
+ border: 0.125rem solid var(--digitv2-lightTheme-generic-divider);
130
130
  }
131
131
 
132
132
  .preselected .digit-radio-btn-wrap input:checked~.digit-radio-btn-checkmark:after {
@@ -134,7 +134,7 @@
134
134
  left: 50%;
135
135
  transform: translate(-50%);
136
136
  top: 25%;
137
- background-color: theme("digitv2.lightTheme.text-disabled");
137
+ background-color: var(--digitv2-lightTheme-text-disabled);
138
138
  }
139
139
  }
140
140