@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/treeSelectV2.scss CHANGED
@@ -4,13 +4,13 @@
4
4
  .digit-tree-select-options-container.first-level:nth-of-type(even) {
5
5
  .digit-tree-select-option.level-0,
6
6
  .digit-tree-multiselect-option.level-0:not(.checked){
7
- background-color: theme("digitv2.lightTheme.paper-secondary");
7
+ background-color: var(--digitv2-lightTheme-paper-secondary);
8
8
  }
9
9
  }
10
10
  .digit-tree-select-options-container.first-level:nth-of-type(odd) {
11
11
  .digit-tree-select-option.level-0,
12
12
  .digit-tree-multiselect-option.level-0:not(.checked){
13
- background-color: theme("digitv2.lightTheme.paper-primary");
13
+ background-color: var(--digitv2-lightTheme-paper-primary);
14
14
  }
15
15
  }
16
16
  .container.innerlevel {
@@ -20,37 +20,37 @@
20
20
  .digit-tree-multiselect-option {
21
21
  @apply relative cursor-pointer flex items-center;
22
22
  height: 2.4375rem;
23
- gap: theme("digitv2.spacers.spacer1");
24
- padding: theme("digitv2.spacers.spacer4") theme("digitv2.spacers.spacer3");
23
+ gap: var(--digitv2-spacers-spacer1);
24
+ padding: var(--digitv2-spacers-spacer4) var(--digitv2-spacers-spacer3);
25
25
  &:hover {
26
- background: theme("digitv2.lightTheme.primary-bg");
27
- border: 0.063rem solid theme("digitv2.lightTheme.primary-1");
26
+ background: var(--digitv2-lightTheme-primary-bg);
27
+ border: 0.063rem solid var(--digitv2-lightTheme-primary-1);
28
28
  }
29
29
  &.expanded {
30
30
  .digit-option-label {
31
31
  @include typography-heading-s;
32
- font-family: theme("digitv2.fontFamily.sans");
33
- font-style: theme("digitv2.fontStyle.normal");
34
- font-weight: theme("digitv2.fontWeight.bold");
35
- line-height: theme("digitv2.lineHeight.lineheight1");
32
+ font-family: var(--digitv2-fontFamily-sans);
33
+ font-style: var(--digitv2-fontStyle-normal);
34
+ font-weight: var(--digitv2-fontWeight-bold);
35
+ line-height: var(--digitv2-lineHeight-lineheight1);
36
36
 
37
37
  @media (max-aspect-ratio: 9/16) {
38
38
  /* Media query for mobile */
39
- font-size: theme("digitv2.fontSize.heading-s.mobile");
39
+ font-size: var(--digitv2-fontSize-heading-s-mobile);
40
40
  }
41
41
 
42
42
  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
43
43
  /* Media query for tablets */
44
- font-size: theme("digitv2.fontSize.heading-s.tablet");
44
+ font-size: var(--digitv2-fontSize-heading-s-tablet);
45
45
  }
46
46
 
47
47
  @media (min-aspect-ratio: 3/4) {
48
48
  /* Media query for desktop */
49
- font-size: theme("digitv2.fontSize.heading-s.desktop");
49
+ font-size: var(--digitv2-fontSize-heading-s-desktop);
50
50
  }
51
- color: theme("digitv2.lightTheme.text-primary");
51
+ color: var(--digitv2-lightTheme-text-primary);
52
52
  /*font-size: 1rem;
53
- font-weight: theme("digitv2.fontWeight.bold");
53
+ font-weight: var(--digitv2-fontWeight-bold);
54
54
  line-height: 1.188rem;*/
55
55
  }
56
56
  }
@@ -59,31 +59,31 @@
59
59
  margin: 0;
60
60
  }
61
61
  .digit-toggle-dropdown {
62
- width: theme("digitv2.spacers.spacer6");
63
- height: theme("digitv2.spacers.spacer6");
62
+ width: var(--digitv2-spacers-spacer6);
63
+ height: var(--digitv2-spacers-spacer6);
64
64
  }
