chore(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. |
| --sl-button-bg-color: var(--sl-color-background-primary-bold); | ||
| --sl-button-bg-mix-color: var(--sl-color-background-primary-interactive-bold); | ||
| --sl-button-bg-opacity: var(--sl-opacity-interactive-plain-idle); | ||
| --sl-button-color: var(--sl-color-foreground-primary-onBold); | ||
|
|
| --sl-button-bg-color: var(--sl-color-background-primary-bold); | ||
| --sl-button-bg-mix-color: var(--sl-color-background-primary-interactive-bold); |
|
No description provided.