arthur/xtablo-source
1
0
Fork 0
Code Issues Pull requests 1 Projects Releases Packages Wiki Activity Actions 5

Add red variant

Browse source
This commit is contained in:
Arthur Belleville 2025-10-20 10:28:41 +02:00
parent d5e4e78f16
commit a2de7ce2a0
No known key found for this signature in database
2 changed files with 25 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
ui/src/components/EmbedConfigModal.tsx
View file

@ -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 (

26
ui/src/pages/EmbeddedBookingPage.tsx
View file

@ -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";
};