@egovernments/digit-ui-components-css 0.2.3 → 2.0.0-dev-02

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 +3 -15427
  2. package/package.json +30 -35
  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 +37 -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 +65 -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 +101 -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 +55 -46
  56. package/src/digitv2/components/tooltipwrapperV2.scss +97 -94
  57. package/src/digitv2/components/treeSelectV2.scss +64 -55
  58. package/src/digitv2/index.scss +136 -134
  59. package/src/digitv2/pages/employee/boundaryFilter.scss +7 -7
  60. package/src/digitv2/pages/employee/inboxsearchcomposer.scss +48 -48
  61. package/src/digitv2/pages/employee/index.scss +4 -4
  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 +28 -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 -260
  70. package/dist/index.min.css +0 -7
package/src/digitv2/components/fieldV1.scss CHANGED
@@ -1,20 +1,21 @@
1
- @import url("../index.scss");
1
+ @import './theme-variables.css';
2
+ @import '../typography.scss';
2
3
 
3
4
  .label-field-wrapper{
4
5
  display: flex;
5
6
  flex-direction: column;
6
7
  justify-content: flex-start;
7
- gap: theme(digitv2.spacers.spacer1);
8
+ gap: theme("digitv2.spacers.spacer1");
8
9
  width: 100%;
9
10
  }
10
11
 
