State layer: Spike on feasibility

[randybascue]

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]

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.

[randybascue]

@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]

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]

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

[randybascue]

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