Variable-ize colors

Created by: nchan0154

Overview

I'd like to propose that we migrate from using SASS variables to use CSS Variables instead. This can be a part of larger efforts to rewrite the overall CSS using more modern techniques, but I think this can potentially take priority as a way to set up the ground work for making #1423 viable (but also, not sure how much is in scope for Andy!) and reducing some of our technical debt.

Implementation details

Since the site uses different color schemes for each page, we'll likely need several layers of abstractions. I'm using Hylia and Andy Bell's previous work as a major source of inspiration here. The initial layer should likely be similar to how our colors are currently set up, named colors that correspond to the actual value being described.

--color-black: #000000;
--color-gray-tint: #e6e6e6;
--color-white: #fff;

The second layer should represent the purpose of the color. Our components should only ever reference these kinds of variables, and not directly.

// Color definitions
--color-card-background: var(--color-white);
--color-card-focus-background: var(--color-light-green);

// Component example
.card {
  background-color: var(--color-card-background);

  &:focus {
      background-color: var(--color-card-focus-background);
  }
}

I'm thinking that all definitions for these variables should be set in a single place, if not a single file, at least a single folder where each file represents a particular color theme. I think we can consider seperating themes out from the pages that they represent, so as the site grows, new pages can opt into different color schemes that exist via YAML, rather than us having to copy and paste the variables for a different page into the theme, or extend current selectors in many different places.

All this will set us up up for being able to override colors in one place to create dark mode/other color schemes, as we can see in Hylia.

Extra considerations

I've thought briefly about the below aspects, but there are likely things that I'm missing, so feel free to weigh in!

• IE11 compatibility. EJ has mentioned to me that we do still want to support IE11. I'm thinking we can either just set a nice, reasonable fallback on each of the components, so that IE11 gets a single color scheme across the whole site, or we use a SASS mixin in order to provide color schemes within IE11. This approach is more fully outlined in this blog post.
• SVG headers. Would be good to inline them so that we can use currentColor in order to style them.
• Right now I've laid everything out in terms of template level color theming but, but I'm not sure if we actually need component level color themes as well since I don't have a full mental map of every component on the site.

Feedback on any of these aspects is welcomed!