Fix the Buttons styles for links

[ryanjwilke]

This was discovered in this thread on Slack.

[elevatebart]

What code could have triggered this?

@pstakoun can you please provide a link to a repro. The blue foreground is part of the button styles. The purple background is absolutely not. We could imagine, if it becomes a design system standard, a purple version of the button.

If it is not meant to become the standard focus behavior, I suggest we use a link <a href="url">Submit Feedback</a>.

[pstakoun]

@elevatebart this is a design system component used out of the box:

    <Button
      data-cy="feedback-button"
      href={`${url}?${qs}`}
      target="_blank"
      variant="purple-dark"
      className={styles.feedbackButton}
    >
      Submit feedback
    </Button>

.feedbackButton {
  display: inline-flex;
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  padding: 6px 12px;

  &:hover,
  &:focus {
    color: $gray-A1;
    text-decoration: none;
  }
}

[elevatebart]

I understand.

Since I did not see the purple color in the code given I imagine it is given in an upper class.

Would you mind pointing me to a url or a branch that could show this code?

[pstakoun]

The purple comes from variant="purple-dark". The hover & focus changes are to remove the blue and underline. The size changes are to align with designs. This is related to this PR: https://github.com/cypress-io/cypress-services/pull/6072

[elevatebart]

Oh I get my mistake... The title of the ticket pointed me to the "link" variant while this was an issue with the "purple" one.

I will have a look. Most probably, the answer is one of:

• A fix in cloud.
• Stop using utility first CSS (tailwind)

[elevatebart]

The solution would be to use the tailwind important configuration to give tailwind css utilities a little bit more weight, in this case, more than core pseudo classes.

Check out this PR

It adds the following code to the tailwind.config.mjs. This will add body <utilty> in front of every tailwindcss utility making it take over.

// tailwind.config.mjs
{
  // ...
  important: 'body'
}

[ryanjwilke]

@elevatebart Is this the equivalent of doing something like !important essentially? Not quite sure how you're getting it to treat the utility classes as higher priority.

[elevatebart]

I did not want to force utilities over everything. So !important could bot be everywhere. Instead I added body in front of each utility. This way, without changing the behavior, each utility class now has one more level of specificity. .bg-red-300 will now be body .bg-red-300.

This fixes the bug.