@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/toggleV2.scss CHANGED
@@ -11,92 +11,92 @@
11
11
 
12
12
  .toggle-option-container {
13
13
  @apply inline-flex items-center;
14
- gap: theme("digitv2.spacers.spacer2");
14
+ gap: var(--digitv2-spacers-spacer2);
15
15
  }
16
16
 
17
17
  .digit-toggle-btn-wrap {
18
18
  @apply flex items-center justify-center cursor-pointer bg-white overflow-hidden text-center;
19
- padding: 0.125rem theme("digitv2.spacers.spacer0");
19
+ padding: 0.125rem var(--digitv2-spacers-spacer0);
20
20
  width: 7rem;
21
- height: theme("digitv2.spacers.spacer8");
22
- border: 0.063rem solid theme("digitv2.lightTheme.generic-divider");
21
+ height: var(--digitv2-spacers-spacer8);
22
+ border: 0.063rem solid var(--digitv2-lightTheme-generic-divider);
23
23
  text-overflow: ellipsis;
24
24
 
25
25
  .digit-toggle-label {
26
26
  @include typography-body-xs;
27
27
  @apply w-full overflow-hidden whitespace-nowrap;
28
- color: theme("digitv2.lightTheme.text-disabled");
28
+ color: var(--digitv2-lightTheme-text-disabled);
29
29
  text-overflow: ellipsis;
30
30
  }
31
31
 
32
32
  &:hover,
33
33
  &:active {
34
- border: 0.063rem solid theme("digitv2.lightTheme.primary-1");
35
- background: theme("digitv2.lightTheme.paper-primary");
34
+ border: 0.063rem solid var(--digitv2-lightTheme-primary-1);
35
+ background: var(--digitv2-lightTheme-paper-primary);
36
36
  width: 7.125rem;
37
- color: theme("digitv2.lightTheme.primary-1");
37
+ color: var(--digitv2-lightTheme-primary-1);
38
38
 
39
39
  .digit-toggle-label {
40
- color: theme("digitv2.lightTheme.primary-1") !important;
40
+ color: var(--digitv2-lightTheme-primary-1) !important;
41
41
  }
42
42
  }
43
43
 
44
44
  &:active {
45
- box-shadow: theme("digitv2.spacers.spacer0") theme("digitv2.spacers.spacer0") 0.375rem theme("digitv2.spacers.spacer0") #F4773840;
45
+ box-shadow: var(--digitv2-spacers-spacer0) var(--digitv2-spacers-spacer0) 0.375rem var(--digitv2-spacers-spacer0) #F4773840;
46
46
  }
47
47
 
48
48
  input:checked+.digit-toggle-label {
49
49
  @include typography-heading-s;
50
- font-family: theme("digitv2.fontFamily.sans");
51
- font-style: theme("digitv2.fontStyle.normal");
52
- font-weight: theme("digitv2.fontWeight.bold");
53
- line-height: theme("digitv2.lineHeight.lineheight1");
50
+ font-family: var(--digitv2-fontFamily-sans);
51
+ font-style: var(--digitv2-fontStyle-normal);
52
+ font-weight: var(--digitv2-fontWeight-bold);
53
+ line-height: var(--digitv2-lineHeight-lineheight1);
54
54
 
55
55
  @media (max-aspect-ratio: 9/16) {
56
56
  /* Media query for mobile */
57
- font-size: theme("digitv2.fontSize.heading-s.mobile");
57
+ font-size: var(--digitv2-fontSize-heading-s-mobile);
58
58
  }
59
59
 
60
60
  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
61
61
  /* Media query for tablets */
62
- font-size: theme("digitv2.fontSize.heading-s.tablet");
62
+ font-size: var(--digitv2-fontSize-heading-s-tablet);
63
63
  }
64
64
 
65
65
  @media (min-aspect-ratio: 3/4) {
66
66
  /* Media query for desktop */
67
- font-size: theme("digitv2.fontSize.heading-s.desktop");
67
+ font-size: var(--digitv2-fontSize-heading-s-desktop);
68
68
  }
69
- background-color: theme("digitv2.lightTheme.primary-1");
70
- color: theme("digitv2.lightTheme.paper-primary") !important;
69
+ background-color: var(--digitv2-lightTheme-primary-1);
70
+ color: var(--digitv2-lightTheme-paper-primary) !important;
71
71
  }
