Draft: rough-ish draft of proposed color theme changes (#2067)

* color experimentation and troubleshooting

* create color scheme, assign colors, more ant overrides

* fun selection color

* Prettified Code!

* Correctly import opensans

* Prettified Code!

* Organize+standardize colors/names and update the app to use them

* Prettified Code!

* Use css var references instead of resolving value of vars in css files

* Prettified Code!

Co-authored-by: gingervitis <gingervitis@users.noreply.github.com>
Co-authored-by: Gabe Kangas <gabek@real-ity.com>
Co-authored-by: gabek <gabek@users.noreply.github.com>

web/components/action-buttons/ActionButton.tsx

@@ -6,10 +6,15 @@ import s from './ActionButton.module.scss';
 
 interface Props {
   action: ExternalAction;
+  primary?: boolean;
 }
+ActionButton.defaultProps = {
+  primary: false,
+};
 
 export default function ActionButton({
   action: { url, title, description, icon, color, openExternally },
+  primary = false,
 }: Props) {
   const [showModal, setShowModal] = useState(false);
 
@@ -24,7 +29,7 @@ export default function ActionButton({
   return (
     <>
       <Button
-        type="primary"
+        type={primary ? 'primary' : 'default'}
         className={`${s.button}`}
         onClick={buttonClicked}
         style={{ backgroundColor: color }}