11
12
  .digit-header-content {
12
13
 
13
14
  &.label {
14
- @extend .typography.label;
15
+ @include typography-label;
15
16
  @apply flex ;
16
- color: theme(digitv2.lightTheme.text-primary);
17
- gap: theme(digitv2.spacers.spacer1);
17
+ color: theme("digitv2.lightTheme.text-primary");
18
+ gap: theme("digitv2.spacers.spacer1");
18
19
 
19
20
  &.wraplabel {
20
21
  @media (min-aspect-ratio: 9/16){
@@ -29,7 +30,7 @@
29
30
 
30
31
  .label-container {
31
32
  @apply flex items-center w-full;
32
- gap: theme(digitv2.spacers.spacer1);
33
+ gap: theme("digitv2.spacers.spacer1");
33
34
 
34
35
  &.wraplabel{
35
36
  @media (min-aspect-ratio: 9/16) {
@@ -45,32 +46,32 @@
45
46
  }
46
47
 
47
48
  .info-icon .infotext {
48
- @extend .typography.body-s;
49
+ @include typography-body-s;
49
50
  @apply absolute text-center;
50
- font-family: theme(digitv2.fontFamily.sans);
51
- font-style: theme(digitv2.fontStyle.normal);
52
- font-weight: theme(digitv2.fontWeight.regular);
53
- line-height: theme(digitv2.lineHeight.lineheight2);
51
+ font-family: theme("digitv2.fontFamily.sans");
52
+ font-style: theme("digitv2.fontStyle.normal");
53
+ font-weight: theme("digitv2.fontWeight.regular");
54
+ line-height: theme("digitv2.lineHeight.lineheight2");
54
55
 
55
56
  @media (max-aspect-ratio: 9/16) {
56
57
  /* Media query for mobile */
57
- font-size: theme(digitv2.fontSize.body-s.mobile);
58
+ font-size: theme("digitv2.fontSize.body-s.mobile");
58
59
  }
59
60
 
60
61
  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
61
62
  /* Media query for tablets */
62
- font-size: theme(digitv2.fontSize.body-s.tablet);
63
+ font-size: theme("digitv2.fontSize.body-s.tablet");
63
64
  }
64
65
 
65
66
  @media (min-aspect-ratio: 3/4) {
66
67
  /* Media query for desktop */
67
- font-size: theme(digitv2.fontSize.body-s.desktop);
68
+ font-size: theme("digitv2.fontSize.body-s.desktop");
68
69
  }
69
70
  visibility: hidden;
70
71
  width: 7.5rem;
71
72
  background-color: #555555;
72
- color: theme(digitv2.lightTheme.paper-primary);
73
- padding: theme(digitv2.spacers.spacer2) theme(digitv2.spacers.spacer0);
73
+ color: theme("digitv2.lightTheme.paper-primary");
74
+ padding: theme("digitv2.spacers.spacer2") theme("digitv2.spacers.spacer0");
74
75
  z-index: 1;
75
76
  bottom: 100%;
76
77
  left: 50%;
@@ -83,7 +84,7 @@
83
84
  }
84
85
 
85
86
  .label-styles {
86
- @apply overflow-hidden whitespace-no-wrap;
87
+ @apply overflow-hidden whitespace-nowrap;
87
88
  text-overflow: ellipsis;
88
89
 
89
90
  &.wraplabel {
@@ -102,32 +103,32 @@
102
103
  .digit-field {
103
104
 
104
105
  @apply flex flex-col w-full;
105
- gap: theme(digitv2.spacers.spacer1);
106
+ gap: theme("digitv2.spacers.spacer1");
106
107
 
107
108
  .digit-description,
108
109
  .digit-charcount {
109
- @extend .typography.body-s;
110
+ @include typography-body-s;
110
111
  @apply flex justify-between items-baseline;
111
- color: theme(digitv2.lightTheme.text-secondary);
112
- gap: theme(digitv2.spacers.spacer2);
113
- font-family: theme(digitv2.fontFamily.sans);
114
- font-style: theme(digitv2.fontStyle.normal);
115
- font-weight: theme(digitv2.fontWeight.regular);
116
- line-height: theme(digitv2.lineHeight.lineheight2);
112
+ color: theme("digitv2.lightTheme.text-secondary");
113
+ gap: theme("digitv2.spacers.spacer2");
114
+ font-family: theme("digitv2.fontFamily.sans");
115
+ font-style: theme("digitv2.fontStyle.normal");
116
+ font-weight: theme("digitv2.fontWeight.regular");
117
+ line-height: theme("digitv2.lineHeight.lineheight2");
117
118
 
118
119
  @media (max-aspect-ratio: 9/16) {
119
120
  /* Media query for mobile */
120
- font-size: theme(digitv2.fontSize.body-s.mobile);
121
+ font-size: theme("digitv2.fontSize.body-s.mobile");
121
122
  }
122
123
 
123
124
  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
124
125
  /* Media query for tablets */
125
- font-size: theme(digitv2.fontSize.body-s.tablet);
126
+ font-size: theme("digitv2.fontSize.body-s.tablet");
126
127
  }
127
128
 
128
129
  @media (min-aspect-ratio: 3/4) {
129
130
  /* Media query for desktop */
130
- font-size: theme(digitv2.fontSize.body-s.desktop);
131
+ font-size: theme("digitv2.fontSize.body-s.desktop");
131
132
  }
132
133
 
133
134
 
@@ -151,99 +152,99 @@
151
152
  }
152
153
 
153
154
  .digit-form-card-subheader {
154
- @extend .typography.caption-l;
155
- font-family: theme(digitv2.fontFamily.sans);
156
- font-style: theme(digitv2.fontStyle.normal);
157
- font-weight: theme(digitv2.fontWeight.medium);
158
- line-height: theme(digitv2.lineHeight.lineheight1);
155
+ @include typography-caption-l;
156
+ font-family: theme("digitv2.fontFamily.sans");
157
+ font-style: theme("digitv2.fontStyle.normal");
158
+ font-weight: theme("digitv2.fontWeight.medium");
159
+ line-height: theme("digitv2.lineHeight.lineheight1");
159
160
 
160
161
  @media (max-aspect-ratio: 9/16) {
161
162
  /* Media query for mobile */
162
- font-size: theme(digitv2.fontSize.caption-l.mobile);
163
+ font-size: theme("digitv2.fontSize.caption-l.mobile");
163
164
  }
164
165
 
165
166
  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
166
167
  /* Media query for tablets */
167
- font-size: theme(digitv2.fontSize.caption-l.tablet);
168
+ font-size: theme("digitv2.fontSize.caption-l.tablet");
168
169
  }
169
170
 
170
171
  @media (min-aspect-ratio: 3/4) {
171
172
  /* Media query for desktop */
172
- font-size: theme(digitv2.fontSize.caption-l.desktop);
173
+ font-size: theme("digitv2.fontSize.caption-l.desktop");
173
174
  }
174
- color: theme(digitv2.lightTheme.text-primary);
175
+ color: theme("digitv2.lightTheme.text-primary");
175
176
  }
176
177
 
177
178
  .digit-form-card-description {
178
- @extend .typography.heading-s;
179
- font-family: theme(digitv2.fontFamily.sans);
180
- font-style: theme(digitv2.fontStyle.normal);
181
- font-weight: theme(digitv2.fontWeight.bold);
182
- line-height: theme(digitv2.lineHeight.lineheight1);
179
+ @include typography-heading-s;
180
+ font-family: theme("digitv2.fontFamily.sans");
181
+ font-style: theme("digitv2.fontStyle.normal");
182
+ font-weight: theme("digitv2.fontWeight.bold");
183
+ line-height: theme("digitv2.lineHeight.lineheight1");
183
184
 
184
185
  @media (max-aspect-ratio: 9/16) {
185
186
  /* Media query for mobile */
186
- font-size: theme(digitv2.fontSize.heading-s.mobile);
187
+ font-size: theme("digitv2.fontSize.heading-s.mobile");
187
188
  }
188
189
 
189
190
  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
190
191
  /* Media query for tablets */
191
- font-size: theme(digitv2.fontSize.heading-s.tablet);
192
+ font-size: theme("digitv2.fontSize.heading-s.tablet");
192
193
  }
193
194
 
194
195
  @media (min-aspect-ratio: 3/4) {
195
196
  /* Media query for desktop */
196
- font-size: theme(digitv2.fontSize.heading-s.desktop);
197
+ font-size: theme("digitv2.fontSize.heading-s.desktop");
197
198
  }
198
- color: theme(digitv2.lightTheme.text-secondary);
199
+ color: theme("digitv2.lightTheme.text-secondary");
199
200
  }
200
201
 
201
202
  .digit-form-card-text {
202
- @extend .typography.body-l;
203
- font-family: theme(digitv2.fontFamily.sans);
204
- font-style: theme(digitv2.fontStyle.normal);
205
- font-weight: theme(digitv2.fontWeight.regular);
206
- line-height: theme(digitv2.lineHeight.lineheight2);
203
+ @include typography-body-l;
204
+ font-family: theme("digitv2.fontFamily.sans");
205
+ font-style: theme("digitv2.fontStyle.normal");
206
+ font-weight: theme("digitv2.fontWeight.regular");
207
+ line-height: theme("digitv2.lineHeight.lineheight2");
207
208
 
208
209
  @media (max-aspect-ratio: 9/16) {
209
210
  /* Media query for mobile */
210
- font-size: theme(digitv2.fontSize.body-l.mobile);
211
+ font-size: theme("digitv2.fontSize.body-l.mobile");
211
212
  }
212
213
 
213
214
  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
214
215
  /* Media query for tablets */
215
- font-size: theme(digitv2.fontSize.body-l.tablet);
216
+ font-size: theme("digitv2.fontSize.body-l.tablet");
216
217
  }
217
218
 
218
219
  @media (min-aspect-ratio: 3/4) {
219
220
  /* Media query for desktop */
220
- font-size: theme(digitv2.fontSize.body-l.desktop);
221
+ font-size: theme("digitv2.fontSize.body-l.desktop");
221
222
  }
222
- color: theme(digitv2.lightTheme.text-secondary);
223
+ color: theme("digitv2.lightTheme.text-secondary");
223
224
 
224
225
  }
225
226
 
226
227
  .sectionSubHeaderStyle{
227
- @extend .typography.body-s;
228
+ @include typography-body-s;
228
229
  @apply flex justify-between items-baseline;
229
- color: theme(digitv2.lightTheme.text-secondary);
230
- font-family: theme(digitv2.fontFamily.sans);
231
- font-style: theme(digitv2.fontStyle.normal);
232
- font-weight: theme(digitv2.fontWeight.regular);
233
- line-height: theme(digitv2.lineHeight.lineheight2);
230
+ color: theme("digitv2.lightTheme.text-secondary");
231
+ font-family: theme("digitv2.fontFamily.sans");
232
+ font-style: theme("digitv2.fontStyle.normal");
233
+ font-weight: theme("digitv2.fontWeight.regular");
234
+ line-height: theme("digitv2.lineHeight.lineheight2");
234
235
 
235
236
  @media (max-aspect-ratio: 9/16) {
236
237
  /* Media query for mobile */
237
- font-size: theme(digitv2.fontSize.body-s.mobile);
238
+ font-size: theme("digitv2.fontSize.body-s.mobile");
238
239
  }
239
240
 
240
241
  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
241
242
  /* Media query for tablets */
242
- font-size: theme(digitv2.fontSize.body-s.tablet);
243
+ font-size: theme("digitv2.fontSize.body-s.tablet");
243
244
  }
244
245
 
245
246
  @media (min-aspect-ratio: 3/4) {
246
247
  /* Media query for desktop */
247
- font-size: theme(digitv2.fontSize.body-s.desktop);
248
+ font-size: theme("digitv2.fontSize.body-s.desktop");
248
249
  }
249
250
  }