65
65
  .digit-custom-checkbox {
66
- height: theme("digitv2.spacers.spacer5");
67
- width: theme("digitv2.spacers.spacer5");
66
+ height: var(--digitv2-spacers-spacer5);
67
+ width: var(--digitv2-spacers-spacer5);
68
68
  @apply flex items-center justify-center;
69
- border: 0.063rem solid theme("digitv2.lightTheme.text-secondary");
69
+ border: 0.063rem solid var(--digitv2-lightTheme-text-secondary);
70
70
  svg {
71
71
  @apply opacity-0 z-10;
72
72
  }
73
73
  &.checked {
74
- border: 0.125rem solid theme("digitv2.lightTheme.primary-1");
74
+ border: 0.125rem solid var(--digitv2-lightTheme-primary-1);
75
75
  svg {
76
76
  @apply opacity-100;
77
- width: theme("digitv2.spacers.spacer4");
78
- height: theme("digitv2.spacers.spacer4");
77
+ width: var(--digitv2-spacers-spacer4);
78
+ height: var(--digitv2-spacers-spacer4);
79
79
  }
80
80
  }
81
81
  &.intermediate {
82
- border: 0.125rem solid theme("digitv2.lightTheme.primary-1");
82
+ border: 0.125rem solid var(--digitv2-lightTheme-primary-1);
83
83
  .intermediate-state {
84
- width: theme("digitv2.spacers.spacer3");
85
- height: theme("digitv2.spacers.spacer3");
86
- background-color: theme("digitv2.lightTheme.primary-1");
84
+ width: var(--digitv2-spacers-spacer3);
85
+ height: var(--digitv2-spacers-spacer3);
86
+ background-color: var(--digitv2-lightTheme-primary-1);
87
87
  opacity: 1;
88
88
  }
89
89
  }
@@ -91,17 +91,17 @@
91
91
  }
92
92
  .container .digit-tree-multiselect-option.parent.checked.all-child-selected+.child-options-container,
