HeatmapTooltip: Refactor to simplify upcoming PRs (#78436)

public/app/core/components/ColorScale/ColorScale.tsx

@@ -128,40 +128,40 @@ function clampPercent100(v: number) {
 }
 
 const getStyles = (theme: GrafanaTheme2, colors: string[]) => ({
-  scaleWrapper: css`
-    width: 100%;
-    font-size: 11px;
-    opacity: 1;
-  `,
-  scaleGradient: css`
-    background: linear-gradient(90deg, ${colors.join()});
-    height: 10px;
-    pointer-events: none;
-  `,
-  legendValues: css`
-    display: flex;
-    justify-content: space-between;
-    pointer-events: none;
-  `,
-  hoverValue: css`
-    position: absolute;
-    margin-top: -14px;
-    padding: 3px 15px;
-    background: ${theme.colors.background.primary};
-    transform: translateX(-50%);
-  `,
-  followerContainer: css`
-    position: relative;
-    pointer-events: none;
-    white-space: nowrap;
-  `,
-  follower: css`
-    position: absolute;
-    height: 14px;
-    width: 14px;
-    border-radius: 50%;
-    transform: translateX(-50%) translateY(-50%);
-    border: 2px solid ${theme.colors.text.primary};
-    margin-top: 5px;
-  `,
+  scaleWrapper: css({
+    width: '100%',
+    fontSize: '11px',
+    opacity: 1,
+  }),
+  scaleGradient: css({
+    background: `linear-gradient(90deg, ${colors.join()})`,
+    height: '10px',
+    pointerEvents: 'none',
+  }),
+  legendValues: css({
+    display: 'flex',
+    justifyContent: 'space-between',
+    pointerEvents: 'none',
+  }),
+  hoverValue: css({
+    position: 'absolute',
+    marginTop: '-14px',
+    padding: '3px 15px',
+    background: theme.colors.background.primary,
+    transform: 'translateX(-50%)',
+  }),
+  followerContainer: css({
+    position: 'relative',
+    pointerEvents: 'none',
+    whiteSpace: 'nowrap',
+  }),
+  follower: css({
+    position: 'absolute',
+    height: '14px',
+    width: '14px',
+    borderRadius: theme.shape.radius.default,
+    transform: 'translateX(-50%) translateY(-50%)',
+    border: `2px solid ${theme.colors.text.primary}`,
+    marginTop: '5px',
+  }),
 });