@egovernments/digit-ui-components-css 0.2.0-beta.8 → 0.2.0-rc.16

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