chore: update primary colors

This commit is contained in:
Aaryan Khandelwal
2025-12-04 18:55:08 +05:30
parent 71d142e953
commit 8d10fcbbfe
175 changed files with 286 additions and 297 deletions

View File

@@ -42,7 +42,7 @@ export function InstanceAIForm(props: IInstanceAIForm) {
<a
href="https://platform.openai.com/docs/models/overview"
target="_blank"
className="text-custom-primary-100 hover:underline"
className="text-accent-primary hover:underline"
rel="noreferrer"
>
Learn more
@@ -63,7 +63,7 @@ export function InstanceAIForm(props: IInstanceAIForm) {
<a
href="https://platform.openai.com/api-keys"
target="_blank"
className="text-custom-primary-100 hover:underline"
className="text-accent-primary hover:underline"
rel="noreferrer"
>
here.
@@ -119,7 +119,7 @@ export function InstanceAIForm(props: IInstanceAIForm) {
{isSubmitting ? "Saving..." : "Save changes"}
</Button>
<div className="relative inline-flex items-center gap-2 rounded-sm border border-custom-primary-100/20 bg-custom-primary-100/10 px-4 py-2 text-11 text-custom-primary-200">
<div className="relative inline-flex items-center gap-2 rounded-sm border border-accent-strong/20 bg-accent-primary/10 px-4 py-2 text-11 text-custom-primary-200">
<Lightbulb height="14" width="14" />
<div>
If you have a preferred AI models vendor, please get in{" "}

View File

@@ -69,7 +69,7 @@ export function InstanceGiteaConfigForm(props: Props) {
tabIndex={-1}
href="https://gitea.com/user/settings/applications"
target="_blank"
className="text-custom-primary-100 hover:underline"
className="text-accent-primary hover:underline"
rel="noreferrer"
>
Gitea OAuth application settings.
@@ -91,7 +91,7 @@ export function InstanceGiteaConfigForm(props: Props) {
tabIndex={-1}
href="https://gitea.com/user/settings/applications"
target="_blank"
className="text-custom-primary-100 hover:underline"
className="text-accent-primary hover:underline"
rel="noreferrer"
>
Gitea OAuth application settings.
@@ -117,7 +117,7 @@ export function InstanceGiteaConfigForm(props: Props) {
tabIndex={-1}
href={`${control._formValues.GITEA_HOST || "https://gitea.com"}/user/settings/applications`}
target="_blank"
className="text-custom-primary-100 hover:underline"
className="text-accent-primary hover:underline"
rel="noreferrer"
>
here.

View File

@@ -60,7 +60,7 @@ export function InstanceGithubConfigForm(props: Props) {
tabIndex={-1}
href="https://github.com/settings/applications/new"
target="_blank"
className="text-custom-primary-100 hover:underline"
className="text-accent-primary hover:underline"
rel="noreferrer"
>
GitHub OAuth application settings.
@@ -82,7 +82,7 @@ export function InstanceGithubConfigForm(props: Props) {
tabIndex={-1}
href="https://github.com/settings/applications/new"
target="_blank"
className="text-custom-primary-100 hover:underline"
className="text-accent-primary hover:underline"
rel="noreferrer"
>
GitHub OAuth application settings.
@@ -116,7 +116,7 @@ export function InstanceGithubConfigForm(props: Props) {
tabIndex={-1}
href="https://github.com/settings/applications/new"
target="_blank"
className="text-custom-primary-100 hover:underline"
className="text-accent-primary hover:underline"
rel="noreferrer"
>
here.
@@ -139,7 +139,7 @@ export function InstanceGithubConfigForm(props: Props) {
tabIndex={-1}
href="https://github.com/settings/applications/new"
target="_blank"
className="text-custom-primary-100 hover:underline"
className="text-accent-primary hover:underline"
rel="noreferrer"
>
here.

View File

@@ -71,7 +71,7 @@ export function InstanceGitlabConfigForm(props: Props) {
tabIndex={-1}
href="https://docs.gitlab.com/ee/integration/oauth_provider.html"
target="_blank"
className="text-custom-primary-100 hover:underline"
className="text-accent-primary hover:underline"
rel="noreferrer"
>
GitLab OAuth application settings
@@ -94,7 +94,7 @@ export function InstanceGitlabConfigForm(props: Props) {
tabIndex={-1}
href="https://docs.gitlab.com/ee/integration/oauth_provider.html"
target="_blank"
className="text-custom-primary-100 hover:underline"
className="text-accent-primary hover:underline"
rel="noreferrer"
>
GitLab OAuth application settings
@@ -120,7 +120,7 @@ export function InstanceGitlabConfigForm(props: Props) {
tabIndex={-1}
href="https://docs.gitlab.com/ee/integration/oauth_provider.html"
target="_blank"
className="text-custom-primary-100 hover:underline"
className="text-accent-primary hover:underline"
rel="noreferrer"
>
GitLab OAuth application

View File

@@ -58,7 +58,7 @@ export function InstanceGoogleConfigForm(props: Props) {
tabIndex={-1}
href="https://developers.google.com/identity/protocols/oauth2/javascript-implicit-flow#creatingcred"
target="_blank"
className="text-custom-primary-100 hover:underline"
className="text-accent-primary hover:underline"
rel="noreferrer"
>
Learn more
@@ -80,7 +80,7 @@ export function InstanceGoogleConfigForm(props: Props) {
tabIndex={-1}
href="https://developers.google.com/identity/oauth2/web/guides/get-google-api-clientid"
target="_blank"
className="text-custom-primary-100 hover:underline"
className="text-accent-primary hover:underline"
rel="noreferrer"
>
Learn more
@@ -105,7 +105,7 @@ export function InstanceGoogleConfigForm(props: Props) {
<a
href="https://console.cloud.google.com/apis/credentials/oauthclient"
target="_blank"
className="text-custom-primary-100 hover:underline"
className="text-accent-primary hover:underline"
rel="noreferrer"
>
here.
@@ -127,7 +127,7 @@ export function InstanceGoogleConfigForm(props: Props) {
<a
href="https://console.cloud.google.com/apis/credentials/oauthclient"
target="_blank"
className="text-custom-primary-100 hover:underline"
className="text-accent-primary hover:underline"
rel="noreferrer"
>
here.

View File

@@ -123,7 +123,7 @@ export const GeneralConfigurationForm = observer(function GeneralConfigurationFo
<a
href="https://developers.plane.so/self-hosting/telemetry"
target="_blank"
className="text-custom-primary-100 hover:underline"
className="text-accent-primary hover:underline"
rel="noreferrer"
>
our Telemetry Policy.

View File

@@ -56,7 +56,7 @@ export function InstanceImageConfigForm(props: IInstanceImageConfigForm) {
<a
href="https://unsplash.com/documentation#creating-a-developer-account"
target="_blank"
className="text-custom-primary-100 hover:underline"
className="text-accent-primary hover:underline"
rel="noreferrer"
>
Learn more.

View File

@@ -55,7 +55,7 @@ export const AdminSidebarHelpSection = observer(function AdminSidebarHelpSection
<Tooltip tooltipContent="Redirect to Plane" position="right" className="ml-4" disabled={!isSidebarCollapsed}>
<a
href={redirectionLink}
className={`relative px-2 py-1.5 flex items-center gap-2 font-medium rounded-sm border border-custom-primary-100/20 bg-custom-primary-100/10 text-11 text-custom-primary-200 whitespace-nowrap`}
className={`relative px-2 py-1.5 flex items-center gap-2 font-medium rounded-sm border border-accent-strong/20 bg-accent-primary/10 text-11 text-custom-primary-200 whitespace-nowrap`}
>
<ExternalLink size={14} />
{!isSidebarCollapsed && "Redirect to Plane"}

View File

@@ -72,7 +72,7 @@ export const AdminSidebarMenu = observer(function AdminSidebarMenu() {
className={cn(
`group flex w-full items-center gap-3 rounded-md px-3 py-2 outline-none transition-colors`,
isActive
? "bg-custom-primary-100/10 text-custom-primary-100"
? "bg-accent-primary/10 text-accent-primary"
: "text-secondary hover:bg-layer-1 focus:bg-layer-1",
isSidebarCollapsed ? "justify-center" : "w-[260px]"
)}
@@ -83,7 +83,7 @@ export const AdminSidebarMenu = observer(function AdminSidebarMenu() {
<div
className={cn(
`text-13 font-medium transition-colors`,
isActive ? "text-custom-primary-100" : "text-secondary"
isActive ? "text-accent-primary" : "text-secondary"
)}
>
{item.name}

View File

@@ -14,13 +14,13 @@ export function AuthBanner(props: TAuthBanner) {
if (!bannerData) return <></>;
return (
<div className="relative flex items-center p-2 rounded-md gap-2 border border-custom-primary-100/50 bg-custom-primary-100/10">
<div className="relative flex items-center p-2 rounded-md gap-2 border border-accent-strong/50 bg-accent-primary/10">
<div className="w-4 h-4 flex-shrink-0 relative flex justify-center items-center">
<Info size={16} className="text-custom-primary-100" />
<Info size={16} className="text-accent-primary" />
</div>
<div className="w-full text-13 font-medium text-custom-primary-100">{bannerData?.message}</div>
<div className="w-full text-13 font-medium text-accent-primary">{bannerData?.message}</div>
<div
className="relative ml-auto w-6 h-6 rounded-xs flex justify-center items-center transition-all cursor-pointer hover:bg-custom-primary-100/20 text-custom-primary-100/80"
className="relative ml-auto w-6 h-6 rounded-xs flex justify-center items-center transition-all cursor-pointer hover:bg-accent-primary/20 text-accent-primary/80"
onClick={() => handleBannerData && handleBannerData(undefined)}
>
<CloseIcon className="w-4 h-4 flex-shrink-0" />

View File

@@ -13,13 +13,13 @@ export function AuthBanner(props: TAuthBanner) {
if (!bannerData) return <></>;
return (
<div className="relative flex items-center p-2 rounded-md gap-2 border border-custom-primary-100/50 bg-custom-primary-100/10">
<div className="relative flex items-center p-2 rounded-md gap-2 border border-accent-strong/50 bg-accent-primary/10">
<div className="w-4 h-4 flex-shrink-0 relative flex justify-center items-center">
<Info size={16} className="text-custom-primary-100" />
<Info size={16} className="text-accent-primary" />
</div>
<div className="w-full text-13 font-medium text-custom-primary-100">{bannerData?.message}</div>
<div className="w-full text-13 font-medium text-accent-primary">{bannerData?.message}</div>
<div
className="relative ml-auto w-6 h-6 rounded-xs flex justify-center items-center transition-all cursor-pointer hover:bg-custom-primary-100/20 text-custom-primary-100/80"
className="relative ml-auto w-6 h-6 rounded-xs flex justify-center items-center transition-all cursor-pointer hover:bg-accent-primary/20 text-accent-primary/80"
onClick={() => handleBannerData && handleBannerData(undefined)}
>
<CloseIcon className="w-4 h-4 flex-shrink-0" />

View File

@@ -27,12 +27,9 @@ export const EditorUserMention = observer(function EditorUserMention(props: Prop
return (
<div
className={cn(
"not-prose inline px-1 py-0.5 rounded-sm bg-custom-primary-100/20 text-custom-primary-100 no-underline",
{
"bg-yellow-500/20 text-yellow-500": id === currentUser?.id,
}
)}
className={cn("not-prose inline px-1 py-0.5 rounded-sm bg-accent-primary/20 text-accent-primary no-underline", {
"bg-yellow-500/20 text-yellow-500": id === currentUser?.id,
})}
>
@{userDetails?.member__display_name}
</div>

View File

@@ -21,7 +21,7 @@ export function FilterOption(props: Props) {
>
<div
className={`grid h-3 w-3 flex-shrink-0 place-items-center border bg-surface-2 ${
isChecked ? "border-custom-primary-100 bg-custom-primary-100 text-white" : "border-strong"
isChecked ? "border-accent-strong bg-accent-primary text-white" : "border-strong"
} ${multiple ? "rounded-xs" : "rounded-full"}`}
>
{isChecked && <Check size={10} strokeWidth={3} />}

View File

@@ -59,7 +59,7 @@ export function FilterLabels(props: Props) {
{filteredOptions.length > 5 && (
<button
type="button"
className="ml-8 text-11 font-medium text-custom-primary-100"
className="ml-8 text-11 font-medium text-accent-primary"
onClick={handleViewToggle}
>
{itemsToRender === filteredOptions.length ? "View less" : "View all"}

View File

@@ -59,7 +59,7 @@ export const FilterState = observer(function FilterState(props: Props) {
{filteredOptions.length > 5 && (
<button
type="button"
className="ml-8 text-11 font-medium text-custom-primary-100"
className="ml-8 text-11 font-medium text-accent-primary"
onClick={handleViewToggle}
>
{itemsToRender === filteredOptions.length ? "View less" : "View all"}

View File

@@ -88,7 +88,7 @@ export const KanbanGroup = observer(function KanbanGroup(props: IKanbanGroup) {
<KanbanIssueBlockLoader />
) : (
<div
className="w-full p-3 text-13 font-medium text-custom-primary-100 hover:text-custom-primary-200 hover:underline cursor-pointer"
className="w-full p-3 text-13 font-medium text-accent-primary hover:text-custom-primary-200 hover:underline cursor-pointer"
onClick={loadMoreIssuesInThisGroup}
>
{" "}

View File

@@ -94,7 +94,7 @@ export const ListGroup = observer(function ListGroup(props: Props) {
) : (
<div
className={
"h-11 relative flex items-center gap-3 bg-surface-1 border border-transparent border-t-subtle-1 pl-6 p-3 text-13 font-medium text-custom-primary-100 hover:text-custom-primary-200 hover:underline cursor-pointer"
"h-11 relative flex items-center gap-3 bg-surface-1 border border-transparent border-t-subtle-1 pl-6 p-3 text-13 font-medium text-accent-primary hover:text-custom-primary-200 hover:underline cursor-pointer"
}
onClick={() => loadMoreIssues(group.id)}
>

View File

@@ -22,7 +22,7 @@ export function IssueBlockPriority({
urgent: "bg-red-600/10 text-red-600 border-red-600 px-1",
high: "bg-orange-500/20 text-orange-950 border-orange-500",
medium: "bg-yellow-500/20 text-yellow-950 border-yellow-500",
low: "bg-custom-primary-100/20 text-custom-primary-950 border-custom-primary-100",
low: "bg-accent-primary/20 text-custom-primary-950 border-accent-strong",
none: "hover:bg-layer-1 border-strong",
};

View File

@@ -29,7 +29,7 @@ export function ProfileNavbar(props: Props) {
<span
className={`flex whitespace-nowrap border-b-2 p-4 text-13 font-medium outline-none ${
pathname === `/${workspaceSlug}/profile/${userId}${tab.selected}`
? "border-custom-primary-100 text-custom-primary-100"
? "border-accent-strong text-accent-primary"
: "border-transparent"
}`}
>

View File

@@ -93,7 +93,7 @@ export const ProjectArchivesHeader = observer(function ProjectArchivesHeader(pro
tooltipContent={`There are ${issueCount} ${issueCount > 1 ? "work items" : "work item"} in project's archived`}
position="bottom"
>
<span className="cursor-default flex items-center text-center justify-center px-2.5 py-0.5 flex-shrink-0 bg-custom-primary-100/20 text-custom-primary-100 text-11 font-semibold rounded-xl">
<span className="cursor-default flex items-center text-center justify-center px-2.5 py-0.5 flex-shrink-0 bg-accent-primary/20 text-accent-primary text-11 font-semibold rounded-xl">
{issueCount}
</span>
</Tooltip>

View File

@@ -173,7 +173,7 @@ export const CycleIssuesHeader = observer(function CycleIssuesHeader() {
} in this cycle`}
position="bottom"
>
<span className="flex flex-shrink-0 cursor-default items-center justify-center rounded-xl bg-custom-primary-100/20 px-2 text-center text-11 font-semibold text-custom-primary-100">
<span className="flex flex-shrink-0 cursor-default items-center justify-center rounded-xl bg-accent-primary/20 px-2 text-center text-11 font-semibold text-accent-primary">
{workItemsCount}
</span>
</Tooltip>

View File

@@ -163,7 +163,7 @@ export const ModuleIssuesHeader = observer(function ModuleIssuesHeader() {
} in this module`}
position="bottom"
>
<span className="flex flex-shrink-0 cursor-default items-center justify-center rounded-xl bg-custom-primary-100/20 px-2 text-center text-11 font-semibold text-custom-primary-100">
<span className="flex flex-shrink-0 cursor-default items-center justify-center rounded-xl bg-accent-primary/20 px-2 text-center text-11 font-semibold text-accent-primary">
{workItemsCount}
</span>
</Tooltip>

View File

@@ -25,7 +25,7 @@ export const MobileWorkspaceSettingsTabs = observer(function MobileWorkspaceSett
<div
className={`${
item.highlight(pathname, `/${workspaceSlug}`)
? "text-custom-primary-100 text-13 py-2 px-3 whitespace-nowrap flex flex-grow cursor-pointer justify-around border-b border-custom-primary-200"
? "text-accent-primary text-13 py-2 px-3 whitespace-nowrap flex flex-grow cursor-pointer justify-around border-b border-custom-primary-200"
: "text-secondary flex flex-grow cursor-pointer justify-around border-b border-subtle-1 text-13 py-2 px-3 whitespace-nowrap"
}`}
key={index}

View File

@@ -153,7 +153,7 @@ function UserInvitationsPage() {
<div
key={invitation.id}
className={`flex cursor-pointer items-center gap-2 rounded-sm border px-3.5 py-5 ${
isSelected ? "border-custom-primary-100" : "border-subtle-1 hover:bg-layer-1"
isSelected ? "border-accent-strong" : "border-subtle-1 hover:bg-layer-1"
}`}
onClick={() => handleInvitation(invitation, isSelected ? "withdraw" : "accepted")}
>
@@ -168,7 +168,7 @@ function UserInvitationsPage() {
<div className="text-13 font-medium">{truncateText(invitation.workspace.name, 30)}</div>
<p className="text-11 text-secondary">{ROLE[invitation.role]}</p>
</div>
<span className={`flex-shrink-0 ${isSelected ? "text-custom-primary-100" : "text-secondary"}`}>
<span className={`flex-shrink-0 ${isSelected ? "text-accent-primary" : "text-secondary"}`}>
<CheckCircle2 className="h-5 w-5" />
</span>
</div>

View File

@@ -65,7 +65,7 @@ export function ProdErrorComponent({ onGoHome }: ProdErrorComponentProps) {
href={link.value}
target="_blank"
rel="noopener noreferrer"
className="text-custom-primary-100 hover:underline text-13"
className="text-accent-primary hover:underline text-13"
>
{link.label}
</a>

View File

@@ -12,7 +12,7 @@ export const ProductUpdatesHeader = observer(function ProductUpdatesHeader() {
<div className="flex gap-2 text-18 font-medium">{t("whats_new")}</div>
<div
className={cn(
"px-2 mx-2 py-0.5 text-center text-11 font-medium rounded-full bg-custom-primary-100/20 text-custom-primary-100"
"px-2 mx-2 py-0.5 text-center text-11 font-medium rounded-full bg-accent-primary/20 text-accent-primary"
)}
>
{t("version")}: v{packageJson.version}

View File

@@ -25,7 +25,7 @@ export function MaintenanceMessage() {
href={link.value}
target="_blank"
rel="noopener noreferrer"
className="text-custom-primary-100 hover:underline text-13"
className="text-accent-primary hover:underline text-13"
>
{link.label}
</a>

View File

@@ -89,7 +89,7 @@ export const IssuesHeader = observer(function IssuesHeader() {
{currentProjectDetails?.anchor ? (
<a
href={publishedURL}
className="group flex items-center gap-1.5 rounded-sm bg-custom-primary-100/10 px-2.5 py-1 text-11 font-medium text-custom-primary-100"
className="group flex items-center gap-1.5 rounded-sm bg-accent-primary/10 px-2.5 py-1 text-11 font-medium text-accent-primary"
target="_blank"
rel="noopener noreferrer"
>

View File

@@ -91,7 +91,7 @@ export const TourRoot = observer(function TourRoot(props: TOnboardingTourProps)
{step === "welcome" ? (
<div className="w-4/5 overflow-hidden rounded-[10px] bg-surface-1 md:w-1/2 lg:w-2/5">
<div className="h-full overflow-hidden">
<div className="grid h-64 place-items-center bg-custom-primary-100">
<div className="grid h-64 place-items-center bg-accent-primary">
<PlaneLockup className="h-10 w-auto text-white" />
</div>
<div className="flex flex-col overflow-y-auto p-6">
@@ -117,7 +117,7 @@ export const TourRoot = observer(function TourRoot(props: TOnboardingTourProps)
</Button>
<button
type="button"
className="bg-transparent text-11 font-medium text-custom-primary-100 outline-custom-text-100"
className="bg-transparent text-11 font-medium text-accent-primary outline-custom-text-100"
onClick={() => {
captureClick({
elementName: PRODUCT_TOUR_TRACKER_ELEMENTS.SKIP_BUTTON,
@@ -144,7 +144,7 @@ export const TourRoot = observer(function TourRoot(props: TOnboardingTourProps)
<TourSidebar step={step} setStep={setStep} />
<div className="col-span-10 h-full overflow-hidden lg:col-span-7">
<div
className={`flex h-1/2 items-end overflow-hidden bg-custom-primary-100 sm:h-3/5 ${
className={`flex h-1/2 items-end overflow-hidden bg-accent-primary sm:h-3/5 ${
currentStepIndex % 2 === 0 ? "justify-end" : "justify-start"
}`}
>

View File

@@ -54,9 +54,7 @@ export function TourSidebar({ step, setStep }: Props) {
<h5
key={option.key}
className={`flex cursor-pointer items-center gap-2 border-l-[3px] py-0.5 pl-3 pr-2 text-13 font-medium capitalize ${
step === option.key
? "border-custom-primary-100 text-custom-primary-100"
: "border-transparent text-secondary"
step === option.key ? "border-accent-strong text-accent-primary" : "border-transparent text-secondary"
}`}
onClick={() => setStep(option.key)}
role="button"

View File

@@ -271,7 +271,7 @@ export function EditorAIMenu(props: Props) {
className={cn(
"p-1 text-11 text-secondary font-medium bg-layer-1 rounded-sm transition-colors outline-none",
{
"bg-custom-primary-100/20 text-custom-primary-100": tone.key === "default",
"bg-accent-primary/20 text-accent-primary": tone.key === "default",
}
)}
onClick={(e) => {

View File

@@ -93,7 +93,7 @@ export const PageLockControl = observer(function PageLockControl({ page }: Props
type="button"
onClick={toggleLock}
data-ph-element={PROJECT_PAGE_TRACKER_ELEMENTS.LOCK_BUTTON}
className="h-6 flex items-center gap-1 px-2 rounded-sm text-custom-primary-100 bg-custom-primary-100/20 hover:bg-custom-primary-100/30 transition-colors"
className="h-6 flex items-center gap-1 px-2 rounded-sm text-accent-primary bg-accent-primary/20 hover:bg-accent-primary/30 transition-colors"
aria-label="Locked"
>
<LockKeyhole className="flex-shrink-0 size-3.5 animate-lock-icon" />

View File

@@ -44,7 +44,7 @@ export const NotificationCardListRoot = observer(function NotificationCardListRo
</div>
) : (
<div className="py-4 flex justify-center items-center text-13 font-medium" onClick={getNextNotifications}>
<div className="text-custom-primary-90 hover:text-custom-primary-100 transition-all cursor-pointer">
<div className="text-custom-primary-90 hover:text-accent-primary transition-all cursor-pointer">
{t("load_more")}
</div>
</div>

View File

@@ -69,7 +69,7 @@ export const PlanDetail = observer(function PlanDetail(props: TPlanDetailProps)
<div className="flex w-full gap-2 items-center text-18 font-medium">
<span className="transition-all duration-300">{subscriptionName}</span>
{subscriptionType === EProductSubscriptionEnum.PRO && (
<span className="px-2 rounded-sm text-custom-primary-200 bg-custom-primary-100/20 text-11">Popular</span>
<span className="px-2 rounded-sm text-custom-primary-200 bg-accent-primary/20 text-11">Popular</span>
)}
</div>
<div className="flex gap-x-2 items-start text-tertiary pb-1 transition-all duration-300 animate-slide-up">

View File

@@ -16,7 +16,7 @@ export function UpgradeBadge(props: TUpgradeBadge) {
return (
<div
className={cn(
"w-fit cursor-pointer rounded-2xl text-custom-primary-200 bg-custom-primary-100/20 text-center font-medium outline-none",
"w-fit cursor-pointer rounded-2xl text-custom-primary-200 bg-accent-primary/20 text-center font-medium outline-none",
{
"text-13 px-3": size === "md",
"text-11 px-2": size === "sm",

View File

@@ -21,15 +21,15 @@ export function AuthBanner(props: TAuthBanner) {
return (
<div
role="alert"
className="relative flex items-center p-2 rounded-md gap-2 border border-custom-primary-100/50 bg-custom-primary-100/10"
className="relative flex items-center p-2 rounded-md gap-2 border border-accent-strong/50 bg-accent-primary/10"
>
<div className="size-4 flex-shrink-0 grid place-items-center">
<Info size={16} className="text-custom-primary-100" />
<Info size={16} className="text-accent-primary" />
</div>
<p className="w-full text-13 font-medium text-custom-primary-100">{bannerData?.message}</p>
<p className="w-full text-13 font-medium text-accent-primary">{bannerData?.message}</p>
<button
type="button"
className="relative ml-auto size-6 rounded-xs grid place-items-center transition-all hover:bg-custom-primary-100/20 text-custom-primary-100/80"
className="relative ml-auto size-6 rounded-xs grid place-items-center transition-all hover:bg-accent-primary/20 text-accent-primary/80"
onClick={() => handleBannerData?.(undefined)}
aria-label={t("aria_labels.auth_forms.close_alert")}
>

View File

@@ -30,7 +30,7 @@ export function ForgotPasswordPopover() {
<button
type="button"
ref={setReferenceElement}
className="text-11 font-medium text-custom-primary-100 outline-none"
className="text-11 font-medium text-accent-primary outline-none"
>
{t("auth.common.forgot_password")}
</button>

View File

@@ -84,7 +84,7 @@ export const AuthPasswordForm = observer(function AuthPasswordForm(props: Props)
<Link
data-ph-element={AUTH_TRACKER_ELEMENTS.FORGOT_PASSWORD_FROM_SIGNIN}
href={`/accounts/forgot-password?email=${encodeURIComponent(email)}`}
className="text-11 font-medium text-custom-primary-100"
className="text-11 font-medium text-accent-primary"
>
{t("auth.common.forgot_password")}
</Link>
@@ -130,7 +130,7 @@ export const AuthPasswordForm = observer(function AuthPasswordForm(props: Props)
</div>
<div className="w-full text-13 font-medium text-red-500">{t("auth.sign_up.errors.password.strength")}</div>
<div
className="relative ml-auto w-6 h-6 rounded-xs flex justify-center items-center transition-all cursor-pointer hover:bg-red-500/20 text-custom-primary-100/80"
className="relative ml-auto w-6 h-6 rounded-xs flex justify-center items-center transition-all cursor-pointer hover:bg-red-500/20 text-accent-primary/80"
onClick={() => setBannerMessage(false)}
>
<CloseIcon className="w-4 h-4 flex-shrink-0 text-red-500" />

View File

@@ -50,7 +50,7 @@ export const ArchiveTabsList = observer(function ArchiveTabsList() {
<span
className={`flex min-w-min flex-shrink-0 whitespace-nowrap border-b-2 py-4 px-4 text-13 font-medium outline-none ${
pathname.includes(tab.key)
? "border-custom-primary-100 text-custom-primary-100"
? "border-accent-strong text-accent-primary"
: "border-transparent hover:border-subtle-1 text-tertiary hover:text-placeholder"
}`}
>

View File

@@ -46,7 +46,7 @@ export const AuthHeader = observer(function AuthHeader({ type }: AuthHeaderProps
<Link
data-ph-element={AUTH_TRACKER_ELEMENTS.NAVIGATE_TO_SIGN_UP}
href={authContentMap[type].linkHref}
className="font-semibold text-custom-primary-100 hover:underline"
className="font-semibold text-accent-primary hover:underline"
>
{t(authContentMap[type].linkText)}
</Link>

View File

@@ -49,7 +49,7 @@ export const CommentCardDisplay = observer(function CommentCardDisplay(props: Pr
useEffect(() => {
if (!isHashMatch) return;
setHighlightClassName("border-custom-primary-100");
setHighlightClassName("border-accent-strong");
const timeout = setTimeout(() => {
setHighlightClassName("");
}, 8000);

View File

@@ -13,7 +13,7 @@ export function CountChip(props: TCountChip) {
return (
<div
className={cn(
"relative flex justify-center items-center px-2.5 py-0.5 flex-shrink-0 bg-custom-primary-100/20 text-custom-primary-100 text-11 font-semibold rounded-xl",
"relative flex justify-center items-center px-2.5 py-0.5 flex-shrink-0 bg-accent-primary/20 text-accent-primary text-11 font-semibold rounded-xl",
className
)}
>

View File

@@ -85,7 +85,7 @@ export const FilterCreatedBy = observer(function FilterCreatedBy(props: Props) {
{sortedOptions.length > 5 && (
<button
type="button"
className="ml-8 text-11 font-medium text-custom-primary-100"
className="ml-8 text-11 font-medium text-accent-primary"
onClick={handleViewToggle}
>
{itemsToRender === sortedOptions.length ? "View less" : "View all"}

View File

@@ -18,7 +18,7 @@ export const ContentOverflowWrapper = observer(function ContentOverflowWrapper(p
const {
children,
maxHeight = 625,
buttonClassName = "text-13 font-medium text-custom-primary-100",
buttonClassName = "text-13 font-medium text-accent-primary",
containerClassName,
fallback = null,
customButton,
@@ -142,7 +142,7 @@ export const ContentOverflowWrapper = observer(function ContentOverflowWrapper(p
{customButton || (
<button
className={cn(
"gap-1 w-full text-custom-primary-100 text-13 font-medium transition-opacity duration-300",
"gap-1 w-full text-accent-primary text-13 font-medium transition-opacity duration-300",
buttonClassName
)}
onClick={handleToggle}

View File

@@ -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-custom-primary-100" />
<Check className="h-3 w-3 stroke-[2] text-accent-primary" />
) : (
<span className="text-9 text-primary">{`${progress}%`}</span>
)}

View File

@@ -67,7 +67,7 @@ function BorderButton(props: ButtonProps) {
urgent: "bg-red-600/10 text-red-600 border-red-600 px-1",
high: "bg-orange-500/20 text-orange-950 border-orange-500",
medium: "bg-yellow-500/20 text-yellow-950 border-yellow-500",
low: "bg-custom-primary-100/20 text-custom-primary-950 border-custom-primary-100",
low: "bg-accent-primary/20 text-custom-primary-950 border-accent-strong",
none: "hover:bg-layer-1 border-strong",
};

View File

@@ -41,12 +41,9 @@ export const EditorUserMention = observer(function EditorUserMention(props: Prop
return (
<div
className={cn(
"not-prose inline px-1 py-0.5 rounded-sm bg-custom-primary-100/20 text-custom-primary-100 no-underline",
{
"bg-yellow-500/20 text-yellow-500": id === currentUser?.id,
}
)}
className={cn("not-prose inline px-1 py-0.5 rounded-sm bg-accent-primary/20 text-accent-primary no-underline", {
"bg-yellow-500/20 text-yellow-500": id === currentUser?.id,
})}
>
<Popover delay={100} openOnHover>
<Popover.Button>

View File

@@ -25,7 +25,7 @@ export function LiteToolbar({ onSubmit, isSubmitting, isEmpty, executeCommand }:
type="button"
onClick={(e) => onSubmit(e)}
disabled={isEmpty || isSubmitting}
className="p-1 bg-custom-primary-100 hover:bg-custom-primary-200 disabled:bg-custom-text-400 disabled:text-secondary text-primary rounded-sm transition-colors"
className="p-1 bg-accent-primary hover:bg-custom-primary-200 disabled:bg-custom-text-400 disabled:text-secondary text-primary rounded-sm transition-colors"
>
<ArrowUp className="size-3" />
</button>

View File

@@ -63,7 +63,7 @@ export function RadioInput({
name={name}
className={cn(
`group flex flex-shrink-0 size-5 items-center justify-center rounded-full border border-strong-1 bg-custom-background-500 cursor-pointer`,
selected === value ? `bg-custom-primary-200 border-custom-primary-100 ` : ``,
selected === value ? `bg-custom-primary-200 border-accent-strong ` : ``,
disabled ? `bg-custom-background-200 border-subtle-1 cursor-not-allowed` : ``,
inputButtonClassName
)}

View File

@@ -103,7 +103,7 @@ export const EstimateRoot = observer(function EstimateRoot(props: TEstimateRoot)
<a
href={"https://docs.plane.so/core-concepts/projects/run-project#estimate"}
target="_blank"
className="text-custom-primary-100/80 hover:text-custom-primary-100"
className="text-accent-primary/80 hover:text-accent-primary"
>
here.
</a>

View File

@@ -94,7 +94,7 @@ export const useExportColumns = () => {
<>
{rowData.status == "completed" ? (
<a target="_blank" href={rowData?.url} rel="noopener noreferrer">
<button className="w-full flex items-center gap-1 text-custom-primary-100 font-medium">
<button className="w-full flex items-center gap-1 text-accent-primary font-medium">
<Download className="h-4 w-4" />
<div>Download</div>
</button>

View File

@@ -79,9 +79,9 @@ export const PrevExports = observer(function PrevExports(props: Props) {
<button
disabled={!exporterServices?.prev_page_results}
onClick={() => exporterServices?.prev_page_results && setCursor(exporterServices?.prev_cursor)}
className={`flex items-center rounded-sm border border-custom-primary-100 px-1 text-custom-primary-100 ${
className={`flex items-center rounded-sm border border-accent-strong px-1 text-accent-primary ${
exporterServices?.prev_page_results
? "cursor-pointer hover:bg-custom-primary-100 hover:text-white"
? "cursor-pointer hover:bg-accent-primary hover:text-white"
: "cursor-not-allowed opacity-75"
}`}
>
@@ -91,9 +91,9 @@ export const PrevExports = observer(function PrevExports(props: Props) {
<button
disabled={!exporterServices?.next_page_results}
onClick={() => exporterServices?.next_page_results && setCursor(exporterServices?.next_cursor)}
className={`flex items-center rounded-sm border border-custom-primary-100 px-1 text-custom-primary-100 ${
className={`flex items-center rounded-sm border border-accent-strong px-1 text-accent-primary ${
exporterServices?.next_page_results
? "cursor-pointer hover:bg-custom-primary-100 hover:text-white"
? "cursor-pointer hover:bg-accent-primary hover:text-white"
: "cursor-not-allowed opacity-75"
}`}
>

View File

@@ -86,8 +86,8 @@ export const BlockRow = observer(function BlockRow(props: Props) {
className={cn("relative h-full", {
"rounded-l-sm border border-r-0 border-custom-primary-70": getIsIssuePeeked(block.data.id),
"bg-surface-2": isBlockHoveredOn,
"bg-custom-primary-100/5 hover:bg-custom-primary-100/10": isBlockSelected,
"bg-custom-primary-100/10": isBlockSelected && isBlockHoveredOn,
"bg-accent-primary/5 hover:bg-accent-primary/10": isBlockSelected,
"bg-accent-primary/10": isBlockSelected && isBlockHoveredOn,
"border border-r-0 border-strong-1": isBlockFocused,
})}
>

View File

@@ -50,7 +50,7 @@ export const MonthChartView = observer(function MonthChartView(_props: any) {
>
{monthBlock?.title}
{monthBlock.today && (
<span className={cn("rounded-sm ml-2 font-medium bg-custom-primary-100 px-1 text-9 text-white")}>
<span className={cn("rounded-sm ml-2 font-medium bg-accent-primary px-1 text-9 text-white")}>
Current
</span>
)}
@@ -66,7 +66,7 @@ export const MonthChartView = observer(function MonthChartView(_props: any) {
className={cn(
"flex flex-shrink-0 py-1 px-2 text-center capitalize justify-between outline-[0.25px] outline-subtle-1",
{
"bg-custom-primary-100/20": weekBlock.today,
"bg-accent-primary/20": weekBlock.today,
}
)}
style={{ width: `${currentViewData?.data.dayWidth * 7}px` }}
@@ -74,7 +74,7 @@ export const MonthChartView = observer(function MonthChartView(_props: any) {
<div className="space-x-1 text-11 font-medium text-placeholder">
<span
className={cn({
"rounded-sm bg-custom-primary-100 px-1 text-white": weekBlock.today,
"rounded-sm bg-accent-primary px-1 text-white": weekBlock.today,
})}
>
{weekBlock.startDate.getDate()}-{weekBlock.endDate.getDate()}
@@ -91,7 +91,7 @@ export const MonthChartView = observer(function MonthChartView(_props: any) {
<div
key={`column-${weekBlock.startDate}-${weekBlock.endDate}`}
className={cn("h-full overflow-hidden outline-[0.25px] outline-subtle", {
"bg-custom-primary-100/20": weekBlock.today,
"bg-accent-primary/20": weekBlock.today,
})}
style={{ width: `${currentViewData?.data.dayWidth * 7}px` }}
/>

View File

@@ -40,7 +40,7 @@ export const QuarterChartView = observer(function QuarterChartView(_props: any)
>
{quarterBlock?.title}
{quarterBlock.today && (
<span className={cn("rounded-sm ml-2 font-medium bg-custom-primary-100 px-1 text-9 text-white")}>
<span className={cn("rounded-sm ml-2 font-medium bg-accent-primary px-1 text-9 text-white")}>
Current
</span>
)}
@@ -57,7 +57,7 @@ export const QuarterChartView = observer(function QuarterChartView(_props: any)
className={cn(
"flex flex-shrink-0 text-center capitalize justify-center outline-[0.25px] outline outline-subtle-1",
{
"bg-custom-primary-100/20": monthBlock.today,
"bg-accent-primary/20": monthBlock.today,
}
)}
style={{ width: `${currentViewData?.data.dayWidth * monthBlock.days}px` }}
@@ -65,7 +65,7 @@ export const QuarterChartView = observer(function QuarterChartView(_props: any)
<div className="space-x-1 flex items-center justify-center text-11 font-medium h-full">
<span
className={cn({
"rounded-lg bg-custom-primary-100 px-2 text-white": monthBlock.today,
"rounded-lg bg-accent-primary px-2 text-white": monthBlock.today,
})}
>
{monthBlock.monthData.shortTitle}
@@ -81,7 +81,7 @@ export const QuarterChartView = observer(function QuarterChartView(_props: any)
<div
key={`column-${rootIndex}-${index}`}
className={cn("h-full overflow-hidden outline-[0.25px] outline outline-subtle", {
"bg-custom-primary-100/20": monthBlock.today,
"bg-accent-primary/20": monthBlock.today,
})}
style={{ width: `${currentViewData?.data.dayWidth * monthBlock.days}px` }}
/>

View File

@@ -49,7 +49,7 @@ export const WeekChartView = observer(function WeekChartView(_props: any) {
className={cn(
"flex flex-shrink-0 p-1 text-center capitalize justify-between outline-[0.25px] outline outline-subtle-1",
{
"bg-custom-primary-100/20": weekDay.today,
"bg-accent-primary/20": weekDay.today,
}
)}
style={{ width: `${currentViewData?.data.dayWidth}px` }}
@@ -58,7 +58,7 @@ export const WeekChartView = observer(function WeekChartView(_props: any) {
<div className="space-x-1 text-11 font-medium">
<span
className={cn({
"rounded-sm bg-custom-primary-100 px-1 text-white": weekDay.today,
"rounded-sm bg-accent-primary px-1 text-white": weekDay.today,
})}
>
{weekDay.date.getDate()}
@@ -74,7 +74,7 @@ export const WeekChartView = observer(function WeekChartView(_props: any) {
<div
key={`column-${rootIndex}-${index}`}
className={cn("h-full overflow-hidden outline-[0.25px] outline outline-subtle", {
"bg-custom-primary-100/20": weekDay.today,
"bg-accent-primary/20": weekDay.today,
})}
style={{ width: `${currentViewData?.data.dayWidth}px` }}
>

View File

@@ -49,8 +49,8 @@ export const IssuesSidebarBlock = observer(function IssuesSidebarBlock(props: Pr
<Row
className={cn("group w-full flex items-center gap-2 pr-4", {
"bg-surface-2": isBlockHoveredOn,
"bg-custom-primary-100/5 hover:bg-custom-primary-100/10": isIssueSelected,
"bg-custom-primary-100/10": isIssueSelected && isBlockHoveredOn,
"bg-accent-primary/5 hover:bg-accent-primary/10": isIssueSelected,
"bg-accent-primary/10": isIssueSelected && isBlockHoveredOn,
})}
style={{
height: `${BLOCK_HEIGHT}px`,

View File

@@ -153,7 +153,7 @@ export const NoProjectsEmptyState = observer(function NoProjectsEmptyState() {
<div key={item.id} className="flex flex-col p-4 bg-surface-1 rounded-xl border border-subtle-1/40">
<div
className={cn("grid place-items-center bg-surface-2 rounded-full size-9 mb-3 text-placeholder", {
"text-custom-primary-100 bg-custom-primary-100/10": !isStateComplete,
"text-accent-primary bg-accent-primary/10": !isStateComplete,
})}
>
<span className="text-24 my-auto">{item.icon}</span>
@@ -162,7 +162,7 @@ export const NoProjectsEmptyState = observer(function NoProjectsEmptyState() {
<p className="text-11 text-tertiary mb-2">{t(item.description)}</p>
{isStateComplete ? (
<div className="flex items-center gap-2 bg-[#17a34a] rounded-full p-1 w-fit">
<Check className="size-3 text-custom-primary-100 text-white" />
<Check className="size-3 text-accent-primary text-white" />
</div>
) : (
!item.cta.disabled &&
@@ -180,14 +180,14 @@ export const NoProjectsEmptyState = observer(function NoProjectsEmptyState() {
[item.flag]: true,
});
}}
className={cn("text-custom-primary-100 hover:text-custom-primary-200 text-13 font-medium", {})}
className={cn("text-accent-primary hover:text-custom-primary-200 text-13 font-medium", {})}
>
{t(item.cta.text)}
</Link>
) : (
<button
type="button"
className="text-custom-primary-100 hover:text-custom-primary-200 text-13 font-medium"
className="text-accent-primary hover:text-custom-primary-200 text-13 font-medium"
onClick={item.cta.onClick}
>
{t(item.cta.text)}

View File

@@ -44,7 +44,7 @@ export const DashboardQuickLinks = observer(function DashboardQuickLinks(props:
<div className="text-14 font-semibold text-custom-text-350">{t("home.quick_links.title_plural")}</div>
<button
onClick={handleCreateLinkModal}
className="flex gap-1 text-13 font-medium text-custom-primary-100 my-auto"
className="flex gap-1 text-13 font-medium text-accent-primary my-auto"
>
<Plus className="size-4 my-auto" /> <span>{t("home.quick_links.add")}</span>
</button>

View File

@@ -92,10 +92,7 @@ export const InboxIssueActionsMobileHeader = observer(function InboxIssueActions
)}
<PanelLeft
onClick={() => setIsMobileSidebar(!isMobileSidebar)}
className={cn(
"w-4 h-4 flex-shrink-0 mr-2 my-auto",
isMobileSidebar ? "text-custom-primary-100" : "text-secondary"
)}
className={cn("w-4 h-4 flex-shrink-0 mr-2 my-auto", isMobileSidebar ? "text-accent-primary" : "text-secondary")}
/>
<div className="flex items-center gap-2 w-full bg-surface-1 z-[15]">
<div className="flex items-center gap-x-2">

View File

@@ -65,7 +65,7 @@ export const FilterLabels = observer(function FilterLabels(props: Props) {
{filteredOptions.length > 5 && (
<button
type="button"
className="ml-8 text-11 font-medium text-custom-primary-100"
className="ml-8 text-11 font-medium text-accent-primary"
onClick={handleViewToggle}
>
{itemsToRender === filteredOptions.length ? "View less" : "View all"}

View File

@@ -94,7 +94,7 @@ export const FilterMember = observer(function FilterMember(props: Props) {
{sortedOptions.length > 5 && (
<button
type="button"
className="ml-8 text-11 font-medium text-custom-primary-100"
className="ml-8 text-11 font-medium text-accent-primary"
onClick={handleViewToggle}
>
{itemsToRender === sortedOptions.length ? "View less" : "View all"}

View File

@@ -70,7 +70,7 @@ export const FilterState = observer(function FilterState(props: Props) {
{filteredOptions.length > 5 && (
<button
type="button"
className="ml-8 text-11 font-medium text-custom-primary-100"
className="ml-8 text-11 font-medium text-accent-primary"
onClick={handleViewToggle}
>
{itemsToRender === filteredOptions.length ? "View less" : "View all"}

View File

@@ -74,7 +74,7 @@ export const InboxIssueRoot = observer(function InboxIssueRoot(props: TInboxIssu
<div className="flex lg:hidden items-center px-4 w-full h-12 border-b border-subtle-1">
<PanelLeft
onClick={() => setIsMobileSidebar(!isMobileSidebar)}
className={cn("w-4 h-4 ", isMobileSidebar ? "text-custom-primary-100" : " text-secondary")}
className={cn("w-4 h-4 ", isMobileSidebar ? "text-accent-primary" : " text-secondary")}
/>
</div>
)}

View File

@@ -60,7 +60,7 @@ export const InboxIssueListItem = observer(function InboxIssueListItem(props: In
<Row
className={cn(
`flex flex-col gap-2 relative border border-t-transparent border-l-transparent border-r-transparent border-b-subtle-1 py-4 hover:bg-custom-primary/5 cursor-pointer transition-all`,
{ "border-custom-primary-100 border": selectedInboxIssueId === issue.id }
{ "border-accent-strong border": selectedInboxIssueId === issue.id }
)}
>
<div className="space-y-1">

View File

@@ -85,7 +85,7 @@ export const InboxSidebar = observer(function InboxSidebar(props: IInboxSidebarP
key={option?.key}
className={cn(
`text-13 relative flex items-center gap-1 h-full px-3 cursor-pointer transition-all font-medium`,
currentTab === option?.key ? `text-custom-primary-100` : `hover:text-secondary`
currentTab === option?.key ? `text-accent-primary` : `hover:text-secondary`
)}
onClick={() => {
if (currentTab != option?.key) {
@@ -96,14 +96,14 @@ export const InboxSidebar = observer(function InboxSidebar(props: IInboxSidebarP
>
<div>{t(option?.i18n_label)}</div>
{option?.key === "open" && currentTab === option?.key && (
<div className="rounded-full p-1.5 py-0.5 bg-custom-primary-100/20 text-custom-primary-100 text-11 font-semibold">
<div className="rounded-full p-1.5 py-0.5 bg-accent-primary/20 text-accent-primary text-11 font-semibold">
{inboxIssuePaginationInfo?.total_results || 0}
</div>
)}
<div
className={cn(
`border absolute bottom-0 right-0 left-0 rounded-t-md`,
currentTab === option?.key ? `border-custom-primary-100` : `border-transparent`
currentTab === option?.key ? `border-accent-strong` : `border-transparent`
)}
/>
</div>

View File

@@ -11,8 +11,8 @@ export function BulkOperationsUpgradeBanner(props: Props) {
return (
<div className={cn("sticky bottom-0 left-0 h-20 z-[2] px-3.5 grid place-items-center", className)}>
<div className="h-14 w-full bg-custom-primary-100/10 border-[0.5px] border-custom-primary-100/50 py-4 px-3.5 flex items-center justify-between gap-2 rounded-md">
<p className="text-custom-primary-100 font-medium">
<div className="h-14 w-full bg-accent-primary/10 border-[0.5px] border-accent-strong/50 py-4 px-3.5 flex items-center justify-between gap-2 rounded-md">
<p className="text-accent-primary font-medium">
Change state, priority, and more for several work items at once. Save three minutes on an average per
operation.
</p>

View File

@@ -50,7 +50,7 @@ export const SubIssueDisplayFilters = observer(function SubIssueDisplayFilters(p
isFilterApplied && "bg-custom-primary-60/20"
)}
>
{isFilterApplied && <span className="p-1 rounded-full bg-custom-primary-100 absolute -top-1 -right-1" />}
{isFilterApplied && <span className="p-1 rounded-full bg-accent-primary absolute -top-1 -right-1" />}
<SlidersHorizontal className="h-3.5 w-3.5 text-primary" />
</div>
}

View File

@@ -48,7 +48,7 @@ export const SubIssueFilters = observer(function SubIssueFilters(props: TSubIssu
isFilterApplied && "bg-custom-primary-60/20"
)}
>
{isFilterApplied && <span className="p-1 rounded-full bg-custom-primary-100 absolute -top-1 -right-1" />}
{isFilterApplied && <span className="p-1 rounded-full bg-accent-primary absolute -top-1 -right-1" />}
<ListFilter className="h-3.5 w-3.5 text-primary" />
</div>
}

View File

@@ -32,7 +32,7 @@ export const ActivityFilter = observer(function ActivityFilter(props: TActivityF
>
<span className="text-secondary">{t("common.filters")}</span>
{selectedFilters.length < filterOptions.length && (
<span className="absolute h-2 w-2 -right-0.5 -top-0.5 bg-custom-primary-100 rounded-full" />
<span className="absolute h-2 w-2 -right-0.5 -top-0.5 bg-accent-primary rounded-full" />
)}
</Button>
}

View File

@@ -80,7 +80,7 @@ export const IssueSubscription = observer(function IssueSubscription(props: TIss
size="sm"
prependIcon={isSubscribed ? <BellOff /> : <Bell className="h-3 w-3" />}
variant="outline-primary"
className="hover:!bg-custom-primary-100/20"
className="hover:!bg-accent-primary/20"
onClick={handleSubscription}
disabled={!isEditable || loading}
>

View File

@@ -158,7 +158,7 @@ export const CalendarDayTile = observer(function CalendarDayTile(props: Props) {
>
{date.date.getDate() === 1 && MONTHS_LIST[date.date.getMonth() + 1].shortTitle + " "}
{isToday ? (
<span className="flex h-5 w-5 items-center justify-center rounded-full bg-custom-primary-100 text-white">
<span className="flex h-5 w-5 items-center justify-center rounded-full bg-accent-primary text-white">
{date.date.getDate()}
</span>
) : (
@@ -207,8 +207,8 @@ export const CalendarDayTile = observer(function CalendarDayTile(props: Props) {
>
<div
className={cn("size-6 flex items-center justify-center rounded-full", {
"bg-custom-primary-100 text-white": isSelectedDate,
"bg-custom-primary-100/10 text-custom-primary-100 ": isToday && !isSelectedDate,
"bg-accent-primary text-white": isSelectedDate,
"bg-accent-primary/10 text-accent-primary ": isToday && !isSelectedDate,
})}
>
{date.date.getDate()}

View File

@@ -107,7 +107,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-custom-primary-100": isDragging,
"bg-surface-2 shadow-custom-shadow-rg border-accent-strong": isDragging,
"bg-surface-1 hover:bg-surface-2": !isDragging,
"border border-custom-primary-70 hover:border-custom-primary-70": getIsIssuePeeked(issue.id),
}

View File

@@ -99,7 +99,7 @@ export const CalendarIssueBlocks = observer(function CalendarIssueBlocks(props:
<div className="flex items-center px-2.5 py-1">
<button
type="button"
className="w-min whitespace-nowrap rounded-sm text-11 px-1.5 py-1 font-medium hover:bg-layer-1 text-custom-primary-100 hover:text-custom-primary-200"
className="w-min whitespace-nowrap rounded-sm text-11 px-1.5 py-1 font-medium hover:bg-layer-1 text-accent-primary hover:text-custom-primary-200"
onClick={() => loadMoreIssues(formattedDatePayload)}
>
{t("common.load_more")}

View File

@@ -27,7 +27,7 @@ export const CalendarWeekHeader = observer(function CalendarWeekHeader(props: Pr
}`}
>
{isLoading && (
<div className="absolute h-[1.5px] w-3/4 animate-[bar-loader_2s_linear_infinite] bg-custom-primary-100" />
<div className="absolute h-[1.5px] w-3/4 animate-[bar-loader_2s_linear_infinite] bg-accent-primary" />
)}
{orderedDays.map((day) => {
if (!showWeekends && (day.value === EStartOfTheWeek.SUNDAY || day.value === EStartOfTheWeek.SATURDAY))

View File

@@ -74,7 +74,7 @@ export const FilterDisplayProperties = observer(function FilterDisplayProperties
type="button"
className={`rounded-sm border px-2 py-0.5 text-11 transition-all ${
displayProperties?.[displayProperty.key]
? "border-custom-primary-100 bg-custom-primary-100 text-white"
? "border-accent-strong bg-accent-primary text-white"
: "border-subtle-1 hover:bg-layer-1"
}`}
onClick={() =>

View File

@@ -85,7 +85,7 @@ export const FilterAssignees = observer(function FilterAssignees(props: Props) {
{sortedOptions.length > 5 && (
<button
type="button"
className="ml-8 text-11 font-medium text-custom-primary-100"
className="ml-8 text-11 font-medium text-accent-primary"
onClick={handleViewToggle}
>
{itemsToRender === sortedOptions.length ? "View less" : "View all"}

View File

@@ -78,7 +78,7 @@ export const FilterCreatedBy = observer(function FilterCreatedBy(props: Props) {
{sortedOptions.length > 5 && (
<button
type="button"
className="ml-8 text-11 font-medium text-custom-primary-100"
className="ml-8 text-11 font-medium text-accent-primary"
onClick={handleViewToggle}
>
{itemsToRender === sortedOptions.length ? "View less" : "View all"}

View File

@@ -81,7 +81,7 @@ export const FilterCycle = observer(function FilterCycle(props: Props) {
{sortedOptions.length > 5 && (
<button
type="button"
className="ml-8 text-11 font-medium text-custom-primary-100"
className="ml-8 text-11 font-medium text-accent-primary"
onClick={handleViewToggle}
>
{itemsToRender === sortedOptions.length ? "View less" : "View all"}

View File

@@ -71,7 +71,7 @@ export const FilterLabels = observer(function FilterLabels(props: Props) {
{sortedOptions.length > 5 && (
<button
type="button"
className="ml-8 text-11 font-medium text-custom-primary-100"
className="ml-8 text-11 font-medium text-accent-primary"
onClick={handleViewToggle}
>
{itemsToRender === sortedOptions.length ? "View less" : "View all"}

View File

@@ -85,7 +85,7 @@ export const FilterMentions = observer(function FilterMentions(props: Props) {
{sortedOptions.length > 5 && (
<button
type="button"
className="ml-8 text-11 font-medium text-custom-primary-100"
className="ml-8 text-11 font-medium text-accent-primary"
onClick={handleViewToggle}
>
{itemsToRender === sortedOptions.length ? "View less" : "View all"}

View File

@@ -71,7 +71,7 @@ export const FilterModule = observer(function FilterModule(props: Props) {
{sortedOptions.length > 5 && (
<button
type="button"
className="ml-8 text-11 font-medium text-custom-primary-100"
className="ml-8 text-11 font-medium text-accent-primary"
onClick={handleViewToggle}
>
{itemsToRender === sortedOptions.length ? "View less" : "View all"}

View File

@@ -72,7 +72,7 @@ export const FilterProjects = observer(function FilterProjects(props: Props) {
{sortedOptions.length > 5 && (
<button
type="button"
className="ml-8 text-11 font-medium text-custom-primary-100"
className="ml-8 text-11 font-medium text-accent-primary"
onClick={handleViewToggle}
>
{itemsToRender === sortedOptions.length ? "View less" : "View all"}

View File

@@ -52,7 +52,7 @@ export const FilterStateGroup = observer(function FilterStateGroup(props: Props)
{filteredOptions.length > 5 && (
<button
type="button"
className="ml-8 text-11 font-medium text-custom-primary-100"
className="ml-8 text-11 font-medium text-accent-primary"
onClick={handleViewToggle}
>
{itemsToRender === filteredOptions.length ? "View less" : "View all"}

View File

@@ -70,7 +70,7 @@ export const FilterState = observer(function FilterState(props: Props) {
{sortedOptions.length > 5 && (
<button
type="button"
className="ml-8 text-11 font-medium text-custom-primary-100"
className="ml-8 text-11 font-medium text-accent-primary"
onClick={handleViewToggle}
>
{itemsToRender === sortedOptions.length ? "View less" : "View all"}

View File

@@ -75,7 +75,7 @@ export function FiltersDropdown(props: Props) {
<span>{title}</span>
</div>
{isFiltersApplied && (
<span className="absolute h-2 w-2 -right-0.5 -top-0.5 bg-custom-primary-100 rounded-full" />
<span className="absolute h-2 w-2 -right-0.5 -top-0.5 bg-accent-primary rounded-full" />
)}
</>
</Button>

View File

@@ -22,7 +22,7 @@ export function FilterOption(props: Props) {
>
<div
className={`grid h-3 w-3 flex-shrink-0 place-items-center border bg-surface-2 ${
isChecked ? "border-custom-primary-100 bg-custom-primary-100 text-white" : "border-strong"
isChecked ? "border-accent-strong bg-accent-primary text-white" : "border-strong"
} ${multiple ? "rounded-xs" : "rounded-full"}`}
>
{isChecked && <Check size={10} strokeWidth={3} />}
@@ -32,7 +32,7 @@ export function FilterOption(props: Props) {
<div className="flex-grow truncate text-11 text-secondary">{title}</div>
</div>
{activePulse && (
<div className="flex-shrink-0 text-11 w-2 h-2 rounded-full bg-custom-primary-100 animate-pulse ml-auto" />
<div className="flex-shrink-0 text-11 w-2 h-2 rounded-full bg-accent-primary animate-pulse ml-auto" />
)}
</button>
);

View File

@@ -255,7 +255,7 @@ export const KanbanGroup = observer(function KanbanGroup(props: IKanbanGroup) {
<KanbanIssueBlockLoader />
) : (
<div
className="w-full sticky bottom-0 p-3 text-13 font-medium text-custom-primary-100 hover:text-custom-primary-200 hover:underline cursor-pointer"
className="w-full sticky bottom-0 p-3 text-13 font-medium text-accent-primary hover:text-custom-primary-200 hover:underline cursor-pointer"
onClick={loadMoreIssuesInThisGroup}
>
{t("common.load_more")} &darr;

View File

@@ -178,7 +178,7 @@ export const IssueBlock = observer(function IssueBlock(props: IssueBlockProps) {
"border-custom-primary-70": getIsIssuePeeked(issue.id) && peekIssue?.nestingLevel === nestingLevel,
"border-strong-1": isIssueActive,
"last:border-b-transparent": !getIsIssuePeeked(issue.id) && !isIssueActive,
"bg-custom-primary-100/5 hover:bg-custom-primary-100/10": isIssueSelected,
"bg-accent-primary/5 hover:bg-accent-primary/10": isIssueSelected,
"bg-layer-1": isCurrentBlockDragging,
"md:flex-row md:items-center": isSidebarCollapsed,
"lg:flex-row lg:items-center": !isSidebarCollapsed,

View File

@@ -128,7 +128,7 @@ export const ListGroup = observer(function ListGroup(props: Props) {
) : (
<div
className={
"h-11 relative flex items-center gap-3 bg-surface-1 border border-transparent border-t-subtle-1 pl-8 p-3 text-13 font-medium text-custom-primary-100 hover:text-custom-primary-200 hover:underline cursor-pointer"
"h-11 relative flex items-center gap-3 bg-surface-1 border border-transparent border-t-subtle-1 pl-8 p-3 text-13 font-medium text-accent-primary hover:text-custom-primary-200 hover:underline cursor-pointer"
}
onClick={() => loadMoreIssues(group.id)}
>
@@ -251,7 +251,7 @@ export const ListGroup = observer(function ListGroup(props: Props) {
<div
ref={groupRef}
className={cn(`relative flex flex-shrink-0 flex-col border-[1px] border-transparent`, {
"border-custom-primary-100": isDraggingOverColumn,
"border-accent-strong": isDraggingOverColumn,
"border-custom-error-200": isDraggingOverColumn && isDropDisabled,
})}
>

View File

@@ -36,7 +36,7 @@ export const SpreadsheetAssigneeColumn = observer(function SpreadsheetAssigneeCo
buttonVariant={
issue?.assignee_ids && issue.assignee_ids.length > 1 ? "transparent-without-text" : "transparent-with-text"
}
buttonClassName="text-left rounded-none group-[.selected-issue-row]:bg-custom-primary-100/5 group-[.selected-issue-row]:hover:bg-custom-primary-100/10 px-page-x"
buttonClassName="text-left rounded-none group-[.selected-issue-row]:bg-accent-primary/5 group-[.selected-issue-row]:hover:bg-accent-primary/10 px-page-x"
buttonContainerClassName="w-full"
optionsClassName="z-[9]"
onClose={onClose}

View File

@@ -12,7 +12,7 @@ export const SpreadsheetAttachmentColumn = observer(function SpreadsheetAttachme
const { issue } = props;
return (
<Row className="flex h-11 w-full items-center border-b-[0.5px] border-subtle-1 py-1 text-11 hover:bg-layer-1 group-[.selected-issue-row]:bg-custom-primary-100/5 group-[.selected-issue-row]:hover:bg-custom-primary-100/10">
<Row className="flex h-11 w-full items-center border-b-[0.5px] border-subtle-1 py-1 text-11 hover:bg-layer-1 group-[.selected-issue-row]:bg-accent-primary/5 group-[.selected-issue-row]:hover:bg-accent-primary/10">
{issue?.attachment_count ?? 0} {issue?.attachment_count === 1 ? "attachment" : "attachments"}
</Row>
);

View File

@@ -14,7 +14,7 @@ export const SpreadsheetCreatedOnColumn = observer(function SpreadsheetCreatedOn
const { issue } = props;
return (
<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-custom-primary-100/5 group-[.selected-issue-row]:hover:bg-custom-primary-100/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.created_at)}
</Row>
);

View File

@@ -49,7 +49,7 @@ export const SpreadsheetCycleColumn = observer(function SpreadsheetCycleColumn(p
disabled={disabled}
placeholder="Select cycle"
buttonVariant="transparent-with-text"
buttonContainerClassName="w-full relative flex items-center p-2 group-[.selected-issue-row]:bg-custom-primary-100/5 group-[.selected-issue-row]:hover:bg-custom-primary-100/10 px-page-x"
buttonContainerClassName="w-full relative flex items-center p-2 group-[.selected-issue-row]:bg-accent-primary/5 group-[.selected-issue-row]:hover:bg-accent-primary/10 px-page-x"
buttonClassName="relative leading-4 h-4.5 bg-transparent hover:bg-transparent px-0"
onClose={onClose}
/>

View File

@@ -46,7 +46,7 @@ export const SpreadsheetDueDateColumn = observer(function SpreadsheetDueDateColu
buttonVariant="transparent-with-text"
buttonContainerClassName="w-full"
buttonClassName={cn(
"rounded-none text-left group-[.selected-issue-row]:bg-custom-primary-100/5 group-[.selected-issue-row]:hover:bg-custom-primary-100/10 px-page-x",
"rounded-none text-left group-[.selected-issue-row]:bg-accent-primary/5 group-[.selected-issue-row]:hover:bg-accent-primary/10 px-page-x",
{
"text-red-500": shouldHighlightIssueDueDate(issue.target_date, stateDetails?.group),
}

View File

@@ -25,7 +25,7 @@ export const SpreadsheetEstimateColumn = observer(function SpreadsheetEstimateCo
projectId={issue.project_id ?? undefined}
disabled={disabled}
buttonVariant="transparent-with-text"
buttonClassName="text-left rounded-none group-[.selected-issue-row]:bg-custom-primary-100/5 group-[.selected-issue-row]:hover:bg-custom-primary-100/10 px-page-x"
buttonClassName="text-left rounded-none group-[.selected-issue-row]:bg-accent-primary/5 group-[.selected-issue-row]:hover:bg-accent-primary/10 px-page-x"
buttonContainerClassName="w-full"
onClose={onClose}
/>

View File

@@ -29,7 +29,7 @@ export const SpreadsheetLabelColumn = observer(function SpreadsheetLabelColumn(p
defaultOptions={defaultLabelOptions}
onChange={(data) => onChange(issue, { label_ids: data }, { changed_property: "labels", change_details: data })}
className="h-full w-full "
buttonClassName="px-page-x w-full h-full group-[.selected-issue-row]:bg-custom-primary-100/5 group-[.selected-issue-row]:hover:bg-custom-primary-100/10 rounded-none"
buttonClassName="px-page-x w-full h-full group-[.selected-issue-row]:bg-accent-primary/5 group-[.selected-issue-row]:hover:bg-accent-primary/10 rounded-none"
hideDropdownArrow
maxRender={1}
disabled={disabled}

View File

@@ -12,7 +12,7 @@ export const SpreadsheetLinkColumn = observer(function SpreadsheetLinkColumn(pro
const { issue } = props;
return (
<Row className="flex h-11 w-full items-center border-b-[0.5px] border-subtle-1 px-2.5 py-1 text-11 hover:bg-layer-1 group-[.selected-issue-row]:bg-custom-primary-100/5 group-[.selected-issue-row]:hover:bg-custom-primary-100/10 px-page-x">
<Row className="flex h-11 w-full items-center border-b-[0.5px] border-subtle-1 px-2.5 py-1 text-11 hover:bg-layer-1 group-[.selected-issue-row]:bg-accent-primary/5 group-[.selected-issue-row]:hover:bg-accent-primary/10 px-page-x">
{issue?.link_count ?? 0} {issue?.link_count === 1 ? "link" : "links"}
</Row>
);

View File

@@ -59,7 +59,7 @@ export const SpreadsheetModuleColumn = observer(function SpreadsheetModuleColumn
disabled={disabled}
placeholder="Select modules"
buttonVariant="transparent-with-text"
buttonContainerClassName="w-full relative flex items-center p-2 group-[.selected-issue-row]:bg-custom-primary-100/5 group-[.selected-issue-row]:hover:bg-custom-primary-100/10 px-page-x"
buttonContainerClassName="w-full relative flex items-center p-2 group-[.selected-issue-row]:bg-accent-primary/5 group-[.selected-issue-row]:hover:bg-accent-primary/10 px-page-x"
buttonClassName="relative leading-4 h-4.5 bg-transparent hover:bg-transparent !px-0"
onClose={onClose}
multiple

View File

@@ -22,7 +22,7 @@ export const SpreadsheetPriorityColumn = observer(function SpreadsheetPriorityCo
onChange={(data) => onChange(issue, { priority: data }, { changed_property: "priority", change_details: data })}
disabled={disabled}
buttonVariant="transparent-with-text"
buttonClassName="text-left rounded-none group-[.selected-issue-row]:bg-custom-primary-100/5 group-[.selected-issue-row]:hover:bg-custom-primary-100/10 px-page-x"
buttonClassName="text-left rounded-none group-[.selected-issue-row]:bg-accent-primary/5 group-[.selected-issue-row]:hover:bg-accent-primary/10 px-page-x"
buttonContainerClassName="w-full"
onClose={onClose}
/>

Some files were not shown because too many files have changed in this diff Show More