@egovernments/digit-ui-components-css 2.0.0-dev-10 → 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 +166 -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 +191 -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 +93 -90
  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 +22 -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/checkboxV2.scss CHANGED
@@ -3,13 +3,13 @@
3
3
 
4
4
  .digit-checkbox-container {
5
5
  @apply flex mb-md relative;
6
- gap: theme("digitv2.spacers.spacer4");
6
+ gap: var(--digitv2-spacers-spacer4);
7
7
 
8
8
  input {
9
9
  @apply opacity-0 absolute cursor-pointer z-10;
10
10
  @extend .light-input-border;
11
- width: theme("digitv2.spacers.spacer8");
12
- height: theme("digitv2.spacers.spacer8");
11
+ width: var(--digitv2-spacers-spacer8);
12
+ height: var(--digitv2-spacers-spacer8);
13
13
  left: -15%;
14
14
  }
15
15
 
@@ -19,8 +19,8 @@
19
19
 
20
20
  .digit-custom-checkbox {
21
21
  @apply flex items-center border border-solid border-text-secondary justify-center;
22
- width: theme("digitv2.spacers.spacer6");
23
- height: theme("digitv2.spacers.spacer6");
22
+ width: var(--digitv2-spacers-spacer6);
23
+ height: var(--digitv2-spacers-spacer6);
24
24
  border: 1px solid #505A5F;
25
25
 
26
26
  img,
@@ -34,11 +34,11 @@
34
34
 
35
35
  &:hover {
36
36
  @apply border-2;
37
- border-color: theme("digitv2.lightTheme.primary-1");
37
+ border-color: var(--digitv2-lightTheme-primary-1);
38
38
  }
39
39
 
40
40
  &.intermediate {
41
- border: 0.125rem solid theme("digitv2.lightTheme.primary-1");
41
+ border: 0.125rem solid var(--digitv2-lightTheme-primary-1);
42
42
  }
43
43
  }
44
44
 
@@ -48,15 +48,15 @@
48
48
 
49
49
  input:hover~.digit-custom-checkbox {
50
50
  @apply border-2;
51
- border-color: theme("digitv2.lightTheme.primary-1");
51
+ border-color: var(--digitv2-lightTheme-primary-1);
52
52
  }
53
53
 
54
54
  input:hover~.digit-custom-checkbox.intermediate{
55
- border: 0.125rem solid theme("digitv2.lightTheme.primary-1");
55
+ border: 0.125rem solid var(--digitv2-lightTheme-primary-1);
56
56
  }
57
57
 
58
58
  input:checked~.digit-custom-checkbox {
59
- border: 0.125rem solid theme("digitv2.lightTheme.primary-1");
59
+ border: 0.125rem solid var(--digitv2-lightTheme-primary-1);
60
60
  }
61
61
 
62
62
 
@@ -66,69 +66,79 @@
66
66
 
67
67
  input:checked~.digit-custom-checkbox svg {
68
68
  @apply opacity-100;
69
- width: theme("digitv2.spacers.spacer4");
70
- height: theme("digitv2.spacers.spacer4");
69
+ width: var(--digitv2-spacers-spacer4);
70
+ height: var(--digitv2-spacers-spacer4);
71
71
  }
72
72
 
73
73
  .intermediate-square {
74
- width: theme("digitv2.spacers.spacer4");
75
- height: theme("digitv2.spacers.spacer4");
76
- background-color: theme("digitv2.lightTheme.primary-1");
74
+ width: var(--digitv2-spacers-spacer4);
75
+ height: var(--digitv2-spacers-spacer4);
76
+ background-color: var(--digitv2-lightTheme-primary-1);
77
77
  display: block;
78
78
  }
79
79
 
80
80
  .label {
81
81
  @include typography-body-s;
82
- font-family: theme("digitv2.fontFamily.sans");
83
- font-style: theme("digitv2.fontStyle.normal");
84
- font-weight: theme("digitv2.fontWeight.regular");
85
- line-height: theme("digitv2.lineHeight.lineheight2");
82
+ font-family: var(--digitv2-fontFamily-sans);
83
+ font-style: var(--digitv2-fontStyle-normal);
84
+ font-weight: var(--digitv2-fontWeight-regular);
85
+ line-height: var(--digitv2-lineHeight-lineheight2);
86
86
 
87
87
  @media (max-aspect-ratio: 9/16) {
88
88
  /* Media query for mobile */
89
- font-size: theme("digitv2.fontSize.body-s.mobile");
89
+ font-size: var( --digitv2-fontSize-body-s-mobile);
90
90
  }
91
91
 
92
92
  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
93
93
  /* Media query for tablets */
94
- font-size: theme("digitv2.fontSize.body-s.tablet");
94
+ font-size: var( --digitv2-fontSize-body-s-tablet);
95
95
  }
96
96
 
97
97
  @media (min-aspect-ratio: 3/4) {
98
98
  /* Media query for desktop */
99
- font-size: theme("digitv2.fontSize.body-s.desktop");
99
+ font-size: var( --digitv2-fontSize-body-s-desktop);
100
100
  }
101
101
 
102
102
  @apply text-left;
103
103
  word-break: break-word;
104
- letter-spacing: theme("digitv2.spacers.spacer0");
105
- color: theme("digitv2.lightTheme.text-primary") !important;
104
+ letter-spacing: var(--digitv2-spacers-spacer0);
105
+ color: var(--digitv2-lightTheme-text-primary) !important;
106
106
  display: flex;
107
107
  align-items: center;
108
108
  }
