diff --git a/x-pack/platform/plugins/shared/maps/public/classes/styles/vector/components/color/other_category_color_picker.tsx b/x-pack/platform/plugins/shared/maps/public/classes/styles/vector/components/color/other_category_color_picker.tsx
index f4c538ef72f4b..c602e458df98c 100644
--- a/x-pack/platform/plugins/shared/maps/public/classes/styles/vector/components/color/other_category_color_picker.tsx
+++ b/x-pack/platform/plugins/shared/maps/public/classes/styles/vector/components/color/other_category_color_picker.tsx
@@ -6,19 +6,10 @@
  */
 
 import React from 'react';
-import { euiThemeVars } from '@kbn/ui-theme';
-import { EuiFormRow, EuiToolTip } from '@elastic/eui';
+import { EuiFormRow, EuiToolTip, useEuiTheme } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { MbValidatedColorPicker } from './mb_validated_color_picker';
-import { OTHER_CATEGORY_LABEL, OTHER_CATEGORY_DEFAULT_COLOR } from '../../style_util';
-
-const OTHER_CATEGORY_SWATCHES = [
-  euiThemeVars.euiColorLightestShade,
-  euiThemeVars.euiColorLightShade,
-  euiThemeVars.euiColorMediumShade,
-  euiThemeVars.euiColorDarkShade,
-  euiThemeVars.euiColorDarkestShade,
-];
+import { OTHER_CATEGORY_DEFAULT_COLOR, OTHER_CATEGORY_LABEL } from '../../style_util';
 
 interface Props {
   onChange: (color: string) => void;
@@ -26,6 +17,16 @@ interface Props {
 }
 
 export function OtherCategoryColorPicker(props: Props) {
+  const { euiTheme } = useEuiTheme();
+
+  const OTHER_CATEGORY_SWATCHES = [
+    euiTheme.colors.textInverse,
+    euiTheme.colors.textDisabled,
+    euiTheme.colors.textSubdued,
+    euiTheme.colors.textParagraph,
+    euiTheme.colors.textHeading,
+  ];
+
   return (
     <EuiFormRow>
       <EuiToolTip
diff --git a/x-pack/platform/plugins/shared/maps/public/classes/styles/vector/components/legend/size/__snapshots__/marker_size_legend.test.tsx.snap b/x-pack/platform/plugins/shared/maps/public/classes/styles/vector/components/legend/size/__snapshots__/marker_size_legend.test.tsx.snap
index 984d316d0fec2..05b21d7b3fa80 100644
--- a/x-pack/platform/plugins/shared/maps/public/classes/styles/vector/components/legend/size/__snapshots__/marker_size_legend.test.tsx.snap
+++ b/x-pack/platform/plugins/shared/maps/public/classes/styles/vector/components/legend/size/__snapshots__/marker_size_legend.test.tsx.snap
@@ -38,123 +38,54 @@ exports[`Should invert legend 1`] = `
     height={55}
     xmlns="http://www.w3.org/2000/svg"
   >
-    <g
-      key="7"
-    >
-      <line
-        style={
-          Object {
-            "stroke": "#d3dae6",
-          }
-        }
-        x1={25}
-        x2={56.25}
-        y1={40}
-        y2={40}
-      />
-      <RightAlignedText
-        setWidth={[Function]}
-        style={
-          Object {
-            "fill": "#343741",
-            "fontSize": 10,
-          }
-        }
-        value="19KB"
-        x={61.25}
-        y={45}
-      />
-      <circle
-        cx={25}
-        cy={47}
-        r={7}
-        style={
-          Object {
-            "fillOpacity": 0,
-            "stroke": "#343741",
-            "strokeWidth": 1,
-          }
-        }
-      />
-    </g>
-    <g
-      key="15.5"
-    >
-      <line
-        style={
-          Object {
-            "stroke": "#d3dae6",
-          }
-        }
-        x1={25}
-        x2={56.25}
-        y1={23}
-        y2={23}
-      />
-      <RightAlignedText
-        setWidth={[Function]}
-        style={
-          Object {
-            "fill": "#343741",
-            "fontSize": 10,
-          }
-        }
-        value="14.25KB"
-        x={61.25}
-        y={28}
-      />
-      <circle
-        cx={25}
-        cy={38.5}
-        r={15.5}
-        style={
-          Object {
-            "fillOpacity": 0,
-            "stroke": "#343741",
-            "strokeWidth": 1,
-          }
-        }
-      />
-    </g>
-    <g
-      key="24"
-    >
-      <line
-        style={
-          Object {
-            "stroke": "#d3dae6",
-          }
-        }
-        x1={25}
-        x2={56.25}
-        y1={6}
-        y2={6}
-      />
-      <RightAlignedText
-        setWidth={[Function]}
-        style={
-          Object {
-            "fill": "#343741",
-            "fontSize": 10,
-          }
-        }
-        value="0KB"
-        x={61.25}
-        y={11}
-      />
-      <circle
-        cx={25}
-        cy={30}
-        r={24}
-        style={
-          Object {
-            "fillOpacity": 0,
-            "stroke": "#343741",
-            "strokeWidth": 1,
-          }
-        }
-      />
-    </g>
+    <MapMarker
+      circleCenterX={25}
+      circleCenterY={47}
+      circleStyle={
+        Object {
+          "fillOpacity": 0,
+          "strokeWidth": 1,
+        }
+      }
+      circleTopY={40}
+      formattedValue="19KB"
+      onWidthChange={[Function]}
+      radius={7}
+      textOffset={5}
+      textY={45}
+    />
+    <MapMarker
+      circleCenterX={25}
+      circleCenterY={38.5}
+      circleStyle={
+        Object {
+          "fillOpacity": 0,
+          "strokeWidth": 1,
+        }
+      }
+      circleTopY={23}
+      formattedValue="14.25KB"
+      onWidthChange={[Function]}
+      radius={15.5}
+      textOffset={5}
+      textY={28}
+    />
+    <MapMarker
+      circleCenterX={25}
+      circleCenterY={30}
+      circleStyle={
+        Object {
+          "fillOpacity": 0,
+          "strokeWidth": 1,
+        }
+      }
+      circleTopY={6}
+      formattedValue="0KB"
+      onWidthChange={[Function]}
+      radius={24}
+      textOffset={5}
+      textY={11}
+    />
   </svg>
 </div>
 `;
@@ -197,201 +128,86 @@ exports[`Should render legend 1`] = `
     height={71}
     xmlns="http://www.w3.org/2000/svg"
   >
-    <g
-      key="7"
-    >
-      <line
-        style={
-          Object {
-            "stroke": "#d3dae6",
-          }
-        }
-        x1={33}
-        x2={74.25}
-        y1={56}
-        y2={56}
-      />
-      <RightAlignedText
-        setWidth={[Function]}
-        style={
-          Object {
-            "fill": "#343741",
-            "fontSize": 10,
-          }
-        }
-        value="0KB"
-        x={79.25}
-        y={61}
-      />
-      <circle
-        cx={33}
-        cy={63}
-        r={7}
-        style={
-          Object {
-            "fillOpacity": 0,
-            "stroke": "#343741",
-            "strokeWidth": 1,
-          }
-        }
-      />
-    </g>
-    <g
-      key="13.25"
-    >
-      <line
-        style={
-          Object {
-            "stroke": "#d3dae6",
-          }
-        }
-        x1={33}
-        x2={74.25}
-        y1={43.5}
-        y2={43.5}
-      />
-      <RightAlignedText
-        setWidth={[Function]}
-        style={
-          Object {
-            "fill": "#343741",
-            "fontSize": 10,
-          }
-        }
-        value="1.188KB"
-        x={79.25}
-        y={48.5}
-      />
-      <circle
-        cx={33}
-        cy={56.75}
-        r={13.25}
-        style={
-          Object {
-            "fillOpacity": 0,
-            "stroke": "#343741",
-            "strokeWidth": 1,
-          }
-        }
-      />
-    </g>
-    <g
-      key="19.5"
-    >
-      <line
-        style={
-          Object {
-            "stroke": "#d3dae6",
-          }
-        }
-        x1={33}
-        x2={74.25}
-        y1={31}
-        y2={31}
-      />
-      <RightAlignedText
-        setWidth={[Function]}
-        style={
-          Object {
-            "fill": "#343741",
-            "fontSize": 10,
-          }
-        }
-        value="4.75KB"
-        x={79.25}
-        y={36}
-      />
-      <circle
-        cx={33}
-        cy={50.5}
-        r={19.5}
-        style={
-          Object {
-            "fillOpacity": 0,
-            "stroke": "#343741",
-            "strokeWidth": 1,
-          }
-        }
-      />
-    </g>
-    <g
-      key="25.75"
-    >
-      <line
-        style={
-          Object {
-            "stroke": "#d3dae6",
-          }
-        }
-        x1={33}
-        x2={74.25}
-        y1={18.5}
-        y2={18.5}
-      />
-      <RightAlignedText
-        setWidth={[Function]}
-        style={
-          Object {
-            "fill": "#343741",
-            "fontSize": 10,
-          }
-        }
-        value="10.688KB"
-        x={79.25}
-        y={23.5}
-      />
-      <circle
-        cx={33}
-        cy={44.25}
-        r={25.75}
-        style={
-          Object {
-            "fillOpacity": 0,
-            "stroke": "#343741",
-            "strokeWidth": 1,
-          }
-        }
-      />
-    </g>
-    <g
-      key="32"
-    >
-      <line
-        style={
-          Object {
-            "stroke": "#d3dae6",
-          }
-        }
-        x1={33}
-        x2={74.25}
-        y1={6}
-        y2={6}
-      />
-      <RightAlignedText
-        setWidth={[Function]}
-        style={
-          Object {
-            "fill": "#343741",
-            "fontSize": 10,
-          }
-        }
-        value="19KB"
-        x={79.25}
-        y={11}
-      />
-      <circle
-        cx={33}
-        cy={38}
-        r={32}
-        style={
-          Object {
-            "fillOpacity": 0,
-            "stroke": "#343741",
-            "strokeWidth": 1,
-          }
-        }
-      />
-    </g>
+    <MapMarker
+      circleCenterX={33}
+      circleCenterY={63}
+      circleStyle={
+        Object {
+          "fillOpacity": 0,
+          "strokeWidth": 1,
+        }
+      }
+      circleTopY={56}
+      formattedValue="0KB"
+      onWidthChange={[Function]}
+      radius={7}
+      textOffset={5}
+      textY={61}
+    />
+    <MapMarker
+      circleCenterX={33}
+      circleCenterY={56.75}
+      circleStyle={
+        Object {
+          "fillOpacity": 0,
+          "strokeWidth": 1,
+        }
+      }
+      circleTopY={43.5}
+      formattedValue="1.188KB"
+      onWidthChange={[Function]}
+      radius={13.25}
+      textOffset={5}
+      textY={48.5}
+    />
+    <MapMarker
+      circleCenterX={33}
+      circleCenterY={50.5}
+      circleStyle={
+        Object {
+          "fillOpacity": 0,
+          "strokeWidth": 1,
+        }
+      }
+      circleTopY={31}
+      formattedValue="4.75KB"
+      onWidthChange={[Function]}
+      radius={19.5}
+      textOffset={5}
+      textY={36}
+    />
+    <MapMarker
+      circleCenterX={33}
+      circleCenterY={44.25}
+      circleStyle={
+        Object {
+          "fillOpacity": 0,
+          "strokeWidth": 1,
+        }
+      }
+      circleTopY={18.5}
+      formattedValue="10.688KB"
+      onWidthChange={[Function]}
+      radius={25.75}
+      textOffset={5}
+      textY={23.5}
+    />
+    <MapMarker
+      circleCenterX={33}
+      circleCenterY={38}
+      circleStyle={
+        Object {
+          "fillOpacity": 0,
+          "strokeWidth": 1,
+        }
+      }
+      circleTopY={6}
+      formattedValue="19KB"
+      onWidthChange={[Function]}
+      radius={32}
+      textOffset={5}
+      textY={11}
+    />
   </svg>
 </div>
 `;
@@ -434,84 +250,38 @@ exports[`Should render legend with 2 markers when size difference does not provi
     height={37}
     xmlns="http://www.w3.org/2000/svg"
   >
-    <g
-      key="7"
-    >
-      <line
-        style={
-          Object {
-            "stroke": "#d3dae6",
-          }
-        }
-        x1={16}
-        x2={36}
-        y1={22}
-        y2={22}
-      />
-      <RightAlignedText
-        setWidth={[Function]}
-        style={
-          Object {
-            "fill": "#343741",
-            "fontSize": 10,
-          }
-        }
-        value="0KB"
-        x={41}
-        y={27}
-      />
-      <circle
-        cx={16}
-        cy={29}
-        r={7}
-        style={
-          Object {
-            "fillOpacity": 0,
-            "stroke": "#343741",
-            "strokeWidth": 1,
-          }
-        }
-      />
-    </g>
-    <g
-      key="15"
-    >
-      <line
-        style={
-          Object {
-            "stroke": "#d3dae6",
-          }
-        }
-        x1={16}
-        x2={36}
-        y1={6}
-        y2={6}
-      />
-      <RightAlignedText
-        setWidth={[Function]}
-        style={
-          Object {
-            "fill": "#343741",
-            "fontSize": 10,
-          }
-        }
-        value="19KB"
-        x={41}
-        y={11}
-      />
-      <circle
-        cx={16}
-        cy={21}
-        r={15}
-        style={
-          Object {
-            "fillOpacity": 0,
-            "stroke": "#343741",
-            "strokeWidth": 1,
-          }
-        }
-      />
-    </g>
+    <MapMarker
+      circleCenterX={16}
+      circleCenterY={29}
+      circleStyle={
+        Object {
+          "fillOpacity": 0,
+          "strokeWidth": 1,
+        }
+      }
+      circleTopY={22}
+      formattedValue="0KB"
+      onWidthChange={[Function]}
+      radius={7}
+      textOffset={5}
+      textY={27}
+    />
+    <MapMarker
+      circleCenterX={16}
+      circleCenterY={21}
+      circleStyle={
+        Object {
+          "fillOpacity": 0,
+          "strokeWidth": 1,
+        }
+      }
+      circleTopY={6}
+      formattedValue="19KB"
+      onWidthChange={[Function]}
+      radius={15}
+      textOffset={5}
+      textY={11}
+    />
   </svg>
 </div>
 `;
@@ -554,123 +324,54 @@ exports[`Should render legend with 3 markers when size difference does not provi
     height={55}
     xmlns="http://www.w3.org/2000/svg"
   >
-    <g
-      key="7"
-    >
-      <line
-        style={
-          Object {
-            "stroke": "#d3dae6",
-          }
-        }
-        x1={25}
-        x2={56.25}
-        y1={40}
-        y2={40}
-      />
-      <RightAlignedText
-        setWidth={[Function]}
-        style={
-          Object {
-            "fill": "#343741",
-            "fontSize": 10,
-          }
-        }
-        value="0KB"
-        x={61.25}
-        y={45}
-      />
-      <circle
-        cx={25}
-        cy={47}
-        r={7}
-        style={
-          Object {
-            "fillOpacity": 0,
-            "stroke": "#343741",
-            "strokeWidth": 1,
-          }
-        }
-      />
-    </g>
-    <g
-      key="15.5"
-    >
-      <line
-        style={
-          Object {
-            "stroke": "#d3dae6",
-          }
-        }
-        x1={25}
-        x2={56.25}
-        y1={23}
-        y2={23}
-      />
-      <RightAlignedText
-        setWidth={[Function]}
-        style={
-          Object {
-            "fill": "#343741",
-            "fontSize": 10,
-          }
-        }
-        value="4.75KB"
-        x={61.25}
-        y={28}
-      />
-      <circle
-        cx={25}
-        cy={38.5}
-        r={15.5}
-        style={
-          Object {
-            "fillOpacity": 0,
-            "stroke": "#343741",
-            "strokeWidth": 1,
-          }
-        }
-      />
-    </g>
-    <g
-      key="24"
-    >
-      <line
-        style={
-          Object {
-            "stroke": "#d3dae6",
-          }
-        }
-        x1={25}
-        x2={56.25}
-        y1={6}
-        y2={6}
-      />
-      <RightAlignedText
-        setWidth={[Function]}
-        style={
-          Object {
-            "fill": "#343741",
-            "fontSize": 10,
-          }
-        }
-        value="19KB"
-        x={61.25}
-        y={11}
-      />
-      <circle
-        cx={25}
-        cy={30}
-        r={24}
-        style={
-          Object {
-            "fillOpacity": 0,
-            "stroke": "#343741",
-            "strokeWidth": 1,
-          }
-        }
-      />
-    </g>
+    <MapMarker
+      circleCenterX={25}
+      circleCenterY={47}
+      circleStyle={
+        Object {
+          "fillOpacity": 0,
+          "strokeWidth": 1,
+        }
+      }
+      circleTopY={40}
+      formattedValue="0KB"
+      onWidthChange={[Function]}
+      radius={7}
+      textOffset={5}
+      textY={45}
+    />
+    <MapMarker
+      circleCenterX={25}
+      circleCenterY={38.5}
+      circleStyle={
+        Object {
+          "fillOpacity": 0,
+          "strokeWidth": 1,
+        }
+      }
+      circleTopY={23}
+      formattedValue="4.75KB"
+      onWidthChange={[Function]}
+      radius={15.5}
+      textOffset={5}
+      textY={28}
+    />
+    <MapMarker
+      circleCenterX={25}
+      circleCenterY={30}
+      circleStyle={
+        Object {
+          "fillOpacity": 0,
+          "strokeWidth": 1,
+        }
+      }
+      circleTopY={6}
+      formattedValue="19KB"
+      onWidthChange={[Function]}
+      radius={24}
+      textOffset={5}
+      textY={11}
+    />
   </svg>
 </div>
 `;
@@ -713,45 +414,22 @@ exports[`Should render legend with only max marker when size difference does not
     height={29}
     xmlns="http://www.w3.org/2000/svg"
   >
-    <g
-      key="11"
-    >
-      <line
-        style={
-          Object {
-            "stroke": "#d3dae6",
-          }
-        }
-        x1={12}
-        x2={27}
-        y1={6}
-        y2={6}
-      />
-      <RightAlignedText
-        setWidth={[Function]}
-        style={
-          Object {
-            "fill": "#343741",
-            "fontSize": 10,
-          }
-        }
-        value="19KB"
-        x={32}
-        y={11}
-      />
-      <circle
-        cx={12}
-        cy={17}
-        r={11}
-        style={
-          Object {
-            "fillOpacity": 0,
-            "stroke": "#343741",
-            "strokeWidth": 1,
-          }
-        }
-      />
-    </g>
+    <MapMarker
+      circleCenterX={12}
+      circleCenterY={17}
+      circleStyle={
+        Object {
+          "fillOpacity": 0,
+          "strokeWidth": 1,
+        }
+      }
+      circleTopY={6}
+      formattedValue="19KB"
+      onWidthChange={[Function]}
+      radius={11}
+      textOffset={5}
+      textY={11}
+    />
   </svg>
 </div>
 `;
@@ -794,84 +472,38 @@ exports[`Should render legend without label cutoff when min size is 1 1`] = `
     height={21}
     xmlns="http://www.w3.org/2000/svg"
   >
-    <g
-      key="1"
-    >
-      <line
-        style={
-          Object {
-            "stroke": "#d3dae6",
-          }
-        }
-        x1={8}
-        x2={18}
-        y1={18}
-        y2={18}
-      />
-      <RightAlignedText
-        setWidth={[Function]}
-        style={
-          Object {
-            "fill": "#343741",
-            "fontSize": 10,
-          }
-        }
-        value="0KB"
-        x={23}
-        y={21}
-      />
-      <circle
-        cx={8}
-        cy={19}
-        r={1}
-        style={
-          Object {
-            "fillOpacity": 0,
-            "stroke": "#343741",
-            "strokeWidth": 1,
-          }
-        }
-      />
-    </g>
-    <g
-      key="7"
-    >
-      <line
-        style={
-          Object {
-            "stroke": "#d3dae6",
-          }
-        }
-        x1={8}
-        x2={18}
-        y1={6}
-        y2={6}
-      />
-      <RightAlignedText
-        setWidth={[Function]}
-        style={
-          Object {
-            "fill": "#343741",
-            "fontSize": 10,
-          }
-        }
-        value="19KB"
-        x={23}
-        y={11}
-      />
-      <circle
-        cx={8}
-        cy={13}
-        r={7}
-        style={
-          Object {
-            "fillOpacity": 0,
-            "stroke": "#343741",
-            "strokeWidth": 1,
-          }
-        }
-      />
-    </g>
+    <MapMarker
+      circleCenterX={8}
+      circleCenterY={19}
+      circleStyle={
+        Object {
+          "fillOpacity": 0,
+          "strokeWidth": 1,
+        }
+      }
+      circleTopY={18}
+      formattedValue="0KB"
+      onWidthChange={[Function]}
+      radius={1}
+      textOffset={5}
+      textY={21}
+    />
+    <MapMarker
+      circleCenterX={8}
+      circleCenterY={13}
+      circleStyle={
+        Object {
+          "fillOpacity": 0,
+          "strokeWidth": 1,
+        }
+      }
+      circleTopY={6}
+      formattedValue="19KB"
+      onWidthChange={[Function]}
+      radius={7}
+      textOffset={5}
+      textY={11}
+    />
   </svg>
 </div>
 `;
@@ -914,45 +546,22 @@ exports[`Should render max label with std clamp notification 1`] = `
     height={29}
     xmlns="http://www.w3.org/2000/svg"
   >
-    <g
-      key="11"
-    >
-      <line
-        style={
-          Object {
-            "stroke": "#d3dae6",
-          }
-        }
-        x1={12}
-        x2={27}
-        y1={6}
-        y2={6}
-      />
-      <RightAlignedText
-        setWidth={[Function]}
-        style={
-          Object {
-            "fill": "#343741",
-            "fontSize": 10,
-          }
-        }
-        value="> 16KB"
-        x={32}
-        y={11}
-      />
-      <circle
-        cx={12}
-        cy={17}
-        r={11}
-        style={
-          Object {
-            "fillOpacity": 0,
-            "stroke": "#343741",
-            "strokeWidth": 1,
-          }
-        }
-      />
-    </g>
+    <MapMarker
+      circleCenterX={12}
+      circleCenterY={17}
+      circleStyle={
+        Object {
+          "fillOpacity": 0,
+          "strokeWidth": 1,
+        }
+      }
+      circleTopY={6}
+      formattedValue="> 16KB"
+      onWidthChange={[Function]}
+      radius={11}
+      textOffset={5}
+      textY={11}
+    />
   </svg>
 </div>
 `;
diff --git a/x-pack/platform/plugins/shared/maps/public/classes/styles/vector/components/legend/size/map_marker.tsx b/x-pack/platform/plugins/shared/maps/public/classes/styles/vector/components/legend/size/map_marker.tsx
new file mode 100644
index 0000000000000..b91cc78575499
--- /dev/null
+++ b/x-pack/platform/plugins/shared/maps/public/classes/styles/vector/components/legend/size/map_marker.tsx
@@ -0,0 +1,67 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React, { FC, CSSProperties } from 'react';
+import { useEuiTheme } from '@elastic/eui';
+import { RightAlignedText } from '../right_aligned_text';
+
+const FONT_SIZE = 10;
+
+interface Props {
+  radius: number;
+  circleCenterX: number;
+  circleTopY: number;
+  textOffset: number;
+  textY: number;
+  formattedValue: string | number;
+  circleCenterY: number;
+  circleStyle: CSSProperties;
+  onWidthChange: (width: number) => void;
+}
+
+export const MapMarker: FC<Props> = ({
+  circleCenterX,
+  circleCenterY,
+  circleTopY,
+  formattedValue,
+  radius,
+  textOffset,
+  textY,
+  onWidthChange,
+}) => {
+  const { euiTheme } = useEuiTheme();
+  const circleStyle = {
+    fillOpacity: 0,
+    stroke: euiTheme.colors.textParagraph,
+    strokeWidth: 1,
+  };
+
+  return (
+    <g key={radius}>
+      <line
+        style={{ stroke: euiTheme.border.color }}
+        x1={circleCenterX}
+        y1={circleTopY}
+        x2={circleCenterX * 2.25}
+        y2={circleTopY}
+      />
+      <RightAlignedText
+        setWidth={onWidthChange}
+        style={{ fontSize: FONT_SIZE, fill: euiTheme.colors.textParagraph }}
+        x={circleCenterX * 2.25 + textOffset}
+        y={textY}
+        value={formattedValue}
+      />
+      <circle
+        style={{ ...circleStyle, stroke: euiTheme.colors.textParagraph }}
+        cx={circleCenterX}
+        cy={circleCenterY}
+        r={radius}
+      />
+    </g>
+  );
+};
diff --git a/x-pack/platform/plugins/shared/maps/public/classes/styles/vector/components/legend/size/marker_size_legend.tsx b/x-pack/platform/plugins/shared/maps/public/classes/styles/vector/components/legend/size/marker_size_legend.tsx
index c00557a2d1382..59d191e889a53 100644
--- a/x-pack/platform/plugins/shared/maps/public/classes/styles/vector/components/legend/size/marker_size_legend.tsx
+++ b/x-pack/platform/plugins/shared/maps/public/classes/styles/vector/components/legend/size/marker_size_legend.tsx
@@ -7,13 +7,12 @@
 
 import React, { Component } from 'react';
 import _ from 'lodash';
-import { euiThemeVars } from '@kbn/ui-theme';
 import { EuiFlexGroup, EuiFlexItem, EuiText, EuiToolTip } from '@elastic/eui';
 import { RangeFieldMeta } from '../../../../../../../common/descriptor_types';
 import { DynamicSizeProperty } from '../../../properties/dynamic_size_property';
-import { RightAlignedText } from '../right_aligned_text';
 import { getMaxLabel, getMinLabel } from './get_ordinal_label';
 import { type Marker, MarkerList } from './marker_list';
+import { MapMarker } from './map_marker';
 
 const FONT_SIZE = 10;
 const HALF_FONT_SIZE = FONT_SIZE / 2;
@@ -96,7 +95,6 @@ export class MarkerSizeLegend extends Component<Props, State> {
 
     const circleStyle = {
       fillOpacity: 0,
-      stroke: euiThemeVars.euiTextColor,
       strokeWidth: 1,
     };
 
@@ -110,25 +108,20 @@ export class MarkerSizeLegend extends Component<Props, State> {
       const textOffset = this.state.maxLabelWidth + HALF_FONT_SIZE;
       const rawTextY = circleTopY + HALF_FONT_SIZE;
       const textY = rawTextY > svgHeight ? svgHeight : rawTextY;
+
       return {
         svg: (
-          <g key={radius}>
-            <line
-              style={{ stroke: euiThemeVars.euiBorderColor }}
-              x1={circleCenterX}
-              y1={circleTopY}
-              x2={circleCenterX * 2.25}
-              y2={circleTopY}
-            />
-            <RightAlignedText
-              setWidth={this._onRightAlignedWidthChange}
-              style={{ fontSize: FONT_SIZE, fill: euiThemeVars.euiTextColor }}
-              x={circleCenterX * 2.25 + textOffset}
-              y={textY}
-              value={formattedValue}
-            />
-            <circle style={circleStyle} cx={circleCenterX} cy={circleCenterY} r={radius} />
-          </g>
+          <MapMarker
+            circleCenterX={circleCenterX}
+            circleCenterY={circleCenterY}
+            circleTopY={circleTopY}
+            circleStyle={circleStyle}
+            radius={radius}
+            textOffset={textOffset}
+            textY={textY}
+            formattedValue={formattedValue}
+            onWidthChange={this._onRightAlignedWidthChange}
+          />
         ),
         textY,
       };
diff --git a/x-pack/platform/plugins/shared/maps/public/classes/styles/vector/components/legend/vector_style_legend.tsx b/x-pack/platform/plugins/shared/maps/public/classes/styles/vector/components/legend/vector_style_legend.tsx
index afe1bbe194636..8f8735459a4a3 100644
--- a/x-pack/platform/plugins/shared/maps/public/classes/styles/vector/components/legend/vector_style_legend.tsx
+++ b/x-pack/platform/plugins/shared/maps/public/classes/styles/vector/components/legend/vector_style_legend.tsx
@@ -6,8 +6,7 @@
  */
 
 import React from 'react';
-import { EuiText } from '@elastic/eui';
-import { euiThemeVars } from '@kbn/ui-theme';
+import { EuiText, useEuiTheme } from '@elastic/eui';
 import { StyleError } from './style_error';
 import {
   DynamicStyleProperty,
@@ -36,6 +35,7 @@ export function VectorStyleLegend({
   svg,
 }: Props) {
   const legendRows = [];
+  const { euiTheme } = useEuiTheme();
 
   for (let i = 0; i < styles.length; i++) {
     const styleMetaDataRequest = styles[i].isDynamic()
@@ -89,10 +89,7 @@ export function VectorStyleLegend({
         </EuiText>
         <ul>
           {masksByFieldOrigin.map((mask) => (
-            <li
-              key={mask.getEsAggField().getMbFieldName()}
-              style={{ marginLeft: euiThemeVars.euiSizeS }}
-            >
+            <li key={mask.getEsAggField().getMbFieldName()} style={{ marginLeft: euiTheme.size.s }}>
               <MaskLegend
                 esAggField={mask.getEsAggField()}
                 onlyShowLabelAndValue={true}
diff --git a/x-pack/platform/plugins/shared/maps/public/classes/styles/vector/properties/dynamic_color_property.test.tsx b/x-pack/platform/plugins/shared/maps/public/classes/styles/vector/properties/dynamic_color_property.test.tsx
index 3d9037baf50fa..b540e5d70332b 100644
--- a/x-pack/platform/plugins/shared/maps/public/classes/styles/vector/properties/dynamic_color_property.test.tsx
+++ b/x-pack/platform/plugins/shared/maps/public/classes/styles/vector/properties/dynamic_color_property.test.tsx
@@ -26,6 +26,7 @@ import { mockField, MockLayer, MockStyle } from './test_helpers/test_util';
 import { ColorDynamicOptions } from '../../../../../common/descriptor_types';
 import { IVectorLayer } from '../../../layers/vector_layer';
 import { IField } from '../../../fields/field';
+import { OTHER_CATEGORY_DEFAULT_COLOR } from '../style_util';
 
 const makeProperty = (options: ColorDynamicOptions, style?: MockStyle, field?: IField) => {
   return new DynamicColorProperty(
@@ -575,7 +576,7 @@ describe('get mapbox color expression (via internal _getMbColor)', () => {
         fieldMetaOptions,
       };
       const colorProperty = makeProperty(dynamicStyleOptions);
-      expect(colorProperty._getMbColor()).toBe('#d3dae6');
+      expect(colorProperty._getMbColor()).toBe(OTHER_CATEGORY_DEFAULT_COLOR);
     });
 
     test('should return "other category" color when field name is not provided', async () => {
@@ -586,7 +587,7 @@ describe('get mapbox color expression (via internal _getMbColor)', () => {
       };
       // @ts-expect-error - test is verifing behavior when field is invalid.
       const colorProperty = makeProperty(dynamicStyleOptions);
-      expect(colorProperty._getMbColor()).toBe('#d3dae6');
+      expect(colorProperty._getMbColor()).toBe(OTHER_CATEGORY_DEFAULT_COLOR);
     });
 
     describe('pre-defined color palette', () => {
@@ -596,7 +597,7 @@ describe('get mapbox color expression (via internal _getMbColor)', () => {
           fieldMetaOptions,
         };
         const colorProperty = makeProperty(dynamicStyleOptions);
-        expect(colorProperty._getMbColor()).toBe('#d3dae6');
+        expect(colorProperty._getMbColor()).toBe(OTHER_CATEGORY_DEFAULT_COLOR);
       });
 
       test('should return mapbox expression for color palette', async () => {
@@ -627,7 +628,7 @@ describe('get mapbox color expression (via internal _getMbColor)', () => {
           fieldMetaOptions,
         };
         const colorProperty = makeProperty(dynamicStyleOptions);
-        expect(colorProperty._getMbColor()).toBe('#d3dae6');
+        expect(colorProperty._getMbColor()).toBe(OTHER_CATEGORY_DEFAULT_COLOR);
       });
 
       test('should return "other category" color when customColorPalette is empty', async () => {
@@ -638,7 +639,7 @@ describe('get mapbox color expression (via internal _getMbColor)', () => {
           fieldMetaOptions,
         };
         const colorProperty = makeProperty(dynamicStyleOptions);
-        expect(colorProperty._getMbColor()).toBe('#d3dae6');
+        expect(colorProperty._getMbColor()).toBe(OTHER_CATEGORY_DEFAULT_COLOR);
       });
 
       test('should return mapbox expression for custom color palette', async () => {
diff --git a/x-pack/platform/plugins/shared/maps/public/classes/styles/vector/properties/dynamic_color_property.tsx b/x-pack/platform/plugins/shared/maps/public/classes/styles/vector/properties/dynamic_color_property.tsx
index f1a55b571e27d..9095492074490 100644
--- a/x-pack/platform/plugins/shared/maps/public/classes/styles/vector/properties/dynamic_color_property.tsx
+++ b/x-pack/platform/plugins/shared/maps/public/classes/styles/vector/properties/dynamic_color_property.tsx
@@ -10,7 +10,12 @@ import React from 'react';
 import { EuiTextColor } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { DynamicStyleProperty, OTHER_CATEGORY_KEY } from './dynamic_style_property';
-import { makeMbClampedNumberExpression, dynamicRound } from '../style_util';
+import {
+  makeMbClampedNumberExpression,
+  dynamicRound,
+  OTHER_CATEGORY_DEFAULT_COLOR,
+  OTHER_CATEGORY_LABEL,
+} from '../style_util';
 import {
   getOrdinalMbColorRampStops,
   getPercentilesMbColorRampStops,
@@ -23,7 +28,6 @@ import {
   VECTOR_STYLES,
 } from '../../../../../common/constants';
 import { isCategoricalStopsInvalid } from '../components/color/color_stops_utils';
-import { OTHER_CATEGORY_LABEL, OTHER_CATEGORY_DEFAULT_COLOR } from '../style_util';
 import { Break, BreakedLegend } from '../components/legend/breaked_legend';
 import { ColorDynamicOptions, OrdinalColorStop } from '../../../../../common/descriptor_types';
 import { LegendProps } from './style_property';
diff --git a/x-pack/platform/plugins/shared/maps/public/classes/styles/vector/style_util.ts b/x-pack/platform/plugins/shared/maps/public/classes/styles/vector/style_util.ts
index 82f1015bfe167..f4ba318cd27d6 100644
--- a/x-pack/platform/plugins/shared/maps/public/classes/styles/vector/style_util.ts
+++ b/x-pack/platform/plugins/shared/maps/public/classes/styles/vector/style_util.ts
@@ -5,7 +5,6 @@
  * 2.0.
  */
 
-import { euiThemeVars } from '@kbn/ui-theme';
 import { i18n } from '@kbn/i18n';
 import { ICON_SOURCE, MB_LOOKUP_FUNCTION, VECTOR_STYLES } from '../../../../common/constants';
 import { Category } from '../../../../common/descriptor_types';
@@ -19,7 +18,7 @@ export const OTHER_CATEGORY_LABEL = i18n.translate(
   }
 );
 
-export const OTHER_CATEGORY_DEFAULT_COLOR = euiThemeVars.euiColorLightShade;
+export const OTHER_CATEGORY_DEFAULT_COLOR = '#cad3e2'; // Defaulting to a light grey color that works in both dark and light mode
 
 export function getComputedFieldName(styleName: VECTOR_STYLES, fieldName: string) {
   return `${getComputedFieldNamePrefix(fieldName)}__${styleName as string}`;
diff --git a/x-pack/platform/plugins/shared/maps/public/reducers/map/default_map_settings.ts b/x-pack/platform/plugins/shared/maps/public/reducers/map/default_map_settings.ts
index 544410c8e383b..4b0c5fb9675a8 100644
--- a/x-pack/platform/plugins/shared/maps/public/reducers/map/default_map_settings.ts
+++ b/x-pack/platform/plugins/shared/maps/public/reducers/map/default_map_settings.ts
@@ -5,14 +5,13 @@
  * 2.0.
  */
 
-import { euiThemeVars } from '@kbn/ui-theme';
 import { INITIAL_LOCATION, MAX_ZOOM, MIN_ZOOM } from '../../../common/constants';
 import { MapSettings } from '../../../common/descriptor_types';
 
 export function getDefaultMapSettings(): MapSettings {
   return {
     autoFitToDataBounds: false,
-    backgroundColor: euiThemeVars.euiColorEmptyShade,
+    backgroundColor: 'transparent',
     customIcons: [],
     disableInteractive: false,
     disableTooltipControl: false,
diff --git a/x-pack/platform/plugins/shared/maps/tsconfig.json b/x-pack/platform/plugins/shared/maps/tsconfig.json
index 23f39932990bb..ee6f254b918ed 100644
--- a/x-pack/platform/plugins/shared/maps/tsconfig.json
+++ b/x-pack/platform/plugins/shared/maps/tsconfig.json
@@ -54,7 +54,6 @@
     "@kbn/mapbox-gl",
     "@kbn/core-execution-context-common",
     "@kbn/chart-icons",
-    "@kbn/ui-theme",
     "@kbn/monaco",
     "@kbn/safer-lodash-set",
     "@kbn/custom-integrations-plugin",