From 8ab0fc2d7f28655fb3f066976ee461de97d3c011 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Fri, 3 Sep 2021 14:43:21 +0100
Subject: [PATCH] Ensure defaults are set for custom theming and fix a few
 inconsistencies

---
 .../src/components/CustomThemeWrapper.svelte    | 10 ----------
 .../client/src/components/app/CardStat.svelte   |  2 +-
 packages/client/src/components/app/Icon.svelte  | 11 ++++++++++-
 packages/client/src/components/app/Link.svelte  |  2 +-
 .../src/components/app/SpectrumCard.svelte      |  2 +-
 packages/client/src/stores/theme.js             | 17 ++++++++++++++---
 6 files changed, 27 insertions(+), 17 deletions(-)

diff --git a/packages/client/src/components/CustomThemeWrapper.svelte b/packages/client/src/components/CustomThemeWrapper.svelte
index c96dfb4c79..423078b64d 100644
--- a/packages/client/src/components/CustomThemeWrapper.svelte
+++ b/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);
diff --git a/packages/client/src/components/app/CardStat.svelte b/packages/client/src/components/app/CardStat.svelte
index 71d5dae66c..989ece2826 100644
--- a/packages/client/src/components/app/CardStat.svelte
+++ b/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;
   }
 
diff --git a/packages/client/src/components/app/Icon.svelte b/packages/client/src/components/app/Icon.svelte
index de0b1921e6..70eb69ce1a 100644
--- a/packages/client/src/components/app/Icon.svelte
+++ b/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>
diff --git a/packages/client/src/components/app/Link.svelte b/packages/client/src/components/app/Link.svelte
index be1c8fa8f0..d948e11241 100644
--- a/packages/client/src/components/app/Link.svelte
+++ b/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;
diff --git a/packages/client/src/components/app/SpectrumCard.svelte b/packages/client/src/components/app/SpectrumCard.svelte
index 5a2596bd2e..bac0a81fb3 100644
--- a/packages/client/src/components/app/SpectrumCard.svelte
+++ b/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 {
diff --git a/packages/client/src/stores/theme.js b/packages/client/src/stores/theme.js
index 821c41ccc7..d8e01dfc23 100644
--- a/packages/client/src/stores/theme.js
+++ b/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"
-      const customTheme =
-        $builderStore.customTheme || $appStore.application?.customTheme || {}
+        $builderStore.theme || $appStore.application?.theme || defaultTheme
+      const customTheme = {
+        ...defaultCustomTheme,
+        ...($builderStore.customTheme || $appStore.application?.customTheme),
+      }
       let customThemeCss = ""
       Object.entries(customTheme).forEach(([key, value]) => {
         customThemeCss += `--${key}:${value};`