Skip to content

[High Contrast Mode] Loading components and beacons #8215

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
cee-chen merged 7 commits into from
Dec 11, 2024
Merged

[High Contrast Mode] Loading components and beacons #8215

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
6404b6d
[EuiProgress] Set up indentation changes
cee-chen Dec 10, 2024
0369a54
[EuiProgress] Fix windows high contrast rendering
cee-chen Dec 10, 2024
5de7803
[EuiLoadingChart] Fix Windows high contrast rendering
cee-chen Dec 10, 2024
75e3f06
[EuiLoadingSpinner] Fix Windows, increase thickness/visibility for al…
cee-chen Dec 10, 2024
aeee0a6
[EuiSkeleton] Fix Windows high contrast rendering
cee-chen Dec 10, 2024
f981d97
[EuiBeacon] Fix Windows high contrast rendering
cee-chen Dec 10, 2024
b664b7e
[PR feedback] Increase contrast of skeletons
cee-chen Dec 11, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added packages/eui/.loki/reference/chrome_desktop_Display_EuiProgress_High_Contrast.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added packages/eui/.loki/reference/chrome_mobile_Display_EuiProgress_High_Contrast.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
81 changes: 46 additions & 35 deletions packages/eui/src/components/beacon/beacon.styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import {
logicalCSS,
logicalSizeCSS,
} from '../../global_styling';
import { preventForcedColors } from '../../global_styling/functions/high_contrast';

const _colorCSS = (color: string) => {
return `
Expand Down Expand Up @@ -56,48 +57,58 @@ const euiBeaconPulseSmall = keyframes`
}
`;

export const euiBeaconStyles = ({ euiTheme }: UseEuiTheme) => ({
// Base
euiBeacon: css`
position: relative;
border-radius: 50%;
export const euiBeaconStyles = (euiThemeContext: UseEuiTheme) => {
const { euiTheme } = euiThemeContext;
return {
// Base
euiBeacon: css`
position: relative;
display: flex;
justify-content: center;
border-radius: 50%;
${preventForcedColors(euiThemeContext)}

svg {
${logicalSizeCSS('100%')}
}

&::before,
&::after {
position: absolute;
content: '';
${logicalSizeCSS('100%', '100%')}
${logicalCSS('left', 0)}
&::before,
&::after {
position: absolute;
content: '';
${logicalSizeCSS('100%')}
${logicalCSS('left', 0)}
${logicalCSS('top', 0)}
background-color: transparent;
border-radius: 50%;
}
border-radius: 50%;
}

/* Without the animation, we only display one ring around the circle
/* Without the animation, we only display one ring around the circle
If the animation is allowed the transform and opacity are overriden */
&::before {
transform: scale(1.6);
opacity: 0.4;
}

&::after {
opacity: 0;
}

${euiCanAnimate} {
&::before {
animation: ${euiBeaconPulseLarge} 2.5s infinite ease-out;
transform: scale(1.6);
opacity: 0.4;
}

&::after {
animation: ${euiBeaconPulseSmall} 2.5s infinite ease-out 0.25s;
opacity: 0;
}
}
`,
subdued: css(_colorCSS(euiTheme.colors.subduedText)),
primary: css(_colorCSS(euiTheme.colors.primary)),
success: css(_colorCSS(euiTheme.colors.success)),
warning: css(_colorCSS(euiTheme.colors.warning)),
danger: css(_colorCSS(euiTheme.colors.danger)),
accent: css(_colorCSS(euiTheme.colors.accent)),
});

