From 6bb9c5360d7831c8f9e2a34b45877e88bd4758fe Mon Sep 17 00:00:00 2001
From: peterkogo <peter@xyflow.com>
Date: Thu, 18 Jan 2024 13:14:44 +0100
Subject: [PATCH] Cleaned up edge label styles and added default edge label
 background in svelte flow

---
 packages/react/src/styles/base.css   | 18 ------------------
 packages/react/src/styles/style.css  | 14 ++------------
 packages/svelte/src/styles/base.css  |  9 ---------
 packages/svelte/src/styles/style.css | 12 +++---------
 packages/system/src/styles/style.css |  6 ++++++
 5 files changed, 11 insertions(+), 48 deletions(-)

diff --git a/packages/react/src/styles/base.css b/packages/react/src/styles/base.css
index 4a7281dc..d6be5b10 100644
--- a/packages/react/src/styles/base.css
+++ b/packages/react/src/styles/base.css
@@ -1,21 +1,3 @@
 /* this will be exported as base.css and can be used for a basic styling */
 @import '../../../system/src/styles/init.css';
 @import '../../../system/src/styles/base.css';
-
-.react-flow {
-  --edge-label-background-color-default: #ffffff;
-  --edge-label-color-default: inherit;
-}
-
-.react-flow.dark {
-  --edge-label-background-color-default: #141414;
-  --edge-label-color-default: #f8f8f8;
-}
-
-.react-flow__edge-textbg {
-  fill: var(--edge-label-background-color, var(--edge-label-background-color-default));
-}
-
-.react-flow__edge-text {
-  fill: var(--edge-label-color, var(--edge-label-color-default));
-}
diff --git a/packages/react/src/styles/style.css b/packages/react/src/styles/style.css
index 2ff7f6c1..71b4d08c 100644
--- a/packages/react/src/styles/style.css
+++ b/packages/react/src/styles/style.css
@@ -3,20 +3,10 @@
 @import '../../../system/src/styles/style.css';
 @import '../../../system/src/styles/node-resizer.css';
 
-.react-flow {
-  --edge-label-background-color-default: #ffffff;
-  --edge-label-color-default: inherit;
-}
-
-.react-flow.dark {
-  --edge-label-background-color-default: #141414;
-  --edge-label-color-default: #f8f8f8;
-}
-
 .react-flow__edge-textbg {
-  fill: var(--edge-label-background-color, var(--edge-label-background-color-default));
+  fill: var(--xy-edge-label-background-color, var(--xy-edge-label-background-color-default));
 }
 
 .react-flow__edge-text {
-  fill: var(--edge-label-color, var(--edge-label-color-default));
+  fill: var(--xy-edge-label-color, var(--xy-edge-label-color-default));
 }
diff --git a/packages/svelte/src/styles/base.css b/packages/svelte/src/styles/base.css
index b9861c98..80bc953d 100644
--- a/packages/svelte/src/styles/base.css
+++ b/packages/svelte/src/styles/base.css
@@ -2,16 +2,7 @@
 @import '../../../system/src/styles/init.css';
 @import '../../../system/src/styles/base.css';
 
-.svelte-flow {
-  --edge-label-color-default: inherit;
-}
-
-.svelte-flow.dark {
-  --edge-label-color-default: #f8f8f8;
-}
-
 .svelte-flow__edge-label {
   text-align: center;
   position: absolute;
-  color: var(--edge-label-color, var(--edge-label-color-default));
 }
diff --git a/packages/svelte/src/styles/style.css b/packages/svelte/src/styles/style.css
index 308a6a1e..e607d0f8 100644
--- a/packages/svelte/src/styles/style.css
+++ b/packages/svelte/src/styles/style.css
@@ -3,19 +3,13 @@
 @import '../../../system/src/styles/style.css';
 @import '../../../system/src/styles/node-resizer.css';
 
-.svelte-flow {
-  --edge-label-color-default: inherit;
-}
-
-.svelte-flow.dark {
-  --edge-label-color-default: #f8f8f8;
-}
-
 .svelte-flow__edge-label {
   text-align: center;
   position: absolute;
+  padding: 2px;
   font-size: 10px;
-  color: var(--edge-label-color, var(--edge-label-color-default));
+  color: var(--xy-edge-label-color, var(--xy-edge-label-color-default));
+  background: var(--xy-edge-label-background-color, var(--xy-edge-label-background-color-default));
 }
 
 .svelte-flow__nodes {
diff --git a/packages/system/src/styles/style.css b/packages/system/src/styles/style.css
index 880ebaf7..cb6f2b7c 100644
--- a/packages/system/src/styles/style.css
+++ b/packages/system/src/styles/style.css
@@ -19,6 +19,9 @@
   --xy-controls-button-color-hover-default: inherit;
   --xy-controls-button-border-color-default: #eee;
   --xy-controls-box-shadow-default: 0 0 2px 1px rgba(0, 0, 0, 0.08);
+
+  --xy-edge-label-background-color-default: #ffffff;
+  --xy-edge-label-color-default: inherit;
 }
 
 .xy-flow.dark {
@@ -41,6 +44,9 @@
   --xy-controls-button-color-hover-default: #fff;
   --xy-controls-button-border-color-default: #5b5b5b;
   --xy-controls-box-shadow-default: 0 0 2px 1px rgba(0, 0, 0, 0.08);
+
+  --xy-edge-label-background-color-default: #141414;
+  --xy-edge-label-color-default: #f8f8f8;
 }
 
 .xy-flow__edge {