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

Created a euiPaletteColorBlindBehindText variant of the color blind palette #2750

Merged
merged 17 commits into from
Jan 10, 2020

Conversation

cchaos
Copy link
Contributor

@cchaos cchaos commented Jan 9, 2020

This PR adds another palette called euiPaletteColorBlindBehindText() for use in places like EuiBadge

As mentioned in #2455, we can increase the brightness of the color blind palette when using it with text. This creates an automatic palette for this use case.

Screen Shot 2020-01-09 at 16 57 29 PM

It also updates the SASS by creating a new SASS map with both graphic and behindText variants.

In the color guidelines page, the example has been updated to import the palette from JS and allowing the user to toggle between variants.

Screen Recording 2020-01-09 at 04 58 PM

This palette is now being used directly by EuiBadge, EuiAvatar, EuiLoadingChart, and EuiComboBox's examples.

Checklist

  • Check against all themes for compatibility in both light and dark modes
  • [ ] Checked in mobile
  • Checked in IE11 and Firefox
  • [ ] Props have proper autodocs
  • Added documentation examples
  • Added or updated jest tests
  • [ ] Checked for breaking changes and labeled appropriately
  • Checked for accessibility including keyboard-only and screenreader modes
  • A changelog entry exists and is marked appropriately

cchaos added 12 commits January 8, 2020 17:16
1. Created SASS map for viz palette
2. Removed duplicated colors from other themes and use dist folder json instead
3. Created a SASS function to convert vis palette for use behind text
- $euiColorVisColors -> $euiPaletteColorBlind
- SASS map now is a nested map containing direct hexes for both graphic and behindText variants
- Created new vars for each behindText variant
- Got rid of temp color function
Copy link
Contributor

@thompsongl thompsongl left a comment

Choose a reason for hiding this comment

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

Code changes LGTM 👍

@ryankeairns
Copy link
Contributor

Looking now! Started yesterday evening and forgot to get back on it!

Copy link
Contributor

@ryankeairns ryankeairns left a comment

Choose a reason for hiding this comment

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

LGTM, just a single comment.
I like the theme cleanup and the moving of commonly used bits to /services!

@cchaos cchaos merged commit 7068260 into elastic:master Jan 10, 2020
@cchaos cchaos deleted the viz_palette_take_211 branch January 10, 2020 21:34
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants