proper fix of range

packages/common/src/constants.ts

@@ -131,6 +131,7 @@ export const CLASSES = {
   ZOOM_ACTIONS: "zoom-actions",
   SEARCH_MENU_INPUT_WRAPPER: "layer-ui__search-inputWrapper",
   CONVERT_ELEMENT_TYPE_POPUP: "ConvertElementTypePopup",
+  SHAPE_ACTIONS_THEME_SCOPE: "shape-actions-theme-scope",
 };
 
 export const CJK_HAND_DRAWN_FALLBACK_FONT = "Xiaolai";

packages/excalidraw/components/Actions.scss

@@ -195,3 +195,13 @@
     }
   }
 }
+
+.shape-actions-theme-scope {
+  --button-border: transparent;
+  --button-bg: var(--color-surface-mid);
+}
+
+:root.theme--dark .shape-actions-theme-scope {
+  --button-hover-bg: #363541;
+  --button-bg: var(--color-surface-high);
+}

packages/excalidraw/components/Actions.tsx

@@ -393,6 +393,7 @@ export const CompactShapeActions = ({
             </Popover.Trigger>
             {strokePopoverOpen && (
               <PropertiesPopover
+                className={CLASSES.SHAPE_ACTIONS_THEME_SCOPE}
                 container={container}
                 style={{ maxWidth: "13rem" }}
                 onClose={() => setStrokePopoverOpen(false)}
@@ -519,6 +520,7 @@ export const CompactShapeActions = ({
               </Popover.Trigger>
               {appState.openPopup === "textAlign" && (
                 <PropertiesPopover
+                  className={CLASSES.SHAPE_ACTIONS_THEME_SCOPE}
                   container={container}
                   style={{ maxWidth: "13rem" }}
                   onClose={() => setAppState({ openPopup: null })}
@@ -572,6 +574,7 @@ export const CompactShapeActions = ({
             </Popover.Trigger>
             {otherActionsPopoverOpen && (
               <PropertiesPopover
+                className={CLASSES.SHAPE_ACTIONS_THEME_SCOPE}
                 container={container}
                 style={{
                   maxWidth: "12rem",

packages/excalidraw/components/LayerUI.tsx

@@ -243,10 +243,7 @@ const LayerUI = ({
       >
         {isTablet ? (
           <Island
-            className={clsx(
-              // CLASSES.SHAPE_ACTIONS_MENU,
-              "compact-shape-actions-island",
-            )}
+            className={clsx("compact-shape-actions-island")}
             padding={0}
             style={{
               // we want to make sure this doesn't overflow so subtracting the