From 7b24f7f57d6266cf9e1426e3895b4ca64a873e07 Mon Sep 17 00:00:00 2001
From: Adorian Doran <adorian@esevo.ro>
Date: Tue, 14 Oct 2025 22:24:37 +0300
Subject: [PATCH] style/canvas: tweak the UI

---
 apps/client/src/stylesheets/style.css         |  3 +-
 .../src/stylesheets/theme-next/base.css       |  1 +
 .../stylesheets/theme-next/notes/canvas.css   | 48 +++++++++++++++++++
 3 files changed, 51 insertions(+), 1 deletion(-)
 create mode 100644 apps/client/src/stylesheets/theme-next/notes/canvas.css

diff --git a/apps/client/src/stylesheets/style.css b/apps/client/src/stylesheets/style.css
index 44ed76997..653eca57f 100644
--- a/apps/client/src/stylesheets/style.css
+++ b/apps/client/src/stylesheets/style.css
@@ -371,7 +371,8 @@ button kbd {
 }
 
 body.desktop .dropdown-menu,
-body.desktop .tabulator-popup-container {
+body.desktop .tabulator-popup-container,
+:root .excalidraw .dropdown-menu .dropdown-menu-container {
     border: 1px solid var(--dropdown-border-color);
     column-rule: 1px solid var(--dropdown-border-color);
     box-shadow: 0px 10px 20px rgba(0, 0, 0, var(--dropdown-shadow-opacity));
diff --git a/apps/client/src/stylesheets/theme-next/base.css b/apps/client/src/stylesheets/theme-next/base.css
index a167c08b5..d75f17bf3 100644
--- a/apps/client/src/stylesheets/theme-next/base.css
+++ b/apps/client/src/stylesheets/theme-next/base.css
@@ -4,6 +4,7 @@
 @import url(./pages.css);
 @import url(./ribbon.css);
 @import url(./notes/text.css);
+@import url(./notes/canvas.css);
 @import url(./notes/collections/table.css);
 
 @font-face {
diff --git a/apps/client/src/stylesheets/theme-next/notes/canvas.css b/apps/client/src/stylesheets/theme-next/notes/canvas.css
new file mode 100644
index 000000000..00b801cf8
--- /dev/null
+++ b/apps/client/src/stylesheets/theme-next/notes/canvas.css
@@ -0,0 +1,48 @@
+:root .excalidraw {
+    --ui-font: var(--main-font-family);
+
+
+    /* Button hover background color */
+    --button-hover-bg: var(--hover-item-background-color);
+    --color-surface-high: var(--hover-item-background-color);
+
+
+    --button-active-border: transparent;
+    --color-brand-active: transparent;
+
+    --color-surface-mid: transparent;
+    --color-surface-low: transparent;
+
+    /* Selected button icon fill color */
+    --color-on-primary-container: var(--ck-editor-toolbar-button-on-color);
+    --color-primary: var(--ck-editor-toolbar-button-on-color);
+
+    /* Selected button icon background color */
+    --color-surface-primary-container: var(--ck-editor-toolbar-button-on-background);
+    --color-primary-light: var(--ck-editor-toolbar-button-on-background);
+
+    --island-bg-color: var(--floating-button-background-color);
+
+}
+
+.excalidraw .Island,
+.excalidraw .zoom-actions,
+.undo-redo-buttons {
+    box-shadow: 1px 1px 1px var(--floating-button-shadow-color);
+    backdrop-filter: blur(10px) saturate(6);
+}
+
+:root .excalidraw .main-menu-trigger,
+:root .excalidraw .sidebar-trigger,
+:root .excalidraw .help-icon  {
+    box-shadow: none;
+}
+
+/* Selected color outline */
+:root .excalidraw .color-picker__button.active .color-picker__button-outline {
+    box-shadow: 0 0 0 2px var(--input-focus-outline-color)
+}
+
+:root .excalidraw .buttonList label.active {
+    border-color: transparent;
+}
\ No newline at end of file