93
93
  .container .digit-tree-multiselect-option.parent.checked.all-child-selected .child-options-container {
94
- background-color: theme("digitv2.lightTheme.primary-bg");
94
+ background-color: var(--digitv2-lightTheme-primary-bg);
95
95
  .digit-tree-multiselect-option.checked {
96
- background: theme("digitv2.lightTheme.primary-bg") !important;
96
+ background: var(--digitv2-lightTheme-primary-bg) !important;
97
97
  .digit-toggle-dropdown.svg {
98
98
  fill: #0B0C0C;
99
99
  }
100
100
  .digit-custom-checkbox {
101
- border: 0.125rem solid theme("digitv2.lightTheme.primary-1");
101
+ border: 0.125rem solid var(--digitv2-lightTheme-primary-1);
102
102
  }
103
103
  .digit-option-label {
104
- color: theme("digitv2.lightTheme.text-primary");
104
+ color: var(--digitv2-lightTheme-text-primary);
105
105
  }
106
106
  }
107
107
  .container {
@@ -111,48 +111,48 @@
111
111
  .digit-tree-select-option {
112
112
  &.expanded{
113
113
  &.level-0{
114
- background-color: theme("digitv2.lightTheme.paper-secondary") !important;
114
+ background-color: var(--digitv2-lightTheme-paper-secondary) !important;
115
115
  }
116
116
  }
117
117
  &.child {
118
118
  .digit-option-label {
119
- padding-left: theme("digitv2.spacers.spacer7");
119
+ padding-left: var(--digitv2-spacers-spacer7);
120
120
  }
121
121
  }
122
122
  }
123
123
  .digit-tree-multiselect-option {
124
124
  &.expanded{
125
125
  &.level-0:not(.checked){
126
- background-color: theme("digitv2.lightTheme.paper-secondary") !important;
126
+ background-color: var(--digitv2-lightTheme-paper-secondary) !important;
127
127
  }
128
128
  }
129
129
  &.checked {
130
- background-color: theme("digitv2.lightTheme.primary-1");
130
+ background-color: var(--digitv2-lightTheme-primary-1);
131
131
  .digit-custom-checkbox {
132
- border: 0.125rem solid theme("digitv2.lightTheme.paper-primary");
132
+ border: 0.125rem solid var(--digitv2-lightTheme-paper-primary);
133
133
  }
134
134
  .digit-option-label {
135
135
  @include typography-heading-s;
136
- font-family: theme("digitv2.fontFamily.sans");
137
- font-style: theme("digitv2.fontStyle.normal");
138
- font-weight: theme("digitv2.fontWeight.bold");
139
- line-height: theme("digitv2.lineHeight.lineheight1");
136
+ font-family: var(--digitv2-fontFamily-sans);
137
+ font-style: var(--digitv2-fontStyle-normal);
138
+ font-weight: var(--digitv2-fontWeight-bold);
139
+ line-height: var(--digitv2-lineHeight-lineheight1);
140
140
 
141
141
  @media (max-aspect-ratio: 9/16) {
142
142
  /* Media query for mobile */
143
- font-size: theme("digitv2.fontSize.heading-s.mobile");
143
+ font-size: var(--digitv2-fontSize-heading-s-mobile);
144
144
  }
145
145
 
146
146
  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
147
147
  /* Media query for tablets */
148
- font-size: theme("digitv2.fontSize.heading-s.tablet");
148
+ font-size: var(--digitv2-fontSize-heading-s-tablet);
149
149
  }
150
150
 
151
151
  @media (min-aspect-ratio: 3/4) {
152
152
  /* Media query for desktop */
153
- font-size: theme("digitv2.fontSize.heading-s.desktop");
153
+ font-size: var(--digitv2-fontSize-heading-s-desktop);
154
154
  }
155
- color: theme("digitv2.lightTheme.paper-primary");
155
+ color: var(--digitv2-lightTheme-paper-primary);
156
156
  }
157
157
  }
158
158
  &.child {
@@ -166,28 +166,28 @@
166
166
  }
167
167
  .digit-option-label {
168
168
  @include typography-body-s;
169
- font-family: theme("digitv2.fontFamily.sans");
170
- font-style: theme("digitv2.fontStyle.normal");
171
- font-weight: theme("digitv2.fontWeight.regular");
172
- line-height: theme("digitv2.lineHeight.lineheight2");
169
+ font-family: var(--digitv2-fontFamily-sans);
170
+ font-style: var(--digitv2-fontStyle-normal);
171
+ font-weight: var(--digitv2-fontWeight-regular);
172
+ line-height: var(--digitv2-lineHeight-lineheight2);
173
173
 
174
174
  @media (max-aspect-ratio: 9/16) {
175
175
  /* Media query for mobile */
176
- font-size: theme("digitv2.fontSize.body-s.mobile");
176
+ font-size: var( --digitv2-fontSize-body-s-mobile);
177
177
  }
178
178
 
179
179
  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
180
180
  /* Media query for tablets */
181
- font-size: theme("digitv2.fontSize.body-s.tablet");
181
+ font-size: var( --digitv2-fontSize-body-s-tablet);
182
182
  }
183
183
 
184
184
  @media (min-aspect-ratio: 3/4) {
185
185
  /* Media query for desktop */
186
- font-size: theme("digitv2.fontSize.body-s.desktop");
186
+ font-size: var( --digitv2-fontSize-body-s-desktop);
187
187
  }
188
188
  @apply overflow-hidden w-full;
189
189
  flex: 1;
190
- color: theme("digitv2.lightTheme.text-primary");}
190
+ color: var(--digitv2-lightTheme-text-primary);}
191
191
  .digit-toggle-dropdown {
192
192
  @apply cursor-pointer;
193
193
  }
package/src/digitv2/index.scss CHANGED
@@ -62,272 +62,272 @@
62
62
  /* important to be remove after fixing the components */
