converting euimark styles to emotion

src/components/highlight/__snapshots__/highlight.test.tsx.snap

@@ -1,10 +1,16 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`EuiHighlight behavior loose matching matches strings with different casing 1`] = `
+.emotion-0 {
+  background-color: transparent;
+  font-weight: 700;
+  color: #343741;
+}
+
 <span>
   different 
   <mark
-    class="euiMark"
+    class="euiMark emotion-0"
   >
     case
   </mark>
@@ -13,31 +19,43 @@ exports[`EuiHighlight behavior loose matching matches strings with different cas
 `;
 
 exports[`EuiHighlight behavior matching applies to all matches 1`] = `
+.emotion-0 {
+  background-color: transparent;
+  font-weight: 700;
+  color: #343741;
+}
+
 <span>
   <mark
-    class="euiMark"
+    class="euiMark emotion-0"
   >
     match
   </mark>
    
   <mark
-    class="euiMark"
+    class="euiMark emotion-0"
   >
     match
   </mark>
    
   <mark
-    class="euiMark"
+    class="euiMark emotion-0"
   >
     match
   </mark>
 </span>
 `;
 
 exports[`EuiHighlight behavior matching only applies to first match 1`] = `
+.emotion-0 {
+  background-color: transparent;
+  font-weight: 700;
+  color: #343741;
+}
+
 <span>
   <mark
-    class="euiMark"
+    class="euiMark emotion-0"
   >
     match
   </mark>

src/components/index.scss

@@ -42,7 +42,6 @@
 @import 'list_group/index';
 @import 'loading/index';
 @import 'markdown_editor/index';
-@import 'mark/index';
 @import 'modal/index';
 @import 'notification/index';
 @import 'overlay_mask/index';

src/components/mark/__snapshots__/mark.test.tsx.snap

@@ -1,8 +1,14 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`EuiMark is rendered 1`] = `
+.emotion-0 {
+  background-color: transparent;
+  font-weight: 700;
+  color: #343741;
+}
+
 <mark
-  class="euiMark"
+  class="euiMark emotion-0"
 >
   Marked
 </mark>

src/components/mark/mark.tsx

@@ -7,8 +7,9 @@
  */
 
 import React, { HTMLAttributes, FunctionComponent } from 'react';
-import { CommonProps } from '../common';
 import classNames from 'classnames';
+import { CommonProps } from '../common';
+import { useEuiMarkStyles } from './mark_styles';
 export type EuiMarkProps = HTMLAttributes<HTMLElement> &
   CommonProps & {
     /**
@@ -22,10 +23,11 @@ export const EuiMark: FunctionComponent<EuiMarkProps> = ({
   className,
   ...rest
 }) => {
+  const euiMarkStyles = useEuiMarkStyles();
   const classes = classNames('euiMark', className);
 
   return (
-    <mark className={classes} {...rest}>
+    <mark css={euiMarkStyles} className={classes} {...rest}>
       {children}
     </mark>
   );

src/components/mark/mark_styles.ts

@@ -0,0 +1,23 @@
+/*
+ * 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 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { css } from '@emotion/react';
+import { useEuiTheme, isDefaultTheme } from '../../services';
+
+export const useEuiMarkStyles = () => {
+  const { euiTheme } = useEuiTheme();
+  return css`
+    background-color: ${isDefaultTheme(euiTheme.themeName)
+      ? 'transparent'
+      : euiTheme.focus!.backgroundColor};
+    font-weight: ${euiTheme.font.weight.bold};
+    // Override the browser's black color.
+    // Can't use 'inherit' because the text to background color contrast may not be sufficient
+    color: ${euiTheme.colors.text};
+  `;
+};

src/themes/eui-amsterdam/overrides/_index.scss

@@ -21,7 +21,6 @@
 @import 'list_group_item';
 @import 'image';
 @import 'key_pad_menu';
-@import 'mark';
 @import 'markdown_editor';
 @import 'modal';
 @import 'notification_badge';