Colors and custom properties

We've adjusted and expanded the CSS custom properties at tad to make the system more optimized in general and also allow for the new color ranges coming out of the marketing side. After discussion, we determined the areas that should be adjustable are the background, text, links and any buttons. These properties can always be changed with targeted CSS, but the more specific we make the atoms the more code we have to add at the molecule and card level to overload previous rules.

Starting with just impact, a normal approach wasn't too bad. It's ok to declare, as an example, in an impact molecule or card that the label should be black text on a white background. That's not a lot of code. It got a little more repetitive when we added the promo concept and then it got really ugly when we started putting these into a story body with its own rules.

What we have done here instead, using CSS custom properties, is set some defaults for our current cards to eliminate boilerplate code while also giving us a clean place to add new themes without increasing the payload by all that much. Here is the new set of standards for our regular card, impact card, and promo card.

In the new setup, atoms like links, buttons and labels are listening for these properties. Here is a sampling of the CSS for the impact and promo molecules.

.impact,
.promo {
  background-color: #373737;
  --tc: white;
  --lc: white;
  --lhc: white;
  --bc: #222;
  --bbc: white;
}

.promo {
  background-color: #31409F;
  --bc: #31409F;
}
  

This setup allows us to expand in the future for different ad campaigns. Here is a quick sample.

Here is the CSS to make those work.

.purple {
  background-color: #91096F;
  --tc: white;
  --lc: white;
  --lhc: #FFE31A;
  --bc: white;
  --bbc: #09932D;
}

.charcoal {
  background-color: #525D54;
  --tc: white;
  --lc: #FFDD69;
  --lhc: white;
  --bc: #7A8A0E;
  --bbc: white;
}

.slate {
  background-color: #EBEAE4;
  --bbc: #719281;
}
  

The same CSS also works for cards, along with any other element that uses our system.

Lastly, though we dont' use this in our designs, it was important in the structure that elements inside of a story body could be tailored too. The same rules could be applied to the article header, as an example.