@egovernments/digit-ui-components-css 0.2.3 → 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 +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 +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 +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 +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 +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/tagV2.scss CHANGED
@@ -1,7 +1,10 @@
1
+ @import './theme-variables.css';
2
+ @import '../typography.scss';
3
+
1
4
  .digit-tag-wrapper {
2
5
 
3
- border-radius: theme(digitv2.spacers.spacer1);
4
- padding: theme(digitv2.spacers.spacer1) theme(digitv2.spacers.spacer3);
6
+ border-radius: theme("digitv2.spacers.spacer1");
7
+ padding: theme("digitv2.spacers.spacer1") theme("digitv2.spacers.spacer3");
5
8
  gap: 0.625rem;
6
9
  display: flex;
7
10
  align-items: center;
@@ -21,81 +24,81 @@
21
24
  }
22
25
 
23
26
  &.success {
24
- background-color: theme(digitv2.lightTheme.alert-successbg);
27
+ background-color: theme("digitv2.lightTheme.alert-successbg");
25
28
 
26
29
  .digit-tag-text {
27
- color: theme(digitv2.lightTheme.alert-success);
30
+ color: theme("digitv2.lightTheme.alert-success");
28
31
  }
29
32
  }
30
33
 
31
34
  &.error {
32
- background-color: theme(digitv2.lightTheme.alert-errorbg);
35
+ background-color: theme("digitv2.lightTheme.alert-errorbg");
33
36
 
34
37
  .digit-tag-text {
35
- color: theme(digitv2.lightTheme.alert-error);
38
+ color: theme("digitv2.lightTheme.alert-error");
36
39
  }
37
40
  }
38
41
 
39
42
  &.warning {
40
- background-color: theme(digitv2.lightTheme.alert-warning-bg);
43
+ background-color: theme("digitv2.lightTheme.alert-warning-bg");
41
44
 
42
45
  .digit-tag-text {
43
- color: theme(digitv2.lightTheme.alert-warning);
46
+ color: theme("digitv2.lightTheme.alert-warning");
44
47
  }
45
48
  }
46
49
 
47
50
  &.monochrome {
48
- background-color: theme(digitv2.lightTheme.paper-secondary);
51
+ background-color: theme("digitv2.lightTheme.paper-secondary");
49
52
 
50
53
  .digit-tag-text {
51
- color: theme(digitv2.lightTheme.primary-2);
54
+ color: theme("digitv2.lightTheme.primary-2");
52
55
  }
53
56
  }
54
57
 
55
58
 
56
59
  &.stroke {
57
60
  &.success {
58
- border: 0.031rem solid theme(digitv2.lightTheme.alert-success);
61
+ border: 0.031rem solid theme("digitv2.lightTheme.alert-success");
59
62
  }
60
63
 
61
64
  &.error {
62
- border: 0.031rem solid theme(digitv2.lightTheme.alert-error);
65
+ border: 0.031rem solid theme("digitv2.lightTheme.alert-error");
63
66
  }
64
67
 
65
68
  &.warning {
66
- border: 0.031rem solid theme(digitv2.lightTheme.alert-warning);
69
+ border: 0.031rem solid theme("digitv2.lightTheme.alert-warning");
67
70
  }
68
71
 
69
72
  &.monochrome {
70
- border: 0.031rem solid theme(digitv2.lightTheme.primary-2);
73
+ border: 0.031rem solid theme("digitv2.lightTheme.primary-2");
71
74
  }
72
75
  }
73
76
 
74
77
  .digit-tag-customIcon {
75
- width: theme(digitv2.spacers.spacer4);
76
- height: theme(digitv2.spacers.spacer4);
78
+ width: theme("digitv2.spacers.spacer4");
79
+ height: theme("digitv2.spacers.spacer4");
77
80
  }
78
81
 
