Color token page redesign

[aagonzales]

Update guidelines/color/usage page

• [ ] Tokens and content generated from element preview
• [ ] New table structure
• [ ] New inline dropdown filters

Assets:

• Element preview: https://carbon-elements.netlify.app/themes/examples/preview-v11/
• Sketch file: https://ibm.box.com/s/yrcji9bhdxegagwt3z7879jiovv49bxf
• Fluid input spec: https://github.com/carbon-design-system/carbon/issues/5416

Desktop

• Two sections for core and component tokens.
• 4 Columns of content: Token, role, property, and value.
• 4 Filters: Theme, token group, token set, and property.

Open filter dropdown

Using the condensed list view in fluid dropdown.

Mobile

• Two sections for and component tokens
• Columns collapse into single card view with em dash separating column content (much like as is mobile view)
• Filters: only the theme filter is available on mobile, other filters are hidden due to space efficiency.

[aagonzales]

Back-up plan for no fluid inputs

If fluid inputs are not available to build with then use the default dropdowns instead, like has been done with the live demos.