63
63
  .light {
64
64
  &-primary {
65
- color: theme("digitv2.lightTheme.primary-1") !important;
65
+ color: var(--digitv2-lightTheme-primary-1) !important;
66
66
 
67
67
  &-button {
68
- background-color: theme("digitv2.lightTheme.primary-1");
68
+ background-color: var(--digitv2-lightTheme-primary-1);
69
69
  }
70
70
 
71
71
  &-bg {
72
- background-color: theme("digitv2.lightTheme.primary-bg");
72
+ background-color: var(--digitv2-lightTheme-primary-bg);
73
73
  }
74
74
  }
75
75
 
76
76
  &-text-color {
77
77
  &-primary {
78
- color: theme("digitv2.lightTheme.text-primary");
78
+ color: var(--digitv2-lightTheme-text-primary);
79
79
  }
80
80
 
81
81
  &-secondary {
82
- color: theme("digitv2.lightTheme.text-secondary");
82
+ color: var(--digitv2-lightTheme-text-secondary);
83
83
  }
84
84
 
85
85
  &-disabled {
86
- color: theme("digitv2.lightTheme.text-disabled");
86
+ color: var(--digitv2-lightTheme-text-disabled);
87
87
  }
88
88
  }
89
89
 
90
90
  &-background {
91
- background-color: theme("digitv2.lightTheme.generic-background");
91
+ background-color: var(--digitv2-lightTheme-generic-background);
92
92
  }
93
93
 
94
94
  &-paper {
95
95
  &-primary {
96
- background-color: theme("digitv2.lightTheme.paper-primary") !important;
96
+ background-color: var(--digitv2-lightTheme-paper-primary) !important;
97
97
 
98
98
  &-color {
99
- color: theme("digitv2.lightTheme.paper-primary") !important;
99
+ color: var(--digitv2-lightTheme-paper-primary) !important;
100
100
  }
101
101
  }
102
102
 
103
103
  &-secondary {
104
- background-color: theme("digitv2.lightTheme.paper-secondary");
104
+ background-color: var(--digitv2-lightTheme-paper-secondary);
105
105
  }
106
106
  &-border {
107
107
  border: 0.5px solid;
108
108
  border-radius: 0.5rem;
109
- border-color: theme("digitv2.lightTheme.generic-background");
109
+ border-color: var(--digitv2-lightTheme-generic-background);
110
110
  }
111
111
 
112
112
  &-border {
113
113
  border-radius: 4px;
114
114
  border-style: solid;
115
115
  border-width: 1px;
116
- border-color: theme("digitv2.lightTheme.generic-divider");
116
+ border-color: var(--digitv2-lightTheme-generic-divider);
117
117
  }
118
118
  }
119
119
 
120
120
  &-divider {
121
- background-color: theme("digitv2.lightTheme.generic-divider");
121
+ background-color: var(--digitv2-lightTheme-generic-divider);
122
122
  }
123
123
 
124
124
  &-header-sidenav {
125
- color: theme("digitv2.lightTheme.primary-2");
125
+ color: var(--digitv2-lightTheme-primary-2);
126
126
  }
127
127
 
128
128
  &-input-border {
129
- border-color: theme("digitv2.lightTheme.generic-inputborder");
129
+ border-color: var(--digitv2-lightTheme-generic-inputborder);
130
130
  }
131
131
  }
132
132
 
133
133
  .alert {
134
134
  &-error {
135
- color: theme("digitv2.lightTheme.alert-error");
135
+ color: var(--digitv2-lightTheme-alert-error);
136
136
 
137
137
  &-bg {
138
- background-color: theme("digitv2.lightTheme.alert-errorbg");
138
+ background-color: var(--digitv2-lightTheme-alert-errorbg);
139
139
  }
140
140
 
141
141
  &-border {
142
- border-color: theme("digitv2.lightTheme.alert-error") !important;
142
+ border-color: var(--digitv2-lightTheme-alert-error) !important;
143
143
  }
144
144
  }
145
145
 
146
146
  &-success {
147
- color: theme("digitv2.lightTheme.alert-success");
147
+ color: var(--digitv2-lightTheme-alert-success);
148
148
 
149
149
  &-bg {
150
- background-color: theme("digitv2.lightTheme.alert-successbg");
150
+ background-color: var(--digitv2-lightTheme-alert-successbg);
151
151
  }
152
152
  }
153
153
 
154
154
  &-info {
155
- color: theme("digitv2.alert.info");
155
+ color: var(--digitv2-alert-info);
156
156
 
157
157
  &-bg {
158
- background-color: theme("digitv2.alert.info-bg");
158
+ background-color: var(--digitv2-alert-info-bg);
159
159
  }
160
160
  }
161
161
  }
162
162
 
