feat: upgrade tailwind v4 (#24598)

* chore: refactor config files to prevent migration tool errors

* refactor: upgrade with the tailwind migration tool

* chore: restore pre-commit command + mc

* refactor(wip): update dependencies and migrate to Tailwind CSS v4 (mainly web)

* chore: resolve Tailwind v4 migration conflicts from merging main

* chore: remove unused Tailwind packages from config and update dependencies for v4 migration

* chore: uncomment Tailwind CSS utility classes in globals.css

* fix: resolve token conflicts between calcom and coss ui

* fix: textarea scrollbar

* Fix CUI-16

* fix: added @tailwindcss/forms plugin and cleaned up CSS classes in various components to remove unnecessary dark mode styles

* fix: selects and inputs of different sizes

* fix: remove unnecessary leading-20 class from modal titles in various components

* fix: update Checkbox component styles to remove unnecessary border on checked state

* fix: clean up styles in RequiresConfirmationController, Checkbox, and Radio components to enhance consistency

* fix: update button and filter component styles to remove unnecessary rounded classes for consistency

* fix: calendar

* fix: update KBarSearch

* fix: refine styles in Empty and Checkbox components for improved consistency

* Fix focus state email input

* fix: update button hover and active states to use 'not-disabled' instead of 'enabled'

* fix: line-height issues

* fix: update class name for muted background in BookingListItem component

* fix: sidebar spacing

* chore: update class names to use new Tailwind CSS color utilities

* fix embed

* chore: upgrade Tailwind CSS to version 4.1.16 and update related dependencies

* Map css variables and add a playground test for heavy css customization

* suggestion for coss-ui

* refactor: update CSS variable usage and clean up styles

- Replace instances of `--cal-brand-color` with `--cal-brand` in embed-related HTML files.
- Remove the now-unnecessary `addAppCssVars` function from the embed core.
- Import theme tokens in the embed core styles for better consistency.
- Clean up whitespace and formatting in CSS files for improved readability.
- Add a comment in `tokens.css` regarding its usage in both embed and webapp contexts.

* Handle within tokens.css instead of fixing coss-ui

* Remove initial, not needed. Also, remove tailwind.config.js as tailwidn scans the html automaically

* fix: examples app breaking

* fix: modal not resizing correctly

* feat: upgrade atoms to tailwind v4

* fix: atoms build breaking

* fix: atoms build breaking

* chore: upgrate examples/base to tailwind 4

* chore: update globals.css

* fix: add missing scheduler css variables

* fix: PlatformAdditionalCalendarSelector

* chore: update global styles

* chore: update tailwindcss and postcss dependencies to stable versions

* chore: remove unneeded class

* fix: dialog and toast animation

* fix: replace flex-shrink-0 with shrink-0 for consistent styling in various components

* fix: dialog modal for Apple connect

* add margin in SaveFilterSegmentButton

* Fix radix button nested states

* add cursor pointer to buttons but keep dsabled state

* Fix commandK selectors and adds cursor pointer

* Fix teams filter

* fix - round checkboxes

* fix filter checkbox

* fix select indicator's margin

* command group font size

* style: fix badge and tooltip radius

* chore: remove unneeded files

* Delete PR_REVIEW_MANAGED_EVENT_REASSIGNMENT.md

* remove ui-playground leftover

* fix: add missing react phone input styles in atoms

* Delete managed-event-reassignment-flow-and-architecture.mermaid

* fix: inter font not loading

* Add theme to skeleton container so that it can support dark mode

* fix: create custom stack-y-* utilities post tw4 upgrade

* fix: typo

* fix: atoms stack class + remove unused css file

* fix default radius valiue

* fix space-y in embed

* fix skeleton background

* Hardcode radius values to match production

* fix border in embed

* add missing externalThemeClass

* feat: create a custom stack-y-* utility

* fix: add stack utility to atom global css

* fix: Skeleton loader class modalbox

* Add stack-y utility in embed

* fix: add missing stack utilities in atoms globals.css

* update yarn.lock

* add popover portla

* update

---------

Co-authored-by: Sean Brydon <sean@cal.com>
Co-authored-by: Hariom Balhara <hariombalhara@gmail.com>
Co-authored-by: Ryukemeister <sahalrajiv6900@gmail.com>
Co-authored-by: cal.com <morgan@cal.com>
Co-authored-by: Eunjae Lee <hey@eunjae.dev>
Co-authored-by: Anik Dhabal Babu <adhabal2002@gmail.com>

.vscode/extensions.json

@@ -4,7 +4,6 @@
     "yzhang.markdown-all-in-one", // nicer markdown support
     "esbenp.prettier-vscode", // prettier plugin
     "dbaeumer.vscode-eslint", // eslint plugin
-    "bradlc.vscode-tailwindcss", // hinting / autocompletion for tailwind
     "ban.spellright", // Spell check for docs
     "stripe.vscode-stripe", // stripe VSCode extension
     "Prisma.prisma", // syntax|format|completion for prisma

.vscode/settings.json

@@ -8,5 +8,5 @@
   "typescript.preferences.importModuleSpecifier": "non-relative",
   "spellright.language": ["en"],
   "spellright.documentTypes": ["markdown", "typescript", "typescriptreact"],
-  "tailwindCSS.experimental.classRegex": [["cva\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"]]
+  "tailwindCSS.classFunctions": ["cva"]
 }

apps/web/app/(use-page-wrapper)/(main-nav)/ShellMainAppDir.tsx

@@ -46,7 +46,7 @@ export function ShellMainAppDir(props: LayoutProps) {
                     props.backPath
                       ? "relative"
                       : "pwa:bottom-[max(7rem,_calc(5rem_+_env(safe-area-inset-bottom)))] fixed bottom-32 z-40 ltr:right-4 rtl:left-4 md:z-auto md:ltr:right-0 md:rtl:left-0",
-                    "flex-shrink-0 [-webkit-app-region:no-drag] md:relative md:bottom-auto md:right-auto"
+                    "shrink-0 [-webkit-app-region:no-drag] md:relative md:bottom-auto md:right-auto"
                   )}>
                   {props.CTA}
                 </div>

apps/web/app/(use-page-wrapper)/apps/routing-forms/[...pages]/FormEdit.tsx

