Change color palette to green

[jacobtylerwalls]

Overview

Change to green color scheme.

Closes #93

Demo

Notes

• Like before, the tooltip color is outside the rest of the color scheme. I thought this was by design, so I chose a new green that seemed analogous to the old blue.
• The animated arcs also needed a new green, so I chose the actual color of US legal tender as a placeholder. I'm not committed to this choice.

Testing Instructions

• scripts/server

I also went ahead and deployed this so that the team could more easily have a look.

Checklist

• fixup! commits have been squashed
• CHANGELOG.md updated with summary of features or fixes, following Keep a Changelog guidelines
• README.md updated if necessary to reflect the changes
• CI passes after rebase

[github-actions]

🦙 MegaLinter status: ✅ SUCCESS

Descriptor	Linter	Files	Fixed	Errors	Elapsed time
✅ ACTION	actionlint	1		0	0.02s
✅ BASH	shfmt	11		0	0.01s
✅ JAVASCRIPT	eslint	43		0	3.5s
✅ JAVASCRIPT	prettier	43		0	2.38s
✅ JSON	eslint-plugin-jsonc	4		0	0.72s
✅ JSON	jsonlint	4		0	0.14s
✅ SPELL	misspell	88		0	0.09s
✅ TERRAFORM	terraform-fmt	5		0	0.23s
✅ YAML	yamllint	5		0	0.24s

See detailed report in MegaLinter reports

MegaLinter is graciously provided by

[travissouthard]

This is working well and looking nice. From browsing through it looks like the only component (beside AnimatedArcAndMap.tsx) that is still using it's own hardcoded colors is AnimatedMapLegend.tsx that doesn't look like it's being used by any other component and could be removed I think (unless you have plans for it).

The only other thing I noted was a note about color/key naming in the theming, but that decision may need to be between the devs and UX, but otherwise this is good to go.

[travissouthard]

I know this is a bit of an arbitrary choice but this does make a good color for this palette.

Also more emoticons in comments please

[travissouthard]

Centralizing the colors like this is an excellent choice and will absolutely make things easier to keep track of.

However, while I understand the use of the number keys coordinating with the numbers in the FIGMA design; Using semantic names may help devs more easily remember what is available and which colors are which (e.g. 'light', 'medium', 'dark')

[jacobtylerwalls]

Interesting! I'm only parroting what I'm used to from azavea/iow-boundary-tool. I can imagine with six or seven shades that 'medium' becomes less helpful (extra medium?) I'm wondering if you contemplated that on any other projects?

Chakra also guides toward numbers: https://chakra-ui.com/docs/styled-system/theme

[travissouthard]

I thought we made that choice in a recent Civic Apps project, but can't find the example I was looking for, but also for that we had 5 distinct colors with a light and dark variant, so that may not apply here since this is a monochromatic gradient.

[jacobtylerwalls]

Good spot, that legend was completely obviated by f38746d, so I'll remove it.