@egovernments/digit-ui-components-css 0.2.3 → 2.0.0-dev-01

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (70) hide show
  1. package/dist/index.css +3 -15427
  2. package/package.json +30 -35
  3. package/src/digitv2/components/FormComposerV2.scss +6 -5
  4. package/src/digitv2/components/accordionV2.scss +59 -59
  5. package/src/digitv2/components/alertCardV2.scss +43 -43
  6. package/src/digitv2/components/backLinkV2.scss +11 -8
  7. package/src/digitv2/components/bodyContainerV2.scss +2 -1
  8. package/src/digitv2/components/bottomSheetV2.scss +22 -19
  9. package/src/digitv2/components/breadcrumbV2.scss +27 -25
  10. package/src/digitv2/components/buttonsV2.scss +72 -72
  11. package/src/digitv2/components/cardV2.scss +18 -17
  12. package/src/digitv2/components/cardbasedoptionsV2.scss +4 -1
  13. package/src/digitv2/components/cardlabelV2.scss +4 -3
  14. package/src/digitv2/components/checkboxV2.scss +33 -32
  15. package/src/digitv2/components/chipV2.scss +46 -43
  16. package/src/digitv2/components/dividerV2.scss +7 -4
  17. package/src/digitv2/components/errorMessageV2.scss +15 -15
  18. package/src/digitv2/components/fieldV1.scss +65 -64
  19. package/src/digitv2/components/fileUploadV2.scss +129 -126
  20. package/src/digitv2/components/filterCardV2.scss +54 -51
  21. package/src/digitv2/components/footerV2.scss +14 -13
  22. package/src/digitv2/components/formCardV2.scss +52 -49
  23. package/src/digitv2/components/hamburgerV2.scss +145 -142
  24. package/src/digitv2/components/headerV2.scss +60 -57
  25. package/src/digitv2/components/headerdropdownV2.scss +72 -69
  26. package/src/digitv2/components/infobuttonV2.scss +18 -15
  27. package/src/digitv2/components/labelFieldPairV2.scss +11 -8
  28. package/src/digitv2/components/landingpagecardV2.scss +73 -70
  29. package/src/digitv2/components/loaderV2.scss +7 -4
  30. package/src/digitv2/components/menuCardV2.scss +34 -31
  31. package/src/digitv2/components/metricCardV2.scss +55 -52
  32. package/src/digitv2/components/mobileNumberV2.scss +10 -10
  33. package/src/digitv2/components/multiSelectDropdownV2.scss +170 -168
  34. package/src/digitv2/components/otpInputV2.scss +29 -26
  35. package/src/digitv2/components/panelCardV2.scss +46 -43
  36. package/src/digitv2/components/panelV2.scss +34 -31
  37. package/src/digitv2/components/popUpV2.scss +94 -91
  38. package/src/digitv2/components/radiobtnV2.scss +24 -23
  39. package/src/digitv2/components/selectDropdownV2.scss +200 -197
  40. package/src/digitv2/components/selectionTagV2.scss +32 -29
  41. package/src/digitv2/components/sidePanelV2.scss +51 -48
  42. package/src/digitv2/components/sidenavV2.scss +119 -116
  43. package/src/digitv2/components/stepperV2.scss +61 -58
  44. package/src/digitv2/components/summaryCardFieldPairV2.scss +25 -22
  45. package/src/digitv2/components/summaryCardV2.scss +30 -27
  46. package/src/digitv2/components/switchV2.scss +34 -31
  47. package/src/digitv2/components/tabV2.scss +29 -26
  48. package/src/digitv2/components/tableV2.scss +152 -149
  49. package/src/digitv2/components/tagV2.scss +27 -24
  50. package/src/digitv2/components/textInputV2.scss +101 -101
  51. package/src/digitv2/components/textareaV2.scss +23 -20
  52. package/src/digitv2/components/textblockV2.scss +31 -28
  53. package/src/digitv2/components/timelineV2.scss +64 -61
  54. package/src/digitv2/components/toastV2.scss +28 -25
  55. package/src/digitv2/components/toggleV2.scss +55 -46
  56. package/src/digitv2/components/tooltipwrapperV2.scss +97 -94
  57. package/src/digitv2/components/treeSelectV2.scss +58 -55
  58. package/src/digitv2/index.scss +136 -134
  59. package/src/digitv2/pages/employee/boundaryFilter.scss +7 -7
  60. package/src/digitv2/pages/employee/inboxsearchcomposer.scss +48 -48
  61. package/src/digitv2/pages/employee/index.scss +4 -4
  62. package/src/digitv2/pages/employee/reactdatatable.scss +13 -13
  63. package/src/digitv2/pages/employee/workbench.scss +29 -28
  64. package/src/digitv2/typography.scss +633 -640
  65. package/src/index.scss +28 -19
  66. package/src/pages/employee/index.scss +26 -26
  67. package/src/pages/employee/login.scss +4 -4
  68. package/src/theme-variables.css +137 -0
  69. package/CHANGELOG.md +0 -260
  70. package/dist/index.min.css +0 -7
