chore: color system enhancements

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

@@ -331,7 +331,7 @@ const SwatchAction = observer(() => {
     BoxShape | PolygonShape | EllipseShape | LineShape | PencilShape | TextShape
   >(app.selectedShapesArray, 'Swatch')
 
-  const handleSetColor = React.useCallback((color: Color) => {
+  const handleSetColor = React.useCallback((color: string) => {
     shapes.forEach(s => {
       s.update({ fill: color, stroke: color })
     })

tldraw/apps/tldraw-logseq/src/components/inputs/ColorInput.tsx

@@ -3,16 +3,18 @@ import * as Popover from '@radix-ui/react-popover';
 import { TablerIcon } from '../icons'
 import { Color } from '@tldraw/core'
 interface ColorInputProps extends React.InputHTMLAttributes<HTMLButtonElement> {
-  value: Color
-  setColor: (value: Color) => void
+  value: string
+  setColor: (value: string) => void
 }
 
 export function ColorInput({ value, setColor, ...rest }: ColorInputProps) {
   const ref = React.useRef<HTMLDivElement>(null)
 
-  function renderColor(color: Color) {
+  function renderColor(color: string) {
     return color ?
-      <div className={`tl-color-bg bg-${color}-500`}></div> :
+      <div className="tl-color-bg" style={{backgroundColor: color}}>
+        <div className={`w-full h-full bg-${color}-500`}></div>
+      </div> :
       <div className={"tl-color-bg"}><TablerIcon name="color-swatch" /></div>
   }
 
@@ -32,7 +34,7 @@ export function ColorInput({ value, setColor, ...rest }: ColorInputProps) {
           <div className={"tl-color-palette"}>
             {Object.values(Color).map(color =>
               <button
-                className={`tl-color-drip  m-1${color === value ? " active" : ""}`}
+                className={`tl-color-drip m-1${color === value ? " active" : ""}`}
                 onClick={()=>setColor(color)}
               >
                 {renderColor(color)}

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

@@ -1,3 +1,5 @@
+import { Color } from '@tldraw/core'
+
 let melm: any
 
 function getMeasurementDiv() {
@@ -12,13 +14,9 @@ function getMeasurementDiv() {
   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'
-    }
+export function getComputedColor(color: string, type: string): string {
+  if (Object.values(Color).includes(color)) {
+    return `var(--ls-wb-${type}-color-${color ? color : "default"})`;
   }
 
   return color

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

@@ -4,6 +4,7 @@ import { TLBoxShape, TLBoxShapeProps } from '@tldraw/core'
 import { observer } from 'mobx-react-lite'
 import { CustomStyleProps, withClampedStyles } from './style-props'
 import { BindingIndicator } from './BindingIndicator'
+import { getComputedColor } from '../color'
 
 export interface BoxShapeProps extends TLBoxShapeProps, CustomStyleProps {
   borderRadius: number
@@ -20,7 +21,7 @@ export class BoxShape extends TLBoxShape<BoxShapeProps> {
     point: [0, 0],
     size: [100, 100],
     borderRadius: 2,
-    stroke: '#000000',
+    stroke: '',
     fill: '',
     noFill: false,
     strokeType: 'line',
@@ -63,9 +64,9 @@ export class BoxShape extends TLBoxShape<BoxShapeProps> {
           width={Math.max(0.01, w - strokeWidth)}
           height={Math.max(0.01, h - strokeWidth)}
           strokeWidth={strokeWidth}
-          stroke={noFill ? fill : stroke}
+          stroke={getComputedColor(stroke, "stroke")}
           strokeDasharray={strokeType === 'dashed' ? '8 2' : undefined}
-          fill={noFill ? 'none' : fill ? `var(--color-${fill}-500)` : "var(--ls-primary-background-color)"}
+          fill={noFill ? 'none' : getComputedColor(fill, "background")}
         />
       </SVGContainer>
     )

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

@@ -1,8 +1,9 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { TLEllipseShapeProps, TLEllipseShape } from '@tldraw/core'
+import { TLEllipseShapeProps, TLEllipseShape, Color } from '@tldraw/core'
 import { SVGContainer, TLComponentProps } from '@tldraw/react'
 import { observer } from 'mobx-react-lite'
 import { CustomStyleProps, withClampedStyles } from './style-props'
+import { getComputedColor } from '../color'
 
 export interface EllipseShapeProps extends TLEllipseShapeProps, CustomStyleProps {
   type: 'ellipse'
@@ -18,8 +19,8 @@ export class EllipseShape extends TLEllipseShape<EllipseShapeProps> {
     type: 'ellipse',
     point: [0, 0],
     size: [100, 100],
-    stroke: '#000000',
-    fill: 'var(--ls-secondary-background-color)',
+    stroke: '',
+    fill: '',
     noFill: false,
     strokeType: 'line',
     strokeWidth: 2,
@@ -51,9 +52,9 @@ export class EllipseShape extends TLEllipseShape<EllipseShapeProps> {
           rx={Math.max(0.01, (w - strokeWidth) / 2)}
           ry={Math.max(0.01, (h - strokeWidth) / 2)}
           strokeWidth={strokeWidth}
-          stroke={noFill ? fill : stroke}
+          stroke={getComputedColor(stroke, "stroke")}
           strokeDasharray={strokeType === 'dashed' ? '8 2' : undefined}
-          fill={noFill ? 'none' : fill}
+          fill={noFill ? 'none' : getComputedColor(fill, "background")}
         />
       </SVGContainer>
     )
@@ -105,9 +106,9 @@ export class EllipseShape extends TLEllipseShape<EllipseShapeProps> {
           rx={Math.max(0.01, (w - strokeWidth) / 2)}
           ry={Math.max(0.01, (h - strokeWidth) / 2)}
           strokeWidth={strokeWidth}
-          stroke={noFill ? fill : stroke}
+          stroke={getComputedColor(stroke, "stroke")}
           strokeDasharray={strokeType === 'dashed' ? '8 2' : undefined}
-          fill={noFill ? 'none' : fill}
+          fill={noFill ? 'none' : getComputedColor(fill, "background")}
         />
       </g>
     )

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

@@ -4,6 +4,7 @@ import { SVGContainer, TLComponentProps } from '@tldraw/react'
 import { observer } from 'mobx-react-lite'
 import { computed, makeObservable } from 'mobx'
 import { CustomStyleProps, withClampedStyles } from './style-props'
+import { getComputedColor } from '../color'
 
 export interface HighlighterShapeProps extends TLDrawShapeProps, CustomStyleProps {
   type: 'highlighter'
@@ -25,11 +26,11 @@ export class HighlighterShape extends TLDrawShape<HighlighterShapeProps> {
     points: [],
     isComplete: false,
     stroke: '',
-    fill: '#ffcc00',
+    fill: '',
     noFill: true,
     strokeType: 'line',
     strokeWidth: 2,
-    opacity: 1,
+    opacity: 0.5,
   }
 
   @computed get pointsPath() {
@@ -44,16 +45,16 @@ export class HighlighterShape extends TLDrawShape<HighlighterShapeProps> {
     } = this
 
     return (
-      <SVGContainer {...events} opacity={isErasing ? 0.2 : opacity}>
+      <SVGContainer {...events} opacity={isErasing ? 0.2 : 1}>
         <path
           d={pointsPath}
           strokeWidth={strokeWidth * 16}
-          stroke={stroke ? `var(--color-${stroke}-500)` : "var(--ls-secondary-background-color)"}
+          stroke={getComputedColor(stroke, "stroke")}
           fill="none"
           pointerEvents="all"
           strokeLinejoin="round"
           strokeLinecap="round"
-          opacity={0.5}
+          opacity={opacity}
         />
       </SVGContainer>
     )

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

@@ -10,6 +10,7 @@ import { CustomStyleProps, withClampedStyles } from './style-props'
 import { getTextLabelSize } from '@tldraw/core'
 import { LabelMask } from './text/LabelMask'
 import { TextLabel } from './text/TextLabel'
+import { getComputedColor } from '../color'
 
 interface LineShapeProps extends CustomStyleProps, TLLineShapeProps {
   type: 'line'
@@ -76,7 +77,7 @@ export class LineShape extends TLLineShape<LineShapeProps> {
         <TextLabel
           font={font}
           text={label}
-          color={stroke}
+          color={getComputedColor(stroke, "text")}
           offsetX={offset[0]}
           offsetY={offset[1]}
           scale={scale}
@@ -161,7 +162,7 @@ export class LineShape extends TLLineShape<LineShapeProps> {
       <>
         <Arrow
           style={{
-            stroke: stroke ? `var(--color-${stroke}-500)` : "var(--ls-primary-text-color, #000)",
+            stroke: getComputedColor(stroke, "stroke"),
             fill,
             strokeWidth,
             strokeType,
@@ -181,8 +182,8 @@ export class LineShape extends TLLineShape<LineShapeProps> {
               fontSize={20}
               transform={`translate(${midPoint[0]}, ${midPoint[1]})`}
               textAnchor="middle"
-              stroke={stroke}
-              fill={stroke}
+              fill={getComputedColor(stroke, "text")}
+              stroke={getComputedColor(stroke, "text")}
             >
               {label}
             </text>

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

@@ -5,6 +5,7 @@ import { SVGContainer, TLComponentProps } from '@tldraw/react'
 import { observer } from 'mobx-react-lite'
 import { computed, makeObservable } from 'mobx'
 import { CustomStyleProps, withClampedStyles } from './style-props'
+import { getComputedColor } from '../color'
 
 export interface PenShapeProps extends TLDrawShapeProps, CustomStyleProps {
   type: 'pen'
@@ -25,8 +26,8 @@ export class PenShape extends TLDrawShape<PenShapeProps> {
     point: [0, 0],
     points: [],
     isComplete: false,
-    stroke: '#000000',
-    fill: '#ffffff',
+    stroke: '',
+    fill: 's',
     noFill: false,
     strokeType: 'line',
     strokeWidth: 2,
@@ -56,8 +57,8 @@ export class PenShape extends TLDrawShape<PenShapeProps> {
         <path
           d={pointsPath}
           strokeWidth={strokeWidth}
-          stroke={stroke}
-          fill={stroke}
+          stroke={getComputedColor(stroke, "stroke")}
+          fill={getComputedColor(stroke, "stroke")}
           pointerEvents="all"
         />
       </SVGContainer>

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

@@ -11,6 +11,7 @@ import getStroke, {
   StrokePoint,
 } from 'perfect-freehand'
 import { CustomStyleProps, withClampedStyles } from './style-props'
+import { getComputedColor } from '../color'
 
 export interface PencilShapeProps extends TLDrawShapeProps, CustomStyleProps {
   type: 'pencil'
@@ -131,8 +132,8 @@ export class PencilShape extends TLDrawShape<PencilShapeProps> {
         strokeWidth={strokeWidth / 2}
         strokeLinejoin="round"
         strokeLinecap="round"
-        stroke={stroke ? `var(--color-${stroke}-500)` : "var(--ls-primary-text-color, #000)"}
-        fill={stroke ? `var(--color-${stroke}-500)` : "var(--ls-primary-text-color, #000)"}
+        stroke={getComputedColor(stroke, "stroke")}
+        fill={getComputedColor(stroke, "stroke")}
         strokeDasharray={strokeType === 'dashed' ? '12 4' : undefined}
       />
     )

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

@@ -3,6 +3,7 @@ import { TLPolygonShape, TLPolygonShapeProps } from '@tldraw/core'
 import { SVGContainer, TLComponentProps } from '@tldraw/react'
 import { observer } from 'mobx-react-lite'
 import { CustomStyleProps, withClampedStyles } from './style-props'
+import { getComputedColor } from '../color'
 
 interface PolygonShapeProps extends TLPolygonShapeProps, CustomStyleProps {
   type: 'polygon'
@@ -20,8 +21,8 @@ export class PolygonShape extends TLPolygonShape<PolygonShapeProps> {
     sides: 3,
     ratio: 1,
     isFlippedY: false,
-    stroke: '#000000',
-    fill: 'var(--ls-secondary-background-color)',
+    stroke: '',
+    fill: '',
     noFill: false,
     strokeType: 'line',
     strokeWidth: 2,
@@ -43,8 +44,8 @@ export class PolygonShape extends TLPolygonShape<PolygonShapeProps> {
           />
           <polygon
             points={path}
-            stroke={noFill ? fill : stroke}
-            fill={noFill ? 'none' : fill}
+            stroke={getComputedColor(stroke, "stroke")}
+            fill={noFill ? 'none' : getComputedColor(fill, "background")}
             strokeWidth={strokeWidth}
             rx={2}
             ry={2}
@@ -91,8 +92,8 @@ export class PolygonShape extends TLPolygonShape<PolygonShapeProps> {
         <polygon className={!noFill ? 'tl-hitarea-fill' : 'tl-hitarea-stroke'} points={path} />
         <polygon
           points={path}
-          stroke={noFill ? fill : stroke}
-          fill={noFill ? 'none' : fill}
+          stroke={getComputedColor(stroke, "stroke")}
+          fill={noFill ? 'none' : getComputedColor(fill, "background")}
           strokeWidth={strokeWidth}
           rx={2}
           ry={2}

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

@@ -14,6 +14,7 @@ import * as React from 'react'
 import type { SizeLevel } from '.'
 import { CustomStyleProps, withClampedStyles } from './style-props'
 import { TextAreaUtils } from './text/TextAreaUtils'
+import { getComputedColor } from '../color'
 
 export interface TextShapeProps extends TLTextShapeProps, CustomStyleProps {
   borderRadius: number
@@ -55,7 +56,7 @@ export class TextShape extends TLTextShape<TextShapeProps> {
     fontFamily: "var(--ls-font-family), 'Helvetica Neue', Helvetica, Arial, sans-serif",
     borderRadius: 0,
     stroke: '',
-    fill: '#ffffff',
+    fill: '',
     noFill: true,
     strokeType: 'line',
     strokeWidth: 2,
@@ -192,7 +193,7 @@ export class TextShape extends TLTextShape<TextShapeProps> {
             fontWeight,
             padding,
             lineHeight,
-            color: `var(--tl-text-color-${stroke ? stroke : "default"})`,
+            color: getComputedColor(stroke, "text"),
           }}
         >
           {isEditing ? (
@@ -319,7 +320,7 @@ export class TextShape extends TLTextShape<TextShapeProps> {
       <foreignObject width={bounds.width} height={bounds.height}>
         <div
           style={{
-            color: stroke,
+            color: getComputedColor(stroke, "text"),
             fontSize,
             fontFamily,
           }}

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

@@ -1,7 +1,4 @@
-import { darken } from 'polished'
 import type { Shape } from '.'
-import { withFillShapes } from '../../components/ContextBar/contextBarActionFactory'
-import { getComputedColor } from '../color'
 
 export interface CustomStyleProps {
   stroke: string
@@ -16,12 +13,5 @@ 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))
 
-  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 = strokeColor
-  }
-
   return props
 }

tldraw/apps/tldraw-logseq/src/styles.css

@@ -11,32 +11,57 @@
   --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);
 
-  backface-visibility: hidden;
+  --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-secondary-background-color);
 
-  --tl-text-color-default: var(--ls-primary-text-color);
+  backface-visibility: hidden;
 }
 
 .dark-theme,
 html[data-theme='dark'] {
-  --tl-text-color-gray: var(--color-gray-400);
-  --tl-text-color-red: var(--color-red-400);
-  --tl-text-color-yellow: var(--color-yellow-400);
-  --tl-text-color-green: var(--color-green-400);
-  --tl-text-color-blue: var(--color-blue-400);
-  --tl-text-color-purple: var(--color-purple-400);
-  --tl-text-color-pink: var(--color-pink-400);
+  --ls-wb-background-color-gray: var(--color-gray-800, gray);
+  --ls-wb-background-color-red: var(--color-red-800, red);
+  --ls-wb-background-color-yellow: var(--color-yellow-800, yellow);
+  --ls-wb-background-color-green: var(--color-green-800, green);
+  --ls-wb-background-color-blue: var(--color-blue-800, blue);
+  --ls-wb-background-color-purple: var(--color-purple-800, purple);
+  --ls-wb-background-color-pink: var(--color-pink-800);
+
+  --ls-wb-text-color-gray: var(--color-gray-400, gray);
+  --ls-wb-text-color-red: var(--color-red-400, red);
+  --ls-wb-text-color-yellow: var(--color-yellow-400, yellow);
+  --ls-wb-text-color-green: var(--color-green-400, green);
+  --ls-wb-text-color-blue: var(--color-blue-400, blue);
+  --ls-wb-text-color-purple: var(--color-purple-400, purple);
+  --ls-wb-text-color-pink: var(--color-pink-400, pink);
 }
 
 .white-theme,
 .light-theme,
 html[data-theme='light'] {
-  --tl-text-color-gray: var(--color-gray-600);
-  --tl-text-color-red: var(--color-red-600);
-  --tl-text-color-yellow: var(--color-yellow-600);
-  --tl-text-color-green: var(--color-green-600);
-  --tl-text-color-blue: var(--color-blue-600);
-  --tl-text-color-purple: var(--color-purple-600);
-  --tl-text-color-pink: var(--color-pink-600);
+  --ls-wb-background-color-gray: var(--color-gray-200, gray);
+  --ls-wb-background-color-red: var(--color-red-200, red);
+  --ls-wb-background-color-yellow: var(--color-yellow-200, yellow);
+  --ls-wb-background-color-green: var(--color-green-200, green);
+  --ls-wb-background-color-blue: var(--color-blue-200, blue);
+  --ls-wb-background-color-purple: var(--color-purple-200, purple);
+  --ls-wb-background-color-pink: var(--color-pink-200, pink);
+
+  --ls-wb-text-color-gray: var(--color-gray-600, gray);
+  --ls-wb-text-color-red: var(--color-red-600, red);
+  --ls-wb-text-color-yellow: var(--color-yellow-600, yellow);
+  --ls-wb-text-color-green: var(--color-green-600, green);
+  --ls-wb-text-color-blue: var(--color-blue-600, blue);
+  --ls-wb-text-color-purple: var(--color-purple-600, purple);
+  --ls-wb-text-color-pink: var(--color-pink-600, pink);
 }
 
 .logseq-tldraw-wrapper {