fix(paginator): low contrast + selected state#3289
Conversation
🕸 Website previewYou can view a preview here (commit |
🕸 Storybook previewYou can view a preview here (commit |
There was a problem hiding this comment.
Pull request overview
Updates paginator page buttons to use a lower-contrast idle/hover/active background treatment and a clearer “current page” selected style, enabled by new theming hooks on sl-button.
Changes:
- Added
--sl-button-*CSS custom properties tosl-buttonto allow external control of background mix and text color. - Updated paginator page buttons (
.page) to use the new button-level theming variables for neutral interactive states. - Updated paginator current page styling (
.current) to use bold background and on-bold foreground tokens.
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
| packages/components/paginator/src/paginator.scss | Applies new sl-button theming variables for page and current-page states. |
| packages/components/button/src/button.scss | Introduces --sl-button-bg-color, --sl-button-bg-mix-color, --sl-button-bg-opacity, and --sl-button-color overrides in button styling. |
🦋 Changeset detectedLatest commit: 273128f The changes in this PR will be included in the next version bump. This PR includes changesets to release 2 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
There was a problem hiding this comment.
In the selected state, the outline for the subtle underline is currently missing. This should be aligned with whats currently in Figma: https://www.figma.com/design/Mie2JWmaqCeQqiRBaQYLEF/Untitled?node-id=0-1&p=f&t=qQtFwYciSLhpZ0aH-0
Summary
This change fixes the paginator selected-page interaction styling for emphasis="bold".
BEFORE
before.mov
AFTER
before.mov