v2.7.14

* Add payment option to schema

* Add payment option to Stripe zod

* Set payment option on event type

* Create manual payment intent in Stripe

* Set payment option from Stripe app

* Add payment option to DB

* Pass React.ReactNode to checkbox

* Create uncaptured payment intent

* WIP

* Capture card in setup intent

* Show charge card option

* Charge card from booking page

* Bug fixes

* Clean up

* Clean up app card

* Add no-show fee messaging on booking page

* Send payment email on payment & add price

* Fix messaging

* Create no show fee charged email

* Send charge fee collected email

* Disable submit on card failure

* Clean up

* Serverside prevent charging card again if already charged

* Only confirm booking if paid for

* Type fixes

* More type fixes

* More type fixes

* Type fix

* Type fixes

* UI changes

* Payment component rework

* Update apps/web/public/static/locales/en/common.json

Co-authored-by: Alex van Andel <me@alexvanandel.com>

* Update apps/web/public/static/locales/en/common.json

Co-authored-by: Alex van Andel <me@alexvanandel.com>

* Update apps/web/components/dialog/ChargeCardDialog.tsx

Co-authored-by: Alex van Andel <me@alexvanandel.com>

* Update packages/trpc/server/routers/viewer/payments.tsx

Co-authored-by: Alex van Andel <me@alexvanandel.com>

* Revert GTM config

* Adjust payment option dropdown

* Show alert when seats are set

* Small bug fixes

* Create collect card method

* clean up

* Prevent seats & charge no-show fee to be enabled together

* Do not charge no-show fee on unconfirmed bookings

* Add check to collect card method

* Webhook send request emails

* Fix some dark mode colours

* Change awaiting payment language

* Type fixes

* Set height of Select and TextField both to 38px to fix alignment

* Fix message seats & payment error message

* Type fix

---------

Co-authored-by: Alex van Andel <me@alexvanandel.com>

.github/PULL_REQUEST_TEMPLATE.md

@@ -12,13 +12,13 @@ Fixes # (issue)
 
 ## Type of change
 
-<!-- Please delete options that are not relevant. -->
+<!-- Please delete bullets that are not relevant. -->
 
-- [ ] Bug fix (non-breaking change which fixes an issue)
-- [ ] Chore (refactoring code, technical debt, workflow improvements)
-- [ ] New feature (non-breaking change which adds functionality)
-- [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected)
-- [ ] This change requires a documentation update
+- Bug fix (non-breaking change which fixes an issue)
+- Chore (refactoring code, technical debt, workflow improvements)
+- New feature (non-breaking change which adds functionality)
+- Breaking change (fix or feature that would cause existing functionality to not work as expected)
+- This change requires a documentation update
 
 ## How should this be tested?
 

.github/matchers/tsc-absolute.json

@@ -0,0 +1,18 @@
+{
+  "problemMatcher": [
+    {
+      "owner": "tsc-absolute",
+      "pattern": [
+        {
+          "regexp": "(?:^|\\s)([^\\s].*)[\\(:](\\d+)[,:](\\d+)(?:\\):\\s+|\\s+-\\s+)(error|warning|info)\\s+(TS\\d+)\\s*:\\s*(.*)$",
+          "file": 1,
+          "line": 2,
+          "column": 3,
+          "severity": 4,
+          "code": 5,
+          "message": 6
+        }
+      ]
+    }
+  ]
+}

.github/workflows/apply-issue-labels-to-pr.yml

@@ -0,0 +1,27 @@
+name: "Apply issue labels to PR"
+
+on:
+  pull_request:
+    types: [opened]
+
+jobs:
+  label_on_pr:
+    runs-on: ubuntu-latest
+
+    permissions:
+      pull-requests: write
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v2
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v2
+        with:
+          node-version: 16
+
+      - name: Apply labels from linked issue to PR
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          PR_DATA: ${{ toJson(github.event.pull_request) }}
+        run: node ./.github/workflows/scripts/apply-issue-labels-to-pr.ts

.github/workflows/check-types.yml

@@ -10,8 +10,10 @@ jobs:
       - uses: actions/checkout@v3
       - uses: ./.github/actions/dangerous-git-checkout
       - uses: ./.github/actions/yarn-install
-
       - name: Show info
         run: node -e "console.log(require('v8').getHeapStatistics())"
-
-      - run: yarn type-check
+      - name: Configure TSC problem matcher
+        run: |
+          echo "::remove-matcher owner=tsc::"
+          echo "::add-matcher::.github/matchers/tsc-absolute.json"
+      - run: yarn type-check:ci

.github/workflows/cron-downgradeUsers.yml

@@ -1,11 +1,12 @@
 name: Cron - downgradeUsers
 
 on:
+  workflow_dispatch:
   # "Scheduled workflows run on the latest commit on the default or base branch."
   # — https://docs.github.com/en/actions/learn-github-actions/events-that-trigger-workflows#schedule
   schedule:
-    # Runs “At minute 0, 15, 30, and 45.” (see https://crontab.guru)
-    - cron: "0,15,30,45 * * * *"
+    # Runs “Every month at 1st (see https://crontab.guru)
+    - cron: "0 0 1 * *"
 jobs:
   cron-downgradeUsers:
     env:

.github/workflows/cron-stale-issue.yml

@@ -15,6 +15,9 @@ jobs:
     steps:
       - uses: actions/stale@v7
         with:
-          days-before-stale: 60
-          include-only-assigned: true
-          days-before-close: -1
+          days-before-issue-stale: 60
+          days-before-issue-close: -1
+          days-before-pr-stale: 14
+          days-before-pr-close: 7
+          stale-pr-message: "This PR is being marked as stale due to inactivity."
+          close-pr-message: "This PR is being closed due to inactivity. Please reopen if work is intended to be continued.

.github/workflows/crowdin.yml

@@ -15,6 +15,8 @@ jobs:
     steps:
       - name: Checkout
         uses: actions/checkout@v3
+        with:
+          token: ${{ secrets.GH_ACCESS_TOKEN }}
 
       - name: crowdin action
         uses: crowdin/github-action@1.5.1
@@ -26,6 +28,6 @@ jobs:
           localization_branch_name: main
           create_pull_request: false
         env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          GITHUB_TOKEN: ${{ secrets.GH_ACCESS_TOKEN }}
           CROWDIN_PROJECT_ID: ${{ secrets.CROWDIN_PROJECT_ID }}
           CROWDIN_PERSONAL_TOKEN: ${{ secrets.CROWDIN_PERSONAL_TOKEN }}

.github/workflows/scripts/apply-issue-labels-to-pr.ts

@@ -0,0 +1,149 @@
+const https = require("https");
+
+async function applyLabelFromLinkedIssueToPR(pr, token) {
+  
+  // Get the labels from issues linked to the PR
+  const query = `
+    query GetLinkedIssues($owner: String!, $repo: String!, $prNumber: Int!) {
+      repository(owner: $owner, name: $repo) {
+        pullRequest(number: $prNumber) {
+          closingIssuesReferences(first: 10) {
+            nodes {
+              number
+              labels(first: 10) {
+                nodes {
+                  name
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  `;
+
+  const graphqlData = JSON.stringify({
+    query,
+    variables: {
+      owner: pr.base.repo.owner.login,
+      repo: pr.base.repo.name,
+      prNumber: pr.number,
+    },
+  });
+
+  const requestOptions = {
+    hostname: "api.github.com",
+    path: "/graphql",
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+      "Content-Length": graphqlData.length,
+      "Authorization": "Bearer " + token,
+      "User-Agent": "Node.js",
+    },
+  };
+
+  // Use the native Node.js request library to make the request
+  let linkedIssues;
+  linkedIssues = await new Promise((resolve, reject) => {
+    const request = https.request(requestOptions, (response) => {
+      let responseBody = "";
+      response.on("data", (chunk) => {
+        responseBody += chunk;
+      });
+      response.on("end", () => {
+        resolve(
+          JSON.parse(responseBody)
+            ?.data
+            ?.repository
+            ?.pullRequest
+            ?.closingIssuesReferences
+            ?.nodes
+        );
+      });
+    });
+
+    request.on("error", (error) => {
+      reject(error);
+    });
+
+    request.write(graphqlData);
+    request.end();
+  });
+
+  if (!linkedIssues || linkedIssues.length === 0) {
+    console.log("No issue linked.");
+    return;
+  }
+
+  // Iterate over linked issues and apply labels to PR
+  for (const issue of linkedIssues) {
+    const labels = issue?.labels?.nodes?.map((label) => label.name);
+
+    if (!labels || labels.length === 0) {
+      console.log(`No labels found on the linked issue #${issue.number}.`);
+      continue;
+    }
+
+    const labelsData = JSON.stringify({
+      labels: labels,
+    });
+
+    const requestOptions = {
+      hostname: "api.github.com",
+      path: `/repos/${pr.base.repo.owner.login}/${pr.base.repo.name}/issues/${pr.number}/labels`,
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        "Content-Length": labelsData.length,
+        "Authorization": "Bearer " + token,
+        "User-Agent": "Node.js",
+      },
+    };
+
+    let labelResult;
+    labelResult = await new Promise((resolve, reject) => {
+      const request = https.request(requestOptions, (response) => {
+        let responseBody = "";
+        response.on("data", (chunk) => {
+          responseBody += chunk;
+        });
+        response.on("data", () => {});
+        response.on("end", () => {
+          resolve(JSON.parse(responseBody));
+        });
+      });
+
+      request.on("error", (error) => {
+        reject(error);
+      });
+
+      request.write(labelsData);
+      request.end();
+    });
+
+    if (labelResult.message) {
+      console.log(`Error labelling PR: ${labelResult.message}`);
+      continue;
+    }
+    
+    console.log(
+      `Applied labels: ${labels.join(", ")} to PR #${
+        pr.number
+      } from linked issue #${issue.number}`
+    );
+  }
+}
+
+// Pass the PR data and GitHub token to the script
+(async () => {
+  if (!process.env.PR_DATA) {
+    console.log("No PR data found.");
+    return;
+  }
+
+  const prData = JSON.parse(process.env.PR_DATA);
+  const token = process.env.GITHUB_TOKEN;
+
+  await applyLabelFromLinkedIssueToPR(prData, token);
+})();

README.md