72
72
 
73
73
  &.checked {
74
- background-color: theme("digitv2.lightTheme.primary-1");
74
+ background-color: var(--digitv2-lightTheme-primary-1);
75
75
  width: 7.125rem;
76
- border: 0.063rem solid theme("digitv2.lightTheme.primary-1");
76
+ border: 0.063rem solid var(--digitv2-lightTheme-primary-1);
77
77
 
78
78
  .digit-toggle-label {
79
79
  @include typography-heading-s;
80
- font-family: theme("digitv2.fontFamily.sans");
81
- font-style: theme("digitv2.fontStyle.normal");
82
- font-weight: theme("digitv2.fontWeight.bold");
83
- line-height: theme("digitv2.lineHeight.lineheight1");
80
+ font-family: var(--digitv2-fontFamily-sans);
81
+ font-style: var(--digitv2-fontStyle-normal);
82
+ font-weight: var(--digitv2-fontWeight-bold);
83
+ line-height: var(--digitv2-lineHeight-lineheight1);
84
84
 
85
85
  @media (max-aspect-ratio: 9/16) {
86
86
  /* Media query for mobile */
87
- font-size: theme("digitv2.fontSize.heading-s.mobile");
87
+ font-size: var(--digitv2-fontSize-heading-s-mobile);
88
88
  }
89
89
 
90
90
  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
91
91
  /* Media query for tablets */
92
- font-size: theme("digitv2.fontSize.heading-s.tablet");
92
+ font-size: var(--digitv2-fontSize-heading-s-tablet);
93
93
  }
94
94
 
95
95
  @media (min-aspect-ratio: 3/4) {
96
96
  /* Media query for desktop */
97
- font-size: theme("digitv2.fontSize.heading-s.desktop");
97
+ font-size: var(--digitv2-fontSize-heading-s-desktop);
98
98
  }
99
- color: theme("digitv2.lightTheme.paper-primary");
99
+ color: var(--digitv2-lightTheme-paper-primary);
100
100
  }
101
101
  }
102
102
  }
@@ -107,8 +107,8 @@
107
107
  }
108
108
 
109
109
  .digit-toggle-label {
110
- color: theme("digitv2.lightTheme.text-disabled");
111
- padding: theme("digitv2.spacers.spacer2") theme("digitv2.spacers.spacer3");
110
+ color: var(--digitv2-lightTheme-text-disabled);
111
+ padding: var(--digitv2-spacers-spacer2) var(--digitv2-spacers-spacer3);
112
112
  }
113
113
 
114
114
 
@@ -129,7 +129,7 @@
129
129
  align-items: center;
130
130
  justify-content: center;
131
131
  padding: 0.75rem;
132
- background-color: theme("digitv2.lightTheme.paper-primary");
132
+ background-color: var(--digitv2-lightTheme-paper-primary);
133
133
  border: 1px solid #d6d6d6;
134
134
  cursor: pointer;
135
135
  transition: all 0.2s ease;
@@ -149,27 +149,27 @@
149
149
  }
150
150
 
151
151
  .digit-toggle-toolbar.vertical-toggle .digit-toggle-btn-wrap.checked {
152
- border: 2px solid theme("digitv2.lightTheme.primary-1");
153
- background-color: theme("digitv2.lightTheme.paper-primary") !important;
154
- color: theme("digitv2.lightTheme.primary-1");
152
+ border: 2px solid var(--digitv2-lightTheme-primary-1);
153
+ background-color: var(--digitv2-lightTheme-paper-primary) !important;
154
+ color: var(--digitv2-lightTheme-primary-1);
155
155
  width: 9rem !important;
156
156
  transform: scaleX(1.05);
157
157
  }
158
158
 
