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.

Sign up for GitHub

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

Jump to bottom

[Visual Refresh] Update color token mappings #8211

Merged
merged 22 commits into from
Dec 12, 2024
Merged

[Visual Refresh] Update color token mappings #8211

merged 22 commits into from
Dec 12, 2024

Conversation

mgadewoll
Copy link
Contributor

@mgadewoll mgadewoll commented Dec 9, 2024 •
edited by weronikaolejniczak
Loading

Summary

closes https://github.com/elastic/eui-private/issues/147

Note

This PR merges into a feature branch.

This PR updates color token mappings according to design changes (figma).

Changes

color token changes

  • updates primitive color values
  • removes primitive transparent color scales and adds specific semantic transparent color tokens
  • updates text/textParagraph and title/textHeading color mappings
  • adds backgroundBaseHighlighted color token
    • adds support for general usage as background
    • updates mappings to use highlighted background for EuiTourFooter, EuiCodeBlock, EuiCommentEvent and EuiFlyoutFooter
  • updates backgroundBaseInteractiveSelect mapping
    • update EuiDataGrid examples to show proper selected style usage
  • updates EuiBeacon with variant success to use color accentSecondary
  • updates EuiBetaBadge
    • color mapping of variant accent to use accent instead of accentText for Borealis
  • fixes default EuiBadge background mapping

additional

  • fixes Sass and legacy JSON tokens not updating on color mode change in current EUI docs

QA

  • check updated color values with Figma definitions

  • component specific QA:

    • EuiTourFooter (there is a misalignment in arrow and beacon positioning currently, this is being fixed in this PR)
      • verify background uses backgroundBaseHighlighted background (shade10/shade135)
    • EuiCodeBlock
      • verify background uses backgroundBaseHighlighted background
    • EuiCommentEvent
      • verify highlighted variant uses uses backgroundBaseHighlighted background ( Amsterdam uses subdued mapping)
    • EuiFlyoutFooter
      • verify the footer background uses backgroundBaseHighlighted
    • EuiDataGrid
      • verify the docs examples show the backgroundBaseInteractiveSelect backgrounds (primary10/primary130)
    • EuiBeacon
      • verify that variant success uses accentSecondary color
    • EuiBadge
      • verify variant default has a shade20/shade130 background
    • EuiBetaBadge
      • verify the variant accent uses accent90 instead of accent100 for Borealis

  • verify EUI docs Sass variables update as expected when changing color mode (docs)

General checklist

  • Browser QA
    • Checked in both light and dark modes
    • Checked in mobile
    • Checked in Chrome, Safari, Edge, and Firefox
    • Checked for accessibility including keyboard-only and screenreader modes
  • Docs site QA
  • Code quality checklist
  • Release checklist
    • A changelog entry exists and is marked appropriately.
    • [ ]~ If applicable, added the breaking change issue label (and filled out the breaking change checklist)~
  • Designer checklist
    • If applicable, file an issue to update EUI's Figma library with any corresponding UI changes. (This is an internal repo, if you are external to Elastic, ask a maintainer to submit this request)

@mgadewoll
refactor: remove base semantic colors from theme colors
1798eed 
- this was a mistake as those colors are borealis specific and don't exist in amsterdam
@mgadewoll
refactor: update primitive color values
307afaa
@mgadewoll
refactor: update legacy JSON token values
50ef806
@mgadewoll
refactor: remove transparent scales, add specific transparent semanti…
eb67a85 
…c tokens instead
@mgadewoll
fix: update subdued badge background mapping
0876442
@mgadewoll
refactor: fix docs sass and JSON token loading; remove unexpected dep…
45c76bc 
…rectation label

