fix: vertically center chart legend and tooltip markers (#238)

Co-authored-by: ClaudioGSDB <csciotto@amazon.de>

Author: ClaudioGSDB

src/internal/components/chart-legend/styles.scss

@@ -63,6 +63,7 @@
   @include styles.default-text-style;
 
   display: inline-flex;
+  align-items: center;
   padding-block: 0;
   padding-inline: 0;
   border-block: 0;

src/internal/components/series-details/styles.scss

@@ -40,6 +40,7 @@ $font-weight-bold: cs.$font-weight-heading-s;
   > .key {
     @include styles.text-wrapping;
     display: inline-flex;
+    align-items: center;
     color: cs.$color-text-group-label;
   }
 }
@@ -101,7 +102,8 @@ $font-weight-bold: cs.$font-weight-heading-s;
 
 .highlight-indicator {
   position: absolute;
-  top: 3px;
+  top: 50%;
+  transform: translateY(-50%);
   left: -6px;
   inline-size: 3px;
   block-size: calc(marker.$marker-size - 2px);

src/internal/components/series-marker/styles.scss

@@ -8,12 +8,10 @@
 
 $marker-size: 16px;
 $marker-inline-size: 25px; // marker-inline-size is greater than marker-size, to have space for the (potential) status marker.
-$marker-margin-top: cs.$space-static-xxxs;
 $marker-margin-right: cs.$space-static-xxs;
 
 .marker {
   @include styles.styles-reset;
-  margin-block-start: $marker-margin-top;
   border-start-start-radius: 2px;
   border-start-end-radius: 2px;
   border-end-start-radius: 2px;