@egovernments/digit-ui-components-css 0.2.0-beta.9 → 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 -14685
  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 +7 -7
  60. package/src/digitv2/pages/employee/inboxsearchcomposer.scss +107 -37
  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 +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 -235
  70. package/dist/index.min.css +0 -6
package/src/digitv2/components/metricCardV2.scss CHANGED
@@ -1,22 +1,25 @@
1
+ @import './theme-variables.css';
2
+ @import '../typography.scss';
3
+
1
4
  .digit-metric-card {
2
5
  position: relative;
3
6
  @media (max-aspect-ratio: 9/16) {
4
7
  /* Media query for mobile */
5
- gap: theme(digitv2.spacers.spacer4);
8
+ gap: theme("digitv2.spacers.spacer4");
6
9
  }
7
10
 
8
11
  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
9
12
  /* Media query for tablets */
10
- gap: theme(digitv2.spacers.spacer5);
13
+ gap: theme("digitv2.spacers.spacer5");
11
14
  }
12
15
 
13
16
  @media (min-aspect-ratio: 3/4) {
14
17
  /* Media query for desktop */
15
- gap: theme(digitv2.spacers.spacer6);
18
+ gap: theme("digitv2.spacers.spacer6");
16
19
  }
17
20
 
18
21
  .metric-divider{
19
- margin: theme(digitv2.spacers.spacer0);
22
+ margin: theme("digitv2.spacers.spacer0");
20
23
  }
21
24
 
22
25
  .vertical-metric-divider{
@@ -24,22 +27,22 @@
24
27
 
25
28
  @media (max-aspect-ratio: 9/16) {
26
29
  /* Media query for mobile */
27
- top: theme(digitv2.spacers.spacer4);
30
+ top: theme("digitv2.spacers.spacer4");
28
31
  height: calc(100% - 2rem);
29
32
  }
30
33
 
31
34
  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
32
35
  /* Media query for tablets */
33
- top: theme(digitv2.spacers.spacer5);
36
+ top: theme("digitv2.spacers.spacer5");
34
37
  height: calc(100% - 2.5rem);
35
38
  }
36
39
 
37
40
  @media (min-aspect-ratio: 3/4) {
38
41
  /* Media query for desktop */
39
- top: theme(digitv2.spacers.spacer6);
42
+ top: theme("digitv2.spacers.spacer6");
40
43
  height: calc(100% - 3rem);
41
44
  }
42
- border: 0.063rem solid theme(digitv2.lightTheme.generic-divider);
45
+ border: 0.063rem solid theme("digitv2.lightTheme.generic-divider");
43
46
  z-index: 1;
44
47
  }
45
48
  }
@@ -50,102 +53,102 @@
50
53
  align-items: center;
51
54
  justify-content: center;
52
55
  flex-direction: column;
53
- gap: theme(digitv2.spacers.spacer1);
54
- padding: theme(digitv2.spacers.spacer4);
56
+ gap: theme("digitv2.spacers.spacer1");
57
+ padding: theme("digitv2.spacers.spacer4");
55
58
 
56
59
  .metric-value {
57
- @extend .typography.heading-l;
58
- color: theme(digitv2.lightTheme.primary-2);
60
+ @include typography-heading-l;
61
+ color: theme("digitv2.lightTheme.primary-2");
59
62
  line-height: normal;
60
63
  }
61
64
 
