Can we have component specific CSS classes that are base on the style and state of the component?

[royeradames]

For example due to the sl-button not having distict css variables for default and active we cannot use css variables to completly customize the styles. Now we have to break how css is being render and we have to overwrite it completely with our solution. When in this case we just wanted some light alterations.

Image if we had a local variable just for button that for
Instead of

.button--standard.button--primary {
    background-color: var(--sl-color-primary-600);
    border-color: var(--sl-color-primary-600);
    color: var(--sl-color-neutral-0);
}

    .button--standard.button--primary:active:not(.button--disabled) {
    background-color: #43386c;
    border-color: var(--sl-color-primary-600);
    color: var(--sl-color-neutral-0);

We had:

.button--standard.button--primary {
   --primary-background-color: var(--sl-color-primary-600);
   --primary-border-color: var(--sl-color-primary-600);
   --primary-color: var(--sl-color-neutral-0);
    background-color: var(--standard-background-color);
    border-color: var(--standard-border-color);
    color: var( --standard-color);
}

    .button--standard.button--primary:active:not(.button--disabled) {
   --primary-active-background-color: #43386c;
   --primary-active-border-color: var(--sl-color-primary-600);
   --primary-active-color: var(--sl-color-neutral-0);
    background-color: var(--primary-active-background-color);
    border-color: var(--primary-active-border-color);
    color: var(--primary-active-color);

We would be able to add our custom design with just css variables for most cases.

[carlos-verdes]

I agree there should be more css variables added into this library