From bcacb9efe6219242fa6347d7c57c74b7896ddfb8 Mon Sep 17 00:00:00 2001
From: Konstantinos Kaloutas <konstantinos@logseq.com>
Date: Wed, 2 Nov 2022 13:17:38 +0200
Subject: [PATCH] Fix: preview colors

---
 .../src/lib/shapes/HighlighterShape.tsx       |  6 ++---
 .../src/lib/shapes/PencilShape.tsx            |  2 +-
 tldraw/apps/tldraw-logseq/src/styles.css      | 24 ++++++++++---------
 3 files changed, 17 insertions(+), 15 deletions(-)

diff --git a/tldraw/apps/tldraw-logseq/src/lib/shapes/HighlighterShape.tsx b/tldraw/apps/tldraw-logseq/src/lib/shapes/HighlighterShape.tsx
index 383ede0641..71fe544578 100644
--- a/tldraw/apps/tldraw-logseq/src/lib/shapes/HighlighterShape.tsx
+++ b/tldraw/apps/tldraw-logseq/src/lib/shapes/HighlighterShape.tsx
@@ -73,18 +73,18 @@ export class HighlighterShape extends TLDrawShape<HighlighterShapeProps> {
   getShapeSVGJsx() {
     const {
       pointsPath,
-      props: { stroke, strokeWidth },
+      props: { stroke, strokeWidth, opacity },
     } = this
     return (
       <path
         d={pointsPath}
         strokeWidth={strokeWidth * 16}
-        stroke={stroke}
+        stroke={getComputedColor(stroke, 'stroke')}
         fill="none"
         pointerEvents="all"
         strokeLinejoin="round"
         strokeLinecap="round"
-        opacity={0.5}
+        opacity={opacity}
       />
     )
   }
diff --git a/tldraw/apps/tldraw-logseq/src/lib/shapes/PencilShape.tsx b/tldraw/apps/tldraw-logseq/src/lib/shapes/PencilShape.tsx
index 83b1884f5c..12c24037f9 100644
--- a/tldraw/apps/tldraw-logseq/src/lib/shapes/PencilShape.tsx
+++ b/tldraw/apps/tldraw-logseq/src/lib/shapes/PencilShape.tsx
@@ -122,7 +122,7 @@ export class PencilShape extends TLDrawShape<PencilShapeProps> {
   getShapeSVGJsx() {
     const {
       pointsPath,
-      props: { stroke, noFill, strokeWidth, strokeType },
+      props: { stroke, strokeWidth, strokeType },
     } = this
     return (
       <path
diff --git a/tldraw/apps/tldraw-logseq/src/styles.css b/tldraw/apps/tldraw-logseq/src/styles.css
index 985a6f3ee5..351a80db02 100644
--- a/tldraw/apps/tldraw-logseq/src/styles.css
+++ b/tldraw/apps/tldraw-logseq/src/styles.css
@@ -1,3 +1,16 @@
+:root {
+  --ls-wb-stroke-color-gray: var(--color-gray-500, gray);
+  --ls-wb-stroke-color-red: var(--color-red-500, red);
+  --ls-wb-stroke-color-yellow: var(--color-yellow-500, yellow);
+  --ls-wb-stroke-color-green: var(--color-green-500, green);
+  --ls-wb-stroke-color-blue: var(--color-blue-500, blue);
+  --ls-wb-stroke-color-purple: var(--color-purple-500, purple);
+  --ls-wb-stroke-color-pink: var(--color-pink-500, pink);
+  --ls-wb-stroke-color-default: var(--ls-secondary-border-color);
+  --ls-wb-text-color-default: var(--ls-secondary-text-color);
+  --ls-wb-background-color-default: var(--ls-tertiary-background-color);
+}
+
 .logseq-tldraw {
   --color-panel: var(--ls-tertiary-background-color);
   --color-panel-inverted: var(--ls-secondary-text-color);
@@ -11,17 +24,6 @@
   --shadow-medium: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
   --shadow-large: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
 
-  --ls-wb-stroke-color-gray: var(--color-gray-500, gray);
-  --ls-wb-stroke-color-red: var(--color-red-500, red);
-  --ls-wb-stroke-color-yellow: var(--color-yellow-500, yellow);
-  --ls-wb-stroke-color-green: var(--color-green-500, green);
-  --ls-wb-stroke-color-blue: var(--color-blue-500, blue);
-  --ls-wb-stroke-color-purple: var(--color-purple-500, purple);
-  --ls-wb-stroke-color-pink: var(--color-pink-500, pink);
-  --ls-wb-stroke-color-default: var(--ls-secondary-border-color);
-  --ls-wb-text-color-default: var(--ls-secondary-text-color);
-  --ls-wb-background-color-default: var(--ls-tertiary-background-color);
-
   backface-visibility: hidden;
 }