159
159
  .digit-toggle-toolbar.vertical-toggle .digit-toggle-label {
160
160
  font-weight: bold;
161
- font-size: theme("digitv2.fontSize.heading-s.mobile");
161
+ font-size: var(--digitv2-fontSize-heading-s-mobile);
162
162
  text-align: center;
163
163
  width: 100%;
164
- background-color: theme("digitv2.lightTheme.paper-primary");
165
- color: theme("digitv2.lightTheme.primary-2");
164
+ background-color: var(--digitv2-lightTheme-paper-primary);
165
+ color: var(--digitv2-lightTheme-primary-2);
166
166
 
167
- @media (min-width: theme("digitv2.screens.tablet")) {
168
- font-size: theme("digitv2.fontSize.heading-s.tablet");
167
+ @media (min-width: var(--digitv2-screens-tablet)) {
168
+ font-size: var(--digitv2-fontSize-heading-s-tablet);
169
169
  }
170
170
 
171
- @media (min-width: theme("digitv2.screens.desktop")) {
172
- font-size: theme("digitv2.fontSize.heading-s.desktop");
171
+ @media (min-width: var(--digitv2-screens-desktop)) {
172
+ font-size: var(--digitv2-fontSize-heading-s-desktop);
173
173
  }
174
174
  }
175
175
 
@@ -177,8 +177,8 @@
177
177
  display: none;
178
178
  }
179
179
  .vertical-toggle .digit-toggle-btn-wrap input:checked + .digit-toggle-label {
180
- background-color:theme("digitv2.lightTheme.paper-primary") !important;
181
- color: theme("digitv2.lightTheme.primary-1") !important;
180
+ background-color:var(--digitv2-lightTheme-paper-primary) !important;
181
+ color: var(--digitv2-lightTheme-primary-1) !important;
182
182
  border-bottom-right-radius: 0.5rem;
183
183
  border-top-right-radius: 0.5rem;
184
184
  }
@@ -189,7 +189,7 @@
189
189
  .vertical-toggle{
190
190
  .digit-toggle-label{
191
191
  &.disabled{
192
- color: theme("digitv2.lightTheme.text-disabled") !important;
192
+ color: var(--digitv2-lightTheme-text-disabled) !important;
193
193
  }
194
194
  }
195
195
  }
package/src/digitv2/components/tooltipwrapperV2.scss CHANGED
@@ -8,10 +8,10 @@
8
8
 
9
9
  .tooltip-content {
10
10
  position: absolute;
11
- background-color: theme("digitv2.lightTheme.generic-inputborder");
12
- color: theme("digitv2.lightTheme.paper-primary");
13
- padding: theme("digitv2.spacers.spacer2");
14
- border-radius: theme("digitv2.spacers.spacer1");
11
+ background-color: var(--digitv2-lightTheme-generic-inputborder);
12
+ color: var(--digitv2-lightTheme-paper-primary);
13
+ padding: var(--digitv2-spacers-spacer2);
14
+ border-radius: var(--digitv2-spacers-spacer1);
15
15
  z-index: 1000;
16
16
  pointer-events: none;
17
17
  width: max-content;
@@ -23,56 +23,56 @@
23
23
  min-width: 4.125rem;
24
24
  max-width: 14.563rem;
25
25
 
26
- font-family: theme("digitv2.fontFamily.sans");
27
- font-style: theme("digitv2.fontStyle.normal");
28
- font-weight: theme("digitv2.fontWeight.regular");
29
- line-height: theme("digitv2.lineHeight.lineheight2");
26
+ font-family: var(--digitv2-fontFamily-sans);
27
+ font-style: var(--digitv2-fontStyle-normal);
28
+ font-weight: var(--digitv2-fontWeight-regular);
29
+ line-height: var(--digitv2-lineHeight-lineheight2);
30
30
 
31
31
  @media (max-aspect-ratio: 9/16) {
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
- font-size: theme("digitv2.fontSize.body-s.tablet");
36
+ font-size: var( --digitv2-fontSize-body-s-tablet);
37
37
  }
38
38
 
39
39
  @media (min-aspect-ratio: 3/4) {
40
- font-size: theme("digitv2.fontSize.body-s.desktop");
40
+ font-size: var( --digitv2-fontSize-body-s-desktop);
41
41
  }
42
42
 
43
43
  &.light {
44
- color: theme("digitv2.lightTheme.text-primary");
45
- background-color: theme("digitv2.lightTheme.paper-secondary");
44
+ color: var(--digitv2-lightTheme-text-primary);
45
+ background-color: var(--digitv2-lightTheme-paper-secondary);
46
46
  box-shadow: 0rem 0.063rem 0.125rem 0rem #36363629;
47
- border: 0.063rem solid theme("digitv2.lightTheme.generic-divider");
47
+ border: 0.063rem solid var(--digitv2-lightTheme-generic-divider);
48
48
  }
49
49
 
50
50
  .tooltip-header {
51
51
  @include typography-heading-s;
52
- font-family: theme("digitv2.fontFamily.sans");
53
- font-style: theme("digitv2.fontStyle.normal");
54
- font-weight: theme("digitv2.fontWeight.bold");
55
- line-height: theme("digitv2.lineHeight.lineheight1");
52
+ font-family: var(--digitv2-fontFamily-sans);
53
+ font-style: var(--digitv2-fontStyle-normal);
54
+ font-weight: var(--digitv2-fontWeight-bold);
55
+ line-height: var(--digitv2-lineHeight-lineheight1);
56
56
 
57
57
  @media (max-aspect-ratio: 9/16) {
58
58
  /* Media query for mobile */
59
- font-size: theme("digitv2.fontSize.heading-s.mobile");
59
+ font-size: var(--digitv2-fontSize-heading-s-mobile);
60
60
  }
61
61
 
62
62
  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
63
63
  /* Media query for tablets */
64
- font-size: theme("digitv2.fontSize.heading-s.tablet");
64
+ font-size: var(--digitv2-fontSize-heading-s-tablet);
65
65
  }
66
66
 
67
67
  @media (min-aspect-ratio: 3/4) {
68
68
  /* Media query for desktop */
69
- font-size: theme("digitv2.fontSize.heading-s.desktop");
69
+ font-size: var(--digitv2-fontSize-heading-s-desktop);
70
70
  }
71
71
 
72
- color: theme("digitv2.lightTheme.paper-primary");
72
+ color: var(--digitv2-lightTheme-paper-primary);
73
73
 
74
74
  &.light {
75
- color: theme("digitv2.lightTheme.text-primary");
75
+ color: var(--digitv2-lightTheme-text-primary);
76
76
  }
77
77
  }
78
78
 
@@ -86,32 +86,32 @@
86
86
 
87
87
  .tooltip-description {
88
88
  @include typography-body-xs;
89
- color: theme("digitv2.lightTheme.paper-primary");
89
+ color: var(--digitv2-lightTheme-paper-primary);
90
90
 
91
91
  &.light {
92
- color: theme("digitv2.lightTheme.text-primary");
92
+ color: var(--digitv2-lightTheme-text-primary);
93
93
  }
94
94
  }
95
95
  }
