feat: whiteboard (#15)

* first whiteboard testing

* revert accidental ctp-frappe change

* Revert "revert accidental ctp-frappe change"

This reverts commit 11eee57.

* actually reset ctp-frappe accidental change

* remove old fn

* fix: minor color changes

---------

Co-authored-by: Soumik <[email protected]>

scss/_ctp-vars.scss

@@ -94,6 +94,49 @@
   --ctp-success-color: var(--ctp-green);
   --ctp-info-color: var(--ctp-yellow);
 
+  /* Whiteboard */
+
+  /* Whiteboard object colors */
+
+  --ctp-wb-background-color-gray: color-mix(in srgb, rgb(var(--ctp-gray)), rgb(var(--ctp-base)) 60%);
+  --ctp-wb-background-color-red: color-mix(in srgb, rgb(var(--ctp-red)), rgb(var(--ctp-base)) 60%);
+  --ctp-wb-background-color-yellow: color-mix(in srgb, rgb(var(--ctp-yellow)), rgb(var(--ctp-base)) 60%);
+  --ctp-wb-background-color-green: color-mix(in srgb, rgb(var(--ctp-green)), rgb(var(--ctp-base)) 60%);
+  --ctp-wb-background-color-blue: color-mix(in srgb, rgb(var(--ctp-blue)), rgb(var(--ctp-base)) 60%);
+  --ctp-wb-background-color-purple: color-mix(in srgb, rgb(var(--ctp-mauve)), rgb(var(--ctp-base)) 60%);
+  --ctp-wb-background-color-pink: color-mix(in srgb, rgb(var(--ctp-pink)), rgb(var(--ctp-base)) 60%);
+
+  // NOTE: drawn lines with the pencil use the text color
+  // and not this stroke color
+  --ctp-wb-stroke-color-gray: rgb(var(--ctp-overlay2));
+  --ctp-wb-stroke-color-red: rgb(var(--ctp-red));
+  --ctp-wb-stroke-color-yellow: rgb(var(--ctp-yellow));
+  --ctp-wb-stroke-color-green: rgb(var(--ctp-green));
+  --ctp-wb-stroke-color-blue: rgb(var(--ctp-blue));
+  --ctp-wb-stroke-color-purple: rgb(var(--ctp-mauve));
+  --ctp-wb-stroke-color-pink: rgb(var(--ctp-pink));
+
+  --ctp-wb-text-color-gray: rgb(var(--ctp-overlay2));
+  --ctp-wb-text-color-red: rgb(var(--ctp-red));
+  --ctp-wb-text-color-yellow: rgb(var(--ctp-yellow));
+  --ctp-wb-text-color-green: rgb(var(--ctp-green));
+  --ctp-wb-text-color-blue: rgb(var(--ctp-blue));
+  --ctp-wb-text-color-purple: rgb(var(--ctp-mauve));
+  --ctp-wb-text-color-pink: rgb(var(--ctp-pink));
+
+  // since text and lines share a color, it is not possible to have a fill color
+  // with the regular ctp colors
+  // so the options are to either shade the fill/bg color or
+  // override the text color variable inside the shape labels
+
+  --ctp-wb-shape-label-color-gray: rgb(var(--ctp-gray));
+  --ctp-wb-shape-label-color-red: rgb(var(--ctp-red));
+  --ctp-wb-shape-label-color-yellow: rgb(var(--ctp-yellow));
+  --ctp-wb-shape-label-color-green: rgb(var(--ctp-green));
+  --ctp-wb-shape-label-color-blue: var(--ctp-blue);
+  --ctp-wb-shape-label-color-purple: rgb(var(--ctp-purple));
+  --ctp-wb-shape-label-color-pink: rgb(var(--ctp-pink));
+
   // following used in _custom.scss
 
   // Switches
@@ -116,7 +159,7 @@
   // Markdown
   --ctp-text-highlight: rgb(var(--ctp-yellow)); // settings?
   --ctp-bullet-thread-color: rgb(var(--ctp-accent, var(--ctp-teal)));
-  
+
   --ctp-dropdown-border-color: var(--color-base-50);
 
   // Full accent overrides
@@ -127,4 +170,32 @@
   --ctp-text-strikethrough: var(--ctp-accent, var(--ctp-maroon));
   --ctp-blockquote-line: var(--ctp-accent);
   --ctp-active-setting: var(--ctp-accent, var(--ctp-blue));
+
+  // Whiteboard Buttons
+
+  // selected tool button
+  --ctp-wb-button-selected-foreground: var(--ctp-accent, var(--ctp-mauve));
+  --ctp-wb-button-selected-background: var(--ctp-surface0);
+
+  // regular tool button
+  --ctp-wb-button-foreground: var(--ctp-text);
+  --ctp-wb-button-menu-foreground: var(--ctp-accent, var(--ctp-teal));
+
+  // double click or "add block or page" from toolbar -> bottom icons
+  --ctp-wb-button-type-tag-background-active: var(--ctp-accent, var(--ctp-mauve));
+  --ctp-wb-button-type-tag-background-inactive: var(--ctp-surface0);
+  --ctp-wb-button-type-tag-foreground: var(--ctp-text);
+
+  // page reference block -> hover -> below button to referenced page
+  --ctp-wb-quick-links-button: var(--ctp-accent, var(--ctp-blue));
+  --ctp-wb-quick-links-button-hover: var(--ctp-sky);
+
+  // select multiple objects -> right click -> align buttons on top
+  --ctp-wb-layout-button-foreground: var(--ctp-accent, var(--ctp-teal));
+
+  // selected item bg in e.g. a dropdown
+  --ctp-tl-select-input-select-item: var(--ctp-surface2);
+  --ctp-tl-selectFill: var(--ctp-accent, var(--ctp-blue));
+  --ctp-tl-selectStroke: var(--ctp-accent, var(--ctp-blue));
+
 }

