@egovernments/digit-ui-components-css 0.0.2-beta.36 → 0.0.2-beta.38

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 (23) hide show
  1. package/dist/index.css +982 -70
  2. package/dist/index.min.css +2 -2
  3. package/package.json +1 -1
  4. package/src/digitv2/components/bottomSheetV2.scss +8 -1
  5. package/src/digitv2/components/buttonsV2.scss +3 -0
  6. package/src/digitv2/components/chipV2.scss +11 -1
  7. package/src/digitv2/components/dividerV2.scss +1 -0
  8. package/src/digitv2/components/fieldV1.scss +7 -0
  9. package/src/digitv2/components/filterCardV2.scss +417 -0
  10. package/src/digitv2/components/formCardV2.scss +33 -3
  11. package/src/digitv2/components/headerdropdownV2.scss +20 -0
  12. package/src/digitv2/components/labelFieldPairV2.scss +17 -0
  13. package/src/digitv2/components/multiSelectDropdownV2.scss +54 -2
  14. package/src/digitv2/components/popUpV2.scss +30 -2
  15. package/src/digitv2/components/radiobtnV2.scss +4 -0
  16. package/src/digitv2/components/selectDropdownV2.scss +135 -5
  17. package/src/digitv2/components/slideOverMenuV2.scss +24 -7
  18. package/src/digitv2/components/stepperV2.scss +12 -2
  19. package/src/digitv2/components/textInputV2.scss +2 -2
  20. package/src/digitv2/components/timelineV2.scss +20 -0
  21. package/src/digitv2/components/tooltipwrapperV2.scss +96 -27
  22. package/src/digitv2/components/viewCardV2.scss +100 -0
  23. package/src/digitv2/index.scss +2 -0
package/src/digitv2/components/popUpV2.scss CHANGED
@@ -21,7 +21,9 @@
21
21
  display: flex;
22
22
  top: 50%;
23
23
  left: 50%;
24
- transform: translate(-50%, -50%);
24
+ transform: translate(-50%, -50%) scale(0);
25
+ opacity: 0;
26
+ animation: scaleIn 300ms ease-in-out forwards;
25
27
 
26
28
  @media (min-width: 48rem) {
27
29
  max-height: 86%;
@@ -360,6 +362,10 @@
360
362
  }
361
363
  }
362
364
 
365
+ .digit-popup-wrapper.closing{
366
+ animation: scaleOut 300ms ease-in-out forwards;
367
+ }
368
+
363
369
  .digit-popup-children-wrap::-webkit-scrollbar {
364
370
  width: theme(digitv2.spacers.spacer2);
365
371
  background-color: theme(digitv2.lightTheme.generic-background);
@@ -373,4 +379,26 @@
373
379
  .digit-popup-children-wrap::-webkit-scrollbar-thumb {
374
380
  background-color: theme(digitv2.lightTheme.generic-divider);
375
381
  border-radius: 0.563rem;
376
- }
382
+ }
383
+
384
+ @keyframes popupscaleIn {
385
+ 0% {
386
+ transform: translate(-50%, -50%) scale(0);
387
+ opacity: 0;
388
+ }
389
+ 100% {
390
+ transform: translate(-50%, -50%) scale(1);
391
+ opacity: 1;
392
+ }
393
+ }
394
+
395
+ @keyframes popupscaleOut {
396
+ 0% {
397
+ transform: translate(-50%, -50%) scale(1);
398
+ opacity: 1;
399
+ }
400
+ 100% {
401
+ transform: translate(-50%, -50%) scale(0);
402
+ opacity: 0;
403
+ }
404
+ }
package/src/digitv2/components/radiobtnV2.scss CHANGED
@@ -12,6 +12,10 @@
12
12
  @apply block mb-md;
13
13
  }
14
14
 
15
+ &.vertical{
16
+ flex-direction: column
17
+ }
18
+
15
19
  .digit-radio-btn-wrap {
16
20
  @apply block float-left relative;
17
21
 
package/src/digitv2/components/selectDropdownV2.scss CHANGED
@@ -27,7 +27,33 @@
27
27
  color: theme(digitv2.lightTheme.generic-divider) !important;
28
28
  }