package/src/digitv2/components/labelFieldPairV2.scss CHANGED
@@ -1,4 +1,7 @@
1
- .digit-label-field-pair {
1
+ @import './theme-variables.css';
2
+ @import '../typography.scss';
3
+
4
+ .digit-label-field-pair {
2
5
  @apply mb-lg flex;
3
6
 
4
7
 
@@ -7,16 +10,16 @@
7
10
  }
8
11
 
9
12
  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
10
- gap: theme(digitv2.spacers.spacer5);
13
+ gap: theme("digitv2.spacers.spacer5");
11
14
  }
12
15
 
13
16
  @media (max-aspect-ratio: 9/16) {
14
17
  @apply flex-col items-start;
15
- gap: theme(digitv2.spacers.spacer4);
18
+ gap: theme("digitv2.spacers.spacer4");
16
19
  }
17
20
 
18
21
  @media (min-aspect-ratio: 3/4) {
19
- gap: theme(digitv2.spacers.spacer6);
22
+ gap: theme("digitv2.spacers.spacer6");
20
23
  }
21
24
 
22
25
  .digit-text-block-wrap {
@@ -29,14 +32,14 @@
29
32
 
30
33
  &.vertical {
31
34
  @apply flex-col items-start;
32
- gap: theme(digitv2.spacers.spacer2);
35
+ gap: theme("digitv2.spacers.spacer2");
33
36
 
34
37
  .digit-text-block-wrap {
35
- margin-top: theme(digitv2.spacers.spacer0);
38
+ margin-top: theme("digitv2.spacers.spacer0");
36
39
  }
37
40
 
38
41
  .digit-radio-options-wrap {
39
- margin-top: theme(digitv2.spacers.spacer0);
42
+ margin-top: theme("digitv2.spacers.spacer0");
40
43
  }
41
44
 
42
45
  }
@@ -59,7 +62,7 @@
59
62
  }
60
63
 
61
64
  &.removeMargin{
62
- margin-bottom: theme(digitv2.spacers.spacer0);
65
+ margin-bottom: theme("digitv2.spacers.spacer0");
63
66
  }
64
67
 
