hide color picker hot keys

packages/excalidraw/components/ColorPicker/ColorPicker.tsx

@@ -217,6 +217,7 @@ const ColorPickerPopupContent = ({
             appState.stylesPanelMode === "compact" ||
             appState.stylesPanelMode === "mobile"
           }
+          showHotKey={appState.stylesPanelMode !== "mobile"}
         >
           {colorInputJSX}
         </Picker>

packages/excalidraw/components/ColorPicker/Picker.tsx

@@ -40,6 +40,7 @@ interface PickerProps {
   showTitle?: boolean;
   onEyeDropperToggle: (force?: boolean) => void;
   onEscape: (event: React.KeyboardEvent | KeyboardEvent) => void;
+  showHotKey?: boolean;
 }
 
 export const Picker = React.forwardRef(
@@ -55,6 +56,7 @@ export const Picker = React.forwardRef(
       showTitle,
       onEyeDropperToggle,
       onEscape,
+      showHotKey = true,
     }: PickerProps,
     ref,
   ) => {
@@ -187,12 +189,18 @@ export const Picker = React.forwardRef(
               palette={palette}
               onChange={onChange}
               activeShade={activeShade}
+              showHotKey={showHotKey}
             />
           </div>
 
           <div>
             <PickerHeading>{t("colorPicker.shades")}</PickerHeading>
-            <ShadeList color={color} onChange={onChange} palette={palette} />
+            <ShadeList
+              color={color}
+              onChange={onChange}
+              palette={palette}
+              showHotKey={showHotKey}
+            />
           </div>
           {children}
         </div>

packages/excalidraw/components/ColorPicker/PickerColorList.tsx

@@ -20,6 +20,7 @@ interface PickerColorListProps {
   color: string | null;
   onChange: (color: string) => void;
   activeShade: number;
+  showHotKey?: boolean;
 }
 
 const PickerColorList = ({
@@ -27,6 +28,7 @@ const PickerColorList = ({
   color,
   onChange,
   activeShade,
+  showHotKey = true,
 }: PickerColorListProps) => {
   const colorObj = getColorNameAndShadeFromColor({
     color,
@@ -82,7 +84,7 @@ const PickerColorList = ({
             key={key}
           >
             <div className="color-picker__button-outline" />
-            <HotkeyLabel color={color} keyLabel={keybinding} />
+            {showHotKey && <HotkeyLabel color={color} keyLabel={keybinding} />}
           </button>
         );
       })}

packages/excalidraw/components/ColorPicker/ShadeList.tsx

@@ -16,9 +16,15 @@ interface ShadeListProps {
   color: string | null;
   onChange: (color: string) => void;
   palette: ColorPaletteCustom;
+  showHotKey?: boolean;
 }
 
-export const ShadeList = ({ color, onChange, palette }: ShadeListProps) => {
+export const ShadeList = ({
+  color,
+  onChange,
+  palette,
+  showHotKey,
+}: ShadeListProps) => {
   const colorObj = getColorNameAndShadeFromColor({
     color: color || "transparent",
     palette,
@@ -67,7 +73,9 @@ export const ShadeList = ({ color, onChange, palette }: ShadeListProps) => {
               }}
             >
               <div className="color-picker__button-outline" />
-              <HotkeyLabel color={color} keyLabel={i + 1} isShade />
+              {showHotKey && (
+                <HotkeyLabel color={color} keyLabel={i + 1} isShade />
+              )}
             </button>
           ))}
         </div>