29
29
  input[type="text"] {
30
- @extend .typography.body-l;
30
+ @extend .typography.body-s;
31
+ @media (max-aspect-ratio: 9/16) {
32
+ /* Media query for mobile */
33
+ font-size: theme(digitv2.fontSize.body-s.mobile);
34
+ font-family: theme(digitv2.fontFamily.sans);
35
+ font-style: theme(digitv2.fontStyle.normal);
36
+ font-weight: theme(digitv2.fontWeight.regular);
37
+ line-height: theme(digitv2.lineHeight.lineheight2);
38
+ }
39
+
40
+ @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
41
+ /* Media query for tablets */
42
+ font-size: theme(digitv2.fontSize.body-s.tablet);
43
+ font-family: theme(digitv2.fontFamily.sans);
44
+ font-style: theme(digitv2.fontStyle.normal);
45
+ font-weight: theme(digitv2.fontWeight.regular);
46
+ line-height: theme(digitv2.lineHeight.lineheight2);
47
+ }
48
+
49
+ @media (min-aspect-ratio: 3/4) {
50
+ /* Media query for desktop */
51
+ font-size: theme(digitv2.fontSize.body-s.desktop);
52
+ font-family: theme(digitv2.fontFamily.sans);
53
+ font-style: theme(digitv2.fontStyle.normal);
54
+ font-weight: theme(digitv2.fontWeight.regular);
55
+ line-height: theme(digitv2.lineHeight.lineheight2);
56
+ }
31
57
  @apply absolute z-10 h-full outline-none;
32
58
  width:calc(100%- (theme(digitv2.spacers.spacer7)));
33
59
  background-color: transparent;
@@ -52,7 +78,33 @@
52
78
  @apply relative block w-full h-10 bg-white;
53
79
  border: 0.063rem solid theme(digitv2.lightTheme.primary-1);
54
80
  input[type="text"] {
55
- @extend .typography.body-l;
81
+ @extend .typography.body-s;
82
+ @media (max-aspect-ratio: 9/16) {
83
+ /* Media query for mobile */
84
+ font-size: theme(digitv2.fontSize.body-s.mobile);
85
+ font-family: theme(digitv2.fontFamily.sans);
86
+ font-style: theme(digitv2.fontStyle.normal);
87
+ font-weight: theme(digitv2.fontWeight.regular);
88
+ line-height: theme(digitv2.lineHeight.lineheight2);
89
+ }
90
+
91
+ @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
92
+ /* Media query for tablets */
93
+ font-size: theme(digitv2.fontSize.body-s.tablet);
94
+ font-family: theme(digitv2.fontFamily.sans);
95
+ font-style: theme(digitv2.fontStyle.normal);
96
+ font-weight: theme(digitv2.fontWeight.regular);
97
+ line-height: theme(digitv2.lineHeight.lineheight2);
98
+ }
99
+
100
+ @media (min-aspect-ratio: 3/4) {
101
+ /* Media query for desktop */
102
+ font-size: theme(digitv2.fontSize.body-s.desktop);
103
+ font-family: theme(digitv2.fontFamily.sans);
104
+ font-style: theme(digitv2.fontStyle.normal);
105
+ font-weight: theme(digitv2.fontWeight.regular);
106
+ line-height: theme(digitv2.lineHeight.lineheight2);
107
+ }
56
108
  @apply absolute z-10 h-full outline-none;
57
109
  width:calc(100%- (theme(digitv2.spacers.spacer7)));
58
110
  background-color: transparent;
@@ -369,7 +421,33 @@
369
421
  }
370
422
  }