96
96
 
97
97
  .tooltip-content.tooltip-bottom-start {
98
- top: theme("digitv2.spacers.spacer12");
98
+ top: var(--digitv2-spacers-spacer12);
99
99
  left: 0;
100
100
 
101
101
  &.with-arrow {
102
- border-top-left-radius: theme("digitv2.spacers.spacer0");
102
+ border-top-left-radius: var(--digitv2-spacers-spacer0);
103
103
  }
104
104
 
105
105
  }
106
106
 
107
107
  .tooltip-content.tooltip-bottom {
108
- top: theme("digitv2.spacers.spacer12");
108
+ top: var(--digitv2-spacers-spacer12);
109
109
  left: 50%;
110
110
  transform: translateX(-50%);
111
111
  }
112
112
 
113
113
  .tooltip-content.tooltip-bottom-end {
114
- top: theme("digitv2.spacers.spacer12");
114
+ top: var(--digitv2-spacers-spacer12);
115
115
  right: 0;
116
116
 
117
117
  &.with-arrow {
@@ -120,75 +120,75 @@
120
120
  }
121
121
 
122
122
  .tooltip-content.tooltip-top-start {
123
- bottom: theme("digitv2.spacers.spacer12");
123
+ bottom: var(--digitv2-spacers-spacer12);
124
124
  left: 0;
125
125
 
126
126
  &.with-arrow {
127
- border-bottom-left-radius: theme("digitv2.spacers.spacer0");
127
+ border-bottom-left-radius: var(--digitv2-spacers-spacer0);
128
128
  }
129
129
  }
130
130
 
131
131
  .tooltip-content.tooltip-top {
132
- bottom: theme("digitv2.spacers.spacer12");
132
+ bottom: var(--digitv2-spacers-spacer12);
133
133
  left: 50%;
134
134
  transform: translateX(-50%);
135
135
  }
136
136
 
137
137
 
138
138
  .tooltip-content.tooltip-top-end {
139
- bottom: theme("digitv2.spacers.spacer12");
139
+ bottom: var(--digitv2-spacers-spacer12);
140
140
  right: 0;
141
141
 
142
142
  &.with-arrow {
143
- border-bottom-right-radius: theme("digitv2.spacers.spacer0");
143
+ border-bottom-right-radius: var(--digitv2-spacers-spacer0);
144
144
  }
145
145
  }
146
146
 
147
147
  .tooltip-content.tooltip-left-start {
148
- right: calc(100% + theme("digitv2.spacers.spacer2"));
148
+ right: calc(100% + var(--digitv2-spacers-spacer2));
149
149
  top: 0;
150
150
 
151
151
  &.with-arrow {
152
- border-top-right-radius: theme("digitv2.spacers.spacer0");
152
+ border-top-right-radius: var(--digitv2-spacers-spacer0);
153
153
  }
154
154
  }
155
155
 
156
156
  .tooltip-content.tooltip-left {
157
- right: calc(100% + theme("digitv2.spacers.spacer2"));
157
+ right: calc(100% + var(--digitv2-spacers-spacer2));
158
158
  top: 50%;
159
159
  transform: translateY(-50%);
160
160
  }
161
161
 
162
162
  .tooltip-content.tooltip-left-end {
163
- right: calc(100% + theme("digitv2.spacers.spacer2"));
163
+ right: calc(100% + var(--digitv2-spacers-spacer2));
164
164
  bottom: 0;
165
165
 
166
166
  &.with-arrow {
167
- border-bottom-right-radius: theme("digitv2.spacers.spacer0");
167
+ border-bottom-right-radius: var(--digitv2-spacers-spacer0);
168
168
  }
169
169
  }
170
170
 
171
171
  .tooltip-content.tooltip-right-start {
172
- left: calc(100% + theme("digitv2.spacers.spacer2"));
172
+ left: calc(100% + var(--digitv2-spacers-spacer2));
173
173
  top: 0;
174
174
 
175
175
  &.with-arrow {
176
- border-top-left-radius: theme("digitv2.spacers.spacer0");
176
+ border-top-left-radius: var(--digitv2-spacers-spacer0);
177
177
  }
178
178
  }
179
179
 
180
180
  .tooltip-content.tooltip-right {
181
- left: calc(100% + theme("digitv2.spacers.spacer2"));
181
+ left: calc(100% + var(--digitv2-spacers-spacer2));
182
182
  top: 50%;
183
183
  transform: translateY(-50%);
184
184
  }
185
185
 
186
186
  .tooltip-content.tooltip-right-end {
187
- left: calc(100% + theme("digitv2.spacers.spacer2"));
187
+ left: calc(100% + var(--digitv2-spacers-spacer2));
188
188
  bottom: 0;
189
189
 
190
190
  &.with-arrow {
191
- border-bottom-left-radius: theme("digitv2.spacers.spacer0");
191
+ border-bottom-left-radius: var(--digitv2-spacers-spacer0);
192
192
  }
193
193
  }
194
194
 
@@ -197,14 +197,14 @@
197
197
  content: "";
198
198
  position: absolute;
199
199
  top: -0.5rem;
200
- left: theme("digitv2.spacers.spacer1");
200
+ left: var(--digitv2-spacers-spacer1);
201
201
  transform: translateX(-50%);
202
- border-bottom: theme("digitv2.spacers.spacer2") solid theme("digitv2.lightTheme.generic-inputborder");
203
- border-right: theme("digitv2.spacers.spacer2") solid transparent;
202
+ border-bottom: var(--digitv2-spacers-spacer2) solid var(--digitv2-lightTheme-generic-inputborder);
203
+ border-right: var(--digitv2-spacers-spacer2) solid transparent;
204
204
  }