109
109
 
110
110
  &.disabled {
111
111
  .digit-custom-checkbox {
112
- border: 0.063rem solid theme("digitv2.lightTheme.text-disabled");
112
+ border: 0.063rem solid var(--digitv2-lightTheme-text-disabled);
113
113
  }
114
114
 
115
115
  input:checked~.digit-custom-checkbox {
116
- border: 0.125rem solid theme("digitv2.lightTheme.text-disabled");
116
+ border: 0.125rem solid var(--digitv2-lightTheme-text-disabled);
117
117
  }
118
118
 
119
119
  .digit-custom-checkbox.intermediate{
120
- border: 0.125rem solid theme("digitv2.lightTheme.text-disabled");
120
+ border: 0.125rem solid var(--digitv2-lightTheme-text-disabled);
121
121
  }
122
122
 
123
123
  .intermediate-square {
124
- width: theme("digitv2.spacers.spacer4");
125
- height: theme("digitv2.spacers.spacer4");
126
- background-color: theme("digitv2.lightTheme.text-disabled");
124
+ width: var(--digitv2-spacers-spacer4);
125
+ height: var(--digitv2-spacers-spacer4);
126
+ background-color: var(--digitv2-lightTheme-text-disabled);
127
127
  display: block;
128
128
  }
129
129
  }
130
130
 
131
131
  &.noMargin{
132
- margin-bottom: theme("digitv2.spacers.spacer0");
132
+ margin-bottom: var(--digitv2-spacers-spacer0);
133
133
  }
134
+ }
135
+
136
+ .digit-custom-checkbox{
137
+ &.digit-custom-checkbox-emp{
138
+ border-radius: 4px !important;
139
+ }
140
+ }
141
+
142
+ .digit-custom-checkbox{
143
+ border-radius: 4px !important;
134
144
  }
package/src/digitv2/components/chipV2.scss CHANGED
@@ -3,13 +3,13 @@
3
3
 
4
4
  .digit-tag-error-container {
5
5
  @apply flex flex-col max-w-full;
6
- gap: theme("digitv2.spacers.spacer1");
6
+ gap: var(--digitv2-spacers-spacer1);
7
7
  }
8
8
 
