diff --git a/packages/eui/.loki/reference/chrome_desktop_Editors_Syntax_EuiMarkdownEditor_Errors.png b/packages/eui/.loki/reference/chrome_desktop_Editors_Syntax_EuiMarkdownEditor_Errors.png index f1498add612..7adc222708b 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Editors_Syntax_EuiMarkdownEditor_Errors.png and b/packages/eui/.loki/reference/chrome_desktop_Editors_Syntax_EuiMarkdownEditor_Errors.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Editors_Syntax_EuiMarkdownEditor_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Editors_Syntax_EuiMarkdownEditor_Playground.png index dc91b9ad573..e1eb7dac216 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Editors_Syntax_EuiMarkdownEditor_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Editors_Syntax_EuiMarkdownEditor_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Editors_Syntax_EuiMarkdownEditor_View_Mode.png b/packages/eui/.loki/reference/chrome_desktop_Editors_Syntax_EuiMarkdownEditor_View_Mode.png index 4d7f23f1996..7c7443e7fa7 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Editors_Syntax_EuiMarkdownEditor_View_Mode.png and b/packages/eui/.loki/reference/chrome_desktop_Editors_Syntax_EuiMarkdownEditor_View_Mode.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Editors_Syntax_EuiMarkdownFormat_High_Contrast.png b/packages/eui/.loki/reference/chrome_desktop_Editors_Syntax_EuiMarkdownFormat_High_Contrast.png new file mode 100644 index 00000000000..196a6f678a0 Binary files /dev/null and b/packages/eui/.loki/reference/chrome_desktop_Editors_Syntax_EuiMarkdownFormat_High_Contrast.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Editors_Syntax_EuiMarkdownFormat_Kitchen_Sink.png b/packages/eui/.loki/reference/chrome_desktop_Editors_Syntax_EuiMarkdownFormat_Kitchen_Sink.png new file mode 100644 index 00000000000..2bb1f7bbc15 Binary files /dev/null and b/packages/eui/.loki/reference/chrome_desktop_Editors_Syntax_EuiMarkdownFormat_Kitchen_Sink.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Editors_Syntax_EuiMarkdownFormat_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Editors_Syntax_EuiMarkdownFormat_Playground.png index 09d83378cff..bec2f60f6bb 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Editors_Syntax_EuiMarkdownFormat_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Editors_Syntax_EuiMarkdownFormat_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Editors_Syntax_EuiMarkdownFormat_Text_Props.png b/packages/eui/.loki/reference/chrome_desktop_Editors_Syntax_EuiMarkdownFormat_Text_Props.png new file mode 100644 index 00000000000..ba617b01cd4 Binary files /dev/null and b/packages/eui/.loki/reference/chrome_desktop_Editors_Syntax_EuiMarkdownFormat_Text_Props.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiExpression_High_Contrast.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiExpression_High_Contrast.png new file mode 100644 index 00000000000..358d24b39cd Binary files /dev/null and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiExpression_High_Contrast.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiExpression_Kitchen_Sink.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiExpression_Kitchen_Sink.png new file mode 100644 index 00000000000..5b43a8d0f8b Binary files /dev/null and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiExpression_Kitchen_Sink.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiExpression_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiExpression_Playground.png index 851024e33ee..125fdbff8fb 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiExpression_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiExpression_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Utilities_EuiMark_High_Contrast.png b/packages/eui/.loki/reference/chrome_desktop_Utilities_EuiMark_High_Contrast.png new file mode 100644 index 00000000000..595b295d1cd Binary files /dev/null and b/packages/eui/.loki/reference/chrome_desktop_Utilities_EuiMark_High_Contrast.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Utilities_EuiTextTruncate_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Utilities_EuiTextTruncate_Playground.png index 3e1706ceee7..ad5dfeda21c 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Utilities_EuiTextTruncate_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Utilities_EuiTextTruncate_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Utilities_EuiTextTruncate_Resize_Observer.png b/packages/eui/.loki/reference/chrome_desktop_Utilities_EuiTextTruncate_Resize_Observer.png index 6f7483e4e91..e79c5abf7c5 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Utilities_EuiTextTruncate_Resize_Observer.png and b/packages/eui/.loki/reference/chrome_desktop_Utilities_EuiTextTruncate_Resize_Observer.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Utilities_EuiTextTruncate_Start_End_Anchor_For_Search.png b/packages/eui/.loki/reference/chrome_desktop_Utilities_EuiTextTruncate_Start_End_Anchor_For_Search.png index 4493ee51939..dc7b0941a24 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Utilities_EuiTextTruncate_Start_End_Anchor_For_Search.png and b/packages/eui/.loki/reference/chrome_desktop_Utilities_EuiTextTruncate_Start_End_Anchor_For_Search.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Editors_Syntax_EuiMarkdownEditor_Errors.png b/packages/eui/.loki/reference/chrome_mobile_Editors_Syntax_EuiMarkdownEditor_Errors.png index 17330f97abb..ee53d1a77d8 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Editors_Syntax_EuiMarkdownEditor_Errors.png and b/packages/eui/.loki/reference/chrome_mobile_Editors_Syntax_EuiMarkdownEditor_Errors.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Editors_Syntax_EuiMarkdownEditor_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Editors_Syntax_EuiMarkdownEditor_Playground.png index e30e2f735c7..3e5aefb0154 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Editors_Syntax_EuiMarkdownEditor_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Editors_Syntax_EuiMarkdownEditor_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Editors_Syntax_EuiMarkdownEditor_View_Mode.png b/packages/eui/.loki/reference/chrome_mobile_Editors_Syntax_EuiMarkdownEditor_View_Mode.png index d566845c565..ced4ed7b8a4 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Editors_Syntax_EuiMarkdownEditor_View_Mode.png and b/packages/eui/.loki/reference/chrome_mobile_Editors_Syntax_EuiMarkdownEditor_View_Mode.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Editors_Syntax_EuiMarkdownFormat_High_Contrast.png b/packages/eui/.loki/reference/chrome_mobile_Editors_Syntax_EuiMarkdownFormat_High_Contrast.png new file mode 100644 index 00000000000..8709f6aa38f Binary files /dev/null and b/packages/eui/.loki/reference/chrome_mobile_Editors_Syntax_EuiMarkdownFormat_High_Contrast.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Editors_Syntax_EuiMarkdownFormat_Kitchen_Sink.png b/packages/eui/.loki/reference/chrome_mobile_Editors_Syntax_EuiMarkdownFormat_Kitchen_Sink.png new file mode 100644 index 00000000000..6d7ed4aa1fc Binary files /dev/null and b/packages/eui/.loki/reference/chrome_mobile_Editors_Syntax_EuiMarkdownFormat_Kitchen_Sink.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Editors_Syntax_EuiMarkdownFormat_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Editors_Syntax_EuiMarkdownFormat_Playground.png index fcc5adc6a60..8732c96ae11 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Editors_Syntax_EuiMarkdownFormat_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Editors_Syntax_EuiMarkdownFormat_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Editors_Syntax_EuiMarkdownFormat_Text_Props.png b/packages/eui/.loki/reference/chrome_mobile_Editors_Syntax_EuiMarkdownFormat_Text_Props.png new file mode 100644 index 00000000000..7b4647919fd Binary files /dev/null and b/packages/eui/.loki/reference/chrome_mobile_Editors_Syntax_EuiMarkdownFormat_Text_Props.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiExpression_High_Contrast.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiExpression_High_Contrast.png new file mode 100644 index 00000000000..5690f3f301e Binary files /dev/null and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiExpression_High_Contrast.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiExpression_Kitchen_Sink.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiExpression_Kitchen_Sink.png new file mode 100644 index 00000000000..3882174205e Binary files /dev/null and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiExpression_Kitchen_Sink.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiExpression_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiExpression_Playground.png index d8a5829e50e..a45f8e8f96f 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiExpression_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiExpression_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Utilities_EuiMark_High_Contrast.png b/packages/eui/.loki/reference/chrome_mobile_Utilities_EuiMark_High_Contrast.png new file mode 100644 index 00000000000..57ca97d3dc8 Binary files /dev/null and b/packages/eui/.loki/reference/chrome_mobile_Utilities_EuiMark_High_Contrast.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Utilities_EuiTextTruncate_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Utilities_EuiTextTruncate_Playground.png index acfba94a277..6074e949066 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Utilities_EuiTextTruncate_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Utilities_EuiTextTruncate_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Utilities_EuiTextTruncate_Resize_Observer.png b/packages/eui/.loki/reference/chrome_mobile_Utilities_EuiTextTruncate_Resize_Observer.png index 4804e6e5efc..3130864af46 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Utilities_EuiTextTruncate_Resize_Observer.png and b/packages/eui/.loki/reference/chrome_mobile_Utilities_EuiTextTruncate_Resize_Observer.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Utilities_EuiTextTruncate_Start_End_Anchor_For_Search.png b/packages/eui/.loki/reference/chrome_mobile_Utilities_EuiTextTruncate_Start_End_Anchor_For_Search.png index 4ab0e9bbc6d..8d25f7cf95f 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Utilities_EuiTextTruncate_Start_End_Anchor_For_Search.png and b/packages/eui/.loki/reference/chrome_mobile_Utilities_EuiTextTruncate_Start_End_Anchor_For_Search.png differ diff --git a/packages/eui/src/components/expression/expression.stories.tsx b/packages/eui/src/components/expression/expression.stories.tsx index 788b24c6cde..ed5ad9b7d43 100644 --- a/packages/eui/src/components/expression/expression.stories.tsx +++ b/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 */} + {}} /> + + {}} + /> + + {}} + color="accent" + /> + + + {/* Columns */} + +