205
205
 
206
206
  .tooltip-bottom-start.with-arrow.light:before {
207
- border-bottom: theme("digitv2.spacers.spacer2") solid theme("digitv2.lightTheme.paper-secondary");
207
+ border-bottom: var(--digitv2-spacers-spacer2) solid var(--digitv2-lightTheme-paper-secondary);
208
208
  }
209
209
 
210
210
  .tooltip-bottom.with-arrow:before {
@@ -213,13 +213,13 @@
213
213
  top: -0.5rem;
214
214
  left: 50%;
215
215
  transform: translateX(-50%);
216
- border-bottom: theme("digitv2.spacers.spacer2") solid theme("digitv2.lightTheme.generic-inputborder");
217
- border-left: theme("digitv2.spacers.spacer1") solid transparent;
218
- border-right: theme("digitv2.spacers.spacer1") solid transparent;
216
+ border-bottom: var(--digitv2-spacers-spacer2) solid var(--digitv2-lightTheme-generic-inputborder);
217
+ border-left: var(--digitv2-spacers-spacer1) solid transparent;
218
+ border-right: var(--digitv2-spacers-spacer1) solid transparent;
219
219
  }
220
220
 
221
221
  .tooltip-bottom.with-arrow.light:before {
222
- border-bottom: theme("digitv2.spacers.spacer2") solid theme("digitv2.lightTheme.paper-secondary");
222
+ border-bottom: var(--digitv2-spacers-spacer2) solid var(--digitv2-lightTheme-paper-secondary);
223
223
  }
