@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/otpInputV2.scss CHANGED
@@ -5,7 +5,7 @@
5
5
  display: flex !important;
6
6
  align-items: center;
7
7
  flex-direction: column;
8
- gap: theme("digitv2.spacers.spacer4");
8
+ gap: var(--digitv2-spacers-spacer4);
9
9
  justify-content: flex-start;
10
10
 
11
11
  &.inline {
@@ -15,12 +15,12 @@
15
15
 
16
16
  .digit-otp-label {
17
17
  @include typography-body-l;
18
- color: theme("digitv2.lightTheme.text-primary");
18
+ color: var(--digitv2-lightTheme-text-primary);
19
19
  }
20
20
 
21
21
  .otp-input-container {
22
22
  justify-content: center;
23
- gap: theme("digitv2.spacers.spacer3");
23
+ gap: var(--digitv2-spacers-spacer3);
24
24
  display: flex !important;
25
25
  }
26
26
 
@@ -29,7 +29,7 @@
29
29
  display: flex;
30
30
  align-items: center;
31
31
  justify-content: center;
32
- gap:theme("digitv2.spacers.spacer2");
32
+ gap:var(--digitv2-spacers-spacer2);
33
33
  flex-direction: column !important;
34
34
 
35
35
  .digit-error-icon-message-wrap {
@@ -42,60 +42,60 @@
42
42
  width: 3.125rem;
43
43
  height: 3.125rem;
44
44
  text-align: center;
45
- color: theme("digitv2.lightTheme.text-primary");
46
- border: 0.063rem solid theme("digitv2.lightTheme.generic-inputborder");
45
+ color: var(--digitv2-lightTheme-text-primary);
46
+ border: 0.063rem solid var(--digitv2-lightTheme-generic-inputborder);
47
47
  outline: none;
48
48
  transition: border-color 0.3s ease-in-out;
49
- font-family: theme("digitv2.fontFamily.sans");
50
- font-style: theme("digitv2.fontStyle.normal");
51
- font-weight: theme("digitv2.fontWeight.bold");
52
- line-height: theme("digitv2.lineHeight.lineheight1");
49
+ font-family: var(--digitv2-fontFamily-sans);
50
+ font-style: var(--digitv2-fontStyle-normal);
51
+ font-weight: var(--digitv2-fontWeight-bold);
52
+ line-height: var(--digitv2-lineHeight-lineheight1);
53
53
 
54
54
  &.error {
55
- border: 0.063rem solid theme("digitv2.lightTheme.alert-error");
55
+ border: 0.063rem solid var(--digitv2-lightTheme-alert-error);
56
56
  }
57
57
 
58
58
  @media (max-aspect-ratio: 9/16) {
59
59
  /* Media query for mobile */
60
- font-size: theme("digitv2.fontSize.heading-m.mobile");
60
+ font-size: var(--digitv2-fontSize-heading-m-mobile);
61
61
  }
62
62
 
63
63
  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
64
64
  /* Media query for tablets */
65
- font-size: theme("digitv2.fontSize.heading-m.tablet");
65
+ font-size: var(--digitv2-fontSize-heading-m-tablet);
66
66
  }
67
67
 
68
68
  @media (min-aspect-ratio: 3/4) {
69
69
  /* Media query for desktop */
70
- font-size: theme("digitv2.fontSize.heading-m.desktop");
70
+ font-size: var(--digitv2-fontSize-heading-m-desktop);
71
71
  }
72
72
  }
73
73
 
74
74
  .otp-input:focus {
75
- border-color: theme("digitv2.lightTheme.primary-1");
75
+ border-color: var(--digitv2-lightTheme-primary-1);
76
76
  }
77
77
 
78
78
  .otp-input::placeholder {
79
79
  @include typography-heading-m;
80
- color: theme("digitv2.lightTheme.text-disabled");
81
- font-family: theme("digitv2.fontFamily.sans");
82
- font-style: theme("digitv2.fontStyle.normal");
83
- font-weight: theme("digitv2.fontWeight.bold");
84
- line-height: theme("digitv2.lineHeight.lineheight1");
80
+ color: var(--digitv2-lightTheme-text-disabled);
81
+ font-family: var(--digitv2-fontFamily-sans);
82
+ font-style: var(--digitv2-fontStyle-normal);
83
+ font-weight: var(--digitv2-fontWeight-bold);
84
+ line-height: var(--digitv2-lineHeight-lineheight1);
85
85
 
86
86
  @media (max-aspect-ratio: 9/16) {
87
87
  /* Media query for mobile */
88
- font-size: theme("digitv2.fontSize.heading-m.mobile");
88
+ font-size: var(--digitv2-fontSize-heading-m-mobile);
89
89
  }
90
90
 
91
91
  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
92
92
  /* Media query for tablets */
93
- font-size: theme("digitv2.fontSize.heading-m.tablet");
93
+ font-size: var(--digitv2-fontSize-heading-m-tablet);
94
94
  }
