From fad6d882f31a3db4959d1404552c2871fd1ff214 Mon Sep 17 00:00:00 2001
From: Jack Griffiths <jack.griffiths@outlook.com>
Date: Sat, 31 Aug 2024 16:30:02 +0100
Subject: [PATCH] Add CSS custom property for port color

---
 docs/nodes/interface-types.md                        | 12 ++++++------
 packages/renderer-vue/playground/interfaceTypes.css  | 12 ++++++------
 .../src/classic/components/node-interface.scss       |  2 +-
 packages/themes/src/classic/variables.scss           |  1 +
 packages/themes/src/syrup-dark/variables.scss        |  1 +
 5 files changed, 15 insertions(+), 13 deletions(-)

diff --git a/docs/nodes/interface-types.md b/docs/nodes/interface-types.md
index f7bfd4da..204faeab 100644
--- a/docs/nodes/interface-types.md
+++ b/docs/nodes/interface-types.md
@@ -114,16 +114,16 @@ This attribute can be used to style the interfaces using CSS.
 Here is an example of how to set the color of the ports depending on the interface type:
 
 ```css
-.baklava-node-interface[data-interface-type="string"] .__port {
-    background-color: green;
+.baklava-node-interface[data-interface-type="string"] {
+    --baklava-node-interface-port-color: green;
 }
 
-.baklava-node-interface[data-interface-type="number"] .__port {
-    background-color: red;
+.baklava-node-interface[data-interface-type="number"] {
+    --baklava-node-interface-port-color: red;
 }
 
-.baklava-node-interface[data-interface-type="boolean"] .__port {
-    background-color: purple;
+.baklava-node-interface[data-interface-type="boolean"] {
+    --baklava-node-interface-port-color: purple;
 }
 ```
 
diff --git a/packages/renderer-vue/playground/interfaceTypes.css b/packages/renderer-vue/playground/interfaceTypes.css
index c7ef5bea..0697d024 100644
--- a/packages/renderer-vue/playground/interfaceTypes.css
+++ b/packages/renderer-vue/playground/interfaceTypes.css
@@ -1,11 +1,11 @@
-.baklava-node-interface[data-interface-type="string"] .__port {
-    background-color: green;
+.baklava-node-interface[data-interface-type="string"] {
+    --baklava-node-interface-port-color: green;
 }
 
-.baklava-node-interface[data-interface-type="number"] .__port {
-    background-color: red;
+.baklava-node-interface[data-interface-type="number"] {
+    --baklava-node-interface-port-color: red;
 }
 
-.baklava-node-interface[data-interface-type="boolean"] .__port {
-    background-color: purple;
+.baklava-node-interface[data-interface-type="boolean"] {
+    --baklava-node-interface-port-color: purple;
 }
diff --git a/packages/themes/src/classic/components/node-interface.scss b/packages/themes/src/classic/components/node-interface.scss
index 7ba5d82e..1e0dc549 100644
--- a/packages/themes/src/classic/components/node-interface.scss
+++ b/packages/themes/src/classic/components/node-interface.scss
@@ -6,7 +6,7 @@
         position: absolute;
         width: 10px;
         height: 10px;
-        background: white;
+        background: var(--baklava-node-interface-port-color);
         border-radius: 50%;
         top: calc(50% - 5px);
         cursor: crosshair;
diff --git a/packages/themes/src/classic/variables.scss b/packages/themes/src/classic/variables.scss
index 9bfb8806..2b72b98f 100644
--- a/packages/themes/src/classic/variables.scss
+++ b/packages/themes/src/classic/variables.scss
@@ -23,6 +23,7 @@
     --baklava-node-title-color-foreground: white;
     --baklava-group-node-title-color-background: rgb(5, 75, 5);
     --baklava-group-node-title-color-foreground: white;
+    --baklava-node-interface-port-color: white;
     --baklava-node-interface-port-tooltip-color-foreground: var(--baklava-control-color-primary);
     --baklava-node-interface-port-tooltip-color-background: var(--baklava-editor-background-pattern-black);
     --baklava-node-border-radius: 4px;
diff --git a/packages/themes/src/syrup-dark/variables.scss b/packages/themes/src/syrup-dark/variables.scss
index f0f38511..68c288c1 100644
--- a/packages/themes/src/syrup-dark/variables.scss
+++ b/packages/themes/src/syrup-dark/variables.scss
@@ -23,6 +23,7 @@
     --baklava-node-title-color-foreground: white;
     --baklava-group-node-title-color-background: #215636;
     --baklava-group-node-title-color-foreground: white;
+    --baklava-node-interface-port-color: white;
     --baklava-node-interface-port-tooltip-color-foreground: var(--baklava-control-color-primary);
     --baklava-node-interface-port-tooltip-color-background: var(--baklava-editor-background-pattern-black);
     --baklava-node-border-radius: 6px;