371
423
  .digit-dropdown-employee-select-wrap--elipses {
372
- @extend .typography.body-l;
424
+ @extend .typography.body-s;
425
+ @media (max-aspect-ratio: 9/16) {
426
+ /* Media query for mobile */
427
+ font-size: theme(digitv2.fontSize.body-s.mobile);
428
+ font-family: theme(digitv2.fontFamily.sans);
429
+ font-style: theme(digitv2.fontStyle.normal);
430
+ font-weight: theme(digitv2.fontWeight.regular);
431
+ line-height: theme(digitv2.lineHeight.lineheight2);
432
+ }
433
+
434
+ @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
435
+ /* Media query for tablets */
436
+ font-size: theme(digitv2.fontSize.body-s.tablet);
437
+ font-family: theme(digitv2.fontFamily.sans);
438
+ font-style: theme(digitv2.fontStyle.normal);
439
+ font-weight: theme(digitv2.fontWeight.regular);
440
+ line-height: theme(digitv2.lineHeight.lineheight2);
441
+ }
442
+
443
+ @media (min-aspect-ratio: 3/4) {
444
+ /* Media query for desktop */
445
+ font-size: theme(digitv2.fontSize.body-s.desktop);
446
+ font-family: theme(digitv2.fontFamily.sans);
447
+ font-style: theme(digitv2.fontStyle.normal);
448
+ font-weight: theme(digitv2.fontWeight.regular);
449
+ line-height: theme(digitv2.lineHeight.lineheight2);
450
+ }
373
451
  @apply overflow-hidden whitespace-no-wrap;
374
452
  width:calc(100%- (theme(digitv2.spacers.spacer7)));
375
453
  text-overflow: ellipsis;
@@ -398,7 +476,33 @@
398
476
  @apply relative block w-full h-10 bg-white;
399
477
  border: 0.063rem solid theme(digitv2.lightTheme.text-secondary);
400
478
  input[type="text"] {
401
- @extend .typography.body-l;
479
+ @extend .typography.body-s;
480
+ @media (max-aspect-ratio: 9/16) {
481
+ /* Media query for mobile */
482
+ font-size: theme(digitv2.fontSize.body-s.mobile);
483
+ font-family: theme(digitv2.fontFamily.sans);
484
+ font-style: theme(digitv2.fontStyle.normal);
485
+ font-weight: theme(digitv2.fontWeight.regular);
486
+ line-height: theme(digitv2.lineHeight.lineheight2);
487
+ }
488
+
489
+ @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
490
+ /* Media query for tablets */
491
+ font-size: theme(digitv2.fontSize.body-s.tablet);
492
+ font-family: theme(digitv2.fontFamily.sans);
493
+ font-style: theme(digitv2.fontStyle.normal);
494
+ font-weight: theme(digitv2.fontWeight.regular);
495
+ line-height: theme(digitv2.lineHeight.lineheight2);
496
+ }
497
+
498
+ @media (min-aspect-ratio: 3/4) {
499
+ /* Media query for desktop */
500
+ font-size: theme(digitv2.fontSize.body-s.desktop);
501
+ font-family: theme(digitv2.fontFamily.sans);
502
+ font-style: theme(digitv2.fontStyle.normal);
503
+ font-weight: theme(digitv2.fontWeight.regular);
504
+ line-height: theme(digitv2.lineHeight.lineheight2);
505
+ }
402
506
  @apply absolute z-10 h-full outline-none;
403
507
  width:calc(100%- (theme(digitv2.spacers.spacer7)));
404
508
  background-color: transparent;
@@ -428,7 +532,33 @@
428
532
  @apply relative block w-full h-10;
429
533
  border: 0.063rem solid theme(digitv2.lightTheme.primary-1);
