improve button styles

packages/excalidraw/components/Actions.scss

@@ -133,8 +133,10 @@
       }
 
       &.active {
-        background: var(--button-active-bg, var(--island-bg-color));
-        border-color: var(--button-active-border, var(--color-primary-darkest));
+        background: var(
+          --color-surface-primary-container,
+          var(--island-bg-color)
+        );
       }
     }
 
@@ -181,31 +183,6 @@
   overflow-x: hidden;
 }
 
-.compact-popover-content {
-  .popover-section {
-    margin-bottom: 1rem;
-
-    &:last-child {
-      margin-bottom: 0;
-    }
-
-    .popover-section-title {
-      font-size: 0.75rem;
-      font-weight: 600;
-      color: var(--color-text-secondary);
-      margin-bottom: 0.5rem;
-      text-transform: uppercase;
-      letter-spacing: 0.5px;
-    }
-
-    .buttonList {
-      display: flex;
-      flex-wrap: wrap;
-      gap: 0.25rem;
-    }
-  }
-}
-
 .mobile-shape-actions {
   z-index: 999;
   display: flex;

packages/excalidraw/components/MobileToolBar.scss

@@ -38,7 +38,10 @@
     }
 
     &.active {
-      background: var(--button-active-bg, var(--island-bg-color));
+      background: var(
+        --color-surface-primary-container,
+        var(--island-bg-color)
+      );
       border-color: var(--button-active-border, var(--color-primary-darkest));
     }
 

packages/excalidraw/components/MobileToolBar.tsx

@@ -14,7 +14,7 @@ import { useTunnels } from "../context/tunnels";
 import { HandButton } from "./HandButton";
 import { ToolButton } from "./ToolButton";
 import DropdownMenu from "./dropdownMenu/DropdownMenu";
-import { ToolWithPopup } from "./ToolWithPopup";
+import { ToolPopover } from "./ToolPopover";
 
 import {
   SelectionIcon,
@@ -198,7 +198,7 @@ export const MobileToolBar = ({
       />
 
       {/* Selection Tool */}
-      <ToolWithPopup
+      <ToolPopover
         app={app}
         options={SELECTION_TOOLS}
         activeTool={activeTool}
@@ -210,7 +210,7 @@ export const MobileToolBar = ({
           app.setActiveTool({ type: type as any });
           app.defaultSelectionTool = type as any;
         }}
-        getDisplayedOption={() =>
+        displayedOption={
           SELECTION_TOOLS.find(
             (tool) => tool.type === app.defaultSelectionTool,
           ) || SELECTION_TOOLS[0]
@@ -251,7 +251,7 @@ export const MobileToolBar = ({
       />
 
       {/* Rectangle */}
-      <ToolWithPopup
+      <ToolPopover
         app={app}
         options={SHAPE_TOOLS}
         activeTool={activeTool}
@@ -273,7 +273,7 @@ export const MobileToolBar = ({
           setLastActiveGenericShape(type as any);
           app.setActiveTool({ type: type as any });
         }}
-        getDisplayedOption={() =>
+        displayedOption={
           SHAPE_TOOLS.find((tool) => tool.type === lastActiveGenericShape) ||
           SHAPE_TOOLS[0]
         }
@@ -281,7 +281,7 @@ export const MobileToolBar = ({
       />
 
       {/* Arrow/Line */}
-      <ToolWithPopup
+      <ToolPopover
         app={app}
         options={LINEAR_ELEMENT_TOOLS}
         activeTool={activeTool}
@@ -300,7 +300,7 @@ export const MobileToolBar = ({
           setLastActiveLinearElement(type as any);
           app.setActiveTool({ type: type as any });
         }}
-        getDisplayedOption={() =>
+        displayedOption={
           LINEAR_ELEMENT_TOOLS.find(
             (tool) => tool.type === lastActiveLinearElement,
           ) || LINEAR_ELEMENT_TOOLS[0]

packages/excalidraw/types.ts

@@ -738,6 +738,7 @@ export type AppClassProperties = {
 
   onPointerUpEmitter: App["onPointerUpEmitter"];
   updateEditorAtom: App["updateEditorAtom"];
+  onPointerDownEmitter: App["onPointerDownEmitter"];
 
   defaultSelectionTool: "selection" | "lasso";
 };