Override border-radius variables with theme

Contribute UX
9

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:

image
image1310×1212 169 KB

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.

6 Likes