From ad9e68e48774eb7dfb24afdd5fc305b58d14a9d0 Mon Sep 17 00:00:00 2001
From: Sibiraj <20282546+sibiraj-s@users.noreply.github.com>
Date: Mon, 13 May 2024 16:06:29 +0530
Subject: [PATCH] fix: use css variables for bubble menu

---
 .../ngx-editor/src/lib/editor.component.scss  |  5 +++++
 .../modules/menu/bubble/bubble.component.scss | 20 +++++++++----------
 2 files changed, 15 insertions(+), 10 deletions(-)

diff --git a/projects/ngx-editor/src/lib/editor.component.scss b/projects/ngx-editor/src/lib/editor.component.scss
index 6746777a..76bf0682 100644
--- a/projects/ngx-editor/src/lib/editor.component.scss
+++ b/projects/ngx-editor/src/lib/editor.component.scss
@@ -11,6 +11,11 @@
   --ngx-editor-menu-item-active-bg-color: #e8f0fe;
   --ngx-editor-seperator-color: #ccc;
 
+  --ngx-editor-bubble-bg-color: #000;
+  --ngx-editor-bubble-text-color: #fff;
+  --ngx-editor-bubble-item-hover-color: #636262;
+  --ngx-editor-bubble-seperator-color: #fff;
+
   --ngx-editor-focus-ring-color: #5e9ed6;
 }
 
diff --git a/projects/ngx-editor/src/lib/modules/menu/bubble/bubble.component.scss b/projects/ngx-editor/src/lib/modules/menu/bubble/bubble.component.scss
index 5fa86eb8..97a919b6 100644
--- a/projects/ngx-editor/src/lib/modules/menu/bubble/bubble.component.scss
+++ b/projects/ngx-editor/src/lib/modules/menu/bubble/bubble.component.scss
@@ -7,8 +7,8 @@
 :host {
   display: flex;
   flex-wrap: wrap;
-  background-color: #000;
-  color: white;
+  background-color: var(--ngx-editor-bubble-bg-color);
+  color: var(--ngx-editor-bubble-text-color);
   padding: 5px;
   border-radius: 4px;
 }
@@ -16,17 +16,17 @@
 .NgxBubbleMenu__Icon {
   all: unset;
   appearance: none;
-  height: 30px;
-  width: 30px;
-  transition: 0.3s ease-in-out;
-  border-radius: 2px;
+  height: var(--ngx-editor-icon-size);
+  width: var(--ngx-editor-icon-size);
+  transition: 0.2s ease-in-out;
+  border-radius: var(--ngx-editor-menu-item-border-radius);
   display: flex;
   align-items: center;
   justify-content: center;
   color: white;
 
   &:hover {
-    background-color: #636262;
+    background-color: var(--ngx-editor-bubble-item-hover-color);
   }
 
   + .NgxBubbleMenu__Icon {
@@ -34,12 +34,12 @@
   }
 
   &.NgxBubbleMenu__Icon--Active {
-    background-color: white;
-    color: black;
+    background-color: var(--ngx-editor-bubble-text-color);
+    color: var(--ngx-editor-bubble-bg-color);
   }
 }
 
 .NgxBubbleMenu__Seperator {
-  border-left: 1px solid white;
+  border-left: 1px solid var(--ngx-editor-seperator-color);
   margin: 0 5px;
 }