430
534
  input[type="text"] {
431
- @extend .typography.body-l;
535
+ @extend .typography.body-s;
536
+ @media (max-aspect-ratio: 9/16) {
537
+ /* Media query for mobile */
538
+ font-size: theme(digitv2.fontSize.body-s.mobile);
539
+ font-family: theme(digitv2.fontFamily.sans);
540
+ font-style: theme(digitv2.fontStyle.normal);
541
+ font-weight: theme(digitv2.fontWeight.regular);
542
+ line-height: theme(digitv2.lineHeight.lineheight2);
543
+ }
544
+
545
+ @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
546
+ /* Media query for tablets */
547
+ font-size: theme(digitv2.fontSize.body-s.tablet);
548
+ font-family: theme(digitv2.fontFamily.sans);
549
+ font-style: theme(digitv2.fontStyle.normal);
550
+ font-weight: theme(digitv2.fontWeight.regular);
551
+ line-height: theme(digitv2.lineHeight.lineheight2);
552
+ }
553
+
554
+ @media (min-aspect-ratio: 3/4) {
555
+ /* Media query for desktop */
556
+ font-size: theme(digitv2.fontSize.body-s.desktop);
557
+ font-family: theme(digitv2.fontFamily.sans);
558
+ font-style: theme(digitv2.fontStyle.normal);
559
+ font-weight: theme(digitv2.fontWeight.regular);
560
+ line-height: theme(digitv2.lineHeight.lineheight2);
561
+ }
432
562
  @apply absolute z-10 h-full outline-none;
433
563
  width:calc(100%- (theme(digitv2.spacers.spacer7)));
434
564
  background-color: transparent;
package/src/digitv2/components/slideOverMenuV2.scss CHANGED
@@ -6,9 +6,8 @@
6
6
  z-index: 1000;
7
7
  overflow: hidden;
8
8
  border: 0.063rem solid theme(digitv2.lightTheme.generic-divider);
9
- background: #FAFAFA;
9
+ background: theme(digitv2.lightTheme.paper-secondary);
10
10
  box-shadow: -0.125rem -0.25rem 0.356rem 0rem #00000026;
11
-
12
11
  }
13
12
 
14
13
  .digit-slider-container.left {
@@ -56,7 +55,7 @@
56
55
  border-radius: 50%;
57
56
  z-index: 1001;
58
57
  display: flex;
59
- gap:theme(digitv2.spacers.spacer1);
58
+ gap: theme(digitv2.spacers.spacer1);
60
59
  align-items: center;
61
60
 
62
61
  .scroll-bar {
@@ -64,15 +63,16 @@
64
63
  width: theme(digitv2.spacers.spacer2);
65
64
  border-radius: 0.563rem;
66
65
  background-color: #D9D9D9;
67
-
68
66
  }
69
67
 
70
68
  .slider-handler-svg {
71
- background: #FFFFFF;
69
+ background: theme(digitv2.lightTheme.paper-primary);
72
70
  box-shadow: 0rem 0.063rem 0.125rem 0rem #00000029;
73
71
  width: theme(digitv2.spacers.spacer8);
74
- height:theme(digitv2.spacers.spacer8);
75
-
72
+ height: 3.25rem;
73
+ display: flex !important;
74
+ align-items: center;
75
+ border: 0.063rem solid theme(digitv2.lightTheme.generic-divider);
76
76
  }
77
77
 
78
78
  &.dynamic {
@@ -105,6 +105,15 @@
105
105
  flex-shrink: 0;
106
106
  padding: theme(digitv2.spacers.spacer4);
107
107
  border-bottom: 0.063rem solid #d6d5d4;
108
+
109
+ .close-icon {
110
+ cursor: pointer;
111
+ position: absolute;
112
+ top: theme(digitv2.spacers.spacer2);
113
+ right: theme(digitv2.spacers.spacer2);
114
+ width: theme(digitv2.spacers.spacer8);
115
+ height: theme(digitv2.spacers.spacer8);
116
+ }
108
117
  }
109
118
 
110
119
  .slider-section {
@@ -166,6 +175,14 @@
166
175
  font-weight: theme(digitv2.fontWeight.regular);
167
176
  line-height: theme(digitv2.lineHeight.lineheight2);
168
177
  }
178
+
179
+ &.with-sections {
180
+ padding: theme(digitv2.spacers.spacer0);
181
+
182
+ .slider-section {
183
+ padding: theme(digitv2.spacers.spacer4);
184
+ }
185
+ }
169
186
  }
170
187
 
171
188
 
