From d0997efadb55218a4908022df8881e938765415f Mon Sep 17 00:00:00 2001
From: kevmodrome <kevin@kevmodro.me>
Date: Wed, 9 Dec 2020 15:27:24 +0100
Subject: [PATCH] colorpicker for links in card component now works correctly

---
 .../userInterface/temporaryPanelStructure.js        |  8 ++++----
 packages/standard-components/src/Card.svelte        |  9 ++++-----
 .../standard-components/src/CardHorizontal.svelte   | 13 +++----------
 3 files changed, 11 insertions(+), 19 deletions(-)

diff --git a/packages/builder/src/components/userInterface/temporaryPanelStructure.js b/packages/builder/src/components/userInterface/temporaryPanelStructure.js
index cb64d163a2..fbbc54eec9 100644
--- a/packages/builder/src/components/userInterface/temporaryPanelStructure.js
+++ b/packages/builder/src/components/userInterface/temporaryPanelStructure.js
@@ -312,13 +312,13 @@ export default {
                 label: "Link Color",
                 key: "linkColor",
                 control: Colorpicker,
-                defaultValue: "#000"
+                defaultValue: "#000",
               },
               {
                 label: "Hover Color",
                 key: "linkHoverColor",
                 control: Colorpicker,
-                defaultValue: "#222"
+                defaultValue: "#222",
               },
               {
                 label: "Image Height",
@@ -387,13 +387,13 @@ export default {
                 label: "Link Color",
                 key: "linkColor",
                 control: Colorpicker,
-                defaultValue: "#000"
+                defaultValue: "#000",
               },
               {
                 label: "Hover Color",
                 key: "linkHoverColor",
                 control: Colorpicker,
-                defaultValue: "#222"
+                defaultValue: "#222",
               },
               {
                 label: "Card Width",
diff --git a/packages/standard-components/src/Card.svelte b/packages/standard-components/src/Card.svelte
index 013052f80c..e8248b7a01 100644
--- a/packages/standard-components/src/Card.svelte
+++ b/packages/standard-components/src/Card.svelte
@@ -17,8 +17,6 @@
   export let cardWidth
 
   $: cssVariables = {
-    linkColor,
-    linkHoverColor,
     imageHeight,
     cardWidth,
   }
@@ -29,12 +27,13 @@
 <div
   use:cssVars={cssVariables}
   class="container"
-  use:styleable={$component.styles}>
-  {#if showImage}<img class="image" src={imageUrl} alt="" />{/if}
+  use:styleable={$component.styles}
+  style="--cardWidth: {cardWidth}">
+  {#if showImage}<img style="--imageWidth: {imageWidth}; --imageHeight: {imageHeight}" class="image" src={imageUrl} alt="" />{/if}
   <div class="content">
     <h2 class="heading">{heading}</h2>
     <h4 class="text">{description}</h4>
-    <a href={linkUrl}>{linkText}</a>
+    <a style="--linkColor: {linkColor}; --linkHoverColor: {linkHoverColor}" href={linkUrl}>{linkText}</a>
   </div>
 </div>
 
diff --git a/packages/standard-components/src/CardHorizontal.svelte b/packages/standard-components/src/CardHorizontal.svelte
index 04386623ef..f0741fd7de 100644
--- a/packages/standard-components/src/CardHorizontal.svelte
+++ b/packages/standard-components/src/CardHorizontal.svelte
@@ -1,6 +1,5 @@
 <script>
   import { getContext } from "svelte"
-  import { cssVars } from "./helpers"
 
   const { styleable } = getContext("sdk")
   const component = getContext("component")
@@ -18,20 +17,14 @@
   export let imageWidth
   export let imageHeight
 
-  $: cssVariables = {
-    imageWidth,
-    cardWidth,
-    imageHeight,
-  }
-
   $: showImage = !!imageUrl
 </script>
 
 <div
   use:styleable={$component.styles}
-  use:cssVars={cssVariables}
-  class="container">
-  {#if showImage}<img class="image" src={imageUrl} alt="" />{/if}
+  class="container"
+  style="--cardWidth: {cardWidth}">
+  {#if showImage}<img style="--imageWidth: {imageWidth}; --imageHeight: {imageHeight}" class="image" src={imageUrl} alt="" />{/if}
   <div class="content">
     <main>
       <h2 class="heading">{heading}</h2>