From ffbf87bb1eab4f266edf9c42563314bf8fa86d1b Mon Sep 17 00:00:00 2001
From: vidhya-metacell <vidhya@metacell.us>
Date: Fri, 22 Jul 2022 19:14:55 +0200
Subject: [PATCH] #16 Variables for node color options

---
 src/components/assets/styles/variables.ts |  6 ++++++
 src/theme.ts                              | 22 ++++++++++++++--------
 2 files changed, 20 insertions(+), 8 deletions(-)

diff --git a/src/components/assets/styles/variables.ts b/src/components/assets/styles/variables.ts
index 954a793..a6cea25 100644
--- a/src/components/assets/styles/variables.ts
+++ b/src/components/assets/styles/variables.ts
@@ -38,6 +38,12 @@ const vars = {
   sidebarBg: '#ffffff',
   sidebarShadow: `0 0 3.75rem rgba(0, 0, 0, 0.1),
   0 0.5rem 2.5rem -0.625rem rgba(0, 0, 0, 0.1)`,
+  canvasBg: '#fff',
+  showPropertiesButtonBg: '#161A1E',
+  nodeBorderColor: '#18A0FB',
+  nodePointerBg: '#fff',
+  nodeButtonTextColor: 'rgba(255, 255, 255, 0.8)',
+  nodeButtonLineColor: 'rgba(255, 255, 255, 0.2)'
 };
 
 export default vars;
diff --git a/src/theme.ts b/src/theme.ts
index 3a4fcd9..7c5da22 100644
--- a/src/theme.ts
+++ b/src/theme.ts
@@ -17,6 +17,12 @@ const applicationTheme = (params: ThemeVars) => {
     listBorderColor,
     sidebarBg,
     sidebarShadow,
+    canvasBg,
+    showPropertiesButtonBg,
+    nodeBorderColor,
+    nodePointerBg,
+    nodeButtonTextColor,
+    nodeButtonLineColor,
   } = params;
   return {
     components: {
@@ -55,7 +61,7 @@ const applicationTheme = (params: ThemeVars) => {
           .canvas-widget {
             height: 100%;
             width: 100%;
-            background-color: #fff;
+            background-color: ${canvasBg};
           }
 
           .node {
@@ -83,14 +89,14 @@ const applicationTheme = (params: ThemeVars) => {
           }
 
           .node-button.MuiButton-root {
-            background-color: #161A1E;
+            background-color: ${showPropertiesButtonBg};
             border-radius: 1.125rem;
             font-weight: 600;
             font-size: 0.8125rem;
             display: flex;
             line-height: 1rem;
             letter-spacing: -0.025625rem;
-            color: rgba(255, 255, 255, 0.8);
+            color: ${nodeButtonTextColor};
             margin: 0 !important;
             width: 9.625rem;
             padding: 0;
@@ -104,7 +110,7 @@ const applicationTheme = (params: ThemeVars) => {
           }
 
           .node-button.MuiButton-root:hover {
-            background-color: #161A1E;
+            background-color: ${showPropertiesButtonBg};
           }
 
           .node-button .icon {
@@ -125,13 +131,13 @@ const applicationTheme = (params: ThemeVars) => {
             right: -0.625rem;
             top: 50%;
             transform: translateY(-50%);
-            background-color: rgba(255, 255, 255, 0.2);
+            background-color: ${nodeButtonLineColor};
           }
 
           .nodes {
             width: 10rem;
             height: 10rem;
-            border: 0.09375rem solid #18A0FB;
+            border: 0.09375rem solid ${nodeBorderColor};
             z-index: 99999;
             position: absolute;
           }
@@ -139,8 +145,8 @@ const applicationTheme = (params: ThemeVars) => {
           .node .pointer {
             width: 0.625rem;
             height: 0.625rem;
-            background: #FFFFFF;
-            border: 0.09375rem solid #18A0FB;
+            background: ${nodePointerBg};
+            border: 0.09375rem solid ${nodeBorderColor};
             border-radius: 0.125rem;
             position: absolute;
           }