Skip to content

[WEB-5614] fix: new design system consistency #8351

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
pushya22 merged 5 commits into from
Dec 17, 2025
Merged

[WEB-5614] fix: new design system consistency #8351

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
0ee6b78
chore: tooltip enhancements
anmolsinghbhatia Dec 16, 2025
315facc
chore: project card enhancements
anmolsinghbhatia Dec 16, 2025
c03858f
chore: work item card enhancements
anmolsinghbhatia Dec 16, 2025
c8d3286
chore: update component styles and class names for consistency across…
JayashTripathy Dec 17, 2025
010fbca
Merge branch 'preview' of https://github.com/makeplane/plane into fix…
JayashTripathy Dec 17, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions apps/web/app/(all)/create-workspace/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,11 +52,11 @@ const CreateWorkspacePage = observer(function CreateWorkspacePage() {

return (
<AuthenticationWrapper>
<div className="flex h-full flex-col gap-y-2 overflow-hidden sm:flex-row sm:gap-y-0">
<div className="flex h-full flex-col gap-y-2 overflow-hidden sm:flex-row sm:gap-y-0 bg-surface-1">
<div className="relative h-1/6 flex-shrink-0 sm:w-2/12 md:w-3/12 lg:w-1/5">
<div className="absolute left-0 top-1/2 h-[0.5px] w-full -translate-y-1/2 border-b-[0.5px] border-subtle sm:left-1/2 sm:top-0 sm:h-screen sm:w-[0.5px] sm:-translate-x-1/2 sm:translate-y-0 sm:border-r-[0.5px] md:left-1/3" />
<Link
className="absolute left-5 top-1/2 grid -translate-y-1/2 place-items-center bg-surface-1 px-3 sm:left-1/2 sm:top-12 sm:-translate-x-[15px] sm:translate-y-0 sm:px-0 sm:py-5 md:left-1/3"
className="absolute left-5 top-1/2 grid -translate-y-1/2 place-items-center px-3 sm:left-1/2 sm:top-12 sm:-translate-x-[15px] sm:translate-y-0 sm:px-0 sm:py-5 md:left-1/3"
href="/"
>
<PlaneLogo className="h-9 w-auto text-primary" />
Expand Down
2 changes: 1 addition & 1 deletion apps/web/app/(all)/invitations/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -131,7 +131,7 @@ function UserInvitationsPage() {
<div className="absolute left-0 top-1/2 h-[0.5px] w-full -translate-y-1/2 border-b-[0.5px] border-subtle sm:left-1/2 sm:top-0 sm:h-screen sm:w-[0.5px] sm:-translate-x-1/2 sm:translate-y-0 sm:border-r-[0.5px] md:left-1/3" />
<Link
href="/"
className="absolute left-5 top-1/2 grid -translate-y-1/2 place-items-center bg-surface-1 px-3 sm:left-1/2 sm:top-12 sm:-translate-x-[15px] sm:translate-y-0 sm:px-0 sm:py-5 md:left-1/3 z-10"
className="absolute left-5 top-1/2 grid -translate-y-1/2 place-items-center px-3 sm:left-1/2 sm:top-12 sm:-translate-x-[15px] sm:translate-y-0 sm:px-0 sm:py-5 md:left-1/3 z-10"
>
<PlaneLogo className="h-9 w-auto text-primary" />
</Link>
Expand Down
37 changes: 27 additions & 10 deletions apps/web/core/components/comments/card/edit-form.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import type { EditorRefApi } from "@plane/editor";
import { CloseIcon } from "@plane/propel/icons";
// plane imports
import type { TCommentsOperations, TIssueComment } from "@plane/types";
import { isCommentEmpty } from "@plane/utils";
import { cn, isCommentEmpty } from "@plane/utils";
// components
import { LiteTextEditor } from "@/components/editor/lite-text";

Expand Down Expand Up @@ -46,7 +46,7 @@ export const CommentCardEditForm = observer(function CommentCardEditForm(props:
});
const commentHTML = watch("comment_html");

const isEmpty = isCommentEmpty(commentHTML ?? undefined);
const isEmpty = isCommentEmpty(commentHTML);
const isEditorReadyToDiscard = editorRef.current?.isEditorReadyToDiscard();
const isSubmitButtonDisabled = isSubmitting || !isEditorReadyToDiscard;
const isDisabled = isSubmitting || isEmpty || isSubmitButtonDisabled;
Expand Down Expand Up @@ -99,36 +99,53 @@ export const CommentCardEditForm = observer(function CommentCardEditForm(props:
return asset_id;
}}
projectId={projectId}
parentClassName="p-2"
parentClassName="p-2 bg-surface-1"
Copy link
Contributor

@coderabbitai coderabbitai bot Dec 17, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🔴 Critical

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
# Search for the edit-form.tsx file and examine LiteTextEditor usage
fd -t f "edit-form.tsx" | head -5

Repository: makeplane/plane

Length of output: 111

🏁 Script executed:

#!/bin/bash
# Find all LiteTextEditor usages with parentClassName
rg -B2 -A2 "parentClassName" --type=tsx --type=ts | head -100

Repository: makeplane/plane

Length of output: 86

🏁 Script executed:

#!/bin/bash
# Read the edit-form.tsx file to see the context
cat -n apps/web/core/components/comments/card/edit-form.tsx | head -120

Repository: makeplane/plane

Length of output: 4804

🏁 Script executed:

#!/bin/bash
# Search for parentClassName usage across codebase
rg "parentClassName" -A 1 -B 1 | head -150

Repository: makeplane/plane

Length of output: 2484

🏁 Script executed:

#!/bin/bash
# Check the parent component structure to understand nesting hierarchy
cat -n apps/web/core/components/comments/card/index.tsx | head -80

Repository: makeplane/plane

Length of output: 139

🏁 Script executed:

#!/bin/bash
# Look for other Surface backgrounds used in similar form/editor contexts
rg "bg-surface" --type=ts --type=tsx | grep -E "(Editor|editor|input|form)" | head -20

Repository: makeplane/plane

Length of output: 86

🏁 Script executed:

#!/bin/bash
# Find the correct file name in the comments/card directory
ls -la apps/web/core/components/comments/card/

Repository: makeplane/plane

Length of output: 352

🏁 Script executed:

#!/bin/bash
# Search for bg-surface usage in editor/form contexts
rg "bg-surface" | grep -i "editor\|form\|input" | head -20

Repository: makeplane/plane

Length of output: 4112

🏁 Script executed:

#!/bin/bash
# Check the root.tsx to understand the parent component structure
cat -n apps/web/core/components/comments/card/root.tsx

Repository: makeplane/plane

Length of output: 3132

🏁 Script executed:

#!/bin/bash
# Look at comment-create.tsx to compare how it uses parentClassName
cat -n apps/web/core/components/comments/comment-create.tsx | head -150

Repository: makeplane/plane

Length of output: 6055

🏁 Script executed:

#!/bin/bash
# Check the display.tsx to see the comment card structure
cat -n apps/web/core/components/comments/card/display.tsx

Repository: makeplane/plane

Length of output: 3333

🏁 Script executed:

#!/antml:function_calls
# Look for CommentBlock component to understand parent hierarchy
rg "CommentBlock" -B5 -A10 | head -50

Repository: makeplane/plane

Length of output: 3851

🏁 Script executed:

#!/bin/bash
# Find and examine the CommentBlock component definition
find . -path "*/plane-web/components/comments*" -name "*.tsx" -type f

Repository: makeplane/plane

Length of output: 41

🏁 Script executed:

#!/antml:function_calls
# Check the design system documentation for form elements in the AGENTS.md
cat packages/tailwind-config/AGENTS.md | head -200

Repository: makeplane/plane

Length of output: 6077

🏁 Script executed:

#!/bin/bash
# Continue reading the AGENTS.md file for more guidance
tail -n +200 packages/tailwind-config/AGENTS.md | head -200

Repository: makeplane/plane

Length of output: 5005

🏁 Script executed:

#!/antml:function_calls
# Check what bg-surface-1 context means in comment-create vs edit-form
rg "parentClassName" -B5 -A5 | grep -E "(comment-create|edit-form|parentClassName)" | head -30

Repository: makeplane/plane

Length of output: 2685

Use bg-layer-1 or remove the background color to match design system semantics.

The editor is a nested form element within a comment card, not a top-level container. Per the design system, nested elements must use Layer classes (bg-layer-1, bg-layer-2, bg-layer-3) or no background, never Surface classes. The established pattern in comment-create.tsx shows the editor using only padding (p-2) when wrapped in a surface.

🤖 Prompt for AI Agents 
In apps/web/core/components/comments/card/edit-form.tsx around line 102, the
editor is using a Surface background class ("bg-surface-1") which violates the
design system for nested elements; change parentClassName to use a Layer class
(e.g., "p-2 bg-layer-1") or remove the background entirely and keep only "p-2"
to match the established pattern in comment-create.tsx when the editor is
wrapped by a surface container.

displayConfig={{
fontSize: "small-font",
}}
/>
</div>
<div className="flex gap-1 self-end">
<div className="flex gap-2 self-end">
{!isEmpty && (
<button
type="button"
onClick={handleSubmit(onEnter)}
disabled={isDisabled}
className={`group rounded-sm border border-green-500 bg-green-500/20 p-2 shadow-md duration-300 ${
isEmpty ? "cursor-not-allowed bg-gray-200" : "hover:bg-green-500"
}`}
className={cn(
"group rounded-lg border size-7 flex items-center justify-center shadow-md duration-300",
isDisabled
? "cursor-not-allowed border-green-500/50 bg-green-500/10"
: "border-green-500 bg-green-500/20 hover:bg-green-500"
)}
>
<Check
className={`h-3 w-3 text-green-500 duration-300 ${isEmpty ? "text-black" : "group-hover:text-on-color"}`}
className={cn(
"size-4 duration-300",
isDisabled ? "text-green-500/50" : "text-green-500 group-hover:text-on-color"
)}
/>
</button>
)}
<button
type="button"
className="group rounded-sm border border-red-500 bg-red-500/20 p-2 shadow-md duration-300 hover:bg-red-500"
disabled={isSubmitting}
className={cn(
"group rounded-lg border size-7 flex items-center justify-center shadow-md duration-300",
isSubmitting
? "cursor-not-allowed border-red-500/50 bg-red-500/10"
: "border-red-500 bg-red-500/20 hover:bg-red-500"
)}
onClick={() => {
setIsEditing(false);
editorRef.current?.setEditorValue(comment.comment_html ?? "<p></p>");
}}
>
<CloseIcon className="size-3 text-red-500 duration-300 group-hover:text-on-color" />
<CloseIcon
className={cn(
"size-5 duration-300",
isSubmitting ? "text-red-500/50" : "text-red-500 group-hover:text-on-color"
)}
/>
</button>
</div>
</form>
Expand Down
6 changes: 3 additions & 3 deletions apps/web/core/components/cycles/analytics-sidebar/sidebar-header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -156,10 +156,10 @@ export const CycleSidebarHeader = observer(function CycleSidebarHeader(props: Pr
<div className="sticky z-10 top-0 pt-2 flex items-center justify-between bg-surface-1">
<div className="flex items-center justify-center size-5">
<button
className="flex size-4 items-center justify-center rounded-full bg-layer-3"
className="flex size-6 items-center justify-center rounded-full bg-layer-3 hover:bg-layer-3-hover flex-shrink-0"
Copy link
Contributor

@coderabbitai coderabbitai bot Dec 17, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

Verify layer level: should be bg-layer-1 or bg-layer-2, not bg-layer-3.

The button is directly nested within a bg-surface-1 container (Line 156). According to the design system guidelines, layers should stack progressively (surface → layer-1 → layer-2 → layer-3), and most components should remain at layer-1 complexity. For buttons on surfaces, bg-layer-1 is appropriate, or bg-layer-2 at most for visual separation. Using bg-layer-3 skips intermediate layers and violates the stacking hierarchy.

Based on learnings, design system layer stacking guidelines.

Apply this diff to use the correct layer level:

-            className="flex size-6 items-center justify-center rounded-full bg-layer-3 hover:bg-layer-3-hover flex-shrink-0"
+            className="flex size-6 items-center justify-center rounded-full bg-layer-1 hover:bg-layer-1-hover flex-shrink-0"
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
className="flex size-6 items-center justify-center rounded-full bg-layer-3 hover:bg-layer-3-hover flex-shrink-0"
className="flex size-6 items-center justify-center rounded-full bg-layer-1 hover:bg-layer-1-hover flex-shrink-0"
🤖 Prompt for AI Agents 
In apps/web/core/components/cycles/analytics-sidebar/sidebar-header.tsx around
line 159, the button uses bg-layer-3 which breaks the design-system stacking
(it's inside a bg-surface-1 container); change the class to use bg-layer-1 (or
bg-layer-2 if slightly stronger contrast is required) instead of bg-layer-3,
update any corresponding hover class to the matching layer hover variant (e.g.,
bg-layer-1-hover), and verify visually that contrast and spacing remain correct
against the surrounding surface.

onClick={() => handleClose()}
>
<ChevronRightIcon className="h-3 w-3 stroke-2 text-on-color" />
<ChevronRightIcon className="size-4 stroke-2 text-secondary" />
</button>
</div>
</div>
Expand All @@ -168,7 +168,7 @@ export const CycleSidebarHeader = observer(function CycleSidebarHeader(props: Pr
<h4 className="w-full break-words text-18 font-semibold text-primary">{cycleDetails.name}</h4>
{currentCycle && (
<span
className="flex h-6 min-w-20 px-3 items-center justify-center rounded-sm text-center text-11 font-medium"
className="flex h-6 min-w-20 px-3 items-center justify-center rounded-sm text-center text-11 font-medium whitespace-nowrap truncate"
style={{
color: currentCycle.color,
backgroundColor: `${currentCycle.color}20`,
Expand Down
2 changes: 1 addition & 1 deletion apps/web/core/components/cycles/list/cycles-list-item.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -82,7 +82,7 @@ export const CyclesListItem = observer(function CyclesListItem(props: TCyclesLis
prependTitleElement={
<CircularProgressIndicator size={30} percentage={progress} strokeWidth={3}>
{progress === 100 ? (
<Check className="h-3 w-3 stroke-2 text-accent-primary" />
<Check className="h-3 w-3 stroke-2" />
) : (
<span className="text-9 text-primary">{`${progress}%`}</span>
)}
Expand Down
4 changes: 2 additions & 2 deletions apps/web/core/components/issues/issue-detail/label/label-list-item.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,9 +35,9 @@ export const LabelListItem = observer(function LabelListItem(props: TLabelListIt
key={labelId}
type="button"
className={cn(
"h-full w-min flex items-center gap-1.5 rounded-lg px-2 py-0.5 bg-layer-transparent-active hover:bg-layer-transparent-hover text-body-xs-regular text-tertiary",
"h-full w-min flex items-center gap-1.5 rounded-lg px-2 py-0.5 bg-layer-transparent-active group text-body-xs-regular text-tertiary",
{
"cursor-pointer hover:border-danger-strong hover:bg-danger-subtle": !disabled,
"cursor-pointer": !disabled,
Comment on lines +38 to +40
Copy link

Copilot AI Dec 17, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The hover styles have been removed from the label item. The old code had "hover:bg-layer-transparent-hover" which has been removed, and the "hover:border-danger-strong hover:bg-danger-subtle" styles for non-disabled items have also been removed. While a "group" class was added, there's no visible group-hover styling applied to child elements. This may result in reduced user feedback when interacting with labels.

Copilot uses AI. Check for mistakes.
}
)}
Comment on lines +38 to 42
Copy link
Contributor

@coderabbitai coderabbitai bot Dec 17, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

Incorrect usage of -active state variant as base background.

The button is using bg-layer-transparent-active as the base background, but -active state variants should only be used for elements in pressed/active states, not as a permanent base style. Additionally, removing hover feedback (hover:bg-layer-transparent-hover) from an interactive button reduces discoverability.

Apply this diff to use the correct base background with hover state:

       className={cn(
-        "h-full w-min flex items-center gap-1.5 rounded-lg px-2 py-0.5 bg-layer-transparent-active  group text-body-xs-regular text-tertiary",
+        "h-full w-min flex items-center gap-1.5 rounded-lg px-2 py-0.5 bg-layer-transparent hover:bg-layer-transparent-hover group text-body-xs-regular text-tertiary",
         {
-          "cursor-pointer": !disabled,
+          "cursor-pointer hover:border-danger-strong": !disabled,
         }
       )}

Based on learnings: Use -active state variants only for elements in pressed/active states, and always include hover states for interactive elements to match the base background layer.

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
"h-full w-min flex items-center gap-1.5 rounded-lg px-2 py-0.5 bg-layer-transparent-active group text-body-xs-regular text-tertiary",
{
"cursor-pointer hover:border-danger-strong hover:bg-danger-subtle": !disabled,
"cursor-pointer": !disabled,
}
)}
"h-full w-min flex items-center gap-1.5 rounded-lg px-2 py-0.5 bg-layer-transparent hover:bg-layer-transparent-hover group text-body-xs-regular text-tertiary",
{
"cursor-pointer hover:border-danger-strong": !disabled,
}
)}
🤖 Prompt for AI Agents 
In apps/web/core/components/issues/issue-detail/label/label-list-item.tsx around
lines 38 to 42, the class uses bg-layer-transparent-active as a permanent base
background and omits hover feedback; change the base background to
bg-layer-transparent, add hover:bg-layer-transparent-hover for interactive hover
feedback, and keep bg-layer-transparent-active only in the active/pressed state
(or via an active state class) while preserving the conditional "cursor-pointer"
when not disabled.

onClick={handleLabel}
Expand Down
2 changes: 1 addition & 1 deletion apps/web/core/components/issues/issue-layouts/kanban/block.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -269,7 +269,7 @@ export const KanbanIssueBlock = observer(function KanbanIssueBlock(props: IssueB
href={workItemLink}
ref={cardRef}
className={cn(
"block rounded-lg border-[1px] outline-[0.5px] outline-transparent w-full border-strong bg-layer-2 text-13 transition-all hover:bg-layer-2-hover p-3",
"block rounded-lg border outline-[0.5px] outline-transparent shadow-raised-100 w-full border-subtle bg-layer-2 text-13 transition-all p-3 hover:shadow-raised-200 hover:border-strong",
{ "hover:cursor-pointer": isDragAllowed },
{ "border border-accent-strong hover:border-accent-strong": getIsIssuePeeked(issue.id) },
{ "bg-layer-1 z-[100]": isCurrentBlockDragging }
Expand Down
2 changes: 1 addition & 1 deletion apps/web/core/components/modules/module-status-dropdown.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ export const ModuleStatusDropdown = observer(function ModuleStatusDropdown(props
<CustomSelect
customButton={
<span
className={`flex h-6 w-20 items-center justify-center rounded-xs text-center text-11 ${
className={`flex h-6 w-20 items-center justify-center rounded-sm text-center text-11 ${
isDisabled ? "cursor-not-allowed" : "cursor-pointer"
}`}
style={{
Expand Down
2 changes: 1 addition & 1 deletion apps/web/core/components/modules/quick-actions.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -166,7 +166,7 @@ export const ModuleQuickActions = observer(function ModuleQuickActions(props: Pr
)}
disabled={item.disabled}
>
{item.icon && <item.icon className={cn("h-3 w-3", item.iconClassName)} />}
{item.icon && <item.icon className={cn("h-3 w-3 flex-shrink-0", item.iconClassName)} />}
<div>
<h5>{item.title}</h5>
{item.description && (
Expand Down
2 changes: 1 addition & 1 deletion apps/web/core/components/project/card.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -198,7 +198,7 @@ export const ProjectCard = observer(function ProjectCard(props: Props) {
}
}}
data-prevent-progress={!isMemberOfProject || isArchived}
className="flex flex-col rounded-sm border border-subtle bg-layer-1 hover:bg-layer-1-hover rounded-xl overflow-hidden"
className="flex flex-col border border-subtle bg-layer-2 hover:shadow-raised-2x00 rounded-lg overflow-hidden duration-300 transition-all"
Copy link

Copilot AI Dec 17, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There is extra whitespace after "flex-col" and before "border". This should be cleaned up to maintain consistency with the codebase formatting.

Copilot uses AI. Check for mistakes.
Copy link

Copilot AI Dec 17, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There's a typo in the class name. "shadow-raised-2x00" should be "shadow-raised-200". The extra 'x' appears to be a typo.

Copilot uses AI. Check for mistakes.
>
<ContextMenu parentRef={projectCardRef} items={MENU_ITEMS} />
<div className="relative h-[118px] w-full rounded-t ">
Expand Down
2 changes: 1 addition & 1 deletion apps/web/core/components/project/create/header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ function ProjectCreateHeader(props: Props) {
const { getIndex } = getTabIndex(ETabIndices.PROJECT_CREATE, isMobile);

return (
<div className="group relative h-44 w-full rounded-lg bg-layer-1">
<div className="group relative h-44 w-full rounded-lg">
{coverImage && (
<img
src={getCoverImageDisplayURL(coverImage, DEFAULT_COVER_IMAGE_URL)}
Expand Down
8 changes: 4 additions & 4 deletions apps/web/core/components/workspace/create-workspace-form.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -170,8 +170,8 @@ export const CreateWorkspaceForm = observer(function CreateWorkspaceForm(props:
{t("workspace_creation.form.url.label")}
<span className="ml-0.5 text-red-500">*</span>
</label>
<div className="flex w-full items-center rounded-md border-[0.5px] border-subtle px-3">
<span className="whitespace-nowrap text-13 text-secondary">{window && window.location.host}/</span>
<div className="flex w-full items-center rounded-md border-[0.5px] border-subtle px-3 bg-layer-1">
<span className="whitespace-nowrap text-12 text-secondary">{window && window.location.host}/</span>
<Controller
control={control}
name="slug"
Expand All @@ -195,7 +195,7 @@ export const CreateWorkspaceForm = observer(function CreateWorkspaceForm(props:
ref={ref}
hasError={Boolean(errors.slug)}
placeholder={t("workspace_creation.form.url.placeholder")}
className="block w-full rounded-md border-none bg-transparent !px-0 py-2 text-13"
className="block w-full rounded-md border-none bg-transparent !px-0 py-2 text-12"
/>
)}
/>
Expand Down Expand Up @@ -229,7 +229,7 @@ export const CreateWorkspaceForm = observer(function CreateWorkspaceForm(props:
</span>
)
}
buttonClassName="!border-[0.5px] !border-subtle !shadow-none"
buttonClassName="!border-[0.5px] !border-subtle !shadow-none bg-layer-1 text-12"
input
>
{ORGANIZATION_SIZE.map((item) => (
Expand Down
22 changes: 14 additions & 8 deletions apps/web/core/components/workspace/sidebar/dropdown-item.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -87,21 +87,27 @@ const SidebarDropdownItem = observer(function SidebarDropdownItem(props: TProps)
{[EUserPermissions.ADMIN, EUserPermissions.MEMBER].includes(workspace?.role) && (
<Link
href={`/${workspace.slug}/settings`}
onClick={handleClose}
className="flex border border-subtle rounded-md py-1 px-2 gap-1 hover:text-secondary text-tertiary hover:border-strong bg-layer-3 hover:bg-layer-3-hover"
onClick={(e) => {
e.stopPropagation();
handleClose();
}}
className="flex border border-strong rounded-md py-1.5 px-2.5 gap-1.5 hover:text-secondary text-secondary hover:border-strong bg-layer-2 hover:shadow-raised-100 transition-colors"
>
<Settings className="h-4 w-4 my-auto" />
<span className="text-13 font-medium my-auto">{t("settings")}</span>
<Settings className="h-4 w-4 my-auto flex-shrink-0" />
<span className="text-13 font-medium my-auto whitespace-nowrap">{t("settings")}</span>
</Link>
)}
{[EUserPermissions.ADMIN].includes(workspace?.role) && (
<Link
href={`/${workspace.slug}/settings/members`}
onClick={handleClose}
className="flex border border-subtle rounded-md py-1 px-2 gap-1 hover:text-secondary text-tertiary hover:border-strong bg-layer-3 hover:bg-layer-3-hover"
onClick={(e) => {
e.stopPropagation();
handleClose();
}}
className="flex border border-strong rounded-md py-1.5 px-2.5 gap-1.5 hover:text-secondary text-secondary hover:border-strong bg-layer-2 hover:shadow-raised-100 transition-colors"
>
<UserPlus className="h-4 w-4 my-auto" />
<span className="text-13 font-medium my-auto">
<UserPlus className="h-4 w-4 my-auto flex-shrink-0" />
<span className="text-13 font-medium my-auto whitespace-nowrap">
{t("project_settings.members.invite_members.title")}
</span>
</Link>
Expand Down
4 changes: 2 additions & 2 deletions apps/web/core/layouts/auth-layout/workspace-wrapper.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -126,7 +126,7 @@ export const WorkspaceAuthWrapper = observer(function WorkspaceAuthWrapper(props
// if list of workspaces are not there then we have to render the spinner
if (isParentLoading || allWorkspaces === undefined || loader) {
return (
<div className="grid h-full place-items-center bg-surface-1 p-4 rounded-lg border border-subtle">
<div className="grid h-full place-items-center p-4 rounded-lg border border-subtle">
<div className="flex flex-col items-center gap-3 text-center">
<LogoSpinner />
</div>
Expand Down Expand Up @@ -157,7 +157,7 @@ export const WorkspaceAuthWrapper = observer(function WorkspaceAuthWrapper(props
</div>
<div className="relative flex h-full w-full flex-grow flex-col items-center justify-center space-y-3">
<div className="relative flex-shrink-0">
<img src={WorkSpaceNotAvailable} className="h-[220px] object-cover object-center" alt="Plane logo" />
<img src={WorkSpaceNotAvailable} className="h-[220px] object-contain object-center" alt="Plane logo" />
</div>
<h3 className="text-center text-16 font-semibold">Workspace not found</h3>
<p className="text-center text-13 text-secondary">
Expand Down
2 changes: 1 addition & 1 deletion packages/editor/src/styles/editor.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -105,7 +105,7 @@ ul[data-type="taskList"] li > div {
}

ul[data-type="taskList"] li > label input[type="checkbox"] {
@apply border! border-strong/20!;
@apply border! border-strong!;
Copy link
Contributor

@coderabbitai coderabbitai bot Dec 17, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
# First, let's see the file structure around line 108
head -n 160 packages/editor/src/styles/editor.css | tail -n 60

Repository: makeplane/plane

Length of output: 1629

🏁 Script executed:

#!/bin/bash
# Search for all rules targeting the checkbox selector
rg -n "ul\[data-type=\"taskList\"\].*input\[type=\"checkbox\"\]" packages/editor/src/styles/editor.css

Repository: makeplane/plane

Length of output: 340

🏁 Script executed:

#!/bin/bash
# Get the full CSS rules at lines 107-112 and 144-180 to see the complete duplicate
sed -n '107,115p' packages/editor/src/styles/editor.css
echo "---SEPARATOR---"
sed -n '144,165p' packages/editor/src/styles/editor.css

Repository: makeplane/plane

Length of output: 872

🏁 Script executed:

#!/bin/bash
# Check if the file has been properly formatted with Prettier
# Also check the entire structure to understand if this is part of a nested rule or separate rules
wc -l packages/editor/src/styles/editor.css
echo "---Checking for SCSS nesting syntax---"
sed -n '144,160p' packages/editor/src/styles/editor.css

Repository: makeplane/plane

Length of output: 548

🏁 Script executed:

#!/bin/bash
# Let's see the full context - check if this is SCSS with proper nesting
# Look for the opening brace before line 107 to understand structure
sed -n '100,180p' packages/editor/src/styles/editor.css | cat -n

Repository: makeplane/plane

Length of output: 2646

🏁 Script executed:

#!/bin/bash
# Check the git history to understand what changed
git log --oneline -20 packages/editor/src/styles/editor.css
echo "---Now let's see the diff for this file---"
git diff HEAD packages/editor/src/styles/editor.css | head -100

Repository: makeplane/plane

Length of output: 211

🏁 Script executed:

#!/bin/bash
# Check the file type and if it's properly formatted
file packages/editor/src/styles/editor.css
echo "---Check if prettier/tailwind has been run---"
head -20 packages/editor/src/styles/editor.css

Repository: makeplane/plane

Length of output: 657

🏁 Script executed:

#!/bin/bash
# Let's check the git diff to see what actually changed in this PR
git show HEAD:packages/editor/src/styles/editor.css | sed -n '107,112p'

Repository: makeplane/plane

Length of output: 219

🏁 Script executed:

#!/bin/bash
# Check the previous commit to see the original state
git show HEAD~1:packages/editor/src/styles/editor.css | sed -n '107,112p'

Repository: makeplane/plane

Length of output: 95

🏁 Script executed:

#!/bin/bash
# Check the git status to see what's staged or modified
git status packages/editor/src/styles/editor.css
echo "---Check git log for any recent changes---"
git log --all --oneline packages/editor/src/styles/editor.css | head -5

Repository: makeplane/plane

Length of output: 540

🏁 Script executed:

#!/bin/bash
# Let's check if there's a design system or tailwind config that documents border-strong vs border-subtle-1
find packages/tailwind-config -name "*.md" -o -name "*.js" -o -name "*.ts" | head -20

Repository: makeplane/plane

Length of output: 136

🏁 Script executed:

#!/bin/bash
# Check the AGENTS.md file for border color definitions
cat packages/tailwind-config/AGENTS.md

Repository: makeplane/plane

Length of output: 19006

🏁 Script executed:

#!/bin/bash
# Verify if the file follows formatting standards by checking for similar patterns
# Search for other duplicate selectors in the file
rg -n "^[a-z].*\{$" packages/editor/src/styles/editor.css | head -30

Repository: makeplane/plane

Length of output: 905

🏁 Script executed:

#!/bin/bash
# Let's look at what's between line 107 and 144 to understand the full context
sed -n '100,148p' packages/editor/src/styles/editor.css | nl -v 100

Repository: makeplane/plane

Length of output: 101

🏁 Script executed:

#!/bin/bash
# Use cat -n to show line numbers
sed -n '100,180p' packages/editor/src/styles/editor.css | cat -n -v 100

Repository: makeplane/plane

Length of output: 94

🏁 Script executed:

#!/bin/bash
# Show lines 100-180 with line numbers
awk 'NR>=100 && NR<=180 {print NR": "$0}' packages/editor/src/styles/editor.css

Repository: makeplane/plane

Length of output: 2484

Consolidate the duplicate checkbox selector rules to improve maintainability.

The change from border-strong/20 to border-strong correctly removes the opacity modifier, making the checkbox border fully opaque and aligned with design system emphasis semantics. However, the same selector ul[data-type="taskList"] li > label input[type="checkbox"] appears twice: a simple rule at lines 107–112 with border-strong! and a comprehensive rule at lines 144–180 with border-md border-subtle-1. The first rule's !important override cascades correctly, but maintaining duplicate selectors with conflicting border properties is a code maintenance risk. Consolidate these rules into a single definition.

🤖 Prompt for AI Agents 
In packages/editor/src/styles/editor.css around lines 107–112 and 144–180, there
are duplicate rules for the same selector (ul[data-type="taskList"] li > label
input[type="checkbox"]) with conflicting border properties; consolidate them
into a single rule by removing the duplicate simple rule and updating the
remaining comprehensive block to use the intended fully-opaque border
(border-strong) instead of border-md/border-subtle-1, remove any conflicting
border declarations, and keep or add the !important only if necessary for
specificity so the checkbox border is defined in one place.

outline: none;
border-radius: 2px;
transform: scale(1.05);
Expand Down
2 changes: 1 addition & 1 deletion packages/propel/src/dialog/root.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ export interface DialogTitleProps extends React.ComponentProps<typeof BaseDialog

// Constants
const OVERLAY_CLASSNAME = cn("fixed inset-0 z-backdrop bg-backdrop");
const BASE_CLASSNAME = "relative text-left bg-surface-1 rounded-lg shadow-md w-full z-modal";
const BASE_CLASSNAME = "relative text-left bg-surface-1 rounded-lg shadow-md w-full z-modal border border-subtle";

// Utility functions
const getPositionClassNames = (position: DialogPosition) =>
Expand Down
6 changes: 3 additions & 3 deletions packages/propel/src/input/input.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,10 +29,10 @@ const Input = React.forwardRef(function Input(props: InputProps, ref: React.Forw
type={type}
name={name}
className={cn(
"block rounded-md bg-transparent text-13 placeholder-custom-text-400 focus:outline-none",
"block rounded-md bg-layer-1 text-13 placeholder-tertiary border-subtle-1 focus:outline-none",
{
"rounded-md border-[0.5px] border-subtle": mode === "primary",
"rounded-sm border-none bg-transparent ring-0 transition-all focus:ring-1 focus:ring-custom-primary":
"rounded-md border-[0.5px]": mode === "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,
Expand Down
2 changes: 1 addition & 1 deletion packages/propel/src/tabs/tabs.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ const TabsRoot = React.forwardRef(function TabsRoot(
const TabsList = React.forwardRef(function TabsList(
{
className,
background = "layer-1",
background = "layer-2",
Copy link
Contributor

@coderabbitai coderabbitai bot Dec 17, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🔴 Critical

🧩 Analysis chain

🏁 Script executed:

# Find the tabs.tsx file and examine it
fd -t f "tabs.tsx" packages/propel/src/ | head -5

# Also check for TabsList usage patterns
rg -n "TabsList|Tabs\.List" packages/ -t ts -t tsx -C 3 | head -100

Repository: makeplane/plane

Length of output: 137

🏁 Script executed:

# First, find tabs.tsx and examine its content
cat packages/propel/src/tabs/tabs.tsx

Repository: makeplane/plane

Length of output: 4455

🏁 Script executed:

# Search for actual usage of TabsList/Tabs.List in the codebase
rg "Tabs\.List|TabsList" packages/ -t ts -t tsx -B 2 -A 2

Repository: makeplane/plane

Length of output: 86

🏁 Script executed:

# Also search for usage of "background.*layer" in tabs-related files to understand context
rg -i "background.*layer|layer.*background" packages/propel/src/tabs/ -t ts -t tsx

Repository: makeplane/plane

Length of output: 86

🏁 Script executed:

# Try finding Tabs.List or TabsList usage without -t flag
rg "Tabs\.List|TabsList|<Tabs" packages/ --include="*.ts" --include="*.tsx" -B 2 -A 2 | head -150

Repository: makeplane/plane

Length of output: 500

🏁 Script executed:

# Search for imports of Tabs from tabs.tsx
rg "from.*tabs/tabs|import.*Tabs.*from" packages/ --include="*.ts" --include="*.tsx" -B 1 -A 1

Repository: makeplane/plane

Length of output: 500

🏁 Script executed:

# Find all files that import Tabs
fd -e tsx -e ts . packages/ | xargs grep -l "from.*tabs/tabs\|import.*Tabs" 2>/dev/null | head -20

Repository: makeplane/plane

Length of output: 232

🏁 Script executed:

# Search for usage patterns of Tabs component
fd -e tsx . packages/ -exec grep -l "Tabs\.List\|<Tabs" {} \; | head -10

Repository: makeplane/plane

Length of output: 1405

🏁 Script executed:

# Look at the AGENTS.md to understand layer guidance
cat packages/tailwind-config/AGENTS.md 2>/dev/null || find packages -name "AGENTS.md" -exec cat {} \;

Repository: makeplane/plane

Length of output: 19006

🏁 Script executed:

# Check the tabs stories to see how TabsList is used
cat packages/propel/src/tabs/tabs.stories.tsx

Repository: makeplane/plane

Length of output: 11419

🏁 Script executed:

# Search for any usage in emoji-picker which was found to use tabs
cat packages/propel/src/emoji-icon-picker/emoji-picker.tsx | head -100

Repository: makeplane/plane

Length of output: 2926

Default TabsList background should be "layer-1", not "layer-2".

The default background = "layer-2" violates the design system principles. According to the learnings: "keep most components at layer-1 complexity" and "match layer numbers to surface numbers." TabsList is a navigation/interactive component that typically appears as the first level of nesting within a surface. Using layer-2 as the default assumes all tabs exist in layer-1 contexts, which breaks the established hierarchy and creates a breaking change for existing implementations.

Additionally, TabsIndicator uses bg-surface-1, which is incorrect. The indicator should match the TabsList background layer (e.g., if TabsList is layer-2, indicator should be layer-2 or a matching state variant, not surface-1).

🤖 Prompt for AI Agents 
In packages/propel/src/tabs/tabs.tsx around line 43, the TabsList default
background is set to "layer-2" which violates the design system; change the
default to "layer-1". Also update TabsIndicator so its background matches the
TabsList background layer (use the same layer value or a corresponding state
variant instead of hardcoding "surface-1") — ensure the indicator reads the
TabsList background prop or shared variable so both remain in sync.

...props
}: React.ComponentProps<typeof TabsPrimitive.List> & {
background?: BackgroundVariant;
Expand Down
12 changes: 10 additions & 2 deletions packages/propel/src/tooltip/root.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,8 +61,16 @@ export function Tooltip(props: ITooltipProps) {
align={finalAlign}
render={
<BaseTooltip.Popup>
{tooltipHeading && <div className="text-caption-md-medium text-primary">{tooltipHeading}</div>}
{tooltipContent && <div className="mt-1 text-caption-sm-regular text-secondary">{tooltipContent}</div>}
{tooltipHeading && <p className="text-caption-md-medium text-primary">{tooltipHeading}</p>}
{tooltipContent && (
<p
className={cn("text-caption-sm-regular text-secondary", {
"mt-1": tooltipHeading && tooltipHeading !== "",
Copy link

Copilot AI Dec 17, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The condition checks if tooltipHeading is truthy AND not an empty string, but if tooltipHeading is truthy, checking for empty string is redundant. An empty string is already falsy, so the condition can be simplified to just check for the existence of tooltipHeading.

Copilot uses AI. Check for mistakes.
})}
>
{tooltipContent}
</p>
)}
</BaseTooltip.Popup>
}
/>
Expand Down
4 changes: 2 additions & 2 deletions packages/tailwind-config/variables.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -351,7 +351,7 @@
--background-color-danger-transparent-hover: var(--color-red-100);
--background-color-danger-transparent-active: var(--color-red-100);
--background-color-danger-transparent-selected: var(--color-red-100);
--background-color-backdrop: var(--color-alpha-black-400);
--background-color-backdrop: var(--color-alpha-black-500);

/* Border colors */
--border-color-subtle: var(--color-neutral-400);
Expand Down Expand Up @@ -674,7 +674,7 @@
--background-color-danger-transparent-hover: var(--color-red-100);
--background-color-danger-transparent-active: var(--color-red-100);
--background-color-danger-transparent-selected: var(--color-red-100);
--background-color-backdrop: var(--color-alpha-white-200);
--background-color-backdrop: var(--color-alpha-black-1000);

/* Border colors */
--border-color-subtle: var(--color-neutral-400);
Expand Down
Loading
Loading