@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/textblockV2.scss CHANGED
@@ -6,83 +6,83 @@
6
6
  @apply flex flex-col;
7
7
 
8
8
  @media (min-width: 48rem) {
9
- gap: theme("digitv2.spacers.spacer6");
9
+ gap: var(--digitv2-spacers-spacer6);
10
10
  }
11
11
 
12
12
  @media (min-width: 30.063rem) and (max-width: 47.938rem) {
13
- gap: theme("digitv2.spacers.spacer5");
13
+ gap: var(--digitv2-spacers-spacer5);
14
14
  }
15
15
 
16
16
  @media (max-width: 30rem) {
17
- gap: theme("digitv2.spacers.spacer4");
17
+ gap: var(--digitv2-spacers-spacer4);
18
18
  }
19
19
 
20
20
 
21
21
  .digit-text-block-header-content {
22
22
  .digit-text-block-caption {
23
23
  @include typography-caption-s;
24
- padding-bottom: theme("digitv2.spacers.spacer1");
25
- color: theme("digitv2.lightTheme.text-secondary");
24
+ padding-bottom: var(--digitv2-spacers-spacer1);
25
+ color: var(--digitv2-lightTheme-text-secondary);
26
26
  }
27
27
 
28
28
  .digit-text-block-header {
29
29
  @include typography-heading-xl;
30
- padding-bottom: theme("digitv2.spacers.spacer2");
31
- color: theme("digitv2.lightTheme.text-primary");
30
+ padding-bottom: var(--digitv2-spacers-spacer2);
31
+ color: var(--digitv2-lightTheme-text-primary);
32
32
  line-height: normal;
33
33
 
34
34
  @media (max-width: 30rem) {
35
- padding-bottom: theme("digitv2.spacers.spacer1");
35
+ padding-bottom: var(--digitv2-spacers-spacer1);
36
36
  }
37
37
  }
38
38
 
39
39
  .digit-text-block-subheader {
40
40
  @include typography-heading-m;
41
- font-family: theme("digitv2.fontFamily.sans");
42
- font-style: theme("digitv2.fontStyle.normal");
43
- font-weight: theme("digitv2.fontWeight.bold");
44
- line-height: theme("digitv2.lineHeight.lineheight1");
41
+ font-family: var(--digitv2-fontFamily-sans);
42
+ font-style: var(--digitv2-fontStyle-normal);
43
+ font-weight: var(--digitv2-fontWeight-bold);
44
+ line-height: var(--digitv2-lineHeight-lineheight1);
45
45
 
46
46
  @media (max-aspect-ratio: 9/16) {
47
47
  /* Media query for mobile */
48
- font-size: theme("digitv2.fontSize.heading-m.mobile");
48
+ font-size: var(--digitv2-fontSize-heading-m-mobile);
49
49
  }
50
50
 
51
51
  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
52
52
  /* Media query for tablets */
53
- font-size: theme("digitv2.fontSize.heading-m.tablet");
53
+ font-size: var(--digitv2-fontSize-heading-m-tablet);
54
54
  }
55
55
 
56
56
  @media (min-aspect-ratio: 3/4) {
57
57
  /* Media query for desktop */
58
- font-size: theme("digitv2.fontSize.heading-m.desktop");
58
+ font-size: var(--digitv2-fontSize-heading-m-desktop);
59
59
  }
60
- color: theme("digitv2.lightTheme.text-secondary");
60
+ color: var(--digitv2-lightTheme-text-secondary);
61
61
  line-height: normal;
62
62
  }
63
63
  }
64
64
 
65
65
  .digit-text-block-body {
66
66
  @include typography-body-s;
67
- font-family: theme("digitv2.fontFamily.sans");
68
- font-style: theme("digitv2.fontStyle.normal");
69
- font-weight: theme("digitv2.fontWeight.regular");
70
- line-height: theme("digitv2.lineHeight.lineheight2");
67
+ font-family: var(--digitv2-fontFamily-sans);
68
+ font-style: var(--digitv2-fontStyle-normal);
69
+ font-weight: var(--digitv2-fontWeight-regular);
70
+ line-height: var(--digitv2-lineHeight-lineheight2);
71
71
 
72
72
  @media (max-aspect-ratio: 9/16) {
73
73
  /* Media query for mobile */
74
- font-size: theme("digitv2.fontSize.body-s.mobile");
74
+ font-size: var( --digitv2-fontSize-body-s-mobile);
75
75
  }
76
76
 
77
77
  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
78
78
  /* Media query for tablets */
79
- font-size: theme("digitv2.fontSize.body-s.tablet");
79
+ font-size: var( --digitv2-fontSize-body-s-tablet);
80
80
  }
81
81
 
82
82
  @media (min-aspect-ratio: 3/4) {
83
83
  /* Media query for desktop */
84
- font-size: theme("digitv2.fontSize.body-s.desktop");
84
+ font-size: var( --digitv2-fontSize-body-s-desktop);
85
85
  }
86
- color: theme("digitv2.lightTheme.generic-inputborder");
86
+ color: var(--digitv2-lightTheme-generic-inputborder);
87
87
  }
88
88
  }
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,13 +86,14 @@
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
+ border-radius: var(--digitv2-borderRadius-radius2);
96
97
 
97
98
  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
98
99
  min-width: 30rem;
@@ -107,15 +108,15 @@
107
108
  }
108
109
 
109
110
  &.digit-info {
110
- background-color: theme("digitv2.lightTheme.alert-info");
111
+ background-color: var(--digitv2-lightTheme-alert-info);
111
112
  }
112
113
 
113
114
  &.digit-error {
114
- background-color: theme("digitv2.lightTheme.alert-error");
115
+ background-color: var(--digitv2-lightTheme-alert-error);
115
116
  }
116
117
 
117
118
  &.digit-warning {
118
- background-color: theme("digitv2.lightTheme.alert-warning");
119
+ background-color: var(--digitv2-lightTheme-alert-warning);
119
120
 
120
121
  &.digit-warning-buttons {
121
122
  @apply block;
@@ -141,9 +142,9 @@
141
142
  .toast-label {
142
143
  @include typography-caption-s;
143
144
  @apply text-left overflow-hidden whitespace-nowrap flex-grow flex items-center h-6;
144
- letter-spacing: theme("digitv2.spacers.spacer0");
145
- color: theme("digitv2.lightTheme.paper-primary");
146
- 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);
147
148
  text-overflow: ellipsis;
148
149
  }
149
150
  }