[High Contrast Mode] new_final_final(2).psd

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

@@ -56,7 +56,7 @@ export interface DemoProps extends PropsWithChildren {
 
 const getDemoStyles = (euiTheme: UseEuiTheme) => ({
   demo: css`
-    --docs-demo-border-color: ${euiTheme.euiTheme.colors.lightShade};
+    --docs-demo-border-color: ${euiTheme.euiTheme.border.color};
     --docs-demo-border-radius: ${euiTheme.euiTheme.size.s};
 
     border: 1px solid var(--docs-demo-border-color);

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

@@ -6,6 +6,7 @@ import {
   useEuiMemoizedStyles,
   UseEuiTheme,
 } from '@elastic/eui';
+import { highContrastModeStyles } from '@elastic/eui/lib/global_styling/functions/high_contrast';
 import { css } from '@emotion/react';
 import { GuidelineType } from './types';
 import { GuidelineText } from './guideline_text';
@@ -17,23 +18,38 @@ export interface GuidelineProps extends PropsWithChildren {
   panelStyle?: EuiPanelProps['style'];
 }
 
-const getGuidelineStyles = ({ euiTheme }: UseEuiTheme) => ({
-  root: css`
-    margin-block: var(--eui-theme-content-vertical-spacing);
-  `,
-  wrapper: css`
-    border-block-end: 2px solid ${euiTheme.colors.lightShade};
-  `,
-  wrapperDo: css`
-    border-color: ${euiTheme.colors.success};
-  `,
-  wrapperDont: css`
-    border-color: ${euiTheme.colors.danger};
-  `,
-  textWrapper: css`
-    margin-block-start: var(--eui-size-xs);
-  `,
-});
+const getGuidelineStyles = (euiThemeContext: UseEuiTheme) => {
+  const { euiTheme, highContrastMode } = euiThemeContext;
+  return {
+    root: css`
+      margin-block: var(--eui-theme-content-vertical-spacing);
+    `,
+    wrapper: css`
+      border-block-end: ${euiTheme.border.thick};
+      border-start-start-radius: ${euiTheme.border.radius.medium};
+      border-start-end-radius: ${euiTheme.border.radius.medium};
+      overflow: hidden;
+
+      ${highContrastModeStyles(euiThemeContext, {
+        // Code block is used within a panel which already has a border - skip doubling up
+        preferred: `
+          & > .euiCodeBlock {
+            border: none;
+          }
+        `,
+      })}
+    `,
+    wrapperDo: css`
+      border-color: ${euiTheme.colors.success};
+    `,
+    wrapperDont: css`
+      border-color: ${euiTheme.colors.danger};
+    `,
+    textWrapper: css`
+      margin-block-start: var(--eui-size-xs);
+    `,
+  };
+};
 
 export const Guideline = ({
   children,

packages/docusaurus-theme/src/theme/DocRoot/Layout/Sidebar/index.tsx

@@ -17,6 +17,7 @@ const getGlobalStyles = ({ euiTheme }: UseEuiTheme) => {
     sidebar: css`
       --doc-sidebar-width: 258px;
       --doc-sidebar-hidden-width: 30px;
+      --ifm-toc-border-color: ${euiTheme.border.color};
 
       // ensure scrolling still works
       display: flex;
@@ -28,7 +29,7 @@ const getGlobalStyles = ({ euiTheme }: UseEuiTheme) => {
   };
 };
 
-// converted from css moduels to Emotion
+// converted from css modules to Emotion
 const styles = {
   docSidebarContainer: css`
     display: none;

packages/eui/changelogs/upcoming/8234.md

@@ -0,0 +1,2 @@
+- `useEuiShadow()` now accepts a second `options` argument 
+- `useEuiShadowFlat()` now accepts an `options` object instead of only a color

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

@@ -1,6 +1,10 @@
 import React, { FunctionComponent, useState, useEffect, useMemo } from 'react';
-import { EuiCodeBlock } from '../../../../../src/components/code';
-import { EuiButtonEmpty } from '../../../../../src/components/button';
+import {
+  EuiCodeBlock,
+  EuiButtonEmpty,
+  EuiHorizontalRule,
+  useEuiTheme,
+} from '../../../../../src';
 // @ts-ignore Not TS
 import { CodeSandboxLink } from '../../codesandbox';
 // @ts-ignore Not TS
@@ -46,6 +50,8 @@ export const GuideSectionExampleCode: FunctionComponent<
     </CodeSandboxLink>
   ) : undefined;
 
+  const { highContrastMode } = useEuiTheme();
+
   return (
     <>
       <EuiCodeBlock
@@ -56,9 +62,12 @@ export const GuideSectionExampleCode: FunctionComponent<
         }
         overflowHeight={400}
         isCopyable
+        // Code block is used within a panel which already has a border - skip doubling up
+        {...(highContrastMode && { css: { border: 'none' } })}
       >
         {codeToRender}
       </EuiCodeBlock>
+      {highContrastMode && <EuiHorizontalRule margin="none" />}
       {codeSandboxLink}
     </>
   );

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

@@ -2,7 +2,7 @@ import React, { FunctionComponent, ReactNode } from 'react';
 import classNames from 'classnames';
 import { EuiSplitPanel } from '../../../../../src/components/panel';
 import { _EuiSplitPanelInnerProps } from '../../../../../src/components/panel/split_panel/';
-import { EuiHorizontalRule } from '../../../../../src';
+import { EuiHorizontalRule, useEuiTheme } from '../../../../../src';
 
 export interface GuideSectionExample {
   example: ReactNode;
@@ -27,6 +27,8 @@ export const GuideSectionExample: FunctionComponent<GuideSectionExample> = ({
     guideDemo__ghostBackground: ghostBackground,
   });
 
+  const { highContrastMode } = useEuiTheme();
+
   return (
     <EuiSplitPanel.Outer hasBorder hasShadow={false} data-eui-docs-example>
       <EuiSplitPanel.Inner
@@ -36,15 +38,17 @@ export const GuideSectionExample: FunctionComponent<GuideSectionExample> = ({
       >
         {example}
       </EuiSplitPanel.Inner>
+      {exampleToggles && !highContrastMode && (
+        <EuiHorizontalRule margin="none" />
+      )}
       {exampleToggles && (
-        <>
-          <EuiHorizontalRule margin="none" />
-          <EuiSplitPanel.Inner paddingSize="m" color="subdued">
-            {exampleToggles}
-          </EuiSplitPanel.Inner>
-        </>
+        <EuiSplitPanel.Inner paddingSize="m" color="subdued">
+          {exampleToggles}
+        </EuiSplitPanel.Inner>
+      )}
+      {exampleToggles && tabs && !highContrastMode && (
+        <EuiHorizontalRule margin="none" />
       )}
-      {exampleToggles && tabs && <EuiHorizontalRule margin="none" />}
       {(tabs || tabContent) && (
         <EuiSplitPanel.Inner paddingSize="none" color="subdued">
           {tabs}

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>
+    </>
   );
 };
 

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

@@ -1,6 +1,10 @@
 import React, { FunctionComponent } from 'react';
-import { EuiCodeBlock } from '../../../../../src/components/code';
-import { EuiSpacer } from '../../../../../src/components/spacer';
+import {
+  EuiCodeBlock,
+  EuiHorizontalRule,
+  EuiSpacer,
+  useEuiTheme,
+} from '../../../../../src';
 
 export type GuideSectionSnippets = {
   snippets: string | string[];
@@ -9,20 +13,29 @@ export type GuideSectionSnippets = {
 export const GuideSectionSnippets: FunctionComponent<GuideSectionSnippets> = ({
   snippets,
 }) => {
+  const { highContrastMode } = useEuiTheme();
+  const codeBlockProps = {
+    language: 'jsx',
+    fontSize: 'm',
+    paddingSize: 'm',
+    isCopyable: true,
+    // Code block is used within a panel which already has a border - skip doubling up
+    ...(highContrastMode && { css: { border: 'none' } }),
+  } as const;
+
   let snippetCode;
   if (typeof snippets === 'string') {
-    snippetCode = (
-      <EuiCodeBlock language="jsx" fontSize="m" paddingSize="m" isCopyable>
-        {snippets}
-      </EuiCodeBlock>
-    );
+    snippetCode = <EuiCodeBlock {...codeBlockProps}>{snippets}</EuiCodeBlock>;
   } else {
     snippetCode = snippets.map((snip, index) => (
       <React.Fragment key={`snippet${index}`}>
-        <EuiCodeBlock language="jsx" fontSize="m" paddingSize="m" isCopyable>
-          {snip}
-        </EuiCodeBlock>
-        {index < snippets.length - 1 && <EuiSpacer size="xs" />}
+        <EuiCodeBlock {...codeBlockProps}>{snip}</EuiCodeBlock>
+        {index < snippets.length - 1 &&
+          (highContrastMode ? (
+            <EuiHorizontalRule margin="xs" />
+          ) : (
+            <EuiSpacer size="xs" />
+          ))}
       </React.Fragment>
     ));
   }

packages/eui/src-docs/src/services/playground/_index.scss

@@ -1,2 +1 @@
 @import './playground_compiler';
-@import './playground_knobs';

packages/eui/src-docs/src/services/playground/_playground_compiler.scss

@@ -11,10 +11,6 @@
   flex-shrink: 0;
 }
 
-.playground__tableWrapper {
-  background-color: $euiPageBackgroundColor;
-}
-
 .playground__title {
   padding: $euiSizeS $euiSize;
 }

packages/eui/src-docs/src/services/playground/knobs.js

@@ -1,6 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import { assertUnreachable, PropTypes } from 'react-view';
 import {
+  useEuiTheme,
   useIsWithinBreakpoints,
   EuiTitle,
   EuiCodeBlock,
@@ -22,7 +23,6 @@ import {
   EuiTextArea,
   EuiFormRow,
   EuiText,
-  EuiPanel,
   EuiMarkdownFormat,
 } from '../../../../src';
 import {
@@ -480,7 +480,6 @@ const KnobColumn = ({ state, knobNames, error, set, isPlayground }) => {
           key={`modify__${name}-${idx}`}
           header={isPlayground ? 'Modify' : 'Default value'}
           textOnly={false}
-          className={isPlayground ? 'playgroundKnobs__rowCell' : undefined}
         >
           {isPlayground ? (
             <Knob
@@ -511,6 +510,7 @@ const KnobColumn = ({ state, knobNames, error, set, isPlayground }) => {
 };
 
 const Knobs = ({ state, set, error, isPlayground = true }) => {
+  const { euiTheme } = useEuiTheme();
   const isMobile = useIsWithinBreakpoints(['xs', 's']);
   const knobNames = Object.keys(state);
 
@@ -532,12 +532,7 @@ const Knobs = ({ state, set, error, isPlayground = true }) => {
   });
 
   return (
-    <EuiPanel
-      color="transparent"
-      paddingSize={isMobile ? 's' : 'none'}
-      hasBorder={false}
-      hasShadow={false}
-    >
+    <div style={isMobile ? { padding: euiTheme.size.s } : undefined}>
       <EuiTable style={{ background: 'transparent' }}>
         <EuiTableHeader>
           {columns.map(({ name, width }, id) => {
@@ -559,7 +554,7 @@ const Knobs = ({ state, set, error, isPlayground = true }) => {
           />
         </EuiTableBody>
       </EuiTable>
-    </EuiPanel>
+    </div>
   );
 };