.kibana_task_manager,

+

kibana_sample_data_ecommerce

+ + } + onClick={() => {}} + /> + {}} + // Show focus state but hide the outline for VRT + autoFocus + css={{ outline: 'none !important' }} + /> + + + + ), +}; + +export const HighContrast: Story = { + ...KitchenSink, + tags: ['vrt-only'], + globals: { highContrastMode: true }, +}; diff --git a/packages/eui/src/components/expression/expression.styles.ts b/packages/eui/src/components/expression/expression.styles.ts index 7a43f176717..6f67600d436 100644 --- a/packages/eui/src/components/expression/expression.styles.ts +++ b/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` diff --git a/packages/eui/src/components/mark/mark.stories.tsx b/packages/eui/src/components/mark/mark.stories.tsx index 65edfe8b197..99b927c88e1 100644 --- a/packages/eui/src/components/mark/mark.stories.tsx +++ b/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 }, +}; diff --git a/packages/eui/src/components/mark/mark.styles.ts b/packages/eui/src/components/mark/mark.styles.ts index 56409fa3f8a..b690184e3d5 100644 --- a/packages/eui/src/components/mark/mark.styles.ts +++ b/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}; `, }; }; diff --git a/packages/eui/src/components/markdown_editor/__snapshots__/markdown_format.styles.test.ts.snap b/packages/eui/src/components/markdown_editor/__snapshots__/markdown_format.styles.test.ts.snap index 87cb7f80d69..1609571365e 100644 --- a/packages/eui/src/components/markdown_editor/__snapshots__/markdown_format.styles.test.ts.snap +++ b/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 { diff --git a/packages/eui/src/components/markdown_editor/markdown_format.stories.tsx b/packages/eui/src/components/markdown_editor/markdown_format.stories.tsx index 6581e71af85..e1545e4f6c3 100644 --- a/packages/eui/src/components/markdown_editor/markdown_format.stories.tsx +++ b/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 \`\` 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 }, +}; diff --git a/packages/eui/src/components/markdown_editor/markdown_format.styles.ts b/packages/eui/src/components/markdown_editor/markdown_format.styles.ts index 0d86331518a..0d5fd44c914 100644 --- a/packages/eui/src/components/markdown_editor/markdown_format.styles.ts +++ b/packages/eui/src/components/markdown_editor/markdown_format.styles.ts @@ -7,7 +7,7 @@ */ import { css } from '@emotion/react'; -import { UseEuiTheme, transparentize } from '../../services'; +import { UseEuiTheme } from '../../services'; import { logicalCSS, euiFontSize, @@ -32,6 +32,10 @@ const euiScaleMarkdownFormatText = ( return ` .euiMarkdownFormat__codeblockWrapper { ${logicalCSS('margin-bottom', fontSize)} + + .euiCodeBlock__pre { + ${logicalCSS('margin-bottom', 0)} + } } .euiMarkdownFormat__table { @@ -92,58 +96,62 @@ const euiMarkdownAdjustBorderColors = ( /** * Styles */ -export const euiMarkdownFormatStyles = (euiTheme: UseEuiTheme) => ({ - euiMarkdownFormat: css``, - // Text sizes - m: css( - euiScaleMarkdownFormatText(euiTheme, { - customScale: 'm', - }) - ), - s: css( - euiScaleMarkdownFormatText(euiTheme, { - customScale: 's', - }) - ), - xs: css( - euiScaleMarkdownFormatText(euiTheme, { - customScale: 'xs', - }) - ), - relative: css( - euiScaleMarkdownFormatText(euiTheme, { - unit: 'em', - }) - ), - colors: { - default: css( - euiMarkdownAdjustBorderColors( - euiTheme, - transparentize(euiTheme.euiTheme.colors.fullShade, 0.15) - ) - ), - subdued: css( - euiMarkdownAdjustBorderColors( - euiTheme, - euiTheme.euiTheme.colors.subduedText - ) +export const euiMarkdownFormatStyles = (euiThemeContext: UseEuiTheme) => { + const { euiTheme, highContrastMode } = euiThemeContext; + return { + euiMarkdownFormat: css``, + // Text sizes + m: css( + euiScaleMarkdownFormatText(euiThemeContext, { + customScale: 'm', + }) ), - success: css( - euiMarkdownAdjustBorderColors(euiTheme, euiTheme.euiTheme.colors.success) + s: css( + euiScaleMarkdownFormatText(euiThemeContext, { + customScale: 's', + }) ), - accent: css( - euiMarkdownAdjustBorderColors(euiTheme, euiTheme.euiTheme.colors.accent) + xs: css( + euiScaleMarkdownFormatText(euiThemeContext, { + customScale: 'xs', + }) ), - warning: css( - euiMarkdownAdjustBorderColors(euiTheme, euiTheme.euiTheme.colors.warning) + relative: css( + euiScaleMarkdownFormatText(euiThemeContext, { + unit: 'em', + }) ), - danger: css( - euiMarkdownAdjustBorderColors(euiTheme, euiTheme.euiTheme.colors.danger) - ), - ghost: css( - euiMarkdownAdjustBorderColors(euiTheme, euiTheme.euiTheme.colors.ghost) - ), - inherit: css(euiMarkdownAdjustBorderColors(euiTheme, 'currentColor')), - custom: css(euiMarkdownAdjustBorderColors(euiTheme, 'currentColor')), - }, -}); + colors: { + default: css( + euiMarkdownAdjustBorderColors(euiThemeContext, euiTheme.border.color) + ), + subdued: css( + euiMarkdownAdjustBorderColors( + euiThemeContext, + highContrastMode ? euiTheme.border.color : euiTheme.colors.subduedText + ) + ), + success: css( + euiMarkdownAdjustBorderColors(euiThemeContext, euiTheme.colors.success) + ), + accent: css( + euiMarkdownAdjustBorderColors(euiThemeContext, euiTheme.colors.accent) + ), + warning: css( + euiMarkdownAdjustBorderColors(euiThemeContext, euiTheme.colors.warning) + ), + danger: css( + euiMarkdownAdjustBorderColors(euiThemeContext, euiTheme.colors.danger) + ), + ghost: css( + euiMarkdownAdjustBorderColors(euiThemeContext, euiTheme.colors.ghost) + ), + inherit: css( + euiMarkdownAdjustBorderColors(euiThemeContext, 'currentColor') + ), + custom: css( + euiMarkdownAdjustBorderColors(euiThemeContext, 'currentColor') + ), + }, + }; +}; diff --git a/packages/eui/src/components/text/text.styles.ts b/packages/eui/src/components/text/text.styles.ts index 3512df0d559..060d23642e6 100644 --- a/packages/eui/src/components/text/text.styles.ts +++ b/packages/eui/src/components/text/text.styles.ts @@ -334,6 +334,13 @@ export const euiTextStyles = (euiThemeContext: UseEuiTheme) => { euiTheme.border.radius.small, (x) => x / 2 )}; + ${highContrastModeStyles(euiThemeContext, { + // Fixes an odd border issue in Windows high contrast themes + forced: ` + overflow: hidden; + vertical-align: middle; + `, + })} } `, constrainedWidth: css` diff --git a/packages/eui/src/components/text_truncate/text_truncate.styles.ts b/packages/eui/src/components/text_truncate/text_truncate.styles.ts index 9f7ea790b4f..d9a2bbfde9e 100644 --- a/packages/eui/src/components/text_truncate/text_truncate.styles.ts +++ b/packages/eui/src/components/text_truncate/text_truncate.styles.ts @@ -7,8 +7,10 @@ */ import { css } from '@emotion/react'; +import { UseEuiTheme } from '../../services'; +import { preventForcedColors } from '../../global_styling/functions/high_contrast'; -export const euiTextTruncateStyles = { +export const euiTextTruncateStyles = (euiThemeContext: UseEuiTheme) => ({ euiTextTruncate: css` position: relative; overflow: hidden; @@ -44,5 +46,8 @@ export const euiTextTruncateStyles = { @supports (-webkit-hyphens: none) { text-overflow: ellipsis; } + + /* Force Windows high contrast themes to use the 0 alpha color */ + ${preventForcedColors(euiThemeContext)} `, -}; +}); diff --git a/packages/eui/src/components/text_truncate/text_truncate.tsx b/packages/eui/src/components/text_truncate/text_truncate.tsx index 30022a43a8d..6e6c852dcf6 100644 --- a/packages/eui/src/components/text_truncate/text_truncate.tsx +++ b/packages/eui/src/components/text_truncate/text_truncate.tsx @@ -18,7 +18,7 @@ import React, { } from 'react'; import classNames from 'classnames'; -import { useCombinedRefs } from '../../services'; +import { useCombinedRefs, useEuiMemoizedStyles } from '../../services'; import { EuiResizeObserver, EuiResizeObserverProps, @@ -26,7 +26,7 @@ import { import type { CommonProps } from '../common'; import { TruncationUtils } from './utils'; -import { euiTextTruncateStyles as styles } from './text_truncate.styles'; +import { euiTextTruncateStyles } from './text_truncate.styles'; const TRUNCATION_TYPES = ['end', 'start', 'startEnd', 'middle'] as const; export type EuiTextTruncationTypes = (typeof TRUNCATION_TYPES)[number]; @@ -214,6 +214,8 @@ const EuiTextTruncateWithWidth: FunctionComponent< const isTruncating = truncatedText !== text; + const styles = useEuiMemoizedStyles(euiTextTruncateStyles); + return (