163
163
  .chart {
164
164
  &-item-1 {
165
- color: theme("digitv2.chart.chart-1");
165
+ color: var(--digitv2-chart-chart-1);
166
166
  }
167
167
 
168
168
  &-item-1-gradient {
169
- color: theme("digitv2.chart.chart-1-gradient");
169
+ color: var(--digitv2-chart-chart-1-gradient);
170
170
  }
171
171
 
172
172
  &-item-2 {
173
- color: theme("digitv2.chart.chart-2");
173
+ color: var(--digitv2-chart-chart-2);
174
174
  }
175
175
 
176
176
  &-item-2-gradient {
177
- color: theme("digitv2.chart.chart-2-gradient");
177
+ color: var(--digitv2-chart-chart-2-gradient);
178
178
  }
179
179
 
180
180
  &-item-3 {
181
- color: theme("digitv2.chart.chart-3");
181
+ color: var(--digitv2-chart-chart-3);
182
182
  }
183
183
 
184
184
  &-item-4 {
185
- color: theme("digitv2.chart.chart-4");
185
+ color: var(--digitv2-chart-chart-4);
186
186
  }
187
187
 
188
188
  &-item-5 {
189
- color: theme("digitv2.chart.chart-5");
189
+ color: var(--digitv2-chart-chart-5);
190
190
  }
191
191
  }
192
192
 
193
193
  .color-constants-story{
194
194
 
195
195
  &.primary-1{
196
- background-color: theme("digitv2.lightTheme.primary-1");
196
+ background-color: var(--digitv2-lightTheme-primary-1);
197
197
  }
198
198
  &.primary-bg{
199
- background-color: theme("digitv2.lightTheme.primary-bg");
199
+ background-color: var(--digitv2-lightTheme-primary-bg);
200
200
  }
201
201
  &.primary-2{
202
- background-color: theme("digitv2.lightTheme.primary-2");
202
+ background-color: var(--digitv2-lightTheme-primary-2);
203
203
  }
204
204
  &.text-primary{
205
- background-color: theme("digitv2.lightTheme.text-primary");
205
+ background-color: var(--digitv2-lightTheme-text-primary);
206
206
  }
207
207
  &.text-secondary{
208
- background-color: theme("digitv2.lightTheme.text-secondary");
208
+ background-color: var(--digitv2-lightTheme-text-secondary);
209
209
  }
210
210
  &.text-disabled{
211
- background-color: theme("digitv2.lightTheme.text-disabled");
211
+ background-color: var(--digitv2-lightTheme-text-disabled);
212
212
  }
213
213
  &.alert-error{
214
- background-color: theme("digitv2.lightTheme.alert-error");
214
+ background-color: var(--digitv2-lightTheme-alert-error);
215
215
  }
216
216
  &.alert-errorbg{
217
- background-color: theme("digitv2.lightTheme.alert-errorbg");
217
+ background-color: var(--digitv2-lightTheme-alert-errorbg);
218
218
  }
219
219
  &.alert-success{
220
- background-color: theme("digitv2.lightTheme.alert-success");
220
+ background-color: var(--digitv2-lightTheme-alert-success);
221
221
  }
222
222
  &.alert-successbg{
223
- background-color: theme("digitv2.lightTheme.alert-successbg");
223
+ background-color: var(--digitv2-lightTheme-alert-successbg);
224
224
  }
225
225
  &.alert-info{
226
- background-color: theme("digitv2.lightTheme.alert-info");
226
+ background-color: var(--digitv2-lightTheme-alert-info);
227
227
  }
228
228
  &.alert-infobg{
229
- background-color: theme("digitv2.lightTheme.alert-infobg");
229
+ background-color: var(--digitv2-lightTheme-alert-infobg);
230
230
  }
231
231
  &.alert-warning{
232
- background-color: theme("digitv2.lightTheme.alert-warning");
232
+ background-color: var(--digitv2-lightTheme-alert-warning);
233
233
  }
234
234
  &.alert-warningbg{
235
- background-color: theme("digitv2.lightTheme.alert-warning-bg");
235
+ background-color: var(--digitv2-lightTheme-alert-warning-bg);
236
236
  }
237
237
  &.generic-background{
238
- background-color: theme("digitv2.lightTheme.generic-background");
238
+ background-color: var(--digitv2-lightTheme-generic-background);
239
239
  }
240
240
  &.generic-divider{
241
- background-color: theme("digitv2.lightTheme.generic-divider");
241
+ background-color: var(--digitv2-lightTheme-generic-divider);
242
242
  }
243
243
  &.generic-inputborder{
244
- background-color: theme("digitv2.lightTheme.generic-inputborder");
244
+ background-color: var(--digitv2-lightTheme-generic-inputborder);
245
245
  }
246
246
  &.paper-primary{
247
- background-color: theme("digitv2.lightTheme.paper-primary");
247
+ background-color: var(--digitv2-lightTheme-paper-primary);
248
248
  }
249
249
  &.paper-secondary{
250
- background-color: theme("digitv2.lightTheme.paper-secondary");
250
+ background-color: var(--digitv2-lightTheme-paper-secondary);
251
251
  }
252
252
  }
