Implement design tokens with CSS variables

[vickonrails]

Is your feature request related to a problem? Please describe.
There's no direct relationship between avocado's design tokens and CSS variables. Take, for example, the configurations for gray color theming in avocado

const gray = {
  '1': '#ffffff',
  '2': '#fafafa',
  '3': '#f5f5f5',
  '4': '#f0f0f0',
  '5': '#d9d9d9',
  '6': '#bfbfbf',
  '7': '#8c8c8c',
  '8': '#595959',
  '9': '#434343',
  '10': '#262626',
  '11': '#1f1f1f',
  '12': '#141414',
  '13': '#000000'
}

If I want a user of the design system to be able to use an already defined shade of gray from the system, how would they do this???

Maybe I could export the whole color config as an object and have the user of the design system import it like so

// import the whole color object
import { color } from 'avocado-ui';

// restructure gray from color
const { gray } = color;

// gray["500"] is now available to the user

This solution is possible, but it has 2 major downsides

• Javascript objects can't be used in a CSS file
• Requires additional javascript (it costs less to do it in CSS)

Describe the solution you'd like
A well-documented set of CSS variables for different design token values. For example

.header {
  background: var(avocado-grey-001);
}

This way, we don't require additional JS code for something CSS can do, we can use the variables natively even in CSS files.

Describe alternatives you've considered
Define design tokens in CSS variables globally and import the CSS file as a Global style.

Additional context
This would involve users importing a global provider alongside avocado to provide the CSS variables to the browser.

CSS variables are not yet supported in IE and a few other browsers. I guess the solution is to use a polyfill