colorpicker for links in card component now works correctly

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",

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>
 

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>