@egovernments/digit-ui-components-css 2.0.0-dev-11 → 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 +152 -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 +181 -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 +90 -89
  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 +21 -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/timelineV2.scss CHANGED
@@ -3,7 +3,7 @@
3
3
 
4
4
  .digit-timeline-item {
5
5
  @apply flex items-start relative ;
6
- gap: theme("digitv2.spacers.spacer4");
6
+ gap: var(--digitv2-spacers-spacer4);
7
7
  }
8
8
 
9
9
  .timeline-circle {
@@ -20,12 +20,12 @@
20
20
  @apply absolute bottom-0 border-solid border-border;
21
21
  border-left-width: 0.125rem;
22
22
  margin-left: 0.938rem;
23
- top: theme("digitv2.spacers.spacer8");
23
+ top: var(--digitv2-spacers-spacer8);
24
24
 
25
25
  &.completed,
26
26
  &.inprogress,
27
27
  &.nextActiveStep{
28
- border-color: theme("digitv2.lightTheme.primary-1");
28
+ border-color: var(--digitv2-lightTheme-primary-1);
29
29
  }
30
30
 
31
31
  &.nextActiveStep{
@@ -35,7 +35,7 @@
35
35
  @media (max-aspect-ratio: 9/16) {
36
36
  /* Media query for mobile */
37
37
  margin-left: 0.688rem;
38
- top: theme("digitv2.spacers.spacer6");
38
+ top: var(--digitv2-spacers-spacer6);
39
39
  border-left-width: 0.063rem;
40
40
  }
41
41
  }
@@ -43,43 +43,43 @@
43
43
  .timeline-content,
44
44
  .timeline-info {
45
45
  @apply flex flex-col w-full;
46
- gap: theme("digitv2.spacers.spacer2");
46
+ gap: var(--digitv2-spacers-spacer2);
47
47
  }
48
48
 
49
49
  .timeline-info{
50
50
  @media (max-aspect-ratio: 9/16) {
51
51
  /* Media query for mobile */
52
- gap: theme("digitv2.spacers.spacer1");
52
+ gap: var(--digitv2-spacers-spacer1);
53
53
  }
54
54
  }
55
55
 
56
56
  .timeline-divider {
57
- border: 0.063rem solid theme("digitv2.lightTheme.generic-divider");
57
+ border: 0.063rem solid var(--digitv2-lightTheme-generic-divider);
58
58
  }
59
59
 
60
60
  .timeline-label {
61
61
  @include typography-heading-s;
62
- font-family: theme("digitv2.fontFamily.sans");
63
- font-style: theme("digitv2.fontStyle.normal");
64
- font-weight: theme("digitv2.fontWeight.bold");
65
- line-height: theme("digitv2.lineHeight.lineheight1");
62
+ font-family: var(--digitv2-fontFamily-sans);
63
+ font-style: var(--digitv2-fontStyle-normal);
64
+ font-weight: var(--digitv2-fontWeight-bold);
65
+ line-height: var(--digitv2-lineHeight-lineheight1);
66
66
 
67
67
  @media (max-aspect-ratio: 9/16) {
68
68
  /* Media query for mobile */
69
- font-size: theme("digitv2.fontSize.heading-s.mobile");
69
+ font-size: var(--digitv2-fontSize-heading-s-mobile);
70
70
  }
71
71
 
72
72
  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
73
73
  /* Media query for tablets */
74
- font-size: theme("digitv2.fontSize.heading-s.tablet");
74
+ font-size: var(--digitv2-fontSize-heading-s-tablet);
75
75
  }
76
76
 
77
77
  @media (min-aspect-ratio: 3/4) {
78
78
  /* Media query for desktop */
79
- font-size: theme("digitv2.fontSize.heading-s.desktop");
79
+ font-size: var(--digitv2-fontSize-heading-s-desktop);
80
80
  }
81
81
  @apply whitespace-normal h-auto text-left;
82
- color: theme("digitv2.lightTheme.text-primary");
82
+ color: var(--digitv2-lightTheme-text-primary);
83
83
  word-break: break-word;
84
84
  padding-top: 0.414rem;
85
85
 
@@ -89,89 +89,89 @@
89
89
  }
