@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/selectionTagV2.scss CHANGED
@@ -5,17 +5,17 @@
5
5
  display: flex;
6
6
  flex-direction: column;
7
7
  align-items: flex-start;
8
- gap:theme("digitv2.spacers.spacer1");
8
+ gap:var(--digitv2-spacers-spacer1);
9
9
  }
10
10
 
11
11
  .selection-card {
12
12
  display: flex;
13
13
  flex-wrap: wrap;
14
- gap: theme("digitv2.spacers.spacer6");
15
- padding: theme("digitv2.spacers.spacer6");
14
+ gap: var(--digitv2-spacers-spacer6);
15
+ padding: var(--digitv2-spacers-spacer6);
16
16
  border: 0.063rem solid #d6d5d4;
17
- border-radius: theme("digitv2.spacers.spacer1");
18
- background-color: theme("digitv2.lightTheme.paper-secondary");
17
+ border-radius: var(--digitv2-spacers-spacer1);
18
+ background-color: var(--digitv2-lightTheme-paper-secondary);
19
19
  width: fit-content;
20
20
 
21
21
  @media (max-width: 30rem) {
@@ -25,67 +25,67 @@
25
25
  &.hideContainer{
26
26
  border: none;
27
27
  background-color: transparent;
28
- border-radius: theme("digitv2.spacers.spacer0");
28
+ border-radius: var(--digitv2-spacers-spacer0);
29
29
  }
30
30
 
31
31
  }
32
32
 
33
33
  .selection-card.error {
34
- border-color: theme("digitv2.lightTheme.alert-error");
34
+ border-color: var(--digitv2-lightTheme-alert-error);
35
35
  }
36
36
 
37
37
  .option {
38
38
  @include typography-body-s;
39
39
  display: flex;
40
40
  align-items: center;
41
- padding: theme("digitv2.spacers.spacer2") theme("digitv2.spacers.spacer4");
41
+ padding: var(--digitv2-spacers-spacer2) var(--digitv2-spacers-spacer4);
42
42
  border: 0.063rem solid #d6d5d4;
43
- border-radius: theme("digitv2.spacers.spacer1");
44
- background-color: theme("digitv2.lightTheme.paper-primary");
43
+ border-radius: var(--digitv2-spacers-spacer1);
44
+ background-color: var(--digitv2-lightTheme-paper-primary);
45
45
  cursor: pointer;
46
- height: theme("digitv2.spacers.spacer10");
47
- gap:theme("digitv2.spacers.spacer2");
48
- color: theme("digitv2.lightTheme.text-primary");
49
- font-family: theme("digitv2.fontFamily.sans");
50
- font-style: theme("digitv2.fontStyle.normal");
51
- font-weight: theme("digitv2.fontWeight.regular");
52
- line-height: theme("digitv2.lineHeight.lineheight2");
46
+ height: var(--digitv2-spacers-spacer10);
47
+ gap:var(--digitv2-spacers-spacer2);
48
+ color: var(--digitv2-lightTheme-text-primary);
49
+ font-family: var(--digitv2-fontFamily-sans);
50
+ font-style: var(--digitv2-fontStyle-normal);
51
+ font-weight: var(--digitv2-fontWeight-regular);
52
+ line-height: var(--digitv2-lineHeight-lineheight2);
53
53
  @media (max-aspect-ratio: 9/16) {
54
54
  /* Media query for mobile */
55
- font-size: theme("digitv2.fontSize.body-s.mobile");
55
+ font-size: var( --digitv2-fontSize-body-s-mobile);
56
56
  }
57
57
 
58
58
  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
59
59
  /* Media query for tablets */
60
- font-size: theme("digitv2.fontSize.body-s.tablet");
60
+ font-size: var( --digitv2-fontSize-body-s-tablet);
61
61
  }
62
62
 
63
63
  @media (min-aspect-ratio: 3/4) {
64
64
  /* Media query for desktop */
65
- font-size: theme("digitv2.fontSize.body-s.desktop");
65
+ font-size: var( --digitv2-fontSize-body-s-desktop);
66
66
  }
67
67
  }
