diff --git a/apps/web/components/booking/pages/AvailabilityPage.tsx b/apps/web/components/booking/pages/AvailabilityPage.tsx index 90ea4af37a..8f41228ec1 100644 --- a/apps/web/components/booking/pages/AvailabilityPage.tsx +++ b/apps/web/components/booking/pages/AvailabilityPage.tsx @@ -191,7 +191,7 @@ const AvailabilityPage = ({ profile, eventType, ...restProps }: Props) => { style={availabilityDatePickerEmbedStyles} className={classNames( isBackgroundTransparent ? "" : "bg-default dark:bg-muted pb-4 md:pb-0", - "border-subtle md:rounded-md md:border", + "border-booker md:border-booker-width md:rounded-md", isEmbed && "mx-auto" )}>
diff --git a/apps/web/components/booking/pages/BookingPage.tsx b/apps/web/components/booking/pages/BookingPage.tsx index 81bca90535..0fefcb4539 100644 --- a/apps/web/components/booking/pages/BookingPage.tsx +++ b/apps/web/components/booking/pages/BookingPage.tsx @@ -528,8 +528,8 @@ const BookingPage = ({
{showEventTypeDetails && ( diff --git a/apps/web/pages/[user].tsx b/apps/web/pages/[user].tsx index 7e37bf904d..f81bb65272 100644 --- a/apps/web/pages/[user].tsx +++ b/apps/web/pages/[user].tsx @@ -122,7 +122,7 @@ export default function User(props: inferSSRProps & E
{isSingleUser && ( // When we deal with a single user, not dynamic group diff --git a/apps/web/pages/_app.tsx b/apps/web/pages/_app.tsx index 534ae8cc56..231c005abe 100644 --- a/apps/web/pages/_app.tsx +++ b/apps/web/pages/_app.tsx @@ -5,6 +5,7 @@ import Head from "next/head"; import Script from "next/script"; import "@calcom/embed-core/src/embed-iframe"; +import { useEmbedUiConfig } from "@calcom/embed-core/src/embed-iframe"; import LicenseRequired from "@calcom/features/ee/common/components/LicenseRequired"; import { trpc } from "@calcom/trpc/react"; @@ -27,6 +28,18 @@ const calFont = localFont({ function MyApp(props: AppProps) { const { Component, pageProps, err, router } = props; let pageStatus = "200"; + const { cssVarsPerTheme } = useEmbedUiConfig(); + const cssVarsStyle = []; + if (cssVarsPerTheme) { + for (const [themeName, cssVars] of Object.entries(cssVarsPerTheme)) { + cssVarsStyle.push(`.${themeName} {`); + for (const [cssVarName, value] of Object.entries(cssVars)) { + cssVarsStyle.push(`--${cssVarName}: ${value};`); + } + cssVarsStyle.push(`}`); + } + } + if (router.pathname === "/404") { pageStatus = "404"; } else if (router.pathname === "/500") { @@ -62,6 +75,12 @@ function MyApp(props: AppProps) { --font-cal: ${calFont.style.fontFamily}; } `} + + diff --git a/apps/web/pages/booking/[uid].tsx b/apps/web/pages/booking/[uid].tsx index 3d1ad20734..311d736d18 100644 --- a/apps/web/pages/booking/[uid].tsx +++ b/apps/web/pages/booking/[uid].tsx @@ -325,7 +325,7 @@ export default function Success(props: SuccessProps) {
-
+
diff --git a/packages/config/tailwind-preset.js b/packages/config/tailwind-preset.js index 9d29f9456c..a3c8315eaf 100644 --- a/packages/config/tailwind-preset.js +++ b/packages/config/tailwind-preset.js @@ -2,7 +2,7 @@ const plugin = require("tailwindcss/plugin"); const { fontFamily } = require("tailwindcss/defaultTheme"); /** @type {import('tailwindcss').Config} */ - +const subtleColor = "#E5E7EB"; module.exports = { content: [ "./pages/**/*.{js,ts,jsx,tsx}", @@ -58,8 +58,9 @@ module.exports = { borderColor: { emphasis: "var(--cal-border-emphasis, #9CA3AF)", default: "var(--cal-border, #D1D5DB)", - subtle: "var(--cal-border-subtle, #E5E7EB)", + subtle: `var(--cal-border-subtle, ${subtleColor})`, muted: "var(--cal-border-muted, #F3F4F6)", + booker: `var(--cal-border-booker, ${subtleColor})`, }, textColor: { emphasis: "var(--cal-text-emphasis, #111827)", @@ -106,6 +107,9 @@ module.exports = { boxShadow: { dropdown: "0px 2px 6px -1px rgba(0, 0, 0, 0.08)", }, + borderWidth: { + "booker-width": "var(--cal-border-booker-width, 1px)", + }, fontFamily: { cal: ["var(--font-cal)", ...fontFamily.serif], sans: ["var(--font-inter)", ...fontFamily.sans], diff --git a/packages/embeds/embed-core/index.html b/packages/embeds/embed-core/index.html index be5f9b1908..f05ebfed0e 100644 --- a/packages/embeds/embed-core/index.html +++ b/packages/embeds/embed-core/index.html @@ -17,15 +17,15 @@ if (!location.search.includes("nonResponsive")) { document.write(''); } - (()=> { + (() => { const url = new URL(document.URL); // Only run the example specified by only=, avoids distraction and faster to test. - const only = window.only = url.searchParams.get("only"); - const elementIdentifier = only !== "all" ? only.replace("ns:",""): null + const only = (window.only = url.searchParams.get("only")); + const elementIdentifier = only !== "all" ? only.replace("ns:", "") : null; if (elementIdentifier) { - location.hash="#cal-booking-place-" + elementIdentifier + "-iframe" + location.hash = "#cal-booking-place-" + elementIdentifier + "-iframe"; } - })() + })(); +
- Render All embeds together - It would be slow to load + Render All embeds together - It would be slow to load
Floating Popup

Popup Examples

- - - - - + + + + + - - - - + + + +