90
90
 
91
91
  &.upcoming{
92
- color:theme("digitv2.lightTheme.text-secondary");
92
+ color:var(--digitv2-lightTheme-text-secondary);
93
93
  }
94
94
  }
95
95
 
96
96
  .timeline-date {
97
97
  @include typography-body-s;
98
- font-family: theme("digitv2.fontFamily.sans");
99
- font-style: theme("digitv2.fontStyle.normal");
100
- font-weight: theme("digitv2.fontWeight.regular");
101
- line-height: theme("digitv2.lineHeight.lineheight2");
98
+ font-family: var(--digitv2-fontFamily-sans);
99
+ font-style: var(--digitv2-fontStyle-normal);
100
+ font-weight: var(--digitv2-fontWeight-regular);
101
+ line-height: var(--digitv2-lineHeight-lineheight2);
102
102
 
103
103
  @media (max-aspect-ratio: 9/16) {
104
104
  /* Media query for mobile */
105
- font-size: theme("digitv2.fontSize.body-s.mobile");
105
+ font-size: var( --digitv2-fontSize-body-s-mobile);
106
106
  }
107
107
 
108
108
  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
109
109
  /* Media query for tablets */
110
- font-size: theme("digitv2.fontSize.body-s.tablet");
110
+ font-size: var( --digitv2-fontSize-body-s-tablet);
111
111
  }
112
112
 
113
113
  @media (min-aspect-ratio: 3/4) {
114
114
  /* Media query for desktop */
115
- font-size: theme("digitv2.fontSize.body-s.desktop");
115
+ font-size: var( --digitv2-fontSize-body-s-desktop);
116
116
  }
117
117
  @apply text-left;
118
- color: theme("digitv2.lightTheme.text-secondary");
118
+ color: var(--digitv2-lightTheme-text-secondary);
119
119
  }
120
120
 
121
121
  .timeline-toggle-details {
122
122
  @apply flex items-center cursor-pointer;
123
- gap: theme("digitv2.spacers.spacer1");
123
+ gap: var(--digitv2-spacers-spacer1);
124
124
  width: fit-content;
125
125
  }
126
126
 
127
127
  .timeline-additional-elements-inline {
128
128
  @apply flex flex-wrap items-start;
129
- gap: theme("digitv2.spacers.spacer4");
129
+ gap: var(--digitv2-spacers-spacer4);
130
130
  @include typography-body-s;
131
- font-family: theme("digitv2.fontFamily.sans");
132
- font-style: theme("digitv2.fontStyle.normal");
133
- font-weight: theme("digitv2.fontWeight.regular");
134
- line-height: theme("digitv2.lineHeight.lineheight2");
131
+ font-family: var(--digitv2-fontFamily-sans);
132
+ font-style: var(--digitv2-fontStyle-normal);
133
+ font-weight: var(--digitv2-fontWeight-regular);
134
+ line-height: var(--digitv2-lineHeight-lineheight2);
135
135
 
136
136
  @media (max-aspect-ratio: 9/16) {
137
137
  /* Media query for mobile */
138
- font-size: theme("digitv2.fontSize.body-s.mobile");
138
+ font-size: var( --digitv2-fontSize-body-s-mobile);
139
139
  }
140
140
 
141
141
  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
142
142
  /* Media query for tablets */
143
- font-size: theme("digitv2.fontSize.body-s.tablet");
143
+ font-size: var( --digitv2-fontSize-body-s-tablet);
144
144
  }
145
145
 
146
146
  @media (min-aspect-ratio: 3/4) {
147
147
  /* Media query for desktop */
148
- font-size: theme("digitv2.fontSize.body-s.desktop");
148
+ font-size: var( --digitv2-fontSize-body-s-desktop);
149
149
  }
150
150
  }
151
151
 
