Override border-radius variables with theme

Hello,

I tried to override the new border-radius variables with a remote theme but it seems to the core :root variables are always prioritize. I can override these if I create a theme component in admin. Is there a way to override these with theme? What am I missing? :slightly_smiling_face:

This tiny change is so useful thanks so much! :heart:


Ok it works as expected just my test site joking me. :slightly_smiling_face:

2 Likes

Uh it seems that was not a joke :smile: With remote theme I can only override it if I use !important.

If I use it like this :arrow_down_small:

$border-radius: 2em !important;

:root { 
   --d-button-border-radius: #{$border-radius}; 
   --d-input-border-radius: #{$border-radius}; 
 }

Otherwise if I try it like this :arrow_down_small:

:root { 
   --d-button-border-radius: 2em; 
   --d-input-border-radius: 2em; 
 }

Then the core :root variables are prioritized.

What am I missing? :thinking: Thank you! :slightly_smiling_face:

1 Like

It’s working when I test it in a theme… the core root gets overruled by theme root, as expected.

Can you show some more info? Where do you define your root? What does your inspector look like?

2 Likes

Hello Charlie,

Thanks for checking this :slightly_smiling_face:

I tried to add in scss/custom-variables.scss and import it to the common.scss. And I tried to add directly to common.scss too.

I just notice now it works if there is no other component (created in admin) assigned to the theme. If I create a component in admin with some css in common section. Then it won’t override the core root variables for me.

It works if the theme has no component or the component Common / CSS is empty.

Screenshot 2022-11-24 at 18.22.24

Screenshot 2022-11-24 at 18.21.23


If I create a component with some Common / CSS and activate it to the theme.

Then it is not working for me.
Screenshot 2022-11-24 at 18.29.42

The d-default-border-radius and d-select-body-border-radius are custom.

Thanks for the help! :slightly_smiling_face:

1 Like

I see. Very interesting. Thanks for the clear steps.

Will see what I come up with. At the moment I’m sceptical there will be a different solution that the !important you’re already using, but will be good to know how/why this is working like this.

2 Likes