docs: split t3 colors stories and remove t3 stories aggregator

[jinlee93]

Summary:

• removes aggregating story file Tier3Tokens.stories.jsx and just converts the individual components to story files
• splits T3 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
• recurses the T3 and T2 tokens to raw value
  • this is fine since the Figma style references the respective T1/T2 css property and not the raw value

Test Plan:

• Manually tested my changes, and here are the details:
  • T3 color tokens docs pages are affected and they show the suggested TW class and the Figma style
  • T2 color tokens that reference T1 colors recurse to the raw value
    

[jinlee93]

this util function recurses to the raw value

[jinlee93]

not sure why typing like this is necessary and not inferred 🤔

[codecov]

Codecov Report

Merging #1720 (6747ded) into next (d200312) will not change coverage.
The diff coverage is n/a.

@@           Coverage Diff           @@
##             next    #1720   +/-   ##
=======================================
  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

[github-actions]

size-limit report 📦

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

[booc0mtaco]

Now that we have quite a few different values in here, I think labeling them in the UI would be helpful. We could widen the text area for these, and put them in a table or something.

• CSS Variable name
• Figma Token name
• Tailwind Class name
• Hexadecimal value

[jinlee93]

Now that we have quite a few different values in here, I think labeling them in the UI would be helpful. We could widen the text area for these, and put them in a table or something.

• CSS Variable name
• Figma Token name
• Tailwind Class name
• Hexadecimal value

Updated to have a Table which also affected the T1 and T2 colors appropriately
Think that sticky header could be useful here haha
@booc0mtaco

[booc0mtaco]

@jinlee93 Looks great to me, and good call on sticky header :P