68
68
 
69
69
  .option.selected {
70
70
  @include typography-heading-s;
71
- background-color: theme("digitv2.lightTheme.primary-1");
72
- color: theme("digitv2.lightTheme.paper-primary");
73
- font-weight: theme("digitv2.fontWeight.bold");
74
- line-height: theme("digitv2.lineHeight.lineheight1");
71
+ background-color: var(--digitv2-lightTheme-primary-1);
72
+ color: var(--digitv2-lightTheme-paper-primary);
73
+ font-weight: var(--digitv2-fontWeight-bold);
74
+ line-height: var(--digitv2-lineHeight-lineheight1);
75
75
 
76
76
  @media (max-aspect-ratio: 9/16) {
77
77
  /* Media query for mobile */
78
- font-size: theme("digitv2.fontSize.heading-s.mobile");
78
+ font-size: var(--digitv2-fontSize-heading-s-mobile);
79
79
  }
80
80
 
81
81
  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
82
82
  /* Media query for tablets */
83
- font-size: theme("digitv2.fontSize.heading-s.tablet");
83
+ font-size: var(--digitv2-fontSize-heading-s-tablet);
84
84
  }
85
85
 
86
86
  @media (min-aspect-ratio: 3/4) {
87
87
  /* Media query for desktop */
88
- font-size: theme("digitv2.fontSize.heading-s.desktop");
88
+ font-size: var(--digitv2-fontSize-heading-s-desktop);
89
89
  }
90
90
  }
91
91
 
package/src/digitv2/components/sidePanelV2.scss CHANGED
@@ -8,8 +8,8 @@
8
8
  transition: transform 0.3s ease;
9
9
  z-index: 1000;
10
10
  overflow: hidden;
11
- border: 0.063rem solid theme("digitv2.lightTheme.generic-divider");
12
- background: theme("digitv2.lightTheme.paper-secondary");
11
+ border: 0.063rem solid var(--digitv2-lightTheme-generic-divider);
12
+ background: var(--digitv2-lightTheme-paper-secondary);
13
13
  box-shadow: -0.125rem -0.25rem 0.356rem 0rem #00000026;
14
14
  }
15
15
 
@@ -46,7 +46,7 @@
46
46
  .section-divider-wrapper {
47
47
  display: flex;
48
48
  flex-direction: column;
49
- gap: theme("digitv2.spacers.spacer4");
49
+ gap: var(--digitv2-spacers-spacer4);
50
50
  }
51
51
 
