From 2548bec65172e380b082222ddb8b3358f6cef431 Mon Sep 17 00:00:00 2001
From: Xaviju <xavier.julian@kaleidos.net>
Date: Mon, 13 Oct 2025 14:20:14 +0200
Subject: [PATCH] :bug: Fix visual glitch in background for swatch component
 (#7468)

---
 .../src/app/main/ui/ds/utilities/swatch.cljs  |  2 +-
 .../src/app/main/ui/ds/utilities/swatch.scss  | 24 +++++++++++++++----
 2 files changed, 21 insertions(+), 5 deletions(-)

diff --git a/frontend/src/app/main/ui/ds/utilities/swatch.cljs b/frontend/src/app/main/ui/ds/utilities/swatch.cljs
index 8eda95fd3a..1021c086c6 100644
--- a/frontend/src/app/main/ui/ds/utilities/swatch.cljs
+++ b/frontend/src/app/main/ui/ds/utilities/swatch.cljs
@@ -139,4 +139,4 @@
          [:span {:class (stl/css :swatch-solid-side)
                  :style {:background (uc/color->background (assoc background :opacity 1))}}]
          [:span {:class (stl/css :swatch-opacity-side)
-                 :style {:background (uc/color->background background)}}]])]]))
+                 :style {"--solid-color-overlay" (str (uc/color->background background))}}]])]]))
diff --git a/frontend/src/app/main/ui/ds/utilities/swatch.scss b/frontend/src/app/main/ui/ds/utilities/swatch.scss
index 37ffe33e4e..41ad55da54 100644
--- a/frontend/src/app/main/ui/ds/utilities/swatch.scss
+++ b/frontend/src/app/main/ui/ds/utilities/swatch.scss
@@ -8,8 +8,14 @@
 @use "ds/_sizes.scss" as *;
 @use "ds/colors.scss" as *;
 
+@property --solid-color-overlay {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: rgba(0, 0, 0, 0);
+}
+
 .swatch {
-  --border-color: var(--color-accent-primary-muted);
+  --border-color: var(--color-background-quaternary);
   --border-radius: #{$br-4};
   --border-color-active: var(--color-foreground-primary);
   --border-color-active-inset: var(--color-background-primary);
@@ -73,7 +79,8 @@
   background: none;
 
   &:hover {
-    border: 2px solid var(--border-color);
+    --border-color: var(--color-accent-primary-muted);
+    border-width: $b-2;
   }
 }
 
@@ -98,11 +105,20 @@
 }
 
 .swatch-opacity {
-  background: var(--checkerboard-background);
-  background-size: var(--checkerboard-size);
   display: flex;
 }
 
+.swatch-opacity-side {
+  background-image:
+  /* solid‑colour overlay */
+  /* checkerboard pattern */
+    linear-gradient(var(--solid-color-overlay), var(--solid-color-overlay)), var(--checkerboard-background);
+
+  background-size: cover, var(--checkerboard-size);
+  background-position: center, center;
+  background-repeat: no-repeat, repeat;
+}
+
 .swatch-solid-side,
 .swatch-opacity-side {
   flex: 1;