== Background/Goal
This epic is for improvements to our Codex demo pages, with the goal of making them clear and consistent for use by the community.
===Visual design/user experience improvements:
[x] All elements included in the content section of the //Components //demo page (e.g., control tables) should take over all the available space. This is in order to make all content properly aligned vertically.
[x] The demo site's font stacks should match those of the system (documented in the design tokens):
font family sans: `-apple-system, 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Lato', 'Helvetica', 'Arial', sans-serif` (@font-family-sans)
font family serif: `'Linux Libertine', 'Georgia', 'Times', serif` (@font-family-serif)
[x] The LTR/RTL selector is a perfect use case for a future ToggleButton group component and should be replaced by it whenever possible, until then it should use ToggleButton components instead of normal Button (T305278)
{F35009891 width=33%}
[x] The show code/hide code button should be a ToggleButton
[] Improve the structure of token documentation pages (T302037)
[] Improve the design of configurable component demos (T295505)
[] Add configurable demo for all Codex components T321891
[] Design a theme selector for the component demos (T305271)
[] Improve List of Icons (T301038)
[x] Reorder left menu sections (T305353) – with new site architecture the main menu items got reordered
[x] Improve the LTR/RTL selector (T309589)
[] Improve spacing token swatches (T310136)
[-] Increase the padding in the Codex demo box (T323684)
[x] Replace icon in "Features > Icons" (T323753)
[] Card with Thumbnail in the "Resources" section (T323761)
[] Improve the visual hierarchy between sections in Codex (T325055)
[] Use message component in TIP and WARNING notes in Codex (T325063)
[] Use a quiet toggle button for "Show code" button in Codex demos (T322459)
[] {T325326}
---
=== Design specs
You can view some of the solutions proposed in [[ https://www.figma.com/file/4IDX6oVdTpuzFu48irscKL/Codex-improvements---T304062?node-id=1042%3A28424 | this Figma file ]].
You can also view the improvements in these prototypes:
- [[ https://www.figma.com/proto/4IDX6oVdTpuzFu48irscKL/Codex-improvements---T304062?page-id=1013%3A11040&node-id=1042%3A28424&viewport=393%2C40%2C0.15&scaling=min-zoom&starting-point-node-id=1042%3A28424&show-proto-sidebar=1 | Desktop prototype ]]
- [[ https://www.figma.com/proto/4IDX6oVdTpuzFu48irscKL/Codex-improvements---T304062?page-id=1013%3A11040&node-id=1044%3A31532&viewport=393%2C40%2C0.15&scaling=min-zoom&starting-point-node-id=1044%3A31532&show-proto-sidebar=1 | Mobile prototype ]]