253
253
 
254
254
  .typography-story{
255
255
  &.heading-m{
256
- font-family: theme("digitv2.fontFamily.sans");
257
- font-style: theme("digitv2.fontStyle.normal");
258
- font-weight: theme("digitv2.fontWeight.bold");
259
- line-height: theme("digitv2.lineHeight.lineheight1");
256
+ font-family: var(--digitv2-fontFamily-sans);
257
+ font-style: var(--digitv2-fontStyle-normal);
258
+ font-weight: var(--digitv2-fontWeight-bold);
259
+ line-height: var(--digitv2-lineHeight-lineheight1);
260
260
 
261
261
  @media (max-aspect-ratio: 9/16) {
262
262
  /* Media query for mobile */
263
- font-size: theme("digitv2.fontSize.heading-m.mobile");
263
+ font-size: var(--digitv2-fontSize-heading-m-mobile);
264
264
  }
265
265
 
266
266
  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
267
267
  /* Media query for tablets */
268
- font-size: theme("digitv2.fontSize.heading-m.tablet");
268
+ font-size: var(--digitv2-fontSize-heading-m-tablet);
269
269
  }
270
270
 
271
271
  @media (min-aspect-ratio: 3/4) {
272
272
  /* Media query for desktop */
273
- font-size: theme("digitv2.fontSize.heading-m.desktop");
273
+ font-size: var(--digitv2-fontSize-heading-m-desktop);
274
274
  }
275
275
  }
276
276
 
277
277
  &.heading-s {
278
- font-family: theme("digitv2.fontFamily.sans");
279
- font-style: theme("digitv2.fontStyle.normal");
280
- font-weight: theme("digitv2.fontWeight.bold");
281
- line-height: theme("digitv2.lineHeight.lineheight1");
278
+ font-family: var(--digitv2-fontFamily-sans);
279
+ font-style: var(--digitv2-fontStyle-normal);
280
+ font-weight: var(--digitv2-fontWeight-bold);
281
+ line-height: var(--digitv2-lineHeight-lineheight1);
282
282
 
283
283
  @media (max-aspect-ratio: 9/16) {
284
284
  /* Media query for mobile */
285
- font-size: theme("digitv2.fontSize.heading-s.mobile");
285
+ font-size: var(--digitv2-fontSize-heading-s-mobile);
286
286
  }
287
287
 
288
288
  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
289
289
  /* Media query for tablets */
290
- font-size: theme("digitv2.fontSize.heading-s.tablet");
290
+ font-size: var(--digitv2-fontSize-heading-s-tablet);
291
291
  }
292
292
 
293
293
  @media (min-aspect-ratio: 3/4) {
294
294
  /* Media query for desktop */
295
- font-size: theme("digitv2.fontSize.heading-s.desktop");
295
+ font-size: var(--digitv2-fontSize-heading-s-desktop);
296
296
  }
297
297
  }
298
298
 
