Merge branch 'master' into enhance/ios-folder-picker

.github/workflows/build-desktop-release.yml

@@ -425,7 +425,7 @@ jobs:
     with:
       build-target: "${{ github.event.inputs.build-target }}"
       # if scheduled, use production mode
-      enable-file-sync-production: "${{ github.event_name == 'schedule' || github.event.inputs.enable-file-sync-production == 'true' }}"
+      enable-file-sync-production: true
     secrets:
       ANDROID_KEYSTORE: "${{ secrets.ANDROID_KEYSTORE }}"
       ANDROID_KEYSTORE_PASSWORD: "${{ secrets.ANDROID_KEYSTORE_PASSWORD }}"

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) {

src/main/frontend/components/settings.cljs

@@ -710,7 +710,13 @@
          [:label.flex.font-medium.leading-5.self-start.mt-1 (ui/icon  (if logged-in? "lock-open" "lock") {:class "mr-1"}) (t :settings-page/beta-features)]]
         [:div.flex.flex-col.gap-4
          {:class (when-not user-handler/alpha-or-beta-user? "opacity-50 pointer-events-none cursor-not-allowed")}
-         (sync-switcher-row enable-sync?)]])
+         (sync-switcher-row enable-sync?)
+         [:div.text-sm
+          "Click"
+          [:a.mx-1 {:href "https://blog.logseq.com/how-to-setup-and-use-logseq-sync/"
+                    :target "_blank"}
+           "here"]
+          "for instructions on how to set up and use Sync."]]])
 
      (when-not web-platform?
        [:<>

src/main/frontend/components/whiteboard.css

@@ -90,7 +90,6 @@ h1.title.whiteboard-dashboard-title {
 
 .single-block > :is(.block-content-wrapper, .editor-wrapper) {
   width: 100% !important;
-  background-color: var(--ls-secondary-background-color);
   padding: 8px 12px;
   border-radius: 8px;
 }

src/main/frontend/dicts.cljc

@@ -1441,14 +1441,14 @@
      }
 
    :zh-CN {:accessibility/skip-to-main-content "跳转到主内容"
-           :on-boarding/demo-graph "这是一个图谱的样例，在上面做的修改不会被保存，除非打开本地文件夹"
+           :on-boarding/demo-graph "这是一份图谱的示例，在上面做的修改不会被保存，除非打开本地文件夹"
            :on-boarding/add-graph "添加图谱"
            :on-boarding/open-local-dir "打开本地文件夹"
            :on-boarding/new-graph-desc-1 "Logseq 同时支持 Markdown 和 Org-mode，你可以在设备上打开现有目录或创建新目录，目录也简称为文件夹。你的数据将仅存储在此设备上"
-           :on-boarding/new-graph-desc-2 "文件夹打开后，将会在里面创建 3 个目录："
+           :on-boarding/new-graph-desc-2 "文件夹打开后，里面将会创建 3 个目录："
            :on-boarding/new-graph-desc-3 "/journals - 保存你的日记"
            :on-boarding/new-graph-desc-4 "/pages - 保存其他页面"
-           :on-boarding/new-graph-desc-5 "/logseq - 保存配置，custom.css 和一些元数据"
+           :on-boarding/new-graph-desc-5 "/logseq - 保存配置、custom.css 和一些元数据"
            :help/start "入门"
            :help/roadmap "路线图"
            :help/about "关于 Logseq"
@@ -1470,7 +1470,7 @@
            :help/block-reference "块引用"
            :help/key-commands "关键命令"
            :help/working-with-lists " (与列表相关)"
-           :help/select-nfs-browser "请选择支持nfs的浏览来使用logseq本地文件夹功能, 如最新的Chrome浏览器."
+           :help/select-nfs-browser "请选择支持 nfs 的浏览器来使用 Logseq 本地文件夹功能, 如最新的 Chrome 浏览器."
            :text/image "图片"
            :asset/confirm-delete "确定要删除{1}吗?"
            :asset/physical-delete "同时删除本地文件（目前不可撤销）"
@@ -1508,13 +1508,13 @@
            :plugin/contribute "✨编写和提交新插件"
            :right-side-bar/show-journals "显示日记"
            :select/default-prompt "请选择"
-           :select.graph/add-graph "再添加一个图谱"
-           :select.graph/empty-placeholder-description "没有匹配的图谱。你想再添加一个图谱吗？"
-           :select.graph/prompt "请选择一个图谱"
+           :select.graph/add-graph "再添加一份图谱"
+           :select.graph/empty-placeholder-description "没有匹配的图谱。你想再添加一份图谱吗？"
+           :select.graph/prompt "请选择一份图谱"
            :settings-page/edit-export-css "修改导出样式 export.css"
            :settings-page/enable-flashcards "记忆卡片"
            :settings-page/enable-shortcut-tooltip "启用快捷键提示"
-           :settings-page/export-theme "导出皮肤"
+           :settings-page/export-theme "导出主题"
            :tutorial/dummy-notes "练习笔记.md"
            :tutorial/text "指南.md(英文)"
            :right-side-bar/help "帮助"
@@ -1570,7 +1570,7 @@
            :page/new-title "请输入新页面的名字:"
            :page/earlier "之前"
            :page/no-more-journals "没有更多了"
-           :journal/multiple-files-with-different-formats "你似乎在同一个月有多个日记文件(格式不同)，请每个月只保留一个日记文件。"
+           :journal/multiple-files-with-different-formats "你似乎在同一个月有多个日记文件(格式不同)，请在每个月只保留一份日记文件。"
            :journal/go-to "前往所有文件"
            :file/name "文件名"
            :file/file "文件："

src/main/frontend/modules/shortcut/dicts.cljc

@@ -458,7 +458,112 @@
              :command.ui/toggle-document-mode        "Intervertir le mode document"
              :command.ui/toggle-theme                "Intervertir le thème foncé/clair"
              :command.ui/toggle-right-sidebar        "Afficher/cacher la barre latérale"
-             :command.go/journals                    "Aller au Journal"}
+             :command.go/journals                    "Aller au Journal"
+             :command.auto-complete/complete  "Auto-complétion : Choisir l'élémnent sélectionné"
+             :command.auto-complete/next  "Auto-complétion : Sélection l'élément suivant"
+             :command.auto-complete/open-link  "Auto-complétion : Ouvrir l'élément sélectionné dans le navigateur"
+             :command.auto-complete/prev  "Auto-complétion : Sélectionner l'élément précédent"
+             :command.auto-complete/shift-complete  "Auto-complétion : Ouvrir l'élément sélectionné dans la barre latérale"
+             :command.cards/forgotten  "Cartes : oubliées"
+             :command.cards/next-card  "Cartes : carte suivante"
+             :command.cards/recall  "Cartes : ayant pris du temps à se souvenir"
+             :command.cards/remembered  "Cartes : souvenues"
+             :command.cards/toggle-answers  "Cartes : montrer/masquer les réponses/clozes"
+             :command.command/run  "Lancer une commande git"
+             :command.command/toggle-favorite  "Ajouter/retirer des favoris"
+             :command.command-palette/toggle  "Basculer la palette de commandes"
+             :command.date-picker/complete  "Sélecteur de date : Choisir le jour sélectionné"
+             :command.date-picker/next-day  "Sélecteur de date : Sélectionner le jour suivant"
+             :command.date-picker/next-week  "Sélecteur de date : Sélectionner la semaine suivante "
+             :command.date-picker/prev-day  "Sélecteur de date : Sélectionner le jour précédent"
+             :command.date-picker/prev-week  "Sélecteur de date : Sélectionner la semaine précédente"
+             :command.editor/backspace  "Retour arrière / Effacer en arrière"
+             :command.editor/backward-kill-word  "Supprimer un mot en arrière"
+             :command.editor/backward-word  "Déplacer le curseur avant un mot"
+             :command.editor/beginning-of-block  "Déplacer le curseur au début du bloc"
+             :command.editor/bold  "Gras"
+             :command.editor/clear-block  "Supprimer tout le contenu d'un bloc"
+             :command.editor/copy  "Copier (copie soit une sélection, ou une référence de bloc)..."
+             :command.editor/copy-current-file  "Copier le fichier en cours"
+             :command.editor/copy-embed  "Copier une intégration de ce bloc"
+             :command.editor/copy-text  "Copier le texte de la sélection"
+             :command.editor/cut  "Couper"
+             :command.editor/cycle-todo  "Basculer l'état du TODO de l'élément"
+             :command.editor/delete  "Supprimer / Efface en avant"
+             :command.editor/delete-selection  "Supprimer les blocs sélectionnés"
+             :command.editor/down  "Déplacer le curseur vers le bas / Sélectionner vers le bas"
+             :command.editor/end-of-block  "Déplacer le curseur à la fin du bloc"
+             :command.editor/escape-editing  "Quitter l'édition"
+             :command.editor/forward-kill-word  "Supprimer un mot en avant"
+             :command.editor/forward-word  "Déplacer le curseur d'un mot en avant"
+             :command.editor/highlight  "Surlignage"
+             :command.editor/insert-link  "Lien HTML"
+             :command.editor/insert-youtube-timestamp  "Insérer un horodatage YouTube"
+             :command.editor/italics  "Italique"
+             :command.editor/kill-line-after  "Effacer la ligne après position du curseur"
+             :command.editor/kill-line-before  "Effacer la ligne avant la position du curseur"
+             :command.editor/left  "Déplacer le curseur à gauche / Ouvrir au début du bloc sélectionné"
+             :command.editor/new-whiteboard  "Nouveau tableau blanc"
+             :command.editor/open-edit  "Modifier le bloc sélectionné"
+             :command.editor/open-file-in-default-app  "Ouvrir le fichier dans l'application par défaut"
+             :command.editor/open-file-in-directory  "Montrer le fichier dans son dossier parent"
+             :command.editor/paste-text-in-one-block-at-point  "Coller le texte dans un bloc"
+             :command.editor/redo  "Refaire"
+             :command.editor/replace-block-reference-at-point  "Remplacer la référence d'un bloc par son contenu"
+             :command.editor/right  "Déplacer le curseur à droite / Ouvrir à la fin du bloc sélectionné"
+             :command.editor/select-down  "Sélectionner le contenu en dessous"
+             :command.editor/select-up  "Sélectionner le contenu au dessus"
+             :command.editor/strike-through  "Barrer"
+             :command.editor/toggle-open-blocks  "Basculer l'ouverture des blocs (réduit ou ouvre tous les blocs)"
+             :command.editor/undo  "Annuler"
+             :command.editor/up  "Déplacer le curseur vers le haut / Sélectionner au dessus"
+             :command.go/all-graphs  "Aller vers tous les graphes"
+             :command.go/all-pages  "Aller vers toutes les pages"
+             :command.go/backward  "En arrière"
+             :command.go/electron-find-in-page  "Chercher du texte dans une page"
+             :command.go/electron-jump-to-the-next  "Aller vers le résultat de recherche suivant"
+             :command.go/electron-jump-to-the-previous  "Aller vers le résultat de recherche précédent"
+             :command.go/flashcards  "Basculer les cartes-mémoire"
+             :command.go/forward  "En avant"
+             :command.go/graph-view  "Aller vers la vue en graphe"
+             :command.go/home  "Aller vers l'accueil"
+             :command.go/keyboard-shortcuts  "Aller vers les raccourcis clavier"
+             :command.go/next-journal  "Aller au journal suivant"
+             :command.go/prev-journal  "Aller au journal précédent"
+             :command.go/search-in-page  "Rechercher des blocs dans la page"
+             :command.go/tomorrow  "Aller vers demain"
+             :command.go/whiteboards  "Aller vers les tableaux blancs"
+             :command.graph/add  "Ajouter un graphe"
+             :command.graph/export-as-html  "Exporter les pages publiques du graphe en HTML"
+             :command.graph/open  "Sélectionner un graphe à ouvrir"
+             :command.graph/re-index  "Réindexer le graph actuel"
+             :command.graph/remove  "Retirer un graphe"
+             :command.graph/save  "Enregistrer le graphe sur le disque"
+             :command.misc/copy  "mod+c"
+             :command.pdf/close  "PDF: Fermer le document PDF"
+             :command.pdf/find  "PDF: Rechercher du texte dans le document"
+             :command.pdf/next-page  "PDF: Page suivante du document en cours"
+             :command.pdf/previous-page  "PDF: Page précédente du document en cours"
+             :command.search/re-index  "Reconstruire l'index de recherche"
+             :command.sidebar/clear  "Vider intégralement la barre latérale droite"
+             :command.sidebar/open-today-page  "Ouvrir la page du jour dans la barre latérale droite"
+             :command.ui/goto-plugins  "Aller vers le panneau des extensions"
+             :command.ui/install-plugins-from-file  "Installer les extensions depuis plugins.edn"
+             :command.ui/select-theme-color  "Sélectionner les couleurs disponibles du thème"
+             :command.ui/toggle-brackets  "Basculer l'affichage des crochets"
+             :command.ui/toggle-cards  "Basculer l'affichage des cartes"
+             :command.ui/toggle-contents  "Basculer l'affichage du contenu dans la barre latérale"
+             :command.ui/toggle-left-sidebar  "Basculer la barre latérale gauche"
+             :command.ui/toggle-settings  "Basculer l'affichage des réglages"
+             :command.ui/toggle-wide-mode  "Basculer le vue en pleine largeur"
+             :shortcut.category/basics  "Bases"
+             :shortcut.category/block-command-editing  "Édition de commande de bloc"
+             :shortcut.category/block-editing  "Édition de bloc en générale"
+             :shortcut.category/block-selection  "Sélection de bloc (appuyer sur Esc pour quitter la sélection)"
+             :shortcut.category/navigating  "Navigation"
+             :shortcut.category/others  "Autres"
+             :shortcut.category/toggle  "Basculer"
+             }
 
    :af      {:shortcut.category/formatting           "Formatering"
              :command.editor/indent                  "Ingekeepte blok oortjie"

tldraw/apps/tldraw-logseq/package.json

@@ -12,8 +12,10 @@
   "devDependencies": {
     "@radix-ui/react-context-menu": "^1.0.0",
     "@radix-ui/react-dropdown-menu": "^1.0.0",
+    "@radix-ui/react-popover": "^1.0.0",
     "@radix-ui/react-select": "^1.0.0",
     "@radix-ui/react-separator": "^1.0.0",
+    "@radix-ui/react-slider": "^1.1.0",
     "@radix-ui/react-switch": "^1.0.0",
     "@radix-ui/react-toggle": "^1.0.0",
     "@radix-ui/react-toggle-group": "^1.0.0",

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

@@ -1,4 +1,4 @@
-import { debounce, Decoration, isNonNullable } 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'
@@ -57,7 +57,14 @@ const contextBarActionMapping = new Map<ContextBarActionType, React.FC>()
 type ShapeType = Shape['props']['type']
 
 export const shapeMapping: Partial<Record<ShapeType, ContextBarActionType[]>> = {
-  'logseq-portal': ['Edit', 'LogseqPortalViewMode', 'ScaleLevel', 'OpenPage', 'AutoResizing'],
+  'logseq-portal': [
+    'Swatch',
+    'Edit',
+    'LogseqPortalViewMode',
+    'ScaleLevel',
+    'OpenPage',
+    'AutoResizing',
+  ],
   youtube: ['YoutubeLink'],
   iframe: ['IFrameSource'],
   box: ['Swatch', 'NoFill', 'StrokeType'],
@@ -319,7 +326,7 @@ const NoFillAction = observer(() => {
       pressed={noFill}
       onPressedChange={handleChange}
     >
-      {noFill ? <TablerIcon name="eye-off" /> : <TablerIcon name="eye" />}
+      <TablerIcon name={noFill ? 'droplet-off' : 'droplet'} />
     </ToggleInput>
   )
 })
@@ -330,21 +337,32 @@ const SwatchAction = observer(() => {
   const shapes = filterShapeByAction<
     BoxShape | PolygonShape | EllipseShape | LineShape | PencilShape | TextShape
   >(app.selectedShapesArray, 'Swatch')
-  const handleChange = React.useMemo(() => {
-    let latestValue = ''
-    const handler: React.ChangeEventHandler<HTMLInputElement> = e => {
-      shapes.forEach(s => {
-        s.update({ fill: latestValue, stroke: latestValue })
-      })
-      app.persist()
-    }
-    return debounce(handler, 100, e => {
-      latestValue = e.target.value
+
+  const handleSetColor = React.useCallback((color: string) => {
+    shapes.forEach(s => {
+      s.update({ fill: color, stroke: color })
+    })
+    app.persist()
+  }, [])
+
+  const handleSetOpacity = React.useCallback((opacity: number) => {
+    shapes.forEach(s => {
+      s.update({ opacity: opacity })
     })
+    app.persist()
   }, [])
 
-  const value = shapes[0].props.noFill ? shapes[0].props.stroke : shapes[0].props.fill
-  return <ColorInput title="Color Picker" value={value} onChange={handleChange} />
+  const color = shapes[0].props.noFill ? shapes[0].props.stroke : shapes[0].props.fill
+  return (
+    <ColorInput
+      title="Color Picker"
+      color={color}
+      opacity={shapes[0].props.opacity}
+      collisionRef={document.getElementById('main-content-container')}
+      setOpacity={handleSetOpacity}
+      setColor={handleSetColor}
+    />
+  )
 })
 
 const StrokeTypeAction = observer(() => {

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

@@ -1,36 +1,79 @@
 import * as React from 'react'
+import * as Popover from '@radix-ui/react-popover'
+import * as Slider from '@radix-ui/react-slider'
+import { TablerIcon } from '../icons'
+import { Color } from '@tldraw/core'
+interface ColorInputProps extends React.InputHTMLAttributes<HTMLButtonElement> {
+  color: string
+  opacity: number
+  collisionRef: HTMLElement | null
+  setColor: (value: string) => void
+  setOpacity: (value: number) => void
+}
 
-interface ColorInputProps extends React.InputHTMLAttributes<HTMLInputElement> {}
-
-export function ColorInput({ value, onChange, ...rest }: ColorInputProps) {
+export function ColorInput({
+  color,
+  opacity,
+  collisionRef,
+  setColor,
+  setOpacity,
+  ...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: string) {
+    return color ? (
+      <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>
+    )
+  }
 
   return (
-    <div className="input" ref={ref}>
-      <div className="color-input-wrapper">
-        <input
-          className="color-input"
-          type="color"
-          value={computedValue}
-          onChange={e => {
-            setComputedValue(e.target.value)
-            onChange?.(e)
-          }}
-          {...rest}
-        />
-      </div>
-    </div>
+    <Popover.Root>
+      <Popover.Trigger>
+        <button className="tl-color-drip mx-1">{renderColor(color)}</button>
+      </Popover.Trigger>
+
+      <Popover.Content
+        className="tl-popover-content"
+        side="top"
+        sideOffset={15}
+        collisionBoundary={collisionRef}
+      >
+        <div className={'tl-color-palette'}>
+          {Object.values(Color).map(value => (
+            <button
+              className={`tl-color-drip m-1${value === color ? ' active' : ''}`}
+              onClick={() => setColor(value)}
+            >
+              {renderColor(value)}
+            </button>
+          ))}
+        </div>
+
+        <div className="mx-1 my-2">
+          <Slider.Root
+            defaultValue={[opacity]}
+            onValueCommit={value => setOpacity(value[0])}
+            max={1}
+            step={0.1}
+            aria-label="Opacity"
+            className="tl-slider-root"
+          >
+            <Slider.Track className="tl-slider-track">
+              <Slider.Range className="tl-slider-range" />
+            </Slider.Track>
+            <Slider.Thumb className="tl-slider-thumb" />
+          </Slider.Root>
+        </div>
+
+        <Popover.Arrow className="tl-popover-arrow" />
+      </Popover.Content>
+    </Popover.Root>
   )
 }

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

@@ -1,25 +0,0 @@
-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

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { SVGContainer, TLComponentProps } from '@tldraw/react'
-import { TLBoxShape, TLBoxShapeProps } from '@tldraw/core'
+import { TLBoxShape, TLBoxShapeProps, getComputedColor } from '@tldraw/core'
 import { observer } from 'mobx-react-lite'
 import { CustomStyleProps, withClampedStyles } from './style-props'
 import { BindingIndicator } from './BindingIndicator'
@@ -20,8 +20,8 @@ export class BoxShape extends TLBoxShape<BoxShapeProps> {
     point: [0, 0],
     size: [100, 100],
     borderRadius: 2,
-    stroke: '#000000',
-    fill: 'var(--ls-secondary-background-color)',
+    stroke: '',
+    fill: '',
     noFill: false,
     strokeType: 'line',
     strokeWidth: 2,
@@ -63,9 +63,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}
+          fill={noFill ? 'none' : getComputedColor(fill, 'background')}
         />
       </SVGContainer>
     )

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

@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { TLEllipseShapeProps, TLEllipseShape } from '@tldraw/core'
+import { TLEllipseShapeProps, TLEllipseShape, getComputedColor } from '@tldraw/core'
 import { SVGContainer, TLComponentProps } from '@tldraw/react'
 import { observer } from 'mobx-react-lite'
 import { CustomStyleProps, withClampedStyles } from './style-props'
@@ -18,8 +18,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 +51,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 +105,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

@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { SvgPathUtils, TLDrawShape, TLDrawShapeProps } from '@tldraw/core'
+import { SvgPathUtils, TLDrawShape, TLDrawShapeProps, getComputedColor } from '@tldraw/core'
 import { SVGContainer, TLComponentProps } from '@tldraw/react'
 import { observer } from 'mobx-react-lite'
 import { computed, makeObservable } from 'mobx'
@@ -24,12 +24,12 @@ export class HighlighterShape extends TLDrawShape<HighlighterShapeProps> {
     point: [0, 0],
     points: [],
     isComplete: false,
-    stroke: '#ffcc00',
-    fill: '#ffcc00',
+    stroke: '',
+    fill: '',
     noFill: true,
     strokeType: 'line',
     strokeWidth: 2,
-    opacity: 1,
+    opacity: 0.5,
   }
 
   @computed get pointsPath() {
@@ -44,16 +44,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}
+          stroke={getComputedColor(stroke, 'stroke')}
           fill="none"
           pointerEvents="all"
           strokeLinejoin="round"
           strokeLinecap="round"
-          opacity={0.5}
+          opacity={opacity}
         />
       </SVGContainer>
     )
@@ -73,18 +73,18 @@ export class HighlighterShape extends TLDrawShape<HighlighterShapeProps> {
   getShapeSVGJsx() {
     const {
       pointsPath,
-      props: { stroke, strokeWidth },
+      props: { stroke, strokeWidth, opacity },
     } = this
     return (
       <path
         d={pointsPath}
         strokeWidth={strokeWidth * 16}
-        stroke={stroke}
+        stroke={getComputedColor(stroke, 'stroke')}
         fill="none"
         pointerEvents="all"
         strokeLinejoin="round"
         strokeLinecap="round"
-        opacity={0.5}
+        opacity={opacity}
       />
     )
   }

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

@@ -2,7 +2,7 @@
 import * as React from 'react'
 import { TLBoxShape, TLBoxShapeProps } from '@tldraw/core'
 import { HTMLContainer, TLComponentProps } from '@tldraw/react'
-import { action, computed } from 'mobx'
+import { action } from 'mobx'
 import { observer } from 'mobx-react-lite'
 
 export interface IFrameShapeProps extends TLBoxShapeProps {

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

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { Decoration, TLLineShape, TLLineShapeProps } from '@tldraw/core'
-import { SVGContainer, TLComponentProps, useApp } from '@tldraw/react'
+import { Decoration, TLLineShape, TLLineShapeProps, getComputedColor } from '@tldraw/core'
+import { SVGContainer, TLComponentProps } from '@tldraw/react'
 import Vec from '@tldraw/vec'
 import { observer } from 'mobx-react-lite'
 import * as React from 'react'
@@ -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,
@@ -76,7 +76,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 +161,7 @@ export class LineShape extends TLLineShape<LineShapeProps> {
       <>
         <Arrow
           style={{
-            stroke,
+            stroke: getComputedColor(stroke, 'stroke'),
             fill,
             strokeWidth,
             strokeType,
@@ -181,8 +181,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/LogseqPortalShape.tsx

@@ -6,6 +6,7 @@ import {
   TLResetBoundsInfo,
   TLResizeInfo,
   validUUID,
+  getComputedColor,
 } from '@tldraw/core'
 import { Virtuoso } from 'react-virtuoso'
 import { HTMLContainer, TLComponentProps, useApp } from '@tldraw/react'
@@ -71,8 +72,40 @@ const LogseqTypeTag = ({
 }
 
 const LogseqPortalShapeHeader = observer(
-  ({ type, children }: { type: 'P' | 'B'; children: React.ReactNode }) => {
-    return <div className={`tl-logseq-portal-header tl-logseq-portal-header-${type === "P" ? "page" : "block"}`}>{children}</div>
+  ({
+    type,
+    fill,
+    opacity,
+    children,
+  }: {
+    type: 'P' | 'B'
+    fill: string
+    opacity: number
+    children: React.ReactNode
+  }) => {
+    const bgColor = getComputedColor(fill, 'background')
+
+    return (
+      <div
+        className={`tl-logseq-portal-header tl-logseq-portal-header-${
+          type === 'P' ? 'page' : 'block'
+        }`}
+      >
+        <div
+          className="absolute inset-0 tl-logseq-portal-header-bg"
+          style={{
+            opacity,
+            background:
+              type === 'P'
+                ? bgColor
+                : `linear-gradient(0deg, var(--ls-highlight-color-${
+                    fill ? fill : 'default'
+                  }), ${bgColor}`,
+          }}
+        ></div>
+        <div className="relative">{children}</div>
+      </div>
+    )
   }
 )
 
@@ -180,8 +213,8 @@ export class LogseqPortalShape extends TLBoxShape<LogseqPortalShapeProps> {
     size: [400, 50],
     // collapsedHeight is the height before collapsing
     collapsedHeight: 0,
-    stroke: 'var(--ls-primary-text-color)',
-    fill: 'var(--ls-secondary-background-color)',
+    stroke: '',
+    fill: '',
     noFill: false,
     borderRadius: 8,
     strokeWidth: 2,
@@ -661,7 +694,7 @@ export class LogseqPortalShape extends TLBoxShape<LogseqPortalShapeProps> {
 
   PortalComponent = observer(({}: TLComponentProps) => {
     const {
-      props: { pageId },
+      props: { pageId, fill, opacity },
     } = this
     const { renderers } = React.useContext(LogseqContext)
     const app = useApp<Shape>()
@@ -705,11 +738,18 @@ export class LogseqPortalShape extends TLBoxShape<LogseqPortalShapeProps> {
     return (
       <div
         ref={cpRefContainer}
-        className="tl-logseq-cp-container"
-        style={{
-          overflow: this.props.isAutoResizing ? 'visible' : 'auto',
-        }}
+        className="relative tl-logseq-cp-container"
+        style={{ overflow: this.props.isAutoResizing ? 'visible' : 'auto' }}
       >
+        <div
+          className="absolute inset-0 tl-logseq-cp-container-bg"
+          style={{
+            background: fill
+              ? `var(--ls-highlight-color-${fill})`
+              : 'var(--ls-secondary-background-color)',
+            opacity,
+          }}
+        ></div>
         {this.props.blockType === 'B' && this.props.compact ? (
           <Block blockId={pageId} />
         ) : (
@@ -812,7 +852,6 @@ export class LogseqPortalShape extends TLBoxShape<LogseqPortalShapeProps> {
       <HTMLContainer
         style={{
           pointerEvents: 'all',
-          opacity: isErasing ? 0.2 : opacity,
         }}
         {...events}
       >
@@ -838,19 +877,18 @@ export class LogseqPortalShape extends TLBoxShape<LogseqPortalShapeProps> {
                 data-portal-selected={portalSelected}
                 data-editing={isEditing}
                 style={{
-                  background: this.props.compact ? 'transparent' : fill,
-                  color: stroke,
                   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,
+                  opacity: isErasing ? 0.2 : 1,
                 }}
               >
                 {!this.props.compact && !targetNotFound && (
-                  <LogseqPortalShapeHeader type={this.props.blockType ?? 'P'}>
+                  <LogseqPortalShapeHeader
+                    type={this.props.blockType ?? 'P'}
+                    fill={fill}
+                    opacity={opacity}
+                  >
                     {this.props.blockType === 'P' ? (
                       <PageNameLink pageName={pageId} />
                     ) : (
@@ -899,8 +937,12 @@ export class LogseqPortalShape extends TLBoxShape<LogseqPortalShapeProps> {
     return (
       <>
         <rect
-          fill={this.props.fill}
-          stroke={this.props.stroke}
+          fill={
+            this.props.fill
+              ? `var(--ls-highlight-color-${this.props.fill})`
+              : 'var(--ls-secondary-background-color)'
+          }
+          stroke={getComputedColor(this.props.fill, 'background')}
           strokeWidth={this.props.strokeWidth ?? 2}
           fillOpacity={this.props.opacity ?? 0.2}
           width={bounds.width}
@@ -910,7 +952,12 @@ export class LogseqPortalShape extends TLBoxShape<LogseqPortalShapeProps> {
         />
         {!this.props.compact && (
           <rect
-            fill="#aaa"
+            fill={
+              this.props.fill
+                ? getComputedColor(this.props.fill, 'background')
+                : 'var(--ls-tertiary-background-color)'
+            }
+            fillOpacity={this.props.opacity ?? 0.2}
             x={1}
             y={1}
             width={bounds.width - 2}
@@ -927,8 +974,8 @@ export class LogseqPortalShape extends TLBoxShape<LogseqPortalShapeProps> {
           textAnchor="middle"
           fontFamily="var(--ls-font-family)"
           fontSize="32"
-          fill={this.props.stroke}
-          stroke={this.props.stroke}
+          fill="var(--ls-secondary-text-color)"
+          stroke="var(--ls-secondary-text-color)"
         >
           {this.props.blockType === 'P' ? this.props.pageId : ''}
         </text>

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

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { getStroke } from 'perfect-freehand'
-import { SvgPathUtils, TLDrawShape, TLDrawShapeProps } from '@tldraw/core'
+import { SvgPathUtils, TLDrawShape, TLDrawShapeProps, getComputedColor } from '@tldraw/core'
 import { SVGContainer, TLComponentProps } from '@tldraw/react'
 import { observer } from 'mobx-react-lite'
 import { computed, makeObservable } from 'mobx'
@@ -25,8 +25,8 @@ export class PenShape extends TLDrawShape<PenShapeProps> {
     point: [0, 0],
     points: [],
     isComplete: false,
-    stroke: '#000000',
-    fill: '#ffffff',
+    stroke: '',
+    fill: '',
     noFill: false,
     strokeType: 'line',
     strokeWidth: 2,
@@ -56,8 +56,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

@@ -1,10 +1,10 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { SvgPathUtils, TLDrawShape, TLDrawShapeProps } from '@tldraw/core'
+import { SvgPathUtils, TLDrawShape, TLDrawShapeProps, getComputedColor } from '@tldraw/core'
 import { SVGContainer, TLComponentProps } from '@tldraw/react'
 import Vec from '@tldraw/vec'
 import { computed, makeObservable } from 'mobx'
 import { observer } from 'mobx-react-lite'
-import getStroke, {
+import {
   getStrokeOutlinePoints,
   getStrokePoints,
   StrokeOptions,
@@ -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,
@@ -122,7 +122,7 @@ export class PencilShape extends TLDrawShape<PencilShapeProps> {
   getShapeSVGJsx() {
     const {
       pointsPath,
-      props: { stroke, noFill, strokeWidth, strokeType },
+      props: { stroke, strokeWidth, strokeType },
     } = this
     return (
       <path
@@ -131,8 +131,8 @@ export class PencilShape extends TLDrawShape<PencilShapeProps> {
         strokeWidth={strokeWidth / 2}
         strokeLinejoin="round"
         strokeLinecap="round"
-        stroke={stroke}
-        fill={stroke}
+        stroke={getComputedColor(stroke, 'stroke')}
+        fill={getComputedColor(stroke, 'stroke')}
         strokeDasharray={strokeType === 'dashed' ? '12 4' : undefined}
       />
     )

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

@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { TLPolygonShape, TLPolygonShapeProps } from '@tldraw/core'
+import { TLPolygonShape, TLPolygonShapeProps, getComputedColor } from '@tldraw/core'
 import { SVGContainer, TLComponentProps } from '@tldraw/react'
 import { observer } from 'mobx-react-lite'
 import { CustomStyleProps, withClampedStyles } from './style-props'
@@ -20,8 +20,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 +43,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 +91,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

@@ -6,6 +6,7 @@ import {
   TLResizeStartInfo,
   TLTextShape,
   TLTextShapeProps,
+  getComputedColor,
 } from '@tldraw/core'
 import { HTMLContainer, TLComponentProps } from '@tldraw/react'
 import { action, computed } from 'mobx'
@@ -54,8 +55,8 @@ 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)',
-    fill: '#ffffff',
+    stroke: '',
+    fill: '',
     noFill: true,
     strokeType: 'line',
     strokeWidth: 2,
@@ -192,7 +193,7 @@ export class TextShape extends TLTextShape<TextShapeProps> {
             fontWeight,
             padding,
             lineHeight,
-            color: stroke,
+            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

@@ -1,3 +1,16 @@
+:root {
+  --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-tertiary-background-color);
+}
+
 .logseq-tldraw {
   --color-panel: var(--ls-tertiary-background-color);
   --color-panel-inverted: var(--ls-secondary-text-color);
@@ -14,6 +27,45 @@
   backface-visibility: hidden;
 }
 
+.dark-theme,
+html[data-theme='dark'] {
+  --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'] {
+  --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 {
   @apply flex flex-col w-full h-full relative;
 
@@ -132,15 +184,6 @@
     padding: 2px;
   }
 
-  .color-input-wrapper {
-    overflow: hidden;
-    height: 20px;
-    width: 20px;
-    border-radius: 2px;
-    margin: 2px;
-    box-shadow: 0 0 0 2px var(--ls-tertiary-background-color);
-  }
-
   .color-input {
     transform: translate(-50%, -50%) scale(4);
   }
@@ -639,6 +682,7 @@ button.tl-select-input-trigger {
   left: 0;
   overscroll-behavior: none;
   opacity: 1;
+  overflow: hidden;
   user-select: text;
   transform-origin: top left;
 
@@ -652,7 +696,7 @@ button.tl-select-input-trigger {
 }
 
 .tl-logseq-portal-header {
-  @apply flex items-center w-full;
+  @apply relative flex items-center w-full;
 
   height: 40px;
   flex-shrink: 0;
@@ -660,18 +704,12 @@ button.tl-select-input-trigger {
   color: var(--ls-title-text-color);
   border-top-left-radius: 8px;
   border-top-right-radius: 8px;
-  background: var(--ls-tertiary-background-color);
   padding: 0 1rem;
   gap: 0.5em;
   white-space: nowrap;
   text-overflow: ellipsis;
   overflow: hidden;
 
-  &.tl-logseq-portal-header-block {
-    background: linear-gradient(0deg, transparent, var(--ls-tertiary-background-color));
-  }
-
-
   .page-ref {
     color: var(--ls-title-text-color);
     background: var(--ls-tertiary-background-color));
@@ -734,8 +772,10 @@ button.tl-select-input-trigger {
 }
 
 .tl-logseq-cp-container {
-  @apply h-full w-full rounded-lg;
+  @apply relative h-full w-full rounded-lg;
 
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
   overscroll-behavior: none;
   flex: 1 1 0%;
   cursor: default;
@@ -809,17 +849,14 @@ html[data-theme='dark'] {
   height: 32px;
   width: 32px;
   color: var(--ls-secondary-text-color);
-  opacity: 0.3;
+
   &:hover {
     background-color: var(--ls-tertiary-background-color);
   }
-  &[data-toggle='false'] {
-    opacity: 1;
-  }
+
   &[data-state='on'] {
     background-color: var(--ls-tertiary-background-color);
     color: var(--ls-primary-text-color);
-    opacity: 1;
   }
 }
 
@@ -849,3 +886,84 @@ html[data-theme='dark'] {
   pointer-events: all;
   stroke-width: min(100px, calc(12px * var(--tl-scale)));
 }
+
+.tl-popover-content {
+  @apply rounded-sm drop-shadow-md;
+
+  padding: 4px;
+  width: 160px;
+  background-color: var(--ls-secondary-background-color);
+  z-index: 100000;
+}
+
+.tl-popover-arrow {
+  fill: var(--ls-secondary-background-color);
+}
+
+.tl-color-palette {
+  @apply flex flex-wrap;
+}
+
+.tl-color-drip {
+  @apply rounded text-sm;
+
+  width: 30px;
+  height: 30px;
+  padding: 3px;
+  border: 1px solid var(--ls-secondary-border-color);
+  color: var(--ls-secondary-text-color);
+
+  &.active {
+    padding: 0;
+
+    .tl-color-bg {
+      border: 3px solid var(--ls-selection-background-color);
+    }
+  }
+}
+
+.tl-color-bg {
+  @apply w-full h-full rounded-sm;
+}
+
+.tl-slider-root {
+  @apply relative flex items-center w-full rounded-sm;
+
+  user-select: none;
+  touch-action: none;
+  background: url("../img/checker.png");
+
+}
+
+.tl-slider-track {
+  @apply relative grow rounded-sm w-full;
+
+  background: linear-gradient(90deg, transparent, var(--ls-tertiary-background-color));
+  border: 1px solid var(--ls-secondary-border-color);
+
+  &[data-orientation="horizontal"] {
+    height: 10px;
+  }
+
+  &[data-orientation="vertical"] {
+    width: 10px;
+  }
+}
+
+.tl-slider-range {
+  @apply absolute h-full rounded-sm;
+}
+
+.tl-slider-thumb {
+  @apply block rounded-sm;
+
+  width: 8px;
+  height: 14px;
+  background-color: var(--ls-secondary-background-color);
+  border: 1px solid var(--color-selectedStroke);
+  box-shadow: 0 0 1px var(--ls-secondary-border-color);
+
+  &:hover {
+    background-color: var(--ls-tertiary-background-color);
+  }
+}

tldraw/cljs-demo/src/main/playground/tldraw.cljs

@@ -18,8 +18,8 @@
        "scale" [1 1],
        "label" "",
        "id" "0jy4JuM61pS9QQthBDme-",
-       "stroke" "#fcb0b0",
-       "fill" "#ffffff",
+       "stroke" "",
+       "fill" "",
        "strokeWidth" 1,
        "type" "line",
        "decorations" {"end" "arrow"},
@@ -33,8 +33,8 @@
        "collapsedHeight" 0,
        "scale" [1 1],
        "id" "hRp0fnc0i2BZIjEbZqO6_",
-       "stroke" "var(--ls-primary-text-color)",
-       "fill" "var(--ls-secondary-background-color)",
+       "stroke" "",
+       "fill" "",
        "strokeWidth" 2,
        "type" "logseq-portal",
        "nonce" 1655952865192,
@@ -66,4 +66,3 @@
   (tldraw/App (clj->js {:PageComponent test-comp
                         :onPersist on-persist
                         :model model})))
-

tldraw/demo/src/App.jsx

@@ -30,8 +30,8 @@ const documentModel = onLoad() ?? {
           parentId: 'page1',
           point: [369.109375, 170.5546875],
           size: [0, 0],
-          stroke: '#000000',
-          fill: '#ffffff',
+          stroke: '',
+          fill: '',
           strokeWidth: 2,
           opacity: 1,
           pageId: 'aaasssdddfff',

tldraw/packages/core/src/lib/shapes/TLShape/TLShape.tsx

@@ -10,7 +10,7 @@ import Vec from '@tldraw/vec'
 import { action, computed, makeObservable, observable, toJS, transaction } from 'mobx'
 import { BINDING_DISTANCE } from '../../../constants'
 import type { TLHandle, TLResizeEdge, TLResizeCorner, TLAsset } from '../../../types'
-import { BoundsUtils, PointUtils, deepCopy } from '../../../utils'
+import { BoundsUtils, PointUtils, deepCopy, getComputedColor } from '../../../utils'
 
 export type TLShapeModel<P extends TLShapeProps = TLShapeProps> = {
   nonce?: number
@@ -370,8 +370,8 @@ export abstract class TLShape<P extends TLShapeProps = TLShapeProps, M = any> {
       .props as any
     return (
       <rect
-        fill={noFill ? 'none' : fill}
-        stroke={noFill ? fill : stroke}
+        fill={noFill ? 'none' : getComputedColor(fill, 'background')}
+        stroke={getComputedColor(stroke, 'stroke')}
         strokeWidth={strokeWidth ?? 2}
         strokeDasharray={strokeType === 'dashed' ? '8 2' : undefined}
         fillOpacity={opacity ?? 0.2}

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

@@ -3,6 +3,17 @@ import type { TLShape, TLApp } from '../lib'
 import type { TLEventMap } from './TLEventMap'
 import type { TLHandle } from './TLHandle'
 
+export enum Color {
+  Gray = 'gray',
+  Red = 'red',
+  Yellow = 'yellow',
+  Green = 'green',
+  Blue = 'blue',
+  Purple = 'purple',
+  Pink = 'pink',
+  Default = '',
+}
+
 export enum AlignType {
   Top = 'top',
   CenterVertical = 'centerVertical',

tldraw/packages/core/src/utils/ColorUtils.ts

@@ -0,0 +1,9 @@
+import { Color } from '../types'
+
+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/packages/core/src/utils/index.ts

@@ -8,6 +8,7 @@ export * from './SvgPathUtils'
 export * from './BindingUtils'
 export * from './DataUtils'
 export * from './TextUtils'
+export * from './ColorUtils'
 export * from './getTextSize'
 export * from './cache'
 

tldraw/yarn.lock

@@ -507,6 +507,14 @@
     "@babel/runtime" "^7.13.10"
     "@radix-ui/react-primitive" "1.0.0"
 
+"@radix-ui/[email protected]":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-arrow/-/react-arrow-1.0.1.tgz#5246adf79e97f89e819af68da51ddcf349ecf1c4"
+  integrity sha512-1yientwXqXcErDHEv8av9ZVNEBldH8L9scVR3is20lL+jOCfcJyMFZFEY5cgIrgexsq1qggSXqiEL/d/4f+QXA==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-primitive" "1.0.1"
+
 "@radix-ui/[email protected]":
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-collection/-/react-collection-1.0.0.tgz#0ec4c72fabd35a03b5787075ac799e3b17ca5710"
@@ -518,6 +526,17 @@
     "@radix-ui/react-primitive" "1.0.0"
     "@radix-ui/react-slot" "1.0.0"
 
+"@radix-ui/[email protected]":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-collection/-/react-collection-1.0.1.tgz#259506f97c6703b36291826768d3c1337edd1de5"
+  integrity sha512-uuiFbs+YCKjn3X1DTSx9G7BHApu4GHbi3kgiwsnFUbOKCrwejAJv4eE4Vc8C0Oaxt9T0aV4ox0WCOdx+39Xo+g==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-compose-refs" "1.0.0"
+    "@radix-ui/react-context" "1.0.0"
+    "@radix-ui/react-primitive" "1.0.1"
+    "@radix-ui/react-slot" "1.0.1"
+
 "@radix-ui/[email protected]":
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-compose-refs/-/react-compose-refs-1.0.0.tgz#37595b1f16ec7f228d698590e78eeed18ff218ae"
@@ -564,6 +583,18 @@
     "@radix-ui/react-use-callback-ref" "1.0.0"
     "@radix-ui/react-use-escape-keydown" "1.0.0"
 
+"@radix-ui/[email protected]":
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.0.2.tgz#f04d1061bddf00b1ca304148516b9ddc62e45fb2"
+  integrity sha512-WjJzMrTWROozDqLB0uRWYvj4UuXsM/2L19EmQ3Au+IJWqwvwq9Bwd+P8ivo0Deg9JDPArR1I6MbWNi1CmXsskg==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/primitive" "1.0.0"
+    "@radix-ui/react-compose-refs" "1.0.0"
+    "@radix-ui/react-primitive" "1.0.1"
+    "@radix-ui/react-use-callback-ref" "1.0.0"
+    "@radix-ui/react-use-escape-keydown" "1.0.2"
+
 "@radix-ui/react-dropdown-menu@^1.0.0":
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-dropdown-menu/-/react-dropdown-menu-1.0.0.tgz#687959e1bcdd5e8eb0de406484aff28d0974c593"
@@ -595,6 +626,16 @@
     "@radix-ui/react-primitive" "1.0.0"
     "@radix-ui/react-use-callback-ref" "1.0.0"
 
+"@radix-ui/[email protected]":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-focus-scope/-/react-focus-scope-1.0.1.tgz#faea8c25f537c5a5c38c50914b63722db0e7f951"
+  integrity sha512-Ej2MQTit8IWJiS2uuujGUmxXjF/y5xZptIIQnyd2JHLwtV0R2j9NRVoRj/1j/gJ7e3REdaBw4Hjf4a1ImhkZcQ==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-compose-refs" "1.0.0"
+    "@radix-ui/react-primitive" "1.0.1"
+    "@radix-ui/react-use-callback-ref" "1.0.0"
+
 "@radix-ui/[email protected]":
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-id/-/react-id-1.0.0.tgz#8d43224910741870a45a8c9d092f25887bb6d11e"
@@ -639,6 +680,28 @@
     aria-hidden "^1.1.1"
     react-remove-scroll "2.5.4"
 
+"@radix-ui/react-popover@^1.0.0":
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-popover/-/react-popover-1.0.2.tgz#f761c8aafb61519522b8e80501c589e619073a2c"
+  integrity sha512-4tqZEl9w95R5mlZ/sFdgBnfhCBOEPepLIurBA5kt/qaAhldJ1tNQd0ngr0ET0AHbPotT4mwxMPr7a+MA/wbK0g==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/primitive" "1.0.0"
+    "@radix-ui/react-compose-refs" "1.0.0"
+    "@radix-ui/react-context" "1.0.0"
+    "@radix-ui/react-dismissable-layer" "1.0.2"
+    "@radix-ui/react-focus-guards" "1.0.0"
+    "@radix-ui/react-focus-scope" "1.0.1"
+    "@radix-ui/react-id" "1.0.0"
+    "@radix-ui/react-popper" "1.0.1"
+    "@radix-ui/react-portal" "1.0.1"
+    "@radix-ui/react-presence" "1.0.0"
+    "@radix-ui/react-primitive" "1.0.1"
+    "@radix-ui/react-slot" "1.0.1"
+    "@radix-ui/react-use-controllable-state" "1.0.0"
+    aria-hidden "^1.1.1"
+    react-remove-scroll "2.5.5"
+
 "@radix-ui/[email protected]":
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-popper/-/react-popper-1.0.0.tgz#fb4f937864bf39c48f27f55beee61fa9f2bef93c"
@@ -655,6 +718,22 @@
     "@radix-ui/react-use-size" "1.0.0"
     "@radix-ui/rect" "1.0.0"
 
+"@radix-ui/[email protected]":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-popper/-/react-popper-1.0.1.tgz#9fa8a6a493404afa225866a5cd75af23d141baa0"
+  integrity sha512-J4Vj7k3k+EHNWgcKrE+BLlQfpewxA7Zd76h5I0bIa+/EqaIZ3DuwrbPj49O3wqN+STnXsBuxiHLiF0iU3yfovw==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@floating-ui/react-dom" "0.7.2"
+    "@radix-ui/react-arrow" "1.0.1"
+    "@radix-ui/react-compose-refs" "1.0.0"
+    "@radix-ui/react-context" "1.0.0"
+    "@radix-ui/react-primitive" "1.0.1"
+    "@radix-ui/react-use-layout-effect" "1.0.0"
+    "@radix-ui/react-use-rect" "1.0.0"
+    "@radix-ui/react-use-size" "1.0.0"
+    "@radix-ui/rect" "1.0.0"
+
 "@radix-ui/[email protected]":
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-portal/-/react-portal-1.0.0.tgz#7220b66743394fabb50c55cb32381395cc4a276b"
@@ -663,6 +742,14 @@
     "@babel/runtime" "^7.13.10"
     "@radix-ui/react-primitive" "1.0.0"
 
+"@radix-ui/[email protected]":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-portal/-/react-portal-1.0.1.tgz#169c5a50719c2bb0079cf4c91a27aa6d37e5dd33"
+  integrity sha512-NY2vUWI5WENgAT1nfC6JS7RU5xRYBfjZVLq0HmgEN1Ezy3rk/UruMV4+Rd0F40PEaFC5SrLS1ixYvcYIQrb4Ig==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-primitive" "1.0.1"
+
 "@radix-ui/[email protected]":
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-presence/-/react-presence-1.0.0.tgz#814fe46df11f9a468808a6010e3f3ca7e0b2e84a"
@@ -680,6 +767,14 @@
     "@babel/runtime" "^7.13.10"
     "@radix-ui/react-slot" "1.0.0"
 
+"@radix-ui/[email protected]":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-primitive/-/react-primitive-1.0.1.tgz#c1ebcce283dd2f02e4fbefdaa49d1cb13dbc990a"
+  integrity sha512-fHbmislWVkZaIdeF6GZxF0A/NH/3BjrGIYj+Ae6eTmTCr7EB0RQAAVEiqsXK6p3/JcRqVSBQoceZroj30Jj3XA==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-slot" "1.0.1"
+
 "@radix-ui/[email protected]":
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-roving-focus/-/react-roving-focus-1.0.0.tgz#aadeb65d5dbcdbdd037078156ae1f57c2ff754ee"
@@ -732,6 +827,24 @@
     "@babel/runtime" "^7.13.10"
     "@radix-ui/react-primitive" "1.0.0"
 
+"@radix-ui/react-slider@^1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-slider/-/react-slider-1.1.0.tgz#b3fdaca27619150e9e6067ad9f979a4535f68d5e"
+  integrity sha512-5H/QB4xD3GF9UfoSCVLBx2JjlXamMcmTyL6gr4kkd/MiAGaYB0W7Exi4MQa0tJApBFJe+KmS5InKCI56p2kmjA==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/number" "1.0.0"
+    "@radix-ui/primitive" "1.0.0"
+    "@radix-ui/react-collection" "1.0.1"
+    "@radix-ui/react-compose-refs" "1.0.0"
+    "@radix-ui/react-context" "1.0.0"
+    "@radix-ui/react-direction" "1.0.0"
+    "@radix-ui/react-primitive" "1.0.1"
+    "@radix-ui/react-use-controllable-state" "1.0.0"
+    "@radix-ui/react-use-layout-effect" "1.0.0"
+    "@radix-ui/react-use-previous" "1.0.0"
+    "@radix-ui/react-use-size" "1.0.0"
+
 "@radix-ui/[email protected]":
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-slot/-/react-slot-1.0.0.tgz#7fa805b99891dea1e862d8f8fbe07f4d6d0fd698"
@@ -740,6 +853,14 @@
     "@babel/runtime" "^7.13.10"
     "@radix-ui/react-compose-refs" "1.0.0"
 
+"@radix-ui/[email protected]":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-slot/-/react-slot-1.0.1.tgz#e7868c669c974d649070e9ecbec0b367ee0b4d81"
+  integrity sha512-avutXAFL1ehGvAXtPquu0YK5oz6ctS474iM3vNGQIkswrVhdrS52e3uoMQBzZhNRAIE0jBnUyXWNmSjGHhCFcw==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-compose-refs" "1.0.0"
+
 "@radix-ui/react-switch@^1.0.0":
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-switch/-/react-switch-1.0.0.tgz#f714eb81da7b16dae7f5ab6e774e3194d8f009b6"
@@ -802,6 +923,14 @@
     "@babel/runtime" "^7.13.10"
     "@radix-ui/react-use-callback-ref" "1.0.0"
 
+"@radix-ui/[email protected]":
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-use-escape-keydown/-/react-use-escape-keydown-1.0.2.tgz#09ab6455ab240b4f0a61faf06d4e5132c4d639f6"
+  integrity sha512-DXGim3x74WgUv+iMNCF+cAo8xUHHeqvjx8zs7trKf+FkQKPQXLk2sX7Gx1ysH7Q76xCpZuxIJE7HLPxRE+Q+GA==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-use-callback-ref" "1.0.0"
+
 "@radix-ui/[email protected]":
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.0.0.tgz#2fc19e97223a81de64cd3ba1dc42ceffd82374dc"
@@ -3782,6 +3911,17 @@ [email protected]:
     use-callback-ref "^1.3.0"
     use-sidecar "^1.1.2"
 
[email protected]:
+  version "2.5.5"
+  resolved "https://registry.yarnpkg.com/react-remove-scroll/-/react-remove-scroll-2.5.5.tgz#1e31a1260df08887a8a0e46d09271b52b3a37e77"
+  integrity sha512-ImKhrzJJsyXJfBZ4bzu8Bwpka14c/fQt0k+cyFp/PBhTfyDnU5hjOtM4AG/0AMyy8oKzOTR0lDgJIM7pYXI0kw==
+  dependencies:
+    react-remove-scroll-bar "^2.3.3"
+    react-style-singleton "^2.2.1"
+    tslib "^2.1.0"
+    use-callback-ref "^1.3.0"
+    use-sidecar "^1.1.2"
+
 react-style-singleton@^2.2.1:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/react-style-singleton/-/react-style-singleton-2.2.1.tgz#f99e420492b2d8f34d38308ff660b60d0b1205b4"