240327 - Skeleton fill/shimmer token updates

[ratinsl]

Description

Problem

The skeleton loader becomes difficult to see on surfaces using background.secondary. Additionally, the skeleton loader on background.primary can also use more contrast.

Solution

Create a set of on-secondary colors for the skeleton pattern to remain visible on surfaces using background.secondary. This is meant to replace any "elevated" tokens that were previously used for skeletons.

Update on-primary colors for the skeleton pattern to be better visible on surfaces using background.primary.

Success criteria

A color.loading.fill.onSecondary and a color.loading.shimmer.onSecondary token are added to the library and made available for the skeleton loader to consume. Additionally color.loading.fill and color.loading.shimmer are updated to match new color specs.

Resources

Figma loading token table update

Updated Figma skeleton documentation

Screenshots

Figma link

No response

Engineering pre-requisites

• Successful design review with Design System Team.
• Supports dark mode.
• Supports responsive design.
• Tokens have been provided (or already exist).
• Successful accessibility review with Core A11Y Team.
• Successful frontend review with eBayUI Team.