Skip to content
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.

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

Dark mode redux, fix dark mode docs #1691

Merged
merged 7 commits into from
Mar 7, 2019
Merged

Conversation

snide
Copy link
Contributor

@snide snide commented Mar 7, 2019

Summary

Fixes #605

Figured this was one of the few things we could try and get in before RC1.

Updates the dark mode color scheme to get blue hues. I brightened up the colors but have yet to do a full contrast audit other than to see that things generally work. I've tried to steal colors from the upcoming marketing designs as much as I could here so that we match against some of the things they are planning.

I also went ahead and fixed the docs pages to better account for the dark mode palettes. Because of the way they were imported, this required me to duplicate some vars in the eui_theme_dark.scss file (like the viz colors or ghost) that were unchanged between themes. I think it's ok to have them there, but would be nice to have a better solution.

@cchaos tag you're it. Feel free to commit to this PR directly and adjust whatever you see fit, then pass it to @ryankeairns next.

In Kibana

If you want to try this in Kibana you'll need to run a build of KUI there to generate matching CSS. Assuming we go forward with this, we'll need a PR there to adjust the colors in KUI and bootstrap (neither of which should be too difficult)

Some screens from there

image

image

image

image

Checklist

  • This was checked in mobile
  • This was checked in IE11
  • This was checked in dark mode
  • Any props added have proper autodocs
  • Documentation examples were added
  • A changelog entry exists and is marked appropriately
  • This was checked for breaking changes and labeled appropriately
  • Jest tests were updated or added to match the most common scenarios
  • This was checked against keyboard-only and screenreader scenarios
  • This required updates to Framer X components

@snide snide requested a review from cchaos March 7, 2019 05:37
@snide
Copy link
Contributor Author

snide commented Mar 7, 2019

Added some screens from Kibana that I linked locally.

@cchaos cchaos self-assigned this Mar 7, 2019
Copy link
Contributor

@cchaos cchaos left a comment

Choose a reason for hiding this comment

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

Code lgtm, had one stupid question. But this looks sooooo goood.

src-docs/src/views/guidelines/sass.js Outdated Show resolved Hide resolved
@snide
Copy link
Contributor Author

snide commented Mar 7, 2019

@snide If these are the same colors as the light theme, it might be nice to keep the ! default so their still overridable by custom themes?

We chatted this out. !default isn't needed because the dark mode is itself a theme.

@snide
Copy link
Contributor Author

snide commented Mar 7, 2019

jenkins, test this

@snide snide merged commit a490f2e into elastic:master Mar 7, 2019
@snide snide deleted the colors/dark branch March 7, 2019 20:00
Shigawire pushed a commit to Shigawire/eui that referenced this pull request May 10, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Color palette doc is wrong for dark themes
2 participants