152
152
  .timeline-additional-elements-column {
153
153
  @apply flex flex-col items-start;
154
154
  @include typography-body-s;
155
- font-family: theme("digitv2.fontFamily.sans");
156
- font-style: theme("digitv2.fontStyle.normal");
157
- font-weight: theme("digitv2.fontWeight.regular");
158
- line-height: theme("digitv2.lineHeight.lineheight2");
155
+ font-family: var(--digitv2-fontFamily-sans);
156
+ font-style: var(--digitv2-fontStyle-normal);
157
+ font-weight: var(--digitv2-fontWeight-regular);
158
+ line-height: var(--digitv2-lineHeight-lineheight2);
159
159
 
160
160
  @media (max-aspect-ratio: 9/16) {
161
161
  /* Media query for mobile */
162
- font-size: theme("digitv2.fontSize.body-s.mobile");
162
+ font-size: var( --digitv2-fontSize-body-s-mobile);
163
163
  }
164
164
 
165
165
  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
166
166
  /* Media query for tablets */
167
- font-size: theme("digitv2.fontSize.body-s.tablet");
167
+ font-size: var( --digitv2-fontSize-body-s-tablet);
168
168
  }
169
169
 
170
170
  @media (min-aspect-ratio: 3/4) {
171
171
  /* Media query for desktop */
172
- font-size: theme("digitv2.fontSize.body-s.desktop");
172
+ font-size: var( --digitv2-fontSize-body-s-desktop);
173
173
  }
174
- gap: theme("digitv2.spacers.spacer4");
174
+ gap: var(--digitv2-spacers-spacer4);
175
175
 
