Implement and document CSS-in-JS best practices for CIVIC

[jaronheard]

From our Front-End Charter, one of our tactical goals is to determine CSS-in-JS best practices

We'd like to have consistent pattern of how we use CSS-in-JS across CIVIC, so that CIVIC developers, from newcomers to long-time contributors, have patterns to follow.

The items below document some of the components of this epic. If this is an epic that someone wants to take ownership over, please feel empowered to do that!

Complete emotion 10 upgrade:

• Remove other libraries, e.g. styled-components Replace styled-components with emotion #546

Known current issues:

#433 Fixes all of these:

• Main shared css usage is global.styles.css, which is not using Emotion.

Note -- notify elections once removed

• No common place for shared styling

• No common place for colors (currently stored in the VictoryTheme for data visualization components here

• No consistent pattern for passing custom styling to components (could be extended to Implement theming in component library #433)

After Demo Day:

• Replace className and cx usage with css prop Replace emotion className and cx usage with css prop #548
• Determine and document best practices for using emotion