chore: replace old classNames (#8372)

apps/admin/app/(all)/(dashboard)/email/test-email-modal.tsx

@@ -85,7 +85,7 @@ export function SendTestEmailModal(props: Props) {
               leaveFrom="opacity-100 translate-y-0 sm:scale-100"
               leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             >
-              <Dialog.Panel className="relative transform rounded-lg bg-surface-1 p-5 px-4 text-left shadow-custom-shadow-md transition-all w-full sm:max-w-xl">
+              <Dialog.Panel className="relative transform rounded-lg bg-surface-1 p-5 px-4 text-left shadow-raised-200 transition-all w-full sm:max-w-xl">
                 <h3 className="text-16 font-medium leading-6 text-primary">
                   {sendEmailStep === ESendEmailSteps.SEND_EMAIL
                     ? "Send test email"

apps/admin/core/components/common/confirm-discard-modal.tsx

@@ -39,7 +39,7 @@ export function ConfirmDiscardModal(props: Props) {
               leaveFrom="opacity-100 translate-y-0 sm:scale-100"
               leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             >
-              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-surface-1 text-left shadow-custom-shadow-md transition-all sm:my-8 sm:w-[30rem]">
+              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-surface-1 text-left shadow-raised-200 transition-all sm:my-8 sm:w-[30rem]">
                 <div className="px-4 pb-4 pt-5 sm:p-6 sm:pb-4">
                   <div className="sm:flex sm:items-start">
                     <div className="mt-3 text-center sm:mt-0 sm:text-left">

apps/space/app/error.tsx

@@ -14,14 +14,14 @@ function ErrorPage() {
           <p className="mx-auto md:w-1/2 text-13 text-secondary">
             That crashed Plane, pun intended. No worries, though. Our engineers have been notified. If you have more
             details, please write to{" "}
-            <a href="mailto:support@plane.so" className="text-custom-primary">
+            <a href="mailto:support@plane.so" className="text-accent-primary">
               support@plane.so
             </a>{" "}
             or on our{" "}
             <a
               href="https://discord.com/invite/A92xrEGCge"
               target="_blank"
-              className="text-custom-primary"
+              className="text-accent-primary"
               rel="noopener noreferrer"
             >
               Discord

apps/web/ce/components/pages/editor/embed/issue-embed-upgrade-card.tsx

@@ -16,7 +16,7 @@ export function IssueEmbedUpgradeCard(props: any) {
     >
       <div className="flex items-center gap-4">
         <ProIcon className="flex-shrink-0 size-4" />
-        <p className="text-custom-text !text-14">
+        <p className="text-secondary !text-14">
           Embed and access issues in pages seamlessly, upgrade to Plane Pro now.
         </p>
       </div>

apps/web/core/components/account/deactivate-account-modal.tsx

@@ -87,7 +87,7 @@ export function DeactivateAccountModal(props: Props) {
               leaveFrom="opacity-100 translate-y-0 sm:scale-100"
               leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             >
-              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-surface-1 text-left shadow-custom-shadow-md transition-all sm:my-8 sm:w-[40rem]">
+              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-surface-1 text-left shadow-raised-200 transition-all sm:my-8 sm:w-[40rem]">
                 <div className="px-4 pb-4 pt-5 sm:p-6 sm:pb-4">
                   <div className="">
                     <div className="flex items-start gap-x-4">

apps/web/core/components/automation/select-month-modal.tsx

@@ -68,7 +68,7 @@ export function SelectMonthModal({ type, initialValues, isOpen, handleClose, han
               leaveFrom="opacity-100 translate-y-0 sm:scale-100"
               leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             >
-              <Dialog.Panel className="relative transform rounded-lg bg-surface-1 px-4 pb-4 pt-5 text-left shadow-custom-shadow-md transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6">
+              <Dialog.Panel className="relative transform rounded-lg bg-surface-1 px-4 pb-4 pt-5 text-left shadow-raised-200 transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6">
                 <form onSubmit={handleSubmit(onSubmit)}>
                   <div>
                     <Dialog.Title as="h3" className="text-16 font-medium leading-6 text-primary">

apps/web/core/components/common/latest-feature-block.tsx

@@ -21,16 +21,14 @@ export function LatestFeatureBlock() {
       </div>
       <div
         className={`mx-auto mt-8 overflow-hidden rounded-md border border-subtle object-cover sm:h-52 sm:w-96 ${
-          resolvedTheme === "dark" ? "bg-surface-1" : "bg-custom-primary-70"
+          resolvedTheme === "dark" ? "bg-surface-1" : "bg-layer-2"
         }`}
       >
         <div className="h-[90%]">
           <img
             src={latestFeatures}
             alt="Plane Work items"
-            className={`-mt-2 ml-10 h-full rounded-md ${
-              resolvedTheme === "dark" ? "bg-surface-1" : "bg-custom-primary-70"
-            }`}
+            className={`-mt-2 ml-10 h-full rounded-md ${resolvedTheme === "dark" ? "bg-surface-1" : "bg-layer-2"}`}
           />
         </div>
       </div>

apps/web/core/components/core/filters/date-filter-modal.tsx

@@ -73,7 +73,7 @@ export function DateFilterModal({ title, handleClose, isOpen, onSelect }: Props)
               leaveFrom="opacity-100 translate-y-0 sm:scale-100"
               leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             >
-              <Dialog.Panel className="relative flex transform rounded-lg bg-surface-1 px-5 py-8 text-left shadow-custom-shadow-md transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6">
+              <Dialog.Panel className="relative flex transform rounded-lg bg-surface-1 px-5 py-8 text-left shadow-raised-200 transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6">
                 <form className="space-y-4">
                   <div className="flex w-full justify-between">
                     <Controller

apps/web/core/components/core/image-picker-popover.tsx

@@ -303,7 +303,7 @@ export const ImagePickerPopover = observer(function ImagePickerPopover(props: Pr
                     <div className="flex w-full flex-1 items-center gap-3">
                       <div
                         {...getRootProps()}
-                        className={`relative grid h-full w-full cursor-pointer place-items-center rounded-lg p-12 text-center focus:outline-none focus:ring-2 focus:ring-custom-primary focus:ring-offset-2 ${
+                        className={`relative grid h-full w-full cursor-pointer place-items-center rounded-lg p-12 text-center focus:outline-none focus:ring-2 focus:ring-accent-strong focus:ring-offset-2 ${
                           (image === null && isDragActive) || !value
                             ? "border-2 border-dashed border-subtle hover:bg-surface-2"
                             : ""

apps/web/core/components/core/modals/bulk-delete-issues-modal.tsx

@@ -163,7 +163,7 @@ export const BulkDeleteIssuesModal = observer(function BulkDeleteIssuesModal(pro
             leaveTo="opacity-0 scale-95"
           >
             <Dialog.Panel className="relative flex w-full items-center justify-center ">
-              <div className="w-full max-w-2xl transform divide-y divide-subtle-1 divide-opacity-10 rounded-lg bg-surface-1 shadow-custom-shadow-md transition-all">
+              <div className="w-full max-w-2xl transform divide-y divide-subtle-1 divide-opacity-10 rounded-lg bg-surface-1 shadow-raised-200 transition-all">
                 <form>
                   <Combobox
                     onChange={(val: string) => {

apps/web/core/components/core/modals/change-email-modal.tsx

@@ -152,7 +152,7 @@ export const ChangeEmailModal = observer(function ChangeEmailModal(props: Props)
               leaveFrom="opacity-100 translate-y-0 sm:scale-100"
               leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             >
-              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-surface-1 px-4 text-left shadow-custom-shadow-md transition-all sm:my-8 sm:w-[30rem]">
+              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-surface-1 px-4 text-left shadow-raised-200 transition-all sm:my-8 sm:w-[30rem]">
                 <div className="py-4 space-y-0">
                   <Dialog.Title as="h3" className="text-16 font-medium leading-6 text-primary">
                     {changeEmailT("title")}

apps/web/core/components/core/modals/existing-issues-list-modal.tsx

@@ -156,7 +156,7 @@ export function ExistingIssuesListModal(props: Props) {
               leaveFrom="opacity-100 scale-100"
               leaveTo="opacity-0 scale-95"
             >
-              <Dialog.Panel className="relative mx-auto max-w-2xl transform rounded-lg bg-surface-1 shadow-custom-shadow-md transition-all">
+              <Dialog.Panel className="relative mx-auto max-w-2xl transform rounded-lg bg-surface-1 shadow-raised-200 transition-all">
                 <Combobox
                   as="div"
                   onChange={(val: ISearchIssueResponse) => {

apps/web/core/components/core/modals/gpt-assistant-popover.tsx

@@ -274,7 +274,7 @@ export function GptAssistantPopover(props: Props) {
               <>{responseActionButton}</>
             ) : (
               <>
-                <div className="flex items-start justify-center gap-2 text-13 text-custom-primary">
+                <div className="flex items-start justify-center gap-2 text-13 text-accent-primary">
                   <AlertCircle className="h-4 w-4" />
                   <p>By using this feature, you consent to sharing the message with a 3rd party service. </p>
                 </div>

apps/web/core/components/core/modals/user-image-upload-modal.tsx

@@ -113,7 +113,7 @@ export const UserImageUploadModal = observer(function UserImageUploadModal(props
               leaveFrom="opacity-100 translate-y-0 sm:scale-100"
               leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             >
-              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-surface-1 px-5 py-8 text-left shadow-custom-shadow-md transition-all sm:w-full sm:max-w-xl sm:p-6">
+              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-surface-1 px-5 py-8 text-left shadow-raised-200 transition-all sm:w-full sm:max-w-xl sm:p-6">
                 <div className="space-y-5">
                   <Dialog.Title as="h3" className="text-16 font-medium leading-6 text-primary">
                     Upload Image
@@ -122,7 +122,7 @@ export const UserImageUploadModal = observer(function UserImageUploadModal(props
                     <div className="flex items-center justify-center gap-3">
                       <div
                         {...getRootProps()}
-                        className={`relative grid h-80 w-80 cursor-pointer place-items-center rounded-lg p-12 text-center focus:outline-none focus:ring-2 focus:ring-custom-primary focus:ring-offset-2 ${
+                        className={`relative grid h-80 w-80 cursor-pointer place-items-center rounded-lg p-12 text-center focus:outline-none focus:ring-2 focus:ring-accent-strong focus:ring-offset-2 ${
                           (image === null && isDragActive) || !value
                             ? "border-2 border-dashed border-subtle hover:bg-surface-2"
                             : ""

apps/web/core/components/core/modals/workspace-image-upload-modal.tsx

@@ -126,7 +126,7 @@ export const WorkspaceImageUploadModal = observer(function WorkspaceImageUploadM
               leaveFrom="opacity-100 translate-y-0 sm:scale-100"
               leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             >
-              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-surface-1 px-5 py-8 text-left shadow-custom-shadow-md transition-all sm:w-full sm:max-w-xl sm:p-6">
+              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-surface-1 px-5 py-8 text-left shadow-raised-200 transition-all sm:w-full sm:max-w-xl sm:p-6">
                 <div className="space-y-5">
                   <Dialog.Title as="h3" className="text-16 font-medium leading-6 text-primary">
                     Upload image
@@ -135,7 +135,7 @@ export const WorkspaceImageUploadModal = observer(function WorkspaceImageUploadM
                     <div className="flex items-center justify-center gap-3">
                       <div
                         {...getRootProps()}
-                        className={`relative grid h-80 w-80 cursor-pointer place-items-center rounded-lg p-12 text-center focus:outline-none focus:ring-2 focus:ring-custom-primary focus:ring-offset-2 ${
+                        className={`relative grid h-80 w-80 cursor-pointer place-items-center rounded-lg p-12 text-center focus:outline-none focus:ring-2 focus:ring-accent-strong focus:ring-offset-2 ${
                           (image === null && isDragActive) || !value
                             ? "border-2 border-dashed border-subtle hover:bg-surface-2"
                             : ""

apps/web/core/components/cycles/archived-cycles/modal.tsx

@@ -94,7 +94,7 @@ export function ArchiveCycleModal(props: Props) {
               leaveFrom="opacity-100 translate-y-0 sm:scale-100"
               leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             >
-              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-surface-1 text-left shadow-custom-shadow-md transition-all sm:my-8 sm:w-full sm:max-w-lg">
+              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-surface-1 text-left shadow-raised-200 transition-all sm:my-8 sm:w-full sm:max-w-lg">
                 <div className="px-5 py-4">
                   <h3 className="text-18 font-medium 2xl:text-20">Archive cycle {cycleName}</h3>
                   <p className="mt-3 text-13 text-secondary">

apps/web/core/components/cycles/transfer-issues-modal.tsx

@@ -106,7 +106,7 @@ export const TransferIssuesModal = observer(function TransferIssuesModal(props:
               leaveFrom="opacity-100 translate-y-0 sm:scale-100"
               leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             >
-              <Dialog.Panel className="relative transform rounded-lg bg-surface-1 py-5 text-left shadow-custom-shadow-md transition-all sm:w-full sm:max-w-2xl">
+              <Dialog.Panel className="relative transform rounded-lg bg-surface-1 py-5 text-left shadow-raised-200 transition-all sm:w-full sm:max-w-2xl">
                 <div className="flex flex-col gap-4">
                   <div className="flex items-center justify-between px-5">
                     <div className="flex items-center gap-1">

apps/web/core/components/editor/sticky-editor/color-palette.tsx

@@ -66,7 +66,7 @@ export function ColorPalette(props: TProps) {
                 background_color: color.key,
               });
             }}
-            className="h-6 w-6 rounded-md hover:ring-2 hover:ring-custom-primary focus:outline-none focus:ring-2 focus:ring-custom-primary transition-all"
+            className="h-6 w-6 rounded-md hover:ring-2 hover:ring-accent-strong focus:outline-none focus:ring-2 focus:ring-accent-strong transition-all"
             style={{
               backgroundColor: color.backgroundColor,
             }}

apps/web/core/components/estimates/radio-select.tsx

@@ -62,7 +62,7 @@ export function RadioInput({
               id={`${name}_${index}`}
               name={name}
               className={cn(
-                `group flex flex-shrink-0 size-5 items-center justify-center rounded-full border border-strong-1 bg-custom-background-500 cursor-pointer`,
+                `group flex flex-shrink-0 size-5 items-center justify-center rounded-full border border-strong-1 bg-layer-2 cursor-pointer`,
                 selected === value ? `bg-accent-primary/80 border-accent-strong ` : ``,
                 disabled ? `bg-layer-1 border-subtle cursor-not-allowed` : ``,
                 inputButtonClassName

apps/web/core/components/exporter/export-modal.tsx

@@ -130,7 +130,7 @@ export const Exporter = observer(function Exporter(props: Props) {
               leaveFrom="opacity-100 translate-y-0 sm:scale-100"
               leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             >
-              <Dialog.Panel className="relative transform rounded-lg bg-surface-1 text-left shadow-custom-shadow-md transition-all sm:my-8 sm:w-full sm:max-w-xl">
+              <Dialog.Panel className="relative transform rounded-lg bg-surface-1 text-left shadow-raised-200 transition-all sm:my-8 sm:w-full sm:max-w-xl">
                 <div className="flex flex-col gap-6 gap-y-4 p-6">
                   <div className="flex w-full items-center justify-start gap-6">
                     <span className="flex items-center justify-start">

apps/web/core/components/gantt-chart/helpers/blockResizables/left-resizable.tsx

@@ -33,7 +33,7 @@ export const LeftResizable = observer(function LeftResizable(props: LeftResizabl
     <>
       {(isHovering || isLeftResizing) && dateString && (
         <div className="absolute flex text-11 font-regular text-tertiary h-full w-32 -left-36 justify-end items-center">
-          <div className="px-2 py-1 bg-custom-primary-20 rounded-sm">{dateString}</div>
+          <div className="px-2 py-1 bg-accent-subtle rounded-sm">{dateString}</div>
         </div>
       )}
       <div

apps/web/core/components/gantt-chart/helpers/blockResizables/right-resizable.tsx

@@ -33,7 +33,7 @@ export const RightResizable = observer(function RightResizable(props: RightResiz
     <>
       {(isHovering || isRightResizing) && dateString && (
         <div className="z-[10] absolute flex text-11 font-regular text-tertiary h-full w-32 -right-36 justify-start items-center">
-          <div className="px-2 py-1 bg-custom-primary-20 rounded-sm">{dateString}</div>
+          <div className="px-2 py-1 bg-accent-subtle rounded-sm">{dateString}</div>
         </div>
       )}
       <div

apps/web/core/components/inbox/modals/select-duplicate.tsx

@@ -150,7 +150,7 @@ export function SelectDuplicateInboxIssueModal(props: Props) {
                 leaveFrom="opacity-100 scale-100"
                 leaveTo="opacity-0 scale-95"
               >
-                <Dialog.Panel className="relative mx-auto max-w-2xl transform rounded-lg bg-surface-1 shadow-custom-shadow-md transition-all">
+                <Dialog.Panel className="relative mx-auto max-w-2xl transform rounded-lg bg-surface-1 shadow-raised-200 transition-all">
                   <Combobox value={value} onChange={handleSubmit}>
                     <div className="relative m-1">
                       <Search

apps/web/core/components/inbox/modals/snooze-issue-modal.tsx

@@ -45,7 +45,7 @@ export function InboxIssueSnoozeModal(props: InboxIssueSnoozeModalProps) {
               leaveFrom="opacity-100 translate-y-0 sm:scale-100"
               leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             >
-              <Dialog.Panel className="relative flex transform rounded-lg bg-surface-1 px-5 py-8 text-left shadow-custom-shadow-md transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6">
+              <Dialog.Panel className="relative flex transform rounded-lg bg-surface-1 px-5 py-8 text-left shadow-raised-200 transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6">
                 <div className="flex h-full w-full flex-col gap-y-1">
                   <Calendar
                     className="rounded-md border border-subtle p-3"

apps/web/core/components/inbox/sidebar/inbox-list-item.tsx

@@ -59,7 +59,7 @@ export const InboxIssueListItem = observer(function InboxIssueListItem(props: In
       >
         <Row
           className={cn(
-            `flex flex-col gap-2 relative border border-t-transparent border-l-transparent border-r-transparent border-b-subtle-1 py-4 hover:bg-custom-primary/5 cursor-pointer transition-all`,
+            `flex flex-col gap-2 relative border border-t-transparent border-l-transparent border-r-transparent border-b-subtle-1 py-4 hover:bg-accent-primary/5 cursor-pointer transition-all`,
             { "border-accent-strong border": selectedInboxIssueId === issue.id }
           )}
         >

apps/web/core/components/integration/delete-import-modal.tsx

@@ -89,7 +89,7 @@ export function DeleteImportModal({ isOpen, handleClose, data }: Props) {
               leaveFrom="opacity-100 translate-y-0 sm:scale-100"
               leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             >
-              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-surface-1 text-left shadow-custom-shadow-md transition-all sm:my-8 sm:w-full sm:max-w-2xl">
+              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-surface-1 text-left shadow-raised-200 transition-all sm:my-8 sm:w-full sm:max-w-2xl">
                 <div className="flex flex-col gap-6 p-6">
                   <div className="flex w-full items-center justify-start gap-6">
                     <span className="place-items-center rounded-full bg-red-500/20 p-4">

apps/web/core/components/issues/archive-issue-modal.tsx

@@ -86,7 +86,7 @@ export function ArchiveIssueModal(props: Props) {
               leaveFrom="opacity-100 translate-y-0 sm:scale-100"
               leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             >
-              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-surface-1 text-left shadow-custom-shadow-md transition-all sm:my-8 sm:w-full sm:max-w-lg">
+              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-surface-1 text-left shadow-raised-200 transition-all sm:my-8 sm:w-full sm:max-w-lg">
                 <div className="px-5 py-4">
                   <h3 className="text-18 font-medium 2xl:text-20">
                     {t("issue.archive.label")} {projectDetails?.identifier} {issue.sequence_id}

apps/web/core/components/issues/attachment/attachment-upload.tsx

@@ -45,7 +45,7 @@ export const IssueAttachmentUpload = observer(function IssueAttachmentUpload(pro
   return (
     <div
       {...getRootProps()}
-      className={`flex h-[60px] items-center justify-center rounded-md border-2 border-dashed bg-custom-primary/5 px-4 text-11 text-accent-primary ${
+      className={`flex h-[60px] items-center justify-center rounded-md border-2 border-dashed bg-accent-primary/5 px-4 text-11 text-accent-primary ${
         isDragActive ? "border-accent-strong bg-accent-primary/10" : "border-subtle"
       } ${isDragReject ? "bg-red-100" : ""} ${disabled ? "cursor-not-allowed" : "cursor-pointer"}`}
     >

apps/web/core/components/issues/confirm-issue-discard.tsx

@@ -54,7 +54,7 @@ export function ConfirmIssueDiscard(props: Props) {
               leaveFrom="opacity-100 translate-y-0 sm:scale-100"
               leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             >
-              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-surface-1 text-left shadow-custom-shadow-md transition-all sm:my-8 sm:w-[40rem]">
+              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-surface-1 text-left shadow-raised-200 transition-all sm:my-8 sm:w-[40rem]">
                 <div className="px-4 pb-4 pt-5 sm:p-6 sm:pb-4">
                   <div className="sm:flex sm:items-start">
                     <div className="mt-3 text-center sm:mt-0 sm:text-left">

apps/web/core/components/issues/issue-detail-widgets/sub-issues/display-filters.tsx

@@ -47,7 +47,7 @@ export const SubIssueDisplayFilters = observer(function SubIssueDisplayFilters(p
             <div
               className={cn(
                 "p-1 rounded-sm  relative transition-all duration-200",
-                isFilterApplied && "bg-custom-primary-60/20"
+                isFilterApplied && "bg-accent-primary/20"
               )}
             >
               {isFilterApplied && <span className="p-1 rounded-full bg-accent-primary absolute -top-1 -right-1" />}

apps/web/core/components/issues/issue-detail-widgets/sub-issues/filters.tsx

@@ -45,7 +45,7 @@ export const SubIssueFilters = observer(function SubIssueFilters(props: TSubIssu
           <div
             className={cn(
               "p-1 rounded-sm  relative transition-all duration-200",
-              isFilterApplied && "bg-custom-primary-60/20"
+              isFilterApplied && "bg-accent-primary/20"
             )}
           >
             {isFilterApplied && <span className="p-1 rounded-full bg-accent-primary absolute -top-1 -right-1" />}

apps/web/core/components/issues/issue-layouts/group-drag-overlay.tsx

@@ -63,7 +63,7 @@ export function GroupDragOverlay(props: Props) {
         <div
           className={cn("p-3 my-8 flex flex-col rounded-sm items-center", {
             "text-secondary": shouldOverlayBeVisible,
-            "text-custom-text-error": isDropDisabled,
+            "text-danger-secondary": isDropDisabled,
           })}
         >
           {dropErrorMessage ? (

apps/web/core/components/issues/issue-layouts/spreadsheet/columns/sub-issue-column.tsx

@@ -36,7 +36,7 @@ export const SpreadsheetSubIssueColumn = observer(function SpreadsheetSubIssueCo
     <Row
       onClick={subIssueCount ? redirectToIssueDetail : () => {}}
       className={cn(
-        "flex h-11 w-full items-center border-b-[0.5px] border-subtle py-1 text-11 hover:bg-surface-2 group-[.selected-issue-row]:bg-accent-primary/5 group-[.selected-issue-row]:hover:bg-custom-primary-90",
+        "flex h-11 w-full items-center border-b-[0.5px] border-subtle py-1 text-11 hover:bg-surface-2 group-[.selected-issue-row]:bg-accent-primary/5 group-[.selected-issue-row]:hover:bg-accent-primary",
         {
           "cursor-pointer": subIssueCount,
         }

apps/web/core/components/issues/parent-issues-list-modal.tsx

@@ -110,7 +110,7 @@ export function ParentIssuesListModal({
               leaveFrom="opacity-100 scale-100"
               leaveTo="opacity-0 scale-95"
             >
-              <Dialog.Panel className="relative mx-auto max-w-2xl transform rounded-lg bg-surface-1 shadow-custom-shadow-md transition-all">
+              <Dialog.Panel className="relative mx-auto max-w-2xl transform rounded-lg bg-surface-1 shadow-raised-200 transition-all">
                 <Combobox
                   value={value}
                   onChange={(val) => {

apps/web/core/components/modules/archived-modules/modal.tsx

@@ -80,7 +80,7 @@ export function ArchiveModuleModal(props: Props) {
               leaveFrom="opacity-100 translate-y-0 sm:scale-100"
               leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             >
-              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-surface-1 text-left shadow-custom-shadow-md transition-all sm:my-8 sm:w-full sm:max-w-lg">
+              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-surface-1 text-left shadow-raised-200 transition-all sm:my-8 sm:w-full sm:max-w-lg">
                 <div className="px-5 py-4">
                   <h3 className="text-18 font-medium 2xl:text-20">Archive module {moduleName}</h3>
                   <p className="mt-3 text-13 text-secondary">

apps/web/core/components/navigation/customize-navigation-dialog.tsx

@@ -268,7 +268,7 @@ export const CustomizeNavigationDialog = observer(function CustomizeNavigationDi
                       value="accordion"
                       checked={projectPreferences.navigationMode === "accordion"}
                       onChange={() => updateNavigationMode("accordion")}
-                      className="size-4 text-accent-primary focus:ring-custom-primary-100 mt-1"
+                      className="size-4 text-accent-primary focus:ring-accent-strong mt-1"
                     />
                     <div className="flex-1">
                       <div className="text-13 text-secondary">{t("accordion_navigation_control")}</div>
@@ -285,7 +285,7 @@ export const CustomizeNavigationDialog = observer(function CustomizeNavigationDi
                       value="horizontal"
                       checked={projectPreferences.navigationMode === "horizontal"}
                       onChange={() => updateNavigationMode("horizontal")}
-                      className="size-4 text-accent-primary focus:ring-custom-primary-100 mt-1"
+                      className="size-4 text-accent-primary focus:ring-accent-strong mt-1"
                     />
                     <div className="flex-1">
                       <div className="text-13 text-secondary">{t("horizontal_navigation_bar")}</div>
@@ -323,7 +323,7 @@ export const CustomizeNavigationDialog = observer(function CustomizeNavigationDi
                               "bg-surface-2 border",
                               "text-secondary",
                               parseInt(projectCountInput) >= 1
-                                ? "border-strong focus:border-accent-strong focus:ring-1 focus:ring-custom-primary-100"
+                                ? "border-strong focus:border-accent-strong focus:ring-1 focus:ring-accent-strong"
                                 : "border-red-500 focus:border-red-500 focus:ring-1 focus:ring-red-500"
                             )}
                           />

apps/web/core/components/onboarding/steps/profile/root.tsx

@@ -227,7 +227,7 @@ export const ProfileSetupStep = observer(function ProfileSetupStep({ handleStepC
                 onChange={(e) => onChange(e.target.value)}
                 autoFocus
                 className={cn(
-                  "w-full px-3 py-2 text-secondary border border-strong rounded-md bg-surface-1 focus:outline-none focus:ring-2 focus:ring-custom-primary-100 placeholder:text-placeholder focus:border-transparent transition-all duration-200",
+                  "w-full px-3 py-2 text-secondary border border-strong rounded-md bg-surface-1 focus:outline-none focus:ring-2 focus:ring-accent-strong placeholder:text-placeholder focus:border-transparent transition-all duration-200",
                   {
                     "border-strong": !errors.first_name,
                     "border-red-500": errors.first_name,

apps/web/core/components/onboarding/steps/workspace/create.tsx

@@ -179,7 +179,7 @@ export const WorkspaceCreateStep = observer(function WorkspaceCreateStep({
                   placeholder="Enter workspace name"
                   ref={ref}
                   className={cn(
-                    "w-full px-3 py-2 text-secondary border border-strong rounded-md bg-surface-1 focus:outline-none focus:ring-2 focus:ring-custom-primary-100 placeholder:text-placeholder focus:border-transparent transition-all duration-200",
+                    "w-full px-3 py-2 text-secondary border border-strong rounded-md bg-surface-1 focus:outline-none focus:ring-2 focus:ring-accent-strong placeholder:text-placeholder focus:border-transparent transition-all duration-200",
                     {
                       "border-strong": !errors.name,
                       "border-red-500": errors.name,
@@ -213,7 +213,7 @@ export const WorkspaceCreateStep = observer(function WorkspaceCreateStep({
             render={({ field: { value, ref, onChange } }) => (
               <div
                 className={cn(
-                  "flex items-center w-full px-3 py-2 text-secondary border border-strong rounded-md bg-surface-1 focus:outline-none focus:ring-2 focus:ring-custom-primary-100 focus:border-transparent transition-all duration-200",
+                  "flex items-center w-full px-3 py-2 text-secondary border border-strong rounded-md bg-surface-1 focus:outline-none focus:ring-2 focus:ring-accent-strong focus:border-transparent transition-all duration-200",
                   {
                     "border-strong": !errors.name,
                     "border-red-500": errors.name,

apps/web/core/components/onboarding/switch-account-modal.tsx

@@ -76,7 +76,7 @@ export function SwitchAccountModal(props: Props) {
               leaveFrom="opacity-100 translate-y-0 sm:scale-100"
               leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             >
-              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-surface-1 text-left shadow-custom-shadow-md transition-all sm:my-8 sm:w-[40rem]">
+              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-surface-1 text-left shadow-raised-200 transition-all sm:my-8 sm:w-[40rem]">
                 <div className="p-6 pb-1">
                   <div className="flex gap-x-4">
                     <div className="flex items-start">

apps/web/core/components/power-k/ui/modal/shortcuts-root.tsx

@@ -56,7 +56,7 @@ export function ShortcutsModal(props: Props) {
               leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             >
               <Dialog.Panel className="relative flex h-full items-center justify-center">
-                <div className="flex h-[61vh] w-full flex-col  space-y-4 overflow-hidden rounded-lg bg-surface-1 p-5 shadow-custom-shadow-md transition-all sm:w-[28rem]">
+                <div className="flex h-[61vh] w-full flex-col  space-y-4 overflow-hidden rounded-lg bg-surface-1 p-5 shadow-raised-200 transition-all sm:w-[28rem]">
                   <Dialog.Title as="h3" className="flex justify-between">
                     <span className="text-16 font-medium">Keyboard shortcuts</span>
                     <button type="button" onClick={handleClose}>

apps/web/core/components/power-k/ui/modal/wrapper.tsx

@@ -137,7 +137,7 @@ export const ProjectsAppPowerKModalWrapper = observer(function ProjectsAppPowerK
               leaveFrom="opacity-100 translate-y-0 sm:scale-100"
               leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             >
-              <Dialog.Panel className="relative flex w-full max-w-2xl transform flex-col items-center justify-center divide-y divide-subtle-1 divide-opacity-10 rounded-lg bg-surface-1 shadow-custom-shadow-md transition-all">
+              <Dialog.Panel className="relative flex w-full max-w-2xl transform flex-col items-center justify-center divide-y divide-subtle-1 divide-opacity-10 rounded-lg bg-surface-1 shadow-raised-200 transition-all">
                 <Command
                   filter={(i18nValue: string, search: string) => {
                     if (i18nValue === "no-results") return 1;

apps/web/core/components/project/confirm-project-member-remove.tsx

@@ -73,7 +73,7 @@ export const ConfirmProjectMemberRemove = observer(function ConfirmProjectMember
               leaveFrom="opacity-100 translate-y-0 sm:scale-100"
               leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             >
-              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-surface-1 text-left shadow-custom-shadow-md transition-all sm:my-8 sm:w-[40rem]">
+              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-surface-1 text-left shadow-raised-200 transition-all sm:my-8 sm:w-[40rem]">
                 <div className="bg-surface-1 px-4 pb-4 pt-5 sm:p-6 sm:pb-4">
                   <div className="sm:flex sm:items-start">
                     <div className="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">

apps/web/core/components/project/delete-project-modal.tsx

@@ -115,7 +115,7 @@ export function DeleteProjectModal(props: DeleteProjectModal) {
               leaveFrom="opacity-100 translate-y-0 sm:scale-100"
               leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             >
-              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-surface-1 text-left shadow-custom-shadow-md transition-all sm:my-8 sm:w-full sm:max-w-2xl">
+              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-surface-1 text-left shadow-raised-200 transition-all sm:my-8 sm:w-full sm:max-w-2xl">
                 <form onSubmit={handleSubmit(onSubmit)} className="flex flex-col gap-6 p-6">
                   <div className="flex w-full items-center justify-start gap-6">
                     <span className="place-items-center rounded-full bg-red-500/20 p-4">

apps/web/core/components/project/join-project-modal.tsx

@@ -65,7 +65,7 @@ export function JoinProjectModal(props: TJoinProjectModalProps) {
               leaveFrom="opacity-100 translate-y-0 sm:scale-100"
               leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             >
-              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-surface-1 px-5 py-8 text-left shadow-custom-shadow-md transition-all sm:w-full sm:max-w-xl sm:p-6">
+              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-surface-1 px-5 py-8 text-left shadow-raised-200 transition-all sm:w-full sm:max-w-xl sm:p-6">
                 <div className="space-y-5">
                   <Dialog.Title as="h3" className="text-16 font-medium leading-6 text-primary">
                     Join Project?

apps/web/core/components/project/leave-project-modal.tsx

@@ -134,7 +134,7 @@ export const LeaveProjectModal = observer(function LeaveProjectModal(props: ILea
               leaveFrom="opacity-100 translate-y-0 sm:scale-100"
               leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             >
-              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-surface-1 text-left shadow-custom-shadow-md transition-all sm:my-8 sm:w-full sm:max-w-2xl">
+              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-surface-1 text-left shadow-raised-200 transition-all sm:my-8 sm:w-full sm:max-w-2xl">
                 <form onSubmit={handleSubmit(onSubmit)} className="flex flex-col gap-6 p-6">
                   <div className="flex w-full items-center justify-start gap-6">
                     <span className="place-items-center rounded-full bg-red-500/20 p-4">

apps/web/core/components/project/send-project-invitation-modal.tsx

@@ -208,7 +208,7 @@ export const SendProjectInvitationModal = observer(function SendProjectInvitatio
               leaveFrom="opacity-100 translate-y-0 sm:scale-100"
               leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             >
-              <Dialog.Panel className="relative transform rounded-lg bg-surface-1 p-5 text-left shadow-custom-shadow-md transition-all sm:w-full sm:max-w-2xl">
+              <Dialog.Panel className="relative transform rounded-lg bg-surface-1 p-5 text-left shadow-raised-200 transition-all sm:w-full sm:max-w-2xl">
                 <form onSubmit={handleSubmit(onSubmit)}>
                   <div className="space-y-5">
                     <Dialog.Title as="h3" className="text-16 font-medium leading-6 text-primary">
@@ -336,7 +336,7 @@ export const SendProjectInvitationModal = observer(function SendProjectInvitatio
                   <div className="mt-5 flex items-center justify-between gap-2">
                     <button
                       type="button"
-                      className="flex items-center gap-2 bg-transparent py-2 pr-3 text-13 font-medium text-accent-primary outline-custom-primary"
+                      className="flex items-center gap-2 bg-transparent py-2 pr-3 text-13 font-medium text-accent-primary outline-accent-strong"
                       onClick={appendField}
                     >
                       <Plus className="h-4 w-4" />

apps/web/core/components/project/settings/archive-project/archive-restore-modal.tsx

@@ -103,7 +103,7 @@ export function ArchiveRestoreProjectModal(props: Props) {
               leaveFrom="opacity-100 translate-y-0 sm:scale-100"
               leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             >
-              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-surface-1 text-left shadow-custom-shadow-md transition-all sm:my-8 sm:w-full sm:max-w-lg">
+              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-surface-1 text-left shadow-raised-200 transition-all sm:my-8 sm:w-full sm:max-w-lg">
                 <div className="px-5 py-4">
                   <h3 className="text-18 font-medium 2xl:text-20">
                     {archive ? "Archive" : "Restore"} {projectDetails.name}

apps/web/core/components/settings/mobile/nav.tsx

@@ -30,7 +30,7 @@ export const SettingsMobileNav = observer(function SettingsMobileNav(props: Prop
           {!sidebarCollapsed && <HamburgerContent isMobile />}
           <button
             type="button"
-            className="z-50  group flex-shrink-0 size-6 grid place-items-center rounded-sm border border-subtle transition-all bg-custom-background md:hidden"
+            className="z-50  group flex-shrink-0 size-6 grid place-items-center rounded-sm border border-subtle transition-all md:hidden"
             onClick={() => toggleSidebar()}
           >
             <Menu className="size-3.5 text-secondary transition-all group-hover:text-primary" />

apps/web/core/components/ui/empty-space.tsx

@@ -29,7 +29,7 @@ function EmptySpace({ title, description, children, Icon, link }: EmptySpaceProp
         {link ? (
           <div className="mt-6 flex">
             <Link href={link.href}>
-              <span className="text-13 font-medium text-accent-primary hover:text-custom-primary">
+              <span className="text-13 font-medium text-accent-primary hover:text-accent-primary">
                 {link.text}
                 <span aria-hidden="true"> &rarr;</span>
               </span>

apps/web/core/components/ui/integration-and-import-export-banner.tsx

@@ -10,7 +10,7 @@ export function IntegrationAndImportExportBanner({ bannerName, description }: Pr
     <div className="flex items-start gap-3 border-b border-subtle py-3.5">
       <h3 className="text-18 font-medium">{bannerName}</h3>
       {description && (
-        <div className="flex items-center gap-3 rounded-[10px] border border-accent-strong/75 bg-custom-primary/5 p-4 text-13 text-primary">
+        <div className="flex items-center gap-3 rounded-[10px] border border-accent-strong/75 bg-accent-primary/5 p-4 text-13 text-primary">
           <AlertCircle className="h-6 w-6 text-primary" />
           <p className="leading-5">{description}</p>
         </div>

apps/web/core/components/workspace/ConfirmWorkspaceMemberRemove.tsx

@@ -52,7 +52,7 @@ export const ConfirmWorkspaceMemberRemove = observer(function ConfirmWorkspaceMe
               leaveFrom="opacity-100 translate-y-0 sm:scale-100"
               leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             >
-              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-surface-1 text-left shadow-custom-shadow-md transition-all sm:my-8 sm:w-[40rem]">
+              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-surface-1 text-left shadow-raised-200 transition-all sm:my-8 sm:w-[40rem]">
                 <div className="px-4 pb-4 pt-5 sm:p-6 sm:pb-4">
                   <div className="sm:flex sm:items-start">
                     <div className="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">

apps/web/core/components/workspace/invite-modal/actions.tsx

@@ -38,7 +38,7 @@ export const InvitationModalActions = observer(function InvitationModalActions(p
       <button
         type="button"
         className={cn(
-          "flex items-center gap-1 bg-transparent py-2 pr-3 text-caption-md-medium text-accent-primary outline-custom-primary",
+          "flex items-center gap-1 bg-transparent py-2 pr-3 text-caption-md-medium text-accent-primary outline-accent-strong",
           {
             "cursor-not-allowed opacity-60": isInviteDisabled,
           }

packages/editor/src/core/extensions/custom-link/extension.tsx

@@ -124,7 +124,7 @@ export const CustomLinkExtension = Mark.create<LinkOptions, CustomLinkStorage>({
         target: "_blank",
         rel: "noopener noreferrer nofollow",
         class:
-          "text-accent-secondary underline underline-offset-[3px] hover:text-custom-primary-500 transition-colors cursor-pointer",
+          "text-accent-secondary underline underline-offset-[3px] hover:text-accent-primary transition-colors cursor-pointer",
       },
       validate: (url: string) => isValidHttpUrl(url).isValid,
     };

packages/propel/src/emoji-reaction/emoji-reaction.tsx

@@ -107,7 +107,7 @@ const EmojiReactionButton = React.forwardRef(function EmojiReactionButton(
         "inline-flex items-center justify-center rounded-full border border-dashed border-strong",
         "bg-surface-1 text-placeholder transition-all duration-200",
         "hover:border-accent-strong hover:text-accent-primary hover:bg-accent-primary/5",
-        "focus:outline-none focus:ring-2 focus:ring-custom-primary-100/20 focus:ring-offset-1",
+        "focus:outline-none focus:ring-2 focus:ring-accent-strong/20 focus:ring-offset-1",
         "h-6 w-6",
         className
       )}

packages/propel/src/toolbar/toolbar.tsx

@@ -142,7 +142,7 @@ const ToolbarSubmitButton = React.forwardRef(function ToolbarSubmitButton(
         ref={ref}
         className={cn(
           "inline-flex items-center justify-center gap-2 rounded-md px-2.5 py-1.5 text-11 font-medium transition-colors duration-200",
-          "focus:outline-none focus:ring-2 focus:ring-custom-primary-100/20 focus:ring-offset-2",
+          "focus:outline-none focus:ring-2 focus:ring-accent-strong/20 focus:ring-offset-2",
           "disabled:opacity-50 disabled:pointer-events-none",
           buttonVariants[variant],
           className

packages/ui/src/form-fields/checkbox.tsx

@@ -30,7 +30,7 @@ const Checkbox = React.forwardRef(function Checkbox(props: CheckboxProps, ref: R
         name={name}
         checked={checked}
         className={cn(
-          "appearance-none shrink-0 size-4 border rounded-[3px] focus:outline-1 focus:outline-offset-4 focus:outline-custom-primary-50 cursor-pointer",
+          "appearance-none shrink-0 size-4 border rounded-[3px] focus:outline-1 focus:outline-offset-4 focus:outline-accent-strong cursor-pointer",
           {
             "border-subtle bg-layer-1 cursor-not-allowed": disabled,
             "border-strong hover:border-strong-1 bg-transparent": !disabled,

packages/ui/src/form-fields/input.tsx

@@ -33,7 +33,7 @@ const Input = React.forwardRef(function Input(props: InputProps, ref: React.Forw
         "block rounded-md bg-layer-transparent text-13 placeholder-tertiary border-subtle-1 focus:outline-none",
         {
           "rounded-md border-[0.5px]": mode === "primary",
-          "rounded-sm border-none bg-transparent ring-0 transition-all focus:ring-1 focus:ring-custom-primary":
+          "rounded-sm border-none bg-transparent ring-0 transition-all focus:ring-1 focus:ring-accent-strong":
             mode === "transparent",
           "rounded-sm border-none bg-transparent ring-0": mode === "true-transparent",
           "border-red-500": hasError,

packages/ui/src/modals/modal-core.tsx

@@ -51,7 +51,7 @@ export function ModalCore(props: Props) {
             >
               <Dialog.Panel
                 className={cn(
-                  "relative transform rounded-lg bg-surface-1 text-left shadow-custom-shadow-md transition-all w-full",
+                  "relative transform rounded-lg bg-surface-1 text-left shadow-raised-200 transition-all w-full",
                   width,
                   className
                 )}