@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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@egovernments/digit-ui-components-css",
3
- "version": "2.0.0-dev-11",
3
+ "version": "2.0.0-dev-12",
4
4
  "license": "MIT",
5
5
  "main": "dist/index.css",
6
6
  "author": "Jagankumar <jagan.kumar@egovernments.org>",
package/src/digitv2/components/FormComposerV2.scss CHANGED
@@ -115,5 +115,5 @@
115
115
  }
116
116
 
117
117
  .digit-form-composer-header {
118
- font-size: theme("digitv2.fontSize.heading-l.desktop");
118
+ font-size: var(--digitv2-fontSize-heading-l-desktop);
119
119
  }
package/src/digitv2/components/alertCardV2.scss CHANGED
@@ -3,18 +3,18 @@
3
3
 
4
4
  .digit-infobanner-wrap {
5
5
  @apply p-md flex flex-col;
6
- top: theme("digitv2.spacers.spacer5");
7
- left: theme("digitv2.spacers.spacer5");
8
- gap: theme("digitv2.spacers.spacer2");
9
- background-color: theme("digitv2.lightTheme.alert-infobg");
6
+ top: var(--digitv2-spacers-spacer5);
7
+ left: var(--digitv2-spacers-spacer5);
8
+ gap: var(--digitv2-spacers-spacer2);
9
+ background-color: var(--digitv2-lightTheme-alert-infobg);
10
10
 
11
- border: 0.063rem solid theme("digitv2.lightTheme.alert-info");
12
- border-left-width: theme("digitv2.spacers.spacer1");
11
+ border: 0.063rem solid var(--digitv2-lightTheme-alert-info);
12
+ border-left-width: var(--digitv2-spacers-spacer1);
13
13
 
14
14
  div {
15
15
  @apply flex;
16
- gap: theme("digitv2.spacers.spacer2");
17
- min-height: theme("digitv2.spacers.spacer6");
16
+ gap: var(--digitv2-spacers-spacer2);
17
+ min-height: var(--digitv2-spacers-spacer6);
18
18
 
19
19
  svg {
20
20
  flex-shrink: 0;
@@ -23,63 +23,63 @@
23
23
 
24
24
  .digit-infobanner-header {
25
25
  @apply w-full max-w-full overflow-hidden text-left;
26
- font-family: theme("digitv2.fontFamily.sans");
27
- font-weight: theme("digitv2.fontWeight.bold");
28
- color: theme("digitv2.lightTheme.alert-info");
29
- font-size: theme("digitv2.spacers.spacer4");
26
+ font-family: var(--digitv2-fontFamily-sans);
27
+ font-weight: var(--digitv2-fontWeight-bold);
28
+ color: var(--digitv2-lightTheme-alert-info);
29
+ font-size: var(--digitv2-spacers-spacer4);
30
30
  line-height: 1.172rem;
31
- letter-spacing: theme("digitv2.spacers.spacer0");
32
- margin: 0.164rem theme("digitv2.spacers.spacer0");
31
+ letter-spacing: var(--digitv2-spacers-spacer0);
32
+ margin: 0.164rem var(--digitv2-spacers-spacer0);
33
33
  white-space: normal;
34
34
  word-break: break-word;
35
35
  }
36
36
 
37
37
  p {
38
38
  @apply whitespace-pre-line text-left;
39
- font-weight: theme("digitv2.fontWeight.regular");
40
- color: theme("digitv2.lightTheme.text-secondary");
41
- font-style: theme("digitv2.fontStyle.normal");
42
- font-family: theme("digitv2.fontFamily.sans");
39
+ font-weight: var(--digitv2-fontWeight-regular);
40
+ color: var(--digitv2-lightTheme-text-secondary);
41
+ font-style: var(--digitv2-fontStyle-normal);
42
+ font-family: var(--digitv2-fontFamily-sans);
43
43
  font-size: 0.875rem;
44
- line-height: theme("digitv2.spacers.spacer5");
45
- letter-spacing: theme("digitv2.spacers.spacer0");
46
- margin: theme("digitv2.spacers.spacer0");
44
+ line-height: var(--digitv2-spacers-spacer5);
45
+ letter-spacing: var(--digitv2-spacers-spacer0);
46
+ margin: var(--digitv2-spacers-spacer0);
47
47
  }
48
48
 
49
49
  &.digit-core-variant {
50
- margin: theme("digitv2.spacers.spacer8") theme("digitv2.spacers.spacer0");
50
+ margin: var(--digitv2-spacers-spacer8) var(--digitv2-spacers-spacer0);
51
51
  padding: 0.625rem;
52
52
  background-color: #ffe2b5;
53
- border-radius: theme("digitv2.spacers.spacer1");
53
+ border-radius: var(--digitv2-spacers-spacer1);
54
54
  }
55
55
 
56
56
  &.success {
57
- background-color: theme("digitv2.lightTheme.alert-successbg");
58
- border: 0.063rem solid theme("digitv2.lightTheme.alert-success");
59
- border-left-width: theme("digitv2.spacers.spacer1");
57
+ background-color: var(--digitv2-lightTheme-alert-successbg);
58
+ border: 0.063rem solid var(--digitv2-lightTheme-alert-success);
59
+ border-left-width: var(--digitv2-spacers-spacer1);
60
60
 
61
61
  .digit-infobanner-header{
62
- color: theme("digitv2.lightTheme.alert-success");
62
+ color: var(--digitv2-lightTheme-alert-success);
63
63
  }
64
64
  }
65
65
 
66
66
  &.warning {
67
- background-color: theme("digitv2.lightTheme.alert-warning-bg");
68
- border: 0.063rem solid theme("digitv2.lightTheme.alert-warning");
69
- border-left-width: theme("digitv2.spacers.spacer1");
67
+ background-color: var(--digitv2-lightTheme-alert-warning-bg);
68
+ border: 0.063rem solid var(--digitv2-lightTheme-alert-warning);
69
+ border-left-width: var(--digitv2-spacers-spacer1);
70
70
 
71
71
  .digit-infobanner-header{
72
- color: theme("digitv2.lightTheme.alert-warning");
72
+ color: var(--digitv2-lightTheme-alert-warning);
73
73
  }
74
74
  }
75
75
 
76
76
  &.error {
77
- background-color: theme("digitv2.lightTheme.alert-errorbg");
78
- border: 0.063rem solid theme("digitv2.lightTheme.alert-error");
79
- border-left-width: theme("digitv2.spacers.spacer1");
77
+ background-color: var(--digitv2-lightTheme-alert-errorbg);
78
+ border: 0.063rem solid var(--digitv2-lightTheme-alert-error);
79
+ border-left-width: var(--digitv2-spacers-spacer1);
80
80
 
81
81
  .digit-infobanner-header{
82
- color: theme("digitv2.lightTheme.alert-error");
82
+ color: var(--digitv2-lightTheme-alert-error);
83
83
  }
84
84
  }
85
85
 
@@ -108,26 +108,26 @@
108
108
 
109
109
  .additional-elements-inline {
110
110
  @apply flex flex-wrap items-start;
111
- gap: theme("digitv2.spacers.spacer2");
111
+ gap: var(--digitv2-spacers-spacer2);
112
112
 
113
113
  .individualElement{
114
114
  h2{
115
- margin: theme("digitv2.spacers.spacer0");
116
- color: theme("digitv2.lightTheme.text-primary");
115
+ margin: var(--digitv2-spacers-spacer0);
116
+ color: var(--digitv2-lightTheme-text-primary);
117
117
  }
118
118
  }
119
119
  }
120
120
 
121
121
  .additional-elements-column {
122
122
  @apply flex flex-col items-start;
123
- gap: theme("digitv2.spacers.spacer2");
123
+ gap: var(--digitv2-spacers-spacer2);
124
124
 
125
125
  .individualElement {
126
126
  @apply w-full max-w-full;
127
127
 
128
128
  h2{
129
- margin: theme("digitv2.spacers.spacer0");
130
- color: theme("digitv2.lightTheme.text-primary");
129
+ margin: var(--digitv2-spacers-spacer0);
130
+ color: var(--digitv2-lightTheme-text-primary);
131
131
  }
132
132
 
133
133
  }
package/src/digitv2/components/backLinkV2.scss CHANGED
@@ -2,26 +2,26 @@
2
2
  @import '../typography.scss';
3
3
 
4
4
  .digit-back-link {
5
- gap: theme("digitv2.spacers.spacer1");
5
+ gap: var(--digitv2-spacers-spacer1);
6
6
  display: flex;
7
7
  align-items: center;
8
8
 
9
9
  .digit-back-link-icon {
10
10
  flex-shrink: 0;
11
- width: theme("digitv2.spacers.spacer6");
12
- height: theme("digitv2.spacers.spacer6");
11
+ width: var(--digitv2-spacers-spacer6);
12
+ height: var(--digitv2-spacers-spacer6);
13
13
  cursor: pointer;
14
14
 
15
15
  @media (max-width: 30rem) {
16
- width: theme("digitv2.spacers.spacer5");
17
- height: theme("digitv2.spacers.spacer5");
16
+ width: var(--digitv2-spacers-spacer5);
17
+ height: var(--digitv2-spacers-spacer5);
18
18
  }
19
19
 
20
20
  }
21
21
 
22
22
  .digit-back-link-label {
23
23
  @include typography-body-l;
24
- color: theme("digitv2.lightTheme.primary-2");
24
+ color: var(--digitv2-lightTheme-primary-2);
25
25
  margin-top:0.063rem;
26
26
  cursor: pointer;
27
27
  }
@@ -29,7 +29,7 @@
29
29
  &.disabled{
30
30
  pointer-events: none;
31
31
  .digit-back-link-label{
32
- color: theme("digitv2.lightTheme.text-disabled");
32
+ color: var(--digitv2-lightTheme-text-disabled);
33
33
  cursor: default;
34
34
  }
35
35
 
package/src/digitv2/components/bottomSheetV2.scss CHANGED
@@ -7,15 +7,15 @@
7
7
  right: 0;
8
8
  bottom: 0;
9
9
  transition: height 0.3s ease;
10
- background-color: theme("digitv2.lightTheme.paper-primary");
11
- box-shadow: theme("digitv2.spacers.spacer0") -0.063rem theme("digitv2.spacers.spacer1") -0.063rem #00000026;
10
+ background-color: var(--digitv2-lightTheme-paper-primary);
11
+ box-shadow: var(--digitv2-spacers-spacer0) -0.063rem var(--digitv2-spacers-spacer1) -0.063rem #00000026;
12
12
  overflow: hidden;
13
- border-radius: theme("digitv2.spacers.spacer3") theme("digitv2.spacers.spacer3") theme("digitv2.spacers.spacer0") theme("digitv2.spacers.spacer0");
13
+ border-radius: var(--digitv2-spacers-spacer3) var(--digitv2-spacers-spacer3) var(--digitv2-spacers-spacer0) var(--digitv2-spacers-spacer0);
14
14
  display: flex;
15
15
  flex-direction: column;
16
16
 
17
17
  &.full {
18
- border-radius: theme("digitv2.spacers.spacer0");
18
+ border-radius: var(--digitv2-spacers-spacer0);
19
19
  }
20
20
  }
21
21
 
@@ -28,10 +28,10 @@
28
28
  .digit-bottom-sheet-header {
29
29
  display: flex;
30
30
  justify-content: center;
31
- height: theme("digitv2.spacers.spacer10");
31
+ height: var(--digitv2-spacers-spacer10);
32
32
 
33
33
  &.actionsEnabled {
34
- height: theme("digitv2.spacers.spacer6");
34
+ height: var(--digitv2-spacers-spacer6);
35
35
  }
36
36
  }
37
37
 
@@ -49,9 +49,9 @@
49
49
  .digit-bottom-sheet-handle-indicator {
50
50
  width: 6.25rem;
51
51
  height: 0.375rem;
52
- border-radius: theme("digitv2.spacers.spacer1");
52
+ border-radius: var(--digitv2-spacers-spacer1);
53
53
  background-color: #D9D9D9;
54
- margin: theme("digitv2.spacers.spacer2") theme("digitv2.spacers.spacer0");
54
+ margin: var(--digitv2-spacers-spacer2) var(--digitv2-spacers-spacer0);
55
55
  }
56
56
 
57
57
  .digit-bottom-sheet-header{
@@ -63,32 +63,32 @@
63
63
  }
64
64
 
65
65
  .digit-bottom-sheet-content {
66
- padding: theme("digitv2.spacers.spacer4");
66
+ padding: var(--digitv2-spacers-spacer4);
67
67
  overflow-y: scroll;
68
68
  display: flex;
69
69
  flex-direction: column;
70
70
  height: 100%;
71
71
 
72
72
  @media (max-aspect-ratio: 9/16) {
73
- gap: theme("digitv2.spacers.spacer4");
73
+ gap: var(--digitv2-spacers-spacer4);
74
74
  }
75
75
 
76
76
  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
77
- gap: theme("digitv2.spacers.spacer5");
77
+ gap: var(--digitv2-spacers-spacer5);
78
78
  }
79
79
 
80
80
  @media (min-aspect-ratio: 3/4) {
81
- gap: theme("digitv2.spacers.spacer6");
81
+ gap: var(--digitv2-spacers-spacer6);
82
82
  }
83
83
  }
84
84
 
85
85
  .digit-bottom-sheet-actions {
86
- padding: theme("digitv2.spacers.spacer4");
86
+ padding: var(--digitv2-spacers-spacer4);
87
87
  display: flex;
88
- gap: theme("digitv2.spacers.spacer6");
88
+ gap: var(--digitv2-spacers-spacer6);
89
89
  background-color: #FFFFFF;
90
- box-shadow: theme("digitv2.spacers.spacer0") 0.063rem 0.188rem 0.063rem #00000026;
91
- box-shadow: theme("digitv2.spacers.spacer0") 0.063rem 0.125rem theme("digitv2.spacers.spacer0") #0000004D;
90
+ box-shadow: var(--digitv2-spacers-spacer0) 0.063rem 0.188rem 0.063rem #00000026;
91
+ box-shadow: var(--digitv2-spacers-spacer0) 0.063rem 0.125rem var(--digitv2-spacers-spacer0) #0000004D;
92
92
  justify-content: flex-end;
93
93
 
94
94
  &.equalButtons {
@@ -110,15 +110,15 @@
110
110
 
111
111
  .digit-bottom-sheet-content::-webkit-scrollbar {
112
112
  width: 0.375rem;
113
- background-color: theme("digitv2.lightTheme.generic-background");
113
+ background-color: var(--digitv2-lightTheme-generic-background);
114
114
  }
115
115
 
116
116
  .digit-bottom-sheet-content::-webkit-scrollbar-track {
117
- background-color: theme("digitv2.lightTheme.generic-background");
117
+ background-color: var(--digitv2-lightTheme-generic-background);
118
118
  border-radius: 0.563rem;
119
119
  }
120
120
 
121
121
  .digit-bottom-sheet-content::-webkit-scrollbar-thumb {
122
- background-color: theme("digitv2.lightTheme.generic-divider");
122
+ background-color: var(--digitv2-lightTheme-generic-divider);
123
123
  border-radius: 0.563rem;
124
124
  }
package/src/digitv2/components/breadcrumbV2.scss CHANGED
@@ -5,14 +5,14 @@
5
5
 
6
6
  .digit-bread-crumb {
7
7
  display: flex;
8
- gap: theme("digitv2.spacers.spacer2");
8
+ gap: var(--digitv2-spacers-spacer2);
9
9
  height: 1.375rem;
10
10
  padding: unset;
11
11
  }
12
12
 
13
13
  .digit-bread-crumb--item {
14
14
  display: flex;
15
- gap: theme("digitv2.spacers.spacer2");
15
+ gap: var(--digitv2-spacers-spacer2);
16
16
 
17
17
 
18
18
  button {
@@ -22,36 +22,36 @@
22
22
 
23
23
  .digit-bread-crumb-content {
24
24
  @include typography-body-s;
25
- font-family: theme("digitv2.fontFamily.sans");
26
- font-style: theme("digitv2.fontStyle.normal");
27
- font-weight: theme("digitv2.fontWeight.regular");
28
- line-height: theme("digitv2.lineHeight.lineheight2");
25
+ font-family: var(--digitv2-fontFamily-sans);
26
+ font-style: var(--digitv2-fontStyle-normal);
27
+ font-weight: var(--digitv2-fontWeight-regular);
28
+ line-height: var(--digitv2-lineHeight-lineheight2);
29
29
 
30
30
  @media (max-aspect-ratio: 9/16) {
31
31
  /* Media query for mobile */
32
- font-size: theme("digitv2.fontSize.body-s.mobile");
32
+ font-size: var( --digitv2-fontSize-body-s-mobile);
33
33
  }
34
34
 
35
35
  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
36
36
  /* Media query for tablets */
37
- font-size: theme("digitv2.fontSize.body-s.tablet");
37
+ font-size: var( --digitv2-fontSize-body-s-tablet);
38
38
  }
39
39
 
40
40
  @media (min-aspect-ratio: 3/4) {
41
41
  /* Media query for desktop */
42
- font-size: theme("digitv2.fontSize.body-s.desktop");
42
+ font-size: var( --digitv2-fontSize-body-s-desktop);
43
43
  }
44
44
  display: flex !important;
45
- gap: theme("digitv2.spacers.spacer1");
45
+ gap: var(--digitv2-spacers-spacer1);
46
46
  cursor: pointer;
47
47
  text-decoration: none;
48
48
 
49
49
  svg {
50
- width: theme("digitv2.spacers.spacer5");
51
- height: theme("digitv2.spacers.spacer5");
50
+ width: var(--digitv2-spacers-spacer5);
51
+ height: var(--digitv2-spacers-spacer5);
52
52
  }
53
53
 
54
- color: theme("digitv2.lightTheme.primary-1");
54
+ color: var(--digitv2-lightTheme-primary-1);
55
55
 
56
56
  &:hover {
57
57
  text-decoration: underline;
@@ -65,26 +65,26 @@
65
65
  .digit-bread-crumb-content.current,
66
66
  .digit-bread-crumb-seperator {
67
67
  @include typography-body-s;
68
- font-family: theme("digitv2.fontFamily.sans");
69
- font-style: theme("digitv2.fontStyle.normal");
70
- font-weight: theme("digitv2.fontWeight.regular");
71
- line-height: theme("digitv2.lineHeight.lineheight2");
68
+ font-family: var(--digitv2-fontFamily-sans);
69
+ font-style: var(--digitv2-fontStyle-normal);
70
+ font-weight: var(--digitv2-fontWeight-regular);
71
+ line-height: var(--digitv2-lineHeight-lineheight2);
72
72
 
73
73
  @media (max-aspect-ratio: 9/16) {
74
74
  /* Media query for mobile */
75
- font-size: theme("digitv2.fontSize.body-s.mobile");
75
+ font-size: var( --digitv2-fontSize-body-s-mobile);
76
76
  }
77
77
 
78
78
  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
79
79
  /* Media query for tablets */
80
- font-size: theme("digitv2.fontSize.body-s.tablet");
80
+ font-size: var( --digitv2-fontSize-body-s-tablet);
81
81
  }
82
82
 
83
83
  @media (min-aspect-ratio: 3/4) {
84
84
  /* Media query for desktop */
85
- font-size: theme("digitv2.fontSize.body-s.desktop");
85
+ font-size: var( --digitv2-fontSize-body-s-desktop);
86
86
  }
87
- color: theme("digitv2.lightTheme.text-secondary");
87
+ color: var(--digitv2-lightTheme-text-secondary);
88
88
  text-decoration: none;
89
89
  cursor: default;
90
90
  }
package/src/digitv2/components/cardV2.scss CHANGED
@@ -336,7 +336,7 @@
336
336
 
337
337
  .digit-card-section-header {
338
338
  @apply text-heading-m font-bold;
339
- color: theme("digitv2.lightTheme.text-primary");
339
+ color: var(--digitv2-lightTheme-text-primary);
340
340
  }
341
341
 
342
342
  .digit-card-search-heading {
@@ -390,16 +390,16 @@
390
390
 
391
391
  width: 100%;
392
392
  height: auto;
393
- background-color: theme("digitv2.lightTheme.paper-primary");
393
+ background-color: var(--digitv2-lightTheme-paper-primary);
394
394
  border-radius: var(--digitv2-borderRadius-radius5);
395
395
  box-shadow: 0rem 0.063rem 0.125rem 0rem #00000029;
396
396
  display: flex;
397
- gap: theme("digitv2.spacers.spacer4");
397
+ gap: var(--digitv2-spacers-spacer4);
398
398
  flex-direction: column;
399
399
 
400
400
  &.secondary {
401
- background-color: theme("digitv2.lightTheme.paper-secondary");
402
- border: 0.063em solid theme("digitv2.lightTheme.generic-divider");
401
+ background-color: var(--digitv2-lightTheme-paper-secondary);
402
+ border: 0.063em solid var(--digitv2-lightTheme-generic-divider);
403
403
  }
404
404
 
405
405
  &.secondary.search,
@@ -461,20 +461,20 @@
461
461
  }
462
462
 
463
463
  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
464
- padding: theme("digitv2.spacers.spacer5");
464
+ padding: var(--digitv2-spacers-spacer5);
465
465
  }
466
466
 
467
467
  @media (min-aspect-ratio: 3/4) {
468
- padding: theme("digitv2.spacers.spacer6");
468
+ padding: var(--digitv2-spacers-spacer6);
469
469
  }
470
470
 
471
471
  @media (max-aspect-ratio: 9/16) {
472
- padding: theme("digitv2.spacers.spacer4");
472
+ padding: var(--digitv2-spacers-spacer4);
473
473
  }
474
474
 
475
475
  &.action {
476
- padding: theme("digitv2.spacers.spacer6");
477
- gap: theme("digitv2.spacers.spacer6");
476
+ padding: var(--digitv2-spacers-spacer6);
477
+ gap: var(--digitv2-spacers-spacer6);
478
478
 
479
479
  button {
480
480
  width: 100%;
@@ -484,7 +484,7 @@
484
484
  &.summarycard{
485
485
 
486
486
  .digit-text-block-wrap .digit-text-block-header-content .digit-text-block-subheader{
487
- color: theme("digitv2.lightTheme.primary-2");
487
+ color: var(--digitv2-lightTheme-primary-2);
488
488
  }
489
489
  }
490
490
 
@@ -499,7 +499,7 @@
499
499
  }
500
500
  }
501
501
  .titleStyle{
502
- color: theme("digitv2.lightTheme.primary-2");
503
- font-weight: theme("digitv2.fontWeight.bold");
504
- font-size: theme("digitv2.spacers.spacer10");
502
+ color: var(--digitv2-lightTheme-primary-2);
503
+ font-weight: var(--digitv2-fontWeight-bold);
504
+ font-size: var(--digitv2-spacers-spacer10);
505
505
  }
package/src/digitv2/components/cardlabelV2.scss CHANGED
@@ -2,8 +2,8 @@
2
2
  @import '../typography.scss';
3
3
 
4
4
  .digit-card-label {
5
- font-weight: theme("digitv2.fontWeight.regular");
5
+ font-weight: var(--digitv2-fontWeight-regular);
6
6
  font-size: 16px;
7
7
  line-height: 19px;
8
- color: theme("digitv2.lightTheme.text-primary");
8
+ color: var(--digitv2-lightTheme-text-primary);
9
9
  }