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

State layer: Spike on feasibility #2546

Open
3 tasks done
randybascue opened this issue Jan 30, 2025 · 5 comments
Open
3 tasks done

State layer: Spike on feasibility #2546

randybascue opened this issue Jan 30, 2025 · 5 comments
Assignees

Comments

@randybascue
Copy link

Description

State layer isn't being used throughout Skin but is applied and documented in the DS. This is leading to additional opaque tokens for state that aren't available in the core DS token repo.

Playbook page

Screenshots

No response

Figma link

No response

Engineering pre-requisites

  • Supports dark mode.
  • Supports responsive design.
  • Tokens have been provided (or already exist).
@agliga agliga added this to eBayUI Jan 31, 2025
@agliga agliga added this to the 19.1.0 milestone Jan 31, 2025
@agliga agliga self-assigned this Jan 31, 2025
@agliga agliga added design system Requested by the design system size: 1 labels Jan 31, 2025
@agliga agliga moved this to Todo in eBayUI Jan 31, 2025
@agliga agliga moved this from Todo to In Progress in eBayUI Feb 12, 2025
@agliga
Copy link
Contributor

agliga commented Feb 14, 2025

From my discussion with Randy, design will give us HSL type tokens to adjust only the lighness of a color in order to get a state layer.

@agliga agliga removed this from the 19.1.0 milestone Feb 14, 2025
@randybascue
Copy link
Author

randybascue commented Mar 6, 2025

@agliga Alrighty, so it looks like there's a slight difference between the neutrals and the saturated colors.

Hovered state for neutrals are consistently -4 luminance
Hovered state for saturated colors are half of neutrals' value, so -2 luminance

Pressed state for neutrals: -8 luminance
Pressed state for colors: -4 luminance

So we can move forward with a token for each per state or try a single value, which we'll need to update on our end.

@agliga
Copy link
Contributor

agliga commented Mar 6, 2025

For pressed vs hover theres no problem. But if we want to have one for neutrals and one for colors then its a bit trickier since it might be harder to track.

@randybascue
Copy link
Author

I'm leaning towards simple with -4 hovered and -8 pressed across all

@randybascue
Copy link
Author

Working on the token and values for light and dark mode now

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
Status: In Progress
Development

No branches or pull requests

2 participants