9
9
  .digit-tag-container {
10
10
  @apply flex flex-wrap mb-md items-center;
11
- gap: theme("digitv2.spacers.spacer2");
12
- margin-top: theme("digitv2.spacers.spacer2");
11
+ gap: var(--digitv2-spacers-spacer2);
12
+ margin-top: var(--digitv2-spacers-spacer2);
13
13
 
14
14
  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
15
15
  /* Media query for tablets */
@@ -31,21 +31,21 @@
31
31
 
32
32
  .digit-tag {
33
33
  @apply inline-flex items-center h-10 w-full max-w-full;
34
- padding: theme("digitv2.spacers.spacer2");
35
- gap: theme("digitv2.spacers.spacer2");
36
- border-radius: theme("digitv2.spacers.spacer1");
37
- background: theme("digitv2.lightTheme.generic-background");
38
- margin: theme("digitv2.spacers.spacer0");
39
- border: 0.063rem solid theme("digitv2.lightTheme.generic-divider");
34
+ padding: var(--digitv2-spacers-spacer2);
35
+ gap: var(--digitv2-spacers-spacer2);
36
+ border-radius: var(--digitv2-spacers-spacer1);
37
+ background: var(--digitv2-lightTheme-generic-background);
38
+ margin: var(--digitv2-spacers-spacer0);
39
+ border: 0.063rem solid var(--digitv2-lightTheme-generic-divider);
40
40
 
41
41
  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
42
42
  /* Media query for tablets */
43
- height: theme("digitv2.spacers.spacer9");
43
+ height: var(--digitv2-spacers-spacer9);
44
44
  }
45
45
 
46
46
  @media (max-aspect-ratio: 9/16) {
47
47
  /* Media query for mobile */
48
- height: theme("digitv2.spacers.spacer9");
48
+ height: var(--digitv2-spacers-spacer9);
49
49
  }
50
50
 
51
51
 
@@ -60,51 +60,51 @@
60
60
  .digit-text {
61
61
  @include typography-body-xs;
62
62
  @apply overflow-hidden items-center whitespace-nowrap;
63
- font-family: theme("digitv2.fontFamily.sans");
64
- font-style: theme("digitv2.fontStyle.normal");
65
- font-weight: theme("digitv2.fontWeight.regular");
66
- line-height: theme("digitv2.lineHeight.lineheight2");
63
+ font-family: var(--digitv2-fontFamily-sans);
64
+ font-style: var(--digitv2-fontStyle-normal);
65
+ font-weight: var(--digitv2-fontWeight-regular);
66
+ line-height: var(--digitv2-lineHeight-lineheight2);
67
67
 
68
68
  @media (max-aspect-ratio: 9/16) {
69
69
  /* Media query for mobile */
70
- font-size: theme("digitv2.fontSize.body-xs.mobile");
70
+ font-size: var(--digitv2-fontSize-body-xs-mobile);
71
71
  }
72
72
 
73
73
  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
74
74
  /* Media query for tablets */
75
- font-size: theme("digitv2.fontSize.body-xs.tablet");
75
+ font-size: var(--digitv2-fontSize-body-xs-tablet);
76
76
  }
77
77
 
78
78
  @media (min-aspect-ratio: 3/4) {
79
79
  /* Media query for desktop */
80
- font-size: theme("digitv2.fontSize.body-xs.desktop");
80
+ font-size: var(--digitv2-fontSize-body-xs-desktop);
81
81
  }
82
- max-width: calc(100% - (theme("digitv2.spacers.spacer7")));
83
- width: calc(100% - (theme("digitv2.spacers.spacer7")));
82
+ max-width: calc(100% - (var(--digitv2-spacers-spacer7)));
83
+ width: calc(100% - (var(--digitv2-spacers-spacer7)));
84
84
  text-overflow: clip;
85
- color: theme("digitv2.lightTheme.text-primary");
85
+ color: var(--digitv2-lightTheme-text-primary);
86
86
  display: flex;
87
87
  text-overflow: ellipsis;
88
88
  }
89
89
 
90
90
  .close-icon {
91
91
  @apply items-center w-6 h-6 cursor-pointer flex-shrink-0;
92
- border: 0.063rem solid theme("digitv2.lightTheme.text-secondary");
93
- border-radius: theme("digitv2.spacers.spacer1");
94
- background-color: theme("digitv2.lightTheme.text-secondary");
92
+ border: 0.063rem solid var(--digitv2-lightTheme-text-secondary);
93
+ border-radius: var(--digitv2-spacers-spacer1);
94
+ background-color: var(--digitv2-lightTheme-text-secondary);
95
95
  display: flex !important;
96
96
  justify-content: center;
97
97
 
98
98
  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
99
99
  /* Media query for tablets */
100
- height: theme("digitv2.spacers.spacer5");
101
- width: theme("digitv2.spacers.spacer5");
100
+ height: var(--digitv2-spacers-spacer5);
101
+ width: var(--digitv2-spacers-spacer5);
102
102
  }
103
103
 
104
104
  @media (max-aspect-ratio: 9/16) {
105
105
  /* Media query for mobile */
106
- height: theme("digitv2.spacers.spacer5");
107
- width: theme("digitv2.spacers.spacer5");
106
+ height: var(--digitv2-spacers-spacer5);
107
+ width: var(--digitv2-spacers-spacer5);
108
108
  }
109
109
 