176
176
  .timeline-individual-element {
177
177
  @apply w-full max-w-full;
@@ -190,12 +190,12 @@ img {
190
190
  /* Circle Variants */
191
191
  .timeline-circle,
192
192
  .timeline-circle.upcoming {
193
- background-color: theme("digitv2.lightTheme.text-disabled");
193
+ background-color: var(--digitv2-lightTheme-text-disabled);
194
194
  }
195
195
 
196
196
  .timeline-circle.inprogress {
197
197
  background-color: transparent;
198
- border: 0.125rem solid theme("digitv2.lightTheme.primary-1");
198
+ border: 0.125rem solid var(--digitv2-lightTheme-primary-1);
199
199
  }
200
200
 
201
201
  .timeline-circle.inprogress:not(.error)::after {
@@ -205,7 +205,7 @@ img {
205
205
  left: 50%;
206
206
  transform: translate(-50%, -50%);
207
207
  border-radius: 50%;
208
- background-color: theme("digitv2.lightTheme.primary-1");
208
+ background-color: var(--digitv2-lightTheme-primary-1);
209
209
 
210
210
  @media (max-aspect-ratio: 9/16) {
211
211
  /* Media query for mobile */
@@ -229,7 +229,7 @@ img {
229
229
  }
230
230
 
231
231
  .timeline-circle.completed {
232
- background-color: theme("digitv2.lightTheme.primary-1");
232
+ background-color: var(--digitv2-lightTheme-primary-1);
233
233
  }
234
234
 
235
235
  .digit-timeline-molecule{
@@ -239,52 +239,52 @@ img {
239
239
 
240
240
  @media (min-aspect-ratio: 3/4) {
241
241
  /* Media query for desktop */
242
- margin-bottom: theme("digitv2.spacers.spacer6");
242
+ margin-bottom: var(--digitv2-spacers-spacer6);
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
- margin-bottom: theme("digitv2.spacers.spacer5");
247
+ margin-bottom: var(--digitv2-spacers-spacer5);
248
248
  }
249
249
  @media (max-aspect-ratio: 9/16) {
250
250
  /* Media query for mobile */
251
- margin-bottom: theme("digitv2.spacers.spacer4");
251
+ margin-bottom: var(--digitv2-spacers-spacer4);
252
252
  }
253
253
  }
254
254
  }
255
255
 
256
256
  .view-more-past-container {
257
- margin-top: theme("digitv2.spacers.spacer4");
257
+ margin-top: var(--digitv2-spacers-spacer4);
258
258
  }
259
259
 
260
260
  .view-more-future-container {
261
- margin-bottom: theme("digitv2.spacers.spacer4");
261
+ margin-bottom: var(--digitv2-spacers-spacer4);
262
262
  }
263
263
 
264
264
  .digit-timeline-item {
265
265
  &.error{
266
266
 
267
267
  .timeline-circle{
268
- background-color: theme("digitv2.lightTheme.alert-error");
268
+ background-color: var(--digitv2-lightTheme-alert-error);
269
269
  }
270
270
 
271
271
  .timeline-content{
272
- background-color: theme("digitv2.lightTheme.alert-errorbg");
273
- border-radius: theme("digitv2.spacers.spacer1");
274
- padding: theme("digitv2.spacers.spacer2") theme("digitv2.spacers.spacer3");
272
+ background-color: var(--digitv2-lightTheme-alert-errorbg);
273
+ border-radius: var(--digitv2-spacers-spacer1);
274
+ padding: var(--digitv2-spacers-spacer2) var(--digitv2-spacers-spacer3);
275
275
 
276
276
 
277
277
  .timeline-info{
278
278
  .timeline-label{
279
- color: theme("digitv2.lightTheme.alert-error");
279
+ color: var(--digitv2-lightTheme-alert-error);
280
280
  padding-top: 0rem;
281
281
  }
282
282
  .timeline-date{
283
- color: theme("digitv2.lightTheme.alert-error");
283
+ color: var(--digitv2-lightTheme-alert-error);
284
284
  }
285
285
 
286
286
  .timeline-divider {
287
- border: 0.063rem solid theme("digitv2.lightTheme.alert-error");
287
+ border: 0.063rem solid var(--digitv2-lightTheme-alert-error);
288
288
  }
289
289
  }
290
290
  }
package/src/digitv2/components/toastV2.scss CHANGED
@@ -3,11 +3,11 @@
3
3
 
4
4
  /*.digit-toast-success {
5
5
  @apply fixed flex z-20 w-full max-w-full left-0 items-center;
6
- bottom: -(theme("digitv2.spacers.spacer12"));
7
- gap: theme("digitv2.spacers.spacer2");
8
- height: theme("digitv2.spacers.spacer12");
9
- padding: theme("digitv2.spacers.spacer3") theme("digitv2.spacers.spacer2") theme("digitv2.spacers.spacer3") theme("digitv2.spacers.spacer3") !important;
10
- background-color: theme("digitv2.lightTheme.alert-success");
6
+ bottom: -(var(--digitv2-spacers-spacer12));
7
+ gap: var(--digitv2-spacers-spacer2);
8
+ height: var(--digitv2-spacers-spacer12);
9
+ padding: var(--digitv2-spacers-spacer3) var(--digitv2-spacers-spacer2) var(--digitv2-spacers-spacer3) var(--digitv2-spacers-spacer3) !important;
10
+ background-color: var(--digitv2-lightTheme-alert-success);
11
11
  transition: bottom 0.5s ease;
12
12
 
13
13
  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
@@ -29,7 +29,7 @@
29
29
  }
30
30
 
31
31
  &.digit-error {
32
- background-color: theme("digitv2.lightTheme.alert-error");
32
+ background-color: var(--digitv2-lightTheme-alert-error);
33
33
  }
34
34
 
35
35
  &.digit-warning {
@@ -43,14 +43,14 @@
43
43
  .toast-label {
44
44
  @include typography-caption-s;
45
45
  @apply text-left overflow-hidden whitespace-nowrap flex-grow flex items-center h-6;
46
- letter-spacing: theme("digitv2.spacers.spacer0");
47
- color: theme("digitv2.lightTheme.paper-primary");
48
- margin: theme("digitv2.spacers.spacer0");
46
+ letter-spacing: var(--digitv2-spacers-spacer0);
47
+ color: var(--digitv2-lightTheme-paper-primary);
48
+ margin: var(--digitv2-spacers-spacer0);
49
49
  text-overflow: ellipsis;
50
50
  }
51
51
 
52
52
  &.digit-info {
53
- background-color: theme("digitv2.lightTheme.alert-info");
53
+ background-color: var(--digitv2-lightTheme-alert-info);
54
54
  }
55
55
 
56
56
  .digit-warning-button-container {
@@ -72,7 +72,7 @@
72
72
 
73
73
  @keyframes slideInFromBottom {
74
74
  from {
75
- bottom: -(theme("digitv2.spacers.spacer12"));
75
+ bottom: -(var(--digitv2-spacers-spacer12));
76
76
  }
77
77
  to {
78
78
  bottom: 4rem;
@@ -86,11 +86,11 @@
86
86
  .digit-toast-success {
87
87
  max-width: 100%;
88
88
  width: auto;
89
- gap: theme("digitv2.spacers.spacer2");
90
- height: theme("digitv2.spacers.spacer12");
91
- padding: theme("digitv2.spacers.spacer3") theme("digitv2.spacers.spacer2") theme("digitv2.spacers.spacer3") theme("digitv2.spacers.spacer3") !important;
89
+ gap: var(--digitv2-spacers-spacer2);
90
+ height: var(--digitv2-spacers-spacer12);
91
+ padding: var(--digitv2-spacers-spacer3) var(--digitv2-spacers-spacer2) var(--digitv2-spacers-spacer3) var(--digitv2-spacers-spacer3) !important;
92
92
  @apply fixed flex z-20 items-center;
93
- background-color: theme("digitv2.lightTheme.alert-success");
93
+ background-color: var(--digitv2-lightTheme-alert-success);
94
94
  transition: bottom 0.5s ease;
95
95
  left: 0;
96
96
  border-radius: var(--digitv2-borderRadius-radius2);
@@ -108,15 +108,15 @@
108
108
  }
109
109
 
110
110
  &.digit-info {
111
- background-color: theme("digitv2.lightTheme.alert-info");
111
+ background-color: var(--digitv2-lightTheme-alert-info);
112
112
  }
113
113
 
114
114
  &.digit-error {
115
- background-color: theme("digitv2.lightTheme.alert-error");
115
+ background-color: var(--digitv2-lightTheme-alert-error);
116
116
  }
117
117
 
118
118
  &.digit-warning {
119
- background-color: theme("digitv2.lightTheme.alert-warning");
119
+ background-color: var(--digitv2-lightTheme-alert-warning);
120
120
 
121
121
  &.digit-warning-buttons {
122
122
  @apply block;
@@ -142,9 +142,9 @@
142
142
  .toast-label {
143
143
  @include typography-caption-s;
144
144
  @apply text-left overflow-hidden whitespace-nowrap flex-grow flex items-center h-6;
145
- letter-spacing: theme("digitv2.spacers.spacer0");
146
- color: theme("digitv2.lightTheme.paper-primary");
147
- margin: theme("digitv2.spacers.spacer0");
145
+ letter-spacing: var(--digitv2-spacers-spacer0);
146
+ color: var(--digitv2-lightTheme-paper-primary);
147
+ margin: var(--digitv2-spacers-spacer0);
148
148
  text-overflow: ellipsis;
149
149
  }
150
150
  }
package/src/digitv2/components/toggleV2.scss CHANGED
@@ -11,92 +11,92 @@
11
11
 
12
12
  .toggle-option-container {
13
13
  @apply inline-flex items-center;
14
- gap: theme("digitv2.spacers.spacer2");
14
+ gap: var(--digitv2-spacers-spacer2);
15
15
  }
16
16
 
17
17
  .digit-toggle-btn-wrap {
18
18
  @apply flex items-center justify-center cursor-pointer bg-white overflow-hidden text-center;
19
- padding: 0.125rem theme("digitv2.spacers.spacer0");
19
+ padding: 0.125rem var(--digitv2-spacers-spacer0);
20
20
  width: 7rem;
21
- height: theme("digitv2.spacers.spacer8");
22
- border: 0.063rem solid theme("digitv2.lightTheme.generic-divider");
21
+ height: var(--digitv2-spacers-spacer8);
22
+ border: 0.063rem solid var(--digitv2-lightTheme-generic-divider);
23
23
  text-overflow: ellipsis;
24
24
 
25
25
  .digit-toggle-label {
26
26
  @include typography-body-xs;
27
27
  @apply w-full overflow-hidden whitespace-nowrap;
28
- color: theme("digitv2.lightTheme.text-disabled");
28
+ color: var(--digitv2-lightTheme-text-disabled);
29
29
  text-overflow: ellipsis;
30
30
  }
31
31
 
32
32
  &:hover,
33
33
  &:active {
34
- border: 0.063rem solid theme("digitv2.lightTheme.primary-1");
35
- background: theme("digitv2.lightTheme.paper-primary");
34
+ border: 0.063rem solid var(--digitv2-lightTheme-primary-1);
35
+ background: var(--digitv2-lightTheme-paper-primary);
36
36
  width: 7.125rem;
37
- color: theme("digitv2.lightTheme.primary-1");
37
+ color: var(--digitv2-lightTheme-primary-1);
38
38
 
39
39
  .digit-toggle-label {
40
- color: theme("digitv2.lightTheme.primary-1") !important;
40
+ color: var(--digitv2-lightTheme-primary-1) !important;
41
41
  }
42
42
  }
43
43
 
44
44
  &:active {
45
- box-shadow: theme("digitv2.spacers.spacer0") theme("digitv2.spacers.spacer0") 0.375rem theme("digitv2.spacers.spacer0") #F4773840;
45
+ box-shadow: var(--digitv2-spacers-spacer0) var(--digitv2-spacers-spacer0) 0.375rem var(--digitv2-spacers-spacer0) #F4773840;
46
46
  }
47
47
 
48
48
  input:checked+.digit-toggle-label {
49
49
  @include typography-heading-s;
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-s.mobile");
57
+ font-size: var(--digitv2-fontSize-heading-s-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-s.tablet");
62
+ font-size: var(--digitv2-fontSize-heading-s-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-s.desktop");
67
+ font-size: var(--digitv2-fontSize-heading-s-desktop);
68
68
  }
69
- background-color: theme("digitv2.lightTheme.primary-1");
70
- color: theme("digitv2.lightTheme.paper-primary") !important;
69
+ background-color: var(--digitv2-lightTheme-primary-1);
70
+ color: var(--digitv2-lightTheme-paper-primary) !important;
71
71
  }
72
72
 
73
73
  &.checked {
74
- background-color: theme("digitv2.lightTheme.primary-1");
74
+ background-color: var(--digitv2-lightTheme-primary-1);
75
75
  width: 7.125rem;
76
- border: 0.063rem solid theme("digitv2.lightTheme.primary-1");
76
+ border: 0.063rem solid var(--digitv2-lightTheme-primary-1);
77
77
 
78
78
  .digit-toggle-label {
79
79
  @include typography-heading-s;
80
- font-family: theme("digitv2.fontFamily.sans");
81
- font-style: theme("digitv2.fontStyle.normal");
82
- font-weight: theme("digitv2.fontWeight.bold");
83
- line-height: theme("digitv2.lineHeight.lineheight1");
80
+ font-family: var(--digitv2-fontFamily-sans);
81
+ font-style: var(--digitv2-fontStyle-normal);
82
+ font-weight: var(--digitv2-fontWeight-bold);
83
+ line-height: var(--digitv2-lineHeight-lineheight1);
84
84
 
85
85
  @media (max-aspect-ratio: 9/16) {
86
86
  /* Media query for mobile */
87
- font-size: theme("digitv2.fontSize.heading-s.mobile");
87
+ font-size: var(--digitv2-fontSize-heading-s-mobile);
88
88
  }
89
89
 
90
90
  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
91
91
  /* Media query for tablets */
92
- font-size: theme("digitv2.fontSize.heading-s.tablet");
92
+ font-size: var(--digitv2-fontSize-heading-s-tablet);
93
93
  }
94
94
 
95
95
  @media (min-aspect-ratio: 3/4) {
96
96
  /* Media query for desktop */
97
- font-size: theme("digitv2.fontSize.heading-s.desktop");
97
+ font-size: var(--digitv2-fontSize-heading-s-desktop);
98
98
  }
99
- color: theme("digitv2.lightTheme.paper-primary");
99
+ color: var(--digitv2-lightTheme-paper-primary);
100
100
  }
101
101
  }
102
102
  }
@@ -107,8 +107,8 @@
107
107
  }
108
108
 
109
109
  .digit-toggle-label {
110
- color: theme("digitv2.lightTheme.text-disabled");
111
- padding: theme("digitv2.spacers.spacer2") theme("digitv2.spacers.spacer3");
110
+ color: var(--digitv2-lightTheme-text-disabled);
111
+ padding: var(--digitv2-spacers-spacer2) var(--digitv2-spacers-spacer3);
112
112
  }
113
113
 
114
114
 
@@ -129,7 +129,7 @@
129
129
  align-items: center;
130
130
  justify-content: center;
131
131
  padding: 0.75rem;
132
- background-color: theme("digitv2.lightTheme.paper-primary");
132
+ background-color: var(--digitv2-lightTheme-paper-primary);
133
133
  border: 1px solid #d6d6d6;
134
134
  cursor: pointer;
135
135
  transition: all 0.2s ease;
@@ -149,27 +149,27 @@
149
149
  }
