binarybeach/bb-plane-fork
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

regression: replace old css vars with the new design system tokens (#8354)

Browse source 
* chore: replace old css vars

* fix: replace shadow and primary colors

* chore: remove hardcoded colors
This commit is contained in:
Aaryan Khandelwal 2025-12-17 16:28:22 +05:30 • committed by GitHub
parent 1338e9d2a4
commit 1f06b67c66
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
111 changed files with 180 additions and 245 deletions
Download patch file Download diff file Expand all files Collapse all files

12
apps/web/app/(all)/[workspaceSlug]/(settings)/settings/account/security/page.tsx
View file

@ -149,12 +149,12 @@ function SecurityPage() {
/>
{showPassword?.oldPassword ? (
<EyeOff
className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
className="absolute right-3 h-5 w-5 stroke-placeholder hover:cursor-pointer"
onClick={() => handleShowPassword("oldPassword")}
/>
) : (
<Eye
className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
className="absolute right-3 h-5 w-5 stroke-placeholder hover:cursor-pointer"
onClick={() => handleShowPassword("oldPassword")}
/>
)}
@ -187,12 +187,12 @@ function SecurityPage() {
/>
{showPassword?.password ? (
<EyeOff
className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
className="absolute right-3 h-5 w-5 stroke-placeholder hover:cursor-pointer"
onClick={() => handleShowPassword("password")}
/>
) : (
<Eye
className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
className="absolute right-3 h-5 w-5 stroke-placeholder hover:cursor-pointer"
onClick={() => handleShowPassword("password")}
/>
)}
@ -227,12 +227,12 @@ function SecurityPage() {
/>
{showPassword?.confirmPassword ? (
<EyeOff
className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
className="absolute right-3 h-5 w-5 stroke-placeholder hover:cursor-pointer"
onClick={() => handleShowPassword("confirmPassword")}
/>
) : (
<Eye
className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
className="absolute right-3 h-5 w-5 stroke-placeholder hover:cursor-pointer"
onClick={() => handleShowPassword("confirmPassword")}
/>
)}

12
apps/web/app/(all)/profile/security/page.tsx
View file

@ -147,12 +147,12 @@ function SecurityPage() {
/>
{showPassword?.oldPassword ? (
<EyeOff
className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
className="absolute right-3 h-5 w-5 stroke-placeholder hover:cursor-pointer"
onClick={() => handleShowPassword("oldPassword")}
/>
) : (
<Eye
className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
className="absolute right-3 h-5 w-5 stroke-placeholder hover:cursor-pointer"
onClick={() => handleShowPassword("oldPassword")}
/>
)}
@ -185,12 +185,12 @@ function SecurityPage() {
/>
{showPassword?.password ? (
<EyeOff
className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
className="absolute right-3 h-5 w-5 stroke-placeholder hover:cursor-pointer"
onClick={() => handleShowPassword("password")}
/>
) : (
<Eye
className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
className="absolute right-3 h-5 w-5 stroke-placeholder hover:cursor-pointer"
onClick={() => handleShowPassword("password")}
/>
)}
@ -225,12 +225,12 @@ function SecurityPage() {
/>
{showPassword?.confirmPassword ? (
<EyeOff
className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
className="absolute right-3 h-5 w-5 stroke-placeholder hover:cursor-pointer"
onClick={() => handleShowPassword("confirmPassword")}
/>
) : (
<Eye
className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
className="absolute right-3 h-5 w-5 stroke-placeholder hover:cursor-pointer"
onClick={() => handleShowPassword("confirmPassword")}
/>
)}

2
apps/web/ce/components/issues/header.tsx
View file

@ -93,7 +93,7 @@ export const IssuesHeader = observer(function IssuesHeader() {
target="_blank"
rel="noopener noreferrer"
>
<Circle className="h-1.5 w-1.5 fill-custom-primary-100" strokeWidth={2} />
<Circle className="h-1.5 w-1.5 fill-accent-primary" strokeWidth={2} />
{t("workspace_projects.network.public.title")}
<ExternalLink className="hidden h-3 w-3 group-hover:block" strokeWidth={2} />
</a>

2
apps/web/ce/components/onboarding/tour/root.tsx
View file

@ -117,7 +117,7 @@ export const TourRoot = observer(function TourRoot(props: TOnboardingTourProps)
</Button>
<button
type="button"
className="bg-transparent text-11 font-medium text-accent-primary outline-custom-text-100"
className="bg-transparent text-11 font-medium text-accent-primary outline-subtle-1"
onClick={() => {
captureClick({
elementName: PRODUCT_TOUR_TRACKER_ELEMENTS.SKIP_BUTTON,

2
apps/web/ce/components/pages/editor/ai/menu.tsx
View file

@ -138,7 +138,7 @@ export function EditorAIMenu(props: Props) {
return (
<div
className={cn(
"w-[210px] flex flex-col rounded-md border-[0.5px] border-strong bg-surface-1 shadow-custom-shadow-rg transition-all",
"w-[210px] flex flex-col rounded-md border-[0.5px] border-strong bg-surface-1 shadow-raised-200 transition-all",
{
"w-[700px]": activeTask,
}

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

@ -8,7 +8,7 @@ export function IssueEmbedUpgradeCard(props: any) {
return (
<div
className={cn(
"w-full bg-layer-1 rounded-md border-[0.5px] border-subtle shadow-custom-shadow-2xs flex items-center justify-between gap-5 px-5 py-2 max-md:flex-wrap",
"w-full bg-layer-1 rounded-md border-[0.5px] border-subtle shadow-raised-100 flex items-center justify-between gap-5 px-5 py-2 max-md:flex-wrap",
{
"border-2": props.selected,
}

2
apps/web/core/components/account/auth-forms/email.tsx
View file

@ -83,7 +83,7 @@ export const AuthEmailForm = observer(function AuthEmailForm(props: TAuthEmailFo
aria-label={t("aria_labels.auth_forms.clear_email")}
tabIndex={-1}
>
<XCircle className="size-5 stroke-custom-text-400" />
<XCircle className="size-5 stroke-placeholder" />
</button>
)}
</div>

10
apps/web/core/components/account/auth-forms/password.tsx
View file

@ -203,7 +203,7 @@ export const AuthPasswordForm = observer(function AuthPasswordForm(props: Props)
onClick={handleEmailClear}
aria-label={t("aria_labels.auth_forms.clear_email")}
>
<XCircle className="size-5 stroke-custom-text-400" />
<XCircle className="size-5 stroke-placeholder" />
</button>
)}
</div>
@ -236,9 +236,9 @@ export const AuthPasswordForm = observer(function AuthPasswordForm(props: Props)
)}
>
{showPassword?.password ? (
<EyeOff className="size-5 stroke-custom-text-400" />
<EyeOff className="size-5 stroke-placeholder" />
) : (
<Eye className="size-5 stroke-custom-text-400" />
<Eye className="size-5 stroke-placeholder" />
)}
</button>
</div>
@ -273,9 +273,9 @@ export const AuthPasswordForm = observer(function AuthPasswordForm(props: Props)
onClick={() => handleShowPassword("retypePassword")}
>
{showPassword?.retypePassword ? (
<EyeOff className="size-5 stroke-custom-text-400" />
<EyeOff className="size-5 stroke-placeholder" />
) : (
<Eye className="size-5 stroke-custom-text-400" />
<Eye className="size-5 stroke-placeholder" />
)}
</button>
</div>

8
apps/web/core/components/account/auth-forms/reset-password.tsx
View file

@ -143,12 +143,12 @@ export const ResetPasswordForm = observer(function ResetPasswordForm() {
/>
{showPassword.password ? (
<EyeOff
className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
className="absolute right-3 h-5 w-5 stroke-placeholder hover:cursor-pointer"
onClick={() => handleShowPassword("password")}
/>
) : (
<Eye
className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
className="absolute right-3 h-5 w-5 stroke-placeholder hover:cursor-pointer"
onClick={() => handleShowPassword("password")}
/>
)}
@ -172,12 +172,12 @@ export const ResetPasswordForm = observer(function ResetPasswordForm() {
/>
{showPassword.retypePassword ? (
<EyeOff
className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
className="absolute right-3 h-5 w-5 stroke-placeholder hover:cursor-pointer"
onClick={() => handleShowPassword("retypePassword")}
/>
) : (
<Eye
className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
className="absolute right-3 h-5 w-5 stroke-placeholder hover:cursor-pointer"
onClick={() => handleShowPassword("retypePassword")}
/>
)}

8
apps/web/core/components/account/auth-forms/set-password.tsx
View file

@ -160,12 +160,12 @@ export const SetPasswordForm = observer(function SetPasswordForm() {
/>
{showPassword.password ? (
<EyeOff
className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
className="absolute right-3 h-5 w-5 stroke-placeholder hover:cursor-pointer"
onClick={() => handleShowPassword("password")}
/>
) : (
<Eye
className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
className="absolute right-3 h-5 w-5 stroke-placeholder hover:cursor-pointer"
onClick={() => handleShowPassword("password")}
/>
)}
@ -189,12 +189,12 @@ export const SetPasswordForm = observer(function SetPasswordForm() {
/>
{showPassword.retypePassword ? (
<EyeOff
className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
className="absolute right-3 h-5 w-5 stroke-placeholder hover:cursor-pointer"
onClick={() => handleShowPassword("retypePassword")}
/>
) : (
<Eye
className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
className="absolute right-3 h-5 w-5 stroke-placeholder hover:cursor-pointer"
onClick={() => handleShowPassword("retypePassword")}
/>
)}

2
apps/web/core/components/account/auth-forms/unique-code.tsx
View file

@ -137,7 +137,7 @@ export function AuthUniqueCodeForm(props: TAuthUniqueCodeForm) {
aria-label={t("aria_labels.auth_forms.clear_email")}
onClick={handleEmailClear}
>
<XCircle className="size-5 stroke-custom-text-400" />
<XCircle className="size-5 stroke-placeholder" />
</button>
)}
</div>

2
apps/web/core/components/base-layouts/layout-switcher.tsx
View file

@ -29,7 +29,7 @@ export function LayoutSwitcher(props: Props) {
<button
type="button"
className={`group grid h-[22px] w-7 place-items-center overflow-hidden rounded-sm transition-all hover:bg-surface-1 ${
selectedLayout === layout.key ? "bg-surface-1 shadow-custom-shadow-2xs" : ""
selectedLayout === layout.key ? "bg-surface-1 shadow-raised-100" : ""
}`}
onClick={() => handleOnChange(layout.key)}
>

2
apps/web/core/components/core/content-overflow-HOC.tsx
View file

@ -128,7 +128,7 @@ export const ContentOverflowWrapper = observer(function ContentOverflowWrapper(p
<div
className={cn(
"bottom-0 left-0 w-full transition-all duration-300 ease-in-out",
`bg-gradient-to-t from-custom-background-100 to-transparent flex flex-col items-center justify-end`,
`bg-gradient-to-t from-surface-1 to-transparent flex flex-col items-center justify-end`,
"text-center",
{
"absolute h-[100px] opacity-100": !showAll,

2
apps/web/core/components/core/image-picker-popover.tsx
View file

@ -190,7 +190,7 @@ export const ImagePickerPopover = observer(function ImagePickerPopover(props: Pr
{isOpen && (
<Popover.Panel
className="absolute right-0 z-20 mt-2 rounded-md border border-subtle bg-surface-1 shadow-custom-shadow-sm"
className="absolute right-0 z-20 mt-2 rounded-md border border-subtle bg-surface-1 shadow-raised-200"
static
>
<div

2
apps/web/core/components/cycles/list/cycle-list-item-action.tsx
View file

@ -228,7 +228,7 @@ export const CycleListItemAction = observer(function CycleListItemAction(props:
setTransferIssuesModal(true);
}}
>
<TransferIcon className="fill-custom-primary-200 w-4" />
<TransferIcon className="fill-accent-primary w-4" />
<span>{t("project_cycles.transfer_work_items", { count: transferableIssuesCount })}</span>
</div>
)}

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

@ -110,7 +110,7 @@ export const TransferIssuesModal = observer(function TransferIssuesModal(props:
<div className="flex flex-col gap-4">
<div className="flex items-center justify-between px-5">
<div className="flex items-center gap-1">
<TransferIcon className="w-5 fill-custom-text-100" />
<TransferIcon className="w-5 fill-primary" />
<h4 className="text-18 font-medium text-primary">Transfer work items</h4>
</div>
<button onClick={handleClose}>

2
apps/web/core/components/dropdowns/cycle/cycle-options.tsx
View file

@ -122,7 +122,7 @@ export const CycleOptions = observer(function CycleOptions(props: CycleOptionsPr
return (
<Combobox.Options className="fixed z-10" static>
<div
className="my-1 w-48 rounded-sm border-[0.5px] border-strong bg-surface-1 px-2 py-2.5 text-11 shadow-custom-shadow-rg focus:outline-none"
className="my-1 w-48 rounded-sm border-[0.5px] border-strong bg-surface-1 px-2 py-2.5 text-11 shadow-raised-200 focus:outline-none"
ref={setPopperElement}
style={styles.popper}
{...attributes.popper}

2
apps/web/core/components/dropdowns/date.tsx
View file

@ -174,7 +174,7 @@ export const DateDropdown = observer(function DateDropdown(props: Props) {
<Combobox.Options data-prevent-outside-click static>
<div
className={cn(
"my-1 bg-surface-1 shadow-custom-shadow-rg border-[0.5px] border-strong rounded-md overflow-hidden z-30",
"my-1 bg-surface-1 shadow-raised-200 border-[0.5px] border-strong rounded-md overflow-hidden z-30",
optionsClassName
)}
ref={setPopperElement}

2
apps/web/core/components/dropdowns/estimate.tsx
View file

@ -225,7 +225,7 @@ export const EstimateDropdown = observer(function EstimateDropdown(props: Props)
{isOpen && (
<Combobox.Options className="fixed z-10" static>
<div
className="my-1 w-48 rounded-sm border-[0.5px] border-strong bg-surface-1 px-2 py-2.5 text-11 shadow-custom-shadow-rg focus:outline-none"
className="my-1 w-48 rounded-sm border-[0.5px] border-strong bg-surface-1 px-2 py-2.5 text-11 shadow-raised-200 focus:outline-none"
ref={setPopperElement}
style={styles.popper}
{...attributes.popper}

2
apps/web/core/components/dropdowns/intake-state/base.tsx
View file

@ -211,7 +211,7 @@ export const WorkItemStateDropdownBase = observer(function WorkItemStateDropdown
{isOpen && (
<Combobox.Options className="fixed z-10" static>
<div
className="my-1 w-48 rounded-sm border-[0.5px] border-strong bg-surface-1 px-2 py-2.5 text-11 shadow-custom-shadow-rg focus:outline-none"
className="my-1 w-48 rounded-sm border-[0.5px] border-strong bg-surface-1 px-2 py-2.5 text-11 shadow-raised-200 focus:outline-none"
ref={setPopperElement}
style={styles.popper}
{...attributes.popper}

2
apps/web/core/components/dropdowns/member/member-options.tsx
View file

@ -119,7 +119,7 @@ export const MemberOptions = observer(function MemberOptions(props: Props) {
<Combobox.Options data-prevent-outside-click static>
<div
className={cn(
"my-1 w-48 rounded-sm border-[0.5px] border-strong bg-surface-1 px-2 py-2.5 text-11 shadow-custom-shadow-rg focus:outline-none z-30",
"my-1 w-48 rounded-sm border-[0.5px] border-strong bg-surface-1 px-2 py-2.5 text-11 shadow-raised-200 focus:outline-none z-30",
optionsClassName
)}
ref={setPopperElement}

2
apps/web/core/components/dropdowns/module/module-options.tsx
View file

@ -107,7 +107,7 @@ export const ModuleOptions = observer(function ModuleOptions(props: Props) {
return (
<Combobox.Options className="fixed z-10" static>
<div
className="my-1 w-48 rounded-sm border-[0.5px] border-strong bg-surface-1 px-2 py-2.5 text-11 shadow-custom-shadow-rg focus:outline-none"
className="my-1 w-48 rounded-sm border-[0.5px] border-strong bg-surface-1 px-2 py-2.5 text-11 shadow-raised-200 focus:outline-none"
ref={setPopperElement}
style={styles.popper}
{...attributes.popper}

2
apps/web/core/components/dropdowns/priority.tsx
View file

@ -447,7 +447,7 @@ export function PriorityDropdown(props: Props) {
{isOpen && (
<Combobox.Options className="fixed z-10" static>
<div
className="my-1 w-48 rounded-sm border-[0.5px] border-strong bg-surface-1 px-2 py-2.5 text-11 shadow-custom-shadow-rg focus:outline-none"
className="my-1 w-48 rounded-sm border-[0.5px] border-strong bg-surface-1 px-2 py-2.5 text-11 shadow-raised-200 focus:outline-none"
ref={setPopperElement}
style={styles.popper}
{...attributes.popper}

2
apps/web/core/components/dropdowns/project/base.tsx
View file

@ -232,7 +232,7 @@ export const ProjectDropdownBase = observer(function ProjectDropdownBase(props:
{isOpen && (
<Combobox.Options className="fixed z-10" static>
<div
className="my-1 w-48 rounded-sm border-[0.5px] border-strong bg-surface-1 px-2 py-2.5 text-11 shadow-custom-shadow-rg focus:outline-none"
className="my-1 w-48 rounded-sm border-[0.5px] border-strong bg-surface-1 px-2 py-2.5 text-11 shadow-raised-200 focus:outline-none"
ref={setPopperElement}
style={styles.popper}
{...attributes.popper}

2
apps/web/core/components/dropdowns/state/base.tsx
View file

@ -213,7 +213,7 @@ export const WorkItemStateDropdownBase = observer(function WorkItemStateDropdown
{isOpen && (
<Combobox.Options className="fixed z-10" static>
<div
className="my-1 w-48 rounded-sm border-[0.5px] border-strong bg-surface-1 px-2 py-2.5 text-11 shadow-custom-shadow-rg focus:outline-none"
className="my-1 w-48 rounded-sm border-[0.5px] border-strong bg-surface-1 px-2 py-2.5 text-11 shadow-raised-200 focus:outline-none"
ref={setPopperElement}
style={styles.popper}
{...attributes.popper}

2
apps/web/core/components/editor/embeds/mentions/user.tsx
View file

@ -50,7 +50,7 @@ export const EditorUserMention = observer(function EditorUserMention(props: Prop
<Link to={profileLink}>@{userDetails?.display_name}</Link>
</Popover.Button>
<Popover.Panel side="bottom" align="start">
<div className="w-60 bg-surface-1 shadow-custom-shadow-rg rounded-lg p-3 border-[0.5px] border-strong">
<div className="w-60 bg-surface-1 shadow-raised-200 rounded-lg p-3 border-[0.5px] border-strong">
<div className="flex items-center gap-3">
<div className="flex-shrink-0 size-10 grid place-items-center">
<Avatar

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

@ -8,7 +8,7 @@ export const STICKY_COLORS_LIST: {
{
key: "gray",
label: "Gray",
backgroundColor: "rgba(var(--color-background-90))",
backgroundColor: "var(--background-color-layer-2)",
},
{
key: "peach",

2
apps/web/core/components/icons/attachment/setting-icon.tsx
View file

@ -2,7 +2,7 @@ import React from "react";
import type { Props } from "../types";
export function SettingIcon({ width = "24", height = "24", color = "rgb(var(--color-text-200))", className }: Props) {
export function SettingIcon({ width = "24", height = "24", color = "var(--text-color-secondary)", className }: Props) {
return (
<svg
width={width}

2
apps/web/core/components/issues/issue-detail/label/select/label-select.tsx
View file

@ -142,7 +142,7 @@ export const IssueLabelSelect = observer(function IssueLabelSelect(props: IIssue
<Combobox.Options className="fixed z-10">
<div
className={`z-10 my-1 w-48 whitespace-nowrap rounded-sm border border-strong bg-surface-1 py-2.5 text-11 shadow-custom-shadow-rg focus:outline-none`}
className={`z-10 my-1 w-48 whitespace-nowrap rounded-sm border border-strong bg-surface-1 py-2.5 text-11 shadow-raised-200 focus:outline-none`}
ref={setPopperElement}
style={styles.popper}
{...attributes.popper}

2
apps/web/core/components/issues/issue-layouts/calendar/dropdowns/months-dropdown.tsx
View file

@ -102,7 +102,7 @@ export const CalendarMonthsDropdown = observer(function CalendarMonthsDropdown(p
ref={setPopperElement}
style={styles.popper}
{...attributes.popper}
className="w-56 divide-y divide-subtle-1 rounded-sm border border-subtle bg-surface-1 p-3 shadow-custom-shadow-rg"
className="w-56 divide-y divide-subtle-1 rounded-sm border border-subtle bg-surface-1 p-3 shadow-raised-200"
>
<div className="flex items-center justify-between gap-2 pb-3">
<button

2
apps/web/core/components/issues/issue-layouts/calendar/dropdowns/options-dropdown.tsx
View file

@ -129,7 +129,7 @@ export const CalendarOptionsDropdown = observer(function CalendarOptionsDropdown
ref={setPopperElement}
style={styles.popper}
{...attributes.popper}
className="absolute right-0 z-10 mt-1 min-w-[12rem] overflow-hidden rounded-sm border border-subtle bg-surface-1 p-1 shadow-custom-shadow-sm"
className="absolute right-0 z-10 mt-1 min-w-[12rem] overflow-hidden rounded-sm border border-subtle bg-surface-1 p-1 shadow-raised-200"
>
<div>
{Object.entries(CALENDAR_LAYOUTS).map(([layout, layoutDetails]) => (

2
apps/web/core/components/issues/issue-layouts/calendar/issue-block.tsx
View file

@ -106,7 +106,7 @@ export const CalendarIssueBlock = observer(
className={cn(
"group/calendar-block flex h-10 md:h-8 w-full items-center justify-between gap-1.5 rounded-sm md:px-1 px-4 py-1.5 ",
{
"bg-surface-2 shadow-custom-shadow-rg border-accent-strong": isDragging,
"bg-surface-2 shadow-raised-200 border-accent-strong": isDragging,
"bg-surface-1 hover:bg-surface-2": !isDragging,
"border border-accent-strong hover:border-accent-strong": getIsIssuePeeked(issue.id),
}

2
apps/web/core/components/issues/issue-layouts/list/list-group.tsx
View file

@ -252,7 +252,7 @@ export const ListGroup = observer(function ListGroup(props: Props) {
ref={groupRef}
className={cn(`relative flex flex-shrink-0 flex-col`, {
"border-accent-strong": isDraggingOverColumn,
"border-custom-error-200": isDraggingOverColumn && isDropDisabled,
"border-danger-subtle": isDraggingOverColumn && isDropDisabled,
})}
>
<Row

2
apps/web/core/components/issues/issue-layouts/quick-add/form/calendar.tsx
View file

@ -14,7 +14,7 @@ export const CalendarQuickAddIssueForm = observer(function CalendarQuickAddIssue
<form
ref={ref}
onSubmit={onSubmit}
className="z-50 flex w-full items-center gap-x-2 rounded-sm md:border-[0.5px] border-subtle bg-surface-1 px-2 md:shadow-custom-shadow-2xs transition-opacity"
className="z-50 flex w-full items-center gap-x-2 rounded-sm md:border-[0.5px] border-subtle bg-surface-1 px-2 md:shadow-raised-100 transition-opacity"
>
<h4 className="text-13 md:text-11 leading-5 text-placeholder">{projectDetail?.identifier ?? "..."}</h4>
<input

2
apps/web/core/components/issues/issue-layouts/quick-add/form/gantt.tsx
View file

@ -8,7 +8,7 @@ export const GanttQuickAddIssueForm = observer(function GanttQuickAddIssueForm(p
const { ref, projectDetail, hasError, register, onSubmit, isEpic } = props;
const { t } = useTranslation();
return (
<div className={cn("shadow-custom-shadow-sm", hasError && "border border-red-500/20 bg-red-500/10")}>
<div className={cn("shadow-raised-200", hasError && "border border-red-500/20 bg-red-500/10")}>
<form
ref={ref}
onSubmit={onSubmit}

2
apps/web/core/components/issues/issue-layouts/quick-add/form/kanban.tsx
View file

@ -7,7 +7,7 @@ export const KanbanQuickAddIssueForm = observer(function KanbanQuickAddIssueForm
const { ref, projectDetail, register, onSubmit, isEpic } = props;
const { t } = useTranslation();
return (
<div className="m-1 overflow-hidden rounded-sm shadow-custom-shadow-sm">
<div className="m-1 overflow-hidden rounded-sm shadow-raised-200">
<form ref={ref} onSubmit={onSubmit} className="flex w-full items-center gap-x-3 bg-surface-1 p-3">
<div className="w-full">
<h4 className="text-11 font-medium leading-5 text-tertiary">{projectDetail?.identifier ?? "..."}</h4>

2
apps/web/core/components/issues/issue-layouts/quick-add/form/list.tsx
View file

@ -7,7 +7,7 @@ export const ListQuickAddIssueForm = observer(function ListQuickAddIssueForm(pro
const { ref, projectDetail, register, onSubmit, isEpic } = props;
const { t } = useTranslation();
return (
<div className="shadow-custom-shadow-sm">
<div className="shadow-raised-200">
<form
ref={ref}
onSubmit={onSubmit}

2
apps/web/core/components/issues/issue-layouts/quick-add/form/spreadsheet.tsx
View file

@ -11,7 +11,7 @@ export const SpreadsheetQuickAddIssueForm = observer(function SpreadsheetQuickAd
<form
ref={ref}
onSubmit={onSubmit}
className="z-10 flex items-center gap-x-5 border-[0.5px] border-t-0 border-subtle bg-surface-1 px-4 shadow-custom-shadow-sm"
className="z-10 flex items-center gap-x-5 border-[0.5px] border-t-0 border-subtle bg-surface-1 px-4 shadow-raised-200"
>
<h4 className="w-20 text-11 leading-5 text-placeholder">{projectDetail?.identifier ?? "..."}</h4>
<input

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

@ -277,7 +277,7 @@ const IssueRowDetails = observer(function IssueRowDetails(props: IssueRowDetails
{/* Identifier section - conditionally rendered */}
{displayProperties?.key && (
<div className="flex-shrink-0 flex items-center h-full min-w-24">
<div className="relative flex cursor-pointer items-center text-11 hover:text-custom-text-100">
<div className="relative flex cursor-pointer items-center text-11 hover:text-primary">
{issueDetail.project_id && (
<IssueIdentifier
issueId={issueDetail.id}

2
apps/web/core/components/issues/issue-modal/form.tsx
View file

@ -485,7 +485,7 @@ export const IssueFormRoot = observer(function IssueFormRoot(props: IssueFormPro
<div
className={cn(
"px-4 py-3 border-t-[0.5px] border-subtle rounded-b-lg bg-surface-1",
activeAdditionalPropertiesLength > 0 && "shadow-custom-shadow-xs"
activeAdditionalPropertiesLength > 0 && "shadow-raised-100"
)}
>
<div className="pb-3">

2
apps/web/core/components/issues/issue-update-status.tsx
View file

@ -19,7 +19,7 @@ export const NameDescriptionUpdateStatus = observer(function NameDescriptionUpda
}`}
>
{isSubmitting !== "submitted" && isSubmitting !== "saved" && (
<RefreshCw className="animate-spin size-3.5 stroke-custom-text-300" />
<RefreshCw className="animate-spin size-3.5 stroke-tertiary" />
)}
<span className="text-13 text-tertiary">{isSubmitting === "submitting" ? "Saving..." : "Saved"}</span>
</div>

4
apps/web/core/components/issues/layout-quick-actions.tsx
View file

@ -48,7 +48,7 @@ export const LayoutQuickActions: React.FC<Props> = observer((props) => {
placement="bottom-end"
closeOnSelect
maxHeight="lg"
className="flex-shrink-0 flex items-center justify-center size-[26px] bg-custom-background-80/70 rounded"
className="flex-shrink-0 flex items-center justify-center size-[26px] rounded"
>
{MENU_ITEMS.map((item) => {
if (item.shouldRender === false) return null;
@ -57,7 +57,7 @@ export const LayoutQuickActions: React.FC<Props> = observer((props) => {
key={item.key}
onClick={item.action}
className={cn("flex items-center gap-2", {
"text-custom-text-400": item.disabled,
"text-placeholder": item.disabled,
})}
disabled={item.disabled}
>

2
apps/web/core/components/issues/preview-card/root.tsx
View file

@ -32,7 +32,7 @@ export const WorkItemPreviewCard = observer(function WorkItemPreviewCard(props:
const stateName = stateDetails?.name ?? fallbackStateDetails?.name;
return (
<div className="p-3 space-y-2 w-72 rounded-lg shadow-custom-shadow-rg bg-surface-1 border-[0.5px] border-strong">
<div className="p-3 space-y-2 w-72 rounded-lg shadow-raised-200 bg-surface-1 border-[0.5px] border-strong">
<div className="flex items-center justify-between gap-3 text-secondary">
<IssueIdentifier
size="xs"

2
apps/web/core/components/issues/select/base.tsx
View file

@ -188,7 +188,7 @@ export const WorkItemLabelSelectBase = observer(function WorkItemLabelSelectBase
{isDropdownOpen && (
<Combobox.Options className="fixed z-10" static>
<div
className="my-1 w-48 rounded-sm border-[0.5px] border-strong bg-surface-1 px-2 py-2.5 text-11 shadow-custom-shadow-rg focus:outline-none"
className="my-1 w-48 rounded-sm border-[0.5px] border-strong bg-surface-1 px-2 py-2.5 text-11 shadow-raised-200 focus:outline-none"
ref={setPopperElement}
style={styles.popper}
{...attributes.popper}

2
apps/web/core/components/labels/create-update-label-inline.tsx
View file

@ -34,7 +34,7 @@ type TCreateUpdateLabelInlineProps = {
const defaultValues: Partial<IIssueLabel> = {
name: "",
color: "rgb(var(--color-text-200))",
color: "var(--text-color-secondary)",
};
export const CreateUpdateLabelInline = observer(

6
apps/web/core/components/onboarding/invite-members.tsx
View file

@ -197,9 +197,7 @@ const InviteMemberInput = observer(function InviteMemberInput(props: InviteMembe
<ChevronDownIcon
className={`size-3 ${
!getValues(`emails.${index}.role_active`)
? "stroke-onboarding-text-400"
: "stroke-onboarding-text-100"
!getValues(`emails.${index}.role_active`) ? "stroke-placeholder" : "stroke-primary"
}`}
/>
</Listbox.Button>
@ -387,7 +385,7 @@ export function InviteMembers(props: Props) {
</div>
<button
type="button"
className="flex items-center mx-8 gap-1.5 bg-transparent text-13 font-medium text-accent-primary outline-custom-primary-100"
className="flex items-center mx-8 gap-1.5 bg-transparent text-13 font-medium text-accent-primary outline-accent-strong"
onClick={appendField}
>
<Plus className="h-4 w-4" strokeWidth={2} />

10
apps/web/core/components/onboarding/profile-setup.tsx
View file

@ -315,7 +315,7 @@ export const ProfileSetup = observer(function ProfileSetup(props: Props) {
{!userAvatar || userAvatar === "" ? (
<div className="flex flex-col items-center justify-between">
<div className="relative h-14 w-14 overflow-hidden">
<div className="absolute left-0 top-0 flex items-center justify-center h-full w-full rounded-full text-on-color text-24 font-medium bg-[#9747FF] uppercase">
<div className="absolute left-0 top-0 flex items-center justify-center h-full w-full rounded-full text-on-color text-24 font-medium bg-accent-primary uppercase">
{watch("first_name")[0] ?? "R"}
</div>
</div>
@ -437,12 +437,12 @@ export const ProfileSetup = observer(function ProfileSetup(props: Props) {
/>
{showPassword.password ? (
<EyeOff
className="absolute right-3 h-4 w-4 stroke-custom-text-400 hover:cursor-pointer"
className="absolute right-3 h-4 w-4 stroke-placeholder hover:cursor-pointer"
onClick={() => handleShowPassword("password")}
/>
) : (
<Eye
className="absolute right-3 h-4 w-4 stroke-custom-text-400 hover:cursor-pointer"
className="absolute right-3 h-4 w-4 stroke-placeholder hover:cursor-pointer"
onClick={() => handleShowPassword("password")}
/>
)}
@ -477,12 +477,12 @@ export const ProfileSetup = observer(function ProfileSetup(props: Props) {
/>
{showPassword.retypePassword ? (
<EyeOff
className="absolute right-3 h-4 w-4 stroke-custom-text-400 hover:cursor-pointer"
className="absolute right-3 h-4 w-4 stroke-placeholder hover:cursor-pointer"
onClick={() => handleShowPassword("retypePassword")}
/>
) : (
<Eye
className="absolute right-3 h-4 w-4 stroke-custom-text-400 hover:cursor-pointer"
className="absolute right-3 h-4 w-4 stroke-placeholder hover:cursor-pointer"
onClick={() => handleShowPassword("retypePassword")}
/>
)}

2
apps/web/core/components/onboarding/steps/profile/root.tsx
View file

@ -172,7 +172,7 @@ export const ProfileSetupStep = observer(function ProfileSetupStep({ handleStepC
/>
<div className="flex items-center gap-4">
<button
className="size-12 rounded-full bg-[#028375] flex items-center justify-center text-on-color font-semibold text-18"
className="size-12 rounded-full bg-accent-primary flex items-center justify-center text-on-color font-semibold text-18"
type="button"
onClick={() => setIsImageUploadModalOpen(true)}
>

6
apps/web/core/components/onboarding/steps/team/root.tsx
View file

@ -198,9 +198,7 @@ const InviteMemberInput = observer(function InviteMemberInput(props: InviteMembe
<ChevronDownIcon
className={`size-3 ${
!getValues(`emails.${index}.role_active`)
? "stroke-onboarding-text-400"
: "stroke-onboarding-text-100"
!getValues(`emails.${index}.role_active`) ? "stroke-placeholder" : "stroke-primary"
}`}
/>
</Listbox.Button>
@ -387,7 +385,7 @@ export const InviteTeamStep = observer(function InviteTeamStep(props: Props) {
</div>
<button
type="button"
className="flex items-center mx-8 gap-1.5 bg-transparent text-13 font-medium text-accent-primary outline-custom-primary-100"
className="flex items-center mx-8 gap-1.5 bg-transparent text-13 font-medium text-accent-primary outline-accent-strong"
onClick={appendField}
>
<Plus className="h-4 w-4" strokeWidth={2} />

2
apps/web/core/components/onboarding/switch-account-dropdown.tsx
View file

@ -55,7 +55,7 @@ export const SwitchAccountDropdown = observer(function SwitchAccountDropdown(pro
leaveFrom="transform scale-100 opacity-100"
leaveTo="transform scale-95 opacity-0"
>
<Menu.Items className="absolute z-10 right-0 rounded-md border-[0.5px] border-strong mt-2 bg-surface-1 px-2 py-2.5 text-13 min-w-[12rem] shadow-custom-shadow-rg">
<Menu.Items className="absolute z-10 right-0 rounded-md border-[0.5px] border-strong mt-2 bg-surface-1 px-2 py-2.5 text-13 min-w-[12rem] shadow-raised-200">
<Menu.Item
as="button"
type="button"

11
apps/web/core/components/pages/editor/content-limit-banner.tsx
View file

@ -8,13 +8,8 @@ type Props = {
export function ContentLimitBanner({ className, onDismiss }: Props) {
return (
<div
className={cn(
"flex items-center gap-2 bg-custom-background-80 border-b border-custom-border-200 px-4 py-2.5 text-sm",
className
)}
>
<div className="flex items-center gap-2 text-custom-text-200 mx-auto">
<div className={cn("flex items-center gap-2 bg-layer-2 border-b border-subtle-1 px-4 py-2.5 text-sm", className)}>
<div className="flex items-center gap-2 text-secondary mx-auto">
<span className="text-amber-500">
<TriangleAlert />
</span>
@ -26,7 +21,7 @@ export function ContentLimitBanner({ className, onDismiss }: Props) {
<button
type="button"
onClick={onDismiss}
className="ml-auto text-custom-text-300 hover:text-custom-text-200"
className="ml-auto text-placeholder hover:text-secondary"
aria-label="Dismiss content limit warning"
>
✕

2
apps/web/core/components/pages/editor/summary/content-browser.tsx
View file

@ -63,7 +63,7 @@ export function PageContentBrowser(props: Props) {
return (
<div
key={`${marking.level}-${marking.sequence}`}
className="flex-shrink-0 h-0.5 bg-custom-border-400 self-end rounded-xs"
className="flex-shrink-0 h-0.5 bg-layer-3 self-end rounded-xs"
style={{
width: marking.level === 1 ? "20px" : marking.level === 2 ? "18px" : "14px",
}}

2
apps/web/core/components/pages/editor/toolbar/color-dropdown.tsx
View file

@ -59,7 +59,7 @@ export const ColorDropdown = memo(function ColorDropdown(props: Props) {
</Popover.Button>
<Popover.Panel
as="div"
className="fixed z-20 mt-1 rounded-md border-[0.5px] border-strong bg-surface-1 shadow-custom-shadow-rg p-2 space-y-2"
className="fixed z-20 mt-1 rounded-md border-[0.5px] border-strong bg-surface-1 shadow-raised-200 p-2 space-y-2"
>
<div className="space-y-1.5">
<p className="text-11 text-tertiary font-semibold">Text colors</p>

2
apps/web/core/components/power-k/ui/modal/header.tsx
View file

@ -41,7 +41,7 @@ export function PowerKModalHeader(props: Props) {
value={searchTerm}
onValueChange={onSearchChange}
placeholder={placeholder}
className="flex-1 bg-transparent text-13 text-primary placeholder-custom-text-400 outline-none"
className="flex-1 bg-transparent text-13 text-primary placeholder-(--text-color-placeholder) outline-none"
autoFocus
/>
{searchTerm && (

3
apps/web/core/components/profile/overview/state-distribution.tsx
View file

@ -59,7 +59,8 @@ export function ProfileStateDistribution({ stateDistribution, userProfile }: Pro
<div
className="h-2.5 w-2.5 rounded-xs"
style={{
backgroundColor: STATE_GROUPS[group.state_group]?.color ?? "rgb(var(--color-primary-100))",
backgroundColor:
STATE_GROUPS[group.state_group]?.color ?? "var(--background-color-accent-primary)",
}}
/>
<div className="whitespace-nowrap">{STATE_GROUPS[group.state_group].label}</div>

2
apps/web/core/components/profile/sidebar.tsx
View file

@ -117,7 +117,7 @@ export const ProfileSidebar = observer(function ProfileSidebar(props: TProfileSi
className="h-full w-full rounded-sm object-cover"
/>
) : (
<div className="flex h-[52px] w-[52px] items-center justify-center rounded-sm bg-[#028375] capitalize text-on-color">
<div className="flex h-[52px] w-[52px] items-center justify-center rounded-sm bg-accent-primary capitalize text-on-color">
{userData?.first_name?.[0]}
</div>
)}

2
apps/web/core/components/workspace/sidebar/workspace-menu-root.tsx
View file

@ -141,7 +141,7 @@ export const WorkspaceMenuRoot = observer(function WorkspaceMenuRoot(props: Work
<Menu.Items as={Fragment}>
<div
className={cn(
"fixed z-21 mt-1 flex w-[19rem] origin-top-left flex-col divide-y divide-subtle rounded-md border-[0.5px] border-strong bg-surface-1 shadow-custom-shadow-rg outline-none",
"fixed z-21 mt-1 flex w-[19rem] origin-top-left flex-col divide-y divide-subtle rounded-md border-[0.5px] border-strong bg-surface-1 shadow-raised-200 outline-none",
{
"top-11 left-14": variant === "sidebar",
"top-10 left-4": variant === "top-navigation",

11
apps/web/styles/emoji.css
View file

@ -6,7 +6,7 @@
--epr-picker-border-radius: 0.25rem !important;
--epr-horizontal-padding: 0.5rem !important;
--epr-emoji-padding: 0.5rem !important;
background-color: rgba(var(--color-background-100)) !important;
@apply bg-surface-1!;
}
.epr-main {
@ -16,8 +16,7 @@
.epr-emoji-category-label {
font-size: 0.7875rem !important;
background-color: rgba(var(--color-background-100), 0.8) !important;
@apply text-tertiary!;
@apply bg-surface-1/80! text-tertiary!;
}
.epr-category-nav,
@ -27,7 +26,7 @@
button.epr-emoji:hover > *,
button.epr-emoji:focus > * {
background-color: rgba(var(--color-background-80)) !important;
@apply bg-layer-2!;
}
input.epr-search {
@ -43,12 +42,12 @@
}
button.epr-btn-clear-search:hover {
background-color: rgba(var(--color-background-80)) !important;
@apply bg-layer-2!;
@apply text-tertiary!;
}
.epr-emoji-variation-picker {
background-color: rgba(var(--color-background-100)) !important;
@apply bg-surface-1!;
@apply border-subtle-1!;
}
}

68
apps/web/styles/globals.css
View file

@ -5,62 +5,6 @@
@import "./emoji.css";
@plugin "@tailwindcss/typography";
:root {
/* Plane subscriptions */
--color-subscription-free-200: 69, 80, 104;
--color-subscription-free-400: 51, 59, 77;
--color-subscription-one-200: 101, 42, 14;
--color-subscription-one-400: 90, 37, 12;
--color-subscription-pro-200: 32, 128, 138;
--color-subscription-pro-400: 24, 96, 104;
--color-subscription-business-200: 142, 33, 87;
--color-subscription-business-400: 103, 24, 63;
--color-subscription-enterprise-200: 86, 5, 145;
--color-subscription-enterprise-400: 73, 4, 123;
}
[data-theme="light"],
[data-theme="light-contrast"] {
/* Plane subscriptions */
--color-subscription-free-200: 69, 80, 104;
--color-subscription-free-400: 51, 59, 77;
--color-subscription-one-200: 101, 42, 14;
--color-subscription-one-400: 90, 37, 12;
--color-subscription-pro-200: 32, 128, 138;
--color-subscription-pro-400: 24, 96, 104;
--color-subscription-business-200: 142, 33, 87;
--color-subscription-business-400: 103, 24, 63;
--color-subscription-enterprise-200: 86, 5, 145;
--color-subscription-enterprise-400: 73, 4, 123;
}
[data-theme="dark"],
[data-theme="dark-contrast"] {
/* Plane subscriptions */
--color-subscription-free-200: 206, 213, 232;
--color-subscription-free-400: 152, 166, 206;
--color-subscription-one-200: 255, 148, 153;
--color-subscription-one-400: 200, 118, 121;
--color-subscription-pro-200: 12, 170, 192;
--color-subscription-pro-400: 9, 130, 154;
--color-subscription-business-200: 206, 34, 119;
--color-subscription-business-400: 140, 23, 81;
--color-subscription-enterprise-200: 182, 71, 255;
--color-subscription-enterprise-400: 134, 11, 203;
}
/* stickies and editor colors */
:root {
/* text colors */
@ -219,7 +163,7 @@
@keyframes highlight {
0% {
background-color: rgba(var(--color-background-90), 1);
background-color: var(--background-color-layer-2);
border-radius: 4px;
}
100% {
@ -230,7 +174,7 @@
/* Progress Bar Styles */
:root {
--bprogress-color: rgb(var(--color-primary-100)) !important;
--bprogress-color: var(--background-color-accent-primary);
--bprogress-height: 2.5px !important;
}
@ -241,8 +185,8 @@
.bprogress .bar {
background: linear-gradient(
90deg,
rgba(var(--color-primary-100), 0.8) 0%,
rgba(var(--color-primary-100), 1) 100%
--alpha(var(--background-color-accent-primary) / 80%) 0%,
--alpha(var(--background-color-accent-primary) / 100%) 100%
) !important;
will-change: width, opacity;
}
@ -250,7 +194,7 @@
.bprogress .peg {
display: block;
box-shadow:
0 0 8px rgba(var(--color-primary-100), 0.6),
0 0 4px rgba(var(--color-primary-100), 0.4) !important;
0 0 8px --alpha(var(--background-color-accent-primary) / 60%),
0 0 4px --alpha(var(--background-color-accent-primary) / 40%) !important;
will-change: transform, opacity;
}