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">
{embeds.map((embed, index) => (
<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}
data-testid={embed.type}
onClick={() => {

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

@ -144,7 +144,7 @@ export default function ImageUploader({
</div>
)}
{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
onInput={onInputFile}
type="file"

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

@ -181,7 +181,7 @@ function ConnectedCalendarsList(props: Props) {
/>
</div>
}>
<div className="border-t border-gray-200">
<div className="border-t border-subtle">
{!fromOnboarding && (
<>
<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 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="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" />
<FiPlus
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() {
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 />
@ -43,7 +43,7 @@ export const SelectSkeletonLoader = ({ className }: { className?: string }) => {
return (
<li
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
)}>
<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() {
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 />

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

@ -165,7 +165,7 @@ export const SlotPicker = ({
isLoading={isLoading}
className={classNames(
"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)}
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 && (
<div
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]",
recurringEventCount && "xl:w-[380px] xl:min-w-[380px]"
)}>
@ -183,7 +183,7 @@ const AvailabilityPage = ({ profile, eventType, ...restProps }: Props) => {
type="number"
min="1"
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}
onChange={(event) => {
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 (
<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">
{debugMap.map(([key, value]) => {
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" />
</DropdownMenuTrigger>
<DropdownMenuContent style={{ minWidth: "200px" }}>
<DropdownMenuItem className="focus:ring-gray-100">
<DropdownMenuItem className="focus:ring-muted">
<DropdownItem
target="_blank"
type="button"
@ -273,7 +273,7 @@ function EventTypeSingleLayout({
{t("preview")}
</DropdownItem>
</DropdownMenuItem>
<DropdownMenuItem className="focus:ring-gray-100">
<DropdownMenuItem className="focus:ring-muted">
<DropdownItem
type="button"
StartIcon={FiLink}
@ -284,7 +284,7 @@ function EventTypeSingleLayout({
{t("copy_link")}
</DropdownItem>
</DropdownMenuItem>
<DropdownMenuItem className="focus:ring-gray-100">
<DropdownMenuItem className="focus:ring-muted">
<DropdownItem
type="button"
color="destructive"
@ -339,7 +339,7 @@ function EventTypeSingleLayout({
<div className="w-full ltr:mr-2 rtl:ml-2">
<div
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"
)}>
{children}

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

@ -11,7 +11,7 @@ function SkeletonLoader() {
<SkeletonText className="h-4 w-24" />
</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 />

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

@ -44,11 +44,11 @@ const ConnectedCalendarItem = (prop: IConnectedCalendarItem) => {
{/* <Button
color="minimal"
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")}
</Button> */}
</div>
<div className="h-[1px] w-full border-b border-gray-200" />
<div className="h-[1px] w-full border-b border-subtle" />
<div>
<ul className="p-4">
{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.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
key={firstCalendar.integration.title}
name={firstCalendar.integration.title}
@ -55,7 +55,7 @@ const ConnectedCalendars = (props: IConnectCalendarsProps) => {
{/* Connect calendars list */}
{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.items.map((item) => (
<li key={item.title}>
@ -73,7 +73,7 @@ const ConnectedCalendars = (props: IConnectCalendarsProps) => {
)}
{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) => {
return (
<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"
id="avatar"
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}
/>
<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")}
</Button>
<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>
</div>
{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 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}
</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 className="min-w-0 flex-1">
<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="absolute inset-0" aria-hidden="true" />
{t("acquire_commercial_license")}
@ -96,7 +96,7 @@ export default function Custom404() {
</li>
</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">
<Link
href={`${DEVELOPER_DOCS}/self-hosting/installation`}
@ -108,7 +108,7 @@ export default function Custom404() {
</div>
<div className="min-w-0 flex-1">
<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" />
{t("prisma_studio_tip")}
</span>
@ -153,7 +153,7 @@ export default function Custom404() {
</div>
<div className="min-w-0 flex-1">
<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" />
Slack
</span>
@ -226,7 +226,7 @@ export default function Custom404() {
</div>
<div className="min-w-0 flex-1">
<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="absolute inset-0" aria-hidden="true" />
{t("register")} <strong className="text-green-500">{username}</strong>
@ -243,7 +243,7 @@ export default function Custom404() {
</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) => (
<li key={linkIdx} className="px-4 py-2">
<Link
@ -256,7 +256,7 @@ export default function Custom404() {
</div>
<div className="min-w-0 flex-1">
<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" />
{link.title}
</span>
@ -302,7 +302,7 @@ export default function Custom404() {
</div>
<div className="min-w-0 flex-1">
<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" />
Slack
</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) => (
<li
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" />
<Link
href={getUsernameSlugLink({ users: props.users, slug: type.slug })}
@ -130,7 +130,7 @@ export default function User(props: inferSSRProps<typeof getServerSideProps> & E
className={classNames(
shouldAlignCentrally ? "mx-auto" : "",
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"
)}>
@ -156,7 +156,7 @@ export default function User(props: inferSSRProps<typeof getServerSideProps> & E
<div
className={classNames(
"rounded-md ",
!isEventListEmpty && "dark:border-darkgray-300 border border-gray-200"
!isEventListEmpty && "dark:border-darkgray-300 border border-subtle"
)}
data-testid="event-types">
{user.away ? (
@ -175,7 +175,7 @@ export default function User(props: inferSSRProps<typeof getServerSideProps> & E
<div
key={type.id}
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" />
{/* 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">

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

@ -259,7 +259,7 @@ const IntegrationsContainer = ({
);
}
return (
<div className="rounded-md border border-gray-200 p-7">
<div className="rounded-md border border-subtle p-7">
<ShellSubHeading
title={t(variant || "other")}
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 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}>
{schedules.map((schedule) => (
<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())
: "")
}
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
className="-mt-1.5 inline-block h-4 w-4"
fill="currentColor"
@ -682,7 +682,7 @@ export default function Success(props: SuccessProps) {
? "&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">
<svg
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)
: "")
}
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">
<svg
className="mr-1 -mt-1.5 inline-block h-4 w-4"
@ -722,7 +722,7 @@ export default function Success(props: SuccessProps) {
</Link>
<Link
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"}>
<svg
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">
<WipeMyCalActionButton bookingStatus={status} bookingsEmpty={isEmpty} />
<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">
<tbody className="bg-default divide-y divide-gray-200" data-testid="today-bookings">
<Fragment>
@ -142,7 +142,7 @@ export default function Bookings() {
</div>
)}
<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">
<tbody className="bg-default divide-y divide-gray-200" data-testid="bookings">
{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 className="flex-shrink-0 pt-3 sm:ml-auto sm:pt-0 sm:pl-3">{children}</div>
</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>
<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>
<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")}>
Preview
</Button> */}
<hr className="my-8 border border-gray-200" />
<hr className="my-8 border border-subtle" />
<Controller
name="hideBranding"
control={formMethods.control}

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

@ -84,8 +84,8 @@ const CalendarsView = () => {
success={({ data }) => {
return data.connectedCalendars.length ? (
<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-default flex h-9 w-9 items-center justify-center rounded-md border-2 border-gray-200 p-[6px]">
<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-subtle p-[6px]">
<FiCalendar className="h-6 w-6" />
</div>
@ -171,7 +171,7 @@ const CalendarsView = () => {
/>
</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>
<ul className="space-y-2 p-4">
{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>
{/* 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">
{t("invalid_password_hint", { passwordLength: passwordMinLength })}
</p>
<div className="mt-8 border-t border-gray-200 py-8">
<div className="mt-8 border-t border-subtle py-8">
<SettingsToggle
title={t("session_timeout")}
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]);
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) => (
<li
key={index}
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"
)}>
<div className="px-6 py-4 ">
@ -116,7 +116,7 @@ function TeamPage({ team }: TeamPageProps) {
<div>
<div className="relative mt-12">
<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 className="relative flex justify-center">
<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>();
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="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 */}

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

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

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

@ -370,7 +370,7 @@ function SingleForm({ form, appUrl, Page }: SingleFormComponentProps) {
</>
)}
</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} />
<Page hookForm={hookForm} form={form} appUrl={appUrl} />
</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 }) {
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>
<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();
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">
{t("no_availability_in_month", { month: month })}
</h4>

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

@ -56,7 +56,7 @@ export function Calendar(props: CalendarComponentProps) {
containerRef={container}
/> */}
<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 ">
<HorizontalLines
hours={hours}

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

@ -3,7 +3,7 @@ import { SkeletonText } from "@calcom/ui";
function SkeletonLoaderTeamList() {
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 />

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

@ -34,7 +34,7 @@ export default function TeamAvailabilityScreen(props: Props) {
if (!member) 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
teamId={props.team?.id as number}
memberId={member.id}
@ -62,7 +62,7 @@ export default function TeamAvailabilityScreen(props: Props) {
return (
<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">
<span className="text-default text-sm font-medium">Date</span>
<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">
<Button
type="button"
className="mr-3 border-gray-700"
className="mr-3 border-empthasis"
variant="icon"
color="secondary"
onClick={declineInvite}
@ -97,7 +97,7 @@ export default function TeamInviteListItem(props: Props) {
/>
<Button
type="button"
className="border-gray-700"
className="border-empthasis"
variant="icon"
color="secondary"
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 <></>;
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
teamId={props.team?.id as number}
memberId={member.id}
@ -62,7 +62,7 @@ export default function TeamAvailabilityScreen(props: Props) {
return (
<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">
<span className="text-default text-sm font-medium">Date</span>
<DatePicker

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

@ -133,7 +133,7 @@ const ProfileView = () => {
/>
</div>
<hr className="my-8 border-gray-200" />
<hr className="my-8 border-subtle" />
<div className="mb-6 flex items-center text-sm">
<div>
<p className="font-semibold">{t("custom_brand_colors")}</p>
@ -171,7 +171,7 @@ const ProfileView = () => {
)}
/>
</div>
<hr className="my-8 border-gray-200" />
<hr className="my-8 border-subtle" />
<div className="flex flex-col gap-8">
<div className="relative flex items-start">
@ -229,7 +229,7 @@ const ProfileView = () => {
</Button>
</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>
</div>
)}

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

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

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

@ -181,7 +181,7 @@ const ProfileView = () => {
/>
</div>
<hr className="my-8 border-gray-200" />
<hr className="my-8 border-subtle" />
<Controller
control={form.control}
@ -276,7 +276,7 @@ const ProfileView = () => {
</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>
{team?.membership.role === "OWNER" ? (

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

@ -98,7 +98,7 @@ const WorkflowListItem = (props: ItemProps) => {
});
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">
{getActionIcon(
workflow.steps,

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

@ -13,7 +13,7 @@ export default SkeletonLoader;
function SkeletonItem() {
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">
<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() {
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 />

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
type="button"
StartIcon={FiTrash2}
@ -142,11 +142,11 @@ export default function WorkflowDetailsPage(props: Props) {
onClick={() => setDeleteDialogOpen(true)}>
{t("delete_workflow")}
</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>
{/* 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") && (
<div>
<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 (
<>
{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">
{workflows.map((workflow) => (
<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 (
<>
<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="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
@ -216,7 +216,7 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) {
<div className="text-default text-sm">{t("when_something_happens")}</div>
</div>
</div>
<div className="my-7 border-t border-gray-200" />
<div className="my-7 border-t border-subtle" />
<Label>{t("when")}</Label>
<Controller
name="trigger"
@ -284,7 +284,7 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) {
<FiArrowDown className="text-subtle stroke-[1.5px] text-3xl" />
</div>
<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="flex">
<div className="w-full">
@ -332,7 +332,7 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) {
</Dropdown>
</div>
</div>
<div className="my-7 border-t border-gray-200" />
<div className="my-7 border-t border-subtle" />
<div>
<Label>{t("do_this")}</Label>
<Controller

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

@ -53,7 +53,7 @@ const DateOverrideList = ({
};
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) => (
<li key={item.id} className="flex justify-between border-b px-5 py-4 last:border-b-0">
<div>

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

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

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

@ -427,7 +427,7 @@ function ShellHeader() {
const { t, isLocaleReady } = useLocale();
return (
<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 && (
<a href="javascript:history.back()">
<FiArrowLeft className="mr-7" />

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

@ -649,7 +649,7 @@ const MobileNavigation = () => {
<>
<nav
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"
)}>
{mobileNavigationBottomItems.map((item) => (
@ -754,7 +754,7 @@ function SideBar() {
</div>
</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 */}
<Link href="/event-types" className="text-center md:inline lg:hidden">
@ -879,7 +879,7 @@ function TopNav() {
<>
<nav
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">
<Logo />
</Link>

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

@ -41,7 +41,7 @@ export function AppCard({ app, credentials, searchText }: AppCardProps) {
}, [app.name, searchText]);
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">
<img src={app.logo} alt={app.name + " Logo"} className="mb-4 h-12 w-12 rounded-sm" />
</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 }} />
{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 />

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

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

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

@ -86,7 +86,7 @@ const buttonClasses = cva(
disabled: true,
color: "secondary",
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,
@ -98,7 +98,7 @@ const buttonClasses = cva(
disabled: [undefined, false],
color: "secondary",
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
{
@ -117,7 +117,7 @@ const buttonClasses = cva(
disabled: [undefined, false],
color: "minimal",
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
{

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

@ -46,7 +46,7 @@ const cardTypeByVariant = {
},
SidebarCard: {
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",
description: "text-xs text-default line-clamp-2",
},
@ -70,7 +70,7 @@ export function Card({
className={classNames(
containerProps?.className,
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}>
<div>

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

@ -28,7 +28,7 @@ export default function FormCard({
} & JSX.IntrinsicElements["div"]) {
className = classNames(
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 (

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

@ -1,6 +1,6 @@
const StepCard: React.FC<{ children: React.ReactNode }> = (props) => {
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}
</div>
);

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

@ -39,7 +39,7 @@ export const DropdownMenuContent = forwardRef<HTMLDivElement, DropdownMenuConten
{...props}
sideOffset={sideOffset}
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"
)}
ref={forwardedRef}>

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

@ -36,7 +36,7 @@ const SearchInput: React.FC<SearchInputProps> = ({
className={
classNames && 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
type="text"

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

@ -130,8 +130,8 @@ function Select<T extends Option>({
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",
isDisabled
? " dark:bg-darkgray-200 dark:border-darkgray-300 bg-subtle dark:text-subtle text-muted border-gray-200"
: "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: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-empthasis focus:border-gray-900"
)}>
<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}
type="single"
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") => {
setYesNoValue(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}
onValueChange={setValue}
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,
isFullWidth && "w-full"
)}>

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

@ -69,7 +69,7 @@ const MeetingTimeInTimezones = ({
<Popover.Content
onClick={preventBubbling}
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) => (
<span className="mt-2 block first:mt-0" key={time.timezone}>
<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
{...props}
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.children}