[High Contrast Mode] Markdown, highlighting, misc text fixes

packages/eui/src/components/expression/expression.stories.tsx

@@ -6,6 +6,7 @@
  * Side Public License, v 1.
  */
 
+import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { EuiExpression, EuiExpressionProps } from './expression';
@@ -34,3 +35,74 @@ export const Playground: Story = {
     value: 'World',
   },
 };
+
+export const KitchenSink: Story = {
+  tags: ['vrt-only'],
+  render: () => (
+    <>
+      {/* Inline */}
+      <EuiExpression description="Select" value="count(*)" onClick={() => {}} />
+      <EuiExpression
+        description="From"
+        value="kibana_sample_data_ky_counties left"
+      />
+      <EuiExpression
+        description="join"
+        value="kibana_sample_data_ky_avl right"
+        onClick={() => {}}
+      />
+      <EuiExpression
+        description="on"
+        value="left.smis = right.kytccountynmbr"
+      />
+      <EuiExpression
+        description="group by"
+        value="right.kytccountynmbr"
+        onClick={() => {}}
+        color="accent"
+      />
+      <EuiExpression description="sort by" value="count" />
+
+      {/* Columns */}
+      <EuiExpression
+        display="columns"
+        description="indices"
+        value={
+          <>
+            <p>.kibana_task_manager,</p>
+            <p>kibana_sample_data_ecommerce</p>
+          </>
+        }
+        onClick={() => {}}
+      />
+      <EuiExpression
+        display="columns"
+        description="when"
+        value="count()"
+        isActive={true}
+        onClick={() => {}}
+        // Show focus state but hide the outline for VRT
+        autoFocus
+        css={{ outline: 'none !important' }}
+      />
+      <EuiExpression
+        display="columns"
+        description="except"
+        value="kibana_sample_data_ky_counties"
+        isInvalid={true}
+      />
+      <EuiExpression
+        display="columns"
+        description="join"
+        descriptionWidth={50}
+        value="with custom description width"
+      />
+    </>
+  ),
+};
+
+export const HighContrast: Story = {
+  ...KitchenSink,
+  tags: ['vrt-only'],
+  globals: { highContrastMode: true },
+};

packages/eui/src/components/expression/expression.styles.ts

@@ -16,6 +16,7 @@ import {
   euiTextTruncate,
   mathWithUnits,
 } from '../../global_styling';
+import { highContrastModeStyles } from '../../global_styling/functions/high_contrast';
 import { transparentize } from '../../services/color';
 import { UseEuiTheme } from '../../services';
 
