Strategy for styling components with custom properties

[muratcorlu]

We set default values of custom properties for components like below:

:host {
  --bl-badge-color: var(--bl-color-primary);

In this way we are not able to customise --bl-badge-color in a scope of parent element like

<div class="container">
  <bl-badge>Test</bl-badge>
</div>

<style>
.container {
  --bl-badge-bg-color: var(--bl-color-danger);
  --bl-badge-color: var(--bl-color-primary-background);
}
</style>

You can see the demonstration of the issue here: https://jsfiddle.net/wa0bdxmz/1/

It's a bit controversy to define expected behaviour here. It would be helpful to be able to set a custom property of all of the components in a scope. Also while we develop tab component, we needed to set custom property of bl-badge inside bl-tab. Currently we can not do this outside if bl-tab component doesn't pass this variable from it's parent to the bl-badge inside.

On the other hand, some finds this a safer approach that will prevent developers to style many components unintentionally. Ionic, for example, uses this approach for some of its components: https://github.com/ionic-team/ionic-framework/blob/main/core/src/components/picker/picker.scss

But since our custom property names are prefixed with the name of component (like --bl-badge-...) I also find it already gives the feeling that you will set this property for all of the badges inside the context you are setting. So if developer writes:

.container {
 --bl-badge-bg-color: var(--bl-color-danger);
 --bl-badge-color: var(--bl-color-primary-background);
}

they will already be aware that this will effect all of the badge components inside .container element.

I want to hear your opinions about this. @leventozen @DamlaDemir

[DamlaDemir]

Actually, it sounds good but I have some concerns. While we define the CSS variable, we usually add a component name in front of it (such as bl-badge-..). And we use these variables only for related components. For example --bl-badge-color variable, even though we customize it in the parent scope we know this variable is used only inside the badge component. Due to this reason when we set it like the below we know every badge component in the container will customize:

.container {
      bl-badge {
        --bl-badge-bg-color: var(--bl-color-danger);
        --bl-badge-color: var(--bl-color-primary-background);
      }
}

Actually, my main concern, while creating the academy button, I changed the theme according to the academy button colors. But if we let customize the CSS variable in the parent scope, every component using bl-color-primary and --bl-color-primary-hover will change according to the academy button color. But we don't want to do this we want to change only button colors.

 .academy-button {
      --bl-color-primary : var(--bl-color-featured);
      --bl-color-primary-hover: var(--bl-color-featured-hover);
     }

If the developer customizes in the parent scope, any component can be changed with the new colors. And this situation may not be noticed.

[muratcorlu]

Since theme colors like --bl-color-primary always can be set on document or an element level and we can not prevent of making this by mistake, if custom property name defines itself very well, I don't see a big issue to customise single or a set of components from parent elements. But, to make it safer, .academy-button class could be defined with button tag as follows:

 bl-button.academy-button {
  --bl-color-primary : var(--bl-color-featured);
  --bl-color-primary-hover: var(--bl-color-featured-hover);
 }

In the example below I feel like we are forcing to duplicate bl-badge naming in both selectors and properties:

.container {
  bl-badge {
    --bl-badge-bg-color: var(--bl-color-danger);
    --bl-badge-color: var(--bl-color-primary-background);
  }
}

If we'll always need to set custom properties of a component directly on that element (like above) than maybe we should not use component prefixes on those custom properties at all. Like:

.container {
  bl-badge {
    --bg-color: var(--bl-color-danger);
    --color: var(--bl-color-primary-background);
  }
}

Since this --bg-color can not be set via upper levels of the dom (you can not set it on .container level, this is also safe. But I see the point both approach may have it's advantages and disadvantages. I think, we can give some more time and investigation for having a decision.

[muratcorlu]

We concluded this discussing as moving private css variables to an wrapping element inside the component. Here is a change for badge component regarding to this decision: #188

As a further action, I think we can add a document to about this decision in our contribution guideline. I mentioned this in #73

[muratcorlu]

We have a document that covers the guidance mentioned here. https://baklava.design/?path=/docs/documentation-customizing-components-style--page