95
95
 
96
96
  @media (min-aspect-ratio: 3/4) {
97
97
  /* Media query for desktop */
98
- font-size: theme("digitv2.fontSize.heading-m.desktop");
98
+ font-size: var(--digitv2-fontSize-heading-m-desktop);
99
99
  }
100
100
  }
101
101
 
package/src/digitv2/components/panelCardV2.scss CHANGED
@@ -5,40 +5,40 @@
5
5
  @apply w-full flex-col;
6
6
  display: flex;
7
7
  height: fit-content;
8
- border-radius: theme("digitv2.spacers.spacer1");
9
- box-shadow: theme("digitv2.spacers.spacer0") 0.063rem 0.125rem theme("digitv2.spacers.spacer0") #00000029;
10
- background: theme("digitv2.lightTheme.paper-primary");
8
+ border-radius: var(--digitv2-spacers-spacer1);
9
+ box-shadow: var(--digitv2-spacers-spacer0) 0.063rem 0.125rem var(--digitv2-spacers-spacer0) #00000029;
10
+ background: var(--digitv2-lightTheme-paper-primary);
11
11
 
12
12
  .digit-panelcard-header{
13
13
 
14
14
  &.with-shadow {
15
- box-shadow: theme("digitv2.spacers.spacer0") 0.063rem 0.125rem theme("digitv2.spacers.spacer0") #00000026;
15
+ box-shadow: var(--digitv2-spacers-spacer0) 0.063rem 0.125rem var(--digitv2-spacers-spacer0) #00000026;
16
16
  }
17
17
 
18
18
  @media (min-width: 48rem) {
19
- padding: theme("digitv2.spacers.spacer6");
20
- padding-bottom: theme("digitv2.spacers.spacer0");
19
+ padding: var(--digitv2-spacers-spacer6);
20
+ padding-bottom: var(--digitv2-spacers-spacer0);
21
21
 
22
22
  &.with-shadow {
23
- padding-bottom: theme("digitv2.spacers.spacer6");
23
+ padding-bottom: var(--digitv2-spacers-spacer6);
24
24
  }
25
25
  }
26
26
 
27
27
  @media (min-width: 30.063rem) and (max-width: 47.938rem) {
28
- padding: theme("digitv2.spacers.spacer5");
29
- padding-bottom: theme("digitv2.spacers.spacer0");
28
+ padding: var(--digitv2-spacers-spacer5);
29
+ padding-bottom: var(--digitv2-spacers-spacer0);
30
30
 
31
31
  &.with-shadow {
32
- padding-bottom: theme("digitv2.spacers.spacer5");
32
+ padding-bottom: var(--digitv2-spacers-spacer5);
33
33
  }
34
34
  }
35
35
 
36
36
  @media (max-width: 30rem) {
37
- padding: theme("digitv2.spacers.spacer4");
38
- padding-bottom: theme("digitv2.spacers.spacer0");
37
+ padding: var(--digitv2-spacers-spacer4);
38
+ padding-bottom: var(--digitv2-spacers-spacer0);
39
39
 
40
40
  &.with-shadow {
41
- padding-bottom: theme("digitv2.spacers.spacer4");
41
+ padding-bottom: var(--digitv2-spacers-spacer4);
42
42
  }
43
43
  }
44
44
  }
@@ -54,59 +54,59 @@
54
54
  }
55
55
 
56
56
  @media (min-width: 48rem) {
57
- gap: theme("digitv2.spacers.spacer6");
58
- padding: theme("digitv2.spacers.spacer6") theme("digitv2.spacers.spacer6") theme("digitv2.spacers.spacer0") theme("digitv2.spacers.spacer6");
57
+ gap: var(--digitv2-spacers-spacer6);
58
+ padding: var(--digitv2-spacers-spacer6) var(--digitv2-spacers-spacer6) var(--digitv2-spacers-spacer0) var(--digitv2-spacers-spacer6);
59
59
 
60
60
  &.with-shadow,
61
61
  &.without-footer{
62
- padding: theme("digitv2.spacers.spacer6");
62
+ padding: var(--digitv2-spacers-spacer6);
63
63
  }
64
64
 
65
65
  }
