Skip to content

[Visual Refresh] Shadow tokens #8842

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
Closed
acstll wants to merge 15 commits into from
Closed

[Visual Refresh] Shadow tokens #8842

acstll wants to merge 15 commits into from

Conversation

@acstll
Copy link
Contributor

@acstll acstll commented Jul 6, 2025 •
edited
Loading

Summary

Implements https://github.com/elastic/eui-private/issues/195

Important

This PR targets a feature branch!

Changes

  • Added new shadow tokens f48fbfc
  • Defined shadow tokens for Amsterdam, based on values from original mixins bbea477
    • in Amsterdam nothing should have changed
    • added a flat token to keep euiShadowFlat unchanged
    • in Borealis, flat falls back to xs
  • Updated mixins to use the new tokens
  • Added a docs page to Theming / Tokens / Shadows
  • Added tokens as JSON, Borealis-only
  • Added tokens as SCSS and update mixins
  • Deprecated because undocumented and/or no longer needed
    • euiSlightShadowHover
    • euiShadowFlat
    • EuiShadowOptions.color
    • EuiShadowCustomColor
  • Added unit test to ensure overrides in theme.modify work as expected
  • Updated VRT

Why are we making this change?

Screenshots

Impact to users

QA

Remove or strikethrough items that do not apply to your PR.

General checklist

  • Browser QA
    • Checked in both light and dark modes
    • Checked in both MacOS and Windows high contrast 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)

@acstll acstll self-assigned this Jul 6, 2025
@acstll acstll added the skip-changelog Use on PRs to skip changelog requirement (Don't delete - used for automation) label Jul 6, 2025
@acstll acstll force-pushed the borealis-shadow-tokens branch from 5df7d06 to fe0380c Compare July 17, 2025 10:20
@acstll
Copy link
Contributor Author

acstll commented Jul 17, 2025

I completely messed up this one (by rebasing onto main)… :this-is-fine: — I will start fresh and close this

@acstll acstll force-pushed the eui-theme/borealis-v2-poc branch from 78264e6 to 01bb199 Compare July 17, 2025 13:27
mgadewoll and others added 15 commits July 17, 2025 15:33
@mgadewoll @acstll
[Visual Refresh] Inputs: Add refresh design update elastic#1 (elastic…
ecc1c79 
…#8767)
@mgadewoll @acstll
[Visual Refresh] Inputs: Add refresh design update elastic#2 (elastic…
455cde7 
…#8778)
@mgadewoll @acstll
[Visual Refresh][EuiSelectableTemplateSitewide] Add theme prop (ela…
dbc2ddc 
…stic#8806)
@mgadewoll @acstll
fix: ensure form control layout has relative scope
b209ea3 
- this ensures that compositions with other elements behave in an expected layer order and prevents the form element from overlapping due to z-index: 1
@mgadewoll @acstll
test(vrt): udpate reference images
60153d3 
- minute changes on the edges of the images, it's not really clear what triggered it
@acstll
Add types for shadow tokens
0b207d1
@acstll
Add shadow tokens definitions
29846cb 
based on spec https://www.figma.com/design/FHys7gLzyvD1gc9DrJM6D8/Elastic-UI--Borealis-?node-id=8222-4311&t=0YSfDbFLOkB0xZmj-0

Amsterdam values will be added later
@acstll
Draft shadow tokens docs
b716dc3
@acstll
Add shadow tokens for Amsterdam
88d39ed
@acstll
Add "flat" shadow token fallback for Borealis
27fb12a
@acstll
Fix typo in comment
7422d90 
in helper function that will probably get removed, but well
@acstll
Lint
a1afc1e
@acstll
Refactor shadow mixins to use new shadow tokens
127f9df
@acstll
Update docs (new demo)
20baf60
@acstll
Add shadow tokens in JSON (Borealis)
2a5c170
@acstll acstll force-pushed the borealis-shadow-tokens branch from fe0380c to 2a5c170 Compare July 17, 2025 13:34
@elasticmachine
Copy link
Collaborator

elasticmachine commented Jul 17, 2025

💔 Build Failed

Failed CI Steps

History

cc @acstll

@acstll
Copy link
Contributor Author

acstll commented Jul 17, 2025

Closing in favor of #8880 (sorry)

@acstll acstll closed this Jul 17, 2025
@acstll acstll deleted the borealis-shadow-tokens branch July 17, 2025 13:53
@elasticmachine
Copy link
Collaborator

elasticmachine commented Jul 17, 2025

💔 Build Failed

Failed CI Steps

History

cc @acstll

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

Reviewers

No reviews

Assignees

@acstll acstll

Labels

skip-changelog Use on PRs to skip changelog requirement (Don't delete - used for automation)

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

3 participants

@acstll @elasticmachine @mgadewoll