From 2d19003e8ad0693a658df328b406312cc9f8d7ba Mon Sep 17 00:00:00 2001
From: Volnei Munhoz <volnei@cal.com>
Date: Wed, 7 Jan 2026 14:37:07 -0300
Subject: [PATCH] style: use Tailwind color tokens instead of hardcoded hex
 values (#26557)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Replace hardcoded hex colors with their exact Tailwind equivalents:
- text-[#111827] → text-gray-900
- text-[#6B7280] → text-gray-500
- text-[#374151] → text-gray-700
- border-[#D1D5DB] → border-gray-300

This improves consistency with the rest of the codebase which
already uses these tokens (e.g., text-gray-500 is used 107 times).

Files changed:
- apps/web/modules/videos/views/videos-single-view.tsx
- companion/app/(tabs)/(event-types)/index.tsx
- companion/components/booking-list-screen/BookingListScreen.tsx
- companion/components/event-type-detail/tabs/AdvancedTab.tsx
- companion/components/screens/AvailabilityListScreen.tsx
- companion/components/screens/BookingDetailScreen.android.tsx

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-authored-by: Dylan Tarre <timecreepsby@gmail.com>
Co-authored-by: Claude Opus 4.5 <noreply@anthropic.com>
Co-authored-by: Udit Takkar <53316345+Udit-takkar@users.noreply.github.com>
Co-authored-by: Peer Richelsen <peeroke@gmail.com>
Co-authored-by: Anik Dhabal Babu <81948346+anikdhabal@users.noreply.github.com>
Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
---
 .../modules/videos/views/videos-single-view.tsx  |  2 +-
 companion/app/(tabs)/(event-types)/index.tsx     | 16 ++++++++--------
 .../booking-list-screen/BookingListScreen.tsx    |  2 +-
 .../event-type-detail/tabs/AdvancedTab.tsx       |  4 ++--
 .../screens/AvailabilityListScreen.tsx           | 14 +++++++-------
 5 files changed, 19 insertions(+), 19 deletions(-)

diff --git a/apps/web/modules/videos/views/videos-single-view.tsx b/apps/web/modules/videos/views/videos-single-view.tsx
index c2d9793072..09d0dcbd91 100644
--- a/apps/web/modules/videos/views/videos-single-view.tsx
+++ b/apps/web/modules/videos/views/videos-single-view.tsx
@@ -522,7 +522,7 @@ export function LogInOverlay(props: LogInOverlayProps) {
               <h4 className="text-base font-semibold text-black dark:text-white">
                 {t("sign_in_to_cal_com")}
               </h4>
-              <p className="text-sm text-[#6B7280] dark:text-gray-300">
+              <p className="text-sm text-gray-500 dark:text-gray-300">
                 {t("track_meetings_and_manage_schedule")}
               </p>
             </div>
diff --git a/companion/app/(tabs)/(event-types)/index.tsx b/companion/app/(tabs)/(event-types)/index.tsx
index 9543eea293..d966287e7b 100644
--- a/companion/app/(tabs)/(event-types)/index.tsx
+++ b/companion/app/(tabs)/(event-types)/index.tsx
@@ -617,8 +617,8 @@ export default function EventTypes() {
             <View>
               <AlertDialogText className="mb-2 text-sm font-medium">Title</AlertDialogText>
               <TextInput
-                className={`rounded-md border bg-white px-3 py-2.5 text-base text-[#111827] ${
-                  titleError ? "border-red-500" : "border-[#D1D5DB]"
+                className={`rounded-md border bg-white px-3 py-2.5 text-base text-gray-900 ${
+                  titleError ? "border-red-500" : "border-gray-300"
                 }`}
                 placeholder="Quick Chat"
                 placeholderTextColor="#9CA3AF"
@@ -668,10 +668,10 @@ export default function EventTypes() {
             >
               {/* Header */}
               <View className="px-8 pb-4 pt-6">
-                <Text className="mb-2 text-2xl font-semibold text-[#111827]">
+                <Text className="mb-2 text-2xl font-semibold text-gray-900">
                   Add a new event type
                 </Text>
-                <Text className="text-sm text-[#6B7280]">
+                <Text className="text-sm text-gray-500">
                   Set up event types to offer different types of meetings.
                 </Text>
               </View>
@@ -680,9 +680,9 @@ export default function EventTypes() {
               <View className="px-8 pb-6">
                 {/* Title */}
                 <View className="mb-4">
-                  <Text className="mb-2 text-sm font-medium text-[#374151]">Title</Text>
+                  <Text className="mb-2 text-sm font-medium text-gray-700">Title</Text>
                   <TextInput
-                    className="rounded-md border border-[#D1D5DB] bg-white px-3 py-2.5 text-base text-[#111827] focus:border-black focus:ring-2 focus:ring-black"
+                    className="rounded-md border border-gray-300 bg-white px-3 py-2.5 text-base text-gray-900 focus:border-black focus:ring-2 focus:ring-black"
                     placeholder="Quick Chat"
                     placeholderTextColor="#9CA3AF"
                     value={newEventTitle}
@@ -699,11 +699,11 @@ export default function EventTypes() {
               <View className="rounded-b-2xl border-t border-[#E5E7EB] bg-[#F9FAFB] px-8 py-4">
                 <View className="flex-row justify-end gap-2 space-x-2">
                   <TouchableOpacity
-                    className="rounded-xl border border-[#D1D5DB] bg-white px-4 py-2"
+                    className="rounded-xl border border-gray-300 bg-white px-4 py-2"
                     onPress={handleCloseCreateModal}
                     disabled={creating}
                   >
-                    <Text className="text-base font-medium text-[#374151]">Close</Text>
+                    <Text className="text-base font-medium text-gray-700">Close</Text>
                   </TouchableOpacity>
                   <TouchableOpacity
                     className={`rounded-xl bg-[#111827] px-4 py-2 ${creating ? "opacity-60" : ""}`}
diff --git a/companion/components/booking-list-screen/BookingListScreen.tsx b/companion/components/booking-list-screen/BookingListScreen.tsx
index eb84318110..f3713280ec 100644
--- a/companion/components/booking-list-screen/BookingListScreen.tsx
+++ b/companion/components/booking-list-screen/BookingListScreen.tsx
@@ -791,7 +791,7 @@ export const BookingListScreen: React.FC<BookingListScreenProps> = ({
             <View>
               <UIText className="mb-2 text-sm font-medium">Reason for cancellation</UIText>
               <TextInput
-                className="rounded-md border border-[#D1D5DB] bg-white px-3 py-2.5 text-base text-[#111827]"
+                className="rounded-md border border-gray-300 bg-white px-3 py-2.5 text-base text-gray-900"
                 placeholder="Why are you cancelling?"
                 placeholderTextColor="#9CA3AF"
                 value={cancelReason}
diff --git a/companion/components/event-type-detail/tabs/AdvancedTab.tsx b/companion/components/event-type-detail/tabs/AdvancedTab.tsx
index 6170428589..d0918484f9 100644
--- a/companion/components/event-type-detail/tabs/AdvancedTab.tsx
+++ b/companion/components/event-type-detail/tabs/AdvancedTab.tsx
@@ -320,7 +320,7 @@ export function AdvancedTab(props: AdvancedTabProps) {
                 className={`mr-3 h-5 w-5 items-center justify-center rounded border ${
                   props.showAttendeeInfo
                     ? "border-[#111827] bg-[#111827]"
-                    : "border-[#D1D5DB] bg-white"
+                    : "border-gray-300 bg-white"
                 }`}
               >
                 {props.showAttendeeInfo && <Ionicons name="checkmark" size={14} color="#fff" />}
@@ -338,7 +338,7 @@ export function AdvancedTab(props: AdvancedTabProps) {
                 className={`mr-3 h-5 w-5 items-center justify-center rounded border ${
                   props.showAvailabilityCount
                     ? "border-[#111827] bg-[#111827]"
-                    : "border-[#D1D5DB] bg-white"
+                    : "border-gray-300 bg-white"
                 }`}
               >
                 {props.showAvailabilityCount ? (
diff --git a/companion/components/screens/AvailabilityListScreen.tsx b/companion/components/screens/AvailabilityListScreen.tsx
index c975cf7273..f1a0a72c83 100644
--- a/companion/components/screens/AvailabilityListScreen.tsx
+++ b/companion/components/screens/AvailabilityListScreen.tsx
@@ -396,8 +396,8 @@ export function AvailabilityListScreen({
             <View>
               <AlertDialogText className="mb-2 text-sm font-medium">Name</AlertDialogText>
               <TextInput
-                className={`rounded-md border bg-white px-3 py-2.5 text-base text-[#111827] ${
-                  nameError ? "border-red-500" : "border-[#D1D5DB]"
+                className={`rounded-md border bg-white px-3 py-2.5 text-base text-gray-900 ${
+                  nameError ? "border-red-500" : "border-gray-300"
                 }`}
                 placeholder="Working Hours"
                 placeholderTextColor="#9CA3AF"
@@ -452,15 +452,15 @@ export function AvailabilityListScreen({
             >
               {/* Header */}
               <View className="px-8 pb-4 pt-6">
-                <Text className="text-2xl font-semibold text-[#111827]">Add a new schedule</Text>
+                <Text className="text-2xl font-semibold text-gray-900">Add a new schedule</Text>
               </View>
 
               {/* Content */}
               <View className="px-8 pb-6">
                 <View className="mb-1">
-                  <Text className="mb-2 text-sm font-medium text-[#374151]">Name</Text>
+                  <Text className="mb-2 text-sm font-medium text-gray-700">Name</Text>
                   <TextInput
-                    className="rounded-md border border-[#D1D5DB] bg-white px-3 py-2.5 text-base text-[#111827]"
+                    className="rounded-md border border-gray-300 bg-white px-3 py-2.5 text-base text-gray-900"
                     placeholder="Working Hours"
                     placeholderTextColor="#9CA3AF"
                     value={newScheduleName}
@@ -477,14 +477,14 @@ export function AvailabilityListScreen({
               <View className="rounded-b-2xl border-t border-[#E5E7EB] bg-[#F9FAFB] px-8 py-4">
                 <View className="flex-row justify-end gap-2 space-x-2">
                   <AppPressable
-                    className="rounded-xl border border-[#D1D5DB] bg-white px-2 py-2 md:px-4"
+                    className="rounded-xl border border-gray-300 bg-white px-2 py-2 md:px-4"
                     onPress={() => {
                       onShowCreateModalChange(false);
                       setNewScheduleName("");
                     }}
                     disabled={creating}
                   >
-                    <Text className="text-base font-medium text-[#374151]">Close</Text>
+                    <Text className="text-base font-medium text-gray-700">Close</Text>
                   </AppPressable>
                   <AppPressable
                     className={`rounded-xl bg-[#111827] px-2 py-2 md:px-4 ${