@rovula/ui 0.0.30 → 0.0.32

package/src/stories/ColorPreview.tsx

@@ -1,45 +1,134 @@
-import React from "react";
+import { srgbToHex } from "@/utils/colors";
+import React, { useEffect, useMemo, useRef, useState } from "react";
+import { Popover, PopoverContent, PopoverTrigger } from "..";
 
-export default function ColorPreview({
-  colorName,
-  colorCode,
-  isSmall,
-}: {
-  colorName: string;
-  colorCode: string;
-  isSmall: boolean;
-}) {
-  if (isSmall) {
-    return (
-      <div className=" flex-1 h-[120px] flex flex-col rounded-xl shadow-lg overflow-hidden">
-        <div className="flex flex-1" style={{ backgroundColor: colorCode }} />
+export const ColorBox = ({ className }: { className: string }) => {
+  const boxRef = useRef<HTMLDivElement>(null);
+  const [hex, setHex] = useState("");
+  const [isOpen, setOpen] = useState(false);
+
+  useEffect(() => {
+    if (boxRef.current) {
+      const bgColor = window.getComputedStyle(boxRef.current).backgroundColor;
+      const hexColor = srgbToHex(bgColor);
+
+      setHex(hexColor);
+    }
+  }, []);
+
+  useEffect(() => {
+    let time: NodeJS.Timeout | undefined;
+
+    if (isOpen) {
+      setTimeout(() => {
+        setOpen(false);
+      }, 1000);
+    }
+
+    return () => {
+      if (time) {
+        clearTimeout(time);
+      }
+    };
+  }, [isOpen]);
+
+  return (
+    <div className="flex flex-1 flex-col gap-1">
+      <Popover open={isOpen}>
+        <PopoverTrigger
+          onClick={() => {
+            if (className) {
+              navigator.clipboard
+                .writeText(className)
+                .then(() => {
+                  console.log("ClassName copied to clipboard");
+                })
+                .catch((err) => {
+                  console.error("Failed to copy className: ", err);
+                });
+            }
+            setOpen(true);
+          }}
+        >
+          <div
+            ref={boxRef}
+            className={`${className} h-12 rounded border shadow`}
+          />
+        </PopoverTrigger>
+        <PopoverContent className="p-3 w-fit min-w-fit">
+          Copied to clipboard
+        </PopoverContent>
+      </Popover>
+      <div className="text-gray-500 flex flex-col justify-center items-center">
+        <div style={{ fontSize: 12, whiteSpace: "pre" }}>{className}</div>
         <div
-          className={
-            "bg-white p-3 px-3  flex flex-col justify-center items-start"
-          }
+          style={{
+            fontSize: 12,
+            textTransform: "uppercase",
+            whiteSpace: "pre",
+          }}
         >
-          <h3 className="text-black leading-3 p-0">{colorName}</h3>
+          {hex || "Loading..."}
         </div>
       </div>
-    );
-  }
+    </div>
+  );
+};
+
+export const ColorItems = ({
+  title,
+  subTitle,
+  colors,
+  col = -1,
+}: {
+  title?: string;
+  subTitle?: string;
+  colors: string[];
+  col?: number;
+}) => {
+  const gridColumnsClass = useMemo(() => {
+    if (col !== undefined) {
+      switch (col) {
+        case 1:
+          return "grid grid-cols-1";
+        case 2:
+          return "grid grid-cols-2";
+        case 3:
+          return "grid grid-cols-3";
+        case 4:
+          return "grid grid-cols-4";
+        case 5:
+          return "grid grid-cols-5";
+        case 6:
+          return "grid grid-cols-6";
+        case 7:
+          return "grid grid-cols-7";
+        case 8:
+          return "grid grid-cols-8";
+        case 9:
+          return "grid grid-cols-9";
+        case 10:
+          return "grid grid-cols-10";
+        default:
+          return colors.length >= 8 ? "grid grid-cols-4" : `flex `;
+      }
+    }
+  }, [col]);
 
   return (
-    <div className=" flex-1 h-[160px] flex flex-col rounded-xl shadow-lg overflow-hidden">
-      <div className="flex flex-1" style={{ backgroundColor: colorCode }} />
+    <div className="flex flex-wrap flex-col">
+      {title && <div style={{ fontSize: 16, fontWeight: "600" }}>{title}</div>}
+      {subTitle && (
+        <div style={{ fontSize: 14, fontWeight: "600" }}>{subTitle}</div>
+      )}
       <div
-        className={
-          "bg-white p-3 px-6  flex flex-col justify-center items-start"
-        }
+        className={` gap-2 mt-3 ${gridColumnsClass}`}
+        style={{ marginTop: 12 }}
       >
-        <h3 className="text-black leading-3 p-0 text-error">{colorName}</h3>
-        <div
-          className="text-gray-600 leading-1 p-0 m-0"
-          style={{ fontSize: "8px" }}
-        >
-          {colorCode}
-        </div>
+        {colors.map((color) => (
+          <ColorBox key={color} className={color} />
+        ))}
       </div>
     </div>
   );
-}
+};

