Override border-radius variables with theme

[Don]

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?

This tiny change is so useful thanks so much!

---

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

[Don]

@Don

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

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

If I use it like this

$border-radius: 2em !important;

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

Otherwise if I try it like this

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

Then the core :root variables are prioritized.

What am I missing? Thank you!

[chapoi]

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?

[Don]

Hello Charlie,

Thanks for checking this

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.

---

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

Then it is not working for me.

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

Thanks for the help!

[chapoi]

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.

[awesomerobot (Kris)]

hmm yeah I can repro this… it’s a little strange.

I’ve got a remote theme and all common.scss contains is:

:root {
  --d-border-radius: 100px;
}

this works and I get rounded buttons and other elements:

Once I add a local theme component that contains CSS, it breaks. I created a local theme component that only contains this in common.scss:

body {
  background: red;
}

I get the red background, but the border-radius is gone:

The same component works fine remotely. I get both the red background and the rounded borders.

@david/@pmusaraj does this have something to do with the order of how remote and local themes are compiled?

[pmusaraj (Penar Musaraj)]

I think it has to do with our magic injection of variables.scss into every theme CSS file. Now, we have this in variables.scss:

:root {
  --topic-body-width: #{$topic-body-width};
  --topic-body-width-padding: #{$topic-body-width-padding};
  --topic-avatar-width: #{$topic-avatar-width};
  --d-border-radius: initial;
  --d-nav-pill-border-radius: var(--d-border-radius);
  --d-button-border-radius: var(--d-border-radius);
  --d-input-border-radius: var(--d-border-radius);
}

And because we inject that SCSS file into every theme and plugin SCSS file, it gets repeated over and over:

The only way to override it currently is to add the override to the last theme stylesheet, only then it gets output last.

I think we need to move this :root declaration somewhere global outside of variables.scss in core.

[awesomerobot (Kris)]

Aha! thank you so much, I never really processed why those are repeated and just overlooked it completely.

I’ve relocated these to another file so they aren’t repeated, and I confirmed that it solves the problem.

https://github.com/discourse/discourse/pull/19389