update 7 files

src/components/ThemeColor/default.js

@@ -12,7 +12,15 @@ const defaultTheme = {
   surface: "#6eb1d2",
   surfaceText: "#000000",
   surfaceBorder: "#FF08AD",
+  info: "#43c1ff",
+  infoMessageText: "#000000",
+  success: "#42b258",
+  successMessageText: "#000000",
+  warning: "#ffa200",
+  warningMessageText: "#000000",
+  error: "#ff4600",
+  errorMessageText: "#000000",
 };
 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-background text-backgroundText bg-surface text-surfaceText border-surfaceBorder";
+  "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 bg-info text-infoMessageText bg-success text-successMessageText bg-warning text-warningMessageText bg-error text-errorMessageText";
 export default defaultTheme;

src/components/ThemeColor/index.js

@@ -11,7 +11,7 @@ const ThemeColor = () => {
   putTheme(theme);
 
   return (
-    <div className="ltr w-full h-screen flex flex-col items-center bg-[#e1f5ff] rounded-sm border border-[#b8dff3]">
+    <div className="ltr w-full  flex flex-col items-center bg-[#e1f5ff] rounded-sm border border-[#b8dff3]">
       <h2 className="mt-4 text-2xl text-blue-900 font-sansbold">
         Theme Properties
       </h2>
@@ -22,9 +22,15 @@ const ThemeColor = () => {
         Version:
         <span className="ml-1">1</span>
       </p>
-      <div className="w-full flex flex-row-reverse items-center justify-between mt-7 divide-x-2 divide-[#b8dff3] divide-x-reverse">
+      <div className="w-full flex flex-row-reverse items-start justify-between mt-7 divide-x-2 divide-[#b8dff3] divide-x-reverse">
         {/* right */}
-        <div className="flex-grow flex flex-col p-4"></div>
+        <div className="flex-grow flex flex-col p-4">
+          {" "}
+          <div className="w-full flex flex-row items-center justify-between">
+            <p className="text-2xl">Screens</p>
+          </div>
+          <hr className="my-2 border border-[#b8dff3]" />
+        </div>
         {/* left */}
         <div className="flex-grow flex flex-col flex-1 p-4">
           <div className="w-full flex flex-row-reverse items-center justify-between">
@@ -37,6 +43,7 @@ const ThemeColor = () => {
           <p className="text-[#64b6df] text-lg font-sansbold ">
             Original Colors
           </p>
+          {/* Primary && Secondary */}
           <div className="flex flex-row justify-between mt-2 gap-x-5">
             <ColorCard
               theme={theme}
@@ -55,6 +62,7 @@ const ThemeColor = () => {
               setItem={setItem}
             />
           </div>
+          {/* Background && Surface */}
           <div className="flex flex-row justify-between mt-2 gap-x-5">
             <ColorCard
               theme={theme}
@@ -70,6 +78,33 @@ const ThemeColor = () => {
               setItem={setItem}
             />
           </div>
+          {/* Info && Success && Warning && Error */}
+          <div className="flex flex-wrap justify-between mt-2">
+            <ColorCard
+              theme={theme}
+              item="info"
+              text={true}
+              setItem={setItem}
+            />
+            <ColorCard
+              theme={theme}
+              item="success"
+              text={true}
+              setItem={setItem}
+            />
+            <ColorCard
+              theme={theme}
+              item="warning"
+              text={true}
+              setItem={setItem}
+            />
+            <ColorCard
+              theme={theme}
+              item="error"
+              text={true}
+              setItem={setItem}
+            />
+          </div>
         </div>
       </div>
       {item && <Picker item={item} theme={theme} setTheme={setTheme} />}

tailwind.config.js

@@ -25,6 +25,14 @@ module.exports = {
       surface: "var(--theme-surface)",
       surfaceText: "var(--theme-surfaceText)",
       surfaceBorder: "var(--theme-surfaceBorder)",
+      info: "var(--theme-info)",
+      infoMessageText: "var(--theme-infoMessageText)",
+      success: "var(--theme-success)",
+      successMessageText: "var(--theme-successMessageText)",
+      warning: "var(--theme-warning)",
+      warningMessageText: "var(--theme-warningMessageText)",
+      error: "var(--theme-error)",
+      errorMessageText: "var(--theme-errorMessageText)",
     },
   },
   plugins: [