224
224
 
225
225
  .tooltip-bottom-end.with-arrow:before {
@@ -228,26 +228,26 @@
228
228
  top: -0.5rem;
229
229
  left: calc(100% - 0.25rem);
230
230
  transform: translateX(-50%);
231
- border-bottom: theme("digitv2.spacers.spacer2") solid theme("digitv2.lightTheme.generic-inputborder");
232
- border-left: theme("digitv2.spacers.spacer2") solid transparent;
231
+ border-bottom: var(--digitv2-spacers-spacer2) solid var(--digitv2-lightTheme-generic-inputborder);
232
+ border-left: var(--digitv2-spacers-spacer2) solid transparent;
233
233
  }
234
234
 
235
235
  .tooltip-bottom-end.with-arrow.light:before {
236
- border-bottom: theme("digitv2.spacers.spacer2") solid theme("digitv2.lightTheme.paper-secondary");
236
+ border-bottom: var(--digitv2-spacers-spacer2) solid var(--digitv2-lightTheme-paper-secondary);
237
237
  }
238
238
 
239
239
  .tooltip-top-start.with-arrow:before {
240
240
  content: "";
241
241
  position: absolute;
242
242
  bottom: -0.5rem;
243
- left: theme("digitv2.spacers.spacer1");
243
+ left: var(--digitv2-spacers-spacer1);
244
244
  transform: translateX(-50%);
245
- border-top: theme("digitv2.spacers.spacer2") solid theme("digitv2.lightTheme.generic-inputborder");
246
- border-right: theme("digitv2.spacers.spacer2") solid transparent;
245
+ border-top: var(--digitv2-spacers-spacer2) solid var(--digitv2-lightTheme-generic-inputborder);
246
+ border-right: var(--digitv2-spacers-spacer2) solid transparent;
247
247
  }
248
248
 
249
249
  .tooltip-top-start.with-arrow.light:before {
250
- border-top: theme("digitv2.spacers.spacer2") solid theme("digitv2.lightTheme.paper-secondary");
250
+ border-top: var(--digitv2-spacers-spacer2) solid var(--digitv2-lightTheme-paper-secondary);
251
251
  }
252
252
 
253
253
  .tooltip-top.with-arrow:before {
@@ -256,13 +256,13 @@
256
256
  bottom: -0.5rem;
257
257
  left: 50%;
258
258
  transform: translateX(-50%);
259
- border-top: theme("digitv2.spacers.spacer2") solid theme("digitv2.lightTheme.generic-inputborder");
260
- border-left: theme("digitv2.spacers.spacer1") solid transparent;
261
- border-right: theme("digitv2.spacers.spacer1") solid transparent;
259
+ border-top: var(--digitv2-spacers-spacer2) solid var(--digitv2-lightTheme-generic-inputborder);
260
+ border-left: var(--digitv2-spacers-spacer1) solid transparent;
261
+ border-right: var(--digitv2-spacers-spacer1) solid transparent;
262
262
  }
