From a2de7ce2a09e8cc394460368bd035c9fadfd4bbe Mon Sep 17 00:00:00 2001
From: Arthur Belleville <arthur.belleville@datadoghq.com>
Date: Mon, 20 Oct 2025 10:28:41 +0200
Subject: [PATCH] Add red variant

---
 ui/src/components/EmbedConfigModal.tsx |  3 ++-
 ui/src/pages/EmbeddedBookingPage.tsx   | 26 +++++++++++++++++++++++---
 2 files changed, 25 insertions(+), 4 deletions(-)

diff --git a/ui/src/components/EmbedConfigModal.tsx b/ui/src/components/EmbedConfigModal.tsx
index a6f9621..71d25e3 100644
--- a/ui/src/components/EmbedConfigModal.tsx
+++ b/ui/src/components/EmbedConfigModal.tsx
@@ -18,7 +18,7 @@ import { CopyButton } from "@ui/components/ui/clipboard";
 import { useState } from "react";
 import { TypographyMuted } from "@ui/components/ui/typography";
 
-type ColorVariant = "black" | "white" | "blue" | "purple" | "green" | "orange";
+type ColorVariant = "black" | "white" | "blue" | "purple" | "green" | "orange" | "red";
 
 interface EmbedConfig {
   backgroundVariant: ColorVariant;
@@ -64,6 +64,7 @@ export function EmbedConfigModal({ isOpen, onClose, baseEmbedUrl }: EmbedConfigM
     { value: "purple", label: "Violet", color: "bg-purple-600" },
     { value: "green", label: "Vert", color: "bg-green-600" },
     { value: "orange", label: "Orange", color: "bg-orange-600" },
+    { value: "red", label: "Rouge", color: "bg-red-600" },
   ];
 
   return (
diff --git a/ui/src/pages/EmbeddedBookingPage.tsx b/ui/src/pages/EmbeddedBookingPage.tsx
index a86c3ba..e0b0b4f 100644
--- a/ui/src/pages/EmbeddedBookingPage.tsx
+++ b/ui/src/pages/EmbeddedBookingPage.tsx
@@ -23,7 +23,7 @@ import { useState } from "react";
 import { useParams, useSearchParams } from "react-router-dom";
 import { twMerge } from "tailwind-merge";
 
-type ColorVariant = "black" | "white" | "blue" | "purple" | "green" | "orange";
+type ColorVariant = "black" | "white" | "blue" | "purple" | "green" | "orange" | "red";
 
 // Color scheme configurations
 const backgroundColors = {
@@ -87,6 +87,16 @@ const backgroundColors = {
     linkColor: "text-orange-400/60",
     avatarBorder: "border-orange-500/30",
   },
+  red: {
+    gradient: "from-red-900 via-red-800 to-red-900",
+    overlay: "from-red-600/5 via-transparent to-red-600/10",
+    iconBg: "bg-red-700/50",
+    iconBorder: "border-red-500/20",
+    iconText: "text-red-400",
+    borderColor: "border-red-700/50",
+    linkColor: "text-red-400/60",
+    avatarBorder: "border-red-500/30",
+  },
 };
 
 const buttonColors = {
@@ -150,19 +160,29 @@ const buttonColors = {
     modalBorder: "border-orange-500/20",
     modalIcon: "text-orange-600 dark:text-orange-400",
   },
+  red: {
+    selected: "bg-red-600 dark:bg-red-500 text-white dark:text-white",
+    ring: "ring-red-500/50",
+    todayBorder: "border-red-500/30",
+    hoverBorder: "hover:border-red-500/50",
+    slotHover:
+      "hover:bg-red-600 dark:hover:bg-red-500 hover:text-white dark:hover:text-white hover:border-red-500/50",
+    modalBorder: "border-red-500/20",
+    modalIcon: "text-red-600 dark:text-red-400",
+  },
 };
 
 // Automatically infer text color based on background luminance
 const getTextColorFromBackground = (variant: ColorVariant): string => {
   // Dark backgrounds need light text, light backgrounds need dark text
-  const darkBackgrounds = ["black", "blue", "purple", "green", "orange"];
+  const darkBackgrounds = ["black", "blue", "purple", "green", "orange", "red"];
   return darkBackgrounds.includes(variant) ? "text-white" : "text-gray-900";
 };
 
 // Automatically infer muted text color based on background luminance
 const getMutedTextColorFromBackground = (variant: ColorVariant): string => {
   // Dark backgrounds need lighter muted text, light backgrounds need darker muted text
-  const darkBackgrounds = ["black", "blue", "purple", "green", "orange"];
+  const darkBackgrounds = ["black", "blue", "purple", "green", "orange", "red"];
   return darkBackgrounds.includes(variant) ? "text-gray-400" : "text-gray-600";
 };