docs: split t2 colors stories and remove t2 stories aggregator

[jinlee93]

Summary:

• removes aggregating story file Tier2Tokens.stories.jsx and jsut converts the individual componets to story files
  • similar work will be done for T1 and T3 tokens
• splits T2 colors as requested by design and I also agree as part of survey feedback to not have to scroll that much on ZH
• adds suggested TW class and design token string to the relevant color
  • follow up pr will attempt to differentiate these (is follow up since it'll also affect the other tokens pages)
• converts some jsx to tsx

Test Plan:

• Manually tested my changes, and here are the details:
  • no stories changes except for t2 colors
  • adds the tw class and figma design token next to the colors
    

[github-actions]

size-limit report 📦

Path	Size
components	95.49 KB (0%)
styles	32.76 KB (0%)

[jinlee93]

Interesting that chromatic flags these as new stories even tho they're structured and look exactly the same

[booc0mtaco]

@jinlee93 looks good. where do the token names in figma come from?

[jinlee93]

@jinlee93 looks good. where do the token names in figma come from?

It comes from the UI foundations Figma file

[codecov]

Codecov Report

Merging #1719 (2f60a40) into next (41cf335) will not change coverage.
The diff coverage is n/a.

@@           Coverage Diff           @@
##             next    #1719   +/-   ##
=======================================
  Coverage   92.28%   92.28%           
=======================================
  Files         146      146           
  Lines        2579     2579           
  Branches      664      664           
=======================================
  Hits         2380     2380           
  Misses        198      198           
  Partials        1        1           

📣 We’re building smart automated test selection to slash your CI/CD build times. Learn more

[booc0mtaco]

The names differ slightly in format from figma to code, so we transform the code token names into the figma equivalents for reference. LGTM