From 8bbfc0c7f0b225dcfd93edebb96a2ee610b41659 Mon Sep 17 00:00:00 2001
From: Syed Ali Shahbaz <52925846+alishaz-polymath@users.noreply.github.com>
Date: Tue, 14 Dec 2021 16:09:32 +0530
Subject: [PATCH] Adds complementing text color for various brand colors that
 the user might choose (#1289)

* added contrast evaluator

* added brandtext --WIP

* further changes and fixes

* fixed type err

* fixed datepicker bug

* changed brandtext to brandcontrast

* further dark mode changes

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
---
 components/AddToHomescreen.tsx                | 18 +++++------
 components/CustomBranding.tsx                 | 30 +++++++++++++++++++
 components/Tooltip.tsx                        |  2 +-
 components/booking/AvailableTimes.tsx         |  2 +-
 components/booking/DatePicker.tsx             |  8 ++---
 components/booking/TimeOptions.tsx            | 12 ++++----
 components/security/TwoFactorModalHeader.tsx  |  4 +--
 components/team/MemberInvitationModal.tsx     |  4 +--
 components/ui/Avatar.tsx                      |  2 +-
 components/ui/Button.tsx                      |  2 +-
 components/ui/WeekdaySelect.tsx               |  2 +-
 components/ui/form/PhoneInput.tsx             |  2 +-
 ee/components/stripe/Payment.tsx              |  2 +-
 .../availability/TeamAvailabilityTimes.tsx    |  2 +-
 pages/auth/forgot-password/index.tsx          | 16 +++++-----
 pages/auth/logout.tsx                         | 14 ++++-----
 pages/availability/troubleshoot.tsx           | 20 ++++++-------
 pages/getting-started.tsx                     |  2 +-
 pages/success.tsx                             |  2 +-
 pages/team/[slug].tsx                         |  2 +-
 styles/globals.css                            |  1 +
 tailwind.config.js                            |  2 +-
 22 files changed, 90 insertions(+), 61 deletions(-)

diff --git a/components/AddToHomescreen.tsx b/components/AddToHomescreen.tsx
index 0405b1e1..8730e948 100644
--- a/components/AddToHomescreen.tsx
+++ b/components/AddToHomescreen.tsx
@@ -13,14 +13,14 @@ export default function AddToHomescreen() {
     }
   }
   return !closeBanner ? (
-    <div className="fixed sm:hidden bottom-0 inset-x-0 pb-2 sm:pb-5">
-      <div className="max-w-7xl mx-auto px-2 sm:px-6 lg:px-8">
+    <div className="fixed inset-x-0 bottom-0 pb-2 sm:hidden sm:pb-5">
+      <div className="px-2 mx-auto max-w-7xl sm:px-6 lg:px-8">
         <div className="p-2 rounded-lg shadow-lg sm:p-3" style={{ background: "#2F333D" }}>
-          <div className="flex items-center justify-between flex-wrap">
-            <div className="w-0 flex-1 flex items-center">
-              <span className="flex p-2 rounded-lg bg-opacity-30 bg-brand">
+          <div className="flex flex-wrap items-center justify-between">
+            <div className="flex items-center flex-1 w-0">
+              <span className="flex p-2 rounded-lg bg-opacity-30 bg-brand text-brandcontrast">
                 <svg
-                  className="h-7 w-7 text-indigo-500 fill-current"
+                  className="text-indigo-500 fill-current h-7 w-7"
                   xmlns="http://www.w3.org/2000/svg"
                   viewBox="0 0 50 50"
                   enableBackground="new 0 0 50 50">
@@ -34,13 +34,13 @@ export default function AddToHomescreen() {
               </p>
             </div>
 
-            <div className="order-2 flex-shrink-0 sm:order-3 sm:ml-2">
+            <div className="flex-shrink-0 order-2 sm:order-3 sm:ml-2">
               <button
                 onClick={() => setCloseBanner(true)}
                 type="button"
-                className="-mr-1 flex p-2 rounded-md hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-white">
+                className="flex p-2 -mr-1 rounded-md hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-white">
                 <span className="sr-only">{t("dismiss")}</span>
-                <XIcon className="h-6 w-6 text-white" aria-hidden="true" />
+                <XIcon className="w-6 h-6 text-white" aria-hidden="true" />
               </button>
             </div>
           </div>
diff --git a/components/CustomBranding.tsx b/components/CustomBranding.tsx
index 74b5bd0c..75acc79c 100644
--- a/components/CustomBranding.tsx
+++ b/components/CustomBranding.tsx
@@ -1,8 +1,38 @@
 import { useEffect } from "react";
 
+function computeContrastRatio(a: number[], b: number[]) {
+  const lum1 = computeLuminance(a[0], a[1], a[2]);
+  const lum2 = computeLuminance(b[0], b[1], b[2]);
+  const brightest = Math.max(lum1, lum2);
+  const darkest = Math.min(lum1, lum2);
+  return (brightest + 0.05) / (darkest + 0.05);
+}
+
+function computeLuminance(r: number, g: number, b: number) {
+  const a = [r, g, b].map((v) => {
+    v /= 255;
+    return v <= 0.03928 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4);
+  });
+  return a[0] * 0.2126 + a[1] * 0.7152 + a[2] * 0.0722;
+}
+
+function hexToRGB(hex: string) {
+  const color = hex.replace("#", "");
+  return [parseInt(color.slice(0, 2), 16), parseInt(color.slice(2, 4), 16), parseInt(color.slice(4, 6), 16)];
+}
+
+function getContrastingTextColor(bgColor: string | null): string {
+  bgColor = bgColor == "" || bgColor == null ? "#292929" : bgColor;
+  const rgb = hexToRGB(bgColor);
+  const whiteContrastRatio = computeContrastRatio(rgb, [255, 255, 255]);
+  const blackContrastRatio = computeContrastRatio(rgb, [41, 41, 41]); //#292929
+  return whiteContrastRatio > blackContrastRatio ? "#ffffff" : "#292929";
+}
+
 const BrandColor = ({ val = "#292929" }: { val: string | undefined | null }) => {
   useEffect(() => {
     document.documentElement.style.setProperty("--brand-color", val);
+    document.documentElement.style.setProperty("--brand-text-color", getContrastingTextColor(val));
   }, [val]);
   return null;
 };
diff --git a/components/Tooltip.tsx b/components/Tooltip.tsx
index b27f3c25..b932152d 100644
--- a/components/Tooltip.tsx
+++ b/components/Tooltip.tsx
@@ -23,7 +23,7 @@ export function Tooltip({
       onOpenChange={onOpenChange}>
       <TooltipPrimitive.Trigger asChild>{children}</TooltipPrimitive.Trigger>
       <TooltipPrimitive.Content
-        className="bg-brand text-xs -mt-2 text-white px-1 py-0.5 shadow-lg rounded-sm"
+        className="bg-brand text-xs -mt-2 text-brandtext px-1 py-0.5 shadow-lg rounded-sm"
         side="top"
         align="center"
         {...props}>
diff --git a/components/booking/AvailableTimes.tsx b/components/booking/AvailableTimes.tsx
index 92e64c31..eaa8ab33 100644
--- a/components/booking/AvailableTimes.tsx
+++ b/components/booking/AvailableTimes.tsx
@@ -84,7 +84,7 @@ const AvailableTimes: FC<AvailableTimesProps> = ({
               <div key={slot.time.format()}>
                 <Link href={bookingUrl}>
                   <a
-                    className="block py-4 mb-2 font-medium bg-white border rounded-sm dark:bg-gray-600 text-primary-500 dark:text-neutral-200 border-brand dark:border-transparent hover:text-white hover:bg-brand dark:hover:border-black dark:hover:bg-black"
+                    className="block py-4 mb-2 font-medium bg-white border rounded-sm dark:bg-gray-600 text-primary-500 dark:text-neutral-200 border-brand dark:border-transparent hover:text-white hover:bg-brand hover:text-brandcontrast dark:hover:border-black dark:hover:bg-black"
                     data-testid="time">
                     {slot.time.format(timeFormat)}
                   </a>
diff --git a/components/booking/DatePicker.tsx b/components/booking/DatePicker.tsx
index bc207579..5fd9832b 100644
--- a/components/booking/DatePicker.tsx
+++ b/components/booking/DatePicker.tsx
@@ -200,13 +200,11 @@ function DatePicker({
                 className={classNames(
                   "absolute w-full top-0 left-0 right-0 bottom-0 rounded-sm text-center mx-auto",
                   "hover:border hover:border-brand dark:hover:border-white",
-                  day.disabled
-                    ? "text-gray-400 font-light hover:border-0 cursor-default"
-                    : "dark:text-white text-primary-500 font-medium",
+                  day.disabled ? "text-gray-400 font-light hover:border-0 cursor-default" : "font-medium",
                   date && date.isSame(inviteeDate().date(day.date), "day")
-                    ? "bg-brand text-white-important"
+                    ? "bg-brand text-brandcontrast"
                     : !day.disabled
-                    ? " bg-gray-100 dark:bg-gray-600"
+                    ? " bg-gray-100 dark:bg-gray-600 dark:text-white"
                     : ""
                 )}
                 data-testid="day"
diff --git a/components/booking/TimeOptions.tsx b/components/booking/TimeOptions.tsx
index b707e638..8b6c79af 100644
--- a/components/booking/TimeOptions.tsx
+++ b/components/booking/TimeOptions.tsx
@@ -35,19 +35,19 @@ const TimeOptions: FC<Props> = (props) => {
   };
 
   return selectedTimeZone !== "" ? (
-    <div className="absolute z-10 w-full max-w-80 rounded-sm border border-gray-200 dark:bg-gray-700 dark:border-0 bg-white px-4 py-2">
+    <div className="absolute z-10 w-full px-4 py-2 bg-white border border-gray-200 rounded-sm max-w-80 dark:bg-gray-700 dark:border-0">
       <div className="flex mb-4">
-        <div className="w-1/2 dark:text-white text-gray-600 font-medium">{t("time_options")}</div>
+        <div className="w-1/2 font-medium text-gray-600 dark:text-white">{t("time_options")}</div>
         <div className="w-1/2">
           <Switch.Group as="div" className="flex items-center justify-end">
             <Switch.Label as="span" className="mr-3">
-              <span className="text-sm dark:text-white text-gray-500">{t("am_pm")}</span>
+              <span className="text-sm text-gray-500 dark:text-white">{t("am_pm")}</span>
             </Switch.Label>
             <Switch
               checked={is24hClock}
               onChange={handle24hClockToggle}
               className={classNames(
-                is24hClock ? "bg-brand" : "dark:bg-gray-600 bg-gray-200",
+                is24hClock ? "bg-brand text-brandcontrast" : "dark:bg-gray-600 bg-gray-200",
                 "relative inline-flex flex-shrink-0 h-5 w-8 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-black"
               )}>
               <span className="sr-only">{t("use_setting")}</span>
@@ -60,7 +60,7 @@ const TimeOptions: FC<Props> = (props) => {
               />
             </Switch>
             <Switch.Label as="span" className="ml-3">
-              <span className="text-sm dark:text-white text-gray-500">{t("24_h")}</span>
+              <span className="text-sm text-gray-500 dark:text-white">{t("24_h")}</span>
             </Switch.Label>
           </Switch.Group>
         </div>
@@ -69,7 +69,7 @@ const TimeOptions: FC<Props> = (props) => {
         id="timeZone"
         value={selectedTimeZone}
         onChange={(tz: ITimezoneOption) => setSelectedTimeZone(tz.value)}
-        className="mb-2 shadow-sm focus:ring-black focus:border-brand mt-1 block w-full sm:text-sm border-gray-300 rounded-md"
+        className="block w-full mt-1 mb-2 border-gray-300 rounded-md shadow-sm focus:ring-black focus:border-brand sm:text-sm"
       />
     </div>
   ) : null;
diff --git a/components/security/TwoFactorModalHeader.tsx b/components/security/TwoFactorModalHeader.tsx
index bcf5f21f..b2c763fe 100644
--- a/components/security/TwoFactorModalHeader.tsx
+++ b/components/security/TwoFactorModalHeader.tsx
@@ -4,11 +4,11 @@ import React from "react";
 const TwoFactorModalHeader = ({ title, description }: { title: string; description: string }) => {
   return (
     <div className="mb-4 sm:flex sm:items-start">
-      <div className="flex items-center justify-center flex-shrink-0 w-12 h-12 mx-auto bg-brand rounded-full bg-opacity-5 sm:mx-0 sm:h-10 sm:w-10">
+      <div className="flex items-center justify-center flex-shrink-0 w-12 h-12 mx-auto rounded-full bg-brand text-brandcontrast bg-opacity-5 sm:mx-0 sm:h-10 sm:w-10">
         <ShieldCheckIcon className="w-6 h-6 text-black" />
       </div>
       <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
-        <h3 className="font-cal text-lg font-medium leading-6 text-gray-900" id="modal-title">
+        <h3 className="text-lg font-medium leading-6 text-gray-900 font-cal" id="modal-title">
           {title}
         </h3>
         <p className="text-sm text-gray-400">{description}</p>
diff --git a/components/team/MemberInvitationModal.tsx b/components/team/MemberInvitationModal.tsx
index 5f873c58..370462a9 100644
--- a/components/team/MemberInvitationModal.tsx
+++ b/components/team/MemberInvitationModal.tsx
@@ -62,8 +62,8 @@ export default function MemberInvitationModal(props: { team: TeamWithMembers | n
 
         <div className="inline-block px-4 pt-5 pb-4 text-left align-bottom transition-all transform bg-white rounded-lg shadow-xl sm:my-8 sm:align-middle sm:max-w-lg sm:w-full sm:p-6">
           <div className="mb-4 sm:flex sm:items-start">
-            <div className="flex items-center justify-center flex-shrink-0 w-12 h-12 mx-auto rounded-full bg-brand bg-opacity-5 sm:mx-0 sm:h-10 sm:w-10">
-              <UserIcon className="w-6 h-6 text-white" />
+            <div className="flex items-center justify-center flex-shrink-0 w-12 h-12 mx-auto rounded-full bg-brand text-brandcontrast bg-opacity-5 sm:mx-0 sm:h-10 sm:w-10">
+              <UserIcon className="w-6 h-6 text-brandcontrast" />
             </div>
             <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
               <h3 className="text-lg font-medium leading-6 text-gray-900" id="modal-title">
diff --git a/components/ui/Avatar.tsx b/components/ui/Avatar.tsx
index 97cf5204..f1a3734c 100644
--- a/components/ui/Avatar.tsx
+++ b/components/ui/Avatar.tsx
@@ -36,7 +36,7 @@ export default function Avatar(props: AvatarProps) {
   return title ? (
     <Tooltip.Tooltip delayDuration={300}>
       <Tooltip.TooltipTrigger className="cursor-default">{avatar}</Tooltip.TooltipTrigger>
-      <Tooltip.Content className="p-2 rounded-sm text-sm bg-brand text-white shadow-sm">
+      <Tooltip.Content className="p-2 text-sm rounded-sm shadow-sm bg-brand text-brandcontrast">
         <Tooltip.Arrow />
         {title}
       </Tooltip.Content>
diff --git a/components/ui/Button.tsx b/components/ui/Button.tsx
index a72f851e..6a746346 100644
--- a/components/ui/Button.tsx
+++ b/components/ui/Button.tsx
@@ -64,7 +64,7 @@ export const Button = forwardRef<HTMLAnchorElement | HTMLButtonElement, ButtonPr
         color === "primary" &&
           (disabled
             ? "border border-transparent bg-gray-400 text-white"
-            : "border border-transparent dark:text-black text-white bg-brand dark:bg-white hover:bg-opacity-90 hover:shadow-md focus:outline-none focus:ring-2 focus:ring-offset-1 focus:ring-neutral-900"),
+            : "border border-transparent dark:text-brandcontrast text-brandcontrast bg-brand dark:bg-brand hover:bg-opacity-90 hover:shadow-md focus:outline-none focus:ring-2 focus:ring-offset-1 focus:ring-neutral-900"),
         color === "secondary" &&
           (disabled
             ? "border border-gray-200 text-gray-400 bg-white"
diff --git a/components/ui/WeekdaySelect.tsx b/components/ui/WeekdaySelect.tsx
index 7857ed97..37684bd6 100644
--- a/components/ui/WeekdaySelect.tsx
+++ b/components/ui/WeekdaySelect.tsx
@@ -34,7 +34,7 @@ export const WeekdaySelect = (props: WeekdaySelectProps) => {
               }}
               className={`
               w-10 h-10
-                      bg-brand text-white focus:outline-none px-3 py-1 rounded 
+                      bg-brand text-brandcontrast focus:outline-none px-3 py-1 rounded 
                     ${activeDays[idx + 1] ? "rounded-r-none" : ""} 
                     ${activeDays[idx - 1] ? "rounded-l-none" : ""} 
                     ${idx === 0 ? "rounded-l" : ""} 
diff --git a/components/ui/form/PhoneInput.tsx b/components/ui/form/PhoneInput.tsx
index 7b1bb474..c7e102b7 100644
--- a/components/ui/form/PhoneInput.tsx
+++ b/components/ui/form/PhoneInput.tsx
@@ -8,7 +8,7 @@ export const PhoneInput = (props: PhoneInputProps) => (
   <BasePhoneInput
     {...props}
     className={classNames(
-      "shadow-sm rounded-md block w-full py-px px-3 border border-1 border-gray-300 ring-black focus-within:ring-1 focus-within:border-brand dark:border-gray-900 dark:text-white dark:bg-brand",
+      "shadow-sm rounded-md block w-full py-px px-3 border border-1 border-gray-300 ring-black focus-within:ring-1 focus-within:border-brand dark:border-gray-900 dark:text-brandcontrast dark:bg-brand",
       props.className
     )}
     onChange={() => {
diff --git a/ee/components/stripe/Payment.tsx b/ee/components/stripe/Payment.tsx
index 66b484bc..683f5d8c 100644
--- a/ee/components/stripe/Payment.tsx
+++ b/ee/components/stripe/Payment.tsx
@@ -15,7 +15,7 @@ import Button from "@components/ui/Button";
 const CARD_OPTIONS = {
   iconStyle: "solid" as const,
   classes: {
-    base: "block p-2 w-full border-solid border-2 border-gray-300 rounded-md shadow-sm dark:bg-brand dark:text-white dark:border-gray-900 focus-within:ring-black focus-within:border-brand sm:text-sm",
+    base: "block p-2 w-full border-solid border-2 border-gray-300 rounded-md shadow-sm dark:bg-brand dark:text-brandcontrast dark:border-gray-900 focus-within:ring-black focus-within:border-brand sm:text-sm",
   },
   style: {
     base: {
diff --git a/ee/components/team/availability/TeamAvailabilityTimes.tsx b/ee/components/team/availability/TeamAvailabilityTimes.tsx
index 04838312..691afe01 100644
--- a/ee/components/team/availability/TeamAvailabilityTimes.tsx
+++ b/ee/components/team/availability/TeamAvailabilityTimes.tsx
@@ -59,7 +59,7 @@ export default function TeamAvailabilityTimes(props: Props) {
       {times.map((time) => (
         <div key={time.format()} className="flex flex-row items-center">
           <a
-            className="flex-grow block py-2 mb-2 mr-3 font-medium text-center bg-white border rounded-sm min-w-48 dark:bg-gray-600 text-primary-500 dark:text-neutral-200 border-brand dark:border-transparent hover:text-white hover:bg-brand dark:hover:border-black dark:hover:bg-black"
+            className="flex-grow block py-2 mb-2 mr-3 font-medium text-center bg-white border rounded-sm min-w-48 dark:bg-gray-600 text-primary-500 dark:text-neutral-200 border-brand dark:border-transparent hover:bg-brand hover:text-brandcontrast dark:hover:border-black dark:hover:text-white dark:hover:bg-black"
             data-testid="time">
             {time.format("HH:mm")}
           </a>
diff --git a/pages/auth/forgot-password/index.tsx b/pages/auth/forgot-password/index.tsx
index 101c143f..4f7066b5 100644
--- a/pages/auth/forgot-password/index.tsx
+++ b/pages/auth/forgot-password/index.tsx
@@ -69,7 +69,7 @@ export default function ForgotPassword({ csrfToken }: { csrfToken: string }) {
   const Success = () => {
     return (
       <div className="space-y-6">
-        <h2 className="mt-6 text-center text-3xl font-extrabold text-gray-900">{t("done")}</h2>
+        <h2 className="mt-6 text-3xl font-extrabold text-center text-gray-900">{t("done")}</h2>
         <p>{t("check_email_reset_password")}</p>
         {error && <p className="text-red-600">{error.message}</p>}
       </div>
@@ -77,15 +77,15 @@ export default function ForgotPassword({ csrfToken }: { csrfToken: string }) {
   };
 
   return (
-    <div className="min-h-screen bg-gray-50 flex flex-col justify-center py-12 sm:px-6 lg:px-8">
+    <div className="flex flex-col justify-center min-h-screen py-12 bg-gray-50 sm:px-6 lg:px-8">
       <HeadSeo title={t("forgot_password")} description={t("forgot_password")} />
       <div className="mt-8 sm:mx-auto sm:w-full sm:max-w-md">
-        <div className="bg-white py-8 px-4 mx-2 shadow rounded-lg sm:px-10 space-y-6">
+        <div className="px-4 py-8 mx-2 space-y-6 bg-white rounded-lg shadow sm:px-10">
           {success && <Success />}
           {!success && (
             <>
               <div className="space-y-6">
-                <h2 className="font-cal mt-6 text-center text-3xl font-extrabold text-gray-900">
+                <h2 className="mt-6 text-3xl font-extrabold text-center text-gray-900 font-cal">
                   {t("forgot_password")}
                 </h2>
                 <p>{t("reset_instructions")}</p>
@@ -107,7 +107,7 @@ export default function ForgotPassword({ csrfToken }: { csrfToken: string }) {
                       autoComplete="email"
                       placeholder="john.doe@example.com"
                       required
-                      className="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-black focus:border-brand sm:text-sm"
+                      className="block w-full px-3 py-2 placeholder-gray-400 border border-gray-300 rounded-md shadow-sm appearance-none focus:outline-none focus:ring-black focus:border-brand sm:text-sm"
                     />
                   </div>
                 </div>
@@ -116,12 +116,12 @@ export default function ForgotPassword({ csrfToken }: { csrfToken: string }) {
                   <button
                     type="submit"
                     disabled={loading}
-                    className={`w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-brand hover:bg-gray-900 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-black ${
+                    className={`w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-brandcontrast bg-brand hover:bg-gray-900 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-black ${
                       loading ? "cursor-not-allowed" : ""
                     }`}>
                     {loading && (
                       <svg
-                        className="animate-spin -ml-1 mr-3 h-5 w-5 text-white"
+                        className="w-5 h-5 mr-3 -ml-1 text-white animate-spin"
                         xmlns="http://www.w3.org/2000/svg"
                         fill="none"
                         viewBox="0 0 24 24">
@@ -145,7 +145,7 @@ export default function ForgotPassword({ csrfToken }: { csrfToken: string }) {
                   <Link href="/auth/login">
                     <button
                       type="button"
-                      className="w-full flex justify-center py-2 px-4 text-sm font-medium text-black focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-black">
+                      className="flex justify-center w-full px-4 py-2 text-sm font-medium text-black focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-black">
                       {t("login")}
                     </button>
                   </Link>
diff --git a/pages/auth/logout.tsx b/pages/auth/logout.tsx
index ddc31d06..7bc85f0e 100644
--- a/pages/auth/logout.tsx
+++ b/pages/auth/logout.tsx
@@ -13,22 +13,22 @@ export default function Logout() {
 
   return (
     <div
-      className="fixed z-50 inset-0 overflow-y-auto"
+      className="fixed inset-0 z-50 overflow-y-auto"
       aria-labelledby="modal-title"
       role="dialog"
       aria-modal="true">
       <HeadSeo title={t("logged_out")} description={t("logged_out")} />
-      <div className="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
+      <div className="flex items-end justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0">
         <span className="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">
           &#8203;
         </span>
-        <div className="inline-block align-bottom bg-white rounded-lg px-4 pt-5 pb-4 text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-sm sm:w-full sm:p-6">
+        <div className="inline-block px-4 pt-5 pb-4 overflow-hidden text-left align-bottom transition-all transform bg-white rounded-lg shadow-xl sm:my-8 sm:align-middle sm:max-w-sm sm:w-full sm:p-6">
           <div>
-            <div className="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-green-100">
-              <CheckIcon className="h-6 w-6 text-green-600" />
+            <div className="flex items-center justify-center w-12 h-12 mx-auto bg-green-100 rounded-full">
+              <CheckIcon className="w-6 h-6 text-green-600" />
             </div>
             <div className="mt-3 text-center sm:mt-5">
-              <h3 className="text-lg leading-6 font-medium text-gray-900" id="modal-title">
+              <h3 className="text-lg font-medium leading-6 text-gray-900" id="modal-title">
                 {t("youve_been_logged_out")}
               </h3>
               <div className="mt-2">
@@ -38,7 +38,7 @@ export default function Logout() {
           </div>
           <div className="mt-5 sm:mt-6">
             <Link href="/auth/login">
-              <a className="inline-flex justify-center w-full rounded-md border border-transparent shadow-sm px-4 py-2 bg-brand text-base font-medium text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-black sm:text-sm">
+              <a className="inline-flex justify-center w-full px-4 py-2 text-base font-medium border border-transparent rounded-md shadow-sm bg-brand text-brandcontrast focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-black sm:text-sm">
                 {t("go_back_login")}
               </a>
             </Link>
diff --git a/pages/availability/troubleshoot.tsx b/pages/availability/troubleshoot.tsx
index c9862ca6..4063ed5e 100644
--- a/pages/availability/troubleshoot.tsx
+++ b/pages/availability/troubleshoot.tsx
@@ -51,12 +51,12 @@ const AvailabilityView = ({ user }: { user: User }) => {
   }, [selectedDate]);
 
   return (
-    <div className="bg-white max-w-xl overflow-hidden shadow rounded-sm">
+    <div className="max-w-xl overflow-hidden bg-white rounded-sm shadow">
       <div className="px-4 py-5 sm:p-6">
         {t("overview_of_day")}{" "}
         <input
           type="date"
-          className="inline border-none h-8 p-0"
+          className="inline h-8 p-0 border-none"
           defaultValue={selectedDate.format("YYYY-MM-DD")}
           onChange={(e) => {
             setSelectedDate(dayjs(e.target.value));
@@ -64,8 +64,8 @@ const AvailabilityView = ({ user }: { user: User }) => {
         />
         <small className="block text-neutral-400">{t("hover_over_bold_times_tip")}</small>
         <div className="mt-4 space-y-4">
-          <div className="bg-brand overflow-hidden rounded-sm">
-            <div className="px-4 sm:px-6 py-2 text-white">
+          <div className="overflow-hidden rounded-sm bg-brand">
+            <div className="px-4 py-2 sm:px-6 text-brandcontrast">
               {t("your_day_starts_at")} {convertMinsToHrsMins(user.startTime)}
             </div>
           </div>
@@ -73,8 +73,8 @@ const AvailabilityView = ({ user }: { user: User }) => {
             <Loader />
           ) : availability.length > 0 ? (
             availability.map((slot) => (
-              <div key={slot.start} className="bg-neutral-100 overflow-hidden rounded-sm">
-                <div className="px-4 py-5 sm:p-6 text-black">
+              <div key={slot.start} className="overflow-hidden rounded-sm bg-neutral-100">
+                <div className="px-4 py-5 text-black sm:p-6">
                   {t("calendar_shows_busy_between")}{" "}
                   <span className="font-medium text-neutral-800" title={slot.start}>
                     {dayjs(slot.start).format("HH:mm")}
@@ -89,13 +89,13 @@ const AvailabilityView = ({ user }: { user: User }) => {
               </div>
             ))
           ) : (
-            <div className="bg-neutral-100 overflow-hidden rounded-sm">
-              <div className="px-4 py-5 sm:p-6 text-black">{t("calendar_no_busy_slots")}</div>
+            <div className="overflow-hidden rounded-sm bg-neutral-100">
+              <div className="px-4 py-5 text-black sm:p-6">{t("calendar_no_busy_slots")}</div>
             </div>
           )}
 
-          <div className="bg-brand overflow-hidden rounded-sm">
-            <div className="px-4 sm:px-6 py-2 text-white">
+          <div className="overflow-hidden rounded-sm bg-brand">
+            <div className="px-4 py-2 sm:px-6 text-brandcontrast">
               {t("your_day_ends_at")} {convertMinsToHrsMins(user.endTime)}
             </div>
           </div>
diff --git a/pages/getting-started.tsx b/pages/getting-started.tsx
index 1f022b56..b5bae209 100644
--- a/pages/getting-started.tsx
+++ b/pages/getting-started.tsx
@@ -417,7 +417,7 @@ export default function Onboarding(props: inferSSRProps<typeof getServerSideProp
   }
 
   return (
-    <div className="min-h-screen bg-brand">
+    <div className="min-h-screen bg-brand text-brandcontrast">
       <Head>
         <title>Cal.com - {t("getting_started")}</title>
         <link rel="icon" href="/favicon.ico" />
diff --git a/pages/success.tsx b/pages/success.tsx
index c32fbe62..47019d72 100644
--- a/pages/success.tsx
+++ b/pages/success.tsx
@@ -258,7 +258,7 @@ export default function Success(props: inferSSRProps<typeof getServerSideProps>)
                           id="email"
                           inputMode="email"
                           defaultValue={router.query.email}
-                          className="block w-full text-gray-600 border-gray-300 shadow-sm dark:bg-brand dark:text-white dark:border-gray-900 focus:ring-black focus:border-brand sm:text-sm"
+                          className="block w-full text-gray-600 border-gray-300 shadow-sm dark:bg-brand dark:text-brandcontrast dark:border-gray-900 focus:ring-black focus:border-brand sm:text-sm"
                           placeholder="rick.astley@cal.com"
                         />
                         <Button type="submit" className="min-w-max" color="primary">
diff --git a/pages/team/[slug].tsx b/pages/team/[slug].tsx
index ea614803..22ef79c1 100644
--- a/pages/team/[slug].tsx
+++ b/pages/team/[slug].tsx
@@ -77,7 +77,7 @@ function TeamPage({ team }: TeamPageProps) {
                   <div className="w-full border-t border-gray-200 dark:border-gray-900" />
                 </div>
                 <div className="relative flex justify-center">
-                  <span className="px-2 text-sm text-gray-500 bg-gray-100 dark:bg-brand dark:text-gray-500">
+                  <span className="px-2 text-sm text-gray-500 bg-gray-100 dark:bg-brand dark:text-brandcontrast">
                     {t("or")}
                   </span>
                 </div>
diff --git a/styles/globals.css b/styles/globals.css
index 450fb967..73554a58 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -4,6 +4,7 @@
 
 :root {
   --brand-color: #292929;
+  --brand-text-color: #ffffff;
 }
 
 /* PhoneInput dark-mode overrides (it would add a lot of boilerplate to do this in JavaScript) */
diff --git a/tailwind.config.js b/tailwind.config.js
index 7d7537c2..18de10e5 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -13,7 +13,7 @@ module.exports = {
       colors: {
         /* your primary brand color */
         brand: "var(--brand-color)",
-
+        brandcontrast: "var(--brand-text-color)",
         black: "#111111",
         gray: {
           50: "#F8F8F8",