💄 (buttons) Improve multiple choice form UI

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

@@ -0,0 +1,20 @@
+export const hexToRgb = (hex: string): [r: number, g: number, b: number] => {
+  const shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i
+  hex = hex.replace(shorthandRegex, (_m, r, g, b) => {
+    return r + r + g + g + b + b
+  })
+
+  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)
+  return result
+    ? [
+        parseInt(result[1], 16),
+        parseInt(result[2], 16),
+        parseInt(result[3], 16),
+      ]
+    : [0, 0, 0]
+}
+
+export const isLight = (hexColor: string) =>
+  (([r, g, b]) => (r * 299 + g * 587 + b * 114) / 1000 > 155)(
+    hexToRgb(hexColor)
+  )

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

@@ -7,12 +7,15 @@ import {
   Theme,
 } from '@typebot.io/schemas'
 import { BackgroundType } from '@typebot.io/schemas/features/typebot/theme/enums'
+import { hexToRgb } from './hexToRgb'
+import { isLight } from './hexToRgb'
 
 const cssVariableNames = {
   general: {
     bgImage: '--typebot-container-bg-image',
     bgColor: '--typebot-container-bg-color',
     fontFamily: '--typebot-container-font-family',
+    color: '--typebot-container-color',
   },
   chat: {
     hostBubbles: {
@@ -30,10 +33,14 @@ const cssVariableNames = {
     },
     buttons: {
       bgColor: '--typebot-button-bg-color',
+      bgColorRgb: '--typebot-button-bg-color-rgb',
       color: '--typebot-button-color',
     },
+    checkbox: {
+      bgColor: '--typebot-checkbox-bg-color',
+    },
   },
-}
+} as const
 
 export const setCssVariablesValue = (
   theme: Theme | undefined,
@@ -103,11 +110,17 @@ const setButtons = (
   buttons: ContainerColors,
   documentStyle: CSSStyleDeclaration
 ) => {
-  if (buttons.backgroundColor)
+  if (buttons.backgroundColor) {
     documentStyle.setProperty(
       cssVariableNames.chat.buttons.bgColor,
       buttons.backgroundColor
     )
+    documentStyle.setProperty(
+      cssVariableNames.chat.buttons.bgColorRgb,
+      hexToRgb(buttons.backgroundColor).join(', ')
+    )
+  }
+
   if (buttons.color)
     documentStyle.setProperty(
       cssVariableNames.chat.buttons.color,
@@ -142,6 +155,16 @@ const setTypebotBackground = (
       : cssVariableNames.general.bgColor,
     parseBackgroundValue(background)
   )
+  const backgroundColor =
+    (BackgroundType.COLOR ? background.content : '#ffffff') ?? '#ffffff'
+  documentStyle.setProperty(
+    cssVariableNames.chat.checkbox.bgColor,
+    (BackgroundType.COLOR ? background.content : '#ffffff') ?? '#ffffff'
+  )
+  documentStyle.setProperty(
+    cssVariableNames.general.color,
+    isLight(backgroundColor) ? '#303235' : '#ffffff'
+  )
 }
 
 const parseBackgroundValue = ({ type, content }: Background) => {