Border colour change with background on state change

[xtremeexposures (Al)]

I’m building out my design system and producing three different button styles.

In one of these, there’s a border around the button’s edge which changes colour between states.

When I change the state from default to hover etc, and the background colour needs to change too, the border colour is not changing to the right colour and is going to the highest contrast colour it can find.

These are what I’m trying to recreate (from figma).

For instance, to build the tertiary button, I’ve got a transparent border on the top and bottom of the static tertiary button (to stop the text moving on hover) and then I change the bottom border colour to orange on hover along with the background colour.

Here’s my default State:

Hover State:

What I’m seeing is this:

Any idea what I’ve done wrong?

[Agustin_Carozo (Agustin M. Carozo)]

Hi there

let’s try to figure this out.

• How are your button states defined? (custom classes, what is the conditional logic)
• Perhaps there is a global/project setting overriding the style of your buttons?
• You can try debugging this by publishing your project and using your browser developer tools (“Inspect”) to try and see which styles are being used/overriden