katalyst-riya-test 0.0.2 → 0.0.11-alpha

package/dist/index.cjs

@@ -124,7 +124,7 @@ function AccordionItem({
     {
       className: cn(
         "rounded-lg mb-3 shadow-cardShadow dark:shadow-none border dark:border-gray-900",
-        isOpen ? "border-brand-500 shadow-cardShadowActive dark:bg-gray-900" : "hover:border-gray-500 hover:bg-gray-100 hover:dark:bg-transparent hover:dark:border-gray-600",
+        isOpen ? "border-primary-500 shadow-cardShadowActive dark:bg-gray-900" : "hover:border-gray-500 hover:bg-gray-100 hover:dark:bg-transparent hover:dark:border-gray-600",
         disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer"
       )
     },
@@ -168,9 +168,9 @@ var buttonVariants = (0, import_class_variance_authority.cva)(
   {
     variants: {
       variant: {
-        primary: "bg-brand-500 text-light border hover:bg-brand-600 hover:shadow-[inset_0px_2px_8px_-2px_#FFFFFF8F,inset_0px_8px_8px_-2px_#0000002E] active:bg-brand-400 active:shadow-[0px_0px_0px_3px] active:shadow-brand-300",
-        "primary-light": "bg-brand-50 text-brand-600 hover:bg-brand-200 hover:shadow-[inset_0px_2px_8px_-2px_#FFFFFF8F,inset_0px_8px_8px_-2px_#356AC32E] active:shadow-[0px_0px_0px_3px] active:bg-brand-50 active:shadow-brand-300",
-        secondary: "bg-brand-50 text-brand-800 hover:bg-brand-200 hover:shadow-[inset_0px_2px_8px_-2px_#FFFFFF8F,inset_0px_8px_8px_-2px_#6984AD2E] active:bg-brand-50 active:shadow-[0px_0px_0px_3px] active:shadow-brand-700",
+        primary: "bg-primary-500 text-light border hover:bg-primary-600 hover:shadow-[inset_0px_2px_8px_-2px_#FFFFFF8F,inset_0px_8px_8px_-2px_#0000002E] active:bg-primary-400 active:shadow-[0px_0px_0px_3px] active:shadow-primary-300",
+        "primary-light": "bg-primary-50 text-primary-600 hover:bg-primary-200 hover:shadow-[inset_0px_2px_8px_-2px_#FFFFFF8F,inset_0px_8px_8px_-2px_#356AC32E] active:shadow-[0px_0px_0px_3px] active:bg-primary-50 active:shadow-primary-300",
+        secondary: "bg-primary-50 text-primary-800 hover:bg-primary-200 hover:shadow-[inset_0px_2px_8px_-2px_#FFFFFF8F,inset_0px_8px_8px_-2px_#6984AD2E] active:bg-primary-50 active:shadow-[0px_0px_0px_3px] active:shadow-primary-700",
         tertiary: "bg-gray-100 text-gray-900 hover:bg-gray-300 hover:shadow-[inset_0px_2px_8px_-2px_#FFFFFF8F,inset_0px_8px_8px_-2px_#9595952E] active:bg-gray-25 active:shadow-[0px_0px_0px_3px] active:shadow-gray-700",
         quaternary: "bg-gray-50/[0.02] text-light backdrop-blur-[6px] hover:shadow-[inset_0px_8px_8px_-2px_#23232314] hover:backdrop-blur-md hover:bg-gray-200/10 active:bg-gray-25 active:shadow-[0px_0px_0px_3px] active:text-gray-900 active:shadow-[#46464659]"
       },
@@ -342,7 +342,7 @@ var Checkbox = (0, import_react7.forwardRef)(
       "div",
       {
         className: cn(
-          "group inline-flex relative items-center rounded-full border-2 border-transparent hover:border-brand-300",
+          "group inline-flex relative items-center rounded-full border-2 border-transparent hover:border-primary-300",
           disabled && "border-none"
         )
       },
@@ -356,7 +356,7 @@ var Checkbox = (0, import_react7.forwardRef)(
           readOnly,
           checked,
           className: cn(
-            "peer relative h-5 w-5 cursor-pointer appearance-none rounded-full border-2 border-gray-300 transition-all checked:border-brand-500 hover:border-brand-500 hover:bg-brand-25/25 disabled:opacity-30 disabled:pointer-events-none disabled:border-gray-400",
+            "peer relative h-5 w-5 cursor-pointer appearance-none rounded-full border-2 border-gray-300 transition-all checked:border-primary-500 hover:border-primary-500 hover:bg-primary-25/25 disabled:opacity-30 disabled:pointer-events-none disabled:border-gray-400",
             className
           )
         }
@@ -365,7 +365,7 @@ var Checkbox = (0, import_react7.forwardRef)(
         "span",
         {
           className: cn(
-            "absolute text-brand-600 transition-opacity opacity-0 pointer-events-none top-2/4 left-2/4 -translate-y-2/4 -translate-x-2/4 peer-checked:opacity-100",
+            "absolute text-primary-600 transition-opacity opacity-0 pointer-events-none top-2/4 left-2/4 -translate-y-2/4 -translate-x-2/4 peer-checked:opacity-100",
             disabled && "text-gray-300"
           )
         },
@@ -402,9 +402,9 @@ var import_class_variance_authority5 = require("class-variance-authority");
 var chipVariants = (0, import_class_variance_authority5.cva)("", {
   variants: {
     variant: {
-      primary: "bg-white text-brand-500 hover:text-white hover:bg-gradient-to-r hover:from-brand-500 hover:to-[#264D8E]",
-      secondary: "bg-brand-500 text-white hover:text-white hover:bg-gradient-to-r hover:from-brand-500 hover:to-[#285092]",
-      glass: "text-brand-500"
+      primary: "bg-white text-primary-500 hover:text-white hover:bg-gradient-to-r hover:from-primary-500 hover:to-primary-600",
+      secondary: "bg-primary-500 text-white hover:text-white hover:bg-gradient-to-r hover:from-primary-500 hover:to-primary-600",
+      glass: "text-primary-500"
     },
     size: {
       sm: "text-sm py-1 px-3",
@@ -432,10 +432,10 @@ var Chip = ({
       className: cn(
         "rounded-radius-xl bg-gradient-to-r w-fit",
         {
-          solid: "from-brand-200 to-brand-500",
-          primary: "from-brand-200 to-brand-500",
-          secondary: "from-brand-200 to-brand-500",
-          glass: "border border-brand-500"
+          solid: "from-primary-200 to-primary-500",
+          primary: "from-primary-200 to-primary-500",
+          secondary: "from-primary-200 to-primary-500",
+          glass: "border border-primary-500"
         }[variant || "primary"],
         "p-[1px]"
       )
@@ -543,12 +543,12 @@ function Footer({
     "footer",
     {
       className: cn(
-        "bg-gradient-to-b from-gray-25 to-brand-100 dark:from-brand-900 dark:to-dark",
+        "bg-gradient-to-b from-gray-25 to-primary-100 dark:from-primary-900 dark:to-dark",
         className
       )
     },
     children,
-    footerBottom && /* @__PURE__ */ import_react10.default.createElement("section", { className: "border-t border-brand-500 dark:border-brand-800 text-center py-spacing-md" }, footerBottom)
+    footerBottom && /* @__PURE__ */ import_react10.default.createElement("section", { className: "border-t border-primary-500 dark:border-primary-800 text-center py-spacing-md" }, footerBottom)
   );
 }
 var FooterHeader = ({ children, className }) => {
@@ -590,20 +590,20 @@ var FooterList = ({ footerItems, target }) => {
       Paragraph_default,
       {
         variant: "b3",
-        className: "dark:text-gray-300 hover:text-brand-400 dark:hover:text-brand-600 text-gray-900"
+        className: "dark:text-gray-300 hover:text-primary-400 dark:hover:text-primary-600 text-gray-900"
       },
       data2?.text
     )))))))
   );
 };
 var FooterIcons = ({ icons }) => {
-  return /* @__PURE__ */ import_react10.default.createElement("div", { className: "flex flex-wrap justify-center items-center gap-5 text-brand-700 dark:text-brand-200" }, icons.map((icon, index) => /* @__PURE__ */ import_react10.default.createElement(
+  return /* @__PURE__ */ import_react10.default.createElement("div", { className: "flex flex-wrap justify-center items-center gap-5 text-primary-700 dark:text-primary-200" }, icons.map((icon, index) => /* @__PURE__ */ import_react10.default.createElement(
     import_link.default,
     {
       href: icon.link,
       key: index,
       target: "_blank",
-      className: "hover:bg-brand-100 dark:hover:bg-brand-800 p-1 rounded-radius-sm"
+      className: "hover:bg-primary-100 dark:hover:bg-primary-800 p-1 rounded-radius-sm"
     },
     icon.icon
   )));
@@ -623,7 +623,7 @@ var ImageCard = ({
     "div",
     {
       className: cn(
-        "transition-all duration-300 ease-in-out hover:ring-1 hover:ring-[#4285F4] relative rounded-radius-xl overflow-hidden block z-10 bg-cover bg-no-repeat bg-center",
+        "transition-all duration-300 ease-in-out hover:ring-1 hover:ring-brand-500 relative rounded-radius-xl overflow-hidden block z-10 bg-cover bg-no-repeat bg-center",
         className
       ),
       style: {
@@ -644,7 +644,7 @@ var inputVariants = (0, import_class_variance_authority6.cva)(
   {
     variants: {
       variant: {
-        default: "dark:text-gray-500 dark:bg-gray-900 dark:border-gray-800 dark:hover:text-light dark:hover:bg-gray-800 dark:hover:border-gray-700 dark:focus-within:bg-gray-100 dark:focus-within:border-gray-800 dark:focus-within:hover:bg-gray-700 dark:focus-within:text-dark dark:has-[:disabled]:bg-gray-700 bg-gray-100 border-gray-200 text-gray-600 hover:border-gray-300 hover:text-gray-500 hover:bg-gray-300 focus-within:bg-gray-50 focus-within:border-gray-400 focus-within:text-dark focus-within:hover:text-dark focus-within:hover:border-brand-100 focus-within:hover:bg-brand-50 has-[:disabled]:bg-gray-25 has-[:disabled]:border-gray-400",
+        default: "dark:text-gray-500 dark:bg-gray-900 dark:border-gray-800 dark:hover:text-light dark:hover:bg-gray-800 dark:hover:border-gray-700 dark:focus-within:bg-gray-100 dark:focus-within:border-gray-800 dark:focus-within:hover:bg-gray-700 dark:focus-within:text-dark dark:has-[:disabled]:bg-gray-700 bg-gray-100 border-gray-200 text-gray-600 hover:border-gray-300 hover:text-gray-500 hover:bg-gray-300 focus-within:bg-gray-50 focus-within:border-gray-400 focus-within:text-dark focus-within:hover:text-dark focus-within:hover:border-primary-100 focus-within:hover:bg-primary-50 has-[:disabled]:bg-gray-25 has-[:disabled]:border-gray-400",
         glass: "backdrop-blur-[3.5px] bg-light/10 dark:bg-dark/20 dark:border-gray-800 border-gray-200/50 text-light"
       }
     },
@@ -719,7 +719,7 @@ var ListItem = import_react14.default.forwardRef(
   ({ className, title, href, onClick, as = "link", variant = "solid", icon }, ref) => {
     const pathname = (0, import_navigation.usePathname)();
     const isActive = as === "link" && href === pathname;
-    const variantClasses = variant === "solid" ? "rounded-radius-lg hover:bg-brand-50 text-dark group border border-transparent hover:border-brand-200 focus:outline-none focus:ring-1 focus:ring-brand-500 focus:text-white leading-none no-underline outline-none transition-colors" : variant === "glass" ? "rounded-radius-lg group border border-transparent hover:border-brand-200 focus:outline-none focus:ring-1 focus:ring-brand-500 focus:text-white leading-none no-underline outline-none transition-colors" : "";
+    const variantClasses = variant === "solid" ? "rounded-radius-lg hover:bg-primary-50 text-dark group border border-transparent hover:border-primary-200 focus:outline-none focus:ring-1 focus:ring-primary-500 focus:text-white leading-none no-underline outline-none transition-colors" : variant === "glass" ? "rounded-radius-lg group border border-transparent hover:border-primary-200 focus:outline-none focus:ring-1 focus:ring-primary-500 focus:text-white leading-none no-underline outline-none transition-colors" : "";
     if (as === "button") {
       return /* @__PURE__ */ import_react14.default.createElement(
         "button",
@@ -739,7 +739,7 @@ var ListItem = import_react14.default.forwardRef(
         passHref: true,
         className: cn(
           "px-4 py-[8px] font-karla w-full flex items-center gap-2 group",
-          isActive ? "bg-brand-400 text-white border border-brand-200" : variantClasses,
+          isActive ? "bg-primary-400 text-white border border-primary-200" : variantClasses,
           className
         ),
         ref
@@ -778,7 +778,7 @@ var Slider = (0, import_react15.forwardRef)(
           size === "sm" ? "h-1.5" : "h-4"
         ),
         style: {
-          background: `linear-gradient(to right, #8EB6F8 ${progress}%, #d1d5db ${progress}%)`
+          background: `linear-gradient(to right, var(--primary-500) ${progress}%, #d1d5db ${progress}%)`
         }
       }
     ));
@@ -799,12 +799,12 @@ var StatsCard = ({
     Card,
     {
       className: cn(
-        "border border-[#eee] hover:border-[#4285F4] rounded-radius-xl bg-[#FFFFFFE5] bg-gradient-to-b bg-[#fff] hover:from-[#8EB6F8D9] hover:to-[#356AC3D9] dark:from-[#252525D9] dark:to-[#070707D9] dark:hover:from-[#1A3562D9] dark:hover:to-[#070707D9] backdrop-blur-sm px-[32px] py-[64px] group",
+        "border border-[#eee] hover:border-primary-500 rounded-radius-xl bg-[#FFFFFFE5] bg-gradient-to-b bg-[#fff] hover:from-[#8EB6F8D9] hover:to-[#356AC3D9] dark:from-[#252525D9] dark:to-[#070707D9] dark:hover:from-[#1A3562D9] dark:hover:to-[#070707D9] backdrop-blur-sm px-[32px] py-[64px] group",
         className
       )
     },
     /* @__PURE__ */ import_react16.default.createElement("span", { className: "group-hover:text-white text-dark dark:text-white" }, cardIcon),
-    /* @__PURE__ */ import_react16.default.createElement(CardTitle, { className: "group-hover:text-white text-[48px] font-bold text-brand-500 dark:text-white my-4" }, statTitle),
+    /* @__PURE__ */ import_react16.default.createElement(CardTitle, { className: "group-hover:text-white text-[48px] font-bold text-primary-500 dark:text-white my-4" }, statTitle),
     /* @__PURE__ */ import_react16.default.createElement(CardDescription, { className: "group-hover:text-white text-[24px] hover:text-white text-dark leading-[25px]" }, statDesc)
   );
 };
@@ -818,7 +818,7 @@ var textareaVariants = (0, import_class_variance_authority8.cva)(
   {
     variants: {
       variant: {
-        default: "dark:text-gray-500 dark:bg-gray-900 dark:border-gray-800 dark:hover:text-light dark:hover:bg-gray-800 dark:hover:border-gray-700 dark:focus-within:bg-gray-100 dark:focus-within:border-gray-800 dark:focus-within:hover:bg-gray-700 dark:focus-within:text-dark dark:disabled:bg-gray-700 bg-gray-100 border-gray-200 text-gray-600 hover:border-gray-300 hover:text-gray-500 hover:bg-gray-300 focus-within:bg-gray-50 focus-within:border-gray-400 focus-within:text-dark focus-within:hover:text-dark focus-within:hover:border-brand-100 focus-within:hover:bg-brand-50 disabled:bg-gray-25 disabled:border-gray-400",
+        default: "dark:text-gray-500 dark:bg-gray-900 dark:border-gray-800 dark:hover:text-light dark:hover:bg-gray-800 dark:hover:border-gray-700 dark:focus-within:bg-gray-100 dark:focus-within:border-gray-800 dark:focus-within:hover:bg-gray-700 dark:focus-within:text-dark dark:disabled:bg-gray-700 bg-gray-100 border-gray-200 text-gray-600 hover:border-gray-300 hover:text-gray-500 hover:bg-gray-300 focus-within:bg-gray-50 focus-within:border-gray-400 focus-within:text-dark focus-within:hover:text-dark focus-within:hover:border-primary-100 focus-within:hover:bg-primary-50 disabled:bg-gray-25 disabled:border-gray-400",
         glass: "backdrop-blur-[3.5px] bg-light/10 dark:bg-dark/20 dark:border-gray-800 border-gray-200/50 text-light"
       }
     },
@@ -850,7 +850,7 @@ var Textarea_default = Textarea;
 var import_class_variance_authority9 = require("class-variance-authority");
 var import_react18 = __toESM(require("react"), 1);
 var toggleVariants = (0, import_class_variance_authority9.cva)(
-  "rounded-radius-xl bg-gray-300 transition-colors peer-checked:bg-brand-500 peer-active:ring-2 peer-active:ring-brand-300",
+  "rounded-radius-xl bg-gray-300 transition-colors peer-checked:bg-primary-500 peer-active:ring-2 peer-active:ring-primary-300",
   {
     variants: {
       size: {

package/dist/index.css

@@ -325,6 +325,21 @@ video {
 [hidden]:where(:not([hidden=until-found])) {
   display: none;
 }
+:root {
+  .theme-brand {
+    --primary-25: #fafaff;
+    --primary-50: #f4f3ff;
+    --primary-100: #ebe9fe;
+    --primary-200: #d9d6fe;
+    --primary-300: #bdb4fe;
+    --primary-400: #9b8afb;
+    --primary-500: #7a5af8;
+    --primary-600: #6938ef;
+    --primary-700: #5925dc;
+    --primary-800: #4a1fb8;
+    --primary-900: #3e1c96;
+  }
+}
 .sr-only {
   position: absolute;
   width: 1px;
@@ -778,14 +793,6 @@ video {
   --tw-border-opacity: 1;
   border-color: rgb(238 238 238 / var(--tw-border-opacity));
 }
-.border-brand-200 {
-  --tw-border-opacity: 1;
-  border-color: rgb(255 224 143 / var(--tw-border-opacity));
-}
-.border-brand-500 {
-  --tw-border-opacity: 1;
-  border-color: rgb(255 195 66 / var(--tw-border-opacity));
-}
 .border-gray-200 {
   --tw-border-opacity: 1;
   border-color: rgb(242 242 242 / var(--tw-border-opacity));
@@ -800,6 +807,12 @@ video {
   --tw-border-opacity: 1;
   border-color: rgb(228 228 228 / var(--tw-border-opacity));
 }
+.border-primary-200 {
+  border-color: var(--primary-200);
+}
+.border-primary-500 {
+  border-color: var(--primary-500);
+}
 .border-transparent {
   border-color: transparent;
 }
@@ -821,26 +834,6 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(37 99 235 / var(--tw-bg-opacity));
 }
-.bg-brand-100 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(255 236 186 / var(--tw-bg-opacity));
-}
-.bg-brand-300 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(255 214 101 / var(--tw-bg-opacity));
-}
-.bg-brand-400 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(255 203 76 / var(--tw-bg-opacity));
-}
-.bg-brand-50 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(255 248 228 / var(--tw-bg-opacity));
-}
-.bg-brand-500 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(255 195 66 / var(--tw-bg-opacity));
-}
 .bg-gray-100 {
   --tw-bg-opacity: 1;
   background-color: rgb(248 248 248 / var(--tw-bg-opacity));
@@ -863,6 +856,21 @@ video {
 .bg-light\/10 {
   background-color: rgb(255 255 255 / 0.1);
 }
+.bg-primary-100 {
+  background-color: var(--primary-100);
+}
+.bg-primary-300 {
+  background-color: var(--primary-300);
+}
+.bg-primary-400 {
+  background-color: var(--primary-400);
+}
+.bg-primary-50 {
+  background-color: var(--primary-50);
+}
+.bg-primary-500 {
+  background-color: var(--primary-500);
+}
 .bg-red-100 {
   --tw-bg-opacity: 1;
   background-color: rgb(254 226 226 / var(--tw-bg-opacity));
@@ -883,16 +891,6 @@ video {
 .bg-none {
   background-image: none;
 }
-.from-brand-200 {
-  --tw-gradient-from: #FFE08F var(--tw-gradient-from-position);
-  --tw-gradient-to: rgb(255 224 143 / 0) var(--tw-gradient-to-position);
-  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
-}
-.from-brand-700 {
-  --tw-gradient-from: #FFA33A var(--tw-gradient-from-position);
-  --tw-gradient-to: rgb(255 163 58 / 0) var(--tw-gradient-to-position);
-  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
-}
 .from-gray-25 {
   --tw-gradient-from: #fff var(--tw-gradient-from-position);
   --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
@@ -903,6 +901,16 @@ video {
   --tw-gradient-to: rgb(99 102 241 / 0) var(--tw-gradient-to-position);
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
+.from-primary-200 {
+  --tw-gradient-from: var(--primary-200) var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+.from-primary-700 {
+  --tw-gradient-from: var(--primary-700) var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
 .from-transparent {
   --tw-gradient-from: transparent var(--tw-gradient-from-position);
   --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
@@ -921,14 +929,14 @@ video {
 .to-black {
   --tw-gradient-to: #000 var(--tw-gradient-to-position);
 }
-.to-brand-100 {
-  --tw-gradient-to: #FFECBA var(--tw-gradient-to-position);
+.to-primary-100 {
+  --tw-gradient-to: var(--primary-100) var(--tw-gradient-to-position);
 }
-.to-brand-500 {
-  --tw-gradient-to: #FFC342 var(--tw-gradient-to-position);
+.to-primary-500 {
+  --tw-gradient-to: var(--primary-500) var(--tw-gradient-to-position);
 }
-.to-brand-900 {
-  --tw-gradient-to: #F97835 var(--tw-gradient-to-position);
+.to-primary-900 {
+  --tw-gradient-to: var(--primary-900) var(--tw-gradient-to-position);
 }
 .to-\[93\.83\%\] {
   --tw-gradient-to-position: 93.83%;
@@ -1166,26 +1174,6 @@ video {
   --tw-text-opacity: 1;
   color: rgb(0 0 0 / var(--tw-text-opacity));
 }
-.text-brand-400 {
-  --tw-text-opacity: 1;
-  color: rgb(255 203 76 / var(--tw-text-opacity));
-}
-.text-brand-500 {
-  --tw-text-opacity: 1;
-  color: rgb(255 195 66 / var(--tw-text-opacity));
-}
-.text-brand-600 {
-  --tw-text-opacity: 1;
-  color: rgb(255 181 61 / var(--tw-text-opacity));
-}
-.text-brand-700 {
-  --tw-text-opacity: 1;
-  color: rgb(255 163 58 / var(--tw-text-opacity));
-}
-.text-brand-800 {
-  --tw-text-opacity: 1;
-  color: rgb(253 148 56 / var(--tw-text-opacity));
-}
 .text-dark {
   --tw-text-opacity: 1;
   color: rgb(7 7 7 / var(--tw-text-opacity));
@@ -1218,6 +1206,21 @@ video {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
+.text-primary-400 {
+  color: var(--primary-400);
+}
+.text-primary-500 {
+  color: var(--primary-500);
+}
+.text-primary-600 {
+  color: var(--primary-600);
+}
+.text-primary-700 {
+  color: var(--primary-700);
+}
+.text-primary-800 {
+  color: var(--primary-800);
+}
 .text-white {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity));
@@ -1332,9 +1335,6 @@ video {
 .ease-in-out {
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
 }
-.test {
-  border: 1px solid red;
-}
 .gradientOne {
   background:
     linear-gradient(
@@ -1384,21 +1384,21 @@ video {
   appearance: none;
   width: 36px;
   height: 24px;
-  background-color: #4285f4;
+  background-color: var(--primary-500);
   border-radius: 9999px;
   cursor: pointer;
 }
 .slider::-webkit-slider-thumb:hover {
-  background-color: #285092;
+  background-color: var(--primary-700);
 }
 .slider::-webkit-slider-thumb:active {
-  background-color: #356ac3;
-  outline: 3px solid #b3cefb;
+  background-color: var(--primary-500);
+  outline: 3px solid var(--primary-200);
   box-shadow: 0px 4px 4.7px 0px #0000002e;
 }
 .slider::-moz-range-thumb {
   width: 50px;
-  outline: 3px solid #b3cefb;
+  outline: 3px solid var(--primary-200);
   height: 50px;
   background-color: #000;
   border-radius: 0;
@@ -1407,9 +1407,8 @@ video {
 .last\:border-none:last-child {
   border-style: none;
 }
-.checked\:border-brand-500:checked {
-  --tw-border-opacity: 1;
-  border-color: rgb(255 195 66 / var(--tw-border-opacity));
+.checked\:border-primary-500:checked {
+  border-color: var(--primary-500);
 }
 .focus-within\:border-gray-400:focus-within {
   --tw-border-opacity: 1;
@@ -1426,22 +1425,6 @@ video {
 .hover\:border-2:hover {
   border-width: 2px;
 }
-.hover\:border-\[\#4285F4\]:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(66 133 244 / var(--tw-border-opacity));
-}
-.hover\:border-brand-200:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(255 224 143 / var(--tw-border-opacity));
-}
-.hover\:border-brand-300:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(255 214 101 / var(--tw-border-opacity));
-}
-.hover\:border-brand-500:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(255 195 66 / var(--tw-border-opacity));
-}
 .hover\:border-gray-300:hover {
   --tw-border-opacity: 1;
   border-color: rgb(228 228 228 / var(--tw-border-opacity));
@@ -1450,6 +1433,15 @@ video {
   --tw-border-opacity: 1;
   border-color: rgb(162 162 162 / var(--tw-border-opacity));
 }
+.hover\:border-primary-200:hover {
+  border-color: var(--primary-200);
+}
+.hover\:border-primary-300:hover {
+  border-color: var(--primary-300);
+}
+.hover\:border-primary-500:hover {
+  border-color: var(--primary-500);
+}
 .hover\:bg-blue-500:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(59 130 246 / var(--tw-bg-opacity));
@@ -1458,25 +1450,6 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(37 99 235 / var(--tw-bg-opacity));
 }
-.hover\:bg-brand-100:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(255 236 186 / var(--tw-bg-opacity));
-}
-.hover\:bg-brand-200:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(255 224 143 / var(--tw-bg-opacity));
-}
-.hover\:bg-brand-25\/25:hover {
-  background-color: rgb(245 250 255 / 0.25);
-}
-.hover\:bg-brand-50:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(255 248 228 / var(--tw-bg-opacity));
-}
-.hover\:bg-brand-600:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(255 181 61 / var(--tw-bg-opacity));
-}
 .hover\:bg-gray-100:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(248 248 248 / var(--tw-bg-opacity));
@@ -1496,6 +1469,18 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(70 70 70 / var(--tw-bg-opacity));
 }
+.hover\:bg-primary-100:hover {
+  background-color: var(--primary-100);
+}
+.hover\:bg-primary-200:hover {
+  background-color: var(--primary-200);
+}
+.hover\:bg-primary-50:hover {
+  background-color: var(--primary-50);
+}
+.hover\:bg-primary-600:hover {
+  background-color: var(--primary-600);
+}
 .hover\:bg-gradient-to-b:hover {
   background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
 }
@@ -1512,9 +1497,9 @@ video {
   --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
-.hover\:from-brand-500:hover {
-  --tw-gradient-from: #FFC342 var(--tw-gradient-from-position);
-  --tw-gradient-to: rgb(255 195 66 / 0) var(--tw-gradient-to-position);
+.hover\:from-primary-500:hover {
+  --tw-gradient-from: var(--primary-500) var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
 .hover\:via-black\/70:hover {
@@ -1527,23 +1512,19 @@ video {
 .hover\:to-\[\#070707\]:hover {
   --tw-gradient-to: #070707 var(--tw-gradient-to-position);
 }
-.hover\:to-\[\#264D8E\]:hover {
-  --tw-gradient-to: #264D8E var(--tw-gradient-to-position);
-}
-.hover\:to-\[\#285092\]:hover {
-  --tw-gradient-to: #285092 var(--tw-gradient-to-position);
-}
 .hover\:to-\[\#356AC3D9\]:hover {
   --tw-gradient-to: #356AC3D9 var(--tw-gradient-to-position);
 }
-.hover\:text-brand-400:hover {
-  --tw-text-opacity: 1;
-  color: rgb(255 203 76 / var(--tw-text-opacity));
+.hover\:to-primary-600:hover {
+  --tw-gradient-to: var(--primary-600) var(--tw-gradient-to-position);
 }
 .hover\:text-gray-500:hover {
   --tw-text-opacity: 1;
   color: rgb(162 162 162 / var(--tw-text-opacity));
 }
+.hover\:text-primary-400:hover {
+  color: var(--primary-400);
+}
 .hover\:text-white:hover {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity));
@@ -1596,22 +1577,20 @@ video {
     var(--tw-ring-shadow),
     var(--tw-shadow, 0 0 #0000);
 }
-.hover\:ring-\[\#4285F4\]:hover {
+.hover\:ring-brand-500:hover {
   --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(66 133 244 / var(--tw-ring-opacity));
+  --tw-ring-color: rgb(122 90 248 / var(--tw-ring-opacity));
 }
 .hover\:backdrop-blur-md:hover {
   --tw-backdrop-blur: blur(12px);
   -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
   backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
 }
-.focus-within\:hover\:border-brand-100:hover:focus-within {
-  --tw-border-opacity: 1;
-  border-color: rgb(255 236 186 / var(--tw-border-opacity));
+.focus-within\:hover\:border-primary-100:hover:focus-within {
+  border-color: var(--primary-100);
 }
-.focus-within\:hover\:bg-brand-50:hover:focus-within {
-  --tw-bg-opacity: 1;
-  background-color: rgb(255 248 228 / var(--tw-bg-opacity));
+.focus-within\:hover\:bg-primary-50:hover:focus-within {
+  background-color: var(--primary-50);
 }
 .focus-within\:hover\:text-dark:hover:focus-within {
   --tw-text-opacity: 1;
@@ -1633,22 +1612,19 @@ video {
     var(--tw-ring-shadow),
     var(--tw-shadow, 0 0 #0000);
 }
-.focus\:ring-brand-500:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(255 195 66 / var(--tw-ring-opacity));
-}
-.active\:bg-brand-400:active {
-  --tw-bg-opacity: 1;
-  background-color: rgb(255 203 76 / var(--tw-bg-opacity));
-}
-.active\:bg-brand-50:active {
-  --tw-bg-opacity: 1;
-  background-color: rgb(255 248 228 / var(--tw-bg-opacity));
+.focus\:ring-primary-500:focus {
+  --tw-ring-color: var(--primary-500);
 }
 .active\:bg-gray-25:active {
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
 }
+.active\:bg-primary-400:active {
+  background-color: var(--primary-400);
+}
+.active\:bg-primary-50:active {
+  background-color: var(--primary-50);
+}
 .active\:text-gray-900:active {
   --tw-text-opacity: 1;
   color: rgb(37 37 37 / var(--tw-text-opacity));
@@ -1665,16 +1641,16 @@ video {
   --tw-shadow-color: #46464659;
   --tw-shadow: var(--tw-shadow-colored);
 }
-.active\:shadow-brand-300:active {
-  --tw-shadow-color: #FFD665;
+.active\:shadow-gray-700:active {
+  --tw-shadow-color: #656565;
   --tw-shadow: var(--tw-shadow-colored);
 }
-.active\:shadow-brand-700:active {
-  --tw-shadow-color: #FFA33A;
+.active\:shadow-primary-300:active {
+  --tw-shadow-color: var(--primary-300);
   --tw-shadow: var(--tw-shadow-colored);
 }
-.active\:shadow-gray-700:active {
-  --tw-shadow-color: #656565;
+.active\:shadow-primary-700:active {
+  --tw-shadow-color: var(--primary-700);
   --tw-shadow: var(--tw-shadow-colored);
 }
 .disabled\:pointer-events-none:disabled {
@@ -1717,9 +1693,8 @@ video {
   --tw-translate-x: 0.75rem;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
-.peer:checked ~ .peer-checked\:bg-brand-500 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(255 195 66 / var(--tw-bg-opacity));
+.peer:checked ~ .peer-checked\:bg-primary-500 {
+  background-color: var(--primary-500);
 }
 .peer:checked ~ .peer-checked\:opacity-100 {
   opacity: 1;
@@ -1732,9 +1707,8 @@ video {
     var(--tw-ring-shadow),
     var(--tw-shadow, 0 0 #0000);
 }
-.peer:active ~ .peer-active\:ring-brand-300 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(255 214 101 / var(--tw-ring-opacity));
+.peer:active ~ .peer-active\:ring-primary-300 {
+  --tw-ring-color: var(--primary-300);
 }
 .has-\[\:disabled\]\:pointer-events-none:has(:disabled) {
   pointer-events: none;
@@ -1753,14 +1727,6 @@ video {
 .has-\[\:disabled\]\:opacity-30:has(:disabled) {
   opacity: 0.3;
 }
-.dark\:border-brand-100:is(.dark *) {
-  --tw-border-opacity: 1;
-  border-color: rgb(255 236 186 / var(--tw-border-opacity));
-}
-.dark\:border-brand-800:is(.dark *) {
-  --tw-border-opacity: 1;
-  border-color: rgb(253 148 56 / var(--tw-border-opacity));
-}
 .dark\:border-gray-600:is(.dark *) {
   --tw-border-opacity: 1;
   border-color: rgb(121 121 121 / var(--tw-border-opacity));
@@ -1773,6 +1739,12 @@ video {
   --tw-border-opacity: 1;
   border-color: rgb(37 37 37 / var(--tw-border-opacity));
 }
+.dark\:border-primary-100:is(.dark *) {
+  border-color: var(--primary-100);
+}
+.dark\:border-primary-800:is(.dark *) {
+  border-color: var(--primary-800);
+}
 .dark\:bg-dark:is(.dark *) {
   --tw-bg-opacity: 1;
   background-color: rgb(7 7 7 / var(--tw-bg-opacity));
@@ -1797,16 +1769,16 @@ video {
   --tw-gradient-to: rgb(37 37 37 / 0) var(--tw-gradient-to-position);
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
-.dark\:from-brand-900:is(.dark *) {
-  --tw-gradient-from: #F97835 var(--tw-gradient-from-position);
-  --tw-gradient-to: rgb(249 120 53 / 0) var(--tw-gradient-to-position);
-  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
-}
 .dark\:from-cyan-500:is(.dark *) {
   --tw-gradient-from: #06b6d4 var(--tw-gradient-from-position);
   --tw-gradient-to: rgb(6 182 212 / 0) var(--tw-gradient-to-position);
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
+.dark\:from-primary-900:is(.dark *) {
+  --tw-gradient-from: var(--primary-900) var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
 .dark\:to-\[\#070707D9\]:is(.dark *) {
   --tw-gradient-to: #070707D9 var(--tw-gradient-to-position);
 }
@@ -1816,10 +1788,6 @@ video {
 .dark\:to-dark:is(.dark *) {
   --tw-gradient-to: #070707 var(--tw-gradient-to-position);
 }
-.dark\:text-brand-200:is(.dark *) {
-  --tw-text-opacity: 1;
-  color: rgb(255 224 143 / var(--tw-text-opacity));
-}
 .dark\:text-dark:is(.dark *) {
   --tw-text-opacity: 1;
   color: rgb(7 7 7 / var(--tw-text-opacity));
@@ -1848,6 +1816,9 @@ video {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
+.dark\:text-primary-200:is(.dark *) {
+  color: var(--primary-200);
+}
 .dark\:text-white:is(.dark *) {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity));
@@ -1880,10 +1851,6 @@ video {
   --tw-border-opacity: 1;
   border-color: rgb(121 121 121 / var(--tw-border-opacity));
 }
-.dark\:hover\:bg-brand-800:hover:is(.dark *) {
-  --tw-bg-opacity: 1;
-  background-color: rgb(253 148 56 / var(--tw-bg-opacity));
-}
 .dark\:hover\:bg-gray-600:hover:is(.dark *) {
   --tw-bg-opacity: 1;
   background-color: rgb(121 121 121 / var(--tw-bg-opacity));
@@ -1892,6 +1859,9 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(70 70 70 / var(--tw-bg-opacity));
 }
+.dark\:hover\:bg-primary-800:hover:is(.dark *) {
+  background-color: var(--primary-800);
+}
 .hover\:dark\:bg-transparent:is(.dark *):hover {
   background-color: transparent;
 }
@@ -1903,14 +1873,13 @@ video {
 .dark\:hover\:to-\[\#070707D9\]:hover:is(.dark *) {
   --tw-gradient-to: #070707D9 var(--tw-gradient-to-position);
 }
-.dark\:hover\:text-brand-600:hover:is(.dark *) {
-  --tw-text-opacity: 1;
-  color: rgb(255 181 61 / var(--tw-text-opacity));
-}
 .dark\:hover\:text-light:hover:is(.dark *) {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
+.dark\:hover\:text-primary-600:hover:is(.dark *) {
+  color: var(--primary-600);
+}
 .dark\:focus-within\:hover\:bg-gray-700:hover:focus-within:is(.dark *) {
   --tw-bg-opacity: 1;
   background-color: rgb(101 101 101 / var(--tw-bg-opacity));

package/dist/index.js

@@ -55,7 +55,7 @@ function AccordionItem({
     {
       className: cn(
         "rounded-lg mb-3 shadow-cardShadow dark:shadow-none border dark:border-gray-900",
-        isOpen ? "border-brand-500 shadow-cardShadowActive dark:bg-gray-900" : "hover:border-gray-500 hover:bg-gray-100 hover:dark:bg-transparent hover:dark:border-gray-600",
+        isOpen ? "border-primary-500 shadow-cardShadowActive dark:bg-gray-900" : "hover:border-gray-500 hover:bg-gray-100 hover:dark:bg-transparent hover:dark:border-gray-600",
         disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer"
       )
     },
@@ -99,9 +99,9 @@ var buttonVariants = cva(
   {
     variants: {
       variant: {
-        primary: "bg-brand-500 text-light border hover:bg-brand-600 hover:shadow-[inset_0px_2px_8px_-2px_#FFFFFF8F,inset_0px_8px_8px_-2px_#0000002E] active:bg-brand-400 active:shadow-[0px_0px_0px_3px] active:shadow-brand-300",
-        "primary-light": "bg-brand-50 text-brand-600 hover:bg-brand-200 hover:shadow-[inset_0px_2px_8px_-2px_#FFFFFF8F,inset_0px_8px_8px_-2px_#356AC32E] active:shadow-[0px_0px_0px_3px] active:bg-brand-50 active:shadow-brand-300",
-        secondary: "bg-brand-50 text-brand-800 hover:bg-brand-200 hover:shadow-[inset_0px_2px_8px_-2px_#FFFFFF8F,inset_0px_8px_8px_-2px_#6984AD2E] active:bg-brand-50 active:shadow-[0px_0px_0px_3px] active:shadow-brand-700",
+        primary: "bg-primary-500 text-light border hover:bg-primary-600 hover:shadow-[inset_0px_2px_8px_-2px_#FFFFFF8F,inset_0px_8px_8px_-2px_#0000002E] active:bg-primary-400 active:shadow-[0px_0px_0px_3px] active:shadow-primary-300",
+        "primary-light": "bg-primary-50 text-primary-600 hover:bg-primary-200 hover:shadow-[inset_0px_2px_8px_-2px_#FFFFFF8F,inset_0px_8px_8px_-2px_#356AC32E] active:shadow-[0px_0px_0px_3px] active:bg-primary-50 active:shadow-primary-300",
+        secondary: "bg-primary-50 text-primary-800 hover:bg-primary-200 hover:shadow-[inset_0px_2px_8px_-2px_#FFFFFF8F,inset_0px_8px_8px_-2px_#6984AD2E] active:bg-primary-50 active:shadow-[0px_0px_0px_3px] active:shadow-primary-700",
         tertiary: "bg-gray-100 text-gray-900 hover:bg-gray-300 hover:shadow-[inset_0px_2px_8px_-2px_#FFFFFF8F,inset_0px_8px_8px_-2px_#9595952E] active:bg-gray-25 active:shadow-[0px_0px_0px_3px] active:shadow-gray-700",
         quaternary: "bg-gray-50/[0.02] text-light backdrop-blur-[6px] hover:shadow-[inset_0px_8px_8px_-2px_#23232314] hover:backdrop-blur-md hover:bg-gray-200/10 active:bg-gray-25 active:shadow-[0px_0px_0px_3px] active:text-gray-900 active:shadow-[#46464659]"
       },
@@ -273,7 +273,7 @@ var Checkbox = forwardRef(
       "div",
       {
         className: cn(
-          "group inline-flex relative items-center rounded-full border-2 border-transparent hover:border-brand-300",
+          "group inline-flex relative items-center rounded-full border-2 border-transparent hover:border-primary-300",
           disabled && "border-none"
         )
       },
@@ -287,7 +287,7 @@ var Checkbox = forwardRef(
           readOnly,
           checked,
           className: cn(
-            "peer relative h-5 w-5 cursor-pointer appearance-none rounded-full border-2 border-gray-300 transition-all checked:border-brand-500 hover:border-brand-500 hover:bg-brand-25/25 disabled:opacity-30 disabled:pointer-events-none disabled:border-gray-400",
+            "peer relative h-5 w-5 cursor-pointer appearance-none rounded-full border-2 border-gray-300 transition-all checked:border-primary-500 hover:border-primary-500 hover:bg-primary-25/25 disabled:opacity-30 disabled:pointer-events-none disabled:border-gray-400",
             className
           )
         }
@@ -296,7 +296,7 @@ var Checkbox = forwardRef(
         "span",
         {
           className: cn(
-            "absolute text-brand-600 transition-opacity opacity-0 pointer-events-none top-2/4 left-2/4 -translate-y-2/4 -translate-x-2/4 peer-checked:opacity-100",
+            "absolute text-primary-600 transition-opacity opacity-0 pointer-events-none top-2/4 left-2/4 -translate-y-2/4 -translate-x-2/4 peer-checked:opacity-100",
             disabled && "text-gray-300"
           )
         },
@@ -333,9 +333,9 @@ import { cva as cva5 } from "class-variance-authority";
 var chipVariants = cva5("", {
   variants: {
     variant: {
-      primary: "bg-white text-brand-500 hover:text-white hover:bg-gradient-to-r hover:from-brand-500 hover:to-[#264D8E]",
-      secondary: "bg-brand-500 text-white hover:text-white hover:bg-gradient-to-r hover:from-brand-500 hover:to-[#285092]",
-      glass: "text-brand-500"
+      primary: "bg-white text-primary-500 hover:text-white hover:bg-gradient-to-r hover:from-primary-500 hover:to-primary-600",
+      secondary: "bg-primary-500 text-white hover:text-white hover:bg-gradient-to-r hover:from-primary-500 hover:to-primary-600",
+      glass: "text-primary-500"
     },
     size: {
       sm: "text-sm py-1 px-3",
@@ -363,10 +363,10 @@ var Chip = ({
       className: cn(
         "rounded-radius-xl bg-gradient-to-r w-fit",
         {
-          solid: "from-brand-200 to-brand-500",
-          primary: "from-brand-200 to-brand-500",
-          secondary: "from-brand-200 to-brand-500",
-          glass: "border border-brand-500"
+          solid: "from-primary-200 to-primary-500",
+          primary: "from-primary-200 to-primary-500",
+          secondary: "from-primary-200 to-primary-500",
+          glass: "border border-primary-500"
         }[variant || "primary"],
         "p-[1px]"
       )
@@ -474,12 +474,12 @@ function Footer({
     "footer",
     {
       className: cn(
-        "bg-gradient-to-b from-gray-25 to-brand-100 dark:from-brand-900 dark:to-dark",
+        "bg-gradient-to-b from-gray-25 to-primary-100 dark:from-primary-900 dark:to-dark",
         className
       )
     },
     children,
-    footerBottom && /* @__PURE__ */ React10.createElement("section", { className: "border-t border-brand-500 dark:border-brand-800 text-center py-spacing-md" }, footerBottom)
+    footerBottom && /* @__PURE__ */ React10.createElement("section", { className: "border-t border-primary-500 dark:border-primary-800 text-center py-spacing-md" }, footerBottom)
   );
 }
 var FooterHeader = ({ children, className }) => {
@@ -521,20 +521,20 @@ var FooterList = ({ footerItems, target }) => {
       Paragraph_default,
       {
         variant: "b3",
-        className: "dark:text-gray-300 hover:text-brand-400 dark:hover:text-brand-600 text-gray-900"
+        className: "dark:text-gray-300 hover:text-primary-400 dark:hover:text-primary-600 text-gray-900"
       },
       data2?.text
     )))))))
   );
 };
 var FooterIcons = ({ icons }) => {
-  return /* @__PURE__ */ React10.createElement("div", { className: "flex flex-wrap justify-center items-center gap-5 text-brand-700 dark:text-brand-200" }, icons.map((icon, index) => /* @__PURE__ */ React10.createElement(
+  return /* @__PURE__ */ React10.createElement("div", { className: "flex flex-wrap justify-center items-center gap-5 text-primary-700 dark:text-primary-200" }, icons.map((icon, index) => /* @__PURE__ */ React10.createElement(
     Link,
     {
       href: icon.link,
       key: index,
       target: "_blank",
-      className: "hover:bg-brand-100 dark:hover:bg-brand-800 p-1 rounded-radius-sm"
+      className: "hover:bg-primary-100 dark:hover:bg-primary-800 p-1 rounded-radius-sm"
     },
     icon.icon
   )));
@@ -554,7 +554,7 @@ var ImageCard = ({
     "div",
     {
       className: cn(
-        "transition-all duration-300 ease-in-out hover:ring-1 hover:ring-[#4285F4] relative rounded-radius-xl overflow-hidden block z-10 bg-cover bg-no-repeat bg-center",
+        "transition-all duration-300 ease-in-out hover:ring-1 hover:ring-brand-500 relative rounded-radius-xl overflow-hidden block z-10 bg-cover bg-no-repeat bg-center",
         className
       ),
       style: {
@@ -575,7 +575,7 @@ var inputVariants = cva6(
   {
     variants: {
       variant: {
-        default: "dark:text-gray-500 dark:bg-gray-900 dark:border-gray-800 dark:hover:text-light dark:hover:bg-gray-800 dark:hover:border-gray-700 dark:focus-within:bg-gray-100 dark:focus-within:border-gray-800 dark:focus-within:hover:bg-gray-700 dark:focus-within:text-dark dark:has-[:disabled]:bg-gray-700 bg-gray-100 border-gray-200 text-gray-600 hover:border-gray-300 hover:text-gray-500 hover:bg-gray-300 focus-within:bg-gray-50 focus-within:border-gray-400 focus-within:text-dark focus-within:hover:text-dark focus-within:hover:border-brand-100 focus-within:hover:bg-brand-50 has-[:disabled]:bg-gray-25 has-[:disabled]:border-gray-400",
+        default: "dark:text-gray-500 dark:bg-gray-900 dark:border-gray-800 dark:hover:text-light dark:hover:bg-gray-800 dark:hover:border-gray-700 dark:focus-within:bg-gray-100 dark:focus-within:border-gray-800 dark:focus-within:hover:bg-gray-700 dark:focus-within:text-dark dark:has-[:disabled]:bg-gray-700 bg-gray-100 border-gray-200 text-gray-600 hover:border-gray-300 hover:text-gray-500 hover:bg-gray-300 focus-within:bg-gray-50 focus-within:border-gray-400 focus-within:text-dark focus-within:hover:text-dark focus-within:hover:border-primary-100 focus-within:hover:bg-primary-50 has-[:disabled]:bg-gray-25 has-[:disabled]:border-gray-400",
         glass: "backdrop-blur-[3.5px] bg-light/10 dark:bg-dark/20 dark:border-gray-800 border-gray-200/50 text-light"
       }
     },
@@ -650,7 +650,7 @@ var ListItem = React14.forwardRef(
   ({ className, title, href, onClick, as = "link", variant = "solid", icon }, ref) => {
     const pathname = usePathname();
     const isActive = as === "link" && href === pathname;
-    const variantClasses = variant === "solid" ? "rounded-radius-lg hover:bg-brand-50 text-dark group border border-transparent hover:border-brand-200 focus:outline-none focus:ring-1 focus:ring-brand-500 focus:text-white leading-none no-underline outline-none transition-colors" : variant === "glass" ? "rounded-radius-lg group border border-transparent hover:border-brand-200 focus:outline-none focus:ring-1 focus:ring-brand-500 focus:text-white leading-none no-underline outline-none transition-colors" : "";
+    const variantClasses = variant === "solid" ? "rounded-radius-lg hover:bg-primary-50 text-dark group border border-transparent hover:border-primary-200 focus:outline-none focus:ring-1 focus:ring-primary-500 focus:text-white leading-none no-underline outline-none transition-colors" : variant === "glass" ? "rounded-radius-lg group border border-transparent hover:border-primary-200 focus:outline-none focus:ring-1 focus:ring-primary-500 focus:text-white leading-none no-underline outline-none transition-colors" : "";
     if (as === "button") {
       return /* @__PURE__ */ React14.createElement(
         "button",
@@ -670,7 +670,7 @@ var ListItem = React14.forwardRef(
         passHref: true,
         className: cn(
           "px-4 py-[8px] font-karla w-full flex items-center gap-2 group",
-          isActive ? "bg-brand-400 text-white border border-brand-200" : variantClasses,
+          isActive ? "bg-primary-400 text-white border border-primary-200" : variantClasses,
           className
         ),
         ref
@@ -709,7 +709,7 @@ var Slider = forwardRef3(
           size === "sm" ? "h-1.5" : "h-4"
         ),
         style: {
-          background: `linear-gradient(to right, #8EB6F8 ${progress}%, #d1d5db ${progress}%)`
+          background: `linear-gradient(to right, var(--primary-500) ${progress}%, #d1d5db ${progress}%)`
         }
       }
     ));
@@ -730,12 +730,12 @@ var StatsCard = ({
     Card,
     {
       className: cn(
-        "border border-[#eee] hover:border-[#4285F4] rounded-radius-xl bg-[#FFFFFFE5] bg-gradient-to-b bg-[#fff] hover:from-[#8EB6F8D9] hover:to-[#356AC3D9] dark:from-[#252525D9] dark:to-[#070707D9] dark:hover:from-[#1A3562D9] dark:hover:to-[#070707D9] backdrop-blur-sm px-[32px] py-[64px] group",
+        "border border-[#eee] hover:border-primary-500 rounded-radius-xl bg-[#FFFFFFE5] bg-gradient-to-b bg-[#fff] hover:from-[#8EB6F8D9] hover:to-[#356AC3D9] dark:from-[#252525D9] dark:to-[#070707D9] dark:hover:from-[#1A3562D9] dark:hover:to-[#070707D9] backdrop-blur-sm px-[32px] py-[64px] group",
         className
       )
     },
     /* @__PURE__ */ React16.createElement("span", { className: "group-hover:text-white text-dark dark:text-white" }, cardIcon),
-    /* @__PURE__ */ React16.createElement(CardTitle, { className: "group-hover:text-white text-[48px] font-bold text-brand-500 dark:text-white my-4" }, statTitle),
+    /* @__PURE__ */ React16.createElement(CardTitle, { className: "group-hover:text-white text-[48px] font-bold text-primary-500 dark:text-white my-4" }, statTitle),
     /* @__PURE__ */ React16.createElement(CardDescription, { className: "group-hover:text-white text-[24px] hover:text-white text-dark leading-[25px]" }, statDesc)
   );
 };
@@ -751,7 +751,7 @@ var textareaVariants = cva8(
   {
     variants: {
       variant: {
-        default: "dark:text-gray-500 dark:bg-gray-900 dark:border-gray-800 dark:hover:text-light dark:hover:bg-gray-800 dark:hover:border-gray-700 dark:focus-within:bg-gray-100 dark:focus-within:border-gray-800 dark:focus-within:hover:bg-gray-700 dark:focus-within:text-dark dark:disabled:bg-gray-700 bg-gray-100 border-gray-200 text-gray-600 hover:border-gray-300 hover:text-gray-500 hover:bg-gray-300 focus-within:bg-gray-50 focus-within:border-gray-400 focus-within:text-dark focus-within:hover:text-dark focus-within:hover:border-brand-100 focus-within:hover:bg-brand-50 disabled:bg-gray-25 disabled:border-gray-400",
+        default: "dark:text-gray-500 dark:bg-gray-900 dark:border-gray-800 dark:hover:text-light dark:hover:bg-gray-800 dark:hover:border-gray-700 dark:focus-within:bg-gray-100 dark:focus-within:border-gray-800 dark:focus-within:hover:bg-gray-700 dark:focus-within:text-dark dark:disabled:bg-gray-700 bg-gray-100 border-gray-200 text-gray-600 hover:border-gray-300 hover:text-gray-500 hover:bg-gray-300 focus-within:bg-gray-50 focus-within:border-gray-400 focus-within:text-dark focus-within:hover:text-dark focus-within:hover:border-primary-100 focus-within:hover:bg-primary-50 disabled:bg-gray-25 disabled:border-gray-400",
         glass: "backdrop-blur-[3.5px] bg-light/10 dark:bg-dark/20 dark:border-gray-800 border-gray-200/50 text-light"
       }
     },
@@ -783,7 +783,7 @@ var Textarea_default = Textarea;
 import { cva as cva9 } from "class-variance-authority";
 import React18, { forwardRef as forwardRef5 } from "react";
 var toggleVariants = cva9(
-  "rounded-radius-xl bg-gray-300 transition-colors peer-checked:bg-brand-500 peer-active:ring-2 peer-active:ring-brand-300",
+  "rounded-radius-xl bg-gray-300 transition-colors peer-checked:bg-primary-500 peer-active:ring-2 peer-active:ring-primary-300",
   {
     variants: {
       size: {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "katalyst-riya-test",
   "description": "website design system",
-  "version": "0.0.2",
+  "version": "0.0.11-alpha",
   "private": false,
   "main": "dist/index.js",
   "module": "dist/index.mjs",