Fix default link button styles

Fixed default link button styles issue.

Needs reroll because of commit #3088805: Simplify Claro's CSS directory structure.
Also it is requested to fix the styling of only the link button. The provided patch removes the styling for all links.

Rerolled the patch and fixed the styling of only the link button.

Tested the styling issue and it is working fine as intended.

The patch needs a reroll against Drupal Core

I am working on adding a patch reroll @lauriii

Updated the patch for Drupal Core.

We need to also add these changes to the source file button.pcss.css.

Updated the code to source file button.pcss.css. Thanks @lauriii

+++ b/core/themes/claro/css/components/button.pcss.css
@@ -168,3 +168,13 @@
+a.button:hover {
+  color: var(--button-fg-color-active);
+}
+a.button:focus {
+  color: var(--button-fg-color-focus);
+}
+a.button:active {
+  color: var(--button-fg-color-active);
+}

Sorry but I just realized that all different button states use the same color. 🤦I would convert this into a single rule set that is using var(--button-fg-color); to set the color.

We will also have to take into account different variations such as .button--danger and .button--primary.

Added the css code for button links and it will prevent affecting button--primary , button--danger classes as new css code's placement is before css added for button--primary and button--danger.

Updated the styling to include a.button--primary and a.button--danger styling which will be of higher weight and tested it on pages like custom block library page where we have button--primary for add custom block.

Thank you! This looks very close to done!

1. +++ b/core/themes/claro/css/components/button.css
   @@ -162,15 +162,30 @@
   +a.button--primary:hover,
   +a.button--primary:active {
   +  color: #fff;
   +}
   

   Nit: let's move this after other rules related to this.

2. +++ b/core/themes/claro/css/components/button.css
   @@ -162,15 +162,30 @@
   +a.button--danger:hover,
   +a.button--danger:active {
   +  color: #fff;
   +}
   

   Let's group this together with the other .button--danger rules.

3. +++ b/core/themes/claro/css/components/button.css
   @@ -162,15 +162,30 @@
   -  color: #fff;
   

   Wouldn't the .button:hover styles override the default styles for .button--primary if we removed this?

Updated the styling as per the suggestions.

+++ b/core/themes/claro/css/components/button.css
@@ -162,6 +162,12 @@
+a.button:focus,

We should remove the focus state from here given that the a element doesn't set color for this state. This causes some issues with the other variations.

removed the :focus as per the suggestion.

Awesome! Tested default, primary and danger variations of a.button in all states (hover, active and focus) and all worked as expected. Thank you @hash6 for the persistence on this issue! 🙏 I'm unassigning this issue since I believe this is ready for a committer review.

Thanks @lauriii for continuous support and guidance on every stage. Highly appreciated !!!

Committed and pushed 4b74e91fe3 to 9.0.x and 492fd1e3d0 to 8.9.x and 5a5d78365c to 8.8.x. Thanks!

Backported to 8.8.x since Claro is experimental.

diff --git a/core/themes/claro/css/components/button.pcss.css b/core/themes/claro/css/components/button.pcss.css
index 79db404e06..f1f95222bd 100644
--- a/core/themes/claro/css/components/button.pcss.css
+++ b/core/themes/claro/css/components/button.pcss.css
@@ -110,8 +110,6 @@ a.button:active {
 }
 
 /* Primary button styles */
-
-
 .button--primary {
   color: var(--button-fg-color--primary);
   background-color: var(--button-bg-color--primary);

Removed unnecessary new lines on commit.