From 5c8e92a2c204262ad6535a35ea24b56d57efb18a Mon Sep 17 00:00:00 2001
From: Niklas Kiefer <niklas.kiefer@camunda.com>
Date: Tue, 13 Jun 2023 11:33:18 +0200
Subject: [PATCH] style: improve fx toggle size and colors

Closes #249
---
 assets/properties-panel.css | 17 +++++++++++------
 1 file changed, 11 insertions(+), 6 deletions(-)

diff --git a/assets/properties-panel.css b/assets/properties-panel.css
index 2ae1be73..d02b6d1f 100644
--- a/assets/properties-panel.css
+++ b/assets/properties-panel.css
@@ -99,11 +99,13 @@
   --dropdown-item-hover-background-color: var(--color-grey-225-10-95);
   --dropdown-separator-background-color: var(--color-grey-225-10-75);
 
-  --feel-background-color: var(--color-grey-225-10-95);
+  --feel-background-color: transparent;
   --feel-active-color: var(--color-blue-205-100-45);
   --feel-inactive-color: var(--color-grey-225-10-35);
-  --feel-hover-background-color: var(--color-grey-225-10-90);
-  --feel-active-background-color: var(--color-grey-225-10-95);
+  --feel-hover-color: var(--color-grey-225-10-15);
+  --feel-hover-background-color: var(--color-grey-225-10-97);
+  --feel-active-background-color: transparent;
+  --feel-required-color: var(--color-grey-225-10-55);
 
   --feel-indicator-background-color: var(--color-grey-225-10-90);
 
@@ -990,7 +992,7 @@ textarea.bio-properties-panel-input {
 
 .bio-properties-panel-feel-icon {
   display: inline-flex;
-  height: 22px;
+  height: 18px;
   width: 22px;
   vertical-align: text-bottom;
   padding: 0;
@@ -1005,7 +1007,6 @@ textarea.bio-properties-panel-input {
 
 .bio-properties-panel-feel-icon.optional {
   cursor: pointer;
-
   background: var(--feel-background-color);
 }
 
@@ -1017,6 +1018,10 @@ textarea.bio-properties-panel-input {
   background: var(--feel-hover-background-color);
 }
 
+.bio-properties-panel-feel-icon:hover svg * {
+  fill: var(--feel-hover-color);
+}
+
 .bio-properties-panel-feel-icon.active {
   background: var(--feel-active-background-color);
 }
@@ -1034,7 +1039,7 @@ textarea.bio-properties-panel-input {
 }
 
 .bio-properties-panel-feel-icon.required.active svg * {
-  fill: var(--feel-inactive-color);
+  fill: var(--feel-required-color);
 }
 
 .bio-properties-panel-feel-editor-container {