79
82
  .digit-tag-text {
80
- @extend .typography.body-s;
81
- font-family: theme(digitv2.fontFamily.sans);
82
- font-style: theme(digitv2.fontStyle.normal);
83
- font-weight: theme(digitv2.fontWeight.regular);
84
- line-height: theme(digitv2.lineHeight.lineheight2);
83
+ @include typography-body-s;
84
+ font-family: theme("digitv2.fontFamily.sans");
85
+ font-style: theme("digitv2.fontStyle.normal");
86
+ font-weight: theme("digitv2.fontWeight.regular");
87
+ line-height: theme("digitv2.lineHeight.lineheight2");
85
88
 
86
89
  @media (max-aspect-ratio: 9/16) {
87
90
  /* Media query for mobile */
88
- font-size: theme(digitv2.fontSize.body-s.mobile);
91
+ font-size: theme("digitv2.fontSize.body-s.mobile");
89
92
  }
90
93
 
91
94
  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
92
95
  /* Media query for tablets */
93
- font-size: theme(digitv2.fontSize.body-s.tablet);
96
+ font-size: theme("digitv2.fontSize.body-s.tablet");
94
97
  }
95
98
 
96
99
  @media (min-aspect-ratio: 3/4) {
97
100
  /* Media query for desktop */
98
- font-size: theme(digitv2.fontSize.body-s.desktop);
101
+ font-size: theme("digitv2.fontSize.body-s.desktop");
99
102
  }
100
103
  }
101
104
 
package/src/digitv2/components/textInputV2.scss CHANGED
@@ -1,15 +1,15 @@
1
- @import url("../index.scss");
2
- @import url("../typography.scss");
1
+ @import './theme-variables.css';
2
+ @import '../typography.scss';
3
3
 
4
4
  .digit-card-inputError {
5
5
  @apply block w-full h-10 outline-none bg-white text-text-primary;
6
- font-style: theme(digitv2.fontStyle.normal);
7
- padding-left:theme(digitv2.spacers.spacer3);
8
- font-family: theme(digitv2.fontFamily.sans);
9
- font-size: theme(digitv2.spacers.spacer4);
10
- color: theme(digitv2.lightTheme.text-primary);
11
- line-height: theme(digitv2.spacers.spacer6);
12
- border: 0.094rem solid theme(digitv2.lightTheme.alert-error);
6
+ font-style: theme("digitv2.fontStyle.normal");
7
+ padding-left:theme("digitv2.spacers.spacer3");
8
+ font-family: theme("digitv2.fontFamily.sans");
9
+ font-size: theme("digitv2.spacers.spacer4");
10
+ color: theme("digitv2.lightTheme.text-primary");
11
+ line-height: theme("digitv2.spacers.spacer6");
12
+ border: 0.094rem solid theme("digitv2.lightTheme.alert-error");
13
13
  }
14
14
 
