From d97c4b563209a10f24d1bfaa0de039adff87751f Mon Sep 17 00:00:00 2001
From: fundon <fundon@pindash.io>
Date: Tue, 31 Dec 2024 11:54:13 +0000
Subject: [PATCH] fix(editor): wrong style of mindmap in dark mode (#9462)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

<div class='graphite__hidden'>
          <div>🎥 Video uploaded on Graphite:</div>
            <a href="https://app.graphite.dev/media/video/8ypiIKZXudF5a0tIgIzf/87aa060a-12c3-46dc-85fd-28980ba5b2bd.mov">
              <img src="https://app.graphite.dev/api/v1/graphite/video/thumbnail/8ypiIKZXudF5a0tIgIzf/87aa060a-12c3-46dc-85fd-28980ba5b2bd.mov">
            </a>
          </div>
<video src="https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/8ypiIKZXudF5a0tIgIzf/87aa060a-12c3-46dc-85fd-28980ba5b2bd.mov">Screen Recording 2024-12-31 at 18.05.36.mov</video>
---
 .../src/renderer/elements/shape/utils.ts      |  2 +-
 .../model/src/elements/mindmap/style.ts       | 35 ++++++++++---------
 .../affine/model/src/elements/shape/shape.ts  |  4 +--
 3 files changed, 21 insertions(+), 20 deletions(-)

diff --git a/blocksuite/affine/block-surface/src/renderer/elements/shape/utils.ts b/blocksuite/affine/block-surface/src/renderer/elements/shape/utils.ts
index 2bafcdf2f81a7..781863522a63b 100644
--- a/blocksuite/affine/block-surface/src/renderer/elements/shape/utils.ts
+++ b/blocksuite/affine/block-surface/src/renderer/elements/shape/utils.ts
@@ -80,7 +80,7 @@ export function drawGeneralShape(
       ctx.shadowOffsetY = offsetY * scale;
     }
 
-    ctx.shadowColor = renderer.getPropertyValue(color);
+    ctx.shadowColor = renderer.getColorValue(color, undefined, true);
   }
 
   ctx.stroke();
diff --git a/blocksuite/affine/model/src/elements/mindmap/style.ts b/blocksuite/affine/model/src/elements/mindmap/style.ts
index f9982acb28668..048e3cbc19eda 100644
--- a/blocksuite/affine/model/src/elements/mindmap/style.ts
+++ b/blocksuite/affine/model/src/elements/mindmap/style.ts
@@ -49,7 +49,7 @@ export type NodeStyle = {
     blur: number;
     offsetX: number;
     offsetY: number;
-    color: string;
+    color: Color;
   };
 };
 
@@ -199,7 +199,7 @@ export class StyleTwo extends MindmapStyleGetter {
     textResizing: TextResizing.AUTO_WIDTH_AND_HEIGHT,
 
     strokeWidth: 3,
-    strokeColor: DefaultTheme.pureBlack,
+    strokeColor: DefaultTheme.black,
 
     fontFamily: FontFamily.Poppins,
     fontSize: 18,
@@ -215,7 +215,7 @@ export class StyleTwo extends MindmapStyleGetter {
       blur: 0,
       offsetX: 3,
       offsetY: 3,
-      color: DefaultTheme.pureBlack,
+      color: DefaultTheme.black,
     },
   };
 
