#16 Variables for node color options

MetaCell · Jul 22, 2022 · ffbf87b · ffbf87b
1 parent a4be292
commit ffbf87b
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 8 deletions.
diff --git 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
@@ -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,22 +131,22 @@ 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;
           }
 
           .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;
           }