- the CSS hook is useful to prevent having to define variant styles per component
@mgadewoll
refactor: update text and title color token values
74d9510
@mgadewoll
refactor: update beacon successcolor mapping
49a9d5c
@mgadewoll
refactor: update beta_badge mappings
ad469fd
@mgadewoll
chore: update deprecation description
813e38b
@mgadewoll
refactor: update select background color token mapping
762cbf7
@mgadewoll
refactor: update datagrid border and select color mappings
27c8f2b 
- ensures docs example work as expected for both themes
@mgadewoll
feat: add backgroundBaseHighlighted color token
aec9180
@mgadewoll
feat: support generic highlighted background usage
e33d51f
@mgadewoll
refactor: update flyout footer to use highlighted background
bb9248a
@mgadewoll mgadewoll mentioned this pull request Dec 9, 2024
Merged
4 tasks
@mgadewoll mgadewoll marked this pull request as ready for review December 9, 2024 12:47
@mgadewoll mgadewoll requested a review from a team as a code owner December 9, 2024 12:47
This was referenced Dec 9, 2024
Closed
Closed
weronikaolejniczak
weronikaolejniczak reviewed Dec 9, 2024
View reviewed changes
packages/eui-theme-borealis/src/eui_theme_borealis_dark.json
"euiColorVis7_behindText": "#FFC0B8",
"euiColorVis8_behindText": "#E6AB01",
"euiColorVis9_behindText": "#FCD279",
"euiColorVis0": "#16C5C0",
Copy link
Contributor

Choose a reason for hiding this comment

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

Are these colors for the data visualization? If so, where can I see the mapping to test against?

Copy link
Contributor Author

@mgadewoll mgadewoll Dec 9, 2024 •
edited
Loading

Choose a reason for hiding this comment

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

These JSON files are legacy files that used to be generated from the Sass files but now only exist until Kibana migrated to use our theme tokens via EuiProvider instead.

The theme vis color tokens are defined here.

Copy link
Contributor

Choose a reason for hiding this comment

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

Thanks, Lene! 💚 What I wanted to know is what is the purpose of euiColorVis* tokens. I checked in Kibana and it does seem they are predominantly used in data visualization (charts).

And is there a design definition of the mapping anywhere, so that I can verify that e.g. euiColorVis0 -> #16C5C0 is the correct mapping?

Copy link
Contributor Author

@mgadewoll mgadewoll Dec 11, 2024 •
edited
Loading

Choose a reason for hiding this comment

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

Sorry, yes. vis colors are visualization colors.

And is there a design definition of the mapping anywhere, so that I can verify that e.g. euiColorVis0 -> #16C5C0 is the correct mapping?

Yes and no. There is this Figma file but when implementing the tokens I was told by @gvnmagni that it's not up to date and he provided the expected mappings 🫠

The same is mirrored in the Figma variables in this file, I'm not sure if those are the latest state though? @gvnmagni

Screenshot 2024-12-11 at 11 26 15

ℹ️ There is also still ongoing work on parts of the vis color palettes for severity (issue)

Copy link
Contributor

Choose a reason for hiding this comment

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

@mgadewoll my eyes burn after so much HEX BUT they all look okay 👌🏻 Feel free to resolve or wait for @gvnmagni confirmation 😄

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I think we can proceed also without @gvnmagni - in case there is a need to update something, we can do that separately any time 🙂

weronikaolejniczak
weronikaolejniczak reviewed Dec 10, 2024
View reviewed changes
Copy link
Contributor

@weronikaolejniczak weronikaolejniczak left a comment •
edited
Loading

Choose a reason for hiding this comment

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

I'm really sorry @mgadewoll for checking this PR so slowly 🙏🏻 I've been going over the changes since yesterday, little by little. And thank you for granular commits with meaningful messages, it really helped to review more efficiently! For the future, we might want to break down the task into smaller chunks after all.

Amazing work on the changes 🎉

Testing notes:
❌ we have to update the color mapping in a couple of places (see comments for details)
✅ all components are correct: EuiTourFooter, EuiCodeBlock, EuiCommentEvent, EuiFlyoutFooter, EuiDataGrid, EuiBeacon, EuiBadge, EuiBetaBadge
✅ Sass Colors page updates correctly when changing the color mode (light / dark) (compared to other staging env)

