github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-23 09:19:04 -04:00
Code Issues Projects Releases Packages Wiki Activity

[Lens][Accessibility] Take into account background color for non opaque colors (#107877)

Browse source 
* 🐛 Take into account also background color if opaque

* ✅ Add tests for opaque colors
This commit is contained in:
Marco Liberati 2021-08-10 10:48:03 +02:00 • committed by GitHub
parent e2d88b71b5
commit 778a1160f5
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 17 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

11
x-pack/plugins/lens/public/shared_components/coloring/utils.test.ts
View file

@ -405,4 +405,15 @@ describe('getContrastColor', () => {
expect(getContrastColor('#fff', true)).toBe('#000000');
expect(getContrastColor('#fff', false)).toBe('#000000');
});
it('should take into account background color if the primary color is opaque', () => {
expect(getContrastColor('rgba(0,0,0,0)', true)).toBe('#ffffff');
expect(getContrastColor('rgba(0,0,0,0)', false)).toBe('#000000');
expect(getContrastColor('#00000000', true)).toBe('#ffffff');
expect(getContrastColor('#00000000', false)).toBe('#000000');
expect(getContrastColor('#ffffff00', true)).toBe('#ffffff');
expect(getContrastColor('#ffffff00', false)).toBe('#000000');
expect(getContrastColor('rgba(255,255,255,0)', true)).toBe('#ffffff');
expect(getContrastColor('rgba(255,255,255,0)', false)).toBe('#000000');
});
});

7
x-pack/plugins/lens/public/shared_components/coloring/utils.ts
View file

@ -294,7 +294,12 @@ export function getColorStops(
export function getContrastColor(color: string, isDarkTheme: boolean) {
const darkColor = isDarkTheme ? euiDarkVars.euiColorInk : euiLightVars.euiColorInk;
const lightColor = isDarkTheme ? euiDarkVars.euiColorGhost : euiLightVars.euiColorGhost;
return isColorDark(...chroma(color).rgb()) ? lightColor : darkColor;
const backgroundColor = isDarkTheme
? euiDarkVars.euiPageBackgroundColor
: euiLightVars.euiPageBackgroundColor;
const finalColor =
chroma(color).alpha() < 1 ? chroma.blend(backgroundColor, color, 'overlay') : chroma(color);
return isColorDark(...finalColor.rgb()) ? lightColor : darkColor;
}
/**