Fix: preview colors

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}
       />
     )
   }

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

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;
 }