chore: sync changes (#8343)

apps/space/core/components/issues/issue-layouts/kanban/base-kanban-root.tsx

@@ -49,7 +49,7 @@ export const IssueKanbanLayoutRoot = observer(function IssueKanbanLayoutRoot(pro
   return (
     <IssueLayoutHOC getGroupIssueCount={getGroupIssueCount} getIssueLoader={getIssueLoader}>
       <div
-        className="horizontal-scrollbar scrollbar-lg relative flex size-ful overflow-x-auto overflow-y-hidden"
+        className="horizontal-scrollbar scrollbar-lg relative flex size-full overflow-x-auto overflow-y-hidden"
         ref={scrollableContainerRef}
       >
         <div className="relative h-full w-max min-w-full">

apps/space/core/components/issues/issue-layouts/kanban/block.tsx

@@ -50,7 +50,7 @@ const KanbanIssueDetailsBlock = observer(function KanbanIssueDetailsBlock(props:
         </div>
       </WithDisplayPropertiesHOC>
 
-      <div className="w-full line-clamp-1 text-13 text-14 text-primary mb-1.5">
+      <div className="w-full line-clamp-1 text-13 text-primary mb-1.5">
         <Tooltip tooltipContent={issue.name}>
           <span>{issue.name}</span>
         </Tooltip>

apps/web/app/root.tsx

@@ -58,7 +58,9 @@ export function Layout({ children }: { children: ReactNode }) {
         <div id="context-menu-portal" />
         <div id="editor-portal" />
         <AppProvider>
-          <div className={cn("h-screen w-full overflow-hidden bg-canvas relative flex flex-col", "app-container")}>
+          <div
+            className={cn("h-screen w-full overflow-hidden bg-canvas relative flex flex-col", "desktop-app-container")}
+          >
             <main className="w-full h-full overflow-hidden relative">{children}</main>
           </div>
         </AppProvider>

apps/web/ce/components/comments/comment-block.tsx

@@ -41,7 +41,7 @@ export const CommentBlock = observer(function CommentBlock(props: TCommentBlock)
       ref={commentBlockRef}
     >
       <div
-        className="absolute left-[13px] top-0 bottom-0 w-0.5 transition-border duration-1000 bg-layer-1"
+        className="absolute left-[13px] top-0 bottom-0 w-px transition-border duration-1000 bg-layer-1"
         aria-hidden
       />
       <div

apps/web/core/components/auth-screens/not-authorized-view.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import { observer } from "mobx-react";
 // assets
+import { cn } from "@plane/utils";
 import ProjectNotAuthorizedImg from "@/app/assets/auth/project-not-authorized.svg?url";
 import Unauthorized from "@/app/assets/auth/unauthorized.svg?url";
 import WorkspaceNotAuthorizedImg from "@/app/assets/auth/workspace-not-authorized.svg?url";
@@ -22,8 +23,8 @@ export const NotAuthorizedView = observer(function NotAuthorizedView(props: Prop
   const asset = section === "settings" ? settingAsset : Unauthorized;
 
   return (
-    <DefaultLayout className={className}>
-      <div className="flex h-full w-full flex-col items-center justify-center gap-y-5 bg-surface-1 text-center">
+    <DefaultLayout className={cn("bg-surface-1", className)}>
+      <div className="flex h-full w-full flex-col items-center justify-center gap-y-5 text-center">
         <div className="h-44 w-72">
           <img src={asset} className="h-[176px] w-[288px] object-contain" alt="ProjectSettingImg" />
         </div>

apps/web/core/components/base-layouts/list/group.tsx

@@ -33,12 +33,12 @@ export const BaseListGroup = observer(function BaseListGroup<T extends IBaseLayo
   return (
     <div
       ref={groupRef}
-      className={cn("relative flex flex-shrink-0 flex-col border-[1px] border-transparent", {
+      className={cn("relative flex flex-shrink-0 flex-col", {
         "bg-layer-1": isDraggingOver,
       })}
     >
       {/* Group Header */}
-      <Row className="sticky top-0 z-[2] w-full flex-shrink-0 border-b border-subtle bg-surface-2 py-1">
+      <div className="sticky top-0 w-full shrink-0 border-b border-subtle bg-layer-1 py-1 px-6 cursor-pointer z-10">
         {renderGroupHeader ? (
           renderGroupHeader({ group, itemCount: itemIds.length, isCollapsed, onToggleGroup })
         ) : (
@@ -49,7 +49,7 @@ export const BaseListGroup = observer(function BaseListGroup<T extends IBaseLayo
             onToggleGroup={onToggleGroup}
           />
         )}
-      </Row>
+      </div>
 
       {/* Group Items */}
       {!isCollapsed && (

apps/web/core/components/dropdowns/date-range.tsx

@@ -257,13 +257,13 @@ export const DateRangeDropdown = observer(function DateRangeDropdown(props: Prop
   const comboOptions = (
     <Combobox.Options data-prevent-outside-click static>
       <div
-        className="my-1 bg-surface-1 shadow-custom-shadow-rg border-[0.5px] border-strong rounded-md overflow-hidden z-30"
+        className="my-1 bg-surface-1 border-[0.5px] border-subtle-1 rounded-md overflow-hidden z-30"
         ref={setPopperElement}
         style={styles.popper}
         {...attributes.popper}
       >
         <Calendar
-          className="rounded-md border border-subtle p-3"
+          className="rounded-md border border-subtle p-3 text-12"
           captionLayout="dropdown"
           selected={dateRange}
           onSelect={(val: DateRange | undefined) => {

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

@@ -9,7 +9,7 @@ import { Button } from "@plane/propel/button";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import type { IUser, IImporterService } from "@plane/types";
 // ui
-import { CustomSearchSelect } from "@plane/ui";
+import { Checkbox, CustomSearchSelect } from "@plane/ui";
 // hooks
 import { useProject } from "@/hooks/store/use-project";
 import { useUser } from "@/hooks/store/user";
@@ -168,7 +168,7 @@ export const Exporter = observer(function Exporter(props: Props) {
                     onClick={() => setMultiple(!multiple)}
                     className="flex max-w-min cursor-pointer items-center gap-2"
                   >
-                    <input type="checkbox" checked={multiple} onChange={() => setMultiple(!multiple)} />
+                    <Checkbox checked={multiple} onChange={() => setMultiple(!multiple)} />
                     <div className="whitespace-nowrap text-13">
                       {t("workspace_settings.settings.exports.export_separate_files")}
                     </div>

apps/web/core/components/gantt-chart/chart/header.tsx

@@ -36,7 +36,7 @@ export const GanttChartHeader = observer(function GanttChartHeader(props: Props)
       style={{ height: `${GANTT_BREADCRUMBS_HEIGHT}px` }}
     >
       <div className="ml-auto">
-        <div className="ml-auto text-11 font-medium text-secondary">
+        <div className="ml-auto text-11 font-medium text-tertiary">
           {blockIds ? `${blockIds.length} ${loaderTitle}` : t("common.loading")}
         </div>
       </div>

apps/web/core/components/instance/not-ready-view.tsx

@@ -33,7 +33,7 @@ export function InstanceNotReady() {
             <div className="w-auto max-w-2xl relative space-y-8 py-10">
               <div className="relative flex flex-col justify-center items-center space-y-4">
                 <h1 className="text-24 font-bold pb-3">Welcome aboard Plane!</h1>
-                <img src={PlaneTakeOffImage} className="object-contain" alt="Plane Logo" />
+                <img src={PlaneTakeOffImage} className="w-full h-full object-cover" alt="Plane Logo" />
                 <p className="font-medium text-14 text-placeholder">
                   Get started by setting up your instance and workspace
                 </p>

apps/web/core/components/integration/single-integration-card.tsx

@@ -111,13 +111,13 @@ export const SingleIntegrationCard = observer(function SingleIntegrationCard({ i
           />
         </div>
         <div>
-          <h3 className="flex items-center gap-2 text-13 font-medium">
+          <h3 className="flex items-center gap-2 text-body-xs-medium">
             {integration.title}
             {workspaceIntegrations
               ? isInstalled && <CheckCircle className="h-3.5 w-3.5 fill-transparent text-green-500" />
               : null}
           </h3>
-          <p className="text-13 tracking-tight text-secondary">
+          <p className="text-body-xs-regular text-secondary">
             {workspaceIntegrations
               ? isInstalled
                 ? integrationDetails[integration.provider].installed

apps/web/core/components/issues/issue-detail/issue-activity/root.tsx

@@ -102,7 +102,7 @@ export const IssueActivity = observer(function IssueActivity(props: TIssueActivi
     <div className="space-y-4">
       {/* header */}
       <div className="flex items-center justify-between">
-        <div className="text-16 text-primary">{t("common.activity")}</div>
+        <div className="text-h5-medium text-primary">{t("common.activity")}</div>
         <div className="flex items-center gap-2">
           {isWorklogButtonEnabled && (
             <IssueActivityWorklogCreateButton

apps/web/core/components/issues/issue-layouts/list/block.tsx

@@ -284,7 +284,7 @@ export const IssueBlock = observer(function IssueBlock(props: IssueBlockProps) {
                 displayPropertyKey="sub_issue_count"
                 shouldRenderProperty={(properties) => !!properties.sub_issue_count}
               >
-                <IssueStats issueId={issue.id} className="ml-2 font-medium text-tertiary" />
+                <IssueStats issueId={issue.id} className="ml-2 text-body-xs-medium text-tertiary" />
               </WithDisplayPropertiesHOC>
             )}
           </div>

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

@@ -14,7 +14,7 @@ export const SpreadsheetUpdatedOnColumn = observer(function SpreadsheetUpdatedOn
   const { issue } = props;
 
   return (
-    <Row className="flex h-11 w-full items-center border-b-[0.5px] border-subtle text-11 hover:bg-layer-1 group-[.selected-issue-row]:bg-accent-primary/5 group-[.selected-issue-row]:hover:bg-accent-primary/10">
+    <Row className="flex h-11 w-full items-center border-b-[0.5px] border-subtle-1 text-11 hover:bg-layer-1 group-[.selected-issue-row]:bg-accent-primary/5 group-[.selected-issue-row]:hover:bg-accent-primary/10">
       {renderFormattedDate(issue.updated_at)}
     </Row>
   );

apps/web/core/components/issues/issue-layouts/spreadsheet/issue-row.tsx

@@ -265,7 +265,7 @@ const IssueRowDetails = observer(function IssueRowDetails(props: IssueRowDetails
         >
           <Row
             className={cn(
-              "group clickable cursor-pointer h-11 w-full flex items-center text-13 after:absolute border-r-[0.5px] z-10 border-subtle bg-transparent group-[.selected-issue-row]:bg-accent-primary/5 group-[.selected-issue-row]:hover:bg-accent-primary/10",
+              "group clickable cursor-pointer h-11 w-full flex items-center text-13 after:absolute border-r-[0.5px] z-10 border-subtle-1 bg-transparent group-[.selected-issue-row]:bg-accent-primary/5 group-[.selected-issue-row]:hover:bg-accent-primary/10",
               {
                 "border-b-[0.5px]": !getIsIssuePeeked(issueDetail.id),
                 "border border-accent-strong hover:border-accent-strong":

apps/web/core/components/onboarding/profile-setup.tsx

@@ -430,7 +430,7 @@ export const ProfileSetup = observer(function ProfileSetup(props: Props) {
                             ref={ref}
                             hasError={Boolean(errors.password)}
                             placeholder="New password..."
-                            className="w-full border-[0.5px] border-strong pr-12 placeholder:text-placeholder"
+                            className="w-full border-[0.5px] border-subtle pr-12 placeholder:text-placeholder"
                             onFocus={() => setIsPasswordInputFocused(true)}
                             onBlur={() => setIsPasswordInputFocused(false)}
                             autoComplete="on"
@@ -473,7 +473,7 @@ export const ProfileSetup = observer(function ProfileSetup(props: Props) {
                             ref={ref}
                             hasError={Boolean(errors.confirm_password)}
                             placeholder={t("auth.common.password.confirm_password.placeholder")}
-                            className="w-full border-strong pr-12 placeholder:text-placeholder"
+                            className="w-full border-subtle pr-12 placeholder:text-placeholder"
                           />
                           {showPassword.retypePassword ? (
                             <EyeOff

apps/web/core/components/readonly/estimate.tsx

@@ -42,7 +42,7 @@ export const ReadonlyEstimate = observer(function ReadonlyEstimate(props: TReado
   }, [projectId, workspaceSlug]);
 
   return (
-    <div className={cn("flex items-center gap-1 text-13", className)}>
+    <div className={cn("flex items-center gap-1 text-body-xs-regular", className)}>
       {!hideIcon && <EstimatePropertyIcon className="size-4 flex-shrink-0" />}
       <span className="flex-grow truncate">{displayValue ?? placeholder ?? t("common.none")}</span>
     </div>

apps/web/core/components/readonly/labels.tsx

@@ -32,7 +32,7 @@ export const ReadonlyLabels = observer(function ReadonlyLabels(props: TReadonlyL
   }, [projectId, workspaceSlug]);
 
   return (
-    <div className={cn("flex items-center gap-2 text-13", className)}>
+    <div className={cn("flex items-center gap-2 text-body-xs-regular", className)}>
       {labels && (
         <>
           <Tooltip
@@ -42,7 +42,7 @@ export const ReadonlyLabels = observer(function ReadonlyLabels(props: TReadonlyL
             isMobile={isMobile}
             disabled={labels.length === 0}
           >
-            <div className="h-full flex items-center gap-1 rounded-sm py-1 text-13">
+            <div className="h-full flex items-center gap-1 rounded-sm py-1 text-body-xs-bold">
               <span className="h-2 w-2 flex-shrink-0 rounded-full bg-accent-primary" />
               <span>{value.length}</span>
               <span>Labels</span>

apps/web/core/components/readonly/member.tsx

@@ -28,7 +28,7 @@ export const ReadonlyMember = observer(function ReadonlyMember(props: TReadonlyM
 
   if (members.length === 0) {
     return (
-      <div className={cn("flex items-center gap-1 text-13", className)}>
+      <div className={cn("flex items-center gap-1 text-body-xs-regular", className)}>
         {<ButtonAvatars showTooltip={false} userIds={value} icon={Icon} />}
         <span className="flex-grow truncate">{placeholder ?? t("common.none")}</span>
       </div>
@@ -37,7 +37,7 @@ export const ReadonlyMember = observer(function ReadonlyMember(props: TReadonlyM
 
   if (multiple) {
     return (
-      <div className={cn("flex items-center gap-1 text-13", className)}>
+      <div className={cn("flex items-center gap-1 text-body-xs-regular", className)}>
         {!hideIcon && Icon && <Icon className="h-3 w-3 flex-shrink-0" />}
         <ButtonAvatars showTooltip={false} userIds={memberIds} />
       </div>
@@ -47,7 +47,7 @@ export const ReadonlyMember = observer(function ReadonlyMember(props: TReadonlyM
   const member = members[0];
 
   return (
-    <div className={cn("flex items-center gap-1 text-13", className)}>
+    <div className={cn("flex items-center gap-1 text-body-xs-regular", className)}>
       {!hideIcon && Icon && <Icon className="size-4 flex-shrink-0" />}
       <div className="flex items-center gap-2">
         <div className="size-4 rounded-full bg-layer-1 flex items-center justify-center">

apps/web/core/components/readonly/module.tsx

@@ -44,7 +44,7 @@ export const ReadonlyModule = observer(function ReadonlyModule(props: TReadonlyM
 
   if (modules.length === 0) {
     return (
-      <div className={cn("flex items-center gap-1 text-13", className)}>
+      <div className={cn("flex items-center gap-1 text-body-xs-regular", className)}>
         {!hideIcon && <Layers className="size-4 flex-shrink-0" />}
         <span className="flex-grow truncate">{placeholder ?? t("common.none")}</span>
       </div>
@@ -56,7 +56,7 @@ export const ReadonlyModule = observer(function ReadonlyModule(props: TReadonlyM
       showCount && modules.length > 1 ? `${modules[0]?.name} +${modules.length - 1}` : modules[0]?.name;
 
     return (
-      <div className={cn("flex items-center gap-1 text-13", className)}>
+      <div className={cn("flex items-center gap-1 text-body-xs-regular", className)}>
         {!hideIcon && <Layers className="size-4 flex-shrink-0" />}
         <span className="flex-grow truncate">{displayText}</span>
       </div>
@@ -65,7 +65,7 @@ export const ReadonlyModule = observer(function ReadonlyModule(props: TReadonlyM
 
   const moduleItem = modules[0];
   return (
-    <div className={cn("flex items-center gap-2 text-13", className)}>
+    <div className={cn("flex items-center gap-2 text-body-xs-regular", className)}>
       {!hideIcon && <Layers className="size-4 flex-shrink-0" />}
       <span className="flex-grow truncate">{moduleItem?.name}</span>
     </div>

apps/web/core/components/readonly/priority.tsx

@@ -20,7 +20,7 @@ export const ReadonlyPriority = observer(function ReadonlyPriority(props: TReado
   const priorityDetails = ISSUE_PRIORITIES.find((p) => p.key === value);
 
   return (
-    <div className={cn("flex items-center gap-1 text-13", className)}>
+    <div className={cn("flex items-center gap-1 text-body-xs-regular", className)}>
       {!hideIcon && <PriorityIcon priority={value ?? "none"} size={12} className="flex-shrink-0" withContainer />}
       <span className="flex-grow truncate">{priorityDetails?.title ?? placeholder ?? t("common.none")}</span>
     </div>

apps/web/core/components/readonly/state.tsx

@@ -46,7 +46,7 @@ export const ReadonlyState = observer(function ReadonlyState(props: TReadonlySta
 
   if (stateLoader) {
     return (
-      <Loader className={cn("flex items-center gap-1 text-13", className)}>
+      <Loader className={cn("flex items-center gap-1 text-body-xs-regular", className)}>
         <Loader.Item height="16px" width="16px" className="rounded-full" />
         <Loader.Item height="16px" width="50px" />
       </Loader>
@@ -54,7 +54,7 @@ export const ReadonlyState = observer(function ReadonlyState(props: TReadonlySta
   }
 
   return (
-    <div className={cn("flex items-center gap-1 text-13", className)}>
+    <div className={cn("flex items-center gap-1 text-body-xs-regular", className)}>
       {!hideIcon && (
         <StateGroupIcon
           stateGroup={state?.group ?? "backlog"}

apps/web/core/components/settings/heading.tsx

@@ -36,7 +36,7 @@ export function SettingsHeading({
       </div>
       {showButton && customButton}
       {button && showButton && (
-        <Button variant="primary" onClick={button.onClick} className="w-fit">
+        <Button variant="primary" size="lg" onClick={button.onClick} className="w-fit">
           {button.label}
         </Button>
       )}

apps/web/core/components/web-hooks/form/individual-event-options.tsx

@@ -1,6 +1,7 @@
 import type { Control } from "react-hook-form";
 import { Controller } from "react-hook-form";
 import type { IWebhook } from "@plane/types";
+import { Checkbox } from "@plane/ui";
 
 export const INDIVIDUAL_WEBHOOK_OPTIONS: {
   key: keyof IWebhook;
@@ -49,13 +50,7 @@ export function WebhookIndividualEventOptions({ control }: Props) {
           render={({ field: { onChange, value } }) => (
             <div>
               <div className="flex items-center gap-2">
-                <input
-                  id={option.key}
-                  onChange={() => onChange(!value)}
-                  type="checkbox"
-                  name="selectIndividualEvents"
-                  checked={value === true}
-                />
+                <Checkbox id={option.key} onChange={() => onChange(!value)} checked={value === true} />
                 <label className="text-13" htmlFor={option.key}>
                   {option.label}
                 </label>

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

@@ -17,7 +17,7 @@ export const WorkspaceLogo = observer(function WorkspaceLogo(props: Props) {
     <div
       className={cn(
         `relative grid h-6 w-6 flex-shrink-0 place-items-center uppercase ${
-          !props.logo && "rounded-md bg-[#026292] text-on-color"
+          !props.logo && "rounded-md bg-accent-primary text-on-color"
         } ${props.classNames ? props.classNames : ""}`
       )}
     >

packages/propel/src/pill/pill.tsx

@@ -17,6 +17,13 @@ export enum EPillSize {
   XS = "xs",
 }
 
+export enum ERadius {
+  SQUARE = "square",
+  CIRCLE = "circle",
+}
+
+export type TRadius = ERadius.SQUARE | ERadius.CIRCLE;
+
 export type TPillVariant =
   | EPillVariant.DEFAULT
   | EPillVariant.PRIMARY
@@ -31,10 +38,11 @@ export interface PillProps extends React.HTMLAttributes<HTMLSpanElement> {
   size?: TPillSize;
   className?: string;
   children: React.ReactNode;
+  radius?: TRadius;
 }
 
 const pillVariants = {
-  [EPillVariant.DEFAULT]: "bg-surface-2 text-secondary border border-subtle",
+  [EPillVariant.DEFAULT]: "bg-surface-2 text-secondary border border-subtle-1",
   [EPillVariant.PRIMARY]: "bg-accent-primary/10 text-accent-primary border border-accent-strong/20",
   [EPillVariant.SUCCESS]: "bg-green-50 text-green-700 border border-green-200",
   [EPillVariant.WARNING]: "bg-amber-50 text-amber-700 border border-amber-200",
@@ -49,8 +57,20 @@ const pillSizes = {
   [EPillSize.LG]: "px-3 py-1.5 text-14",
 };
 
+const pillRadius = {
+  [ERadius.SQUARE]: "rounded",
+  [ERadius.CIRCLE]: "rounded-full",
+};
+
 const Pill = React.forwardRef(function Pill(
-  { variant = EPillVariant.DEFAULT, size = EPillSize.MD, className, children, ...props }: PillProps,
+  {
+    variant = EPillVariant.DEFAULT,
+    size = EPillSize.MD,
+    radius = ERadius.CIRCLE,
+    className,
+    children,
+    ...props
+  }: PillProps,
   ref: React.ForwardedRef<HTMLSpanElement>
 ) {
   return (
@@ -63,6 +83,8 @@ const Pill = React.forwardRef(function Pill(
         pillVariants[variant],
         // Size styles
         pillSizes[size],
+        // Radius styles
+        pillRadius[radius],
         className
       )}
       {...props}

packages/propel/src/separator/separator.tsx

@@ -11,7 +11,7 @@ interface SeparatorProps extends React.ComponentProps<typeof SeparatorPrimitive>
 }
 
 const Separator = React.forwardRef(function Separator(
-  { orientation = "horizontal", ...props }: SeparatorProps,
+  { orientation = "horizontal", className, ...props }: SeparatorProps,
   ref: React.ForwardedRef<React.ElementRef<typeof SeparatorPrimitive>>
 ) {
   return (
@@ -21,7 +21,7 @@ const Separator = React.forwardRef(function Separator(
       data-slot="separator"
       data-orientation={orientation}
       {...props}
-      className={cn("bg-subtle-1", "shrink-0", orientation === "horizontal" ? "h-px w-full" : "h-full w-px")}
+      className={cn("bg-subtle-1", "shrink-0", orientation === "horizontal" ? "h-px w-full" : "h-full w-px", className)}
     />
   );
 });

packages/ui/src/button/toggle-switch.tsx

@@ -20,7 +20,7 @@ function ToggleSwitch(props: IToggleSwitchProps) {
       disabled={disabled}
       onChange={onChange}
       className={cn(
-        "relative inline-flex flex-shrink-0 h-6 w-10 cursor-pointer rounded-full border-0 transition-colors duration-200 ease-in-out focus:outline-none",
+        "relative inline-flex flex-shrink-0 h-6 w-10 cursor-pointer rounded-full border border-subtle transition-colors duration-200 ease-in-out focus:outline-none bg-layer-1",
         {
           "h-4 w-7": size === "sm",
           "h-5 w-9": size === "md",