Improve CSS Variables and Theming

Currently the CSS variables are un-scoped, and don't really follow a strict naming convention. We could really improve this part of the project with a few enhancements:

- Add a scope. Maybe `devtools-ds`? This would stop really generic variable names like `textColor` from colliding with variables in the page. We could look at scopes for other packages for ideas.
- Add variables to the docs. Once we have a scope we can make it available as a "theming" API for components. This is a _bit_ of a can of worms since variable name changes are now breaking API changes.
- Improve variable names. Just make sure they are consistent and make sense, since they'll become an API.

Open to thoughts and suggestions.