Background color for EuiMark only in Amsterdam

src-docs/src/views/highlight_and_mark/highlight_and_mark_example.js

@@ -60,7 +60,7 @@ export const HighlightAndMarkExample = {
       ],
       text: (
         <p>
-          Use <strong>EuiMark</strong> to wrap a string in an
+          Use <strong>EuiMark</strong> to wrap a string in a{' '}
           <EuiCode>mark</EuiCode> element.
         </p>
       ),

src/components/mark/_mark.scss

@@ -1,5 +1,7 @@
 .euiMark {
-  padding: $euiSizeXS 0;
-  background: $euiFocusBackgroundColor;
+  background-color: transparent;
   font-weight: $euiFontWeightBold;
+  // Override the browser's black color.
+  // Can't use `inherit` because the text to background color contrast may not be sufficient
+  color: $euiTextColor;
 }

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

@@ -6,6 +6,7 @@
 @import 'filter_group';
 @import 'header';
 @import 'image';
+@import 'mark';
 @import 'modal';
 @import 'overlay_mask';
 @import 'popover';

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

@@ -0,0 +1,3 @@
+.euiMark {
+  background: $euiFocusBackgroundColor;
+}