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