update src/components/BoxNextToEachOther/index.js, src/components/ButtonDesign/Button/index.js, src/components/ButtonDesign/ButtonDivTag/index.js and src/components/CardDesgin/CardTrelloDesign/index.js

src/components/BoxNextToEachOther/index.js

@@ -10,8 +10,8 @@ const BoxNextToEachOther = ({ cards, selected }) => {
         //  ${active === card ? "bg-[#245CE1]" : "bg-white"}
         <div
           key={index}
-          className={`relative max-w-[224px] max-h-[210px] w-44 h-44 flex flex-col items-center justify-center text-2xl border border-[#EBF4FF] rounded-md cursor-pointer
+          className={`relative max-w-[224px] max-h-[210px] w-44 h-44 flex flex-col items-center justify-center text-2xl border border-surfaceBorder rounded-md cursor-pointer
-           ${active.includes(card) ? "bg-[#245CE1]" : "bg-white"}
+           ${active.includes(card) ? "bg-primary" : "bg-surface"}
 
           `}
           // onClick={() => setActive(active === card ? null : card)}
@@ -25,8 +25,8 @@ const BoxNextToEachOther = ({ cards, selected }) => {
         >
           {console.log(setActive)}
           <h2
-            className={`font-sansbold 
+            className={`font-bold 
-            ${active.includes(card) ? "text-white" : "text-[#0F0543]"}
+            ${active.includes(card) ? "text-white" : "text-primaryText"}
             `}
           >
             {card.title}

src/components/ButtonDesign/Button/index.js

@@ -31,10 +31,10 @@ export default Button;
 
 Button.defaultProps = {
   className:
-    "bg-red-400 text-white hover:bg-gray-900 border border-b-4 border-lightBlueBorderColor rounded text-sm px-4 py-4 hover:bg-opacity-90",
+    "bg-primary text-primaryText hover:bg-primaryDark border border-b-4 border-primaryLight rounded text-sm px-4 py-4 hover:bg-opacity-90",
   text: "اطلاعات بیشتر",
 
-  iconHolderClassName: "bg-darkGreenBg mr-2",
+  iconHolderClassName: "bg-secondary mr-2",
   iconClassName: "w-4",
   icon: false,
 

src/components/ButtonDesign/ButtonDivTag/index.js

@@ -17,6 +17,6 @@ export default ButtonDivTag;
 
 ButtonDivTag.defaultProps = {
   className:
-    "bg-darkGreenBg hover:bg-gray-900 textColor border border-lightBlueBorderColor border-b-4 border-lightBlueBorderColor rounded text-sm px-4 py-4",
+    "bg-primary hover:bg-primaryDark hover:bg-opacity-90 text-primaryText border border-b-4 border-primaryLight rounded text-sm px-4 py-4",
   text: "its a DIV tag not BUTTON",
 };

src/components/CardDesgin/CardTrelloDesign/index.js

@@ -17,7 +17,7 @@ const CardTrelloDesign = ({
   showEmptyCards,
 }) => {
   return (
-    <div className="max-w-[400px] mx-auto bg-white mt-10 rounded-md shadow p-3">
+    <div className="max-w-[400px] mx-auto bg-surface mt-10 rounded shadow p-3">
       {/* top */}
       <div
         className={`flex justify-between items-center ${
@@ -37,7 +37,7 @@ const CardTrelloDesign = ({
           {showBtn &&
             buttons.map((btn) => (
               <Button
-                className={`${btn.className}  border-none px-1 py-0.5 text-xs rounded-sm text-white`}
+                className={`${btn.className}  border-none px-1 py-0.5 text-xs rounded text-white`}
                 text={btn.name}
               />
             ))}
@@ -51,7 +51,7 @@ const CardTrelloDesign = ({
         </div>
       </div>
       {/* middle */}
-      <p className="text-sm leading-6 text-justify mt-3 text-[#00253A]">
+      <p className="text-sm leading-6 text-justify mt-3 text-primaryText">
         طراحی رابط کاربری و تجربه کاربر پروژه اندیشمند به همراه موارد اطلاحی
         پروژه دانوین
       </p>
@@ -81,7 +81,7 @@ const CardTrelloDesign = ({
             tags.map((tag) => (
               <TagDesign1
                 title={tag.title}
-                tagClassName={`flex-row-reverse rounded-sm p-1 text-xs ${tag.className}`}
+                tagClassName={`flex-row-reverse rounded p-1 text-xs ${tag.className}`}
                 iconClassName={"w-4 mr-0 ml-1"}
                 icon={tag.icon}
               />