update ColorCard.js, default.js, src/components/ThemeColor/index.js and tailwind.config.js

src/components/ThemeColor/ColorCard.js

@@ -1,11 +1,19 @@
 import React from "react";
 import ItemColor from "./ItemColor";
 
-const ColorCard = ({ theme, text, dark, light, item, setItem }) => {
+const ColorCard = ({
+  theme,
+  text,
+  dark,
+  light,
+  borderColor,
+  item,
+  setItem,
+}) => {
   return (
     <div className="flex flex-col gap-y-3">
       <div
-        className={`w-[344px] h-[130px] flex flex-col cursor-pointer rounded-sm relative p-4 bg-${item} ${
+        className={`w-[344px] h-[130px] flex flex-col border-2 border-${borderColor} cursor-pointer rounded-sm relative p-4 bg-${item} ${
           text ? `text-${item}Text` : ""
         } `}
         onClick={() => setItem(item)}

src/components/ThemeColor/default.js

@@ -1,13 +1,18 @@
 const defaultTheme = {
-  primary: "#61DAFB",
+  primary: "#00a8ff",
   primaryText: "#000000",
-  primaryDark: "#61DAFB",
+  primaryDark: "#005dff",
-  primaryLight: "#61DAFB",
+  primaryLight: "#70ceff",
-  secondary: "#254E70",
+  secondary: "#0dbe94",
   secondaryText: "#000000",
-  secondaryDark: "#61DAFB",
+  secondaryDark: "#008868",
-  secondaryLight: "#61DAFB",
+  secondaryLight: "#4effd5",
+  background: "#ffffff",
+  backgroundText: "#000000",
+  surface: "#6eb1d2",
+  surfaceText: "#000000",
+  surfaceBorder: "#166a95",
 };
 const classNames =
-  "bg-primary text-primaryText bg-secondary text-secondaryText bg-primaryDark  bg-primaryLight  text-primaryDark text-primaryLight bg-primaryDark  bg-secondaryLight  text-secondaryDark text-secondaryLight bg-secondaryDark  text-secondaryDark ";
+  "bg-primary text-primaryText bg-secondary text-secondaryText bg-primaryDark  bg-primaryLight  text-primaryDark text-primaryLight bg-primaryDark  bg-secondaryLight  text-secondaryDark text-secondaryLight bg-secondaryDark  text-secondaryDark bg-background text-backgroundText bg-surface text-surfaceText border-surfaceBorder";
 export default defaultTheme;

src/components/ThemeColor/index.js

@@ -55,7 +55,7 @@ const ThemeColor = () => {
               setItem={setItem}
             />
           </div>
-          <div className="flex flex-row justify-between mt-2 gap-x-5 bg-yellow-200">
+          <div className="flex flex-row justify-between mt-2 gap-x-5">
             <ColorCard
               theme={theme}
               item="background"
@@ -66,6 +66,7 @@ const ThemeColor = () => {
               theme={theme}
               item="surface"
               text={true}
+              borderColor={true}
               setItem={setItem}
             />
           </div>

tailwind.config.js

@@ -24,6 +24,7 @@ module.exports = {
       backgroundText: "var(--theme-backgroundText)",
       surface: "var(--theme-surface)",
       surfaceText: "var(--theme-surfaceText)",
+      surfaceBorder: "var(--theme-surfaceBorder)",
     },
   },
   plugins: [