62
65
  .metric-description {
63
- @extend .typography.body-s;
66
+ @include typography-body-s;
64
67
  text-align: center;
65
- color: theme(digitv2.lightTheme.text-primary);
68
+ color: theme("digitv2.lightTheme.text-primary");
66
69
 
67
70
  @media (max-aspect-ratio: 9/16) {
68
71
  /* Media query for mobile */
69
- font-size: theme(digitv2.fontSize.body-s.mobile);
70
- font-family: theme(digitv2.fontFamily.sans);
71
- font-style: theme(digitv2.fontStyle.normal);
72
- font-weight: theme(digitv2.fontWeight.regular);
73
- line-height: theme(digitv2.lineHeight.lineheight2);
72
+ font-size: theme("digitv2.fontSize.body-s.mobile");
73
+ font-family: theme("digitv2.fontFamily.sans");
74
+ font-style: theme("digitv2.fontStyle.normal");
75
+ font-weight: theme("digitv2.fontWeight.regular");
76
+ line-height: theme("digitv2.lineHeight.lineheight2");
74
77
  }
75
78
 
76
79
  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
77
80
  /* Media query for tablets */
78
- font-size: theme(digitv2.fontSize.body-s.tablet);
79
- font-family: theme(digitv2.fontFamily.sans);
80
- font-style: theme(digitv2.fontStyle.normal);
81
- font-weight: theme(digitv2.fontWeight.regular);
82
- line-height: theme(digitv2.lineHeight.lineheight2);
81
+ font-size: theme("digitv2.fontSize.body-s.tablet");
82
+ font-family: theme("digitv2.fontFamily.sans");
83
+ font-style: theme("digitv2.fontStyle.normal");
84
+ font-weight: theme("digitv2.fontWeight.regular");
85
+ line-height: theme("digitv2.lineHeight.lineheight2");
83
86
  }
84
87
 
85
88
  @media (min-aspect-ratio: 3/4) {
86
89
  /* Media query for desktop */
87
- font-size: theme(digitv2.fontSize.body-s.desktop);
88
- font-family: theme(digitv2.fontFamily.sans);
89
- font-style: theme(digitv2.fontStyle.normal);
90
- font-weight: theme(digitv2.fontWeight.regular);
91
- line-height: theme(digitv2.lineHeight.lineheight2);
90
+ font-size: theme("digitv2.fontSize.body-s.desktop");
91
+ font-family: theme("digitv2.fontFamily.sans");
92
+ font-style: theme("digitv2.fontStyle.normal");
93
+ font-weight: theme("digitv2.fontWeight.regular");
94
+ line-height: theme("digitv2.lineHeight.lineheight2");
92
95
  }
93
96
  }
94
97
 
95
98
  .metric-status {
96
- @extend .typography.body-xs;
99
+ @include typography-body-xs;
97
100
  display: flex;
98
101
  text-align: center;
99
102
  align-items: center;
100
103
  justify-content: center;
101
- gap: theme(digitv2.spacers.spacer1);
104
+ gap: theme("digitv2.spacers.spacer1");
102
105
 
103
106
  @media (max-aspect-ratio: 9/16) {
104
107
  /* Media query for mobile */
105
- font-size: theme(digitv2.fontSize.body-xs.mobile);
106
- font-family: theme(digitv2.fontFamily.sans);
107
- font-style: theme(digitv2.fontStyle.normal);
108
- font-weight: theme(digitv2.fontWeight.regular);
109
- line-height: theme(digitv2.lineHeight.lineheight2);
108
+ font-size: theme("digitv2.fontSize.body-xs.mobile");
109
+ font-family: theme("digitv2.fontFamily.sans");
110
+ font-style: theme("digitv2.fontStyle.normal");
111
+ font-weight: theme("digitv2.fontWeight.regular");
112
+ line-height: theme("digitv2.lineHeight.lineheight2");
110
113
  }
111
114
 
112
115
  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
113
116
  /* Media query for tablets */
114
- font-size: theme(digitv2.fontSize.body-xs.tablet);
115
- font-family: theme(digitv2.fontFamily.sans);
116
- font-style: theme(digitv2.fontStyle.normal);
117
- font-weight: theme(digitv2.fontWeight.regular);
118
- line-height: theme(digitv2.lineHeight.lineheight2);
117
+ font-size: theme("digitv2.fontSize.body-xs.tablet");
118
+ font-family: theme("digitv2.fontFamily.sans");
119
+ font-style: theme("digitv2.fontStyle.normal");
120
+ font-weight: theme("digitv2.fontWeight.regular");
121
+ line-height: theme("digitv2.lineHeight.lineheight2");
119
122
  }
120
123
 
