fix: portal header color

resources/css/common.css

@@ -17,6 +17,7 @@
   --ls-error-color: var(--color-red-500);
   --ls-warning-color: var(--color-orange-500);
   --ls-success-color: var(--color-green-500);
+  --ls-highlight-color-default: var(--ls-secondary-background-color);
 }
 
 @media (prefers-color-scheme: dark) {

tldraw/apps/tldraw-logseq/src/lib/shapes/LogseqPortalShape.tsx

@@ -21,6 +21,7 @@ import { useCameraMovingRef } from '../../hooks/useCameraMoving'
 import { LogseqContext, type SearchResult } from '../logseq-context'
 import { BindingIndicator } from './BindingIndicator'
 import { CustomStyleProps, withClampedStyles } from './style-props'
+import { getComputedColor } from '../color'
 
 const HEADER_HEIGHT = 40
 const AUTO_RESIZE_THRESHOLD = 1
@@ -72,7 +73,10 @@ const LogseqTypeTag = ({
 
 const LogseqPortalShapeHeader = observer(
   ({ type, fill, children }: { type: 'P' | 'B'; fill: string; children: React.ReactNode }) => {
-    return <div className={`tl-logseq-portal-header tl-logseq-portal-header-${type === "P" ? "page" : "block"}`} style={{background: `var(--ls-highlight-color-${fill})`}}>{children}</div>
+    const bgColor = getComputedColor(fill, "background");
+
+    return <div className={`tl-logseq-portal-header tl-logseq-portal-header-${type === "P" ? "page" : "block"}`}
+      style={{background: type === "P" ? bgColor : `linear-gradient(0deg, var(--ls-highlight-color-${fill ? fill : "default"}), ${bgColor}`}}>{children}</div>
   }
 )
 
@@ -707,7 +711,7 @@ export class LogseqPortalShape extends TLBoxShape<LogseqPortalShapeProps> {
         ref={cpRefContainer}
         className="tl-logseq-cp-container"
         style={{
-          background: `var(--ls-highlight-color-${fill})`,
+          background: fill ? `var(--ls-highlight-color-${fill})` : "transparent",
           overflow: this.props.isAutoResizing ? 'visible' : 'auto',
         }}
       >