110
110
  &.disabled{
@@ -113,38 +113,38 @@
113
113
 
114
114
  svg{
115
115
  @apply items-center flex-shrink-0;
116
- width: theme("digitv2.spacers.spacer6");
117
- height: theme("digitv2.spacers.spacer6");
116
+ width: var(--digitv2-spacers-spacer6);
117
+ height: var(--digitv2-spacers-spacer6);
118
118
  display: flex !important;
119
119
  justify-content: center;
120
120
 
121
121
  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
122
122
  /* Media query for tablets */
123
- height: theme("digitv2.spacers.spacer5");
124
- width: theme("digitv2.spacers.spacer5");
123
+ height: var(--digitv2-spacers-spacer5);
124
+ width: var(--digitv2-spacers-spacer5);
125
125
  }
126
126
 
127
127
  @media (max-aspect-ratio: 9/16) {
128
128
  /* Media query for mobile */
129
- height: theme("digitv2.spacers.spacer5");
130
- width: theme("digitv2.spacers.spacer5");
129
+ height: var(--digitv2-spacers-spacer5);
130
+ width: var(--digitv2-spacers-spacer5);
131
131
  }
132
132
  }
133
133
  }
134
134
 
135
135
  &.errortag {
136
- border: 0.063rem solid theme("digitv2.lightTheme.alert-error");
137
- background-color: theme("digitv2.lightTheme.paper-primary");
138
- box-shadow: 0.125rem 0.125rem theme("digitv2.spacers.spacer1") theme("digitv2.spacers.spacer0") #D4351C4D;
136
+ border: 0.063rem solid var(--digitv2-lightTheme-alert-error);
137
+ background-color: var(--digitv2-lightTheme-paper-primary);
138
+ box-shadow: 0.125rem 0.125rem var(--digitv2-spacers-spacer1) var(--digitv2-spacers-spacer0) #D4351C4D;
139
139
 
140
140
  .digit-text {
141
141
  @include typography-heading-xs;
142
- color: theme("digitv2.lightTheme.alert-error");
142
+ color: var(--digitv2-lightTheme-alert-error);
143
143
  }
144
144
 
145
145
  .close-icon {
146
- border: 0.063rem solid theme("digitv2.lightTheme.alert-error");
147
- background-color: theme("digitv2.lightTheme.alert-error");
146
+ border: 0.063rem solid var(--digitv2-lightTheme-alert-error);
147
+ background-color: var(--digitv2-lightTheme-alert-error);
148
148
  }
149
149
  }
150
150
  }
package/src/digitv2/components/dividerV2.scss CHANGED
@@ -2,15 +2,15 @@
2
2
  @import '../typography.scss';
3
3
 
4
4
  .digit-divider {
5
- border: theme("digitv2.divider.dividerS");
5
+ border: var(--digitv2-divider-dividerS);
6
6
  width: 100%;
7
- margin: theme("digitv2.spacers.spacer0");
7
+ margin: var(--digitv2-spacers-spacer0);
8
8
 
9
9
  &.medium {
10
- border: theme("digitv2.divider.dividerM");
10
+ border: var(--digitv2-divider-dividerM);
11
11
  }
12
12
 
13
13
  &.large {
14
- border: theme("digitv2.divider.dividerL");
14
+ border: var(--digitv2-divider-dividerL);
15
15
  }
16
16
  }
package/src/digitv2/components/errorMessageV2.scss CHANGED
@@ -3,40 +3,40 @@
3
3
 
