Merge pull request #424 from jackgriffiths/port-color-theming

Add CSS custom property for port color
newcat · Oct 19, 2024 · d75d81a · d75d81a
2 parents 9e2f24e + fad6d88
commit d75d81a
Show file tree

Hide file tree

Showing 5 changed files with 15 additions and 13 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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;