[design-tokens] - refactor component tokens WIP

[Nathan Stilwell]

Refactor component tokens

File Structure

Currently tokens to be applied to individual components are spread across files divided by attribute (background, border, font, etc). I believe these tokens would be much more maintainable if organized by the component they support. So instead of a structure that looks like this,

tokens
└── color
    ├── background.json
    ├── base.json
    ├── border.json
    ├── core.json
    ├── font.json
    └── shadow.json

... we want something that looks like this,

tokens
└── component
    ├── avatar.json
    ├── badge.json
    └── button.json

Token Structure

inside those token files should be a structure like ....

"component": {
    "component name": {
       // token styles
    }
  }