@egovernments/digit-ui-components-css 0.2.1 → 2.0.0-dev-01

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