66
66
 
67
67
  @media (min-width: 30.063rem) and (max-width: 47.938rem) {
68
- gap: theme("digitv2.spacers.spacer5");
69
- padding: theme("digitv2.spacers.spacer5") theme("digitv2.spacers.spacer5") theme("digitv2.spacers.spacer0") theme("digitv2.spacers.spacer5");
68
+ gap: var(--digitv2-spacers-spacer5);
69
+ padding: var(--digitv2-spacers-spacer5) var(--digitv2-spacers-spacer5) var(--digitv2-spacers-spacer0) var(--digitv2-spacers-spacer5);
70
70
 
71
71
  &.with-shadow,
72
72
  &.without-footer{
73
- padding: theme("digitv2.spacers.spacer5");
73
+ padding: var(--digitv2-spacers-spacer5);
74
74
  }
75
75
 
76
76
  }
77
77
 
78
78
  @media (max-width: 30rem) {
79
- gap: theme("digitv2.spacers.spacer4");
80
- padding: theme("digitv2.spacers.spacer4") theme("digitv2.spacers.spacer4") theme("digitv2.spacers.spacer0") theme("digitv2.spacers.spacer4");
79
+ gap: var(--digitv2-spacers-spacer4);
80
+ padding: var(--digitv2-spacers-spacer4) var(--digitv2-spacers-spacer4) var(--digitv2-spacers-spacer0) var(--digitv2-spacers-spacer4);
81
81
 
82
82
  &.with-shadow,
83
83
  &.without-footer{
84
- padding: theme("digitv2.spacers.spacer4");
84
+ padding: var(--digitv2-spacers-spacer4);
85
85
  }
86
86
  }
87
87
 
88
88
  .digit-panelcard-description {
89
89
  @include typography-body-s;
90
- font-family: theme("digitv2.fontFamily.sans");
91
- font-style: theme("digitv2.fontStyle.normal");
92
- font-weight: theme("digitv2.fontWeight.regular");
93
- line-height: theme("digitv2.lineHeight.lineheight2");
90
+ font-family: var(--digitv2-fontFamily-sans);
91
+ font-style: var(--digitv2-fontStyle-normal);
92
+ font-weight: var(--digitv2-fontWeight-regular);
93
+ line-height: var(--digitv2-lineHeight-lineheight2);
94
94
 
95
95
  @media (max-aspect-ratio: 9/16) {
96
96
  /* Media query for mobile */
97
- font-size: theme("digitv2.fontSize.body-s.mobile");
97
+ font-size: var( --digitv2-fontSize-body-s-mobile);
98
98
  }
99
99
 
100
100
  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
101
101
  /* Media query for tablets */
102
- font-size: theme("digitv2.fontSize.body-s.tablet");
102
+ font-size: var( --digitv2-fontSize-body-s-tablet);
103
103
  }
104
104
 
105
105
  @media (min-aspect-ratio: 3/4) {
106
106
  /* Media query for desktop */
107
- font-size: theme("digitv2.fontSize.body-s.desktop");
107
+ font-size: var( --digitv2-fontSize-body-s-desktop);
108
108
  }
109
- color: theme("digitv2.lightTheme.generic-inputborder");
109
+ color: var(--digitv2-lightTheme-generic-inputborder);
110
110
  }
111
111
 
112
112
  }
@@ -114,31 +114,31 @@
114
114
  .digit-panelcard-footer {
115
115
  @apply flex-wrap;
116
116
  display: flex;
117
- gap: theme("digitv2.spacers.spacer4");
117
+ gap: var(--digitv2-spacers-spacer4);
118
118
 
119
119
  &.with-shadow {
120
- box-shadow: theme("digitv2.spacers.spacer0") -0.063rem 0.125rem theme("digitv2.spacers.spacer0") #00000026;
120
+ box-shadow: var(--digitv2-spacers-spacer0) -0.063rem 0.125rem var(--digitv2-spacers-spacer0) #00000026;
121
121
  }
122
122
 
123
123
  @media (min-width: 48rem) {
124
- padding: theme("digitv2.spacers.spacer6");
124
+ padding: var(--digitv2-spacers-spacer6);
125
125
  }
126
126
 
127
127
  @media (min-width: 30.063rem) and (max-width: 47.938rem) {
128
128
  @apply w-full;
129
- padding: theme("digitv2.spacers.spacer5");
129
+ padding: var(--digitv2-spacers-spacer5);
130
130
  }
131
131
 
132
132
  @media (max-width: 30rem) {
133
133
  @apply flex-col;
134
- padding: theme("digitv2.spacers.spacer4");
134
+ padding: var(--digitv2-spacers-spacer4);
135
135
  }
136
136
  }
