High contrast mode spike

.github/pull_request_template.md

@@ -12,6 +12,8 @@ Remove or strikethrough items that do not apply to your PR.
 
 - Browser QA
     - [ ] Checked in both **light and dark** modes
+    - [ ] Checked in both [MacOS](https://support.apple.com/lv-lv/guide/mac-help/unac089/mac) and [Windows](https://support.microsoft.com/en-us/windows/turn-high-contrast-mode-on-or-off-in-windows-909e9d89-a0f9-a3a9-b993-7a6dcee85025) **high contrast modes**
+      - (_[emulate forced colors](https://devtoolstips.org/tips/en/emulate-forced-colors/) if you do not have access to a Windows machine_.)
     - [ ] Checked in **mobile**
     - [ ] Checked in **Chrome**, **Safari**, **Edge**, and **Firefox**
     - [ ] Checked for **accessibility** including keyboard-only and screenreader modes

packages/docusaurus-theme/src/components/guideline/guideline.tsx

@@ -17,7 +17,8 @@ export interface GuidelineProps extends PropsWithChildren {
   panelStyle?: EuiPanelProps['style'];
 }
 
-const getGuidelineStyles = ({ euiTheme }: UseEuiTheme) => ({
+// @ts-expect-error - Typing doesn't exist until EUI is released/upgraded
+const getGuidelineStyles = ({ euiTheme, highContrastMode }: UseEuiTheme) => ({
   root: css`
     margin-block: var(--eui-theme-content-vertical-spacing);
   `,
@@ -31,7 +32,9 @@ const getGuidelineStyles = ({ euiTheme }: UseEuiTheme) => ({
     border-color: ${euiTheme.colors.danger};
   `,
   textWrapper: css`
-    margin-block-start: var(--eui-size-xs);
+    ${highContrastMode // High contrast mode adds borders around split panels, so we should tweak text margins to account for that
+      ? 'margin: var(--eui-size-s);'
+      : 'margin-block-start: var(--eui-size-xs);'}
   `,
 });
 

packages/eui/.storybook/decorator.tsx

@@ -86,6 +86,13 @@ const storybookToolbarColorModes: Array<
   { value: 'dark', title: 'Dark mode', icon: 'circle' },
 ];
 
+const storybookToolbarHighContrastMode: Array<
+  ToolbarDisplay & { value: boolean }
+> = [
+  { value: false, title: 'High contrast off', icon: 'circlehollow' },
+  { value: true, title: 'High contrast on', icon: 'circle' },
+];
+
 const storybookToolbarWritingModes: Array<
   ToolbarDisplay & { value: WritingModes }
 > = [
@@ -112,6 +119,17 @@ export const euiProviderDecoratorGlobals: Preview['globalTypes'] = {
       dynamicTitle: true,
     },
   },
+  highContrastMode: {
+    description: 'High contrast mode for EuiProvider theme',
+    defaultValue: window?.matchMedia?.('(prefers-contrast: more)').matches
+      ? true
+      : false,
+    toolbar: {
+      title: 'Contrast mode',
+      items: storybookToolbarHighContrastMode,
+      dynamicTitle: true,
+    },
+  },
   writingMode: {
     description: 'Writing mode for testing logical property directions',
     defaultValue: 'ltr',

packages/eui/.storybook/preview.tsx

@@ -46,6 +46,7 @@ const preview: Preview = {
     (Story, context) => (
       <EuiProviderDecorator
         colorMode={context.globals.colorMode}
+        highContrastMode={context.globals.highContrastMode}
         {...(context.componentId === 'theming-euiprovider' && context.args)}
         writingMode={context.globals.writingMode}
       >

packages/eui/.stylelintrc.js

@@ -151,9 +151,6 @@ module.exports = {
             ignoreKeywords: [camelCaseValueRegex],
           },
         ],
-        // This is set to deprecate after stylelint v16, but in the meanwhile, is helpful
-        // for finding extraneous semicolons after utils that already output semicolons (e.g. logicalCSS())
-        'no-extra-semicolons': true,
 
         // Emotion uses the `label` property to generate the output className string
         'property-no-unknown': [true, { ignoreProperties: 'label' }],

packages/eui/changelogs/upcoming/8036.md

@@ -0,0 +1,3 @@
+- Updated `EuiProvider` `and `EuiThemeProvider` with a new `highContrastMode`
+  - This prop allows toggling a higher contrast visual style that primarily affects borders and shadows
+  - On `EuiProvider`, if the `highContrastMode` prop is not passed, this setting will inherit from the user's OS/system light/dark mode setting

packages/eui/src-docs/src/actions/action_types.js

@@ -2,7 +2,4 @@ export default {
   // Example nav actions
   REGISTER_SECTION: 'REGISTER_SECTION',
   UNREGISTER_SECTION: 'UNREGISTER_SECTION',
-
-  // Locale actions
-  TOGGLE_LOCALE: 'TOGGLE_LOCALE',
 };

packages/eui/src-docs/src/components/guide_page/guide_page_chrome.js

@@ -302,7 +302,5 @@ export class GuidePageChrome extends Component {
 
 GuidePageChrome.propTypes = {
   currentRoute: PropTypes.object.isRequired,
-  onToggleLocale: PropTypes.func.isRequired,
-  selectedLocale: PropTypes.string.isRequired,
   navigation: PropTypes.array.isRequired,
 };

packages/eui/src-docs/src/components/guide_page/guide_page_header.tsx

@@ -21,15 +21,7 @@ import { VersionSwitcher } from './version_switcher';
 
 const GITHUB_URL = 'https://github.com/elastic/eui';
 
-export type GuidePageHeaderProps = {
-  onToggleLocale: () => {};
-  selectedLocale: string;
-};
-
-export const GuidePageHeader: React.FunctionComponent<GuidePageHeaderProps> = ({
-  onToggleLocale,
-  selectedLocale,
-}) => {
+export const GuidePageHeader = () => {
   const isMobileSize = useIsWithinBreakpoints(['xs', 's']);
 
   const logo = useMemo(() => {
@@ -112,18 +104,9 @@ export const GuidePageHeader: React.FunctionComponent<GuidePageHeaderProps> = ({
   }, [codesandbox, github]);
 
   const rightSideItems = isMobileSize
-    ? [
-        <GuideThemeSelector
-          onToggleLocale={onToggleLocale}
-          selectedLocale={selectedLocale}
-        />,
-        mobileMenu,
-      ]
+    ? [<GuideThemeSelector />, mobileMenu]
     : [
-        <GuideThemeSelector
-          onToggleLocale={onToggleLocale}
-          selectedLocale={selectedLocale}
-        />,
+        <GuideThemeSelector />,
         github,
         <GuideFigmaLink key="figma" />,
         codesandbox,

packages/eui/src-docs/src/components/guide_rule/_guide_rule_example.scss

@@ -12,6 +12,11 @@
 
 .guideRule__example__panelFooter {
   padding: $euiSize 0;
+
+  /* High contrast mode has borders, so we should tweak the text padding to account for that */
+  @media (prefers-contrast: more), (prefers-contrast: custom), (forced-colors: active) {
+    padding: $euiSize;
+  }
 }
 
 .guideRule__example--do {

packages/eui/src-docs/src/components/guide_section/guide_section_parts/guide_section_props_description.tsx

@@ -63,23 +63,25 @@ export const GuideSectionPropsDescription: FunctionComponent<
 
   return (
     <>
-      <div className={classNames('guideSection__propsTableIntro', className)}>
-        <EuiFlexGroup alignItems="baseline" wrap>
-          <EuiFlexItem grow={false}>
-            <EuiTitle size="s">
-              <h3 id={componentName}>{componentName}</h3>
-            </EuiTitle>
+      <EuiFlexGroup
+        className={classNames('guideSection__propsTableIntro', className)}
+        alignItems="baseline"
+        wrap
+      >
+        <EuiFlexItem grow={false}>
+          <EuiTitle size="s">
+            <h3 id={componentName}>{componentName}</h3>
+          </EuiTitle>
+        </EuiFlexItem>
+        {extendedTypesElements.length > 0 && (
+          <EuiFlexItem>
+            <EuiText size="s">
+              <p>[ extends {extendedTypesElements} ]</p>
+            </EuiText>
           </EuiFlexItem>
-          {extendedTypesElements.length > 0 && (
-            <EuiFlexItem>
-              <EuiText size="s">
-                <p>[ extends {extendedTypesElements} ]</p>
-              </EuiText>
-            </EuiFlexItem>
-          )}
-        </EuiFlexGroup>
-        {descriptionElement}
-      </div>
+        )}
+      </EuiFlexGroup>
+      {descriptionElement}
     </>
   );
 };

packages/eui/src-docs/src/components/guide_section/guide_section_parts/guide_section_props_table.tsx

@@ -23,7 +23,7 @@ export const GuideSectionPropsTable: FunctionComponent<
   const { props } = docgenInfo;
 
   return (
-    <div>
+    <>
       {componentName && (
         <GuideSectionPropsDescription
           componentName={componentName}
@@ -38,7 +38,7 @@ export const GuideSectionPropsTable: FunctionComponent<
           scope: component,
         }}
       />
-    </div>
+    </>
   );
 };