@@ -34,10 +35,6 @@ export const euiExpressionStyles = (euiThemeContext: UseEuiTheme) => {
       ${euiTextBreakWord()}
       display: inline-block;
       font-family: ${euiTheme.font.familyCode};
-      ${logicalCSS(
-        'border-bottom',
-        `${euiTheme.border.width.thick} solid transparent`
-      )}
       ${euiFontSize(euiThemeContext, 's')}
       ${logicalTextAlignCSS('left')}
       ${logicalShorthandCSS(
@@ -57,15 +54,17 @@ export const euiExpressionStyles = (euiThemeContext: UseEuiTheme) => {
 
     // Variants
     columns: css`
-      border-color: transparent;
-      /* Ensures there's no flash of the dashed style before turning solid for the active state */
-      ${logicalCSS('border-bottom-style', 'solid')}
-      ${logicalCSS('margin-bottom', euiTheme.size.xs)}
-
-      ${logicalCSS('width', '100%')}
       display: flex;
+      ${logicalCSS('width', '100%')}
+      ${logicalCSS('margin-bottom', euiTheme.size.xs)}
       padding: ${euiTheme.size.xs};
-      border-radius: ${euiTheme.size.xs};
+      ${highContrastModeStyles(euiThemeContext, {
+        // Render the bottom border in high contrast mode for extra visibility
+        none: `
+          border-radius: ${euiTheme.size.xs};
+          border-color: transparent;
+        `,
+      })}
     `,
 
     truncate: css`

packages/eui/src/components/mark/mark.stories.tsx

@@ -27,3 +27,9 @@ export const Playground: Story = {
     children: 'Marked text',
   },
 };
+
+export const HighContrast: Story = {
+  ...Playground,
+  tags: ['vrt-only'],
+  globals: { highContrastMode: true },
+};

packages/eui/src/components/mark/mark.styles.ts

@@ -7,23 +7,29 @@
  */
 
 import { css } from '@emotion/react';
-import { UseEuiTheme, transparentize } from '../../services';
+import { UseEuiTheme } from '../../services';
+import { highContrastModeStyles } from '../../global_styling/functions/high_contrast';
 import { euiScreenReaderOnly } from '../accessibility';
 
-export const euiMarkStyles = ({ euiTheme, colorMode }: UseEuiTheme) => {
-  // TODO: Was $euiFocusBackgroundColor
-  const transparency = { LIGHT: 0.1, DARK: 0.3 };
-
+export const euiMarkStyles = (euiThemeContext: UseEuiTheme) => {
+  const { euiTheme } = euiThemeContext;
   return {
     euiMark: css`
-      background-color: ${transparentize(
-        euiTheme.colors.primary,
-        transparency[colorMode]
-      )};
+      ${highContrastModeStyles(euiThemeContext, {
+        // Override the browser's black color.
+        // Can't use 'inherit' because the text to background color contrast may not be sufficient
+        none: `
+          color: ${euiTheme.colors.text};
+          background-color: ${euiTheme.focus.backgroundColor};
+        `,
+        // `!important` is required here because some marked text links
+        // (e.g. EuiSideNav) will take precedence otherwise
+        preferred: `
+          color: ${euiTheme.colors.emptyShade} !important;
+          background-color: ${euiTheme.colors.primaryText};
+        `,
+      })}
       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};
     `,
   };
 };

packages/eui/src/components/markdown_editor/__snapshots__/markdown_format.styles.test.ts.snap

@@ -114,12 +114,12 @@ exports[`euiMarkdownFormat text colors danger 1`] = `
 exports[`euiMarkdownFormat text colors default 1`] = `
 "
     .euiMarkdownFormat__blockquote {
-      border-inline-start-color: rgba(0,0,0,0.15);
+      border-inline-start-color: #D3DAE6;
     }
 
     .euiHorizontalRule {
-      background-color: rgba(0,0,0,0.15);
-      color: rgba(0,0,0,0.15); /* ensure that firefox gets the currentColor */
+      background-color: #D3DAE6;
+      color: #D3DAE6; /* ensure that firefox gets the currentColor */
     }
 
     /* Tables */
@@ -130,20 +130,20 @@ exports[`euiMarkdownFormat text colors default 1`] = `
       overflow: auto;
       border-spacing: 0;
       border-collapse: collapse;
-      border-inline-start: 1px solid rgba(0,0,0,0.15);
+      border-inline-start: 1px solid #D3DAE6;
     }
 
     .euiMarkdownFormat__table th,
     .euiMarkdownFormat__table td {
-      border-block: 1px solid rgba(0,0,0,0.15);
+      border-block: 1px solid #D3DAE6;
 
       &:last-child {
-        border-inline-end: 1px solid rgba(0,0,0,0.15);
+        border-inline-end: 1px solid #D3DAE6;
       }
     }
 
     .euiMarkdownFormat__table tr {
-      border-block-start: 1px solid rgba(0,0,0,0.15);
+      border-block-start: 1px solid #D3DAE6;
     }
   ;label:default;"
 `;
@@ -337,6 +337,10 @@ exports[`euiMarkdownFormat text sizes m 1`] = `
 "
     .euiMarkdownFormat__codeblockWrapper {
       margin-block-end: 1.1429rem;
+
+      .euiCodeBlock__pre {
+        margin-block-end: 0;
+      }
     }
 
     .euiMarkdownFormat__table {
@@ -355,6 +359,10 @@ exports[`euiMarkdownFormat text sizes relative 1`] = `
 "
     .euiMarkdownFormat__codeblockWrapper {
       margin-block-end: 1em;
+
+      .euiCodeBlock__pre {
+        margin-block-end: 0;
+      }
     }
 
     .euiMarkdownFormat__table {
@@ -373,6 +381,10 @@ exports[`euiMarkdownFormat text sizes s 1`] = `
 "
     .euiMarkdownFormat__codeblockWrapper {
       margin-block-end: 1.0000rem;
+
+      .euiCodeBlock__pre {
+        margin-block-end: 0;
+      }
     }
 
     .euiMarkdownFormat__table {
@@ -391,6 +403,10 @@ exports[`euiMarkdownFormat text sizes xs 1`] = `
 "
     .euiMarkdownFormat__codeblockWrapper {
       margin-block-end: 0.8571rem;
+
+      .euiCodeBlock__pre {
+        margin-block-end: 0;
+      }
     }
 
     .euiMarkdownFormat__table {

packages/eui/src/components/markdown_editor/markdown_format.stories.tsx

@@ -61,3 +61,116 @@ export const Playground: Story = {
     children: initialContent,
   },
 };
+
+export const KitchenSink: Story = {
+  tags: ['vrt-only'],
+  args: {
+    children: `# h1 Heading
+## h2 Heading
+### h3 Heading
+#### h4 Heading
+##### h5 Heading
+###### h6 Heading
+
+
+### Emphasis
+
+**This is bold text**
+
+__This is bold text__
+
+*This is italic text*
+
+_This is italic text_
+
+~~Strikethrough~~
+
+
+### Horizontal Rules
+
+___
+
+---
+
+***
+
+
+## Blockquotes
+
+
+> Blockquotes can also be nested...
+>> ...by using additional greater-than signs right next to each other...
+> > > ...or with spaces between arrows.
+
+
+## Lists
+
+Unordered
+
+* Item 1
+* Item 2
+  * Item 2a
+  * Item 2b
+
+Ordered
+
+1. Item 1
+1. Item 2
+1. Item 3
+   1. Item 3a
+   1. Item 3b
+
+
+## Task List
+
+- [x] Create a new project
+- [x] Give your project a name
+* [ ] Add a new column
+
+
+## Code
+
+Inline \`<Code />\` is awesome!
+
+\`\`\` js
+var foo = function (bar) {
+  return bar++;
+};
+
+console.log(foo(5));
+\`\`\`
+
+
+## Tables
+
+| Option | Description |
+| ------: | ----------- |
+| data   | path to data files to supply the data that will be passed into templates. |
+| engine | engine to be used for processing templates. Handlebars is the default. |
+| ext    | extension to be used for dest files. |
+
+
+## Links
+
+[link text](http://dev.nodeca.com)
+
+[link with title](http://nodeca.github.io/pica/demo/ "title text!")
+
+Autoconverted link https://github.com/nodeca/pica`,
+  },
+};
+
+export const TextProps: Story = {
+  tags: ['vrt-only'],
+  args: {
+    ...KitchenSink.args,
+    color: 'danger',
+    textSize: 'xs',
+  },
+};
+
+export const HighContrast: Story = {
+  ...KitchenSink,
+  tags: ['vrt-only'],
+  globals: { highContrastMode: true },
+};