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

[Painless lab] Improve contrast ratio between text and background color (#169705)

Browse source 
Fixes https://github.com/elastic/kibana/issues/154425

## Summary

Hi @elastic/appex-sharedux team 👋 We received a
[request](https://github.com/elastic/kibana/issues/154425) to fix the
low contrast of some text in the Painless lab, which uses the Kibana
React plugin's code editor. Here are the changes in the colours from
this PR:


Before | Improvement
-- | --
`euiColorAccent` Ratio: 3.27:1 | `euiColorAccentText` Ratio: 4.68:1
`euiColorSuccess` Ratio: 2.25:1 | `euiColorSuccessText` Ratio: 4.81:1
`euiColorVis0` Ratio: 2.47:1 | `euiColorSuccessText` Ratio: 4.81:1
`euiColorPrimary` Ratio: 4.53:1 | `euiColorPrimaryText` Ratio: 4.94:1
`euiColorMediumShade` Ratio: 2.51:1 | `euiTextSubduedColor` Ratio:
4.85:1
`euiColorWarning` Ratio: 1.55:1 | `euiColorWarningText` Ratio: 5.34:1
`euiColorDanger` Ratio: 5.89:1 | `euiColorDangerText` Ratio: 5.89:1

</div></b>


**Before:**
<img width="1922" alt="Screenshot 2023-10-24 at 16 42 00"
src="6434a9e7-c364-497f-9327-12d442699375">

**After:**
<img width="1922" alt="Screenshot 2023-10-24 at 16 41 19"
src="7d77b106-601e-4518-bacf-1adcd2c38308">
This commit is contained in:
Elena Stoeva 2023-10-31 10:53:55 +00:00 • committed by GitHub
parent 0bbcdaaee7
commit 7a9b3dfeff
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 41 additions and 41 deletions
Download patch file Download diff file Expand all files Collapse all files

82
src/plugins/kibana_react/public/code_editor/editor_theme.ts
View file

@ -27,62 +27,62 @@ export function createTheme(
foreground: euiTheme.euiColorDarkestShade,
background: euiTheme.euiFormBackgroundColor,
},
{ token: 'invalid', foreground: euiTheme.euiColorAccent },
{ token: 'invalid', foreground: euiTheme.euiColorAccentText },
{ token: 'emphasis', fontStyle: 'italic' },
{ token: 'strong', fontStyle: 'bold' },
{ token: 'variable', foreground: euiTheme.euiColorPrimary },
{ token: 'variable.predefined', foreground: euiTheme.euiColorSuccess },
{ token: 'constant', foreground: euiTheme.euiColorAccent },
{ token: 'comment', foreground: euiTheme.euiColorMediumShade },
{ token: 'number', foreground: euiTheme.euiColorAccent },
{ token: 'number.hex', foreground: euiTheme.euiColorAccent },
{ token: 'regexp', foreground: euiTheme.euiColorDanger },
{ token: 'annotation', foreground: euiTheme.euiColorMediumShade },
{ token: 'type', foreground: euiTheme.euiColorVis0 },
{ token: 'variable', foreground: euiTheme.euiColorPrimaryText },
{ token: 'variable.predefined', foreground: euiTheme.euiColorSuccessText },
{ token: 'constant', foreground: euiTheme.euiColorAccentText },
{ token: 'comment', foreground: euiTheme.euiTextSubduedColor },
{ token: 'number', foreground: euiTheme.euiColorAccentText },
{ token: 'number.hex', foreground: euiTheme.euiColorAccentText },
{ token: 'regexp', foreground: euiTheme.euiColorDangerText },
{ token: 'annotation', foreground: euiTheme.euiTextSubduedColor },
{ token: 'type', foreground: euiTheme.euiColorSuccessText },
{ token: 'delimiter', foreground: euiTheme.euiTextSubduedColor },
{ token: 'delimiter.html', foreground: euiTheme.euiColorDarkShade },
{ token: 'delimiter.xml', foreground: euiTheme.euiColorPrimary },
{ token: 'delimiter.xml', foreground: euiTheme.euiColorPrimaryText },
{ token: 'tag', foreground: euiTheme.euiColorDanger },
{ token: 'tag.id.jade', foreground: euiTheme.euiColorPrimary },
{ token: 'tag.class.jade', foreground: euiTheme.euiColorPrimary },
{ token: 'meta.scss', foreground: euiTheme.euiColorAccent },
{ token: 'metatag', foreground: euiTheme.euiColorSuccess },
{ token: 'metatag.content.html', foreground: euiTheme.euiColorDanger },
{ token: 'metatag.html', foreground: euiTheme.euiColorMediumShade },
{ token: 'metatag.xml', foreground: euiTheme.euiColorMediumShade },
{ token: 'tag', foreground: euiTheme.euiColorDangerText },
{ token: 'tag.id.jade', foreground: euiTheme.euiColorPrimaryText },
{ token: 'tag.class.jade', foreground: euiTheme.euiColorPrimaryText },
{ token: 'meta.scss', foreground: euiTheme.euiColorAccentText },
{ token: 'metatag', foreground: euiTheme.euiColorSuccessText },
{ token: 'metatag.content.html', foreground: euiTheme.euiColorDangerText },
{ token: 'metatag.html', foreground: euiTheme.euiTextSubduedColor },
{ token: 'metatag.xml', foreground: euiTheme.euiTextSubduedColor },
{ token: 'metatag.php', fontStyle: 'bold' },
{ token: 'key', foreground: euiTheme.euiColorWarning },
{ token: 'string.key.json', foreground: euiTheme.euiColorDanger },
{ token: 'string.value.json', foreground: euiTheme.euiColorPrimary },
{ token: 'key', foreground: euiTheme.euiColorWarningText },
{ token: 'string.key.json', foreground: euiTheme.euiColorDangerText },
{ token: 'string.value.json', foreground: euiTheme.euiColorPrimaryText },
{ token: 'attribute.name', foreground: euiTheme.euiColorDanger },
{ token: 'attribute.name.css', foreground: euiTheme.euiColorSuccess },
{ token: 'attribute.value', foreground: euiTheme.euiColorPrimary },
{ token: 'attribute.value.number', foreground: euiTheme.euiColorWarning },
{ token: 'attribute.value.unit', foreground: euiTheme.euiColorWarning },
{ token: 'attribute.value.html', foreground: euiTheme.euiColorPrimary },
{ token: 'attribute.value.xml', foreground: euiTheme.euiColorPrimary },
{ token: 'attribute.name', foreground: euiTheme.euiColorDangerText },
{ token: 'attribute.name.css', foreground: euiTheme.euiColorSuccessText },
{ token: 'attribute.value', foreground: euiTheme.euiColorPrimaryText },
{ token: 'attribute.value.number', foreground: euiTheme.euiColorWarningText },
{ token: 'attribute.value.unit', foreground: euiTheme.euiColorWarningText },
{ token: 'attribute.value.html', foreground: euiTheme.euiColorPrimaryText },
{ token: 'attribute.value.xml', foreground: euiTheme.euiColorPrimaryText },
{ token: 'string', foreground: euiTheme.euiColorDanger },
{ token: 'string.html', foreground: euiTheme.euiColorPrimary },
{ token: 'string.sql', foreground: euiTheme.euiColorDanger },
{ token: 'string.yaml', foreground: euiTheme.euiColorPrimary },
{ token: 'string', foreground: euiTheme.euiColorDangerText },
{ token: 'string.html', foreground: euiTheme.euiColorPrimaryText },
{ token: 'string.sql', foreground: euiTheme.euiColorDangerText },
{ token: 'string.yaml', foreground: euiTheme.euiColorPrimaryText },
{ token: 'keyword', foreground: euiTheme.euiColorPrimary },
{ token: 'keyword.json', foreground: euiTheme.euiColorPrimary },
{ token: 'keyword.flow', foreground: euiTheme.euiColorWarning },
{ token: 'keyword.flow.scss', foreground: euiTheme.euiColorPrimary },
{ token: 'keyword', foreground: euiTheme.euiColorPrimaryText },
{ token: 'keyword.json', foreground: euiTheme.euiColorPrimaryText },
{ token: 'keyword.flow', foreground: euiTheme.euiColorWarningText },
{ token: 'keyword.flow.scss', foreground: euiTheme.euiColorPrimaryText },
// Monaco editor supports strikethrough font style only starting from 0.32.0.
{ token: 'keyword.deprecated', foreground: euiTheme.euiColorAccent },
{ token: 'keyword.deprecated', foreground: euiTheme.euiColorAccentText },
{ token: 'operator.scss', foreground: euiTheme.euiColorDarkShade },
{ token: 'operator.sql', foreground: euiTheme.euiColorMediumShade },
{ token: 'operator.swift', foreground: euiTheme.euiColorMediumShade },
{ token: 'predefined.sql', foreground: euiTheme.euiColorMediumShade },
{ token: 'operator.sql', foreground: euiTheme.euiTextSubduedColor },
{ token: 'operator.swift', foreground: euiTheme.euiTextSubduedColor },
{ token: 'predefined.sql', foreground: euiTheme.euiTextSubduedColor },
{ token: 'text', foreground: euiTheme.euiTitleColor },
{ token: 'label', foreground: euiTheme.euiColorVis9 },