65
68
  &.digit-formcomposer-fieldpair{
package/src/digitv2/components/landingpagecardV2.scss CHANGED
@@ -1,17 +1,20 @@
1
+ @import './theme-variables.css';
2
+ @import '../typography.scss';
3
+
1
4
  .digit-landing-page-card {
2
5
  width: fit-content;
3
- background-color: theme(digitv2.lightTheme.paper-primary);
4
- box-shadow: theme(digitv2.spacers.spacer0) 0.063rem 0.125rem theme(digitv2.spacers.spacer0) #00000029;
6
+ background-color: theme("digitv2.lightTheme.paper-primary");
7
+ box-shadow: theme("digitv2.spacers.spacer0") 0.063rem 0.125rem theme("digitv2.spacers.spacer0") #00000029;
5
8
  min-width: 15%;
6
9
  display: flex;
7
10
  flex-direction: column;
8
- gap: theme(digitv2.spacers.spacer4);
9
- border-radius: theme(digitv2.spacers.spacer1) theme(digitv2.spacers.spacer0) theme(digitv2.spacers.spacer0) theme(digitv2.spacers.spacer0);
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");
10
13
 
11
14
  .icon-module-header {
12
15
  display: flex !important;
13
16
  align-items: center !important;
14
- gap: theme(digitv2.spacers.spacer2);
17
+ gap: theme("digitv2.spacers.spacer2");
15
18
 
16
19
  .digit-landingpagecard-icon {
17
20
  display: flex;
@@ -20,46 +23,46 @@
20
23
 
21
24
  @media (max-aspect-ratio: 9/16) {
22
25
  /* Media query for mobile */
23
- width: theme(digitv2.spacers.spacer11);
24
- height:theme(digitv2.spacers.spacer11);
26
+ width: theme("digitv2.spacers.spacer11");
27
+ height:theme("digitv2.spacers.spacer11");
25
28
 
26
29
  svg {
27
- width: theme(digitv2.spacers.spacer7);
28
- height:theme(digitv2.spacers.spacer7);
30
+ width: theme("digitv2.spacers.spacer7");
31
+ height:theme("digitv2.spacers.spacer7");
29
32
  }
30
33
  }
31
34
 
32
35
  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
33
36
  /* Media query for tablets */
34
- width: theme(digitv2.spacers.spacer12);
35
- height:theme(digitv2.spacers.spacer12);
37
+ width: theme("digitv2.spacers.spacer12");
38
+ height:theme("digitv2.spacers.spacer12");
36
39
 
37
40
  svg {
38
- width: theme(digitv2.spacers.spacer8);
39
- height:theme(digitv2.spacers.spacer8);
41
+ width: theme("digitv2.spacers.spacer8");
42
+ height:theme("digitv2.spacers.spacer8");
40
43
  }
41
44
  }
42
45
 
43
46
  @media (min-aspect-ratio: 3/4) {
44
47
  /* Media query for desktop */
45
- width: theme(digitv2.spacers.spacer13);
46
- height:theme(digitv2.spacers.spacer13);
48
+ width: theme("digitv2.spacers.spacer13");
49
+ height:theme("digitv2.spacers.spacer13");
47
50
 
48
51
  svg {
49
- width: theme(digitv2.spacers.spacer10);
50
- height:theme(digitv2.spacers.spacer10);
52
+ width: theme("digitv2.spacers.spacer10");
53
+ height:theme("digitv2.spacers.spacer10");
51
54
  }
52
55
  }
53
56
 
54
57
  &.iconBg {
55
- background-color: theme(digitv2.lightTheme.primary-1);
58
+ background-color: theme("digitv2.lightTheme.primary-1");
56
59
  border-radius: 0.125rem;
57
60
  }
58
61
  }
59
62
 
60
63
  &.right{
61
64
  &.iconBg {
62
- gap:theme(digitv2.spacers.spacer4);
65
+ gap:theme("digitv2.spacers.spacer4");
63
66
  }
64
67
  }
65
68
 
@@ -68,27 +71,27 @@
68
71
  }
69
72
 
70
73
  .ladingcard-moduleName {
71
- @extend .typography.heading-m;
72
- font-family: theme(digitv2.fontFamily.sans);
73
- font-style: theme(digitv2.fontStyle.normal);
74
- font-weight: theme(digitv2.fontWeight.bold);
75
- line-height: theme(digitv2.lineHeight.lineheight1);
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");
76
79
 
77
80
  @media (max-aspect-ratio: 9/16) {
78
81
  /* Media query for mobile */
79
- font-size: theme(digitv2.fontSize.heading-m.mobile);
82
+ font-size: theme("digitv2.fontSize.heading-m.mobile");
80
83
  }
81
84
 
82
85
  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
83
86
  /* Media query for tablets */
84
- font-size: theme(digitv2.fontSize.heading-m.tablet);
87
+ font-size: theme("digitv2.fontSize.heading-m.tablet");
85
88
  }
86
89
 
87
90
  @media (min-aspect-ratio: 3/4) {
88
91
  /* Media query for desktop */
89
- font-size: theme(digitv2.fontSize.heading-m.desktop);
92
+ font-size: theme("digitv2.fontSize.heading-m.desktop");
90
93
  }
91
- color: theme(digitv2.lightTheme.primary-2);
94
+ color: theme("digitv2.lightTheme.primary-2");
92
95
  overflow: hidden;
93
96
  word-wrap: break-word;
94
97
  word-break: break-word;
@@ -128,31 +131,31 @@
128
131
  }
129
132
 
130
133
  .metric-count {
131
- @extend .typography.heading-m;
132
- font-family: theme(digitv2.fontFamily.sans);
133
- font-style: theme(digitv2.fontStyle.normal);
134
- font-weight: theme(digitv2.fontWeight.bold);
135
- line-height: theme(digitv2.lineHeight.lineheight1);
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");
136
139
 
137
140
  @media (max-aspect-ratio: 9/16) {
138
141
  /* Media query for mobile */
139
- font-size: theme(digitv2.fontSize.heading-m.mobile);
142
+ font-size: theme("digitv2.fontSize.heading-m.mobile");
140
143
  }
141
144
 
142
145
  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
143
146
  /* Media query for tablets */
144
- font-size: theme(digitv2.fontSize.heading-m.tablet);
147
+ font-size: theme("digitv2.fontSize.heading-m.tablet");
145
148
  }
