@rovula/ui 0.0.30 → 0.0.32

package/dist/stories/ColorPreview.js

@@ -1,7 +1,77 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export default function ColorPreview({ colorName, colorCode, isSmall, }) {
-    if (isSmall) {
-        return (_jsxs("div", { className: " flex-1 h-[120px] flex flex-col rounded-xl shadow-lg overflow-hidden", children: [_jsx("div", { className: "flex flex-1", style: { backgroundColor: colorCode } }), _jsx("div", { className: "bg-white p-3 px-3  flex flex-col justify-center items-start", children: _jsx("h3", { className: "text-black leading-3 p-0", children: colorName }) })] }));
-    }
-    return (_jsxs("div", { className: " flex-1 h-[160px] flex flex-col rounded-xl shadow-lg overflow-hidden", children: [_jsx("div", { className: "flex flex-1", style: { backgroundColor: colorCode } }), _jsxs("div", { className: "bg-white p-3 px-6  flex flex-col justify-center items-start", children: [_jsx("h3", { className: "text-black leading-3 p-0 text-error", children: colorName }), _jsx("div", { className: "text-gray-600 leading-1 p-0 m-0", style: { fontSize: "8px" }, children: colorCode })] })] }));
-}
+import { srgbToHex } from "@/utils/colors";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { Popover, PopoverContent, PopoverTrigger } from "..";
+export const ColorBox = ({ className }) => {
+    const boxRef = useRef(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;
+        if (isOpen) {
+            setTimeout(() => {
+                setOpen(false);
+            }, 1000);
+        }
+        return () => {
+            if (time) {
+                clearTimeout(time);
+            }
+        };
+    }, [isOpen]);
+    return (_jsxs("div", { className: "flex flex-1 flex-col gap-1", children: [_jsxs(Popover, { open: isOpen, children: [_jsx(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);
+                        }, children: _jsx("div", { ref: boxRef, className: `${className} h-12 rounded border shadow` }) }), _jsx(PopoverContent, { className: "p-3 w-fit min-w-fit", children: "Copied to clipboard" })] }), _jsxs("div", { className: "text-gray-500 flex flex-col justify-center items-center", children: [_jsx("div", { style: { fontSize: 12, whiteSpace: "pre" }, children: className }), _jsx("div", { style: {
+                            fontSize: 12,
+                            textTransform: "uppercase",
+                            whiteSpace: "pre",
+                        }, children: hex || "Loading..." })] })] }));
+};
+export const ColorItems = ({ title, subTitle, colors, col = -1, }) => {
+    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 (_jsxs("div", { className: "flex flex-wrap flex-col", children: [title && _jsx("div", { style: { fontSize: 16, fontWeight: "600" }, children: title }), subTitle && (_jsx("div", { style: { fontSize: 14, fontWeight: "600" }, children: subTitle })), _jsx("div", { className: ` gap-2 mt-3 ${gridColumnsClass}`, style: { marginTop: 12 }, children: colors.map((color) => (_jsx(ColorBox, { className: color }, color))) })] }));
+};

package/dist/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/dist/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/dist/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/dist/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/dist/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/dist/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/dist/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/dist/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/dist/utils/colors.js

@@ -0,0 +1,31 @@
+export const srgbToHex = (color) => {
+    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;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rovula/ui",
-  "version": "0.0.30",
+  "version": "0.0.32",
   "main": "dist/cjs/bundle.js",
   "module": "dist/esm/bundle.js",
   "types": "dist/index.d.ts",

package/src/components/ActionButton/ActionButton.stories.tsx

@@ -14,7 +14,7 @@ const meta = {
   },
   decorators: [
     (Story) => (
-      <div className="p-5">
+      <div className="p-5 bg-base-bg2">
         <Story />
       </div>
     ),

package/src/components/Checkbox/Checkbox.stories.tsx

@@ -11,7 +11,7 @@ const meta = {
   },
   decorators: [
     (Story) => (
-      <div className="p-5 flex w-full">
+      <div className="p-5 flex w-full bg-base-bg2">
         <Story />
       </div>
     ),

package/src/components/Checkbox/Checkbox.tsx

@@ -14,14 +14,14 @@ const Checkbox = React.forwardRef<
   <CheckboxPrimitive.Root
     ref={ref}
     className={cn(
-      "peer size-4 shrink-0 rounded-[var(--spacing-spacing-xxs,2px)] border border-primary ring-offset-background",
-      "hover:border-primary-hover",
+      "peer size-4 shrink-0 rounded-[var(--spacing-spacing-xxs,2px)] border border-function-default-solid ring-offset-background",
+      "hover:border-function-default-hover",
       "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
       "disabled:cursor-not-allowed disabled:border-state-disable-solid disabled:text-state-disable-outline",
       {
-        "data-[state=checked]:border-secondary data-[state=checked]:bg-secondary data-[state=checked]:text-secondary-foreground":
+        "data-[state=checked]:border-function-active-solid data-[state=checked]:bg-function-active-solid data-[state=checked]:text-function-active-icon":
           !props.disabled,
-        "hover:data-[state=checked]:border-secondary-hover hover:data-[state=checked]:bg-secondary-hover":
+        "hover:data-[state=checked]:border-function-active-hover hover:data-[state=checked]:bg-function-active-hover":
           !props.disabled,
         "bg-state-disable-solid": props.checked && props.disabled,
       },

package/src/components/Dropdown/Dropdown.styles.ts

@@ -45,7 +45,7 @@ export const customInputVariant = cva([], {
     size: {
       sm: "pe-[30px]",
       md: "pe-[40px]",
-      lg: "pe-[48px]",
+      lg: "pe-[68px]",
     },
   },
   defaultVariants: {