[ extends {extendedTypesElements} ]
+[ extends {extendedTypesElements} ]
-Returns just the computed background color for the given{' '} diff --git a/packages/eui/src-docs/src/views/theme/color/contrast.tsx b/packages/eui/src-docs/src/views/theme/color/contrast.tsx index e9a96a4c286..f95c739afbb 100644 --- a/packages/eui/src-docs/src/views/theme/color/contrast.tsx +++ b/packages/eui/src-docs/src/views/theme/color/contrast.tsx @@ -115,7 +115,11 @@ export default () => { {/* This wrapping div for the sticky positioning */}
- Elastic UI builds with a very limited palette. It uses a core set of - three colors with a green / orange / red qualitative set and combined - with a six-color grayscale. Variation beyond these colors is minimal and - always done with math manipulation against the original set. -
-- When switching between light and dark color modes, the theme keys do not - change, only their values do. This is why most keys are not named for - their evaluated value but by their{' '} - purpose. -
-+ Elastic UI builds with a very limited palette. It uses a core set of + three colors with a green / orange / red qualitative set and combined + with a six-color grayscale. Variation beyond these colors is minimal + and always done with math manipulation against the original set. +
++ When switching between light and dark color modes, the theme keys do + not change, only their values do. This is why most keys are not + named for their evaluated value but by their{' '} + purpose. +
useEuiShadow(size, options)}
+ props={`size?: '${EuiThemeShadowSizes.join("' | '")}';
+
+options?: {
+ color?: string;
+ property?: 'box-shadow' | 'filter';
+ borderAllInHighContrastMode?: boolean;
+};`}
description={
<>
@@ -102,7 +109,7 @@ export default () => {
Usually you want to avoid putting shadows on containers with the - same background color of its parent (e.g. white on white); + same background color of its parent (e.g. white on white).
} @@ -131,7 +138,7 @@ export const ShadowValuesJS = () => { return { id: shadow, token: customColor - ? `useEuiShadow('${shadow}', euiTheme.colors.accent);` + ? `useEuiShadow('${shadow}', { color: euiTheme.colors.accent });` : `useEuiShadow('${shadow}');`, description: _EuiShadowSizesDescriptions[shadow], }; @@ -142,7 +149,7 @@ export const ShadowValuesJS = () => { // @ts-ignore TODO id: 'flat', token: customColor - ? 'useEuiShadowFlat(euiTheme.colors.accent);' + ? 'useEuiShadowFlat({ color: euiTheme.colors.accent });' : 'useEuiShadowFlat();', description: 'Similar to shadow medium but without the bottom depth. Useful for popovers that drop UP rather than DOWN.', diff --git a/packages/eui/src-docs/src/views/theme/other/other.tsx b/packages/eui/src-docs/src/views/theme/other/other.tsx index 68202c35c23..ec0c3518dbd 100644 --- a/packages/eui/src-docs/src/views/theme/other/other.tsx +++ b/packages/eui/src-docs/src/views/theme/other/other.tsx @@ -1,4 +1,5 @@ import React, { useContext, useMemo } from 'react'; +import { Link } from 'react-router-dom'; import { GuideTabbedPage } from '../../../components/guide_tabbed_page'; import { ThemeContext } from '../../../components/with_theme'; @@ -139,11 +140,7 @@ export default () => {For accessbility support, we highly recommend always wrapping animations and transitions with this{' '} @@ -174,6 +171,20 @@ export default () => {
+ Keep in mind that shadows will not render in{' '} + + forced high contrast modes + + . EUI's shadow utilities automatically replace shadows with bottom + borders, which will render better in high contrast modes. These + utilities can also be configured to render their high contrast + borders around the entire element. +
+hasBorder should
+
+ // so that high contrast mode borders render as expected
+ preferred: `
+ .euiCodeBlock {
+ ${logicalCSS('margin-bottom', lineHeightSize)}
+
+ pre {
+ ${logicalCSS('margin-bottom', 0)}
+ }
+ }
+ `,
+ })}
${
// when textSize is 'm', the 'kbd' element gets a line between the text and the border-bottom
_customScale === 'm'
diff --git a/packages/eui/src/global_styling/variables/borders.ts b/packages/eui/src/global_styling/variables/borders.ts
index 10eda82eb9b..18ebe51ac78 100644
--- a/packages/eui/src/global_styling/variables/borders.ts
+++ b/packages/eui/src/global_styling/variables/borders.ts
@@ -37,7 +37,8 @@ export interface _EuiThemeBorderRadiusValues {
export interface _EuiThemeBorderColorValues {
/**
- * Color for all borders; Default is `colors.lightShade`
+ * Color for all borders; Default is `colors.lightShade`.
+ * In high contrast mode, this value becomes `colors.fullShade` and cannot be overridden.
*/
color: ColorModeSwitch;
}
diff --git a/packages/eui/src/global_styling/variables/shadow.ts b/packages/eui/src/global_styling/variables/shadow.ts
index e8bd284645b..31bcedee7e7 100644
--- a/packages/eui/src/global_styling/variables/shadow.ts
+++ b/packages/eui/src/global_styling/variables/shadow.ts
@@ -21,9 +21,3 @@ export const _EuiShadowSizesDescriptions: Record<_EuiThemeShadowSize, string> =
l: 'Primary shadow used in most cases to add visible depth.',
xl: 'Very large shadows used for large portalled style containers like modals and flyouts.',
};
-
-export interface _EuiThemeShadowCustomColor {
- color?: string;
- property?: 'box-shadow' | 'filter';
- borderAllInHighContrastMode?: boolean;
-}
diff --git a/packages/eui/src/themes/amsterdam/global_styling/mixins/shadow.ts b/packages/eui/src/themes/amsterdam/global_styling/mixins/shadow.ts
index ea3d4253ee2..84e596c93eb 100644
--- a/packages/eui/src/themes/amsterdam/global_styling/mixins/shadow.ts
+++ b/packages/eui/src/themes/amsterdam/global_styling/mixins/shadow.ts
@@ -9,13 +9,15 @@
import { useEuiTheme, UseEuiTheme } from '../../../../services/theme';
import { getShadowColor } from '../functions';
import { logicalCSS } from '../../../../global_styling';
-import {
- _EuiThemeShadowSize,
- _EuiThemeShadowCustomColor,
-} from '../../../../global_styling/variables/shadow';
+import { _EuiThemeShadowSize } from '../../../../global_styling/variables/shadow';
-export interface EuiShadowCustomColor {
+export interface EuiShadowOptions {
color?: string;
+ /**
+ * Note: not supported by all shadow utilities.
+ */
+ property?: 'box-shadow' | 'filter';
+ borderAllInHighContrastMode?: boolean;
}
/**
@@ -23,7 +25,7 @@ export interface EuiShadowCustomColor {
*/
export const euiShadowXSmall = (
{ euiTheme, colorMode, highContrastMode }: UseEuiTheme,
- options?: _EuiThemeShadowCustomColor
+ options?: EuiShadowOptions
) => {
if (highContrastMode) {
return _highContrastBorder(euiTheme, options);
@@ -43,7 +45,7 @@ box-shadow:
*/
export const euiShadowSmall = (
{ euiTheme, colorMode, highContrastMode }: UseEuiTheme,
- options?: _EuiThemeShadowCustomColor
+ options?: EuiShadowOptions
) => {
if (highContrastMode) {
return _highContrastBorder(euiTheme, options);
@@ -64,7 +66,7 @@ box-shadow:
*/
export const euiShadowMedium = (
{ euiTheme, colorMode, highContrastMode }: UseEuiTheme,
- options?: _EuiThemeShadowCustomColor
+ options?: EuiShadowOptions
) => {
if (highContrastMode) {
return _highContrastBorder(euiTheme, options);
@@ -93,7 +95,7 @@ export const euiShadowMedium = (
*/
export const euiShadowLarge = (
{ euiTheme, colorMode, highContrastMode }: UseEuiTheme,
- options?: _EuiThemeShadowCustomColor
+ options?: EuiShadowOptions
) => {
if (highContrastMode) {
return _highContrastBorder(euiTheme, options);
@@ -113,7 +115,7 @@ box-shadow:
/**
* bottomShadowLarge
*/
-export interface EuiShadowXLarge extends _EuiThemeShadowCustomColor {
+export interface EuiShadowXLarge extends EuiShadowOptions {
reverse?: boolean;
}
export const euiShadowXLarge = (
@@ -141,7 +143,7 @@ box-shadow:
*/
export const euiSlightShadowHover = (
{ euiTheme, colorMode, highContrastMode }: UseEuiTheme,
- options?: _EuiThemeShadowCustomColor
+ options?: EuiShadowOptions
) => {
if (highContrastMode) {
return _highContrastBorder(euiTheme, options);
@@ -157,11 +159,9 @@ box-shadow:
0 23px 35px ${getShadowColor(color, 0.05, colorMode)};
`;
};
-export const useEuiSlightShadowHover = (
- color?: _EuiThemeShadowCustomColor['color']
-) => {
+export const useEuiSlightShadowHover = (options?: EuiShadowOptions) => {
const euiThemeContext = useEuiTheme();
- return euiSlightShadowHover(euiThemeContext, { color });
+ return euiSlightShadowHover(euiThemeContext, options);
};
/**
@@ -172,10 +172,13 @@ export const useEuiSlightShadowHover = (
*/
export const euiShadowFlat = (
{ euiTheme, colorMode, highContrastMode }: UseEuiTheme,
- options?: _EuiThemeShadowCustomColor
+ options?: EuiShadowOptions
) => {
if (highContrastMode) {
- return _highContrastBorder(euiTheme, options);
+ return _highContrastBorder(euiTheme, {
+ borderAllInHighContrastMode: true,
+ ...options,
+ });
}
const color = options?.color || euiTheme.colors.shadow;
@@ -188,17 +191,15 @@ box-shadow:
0 0 17px ${getShadowColor(color, 0.03, colorMode)};
`;
};
-export const useEuiShadowFlat = (
- color?: _EuiThemeShadowCustomColor['color']
-) => {
+export const useEuiShadowFlat = (options?: EuiShadowOptions) => {
const euiThemeContext = useEuiTheme();
- return euiShadowFlat(euiThemeContext, { color });
+ return euiShadowFlat(euiThemeContext, options);
};
export const euiShadow = (
euiThemeContext: UseEuiTheme,
size: _EuiThemeShadowSize = 'l',
- options?: _EuiThemeShadowCustomColor
+ options?: EuiShadowOptions
) => {
if (euiThemeContext.highContrastMode) {
return _highContrastBorder(euiThemeContext.euiTheme, options);
@@ -224,10 +225,10 @@ export const euiShadow = (
export const useEuiShadow = (
size: _EuiThemeShadowSize = 'l',
- color?: _EuiThemeShadowCustomColor['color']
+ options?: EuiShadowOptions
) => {
const euiThemeContext = useEuiTheme();
- return euiShadow(euiThemeContext, size, { color });
+ return euiShadow(euiThemeContext, size, options);
};
/**
@@ -238,9 +239,11 @@ export const useEuiShadow = (
const _highContrastBorder = (
{ border }: UseEuiTheme['euiTheme'],
- { borderAllInHighContrastMode }: _EuiThemeShadowCustomColor = {}
+ { borderAllInHighContrastMode, color = border.color }: EuiShadowOptions = {}
) => {
+ const borderCSS = `${border.width.thin} solid ${color || border.color}`;
+
return borderAllInHighContrastMode
- ? `border: ${border.thin};`
- : logicalCSS('border-bottom', border.thin);
+ ? `border: ${borderCSS};`
+ : logicalCSS('border-bottom', borderCSS);
};
diff --git a/packages/website/docs/components/guidelines/writing/_category_.yml b/packages/website/docs/components/guidelines/writing/_category_.yml
index c64271ca370..95b785455dc 100644
--- a/packages/website/docs/components/guidelines/writing/_category_.yml
+++ b/packages/website/docs/components/guidelines/writing/_category_.yml
@@ -1,3 +1,3 @@
link:
type: doc
- id: guidelines_writing_guidelines
+ id: guidelines_writing
diff --git a/packages/website/docs/components/guidelines/writing/guidelines.mdx b/packages/website/docs/components/guidelines/writing/guidelines.mdx
index 333ad17865f..ee278b22327 100644
--- a/packages/website/docs/components/guidelines/writing/guidelines.mdx
+++ b/packages/website/docs/components/guidelines/writing/guidelines.mdx
@@ -1,6 +1,6 @@
---
-slug: /guidelines/writing/guidelines
-id: guidelines_writing_guidelines
+slug: /guidelines/writing
+id: guidelines_writing
title: Writing
sidebar_position: 3
---
diff --git a/packages/website/docs/components/navigation/button/button_intro.tsx b/packages/website/docs/components/navigation/button/button_intro.tsx
index 98675315466..f62169a0bf8 100644
--- a/packages/website/docs/components/navigation/button/button_intro.tsx
+++ b/packages/website/docs/components/navigation/button/button_intro.tsx
@@ -52,8 +52,9 @@ export default () => {
image={
{children}
diff --git a/packages/website/docs/components/theming/borders.mdx b/packages/website/docs/components/theming/borders.mdx
index 6dafa5fe800..e2c4ebb27e4 100644
--- a/packages/website/docs/components/theming/borders.mdx
+++ b/packages/website/docs/components/theming/borders.mdx
@@ -51,9 +51,10 @@ import { ColorPreview } from './borders/color_preview';
### `euiTheme.border.color` token
- Color for all borders; Default is `colors.lightShade`
-
You can apply this color directly to any `border-color` property.
+ - Default is `colors.lightShade`
+ - In high contrast mode, this value becomes `colors.fullShade` and cannot be overridden.
+
diff --git a/packages/website/docs/components/theming/colors/values.mdx b/packages/website/docs/components/theming/colors/values.mdx
index 73ea3c043d4..b0fa503bd23 100644
--- a/packages/website/docs/components/theming/colors/values.mdx
+++ b/packages/website/docs/components/theming/colors/values.mdx
@@ -9,6 +9,10 @@ Elastic UI builds with a very limited palette. It uses a core set of three color
When switching between light and dark color modes, the theme keys do not change, only their values do. This is why most keys are not named for their **evaluated** value but by their **purpose**.
+import ForcedColorsWarning from './_forced_colors_warning.mdx';
+
+
-
+
{preview}
.euiCodeBlock {
+ border: none;
+ }
+ `,
+ })}
`}
>
{snippet}
diff --git a/packages/website/src/components/homepage/highlights/index.tsx b/packages/website/src/components/homepage/highlights/index.tsx
index e9957110530..c512ec106b9 100644
--- a/packages/website/src/components/homepage/highlights/index.tsx
+++ b/packages/website/src/components/homepage/highlights/index.tsx
@@ -162,11 +162,9 @@ const getStyles = ({ euiTheme, colorMode }: UseEuiTheme) => ({
}
`,
card: css`
- background-color: transparent;
- border: none;
-
&:hover {
box-shadow: none;
+ filter: none;
a {
color: ${euiTheme.colors.link};
@@ -256,7 +254,7 @@ export const HomepageHighlights = () => {
)
}
paddingSize="s"
- hasBorder
+ display="transparent"
css={styles.card}
>