makeplane · vamsikrishnamathala · Dec 10, 2025 · Dec 10, 2025
diff --git a/apps/web/core/components/dropdowns/priority.tsx b/apps/web/core/components/dropdowns/priority.tsx
@@ -84,7 +84,7 @@ function BorderButton(props: ButtonProps) {
     >
       <div
         className={cn(
-          "h-full flex items-center gap-1.5 border-[0.5px] rounded-sm text-11 px-2 py-0.5",
+          "h-full flex items-center gap-1.5 border-[0.5px] rounded-sm px-2  py-0.5",
           priorityClasses[priority ?? "none"],
           {
             // compact the icons if text is hidden
@@ -121,7 +121,9 @@ function BorderButton(props: ButtonProps) {
           ) : (
             <SignalHigh className="size-3" />
           ))}
-        {!hideText && <span className="flex-grow truncate">{priorityDetails?.title ?? placeholder}</span>}
+        {!hideText && (
+          <span className="flex-grow truncate text-caption-sm-medium">{priorityDetails?.title ?? placeholder}</span>
+        )}
         {dropdownArrow && (
           <ChevronDownIcon className={cn("h-2.5 w-2.5 flex-shrink-0", dropdownArrowClassName)} aria-hidden="true" />
         )}
@@ -167,7 +169,7 @@ function BackgroundButton(props: ButtonProps) {
     >
       <div
         className={cn(
-          "h-full flex items-center gap-1.5 rounded-sm text-11 px-2 py-0.5",
+          "h-full flex items-center gap-1.5 rounded-sm  px-2 py-0.5",
           priorityClasses[priority ?? "none"],
           {
             // compact the icons if text is hidden
@@ -205,7 +207,9 @@ function BackgroundButton(props: ButtonProps) {
             <SignalHigh className="size-3" />
           ))}
         {!hideText && (
-          <span className="flex-grow truncate">{priorityDetails?.title ?? t("common.priority") ?? placeholder}</span>
+          <span className="flex-grow truncate text-caption-sm-medium">
+            {priorityDetails?.title ?? t("common.priority") ?? placeholder}
+          </span>
         )}
         {dropdownArrow && (
           <ChevronDownIcon className={cn("h-2.5 w-2.5 flex-shrink-0", dropdownArrowClassName)} aria-hidden="true" />
@@ -253,7 +257,7 @@ function TransparentButton(props: ButtonProps) {
     >
       <div
         className={cn(
-          "h-full w-full flex items-center gap-1.5 rounded-sm text-11 px-2 py-0.5 hover:bg-layer-1",
+          "h-full w-full flex items-center gap-1.5 rounded-sm  px-2 py-0.5 hover:bg-layer-1",
           priorityClasses[priority ?? "none"],
           {
             // compact the icons if text is hidden
@@ -292,7 +296,9 @@ function TransparentButton(props: ButtonProps) {
             <SignalHigh className="size-3" />
           ))}
         {!hideText && (
-          <span className="flex-grow truncate">{priorityDetails?.title ?? t("common.priority") ?? placeholder}</span>
+          <span className="flex-grow truncate text-caption-sm-medium">
+            {priorityDetails?.title ?? t("common.priority") ?? placeholder}
+          </span>
         )}
         {dropdownArrow && (
           <ChevronDownIcon className={cn("h-2.5 w-2.5 flex-shrink-0", dropdownArrowClassName)} aria-hidden="true" />
@@ -502,4 +508,4 @@ export function PriorityDropdown(props: Props) {
       )}
     </ComboDropDown>
   );
-}
+}
diff --git a/apps/web/core/components/issues/issue-detail-widgets/widget-button.tsx b/apps/web/core/components/issues/issue-detail-widgets/widget-button.tsx
@@ -22,7 +22,7 @@ export function IssueDetailWidgetButton(props: Props) {
       )}
     >
       {icon && icon}
-      <span className="text-13 font-medium">{title}</span>
+      <span className="text-body-xs-medium">{title}</span>
     </div>
   );
 }
diff --git a/...components/issues/issue-detail/issue-activity/activity/actions/helpers/activity-block.tsx b/...components/issues/issue-detail/issue-activity/activity/actions/helpers/activity-block.tsx
@@ -34,8 +34,8 @@ export function IssueActivityBlockComponent(props: TIssueActivityBlockComponent)
         ends === "top" ? `pb-2` : ends === "bottom" ? `pt-2` : `py-2`
       }`}
     >
-      <div className="absolute left-[13px] top-0 bottom-0 w-0.5 bg-layer-1" aria-hidden />
-      <div className="flex-shrink-0 ring-6 w-7 h-7 rounded-full overflow-hidden flex justify-center items-center z-[4] bg-layer-1 text-secondary">
+      <div className="absolute left-[13px] top-0 bottom-0 w-0.5 bg-layer-3" aria-hidden />
+      <div className="flex-shrink-0 w-7 h-7 rounded-full overflow-hidden flex justify-center items-center z-[4] bg-layer-3 text-secondary">
         {icon ? icon : <Network className="w-3.5 h-3.5" />}
       </div>
       <div className="w-full truncate text-secondary">

diff --git a/apps/web/core/components/issues/issue-detail/issue-activity/sort-root.tsx b/apps/web/core/components/issues/issue-detail/issue-activity/sort-root.tsx
@@ -1,9 +1,9 @@
 import { memo } from "react";
 import { ArrowUpWideNarrow, ArrowDownWideNarrow } from "lucide-react";
 // plane package imports
-import type { E_SORT_ORDER } from "@plane/constants";
-import { getButtonStyling } from "@plane/propel/button";
+import { E_SORT_ORDER } from "@plane/constants";
 import { cn } from "@plane/utils";
+import { Button } from "@plane/propel/button";
 
 export type TActivitySortRoot = {
   sortOrder: E_SORT_ORDER;
@@ -13,18 +13,20 @@ export type TActivitySortRoot = {
 };
 export const ActivitySortRoot = memo(function ActivitySortRoot(props: TActivitySortRoot) {
   return (
-    <div
-      className={cn(getButtonStyling("neutral-primary", "sm"), "px-2 text-tertiary cursor-pointer", props.className)}
+    <Button
+      variant="ghost"
+      size="sm"
+      className={props.className}
       onClick={() => {
         props.toggleSort();
       }}
     >
-      {props.sortOrder === "asc" ? (
+      {props.sortOrder === E_SORT_ORDER.ASC ? (
         <ArrowUpWideNarrow className={cn("size-4", props.iconClassName)} />
       ) : (
         <ArrowDownWideNarrow className={cn("size-4", props.iconClassName)} />
       )}
-    </div>
+    </Button>
   );
 });
 

diff --git a/apps/web/core/components/issues/issue-detail/label/label-list-item.tsx b/apps/web/core/components/issues/issue-detail/label/label-list-item.tsx
@@ -1,5 +1,6 @@
 import { observer } from "mobx-react";
 import { CloseIcon } from "@plane/propel/icons";
+import { cn } from "@plane/utils";
 // types
 import { useLabel } from "@/hooks/store/use-label";
 import type { TLabelOperations } from "./root";
@@ -32,9 +33,13 @@ export const LabelListItem = observer(function LabelListItem(props: TLabelListIt
   return (
     <div
       key={labelId}
-      className={`transition-all relative flex items-center gap-1 truncate border border-subtle rounded-full text-11 p-0.5 px-1 group ${
-        !disabled ? "cursor-pointer hover:border-red-500/50 hover:bg-red-500/20" : "cursor-not-allowed"
-      } `}
+      className={cn(
+        "transition-all relative flex items-center gap-1 truncate border border-subtle rounded-full text-caption-sm-regular p-0.5 px-1 group",
+        {
+          "cursor-pointer hover:border-danger-strong hover:bg-danger-subtle": !disabled,
+          "cursor-not-allowed": disabled,
+        }
+      )}
       onClick={handleLabel}
     >
       <div
@@ -46,7 +51,7 @@ export const LabelListItem = observer(function LabelListItem(props: TLabelListIt
       <div className="truncate">{label.name}</div>
       {!disabled && (
         <div className="flex-shrink-0">
-          <CloseIcon className="transition-all h-2.5 w-2.5 group-hover:text-red-500" />
+          <CloseIcon className="transition-all h-2.5 w-2.5 group-hover:text-danger" />
         </div>
       )}
     </div>

diff --git a/apps/web/core/components/issues/issue-detail/links/create-update-link-modal.tsx b/apps/web/core/components/issues/issue-detail/links/create-update-link-modal.tsx
@@ -73,7 +73,7 @@ export const IssueLinkCreateUpdateModal = observer(function IssueLinkCreateUpdat
     <ModalCore isOpen={isModalOpen} handleClose={onClose}>
       <form onSubmit={handleSubmit(handleFormSubmit)}>
         <div className="space-y-5 p-5">
-          <h3 className="text-18 font-medium text-secondary">
+          <h3 className="text-h4-medium text-secondary">
             {preloadedData?.id ? t("common.update_link") : t("common.add_link")}
           </h3>
           <div className="mt-2 space-y-3">
@@ -100,12 +100,12 @@ export const IssueLinkCreateUpdateModal = observer(function IssueLinkCreateUpdat
                   />
                 )}
               />
-              {errors.url && <span className="text-11 text-red-500">{t("common.url_is_invalid")}</span>}
+              {errors.url && <span className="text-caption-sm-regular text-danger">{t("common.url_is_invalid")}</span>}
             </div>
             <div>
               <label htmlFor="title" className="mb-2 text-secondary">
                 {t("common.display_title")}
-                <span className="text-10 block">{t("common.optional")}</span>
+                <span className="text-caption-xs-regular block">{t("common.optional")}</span>
               </label>
               <Controller
                 control={control}

diff --git a/apps/web/core/components/issues/issue-detail/links/link-item.tsx b/apps/web/core/components/issues/issue-detail/links/link-item.tsx
@@ -60,16 +60,18 @@ export const IssueLinkItem = observer(function IssueLinkItem(props: TIssueLinkIt
               href={linkDetail.url}
               target="_blank"
               rel="noopener noreferrer"
-              className="truncate text-13 cursor-pointer flex-grow flex items-center gap-3"
+              className="truncate text-body-xs-regular cursor-pointer flex-grow flex items-center gap-3"
             >
               {linkDetail.title && linkDetail.title !== "" ? linkDetail.title : linkDetail.url}
 
-              {linkTitle && linkTitle !== "" && <span className="text-placeholder text-11">{linkTitle}</span>}
+              {linkTitle && linkTitle !== "" && (
+                <span className="text-placeholder text-caption-sm-regular">{linkTitle}</span>
+              )}
             </a>
           </Tooltip>
         </div>
         <div className="flex items-center gap-1 flex-shrink-0">
-          <p className="p-1 text-11 align-bottom leading-5 text-placeholder group-hover-text-secondary">
+          <p className="p-1 text-caption-sm-regular align-bottom leading-5 text-placeholder group-hover-text-secondary">
             {calculateTimeAgo(linkDetail.created_at)}
           </p>
           <span

diff --git a/apps/web/core/components/issues/issue-detail/parent-select.tsx b/apps/web/core/components/issues/issue-detail/parent-select.tsx
@@ -84,7 +84,7 @@ export const IssueParentSelect = observer(function IssueParentSelect(props: TIss
         disabled={disabled}
       >
         {issue.parent_id && parentIssue ? (
-          <div className="flex items-center gap-1 bg-green-500/20 rounded-sm px-1.5 py-1">
+          <div className="flex items-center gap-1 bg-success-subtle rounded-sm px-1.5 py-1">
             <Tooltip tooltipHeading="Title" tooltipContent={parentIssue.name} isMobile={isMobile}>
               <Link href={workItemLink} target="_blank" rel="noopener noreferrer" onClick={(e) => e.stopPropagation()}>
                 {parentIssue?.project_id && parentIssueProjectDetails && (
@@ -109,13 +109,13 @@ export const IssueParentSelect = observer(function IssueParentSelect(props: TIss
                     handleRemoveSubIssue(workspaceSlug, projectId, parentIssue.id, issueId);
                   }}
                 >
-                  <CloseIcon className="h-2.5 w-2.5 text-tertiary hover:text-red-500" />
+                  <CloseIcon className="h-2.5 w-2.5 text-tertiary hover:text-danger" />
                 </span>
               </Tooltip>
             )}
           </div>
         ) : (
-          <span className="text-13 text-placeholder">{t("issue.add.parent")}</span>
+          <span className="text-body-xs-regular text-placeholder">{t("issue.add.parent")}</span>
         )}
         {!disabled && (
           <span

diff --git a/apps/web/core/components/issues/issue-detail/relation-select.tsx b/apps/web/core/components/issues/issue-detail/relation-select.tsx
@@ -124,7 +124,7 @@ export const IssueRelationSelect = observer(function IssueRelationSelect(props:
                         })}
                         target="_blank"
                         rel="noopener noreferrer"
-                        className="text-11 font-medium"
+                        className="text-caption-sm-medium"
                         onClick={(e) => e.stopPropagation()}
                       >
                         {`${projectDetails?.identifier}-${currentIssue?.sequence_id}`}
@@ -139,7 +139,7 @@ export const IssueRelationSelect = observer(function IssueRelationSelect(props:
                             removeRelation(workspaceSlug, projectId, issueId, relationKey, relationIssueId);
                           }}
                         >
-                          <CloseIcon className="h-2.5 w-2.5 text-tertiary hover:text-red-500" />
+                          <CloseIcon className="h-2.5 w-2.5 text-tertiary hover:text-danger" />
                         </span>
                       </Tooltip>
                     )}
@@ -148,7 +148,7 @@ export const IssueRelationSelect = observer(function IssueRelationSelect(props:
               })}
             </div>
           ) : (
-            <span className="text-13 text-placeholder">{currRelationOption?.placeholder}</span>
+            <span className="text-body-xs-regular text-placeholder">{currRelationOption?.placeholder}</span>
           )}
           {!disabled && (
             <span