@@ -350,8 +350,7 @@ We have a list of [help wanted](https://github.com/calcom/cal.com/issues?q=is:is
     <source media="(prefers-color-scheme: dark)" srcset="https://console.algora.io/api/og/cal/bounties.png?p=0&status=open&theme=dark">
     <img alt="Bounties of cal" src="https://console.algora.io/api/og/cal/bounties.png?p=0&status=open&theme=light">
   </picture>
-</a>  
-
+</a>
 
 <!-- CONTRIBUTORS -->
 
@@ -456,12 +455,12 @@ following
 
 1. Open [Zoho API Console](https://api-console.zoho.com/) and sign into your account, or create a new one.
 2. From within the API console page, go to "Applications".
-3. Click "ADD CLIENT" button top right and select "Server-based Applications". 
+3. Click "ADD CLIENT" button top right and select "Server-based Applications".
 4. Fill in any information you want in the "Client Details" tab
-5. Go to tab "Client Secret" tab. 
+5. Go to tab "Client Secret" tab.
 6. Now copy the Client ID and Client Secret to your .env file into the `ZOHOCRM_CLIENT_ID` and `ZOHOCRM_CLIENT_SECRET` fields.
 7. Set the Redirect URL for OAuth `<Cal.com URL>/api/integrations/zohocrm/callback` replacing Cal.com URL with the URI at which your application runs.
-8. In the "Settings" section check the "Multi-DC" option if you wish to use the same OAuth credentials for all data centers. 
+8. In the "Settings" section check the "Multi-DC" option if you wish to use the same OAuth credentials for all data centers.
 9. Click the "Save"/ "UPDATE" button at the bottom footer.
 10. You're good to go. Now you can easily add your ZohoCRM integration in the Cal.com settings.
 

apps/docs/package.json

@@ -11,7 +11,8 @@
     "lint:fix": "eslint . --ext .ts,.js,.tsx,.jsx --fix",
     "lint:report": "eslint . --format json --output-file ../../lint-results/docs.json",
     "start": "PORT=4000 next start",
-    "type-check": "tsc --pretty --noEmit"
+    "type-check": "tsc --pretty --noEmit",
+    "type-check:ci": "tsc-absolute --pretty --noEmit"
   },
   "author": "Cal.com, Inc.",
   "license": "MIT",

apps/storybook/components/VariantsTable.tsx

@@ -1,4 +1,5 @@
-import React, { ReactElement, ReactNode } from "react";
+import type { ReactElement, ReactNode } from "react";
+import React from "react";
 
 import { classNames } from "@calcom/lib";
 
@@ -42,7 +43,7 @@ export function VariantsTable({
         </table>
       </div>
       {!isDark && (
-        <div data-mode="dark">
+        <div data-mode="dark" className="dark">
           <VariantsTable titles={titles} isDark columnMinWidth={columnMinWidth}>
             {children}
           </VariantsTable>

apps/storybook/styles/storybook-styles.css

@@ -193,3 +193,88 @@
 .docs-story {
   padding: 24px !important;
 }
+
+@layer {
+  :root {
+    /* background */
+
+    --cal-bg-emphasis: #E5E7EB;
+    --cal-bg: white;
+    --cal-bg-subtle: #F3F4F6;
+    --cal-bg-muted: #F9FAFB;
+    --cal-bg-inverted: #111827;
+
+    /* background -> components*/
+    --cal-bg-info: #DEE9FC;
+    --cal-bg-success: #E2FBE8;
+    --cal-bg-attention: #FCEED8;
+    --cal-bg-error: #F9E3E2;
+
+
+    /* Borders */
+    --cal-border-emphasis:#9CA3AF;
+    --cal-border: #D1D5DB;
+    --cal-border-subtle:#E5E7EB;
+    --cal-border-muted:#F3F4F6;
+
+    /* Content/Text */
+    --cal-text-emphasis: #111827;
+    --cal-text:#374151;
+    --cal-text-subtle:#6B7280;
+    --cal-text-muted:#9CA3AF;
+    --cal-text-inverted:white;
+
+    /* Content/Text -> components */
+    --cal-text-info:#253985;
+    --cal-text-success:#285231;
+    --cal-text-attention:#73321B;
+    --cal-text-error:#752522;
+
+    /* Brand shinanigans
+      -> These will be computed for the users theme at runtime.
+    */
+    --cal-brand:#111827;
+    --cal-brand-emphasis:#101010;
+  }
+  .dark {
+    /* background */
+
+    --cal-bg-emphasis: #2B2B2B;
+    --cal-bg: #101010;
+    --cal-bg-subtle: #2B2B2B;
+    --cal-bg-muted: #1C1C1C;
+    --cal-bg-inverted: #F3F4F6;
+
+    /* background -> components*/
+    --cal-bg-info: #DEE9FC;
+    --cal-bg-success: #E2FBE8;
+    --cal-bg-attention: #FCEED8;
+    --cal-bg-error: #F9E3E2;
+
+
+    /* Borders */
+    --cal-border-emphasis: #575757;
+    --cal-border: #444444;
+    --cal-border-subtle: #2B2B2B;
+    --cal-border-muted: #1C1C1C;
+
+    /* Content/Text */
+    --cal-text-emphasis: #F3F4F6;
+    --cal-text: #D6D6D6;
+    --cal-text-subtle: #757575;
+    --cal-text-muted: #575757;
+    --cal-text-inverted: #101010;
+
+    /* Content/Text -> components */
+    --cal-text-info: #253985;
+    --cal-text-success: #285231;
+    --cal-text-attention: #73321B;
+    --cal-text-error: #752522;
+
+    /* Brand shenanigans
+      -> These will be computed for the users theme at runtime.
+    */
+    --cal-brand: #111827;
+    --cal-brand-emphasis: #101010;
+  }
+}

apps/web/components/AddToHomescreen.tsx

@@ -29,7 +29,7 @@ export default function AddToHomescreen() {
                   <path d="M35 40H15c-1.7 0-3-1.3-3-3V19c0-1.7 1.3-3 3-3h7v2h-7c-.6 0-1 .4-1 1v18c0 .6.4 1 1 1h20c.6 0 1-.4 1-1V19c0-.6-.4-1-1-1h-7v-2h7c1.7 0 3 1.3 3 3v18c0 1.7-1.3 3-3 3z" />
                 </svg>
               </span>
-              <p className="text-xs font-medium text-white ltr:ml-3 rtl:mr-3">
+              <p className="text-inverted ms-3 text-xs font-medium">
                 <span className="inline">{t("add_to_homescreen")}</span>
               </p>
             </div>
@@ -40,7 +40,7 @@ export default function AddToHomescreen() {
                 type="button"
                 className="-mr-1 flex rounded-md p-2 hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-white">
                 <span className="sr-only">{t("dismiss")}</span>
-                <FiX className="h-6 w-6 text-white" aria-hidden="true" />
+                <FiX className="text-inverted h-6 w-6" aria-hidden="true" />
               </button>
             </div>
           </div>

apps/web/components/AdditionalCalendarSelector.tsx

@@ -1,86 +0,0 @@
-import React from "react";
-import Select from "react-select";
-import type { OptionProps } from "react-select";
-
-import { InstallAppButton } from "@calcom/app-store/components";
-import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { trpc } from "@calcom/trpc/react";
-import type { App } from "@calcom/types/App";
-import { Button } from "@calcom/ui";
-
-import { QueryCell } from "@lib/QueryCell";
-
-interface AdditionalCalendarSelectorProps {
-  isLoading?: boolean;
-}
-
-const ImageOption = (optionProps: OptionProps<{ [key: string]: string; type: App["type"] }>) => {
-  const { data } = optionProps;
-  return (
-    <InstallAppButton
-      type={data.type}
-      render={(installProps) => {
-        return (
-          <Button {...installProps} className="w-full" color="minimal">
-            {/* eslint-disable @next/next/no-img-element */}
-            {data.image && (
-              <img className="float-left mr-3 inline h-5 w-5" src={data.image} alt={data.label} />
-            )}
-            <p>{data.label}</p>
-          </Button>
-        );
-      }}
-    />
-  );
-};
-
-const AdditionalCalendarSelector = ({ isLoading }: AdditionalCalendarSelectorProps): JSX.Element | null => {
-  const { t } = useLocale();
-  const query = trpc.viewer.integrations.useQuery({ variant: "calendar", onlyInstalled: true });
-
-  return (
-    <QueryCell
-      query={query}
-      success={({ data }) => {
-        const options = data.items.map((item) => ({
-          label: item.name,
-          slug: item.slug,
-          image: item.logo,
-          type: item.type,
-        }));
-        return (
-          <Select
-            name="additionalCalendar"
-            placeholder={t("connect_additional_calendar")}
-            options={options}
-            styles={{
-              placeholder: (defaultStyles) => {
-                return {
-                  ...defaultStyles,
-                  color: "#3E3E3E",
-                  marginLeft: "3px",
-                };
-              },
-              control: (defaultStyles) => {
-                return {
-                  ...defaultStyles,
-                  borderRadius: "2px",
-                  "@media only screen and (min-width: 640px)": {
-                    ...(defaultStyles["@media only screen and (min-width: 640px)"] as object),
-                    maxWidth: "320px",
-                  },
-                };
-              },
-            }}
-            isSearchable={false}
-            className="mt-1 mb-2 block w-full min-w-0 flex-1 rounded-none rounded-r-sm border-gray-300 text-sm font-medium text-gray-700"
-            isLoading={isLoading}
-            components={{ Option: ImageOption }}
-          />
-        );
-      }}
-    />
-  );
-};
-
-export default AdditionalCalendarSelector;

apps/web/components/AppListCard.tsx

@@ -63,12 +63,12 @@ export default function AppListCard(props: AppListCardProps) {
   }, []);
 
   return (
-    <div className={`${highlight ? "bg-yellow-100" : ""}`}>
+    <div className={`${highlight ? "dark:bg-muted bg-yellow-100" : ""}`}>
       <div className="flex gap-x-3 px-5 py-4">
         {logo ? <img className="h-10 w-10" src={logo} alt={`${title} logo`} /> : null}
         <div className="flex grow flex-col gap-y-1 truncate">
           <div className="flex items-center gap-x-2">
-            <h3 className="truncate text-sm font-semibold text-gray-900">{title}</h3>
+            <h3 className="text-emphasis truncate text-sm font-semibold">{title}</h3>
             <div className="flex items-center gap-x-2">
               {isDefault && <Badge variant="green">{t("default")}</Badge>}
               {isTemplate && <Badge variant="red">Template</Badge>}

apps/web/components/DestinationCalendarSelector.tsx

@@ -1,137 +0,0 @@
-import classNames from "classnames";
-import React, { useEffect, useState } from "react";
-import Select from "react-select";
-
-import { useLocale } from "@calcom/lib/hooks/useLocale";
-import type { DestinationCalendar } from "@calcom/prisma/client";
-import { trpc } from "@calcom/trpc/react";
-
-interface Props {
-  onChange: (value: { externalId: string; integration: string }) => void;
-  isLoading?: boolean;
-  hidePlaceholder?: boolean;
-  /** The external Id of the connected calendar */
-  value: string | undefined;
-  destinationCalendar?: DestinationCalendar | null;
-}
-
-const DestinationCalendarSelector = ({
-  onChange,
-  isLoading,
-  value,
-  hidePlaceholder,
-  destinationCalendar,
-}: Props): JSX.Element | null => {
-  const { t } = useLocale();
-  const query = trpc.viewer.connectedCalendars.useQuery();
-  const [selectedOption, setSelectedOption] = useState<{ value: string; label: string } | null>(null);
-
-  // Extra styles to show prefixed text in react-select
-  const content = (hidePlaceholder = false) => {
-    if (!hidePlaceholder) {
-      return {
-        alignItems: "center",
-        display: "flex",
-        ":before": {
-          content: `'${t("select_destination_calendar")}:'`,
-          display: "block",
-          marginRight: 8,
-        },
-      };
-    }
-    return {};
-  };
-
-  useEffect(() => {
-    const selected = query.data?.connectedCalendars
-      .map((connected) => connected.calendars ?? [])
-      .flat()
-      .find((cal) => cal.externalId === value);
-
-    if (selected) {
-      setSelectedOption({
-        value: `${selected.integration}:${selected.externalId}`,
-        label: selected.name || "",
-      });
-    }
-  }, [query.data?.connectedCalendars, value]);
-
-  if (!query.data?.connectedCalendars.length) {
-    return null;
-  }
-  const options =
-    query.data.connectedCalendars.map((selectedCalendar) => ({
-      key: selectedCalendar.credentialId,
-      label: `${selectedCalendar.integration.title} (${selectedCalendar.primary?.name})`,
-      options: (selectedCalendar.calendars ?? [])
-        .filter((cal) => cal.readOnly === false)
-        .map((cal) => ({
-          label: cal.name || "",
-          value: `${cal.integration}:${cal.externalId}`,
-        })),
-    })) ?? [];
-  const defaultCalendarSelectedString = destinationCalendar?.externalId
-    ? `(${
-        destinationCalendar.externalId.length > 15
-          ? destinationCalendar.externalId.substring(0, 15) + "..."
-          : destinationCalendar.externalId
-      })`
-    : "";
-  return (
-    <div className="relative" title={`${t("select_destination_calendar")}: ${selectedOption?.label || ""}`}>
-      <Select
-        name="primarySelectedCalendar"
-        placeholder={
-          !hidePlaceholder ? (
-            `${t("select_destination_calendar")}`
-          ) : (
-            <span className="whitespace-nowrap">
-              {t("default_calendar_selected")} {defaultCalendarSelectedString}
-            </span>
-          )
-        }
-        options={options}
-        styles={{
-          placeholder: (styles) => ({ ...styles, ...content(hidePlaceholder) }),
-          singleValue: (styles) => ({ ...styles, ...content(hidePlaceholder) }),
-          control: (defaultStyles) => {
-            return {
-              ...defaultStyles,
-              borderRadius: "6px",
-              "@media only screen and (min-width: 640px)": {
-                ...(defaultStyles["@media only screen and (min-width: 640px)"] as object),
-                width: "100%",
-              },
-            };
-          },
-        }}
-        isSearchable={false}
-        className={classNames(
-          "mt-1 mb-2 block w-full min-w-0 flex-1 rounded-none rounded-r-sm border-gray-300 text-sm",
-          !hidePlaceholder && "font-medium"
-        )}
-        onChange={(option) => {
-          setSelectedOption(option);
-          if (!option) {
-            return;
-          }
-
-          /* Split only the first `:`, since Apple uses the full URL as externalId */
-          const [integration, externalId] = option.value.split(/:(.+)/);
-
-          onChange({
-            integration,
-            externalId,
-          });
-        }}
-        isLoading={isLoading}
-        value={selectedOption}
-        components={{
-          IndicatorSeparator: () => null,
-        }}
-      />
-    </div>
-  );
-};
-
-export default DestinationCalendarSelector;

apps/web/components/Embed.tsx

@@ -1,4 +1,4 @@
-import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@radix-ui/react-collapsible";
+import { Collapsible, CollapsibleContent } from "@radix-ui/react-collapsible";
 import classNames from "classnames";
 import type { NextRouter } from "next/router";
 import { useRouter } from "next/router";
@@ -22,7 +22,7 @@ import {
   TextField,
   ColorPicker,
 } from "@calcom/ui";
-import { FiCode, FiTrello, FiSun, FiArrowLeft, FiChevronRight } from "@calcom/ui/components/icon";
+import { FiCode, FiTrello, FiSun, FiArrowLeft } from "@calcom/ui/components/icon";
 
 import Select from "@components/ui/form/Select";
 
@@ -167,7 +167,7 @@ const Codes: Record<string, Record<string, (...args: any[]) => string>> = {
       const height = getDimension(previewState.inline.height);
       return code`
 import Cal, { getCalApi } from "@calcom/embed-react";
-
+import { useEffect } from "react";
 function MyComponent() {
   useEffect(()=>{
     (async function () {
@@ -187,12 +187,12 @@ function MyComponent() {
     }) => {
       return code`
 import Cal, { getCalApi } from "@calcom/embed-react";
-
+import { useEffect } from "react";
 function MyComponent() {
   useEffect(()=>{
     (async function () {
       const cal = await getCalApi();
-      Cal("floatingButton", ${floatingButtonArg});
+      cal("floatingButton", ${floatingButtonArg});
       ${uiInstructionCode}
     })();
   }, [])
@@ -201,7 +201,7 @@ function MyComponent() {
     "element-click": ({ calLink, uiInstructionCode }: { calLink: string; uiInstructionCode: string }) => {
       return code`
 import Cal, { getCalApi } from "@calcom/embed-react";
-
+import { useEffect } from "react";
 function MyComponent() {
   useEffect(()=>{
     (async function () {
@@ -313,7 +313,7 @@ const embeds: {
 }[] = [
   {
     title: "Inline Embed",
-    subtitle: "Loads your Cal scheduling page directly inline with your other website content",
+    subtitle: "Loads your event type directly inline with your other website content.",
     type: "inline",
     illustration: (
       <svg
@@ -509,7 +509,7 @@ const tabs = [
       return (
         <>
           <div>
-            <small className="flex py-4 text-gray-500">
+            <small className="text-subtle flex py-4">
               {t("place_where_cal_widget_appear", { appName: APP_NAME })}
             </small>
           </div>
@@ -517,7 +517,7 @@ const tabs = [
             data-testid="embed-code"
             ref={ref as typeof ref & MutableRefObject<HTMLTextAreaElement>}
             name="embed-code"
-            className="h-[calc(100%-50px)] font-mono"
+            className="text-default bg-default selection:bg-subtle h-[calc(100%-50px)] font-mono"
             style={{ resize: "none", overflow: "auto" }}
             readOnly
             value={
@@ -534,7 +534,7 @@ ${getEmbedTypeSpecificString({ embedFramework: "HTML", embedType, calLink, previ
 <!-- Cal ${embedType} embed code ends -->`
             }
           />
-          <p className="hidden text-sm text-gray-500">
+          <p className="text-subtle hidden text-sm">
             {t(
               "Need help? See our guides for embedding Cal on Wix, Squarespace, or WordPress, check our common questions, or explore advanced embed options."
             )}
@@ -561,12 +561,12 @@ ${getEmbedTypeSpecificString({ embedFramework: "HTML", embedType, calLink, previ
       }
       return (
         <>
-          <small className="flex py-4 text-gray-500">{t("create_update_react_component")}</small>
+          <small className="text-subtle flex py-4">{t("create_update_react_component")}</small>
           <TextArea
             data-testid="embed-react"
             ref={ref as typeof ref & MutableRefObject<HTMLTextAreaElement>}
             name="embed-react"
-            className="h-[calc(100%-50px)] font-mono"
+            className="text-default bg-default selection:bg-subtle h-[calc(100%-50px)] font-mono"
             readOnly
             style={{ resize: "none", overflow: "auto" }}
             value={`/* First make sure that you have installed the package */
@@ -622,7 +622,7 @@ Cal("init", {origin:"${WEBAPP_URL}"});
 const ThemeSelectControl = ({ children, ...props }: ControlProps<{ value: Theme; label: string }, false>) => {
   return (
     <components.Control {...props}>
-      <FiSun className="ml-2 h-4 w-4 text-gray-500" />
+      <FiSun className="text-subtle ml-2 h-4 w-4" />
       {children}
     </components.Control>
   );
@@ -634,17 +634,17 @@ const ChooseEmbedTypesDialogContent = () => {
   return (
     <DialogContent className="rounded-lg p-10" type="creation" size="lg">
       <div className="mb-2">
-        <h3 className="mb-2 text-2xl font-bold leading-none text-gray-900" id="modal-title">
+        <h3 className="font-cal text-emphasis mb-2 text-2xl font-bold leading-none" id="modal-title">
           {t("how_you_want_add_cal_site", { appName: APP_NAME })}
         </h3>
         <div>
-          <p className="text-sm text-gray-500">{t("choose_ways_put_cal_site", { appName: APP_NAME })}</p>
+          <p className="text-subtle text-sm">{t("choose_ways_put_cal_site", { appName: APP_NAME })}</p>
         </div>
       </div>
-      <div className="flex items-start">
+      <div className="items-start space-y-2 md:flex md:space-y-0">
         {embeds.map((embed, index) => (
           <button
-            className="hover:border-primary-900 w-1/3 rounded-md border border-gray-200 bg-gray-50 p-6 text-left hover:rounded-md hover:bg-gray-100 ltr:mr-4 ltr:last:mr-0 rtl:ml-4 rtl:last:ml-0"
+            className="hover:bg-subtle bg-muted w-full rounded-md border border-transparent p-6 text-left hover:rounded-md ltr:mr-4 ltr:last:mr-0 rtl:ml-4 rtl:last:ml-0 lg:w-1/3"
             key={index}
             data-testid={embed.type}
             onClick={() => {
@@ -652,11 +652,11 @@ const ChooseEmbedTypesDialogContent = () => {
                 embedType: embed.type,
               });
             }}>
-            <div className="order-none box-border flex-none rounded-md border border-solid bg-white">
+            <div className="bg-default order-none box-border flex-none rounded-md border border-solid dark:bg-transparent dark:invert">
               {embed.illustration}
             </div>
-            <div className="mt-4 font-semibold leading-none text-gray-900">{embed.title}</div>
-            <p className="mt-2 text-sm text-gray-500">{embed.subtitle}</p>
+            <div className="text-emphasis mt-4 font-semibold">{embed.title}</div>
+            <p className="text-subtle mt-2 text-sm">{embed.subtitle}</p>
           </button>
         ))}
       </div>
@@ -798,7 +798,7 @@ const EmbedTypeCodeAndPreviewDialogContent = ({
   }
 
   const ThemeOptions = [
-    { value: Theme.auto, label: "Auto Theme" },
+    { value: Theme.auto, label: "Auto" },
     { value: Theme.dark, label: "Dark Theme" },
     { value: Theme.light, label: "Light Theme" },
   ];
@@ -815,11 +815,18 @@ const EmbedTypeCodeAndPreviewDialogContent = ({
   ];
 
   return (
-    <DialogContent ref={dialogContentRef} size="xl" className="p-0.5" type="creation">
+    <DialogContent
+      ref={dialogContentRef}
+      className="rounded-lg p-0.5 sm:max-w-[80rem]"
+      enableOverflow
+      type="creation">
       <div className="flex">
-        <div className="flex w-1/3 flex-col bg-gray-50 p-8">
-          <h3 className="mb-2 flex text-xl font-bold leading-6 text-gray-900" id="modal-title">
+        <div className="bg-muted flex w-1/3 flex-col p-8">
+          <h3
+            className="text-emphasis mb-2.5 flex items-center text-xl font-semibold leading-5"
+            id="modal-title">
             <button
+              className="h-6 w-6"
               onClick={() => {
                 removeQueryParams(router, ["embedType", "embedTabName"]);
               }}>
@@ -827,55 +834,43 @@ const EmbedTypeCodeAndPreviewDialogContent = ({
             </button>
             {embed.title}
           </h3>
-          <hr className={classNames("mt-4", embedType === "element-click" ? "hidden" : "")} />
-          <div className="flex flex-col overflow-y-auto">
-            <div className={classNames("mt-4 font-medium", embedType === "element-click" ? "hidden" : "")}>
+          <h4 className="text-emphasis mb-6 text-sm font-normal">{embed.subtitle}</h4>
+          <div className="flex flex-col">
+            <div className={classNames("font-medium", embedType === "element-click" ? "hidden" : "")}>
               <Collapsible
                 open={isEmbedCustomizationOpen}
                 onOpenChange={() => setIsEmbedCustomizationOpen((val) => !val)}>
-                <CollapsibleTrigger
-                  type="button"
-                  className="flex w-full items-center text-base font-medium text-gray-900">
-                  <div>
-                    {embedType === "inline"
-                      ? "Inline Embed Customization"
-                      : embedType === "floating-popup"
-                      ? "Floating Popup Customization"
-                      : "Element Click Customization"}
-                  </div>
-                  <FiChevronRight
-                    className={`${
-                      isEmbedCustomizationOpen ? "rotate-90 transform" : ""
-                    } ml-auto h-5 w-5 text-gray-500`}
-                  />
-                </CollapsibleTrigger>
                 <CollapsibleContent className="text-sm">
-                  <div className={classNames("mt-6", embedType === "inline" ? "block" : "hidden")}>
+                  <div className={classNames(embedType === "inline" ? "block" : "hidden")}>
                     {/*TODO: Add Auto/Fixed toggle from Figma */}
-                    <div className="text-sm">Embed Window Sizing</div>
-                    <div className="justify-left flex items-center">
-                      <TextField
-                        labelProps={{ className: "hidden" }}
-                        required
-                        value={previewState.inline.width}
-                        onChange={(e) => {
-                          setPreviewState((previewState) => {
-                            const width = e.target.value || "100%";
+                    <div className="text-default mb-[9px] text-sm">Window sizing</div>
+                    <div className="justify-left flex items-center !font-normal">
+                      <div className="mr-[9px]">
+                        <TextField
+                          labelProps={{ className: "hidden" }}
+                          className="focus:ring-offset-0"
+                          required
+                          value={previewState.inline.width}
+                          onChange={(e) => {
+                            setPreviewState((previewState) => {
+                              const width = e.target.value || "100%";
+
+                              return {
+                                ...previewState,
+                                inline: {
+                                  ...previewState.inline,
+                                  width,
+                                },
+                              };
+                            });
+                          }}
+                          addOnLeading={<>W</>}
+                        />
+                      </div>
 
-                            return {
-                              ...previewState,
-                              inline: {
-                                ...previewState.inline,
-                                width,
-                              },
-                            };
-                          });
-                        }}
-                        addOnLeading={<>W</>}
-                      />
-                      <span className="p-2">×</span>
                       <TextField
                         labelProps={{ className: "hidden" }}
+                        className="focus:ring-offset-0"
                         value={previewState.inline.height}
                         required
                         onChange={(e) => {
@@ -898,7 +893,7 @@ const EmbedTypeCodeAndPreviewDialogContent = ({
                   <div
                     className={classNames(
                       "mt-4 items-center justify-between",
-                      embedType === "floating-popup" ? "" : "hidden"
+                      embedType === "floating-popup" ? "text-emphasis" : "hidden"
                     )}>
                     <div className="mb-2 text-sm">Button Text</div>
                     {/* Default Values should come from preview iframe */}
@@ -922,7 +917,9 @@ const EmbedTypeCodeAndPreviewDialogContent = ({
                   <div
                     className={classNames(
                       "mt-4 flex items-center justify-start",
-                      embedType === "floating-popup" ? "space-x-2 rtl:space-x-reverse" : "hidden"
+                      embedType === "floating-popup"
+                        ? "text-emphasis space-x-2 rtl:space-x-reverse"
+                        : "hidden"
                     )}>
                     <Switch
                       defaultChecked={true}
@@ -938,12 +935,12 @@ const EmbedTypeCodeAndPreviewDialogContent = ({
                         });
                       }}
                     />
-                    <div className="text-sm">Display Calendar Icon Button</div>
+                    <div className="text-default text-sm">Display Calendar Icon Button</div>
                   </div>
                   <div
                     className={classNames(
                       "mt-4 items-center justify-between",
-                      embedType === "floating-popup" ? "" : "hidden"
+                      embedType === "floating-popup" ? "text-emphasis" : "hidden"
                     )}>
                     <div className="mb-2">Position of Button</div>
                     <Select
@@ -962,7 +959,11 @@ const EmbedTypeCodeAndPreviewDialogContent = ({
                       options={FloatingPopupPositionOptions}
                     />
                   </div>
-                  <div className={classNames("mt-4", embedType === "floating-popup" ? "" : "hidden")}>
+                  <div
+                    className={classNames(
+                      "mt-4",
+                      embedType === "floating-popup" ? "text-emphasis" : "hidden"
+                    )}>
                     <div>Button Color</div>
                     <div className="w-full">
                       <ColorPicker
@@ -983,7 +984,11 @@ const EmbedTypeCodeAndPreviewDialogContent = ({
                       />
                     </div>
                   </div>
-                  <div className={classNames("mt-4", embedType === "floating-popup" ? "" : "hidden")}>
+                  <div
+                    className={classNames(
+                      "mt-4",
+                      embedType === "floating-popup" ? "text-emphasis" : "hidden"
+                    )}>
                     <div>Text Color</div>
                     <div className="w-full">
                       <ColorPicker
@@ -1007,22 +1012,13 @@ const EmbedTypeCodeAndPreviewDialogContent = ({
                 </CollapsibleContent>
               </Collapsible>
             </div>
-            <hr className="mt-4" />
-            <div className="mt-4 font-medium">
+            <div className="font-medium">
               <Collapsible
                 open={isBookingCustomizationOpen}
                 onOpenChange={() => setIsBookingCustomizationOpen((val) => !val)}>
-                <CollapsibleTrigger className="flex w-full" type="button">
-                  <div className="text-base  font-medium text-gray-900">Cal Booking Customization</div>
-                  <FiChevronRight
-                    className={`${
-                      isBookingCustomizationOpen ? "rotate-90 transform" : ""
-                    } ml-auto h-5 w-5 text-gray-500`}
-                  />
-                </CollapsibleTrigger>
                 <CollapsibleContent>
                   <div className="mt-6 text-sm">
-                    <div className="mb-4 flex items-center justify-start space-x-2 rtl:space-x-reverse">
+                    <div className="mb-6 flex items-center justify-start space-x-2 rtl:space-x-reverse">
                       <Switch
                         checked={previewState.hideEventTypeDetails}
                         onCheckedChange={(checked) => {
@@ -1034,15 +1030,40 @@ const EmbedTypeCodeAndPreviewDialogContent = ({
                           });
                         }}
                       />
-                      <div className="text-sm">{t("hide_eventtype_details")}</div>
+                      <div className="text-default text-sm">{t("hide_eventtype_details")}</div>
                     </div>
-                    <Label className="">
+                    {[
+                      { name: "brandColor", title: "Brand Color" },
+                      // { name: "lightColor", title: "Light Color" },
+                      // { name: "lighterColor", title: "Lighter Color" },
+                      // { name: "lightestColor", title: "Lightest Color" },
+                      // { name: "highlightColor", title: "Highlight Color" },
+                      // { name: "medianColor", title: "Median Color" },
+                    ].map((palette) => (
+                      <Label key={palette.name} className="mb-6">
+                        <div className="mb-2">{palette.title}</div>
+                        <div className="w-full">
+                          <ColorPicker
+                            popoverAlign="start"
+                            container={dialogContentRef?.current ?? undefined}
+                            defaultValue="#000000"
+                            onChange={(color) => {
+                              addToPalette({
+                                [palette.name as keyof (typeof previewState)["palette"]]: color,
+                              });
+                            }}
+                          />
+                        </div>
+                      </Label>
+                    ))}
+                    <Label>
                       <div className="mb-2">Theme</div>
                       <Select
                         className="w-full"
                         defaultValue={ThemeOptions[0]}
                         components={{
                           Control: ThemeSelectControl,
+                          IndicatorSeparator: () => null,
                         }}
                         onChange={(option) => {
                           if (!option) {
@@ -1058,30 +1079,6 @@ const EmbedTypeCodeAndPreviewDialogContent = ({
                         options={ThemeOptions}
                       />
                     </Label>
-                    {[
-                      { name: "brandColor", title: "Brand Color" },
-                      // { name: "lightColor", title: "Light Color" },
-                      // { name: "lighterColor", title: "Lighter Color" },
-                      // { name: "lightestColor", title: "Lightest Color" },
-                      // { name: "highlightColor", title: "Highlight Color" },
-                      // { name: "medianColor", title: "Median Color" },
-                    ].map((palette) => (
-                      <Label key={palette.name} className="pb-4">
-                        <div className="mb-2 pt-2">{palette.title}</div>
-                        <div className="w-full">
-                          <ColorPicker
-                            popoverAlign="start"
-                            container={dialogContentRef?.current ?? undefined}
-                            defaultValue="#000000"
-                            onChange={(color) => {
-                              addToPalette({
-                                [palette.name as keyof (typeof previewState)["palette"]]: color,
-                              });
-                            }}
-                          />
-                        </div>
-                      </Label>
-                    ))}
                   </div>
                 </CollapsibleContent>
               </Collapsible>

apps/web/components/ImageUploader.tsx

@@ -123,7 +123,7 @@ export default function ImageUploader({
       <DialogContent>
         <div className="mb-4 sm:flex sm:items-start">
           <div className="mt-3 text-center sm:mt-0 sm:text-left">
-            <h3 className="font-cal text-lg leading-6 text-gray-900" id="modal-title">
+            <h3 className="font-cal text-emphasis text-lg leading-6" id="modal-title">
               {t("upload_target", { target })}
             </h3>
           </div>
@@ -131,9 +131,9 @@ export default function ImageUploader({
         <div className="mb-4">
           <div className="cropper mt-6 flex flex-col items-center justify-center p-8">
             {!result && (
-              <div className="flex h-20 max-h-20 w-20 items-center justify-start rounded-full bg-gray-50">
+              <div className="bg-muted flex h-20 max-h-20 w-20 items-center justify-start rounded-full">
                 {!imageSrc && (
-                  <p className="w-full text-center text-sm text-white sm:text-xs">
+                  <p className="text-inverted w-full text-center text-sm sm:text-xs">
                     {t("no_target", { target })}
                   </p>
                 )}
@@ -144,7 +144,7 @@ export default function ImageUploader({
               </div>
             )}
             {result && <CropContainer imageSrc={result as string} onCropComplete={setCroppedAreaPixels} />}
-            <label className="mt-8 rounded-sm border border-gray-300 bg-white px-3 py-1 text-xs font-medium leading-4 text-gray-700 hover:bg-gray-50 hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-gray-900 focus:ring-offset-1 dark:border-gray-800 dark:bg-transparent dark:text-white dark:hover:bg-gray-900">
+            <label className="border-default bg-default hover:bg-mutedover:text-emphasis dark:hover:bg-inverted text-default dark:text-inverted focus:ring-empthasis mt-8 rounded-sm border px-3 py-1 text-xs font-medium leading-4 focus:outline-none focus:ring-2 focus:ring-offset-1 dark:border-gray-800 dark:bg-transparent">
               <input
                 onInput={onInputFile}
                 type="file"

apps/web/components/NavTabs.tsx

@@ -1,5 +1,5 @@
 import { AdminRequired } from "components/ui/AdminRequired";
-import noop from "lodash/noop";
+import { noop } from "lodash";
 import type { LinkProps } from "next/link";
 import Link from "next/link";
 import { useRouter } from "next/router";
@@ -69,8 +69,8 @@ const NavTabs: FC<NavTabProps> = ({ tabs, linkProps, ...props }) => {
                   onClick={onClick}
                   className={classNames(
                     isCurrent
-                      ? "border-gray-900 text-gray-900"
-                      : "border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700",
+                      ? "text-emphasis border-gray-900"
+                      : "hover:border-default hover:text-default text-subtle border-transparent",
                     "group inline-flex items-center border-b-2 py-4 px-1 text-sm font-medium",
                     className
                   )}
@@ -78,7 +78,7 @@ const NavTabs: FC<NavTabProps> = ({ tabs, linkProps, ...props }) => {
                   {tab.icon && (
                     <tab.icon
                       className={classNames(
-                        isCurrent ? "text-gray-900" : "text-gray-400 group-hover:text-gray-500",
+                        isCurrent ? "text-emphasis" : "group-hover:text-subtle text-muted",
                         "-ml-0.5 hidden h-4 w-4 ltr:mr-2 rtl:ml-2 sm:inline-block"
                       )}
                       aria-hidden="true"
@@ -91,7 +91,7 @@ const NavTabs: FC<NavTabProps> = ({ tabs, linkProps, ...props }) => {
           );
         })}
       </nav>
-      <hr />
+      <hr className="border-subtle" />
     </>
   );
 };

apps/web/components/apps/AdditionalCalendarSelector.tsx

@@ -1,10 +1,14 @@
-import type { OptionProps } from "react-select";
-
 import { InstallAppButton } from "@calcom/app-store/components";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
-import type { App } from "@calcom/types/App";
-import { Button, Select } from "@calcom/ui";
+import {
+  Button,
+  Dropdown,
+  DropdownMenuContent,
+  DropdownMenuTrigger,
+  DropdownMenuItem,
+  DropdownItem,
+} from "@calcom/ui";
 import { FiPlus } from "@calcom/ui/components/icon";
 
 import { QueryCell } from "@lib/QueryCell";
@@ -13,31 +17,6 @@ interface AdditionalCalendarSelectorProps {
   isLoading?: boolean;
 }
 
-const ImageOption = (optionProps: OptionProps<{ [key: string]: string; type: App["type"] }>) => {
-  const { t } = useLocale();
-  const { data } = optionProps;
-  return data.slug !== "add-new" ? (
-    <InstallAppButton
-      type={data.type}
-      render={(installProps) => {
-        return (
-          <Button {...installProps} className="flex w-full align-top" color="minimal">
-            {data.image && (
-              <img className="float-left mr-3 inline h-5 w-5" src={data.image} alt={data.label} />
-            )}
-            <p className="text-left">{`${t("add")} ${data.label}`}</p>
-          </Button>
-        );
-      }}
-    />
-  ) : (
-    <Button className="w-full" color="minimal" href="/apps/categories/calendar">
-      <FiPlus className="text-color mr-3 ml-1 h-4 w-4" />
-      <p>{t("install_new_calendar_app")}</p>
-    </Button>
-  );
-};
-
 const AdditionalCalendarSelector = ({ isLoading }: AdditionalCalendarSelectorProps): JSX.Element | null => {
   const { t } = useLocale();
   const query = trpc.viewer.integrations.useQuery({ variant: "calendar", onlyInstalled: true });
@@ -59,51 +38,39 @@ const AdditionalCalendarSelector = ({ isLoading }: AdditionalCalendarSelectorPro
           type: "new_other",
         });
         return (
-          <Select
-            name="additionalCalendar"
-            placeholder={
-              <Button StartIcon={FiPlus} color="secondary">
+          <Dropdown modal={false}>
+            <DropdownMenuTrigger asChild>
+              <Button StartIcon={FiPlus} color="secondary" {...(isLoading && { loading: isLoading })}>
                 {t("add")}
               </Button>
-            }
-            options={options}
-            isSearchable={false}
-            isLoading={isLoading}
-            components={{ Option: ImageOption }}
-            styles={{
-              menu: (defaultStyles) => ({
-                ...defaultStyles,
-                "@media only screen and (max-width: 640px)": {
-                  left: "0",
-                },
-                width: "max-content",
-                right: "0",
-              }),
-              indicatorSeparator: (defaultStyles) => ({
-                ...defaultStyles,
-                display: "none",
-              }),
-              control: (defaultStyles) => ({
-                ...defaultStyles,
-                padding: "0",
-                border: "0",
-                borderRadius: "6px",
-                minHeight: "auto",
-              }),
-              dropdownIndicator: (defaultStyles) => ({
-                ...defaultStyles,
-                display: "none",
-              }),
-              valueContainer: (defaultStyles) => ({
-                ...defaultStyles,
-                padding: "0",
-              }),
-              placeholder: (defaultStyles) => ({
-                ...defaultStyles,
-                margin: "0",
-              }),
-            }}
-          />
+            </DropdownMenuTrigger>
+            <DropdownMenuContent>
+              {options.map((data) => (
+                <DropdownMenuItem key={data.slug} className="focus:outline-none">
+                  {data.slug === "add-new" ? (
+                    <DropdownItem StartIcon={FiPlus} color="minimal" href="/apps/categories/calendar">
+                      {t("install_new_calendar_app")}
+                    </DropdownItem>
+                  ) : (
+                    <InstallAppButton
+                      type={data.type}
+                      render={(installProps) => {
+                        const props = { ...installProps } as any;
+                        return (
+                          <DropdownItem {...props} color="minimal" type="button">
+                            <span className="flex items-center gap-x-2">
+                              {data.image && <img className="h-5 w-5" src={data.image} alt={data.label} />}
+                              {`${t("add")} ${data.label}`}
+                            </span>
+                          </DropdownItem>
+                        );
+                      }}
+                    />
+                  )}
+                </DropdownMenuItem>
+              ))}
+            </DropdownMenuContent>
+          </Dropdown>
         );
       }}
     />

apps/web/components/apps/App.tsx

@@ -96,7 +96,7 @@ const Component = ({
   return (
     <div className="relative flex-1 flex-col items-start justify-start px-4 md:flex md:px-8 lg:flex-row lg:px-0">
       {hasDescriptionItems && (
-        <div className="align-center mb-4 -ml-4 -mr-4 flex min-h-[450px] w-auto basis-3/5 snap-x snap-mandatory flex-row overflow-auto whitespace-nowrap bg-gray-100 p-4  md:mb-8 md:-ml-8 md:-mr-8 md:p-8 lg:mx-0 lg:mb-0 lg:max-w-2xl lg:flex-col lg:justify-center lg:rounded-md">
+        <div className="align-center bg-subtle mb-4 -ml-4 -mr-4 flex min-h-[450px] w-auto basis-3/5 snap-x snap-mandatory flex-row overflow-auto whitespace-nowrap p-4  md:mb-8 md:-ml-8 md:-mr-8 md:p-8 lg:mx-0 lg:mb-0 lg:max-w-2xl lg:flex-col lg:justify-center lg:rounded-md">
           {descriptionItems ? (
             descriptionItems.map((descriptionItem, index) =>
               typeof descriptionItem === "object" ? (
@@ -127,13 +127,17 @@ const Component = ({
         <div className="mb-8 flex pt-4">
           <header>
             <div className="mb-4 flex items-center">
-              <img className="min-h-16 min-w-16 h-16 w-16" src={logo} alt={name} />
-              <h1 className="font-cal ml-4 text-3xl text-gray-900">{name}</h1>
+              <img
+                className={classNames(logo.includes("-dark") && "dark:invert", "min-h-16 min-w-16 h-16 w-16")}
+                src={logo}
+                alt={name}
+              />
+              <h1 className="font-cal text-emphasis ml-4 text-3xl">{name}</h1>
             </div>
-            <h2 className="text-sm font-medium text-gray-600">
+            <h2 className="text-default text-sm font-medium">
               <Link
                 href={`categories/${categories[0]}`}
-                className="rounded-md bg-gray-100 p-1 text-xs capitalize text-gray-800">
+                className="bg-subtle text-emphasis rounded-md p-1 text-xs capitalize">
                 {categories[0]}
               </Link>{" "}
               • {t("published_by", { author })}
@@ -243,9 +247,11 @@ const Component = ({
           </span>
         )}
 
-        <div className="prose-sm prose mt-8">{body}</div>
-        <h4 className="mt-8 font-semibold text-gray-900 ">{t("pricing")}</h4>
-        <span>
+        <div className="prose-sm prose prose-headings:text-emphasis prose-code:text-default prose-strong:text-default text-default mt-8">
+          {body}
+        </div>
+        <h4 className="text-emphasis mt-8 font-semibold ">{t("pricing")}</h4>
+        <span className="text-default">
           {price === 0 ? (
             t("free_to_use_apps")
           ) : (
@@ -260,16 +266,16 @@ const Component = ({
           )}
         </span>
 
-        <h4 className="mt-8 mb-2 font-semibold text-gray-900 ">{t("learn_more")}</h4>
+        <h4 className="text-emphasis mt-8 mb-2 font-semibold ">{t("learn_more")}</h4>
         <ul className="prose-sm -ml-1 -mr-1 leading-5">
           {docs && (
             <li>
               <a
                 target="_blank"
                 rel="noreferrer"
-                className="text-sm font-normal text-black no-underline hover:underline"
+                className="text-emphasis text-sm font-normal no-underline hover:underline"
                 href={docs}>
-                <FiBookOpen className="mr-1 -mt-1 inline h-4 w-4 text-gray-500" />
+                <FiBookOpen className="text-subtle mr-1 -mt-1 inline h-4 w-4" />
                 {t("documentation")}
               </a>
             </li>
@@ -279,9 +285,9 @@ const Component = ({
               <a
                 target="_blank"
                 rel="noreferrer"
-                className="font-normal text-black no-underline hover:underline"
+                className="text-emphasis font-normal no-underline hover:underline"
                 href={website}>
-                <FiExternalLink className="mr-1 -mt-px inline h-4 w-4 text-gray-500" />
+                <FiExternalLink className="text-subtle mr-1 -mt-px inline h-4 w-4" />
                 {website.replace("https://", "")}
               </a>
             </li>
@@ -291,9 +297,9 @@ const Component = ({
               <a
                 target="_blank"
                 rel="noreferrer"
-                className="font-normal text-black no-underline hover:underline"
+                className="text-emphasis font-normal no-underline hover:underline"
                 href={"mailto:" + email}>
-                <FiMail className="mr-1 -mt-px inline h-4 w-4 text-gray-500" />
+                <FiMail className="text-subtle mr-1 -mt-px inline h-4 w-4" />
 
                 {email}
               </a>
@@ -304,9 +310,9 @@ const Component = ({
               <a
                 target="_blank"
                 rel="noreferrer"
-                className="font-normal text-black no-underline hover:underline"
+                className="text-emphasis font-normal no-underline hover:underline"
                 href={tos}>
-                <FiFile className="mr-1 -mt-px inline h-4 w-4 text-gray-500" />
+                <FiFile className="text-subtle mr-1 -mt-px inline h-4 w-4" />
                 {t("terms_of_service")}
               </a>
             </li>
@@ -316,16 +322,16 @@ const Component = ({
               <a
                 target="_blank"
                 rel="noreferrer"
-                className="font-normal text-black no-underline hover:underline"
+                className="text-emphasis font-normal no-underline hover:underline"
                 href={privacy}>
-                <FiShield className="mr-1 -mt-px inline h-4 w-4 text-gray-500" />
+                <FiShield className="text-subtle mr-1 -mt-px inline h-4 w-4" />
                 {t("privacy_policy")}
               </a>
             </li>
           )}
         </ul>
-        <hr className="my-8" />
-        <span className="leading-1 block text-xs text-gray-500">
+        <hr className="border-subtle my-8 border" />
+        <span className="leading-1 text-subtle block text-xs">
           {t("every_app_published", { appName: APP_NAME, companyName: COMPANY_NAME })}
         </span>
         <a className="mt-2 block text-xs text-red-500" href={`mailto:${SUPPORT_MAIL_ADDRESS}`}>

apps/web/components/apps/CalendarListContainer.tsx

@@ -99,7 +99,7 @@ function CalendarSwitch(props: {
         }}
       />
       {!!props.destination && (
-        <span className="ml-8 inline-flex items-center gap-1 rounded-md bg-gray-100 px-2 py-1 text-sm font-normal text-gray-800 sm:ml-4">
+        <span className="bg-subtle text-default ml-8 inline-flex items-center gap-1 rounded-md px-2 py-1 text-sm font-normal sm:ml-4">
           <FiArrowLeft className="h-4 w-4" />
           {t("adding_events_to")}
         </span>
@@ -177,14 +177,14 @@ function ConnectedCalendarsList(props: Props) {
                           credentialId={item.credentialId}
                           trashIcon
                           onSuccess={props.onChanged}
-                          buttonProps={{ className: "border border-gray-300" }}
+                          buttonProps={{ className: "border border-default" }}
                         />
                       </div>
                     }>
-                    <div className="border-t border-gray-200">
+                    <div className="border-subtle border-t">
                       {!fromOnboarding && (
                         <>
-                          <p className="px-5 pt-4 text-sm text-gray-500">{t("toggle_calendars_conflict")}</p>
+                          <p className="text-subtle px-5 pt-4 text-sm">{t("toggle_calendars_conflict")}</p>
                           <ul className="space-y-2 px-5 py-4">
                             {item.calendars.map((cal) => (
                               <CalendarSwitch
@@ -218,7 +218,7 @@ function ConnectedCalendarsList(props: Props) {
                           credentialId={item.credentialId}
                           trashIcon
                           onSuccess={props.onChanged}
-                          buttonProps={{ className: "border border-gray-300" }}
+                          buttonProps={{ className: "border border-default" }}
                         />
                       </div>
                     }
@@ -279,18 +279,18 @@ export function CalendarListContainer(props: { heading?: boolean; fromOnboarding
                         </div>
                       }
                     />
-                    <div className="flex justify-between rounded-md border border-gray-200 bg-gray-50 p-4">
+                    <div className="bg-muted border-subtle flex justify-between rounded-md border p-4">
                       <div className="flex w-full flex-col items-start gap-4 md:flex-row md:items-center">
-                        <div className="relative rounded-md border border-gray-200 bg-white p-1.5">
-                          <FiCalendar className="h-8 w-8" strokeWidth="1" />
+                        <div className="bg-default border-subtle relative rounded-md border p-1.5">
+                          <FiCalendar className="text-default h-8 w-8" strokeWidth="1" />
                           <FiPlus
-                            className="absolute left-4 top-1/2 ml-0.5 mt-[1px] h-2 w-2 text-black"
+                            className="text-emphasis absolute left-4 top-1/2 ml-0.5 mt-[1px] h-2 w-2"
                             strokeWidth="4"
                           />
                         </div>
                         <div className="md:w-6/12">
-                          <h1 className="text-sm font-semibold">{t("create_events_on")}</h1>
-                          <p className="text-sm font-normal">{t("set_calendar")}</p>
+                          <h1 className="text-emphasis text-sm font-semibold">{t("create_events_on")}</h1>
+                          <p className="text-default text-sm font-normal">{t("set_calendar")}</p>
                         </div>
                         <div className="justify-end md:w-6/12">
                           <DestinationCalendarSelector

apps/web/components/apps/DestinationCalendarSelector.tsx

@@ -1,139 +0,0 @@
-import classNames from "classnames";
-import React, { useEffect, useState } from "react";
-import Select from "react-select";
-
-import { useLocale } from "@calcom/lib/hooks/useLocale";
-import type { DestinationCalendar } from "@calcom/prisma/client";
-import { trpc } from "@calcom/trpc/react";
-
-interface Props {
-  onChange: (value: { externalId: string; integration: string }) => void;
-  isLoading?: boolean;
-  hidePlaceholder?: boolean;
-  /** The external Id of the connected calendar */
-  value: string | undefined;
-  destinationCalendar?: DestinationCalendar | null;
-}
-
-const DestinationCalendarSelector = ({
-  onChange,
-  isLoading,
-  value,
-  hidePlaceholder,
-  destinationCalendar,
-}: Props): JSX.Element | null => {
-  const { t } = useLocale();
-  const query = trpc.viewer.connectedCalendars.useQuery();
-  const [selectedOption, setSelectedOption] = useState<{ value: string; label: string } | null>(null);
-
-  // Extra styles to show prefixed text in react-select
-  const content = (hidePlaceholder = false) => {
-    if (!hidePlaceholder) {
-      return {
-        alignItems: "center",
-        display: "flex",
-        ":before": {
-          content: `'${t("select_destination_calendar")}:'`,
-          display: "block",
-          marginRight: 8,
-        },
-      };
-    }
-    return {};
-  };
-
-  useEffect(() => {
-    const selected = query.data?.connectedCalendars
-      .map((connected) => connected.calendars ?? [])
-      .flat()
-      .find((cal) => cal.externalId === value);
-
-    if (selected) {
-      setSelectedOption({
-        value: `${selected.integration}:${selected.externalId}`,
-        label: `${selected.name} (${selected.externalId})` || "",
-      });
-    }
-  }, [query.data?.connectedCalendars, value]);
-
-  if (!query.data?.connectedCalendars.length) {
-    return null;
-  }
-  const options =
-    query.data.connectedCalendars.map((selectedCalendar) => ({
-      key: selectedCalendar.credentialId,
-      label: `${selectedCalendar.integration.title} (${selectedCalendar.primary?.name})`,
-      options: (selectedCalendar.calendars ?? [])
-        .filter((cal) => cal.readOnly === false)
-        .map((cal) => ({
-          label: `${cal.name} (${cal.externalId})` || "",
-          value: `${cal.integration}:${cal.externalId}`,
-        })),
-    })) ?? [];
-  const defaultCalendarSelectedString = destinationCalendar?.externalId
-    ? `(${
-        destinationCalendar.externalId.length > 15
-          ? destinationCalendar.externalId.substring(0, 15) + "..."
-          : destinationCalendar.externalId
-      })`
-    : "";
-  return (
-    <div
-      className="relative flex items-center"
-      title={`${t("select_destination_calendar")}: ${selectedOption?.label || ""}`}>
-      <Select
-        name="primarySelectedCalendar"
-        placeholder={
-          !hidePlaceholder ? (
-            `${t("select_destination_calendar")}`
-          ) : (
-            <span className="whitespace-nowrap">
-              {t("default_calendar_selected")} {defaultCalendarSelectedString}
-            </span>
-          )
-        }
-        options={options}
-        styles={{
-          placeholder: (styles) => ({ ...styles, ...content(hidePlaceholder) }),
-          singleValue: (styles) => ({ ...styles, ...content(hidePlaceholder) }),
-          control: (defaultStyles) => {
-            return {
-              ...defaultStyles,
-              borderRadius: "6px",
-              "@media only screen and (min-width: 640px)": {
-                ...(defaultStyles["@media only screen and (min-width: 640px)"] as object),
-                width: "100%",
-              },
-            };
-          },
-        }}
-        isSearchable={false}
-        className={classNames(
-          "block w-full min-w-0 flex-1 rounded-none rounded-r-sm border-gray-300 text-sm",
-          !hidePlaceholder && "font-medium"
-        )}
-        onChange={(option) => {
-          setSelectedOption(option);
-          if (!option) {
-            return;
-          }
-
-          /* Split only the first `:`, since Apple uses the full URL as externalId */
-          const [integration, externalId] = option.value.split(/:(.+)/);
-
-          onChange({
-            integration,
-            externalId,
-          });
-        }}
-        isLoading={isLoading}
-        value={selectedOption}
-        components={{
-          IndicatorSeparator: () => null,
-        }}
-      />
-    </div>
-  );
-};
-
-export default DestinationCalendarSelector;

apps/web/components/auth/TwoFactor.tsx

@@ -28,7 +28,7 @@ export default function TwoFactor({ center = true }) {
     <div className={center ? "mx-auto !mt-0 max-w-sm" : "!mt-0 max-w-sm"}>
       <Label className="mt-4"> {t("2fa_code")}</Label>
 
-      <p className="mb-4 text-sm text-gray-500">{t("2fa_enabled_instructions")}</p>
+      <p className="text-subtle mb-4 text-sm">{t("2fa_enabled_instructions")}</p>
       <input hidden type="hidden" value={value} {...methods.register("totpCode")} />
       <div className="flex flex-row justify-between">
         <Input

apps/web/components/auth/layouts/AdminLayout.tsx

@@ -26,7 +26,7 @@ export default function AdminLayout({
   const isAppsPage = router.asPath.startsWith("/settings/admin/apps");
   return (
     <SettingsLayout {...rest}>
-      <div className="mx-auto flex max-w-4xl flex-row divide-y divide-gray-200">
+      <div className="divide-subtle mx-auto flex max-w-4xl flex-row divide-y">
         <div className={isAppsPage ? "min-w-0" : "flex flex-1 [&>*]:flex-1"}>
           <ErrorBoundary>{children}</ErrorBoundary>
         </div>

apps/web/components/availability/SkeletonLoader.tsx

@@ -7,7 +7,7 @@ import classNames from "@lib/classNames";
 
 function SkeletonLoader() {
   return (
-    <ul className="animate-pulse divide-y divide-gray-200 rounded-md border border-gray-200 bg-white sm:mx-0 sm:overflow-hidden">
+    <ul className="divide-subtle border-subtle bg-default animate-pulse divide-y rounded-md border sm:mx-0 sm:overflow-hidden">
       <SkeletonItem />
       <SkeletonItem />
       <SkeletonItem />
@@ -20,8 +20,8 @@ export default SkeletonLoader;
 function SkeletonItem() {
   return (
     <li>
-      <div className="flex items-center justify-between py-5 hover:bg-neutral-50 ltr:pl-4 rtl:pr-4 sm:ltr:pl-0 sm:rtl:pr-0">
-        <div className="items-between flex w-full flex-col justify-center hover:bg-neutral-50 sm:px-6">
+      <div className="flex items-center justify-between py-5  ltr:pl-4 rtl:pr-4 sm:ltr:pl-0 sm:rtl:pr-0">
+        <div className="items-between flex w-full flex-col justify-center sm:px-6">
           <SkeletonText className="my-1 h-4 w-32" />
           <SkeletonText className="my-1 h-2 w-24" />
           <SkeletonText className="my-1 h-2 w-40" />
@@ -43,7 +43,7 @@ export const SelectSkeletonLoader = ({ className }: { className?: string }) => {
   return (
     <li
       className={classNames(
-        "group flex w-full items-center justify-between rounded-sm border border-gray-200 px-[10px] py-3",
+        "border-subtle group flex w-full items-center justify-between rounded-sm border px-[10px] py-3",
         className
       )}>
       <div className="flex-grow truncate text-sm">

apps/web/components/booking/AvailableEventLocations.tsx

@@ -8,54 +8,61 @@ import { FiLink } from "@calcom/ui/components/icon";
 
 import type { Props } from "./pages/AvailabilityPage";
 
+const excludeNullValues = (value: unknown) => !!value;
+
 export function AvailableEventLocations({ locations }: { locations: Props["eventType"]["locations"] }) {
   const { t } = useLocale();
 
-  return locations.length ? (
-    <div className="dark:text-darkgray-600 mr-6 flex w-full flex-col space-y-4 break-words text-sm text-gray-600">
-      {locations.map((location, index) => {
-        const eventLocationType = getEventLocationType(location.type);
-        if (!eventLocationType) {
-          // It's possible that the location app got uninstalled
-          return null;
-        }
+  const renderLocations = locations.map((location, index) => {
+    const eventLocationType = getEventLocationType(location.type);
+    if (!eventLocationType) {
+      // It's possible that the location app got uninstalled
+      return null;
+    }
+    if (eventLocationType.variable === "hostDefault") {
+      return null;
+    }
 
-        const translateAbleKeys = [
-          "attendee_in_person",
-          "in_person",
-          "attendee_phone_number",
-          "link_meeting",
-          "organizer_phone_number",
-        ];
+    const translateAbleKeys = [
+      "attendee_in_person",
+      "in_person",
+      "attendee_phone_number",
+      "link_meeting",
+      "organizer_phone_number",
+    ];
 
-        const locationKey = z.string().default("").parse(locationKeyToString(location));
+    const locationKey = z.string().default("").parse(locationKeyToString(location));
+    const translatedLocation = location.type.startsWith("integrations:")
+      ? eventLocationType.label
+      : translateAbleKeys.includes(locationKey)
+      ? t(locationKey)
+      : locationKey;
 
-        const translatedLocation = location.type.startsWith("integrations:")
-          ? eventLocationType.label
-          : translateAbleKeys.includes(locationKey)
-          ? t(locationKey)
-          : locationKey;
-
-        return (
-          <div key={`${location.type}-${index}`} className="flex flex-row items-center text-sm font-medium">
-            {eventLocationType.iconUrl === "/link.svg" ? (
-              <FiLink className="dark:text-darkgray-600 min-h-4 min-w-4 ml-[2px] opacity-70 ltr:mr-[10px] rtl:ml-[10px] dark:opacity-100 " />
-            ) : (
-              <img
-                src={eventLocationType.iconUrl}
-                className={classNames(
-                  "ml-[2px] h-4 w-4 opacity-70 ltr:mr-[10px] rtl:ml-[10px] dark:opacity-100 ",
-                  !eventLocationType.iconUrl?.includes("api") ? "dark:invert-[.65]" : ""
-                )}
-                alt={`${eventLocationType.label} icon`}
-              />
+    return (
+      <div key={`${location.type}-${index}`} className="flex flex-row items-center text-sm font-medium">
+        {eventLocationType.iconUrl === "/link.svg" ? (
+          <FiLink className="text-default min-h-4 min-w-4 ml-[2px] opacity-70 ltr:mr-[10px] rtl:ml-[10px] " />
+        ) : (
+          <img
+            src={eventLocationType.iconUrl}
+            className={classNames(
+              "ml-[2px] h-4 w-4 opacity-70 ltr:mr-[10px] rtl:ml-[10px] dark:opacity-100 ",
+              !eventLocationType.iconUrl?.includes("api") ? "dark:invert-[.65]" : ""
             )}
-            <Tooltip content={translatedLocation}>
-              <p className="line-clamp-1">{translatedLocation}</p>
-            </Tooltip>
-          </div>
-        );
-      })}
+            alt={`${eventLocationType.label} icon`}
+          />
+        )}
+        <Tooltip content={translatedLocation}>
+          <p className="line-clamp-1">{translatedLocation}</p>
+        </Tooltip>
+      </div>
+    );
+  });
+
+  const filteredLocations = renderLocations.filter(excludeNullValues) as JSX.Element[];
+  return filteredLocations.length ? (
+    <div className="text-default mr-6 flex w-full flex-col space-y-4 break-words text-sm">
+      {filteredLocations}
     </div>
   ) : null;
 }

apps/web/components/booking/AvailableTimes.tsx

@@ -66,13 +66,13 @@ const AvailableTimes: FC<AvailableTimesProps> = ({
   return (
     <div ref={slotPickerRef}>
       {!!date ? (
-        <div className="dark:bg-darkgray-100 mt-8 flex h-full w-full flex-col rounded-md px-4 text-center sm:mt-0 sm:p-4 md:-mb-5 md:min-w-[200px] md:p-4 lg:min-w-[300px]">
+        <div className="mt-8 flex h-full w-full flex-col rounded-md px-4 text-center sm:mt-0 sm:p-4 md:-mb-5 md:min-w-[200px] md:p-4 lg:min-w-[300px]">
           <div className="mb-4 flex items-center text-left text-base">
             <div className="mr-4">
-              <span className="text-bookingdarker dark:text-darkgray-800 font-semibold text-gray-900">
+              <span className="text-emphasis font-semibold">
                 {nameOfDay(i18n.language, Number(date.format("d")), "short")}
               </span>
-              <span className="text-bookinglight">
+              <span className="text-subtle">
                 , {date.toDate().toLocaleString(i18n.language, { month: "short" })} {date.format(" D ")}
               </span>
             </div>
@@ -132,7 +132,7 @@ const AvailableTimes: FC<AvailableTimesProps> = ({
                     {seatsPerTimeSlot && slot.attendees && (slotFull || notEnoughSeats) ? (
                       <div
                         className={classNames(
-                          "text-primary-500 dark:bg-darkgray-200 dark:text-darkgray-900 mb-2 block rounded-sm border bg-white py-2 font-medium opacity-25 dark:border-transparent ",
+                          "text-default bg-default border-subtle mb-2 block rounded-sm border py-2 font-medium opacity-25",
                           brand === "#fff" || brand === "#ffffff" ? "" : ""
                         )}>
                         {dayjs(slot.time).tz(timeZone()).format(timeFormat)}
@@ -147,8 +147,7 @@ const AvailableTimes: FC<AvailableTimesProps> = ({
                         href={bookingUrl}
                         prefetch={false}
                         className={classNames(
-                          "hover:bg-brand hover:border-brand hover:text-brandcontrast dark:hover:text-darkmodebrandcontrast",
-                          "dark:bg-darkgray-200 dark:hover:bg-darkmodebrand dark:hover:border-darkmodebrand dark:text-darkgray-800 mb-2 block rounded-md border bg-white py-2 text-sm font-medium dark:border-transparent",
+                          " bg-default dark:bg-muted border-default hover:bg-subtle hover:border-brand-default text-emphasis mb-2 block rounded-md border py-2 text-sm font-medium",
                           brand === "#fff" || brand === "#ffffff" ? "" : ""
                         )}
                         data-testid="time">
@@ -174,7 +173,7 @@ const AvailableTimes: FC<AvailableTimesProps> = ({
 
             {!isLoading && !slots.length && (
               <div className="-mt-4 flex h-full w-full flex-col content-center items-center justify-center">
-                <h1 className="my-6 text-xl text-black dark:text-white">{t("all_booked_today")}</h1>
+                <h1 className="text-emphasis my-6 text-xl">{t("all_booked_today")}</h1>
               </div>
             )}
 

apps/web/components/booking/BookingDescription.tsx

@@ -83,30 +83,25 @@ const BookingDescription: FC<Props> = (props) => {
         size="sm"
         truncateAfter={3}
       />
-      <h2 className="mt-1 mb-2 break-words text-sm font-medium text-gray-600 dark:text-gray-300">
-        {profile.name}
-      </h2>
-      <h1 className="font-cal dark:text-darkgray-900 mb-6 break-words text-2xl font-semibold leading-none text-gray-900">
+      <h2 className="text-default mt-1 mb-2 break-words text-sm font-medium ">{profile.name}</h2>
+      <h1 className="font-cal  text-emphasis mb-6 break-words text-2xl font-semibold leading-none">
         {eventType.title}
       </h1>
-      <div className="dark:text-darkgray-600 flex flex-col space-y-4 text-sm font-medium text-gray-600">
+      <div className=" text-default flex flex-col space-y-4 text-sm font-medium">
         {eventType?.description && (
           <div
             className={classNames(
               "scroll-bar scrollbar-track-w-20 -mx-5 flex max-h-[180px] overflow-y-scroll px-5 ",
-              isBookingPage && "dark:text-darkgray-600 text-sm font-medium text-gray-600"
+              isBookingPage && "text-default text-sm font-medium"
             )}>
+            {/* TODO: Fix colors when token is introdcued to DS */}
             <div className="max-w-full flex-shrink break-words [&_a]:text-blue-500 [&_a]:underline [&_a]:hover:text-blue-600">
               <EventTypeDescriptionSafeHTML eventType={eventType} />
             </div>
           </div>
         )}
         {requiresConfirmation && (
-          <div
-            className={classNames(
-              "items-top flex",
-              isBookingPage && "dark:text-darkgray-600 text-sm font-medium text-gray-600"
-            )}>
+          <div className={classNames("items-top flex", isBookingPage && "text-default text-sm font-medium")}>
             <div>
               <FiCheckSquare className="ml-[2px] inline-block h-4 w-4 ltr:mr-[10px] rtl:ml-[10px] " />
             </div>
@@ -119,7 +114,7 @@ const BookingDescription: FC<Props> = (props) => {
         <div
           className={classNames(
             "flex flex-nowrap text-sm font-medium",
-            isBookingPage && "dark:text-darkgray-600 text-gray-600",
+            isBookingPage && "text-default",
             !eventType.metadata?.multipleDuration && "items-center"
           )}>
           <FiClock
@@ -137,9 +132,9 @@ const BookingDescription: FC<Props> = (props) => {
                       variant="gray"
                       className={classNames(
                         duration === dur.toString()
-                          ? "bg-darkgray-200 text-darkgray-900 dark:bg-darkmodebrand dark:!text-darkmodebrandcontrast"
-                          : "hover:bg-darkgray-200 dark:hover:bg-darkmodebrand hover:text-darkgray-900 dark:hover:text-darkmodebrandcontrast dark:bg-darkgray-200 bg-gray-200 text-gray-900 dark:text-white",
-                        "cursor-pointer"
+                          ? "bg-emphasis border-emphasis text-emphasis "
+                          : "bg-subtle text-default border-transparent ",
+                        "cursor-pointer border"
                       )}
                       onClick={() => {
                         setDuration(dur);

apps/web/components/booking/BookingDescriptionPayment.tsx

@@ -1,22 +1,35 @@
+import type { TFunction } from "next-i18next";
 import { FormattedNumber, IntlProvider } from "react-intl";
 
 import getPaymentAppData from "@calcom/lib/getPaymentAppData";
 import { FiCreditCard } from "@calcom/ui/components/icon";
 
-const BookingDescriptionPayment = (props: { eventType: Parameters<typeof getPaymentAppData>[0] }) => {
+const BookingDescriptionPayment = (props: {
+  eventType: Parameters<typeof getPaymentAppData>[0];
+  t: TFunction;
+}) => {
   const paymentAppData = getPaymentAppData(props.eventType);
   if (!paymentAppData || paymentAppData.price <= 0) return null;
 
   return (
     <p className="text-bookinglight -ml-2 px-2 text-sm ">
       <FiCreditCard className="ml-[2px] -mt-1 inline-block h-4 w-4 ltr:mr-[10px] rtl:ml-[10px]" />
-      <IntlProvider locale="en">
-        <FormattedNumber
-          value={paymentAppData.price / 100.0}
-          style="currency"
-          currency={paymentAppData.currency?.toUpperCase()}
-        />
-      </IntlProvider>
+      {paymentAppData.paymentOption === "HOLD" ? (
+        <>
+          {props.t("no_show_fee_amount", {
+            amount: paymentAppData.price / 100.0,
+            formatParams: { amount: { currency: paymentAppData.currency } },
+          })}
+        </>
+      ) : (
+        <IntlProvider locale="en">
+          <FormattedNumber
+            value={paymentAppData.price / 100.0}
+            style="currency"
+            currency={paymentAppData.currency?.toUpperCase()}
+          />
+        </IntlProvider>
+      )}
     </p>
   );
 };

apps/web/components/booking/BookingListItem.tsx

@@ -5,6 +5,8 @@ import { useState } from "react";
 import type { EventLocationType } from "@calcom/app-store/locations";
 import { getEventLocationType } from "@calcom/app-store/locations";
 import dayjs from "@calcom/dayjs";
+// TODO: Use browser locale, implement Intl in Dayjs maybe?
+import "@calcom/dayjs/locales";
 import ViewRecordingsDialog from "@calcom/features/ee/video/ViewRecordingsDialog";
 import classNames from "@calcom/lib/classNames";
 import { formatTime } from "@calcom/lib/date-fns";
@@ -26,10 +28,20 @@ import {
   TableActions,
   TextAreaField,
 } from "@calcom/ui";
-import { FiCheck, FiClock, FiMapPin, FiRefreshCcw, FiSend, FiSlash, FiX } from "@calcom/ui/components/icon";
+import {
+  FiCheck,
+  FiClock,
+  FiMapPin,
+  FiRefreshCcw,
+  FiSend,
+  FiSlash,
+  FiX,
+  FiCreditCard,
+} from "@calcom/ui/components/icon";
 
 import useMeQuery from "@lib/hooks/useMeQuery";
 
+import { ChargeCardDialog } from "@components/dialog/ChargeCardDialog";
 import { EditLocationDialog } from "@components/dialog/EditLocationDialog";
 import { RescheduleDialog } from "@components/dialog/RescheduleDialog";
 
@@ -54,7 +66,9 @@ function BookingListItem(booking: BookingItemProps) {
   const router = useRouter();
   const [rejectionReason, setRejectionReason] = useState<string>("");
   const [rejectionDialogIsOpen, setRejectionDialogIsOpen] = useState(false);
+  const [chargeCardDialogIsOpen, setChargeCardDialogIsOpen] = useState(false);
   const [viewRecordingsDialogIsOpen, setViewRecordingsDialogIsOpen] = useState<boolean>(false);
+  const cardCharged = booking?.payment[0]?.success;
   const mutation = trpc.viewer.bookings.confirm.useMutation({
     onSuccess: (data) => {
       if (data?.status === BookingStatus.REJECTED) {
@@ -114,16 +128,20 @@ function BookingListItem(booking: BookingItemProps) {
       icon: FiSlash,
       disabled: mutation.isLoading,
     },
-    {
-      id: "confirm",
-      label: (isTabRecurring || isTabUnconfirmed) && isRecurring ? t("confirm_all") : t("confirm"),
-      onClick: () => {
-        bookingConfirm(true);
-      },
-      icon: FiCheck,
-      disabled: mutation.isLoading,
-      color: "primary",
-    },
+    // For bookings with payment, only confirm if the booking is paid for
+    ...((isPending && !booking?.eventType?.price) || (!!booking?.eventType?.price && booking.paid)
+      ? [
+          {
+            id: "confirm",
+            label: (isTabRecurring || isTabUnconfirmed) && isRecurring ? t("confirm_all") : t("confirm"),
+            onClick: () => {
+              bookingConfirm(true);
+            },
+            icon: FiCheck,
+            disabled: mutation.isLoading,
+          },
+        ]
+      : []),
   ];
 
   const showRecordingActions: ActionType[] = [
@@ -182,6 +200,18 @@ function BookingListItem(booking: BookingItemProps) {
     },
   ];
 
+  const chargeCardActions: ActionType[] = [
+    {
+      id: "charge_card",
+      label: cardCharged ? t("no_show_fee_charged") : t("collect_no_show_fee"),
+      disabled: cardCharged,
+      onClick: () => {
+        setChargeCardDialogIsOpen(true);
+      },
+      icon: FiCreditCard,
+    },
+  ];
+
   if (isTabRecurring && isRecurring) {
     bookedActions = bookedActions.filter((action) => action.id !== "edit_booking");
   }
@@ -252,6 +282,15 @@ function BookingListItem(booking: BookingItemProps) {
         isOpenDialog={isOpenSetLocationDialog}
         setShowLocationModal={setIsOpenLocationDialog}
       />
+      {booking.paid && (
+        <ChargeCardDialog
+          isOpenDialog={chargeCardDialogIsOpen}
+          setIsOpenDialog={setChargeCardDialogIsOpen}
+          bookingId={booking.id}
+          paymentAmount={booking?.payment[0].amount}
+          paymentCurrency={booking?.payment[0].currency}
+        />
+      )}
       {showRecordingsButtons && (
         <ViewRecordingsDialog
           booking={booking}
@@ -269,7 +308,7 @@ function BookingListItem(booking: BookingItemProps) {
               label={
                 <>
                   {t("rejection_reason")}
-                  <span className="font-normal text-gray-500"> (Optional)</span>
+                  <span className="text-subtle font-normal"> (Optional)</span>
                 </>
               }
               value={rejectionReason}
@@ -290,13 +329,13 @@ function BookingListItem(booking: BookingItemProps) {
         </DialogContent>
       </Dialog>
 
-      <tr className="group flex flex-col hover:bg-gray-50 sm:flex-row">
+      <tr className="hover:bg-muted group flex flex-col sm:flex-row">
         <td
           className="hidden align-top ltr:pl-6 rtl:pr-6 sm:table-cell sm:min-w-[12rem]"
           onClick={onClickTableData}>
           <div className="cursor-pointer py-4">
-            <div className="text-sm leading-6 text-gray-900">{startTime}</div>
-            <div className="text-sm text-gray-500">
+            <div className="text-emphasis text-sm leading-6">{startTime}</div>
+            <div className="text-subtle text-sm">
               {formatTime(booking.startTime, user?.timeFormat, user?.timeZone)} -{" "}
               {formatTime(booking.endTime, user?.timeFormat, user?.timeZone)}
               <MeetingTimeInTimezones
@@ -319,11 +358,11 @@ function BookingListItem(booking: BookingItemProps) {
             )}
             {booking.paid && (
               <Badge className="ltr:mr-2 rtl:ml-2" variant="green">
-                {t("paid")}
+                {booking.payment[0].paymentOption === "HOLD" ? t("card_held") : t("paid")}
               </Badge>
             )}
             {recurringDates !== undefined && (
-              <div className="mt-2 text-sm text-gray-400">
+              <div className="text-muted mt-2 text-sm">
                 <RecurringBookingsTooltip booking={booking} recurringDates={recurringDates} />
               </div>
             )}
@@ -333,8 +372,8 @@ function BookingListItem(booking: BookingItemProps) {
           {/* Time and Badges for mobile */}
           <div className="w-full pt-4 pb-2 sm:hidden">
             <div className="flex w-full items-center justify-between sm:hidden">
-              <div className="text-sm leading-6 text-gray-900">{startTime}</div>
-              <div className="pr-2 text-sm text-gray-500">
+              <div className="text-emphasis text-sm leading-6">{startTime}</div>
+              <div className="text-subtle pr-2 text-sm">
                 {formatTime(booking.startTime, user?.timeFormat, user?.timeZone)} -{" "}
                 {formatTime(booking.endTime, user?.timeFormat, user?.timeZone)}
                 <MeetingTimeInTimezones
@@ -363,7 +402,7 @@ function BookingListItem(booking: BookingItemProps) {
               </Badge>
             )}
             {recurringDates !== undefined && (
-              <div className="text-sm text-gray-400 sm:hidden">
+              <div className="text-muted text-sm sm:hidden">
                 <RecurringBookingsTooltip booking={booking} recurringDates={recurringDates} />
               </div>
             )}
@@ -373,21 +412,21 @@ function BookingListItem(booking: BookingItemProps) {
             <div
               title={title}
               className={classNames(
-                "max-w-10/12 sm:max-w-56 text-sm font-medium leading-6 text-gray-900 md:max-w-full",
+                "max-w-10/12 sm:max-w-56 text-emphasis text-sm font-medium leading-6 md:max-w-full",
                 isCancelled ? "line-through" : ""
               )}>
               {title}
               <span> </span>
 
               {!!booking?.eventType?.price && !booking.paid && (
-                <Badge className="hidden ltr:ml-2 ltr:mr-2 rtl:ml-2 sm:inline-flex" variant="orange">
+                <Badge className="ms-2 me-2 hidden sm:inline-flex" variant="orange">
                   {t("pending_payment")}
                 </Badge>
               )}
             </div>
             {booking.description && (
               <div
-                className="max-w-10/12 sm:max-w-32 md:max-w-52 xl:max-w-80 truncate text-sm text-gray-600"
+                className="max-w-10/12 sm:max-w-32 md:max-w-52 xl:max-w-80 text-default truncate text-sm"
                 title={booking.description}>
                 &quot;{booking.description}&quot;
               </div>
@@ -411,7 +450,7 @@ function BookingListItem(booking: BookingItemProps) {
             <>
               {isPending && user?.id === booking.user?.id && <TableActions actions={pendingActions} />}
               {isConfirmed && <TableActions actions={bookedActions} />}
-              {isRejected && <div className="text-sm text-gray-500">{t("rejected")}</div>}
+              {isRejected && <div className="text-subtle text-sm">{t("rejected")}</div>}
             </>
           ) : null}
           {isPast && isPending && !isConfirmed ? <TableActions actions={bookedActions} /> : null}
@@ -421,6 +460,11 @@ function BookingListItem(booking: BookingItemProps) {
               <RequestSentMessage />
             </div>
           )}
+          {booking.status === "ACCEPTED" && booking.paid && booking?.payment[0]?.paymentOption === "HOLD" && (
+            <div className="ml-2">
+              <TableActions actions={chargeCardActions} />
+            </div>
+          )}
         </td>
       </tr>
     </>
@@ -473,10 +517,10 @@ const RecurringBookingsTooltip = ({ booking, recurringDates }: RecurringBookings
                   </p>
                 );
               })}>
-              <div className="text-gray-600 dark:text-white">
+              <div className="text-default">
                 <FiRefreshCcw
                   strokeWidth="3"
-                  className="float-left mr-1 mt-1.5 inline-block h-3 w-3 text-gray-400"
+                  className="text-muted float-left mr-1 mt-1.5 inline-block h-3 w-3"
                 />
                 <p className="mt-1 pl-5 text-xs">
                   {booking.status === BookingStatus.ACCEPTED
@@ -549,13 +593,13 @@ const DisplayAttendees = ({
 }) => {
   const { t } = useLocale();
   return (
-    <div className="text-sm text-gray-900">
+    <div className="text-emphasis text-sm">
       {user && <FirstAttendee user={user} currentEmail={currentEmail} />}
       {attendees.length > 1 ? <span>,&nbsp;</span> : <span>&nbsp;{t("and")}&nbsp;</span>}
       <Attendee {...attendees[0]} />
       {attendees.length > 1 && (
         <>
-          <div className="inline-block text-sm text-gray-900">&nbsp;{t("and")}&nbsp;</div>
+          <div className="text-emphasis inline-block text-sm">&nbsp;{t("and")}&nbsp;</div>
           {attendees.length > 2 ? (
             <Tooltip
               content={attendees.slice(1).map((attendee) => (

apps/web/components/booking/CancelBooking.tsx

@@ -47,11 +47,11 @@ export default function CancelBooking(props: Props) {
     <>
       {error && (
         <div className="mt-8">
-          <div className="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-red-100">
+          <div className="bg-error mx-auto flex h-12 w-12 items-center justify-center rounded-full">
             <FiX className="h-6 w-6 text-red-600" />
           </div>
           <div className="mt-3 text-center sm:mt-5">
-            <h3 className="text-lg font-medium leading-6 text-gray-900" id="modal-title">
+            <h3 className="text-emphasis text-lg font-medium leading-6" id="modal-title">
               {error}
             </h3>
           </div>
@@ -59,13 +59,13 @@ export default function CancelBooking(props: Props) {
       )}
       {!error && (
         <div className="mt-5 sm:mt-6">
-          <label className="text-bookingdark font-medium dark:text-white">{t("cancellation_reason")}</label>
+          <label className="text-default font-medium">{t("cancellation_reason")}</label>
           <TextArea
             ref={cancelBookingRef}
             placeholder={t("cancellation_reason_placeholder")}
             value={cancellationReason}
             onChange={(e) => setCancellationReason(e.target.value)}
-            className="dark:bg-darkgray-100 dark:border-darkgray-400 mt-2 mb-4 w-full dark:text-white "
+            className="mt-2 mb-4 w-full "
             rows={3}
           />
           <div className="flex flex-col-reverse rtl:space-x-reverse ">
@@ -77,7 +77,6 @@ export default function CancelBooking(props: Props) {
                 {t("nevermind")}
               </Button>
               <Button
-                className="flex justify-center"
                 data-testid="cancel"
                 onClick={async () => {
                   setLoading(true);

apps/web/components/booking/SkeletonLoader.tsx

@@ -4,7 +4,7 @@ import { SkeletonText } from "@calcom/ui";
 
 function SkeletonLoader() {
   return (
-    <ul className="animate-pulse divide-y divide-gray-200 rounded-md border border-gray-200 bg-white sm:overflow-hidden">
+    <ul className="divide-subtle border-subtle bg-default animate-pulse divide-y rounded-md border sm:overflow-hidden">
       <SkeletonItem />
       <SkeletonItem />
       <SkeletonItem />

apps/web/components/booking/SlotPicker.tsx

@@ -133,10 +133,7 @@ export const SlotPicker = ({
     eventTypeId: eventType.id,
     eventTypeSlug: eventType.slug,
     usernameList: users,
-    startTime:
-      browsingDate === undefined || browsingDate.get("month") === dayjs.tz(undefined, timeZone).get("month")
-        ? dayjs.tz(undefined, timeZone).subtract(2, "days").startOf("day")
-        : browsingDate?.startOf("month"),
+    startTime: dayjs().startOf("day"),
     endTime: browsingDate?.endOf("month"),
     timeZone,
     duration,
@@ -167,7 +164,7 @@ export const SlotPicker = ({
         isLoading={isLoading}
         className={classNames(
           "mt-8 px-4 pb-4 sm:mt-0 md:min-w-[300px] md:px-4 lg:min-w-[455px]",
-          selectedDate ? "sm:dark:border-darkgray-200 border-gray-200 sm:border-r sm:p-4 sm:pr-6" : "sm:p-4"
+          selectedDate ? " border-subtle sm:border-r sm:p-4 sm:pr-6" : "sm:p-4"
         )}
         includedDates={Object.keys(monthSlots).filter((k) => monthSlots[k].length > 0)}
         locale={isLocaleReady ? i18n.language : "en"}

apps/web/components/booking/TimeOptions.tsx

@@ -1,12 +1,9 @@
 import type { FC } from "react";
 import { useEffect, useState } from "react";
 
-import useTheme from "@calcom/lib/hooks/useTheme";
 import type { ITimezoneOption } from "@calcom/ui";
 import { TimezoneSelect } from "@calcom/ui";
 
-import useMeQuery from "@lib/hooks/useMeQuery";
-
 import { timeZone } from "../../lib/clock";
 
 type Props = {
@@ -15,8 +12,6 @@ type Props = {
 
 const TimeOptions: FC<Props> = ({ onSelectTimeZone }) => {
   const [selectedTimeZone, setSelectedTimeZone] = useState("");
-  const query = useMeQuery();
-  const userTheme = useTheme(query?.data?.theme).resolvedTheme;
 
   useEffect(() => {
     setSelectedTimeZone(timeZone());
@@ -28,59 +23,17 @@ const TimeOptions: FC<Props> = ({ onSelectTimeZone }) => {
     }
   }, [selectedTimeZone, onSelectTimeZone]);
 
-  const customStyles = {
-    option: (_provided: object, state: { isSelected: boolean; isFocused: boolean }) => ({
-      padding: "10px 12px !important",
-      color: state.isSelected || state.isFocused ? "#101010" : "#374151",
-      backgroundColor: state.isSelected ? "#E5E7EB !important" : "white",
-      ...(userTheme === "dark" && {
-        color: state.isSelected || state.isFocused ? "white" : "#80868B",
-      }),
-    }),
-    control: () => ({
-      display: "flex",
-      cursor: "pointer",
-      backgroundColor: "transparent !important",
-      minWidth: "5rem",
-      height: "24px",
-      minHeight: "24px !important",
-      boxShadow: "none !important",
-    }),
-    singleValue: (provided: object, state: { selectProps: { menuIsOpen: boolean } }) => ({
-      ...provided,
-      color: state.selectProps.menuIsOpen ? "#111827" : "#4B5563",
-      ...(userTheme === "dark" && {
-        color: "#a5a5a5 !important",
-      }),
-    }),
-    menu: (provided: object) => ({
-      ...provided,
-      minWidth: "20rem",
-      margin: "8px 0 0 -20px",
-    }),
-    valueContainer: (provided: object) => ({
-      ...provided,
-      padding: "0 0 0 6px",
-    }),
-    dropdownIndicator: (provided: object, state: { selectProps: { menuIsOpen: boolean } }) => ({
-      ...provided,
-      transform: state.selectProps.menuIsOpen ? "rotate(180deg)" : "",
-      color: state.selectProps.menuIsOpen ? "#111827" : "#4B5563",
-      marginLeft: 4,
-      padding: 0,
-      ...(userTheme === "dark" && {
-        color: "#80868B",
-      }),
-    }),
-  };
-
   return !!selectedTimeZone ? (
     <TimezoneSelect
       id="timeZone"
+      classNames={{
+        singleValue: () => "text-default",
+        dropdownIndicator: () => "text-default",
+        menu: () => "!w-64 max-w-[90vw]",
+      }}
+      variant="minimal"
       value={selectedTimeZone}
       onChange={(tz: ITimezoneOption) => setSelectedTimeZone(tz.value)}
-      className="flex h-6 text-sm font-medium"
-      styles={customStyles}
     />
   ) : null;
 };

apps/web/components/booking/TimezoneDropdown.tsx

@@ -17,8 +17,8 @@ export function TimezoneDropdown({
 
   return (
     <>
-      <div className="dark:focus-within:bg-darkgray-200 dark:bg-darkgray-100 dark:hover:bg-darkgray-200 -mx-[2px] !mt-3 flex w-fit max-w-[20rem] items-center rounded-[4px] px-1 py-[2px] text-sm font-medium focus-within:bg-gray-200 hover:bg-gray-100 lg:max-w-[12rem] [&_p]:focus-within:text-gray-900 dark:[&_p]:focus-within:text-white [&_svg]:focus-within:text-gray-900 dark:[&_svg]:focus-within:text-white">
-        <FiGlobe className="dark:text-darkgray-600 flex h-4 w-4 text-gray-600 ltr:mr-[2px] rtl:ml-[2px]" />
+      <div className="dark:focus-within:bg-darkgray-200 dark:bg-darkgray-100 dark:hover:bg-darkgray-200 !mt-3 flex w-full max-w-[20rem] items-center rounded-[4px] px-1 text-sm font-medium focus-within:bg-gray-200 hover:bg-gray-100 lg:max-w-[12rem] [&_p]:focus-within:text-gray-900 dark:[&_p]:focus-within:text-white [&_svg]:focus-within:text-gray-900 dark:[&_svg]:focus-within:text-white">
+        <FiGlobe className="dark:text-darkgray-600 flex h-4 w-4 text-gray-600 ltr:mr-2 rtl:ml-2" />
         <TimeOptions onSelectTimeZone={handleSelectTimeZone} />
       </div>
     </>

apps/web/components/booking/pages/AvailabilityPage.tsx

@@ -14,8 +14,8 @@ import {
   useIsBackgroundTransparent,
   useIsEmbed,
 } from "@calcom/embed-core/embed-iframe";
-import CustomBranding from "@calcom/lib/CustomBranding";
 import classNames from "@calcom/lib/classNames";
+import useGetBrandingColours from "@calcom/lib/getBrandColours";
 import getPaymentAppData from "@calcom/lib/getPaymentAppData";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import useTheme from "@calcom/lib/hooks/useTheme";
@@ -24,7 +24,7 @@ import { getRecurringFreq } from "@calcom/lib/recurringStrings";
 import { collectPageParameters, telemetryEventTypes, useTelemetry } from "@calcom/lib/telemetry";
 import { detectBrowserTimeFormat, setIs24hClockInLocalStorage, TimeFormat } from "@calcom/lib/timeFormat";
 import { trpc } from "@calcom/trpc";
-import { HeadSeo } from "@calcom/ui";
+import { HeadSeo, useCalcomTheme } from "@calcom/ui";
 import { FiCreditCard, FiUser, FiRefreshCcw } from "@calcom/ui/components/icon";
 
 import { timeZone as localStorageTimeZone } from "@lib/clock";
@@ -58,12 +58,24 @@ const dateQuerySchema = z.object({
 
 export type Props = AvailabilityTeamPageProps | AvailabilityPageProps | DynamicAvailabilityPageProps;
 
+const useBrandColors = ({ brandColor, darkBrandColor }: { brandColor: string; darkBrandColor: string }) => {
+  const brandTheme = useGetBrandingColours({
+    lightVal: brandColor,
+    darkVal: darkBrandColor,
+  });
+  useCalcomTheme(brandTheme);
+};
+
 const AvailabilityPage = ({ profile, eventType, ...restProps }: Props) => {
   const router = useRouter();
   const isEmbed = useIsEmbed(restProps.isEmbed);
   const query = dateQuerySchema.parse(router.query);
   const { rescheduleUid } = query;
   useTheme(profile.theme);
+  useBrandColors({
+    brandColor: profile.brandColor,
+    darkBrandColor: profile.darkBrandColor,
+  });
   const { t } = useLocale();
   const availabilityDatePickerEmbedStyles = useEmbedStyles("availabilityDatePicker");
   //TODO: Plan to remove shouldAlignCentrallyInEmbed config
@@ -112,6 +124,16 @@ const AvailabilityPage = ({ profile, eventType, ...restProps }: Props) => {
     [timeZone]
   );
   const paymentAppData = getPaymentAppData(eventType);
+  const paymentAmount = () => {
+    return;
+    <IntlProvider locale="en">
+      <FormattedNumber
+        value={paymentAppData.price / 100.0}
+        style="currency"
+        currency={paymentAppData.currency?.toUpperCase()}
+      />
+    </IntlProvider>;
+  };
   const rainbowAppData = getEventTypeAppData(eventType, "rainbow") || {};
   const rawSlug = profile.slug ? profile.slug.split("/") : [];
   if (rawSlug.length > 1) rawSlug.pop(); //team events have team name as slug, but user events have [user]/[type] as slug.
@@ -157,30 +179,27 @@ const AvailabilityPage = ({ profile, eventType, ...restProps }: Props) => {
         isBrandingHidden={restProps.isBrandingHidden}
       />
       <BookingPageTagManager eventType={eventType} />
-      <CustomBranding lightVal={profile.brandColor} darkVal={profile.darkBrandColor} />
       <div>
         <main
           className={classNames(
             "flex flex-col md:mx-4",
             shouldAlignCentrally ? "items-center" : "items-start",
-            !isEmbed && classNames("mx-auto my-0 ease-in-out md:my-24")
+            !isEmbed && classNames("bg-subtle dark:bg-default mx-auto my-0 ease-in-out md:my-24")
           )}>
           <div>
             <div
               style={availabilityDatePickerEmbedStyles}
               className={classNames(
-                isBackgroundTransparent
-                  ? ""
-                  : "dark:bg-darkgray-100 sm:dark:border-darkgray-300 bg-white pb-4 md:pb-0",
-                "border-bookinglightest md:rounded-md md:border",
+                isBackgroundTransparent ? "" : "bg-default dark:bg-muted pb-4 md:pb-0",
+                "border-subtle md:rounded-md md:border",
                 isEmbed && "mx-auto"
               )}>
               <div className="md:flex">
                 {showEventTypeDetails && (
                   <div
                     className={classNames(
-                      "sm:dark:border-darkgray-200 flex flex-col border-gray-200 p-5 sm:border-r",
-                      "min-w-full md:w-[280px] md:min-w-[280px]",
+                      " border-subtle flex flex-col p-5 sm:border-r",
+                      "min-w-full md:w-[230px] md:min-w-[230px]",
                       recurringEventCount && "xl:w-[380px] xl:min-w-[380px]"
                     )}>
                     <BookingDescription profile={profile} eventType={eventType} rescheduleUid={rescheduleUid}>
@@ -188,7 +207,7 @@ const AvailabilityPage = ({ profile, eventType, ...restProps }: Props) => {
                         <div
                           className={classNames(
                             "flex flex-nowrap items-center text-sm font-medium",
-                            "dark:text-darkgray-600 text-gray-600",
+                            " text-default",
                             "ltr:mr-[10px] rtl:ml-[10px]"
                           )}>
                           <FiUser
@@ -211,7 +230,7 @@ const AvailabilityPage = ({ profile, eventType, ...restProps }: Props) => {
                               type="number"
                               min="1"
                               max={eventType.recurringEvent.count}
-                              className="w-15 dark:bg-darkgray-200 h-7 rounded-sm border-gray-300 bg-white text-sm font-medium [appearance:textfield] ltr:mr-2 rtl:ml-2 dark:border-gray-500"
+                              className="w-15 border-default bg-default dark:border-empthasis h-7 rounded-sm text-sm font-medium [appearance:textfield] ltr:mr-2 rtl:ml-2"
                               defaultValue={eventType.recurringEvent.count}
                               onChange={(event) => {
                                 setRecurringEventCount(parseInt(event?.target.value));
@@ -228,13 +247,22 @@ const AvailabilityPage = ({ profile, eventType, ...restProps }: Props) => {
                       {paymentAppData.price > 0 && (
                         <p className="-ml-2 px-2 text-sm font-medium">
                           <FiCreditCard className="ml-[2px] -mt-1 inline-block h-4 w-4 ltr:mr-[10px] rtl:ml-[10px]" />
-                          <IntlProvider locale="en">
-                            <FormattedNumber
-                              value={paymentAppData.price / 100.0}
-                              style="currency"
-                              currency={paymentAppData.currency?.toUpperCase()}
-                            />
-                          </IntlProvider>
+                          {paymentAppData.paymentOption === "HOLD" ? (
+                            <>
+                              {t("no_show_fee_amount", {
+                                amount: paymentAppData.price / 100.0,
+                                formatParams: { amount: { currency: paymentAppData.currency } },
+                              })}
+                            </>
+                          ) : (
+                            <IntlProvider locale="en">
+                              <FormattedNumber
+                                value={paymentAppData.price / 100.0}
+                                style="currency"
+                                currency={paymentAppData.currency?.toUpperCase()}
+                              />
+                            </IntlProvider>
+                          )}
                         </p>
                       )}
                       {timezoneDropdown}
@@ -243,12 +271,12 @@ const AvailabilityPage = ({ profile, eventType, ...restProps }: Props) => {
                     {/* Temporarily disabled - booking?.startTime && rescheduleUid && (
                     <div>
                       <p
-                        className="mt-4 mb-3 text-gray-600 dark:text-darkgray-600"
+                        className="mt-4 mb-3 text-default"
                         data-testid="former_time_p_desktop">
                         {t("former_time")}
                       </p>
-                      <p className="text-gray-500 line-through dark:text-darkgray-600">
-                        <CalendarIcon className="ltr:mr-[10px] rtl:ml-[10px] -mt-1 inline-block h-4 w-4 text-gray-500" />
+                      <p className="text-subtle line-through ">
+                        <CalendarIcon className="ltr:mr-[10px] rtl:ml-[10px] -mt-1 inline-block h-4 w-4 text-subtle" />
                         {typeof booking.startTime === "string" && parseDate(dayjs(booking.startTime), i18n)}
                       </p>
                     </div>

apps/web/components/booking/pages/BookingPage.tsx

@@ -11,7 +11,6 @@ import { z } from "zod";
 
 import BookingPageTagManager from "@calcom/app-store/BookingPageTagManager";
 import type { EventLocationType } from "@calcom/app-store/locations";
-import { getEventLocationType, locationKeyToString } from "@calcom/app-store/locations";
 import { createPaymentLink } from "@calcom/app-store/stripepayment/lib/client";
 import { getEventTypeAppData } from "@calcom/app-store/utils";
 import type { LocationObject } from "@calcom/core/location";
@@ -29,10 +28,12 @@ import {
 import getBookingResponsesSchema, {
   getBookingResponsesPartialSchema,
 } from "@calcom/features/bookings/lib/getBookingResponsesSchema";
+import getLocationOptionsForSelect from "@calcom/features/bookings/lib/getLocationOptionsForSelect";
 import { FormBuilderField } from "@calcom/features/form-builder/FormBuilder";
-import CustomBranding from "@calcom/lib/CustomBranding";
+import { bookingSuccessRedirect } from "@calcom/lib/bookingSuccessRedirect";
 import classNames from "@calcom/lib/classNames";
 import { APP_NAME } from "@calcom/lib/constants";
+import useGetBrandingColours from "@calcom/lib/getBrandColours";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import useTheme from "@calcom/lib/hooks/useTheme";
 import { useTypedQuery } from "@calcom/lib/hooks/useTypedQuery";
@@ -40,7 +41,7 @@ import { HttpError } from "@calcom/lib/http-error";
 import { getEveryFreqFor } from "@calcom/lib/recurringStrings";
 import { collectPageParameters, telemetryEventTypes, useTelemetry } from "@calcom/lib/telemetry";
 import { TimeFormat } from "@calcom/lib/timeFormat";
-import { Button, Form, Tooltip } from "@calcom/ui";
+import { Button, Form, Tooltip, useCalcomTheme } from "@calcom/ui";
 import { FiAlertTriangle, FiCalendar, FiRefreshCw, FiUser } from "@calcom/ui/components/icon";
 
 import { timeZone } from "@lib/clock";
@@ -64,6 +65,14 @@ const BookingDescriptionPayment = dynamic(
   () => import("@components/booking/BookingDescriptionPayment")
 ) as unknown as typeof import("@components/booking/BookingDescriptionPayment").default;
 
+const useBrandColors = ({ brandColor, darkBrandColor }: { brandColor?: string; darkBrandColor?: string }) => {
+  const brandTheme = useGetBrandingColours({
+    lightVal: brandColor,
+    darkVal: darkBrandColor,
+  });
+  useCalcomTheme(brandTheme);
+};
+
 type BookingPageProps = BookPageProps | TeamBookingPageProps | HashLinkPageProps;
 const BookingFields = ({
   fields,
@@ -135,26 +144,14 @@ const BookingFields = ({
           }
           const optionsInputs = field.optionsInputs;
 
-          const options = locations.map((location) => {
-            const eventLocation = getEventLocationType(location.type);
-            const locationString = locationKeyToString(location);
-
-            if (typeof locationString !== "string" || !eventLocation) {
-              // It's possible that location app got uninstalled
-              return null;
-            }
-            const type = eventLocation.type;
-            const optionInput = optionsInputs[type as keyof typeof optionsInputs];
+          // TODO: Instead of `getLocationOptionsForSelect` options should be retrieved from dataStore[field.getOptionsAt]. It would make it agnostic of the `name` of the field.
+          const options = getLocationOptionsForSelect(locations, t);
+          options.forEach((option) => {
+            const optionInput = optionsInputs[option.value as keyof typeof optionsInputs];
             if (optionInput) {
-              optionInput.placeholder = t(eventLocation?.attendeeInputPlaceholder || "");
+              optionInput.placeholder = option.inputPlaceholder;
             }
-
-            return {
-              label: t(locationString),
-              value: type,
-            };
           });
-
           field.options = options.filter(
             (location): location is NonNullable<(typeof options)[number]> => !!location
           );
@@ -205,6 +202,7 @@ const routerQuerySchema = z
 const BookingPage = ({
   eventType,
   booking,
+  currentSlotBooking,
   profile,
   isDynamicGroupBooking,
   recurringEventCount,
@@ -267,15 +265,19 @@ const BookingPage = ({
         );
       }
 
-      return router.push({
-        pathname: `/booking/${uid}`,
-        query: {
-          isSuccessBookingPage: true,
-          email: bookingForm.getValues("responses.email"),
-          eventTypeSlug: eventType.slug,
-          seatReferenceUid: "seatReferenceUid" in responseData ? responseData.seatReferenceUid : null,
-          ...(rescheduleUid && booking?.startTime && { formerTime: booking.startTime.toString() }),
-        },
+      const query = {
+        isSuccessBookingPage: true,
+        email: bookingForm.getValues("responses.email"),
+        eventTypeSlug: eventType.slug,
+        seatReferenceUid: "seatReferenceUid" in responseData ? responseData.seatReferenceUid : null,
+        ...(rescheduleUid && booking?.startTime && { formerTime: booking.startTime.toString() }),
+      };
+
+      return bookingSuccessRedirect({
+        router,
+        successRedirectUrl: eventType.successRedirectUrl,
+        query,
+        bookingUid: uid,
       });
     },
   });
@@ -283,15 +285,18 @@ const BookingPage = ({
   const recurringMutation = useMutation(createRecurringBooking, {
     onSuccess: async (responseData = []) => {
       const { uid } = responseData[0] || {};
-
-      return router.push({
-        pathname: `/booking/${uid}`,
-        query: {
-          allRemainingBookings: true,
-          email: bookingForm.getValues("responses.email"),
-          eventTypeSlug: eventType.slug,
-          formerTime: booking?.startTime.toString(),
-        },
+      const query = {
+        isSuccessBookingPage: true,
+        allRemainingBookings: true,
+        email: bookingForm.getValues("responses.email"),
+        eventTypeSlug: eventType.slug,
+        formerTime: booking?.startTime.toString(),
+      };
+      return bookingSuccessRedirect({
+        router,
+        successRedirectUrl: eventType.successRedirectUrl,
+        query,
+        bookingUid: uid,
       });
     },
   });
@@ -301,6 +306,10 @@ const BookingPage = ({
   } = useTypedQuery(routerQuerySchema);
 
   useTheme(profile.theme);
+  useBrandColors({
+    brandColor: profile.brandColor,
+    darkBrandColor: profile.darkBrandColor,
+  });
 
   const querySchema = getBookingResponsesPartialSchema({
     eventType: {
@@ -510,7 +519,6 @@ const BookingPage = ({
         <link rel="icon" href="/favico.ico" />
       </Head>
       <BookingPageTagManager eventType={eventType} />
-      <CustomBranding lightVal={profile.brandColor} darkVal={profile.darkBrandColor} />
       <main
         className={classNames(
           shouldAlignCentrally ? "mx-auto" : "",
@@ -520,16 +528,16 @@ const BookingPage = ({
         <div
           className={classNames(
             "main",
-            isBackgroundTransparent ? "" : "dark:bg-darkgray-100 bg-white dark:border",
+            isBackgroundTransparent ? "" : "dark:bg-darkgray-100 bg-default dark:border",
             "dark:border-darkgray-300 rounded-md sm:border"
           )}>
           <div className="sm:flex">
             {showEventTypeDetails && (
-              <div className="sm:dark:border-darkgray-300 dark:text-darkgray-600 flex flex-col px-6 pt-6 pb-0 text-gray-600 sm:w-1/2 sm:border-r sm:pb-6">
+              <div className="sm:dark:border-darkgray-300  text-default flex flex-col px-6 pt-6 pb-0 sm:w-1/2 sm:border-r sm:pb-6">
                 <BookingDescription isBookingPage profile={profile} eventType={eventType}>
-                  <BookingDescriptionPayment eventType={eventType} />
+                  <BookingDescriptionPayment eventType={eventType} t={t} />
                   {!rescheduleUid && eventType.recurringEvent?.freq && recurringEventCount && (
-                    <div className="items-start text-sm font-medium text-gray-600 dark:text-white">
+                    <div className="dark:text-inverted text-default items-start text-sm font-medium">
                       <FiRefreshCw className="ml-[2px] inline-block h-4 w-4 ltr:mr-[10px] rtl:ml-[10px]" />
                       <p className="-ml-2 inline-block items-center px-2">
                         {getEveryFreqFor({
@@ -558,7 +566,7 @@ const BookingPage = ({
                             content={recurringStrings.slice(5).map((timeFormatted, key) => (
                               <p key={key}>{timeFormatted}</p>
                             ))}>
-                            <p className="dark:text-darkgray-600 text-sm">
+                            <p className=" text-sm">
                               + {t("plus_more", { count: recurringStrings.length - 5 })}
                             </p>
                           </Tooltip>
@@ -583,23 +591,27 @@ const BookingPage = ({
                     <div className="text-bookinghighlight flex items-start text-sm">
                       <FiUser
                         className={`ml-[2px] mt-[2px] inline-block h-4 w-4 ltr:mr-[10px] rtl:ml-[10px] ${
-                          booking && booking.attendees.length / eventType.seatsPerTimeSlot >= 0.5
+                          currentSlotBooking &&
+                          currentSlotBooking.attendees.length / eventType.seatsPerTimeSlot >= 0.5
                             ? "text-rose-600"
-                            : booking && booking.attendees.length / eventType.seatsPerTimeSlot >= 0.33
+                            : currentSlotBooking &&
+                              currentSlotBooking.attendees.length / eventType.seatsPerTimeSlot >= 0.33
                             ? "text-yellow-500"
                             : "text-bookinghighlight"
                         }`}
                       />
                       <p
                         className={`${
-                          booking && booking.attendees.length / eventType.seatsPerTimeSlot >= 0.5
+                          currentSlotBooking &&
+                          currentSlotBooking.attendees.length / eventType.seatsPerTimeSlot >= 0.5
                             ? "text-rose-600"
-                            : booking && booking.attendees.length / eventType.seatsPerTimeSlot >= 0.33
+                            : currentSlotBooking &&
+                              currentSlotBooking.attendees.length / eventType.seatsPerTimeSlot >= 0.33
                             ? "text-yellow-500"
                             : "text-bookinghighlight"
                         } mb-2 font-medium`}>
-                        {booking
-                          ? eventType.seatsPerTimeSlot - booking.attendees.length
+                        {currentSlotBooking
+                          ? eventType.seatsPerTimeSlot - currentSlotBooking.attendees.length
                           : eventType.seatsPerTimeSlot}{" "}
                         / {eventType.seatsPerTimeSlot} {t("seats_available")}
                       </p>
@@ -662,7 +674,7 @@ function ErrorMessage({ error }: { error: unknown }) {
         <div className="flex-shrink-0">
           <FiAlertTriangle className="h-5 w-5 text-blue-400" aria-hidden="true" />
         </div>
-        <div className="ltr:ml-3 rtl:mr-3">
+        <div className="ms-3">
           <p className="text-sm text-blue-700">
             {rescheduleUid ? t("reschedule_fail") : t("booking_fail")}{" "}
             {error instanceof HttpError || error instanceof Error ? (

apps/web/components/dialog/ChargeCardDialog.tsx

@@ -0,0 +1,100 @@
+import { Trans } from "next-i18next";
+import { useState } from "react";
+import type { Dispatch, SetStateAction } from "react";
+import { IntlProvider, FormattedNumber } from "react-intl";
+
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { trpc } from "@calcom/trpc/react";
+import {
+  Button,
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  showToast,
+} from "@calcom/ui";
+import { FiCreditCard, FiAlertTriangle } from "@calcom/ui/components/icon";
+
+interface IRescheduleDialog {
+  isOpenDialog: boolean;
+  setIsOpenDialog: Dispatch<SetStateAction<boolean>>;
+  bookingId: number;
+  paymentAmount: number;
+  paymentCurrency: string;
+}
+
+export const ChargeCardDialog = (props: IRescheduleDialog) => {
+  const { t } = useLocale();
+  const utils = trpc.useContext();
+  const { isOpenDialog, setIsOpenDialog, bookingId } = props;
+  const [chargeError, setChargeError] = useState(false);
+  const chargeCardMutation = trpc.viewer.payments.chargeCard.useMutation({
+    onSuccess: () => {
+      utils.viewer.bookings.invalidate();
+      setIsOpenDialog(false);
+      showToast("Charge successful", "success");
+    },
+    onError: () => {
+      setChargeError(true);
+    },
+  });
+
+  return (
+    <Dialog open={isOpenDialog} onOpenChange={setIsOpenDialog}>
+      <DialogContent>
+        <div className="flex flex-row space-x-3">
+          <div className="flex h-10 w-10 flex-shrink-0 justify-center rounded-full bg-[#FAFAFA]">
+            <FiCreditCard className="m-auto h-6 w-6" />
+          </div>
+          <div className="pt-1">
+            <DialogHeader title={t("charge_card")} />
+            <Trans i18nKey="charge_card_dialog_body">
+              <p className="text-sm text-gray-500">
+                You are about to charge the attendee{" "}
+                <IntlProvider locale="en">
+                  <FormattedNumber
+                    value={props.paymentAmount / 100.0}
+                    style="currency"
+                    currency={props.paymentCurrency?.toUpperCase()}
+                  />
+                </IntlProvider>
+                . Are you sure you want to continue?
+              </p>
+            </Trans>
+
+            {chargeError && (
+              <div className="mt-4 flex text-red-500">
+                <FiAlertTriangle className="mr-2 h-5 w-5 " aria-hidden="true" />
+                <p className="text-sm">{t("error_charging_card")}</p>
+              </div>
+            )}
+
+            <DialogFooter>
+              <DialogClose />
+              <Button
+                data-testid="send_request"
+                disabled={chargeCardMutation.isLoading || chargeError}
+                onClick={() =>
+                  chargeCardMutation.mutate({
+                    bookingId,
+                  })
+                }>
+                <Trans i18nKey="charge_card_confirm">
+                  Charge attendee{" "}
+                  <IntlProvider locale="en">
+                    <FormattedNumber
+                      value={props.paymentAmount / 100.0}
+                      style="currency"
+                      currency={props.paymentCurrency?.toUpperCase()}
+                    />
+                  </IntlProvider>
+                </Trans>
+              </Button>
+            </DialogFooter>
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+};

apps/web/components/dialog/EditLocationDialog.tsx

@@ -33,6 +33,7 @@ interface ISetLocationDialog {
   saveLocation: (newLocationType: EventLocationType["type"], details: { [key: string]: string }) => void;
   selection?: LocationOption;
   booking?: BookingItem;
+  isTeamEvent?: boolean;
   defaultValues?: LocationObject[];
   setShowLocationModal: React.Dispatch<React.SetStateAction<boolean>>;
   isOpenDialog: boolean;
@@ -74,6 +75,7 @@ export const EditLocationDialog = (props: ISetLocationDialog) => {
     saveLocation,
     selection,
     booking,
+    isTeamEvent,
     setShowLocationModal,
     isOpenDialog,
     defaultValues,
@@ -162,7 +164,7 @@ export const EditLocationDialog = (props: ISetLocationDialog) => {
 
       return (
         <div>
-          <label htmlFor="locationInput" className="block text-sm font-medium text-gray-700">
+          <label htmlFor="locationInput" className="text-default block text-sm font-medium">
             {t(eventLocationType.messageForOrganizer || "")}
           </label>
           <div className="mt-1">
@@ -172,6 +174,7 @@ export const EditLocationDialog = (props: ISetLocationDialog) => {
               id="locationInput"
               placeholder={t(eventLocationType.organizerInputPlaceholder || "")}
               required
+              className="border-default block w-full rounded-sm text-sm"
               // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
               defaultValue={
                 defaultLocation ? defaultLocation[eventLocationType.defaultValueVariable] : undefined
@@ -180,7 +183,7 @@ export const EditLocationDialog = (props: ISetLocationDialog) => {
             <ErrorMessage
               errors={locationFormMethods.formState.errors}
               name={eventLocationType.variable}
-              className="mt-1 text-sm text-red-500"
+              className="text-error mt-1 text-sm"
               as="p"
             />
           </div>
@@ -206,7 +209,7 @@ export const EditLocationDialog = (props: ISetLocationDialog) => {
         </div>
       );
     } else {
-      return <p className="text-sm">{getMessageForOrganizer(selectedLocation, t)}</p>;
+      return <p className="text-default text-sm">{getMessageForOrganizer(selectedLocation, t)}</p>;
     }
   })();
 
@@ -214,16 +217,16 @@ export const EditLocationDialog = (props: ISetLocationDialog) => {
     <Dialog open={isOpenDialog} onOpenChange={(open) => setShowLocationModal(open)}>
       <DialogContent>
         <div className="flex flex-row space-x-3">
-          <div className="bg-secondary-100 mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full sm:mx-0 sm:h-10 sm:w-10">
-            <FiMapPin className="text-primary-600 h-6 w-6" />
+          <div className="bg-subtle mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full sm:mx-0 sm:h-10 sm:w-10">
+            <FiMapPin className="text-emphasis h-6 w-6" />
           </div>
           <div className="w-full">
             <div className="mt-3 text-center sm:mt-0 sm:text-left">
-              <h3 className="text-lg font-medium leading-6 text-gray-900" id="modal-title">
+              <h3 className="text-emphasis text-lg font-medium leading-6" id="modal-title">
                 {t("edit_location")}
               </h3>
               {!booking && (
-                <p className="text-sm text-gray-400">
+                <p className="text-default text-sm">
                   <Trans i18nKey="cant_find_the_right_video_app_visit_our_app_store">
                     Can&apos;t find the right video app? Visit our
                     <Link className="cursor-pointer text-blue-500 underline" href="/apps/categories/video">
@@ -238,8 +241,8 @@ export const EditLocationDialog = (props: ISetLocationDialog) => {
 
             {booking && (
               <>
-                <p className="mt-6 mb-2 ml-1 text-sm font-bold text-black">{t("current_location")}:</p>
-                <p className="mb-2 ml-1 text-sm text-black">
+                <p className="text-emphasis mt-6 mb-2 ml-1 text-sm font-bold">{t("current_location")}:</p>
+                <p className="text-emphasis mb-2 ml-1 text-sm">
                   {getHumanReadableLocationValue(booking.location, t)}
                 </p>
               </>
@@ -290,7 +293,9 @@ export const EditLocationDialog = (props: ISetLocationDialog) => {
                 query={locationsQuery}
                 success={({ data }) => {
                   if (!data.length) return null;
-                  const locationOptions = [...data];
+                  const locationOptions = [...data].filter((option) => {
+                    return !isTeamEvent ? option.label !== "Conferencing" : true;
+                  });
                   if (booking) {
                     locationOptions.map((location) =>
                       location.options.filter((l) => !["phone", "attendeeInPerson"].includes(l.value))

apps/web/components/dialog/RescheduleDialog.tsx

@@ -48,10 +48,10 @@ export const RescheduleDialog = (props: IRescheduleDialog) => {
           </div>
           <div className="pt-1">
             <DialogHeader title={t("send_reschedule_request")} />
-            <p className="text-sm text-gray-500">{t("reschedule_modal_description")}</p>
-            <p className="mt-6 mb-2 text-sm font-bold text-black">
+            <p className="text-subtle text-sm">{t("reschedule_modal_description")}</p>
+            <p className="text-emphasis mt-6 mb-2 text-sm font-bold">
               {t("reason_for_reschedule_request")}
-              <span className="font-normal text-gray-500"> (Optional)</span>
+              <span className="text-subtle font-normal"> (Optional)</span>
             </p>
             <TextArea
               data-testid="reschedule_reason"

apps/web/components/error/error-page.tsx

@@ -29,15 +29,15 @@ const ErrorDebugPanel: React.FC<{ error: Props["error"]; children?: never }> = (
   ];
 
   return (
-    <div className="overflow-hidden bg-white shadow sm:rounded-lg">
-      <div className="border-t border-gray-200 px-4 py-5 sm:p-0">
-        <dl className="sm:divide-y sm:divide-gray-200">
+    <div className="bg-default overflow-hidden shadow sm:rounded-lg">
+      <div className="border-subtle border-t px-4 py-5 sm:p-0">
+        <dl className="sm:divide-subtle sm:divide-y">
           {debugMap.map(([key, value]) => {
             if (value !== undefined) {
               return (
                 <div key={key} className="py-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:py-5 sm:px-6">
-                  <dt className="text-sm font-bold text-black">{key}</dt>
-                  <dd className="mt-1 text-sm text-black sm:col-span-2 sm:mt-0">{value}</dd>
+                  <dt className="text-emphasis text-sm font-bold">{key}</dt>
+                  <dd className="text-emphasis mt-1 text-sm sm:col-span-2 sm:mt-0">{value}</dd>
                 </div>
               );
             }
@@ -53,11 +53,11 @@ export const ErrorPage: React.FC<Props> = (props) => {
 
   return (
     <>
-      <div className="min-h-screen bg-white px-4">
+      <div className="bg-default min-h-screen px-4">
         <main className="mx-auto max-w-xl pb-6 pt-16 sm:pt-24">
           <div className="text-center">
-            <p className="text-sm font-semibold uppercase tracking-wide text-black">{statusCode}</p>
-            <h1 className="mt-2 text-4xl font-extrabold tracking-tight text-gray-900 sm:text-5xl">
+            <p className="text-emphasis text-sm font-semibold uppercase tracking-wide">{statusCode}</p>
+            <h1 className="text-emphasis mt-2 text-4xl font-extrabold tracking-tight sm:text-5xl">
               {message}
             </h1>
           </div>

apps/web/components/eventtype/AvailabilityTab.tsx

@@ -4,13 +4,15 @@ import type { OptionProps, SingleValueProps } from "react-select";
 import { components } from "react-select";
 
 import dayjs from "@calcom/dayjs";
+import { NewScheduleButton } from "@calcom/features/schedules";
 import classNames from "@calcom/lib/classNames";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { weekdayNames } from "@calcom/lib/weekday";
+import type { RouterOutputs } from "@calcom/trpc/react";
 import { trpc } from "@calcom/trpc/react";
 import useMeQuery from "@calcom/trpc/react/hooks/useMeQuery";
-import { Badge, Button, Select, SettingsToggle, SkeletonText } from "@calcom/ui";
-import { FiExternalLink, FiGlobe } from "@calcom/ui/components/icon";
+import { Badge, Button, Select, SettingsToggle, SkeletonText, EmptyScreen } from "@calcom/ui";
+import { FiExternalLink, FiGlobe, FiClock } from "@calcom/ui/components/icon";
 
 import { SelectSkeletonLoader } from "@components/availability/SkeletonLoader";
 
@@ -52,23 +54,24 @@ const SingleValue = ({ ...props }: SingleValueProps<AvailabilityOption>) => {
 
 const AvailabilitySelect = ({
   className = "",
+  isLoading,
+  schedules,
   ...props
 }: {
   className?: string;
   name: string;
   value: number;
+  isLoading: boolean;
+  schedules: RouterOutputs["viewer"]["availability"]["list"]["schedules"] | [];
   onBlur: () => void;
   onChange: (value: AvailabilityOption | null) => void;
 }) => {
-  const { data, isLoading } = trpc.viewer.availability.list.useQuery();
   const { t } = useLocale();
 
   if (isLoading) {
     return <SelectSkeletonLoader />;
   }
 
-  const schedules = data?.schedules || [];
-
   const options = schedules.map((schedule) => ({
     value: schedule.id,
     label: schedule.name,
@@ -107,6 +110,7 @@ const EventTypeScheduleDetails = () => {
   const { watch } = useFormContext<FormValues>();
 
   const scheduleId = watch("schedule");
+
   const { isLoading, data: schedule } = trpc.viewer.availability.schedule.get.useQuery(
     { scheduleId: scheduleId || loggedInUser?.defaultScheduleId || undefined },
     { enabled: !!scheduleId || !!loggedInUser?.defaultScheduleId }
@@ -116,7 +120,7 @@ const EventTypeScheduleDetails = () => {
     schedule?.schedule.filter((item) => item.days.includes((dayNum + 1) % 7)) || [];
 
   return (
-    <div className="space-y-4 rounded border px-6 pb-4">
+    <div className="border-default space-y-4 rounded border px-6 pb-4">
       <ol className="table border-collapse text-sm">
         {weekdayNames(i18n.language, 1, "long").map((day, index) => {
           const isAvailable = !!filterDays(index).length;
@@ -124,8 +128,8 @@ const EventTypeScheduleDetails = () => {
             <li key={day} className="my-6 flex border-transparent last:mb-2">
               <span
                 className={classNames(
-                  "w-20 font-medium sm:w-32",
-                  !isAvailable && "text-gray-500 opacity-50"
+                  "w-20 font-medium sm:w-32 ",
+                  !isAvailable ? "text-subtle line-through" : "text-default"
                 )}>
                 {day}
               </span>
@@ -134,25 +138,25 @@ const EventTypeScheduleDetails = () => {
               ) : isAvailable ? (
                 <div className="space-y-3 text-right">
                   {filterDays(index).map((dayRange, i) => (
-                    <div key={i} className="flex items-center leading-4">
+                    <div key={i} className="text-default flex items-center leading-4">
                       <span className="w-16 sm:w-28 sm:text-left">
                         {format(dayRange.startTime, timeFormat === 12)}
                       </span>
-                      <span className="ltr:ml-4 rtl:mr-4">-</span>
+                      <span className="ms-4">-</span>
                       <div className="ml-6">{format(dayRange.endTime, timeFormat === 12)}</div>
                     </div>
                   ))}
                 </div>
               ) : (
-                <span className="ml-6 text-gray-500 opacity-50 sm:ml-0">{t("unavailable")}</span>
+                <span className="text-subtle ml-6 sm:ml-0">{t("unavailable")}</span>
               )}
             </li>
           );
         })}
       </ol>
-      <hr />
+      <hr className="border-subtle" />
       <div className="flex flex-col justify-center gap-2 sm:flex-row sm:justify-between">
-        <span className="flex items-center justify-center text-sm text-gray-600 sm:justify-start">
+        <span className="text-default flex items-center justify-center text-sm sm:justify-start">
           <FiGlobe className="ltr:mr-2 rtl:ml-2" />
           {schedule?.timeZone || <SkeletonText className="block h-5 w-32" />}
         </span>
@@ -174,23 +178,40 @@ const EventTypeScheduleDetails = () => {
 
 const EventTypeSchedule = () => {
   const { t } = useLocale();
+  const { data: schedules, isLoading } = trpc.viewer.availability.list.useQuery();
+
+  if (!schedules?.schedules.length && !isLoading)
+    return (
+      <EmptyScreen
+        Icon={FiClock}
+        headline={t("new_schedule_heading")}
+        description={t("new_schedule_description")}
+        buttonRaw={<NewScheduleButton fromEventType />}
+        border={false}
+      />
+    );
+
   return (
     <div className="space-y-4">
       <div>
-        <label htmlFor="availability" className="mb-2 block text-sm font-medium leading-none text-gray-700">
+        <label htmlFor="availability" className="text-default mb-2 block text-sm font-medium leading-none">
           {t("availability")}
         </label>
         <Controller
           name="schedule"
           render={({ field }) => (
-            <AvailabilitySelect
-              value={field.value}
-              onBlur={field.onBlur}
-              name={field.name}
-              onChange={(selected) => {
-                field.onChange(selected?.value || null);
-              }}
-            />
+            <>
+              <AvailabilitySelect
+                value={field.value}
+                onBlur={field.onBlur}
+                name={field.name}
+                schedules={schedules?.schedules || []}
+                isLoading={isLoading}
+                onChange={(selected) => {
+                  field.onChange(selected?.value || null);
+                }}
+              />
+            </>
           )}
         />
       </div>

apps/web/components/eventtype/CustomEventTypeModal.tsx

@@ -58,35 +58,35 @@ const CustomEventTypeModalForm: FC<CustomEventTypeModalFormProps> = (props) => {
         className="mb-0"
       />
       <div className="pt-6 text-sm">
-        <div className="mb-6 rounded-md bg-gray-100 p-2">
-          <h1 className="mb-2 ml-1 font-medium text-gray-900">{t("available_variables")}</h1>
+        <div className="bg-subtle mb-6 rounded-md p-2">
+          <h1 className="text-emphasis mb-2 ml-1 font-medium">{t("available_variables")}</h1>
           <div className="mb-2.5 flex font-normal">
-            <p className="ml-1 mr-5 w-28 text-gray-400">{`{Event type title}`}</p>
-            <p className="text-gray-900">{t("event_name_info")}</p>
+            <p className="text-subtle ml-1 mr-5 w-28">{`{Event type title}`}</p>
+            <p className="text-emphasis">{t("event_name_info")}</p>
           </div>
           <div className="mb-2.5 flex font-normal">
-            <p className="ml-1 mr-5 w-28 text-gray-400">{`{Organiser}`}</p>
-            <p className="text-gray-900">{t("your_full_name")}</p>
+            <p className="text-subtle ml-1 mr-5 w-28">{`{Organiser}`}</p>
+            <p className="text-emphasis">{t("your_full_name")}</p>
           </div>
           <div className="mb-2.5 flex font-normal">
-            <p className="ml-1 mr-5 w-28 text-gray-400">{`{Scheduler}`}</p>
-            <p className="text-gray-900">{t("scheduler_full_name")}</p>
+            <p className="text-subtle ml-1 mr-5 w-28">{`{Scheduler}`}</p>
+            <p className="text-emphasis">{t("scheduler_full_name")}</p>
           </div>
           <div className="mb-1 flex font-normal">
-            <p className="ml-1 mr-5 w-28 text-gray-400">{`{Location}`}</p>
-            <p className="text-gray-900">{t("location_info")}</p>
+            <p className="text-subtle ml-1 mr-5 w-28">{`{Location}`}</p>
+            <p className="text-emphasis">{t("location_info")}</p>
           </div>
         </div>
         <h1 className="mb-2 text-[14px] font-medium leading-4">{t("preview")}</h1>
         <div
-          className="flex h-[212px] w-full rounded-md border-y bg-cover bg-center"
+          className="flex h-[212px] w-full rounded-md border-y bg-cover bg-center dark:invert"
           style={{
             backgroundImage: "url(/calendar-preview.svg)",
           }}>
           <div className="m-auto flex items-center justify-center self-stretch">
-            <div className="mt-3 ml-11 box-border h-[110px] w-[120px] flex-col items-start gap-1 rounded-md border border-solid border-black bg-gray-100 text-[12px] leading-3">
-              <p className="overflow-hidden text-ellipsis p-1.5 font-medium text-gray-900">{previewText}</p>
-              <p className="ml-1.5 text-[10px] font-normal text-gray-600">8 - 10 AM</p>
+            <div className="bg-subtle mt-3 ml-11 box-border h-[110px] w-[120px] flex-col items-start gap-1 rounded-md border border-solid border-black text-[12px] leading-3">
+              <p className="text-emphasis overflow-hidden text-ellipsis p-1.5 font-medium">{previewText}</p>
+              <p className="text-default ml-1.5 text-[10px] font-normal">8 - 10 AM</p>
             </div>
           </div>
         </div>

apps/web/components/eventtype/EventAdvancedTab.tsx

@@ -8,13 +8,15 @@ import { v5 as uuidv5 } from "uuid";
 
 import type { EventNameObjectType } from "@calcom/core/event";
 import { getEventName } from "@calcom/core/event";
+import getLocationsOptionsForSelect from "@calcom/features/bookings/lib/getLocationOptionsForSelect";
 import DestinationCalendarSelector from "@calcom/features/calendars/DestinationCalendarSelector";
 import { FormBuilder } from "@calcom/features/form-builder/FormBuilder";
-import { APP_NAME, CAL_URL, IS_SELF_HOSTED } from "@calcom/lib/constants";
+import { classNames } from "@calcom/lib";
+import { APP_NAME, CAL_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import type { Prisma } from "@calcom/prisma/client";
 import { trpc } from "@calcom/trpc/react";
-import { Badge, Button, Checkbox, Label, SettingsToggle, showToast, TextField, Tooltip } from "@calcom/ui";
+import { Button, Checkbox, Label, SettingsToggle, showToast, TextField, Tooltip, Alert } from "@calcom/ui";
 import { FiEdit, FiCopy } from "@calcom/ui/components/icon";
 
 import RequiresConfirmationController from "./RequiresConfirmationController";
@@ -56,6 +58,7 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
   const [requiresConfirmation, setRequiresConfirmation] = useState(eventType.requiresConfirmation);
   const placeholderHashedLink = `${CAL_URL}/d/${hashedUrl}/${eventType.slug}`;
   const seatsEnabled = formMethods.watch("seatsPerTimeSlotEnabled");
+  const noShowFeeEnabled = eventType.metadata.apps?.stripe?.paymentOption === "HOLD";
 
   useEffect(() => {
     !hashedUrl && setHashedUrl(generateHashedLink(eventType.users[0]?.id ?? team?.id));
@@ -99,7 +102,7 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
             <Link
               href="/apps/categories/calendar"
               target="_blank"
-              className="text-sm text-gray-600 hover:text-gray-900">
+              className="hover:text-emphasis text-default text-sm">
               {t("add_another_calendar")}
             </Link>
           </div>
@@ -118,7 +121,7 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
               )}
             />
           </div>
-          <p className="text-sm text-gray-600">{t("select_which_cal")}</p>
+          <p className="text-default text-sm">{t("select_which_cal")}</p>
         </div>
       )}
       <div className="w-full">
@@ -134,28 +137,33 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
               StartIcon={FiEdit}
               variant="icon"
               color="minimal"
-              className="hover:stroke-3 min-w-fit px-0 hover:bg-transparent hover:text-black"
+              className="hover:stroke-3 hover:text-emphasis min-w-fit px-0 hover:bg-transparent"
               onClick={() => setShowEventNameTip((old) => !old)}
               aria-label="edit custom name"
             />
           }
         />
       </div>
-      <hr />
+      <hr className="border-subtle" />
       <FormBuilder
         title={t("booking_questions_title")}
         description={t("booking_questions_description")}
         addFieldLabel={t("add_a_booking_question")}
         formProp="bookingFields"
+        dataStore={{
+          options: {
+            locations: getLocationsOptionsForSelect(eventType?.locations ?? [], t),
+          },
+        }}
       />
-      <hr />
+      <hr className="border-subtle" />
       <RequiresConfirmationController
         seatsEnabled={seatsEnabled}
         metadata={eventType.metadata}
         requiresConfirmation={requiresConfirmation}
         onRequiresConfirmation={setRequiresConfirmation}
       />
-      <hr />
+      <hr className="border-subtle" />
       <Controller
         name="hideCalendarNotes"
         control={formMethods.control}
@@ -169,7 +177,7 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
           />
         )}
       />
-      <hr />
+      <hr className="border-subtle" />
       <Controller
         name="successRedirectUrl"
         control={formMethods.control}
@@ -183,9 +191,10 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
                 setRedirectUrlVisible(e);
                 onChange(e ? value : "");
               }}>
-              {/* Textfield has some margin by default we remove that so we can keep consitant aligment */}
-              <div className="lg:-ml-2">
+              {/* Textfield has some margin by default we remove that so we can keep consistent alignment */}
+              <div className="lg:-ml-2 lg:-mb-2">
                 <TextField
+                  className="w-full"
                   label={t("redirect_success_booking")}
                   labelSrOnly
                   placeholder={t("external_redirect_url")}
@@ -194,28 +203,19 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
                   defaultValue={eventType.successRedirectUrl || ""}
                   {...formMethods.register("successRedirectUrl")}
                 />
-                <div className="mt-2 flex">
-                  <Checkbox
-                    description={t("disable_success_page")}
-                    // Disable if it's not Self Hosted or if the redirect url is not set
-                    disabled={!IS_SELF_HOSTED || !formMethods.watch("successRedirectUrl")}
-                    {...formMethods.register("metadata.disableSuccessPage")}
-                  />
-                  {/*TODO: Extract it out into a component when used more than once*/}
-                  {!IS_SELF_HOSTED && (
-                    <Link href="https://cal.com/pricing" target="_blank">
-                      <Badge variant="orange" className="ml-2">
-                        Platform Only
-                      </Badge>
-                    </Link>
-                  )}
+                <div
+                  className={classNames(
+                    "p-1 text-sm text-orange-600",
+                    formMethods.getValues("successRedirectUrl") ? "block" : "hidden"
+                  )}>
+                  {t("redirect_url_warning")}
                 </div>
               </div>
             </SettingsToggle>
           </>
         )}
       />
-      <hr />
+      <hr className="border-subtle" />
       <SettingsToggle
         data-testid="hashedLinkCheck"
         title={t("private_link")}
@@ -248,7 +248,7 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
                       showToast(t("enabled_after_update_description"), "warning");
                     }
                   }}
-                  className="hover:stroke-3 hover:bg-transparent hover:text-black"
+                  className="hover:stroke-3 hover:text-emphasis hover:bg-transparent"
                   type="button">
                   <FiCopy />
                 </Button>
@@ -257,60 +257,64 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
           />
         </div>
       </SettingsToggle>
-      <hr />
+      <hr className="border-subtle" />
       <Controller
         name="seatsPerTimeSlotEnabled"
         control={formMethods.control}
         defaultValue={!!eventType.seatsPerTimeSlot}
         render={({ field: { value, onChange } }) => (
-          <SettingsToggle
-            data-testid="offer-seats-toggle"
-            title={t("offer_seats")}
-            description={t("offer_seats_description")}
-            checked={value}
-            onCheckedChange={(e) => {
-              // Enabling seats will disable guests and requiring confirmation until fully supported
-              if (e) {
-                toggleGuests(false);
-                formMethods.setValue("requiresConfirmation", false);
-                setRequiresConfirmation(false);
-                formMethods.setValue("seatsPerTimeSlot", 2);
-              } else {
-                formMethods.setValue("seatsPerTimeSlot", null);
-                toggleGuests(true);
-              }
-              onChange(e);
-            }}>
-            <Controller
-              name="seatsPerTimeSlot"
-              control={formMethods.control}
-              defaultValue={eventType.seatsPerTimeSlot}
-              render={({ field: { value, onChange } }) => (
-                <div className="lg:-ml-2">
-                  <TextField
-                    required
-                    name="seatsPerTimeSlot"
-                    labelSrOnly
-                    label={t("number_of_seats")}
-                    type="number"
-                    defaultValue={value || 2}
-                    min={1}
-                    addOnSuffix={<>{t("seats")}</>}
-                    onChange={(e) => {
-                      onChange(Math.abs(Number(e.target.value)));
-                    }}
-                  />
-                  <div className="mt-2">
-                    <Checkbox
-                      description={t("show_attendees")}
-                      onChange={(e) => formMethods.setValue("seatsShowAttendees", e.target.checked)}
-                      defaultChecked={!!eventType.seatsShowAttendees}
+          <>
+            <SettingsToggle
+              data-testid="offer-seats-toggle"
+              title={t("offer_seats")}
+              description={t("offer_seats_description")}
+              checked={value}
+              disabled={noShowFeeEnabled}
+              onCheckedChange={(e) => {
+                // Enabling seats will disable guests and requiring confirmation until fully supported
+                if (e) {
+                  toggleGuests(false);
+                  formMethods.setValue("requiresConfirmation", false);
+                  setRequiresConfirmation(false);
+                  formMethods.setValue("seatsPerTimeSlot", 2);
+                } else {
+                  formMethods.setValue("seatsPerTimeSlot", null);
+                  toggleGuests(true);
+                }
+                onChange(e);
+              }}>
+              <Controller
+                name="seatsPerTimeSlot"
+                control={formMethods.control}
+                defaultValue={eventType.seatsPerTimeSlot}
+                render={({ field: { value, onChange } }) => (
+                  <div className="lg:-ml-2">
+                    <TextField
+                      required
+                      name="seatsPerTimeSlot"
+                      labelSrOnly
+                      label={t("number_of_seats")}
+                      type="number"
+                      defaultValue={value || 2}
+                      min={1}
+                      addOnSuffix={<>{t("seats")}</>}
+                      onChange={(e) => {
+                        onChange(Math.abs(Number(e.target.value)));
+                      }}
                     />
+                    <div className="mt-2">
+                      <Checkbox
+                        description={t("show_attendees")}
+                        onChange={(e) => formMethods.setValue("seatsShowAttendees", e.target.checked)}
+                        defaultChecked={!!eventType.seatsShowAttendees}
+                      />
+                    </div>
                   </div>
-                </div>
-              )}
-            />
-          </SettingsToggle>
+                )}
+              />
+            </SettingsToggle>
+            {noShowFeeEnabled && <Alert severity="warning" title={t("seats_and_no_show_fee_error")} />}
+          </>
         )}
       />
 

apps/web/components/eventtype/EventAppsTab.tsx

@@ -84,7 +84,7 @@ export const EventAppsTab = ({ eventType }: { eventType: EventType }) => {
       </div>
       <div>
         {!isLoading && notInstalledApps?.length ? (
-          <h2 className="mt-0 mb-2 text-lg font-semibold text-gray-900">Available Apps</h2>
+          <h2 className="text-emphasis mt-0 mb-2 text-lg font-semibold">Available Apps</h2>
         ) : null}
         <div className="before:border-0">
           {notInstalledApps?.map((app) => (

apps/web/components/eventtype/EventLimitsTab.tsx

@@ -88,6 +88,7 @@ const MinimumBookingNoticeInput = React.forwardRef<
           label={t("minimum_booking_notice")}
           type="number"
           placeholder="0"
+          min={0}
           className="mb-0 h-[38px] rounded-[4px] ltr:mr-2 rtl:ml-2"
         />
         <input type="hidden" ref={ref} {...passThroughProps} />
@@ -253,7 +254,7 @@ export const EventLimitsTab = ({ eventType }: Pick<EventTypeSetupProps, "eventTy
           </div>
         </div>
       </div>
-      <hr />
+      <hr className="border-subtle" />
       <Controller
         name="bookingLimits"
         control={formMethods.control}
@@ -275,7 +276,7 @@ export const EventLimitsTab = ({ eventType }: Pick<EventTypeSetupProps, "eventTy
           </SettingsToggle>
         )}
       />
-      <hr />
+      <hr className="border-subtle" />
       <Controller
         name="durationLimits"
         control={formMethods.control}
@@ -302,7 +303,7 @@ export const EventLimitsTab = ({ eventType }: Pick<EventTypeSetupProps, "eventTy
           </SettingsToggle>
         )}
       />
-      <hr />
+      <hr className="border-subtle" />
       <Controller
         name="periodType"
         control={formMethods.control}
@@ -321,14 +322,14 @@ export const EventLimitsTab = ({ eventType }: Pick<EventTypeSetupProps, "eventTy
                 return (
                   <div
                     className={classNames(
-                      "mb-2 flex flex-wrap items-center text-sm",
+                      "text-default mb-2 flex flex-wrap items-center text-sm",
                       watchPeriodType === "UNLIMITED" && "pointer-events-none opacity-30"
                     )}
                     key={period.type}>
                     <RadioGroup.Item
                       id={period.type}
                       value={period.type}
-                      className="min-w-4 flex h-4 w-4 cursor-pointer items-center rounded-full border border-black bg-white focus:border-2 focus:outline-none ltr:mr-2 rtl:ml-2">
+                      className="min-w-4 bg-default flex h-4 w-4 cursor-pointer items-center rounded-full border border-black focus:border-2 focus:outline-none ltr:mr-2 rtl:ml-2">
                       <RadioGroup.Indicator className="relative flex h-4 w-4 items-center justify-center after:block after:h-2 after:w-2 after:rounded-full after:bg-black" />
                     </RadioGroup.Item>
                     {period.prefix ? <span>{period.prefix}&nbsp;</span> : null}
@@ -336,14 +337,14 @@ export const EventLimitsTab = ({ eventType }: Pick<EventTypeSetupProps, "eventTy
                       <div className="flex h-9">
                         <Input
                           type="number"
-                          className="block w-16 rounded-md border-gray-300 py-3 text-sm [appearance:textfield] ltr:mr-2 rtl:ml-2"
+                          className="border-default block w-16 rounded-md py-3 text-sm [appearance:textfield] ltr:mr-2 rtl:ml-2"
                           placeholder="30"
                           {...formMethods.register("periodDays", { valueAsNumber: true })}
                           defaultValue={eventType.periodDays || 30}
                         />
                         <select
                           id=""
-                          className="block h-9 w-full rounded-md border-gray-300 py-2 pl-3 pr-10 text-sm focus:outline-none"
+                          className="border-default bg-default text-default block h-9 w-full rounded-md py-2 pl-3 pr-10 text-sm focus:outline-none"
                           {...formMethods.register("periodCountCalendarDays")}
                           defaultValue={eventType.periodCountCalendarDays ? "1" : "0"}>
                           <option value="1">{t("calendar_days")}</option>
@@ -352,7 +353,7 @@ export const EventLimitsTab = ({ eventType }: Pick<EventTypeSetupProps, "eventTy
                       </div>
                     )}
                     {period.type === "RANGE" && (
-                      <div className="inline-flex space-x-2 ltr:ml-2 ltr:mr-2 rtl:ml-2 rtl:space-x-reverse">
+                      <div className="ms-2 me-2 inline-flex space-x-2 rtl:space-x-reverse">
                         <Controller
                           name="periodDates"
                           control={formMethods.control}
@@ -372,9 +373,7 @@ export const EventLimitsTab = ({ eventType }: Pick<EventTypeSetupProps, "eventTy
                         />
                       </div>
                     )}
-                    {period.suffix ? (
-                      <span className="ltr:ml-2 ltr:mr-2 rtl:ml-2">&nbsp;{period.suffix}</span>
-                    ) : null}
+                    {period.suffix ? <span className="ms-2 me-2">&nbsp;{period.suffix}</span> : null}
                   </div>
                 );
               })}
@@ -425,6 +424,7 @@ const IntervalLimitItem = ({
         required
         type="number"
         containerClassName={textFieldSuffix ? "w-44 -mb-1" : "w-16 mb-0"}
+        className="mb-0"
         placeholder={`${value}`}
         min={step}
         step={step}

apps/web/components/eventtype/EventSetupTab.tsx

@@ -4,7 +4,7 @@ import { isValidPhoneNumber } from "libphonenumber-js";
 import { Trans } from "next-i18next";
 import Link from "next/link";
 import type { EventTypeSetupProps, FormValues } from "pages/event-types/[type]";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { Controller, useForm, useFormContext } from "react-hook-form";
 import type { MultiValue } from "react-select";
 import { z } from "zod";
@@ -16,7 +16,17 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { md } from "@calcom/lib/markdownIt";
 import { slugify } from "@calcom/lib/slugify";
 import turndown from "@calcom/lib/turndownService";
-import { Button, Editor, Label, Select, SettingsToggle, Skeleton, TextField } from "@calcom/ui";
+import {
+  Button,
+  Label,
+  Select,
+  SettingsToggle,
+  Skeleton,
+  TextField,
+  Editor,
+  SkeletonContainer,
+  SkeletonText,
+} from "@calcom/ui";
 import { FiEdit2, FiCheck, FiX, FiPlus } from "@calcom/ui/components/icon";
 
 import { EditLocationDialog } from "@components/dialog/EditLocationDialog";
@@ -35,14 +45,31 @@ const getLocationFromType = (
   }
 };
 
-const getDefaultLocationValue = (options: EventTypeSetupProps["locationOptions"], type: string) => {
-  for (const locationType of options) {
-    for (const location of locationType.options) {
-      if (location.value === type && location.disabled === false) {
-        return location;
-      }
-    }
-  }
+interface DescriptionEditorProps {
+  description?: string | null;
+}
+
+const DescriptionEditor = (props: DescriptionEditorProps) => {
+  const formMethods = useFormContext<FormValues>();
+  const [mounted, setIsMounted] = useState(false);
+  const { t } = useLocale();
+  const { description } = props;
+  useEffect(() => {
+    setIsMounted(true);
+  }, []);
+
+  return mounted ? (
+    <Editor
+      getText={() => md.render(formMethods.getValues("description") || description || "")}
+      setText={(value: string) => formMethods.setValue("description", turndown(value))}
+      excludedToolbarItems={["blockType"]}
+      placeholder={t("quick_video_meeting")}
+    />
+  ) : (
+    <SkeletonContainer>
+      <SkeletonText className="block h-24 w-full" />
+    </SkeletonContainer>
+  );
 };
 
 export const EventSetupTab = (
@@ -53,12 +80,16 @@ export const EventSetupTab = (
 ) => {
   const { t } = useLocale();
   const formMethods = useFormContext<FormValues>();
-  const { eventType, locationOptions, team, destinationCalendar } = props;
+  const { eventType, team, destinationCalendar } = props;
   const [showLocationModal, setShowLocationModal] = useState(false);
   const [editingLocationType, setEditingLocationType] = useState<string>("");
   const [selectedLocation, setSelectedLocation] = useState<LocationOption | undefined>(undefined);
   const [multipleDuration, setMultipleDuration] = useState(eventType.metadata.multipleDuration);
 
+  const locationOptions = props.locationOptions.filter((option) => {
+    return !team ? option.label !== "Conferencing" : true;
+  });
+
   const multipleDurationOptions = [5, 10, 15, 20, 25, 30, 45, 50, 60, 75, 80, 90, 120, 180].map((mins) => ({
     value: mins,
     label: t("multiple_duration_mins", { count: mins }),
@@ -198,16 +229,8 @@ export const EventSetupTab = (
 
               return (
                 <li
-                  onClick={() => {
-                    locationFormMethods.setValue("locationType", location.type);
-                    locationFormMethods.unregister("locationLink");
-                    locationFormMethods.unregister("locationAddress");
-                    locationFormMethods.unregister("locationPhoneNumber");
-                    setEditingLocationType(location.type);
-                    openLocationModal(location.type);
-                  }}
                   key={`${location.type}${index}`}
-                  className="mb-2 rounded-md border border-gray-300 py-1.5 px-2 hover:cursor-pointer">
+                  className="border-default text-default mb-2 rounded-md border py-1.5 px-2 hover:cursor-pointer">
                   <div className="flex items-center justify-between">
                     <div className="flex items-center">
                       <img
@@ -215,7 +238,7 @@ export const EventSetupTab = (
                         className="h-4 w-4"
                         alt={`${eventLocationType.label} logo`}
                       />
-                      <span className="line-clamp-1 text-sm ltr:ml-1 rtl:mr-1">{eventLabel}</span>
+                      <span className="line-clamp-1 ms-1 text-sm">{eventLabel}</span>
                     </div>
                     <div className="flex">
                       <button
@@ -229,11 +252,11 @@ export const EventSetupTab = (
                           openLocationModal(location.type);
                         }}
                         aria-label={t("edit")}
-                        className="mr-1 p-1 text-gray-500 hover:text-gray-900">
+                        className="hover:text-emphasis text-subtle mr-1 p-1">
                         <FiEdit2 className="h-4 w-4" />
                       </button>
                       <button type="button" onClick={() => removeLocation(location)} aria-label={t("remove")}>
-                        <FiX className="border-l-1 h-6 w-6 pl-1 text-gray-500 hover:text-gray-900 " />
+                        <FiX className="border-l-1 hover:text-emphasis text-subtle h-6 w-6 pl-1 " />
                       </button>
                     </div>
                   </div>
@@ -244,7 +267,7 @@ export const EventSetupTab = (
               (location) =>
                 location.type === MeetLocationType && destinationCalendar?.integration !== "google_calendar"
             ) && (
-              <div className="flex text-sm text-gray-600">
+              <div className="text-default flex text-sm">
                 <FiCheck className="mt-0.5 mr-1.5 h-2 w-2.5" />
                 <Trans i18nKey="event_type_requres_google_cal">
                   <p>
@@ -287,12 +310,7 @@ export const EventSetupTab = (
         />
         <div>
           <Label>{t("description")}</Label>
-          <Editor
-            getText={() => md.render(formMethods.getValues("description") || eventType.description || "")}
-            setText={(value: string) => formMethods.setValue("description", turndown(value))}
-            excludedToolbarItems={["blockType"]}
-            placeholder={t("quick_video_meeting")}
-          />
+          <DescriptionEditor description={eventType?.description} />
         </div>
         <TextField
           required
@@ -409,6 +427,7 @@ export const EventSetupTab = (
 
       {/* We portal this modal so we can submit the form inside. Otherwise we get issues submitting two forms at once  */}
       <EditLocationDialog
+        isTeamEvent={!!team}
         isOpenDialog={showLocationModal}
         setShowLocationModal={setShowLocationModal}
         saveLocation={saveLocation}

apps/web/components/eventtype/EventTeamTab.tsx

@@ -52,7 +52,7 @@ const CheckedHostField = ({
   options?: Options<CheckedSelectOption>;
 } & Omit<Partial<ComponentProps<typeof CheckedTeamSelect>>, "onChange" | "value">) => {
   return (
-    <div className="flex flex-col space-y-5 bg-gray-50 p-4">
+    <div className="bg-muted flex flex-col space-y-5 p-4">
       <div>
         <Label>{labelText}</Label>
         <CheckedTeamSelect

apps/web/components/eventtype/EventTypeDescriptionSafeHTML.tsx

@@ -1,11 +1,11 @@
 export type EventTypeDescriptionSafeProps = {
-  eventType: { description: string | null };
+  eventType: { description: string | null; descriptionAsSafeHTML: string | null };
 };
 
 export const EventTypeDescriptionSafeHTML = ({ eventType }: EventTypeDescriptionSafeProps) => {
   const props: JSX.IntrinsicElements["div"] = { suppressHydrationWarning: true };
-  // @ts-expect-error: @see packages/prisma/middleware/eventTypeDescriptionParseAndSanitize.ts
-  if (eventType.description) props.dangerouslySetInnerHTML = { __html: eventType.descriptionAsSafeHTML };
+  if (eventType.description)
+    props.dangerouslySetInnerHTML = { __html: eventType.descriptionAsSafeHTML || "" };
   return <div {...props} />;
 };
 

apps/web/components/eventtype/EventTypeSingleLayout.tsx

@@ -197,7 +197,7 @@ function EventTypeSingleLayout({
       heading={eventType.title}
       CTA={
         <div className="flex items-center justify-end">
-          <div className="hidden items-center rounded-md px-2 sm:hover:bg-gray-100 lg:flex">
+          <div className="sm:hover:bg-subtle hidden items-center rounded-md px-2 lg:flex">
             <Skeleton
               as={Label}
               htmlFor="hiddenSwitch"
@@ -215,7 +215,7 @@ function EventTypeSingleLayout({
           <VerticalDivider className="hidden lg:block" />
 
           {/* TODO: Figure out why combined isnt working - works in storybook */}
-          <ButtonGroup combined containerProps={{ className: "border-gray-300 hidden lg:flex" }}>
+          <ButtonGroup combined containerProps={{ className: "border-default hidden lg:flex" }}>
             {/* We have to warp this in tooltip as it has a href which disabels the tooltip on buttons */}
             <Tooltip content={t("preview")}>
               <Button
@@ -247,7 +247,7 @@ function EventTypeSingleLayout({
               tooltip={t("embed")}
             />
             <Button
-              color="secondary"
+              color="destructive"
               variant="icon"
               StartIcon={FiTrash}
               tooltip={t("delete")}
@@ -263,7 +263,7 @@ function EventTypeSingleLayout({
               <Button className="lg:hidden" StartIcon={FiMoreHorizontal} variant="icon" color="secondary" />
             </DropdownMenuTrigger>
             <DropdownMenuContent style={{ minWidth: "200px" }}>
-              <DropdownMenuItem className="focus:ring-gray-100">
+              <DropdownMenuItem className="focus:ring-muted">
                 <DropdownItem
                   target="_blank"
                   type="button"
@@ -273,7 +273,7 @@ function EventTypeSingleLayout({
                   {t("preview")}
                 </DropdownItem>
               </DropdownMenuItem>
-              <DropdownMenuItem className="focus:ring-gray-100">
+              <DropdownMenuItem className="focus:ring-muted">
                 <DropdownItem
                   type="button"
                   StartIcon={FiLink}
@@ -284,7 +284,7 @@ function EventTypeSingleLayout({
                   {t("copy_link")}
                 </DropdownItem>
               </DropdownMenuItem>
-              <DropdownMenuItem className="focus:ring-gray-100">
+              <DropdownMenuItem className="focus:ring-muted">
                 <DropdownItem
                   type="button"
                   color="destructive"
@@ -295,7 +295,7 @@ function EventTypeSingleLayout({
                 </DropdownItem>
               </DropdownMenuItem>
               <DropdownMenuSeparator />
-              <div className="flex h-9 flex-row items-center justify-between py-2 px-4 sm:hover:bg-gray-100">
+              <div className="sm:hover:bg-subtle flex h-9 flex-row items-center justify-between py-2 px-4">
                 <Skeleton
                   as={Label}
                   htmlFor="hiddenSwitch"
@@ -312,7 +312,7 @@ function EventTypeSingleLayout({
               </div>
             </DropdownMenuContent>
           </Dropdown>
-          <div className="border-l-2 border-gray-300" />
+          <div className="border-default border-l-2" />
           <Button
             className="ml-4 lg:ml-0"
             type="submit"
@@ -339,7 +339,7 @@ function EventTypeSingleLayout({
           <div className="w-full ltr:mr-2 rtl:ml-2">
             <div
               className={classNames(
-                "mt-4 rounded-md  border-gray-200 bg-white sm:mx-0 xl:mt-0",
+                "bg-default border-subtle  mt-4 rounded-md sm:mx-0 xl:mt-0",
                 disableBorder ? "border-0 " : "p-2 md:border md:p-6"
               )}>
               {children}

apps/web/components/eventtype/RecurringEventController.tsx

@@ -57,12 +57,12 @@ export default function RecurringEventController({
               {recurringEventState && (
                 <div data-testid="recurring-event-collapsible" className="text-sm">
                   <div className="flex items-center">
-                    <p className="text-gray-900 ltr:mr-2 rtl:ml-2">{t("repeats_every")}</p>
+                    <p className="text-emphasis ltr:mr-2 rtl:ml-2">{t("repeats_every")}</p>
                     <input
                       type="number"
                       min="1"
                       max="20"
-                      className="block h-[36px] w-16 rounded-md border-gray-300 text-sm [appearance:textfield] ltr:mr-2 rtl:ml-2"
+                      className="border-default bg-default text-default block h-[36px] w-16 rounded-md text-sm [appearance:textfield] ltr:mr-2 rtl:ml-2"
                       defaultValue={recurringEventState.interval}
                       onChange={(event) => {
                         const newVal = {
@@ -89,12 +89,12 @@ export default function RecurringEventController({
                     />
                   </div>
                   <div className="mt-4 flex items-center">
-                    <p className="text-gray-900 ltr:mr-2 rtl:ml-2">{t("for_a_maximum_of")}</p>
+                    <p className="text-emphasis ltr:mr-2 rtl:ml-2">{t("for_a_maximum_of")}</p>
                     <input
                       type="number"
                       min="1"
                       max="20"
-                      className="block h-[36px] w-16 rounded-md border-gray-300 text-sm [appearance:textfield] ltr:mr-2 rtl:ml-2"
+                      className="border-default bg-default text-default block h-[36px] w-16 rounded-md text-sm [appearance:textfield] ltr:mr-2 rtl:ml-2"
                       defaultValue={recurringEventState.count}
                       onChange={(event) => {
                         const newVal = {
@@ -105,7 +105,7 @@ export default function RecurringEventController({
                         setRecurringEventState(newVal);
                       }}
                     />
-                    <p className="text-gray-900 ltr:mr-2 rtl:ml-2">
+                    <p className="text-emphasis ltr:mr-2 rtl:ml-2">
                       {t("events", {
                         count: recurringEventState.count,
                       })}

apps/web/components/eventtype/RequiresConfirmationController.tsx

@@ -9,7 +9,7 @@ import type z from "zod";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import type { EventTypeMetaDataSchema } from "@calcom/prisma/zod-utils";
-import { Input, Label, SettingsToggle } from "@calcom/ui";
+import { Input, Label, SettingsToggle, RadioField } from "@calcom/ui";
 
 type RequiresConfirmationControllerProps = {
   metadata: z.infer<typeof EventTypeMetaDataSchema>;
@@ -77,72 +77,69 @@ export default function RequiresConfirmationController({
                     );
                   }
                 }}>
-                <div className="-ml-2 flex flex-col flex-wrap justify-start gap-y-2 space-y-2">
-                  <div className="flex items-center">
-                    <RadioGroup.Item
-                      id="always"
-                      value="always"
-                      className="min-w-4 flex h-4 w-4 cursor-pointer items-center rounded-full border border-black bg-white focus:border-2 focus:outline-none ltr:mr-2 rtl:ml-2">
-                      <RadioGroup.Indicator className="relative flex h-4 w-4 items-center justify-center after:block after:h-2 after:w-2 after:rounded-full after:bg-black" />
-                    </RadioGroup.Item>
-                    <Label htmlFor="always" className="!m-0 flex items-center">
-                      {t("always_requires_confirmation")}
-                    </Label>
-                  </div>
+                <div className="flex flex-col flex-wrap justify-start gap-y-2 space-y-2">
+                  <RadioField label={t("always_requires_confirmation")} id="always" value="always" />
+                  <RadioField
+                    label={
+                      <>
+                        <Trans
+                          i18nKey="when_booked_with_less_than_notice"
+                          defaults="When booked with less than <time></time> notice"
+                          components={{
+                            time: (
+                              <div className="mx-2 flex">
+                                <Input
+                                  type="number"
+                                  min={1}
+                                  onChange={(evt) => {
+                                    const val = Number(evt.target?.value);
+                                    setRequiresConfirmationSetup({
+                                      unit:
+                                        requiresConfirmationSetup?.unit ??
+                                        defaultRequiresConfirmationSetup.unit,
+                                      time: val,
+                                    });
+                                    formMethods.setValue("metadata.requiresConfirmationThreshold.time", val);
+                                  }}
+                                  className="border-default !m-0 block w-16 rounded-md text-sm [appearance:textfield]"
+                                  defaultValue={metadata?.requiresConfirmationThreshold?.time || 30}
+                                />
+                                <select
+                                  onChange={(evt) => {
+                                    const val = evt.target.value as UnitTypeLongPlural;
+                                    setRequiresConfirmationSetup({
+                                      time:
+                                        requiresConfirmationSetup?.time ??
+                                        defaultRequiresConfirmationSetup.time,
+                                      unit: val,
+                                    });
+                                    formMethods.setValue("metadata.requiresConfirmationThreshold.unit", val);
+                                  }}
+                                  className="border-default text-default bg-default ml-2 block h-9 rounded-md py-2 pl-3 pr-10 text-sm focus:outline-none"
+                                  defaultValue={
+                                    metadata?.requiresConfirmationThreshold?.unit ||
+                                    defaultRequiresConfirmationSetup.unit
+                                  }>
+                                  <option value="minutes">{t("minute_timeUnit")}</option>
+                                  <option value="hours">{t("hour_timeUnit")}</option>
+                                </select>
+                              </div>
+                            ),
+                          }}
+                        />
+                      </>
+                    }
+                    id="notice"
+                    value="notice"
+                  />
                   <div className="flex items-center">
                     <RadioGroup.Item
                       id="notice"
                       value="notice"
-                      className="min-w-4 flex h-4 w-4 cursor-pointer items-center rounded-full border border-black bg-white focus:border-2 focus:outline-none ltr:mr-2 rtl:ml-2">
+                      className="min-w-4 bg-default flex h-4 w-4 cursor-pointer items-center rounded-full border border-black focus:border-2 focus:outline-none ltr:mr-2 rtl:ml-2">
                       <RadioGroup.Indicator className="relative flex h-4 w-4 items-center justify-center after:block after:h-2 after:w-2 after:rounded-full after:bg-black" />
                     </RadioGroup.Item>
-                    <Label htmlFor="notice" className="!m-0 flex items-center">
-                      <Trans
-                        i18nKey="when_booked_with_less_than_notice"
-                        defaults="When booked with less than <time></time> notice"
-                        components={{
-                          time: (
-                            <div className="mx-2 flex">
-                              <Input
-                                type="number"
-                                min={1}
-                                onChange={(evt) => {
-                                  const val = Number(evt.target?.value);
-                                  setRequiresConfirmationSetup({
-                                    unit:
-                                      requiresConfirmationSetup?.unit ??
-                                      defaultRequiresConfirmationSetup.unit,
-                                    time: val,
-                                  });
-                                  formMethods.setValue("metadata.requiresConfirmationThreshold.time", val);
-                                }}
-                                className="!m-0 block w-16 rounded-md border-gray-300 text-sm [appearance:textfield]"
-                                defaultValue={metadata?.requiresConfirmationThreshold?.time || 30}
-                              />
-                              <select
-                                onChange={(evt) => {
-                                  const val = evt.target.value as UnitTypeLongPlural;
-                                  setRequiresConfirmationSetup({
-                                    time:
-                                      requiresConfirmationSetup?.time ??
-                                      defaultRequiresConfirmationSetup.time,
-                                    unit: val,
-                                  });
-                                  formMethods.setValue("metadata.requiresConfirmationThreshold.unit", val);
-                                }}
-                                className="ml-2 block h-9 rounded-md border-gray-300 py-2 pl-3 pr-10 text-sm focus:outline-none"
-                                defaultValue={
-                                  metadata?.requiresConfirmationThreshold?.unit ||
-                                  defaultRequiresConfirmationSetup.unit
-                                }>
-                                <option value="minutes">{t("minute_timeUnit")}</option>
-                                <option value="hours">{t("hour_timeUnit")}</option>
-                              </select>
-                            </div>
-                          ),
-                        }}
-                      />
-                    </Label>
+                    <Label htmlFor="notice" className="!m-0 flex items-center" />
                   </div>
                 </div>
               </RadioGroup.Root>

apps/web/components/eventtype/SkeletonLoader.tsx

@@ -11,7 +11,7 @@ function SkeletonLoader() {
           <SkeletonText className="h-4 w-24" />
         </div>
       </div>
-      <ul className="divide-y divide-gray-200 rounded-md border border-gray-200 bg-white sm:mx-0 sm:overflow-hidden">
+      <ul className="border-subtle bg-default divide-subtle divide-y rounded-md border sm:mx-0 sm:overflow-hidden">
         <SkeletonItem />
         <SkeletonItem />
         <SkeletonItem />
@@ -32,11 +32,11 @@ function SkeletonItem() {
         <div className="">
           <ul className="mt-2 flex space-x-4 rtl:space-x-reverse ">
             <li className="flex items-center whitespace-nowrap">
-              <FiClock className="mt-0.5 mr-1.5 inline h-4 w-4 text-gray-200" />
+              <FiClock className="text-subtle mt-0.5 mr-1.5 inline h-4 w-4" />
               <SkeletonText className="h-4 w-12" />
             </li>
             <li className="flex items-center whitespace-nowrap">
-              <FiUser className="mt-0.5 mr-1.5 inline h-4 w-4 text-gray-200" />
+              <FiUser className="text-subtle mt-0.5 mr-1.5 inline h-4 w-4" />
               <SkeletonText className="h-4 w-12" />
             </li>
           </ul>

apps/web/components/getting-started/components/CalendarItem.tsx

@@ -6,17 +6,17 @@ import { Button } from "@calcom/ui";
 interface ICalendarItem {
   title: string;
   description?: string;
-  imageSrc: string;
+  logo: string;
   type: App["type"];
 }
 
 const CalendarItem = (props: ICalendarItem) => {
-  const { title, imageSrc, type } = props;
+  const { title, logo, type } = props;
   const { t } = useLocale();
   return (
     <div className="flex flex-row items-center justify-between p-5">
       <div className="flex items-center space-x-3">
-        <img src={imageSrc} alt={title} className="h-8 w-8" />
+        <img src={logo} alt={title} className="h-8 w-8" />
         <p className="text-sm font-bold">{title}</p>
       </div>
       <InstallAppButtonWithoutPlanCheck

apps/web/components/getting-started/components/ConnectedCalendarItem.tsx

@@ -28,14 +28,14 @@ const ConnectedCalendarItem = (prop: IConnectedCalendarItem) => {
           <p className="font-sans text-sm font-bold leading-5">
             {name}
             {/* Temporarily removed till we use it on another place */}
-            {/* <span className="mx-1 rounded-[4px] bg-green-100 py-[2px] px-[6px] font-sans text-xs font-medium text-green-600">
+            {/* <span className="mx-1 rounded-[4px] bg-success py-[2px] px-[6px] font-sans text-xs font-medium text-green-600">
               {t("default")}
             </span> */}
           </p>
           <div className="fle-row flex">
             <span
               title={externalId}
-              className="max-w-44 mt-1 overflow-hidden text-ellipsis whitespace-nowrap font-sans text-sm text-gray-500">
+              className="max-w-44 text-subtle mt-1 overflow-hidden text-ellipsis whitespace-nowrap font-sans text-sm">
               {externalId}{" "}
             </span>
           </div>
@@ -44,11 +44,11 @@ const ConnectedCalendarItem = (prop: IConnectedCalendarItem) => {
         {/* <Button
           color="minimal"
           type="button"
-          className="ml-auto flex rounded-md border border-gray-200 py-[10x] px-4 font-sans text-sm">
+          className="ml-auto flex rounded-md border border-subtle py-[10x] px-4 font-sans text-sm">
           {t("edit")}
         </Button> */}
       </div>
-      <div className="h-[1px] w-full border-b border-gray-200" />
+      <div className="border-subtle h-[1px] w-full border-b" />
       <div>
         <ul className="p-4">
           {calendars?.map((calendar, i) => (

apps/web/components/getting-started/components/CreateEventsOnCalendarSelect.tsx

@@ -1,9 +1,8 @@
+import DestinationCalendarSelector from "@calcom/features/calendars/DestinationCalendarSelector";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import type { RouterInputs } from "@calcom/trpc/react";
 import { trpc } from "@calcom/trpc/react";
 
-import DestinationCalendarSelector from "@components/DestinationCalendarSelector";
-
 interface ICreateEventsOnCalendarSelectProps {
   calendar?: RouterInputs["viewer"]["setDestinationCalendar"] | null;
 }
@@ -17,7 +16,7 @@ const CreateEventsOnCalendarSelect = (props: ICreateEventsOnCalendarSelectProps)
     <>
       <div className="mt-6 flex flex-row">
         <div className="w-full">
-          <label htmlFor="createEventsOn" className="flex text-sm font-medium text-gray-700">
+          <label htmlFor="createEventsOn" className="text-default flex text-sm font-medium">
             {t("create_events_on")}
           </label>
           <div className="mt-2">

apps/web/components/getting-started/steps-views/ConnectCalendars.tsx

@@ -31,13 +31,13 @@ const ConnectedCalendars = (props: IConnectCalendarsProps) => {
         firstCalendar &&
         firstCalendar.integration &&
         firstCalendar.integration.title &&
-        firstCalendar.integration.imageSrc && (
+        firstCalendar.integration.logo && (
           <>
-            <List className="rounded-md border border-gray-200 bg-white p-0 dark:bg-black">
+            <List className="bg-default border-subtle rounded-md border p-0 dark:bg-black">
               <ConnectedCalendarItem
                 key={firstCalendar.integration.title}
                 name={firstCalendar.integration.title}
-                logo={firstCalendar.integration.imageSrc}
+                logo={firstCalendar.integration.logo}
                 externalId={
                   firstCalendar && firstCalendar.calendars && firstCalendar.calendars.length > 0
                     ? firstCalendar.calendars[0].externalId
@@ -49,22 +49,22 @@ const ConnectedCalendars = (props: IConnectCalendarsProps) => {
             </List>
             {/* Create event on selected calendar */}
             <CreateEventsOnCalendarSelect calendar={destinationCalendar} />
-            <p className="mt-4 text-sm text-gray-500">{t("connect_calendars_from_app_store")}</p>
+            <p className="text-subtle mt-4 text-sm">{t("connect_calendars_from_app_store")}</p>
           </>
         )}
 
       {/* Connect calendars list */}
       {firstCalendar === undefined && queryIntegrations.data && queryIntegrations.data.items.length > 0 && (
-        <List className="mx-1 divide-y divide-gray-200 rounded-md border border-gray-200 bg-white p-0 dark:bg-black sm:mx-0">
+        <List className="bg-default divide-subtle border-subtle mx-1 divide-y rounded-md border p-0 dark:bg-black sm:mx-0">
           {queryIntegrations.data &&
             queryIntegrations.data.items.map((item) => (
               <li key={item.title}>
-                {item.title && item.imageSrc && (
+                {item.title && item.logo && (
                   <CalendarItem
                     type={item.type}
                     title={item.title}
                     description={item.description}
-                    imageSrc={item.imageSrc}
+                    logo={item.logo}
                   />
                 )}
               </li>
@@ -73,7 +73,7 @@ const ConnectedCalendars = (props: IConnectCalendarsProps) => {
       )}
 
       {queryIntegrations.isLoading && (
-        <ul className="divide-y divide-gray-200 rounded-md border border-gray-200 bg-white p-0 dark:bg-black">
+        <ul className="bg-default divide-subtle border-subtle divide-y rounded-md border p-0 dark:bg-black">
           {[0, 0, 0, 0].map((_item, index) => {
             return (
               <li className="flex w-full flex-row justify-center border-b-0 py-6" key={index}>
@@ -89,7 +89,7 @@ const ConnectedCalendars = (props: IConnectCalendarsProps) => {
         type="button"
         data-testid="save-calendar-button"
         className={classNames(
-          "mt-8 flex w-full flex-row justify-center rounded-md border border-black bg-black p-2 text-center text-sm text-white",
+          "text-inverted mt-8 flex w-full flex-row justify-center rounded-md border border-black bg-black p-2 text-center text-sm",
           disabledNextButton ? "cursor-not-allowed opacity-20" : ""
         )}
         onClick={() => nextStep()}

apps/web/components/getting-started/steps-views/SetupAvailability.tsx

@@ -50,7 +50,7 @@ const SetupAvailability = (props: ISetupAvailabilityProps) => {
   const updateSchedule = trpc.viewer.availability.schedule.update.useMutation(mutationOptions);
   return (
     <Form
-      className="w-full bg-white text-black dark:bg-opacity-5 dark:text-white"
+      className="bg-default dark:text-inverted text-emphasis w-full dark:bg-opacity-5"
       form={availabilityForm}
       handleSubmit={async (values) => {
         try {

apps/web/components/getting-started/steps-views/UserProfile.tsx

@@ -117,7 +117,7 @@ const UserProfile = (props: IUserProfileProps) => {
           name="avatar"
           id="avatar"
           placeholder="URL"
-          className="mt-1 block w-full rounded-sm border border-gray-300 px-3 py-2 text-sm focus:border-gray-800 focus:outline-none focus:ring-gray-800"
+          className="border-default focus:ring-empthasis mt-1 block w-full rounded-sm border px-3 py-2 text-sm focus:border-gray-800 focus:outline-none"
           defaultValue={imageSrc}
         />
         <div className="flex items-center px-4">
@@ -142,19 +142,19 @@ const UserProfile = (props: IUserProfileProps) => {
         </div>
       </div>
       <fieldset className="mt-8">
-        <Label className="mb-2 block text-sm font-medium text-gray-700">{t("about")}</Label>
+        <Label className="text-default mb-2 block text-sm font-medium">{t("about")}</Label>
         <Editor
           getText={() => md.render(getValues("bio") || user?.bio || "")}
           setText={(value: string) => setValue("bio", turndown(value))}
           excludedToolbarItems={["blockType"]}
         />
-        <p className="mt-2 font-sans text-sm font-normal text-gray-600 dark:text-white">
+        <p className="dark:text-inverted text-default mt-2 font-sans text-sm font-normal">
           {t("few_sentences_about_yourself")}
         </p>
       </fieldset>
       <Button
         type="submit"
-        className="mt-8 flex w-full flex-row justify-center rounded-md border border-black bg-black p-2 text-center text-sm text-white">
+        className="text-inverted mt-8 flex w-full flex-row justify-center rounded-md border border-black bg-black p-2 text-center text-sm">
         {t("finish")}
         <ArrowRightIcon className="ml-2 h-4 w-4 self-center" aria-hidden="true" />
       </Button>

apps/web/components/getting-started/steps-views/UserSettings.tsx

@@ -73,7 +73,7 @@ const UserSettings = (props: IUserSettingsProps) => {
 
         {/* Full name textfield */}
         <div className="w-full">
-          <label htmlFor="name" className="mb-2 block text-sm font-medium text-gray-700">
+          <label htmlFor="name" className="text-default mb-2 block text-sm font-medium">
             {t("full_name")}
           </label>
           <input
@@ -85,7 +85,7 @@ const UserSettings = (props: IUserSettingsProps) => {
             type="text"
             autoComplete="off"
             autoCorrect="off"
-            className="w-full rounded-md border border-gray-300 text-sm"
+            className="border-default w-full rounded-md border text-sm"
           />
           {errors.name && (
             <p data-testid="required" className="py-2 text-xs text-red-500">
@@ -95,7 +95,7 @@ const UserSettings = (props: IUserSettingsProps) => {
         </div>
         {/* Timezone select field */}
         <div className="w-full">
-          <label htmlFor="timeZone" className="block text-sm font-medium text-gray-700">
+          <label htmlFor="timeZone" className="text-default block text-sm font-medium">
             {t("timezone")}
           </label>
 
@@ -106,7 +106,7 @@ const UserSettings = (props: IUserSettingsProps) => {
             className="mt-2 w-full rounded-md text-sm"
           />
 
-          <p className="mt-3 flex flex-row font-sans text-xs leading-tight text-gray-500 dark:text-white">
+          <p className="text-subtle dark:text-inverted mt-3 flex flex-row font-sans text-xs leading-tight">
             {t("current_time")} {dayjs().tz(selectedTimeZone).format("LT").toString().toLowerCase()}
           </p>
         </div>

apps/web/components/layouts/WizardLayout.tsx

@@ -24,7 +24,9 @@ export default function WizardLayout({
   }, [router.asPath]);
 
   return (
-    <div className="dark:bg-brand dark:text-brand-contrast min-h-screen text-black" data-testid="onboarding">
+    <div
+      className="dark:bg-brand dark:text-brand-contrast text-emphasis min-h-screen"
+      data-testid="onboarding">
       <div>
         <Toaster position="bottom-right" />
       </div>
@@ -34,7 +36,7 @@ export default function WizardLayout({
             <div className="mx-auto sm:max-w-[520px]">
               <header>
                 <p className="font-cal mb-3 text-[28px] font-medium leading-7">{title}&nbsp;</p>
-                <p className="font-sans text-sm font-normal text-gray-500">{subtitle}&nbsp;</p>
+                <p className="text-subtle font-sans text-sm font-normal">{subtitle}&nbsp;</p>
               </header>
               <Steps maxSteps={maxSteps} currentStep={currentStep} navigateToStep={noop} />
             </div>

apps/web/components/security/ChangePasswordSection.tsx

@@ -59,14 +59,14 @@ const ChangePasswordSection = () => {
 
   return (
     <>
-      <form className="divide-y divide-gray-200 lg:col-span-9" onSubmit={changePasswordHandler}>
+      <form className="divide-subtle divide-y lg:col-span-9" onSubmit={changePasswordHandler}>
         <div className="py-6 lg:pb-5">
           <div className="my-3">
-            <h2 className="font-cal text-lg font-medium leading-6 text-gray-900">{t("change_password")}</h2>
+            <h2 className="font-cal text-emphasis text-lg font-medium leading-6">{t("change_password")}</h2>
           </div>
           <div className="flex flex-col space-y-2 sm:flex-row sm:space-y-0">
             <div className="w-full ltr:mr-2 rtl:ml-2 sm:w-1/2">
-              <label htmlFor="current_password" className="block text-sm font-medium text-gray-700">
+              <label htmlFor="current_password" className="text-default block text-sm font-medium">
                 {t("current_password")}
               </label>
               <div className="mt-1">
@@ -77,13 +77,13 @@ const ChangePasswordSection = () => {
                   name="current_password"
                   id="current_password"
                   required
-                  className="block w-full rounded-sm border-gray-300 text-sm"
+                  className="border-default block w-full rounded-sm text-sm"
                   placeholder={t("your_old_password")}
                 />
               </div>
             </div>
             <div className="w-full sm:w-1/2">
-              <label htmlFor="new_password" className="block text-sm font-medium text-gray-700">
+              <label htmlFor="new_password" className="text-default block text-sm font-medium">
                 {t("new_password")}
               </label>
               <div className="mt-1">
@@ -94,7 +94,7 @@ const ChangePasswordSection = () => {
                   value={newPassword}
                   required
                   onInput={(e) => setNewPassword(e.currentTarget.value)}
-                  className="block w-full rounded-sm border-gray-300 text-sm"
+                  className="border-default block w-full rounded-sm text-sm"
                   placeholder={t("super_secure_new_password")}
                 />
               </div>

apps/web/components/security/DisableTwoFactorModal.tsx

@@ -70,10 +70,10 @@ const DisableTwoFactorAuthModal = ({ onDisable, onCancel }: DisableTwoFactorAuth
           <div className="mb-4">
             <PasswordField
               labelProps={{
-                className: "block text-sm font-medium text-gray-700",
+                className: "block text-sm font-medium text-default",
               }}
               {...form.register("password")}
-              className="mt-1 block w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:border-black focus:outline-none focus:ring-black"
+              className="border-default mt-1 block w-full rounded-md border px-3 py-2 text-sm focus:border-black focus:outline-none focus:ring-black"
             />
             <Label className="mt-4"> {t("2fa_code")}</Label>
 
@@ -82,7 +82,7 @@ const DisableTwoFactorAuthModal = ({ onDisable, onCancel }: DisableTwoFactorAuth
           </div>
 
           <div className="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse">
-            <Button type="submit" className="ltr:ml-2 ltr:mr-2 rtl:ml-2" disabled={isDisabling}>
+            <Button type="submit" className="ms-2 me-2" disabled={isDisabling}>
               {t("disable")}
             </Button>
             <Button color="secondary" onClick={onCancel}>

apps/web/components/security/DisableUserImpersonation.tsx

@@ -22,14 +22,14 @@ const DisableUserImpersonation = ({ disableImpersonation }: { disableImpersonati
       <div className="flex flex-col justify-between pt-9 pl-2 sm:flex-row">
         <div>
           <div className="flex flex-row items-center">
-            <h2 className="font-cal text-lg font-medium leading-6 text-gray-900">
+            <h2 className="font-cal text-emphasis text-lg font-medium leading-6">
               {t("user_impersonation_heading")}
             </h2>
             <Badge className="ml-2 text-xs" variant={!disableImpersonation ? "success" : "gray"}>
               {!disableImpersonation ? t("enabled") : t("disabled")}
             </Badge>
           </div>
-          <p className="mt-1 text-sm text-gray-500">{t("user_impersonation_description")}</p>
+          <p className="text-subtle mt-1 text-sm">{t("user_impersonation_description")}</p>
         </div>
         <div className="mt-5 sm:mt-0 sm:self-center">
           <Button

apps/web/components/security/EnableTwoFactorModal.tsx

@@ -135,7 +135,7 @@ const EnableTwoFactorModal = ({ onEnable, onCancel }: EnableTwoFactorModalProps)
         <WithStep step={SetupStep.ConfirmPassword} current={step}>
           <form onSubmit={handleSetup}>
             <div className="mb-4">
-              <label htmlFor="password" className="mt-4 block text-sm font-medium text-gray-700">
+              <label htmlFor="password" className="text-default mt-4 block text-sm font-medium">
                 {t("password")}
               </label>
               <div className="mt-1">
@@ -146,7 +146,7 @@ const EnableTwoFactorModal = ({ onEnable, onCancel }: EnableTwoFactorModalProps)
                   required
                   value={password}
                   onInput={(e) => setPassword(e.currentTarget.value)}
-                  className="block w-full rounded-sm border-gray-300 text-sm"
+                  className="border-default block w-full rounded-sm text-sm"
                 />
               </div>
 
@@ -178,22 +178,19 @@ const EnableTwoFactorModal = ({ onEnable, onCancel }: EnableTwoFactorModalProps)
             <WithStep step={SetupStep.ConfirmPassword} current={step}>
               <Button
                 type="submit"
-                className="ltr:ml-2 ltr:mr-2 rtl:ml-2"
+                className="ms-2 me-2"
                 onClick={handleSetup}
                 disabled={password.length === 0 || isSubmitting}>
                 {t("continue")}
               </Button>
             </WithStep>
             <WithStep step={SetupStep.DisplayQrCode} current={step}>
-              <Button
-                type="submit"
-                className="ltr:ml-2 ltr:mr-2 rtl:ml-2"
-                onClick={() => setStep(SetupStep.EnterTotpCode)}>
+              <Button type="submit" className="ms-2 me-2" onClick={() => setStep(SetupStep.EnterTotpCode)}>
                 {t("continue")}
               </Button>
             </WithStep>
             <WithStep step={SetupStep.EnterTotpCode} current={step}>
-              <Button type="submit" className="ltr:ml-2 ltr:mr-2 rtl:ml-2" disabled={isSubmitting}>
+              <Button type="submit" className="ms-2 me-2" disabled={isSubmitting}>
                 {t("enable")}
               </Button>
             </WithStep>

apps/web/components/security/TwoFactorAuthSection.tsx

@@ -17,12 +17,12 @@ const TwoFactorAuthSection = ({ twoFactorEnabled }: { twoFactorEnabled: boolean
       <div className="flex flex-col justify-between pt-9 pl-2 sm:flex-row">
         <div>
           <div className="flex flex-row items-center">
-            <h2 className="font-cal text-lg font-medium leading-6 text-gray-900">{t("2fa")}</h2>
+            <h2 className="font-cal text-emphasis text-lg font-medium leading-6">{t("2fa")}</h2>
             <Badge className="ml-2 text-xs" variant={enabled ? "success" : "gray"}>
               {enabled ? t("enabled") : t("disabled")}
             </Badge>
           </div>
-          <p className="mt-1 text-sm text-gray-500">{t("add_an_extra_layer_of_security")}</p>
+          <p className="text-subtle mt-1 text-sm">{t("add_an_extra_layer_of_security")}</p>
         </div>
         <div className="mt-5 sm:mt-0 sm:self-center">
           <Button

apps/web/components/security/TwoFactorModalHeader.tsx

@@ -4,13 +4,13 @@ const TwoFactorModalHeader = ({ title, description }: { title: string; descripti
   return (
     <div className="mb-4 sm:flex sm:items-start">
       <div className="bg-brand text-brandcontrast dark:bg-darkmodebrand dark:text-darkmodebrandcontrast mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-opacity-5 sm:mx-0 sm:h-10 sm:w-10">
-        <FiShield className="h-6 w-6 text-white" />
+        <FiShield className="text-inverted h-6 w-6" />
       </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="font-cal text-emphasis text-lg font-medium leading-6" id="modal-title">
           {title}
         </h3>
-        <p className="text-sm text-gray-400">{description}</p>
+        <p className="text-muted text-sm">{description}</p>
       </div>
     </div>
   );

apps/web/components/settings/CalendarSwitch.tsx

@@ -75,7 +75,9 @@ export function CalendarSwitch(props: {
       />
       {props.defaultSelected && (
         <Badge variant="gray">
-          <FiArrowLeft className="mr-1" /> {t("adding_events_to")}
+          <div className="flex">
+            <FiArrowLeft className="text-default mr-1" /> {t("adding_events_to")}
+          </div>
         </Badge>
       )}
     </div>

apps/web/components/settings/DisableTwoFactorModal.tsx

@@ -77,10 +77,10 @@ const DisableTwoFactorAuthModal = ({
           <div className="mb-4">
             <PasswordField
               labelProps={{
-                className: "block text-sm font-medium text-gray-700",
+                className: "block text-sm font-medium text-default",
               }}
               {...form.register("password")}
-              className="mt-1 block w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:border-black focus:outline-none focus:ring-black"
+              className="border-default mt-1 block w-full rounded-md border px-3 py-2 text-sm focus:border-black focus:outline-none focus:ring-black"
             />
             <Label className="mt-4"> {t("2fa_code")}</Label>
 
@@ -90,7 +90,7 @@ const DisableTwoFactorAuthModal = ({
           </div>
 
           <div className="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse">
-            <Button type="submit" className="ltr:ml-2 ltr:mr-2 rtl:ml-2" disabled={isDisabling}>
+            <Button type="submit" className="ms-2 me-2" disabled={isDisabling}>
               {t("disable")}
             </Button>
             <Button color="secondary" onClick={onCancel}>

apps/web/components/settings/EnableTwoFactorModal.tsx

@@ -171,22 +171,19 @@ const EnableTwoFactorModal = ({ onEnable, onCancel, open, onOpenChange }: Enable
             <WithStep step={SetupStep.ConfirmPassword} current={step}>
               <Button
                 type="submit"
-                className="ltr:ml-2 ltr:mr-2 rtl:ml-2"
+                className="ms-2 me-2"
                 onClick={handleSetup}
                 disabled={password.length === 0 || isSubmitting}>
                 {t("continue")}
               </Button>
             </WithStep>
             <WithStep step={SetupStep.DisplayQrCode} current={step}>
-              <Button
-                type="submit"
-                className="ltr:ml-2 ltr:mr-2 rtl:ml-2"
-                onClick={() => setStep(SetupStep.EnterTotpCode)}>
+              <Button type="submit" className="ms-2 me-2" onClick={() => setStep(SetupStep.EnterTotpCode)}>
                 {t("continue")}
               </Button>
             </WithStep>
             <WithStep step={SetupStep.EnterTotpCode} current={step}>
-              <Button type="submit" className="ltr:ml-2 ltr:mr-2 rtl:ml-2" disabled={isSubmitting}>
+              <Button type="submit" className="ms-2 me-2" disabled={isSubmitting}>
                 {t("enable")}
               </Button>
             </WithStep>

apps/web/components/setup/AdminUser.tsx

@@ -111,7 +111,7 @@ export const AdminUser = (props: { onSubmit: () => void; onError: () => void; on
                 <Label htmlFor="username" className={classNames(longWebsiteUrl && "mb-0")}>
                   <span className="block">{t("username")}</span>
                   {longWebsiteUrl && (
-                    <small className="items-centerpx-3 mt-2 inline-flex rounded-t-md border border-b-0 border-gray-300 bg-gray-100 py-1 px-3 text-gray-500">
+                    <small className="items-centerpx-3 bg-subtle border-default text-subtle mt-2 inline-flex rounded-t-md border border-b-0 py-1 px-3">
                       {process.env.NEXT_PUBLIC_WEBSITE_URL}
                     </small>
                   )}
@@ -119,7 +119,7 @@ export const AdminUser = (props: { onSubmit: () => void; onError: () => void; on
                 <TextField
                   addOnLeading={
                     !longWebsiteUrl && (
-                      <span className="inline-flex items-center rounded-none px-3 text-sm text-gray-500">
+                      <span className="text-subtle inline-flex items-center rounded-none px-3 text-sm">
                         {process.env.NEXT_PUBLIC_WEBSITE_URL}/
                       </span>
                     )

apps/web/components/setup/ChooseLicense.tsx

@@ -37,13 +37,13 @@ const ChooseLicense = (
         <RadioGroup.Item value="FREE">
           <div
             className={classNames(
-              "cursor-pointer space-y-2 rounded-md border bg-white p-4 hover:border-black",
+              "bg-default cursor-pointer space-y-2 rounded-md border p-4 hover:border-black",
               value === "FREE" && "ring-2 ring-black"
             )}>
-            <h2 className="font-cal text-xl text-black">{t("agplv3_license")}</h2>
+            <h2 className="font-cal text-emphasis text-xl">{t("agplv3_license")}</h2>
             <p className="font-medium text-green-800">{t("free_license_fee")}</p>
-            <p className="text-gray-500">{t("forever_open_and_free")}</p>
-            <ul className="ml-4 list-disc text-left text-xs text-gray-500">
+            <p className="text-subtle">{t("forever_open_and_free")}</p>
+            <ul className="text-subtle ml-4 list-disc text-left text-xs">
               <li>{t("required_to_keep_your_code_open_source")}</li>
               <li>{t("cannot_repackage_and_resell")}</li>
               <li>{t("no_enterprise_features")}</li>
@@ -53,15 +53,15 @@ const ChooseLicense = (
         <RadioGroup.Item value="EE">
           <div
             className={classNames(
-              "cursor-pointer space-y-2 rounded-md border bg-white p-4 hover:border-black",
+              "bg-default cursor-pointer space-y-2 rounded-md border p-4 hover:border-black",
               value === "EE" && "ring-2 ring-black"
             )}>
-            <h2 className="font-cal text-xl text-black">{t("ee_enterprise_license")}</h2>
+            <h2 className="font-cal text-emphasis text-xl">{t("ee_enterprise_license")}</h2>
             <p className="font-medium text-green-800">
               {t("enterprise_booking_fee", { enterprise_booking_fee: ENTERPRISE_BOOKING_FEE })}
             </p>
-            <p className="text-gray-500">{t("enterprise_license_includes")}</p>
-            <ul className="ml-4 list-disc text-left text-xs text-gray-500">
+            <p className="text-subtle">{t("enterprise_license_includes")}</p>
+            <ul className="text-subtle ml-4 list-disc text-left text-xs">
               <li>{t("no_need_to_keep_your_code_open_source")}</li>
               <li>{t("repackage_rebrand_resell")}</li>
               <li>{t("a_vast_suite_of_enterprise_features")}</li>

apps/web/components/setup/EnterpriseLicense.tsx

@@ -87,7 +87,7 @@ const EnterpriseLicense = (
 
   return (
     <FormProvider {...formMethods}>
-      <form {...rest} className="space-y-4 rounded-md bg-white px-8 py-10" onSubmit={handleSubmit}>
+      <form {...rest} className="bg-default space-y-4 rounded-md px-8 py-10" onSubmit={handleSubmit}>
         <div>
           <Button
             className="w-full justify-center text-lg"
@@ -97,8 +97,8 @@ const EnterpriseLicense = (
             {t("purchase_license")}
           </Button>
           <div className="relative flex justify-center">
-            <hr className="my-8 w-full border-[1.5px] border-gray-200" />
-            <span className="absolute mt-[22px] bg-white px-3.5 text-sm">OR</span>
+            <hr className="border-subtle my-8 w-full border-[1.5px]" />
+            <span className="bg-default absolute mt-[22px] px-3.5 text-sm">OR</span>
           </div>
           {t("already_have_key")}
           <Controller
@@ -108,7 +108,7 @@ const EnterpriseLicense = (
               <TextField
                 {...formMethods.register("licenseKey")}
                 className={classNames(
-                  "mb-0 group-hover:border-gray-400",
+                  "group-hover:border-emphasis mb-0",
                   (checkLicenseLoading || (errors.licenseKey === undefined && isDirty)) && "border-r-0"
                 )}
                 placeholder="xxxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxxx"
@@ -116,8 +116,8 @@ const EnterpriseLicense = (
                 value={value}
                 addOnFilled={false}
                 addOnClassname={classNames(
-                  "hover:border-gray-300",
-                  errors.licenseKey === undefined && isDirty && "group-hover:border-gray-400"
+                  "hover:border-default",
+                  errors.licenseKey === undefined && isDirty && "group-hover:border-emphasis"
                 )}
                 addOnSuffix={
                   checkLicenseLoading ? (

apps/web/components/setup/StepDone.tsx

@@ -23,8 +23,8 @@ const StepDone = (props: {
         router.replace(props.nextStepPath);
       }}>
       <div className="min-h-36 my-6 flex flex-col items-center justify-center">
-        <div className="flex h-[72px] w-[72px] items-center justify-center rounded-full bg-gray-600 dark:bg-white">
-          <FiCheck className="inline-block h-10 w-10 text-white dark:bg-white dark:text-gray-600" />
+        <div className="dark:bg-default flex h-[72px] w-[72px] items-center justify-center rounded-full bg-gray-600">
+          <FiCheck className="text-inverted dark:bg-default dark:text-default inline-block h-10 w-10" />
         </div>
         <div className="max-w-[420px] text-center">
           <h2 className="mt-6 mb-1 text-lg font-medium dark:text-gray-300">{t("all_done")}</h2>

apps/web/components/team/screens/Team.tsx

@@ -8,7 +8,9 @@ import { Avatar } from "@calcom/ui";
 
 type TeamType = NonNullable<TeamWithMembers>;
 type MembersType = TeamType["members"];
-type MemberType = MembersType[number];
+type MemberType = MembersType[number] & { safeBio: string | null };
+
+type TeamTypeWithSafeHtml = Omit<TeamType, "members"> & { members: MemberType[] };
 
 const Member = ({ member, teamName }: { member: MemberType; teamName: string | null }) => {
   const { t } = useLocale();
@@ -17,19 +19,19 @@ const Member = ({ member, teamName }: { member: MemberType; teamName: string | n
 
   return (
     <Link key={member.id} href={`/${member.username}`}>
-      <div className="sm:min-w-80 sm:max-w-80 dark:bg-darkgray-200 dark:hover:bg-darkgray-300 group flex min-h-full flex-col space-y-2 rounded-md bg-white p-4 hover:cursor-pointer hover:bg-gray-50 ">
+      <div className="sm:min-w-80 sm:max-w-80  bg-default hover:bg-muted border-subtle group flex min-h-full flex-col space-y-2 rounded-md border p-4 hover:cursor-pointer">
         <Avatar
           size="md"
           alt={member.name || ""}
           imageSrc={WEBAPP_URL + "/" + member.username + "/avatar.png"}
         />
         <section className="line-clamp-4 mt-2 w-full space-y-1">
-          <p className="font-medium text-gray-900 dark:text-white">{member.name}</p>
-          <div className="line-clamp-3 overflow-ellipsis text-sm font-normal text-gray-500 dark:text-white">
+          <p className="text-default font-medium">{member.name}</p>
+          <div className="line-clamp-3 text-subtle overflow-ellipsis text-sm font-normal">
             {!isBioEmpty ? (
               <>
                 <div
-                  className="dark:text-darkgray-600 text-sm text-gray-500 [&_a]:text-blue-500 [&_a]:underline [&_a]:hover:text-blue-600"
+                  className=" text-subtle text-sm [&_a]:text-blue-500 [&_a]:underline [&_a]:hover:text-blue-600"
                   dangerouslySetInnerHTML={{ __html: md.render(member.bio || "") }}
                 />
               </>
@@ -43,7 +45,7 @@ const Member = ({ member, teamName }: { member: MemberType; teamName: string | n
   );
 };
 
-const Members = ({ members, teamName }: { members: MembersType; teamName: string | null }) => {
+const Members = ({ members, teamName }: { members: MemberType[]; teamName: string | null }) => {
   if (!members || members.length === 0) {
     return null;
   }
@@ -57,7 +59,7 @@ const Members = ({ members, teamName }: { members: MembersType; teamName: string
   );
 };
 
-const Team = ({ team }: { team: TeamType }) => {
+const Team = ({ team }: { team: TeamTypeWithSafeHtml }) => {
   return (
     <div>
       <Members members={team.members} teamName={team.name} />

apps/web/components/ui/AuthContainer.tsx

@@ -24,18 +24,18 @@ export default function AuthContainer(props: React.PropsWithChildren<Props>) {
       )}
 
       <div className={classNames(props.showLogo ? "text-center" : "", "sm:mx-auto sm:w-full sm:max-w-md")}>
-        {props.heading && <h2 className="font-cal text-center text-3xl text-gray-900">{props.heading}</h2>}
+        {props.heading && <h2 className="font-cal text-emphasis text-center text-3xl">{props.heading}</h2>}
       </div>
       {props.loading && (
-        <div className="absolute z-50 flex h-screen w-full items-center bg-gray-50">
+        <div className="bg-muted absolute z-50 flex h-screen w-full items-center">
           <Loader />
         </div>
       )}
       <div className="mb-auto mt-8 sm:mx-auto sm:w-full sm:max-w-md">
-        <div className="mx-2 rounded-md border border-gray-200 bg-white px-4 py-10 sm:px-10">
+        <div className="bg-default border-subtle mx-2 rounded-md border px-4 py-10 sm:px-10">
           {props.children}
         </div>
-        <div className="mt-8 text-center text-sm text-gray-600">{props.footerText}</div>
+        <div className="text-default mt-8 text-center text-sm">{props.footerText}</div>
       </div>
     </div>
   );

apps/web/components/ui/EditableHeading.tsx

@@ -21,7 +21,7 @@ const EditableHeading = function EditableHeading({
         <label className="min-w-8 relative inline-block">
           <span className="whitespace-pre text-xl tracking-normal text-transparent">{value}&nbsp;</span>
           {!isEditing && isReady && (
-            <FiEdit2 className=" ml-1 -mt-px inline h-3 w-3  text-gray-500 group-hover:text-gray-500" />
+            <FiEdit2 className=" text-subtle group-hover:text-subtle ml-1 -mt-px inline  h-3 w-3" />
           )}
           <input
             {...passThroughProps}
@@ -29,7 +29,7 @@ const EditableHeading = function EditableHeading({
             value={value}
             required
             className={classNames(
-              "absolute top-0 left-0 w-full cursor-pointer border-none bg-transparent p-0 align-top text-xl text-gray-900 hover:text-gray-700 focus:text-black focus:outline-none focus:ring-0"
+              "text-emphasis hover:text-default focus:text-emphasis absolute top-0 left-0 w-full cursor-pointer border-none bg-transparent p-0 align-top text-xl focus:outline-none focus:ring-0"
             )}
             onFocus={(e) => {
               setIsEditing(true);

apps/web/components/ui/InfoBadge.tsx

@@ -6,7 +6,7 @@ export default function InfoBadge({ content }: { content: string }) {
     <>
       <Tooltip side="top" content={content}>
         <span title={content}>
-          <FiInfo className="relative top-px left-1 right-1 mt-px h-4 w-4 text-gray-500" />
+          <FiInfo className="text-subtle relative top-px left-1 right-1 mt-px h-4 w-4" />
         </span>
       </Tooltip>
     </>

apps/web/components/ui/LinkIconButton.tsx

@@ -12,8 +12,8 @@ export default function LinkIconButton(props: LinkIconButtonProps) {
       <button
         type="button"
         {...props}
-        className="text-md flex items-center rounded-sm px-2 py-1 text-sm font-medium text-gray-700 hover:bg-gray-200 hover:text-gray-900">
-        <props.Icon className="h-4 w-4 text-gray-500 ltr:mr-2 rtl:ml-2" />
+        className="text-md hover:bg-emphasis hover:text-emphasis text-default flex items-center rounded-sm px-2 py-1 text-sm font-medium">
+        <props.Icon className="text-subtle h-4 w-4 ltr:mr-2 rtl:ml-2" />
         {props.children}
       </button>
     </div>

apps/web/components/ui/ModalContainer.tsx

@@ -19,7 +19,7 @@ export default function ModalContainer(
         <DialogContent>
           <div
             className={classNames(
-              "inline-block w-full transform bg-white text-left align-bottom transition-all sm:align-middle",
+              "bg-default inline-block w-full transform text-left align-bottom transition-all sm:align-middle",
               {
                 "sm:w-full sm:max-w-lg ": !props.wide,
                 "sm:w-4xl sm:max-w-4xl": props.wide,

apps/web/components/ui/PoweredByCal.tsx

@@ -9,10 +9,7 @@ const PoweredByCal = () => {
   const isEmbed = useIsEmbed();
   return (
     <div className={"p-2 text-center text-xs sm:text-right" + (isEmbed ? " max-w-3xl" : "")}>
-      <Link
-        href={POWERED_BY_URL}
-        target="_blank"
-        className="text-bookinglight opacity-50 hover:opacity-100 dark:text-white">
+      <Link href={POWERED_BY_URL} target="_blank" className="text-subtle opacity-50 hover:opacity-100">
         {t("powered_by")}{" "}
         <img
           className="relative -mt-px inline h-[10px] w-auto dark:hidden"

apps/web/components/ui/SettingInputContainer.tsx

@@ -13,8 +13,8 @@ export default function SettingInputContainer({
     <div className="space-y-3">
       <div className="block sm:flex">
         <div className="min-w-48 mb-4 sm:mb-0">
-          <label htmlFor={htmlFor} className="mt-1 flex text-sm font-medium text-gray-700">
-            <Icon className="mt-0.5 h-4 w-4 text-gray-500 ltr:mr-2 rtl:ml-2" />
+          <label htmlFor={htmlFor} className="text-default mt-1 flex text-sm font-medium">
+            <Icon className="text-subtle mt-0.5 h-4 w-4 ltr:mr-2 rtl:ml-2" />
             {label}
           </label>
         </div>

apps/web/components/ui/UsernameAvailability/PremiumTextfield.tsx

@@ -14,7 +14,7 @@ import type { TRPCClientErrorLike } from "@calcom/trpc/client";
 import type { RouterOutputs } from "@calcom/trpc/react";
 import { trpc } from "@calcom/trpc/react";
 import type { AppRouter } from "@calcom/trpc/server/routers/_app";
-import { Button, Dialog, DialogClose, DialogContent, DialogHeader, Input, Label } from "@calcom/ui";
+import { Button, Dialog, DialogClose, DialogContent, Input, Label } from "@calcom/ui";
 import { FiCheck, FiEdit2, FiExternalLink } from "@calcom/ui/components/icon";
 
 export enum UsernameChangeStatusEnum {
@@ -195,7 +195,7 @@ const PremiumTextfield = (props: ICustomUsernameProps) => {
         <span
           className={classNames(
             isInputUsernamePremium ? "border border-orange-400 " : "",
-            "hidden h-9 items-center rounded-l-md border border-r-0 border-gray-300 border-r-gray-300 bg-gray-50 px-3 text-sm text-gray-500 md:inline-flex"
+            "border-default bg-muted text-subtle hidden h-9 items-center rounded-l-md border border-r-0 border-r-gray-300 px-3 text-sm md:inline-flex"
           )}>
           {process.env.NEXT_PUBLIC_WEBSITE_URL.replace("https://", "").replace("http://", "")}/
         </span>
@@ -216,7 +216,7 @@ const PremiumTextfield = (props: ICustomUsernameProps) => {
               markAsError
                 ? "focus:shadow-0 focus:ring-shadow-0 border-red-500  focus:border-red-500 focus:outline-none"
                 : "border-l-gray-300",
-              disabled ? "bg-gray-100 text-gray-400 focus:border-0" : ""
+              disabled ? "bg-subtle text-muted focus:border-0" : ""
             )}
             value={inputUsernameValue}
             onChange={(event) => {
@@ -250,29 +250,30 @@ const PremiumTextfield = (props: ICustomUsernameProps) => {
       {markAsError && <p className="mt-1 text-xs text-red-500">Username is already taken</p>}
 
       <Dialog open={openDialogSaveUsername}>
-        <DialogContent>
-          <div className="flex flex-row">
-            <div className="xs:hidden flex h-10 w-10 flex-shrink-0 justify-center rounded-full bg-[#FAFAFA]">
-              <FiEdit2 className="m-auto h-6 w-6" />
-            </div>
-            <div className="mb-4 w-full px-4 pt-1">
-              <DialogHeader title={t("confirm_username_change_dialog_title")} />
+        <DialogContent
+          Icon={FiEdit2}
+          title={t("confirm_username_change_dialog_title")}
+          description={
+            <>
               {usernameChangeCondition && usernameChangeCondition === UsernameChangeStatusEnum.UPGRADE && (
-                <p className="mb-4 text-sm text-gray-800">{t("change_username_standard_to_premium")}</p>
+                <p className="text-default mb-4 text-sm">{t("change_username_standard_to_premium")}</p>
               )}
-
-              <div className="flex w-full flex-wrap rounded-sm bg-gray-100 py-3 text-sm">
+            </>
+          }>
+          <div className="flex flex-row">
+            <div className="mb-4 w-full px-4 pt-1">
+              <div className="bg-subtle flex w-full flex-wrap rounded-sm py-3 text-sm">
                 <div className="flex-1 px-2">
-                  <p className="text-gray-500">{t("current_username")}</p>
-                  <p className="mt-1" data-testid="current-username">
+                  <p className="text-subtle">{t("current_username")}</p>
+                  <p className="text-emphasis mt-1" data-testid="current-username">
                     {currentUsername}
                   </p>
                 </div>
                 <div className="ml-6 flex-1">
-                  <p className="text-gray-500" data-testid="new-username">
+                  <p className="text-subtle" data-testid="new-username">
                     {t("new_username")}
                   </p>
-                  <p>{inputUsernameValue}</p>
+                  <p className="text-emphasis">{inputUsernameValue}</p>
                 </div>
               </div>
             </div>

apps/web/components/ui/UsernameAvailability/UsernameTextfield.tsx

@@ -8,7 +8,7 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 import type { TRPCClientErrorLike } from "@calcom/trpc/client";
 import { trpc } from "@calcom/trpc/react";
 import type { AppRouter } from "@calcom/trpc/server/routers/_app";
-import { Button, Dialog, DialogClose, DialogContent, DialogHeader, TextField } from "@calcom/ui";
+import { Button, Dialog, DialogClose, DialogContent, TextField } from "@calcom/ui";
 import { FiCheck, FiEdit2 } from "@calcom/ui/components/icon";
 
 interface ICustomUsernameProps {
@@ -79,7 +79,7 @@ const UsernameTextfield = (props: ICustomUsernameProps) => {
 
   const ActionButtons = () => {
     return usernameIsAvailable && currentUsername !== inputUsernameValue ? (
-      <div className="rlt:space-x-reverse mt-px flex flex-row space-x-2 ltr:ml-2 ltr:mr-2 rtl:ml-2 rtl:space-x-reverse">
+      <div className="rlt:space-x-reverse ms-2 me-2 mt-px flex flex-row space-x-2 rtl:space-x-reverse">
         <Button
           type="button"
           onClick={() => setOpenDialogSaveUsername(true)}
@@ -154,31 +154,25 @@ const UsernameTextfield = (props: ICustomUsernameProps) => {
         </div>
       )}
       <Dialog open={openDialogSaveUsername}>
-        <DialogContent>
-          <div style={{ display: "flex", flexDirection: "row" }}>
-            <div className="xs:hidden flex h-10 w-10 flex-shrink-0 justify-center rounded-full bg-[#FAFAFA]">
-              <FiEdit2 className="m-auto h-6 w-6" />
-            </div>
-            <div className="mb-4 w-full px-4 pt-1">
-              <DialogHeader title={t("confirm_username_change_dialog_title")} />
-
-              <div className="flex w-full flex-wrap rounded-sm bg-gray-100 py-3 text-sm">
+        <DialogContent type="confirmation" Icon={FiEdit2} title={t("confirm_username_change_dialog_title")}>
+          <div className="flex flex-row">
+            <div className="mb-4 w-full pt-1">
+              <div className="bg-subtle flex w-full flex-wrap rounded-sm py-3 text-sm">
                 <div className="flex-1 px-2">
-                  <p className="text-gray-500">{t("current_username")}</p>
-                  <p className="mt-1" data-testid="current-username">
+                  <p className="text-subtle">{t("current_username")}</p>
+                  <p className="text-emphasis mt-1" data-testid="current-username">
                     {currentUsername}
                   </p>
                 </div>
-                <div className="flex-1">
-                  <p className="text-gray-500" data-testid="new-username">
+                <div className="ml-6 flex-1">
+                  <p className="text-subtle" data-testid="new-username">
                     {t("new_username")}
                   </p>
-                  <p>{inputUsernameValue}</p>
+                  <p className="text-emphasis">{inputUsernameValue}</p>
                 </div>
               </div>
             </div>
           </div>
-
           <div className="mt-4 flex flex-row-reverse gap-x-2">
             <Button
               type="button"

apps/web/components/ui/form/CheckboxField.tsx

@@ -22,7 +22,7 @@ const CheckboxField = forwardRef<HTMLInputElement, Props>(
             {React.createElement(
               descriptionAsLabel ? "div" : "label",
               {
-                className: "flex text-sm font-medium text-gray-700",
+                className: "flex text-sm font-medium text-default",
                 ...(!descriptionAsLabel
                   ? {
                       htmlFor: rest.id,
@@ -40,7 +40,7 @@ const CheckboxField = forwardRef<HTMLInputElement, Props>(
               {
                 className: classNames(
                   "relative flex items-start",
-                  descriptionAsLabel ? "text-gray-700" : "text-gray-900"
+                  descriptionAsLabel ? "text-default" : "text-emphasis"
                 ),
               },
               <>
@@ -49,10 +49,10 @@ const CheckboxField = forwardRef<HTMLInputElement, Props>(
                     {...rest}
                     ref={ref}
                     type="checkbox"
-                    className="text-primary-600 focus:ring-primary-500 h-4 w-4 rounded border-gray-300"
+                    className="text-primary-600 focus:ring-primary-500 border-default h-4 w-4 rounded"
                   />
                 </div>
-                <span className="text-sm ltr:ml-3 rtl:mr-3">{description}</span>
+                <span className="ms-3 text-sm">{description}</span>
               </>
             )}
             {informationIconText && <InfoBadge content={informationIconText} />}

apps/web/components/ui/form/CheckedSelect.tsx

@@ -51,7 +51,7 @@ export const CheckedSelect = ({
           {option.label}
           <FiX
             onClick={() => props.onChange(value.filter((item) => item.value !== option.value))}
-            className="float-right mt-0.5 h-5 w-5 cursor-pointer text-gray-500"
+            className="text-subtle float-right mt-0.5 h-5 w-5 cursor-pointer"
           />
         </div>
       ))}

apps/web/components/ui/form/DatePicker.tsx

@@ -19,11 +19,11 @@ export const DatePicker = ({ minDate, disabled, date, onDatesChange, className }
   return (
     <PrimitiveDatePicker
       className={classNames(
-        "focus:ring-primary-500 focus:border-primary-500 rounded-sm border border-gray-300 p-1 pl-2 text-sm",
+        "focus:ring-primary-500 focus:border-primary-500 border-default rounded-sm border p-1 pl-2 text-sm",
         className
       )}
       clearIcon={null}
-      calendarIcon={<FiCalendar className="h-5 w-5 text-gray-500" />}
+      calendarIcon={<FiCalendar className="text-subtle h-5 w-5" />}
       value={date}
       minDate={minDate}
       disabled={disabled}

apps/web/components/ui/form/LocationSelect.tsx

@@ -19,7 +19,10 @@ export type GroupOptionType = GroupBase<LocationOption>;
 const OptionWithIcon = ({ icon, label }: { icon?: string; label: string }) => {
   return (
     <div className="flex items-center gap-3">
-      {icon && <img src={icon} alt="cover" className="h-3.5 w-3.5" />}
+      {/* TODO: figure out a way to invert icons when in dark mode. We can't just
+        dark:invert due to google meet cal etc all breaking when we do this
+      */}
+      {icon && <img src={icon} alt="cover" className="h-3.5 w-3.5 dark:hidden" />}
       <span className={classNames("text-sm font-medium")}>{label}</span>
     </div>
   );
@@ -48,7 +51,7 @@ export default function LocationSelect(props: Props<LocationOption, false, Group
           <span>{e.label}</span>
         </div>
       )}
-      formatGroupLabel={(e) => <p className="text-xs font-medium text-gray-600">{e.label}</p>}
+      formatGroupLabel={(e) => <p className="text-default text-xs font-medium">{e.label}</p>}
       {...props}
     />
   );

apps/web/components/ui/form/MinutesField.tsx

@@ -11,7 +11,7 @@ const MinutesField = forwardRef<HTMLInputElement, Props>(({ label, ...rest }, re
     <div className="block sm:flex">
       {!!label && (
         <div className="min-w-48 mb-4 sm:mb-0">
-          <label htmlFor={rest.id} className="flex h-full items-center text-sm font-medium text-gray-700">
+          <label htmlFor={rest.id} className="text-default flex h-full items-center text-sm font-medium">
             {label}
           </label>
         </div>
@@ -23,12 +23,12 @@ const MinutesField = forwardRef<HTMLInputElement, Props>(({ label, ...rest }, re
             ref={ref}
             type="number"
             className={classNames(
-              "block w-full rounded-sm border-gray-300 pl-2 pr-12 text-sm",
+              "border-default block w-full rounded-sm pl-2 pr-12 text-sm",
               rest.className
             )}
           />
           <div className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
-            <span className="text-sm text-gray-500" id="duration">
+            <span className="text-subtle text-sm" id="duration">
               mins
             </span>
           </div>

apps/web/lib/app-providers.tsx

@@ -6,10 +6,13 @@ import { appWithTranslation } from "next-i18next";
 import { ThemeProvider } from "next-themes";
 import type { AppProps as NextAppProps, AppProps as NextJsAppProps } from "next/app";
 import type { NextRouter } from "next/router";
-import type { ComponentProps, ReactNode } from "react";
+import { useRouter } from "next/router";
+import type { ComponentProps, PropsWithChildren, ReactNode } from "react";
 
 import DynamicHelpscoutProvider from "@calcom/features/ee/support/lib/helpscout/providerDynamic";
 import DynamicIntercomProvider from "@calcom/features/ee/support/lib/intercom/providerDynamic";
+import { FeatureProvider } from "@calcom/features/flags/context/provider";
+import { useFlags } from "@calcom/features/flags/hooks";
 import { trpc } from "@calcom/trpc/react";
 import { MetaProvider } from "@calcom/ui";
 
@@ -58,20 +61,60 @@ const CustomI18nextProvider = (props: AppPropsWithChildren) => {
   return <I18nextAdapter {...passedProps} />;
 };
 
-const AppProviders = (props: AppPropsWithChildren) => {
-  const session = trpc.viewer.public.session.useQuery().data;
-  // No need to have intercom on public pages - Good for Page Performance
-  const isPublicPage = usePublicPage();
-  const isThemeSupported =
-    typeof props.Component.isThemeSupported === "function"
-      ? props.Component.isThemeSupported({ router: props.router })
-      : props.Component.isThemeSupported;
-  const forcedTheme = isThemeSupported ? undefined : "light";
+const CalcomThemeProvider = (
+  props: PropsWithChildren<
+    WithNonceProps & { isThemeSupported?: boolean | ((arg: { router: NextRouter }) => boolean) }
+  >
+) => {
+  // We now support the inverse of how we handled it in the past. Setting this to false will disable theme.
+  // undefined or true means we use system theme
+  const router = useRouter();
+  const isThemeSupported = (() => {
+    if (typeof props.isThemeSupported === "function") {
+      return props.isThemeSupported({ router: router });
+    }
+    if (typeof props.isThemeSupported === "undefined") {
+      return true;
+    }
+    return props.isThemeSupported;
+  })();
+
+  const forcedTheme = !isThemeSupported ? "light" : undefined;
   // Use namespace of embed to ensure same namespaced embed are displayed with same theme. This allows different embeds on the same website to be themed differently
   // One such example is our Embeds Demo and Testing page at http://localhost:3100
   // Having `getEmbedNamespace` defined on window before react initializes the app, ensures that embedNamespace is available on the first mount and can be used as part of storageKey
   const embedNamespace = typeof window !== "undefined" ? window.getEmbedNamespace() : null;
-  const storageKey = typeof embedNamespace === "string" ? `embed-theme-${embedNamespace}` : "theme";
+  // If embedNamespace is not defined, we use the default storageKey -> The default storage key changs based on if we force light mode or not
+  // This is done to ensure that the default theme is light when we force light mode and as soon as you navigate to a page that is dark we dont need a hard refresh to change
+  const storageKey =
+    typeof embedNamespace === "string"
+      ? `embed-theme-${embedNamespace}`
+      : !isThemeSupported
+      ? "cal-light"
+      : "theme";
+
+  return (
+    <ThemeProvider
+      nonce={props.nonce}
+      enableColorScheme={false}
+      enableSystem={isThemeSupported}
+      forcedTheme={forcedTheme}
+      storageKey={storageKey}
+      attribute="class">
+      {props.children}
+    </ThemeProvider>
+  );
+};
+
+function FeatureFlagsProvider({ children }: { children: React.ReactNode }) {
+  const flags = useFlags();
+  return <FeatureProvider value={flags}>{children}</FeatureProvider>;
+}
+
+const AppProviders = (props: AppPropsWithChildren) => {
+  const session = trpc.viewer.public.session.useQuery().data;
+  // No need to have intercom on public pages - Good for Page Performance
+  const isPublicPage = usePublicPage();
 
   const RemainingProviders = (
     <EventCollectionProvider options={{ apiPath: "/api/collect-events" }}>
@@ -79,14 +122,13 @@ const AppProviders = (props: AppPropsWithChildren) => {
         <CustomI18nextProvider {...props}>
           <TooltipProvider>
             {/* color-scheme makes background:transparent not work which is required by embed. We need to ensure next-theme adds color-scheme to `body` instead of `html`(https://github.com/pacocoursey/next-themes/blob/main/src/index.tsx#L74). Once that's done we can enable color-scheme support */}
-            <ThemeProvider
+            <CalcomThemeProvider
               nonce={props.pageProps.nonce}
-              enableColorScheme={false}
-              storageKey={storageKey}
-              forcedTheme={forcedTheme}
-              attribute="class">
-              <MetaProvider>{props.children}</MetaProvider>
-            </ThemeProvider>
+              isThemeSupported={props.Component.isThemeSupported}>
+              <FeatureFlagsProvider>
+                <MetaProvider>{props.children}</MetaProvider>
+              </FeatureFlagsProvider>
+            </CalcomThemeProvider>
           </TooltipProvider>
         </CustomI18nextProvider>
       </SessionProvider>

apps/web/next.config.js

@@ -99,6 +99,14 @@ const nextConfig = {
       skipDefaultConversion: true,
       preventFullImport: true,
     },
+    "@calcom/features/insights/components": {
+      transform: "@calcom/features/insights/components/{{member}}",
+      skipDefaultConversion: true,
+      preventFullImport: true,
+    },
+    lodash: {
+      transform: "lodash/{{member}}",
+    },
     // TODO: We need to have all components in `@calcom/ui/components` in order to use this
     // "@calcom/ui": {
     //   transform: "@calcom/ui/components/{{member}}",

apps/web/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@calcom/web",
-  "version": "2.7.3",
+  "version": "2.7.14",
   "private": true,
   "scripts": {
     "analyze": "ANALYZE=true next build",
@@ -11,6 +11,7 @@
     "dx": "yarn dev",
     "test-codegen": "yarn playwright codegen http://localhost:3000",
     "type-check": "tsc --pretty --noEmit",
+    "type-check:ci": "tsc-absolute --pretty --noEmit",
     "build": "next build",
     "start": "next start",
     "lint": "eslint . --ignore-path .gitignore",
@@ -60,10 +61,11 @@
     "@stripe/react-stripe-js": "^1.10.0",
     "@stripe/stripe-js": "^1.35.0",
     "@tanstack/react-query": "^4.3.9",
+    "@tremor/react": "^2.0.0",
     "@types/turndown": "^5.0.1",
     "@vercel/edge-config": "^0.1.1",
     "@vercel/edge-functions-ui": "^0.2.1",
-    "@vercel/og": "^0.0.21",
+    "@vercel/og": "^0.5.0",
     "accept-language-parser": "^1.5.0",
     "async": "^3.2.4",
     "bcryptjs": "^2.4.3",
@@ -118,6 +120,7 @@
     "react-window": "^1.8.7",
     "remark": "^14.0.2",
     "rrule": "^2.7.1",
+    "sanitize-html": "^2.10.0",
     "schema-dts": "^1.1.0",
     "short-uuid": "^4.2.0",
     "strip-markdown": "^5.0.0",
@@ -155,6 +158,7 @@
     "@types/react-phone-number-input": "^3.0.14",
     "@types/react-virtualized-auto-sizer": "^1.0.1",
     "@types/react-window": "^1.8.5",
+    "@types/sanitize-html": "^2.9.0",
     "@types/stripe": "^8.0.417",
     "@types/uuid": "8.3.1",
     "autoprefixer": "^10.4.12",
@@ -166,7 +170,7 @@
     "module-alias": "^2.2.2",
     "msw": "^0.42.3",
     "postcss": "^8.4.18",
-    "tailwindcss": "^3.2.1",
+    "tailwindcss": "^3.3.1",
     "ts-jest": "^28.0.8",
     "ts-node": "^10.9.1",
     "typescript": "^4.9.4"

apps/web/pages/404.tsx

@@ -3,10 +3,10 @@ import Link from "next/link";
 import { useRouter } from "next/router";
 import { useEffect, useState } from "react";
 
-import { COMPANY_NAME, DEVELOPER_DOCS, DOCS_URL, JOIN_SLACK, WEBSITE_URL } from "@calcom/lib/constants";
+import { DOCS_URL, JOIN_SLACK, WEBSITE_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { HeadSeo } from "@calcom/ui";
-import { FiFileText, FiCheck, FiBookOpen, FiChevronRight } from "@calcom/ui/components/icon";
+import { FiBookOpen, FiCheck, FiChevronRight, FiFileText } from "@calcom/ui/components/icon";
 
 import { ssgInit } from "@server/lib/ssg";
 
@@ -40,6 +40,43 @@ export default function Custom404() {
   const isSubpage = router.asPath.includes("/", 2) || isSuccessPage;
   const isSignup = router.asPath.startsWith("/signup");
   const isCalcom = process.env.NEXT_PUBLIC_WEBAPP_URL === "https://app.cal.com";
+  /**
+   * If we're on 404 and the route is insights it means it is disabled
+   * TODO: Abstract this for all disabled features
+   **/
+  const isInsights = router.asPath.startsWith("/insights");
+  if (isInsights) {
+    return (
+      <>
+        <HeadSeo
+          title="Feature is currently disabled"
+          description={t("404_page_not_found")}
+          nextSeoProps={{
+            nofollow: true,
+            noindex: true,
+          }}
+        />
+        <div className="min-h-screen bg-white px-4" data-testid="404-page">
+          <main className="mx-auto max-w-xl pt-16 pb-6 sm:pt-24">
+            <div className="text-center">
+              <p className="text-sm font-semibold uppercase tracking-wide text-black">{t("error_404")}</p>
+              <h1 className="font-cal mt-2 text-4xl font-extrabold text-gray-900 sm:text-5xl">
+                Feature is currently disabled
+              </h1>
+            </div>
+            <div className="mt-12">
+              <div className="mt-8">
+                <Link href="/" className="text-base font-medium text-black hover:text-gray-500">
+                  {t("or_go_back_home")}
+                  <span aria-hidden="true"> &rarr;</span>
+                </Link>
+              </div>
+            </div>
+          </main>
+        </div>
+      </>
+    );
+  }
 
   return (
     <>
@@ -51,21 +88,21 @@ export default function Custom404() {
           noindex: true,
         }}
       />
-      <div className="min-h-screen bg-white px-4" data-testid="404-page">
+      <div className="bg-default min-h-screen px-4" data-testid="404-page">
         <main className="mx-auto max-w-xl pt-16 pb-6 sm:pt-24">
           {isSignup && process.env.NEXT_PUBLIC_WEBAPP_URL !== "https://app.cal.com" ? (
             <div>
               <div>
-                <p className="text-sm font-semibold uppercase tracking-wide text-black">
+                <p className="text-emphasis text-sm font-semibold uppercase tracking-wide">
                   {t("missing_license")}
                 </p>
-                <h1 className="font-cal mt-2 text-3xl font-extrabold text-gray-900">
+                <h1 className="font-cal text-emphasis mt-2 text-3xl font-extrabold">
                   {t("signup_requires")}
                 </h1>
-                <p className="mt-4">{t("signup_requires_description", { companyName: COMPANY_NAME })}</p>
+                <p className="mt-4">{t("signup_requires_description", { companyName: "Cal.com" })}</p>
               </div>
               <div className="mt-12">
-                <h2 className="text-sm font-semibold uppercase tracking-wide text-gray-500">
+                <h2 className="text-subtle text-sm font-semibold uppercase tracking-wide">
                   {t("next_steps")}
                 </h2>
                 <ul role="list" className="mt-4">
@@ -79,44 +116,44 @@ export default function Custom404() {
                         </span>
                       </div>
                       <div className="min-w-0 flex-1">
-                        <h3 className="text-base font-medium text-gray-900">
-                          <span className="rounded-sm focus-within:ring-2 focus-within:ring-gray-500 focus-within:ring-offset-2">
+                        <h3 className="text-emphasis text-base font-medium">
+                          <span className="focus-within:ring-empthasis rounded-sm focus-within:ring-2 focus-within:ring-offset-2">
                             <span className="focus:outline-none">
                               <span className="absolute inset-0" aria-hidden="true" />
                               {t("acquire_commercial_license")}
                             </span>
                           </span>
                         </h3>
-                        <p className="text-base text-gray-500">{t("the_infrastructure_plan")}</p>
+                        <p className="text-subtle text-base">{t("the_infrastructure_plan")}</p>
                       </div>
                       <div className="flex-shrink-0 self-center">
-                        <FiChevronRight className="h-5 w-5 text-gray-400" aria-hidden="true" />
+                        <FiChevronRight className="text-muted h-5 w-5" aria-hidden="true" />
                       </div>
                     </a>
                   </li>
                 </ul>
 
-                <ul role="list" className="divide-y divide-gray-200 border-gray-200">
+                <ul role="list" className="border-subtle divide-subtle divide-y">
                   <li className="px-4 py-2">
                     <Link
-                      href={`${DEVELOPER_DOCS}/self-hosting/installation`}
+                      href="https://cal.com/self-hosting/installation"
                       className="relative flex items-start space-x-4 py-6 rtl:space-x-reverse">
                       <div className="flex-shrink-0">
-                        <span className="flex h-12 w-12 items-center justify-center rounded-lg bg-gray-50">
-                          <FiFileText className="h-6 w-6 text-gray-700" aria-hidden="true" />
+                        <span className="bg-muted flex h-12 w-12 items-center justify-center rounded-lg">
+                          <FiFileText className="text-default h-6 w-6" aria-hidden="true" />
                         </span>
                       </div>
                       <div className="min-w-0 flex-1">
-                        <h3 className="text-base font-medium text-gray-900">
-                          <span className="rounded-sm focus-within:ring-2 focus-within:ring-gray-500 focus-within:ring-offset-2">
+                        <h3 className="text-emphasis text-base font-medium">
+                          <span className="focus-within:ring-empthasis rounded-sm focus-within:ring-2 focus-within:ring-offset-2">
                             <span className="absolute inset-0" aria-hidden="true" />
                             {t("prisma_studio_tip")}
                           </span>
                         </h3>
-                        <p className="text-base text-gray-500">{t("prisma_studio_tip_description")}</p>
+                        <p className="text-subtle text-base">{t("prisma_studio_tip_description")}</p>
                       </div>
                       <div className="flex-shrink-0 self-center">
-                        <FiChevronRight className="h-5 w-5 text-gray-400" aria-hidden="true" />
+                        <FiChevronRight className="text-muted h-5 w-5" aria-hidden="true" />
                       </div>
                     </Link>
                   </li>
@@ -125,7 +162,7 @@ export default function Custom404() {
                       href={JOIN_SLACK}
                       className="relative flex items-start space-x-4 py-6 rtl:space-x-reverse">
                       <div className="flex-shrink-0">
-                        <span className="flex h-12 w-12 items-center justify-center rounded-lg bg-gray-50">
+                        <span className="bg-muted flex h-12 w-12 items-center justify-center rounded-lg">
                           <svg
                             viewBox="0 0 2447.6 2452.5"
                             className="h-6 w-6"
@@ -152,16 +189,16 @@ export default function Custom404() {
                         </span>
                       </div>
                       <div className="min-w-0 flex-1">
-                        <h3 className="text-base font-medium text-gray-900">
-                          <span className="rounded-sm focus-within:ring-2 focus-within:ring-gray-500 focus-within:ring-offset-2">
+                        <h3 className="text-emphasis text-base font-medium">
+                          <span className="focus-within:ring-empthasis rounded-sm focus-within:ring-2 focus-within:ring-offset-2">
                             <span className="absolute inset-0" aria-hidden="true" />
                             Slack
                           </span>
                         </h3>
-                        <p className="text-base text-gray-500">{t("join_our_community")}</p>
+                        <p className="text-subtle text-base">{t("join_our_community")}</p>
                       </div>
                       <div className="flex-shrink-0 self-center">
-                        <FiChevronRight className="h-5 w-5 text-gray-400" aria-hidden="true" />
+                        <FiChevronRight className="text-muted h-5 w-5" aria-hidden="true" />
                       </div>
                     </a>
                   </li>
@@ -169,7 +206,7 @@ export default function Custom404() {
                 <div className="mt-8">
                   <Link
                     href={`${WEBSITE_URL}/enterprise`}
-                    className="text-base font-medium text-black hover:text-gray-500">
+                    className="hover:text-subtle text-emphasis text-base font-medium">
                     {t("contact_sales")}
                     <span aria-hidden="true"> &rarr;</span>
                   </Link>
@@ -179,8 +216,10 @@ export default function Custom404() {
           ) : (
             <>
               <div className="text-center">
-                <p className="text-sm font-semibold uppercase tracking-wide text-black">{t("error_404")}</p>
-                <h1 className="font-cal mt-2 text-4xl font-extrabold text-gray-900 sm:text-5xl">
+                <p className="text-emphasis text-sm font-semibold uppercase tracking-wide">
+                  {t("error_404")}
+                </p>
+                <h1 className="font-cal text-emphasis mt-2 text-4xl font-extrabold sm:text-5xl">
                   {isSuccessPage ? "Booking not found" : t("page_doesnt_exist")}
                 </h1>
                 {isSubpage ? (
@@ -205,7 +244,7 @@ export default function Custom404() {
                 )}
               </div>
               <div className="mt-12">
-                <h2 className="text-sm font-semibold uppercase tracking-wide text-gray-500">
+                <h2 className="text-subtle text-sm font-semibold uppercase tracking-wide">
                   {t("popular_pages")}
                 </h2>
                 {!isSubpage && isCalcom && (
@@ -222,46 +261,46 @@ export default function Custom404() {
                           </span>
                         </div>
                         <div className="min-w-0 flex-1">
-                          <h3 className="text-base font-medium text-gray-900">
-                            <span className="rounded-sm focus-within:ring-2 focus-within:ring-gray-500 focus-within:ring-offset-2">
+                          <h3 className="text-emphasis text-base font-medium">
+                            <span className="focus-within:ring-empthasis rounded-sm focus-within:ring-2 focus-within:ring-offset-2">
                               <span className="focus:outline-none">
                                 <span className="absolute inset-0" aria-hidden="true" />
                                 {t("register")} <strong className="text-green-500">{username}</strong>
                               </span>
                             </span>
                           </h3>
-                          <p className="text-base text-gray-500">{t("claim_username_and_schedule_events")}</p>
+                          <p className="text-subtle text-base">{t("claim_username_and_schedule_events")}</p>
                         </div>
                         <div className="flex-shrink-0 self-center">
-                          <FiChevronRight className="h-5 w-5 text-gray-400" aria-hidden="true" />
+                          <FiChevronRight className="text-muted h-5 w-5" aria-hidden="true" />
                         </div>
                       </a>
                     </li>
                   </ul>
                 )}
 
-                <ul role="list" className="mt-4 divide-y divide-gray-200 border-gray-200">
+                <ul role="list" className="border-subtle divide-subtle mt-4 divide-y">
                   {links.map((link, linkIdx) => (
                     <li key={linkIdx} className="px-4 py-2">
                       <Link
                         href={link.href}
                         className="relative flex items-start space-x-4 py-6 rtl:space-x-reverse">
                         <div className="flex-shrink-0">
-                          <span className="flex h-12 w-12 items-center justify-center rounded-lg bg-gray-50">
-                            <link.icon className="h-6 w-6 text-gray-700" aria-hidden="true" />
+                          <span className="bg-muted flex h-12 w-12 items-center justify-center rounded-lg">
+                            <link.icon className="text-default h-6 w-6" aria-hidden="true" />
                           </span>
                         </div>
                         <div className="min-w-0 flex-1">
-                          <h3 className="text-base font-medium text-gray-900">
-                            <span className="rounded-sm focus-within:ring-2 focus-within:ring-gray-500 focus-within:ring-offset-2">
+                          <h3 className="text-emphasis text-base font-medium">
+                            <span className="focus-within:ring-empthasis rounded-sm focus-within:ring-2 focus-within:ring-offset-2">
                               <span className="absolute inset-0" aria-hidden="true" />
                               {link.title}
                             </span>
                           </h3>
-                          <p className="text-base text-gray-500">{link.description}</p>
+                          <p className="text-subtle text-base">{link.description}</p>
                         </div>
                         <div className="flex-shrink-0 self-center">
-                          <FiChevronRight className="h-5 w-5 text-gray-400" aria-hidden="true" />
+                          <FiChevronRight className="text-muted h-5 w-5" aria-hidden="true" />
                         </div>
                       </Link>
                     </li>
@@ -271,7 +310,7 @@ export default function Custom404() {
                       href={JOIN_SLACK}
                       className="relative flex items-start space-x-4 py-6 rtl:space-x-reverse">
                       <div className="flex-shrink-0">
-                        <span className="flex h-12 w-12 items-center justify-center rounded-lg bg-gray-50">
+                        <span className="bg-muted flex h-12 w-12 items-center justify-center rounded-lg">
                           <svg
                             viewBox="0 0 2447.6 2452.5"
                             className="h-6 w-6"
@@ -298,22 +337,22 @@ export default function Custom404() {
                         </span>
                       </div>
                       <div className="min-w-0 flex-1">
-                        <h3 className="text-base font-medium text-gray-900">
-                          <span className="rounded-sm focus-within:ring-2 focus-within:ring-gray-500 focus-within:ring-offset-2">
+                        <h3 className="text-emphasis text-base font-medium">
+                          <span className="focus-within:ring-empthasis rounded-sm focus-within:ring-2 focus-within:ring-offset-2">
                             <span className="absolute inset-0" aria-hidden="true" />
                             Slack
                           </span>
                         </h3>
-                        <p className="text-base text-gray-500">{t("join_our_community")}</p>
+                        <p className="text-subtle text-base">{t("join_our_community")}</p>
                       </div>
                       <div className="flex-shrink-0 self-center">
-                        <FiChevronRight className="h-5 w-5 text-gray-400" aria-hidden="true" />
+                        <FiChevronRight className="text-muted h-5 w-5" aria-hidden="true" />
                       </div>
                     </a>
                   </li>
                 </ul>
                 <div className="mt-8">
-                  <Link href="/" className="text-base font-medium text-black hover:text-gray-500">
+                  <Link href="/" className="hover:text-subtle text-emphasis text-base font-medium">
                     {t("or_go_back_home")}
                     <span aria-hidden="true"> &rarr;</span>
                   </Link>

apps/web/pages/500.tsx

@@ -11,24 +11,24 @@ export default function Error500() {
   const router = useRouter();
 
   return (
-    <div className="flex h-screen bg-gray-100">
+    <div className="bg-subtle flex h-screen">
       <Head>
         <title>Something unexpected occurred | {APP_NAME}</title>
         <link rel="icon" href="/favicon.ico" />
       </Head>
-      <div className="rtl: m-auto rounded-md bg-white p-10 text-right ltr:text-left">
-        <h1 className="font-cal text-6xl text-black">500</h1>
-        <h2 className="mt-6 text-2xl font-medium text-black">It&apos;s not you, it&apos;s us.</h2>
-        <p className="mt-4 mb-6 max-w-2xl text-sm text-gray-600">
+      <div className="rtl: bg-default m-auto rounded-md p-10 text-right ltr:text-left">
+        <h1 className="font-cal text-emphasis text-6xl">500</h1>
+        <h2 className="text-emphasis mt-6 text-2xl font-medium">It&apos;s not you, it&apos;s us.</h2>
+        <p className="text-default mt-4 mb-6 max-w-2xl text-sm">
           Something went wrong on our end. Get in touch with our support team, and we’ll get it fixed right
           away for you.
         </p>
         {router.query.error && (
           <div className="mb-8 flex flex-col">
-            <p className="mb-4 max-w-2xl text-sm text-gray-600">
+            <p className="text-default mb-4 max-w-2xl text-sm">
               Please provide the following text when contacting support to better help you:
             </p>
-            <pre className="w-full max-w-2xl whitespace-normal break-words rounded-md bg-gray-200 p-4 text-gray-900">
+            <pre className="bg-emphasis text-emphasis w-full max-w-2xl whitespace-normal break-words rounded-md p-4">
               {router.query.error}
               <br />
               <Button

apps/web/pages/[user].tsx

@@ -14,7 +14,6 @@ import {
 } from "@calcom/embed-core/embed-iframe";
 import { EventTypeDescriptionLazy as EventTypeDescription } from "@calcom/features/eventtypes/components";
 import EmptyPage from "@calcom/features/eventtypes/components/EmptyPage";
-import CustomBranding from "@calcom/lib/CustomBranding";
 import { WEBAPP_URL } from "@calcom/lib/constants";
 import defaultEvents, {
   getDynamicEventDescription,
@@ -24,7 +23,7 @@ import defaultEvents, {
 } from "@calcom/lib/defaultEvents";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import useTheme from "@calcom/lib/hooks/useTheme";
-import { md } from "@calcom/lib/markdownIt";
+import { markdownToSafeHTML } from "@calcom/lib/markdownToSafeHTML";
 import { collectPageParameters, telemetryEventTypes, useTelemetry } from "@calcom/lib/telemetry";
 import prisma from "@calcom/prisma";
 import { baseEventTypeSelect } from "@calcom/prisma/selects";
@@ -48,9 +47,9 @@ export default function User(props: inferSSRProps<typeof getServerSideProps> & E
 
   const groupEventTypes = props.users.some((user) => !user.allowDynamicBooking) ? (
     <div className="space-y-6" data-testid="event-types">
-      <div className="overflow-hidden rounded-sm border dark:border-gray-900">
-        <div className="p-8 text-center text-gray-400 dark:text-white">
-          <h2 className="font-cal mb-2 text-3xl text-gray-600 dark:text-white">{" " + t("unavailable")}</h2>
+      <div className="overflow-hidden rounded-sm border ">
+        <div className="text-muted p-8 text-center">
+          <h2 className="font-cal text-default  mb-2 text-3xl">{" " + t("unavailable")}</h2>
           <p className="mx-auto max-w-md">{t("user_dynamic_booking_disabled") as string}</p>
         </div>
       </div>
@@ -60,14 +59,14 @@ export default function User(props: inferSSRProps<typeof getServerSideProps> & E
       {eventTypes.map((type, index) => (
         <li
           key={index}
-          className="dark:bg-darkgray-100 dark:border-darkgray-300 group relative border-b border-gray-200 bg-white first:rounded-t-md last:rounded-b-md last:border-b-0 hover:bg-gray-50">
-          <FiArrowRight className="absolute right-3 top-3 h-4 w-4 text-black opacity-0 transition-opacity group-hover:opacity-100 dark:text-white" />
+          className=" border-subtle bg-default hover:bg-muted group relative border-b first:rounded-t-md last:rounded-b-md last:border-b-0">
+          <FiArrowRight className="text-emphasis absolute right-3 top-3 h-4 w-4 opacity-0 transition-opacity group-hover:opacity-100" />
           <Link
             href={getUsernameSlugLink({ users: props.users, slug: type.slug })}
             className="flex justify-between px-6 py-4"
             data-testid="event-type-link">
             <div className="flex-shrink">
-              <p className="dark:text-darkgray-700 text-sm font-semibold text-gray-900">{type.title}</p>
+              <p className=" text-emphasis text-sm font-semibold">{type.title}</p>
               <EventTypeDescription className="text-sm" eventType={type} />
             </div>
             <div className="mt-1 self-center">
@@ -118,53 +117,39 @@ export default function User(props: inferSSRProps<typeof getServerSideProps> & E
             : [{ username: `${user.username}`, name: `${user.name}` }],
         }}
       />
-      <CustomBranding lightVal={profile.brandColor} darkVal={profile.darkBrandColor} />
 
-      <div
-        className={classNames(
-          shouldAlignCentrally ? "mx-auto" : "",
-          isEmbed ? "max-w-3xl" : "",
-          "dark:bg-darkgray-50"
-        )}>
+      <div className={classNames(shouldAlignCentrally ? "mx-auto" : "", isEmbed ? "max-w-3xl" : "")}>
         <main
           className={classNames(
             shouldAlignCentrally ? "mx-auto" : "",
-            isEmbed
-              ? " border-bookinglightest  dark:bg-darkgray-50 rounded-md border bg-white sm:dark:border-gray-600"
-              : "",
+            isEmbed ? " border-bookinglightest  bg-default rounded-md border" : "",
             "max-w-3xl py-24 px-4"
           )}>
           {isSingleUser && ( // When we deal with a single user, not dynamic group
             <div className="mb-8 text-center">
               <Avatar imageSrc={user.avatar} size="xl" alt={nameOrUsername} />
-              <h1 className="font-cal mb-1 text-3xl text-gray-900 dark:text-white">
+              <h1 className="font-cal text-emphasis mb-1 text-3xl">
                 {nameOrUsername}
-                {user.verified && (
-                  <BadgeCheckIcon className="mx-1 -mt-1 inline h-6 w-6 text-blue-500 dark:text-white" />
-                )}
+                {user.verified && <BadgeCheckIcon className=" mx-1 -mt-1 inline h-6 w-6 text-blue-500" />}
               </h1>
               {!isBioEmpty && (
                 <>
                   <div
-                    className=" dark:text-darkgray-600 text-sm text-gray-500 [&_a]:text-blue-500 [&_a]:underline [&_a]:hover:text-blue-600"
-                    dangerouslySetInnerHTML={{ __html: md.render(user.bio || "") }}
+                    className="  text-subtle text-sm [&_a]:text-blue-500 [&_a]:underline [&_a]:hover:text-blue-600"
+                    dangerouslySetInnerHTML={{ __html: props.safeBio }}
                   />
                 </>
               )}
             </div>
           )}
+
           <div
-            className={classNames(
-              "rounded-md ",
-              !isEventListEmpty && "dark:border-darkgray-300 border border-gray-200"
-            )}
+            className={classNames("rounded-md ", !isEventListEmpty && "border-subtle border")}
             data-testid="event-types">
             {user.away ? (
-              <div className="overflow-hidden rounded-sm border dark:border-gray-900">
-                <div className="p-8 text-center text-gray-400 dark:text-white">
-                  <h2 className="font-cal mb-2 text-3xl text-gray-600 dark:text-white">
-                    😴{" " + t("user_away")}
-                  </h2>
+              <div className="overflow-hidden rounded-sm border ">
+                <div className="text-muted  p-8 text-center">
+                  <h2 className="font-cal text-default mb-2 text-3xl">😴{" " + t("user_away")}</h2>
                   <p className="mx-auto max-w-md">{t("user_away_description") as string}</p>
                 </div>
               </div>
@@ -175,8 +160,8 @@ export default function User(props: inferSSRProps<typeof getServerSideProps> & E
                 <div
                   key={type.id}
                   style={{ display: "flex", ...eventTypeListItemEmbedStyles }}
-                  className="dark:bg-darkgray-100 dark:hover:bg-darkgray-200 dark:border-darkgray-300 group relative border-b border-gray-200 bg-white first:rounded-t-md last:rounded-b-md last:border-b-0 hover:bg-gray-50">
-                  <FiArrowRight className="absolute right-4 top-4 h-4 w-4 text-black opacity-0 transition-opacity group-hover:opacity-100 dark:text-white" />
+                  className=" border-subtle bg-default hover:bg-muted group relative border-b first:rounded-t-md last:rounded-b-md last:border-b-0">
+                  <FiArrowRight className="text-emphasis  absolute right-4 top-4 h-4 w-4 opacity-0 transition-opacity group-hover:opacity-100" />
                   {/* Don't prefetch till the time we drop the amount of javascript in [user][type] page which is impacting score for [user] page */}
                   <div className="block w-full p-5">
                     <Link
@@ -193,9 +178,7 @@ export default function User(props: inferSSRProps<typeof getServerSideProps> & E
                       }}
                       data-testid="event-type-link">
                       <div className="flex flex-wrap items-center">
-                        <h2 className="dark:text-darkgray-700 pr-2 text-sm font-semibold text-gray-700">
-                          {type.title}
-                        </h2>
+                        <h2 className=" text-default pr-2 text-sm font-semibold">{type.title}</h2>
                       </div>
                       <EventTypeDescription eventType={type} />
                     </Link>
@@ -204,6 +187,7 @@ export default function User(props: inferSSRProps<typeof getServerSideProps> & E
               ))
             )}
           </div>
+
           {isEventListEmpty && <EmptyPage name={user.name ?? "User"} />}
         </main>
         <Toaster position="bottom-right" />
@@ -211,7 +195,6 @@ export default function User(props: inferSSRProps<typeof getServerSideProps> & E
     </>
   );
 }
-User.isThemeSupported = true;
 
 const getEventTypesWithHiddenFromDB = async (userId: number) => {
   return (
@@ -343,6 +326,7 @@ export const getServerSideProps = async (context: GetServerSidePropsContext) =>
   const eventTypes = eventTypesRaw.map((eventType) => ({
     ...eventType,
     metadata: EventTypeMetaDataSchema.parse(eventType.metadata || {}),
+    descriptionAsSafeHTML: markdownToSafeHTML(eventType.description),
   }));
 
   const isSingleUser = users.length === 1;
@@ -352,9 +336,12 @@ export const getServerSideProps = async (context: GetServerSidePropsContext) =>
       })
     : [];
 
+  const safeBio = markdownToSafeHTML(user.bio) || "";
+
   return {
     props: {
       users,
+      safeBio,
       profile,
       user: {
         emailMd5: crypto.createHash("md5").update(user.email).digest("hex"),

apps/web/pages/[user]/[type].tsx

@@ -5,7 +5,7 @@ import type { LocationObject } from "@calcom/app-store/locations";
 import { IS_TEAM_BILLING_ENABLED, WEBAPP_URL } from "@calcom/lib/constants";
 import hasKeyInMetadata from "@calcom/lib/hasKeyInMetadata";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { addListFormatting } from "@calcom/lib/markdownIt";
+import { markdownToSafeHTML } from "@calcom/lib/markdownToSafeHTML";
 import type { User } from "@calcom/prisma/client";
 
 import { isBrandingHidden } from "@lib/isBrandingHidden";
@@ -20,12 +20,12 @@ export default function Type(props: AvailabilityPageProps) {
   const { t } = useLocale();
 
   return props.away ? (
-    <div className="h-screen dark:bg-gray-900">
+    <div className="dark:bg-inverted h-screen">
       <main className="mx-auto max-w-3xl px-4 py-24">
         <div className="space-y-6" data-testid="event-types">
           <div className="overflow-hidden rounded-sm border dark:border-gray-900">
-            <div className="p-8 text-center text-gray-400 dark:text-white">
-              <h2 className="font-cal mb-2 text-3xl text-gray-600 dark:text-white">
+            <div className="text-muted dark:text-inverted p-8 text-center">
+              <h2 className="font-cal dark:text-inverted text-emphasis600 mb-2 text-3xl">
                 😴{" " + t("user_away")}
               </h2>
               <p className="mx-auto max-w-md">{t("user_away_description")}</p>
@@ -39,8 +39,8 @@ export default function Type(props: AvailabilityPageProps) {
       <main className="mx-auto max-w-3xl px-4 py-24">
         <div className="space-y-6" data-testid="event-types">
           <div className="overflow-hidden rounded-sm border dark:border-gray-900">
-            <div className="p-8 text-center text-gray-400 dark:text-white">
-              <h2 className="font-cal mb-2 text-3xl text-gray-600 dark:text-white">
+            <div className="text-muted dark:text-inverted p-8 text-center">
+              <h2 className="font-cal dark:text-inverted text-emphasis600 mb-2 text-3xl">
                 {" " + t("unavailable")}
               </h2>
               <p className="mx-auto max-w-md">{t("user_dynamic_booking_disabled")}</p>
@@ -54,12 +54,9 @@ export default function Type(props: AvailabilityPageProps) {
   );
 }
 
-Type.isThemeSupported = true;
-
 const paramsSchema = z.object({ type: z.string(), user: z.string() });
 async function getUserPageProps(context: GetStaticPropsContext) {
   // load server side dependencies
-  const MarkdownIt = await import("markdown-it").then((mod) => mod.default);
   const prisma = await import("@calcom/prisma").then((mod) => mod.default);
   const { privacyFilteredLocations } = await import("@calcom/app-store/locations");
   const { parseRecurringEvent } = await import("@calcom/lib/isRecurringEvent");
@@ -124,9 +121,6 @@ async function getUserPageProps(context: GetStaticPropsContext) {
       },
     },
   });
-
-  const md = new MarkdownIt("default", { html: true, breaks: true, linkify: true });
-
   if (!user || !user.eventTypes.length) return { notFound: true };
 
   const [eventType]: ((typeof user.eventTypes)[number] & {
@@ -153,7 +147,7 @@ async function getUserPageProps(context: GetStaticPropsContext) {
     metadata: EventTypeMetaDataSchema.parse(eventType.metadata || {}),
     recurringEvent: parseRecurringEvent(eventType.recurringEvent),
     locations: privacyFilteredLocations(locations),
-    descriptionAsSafeHTML: eventType.description ? addListFormatting(md.render(eventType.description)) : null,
+    descriptionAsSafeHTML: markdownToSafeHTML(eventType.description),
   });
   // Check if the user you are logging into has any active teams or premium user name
   const hasActiveTeam =

apps/web/pages/[user]/book.tsx

@@ -13,7 +13,10 @@ import {
   getGroupName,
   getUsernameList,
 } from "@calcom/lib/defaultEvents";
+import getBooking from "@calcom/lib/getBooking";
+import type { GetBookingType } from "@calcom/lib/getBooking";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { markdownToSafeHTML } from "@calcom/lib/markdownToSafeHTML";
 import prisma, { bookEventTypeSelect } from "@calcom/prisma";
 import {
   customInputSchema,
@@ -21,8 +24,6 @@ import {
   userMetadata as userMetadataSchema,
 } from "@calcom/prisma/zod-utils";
 
-import type { GetBookingType } from "@lib/getBooking";
-import getBooking from "@lib/getBooking";
 import type { inferSSRProps } from "@lib/types/inferSSRProps";
 
 import BookingPage from "@components/booking/pages/BookingPage";
@@ -34,12 +35,12 @@ export type BookPageProps = inferSSRProps<typeof getServerSideProps>;
 export default function Book(props: BookPageProps) {
   const { t } = useLocale();
   return props.away ? (
-    <div className="h-screen dark:bg-gray-900">
+    <div className="dark:bg-inverted h-screen">
       <main className="mx-auto max-w-3xl px-4 py-24">
         <div className="space-y-6" data-testid="event-types">
           <div className="overflow-hidden rounded-sm border dark:border-gray-900">
-            <div className="p-8 text-center text-gray-400 dark:text-white">
-              <h2 className="font-cal mb-2 text-3xl text-gray-600 dark:text-white">
+            <div className="text-muted dark:text-inverted p-8 text-center">
+              <h2 className="font-cal dark:text-inverted text-default mb-2 text-3xl">
                 😴{" " + t("user_away")}
               </h2>
               <p className="mx-auto max-w-md">{t("user_away_description")}</p>
@@ -49,12 +50,12 @@ export default function Book(props: BookPageProps) {
       </main>
     </div>
   ) : props.isDynamicGroupBooking && !props.profile.allowDynamicBooking ? (
-    <div className="h-screen dark:bg-gray-900">
+    <div className="dark:bg-inverted h-screen">
       <main className="mx-auto max-w-3xl px-4 py-24">
         <div className="space-y-6" data-testid="event-types">
           <div className="overflow-hidden rounded-sm border dark:border-gray-900">
-            <div className="p-8 text-center text-gray-400 dark:text-white">
-              <h2 className="font-cal mb-2 text-3xl text-gray-600 dark:text-white">
+            <div className="text-muted dark:text-inverted p-8 text-center">
+              <h2 className="font-cal dark:text-inverted text-default mb-2 text-3xl">
                 {" " + t("unavailable")}
               </h2>
               <p className="mx-auto max-w-md">{t("user_dynamic_booking_disabled")}</p>
@@ -68,8 +69,6 @@ export default function Book(props: BookPageProps) {
   );
 }
 
-Book.isThemeSupported = true;
-
 const querySchema = z.object({
   bookingUid: z.string().optional(),
   count: z.coerce.number().optional(),
@@ -189,6 +188,7 @@ export async function getServerSideProps(context: GetServerSidePropsContext) {
         slug: u.username,
         theme: u.theme,
       })),
+      descriptionAsSafeHTML: markdownToSafeHTML(eventType.description),
     };
   })[0];
 
@@ -217,7 +217,9 @@ export async function getServerSideProps(context: GetServerSidePropsContext) {
       rescheduleUid = bookingSeat.booking.uid;
       attendeeEmail = bookingSeat.attendee.email;
     }
-  } else if (eventTypeRaw.seatsPerTimeSlot && query.duration && query.date) {
+  }
+
+  if (query.duration) {
     // If it's not reschedule but event Type has seats we should obtain
     // the bookingUid regardless and use it to get the booking
     const currentSeats = await prisma.booking.findFirst({
@@ -237,11 +239,7 @@ export async function getServerSideProps(context: GetServerSidePropsContext) {
 
   let booking: GetBookingType | null = null;
   if (rescheduleUid || query.bookingUid || bookingUidWithSeats) {
-    booking = await getBooking(
-      prisma,
-      rescheduleUid || query.bookingUid || bookingUidWithSeats || "",
-      eventTypeObject.bookingFields
-    );
+    booking = await getBooking(prisma, rescheduleUid || query.bookingUid || bookingUidWithSeats || "");
   }
 
   if (rescheduleEventTypeHasSeats && booking?.attendees && booking?.attendees.length > 0) {
@@ -285,12 +283,15 @@ export async function getServerSideProps(context: GetServerSidePropsContext) {
         : eventType.recurringEvent.count)) ||
     null;
 
+  const currentSlotBooking = await getBooking(prisma, bookingUidWithSeats || "");
+
   return {
     props: {
       away: user.away,
       profile,
       eventType: eventTypeObject,
       booking,
+      currentSlotBooking: currentSlotBooking,
       recurringEventCount,
       trpcState: ssr.dehydrate(),
       isDynamicGroupBooking,

apps/web/pages/[user]/calendar-cache/[month].tsx

@@ -47,7 +47,7 @@ export const getStaticProps: GetStaticProps<
       revalidate: 1,
     };
   } catch (error) {
-    let message = "Unknown error while fetching calendarƒ";
+    let message = "Unknown error while fetching calendar";
     if (error instanceof Error) message = error.message;
     console.error(error, message);
     return {

apps/web/pages/_document.tsx

@@ -41,12 +41,12 @@ class MyDocument extends Document<Props> {
           <link rel="manifest" href="/site.webmanifest" />
           <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#000000" />
           <meta name="msapplication-TileColor" content="#ff0000" />
-          <meta name="theme-color" content="#ffffff" />
+          <meta name="theme-color" content="var(--cal-bg)" />
           <Script src="/embed-init-iframe.js" strategy="beforeInteractive" />
         </Head>
 
         <body
-          className="dark:bg-darkgray-50 desktop-transparent bg-gray-100 antialiased"
+          className="dark:bg-darkgray-50 desktop-transparent bg-subtle antialiased"
           style={
             isEmbed
               ? {