Color token page redesign - Githubissues

carbon-design-system / carbon-website

The website for the Carbon Design System.

https://www.carbondesignsystem.com

Apache License 2.0

277 stars 771 forks source link

Color token page redesign #2476

Open aagonzales opened 3 years ago

aagonzales commented 3 years ago

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.

core-tokens+components-sepc

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 commented 2 years ago

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.