@egovernments/digit-ui-components-css 0.2.0-beta.9 → 0.2.0-rc.16

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