@elementor/editor-editing-panel 3.33.0-102 → 3.33.0-104

package/dist/index.js

@@ -5545,7 +5545,7 @@ function useResetStyleValueProps() {
 }
 
 // src/styles-inheritance/init-styles-inheritance-transformers.ts
-var import_editor_canvas10 = require("@elementor/editor-canvas");
+var import_editor_canvas11 = require("@elementor/editor-canvas");
 
 // src/styles-inheritance/consts.ts
 var excludePropTypeTransformers = /* @__PURE__ */ new Set([
@@ -5665,9 +5665,33 @@ var backgroundOverlayTransformer = (0, import_editor_canvas9.createTransformer)(
   return /* @__PURE__ */ React100.createElement(import_ui52.Stack, { direction: "column" }, values.map((item, index) => /* @__PURE__ */ React100.createElement(import_ui52.Stack, { key: index }, item)));
 });
 
+// src/styles-inheritance/transformers/color-transformer.tsx
+var React101 = __toESM(require("react"));
+var import_editor_canvas10 = require("@elementor/editor-canvas");
+var import_ui53 = require("@elementor/ui");
+function isValidCSSColor(value) {
+  if (!value.trim()) {
+    return false;
+  }
+  return CSS.supports("color", value.trim());
+}
+var StyledColorIndicator = (0, import_ui53.styled)(import_ui53.UnstableColorIndicator)(({ theme }) => ({
+  width: "1em",
+  height: "1em",
+  borderRadius: `${theme.shape.borderRadius / 2}px`,
+  outline: `1px solid ${theme.palette.action.disabled}`,
+  flexShrink: 0
+}));
+var colorTransformer = (0, import_editor_canvas10.createTransformer)((value) => {
+  if (!isValidCSSColor(value)) {
+    return value;
+  }
+  return /* @__PURE__ */ React101.createElement(import_ui53.Stack, { direction: "row", gap: 1, alignItems: "center" }, /* @__PURE__ */ React101.createElement(StyledColorIndicator, { size: "inherit", component: "span", value }), /* @__PURE__ */ React101.createElement("span", null, value));
+});
+
 // src/styles-inheritance/init-styles-inheritance-transformers.ts
 function initStylesInheritanceTransformers() {
-  const originalStyleTransformers = import_editor_canvas10.styleTransformersRegistry.all();
+  const originalStyleTransformers = import_editor_canvas11.styleTransformersRegistry.all();
   Object.entries(originalStyleTransformers).forEach(([propType, transformer]) => {
     if (excludePropTypeTransformers.has(propType)) {
       return;
@@ -5675,13 +5699,14 @@ function initStylesInheritanceTransformers() {
     stylesInheritanceTransformersRegistry.register(propType, transformer);
   });
   stylesInheritanceTransformersRegistry.registerFallback(
-    (0, import_editor_canvas10.createTransformer)((value) => {
+    (0, import_editor_canvas11.createTransformer)((value) => {
       return value;
     })
   );
   registerCustomTransformers();
 }
 function registerCustomTransformers() {
+  stylesInheritanceTransformersRegistry.register("color", colorTransformer);
   stylesInheritanceTransformersRegistry.register("background-color-overlay", backgroundColorOverlayTransformer);
   stylesInheritanceTransformersRegistry.register(
     "background-gradient-overlay",