tweak border and bg

packages/common/src/constants.ts

@@ -539,5 +539,5 @@ export const DOUBLE_TAP_POSITION_THRESHOLD = 35;
 
 // glass background for mobile action buttons
 export const MOBILE_ACTION_BUTTON_BG = {
-  background: "var(--island-bg-color)",
+  background: "var(--mobile-action-button-bg)",
 } as const;

packages/excalidraw/components/Actions.scss

@@ -122,7 +122,7 @@
       justify-content: center;
       transition: all 0.2s ease;
 
-      background: var(--island-bg-color);
+      background: var(--mobile-action-button-bg);
 
       svg {
         width: 1rem;
@@ -133,7 +133,7 @@
       &.active {
         background: var(
           --color-surface-primary-container,
-          var(--island-bg-color)
+          var(--mobile-action-button-bg)
         );
       }
     }
@@ -169,7 +169,7 @@
       width: var(--mobile-action-button-size);
       height: var(--mobile-action-button-size);
 
-      background-color: var(--island-bg-color);
+      background: var(--mobile-action-button-bg);
 
       &:hover {
         background-color: transparent;

packages/excalidraw/components/ColorPicker/ColorPicker.scss

@@ -168,6 +168,10 @@
       width: var(--mobile-action-button-size);
       height: var(--mobile-action-button-size);
     }
+
+    &.mobile-border {
+      border: 1px solid var(--mobile-color-border);
+    }
   }
 
   .color-picker__button__hotkey-label {

packages/excalidraw/components/ColorPicker/ColorPicker.tsx

@@ -231,7 +231,7 @@ const ColorPickerTrigger = ({
   label,
   color,
   type,
-  compactMode = false,
+  stylesPanelMode,
   mode = "background",
   onToggle,
   editingTextElement,
@@ -239,7 +239,7 @@ const ColorPickerTrigger = ({
   color: string | null;
   label: string;
   type: ColorPickerType;
-  compactMode?: boolean;
+  stylesPanelMode?: AppState["stylesPanelMode"];
   mode?: "background" | "stroke";
   onToggle: () => void;
   editingTextElement?: boolean;
@@ -264,7 +264,9 @@ const ColorPickerTrigger = ({
         "is-transparent": !color || color === "transparent",
         "has-outline":
           !color || !isColorDark(color, COLOR_OUTLINE_CONTRAST_THRESHOLD),
-        "compact-sizing": compactMode,
+        "compact-sizing":
+          stylesPanelMode === "compact" || stylesPanelMode === "mobile",
+        "mobile-border": stylesPanelMode === "mobile",
       })}
       aria-label={label}
       style={color ? { "--swatch-color": color } : undefined}
@@ -277,20 +279,22 @@ const ColorPickerTrigger = ({
       onClick={handleClick}
     >
       <div className="color-picker__button-outline">{!color && slashIcon}</div>
-      {compactMode && color && mode === "stroke" && (
+      {(stylesPanelMode === "compact" || stylesPanelMode === "mobile") &&
-        <div className="color-picker__button-background">
+        color &&
-          <span
+        mode === "stroke" && (
-            style={{
+          <div className="color-picker__button-background">
-              color:
+            <span
-                color && isColorDark(color, COLOR_OUTLINE_CONTRAST_THRESHOLD)
+              style={{
-                  ? "#fff"
+                color:
-                  : "#111",
+                  color && isColorDark(color, COLOR_OUTLINE_CONTRAST_THRESHOLD)
-            }}
+                    ? "#fff"
-          >
+                    : "#111",
-            {strokeIcon}
+              }}
-          </span>
+            >
-        </div>
+              {strokeIcon}
-      )}
+            </span>
+          </div>
+        )}
     </Popover.Trigger>
   );
 };
@@ -305,12 +309,15 @@ export const ColorPicker = ({
   topPicks,
   updateData,
   appState,
-  compactMode = false,
 }: ColorPickerProps) => {
   const openRef = useRef(appState.openPopup);
   useEffect(() => {
     openRef.current = appState.openPopup;
   }, [appState.openPopup]);
+  const compactMode =
+    appState.stylesPanelMode === "compact" ||
+    appState.stylesPanelMode === "mobile";
+
   return (
     <div>
       <div
@@ -342,7 +349,7 @@ export const ColorPicker = ({
             color={color}
             label={label}
             type={type}
-            compactMode={compactMode}
+            stylesPanelMode={appState.stylesPanelMode}
             mode={type === "elementStroke" ? "stroke" : "background"}
             editingTextElement={!!appState.editingTextElement}
             onToggle={() => {

packages/excalidraw/css/theme.scss

@@ -8,6 +8,8 @@
   --button-gray-1: #{$oc-gray-2};
   --button-gray-2: #{$oc-gray-4};
   --button-gray-3: #{$oc-gray-5};
+  --mobile-action-button-bg: rgba(255, 255, 255, 0.35);
+  --mobile-color-border: var(--default-border-color);
   --button-special-active-bg-color: #{$oc-green-0};
   --dialog-border-color: var(--color-gray-20);
   --dropdown-icon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="292.4" height="292.4" viewBox="0 0 292 292"><path d="M287 197L159 69c-4-3-8-5-13-5s-9 2-13 5L5 197c-3 4-5 8-5 13s2 9 5 13c4 4 8 5 13 5h256c5 0 9-1 13-5s5-8 5-13-1-9-5-13z"/></svg>');
@@ -182,6 +184,8 @@
     --button-gray-1: #363636;
     --button-gray-2: #272727;
     --button-gray-3: #222;
+    --mobile-action-button-bg: var(--island-bg-color);
+    --mobile-color-border: rgba(255, 255, 255, 0.85);
     --button-special-active-bg-color: #204624;
     --dialog-border-color: var(--color-gray-80);
     --dropdown-icon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="292.4" height="292.4" viewBox="0 0 292 292"><path fill="%23ced4da" d="M287 197L159 69c-4-3-8-5-13-5s-9 2-13 5L5 197c-3 4-5 8-5 13s2 9 5 13c4 4 8 5 13 5h256c5 0 9-1 13-5s5-8 5-13-1-9-5-13z"/></svg>');