[Feature Request]: Create a token directory

[tay1orjones]

The problem

Currently, documentation for our design tokens is split across sass docs in each elements package.

• https://github.com/carbon-design-system/carbon/blob/main/packages/layout/docs/sass.md#api
• https://github.com/carbon-design-system/carbon/blob/main/packages/type/docs/sass.md#api
• https://github.com/carbon-design-system/carbon/blob/main/packages/themes/docs/sass.md#api
• https://github.com/carbon-design-system/carbon/blob/main/packages/colors/docs/sass.md#api

The solution

Based on some feedback we received at office hours today, it would be beneficial (particularly for new adopters of Carbon), to have a central piece of documentation that lists every design token.

One thing that complicates this a bit is that tokens reside in multiple places:

• The root elements package (e.g. @carbon/colors)
• The @carbon/styles package (e.g. @carbon/styles/scss/colors)
• The @carbon/react package (e.g. @carbon/react/scss/colors)

Denoting which path to use and when/why (and keeping the paths up to date as they change) would be a nice feature to have in this.

Examples

I imagine this could be a large table, similar to the ones provided on some of our elements previews https://carbon-elements.netlify.app/ - in particular, the theme example where we can filter tokens down by certain different group/set/properties.

It probably doesn't need to live on the website, instead could be focused more as a utilitarian tool for devs reference.

[tay1orjones]

Another idea - maybe this could be a revamp of the homepage at https://carbon-elements.netlify.app/ to iframe every example onto that single page so you can cmd + f to find things by name. A navigation bar could be added at the top to navigate to a single preview if you want to.

[tay1orjones]

Another option - update the sassdoc task to pull everything in to a single .md file that lives in the repo somewhere, or perhaps in the wiki