Store background-color value in a CSS variable, for responsive styling.

[jackemerson]

I've a few extra style rules set for TST and would love to incorporate Colored Tabs' styling.

As it stands, descendants¹ can inherit the background-color of the tab, but this has limited application in practice. It also requires managing inheritance, as we descend, to avoid overriding that property.

---

As a supplementary feature, it would fantastic to have access to those colour values directly. This would allow styling of other properties, e.g. border-color, box-shadow, etc., for the tab, and its descendants.

Something like this:

.tab.coloredTabsHue192 {
    --colored-tabs-bg-color: hsl(192,20%,30%);
    background-color: var(--colored-tabs-bg-color);
}

Modular Approach

Access to hue value, in addition to the background-color value.

.tab.coloredTabsHue192 {
  --colored-tabs-bg-hue: 192;
  --colored-tabs-bg-color: hsl(var(--colored-tabs-bg-hue), 20%, 30%);

  background-color: var(--colored-tabs-bg-color);
}

Further modularisation.

CSS

.tab.coloredTabsHue192 {
  --colored-tabs-bg-hue: 192;
  --colored-tabs-bg-saturation: 20%;
  --colored-tabs-bg-lightness: 30%;
  --colored-tabs-bg-color: hsl(
      var(--colored-tabs-bg-hue), 
      var(--colored-tabs-bg-saturation),
      var(--colored-tabs-bg-lightness)
  );
   
  background-color: var(--colored-tabs-bg-color);
}

The varying levels of granularity could be enabled through options, if performance was a concern. Likely unnecessary, though; I suspect the performance impacts of even the most modular approach would still be negligible.

Notes

I'm inclined to brevity with naming schemes, but I'm approximating Tree Style Tab here. I did shorten background to bg, however.

1. tab-label, favicon, .highlighter, etc.