package/src/digitv2/components/stepperV2.scss CHANGED
@@ -163,7 +163,7 @@
163
163
  &.vertical {
164
164
  top: calc(50% + (theme(digitv2.spacers.spacer2)));
165
165
  bottom: calc(-50% + (theme(digitv2.spacers.spacer2)));
166
- left: -(theme(digitv2.spacers.spacer12));
166
+ left: -3.1rem;
167
167
  width: 0.125rem;
168
168
  height: auto;
169
169
  transform: rotate(90deg);
@@ -173,10 +173,20 @@
173
173
  border-color: theme(digitv2.lightTheme.primary-1);
174
174
  }
175
175
  @media (max-aspect-ratio: 9/16) {
176
- left: -2.75rem;
176
+ left: -3.65rem;
177
+ min-width: 4.313rem;
178
+ max-width: 16.875rem;
179
+ top: 0.875rem;
177
180
  }
178
181
  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
179
182
  left: -3.5rem;
183
+ min-width: 6.313rem;
184
+ max-width: 39.438rem;
185
+ }
186
+
187
+ @media (min-aspect-ratio: 3/4) {
188
+ min-width: 5.313rem;
189
+ max-width: 82.688rem;
180
190
  }
181
191
  }
182
192
  }
package/src/digitv2/components/textInputV2.scss CHANGED
@@ -139,13 +139,13 @@
139
139
  pointer-events: none !important;
140
140
  border: 0.063rem solid theme(digitv2.lightTheme.generic-inputborder);
141
141
  background: theme(digitv2.lightTheme.generic-background);
142
- color: theme(digitv2.lightTheme.text-disabled);
142
+ color: theme(digitv2.lightTheme.text-secondary);
143
143
  }
144
144
 
145
145
  input {
146
146
  border: 0.063rem solid theme(digitv2.lightTheme.generic-inputborder);
147
147
  background: theme(digitv2.lightTheme.generic-background);
148
- color: theme(digitv2.lightTheme.text-disabled);
148
+ color: theme(digitv2.lightTheme.text-secondary);
149
149
  }
150
150
 
151
151
  .digit-numeric-button-prefix,
package/src/digitv2/components/timelineV2.scss CHANGED
@@ -128,6 +128,26 @@
128
128
 
129
129
  .timeline-additional-elements-column {
130
130
  @apply flex flex-col items-start;
131
+ @extend .typography.body-s;
132
+ font-family: theme(digitv2.fontFamily.sans);
133
+ font-style: theme(digitv2.fontStyle.normal);
134
+ font-weight: theme(digitv2.fontWeight.regular);
135
+ line-height: theme(digitv2.lineHeight.lineheight2);
136
+
137
+ @media (max-aspect-ratio: 9/16) {
138
+ /* Media query for mobile */
139
+ font-size: theme(digitv2.fontSize.body-s.mobile);
140
+ }
141
+
142
+ @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
143
+ /* Media query for tablets */
144
+ font-size: theme(digitv2.fontSize.body-s.tablet);
145
+ }
146
+
147
+ @media (min-aspect-ratio: 3/4) {
148
+ /* Media query for desktop */
149
+ font-size: theme(digitv2.fontSize.body-s.desktop);
150
+ }
131
151
  gap: theme(digitv2.spacers.spacer4);
132
152
 
133
153
  .timeline-individual-element {
package/src/digitv2/components/tooltipwrapperV2.scss CHANGED
@@ -3,7 +3,7 @@
3
3
  display: inline-block;
4
4
  }
5
5
 