4
4
  .digit-error-icon-message-wrap {
5
5
  @apply flex w-full whitespace-pre-wrap break-words;
6
- gap: theme("digitv2.spacers.spacer1");
6
+ gap: var(--digitv2-spacers-spacer1);
7
7
  word-break: break-word;
8
8
  cursor: default;
9
9
 
10
10
  .digit-error-icon {
11
11
  @apply flex items-center;
12
- width: theme("digitv2.spacers.spacer4");
13
- height: theme("digitv2.lineHeight.lineheight2");
12
+ width: var(--digitv2-spacers-spacer4);
13
+ height: var(--digitv2-lineHeight-lineheight2);
14
14
  }
15
15
 
16
16
  .digit-error-message {
17
17
  @include typography-body-s;
18
18
  @apply w-full;
19
- font-family: theme("digitv2.fontFamily.sans");
20
- font-style: theme("digitv2.fontStyle.normal");
21
- font-weight: theme("digitv2.fontWeight.regular");
22
- line-height: theme("digitv2.lineHeight.lineheight2");
19
+ font-family: var(--digitv2-fontFamily-sans);
20
+ font-style: var(--digitv2-fontStyle-normal);
21
+ font-weight: var(--digitv2-fontWeight-regular);
22
+ line-height: var(--digitv2-lineHeight-lineheight2);
23
23
 
24
24
  @media (max-aspect-ratio: 9/16) {
25
25
  /* Media query for mobile */
26
- font-size: theme("digitv2.fontSize.body-s.mobile");
26
+ font-size: var( --digitv2-fontSize-body-s-mobile);
27
27
  }
28
28
 
29
29
  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
30
30
  /* Media query for tablets */
31
- font-size: theme("digitv2.fontSize.body-s.tablet");
31
+ font-size: var( --digitv2-fontSize-body-s-tablet);
32
32
  }
33
33
 
34
34
  @media (min-aspect-ratio: 3/4) {
35
35
  /* Media query for desktop */
36
- font-size: theme("digitv2.fontSize.body-s.desktop");
36
+ font-size: var( --digitv2-fontSize-body-s-desktop);
37
37
  }
38
38
 
39
- margin: theme("digitv2.spacers.spacer0");
40
- color: theme("digitv2.lightTheme.alert-error")
39
+ margin: var(--digitv2-spacers-spacer0);
40
+ color: var(--digitv2-lightTheme-alert-error)
41
41
  }
42
42
  }
package/src/digitv2/components/fieldV1.scss CHANGED
@@ -5,7 +5,7 @@
5
5
  display: flex;
6
6
  flex-direction: column;
7
7
  justify-content: flex-start;
8
- gap: theme("digitv2.spacers.spacer1");
8
+ gap: var(--digitv2-spacers-spacer1);
9
9
  width: 100%;
10
10
  }
11
11
 