@mgadewoll
refactor: update plainLightAlpha6 to plainLightAlpha8
c8f257e
@mgadewoll
refactor: update white/black usages to full hex codes
0a7507b
@mgadewoll
refactor: inherit base colors for alpha colors
99520c4 
- utilizes chroma for conversion of  hex to rgb; as this runs only once on initial theme
built, the impact of the calculation should be no problem
@mgadewoll
chore: cleanup
0521dcb
@kibanamachine
Copy link

Preview staging links for this PR:

@elasticmachine
Copy link
Collaborator

💚 Build Succeeded

History

@weronikaolejniczak weronikaolejniczak mentioned this pull request Dec 11, 2024
Closed
@mgadewoll mgadewoll merged commit d751213 into elastic:eui-theme/borealis Dec 12, 2024
4 checks passed
tkajtoch pushed a commit that referenced this pull request Dec 16, 2024
@mgadewoll @tkajtoch
[Visual Refresh] Update color token mappings (#8211)
9909a04
@mgadewoll mgadewoll mentioned this pull request Dec 16, 2024
Merged
tkajtoch pushed a commit that referenced this pull request Dec 17, 2024
@mgadewoll @tkajtoch
[Visual Refresh] Update color token mappings (#8211)
0cbe955
This was referenced Dec 18, 2024
Open
Merged
mgadewoll added a commit to elastic/kibana that referenced this pull request Dec 19, 2024
@mgadewoll @kibanamachine
Upgrade EUI to v98.2.1 (#204482)
a0ebb1d 
`v98.1.0-borealis.0`⏩`v98.2.1-borealis.2`

_[Questions? Please see our Kibana upgrade
FAQ.](https://github.com/elastic/eui/blob/main/wiki/eui-team-processes/upgrading-kibana.md#faq-for-kibana-teams)_

---

# `@elastic/eui`

## [`v98.2.1`](https://github.com/elastic/eui/releases/v98.2.1)

- Updated the EUI theme color values to use a full 6 char hex code
format ([#8244](elastic/eui#8244))

## [`v98.2.0`](https://github.com/elastic/eui/releases/v98.2.0)

- Added two new icons: `contrast` and `contrastHigh`
([#8216](elastic/eui#8216))
- Updated `EuiDataGrid` content to have a transparent background.
([#8220](elastic/eui#8220))

**Accessibility**

- When the tooltips components (`EuiTooltip`, `EuiIconTip`) are used
inside components that handle the Escape key (like `EuiFlyout` or
`EuiModal`), pressing the Escape key will now only close the tooltip and
not the entire wrapping component.
([#8140](elastic/eui#8140))
- Improved the accessibility of `EuiCodeBlock`s by
([#8195](elastic/eui#8195))
  - adding screen reader only labels
  - adding `role="dialog"` on in fullscreen mode
  - ensuring focus is returned on closing fullscreen mode
  
# Borealis updates
  
- [Visual Refresh] Update color token mappings
([#8211](elastic/eui#8211))
- [Visual Refresh] Introduce shared popover arrow styles to Borealis
([#8212](elastic/eui#8212))
- [Visual Refresh] Add forms.maxWidth token
([#8221](elastic/eui#8221))
- [Visual Refresh] Set darker shade for subdued text
([#8224](elastic/eui#8224))
- [Visual Refresh] Remove support for accentSecondary badges
([#8224](elastic/eui#8227))
- [Visual Refresh] Add severity vis colors
([#8247](elastic/eui#8247))
- [Visual Refresh] Fix transparent color variable definitions
([8249](elastic/eui#8249))
- [Visual Refresh] Update EuiToken colors
([8250](elastic/eui#8250))

---------

Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@ek-so ek-so ek-so left review comments

@weronikaolejniczak weronikaolejniczak weronikaolejniczak approved these changes

Assignees
No one assigned
Labels
skip-changelog visual refresh
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
5 participants
@mgadewoll @kibanamachine @elasticmachine @weronikaolejniczak @ek-so