6
- .tooltip-content{
6
+ .tooltip-content {
7
7
  position: absolute;
8
8
  background-color: theme(digitv2.lightTheme.generic-inputborder);
9
9
  color: theme(digitv2.lightTheme.paper-primary);
@@ -16,7 +16,7 @@
16
16
  display: flex;
17
17
  justify-content: center;
18
18
  flex-direction: column;
19
- gap:0.625rem;
19
+ gap: 0.625rem;
20
20
  min-width: 4.125rem;
21
21
  max-width: 14.563rem;
22
22
 
@@ -37,8 +37,14 @@
37
37
  font-size: theme(digitv2.fontSize.body-s.desktop);
38
38
  }
39
39
 
40
+ &.light {
41
+ color: theme(digitv2.lightTheme.text-primary);
42
+ background-color: theme(digitv2.lightTheme.paper-secondary);
43
+ box-shadow: 0rem 0.063rem 0.125rem 0rem #36363629;
44
+ border: 0.063rem solid theme(digitv2.lightTheme.generic-divider);
45
+ }
40
46
 
41
- .tooltip-header{
47
+ .tooltip-header {
42
48
  @extend .typography.heading-s;
43
49
  font-family: theme(digitv2.fontFamily.sans);
44
50
  font-style: theme(digitv2.fontStyle.normal);
@@ -59,12 +65,29 @@
59
65
  /* Media query for desktop */
60
66
  font-size: theme(digitv2.fontSize.heading-s.desktop);
61
67
  }
68
+
62
69
  color: theme(digitv2.lightTheme.paper-primary);
70
+
71
+ &.light {
72
+ color: theme(digitv2.lightTheme.text-primary);
73
+ }
63
74
  }
64
75
 
65
- .tooltip-description{
76
+ .tooltip-data{
77
+ width: 100%;
78
+ display: flex;
79
+ align-items: center;
80
+ justify-content: flex-start;
81
+ flex-direction: column
82
+ }
83
+
84
+ .tooltip-description {
66
85
  @extend .typography.body-xs;
67
86
  color: theme(digitv2.lightTheme.paper-primary);
87
+
88
+ &.light {
89
+ color: theme(digitv2.lightTheme.text-primary);
90
+ }
68
91
  }
69
92
  }
70
93
 
@@ -72,7 +95,7 @@
72
95
  top: theme(digitv2.spacers.spacer12);
73
96
  left: 0;
74
97
 
75
- &.with-arrow{
98
+ &.with-arrow {
76
99
  border-top-left-radius: theme(digitv2.spacers.spacer0);
77
100
  }
78
101
 
@@ -88,7 +111,7 @@
88
111
  top: theme(digitv2.spacers.spacer12);
89
112
  right: 0;
90
113
 
91
- &.with-arrow{
114
+ &.with-arrow {
92
115
  border-top-right-radius: 0px;
93
116
  }
94
117
  }
@@ -97,7 +120,7 @@
97
120
  bottom: theme(digitv2.spacers.spacer12);
98
121
  left: 0;
99
122
 
100
- &.with-arrow{
123
+ &.with-arrow {
101
124
  border-bottom-left-radius: theme(digitv2.spacers.spacer0);
102
125
  }
103
126
  }
@@ -113,7 +136,7 @@
113
136
  bottom: theme(digitv2.spacers.spacer12);
114
137
  right: 0;
115
138
 
116
- &.with-arrow{
139
+ &.with-arrow {
117
140
  border-bottom-right-radius: theme(digitv2.spacers.spacer0);
118
141
  }
119
142
  }
@@ -122,7 +145,7 @@
122
145
  right: calc(100% + theme(digitv2.spacers.spacer2));
123
146
  top: 0;
124
147
 
125
- &.with-arrow{
148
+ &.with-arrow {
126
149
  border-top-right-radius: theme(digitv2.spacers.spacer0);
127
150
  }
128
151
  }
@@ -137,7 +160,7 @@
137
160
  right: calc(100% + theme(digitv2.spacers.spacer2));
138
161
  bottom: 0;
139
162
 
140
- &.with-arrow{
163
+ &.with-arrow {
141
164
  border-bottom-right-radius: theme(digitv2.spacers.spacer0);
142
165
  }
143
166
  }
@@ -146,7 +169,7 @@
146
169
  left: calc(100% + theme(digitv2.spacers.spacer2));
147
170
  top: 0;
148
171
 
149
- &.with-arrow{
172
+ &.with-arrow {
150
173
  border-top-left-radius: theme(digitv2.spacers.spacer0);
151
174
  }
152
175
  }
@@ -161,23 +184,27 @@
161
184
  left: calc(100% + theme(digitv2.spacers.spacer2));
162
185
  bottom: 0;
163
186
 
164
- &.with-arrow{
187
+ &.with-arrow {
165
188
  border-bottom-left-radius: theme(digitv2.spacers.spacer0);
166
189
  }
167
- }
190
+ }
168
191
 
169
192
 
170
- .tooltip-bottom-start.with-arrow:before{
193
+ .tooltip-bottom-start.with-arrow:before {
171
194
  content: "";
172
195
  position: absolute;
173
196
  top: -0.5rem;
174
- left:theme(digitv2.spacers.spacer1);
197
+ left: theme(digitv2.spacers.spacer1);
175
198
  transform: translateX(-50%);
176
199
  border-bottom: theme(digitv2.spacers.spacer2) solid theme(digitv2.lightTheme.generic-inputborder);
177
- border-right:theme(digitv2.spacers.spacer2) solid transparent;
200
+ border-right: theme(digitv2.spacers.spacer2) solid transparent;
201
+ }
202
+
203
+ .tooltip-bottom-start.with-arrow.light:before {
204
+ border-bottom: theme(digitv2.spacers.spacer2) solid theme(digitv2.lightTheme.paper-secondary);
178
205
  }
179
206
 
180
- .tooltip-bottom.with-arrow:before{
207
+ .tooltip-bottom.with-arrow:before {
181
208
  content: "";
182
209
  position: absolute;
183
210
  top: -0.5rem;
@@ -188,19 +215,25 @@
188
215
  border-right: theme(digitv2.spacers.spacer1) solid transparent;
189
216
  }
190
217
 
218
+ .tooltip-bottom.with-arrow.light:before {
219
+ border-bottom: theme(digitv2.spacers.spacer2) solid theme(digitv2.lightTheme.paper-secondary);
220
+ }
191
221
 
192
222
  .tooltip-bottom-end.with-arrow:before {
193
223
  content: "";
194
224
  position: absolute;
195
225
  top: -0.5rem;
196
- left:calc(100% -0.25rem);
226
+ left: calc(100% -0.25rem);
197
227
  transform: translateX(-50%);
198
- border-bottom:theme(digitv2.spacers.spacer2) solid theme(digitv2.lightTheme.generic-inputborder);
228
+ border-bottom: theme(digitv2.spacers.spacer2) solid theme(digitv2.lightTheme.generic-inputborder);
199
229
  border-left: theme(digitv2.spacers.spacer2) solid transparent;
200
230
  }
201
231
 
232
+ .tooltip-bottom-end.with-arrow.light:before {
233
+ border-bottom: theme(digitv2.spacers.spacer2) solid theme(digitv2.lightTheme.paper-secondary);
234
+ }
202
235
 
203
- .tooltip-top-start.with-arrow:before{
236
+ .tooltip-top-start.with-arrow:before {
204
237
  content: "";
205
238
  position: absolute;
206
239
  bottom: -0.5rem;
@@ -210,7 +243,11 @@
210
243
  border-right: theme(digitv2.spacers.spacer2) solid transparent;
211
244
  }
212
245
 
213
- .tooltip-top.with-arrow:before{
246
+ .tooltip-top-start.with-arrow.light:before {
247
+ border-top: theme(digitv2.spacers.spacer2) solid theme(digitv2.lightTheme.paper-secondary);
248
+ }
249
+
250
+ .tooltip-top.with-arrow:before {
214
251
  content: "";
215
252
  position: absolute;
216
253
  bottom: -0.5rem;
@@ -221,18 +258,25 @@
221
258
  border-right: theme(digitv2.spacers.spacer1) solid transparent;
222
259
  }
223
260
 
261
+ .tooltip-top.with-arrow.light:before {
262
+ border-top: theme(digitv2.spacers.spacer2) solid theme(digitv2.lightTheme.paper-secondary);
263
+ }
264
+
224
265
  .tooltip-top-end.with-arrow:before {
225
266
  content: "";
226
267
  position: absolute;
227
268
  bottom: -0.5rem;
228
- left:calc(100% -0.25rem);
269
+ left: calc(100% -0.25rem);
229
270
  transform: translateX(-50%);
230
271
  border-top: theme(digitv2.spacers.spacer2) solid theme(digitv2.lightTheme.generic-inputborder);
231
272
  border-left: theme(digitv2.spacers.spacer2) solid transparent;
232
273
  }
233
274
 
275
+ .tooltip-top-end.with-arrow.light:before {
276
+ border-top: theme(digitv2.spacers.spacer2) solid theme(digitv2.lightTheme.paper-secondary);
277
+ }
234
278
 
235
- .tooltip-left-start.with-arrow:before{
279
+ .tooltip-left-start.with-arrow:before {
236
280
  content: "";
237
281
  position: absolute;
238
282
  top: theme(digitv2.spacers.spacer1);
@@ -242,6 +286,11 @@
242
286
  transform: translateY(-50%);
243
287
  }
244
288
 
289
+ .tooltip-left-start.with-arrow.light:before {
290
+ border-left: theme(digitv2.spacers.spacer2) solid theme(digitv2.lightTheme.paper-secondary);
291
+
292
+ }
293
+
245
294
  .tooltip-left.with-arrow:before {
246
295
  content: "";
247
296
  position: absolute;
@@ -253,17 +302,26 @@
253
302
  transform: translateY(-50%);
254
303
  }
255
304
 
305
+ .tooltip-left.with-arrow.light:before {
306
+ border-left: theme(digitv2.spacers.spacer2) solid theme(digitv2.lightTheme.paper-secondary);
307
+ }
308
+
256
309
  .tooltip-left-end.with-arrow:before {
257
310
  content: "";
258
311
  position: absolute;
259
- top:calc(100% -0.25rem);
312
+ top: calc(100% -0.25rem);
260
313
  right: -0.45rem;
261
314
  border-left: theme(digitv2.spacers.spacer2) solid theme(digitv2.lightTheme.generic-inputborder);
262
315
  border-top: theme(digitv2.spacers.spacer2) solid transparent;
263
316
  transform: translateY(-50%);
264
317
  }
265
318
 
266
- .tooltip-right-start.with-arrow:before{
319
+ .tooltip-left-end.with-arrow.light:before {
320
+ border-left: theme(digitv2.spacers.spacer2) solid theme(digitv2.lightTheme.paper-secondary);
321
+
322
+ }
323
+
324
+ .tooltip-right-start.with-arrow:before {
267
325
  content: "";
268
326
  position: absolute;
269
327
  top: theme(digitv2.spacers.spacer1);
@@ -273,7 +331,11 @@
273
331
  transform: translateY(-50%);
274
332
  }
275
333
 
276
- .tooltip-right.with-arrow:before{
334
+ .tooltip-right-start.with-arrow.light:before {
335
+ border-right: theme(digitv2.spacers.spacer2) solid theme(digitv2.lightTheme.paper-secondary);
336
+ }
337
+
338
+ .tooltip-right.with-arrow:before {
277
339
  content: "";
278
340
  position: absolute;
279
341
  top: 50%;
@@ -284,13 +346,20 @@
284
346
  transform: translateY(-50%);
285
347
  }
286
348
 
349
+ .tooltip-right.with-arrow.light:before {
350
+ border-right: theme(digitv2.spacers.spacer2) solid theme(digitv2.lightTheme.paper-secondary);
351
+ }
287
352
 
288
353
  .tooltip-right-end.with-arrow:before {
289
354
  content: "";
290
355
  position: absolute;
291
- top:calc(100% -0.25rem);
356
+ top: calc(100% -0.25rem);
292
357
  left: -0.45rem;
293
358
  border-right: theme(digitv2.spacers.spacer2) solid theme(digitv2.lightTheme.generic-inputborder);
294
359
  border-top: theme(digitv2.spacers.spacer2) solid transparent;
295
360
  transform: translateY(-50%);
361
+ }
362
+
363
+ .tooltip-right-end.with-arrow.light:before {
364
+ border-right: theme(digitv2.spacers.spacer2) solid theme(digitv2.lightTheme.paper-secondary);
296
365
  }