update src/components/ThemeColor/index.js and tailwind.config.js

src/components/ThemeColor/ItemColor.js

@@ -0,0 +1,9 @@
+const ItemColor = ({ item, theme, className, onClick }) => {
+  return (
+    <div className={className} onClick={onClick}>
+      {item}
+      <p className="text-xs">{theme[item]}</p>
+    </div>
+  );
+};
+export default ItemColor;

src/components/ThemeColor/default.js

@@ -0,0 +1,13 @@
+const defaultTheme = {
+  primary: "#61DAFB",
+  primaryText: "#000000",
+  primaryDark: "#61DAFB",
+  primaryLight: "#61DAFB",
+  secondary: "#254E70",
+  secondaryText: "#000000",
+  secondaryDark: "#61DAFB",
+  secondaryLight: "#61DAFB",
+};
+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 ";
+export default defaultTheme;

src/components/ThemeColor/index.js

@@ -1,15 +1,14 @@
 import React, { useState } from "react";
 import SwitchDesign from "../SwitchDesign/Switch";
-import { SketchPicker } from "react-color";
+import putTheme from "./util/putTheme";
+import defaultTheme from "./default";
+import Picker from "./util/Picker";
+import ItemColor from "./ItemColor";
 
 const ThemeColor = () => {
-  const colors = ["#9253a1", "#f063a4", "#2dc5f4"];
+  const [item, setItem] = useState(null);
-
+  const [theme, setTheme] = useState(defaultTheme);
-  const [background, setBackground] = useState("#071415");
+  putTheme(theme);
-  const [current, setCurrent] = useState(null);
-
-  const [color, setColor] = useState("lightblue");
-  const [hidden, setHidden] = useState(false);
 
   return (
     <div className="ltr w-full h-screen flex flex-col items-center bg-[#e1f5ff] rounded-sm border border-[#b8dff3]">
@@ -27,7 +26,7 @@ const ThemeColor = () => {
         {/* right */}
         <div className="w-1/2 flex-grow flex-1 flex flex-col p-4">fsd</div>
         {/* left */}
-        <div className="w-1/2 flex-grow flex-1 flex flex-col p-4 bg-red-200">
+        <div className="w-1/2 flex-grow flex-1 flex flex-col p-4">
           <div className="w-full flex flex-row-reverse items-center justify-between">
             <div className="flex flex-row-reverse items-center justify-between">
               <span className="text-xs ml-2">Dark</span> <SwitchDesign />
@@ -35,35 +34,106 @@ const ThemeColor = () => {
             <p className="text-2xl">The Color System</p>
           </div>
           <hr className="my-2 border border-[#b8dff3]" />
+
           <p className="text-[#64b6df] text-lg font-sansbold ">
             Original Colors
           </p>
-          <div className="bg-red-400 flex flex-row justify-between gap-x-10 mt-2">
+          <div className="flex flex-row justify-between gap-x-10 mt-2">
+            <ColorCard
+              theme={theme}
+              item="primary"
+              text={true}
+              dark={true}
+              light={true}
+              setItem={setItem}
+            />
+            <ColorCard
+              theme={theme}
+              item="secondary"
+              text={true}
+              dark={true}
+              light={true}
+              setItem={setItem}
+            />
+          </div>
+          <ColorCard
+            theme={theme}
+            item="background"
+            text={true}
+            setItem={setItem}
+          />
+          <ColorCard
+            theme={theme}
+            item="surface"
+            text={true}
+            setItem={setItem}
+          />
+        </div>
+      </div>
+      {item && <Picker item={item} theme={theme} setTheme={setTheme} />}
+    </div>
+  );
+};
+
+export default ThemeColor;
+
+const ColorCard = ({ theme, text, dark, light, item, setItem }) => {
+  return (
+    <div className="flex-1 flex flex-col gap-y-3">
       <div
-              className="flex-1 rounded-sm relative"
+        className={`flex flex-col cursor-pointer rounded-lg relative p-4 bg-${item} ${
-              style={{ background: color }}
+          text ? `text-${item}Text` : ""
+        }`}
+        onClick={() => setItem(item)}
       >
-              {hidden && (
+        <ItemColor className=" text-2xl font-bold" item={item} theme={theme} />
-                <SketchPicker
+        {text && (
-                  className="absolute bottom-10 left-0"
+          <ItemColor
-                  color={color}
+            className="self-end text-sm"
-                  onChange={(updatedColor) => setColor(updatedColor.hex)}
+            item={item + "Text"}
+            theme={theme}
+            onClick={(e) => {
+              e.stopPropagation();
+              setItem(item + "Text");
+            }}
           />
         )}
-              <button onClick={() => setHidden(!hidden)}>
-                {hidden ? "close" : "open"}
-              </button>
       </div>
-            <div className="flex-1 bg-yellow-600 rounded-sm">Card</div>
+      <div className="flex flex-row gap-x-3">
+        {" "}
+        {dark ? (
+          <div
+            className={`flex-col cursor-pointer rounded-lg relative p-4 bg-${item}Dark ${
+              text ? `text-${item}Text` : ""
+            }`}
+            onClick={() => setItem(item + "Dark")}
+          >
+            <ItemColor
+              className=" text-lg font-bold"
+              item={item + "Dark"}
+              theme={theme}
+            />
           </div>
+        ) : null}
+        {light ? (
+          <div
+            className={`flex-col cursor-pointer rounded-lg relative p-4 bg-${item}Light ${
+              text ? `text-${item}Text` : ""
+            }`}
+            onClick={() => setItem(item + "Light")}
+          >
+            <ItemColor
+              className=" text-lg font-bold"
+              item={item + "Light"}
+              theme={theme}
+            />
           </div>
+        ) : null}
       </div>
     </div>
   );
 };
 
-export default ThemeColor;
-
 // <div style={{ background: background }} className="h-screen w-full">
 //   {current != null && <h1>Copied {current}</h1>}
 //   <div className=" flex flex-row item-center justify-center">

src/components/ThemeColor/util/Picker.js

@@ -0,0 +1,16 @@
+import { SketchPicker } from "react-color";
+import { useState } from "react";
+const Picker = ({ theme, item, setTheme }) => {
+  const [color, setColor] = useState(theme[item]);
+  return (
+    <SketchPicker
+      className="absolute bottom-16 left-0"
+      color={color}
+      onChange={(updatedColor) => {
+        setColor(updatedColor.hex);
+        setTheme({ ...theme, [item]: updatedColor.hex });
+      }}
+    />
+  );
+};
+export default Picker;

src/components/ThemeColor/util/putTheme.js

@@ -0,0 +1,9 @@
+const putTheme = (theme) => {
+  const root = document.documentElement;
+  Object.keys(theme).forEach((property) => {
+    if (property === "name") return;
+    root.style.setProperty(`--theme-${property}`, theme[property]);
+  });
+};
+putTheme({});
+export default putTheme;

tailwind.config.js

@@ -11,79 +11,16 @@ module.exports = {
         sansbold: ["sansbold"],
       },
     },
-
+    colors: {
-    textColor: (theme) => ({
+      primary: "var(--theme-primary)",
-      ...theme("colors"),
+      primaryText: "var(--theme-primaryText)",
-      // used in ProductDesign Component
+      secondary: "var(--theme-secondary)",
-      discountPriceTitle: "#4ACA53",
+      secondaryText: "var(--theme-secondaryText)",
-      productTitle: "#246E8A",
+      primaryDark: "var(--theme-primaryDark)",
-      productContent: "#707070",
+      primaryLight: "var(--theme-primaryLight)",
-      productStar: "#F7FF00",
+      secondaryDark: "var(--theme-secondaryDark)",
-      productPrice: "#132F52",
+      secondaryLight: "var(--theme-secondaryLight)",
-      productBorderBtn: "FFF3F3",
+    },
-      productTag: "#38A1B6",
-      borderColor: "#dbdbdb",
-      selectColor1: "#924EEB",
-      selectColor2: "#89ECFF",
-      selectColor3: "#FC5353",
-      selectColor4: "#FCF653",
-      grayTextColor: "#646464",
-      lightGrayTextColor: "#818181",
-      lightOrangeTextColor: "#F7B605",
-      lightYellowTextColor: "#C8EE49",
-      lightGreenTextColor: "#5DCE06",
-      lightPurpleTextColor: "#A680FF",
-      lightBlueTextColor: "#06BACE",
-      lightBlueTextColor2: "#196EC0",
-      darkBlueTextColor: "#0615CE",
-      darkBlueTextColor2: "#235A90",
-      darkRedTextColor: "#CE3B06",
-      darkCrimsonTextColor: "#05335F",
-    }),
-    backgroundColor: (theme) => ({
-      ...theme("colors"),
-      // used in ProductDesign Component
-      productTagBg: "#E1FAFF",
-      likeBtnBg: "#FFF3F3",
-      discountPriceBg: "#F0FFF1",
-      counterBg: "#66B1EB",
-      incrementDecrementBg: "#2E7AB5",
-      blueBgColor: "#196EC0",
-      darkGreenBg: "#038A99",
-      lightGrayBgColor: "#818181",
-      midGrayBgColor: "#DBDBDB",
-      lightOrangeBgColor: "#F7B60511",
-      lightYellowBgColor: "#CEFE2D11", //opacity should be 10 % instead of 100%
-      lightBlueBgColor: "#8891FC11", //opacity should be 10 % instead of 100%
-      lightGreenBgColor: "#5DCE0611", //opacity should be 3 % instead of 100%
-      lightPurpleBgColor: "#A680FF11", //opacity should be 8 % instead of 100%
-      greenBookBg: "#5DA041",
-      darkGreenBookBg: "#293636",
-      lightBlueBookBg: "#9BBCCC",
-      lightSkyBlueBookBg: "#B2D6EE",
-      darkNavyBlueBookBg: "#0E0E0E",
-      darkCrimsonBgColor: "#132F52",
-      rangeBgColor: "#D3E9FF",
-      rangeFillBgColor: "#68A8E6",
-      playButtonIcon: "#0D0D0D99",
-      playButtonIcon2: "#E8E8E899",
-      blackBg: "#606060 ",
-      removeCardBgColor: "#FA472B",
-    }),
-    borderColor: (theme) => ({
-      ...theme("colors"),
-      // used in ProductDesign Component
-      productDesignBorderColor: "#F3F3F3",
-      lightBlueBorderColor: "#06BACE",
-      grayBorderColor: "#C3C3C3",
-      lightGrayBorderColor: "#DBDBDB88",
-      lightOrangeBorderColor: "#F7B605",
-      lightYellowBorderColor: "#CFFF2D",
-      lightGreenBorderColor: "#5DCE06",
-      lightPurpleBorderColor: "#A680FF",
-      darkBlueBorderColor: "#0615CE",
-      darkCrimsonBorderColor: "#132F52",
-    }),
   },
   plugins: [
     require("@themesberg/flowbite/plugin"),