146
149
 
147
150
  @media (min-aspect-ratio: 3/4) {
148
151
  /* Media query for desktop */
149
- font-size: theme(digitv2.fontSize.heading-m.desktop);
152
+ font-size: theme("digitv2.fontSize.heading-m.desktop");
150
153
  }
151
- color: theme(digitv2.lightTheme.text-primary);
154
+ color: theme("digitv2.lightTheme.text-primary");
152
155
  }
153
156
 
154
157
  .metric-label {
155
- @extend .typography.body-xs;
158
+ @include typography-body-xs;
156
159
  overflow: hidden;
157
160
  word-wrap: break-word;
158
161
  word-break: break-word;
@@ -160,25 +163,25 @@
160
163
  white-space: nowrap;
161
164
  overflow: hidden;
162
165
  text-overflow: ellipsis;
163
- color: theme(digitv2.lightTheme.generic-inputborder);
164
- font-family: theme(digitv2.fontFamily.sans);
165
- font-style: theme(digitv2.fontStyle.normal);
166
- font-weight: theme(digitv2.fontWeight.regular);
167
- line-height: theme(digitv2.lineHeight.lineheight2);
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");
168
171
 
169
172
  @media (max-aspect-ratio: 9/16) {
170
173
  /* Media query for mobile */
171
- font-size: theme(digitv2.fontSize.body-xs.mobile);
174
+ font-size: theme("digitv2.fontSize.body-xs.mobile");
172
175
  }
173
176
 
174
177
  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
175
178
  /* Media query for tablets */
176
- font-size: theme(digitv2.fontSize.body-xs.tablet);
179
+ font-size: theme("digitv2.fontSize.body-xs.tablet");
177
180
  }
178
181
 
179
182
  @media (min-aspect-ratio: 3/4) {
180
183
  /* Media query for desktop */
181
- font-size: theme(digitv2.fontSize.body-xs.desktop);
184
+ font-size: theme("digitv2.fontSize.body-xs.desktop");
182
185
  }
183
186
  }
184
187
  }
@@ -197,56 +200,56 @@
197
200
 
198
201
  .digit-landingpage-divider {
199
202
  width: 100%;
200
- margin: theme(digitv2.spacers.spacer0);
203
+ margin: theme("digitv2.spacers.spacer0");
201
204
  }
202
205
 
203
206
  .landingpagecard-section{
204
207
  display: flex;
205
208
  flex-direction: column;
206
- color: theme(digitv2.lightTheme.text-primary);
207
- @extend .typography.body-s;
209
+ color: theme("digitv2.lightTheme.text-primary");
210
+ @include typography-body-s;
208
211
  text-align: left;
209
212
  justify-content: flex-start;
210
213
  @media (max-aspect-ratio: 9/16) {
211
214
  /* Media query for mobile */
212
- font-size: theme(digitv2.fontSize.body-s.mobile);
213
- font-family: theme(digitv2.fontFamily.sans);
214
- font-style: theme(digitv2.fontStyle.normal);
215
- font-weight: theme(digitv2.fontWeight.regular);
216
- line-height: theme(digitv2.lineHeight.lineheight2);
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");
217
220
  }
218
221
 
219
222
  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
220
223
  /* Media query for tablets */
221
- font-size: theme(digitv2.fontSize.body-s.tablet);
222
- font-family: theme(digitv2.fontFamily.sans);
223
- font-style: theme(digitv2.fontStyle.normal);
224
- font-weight: theme(digitv2.fontWeight.regular);
225
- line-height: theme(digitv2.lineHeight.lineheight2);
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");
226
229
  }
227
230
 
228
231
  @media (min-aspect-ratio: 3/4) {
229
232
  /* Media query for desktop */
230
- font-size: theme(digitv2.fontSize.body-s.desktop);
231
- font-family: theme(digitv2.fontFamily.sans);
232
- font-style: theme(digitv2.fontStyle.normal);
233
- font-weight: theme(digitv2.fontWeight.regular);
234
- line-height: theme(digitv2.lineHeight.lineheight2);
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");
235
238
  }
