Design tokens as css variables

[nathanyoung]

Currently the only way to consume pebble design tokens is to include the _variables.scss file in another scss file. We should output the tokens as css vars so they can be used by consumers in their own stylesheets or inline css, without having to import scss in the node_modules folder.

https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties

[nathanyoung]

Here's an example of what has to be done by a consumer app

@import "../../../../node_modules/@istreamplanet/pebble/dist/Styles/foundation/_color.scss";

.blue-bg-example {
    background-color: $blue-lighter;
}

Would like this to be

.blue-bg-example {
    background-color: var(--blue-lighter);
}

[eddiemonge]

This can be considered a breaking change as supporting both is not desired so it would be entirely variable based