Duplicate Sass variables as CSS variables

[levimcg]

Currently, all style variables are declared as Sass variables.
https://github.iu.edu/UITS/rivet-source/blob/develop/src/sass/core/_variables.scss

This works well for Rivet itself. It works fine if you're importing Rivet into a project that also uses Sass. But if you're using Less or no preprocessor or don't want to compile Rivet, there's no way to take advantage of these definitions. Instead, offer the variables also as CSS variables. There's good browser support for any browser over the last 1.5 years. If projects are still supporting IE, they won't be able to use CSS variables, but for everyone else, this would be a big advantage. It would minimally really help prototyping. And for those not wanting to use it, it is ignored.

Relevant articles:

• https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables
• https://css-tricks.com/difference-between-types-of-css-variables/
• https://developers.google.com/web/updates/2016/02/css-variables-why-should-you-care
• https://medium.com/dev-channel/css-variables-no-really-76f8c91bd34e
• https://caniuse.com/#feat=css-variables

To maintain backwards compatibility, Rivet should still use Sass variables internally. Just dually offer CSS variables. Given these would be global variables, it would be best to prefix them with rvt-. For example, this is how you could extend _variables.scss:

$color-midnight--100: #dce3ee;

/* At the bottom of the file, declare all CSS variables in `:root`. */
:root {
  --rvt-color-midnight--100: $color-midnight--100;
}

[basham]

Original issue thread: https://github.iu.edu/UITS/rivet-source/issues/246

[basham]

Here's another solution to integrating token-izing design system variables into CSS. Use the env() CSS function. It's not supported in IE or Edge, but it may be worth experimenting with. This article elaborates on how to use with with PostCSS.

Why you should use CSS env(), April 5, 2019

[basham]

Was thinking about the breakpoints that are defined in Rivet. It would be nice if there was some way to customize breakpoints. The breakpoints in the Rivet Header is not as tight as I'd like it, when there isn't much content in it. We can't use CSS variables in media queries, but we will eventually be able to have custom env() variables which will work in that manner. I came across the new project css-media-vars today. I'm used it as inspiration for this solution. It allows you to change breakpoints in only CSS, without needing to modify any complicated rules. I'm not totally thrilled with this solution, but it is fascinating.

Change the width of the viewport, to see the "header" change size and color. There are three breakpoints. And one of them is overwritten by the "implementation" of the library. Read CSS comments for more.
https://codepen.io/basham/pen/abdMmwe?editors=1100