299
299
  &.body-s {
300
300
  @media (max-aspect-ratio: 9/16) {
301
301
  /* Media query for mobile */
302
- font-size: theme("digitv2.fontSize.body-s.mobile");
303
- font-family: theme("digitv2.fontFamily.sans");
304
- font-style: theme("digitv2.fontStyle.normal");
305
- font-weight: theme("digitv2.fontWeight.regular");
306
- line-height: theme("digitv2.lineHeight.lineheight2");
302
+ font-size: var( --digitv2-fontSize-body-s-mobile);
303
+ font-family: var(--digitv2-fontFamily-sans);
304
+ font-style: var(--digitv2-fontStyle-normal);
305
+ font-weight: var(--digitv2-fontWeight-regular);
306
+ line-height: var(--digitv2-lineHeight-lineheight2);
307
307
  }
308
308
 
309
309
  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
310
310
  /* Media query for tablets */
311
- font-size: theme("digitv2.fontSize.body-s.tablet");
312
- font-family: theme("digitv2.fontFamily.sans");
313
- font-style: theme("digitv2.fontStyle.normal");
314
- font-weight: theme("digitv2.fontWeight.regular");
315
- line-height: theme("digitv2.lineHeight.lineheight2");
311
+ font-size: var( --digitv2-fontSize-body-s-tablet);
312
+ font-family: var(--digitv2-fontFamily-sans);
313
+ font-style: var(--digitv2-fontStyle-normal);
314
+ font-weight: var(--digitv2-fontWeight-regular);
315
+ line-height: var(--digitv2-lineHeight-lineheight2);
316
316
  }
317
317
 
318
318
  @media (min-aspect-ratio: 3/4) {
319
319
  /* Media query for desktop */
320
- font-size: theme("digitv2.fontSize.body-s.desktop");
321
- font-family: theme("digitv2.fontFamily.sans");
322
- font-style: theme("digitv2.fontStyle.normal");
323
- font-weight: theme("digitv2.fontWeight.regular");
324
- line-height: theme("digitv2.lineHeight.lineheight2");
320
+ font-size: var( --digitv2-fontSize-body-s-desktop);
321
+ font-family: var(--digitv2-fontFamily-sans);
322
+ font-style: var(--digitv2-fontStyle-normal);
323
+ font-weight: var(--digitv2-fontWeight-regular);
324
+ line-height: var(--digitv2-lineHeight-lineheight2);
325
325
  }
326
326
  }
327
327
  }
328
328
 
329
329
  .sb-main-padded{
330
330
  &.sb-show-main{
331
- background-color: theme("digitv2.lightTheme.paper-primary");
331
+ background-color: var(--digitv2-lightTheme-paper-primary);
332
332
  }
333
333
  }
package/src/digitv2/pages/employee/boundaryFilter.scss CHANGED
@@ -18,26 +18,26 @@
18
18
 
19
19
 
20
20
  .digit-card-label.boundary-selection-label{
21
- font-family: theme("digitv2.fontFamily.sans");
22
- font-style: theme("digitv2.fontStyle.normal");
23
- font-weight: theme("digitv2.fontWeight.bold");
21
+ font-family: var(--digitv2-fontFamily-sans);
22
+ font-style: var(--digitv2-fontStyle-normal);
23
+ font-weight: var(--digitv2-fontWeight-bold);
24
24
 
25
25
  @media (max-width: 30rem) {
26
26
  /* Media query for mobile */
27
- font-size: theme("digitv2.fontSize.heading-s.mobile");
27
+ font-size: var(--digitv2-fontSize-heading-s-mobile);
28
28
  }
29
29
 
30
30
  @media (min-width: 30.063rem) and (max-width: 47.938rem) {
31
31
  /* Media query for tablets */
32
- font-size: theme("digitv2.fontSize.heading-s.tablet");
32
+ font-size: var(--digitv2-fontSize-heading-s-tablet);
33
33
  }
34
34
 
35
35
  @media (min-width: 48rem) {
36
36
  /* Media query for desktop */
37
- font-size: theme("digitv2.fontSize.heading-s.desktop");
37
+ font-size: var(--digitv2-fontSize-heading-s-desktop);
38
38
  }
39
39
 
40
- color: theme("digitv2.lightTheme.text-primary");
40
+ color: var(--digitv2-lightTheme-text-primary);
41
41
  width:30%;
42
42
  }
43
43
  .selecting-boundary-div.horizontal-layout .boundary-item {