Ensure defaults are set for custom theming and fix a few inconsistencies

packages/client/src/components/CustomThemeWrapper.svelte

@@ -13,16 +13,6 @@
 
   /* Themes */
   div {
-    /* General */
-    --spectrum-global-color-blue-600: var(--primaryColor);
-    --spectrum-global-color-blue-700: var(--primaryColor);
-    --spectrum-global-color-static-blue-600: var(--primaryColor);
-    --spectrum-global-color-static-blue-700: var(--primaryColor);
-    --spectrum-global-color-blue-400: var(--primaryColorHover);
-    --spectrum-global-color-blue-500: var(--primaryColorHover);
-    --spectrum-global-color-static-blue-400: var(--primaryColorHover);
-    --spectrum-global-color-static-blue-500: var(--primaryColorHover);
-
     /*  Buttons */
     --spectrum-semantic-cta-color-background-default: var(--primaryColor);
     --spectrum-semantic-cta-color-background-hover: var(--primaryColorHover);

packages/client/src/components/app/CardStat.svelte

@@ -36,7 +36,7 @@
     font-size: 2rem;
     font-weight: 600;
     margin: 0 1.5rem 1.5rem 1.5rem;
-    color: var(--spectrum-global-color-blue-600);
+    color: var(--spectrum-link-primary-m-text-color);
     white-space: pre-wrap;
   }
 

packages/client/src/components/app/Icon.svelte

@@ -20,7 +20,12 @@
 </script>
 
 {#if icon}
-  <i use:styleable={styles} class="{icon} {size}" on:click={onClick} />
+  <i
+    use:styleable={styles}
+    class="{icon} {size}"
+    on:click={onClick}
+    class:hoverable={onClick != null}
+  />
 {:else if $builderStore.inBuilder}
   <div use:styleable={styles}>
     <Placeholder />
@@ -31,4 +36,8 @@
   div {
     font-style: italic;
   }
+  .hoverable:hover {
+    color: var(--spectrum-alias-icon-color-selected-hover) !important;
+    cursor: pointer;
+  }
 </style>

packages/client/src/components/app/Link.svelte

@@ -78,7 +78,7 @@
     transition: color 130ms ease-in-out;
   }
   a:hover {
-    color: var(--spectrum-global-color-blue-600) !important;
+    color: var(--spectrum-link-primary-m-text-color-hover) !important;
   }
   .placeholder {
     font-style: italic;

packages/client/src/components/app/SpectrumCard.svelte

@@ -96,7 +96,7 @@
     color: var(--spectrum-alias-text-color);
   }
   a:hover {
-    color: var(--spectrum-global-color-blue-600);
+    color: var(--spectrum-link-primary-m-text-color-hover);
   }
 
   .horizontal .spectrum-Card-coverPhoto {

packages/client/src/stores/theme.js

@@ -2,14 +2,25 @@ import { derived } from "svelte/store"
 import { appStore } from "./app"
 import { builderStore } from "./builder"
 
+// This is the good old acorn bug where having the word "g l o b a l" makes it
+// think that this is not ES6 compatible and starts throwing errors when using
+// optional chaining. Piss off acorn.
+const defaultTheme = "spectrum--light"
+const defaultCustomTheme = {
+  primaryColor: "var(--spectrum-glo" + "bal-color-blue-600)",
+  primaryColorHover: "var(--spectrum-glo" + "bal-color-blue-500)",
+}
+
 const createThemeStore = () => {
   const store = derived(
     [builderStore, appStore],
     ([$builderStore, $appStore]) => {
       const theme =
-        $builderStore.theme || $appStore.application?.theme || "spectrum--light"
+        $builderStore.theme || $appStore.application?.theme || defaultTheme
-      const customTheme =
+      const customTheme = {
-        $builderStore.customTheme || $appStore.application?.customTheme || {}
+        ...defaultCustomTheme,
+        ...($builderStore.customTheme || $appStore.application?.customTheme),
+      }
       let customThemeCss = ""
       Object.entries(customTheme).forEach(([key, value]) => {
         customThemeCss += `--${key}:${value};`