fix: color helper

packages/utils/src/color.ts

@@ -142,3 +142,40 @@ export const hslToHex = ({ h, s, l }: HSL): string => {
 
   return `#${f(0)}${f(8)}${f(4)}`;
 };
+
+/**
+ * @description Generates a deterministic HSL color based on input string
+ * @param {string} string - Input string to generate color from
+ * @returns {HSL} An object containing the HSL values
+ * @example
+ * generateRandomColor("hello") // returns consistent HSL color for "hello"
+ * generateRandomColor("") // returns { h: 0, s: 0, l: 0 }
+ */
+export const generateRandomColor = (string: string): HSL => {
+  if (!string)
+    return {
+      h: 0,
+      s: 0,
+      l: 0,
+    };
+
+  string = `${string}`;
+
+  const uniqueId = string.length.toString() + string; // Unique identifier based on string length
+  const combinedString = uniqueId + string;
+
+  const hash = Array.from(combinedString).reduce((acc, char) => {
+    const charCode = char.charCodeAt(0);
+    return (acc << 5) - acc + charCode;
+  }, 0);
+
+  const hue = hash % 360;
+  const saturation = 70; // Higher saturation for pastel colors
+  const lightness = 60; // Mid-range lightness for pastel colors
+
+  return {
+    h: hue,
+    s: saturation,
+    l: lightness,
+  };
+};

packages/utils/src/string.ts

@@ -90,36 +90,6 @@ export const copyUrlToClipboard = async (path: string) => {
   await copyTextToClipboard(`${originUrl}/${path}`);
 };
 
-/**
- * @description Generates a deterministic HSL color based on input string
- * @param {string} string - Input string to generate color from
- * @returns {string} HSL color string
- * @example
- * generateRandomColor("hello") // returns consistent HSL color for "hello"
- * generateRandomColor("") // returns "rgb(var(--color-primary-100))"
- */
-export const generateRandomColor = (string: string): string => {
-  if (!string) return "rgb(var(--color-primary-100))";
-
-  string = `${string}`;
-
-  const uniqueId = string.length.toString() + string;
-  const combinedString = uniqueId + string;
-
-  const hash = Array.from(combinedString).reduce((acc, char) => {
-    const charCode = char.charCodeAt(0);
-    return (acc << 5) - acc + charCode;
-  }, 0);
-
-  const hue = hash % 360;
-  const saturation = 70;
-  const lightness = 60;
-
-  const randomColor = `hsl(${hue}, ${saturation}%, ${lightness}%)`;
-
-  return randomColor;
-};
-
 /**
  * @description Gets first character of first word or first characters of first two words
  * @param {string} str - Input string

web/core/components/pages/editor/editor-body.tsx

@@ -14,12 +14,12 @@ import {
 import { TSearchEntityRequestPayload, TSearchResponse, TWebhookConnectionQueryParams } from "@plane/types";
 // plane ui
 import { Row } from "@plane/ui";
+import { generateRandomColor, hslToHex } from "@plane/utils";
 // components
 import { EditorMentionsRoot } from "@/components/editor";
 import { PageContentBrowser, PageContentLoader, PageEditorTitle } from "@/components/pages";
 // helpers
 import { cn, LIVE_BASE_PATH, LIVE_BASE_URL } from "@/helpers/common.helper";
-import { generateRandomColor } from "@/helpers/string.helper";
 // hooks
 import { useEditorMention } from "@/hooks/editor";
 import { useUser, useWorkspace } from "@/hooks/store";
@@ -145,7 +145,7 @@ export const PageEditorBody: React.FC<Props> = observer((props) => {
     () => ({
       id: currentUser?.id ?? "",
       name: currentUser?.display_name ?? "",
-      color: generateRandomColor(currentUser?.id ?? ""),
+      color: hslToHex(generateRandomColor(currentUser?.id ?? "")),
     }),
     [currentUser?.display_name, currentUser?.id]
   );

web/helpers/analytics.helper.ts

@@ -3,10 +3,11 @@ import { BarDatum } from "@nivo/bar";
 // plane imports
 import { ANALYTICS_DATE_KEYS, STATE_GROUPS } from "@plane/constants";
 import { IAnalyticsData, IAnalyticsParams, IAnalyticsResponse, TStateGroups } from "@plane/types";
+import { generateRandomColor, hslToHex } from "@plane/utils";
 // constants
 import { MONTHS_LIST } from "@/constants/calendar";
 // helpers
-import { addSpaceIfCamelCase, capitalizeFirstLetter, generateRandomColor } from "@/helpers/string.helper";
+import { addSpaceIfCamelCase, capitalizeFirstLetter } from "@/helpers/string.helper";
 
 export const convertResponseToBarGraphData = (
   response: IAnalyticsData | undefined,
@@ -64,7 +65,8 @@ export const generateBarColor = (
   params: IAnalyticsParams,
   type: "x_axis" | "segment"
 ): string => {
-  let color: string | undefined = generateRandomColor(value);
+  const defaultColor = hslToHex(generateRandomColor(value));
+  let color: string | undefined = defaultColor;
 
   if (!analytics) return color;
 
@@ -91,7 +93,7 @@ export const generateBarColor = (
               : "#ced4da";
   }
 
-  return color ?? generateRandomColor(value);
+  return color ?? defaultColor;
 };
 
 export const generateDisplayName = (

web/helpers/string.helper.ts

@@ -79,28 +79,6 @@ export const copyUrlToClipboard = async (path: string, addSlash: boolean = true)
   await copyTextToClipboard(`${originUrl}${addSlash ? "/" : ""}${path}`);
 };
 
-export const generateRandomColor = (string: string): string => {
-  if (!string) return "rgb(var(--color-primary-100))";
-
-  string = `${string}`;
-
-  const uniqueId = string.length.toString() + string; // Unique identifier based on string length
-  const combinedString = uniqueId + string;
-
-  const hash = Array.from(combinedString).reduce((acc, char) => {
-    const charCode = char.charCodeAt(0);
-    return (acc << 5) - acc + charCode;
-  }, 0);
-
-  const hue = hash % 360;
-  const saturation = 70; // Higher saturation for pastel colors
-  const lightness = 60; // Mid-range lightness for pastel colors
-
-  const randomColor = `hsl(${hue}, ${saturation}%, ${lightness}%)`;
-
-  return randomColor;
-};
-
 export const getFirstCharacters = (str: string) => {
   const words = str.trim().split(" ");
   if (words.length === 1) {