+ {(showThemeColors ||
+ (brandColors && Object.keys(brandColors).length > 0) ||
+ (showApplicationColors && applicationColors.length > 0)) && (
+
{Object.keys(TAILWIND_COLORS).map((colorKey, rowIndex) =>
Object.keys(get(TAILWIND_COLORS, `${colorKey}`)).map(
(singleColorKey, colIndex) => (
@@ -275,27 +295,6 @@ function ColorPickerPopup(props: ColorPickerPopupProps) {
),
),
)}
-
-
{
- setColor("#fff");
- changeColor("#fff", !e.isTrusted);
- }}
- tabIndex={-1}
- />
-
{
- setColor("transparent");
- changeColor("transparent", !e.isTrusted);
- }}
- tabIndex={-1}
- />
@@ -329,7 +328,7 @@ interface LeftIconProps {
}
function LeftIcon(props: LeftIconProps) {
- return props.color ? (
+ return isValidColor(props.color) ? (
{
props.changeColor(color, isUpdatedViaKeyboard);
@@ -417,7 +418,6 @@ const ColorPickerComponent = React.forwardRef(
}
break;
case "Enter":
- case " ":
emitKeyPressEvent(e.key);
(document.activeElement as any)?.click();
setTimeout(() => {
@@ -530,7 +530,9 @@ const ColorPickerComponent = React.forwardRef(
const handleChangeColor = (event: React.ChangeEvent) => {
const value = event.target.value;
- debouncedOnChange(value, true);
+ if (isValidColor(value)) {
+ debouncedOnChange(value, true);
+ }
setColor(value);
};
@@ -544,9 +546,20 @@ const ColorPickerComponent = React.forwardRef(
const handleInputClick = () => {
isClick.current = true;
+
+ if (isFullColorPicker && isOpen) {
+ setIsOpen(false);
+ }
+ };
+
+ const handleFullColorPickerClick = (value: boolean) => {
+ setFullColorPicker(value);
+ setIsOpen(false);
};
const handleOnInteraction = (nextOpenState: boolean) => {
+ if (isFullColorPicker && !isOpen) return;
+
if (isOpen !== nextOpenState) {
if (isClick.current) setIsOpen(true);
else setIsOpen(nextOpenState);
@@ -567,19 +580,26 @@ const ColorPickerComponent = React.forwardRef(
isOpen={isOpen}
minimal
modifiers={POPOVER_MODFIER}
+ onClosed={props.onPopupClosed}
onInteraction={handleOnInteraction}
popoverClassName="color-picker-input"
portalContainer={props.portalContainer}
>
+ !isFullColorPicker ? (
+
+ ) : null
}
onChange={handleChangeColor}
onClick={handleInputClick}
placeholder={placeholderText || "enter color name or hex"}
+ type={isFullColorPicker ? "color" : "text"}
value={color}
/>
@@ -593,6 +613,14 @@ const ColorPickerComponent = React.forwardRef(
showThemeColors={props.showThemeColors}
/>
+
+
+ {createMessage(FULL_COLOR_PICKER_LABEL)}
+
+
);
},
diff --git a/app/client/src/constants/ThemeConstants.tsx b/app/client/src/constants/ThemeConstants.tsx
index 7369a5e549..64f09ec6eb 100644
--- a/app/client/src/constants/ThemeConstants.tsx
+++ b/app/client/src/constants/ThemeConstants.tsx
@@ -13,101 +13,54 @@ export type TailwindColors = {
export const TAILWIND_COLORS: TailwindColors = {
gray: {
- 50: "#fafafa",
100: "#f4f4f5",
- 200: "#e4e4e7",
300: "#d4d4d8",
- 400: "#a1a1aa",
500: "#71717a",
- 600: "#52525b",
700: "#3f3f46",
- 800: "#27272a",
900: "#18181b",
},
red: {
- 50: "#fef2f2",
100: "#fee2e2",
- 200: "#fecaca",
300: "#fca5a5",
- 400: "#f87171",
500: "#ef4444",
- 600: "#dc2626",
700: "#b91c1c",
- 800: "#991b1b",
900: "#7f1d1d",
},
yellow: {
- 50: "#fefce8",
100: "#fef9c3",
- 200: "#fef08a",
300: "#fde047",
- 400: "#facc15",
500: "#eab308",
- 600: "#ca8a04",
700: "#a16207",
- 800: "#854d0e",
900: "#713f12",
},
green: {
- 50: "#f0fdf4",
100: "#dcfce7",
- 200: "#bbf7d0",
300: "#86efac",
- 400: "#4ade80",
500: "#22c55e",
- 600: "#16a34a",
700: "#15803d",
- 800: "#166534",
900: "#14532d",
},
blue: {
- 50: "#eff6ff",
100: "#dbeafe",
- 200: "#bfdbfe",
300: "#93c5fd",
- 400: "#60a5fa",
500: "#3b82f6",
- 600: "#2563eb",
700: "#1d4ed8",
- 800: "#1e40af",
900: "#1e3a8a",
},
- indigo: {
- 50: "#eef2ff",
- 100: "#e0e7ff",
- 200: "#c7d2fe",
- 300: "#a5b4fc",
- 400: "#818cf8",
- 500: "#6366f1",
- 600: "#4f46e5",
- 700: "#4338ca",
- 800: "#3730a3",
- 900: "#312e81",
- },
purple: {
- 50: "#faf5ff",
100: "#f3e8ff",
- 200: "#e9d5ff",
300: "#d8b4fe",
- 400: "#c084fc",
500: "#a855f7",
- 600: "#9333ea",
700: "#7e22ce",
- 800: "#6b21a8",
900: "#581c87",
},
pink: {
- 50: "#fdf2f8",
100: "#fce7f3",
- 200: "#fbcfe8",
300: "#f9a8d4",
- 400: "#f472b6",
500: "#ec4899",
- 600: "#db2777",
700: "#be185d",
- 800: "#9d174d",
900: "#831843",
},
};
diff --git a/app/client/src/pages/Editor/ThemePropertyPane/controls/ThemeColorControl.tsx b/app/client/src/pages/Editor/ThemePropertyPane/controls/ThemeColorControl.tsx
index df2a475baf..7d820b398e 100644
--- a/app/client/src/pages/Editor/ThemePropertyPane/controls/ThemeColorControl.tsx
+++ b/app/client/src/pages/Editor/ThemePropertyPane/controls/ThemeColorControl.tsx
@@ -80,6 +80,7 @@ function ThemeColorControl(props: ThemeColorControlProps) {
color={userDefinedColors[selectedColor]}
isOpen={autoFocus}
key={selectedColor}
+ onPopupClosed={() => setAutoFocus(false)}
portalContainer={
document.getElementById("app-settings-portal") || undefined
}
diff --git a/app/client/src/utils/helpers.test.ts b/app/client/src/utils/helpers.test.ts
index 6345e822ea..3604cd5674 100644
--- a/app/client/src/utils/helpers.test.ts
+++ b/app/client/src/utils/helpers.test.ts
@@ -1,6 +1,7 @@
import { RenderModes } from "constants/WidgetConstants";
import { ValidationTypes } from "constants/WidgetValidation";
import { EvaluationSubstitutionType } from "entities/DataTree/dataTreeFactory";
+import type { CanvasWidgetsReduxState } from "../reducers/entityReducers/canvasWidgetsReducer";
import { AutocompleteDataType } from "./autocomplete/AutocompleteDataType";
import {
flattenObject,
@@ -550,20 +551,30 @@ describe("#captureInvalidDynamicBindingPath", () => {
describe("#extractColorsFromString", () => {
it("Check if the extractColorsFromString returns rgb, rgb, hex color strings", () => {
- const borderWithHex = `2px solid ${Colors.GREEN}`;
- const borderWithRgb = "2px solid rgb(0,0,0)";
- const borderWithRgba = `2px solid ${Colors.BOX_SHADOW_DEFAULT_VARIANT1}`;
+ const widgets = {
+ 0: { color: `${Colors.GREEN}` },
+ 1: { color: "rgb(0,0,0)" },
+ 2: { color: `${Colors.BOX_SHADOW_DEFAULT_VARIANT1}` },
+ 3: { color: `LightGoldenrodYellow` },
+ 4: { color: `lch(54.292% 106.839 40.853)` },
+ } as unknown as CanvasWidgetsReduxState;
//Check Hex value
- expect(extractColorsFromString(borderWithHex)[0]).toEqual("#03b365");
-
- //Check rgba value
- expect(extractColorsFromString(borderWithRgba)[0]).toEqual(
- "rgba(0, 0, 0, 0.25)",
- );
+ expect(extractColorsFromString(widgets)[0]).toEqual("#03B365");
//Check rgb
- expect(extractColorsFromString(borderWithRgb)[0]).toEqual("rgb(0,0,0)");
+ expect(extractColorsFromString(widgets)[1]).toEqual("rgb(0,0,0)");
+
+ //Check rgba value
+ expect(extractColorsFromString(widgets)[2]).toEqual("rgba(0, 0, 0, 0.25)");
+
+ //Check name value
+ expect(extractColorsFromString(widgets)[3]).toEqual("LightGoldenrodYellow");
+
+ //Check lch value
+ expect(extractColorsFromString(widgets)[4]).toEqual(
+ "lch(54.292% 106.839 40.853)",
+ );
});
});
diff --git a/app/client/src/utils/helpers.tsx b/app/client/src/utils/helpers.tsx
index 60db2a6722..b4990917f2 100644
--- a/app/client/src/utils/helpers.tsx
+++ b/app/client/src/utils/helpers.tsx
@@ -35,6 +35,7 @@ import type { ContainerWidgetProps } from "widgets/ContainerWidget/widget";
import type { WidgetProps } from "widgets/BaseWidget";
import { getContainerIdForCanvas } from "sagas/WidgetOperationUtils";
import scrollIntoView from "scroll-into-view-if-needed";
+import validateColor from "validate-color";
export const snapToGrid = (
columnWidth: number,
@@ -757,28 +758,36 @@ export function getLogToSentryFromResponse(response?: ApiResponse) {
return response && response?.responseMeta?.status >= 500;
}
-const BLACKLIST_COLORS = ["#ffffff"];
-const HEX_REGEX = /#[0-9a-fA-F]{6}/gi;
-const RGB_REGEX = /rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*(\d+(?:\.\d+)?))?\)/gi;
-
/**
* extract colors from string
*
- * @param text
* @returns
+ * @param widgets
*/
-export function extractColorsFromString(text: string) {
+export function extractColorsFromString(widgets: CanvasWidgetsReduxState) {
const colors = new Set();
- [...(text.match(RGB_REGEX) || []), ...(text.match(HEX_REGEX) || [])]
- .filter((d) => BLACKLIST_COLORS.indexOf(d.toLowerCase()) === -1)
- .forEach((color) => {
- colors.add(color.toLowerCase());
+ Object.values(widgets).forEach((widget) => {
+ Object.values(widget).forEach((widgetProp) => {
+ if (isString(widgetProp) && validateColor(widgetProp)) {
+ colors.add(widgetProp);
+ }
});
+ });
return Array.from(colors) as Array
;
}
+/**
+ * validate color string
+ *
+ * @returns {boolean} true if string is valid color or includes url
+ * @param color
+ */
+export function isValidColor(color: string) {
+ return color?.includes("url") || validateColor(color);
+}
+
/*
* Function to merge property pane config of a widget
*
diff --git a/app/client/yarn.lock b/app/client/yarn.lock
index 4199b9cb70..fb21466e8a 100644
--- a/app/client/yarn.lock
+++ b/app/client/yarn.lock
@@ -9589,6 +9589,7 @@ __metadata:
unescape-js: ^1.1.4
url-search-params-polyfill: ^8.0.0
uuid: ^9.0.0
+ validate-color: ^2.2.4
webfontloader: ^1.6.28
webpack-merge: ^5.8.0
webpack-retry-chunk-load-plugin: ^3.1.1
@@ -28934,6 +28935,13 @@ __metadata:
languageName: node
linkType: hard
+"validate-color@npm:^2.2.4":
+ version: 2.2.4
+ resolution: "validate-color@npm:2.2.4"
+ checksum: ac9109e6347797300fd0a0b08d623acaf3cc295cc2077b9041119582c632eb56dc78e94b8f7f929754508974a8a0b63d296995106a20b237b3be5e89ff2c80f1
+ languageName: node
+ linkType: hard
+
"validate-npm-package-license@npm:^3.0.1":
version: 3.0.4
resolution: "validate-npm-package-license@npm:3.0.4"