[Graph/SCSS] Migrate _venn_diagram.scss file to Emotion (#214962)

## Summary

Part of https://github.com/elastic/kibana/issues/208908

Replaces `_venn_diagram.scss` file to css-in-js .

## Screenshots

<img width="1593" alt="Screenshot 2025-03-18 at 12 50 55"
src="https://github.com/user-attachments/assets/f6685a78-15ce-4019-992a-9388efb79fab"
/>

<img width="1586" alt="Screenshot 2025-03-18 at 12 50 36"
src="https://github.com/user-attachments/assets/b1f57d53-509d-43c3-9a96-99ebacba35a1"
/>


### Checklist

- [ ] The PR description includes the appropriate Release Notes section,
and the correct `release_note:*` label is applied per the
[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)

x-pack/platform/plugins/private/graph/public/components/_index.scss

@@ -3,7 +3,6 @@
 @import './source_modal';
 @import './guidance_panel/index';
 @import './graph_visualization/index';
-@import './venn_diagram/index';
 @import './settings/index';
 @import './field_manager/index';
 @import './graph';

x-pack/platform/plugins/private/graph/public/components/venn_diagram/_index.scss

@@ -1 +0,0 @@
-@import './venn_diagram';

x-pack/platform/plugins/private/graph/public/components/venn_diagram/_venn_diagram.scss

@@ -1,9 +0,0 @@
-.gphVennDiagram__left {
-  fill: $euiColorDanger;
-  fill-opacity: .5;
-}
-
-.gphVennDiagram__right {
-  fill: $euiColorPrimary;
-  fill-opacity: .5;
-}

x-pack/platform/plugins/private/graph/public/components/venn_diagram/venn_diagram.tsx

@@ -6,6 +6,8 @@
  */
 
 import React from 'react';
+import { css } from '@emotion/react';
+import { type UseEuiTheme } from '@elastic/eui';
 import { distanceFromIntersectArea } from './vennjs';
 
 export interface VennDiagramProps {
@@ -45,15 +47,30 @@ export function VennDiagram({ leftValue, rightValue, overlap }: VennDiagramProps
             cy={maxRadius}
             r={leftRadius}
             className="gphVennDiagram__left"
+            css={styles.left}
           />
           <circle
             cx={rightCenter + padding}
             cy={maxRadius}
             r={rightRadius}
             className="gphVennDiagram__right"
+            css={styles.right}
           />
         </g>
       </svg>
     </div>
   );
 }
+
+const styles = {
+  left: ({ euiTheme }: UseEuiTheme) =>
+    css`
+      fill: ${euiTheme.colors.danger};
+      fill-opacity: 0.5;
+    `,
+
+  right: ({ euiTheme }: UseEuiTheme) => css`
+    fill: ${euiTheme.colors.primary};
+    fill-opacity: 0.5;
+  `,
+};