Update and add missing info and pages to the docs

[jcfilben]

Based on feedback from the community there are some gaps in our documentation and places where the docs are out of date and should be updated. Ideally we should have doc pages for each of the topics below. Some of these pages already exist and just need updated.

Tutorial

Status: Already exists, needs updated
Link: https://github.com/grommet/grommet-starter-new-app

• remove use of normalize color (we don't want to encourage people to use util functions we don't document)
• not critical but would be nice to upgrade to the latest version of packages (the project is using react 16 and grommet 2.0.1)

Theming

Status: Already exists, needs updated
Link: https://github.com/grommet/grommet/wiki/Grommet-v2-theming-documentation

We should include information on the following:

• Dark and Light mode
• How to extend the theme
• Styled components info

• How to use ThemeContext

Need to update the following:

• Change the format of the global theme properties, currently they are laid out in a chart with the entry, purpose, type, default value, and affected components. This chart is out of date, is difficult to maintain, and I think we can find a more effective way to share info about the available global theme properties.

Color properties

Status: Already exists, needs updated
Link: https://github.com/grommet/grommet/wiki/Color-Properties

• remove 'new' headings
• I think the information on this page could be more concise to increase readability.

Responsive behavior

Status: Doc doesn't exist

• Explanation on breakpoints

Internationalization

Status: Doc doesn't exist

We should include explanations on the following:

• RTL
• messages

[ShimiSun]

Looks great, I like the direction it is heading.

I've seen some questions about how to use styled components with grommet and it might be nice to share some best practices and examples on how the two works side by side.

I'm also thinking maybe an Accessibility focus page that can contain the grommet's best practices for accessibility or the grommet's roadmap for accessibility improvements. It can demonstrate our strong intent on improving accessibility.

One last thing that comes to my head is Testing, and maybe we'd like to add a page that lists our current testing mechanisms (snapshots jest/chromatic, axe-tests, ts testing...) most importantly list any current gaps in testing that will be open to ideas or contributions, areas such as Keyboard navigation, in-depth functional testing, any tsx gaps and more...

[jcfilben]

I've seen some questions about how to use styled components with grommet and it might be nice to share some best practices and examples on how the two works side by side.

Yes I agree. Right now I have styled components info organized under the theming page. But I considering if styled components should be a separate page.

I'm also thinking maybe an Accessibility focus page that can contain the grommet's best practices for accessibility or the grommet's roadmap for accessibility improvements. It can demonstrate our strong intent on improving accessibility.

Love this idea! I think it would be great to give a little info on accessibility within grommet, and possibly link to some external accessibility sources.

One last thing that comes to my head is Testing, and maybe we'd like to add a page that lists our current testing mechanisms (snapshots jest/chromatic, axe-tests, ts testing...) most importantly list any current gaps in testing that will be open to ideas or contributions, areas such as Keyboard navigation, in-depth functional testing, any tsx gaps and more...

I'm wondering if we should just add more to the testing section in the contributing guide? Or do you see value in having a separate page for testing?