Categorize Paragon's SCSS variables into design token types

[viktorrusakov]

Before implementing style dictionaries we need to understand what type of design tokens Paragon will have

AC

• understand what kind of tokens are generally used by the community and decide what would be the appropriate types for Paragon (e.g., colors, typography, spacing, what else?)
• inspect Paragon's SCSS variables and assign them a specific type based on the result of the previous step
• define and document JSON schema based on the steps above, attach it to this issue and present it on Paragon Working Group meeting, e.g. for color category schema might look like this:

  {
    "color": {
      [variant]: {
        [level]: {
          "value": [color-value],
          "themeable": true
        },
      }
    }
  }
  

Useful links:

• https://github.com/design-tokens/community-group
• https://spectrum.adobe.com/page/design-tokens/
• https://www.figma.com/community/plugin/843461159747178978/Figma-Tokens