263
263
 
264
264
  .tooltip-top.with-arrow.light:before {
265
- border-top: theme("digitv2.spacers.spacer2") solid theme("digitv2.lightTheme.paper-secondary");
265
+ border-top: var(--digitv2-spacers-spacer2) solid var(--digitv2-lightTheme-paper-secondary);
266
266
  }
267
267
 
268
268
  .tooltip-top-end.with-arrow:before {
@@ -271,26 +271,26 @@
271
271
  bottom: -0.5rem;
272
272
  left: calc(100% - 0.25rem);
273
273
  transform: translateX(-50%);
274
- border-top: theme("digitv2.spacers.spacer2") solid theme("digitv2.lightTheme.generic-inputborder");
275
- border-left: theme("digitv2.spacers.spacer2") solid transparent;
274
+ border-top: var(--digitv2-spacers-spacer2) solid var(--digitv2-lightTheme-generic-inputborder);
275
+ border-left: var(--digitv2-spacers-spacer2) solid transparent;
276
276
  }
277
277
 
278
278
  .tooltip-top-end.with-arrow.light:before {
279
- border-top: theme("digitv2.spacers.spacer2") solid theme("digitv2.lightTheme.paper-secondary");
279
+ border-top: var(--digitv2-spacers-spacer2) solid var(--digitv2-lightTheme-paper-secondary);
280
280
  }
281
281
 
282
282
  .tooltip-left-start.with-arrow:before {
283
283
  content: "";
284
284
  position: absolute;
285
- top: theme("digitv2.spacers.spacer1");
285
+ top: var(--digitv2-spacers-spacer1);
286
286
  right: -0.45rem;
287
- border-left: theme("digitv2.spacers.spacer2") solid theme("digitv2.lightTheme.generic-inputborder");
288
- border-bottom: theme("digitv2.spacers.spacer2") solid transparent;
287
+ border-left: var(--digitv2-spacers-spacer2) solid var(--digitv2-lightTheme-generic-inputborder);
288
+ border-bottom: var(--digitv2-spacers-spacer2) solid transparent;
289
289
  transform: translateY(-50%);
290
290
  }
291
291
 
292
292
  .tooltip-left-start.with-arrow.light:before {
293
- border-left: theme("digitv2.spacers.spacer2") solid theme("digitv2.lightTheme.paper-secondary");
293
+ border-left: var(--digitv2-spacers-spacer2) solid var(--digitv2-lightTheme-paper-secondary);
294
294
 
295
295
  }
296
296
 
@@ -299,14 +299,14 @@
299
299
  position: absolute;
300
300
  top: 50%;
301
301
  right: -0.5rem;
302
- border-left: theme("digitv2.spacers.spacer2") solid theme("digitv2.lightTheme.generic-inputborder");
303
- border-top: theme("digitv2.spacers.spacer1") solid transparent;
304
- border-bottom: theme("digitv2.spacers.spacer1") solid transparent;
302
+ border-left: var(--digitv2-spacers-spacer2) solid var(--digitv2-lightTheme-generic-inputborder);
303
+ border-top: var(--digitv2-spacers-spacer1) solid transparent;
304
+ border-bottom: var(--digitv2-spacers-spacer1) solid transparent;
305
305
  transform: translateY(-50%);
306
306
  }
307
307
 
308
308
  .tooltip-left.with-arrow.light:before {
309
- border-left: theme("digitv2.spacers.spacer2") solid theme("digitv2.lightTheme.paper-secondary");
309
+ border-left: var(--digitv2-spacers-spacer2) solid var(--digitv2-lightTheme-paper-secondary);
310
310
  }
311
311
 