scss/_custom.scss

@@ -150,7 +150,7 @@ button.button.icon:hover {
 }
 
 
-// SideBar 
+// SideBar
 .cp__sidebar-left-layout a {
     color: inherit;
 }
@@ -181,7 +181,7 @@ html[data-theme=dark] .cp__right-sidebar-topbar button {
             color: var(--ctp-primary-text-color);
         }
     }
-    
+
 }
 
 .ls-block .with-bg-color:is(h1,h2,h3,h4,h5,h6) {
@@ -268,3 +268,94 @@ $pallete: (
 .ui__ac-group-name {
     background: var(--ctp-tertiary-background-color);
 }
+
+
+// Whiteboard
+
+// Whiteboard tool button
+.tl-button[data-selected=true] {
+  background: rgb(var(--ctp-wb-button-selected-background));
+  i {
+    color: rgb(var(--ctp-wb-button-selected-foreground));
+  }
+}
+
+.ti, .tie {
+  color: rgb(var(--ctp-wb-button-foreground));
+}
+.tl-context-bar {
+  .ti, .tie {
+    color: rgb(var(--ctp-wb-button-menu-foreground));
+  }
+}
+
+// double click or "add block or page" from toolbar -> icons
+// by default, bg color is hardcoded
+.tl-type-tag {
+  background-color: rgb(var(--ctp-wb-button-type-tag-background-inactive));
+  border-color: rgb(var(--ctp-wb-button-type-tag-background-inactive));
+  // color: #ff00ff; // fg color has to be set on inner i element (.tie)
+
+  .tie {
+    color: rgb(var(--ctp-wb-button-type-tag-foreground));
+  }
+}
+
+html[data-theme=dark] .tl-type-tag[data-active=true] {
+
+  background-color: rgba(var(--ctp-wb-button-type-tag-background-active), 0.8);
+
+  border-color: rgb(var(--ctp-wb-button-type-tag-background-active));
+
+  .tie {
+    color: rgb(var(--ctp-wb-button-type-tag-foreground));
+  }
+}
+
+// Whiteboard context menu button icon
+.tl-menu-item i {
+    color: rgb(var(--ctp-wb-button-menu-foreground));
+}
+
+// Button that appears below a page reference block (on hover)
+.tl-quick-links-row:first-child {
+  background-color: rgb(var(--ctp-wb-quick-links-button));
+
+  :hover {
+    background-color: rgb(var(--ctp-wb-quick-links-button-hover));
+  }
+}
+
+// selected item bg in e.g. a dropdown
+.tl-select-input-select-item[data-state=checked] {
+  background: rgb(var(--ctp-tl-select-input-select-item));
+}
+
+// align-buttons that appear when right clicking after
+// selecting multiple objects
+i[class*="ti-layout-"] {
+  color: rgb(var(--ctp-wb-layout-button-foreground));
+}
+
+// these are the colors that appear when selecting a color (e.g. for fill)
+.bg-gray-500 {
+  background-color: rgb(var(--ctp-gray));
+}
+.bg-red-500 {
+  background-color: rgb(var(--ctp-red));
+}
+.bg-yellow-500 {
+  background-color: rgb(var(--ctp-yellow));
+}
+.bg-green-500 {
+  background-color: rgb(var(--ctp-green));
+}
+.bg-blue-500 {
+  background-color: rgb(var(--ctp-blue));
+}
+.bg-purple-500 {
+  background-color: rgb(var(--ctp-mauve));
+}
+.bg-pink-500 {
+  background-color: rgb(var(--ctp-pink));
+}

scss/_ls-vars.scss

@@ -3,6 +3,20 @@
   --ls-error-color: var(--ctp-error-color);
   --ls-warning-color: var(--ctp-warning-color);
   --ls-success-color: var(--ctp-success-color);
+  .logseq-tldraw {
+    --tl-selectFill: rgba(var(--ctp-tl-selectFill), 0.05);
+    --tl-selectStroke: rgb(var(--ctp-tl-selectStroke));
+  }
+  .tl-text-label-inner-wrapper {
+    // this is for overriding the text colors inside shapes (e.g. the label color of a rectangle)
+    --ls-wb-text-color-gray: var(--ctp-wb-shape-label-color-gray);
+    --ls-wb-text-color-red: var(--ctp-wb-shape-label-color-red);
+    --ls-wb-text-color-yellow: var(--ctp-wb-shape-label-color-yellow);
+    --ls-wb-text-color-green: var(--ctp-wb-shape-label-color-green);
+    --ls-wb-text-color-blue: var(--ctp-wb-shape-label-color-blue);
+    --ls-wb-text-color-purple: var(--ctp-wb-shape-label-color-purple);
+    --ls-wb-text-color-pink: var(--ctp-wb-shape-label-color-pink);
+  }
 }
 
 @media (prefers-color-scheme: dark) {
@@ -96,7 +110,7 @@ html[data-theme="dark"] {
   --ls-highlight-color-blue: var(--ctp-highlight-color-blue);
   --ls-highlight-color-purple: var(--ctp-highlight-color-purple);
   --ls-highlight-color-pink: var(--ctp-highlight-color-pink);
-  
+
   --ls-error-text-color: var(--ctp-error-text-color);
   --ls-error-background-color: var(--ctp-error-background-color);
 
@@ -108,4 +122,33 @@ html[data-theme="dark"] {
 
   --ls-focus-ring-color: var(--ctp-focus-ring-color);
   --ls-header-button-background: var(--ctp-header-button-background);
-}
+
+  /* Whiteboard */
+
+  /* Whiteboard object colors */
+
+  --ls-wb-background-color-gray: var(--ctp-wb-background-color-gray);
+  --ls-wb-background-color-red: var(--ctp-wb-background-color-red);
+  --ls-wb-background-color-yellow: var(--ctp-wb-background-color-yellow);
+  --ls-wb-background-color-green: var(--ctp-wb-background-color-green);
+  --ls-wb-background-color-blue: var(--ctp-wb-background-color-blue);
+  --ls-wb-background-color-purple: var(--ctp-wb-background-color-purple);
+  --ls-wb-background-color-pink: var(--ctp-wb-background-color-pink);
+
+  --ls-wb-stroke-color-gray: var(--ctp-wb-stroke-color-gray);
+  --ls-wb-stroke-color-red: var(--ctp-wb-stroke-color-red);
+  --ls-wb-stroke-color-yellow: var(--ctp-wb-stroke-color-yellow);
+  --ls-wb-stroke-color-green: var(--ctp-wb-stroke-color-green);
+  --ls-wb-stroke-color-blue: var(--ctp-wb-stroke-color-blue);
+  --ls-wb-stroke-color-purple: var(--ctp-wb-stroke-color-purple);
+  --ls-wb-stroke-color-pink: var(--ctp-wb-stroke-color-pink);
+
+  --ls-wb-text-color-gray: var(--ctp-wb-text-color-gray);
+  --ls-wb-text-color-red: var(--ctp-wb-text-color-red);
+  --ls-wb-text-color-yellow: var(--ctp-wb-text-color-yellow);
+  --ls-wb-text-color-green: var(--ctp-wb-text-color-green);
+  --ls-wb-text-color-blue: var(--ctp-wb-text-color-blue);
+  --ls-wb-text-color-purple: var(--ctp-wb-text-color-purple);
+  --ls-wb-text-color-pink: var(--ctp-wb-text-color-pink);
+
+}