Skip to content

fix(paginator): low contrast + selected state#3289

Open
michal-sanoma wants to merge 9 commits into
mainfrom
fix/2708_paginator_low_contrast
Open

fix(paginator): low contrast + selected state#3289
michal-sanoma wants to merge 9 commits into
mainfrom
fix/2708_paginator_low_contrast

Conversation

@michal-sanoma
Copy link
Copy Markdown
Collaborator

@michal-sanoma michal-sanoma commented May 8, 2026

Summary

This change fixes the paginator selected-page interaction styling for emphasis="bold".

BEFORE

before.mov

AFTER

before.mov

Copilot AI review requested due to automatic review settings May 8, 2026 18:15
@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented May 8, 2026

🕸 Website preview

You can view a preview here (commit 273128f120f12ce92d90357b3b95c18b0e24b648).

@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented May 8, 2026

🕸 Storybook preview

You can view a preview here (commit 273128f120f12ce92d90357b3b95c18b0e24b648).

Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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 to sl-button to 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.

Comment thread packages/components/paginator/src/paginator.scss Outdated
Comment thread packages/components/paginator/src/paginator.scss Outdated
@changeset-bot
Copy link
Copy Markdown

changeset-bot Bot commented May 19, 2026

🦋 Changeset detected

Latest commit: 273128f

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 2 packages
Name Type
@sl-design-system/paginator Patch
@sl-design-system/button Patch

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

Copilot AI review requested due to automatic review settings May 21, 2026 11:17
Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.

Comment thread packages/components/paginator/src/paginator.scss Outdated
Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Copilot reviewed 2 out of 2 changed files in this pull request and generated 2 comments.

Comment thread packages/components/paginator/src/paginator.scss Outdated
Comment thread packages/components/button/src/button.scss
Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Copilot reviewed 3 out of 3 changed files in this pull request and generated no new comments.

@michal-sanoma michal-sanoma changed the title chore(paginator): low contrast + selected state fix(paginator): low contrast + selected state May 21, 2026
@michal-sanoma michal-sanoma linked an issue May 21, 2026 that may be closed by this pull request
2 tasks
@michal-sanoma michal-sanoma marked this pull request as ready for review May 22, 2026 06:23
Copy link
Copy Markdown
Contributor

@a11ymiko a11ymiko left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Image

Copilot AI review requested due to automatic review settings May 22, 2026 13:34
Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Copilot reviewed 3 out of 3 changed files in this pull request and generated 1 comment.

Comment thread packages/components/paginator/src/paginator.scss Outdated
Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Copilot reviewed 3 out of 3 changed files in this pull request and generated 2 comments.

Comment thread packages/components/button/src/button.scss
Comment thread packages/components/button/src/button.scss
Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Copilot reviewed 3 out of 3 changed files in this pull request and generated no new comments.

@michal-sanoma michal-sanoma added the bug Something isn't working label May 22, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

bug Something isn't working

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Paginator] Low Contrast Ratio for "Current Page" Indicator

3 participants