Problem/Motivation

Buttons on the site are not using the color set on theme settings for their active state. Also in focus-visible state box-shadow color is also not pulling the color from the theme settings but from default Belgrade color.

Steps to reproduce

Change the colors in the theme settings under Appearance tab.
Go to checkout and click on any of the buttons and button color will on click (when active state is invoked) change to the default button color from Belgrade.
Other option is to use inspect element on any button and just activate the active state. Same for testing the focus-visible use the inspect element to quickly reproduce the issue.

Issue fork belgrade-3559282

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

About issue forks

Comments

sumi created an issue. See original summary.

majmunbog made their first commit to this issue’s fork.

majmunbog’s picture

majmunbog commented
Status: Active » Needs review

Updated button styling so active and focus-visible states pull their colors (including a lighter focus ring) from the theme’s Appearance settings instead of Bootstrap defaults.

sergeydruua made their first commit to this issue’s fork.

sergeydruua’s picture

sergeydruua commented
Status: Needs review » Active

Resolved merge conflict & Tested. While I was busy crafting my own fix (and fighting with Git), @majmunbog dropped this color-mix() solution like a mic drop 🎤. I've reviewed the changes and they are indeed cleaner and more modern than what I had in mind. The use of color-mix for automatic shade generation is spot on. I've resolved the conflicts in favor of the remote version and verified that it works perfectly: Active buttons now use a darker shade of the primary color. Focus rings respect the primary color hue. Pushing the merge now. Great work! 🚀

sergeydruua’s picture

sergeydruua commented
Status: Active » Needs review
sumi’s picture

sumi commented
Status: Needs review » Reviewed & tested by the community

Tested and can confirm all is now working as expected.

majmunbog’s picture

majmunbog commented
Status: Reviewed & tested by the community » Fixed

Now that this issue is closed, review the contribution record.

As a contributor, attribute any organization that helped you, or if you volunteered your own time.

Maintainers, credit people who helped resolve this issue.

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.