150
150
 
151
151
  .digit-toggle-toolbar.vertical-toggle .digit-toggle-btn-wrap.checked {
152
- border: 2px solid theme("digitv2.lightTheme.primary-1");
153
- background-color: theme("digitv2.lightTheme.paper-primary") !important;
154
- color: theme("digitv2.lightTheme.primary-1");
152
+ border: 2px solid var(--digitv2-lightTheme-primary-1);
153
+ background-color: var(--digitv2-lightTheme-paper-primary) !important;
154
+ color: var(--digitv2-lightTheme-primary-1);
155
155
  width: 9rem !important;
156
156
  transform: scaleX(1.05);
157
157
  }
158
158
 
159
159
  .digit-toggle-toolbar.vertical-toggle .digit-toggle-label {
160
160
  font-weight: bold;
161
- font-size: theme("digitv2.fontSize.heading-s.mobile");
161
+ font-size: var(--digitv2-fontSize-heading-s-mobile);
162
162
  text-align: center;
163
163
  width: 100%;
164
- background-color: theme("digitv2.lightTheme.paper-primary");
165
- color: theme("digitv2.lightTheme.primary-2");
164
+ background-color: var(--digitv2-lightTheme-paper-primary);
165
+ color: var(--digitv2-lightTheme-primary-2);
166
166
 
167
- @media (min-width: theme("digitv2.screens.tablet")) {
168
- font-size: theme("digitv2.fontSize.heading-s.tablet");
167
+ @media (min-width: var(--digitv2-screens-tablet)) {
168
+ font-size: var(--digitv2-fontSize-heading-s-tablet);
169
169
  }
170
170
 
171
- @media (min-width: theme("digitv2.screens.desktop")) {
172
- font-size: theme("digitv2.fontSize.heading-s.desktop");
171
+ @media (min-width: var(--digitv2-screens-desktop)) {
172
+ font-size: var(--digitv2-fontSize-heading-s-desktop);
173
173
  }
174
174
  }
175
175
 
@@ -177,8 +177,8 @@
177
177
  display: none;
178
178
  }
179
179
  .vertical-toggle .digit-toggle-btn-wrap input:checked + .digit-toggle-label {
180
- background-color:theme("digitv2.lightTheme.paper-primary") !important;
181
- color: theme("digitv2.lightTheme.primary-1") !important;
180
+ background-color:var(--digitv2-lightTheme-paper-primary) !important;
181
+ color: var(--digitv2-lightTheme-primary-1) !important;
182
182
  border-bottom-right-radius: 0.5rem;
183
183
  border-top-right-radius: 0.5rem;
184
184
  }
@@ -189,7 +189,7 @@
189
189
  .vertical-toggle{
190
190
  .digit-toggle-label{
191
191
  &.disabled{
192
- color: theme("digitv2.lightTheme.text-disabled") !important;
192
+ color: var(--digitv2-lightTheme-text-disabled) !important;
193
193
  }
194
194
  }
195
195
  }