@@ -231,7 +231,7 @@ export class StyleTwo extends MindmapStyleGetter {
     return {
       connector: {
         strokeStyle: StrokeStyle.Solid,
-        stroke: DefaultTheme.pureBlack,
+        stroke: DefaultTheme.black,
         strokeWidth: 3,
 
         mode: ConnectorMode.Orthogonal,
@@ -242,9 +242,9 @@ export class StyleTwo extends MindmapStyleGetter {
         radius: 0.5,
 
         filled: true,
-        fillColor: DefaultTheme.pureWhite,
+        fillColor: DefaultTheme.white,
 
-        strokeColor: DefaultTheme.pureBlack,
+        strokeColor: DefaultTheme.black,
         strokeWidth: 3,
       },
       expandButton: {
@@ -253,14 +253,14 @@ export class StyleTwo extends MindmapStyleGetter {
         radius: 2,
 
         filled: true,
-        fillColor: DefaultTheme.pureBlack,
+        fillColor: DefaultTheme.black,
 
         padding: [4, 0],
 
-        strokeColor: DefaultTheme.pureBlack,
+        strokeColor: DefaultTheme.black,
         strokeWidth: 0,
 
-        color: DefaultTheme.pureWhite,
+        color: DefaultTheme.white,
 
         fontFamily: FontFamily.Inter,
         fontWeight: FontWeight.Bold,
@@ -272,7 +272,7 @@ export class StyleTwo extends MindmapStyleGetter {
         textResizing: TextResizing.AUTO_WIDTH_AND_HEIGHT,
 
         strokeWidth: 3,
-        strokeColor: DefaultTheme.pureBlack,
+        strokeColor: DefaultTheme.black,
 
         fontFamily: FontFamily.Poppins,
         fontSize: 16,
@@ -288,7 +288,7 @@ export class StyleTwo extends MindmapStyleGetter {
           blur: 0,
           offsetX: 3,
           offsetY: 3,
-          color: DefaultTheme.pureBlack,
+          color: DefaultTheme.black,
         },
       },
     };
@@ -300,7 +300,7 @@ export class StyleThree extends MindmapStyleGetter {
   private readonly _strokeColor = [
     DefaultTheme.StrokeColorMap.Yellow,
     DefaultTheme.StrokeColorMap.Green,
-    DefaultTheme.StrokeColorMap.Teal,
+    '#5cc7ba',
   ];
 
   readonly root = {
@@ -335,6 +335,7 @@ export class StyleThree extends MindmapStyleGetter {
 
   override getNodeStyle(_: MindmapNode, path: number[]) {
     const strokeColor = this._getColor(path.length - 2);
+    const dotColor = this._getColor(path.length - 1);
 
     return {
       node: {
@@ -343,7 +344,7 @@ export class StyleThree extends MindmapStyleGetter {
         textResizing: TextResizing.AUTO_WIDTH_AND_HEIGHT,
 
         strokeWidth: 2,
-        strokeColor: strokeColor,
+        strokeColor,
 
         fontFamily: FontFamily.Poppins,
         fontSize: 16,
@@ -370,7 +371,7 @@ export class StyleThree extends MindmapStyleGetter {
         filled: true,
         fillColor: DefaultTheme.pureWhite,
 
-        strokeColor: '#3cbc36',
+        strokeColor: dotColor,
         strokeWidth: 3,
       },
       expandButton: {
@@ -379,14 +380,14 @@ export class StyleThree extends MindmapStyleGetter {
         radius: 8,
 
         filled: true,
-        fillColor: '#3cbc36',
+        fillColor: dotColor,
 
         padding: [4, 0],
 
-        strokeColor: '#3cbc36',
+        strokeColor: dotColor,
         strokeWidth: 0,
 
-        color: '#fff',
+        color: DefaultTheme.pureWhite,
 
         fontFamily: FontFamily.Inter,
         fontWeight: FontWeight.Bold,
diff --git a/blocksuite/affine/model/src/elements/shape/shape.ts b/blocksuite/affine/model/src/elements/shape/shape.ts
index f320ca0019a5c..36b216cf9f9f4 100644
--- a/blocksuite/affine/model/src/elements/shape/shape.ts
+++ b/blocksuite/affine/model/src/elements/shape/shape.ts
@@ -148,7 +148,7 @@ export class ShapeElementModel extends GfxPrimitiveElementModel<ShapeProps> {
     blur: number;
     offsetX: number;
     offsetY: number;
-    color: string;
+    color: Color;
   } | null = null;
 
   @field()
@@ -234,7 +234,7 @@ export class LocalShapeElementModel extends GfxLocalElementModel {
     blur: number;
     offsetX: number;
     offsetY: number;
-    color: string;
+    color: Color;
   } | null = null;
 
   @prop()