137
137
 
138
138
  .digit-panelcard-footer-buttons {
139
139
  margin-left: auto;
140
140
  display: flex;
141
- gap: theme("digitv2.spacers.spacer4");
141
+ gap: var(--digitv2-spacers-spacer4);
142
142
  @apply max-w-full flex-wrap;
143
143
 
144
144
  @media (min-width: 30.063rem) and (max-width: 47.938rem) {
@@ -151,7 +151,7 @@
151
151
 
152
152
  @media (max-width: 30rem) {
153
153
  @apply flex-col;
154
- margin: theme("digitv2.spacers.spacer0");
154
+ margin: var(--digitv2-spacers-spacer0);
155
155
 
156
156
  button {
157
157
  width: 100%;
@@ -160,7 +160,7 @@
160
160
  }
161
161
 
162
162
  .panelcard-infocard{
163
- margin: theme("digitv2.spacers.spacer0");
163
+ margin: var(--digitv2-spacers-spacer0);
164
164
  width: 100%;
165
165
  max-width: 100%;
166
166
  min-width: 100%;
@@ -168,16 +168,16 @@
168
168
  }
169
169
 
170
170
  .digit-panelcard-children-wrap::-webkit-scrollbar {
171
- width: theme("digitv2.spacers.spacer2");
172
- background-color: theme("digitv2.lightTheme.generic-background");
171
+ width: var(--digitv2-spacers-spacer2);
172
+ background-color: var(--digitv2-lightTheme-generic-background);
173
173
  }
174
174
 
175
175
  .digit-panelcard-children-wrap::-webkit-scrollbar-track {
176
- background-color: theme("digitv2.lightTheme.generic-background");
176
+ background-color: var(--digitv2-lightTheme-generic-background);
177
177
  border-radius: 0.563rem;
178
178
  }
179
179
 
180
180
  .digit-panelcard-children-wrap::-webkit-scrollbar-thumb {
181
- background-color: theme("digitv2.lightTheme.generic-divider");
181
+ background-color: var(--digitv2-lightTheme-generic-divider);
182
182
  border-radius: 0.563rem;
183
183
  }
package/src/digitv2/components/panelV2.scss CHANGED
@@ -3,24 +3,24 @@
3
3
 
4
4
  .digit-panel-wrapper {
5
5
  @apply flex flex-col items-center;
6
- gap: theme("digitv2.spacers.spacer6");
6
+ gap: var(--digitv2-spacers-spacer6);
7
7
 
8
8
  &.success {
9
- background-color: theme("digitv2.lightTheme.alert-success");
9
+ background-color: var(--digitv2-lightTheme-alert-success);
10
10
 
11
11
  @media (min-width: 48rem) {
12
- padding: theme("digitv2.spacers.spacer10");
12
+ padding: var(--digitv2-spacers-spacer10);
13
13
  padding-top: 0.703rem;
14
14
  }
15
15
 
16
16
  @media (min-width: 30.063rem) and (max-width: 47.938rem) {
17
- padding: theme("digitv2.spacers.spacer10");
18
- padding-top: theme("digitv2.spacers.spacer4");
17
+ padding: var(--digitv2-spacers-spacer10);
18
+ padding-top: var(--digitv2-spacers-spacer4);
19
19
  }
20
20
 
21
21
  @media (max-width: 30rem) {
22
- padding: theme("digitv2.spacers.spacer8") theme("digitv2.spacers.spacer10");
23
- padding-top: theme("digitv2.spacers.spacer4");
22
+ padding: var(--digitv2-spacers-spacer8) var(--digitv2-spacers-spacer10);
23
+ padding-top: var(--digitv2-spacers-spacer4);
24
24
  }
25
25
 
26
26
  }
@@ -29,20 +29,20 @@
29
29
  &.with-svg {
30
30
 
31
31
  @media (min-width: 48rem) {
32
- padding: theme("digitv2.spacers.spacer10");
32
+ padding: var(--digitv2-spacers-spacer10);
33
33
  }
34
34
 
35
35
  @media (min-width: 30.063rem) and (max-width: 47.938rem) {
36
- padding: theme("digitv2.spacers.spacer10");
36
+ padding: var(--digitv2-spacers-spacer10);
37
37
  }
38
38
 
39
39
  @media (max-width: 30rem) {
40
- padding: theme("digitv2.spacers.spacer8") theme("digitv2.spacers.spacer10");
40
+ padding: var(--digitv2-spacers-spacer8) var(--digitv2-spacers-spacer10);
41
41
  }
42
42
  }
43
43
 
44
44
  &.error {
45
- background-color: theme("digitv2.lightTheme.alert-error");
45
+ background-color: var(--digitv2-lightTheme-alert-error);
46
46
  }
47
47
 
48
48
  .digit-panel-message-wrapper {
@@ -57,11 +57,11 @@
57
57
  }
58
58
 
59
59
  @media (min-width: 30.063rem) and (max-width: 47.938rem) {
60
- gap: theme("digitv2.spacers.spacer2");
60
+ gap: var(--digitv2-spacers-spacer2);
61
61
  }
62
62
 
63
63
  @media (max-width: 30rem) {
64
- gap: theme("digitv2.spacers.spacer2");
64
+ gap: var(--digitv2-spacers-spacer2);
65
65
  }
66
66
  }
67
67
 
@@ -70,15 +70,15 @@
70
70
  &.with-svg {
71
71
 
72
72
  @media (min-width: 48rem) {
73
- gap: theme("digitv2.spacers.spacer6");
73
+ gap: var(--digitv2-spacers-spacer6);
74
74
  }
75
75
 
76
76
  @media (min-width: 30.063rem) and (max-width: 47.938rem) {
77
- gap: theme("digitv2.spacers.spacer5");
77
+ gap: var(--digitv2-spacers-spacer5);
78
78
  }
79
79
 
80
80
  @media (max-width: 30rem) {
81
- gap: theme("digitv2.spacers.spacer4");
81
+ gap: var(--digitv2-spacers-spacer4);
82
82
  }
83
83
 
84
84
  }
@@ -87,7 +87,7 @@
87
87
  @include typography-heading-xl;
88
88
  @apply whitespace-pre-wrap break-words text-center;
89
89
  line-height: normal;
90
- color: theme("digitv2.lightTheme.paper-primary");
90
+ color: var(--digitv2-lightTheme-paper-primary);
91
91
  }
92
92
  }
93
93
 
@@ -95,41 +95,41 @@
95
95
  display: flex;
96
96
  flex-direction: column !important;
97
97
  align-items: center;
98
- gap: theme("digitv2.spacers.spacer1");
98
+ gap: var(--digitv2-spacers-spacer1);
99
99
 
100
100
  .digit-panel-info {
101
101
  @include typography-body-l;
102
- color: theme("digitv2.lightTheme.paper-primary");
102
+ color: var(--digitv2-lightTheme-paper-primary);
103
103
  }
104
104
 
105
105
  .digit-panel-multiple-responses {
106
106
  display: flex;
107
107
  flex-direction: column;
108
- gap: theme("digitv2.spacers.spacer1");
108
+ gap: var(--digitv2-spacers-spacer1);
109
109
  }
110
110
 
111
111
  .digit-panel-response {
112
112
  @include typography-heading-m;
113
- font-family: theme("digitv2.fontFamily.sans");
114
- font-style: theme("digitv2.fontStyle.normal");
115
- font-weight: theme("digitv2.fontWeight.bold");
116
- line-height: theme("digitv2.lineHeight.lineheight1");
113
+ font-family: var(--digitv2-fontFamily-sans);
114
+ font-style: var(--digitv2-fontStyle-normal);
115
+ font-weight: var(--digitv2-fontWeight-bold);
116
+ line-height: var(--digitv2-lineHeight-lineheight1);
117
117
 
118
118
  @media (max-aspect-ratio: 9/16) {
119
119
  /* Media query for mobile */
120
- font-size: theme("digitv2.fontSize.heading-m.mobile");
120
+ font-size: var(--digitv2-fontSize-heading-m-mobile);
121
121
  }
122
122
 
123
123
  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
124
124
  /* Media query for tablets */
125
- font-size: theme("digitv2.fontSize.heading-m.tablet");
125
+ font-size: var(--digitv2-fontSize-heading-m-tablet);
126
126
  }
127
127
 
128
128
  @media (min-aspect-ratio: 3/4) {
129
129
  /* Media query for desktop */
130
- font-size: theme("digitv2.fontSize.heading-m.desktop");
130
+ font-size: var(--digitv2-fontSize-heading-m-desktop);
131
131
  }
132
- color: theme("digitv2.lightTheme.paper-primary");
132
+ color: var(--digitv2-lightTheme-paper-primary);
133
133
  line-height: normal;
134
134
  }
135
135