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