From d6546c3107a9665d91de6453a3e245b5931eb6ba Mon Sep 17 00:00:00 2001 From: Pasquale Vitiello Date: Tue, 25 Nov 2025 21:32:28 +0100 Subject: [PATCH] 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 Co-authored-by: Hariom Balhara Co-authored-by: Ryukemeister Co-authored-by: cal.com Co-authored-by: Eunjae Lee Co-authored-by: Anik Dhabal Babu --- .vscode/extensions.json | 1 - .vscode/settings.json | 2 +- .../(main-nav)/ShellMainAppDir.tsx | 2 +- .../routing-forms/[...pages]/FormEdit.tsx | 6 +- .../[...pages]/IncompleteBooking.tsx | 2 +- .../routing-forms/[...pages]/RouteBuilder.tsx | 40 +- .../routing-forms/[...pages]/RoutingLink.tsx | 2 +- .../forms/[[...pages]]/Forms.tsx | 4 +- .../availability/[schedule]/skeleton.tsx | 6 +- .../availability/troubleshoot/layout.tsx | 2 +- .../event-types/[type]/skeleton.tsx | 16 +- .../insights/UpgradeTipWrapper.tsx | 2 +- .../payment/[uid]/PaymentPage.tsx | 2 +- .../app/(use-page-wrapper)/refer/loading.tsx | 2 +- .../AdminLayoutAppDirClient.tsx | 2 +- .../playground/bookings-by-hour/page.tsx | 2 +- .../admin/playground/routing-funnel/page.tsx | 2 +- .../admin/playground/weekly-calendar/page.tsx | 6 +- .../SettingsLayoutAppDirClient.tsx | 34 +- .../_components/AdvancedPermissionGroup.tsx | 2 +- .../roles/_components/PbacOptInModal.tsx | 2 +- .../roles/_components/RoleColorPicker.tsx | 2 +- .../roles/_components/RoleSheet.tsx | 6 +- .../roles/_components/RolesList.tsx | 2 +- .../roles/_components/RolesSkeletonLoader.tsx | 2 +- .../(org-user-only)/members/layout.tsx | 2 +- apps/web/app/icons/page.tsx | 2 +- apps/web/app/layout.tsx | 30 +- apps/web/app/notFoundClient.tsx | 10 +- apps/web/components/AddToHomescreen.tsx | 4 +- apps/web/components/EnterprisePage.tsx | 2 +- apps/web/components/PageWrapper.tsx | 4 +- apps/web/components/apps/AppPage.tsx | 2 +- .../components/apps/applecalendar/Setup.tsx | 6 +- .../components/apps/btcpayserver/Setup.tsx | 8 +- .../components/apps/caldavcalendar/Setup.tsx | 6 +- .../apps/exchange2013calendar/Setup.tsx | 2 +- .../apps/exchange2016calendar/Setup.tsx | 2 +- .../apps/exchangecalendar/Setup.tsx | 4 +- apps/web/components/apps/hitpay/Setup.tsx | 8 +- .../apps/ics-feedcalendar/Setup.tsx | 6 +- .../apps/installation/AccountsStepCard.tsx | 4 +- .../apps/installation/ConfigureStepCard.tsx | 2 +- .../apps/installation/EventTypesStepCard.tsx | 8 +- .../apps/routing-forms/FormActions.tsx | 15 +- .../routing-forms/FormSettingsSlideover.tsx | 2 +- .../components/apps/routing-forms/Header.tsx | 2 +- .../apps/routing-forms/SingleForm.tsx | 2 +- .../apps/routing-forms/TestForm.tsx | 2 +- apps/web/components/apps/sendgrid/Setup.tsx | 8 +- .../apps/wipemycalother/confirmDialog.tsx | 2 +- apps/web/components/auth/BackupCode.tsx | 2 +- apps/web/components/auth/TwoFactor.tsx | 4 +- .../components/booking/BookingListItem.tsx | 6 +- .../web/components/booking/SkeletonLoader.tsx | 8 +- .../actions/BookingActionsDropdown.tsx | 2 +- .../web/components/dialog/AddGuestsDialog.tsx | 4 +- .../components/dialog/ChargeCardDialog.tsx | 2 +- .../components/dialog/EditLocationDialog.tsx | 2 +- apps/web/components/dialog/ReassignDialog.tsx | 2 +- apps/web/components/dialog/RerouteDialog.tsx | 10 +- .../components/dialog/RescheduleDialog.tsx | 2 +- apps/web/components/error/error-page.tsx | 2 +- .../components/ConnectedCalendarItem.tsx | 4 +- .../steps-views/ConnectedVideoStep.tsx | 2 +- .../steps-views/SetupAvailability.tsx | 2 +- .../steps-views/UserSettings.tsx | 2 +- .../security/TwoFactorModalHeader.tsx | 2 +- .../settings/CustomEmailTextField.tsx | 6 +- .../oauth-clients/oauth-client-form/index.tsx | 8 +- .../platform/pricing/billing-card/index.tsx | 4 +- .../pricing/platform-pricing/index.tsx | 2 +- apps/web/components/setup/AdminUser.tsx | 4 +- apps/web/components/setup/ChooseLicense.tsx | 6 +- .../components/setup/EnterpriseLicense.tsx | 2 +- .../web/components/setup/LicenseSelection.tsx | 10 +- apps/web/components/setup/StepDone.tsx | 2 +- apps/web/components/team/screens/Team.tsx | 8 +- apps/web/components/ui/AuthContainer.tsx | 4 +- apps/web/components/ui/ModalContainer.tsx | 2 +- .../components/ui/SettingInputContainer.tsx | 4 +- .../UsernameAvailability/PremiumTextfield.tsx | 4 +- apps/web/modules/apps/apps-view.tsx | 2 +- .../installation/[[...step]]/step-view.tsx | 2 +- .../[id]/forgot-password-single-view.tsx | 6 +- .../forgot-password/forgot-password-view.tsx | 8 +- apps/web/modules/auth/login-view.tsx | 14 +- apps/web/modules/auth/logout-view.tsx | 2 +- .../modules/auth/oauth2/authorize-view.tsx | 2 +- .../modules/auth/platform/authorize-view.tsx | 4 +- apps/web/modules/auth/setup-view.tsx | 4 +- apps/web/modules/auth/signin-view.tsx | 2 +- apps/web/modules/auth/verify-email-view.tsx | 2 +- apps/web/modules/auth/verify-view.tsx | 6 +- .../components/BookingDetailsSheet.tsx | 14 +- .../views/booking-dry-run-success-view.tsx | 2 +- .../bookings/views/bookings-single-view.tsx | 18 +- .../views/event-types-listing-view.tsx | 8 +- .../[[...step]]/onboarding-view.tsx | 2 +- .../insights/insights-routing-view.tsx | 2 +- apps/web/modules/insights/insights-view.tsx | 2 +- apps/web/modules/more/more-page-view.tsx | 2 +- .../modules/settings/billing/billing-view.tsx | 4 +- .../billing/components/BillingCredits.tsx | 2 +- .../components/BillingCreditsSkeleton.tsx | 2 +- .../settings/developer/api-keys-skeleton.tsx | 2 +- .../my-account/appearance-skeleton.tsx | 4 +- .../settings/my-account/general-skeleton.tsx | 2 +- .../settings/my-account/general-view.tsx | 2 +- .../settings/my-account/profile-skeleton.tsx | 2 +- .../settings/my-account/profile-view.tsx | 4 +- .../new/_components/AddNewTeamsForm.tsx | 12 +- .../new/_components/OnboardMembersView.tsx | 6 +- .../new/_components/PaymentStatusView.tsx | 4 +- .../organizations/new/resume-view.tsx | 4 +- .../blocklist-entry-details-sheet.tsx | 8 +- .../booking-report-entry-details-modal.tsx | 4 +- .../create-blocklist-entry-modal.tsx | 2 +- .../platform/billing/billing-view.tsx | 2 +- .../settings/security/impersonation-view.tsx | 2 +- .../settings/security/password-view.tsx | 4 +- .../security/two-factor-auth-view.tsx | 2 +- apps/web/modules/signup-view.tsx | 12 +- apps/web/modules/team/team-view.tsx | 20 +- apps/web/modules/upgrade/upgrade-view.tsx | 2 +- .../modules/users/views/users-public-view.tsx | 5 +- .../videos/views/videos-single-view.tsx | 6 +- apps/web/package.json | 6 +- apps/web/postcss.config.js | 11 - apps/web/postcss.config.mjs | 5 + apps/web/styles/globals.css | 306 +- apps/web/tailwind.config.js | 7 - docs/platform/atoms/booker.mdx | 16 +- docs/platform/atoms/create-schedule.mdx | 2 +- docs/platform/atoms/event-type.mdx | 2 +- packages/app-store/AppDependencyComponent.tsx | 2 +- .../btcpayserver/components/KeyInput.tsx | 4 +- .../giphy/components/SearchDialog.tsx | 6 +- .../giphy/components/SelectGifInput.tsx | 2 +- .../app-store/hitpay/components/KeyInput.tsx | 4 +- .../components/EventTypeAppCardInterface.tsx | 2 +- .../EventTypeAppSettingsInterface.tsx | 2 +- .../components/FormInputFields.tsx | 2 +- .../components/_components/EmptyState.tsx | 2 +- .../components/_components/ResultSection.tsx | 14 +- .../_components/RoutingSkeleton.tsx | 6 +- .../_components/TeamMemberSelect.tsx | 2 +- .../_components/TeamMembersMatchResult.tsx | 2 +- .../react-awesome-query-builder/widgets.tsx | 2 +- .../EventTypeAppSettingsInterface.tsx | 2 +- .../components/AppSettingsInterface.tsx | 2 +- .../components/EventTypeAppCardInterface.tsx | 2 +- .../components/AppSettingsInterface.tsx | 2 +- packages/config/package.json | 11 +- packages/config/tailwind-preset.js | 348 - packages/config/theme/colors.css | 85 - packages/config/theme/shared-sources.css | 8 + packages/config/theme/tokens.css | 472 + packages/coss-ui/components.json | 19 + packages/coss-ui/components/button.tsx | 67 + packages/coss-ui/components/input.tsx | 41 + packages/coss-ui/lib/utils.ts | 6 + packages/coss-ui/package.json | 16 + packages/coss-ui/styles.css | 156 + packages/emails/tailwind.config.js | 143 - packages/embeds/embed-core/index.html | 710 +- packages/embeds/embed-core/package.json | 13 +- .../embed-core/playground/lib/playground.ts | 57 + packages/embeds/embed-core/postcss.config.mjs | 6 + .../embeds/embed-core/routing-playground.html | 2 +- .../embed-core/src/EmbedElement.test.ts | 2 +- .../embeds/embed-core/src/EmbedElement.ts | 4 +- .../src/FloatingButton/FloatingButtonHtml.ts | 2 +- .../embeds/embed-core/src/Inline/inline.ts | 2 +- .../embed-core/src/Inline/inlineHtml.ts | 7 +- .../embed-core/src/ModalBox/ModalBox.ts | 7 +- .../embed-core/src/ModalBox/ModalBoxHtml.ts | 13 +- .../embeds/embed-core/src/addAppCssVars.ts | 260 - .../embeds/embed-core/src/embed-iframe.ts | 28 +- packages/embeds/embed-core/src/embed.ts | 29 +- packages/embeds/embed-core/src/styles.css | 17 +- .../embeds/embed-core/src/ui/cssVarsMap.ts | 61 + packages/embeds/embed-core/src/ui/skeleton.ts | 18 +- .../embeds/embed-core/src/ui/themeClass.ts | 8 + packages/embeds/embed-core/tailwind.config.js | 17 - packages/features/Segment.tsx | 6 +- packages/features/apps/AdminAppsList.tsx | 4 +- packages/features/apps/components/AllApps.tsx | 8 +- packages/features/apps/components/AppCard.tsx | 4 +- .../features/apps/components/Categories.tsx | 2 +- .../apps/components/SkeletonLoader.tsx | 6 +- .../components/SkeletonLoader.tsx | 2 +- packages/features/bookings/Booker/Booker.tsx | 14 +- .../Booker/components/AvailableTimeSlots.tsx | 4 +- .../components/DecoyBookingSuccessCard.tsx | 4 +- .../bookings/Booker/components/EventMeta.tsx | 10 +- .../bookings/Booker/components/Header.tsx | 2 +- .../Booker/components/OutOfOfficeInSlots.tsx | 2 +- .../OverlayCalendarSettingsModal.tsx | 6 +- .../Booker/components/Unavailable.tsx | 2 +- .../bookings/components/AvailableTimes.tsx | 4 +- .../components/AvailableTimesHeader.tsx | 2 +- .../components/BookingSuccessCard.tsx | 4 +- .../bookings/components/VerifyCodeDialog.tsx | 2 +- .../event-meta/AvailableEventLocations.tsx | 4 +- .../components/event-meta/Details.tsx | 12 +- .../components/event-meta/Duration.tsx | 4 +- .../components/event-meta/Locations.tsx | 4 +- packages/features/calendars/DatePicker.tsx | 2 +- .../weeklyview/components/Calendar.tsx | 4 +- .../components/DateValues/index.tsx | 2 +- .../weeklyview/components/event/Empty.tsx | 10 +- .../weeklyview/components/event/Event.tsx | 4 +- .../components/horizontalLines/index.tsx | 4 +- .../weeklyview/components/spinner/Spinner.tsx | 2 +- .../components/verticalLines/index.tsx | 2 +- .../timezone-select/TimezoneSelect.tsx | 2 +- .../data-table/components/DataTable.tsx | 18 +- .../components/filters/AddFilterButton.tsx | 2 +- .../filters/BaseSelectFilterOptions.tsx | 4 +- .../components/filters/DateRangeFilter.tsx | 2 +- .../segment/DuplicateSegmentDialog.tsx | 2 +- .../segment/RenameSegmentDialog.tsx | 2 +- .../segment/SaveFilterSegmentButton.tsx | 4 +- .../api-keys/components/ApiKeyDialogForm.tsx | 2 +- .../ee/components/CommonSkeletonLoaders.tsx | 2 +- .../licensekey/CreateLicenseKeyForm.tsx | 6 +- .../ee/dsync/components/CreateDirectory.tsx | 4 +- .../ee/dsync/components/DirectoryInfo.tsx | 2 +- .../ee/dsync/components/GroupNameCell.tsx | 2 +- .../components/AboutOrganizationForm.tsx | 2 +- .../components/AdminOnboardingHandover.tsx | 4 +- .../components/CreateANewOrganizationForm.tsx | 4 +- .../components/TeamInviteFromOrg.tsx | 4 +- .../WelcomeToOrganizationsModal.tsx | 8 +- .../pages/components/OtherTeamListItem.tsx | 4 +- .../pages/settings/admin-api.tsx | 2 +- .../pages/settings/admin/AdminOrgEditPage.tsx | 2 +- .../pages/settings/admin/AdminOrgPage.tsx | 2 +- .../settings/admin/WorkspacePlatformPage.tsx | 6 +- .../settings/attributes/AttributesForm.tsx | 6 +- .../attributes/attributes-create-view.tsx | 2 +- .../attributes/attributes-edit-view.tsx | 2 +- .../pages/settings/delegationCredential.tsx | 8 +- .../organizations/pages/settings/general.tsx | 2 +- .../settings/other-team-profile-view.tsx | 5 +- .../organizations/pages/settings/privacy.tsx | 2 +- .../organizations/pages/settings/profile.tsx | 6 +- .../ee/payments/components/Payment.tsx | 2 +- .../components/CreateANewPlatformForm.tsx | 2 +- .../ee/sso/components/ConnectionInfo.tsx | 4 +- .../ee/sso/components/OIDCConnection.tsx | 4 +- .../ee/sso/components/SAMLConnection.tsx | 2 +- .../ee/sso/components/SSOConfiguration.tsx | 6 +- .../ee/support/components/ContactMenuItem.tsx | 2 +- .../components/IntercomContactForm.tsx | 6 +- .../ee/teams/components/EditMemberSheet.tsx | 6 +- .../components/InternalNotePresetsView.tsx | 8 +- .../components/MemberChangeRoleModal.tsx | 2 +- .../components/MemberInvitationModal.tsx | 6 +- .../ee/teams/components/MemberList.tsx | 6 +- .../components/SkeletonloaderTeamList.tsx | 2 +- .../components/TeamAvailabilityTimes.tsx | 4 +- .../ee/teams/components/TeamEventTypeForm.tsx | 2 +- .../ee/teams/components/TeamListItem.tsx | 8 +- .../features/ee/teams/components/TeamPill.tsx | 2 +- .../ee/teams/components/TeamsListing.tsx | 2 +- .../ee/teams/pages/team-profile-view.tsx | 6 +- .../features/ee/users/components/UserForm.tsx | 2 +- .../ee/video/MeetingSessionDetailsDialog.tsx | 4 +- .../workflows/components/AddActionDialog.tsx | 4 +- .../workflows/components/CallDetailsSheet.tsx | 18 +- .../ee/workflows/components/EmptyScreen.tsx | 4 +- .../SkeletonLoaderEventWorkflowsTab.tsx | 6 +- .../components/SkeletonLoaderList.tsx | 6 +- .../ee/workflows/components/WebCallDialog.tsx | 2 +- .../components/WorkflowCreationDialog.tsx | 2 +- .../components/WorkflowDetailsPage.tsx | 8 +- .../workflows/components/WorkflowListPage.tsx | 10 +- .../components/WorkflowStepContainer.tsx | 38 +- .../components/dialogs/ImportNumberDialog.tsx | 8 +- .../components/forms/AgentConfigForm.tsx | 8 +- .../components/tabs/IncomingCallsTab.tsx | 14 +- .../components/tabs/PhoneNumberTab.tsx | 8 +- .../features/ee/workflows/pages/index.tsx | 4 +- .../features/ee/workflows/pages/workflow.tsx | 2 +- packages/features/embed/Embed.tsx | 18 +- .../BulkEditDefaultForEventsModal.tsx | 4 +- .../components/CreateEventTypeForm.tsx | 2 +- .../eventtypes/components/DuplicateDialog.tsx | 2 +- .../EditWeightsForAllTeamMembers.tsx | 10 +- .../components/EventTypeDescription.tsx | 2 +- .../eventtypes/components/EventTypeLayout.tsx | 2 +- .../MultiplePrivateLinksController.tsx | 4 +- .../eventtypes/components/SkeletonLoader.tsx | 4 +- .../components/locations/CalVideoSettings.tsx | 10 +- .../locations/LocationSettingsContainer.tsx | 2 +- .../components/locations/Locations.tsx | 6 +- .../tabs/advanced/CustomEventTypeModal.tsx | 18 +- .../tabs/advanced/EventAdvancedTab.tsx | 20 +- .../RequiresConfirmationController.tsx | 4 +- .../components/tabs/ai/AIEventController.tsx | 4 +- .../components/tabs/apps/EventAppsTab.tsx | 2 +- .../assignment/EventTeamAssignmentTab.tsx | 12 +- .../availability/EventAvailabilityTab.tsx | 24 +- .../tabs/instant/InstantEventController.tsx | 2 +- .../components/tabs/limits/EventLimitsTab.tsx | 14 +- .../components/tabs/setup/EventSetupTab.tsx | 10 +- .../tabs/webhooks/EventWebhooksTab.tsx | 2 +- .../tabs/workflows/EventWorkfowsTab.tsx | 2 +- .../filters/components/TeamsFilter.tsx | 4 +- .../flags/components/AssignFeatureSheet.tsx | 8 +- .../flags/components/FlagAdminList.tsx | 2 +- .../flags/pages/flag-listing-view.tsx | 2 +- packages/features/form-builder/Components.tsx | 4 +- .../features/form-builder/FormBuilder.tsx | 14 +- .../form-builder/FormBuilderField.tsx | 2 +- .../form/components/CheckboxField.tsx | 4 +- .../insights/components/BookedByCell.tsx | 2 +- .../insights/components/CellWithOverflowX.tsx | 2 +- .../insights/components/ChartCard.tsx | 2 +- .../components/booking/BookingKPICards.tsx | 4 +- .../booking/RecentNoShowGuestsChart.tsx | 2 +- .../insights/filters/DateTargetSelector.tsx | 2 +- packages/features/kbar/Kbar.tsx | 8 +- .../components/DateOverrideInputDialog.tsx | 2 +- .../schedules/components/Schedule.tsx | 4 +- .../schedules/components/ScheduleListItem.tsx | 4 +- .../settings/BookerLayoutSelector.tsx | 4 +- .../settings/SectionBottomActions.tsx | 2 +- .../settings/appDir/SettingsHeader.tsx | 2 +- .../CreateOrEditOutOfOfficeModal.tsx | 2 +- .../outOfOffice/OutOfOfficeEntriesList.tsx | 6 +- packages/features/shell/Shell.tsx | 2 +- packages/features/shell/SideBar.tsx | 10 +- packages/features/shell/TopNav.tsx | 6 +- .../shell/components/WelcomeToCalcomModal.tsx | 2 +- .../features/shell/navigation/Navigation.tsx | 2 +- .../shell/navigation/NavigationItem.tsx | 20 +- .../shell/user-dropdown/ProfileDropdown.tsx | 6 +- .../shell/user-dropdown/UserDropdown.tsx | 10 +- packages/features/tailwind.config.js | 6 - .../components/AvailabilityEditSheet.tsx | 6 +- .../components/AvailabilitySliderTable.tsx | 4 +- .../timezone-buddy/components/TimeDial.tsx | 2 +- packages/features/tips/UpgradeTip.tsx | 2 +- .../troubleshooter/Troubleshooter.tsx | 4 +- .../AvailabilitySchedulesContainer.tsx | 2 +- .../components/CalendarToggleContainer.tsx | 2 +- .../components/ConnectedAppsContainer.tsx | 2 +- .../components/TroubleshooterHeader.tsx | 2 +- .../TroubleshooterListItemContainer.tsx | 2 +- .../UserTable/EditSheet/DisplayInfo.tsx | 4 +- .../UserTable/EditSheet/EditUserForm.tsx | 4 +- .../UserTable/EditSheet/EditUserSheet.tsx | 6 +- .../UserTable/PlatformManagedUsersTable.tsx | 2 +- .../components/UserTable/UserListTable.tsx | 4 +- .../components/UserTable/UserTableActions.tsx | 2 +- .../webhooks/components/WebhookForm.tsx | 8 +- .../components/WebhookTestDisclosure.tsx | 6 +- .../webhooks/pages/webhook-new-skeleton.tsx | 2 +- .../webhooks/pages/webhooks-skeleton.tsx | 2 +- .../features/webhooks/pages/webhooks-view.tsx | 2 +- .../availability/AvailabilitySettings.tsx | 16 +- .../wrappers/CalendarViewPlatformWrapper.tsx | 4 +- .../atoms/connect/apple/AppleConnect.tsx | 4 +- .../ConferencingAppsViewPlatformWrapper.tsx | 2 +- .../ConferencingAppsViewWebWrapper.tsx | 2 +- .../DestinationCalendar.tsx | 2 +- .../event-types/payments/PaymentForm.tsx | 2 +- packages/platform/atoms/globals.css | 37712 +++++----------- packages/platform/atoms/package.json | 11 +- packages/platform/atoms/postcss.config.js | 9 +- ...lectedCalendarsSettingsPlatformWrapper.tsx | 14 +- .../SelectedCalendarsSettingsWebWrapper.tsx | 8 +- packages/platform/atoms/sources.css | 1 + .../atoms/src/components/ui/button.tsx | 2 +- .../atoms/src/components/ui/dialog.tsx | 4 +- .../atoms/src/components/ui/switch.tsx | 2 +- .../atoms/src/components/ui/toast.tsx | 4 +- packages/platform/atoms/styles.css | 3 + .../atoms/styles/react-phone-input2.css | 1 - packages/platform/atoms/tailwind.config.cjs | 79 - packages/platform/atoms/vite.config.ts | 5 +- packages/platform/examples/base/package.json | 4 +- .../platform/examples/base/postcss.config.js | 3 +- .../base/src/components/Navbar/index.tsx | 6 +- .../platform/examples/base/src/pages/_app.tsx | 8 +- .../src/pages/availability/[scheduleId].tsx | 17 +- .../examples/base/src/pages/booking.tsx | 12 +- .../examples/base/src/pages/event-types.tsx | 16 +- .../examples/base/src/pages/index.tsx | 12 +- .../examples/base/src/styles/globals.css | 4 +- .../platform/examples/base/tailwind.config.ts | 19 - packages/ui/components/address/fields.tsx | 4 +- packages/ui/components/alert/Alert.tsx | 10 +- .../components/app-list-card/AppListCard.tsx | 16 +- packages/ui/components/badge/Badge.tsx | 8 +- packages/ui/components/button/Button.tsx | 36 +- .../ui/components/buttonGroup/ButtonGroup.tsx | 2 +- packages/ui/components/card/Card.tsx | 2 +- packages/ui/components/card/FormCard.tsx | 2 +- packages/ui/components/card/PanelCard.tsx | 2 +- packages/ui/components/card/StepCard.tsx | 2 +- packages/ui/components/command/Command.tsx | 4 +- .../dialog/ConfirmationDialogContent.tsx | 2 +- packages/ui/components/dialog/Dialog.tsx | 20 +- packages/ui/components/dropdown/Dropdown.tsx | 6 +- packages/ui/components/editor/Editor.tsx | 4 +- .../editor/nodes/VariableNode.test.ts | 2 +- .../components/editor/nodes/VariableNode.ts | 2 +- .../editor/plugins/AddVariablesDropdown.tsx | 4 +- .../components/file-uploader/FileUploader.tsx | 8 +- .../ui/components/form/checkbox/Checkbox.tsx | 4 +- .../form/color-picker/colorpicker.tsx | 2 +- .../form/date-range-picker/Calendar.tsx | 8 +- .../date-range-picker/DateRangePicker.tsx | 23 +- packages/ui/components/form/inputs/Input.tsx | 4 +- .../form/inputs/InputFieldWithSelect.tsx | 2 +- .../form/inputs/MultiOptionInput.tsx | 10 +- .../ui/components/form/inputs/TextField.tsx | 4 +- packages/ui/components/form/select/Select.tsx | 15 +- .../ui/components/form/select/components.tsx | 2 +- .../ui/components/form/slider/RangeSlider.tsx | 6 +- .../form/slider/RangeSliderPopover.tsx | 2 +- packages/ui/components/form/slider/index.tsx | 6 +- packages/ui/components/form/step/Steps.tsx | 2 +- .../components/form/switch/SettingsToggle.tsx | 2 +- .../image-uploader/BannerUploader.tsx | 8 +- .../image-uploader/ImageUploader.tsx | 4 +- .../ui/components/layout/ShellSubHeading.tsx | 2 +- packages/ui/components/list/List.tsx | 6 +- .../components/navigation/NavigationItem.tsx | 6 +- .../navigation/tabs/HorizontalTabItem.tsx | 4 +- .../navigation/tabs/VerticalTabItem.tsx | 2 +- .../navigation/tabs/VerticalTabs.tsx | 2 +- .../organization-banner/OrgBanner.tsx | 2 +- .../popover/MeetingTimeInTimezones.tsx | 2 +- packages/ui/components/radio/Radio.tsx | 4 +- .../ui/components/radio/RadioAreaGroup.tsx | 4 +- packages/ui/components/section/section.tsx | 4 +- packages/ui/components/skeleton/Skeleton.tsx | 2 +- packages/ui/components/table/TableNew.tsx | 2 +- .../ui/components/toast/ProgressToast.tsx | 2 +- packages/ui/components/tooltip/Tooltip.tsx | 2 +- .../ui/components/top-banner/TopBanner.tsx | 2 +- yarn.lock | 847 +- 447 files changed, 14783 insertions(+), 28932 deletions(-) delete mode 100644 apps/web/postcss.config.js create mode 100644 apps/web/postcss.config.mjs delete mode 100644 apps/web/tailwind.config.js delete mode 100644 packages/config/tailwind-preset.js delete mode 100644 packages/config/theme/colors.css create mode 100644 packages/config/theme/shared-sources.css create mode 100644 packages/config/theme/tokens.css create mode 100644 packages/coss-ui/components.json create mode 100644 packages/coss-ui/components/button.tsx create mode 100644 packages/coss-ui/components/input.tsx create mode 100644 packages/coss-ui/lib/utils.ts create mode 100644 packages/coss-ui/package.json create mode 100644 packages/coss-ui/styles.css delete mode 100644 packages/emails/tailwind.config.js create mode 100644 packages/embeds/embed-core/postcss.config.mjs delete mode 100644 packages/embeds/embed-core/src/addAppCssVars.ts create mode 100644 packages/embeds/embed-core/src/ui/cssVarsMap.ts create mode 100644 packages/embeds/embed-core/src/ui/themeClass.ts delete mode 100644 packages/embeds/embed-core/tailwind.config.js delete mode 100644 packages/features/tailwind.config.js create mode 100644 packages/platform/atoms/sources.css create mode 100644 packages/platform/atoms/styles.css delete mode 100644 packages/platform/atoms/styles/react-phone-input2.css delete mode 100644 packages/platform/atoms/tailwind.config.cjs delete mode 100644 packages/platform/examples/base/tailwind.config.ts diff --git a/.vscode/extensions.json b/.vscode/extensions.json index 74cae7dd16..cf089b9f19 100644 --- a/.vscode/extensions.json +++ b/.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 diff --git a/.vscode/settings.json b/.vscode/settings.json index 43ae1c6a83..f1a8fd8ccd 100644 --- a/.vscode/settings.json +++ b/.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"] } diff --git a/apps/web/app/(use-page-wrapper)/(main-nav)/ShellMainAppDir.tsx b/apps/web/app/(use-page-wrapper)/(main-nav)/ShellMainAppDir.tsx index 80ec7dbca3..32cbe46cd5 100644 --- a/apps/web/app/(use-page-wrapper)/(main-nav)/ShellMainAppDir.tsx +++ b/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} diff --git a/apps/web/app/(use-page-wrapper)/apps/routing-forms/[...pages]/FormEdit.tsx b/apps/web/app/(use-page-wrapper)/apps/routing-forms/[...pages]/FormEdit.tsx index c193242b71..f273010764 100644 --- a/apps/web/app/(use-page-wrapper)/apps/routing-forms/[...pages]/FormEdit.tsx +++ b/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({ /> {["select", "multiselect"].includes(fieldType) ? ( -
+
{/* TODO: remake empty screen for V3 */} -
+
{/* Icon card - Top */}
diff --git a/apps/web/app/(use-page-wrapper)/apps/routing-forms/[...pages]/IncompleteBooking.tsx b/apps/web/app/(use-page-wrapper)/apps/routing-forms/[...pages]/IncompleteBooking.tsx index 8af8bfc8ea..11c3f15e23 100644 --- a/apps/web/app/(use-page-wrapper)/apps/routing-forms/[...pages]/IncompleteBooking.tsx +++ b/apps/web/app/(use-page-wrapper)/apps/routing-forms/[...pages]/IncompleteBooking.tsx @@ -122,7 +122,7 @@ function Page({ form }: { form: RoutingFormWithResponseCount }) { />
{salesforceActionEnabled ? ( -
+
{form.team && ( <>
diff --git a/apps/web/app/(use-page-wrapper)/apps/routing-forms/[...pages]/RouteBuilder.tsx b/apps/web/app/(use-page-wrapper)/apps/routing-forms/[...pages]/RouteBuilder.tsx index d1cbfdc813..cbcee2e923 100644 --- a/apps/web/app/(use-page-wrapper)/apps/routing-forms/[...pages]/RouteBuilder.tsx +++ b/apps/web/app/(use-page-wrapper)/apps/routing-forms/[...pages]/RouteBuilder.tsx @@ -307,7 +307,7 @@ const WeightedAttributesSelector = ({ }} />
-
+
{attributeIdForWeights ? (
{formFieldsQueryBuilder}
{route.isFallback ? (
-
- {/*
+
+ {/*
{t("send_booker_to")}
*/} Send booker to
-
-
+
+
-
+
diff --git a/apps/web/app/(use-page-wrapper)/apps/routing-forms/forms/[[...pages]]/Forms.tsx b/apps/web/app/(use-page-wrapper)/apps/routing-forms/forms/[[...pages]]/Forms.tsx index 08f949f681..b08a18f8ae 100644 --- a/apps/web/app/(use-page-wrapper)/apps/routing-forms/forms/[[...pages]]/Forms.tsx +++ b/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={} buttons={ -
+
{/* Action buttons */} -
+
{/* Desktop buttons - Set to Default, Delete, and Save */}
{/* Set to Default - desktop only */} @@ -99,14 +99,14 @@ export function AvailabilityScheduleSkeleton() { {/* Info icon */}
{/* Description */} -
+
{/* Add an override button */}
{/* Sidebar - only visible on desktop */} -
+
{/* Timezone */} diff --git a/apps/web/app/(use-page-wrapper)/availability/troubleshoot/layout.tsx b/apps/web/app/(use-page-wrapper)/availability/troubleshoot/layout.tsx index 84d2e2c794..f7231895f5 100644 --- a/apps/web/app/(use-page-wrapper)/availability/troubleshoot/layout.tsx +++ b/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 ( <> -
+
}>{children} diff --git a/apps/web/app/(use-page-wrapper)/event-types/[type]/skeleton.tsx b/apps/web/app/(use-page-wrapper)/event-types/[type]/skeleton.tsx index 2f95b6ac84..57e7f4304f 100644 --- a/apps/web/app/(use-page-wrapper)/event-types/[type]/skeleton.tsx +++ b/apps/web/app/(use-page-wrapper)/event-types/[type]/skeleton.tsx @@ -32,8 +32,8 @@ export const EventTypeEditPageSkeleton = () => { } afterHeading={backButtonSkeleton}>
-
-
+
+
{/* Tab navigation items */} {Array.from({ length: 8 }).map((_, index) => (
{
-
+
{/* Form fields */} -
+
-
+
@@ -73,12 +73,12 @@ export const EventTypeEditPageSkeleton = () => {
-
+
-
+
@@ -86,7 +86,7 @@ export const EventTypeEditPageSkeleton = () => {
-
+
diff --git a/apps/web/app/(use-page-wrapper)/insights/UpgradeTipWrapper.tsx b/apps/web/app/(use-page-wrapper)/insights/UpgradeTipWrapper.tsx index b592580992..dec69eb3c0 100644 --- a/apps/web/app/(use-page-wrapper)/insights/UpgradeTipWrapper.tsx +++ b/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={ -
+
<> @@ -812,7 +812,7 @@ const MobileSettingsContainer = (props: { onSideContainerOpen?: () => void }) => return ( <> -