@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/headerV2.scss CHANGED
@@ -1,3 +1,6 @@
1
+ @import './theme-variables.css';
2
+ @import '../typography.scss';
3
+
1
4
  .topbar {
2
5
  position: fixed;
3
6
  top: 0;
@@ -39,7 +42,7 @@
39
42
  }
40
43
 
41
44
  .user-img-txt {
42
- background: theme(colors.primary.main);
45
+ background: theme("colors.primary.main");
43
46
  padding: 0.625rem 0.938rem;
44
47
  border-radius: 50%;
45
48
  color: white;
@@ -166,10 +169,10 @@
166
169
  flex-direction: row;
167
170
  padding: 0.625rem;
168
171
  column-gap: 0.625rem;
169
- color: theme(colors.text.secondary);
172
+ color: theme("colors.text.secondary");
170
173
 
171
174
  &:hover {
172
- background: theme(colors.grey.mid);
175
+ background: theme("colors.grey.mid");
173
176
  }
174
177
  }
175
178
 
@@ -194,9 +197,9 @@ video::-webkit-media-controls-panel {
194
197
  left: 0;
195
198
  z-index: 9999999;
196
199
  display: flex;
197
- background-color: theme(digitv2.lightTheme.paper-primary);
200
+ background-color: theme("digitv2.lightTheme.paper-primary");
198
201
  height: 4.5rem;
199
- padding: theme(digitv2.spacers.spacer4) theme(digitv2.spacers.spacer10) theme(digitv2.spacers.spacer4) theme(digitv2.spacers.spacer10);
202
+ padding: theme("digitv2.spacers.spacer4") theme("digitv2.spacers.spacer10") theme("digitv2.spacers.spacer4") theme("digitv2.spacers.spacer10");
200
203
 
201
204
  .margin-top-10 {
202
205
  margin-top: 0.625rem;
@@ -221,12 +224,12 @@ video::-webkit-media-controls-panel {
221
224
  .digit-dropdown-item {
222
225
  display: flex;
223
226
  flex-direction: row;
224
- padding: theme(digitv2.spacers.spacer3);
227
+ padding: theme("digitv2.spacers.spacer3");
225
228
  column-gap: 0.625rem;
226
- color: theme(colors.text.secondary);
229
+ color: theme("colors.text.secondary");
227
230
 
228
231
  &:hover {
229
- background: theme(colors.grey.mid);
232
+ background: theme("colors.grey.mid");
230
233
  }
231
234
  }
232
235
 
@@ -235,39 +238,39 @@ video::-webkit-media-controls-panel {
235
238
  }
236
239
 
237
240
  @media (min-width: 30.063rem) and (max-width: 47.938rem) {
238
- padding: theme(digitv2.spacers.spacer4) theme(digitv2.spacers.spacer6) theme(digitv2.spacers.spacer4) theme(digitv2.spacers.spacer6);
239
- gap: theme(digitv2.spacers.spacer4);
241
+ padding: theme("digitv2.spacers.spacer4") theme("digitv2.spacers.spacer6") theme("digitv2.spacers.spacer4") theme("digitv2.spacers.spacer6");
242
+ gap: theme("digitv2.spacers.spacer4");
240
243
  }
241
244
 
242
245
  @media (max-width: 30rem) {
243
246
  height: 3.5rem;
244
- padding: theme(digitv2.spacers.spacer4);
245
- gap: theme(digitv2.spacers.spacer4);
247
+ padding: theme("digitv2.spacers.spacer4");
248
+ gap: theme("digitv2.spacers.spacer4");
246
249
  }
247
250
 
248
251
  &.light {
249
- box-shadow: theme(digitv2.spacers.spacer0) 0.063rem 0.125rem theme(digitv2.spacers.spacer0) #00000029;
252
+ box-shadow: theme("digitv2.spacers.spacer0") 0.063rem 0.125rem theme("digitv2.spacers.spacer0") #00000029;
250
253
  }
251
254
 
252
255
  .digit-logo-ulb-wrapper {
253
256
  display: flex !important;
254
- gap: theme(digitv2.spacers.spacer4);
257
+ gap: theme("digitv2.spacers.spacer4");
255
258
  align-items: center !important;
256
- max-width: calc(50%-(theme(digitv2.spacers.spacer6)));
259
+ max-width: calc(50% - (theme("digitv2.spacers.spacer6")));
257
260
 
258
261
  @media (min-width: 48rem) {
259
- height: theme(digitv2.spacers.spacer8);
262
+ height: theme("digitv2.spacers.spacer8");
260
263
  }
261
264
 
262
265
  @media (min-width: 30.063rem) and (max-width: 47.938rem) {
263
- height: theme(digitv2.spacers.spacer8);
266
+ height: theme("digitv2.spacers.spacer8");
264
267
  }
265
268
 
266
269
  @media (max-width: 30rem) {}
267
270
 
268
271
  .digit-topbar-logo {
269
272
  flex-shrink: 0;
270
- height: theme(digitv2.spacers.spacer8);
273
+ height: theme("digitv2.spacers.spacer8");
271
274
  width: 1.291rem;
272
275
 
273
276
  &.clickable {
@@ -276,44 +279,44 @@ video::-webkit-media-controls-panel {
276
279
  }
277
280
 
278
281
  .digit-topbar-ulb {
279
- @extend .typography.heading-s;
280
- font-family: theme(digitv2.fontFamily.sans);
281
- font-style: theme(digitv2.fontStyle.normal);
282
- font-weight: theme(digitv2.fontWeight.bold);
283
- line-height: theme(digitv2.lineHeight.lineheight1);
282
+ @include typography-heading-s;
283
+ font-family: theme("digitv2.fontFamily.sans");
284
+ font-style: theme("digitv2.fontStyle.normal");
285
+ font-weight: theme("digitv2.fontWeight.bold");
286
+ line-height: theme("digitv2.lineHeight.lineheight1");
284
287
 
285
288
  @media (max-aspect-ratio: 9/16) {
286
289
  /* Media query for mobile */
287
- font-size: theme(digitv2.fontSize.heading-s.mobile);
290
+ font-size: theme("digitv2.fontSize.heading-s.mobile");
288
291
  }
289
292
 
290
293
  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
291
294
  /* Media query for tablets */
292
- font-size: theme(digitv2.fontSize.heading-s.tablet);
295
+ font-size: theme("digitv2.fontSize.heading-s.tablet");
293
296
  }
294
297
 
295
298
  @media (min-aspect-ratio: 3/4) {
296
299
  /* Media query for desktop */
297
- font-size: theme(digitv2.fontSize.heading-s.desktop);
300
+ font-size: theme("digitv2.fontSize.heading-s.desktop");
298
301
  }
299
- @apply whitespace-no-wrap overflow-hidden;
300
- color: theme(digitv2.lightTheme.text-primary);
302
+ @apply whitespace-nowrap overflow-hidden;
303
+ color: theme("digitv2.lightTheme.text-primary");
301
304
  text-overflow: ellipsis;
302
305
  }
303
306
  }
304
307
 
305
308
  &.dark {
306
- background-color: theme(digitv2.lightTheme.primary-2);
309
+ background-color: theme("digitv2.lightTheme.primary-2");
307
310
 
308
311
  .digit-logo-ulb-wrapper {
309
312
  .digit-topbar-ulb {
310
- color: theme(digitv2.lightTheme.paper-primary);
313
+ color: theme("digitv2.lightTheme.paper-primary");
311
314
  }
312
315
  }
313
316
 
314
317
  .digit-header-action-fields {
315
318
  .individual-action-field {
316
- color: theme(digitv2.lightTheme.paper-primary);
319
+ color: theme("digitv2.lightTheme.paper-primary");
317
320
 
318
321
  .digit-dropdown-employee-select-wrap,
319
322
  .digit-dropdown-select-wrap{
@@ -326,16 +329,16 @@ video::-webkit-media-controls-panel {
326
329
  .digit-header-action-fields {
327
330
  @apply items-center overflow-hidden;
328
331
  display: flex !important;
329
- height: theme(digitv2.spacers.spacer8);
332
+ height: theme("digitv2.spacers.spacer8");
330
333
  max-width: 50%;
331
334
 
332
335
 
333
336
  @media (min-width: 48rem) {
334
- gap: theme(digitv2.spacers.spacer8);
337
+ gap: theme("digitv2.spacers.spacer8");
335
338
  }
336
339
 
337
340
  @media (min-width: 30.063rem) and (max-width: 47.938rem) {
338
- gap: theme(digitv2.spacers.spacer4);
341
+ gap: theme("digitv2.spacers.spacer4");
339
342
  }
340
343
 
341
344
  .digit-header-img {
@@ -346,16 +349,16 @@ video::-webkit-media-controls-panel {
346
349
  }
347
350
 
348
351
  .digit-topbar-hamburger {
349
- width: theme(digitv2.spacers.spacer6);
350
- height: theme(digitv2.spacers.spacer6);
352
+ width: theme("digitv2.spacers.spacer6");
353
+ height: theme("digitv2.spacers.spacer6");
351
354
 
352
355
  @media (min-width: 30.063rem) and (max-width: 47.938rem) {
353
- width: theme(digitv2.spacers.spacer8);
354
- height: theme(digitv2.spacers.spacer8);
356
+ width: theme("digitv2.spacers.spacer8");
357
+ height: theme("digitv2.spacers.spacer8");
355
358
 
356
359
  svg {
357
- width: theme(digitv2.spacers.spacer8);
358
- height: theme(digitv2.spacers.spacer8);
360
+ width: theme("digitv2.spacers.spacer8");
361
+ height: theme("digitv2.spacers.spacer8");
359
362
  }
360
363
  }
361
364
 
@@ -368,11 +371,11 @@ video::-webkit-media-controls-panel {
368
371
  .digit-header-img-ulb-wrapper-mobileview {
369
372
  display: flex;
370
373
  align-items: center;
371
- height: theme(digitv2.spacers.spacer6);
372
- max-width: calc(100%-(theme(digitv2.spacers.spacer6)));
374
+ height: theme("digitv2.spacers.spacer6");
375
+ max-width: calc(100% - (theme("digitv2.spacers.spacer6")));
373
376
 
374
377
  .digit-header-img {
375
- margin-right: theme(digitv2.spacers.spacer2);
378
+ margin-right: theme("digitv2.spacers.spacer2");
376
379
  margin-bottom: 0.156rem;
377
380
 
378
381
  &.clickable {
@@ -381,44 +384,44 @@ video::-webkit-media-controls-panel {
381
384
  }
382
385
 
383
386
  .topbar-divider {
384
- height: theme(digitv2.spacers.spacer6);
387
+ height: theme("digitv2.spacers.spacer6");
385
388
  width: 0.063rem;
386
- border: 0.063rem solid theme(digitv2.lightTheme.text-primary);
389
+ border: 0.063rem solid theme("digitv2.lightTheme.text-primary");
387
390
  margin-right: 0.625rem;
388
391
 
389
392
  &.dark {
390
- border: 0.063rem solid theme(digitv2.lightTheme.paper-primary);
393
+ border: 0.063rem solid theme("digitv2.lightTheme.paper-primary");
391
394
  }
392
395
 
393
396
  }
394
397
 
395
398
  .digit-topbar-ulb-mobileview {
396
- @apply overflow-hidden whitespace-no-wrap;
397
- @extend .typography.body-s;
398
- font-family: theme(digitv2.fontFamily.sans);
399
- font-style: theme(digitv2.fontStyle.normal);
400
- font-weight: theme(digitv2.fontWeight.regular);
401
- line-height: theme(digitv2.lineHeight.lineheight2);
399
+ @apply overflow-hidden whitespace-nowrap;
400
+ @include typography-body-s;
401
+ font-family: theme("digitv2.fontFamily.sans");
402
+ font-style: theme("digitv2.fontStyle.normal");
403
+ font-weight: theme("digitv2.fontWeight.regular");
404
+ line-height: theme("digitv2.lineHeight.lineheight2");
402
405
 
403
406
  @media (max-aspect-ratio: 9/16) {
404
407
  /* Media query for mobile */
405
- font-size: theme(digitv2.fontSize.body-s.mobile);
408
+ font-size: theme("digitv2.fontSize.body-s.mobile");
406
409
  }
407
410
 
408
411
  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
409
412
  /* Media query for tablets */
410
- font-size: theme(digitv2.fontSize.body-s.tablet);
413
+ font-size: theme("digitv2.fontSize.body-s.tablet");
411
414
  }
412
415
 
413
416
  @media (min-aspect-ratio: 3/4) {
414
417
  /* Media query for desktop */
415
- font-size: theme(digitv2.fontSize.body-s.desktop);
418
+ font-size: theme("digitv2.fontSize.body-s.desktop");
416
419
  }
417
420
  text-overflow: ellipsis;
418
- color: theme(digitv2.lightTheme.text-primary);
421
+ color: theme("digitv2.lightTheme.text-primary");
419
422
 
420
423
  &.dark {
421
- color: theme(digitv2.lightTheme.paper-primary);
424
+ color: theme("digitv2.lightTheme.paper-primary");
422
425
  }
423
426
  }
424
427
 
package/src/digitv2/components/headerdropdownV2.scss CHANGED
@@ -1,23 +1,26 @@
1
+ @import './theme-variables.css';
2
+ @import '../typography.scss';
3
+
1
4
  .header-dropdown-profile {
2
5
  display: flex;
3
6
  align-items: center;
4
7
  justify-content: center;
5
- width: theme(digitv2.spacers.spacer8);
6
- height: theme(digitv2.spacers.spacer8);
8
+ width: theme("digitv2.spacers.spacer8");
9
+ height: theme("digitv2.spacers.spacer8");
7
10
  overflow: hidden;
8
11
  border-radius: 50%;
9
12
 
10
13
  &.text {
11
- color: theme(digitv2.lightTheme.paper-primary);
14
+ color: theme("digitv2.lightTheme.paper-primary");
12
15
  font-weight: 700;
13
- background: theme(digitv2.lightTheme.primary-2);
16
+ background: theme("digitv2.lightTheme.primary-2");
14
17
  }
15
18
 
16
19
  &.dark {
17
20
  &.text {
18
- background: theme(digitv2.lightTheme.paper-primary);
21
+ background: theme("digitv2.lightTheme.paper-primary");
19
22
  font-weight: 700;
20
- color: theme(digitv2.lightTheme.primary-2);
23
+ color: theme("digitv2.lightTheme.primary-2");
21
24
  }
22
25
  }
23
26
 
@@ -29,56 +32,56 @@
29
32
  }
30
33
 
31
34
  .header-dropdown-label {
32
- @extend .typography.body-s;
35
+ @include typography-body-s;
33
36
  cursor: pointer;
34
- font-family: theme(digitv2.fontFamily.sans);
35
- font-style: theme(digitv2.fontStyle.normal);
36
- font-weight: theme(digitv2.fontWeight.regular);
37
- line-height: theme(digitv2.lineHeight.lineheight2);
37
+ font-family: theme("digitv2.fontFamily.sans");
38
+ font-style: theme("digitv2.fontStyle.normal");
39
+ font-weight: theme("digitv2.fontWeight.regular");
40
+ line-height: theme("digitv2.lineHeight.lineheight2");
38
41
 
39
42
  @media (max-aspect-ratio: 9/16) {
40
43
  /* Media query for mobile */
41
- font-size: theme(digitv2.fontSize.body-s.mobile);
44
+ font-size: theme("digitv2.fontSize.body-s.mobile");
42
45
  }
43
46
 
44
47
  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
45
48
  /* Media query for tablets */
46
- font-size: theme(digitv2.fontSize.body-s.tablet);
49
+ font-size: theme("digitv2.fontSize.body-s.tablet");
47
50
  }
48
51
 
49
52
  @media (min-aspect-ratio: 3/4) {
50
53
  /* Media query for desktop */
51
- font-size: theme(digitv2.fontSize.body-s.desktop);
54
+ font-size: theme("digitv2.fontSize.body-s.desktop");
52
55
  }
53
56
  display: flex;
54
57
  align-items: center;
55
- color: theme(digitv2.lightTheme.text-primary);
58
+ color: theme("digitv2.lightTheme.text-primary");
56
59
  position: relative;
57
60
 
58
61
  &.dark {
59
- color: theme(digitv2.lightTheme.paper-primary);
62
+ color: theme("digitv2.lightTheme.paper-primary");
60
63
  }
61
64
  }
62
65
 
63
66
  .header-dropdown-arrow {
64
- margin-left: theme(digitv2.spacers.spacer2);
65
- width: theme(digitv2.spacers.spacer6);
66
- height: theme(digitv2.spacers.spacer6);
67
+ margin-left: theme("digitv2.spacers.spacer2");
68
+ width: theme("digitv2.spacers.spacer6");
69
+ height: theme("digitv2.spacers.spacer6");
67
70
  }
68
71
 
69
72
  .header-dropdown-menu {
70
73
  width: fit-content !important;
71
- box-shadow: theme(digitv2.spacers.spacer0) 0.063rem 0.275rem theme(digitv2.spacers.spacer0) #00000026;
74
+ box-shadow: theme("digitv2.spacers.spacer0") 0.063rem 0.275rem theme("digitv2.spacers.spacer0") #00000026;
72
75
  max-height: 80%;
73
- background-color: theme(digitv2.lightTheme.paper-primary);
74
- margin-top: theme(digitv2.spacers.spacer6);
76
+ background-color: theme("digitv2.lightTheme.paper-primary");
77
+ margin-top: theme("digitv2.spacers.spacer6");
75
78
  position: fixed;
76
79
  min-width: 14rem;
77
80
  max-width: 25rem;
78
81
  @apply z-30 overflow-y-auto overflow-x-hidden;
79
82
 
80
83
  &.underProfile{
81
- margin-top: theme(digitv2.spacers.spacer5);
84
+ margin-top: theme("digitv2.spacers.spacer5");
82
85
  }
83
86
  }
84
87
 
@@ -87,19 +90,19 @@
87
90
  min-width: 14rem;
88
91
  max-width: 25rem;
89
92
  width: auto;
90
- padding: theme(digitv2.spacers.spacer3) !important;
93
+ padding: theme("digitv2.spacers.spacer3") !important;
91
94
  }
92
95
 
93
96
  .header-dropdown-search {
94
- height: theme(digitv2.spacers.spacer8) !important;
97
+ height: theme("digitv2.spacers.spacer8") !important;
95
98
  min-width: 12.5rem;
96
99
  max-width: 23.5rem;
97
100
 
98
101
  .digit-text-input-customIcon {
99
- height: theme(digitv2.spacers.spacer5);
100
- width: theme(digitv2.spacers.spacer5);
102
+ height: theme("digitv2.spacers.spacer5");
103
+ width: theme("digitv2.spacers.spacer5");
101
104
  top: 0.4rem;
102
- right: theme(digitv2.spacers.spacer4);
105
+ right: theme("digitv2.spacers.spacer4");
103
106
  }
104
107
 
105
108
  .input-container {
@@ -117,31 +120,31 @@
117
120
  }
118
121
 
119
122
  .header-dropdown-option {
120
- @extend .typography.body-s;
121
- @apply whitespace-no-wrap w-full max-w-full overflow-hidden;
122
- font-family: theme(digitv2.fontFamily.sans);
123
- font-style: theme(digitv2.fontStyle.normal);
124
- font-weight: theme(digitv2.fontWeight.regular);
125
- line-height: theme(digitv2.lineHeight.lineheight2);
123
+ @include typography-body-s;
124
+ @apply whitespace-nowrap w-full max-w-full overflow-hidden;
125
+ font-family: theme("digitv2.fontFamily.sans");
126
+ font-style: theme("digitv2.fontStyle.normal");
127
+ font-weight: theme("digitv2.fontWeight.regular");
128
+ line-height: theme("digitv2.lineHeight.lineheight2");
126
129
 
127
130
  @media (max-aspect-ratio: 9/16) {
128
131
  /* Media query for mobile */
129
- font-size: theme(digitv2.fontSize.body-s.mobile);
132
+ font-size: theme("digitv2.fontSize.body-s.mobile");
130
133
  }
131
134
 
132
135
  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
133
136
  /* Media query for tablets */
134
- font-size: theme(digitv2.fontSize.body-s.tablet);
137
+ font-size: theme("digitv2.fontSize.body-s.tablet");
135
138
  }
136
139
 
137
140
  @media (min-aspect-ratio: 3/4) {
138
141
  /* Media query for desktop */
139
- font-size: theme(digitv2.fontSize.body-s.desktop);
142
+ font-size: theme("digitv2.fontSize.body-s.desktop");
140
143
  }
141
- padding: theme(digitv2.spacers.spacer4) 0.625rem;
142
- color: theme(digitv2.lightTheme.text-primary);
143
- gap: theme(digitv2.spacers.spacer2);
144
- height: theme(digitv2.spacers.spacer10);
144
+ padding: theme("digitv2.spacers.spacer4") 0.625rem;
145
+ color: theme("digitv2.lightTheme.text-primary");
146
+ gap: theme("digitv2.spacers.spacer2");
147
+ height: theme("digitv2.spacers.spacer10");
145
148
  display: flex;
146
149
  align-items: center;
147
150
  word-break: break-word;
@@ -154,80 +157,80 @@
154
157
  }
155
158
 
156
159
  .header-dropdown-option:not(:hover):not(:active):nth-of-type(2n +1) {
157
- background-color: theme(digitv2.lightTheme.paper-secondary);
160
+ background-color: theme("digitv2.lightTheme.paper-secondary");
158
161
  }
159
162
 
160
163
  .header-dropdown-nooption {
161
- @extend .typography.body-s;
162
- font-family: theme(digitv2.fontFamily.sans);
163
- font-style: theme(digitv2.fontStyle.normal);
164
- font-weight: theme(digitv2.fontWeight.regular);
165
- line-height: theme(digitv2.lineHeight.lineheight2);
164
+ @include typography-body-s;
165
+ font-family: theme("digitv2.fontFamily.sans");
166
+ font-style: theme("digitv2.fontStyle.normal");
167
+ font-weight: theme("digitv2.fontWeight.regular");
168
+ line-height: theme("digitv2.lineHeight.lineheight2");
166
169
 
167
170
  @media (max-aspect-ratio: 9/16) {
168
171
  /* Media query for mobile */
169
- font-size: theme(digitv2.fontSize.body-s.mobile);
172
+ font-size: theme("digitv2.fontSize.body-s.mobile");
170
173
  }
171
174
 
172
175
  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
173
176
  /* Media query for tablets */
174
- font-size: theme(digitv2.fontSize.body-s.tablet);
177
+ font-size: theme("digitv2.fontSize.body-s.tablet");
175
178
  }
176
179
 
177
180
  @media (min-aspect-ratio: 3/4) {
178
181
  /* Media query for desktop */
179
- font-size: theme(digitv2.fontSize.body-s.desktop);
182
+ font-size: theme("digitv2.fontSize.body-s.desktop");
180
183
  }
181
- padding: theme(digitv2.spacers.spacer2);
184
+ padding: theme("digitv2.spacers.spacer2");
182
185
  pointer-events: none;
183
- color: theme(digitv2.lightTheme.text-disabled);
184
- background-color: theme(digitv2.lightTheme.paper-secondary);
186
+ color: theme("digitv2.lightTheme.text-disabled");
187
+ background-color: theme("digitv2.lightTheme.paper-secondary");
185
188
  }
186
189
 
187
190
  .header-dropdown-option:hover,
188
191
  .header-dropdown-option.keyChange {
189
- background: theme(digitv2.lightTheme.primary-bg) !important;
190
- border: 0.031rem solid theme(digitv2.lightTheme.primary-1);
192
+ background: theme("digitv2.lightTheme.primary-bg") !important;
193
+ border: 0.031rem solid theme("digitv2.lightTheme.primary-1");
191
194
  }
192
195
 
193
196
  .header-dropdown-option:active,
194
197
  .header-dropdown-option.activeIndex {
195
- @extend .typography.heading-s;
196
- background: theme(digitv2.lightTheme.primary-1) !important;
197
- color: theme(digitv2.lightTheme.paper-primary);
198
+ @include typography-heading-s;
199
+ background: theme("digitv2.lightTheme.primary-1") !important;
200
+ color: theme("digitv2.lightTheme.paper-primary");
198
201
 
199
- font-family: theme(digitv2.fontFamily.sans);
200
- font-style: theme(digitv2.fontStyle.normal);
201
- font-weight: theme(digitv2.fontWeight.bold);
202
- line-height: theme(digitv2.lineHeight.lineheight1);
202
+ font-family: theme("digitv2.fontFamily.sans");
203
+ font-style: theme("digitv2.fontStyle.normal");
204
+ font-weight: theme("digitv2.fontWeight.bold");
205
+ line-height: theme("digitv2.lineHeight.lineheight1");
203
206
 
204
207
  @media (max-aspect-ratio: 9/16) {
205
208
  /* Media query for mobile */
206
- font-size: theme(digitv2.fontSize.heading-s.mobile);
209
+ font-size: theme("digitv2.fontSize.heading-s.mobile");
207
210
  }
208
211
 
209
212
  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
210
213
  /* Media query for tablets */
211
- font-size: theme(digitv2.fontSize.heading-s.tablet);
214
+ font-size: theme("digitv2.fontSize.heading-s.tablet");
212
215
  }
213
216
 
214
217
  @media (min-aspect-ratio: 3/4) {
215
218
  /* Media query for desktop */
216
- font-size: theme(digitv2.fontSize.heading-s.desktop);
219
+ font-size: theme("digitv2.fontSize.heading-s.desktop");
217
220
  }
218
221
  }
219
222
 
220
223
  .header-dropdown-options::-webkit-scrollbar {
221
- width: theme(digitv2.spacers.spacer2);
222
- background-color: theme(digitv2.lightTheme.generic-background);
224
+ width: theme("digitv2.spacers.spacer2");
225
+ background-color: theme("digitv2.lightTheme.generic-background");
223
226
  }
224
227
 
225
228
  .header-dropdown-options::-webkit-scrollbar-track {
226
- background-color: theme(digitv2.lightTheme.generic-background);
229
+ background-color: theme("digitv2.lightTheme.generic-background");
227
230
  border-radius: 0.563rem;
228
231
  }
229
232
 
230
233
  .header-dropdown-options::-webkit-scrollbar-thumb {
231
- background-color: theme(digitv2.lightTheme.generic-divider);
234
+ background-color: theme("digitv2.lightTheme.generic-divider");
232
235
  border-radius: 0.563rem;
233
236
  }
package/src/digitv2/components/infobuttonV2.scss CHANGED
@@ -1,36 +1,39 @@
1
+ @import './theme-variables.css';
2
+ @import '../typography.scss';
3
+
1
4
  .digit-info-button {
2
5
  @apply text-center cursor-pointer outline-none flex max-w-full items-center justify-center h-10;
3
6
  width: fit-content;
4
- padding-left: theme(digitv2.spacers.spacer6);
5
- padding-right: theme(digitv2.spacers.spacer6);
6
- gap: theme(digitv2.spacers.spacer2);
7
+ padding-left: theme("digitv2.spacers.spacer6");
8
+ padding-right: theme("digitv2.spacers.spacer6");
9
+ gap: theme("digitv2.spacers.spacer2");
7
10
  min-width: 6.5625rem;
8
11
 
9
12
  &.info{
10
- background-color: theme(digitv2.lightTheme.alert-info);
13
+ background-color: theme("digitv2.lightTheme.alert-info");
11
14
  }
12
15
 
13
16
  &.error{
14
- background-color: theme(digitv2.lightTheme.alert-error);
17
+ background-color: theme("digitv2.lightTheme.alert-error");
15
18
  }
16
19
 
17
20
  &.success{
18
- background-color: theme(digitv2.lightTheme.alert-success);
21
+ background-color: theme("digitv2.lightTheme.alert-success");
19
22
  }
20
23
 
21
24
  &.warning{
22
- background-color: theme(digitv2.lightTheme.alert-warning);
25
+ background-color: theme("digitv2.lightTheme.alert-warning");
23
26
  }
24
27
 
25
28
  h1 {
26
- @extend .typography.button.large;
29
+ @include typography-button-large;
27
30
  margin: 0;
28
- color: theme(digitv2.lightTheme.paper-primary) !important;
31
+ color: theme("digitv2.lightTheme.paper-primary") !important;
29
32
  }
30
33
 
31
34
  &.disabled {
32
35
  @apply opacity-50;
33
- background: theme(digitv2.lightTheme.text-disabled);
36
+ background: theme("digitv2.lightTheme.text-disabled");
34
37
  }
35
38
 
36
39
  &:focus {
@@ -38,14 +41,14 @@
38
41
  }
39
42
 
40
43
  &:hover {
41
- box-shadow: theme(digitv2.spacers.spacer0) -0.125rem theme(digitv2.spacers.spacer0) theme(digitv2.spacers.spacer0) theme(digitv2.lightTheme.text-primary) inset;
44
+ box-shadow: theme("digitv2.spacers.spacer0") -0.125rem theme("digitv2.spacers.spacer0") theme("digitv2.spacers.spacer0") theme("digitv2.lightTheme.text-primary") inset;
42
45
  }
43
46
 
44
47
  &:active {
45
- box-shadow: theme(digitv2.spacers.spacer0) -0.125rem theme(digitv2.spacers.spacer0) theme(digitv2.spacers.spacer0) #0B0C0C inset, theme(digitv2.spacers.spacer0) 0.063rem 0.175rem theme(digitv2.spacers.spacer0) #00000040;
48
+ box-shadow: theme("digitv2.spacers.spacer0") -0.125rem theme("digitv2.spacers.spacer0") theme("digitv2.spacers.spacer0") #0B0C0C inset, theme("digitv2.spacers.spacer0") 0.063rem 0.175rem theme("digitv2.spacers.spacer0") #00000040;
46
49
 
47
50
  h1{
48
- font-weight: theme(digitv2.fontWeight.bold);
51
+ font-weight: theme("digitv2.fontWeight.bold");
49
52
  }
50
53
  }
51
54
 
@@ -60,7 +63,7 @@
60
63
  @apply h-8;
61
64
 
62
65
  h1{
63
- @extend .typography.button.medium;
66
+ @include typography-button-medium;
64
67
  }
65
68
  }
66
69
 
@@ -68,7 +71,7 @@
68
71
  @apply h-6;
69
72
 
70
73
  h1 {
71
- @extend .typography.button.small;
74
+ @include typography-button-small;
72
75
  }
73
76
  }
74
77