fix: theme adaptive default colors

tldraw/apps/tldraw-logseq/src/components/ContextBar/contextBarActionFactory.tsx

@@ -48,7 +48,7 @@ const contextBarActionMapping = new Map<ContextBarActionType, React.FC>()
 
 type ShapeType = Shape['props']['type']
 
-const shapeMapping: Partial<Record<ShapeType, ContextBarActionType[]>> = {
+export const shapeMapping: Partial<Record<ShapeType, ContextBarActionType[]>> = {
   'logseq-portal': ['Edit', 'LogseqPortalViewMode', 'ScaleLevel', 'OpenPage', 'AutoResizing'],
   youtube: ['YoutubeLink'],
   box: ['Swatch', 'NoFill', 'StrokeType'],
@@ -61,9 +61,9 @@ const shapeMapping: Partial<Record<ShapeType, ContextBarActionType[]>> = {
   html: ['ScaleLevel', 'AutoResizing'],
 }
 
-export const noStrokeShapes = Object.entries(shapeMapping)
+export const withFillShapes = Object.entries(shapeMapping)
   .filter(([key, types]) => {
-    return !types.includes('NoFill') && types.includes('Swatch')
+    return types.includes('NoFill') && types.includes('Swatch')
   })
   .map(([key]) => key) as ShapeType[]
 
@@ -302,7 +302,7 @@ const SwatchAction = observer(() => {
     let latestValue = ''
     const handler: React.ChangeEventHandler<HTMLInputElement> = e => {
       shapes.forEach(s => {
-        s.update({ fill: latestValue })
+        s.update({ fill: latestValue, stroke: latestValue })
       })
       app.persist(true)
     }

tldraw/apps/tldraw-logseq/src/lib/color.ts

@@ -0,0 +1,25 @@
+let melm: any
+
+function getMeasurementDiv() {
+  // A div used for measurement
+  document.getElementById('__colorMeasure')?.remove()
+
+  const div = document.createElement('div')
+  div.id = '__colorMeasure'
+  div.tabIndex = -1
+
+  document.body.appendChild(div)
+  return div
+}
+
+export function getComputedColor(color: string) {
+  if (color?.toString().startsWith('var')) {
+    const varName = /var\((.*)\)/.exec(color.toString())?.[1]
+    if (varName) {
+      const [v, d] = varName.split(',').map(s => s.trim())
+      return getComputedStyle(getMeasurementDiv()).getPropertyValue(v).trim() ?? d ?? '#000'
+    }
+  }
+
+  return color
+}

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

@@ -21,7 +21,7 @@ export class BoxShape extends TLBoxShape<BoxShapeProps> {
     size: [100, 100],
     borderRadius: 2,
     stroke: '#000000',
-    fill: '#ffffff',
+    fill: 'var(--ls-secondary-background-color)',
     noFill: false,
     strokeType: 'line',
     strokeWidth: 2,

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

@@ -18,7 +18,7 @@ export class DotShape extends TLDotShape<DotShapeProps> {
     point: [0, 0],
     radius: 4,
     stroke: '#000000',
-    fill: '#ffffff',
+    fill: 'var(--ls-secondary-background-color)',
     noFill: false,
     strokeType: 'line',
     strokeWidth: 2,

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

@@ -20,7 +20,7 @@ export class EllipseShape extends TLEllipseShape<EllipseShapeProps> {
     point: [0, 0],
     size: [100, 100],
     stroke: '#000000',
-    fill: '#ffffff',
+    fill: 'var(--ls-secondary-background-color)',
     noFill: false,
     strokeType: 'line',
     strokeWidth: 2,

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

@@ -31,7 +31,7 @@ export class LineShape extends TLLineShape<LineShapeProps> {
       end: { id: 'end', canBind: true, point: [1, 1] },
     },
     stroke: 'var(--ls-primary-text-color, #000)',
-    fill: '#ffffff',
+    fill: 'var(--ls-secondary-background-color)',
     noFill: true,
     strokeType: 'line',
     strokeWidth: 1,

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

@@ -22,7 +22,7 @@ export class PolygonShape extends TLPolygonShape<PolygonShapeProps> {
     ratio: 1,
     isFlippedY: false,
     stroke: '#000000',
-    fill: '#ffffff',
+    fill: 'var(--ls-secondary-background-color)',
     noFill: false,
     strokeType: 'line',
     strokeWidth: 2,

tldraw/apps/tldraw-logseq/src/lib/shapes/style-props.tsx

@@ -1,6 +1,7 @@
 import { darken } from 'polished'
-import { noStrokeShapes } from '~components/ContextBar/contextBarActionFactory'
+import { withFillShapes } from '~components/ContextBar/contextBarActionFactory'
 import type { Shape } from '~lib'
+import { getComputedColor } from '~lib/color'
 
 export interface CustomStyleProps {
   stroke: string
@@ -15,11 +16,11 @@ export function withClampedStyles<P>(self: Shape, props: P & Partial<CustomStyle
   if (props.strokeWidth !== undefined) props.strokeWidth = Math.max(props.strokeWidth, 1)
   if (props.opacity !== undefined) props.opacity = Math.min(1, Math.max(props.opacity, 0))
 
-  const fill = props.fill ?? (self.props as any).fill
-  if (fill !== undefined) {
-    const strokeOnly = noStrokeShapes.includes(self.props.type)
+  let fill = props.fill ?? (self.props as any).fill
+  if (fill !== undefined && !props.noFill && withFillShapes.includes(self.props.type)) {
+    fill = getComputedColor(fill)
     const strokeColor = darken(0.3, fill)
-    props.stroke = strokeOnly ? fill : strokeColor
+    props.stroke = strokeColor
   }
 
   return props