236
239
 
237
240
  @media (max-aspect-ratio: 9/16) {
238
241
  /* Media query for mobile */
239
- gap: theme(digitv2.spacers.spacer4);
242
+ gap: theme("digitv2.spacers.spacer4");
240
243
  }
241
244
 
242
245
  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
243
246
  /* Media query for tablets */
244
- gap: theme(digitv2.spacers.spacer5);
247
+ gap: theme("digitv2.spacers.spacer5");
245
248
  }
246
249
 
247
250
  @media (min-aspect-ratio: 3/4) {
248
251
  /* Media query for desktop */
249
- gap: theme(digitv2.spacers.spacer6);
252
+ gap: theme("digitv2.spacers.spacer6");
250
253
  }
251
254
  }
252
255
 
@@ -263,16 +266,16 @@
263
266
  @media (max-aspect-ratio: 9/16) {
264
267
  /* Media query for mobile */
265
268
  flex-direction: column;
266
- gap: theme(digitv2.spacers.spacer4);
269
+ gap: theme("digitv2.spacers.spacer4");
267
270
  }
268
271
 
269
272
  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
270
273
  /* Media query for tablets */
271
- gap: theme(digitv2.spacers.spacer5);
274
+ gap: theme("digitv2.spacers.spacer5");
272
275
  }
273
276
 
274
277
  @media (min-aspect-ratio: 3/4) {
275
278
  /* Media query for desktop */
276
- gap: theme(digitv2.spacers.spacer6);
279
+ gap: theme("digitv2.spacers.spacer6");
277
280
  }
278
281
  }
package/src/digitv2/components/loaderV2.scss CHANGED
@@ -1,3 +1,6 @@
1
+ @import './theme-variables.css';
2
+ @import '../typography.scss';
3
+
1
4
  .digit-animation{
2
5
  width: fit-content;
3
6
  }
@@ -10,8 +13,8 @@
10
13
  align-items: center;
11
14
 
12
15
  .digit-loader-text {
13
- @extend .typography.caption-s;
14
- color: theme(digitv2.lightTheme.primary-2);
16
+ @include typography-caption-s;
17
+ color: theme("digitv2.lightTheme.primary-2");
15
18
  }
16
19
 
17
20
  &.PageLoader {
@@ -35,13 +38,13 @@
35
38
  -webkit-backdrop-filter: blur(0.125rem);
36
39
 
37
40
  .digit-loader-text{
38
- color: theme(digitv2.lightTheme.paper-primary);
41
+ color: theme("digitv2.lightTheme.paper-primary");
39
42
  }
40
43
  }
41
44
  }
42
45
 
43
46
  .custom-loader-example{
44
47
  .digit-loader-text{
45
- color: theme(digitv2.lightTheme.primary-1);
48
+ color: theme("digitv2.lightTheme.primary-1");
46
49
  }
47
50
  }
package/src/digitv2/components/menuCardV2.scss CHANGED
@@ -1,40 +1,43 @@
1
+ @import './theme-variables.css';
2
+ @import '../typography.scss';
3
+
1
4
  .digit-menu-card {
2
5
 
3
6
  display: flex;
4
7
  flex-direction: column;
5
- gap: theme(digitv2.spacers.spacer3);
8
+ gap: theme("digitv2.spacers.spacer3");
6
9
  justify-content: flex-start;
7
10
  cursor: pointer;
8
11
 
9
12
  &.clickable:hover{
10
- border: 0.063rem solid theme(digitv2.lightTheme.primary-1);
11
- box-shadow: 0.063rem theme(digitv2.spacers.spacer1) theme(digitv2.spacers.spacer1) theme(digitv2.spacers.spacer0) #00000029;
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;
12
15
  }
13
16
 
14
17
  .icon-menu-header {
15
18
 
16
19
  display: flex !important;
17
20
  align-items: center;
18
- gap: theme(digitv2.spacers.spacer2);
21
+ gap: theme("digitv2.spacers.spacer2");
19
22
 
20
23
  .digit-menucard-icon {
21
24
 
22
25
  @media (max-aspect-ratio: 9/16) {
23
26
  /* Media query for mobile */
24
- width: theme(digitv2.spacers.spacer6);
25
- height: theme(digitv2.spacers.spacer6);
27
+ width: theme("digitv2.spacers.spacer6");
28
+ height: theme("digitv2.spacers.spacer6");
26
29
  }
27
30
 
28
31
  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
29
32
  /* Media query for tablets */
30
- width: theme(digitv2.spacers.spacer8);
31
- height: theme(digitv2.spacers.spacer8);
33
+ width: theme("digitv2.spacers.spacer8");
34
+ height: theme("digitv2.spacers.spacer8");
32
35
  }
33
36
 
34
37
  @media (min-aspect-ratio: 3/4) {
35
38
  /* Media query for desktop */
36
- width: theme(digitv2.spacers.spacer10);
37
- height: theme(digitv2.spacers.spacer10);
39
+ width: theme("digitv2.spacers.spacer10");
40
+ height: theme("digitv2.spacers.spacer10");
38
41
  }
39
42
  }
40
43
 
@@ -43,54 +46,54 @@
43
46
  }