@@ -97,7 +97,7 @@ function Field({
               data-testid={`${hookFieldNamespace}.label`}
               disabled={!!router}
               label="Label"
-              className="flex-grow"
+              className="grow"
               placeholder={t("this_is_what_your_users_would_see")}
               defaultValue={label || routerField?.label || "Field"}
               required
@@ -189,7 +189,7 @@ function Field({
             />
           </div>
           {["select", "multiselect"].includes(fieldType) ? (
-            <div className="bg-muted w-full rounded-[10px] p-2">
+            <div className="bg-cal-muted w-full rounded-[10px] p-2">
               <Label className="text-subtle">{t("options")}</Label>
               <MultiOptionInput
                 fieldArrayName={`${hookFieldNamespace}.options`}
@@ -319,7 +319,7 @@ const FormEdit = ({
   ) : (
     <div className="w-full py-4 lg:py-8">
       {/* TODO: remake empty screen for V3 */}
-      <div className="border-sublte bg-muted flex flex-col items-center gap-6 rounded-xl border p-11">
+      <div className="border-sublte bg-cal-muted flex flex-col items-center gap-6 rounded-xl border p-11">
         <div className="mb-3 grid">
           {/* Icon card - Top */}
           <div className="bg-default border-subtle z-30 col-start-1 col-end-1 row-start-1 row-end-1 h-10 w-10 transform rounded-md border shadow-sm">

apps/web/app/(use-page-wrapper)/apps/routing-forms/[...pages]/IncompleteBooking.tsx

@@ -122,7 +122,7 @@ function Page({ form }: { form: RoutingFormWithResponseCount }) {
             />
           </div>
           {salesforceActionEnabled ? (
-            <div className="bg-muted mt-1 rounded-xl p-2">
+            <div className="bg-cal-muted mt-1 rounded-xl p-2">
               {form.team && (
                 <>
                   <div className="bg-default mt-2 rounded-xl px-2 py-2">

apps/web/app/(use-page-wrapper)/apps/routing-forms/[...pages]/RouteBuilder.tsx

@@ -307,7 +307,7 @@ const WeightedAttributesSelector = ({
             }}
           />
         </div>
-        <div className="bg-muted mt-1 rounded-xl p-2">
+        <div className="bg-cal-muted mt-1 rounded-xl p-2">
           {attributeIdForWeights ? (
             <SelectField
               size="sm"
@@ -652,21 +652,21 @@ const Route = ({
       <div
         className={classNames(
           "cal-query-builder-card w-full gap-2 p-2",
-          route.isFallback && "bg-muted border-subtle rounded-xl  border"
+          route.isFallback && "bg-cal-muted border-subtle rounded-xl  border"
         )}>
         <div className="cal-query-builder w-full ">
           {formFieldsQueryBuilder}
           <div>
             {route.isFallback ? (
               <div className="flex w-full flex-col gap-2 text-sm lg:flex-row">
-                <div className="flex flex-grow items-center gap-2">
-                  {/* <div className="flex flex-grow-0 whitespace-nowrap">
+                <div className="flex grow items-center gap-2">
+                  {/* <div className="flex grow-0 whitespace-nowrap">
                       <span>{t("send_booker_to")}</span>
                     </div> */}
                   <Select
                     size="sm"
                     isDisabled={disabled}
-                    className="data-testid-select-routing-action block w-full flex-grow"
+                    className="data-testid-select-routing-action block w-full grow"
                     required
                     value={RoutingPages.find((page) => page.value === route.action?.type)}
                     onChange={(item) => {
@@ -695,7 +695,7 @@ const Route = ({
                       required
                       disabled={disabled}
                       name="customPageMessage"
-                      className="border-default flex flex-grow lg:w-fit"
+                      className="border-default flex grow lg:w-fit"
                       style={{
                         minHeight: "38px",
                       }}
@@ -708,8 +708,8 @@ const Route = ({
                     <TextField
                       disabled={disabled}
                       name="externalRedirectUrl"
-                      className="border-default flex flex-grow text-sm"
-                      containerClassName="flex-grow"
+                      className="border-default flex grow text-sm"
+                      containerClassName="grow"
                       type="url"
                       required
                       labelSrOnly
@@ -720,7 +720,7 @@ const Route = ({
                       placeholder="https://example.com"
                     />
                   ) : (
-                    <div className="flex-grow">
+                    <div className="grow">
                       <Select
                         size="sm"
                         required
@@ -758,8 +758,8 @@ const Route = ({
                         <>
                           <TextField
                             disabled={disabled}
-                            className="border-default flex w-full flex-grow text-sm"
-                            containerClassName="flex-grow mt-2"
+                            className="border-default flex w-full grow text-sm"
+                            containerClassName="grow mt-2"
                             addOnLeading={eventTypePrefix}
                             required
                             value={customEventTypeSlug}
@@ -796,12 +796,12 @@ const Route = ({
                   </div>
                   <span className="text-emphasis ml-2 text-sm font-medium">Send booker to</span>
                 </div>
-                <div className="bg-muted flex w-full flex-col gap-2 rounded-xl p-2 text-sm lg:flex-row">
-                  <div className="flex flex-grow items-center gap-2">
+                <div className="bg-cal-muted flex w-full flex-col gap-2 rounded-xl p-2 text-sm lg:flex-row">
+                  <div className="flex grow items-center gap-2">
                     <Select
                       size="sm"
                       isDisabled={disabled}
-                      className="data-testid-select-routing-action block w-full flex-grow"
+                      className="data-testid-select-routing-action block w-full grow"
                       required
                       value={RoutingPages.find((page) => page.value === route.action?.type)}
                       onChange={(item) => {
@@ -830,7 +830,7 @@ const Route = ({
                         required
                         disabled={disabled}
                         name="customPageMessage"
-                        className="border-default flex flex-grow lg:w-fit"
+                        className="border-default flex grow lg:w-fit"
                         style={{
                           minHeight: "38px",
                         }}
@@ -844,8 +844,8 @@ const Route = ({
                         size="sm"
                         disabled={disabled}
                         name="externalRedirectUrl"
-                        className="border-default flex flex-grow text-sm"
-                        containerClassName="flex-grow"
+                        className="border-default flex grow text-sm"
+                        containerClassName="grow"
                         type="url"
                         required
                         labelSrOnly
@@ -856,7 +856,7 @@ const Route = ({
                         placeholder="https://example.com"
                       />
                     ) : (
-                      <div className="flex-grow">
+                      <div className="grow">
                         <Select
                           size="sm"
                           required
@@ -894,8 +894,8 @@ const Route = ({
                           <>
                             <TextField
                               disabled={disabled}
-                              className="border-default flex w-full flex-grow text-sm"
-                              containerClassName="flex-grow mt-2"
+                              className="border-default flex w-full grow text-sm"
+                              containerClassName="grow mt-2"
                               addOnLeading={eventTypePrefix}
                               required
                               value={customEventTypeSlug}

apps/web/app/(use-page-wrapper)/apps/routing-forms/[...pages]/RoutingLink.tsx

@@ -177,7 +177,7 @@ function RoutingForm({ form, profile, ...restProps }: Props) {
           <>
             <div className={classNames("mx-auto my-0 max-w-3xl", isEmbed ? "" : "md:my-24")}>
               <div className="w-full max-w-4xl ltr:mr-2 rtl:ml-2">
-                <div className="main border-booker md:border-booker-width dark:bg-muted bg-default mx-0 rounded-md p-4 py-6 sm:-mx-4 sm:px-8 ">
+                <div className="main border-booker md:border-booker-width dark:bg-cal-muted bg-default mx-0 rounded-md p-4 py-6 sm:-mx-4 sm:px-8 ">
                   <Toaster position="bottom-right" />
 
                   <form onSubmit={handleOnSubmit}>

apps/web/app/(use-page-wrapper)/apps/routing-forms/forms/[[...pages]]/Forms.tsx

@@ -160,7 +160,7 @@ export default function RoutingForms({ appUrl }: { appUrl: string }) {
           background="/tips/routing-forms"
           isParentLoading={<SkeletonLoaderTeamList />}
           buttons={
-            <div className="space-y-2 rtl:space-x-reverse sm:space-x-2">
+            <div className="stack-y-2 rtl:space-x-reverse sm:space-x-2">
               <ButtonGroup>
                 <Button color="primary" href={`${WEBAPP_URL}/settings/teams/new`}>
                   {t("upgrade")}
@@ -278,7 +278,7 @@ export default function RoutingForms({ appUrl }: { appUrl: string }) {
                                       action="edit"
                                       routingForm={form}
                                       color="minimal"
-                                      className="!flex"
+                                      className="flex!"
                                       StartIcon="pencil">
                                       {t("edit")}
                                     </FormAction>

apps/web/app/(use-page-wrapper)/availability/[schedule]/skeleton.tsx

@@ -24,7 +24,7 @@ export function AvailabilityScheduleSkeleton() {
               </div>
 
               {/* Action buttons */}
-              <div className="relative flex-shrink-0 md:relative md:bottom-auto md:right-auto">
+              <div className="relative shrink-0 md:relative md:bottom-auto md:right-auto">
                 {/* Desktop buttons - Set to Default, Delete, and Save */}
                 <div className="flex items-center justify-end">
                   {/* Set to Default - desktop only */}
@@ -99,14 +99,14 @@ export function AvailabilityScheduleSkeleton() {
                     <SkeletonText className="ml-2 h-4 w-4 rounded-full" /> {/* Info icon */}
                   </div>
                   <SkeletonText className="mb-4 mt-1 h-4 w-full max-w-md text-sm" /> {/* Description */}
-                  <div className="space-y-2">
+                  <div className="stack-y-2">
                     <SkeletonButton className="h-9 w-36 rounded-md" /> {/* Add an override button */}
                   </div>
                 </div>
               </div>
 
               {/* Sidebar - only visible on desktop */}
-              <div className="min-w-40 col-span-3 hidden space-y-2 md:block lg:col-span-1 xl:w-[25%]">
+              <div className="min-w-40 col-span-3 hidden stack-y-2 md:block lg:col-span-1 xl:w-[25%]">
                 <div className="xl:max-w-80 w-full pr-4 sm:ml-0 sm:mr-36 sm:p-0">
                   <div>
                     <SkeletonText className="mb-1 h-4 w-24 text-sm" /> {/* Timezone */}

apps/web/app/(use-page-wrapper)/availability/troubleshoot/layout.tsx

@@ -8,7 +8,7 @@ import { Icon } from "@calcom/ui/components/icon";
 export default function TroubleshooterLayout({ children }: { children: React.ReactNode }) {
   return (
     <>
-      <div className="flex flex-1 [&>*]:flex-1">
+      <div className="flex flex-1 *:flex-1">
         <ErrorBoundary>
           <Suspense fallback={<Icon name="loader" />}>{children}</Suspense>
         </ErrorBoundary>

apps/web/app/(use-page-wrapper)/event-types/[type]/skeleton.tsx

@@ -32,8 +32,8 @@ export const EventTypeEditPageSkeleton = () => {
     <Shell subtitle={<SkeletonText className="hidden h-4 w-24" />} afterHeading={backButtonSkeleton}>
       <div className="flex flex-col xl:flex-row xl:space-x-6">
         <div className="hidden xl:block">
-          <div className="primary-navigation w-64 flex-shrink-0">
-            <div className="flex flex-col space-y-1">
+          <div className="primary-navigation w-64 shrink-0">
+            <div className="flex flex-col stack-y-1">
               {/* Tab navigation items */}
               {Array.from({ length: 8 }).map((_, index) => (
                 <div
@@ -58,14 +58,14 @@ export const EventTypeEditPageSkeleton = () => {
                 <SkeletonText className="h-8 w-full max-w-md" />
               </div>
 
-              <div className="mb-6 space-y-6">
+              <div className="mb-6 stack-y-6">
                 {/* Form fields */}
-                <div className="flex flex-col space-y-2">
+                <div className="flex flex-col stack-y-2">
                   <SkeletonText className="h-4 w-32" />
                   <SkeletonText className="h-10 w-full" />
                 </div>
 
-                <div className="flex flex-col space-y-2">
+                <div className="flex flex-col stack-y-2">
                   <SkeletonText className="h-4 w-40" />
                   <div className="flex items-center">
                     <SkeletonText className="h-10 w-full" />
@@ -73,12 +73,12 @@ export const EventTypeEditPageSkeleton = () => {
                   </div>
                 </div>
 
-                <div className="flex flex-col space-y-2">
+                <div className="flex flex-col stack-y-2">
                   <SkeletonText className="h-4 w-36" />
                   <SkeletonText className="h-24 w-full" />
                 </div>
 
-                <div className="flex flex-col space-y-2">
+                <div className="flex flex-col stack-y-2">
                   <SkeletonText className="h-4 w-28" />
                   <div className="flex items-center">
                     <SkeletonText className="h-10 w-full" />
@@ -86,7 +86,7 @@ export const EventTypeEditPageSkeleton = () => {
                   </div>
                 </div>
 
-                <div className="flex flex-col space-y-2">
+                <div className="flex flex-col stack-y-2">
                   <SkeletonText className="h-4 w-32" />
                   <SkeletonText className="h-10 w-full" />
                 </div>

apps/web/app/(use-page-wrapper)/insights/UpgradeTipWrapper.tsx

@@ -38,7 +38,7 @@ export default function UpgradeTipWrapper({ children }: { children: React.ReactN
       features={features}
       background="/tips/insights"
       buttons={
-        <div className="space-y-2 rtl:space-x-reverse sm:space-x-2">
+        <div className="stack-y-2 rtl:space-x-reverse sm:space-x-2">
           <ButtonGroup>
             <Button color="primary" href={`${WEBAPP_URL}/settings/teams/new`}>
               {t("create_team")}

apps/web/app/(use-page-wrapper)/payment/[uid]/PaymentPage.tsx

@@ -109,7 +109,7 @@ const PaymentPage: FC<PaymentPageProps> = (props) => {
                 aria-modal="true"
                 aria-labelledby="modal-headline">
                 <div>
-                  <div className="bg-success mx-auto flex h-12 w-12 items-center justify-center rounded-full">
+                  <div className="bg-cal-success mx-auto flex h-12 w-12 items-center justify-center rounded-full">
                     <PayIcon currency={paymentAppData.currency} className="h-8 w-8 text-green-600" />
                   </div>
 

apps/web/app/(use-page-wrapper)/refer/loading.tsx

@@ -15,7 +15,7 @@ export default function Loading() {
           <SkeletonText className="h-5 w-32" />
         </div>
 
-        <div className="mb-6 space-y-2">
+        <div className="mb-6 stack-y-2">
           <SkeletonText className="h-7 w-3/4" />
           <SkeletonText className="h-7 w-1/2" />
         </div>

apps/web/app/(use-page-wrapper)/settings/(admin-layout)/AdminLayoutAppDirClient.tsx

@@ -18,7 +18,7 @@ export default function AdminLayoutAppDirClient({ children }: AdminLayoutProps)
   const isAppsPage = pathname?.startsWith("/settings/admin/apps");
   return (
     <div className="divide-subtle bg-default mx-auto flex max-w-4xl flex-row divide-y">
-      <div className={isAppsPage ? "min-w-0" : "flex flex-1 [&>*]:flex-1"}>
+      <div className={isAppsPage ? "min-w-0" : "flex flex-1 *:flex-1"}>
         <ErrorBoundary>{children}</ErrorBoundary>
       </div>
     </div>

apps/web/app/(use-page-wrapper)/settings/(admin-layout)/admin/playground/bookings-by-hour/page.tsx

@@ -35,7 +35,7 @@ const sampleBookingsByHourStats = [
 export default function BookingsByHourPlayground() {
   const { t } = useLocale();
   return (
-    <div className="space-y-6 p-6">
+    <div className="stack-y-6 p-6">
       <div className="mb-6">
         <h1 className="text-3xl font-bold">Bookings by Hour Playground</h1>
         <p className="mt-2 text-gray-600">

apps/web/app/(use-page-wrapper)/settings/(admin-layout)/admin/playground/routing-funnel/page.tsx

@@ -56,7 +56,7 @@ const sampleRoutingFunnelData = [
 export default function RoutingFunnelPlayground() {
   const { t } = useLocale();
   return (
-    <div className="space-y-6 p-6">
+    <div className="stack-y-6 p-6">
       <div className="mb-6">
         <h1 className="text-3xl font-bold">Routing Funnel Playground</h1>
         <p className="mt-2 text-gray-600">

apps/web/app/(use-page-wrapper)/settings/(admin-layout)/admin/playground/weekly-calendar/page.tsx

@@ -512,7 +512,7 @@ function ScenarioCard({ scenario }: { scenario: Scenario }) {
 
 export default function WeeklyCalendarPlayground() {
   return (
-    <div className="space-y-8 p-6">
+    <div className="stack-y-8 p-6">
       <div>
         <h1 className="text-3xl font-bold">Weekly Calendar Playground</h1>
         <p className="text-subtle mt-2">
@@ -522,7 +522,7 @@ export default function WeeklyCalendarPlayground() {
       </div>
 
       {/* Grid View of All Scenarios */}
-      <div className="space-y-8">
+      <div className="stack-y-8">
         <h2 className="mb-4 text-2xl font-bold">All Scenarios (Side-by-Side)</h2>
         {scenarios.map((scenario, index) => (
           <ScenarioCard key={index} scenario={scenario} />
@@ -532,7 +532,7 @@ export default function WeeklyCalendarPlayground() {
       {/* Testing Checklist */}
       <div className="border-subtle rounded-lg border p-6">
         <h2 className="mb-4 text-xl font-bold">Testing Checklist</h2>
-        <ul className="text-subtle space-y-2 text-sm">
+        <ul className="text-subtle stack-y-2 text-sm">
           <li>✓ Visual appearance matches expectations (80% width with 8% cascading offsets)</li>
           <li>✓ Hover behavior works smoothly - hovered event appears topmost</li>
           <li>✓ No visual glitches with 3+ overlapping events</li>

apps/web/app/(use-page-wrapper)/settings/(settings-layout)/SettingsLayoutAppDirClient.tsx

@@ -446,13 +446,13 @@ const TeamListCollapsible = ({ teamFeatures }: { teamFeatures?: Record<number, T
                     )}
                   </button>
                 </CollapsibleTrigger>
-                <CollapsibleContent className="space-y-0.5" id={`team-content-${team.id}`}>
+                <CollapsibleContent className="stack-y-0.5" id={`team-content-${team.id}`}>
                   {team.accepted && (
                     <VerticalTabItem
                       name={t("profile")}
                       href={`/settings/teams/${team.id}/profile`}
                       textClassNames="px-3 text-emphasis font-medium text-sm"
-                      className="me-5 h-7 w-auto !px-2"
+                      className="me-5 h-7 w-auto px-2!"
                       disableChevron
                     />
                   )}
@@ -460,7 +460,7 @@ const TeamListCollapsible = ({ teamFeatures }: { teamFeatures?: Record<number, T
                     name={t("members")}
                     href={`/settings/teams/${team.id}/members`}
                     textClassNames="px-3 text-emphasis font-medium text-sm"
-                    className="me-5 h-7 w-auto !px-2"
+                    className="me-5 h-7 w-auto px-2!"
                     disableChevron
                   />
                   {/* Show roles only for sub-teams with PBAC-enabled parent */}
@@ -481,7 +481,7 @@ const TeamListCollapsible = ({ teamFeatures }: { teamFeatures?: Record<number, T
                         name={t("appearance")}
                         href={`/settings/teams/${team.id}/appearance`}
                         textClassNames="px-3 text-emphasis font-medium text-sm"
-                        className="me-5 h-7 w-auto !px-2"
+                        className="me-5 h-7 w-auto px-2!"
                         disableChevron
                       />
                       {/* Hide if there is a parent ID */}
@@ -491,7 +491,7 @@ const TeamListCollapsible = ({ teamFeatures }: { teamFeatures?: Record<number, T
                             name={t("billing")}
                             href={`/settings/teams/${team.id}/billing`}
                             textClassNames="px-3 text-emphasis font-medium text-sm"
-                            className="me-5 h-7 w-auto !px-2"
+                            className="me-5 h-7 w-auto px-2!"
                             disableChevron
                           />
                         </>
@@ -500,7 +500,7 @@ const TeamListCollapsible = ({ teamFeatures }: { teamFeatures?: Record<number, T
                         name={t("settings")}
                         href={`/settings/teams/${team.id}/settings`}
                         textClassNames="px-3 text-emphasis font-medium text-sm"
-                        className="me-5 h-7 w-auto !px-2"
+                        className="me-5 h-7 w-auto px-2!"
                         disableChevron
                       />
                     </>
@@ -578,7 +578,7 @@ const SettingsSidebarContainer = ({
     <nav
       style={{ maxHeight: `calc(100vh - ${bannersHeight}px)`, top: `${bannersHeight}px` }}
       className={classNames(
-        "no-scrollbar bg-muted fixed bottom-0 left-0 top-0 z-20 flex max-h-screen w-56 flex-col space-y-1 overflow-x-hidden overflow-y-scroll px-2 pb-3 transition-transform max-lg:z-10 lg:sticky lg:flex",
+        "no-scrollbar bg-cal-muted fixed bottom-0 left-0 top-0 z-20 flex max-h-screen w-56 flex-col stack-y-1 overflow-x-hidden overflow-y-scroll px-2 pb-3 transition-transform max-lg:z-10 lg:sticky lg:flex",
         className,
         navigationIsOpenedOnMobile
           ? "translate-x-0 opacity-100"
@@ -592,7 +592,7 @@ const SettingsSidebarContainer = ({
             <React.Fragment key={tab.href}>
               {!["teams", "other_teams"].includes(tab.name) && (
                 <React.Fragment key={tab.href}>
-                  <div className={`${!tab.children?.length ? "!mb-3" : ""}`}>
+                  <div className={`${!tab.children?.length ? "mb-3!" : ""}`}>
                     <div className="[&[aria-current='page']]:bg-emphasis [&[aria-current='page']]:text-emphasis text-default group flex h-7 w-full flex-row items-center rounded-md px-2 text-sm font-medium leading-none">
                       {tab && tab.icon && (
                         <Icon
@@ -618,7 +618,7 @@ const SettingsSidebarContainer = ({
                       </Skeleton>
                     </div>
                   </div>
-                  <div className="my-3 space-y-px">
+                  <div className="stack-y-px">
                     {tab.children?.map((child, index) => (
                       <div key={child.href} className="flex items-start gap-2">
                         <VerticalTabItem
@@ -626,8 +626,8 @@ const SettingsSidebarContainer = ({
                           isExternalLink={child.isExternalLink}
                           href={child.href || "/"}
                           textClassNames="text-emphasis font-medium text-sm"
-                          className={`h-7 w-fit !px-2 ${
-                            tab.children && index === tab.children?.length - 1 && "!mb-3"
+                          className={`h-7 w-fit px-2! ${
+                            tab.children && index === tab.children?.length - 1 && "mb-3!"
                           }`}
                           disableChevron
                         />
@@ -668,7 +668,7 @@ const SettingsSidebarContainer = ({
                         name={t("add_a_team")}
                         href={`${WEBAPP_URL}/settings/teams/new`}
                         textClassNames="px-3 items-center mt-2 text-emphasis font-medium text-sm"
-                        className="me-5 h-7 w-auto !px-2"
+                        className="me-5 h-7 w-auto px-2!"
                         icon="plus"
                         disableChevron
                       />
@@ -766,20 +766,20 @@ const SettingsSidebarContainer = ({
                                 </button>
                               </CollapsibleTrigger>
                               <CollapsibleContent
-                                className="space-y-0.5"
+                                className="stack-y-0.5"
                                 id={`other-team-content-${otherTeam.id}`}>
                                 <VerticalTabItem
                                   name={t("profile")}
                                   href={`/settings/organizations/teams/other/${otherTeam.id}/profile`}
                                   textClassNames="px-3 text-emphasis font-medium text-sm"
-                                  className="me-5 h-7 w-auto !px-2"
+                                  className="me-5 h-7 w-auto px-2!"
                                   disableChevron
                                 />
                                 <VerticalTabItem
                                   name={t("members")}
                                   href={`/settings/organizations/teams/other/${otherTeam.id}/members`}
                                   textClassNames="px-3 text-emphasis font-medium text-sm"
-                                  className="me-5 h-7 w-auto !px-2"
+                                  className="me-5 h-7 w-auto px-2!"
                                   disableChevron
                                 />
                                 <>
@@ -812,7 +812,7 @@ const MobileSettingsContainer = (props: { onSideContainerOpen?: () => void }) =>
 
   return (
     <>
-      <nav className="bg-muted border-muted sticky top-0 z-20 flex w-full items-center justify-between border-b px-2 py-2 sm:relative lg:hidden">
+      <nav className="bg-cal-muted border-muted sticky top-0 z-20 flex w-full items-center justify-between border-b px-2 py-2 sm:relative lg:hidden">
         <div className="flex items-center space-x-3">
           <Button StartIcon="menu" color="minimal" variant="icon" onClick={props.onSideContainerOpen}>
             <span className="sr-only">{t("show_navigation")}</span>
@@ -881,7 +881,7 @@ export default function SettingsLayoutAppDirClient({
       TopNavContainer={
         <MobileSettingsContainer onSideContainerOpen={() => setSideContainerOpen(!sideContainerOpen)} />
       }>
-      <div className="flex flex-1 [&>*]:flex-1">
+      <div className="flex flex-1 *:flex-1">
         <div
           className={classNames("mx-auto max-w-full justify-center lg:max-w-3xl", rest.containerClassName)}>
           <ErrorBoundary>{children}</ErrorBoundary>

apps/web/app/(use-page-wrapper)/settings/(settings-layout)/organizations/roles/_components/AdvancedPermissionGroup.tsx

@@ -87,7 +87,7 @@ export function AdvancedPermissionGroup({
   };
 
   return (
-    <div className="bg-muted border-subtle mb-2 rounded-xl border">
+    <div className="bg-cal-muted border-subtle mb-2 rounded-xl border">
       <button
         type="button"
         className="flex cursor-pointer items-center justify-between gap-1.5 p-4"

apps/web/app/(use-page-wrapper)/settings/(settings-layout)/organizations/roles/_components/PbacOptInModal.tsx

@@ -56,7 +56,7 @@ export function PbacOptInModal({ open, onOpenChange, revalidateRolesPath }: Pbac
             </div>
           </div>
 
-          <div className="bg-subtle w-full space-y-px overflow-hidden rounded-xl border border-gray-200">
+          <div className="bg-subtle border-subtle w-full stack-y-px overflow-hidden rounded-xl border">
             <div className="bg-default flex gap-3 p-3">
               <div className="bg-subtle flex h-8 w-8 shrink-0 items-center justify-center rounded-md">
                 <Icon name="shield-check" className="text-subtle h-5 w-5" />

apps/web/app/(use-page-wrapper)/settings/(settings-layout)/organizations/roles/_components/RoleColorPicker.tsx

@@ -33,7 +33,7 @@ export default function RoleColorPicker({ value, onChange, disabled }: RoleColor
         type="button"
         onClick={handleColorSquareClick}
         disabled={disabled}
-        className="bg-default text-default border-default hover:bg-muted hover:text-emphasis focus:bg-subtle focus-visible:shadow-outline-gray-focused shadow-outline-gray-rested enabled:hover:shadow-outline-gray-hover enabled:active:shadow-outline-gray-active flex h-8 w-8 items-center justify-center gap-2 rounded-[10px] border text-sm transition-shadow duration-200 focus-visible:outline-none focus-visible:ring-0 disabled:cursor-not-allowed disabled:opacity-50">
+        className="bg-default text-default border-default hover:bg-cal-muted hover:text-emphasis focus:bg-subtle focus-visible:shadow-outline-gray-focused shadow-outline-gray-rested enabled:hover:shadow-outline-gray-hover enabled:active:shadow-outline-gray-active flex h-8 w-8 items-center justify-center gap-2 rounded-[10px] border text-sm transition-shadow duration-200 focus-visible:outline-none focus-visible:ring-0 disabled:cursor-not-allowed disabled:opacity-50">
         <div
           className="h-5 w-5 rounded border shadow-sm"
           style={{ backgroundColor: value }}

apps/web/app/(use-page-wrapper)/settings/(settings-layout)/organizations/roles/_components/RoleSheet.tsx

@@ -183,7 +183,7 @@ export function RoleSheet({
           </SheetTitle>
         </SheetHeader>
         <Form form={form} handleSubmit={onSubmit}>
-          <div className="space-y-4 py-5">
+          <div className="stack-y-4 py-5">
             <div className="flex items-end justify-end gap-2">
               <div className="flex-1">
                 <TextField
@@ -203,7 +203,7 @@ export function RoleSheet({
 
             <div className="">
               {isAdvancedMode ? (
-                <div className="space-y-4">
+                <div className="stack-y-4">
                   <div>
                     <div className="mb-2 flex items-center justify-between">
                       <Label className="mb-0">{t("permissions")}</Label>
@@ -239,7 +239,7 @@ export function RoleSheet({
                   ))}{" "}
                 </div>
               ) : (
-                <div className="bg-muted rounded-xl p-1">
+                <div className="bg-cal-muted rounded-xl p-1">
                   <div className="flex items-center justify-between px-3 py-2">
                     <Label>{t("permissions")}</Label>
                     <div className="flex items-center gap-2">

apps/web/app/(use-page-wrapper)/settings/(settings-layout)/organizations/roles/_components/RolesList.tsx

@@ -71,7 +71,7 @@ export function RolesList({
   return (
     <>
       <div className="mt-4">
-        <div className="bg-muted border-muted flex flex-col rounded-xl border p-[1px]">
+        <div className="bg-cal-muted border-muted flex flex-col rounded-xl border p-px">
           {/* Roles list header */}
           <div className="px-5 py-4">
             <h2 className="text-default text-sm font-semibold leading-none">{t("role")}</h2>

apps/web/app/(use-page-wrapper)/settings/(settings-layout)/organizations/roles/_components/RolesSkeletonLoader.tsx

@@ -7,7 +7,7 @@ export const SkeletonLoader = () => {
   const { t } = useLocale();
   return (
     <div className="mt-4">
-      <div className="bg-muted border-muted flex flex-col rounded-xl border p-[1px]">
+      <div className="bg-cal-muted border-muted flex flex-col rounded-xl border p-px">
         {/* Roles list header */}
         <div className="px-5 py-4">
           <h2 className="text-default text-sm font-semibold leading-none">{t("role")}</h2>

apps/web/app/(use-page-wrapper)/settings/organizations/(org-user-only)/members/layout.tsx

@@ -8,7 +8,7 @@ export default async function Layout({ children }: { children: React.ReactNode }
   const t = await getTranslate();
 
   return (
-    <SettingsLayoutAppDirClient containerClassName="lg:max-w-screen-2xl">
+    <SettingsLayoutAppDirClient containerClassName="lg:max-w-(--breakpoint-2xl)">
       <SettingsHeader
         title={t("organization_members")}
         description={t("organization_description")}

apps/web/app/icons/page.tsx

@@ -15,7 +15,7 @@ export async function generateMetadata(): Promise<Metadata> {
   return await _generateMetadataForStaticPage("Icons Showcase", "", undefined, undefined, "/icons");
 }
 
-const interFont = Inter({ subsets: ["latin"], variable: "--font-inter", preload: true, display: "swap" });
+const interFont = Inter({ subsets: ["latin"], variable: "--font-sans", preload: true, display: "swap" });
 const calFont = localFont({
   src: "../../fonts/CalSans-SemiBold.woff2",
   variable: "--font-cal",

apps/web/app/layout.tsx

@@ -15,7 +15,7 @@ import { AppRouterI18nProvider } from "./AppRouterI18nProvider";
 import { SpeculationRules } from "./SpeculationRules";
 import { Providers } from "./providers";
 
-const interFont = Inter({ subsets: ["latin"], variable: "--font-inter", preload: true, display: "swap" });
+const interFont = Inter({ subsets: ["latin"], variable: "--font-sans", preload: true, display: "swap" });
 const calFont = localFont({
   src: "../fonts/CalSans-SemiBold.woff2",
   variable: "--font-cal",
@@ -115,8 +115,8 @@ export default async function RootLayout({ children }: { children: React.ReactNo
       <head nonce={nonce}>
         <style>{`
           :root {
-            --font-inter: ${interFont.style.fontFamily.replace(/'/g, "")};
-            --font-cal: ${calFont.style.fontFamily.replace(/'/g, "")};
+            --font-sans: ${interFont.style.fontFamily.replace(/\'/g, "")};
+            --font-cal: ${calFont.style.fontFamily.replace(/\'/g, "")};
           }
         `}</style>
       </head>
@@ -125,19 +125,19 @@ export default async function RootLayout({ children }: { children: React.ReactNo
         style={
           isEmbed
             ? {
-              background: "transparent",
-              // Keep the embed hidden till parent initializes and
-              // - gives it the appropriate styles if UI instruction is there.
-              // - gives iframe the appropriate height(equal to document height) which can only be known after loading the page once in browser.
-              // - Tells iframe which mode it should be in (dark/light) - if there is a a UI instruction for that
-              visibility: "hidden",
-              // This in addition to visibility: hidden is to ensure that elements with specific opacity set are not visible
-              opacity: 0,
-            }
+                background: "transparent",
+                // Keep the embed hidden till parent initializes and
+                // - gives it the appropriate styles if UI instruction is there.
+                // - gives iframe the appropriate height(equal to document height) which can only be known after loading the page once in browser.
+                // - Tells iframe which mode it should be in (dark/light) - if there is a a UI instruction for that
+                visibility: "hidden",
+                // This in addition to visibility: hidden is to ensure that elements with specific opacity set are not visible
+                opacity: 0,
+              }
             : {
-              visibility: "visible",
-              opacity: 1,
-            }
+                visibility: "visible",
+                opacity: 1,
+              }
         }>
         <IconSprites />
         <SpeculationRules

apps/web/app/notFoundClient.tsx

@@ -145,7 +145,7 @@ export function NotFound({ host }: { host: string }) {
                   target="_blank"
                   className="relative flex items-start space-x-4 py-6 rtl:space-x-reverse"
                   rel="noreferrer">
-                  <div className="flex-shrink-0">
+                  <div className="shrink-0">
                     <span className="flex h-12 w-12 items-center justify-center rounded-lg bg-green-50">
                       <Icon name="check" className="h-6 w-6 text-green-500" aria-hidden="true" />
                     </span>
@@ -164,7 +164,7 @@ export function NotFound({ host }: { host: string }) {
                     </h3>
                     <p className="text-subtle text-base">{t(`404_claim_entity_${pageType.toLowerCase()}`)}</p>
                   </div>
-                  <div className="flex-shrink-0 self-center">
+                  <div className="shrink-0 self-center">
                     <Icon name="chevron-right" className="text-muted h-5 w-5" aria-hidden="true" />
                   </div>
                 </a>
@@ -180,8 +180,8 @@ export function NotFound({ host }: { host: string }) {
                   <a
                     href={link.href}
                     className="relative flex items-start space-x-4 py-6 rtl:space-x-reverse">
-                    <div className="flex-shrink-0">
-                      <span className="bg-muted flex h-12 w-12 items-center justify-center rounded-lg">
+                    <div className="shrink-0">
+                      <span className="bg-cal-muted flex h-12 w-12 items-center justify-center rounded-lg">
                         <Icon name={link.icon} className="text-default h-6 w-6" aria-hidden="true" />
                       </span>
                     </div>
@@ -194,7 +194,7 @@ export function NotFound({ host }: { host: string }) {
                       </h3>
                       <p className="text-subtle text-base">{link.description}</p>
                     </div>
-                    <div className="flex-shrink-0 self-center">
+                    <div className="shrink-0 self-center">
                       <Icon name="chevron-right" className="text-muted h-5 w-5" aria-hidden="true" />
                     </div>
                   </a>

apps/web/components/AddToHomescreen.tsx

@@ -18,7 +18,7 @@ export default function AddToHomescreen() {
         <div className="rounded-lg p-2 shadow-lg sm:p-3" style={{ background: "#2F333D" }}>
           <div className="flex flex-wrap items-center justify-between">
             <div className="flex w-0 flex-1 items-center">
-              <span className="bg-brand text-brandcontrast dark:bg-darkmodebrand dark:text-darkmodebrandcontrast flex rounded-lg bg-opacity-30 p-2">
+              <span className="bg-brand/30 text-brandcontrast dark:bg-darkmodebrand/30 dark:text-darkmodebrandcontrast flex rounded-lg p-2">
                 <svg
                   className="h-7 w-7 fill-current text-[#5B93F9]"
                   xmlns="http://www.w3.org/2000/svg"
@@ -34,7 +34,7 @@ export default function AddToHomescreen() {
               </p>
             </div>
 
-            <div className="order-2 flex-shrink-0 sm:order-3">
+            <div className="order-2 shrink-0 sm:order-3">
               <button
                 onClick={() => setCloseBanner(true)}
                 type="button"

apps/web/components/EnterprisePage.tsx

@@ -52,7 +52,7 @@ export default function EnterprisePage() {
           features={features}
           background="/tips/enterprise"
           buttons={
-            <div className="space-y-2 rtl:space-x-reverse sm:space-x-2">
+            <div className="stack-y-2 rtl:space-x-reverse sm:space-x-2">
               <ButtonGroup>
                 <Button color="primary" href="https://go.cal.com/quote" target="_blank">
                   {t("contact_sales")}

apps/web/components/PageWrapper.tsx

@@ -24,7 +24,7 @@ export interface CalPageWrapper {
   PageWrapper?: AppProps["Component"]["PageWrapper"];
 }
 
-const interFont = Inter({ subsets: ["latin"], variable: "--font-inter", preload: true, display: "swap" });
+const interFont = Inter({ subsets: ["latin"], variable: "--font-sans", preload: true, display: "swap" });
 const calFont = localFont({
   src: "../fonts/CalSans-SemiBold.woff2",
   variable: "--font-cal",
@@ -80,7 +80,7 @@ function PageWrapper(props: AppProps) {
 
       <style jsx global>{`
         :root {
-          --font-inter: ${interFont.style.fontFamily};
+          --font-sans: ${interFont.style.fontFamily};
           --font-cal: ${calFont.style.fontFamily};
         }
       `}</style>

apps/web/components/apps/AppPage.tsx

@@ -497,7 +497,7 @@ export const AppPage = ({
           )}
         </ul>
         <hr className="border-subtle my-8 border" />
-        <span className="leading-1 text-subtle block text-xs">
+        <span className="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/applecalendar/Setup.tsx

@@ -25,8 +25,8 @@ export default function AppleCalendarSetup() {
 
   return (
     <div className="bg-emphasis flex h-screen dark:bg-inherit">
-      <div className="bg-default dark:bg-muted border-subtle m-auto rounded p-5 dark:border md:w-[560px] md:p-10">
-        <div className="flex flex-col space-y-5 md:flex-row md:space-x-5 md:space-y-0">
+      <div className="bg-default dark:bg-cal-muted border-subtle m-auto rounded p-5 dark:border md:w-[560px] md:p-10">
+        <div className="flex flex-col stack-y-5 md:flex-row md:space-x-5 md:stack-y-0">
           <div>
             {/* eslint-disable @next/next/no-img-element */}
             <img
@@ -75,7 +75,7 @@ export default function AppleCalendarSetup() {
                   }
                 }}>
                 <fieldset
-                  className="space-y-4"
+                  className="stack-y-4"
                   disabled={form.formState.isSubmitting}
                   data-testid="apple-calendar-form">
                   <TextField

apps/web/components/apps/btcpayserver/Setup.tsx

@@ -249,13 +249,13 @@ function BTCPaySetupPage(props: IBTCPaySetupProps) {
     <>
       <div className="bg-default flex h-screen items-center justify-center">
         {showContent ? (
-          <div className="flex w-full w-full max-w-[43em] flex-col items-center justify-center space-y-4 p-4 lg:space-y-5">
-            <form className="w-full space-y-4" onSubmit={onSubmit}>
+          <div className="flex w-full w-full max-w-[43em] flex-col items-center justify-center stack-y-4 p-4 lg:stack-y-5">
+            <form className="w-full stack-y-4" onSubmit={onSubmit}>
               <div className="bg-default border-subtle overflow-auto rounded border">
-                <div className="border-subtle flex items-center justify-between border-b-[1px] p-4 md:p-5">
+                <div className="border-subtle flex items-center justify-between border-b p-4 md:p-5">
                   <h2 className="text-2xl font-semibold">BTCPay Server Information</h2>
                 </div>
-                <div className="w-full space-y-4 p-4 md:p-5">
+                <div className="w-full stack-y-4 p-4 md:p-5">
                   <div className="w-full">
                     <KeyField
                       {...register("serverUrl", { required: true })}

apps/web/components/apps/caldavcalendar/Setup.tsx

@@ -26,7 +26,7 @@ export default function CalDavCalendarSetup() {
   return (
     <div className="bg-emphasis flex h-screen">
       <div className="bg-default m-auto rounded p-5 md:w-[560px] md:p-10">
-        <div className="flex flex-col space-y-5 md:flex-row md:space-x-5 md:space-y-0">
+        <div className="flex flex-col stack-y-5 md:flex-row md:space-x-5 md:stack-y-0">
           <div>
             {/* eslint-disable @next/next/no-img-element */}
             <img
@@ -60,7 +60,7 @@ export default function CalDavCalendarSetup() {
                     router.push(json.url);
                   }
                 }}>
-                <fieldset className="space-y-2" disabled={form.formState.isSubmitting}>
+                <fieldset className="stack-y-2" disabled={form.formState.isSubmitting}>
                   <TextField
                     required
                     type="text"
@@ -95,7 +95,7 @@ export default function CalDavCalendarSetup() {
                           href={errorActionUrl}
                           color="secondary"
                           target="_blank"
-                          className="ml-5 w-32 !p-5">
+                          className="ml-5 w-32 p-5!">
                           Go to Admin
                         </Button>
                       ) : undefined

apps/web/components/apps/exchange2013calendar/Setup.tsx

@@ -54,7 +54,7 @@ export default function Exchange2013CalendarSetup() {
                   router.push(json.url);
                 }
               }}>
-              <fieldset className="space-y-2" disabled={form.formState.isSubmitting}>
+              <fieldset className="stack-y-2" disabled={form.formState.isSubmitting}>
                 <TextField
                   required
                   type="text"

apps/web/components/apps/exchange2016calendar/Setup.tsx

@@ -54,7 +54,7 @@ export default function Exchange2016CalendarSetup() {
                   router.push(json.url);
                 }
               }}>
-              <fieldset className="space-y-2" disabled={form.formState.isSubmitting}>
+              <fieldset className="stack-y-2" disabled={form.formState.isSubmitting}>
                 <TextField
                   required
                   type="text"

apps/web/components/apps/exchangecalendar/Setup.tsx

@@ -67,7 +67,7 @@ export default function ExchangeSetup() {
     <>
       <div className="bg-emphasis flex h-screen">
         <div className="bg-default m-auto rounded p-5 md:w-[560px] md:p-10">
-          <div className="flex flex-col space-y-5 md:flex-row md:space-x-5 md:space-y-0">
+          <div className="flex flex-col stack-y-5 md:flex-row md:space-x-5 md:stack-y-0">
             <div>
               {/* eslint-disable @next/next/no-img-element */}
               <img
@@ -98,7 +98,7 @@ export default function ExchangeSetup() {
                       router.push(json.url);
                     }
                   }}>
-                  <fieldset className="space-y-4" disabled={form.formState.isSubmitting}>
+                  <fieldset className="stack-y-4" disabled={form.formState.isSubmitting}>
                     <TextField
                       required
                       type="url"

apps/web/components/apps/hitpay/Setup.tsx

@@ -203,15 +203,15 @@ function HitPaySetupPage(props: IHitPaySetupProps) {
     <>
       <div className="bg-default flex h-screen items-center justify-center">
         {showContent ? (
-          <div className="flex w-full w-full max-w-[43em] flex-col items-center justify-center space-y-4 p-4 lg:space-y-5">
+          <div className="flex w-full w-full max-w-[43em] flex-col items-center justify-center stack-y-4 p-4 lg:stack-y-5">
             <div className="rounded bg-blue-50 p-3 text-sm text-blue-700 dark:bg-blue-950 dark:text-blue-300">
               <Icon name="info" className="mb-0.5 inline-flex h-4 w-4" /> Create or connect to an existing
               HitPay account to receive payments for your paid bookings.
             </div>
 
-            <form className="w-full space-y-4" onSubmit={onSubmit}>
+            <form className="w-full stack-y-4" onSubmit={onSubmit}>
               <div className="bg-default border-subtle overflow-auto rounded border">
-                <div className="border-subtle flex items-center justify-between border-b-[1px] p-4 md:p-5">
+                <div className="border-subtle flex items-center justify-between border-b p-4 md:p-5">
                   <h2 className="text-2xl font-semibold">Account Information</h2>
                   <div className="ml-auto flex items-center">
                     <Switch
@@ -221,7 +221,7 @@ function HitPaySetupPage(props: IHitPaySetupProps) {
                     />
                   </div>
                 </div>
-                <div className="w-full space-y-4 p-4 md:p-5">
+                <div className="w-full stack-y-4 p-4 md:p-5">
                   <div className="w-full">
                     <KeyField
                       {...register("apiKey", {

apps/web/components/apps/ics-feedcalendar/Setup.tsx

@@ -24,7 +24,7 @@ export default function ICSFeedSetup() {
   return (
     <div className="bg-emphasis flex h-screen">
       <div className="bg-default m-auto rounded p-5 md:w-[560px] md:p-10">
-        <div className="flex flex-col space-y-5 md:flex-row md:space-x-5 md:space-y-0">
+        <div className="flex flex-col stack-y-5 md:flex-row md:space-x-5 md:stack-y-0">
           <div>
             {/* eslint-disable @next/next/no-img-element */}
             <img
@@ -58,7 +58,7 @@ export default function ICSFeedSetup() {
                     router.push(json.url);
                   }
                 }}>
-                <fieldset className="space-y-2" disabled={form.formState.isSubmitting}>
+                <fieldset className="stack-y-2" disabled={form.formState.isSubmitting}>
                   {urls.map((url, i) => (
                     <div key={i} className="flex w-full items-center gap-2">
                       <TextField
@@ -104,7 +104,7 @@ export default function ICSFeedSetup() {
                           href={errorActionUrl}
                           color="secondary"
                           target="_blank"
-                          className="ml-5 w-32 !p-5">
+                          className="ml-5 w-32 p-5!">
                           Go to Admin
                         </Button>
                       ) : undefined

apps/web/components/apps/installation/AccountsStepCard.tsx

@@ -42,9 +42,9 @@ const AccountSelector: FC<AccountSelectorProps> = ({
   return (
     <div
       className={classNames(
-        "hover:bg-muted flex cursor-pointer flex-row items-center gap-2 p-1",
+        "hover:bg-cal-muted flex cursor-pointer flex-row items-center gap-2 p-1",
         (alreadyInstalled || loading) && "cursor-not-allowed",
-        selected && loading && "bg-muted animate-pulse"
+        selected && loading && "bg-cal-muted animate-pulse"
       )}
       data-testid={testId}
       onClick={() => {

apps/web/components/apps/installation/ConfigureStepCard.tsx

@@ -139,7 +139,7 @@ const EventTypeGroup = ({
     keyName: "fieldId",
   });
   return (
-    <div className="ml-2 flex flex-col space-y-6">
+    <div className="ml-2 flex flex-col stack-y-6">
       {fields.map(
         (field, index) =>
           field.selected && (

apps/web/components/apps/installation/EventTypesStepCard.tsx

@@ -45,7 +45,7 @@ const EventTypeCard: FC<EventTypeCardProps> = ({
   return (
     <div
       data-testid={`select-event-type-${id}`}
-      className="hover:bg-muted min-h-20 box-border flex w-full cursor-pointer select-none items-center space-x-4 px-4 py-3"
+      className="hover:bg-cal-muted min-h-20 box-border flex w-full cursor-pointer select-none items-center space-x-4 px-4 py-3"
       onClick={() => handleSelect()}>
       <input
         id={`${id}`}
@@ -63,7 +63,7 @@ const EventTypeCard: FC<EventTypeCardProps> = ({
           </div>
           {Boolean(description) && (
             <div
-              className="text-subtle line-clamp-4 break-words text-sm sm:max-w-[650px] [&>*:not(:first-child)]:hidden [&_a]:text-blue-500 [&_a]:underline [&_a]:hover:text-blue-600"
+              className="text-subtle line-clamp-4 wrap-break-word text-sm sm:max-w-[650px] [&>*:not(:first-child)]:hidden [&_a]:text-blue-500 [&_a]:underline [&_a]:hover:text-blue-600"
               // eslint-disable-next-line react/no-danger
               dangerouslySetInnerHTML={{
                 __html: markdownToSafeHTML(description),
@@ -105,7 +105,7 @@ const EventTypeGroup: FC<EventTypeGroupProps> = ({ groupIndex, userName, ...prop
 
       <div className="sm:border-subtle bg-default  border dark:bg-black sm:rounded-md">
         <ScrollableArea className="rounded-md">
-          <ul className="border-subtle max-h-97 !static w-full divide-y">
+          <ul className="border-subtle max-h-97 static! w-full divide-y">
             {fields.length > 0 ? (
               fields.map((field, index) => (
                 <EventTypeCard
@@ -118,7 +118,7 @@ const EventTypeGroup: FC<EventTypeGroupProps> = ({ groupIndex, userName, ...prop
                 />
               ))
             ) : (
-              <div className="text-subtle bg-muted w-full p-2  text-center text-sm">Team has no Events</div>
+              <div className="text-subtle bg-cal-muted w-full p-2  text-center text-sm">Team has no Events</div>
             )}
           </ul>
         </ScrollableArea>

apps/web/components/apps/routing-forms/FormActions.tsx

@@ -95,9 +95,7 @@ function NewFormDialog({
     <Dialog open={newFormDialogState !== null} onOpenChange={(open) => !open && setNewFormDialogState(null)}>
       <DialogContent className="overflow-y-auto">
         <div className="mb-1">
-          <h3
-            className="text-emphasis !font-cal text-semibold leading-20 text-xl font-medium"
-            id="modal-title">
+          <h3 className="text-emphasis !font-cal text-semibold text-xl font-medium" id="modal-title">
             {teamId ? t("add_new_team_form") : t("add_new_form")}
           </h3>
           <div>
@@ -117,7 +115,7 @@ function NewFormDialog({
               duplicateFrom: formToDuplicate,
             });
           }}>
-          <div className="mt-3 space-y-5">
+          <div className="mt-3 stack-y-5">
             <TextField label={t("title")} required placeholder={t("a_routing_form")} {...register("name")} />
             <div className="mb-5">
               <TextAreaField
@@ -175,7 +173,10 @@ export const FormActionsDropdown = ({
             type="button"
             variant="icon"
             color="secondary"
-            className={classNames(disabled && "opacity-30")}
+            className={classNames(
+              disabled && "opacity-30",
+              "ltr:radix-state-open:rounded-r-(--btn-group-radius) rtl:radix-state-open:rounded-l-(--btn-group-radius)"
+            )}
             StartIcon="ellipsis"
           />
         </DropdownMenuTrigger>
@@ -272,16 +273,14 @@ function Dialogs({
 
 const actionsCtx = createContext({
   appUrl: "",
-  // eslint-disable-next-line @typescript-eslint/no-empty-function
+
   setNewFormDialogState: null as SetNewFormDialogState | null,
   newFormDialogState: null as NewFormDialogState,
   _delete: {
-    // eslint-disable-next-line @typescript-eslint/no-empty-function, @typescript-eslint/no-unused-vars
     onAction: (_arg: { routingForm: RoutingForm | null }) => {},
     isPending: false,
   },
   toggle: {
-    // eslint-disable-next-line @typescript-eslint/no-empty-function, @typescript-eslint/no-unused-vars
     onAction: (_arg: { routingForm: RoutingForm | null; checked: boolean }) => {},
     isPending: false,
   },

apps/web/components/apps/routing-forms/FormSettingsSlideover.tsx

@@ -191,7 +191,7 @@ export const FormSettingsSlideover = ({
             )}
           </div>
         </div>
-        <SheetFooter className="flex-shrink-0 ">
+        <SheetFooter className="shrink-0 ">
           <Button color="minimal" onClick={handleCancel} data-testid="settings-slider-over-cancel">
             {t("cancel")}
           </Button>

apps/web/components/apps/routing-forms/Header.tsx

@@ -289,7 +289,7 @@ export function Header({
           ) : (
             <div className="group flex items-center gap-1">
               <span
-                className="text-default hover:bg-muted min-w-[100px] cursor-pointer truncate whitespace-nowrap rounded px-1 text-sm font-semibold leading-none"
+                className="text-default hover:bg-cal-muted min-w-[100px] cursor-pointer truncate whitespace-nowrap rounded px-1 text-sm font-semibold leading-none"
                 onClick={() => setIsEditing(true)}>
                 {watchedName || "Loading..."}
               </span>

apps/web/components/apps/routing-forms/SingleForm.tsx

@@ -183,7 +183,7 @@ function SingleForm({
               className={classNames(
                 "bg-default flex-1",
                 isDesktop && "grid gap-8",
-                isDesktop && isTestPreviewOpen && "grid-cols-[1fr,400px]",
+                isDesktop && isTestPreviewOpen && "grid-cols-[1fr_400px]",
                 isDesktop && !isTestPreviewOpen && "grid-cols-1",
                 !isDesktop && "flex flex-col"
               )}>

apps/web/components/apps/routing-forms/TestForm.tsx

@@ -335,7 +335,7 @@ export const TestFormRenderer = ({
   if (!isMobile) {
     if (isTestPreviewOpen) {
       return (
-        <div className="border-muted bg-muted h-full border-l p-6">
+        <div className="border-muted bg-cal-muted h-full border-l p-6">
           <TestForm
             form={testForm}
             supportsTeamMembersMatchingLogic={isSubTeamForm}

apps/web/components/apps/sendgrid/Setup.tsx

@@ -39,7 +39,7 @@ export default function SendgridSetup() {
   return (
     <div className="bg-emphasis flex h-screen">
       <div className="bg-default m-auto rounded p-5 md:w-[520px] md:p-10">
-        <div className="flex flex-col space-y-5 md:flex-row md:space-x-5 md:space-y-0">
+        <div className="flex flex-col stack-y-5 md:flex-row md:space-x-5 md:stack-y-0">
           <div>
             <img src="/api/app-store/sendgrid/logo.png" alt="Sendgrid" className="h-12 w-12 max-w-2xl" />
           </div>
@@ -76,7 +76,7 @@ export default function SendgridSetup() {
                     showToast(json.message, "error");
                   }
                 }}>
-                <fieldset className="space-y-2" disabled={form.formState.isSubmitting}>
+                <fieldset className="stack-y-2" disabled={form.formState.isSubmitting}>
                   <Controller
                     name="api_key"
                     control={form.control}
@@ -108,8 +108,8 @@ export default function SendgridSetup() {
                     className={
                       testPassed !== undefined
                         ? testPassed
-                          ? " !bg-success hover:bg-success !text-green-700"
-                          : "bg-error hover:bg-error !border-red-700 !text-red-700"
+                          ? " bg-cal-success! hover:bg-cal-success text-green-700!"
+                          : "bg-error hover:bg-error border-red-700! text-red-700!"
                         : "secondary"
                     }
                     color={testPassed === true ? "minimal" : "secondary"}

apps/web/components/apps/wipemycalother/confirmDialog.tsx

@@ -82,7 +82,7 @@ export const ConfirmDialog = (props: IConfirmDialogWipe) => {
     <Dialog open={isOpenDialog} onOpenChange={setIsOpenDialog}>
       <DialogContent onOpenAutoFocus={(e) => e.preventDefault()}>
         <div className="flex flex-row space-x-3">
-          <div className="flex h-10 w-10 flex-shrink-0 justify-center rounded-full bg-[#FAFAFA]">
+          <div className="flex h-10 w-10 shrink-0 justify-center rounded-full bg-[#FAFAFA]">
             <Icon name="clock" className="m-auto h-5 w-5" />
           </div>
           <div className="pt-1">

apps/web/components/auth/BackupCode.tsx

@@ -9,7 +9,7 @@ export default function TwoFactor({ center = true }) {
   const methods = useFormContext();
 
   return (
-    <div className={center ? "mx-auto !mt-0 max-w-sm" : "!mt-0 max-w-sm"}>
+    <div className={center ? "mx-auto mt-0! max-w-sm" : "mt-0! max-w-sm"}>
       <Label className="mt-4">{t("backup_code")}</Label>
 
       <p className="text-subtle mb-4 text-sm">{t("backup_code_instructions")}</p>

apps/web/components/auth/TwoFactor.tsx

@@ -22,10 +22,10 @@ export default function TwoFactor({ center = true, autoFocus = true }) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [value]);
 
-  const className = "h-12 w-12 !text-xl text-center";
+  const className = "h-12 w-12 text-xl! text-center";
 
   return (
-    <div className={center ? "mx-auto !mt-0 max-w-sm" : "!mt-0 max-w-sm"}>
+    <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="text-subtle mb-4 text-sm">{t("2fa_enabled_instructions")}</p>

apps/web/components/booking/BookingListItem.tsx

@@ -354,9 +354,9 @@ function BookingListItem(booking: BookingItemProps) {
       <div
         data-testid="booking-item"
         data-today={String(booking.isToday)}
-        className="hover:bg-muted group w-full">
+        className="hover:bg-cal-muted group w-full">
         <div className="flex flex-col sm:flex-row">
-          <div className="hidden align-top ltr:pl-3 rtl:pr-6 sm:table-cell sm:min-w-[12rem]">
+          <div className="hidden align-top ltr:pl-3 rtl:pr-6 sm:table-cell sm:min-w-48">
             <div className="flex h-full items-center">
               {eventTypeColor && (
                 <div className="h-[70%] w-0.5" style={{ backgroundColor: eventTypeColor }} />
@@ -497,7 +497,7 @@ function BookingListItem(booking: BookingItemProps) {
               </div>
             </ConditionalLink>
           </div>
-          <div className="flex w-full flex-col flex-wrap items-end justify-end space-x-2 space-y-2 py-4 pl-4 text-right text-sm font-medium ltr:pr-4 rtl:pl-4 sm:flex-row sm:flex-nowrap sm:items-start sm:space-y-0 sm:pl-0">
+          <div className="flex w-full flex-col flex-wrap items-end justify-end space-x-2 stack-y-2 py-4 pl-4 text-right text-sm font-medium ltr:pr-4 rtl:pl-4 sm:flex-row sm:flex-nowrap sm:items-start sm:stack-y-0 sm:pl-0">
             {shouldShowPendingActions(actionContext) && <TableActions actions={pendingActions} />}
             <BookingActionsDropdown booking={booking} context="list" />
             {shouldShowRecurringCancelAction(actionContext) && <TableActions actions={[cancelEventAction]} />}

apps/web/components/booking/SkeletonLoader.tsx

@@ -29,7 +29,7 @@ function SkeletonItem() {
   return (
     <li className="group flex w-full items-start justify-between px-4 py-4 sm:px-6">
       {/* Left side - Date and time info */}
-      <div className="flex min-w-0 flex-shrink-0 flex-col gap-2 pr-4">
+      <div className="flex min-w-0 shrink-0 flex-col gap-2 pr-4">
         <SkeletonText className="h-4 w-24" />
         <SkeletonText className="h-4 w-28" />
         <div className="mt-1 flex items-center gap-2">
@@ -43,7 +43,7 @@ function SkeletonItem() {
       </div>
 
       {/* Right side - Event details */}
-      <div className="flex min-w-0 flex-1 flex-col space-y-2">
+      <div className="flex min-w-0 flex-1 flex-col stack-y-2">
         {/* Event title */}
         <SkeletonText className="h-5 w-36" />
         {/* Event description */}
@@ -53,14 +53,14 @@ function SkeletonItem() {
       </div>
 
       {/* Action buttons - only visible on larger screens */}
-      <div className="ml-4 hidden flex-shrink-0 gap-2 sm:flex">
+      <div className="ml-4 hidden shrink-0 gap-2 sm:flex">
         <SkeletonText className="h-9 w-20 rounded-md" />
         <SkeletonText className="h-9 w-20 rounded-md" />
         <SkeletonText className="h-9 w-9 rounded-md" />
       </div>
 
       {/* Mobile menu button */}
-      <div className="ml-4 flex flex-shrink-0 sm:hidden">
+      <div className="ml-4 flex shrink-0 sm:hidden">
         <SkeletonText className="h-9 w-9 rounded-md" />
       </div>
     </li>

apps/web/components/booking/actions/BookingActionsDropdown.tsx

@@ -369,7 +369,7 @@ export function BookingActionsDropdown({
     return (
       <Dialog open={isOpen} onOpenChange={setIsOpen}>
         <DialogContent title={t("mark_as_no_show")} enableOverflow>
-          <div className="space-y-2">
+          <div className="stack-y-2">
             {attendees.map((attendee, index) => (
               <label key={attendee.email} className="flex items-center space-x-2">
                 <input

apps/web/components/dialog/AddGuestsDialog.tsx

@@ -58,7 +58,7 @@ export const AddGuestsDialog = (props: IAddGuestsDialog) => {
     <Dialog open={isOpenDialog} onOpenChange={setIsOpenDialog}>
       <DialogContent enableOverflow>
         <div className="flex flex-row md:space-x-3">
-          <div className="bg-subtle hidden h-10 w-10 flex-shrink-0 justify-center rounded-full md:flex">
+          <div className="bg-subtle hidden h-10 w-10 shrink-0 justify-center rounded-full md:flex">
             <Icon name="user-plus" className="m-auto h-6 w-6" />
           </div>
           <div className="w-full md:pt-1">
@@ -74,7 +74,7 @@ export const AddGuestsDialog = (props: IAddGuestsDialog) => {
 
             {isInvalidEmail && (
               <div className="my-4 flex text-sm text-red-700">
-                <div className="flex-shrink-0">
+                <div className="shrink-0">
                   <Icon name="triangle-alert" className="h-5 w-5" />
                 </div>
                 <div className="ml-3">

apps/web/components/dialog/ChargeCardDialog.tsx

@@ -44,7 +44,7 @@ export const ChargeCardDialog = (props: IRescheduleDialog) => {
     <Dialog open={isOpenDialog} onOpenChange={setIsOpenDialog}>
       <DialogContent>
         <div className="flex flex-row space-x-3">
-          <div className=" bg-subtle flex h-10 w-10 flex-shrink-0 justify-center rounded-full">
+          <div className=" bg-subtle flex h-10 w-10 shrink-0 justify-center rounded-full">
             <Icon name="credit-card" className="m-auto h-6 w-6" />
           </div>
           <div className="pt-1">

apps/web/components/dialog/EditLocationDialog.tsx

@@ -257,7 +257,7 @@ export const EditLocationDialog = (props: ISetLocationDialog) => {
             }
           }}>
           <div className="flex flex-row md:space-x-3">
-            <div className="bg-subtle mx-auto hidden h-12 w-12 flex-shrink-0 items-center justify-center rounded-full sm:mx-0 sm:h-10 sm:w-10 md:flex">
+            <div className="bg-subtle mx-auto hidden h-12 w-12 shrink-0 items-center justify-center rounded-full sm:mx-0 sm:h-10 sm:w-10 md:flex">
               <Icon name="map-pin" className="text-emphasis h-6 w-6" />
             </div>
             <div className="w-full md:pt-1">

apps/web/components/dialog/ReassignDialog.tsx

@@ -244,7 +244,7 @@ export const ReassignDialog = ({
                           />
                           <div
                             className={classNames(
-                              "h-3 w-3 flex-shrink-0 rounded-full",
+                              "h-3 w-3 shrink-0 rounded-full",
                               member.status === "unavailable" ? "bg-red-500" : "bg-green-500"
                             )}
                           />

apps/web/components/dialog/RerouteDialog.tsx

@@ -373,9 +373,9 @@ const NewRoutingManager = ({
     reroutingState.value?.type === "reschedule_to_different_event_new_tab";
 
   return (
-    <div className="bg-muted flex flex-col space-y-3 rounded-md p-4 text-sm">
+    <div className="bg-cal-muted flex flex-col stack-y-3 rounded-md p-4 text-sm">
       <h2 className="text-emphasis font-medium">{t("new_routing_status")}</h2>
-      <div className="flex flex-col space-y-2">
+      <div className="flex flex-col stack-y-2">
         {reroutingState.status === ReroutingStatusEnum.REROUTING_NOT_INITIATED && reroutingPreview()}
         {(reroutingState.status === ReroutingStatusEnum.REROUTING_NOT_INITIATED || !isReroutingInNewTab) &&
           reroutingCTAs()}
@@ -567,7 +567,7 @@ const NewRoutingManager = ({
         throw new Error(t("something_went_wrong"));
       }
       return (
-        <div className="flex flex-col space-y-2">
+        <div className="flex flex-col stack-y-2">
           <span className="text-default" data-testid="reroute-preview-event-type">
             <span className="font-semibold">{t("event_type")}:</span>{" "}
             <a
@@ -666,9 +666,9 @@ const CurrentRoutingStatus = ({
   const bookerUrl = useBookerUrl();
   if (!fullSlug) return null;
   return (
-    <div className="bg-muted flex flex-col space-y-3 rounded-md p-4 text-sm">
+    <div className="bg-cal-muted flex flex-col stack-y-3 rounded-md p-4 text-sm">
       <h2 className="text-emphasis font-medium">{t("current_routing_status")}</h2>
-      <div className="flex flex-col space-y-2">
+      <div className="flex flex-col stack-y-2">
         <span className="text-default" data-testid="current-routing-status-event-type">
           <span className="font-semibold">{t("event_type")}:</span>{" "}
           <a

apps/web/components/dialog/RescheduleDialog.tsx

@@ -38,7 +38,7 @@ export const RescheduleDialog = (props: IRescheduleDialog) => {
     <Dialog open={isOpenDialog} onOpenChange={setIsOpenDialog}>
       <DialogContent enableOverflow data-testid="reschedule-dialog">
         <div className="flex flex-row md:space-x-3">
-          <div className="bg-subtle hidden h-10 w-10 flex-shrink-0 justify-center rounded-full md:flex">
+          <div className="bg-subtle hidden h-10 w-10 shrink-0 justify-center rounded-full md:flex">
             <Icon name="clock" className="m-auto h-6 w-6" />
           </div>
           <div className="w-full md:pt-1">

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

@@ -76,7 +76,7 @@ export const ErrorPage: React.FC<Props> = (props) => {
             <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="bg-emphasis text-emphasis w-full max-w-2xl whitespace-normal break-words rounded-md p-4">
+            <pre className="bg-emphasis text-emphasis w-full max-w-2xl whitespace-normal wrap-break-word rounded-md p-4">
               {message}
             </pre>
           </div>

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

@@ -29,7 +29,7 @@ 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-success py-[2px] px-[6px] font-sans text-xs font-medium text-green-600">
+            {/* <span className="mx-1 rounded-[4px] bg-cal-success py-[2px] px-[6px] font-sans text-xs font-medium text-green-600">
               {t("default")}
             </span> */}
           </p>
@@ -49,7 +49,7 @@ const ConnectedCalendarItem = (prop: IConnectedCalendarItem) => {
           {t("edit")}
         </Button> */}
       </div>
-      <div className="border-subtle h-[1px] w-full border-b" />
+      <div className="border-subtle h-px w-full border-b" />
       <div>
         <ul className="p-4">
           {calendars?.map((calendar, i) => (

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

@@ -59,7 +59,7 @@ const ConnectedVideoStepInner = ({
   const { data: metadata } = result;
   const defaultConferencingApp = metadata?.defaultConferencingApp?.appSlug;
   return (
-    <List className="bg-default  border-subtle divide-subtle scroll-bar mx-1 max-h-[45vh] divide-y !overflow-y-scroll rounded-md border p-0 sm:mx-0">
+    <List className="bg-default  border-subtle divide-subtle scroll-bar mx-1 max-h-[45vh] divide-y overflow-y-scroll! rounded-md border p-0 sm:mx-0">
       {queryConnectedVideoApps?.items &&
         queryConnectedVideoApps?.items.map((item) => {
           if (item.slug === "daily-video") return null; // we dont want to show daily here as it is installed by default

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

@@ -69,7 +69,7 @@ const SetupAvailability = (props: ISetupAvailabilityProps) => {
           }
         }
       }}>
-      <div className="bg-default dark:text-inverted text-emphasis border-subtle w-full rounded-md border dark:bg-opacity-5">
+      <div className="bg-default dark:text-inverted text-emphasis border-subtle w-full rounded-md border">
         <Schedule control={availabilityForm.control} name="schedule" weekStart={1} />
       </div>
 

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

@@ -68,7 +68,7 @@ const UserSettings = (props: IUserSettingsProps) => {
 
   return (
     <form onSubmit={onSubmit}>
-      <div className="space-y-6">
+      <div className="stack-y-6">
         {/* Username textfield: when not coming from signup */}
         {!props.hideUsername && <UsernameAvailabilityField />}
 

apps/web/components/security/TwoFactorModalHeader.tsx

@@ -3,7 +3,7 @@ import { Icon } from "@calcom/ui/components/icon";
 const TwoFactorModalHeader = ({ title, description }: { title: string; description: string }) => {
   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">
+      <div className="bg-brand/5 text-brandcontrast dark:bg-darkmodebrand/5 dark:text-darkmodebrandcontrast mx-auto flex h-12 w-12 shrink-0 items-center justify-center rounded-full sm:mx-0 sm:h-10 sm:w-10">
         <Icon name="shield" className="text-inverted h-6 w-6" />
       </div>
       <div className="mt-3 text-center sm:ml-4 sm:mt-0 sm:text-left">

apps/web/components/settings/CustomEmailTextField.tsx

@@ -11,7 +11,7 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from "@calcom/ui/components/dropdown";
-import { InputError } from "@calcom/ui/components/form";
+import { InputError, Input } from "@calcom/ui/components/form";
 
 import type { FormValues } from "~/settings/my-account/profile-view";
 
@@ -47,9 +47,9 @@ const CustomEmailTextField = ({
         className={`border-default mt-2 flex w-full items-center rounded-[10px] border ${
           inputFocus ? "ring-brand-default border-neutral-300 ring-2" : ""
         }`}>
-        <input
+        <Input
           {...formMethods.register(formMethodFieldName)}
-          className="flex-1 bg-transparent px-3 py-1.5 text-sm outline-none"
+          className="focus:ring-none! focus:shadow-none! flex-1 border-none bg-transparent px-3 py-1.5 text-sm outline-none"
           data-testid={dataTestId}
           onFocus={() => setInputFocus(true)}
           onBlur={() => setInputFocus(false)}

apps/web/components/settings/platform/oauth-clients/oauth-client-form/index.tsx

@@ -124,7 +124,7 @@ export const OAuthClientForm = ({
                   <TextField
                     type="url"
                     required={index === 0}
-                    className="w-[100%]"
+                    className="w-full"
                     label=""
                     disabled={isFormDisabled}
                     {...register(`redirectUris.${index}.uri` as const)}
@@ -197,7 +197,7 @@ export const OAuthClientForm = ({
             <TextField
               type="url"
               label="Booking redirect uri"
-              className="w-[100%]"
+              className="w-full"
               {...register("bookingRedirectUri")}
               disabled={isFormDisabled}
             />
@@ -208,7 +208,7 @@ export const OAuthClientForm = ({
             <TextField
               type="url"
               label="Booking cancel redirect uri"
-              className="w-[100%]"
+              className="w-full"
               {...register("bookingCancelRedirectUri")}
               disabled={isFormDisabled}
             />
@@ -219,7 +219,7 @@ export const OAuthClientForm = ({
             <TextField
               type="url"
               label="Booking reschedule redirect uri"
-              className="w-[100%]"
+              className="w-full"
               {...register("bookingRescheduleRedirectUri")}
               disabled={isFormDisabled}
             />

apps/web/components/settings/platform/pricing/billing-card/index.tsx

@@ -24,7 +24,7 @@ export const PlatformBillingCard = ({
   return (
     <div className="border-subtle max-w-[450px] rounded-2xl border p-5 md:mx-4">
       <div className="pb-5">
-        <h1 className="border-b-[1px] pb-2 pt-1 text-center text-2xl font-bold">
+        <h1 className="border-b pb-2 pt-1 text-center text-2xl font-bold">
           {plan}
           {currentPlan && (
             <>
@@ -51,7 +51,7 @@ export const PlatformBillingCard = ({
           <Button
             loading={isLoading}
             onClick={handleSubscribe}
-            className="flex w-[100%] items-center justify-center">
+            className="flex w-full items-center justify-center">
             {pricing !== undefined ? t("subscribe") : t("schedule_a_time")}
           </Button>
         </div>

apps/web/components/settings/platform/pricing/platform-pricing/index.tsx

@@ -63,7 +63,7 @@ export const PlatformPricing = ({ teamId, teamPlan, heading }: PlatformPricingPr
   }
 
   return (
-    <div className="flex h-auto flex-col items-center justify-center px-5 py-10 md:px-10 lg:h-[100%]">
+    <div className="flex h-auto flex-col items-center justify-center px-5 py-10 md:px-10 lg:h-full">
       {heading}
       <div>
         <div className="grid grid-cols-1 gap-5 md:grid-cols-2 lg:grid-cols-4">

apps/web/components/setup/AdminUser.tsx

@@ -20,7 +20,7 @@ export const AdminUserContainer = (props: React.ComponentProps<typeof AdminUser>
       <form
         id="wizard-step-1"
         name="wizard-step-1"
-        className="space-y-4"
+        className="stack-y-4"
         onSubmit={(e) => {
           e.preventDefault();
           props.onSuccess();
@@ -106,7 +106,7 @@ export const AdminUser = (props: {
 
   return (
     <FormProvider {...formMethods}>
-      <form id="wizard-step-1" name="wizard-step-1" className="space-y-4" onSubmit={onSubmit}>
+      <form id="wizard-step-1" name="wizard-step-1" className="stack-y-4" onSubmit={onSubmit}>
         <div>
           <Controller
             name="username"

apps/web/components/setup/ChooseLicense.tsx

@@ -19,7 +19,7 @@ const ChooseLicense = (
   return (
     <form
       {...rest}
-      className="space-y-4"
+      className="stack-y-4"
       onSubmit={(e) => {
         e.preventDefault();
         onSubmit(value);
@@ -36,7 +36,7 @@ const ChooseLicense = (
         <RadioGroup.Item value="FREE">
           <div
             className={classNames(
-              "bg-default cursor-pointer space-y-2 rounded-md border p-4 hover:border-black",
+              "bg-default cursor-pointer stack-y-2 rounded-md border p-4 hover:border-black",
               value === "FREE" && "ring-2 ring-black"
             )}>
             <h2 className="font-cal text-emphasis text-xl">{t("agplv3_license")}</h2>
@@ -51,7 +51,7 @@ const ChooseLicense = (
         </RadioGroup.Item>
         <RadioGroup.Item value="EE" disabled>
           <Link href="https://cal.com/sales" target="_blank">
-            <div className={classNames("bg-default h-full cursor-pointer space-y-2 rounded-md border p-4")}>
+            <div className={classNames("bg-default h-full cursor-pointer stack-y-2 rounded-md border p-4")}>
               <h2 className="font-cal text-emphasis text-xl">{t("custom_plan")}</h2>
               <p className="font-medium text-green-800">{t("contact_sales")}</p>
               <p className="text-subtle">Build on top of Cal.com</p>

apps/web/components/setup/EnterpriseLicense.tsx

@@ -89,7 +89,7 @@ const EnterpriseLicense = (
 
   return (
     <FormProvider {...formMethods}>
-      <form {...rest} className="bg-default space-y-4 rounded-md px-8 py-10" onSubmit={handleSubmit}>
+      <form {...rest} className="bg-default stack-y-4 rounded-md px-8 py-10" onSubmit={handleSubmit}>
         <div>
           <Button
             className="w-full justify-center text-lg"

apps/web/components/setup/LicenseSelection.tsx

@@ -101,7 +101,7 @@ const LicenseSelection = (
   return (
     <form
       {...rest}
-      className="space-y-6"
+      className="stack-y-6"
       onSubmit={(e) => {
         e.preventDefault();
         if (value === "FREE") {
@@ -119,7 +119,7 @@ const LicenseSelection = (
         <RadioGroup.Item value="FREE" className="h-full">
           <div
             className={classNames(
-              "bg-default h-full cursor-pointer space-y-2 rounded-md border p-4 hover:border-black",
+              "bg-default h-full cursor-pointer stack-y-2 rounded-md border p-4 hover:border-black",
               value === "FREE" && "ring-2 ring-black"
             )}>
             <h2 className="font-cal text-emphasis text-xl">{t("agplv3_license")}</h2>
@@ -136,7 +136,7 @@ const LicenseSelection = (
         <RadioGroup.Item value="EXISTING" className="h-full">
           <div
             className={classNames(
-              "bg-default h-full cursor-pointer space-y-2 rounded-md border p-4 hover:border-black",
+              "bg-default h-full cursor-pointer stack-y-2 rounded-md border p-4 hover:border-black",
               value === "EXISTING" && "ring-2 ring-black"
             )}>
             <h2 className="font-cal text-emphasis text-xl">{t("enter_license_key")}</h2>
@@ -158,8 +158,8 @@ const LicenseSelection = (
 
       {value === "EXISTING" && (
         <FormProvider {...formMethods}>
-          <div className="bg-muted space-y-4 rounded-md px-4 py-3">
-            <div className="space-y-4">
+          <div className="bg-cal-muted stack-y-4 rounded-md px-4 py-3">
+            <div className="stack-y-4">
               <div>
                 <Controller
                   name="licenseKey"

apps/web/components/setup/StepDone.tsx

@@ -16,7 +16,7 @@ const StepDone = (props: {
     <form
       id={`wizard-step-${props.currentStep}`}
       name={`wizard-step-${props.currentStep}`}
-      className="flex justify-center space-y-4"
+      className="flex justify-center stack-y-4"
       onSubmit={(e) => {
         props.setIsPending(true);
         e.preventDefault();

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

@@ -30,15 +30,15 @@ const Member = ({ member, teamName }: { member: MemberType; teamName: string | n
     <Link
       key={member.id}
       href={{ pathname: `${member.bookerUrl}/${member.username}`, query: queryParamsToForward }}>
-      <div className="bg-default hover:bg-muted border-subtle group flex min-h-full flex-col space-y-2 rounded-md border p-4 transition hover:cursor-pointer sm:w-80">
+      <div className="bg-default hover:bg-cal-muted border-subtle group flex min-h-full flex-col stack-y-2 rounded-md border p-4 transition hover:cursor-pointer sm:w-80">
         <UserAvatar noOrganizationIndicator size="md" user={member} />
-        <section className="mt-2 line-clamp-4 w-full space-y-1">
+        <section className="mt-2 line-clamp-4 w-full stack-y-1">
           <p className="text-default font-medium">{member.name}</p>
-          <div className="text-subtle line-clamp-3 overflow-ellipsis text-sm font-normal">
+          <div className="text-subtle line-clamp-3 text-ellipsis text-sm font-normal">
             {!isBioEmpty ? (
               <>
                 <div
-                  className="  text-subtle break-words text-sm [&_a]:text-blue-500 [&_a]:underline [&_a]:hover:text-blue-600"
+                  className="  text-subtle wrap-break-word text-sm [&_a]:text-blue-500 [&_a]:underline [&_a]:hover:text-blue-600"
                   // eslint-disable-next-line react/no-danger
                   dangerouslySetInnerHTML={{ __html: markdownToSafeHTML(member.bio) }}
                 />

apps/web/components/ui/AuthContainer.tsx

@@ -20,12 +20,12 @@ export default function AuthContainer(props: React.PropsWithChildren<Props>) {
         {props.heading && <h2 className="font-cal text-emphasis text-center text-3xl">{props.heading}</h2>}
       </div>
       {props.loading && (
-        <div className="bg-muted absolute z-50 flex h-screen w-full items-center">
+        <div className="bg-cal-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="bg-default dark:bg-muted border-subtle mx-2 rounded-md border px-4 py-10 sm:px-10">
+        <div className="bg-default dark:bg-cal-muted border-subtle mx-2 rounded-md border px-4 py-10 sm:px-10">
           {props.children}
         </div>
         <div className="text-default mt-8 text-center text-sm">{props.footerText}</div>

apps/web/components/ui/ModalContainer.tsx

@@ -25,7 +25,7 @@ export default function ModalContainer(
                 "sm:w-full sm:max-w-lg ": !props.wide,
                 "sm:w-4xl sm:max-w-4xl": props.wide,
                 "overflow-auto": props.scroll,
-                "!p-0": props.noPadding,
+                "p-0!": props.noPadding,
               }
             )}>
             {props.children}

apps/web/components/ui/SettingInputContainer.tsx

@@ -10,7 +10,7 @@ export default function SettingInputContainer({
   htmlFor?: string;
 }) {
   return (
-    <div className="space-y-3">
+    <div className="stack-y-3">
       <div className="block sm:flex">
         <div className="min-w-48 mb-4 sm:mb-0">
           <label htmlFor={htmlFor} className="text-default mt-1 flex text-sm font-medium">
@@ -18,7 +18,7 @@ export default function SettingInputContainer({
             {label}
           </label>
         </div>
-        <div className="w-full flex-grow">{Input}</div>
+        <div className="w-full grow">{Input}</div>
       </div>
     </div>
   );

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

@@ -202,7 +202,7 @@ const PremiumTextfield = (props: ICustomUsernameProps) => {
         <span
           className={classNames(
             isInputUsernamePremium ? "border border-orange-400 " : "",
-            "border-default bg-muted text-subtle hidden h-8 items-center rounded-l-md border border-r-0 px-3 text-sm md:inline-flex"
+            "border-default bg-cal-muted text-subtle hidden h-8 items-center rounded-l-md border border-r-0 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) => {
             autoCorrect="none"
             disabled={disabled}
             className={classNames(
-              "border-l-1 my-0 rounded-md font-sans text-sm leading-4 focus:!ring-0 sm:rounded-l-none",
+              "border-l my-0 rounded-md font-sans text-sm leading-4 focus:ring-0! sm:rounded-l-none",
               isInputUsernamePremium
                 ? "border border-orange-400 focus:border focus:border-orange-400"
                 : "border focus:border",

apps/web/modules/apps/apps-view.tsx

@@ -41,7 +41,7 @@ function AppsSearch({
     <TextField
       addOnLeading={<Icon name="search" className="text-subtle h-4 w-4" />}
       addOnClassname="!border-muted"
-      containerClassName={classNames("focus:!ring-offset-0 m-1", className)}
+      containerClassName={classNames("focus:ring-offset-0! m-1", className)}
       type="search"
       autoComplete="false"
       onChange={onChange}

apps/web/modules/apps/installation/[[...step]]/step-view.tsx

@@ -233,7 +233,7 @@ const OnboardingPage = ({
   return (
     <div
       key={pathname}
-      className="dark:bg-brand dark:text-brand-contrast text-emphasis min-h-screen px-4"
+      className="text-emphasis min-h-screen px-4"
       data-testid="onboarding">
       <div className="mx-auto py-6 sm:px-4 md:py-24">
         <div className="relative">

apps/web/modules/auth/forgot-password/[id]/forgot-password-single-view.tsx

@@ -21,7 +21,7 @@ function Success() {
   const { t } = useLocale();
   return (
     <>
-      <div className="space-y-6">
+      <div className="stack-y-6">
         <div>
           <h2 className="font-cal text-emphasis mt-6 text-center text-3xl font-extrabold">
             {t("password_updated")}
@@ -39,7 +39,7 @@ function Expired() {
   const { t } = useLocale();
   return (
     <>
-      <div className="space-y-6">
+      <div className="stack-y-6">
         <div>
           <h2 className="font-cal text-emphasis mt-6 text-center text-3xl font-extrabold">{t("whoops")}</h2>
           <h2 className="text-emphasis text-center text-3xl font-extrabold">{t("request_is_expired")}</h2>
@@ -114,7 +114,7 @@ function PasswordResetForm({
 
   return (
     <Form
-      className="space-y-6"
+      className="stack-y-6"
       form={formMethods}
       style={
         {

apps/web/modules/auth/forgot-password/forgot-password-view.tsx

@@ -76,7 +76,7 @@ export default function ForgotPassword(props: PageProps) {
 
   const Success = () => {
     return (
-      <div className="space-y-6 text-sm leading-normal ">
+      <div className="stack-y-6 text-sm leading-normal ">
         <p className="">{t("password_reset_email", { email })}</p>
         <p className="">{t("password_reset_leading")}</p>
         {error && <p className="text-center text-red-600">{error.message}</p>}
@@ -103,9 +103,9 @@ export default function ForgotPassword(props: PageProps) {
       {success && <Success />}
       {!success && (
         <>
-          <div className="space-y-6">{error && <p className="text-red-600">{error.message}</p>}</div>
+          <div className="stack-y-6">{error && <p className="text-red-600">{error.message}</p>}</div>
           <form
-            className="space-y-6"
+            className="stack-y-6"
             onSubmit={handleSubmit}
             action="#"
             style={
@@ -125,7 +125,7 @@ export default function ForgotPassword(props: PageProps) {
               placeholder="john.doe@example.com"
               required
             />
-            <div className="space-y-2">
+            <div className="stack-y-2">
               <Button
                 className="w-full justify-center bg-white hover:bg-black hover:text-white"
                 type="submit"

apps/web/modules/auth/login-view.tsx

@@ -177,7 +177,7 @@ export default function Login({
     : isSAMLLoginEnabled && !isPending && data?.connectionExists;
 
   return (
-    <div className="dark:bg-brand dark:text-brand-contrast text-emphasis min-h-screen [--cal-brand-emphasis:#101010] [--cal-brand-subtle:#9CA3AF] [--cal-brand-text:white] [--cal-brand:#111827] dark:[--cal-brand-emphasis:#e1e1e1] dark:[--cal-brand-text:black] dark:[--cal-brand:white]">
+    <div className="text-emphasis min-h-screen [--cal-brand-emphasis:#101010] [--cal-brand-subtle:#9CA3AF] [--cal-brand-text:white] [--cal-brand:#111827] dark:[--cal-brand-emphasis:#e1e1e1] dark:[--cal-brand-text:black] dark:[--cal-brand:white]">
       <AuthContainer
         showLogo
         heading={twoFactorRequired ? t("2fa_code") : t("welcome_back")}
@@ -193,7 +193,7 @@ export default function Login({
         <FormProvider {...methods}>
           {!twoFactorRequired && (
             <>
-              <div className="space-y-3">
+              <div className="stack-y-3">
                 {isGoogleLoginEnabled && (
                   <Button
                     color="primary"
@@ -224,11 +224,11 @@ export default function Login({
               {(isGoogleLoginEnabled || displaySSOLogin) && (
                 <div className="my-8">
                   <div className="relative flex items-center">
-                    <div className="border-subtle flex-grow border-t" />
-                    <span className="text-subtle mx-2 flex-shrink text-sm font-normal leading-none">
+                    <div className="border-subtle grow border-t" />
+                    <span className="text-subtle mx-2 shrink text-sm font-normal leading-none">
                       {t("or").toLocaleLowerCase()}
                     </span>
-                    <div className="border-subtle flex-grow border-t" />
+                    <div className="border-subtle grow border-t" />
                   </div>
                 </div>
               )}
@@ -239,8 +239,8 @@ export default function Login({
             <div>
               <input defaultValue={csrfToken || undefined} type="hidden" hidden {...register("csrfToken")} />
             </div>
-            <div className="space-y-6">
-              <div className={classNames("space-y-6", { hidden: twoFactorRequired })}>
+            <div className="stack-y-6">
+              <div className={classNames("stack-y-6", { hidden: twoFactorRequired })}>
                 <EmailField
                   id="email"
                   label={t("email_address")}

apps/web/modules/auth/logout-view.tsx

@@ -43,7 +43,7 @@ export function Logout(props: PageProps) {
   return (
     <AuthContainer showLogo>
       <div className="mb-4">
-        <div className="bg-success mx-auto flex h-12 w-12 items-center justify-center rounded-full">
+        <div className="bg-cal-success mx-auto flex h-12 w-12 items-center justify-center rounded-full">
           <Icon name="check" className="h-6 w-6 text-green-600" />
         </div>
         <div className="mt-3 text-center sm:mt-5">

apps/web/modules/auth/oauth2/authorize-view.tsx

@@ -116,7 +116,7 @@ export default function Authorize() {
           options={mappedProfiles}
         />
         <div className="mb-4 mt-5 font-medium">{t("allow_client_to", { clientName: client.name })}</div>
-        <ul className="space-y-4 text-sm">
+        <ul className="stack-y-4 text-sm">
           <li className="relative pl-5">
             <span className="absolute left-0">&#10003;</span>{" "}
             {t("associate_with_cal_account", { clientName: client.name })}

apps/web/modules/auth/platform/authorize-view.tsx

@@ -95,7 +95,7 @@ export default function Authorize() {
         <div className="mb-4 mt-5 font-medium text-black">
           {t("allow_client_to", { clientName: client.name })}
         </div>
-        <ul className="space-y-4 text-sm text-black">{permissions}</ul>
+        <ul className="stack-y-4 text-sm text-black">{permissions}</ul>
         <div className="bg-subtle mb-8 mt-8 flex rounded-md p-3">
           <div>
             <Icon name="info" className="mr-1 mt-0.5 h-4 w-4" />
@@ -110,7 +110,7 @@ export default function Authorize() {
         <div className="border-subtle border- -mx-9 mb-4 border-b" />
         <div className="flex justify-end">
           <Button
-            className="bg-primary mr-2 text-black"
+            className="bg-primary-default mr-2 text-black"
             onClick={() => {
               router.back();
             }}>

apps/web/modules/auth/setup-view.tsx

@@ -103,7 +103,7 @@ export function Setup(props: PageProps) {
   steps.push({
     title: t("enable_apps"),
     description: t("enable_apps_description", { appName: APP_NAME }),
-    contentClassname: "!pb-0 mb-[-1px]",
+    contentClassname: "pb-0! -mb-px",
     customActions: true,
     content: (setIsPending, nav) => {
       return (
@@ -113,7 +113,7 @@ export function Setup(props: PageProps) {
           classNames={{
             form: "mb-4 rounded-md bg-default px-0 pt-0 md:max-w-full",
             appCategoryNavigationContainer: "max-h-[400px] overflow-y-auto md:p-4",
-            verticalTabsItem: "!w-48 md:p-4",
+            verticalTabsItem: "w-48! md:p-4",
           }}
           baseURL={`/auth/setup?step=${steps.length}`}
           useQueryParam={true}

apps/web/modules/auth/signin-view.tsx

@@ -14,7 +14,7 @@ function Signin({ providers }: PageProps) {
   }
 
   return (
-    <div className="center mt-10 justify-between space-y-5 text-center align-baseline">
+    <div className="center mt-10 justify-between stack-y-5 text-center align-baseline">
       {Object.values(providers).map((provider) => {
         return (
           <div key={provider.name}>

apps/web/modules/auth/verify-email-view.tsx

@@ -32,7 +32,7 @@ function VerifyEmailPage() {
     return null;
   }
   return (
-    <div className="h-[100vh] w-full ">
+    <div className="h-screen w-full ">
       <div className="flex h-full w-full flex-col items-center justify-center">
         <div className="max-w-3xl">
           <EmptyScreen

apps/web/modules/auth/verify-view.tsx

@@ -59,7 +59,7 @@ const querySchema = z.object({
 
 const PaymentFailedIcon = () => (
   <div className="rounded-full bg-orange-900 p-3">
-    <Icon name="triangle-alert" className="h-6 w-6 flex-shrink-0 p-0.5 font-extralight text-orange-100" />
+    <Icon name="triangle-alert" className="h-6 w-6 shrink-0 p-0.5 font-extralight text-orange-100" />
   </div>
 );
 
@@ -108,7 +108,7 @@ const PaymentSuccess = () => (
 
 const MailOpenIcon = () => (
   <div className="bg-default rounded-full p-3">
-    <Icon name="mail-open" className="text-emphasis h-12 w-12 flex-shrink-0 p-0.5 font-extralight" />
+    <Icon name="mail-open" className="text-emphasis h-12 w-12 shrink-0 p-0.5 font-extralight" />
   </div>
 );
 
@@ -162,7 +162,7 @@ export default function Verify({ EMAIL_FROM }: { EMAIL_FROM?: string }) {
   }
 
   return (
-    <div className="text-default bg-muted bg-opacity-90 backdrop-blur-md backdrop-grayscale backdrop-filter">
+    <div className="text-default bg-cal-muted/90 backdrop-blur-md backdrop-grayscale backdrop-filter">
       <div className="flex min-h-screen flex-col items-center justify-center px-6">
         <div className="border-subtle bg-default m-10 flex max-w-2xl flex-col items-center rounded-xl border px-8 py-14 text-left">
           {hasPaymentFailed ? (

apps/web/modules/bookings/components/BookingDetailsSheet.tsx

@@ -191,9 +191,9 @@ function BookingDetailsSheetInner({
           </div>
         </SheetHeader>
 
-        <SheetBody className="space-y-6">
-          <div className="space-y-6">
-            <div className="space-y-1">
+        <SheetBody className="stack-y-6">
+          <div className="stack-y-6">
+            <div className="stack-y-1">
               <SheetTitle className="text-2xl font-semibold">{booking.title}</SheetTitle>
               <p className="text-subtle text-sm">
                 {startTime.format("dddd, MMMM D, YYYY h:mma")} - {endTime.format("h:mma")} (
@@ -277,7 +277,7 @@ function WhoSection({ booking }: { booking: BookingOutput }) {
   const { t } = useLocale();
   return (
     <Section title={t("who")}>
-      <div className="space-y-4">
+      <div className="stack-y-4">
         {booking.user && (
           <div className="flex items-center gap-4">
             <Avatar
@@ -340,12 +340,12 @@ function WhereSection({ booking, meta }: { booking: BookingOutput; meta: Booking
           // eslint-disable-next-line @next/next/no-img-element
           <img
             src={provider.iconUrl}
-            className="h-4 w-4 flex-shrink-0 rounded-sm"
+            className="h-4 w-4 shrink-0 rounded-sm"
             alt={`${provider?.label} logo`}
           />
         )}
         <div className="flex min-w-0 items-baseline gap-1">
-          <span className="text-default flex-shrink-0">{provider?.label}:</span>
+          <span className="text-default shrink-0">{provider?.label}:</span>
           <a
             href={locationToDisplay}
             target="_blank"
@@ -502,7 +502,7 @@ function Section({
   children: React.ReactNode;
 }) {
   return (
-    <div className={classNames("space-y-1", className)}>
+    <div className={classNames("stack-y-1", className)}>
       <h3 className="text-subtle text-xs font-semibold">{title}</h3>
       {children}
     </div>

apps/web/modules/bookings/views/booking-dry-run-success-view.tsx

@@ -39,7 +39,7 @@ export default function DryRunSuccessful() {
   return (
     <div className="flex h-screen">
       <div className="bg-default m-auto rounded-md p-10 text-center">
-        <div className="bg-success mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full">
+        <div className="bg-cal-success mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full">
           <Icon name="check" className="h-6 w-6 text-green-600 dark:text-green-400" />
         </div>
         <h1 className="text-emphasis mb-4 text-2xl font-medium" data-testid="dry-run-success-msg">

apps/web/modules/bookings/views/bookings-single-view.tsx

@@ -462,7 +462,7 @@ export default function Success(props: PageProps) {
               <div
                 className={classNames(
                   "inline-block transform overflow-hidden rounded-lg border sm:my-8 sm:max-w-xl",
-                  !isBackgroundTransparent && " bg-default dark:bg-muted border-booker border-booker-width",
+                  !isBackgroundTransparent && " bg-default dark:bg-cal-muted border-booker border-booker-width",
                   "px-8 pb-4 pt-5 text-left align-bottom transition-all sm:w-full sm:py-8 sm:align-middle"
                 )}
                 role="dialog"
@@ -490,7 +490,7 @@ export default function Success(props: PageProps) {
                           isRoundRobin &&
                             "border-cal-bg dark:border-cal-bg-muted absolute bottom-0 right-0 z-10 h-12 w-12 border-8",
                           !giphyImage && isReschedulable && !needsConfirmation && !isAwaitingPayment
-                            ? "bg-success"
+                            ? "bg-cal-success"
                             : "",
                           !giphyImage && isReschedulable && (needsConfirmation || isAwaitingPayment)
                             ? "bg-subtle"
@@ -568,7 +568,7 @@ export default function Success(props: PageProps) {
                               {isCancelled ? t("reason") : t("reschedule_reason")}
                             </div>
                             <div className="col-span-2 mb-6 last:mb-0">
-                              <p className="break-words">{cancellationReason}</p>
+                              <p className="wrap-break-word">{cancellationReason}</p>
                             </div>
                           </>
                         )}
@@ -578,7 +578,7 @@ export default function Success(props: PageProps) {
                             <>
                               <div className="font-medium">{t("cancelled_by")}</div>
                               <div className="col-span-2 mb-6 last:mb-0">
-                                <p className="break-words">{bookingInfo?.cancelledBy}</p>
+                                <p className="wrap-break-word">{bookingInfo?.cancelledBy}</p>
                               </div>
                             </>
                           )}
@@ -586,7 +586,7 @@ export default function Success(props: PageProps) {
                           <>
                             <div className="font-medium">{t("rescheduled_by")}</div>
                             <div className="col-span-2 mb-6 last:mb-0">
-                              <p className="break-words">{previousBooking?.rescheduledBy}</p>
+                              <p className="wrap-break-word">{previousBooking?.rescheduledBy}</p>
                               <Link className="text-sm underline" href={`/booking/${previousBooking?.uid}`}>
                                 {t("original_booking")}
                               </Link>
@@ -711,7 +711,7 @@ export default function Success(props: PageProps) {
                           <>
                             <div className="mt-9 font-medium">{t("additional_notes")}</div>
                             <div className="col-span-2 mb-2 mt-9">
-                              <p className="whitespace-pre-line break-words">{bookingInfo.description}</p>
+                              <p className="whitespace-pre-line wrap-break-word">{bookingInfo.description}</p>
                             </div>
                           </>
                         )}
@@ -738,7 +738,7 @@ export default function Success(props: PageProps) {
                                 <div className="col-span-2 mb-2 mt-2">
                                   {Object.entries(utmParams).filter(([_, value]) => Boolean(value)).length >
                                   0 ? (
-                                    <ul className="list-disc space-y-1 p-1 pl-5 sm:w-80">
+                                    <ul className="list-disc stack-y-1 p-1 pl-5 sm:w-80">
                                       {Object.entries(utmParams)
                                         .filter(([_, value]) => Boolean(value))
                                         .map(([key, value]) => (
@@ -783,7 +783,7 @@ export default function Success(props: PageProps) {
                                 }}
                               />
                               <p
-                                className="text-default break-words"
+                                className="text-default wrap-break-word"
                                 data-testid="field-response"
                                 data-fob-field={field.name}>
                                 {field.type === "boolean"
@@ -1053,7 +1053,7 @@ export default function Success(props: PageProps) {
                           </button>
                         ))}
                       </div>
-                      <div className="my-4 space-y-1 text-center">
+                      <div className="my-4 stack-y-1 text-center">
                         <h2 className="font-cal text-lg">{t("submitted_feedback")}</h2>
                         <p className="text-sm">{rateValue < 4 ? t("how_can_we_improve") : t("most_liked")}</p>
                       </div>

apps/web/modules/event-types/views/event-types-listing-view.tsx

@@ -125,7 +125,7 @@ const InfiniteTeamsTab: FC<InfiniteTeamsTabProps> = (props) => {
       <TextField
         className="max-w-64"
         addOnLeading={<Icon name="search" className="text-subtle h-4 w-4" />}
-        containerClassName="max-w-64 focus:!ring-offset-0 mb-4"
+        containerClassName="max-w-64 focus:ring-offset-0! mb-4"
         type="search"
         value={searchTerm}
         autoComplete="false"
@@ -483,7 +483,7 @@ export const InfiniteEventTypeList = ({
 
   return (
     <div className="bg-default border-subtle flex flex-col overflow-hidden rounded-md border">
-      <ul ref={parent} className="divide-subtle !static w-full divide-y" data-testid="event-types">
+      <ul ref={parent} className="divide-subtle static! w-full divide-y" data-testid="event-types">
         {pages.map((page, pageIdx) => {
           return page?.eventTypes?.map((type, index) => {
             const embedLink = `${group.profile.slug}/${type.slug}`;
@@ -505,7 +505,7 @@ export const InfiniteEventTypeList = ({
               type.schedulingType !== SchedulingType.MANAGED;
             return (
               <li key={type.id}>
-                <div className="hover:bg-muted flex w-full items-center justify-between transition">
+                <div className="hover:bg-cal-muted flex w-full items-center justify-between transition">
                   <div className="group flex w-full max-w-full items-center justify-between overflow-hidden px-4 py-4 sm:px-6">
                     {!(firstItem && firstItem.id === type.id) && (
                       <ArrowButton
@@ -617,7 +617,7 @@ export const InfiniteEventTypeList = ({
                                   color="secondary"
                                   StartIcon="ellipsis"
                                   // Unusual practice to use radix state open but for some reason this dropdown and only this dropdown clears the border radius of this button.
-                                  className="ltr:radix-state-open:rounded-r-[--btn-group-radius] rtl:radix-state-open:rounded-l-[--btn-group-radius]"
+                                  className="ltr:radix-state-open:rounded-r-(--btn-group-radius) rtl:radix-state-open:rounded-l-(--btn-group-radius)"
                                 />
                               </DropdownMenuTrigger>
                               <DropdownMenuContent>

apps/web/modules/getting-started/[[...step]]/onboarding-view.tsx

@@ -143,7 +143,7 @@ const OnboardingPage = (props: PageProps) => {
   return (
     <div
       className={classNames(
-        "dark:bg-brand dark:text-brand-contrast text-emphasis min-h-screen [--cal-brand:#111827] dark:[--cal-brand:#FFFFFF]",
+        "text-emphasis min-h-screen [--cal-brand:#111827] dark:[--cal-brand:#FFFFFF]",
         "[--cal-brand-emphasis:#101010] dark:[--cal-brand-emphasis:#e1e1e1]",
         "[--cal-brand-subtle:#9CA3AF]",
         "[--cal-brand-text:#FFFFFF]  dark:[--cal-brand-text:#000000]",

apps/web/modules/insights/insights-routing-view.tsx

@@ -22,7 +22,7 @@ export default function InsightsRoutingFormResponsesPage({ timeZone }: { timeZon
   return (
     <DataTableProvider tableIdentifier={pathname} useSegments={useSegments} timeZone={timeZone}>
       <InsightsOrgTeamsProvider>
-        <div className="mb-4 space-y-4">
+        <div className="mb-4 stack-y-4">
           <RoutingFormResponsesTable />
 
           <RoutingFunnel />