When building a tenant's Marfeel PWA during the GoLive process, the CSS code required to deliver a unique solution to each customer that consolidates and reinforces their brand could be very substantial. 

To shed a lot of the excessive and duplicated code that was needed to mirror specific tenant brand colors, and continue to reduce the file size to improve load times and performance for all the elements that make up Marfeel's 360o solution, Marfeel defines a simplified set of variables for a tenant's brand colors. 

When Marfeel engineers perform a pull master, they're provided with a refactor of the main and secondary colors for that tenant. To promote a reduction of unnecessary code, these two mixins should only be used to color in what is strictly and absolutely necessary. For example, the header bar color which should always be colored with the tenant color.

All components that are created must contain the refactor of main and secondary colors instead of the previous mixins that were used. That is, the coloring part should be in the component file using CSS variables instead of coloring part of it in the main color. 

To use colors for different CSS bundles, use the following CSS variables:

--mc for the main color ,
--sc for the secondary color ,
--ui color which depends on the theme. There are some elements which are colored with the main color or the secondary color depending on if it's a light theme or not. This is the one you have to use. 
--ui-c main color complementary color, used for the sections indicator color, etc.
CSS

For more information on how to use these variables, see the Mozilla Developer Network's article, Using CSS variables. 

Support

Not all browsers recognize and support CSS variables. In these cases, a fallback can be defined using the following mixin:

@mixin cssVariableWithFallback ($ property, $ variable, $ fallback: # 000)
CSS

Which can be named as the following:

@include cssVariableWithFallback ('background-color', 'mc');
CSS

The fallback color is the color to be applied in the cases where CSS variables are not supported. It should be a common color that fits all the tenants. 

For example, Marfeel can set the tenant color for coloring the multipaged paginator using a fallback to black for browsers that don't support CSS variables.