[Layout foundations] Update script for extracted props on polaris.shopify.com

[laurkim]

For prop types that Extract/Exclude from our existing tokens, polaris.shopify.com shows the TypeScript definition (i.e., Extract<ColorsTokenName, 'surface' | 'surface-subdued'> instead of just 'surface' | 'surface-subdued') and not the expected strings parsed from tokens for some of our alpha layout components. Example screenshot of the AlphaCard background prop from staging site below.

We should explore ways to make this more legible by updating the get-props script.

[aveline]

We should also list all the available tokens rather than use a template literal that indicates including all tokens with a certain prefix.

rather than background-${string} it should display "background-hovered" | "background-pressed" | "background-selected"

[laurkim]

We should also list all the available tokens rather than use a template literal that indicates including all tokens with a certain prefix.

rather than background-${string} it should display "background-hovered" | "background-pressed" | "background-selected"

Yup, I had AlphaCard for the description screenshot because it was the first Alpha component in the list, but ideally these changes would apply to all of our alpha components. I think the alpha Box page highlights most clearly the cognitive overload because there are so many extracted tokens. Ideal state would be background? .. 'background' | 'background-pressed' | 'etc' for both AlphaCard, Box, and the rest.