Skip to content

feat(skeleton): use new skeleton gradient color tokens#8084

Open
tarunvashishth wants to merge 1 commit intopatternfly:mainfrom
tarunvashishth:feat/skeleton-gradient-tokens
Open

feat(skeleton): use new skeleton gradient color tokens#8084
tarunvashishth wants to merge 1 commit intopatternfly:mainfrom
tarunvashishth:feat/skeleton-gradient-tokens

Conversation

@tarunvashishth
Copy link
Contributor

@tarunvashishth tarunvashishth commented Feb 2, 2026 •
edited by coderabbitai bot
Loading

Fixes #7514

Updates the Skeleton component to use the new skeleton gradient color design tokens.

Summary by CodeRabbit

  • Style
    • Updated skeleton loader gradient colors for improved visual consistency during content loading states across all motion preferences.

✏️ Tip: You can customize this high-level summary in your review settings.

@coderabbitai
Copy link

coderabbitai bot commented Feb 2, 2026 •
edited
Loading

Walkthrough

The skeleton component's gradient styling is updated to use newly introduced loading skeleton color tokens instead of secondary palette colors. The color stop variables are modified in both the normal and reduced-motion media query contexts.

Changes

Cohort / File(s) Summary
Skeleton Gradient Color Tokens
src/patternfly/components/Skeleton/skeleton.scss		 Updated three LinearGradientColorStop variables (--#{$skeleton}--after--LinearGradientColorStop1, --#{$skeleton}--after--LinearGradientColorStop2, --#{$skeleton}--after--LinearGradientColorStop3) to reference loading skeleton color tokens instead of secondary palette tokens in both the base block and prefers-reduced-motion media query.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

🚥 Pre-merge checks | ✅ 4
✅ Passed checks (4 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title follows conventional commit format (feat scope: description) and accurately describes the main change of updating skeleton gradient to use new color tokens.
Linked Issues check ✅ Passed The PR successfully replaces secondary palette gradient colors with new skeleton color tokens in both normal and reduced-motion scenarios, meeting issue #7514 requirements.
Out of Scope Changes check ✅ Passed All changes are within scope, modifying only the skeleton gradient color variables as specified in the linked issue with no extraneous modifications.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@tarunvashishth tarunvashishth mentioned this pull request Feb 2, 2026
Open
@patternfly-build
Copy link
Collaborator

patternfly-build commented Feb 2, 2026 •
edited
Loading

Preview: https://pf-pr-8084.surge.sh

A11y report: https://pf-pr-8084-a11y.surge.sh

@mcoker
Copy link
Contributor

mcoker commented Feb 4, 2026

@tarunvashishth thanks for the PR! Looking at the PR preview (https://pf-pr-8084.surge.sh/components/skeleton), seems like the gradient isn't working properly somewhere, can you look into that and push a fix?

For reference, the gradient should look similar to how it looks now. Here's what it looks like currently - https://www.patternfly.org/components/skeleton/html

@tarunvashishth
Copy link
Contributor Author

tarunvashishth commented Feb 5, 2026

Sure, I will look into it.

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

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Skeleton -- update gradient to use new skeleton color tokens

3 participants

@tarunvashishth @patternfly-build @mcoker