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!