How to organize a common set of CSS colors in Rails + Vue.js?

Question

Ruby on Rails

I am creating an application on Ruby on Rails where the public part of the pages is implemented through a standard render (slim), and the admin part using Vue. It is required to have a common set of standard corporate colors that are common for the public part and for the internal one.

Right now I'm using Tailwindcss with custom colors and it's definitely not ideal.

I have colors in tailwind.js:

colors: {
  white: 'hsl(200, 2%, 90%)',
  'white-50': 'hsla(200, 2%, 90%, 0.5)',
  'white-20': 'hsla(200, 2%, 90%, 0.2)',
  ...
}

And also duplicated in colors.scss using the "postcss-color-adjustment" library:

$white: hsl(200, 2%, 90%);
$white-50: color($white alpha(.5));
$white-20: color($white alpha(.2));
$white-05: color($white alpha(.05));

I mainly use colors from Tailwind in common scss files and in Vue.
In scss like this:

label {
  @apply uppercase text-white;
}

And also in Vue:

<style style="scss" scoped>
  .panel {
    @apply border border-white;
  }
</style>

But sometimes colors are required as spares for gradients. And then I use the variables from colors.scss:

$red-grad-x-hover: linear-gradient(to right, color($orange brighten(10%)), color($red brighten(10%)));

Ideally, I would like to have a library of dependent colors that can be easily changed en masse. Changed "white" and changed all "white-50", "white-20", etc. To make the second color dependent on the first one via the color function (as in "postcss-color-adjustment"). Best of all, a collection of SCSS variables. So that you can reuse them flexibly in gradients, even in Vue.
In general, this is possible, but then you should not forget to import such a scss file into each * .vue file... Which seems not very good, but maybe I'm just being picky?))

Tell me where to look, what might be worth trying? I would like to continue working with Tailwind, but it turns out somehow ugly with colors.

Thanks in advance for any comment!

Answer 1

If you don't need to support IE11, then you can use CSS variables. More or less like this:

:root {
  --white-color: 200, 2%, 90%;
  --white-alpha: 100%;
  --white: hsla(var(--white-color), var(--white-alpha));
}

.component {
  background: var(--white);  
}

If you change one of the global variables, it will change in all components.
Or it can be redefined on the fly for different components or on an event: