Skip to content

fix(Icon Button): Draw the contrast hover background from the text colour - #3004

Merged
RubenSibon merged 1 commit into
developfrom
fix/icon-button-contrast-hover-color
Oct 9, 2026
Merged

RubenSibon merged 1 commit into
developfrom
fix/icon-button-contrast-hover-color

Conversation

@VincentSmedinga

@VincentSmedinga VincentSmedinga commented Oct 2, 2026 •

Copy link
Copy Markdown
Contributor

Describe the pull request

Links

What

Change the background of a hovered contrast Icon Button from rgb(0 0 0 / 12.5%) to rgb(32 32 32 / 12.5%).

Why

The 12.5% transparency must be drawn from the text colour, #202020, not from pure black.

How

A token cannot apply an alpha to another token, so the value is a literal, like the hover background of the default Icon Button.
This was the only pure black in the default theme's tokens.
We probably did not find it earlier because it is written as rgb() with an alpha, while every other colour is a hex value.

Checklist

Before submitting your pull request, please ensure you have done the following. Check each checkmark if you have done so or if it wasn't necessary:

  • Add or update unit tests
  • Add or update documentation
  • Add or update stories
  • Add or update exports in index.* files
  • Comment /chromatic test and verify visual regression tests pass
  • Start the PR title with a Conventional Commit prefix, as explained here.

Copilot AI balanced review requested due to automatic review settings October 2, 2026 14:25
@VincentSmedinga
VincentSmedinga requested a review from a team as a code owner October 2, 2026 14:25
@github-actions
github-actions Bot temporarily deployed to demo-icon-button-contrast-hover-color October 2, 2026 14:25 Destroyed

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Copilot was unable to review this pull request because the user who requested the review has reached their quota limit.

@github-actions

github-actions Bot commented Oct 2, 2026

Copy link
Copy Markdown
Contributor

Coverage Report for React components

Status Category Percentage Covered / Total
🟢 Lines 100% 1181 / 1181
🟢 Statements 100% 1254 / 1254
🟢 Functions 100% 315 / 315
🟢 Branches 100% 917 / 917
File CoverageNo changed files found.
Generated in workflow #681 for commit 1a5f8e3 by the Vitest Coverage Report Action

@github-actions

github-actions Bot commented Oct 2, 2026

Copy link
Copy Markdown
Contributor

Size Change: +2 B (0%)

Total Size: 428 kB

📦 View Changed
Filename Size Change
packages-proprietary/tokens/dist/index.css 11.6 kB +2 B (+0.02%)
ℹ️ View Unchanged
Filename Size
packages-proprietary/react-icons/dist/index.esm.js 55.5 kB
packages-proprietary/temp/assets-fonts.tar.gz 168 kB
packages-proprietary/temp/assets-others.tar.gz 120 kB
packages-proprietary/tokens/dist/compact.css 600 B
packages-proprietary/tokens/dist/lo-fi.css 1.56 kB
packages/css/dist/index.css 18.1 kB
packages/react/dist/index.esm.js 50.9 kB
packages/react/dist/index.js 499 B

compressed-size-action

@RubenSibon
RubenSibon merged commit 9cccaca into develop Oct 9, 2026
12 checks passed
@RubenSibon
RubenSibon deleted the fix/icon-button-contrast-hover-color branch October 9, 2026 14:01

This branch was successfully deployed

No deployments
demo-icon-button-contrast-hover-color — 1a5f8e38 Deployed Oct 2, 2026 by github-actions[bot]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Development

Successfully merging this pull request may close these issues.

3 participants