diff --git a/packages/excalidraw/components/ColorPicker/ColorPicker.tsx b/packages/excalidraw/components/ColorPicker/ColorPicker.tsx
index fa966db53..35c79ccd5 100644
--- a/packages/excalidraw/components/ColorPicker/ColorPicker.tsx
+++ b/packages/excalidraw/components/ColorPicker/ColorPicker.tsx
@@ -217,6 +217,7 @@ const ColorPickerPopupContent = ({
appState.stylesPanelMode === "compact" ||
appState.stylesPanelMode === "mobile"
}
+ showHotKey={appState.stylesPanelMode !== "mobile"}
>
{colorInputJSX}
diff --git a/packages/excalidraw/components/ColorPicker/Picker.tsx b/packages/excalidraw/components/ColorPicker/Picker.tsx
index e9943a858..9c48c5807 100644
--- a/packages/excalidraw/components/ColorPicker/Picker.tsx
+++ b/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}
/>
{t("colorPicker.shades")}
-
+
{children}
diff --git a/packages/excalidraw/components/ColorPicker/PickerColorList.tsx b/packages/excalidraw/components/ColorPicker/PickerColorList.tsx
index 4fd6815e4..13928f023 100644
--- a/packages/excalidraw/components/ColorPicker/PickerColorList.tsx
+++ b/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}
>
-
+ {showHotKey && }
);
})}
diff --git a/packages/excalidraw/components/ColorPicker/ShadeList.tsx b/packages/excalidraw/components/ColorPicker/ShadeList.tsx
index db33402b0..2c17c57ed 100644
--- a/packages/excalidraw/components/ColorPicker/ShadeList.tsx
+++ b/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) => {
}}
>
-
+ {showHotKey && (
+
+ )}
))}