Skip to content

Change monaco theme background color to match other form inputs#82451

Merged
ryankeairns merged 1 commit intoelastic:masterfrom
ryankeairns:rk/update-monaco-theme
Nov 4, 2020
Merged

Change monaco theme background color to match other form inputs#82451
ryankeairns merged 1 commit intoelastic:masterfrom
ryankeairns:rk/update-monaco-theme

Conversation

@ryankeairns
Copy link
Copy Markdown
Contributor

Related to #82116 #82272

Summary

It was noticed in the runtime fields work that a style override was being used for the monaco background. After further thought, it struck me that the default/theme background color ought to be changed.

Currently, it's set to an empty shade (i.e. white in light mode), however this component is used primarily as an input mechanism. Similar to the EUI code editor/blocks, I've changed the default theme to use the $euiFormBackgroundColor color.

As far as I can tell, this shared Kibana component is used in Vega, Canvas, and Painless Lab. I made some minor adjustments to Canvas and Painless, as a result, but all three have been checked in both light and dark mode.

Sample screenshots from light mode

Canvas

Changed tray bg; also checked this in 'maximized' mode

Screen Shot 2020-11-03 at 9 57 31 AM

Painless Lab

Changed background of left pane to match

Screen Shot 2020-11-03 at 9 53 27 AM

Viz/Vega

Monaco is used on the debug/spec tab only

Screen Shot 2020-11-03 at 9 47 28 AM

@ryankeairns ryankeairns added release_note:skip Skip the PR/issue when compiling release notes v7.11.0 labels Nov 3, 2020
@ryankeairns ryankeairns requested a review from a team November 3, 2020 16:15
@ryankeairns ryankeairns requested a review from a team as a code owner November 3, 2020 16:15
@kibanamachine
Copy link
Copy Markdown
Contributor

💚 Build Succeeded

Metrics [docs]

async chunks size

id before after diff
canvas 1.3MB 1.3MB -260.0B
kibanaReact 350.0KB 350.0KB +8.0B
total -252.0B

page load bundle size

id before after diff
painlessLab 24.9KB 24.9KB +6.0B

To update your PR or re-run it, just comment with:
@elasticmachine merge upstream

Copy link
Copy Markdown
Contributor

@poffdeluxe poffdeluxe left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice! Good catch. Some of these colors were chosen a long long long time ago so definitely a good update

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

release_note:skip Skip the PR/issue when compiling release notes v7.11.0

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants