💄 Improve multiple choice color when image background

apps/builder/src/features/theme/components/general/BackgroundContent.tsx

@@ -53,6 +53,8 @@ export const BackgroundContent = ({
                 _hover={{ filter: 'brightness(.9)' }}
                 transition="filter 200ms"
                 rounded="md"
+                maxH="200px"
+                objectFit="cover"
               />
             ) : (
               <Button>Select an image</Button>

packages/embeds/js/src/assets/index.css

@@ -27,6 +27,8 @@
   --typebot-header-bg-color: #ffffff;
   --typebot-header-color: #303235;
 
+  --selectable-base-alpha: 0;
+
   --typebot-border-radius: 6px;
 
   /* Phone input */
@@ -148,21 +150,41 @@ textarea {
 }
 
 .typebot-selectable {
-  border: 1px solid rgba(var(--typebot-button-bg-color-rgb), 0.25);
+  border: 1px solid
+    rgba(
+      var(--typebot-button-bg-color-rgb),
+      calc(var(--selectable-base-alpha) + 0.25)
+    );
   border-radius: var(--typebot-border-radius);
   color: var(--typebot-container-color);
-  background-color: rgba(var(--typebot-button-bg-color-rgb), 0.08);
+  background-color: rgba(
+    var(--typebot-button-bg-color-rgb),
+    calc(var(--selectable-base-alpha) + 0.08)
+  );
   transition: all 0.3s ease;
+  backdrop-filter: blur(2px);
 }
 
 .typebot-selectable:hover {
-  background-color: rgba(var(--typebot-button-bg-color-rgb), 0.12);
-  border-color: rgba(var(--typebot-button-bg-color-rgb), 0.3);
+  background-color: rgba(
+    var(--typebot-button-bg-color-rgb),
+    calc(var(--selectable-base-alpha) + 0.12)
+  );
+  border-color: rgba(
+    var(--typebot-button-bg-color-rgb),
+    calc(var(--selectable-base-alpha) + 0.3)
+  );
 }
 
 .typebot-selectable.selected {
-  background-color: rgba(var(--typebot-button-bg-color-rgb), 0.18);
-  border-color: rgba(var(--typebot-button-bg-color-rgb), 0.35);
+  background-color: rgba(
+    var(--typebot-button-bg-color-rgb),
+    calc(var(--selectable-base-alpha) + 0.18)
+  );
+  border-color: rgba(
+    var(--typebot-button-bg-color-rgb),
+    calc(var(--selectable-base-alpha) + 0.35)
+  );
 }
 
 .typebot-checkbox {
@@ -324,22 +346,41 @@ textarea {
 }
 
 .typebot-selectable-picture {
-  border: 1px solid rgba(var(--typebot-button-bg-color-rgb), 0.25);
+  border: 1px solid
+    rgba(
+      var(--typebot-button-bg-color-rgb),
+      calc(var(--selectable-base-alpha) + 0.25)
+    );
   border-radius: var(--typebot-border-radius);
   color: var(--typebot-container-color);
-  background-color: rgba(var(--typebot-button-bg-color-rgb), 0.08);
+  background-color: rgba(
+    var(--typebot-button-bg-color-rgb),
+    calc(var(--selectable-base-alpha) + 0.08)
+  );
   transition: all 0.3s ease;
   width: 236px;
 }
 
 .typebot-selectable-picture:hover {
-  background-color: rgba(var(--typebot-button-bg-color-rgb), 0.12);
-  border-color: rgba(var(--typebot-button-bg-color-rgb), 0.3);
+  background-color: rgba(
+    var(--typebot-button-bg-color-rgb),
+    calc(var(--selectable-base-alpha) + 0.12)
+  );
+  border-color: rgba(
+    var(--typebot-button-bg-color-rgb),
+    calc(var(--selectable-base-alpha) + 0.3)
+  );
 }
 
 .typebot-selectable-picture.selected {
-  background-color: rgba(var(--typebot-button-bg-color-rgb), 0.18);
-  border-color: rgba(var(--typebot-button-bg-color-rgb), 0.35);
+  background-color: rgba(
+    var(--typebot-button-bg-color-rgb),
+    calc(var(--selectable-base-alpha) + 0.18)
+  );
+  border-color: rgba(
+    var(--typebot-button-bg-color-rgb),
+    calc(var(--selectable-base-alpha) + 0.35)
+  );
 }
 
 select option {

packages/embeds/js/src/utils/setCssVariablesValue.ts

@@ -39,6 +39,7 @@ const cssVariableNames = {
     checkbox: {
       bgColor: '--typebot-checkbox-bg-color',
       color: '--typebot-checkbox-color',
+      baseAlpha: '--selectable-base-alpha',
     },
   },
 } as const
@@ -156,18 +157,30 @@ const setTypebotBackground = (
       : cssVariableNames.general.bgColor,
     parseBackgroundValue(background)
   )
-  const backgroundColor =
-    (BackgroundType.COLOR && isNotEmpty(background.content)
-      ? background.content
-      : '#ffffff') ?? '#ffffff'
   documentStyle.setProperty(
     cssVariableNames.chat.checkbox.bgColor,
-    (BackgroundType.COLOR ? background.content : '#ffffff') ?? '#ffffff'
+    background?.type === BackgroundType.IMAGE
+      ? 'rgba(255, 255, 255, 0.75)'
+      : (background?.type === BackgroundType.COLOR
+          ? background.content
+          : '#ffffff') ?? '#ffffff'
   )
+  const backgroundColor =
+    background.type === BackgroundType.IMAGE
+      ? '#000000'
+      : background?.type === BackgroundType.COLOR &&
+        isNotEmpty(background.content)
+      ? background.content
+      : '#ffffff'
   documentStyle.setProperty(
     cssVariableNames.general.color,
     isLight(backgroundColor) ? '#303235' : '#ffffff'
   )
+  if (background.type === BackgroundType.IMAGE) {
+    documentStyle.setProperty(cssVariableNames.chat.checkbox.baseAlpha, '0.40')
+  } else {
+    documentStyle.setProperty(cssVariableNames.chat.checkbox.baseAlpha, '0')
+  }
 }
 
 const parseBackgroundValue = ({ type, content }: Background) => {