Skip to content

Commit d6546c3

Browse files
pasqualevitiellosean-brydonhariombalharaRyukemeisterThyMinimalDev
authored
feat: upgrade tailwind v4 (calcom#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>
1 parent 625c260 commit d6546c3

447 files changed

Lines changed: 13951 additions & 28100 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎.vscode/extensions.json‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@
44
"yzhang.markdown-all-in-one", // nicer markdown support
55
"esbenp.prettier-vscode", // prettier plugin
66
"dbaeumer.vscode-eslint", // eslint plugin
7-
"bradlc.vscode-tailwindcss", // hinting / autocompletion for tailwind
87
"ban.spellright", // Spell check for docs
98
"stripe.vscode-stripe", // stripe VSCode extension
109
"Prisma.prisma", // syntax|format|completion for prisma

‎.vscode/settings.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,5 +8,5 @@
88
"typescript.preferences.importModuleSpecifier": "non-relative",
99
"spellright.language": ["en"],
1010
"spellright.documentTypes": ["markdown", "typescript", "typescriptreact"],
11-
"tailwindCSS.experimental.classRegex": [["cva\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"]]
11+
"tailwindCSS.classFunctions": ["cva"]
1212
}

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@ export function ShellMainAppDir(props: LayoutProps) {
4646
props.backPath
4747
? "relative"
4848
: "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",
49-
"flex-shrink-0 [-webkit-app-region:no-drag] md:relative md:bottom-auto md:right-auto"
49+
"shrink-0 [-webkit-app-region:no-drag] md:relative md:bottom-auto md:right-auto"
5050
)}>
5151
{props.CTA}
5252
</div>

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -97,7 +97,7 @@ function Field({
9797
data-testid={`${hookFieldNamespace}.label`}
9898
disabled={!!router}
9999
label="Label"
100-
className="flex-grow"
100+
className="grow"
101101
placeholder={t("this_is_what_your_users_would_see")}
102102
defaultValue={label || routerField?.label || "Field"}
103103
required
@@ -189,7 +189,7 @@ function Field({
189189
/>
190190
</div>
191191
{["select", "multiselect"].includes(fieldType) ? (
192-
<div className="bg-muted w-full rounded-[10px] p-2">
192+
<div className="bg-cal-muted w-full rounded-[10px] p-2">
193193
<Label className="text-subtle">{t("options")}</Label>
194194
<MultiOptionInput
195195
fieldArrayName={`${hookFieldNamespace}.options`}
@@ -319,7 +319,7 @@ const FormEdit = ({
319319
) : (
320320
<div className="w-full py-4 lg:py-8">
321321
{/* TODO: remake empty screen for V3 */}
322-
<div className="border-sublte bg-muted flex flex-col items-center gap-6 rounded-xl border p-11">
322+
<div className="border-sublte bg-cal-muted flex flex-col items-center gap-6 rounded-xl border p-11">
323323
<div className="mb-3 grid">
324324
{/* Icon card - Top */}
325325
<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‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -122,7 +122,7 @@ function Page({ form }: { form: RoutingFormWithResponseCount }) {
122122
/>
123123
</div>
124124
{salesforceActionEnabled ? (
125-
<div className="bg-muted mt-1 rounded-xl p-2">
125+
<div className="bg-cal-muted mt-1 rounded-xl p-2">
126126
{form.team && (
127127
<>
128128
<div className="bg-default mt-2 rounded-xl px-2 py-2">

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

Lines changed: 20 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -307,7 +307,7 @@ const WeightedAttributesSelector = ({
307307
}}
308308
/>
309309
</div>
310-
<div className="bg-muted mt-1 rounded-xl p-2">
310+
<div className="bg-cal-muted mt-1 rounded-xl p-2">
311311
{attributeIdForWeights ? (
312312
<SelectField
313313
size="sm"
@@ -652,21 +652,21 @@ const Route = ({
652652
<div
653653
className={classNames(
654654
"cal-query-builder-card w-full gap-2 p-2",
655-
route.isFallback && "bg-muted border-subtle rounded-xl border"
655+
route.isFallback && "bg-cal-muted border-subtle rounded-xl border"
656656
)}>
657657
<div className="cal-query-builder w-full ">
658658
{formFieldsQueryBuilder}
659659
<div>
660660
{route.isFallback ? (
661661
<div className="flex w-full flex-col gap-2 text-sm lg:flex-row">
662-
<div className="flex flex-grow items-center gap-2">
663-
{/* <div className="flex flex-grow-0 whitespace-nowrap">
662+
<div className="flex grow items-center gap-2">
663+
{/* <div className="flex grow-0 whitespace-nowrap">
664664
<span>{t("send_booker_to")}</span>
665665
</div> */}
666666
<Select
667667
size="sm"
668668
isDisabled={disabled}
669-
className="data-testid-select-routing-action block w-full flex-grow"
669+
className="data-testid-select-routing-action block w-full grow"
670670
required
671671
value={RoutingPages.find((page) => page.value === route.action?.type)}
672672
onChange={(item) => {
@@ -695,7 +695,7 @@ const Route = ({
695695
required
696696
disabled={disabled}
697697
name="customPageMessage"
698-
className="border-default flex flex-grow lg:w-fit"
698+
className="border-default flex grow lg:w-fit"
699699
style={{
700700
minHeight: "38px",
701701
}}
@@ -708,8 +708,8 @@ const Route = ({
708708
<TextField
709709
disabled={disabled}
710710
name="externalRedirectUrl"
711-
className="border-default flex flex-grow text-sm"
712-
containerClassName="flex-grow"
711+
className="border-default flex grow text-sm"
712+
containerClassName="grow"
713713
type="url"
714714
required
715715
labelSrOnly
@@ -720,7 +720,7 @@ const Route = ({
720720
placeholder="https://example.com"
721721
/>
722722
) : (
723-
<div className="flex-grow">
723+
<div className="grow">
724724
<Select
725725
size="sm"
726726
required
@@ -758,8 +758,8 @@ const Route = ({
758758
<>
759759
<TextField
760760
disabled={disabled}
761-
className="border-default flex w-full flex-grow text-sm"
762-
containerClassName="flex-grow mt-2"
761+
className="border-default flex w-full grow text-sm"
762+
containerClassName="grow mt-2"
763763
addOnLeading={eventTypePrefix}
764764
required
765765
value={customEventTypeSlug}
@@ -796,12 +796,12 @@ const Route = ({
796796
</div>
797797
<span className="text-emphasis ml-2 text-sm font-medium">Send booker to</span>
798798
</div>
799-
<div className="bg-muted flex w-full flex-col gap-2 rounded-xl p-2 text-sm lg:flex-row">
800-
<div className="flex flex-grow items-center gap-2">
799+
<div className="bg-cal-muted flex w-full flex-col gap-2 rounded-xl p-2 text-sm lg:flex-row">
800+
<div className="flex grow items-center gap-2">
801801
<Select
802802
size="sm"
803803
isDisabled={disabled}
804-
className="data-testid-select-routing-action block w-full flex-grow"
804+
className="data-testid-select-routing-action block w-full grow"
805805
required
806806
value={RoutingPages.find((page) => page.value === route.action?.type)}
807807
onChange={(item) => {
@@ -830,7 +830,7 @@ const Route = ({
830830
required
831831
disabled={disabled}
832832
name="customPageMessage"
833-
className="border-default flex flex-grow lg:w-fit"
833+
className="border-default flex grow lg:w-fit"
834834
style={{
835835
minHeight: "38px",
836836
}}
@@ -844,8 +844,8 @@ const Route = ({
844844
size="sm"
845845
disabled={disabled}
846846
name="externalRedirectUrl"
847-
className="border-default flex flex-grow text-sm"
848-
containerClassName="flex-grow"
847+
className="border-default flex grow text-sm"
848+
containerClassName="grow"
849849
type="url"
850850
required
851851
labelSrOnly
@@ -856,7 +856,7 @@ const Route = ({
856856
placeholder="https://example.com"
857857
/>
858858
) : (
859-
<div className="flex-grow">
859+
<div className="grow">
860860
<Select
861861
size="sm"
862862
required
@@ -894,8 +894,8 @@ const Route = ({
894894
<>
895895
<TextField
896896
disabled={disabled}
897-
className="border-default flex w-full flex-grow text-sm"
898-
containerClassName="flex-grow mt-2"
897+
className="border-default flex w-full grow text-sm"
898+
containerClassName="grow mt-2"
899899
addOnLeading={eventTypePrefix}
900900
required
901901
value={customEventTypeSlug}

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -177,7 +177,7 @@ function RoutingForm({ form, profile, ...restProps }: Props) {
177177
<>
178178
<div className={classNames("mx-auto my-0 max-w-3xl", isEmbed ? "" : "md:my-24")}>
179179
<div className="w-full max-w-4xl ltr:mr-2 rtl:ml-2">
180-
<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 ">
180+
<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 ">
181181
<Toaster position="bottom-right" />
182182

183183
<form onSubmit={handleOnSubmit}>

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -160,7 +160,7 @@ export default function RoutingForms({ appUrl }: { appUrl: string }) {
160160
background="/tips/routing-forms"
161161
isParentLoading={<SkeletonLoaderTeamList />}
162162
buttons={
163-
<div className="space-y-2 rtl:space-x-reverse sm:space-x-2">
163+
<div className="stack-y-2 rtl:space-x-reverse sm:space-x-2">
164164
<ButtonGroup>
165165
<Button color="primary" href={`${WEBAPP_URL}/settings/teams/new`}>
166166
{t("upgrade")}
@@ -278,7 +278,7 @@ export default function RoutingForms({ appUrl }: { appUrl: string }) {
278278
action="edit"
279279
routingForm={form}
280280
color="minimal"
281-
className="!flex"
281+
className="flex!"
282282
StartIcon="pencil">
283283
{t("edit")}
284284
</FormAction>

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ export function AvailabilityScheduleSkeleton() {
2424
</div>
2525

2626
{/* Action buttons */}
27-
<div className="relative flex-shrink-0 md:relative md:bottom-auto md:right-auto">
27+
<div className="relative shrink-0 md:relative md:bottom-auto md:right-auto">
2828
{/* Desktop buttons - Set to Default, Delete, and Save */}
2929
<div className="flex items-center justify-end">
3030
{/* Set to Default - desktop only */}
@@ -99,14 +99,14 @@ export function AvailabilityScheduleSkeleton() {
9999
<SkeletonText className="ml-2 h-4 w-4 rounded-full" /> {/* Info icon */}
100100
</div>
101101
<SkeletonText className="mb-4 mt-1 h-4 w-full max-w-md text-sm" /> {/* Description */}
102-
<div className="space-y-2">
102+
<div className="stack-y-2">
103103
<SkeletonButton className="h-9 w-36 rounded-md" /> {/* Add an override button */}
104104
</div>
105105
</div>
106106
</div>
107107

108108
{/* Sidebar - only visible on desktop */}
109-
<div className="min-w-40 col-span-3 hidden space-y-2 md:block lg:col-span-1 xl:w-[25%]">
109+
<div className="min-w-40 col-span-3 hidden stack-y-2 md:block lg:col-span-1 xl:w-[25%]">
110110
<div className="xl:max-w-80 w-full pr-4 sm:ml-0 sm:mr-36 sm:p-0">
111111
<div>
112112
<SkeletonText className="mb-1 h-4 w-24 text-sm" /> {/* Timezone */}

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import { Icon } from "@calcom/ui/components/icon";
88
export default function TroubleshooterLayout({ children }: { children: React.ReactNode }) {
99
return (
1010
<>
11-
<div className="flex flex-1 [&>*]:flex-1">
11+
<div className="flex flex-1 *:flex-1">
1212
<ErrorBoundary>
1313
<Suspense fallback={<Icon name="loader" />}>{children}</Suspense>
1414
</ErrorBoundary>

0 commit comments

Comments
 (0)