#16 Keep the node base styles and a default calue of color in meta theme

MetaCell · Jul 29, 2022 · d1791e8 · d1791e8
1 parent 5fc0394
commit d1791e8
Show file tree

Hide file tree

Showing 5 changed files with 42 additions and 11 deletions.
diff --git a/src/components/assets/styles/variables.ts b/src/components/assets/styles/variables.ts
@@ -1,3 +1,11 @@
+const nodeGreen = {
+  nodeGreenBackgroundColor: '#D4F4D4',
+  nodeGreenTextColor: '#669D66',
+  nodeGreenBorderColor: 'rgba(102, 157, 102, 0.2)',
+  nodeGreenBoxShadow: '0 0.25rem 0.625rem -0.25rem rgba(102, 157, 102, 0.3)',
+};
+
+
 const vars = {
   fontFamily: 'Inter, sans-serif',
   primaryBg: '#f1f1f1',
@@ -44,6 +52,8 @@ const vars = {
   nodePointerBg: '#fff',
   nodeButtonTextColor: 'rgba(255, 255, 255, 0.8)',
   nodeButtonLineColor: 'rgba(255, 255, 255, 0.2)',
+  nodeTextColor: '#3C3C43',
+  ...nodeGreen,
 };
 
 export default vars;
diff --git a/src/components/assets/svg/MI.png b/src/components/assets/svg/MI.png
diff --git a/src/components/assets/svg/mechanism-green.svg b/src/components/assets/svg/mechanism-green.svg
diff --git a/src/components/assets/svg/mechanism-icon.svg b/src/components/assets/svg/mechanism-icon.svg
diff --git a/src/theme.ts b/src/theme.ts
@@ -1,4 +1,5 @@
 import vars from './components/assets/styles/variables';
+import MI from "./components/assets/svg/mechanism-yellow.svg";
 
 type ThemeVars = {
   [key: string]: any;
@@ -23,6 +24,11 @@ const applicationTheme = (params: ThemeVars) => {
     nodePointerBg,
     nodeButtonTextColor,
     nodeButtonLineColor,
+    nodeGreenBackgroundColor,
+    nodeGreenTextColor,
+    nodeGreenBorderColor,
+    nodeGreenBoxShadow,
+    nodeTextColor,
   } = params;
   return {
     components: {
@@ -64,24 +70,39 @@ const applicationTheme = (params: ThemeVars) => {
             background-color: ${canvasBg};
           }
 
-          .node {
-            border: solid 0.0625rem;
+          .primary-node {
+            border: solid 0.0625rem ${nodeGreenBorderColor};
             border-radius: 50%;
+            box-shadow: ${nodeGreenBoxShadow};
+            background: ${nodeGreenBackgroundColor};
+            position: relative;
             width: 10rem;
             height: 10rem;
+          }
+
+          .primary-node .primary-node_header {
             display: flex;
             align-items: center;
             justify-content: center;
+            height: 100%;
             flex-direction: column;
-            position: relative;
           }
 
-          .node img {
+          .primary-node img {
             margin-bottom: 0.25rem
           }
 
-          .node p {
+          .primary-node .primary-node_header p {
+            color: ${nodeGreenTextColor};
+          }
+
+          .primary-node .primary-node_header img {
+            background: "url(data:image/svg+xml;base64,${new Buffer(MI).toString('base64')})";
+          }
+
+          .primary-node p {
             font-weight: 500;
+            color: ${nodeTextColor};
             font-size: 0.8125rem;
             line-height: 1.25rem;
             letter-spacing: -0.005rem;
@@ -134,6 +155,11 @@ const applicationTheme = (params: ThemeVars) => {
             background-color: ${nodeButtonLineColor};
           }
 
+          .primary-node .node-button .icon {
+            background: ${nodeGreenBackgroundColor};
+            border-color: ${nodeGreenBorderColor}
+          }
+
           .nodes {
             width: 10rem;
             height: 10rem;
@@ -150,6 +176,7 @@ const applicationTheme = (params: ThemeVars) => {
             border-radius: 0.125rem;
             position: absolute;
           }
+
         `,
       },
       MuiList: {