Horizon 4.1.0 CSS clip-path now affects Variant button appearance

[cee_em]

Short description of issue

Whether related to future rollouts or not - the current rendering of Variants is poorer when compared to last major version.

Reproduction steps

Of note:

Fresh install uses linked “color2” meaning a dynamic colour is detected, causing visual problems.

Current ::before styling same as prev releases

.variant-option__button-label:not(.variant-option__button-label--has-swatch):before {
    clip-path: inset(0 0 0 0);
    border-color: var(--color-variant-border);
    inset: calc(var(--options-border-width) * -1);
}

Button appearance for:

Variant + Border + Border Radius (default setup therefore notable)

Persistent Border Radius rendered (default dynamic colour is connected)
On page scroll up, clipping creates drop shadow effect

Variant + Transparent Border + Border Radius

Works as expected

Variant + No Border + Border Radius

Works as expected

Variant + Border + No Border Radius

Persistent Drop shadow effect on hover

Additional info

Screenshots attached

What type of topic is this

Bug report
Feature request

Upload screenshot(s) of issue

[Paige-Shopify]

Hi @cee_em, thanks for flagging this. This may be related to how color palette settings are interacting with variant button styles. I’ll pass it along to the relevant theme team to investigate.

[Paige-Shopify]

@cee_em can you confirm if you’re seeing this issue with Horizon 4.1.1? If you are, can you provide exact replication steps? Thank you!

[cee_em]

Hi @Paige-Shopify, this looks to be resolved now. Thanks for following up.

I’m no longer seeing the issue with either user or default assigned Palette colours