chore: updated notifications color and size tokens

apps/web/core/components/workspace-notifications/sidebar/filters/menu/menu-option-item.tsx

@@ -38,7 +38,14 @@ export const NotificationFilterOptionItem = observer(function NotificationFilter
       >
         {isSelected && <Check className="h-2.5 w-2.5" />}
       </div>
-      <div className={cn("whitespace-nowrap text-13", isSelected ? "text-primary" : "text-secondary")}>{label}</div>
+      <div
+        className={cn("whitespace-nowrap text-body-xs-medium", {
+          "text-primary": isSelected,
+          "text-secondary": !isSelected,
+        })}
+      >
+        {label}
+      </div>
     </div>
   );
 });

apps/web/core/components/workspace-notifications/sidebar/header/options/menu-option/menu-item.tsx

@@ -14,7 +14,14 @@ export const NotificationMenuOptionItem = observer(function NotificationMenuOpti
         onClick={() => onClick && onClick()}
       >
         {prependIcon && prependIcon}
-        <div className={cn("whitespace-nowrap text-13", isActive ? "text-primary" : "text-secondary")}>{label}</div>
+        <div
+          className={cn("whitespace-nowrap text-body-xs-medium", {
+            "text-primary": isActive,
+            "text-secondary": !isActive,
+          })}
+        >
+          {label}
+        </div>
         {appendIcon && <div className="ml-auto">{appendIcon}</div>}
       </div>
     );

apps/web/core/components/workspace-notifications/sidebar/header/options/root.tsx