312
312
  .tooltip-left-end.with-arrow:before {
@@ -314,28 +314,28 @@
314
314
  position: absolute;
315
315
  top: calc(100% - 0.25rem);
316
316
  right: -0.45rem;
317
- border-left: theme("digitv2.spacers.spacer2") solid theme("digitv2.lightTheme.generic-inputborder");
318
- border-top: theme("digitv2.spacers.spacer2") solid transparent;
317
+ border-left: var(--digitv2-spacers-spacer2) solid var(--digitv2-lightTheme-generic-inputborder);
318
+ border-top: var(--digitv2-spacers-spacer2) solid transparent;
319
319
  transform: translateY(-50%);
320
320
  }
321
321
 
322
322
  .tooltip-left-end.with-arrow.light:before {
323
- border-left: theme("digitv2.spacers.spacer2") solid theme("digitv2.lightTheme.paper-secondary");
323
+ border-left: var(--digitv2-spacers-spacer2) solid var(--digitv2-lightTheme-paper-secondary);
324
324
 
325
325
  }
326
326
 
327
327
  .tooltip-right-start.with-arrow:before {
328
328
  content: "";
329
329
  position: absolute;
330
- top: theme("digitv2.spacers.spacer1");
330
+ top: var(--digitv2-spacers-spacer1);
331
331
  left: -0.45rem;
332
- border-right: theme("digitv2.spacers.spacer2") solid theme("digitv2.lightTheme.generic-inputborder");
333
- border-bottom: theme("digitv2.spacers.spacer2") solid transparent;
332
+ border-right: var(--digitv2-spacers-spacer2) solid var(--digitv2-lightTheme-generic-inputborder);
333
+ border-bottom: var(--digitv2-spacers-spacer2) solid transparent;
334
334
  transform: translateY(-50%);
335
335
  }
336
336
 
337
337
  .tooltip-right-start.with-arrow.light:before {
338
- border-right: theme("digitv2.spacers.spacer2") solid theme("digitv2.lightTheme.paper-secondary");
338
+ border-right: var(--digitv2-spacers-spacer2) solid var(--digitv2-lightTheme-paper-secondary);
339
339
  }
340
340
 
341
341
  .tooltip-right.with-arrow:before {
@@ -343,14 +343,14 @@
343
343
  position: absolute;
344
344
  top: 50%;
345
345
  left: -0.5rem;
346
- border-right: theme("digitv2.spacers.spacer2") solid theme("digitv2.lightTheme.generic-inputborder");
347
- border-top: theme("digitv2.spacers.spacer1") solid transparent;
348
- border-bottom: theme("digitv2.spacers.spacer1") solid transparent;
346
+ border-right: var(--digitv2-spacers-spacer2) solid var(--digitv2-lightTheme-generic-inputborder);
347
+ border-top: var(--digitv2-spacers-spacer1) solid transparent;
348
+ border-bottom: var(--digitv2-spacers-spacer1) solid transparent;
349
349
  transform: translateY(-50%);
350
350
  }
351
351
 
352
352
  .tooltip-right.with-arrow.light:before {
353
- border-right: theme("digitv2.spacers.spacer2") solid theme("digitv2.lightTheme.paper-secondary");
353
+ border-right: var(--digitv2-spacers-spacer2) solid var(--digitv2-lightTheme-paper-secondary);
354
354
  }
355
355
 
356
356
  .tooltip-right-end.with-arrow:before {
@@ -358,11 +358,11 @@
358
358
  position: absolute;
359
359
  top: calc(100% - 0.25rem);
360
360
  left: -0.45rem;
361
- border-right: theme("digitv2.spacers.spacer2") solid theme("digitv2.lightTheme.generic-inputborder");
362
- border-top: theme("digitv2.spacers.spacer2") solid transparent;
361
+ border-right: var(--digitv2-spacers-spacer2) solid var(--digitv2-lightTheme-generic-inputborder);
362
+ border-top: var(--digitv2-spacers-spacer2) solid transparent;
363
363
  transform: translateY(-50%);
364
364
  }
365
365
 
366
366
  .tooltip-right-end.with-arrow.light:before {
367
- border-right: theme("digitv2.spacers.spacer2") solid theme("digitv2.lightTheme.paper-secondary");
367
+ border-right: var(--digitv2-spacers-spacer2) solid var(--digitv2-lightTheme-paper-secondary);
368
368
  }