Make it easier to have different colors per tenant #5021

javierm · 2022-10-23T17:37:26Z

References

Depends on pull request Add support for multitenancy #4030
Depends on pull request Unify duplicate SCSS color variables #5020
Depends on pull request Revert "Use the same color for solid and hollow buttons" #5031
Check the demo-staging branch for an example showing how to use CSS variables to customize colors

Objectives

Simplify the custom code necessary to have different colors per tenant

Notes

This code uses CSS variables, which means it will work on (as of October 2022) about 97% of the browsers. We're providing fallbacks so the other 3% of the browsers see the default colors instead. For single-tenant applications, we recommend using SCSS variables instead, which will work on 100% of the browsers and will allow using SCSS functions like lighten or darken.

With this pull request, the main header, top links, subnavigation, footer, links and brand/button colors can be customized using CSS variables.

app/models/machine_learning.rb

config/initializers/apartment.rb

config/sitemap.rb

Until now, we didn't have specific variables for the headers and were using the brand colors instead. Now we maintain the brand colors as default values, but allow overwriting them. For the navigation and footer, we didn't even have variables.

So now inverting the selection for brand-secondary backgrounds will depend on the value of brand-secondary.

We don't need the color parameter anymore since we can now use a more generic mixin for any background, like brand-secondary.

This is consistent with the `body-colors` mixin and with other mixins we're about to add, like `anchor-color`.

Until now, overwriting the styles for a certain tenant was a very tedious task. For example, if we wanted to use a different brand color for a tenant, we had to manually overwrite the styles for every element using that color. It isn't possible to use different SCSS variables per tenant unless we generate a different stylesheet per tenant. However, doing so would make the CSS compilation take way too long on installations with more than a couple of tenants, and it wouldn't allow to get the colors dynamically from the database, which we intend to support in the future. So we're using CSS variables instead. These variables are supported by 97% of the browsers (as of October 2022), and for the other 3% of the browsers we're using the default colors (SCSS variables) instead. CSS variables have some limitations: for instance, it isn't possible to use functions like `lighten`, `darken` or `scale-color` with CSS variables, so the application might behave in a strange way when we use these functions. It also isn't possible to automatically get whether black or white text makes a better contrast with a certain background color. To overcome this limitation, we're providing variables ending with `-contrast`. For instance, since the default `$brand` color is a dark one, when assigning a light color to `--brand`, we probably want to assign `--brand-contrast: #{$black}` as well, so the text is still readable.

Just like we did with SCSS variables, we use the `--main-header` CSS variable and, if it isn't defined, we use the `--brand` CSS variable instead. Note that we're still using the `inverted-selection` mixin based on the default `$main-header` color, so it's possible that we get the inverted selection in the main header when using a dark color with `$main-header` but a light color with `--main-header`, which doesn't make much sense. Not sure whether there's anything we can do about it.

Just like we did with SCSS variables, we use the --anchor-color CSS variable and, if it isn't defined, we use the --brand CSS variable instead.

We were already doing the same for the main header color; now we also make it easier to use different top links, subnavigation and footer colors per tenant. Just like we do with SCSS variables, we use the brand-secondary color for the top links when the `--top-links` variable isn't defined.

javierm added Community Interest Customization labels Oct 23, 2022

javierm self-assigned this Oct 23, 2022

javierm added this to Doing in Consul Democracy Oct 23, 2022

javierm changed the base branch from master to multitenancy October 23, 2022 17:37