[design-tokens] Design token initial - colors

[laurenbarker]

design-tokens // add design token package

Related to #27

Uses style-dictionary to transform tokens defined in json into SCSS and JS variables.

See #62 for usage.

Example output:

// Do not edit directly
// Generated on Fri, 29 May 2020 22:15:25 GMT

$color-background-base: #ffffff;
$color-background-alt: #f5f7fa;
$color-background-inverse: #475872;
$color-background-success: #37a806;
$color-background-error: #ff3b4e;
$color-background-warning: #ffa53b;
$color-background-info: #0788ff;
$color-background-danger: #ff3b4e;
$color-background-badge-neutral: #e7ecf3;
$color-background-badge-success: #b4f1aa;
$color-background-badge-warning: #fef1da;
$color-background-badge-info: #e0eefb;
$color-background-badge-danger: #ffe5e8;
...

Checklist

• I have written or updated test for the changes I made
• I have updated the README of the package I'm working in to reflect my changes
• I have added or updated Storybook if appropriate for my changes

[laurenbarker]

This is the gray background we use some places. Not sure what to call it.

[laurenbarker]

We have a lot in the css right now to adjust the color:

    &:hover {
      background-color: $crl-green-4;
      color: $crl-base-white;
    }

    &:active {
      background-color: $crl-green-4;
      border-width: 1px;
      border-color: mix(black, $crl-green-4, 10%);
    }

    &:focus {
      border-width: 1px;
      border-color: mix(black, $crl-green-4, 20%);
      @include crl-box-shadow(0, 0, 0, 3px, rgba($crl-base-green, 0.4));
    }

    &:disabled {
      background-color: $crl-green-2;
      border-color: $crl-green-2;

      &:hover {
        cursor: not-allowed;
      }
    }

[nathanstilwell]

I wonder if we could add an additional layer to the states with separate colors. For example for hover,

...
"hover": {
  "background": { "value": "{color.base.green.value}" },
  "foreground": { "value": "{color.base.white.value}" },
},

I think should also move ahead and iterate. There may be some way to capture what Rachel had mentioned this morning about a number value representing a percent darker or whathaveyou.

[laurenbarker]

Right now the text color is separate from the background. For example, the button text color on hover is here. Is that what you mean by foreground?

[laurenbarker]

These are the color variables used for text in figma

[nathanstilwell]

LGTM

I had one comment about future iterations, but I think we should start integrating tokens into components as soon as we can.

[nathanstilwell]

I wonder if we could add an additional layer to the states with separate colors. For example for hover,

...
"hover": {
  "background": { "value": "{color.base.green.value}" },
  "foreground": { "value": "{color.base.white.value}" },
},

I think should also move ahead and iterate. There may be some way to capture what Rachel had mentioned this morning about a number value representing a percent darker or whathaveyou.