From 05e0515128a5ffd7c1a4935ed5218d6db9c57aec Mon Sep 17 00:00:00 2001
From: Nikki Ysendoorn <nikki.ysendoorn@maykinmedia.nl>
Date: Mon, 4 Mar 2024 11:45:07 +0100
Subject: [PATCH] :lipstick: [#3958] remove styling from builder and add for
 dark theme

---
 src/openforms/scss/admin/themes/_dark.scss          | 4 ++++
 src/openforms/scss/admin/themes/_light.scss         | 1 +
 src/openforms/scss/components/builder/_builder.scss | 6 ------
 3 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/src/openforms/scss/admin/themes/_dark.scss b/src/openforms/scss/admin/themes/_dark.scss
index 564e33ea50..a7af98dbae 100644
--- a/src/openforms/scss/admin/themes/_dark.scss
+++ b/src/openforms/scss/admin/themes/_dark.scss
@@ -29,6 +29,7 @@
   --default-button-hover-bg: #888;
 
   --form-input-bg: #232222;
+  --form-input-bg-readonly: #1a1818;
   --react-tab-border-color: var(--hairline-color);
   --list-item-active-bg: #333;
   --list-item-active-fg: #2fc0ec;
@@ -65,6 +66,9 @@
   select,
   .vTextField {
     background-color: var(--form-input-bg);
+    &:read-only {
+      background-color: var(--form-input-bg-readonly);
+    }
   }
 
   input[type='checkbox'],
diff --git a/src/openforms/scss/admin/themes/_light.scss b/src/openforms/scss/admin/themes/_light.scss
index 3345219f3e..99d4dee29c 100644
--- a/src/openforms/scss/admin/themes/_light.scss
+++ b/src/openforms/scss/admin/themes/_light.scss
@@ -49,6 +49,7 @@
 
   // custom variables
   --form-input-bg: var(--body-bg);
+  --form-input-bg-readonly: #e9ecef;
   --react-tab-border-color: #ddd;
   --list-item-active-bg: #f3f3f3;
   --list-item-active-fg: var(--primary);
diff --git a/src/openforms/scss/components/builder/_builder.scss b/src/openforms/scss/components/builder/_builder.scss
index 3ba88639f1..2c9583f570 100644
--- a/src/openforms/scss/components/builder/_builder.scss
+++ b/src/openforms/scss/components/builder/_builder.scss
@@ -201,12 +201,6 @@ div.flatpickr-calendar.open {
     border-color: var(--body-quiet-color);
     color: var(--body-fg);
   }
-
-  &:read-only {
-    background-color: var(--form-input-bg);
-    border-color: var(--border-color);
-    color: var(--body-fg);
-  }
 }
 
 .table {