@@ -14,8 +14,8 @@
14
14
  &.label {
15
15
  @include typography-label;
16
16
  @apply flex ;
17
- color: theme("digitv2.lightTheme.text-primary");
18
- gap: theme("digitv2.spacers.spacer1");
17
+ color: var(--digitv2-lightTheme-text-primary);
18
+ gap: var(--digitv2-spacers-spacer1);
19
19
 
20
20
  &.wraplabel {
21
21
  @media (min-aspect-ratio: 9/16){
@@ -30,7 +30,7 @@
30
30
 
31
31
  .label-container {
32
32
  @apply flex items-center w-full;
33
- gap: theme("digitv2.spacers.spacer1");
33
+ gap: var(--digitv2-spacers-spacer1);
34
34
 
35
35
  &.wraplabel{
36
36
  @media (min-aspect-ratio: 9/16) {
@@ -48,30 +48,30 @@
48
48
  .info-icon .infotext {
49
49
  @include typography-body-s;
50
50
  @apply absolute text-center;
51
- font-family: theme("digitv2.fontFamily.sans");
52
- font-style: theme("digitv2.fontStyle.normal");
53
- font-weight: theme("digitv2.fontWeight.regular");
54
- line-height: theme("digitv2.lineHeight.lineheight2");
51
+ font-family: var(--digitv2-fontFamily-sans);
52
+ font-style: var(--digitv2-fontStyle-normal);
53
+ font-weight: var(--digitv2-fontWeight-regular);
54
+ line-height: var(--digitv2-lineHeight-lineheight2);
55
55
 
56
56
  @media (max-aspect-ratio: 9/16) {
57
57
  /* Media query for mobile */
58
- font-size: theme("digitv2.fontSize.body-s.mobile");
58
+ font-size: var( --digitv2-fontSize-body-s-mobile);
59
59
  }
60
60
 
61
61
  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
62
62
  /* Media query for tablets */
63
- font-size: theme("digitv2.fontSize.body-s.tablet");
63
+ font-size: var( --digitv2-fontSize-body-s-tablet);
64
64
  }
65
65
 
66
66
  @media (min-aspect-ratio: 3/4) {
67
67
  /* Media query for desktop */
68
- font-size: theme("digitv2.fontSize.body-s.desktop");
68
+ font-size: var( --digitv2-fontSize-body-s-desktop);
69
69
  }
70
70
  visibility: hidden;
71
71
  width: 7.5rem;
72
72
  background-color: #555555;
73
- color: theme("digitv2.lightTheme.paper-primary");
74
- padding: theme("digitv2.spacers.spacer2") theme("digitv2.spacers.spacer0");
73
+ color: var(--digitv2-lightTheme-paper-primary);
74
+ padding: var(--digitv2-spacers-spacer2) var(--digitv2-spacers-spacer0);
75
75
  z-index: 1;
76
76
  bottom: 100%;
77
77
  left: 50%;
@@ -103,32 +103,32 @@
103
103
  .digit-field {
104
104
 
105
105
  @apply flex flex-col w-full;
106
- gap: theme("digitv2.spacers.spacer1");
106
+ gap: var(--digitv2-spacers-spacer1);
107
107
 
108
108
  .digit-description,
109
109
  .digit-charcount {
110
110
  @include typography-body-s;
111
111
  @apply flex justify-between items-baseline;
112
- color: theme("digitv2.lightTheme.text-secondary");
113
- gap: theme("digitv2.spacers.spacer2");
114
- font-family: theme("digitv2.fontFamily.sans");
115
- font-style: theme("digitv2.fontStyle.normal");
116
- font-weight: theme("digitv2.fontWeight.regular");
117
- line-height: theme("digitv2.lineHeight.lineheight2");
112
+ color: var(--digitv2-lightTheme-text-secondary);
113
+ gap: var(--digitv2-spacers-spacer2);
114
+ font-family: var(--digitv2-fontFamily-sans);
115
+ font-style: var(--digitv2-fontStyle-normal);
116
+ font-weight: var(--digitv2-fontWeight-regular);
117
+ line-height: var(--digitv2-lineHeight-lineheight2);
118
118
 
119
119
  @media (max-aspect-ratio: 9/16) {
120
120
  /* Media query for mobile */
121
- font-size: theme("digitv2.fontSize.body-s.mobile");
121
+ font-size: var( --digitv2-fontSize-body-s-mobile);
122
122
  }
123
123
 
124
124
  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
125
125
  /* Media query for tablets */
126
- font-size: theme("digitv2.fontSize.body-s.tablet");
126
+ font-size: var( --digitv2-fontSize-body-s-tablet);
127
127
  }
128
128
 
129
129
  @media (min-aspect-ratio: 3/4) {
130
130
  /* Media query for desktop */
131
- font-size: theme("digitv2.fontSize.body-s.desktop");
131
+ font-size: var( --digitv2-fontSize-body-s-desktop);
132
132
  }
133
133
 
134
134
 
@@ -153,98 +153,98 @@
153
153
 
154
154
  .digit-form-card-subheader {
155
155
  @include typography-caption-l;
156
- font-family: theme("digitv2.fontFamily.sans");
157
- font-style: theme("digitv2.fontStyle.normal");
158
- font-weight: theme("digitv2.fontWeight.medium");
159
- line-height: theme("digitv2.lineHeight.lineheight1");
156
+ font-family: var(--digitv2-fontFamily-sans);
157
+ font-style: var(--digitv2-fontStyle-normal);
158
+ font-weight: var(--digitv2-fontWeight-medium);
159
+ line-height: var(--digitv2-lineHeight-lineheight1);
160
160
 
161
161
  @media (max-aspect-ratio: 9/16) {
162
162
  /* Media query for mobile */
163
- font-size: theme("digitv2.fontSize.caption-l.mobile");
163
+ font-size: var(--digitv2-fontSize-caption-l-mobile);
164
164
  }
165
165
 
166
166
  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
167
167
  /* Media query for tablets */
168
- font-size: theme("digitv2.fontSize.caption-l.tablet");
168
+ font-size: var(--digitv2-fontSize-caption-l-tablet);
169
169
  }
170
170
 
171
171
  @media (min-aspect-ratio: 3/4) {
172
172
  /* Media query for desktop */
173
- font-size: theme("digitv2.fontSize.caption-l.desktop");
173
+ font-size: var(--digitv2-fontSize-caption-l-desktop);
174
174
  }
175
- color: theme("digitv2.lightTheme.text-primary");
175
+ color: var(--digitv2-lightTheme-text-primary);
176
176
  }
177
177
 
178
178
  .digit-form-card-description {
179
179
  @include typography-heading-s;
180
- font-family: theme("digitv2.fontFamily.sans");
181
- font-style: theme("digitv2.fontStyle.normal");
182
- font-weight: theme("digitv2.fontWeight.bold");
183
- line-height: theme("digitv2.lineHeight.lineheight1");
180
+ font-family: var(--digitv2-fontFamily-sans);
181
+ font-style: var(--digitv2-fontStyle-normal);
182
+ font-weight: var(--digitv2-fontWeight-bold);
183
+ line-height: var(--digitv2-lineHeight-lineheight1);
184
184
 
185
185
  @media (max-aspect-ratio: 9/16) {
186
186
  /* Media query for mobile */
187
- font-size: theme("digitv2.fontSize.heading-s.mobile");
187
+ font-size: var(--digitv2-fontSize-heading-s-mobile);
188
188
  }
189
189
 
190
190
  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
191
191
  /* Media query for tablets */
192
- font-size: theme("digitv2.fontSize.heading-s.tablet");
192
+ font-size: var(--digitv2-fontSize-heading-s-tablet);
193
193
  }
194
194
 
195
195
  @media (min-aspect-ratio: 3/4) {
196
196
  /* Media query for desktop */
197
- font-size: theme("digitv2.fontSize.heading-s.desktop");
197
+ font-size: var(--digitv2-fontSize-heading-s-desktop);
198
198
  }
199
- color: theme("digitv2.lightTheme.text-secondary");
199
+ color: var(--digitv2-lightTheme-text-secondary);
200
200
  }
201
201
 
202
202
  .digit-form-card-text {
203
203
  @include typography-body-l;
204
- font-family: theme("digitv2.fontFamily.sans");
205
- font-style: theme("digitv2.fontStyle.normal");
206
- font-weight: theme("digitv2.fontWeight.regular");
207
- line-height: theme("digitv2.lineHeight.lineheight2");
204
+ font-family: var(--digitv2-fontFamily-sans);
205
+ font-style: var(--digitv2-fontStyle-normal);
206
+ font-weight: var(--digitv2-fontWeight-regular);
207
+ line-height: var(--digitv2-lineHeight-lineheight2);
208
208
 
209
209
  @media (max-aspect-ratio: 9/16) {
210
210
  /* Media query for mobile */
211
- font-size: theme("digitv2.fontSize.body-l.mobile");
211
+ font-size: var(--digitv2-fontSize-body-l-mobile);
212
212
  }
213
213
 
214
214
  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
215
215
  /* Media query for tablets */
216
- font-size: theme("digitv2.fontSize.body-l.tablet");
216
+ font-size: var(--digitv2-fontSize-body-l-tablet);
217
217
  }
218
218
 
219
219
  @media (min-aspect-ratio: 3/4) {
220
220
  /* Media query for desktop */
221
- font-size: theme("digitv2.fontSize.body-l.desktop");
221
+ font-size: var(--digitv2-fontSize-body-l-desktop);
222
222
  }
223
- color: theme("digitv2.lightTheme.text-secondary");
223
+ color: var(--digitv2-lightTheme-text-secondary);
224
224
 
225
225
  }
226
226
 
227
227
  .sectionSubHeaderStyle{
228
228
  @include typography-body-s;
229
229
  @apply flex justify-between items-baseline;
230
- color: theme("digitv2.lightTheme.text-secondary");
231
- font-family: theme("digitv2.fontFamily.sans");
232
- font-style: theme("digitv2.fontStyle.normal");
233
- font-weight: theme("digitv2.fontWeight.regular");
234
- line-height: theme("digitv2.lineHeight.lineheight2");
230
+ color: var(--digitv2-lightTheme-text-secondary);
231
+ font-family: var(--digitv2-fontFamily-sans);
232
+ font-style: var(--digitv2-fontStyle-normal);
233
+ font-weight: var(--digitv2-fontWeight-regular);
234
+ line-height: var(--digitv2-lineHeight-lineheight2);
235
235
 
236
236
  @media (max-aspect-ratio: 9/16) {
237
237
  /* Media query for mobile */
238
- font-size: theme("digitv2.fontSize.body-s.mobile");
238
+ font-size: var( --digitv2-fontSize-body-s-mobile);
239
239
  }
240
240
 
241
241
  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
242
242
  /* Media query for tablets */
243
- font-size: theme("digitv2.fontSize.body-s.tablet");
243
+ font-size: var( --digitv2-fontSize-body-s-tablet);
244
244
  }
245
245
 
246
246
  @media (min-aspect-ratio: 3/4) {
247
247
  /* Media query for desktop */
248
- font-size: theme("digitv2.fontSize.body-s.desktop");
248
+ font-size: var( --digitv2-fontSize-body-s-desktop);
249
249
  }
250
250
  }