44
47
 
45
48
  .digit-menuacard-menuName {
46
- @extend .typography.heading-m;
47
- font-family: theme(digitv2.fontFamily.sans);
48
- font-style: theme(digitv2.fontStyle.normal);
49
- font-weight: theme(digitv2.fontWeight.bold);
50
- line-height: theme(digitv2.lineHeight.lineheight1);
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");
51
54
 
52
55
  @media (max-aspect-ratio: 9/16) {
53
56
  /* Media query for mobile */
54
- font-size: theme(digitv2.fontSize.heading-m.mobile);
57
+ font-size: theme("digitv2.fontSize.heading-m.mobile");
55
58
  }
56
59
 
57
60
  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
58
61
  /* Media query for tablets */
59
- font-size: theme(digitv2.fontSize.heading-m.tablet);
62
+ font-size: theme("digitv2.fontSize.heading-m.tablet");
60
63
  }
61
64
 
62
65
  @media (min-aspect-ratio: 3/4) {
63
66
  /* Media query for desktop */
64
- font-size: theme(digitv2.fontSize.heading-m.desktop);
67
+ font-size: theme("digitv2.fontSize.heading-m.desktop");
65
68
  }
66
69
  line-height: normal;
67
- color: theme(digitv2.lightTheme.primary-2);
70
+ color: theme("digitv2.lightTheme.primary-2");
68
71
  }
69
72
  }
70
73
 
71
74
  .digit-menucard-description {
72
- @extend .typography.body-s;
73
- font-family: theme(digitv2.fontFamily.sans);
74
- font-style: theme(digitv2.fontStyle.normal);
75
- font-weight: theme(digitv2.fontWeight.regular);
76
- line-height: theme(digitv2.lineHeight.lineheight2);
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");
77
80
 
78
81
  @media (max-aspect-ratio: 9/16) {
79
82
  /* Media query for mobile */
80
- font-size: theme(digitv2.fontSize.body-s.mobile);
83
+ font-size: theme("digitv2.fontSize.body-s.mobile");
81
84
  }
82
85
 
83
86
  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
84
87
  /* Media query for tablets */
85
- font-size: theme(digitv2.fontSize.body-s.tablet);
88
+ font-size: theme("digitv2.fontSize.body-s.tablet");
86
89
  }
87
90
 
88
91
  @media (min-aspect-ratio: 3/4) {
89
92
  /* Media query for desktop */
90
- font-size: theme(digitv2.fontSize.body-s.desktop);
93
+ font-size: theme("digitv2.fontSize.body-s.desktop");
91
94
  }
92
95
 
93
- color: theme(digitv2.lightTheme.text-primary);
96
+ color: theme("digitv2.lightTheme.text-primary");
94
97
  }
95
98
  }
96
99
 
@@ -100,17 +103,17 @@
100
103
 
101
104
  @media (max-aspect-ratio: 9/16) {
102
105
  /* Media query for mobile */
103
- gap: theme(digitv2.spacers.spacer4);
106
+ gap: theme("digitv2.spacers.spacer4");
104
107
  }
105
108
 
106
109
  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
107
110
  /* Media query for tablets */
108
- gap: theme(digitv2.spacers.spacer5);
111
+ gap: theme("digitv2.spacers.spacer5");
109
112
  }
110
113
 
111
114
  @media (min-aspect-ratio: 3/4) {
112
115
  /* Media query for desktop */
113
- gap: theme(digitv2.spacers.spacer6);
116
+ gap: theme("digitv2.spacers.spacer6");
114
117
  }
115
118
 
116
119
  }