chore: color system enhancements

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

@@ -1,4 +1,4 @@
-import { Decoration, isNonNullable, HighlightColor } from '@tldraw/core'
+import { Decoration, isNonNullable, Color } from '@tldraw/core'
 import { useApp } from '@tldraw/react'
 import { observer } from 'mobx-react-lite'
 import React from 'react'
@@ -331,7 +331,7 @@ const SwatchAction = observer(() => {
     BoxShape | PolygonShape | EllipseShape | LineShape | PencilShape | TextShape
   >(app.selectedShapesArray, 'Swatch')
 
-  const handleSetColor = React.useCallback((color: HighlightColor) => {
+  const handleSetColor = React.useCallback((color: Color) => {
     shapes.forEach(s => {
       s.update({ fill: color, stroke: color })
     })

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

@@ -1,51 +1,41 @@
 import * as React from 'react'
 import * as Popover from '@radix-ui/react-popover';
 import { TablerIcon } from '../icons'
-import { HighlightColor } from '@tldraw/core'
+import { Color } from '@tldraw/core'
 interface ColorInputProps extends React.InputHTMLAttributes<HTMLButtonElement> {
-  setColor: (value: HighlightColor) => void
+  value: Color
+  setColor: (value: Color) => void
 }
 
 export function ColorInput({ value, setColor, ...rest }: ColorInputProps) {
   const ref = React.useRef<HTMLDivElement>(null)
-  const [computedValue, setComputedValue] = React.useState(value)
 
-  // TODO: listen to theme change?
-  React.useEffect(() => {
-    if (value?.toString().startsWith('var') && ref.current) {
-      const varName = /var\((.*)\)/.exec(value.toString())?.[1]
-      if (varName) {
-        const [v, d] = varName.split(',').map(s => s.trim())
-        setComputedValue(getComputedStyle(ref.current).getPropertyValue(v).trim() ?? d ?? '#000')
-      }
-    }
-  }, [value])
+  function renderColor(color: Color) {
+    return color ?
+      <div className={`tl-color-bg bg-${color}-500`}></div> :
+      <div className={"tl-color-bg"}><TablerIcon name="color-swatch" /></div>
+  }
 
   return (
     <Popover.Root>
       <Popover.Trigger>
-        <div className="input" ref={ref}>
-          <button className={`tl-color-drip mx-1`}>
-            <div className={`tl-color-bg bg-${value}-500`}></div>
-          </button>
-        </div>
+        <button className={`tl-color-drip mx-1`}>
+          {renderColor(value)}
+        </button>
       </Popover.Trigger>
-      <Popover.Anchor />
       <Popover.Portal>
         <Popover.Content
           className="tl-popover-content"
           side="top"
-          arrowPadding={10}
+          sideOffset={15}
         >
           <div className={"tl-color-palette"}>
-            {Object.values(HighlightColor).map(color =>
+            {Object.values(Color).map(color =>
               <button
                 className={`tl-color-drip  m-1${color === value ? " active" : ""}`}
                 onClick={()=>setColor(color)}
               >
-                {(color === "transparent") ?
-                  <TablerIcon name="droplet-off" /> :
-                  <div className={`tl-color-bg bg-${color}-500`}></div>}
+                {renderColor(color)}
               </button>
             )}
           </div>

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: 'var(--ls-secondary-background-color)',
+    fill: '',
     noFill: false,
     strokeType: 'line',
     strokeWidth: 2,
@@ -65,7 +65,7 @@ export class BoxShape extends TLBoxShape<BoxShapeProps> {
           strokeWidth={strokeWidth}
           stroke={noFill ? fill : stroke}
           strokeDasharray={strokeType === 'dashed' ? '8 2' : undefined}
-          fill={noFill ? 'none' : `var(--color-${fill}-500)`}
+          fill={noFill ? 'none' : fill ? `var(--color-${fill}-500)` : "var(--ls-primary-background-color)"}
         />
       </SVGContainer>
     )

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

@@ -24,7 +24,7 @@ export class HighlighterShape extends TLDrawShape<HighlighterShapeProps> {
     point: [0, 0],
     points: [],
     isComplete: false,
-    stroke: '#ffcc00',
+    stroke: '',
     fill: '#ffcc00',
     noFill: true,
     strokeType: 'line',
@@ -48,7 +48,7 @@ export class HighlighterShape extends TLDrawShape<HighlighterShapeProps> {
         <path
           d={pointsPath}
           strokeWidth={strokeWidth * 16}
-          stroke={stroke}
+          stroke={stroke ? `var(--color-${stroke}-500)` : "var(--ls-secondary-background-color)"}
           fill="none"
           pointerEvents="all"
           strokeLinejoin="round"

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

@@ -30,8 +30,8 @@ export class LineShape extends TLLineShape<LineShapeProps> {
       start: { id: 'start', canBind: true, point: [0, 0] },
       end: { id: 'end', canBind: true, point: [1, 1] },
     },
-    stroke: 'var(--ls-primary-text-color, #000)',
-    fill: 'var(--ls-secondary-background-color)',
+    stroke: '',
+    fill: '',
     noFill: true,
     strokeType: 'line',
     strokeWidth: 1,
@@ -161,7 +161,7 @@ export class LineShape extends TLLineShape<LineShapeProps> {
       <>
         <Arrow
           style={{
-            stroke,
+            stroke: stroke ? `var(--color-${stroke}-500)` : "var(--ls-primary-text-color, #000)",
             fill,
             strokeWidth,
             strokeType,

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

@@ -71,8 +71,8 @@ const LogseqTypeTag = ({
 }
 
 const LogseqPortalShapeHeader = observer(
-  ({ type, children }: { type: 'P' | 'B'; children: React.ReactNode }) => {
-    return <div className="tl-logseq-portal-header">{children}</div>
+  ({ type, fill, children }: { type: 'P' | 'B'; fill: string; children: React.ReactNode }) => {
+    return <div className="tl-logseq-portal-header" style={{background: `var(--ls-highlight-color-${fill})`}}>{children}</div>
   }
 )
 
@@ -181,7 +181,7 @@ export class LogseqPortalShape extends TLBoxShape<LogseqPortalShapeProps> {
     // collapsedHeight is the height before collapsing
     collapsedHeight: 0,
     stroke: 'var(--ls-primary-text-color)',
-    fill: 'transparent',
+    fill: '',
     noFill: false,
     borderRadius: 8,
     strokeWidth: 2,
@@ -842,14 +842,10 @@ export class LogseqPortalShape extends TLBoxShape<LogseqPortalShapeProps> {
                   width: `calc(100% / ${scaleRatio})`,
                   height: `calc(100% / ${scaleRatio})`,
                   transform: `scale(${scaleRatio})`,
-                  // @ts-expect-error ???
-                  '--ls-primary-background-color': !fill?.startsWith('var') ? fill : undefined,
-                  '--ls-primary-text-color': !stroke?.startsWith('var') ? stroke : undefined,
-                  '--ls-title-text-color': !stroke?.startsWith('var') ? stroke : undefined,
                 }}
               >
                 {!this.props.compact && !targetNotFound && (
-                  <LogseqPortalShapeHeader type={this.props.blockType ?? 'P'}>
+                  <LogseqPortalShapeHeader type={this.props.blockType ?? 'P'} fill={fill}>
                     {this.props.blockType === 'P' ? (
                       <PageNameLink pageName={pageId} />
                     ) : (

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

@@ -85,8 +85,8 @@ export class PencilShape extends TLDrawShape<PencilShapeProps> {
     point: [0, 0],
     points: [],
     isComplete: false,
-    stroke: 'var(--tl-foreground, #000)',
-    fill: 'var(--tl-foreground, #000)',
+    stroke: '',
+    fill: '',
     noFill: true,
     strokeType: 'line',
     strokeWidth: 2,
@@ -131,8 +131,8 @@ export class PencilShape extends TLDrawShape<PencilShapeProps> {
         strokeWidth={strokeWidth / 2}
         strokeLinejoin="round"
         strokeLinecap="round"
-        stroke={stroke}
-        fill={stroke}
+        stroke={stroke ? `var(--color-${stroke}-500)` : "var(--ls-primary-text-color, #000)"}
+        fill={stroke ? `var(--color-${stroke}-500)` : "var(--ls-primary-text-color, #000)"}
         strokeDasharray={strokeType === 'dashed' ? '12 4' : undefined}
       />
     )

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

@@ -54,7 +54,7 @@ export class TextShape extends TLTextShape<TextShapeProps> {
     padding: 4,
     fontFamily: "var(--ls-font-family), 'Helvetica Neue', Helvetica, Arial, sans-serif",
     borderRadius: 0,
-    stroke: 'var(--tl-foreground, #000)',
+    stroke: '',
     fill: '#ffffff',
     noFill: true,
     strokeType: 'line',
@@ -192,7 +192,7 @@ export class TextShape extends TLTextShape<TextShapeProps> {
             fontWeight,
             padding,
             lineHeight,
-            color: stroke,
+            color: `var(--tl-text-color-${stroke ? stroke : "default"})`,
           }}
         >
           {isEditing ? (

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

@@ -12,6 +12,31 @@
   --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;
+
+  --tl-text-color-default: var(--ls-primary-text-color);
+}
+
+.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);
+}
+
+.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);
 }
 
 .logseq-tldraw-wrapper {
@@ -636,6 +661,7 @@ button.tl-select-input-trigger {
   left: 0;
   overscroll-behavior: none;
   opacity: 1;
+  overflow: hidden;
   user-select: text;
   transform-origin: top left;
   background: var(--ls-secondary-background-color);
@@ -861,7 +887,7 @@ html[data-theme='dark'] {
 }
 
 .tl-color-drip {
-  @apply rounded;
+  @apply rounded text-sm;
 
   width: 30px;
   height: 30px;

tldraw/packages/core/src/types/types.ts

@@ -3,7 +3,7 @@ import type { TLShape, TLApp } from '../lib'
 import type { TLEventMap } from './TLEventMap'
 import type { TLHandle } from './TLHandle'
 
-export enum HighlightColor {
+export enum Color {
   Gray = 'gray',
   Red = 'red',
   Yellow = 'yellow',
@@ -11,7 +11,7 @@ export enum HighlightColor {
   Blue = 'blue',
   Purple = 'purple',
   Pink = 'pink',
-  None = 'transparent',
+  Default = '',
 }
 
 export enum AlignType {