@@ -52,7 +52,7 @@ export const NotificationSidebarHeaderOptions = observer(function NotificationSi
   };
 
   return (
-    <div className="relative flex justify-center items-center gap-2 text-13">
+    <div className="relative flex justify-center items-center gap-2 text-body-xs-medium">
       {/* mark all notifications as read*/}
       <Tooltip tooltipContent={t("notification.options.mark_all_as_read")} isMobile={isMobile} position="bottom">
         <div

apps/web/core/components/workspace-notifications/sidebar/loader.tsx

@@ -7,10 +7,10 @@ export function NotificationsLoader() {
         <div key={i} className="flex w-full items-center gap-4 p-3">
           <span className="min-h-12 min-w-12 bg-layer-1 rounded-full" />
           <div className="flex flex-col gap-2.5 w-full">
-            <span className="h-5 w-36 bg-layer-1 rounded-sm" />
+            <span className="h-5 w-36 bg-layer-1 rounded-xs" />
             <div className="flex items-center justify-between gap-2 w-full">
-              <span className="h-5 w-28 bg-layer-1 rounded-sm" />
-              <span className="h-5 w-16 bg-layer-1 rounded-sm" />
+              <span className="h-5 w-28 bg-layer-1 rounded-xs" />
+              <span className="h-5 w-16 bg-layer-1 rounded-xs" />
             </div>
           </div>
         </div>

apps/web/core/components/workspace-notifications/sidebar/notification-card/item.tsx

@@ -66,8 +66,10 @@ export const NotificationItem = observer(function NotificationItem(props: TNotif
     <Row
       className={cn(
         "relative py-4 flex items-center gap-2 border-b border-subtle cursor-pointer transition-all group",
-        currentSelectedNotificationId === notification?.id ? "bg-layer-1/30" : "",
-        notification.read_at === null ? "bg-accent-primary/5" : ""
+        {
+          "bg-layer-1/30": currentSelectedNotificationId === notification?.id,
+          "bg-accent-primary/5": notification.read_at === null,
+        }
       )}
       onClick={handleNotificationIssuePeekOverview}
     >
@@ -83,14 +85,14 @@ export const NotificationItem = observer(function NotificationItem(props: TNotif
               src={getFileURL(notificationTriggeredBy.avatar_url)}
               size={42}
               shape="circle"
-              className="!text-14 !bg-layer-1"
+              className="text-body-sm-medium bg-layer-1"
             />
           )}
         </div>
 
         <div className="w-full space-y-1 -mt-2">
           <div className="relative flex items-center gap-3 h-8">
-            <div className="w-full overflow-hidden whitespace-normal break-all truncate line-clamp-1 text-13 text-primary">
+            <div className="w-full overflow-hidden whitespace-normal break-all truncate line-clamp-1 text-body-xs-medium text-primary">
               <NotificationContent
                 notification={notification}
                 workspaceId={workspace.id}
@@ -108,7 +110,7 @@ export const NotificationItem = observer(function NotificationItem(props: TNotif
             />
           </div>
 
-          <div className="relative flex items-center gap-3 text-11 text-secondary">
+          <div className="relative flex items-center gap-3 text-caption-sm-regular text-secondary">
             <div className="w-full overflow-hidden whitespace-normal break-words truncate line-clamp-1">
               {notification?.data?.issue?.identifier}-{notification?.data?.issue?.sequence_id}&nbsp;
               {notification?.data?.issue?.name}

apps/web/core/components/workspace-notifications/sidebar/notification-card/options/root.tsx

@@ -31,7 +31,11 @@ export const NotificationOption = observer(function NotificationOption(props: TN
   const notification = useNotification(notificationId);
 
   return (
-    <div className={cn("flex-shrink-0 hidden group-hover:block text-13", isSnoozeStateModalOpen ? `!block` : ``)}>
+    <div
+      className={cn("flex-shrink-0 hidden group-hover:block text-body-xs-medium", {
+        block: isSnoozeStateModalOpen,
+      })}
+    >
       <div className="relative flex justify-center items-center gap-2">
         {/* read */}
         <NotificationItemReadOption workspaceSlug={workspaceSlug} notification={notification} />

apps/web/core/components/workspace-notifications/sidebar/notification-card/options/snooze/modal.tsx

@@ -8,7 +8,7 @@ import { Button } from "@plane/propel/button";
 import { CloseIcon } from "@plane/propel/icons";
 import { CustomSelect } from "@plane/ui";
 // components
-import { getDate } from "@plane/utils";
+import { getDate, cn } from "@plane/utils";
 import { DateDropdown } from "@/components/dropdowns/date";
 // helpers
 
@@ -135,10 +135,10 @@ export function NotificationSnoozeModal(props: TNotificationSnoozeModal) {
               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 w-full 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 w-full 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="flex items-center justify-between">
-                    <Dialog.Title as="h3" className="text-16 font-medium leading-6 text-primary">
+                    <Dialog.Title as="h3" className="text-h5-medium leading-6 text-primary">
                       Customize Snooze Time
                     </Dialog.Title>
 
@@ -151,7 +151,7 @@ export function NotificationSnoozeModal(props: TNotificationSnoozeModal) {
 
                   <div className="mt-5 flex flex-col gap-3 md:!flex-row md:items-center">
                     <div className="flex-1 pb-3 md:pb-0">
-                      <h6 className="mb-2 block text-13 font-medium text-placeholder">Pick a date</h6>
+                      <h6 className="mb-2 block text-body-xs-medium text-placeholder">Pick a date</h6>
                       <Controller
                         name="date"
                         control={control}
@@ -174,7 +174,7 @@ export function NotificationSnoozeModal(props: TNotificationSnoozeModal) {
                       />
                     </div>
                     <div className="flex-1">
-                      <h6 className="mb-2 block text-13 font-medium text-placeholder">Pick a time</h6>
+                      <h6 className="mb-2 block text-body-xs-medium text-placeholder">Pick a time</h6>
                       <Controller
                         control={control}
                         name="time"
@@ -190,30 +190,38 @@ export function NotificationSnoozeModal(props: TNotificationSnoozeModal) {
                                     {value} {watch("period").toLowerCase()}
                                   </span>
                                 ) : (
-                                  <span className="text-13 text-placeholder">Select a time</span>
+                                  <span className="text-body-xs-medium text-placeholder">Select a time</span>
                                 )}
                               </div>
                             }
                             input
                           >
-                            <div className="mb-2 flex h-9 w-full overflow-hidden rounded-sm">
+                            <div className="mb-2 flex h-9 w-full overflow-hidden rounded-xs">
                               <div
                                 onClick={() => {
                                   setValue("period", "AM");
                                 }}
-                                className={`flex h-full w-1/2 cursor-pointer items-center justify-center text-center ${
-                                  watch("period") === "AM" ? "bg-accent-primary/90 text-custom-primary-0" : "bg-layer-1"
-                                }`}
+                                className={cn(
+                                  "flex h-full w-1/2 cursor-pointer items-center justify-center text-center",
+                                  {
+                                    "bg-accent-primary/90 text-on-color": watch("period") === "AM",
+                                    "bg-layer-1": watch("period") !== "AM",
+                                  }
+                                )}
                               >
                                 AM
                               </div>
                               <div
                                 onClick={() => {
                                   setValue("period", "PM");
                                 }}
-                                className={`flex h-full w-1/2 cursor-pointer items-center justify-center text-center ${
-                                  watch("period") === "PM" ? "bg-accent-primary/90 text-custom-primary-0" : "bg-layer-1"
-                                }`}
+                                className={cn(
+                                  "flex h-full w-1/2 cursor-pointer items-center justify-center text-center",
+                                  {
+                                    "bg-accent-primary/90 text-on-color": watch("period") === "PM",
+                                    "bg-layer-1": watch("period") !== "PM",
+                                  }
+                                )}
                               >
                                 PM
                               </div>

apps/web/core/components/workspace-notifications/sidebar/notification-card/options/snooze/root.tsx

@@ -119,7 +119,7 @@ export const NotificationItemSnoozeOption = observer(function NotificationItemSn
                   <div className="p-2 rounded-md border border-subtle bg-surface-1 space-y-1">
                     {data.snoozed_till && (
                       <button
-                        className="w-full text-left cursor-pointer px-2 p-1 transition-all hover:bg-layer-1 rounded-xs text-secondary text-13"
+                        className="w-full text-left cursor-pointer px-2 p-1 transition-all hover:bg-layer-1 rounded-xs text-secondary text-body-xs-medium"
                         onClick={(e) => {
                           e.preventDefault();
                           e.stopPropagation();
@@ -133,7 +133,7 @@ export const NotificationItemSnoozeOption = observer(function NotificationItemSn
                     {NOTIFICATION_SNOOZE_OPTIONS.map((option) => (
                       <button
                         key={option.key}
-                        className="w-full text-left cursor-pointer px-2 p-1 transition-all hover:bg-layer-1 rounded-xs text-secondary text-13"
+                        className="w-full text-left cursor-pointer px-2 p-1 transition-all hover:bg-layer-1 rounded-xs text-secondary text-body-xs-medium"
                         onClick={(e) => {
                           e.preventDefault();
                           e.stopPropagation();

apps/web/core/components/workspace-notifications/sidebar/root.tsx

@@ -70,8 +70,11 @@ export const NotificationsSidebarRoot = observer(function NotificationsSidebarRo
             >
               <div
                 className={cn(
-                  `relative h-full flex justify-center items-center gap-1 text-13 transition-all`,
-                  currentNotificationTab === tab.value ? "text-accent-primary" : "text-primary hover:text-secondary"
+                  "relative h-full flex justify-center items-center gap-1 text-body-xs-medium transition-all",
+                  {
+                    "text-accent-primary": currentNotificationTab === tab.value,
+                    "text-primary hover:text-secondary": currentNotificationTab !== tab.value,
+                  }
                 )}
               >
                 <div className="font-medium">{t(tab.i18n_label)}</div>