15
15
  .digit-text-input-field {
@@ -23,7 +23,7 @@
23
23
 
24
24
  &.numeric {
25
25
  input {
26
- @apply text-center overflow-hidden whitespace-no-wrap;
26
+ @apply text-center overflow-hidden whitespace-nowrap;
27
27
  text-overflow: ellipsis;
28
28
  }
29
29
 
@@ -60,10 +60,10 @@
60
60
 
61
61
  &.password {
62
62
  input {
63
- font-family: theme(digitv2.fontFamily.sans);
64
- font-size: theme(digitv2.spacers.spacer4);
63
+ font-family: theme("digitv2.fontFamily.sans");
64
+ font-size: theme("digitv2.spacers.spacer4");
65
65
  font-weight: 900;
66
- line-height: theme(digitv2.spacers.spacer6);
66
+ line-height: theme("digitv2.spacers.spacer6");
67
67
  }
68
68
  }
69
69
 
@@ -76,9 +76,9 @@
76
76
  .digit-numeric-button-suffix {
77
77
  pointer-events: none !important;
78
78
  cursor: not-allowed;
79
- background-color: theme(digitv2.lightTheme.generic-background);
80
- border: 0.063rem solid theme(digitv2.lightTheme.generic-divider);
81
- color: theme(digitv2.lightTheme.generic-divider);
79
+ background-color: theme("digitv2.lightTheme.generic-background");
80
+ border: 0.063rem solid theme("digitv2.lightTheme.generic-divider");
81
+ color: theme("digitv2.lightTheme.generic-divider");
82
82
  }
83
83
 
84
84
  input {
@@ -101,7 +101,7 @@
101
101
  input[type="date"]:disabled::-webkit-calendar-picker-indicator,
102
102
  input[type="time"]:disabled::-webkit-calendar-picker-indicator {
103
103
  @apply absolute cursor-pointer w-6 h-6;
104
- right: theme(digitv2.spacers.spacer3);
104
+ right: theme("digitv2.spacers.spacer3");
105
105
  top: 50%;
106
106
  transform: translateY(-50%);
107
107
  }
@@ -125,11 +125,11 @@
125
125
  input[type="date"][value=""]:not(:placeholder-shown)::before,
126
126
  input[type="time"][value=""]:not(:placeholder-shown)::before {
127
127
  content: attr(placeholder);
128
- color: theme(digitv2.lightTheme.text-disabled);
129
- font-family: theme(digitv2.fontFamily.sans);
130
- font-weight: theme(digitv2.fontWeight.regular);
131
- font-size: theme(digitv2.spacers.spacer4);
132
- line-height: theme(digitv2.spacers.spacer6);
128
+ color: theme("digitv2.lightTheme.text-disabled");
129
+ font-family: theme("digitv2.fontFamily.sans");
130
+ font-weight: theme("digitv2.fontWeight.regular");
131
+ font-size: theme("digitv2.spacers.spacer4");
132
+ line-height: theme("digitv2.spacers.spacer6");
133
133
  }
134
134
 
135
135
  &.noneditable {
@@ -139,15 +139,15 @@
139
139
  .digit-numeric-button-prefix,
140
140
  .digit-numeric-button-suffix {
141
141
  pointer-events: none !important;
142
- border: 0.063rem solid theme(digitv2.lightTheme.generic-inputborder);
143
- background: theme(digitv2.lightTheme.generic-background);
144
- color: theme(digitv2.lightTheme.text-secondary);
142
+ border: 0.063rem solid theme("digitv2.lightTheme.generic-inputborder");
143
+ background: theme("digitv2.lightTheme.generic-background");
144
+ color: theme("digitv2.lightTheme.text-secondary");
145
145
  }
146
146
 
147
147
  input {
148
- border: 0.063rem solid theme(digitv2.lightTheme.generic-inputborder);
149
- background: theme(digitv2.lightTheme.generic-background);
150
- color: theme(digitv2.lightTheme.text-secondary);
148
+ border: 0.063rem solid theme("digitv2.lightTheme.generic-inputborder");
149
+ background: theme("digitv2.lightTheme.generic-background");
150
+ color: theme("digitv2.lightTheme.text-secondary");
151
151
  }
152
152
 
153
153
  .digit-numeric-button-prefix,
@@ -174,17 +174,17 @@
174
174
  .digit-suffix,
175
175
  .digit-numeric-button-prefix,
176
176
  .digit-numeric-button-suffix {
177
- border: 0.094rem solid theme(digitv2.lightTheme.alert-error);
177
+ border: 0.094rem solid theme("digitv2.lightTheme.alert-error");
178
178
  }
179
179
 
180
180
  .digit-numeric-button-prefix,
181
181
  .digit-prefix {
182
- border-right: 0.063rem solid theme(digitv2.lightTheme.text-secondary);
182
+ border-right: 0.063rem solid theme("digitv2.lightTheme.text-secondary");
183
183
  }
184
184
 
185
185
  .digit-numeric-button-suffix,
186
186
  .digit-suffix {
187
- border-left: 0.063rem solid theme(digitv2.lightTheme.text-secondary);
187
+ border-left: 0.063rem solid theme("digitv2.lightTheme.text-secondary");
188
188
  }
189
189
 
190
190
  &.numeric {
@@ -211,33 +211,33 @@
211
211
 
212
212
  .digit-card-input-field {
213
213
  @apply outline-none mt-sm block w-full h-10 bg-white text-form-field;
214
- padding-left: theme(digitv2.spacers.spacer3);
215
- border: 0.063rem solid theme(digitv2.lightTheme.text-secondary);
216
- color: theme(digitv2.lightTheme.text-primary);
217
- line-height: theme(digitv2.spacers.spacer6);
214
+ padding-left: theme("digitv2.spacers.spacer3");
215
+ border: 0.063rem solid theme("digitv2.lightTheme.text-secondary");
216
+ color: theme("digitv2.lightTheme.text-primary");
217
+ line-height: theme("digitv2.spacers.spacer6");
218
218
  }
219
219
 
220
220
  .digit-card-inputError {
221
221
  @apply block w-full h-10 outline-none bg-white text-form-field text-text-primary;
222
- font-style: theme(digitv2.fontStyle.normal);
223
- padding-left: theme(digitv2.spacers.spacer3);
224
- font-family: theme(digitv2.fontFamily.sans);
225
- font-size: theme(digitv2.spacers.spacer4);
226
- color: theme(digitv2.lightTheme.text-primary);
227
- line-height: theme(digitv2.spacers.spacer6);
228
- border: 0.094rem solid theme(digitv2.lightTheme.alert-error);
222
+ font-style: theme("digitv2.fontStyle.normal");
223
+ padding-left: theme("digitv2.spacers.spacer3");
224
+ font-family: theme("digitv2.fontFamily.sans");
225
+ font-size: theme("digitv2.spacers.spacer4");
226
+ color: theme("digitv2.lightTheme.text-primary");
227
+ line-height: theme("digitv2.spacers.spacer6");
228
+ border: 0.094rem solid theme("digitv2.lightTheme.alert-error");
229
229
  }
230
230
 
231
231
  .digit-employeeCard-input {
232
- @extend .typography.text-body-s;
232
+ @include typography-text-body-s;
233
233
  @apply outline-none block w-full h-10 bg-white text-form-field;
234
- font-style: theme(digitv2.fontStyle.normal);
235
- padding-left: theme(digitv2.spacers.spacer3);
236
- font-family: theme(digitv2.fontFamily.sans);
237
- font-size: theme(digitv2.spacers.spacer4);
238
- border: 0.063rem solid theme(digitv2.lightTheme.text-secondary);
239
- color: theme(digitv2.lightTheme.text-primary);
240
- line-height: theme(digitv2.spacers.spacer6);
234
+ font-style: theme("digitv2.fontStyle.normal");
235
+ padding-left: theme("digitv2.spacers.spacer3");
236
+ font-family: theme("digitv2.fontFamily.sans");
237
+ font-size: theme("digitv2.spacers.spacer4");
238
+ border: 0.063rem solid theme("digitv2.lightTheme.text-secondary");
239
+ color: theme("digitv2.lightTheme.text-primary");
240
+ line-height: theme("digitv2.spacers.spacer6");
241
241
  }
242
242
 
243
243
  .digit-employeeCard-input:disabled {
@@ -246,24 +246,24 @@
246
246
  }
247
247
 
248
248
  .digit-employeeCard-input--front {
249
- @extend .typography.text-body-s;
249
+ @include typography-text-body-s;
250
250
  @apply flex items-center;
251
251
  width: fit-content !important;
252
- background: theme(colors.grey.mid);
252
+ background: theme("colors.grey.mid");
253
253
  border-right: 0;
254
254
  padding-right: 0.313rem;
255
255
  }
256
256
 
257
257
  .digit-employeeCard-inputError {
258
- @extend .typography.text-body-s;
258
+ @include typography-text-body-s;
259
259
  @apply block w-full h-10 outline-none bg-white text-form-field text-text-primary;
260
- font-style: theme(digitv2.fontStyle.normal);
261
- padding-left: theme(digitv2.spacers.spacer3);
262
- font-family: theme(digitv2.fontFamily.sans);
263
- font-size: theme(digitv2.spacers.spacer4);
264
- color: theme(digitv2.lightTheme.text-primary);
265
- line-height: theme(digitv2.spacers.spacer6);
266
- border: 0.094rem solid theme(digitv2.lightTheme.alert-error);
260
+ font-style: theme("digitv2.fontStyle.normal");
261
+ padding-left: theme("digitv2.spacers.spacer3");
262
+ font-family: theme("digitv2.fontFamily.sans");
263
+ font-size: theme("digitv2.spacers.spacer4");
264
+ color: theme("digitv2.lightTheme.text-primary");
265
+ line-height: theme("digitv2.spacers.spacer6");
266
+ border: 0.094rem solid theme("digitv2.lightTheme.alert-error");
267
267
  }
268
268
 
269
269
  .digit-inputWrapper {
@@ -275,7 +275,7 @@
275
275
  }
276
276
 
277
277
  span {
278
- margin-top: theme(digitv2.spacers.spacer4);
278
+ margin-top: theme("digitv2.spacers.spacer4");
279
279
  margin-left: 10%;
280
280
  margin-right: 10%;
281
281
  }
@@ -313,49 +313,49 @@
313
313
  }
314
314
 
315
315
  .digit-citizenCard-input {
316
- @extend .typography.text-body-s;
316
+ @include typography-text-body-s;
317
317
  @apply outline-none block w-full h-10 bg-white;
318
- font-style: theme(digitv2.fontStyle.normal);
319
- padding-left: theme(digitv2.spacers.spacer3);
320
- font-family: theme(digitv2.fontFamily.sans);
321
- font-size: theme(digitv2.spacers.spacer4);
322
- border: 0.063rem solid theme(digitv2.lightTheme.text-secondary);
323
- color: theme(digitv2.lightTheme.text-primary);
324
- line-height: theme(digitv2.spacers.spacer6);
318
+ font-style: theme("digitv2.fontStyle.normal");
319
+ padding-left: theme("digitv2.spacers.spacer3");
320
+ font-family: theme("digitv2.fontFamily.sans");
321
+ font-size: theme("digitv2.spacers.spacer4");
322
+ border: 0.063rem solid theme("digitv2.lightTheme.text-secondary");
323
+ color: theme("digitv2.lightTheme.text-primary");
324
+ line-height: theme("digitv2.spacers.spacer6");
325
325
  }
326
326
 
327
327
  .digit-citizenCard-input--front {
328
- @extend .typography.text-body-s;
328
+ @include typography-text-body-s;
329
329
  @apply flex items-center;
330
330
  width: fit-content !important;
331
- background: theme(colors.grey.mid);
331
+ background: theme("colors.grey.mid");
332
332
  border-right: 0;
333
333
  padding-right: 0.313rem;
334
334
  }
335
335
 
336
336
  .digit-employeeCard-inputError {
337
- @extend .typography.text-body-s;
337
+ @include typography-text-body-s;
338
338
  @extend .light-input-border;
339
339
  @apply block w-full h-10 outline-none bg-white text-form-field text-text-primary;
340
- font-style: theme(digitv2.fontStyle.normal);
341
- padding-left: theme(digitv2.spacers.spacer3);
342
- font-family: theme(digitv2.fontFamily.sans);
343
- font-size: theme(digitv2.spacers.spacer4);
344
- color: theme(digitv2.lightTheme.text-primary);
345
- line-height:theme(digitv2.spacers.spacer6);
346
- border: 0.094rem solid theme(digitv2.lightTheme.alert-error);
340
+ font-style: theme("digitv2.fontStyle.normal");
341
+ padding-left: theme("digitv2.spacers.spacer3");
342
+ font-family: theme("digitv2.fontFamily.sans");
343
+ font-size: theme("digitv2.spacers.spacer4");
344
+ color: theme("digitv2.lightTheme.text-primary");
345
+ line-height:theme("digitv2.spacers.spacer6");
346
+ border: 0.094rem solid theme("digitv2.lightTheme.alert-error");
347
347
  }
348
348
 
349
349
  .digit-card-inputError {
350
350
  @extend .light-input-border;
351
351
  @apply block w-full h-10 outline-none bg-white text-form-field text-text-primary;
352
- font-family: theme(digitv2.fontFamily.sans);
353
- padding-left: theme(digitv2.spacers.spacer3);
354
- font-family: theme(digitv2.fontFamily.sans);
355
- font-size: theme(digitv2.spacers.spacer4);
356
- color: theme(digitv2.lightTheme.text-primary);
357
- line-height: theme(digitv2.spacers.spacer6);
358
- border: 0.094rem solid theme(digitv2.lightTheme.alert-error);
352
+ font-family: theme("digitv2.fontFamily.sans");
353
+ padding-left: theme("digitv2.spacers.spacer3");
354
+ font-family: theme("digitv2.fontFamily.sans");
355
+ font-size: theme("digitv2.spacers.spacer4");
356
+ color: theme("digitv2.lightTheme.text-primary");
357
+ line-height: theme("digitv2.spacers.spacer6");
358
+ border: 0.094rem solid theme("digitv2.lightTheme.alert-error");
359
359
  }
360
360
 
361
361
 
@@ -371,7 +371,7 @@
371
371
  &.passwordToText,
372
372
  &.withIcon {
373
373
  input {
374
- padding-right: theme(digitv2.spacers.spacer10);
374
+ padding-right: theme("digitv2.spacers.spacer10");
375
375
  }
376
376
  }
377
377
 
@@ -401,17 +401,17 @@
401
401
  .digit-suffix:not([readonly]),
402
402
  input:not([readonly]) {
403
403
  outline: none;
404
- border: 0.094rem solid theme(digitv2.lightTheme.primary-1);
404
+ border: 0.094rem solid theme("digitv2.lightTheme.primary-1");
405
405
  }
406
406
 
407
407
  .digit-numeric-button-prefix,
408
408
  .digit-prefix {
409
- border-right: 0.063rem solid theme(digitv2.lightTheme.text-secondary) !important;
409
+ border-right: 0.063rem solid theme("digitv2.lightTheme.text-secondary") !important;
410
410
  }
411
411
 
412
412
  .digit-numeric-button-suffix,
413
413
  .digit-suffix {
414
- border-left: 0.063rem solid theme(digitv2.lightTheme.text-secondary) !important;
414
+ border-left: 0.063rem solid theme("digitv2.lightTheme.text-secondary") !important;
415
415
  }
416
416
  }
417
417
 
@@ -420,22 +420,22 @@
420
420
  .digit-numeric-button-prefix,
421
421
  .digit-numeric-button-suffix {
422
422
  @apply font-bold text-center;
423
- font-family: theme(digitv2.fontFamily.sans);
424
- font-style: theme(digitv2.fontStyle.normal);
425
- color: theme(digitv2.lightTheme.text-secondary);
426
- font-size: theme(digitv2.spacers.spacer5);
427
- height: theme(digitv2.spacers.spacer10) !important;
428
- border: 0.063rem solid theme(digitv2.lightTheme.text-secondary);
423
+ font-family: theme("digitv2.fontFamily.sans");
424
+ font-style: theme("digitv2.fontStyle.normal");
425
+ color: theme("digitv2.lightTheme.text-secondary");
426
+ font-size: theme("digitv2.spacers.spacer5");
427
+ height: theme("digitv2.spacers.spacer10") !important;
428
+ border: 0.063rem solid theme("digitv2.lightTheme.text-secondary");
429
429
  line-height: 1.172rem;
430
- background: theme(colors.grey.mid);
430
+ background: theme("colors.grey.mid");
431
431
  max-width: none !important;
432
432
  flex: 0 0 2.5rem;
433
433
  }
434
434
 
435
435
  .digit-numeric-button-prefix,
436
436
  .digit-numeric-button-suffix {
437
- width: theme(digitv2.spacers.spacer10) !important;
438
- font-size: theme(digitv2.spacers.spacer6);
437
+ width: theme("digitv2.spacers.spacer10") !important;
438
+ font-size: theme("digitv2.spacers.spacer6");
439
439
  }
440
440
 
441
441
  .digit-prefix,
@@ -455,8 +455,8 @@
455
455
 
456
456
  .digit-text-input-customIcon {
457
457
  @apply absolute w-6 h-6 cursor-pointer;
458
- top: theme(digitv2.spacers.spacer2);
459
- right: theme(digitv2.spacers.spacer3);
458
+ top: theme("digitv2.spacers.spacer2");
459
+ right: theme("digitv2.spacers.spacer3");
460
460
 
461
461
  &.nonEditable,
462
462
  &.disabled {
package/src/digitv2/components/textareaV2.scss CHANGED
@@ -1,25 +1,28 @@
1
+ @import './theme-variables.css';
2
+ @import '../typography.scss';
3
+
1
4
  .digit-card-textarea-field,
2
5
  .digit-employee-card-textarea-field {
3
6
  @apply block outline-none w-full bg-white text-form-field overflow-x-hidden overflow-y-hidden whitespace-pre-wrap;
4
7
 
5
8
 
6
- font-family: theme(digitv2.fontFamily.sans);
7
- font-style: theme(digitv2.fontStyle.normal);
8
- font-weight: theme(digitv2.fontWeight.regular);
9
- color: theme(digitv2.lightTheme.text-primary);
10
- border: 0.063rem solid theme(digitv2.lightTheme.text-secondary);
11
- font-size: theme(digitv2.spacers.spacer4);
12
- line-height: theme(digitv2.spacers.spacer6);
13
- padding: theme(digitv2.spacers.spacer3) !important;
14
- padding-top: theme(digitv2.spacers.spacer2) !important;
9
+ font-family: theme("digitv2.fontFamily.sans");
10
+ font-style: theme("digitv2.fontStyle.normal");
11
+ font-weight: theme("digitv2.fontWeight.regular");
12
+ color: theme("digitv2.lightTheme.text-primary");
13
+ border: 0.063rem solid theme("digitv2.lightTheme.text-secondary");
14
+ font-size: theme("digitv2.spacers.spacer4");
15
+ line-height: theme("digitv2.spacers.spacer6");
16
+ padding: theme("digitv2.spacers.spacer3") !important;
17
+ padding-top: theme("digitv2.spacers.spacer2") !important;
15
18
  height: 6.25rem;
16
- min-height:theme(digitv2.spacers.spacer10);
19
+ min-height:theme("digitv2.spacers.spacer10");
17
20
  overflow-wrap: break-word;
18
21
 
19
22
 
20
23
  &.disabled {
21
24
  @apply text-grey-dark !important;
22
- border: 0.063rem solid theme(digitv2.lightTheme.generic-divider);
25
+ border: 0.063rem solid theme("digitv2.lightTheme.generic-divider");
23
26
  pointer-events: none !important;
24
27
  cursor: not-allowed;
25
28
 
@@ -27,13 +30,13 @@
27
30
 
28
31
  &.noneditable {
29
32
  pointer-events: none !important;
30
- border: 0.063rem solid theme(digitv2.lightTheme.generic-inputborder);
31
- background: theme(digitv2.lightTheme.generic-background);
32
- color: theme(digitv2.lightTheme.text-secondary);
33
+ border: 0.063rem solid theme("digitv2.lightTheme.generic-inputborder");
34
+ background: theme("digitv2.lightTheme.generic-background");
35
+ color: theme("digitv2.lightTheme.text-secondary");
33
36
  }
34
37
 
35
38
  &.error {
36
- border: 0.094rem solid theme(digitv2.lightTheme.alert-error);
39
+ border: 0.094rem solid theme("digitv2.lightTheme.alert-error");
37
40
  }
38
41
 
39
42
  &:hover {
@@ -48,17 +51,17 @@
48
51
  }
49
52
 
50
53
  textarea::-webkit-scrollbar {
51
- width: theme(digitv2.spacers.spacer2);
52
- background-color: theme(digitv2.lightTheme.generic-background);
54
+ width: theme("digitv2.spacers.spacer2");
55
+ background-color: theme("digitv2.lightTheme.generic-background");
53
56
  }
54
57
 
55
58
  textarea::-webkit-scrollbar-track {
56
- background-color: theme(digitv2.lightTheme.generic-background);
59
+ background-color: theme("digitv2.lightTheme.generic-background");
57
60
  border-radius: 0.563rem;
58
61
  }
59
62
 
60
63
  textarea::-webkit-scrollbar-thumb {
61
- background-color: theme(digitv2.lightTheme.generic-divider);
64
+ background-color: theme("digitv2.lightTheme.generic-divider");
62
65
  border-radius: 0.563rem;
63
66
  }
64
67
 
@@ -88,7 +91,7 @@ textarea::-webkit-scrollbar-thumb {
88
91
 
89
92
  .digit-card-textarea-field:focus,
90
93
  .digit-employee-card-textarea-field:focus {
91
- border: 0.094rem solid theme(digitv2.lightTheme.primary-1);
94
+ border: 0.094rem solid theme("digitv2.lightTheme.primary-1");
92
95
  overflow-y: auto;
93
96
  }
94
97