52
52
  .slider-handler {
@@ -54,28 +54,28 @@
54
54
  top: 50%;
55
55
  transform: translateY(-50%);
56
56
  cursor: pointer;
57
- padding-left: theme("digitv2.spacers.spacer1");
57
+ padding-left: var(--digitv2-spacers-spacer1);
58
58
  border-radius: 50%;
59
59
  z-index: 1001;
60
60
  display: flex;
61
- gap: theme("digitv2.spacers.spacer1");
61
+ gap: var(--digitv2-spacers-spacer1);
62
62
  align-items: center;
63
63
 
64
64
  .scroll-bar {
65
65
  height: 11.25rem;
66
- width: theme("digitv2.spacers.spacer2");
66
+ width: var(--digitv2-spacers-spacer2);
67
67
  border-radius: 0.563rem;
68
68
  background-color: #D9D9D9;
69
69
  }
70
70
 
71
71
  .slider-handler-svg {
72
- background: theme("digitv2.lightTheme.paper-primary");
72
+ background: var(--digitv2-lightTheme-paper-primary);
73
73
  box-shadow: 0rem 0.063rem 0.125rem 0rem #00000029;
74
- width: theme("digitv2.spacers.spacer8");
74
+ width: var(--digitv2-spacers-spacer8);
75
75
  height: 3.25rem;
76
76
  display: flex !important;
77
77
  align-items: center;
78
- border: 0.063rem solid theme("digitv2.lightTheme.generic-divider");
78
+ border: 0.063rem solid var(--digitv2-lightTheme-generic-divider);
79
79
  }
80
80
 
81
81
  &.dynamic {
@@ -107,42 +107,42 @@
107
107
  .slider-header {
108
108
  @include typography-heading-m;
109
109
  flex-shrink: 0;
110
- padding: theme("digitv2.spacers.spacer4");
111
- font-family: theme("digitv2.fontFamily.sans");
112
- font-style: theme("digitv2.fontStyle.normal");
113
- font-weight: theme("digitv2.fontWeight.bold");
114
- line-height: theme("digitv2.lineHeight.lineheight1");
110
+ padding: var(--digitv2-spacers-spacer4);
111
+ font-family: var(--digitv2-fontFamily-sans);
112
+ font-style: var(--digitv2-fontStyle-normal);
113
+ font-weight: var(--digitv2-fontWeight-bold);
114
+ line-height: var(--digitv2-lineHeight-lineheight1);
115
115
 
116
116
  @media (max-aspect-ratio: 9/16) {
117
117
  /* Media query for mobile */
118
- font-size: theme("digitv2.fontSize.heading-m.mobile");
118
+ font-size: var(--digitv2-fontSize-heading-m-mobile);
119
119
  }
120
120
 
121
121
  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
122
122
  /* Media query for tablets */
123
- font-size: theme("digitv2.fontSize.heading-m.tablet");
123
+ font-size: var(--digitv2-fontSize-heading-m-tablet);
124
124
  }
125
125
 
126
126
  @media (min-aspect-ratio: 3/4) {
127
127
  /* Media query for desktop */
128
- font-size: theme("digitv2.fontSize.heading-m.desktop");
128
+ font-size: var(--digitv2-fontSize-heading-m-desktop);
129
129
  }
130
130
  border-bottom: 0.063rem solid #d6d5d4;
131
131
 
132
132
  .close-icon {
133
133
  cursor: pointer;
134
134
  position: absolute;
135
- top: theme("digitv2.spacers.spacer2");
136
- right: theme("digitv2.spacers.spacer2");
137
- width: theme("digitv2.spacers.spacer8");
138
- height: theme("digitv2.spacers.spacer8");
135
+ top: var(--digitv2-spacers-spacer2);
136
+ right: var(--digitv2-spacers-spacer2);
137
+ width: var(--digitv2-spacers-spacer8);
138
+ height: var(--digitv2-spacers-spacer8);
139
139
  }
140
140
  }
141
141
 
142
142
  .slider-section {
143
143
  display: flex;
144
144
  flex-direction: column;
145
- gap: theme("digitv2.spacers.spacer2");
145
+ gap: var(--digitv2-spacers-spacer2);
146
146
  flex-grow: 1;
147
147
 
148
148
  }
@@ -155,7 +155,7 @@
155
155
  bottom: 0;
156
156
  width: 100%;
157
157
  z-index: 5;
158
- padding: theme("digitv2.spacers.spacer4");
158
+ padding: var(--digitv2-spacers-spacer4);
159
159
  border-top: 0.063rem solid #d6d5d4;
160
160
  position: relative;
161
161
  flex-shrink: 0;
@@ -164,46 +164,46 @@
164
164
  .slider-body {
165
165
  display: flex;
166
166
  flex-grow: 1;
167
- padding: theme("digitv2.spacers.spacer4");
168
- gap: theme("digitv2.spacers.spacer4");
167
+ padding: var(--digitv2-spacers-spacer4);
168
+ gap: var(--digitv2-spacers-spacer4);
169
169
  @include typography-body-s;
170
170
  flex-direction: column;
171
- color: theme("digitv2.lightTheme.text-primary");
171
+ color: var(--digitv2-lightTheme-text-primary);
172
172
  overflow-y: auto;
173
173
  overflow-x: hidden;
174
174
 
175
175
  @media (max-aspect-ratio: 9/16) {
176
176
  /* Media query for mobile */
177
- font-size: theme("digitv2.fontSize.body-s.mobile");
178
- font-family: theme("digitv2.fontFamily.sans");
179
- font-style: theme("digitv2.fontStyle.normal");
180
- font-weight: theme("digitv2.fontWeight.regular");
181
- line-height: theme("digitv2.lineHeight.lineheight2");
177
+ font-size: var( --digitv2-fontSize-body-s-mobile);
178
+ font-family: var(--digitv2-fontFamily-sans);
179
+ font-style: var(--digitv2-fontStyle-normal);
180
+ font-weight: var(--digitv2-fontWeight-regular);
181
+ line-height: var(--digitv2-lineHeight-lineheight2);
182
182
  }
183
183
 
184
184
  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
185
185
  /* Media query for tablets */
186
- font-size: theme("digitv2.fontSize.body-s.tablet");
187
- font-family: theme("digitv2.fontFamily.sans");
188
- font-style: theme("digitv2.fontStyle.normal");
189
- font-weight: theme("digitv2.fontWeight.regular");
190
- line-height: theme("digitv2.lineHeight.lineheight2");
186
+ font-size: var( --digitv2-fontSize-body-s-tablet);
187
+ font-family: var(--digitv2-fontFamily-sans);
188
+ font-style: var(--digitv2-fontStyle-normal);
189
+ font-weight: var(--digitv2-fontWeight-regular);
190
+ line-height: var(--digitv2-lineHeight-lineheight2);
191
191
  }
192
192
 
193
193
  @media (min-aspect-ratio: 3/4) {
194
194
  /* Media query for desktop */
195
- font-size: theme("digitv2.fontSize.body-s.desktop");
196
- font-family: theme("digitv2.fontFamily.sans");
197
- font-style: theme("digitv2.fontStyle.normal");
198
- font-weight: theme("digitv2.fontWeight.regular");
199
- line-height: theme("digitv2.lineHeight.lineheight2");
195
+ font-size: var( --digitv2-fontSize-body-s-desktop);
196
+ font-family: var(--digitv2-fontFamily-sans);
197
+ font-style: var(--digitv2-fontStyle-normal);
198
+ font-weight: var(--digitv2-fontWeight-regular);
199
+ line-height: var(--digitv2-lineHeight-lineheight2);
200
200
  }
201
201
 
202
202
  &.with-sections {
203
- padding: theme("digitv2.spacers.spacer0");
203
+ padding: var(--digitv2-spacers-spacer0);
204
204
 
205
205
  .slider-section {
206
- padding: theme("digitv2.spacers.spacer4");
206
+ padding: var(--digitv2-spacers-spacer4);
207
207
  }
208
208
  }
209
209
  }
@@ -211,15 +211,15 @@
211
211
 
212
212
  .slider-body::-webkit-scrollbar {
213
213
  width: 0.375rem;
214
- background-color: theme("digitv2.lightTheme.generic-background");
214
+ background-color: var(--digitv2-lightTheme-generic-background);
215
215
  }
216
216
 
217
217
  .slider-body::-webkit-scrollbar-track {
218
- background-color: theme("digitv2.lightTheme.generic-background");
218
+ background-color: var(--digitv2-lightTheme-generic-background);
219
219
  border-radius: 0.563rem;
220
220
  }
221
221
 
222
222
  .slider-body::-webkit-scrollbar-thumb {
223
- background-color: theme("digitv2.lightTheme.generic-divider");
223
+ background-color: var(--digitv2-lightTheme-generic-divider);
224
224
  border-radius: 0.563rem;
225
225
  }