Premium support for our pure JavaScript UI components


Post by gbrdhvndi »

Hello there,

We are building a custom theme using "design tokens" (SASS variables) from Salesforce Lightning Design System (SLDS) to make it look "at home" in Salesforce Lightning Experience (LEX).

SLDS is using REM units throughout, where as you prefer EMs. Which is fine for the most part as we are overriding your variable values. There are also instances where EM and PX values are simply hard-coded into CSS rules, yet again this isn't a big deal as we just override your rules with our own using higher specificity selectors. However, a recent update has broken our theme build with "incompatible units" error as a new rule was introduced which mixes a variable with a hard-coded value in an expression:

.b-menu-with-icon {
    // Item without icon
    span.b-menu-text {
        margin-left : $menu-item-icon-width + 0.5em;
    }
}

We override the $menu-item-icon-width variable, which is 1.25em by default, with an SLDS token "spacing-x-large", which is 2rem.

It would be nice if all PX and EM values (or at least the one mentioned above) were declared as variables so that custom theme builders had more control over them.

Thank you!

Last edited by gbrdhvndi on Thu Sep 16, 2021 4:01 pm, edited 1 time in total.

Aleksei


Post by saki »

Thank you very much for reporting this problem; I have created a ticket: https://github.com/bryntum/support/issues/3423


Post Reply