Merge pull request #423 from GenaDrop/staging

Added color variabls
GenaDrop · Sep 27, 2024 · 03c5981 · 03c5981
2 parents 3812ce2 + 76880c2
commit 03c5981
Show file tree

Hide file tree

Showing 4 changed files with 77 additions and 8 deletions.
diff --git a/apps/Mintbase/widget/Mintbase/App/Store/Cards.jsx b/apps/Mintbase/widget/Mintbase/App/Store/Cards.jsx
@@ -14,7 +14,7 @@ const Root = styled.div`
     text-transform: uppercase;
     font-weight: 400;
     font-size: 16px;
-    color: ${isDarkModeOn ? "#B3B5BD" : "#525c76"};
+    color: var(${isDarkModeOn ? "--gray-300, ##b3b5bd" : "--gray-600, #5b5d6b"}) !important;
   }
   .pagination_container {
     width: 100%;

diff --git a/apps/Mintbase/widget/Mintbase/App/View.jsx b/apps/Mintbase/widget/Mintbase/App/View.jsx
@@ -25,6 +25,40 @@ const { Layout } = VM.require(
 
 const CSS = styled.div`
   background: ${props.isDarkModeOn ? "#101223" : "#f3f5f9"};
+  /* vars */
+    --mb-blackblue: #070c2b;
+    --mb-red: #ff2424;
+    --mb-red-35: #3a1c2a;
+    --mb-red-15: #ffdede;
+    --gray-900: #101223;
+    --gray-850: #1e2030;
+    --gray-800: #282a3a;
+    --gray-700: #404252;
+    --gray-600: #5b5d6b;
+    --gray-500: #777986;
+    --gray-400: #9496a1;
+    --gray-300: #b3b5bd;
+    --gray-200: #d2d4da;
+    --gray-150: #e8eaf0;
+    --gray-100: #f3f4f8;
+    --gray-50: #f9f9f9;
+    --blue-300: #4f58a3;
+    --blue-300-35: #c2c5dd;
+    --blue-300-15: #ebedfb;
+    --blue-100: #c5d0ff;
+    --blue-100-35: #3f4254;
+    --blue-100-15: #2b2e42;
+    --purple-300: #8c4fe5;
+    --purple-100: #e087ff;
+    --orange-300: #ff6c3b;
+    --orange-100: #ff9470;
+    --success-300: #0a7d6c;
+    --success-100: #9fed8f;
+    --warning-300: #f2d413;
+    --warning-100: #ffe855;
+    --error-300: #c74c4c;
+    --error-100: #ed5a5a;
+  /* colour vars end */
   .button {
   }
 

diff --git a/apps/Mintbase/widget/Mintbase/Mini/Index.jsx b/apps/Mintbase/widget/Mintbase/Mini/Index.jsx
@@ -145,10 +145,10 @@ const ContractSection = styled.div`
   justify-content: space-evenly;
   ${getInputLabelFontType("big")}
   a {
-    color: #4f5fa3;
+    color: var(--blue-300,#4f5fa3);
     text-decoration: none;
     svg {
-      color: #4f5fa3;
+      color: var(--blue-300,#4f5fa3);
     }
   }
   svg {
@@ -415,9 +415,43 @@ const PageContent = () => {
 const [count, setCount] = useState(0);
 
 const Card = styled.div`
+/* vars start */
+    --mb-blackblue: #070c2b;
+    --mb-red: #ff2424;
+    --mb-red-35: #3a1c2a;
+    --mb-red-15: #ffdede;
+    --gray-900: #101223;
+    --gray-850: #1e2030;
+    --gray-800: #282a3a;
+    --gray-700: #404252;
+    --gray-600: #5b5d6b;
+    --gray-500: #777986;
+    --gray-400: #9496a1;
+    --gray-300: #b3b5bd;
+    --gray-200: #d2d4da;
+    --gray-150: #e8eaf0;
+    --gray-100: #f3f4f8;
+    --gray-50: #f9f9f9;
+    --blue-300: #4f58a3;
+    --blue-300-35: #c2c5dd;
+    --blue-300-15: #ebedfb;
+    --blue-100: #c5d0ff;
+    --blue-100-35: #3f4254;
+    --blue-100-15: #2b2e42;
+    --purple-300: #8c4fe5;
+    --purple-100: #e087ff;
+    --orange-300: #ff6c3b;
+    --orange-100: #ff9470;
+    --success-300: #0a7d6c;
+    --success-100: #9fed8f;
+    --warning-300: #f2d413;
+    --warning-100: #ffe855;
+    --error-300: #c74c4c;
+    --error-100: #ed5a5a;
+    /* vars end */
   width: 100%;
   border-radius: 0;
-  background-color: #f9fafb;
+  background-color: var(--gray-50, #f9f9f9);
   color: black;
   margin: 0;
   padding: 12px 0;
@@ -434,7 +468,7 @@ const Card = styled.div`
     padding: 0;
   }
   &.dark {
-    background-color: var(--bg-gray-900, #101223);
+    background-color: var(--gray-900, #101223);
     color: white;
   }
   .content_main {
@@ -501,12 +535,12 @@ const Index = ({}) => (
         className="top-desc"
         style={{ background: isDarkModeOn ? "#1e2030" : "#fff" }}
       >
-        <h4 className="text-center">
+        <h6 className="text-center">
           {context.accountId
             ? `Hi ${accountId} 🙂, I'm Mintbos
             Mini!`
             : "Hi! Please Sign In"}
-        </h4>
+        </h6>
         <p className="text-center">
           {!context.accountId &&
             `We are currently using ${accountId} to show the demo.`}

diff --git a/package.json b/package.json
@@ -27,5 +27,6 @@
       ],
       "extensions": "js,jsx"
     }
-  }
+  },
+  "packageManager": "[email protected]+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -27,5 +27,6 @@ @@
           ],
           "extensions": "js,jsx"
         }
-      }
+      },
+      "packageManager": "[email protected]+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
     }