maronato/cal
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix border + ring colors

This commit is contained in:
sean-brydon 2023-03-13 11:05:16 +08:00
parent 6b0451fb4e
commit eb230cd1af
64 changed files with 112 additions and 112 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
apps/web/components/Embed.tsx
View File

@ -641,7 +641,7 @@ const ChooseEmbedTypesDialogContent = () => {
<div className="flex items-start"> <div className="flex items-start">
{embeds.map((embed, index) => ( {embeds.map((embed, index) => (
<button <button
className="hover:bg-subtle w-1/3 border border-transparent p-3 text-left hover:rounded-md hover:border-gray-200 ltr:mr-2 rtl:ml-2" className="hover:bg-subtle w-1/3 border border-transparent p-3 text-left hover:rounded-md hover:border-subtle ltr:mr-2 rtl:ml-2"
key={index} key={index}
data-testid={embed.type} data-testid={embed.type}
onClick={() => { onClick={() => {

2
apps/web/components/ImageUploader.tsx
View File

@ -144,7 +144,7 @@ export default function ImageUploader({
</div> </div>
)} )}
{result && <CropContainer imageSrc={result as string} onCropComplete={setCroppedAreaPixels} />} {result && <CropContainer imageSrc={result as string} onCropComplete={setCroppedAreaPixels} />}
<label className="border-default bg-default hover:bg-mutedover:text-emphasis dark:hover:bg-inverted text-default dark:text-inverted mt-8 rounded-sm border px-3 py-1 text-xs font-medium leading-4 focus:outline-none focus:ring-2 focus:ring-gray-900 focus:ring-offset-1 dark:border-gray-800 dark:bg-transparent"> <label className="border-default bg-default hover:bg-mutedover:text-emphasis dark:hover:bg-inverted text-default dark:text-inverted mt-8 rounded-sm border px-3 py-1 text-xs font-medium leading-4 focus:outline-none focus:ring-2 focus:ring-empthasis focus:ring-offset-1 dark:border-gray-800 dark:bg-transparent">
<input <input
onInput={onInputFile} onInput={onInputFile}
type="file" type="file"

6
apps/web/components/apps/CalendarListContainer.tsx
View File

@ -181,7 +181,7 @@ function ConnectedCalendarsList(props: Props) {
/> />
</div> </div>
}> }>
<div className="border-t border-gray-200"> <div className="border-t border-subtle">
{!fromOnboarding && ( {!fromOnboarding && (
<> <>
<p className="text-subtle px-5 pt-4 text-sm">{t("toggle_calendars_conflict")}</p> <p className="text-subtle px-5 pt-4 text-sm">{t("toggle_calendars_conflict")}</p>
@ -279,9 +279,9 @@ export function CalendarListContainer(props: { heading?: boolean; fromOnboarding
</div> </div>
} }
/> />
<div className="bg-muted flex justify-between rounded-md border border-gray-200 p-4"> <div className="bg-muted flex justify-between rounded-md border border-subtle p-4">
<div className="flex w-full flex-col items-start gap-4 md:flex-row md:items-center"> <div className="flex w-full flex-col items-start gap-4 md:flex-row md:items-center">
<div className="bg-default relative rounded-md border border-gray-200 p-1.5"> <div className="bg-default relative rounded-md border border-subtle p-1.5">
<FiCalendar className="h-8 w-8" strokeWidth="1" /> <FiCalendar className="h-8 w-8" strokeWidth="1" />
<FiPlus <FiPlus
className="text-emphasis absolute left-4 top-1/2 ml-0.5 mt-[1px] h-2 w-2" className="text-emphasis absolute left-4 top-1/2 ml-0.5 mt-[1px] h-2 w-2"

4
apps/web/components/availability/SkeletonLoader.tsx
View File

@ -7,7 +7,7 @@ import classNames from "@lib/classNames";
function SkeletonLoader() { function SkeletonLoader() {
return ( return (
<ul className="animate-pulse divide-y divide-gray-200 rounded-md border border-gray-200 bg-default sm:mx-0 sm:overflow-hidden"> <ul className="animate-pulse divide-y divide-gray-200 rounded-md border border-subtle bg-default sm:mx-0 sm:overflow-hidden">
<SkeletonItem /> <SkeletonItem />
<SkeletonItem /> <SkeletonItem />
<SkeletonItem /> <SkeletonItem />
@ -43,7 +43,7 @@ export const SelectSkeletonLoader = ({ className }: { className?: string }) => {
return ( return (
<li <li
className={classNames( className={classNames(
"group flex w-full items-center justify-between rounded-sm border border-gray-200 px-[10px] py-3", "group flex w-full items-center justify-between rounded-sm border border-subtle px-[10px] py-3",
className className
)}> )}>
<div className="flex-grow truncate text-sm"> <div className="flex-grow truncate text-sm">

2
apps/web/components/booking/SkeletonLoader.tsx
View File

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

2
apps/web/components/booking/SlotPicker.tsx
View File

@ -165,7 +165,7 @@ export const SlotPicker = ({
isLoading={isLoading} isLoading={isLoading}
className={classNames( className={classNames(
"mt-8 px-4 pb-4 sm:mt-0 md:min-w-[300px] md:px-5 lg:min-w-[455px]", "mt-8 px-4 pb-4 sm:mt-0 md:min-w-[300px] md:px-5 lg:min-w-[455px]",
selectedDate ? "sm:dark:border-darkgray-200 border-gray-200 sm:border-r sm:p-4 sm:pr-6" : "sm:p-4" selectedDate ? "sm:dark:border-darkgray-200 border-subtle sm:border-r sm:p-4 sm:pr-6" : "sm:p-4"
)} )}
includedDates={Object.keys(monthSlots).filter((k) => monthSlots[k].length > 0)} includedDates={Object.keys(monthSlots).filter((k) => monthSlots[k].length > 0)}
locale={isLocaleReady ? i18n.language : "en"} locale={isLocaleReady ? i18n.language : "en"}

4
apps/web/components/booking/pages/AvailabilityPage.tsx
View File

@ -167,7 +167,7 @@ const AvailabilityPage = ({ profile, eventType, ...restProps }: Props) => {
{showEventTypeDetails && ( {showEventTypeDetails && (
<div <div
className={classNames( className={classNames(
"sm:dark:border-darkgray-200 flex flex-col border-gray-200 p-5 sm:border-r", "sm:dark:border-darkgray-200 flex flex-col border-subtle p-5 sm:border-r",
"min-w-full md:w-[230px] md:min-w-[230px]", "min-w-full md:w-[230px] md:min-w-[230px]",
recurringEventCount && "xl:w-[380px] xl:min-w-[380px]" recurringEventCount && "xl:w-[380px] xl:min-w-[380px]"
)}> )}>
@ -183,7 +183,7 @@ const AvailabilityPage = ({ profile, eventType, ...restProps }: Props) => {
type="number" type="number"
min="1" min="1"
max={eventType.recurringEvent.count} max={eventType.recurringEvent.count}
className="w-15 dark:bg-darkgray-200 border-default bg-default h-7 rounded-sm text-sm font-medium [appearance:textfield] ltr:mr-2 rtl:ml-2 dark:border-gray-500" className="w-15 dark:bg-darkgray-200 border-default bg-default h-7 rounded-sm text-sm font-medium [appearance:textfield] ltr:mr-2 rtl:ml-2 dark:border-empthasis"
defaultValue={eventType.recurringEvent.count} defaultValue={eventType.recurringEvent.count}
onChange={(event) => { onChange={(event) => {
setRecurringEventCount(parseInt(event?.target.value)); setRecurringEventCount(parseInt(event?.target.value));

2
apps/web/components/error/error-page.tsx
View File

@ -30,7 +30,7 @@ const ErrorDebugPanel: React.FC<{ error: Props["error"]; children?: never }> = (
return ( return (
<div className="bg-default overflow-hidden shadow sm:rounded-lg"> <div className="bg-default overflow-hidden shadow sm:rounded-lg">
<div className="border-t border-gray-200 px-4 py-5 sm:p-0"> <div className="border-t border-subtle px-4 py-5 sm:p-0">
<dl className="sm:divide-y sm:divide-gray-200"> <dl className="sm:divide-y sm:divide-gray-200">
{debugMap.map(([key, value]) => { {debugMap.map(([key, value]) => {
if (value !== undefined) { if (value !== undefined) {

8
apps/web/components/eventtype/EventTypeSingleLayout.tsx
View File

@ -263,7 +263,7 @@ function EventTypeSingleLayout({
<Button className="lg:hidden" StartIcon={FiMoreHorizontal} variant="icon" color="secondary" /> <Button className="lg:hidden" StartIcon={FiMoreHorizontal} variant="icon" color="secondary" />
</DropdownMenuTrigger> </DropdownMenuTrigger>
<DropdownMenuContent style={{ minWidth: "200px" }}> <DropdownMenuContent style={{ minWidth: "200px" }}>
<DropdownMenuItem className="focus:ring-gray-100"> <DropdownMenuItem className="focus:ring-muted">
<DropdownItem <DropdownItem
target="_blank" target="_blank"
type="button" type="button"
@ -273,7 +273,7 @@ function EventTypeSingleLayout({
{t("preview")} {t("preview")}
</DropdownItem> </DropdownItem>
</DropdownMenuItem> </DropdownMenuItem>
<DropdownMenuItem className="focus:ring-gray-100"> <DropdownMenuItem className="focus:ring-muted">
<DropdownItem <DropdownItem
type="button" type="button"
StartIcon={FiLink} StartIcon={FiLink}
@ -284,7 +284,7 @@ function EventTypeSingleLayout({
{t("copy_link")} {t("copy_link")}
</DropdownItem> </DropdownItem>
</DropdownMenuItem> </DropdownMenuItem>
<DropdownMenuItem className="focus:ring-gray-100"> <DropdownMenuItem className="focus:ring-muted">
<DropdownItem <DropdownItem
type="button" type="button"
color="destructive" color="destructive"
@ -339,7 +339,7 @@ function EventTypeSingleLayout({
<div className="w-full ltr:mr-2 rtl:ml-2"> <div className="w-full ltr:mr-2 rtl:ml-2">
<div <div
className={classNames( className={classNames(
"bg-default mt-4 rounded-md border-gray-200 sm:mx-0 xl:mt-0", "bg-default mt-4 rounded-md border-subtle sm:mx-0 xl:mt-0",
disableBorder ? "border-0 " : "p-2 md:border md:p-6" disableBorder ? "border-0 " : "p-2 md:border md:p-6"
)}> )}>
{children} {children}

2
apps/web/components/eventtype/SkeletonLoader.tsx
View File

@ -11,7 +11,7 @@ function SkeletonLoader() {
<SkeletonText className="h-4 w-24" /> <SkeletonText className="h-4 w-24" />
</div> </div>
</div> </div>
<ul className="divide-y divide-gray-200 rounded-md border border-gray-200 bg-default sm:mx-0 sm:overflow-hidden"> <ul className="divide-y divide-gray-200 rounded-md border border-subtle bg-default sm:mx-0 sm:overflow-hidden">
<SkeletonItem /> <SkeletonItem />
<SkeletonItem /> <SkeletonItem />
<SkeletonItem /> <SkeletonItem />

4
apps/web/components/getting-started/components/ConnectedCalendarItem.tsx
View File

@ -44,11 +44,11 @@ const ConnectedCalendarItem = (prop: IConnectedCalendarItem) => {
{/* <Button {/* <Button
color="minimal" color="minimal"
type="button" type="button"
className="ml-auto flex rounded-md border border-gray-200 py-[10x] px-4 font-sans text-sm"> className="ml-auto flex rounded-md border border-subtle py-[10x] px-4 font-sans text-sm">
{t("edit")} {t("edit")}
</Button> */} </Button> */}
</div> </div>
<div className="h-[1px] w-full border-b border-gray-200" /> <div className="h-[1px] w-full border-b border-subtle" />
<div> <div>
<ul className="p-4"> <ul className="p-4">
{calendars?.map((calendar, i) => ( {calendars?.map((calendar, i) => (

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

@ -33,7 +33,7 @@ const ConnectedCalendars = (props: IConnectCalendarsProps) => {
firstCalendar.integration.title && firstCalendar.integration.title &&
firstCalendar.integration.imageSrc && ( firstCalendar.integration.imageSrc && (
<> <>
<List className="bg-default rounded-md border border-gray-200 p-0 dark:bg-black"> <List className="bg-default rounded-md border border-subtle p-0 dark:bg-black">
<ConnectedCalendarItem <ConnectedCalendarItem
key={firstCalendar.integration.title} key={firstCalendar.integration.title}
name={firstCalendar.integration.title} name={firstCalendar.integration.title}
@ -55,7 +55,7 @@ const ConnectedCalendars = (props: IConnectCalendarsProps) => {
{/* Connect calendars list */} {/* Connect calendars list */}
{firstCalendar === undefined && queryIntegrations.data && queryIntegrations.data.items.length > 0 && ( {firstCalendar === undefined && queryIntegrations.data && queryIntegrations.data.items.length > 0 && (
<List className="bg-default mx-1 divide-y divide-gray-200 rounded-md border border-gray-200 p-0 dark:bg-black sm:mx-0"> <List className="bg-default mx-1 divide-y divide-gray-200 rounded-md border border-subtle p-0 dark:bg-black sm:mx-0">
{queryIntegrations.data && {queryIntegrations.data &&
queryIntegrations.data.items.map((item) => ( queryIntegrations.data.items.map((item) => (
<li key={item.title}> <li key={item.title}>
@ -73,7 +73,7 @@ const ConnectedCalendars = (props: IConnectCalendarsProps) => {
)} )}
{queryIntegrations.isLoading && ( {queryIntegrations.isLoading && (
<ul className="bg-default divide-y divide-gray-200 rounded-md border border-gray-200 p-0 dark:bg-black"> <ul className="bg-default divide-y divide-gray-200 rounded-md border border-subtle p-0 dark:bg-black">
{[0, 0, 0, 0].map((_item, index) => { {[0, 0, 0, 0].map((_item, index) => {
return ( return (
<li className="flex w-full flex-row justify-center border-b-0 py-6" key={index}> <li className="flex w-full flex-row justify-center border-b-0 py-6" key={index}>

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

@ -117,7 +117,7 @@ const UserProfile = (props: IUserProfileProps) => {
name="avatar" name="avatar"
id="avatar" id="avatar"
placeholder="URL" placeholder="URL"
className="border-default mt-1 block w-full rounded-sm border px-3 py-2 text-sm focus:border-gray-800 focus:outline-none focus:ring-gray-800" className="border-default mt-1 block w-full rounded-sm border px-3 py-2 text-sm focus:border-gray-800 focus:outline-none focus:ring-empthasis"
defaultValue={imageSrc} defaultValue={imageSrc}
/> />
<div className="flex items-center px-4"> <div className="flex items-center px-4">

2
apps/web/components/setup/EnterpriseLicense.tsx
View File

@ -97,7 +97,7 @@ const EnterpriseLicense = (
{t("purchase_license")} {t("purchase_license")}
</Button> </Button>
<div className="relative flex justify-center"> <div className="relative flex justify-center">
<hr className="my-8 w-full border-[1.5px] border-gray-200" /> <hr className="my-8 w-full border-[1.5px] border-subtle" />
<span className="bg-default absolute mt-[22px] px-3.5 text-sm">OR</span> <span className="bg-default absolute mt-[22px] px-3.5 text-sm">OR</span>
</div> </div>
{t("already_have_key")} {t("already_have_key")}

2
apps/web/components/ui/AuthContainer.tsx
View File

@ -32,7 +32,7 @@ export default function AuthContainer(props: React.PropsWithChildren<Props>) {
</div> </div>
)} )}
<div className="mb-auto mt-8 sm:mx-auto sm:w-full sm:max-w-md"> <div className="mb-auto mt-8 sm:mx-auto sm:w-full sm:max-w-md">
<div className="bg-default mx-2 rounded-md border border-gray-200 px-4 py-10 sm:px-10"> <div className="bg-default mx-2 rounded-md border border-subtle px-4 py-10 sm:px-10">
{props.children} {props.children}
</div> </div>
<div className="text-default mt-8 text-center text-sm">{props.footerText}</div> <div className="text-default mt-8 text-center text-sm">{props.footerText}</div>

16
apps/web/pages/404.tsx
View File

@ -80,7 +80,7 @@ export default function Custom404() {
</div> </div>
<div className="min-w-0 flex-1"> <div className="min-w-0 flex-1">
<h3 className="text-emphasis text-base font-medium"> <h3 className="text-emphasis text-base font-medium">
<span className="rounded-sm focus-within:ring-2 focus-within:ring-gray-500 focus-within:ring-offset-2"> <span className="rounded-sm focus-within:ring-2 focus-within:ring-empthasis focus-within:ring-offset-2">
<span className="focus:outline-none"> <span className="focus:outline-none">
<span className="absolute inset-0" aria-hidden="true" /> <span className="absolute inset-0" aria-hidden="true" />
{t("acquire_commercial_license")} {t("acquire_commercial_license")}
@ -96,7 +96,7 @@ export default function Custom404() {
</li> </li>
</ul> </ul>
<ul role="list" className="divide-y divide-gray-200 border-gray-200"> <ul role="list" className="divide-y divide-gray-200 border-subtle">
<li className="px-4 py-2"> <li className="px-4 py-2">
<Link <Link
href={`${DEVELOPER_DOCS}/self-hosting/installation`} href={`${DEVELOPER_DOCS}/self-hosting/installation`}
@ -108,7 +108,7 @@ export default function Custom404() {
</div> </div>
<div className="min-w-0 flex-1"> <div className="min-w-0 flex-1">
<h3 className="text-emphasis text-base font-medium"> <h3 className="text-emphasis text-base font-medium">
<span className="rounded-sm focus-within:ring-2 focus-within:ring-gray-500 focus-within:ring-offset-2"> <span className="rounded-sm focus-within:ring-2 focus-within:ring-empthasis focus-within:ring-offset-2">
<span className="absolute inset-0" aria-hidden="true" /> <span className="absolute inset-0" aria-hidden="true" />
{t("prisma_studio_tip")} {t("prisma_studio_tip")}
</span> </span>
@ -153,7 +153,7 @@ export default function Custom404() {
</div> </div>
<div className="min-w-0 flex-1"> <div className="min-w-0 flex-1">
<h3 className="text-emphasis text-base font-medium"> <h3 className="text-emphasis text-base font-medium">
<span className="rounded-sm focus-within:ring-2 focus-within:ring-gray-500 focus-within:ring-offset-2"> <span className="rounded-sm focus-within:ring-2 focus-within:ring-empthasis focus-within:ring-offset-2">
<span className="absolute inset-0" aria-hidden="true" /> <span className="absolute inset-0" aria-hidden="true" />
Slack Slack
</span> </span>
@ -226,7 +226,7 @@ export default function Custom404() {
</div> </div>
<div className="min-w-0 flex-1"> <div className="min-w-0 flex-1">
<h3 className="text-emphasis text-base font-medium"> <h3 className="text-emphasis text-base font-medium">
<span className="rounded-sm focus-within:ring-2 focus-within:ring-gray-500 focus-within:ring-offset-2"> <span className="rounded-sm focus-within:ring-2 focus-within:ring-empthasis focus-within:ring-offset-2">
<span className="focus:outline-none"> <span className="focus:outline-none">
<span className="absolute inset-0" aria-hidden="true" /> <span className="absolute inset-0" aria-hidden="true" />
{t("register")} <strong className="text-green-500">{username}</strong> {t("register")} <strong className="text-green-500">{username}</strong>
@ -243,7 +243,7 @@ export default function Custom404() {
</ul> </ul>
)} )}
<ul role="list" className="mt-4 divide-y divide-gray-200 border-gray-200"> <ul role="list" className="mt-4 divide-y divide-gray-200 border-subtle">
{links.map((link, linkIdx) => ( {links.map((link, linkIdx) => (
<li key={linkIdx} className="px-4 py-2"> <li key={linkIdx} className="px-4 py-2">
<Link <Link
@ -256,7 +256,7 @@ export default function Custom404() {
</div> </div>
<div className="min-w-0 flex-1"> <div className="min-w-0 flex-1">
<h3 className="text-emphasis text-base font-medium"> <h3 className="text-emphasis text-base font-medium">
<span className="rounded-sm focus-within:ring-2 focus-within:ring-gray-500 focus-within:ring-offset-2"> <span className="rounded-sm focus-within:ring-2 focus-within:ring-empthasis focus-within:ring-offset-2">
<span className="absolute inset-0" aria-hidden="true" /> <span className="absolute inset-0" aria-hidden="true" />
{link.title} {link.title}
</span> </span>
@ -302,7 +302,7 @@ export default function Custom404() {
</div> </div>
<div className="min-w-0 flex-1"> <div className="min-w-0 flex-1">
<h3 className="text-emphasis text-base font-medium"> <h3 className="text-emphasis text-base font-medium">
<span className="rounded-sm focus-within:ring-2 focus-within:ring-gray-500 focus-within:ring-offset-2"> <span className="rounded-sm focus-within:ring-2 focus-within:ring-empthasis focus-within:ring-offset-2">
<span className="absolute inset-0" aria-hidden="true" /> <span className="absolute inset-0" aria-hidden="true" />
Slack Slack
</span> </span>

8
apps/web/pages/[user].tsx
View File

@ -60,7 +60,7 @@ export default function User(props: inferSSRProps<typeof getServerSideProps> & E
{eventTypes.map((type, index) => ( {eventTypes.map((type, index) => (
<li <li
key={index} key={index}
className="dark:bg-darkgray-100 dark:border-darkgray-300 group relative border-b border-gray-200 bg-default first:rounded-t-md last:rounded-b-md last:border-b-0 hover:bg-muted"> className="dark:bg-darkgray-100 dark:border-darkgray-300 group relative border-b border-subtle bg-default first:rounded-t-md last:rounded-b-md last:border-b-0 hover:bg-muted">
<FiArrowRight className="absolute right-3 top-3 h-4 w-4 text-emphasis opacity-0 transition-opacity group-hover:opacity-100 dark:text-inverted" /> <FiArrowRight className="absolute right-3 top-3 h-4 w-4 text-emphasis opacity-0 transition-opacity group-hover:opacity-100 dark:text-inverted" />
<Link <Link
href={getUsernameSlugLink({ users: props.users, slug: type.slug })} href={getUsernameSlugLink({ users: props.users, slug: type.slug })}
@ -130,7 +130,7 @@ export default function User(props: inferSSRProps<typeof getServerSideProps> & E
className={classNames( className={classNames(
shouldAlignCentrally ? "mx-auto" : "", shouldAlignCentrally ? "mx-auto" : "",
isEmbed isEmbed
? " border-bookinglightest dark:bg-darkgray-50 rounded-md border bg-default sm:dark:border-gray-600" ? " border-bookinglightest dark:bg-darkgray-50 rounded-md border bg-default sm:dark:border-empthasis"
: "", : "",
"max-w-3xl py-24 px-4" "max-w-3xl py-24 px-4"
)}> )}>
@ -156,7 +156,7 @@ export default function User(props: inferSSRProps<typeof getServerSideProps> & E
<div <div
className={classNames( className={classNames(
"rounded-md ", "rounded-md ",
!isEventListEmpty && "dark:border-darkgray-300 border border-gray-200" !isEventListEmpty && "dark:border-darkgray-300 border border-subtle"
)} )}
data-testid="event-types"> data-testid="event-types">
{user.away ? ( {user.away ? (
@ -175,7 +175,7 @@ export default function User(props: inferSSRProps<typeof getServerSideProps> & E
<div <div
key={type.id} key={type.id}
style={{ display: "flex", ...eventTypeListItemEmbedStyles }} style={{ display: "flex", ...eventTypeListItemEmbedStyles }}
className="dark:bg-darkgray-100 dark:hover:bg-darkgray-200 dark:border-darkgray-300 group relative border-b border-gray-200 bg-default first:rounded-t-md last:rounded-b-md last:border-b-0 hover:bg-muted className="dark:bg-darkgray-100 dark:hover:bg-darkgray-200 dark:border-darkgray-300 group relative border-b border-subtle bg-default first:rounded-t-md last:rounded-b-md last:border-b-0 hover:bg-muted
<FiArrowRight className="absolute right-4 top-4 h-4 w-4 text-emphasis opacity-0 transition-opacity group-hover:opacity-100 dark:text-inverted" /> <FiArrowRight className="absolute right-4 top-4 h-4 w-4 text-emphasis opacity-0 transition-opacity group-hover:opacity-100 dark:text-inverted" />
{/* Don't prefetch till the time we drop the amount of javascript in [user][type] page which is impacting score for [user] page */} {/* Don't prefetch till the time we drop the amount of javascript in [user][type] page which is impacting score for [user] page */}
<div className="block w-full p-5"> <div className="block w-full p-5">

2
apps/web/pages/apps/installed/[category].tsx
View File

@ -259,7 +259,7 @@ const IntegrationsContainer = ({
); );
} }
return ( return (
<div className="rounded-md border border-gray-200 p-7"> <div className="rounded-md border border-subtle p-7">
<ShellSubHeading <ShellSubHeading
title={t(variant || "other")} title={t(variant || "other")}
subtitle={t(`installed_app_${variant || "other"}_description`)} subtitle={t(`installed_app_${variant || "other"}_description`)}

2
apps/web/pages/availability/index.tsx
View File

@ -82,7 +82,7 @@ export function AvailabilityList({ schedules }: RouterOutputs["viewer"]["availab
/> />
</div> </div>
) : ( ) : (
<div className="mb-16 overflow-hidden rounded-md border border-gray-200 bg-default"> <div className="mb-16 overflow-hidden rounded-md border border-subtle bg-default">
<ul className="divide-y divide-gray-200" data-testid="schedules" ref={animationParentRef}> <ul className="divide-y divide-gray-200" data-testid="schedules" ref={animationParentRef}>
{schedules.map((schedule) => ( {schedules.map((schedule) => (
<ScheduleListItem <ScheduleListItem

8
apps/web/pages/booking/[uid].tsx
View File

@ -656,7 +656,7 @@ export default function Success(props: SuccessProps) {
encodeURIComponent(new RRule(props.eventType.recurringEvent).toString()) encodeURIComponent(new RRule(props.eventType.recurringEvent).toString())
: "") : "")
} }
className="dark:text-inverted h-10 w-10 rounded-sm border border-gray-200 px-3 py-2 ltr:mr-2 rtl:ml-2 dark:border-gray-700"> className="dark:text-inverted h-10 w-10 rounded-sm border border-subtle px-3 py-2 ltr:mr-2 rtl:ml-2 dark:border-empthasis">
<svg <svg
className="-mt-1.5 inline-block h-4 w-4" className="-mt-1.5 inline-block h-4 w-4"
fill="currentColor" fill="currentColor"
@ -682,7 +682,7 @@ export default function Success(props: SuccessProps) {
? "&location=" + encodeURIComponent(locationVideoCallUrl) ? "&location=" + encodeURIComponent(locationVideoCallUrl)
: "") : "")
} }
className="dark:text-inverted mx-2 h-10 w-10 rounded-sm border border-gray-200 px-3 py-2 dark:border-gray-700" className="dark:text-inverted mx-2 h-10 w-10 rounded-sm border border-subtle px-3 py-2 dark:border-empthasis"
target="_blank"> target="_blank">
<svg <svg
className="mr-1 -mt-1.5 inline-block h-4 w-4" className="mr-1 -mt-1.5 inline-block h-4 w-4"
@ -709,7 +709,7 @@ export default function Success(props: SuccessProps) {
? "&location=" + encodeURIComponent(locationVideoCallUrl) ? "&location=" + encodeURIComponent(locationVideoCallUrl)
: "") : "")
} }
className="dark:text-inverted mx-2 h-10 w-10 rounded-sm border border-gray-200 px-3 py-2 dark:border-gray-700" className="dark:text-inverted mx-2 h-10 w-10 rounded-sm border border-subtle px-3 py-2 dark:border-empthasis"
target="_blank"> target="_blank">
<svg <svg
className="mr-1 -mt-1.5 inline-block h-4 w-4" className="mr-1 -mt-1.5 inline-block h-4 w-4"
@ -722,7 +722,7 @@ export default function Success(props: SuccessProps) {
</Link> </Link>
<Link <Link
href={"data:text/calendar," + eventLink()} href={"data:text/calendar," + eventLink()}
className="dark:text-inverted mx-2 h-10 w-10 rounded-sm border border-gray-200 px-3 py-2 dark:border-gray-700" className="dark:text-inverted mx-2 h-10 w-10 rounded-sm border border-subtle px-3 py-2 dark:border-empthasis"
download={props.eventType.title + ".ics"}> download={props.eventType.title + ".ics"}>
<svg <svg
version="1.1" version="1.1"

4
apps/web/pages/bookings/[status].tsx
View File

@ -123,7 +123,7 @@ export default function Bookings() {
<div className="mb-6 pt-2 xl:pt-0"> <div className="mb-6 pt-2 xl:pt-0">
<WipeMyCalActionButton bookingStatus={status} bookingsEmpty={isEmpty} /> <WipeMyCalActionButton bookingStatus={status} bookingsEmpty={isEmpty} />
<p className="text-subtle mb-2 text-xs font-medium uppercase leading-4">{t("today")}</p> <p className="text-subtle mb-2 text-xs font-medium uppercase leading-4">{t("today")}</p>
<div className="overflow-hidden rounded-md border border-gray-200"> <div className="overflow-hidden rounded-md border border-subtle">
<table className="w-full max-w-full table-fixed"> <table className="w-full max-w-full table-fixed">
<tbody className="bg-default divide-y divide-gray-200" data-testid="today-bookings"> <tbody className="bg-default divide-y divide-gray-200" data-testid="today-bookings">
<Fragment> <Fragment>
@ -142,7 +142,7 @@ export default function Bookings() {
</div> </div>
)} )}
<div className="pt-2 xl:pt-0"> <div className="pt-2 xl:pt-0">
<div className="overflow-hidden rounded-md border border-gray-200"> <div className="overflow-hidden rounded-md border border-subtle">
<table className="w-full max-w-full table-fixed"> <table className="w-full max-w-full table-fixed">
<tbody className="bg-default divide-y divide-gray-200" data-testid="bookings"> <tbody className="bg-default divide-y divide-gray-200" data-testid="bookings">
{query.data.pages.map((page, index) => ( {query.data.pages.map((page, index) => (

2
apps/web/pages/settings/billing/index.tsx
View File

@ -26,7 +26,7 @@ const CtaRow = ({ title, description, className, children }: CtaRowProps) => {
</div> </div>
<div className="flex-shrink-0 pt-3 sm:ml-auto sm:pt-0 sm:pl-3">{children}</div> <div className="flex-shrink-0 pt-3 sm:ml-auto sm:pt-0 sm:pl-3">{children}</div>
</section> </section>
<hr className="border-gray-200" /> <hr className="border-subtle" />
</> </>
); );
}; };

4
apps/web/pages/settings/my-account/appearance.tsx
View File

@ -121,7 +121,7 @@ const AppearanceView = () => {
/> />
</div> </div>
<hr className="my-8 border border-gray-200" /> <hr className="my-8 border border-subtle" />
<div className="mb-6 flex items-center text-sm"> <div className="mb-6 flex items-center text-sm">
<div> <div>
<p className="font-semibold">{t("custom_brand_colors")}</p> <p className="font-semibold">{t("custom_brand_colors")}</p>
@ -167,7 +167,7 @@ const AppearanceView = () => {
onClick={() => window.open(`${WEBAPP_URL}/${user.username}/${user.eventTypes[0].title}`, "_blank")}> onClick={() => window.open(`${WEBAPP_URL}/${user.username}/${user.eventTypes[0].title}`, "_blank")}>
Preview Preview
</Button> */} </Button> */}
<hr className="my-8 border border-gray-200" /> <hr className="my-8 border border-subtle" />
<Controller <Controller
name="hideBranding" name="hideBranding"
control={formMethods.control} control={formMethods.control}

6
apps/web/pages/settings/my-account/calendars.tsx
View File

@ -84,8 +84,8 @@ const CalendarsView = () => {
success={({ data }) => { success={({ data }) => {
return data.connectedCalendars.length ? ( return data.connectedCalendars.length ? (
<div> <div>
<div className="bg-muted mt-4 flex space-x-4 rounded-md border-gray-200 p-2 sm:mx-0 sm:p-10 md:border md:p-6 xl:mt-0"> <div className="bg-muted mt-4 flex space-x-4 rounded-md border-subtle p-2 sm:mx-0 sm:p-10 md:border md:p-6 xl:mt-0">
<div className=" bg-default flex h-9 w-9 items-center justify-center rounded-md border-2 border-gray-200 p-[6px]"> <div className=" bg-default flex h-9 w-9 items-center justify-center rounded-md border-2 border-subtle p-[6px]">
<FiCalendar className="h-6 w-6" /> <FiCalendar className="h-6 w-6" />
</div> </div>
@ -171,7 +171,7 @@ const CalendarsView = () => {
/> />
</div> </div>
</div> </div>
<div className="w-full border-t border-gray-200"> <div className="w-full border-t border-subtle">
<p className="text-subtle px-2 pt-4 text-sm">{t("toggle_calendars_conflict")}</p> <p className="text-subtle px-2 pt-4 text-sm">{t("toggle_calendars_conflict")}</p>
<ul className="space-y-2 p-4"> <ul className="space-y-2 p-4">
{item.calendars.map((cal) => ( {item.calendars.map((cal) => (

2
apps/web/pages/settings/my-account/profile.tsx
View File

@ -224,7 +224,7 @@ const ProfileView = () => {
} }
/> />
<hr className="my-6 border-gray-200" /> <hr className="my-6 border-subtle" />
<Label>{t("danger_zone")}</Label> <Label>{t("danger_zone")}</Label>
{/* Delete account Dialog */} {/* Delete account Dialog */}

2
apps/web/pages/settings/security/password.tsx
View File

@ -155,7 +155,7 @@ const PasswordView = () => {
<p className="text-default mt-4 max-w-[38rem] text-sm"> <p className="text-default mt-4 max-w-[38rem] text-sm">
{t("invalid_password_hint", { passwordLength: passwordMinLength })} {t("invalid_password_hint", { passwordLength: passwordMinLength })}
</p> </p>
<div className="mt-8 border-t border-gray-200 py-8"> <div className="mt-8 border-t border-subtle py-8">
<SettingsToggle <SettingsToggle
title={t("session_timeout")} title={t("session_timeout")}
description={t("session_timeout_description")} description={t("session_timeout_description")}

6
apps/web/pages/team/[slug].tsx
View File

@ -40,12 +40,12 @@ function TeamPage({ team }: TeamPageProps) {
}, [telemetry, router.asPath]); }, [telemetry, router.asPath]);
const EventTypes = () => ( const EventTypes = () => (
<ul className="dark:border-darkgray-300 rounded-md border border-gray-200"> <ul className="dark:border-darkgray-300 rounded-md border border-subtle">
{team.eventTypes.map((type, index) => ( {team.eventTypes.map((type, index) => (
<li <li
key={index} key={index}
className={classNames( className={classNames(
"dark:bg-darkgray-100 dark:border-darkgray-300 bg-default hover:bg-muted group relative border-b border-gray-200 first:rounded-t-md last:rounded-b-md last:border-b-0", "dark:bg-darkgray-100 dark:border-darkgray-300 bg-default hover:bg-muted group relative border-b border-subtle first:rounded-t-md last:rounded-b-md last:border-b-0",
!isEmbed && "bg-default" !isEmbed && "bg-default"
)}> )}>
<div className="px-6 py-4 "> <div className="px-6 py-4 ">
@ -116,7 +116,7 @@ function TeamPage({ team }: TeamPageProps) {
<div> <div>
<div className="relative mt-12"> <div className="relative mt-12">
<div className="absolute inset-0 flex items-center" aria-hidden="true"> <div className="absolute inset-0 flex items-center" aria-hidden="true">
<div className="dark:border-darkgray-300 w-full border-t border-gray-200" /> <div className="dark:border-darkgray-300 w-full border-t border-subtle" />
</div> </div>
<div className="relative flex justify-center"> <div className="relative flex justify-center">
<span className="dark:bg-darkgray-50 bg-subtle text-subtle dark:text-inverted px-2 text-sm"> <span className="dark:bg-darkgray-50 bg-subtle text-subtle dark:text-inverted px-2 text-sm">

2
packages/app-store/_components/AppCard.tsx
View File

@ -28,7 +28,7 @@ export default function AppCard({
const [animationRef] = useAutoAnimate<HTMLDivElement>(); const [animationRef] = useAutoAnimate<HTMLDivElement>();
return ( return (
<div className={`mb-4 mt-2 rounded-md border border-gray-200 ${!app.enabled && "grayscale"}`}> <div className={`mb-4 mt-2 rounded-md border border-subtle ${!app.enabled && "grayscale"}`}>
<div className="p-4 text-sm sm:p-6"> <div className="p-4 text-sm sm:p-6">
<div className="flex w-full flex-col gap-2 sm:flex-row sm:gap-0"> <div className="flex w-full flex-col gap-2 sm:flex-row sm:gap-0">
{/* Don't know why but w-[42px] isn't working, started happening when I started using next/dynamic */} {/* Don't know why but w-[42px] isn't working, started happening when I started using next/dynamic */}

2
packages/app-store/_components/AppSettings.tsx
View File

@ -5,7 +5,7 @@ import { DynamicComponent } from "./DynamicComponent";
export const AppSettings = (props: { slug: string }) => { export const AppSettings = (props: { slug: string }) => {
return ( return (
<DynamicComponent<typeof AppSettingsComponentsMap> <DynamicComponent<typeof AppSettingsComponentsMap>
wrapperClassName="border-t border-gray-200 p-6" wrapperClassName="border-t border-subtle p-6"
componentMap={AppSettingsComponentsMap} componentMap={AppSettingsComponentsMap}
{...props} {...props}
/> />

2
packages/app-store/routing-forms/components/SingleForm.tsx
View File

@ -370,7 +370,7 @@ function SingleForm({ form, appUrl, Page }: SingleFormComponentProps) {
</> </>
)} )}
</div> </div>
<div className="w-full rounded-md border border-gray-200 p-8"> <div className="w-full rounded-md border border-subtle p-8">
<RoutingNavBar appUrl={appUrl} form={form} /> <RoutingNavBar appUrl={appUrl} form={form} />
<Page hookForm={hookForm} form={form} appUrl={appUrl} /> <Page hookForm={hookForm} form={form} appUrl={appUrl} />
</div> </div>

2
packages/app-store/zapier/components/TemplateCard.tsx
View File

@ -4,7 +4,7 @@ import type { Template } from "./AppSettingsInterface";
export default function TemplateCard({ template }: { template: Template }) { export default function TemplateCard({ template }: { template: Template }) {
return ( return (
<div className="min-h-16 bg-default sticky flex flex-col justify-between gap-4 rounded-md border border-gray-200 p-5"> <div className="min-h-16 bg-default sticky flex flex-col justify-between gap-4 rounded-md border border-subtle p-5">
<div className="flex items-start justify-start"> <div className="flex items-start justify-start">
<div> <div>
<div className="mr-4 flex h-12 w-12 items-center justify-center rounded-md p-1"> <div className="mr-4 flex h-12 w-12 items-center justify-center rounded-md p-1">

2
packages/features/calendars/DatePicker.tsx
View File

@ -80,7 +80,7 @@ const NoAvailabilityOverlay = ({
const { t } = useLocale(); const { t } = useLocale();
return ( return (
<div className="dark:border-darkgray-300 dark:bg-darkgray-200 bg-muted absolute top-40 left-1/2 -mt-10 w-max -translate-x-1/2 -translate-y-1/2 transform rounded-md border border-gray-200 p-8 shadow-sm"> <div className="dark:border-darkgray-300 dark:bg-darkgray-200 bg-muted absolute top-40 left-1/2 -mt-10 w-max -translate-x-1/2 -translate-y-1/2 transform rounded-md border border-subtle p-8 shadow-sm">
<h4 className="text-emphasis dark:text-inverted mb-4 font-medium"> <h4 className="text-emphasis dark:text-inverted mb-4 font-medium">
{t("no_availability_in_month", { month: month })} {t("no_availability_in_month", { month: month })}
</h4> </h4>

2
packages/features/calendars/weeklyview/components/Calendar.tsx
View File

@ -56,7 +56,7 @@ export function Calendar(props: CalendarComponentProps) {
containerRef={container} containerRef={container}
/> */} /> */}
<div className="flex flex-auto"> <div className="flex flex-auto">
<div className="bg-default sticky left-0 z-10 w-14 flex-none ring-1 ring-gray-100" /> <div className="bg-default sticky left-0 z-10 w-14 flex-none ring-1 ring-muted" />
<div className="grid flex-auto grid-cols-1 grid-rows-1 "> <div className="grid flex-auto grid-cols-1 grid-rows-1 ">
<HorizontalLines <HorizontalLines
hours={hours} hours={hours}

2
packages/features/ee/teams/components/SkeletonloaderTeamList.tsx
View File

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

4
packages/features/ee/teams/components/TeamAvailabilityScreen.tsx
View File

@ -34,7 +34,7 @@ export default function TeamAvailabilityScreen(props: Props) {
if (!member) return <></>; if (!member) return <></>;
return ( return (
<div key={member.id} style={style} className="flex border-r border-gray-200 pl-4 "> <div key={member.id} style={style} className="flex border-r border-subtle pl-4 ">
<TeamAvailabilityTimes <TeamAvailabilityTimes
teamId={props.team?.id as number} teamId={props.team?.id as number}
memberId={member.id} memberId={member.id}
@ -62,7 +62,7 @@ export default function TeamAvailabilityScreen(props: Props) {
return ( return (
<div className="bg-default flex flex-1 flex-col rounded-sm border border-neutral-200"> <div className="bg-default flex flex-1 flex-col rounded-sm border border-neutral-200">
<div className="flex w-full space-x-5 border-b border-gray-200 p-4 rtl:space-x-reverse"> <div className="flex w-full space-x-5 border-b border-subtle p-4 rtl:space-x-reverse">
<div className="flex flex-col"> <div className="flex flex-col">
<span className="text-default text-sm font-medium">Date</span> <span className="text-default text-sm font-medium">Date</span>
<DatePicker <DatePicker

4
packages/features/ee/teams/components/TeamInviteListItem.tsx
View File

@ -89,7 +89,7 @@ export default function TeamInviteListItem(props: Props) {
<div className="hidden sm:flex"> <div className="hidden sm:flex">
<Button <Button
type="button" type="button"
className="mr-3 border-gray-700" className="mr-3 border-empthasis"
variant="icon" variant="icon"
color="secondary" color="secondary"
onClick={declineInvite} onClick={declineInvite}
@ -97,7 +97,7 @@ export default function TeamInviteListItem(props: Props) {
/> />
<Button <Button
type="button" type="button"
className="border-gray-700" className="border-empthasis"
variant="icon" variant="icon"
color="secondary" color="secondary"
onClick={acceptInvite} onClick={acceptInvite}

4
packages/features/ee/teams/components/v2/TeamAvailabilityScreen.tsx
View File

@ -34,7 +34,7 @@ export default function TeamAvailabilityScreen(props: Props) {
if (!member) return <></>; if (!member) return <></>;
return ( return (
<div key={member.id} style={style} className="flex border-r border-gray-200 pl-4 "> <div key={member.id} style={style} className="flex border-r border-subtle pl-4 ">
<TeamAvailabilityTimes <TeamAvailabilityTimes
teamId={props.team?.id as number} teamId={props.team?.id as number}
memberId={member.id} memberId={member.id}
@ -62,7 +62,7 @@ export default function TeamAvailabilityScreen(props: Props) {
return ( return (
<div className="bg-default flex flex-1 flex-col rounded-sm border border-neutral-200"> <div className="bg-default flex flex-1 flex-col rounded-sm border border-neutral-200">
<div className="flex w-full space-x-5 border-b border-gray-200 p-4 rtl:space-x-reverse"> <div className="flex w-full space-x-5 border-b border-subtle p-4 rtl:space-x-reverse">
<div className="flex flex-col"> <div className="flex flex-col">
<span className="text-default text-sm font-medium">Date</span> <span className="text-default text-sm font-medium">Date</span>
<DatePicker <DatePicker

6
packages/features/ee/teams/pages/team-appearance-view.tsx
View File

@ -133,7 +133,7 @@ const ProfileView = () => {
/> />
</div> </div>
<hr className="my-8 border-gray-200" /> <hr className="my-8 border-subtle" />
<div className="mb-6 flex items-center text-sm"> <div className="mb-6 flex items-center text-sm">
<div> <div>
<p className="font-semibold">{t("custom_brand_colors")}</p> <p className="font-semibold">{t("custom_brand_colors")}</p>
@ -171,7 +171,7 @@ const ProfileView = () => {
)} )}
/> />
</div> </div>
<hr className="my-8 border-gray-200" /> <hr className="my-8 border-subtle" />
<div className="flex flex-col gap-8"> <div className="flex flex-col gap-8">
<div className="relative flex items-start"> <div className="relative flex items-start">
@ -229,7 +229,7 @@ const ProfileView = () => {
</Button> </Button>
</Form> </Form>
) : ( ) : (
<div className="rounded-md border border-gray-200 p-5"> <div className="rounded-md border border-subtle p-5">
<span className="text-default text-sm">{t("only_owner_change")}</span> <span className="text-default text-sm">{t("only_owner_change")}</span>
</div> </div>
)} )}

4
packages/features/ee/teams/pages/team-members-view.tsx
View File

@ -95,7 +95,7 @@ const MembersView = () => {
})} })}
</ul> </ul>
</div> </div>
<hr className="my-8 border-gray-200" /> <hr className="my-8 border-subtle" />
{team && session.data && ( {team && session.data && (
<DisableTeamImpersonation <DisableTeamImpersonation
@ -104,7 +104,7 @@ const MembersView = () => {
disabled={isInviteOpen} disabled={isInviteOpen}
/> />
)} )}
<hr className="my-8 border-gray-200" /> <hr className="my-8 border-subtle" />
</div> </div>
{showMemberInvitationModal && team && ( {showMemberInvitationModal && team && (
<MemberInvitationModal <MemberInvitationModal

4
packages/features/ee/teams/pages/team-profile-view.tsx
View File

@ -181,7 +181,7 @@ const ProfileView = () => {
/> />
</div> </div>
<hr className="my-8 border-gray-200" /> <hr className="my-8 border-subtle" />
<Controller <Controller
control={form.control} control={form.control}
@ -276,7 +276,7 @@ const ProfileView = () => {
</div> </div>
</div> </div>
)} )}
<hr className="my-8 border border-gray-200" /> <hr className="my-8 border border-subtle" />
<div className="mb-3 text-base font-semibold">{t("danger_zone")}</div> <div className="mb-3 text-base font-semibold">{t("danger_zone")}</div>
{team?.membership.role === "OWNER" ? ( {team?.membership.role === "OWNER" ? (

2
packages/features/ee/workflows/components/EventWorkflowsTab.tsx
View File

@ -98,7 +98,7 @@ const WorkflowListItem = (props: ItemProps) => {
}); });
return ( return (
<div className="flex w-full items-center overflow-hidden rounded-md border border-gray-200 p-6 px-3 md:p-6"> <div className="flex w-full items-center overflow-hidden rounded-md border border-subtle p-6 px-3 md:p-6">
<div className="bg-subtle mr-4 flex h-10 w-10 items-center justify-center rounded-full text-xs font-medium"> <div className="bg-subtle mr-4 flex h-10 w-10 items-center justify-center rounded-full text-xs font-medium">
{getActionIcon( {getActionIcon(
workflow.steps, workflow.steps,

2
packages/features/ee/workflows/components/SkeletonLoaderEventWorkflowsTab.tsx
View File

@ -13,7 +13,7 @@ export default SkeletonLoader;
function SkeletonItem() { function SkeletonItem() {
return ( return (
<li className="group mb-4 flex h-[90px] w-full items-center justify-between rounded-md border border-gray-200 px-4 py-4 sm:px-6"> <li className="group mb-4 flex h-[90px] w-full items-center justify-between rounded-md border border-subtle px-4 py-4 sm:px-6">
<div className="flex-grow truncate text-sm"> <div className="flex-grow truncate text-sm">
<div className="flex"> <div className="flex">
<SkeletonAvatar className="h-10 w-10" /> <SkeletonAvatar className="h-10 w-10" />

2
packages/features/ee/workflows/components/SkeletonLoaderList.tsx
View File

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

6
packages/features/ee/workflows/components/WorkflowDetailsPage.tsx
View File

@ -133,7 +133,7 @@ export default function WorkflowDetailsPage(props: Props) {
); );
}} }}
/> />
<div className="my-7 border-transparent md:border-t md:border-gray-200" /> <div className="my-7 border-transparent md:border-t md:border-subtle" />
<Button <Button
type="button" type="button"
StartIcon={FiTrash2} StartIcon={FiTrash2}
@ -142,11 +142,11 @@ export default function WorkflowDetailsPage(props: Props) {
onClick={() => setDeleteDialogOpen(true)}> onClick={() => setDeleteDialogOpen(true)}>
{t("delete_workflow")} {t("delete_workflow")}
</Button> </Button>
<div className="my-7 border-t border-gray-200 md:border-none" /> <div className="my-7 border-t border-subtle md:border-none" />
</div> </div>
{/* Workflow Trigger Event & Steps */} {/* Workflow Trigger Event & Steps */}
<div className="bg-muted w-full rounded-md border border-gray-200 p-3 py-5 md:ml-3 md:p-8"> <div className="bg-muted w-full rounded-md border border-subtle p-3 py-5 md:ml-3 md:p-8">
{form.getValues("trigger") && ( {form.getValues("trigger") && (
<div> <div>
<WorkflowStepContainer form={form} teamId={teamId} /> <WorkflowStepContainer form={form} teamId={teamId} />

2
packages/features/ee/workflows/components/WorkflowListPage.tsx
View File

@ -61,7 +61,7 @@ export default function WorkflowListPage({ workflows, profileOptions, hasNoWorkf
return ( return (
<> <>
{workflows && workflows.length > 0 ? ( {workflows && workflows.length > 0 ? (
<div className="bg-default overflow-hidden rounded-md border border-gray-200 sm:mx-0"> <div className="bg-default overflow-hidden rounded-md border border-subtle sm:mx-0">
<ul className="divide-y divide-gray-200"> <ul className="divide-y divide-gray-200">
{workflows.map((workflow) => ( {workflows.map((workflow) => (
<li key={workflow.id}> <li key={workflow.id}>

8
packages/features/ee/workflows/components/WorkflowStepContainer.tsx
View File

@ -206,7 +206,7 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) {
return ( return (
<> <>
<div className="flex justify-center"> <div className="flex justify-center">
<div className="min-w-80 bg-default w-full rounded-md border border-gray-200 p-7"> <div className="min-w-80 bg-default w-full rounded-md border border-subtle p-7">
<div className="flex"> <div className="flex">
<div className="bg-subtle mt-[3px] flex h-5 w-5 items-center justify-center rounded-full p-1 text-xs font-medium ltr:mr-5 rtl:ml-5"> <div className="bg-subtle mt-[3px] flex h-5 w-5 items-center justify-center rounded-full p-1 text-xs font-medium ltr:mr-5 rtl:ml-5">
1 1
@ -216,7 +216,7 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) {
<div className="text-default text-sm">{t("when_something_happens")}</div> <div className="text-default text-sm">{t("when_something_happens")}</div>
</div> </div>
</div> </div>
<div className="my-7 border-t border-gray-200" /> <div className="my-7 border-t border-subtle" />
<Label>{t("when")}</Label> <Label>{t("when")}</Label>
<Controller <Controller
name="trigger" name="trigger"
@ -284,7 +284,7 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) {
<FiArrowDown className="text-subtle stroke-[1.5px] text-3xl" /> <FiArrowDown className="text-subtle stroke-[1.5px] text-3xl" />
</div> </div>
<div className="flex justify-center"> <div className="flex justify-center">
<div className="min-w-80 bg-default flex w-full rounded-md border border-gray-200 p-7"> <div className="min-w-80 bg-default flex w-full rounded-md border border-subtle p-7">
<div className="w-full"> <div className="w-full">
<div className="flex"> <div className="flex">
<div className="w-full"> <div className="w-full">
@ -332,7 +332,7 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) {
</Dropdown> </Dropdown>
</div> </div>
</div> </div>
<div className="my-7 border-t border-gray-200" /> <div className="my-7 border-t border-subtle" />
<div> <div>
<Label>{t("do_this")}</Label> <Label>{t("do_this")}</Label>
<Controller <Controller

2
packages/features/schedules/components/DateOverrideList.tsx
View File

@ -53,7 +53,7 @@ const DateOverrideList = ({
}; };
return ( return (
<ul className="rounded border border-gray-200" data-testid="date-overrides-list"> <ul className="rounded border border-subtle" data-testid="date-overrides-list">
{items.sort(sortByDate).map((item, index) => ( {items.sort(sortByDate).map((item, index) => (
<li key={item.id} className="flex justify-between border-b px-5 py-4 last:border-b-0"> <li key={item.id} className="flex justify-between border-b px-5 py-4 last:border-b-0">
<div> <div>

4
packages/features/schedules/components/ScheduleListItem.tsx
View File

@ -83,7 +83,7 @@ export function ScheduleListItem({
</DropdownMenuTrigger> </DropdownMenuTrigger>
{!isLoading && data && ( {!isLoading && data && (
<DropdownMenuContent> <DropdownMenuContent>
<DropdownMenuItem className="min-w-40 focus:ring-gray-100"> <DropdownMenuItem className="min-w-40 focus:ring-muted">
{!schedule.isDefault && ( {!schedule.isDefault && (
<DropdownItem <DropdownItem
type="button" type="button"
@ -98,7 +98,7 @@ export function ScheduleListItem({
</DropdownItem> </DropdownItem>
)} )}
</DropdownMenuItem> </DropdownMenuItem>
<DropdownMenuItem className="min-w-40 focus:ring-gray-100"> <DropdownMenuItem className="min-w-40 focus:ring-muted">
<DropdownItem <DropdownItem
type="button" type="button"
color="destructive" color="destructive"

2
packages/features/settings/layouts/SettingsLayout.tsx
View File

@ -427,7 +427,7 @@ function ShellHeader() {
const { t, isLocaleReady } = useLocale(); const { t, isLocaleReady } = useLocale();
return ( return (
<header className="mx-auto block justify-between pt-8 sm:flex"> <header className="mx-auto block justify-between pt-8 sm:flex">
<div className="mb-8 flex w-full items-center border-b border-gray-200 pb-6"> <div className="mb-8 flex w-full items-center border-b border-subtle pb-6">
{meta.backButton && ( {meta.backButton && (
<a href="javascript:history.back()"> <a href="javascript:history.back()">
<FiArrowLeft className="mr-7" /> <FiArrowLeft className="mr-7" />

6
packages/features/shell/Shell.tsx
View File

@ -649,7 +649,7 @@ const MobileNavigation = () => {
<> <>
<nav <nav
className={classNames( className={classNames(
"pwa:pb-2.5 bg-muted fixed bottom-0 z-30 -mx-4 flex w-full border border-t border-gray-200 bg-opacity-40 px-1 shadow backdrop-blur-md md:hidden", "pwa:pb-2.5 bg-muted fixed bottom-0 z-30 -mx-4 flex w-full border border-t border-subtle bg-opacity-40 px-1 shadow backdrop-blur-md md:hidden",
isEmbed && "hidden" isEmbed && "hidden"
)}> )}>
{mobileNavigationBottomItems.map((item) => ( {mobileNavigationBottomItems.map((item) => (
@ -754,7 +754,7 @@ function SideBar() {
</div> </div>
</header> </header>
<hr className="desktop-only absolute -left-3 -right-3 mt-4 block w-full border-gray-200" /> <hr className="desktop-only absolute -left-3 -right-3 mt-4 block w-full border-subtle" />
{/* logo icon for tablet */} {/* logo icon for tablet */}
<Link href="/event-types" className="text-center md:inline lg:hidden"> <Link href="/event-types" className="text-center md:inline lg:hidden">
@ -879,7 +879,7 @@ function TopNav() {
<> <>
<nav <nav
style={isEmbed ? { display: "none" } : {}} style={isEmbed ? { display: "none" } : {}}
className="bg-mutedg-opacity-50 sticky top-0 z-40 flex w-full items-center justify-between border-b border-gray-200 py-1.5 px-4 backdrop-blur-lg sm:p-4 md:hidden"> className="bg-mutedg-opacity-50 sticky top-0 z-40 flex w-full items-center justify-between border-b border-subtle py-1.5 px-4 backdrop-blur-lg sm:p-4 md:hidden">
<Link href="/event-types"> <Link href="/event-types">
<Logo /> <Logo />
</Link> </Link>

2
packages/ui/components/apps/AppCard.tsx
View File

@ -41,7 +41,7 @@ export function AppCard({ app, credentials, searchText }: AppCardProps) {
}, [app.name, searchText]); }, [app.name, searchText]);
return ( return (
<div className="relative flex h-64 flex-col rounded-md border border-gray-200 p-5"> <div className="relative flex h-64 flex-col rounded-md border border-subtle p-5">
<div className="flex"> <div className="flex">
<img src={app.logo} alt={app.name + " Logo"} className="mb-4 h-12 w-12 rounded-sm" /> <img src={app.logo} alt={app.name + " Logo"} className="mb-4 h-12 w-12 rounded-sm" />
</div> </div>

2
packages/ui/components/apps/SkeletonLoader.tsx
View File

@ -16,7 +16,7 @@ export function SkeletonLoader({
<ShellSubHeading title={<div className="bg-subtle h-6 w-32" />} {...{ className }} /> <ShellSubHeading title={<div className="bg-subtle h-6 w-32" />} {...{ className }} />
{title && description && <Meta title={title} description={description} />} {title && description && <Meta title={title} description={description} />}
<ul className="bg-default -mx-4 animate-pulse divide-y divide-neutral-200 rounded-md border border-gray-200 sm:mx-0 sm:overflow-hidden"> <ul className="bg-default -mx-4 animate-pulse divide-y divide-neutral-200 rounded-md border border-subtle sm:mx-0 sm:overflow-hidden">
<SkeletonItem /> <SkeletonItem />
<SkeletonItem /> <SkeletonItem />
<SkeletonItem /> <SkeletonItem />

2
packages/ui/components/avatar/AvatarGroup.tsx
View File

@ -30,7 +30,7 @@ export const AvatarGroup = function AvatarGroup(props: AvatarGroupProps) {
{displayedAvatars.map((item, idx) => ( {displayedAvatars.map((item, idx) => (
<li key={idx} className="-mr-[4px] inline-block"> <li key={idx} className="-mr-[4px] inline-block">
<Avatar <Avatar
className="border-gray-200" className="border-subtle"
imageSrc={item.image} imageSrc={item.image}
title={item.title} title={item.title}
alt={item.alt || ""} alt={item.alt || ""}

6
packages/ui/components/button/Button.tsx
View File

@ -86,7 +86,7 @@ const buttonClasses = cva(
disabled: true, disabled: true,
color: "secondary", color: "secondary",
className: className:
"border border-gray-200 bg-opacity-30 text-emphasis/30 dark:text-darkgray-900/30 dark:border-darkgray-200", "border border-subtle bg-opacity-30 text-emphasis/30 dark:text-darkgray-900/30 dark:border-darkgray-200",
}, },
{ {
loading: true, loading: true,
@ -98,7 +98,7 @@ const buttonClasses = cva(
disabled: [undefined, false], disabled: [undefined, false],
color: "secondary", color: "secondary",
className: className:
"border border-default dark:border-darkgray-300 bg-default dark:bg-darkgray-100 hover:bg-muted hover:border-emphasis focus-visible:bg-subtle dark:hover:bg-darkgray-200 dark:focus-visible:bg-darkgray-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset focus-visible:ring-gray-900 dark:focus-visible:ring-white", "border border-default dark:border-darkgray-300 bg-default dark:bg-darkgray-100 hover:bg-muted hover:border-emphasis focus-visible:bg-subtle dark:hover:bg-darkgray-200 dark:focus-visible:bg-darkgray-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset focus-visible:ring-empthasis dark:focus-visible:ring-white",
}), }),
// Minimal variants // Minimal variants
{ {
@ -117,7 +117,7 @@ const buttonClasses = cva(
disabled: [undefined, false], disabled: [undefined, false],
color: "minimal", color: "minimal",
className: className:
"hover:bg-subtle focus-visible:bg-subtle dark:hover:bg-darkgray-200 dark:focus-visible:bg-darkgray-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset focus-visible:ring-gray-900 dark:focus-visible:ring-white", "hover:bg-subtle focus-visible:bg-subtle dark:hover:bg-darkgray-200 dark:focus-visible:bg-darkgray-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset focus-visible:ring-empthasis dark:focus-visible:ring-white",
}), }),
// Destructive variants // Destructive variants
{ {

4
packages/ui/components/card/Card.tsx
View File

@ -46,7 +46,7 @@ const cardTypeByVariant = {
}, },
SidebarCard: { SidebarCard: {
image: "w-9 h-auto rounded-full mb-4s", image: "w-9 h-auto rounded-full mb-4s",
card: "w-full p-3 border border-gray-200", card: "w-full p-3 border border-subtle",
title: "text-sm font-cal", title: "text-sm font-cal",
description: "text-xs text-default line-clamp-2", description: "text-xs text-default line-clamp-2",
}, },
@ -70,7 +70,7 @@ export function Card({
className={classNames( className={classNames(
containerProps?.className, containerProps?.className,
cardTypeByVariant[variant].card, cardTypeByVariant[variant].card,
"bg-default flex flex-col justify-between rounded-md border border-gray-200" "bg-default flex flex-col justify-between rounded-md border border-subtle"
)} )}
{...containerProps}> {...containerProps}>
<div> <div>

2
packages/ui/components/card/FormCard.tsx
View File

@ -28,7 +28,7 @@ export default function FormCard({
} & JSX.IntrinsicElements["div"]) { } & JSX.IntrinsicElements["div"]) {
className = classNames( className = classNames(
className, className,
"flex items-center group relative w-full rounded-md p-4 border border-gray-200" "flex items-center group relative w-full rounded-md p-4 border border-subtle"
); );
return ( return (

2
packages/ui/components/card/StepCard.tsx
View File

@ -1,6 +1,6 @@
const StepCard: React.FC<{ children: React.ReactNode }> = (props) => { const StepCard: React.FC<{ children: React.ReactNode }> = (props) => {
return ( return (
<div className="mt-10 rounded-md border border-gray-200 bg-default p-4 dark:bg-black sm:p-8"> <div className="mt-10 rounded-md border border-subtle bg-default p-4 dark:bg-black sm:p-8">
{props.children} {props.children}
</div> </div>
); );

2
packages/ui/components/form/dropdown/Dropdown.tsx
View File

@ -39,7 +39,7 @@ export const DropdownMenuContent = forwardRef<HTMLDivElement, DropdownMenuConten
{...props} {...props}
sideOffset={sideOffset} sideOffset={sideOffset}
className={classNames( className={classNames(
"shadow-dropdown w-50 bg-default relative z-10 ml-1.5 origin-top-right rounded-md border border-gray-200 text-sm", "shadow-dropdown w-50 bg-default relative z-10 ml-1.5 origin-top-right rounded-md border border-subtle text-sm",
"[&>*:first-child]:mt-1 [&>*:last-child]:mb-1" "[&>*:first-child]:mt-1 [&>*:last-child]:mb-1"
)} )}
ref={forwardedRef}> ref={forwardedRef}>

2
packages/ui/components/form/selectimproved/components/SearchInput.tsx
View File

@ -36,7 +36,7 @@ const SearchInput: React.FC<SearchInputProps> = ({
className={ className={
classNames && classNames.searchBox classNames && classNames.searchBox
? classNames.searchBox ? classNames.searchBox
: "dark:border-darkgray-300 dark:bg-darkgray-100 dark:text-darkgray-900 focus:border-darkgray-900 text-subtle w-full rounded-[6px] border border-gray-200 py-2 pl-8 text-sm focus:border-gray-900 focus:outline-none focus:ring-0" : "dark:border-darkgray-300 dark:bg-darkgray-100 dark:text-darkgray-900 focus:border-darkgray-900 text-subtle w-full rounded-[6px] border border-subtle py-2 pl-8 text-sm focus:border-gray-900 focus:outline-none focus:ring-0"
} }
autoFocus autoFocus
type="text" type="text"

4
packages/ui/components/form/selectimproved/components/Select.tsx
View File

@ -130,8 +130,8 @@ function Select<T extends Option>({
className={cn( className={cn(
"min-w-64 border-default text-muted flex max-h-[36px] items-center justify-between rounded-md border text-sm transition-all duration-300 focus:outline-none", "min-w-64 border-default text-muted flex max-h-[36px] items-center justify-between rounded-md border text-sm transition-all duration-300 focus:outline-none",
isDisabled isDisabled
? " dark:bg-darkgray-200 dark:border-darkgray-300 bg-subtle dark:text-subtle text-muted border-gray-200" ? " dark:bg-darkgray-200 dark:border-darkgray-300 bg-subtle dark:text-subtle text-muted border-subtle"
: "dark:border-darkgray-300 dark:bg-darkgray-50 dark:text-darkgray-500 dark:focus:border-darkgray-700 dark:focus:bg-darkgray-100 dark:focus:text-darkgray-900 dark:hover:text-darkgray-900 bg-default hover:border-gray-600 focus:border-gray-900" : "dark:border-darkgray-300 dark:bg-darkgray-50 dark:text-darkgray-500 dark:focus:border-darkgray-700 dark:focus:bg-darkgray-100 dark:focus:text-darkgray-900 dark:hover:text-darkgray-900 bg-default hover:border-empthasis focus:border-gray-900"
)}> )}>
<div className="flex w-full grow-0 items-center gap-1 overflow-x-hidden"> <div className="flex w-full grow-0 items-center gap-1 overflow-x-hidden">
<> <>

2
packages/ui/components/form/toggleGroup/BooleanToggleGroup.tsx
View File

@ -40,7 +40,7 @@ export const BooleanToggleGroup = function BooleanToggleGroup({
value={yesNoValue} value={yesNoValue}
type="single" type="single"
disabled={disabled} disabled={disabled}
className="flex space-x-2 rounded-md border border-gray-200 p-1 rtl:space-x-reverse" className="flex space-x-2 rounded-md border border-subtle p-1 rtl:space-x-reverse"
onValueChange={(yesNoValue: "yes" | "no") => { onValueChange={(yesNoValue: "yes" | "no") => {
setYesNoValue(yesNoValue); setYesNoValue(yesNoValue);
onValueChange(boolean(yesNoValue)); onValueChange(boolean(yesNoValue));

2
packages/ui/components/form/toggleGroup/ToggleGroup.tsx
View File

@ -25,7 +25,7 @@ export const ToggleGroup = ({ options, onValueChange, isFullWidth, ...props }: T
{...props} {...props}
onValueChange={setValue} onValueChange={setValue}
className={classNames( className={classNames(
"dark:border-darkgray-200 relative inline-flex rounded-md border border-gray-200 p-1", "dark:border-darkgray-200 relative inline-flex rounded-md border border-subtle p-1",
props.className, props.className,
isFullWidth && "w-full" isFullWidth && "w-full"
)}> )}>

2
packages/ui/components/popover/MeetingTimeInTimezones.tsx
View File

@ -69,7 +69,7 @@ const MeetingTimeInTimezones = ({
<Popover.Content <Popover.Content
onClick={preventBubbling} onClick={preventBubbling}
side="top" side="top"
className="popover-content slideInBottom border-5 bg-brand-default text-inverted rounded-md border-gray-200 p-3 text-sm shadow-sm"> className="popover-content slideInBottom border-5 bg-brand-default text-inverted rounded-md border-subtle p-3 text-sm shadow-sm">
{times.map((time) => ( {times.map((time) => (
<span className="mt-2 block first:mt-0" key={time.timezone}> <span className="mt-2 block first:mt-0" key={time.timezone}>
<span className="inline-flex align-baseline"> <span className="inline-flex align-baseline">

2
packages/ui/form/radio-area/Radio.tsx
View File

@ -10,7 +10,7 @@ export const Radio = (props: RadioGroupPrimitive.RadioGroupItemProps & { childre
<RadioGroupPrimitive.Item <RadioGroupPrimitive.Item
{...props} {...props}
className={classNames( className={classNames(
"hover:bg-subtle border-default mt-0.5 h-4 w-4 flex-shrink-0 rounded-full border focus:ring-2 focus:ring-gray-900", "hover:bg-subtle border-default mt-0.5 h-4 w-4 flex-shrink-0 rounded-full border focus:ring-2 focus:ring-empthasis",
props.disabled && "opacity-60" props.disabled && "opacity-60"
)}> )}>
{props.children} {props.children}