fix: sync changes from v2 to v2-develop

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gisce/react-ooui",
-  "version": "2.53.0",
+  "version": "2.53.1",
   "engines": {
     "node": "20.5.0"
   },
@@ -33,6 +33,7 @@
     "analyze": "vite-bundle-visualizer"
   },
   "dependencies": {
+    "@ant-design/colors": "^7.2.0",
     "@ant-design/plots": "^1.0.9",
     "@gisce/fiber-diagram": "2.1.1",
     "@gisce/ooui": "2.27.0",

src/helpers/formHelper.ts

@@ -1,5 +1,6 @@
 import { One2manyItem } from "@/widgets/base/one2many/One2manyInput";
 import { Form as FormOoui } from "@gisce/ooui";
+import { generate } from "@ant-design/colors";
 
 const filteredValues = (values: any, fields: any) => {
   if (!fields) {
@@ -269,6 +270,17 @@ export const colorFromString = (text: string): string => {
   return hexColour;
 };
 
+export const getTextAndBackgroundColors = (
+  color: string,
+  intensity: number = 7,
+) => {
+  const colors = generate(color);
+  return {
+    text: colors[intensity],
+    background: `${color}40`,
+  };
+};
+
 export const colorTextFromBackground = (color: string) => {
   function getRGB(c: string): number {
     return parseInt(c, 16) || parseInt(c);

src/widgets/custom/Tag.tsx

@@ -3,7 +3,11 @@ import Field from "@/common/Field";
 import { WidgetProps } from "@/types";
 import { Tag as AntdTag, TagProps } from "antd";
 import { isPresetStatusColor, isPresetColor } from "antd/lib/_util/colors";
-import { colorFromString, colorFromBoolean } from "@/helpers/formHelper";
+import {
+  colorFromString,
+  colorFromBoolean,
+  getTextAndBackgroundColors,
+} from "@/helpers/formHelper";
 import { useLocale } from "@gisce/react-formiga-components";
 
 function capitalizeFirstLetter(text: string): string {
@@ -51,13 +55,14 @@ export const CustomTag = (props: TagProps) => {
   let { color } = props;
   let style = {};
   if (!isPresetStatusColor(props.color) && !isPresetColor(props.color)) {
+    const colors = getTextAndBackgroundColors(color as string);
     style = {
-      color,
-      borderColor: color,
+      color: colors.text,
+      borderColor: colors.text,
       borderStyle: "solid",
       borderWidth: "1px",
     };
-    color = `${color}20`;
+    color = colors.background;
   }
   return (
     <AntdTag {...props} style={style} color={color}>

src/widgets/custom/Tags.tsx

@@ -6,7 +6,11 @@ import { One2manyItem, One2manyValue } from "../base/one2many/One2manyInput";
 import useDeepCompareEffect from "use-deep-compare-effect";
 import { FormContext, FormContextType } from "@/context/FormContext";
 import { Alert, Select } from "antd";
-import { colorFromString, transformPlainMany2Ones } from "@/helpers/formHelper";
+import {
+  colorFromString,
+  transformPlainMany2Ones,
+  getTextAndBackgroundColors,
+} from "@/helpers/formHelper";
 import ConnectionProvider from "@/ConnectionProvider";
 import { CustomTag } from "@/widgets/custom/Tag";
 
@@ -128,13 +132,14 @@ export const TagsInput = (props: TagsInputProps) => {
       event.stopPropagation();
     };
     const color = colorFromString(label);
+    const colors = getTextAndBackgroundColors(color);
     return (
       <CustomTag
         color={color}
         onMouseDown={onPreventMouseDown}
         closable={closable}
         onClose={onClose}
-        closeIcon={<span style={{ color }}>X</span>}
+        closeIcon={<span style={{ color: colors.text }}>X</span>}
       >
         {label}
       </CustomTag>