How do I remove the button gradient effect?

Development

AI-generated summary

The discussion revolves around removing the button gradient effect in Discourse. darkpixlz wants to make the click effect on buttons optional via a setting, as they find it visually unappealing. Falco suggests using a theme-component to overwrite the effect. Don provides a solution by overriding the linear-gradient mixin output with target active classes in SCSS. The provided code snippet demonstrates how to remove the gradient effect for different button types.

1

Hi!

Tonight I was looking into making a PR to make the click effect on buttons optional via a setting. I think personally it looks pretty bad, but there are probably people that really like it.
This is what I mean, you can see it by clicking and holding down on most any button
image
It looks even worse on some buttons;
image

I dont think the team is looking to remove it completely, so I was going to look into making a site setting, then accessing it via the button scss.

I dont think there’s an easy file to just make a setting and give it a property. Is there? If not, how do I do it and then get it in the SCSS file?

Thanks for any help!

2

Isn’t this something that can be overwritten via a theme-component?

3

I guess I forgot about components for this issue in specific lol

But for the future is it possible to create settings? I will fix the issue on my end in a bit

EDIT: Just tried fixing it on my end and it didn’t work.

4

Hello,

If I understand it correctly this is the button’s :active status what you want to change.

There is a linear-grandient mixin to color transition.

linear-gradient used when the button is active. As you can see in the buttons.css

This whole is the default button mixin.

And only the colors variables changes on the other button like .btn-primary and below:

So you can override the linear-gradient mixin output with target the active classes.

Something like this should work. :slightly_smiling_face:

We have to target the button types classes because the color variables different so we cannot target it globally.

// Default button

.btn {
  &:active,
  &.btn-active {
    background-image: none;
    border-bottom-color: transparent;
    background-color: var(--primary-medium);
  }
  
  // Primary button

  &.btn-primary {
    &:active,
    &.btn-active {
      background-color: var(--tertiary-hover);
    }
  }
  
  // Danger and ✘ button

  &.btn-danger,
  &.cancel {
    &:active,
    &.btn-active {
      background-color: var(--danger-hover);
    }
  }
  
  // ✔ button

  &.ok {
    &:active,
    &.btn-active {
      background-color: var(--success-hover);
    }
  }
}

Before

After