Schemas: Standardize Token Names

[simeonoff]

Currently, the names of the design tokens in the schema files for each component are randomly selected. One component can have a token like 'foreground' for describing the base or primary text color in a
component, while the next can have 'text-color' for the same purpose.

In an effort to have a more semantic meaning behind token names, we should create and follow a system for naming tokens in component schemas.

This effort will require a lot of work, migrations and refactoring that will trickle down in every product consuming the design tokens for each component. However, I believe it's worth it.

Proposal:

Come up with a naming convention and refactor all schema tokens to follow that convention.

Example:

$light-button: (
  color: (
    background: (
      base: (
        value: (
          color: (secondary, 500)
        ),
      ),
      hover: (
        value: (
          color: (secondary, 300)
        ),
      )
    ),
  )
);