package/src/theme/main-preset.js

@@ -204,6 +204,14 @@ module.exports = {
             fontFamily: "var(--small8-family, 'Poppins')",
           },
         ],
+        small9: [
+          "var(--small9-size, 8px)",
+          {
+            lineHeight: "var(--small9-line-height, 10px)",
+            fontWeight: "var(--small9-weight, 400)",
+            fontFamily: "var(--small9-family, 'Poppins')",
+          },
+        ],
         label1: [
           "var(--label-label1-size, 12px)",
           {

package/src/theme/plugins/utilities/typography.js

@@ -74,6 +74,9 @@ module.exports = plugin(function ({ addUtilities }) {
     ".typography-small8": {
       "@apply text-small8": {},
     },
+    ".typography-small9": {
+      "@apply text-small9": {},
+    },
     ".typography-label1": {
       "@apply text-label1": {},
     },

package/src/theme/presets/colors.js

@@ -71,6 +71,24 @@ module.exports = {
         "input-label-bg": withColorMixin("--input-color-label-bg"),
         "input-error": withColorMixin("--input-color-error"),
 
+        "function-default-solid": withColorMixin("--function-default-solid"),
+        "function-default-hover": withColorMixin("--function-default-hover"),
+        "function-default-hover-bg": withColorMixin(
+          "--function-default-hover-bg"
+        ),
+        "function-default-stroke": withColorMixin("--function-default-stroke"),
+        "function-default-icon": withColorMixin("--function-default-icon"),
+        "function-default-outline": withColorMixin(
+          "--function-default-outline-icon"
+        ),
+        "function-active-solid": withColorMixin("--function-active-solid"),
+        "function-active-hover": withColorMixin("--function-active-hover"),
+        "function-active-hover-bg": withColorMixin(
+          "--function-active-hover-bg"
+        ),
+        "function-active-stroke": withColorMixin("--function-active-stroke"),
+        "function-active-icon": withColorMixin("--function-active-icon"),
+
         "base-bg": withColorMixin("--base-color-bg"),
         "base-bg2": withColorMixin("--base-color-bg2"),
         "base-bg3": withColorMixin("--base-color-bg3"),

package/src/theme/themes/xspector/color.css

@@ -11,6 +11,19 @@
   --input-color-label-bg: #2d2e30;
   --input-color-error: #ff4d35;
 
+  /* Function button */
+  --function-default-solid: #ececec;
+  --function-default-hover: #fafafa;
+  --function-default-hover-bg: rgba(250 250 250 / 0.08);
+  --function-default-stroke: rgba(158 158 158 / 0.24);
+  --function-default-icon: #212b36;
+  --function-default-outline-icon: #9e9e9e;
+  --function-active-solid: #b1a400;
+  --function-active-hover: #ddcd00;
+  --function-active-hover-bg: rgba(221 205 0 / 0.08);
+  --function-active-stroke: rgba(177 164 0 / 0.48);
+  --function-active-icon: #212b36;
+
   --text-dark: #212b36;
   --text-medium: #637381;
   --text-light: #919eab;

package/src/theme/themes/xspector/components/action-button.css

@@ -12,34 +12,34 @@
   /* ------------------------------------------------------------------ */
 
   /* Default State */
-  --action-button-solid-default-bg: var(--state-color-secondary-default);
-  --action-button-solid-default-border: var(--state-color-secondary-default);
-  --action-button-solid-default-text: var(--state-color-secondary-text-solid);
+  --action-button-solid-default-bg: var(--function-default-solid);
+  --action-button-solid-default-border: var(--function-default-solid);
+  --action-button-solid-default-text: var(--function-default-icon);
 
   /* Hover State */
-  --action-button-solid-hover-bg: var(--state-color-secondary-hover);
-  --action-button-solid-hover-border: var(--state-color-secondary-hover);
-  --action-button-solid-hover-text: var(--state-color-secondary-text-solid);
+  --action-button-solid-hover-bg: var(--function-default-hover);
+  --action-button-solid-hover-border: var(--function-default-hover);
+  --action-button-solid-hover-text: var(--function-default-icon);
 
   /* Pressed State */
-  --action-button-solid-pressed-bg: var(--state-color-secondary-pressed);
-  --action-button-solid-pressed-border: var(--state-color-secondary-pressed);
-  --action-button-solid-pressed-text: var(--state-color-secondary-text-solid);
+  --action-button-solid-pressed-bg: var(--function-default-solid);
+  --action-button-solid-pressed-border: var(--function-default-solid);
+  --action-button-solid-pressed-text: var(--function-default-icon);
 
   /* Active State */
-  --action-button-solid-active-bg: var(--state-color-primary-default);
-  --action-button-solid-active-border: var(--state-color-primary-default);
-  --action-button-solid-active-text: var(--state-color-primary-text-solid);
+  --action-button-solid-active-bg: var(--function-active-solid);
+  --action-button-solid-active-border: var(--function-active-solid);
+  --action-button-solid-active-text: var(--function-active-icon);
 
   /* Active Hover State */
-  --action-button-solid-active-hover-bg: var(--state-color-primary-hover);
-  --action-button-solid-active-hover-border: var(--state-color-primary-hover);
-  --action-button-solid-active-hover-text: var(--state-color-primary-text-solid);
+  --action-button-solid-active-hover-bg: var(--function-active-hover);
+  --action-button-solid-active-hover-border: var(--function-active-hover);
+  --action-button-solid-active-hover-text: var(--function-active-icon);
 
   /* Active Pressed State */
-  --action-button-solid-active-pressed-bg: var(--state-color-primary-pressed);
-  --action-button-solid-active-pressed-border: var(--state-color-primary-pressed);
-  --action-button-solid-active-pressed-text: var(--state-color-primary-text-solid);
+  --action-button-solid-active-pressed-bg: var(--function-active-solid);
+  --action-button-solid-active-pressed-border: var(--function-active-solid);
+  --action-button-solid-active-pressed-text: var(--function-active-icon);
 
 
   /* ------------------------------------------------------------------ */
@@ -47,52 +47,54 @@
   /* ------------------------------------------------------------------ */
 
   /* Default State */
-  --action-button-outline-default-border: var(--state-color-secondary-stroke);
-  --action-button-outline-default-text: var(--state-color-secondary-text-outline);
+  --action-button-outline-default-border: var(--function-default-stroke);
+  --action-button-outline-default-text: var(--function-default-outline-icon);
 
   /* Hover State */
-  --action-button-outline-hover-bg:  var(--state-color-secondary-hover-bg);
-  --action-button-outline-hover-border: var(--state-color-secondary-hover);
-  --action-button-outline-hover-text: var(--state-color-secondary-text-hover);
+  --action-button-outline-hover-bg: var(--function-default-hover-bg);
+  --action-button-outline-hover-border: var(--function-default-hover);
+  --action-button-outline-hover-text: var(--function-default-hover);
 
   /* Pressed State */
-  --action-button-outline-pressed-bg: var(--state-color-secondary-hover-bg);
-  --action-button-outline-pressed-border: var(--state-color-secondary-pressed);
-  --action-button-outline-pressed-text: var(--state-color-secondary-text-pressed);
+  --action-button-outline-pressed-bg: var(--function-default-hover-bg);
+  --action-button-outline-pressed-border: var(--function-default-stroke);
+  --action-button-outline-pressed-text: var(--function-default-outline-icon);
 
   /* Active State */
-  --action-button-outline-active-border: var(--state-color-primary-stroke);
-  --action-button-outline-active-text: var(--state-color-primary-text-outline);
+  --action-button-outline-active-border: var(--function-active-stroke);
+  --action-button-outline-active-text: var(--function-active-solid);
 
   /* Active Hover State */
-  --action-button-outline-active-hover-bg:  var(--state-color-primary-hover-bg);
-  --action-button-outline-active-hover-border: var(--state-color-primary-hover);
-  --action-button-outline-active-hover-text: var(--state-color-primary-text-hover);
+  --action-button-outline-active-hover-bg:  var(--function-active-hover-bg);;
+  --action-button-outline-active-hover-border: var(--function-active-hover);
+  --action-button-outline-active-hover-text: var(--function-active-hover);
 
   /* Active Pressed State */
-  --action-button-outline-active-pressed-bg: var(--state-color-primary-hover-bg);
-  --action-button-outline-active-pressed-border: var(--state-color-primary-pressed);
-  --action-button-outline-active-pressed-text: var(--state-color-primary-text-pressed);
+  --action-button-outline-active-pressed-bg: var(--function-active-hover-bg);;
+  --action-button-outline-active-pressed-border: var(--function-active-stroke);
+  --action-button-outline-active-pressed-text: var(--function-active-solid);
 
   /* ------------------------------------------------------------------ */
   /* Icon Mode Tokens                                                  */
   /* ------------------------------------------------------------------ */
 
   /* Default State */
-  --action-button-icon-default-text: var(--state-color-secondary-text-outline);
+  --action-button-icon-default-text: var(--function-default-outline-icon);
 
   /* Hover State */
-  --action-button-icon-hover-bg: var(--state-color-secondary-hover-bg);
-  --action-button-icon-hover-text: var(--state-color-secondary-text-hover);
+  --action-button-icon-hover-bg: var(--function-default-hover-bg);
+  --action-button-icon-hover-text: var(--function-default-hover);
 
   /* Pressed State */
-  --action-button-icon-pressed-text: var(--state-color-secondary-text-pressed);
+  --action-button-icon-pressed-text: var(--function-default-outline-icon);
 
   /* Active State */
-  --action-button-icon-active-text: var(--state-color-primary-text-outline);
+  --action-button-icon-active-text: var(--function-active-solid);
 
   /* Active Hover State */
-  --action-button-icon-active-hover-bg:  var(--state-color-primary-hover-bg);
-  --action-button-icon-active-hover-text: var(--state-color-primary-text-hover);
-  --action-button-icon-active-pressed-text: var(--state-color-primary-text-pressed);
+  --action-button-icon-active-hover-bg: var(--function-active-hover-bg);
+  --action-button-icon-active-hover-text: var(--function-active-hover);
+
+  /* Active Pressed State */
+  --action-button-icon-active-pressed-text: var(--function-active-solid);
 }

package/src/theme/themes/xspector/state.css

@@ -84,6 +84,6 @@
   --state-color-error-text-pressed: #a5210f;
 
   --state-color-disable-solid: #454f5b;
-  --state-color-disable-outline: #D3DADF;
+  --state-color-disable-outline: #637381;
 }
 

package/src/theme/tokens/color.css

@@ -11,6 +11,19 @@
   --input-color-label-bg: #ffffff;/* #2d2e30; */
   --input-color-error: #ed2f15;
 
+  /* Function button */
+  --function-default-solid: #1e3249;
+  --function-default-hover: #35475b;
+  --function-default-hover-bg: rgba(30 50 73 / 0.08);
+  --function-default-stroke: rgba(30 50 73 / 0.48);
+  --function-default-icon: #ffffff;
+  --function-default-outline-icon: #1e3249;
+  --function-active-solid: #9b8f00;
+  --function-active-hover: #b1a400;
+  --function-active-hover-bg: rgba(221 205 0 / 0.08);
+  --function-active-stroke: rgba(177 164 0 / 0.48);
+  --function-active-icon: #ffffff;
+
   --text-dark: #18283a;
   --text-medium: #4b5b6d;
   --text-light: #8e98a4;

package/src/theme/tokens/components/action-button.css

@@ -11,48 +11,35 @@
   /* Solid Mode Tokens                                                  */
   /* ------------------------------------------------------------------ */
 
-  /* TODO */
-  --function-default-solid: #ececec;
-  --function-default-hover: #fafafa;
-  --function-default-hover-bg: rgba(250 250 250 / 0.08);
-  --function-default-stroke: rgba(158 158 158 / 0.24);
-  --function-default-icon: #212b36;
-  --function-default-outline-icon: #9e9e9e;
-  --function-active-solid: #b1a400;
-  --function-active-hover: #ddcd00;
-  --function-active-hover-bg: rgba(221 205 0 / 0.08);
-  --function-active-stroke: rgba(177 164 0 / 0.48);
-  --function-active-icon: #212b36;
-
   /* Default State */
-  --action-button-solid-default-bg: var(--state-color-primary-default);
-  --action-button-solid-default-border: var(--state-color-primary-default);
-  --action-button-solid-default-text: var(--state-color-primary-text-solid);
+  --action-button-solid-default-bg: var(--function-default-solid);
+  --action-button-solid-default-border: var(--function-default-solid);
+  --action-button-solid-default-text: var(--function-default-icon);
 
   /* Hover State */
-  --action-button-solid-hover-bg: var(--state-color-primary-hover);
-  --action-button-solid-hover-border: var(--state-color-primary-hover);
-  --action-button-solid-hover-text: var(--state-color-primary-text-solid);
+  --action-button-solid-hover-bg: var(--function-default-hover);
+  --action-button-solid-hover-border: var(--function-default-hover);
+  --action-button-solid-hover-text: var(--function-default-icon);
 
   /* Pressed State */
-  --action-button-solid-pressed-bg: var(--state-color-primary-pressed);
-  --action-button-solid-pressed-border: var(--state-color-primary-pressed);
-  --action-button-solid-pressed-text: var(--state-color-primary-text-solid);
+  --action-button-solid-pressed-bg: var(--function-default-solid);
+  --action-button-solid-pressed-border: var(--function-default-solid);
+  --action-button-solid-pressed-text: var(--function-default-icon);
 
   /* Active State */
-  --action-button-solid-active-bg: var(--state-color-secondary-default);
-  --action-button-solid-active-border: var(--state-color-secondary-default);
-  --action-button-solid-active-text: var(--state-color-secondary-text-solid);
+  --action-button-solid-active-bg: var(--function-active-solid);
+  --action-button-solid-active-border: var(--function-active-solid);
+  --action-button-solid-active-text: var(--function-active-icon);
 
   /* Active Hover State */
-  --action-button-solid-active-hover-bg: var(--state-color-secondary-hover);
-  --action-button-solid-active-hover-border: var(--state-color-secondary-hover);
-  --action-button-solid-active-hover-text: var(--state-color-secondary-text-solid);
+  --action-button-solid-active-hover-bg: var(--function-active-hover);
+  --action-button-solid-active-hover-border: var(--function-active-hover);
+  --action-button-solid-active-hover-text: var(--function-active-icon);
 
   /* Active Pressed State */
-  --action-button-solid-active-pressed-bg: var(--state-color-secondary-pressed);
-  --action-button-solid-active-pressed-border: var(--state-color-secondary-pressed);
-  --action-button-solid-active-pressed-text: var(--state-color-secondary-text-solid);
+  --action-button-solid-active-pressed-bg: var(--function-active-solid);
+  --action-button-solid-active-pressed-border: var(--function-active-solid);
+  --action-button-solid-active-pressed-text: var(--function-active-icon);
 
   /* Disabled State */
   --action-button-solid-disabled-bg: var(--state-color-disable-solid);
@@ -66,33 +53,33 @@
 
   /* Default State */
   --action-button-outline-default-bg: transparent;
-  --action-button-outline-default-border: var(--state-color-primary-stroke);
-  --action-button-outline-default-text: var(--state-color-primary-text-outline);
+  --action-button-outline-default-border: var(--function-default-stroke);
+  --action-button-outline-default-text: var(--function-default-outline-icon);
 
   /* Hover State */
-  --action-button-outline-hover-bg:  var(--state-color-primary-hover-bg);
-  --action-button-outline-hover-border: var(--state-color-primary-hover);
-  --action-button-outline-hover-text: var(--state-color-primary-text-hover);
+  --action-button-outline-hover-bg: var(--function-default-hover-bg);
+  --action-button-outline-hover-border: var(--function-default-hover);
+  --action-button-outline-hover-text: var(--function-default-hover);
 
   /* Pressed State */
-  --action-button-outline-pressed-bg: var(--state-color-primary-hover-bg);
-  --action-button-outline-pressed-border: var(--state-color-primary-pressed);
-  --action-button-outline-pressed-text: var(--state-color-primary-text-pressed);
+  --action-button-outline-pressed-bg: var(--function-default-hover-bg);
+  --action-button-outline-pressed-border: var(--function-default-stroke);
+  --action-button-outline-pressed-text: var(--function-default-outline-icon);
 
   /* Active State */
   --action-button-outline-active-bg: transparent;
-  --action-button-outline-active-border: var(--state-color-secondary-stroke);
-  --action-button-outline-active-text: var(--state-color-secondary-text-outline);
+  --action-button-outline-active-border: var(--function-active-stroke);
+  --action-button-outline-active-text: var(--function-active-solid);
 
   /* Active Hover State */
-  --action-button-outline-active-hover-bg:  var(--state-color-secondary-hover-bg);
-  --action-button-outline-active-hover-border: var(--state-color-secondary-hover);
-  --action-button-outline-active-hover-text: var(--state-color-secondary-text-hover);
+  --action-button-outline-active-hover-bg:  var(--function-active-hover-bg);;
+  --action-button-outline-active-hover-border: var(--function-active-hover);
+  --action-button-outline-active-hover-text: var(--function-active-hover);
 
   /* Active Pressed State */
-  --action-button-outline-active-pressed-bg: var(--state-color-secondary-hover-bg);
-  --action-button-outline-active-pressed-border: var(--state-color-secondary-pressed);
-  --action-button-outline-active-pressed-text: var(--state-color-secondary-text-pressed);
+  --action-button-outline-active-pressed-bg: var(--function-active-hover-bg);;
+  --action-button-outline-active-pressed-border: var(--function-active-stroke);
+  --action-button-outline-active-pressed-text: var(--function-active-solid);
 
   /* Disabled State */
   --action-button-outline-disabled-bg: transparent;
@@ -106,32 +93,32 @@
   /* Default State */
   --action-button-icon-default-bg: transparent;
   --action-button-icon-default-border: transparent;
-  --action-button-icon-default-text: var(--state-color-primary-text-outline);
+  --action-button-icon-default-text: var(--function-default-outline-icon);
 
   /* Hover State */
-  --action-button-icon-hover-bg: var(--state-color-primary-hover-bg);
+  --action-button-icon-hover-bg: var(--function-default-hover-bg);
   --action-button-icon-hover-border: transparent;
-  --action-button-icon-hover-text: var(--state-color-primary-text-hover);
+  --action-button-icon-hover-text: var(--function-default-hover);
 
   /* Pressed State */
   --action-button-icon-pressed-bg: transparent;
   --action-button-icon-pressed-border: transparent;
-  --action-button-icon-pressed-text: var(--state-color-primary-text-pressed);
+  --action-button-icon-pressed-text: var(--function-default-outline-icon);
 
   /* Active State */
   --action-button-icon-active-bg: transparent;
   --action-button-icon-active-border: transparent;
-  --action-button-icon-active-text: var(--state-color-secondary-text-outline);
+  --action-button-icon-active-text: var(--function-active-solid);
 
   /* Active Hover State */
-  --action-button-icon-active-hover-bg:  var(--state-color-secondary-hover-bg);
+  --action-button-icon-active-hover-bg: var(--function-active-hover-bg);
   --action-button-icon-active-hover-border: transparent;
-  --action-button-icon-active-hover-text: var(--state-color-secondary-text-hover);
+  --action-button-icon-active-hover-text: var(--function-active-hover);
 
   /* Active Pressed State */
   --action-button-icon-active-pressed-bg: transparent;
   --action-button-icon-active-pressed-border: transparent;
-  --action-button-icon-active-pressed-text: var(--state-color-secondary-text-pressed);
+  --action-button-icon-active-pressed-text: var(--function-active-solid);
 
   /* Disabled State */
   --action-button-icon-disabled-bg: transparent;

package/src/utils/colors.ts

@@ -0,0 +1,33 @@
+export const srgbToHex = (color: string) => {
+  if (color.startsWith("color(")) {
+    const rgbValues = color.match(/([\d.]+)/g);
+
+    if (rgbValues && rgbValues.length >= 3) {
+      const [r, g, b] = rgbValues
+        .slice(0, 3)
+        .map((x) => Math.round(parseFloat(x) * 255));
+      let hex = `#${[r, g, b]
+        .map((x) => ("0" + x.toString(16)).slice(-2))
+        .join("")}`;
+
+      if (rgbValues.length === 4) {
+        const alpha = Math.round(parseFloat(rgbValues[3]) * 255);
+        hex += ("0" + alpha.toString(16)).slice(-2);
+      }
+
+      return hex;
+    }
+  } else if (color.startsWith("#")) {
+    return color;
+  } else {
+    const rgbValues = color.match(/\d+/g);
+    if (rgbValues && rgbValues.length >= 3) {
+      return `#${rgbValues
+        .slice(0, 3)
+        .map((x) => ("0" + parseInt(x).toString(16)).slice(-2))
+        .join("")}`;
+    }
+  }
+
+  return color;
+};