${euiCanAnimate} {
&::before {
animation: ${euiBeaconPulseLarge} 2.5s infinite ease-out;
}

&::after {
animation: ${euiBeaconPulseSmall} 2.5s infinite ease-out 0.25s;
}
}
`,
subdued: css(_colorCSS(euiTheme.colors.subduedText)),
primary: css(_colorCSS(euiTheme.colors.primary)),
success: css(_colorCSS(euiTheme.colors.success)),
warning: css(_colorCSS(euiTheme.colors.warning)),
danger: css(_colorCSS(euiTheme.colors.danger)),
accent: css(_colorCSS(euiTheme.colors.accent)),
};
};
94 changes: 53 additions & 41 deletions packages/eui/src/components/loading/loading_chart.styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import {
euiCantAnimate,
logicalCSS,
} from '../../global_styling';
import { preventForcedColors } from '../../global_styling/functions/high_contrast';

const nonMonoColors = euiPaletteColorBlind();

Expand All @@ -37,49 +38,60 @@ export const euiLoadingChartStyles = ({ euiTheme }: UseEuiTheme) => ({

export const BARS_COUNT = 4;

export const euiLoadingChartBarStyles = ({
euiTheme,
colorMode,
}: UseEuiTheme) => ({
euiLoadingChart__bar: css`
${logicalCSS('height', '100%')}
display: inline-block;
export const euiLoadingChartBarStyles = (euiThemeContext: UseEuiTheme) => {
const { euiTheme, colorMode, highContrastMode } = euiThemeContext;
return {
euiLoadingChart__bar: css`
${logicalCSS('height', '100%')}
display: inline-block;
${preventForcedColors(euiThemeContext)}

${euiCanAnimate} {
animation: ${barAnimation} 1s infinite;
${euiCanAnimate} {
animation: ${barAnimation} 1s infinite;

${outputNthChildCss((index) => `animation-delay: 0.${index}s;`)}
}
${euiCantAnimate} {
${outputNthChildCss((index) => `transform: translateY(${22 * index}%);`)}
}
`,
nonmono: css`
${outputNthChildCss((index) => `background-color: ${nonMonoColors[index]}`)}
`,
mono: css`
${outputNthChildCss(
(index) =>
`background-color: ${shadeOrTint(
euiTheme.colors.lightShade,
index * 0.04,
colorMode
)}`
)}
`,
m: css`
${logicalCSS('width', euiTheme.size.xxs)}
${logicalCSS('margin-bottom', euiTheme.size.s)}
`,
l: css`
${logicalCSS('width', euiTheme.size.xs)}
${logicalCSS('margin-bottom', euiTheme.size.m)}
`,
xl: css`
${logicalCSS('width', euiTheme.size.s)}
${logicalCSS('margin-bottom', euiTheme.size.base)}
`,
});
${outputNthChildCss((index) => `animation-delay: 0.${index}s;`)}
}
${euiCantAnimate} {
${outputNthChildCss(
(index) => `transform: translateY(${22 * index}%);`
)}
}
`,
nonmono: css`
${outputNthChildCss(
(index) => `background-color: ${nonMonoColors[index]}`
)}
`,
mono: css`
${outputNthChildCss(
(index) =>
`background-color: ${
highContrastMode === 'forced'
? euiTheme.colors.fullShade
: shadeOrTint(
highContrastMode
? euiTheme.colors.darkShade
: euiTheme.colors.lightShade,
index * 0.04,
colorMode
)
}`
)}
`,
m: css`
${logicalCSS('width', euiTheme.size.xxs)}
${logicalCSS('margin-bottom', euiTheme.size.s)}
`,
l: css`
${logicalCSS('width', euiTheme.size.xs)}
${logicalCSS('margin-bottom', euiTheme.size.m)}
`,
xl: css`
${logicalCSS('width', euiTheme.size.s)}
${logicalCSS('margin-bottom', euiTheme.size.base)}
`,
};
};

/**
* Small utility helper for generating nth-child CSS for each bar
Expand Down
32 changes: 20 additions & 12 deletions packages/eui/src/components/loading/loading_spinner.styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import {
logicalShorthandCSS,
mathWithUnits,
} from '../../global_styling';
import { preventForcedColors } from '../../global_styling/functions/high_contrast';
import { UseEuiTheme } from '../../services';
import {
EuiLoadingSpinnerSize,
Expand Down Expand Up @@ -40,28 +41,41 @@ const spinnerSizes: {
};

export const euiSpinnerBorderColorsCSS = (
{ euiTheme }: UseEuiTheme,
{ euiTheme, highContrastMode }: UseEuiTheme,
colors: EuiLoadingSpinnerColor = {}
): string => {
const {
let {
border = euiTheme.colors.lightShade,
highlight = euiTheme.colors.primary,
} = colors;
if (highContrastMode === 'forced') {
border = euiTheme.colors.lightestShade;
highlight = euiTheme.colors.fullShade;
}
return `${highlight} ${border} ${border} ${border}`;
};

export const euiLoadingSpinnerStyles = (euiThemeContext: UseEuiTheme) => {
const { euiTheme } = euiThemeContext;
const { euiTheme, highContrastMode } = euiThemeContext;

const smallerBorderWidth = highContrastMode
? euiTheme.border.width.thick
: mathWithUnits(euiTheme.border.width.thin, (x) => x * 1.5);
const largerBorderWidth = highContrastMode
? mathWithUnits(euiTheme.border.thick, (x) => x * 2)
: euiTheme.border.width.thick;

return {
euiLoadingSpinner: css`
flex-shrink: 0; /* Ensures it never scales down below its intended size */
display: inline-block;
border-radius: 50%;
border: ${euiTheme.border.thick};
border: ${largerBorderWidth} solid ${euiTheme.border.color};
${logicalShorthandCSS(
'border-color',
euiSpinnerBorderColorsCSS(euiThemeContext)
)}
${preventForcedColors(euiThemeContext)}

${euiCanAnimate} {
animation: ${_loadingSpinner} 0.6s infinite linear;
Expand All @@ -74,20 +88,14 @@ export const euiLoadingSpinnerStyles = (euiThemeContext: UseEuiTheme) => {
euiTheme.size[spinnerSizes.s],
euiTheme.size[spinnerSizes.s]
)}
border-width: ${mathWithUnits(
euiTheme.border.width.thin,
(x) => x * 1.5
)};
border-width: ${smallerBorderWidth};
`,
m: css`
${logicalSizeCSS(
euiTheme.size[spinnerSizes.m],
euiTheme.size[spinnerSizes.m]
)}
border-width: ${mathWithUnits(
euiTheme.border.width.thin,
(x) => x * 1.5
)};
border-width: ${smallerBorderWidth};
`,
l: css`
${logicalSizeCSS(
Expand Down
Loading