121
124
  @media (min-aspect-ratio: 3/4) {
122
125
  /* Media query for desktop */
123
- font-size: theme(digitv2.fontSize.body-xs.desktop);
124
- font-family: theme(digitv2.fontFamily.sans);
125
- font-style: theme(digitv2.fontStyle.normal);
126
- font-weight: theme(digitv2.fontWeight.regular);
127
- line-height: theme(digitv2.lineHeight.lineheight2);
126
+ font-size: theme("digitv2.fontSize.body-xs.desktop");
127
+ font-family: theme("digitv2.fontFamily.sans");
128
+ font-style: theme("digitv2.fontStyle.normal");
129
+ font-weight: theme("digitv2.fontWeight.regular");
130
+ line-height: theme("digitv2.lineHeight.lineheight2");
128
131
  }
129
132
 
130
133
 
131
134
  svg {
132
135
  flex-shrink: 0;
133
- width: theme(digitv2.spacers.spacer4);
134
- height: theme(digitv2.spacers.spacer4);
136
+ width: theme("digitv2.spacers.spacer4");
137
+ height: theme("digitv2.spacers.spacer4");
135
138
  }
136
139
 
137
- color: theme(digitv2.lightTheme.primary-1);
140
+ color: theme("digitv2.lightTheme.primary-1");
138
141
 
139
142
  &.Increased {
140
- color: theme(digitv2.lightTheme.alert-success);
143
+ color: theme("digitv2.lightTheme.alert-success");
141
144
  }
142
145
 
143
146
  &.Decreased {
144
- color: theme(digitv2.lightTheme.alert-error);
147
+ color: theme("digitv2.lightTheme.alert-error");
145
148
  }
146
149
 
147
150
  &.Nochange {
148
- color: theme(digitv2.lightTheme.alert-info);
151
+ color: theme("digitv2.lightTheme.alert-info");
149
152
  }
150
153
  }
151
154
  }
package/src/digitv2/components/mobileNumberV2.scss CHANGED
@@ -1,5 +1,5 @@
1
- @import url("../index.scss");
2
- @import url("../typography.scss");
1
+ @import './theme-variables.css';
2
+ @import '../typography.scss';
3
3
 
4
4
  .digit-mobile-number-container {
5
5
  @apply flex items-center;
@@ -30,34 +30,34 @@
30
30
  }
31
31
  }
32
32
  .digit-citizen-card-input--front {
33
- @extend .typography.text-body-s;
33
+ @include typography-text-body-s;
34
34
  @extend .light-background;
35
35
  width: fit-content !important;
36
36
  display: flex;
37
37
  align-items: center;
38
- /* background: theme(colors.grey.mid); */
38
+ /* background: theme("colors.grey.mid"); */
39
39
  border-right: 0;
40
40
  padding-right: 5px;
41
41
  }
42
42
 
43
43
  .digit-citizen-card-input {
44
- @extend .typography.text-body-s;
44
+ @include typography-text-body-s;
45
45
  @apply pl-sm outline-none block w-full h-10 bg-white leading-10 text-form-field;
46
- border: 1px solid theme(digitv2.lightTheme.text-secondary);
47
- color: theme(digitv2.lightTheme.text-primary);
46
+ border: 1px solid theme("digitv2.lightTheme.text-secondary");
47
+ color: theme("digitv2.lightTheme.text-primary");
48
48
  }
49
49
 
50
50
  .digit-citizen-card-input--front {
51
- @extend .typography.text-body-s;
51
+ @include typography-text-body-s;
52
52
  width: fit-content !important;
53
53
  display: flex;
54
54
  align-items: center;
55
- background: theme(colors.grey.mid);
55
+ background: theme("colors.grey.mid");
56
56
  border-right: 0;
57
57
  padding-right: 5px;
58
58
  }
59
59
  .digit-employee-card-input-error {
60
- @extend .typography.text-body-s;
60
+ @include typography-text-body-s;
61
61
  @extend .light-input-border;
62
62
  @extend .alert-error;
63
63
  @apply mb-lg pl-sm block w-full h-10 outline-none border-2 border-solid bg-white leading-10 text-form-field text-text-primary;